최종 결과

프로젝트 설명

flask로 작동하여 멜론 차트 top100을 스크래핑하여 멜로디쉐어에 적용하기

패키지 설치

pip install flask requests bs4

멜론차트 스크래핑

넘겨줄 데이터 context는 아래와 같은 구조를 가지고 있다.

따라서 for 반복문을 통해 html에 뿌려주면 될거같다.

context = [
        {"title": 타이틀1, "artist": 가수명1, "image": 이미지1}, 
        {"title": 타이틀2, "artist": 가수명2, "image": 이미지2}, 
        {"title": 타이틀3, "artist": 가수명3, "image": 이미지3}, 
        {"title": 타이틀4, "artist": 가수명4, "image": 이미지4}, 
        {"title": 타이틀5, "artist": 가수명5, "image": 이미지5}, 
        {"title": 타이틀6, "artist": 가수명6, "image": 이미지6}, 
        {"title": 타이틀7, "artist": 가수명7, "image": 이미지7}, 
        {"title": 타이틀8, "artist": 가수명8, "image": 이미지8}
        ]

app.py

from flask import Flask, render_template
from bs4 import BeautifulSoup
import requests

app = Flask(__name__)

@app.route('/')
def index():
    URL = "<https://www.melon.com/chart/index.htm>" #멜론 top100 차트 url
    # header 설정
    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 get요청
    data = requests.get(URL, headers=headers)
    # bs4로 parse
    soup = BeautifulSoup(data.text, 'html.parser')
    # tr 태그들만 선택
    trs = soup.select("table > tbody > tr")

    # html에 넘겨줄 데이터
    context = []
    
    # trs를 돌면서 title, artist, image data 가져오기
    for tr in trs : 
        title = tr.select_one(".rank01 > span > a").text
        artist = tr.select_one(".rank02 > a").text
        image = tr.select_one("img")["src"]
        context.append({
            "title" : title,
            "artist" : artist,
            "image" : image
        })
    
    return render_template('index.html', data=context)

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

jinja template로 html에 적용

index.html

<div class="row row-cols-1 row-cols-md-4 g-4 mx-auto w-75 pb-5">
        {% for melon in data %}
        <div class="col">
            <div class="card h-100">
                <img src="{{ melon.image }}" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">{{ melon.title }}</h5>
                    <p class="card-text">{{ melon.artist }}</p>
                    <p class="card-text">추천 by 최지웅</p> 
                </div>
            </div>
        </div>
        {% endfor %}
    </div>