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 から値にアクセスする必要があります)。
注記！トークンは 1 時間ごとに期限切れになります。はい、これは超迷惑です。作業中は、必ずこのトークン ジェネレーターを使用してトークンを更新してください。 - 応答データの構造に慣れたら、AJAX を使用して、ユーザーがフォームを送信するときに Spotify への API 呼び出しを行うことに取り組んでください。
- まず、応答データを
console.logに記録します。それが機能したら、表示したいデータ (トラック名とアーティスト名) にアクセスします。 - 結果からデータにアクセスする方法がわかったら、jQuery を使用してデータをページに
append 。ヒント: Array#forEach を使用して、Spotify が応答データで返すすべてのトラックを反復処理します。
提出
- コードを変更するときは、GitHub フォークに頻繁にコミットしてプッシュします。
- 割り当てを完了し、作業を GitHub にプッシュしたら、フォークから元のリポジトリにプル リクエストを作成します。
リソース
- jQuery.ajax()
- Spotify 検索エンドポイント
