Byg en musiksøgningsapplikation med React og Spotify API

Spotify har fuldstændig ændret den måde, vi streamer musik på, med et katalog, der indeholder millioner af sange, albums og afspilningslister.

Ved at bruge dets web-API kan du gøre dine Spotify-oplevelser endnu sjovere ved at bygge din egen React-musiksøgningsapplikation. API'en giver adgang til en række musikdata, som du kan bruge til at bygge en brugerdefineret musikapp og tilpasse den til din smag.

Spotify for udviklere

Spotify tilbyder en bred vifte af musikstreamingfunktioner såsom søgning, offlineafspilning og personlige anbefalinger. Spotify for Developers-platformen giver adgang til de API'er og SDK'er, der driver disse funktioner. I denne guide vil du udforske web-API'en og lære, hvordan du integrerer den i din React-applikation for at søge efter sange, du kan lide.

Tilmeld dig en konto

For at komme i gang skal du have en Spotify-konto. Hvis du ikke allerede har en, så besøg

Registrer din ansøgning

Når du logger ind på udviklerkonsollen, skal du registrere din applikation for at få adgang til web-API'en. På dashboard-siden skal du klikke på Opret en app knappen, udfyld navnet og beskrivelsen, og accepter til sidst vilkår og betingelser for at oprette applikationen.

Til sidst skal du klikke på Rediger indstillinger knappen for at skifte til indstillingerne for omdirigering af URL. Da din applikation stadig er i udviklingstilstand, skal du tilføje http://localhost: 3000 som din omdirigerings-URL. Dette er den URL, du vil omdirigere brugeren til, efter at de har godkendt med Spotify.

Efter registrering af din ansøgning vil Spotify give dit unikke klient-id og klienthemmeligheder, som du kan bruge til at:

• Tilføj Spotify-godkendelsesflow for at logge ind med dine Spotify-legitimationsoplysninger i din React-applikation.
• Få dit unikke adgangstoken til at fremsætte anmodninger til forskellige web-API-slutpunkter, herunder en søgning efter data såsom numre eller album.

Konfigurer React Client

Opret en React-applikation og naviger til rodmappen og opret en ny fil, .env, for at indstille nogle miljøvariabler. Du kan få dit klient-id fra Spotifys udvikler-dashboard.

REACT_APP_SPOTIFY_CLIENT_ID = "dit 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 = "polet"

Installer de nødvendige pakker

Installer Axios. Du vil bruge dens metoder til at lave HTTP-anmodninger til Spotifys web-API.

npm installere aksioer

Tilføj Spotify's Authentication Workflow

Spotify angiver, at alle anmodninger til ethvert Web API-slutpunkt har et gyldigt adgangstoken i anmodningsheaderen. For at få adgangstokenet skal din applikation først godkendes med Spotify.

Spotify understøtter flere autentificering og autorisationmetoder såsom en autorisationskode, klientlegitimationsoplysninger eller implicitte bevillingsmetoder.

Den enkleste at implementere er den implicitte bevillingsmetode, som kræver, at en applikation sender anmodninger til godkendelsesslutpunktet (du tilføjede dette i ENV-filen) og passerer dit klient-id. Efter vellykket godkendelse vil Spotify reagere ved at levere et adgangstoken, der udløber over en bestemt periode.

Åbn din src/App.js-fil, slet kedelpladen React-koden, og tilføj koden nedenfor:

importere Reager, { useState, useEffect } fra'reagere';
importere Søger fra'./components/Searcher';
fungereApp() {
konst CLIENT_ID=proces.env. REACT_APP_SPOTIFY_CLIENT_ID
konst REDIRECT_URI =proces.env. REACT_APP_SPOTIFY_REDIRECT_URI 
konst AUTH_ENDPOINT =proces.env. REACT_APP_SPOTIFY_AUTH_ENDPOINT 
konst RESPONSE_TYPE = process.env. REACT_APP_SPOTIFY_RESPONSE_TYPE
konst [token, setToken] = useState("");
 useEffect(() => { 
konst hash = vindue.location.hash;
lade token = vindue.localStorage.getItem("polet");

hvis (hash && hash) {
 token = hash.substring(1).dele("&").Find(elem => elem.startsWith("adgangstoken")).dele("=")[1];
vindue.location.hash = "";
vindue.localStorage.setItem("polet", polet);
 }
 setToken (token)
 }, [])
konst log ud = () => {
 setToken("");
vindue.localStorage.removeItem("polet");
 }
Vend tilbage (

"App">
"App-header">
"SearchContainer">
Søgeagtig</h2>
 {!polet? 


`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&responstype=${RESPONSE_TYPE}`}>
 Log ind på Spotify
 </a>
 </div> 
 :



"Log ud"onClick={logout}>Log ud</button> 
 </div 
 }
 </div>
 </header>
 </div>
 );
}




eksportStandard App;

Lad os opdele det:

• Denne komponent gengiver betinget søgekomponenten og logout-knappen, hvis adgangstokenet er til stede ellers, gengiver den en div med et link, der leder brugeren til Spotify-autorisationen side. Linket indeholder forespørgselsparametre, der angiver værdierne CLIENT_ID, REDIRECT_URI og RESPONSE_TYPE.
• Når du har godkendt en bruger, skal du kalde useEffect-hook for at køre en kodeblok, når komponenten monteres. Denne kodeblok henter adgangstokenet fra URL-hashen og sætter den som den nye værdi af tokentilstandsvariablen. Det gemmer også tokenet i lokalt lager for at bevare godkendelsestilstanden.
• Med adgangstokenet gemt i tilstanden, videregives det som en støtte til Searcher-komponenten for at fremsætte anmodninger til Spotifys web-API.
• For at logge ud fjerner koden simpelthen adgangstokenet fra det lokale lager og indstiller tokentilstanden til en tom streng.

Implementer søgefunktionen og gengiv resultater

I mappen /src skal du oprette en ny mappe og navngive den, komponenter. Inde i denne mappe skal du oprette en ny fil: Searcher.js, og tilføje koden nedenfor.

importere Reager, {useState, useEffect} fra'reagere'
importere axios fra'aksios';
fungereSøger(rekvisitter) {
konst [searchKey, setSearchKey] = useState("")
konst [tracks, setTracks] = useState([])

konst access_token = rekvisitter.token

konst searchArtist = asynkron () => {
konst {data} = vente axios.get(" https://api.spotify.com/v1/search", {
 overskrifter: {
'Indholdstype': "applikation/json",
'Bemyndigelse': 'Bærer ${access_token}`
 },
 params: {
 q: søgenøgle,
 type: "kunstner"
 }
 })

var artistID = data.artists.items[0].id
var artistTracks = vente axios.get(` https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
 overskrifter: {
 Bemyndigelse: 'Bærer ${access_token}`
 },
 params: {
 begrænse: 10,
 marked: 'OS'
 }
 })
 setTracks (artistTracks.data.tracks);
 }
Vend tilbage (
 <>

"Søgeformular">
 klassenavn ="Navn"
 type="tekst"
 pladsholder="Søg efter kunstnernavn ..."
 onChange={(e) => {setSearchKey (e.target.value)}}

 />
Søg</button> 
 </div>
 {
 tracks.slice(0, 5).kort(spore => (




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


eksportStandard Søger

Lad os opdele det:

• Komponenten definerer access_token-konstanten, som den sætter til token-egenskaben, der sendes som en prop. Den sender senere dette token i overskriften på API-anmodningen til Spotifys søge-API-slutpunkt.
• Definer to tilstande: søgetasten og spor. SearchKey-tilstanden indeholder den aktuelle værdi af søgeinputtet. Spottilstanden indeholder en række af de 10 bedste numre for kunstneren, som Spotify-søgningen vil returnere.
• SearchArtist-funktionen sender en GET-anmodning til Spotify API'et for at søge efter kunstneres data baseret på searchKey-værdien.
• Den udtrækker derefter kunstnerens ID fra svardataene og laver endnu en GET-anmodning for at hente de øverste numre for den pågældende kunstner. Fra svardataene udtrækker den de 10 bedste spor og indstiller sporvariablen.
• Komponenten returnerer et inputfelt og en søgeknap. Når en bruger klikker på søgeknappen, kalder den searchArtist-funktionen for at hente og vise topnumrene for en bestemt kunstner. Endelig bruger den kortfunktionen til at gengive de fem øverste spor i sporarrayet som en liste.

Kør din udviklingsserver for at opdatere ændringerne, og gå derefter over til http://localhost: 3000 i din browser for at se resultaterne.

Tilpas din applikation med Spotifys funktioner

Denne vejledning fremhævede de nødvendige trin for at sende anmodninger til Spotifys web-API for at søge efter kunstneres musikdata. Du kan dog gøre mere med Spotifys funktioner leveret af dets SDK'er og API'er, såsom at integrere dens webafspilningsafspiller med det samme udseende som på Spotify.

Fordelen ved Spotifys SDK'er og API'er er, at de er rige på funktioner, og du kan nemt integrere dem i enhver web- eller mobilapplikation.