Izveidojiet mūzikas meklēšanas lietojumprogrammu, izmantojot React un Spotify API

Spotify ir pilnībā mainījis veidu, kā mēs straumējam mūziku, izmantojot katalogu, kurā ir miljoniem dziesmu, albumu un atskaņošanas sarakstu.

Izmantojot tā tīmekļa API, jūs varat padarīt savu Spotify pieredzi vēl jautrāku, izveidojot savu React mūzikas meklēšanas lietojumprogrammu. API nodrošina piekļuvi virknei mūzikas datu, ko varat izmantot, lai izveidotu pielāgotu mūzikas lietotni un personalizētu to atbilstoši savai gaumei.

Spotify izstrādātājiem

Spotify piedāvā plašu mūzikas straumēšanas funkciju klāstu, piemēram, meklēšanu, bezsaistes atskaņošanu un personalizētus ieteikumus. Platforma Spotify for Developers nodrošina piekļuvi API un SDK, kas nodrošina šīs funkcijas. Šajā rokasgrāmatā jūs izpētīsit tīmekļa API un uzzināsit, kā to integrēt savā React lietojumprogrammā, lai meklētu dziesmas, kas jums patīk.

Reģistrējieties kontam

Lai sāktu, jums ir nepieciešams Spotify konts. Ja jums tāda vēl nav, apmeklējiet

Reģistrējiet savu pieteikumu

Kad esat pieteicies izstrādātāja konsolē, reģistrējiet savu lietojumprogrammu, lai piekļūtu tīmekļa API. Informācijas paneļa lapā noklikšķiniet uz Izveidojiet lietotni pogu, ievadiet nosaukumu un aprakstu un, visbeidzot, piekrītiet noteikumiem un nosacījumiem, lai izveidotu lietojumprogrammu.

Visbeidzot noklikšķiniet uz Rediģēt iestatījumus pogu, lai pārslēgtos uz novirzīšanas URL iestatījumiem. Tā kā jūsu lietojumprogramma joprojām atrodas izstrādes režīmā, pievienojiet http://localhost: 3000 kā jūsu novirzīšanas URL. Šis ir URL, uz kuru vēlaties novirzīt lietotāju pēc tam, kad viņš ir autentificējies ar Spotify.

Pēc pieteikuma reģistrēšanas Spotify nodrošinās jūsu unikālo klienta ID un klienta noslēpumus, ko varat izmantot, lai:

• Pievienojiet Spotify autentifikācijas plūsmu, lai pieteiktos ar saviem Spotify akreditācijas datiem savā React lietojumprogrammā.
• Iegūstiet savu unikālo piekļuves pilnvaru, lai veiktu pieprasījumus dažādiem tīmekļa API galapunktiem, tostarp meklētu datus, piemēram, ierakstus vai albumus.

Iestatiet React Client

Izveidojiet React lietojumprogrammu un dodieties uz saknes direktoriju un izveidojiet jaunu failu, .env, lai iestatītu dažus vides mainīgos. Sava klienta ID varat iegūt no Spotify izstrādātāju informācijas paneļa.

REACT_APP_SPOTIFY_CLIENT_ID = "jūsu klienta ID"
REACT_APP_SPOTIFY_REDIRECT_URI = " http://localhost: 3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = " https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "žetons"

Instalējiet nepieciešamās pakotnes

Instalējiet Axios. Jūs izmantosit tās metodes, lai veiktu HTTP pieprasījumus Spotify tīmekļa API.

npm instalēt axios

Pievienojiet Spotify autentifikācijas darbplūsmu

Spotify norāda, ka visiem pieprasījumiem jebkuram Web API galapunktam pieprasījuma galvenē ir derīga piekļuves pilnvara. Lai iegūtu piekļuves pilnvaru, jūsu lietojumprogrammai vispirms ir jāveic autentifikācija ar Spotify.

Spotify atbalsta vairākus autentifikācija un autorizācijametodes, piemēram, autorizācijas kods, klienta akreditācijas dati vai netiešās piešķiršanas metodes.

Visvienkāršākā ieviešana ir netiešā piešķiršanas metode, kas prasa, lai lietojumprogramma veiktu pieprasījumus autentifikācijas galapunktam (jūs to pievienojāt ENV failā), nododot jūsu klienta ID. Pēc veiksmīgas autentifikācijas Spotify atbildēs, nodrošinot piekļuves pilnvaru, kuras derīguma termiņš beidzas noteiktā laika posmā.

Atveriet failu src/App.js, izdzēsiet React kodu un pievienojiet tālāk norādīto kodu:

imports Reaģēt, { useState, useEffect } no'reaģēt';
imports Meklētājs no'./components/Searcher';
funkcijuApp() {
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 = logs.location.hash;
ļaut marķieris = logs.localStorage.getItem("žetons");

ja (jaukt && jaukt) {
 marķieris = hash.substring(1.split("&").Atrast(elem => elem.startsWith("pieejas atslēga")).split("=")[1];
logs.location.hash = "";
logs.localStorage.setItem("žetons", marķieris);
 }
 setToken (token)
 }, [])
konst atteikšanās = () => {
 setToken("");
logs.localStorage.removeItem("žetons");
 }
atgriezties (

"Lietotne">
"Lietotnes galvene">
"SearchContainer">
Meklējot</h2>
 {!token? 


`${AUTH_ENDPOINT}?klienta_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`}>
 Piesakieties Spotify
 </a>
 </div> 
 :



"izlogoties"onClick={logout}>Atteikties</button> 
 </div 
 }
 </div>
 </header>
 </div>
 );
}




eksportētnoklusējuma Lietotne;

Sadalīsim to:

• Šis komponents nosacīti atveido meklēšanas komponentu un atteikšanās pogu, ja piekļuves pilnvara pretējā gadījumā tiek parādīts div ar saiti, kas novirza lietotāju uz Spotify autorizāciju lappuse. Saite satur vaicājuma parametrus, kas norāda vērtības CLIENT_ID, REDIRECT_URI un RESPONSE_TYPE.
• Kad esat autentificējis lietotāju, izsauciet useEffect āķi, lai palaistu koda bloku, kad komponents tiek piestiprināts. Šis koda bloks izgūst piekļuves pilnvaru no URL jaucējkoda un iestata to kā marķiera stāvokļa mainīgā jauno vērtību. Tas arī saglabā marķieri vietējā krātuvē, lai saglabātu autentifikācijas stāvokli.
• Ja piekļuves pilnvara ir saglabāta stāvoklī, tā tiek nodota kā palīglīdzeklis komponentam Searcher, lai veiktu pieprasījumus Spotify tīmekļa API.
• Lai atteiktos, kods vienkārši noņem piekļuves pilnvaru no vietējās krātuves un iestata marķiera stāvokli uz tukšu virkni.

Ieviesiet meklēšanas funkcionalitāti un renderējiet rezultātus

Direktorijā /src izveidojiet jaunu mapi un nosauciet to par komponentiem. Šajā mapē izveidojiet jaunu failu: Searcher.js un pievienojiet tālāk norādīto kodu.

imports Reaģēt, {useState, useEffect} no'reaģēt'
imports axios no"aksios";
funkcijuMeklētājs(rekvizīti) {
konst [searchKey, setSearchKey] = useState("")
konst [tracks, setTracks] = useState([])

konst piekļuves_token = props.token

konst meklēt Mākslinieks = asinhrons () => {
konst {dati} = gaidīt axios.get(" https://api.spotify.com/v1/search", {
 galvenes: {
"Satura veids": "aplikācija/json",
"Autorizācija": `Nesējs ${access_token}`
 },
 parametri: {
 q: SearchKey,
 veids: "mākslinieks"
 }
 })

var artistID = data.artists.items[0].id
var artistTracks = gaidīt axios.get(` https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
 galvenes: {
 Autorizācija: `Nesējs ${access_token}`
 },
 parametri: {
 ierobežojums: 10,
 tirgus: "ASV"
 }
 })
 setTracks (artistTracks.data.tracks);
 }
atgriezties (
 <>

"Meklēšanas forma">
 klases nosaukums ="Vārds"
 tips="teksts"
 vietturis="Meklēt pēc izpildītāja vārda..."
 onChange={(e) => {setSearchKey (e.target.value)}}

 />
Meklēt</button> 
 </div>
 {
 tracks.slice(0, 5).map(trase => (




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


eksportētnoklusējuma Meklētājs

Sadalīsim to:

• Komponents definē access_token konstanti, ko tas iestata marķiera rekvizītam, kas nodots kā atbalsts. Vēlāk tas nodod šo marķieri API pieprasījuma galvenē Spotify meklēšanas API galapunktam.
• Definējiet divus stāvokļus: meklēšanas taustiņu un ierakstus. SearchKey stāvoklī ir pašreizējā meklēšanas ievades vērtība. Ierakstu statuss satur 10 populārāko izpildītāja ierakstu masīvu, ko atgriezīs Spotify meklēšana.
• Funkcija searchArtist veic GET pieprasījumu Spotify API, lai meklētu izpildītāju datus, pamatojoties uz searchKey vērtību.
• Pēc tam tas izņem izpildītāja ID no atbildes datiem un veic vēl vienu GET pieprasījumu, lai izgūtu šī izpildītāja populārākos ierakstus. No atbildes datiem tas iegūst 10 populārākos ierakstus un iestata ierakstu mainīgo.
• Komponents atgriež ievades lauku un meklēšanas pogu. Kad lietotājs noklikšķina uz meklēšanas pogas, tas izsauc SearchArtist funkciju, lai iegūtu un parādītu konkrēta izpildītāja populārākos ierakstus. Visbeidzot, tas izmanto kartes funkciju, lai kā sarakstu atveidotu piecus populārākos celiņus sliežu masīvā.

Palaidiet izstrādes serveri, lai atjauninātu izmaiņas, un pēc tam dodieties uz http://localhost: 3000 savā pārlūkprogrammā, lai skatītu rezultātus.

Pielāgojiet savu lietojumprogrammu, izmantojot Spotify funkcijas

Šajā rokasgrāmatā ir uzsvērtas darbības, kas jāveic, lai veiktu pieprasījumus Spotify tīmekļa API, lai meklētu izpildītāju mūzikas datus. Tomēr varat paveikt vairāk, izmantojot Spotify funkcijas, ko nodrošina tā SDK un API, piemēram, integrēt tā tīmekļa atskaņošanas atskaņotāju ar tādu pašu izskatu un darbību kā Spotify.

Spotify SDK un API priekšrocība ir tā, ka tie ir bagāti ar funkcijām un tos var viegli integrēt jebkurā tīmekļa vai mobilajā lietojumprogrammā.