• Saltar a la navegación principal
  • Saltar al contenido principal

JAVIER GUTIÉRREZ

Desarrollador web

  • Newsletter
  • Blog
  • Acerca de mí

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:

Shell

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:

Shell

Las variables deben tener el prefijo VITE_ :

Plain Text
/.env

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

Shell
/.gitignore

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

JS

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 :

JS
/src/functions/spotifyAPI.js

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 :

JS
/src/functions/spotifyAPI.js

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 :

JS
src/components/ShowCategory.vue

Listar el resultado

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

JS
src/components/ShowCategory.vue

Estilos para presentarlo en forma de cuadrícula

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

CSS
src/components/ShowCategory.vue

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:

JS

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

Archivado en: VUE

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Copyright © 2023 · Genesis Sample on Genesis Framework · WordPress · Iniciar sesión