Recherche Spotify
Objectif : créer une application de recherche de musique en utilisant jQuery, AJAX et l'API Spotify. Vous utiliserez le point de terminaison de recherche de Spotify pour rechercher des pistes (chansons).
Exigences minimales
- Votre application doit disposer d'un formulaire pour rechercher des pistes (chansons). Ce formulaire nécessite un champ de saisie pour le mot-clé de recherche.
- Lorsqu'un utilisateur soumet le formulaire, utilisez jQuery pour obtenir le mot-clé de recherche à partir de l'entrée du formulaire.
- Utilisez AJAX pour appeler le point de terminaison de recherche de Spotify avec le mot-clé de recherche du formulaire.
- En cas de succès de l'appel AJAX, affichez les résultats de la recherche sur la page. Vous devez inclure au moins le nom de la piste et le nom de l'artiste pour chaque résultat.
- Chaque fois que l'utilisateur soumet le formulaire, effacez tous les résultats de recherche précédents de la vue.
Idées bonus
En option, mettez-vous au défi d'aller plus loin dans le projet !
- Affichez la pochette d'album d'une piste à côté de chaque résultat de recherche dans la vue. Astuce : vous remarquerez que si vous essayez d'accéder à la pochette de l'album mais qu'aucune n'est disponible, votre application tombera en panne. Empêchez que cela ne se produise en vérifiant en premier si une illustration est disponible.
- Spotify nous donne un
preview_url pour chaque piste. Créez un bouton de lecture pour chaque piste dans votre vue qui ouvre l' preview_url dans un nouvel onglet (il commencera à jouer la chanson !). - Ce serait bien de faire savoir à l'utilisateur que quelque chose se passe dans les quelques millisecondes entre la soumission du formulaire et l'obtention des données sur la page. Affichez
loading.gif (fourni dans le répertoire images ) lorsque le formulaire est soumis et masquez-le lorsque vous récupérez les données de Spotify. - Gérez le cas où aucune donnée ne revient de Spotify. Vous souhaiterez faire savoir à l'utilisateur qu'il n'y a aucun résultat, plutôt que de simplement afficher une page vierge.
- Gérez le cas où l'utilisateur soumet la recherche avec un mot-clé vide. Vérifiez l'erreur dans la console lors de la soumission de ce formulaire vide ; Spotify considère cela comme une « mauvaise demande ! » Si l'utilisateur essaie de soumettre un formulaire vierge, ne effectuez pas de recherche et rappelez-lui plutôt de saisir un mot-clé.
Commencer
- Forkez ce dépôt et clonez-le sur votre ordinateur.
- En utilisant le jeton que vous avez obtenu en cours dans l'en-tête de votre requête AJAX, entraînez-vous à interroger le point de terminaison de recherche de Spotify à l'aide de Postman ou
curl avec quelques mots-clés de recherche différents. Vous souhaiterez définir type=track dans l'URL de votre demande. Examinez les données de réponse et déterminez comment accéder au nom de la piste et au nom de l'artiste pour une piste particulière (cela impliquera l'accès aux valeurs de JSON avec des objets et des tableaux imbriqués).
Note ! Votre token expire toutes les heures ! Oui, c'est super ennuyeux. Assurez-vous de mettre à jour votre jeton à l'aide de ce générateur de jetons pendant que vous travaillez. - Une fois que vous vous sentez à l'aise avec la structure des données de réponse, travaillez à utiliser AJAX pour effectuer l'appel API à Spotify lorsque l'utilisateur soumet le formulaire.
- Commencez par
console.log -ing les données de réponse. Une fois que cela fonctionne, accédez aux données que vous souhaitez afficher (nom de la piste et nom de l'artiste). - Une fois que vous savez comment accéder aux données à partir des résultats, utilisez jQuery pour les
append à la page. Astuce : vous souhaiterez utiliser Array#forEach pour parcourir toutes les pistes renvoyées par Spotify dans les données de réponse.
Soumission
- Lorsque vous apportez des modifications au code, validez et envoyez fréquemment vers votre fork GitHub.
- Une fois que vous avez terminé la mission et transféré votre travail sur GitHub, effectuez une pull request depuis votre fork vers le dépôt d'origine.
Ressources
- jQuery.ajax()
- Point de terminaison de recherche Spotify
