Ustvarite aplikacijo za iskanje glasbe z React in Spotify API

Spotify je popolnoma spremenil način pretakanja glasbe s katalogom, ki vsebuje milijone pesmi, albumov in seznamov predvajanja.

Z uporabo njegovega spletnega API-ja lahko svoje izkušnje s Spotify naredite še bolj zabavne, tako da zgradite lastno aplikacijo za iskanje glasbe React. API omogoča dostop do vrste glasbenih podatkov, ki jih lahko uporabite za izdelavo glasbene aplikacije po meri in jo prilagodite svojemu okusu.

Spotify za razvijalce

Spotify ponuja široko paleto funkcij pretakanja glasbe, kot so iskanje, predvajanje brez povezave in prilagojena priporočila. Platforma Spotify for Developers omogoča dostop do API-jev in SDK-jev, ki poganjajo te funkcije. V tem priročniku boste raziskali spletni API in se naučili, kako ga integrirati v svojo aplikacijo React za iskanje pesmi, ki so vam všeč.

Prijavite se za račun

Če želite začeti, morate imeti račun Spotify. Če ga še nimate, obiščite

Registrirajte svojo prijavo

Ko se prijavite v konzolo za razvijalce, registrirajte svojo aplikacijo, da dobite dostop do spletnega API-ja. Na strani nadzorne plošče kliknite Ustvarite aplikacijo gumb, vnesite ime in opis ter na koncu sprejmite določila in pogoje za ustvarjanje aplikacije.

Nazadnje kliknite na Uredi nastavitve gumb, da spremenite nastavitve URL-ja za preusmeritev. Ker je vaša aplikacija še v razvojnem načinu, dodajte http://localhost: 3000 kot URL preusmeritve. To je URL, na katerega želite preusmeriti uporabnika, ko se overi s Spotifyjem.

Po registraciji vaše aplikacije bo Spotify zagotovil vaš edinstven ID odjemalca in skrivnosti odjemalca, ki jih lahko uporabite za:

• Dodajte tok preverjanja pristnosti Spotify, da se prijavite s svojimi poverilnicami Spotify v svoji aplikaciji React.
• Pridobite svoj edinstven dostopni žeton za pošiljanje zahtev do različnih končnih točk spletnega API-ja, vključno z iskanjem podatkov, kot so skladbe ali albumi.

Nastavite odjemalca React

Ustvarite aplikacijo React in se pomaknite do korenskega imenika ter ustvarite novo datoteko, .env, da nastavite nekatere spremenljivke okolja. ID stranke lahko dobite na nadzorni plošči za razvijalce Spotify.

REACT_APP_SPOTIFY_CLIENT_ID = "ID vaše stranke"
REACT_APP_SPOTIFY_REDIRECT_URI = " http://localhost: 3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = " https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "žeton"

Namestite zahtevane pakete

Namestite Axios. Njegove metode boste uporabili za pošiljanje zahtev HTTP spletnemu API-ju Spotify.

npm namestite axios

Dodajte Spotifyjev potek dela za preverjanje pristnosti

Spotify določa, da imajo vse zahteve do katere koli končne točke spletnega API-ja veljaven žeton za dostop v glavi zahteve. Če želite pridobiti žeton za dostop, mora vaša aplikacija najprej preveriti pristnost s Spotify.

Spotify podpira več avtentikacijo in avtorizacijometode, kot so avtorizacijska koda, poverilnice odjemalca ali implicitne metode dodelitve.

Najenostavnejša za implementacijo je metoda implicitne dodelitve, ki zahteva, da aplikacija pošlje zahteve končni točki avth (to ste dodali v datoteko ENV) in posreduje vaš ID odjemalca. Po uspešnem preverjanju pristnosti se bo Spotify odzval z zagotavljanjem žetona za dostop, ki poteče v določenem obdobju.

Odprite datoteko src/App.js, izbrišite kodo Boilerplate React in dodajte spodnjo kodo:

uvoz Odziv, {useState, useEffect} od'reagirati';
uvoz Iskalec od'./components/Searcher';
funkcijoaplikacija() {
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 [žeton, setToken] = useState("");
 useEffect(() => { 
konst hash = okno.location.hash;
pustiti žeton = okno.localStorage.getItem("žeton");

če (hash && hash) {
 žeton = hash.substring(1).split("&").najti(elem => elem.startsWith("dostopni žeton")).split("=")[1];
okno.location.hash = "";
okno.localStorage.setItem("žeton", žeton);
 }
 setToken (žeton)
 }, [])
konst odjava = () => {
 setToken("");
okno.localStorage.removeItem("žeton");
 }
vrnitev (

"Aplikacija">
"Glava aplikacije">
"SearchContainer">
Iskalno</h2>
 {!žeton? 


`${AUTH_ENDPOINT}?id_odjemalca=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`}>
 Prijavite se v Spotify
 </a>
 </div> 
 :



"Odjava"onClick={odjava}>Odjava</button> 
 </div 
 }
 </div>
 </header>
 </div>
 );
}




izvozprivzeto aplikacija;

Razčlenimo:

• Ta komponenta pogojno upodobi iskalno komponento in gumb za odjavo, če je žeton za dostop je sicer prisoten, upodobi div s povezavo, ki uporabnika usmeri na avtorizacijo Spotify strani. Povezava vsebuje parametre poizvedbe, ki določajo vrednosti CLIENT_ID, REDIRECT_URI in RESPONSE_TYPE.
• Ko overite uporabnika, pokličite kljuko useEffect, da zaženete kodni blok, ko se komponenta namesti. Ta blok kode pridobi žeton za dostop iz zgoščene vrednosti URL-ja in ga nastavi kot novo vrednost spremenljivke stanja žetona. Prav tako shrani žeton v lokalno shrambo, da ohrani stanje avtentikacije.
• Z žetonom dostopa, shranjenim v stanju, se posreduje kot podpora komponenti Searcher za pošiljanje zahtev spletnemu API-ju Spotify.
• Za odjavo koda preprosto odstrani dostopni žeton iz lokalnega pomnilnika in nastavi stanje žetona na prazen niz.

Implementirajte funkcijo iskanja in upodabljajte rezultate

V imeniku /src ustvarite novo mapo in jo poimenujte komponente. Znotraj te mape ustvarite novo datoteko: Searcher.js in dodajte spodnjo kodo.

uvoz Reagiraj, {useState, useEffect} od'reagirati'
uvoz axios od'axios';
funkcijoIskalec(rekviziti) {
konst [searchKey, setSearchKey] = useState("")
konst [sledi, setTracks] = useState([])

konst access_token = props.token

konst searchArtist = asinh () => {
konst {podatki} = čakati axios.get(" https://api.spotify.com/v1/search", {
 glave: {
'Content-Type': "aplikacija/json",
"Avtorizacija": `Nosilec ${access_token}`
 },
 parametri: {
 q: searchKey,
 vrsta: "umetnik"
 }
 })

var artistID = data.artists.items[0].id
var artistTracks = čakati axios.get(` https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
 glave: {
 Pooblastilo: `Nosilec ${access_token}`
 },
 parametri: {
 omejitev: 10,
 trg: 'US'
 }
 })
 setTracks (artistTracks.data.tracks);
 }
vrnitev (
 <>

"Iskalni obrazec">
 ime razreda ="Ime"
 vrsta="besedilo"
 placeholder="Iskanje po imenu izvajalca ..."
 onChange={(e) => {setSearchKey (e.target.value)}}

 />
Iskanje</button> 
 </div>
 {
 tracks.slice(0, 5).zemljevid(skladba => (




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


izvozprivzeto Iskalec

Razčlenimo:

• Komponenta definira konstanto access_token, ki jo nastavi na lastnost žetona, posredovano kot prop. Pozneje posreduje ta žeton v glavi zahteve API končni točki Spotifyjevega iskalnega API-ja.
• Definirajte dve stanji: searchKey in tracks. Stanje searchKey vsebuje trenutno vrednost iskalnega vnosa. Stanje skladb vsebuje niz 10 najboljših skladb za izvajalca, ki jih bo vrnilo iskanje Spotify.
• Funkcija searchArtist pošlje zahtevo GET API-ju Spotify za iskanje podatkov o izvajalcih na podlagi vrednosti searchKey.
• Nato iz podatkov o odzivu izvleče ID izvajalca in naredi še eno zahtevo GET za pridobitev najboljših skladb tega izvajalca. Iz podatkov odziva izlušči 10 najboljših skladb in nastavi spremenljivko skladb.
• Komponenta vrne vnosno polje in gumb za iskanje. Ko uporabnik klikne gumb za iskanje, pokliče funkcijo searchArtist, da pridobi in prikaže najboljše skladbe za določenega izvajalca. Na koncu uporabi funkcijo zemljevida, da upodablja prvih pet skladb v nizu skladb kot seznam.

Zaženite razvojni strežnik, da posodobite spremembe, nato pa pojdite na http://localhost: 3000 v brskalniku za ogled rezultatov.

Prilagodite svojo aplikacijo s funkcijami Spotify

V tem priročniku so bili poudarjeni koraki, potrebni za pošiljanje zahtev spletnemu API-ju Spotify za iskanje glasbenih podatkov izvajalcev. Vendar pa lahko naredite več s funkcijami Spotifyja, ki jih zagotavljajo njegovi SDK-ji in API-ji, kot je integracija njegovega spletnega predvajalnika predvajanja z enakim videzom in občutkom kot na Spotifyju.

Prednost Spotifyjevih SDK-jev in API-jev je, da so bogati s funkcijami in jih lahko enostavno integrirate v katero koli spletno ali mobilno aplikacijo.