Bouw een applicatie voor het zoeken naar muziek met React en Spotify API

Spotify heeft de manier waarop we muziek streamen volledig veranderd met een catalogus met miljoenen nummers, albums en afspeellijsten.

Met behulp van de web-API kunt u uw Spotify-ervaringen nog leuker maken door uw eigen React-muziekzoektoepassing te bouwen. De API biedt toegang tot een reeks muziekgegevens die u kunt gebruiken om een ​​aangepaste muziek-app te bouwen en deze naar uw smaak te personaliseren.

Spotify voor ontwikkelaars

Spotify biedt een breed scala aan functies voor het streamen van muziek, zoals zoeken, offline afspelen en gepersonaliseerde aanbevelingen. Het Spotify for Developers-platform biedt toegang tot de API's en SDK's die deze functies mogelijk maken. In deze gids verken je de web-API en leer je hoe je deze kunt integreren in je React-applicatie om te zoeken naar nummers die je leuk vindt.

Meld u aan voor een account

Om te beginnen heb je een Spotify-account nodig. Als je er nog geen hebt, bezoek dan

Registreer uw aanvraag

Nadat u zich hebt aangemeld bij de ontwikkelaarsconsole, registreert u uw toepassing om toegang te krijgen tot de web-API. Klik op de dashboardpagina op de Maak een app knop, vul de naam en de beschrijving in en accepteer ten slotte de algemene voorwaarden om de applicatie te maken.

Klik ten slotte op de Instellingen bewerken knop om naar de omleidings-URL-instellingen te gaan. Aangezien uw toepassing zich nog in de ontwikkelingsmodus bevindt, voegt u toe http://localhost: 3000 als uw omleidings-URL. Dit is de URL waarnaar u de gebruiker wilt omleiden nadat deze zich heeft geverifieerd bij Spotify.

Na het registreren van uw toepassing, verstrekt Spotify uw unieke klant-ID en klantgeheimen die u kunt gebruiken om:

• Voeg Spotify-authenticatiestroom toe om in te loggen met uw Spotify-inloggegevens in uw React-applicatie.
• Ontvang uw unieke toegangstoken om verzoeken te doen aan verschillende web-API-eindpunten, inclusief een zoekopdracht naar gegevens zoals tracks of albums.

Stel de React-client in

Maak een React-applicatie en navigeer naar de hoofdmap en maak een nieuw bestand aan, .env, om enkele omgevingsvariabelen in te stellen. U kunt uw klant-ID verkrijgen via het ontwikkelaarsdashboard van Spotify.

REACT_APP_SPOTIFY_CLIENT_ID = "uw klant-ID"
REACT_APP_SPOTIFY_REDIRECT_URI = " http://localhost: 3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = " https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "teken"

Installeer de vereiste pakketten

Axios installeren. U gebruikt de methoden om HTTP-verzoeken te doen aan de web-API van Spotify.

npm axios installeren

Voeg de authenticatieworkflow van Spotify toe

Spotify specificeert dat alle verzoeken aan elk Web API-eindpunt een geldig toegangstoken in de verzoekheader hebben. Om het toegangstoken te krijgen, moet uw applicatie zich eerst verifiëren met Spotify.

Spotify ondersteunt er verschillende authenticatie en authorisatiemethoden zoals een autorisatiecode, klantreferenties of impliciete toekenningsmethoden.

De eenvoudigste om te implementeren is de impliciete toekenningsmethode, waarbij een toepassing verzoeken doet aan het auth-eindpunt (u hebt dit toegevoegd in het ENV-bestand), waarbij uw klant-ID wordt doorgegeven. Na succesvolle authenticatie zal Spotify reageren door een toegangstoken te verstrekken dat over een bepaalde periode vervalt.

Open uw src/App.js-bestand, verwijder de boilerplate React-code en voeg de onderstaande code toe:

importeren Reageren, { useState, useEffect } van'Reageer';
importeren Zoeker van'./componenten/Zoeker';
functieapp() {
const CLIENT_ID=proces.env. REACT_APP_SPOTIFY_CLIENT_ID
const REDIRECT_URI =proces.env. REACT_APP_SPOTIFY_REDIRECT_URI 
const AUTH_ENDPOINT =proces.env. REACT_APP_SPOTIFY_AUTH_ENDPOINT 
const RESPONSE_TYPE = proces.env. REACT_APP_SPOTIFY_RESPONSE_TYPE
const [token, setToken] = useState("");
 gebruikEffect(() => { 
const hasj = raam.locatie.hash;
laten teken = raam.localStorage.getItem("teken");

als (hasj && hasj) {
 token = hash.subtekenreeks(1.split("&").vinden(elem => elem.startsWith("toegangstoken")).split("=")[1];
raam.locatie.hash = "";
raam.localStorage.setItem("teken", teken);
 }
 setToken (token)
 }, [])
const uitloggen = () => {
 setToken("");
raam.localStorage.removeItem("teken");
 }
opbrengst (

"App">
"App-header">
"Zoekcontainer">
Zoeken</h2>
 {!teken? 


`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`}>
 Log in op Spotify
 </a>
 </div> 
 :



"uitloggen"onClick={logout}>Logout</button> 
 </div 
 }
 </div>
 </header>
 </div>
 );
}




exporterenstandaard App;

Laten we het opsplitsen:

• Deze component geeft voorwaardelijk de zoekcomponent en de uitlogknop weer, als het toegangstoken is anders aanwezig is, geeft het een div weer met een link die de gebruiker naar de Spotify-autorisatie leidt bladzijde. De link bevat queryparameters die de waarden CLIENT_ID, REDIRECT_URI en RESPONSE_TYPE specificeren.
• Zodra je een gebruiker hebt geauthenticeerd, roep je de useEffect hook aan om een ​​codeblok uit te voeren wanneer de component wordt gemount. Dit codeblok haalt het toegangstoken op uit de URL-hash en stelt het in als de nieuwe waarde van de tokenstatusvariabele. Het slaat het token ook op in lokale opslag om de authenticatiestatus te behouden.
• Met het toegangstoken opgeslagen in status, wordt het doorgegeven als een prop aan de Searcher-component om verzoeken te doen aan de web-API van Spotify.
• Om uit te loggen, verwijdert de code eenvoudig het toegangstoken uit de lokale opslag en stelt de tokenstatus in op een lege tekenreeks.

Implementeer de zoekfunctionaliteit en geef resultaten weer

Maak in de map /src een nieuwe map en noem deze componenten. Maak in deze map een nieuw bestand: Searcher.js en voeg de onderstaande code toe.

importeren Reageren, {useState, useEffect} van'Reageer'
importeren axioma's van'axios';
functieZoeker(rekwisieten) {
const [searchKey, setSearchKey] = useState("")
const [tracks, setTracks] = useState([])

const access_token = rekwisieten.token

const zoekArtiest = asynchroon () => {
const {gegevens} = wachten axios.get(" https://api.spotify.com/v1/search", {
 koppen: {
'Content-type': "toepassing/json",
'Autorisatie': 'Drager ${access_token}`
 },
 parameters: {
 q: zoeksleutel,
 type: "artiest"
 }
 })

var artiestID = data.artiesten.items[0].ID kaart
var artiestTracks = wachten axios.get(` https://api.spotify.com/v1/artists/${artiestID}/top-tracks`, {
 koppen: {
 Autorisatie: 'Drager ${access_token}`
 },
 parameters: {
 begrenzing: 10,
 markt: 'ONS'
 }
 })
 setTracks (artiestTracks.data.tracks);
 }
opbrengst (
 <>

"Zoekformulier">
 classNaam ="Naam"
 type="tekst"
 tijdelijke aanduiding="Zoeken op artiestnaam ..."
 onChange={(e) => {setSearchKey (e.target.value)}}

 />
Zoeken</button> 
 </div>
 {
 tracks.slice(0, 5).kaart(spoor => (




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


exporterenstandaard Zoeker

Laten we het opsplitsen:

• De component definieert de constante access_token die wordt ingesteld op de eigenschap token die wordt doorgegeven als een prop. Het geeft dit token later in de header van het API-verzoek door aan het zoek-API-eindpunt van Spotify.
• Definieer twee statussen: de zoeksleutel en tracks. De status searchKey bevat de huidige waarde van de zoekinvoer. De trackstatus bevat een reeks van de top 10 tracks voor de artiest die de Spotify-zoekopdracht zal retourneren.
• De searchArtist-functie stuurt een GET-verzoek naar de Spotify API om te zoeken naar artiestengegevens op basis van de searchKey-waarde.
• Vervolgens haalt het de ID van de artiest uit de responsgegevens en doet een ander GET-verzoek om de beste nummers voor die artiest op te halen. Uit de responsgegevens extraheert het de top 10 tracks en stelt de tracks variabel in.
• De component retourneert een invoerveld en een zoekknop. Wanneer een gebruiker op de zoekknop klikt, wordt de functie searchArtist aangeroepen om de beste nummers voor een bepaalde artiest op te halen en weer te geven. Ten slotte gebruikt het de kaartfunctie om de top vijf tracks in de tracksarray als een lijst weer te geven.

Voer uw ontwikkelingsserver uit om de wijzigingen bij te werken en ga vervolgens naar http://localhost: 3000 in uw browser om de resultaten te bekijken.

Pas uw toepassing aan met de functies van Spotify

Deze gids benadrukte de stappen die nodig zijn om verzoeken in te dienen bij de web-API van Spotify om te zoeken naar muziekgegevens van artiesten. U kunt echter meer doen met de functies van Spotify die worden geboden door de SDK's en API's, zoals het integreren van de webafspeelspeler met dezelfde look en feel als op Spotify.

Het voordeel van de SDK's en API's van Spotify is dat ze rijk zijn aan functies en dat je ze eenvoudig kunt integreren in elke web- of mobiele applicatie.