Izradite aplikaciju za pretraživanje glazbe s React i Spotify API-jem

Spotify je potpuno promijenio način na koji streamamo glazbu s katalogom koji sadrži milijune pjesama, albuma i popisa za reprodukciju.

Koristeći njegov web API, možete učiniti svoje Spotify iskustvo još zabavnijim izgradnjom vlastite React aplikacije za pretraživanje glazbe. API pruža pristup nizu glazbenih podataka koje možete koristiti za izradu prilagođene glazbene aplikacije i personalizaciju prema vašem ukusu.

Spotify za programere

Spotify nudi širok raspon značajki strujanja glazbe kao što su pretraživanje, izvanmrežna reprodukcija i personalizirane preporuke. Platforma Spotify for Developers omogućuje pristup API-jima i SDK-ovima koji pokreću ove značajke. U ovom ćete vodiču istražiti web API i naučiti kako ga integrirati u svoju React aplikaciju za traženje pjesama koje vam se sviđaju.

Prijavite se za račun

Za početak morate imati Spotify račun. Ako ga već nemate, posjetite

Registrirajte svoju prijavu

Nakon što se prijavite na konzolu za razvojne programere, registrirajte svoju aplikaciju kako biste dobili pristup web API-ju. Na stranici nadzorne ploče kliknite Stvorite aplikaciju gumb, ispunite naziv i opis te na kraju prihvatite uvjete i odredbe za izradu aplikacije.

Na kraju kliknite na Uredi postavke gumb za promjenu na postavke URL-a za preusmjeravanje. Budući da je vaša aplikacija još u razvojnom modu, dodajte http://localhost: 3000 kao URL za preusmjeravanje. Ovo je URL na koji želite preusmjeriti korisnika nakon autentifikacije na Spotifyju.

Nakon registracije vaše aplikacije, Spotify će dati vaš jedinstveni ID klijenta i tajne klijenta koje možete koristiti za:

• Dodajte tijek provjere autentičnosti Spotifyja kako biste se prijavili sa svojim vjerodajnicama Spotifyja u svojoj aplikaciji React.
• Nabavite svoj jedinstveni pristupni token za upućivanje zahtjeva različitim krajnjim točkama web API-ja, uključujući pretraživanje podataka kao što su pjesme ili albumi.

Postavite React klijenta

Napravite React aplikaciju i idite do korijenskog direktorija i kreirajte novu datoteku, .env, za postavljanje nekih varijabli okruženja. Svoj ID klijenta možete dobiti s Spotifyjeve nadzorne ploče za razvojne programere.

REACT_APP_SPOTIFY_CLIENT_ID = "vaš ID klijenta"
REACT_APP_SPOTIFY_REDIRECT_URI = " http://localhost: 3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = " https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "znak"

Instalirajte potrebne pakete

Instalirajte Axios. Koristit ćete njegove metode za slanje HTTP zahtjeva Spotifyjevom web API-ju.

npm instalirati axios

Dodajte Spotifyjev radni tijek provjere autentičnosti

Spotify navodi da svi zahtjevi prema bilo kojoj krajnjoj točki Web API-ja imaju valjani pristupni token u zaglavlju zahtjeva. Da biste dobili pristupni token, vaša se aplikacija najprije mora autentificirati putem Spotifyja.

Spotify podržava nekoliko autentifikacija i autorizacijametode kao što su autorizacijski kod, vjerodajnice klijenta ili implicitne metode dodjele.

Najjednostavnija za implementaciju je metoda implicitne dodjele koja zahtijeva da aplikacija šalje zahtjeve krajnjoj točki autentifikacije (to ste dodali u ENV datoteci), prosljeđujući vaš ID klijenta. Nakon uspješne provjere autentičnosti, Spotify će odgovoriti pružanjem pristupnog tokena koji ističe nakon određenog razdoblja.

Otvorite svoju datoteku src/App.js, izbrišite predložak React koda i dodajte kod ispod:

uvoz Reagiraj, {useState, useEffect} iz'reagirati';
uvoz Tražilica iz'./components/Searcher';
funkcijaaplikacija() {
konst CLIENT_ID=process.env. REACT_APP_SPOTIFY_CLIENT_ID
konst REDIRECT_URI =process.env. REACT_APP_SPOTIFY_REDIRECT_URI 
konst AUTH_ENDPOINT =process.env. REACT_APP_SPOTIFY_AUTH_ENDPOINT 
konst RESPONSE_TYPE = process.env. REACT_APP_SPOTIFY_RESPONSE_TYPE
konst [token, setToken] = useState("");
 useEffect(() => { 
konst hash = prozor.location.hash;
neka token = prozor.localStorage.getItem("znak");

ako (raspršiti && raspršiti) {
 token = hash.substring(1).podjela("&").pronaći(elem => elem.startsWith("access_token")).podjela("=")[1];
prozor.location.hash = "";
prozor.localStorage.setItem("znak", token);
 }
 setToken (token)
 }, [])
konst odjava = () => {
 setToken("");
prozor.localStorage.removeItem("znak");
 }
povratak (

"Aplikacija">
"Zaglavlje aplikacije">
"Traži kontejner">
Tragavo</h2>
 {!znak? 


`${AUTH_ENDPOINT}?id_klijenta=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&vrsta_odgovora=${RESPONSE_TYPE}`}>
 Prijavite se na Spotify
 </a>
 </div> 
 :



"Odjavite se"onClick={odjava}>Odjava</button> 
 </div 
 }
 </div>
 </header>
 </div>
 );
}




izvozzadano aplikacija;

Razdvojimo to:

• Ova komponenta uvjetno prikazuje komponentu pretraživanja i gumb za odjavu, ako je pristupni token postoji inače, prikazuje div s vezom koja usmjerava korisnika na Spotify autorizaciju stranica. Veza sadrži parametre upita koji određuju vrijednosti CLIENT_ID, REDIRECT_URI i RESPONSE_TYPE.
• Nakon što ste autentificirali korisnika, pozovite useEffect kuku za pokretanje bloka koda kada se komponenta montira. Ovaj blok koda dohvaća pristupni token iz hash URL-a i postavlja ga kao novu vrijednost varijable stanja tokena. Također pohranjuje token u lokalnu pohranu kako bi zadržao stanje provjere autentičnosti.
• S pristupnim tokenom pohranjenim u stanju, prosljeđuje se kao potpora komponenti Searcher za upućivanje zahtjeva Spotifyjevom web API-ju.
• Za odjavu, kod jednostavno uklanja pristupni token iz lokalne pohrane i postavlja stanje tokena na prazan niz.

Implementirajte funkciju pretraživanja i prikažite rezultate

U direktoriju /src stvorite novu mapu i nazovite je komponente. Unutar ove mape stvorite novu datoteku: Searcher.js i dodajte kod u nastavku.

uvoz Reagiraj, {useState, useEffect} iz'reagirati'
uvoz axios iz'axios';
funkcijaTražilica(rekviziti) {
konst [searchKey, setSearchKey] = useState("")
konst [tragovi, setTracks] = useState([])

konst access_token = props.token

konst searchArtist = asinkroni () => {
konst {podaci} = čekati axios.get(" https://api.spotify.com/v1/search", {
 zaglavlja: {
'Content-Type': "aplikacija/json",
'Autorizacija': `Nositelj ${access_token}`
 },
 parametri: {
 q: SearchKey,
 tip: "umjetnik"
 }
 })

var artistID = data.artists.items[0].iskaznica
var artistTracks = čekati axios.get(` https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
 zaglavlja: {
 Autorizacija: `Nositelj ${access_token}`
 },
 parametri: {
 ograničiti: 10,
 tržište: 'NAS'
 }
 })
 setTracks (artistTracks.data.tracks);
 }
povratak (
 <>

"Obrazac za pretraživanje">
 ime klase ="Ime"
 vrsta="tekst"
 rezervirano mjesto="Traži po imenu izvođača ..."
 onChange={(e) => {setSearchKey (e.target.value)}}

 />
Traži</button> 
 </div>
 {
 tracks.slice(0, 5).karta(staza => (




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


izvozzadano Tražilica

Razdvojimo to:

• Komponenta definira access_token konstantu koju postavlja na svojstvo tokena proslijeđeno kao potpora. Kasnije prosljeđuje ovaj token u zaglavlju API zahtjeva do Spotifyjeve krajnje točke API-ja za pretraživanje.
• Definirajte dva stanja: searchKey i tracks. Stanje searchKey sadrži trenutnu vrijednost unosa pretraživanja. Stanje pjesama sadrži niz od 10 najboljih pjesama za izvođača koje će Spotify pretraga vratiti.
• Funkcija searchArtist šalje zahtjev GET Spotify API-ju za traženje podataka o izvođačima na temelju vrijednosti searchKey.
• Zatim izdvaja ID izvođača iz podataka odgovora i postavlja još jedan GET zahtjev za dohvaćanje najpopularnijih pjesama tog izvođača. Iz podataka odgovora izdvaja se prvih 10 zapisa i postavlja varijabla zapisa.
• Komponenta vraća polje za unos i gumb za pretraživanje. Kada korisnik klikne gumb za pretraživanje, on poziva funkciju searchArtist da dohvati i prikaže najbolje pjesme za određenog izvođača. Naposljetku, koristi se funkcijom karte za prikaz prvih pet pjesama u nizu staza kao popis.

Pokrenite svoj razvojni poslužitelj da ažurirate promjene, a zatim prijeđite na http://localhost: 3000 u vašem pregledniku da vidite rezultate.

Prilagodite svoju aplikaciju sa značajkama Spotifyja

Ovaj vodič istaknuo je korake potrebne za slanje zahtjeva Spotifyjevom web API-ju za traženje glazbenih podataka izvođača. Međutim, možete učiniti više sa značajkama Spotifyja koje pružaju njegovi SDK-ovi i API-ji, kao što je integracija njegovog web playera za reprodukciju s istim izgledom i osjećajem kao na Spotifyju.

Prednost Spotifyjevih SDK-ova i API-ja je to što su bogati značajkama i možete ih jednostavno integrirati u bilo koju web ili mobilnu aplikaciju.