티스토리 뷰

Projects/감정음악기록장

2-2. Flask, Ajax로 Open API 통신하기

adore_voy 2020. 9. 27. 16:31

1편링크

jae04099.tistory.com/78

 

2-1. 음악 검색용 API 찾아보기(Last.fm api)

이 프로젝트에서 가장 핵심적인, 중요한 기능이다. 여러 편으로 이루어질 예정. 1. 적절한 api 찾기 2. 찾은 api 원하는 정보만 파이썬을 이용해서 출력하기 3. ajax와 flask로 통신해서 클라이언트 쪽�

jae04099.tistory.com

시리즈 순서

 

1. 적절한 api 찾기

2. 찾은 api 원하는 정보만 ajax를 이용해서 콘솔에 출력하기

3. 실제로 html로 검색창을 만들어 원하는대로 나오게 해보기

4. 그 외 조정사항

변동가능.

 

저번편에서 우리는 원하는 api 찾기를 성공했다.

이제 해당 api를 이용해 원하는 정보를 추출해보자.

목표

어떤 방식으로 사용자가 검색해야 원하는 데이터가 출력되는지 알아보고자 한다.

이를 위해, 우선 콘솔에 원하는 데이터를 출력 할 것이다.

Flask 준비하기

우선, flask 이용을 위해 파이썬 가상환경(Virtual Environment a.k.a. venv)을 만들자.

가상환경을 만드는 이유는 파이썬 라이브러리의 버전 관리를 위해서다. 

본인은 VSCode를 사용중이기 때문에 이를 기준으로 설명하겠다.

API_PRAC이라는 이름으로 본 프로젝트용 빈 파일을 만들었다.

그 안에, 가상환경을 만들 것이다.

 

우선 터미널에 아래와 같이 입력해서 가상환경 폴더를 만들자.

python -m venv virtual	#virtual은 마음대로 지은 가상환경 이름이다

그렇다면 아래와 같이 폴더들이 만들어져 있을 것이다.

이제 f1을 누르고 python Select Interpreter를 선택한다.

그리고 생성했던 venv 인터프리터를 선택한다.

새로 터미널을 열었을 때 앞에 가상환경 파일의 이름이 녹색 괄호 안에 나타나면 성공.

 

마지막으로 폳더 안에 flask를 이용할 파이썬 파일을 만든다(app.py).

이제 이 가상환경에 필요한 라이브러리를 설치하자.

터미널에 아래와 같이 적어 플라스크를 설치해주자

pip install flask

만일 pip가 최신 버전이 아니라고 뜨면 아래와 같이 입력한다.

python.exe -m pip install --upgrade pip

그리고 파이썬 파일은 다음처럼 코딩한다.

from flask import Flask, jsonify, render_template, request	#플라스크 관련
app = Flask(__name__)

@app.route('/')
def call_API():
    return render_template('song-search.html')	#버튼, api있는 html 렌더

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)	#localhost:5000으로 서버접속

Ajax로 서버 통신하기

song-search.html이라는 파일을 만든다.

본 파일은 virtual 폴더 내 templates 폴더 내에 새로 만들었다.

검색창부터 만들자.

<body>
    <form action="methods" method="get">
        <label for="songinfo">음악검색하기</label>
        <input type="text" id="songinfo" class="whatToSearch" placeholder="검색">
        <button onclick="addMusicList()">검색</button>
    </form>
</body>

ajax는 제이쿼리 기반이기 때문에, head 부분에 제이쿼리 cdn 코드도 삽입하자.

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

ajax는 다음과 같이 코딩한다.

<script>
    function addMusicList() {
        $.ajax({
            type: 'GET',
            url: 'http://ws.audioscrobbler.com/2.0/?method=track.search&track=the&api_key=발급받은key값&format=json',
            success: function (response) {
                alert("ajax success")	//연결을 확인한다
                
                }
            }
        })
    }
</script>

get타입으로 통신할 것이고, 버튼을 누르면 addMusicList 함수가 호출된다. url은 음악 api 링크고 통신이 성공하면 ajax success라는 알림이 뜨게 하자.

검색 버튼을 누르니 성공적으로 연결 됐다는 팝업이 떴다.

 

이제 콘솔에 원하는 정보를 출력하자.

그러기 위해서, 우리가 뽑아내려는 노래 제목, 아티스트명이 api내 어디에 위치하는지 알아야 한다.

참고로 해당 api는 우리가 response라는 매개변수로 전달했었다.

우리가 원하는 데이터들은 모두 "track" 안에 있다.

중복되는 경로는 가독성을 높이기 위해 변수에 넣어주도록 하자.

let musicList = response["results"]["trackmatches"]["track"];

그리고 track 안의 가수명, 제목도 변수화 시켜주자.

for (let i = 0; i < musicList.length; i++) {	//반복문을 쓰는 이유는 track 내에 이름을 모두 출력하기 위함
                     let albumTitle = musicList[i]["name"]
                     let albumArtist = musicList[i]["artist"]
                     console.log(albumTitle, albumArtist)
                 }

그런 후 다시 flask를 실행시키고 localhost:5000/을 새로고침 하자.

검색 버튼을 누르면(엔터치면 안됨. 버튼을 직접 마우스로 눌러야함) 연결됐다는 팝업이 뜬 후, 팝업창을 닫고 콘솔창을 확인해보자.

우리는 아직 검색어를 지정하지 않고 the를 고정시켜 넣었다.

때문에, the가 키워드로 있는 노래 제목과 가수들이 출력되는 것을 볼 수 있다.

 

이제 사용자가 입력하는 검색어에 따른 데이터를 출력해보자.

사용자가 songinfo라는 아이디를 가진 input에 원하는 키워드를 입력하면, 그 값은 value로 넘어간다.

때문에 아래와 같이 작성한다.

let musicKeyWord = $('#songinfo').val();

그리고 musicKeyWord는 api url에 입력값이 들어갈 곳에 변수로 넣어준다.

string 안에 변수를 넣고 싶을땐 string을 따옴표로 묶고 변수를 +변수+로 연결한다.

'http://ws.audioscrobbler.com/2.0/?method=track.search&track='+musicKeyWord+'&api_key=apikey값&format=json'

이제 원하는 값을 검색창에 입력하고 버튼을 누르면 원하는 값이 콘솔에 뜨는 것을 확인할 수 있다.

 

전체 코드

app.py

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

@app.route('/')
def call_API():
    return render_template('song-search.html')

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

song-search.html

<!DOCTYPE html>
<html lang="ko">

<head>
</head>

<body>
    <form action="methods">
        <label for="songinfo">음악검색하기</label>
        <input type="text" id="songinfo" class="whatToSearch" placeholder="검색">
        <button type="button" onclick="addMusicList()">검색</button>
    </form>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
    crossorigin="anonymous"></script>
<script>
    function addMusicList() {
         let musicKeyWord = $('#songinfo').val()
        $.ajax({
            type: 'GET',
            url: 'http://ws.audioscrobbler.com/2.0/?method=track.search&track='+musicKeyWord+'&api_key=발급받은apikey값&format=json',
            success: function (response) {
                alert("ajax success")
                 let musicList = response["results"]["trackmatches"]["track"];
                 for (let i = 0; i < musicList.length; i++) {
                //     let albumImg = musicList[i]["image"][0]["#text"]
                     let albumTitle = musicList[i]["name"]
                     let albumArtist = musicList[i]["artist"]
                     console.log(albumTitle, albumArtist)
                 }
            }
        })
    }
</script>

</html>

참고로 앨범이미지는 지원을 안해서 주석처리함.

필요한분들은 저렇게 사용하셔요.

하다가 엔터를 누르지 않고 버튼을 눌러야 하는 걸 몰라 헤메고, 파이참에서 했던 venv 방법과 많이 다른 vscode 식 방법을 공부하느라 너무 오래 걸렸다...

다음은 여느 포털사이트 검색창처럼 키보드를 입력할 때 마다 리셋돼 검색값이 리스트로 바로 주어지는 걸 해보겠다.

참고:

201823318.tistory.com/65

wings2pc.tistory.com/entry/%EC%9B%B9-%EC%95%B1%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%ED%8C%8C%EC%9D%B4%EC%8D%AC-%ED%94%8C%EB%9D%BC%EC%8A%A4%ED%81%ACPython-Flask-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%9B%B9-%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98Web-Application-%EC%8B%9C%EC%9E%91

반응형

'Projects > 감정음악기록장' 카테고리의 다른 글

2-3. API 정보를 검색창 처럼 구현하기, 검색창 자동완성  (0) 2020.10.25
2-1. 음악 검색용 API 찾아보기(Last.fm api)  (2) 2020.09.25
1-2. 로그인 구현(쿠키로 이름 저장)  (0) 2020.08.27
1-1. 로그인 구현(파라미터로 다음페이지에 이름 넘기기)  (0) 2020.08.25
0. 기획  (2) 2020.08.14
댓글