Búsqueda de Spotify
Objetivo: crear una aplicación de búsqueda de música utilizando jQuery, AJAX y la API de Spotify. Utilizará el punto final de búsqueda de Spotify para buscar pistas (canciones).
Requisitos mínimos
- Tu aplicación debe tener un formulario para buscar pistas (canciones). Este formulario necesita un campo de entrada para la palabra clave de búsqueda.
- Cuando un usuario envía el formulario, use jQuery para obtener la palabra clave de búsqueda de la entrada del formulario.
- Utilice AJAX para llamar al punto final de búsqueda de Spotify con la palabra clave de búsqueda del formulario.
- Si la llamada AJAX tiene éxito, muestre los resultados de la búsqueda en la página. Debes incluir al menos el nombre de la pista y el nombre del artista para cada resultado.
- Cada vez que el usuario envíe el formulario, borre los resultados de búsqueda anteriores de la vista.
Ideas adicionales
Opcionalmente, desafíate a ti mismo para llevar el proyecto más lejos.
- Muestra la carátula del álbum de una pista junto a cada resultado de búsqueda en la vista. Sugerencia: notarás que si intentas acceder a la carátula del álbum pero no hay ninguna disponible, tu aplicación fallará. Evite que esto suceda comprobando primero si hay alguna obra de arte disponible.
- Spotify nos da una
preview_url para cada pista. Cree un botón de reproducción para cada pista en su vista que abra la preview_url en una nueva pestaña (¡comenzará a reproducir la canción!). - Sería bueno informarle al usuario que algo está sucediendo en los pocos milisegundos entre el envío del formulario y la obtención de datos en la página. Muestre
loading.gif (proporcionado en el directorio images ) cuando se envíe el formulario y ocúltelo cuando obtenga datos de Spotify. - Maneje el caso en el que no se devuelven datos de Spotify. Querrá informarle al usuario que no hay resultados, en lugar de simplemente mostrar una página en blanco.
- Manejar el caso en el que el usuario envía la búsqueda con una palabra clave vacía. Consulte el error en la consola al enviar este formulario en blanco; Spotify considera que esto es una "mala solicitud". Si el usuario intenta enviar un formulario en blanco, no busque y recuérdele que ingrese una palabra clave.
Empezando
- Bifurca este repositorio y clónalo en tu computadora.
- Usando el token que obtuviste en clase en el encabezado de tu solicitud AJAX, practica consultando el punto final de búsqueda de Spotify usando Postman o
curl con algunas palabras clave de búsqueda diferentes. Querrá establecer type=track en la URL de su solicitud. Mire los datos de respuesta y descubra cómo accedería al nombre de la pista y al nombre del artista para una pista en particular (esto implicará acceder a valores desde JSON con objetos y matrices anidados).
Nota ! ¡Tu token caduca cada hora! Sí, esto es muy molesto. Asegúrese de actualizar su Token usando este generador de tokens mientras trabaja. - Una vez que se sienta cómodo con la estructura de los datos de respuesta, trabaje en el uso de AJAX para realizar la llamada API a Spotify cuando el usuario envíe el formulario.
- Comience por
console.log -ing los datos de respuesta. Una vez que tengas eso funcionando, accede a los datos que deseas mostrar (nombre de la pista y nombre del artista). - Una vez que sepa cómo acceder a los datos de los resultados, use jQuery para
append a la página. Sugerencia: querrás usar Array#forEach para recorrer todas las pistas que Spotify devuelve en los datos de respuesta.
Envío
- A medida que realiza cambios en el código, confirme y envíe con frecuencia a su bifurcación de GitHub.
- Una vez que haya terminado la tarea y haya enviado su trabajo a GitHub, realice una solicitud de extracción desde su bifurcación al repositorio original.
Recursos
- jQuery.ajax()
- Punto final de búsqueda de Spotify
