Spotify a complètement changé la façon dont nous diffusons la musique avec un catalogue contenant des millions de chansons, d’albums et de listes de lecture.
Grâce à son API Web, vous pouvez rendre vos expériences Spotify encore plus agréables en créant votre propre application de recherche musicale React. L’API donne accès à une série de données musicales que vous pouvez utiliser pour créer une application musicale personnalisée et l’adapter à vos goûts.
Spotify pour les développeurs
Spotify offre un large éventail de fonctionnalités de streaming musical telles que la recherche, la lecture hors ligne et les recommandations personnalisées. La plateforme Spotify pour les développeurs donne accès aux API et aux SDK qui permettent d’utiliser ces fonctionnalités. Dans ce guide, vous explorerez l’API web et apprendrez à l’intégrer dans votre application React pour rechercher les chansons que vous aimez.
Créer un compte
Pour commencer, vous devez avoir un compte Spotify. Si vous n’en avez pas encore, rendez-vous sur la page d’inscription de Spotify. Cependant, si vous en avez déjà un, connectez-vous à la console Spotify pour les développeurs.
Enregistrez votre application
Une fois que vous vous êtes connecté à la console du développeur, enregistrez votre application pour avoir accès à l’API Web. Sur la page du tableau de bord, cliquez sur le bouton Créer une application remplissez le nom et la description, et enfin, acceptez les termes et conditions pour créer l’application.
Enfin, cliquez sur le bouton Modifier les paramètres pour passer aux paramètres de l’URL de redirection. Puisque votre application est encore en mode développement, ajoutez http://localhost:3000 comme URL de redirection. Il s’agit de l’URL vers laquelle vous souhaitez rediriger l’utilisateur après son authentification auprès de Spotify.
Après avoir enregistré votre application, Spotify vous fournira votre identifiant et vos secrets de client uniques que vous pourrez utiliser pour :
- Ajouter un flux d’authentification Spotify, pour vous connecter avec vos informations d’identification Spotify dans votre application React.
- Obtenez votre jeton d’accès unique, pour effectuer des requêtes vers différents points de terminaison de l’API Web, y compris une recherche de données comme les titres ou les albums.
Configurer le client React
Créez une application React et naviguez dans le répertoire racine et créez un nouveau fichier, .envpour définir certaines variables d’environnement. Vous pouvez obtenir votre ID client depuis le tableau de bord des développeurs de Spotify.
REACT_APP_SPOTIFY_CLIENT_ID = "your client ID"
REACT_APP_SPOTIFY_REDIRECT_URI = "http://localhost:3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = "https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "token"
Vous pouvez trouver le code de cette application dans son dépôt GitHub.
Installer les paquets requis
Installez Axios. Vous allez utiliser ses méthodes pour effectuer des requêtes HTTP vers l’API Web de Spotify.
npm install axios
Ajouter le workflow d’authentification de Spotify
Spotify précise que toutes les requêtes adressées à un point de terminaison de l’API Web doivent contenir un jeton d’accès valide dans l’en-tête de la requête. Pour obtenir ce jeton d’accès, votre application doit d’abord s’authentifier auprès de Spotify.
Spotify prend en charge plusieurs méthodes d’authentification et d’autorisation telles que le code d’autorisation, les informations d’identification du client ou les méthodes d’octroi implicite.
La méthode la plus simple à mettre en œuvre est la méthode d’octroi implicite qui nécessite qu’une application envoie des requêtes au point de terminaison auth (vous l’avez ajouté dans le fichier ENV), en transmettant votre ID client. Si l’authentification est réussie, Spotify répond en fournissant un jeton d’accès qui expire après une période donnée.
Ouvrez votre fichier src/App.js, supprimez le code React standard, et ajoutez le code ci-dessous :
import React, { useState, useEffect } from 'react';
import Searcher from './components/Searcher';
function App() {
const CLIENT_ID=process.env.REACT_APP_SPOTIFY_CLIENT_ID
const REDIRECT_URI =process.env.REACT_APP_SPOTIFY_REDIRECT_URI
const AUTH_ENDPOINT =process.env.REACT_APP_SPOTIFY_AUTH_ENDPOINT
const RESPONSE_TYPE = process.env.REACT_APP_SPOTIFY_RESPONSE_TYPE
const [token, setToken] = useState("");
useEffect(() => {
const hash = window.location.hash;
let token = window.localStorage.getItem("token");
if (hash && hash) {
token = hash.substring(1).split("&").find(elem => elem.startsWith("access_token")).split("=")[1];
window.location.hash = "";
window.localStorage.setItem("token", token);
}
setToken(token)
}, [])
const logout = () => {
setToken("");
window.localStorage.removeItem("token");
}
return (
<div className="App">
<header className="App-header">
<div className="SearchContainer">
<h2>Searchly</h2>
{!token ?
<div >
<a href={`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`}>
Login to Spotify
</a>
</div>
:
<div>
<Searcher token={token} />
<button className= "logOut"onClick={logout}>Logout</button>
</div
}
</div>
</header>
</div>
);
}
export default App;
Décomposons-le :
- Ce composant rend conditionnellement le composant de recherche et le bouton de déconnexion, si le jeton d’accès est présent sinon, il rend un div avec un lien qui dirige l’utilisateur vers la page d’autorisation de Spotify. Le lien contient des paramètres de requête qui spécifient les valeurs CLIENT_ID, REDIRECT_URI et RESPONSE_TYPE.
- Une fois que vous avez authentifié un utilisateur, appelez le hook useEffect pour exécuter un bloc de code lorsque le composant se monte. Ce bloc de code récupère le jeton d’accès à partir du hachage de l’URL et le définit comme nouvelle valeur de la variable d’état token. Il stocke également le jeton dans le stockage local pour faire perdurer l’état d’authentification.
- Une fois que le jeton d’accès est stocké dans l’état, il est passé en tant que prop au composant Searcher pour effectuer des requêtes à l’API web de Spotify.
- Pour se déconnecter, le code supprime simplement le jeton d’accès du stockage local et définit l’état du jeton à une chaîne vide.
Implémentation de la fonctionnalité de recherche et rendu des résultats
Dans le répertoire /src, créez un nouveau dossier et nommez-le « components ». Dans ce dossier, créez un nouveau fichier : Searcher.js, et ajoutez le code ci-dessous.
import React, {useState, useEffect} from 'react'
import axios from 'axios';
function Searcher(props) {
const [searchKey, setSearchKey] = useState("")
const [tracks, setTracks] = useState([])
const access_token = props.token
const searchArtist = async () => {
const {data} = await axios.get("https://api.spotify.com/v1/search", {
headers: {
'Content-Type' : "application/json",
'Authorization': `Bearer ${access_token}`
},
params: {
q: searchKey,
type: "artist"
}
})
var artistID = data.artists.items[0].id
var artistTracks = await axios.get(`https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
headers: {
Authorization: `Bearer ${access_token}`
},
params: {
limit: 10,
market: 'US'
}
})
setTracks(artistTracks.data.tracks);
}
return (
<>
<div className="SearchForm">
<input
className ="Name"
type="text"
placeholder="Search By Artist Name ..."
onChange={(e) => {setSearchKey(e.target.value)}}
/>
<button onClick={searchArtist}>Search</button>
</div>
{
tracks.slice(0, 5).map(track => (
<div key={track.id} >
<ul>
<li > {track.name}</li>
</ul>
</div>
))
}
</>
)
}
export default Searcher
Décomposons-le :
- Le composant définit la constante access_token qu’il définit comme la propriété token passée en tant que prop. Il transmet ensuite ce jeton dans l’en-tête de la requête API au point de terminaison de l’API de recherche de Spotify.
- Définissez deux états : searchKey et tracks. L’état searchKey contient la valeur actuelle de l’entrée de recherche. L’état tracks contient un tableau des 10 meilleurs titres pour l’artiste que la recherche Spotify va retourner.
- La fonction searchArtist fait une requête GET à l’API Spotify pour rechercher les données des artistes en fonction de la valeur de searchKey.
- Elle extrait ensuite l’ID de l’artiste des données de réponse et effectue une autre requête GET pour récupérer les meilleurs titres pour cet artiste. À partir des données de réponse, il extrait les 10 meilleurs titres et définit la variable tracks.
- Le composant renvoie un champ de saisie et un bouton de recherche. Lorsqu’un utilisateur clique sur le bouton de recherche, il appelle la fonction searchArtist pour récupérer et afficher les meilleures pistes pour un artiste particulier. Enfin, il utilise la fonction map pour rendre les cinq meilleures pistes dans le tableau des pistes sous forme de liste.
Exécutez votre serveur de développement pour mettre à jour les modifications, puis rendez-vous sur http://localhost:3000 dans votre navigateur pour afficher les résultats.
Personnalisez votre application avec les fonctionnalités de Spotify
Ce guide a mis en évidence les étapes nécessaires pour effectuer des requêtes auprès de l’API Web de Spotify afin de rechercher des données musicales d’artistes. Cependant, vous pouvez faire plus avec les fonctionnalités de Spotify fournies par ses SDK et API, comme intégrer son lecteur web avec le même aspect et la même convivialité que sur Spotify.
L’avantage des SDK et API de Spotify est qu’ils sont riches en fonctionnalités et que vous pouvez facilement les intégrer dans n’importe quelle application Web ou mobile.
