Spotify 搜尋
目標：使用 jQuery、AJAX 和 Spotify API 製作音樂搜尋應用程式。您將使用 Spotify 的搜尋端點來搜尋曲目（歌曲）。
最低要求
- 您的應用程式必須有一個表單來搜尋曲目（歌曲）。此表單需要一個用於搜尋關鍵字的輸入欄位。
- 當使用者提交表單時，使用 jQuery 從表單輸入中取得搜尋關鍵字。
- 使用 AJAX 透過表單中的搜尋關鍵字呼叫 Spotify 的搜尋端點。
- AJAX 呼叫成功後，在頁面上呈現搜尋結果。您應該至少包含每個結果的曲目名稱和藝術家姓名。
- 每次使用者提交表單時，請從視圖中清除先前的所有搜尋結果。
獎金創意
或者，挑戰自己，讓專案走得更遠！
- 在視圖中每個搜尋結果旁邊顯示曲目的專輯封面。提示：您會注意到，如果您嘗試存取專輯插圖但沒有可用的專輯插圖，您的應用程式將會崩潰。首先檢查是否有可用的藝術品，以防止這種情況發生。
- Spotify 為我們提供了每首曲目的
preview_url 。為視圖中的每個曲目建立一個播放按鈕，在新分頁中開啟preview_url （它將開始播放歌曲！）。 - 如果讓使用者知道在提交表單和獲取頁面資料之間的幾毫秒內發生了一些事情，那就太好了。當表單提交時顯示
loading.gif （在images目錄中提供），並在從 Spotify 獲取資料時隱藏它。 - 處理 Spotify 沒有回傳資料的情況。您需要讓使用者知道沒有結果，而不僅僅是顯示空白頁面。
- 處理使用者使用空關鍵字提交搜尋的情況。檢查一下控制台提交此表單空白時的錯誤； Spotify 認為這是一個“糟糕的請求！”如果使用者嘗試提交空白表單，請不要搜索，而是提醒他們輸入關鍵字。
入門
- 分叉此存儲庫，並將其克隆到您的計算機中。
- 使用您在 AJAX 請求標頭中在課堂上獲得的令牌，練習使用 Postman 或帶有幾個不同搜尋關鍵字的
curl來查詢 Spotify 的搜尋端點。您需要在請求 URL 中設定type=track 。查看回應數據，並弄清楚如何存取特定曲目的曲目名稱和藝術家姓名（這將涉及使用嵌套物件和陣列存取 JSON 中的值）。
筆記！您的令牌每小時都會過期！是的，這太煩人了。確保在工作時使用此令牌產生器更新您的令牌。 - 一旦您對回應資料的結構感到滿意，就可以在使用者提交表單時使用 AJAX 對 Spotify 進行 API 呼叫。
- 首先透過
console.log記錄回應資料。完成工作後，請存取您想要顯示的資料（曲目名稱和藝術家姓名）。 - 如果您知道如何從結果中存取數據，請使用 jQuery 將其
append到頁面。提示：您需要使用 Array#forEach 迭代 Spotify 在回應資料中傳回的所有曲目。
提交
- 當您進行程式碼變更時，請經常提交並推送到您的 GitHub 分支。
- 完成作業並將工作推送到 GitHub 後，從您的分支向原始儲存庫發出拉取請求。
資源
- jQuery.ajax()
- Spotify 搜尋端點
