lyrics finder
1.0.0
Brief - Pour créer une application de page unique qui s'appuie fortement sur une ou plusieurs API.
L'API que j'ai choisi d'utiliser est le catalogue Musixmatch des paroles de chansons, située à https://www.musixmatch.com/
Les utilisateurs qui souhaitent rechercher les paroles d'une chanson spécifique peuvent le faire en utilisant Lyric Finder.
L'utilisateur peut rechercher par artiste ou par chanson et est renvoyé une liste de résultats à travers lesquels il peut naviguer pour trouver les paroles de la chanson qu'ils recherchent.
La page est maintenant en direct sur https://hfolcot.github.io/lyrics-fider/
Veuillez noter que les paroles ne sont pas imprimées en totalité en raison de la licence
La page utilise Bootstrap 4.0.0 et utilise son système de grille et d'autres styles.
La page utilise les polices Nunito Sans et Corben de Google Fonts, ainsi que des icônes de Fontawesome.
Mon propre style a été effectué dans les actifs / CSS / Main.css
Le script utilise JQuery 3.3.1.
L'API utilisée est https://api.musixmatch.com/ws/1.1. Les données renvoyées sont au format JSONP et donc une demande JQuery Ajax était nécessaire pour obtenir les données.
Ce sont les étapes que l'application peut être - les nombres suivants seront utilisés pour décrire à quelle [étape] chaque fonction est utilisée et à quelle étape elle mène.
Il existe également des fonctionnalités dans chaque étape pour revenir à la page précédente, via le bouton Effacer les résultats ou un bouton Go Back.
Il y a sept fonctions principales utilisées dans Lyric Finder:
Cette fonction est invoquée dès que l'utilisateur a cliqué sur le bouton de recherche. Il vérifie quelle valeur du bouton radio est vérifiée et exécute la fonction pertinente en fonction de cela.
Cette fonction est invoquée au début de toutes les fonctions suivantes afin d'effacer toutes les données qui peuvent déjà être dans le conteneur des résultats.
Cette fonction est invoquée par CheckRadio () si le bouton Radio Song a été vérifié lorsque l'utilisateur a recherché. La fonction fait une demande $ .ajax à https://api.musixmatch.com/ws/1.1/track.search avec la valeur que l'utilisateur a entré dans la zone de recherche comme paramètre Q_Track. Si la demande est réussie, un trackResults variable est créé qui contient la liste retournée des pistes. Ceux-ci sont triés par la popularité de l'artiste en fonction du système de notes de MusixMatch. Ensuite, pour chaque élément de cette liste, le nom et l'artiste sont entrés dans le conteneur de résultats dans index.html, ainsi qu'un bouton qui donne à l'utilisateur une option pour afficher les paroles de la chanson sélectionnée. Cela fonctionne en passant le track_id en tant que paramètre dans la fonction getlyric () qui est déclenché en clic.
Cette fonction est invoquée par CheckRadio () si le bouton radio de l'artiste a été vérifié lorsque l'utilisateur a recherché. La fonction fait une demande $ .ajax à https://api.musixmatch.com/ws/1.1/artist.search avec la valeur que l'utilisateur a entré dans la zone de recherche comme paramètre pour Q_Artist.
Si la demande est réussie, une variable artistrésults est créée qui contient la liste retournée des artistes. Ceux-ci sont triés par popularité comme basé sur le système de notes de MusixMatch. Ensuite, pour chaque élément de cette liste, l'artiste est entré dans le conteneur de résultats dans index.html, ainsi qu'un bouton qui donne à l'utilisateur une option pour afficher les albums de l'artiste sélectionné. Cela fonctionne en passant le paramètre artiste_id dans la fonction getalbumList () qui est déclenché sur le clic.
Cette fonction s'exécute de manière similaire aux deux fonctions précédentes. L'artiste_id y est transmis de la fonction getartist () et cela est utilisé pour obtenir les données de l'album pour cet artiste. Il est ensuite imprimé dans l'élément de conteneur comme une liste contenant le nom de chaque album et un bouton donnant la possibilité de visualiser la liste des pistes de cet album. Cela exécutera getTrackList () sur Click et passera l'album_id en tant que paramètre dans cette fonction.
L'album_id est transmis dans cette fonction et utilisé pour faire une demande à https://api.musixmatch.com/ws/1.1/album.tracks.get pour la liste des morceaux de cet album. Cela renverra ensuite la liste des pistes avec l'option de visualiser les paroles, encore une fois avec un bouton comme dans getTrack ().
Cette fonction est invoquée lorsqu'un bouton dans une liste de chansons est cliqué. L'ID de piste de la chanson sélectionnée est passé à partir de la fonction précédente. La fonction utilise deux appels AJAX distincts. Le premier est utilisé pour obtenir des données de la piste. Obtenez de l'API et en tire le nom de la piste afin qu'il puisse être affiché comme titre. Un deuxième appel est ensuite fait à Matcher.lyrics.get pour retourner les paroles elles-mêmes. S'il n'y a pas de paroles à retourner, un message d'erreur personnalisé s'affiche dans l'élément de conteneur.
La disposition de la page a été très basique pour garder les méthodes évidentes et simples. Une image d'arrière-plan sombre a été utilisée, ce qui est doux sur l'œil et n'attire pas l'attention de l'utilisateur. La palette de couleurs essaie de correspondre autant que possible cette image et a été créée avec des refroidisseurs.co. Les données sont renvoyées dans un tableau avec des en-têtes appropriés.
Le code JavaScript a été exécuté sur Jshint et n'a renvoyé aucune erreur. Le HTML a été exécuté sur le validateur de balisage W3C et n'a renvoyé aucune erreur. Le CSS a été exécuté sur le validateur CSS W3C et n'a renvoyé aucune erreur.
Au cours des tests d'utilisateurs, il a été noté que toutes les chansons de la base de données MusixMatch n'ont pas des paroles et donc une erreur personnalisée n'a pas été ajoutée pour ceux qui n'ont pas de clé de paroles_bodage dans le résultat.
Assets / js / spec.js a été créé et exécuté afin de vérifier les fonctionnalités de ResetPage (); Ce test a réussi. Afin de s'assurer que le script de test a été correct, la fonction a été modifiée pour inclure du texte dans le conteneur de résultats, à quel point le test a échoué.
Pendant les tests, un problème intéressant a été rencontré où aucune paroles n'était retournée pour toute chanson contenant des marques de devis doubles ou simples. En enquête, il est apparu que le problème était causé par la fonction essayant de passer un nom de chanson dans une nouvelle fonction (getlyric, renommée pendant ce processus à Retorlyric), mais lorsque des citations étaient présentes dans le nom de la chanson, elle lisait ceci comme la fin du paramètre et des erreurs car il n'y avait pas de parenthèses de clôture. Cela a été résolu par l'édition de getlyrics afin qu'il ait récupéré le nom de la chanson lui-même dans un appel séparé plutôt que de le passer à partir de la fonction précédente.
Chaque étape des tests a été refait après tout nouveau changement de fonctionnalité.
À tester:
(X = fonctionner comme prévu) (o = ne pas fonctionner comme prévu)
Ce qui suit est de tester si le code fonctionne comme prévu.
| Navigateur / test | Opéra | Incendier | Chrome | Bord | Safari |
|---|---|---|---|---|---|
| 1 | X | X | X | X | X |
| 2 | X | X | X | X | X |
| 3 | X | X | X | X | X |
| 4 | X | X | X | X | X |
| 5 | X | X | X | X | X |
| 6 | X | X | X | X | X |
| 7 | X | X | X | X | X |
| 8 | X | X | X | X | X |
| 9 | X | X | X | X | X |
| 10 | X | X | X | X | X |
| 11 | X | X | X | X | X |
| 12 | X | X | X | X | X |
| 13 | X | X | X | X | X |
| 14 | X | X | X | X | X |
| 15 | X | X | X | X | X |
| 16 | X | X | X | X | X |
| 17 | X | X | X | X | X |
Ce qui suit est de tester si l'affichage fonctionne comme prévu.
| Navigateur / test | Opéra | Incendier | Chrome | Bord | Safari |
|---|---|---|---|---|---|
| 1 | X | X | X | X | X |
| 2 | X | X | X | X | X |
| 3 | X | X | X | X | X |
| 4 | X | X | X | X | X |
| 6 | X | X | X | X | X |
| 7 | X | X | X | X | X |
| 8 | X | X | X | X | X |
| 9 | X | X | X | X | X |
| 11 | X | X | X | X | X |
| 12 | X | X | X | X | X |
| 14 | X | X | X | X | X |
| 15 | X | X | X | X | X |
| 17 | X | X | X | X | X |
Un problème a été noté sur Microsoft Edge où l'image d'arrière-plan ne s'affiche pas correctement. Cela était dû à la position de l'élément de script dans le code HTML. Une fois, il a été déplacé vers l'extrémité du corps plutôt que dans la tête, l'image d'arrière-plan s'affiche correctement.
Un autre problème a été trouvé sur iPhone où l'image d'arrière-plan ne restait pas fixe et ne faisait pas défiler avec la page, conduisant à la page `` s'épuiserait '' lorsqu'il faisait défiler une grande quantité de données renvoyées. La recherche a montré qu'il s'agit d'un problème connu avec iOS. Cela a été résolu en utilisant une requête multimédia pour définir l'arrière-plan pour répéter sur des écrans plus petits.
Utilisation d'outils de développeur Google Chrome pour tester comment chaque étape de l'application s'affiche à différentes largeurs d'écran.
X = affichage comme prévu
| Affichage de la largeur de l'écran / de la page | Galaxy S5 | Pixel 2 | Pixel 2xl | iPhone 5 / SE | iPhone 6/7/8 | iPhone 6/7/8 Plus | iPhone X | iPad | iPad Pro |
|---|---|---|---|---|---|---|---|---|---|
| 1 | X | X | X | X | X | X | X | X | X |
| 2 | X | X | X | X | X | X | X | X | X |
| 3 | X | X | X | X | X | X | X | X | X |
| 4 | X | X | X | X | X | X | X | X | X |
| 6 | X | X | X | X | X | X | X | X | X |
| 7 | X | X | X | X | X | X | X | X | X |
| 8 | X | X | X | X | X | X | X | X | X |
| 9 | X | X | X | X | X | X | X | X | X |
| 11 | X | X | X | X | X | X | X | X | X |
| 12 | X | X | X | X | X | X | X | X | X |
| 14 | X | X | X | X | X | X | X | X | X |
| 15 | X | X | X | X | X | X | X | X | X |
| 17 | X | X | X | X | X | X | X | X | X |
Ce projet a été construit dans Cloud9 et poussé vers GitHub où il a ensuite été publié sur les pages GitHub à https://hfolcot.github.io/lyrics-fider/
