Bygg en musikksøkeapplikasjon med React og Spotify API

Spotify har fullstendig endret måten vi streamer musikk på med en katalog som inneholder millioner av sanger, album og spillelister.

Ved å bruke web-APIet kan du gjøre Spotify-opplevelsene dine enda morsommere ved å bygge din egen React-app for musikksøk. API-en gir tilgang til en rekke musikkdata som du kan bruke til å bygge en tilpasset musikkapp og tilpasse den til din smak.

Spotify for utviklere

Spotify tilbyr et bredt spekter av musikkstrømmefunksjoner som søk, offline avspilling og personlige anbefalinger. Spotify for Developers-plattformen gir tilgang til API-ene og SDK-ene som driver disse funksjonene. I denne veiledningen vil du utforske web-API og lære hvordan du integrerer det i React-applikasjonen din for å søke etter sanger du liker.

Registrer deg for en konto

For å komme i gang må du ha en Spotify-konto. Hvis du ikke allerede har en, besøk

Registrer søknaden din

Når du logger på utviklerkonsollen, registrerer du applikasjonen for å få tilgang til web-API. På dashbordsiden klikker du på Lag en app -knappen, fyll inn navnet og beskrivelsen, og godta til slutt vilkårene for å opprette applikasjonen.

Til slutt klikker du på Endre innstillinger for å endre til URL-innstillingene for omdirigering. Siden applikasjonen din fortsatt er i utviklingsmodus, legg til http://localhost: 3000 som omdirigerings-URL. Dette er URL-en du vil omdirigere brukeren til etter at de har autentisert med Spotify.

Etter å ha registrert søknaden din, vil Spotify oppgi din unike klient-ID og klienthemmeligheter som du kan bruke til å:

• Legg til Spotify-autentiseringsflyt for å logge på med Spotify-legitimasjonen din i React-applikasjonen din.
• Få ditt unike tilgangstoken for å sende forespørsler til forskjellige web-API-endepunkter, inkludert et søk etter data som spor eller album.

Sett opp React Client

Opprett en React-applikasjon og naviger til rotkatalogen og lag en ny fil, .env, for å angi noen miljøvariabler. Du kan få klient-ID-en din fra Spotifys utviklerdashbord.

REACT_APP_SPOTIFY_CLIENT_ID = "din klient-ID"
REACT_APP_SPOTIFY_REDIRECT_URI = " http://localhost: 3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = " https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "token"

Installer de nødvendige pakkene

Installer Axios. Du vil bruke metodene til å sende HTTP-forespørsler til Spotifys web-API.

npm installer aksioer

Legg til Spotifys autentiseringsarbeidsflyt

Spotify spesifiserer at alle forespørsler til ethvert Web API-endepunkt har et gyldig tilgangstoken i forespørselsoverskriften. For å få tilgangstokenet må applikasjonen din først autentiseres med Spotify.

Spotify støtter flere autentisering og autorisasjonmetoder som en autorisasjonskode, klientlegitimasjon eller implisitte bevilgningsmetoder.

Den enkleste å implementere er den implisitte bevilgningsmetoden som krever at en applikasjon sender forespørsler til autentiseringsendepunktet (du la til dette i ENV-filen), og passerer klient-IDen din. Ved vellykket autentisering vil Spotify svare ved å gi et tilgangstoken som utløper over en spesifisert periode.

Åpne src/App.js-filen din, slett reaktorkoden og legg til koden nedenfor:

import Reager, { useState, useEffect } fra'reagere';
import Søker fra'./components/Searcher';
funksjonApp() {
konst CLIENT_ID=prosess.env. REACT_APP_SPOTIFY_CLIENT_ID
konst REDIRECT_URI =prosess.env. REACT_APP_SPOTIFY_REDIRECT_URI 
konst AUTH_ENDPOINT =prosess.env. REACT_APP_SPOTIFY_AUTH_ENDPOINT 
konst RESPONSE_TYPE = prosess.env. REACT_APP_SPOTIFY_RESPONSE_TYPE
konst [token, setToken] = useState("");
 useEffect(() => { 
konst hasj = vindu.location.hash;
la token = vindu.localStorage.getItem("token");

hvis (hash && hash) {
 token = hash.substring(1).dele("&").finne(elem => elem.startsWith("access_token")).dele("=")[1];
vindu.location.hash = "";
vindu.localStorage.setItem("token", token);
 }
 setToken (token)
 }, [])
konst logge ut = () => {
 setToken("");
vindu.localStorage.removeItem("token");
 }
komme tilbake (

"App">
"App-header">
"SearchContainer">
Søkelig</h2>
 {!token? 


`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`}>
 Logg inn på Spotify
 </a>
 </div> 
 :



"Logg ut"onClick={logout}>Logg av</button> 
 </div 
 }
 </div>
 </header>
 </div>
 );
}




eksportmisligholde App;

La oss bryte det ned:

• Denne komponenten gjengir søkekomponenten og utloggingsknappen betinget, hvis tilgangstokenet er tilstede ellers, gjengir den en div med en lenke som leder brukeren til Spotify-autorisasjonen side. Koblingen inneholder spørringsparametere som spesifiserer CLIENT_ID-, REDIRECT_URI- og RESPONSE_TYPE-verdiene.
• Når du har autentisert en bruker, ring useEffect-kroken for å kjøre en kodeblokk når komponenten monteres. Denne kodeblokken henter tilgangstoken fra URL-hashen og setter den som den nye verdien av tokentilstandsvariabelen. Den lagrer også tokenet i lokal lagring for å opprettholde autentiseringstilstanden.
• Med tilgangstokenet lagret i tilstanden, sendes det som en støtte til Searcher-komponenten for å sende forespørsler til Spotifys web-API.
• For å logge ut fjerner koden ganske enkelt tilgangstokenet fra den lokale lagringen og setter tokentilstanden til en tom streng.

Implementer søkefunksjonen og gjengi resultater

I /src-katalogen, opprett en ny mappe og navngi den, komponenter. Opprett en ny fil i denne mappen: Searcher.js, og legg til koden nedenfor.

import Reager, {useState, useEffect} fra'reagere'
import aksioer fra'aksios';
funksjonSøker(Rekvisitter) {
konst [searchKey, setSearchKey] = useState("")
konst [tracks, setTracks] = useState([])

konst access_token = props.token

konst searchArtist = asynkron () => {
konst {data} = avvente axios.get(" https://api.spotify.com/v1/search", {
 overskrifter: {
'Innholdstype': "applikasjon/json",
'Autorisasjon': `Bærer ${access_token}`
 },
 params: {
 q: søkenøkkel,
 type: "kunstner"
 }
 })

var artistID = data.artists.items[0].id
var artistTracks = avvente axios.get(` https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
 overskrifter: {
 Autorisasjon: `Bærer ${access_token}`
 },
 params: {
 grense: 10,
 marked: 'OSS'
 }
 })
 setTracks (artistTracks.data.tracks);
 }
komme tilbake (
 <>

"Søkeskjema">
 klassenavn ="Navn"
 type="tekst"
 plassholder="Søk etter artistnavn ..."
 onChange={(e) => {setSearchKey (e.target.value)}}

 />
Søk</button> 
 </div>
 {
 tracks.slice(0, 5).kart(spor => (




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


eksportmisligholde Søker

La oss bryte det ned:

• Komponenten definerer access_token-konstanten som den setter til token-egenskapen som sendes som en prop. Den sender senere dette tokenet i overskriften til API-forespørselen til Spotifys søke-API-endepunkt.
• Definer to tilstander: søkenøkkelen og spor. SearchKey-tilstanden inneholder gjeldende verdi for søkeinndata. Spotstatusen inneholder en rekke av de 10 beste sporene for artisten som Spotify-søket vil returnere.
• SearchArtist-funksjonen sender en GET-forespørsel til Spotify API for å søke etter artistdata basert på searchKey-verdien.
• Den trekker deretter ut ID-en til artisten fra svardataene og gjør en ny GET-forespørsel for å hente toppsporene for den artisten. Fra responsdataene trekker den ut de 10 beste sporene og setter sporvariabelen.
• Komponenten returnerer et inndatafelt og en søkeknapp. Når en bruker klikker på søkeknappen, kaller den opp searchArtist-funksjonen for å hente og vise toppsporene for en bestemt artist. Til slutt bruker den kartfunksjonen til å gjengi de fem beste sporene i sporarrayen som en liste.

Kjør utviklingsserveren for å oppdatere endringene, og gå deretter over til http://localhost: 3000 i nettleseren din for å se resultatene.

Tilpass applikasjonen din med Spotifys funksjoner

Denne veiledningen fremhevet trinnene som kreves for å sende forespørsler til Spotifys web-API for å søke etter artisters musikkdata. Du kan imidlertid gjøre mer med Spotifys funksjoner levert av SDK-er og API-er, for eksempel å integrere nettavspillingsspilleren med samme utseende og følelse som på Spotify.

Fordelen med Spotifys SDK-er og API-er er at de er funksjonsrike og du kan enkelt integrere dem i hvilken som helst nett- eller mobilapplikasjon.