Zbuduj aplikację do wyszukiwania muzyki za pomocą API React i Spotify

Spotify całkowicie zmienił sposób, w jaki strumieniujemy muzykę dzięki katalogowi zawierającemu miliony utworów, albumów i list odtwarzania.

Korzystając z internetowego interfejsu API, możesz sprawić, że korzystanie ze Spotify będzie jeszcze przyjemniejsze, tworząc własną aplikację do wyszukiwania muzyki React. Interfejs API zapewnia dostęp do szeregu danych muzycznych, których można użyć do zbudowania niestandardowej aplikacji muzycznej i dostosowania jej do własnych upodobań.

Spotify dla programistów

Spotify oferuje szeroką gamę funkcji strumieniowego przesyłania muzyki, takich jak wyszukiwanie, odtwarzanie offline i spersonalizowane rekomendacje. Platforma Spotify dla programistów zapewnia dostęp do interfejsów API i zestawów SDK obsługujących te funkcje. W tym przewodniku poznasz internetowy interfejs API i dowiesz się, jak zintegrować go z aplikacją React, aby wyszukiwać utwory, które lubisz.

Zaloguj się na konto

Aby rozpocząć, musisz mieć konto Spotify. Jeśli jeszcze go nie masz, odwiedź strona rejestracji Spotify. Jeśli jednak już go masz, zaloguj się do Spotify dla programistów konsola.

Zarejestruj swoją aplikację

Po zalogowaniu się do konsoli programisty zarejestruj swoją aplikację, aby uzyskać dostęp do internetowego interfejsu API. Na stronie pulpitu nawigacyjnego kliknij przycisk Utwórz aplikację przycisk, uzupełnij nazwę i opis, a na końcu zaakceptuj regulamin tworzenia aplikacji.

Na koniec kliknij na Edytuj ustawienia przycisk, aby przejść do ustawień adresu URL przekierowania. Ponieważ Twoja aplikacja jest nadal w trybie programistycznym, dodaj http://localhost: 3000 jako adres URL przekierowania. To jest adres URL, na który chcesz przekierować użytkownika po uwierzytelnieniu w Spotify.

Po zarejestrowaniu Twojej aplikacji Spotify poda Twój unikalny identyfikator klienta i tajemnice klienta, których możesz użyć do:

• Dodaj proces uwierzytelniania Spotify, aby logować się za pomocą danych uwierzytelniających Spotify w aplikacji React.
• Zdobądź unikalny token dostępu, aby wysyłać żądania do różnych punktów końcowych internetowego interfejsu API, w tym wyszukiwać dane, takie jak utwory lub albumy.

Skonfiguruj klienta React

Utwórz aplikację React i przejdź do katalogu głównego i utwórz nowy plik, .env, aby ustawić niektóre zmienne środowiskowe. Możesz uzyskać swój identyfikator klienta z pulpitu programisty Spotify.

REACT_APP_SPOTIFY_CLIENT_ID = „twój identyfikator klienta”
REACT_APP_SPOTIFY_REDIRECT_URI = " http://localhost: 3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = " https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "znak"

Zainstaluj wymagane pakiety

Zainstaluj Axiosa. Będziesz używać jego metod do wysyłania żądań HTTP do internetowego interfejsu API Spotify.

npm zainstaluj osie

Dodaj przepływ pracy uwierzytelniania Spotify

Spotify określa, że ​​wszystkie żądania kierowane do dowolnego punktu końcowego Web API mają prawidłowy token dostępu w nagłówku żądania. Aby uzyskać token dostępu, Twoja aplikacja musi najpierw uwierzytelnić się w Spotify.

Spotify obsługuje kilka uwierzytelnianie i autoryzacjametod, takich jak kod autoryzacji, poświadczenia klienta lub niejawne metody przyznawania.

Najprostszą do wdrożenia jest niejawna metoda grantu, która wymaga, aby aplikacja wysyłała żądania do punktu końcowego uwierzytelniania (dodałeś to w pliku ENV), przekazując identyfikator klienta. Po pomyślnym uwierzytelnieniu Spotify odpowie, dostarczając token dostępu, którego ważność wygasa po określonym czasie.

Otwórz plik src/App.js, usuń szablonowy kod React i dodaj poniższy kod:

import Reaguj, { useState, useEffect } z'reagować';
import Poszukiwacz z„./komponenty/Wyszukiwarka”;
funkcjonowaćAplikacja() {
konst CLIENT_ID=process.env. REACT_APP_SPOTIFY_CLIENT_ID
konst REDIRECT_URI = proces.env. REACT_APP_SPOTIFY_REDIRECT_URI 
konst AUTH_ENDPOINT =proces.env. REACT_APP_SPOTIFY_AUTH_ENDPOINT 
konst TYP_ODPOWIEDZI = proces.env. REACT_APP_SPOTIFY_RESPONSE_TYPE
konst [token, setToken] = useState("");
 użyjEfekt(() => { 
konst hash = okno.lokalizacja.skrót;
pozwalać token = okno.localStorage.getItem("znak");

Jeśli (hash && hash) {
 token = hash.podłańcuch(1).podział("&").znajdować(element => element.startsWith("znak_dostępu")).podział("=")[1];
okno.lokalizacja.hash = "";
okno.localStorage.setItem("znak", żeton);
 }
 setToken (token)
 }, [])
konst wyloguj się = () => {
 setToken("");
okno.localStorage.removeItem("znak");
 }
powrót (

„Aplikacja”>
„Nagłówek aplikacji”>
„Kontener wyszukiwania”>
Wyszukiwarka</h2>
 {!znak? 


`${AUTH_ENDPOINT}?identyfikator_klienta=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&typ_odpowiedzi=${RESPONSE_TYPE}`}>
 Zaloguj się do Spotify
 </a>
 </div> 
 :



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




eksportdomyślny Aplikacja;

Rozbijmy to:

• Ten komponent warunkowo renderuje komponent wyszukiwania i przycisk wylogowania, jeśli token dostępu jest obecny w przeciwnym razie, renderuje div z linkiem, który kieruje użytkownika do autoryzacji Spotify strona. Łącze zawiera parametry zapytania, które określają wartości CLIENT_ID, REDIRECT_URI i RESPONSE_TYPE.
• Po uwierzytelnieniu użytkownika wywołaj hak useEffect, aby uruchomić blok kodu podczas montowania komponentu. Ten blok kodu pobiera token dostępu z skrótu adresu URL i ustawia go jako nową wartość zmiennej stanu tokenu. Przechowuje również token w pamięci lokalnej, aby zachować stan uwierzytelnienia.
• Gdy token dostępu jest przechowywany w stanie, jest przekazywany jako rekwizyt do komponentu Searcher w celu wysyłania żądań do internetowego interfejsu API Spotify.
• Aby się wylogować, kod po prostu usuwa token dostępu z lokalnego magazynu i ustawia stan tokena na pusty ciąg.

Zaimplementuj funkcję wyszukiwania i renderuj wyniki

W katalogu /src utwórz nowy folder i nadaj mu nazwę, components. W tym folderze utwórz nowy plik: Searcher.js i dodaj poniższy kod.

import Zareaguj, {useState, useEffect} z'reagować'
import osie z„osi”;
funkcjonowaćPoszukiwacz(rekwizyty) {
konst [Kluczwyszukiwania, ustawKluczwyszukiwania] = użyjStan("")
konst [tracks, setTracks] = useState([])

konst token_dostępu = rekwizyty. token

konst szukajArtysta = asynchroniczny () => {
konst {dane} = czekać na axios.get(" https://api.spotify.com/v1/search", {
 nagłówki: {
'Typ zawartości': "aplikacja/json",
'Upoważnienie': `Nosiciel ${token_dostępu}`
 },
 parametry: {
 q: klucz wyszukiwania,
 typ: "artysta"
 }
 })

rozm ArtistID = data.artists.items[0].ID
rozm artystaŚcieżki = czekać na axios.get(` https://api.spotify.com/v1/artists/${identyfikator wykonawcy}/top-tracks`, {
 nagłówki: {
 Upoważnienie: `Nosiciel ${token_dostępu}`
 },
 parametry: {
 limit: 10,
 rynek: 'NAS'
 }
 })
 setTracks (artistTracks.data.tracks);
 }
powrót (
 <>

"Formularz wyszukiwania">
 nazwa klasy ="Nazwa"
 typ="tekst"
 symbol zastępczy=„Wyszukaj według nazwy wykonawcy…”
 onChange={(e) => {setSearchKey (e.target.value)}}

 />
Szukaj</button> 
 </div>
 {
 tory. plasterek (0, 5).mapa(ścieżka => (




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


eksportdomyślny Poszukiwacz

Rozbijmy to:

• Komponent definiuje stałą access_token, którą ustawia na właściwość token przekazaną jako rekwizyt. Później przekazuje ten token w nagłówku żądania API do punktu końcowego API wyszukiwania Spotify.
• Zdefiniuj dwa stany: searchKey i Tracks. Stan searchKey przechowuje bieżącą wartość danych wejściowych wyszukiwania. Stan utworów zawiera tablicę 10 najlepszych utworów wykonawcy, które zwróci wyszukiwanie Spotify.
• Funkcja searchArtist wysyła żądanie GET do API Spotify w celu wyszukania danych wykonawców na podstawie wartości searchKey.
• Następnie wyodrębnia identyfikator artysty z danych odpowiedzi i wysyła kolejne żądanie GET, aby pobrać najlepsze utwory tego artysty. Z danych odpowiedzi wyodrębnia 10 najlepszych utworów i ustawia zmienną utworów.
• Komponent zwraca pole wejściowe i przycisk wyszukiwania. Gdy użytkownik kliknie przycisk wyszukiwania, wywołuje funkcję searchArtist w celu pobrania i wyświetlenia najlepszych utworów określonego wykonawcy. Na koniec używa funkcji map do renderowania pięciu pierwszych utworów w tablicy utworów jako listy.

Uruchom serwer deweloperski, aby zaktualizować zmiany, a następnie przejdź do http://localhost: 3000 w przeglądarce, aby zobaczyć wyniki.

Dostosuj swoją aplikację za pomocą funkcji Spotify

W tym przewodniku opisano kroki wymagane do wysyłania żądań do internetowego interfejsu API Spotify w celu wyszukiwania danych muzycznych artystów. Możesz jednak zrobić więcej dzięki funkcjom Spotify zapewnianym przez jego pakiety SDK i interfejsy API, takie jak integracja internetowego odtwarzacza odtwarzającego z takim samym wyglądem i działaniem jak w Spotify.

Zaletą zestawów SDK i interfejsów API Spotify jest to, że są bogate w funkcje i można je łatwo zintegrować z dowolną aplikacją internetową lub mobilną.