
Date
Septembre 2023
Techs
Vue , TailwindCSS , API
Ce site utilise l'API Spotify pour afficher les données Spotify d'un utilisateur telles que ses artistes préférés ou ses albums préférés, etc.
Tastify! est un simple site web qui affiche les statistiques du compte Spotify d’un utilisateur telles que son Top Artistes ou Top Tracks. Pour cela, j’utilise l’API mise à disposition par Spotify. Cependant, l’utilisation de l’API a été un challenge car celle-ci nécessitait tout un système de connexion pour autoriser Tastify! à accéder au compte Spotify à l’aide d’un jeton dit token d’authentification.
La première étape pour récupérer les statistiques personnelles d’un utilisateur via l’API est d’autoriser l’application à accéder au compte Spotify de l’utilisateur. Pour cela, il faut que le visiteur clique sur un lien prévu à cet effet auquel on va ajouter divers paramètres pour que l’API sache qu’il faut mettre en relation notre application et Spotify.

const handleLogin = () => {
location.href = `${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&scope=${SCOPES_URL_PARAM}&response_type=${RESPONSE_TYPE}&show_dialog=true`;
};
Cette partie du code est une fonction JavaScript qui gère la connexion de l'utilisateur à l'application Tastify!. Lorsque la fonction handleLogin est appelée, elle redirige l'utilisateur vers une page d'autorisation de Spotify en utilisant les paramètres spécifiés tels que l'ID client, l'URI de redirection, la portée des autorisations et le type de réponse. En affichant cette page d'autorisation, l'utilisateur pourra autoriser Tastify! à accéder à son compte Spotify. Cette fonction est utilisée pour initier le processus d'authentification avec l'API Spotify et permettre à Tastify! d'obtenir les données Spotify de l'utilisateur.

Une fois la connexion effectuée, on récupère le jeton qui nous permet d’effectuer les différentes requêtes nécessaires pour obtenir les statistiques de l’utilisateur.

Ensuite on récupère toutes les données sous forme de JSON ce qui nous permet d’afficher de manière plus élégante les goûts de l’utilisateur qu’il peut filtrer de 3 façons différentes grâce au paramètre time_range de la requête (4 dernières semaines, 6 derniers mois, ou depuis la création du compte).




