¡Hola!
Soy Rafael Ferrera Navarro

Desarrollador Full-Stack apasionado por el diseño, en constante crecimiento y dedicado a crear soluciones digitales innovadoras.

En esta web, utilizo la API de Spotify para mostrar una selección de canciones de mi cuenta personal. Esta integración no solo demuestra mis habilidades técnicas, sino que también añade un toque personal a mi trabajo. Aquí tienes un desglose detallado de cómo funciona:

1. Configuración del Subdominio: Creé un subdominio en mi VPS específicamente para manejar solicitudes personalizadas de API. Esto me permite gestionar todas las interacciones futuras con la API de manera segura y eficiente, aislándolas del sitio web principal.
2. Solicitud API con JavaScript: La integración comienza con una función en JavaScript que envía una solicitud a mi endpoint personalizado de la API utilizando Fetch API, incorporando un token de autenticación para asegurar el acceso.
3. Configuración de CORS: En el servidor, he configurado los encabezados de Cross-Origin Resource Sharing (CORS). Esta configuración permite solicitudes de API solo desde dominios específicos autorizados, mejorando la seguridad al prevenir accesos no autorizados.
4. Proceso de Autenticación: Cuando se recibe la solicitud de API, primero se verifica que el token de autenticación en los encabezados de la solicitud sea válido. Si el token falta o es incorrecto, se devuelve una respuesta "403 Forbidden".
5. Obtención del Token de Acceso: Tras una autenticación válida, el servidor obtiene un token de acceso de la API de Spotify. Este token es necesario para autenticar las solicitudes posteriores para obtener las canciones de la lista de reproducción.
6. Obtención de Canciones de la Lista de Reproducción: El servidor procede a hacer una solicitud a la API de Spotify para obtener canciones de una lista de reproducción designada. Utiliza el token de acceso obtenido anteriormente para autorizar esta solicitud.
7. Filtrado de Canciones: La respuesta de la API se filtra para excluir cualquier canción que no tenga una URL de vista previa. Esto asegura que solo se incluyan canciones reproducibles en los datos finales enviados al cliente.
8. Lista de Canciones Aleatorias: Para añadir variedad, las canciones filtradas se aleatorizan antes de ser enviadas de vuelta al cliente, proporcionando una experiencia de escucha dinámica cada vez que alguien entra en el sitio web.
9. Envío de Datos al Cliente: Finalmente, el servidor envía los datos de las canciones aleatorias junto con la fecha de la última actualización al cliente.
10. Mostrar Información de las Canciones: Al recibir los datos de las canciones, la función de JS actualiza la interfaz de usuario para mostrar la canción actual, la carátula del álbum y la fecha de la última actualización, mejorando la experiencia de usuario. En caso de que la API falle, la lógica está diseñada para mostrar todos los elementos con otros estilos, garantizando una experiencia fluida, esté o no el componente de Spotify edisponible.

Esta integración demuestra mi capacidad para trabajar con APIs, gestionar configuraciones del servidor y crear experiencias de usuario fluidas, combinando de manera efectiva mis habilidades de desarrollo front-end y back-end.