Vytvorte si aplikáciu na vyhľadávanie hudby pomocou rozhrania React a Spotify API

Spotify úplne zmenilo spôsob, akým streamujeme hudbu s katalógom obsahujúcim milióny skladieb, albumov a zoznamov skladieb.

Pomocou jeho webového rozhrania API môžete svoje zážitky zo Spotify urobiť ešte zábavnejšími vytvorením vlastnej aplikácie na vyhľadávanie hudby React. Rozhranie API poskytuje prístup k množstvu hudobných údajov, ktoré môžete použiť na zostavenie vlastnej hudobnej aplikácie a jej prispôsobenie podľa vášho vkusu.

Spotify pre vývojárov

Spotify ponúka širokú škálu funkcií streamovania hudby, ako je vyhľadávanie, prehrávanie offline a prispôsobené odporúčania. Platforma Spotify for Developers poskytuje prístup k rozhraniam API a súpravám SDK, ktoré podporujú tieto funkcie. V tejto príručke preskúmate webové rozhranie API a naučíte sa, ako ho integrovať do aplikácie React, aby ste mohli vyhľadávať skladby, ktoré sa vám páčia.

Zaregistrujte sa a vytvorte si účet

Ak chcete začať, musíte mať účet Spotify. Ak ho ešte nemáte, navštívte na prihlasovacej stránke Spotify. Ak ho však už máte, prihláste sa do Spotify pre vývojárov konzoly.

Zaregistrujte svoju aplikáciu

Po prihlásení do konzoly pre vývojárov zaregistrujte svoju aplikáciu, aby ste získali prístup k webovému rozhraniu API. Na stránke hlavného panela kliknite na Vytvorte aplikáciu tlačidlo, vyplňte názov a popis a nakoniec prijmite zmluvné podmienky na vytvorenie aplikácie.

Nakoniec kliknite na Upraviť nastavenia tlačidlo pre zmenu na nastavenia adresy URL presmerovania. Keďže vaša aplikácia je stále v režime vývoja, pridajte http://localhost: 3000 ako adresu URL presmerovania. Toto je adresa URL, na ktorú chcete presmerovať používateľa po overení pomocou služby Spotify.

Po registrácii vašej aplikácie vám Spotify poskytne vaše jedinečné ID klienta a tajomstvá klienta, ktoré môžete použiť na:

• Pridajte overovací postup Spotify, aby ste sa mohli prihlásiť pomocou svojich poverení Spotify vo svojej aplikácii React.
• Získajte svoj jedinečný prístupový token, aby ste mohli odosielať požiadavky na rôzne koncové body webového rozhrania API, vrátane vyhľadávania údajov, ako sú skladby alebo albumy.

Nastavte klienta React

Vytvorte aplikáciu React a prejdite do koreňového adresára a vytvorte nový súbor, .env, na nastavenie niektorých premenných prostredia. Svoje ID klienta môžete získať z ovládacieho panela pre vývojárov Spotify.

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

Nainštalujte požadované balíky

Nainštalujte Axios. Jeho metódy budete používať na vytváranie požiadaviek HTTP na webové rozhranie API Spotify.

npm nainštalujte axios

Pridajte pracovný postup overovania Spotify

Spotify určuje, že všetky požiadavky na ľubovoľný koncový bod webového rozhrania API majú v hlavičke požiadavky platný prístupový token. Ak chcete získať prístupový token, vaša aplikácia sa musí najprv overiť pomocou Spotify.

Spotify podporuje niekoľko autentifikáciu a autorizáciumetódy, ako je autorizačný kód, poverenia klienta alebo metódy implicitného udeľovania.

Najjednoduchšie implementovateľná je metóda implicitného udeľovania, ktorá vyžaduje, aby aplikácia robila požiadavky na autentizačný koncový bod (pridali ste to do súboru ENV), pričom odovzdáva vaše ID klienta. Po úspešnej autentifikácii odpovie Spotify poskytnutím prístupového tokenu, ktorého platnosť vyprší počas určeného obdobia.

Otvorte svoj súbor src/App.js, odstráňte štandardný kód React a pridajte kód nižšie:

importovať Reaguj, { useState, useEffect } od'reagovať';
importovať Vyhľadávač od'./components/Searcher';
funkciuApp() {
konšt CLIENT_ID=process.env. REACT_APP_SPOTIFY_CLIENT_ID
konšt REDIRECT_URI =process.env. REACT_APP_SPOTIFY_REDIRECT_URI 
konšt AUTH_ENDPOINT =process.env. REACT_APP_SPOTIFY_AUTH_ENDPOINT 
konšt RESPONSE_TYPE = process.env. REACT_APP_SPOTIFY_RESPONSE_TYPE
konšt [token, setToken] = useState("");
 useEffect(() => { 
konšt hash = okno.umiestnenie.hash;
nech token = okno.localStorage.getItem("token");

ak (hash && hash) {
 token = hash.substring(1).rozdeliť("&").Nájsť(prvok => elem.startsWith("prístupový token")).rozdeliť("=")[1];
okno.umiestnenie.hash = "";
okno.localStorage.setItem("token", token);
 }
 setToken (token)
 }, [])
konšt odhlásiť sa = () => {
 setToken("");
okno.localStorage.removeItem("token");
 }
vrátiť (

"aplikácia">
"Hlavička aplikácie">
"SearchContainer">
Vyhľadávaný</h2>
 {!token? 


`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`}>
 Prihláste sa do Spotify
 </a>
 </div> 
 :



"odhlásiť sa"onClick={logout}>Odhlásiť sa</button> 
 </div 
 }
 </div>
 </header>
 </div>
 );
}




exportpredvolená App;

Poďme si to rozobrať:

• Tento komponent podmienečne vykreslí komponent vyhľadávania a tlačidlo odhlásenia, ak ide o prístupový token je prítomný inak, vykreslí div s odkazom, ktorý používateľa nasmeruje na autorizáciu Spotify stránku. Odkaz obsahuje parametre dopytu, ktoré určujú hodnoty CLIENT_ID, REDIRECT_URI a RESPONSE_TYPE.
• Po overení používateľa zavolajte háčik useEffect na spustenie bloku kódu, keď sa komponent pripojí. Tento blok kódu načíta prístupový token z hash adresy URL a nastaví ho ako novú hodnotu premennej stavu tokenu. Token tiež uloží do lokálneho úložiska, aby zachoval stav autentifikácie.
• Keď je prístupový token uložený v stave, odovzdá sa ako podpera komponentu Searcher, aby mohol odosielať požiadavky na webové rozhranie API Spotify.
• Ak sa chcete odhlásiť, kód jednoducho odstráni prístupový token z lokálneho úložiska a nastaví stav tokenu na prázdny reťazec.

Implementujte funkciu vyhľadávania a vykresľujte výsledky

V adresári /src vytvorte nový priečinok a pomenujte ho, komponenty. V tomto priečinku vytvorte nový súbor: Searcher.js a pridajte kód uvedený nižšie.

importovať Reaguj, {useState, useEffect} od'reagovať'
importovať axios od"axios";
funkciuVyhľadávač(rekvizity) {
konšt [searchKey, setSearchKey] = useState("")
konšt [tracks, setTracks] = useState([])

konšt access_token = props.token

konšt searchArtist = async () => {
konšt {údaje} = čakať axios.get(" https://api.spotify.com/v1/search", {
 hlavičky: {
'Druh obsahu': "application/json",
'autorizácia': „Nosič ${access_token}`
 },
 parametre: {
 q: searchKey,
 typ: "umelec"
 }
 })

var artistID = data.artists.items[0].id
var artistTracks = čakať axios.get(` https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
 hlavičky: {
 Autorizácia: „Nosič ${access_token}`
 },
 parametre: {
 limit: 10,
 trh: „USA“
 }
 })
 setTracks (artistTracks.data.tracks);
 }
vrátiť (
 <>

"Vyhľadávací formulár">
 className ="Názov"
 typ="text"
 zástupný symbol ="Hľadať podľa mena interpreta ..."
 onChange={(e) => {setSearchKey (e.target.value)}}

 />
Hľadať</button> 
 </div>
 {
 tracks.slice(0, 5).mapa(trať => (




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


exportpredvolená Vyhľadávač

Poďme si to rozobrať:

• Komponent definuje konštantu access_token, ktorú nastaví na vlastnosť token odovzdanú ako podperu. Neskôr odovzdá tento token v hlavičke požiadavky API koncovému bodu API vyhľadávania Spotify.
• Definujte dva stavy: kľúč vyhľadávania a stopy. Stav searchKey obsahuje aktuálnu hodnotu vstupu vyhľadávania. Stav skladieb obsahuje pole 10 najlepších skladieb pre interpreta, ktoré vyhľadávanie Spotify vráti.
• Funkcia searchArtist odošle do API Spotify požiadavku GET na vyhľadanie údajov interpretov na základe hodnoty searchKey.
• Potom extrahuje ID interpreta z údajov odpovede a odošle ďalšiu požiadavku GET na získanie najlepších skladieb pre tohto interpreta. Z údajov odozvy extrahuje 10 najlepších skladieb a nastaví premenné skladieb.
• Komponent vráti vstupné pole a tlačidlo vyhľadávania. Keď používateľ klikne na tlačidlo vyhľadávania, zavolá funkciu searchArtist na načítanie a zobrazenie najlepších skladieb konkrétneho interpreta. Nakoniec pomocou funkcie mapy vykreslí prvých päť stôp v poli stôp ako zoznam.

Spustite vývojový server, aby ste aktualizovali zmeny, a potom prejdite na http://localhost: 3000 vo vašom prehliadači, aby ste videli výsledky.

Prispôsobte si svoju aplikáciu pomocou funkcií Spotify

Táto príručka zdôraznila kroky potrebné na zadanie požiadaviek na webové rozhranie API Spotify na vyhľadávanie hudobných údajov interpretov. S funkciami Spotify, ktoré poskytujú súpravy SDK a rozhrania API, však môžete urobiť viac, ako napríklad integrácia prehrávača prehrávania na webe s rovnakým vzhľadom a dojmom ako na Spotify.

Výhodou SDK a API Spotify je, že sú bohaté na funkcie a môžete ich jednoducho integrovať do akejkoľvek webovej alebo mobilnej aplikácie.