Cómo acceder a la API de Spotify con Vue 3

Instalación y desarrollo de una aplicación haciendo uso de Vue 3 , Vite y el acceso a la API de Spotify para desarrolladores.

Registrar una APP en Spotify

Ve al Dashboard de Spotify y loguéate con tu cuenta. Encuentra el botón Create an APP. Introduce el nombre (Vue 3 Spotify Categories) de la aplicación y una descripción (Muestra las categorías musicales de Spotify). Una vez dentro nos interesan los siguientes campos:

Client ID – indentificador único de tu app.
Client Secret – clave secreta de tu app.

Instalar Vue 3 con Vite

Vite es un build para desarrollo web que permite servir código mucho más rápido gracias a su enfoque de importación de ES Module nativo.

Para configurar tu proyecto sólo tienes que ejecutar los siguientes comandos en la terminal:

npm init @vitejs/app vue3-spotify-categories
cd vue3-spotify-categories
npm install
npm run dev

Cuando te pregunte por el Template, elige Vue. Desde este momento ya tenemos un servidor con nuestra aplicación en http://localhost:3000/

Variables de Entorno En Vite

En la aplicación vamos a utilizar las claves que nos proporciona Spotify, pero no queremos que sean visibles en algún repositorio público en caso de utilizarlo. Para evitarlo crearemos un archivo .env para guardarlas como variables de entorno:

nano .env

Las variables deben tener el prefijo VITE_ :

VITE_CLIENT_ID= Tu ID de Cliente
VITE_CLIENT_SECRET= Tu Cliente Secreto

Paso seguido, añadimos el archivo .env a .gitignore :

node_modules
.DS_Store
dist
dist-ssr
*.local

.env

Ya disponemos de nuestras variables de entorno en toda la aplicación, a las cuales podemos acceder de la siguiente manera :

const clientId = import.meta.env.VITE_CLIENT_ID;
const clientSecret = import.meta.env.VITE_CLIENT_SECRET;

Crear una Función para Obtener el Token de Spotify

Crea el archivo /src/functions/spotifyAPI.js y exporta una función asíncrona a la que se le pueda pasar como parámetros tus clientId y clientSecret y que conectando con la API de Spotify te devuelva un token de la siguiente forma :

export async function getToken(clientId, clientSecret) {
  const result = await fetch("https://accounts.spotify.com/api/token", {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      Authorization: "Basic " + btoa(clientId + ":" + clientSecret),
    },
    body: "grant_type=client_credentials",
  });

  const data = await result.json();
  return data.access_token;
}

Implementar Función para Acceder a la API de Spotify

Añade al mismo archivo otra función que pasándole como parámetro el token obtenido anteriormente devuelva un objeto JSON con los datos de cada categoría de Spotify :

  export async function getCategories(token) {
    const result = await fetch(
      `https://api.spotify.com/v1/browse/categories`,
      {
        method: "GET",
        headers: { Authorization: "Bearer " + token },
      }
    );
    const data = await result.json();
    return data.categories.items;
  }

Crear un componente de Vue para visualizar los Datos de la API

Crear el componente ShowCategory.vue dividido en estos 3 apartados:

Obtener Datos de Spotify

En el script se importan las funciones getCategories y getToken, además de las variables de entorno, retornando el objeto categories :

<script>
import { getCategories, getToken } from "../functions/spotifyAPI";
export default {
  async setup() {
    const clientId = import.meta.env.VITE_CLIENT_ID;
    const clientSecret = import.meta.env.VITE_CLIENT_SECRET;
    const token = await getToken(clientId, clientSecret);
    const categories = await getCategories(token);
    return {
      categories,
    };
  },
};
</script>

Listar el resultado

Con la directiva v-for listamos el nombre de cada categoría junto con su icono:

<template>
  <h2>Categorías de Spotify</h2>
  <div class="wrapper">
    <div v-for="category in categories" :key="category.name">
      <img :src="category.icons[0].url" alt="" />
      <div>{{ category.name }}</div>
    </div>
  </div>
</template>

Estilos para presentarlo en forma de cuadrícula

En el apartado de estilos hacemos uso de la característica display grid de css :

<style>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
}
</style>

Archivo App.vue

Sólo queda importar ShowCategory.vue a la aplicación principal y hacer uso del componente suspense para mostrar contenido de reemplazo mientras se resuelven las respuestas de las acciones asíncronas:

<template>
  <Suspense>
    <template #default>
      <show-category />
    </template>
    <template #fallback>
      <span>Cargando...</span>
    </template>
  </Suspense>
</template>

<script>
import ShowCategory from "./components/ShowCategory.vue";
export default {
  name: "App",
  components: {
    ShowCategory,
  },
};
</script>

El código completo del ejercicio está en el siguiente repositorio de Github.