Bangun Aplikasi Pencarian Musik Dengan React dan Spotify API

Spotify telah sepenuhnya mengubah cara kami mengalirkan musik dengan katalog yang berisi jutaan lagu, album, dan daftar putar.

Dengan menggunakan API webnya, Anda dapat menjadikan pengalaman Spotify Anda lebih menyenangkan dengan membangun aplikasi pencarian musik React Anda sendiri. API menyediakan akses ke berbagai data musik yang dapat Anda gunakan untuk membuat aplikasi musik khusus dan mempersonalisasikannya sesuai selera Anda.

Spotify untuk Pengembang

Spotify menawarkan berbagai fitur streaming musik seperti pencarian, pemutaran offline, dan rekomendasi hasil personalisasi. Platform Spotify untuk Pengembang menyediakan akses ke API dan SDK yang mendukung fitur ini. Dalam panduan ini, Anda akan menjelajahi web API dan mempelajari cara mengintegrasikannya ke dalam aplikasi React untuk mencari lagu yang Anda suka.

Mendaftar untuk sebuah Akun

Untuk memulai, Anda harus memiliki akun Spotify. Jika Anda belum memilikinya, kunjungi halaman pendaftaran Spotify. Namun, jika Anda sudah memilikinya, masuklah ke Spotify untuk Pengembang menghibur.

Daftarkan Aplikasi Anda

Setelah masuk ke konsol pengembang, daftarkan aplikasi Anda untuk mendapatkan akses ke API web. Di halaman dasbor, klik Buat Aplikasi tombol, isi nama dan deskripsi, dan terakhir, terima syarat dan ketentuan untuk membuat aplikasi.

Terakhir, klik pada Sunting Pengaturan tombol untuk mengubah ke pengaturan redirect URL. Karena aplikasi Anda masih dalam mode pengembangan, tambahkan http://localhost: 3000 sebagai URL pengalihan Anda. Ini adalah URL yang ingin Anda arahkan ke pengguna setelah diautentikasi dengan Spotify.

Setelah mendaftarkan aplikasi Anda, Spotify akan memberikan ID klien unik dan rahasia klien Anda yang dapat Anda gunakan untuk:

• Tambahkan aliran autentikasi Spotify, untuk masuk dengan kredensial Spotify Anda di aplikasi React Anda.
• Dapatkan token akses unik Anda, untuk membuat permintaan ke titik akhir API web yang berbeda, termasuk mencari data seperti trek atau album.

Siapkan React Client

Buat aplikasi Bereaksi dan arahkan ke direktori root dan buat file baru, .env, untuk mengatur beberapa variabel lingkungan. Anda bisa mendapatkan ID klien dari dasbor pengembang Spotify.

REACT_APP_SPOTIFY_CLIENT_ID = "ID klien Anda"
REACT_APP_SPOTIFY_REDIRECT_URI = " http://localhost: 3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = " https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "token"

Instal Paket yang Diperlukan

Instal Axios. Anda akan menggunakan metodenya untuk membuat permintaan HTTP ke API web Spotify.

npm instal axios

Tambahkan Alur Kerja Otentikasi Spotify

Spotify menetapkan bahwa semua permintaan ke titik akhir API Web apa pun memiliki token akses yang valid di header permintaan. Untuk mendapatkan token akses, aplikasi Anda perlu mengautentikasi terlebih dahulu dengan Spotify.

Spotify mendukung beberapa otentikasi dan otorisasimetode seperti kode otorisasi, kredensial klien, atau metode hibah implisit.

Yang paling sederhana untuk diterapkan adalah metode hibah implisit yang mengharuskan aplikasi membuat permintaan ke titik akhir autentikasi (Anda menambahkan ini di file ENV), meneruskan ID klien Anda. Setelah autentikasi berhasil, Spotify akan merespons dengan memberikan token akses yang kedaluwarsa selama jangka waktu tertentu.

Buka file src/App.js Anda, hapus kode React boilerplate, dan tambahkan kode di bawah ini:

impor Bereaksi, { useState, useEffect } dari'reaksi';
impor Pencari dari'./komponen/Pencari';
fungsiAplikasi() {
const CLIENT_ID=proses.env. REACT_APP_SPOTIFY_CLIENT_ID
const REDIRECT_URI =proses.env. REACT_APP_SPOTIFY_REDIRECT_URI 
const AUTH_ENDPOINT =proses.env. REACT_APP_SPOTIFY_AUTH_ENDPOINT 
const RESPONSE_TYPE = proses.env. REACT_APP_SPOTIFY_RESPONSE_TYPE
const [token, setToken] = useState("");
 gunakanEfek(() => { 
const hash = jendela.location.hash;
membiarkan tanda = jendela.localStorage.getItem("token");

jika (hash && hash) {
 token = hash.substring(1).membelah("&").menemukan(elemen => elem.mulaiDengan("akses_token")).membelah("=")[1];
jendela.location.hash = "";
jendela.localStorage.setItem("token", token);
 }
 setToken (token)
 }, [])
const logout = () => {
 setToken("");
jendela.localStorage.removeItem("token");
 }
kembali (

"Aplikasi">
"Tajuk-aplikasi">
"SearchContainer">
Cari</h2>
 {!token? 


`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&tipe_respons=${RESPONSE_TYPE}`}>
 Masuk ke Spotify
 </a>
 </div> 
 :



"keluar"onClick={logout}>Keluar</button> 
 </div 
 }
 </div>
 </header>
 </div>
 );
}




eksporbawaan Aplikasi;

Mari kita uraikan:

• Komponen ini secara kondisional merender komponen pencarian dan tombol logout, jika token akses hadir sebaliknya, itu merender div dengan tautan yang mengarahkan pengguna ke otorisasi Spotify halaman. Tautan berisi parameter kueri yang menentukan nilai CLIENT_ID, REDIRECT_URI, dan RESPONSE_TYPE.
• Setelah Anda mengotentikasi pengguna, panggil hook useEffect untuk menjalankan blok kode saat komponen terpasang. Blok kode ini mengambil token akses dari hash URL dan menetapkannya sebagai nilai baru dari variabel status token. Itu juga menyimpan token di penyimpanan lokal untuk mempertahankan status otentikasi.
• Dengan token akses yang disimpan dalam status, token diteruskan sebagai penyangga ke komponen Searcher untuk membuat permintaan ke API web Spotify.
• Untuk keluar, kode cukup menghapus token akses dari penyimpanan lokal dan menyetel status token ke string kosong.

Terapkan Fungsi Pencarian dan Hasil Render

Di direktori /src, buat folder baru dan beri nama, komponen. Di dalam folder ini, buat file baru: Searcher.js, dan tambahkan kode di bawah ini.

impor Bereaksi, {useState, useEffect} dari'reaksi'
impor axios dari'axios';
fungsiPencari(Atribut) {
const [searchKey, setSearchKey] = useState("")
const [trek, setTracks] = useState([])

const access_token = props.token

const searchArtist = asinkron () => {
const {data} = menunggu axios.get(" https://api.spotify.com/v1/search", {
 tajuk: {
'Jenis konten': "aplikasi/json",
'Otorisasi': `Pembawa ${access_token}`
 },
 parameter: {
 q: kunci pencarian,
 jenis: "artis"
 }
 })

var artistID = data.artists.items[0].pengenal
var artistTracks = menunggu axios.get(` https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
 tajuk: {
 Otorisasi: `Pembawa ${access_token}`
 },
 parameter: {
 membatasi: 10,
 pasar: 'KITA'
 }
 })
 setTracks (artistTracks.data.tracks);
 }
kembali (
 <>

"Formulir Pencarian">
 NamaKelas ="Nama"
 jenis="teks"
 placeholder="Cari Berdasarkan Nama Artis ..."
 onChange={(e) => {setSearchKey (e.target.nilai)}}

 />
Cari </button> 
 </div>
 {
 trek.iris(0, 5).peta(melacak => (




 {track.name}</li>
 </ul>
 </div>
 ))
 }
 </> 
 )
}


eksporbawaan Pencari

Mari kita uraikan:

• Komponen mendefinisikan konstanta access_token yang disetel ke properti token yang diteruskan sebagai penyangga. Token ini nantinya akan diteruskan di header permintaan API ke titik akhir API pencarian Spotify.
• Tetapkan dua status: searchKey dan track. Status searchKey menyimpan nilai masukan pencarian saat ini. Status trek menyimpan deretan 10 trek teratas untuk artis yang akan dikembalikan oleh pencarian Spotify.
• Fungsi searchArtist membuat permintaan GET ke API Spotify untuk mencari data artis berdasarkan nilai searchKey.
• Kemudian mengekstrak ID artis dari data respons dan membuat permintaan GET lainnya untuk mengambil lagu teratas artis tersebut. Dari data respons, ini mengekstrak 10 trek teratas dan menyetel variabel trek.
• Komponen mengembalikan kolom input dan tombol pencarian. Ketika pengguna mengklik tombol pencarian, itu memanggil fungsi searchArtist untuk mengambil dan menampilkan trek teratas untuk artis tertentu. Terakhir, ia menggunakan fungsi map untuk merender lima trek teratas dalam larik trek sebagai daftar.

Jalankan server pengembangan Anda untuk memperbarui perubahan, lalu buka http://localhost: 3000 di browser Anda untuk melihat hasilnya.

Sesuaikan Aplikasi Anda Dengan Fitur Spotify

Panduan ini menyoroti langkah-langkah yang diperlukan untuk mengajukan permintaan ke API web Spotify untuk mencari data musik artis. Namun, Anda dapat berbuat lebih banyak dengan fitur Spotify yang disediakan oleh SDK dan API seperti mengintegrasikan pemutar pemutaran webnya dengan tampilan dan nuansa yang sama seperti di Spotify.

Keuntungan dari SDK dan API Spotify adalah kaya akan fitur dan Anda dapat dengan mudah mengintegrasikannya ke aplikasi web atau seluler apa pun.