Intégrer l'API de Last.fm avec Vue.js

Introduction

Depuis quelques années, je suis inscrit sur le site Last.fm. C’est un site qui permet d’enregistrer les artistes que vous écoutez et de voir les artistes similaires. Vous pouvez aussi voir les artistes que vous avez écoutés et les réécouter sur Spotify ou Youtube.

Ça vous permet d’avoir des statistiques, de savoir quel est le style de musique que vous écoutez le plus, le total du nombre de morceaux, etc. Un outil pour des mélomanes comme moi qui aime bien voir l’évolution de ses écoutes. Je sais que je me répète assez souvent avec le mot “écoutes”, et ce n’est pas fini ! 😆

J’ai donc réalisé depuis l’API de Last.fm un petit projet pour voir les artistes, albums et mes récentes écoutes.

Voici une preview du site web créé à partir de VueJS et de l’API de Last.fm. Vous pouvez la voir en action ici. Il suffit d’ajouter votre clé API Last.fm et votre nom d’utilisateur Last.fm pour voir vos données.

Création du projet

Pour commencer, nous allons créer un projet Vite avec Vue.js 3.

Pourquoi Vite ?

Vite est un outil de construction qui vise à fournir une expérience de développement plus rapide et plus légère pour les projets Web modernes. Il se compose de deux parties principales :

• Un serveur de développement qui offre de riches fonctionnalités par rapport aux modules ES natifs, par exemple le remplacement extrêmement rapide des modules à chaud (HMR).
• Une commande de build qui regroupe votre code avec Rollup, préconfiguré pour produire des actifs statiques hautement optimisés pour la production.

Source

npm create vite@latest

Aucune pré-configuration du projet, j’utilise simplement SASS en plus pour le CSS. Si vous faites la même chose, pensez à installer SASS en devDependencies.

npm install -D sass

Pour ce qui est du code et comment sass est interprété dans les views, il suffit de déclarer :

<style lang="scss" scoped>
...
</style>

Et Vite va s’occuper de tout, et même pour la version de production.

That said, Vite does provide built-in support for .scss, .sass, .less, .styl and .stylus files. Source

L’architecture

L’architecture est propre à Vue.js 3. J’ai simplement ajouté SASS comme écrit plus haut. Un fichier .env où je stocke mon username Last.fm et en ce qui concerne la clé API, je ne le stocke pas puisqu’il sera géré avec le localStorage afin de ne pas fuiter le token. Mais dans le projet, je fais en sorte que le token peut être récupéré s’il est disponible dans le fichier .env sous la valeur VITE_LASTFM_KEY.

Le fichier .env :

# Required
VITE_USERNAME=thomasbnt
## Get your API key here: https://www.last.fm/api/account/create
# Caution : VITE_ prefix is required, and he show to the client your key.
VITE_LASTFM_KEY=YOUR_API_KEY

# Leave it like that if you don't want to settle anything
VITE_LASTFM_LIMIT_FOR_RECENT_TRACKS=10

Pour le reste, j’utilise les composants de base de Vue.js 3. Rien de plus simple.

Les requêtes API

Concernant les requêtes, je me suis référé à la documentation de l’API de Last.fm que vous pourrez retrouver ici. Elle est plutôt claire et simple à comprendre, en tout cas je n’ai pas eu de difficulté à récupérer les donnés et à m’amuser avec.

Pour les requêtes, j’ai utilisé fetch. Par exemple pour récupérer mes derniers morceaux écoutés avec la méthode user.getRecentTracks :

async getUserRecentTracks() {
  if (localStorage.getItem("lastfm_key")) {
    const username = localStorage.getItem("username") ? localStorage.getItem("username") : import.meta.env.VITE_USERNAME
    const key = localStorage.getItem("lastfm_key") ? localStorage.getItem("lastfm_key") : import.meta.env.LASTFM_KEY
    const response = await fetch(
      `https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${username}&api_key=${key}&limit=${this.limit}&format=json`
    )
    const data = await response.json()
    this.recentTracks = data.recenttracks
  }
}

Ce qui nous donne cette partie avec la magie de Vue.js et un peu de style :

Vous pouvez retrouver ce component sur GitHub /src/components/RecentTracks.vue.

L’utilisation du localStorage

Comme vous l’aurez vu légèrement plus haut, j’utilise le localStorage pour stocker la clé API Last.fm. Cela permet de ne pas laisser la clé API dans le code source et de la cacher. Mais cela a aussi un inconvénient, c’est que si vous changez de navigateur, vous ne pourrez plus accéder à vos données. Pour contourner ce problème, j’ai ajouté un bouton pour récupérer la clé API Last.fm et la stocker dans le localStorage.

async getUserRecentTracks() {
if (localStorage.getItem("lastfm_key")) {
    const username = localStorage.getItem("username") ? localStorage.getItem("username") : import.meta.env.VITE_USERNAME
    const key = localStorage.getItem("lastfm_key") ? localStorage.getItem("lastfm_key") : import.meta.env.LASTFM_KEY
    const response = await fetch(
      `https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${username}&api_key=${key}&limit=${this.limit}&format=json`
    )
    const data = await response.json()
    this.recentTracks = data.recenttracks
  }
}

Conclusion

Assez bref comme article concernant l’utilisation de l’API de Last.fm et de Vue.js, mais je préfère vous rediriger directement sur le code source. Ça permet de mieux comprendre son utilisation et de voir l’entièreté du code.

Le projet est Open Source et est disponible sur GitHub. Vous pouvez y contribuer et même le tester localement. Pour cela, lisez la documentation.