Album-Suche und Speichern mit REST-API und DOM: Ein CPSC 1520 Tutorial

Einleitung: Von der Idee zur funktionierenden Album-App

Stell dir vor, du entwickelst eine App, mit der du Alben suchen und in einer persönlichen Sammlung speichern kannst – ähnlich wie Spotify-Playlists, aber mit deinem eigenen Backend. In diesem Tutorial zeigen wir dir, wie du die Kernfunktionen einer Album-Such- und Speicher-App umsetzt, wie sie in der CPSC 1520 Assignment 3 gefordert wird. Du lernst dabei den Umgang mit Arrays und Loops, Fetch Fundamentals, DOM APIs und Timern sowie NPM, Tools und ES Modules.

Die Beispiele sind auf dem Stand vom Mai 2026 – aktuell und praxisnah. Egal ob du deine Lieblingsalben von Taylor Swift oder die neuesten KI-generierten Musikempfehlungen speichern willst – dieses Tutorial gibt dir das Rüstzeug.

Projekt-Setup: Parcel, Bootstrap und das Backend

Bevor wir loslegen, musst du die Umgebung einrichten. Du benötigst zwei Terminal-Fenster: eines für das Backend (assignment-3-backend) und eines für das Frontend (assignment-3-starter). Installiere die Abhängigkeiten und starte den Backend-Server mit dem passenden npm-Script (siehe package.json).

Im Frontend installierst du Parcel und Bootstrap via npm. Deine package.json sollte Scripts wie "start": "parcel index.html" enthalten. Importiere Bootstrap und dein eigenes CSS in der main.js:

import 'bootstrap/dist/css/bootstrap.min.css';
import '../css/cover.css';

Vergiss nicht, node_modules und parcel-cache aus der Abgabe zu entfernen – sonst gibt es Punktabzug.

Teil 1: Tab-Navigation mit DOM-Manipulation

Die App hat zwei Tabs: „Search Albums“ und „My Albums“. Du wählst die entsprechenden DOM-Elemente mit getElementById aus und hängst einen Event-Listener an die Navigationsleiste. Im Event-Handler prüfst du den textContent des geklickten Links und zeigst den passenden Tab an, indem du die Klassen active und d-none hinzufügst oder entfernst.

Das ist ein typisches Muster für Single-Page-Applications (SPAs) – ähnlich wie bei modernen Web-Apps, die nahtlos zwischen Ansichten wechseln.

Teil 2: Album-Suche über die REST-API

Jetzt wird es spannend: Du erstellst eine Funktion in api/album.js, die mit fetch eine GET-Anfrage an das Backend sendet. Der Endpunkt ist beispielsweise http://localhost:3000/api/albums?search=Radiohead. Die Funktion gibt die JSON-Daten zurück.

Nutze entweder Promise-Syntax oder async/await. Exportiere die Funktion mit named export und importiere sie in main.js.

In dom/albumElements.js erstellst du eine Funktion, die ein Listenelement (z.B. <li>) mit Album-Informationen wie Titel, Künstler und Jahr generiert. Diese Funktion wird später im Event-Listener für das Suchformular aufgerufen.

Der Event-Listener verhindert das Standard-Submit, löscht vorherige Suchergebnisse und iteriert mit einer for-Schleife über die empfangenen Alben. Für jedes Album erzeugst du ein Listenelement und fügst es dem DOM hinzu.

Teil 3: Alben zu „My Albums“ hinzufügen

Jedes Suchergebnis enthält einen Button „Add to My Albums“. Wenn du darauf klickst, wird das Album aus der Suche entfernt und in der „My Albums“-Liste angezeigt. Duplikate sind erlaubt – wie bei einer echten Musik-Sammlung, wo du denselben Song mehrmals haben kannst.

Technisch gesehen entfernst du das <li>-Element aus dem Suchergebnis-Container und klonst es oder erstellst ein neues Element für den „My Albums“-Container. Der Button wird dabei nicht mitkopiert.

Bonus: Persistenz mit der REST-API (POST & GET)

Um die Alben auch nach einem Seiten-Reload zu behalten, musst du sie im Backend speichern. Dazu erstellst du in api.js einen POST-Endpunkt, der die Album-Daten in einer JSON-Datei (z.B. albums_app_db.json) ablegt. Beim Hinzufügen eines Albums sendest du eine POST-Anfrage mit den Daten.

Beim Laden der Seite holst du mit einer GET-Anfrage alle gespeicherten Alben und zeigst sie im „My Albums“-Tab an. So bleibt deine Sammlung erhalten – ähnlich wie bei einer Cloud-basierten Playlist.

Trend-Beispiel: Wie KI die Musiksuche revolutioniert

Im Mai 2026 sind KI-gestützte Musikempfehlungen allgegenwärtig. Stell dir vor, deine App könnte nicht nur nach Albumtiteln suchen, sondern per KI ähnliche Alben vorschlagen – ähnlich wie Spotify oder Apple Music. Mit den Grundlagen aus diesem Tutorial (Fetch, DOM, Arrays) kannst du später eine solche Funktion integrieren. Der Trend zu personalisierten Musik-Apps wächst rasant, und deine Programmierkenntnisse sind der Schlüssel.

Häufige Fehler und Tipps

• Backend nicht gestartet: Vergiss nicht, das Backend in einem separaten Terminal laufen zu lassen. Sonst bekommst du 404-Fehler.
• Falscher Import-Pfad: Achte auf die korrekte relative Pfadangabe bei den Imports (z.B. ./api/album.js).
• Event-Listener nicht entfernt: Bei dynamisch hinzugefügten Buttons musst du Event Delegation nutzen oder die Listener nach dem Entfernen der Elemente neu zuweisen.
• Parcel-Cache: Lösche den parcel-cache Ordner vor der Abgabe.

Fazit

Mit diesem Tutorial hast du die Grundlagen für eine voll funktionsfähige Album-Such- und Speicher-App gelernt. Du beherrschst jetzt den Umgang mit Arrays, Loops, Fetch, DOM-Manipulation und ES Modules – alles essentielle Fähigkeiten für moderne Webentwicklung. Ob du nun deine eigene Musik-App baust oder dich auf die CPSC 1520 Prüfung vorbereitest – dieses Wissen wird dir helfen.

Viel Erfolg bei deiner Assignment! Und denk dran: Übung macht den Meister – probiere verschiedene Suchbegriffe aus und erweitere die App um eigene Features.