본문 바로가기
Python

Python] API 만들고 사용하기

김코식 2022. 11. 3. 
headers = {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://www.genie.co.kr/chart/top200?ditc=M&rtm=N&ymd=20210701', headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')

title = soup.select_one("meta[property = 'og:title']")['content']
image = soup.select_one("meta[property = 'og:image']")['content']
desc = soup.select_one("meta[property = 'og:description']")['content']

API

응용 프로그램에서 사용할 수 있도록, 

운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스

(특정 사이트에서 특정 데이터를 공유할 경우 어떻게 정보를 요청하거나 제공받을지에 대한 규격)

 

요청을 보내는 애플리케이션 클라이언트, 

응답을 보내는 애플리케이션 서버

목표 

1. 영화 url, 별점, 한줄평을 적고 기록하기 클릭시 데이터베이스에 영화제목, 영화포스터, 영화소개 ,별점, 한줄평정보 저장

2. 불러오기 클릭시 데이터베이스에 있는 영화 정보 불러오기

 

 

1. flask 기본 틀

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

@app.route('/')
def home():
   return render_template('index.html')

@app.route("/movie", methods=["POST"])
def movie_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg':'POST 연결 완료!'})

@app.route("/movie", methods=["GET"])
def movie_get():
    return jsonify({'msg':'GET 연결 완료!'})

if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)

 

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>스파르타 피디아</title>

    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .mytitle {
            width: 100%;
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mytitle > button {
            width: 200px;
            height: 50px;

            background-color: transparent;
            color: white;

            border-radius: 50px;
            border: 1px solid white;

            margin-top: 10px;
        }

        .mytitle > button:hover {
            border: 2px solid white;
        }

        .mycomment {
            color: gray;
        }

        .mycards {
            margin: 20px auto 0px auto;
            width: 95%;
            max-width: 1200px;
        }

        .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 0px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px gray;

            display: none;
        }

        .mybtns {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            margin-top: 20px;
        }
        .mybtns > button {
            margin-right: 10px;
        }
    </style>
    <script>
        function open_box(){
            $('#post-box').show()
        }
    </script>
</head>

<body>
<div class="mytitle">
    <h1>내 생애 최고의 영화들</h1>
    <button onclick="open_box()">영화 기록하기</button>
</div>
<div class="mypost" id="post-box">
    <div class="form-floating mb-3">
        <input id="url" type="email" class="form-control" placeholder="name@example.com">
        <label>영화URL</label>
    </div>
    <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">별점</label>
        <select class="form-select" id="star">
            <option selected>-- 선택하기 --</option>
            <option value="1">⭐</option>
            <option value="2">⭐⭐</option>
            <option value="3">⭐⭐⭐</option>
            <option value="4">⭐⭐⭐⭐</option>
            <option value="5">⭐⭐⭐⭐⭐</option>
        </select>
    </div>
    <div class="form-floating">
        <textarea id="comment" class="form-control" placeholder="Leave a comment here"></textarea>
        <label for="floatingTextarea2">코멘트</label>
    </div>
    <div class="mybtns">
        <button onclick="posting()" type="button" class="btn btn-dark">기록하기</button>
        <button onclick="close_box()" type="button" class="btn btn-outline-dark">불러오기</button>
    </div>
</div>
<div class="mycards">
    <div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>

1. DB에 정보 보내기(서버)

 

1-1) index에서 받아오는 정보  post에 작성

url_receive = request.form['url_give']
star_receive = request.form['star_give']
comment_receive = request.form['comment_give']

 

 

1-2) 메타 데이터 크롤링

<head></head> 안에있는 메타데이터 중 필요한 코드 확인

"meta[property='og:title']"
"meta[property = 'og:image']"
"meta[property = 'og:description']"

1-3) 크롤링한 데이터 post에 작성

headers = {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://www.genie.co.kr/chart/top200?ditc=M&rtm=N&ymd=20210701', headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')

title = soup.select_one("meta[property = 'og:title']")['content']
image = soup.select_one("meta[property = 'og:image']")['content']
desc = soup.select_one("meta[property = 'og:description']")['content']

 

1-4)DB에 정보 보내기

doc = {'title': title,
       'image': image,
       'desc': desc,
       'star': star_receive,
       'comment': comment_receive
       }
db.movies.insert_one(doc)
return jsonify({'msg':'저장완료!'})

2. DB에 정보 보내기(클라이언트)

 

2-1) 기록하기 버튼 클릭시  input된 데이터 추출하기

버튼 클릭시 함수 생성

function posting() {
}

 

input된 데이터 추출

let url = $('#url').val()
let star = $('#star').val()
let comment = $('#comment').val()

ajax를 통해 서버에 파일 전송

$.ajax({
    type: 'POST',
    url: '/movie',
    data: {url_give: url,star_give: star,comment_give:comment},
    success: function (response) {
        alert(response['msg'])
        window.location.reload()
    }
});

실행시 

저장 성공

3.DB에 있는 정보 불러오기(서버)

 

3-1)DB에 있는 모든 정보 불러오기

@app.route("/movie", methods=["GET"])
def movie_get():
    movie_list = list(db.movies.find({}, {'_id': False}))
    return jsonify({'movies':movie_list})

 4.DB에 있는 정보 불러오기(클라이언트)

4-1) 불러오기 클릭시 데이터 불러오기 

함수 생성

function update() {
}
$.ajax({
    type: 'GET',
    url: '/movie',
    data: {},
    success: function (response) {

4-2반복문을 통해 DB에 모든 데이터 불러오기

let rows = response['movies']
for (let i = 0; i < rows.length; i++) {
    let comment = rows[i]['comment']
    let title = rows[i]['title']
    let desc = rows[i]['desc']
    let image = rows[i]['image']
    let star = rows[i]['star']

    let star_image = '⭐'.repeat(star)

4-3)포스터 틀안에 데이터 넣기

let temp_html = `<div class="col">
                    <div class="card h-100">
                        <img src=${image}"
                             class="card-img-top">
                        <div class="card-body">
                            <h5 class="card-title">${title}</h5>
                            <p class="card-text">${desc}</p>
                            <p>${star_image}</p>
                            <p class="mycomment">${comment}</p>
                        </div>
                    </div>
                </div>`

4-4) 틀안에 데이터 넣기

$('#cards-box').append(temp_html)

실행 

 

'Python' 카테고리의 다른 글

Python] Flask  (0) 2022.11.03
Python] 크롤링한 데이터 DB에 업데이트하기  (0) 2022.11.03
Python] DB연결, 조작 (mongoDB 사용)  (0) 2022.11.02
Python] 크롤링 - bs4 (Pycharm)  (0) 2022.11.02
Python] Requests 패키지 사용하기 (pycharm)  (0) 2022.11.02

'Python' 관련글

Calendar
«   2025/03   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
Tags
더보기
Archives
Visits
Today
Yesterday

티스토리툴바