spotify search lab

Spotify 검색

목표: jQuery, AJAX 및 Spotify API를 사용하여 음악 검색 앱을 만듭니다. Spotify의 검색 엔드포인트를 사용하여 트랙(노래)을 검색하게 됩니다.

최소 요구 사항

1. 앱에는 트랙(노래)을 검색할 수 있는 양식이 있어야 합니다. 이 양식에는 검색 키워드에 대한 입력 필드가 필요합니다.
2. 사용자가 양식을 제출하면 jQuery를 사용하여 양식 입력에서 검색 키워드를 가져옵니다.
3. AJAX를 사용하여 양식의 검색 키워드로 Spotify의 검색 엔드포인트를 호출합니다.
4. AJAX 호출이 성공하면 페이지에 검색 결과를 렌더링합니다. 각 결과에는 최소한 트랙 이름과 아티스트 이름을 포함해야 합니다.
5. 사용자가 양식을 제출할 때마다 보기에서 이전 검색 결과를 모두 지웁니다.

보너스 아이디어

선택적으로 프로젝트를 더욱 발전시키는 데 도전해보세요!

1. 보기의 각 검색 결과 옆에 트랙의 앨범 아트워크를 표시합니다. 힌트: 앨범 아트워크에 액세스하려고 시도했지만 사용할 수 있는 앨범 아트워크가 없으면 앱이 중단되는 것을 알 수 있습니다. 먼저 사용할 수 있는 작품이 있는지 확인하여 이러한 일이 발생하지 않도록 하세요.
2. Spotify는 각 트랙에 대한 preview_url 을 제공합니다. 새 탭에서 preview_url 을 여는 보기의 각 트랙에 대한 재생 버튼을 만듭니다(노래 재생이 시작됩니다!).
3. 양식을 제출하고 페이지에 데이터를 가져오는 사이 몇 밀리초 안에 어떤 일이 일어나고 있는지 사용자에게 알리는 것이 좋을 것입니다. 양식이 제출될 때 loading.gif ( images 디렉터리에 제공됨)를 표시하고 Spotify에서 데이터를 다시 가져올 때 숨깁니다.
4. Spotify에서 데이터가 반환되지 않는 경우를 처리합니다. 빈 페이지만 표시하기보다는 결과가 없다는 점을 사용자에게 알리고 싶을 것입니다.
5. 사용자가 빈 키워드로 검색을 제출하는 경우를 처리합니다. 이 양식을 공백으로 제출할 때 콘솔에서 오류를 확인하세요. Spotify는 이를 "잘못된 요청"으로 간주합니다! 사용자가 빈 양식을 제출하려고 하면 검색하지 말고 대신 키워드를 입력하라고 알려주세요.

시작하기

1. 이 저장소를 포크하고 컴퓨터에 복제하세요.
2. AJAX 요청 헤더에 있는 수업 시간에 받은 토큰을 사용하여 Postman을 사용하거나 몇 가지 다른 검색 키워드로 curl 사용하여 Spotify의 검색 엔드포인트를 쿼리하는 연습을 해보세요. 요청 URL에 type=track 설정하는 것이 좋습니다. 응답 데이터를 보고 특정 트랙의 트랙 이름과 아티스트 이름에 액세스하는 방법을 파악합니다(여기에는 중첩된 개체 및 배열을 사용하여 JSON의 값에 액세스하는 것이 포함됩니다).
   메모 ! 귀하의 토큰은 매시간 만료됩니다! 네, 정말 짜증나는 일이에요. 작업하면서 이 토큰 생성기를 사용하여 토큰을 업데이트하세요.
3. 응답 데이터의 구조에 익숙해지면 사용자가 양식을 제출할 때 AJAX를 사용하여 Spotify에 대한 API 호출을 수행하세요.
4. console.log 로 시작하여 응답 데이터를 작성하세요. 작업이 완료되면 표시하려는 데이터(트랙 이름 및 아티스트 이름)에 액세스하세요.
5. 결과에서 데이터에 액세스하는 방법을 알고 있다면 jQuery를 사용하여 페이지에 append . 힌트: Spotify가 응답 데이터에서 반환하는 모든 트랙을 반복하려면 Array#forEach를 사용하는 것이 좋습니다.

제출

• 코드를 변경할 때 GitHub 포크에 자주 커밋하고 푸시하세요.
• 할당을 완료하고 작업을 GitHub에 푸시한 후에는 포크에서 원본 리포지토리로 끌어오기 요청을 하세요.

자원

• jQuery.ajax()
• Spotify 검색 엔드포인트