Sestavte aplikaci pro vyhledávání hudby pomocí rozhraní React a Spotify API

Spotify zcela změnilo způsob, jakým streamujeme hudbu s katalogem obsahujícím miliony skladeb, alb a seznamů skladeb.

Pomocí webového rozhraní API můžete své zážitky ze Spotify učinit ještě zábavnějšími vytvořením vlastní aplikace pro vyhledávání hudby React. Rozhraní API poskytuje přístup k řadě hudebních dat, která můžete použít k vytvoření vlastní hudební aplikace a přizpůsobit ji svému vkusu.

Spotify pro vývojáře

Spotify nabízí širokou škálu funkcí pro streamování hudby, jako je vyhledávání, přehrávání offline a přizpůsobená doporučení. Platforma Spotify for Developers poskytuje přístup k rozhraním API a sadám SDK, které tyto funkce podporují. V této příručce prozkoumáte webové rozhraní API a naučíte se, jak jej integrovat do vaší aplikace React, abyste mohli hledat skladby, které se vám líbí.

Zaregistrujte si účet

Chcete-li začít, musíte mít účet Spotify. Pokud jej ještě nemáte, navštivte

Zaregistrujte svou aplikaci

Jakmile se přihlásíte do vývojářské konzole, zaregistrujte svou aplikaci, abyste získali přístup k webovému rozhraní API. Na stránce řídicího panelu klikněte na Vytvořte aplikaci tlačítko, vyplňte název a popis a nakonec přijměte podmínky pro vytvoření aplikace.

Nakonec klikněte na Upravit nastavení tlačítko pro změnu nastavení adresy URL přesměrování. Protože je vaše aplikace stále ve vývojovém režimu, přidejte http://localhost: 3000 jako adresu URL přesměrování. Toto je adresa URL, na kterou chcete uživatele přesměrovat poté, co se ověří pomocí Spotify.

Po registraci vaší aplikace vám Spotify poskytne vaše jedinečné ID klienta a tajemství klienta, které můžete použít k:

• Přidejte tok ověřování Spotify, abyste se mohli přihlásit pomocí přihlašovacích údajů Spotify ve své aplikaci React.
• Získejte svůj jedinečný přístupový token, abyste mohli odesílat požadavky na různé koncové body webového rozhraní API, včetně vyhledávání dat, jako jsou skladby nebo alba.

Nastavte klienta React

Vytvořte aplikaci React a přejděte do kořenového adresáře a vytvořte nový soubor, .env, k nastavení některých proměnných prostředí. Své klientské ID můžete získat z vývojářského panelu 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 = "žeton"

Nainstalujte požadované balíčky

Nainstalujte Axios. Jeho metody budete používat k vytváření požadavků HTTP na webové rozhraní API Spotify.

npm nainstalovat axios

Přidejte pracovní postup ověřování Spotify

Spotify určuje, že všechny požadavky na libovolný koncový bod webového rozhraní API mají v hlavičce požadavku platný přístupový token. Chcete-li získat přístupový token, vaše aplikace se musí nejprve ověřit pomocí Spotify.

Spotify podporuje několik autentizace a autorizacemetody, jako je autorizační kód, pověření klienta nebo metody implicitního udělení.

Nejjednodušší implementací je metoda implicitního udělení, která vyžaduje, aby aplikace zadávala požadavky na koncový bod ověřování (toto jste přidali do souboru ENV) a předávala vaše ID klienta. Po úspěšné autentizaci Spotify odpoví poskytnutím přístupového tokenu, jehož platnost vyprší po zadanou dobu.

Otevřete svůj soubor src/App.js, odstraňte standardní kód React a přidejte kód níže:

import Reagovat, { useState, useEffect } z'reagovat';
import Hledač z'./components/Searcher';
funkceAplikace() {
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 = okno.umístění.hash;
nechat token = okno.localStorage.getItem("žeton");

-li (hash && hash) {
 token = hash.substring(1).rozdělit("&").nalézt(elem => elem.startsWith("přístupový_token")).rozdělit("=")[1];
okno.umístění.hash = "";
okno.localStorage.setItem("žeton", token);
 }
 setToken (token)
 }, [])
konst odhlásit = () => {
 setToken("");
okno.localStorage.removeItem("žeton");
 }
vrátit se (

"Aplikace">
"Záhlaví aplikace">
"SearchContainer">
Hledat</h2>
 {!žeton? 


`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`}>
 Přihlaste se do Spotify
 </a>
 </div> 
 :



"odhlásit se"onClick={logout}>Odhlásit se</button> 
 </div 
 }
 </div>
 </header>
 </div>
 );
}




vývoznívýchozí Aplikace;

Pojďme si to rozebrat:

• Tato komponenta podmíněně vykreslí komponentu vyhledávání a tlačítko pro odhlášení, pokud je to přístupový token Pokud je přítomen jinak, vykreslí div s odkazem, který uživatele přesměruje na autorizaci Spotify strana. Odkaz obsahuje parametry dotazu, které určují hodnoty CLIENT_ID, REDIRECT_URI a RESPONSE_TYPE.
• Jakmile ověříte uživatele, zavolejte useEffect hook ke spuštění bloku kódu, když se komponenta připojí. Tento blok kódu načte přístupový token z hash adresy URL a nastaví jej jako novou hodnotu proměnné stavu tokenu. Token také uloží do místního úložiště, aby zachoval stav autentizace.
• S přístupovým tokenem uloženým ve stavu je předán jako podpěra komponentě Searcher, aby zadávala požadavky na webové API Spotify.
• Pro odhlášení kód jednoduše odebere přístupový token z místního úložiště a nastaví stav tokenu na prázdný řetězec.

Implementujte funkci vyhledávání a vykreslujte výsledky

V adresáři /src vytvořte novou složku a pojmenujte ji, komponenty. V této složce vytvořte nový soubor: Searcher.js a přidejte níže uvedený kód.

import Reagovat, {useState, useEffect} z'reagovat'
import axios z'axios';
funkceHledač(rekvizity) {
konst [searchKey, setSearchKey] = useState("")
konst [tracks, setTracks] = useState([])

konst access_token = rekvizity.token

konst searchArtist = asynchronní () => {
konst {data} = čekat axios.get(" https://api.spotify.com/v1/search", {
 záhlaví: {
'Typ obsahu': "application/json",
'Oprávnění': „Nositel ${access_token}`
 },
 parametry: {
 q: searchKey,
 typ: "umělec"
 }
 })

var artistID = data.artists.items[0].id
var artistTracks = čekat axios.get(` https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
 záhlaví: {
 Oprávnění: „Nositel ${access_token}`
 },
 parametry: {
 omezit: 10,
 trh: 'NÁS'
 }
 })
 setTracks (artistTracks.data.tracks);
 }
vrátit se (
 <>

"SearchForm">
 className ="Název"
 typ="text"
 zástupný symbol="Hledat podle jména interpreta..."
 onChange={(e) => {setSearchKey (e.target.value)}}

 />
Hledat</button> 
 </div>
 {
 tracks.slice(0, 5).mapa(dráha => (




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


vývoznívýchozí Hledač

Pojďme si to rozebrat:

• Komponenta definuje konstantu access_token, kterou nastaví na vlastnost token předávanou jako prop. Později předá tento token v hlavičce požadavku API do koncového bodu API vyhledávání Spotify.
• Definujte dva stavy: vyhledávací klíč a stopy. Stav searchKey uchovává aktuální hodnotu vyhledávacího vstupu. Stav skladeb obsahuje pole 10 nejlepších skladeb pro interpreta, které vyhledávání na Spotify vrátí.
• Funkce searchArtist odešle požadavek GET na rozhraní API Spotify k vyhledání dat umělců na základě hodnoty searchKey.
• Poté extrahuje ID interpreta z dat odpovědi a zadá další požadavek GET k načtení nejlepších skladeb pro tohoto interpreta. Z dat odezvy extrahuje 10 nejlepších stop a nastaví proměnnou stop.
• Komponenta vrátí vstupní pole a tlačítko vyhledávání. Když uživatel klikne na tlačítko vyhledávání, zavolá funkci searchArtist, která načte a zobrazí nejlepší skladby konkrétního interpreta. Nakonec pomocí funkce mapy vykreslí prvních pět stop v poli stop jako seznam.

Spusťte svůj vývojový server a aktualizujte změny, pak přejděte na http://localhost: 3000 ve vašem prohlížeči pro zobrazení výsledků.

Přizpůsobte si svou aplikaci pomocí funkcí Spotify

Tato příručka zdůrazňovala kroky potřebné k odesílání požadavků na webové rozhraní API Spotify za účelem vyhledávání hudebních dat umělců. S funkcemi Spotify, které poskytují sady SDK a API, však můžete udělat více, jako je integrace přehrávače webového přehrávání se stejným vzhledem a dojmem jako na Spotify.

Výhodou SDK a API Spotify je, že jsou bohaté na funkce a můžete je snadno integrovat do jakékoli webové nebo mobilní aplikace.