Uso de la API de Spotify

El mayor problema que nos puede presentar la API de Spotify es la autenticación del usuario, sí que es verdad que la mayoría de las peticiones tiene un cierto limite de envío de datos, esto quiere decir, que, si por ejemplo queremos mostrar nuestras listas de reproducción, la api solo nos devolverá 50 resultados. Este problema lo podremos solucionar con un bucle realmente sencillo, pero para ello debemos conocer la cantidad de listas que tenemos, lo veremos mas adelante.

Primeros Pasos

Lo primero de todo es crear nuestro proyecto de react con el siguiente comando:

$ npx create-react-app nombreapp

Vamos a crear routing.js dentro de la carpeta components, esta la tendremos que crear nosotros. Para hacer esto debemos instalar las dependencias para poder usar rutas en nuestro proyecto:

$ npm install --save react-router-dom

Para este proyecto solo necesitaremos dos rutas, una para un login y la otra para ver tus playlists:

Como se puede ver en la captura anterior, tendremos dos componentes, Playlists y Login:

*en este caso he creado un componente header por si se necesita en algún otro componente.

Antes de ponernos a trabajar sobre los componentes aprenderemos como dar nuestros primeros pasos en la api de Spotify. Para poder acceder a ella debemos ir a la siguiente dirección: https://developer.spotify.com

Discover: Podremos ver apps de otros creadores.
Docs: Documentacion de la api.
Console: Consola para probar las peticiones.
Dashboard: Maneja tus proyectos.

Uso de la api de Spotify

Para poder usar la API de Spotify tendremos que crearnos una aplicación dentro de su servicio.

Esto lo haremos desde Dashboard.

Sera necesario iniciar sesión con nuestra cuenta.

Una vez dentro de la aplicación tendremos que guardar los siguientes datos: Client ID, Client Secret y Redirect URI (este necesitaremos crearlo nosotros), para ello pulsaremos en “edit settings”

En el siguiente campo deberemos añadir la ruta a la que queremos que nos redirija la aplicación después de iniciar sesión. En este caso trabajaremos en local y pondremos: http://localhost:3000, guardaremos los cambios y con esto estamos preparados para trabajar con la api.

Si miramos la documentación de la api veremos el siguiente esquema de como funciona por detrás.

Para entenderlo más fácil:

Primero realizaremos una petición simple a un a url, acto seguido se abrirá una nueva ventana en el navegador donde podremos iniciar sesión.
Una vez iniciada sesión se cerrará esa ventana y nos redirigirá a la url que hemos indicado previamente en las configuraciones de la aplicación dentro del dashboard de Spotify (REDIRECT_URI)
Esta redirección posee un código en la url que se envía como parámetro. Este tendrá que ser capturado para luego poder canjearlo por los tokens de acceso del usuario
Una vez la api nos retorne los tokens ya podremos realizar cualquier petición a la api. El token principal caduca en 1 hora, para crear uno nuevo tendremos que usar el refresh token pero esto no lo veremos en este post.
Hay unas pequeñas variables que podemos mandar la la primera petición llamadas scopes: Estos son “comandos” que nos permiten obtener mas datos de los que obtendríamos normalmente. Se pueden consultar todos los scopes disponibles aquí: https://developer.spotify.com/documentation/general/guides/authorization/scopes/

Estos hay que enviarlos en la petición del paso 1.

Una vez entendido como funciona la api podemos pasar a desarrollar la aplicación.

Desarrollo

Login

Primero es recomendable guardar los datos de la api de una manera que sean accesible para la aplicación.

Crearemos una carpeta global dentro de src y dentro de global crearemos el archivo global.js

Dentro del componente login realizaremos la primera petición que nos retornara un código.

1. Lo primero que debamos hacer es crear una url que nos llevara al inicio de sesión de Spotify.

2. Iremos a esa url mediante un botón “Iniciar Sesion”

Codigo HTML que mostraremos en el componente login

3. Una vez iniciado sesión tendremos que capturar el código que viene con la url.

Para ello necesitamos capturar esa actualización del componente, lo haremos con useEffect

4. El siguiente método funcionara de la siguiente manera:

Resultado:

Esto seria todo por el componente login.

Header

1. Codigo HTML:

2. Función para cerrar sesión:

3. Necesitamos obtener el token para obtener los datos del usuario:

4. Obtenemos los datos del usuario:

Resultado:

Esto sería todo por el componente header.

Playlists

1. Codigo HTML:

2. Datos básicos:

Construir los headers:

3. ComponentDidMount:

4. Obtenemos los datos del usuario: Solo usaremos el nombre de usuario. Lo necesitamos para saber cuales son nuestras playlists

5. Función que obtiene todas las playlists.

* Por defecto la api solo nos da playlists de 50 en 50, hay que hacer un bucle para mostrar todas las que tenemos.

6. Función que obtiene todas las canciones.

* Por defecto la api solo nos da canciones de 100 en 100, hay que hacer un bucle para mostrar todas las que tenemos.

Resultado:

Esto sería todo por el componente playlist.

* Un dato a tener en cuenta es que la api de Spotify tiene varios estados:

Desarrollo: Normalmente los usuarios no pueden iniciar sesión, para que puedan hacerlo debes entrar en tu dashboard => en tu aplicación => users and Access.