캠프 11주 2일차 TIL : 스포티파이 검색API이용으로 노래 검색!

규파팡 2023. 5. 23. 21:38

영어는 오늘도 힘들다...... 나도 모르게 익혀버린 마우스우클릭 t 다시 돌릴 때도 우클릭 t 좌측방향키 해석해야 할 텐데 자꾸 미루고 번역기를 사용한다 ㅠㅠ사담.............. 끝!

오늘은 검색 api를 사용해서 스포티파이가 제공하는 노래목록을 가져오는 부분을 구현했다. 처음엔 막막했다가 어제 access token 가져온 후로 급물살을 탔기에 제공된 url과 url형식을 참고하고 공식문서내용을 참고해서 url을 만져주었다.

우선 전체코드를 붙이고 하나씩 설명할 예정이다

class MusicSearchApiDetail(APIView):
    def post(self, request, format=None):
        query = request.data.get('query', None)# 검색어는 필수로 작성해야 함.
        limit = request.data.get('limit', 10)#기본값은 10이라 하고 작성 가능하게 만들 예정
        search_type = request.data.get('type', 'track') # 앨범으로도 검색 가능한데 이건 트랙으로 해둬도 될 거 같습니다.

        if not access_token:
            get_token()

        if not query:
            raise ParseError('검색어를 입력해주세요')
        
        search_url = f'https://api.spotify.com/v1/search?q={query}&type={search_type}&limit={limit}'
        headers = {
            'Authorization': f'Bearer {access_token}',
        }
        response = requests.get(search_url, headers=headers)

        if response.status_code == 200:
            data = response.json()
            tracks = data.get('tracks', {}).get('items', [])
            artists = data.get('artists', {}).get('items', [])
            tracks_serializer = MusicSerializer(tracks, many=True)
            artists_serializer = ArtistSerializer(artists, many=True)           
            return Response({
                'tracks': tracks_serializer.data,
                'artists': artists_serializer.data,
            })
        else:
            return Response({'message': '트랙을 불러 올 수 없습니다.'}, status=response.status_code)

너무 길고 이것저것 있지만 최선이었다................................................... 더 줄이고 싶은데 아직은 보이지 않는다 줄일방법이..ㅎㅎ

query = request.data.get('query', None)# 검색어는 필수로 작성해야 함.
limit = request.data.get('limit', 10)#기본값은 10이라 하고 작성 가능하게 만들 예정
search_type = request.data.get('type', 'track') # 앨범으로도 검색 가능한데 이건 트랙으로 해둬도 될 거 같습니다.

if not access_token:
    get_token()

if not query:
    raise ParseError('검색어를 입력해주세요')

여기는 주석에 나온 것처럼 해당 부분을 인스턴스로 만들어줬다 사용자가 입력해야 할 부분이고 페이지 또한 프론트에서 구현할 예정이다.

access_token = ""
"""
빈 문자열 인스턴스를 만들어주고
get_token()을 실행하면
access_token이 생성돼서 인스턴스에 저장되게 작업해 주었다.
"""

get_token() 함수 같은 경우는 토큰발행함수를 따로 만들어줬다. returon값으로 access_token을 받는데 access_token이 없는 시작단계에서는 아래 조건문을 확인하고 토큰이 없으면 함수를 실행해 줌으로 토큰을 받아온다.

if not access_token:
    get_token()

그리고 검색할 때 검색어입력이 안되면 에러문구호출도추가해 주었다. 오류는 났는데 뭔지 모를 수도 있잖아~ 저부분도 프로트에서 처리해 줄 예정.

search_url = f'https://api.spotify.com/v1/search?q={query}&type={search_type}&limit={limit}'
headers = {
    'Authorization': f'Bearer {access_token}',
}
response = requests.get(search_url, headers=headers)

이제 넣은 access_token을 Bearer 부분에 추가해 줬습니다.

그렇게 해서 postman으로 돌려주면

{
    "name": "주의 나라가 임할 때 When the Kingdom of God Comes (Live)",
    "artist": "어노인팅 Anointing",
    "album": {
        "name": "어노인팅 예배캠프 Anointing Worship Camp 2019 (Live)",
        "release_date": "2019-10-28",
        "images": [
            {
                "height": 640,
                "url": "https://i.scdn.co/image/ab67616d0000b2732504fc79d620f742a851d5c0",
                "width": 640
            },
            {
                "height": 300,
                "url": "https://i.scdn.co/image/ab67616d00001e022504fc79d620f742a851d5c0",
                "width": 300
            },
            {
                "height": 64,
                "url": "https://i.scdn.co/image/ab67616d000048512504fc79d620f742a851d5c0",
                "width": 64
            }
        ],
        "artist_name": "어노인팅 Anointing"
    }
},

이렇게 검색내용이 json형식으로 출력된다 이 부분도 프론트에서 데이터 받을 때 앨범자켓과 제목 가수명으로 구분해 줄 예정이다. 커스텀이 더필요하면 더 다양하게 해 줄 예정이다. 공식문서를 아무리 봐도 검색이랑 이런 부분에 대한 이야기가 없어서

하나씩 보면서 변화하는 url을확인했다 근데 웃긴 게 공식문서에 이미다 보이고 있었는데 내가 url을 잘 모르고 api어린이라서 그랬던 거 같다 ㅠㅠㅠ

search_url = f'https://api.spotify.com/v1/search?q={query}&type={search_type}&limit={limit}'

q, type, limit 등등 이미 공식문서에 다 표기가 되어있었다 사용법을 몰랐을 뿐...

어찌 보면 더 간단하게 옆에도 있었다.

알고 나니깐 보이는 거지 모를 땐 이걸 쓰는 거 같은데~? 정도였지 이렇게 아!?는 아니었다 대부분의 api가 이렇게 비슷하다면 앞으로 사용할 때 더 수월하지 않을까 싶다. 예시로 각각의 값들이 다 나와있다. 생각보다 친절했는데 내가 잘 사용하지 못했다는 걸 느끼며 아랫부분은 한 번에 봐야겠다.

if response.status_code == 200:
    data = response.json()
    tracks = data.get('tracks', {}).get('items', [])
    artists = data.get('artists', {}).get('items', [])
    tracks_serializer = MusicSerializer(tracks, many=True)
    artists_serializer = ArtistSerializer(artists, many=True)

조건문을 돌리면서 status가 200으로 제대로 데이터가 전송되고 받아진다면 아래의 조건문을 실행한다. 받은 json데이터를 data인스턴스에 넣어주고 해당 값들을 tracks, artists에 다시 넣어준다. 각각의 필드에 맞게 해당값들을 호출해 준다. 그러면 결과로 위에 있던 postman결괏값이 출력된다.

{
    "name": "주의 나라가 임할 때 When the Kingdom of God Comes (Live)",
    "artist": "어노인팅 Anointing",
    "album": {
        "name": "어노인팅 예배캠프 Anointing Worship Camp 2019 (Live)",
        "release_date": "2019-10-28",
        "images": [
            {
                "height": 640,
                "url": "https://i.scdn.co/image/ab67616d0000b2732504fc79d620f742a851d5c0",
                "width": 640
            },
            {
                "height": 300,
                "url": "https://i.scdn.co/image/ab67616d00001e022504fc79d620f742a851d5c0",
                "width": 300
            },
            {
                "height": 64,
                "url": "https://i.scdn.co/image/ab67616d000048512504fc79d620f742a851d5c0",
                "width": 64
            }
        ],
        "artist_name": "어노인팅 Anointing"
    }
},

나는 주로 ccm을 듣기에 어노인팅을 검색했을 때 해당 가수와 제목 앨범명이 나온다. 이렇게 로직을 짠 이유는 앨범사진도 같이 출력해서 프론트 부분에서 볼 때 더 잘 보이게 해주고 싶었기 때문이다.

오늘의 til은 오류가 없었고 삽질을 조금만 했기에 여기까지 ~!

오늘의 규파팡이 느낀 점!

몸관리를 나름 잘하고 있는데 두통은 답이 없다...ㅠ