교내 SW 아이디어 대회 [4] 빌보드 차트 제공

background-image를 넣고 글씨 크기도 조금 조정했다.

사용자들이 검색할 때 차트를 참고하면 좋을 것 같아서 실시간 차트를 하나 넣고 싶어졌는데, 유튜브 차트를 알아보다가 API가 없는 것 같아서 billboard-charts를 사용해서 빌보드 껄로 넣었다.

pip3 install billboard.py

https://github.com/guoguo12/billboard-charts

pip로 쉽게 설치할 수 있다.

import billboard
def get_billboard_chart(top):
    # top decides list size(int type, max 100), for example top==10 returns top 10 songs in chart
    chart = [
        [str(song.title), str(song.artist)]
        for song in billboard.ChartData('hot-100')[:int(top)]
    ]
    # list containing [title, artist]
    return chart

위와 같이 빌보드 hot 100에서 위에서부터 top개 음악의 정보를 [[title, artist], (...)] 형식으로 반환하는 get_billboard_chart() 함수를 만들고 이를 사용해서 상위 10개 데이터를 제공했다.

웹앱에 나오는 빌보드 차트의 각 리스트 아이템을 클릭하면 해당 곡의 제목으로 검색한 결과가 표시된다. 와아.

app.py에서 get_billboard_chart()를 호출하면서 제공하는 차트의 데이터 수가 달라져도 템플릿을 수정할 필요가 없도록 템플릿의 badge는 아래처럼 넣었다.

Billboard TOP <span class="badge badge-primary badge-pill">{{ chart | length }}</span>

파이썬에서 len()을 쓰는 것과 달리, Flask에서는 Jinja2라는 Python Template Engine을 사용하는데 템플릿 내에서 리스트의 길이는 {{ list | length }}로 구할 수 있다.

현재는 chart의 길이가 10이므로 badge 역시 위 스크린샷처럼 10으로 표시된다.