Pencarian Spotify
Tujuan: Membuat aplikasi pencarian musik menggunakan jQuery, AJAX, dan Spotify API. Anda akan menggunakan titik akhir pencarian Spotify untuk mencari trek (lagu).
Persyaratan Minimal
- Aplikasi Anda harus memiliki formulir untuk mencari trek (lagu). Formulir ini memerlukan kolom input untuk kata kunci pencarian.
- Saat pengguna mengirimkan formulir, gunakan jQuery untuk mendapatkan kata kunci pencarian dari input formulir.
- Gunakan AJAX untuk memanggil titik akhir pencarian Spotify dengan kata kunci pencarian dari formulir.
- Jika panggilan AJAX berhasil, render hasil pencarian di halaman. Anda harus menyertakan setidaknya nama lagu dan nama artis untuk setiap hasil.
- Setiap kali pengguna mengirimkan formulir, hapus semua hasil pencarian sebelumnya dari tampilan.
Ide Bonus
Opsional, tantang diri Anda untuk membawa proyek ini lebih jauh!
- Tampilkan sampul album lagu di samping setiap hasil pencarian dalam tampilan. Petunjuk: Anda akan melihat jika Anda mencoba mengakses sampul album tetapi tidak ada yang tersedia, aplikasi Anda akan rusak. Cegah hal ini terjadi dengan memeriksa terlebih dahulu apakah ada karya seni yang tersedia.
- Spotify memberi kita
preview_url untuk setiap lagu. Buat tombol putar untuk setiap lagu dalam tampilan Anda yang membuka preview_url di tab baru (itu akan mulai memutar lagu!). - Sebaiknya beri tahu pengguna bahwa ada sesuatu yang terjadi dalam beberapa milidetik antara pengiriman formulir dan pengambilan data di halaman. Tampilkan
loading.gif (tersedia di direktori images ) saat formulir dikirimkan, dan sembunyikan saat Anda mendapatkan data kembali dari Spotify. - Tangani kasus ketika tidak ada data yang dikembalikan dari Spotify. Anda sebaiknya memberi tahu pengguna bahwa tidak ada hasil, bukan hanya menampilkan halaman kosong.
- Tangani kasus ketika pengguna mengirimkan pencarian dengan kata kunci kosong. Periksa kesalahan di konsol saat mengirimkan formulir kosong ini; Spotify menganggap ini sebagai "permintaan buruk!" Jika pengguna mencoba mengirimkan formulir kosong, jangan mencari dan sebagai gantinya ingatkan mereka untuk memasukkan kata kunci.
Memulai
- Fork repo ini, dan kloning ke komputer Anda.
- Dengan menggunakan token yang Anda dapatkan di kelas di header permintaan AJAX Anda, berlatihlah menanyakan titik akhir pencarian Spotify menggunakan Postman atau
curl dengan beberapa kata kunci pencarian yang berbeda. Anda ingin menyetel type=track di URL permintaan Anda. Lihatlah data respons, dan cari tahu bagaimana Anda akan mengakses nama trek dan nama artis untuk trek tertentu (ini akan melibatkan akses nilai dari JSON dengan objek dan array bersarang).
Catatan ! Token Anda kedaluwarsa setiap jam! Ya, ini sangat menjengkelkan. Pastikan Anda memperbarui Token Anda menggunakan generator token ini saat Anda bekerja. - Setelah Anda merasa nyaman dengan struktur data respons, gunakan AJAX untuk melakukan panggilan API ke Spotify saat pengguna mengirimkan formulir.
- Mulailah dengan
console.log -ing data respons. Setelah Anda berfungsi, akses data yang ingin Anda tampilkan (nama trek dan nama artis). - Jika Anda tahu cara mengakses data dari hasil, gunakan jQuery untuk
append ke halaman. Petunjuk: Anda dapat menggunakan Array#forEach untuk mengulangi semua trek yang dikembalikan Spotify dalam data respons.
Penyerahan
- Saat Anda membuat perubahan kode, sering-seringlah melakukan commit dan push ke fork GitHub Anda.
- Setelah Anda menyelesaikan tugas dan memasukkan pekerjaan Anda ke GitHub, buat permintaan tarik dari fork Anda ke repo asli.
Sumber daya
- jQuery.ajax()
- Titik Akhir Pencarian Spotify
