lyrics finder
1.0.0
Breve: para crear una aplicación de una sola página que se basa en gran medida en una o más API.
La API que he elegido usar es el catálogo de letras de canciones Musixmatch, ubicado en https://www.musixmatch.com/
Los usuarios que desean buscar la letra de una canción específica pueden hacerlo usando Lyric Finder.
El usuario puede buscar por artista o por canción y se le devuelve una lista de resultados a través de los cuales puede navegar para encontrar la letra de la canción que están buscando.
La página ahora está en vivo en https://hfolcot.github.io/lyrics-finder/
Tenga en cuenta que las letras no se imprimen en su totalidad debido a la licencia
La página utiliza Bootstrap 4.0.0 y utiliza su sistema de cuadrícula y otro estilo.
La página utiliza las fuentes Nunito Sans y Corben de Google Fonts, y también iconos de Fontawesome.
Mi propio estilo adicional se ha hecho dentro de los activos/css/main.css
La secuencia de comandos utiliza jQuery 3.3.1.
La API utilizada es https://api.musixmatch.com/ws/1.1. Los datos devueltos están en formato JSONP y, por lo tanto, se requirió una solicitud JQuery AJAX para obtener los datos.
Estas son cada una de las etapas en las que puede estar la aplicación: los siguientes números se utilizarán para describir en qué [etapa] se usa cada función y a qué etapa conduce.
También hay funcionalidad dentro de cada etapa para regresar a la página anterior, a través del botón Borrar resultados o un botón de retorno.
Hay siete funciones principales utilizadas en Lyric Finder:
Esta función se invoca tan pronto como el usuario haya hecho clic en el botón de búsqueda. Verifica qué valor del botón de radio se verifica y ejecuta la función relevante en función de esto.
Esta función se invoca al comienzo de todas las siguientes funciones para borrar cualquier dato que ya pueda estar en el contenedor de resultados.
CheckRadio () invoca esta función si el botón de radio de la canción se verificó cuando el usuario buscó. La función realiza una solicitud $ .AJAX a https://api.musixmatch.com/ws/1.1/track.search con el valor que el usuario ingresó en el cuadro de búsqueda como el parámetro Q_Track. Si la solicitud es exitosa, se crea una variable TrackResults que contiene la lista de pistas devueltas. Estos están ordenados por la popularidad del artista basado en el sistema de clasificaciones de MusixMatch. Luego, para cada elemento de esta lista, el nombre y el artista se ingresan en el contenedor de resultados en index.html, junto con un botón que le da al usuario una opción para ver la letra de la canción seleccionada. Esto funciona pasando el track_id como un parámetro en la función getLyrics () que se activa al hacer clic.
CheckRadio () invoca esta función si el botón de radio del artista se verificó cuando el usuario buscó. La función realiza una solicitud $ .AJAX a https://api.musixmatch.com/ws/1.1/artist.search con el valor que el usuario ingresó en el cuadro de búsqueda como un parámetro para Q_artist.
Si la solicitud es exitosa, se crea una variable ArtistResults que contiene la lista de artistas devueltos. Estos están ordenados por la popularidad como basado en el sistema de clasificaciones de MusixMatch. Luego, para cada elemento de esta lista, el artista se ingresa en el contenedor de resultados en index.html, junto con un botón que le da al usuario una opción para ver los álbumes del artista seleccionado. Esto funciona pasando el Artist_ID como un parámetro en la función getalBumList () que se activa en el clic.
Esta función se ejecuta de manera similar a las dos funciones anteriores. El Artist_ID se transmite desde la función getArtist () y esto se usa para obtener los datos del álbum para ese artista. Luego se imprime en el elemento contenedor como una lista que contiene el nombre de cada álbum y un botón que da la opción de ver la lista de canciones de ese álbum. Esto ejecutará getTrackList () en clic y pasará el álbum_id como parámetro a esa función.
El álbum_id se pasa a esta función y se usa para hacer una solicitud a https://api.musixmatch.com/ws/1.1/album.tracks.get para la lista de pistas en ese álbum. Esto devolverá la lista de pistas con la opción de ver la letra, nuevamente con un botón como en getTrack ().
Esta función se invoca cuando se hace clic en cualquier botón dentro de una lista de canciones. La ID de pista de la canción seleccionada se pasa de la función anterior. La función utiliza dos llamadas AJAX separadas. El primero se usa para obtener datos de la pista. Obtenga en la API y saca el nombre de la pista de esto para que pueda mostrarse como un título. Luego se hace una segunda llamada a Matcher.Lyrics.get para devolver la letra ellos mismos. Si no hay letras para devolver, se muestra un mensaje de error personalizado dentro del elemento contenedor.
El diseño de la página se ha mantenido muy básico para mantener los métodos obvios y simples. Se ha utilizado una imagen de fondo oscura que es gentil para los ojos y no atrae la atención del usuario. El esquema de color intenta coincidir con esta imagen tanto como sea posible y se creó con Coolors.co. Los datos se devuelven en una tabla con encabezados apropiados.
El código JavaScript se ejecutó en JSHINT y no devolvió errores. El HTML se ejecutó en el validador de marcado W3C y no devolvió errores. El CSS se ejecutó en el validador CSS W3C y no devolvió errores.
Durante las pruebas de usuario, se observó que no todas las canciones en la base de datos de MusixMatch tienen letras y, por lo tanto, se ha agregado un error personalizado para aquellos que no tienen una clave de letras en el resultado del resultado.
se creó y se ejecutó activos/js/spec.js para verificar la funcionalidad de resetPage (); Esta prueba fue exitosa. Para garantizar que el script de prueba fuera correcto, la función se editó para incluir texto dentro del contenedor de resultados, momento en el que la prueba falló.
Mientras se probaba, se encontraba un problema interesante en el que no se devolvían las letras para ninguna canción que contenía marcas de cotización dobles o individuales. En la investigación, parecía que el problema fue causado por la función que intentaba pasar un nombre de canción a una nueva función (getLyrics, renombrada durante este proceso a retornyrics), pero cuando las citas estaban presentes en el nombre de la canción, estaba leyendo esto como el final del parámetro y errores porque no hubo paréntesis de cierre. Esto se resolvió editando getLyrics para que recuperara el nombre de la canción en una llamada separada en lugar de pasarla desde la función anterior.
Cada etapa de prueba se volvió a hacer después de cualquier nueva funcionalidad.
Para ser probado:
(X = funcionando como se esperaba) (o = no funciona como se esperaba)
Lo siguiente es probar si el código funciona como se esperaba.
| Navegador/prueba | Ópera | Firefox | Cromo | Borde | Safari |
|---|---|---|---|---|---|
| 1 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 2 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 3 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 4 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 5 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 6 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 7 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 8 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 9 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 10 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 11 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 12 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 13 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 14 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 15 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 16 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 17 | incógnita | incógnita | incógnita | incógnita | incógnita |
Lo siguiente es probar si la pantalla funciona como se esperaba.
| Navegador/prueba | Ópera | Firefox | Cromo | Borde | Safari |
|---|---|---|---|---|---|
| 1 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 2 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 3 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 4 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 6 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 7 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 8 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 9 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 11 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 12 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 14 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 15 | incógnita | incógnita | incógnita | incógnita | incógnita |
| 17 | incógnita | incógnita | incógnita | incógnita | incógnita |
Se observó un problema en Microsoft Edge, donde la imagen de fondo no se mostraba correctamente. Esto se debió a la posición del elemento de script dentro del código HTML. Una vez que se movió al final del cuerpo en lugar de en la cabeza, la imagen de fondo se muestra correctamente.
Se encontró otro problema en el iPhone donde la imagen de fondo no permanecía solucionada y no se desplazaría con la página, lo que llevó a la página "agotada" de fondo cuando se desplaza hacia abajo una gran cantidad de datos devueltos. La investigación mostró que este es un problema conocido con iOS. Esto se resolvió utilizando una consulta de medios para establecer el fondo para repetir en pantallas más pequeñas.
Uso de herramientas de desarrollador de Google Chrome para probar cómo se muestra cada etapa de la aplicación en un ancho de pantalla diferente.
X = mostrar como se esperaba
| Pantalla de ancho/página de pantalla | Galaxy S5 | Píxel 2 | Píxel 2xl | iPhone 5/SE | iPhone 6/7/8 | iPhone 6/7/8 más | iPhone X | ipad | iPad Pro |
|---|---|---|---|---|---|---|---|---|---|
| 1 | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita |
| 2 | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita |
| 3 | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita |
| 4 | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita |
| 6 | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita |
| 7 | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita |
| 8 | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita |
| 9 | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita |
| 11 | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita |
| 12 | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita |
| 14 | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita |
| 15 | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita |
| 17 | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita | incógnita |
Este proyecto fue construido en Cloud9 y empujado a Github, donde se publicó en las páginas de Github en https://hfolcot.github.io/lyrics-finder/
