4주차 WIL🐱‍👤Flask, API설계

Flask 프레임워크 🎀

: 서버를 구동시켜주는 편한 코드 모음. 서버를 구동하려면 필요한 복잡한 일들을 쉽게 가져다 씀

• flask 시작 코드

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

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

• flask 기본구조

  • static : css나 이미지파일을 담아둘 때 사용

  • templates : html 파일을 담아둘 때 사용

• flask 시작 코드에 template를 받을 수 있게 변경 (HTML 파일과 연결)

from flask import Flask, render_template		#render_template 추가
app = Flask(__name__)

@app.route('/')
def home():
   return render_template('index.html')			#templates 폴더의 index.html을 연결

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

나홀로 메모장으로 알아보는 API 🎀

1. 기본세팅
   • new - app.py 생성
   • new - (directory) templates 생성
   • new - (directory) static 생성
2. 패키지 설치

• File - Setting - Project - Python Interpreter - (+)
  • flask (서버)
  • pymongo (DB)
  • requests (크롤링)
  • bs4 (크롤링)

3. API 설계
   • URL과 코멘트를 서버로 전송하여, 서버에서 데이터 저장 (Create) > [POST방식]
   • 저장 된 카드 보여주기, 데이터 출력 (Read) > [GET방식]
   • 제목 / 포스터이미지 / 요약 / 코멘트 / 클릭시 영화 링크(url) 5가지의 데이터 저장 및 출력 필요

(+) TEST _ 메타 태그를 이용한 크롤링🎀

import requests
from bs4 import BeautifulSoup

url = 'https://movie.naver.com/movie/bi/mi/basic.nhn?code=171539'   #가져올 영화 URL

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(url,headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

# title = soup.select_one('head > meta:nth-child(9)')
# print(title)

# 메타 태그로 크롤링 해오는 방법
title = soup.select_one('meta[property="og:title"]')['content']
image = soup.select_one('meta[property="og:url"]')['content']
desc = soup.select_one('meta[property="og:description"]')['content']

print(title, image, desc)

# title = soup.select_one('head > meta:nth-child(9)')
# print(title)

• 이 방식의 경우, 직접 브라우저에 들어가서 나오는 meta tag의 순서와 파이썬 코드로 접속해서 읽는 meta tag의 순서가 달라서 출력값이 제대로 나오지 않는다 (none이 출력됨)

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

• meta tag를 사용할 때는, copy selector가 아닌 meta tag의 id값을 활용
• cf) meta tag는 태그 안에 존재함

나홀로 메모장 POST 🎀

1. 클라이언트 - 서버 연결
2. 서버 만들기 (app.py)

@app.route('/memo', methods=['POST'])
def saving():
    url_receive = request.form['url_give']
    comment_receive = request.form['comment_give']

    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(url_receive, 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']

    doc = {
        'title': title,
        'image': image,
        'desc': desc,
        'url': url_receive,
        'comment': comment_receive
    }

    db.articles.insert_one(doc)

    return jsonify({'msg': '저장이 완료 되었습니다!'})

3. 클라이언트 만들기 (index.html)

function postArticle() {
     let url = $('#post-url').val()
     let comment = $('#post-comment').val()

     $.ajax({
       	type: "POST",
        url: "/memo",
        data: {url_give : url, comment_give : comment},
        success: function ( response) { // 성공하면
           alert(response["msg"]);
           window.location.reload()    //새로고침
       			}
   			})
 		}


`
`
`

<div id="post-box" class="form-post" style="display:none">
    <div>
	    <div class="form-group">
		     <label for="post-url">아티클 URL</label>        <!-- url이 입력되는부분 -->
             <input id="post-url" class="form-control" placeholder="">
        </div>
        <div class="form-group">
             <label for="post-comment">간단 코멘트</label>
             <textarea id="post-comment" class="form-control" rows="2"></textarea>
        </div>
        <button type="button" class="btn btn-primary" onclick="postArticle()">기사저장</button>
     </div>
</div>

나홀로 메모장 GET 🎀

1. 클라이언트 - 서버 연결
2. 서버 만들기 (app.py)

@app.route('/memo', methods=['GET'])
def listing():
    articles = list(db.articles.find({}, {'_id': False}))
    return jsonify({'all_articles': articles})

3. 클라이언트 만들기 (index.html)

function showArticles() {
  $.ajax({
      type: "GET",
      url: "/memo",
      data: {},
      success: function (response) {
          let articles = response[`all_articles`]

          for(let i = 0; i < articles.length; i++) {
              let title = articles[i]['title']
              let image = articles[i]['image']
              let url = articles[i]['url']
              let desc = articles[i]['desc']
              let comment = articles[i]['comment']

              let temp_html = ` <div class="card">
                                   <img class="card-img-top"
                                        src="${image}"
                                         alt="Card image cap">
                                   <div class="card-body">
                                        <a target="_blank" href="${url}" class="card-title">${title}</a>
                                        <p class="card-text">${desc}</p>
                                        <p class="card-text comment">${comment}</p>
                                   </div>`

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