Spotify-Suche
Ziel: Erstellen Sie eine Musiksuch-App mit jQuery, AJAX und der Spotify-API. Sie verwenden den Suchendpunkt von Spotify, um nach Titeln (Songs) zu suchen.
Mindestanforderungen
- Ihre App muss über ein Formular zur Suche nach Titeln (Songs) verfügen. Dieses Formular benötigt ein Eingabefeld für den Suchbegriff.
- Wenn ein Benutzer das Formular absendet, verwenden Sie jQuery, um das Suchwort aus der Formulareingabe abzurufen.
- Verwenden Sie AJAX, um den Suchendpunkt von Spotify mit dem Suchschlüsselwort aus dem Formular aufzurufen.
- Bei Erfolg des AJAX-Aufrufs werden die Suchergebnisse auf der Seite dargestellt. Sie sollten für jedes Ergebnis mindestens den Titelnamen und den Künstlernamen angeben.
- Löschen Sie jedes Mal, wenn der Benutzer das Formular absendet, alle vorherigen Suchergebnisse aus der Ansicht.
Bonus-Ideen
Fordern Sie sich optional selbst heraus, das Projekt weiter voranzutreiben!
- Zeigen Sie das Albumcover eines Titels neben jedem Suchergebnis in der Ansicht an. Hinweis: Sie werden feststellen, dass Ihre App kaputt geht, wenn Sie versuchen, auf das Albumcover zuzugreifen, aber keines verfügbar ist. Um dies zu verhindern, prüfen Sie zunächst, ob Kunstwerke verfügbar sind.
- Spotify gibt uns für jeden Titel eine
preview_url
. Erstellen Sie für jeden Titel in Ihrer Ansicht eine Wiedergabeschaltfläche, die die preview_url
in einem neuen Tab öffnet (der Song wird abgespielt!). - Es wäre schön, den Benutzer wissen zu lassen, dass in den wenigen Millisekunden zwischen dem Absenden des Formulars und dem Abrufen der Daten auf der Seite etwas passiert. Zeigen Sie
loading.gif
(im images
bereitgestellt) an, wenn das Formular gesendet wird, und blenden Sie es aus, wenn Sie Daten von Spotify zurückerhalten. - Behandeln Sie den Fall, dass keine Daten von Spotify zurückkommen. Sie möchten den Benutzer darüber informieren, dass keine Ergebnisse vorliegen, anstatt nur eine leere Seite anzuzeigen.
- Behandeln Sie den Fall, dass der Benutzer die Suche mit einem leeren Schlüsselwort sendet. Überprüfen Sie den Fehler in der Konsole, wenn Sie dieses leere Formular absenden. Spotify hält dies für eine „schlechte Anfrage“! Wenn der Benutzer versucht, ein leeres Formular einzureichen, führen Sie keine Suche durch und erinnern Sie ihn stattdessen daran, ein Schlüsselwort einzugeben.
Erste Schritte
- Forken Sie dieses Repo und klonen Sie es auf Ihrem Computer.
- Üben Sie mithilfe des Tokens, den Sie im Unterricht im Header Ihrer AJAX-Anfrage erhalten haben, die Abfrage des Spotify-Suchendpunkts mithilfe von Postman oder
curl
mit einigen verschiedenen Suchschlüsselwörtern. Sie sollten type=track
in Ihrer Anfrage-URL festlegen. Schauen Sie sich die Antwortdaten an und finden Sie heraus, wie Sie auf den Titelnamen und den Künstlernamen für einen bestimmten Titel zugreifen würden (dazu gehört der Zugriff auf Werte aus JSON mit verschachtelten Objekten und Arrays).
Notiz ! Ihr Token läuft jede Stunde ab! Ja, das ist super nervig. Stellen Sie sicher, dass Sie Ihr Token während der Arbeit mit diesem Token-Generator aktualisieren. - Sobald Sie sich mit der Struktur der Antwortdaten vertraut gemacht haben, arbeiten Sie an der Verwendung von AJAX, um den API-Aufruf an Spotify durchzuführen, wenn der Benutzer das Formular absendet.
- Beginnen Sie mit
console.log
-ing der Antwortdaten. Sobald dies funktioniert, greifen Sie auf die Daten zu, die Sie anzeigen möchten (Titelname und Künstlername). - Wenn Sie wissen, wie Sie auf die Daten aus den Ergebnissen zugreifen, können Sie sie mit jQuery an die Seite
append
. Hinweis: Sie sollten Array#forEach verwenden, um alle Titel zu durchlaufen, die Spotify in den Antwortdaten zurückgibt.
Vorlage
- Wenn Sie Codeänderungen vornehmen, führen Sie häufig einen Commit und Push auf Ihren GitHub-Fork durch.
- Sobald Sie die Aufgabe abgeschlossen und Ihre Arbeit auf GitHub übertragen haben, stellen Sie eine Pull-Anfrage von Ihrem Fork zum ursprünglichen Repo.
Ressourcen
- jQuery.ajax()
- Spotify-Suchendpunkt