Sukurkite muzikos paieškos programą naudodami „React“ ir „Spotify“ API

„Spotify“ visiškai pakeitė muzikos transliavimo būdą su katalogu, kuriame yra milijonai dainų, albumų ir grojaraščių.

Naudodamiesi žiniatinklio API, galite padaryti savo „Spotify“ patirtį dar smagiau, sukurdami savo „React“ muzikos paieškos programą. API suteikia prieigą prie įvairių muzikos duomenų, kuriuos galite naudoti kurdami pasirinktinę muzikos programą ir pritaikydami ją pagal savo skonį.

„Spotify“ kūrėjams

„Spotify“ siūlo daugybę muzikos srautinio perdavimo funkcijų, tokių kaip paieška, atkūrimas neprisijungus ir suasmenintos rekomendacijos. „Spotify for Developers“ platforma suteikia prieigą prie API ir SDK, kurie teikia šias funkcijas. Šiame vadove išnagrinėsite žiniatinklio API ir sužinosite, kaip integruoti ją į „React“ programą, kad galėtumėte ieškoti jums patinkančių dainų.

Prisiregistruokite gauti paskyrą

Norėdami pradėti, turite turėti „Spotify“ paskyrą. Jei dar neturite, apsilankykite

Užregistruokite savo paraišką

Prisijungę prie kūrėjo pulto užregistruokite programą, kad gautumėte prieigą prie žiniatinklio API. Informacijos suvestinės puslapyje spustelėkite Sukurkite programą mygtuką, įveskite pavadinimą ir aprašymą ir galiausiai sutikite su taisyklėmis ir sąlygomis, kad sukurtumėte programą.

Galiausiai spustelėkite Redaguoti nustatymus mygtuką, kad pakeistumėte peradresavimo URL nustatymus. Kadangi jūsų programa vis dar yra kūrimo režimu, pridėkite http://localhost: 3000 kaip jūsų peradresavimo URL. Tai URL, į kurį norite nukreipti vartotoją po to, kai jis autentifikuojamas naudojant „Spotify“.

Užregistravus paraišką, „Spotify“ pateiks jūsų unikalų kliento ID ir kliento paslaptis, kurias galėsite naudoti norėdami:

• Pridėkite „Spotify“ autentifikavimo srautą, kad prisijungtumėte naudodami „Spotify“ kredencialus „React“ programoje.
• Gaukite unikalų prieigos raktą, kad pateiktumėte užklausas skirtingiems žiniatinklio API galutiniams taškams, įskaitant duomenų, pvz., takelių ar albumų, paiešką.

Nustatykite „React Client“.

Sukurkite programą „React“. ir eikite į šakninį katalogą ir sukurkite naują failą, .env, norėdami nustatyti kai kuriuos aplinkos kintamuosius. Savo kliento ID galite gauti iš „Spotify“ kūrėjų prietaisų skydelio.

REACT_APP_SPOTIFY_CLIENT_ID = „jūsų kliento ID“
REACT_APP_SPOTIFY_REDIRECT_URI = " http://localhost: 3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = " https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "žetonas"

Įdiekite reikiamus paketus

Įdiekite „Axios“. Naudosite jo metodus HTTP užklausoms pateikti „Spotify“ žiniatinklio API.

npm įdiegti axios

Pridėkite „Spotify“ autentifikavimo darbo eigą

„Spotify“ nurodo, kad visos užklausos į bet kurį žiniatinklio API galutinį tašką turi galiojantį prieigos raktą užklausos antraštėje. Norint gauti prieigos raktą, jūsų programa pirmiausia turi būti autentifikuota naudojant „Spotify“.

„Spotify“ palaiko keletą autentifikavimas ir autorizacijametodai, tokie kaip autorizacijos kodas, kliento kredencialai arba numanomi suteikimo metodai.

Paprasčiausias įdiegti yra numanomas suteikimo metodas, kuris reikalauja, kad programa pateiktų užklausas autentifikavimo galutiniam taškui (jūs tai įtraukėte į ENV failą), perduodami jūsų kliento ID. Sėkmingai patvirtinus, „Spotify“ atsakys pateikdama prieigos prieigos raktą, kurio galiojimas baigiasi per nurodytą laikotarpį.

Atidarykite failą src/App.js, ištrinkite pagrindinį „React“ kodą ir pridėkite kodą toliau:

importuoti Reaguoti, { useState, useEffect } iš'reaguoti';
importuoti Ieškovė iš„./components/Searcher“;
funkcijaProgramėlė() {
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 maiša = langas.location.hash;
leisti žetonas = langas.localStorage.getItem("žetonas");

jeigu (maiša ir maiša) {
 token = hash.substring(1.split("&").rasti(elem => elem.startsWith("prieigos raktas")).skilti("=")[1];
langas.location.hash = "";
langas.localStorage.setItem("žetonas", žetonas);
 }
 setToken (žetonas)
 }, [])
konst atsijungti = () => {
 setToken("");
langas.localStorage.removeItem("žetonas");
 }
grąžinti (

"Programėlė">
"Programos antraštė">
„SearchContainer“>
Ieškodamas </h2>
 {!žetonas? 


`${AUTH_ENDPOINT}?kliento_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`}>
 Prisijunkite prie „Spotify“.
 </a>
 </div> 
 :



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




eksportuotinumatytas Programėlė;

Išskaidykime:

• Šis komponentas sąlyginai pateikia paieškos komponentą ir atsijungimo mygtuką, jei prieigos raktas yra kitu atveju, jis pateikia div su nuoroda, nukreipiančia vartotoją į „Spotify“ įgaliojimą puslapį. Nuorodoje yra užklausos parametrai, nurodantys CLIENT_ID, REDIRECT_URI ir RESPONSE_TYPE reikšmes.
• Kai autentifikuosite vartotoją, iškvieskite „useEffect Hook“, kad paleistumėte kodo bloką, kai komponentas bus prijungtas. Šis kodo blokas nuskaito prieigos prieigos raktą iš URL maišos ir nustato jį kaip naują prieigos rakto būsenos kintamojo reikšmę. Jis taip pat saugo prieigos raktą vietinėje saugykloje, kad išlaikytų autentifikavimo būseną.
• Kai prieigos prieigos raktas saugomas būsenoje, jis perduodamas kaip rekvizitas komponentui „Searcher“, kad būtų galima pateikti užklausas „Spotify“ žiniatinklio API.
• Norėdami atsijungti, kodas tiesiog pašalina prieigos raktą iš vietinės saugyklos ir nustato prieigos rakto būseną į tuščią eilutę.

Įdiekite paieškos funkciją ir atvaizduokite rezultatus

Kataloge /src sukurkite naują aplanką ir pavadinkite jį komponentais. Šiame aplanke sukurkite naują failą: Searcher.js ir toliau pridėkite kodą.

importuoti Reaguoti, {useState, useEffect} iš'reaguoti'
importuoti aksios iš"aksios";
funkcijaIeškovė(rekvizitai) {
konst [searchKey, setSearchKey] = useState("")
konst [tracks, setTracks] = useState([])

konst prieigos_token = rekvizitai.token

konst SearchArtist = async () => {
konst {duomenys} = laukti axios.get(" https://api.spotify.com/v1/search", {
 antraštės: {
'Turinio tipas': "application/json",
„Įgaliojimas“: `Nešėjas ${access_token}`
 },
 parametrai: {
 q: paieškos raktas,
 tipas: "menininkas"
 }
 })

var artistID = data.artists.items[0].id
var artistTracks = laukti axios.get(` https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
 antraštės: {
 Autorizacija: `Nešėjas ${access_token}`
 },
 parametrai: {
 riba: 10,
 turgus: "JAV"
 }
 })
 setTracks (artistTracks.data.tracks);
 }
grąžinti (
 <>

"Paieškos forma">
 klasės pavadinimas ="Vardas"
 tipas ="tekstas"
 vietos rezervuaras=„Ieškoti pagal atlikėjo vardą...“
 onChange={(e) => {setSearchKey (e.target.value)}}

 />
Ieškoti</button> 
 </div>
 {
 tracks.slice(0, 5.map(takelį => (




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


eksportuotinumatytas Ieškovė

Išskaidykime:

• Komponentas apibrėžia prieigos_token konstantą, kurią jis nustato prieigos rakto ypatybei, perduotai kaip rekvizitas. Vėliau jis perduoda šį prieigos raktą API užklausos antraštėje į „Spotify“ paieškos API galutinį tašką.
• Apibrėžkite dvi būsenas: paieškos klavišą ir takelius. SearchKey būsena turi dabartinę paieškos įvesties reikšmę. Takelių būsenoje yra 10 populiariausių atlikėjo takelių, kuriuos pateiks „Spotify“ paieška.
• Funkcija searchArtist pateikia GET užklausą Spotify API, kad būtų ieškoma atlikėjų duomenų pagal paieškos rakto reikšmę.
• Tada ji ištraukia atlikėjo ID iš atsakymo duomenų ir pateikia dar vieną GET užklausą, kad gautų geriausius to atlikėjo takelius. Iš atsakymo duomenų jis išskiria 10 populiariausių takelių ir nustato takelių kintamąjį.
• Komponentas grąžina įvesties lauką ir paieškos mygtuką. Kai vartotojas spustelėja paieškos mygtuką, jis iškviečia funkciją searchArtist, kad gautų ir parodytų populiariausius konkretaus atlikėjo takelius. Galiausiai, jis naudoja žemėlapio funkciją, kad pateiktų penkis populiariausius takelius takelių masyve kaip sąrašą.

Paleiskite kūrimo serverį, kad atnaujintumėte pakeitimus, tada eikite į http://localhost: 3000 naršyklėje, kad pamatytumėte rezultatus.

Tinkinkite programą naudodami „Spotify“ funkcijas

Šiame vadove paryškinti veiksmai, kurių reikia norint pateikti užklausas „Spotify“ žiniatinklio API, kad būtų galima ieškoti atlikėjų muzikos duomenų. Tačiau galite nuveikti daugiau su „Spotify“ funkcijomis, kurias teikia jos SDK ir API, pvz., integruoti žiniatinklio atkūrimo grotuvą, atrodantį taip pat, kaip ir „Spotify“.

„Spotify“ SDK ir API pranašumas yra tas, kad juose yra daug funkcijų ir galite lengvai integruoti juos į bet kurią žiniatinklio ar mobiliąją programą.