Verbessern Sie Ihre Gedankenlese-Musik-API: Hinzufügen von Benutzerkonten mit Stimmungsverlauf und intelligenten Präferenzen

Verwandeln Sie Ihren Playlist-Generator mit Emotionserkennung in einen personalisierten Musikbegleiter, der aus jeder Interaktion lernt. Dieses Folge-Tutorial fügt Benutzerauthentifizierung, Stimmungsverfolgungsanalyse und intelligentes Präferenzlernen hinzu, um wirklich personalisierte Musikerlebnisse zu schaffen.

Was wir heute entwickeln

Erinnern Sie sich an unsere Gedankenlese-Musik-API, die Emotionen erkennen und Playlists erstellen konnte? Heute machen wir sie persönlich. Wir fügen hinzu:

Benutzerauthentifizierung, die tatsächlich funktioniert (keine komplexen OAuth-Probleme)
Dashboard für Stimmungsverlauf mit ansprechenden Analysen
Intelligente Playlist-Einstellungen, die aus dem Benutzerverhalten lernen
Personalisierte Empfehlungen, die mit der Zeit besser werden
Datenpersistenz, damit Benutzer ihre musikalische Reise nie verlieren

Am Ende dieses Tutorials wird sich Ihre API daran erinnern, dass Sarah Indie-Rock liebt, wenn sie traurig ist, während Mike klassische Musik für konzentrierte Sitzungen bevorzugt.

Was Sie brauchen

Ihre fertige Mind-Reading Music API aus dem vorherigen Tutorial
30 Minuten konzentrierte Programmierzeit
MongoDB Atlas-Konto (kostenlose Stufe funktioniert perfekt)
Grundkenntnisse von Datenbanken (wir halten es einfach!)

Benutzerauthentifizierung einrichten (der einfache Weg)

Fügen wir zunächst die Pakete hinzu, die wir für die Benutzerverwaltung benötigen.

Gehen Sie in Ihrem Code-Editor zu Ihrem Terminal, geben Sie den folgenden Befehl ein oder fügen Sie ihn ein und drücken Sie die Eingabetaste:

npm install mongoose bcryptjs jsonwebtoken express-session connect-mongo

Schritt 1: Einrichten der Datenbankverbindung

Sobald Ihre Installation abgeschlossen ist, erstellen Sie eine neue Datei namens database.js und fügen Sie den folgenden Code hinzu:

const mongoose = require('mongoose'); const connectDB = async () => { try { console.log('🔗 Connecting to MongoDB...'); warte auf mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, }); console.log('✅ MongoDB erfolgreich verbunden!'); } catch (Fehler) { console.error('❌ MongoDB-Verbindung fehlgeschlagen:', error.message); process.exit(1); } }; module.exports = connectDB;

Und speichern Sie mit cmd + s, ctrl + s oder Datei und dann speichern.

Erstellen Sie Ihr MongoDB Atlas-Konto

Besuchen Sie: mongodb.com/cloud/atlas
Klicken Sie auf: „Erste Schritte“-Schaltfläche (normalerweise in der oberen rechten Ecke)

Anmeldeoptionen

Sie haben drei Möglichkeiten, ein Konto zu erstellen:

Option A: E-Mail-Anmeldung

Klicken Sie auf „Mit E-Mail anmelden“
Geben Sie Ihre E-Mail-Adresse ein
Erstellen Sie ein sicheres Passwort
Klicken Sie auf „Ihr Atlas-Konto erstellen“

Option B: Google-Anmeldung

Klicken Sie auf „Mit Google anmelden“
Wählen Sie Ihr Google-Konto
Erteilen Sie die erforderlichen Berechtigungen

Option C: GitHub Anmelden

Klicken Sie auf „Mit GitHub anmelden“
Autorisieren Sie MongoDB Atlas für den Zugriff auf Ihr GitHub-Konto

Bestätigen Sie Ihre E-Mail-Adresse

Prüfen Sie Ihren E-Mail-Posteingang
Klicken Sie auf den Bestätigungslink von MongoDB
Dadurch wird bestätigt, dass Ihr Konto echt ist

Erstellen Sie Ihren ersten Datenbankcluster

Wenn Ihr Dashboard nach der Anmeldung nicht angezeigt wird, müssen Sie möglicherweise oben rechts auf Ihren Namen klicken, um das folgende Dropdown-Menü zu öffnen, und dann auf Atlas klicken:

Sie sehen dann das Atlas-Dashboard. Zeit, Ihre Datenbank zu erstellen!

Wählen Sie Ihren Bereitstellungstyp

Klicken Sie in der linken Seitenleiste unter „Datenbank“ auf „Cluster“

MongoDB Atlas-Cluster in der Seitenleiste

Klicken Sie auf „Cluster erstellen“

Wählen Sie "Kostenlos"

Sie werden auf eine Seite zur Bereitstellung Ihres Clusters weitergeleitet und können den kostenlosen Plan auswählen.

Auswahl des Cloud-Anbieters: Sie sehen drei Anbieteroptionen:

AWS (Amazon Web Services) ⭐ Empfohlen
Google Cloud Platform
Microsoft Azure

Wählen Sie: AWS (es ist am beliebtesten und hat die meisten Regionen)

Regionsauswahl: Nachdem Sie AWS ausgewählt haben, wird ein Dropdown-Menü mit vielen Regionen angezeigt. Wählen Sie für eine bessere Leistung den nächstgelegenen Standort:

🇺🇸 Vereinigte Staaten:

us-east-1 (Nord-Virginia) – Ostküste
us-west-2 (Oregon) – Westküste
us-central-1 (Iowa) – Zentral

🇪🇺 Europa:

eu-west-1 (Irland) – Westeuropa
eu-central-1 (Frankfurt) – Mitteleuropa
eu-west-2 (London) – Vereinigtes Königreich

🌏 Asien-Pazifik:

ap-southeast-1 (Singapur) – Südostasien
ap-south-1 (Mumbai) – Indien
ap-northeast-1 (Tokio) – Japan

💡 Profi-Tipp: Wenn Sie sich nicht sicher sind, ist us-east-1 normalerweise die sicherste Wahl mit den meisten Funktionen.

Klicken Sie dann auf die Schaltfläche „Bereitstellung erstellen“

MongoDB-Schaltfläche „Bereitstellung erstellen“

Datenbankbenutzer erstellen

Schritt 3.1: Datenbankbenutzer hinzufügen

Der Bildschirm „Sicherheits-Schnellstart“ wird angezeigt
Authentifizierungsmethode: Lassen Sie „Benutzername und Passwort“ ausgewählt
Benutzername: Geben Sie einen Benutzernamen ein (z. B. mood-music-user)
Passwort:
- Option A: Klicken Sie auf „Sicheres Passwort automatisch generieren“ (empfohlen)
- Option B: Erstellen Sie Ihr eigenes sicheres Passwort (mindestens 8 Zeichen)
Kopieren Sie das Passwort sofort! Sie benötigen dies für Ihre Verbindungszeichenfolge

⚠️ Kopieren und speichern Sie Ihr Passwort sofort!

Klicken Sie auf: "Datenbankbenutzer erstellen"
Klicken Sie auf: "Verbindungsmethode auswählen"

Verbindungsmethode auswählen

Sie sehen mehrere Verbindungsoptionen:

Treiber 👈 Das ist, was wir für Node.js-Apps wollen
Compass (MongoDBs Desktop-GUI-Anwendung)
Shell (MongoDB-Befehlszeilenschnittstelle)
MongoDB für VS Code (VS Code-Erweiterung)
Atlas SQL (SQL-Schnittstelle für MongoDB)

Wählen Sie: „Treiber“ – dies gibt Ihnen die Verbindungszeichenfolge für Anwendungen wie Node.js

Konfigurieren Sie Ihre Treiberverbindung

Nachdem Sie „Treiber“ ausgewählt haben:

Treiber: Wählen Sie „Node.js“ aus der Dropdown-Liste
Version: Wählen Sie Ihre Node.js-Version oder belassen Sie die Standardeinstellung (funktioniert normalerweise einwandfrei)
Verbindungszeichenfolge: Die Verbindungszeichenfolge wird unten angezeigt.

Kopieren Sie Ihre Verbindungszeichenfolge.

Sie sehen dann etwa Folgendes:

mongodb+srv://<Benutzername>:<Passwort>@cluster0.abc123.mongodb.net/?retryWrites=true&w=majority

Wichtig: Dies ist eine Vorlage! Sie müssen:

Ersetzen Sie <username> durch Ihren Datenbankbenutzernamen
Ersetzen Sie <password> durch Ihr Datenbankpasswort
Fügen Sie Ihren Datenbanknamen nach .net/

Beispieltransformation

Vorher (Vorlage):

mongodb+srv://<username>:<password>@cluster0.abc123.mongodb.net/?retryWrites=true&w=majority

Nachher (einsatzbereit):

mongodb+srv://mood-music-user:MySecurePassword123@cluster0.abc123.mongodb.net/mood-music-db?retryWrites=true&w=majority

Hinweis:

<Benutzername> → mood-music-user
<Passwort> → MySecurePassword123
/mood-music-db als Datenbankname hinzugefügt

Klicken Sie auf 'Fertig'

Schritt 5: Fügen Sie Ihrem Projekt eine Verbindungszeichenfolge hinzu

Aktualisieren Sie Ihre .env-Datei

Öffnen Sie Ihre .env-Datei und fügen Sie hinzu:

MONGODB_URI=mongodb+srv://mood-music-user:MySecurePassword123@cluster0.abc123.mongodb.net/mood-music-db?retryWrites=true&w=majority JWT_SECRET=Ihr supergeheimer JWT-Schlüssel, hier lang und zufällig SESSION_SECRET=ein weiterer geheimer Schlüssel für Sitzungen, ebenfalls lang und zufällig

Generieren Sie sichere Geheimnisse

Für JWT_SECRET und SESSION_SECRET benötigen Sie zufällige Zeichenfolgen, die Ihre Konfigurationsdateien nicht beschädigen.

⚠️ Wichtig: Vermeiden Sie Sonderzeichen wie @, #, $, %, /, ? in Passwörtern, da diese Verbindungszeichenfolgen und JSON-Dateien beschädigen können.

Option A: Einfacher Online-Generator (empfohlen)

Besuchen Sie: JWTSECRETS
Einstellungen:
- Anzahl der Passwörter: 1
- Passwortlänge: 32
- ✅ Aktivieren Sie „Großbuchstaben (A-Z)“
- ✅ Aktivieren Sie „Kleinbuchstaben (a-z)“
- ✅ Aktivieren Sie „Ziffern (0-9)“
- ❌ Deaktivieren Sie „Satzzeichen“
Klicken Sie auf „Passwörter abrufen“

Option B: Verwenden Sie Ihre Browserkonsole (super einfach!)

Öffnen Sie eine beliebige Website (z. B. google.com)
Drücken Sie F12 (oder klicken Sie mit der rechten Maustaste auf → Untersuchen)
Klicken Sie auf die Registerkarte „Konsole“

Fügen Sie diesen Code ein und drücken Sie die Eingabetaste:

Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2)

Kopieren Sie das Ergebnis – es wird ungefähr so aussehen: k8m9x2n7p4q1w3e5r6t8y9u2i4o7p1a5s3d6f8g2h4j7k9l

Option C: Manuelle Methode (Wenn alles andere fehlschlägt)

Geben Sie einfach eine lange zufällige Zeichenfolge ein mit:

Buchstaben: A-Z, a-z
Zahlen: 0-9
Beispiel: MyApp2024SecretKey789RandomString456Auth

Finales .env-Beispiel

SPOTIFY_CLIENT_ID=Ihre_Spotify_Client-ID_hier SPOTIFY_CLIENT_SECRET=Ihr_Spotify_Client-Geheimnis_hier MONGODB_URI=mongodb+srv://mood-music-user:MySecurePassword123@cluster0.abc123.mongodb.net/mood-music-db?retryWrites=true&w=majority JWT_SECRET=A8f2K9mP3qR7sT1vW5yX8bC4eN6jL2oU9iH7gF3dS6aZ1mQ4wE8rT5yU2pI9oL SESSION_SECRET=B7gT3mK9pL2sF6vW1yX4eR8aC5qN9jM7oU3iH6dG2fS8aZ4mQ1wE5rT7yU9pI3oL PORT=3000

Wichtige Punkte:

✅ Keine Sonderzeichen in JWT_SECRET und SESSION_SECRET
✅ MongoDB-Passwort vermeidet URL-Breaking Zeichen
✅ Alle Geheimnisse sind lang und zufällig
✅ Sichere Verwendung in JSON-Dateien und Verbindungszeichenfolgen

Schritt 2: Benutzermodell mit Stimmungsverfolgung

Erstellen Sie einen Ordner mit dem Namen models und fügen Sie eine Datei mit dem Namen User.js in den Ordner ein. Fügen Sie dann den folgenden Code in die Datei ein und speichern Sie ihn:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); const moodEntrySchema = new mongoose.Schema({ text: String, detectedMood: String, confidence: Number, playlistGenerated: [{ trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } }], timestamp: { type: Date, default: Date.now } }); const userPreferencesSchema = new mongoose.Schema({ favoriteGenres: [String], preferredEnergyLevel: { type: Number, min: 0, max: 1 }, dislikedArtists: [String], moodMusicMapping: { happy: [String], sad: [String], energetic: [String], chill: [String], angry: [String], romantic: [String], nostalgic: [String] } }); const userSchema = new mongoose.Schema({ Benutzername: { Typ: String, erforderlich: true, eindeutig: true, trimmen: true, Mindestlänge: 3 }, E-Mail: { Typ: String, erforderlich: true, eindeutig: true, Kleinbuchstaben: true }, Passwort: { Typ: String, erforderlich: true, Mindestlänge: 6 }, Stimmungsverlauf: [Stimmungseintragsschema], Einstellungen: { Typ: Benutzereinstellungenschema, Standard: () => ({}) }, Statistiken: { Gesamtwiedergabelisten: { Typ: Zahl, Standard: 0 }, Lieblingszeit: String, häufigste Stimmung: String, Beitrittsdatum: { Typ: Datum, Standard: Date.now } } }, { Zeitstempel: true }); // Passwort vor dem Speichern hashen userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); this.password = await bcrypt.hash(this.password, 12); next(); }); // Passwörter vergleichen userSchema.methods.comparePassword = async function(password) { return bcrypt.compare(password, this.password); }; // Benutzerstatistiken berechnen userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(entry => entry.detectedMood); this.stats.totalPlaylists = this.moodHistory.length; // Häufigste Stimmung suchen const moodCounts = moods.reduce((acc, mood) => { acc[mood] = (acc[mood] || 0) + 1; return acc; }, {}); this.stats.mostCommonMood = Object.keys(moodCounts).reduce((a, b) => moodCounts[a] > moodCounts[b] ? a : b, 'neutral' ); // Lieblingstageszeit bestimmen const hours = this.moodHistory.map(entry => entry.timestamp.getHours()); const avgHour = hours.reduce((a, b) => a + b, 0) / hours.length; wenn (avgHour < 6) this.stats.favoriteTime = 'night'; sonst wenn (avgHour < 12) this.stats.favoriteTime = 'morning'; sonst wenn (avgHour < 18) this.stats.favoriteTime = 'afternoon'; sonst this.stats.favoriteTime = 'evening'; }; module.exports = mongoose.model('User', userSchema);

Schritt 3: Authentifizierungs-Middleware

Erstellen Sie einen Ordner mit dem Namen middleware und fügen Sie darin eine Datei mit dem Namen auth.js hinzu. Fügen Sie dann den folgenden Code zur Datei hinzu und speichern Sie sie:

const jwt = require('jsonwebtoken'); const User = require('../models/User'); const auth = async (req, res, next) => { try { const token = req.header('Authorization')?.replace('Bearer ', '') || req.session.token; if (!token) { return res.status(401).json({ error: 'No token provided' }); } const decoded = jwt.verify(token, process.env.JWT_SECRET); const user = await User.findById(decoded.userId); if (!user) { return res.status(401).json({ error: 'Benutzer nicht gefunden' }); } req.user = user; next(); } catch (error) { res.status(401).json({ error: 'Ungültiges Token' }); } }; module.exports = auth;

Benutzer-Dashboard mit schönen Analysen

Erstellen Sie einen neuen Ordner in Ihrem Projekt und nennen Sie ihn public. Fügen Sie dann eine Datei in diesen Ordner ein und nennen Sie sie index.html:

<!DOCTYPE html> <html> <head>  Gedankenlesende Musik-API - Persönliches Dashboard   * {Rand: 0; Abstand: 0; Boxgröße: Rahmenbox; } Text { Schriftfamilie: „Segoe UI“, System-UI, serifenlos; Hintergrund: linearer Farbverlauf (135 Grad, #667eea 0 %, #764ba2 100 %); Mindesthöhe: 100 vh; Farbe: #333; } .Dashboard { Maximalbreite: 1200 Pixel; Rand: 0 automatisch; Abstand: 20 Pixel; } .Header { Hintergrund: RGBA (255,255,255,0,95); Hintergrundfilter: Unschärfe (10 Pixel); Rahmenradius: 20 Pixel; Abstand: 30 Pixel; Rand unten: 30 Pixel; Textausrichtung: Mitte; Boxschatten: 0 8px 32px rgba(0,0,0,0,1); } .stats-grid { Anzeige: Raster; Rastervorlagenspalten: Wiederholung (automatische Anpassung, Minmax (250px, 1fr)); Abstand: 20px; Rand unten: 30px; } .stat-card { Hintergrund: rgba(255,255,255,0,9); Rahmenradius: 15px; Polsterung: 25px; Textausrichtung: Mitte; Boxschatten: 0 4px 15px rgba(0,0,0,0,1); } .mood-input-section { Hintergrund: rgba(255,255,255,0,95); Rahmenradius: 20px; Polsterung: 30px; Rand unten: 30px; } .Stimmungsverlauf { Hintergrund: rgba(255,255,255,0,95); Rahmenradius: 20px; Abstand: 30px; } .History-Element { Hintergrund: #f8f9fa; Rahmenradius: 10px; Abstand: 15px; Rand unten: 15px; Rahmen links: 4px durchgezogen #667eea; } .Anmeldeabschnitt, .Registerabschnitt { Hintergrund: rgba(255,255,255,0,95); Rahmenradius: 20px; Abstand: 30px; maximale Breite: 400px; Rand: 50px automatisch; } Eingabe, Textbereich, Schaltfläche { Breite: 100 %; Abstand: 12px; Rand: 10px 0; Rahmen: 2px durchgezogen #e1e5e9; Rahmenradius: 8px; Schriftgröße: 16px; } Schaltfläche { Hintergrund: linearer Farbverlauf (135 Grad, #667eea, #764ba2); Farbe: weiß; Rahmen: keiner; Cursor: Zeiger; Schriftstärke: 600; } Schaltfläche: Hover {Transformieren: TranslateY (-2px);} </style> </head> <body> <div class="dashboard"> <div id="authSection"> <div class="login-section"> <h2>🧠🎵 Willkommen zurück!</h2> <input type="text" id="loginUsername" placeholder="Benutzername"> <input type="password" id="loginPassword" placeholder="Passwort"> <button onclick="login()">Anmelden</button> <p><a href="#" onclick="showRegister()">Sie haben noch kein Konto? Registrieren</a></p> </div> <div id="registerSection" class="register-section" style="display:none;"> <h2>🎵 Erstellen Sie Ihr Musikprofil</h2> <input type="text" id="regUsername" placeholder="Benutzername"> <input type="email" id="regEmail" placeholder="E-Mail"> <input type="password" id="regPassword" placeholder="Passwort"> <button onclick="register()">Konto erstellen</button> <p><a href="#" onclick="showLogin()">Sie haben bereits ein Konto? Anmelden</a></p> </div> </div> <div id="dashboardSection" style="display:none;"> <div class="header"> <h1>🧠🎵 Ihr persönlicher Musik-Gedankenleser</h1> <p>Willkommen zurück, <span id="username"></span>! Bereit, Ihren perfekten Soundtrack zu entdecken?</p>     📊 Playlists gesamt
 0
  😊 Lieblingsstimmung
 -
 
  <h3>🕐 Beste Zeit</h3> <div id="bestTime" class="stat-text">-</div> </div> <div class="stat-card"> <h3>🎵 Top-Genre</h3> <div id="topGenre" class="stat-text">-</div> </div> </div> <div class="mood-input-section"> <h2>💭 Wie fühlst du dich gerade?</h2> <textarea id="moodText" placeholder="Beschreibe deine aktuelle Stimmung, was passiert oder wie du dich fühlen möchtest..."></textarea> <button onclick="generatePersonalizedPlaylist()">🎧 Meine perfekte Playlist erstellen</button> <div id="result" style="display:none;" class="result"></div> </div> <div class="mood-history"> <h2>📈 Deine Stimmungsreise</h2> <div id="historyContainer"></div> </div> </div> </div> <script src="/js/app.js"></script> </body> </html>

Erstellen Sie nun in Ihrem public-Ordner einen Ordner und nennen Sie ihn js. Erstellen Sie im js-Ordner eine app.js-Datei mit dem folgenden Code:

let authToken = localStorage.getItem('authToken'); let currentUser = null; if (authToken) { loadDashboard(); } function showLogin() { document.querySelector('.login-section').style.display = 'block'; document.getElementById('registerSection').style.display = 'none'; } function showRegister() { document.querySelector('.login-section').style.display = 'none'; document.getElementById('registerSection').style.display = 'block'; } asynchrone Funktion login() { const Benutzername = document.getElementById('loginUsername').value; const Passwort = document.getElementById('loginPassword').value; if (!Benutzername || !Passwort) { alert('Bitte füllen Sie alle Felder aus'); return; } try { const Antwort = warte auf fetch('/api/login', { Methode: 'POST', Header: { 'Content-Type': 'application/json' }, Body: JSON.stringify({ Benutzername, Passwort }) }); const Daten = warte auf response.json(); if (response.ok) { authToken = data.token; localStorage.setItem('authToken', authToken); loadDashboard(); } else { alert(data.error || 'Anmeldung fehlgeschlagen'); } } catch (Fehler) { console.error('Anmeldefehler:', Fehler); alert('Anmeldung fehlgeschlagen. Bitte versuchen Sie es erneut.'); } } async function register() { const username = document.getElementById('regUsername').value; const email = document.getElementById('regEmail').value; const password = document.getElementById('regPassword').value; if (!Benutzername || !E-Mail || !Passwort) { alert('Bitte füllen Sie alle Felder aus.'); return; } try { const response = await fetch('/api/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ Benutzername, E-Mail, Passwort }) }); const data = await response.json(); if (response.ok) { alert('Konto erfolgreich erstellt! Bitte anmelden.'); showLogin(); } sonst { alert(data.error || 'Registrierung fehlgeschlagen'); } } catch (Fehler) { console.error('Registrierungsfehler:', Fehler); alert('Registrierung fehlgeschlagen. Bitte versuchen Sie es erneut.'); } } asynchrone Funktion loadDashboard() { try { const response = await fetch('/api/profile', { headers: { 'Authorization': 'Bearer ' + authToken } }); if (response.ok) { currentUser = await response.json(); showDashboard(); updateStats(); loadMoodHistory(); } sonst { logout(); } } catch (Fehler) { console.error('Dashboard-Ladefehler:', Fehler); logout(); } } Funktion showDashboard() { document.getElementById('authSection').style.display = 'none'; document.getElementById('dashboardSection').style.display = 'block'; document.getElementById('username').textContent = currentUser.username; } Funktion updateStats() { document.getElementById('totalPlaylists').textContent = currentUser.stats.totalPlaylists || 0; document.getElementById('favoriteMood').textContent = currentUser.stats.mostCommonMood || '-'; document.getElementById('bestTime').textContent = currentUser.stats.favoriteTime || '-'; document.getElementById('topGenre').textContent = (currentUser.preferences.favoriteGenres && currentUser.preferences.favoriteGenres[0]) || '-'; } function loadMoodHistory() { const historyContainer = document.getElementById('historyContainer'); if (!currentUser.moodHistory || currentUser.moodHistory.length === 0) { historyContainer.innerHTML = '<p>Noch kein Stimmungsverlauf. Erstellen Sie Ihre erste Playlist!</p>'; return; } const recentHistory = currentUser.moodHistory.slice(-5).reverse(); historyContainer.innerHTML = recentHistory.map(entry => `<div class="history-item"> <strong>${entry.detectedMood}</strong> - ${new Date(entry.timestamp).toLocaleDateString()} <p>${entry.text}</p> <small>${entry.playlistGenerated.length} generierte Titel</small> </div>` ).join(''); } async function generatePersonalizedPlaylist() { const moodText = document.getElementById('moodText').value; if (!moodText.trim()) { alert('Bitte beschreiben Sie, wie Sie sich fühlen!'); return; } try { const response = await fetch('/api/personalized-playlist', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken }, body: JSON.stringify({ text: moodText }) }); const data = await response.json(); if (response.ok) { displayPersonalizedResults(data); loadDashboard(); } else { alert(data.error || 'Playlist konnte nicht generiert werden.'); } } catch (error) { console.error('Fehler beim Generieren der Playlist:', error); alert('Playlist konnte nicht generiert werden. Bitte versuchen Sie es erneut.'); } } function displayPersonalizedResults(data) { const resultDiv = document.getElementById('result'); resultDiv.style.display = 'block'; const html = ` <h3>Erkannte Stimmung: ${data.moodAnalysis.mood} (Konfidenz: ${data.moodAnalysis.confidence}/10)</h3> <p>${data.personalizedMessage || 'Hier ist Ihre Playlist!'}</p> <div class="playlist"> ${data.playlist.map(track => ` <div style="display: flex; align-items: center; margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 8px;"> ${track.album_image ? `<img src="${track.album_image}" alt="Album" style="width:50px;height:50px;border-radius:8px;margin-right:15px;">` : ''} <div style="flex: 1;"> <strong>${track.name}</strong><br> <span style="color: #666;">${track.artist}</span> </div> <div> <button onclick="likeTrack('${track.id}', true)" style="width:auto;padding:5px 10px;margin:0 5px;">👍</button> <button onclick="likeTrack('${track.id}', false)" style="width:auto;padding:5px 10px;margin:0 5px;">👎</button> </div> </div> `).join('')} </div> `; resultDiv.innerHTML = html; } async function likeTrack(trackId, liked) { try { await fetch('/api/track-feedback', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken }, body: JSON.stringify({ trackId: trackId, liked: liked }) }); alert(liked ? 'Danke! Wir werden mehr davon empfehlen.' : 'Verstanden! Wir werden ähnliche Tracks vermeiden.'); } catch (error) { console.error('Feedback-Fehler:', error); } } function logout() { localStorage.removeItem('authToken'); authToken = null; currentUser = null; document.getElementById('authSection').style.display = 'block'; document.getElementById('dashboardSection').style.display = 'none'; showLogin(); }

Ersetzen Sie Ihre server.js-Datei

Ersetzen Sie den Code Ihrer server.js-Datei durch Folgendes:

require('dotenv').config(); const express = require('express'); const mongoose = require('mongoose'); const jwt = require('jsonwebtoken'); const auth = require('./middleware/auth'); const User = require('./models/User'); const moodAnalyzer = require('./moodAnalyzer'); const PlaylistGenerator = require('./playlistGenerator'); // Mit MongoDB verbinden const connectDB = async () => { try { console.log('🔗 Verbindung zu MongoDB wird hergestellt...'); warte auf mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, }); console.log('✅ MongoDB erfolgreich verbunden!'); } catch (Fehler) { console.error('❌ MongoDB-Verbindung fehlgeschlagen:', error.message); process.exit(1); } }; connectDB(); const app = express(); const PORT = process.env.PORT || 3000; const playlistGen = new PlaylistGenerator(); app.use(express.json()); app.use(express.static('public')); // Hauptseite bereitstellen app.get('/', (req, res) => { res.sendFile(__dirname + '/public/index.html'); }); // Benutzerregistrierung app.post('/api/register', async (req, res) => { try { const { Benutzername, E-Mail, Passwort } = req.body; if (!Benutzername || !E-Mail || !Passwort) { return res.status(400).json({ Fehler: 'Alle Felder sind Pflichtfelder' }); } if (password.length < 6) { return res.status(400).json({ Fehler: 'Das Passwort muss mindestens 6 Zeichen lang sein' }); } const existingUser = await User.findOne({ $or: {[ E-Mail }, { Benutzername }] }); if (existingUser) { return res.status(400).json({ Fehler: 'Benutzername oder E-Mail existiert bereits' }); } const user = new User({ Benutzername, E-Mail, Passwort }); await user.save(); res.status(201).json({ Nachricht: „Benutzer erfolgreich erstellt“ }); } catch (Fehler) { console.error(„Registrierungsfehler:“, Fehler); res.status(500).json({ Fehler: „Registrierung fehlgeschlagen“ }); } }); // Benutzeranmeldung app.post('/api/login', async (req, res) => { try { const { Benutzername, Passwort } = req.body; const user = await User.findOne({ $or: {[ Benutzername }, { E-Mail: Benutzername }] }); if (!user || !(await user.comparePassword(Passwort))) { return res.status(401).json({ Fehler: 'Ungültige Anmeldeinformationen' }); } const token = jwt.sign( { Benutzer-ID: Benutzer-ID }, process.env.JWT_SECRET, { expiresIn: '7d' } ); res.json({ Token, Benutzer: { Benutzername: Benutzer.Benutzername, E-Mail: Benutzer.E-Mail } }); } catch (Fehler) { console.error('Anmeldefehler:', Fehler); res.status(500).json({ Fehler: 'Anmeldung fehlgeschlagen' }); } }); // Benutzerprofil abrufen app.get('/api/profile', auth, async (req, res) => { try { req.user.updateStats(); await req.user.save(); res.json(req.user); } catch (error) { res.status(500).json({ error: 'Profil konnte nicht geladen werden' }); } }); // Personalisierte Playlist-Generierung app.post('/api/personalized-playlist', auth, async (req, res) => { try { const { text, playlistSize = 15 } = req.body; if (!text) { return res.status(400).json({ error: 'Bitte sag mir, wie du dich fühlst!' }); } const moodAnalysis = moodAnalyzer.analyzeMood(text); const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // Im Benutzerverlauf speichern req.user.moodHistory.push({ text, detectedMood: moodAnalysis.mood, confidence: moodAnalysis.confidence, playlistGenerated: playlist.map(track => ({ trackName: track.name, artist: track.artist, spotifyId: track.id })) }); req.user.updateStats(); await req.user.save(); res.json({ moodAnalysis, playlist, personalizedMessage: `Basierend auf Ihrem Verlauf habe ich diese Playlist speziell auf Ihre ${moodAnalysis.mood} Stimmung zugeschnitten!` }); } catch (error) { console.error('Fehler bei personalisierter Playlist:', error); res.status(500).json({ error: 'Personalisierte Playlist konnte nicht erstellt werden. Bitte versuchen Sie es erneut.' }); } }); // Feedback verfolgen app.post('/api/track-feedback', auth, async (req, res) => { try { const { trackId, liked } = req.body; res.json({ message: 'Feedback erhalten! Wir werden zukünftige Empfehlungen verbessern.' }); } catch (error) { console.error('Feedback-Fehler:', error); res.status(500).json({ error: 'Feedback konnte nicht verarbeitet werden' }); } }); app.listen(PORT, () => { console.log(`🚀 Gedankenlesende Musik-API läuft auf http://localhost:${PORT}`); console.log('🧠 Bereit, Stimmungen zu analysieren und Wiedergabelisten zu erstellen!'); });

Was Sie jetzt tun können sollten

1. Anonyme Benutzer (Originalfunktionalität)

Besuchen Sie Ihre Website, ohne sich anzumelden
Erstellen Sie Wiedergabelisten mithilfe Ihrer vorhandenen Stimmungsanalyse
Erhalten Sie Musikempfehlungen basierend auf Emotionen

2. Registrierte Benutzer (Neue Funktionen)

Konto erstellen und anmelden
Personalisierte Playlists erstellen, die mit der Zeit besser werden
Stimmungsverlauf und persönliche Analysen anzeigen
Titel liken/disliken, um die KI zu trainieren
Statistiken wie Lieblingsstimmung, Gesamtzahl der Playlists usw. anzeigen

Schritt-für-Schritt-Testanleitung

Test 1: Serverstarts prüfen

node server.js

Sie sollten Folgendes sehen:

🔑 Spotify-Authentifizierung wird versucht... 🎵 Spotify erfolgreich verbunden! 🔗 MongoDB wird verbunden... ✅ MongoDB erfolgreich verbunden! 🚀 Gedankenlesende Musik-API läuft auf http://localhost:3000 🧠 Bereit, Stimmungen zu analysieren und Wiedergabelisten zu erstellen!

Test 2: Besuchen Sie Ihre Website

Gehen Sie zu: http://localhost:3000

Was Sie sehen sollten:

Ein Anmeldeformular, in dem Sie nach Benutzername/Passwort gefragt werden
Ein Link „Sie haben noch kein Konto? Registrieren“

Test 3: Erstellen Sie Ihr erstes Konto

Klicken Sie auf: „Sie haben noch kein Konto? Registrieren“
Füllen Sie aus:
- Benutzername: testuser
- E-Mail: test@example.com
- Passwort: password123
Klicken Sie auf: „Konto erstellen“
Erwartetes Ergebnis: „Konto erfolgreich erstellt! Bitte anmelden.“

Test 4: Melden Sie sich bei Ihrem Dashboard an

Verwenden Sie die Anmeldeinformationen, die Sie gerade erstellt haben
Klicken Sie auf: „Anmelden“
Sie sollten Folgendes sehen:
- Willkommensnachricht mit Ihrem Benutzernamen
- Statistikkarten zeigen 0 Wiedergabelisten, noch keine Lieblingsstimmung
- Textbereich mit der Frage „Wie fühlen Sie sich gerade?“

Test 5: Erstellen Sie Ihre erste personalisierte Wiedergabeliste

Geben Sie etwas ein wie: „Ich bin total aufgeregt wegen meines neuen Projekts!“
Klicken Sie auf: „Meine perfekte Playlist erstellen“
Sie sollten Folgendes sehen:
- Erkannte Stimmung (wahrscheinlich „energiegeladen“ oder „fröhlich“)
- Liste der Songs mit Albumcover
- Vorschau der Audioplayer (falls verfügbar)
- Daumen hoch/runter-Schaltflächen für jeden Song

Test 6: Testen Sie das Lernsystem

Klicken Sie bei Songs, die Ihnen gefallen, auf „Daumen hoch“ 👍
Klicken Sie bei Songs, die Ihnen nicht gefallen, auf „Daumen runter“ 👎
Erwartet: Warnmeldungen mit dem Text „Danke! Wir empfehlen Ihnen weitere Songs dieser Art“

Test 7: Überprüfen Sie Ihr Statistik-Update

Aktualisieren Sie die Seite oder erstellen Sie eine andere Playlist.
Ihre Statistiken sollten jetzt Folgendes anzeigen:
- Gesamtzahl der Playlists: 1 (oder mehr)
- Lieblingsstimmung: welche Stimmung auch immer erkannt wurde
- Andere Statistiken sollten nun ausgefüllt werden

Testen verschiedener Szenarien

Versuchen Sie verschiedene Stimmungen:

„Ich habe gerade mit meiner Freundin Schluss gemacht und es regnet“ (sollte erkennen: traurig)
„Ich bin heiß auf mein Training!“ (sollte erkennen: energisch)
„Möchte einfach nur chillen und in Ruhe lernen“ (sollte erkennen: chillen)
„Fühl mich romantisch an diesem Date-Abend“ (sollte erkennen: romantisch)

Test-Randfälle:

„“ (leer – sollte einen Fehler anzeigen)
„asdf zufälliger Text“ (sollte standardmäßig neutral/entspannt sein)
„Ich bin EXTREM aufgeregt!!!“ (sollte höhere Zuverlässigkeit erkennen)

Häufige Probleme und schnelle Lösungen

❌ „MongoDB-Verbindung fehlgeschlagen“

Überprüfen Sie: Ist Ihre .env-Datei richtig mit der MongoDB-Verbindungszeichenfolge eingerichtet?

# Führen Sie dies aus, um Ihre Datenbankverbindung zu testen: node -e „require(‚dotenv‘).config(); console.log(‚MONGODB_URI:‘, process.env.MONGODB_URI ? ‚Set ✅‘ : ‚Missing ❌‘);“

❌ "Spotify-Verbindung fehlgeschlagen"

Überprüfen: Befinden sich Ihre Spotify-API-Schlüssel in der Datei .env?

# Führen Sie dies aus, um die Spotify-Anmeldeinformationen zu überprüfen: node -e "require('dotenv').config(); console.log('Spotify-Client-ID:', process.env.SPOTIFY_CLIENT_ID ? 'Set ✅' : 'Missing ❌');"

❌ Anmelden/Registrieren funktioniert nicht

Überprüfen Sie: Sehen Sie Fehlermeldungen in der Browserkonsole?

Drücken Sie F12 → Registerkarte „Konsole“
Achten Sie auf rote Fehlermeldungen

❌ Seite zeigt alte Oberfläche

Lösung: Aktualisieren Sie die Seite schnell

Drücken Sie Strg+Umschalt+R (Windows/Linux)
Drücken Sie Cmd+Umschalt+R (Mac)

Was sollte funktionieren vs. was noch grundlegend ist

✅ Sollte jetzt funktionieren:

Benutzerregistrierung und -anmeldung
Grundlegende Stimmungserkennung und Playlist-Generierung
Stimmungsverlauf in Datenbank speichern
Einfaches „Gefällt mir“/„Gefällt mir nicht“-Feedback
Statistikverfolgung (Gesamtanzahl der Playlists, Lieblingsstimmung)

🚧 Immer noch einfach (erweiterte Funktionen später):

Komplexes maschinelles Lernen aus Benutzerfeedback
Soziale Funktionen und Teilen von Playlists
Erweiterte Analysen und Stimmungsmuster
Oberfläche der mobilen App

Nächste Schritte nach dem Testen

Sobald alles funktioniert:

Mit verschiedenen Benutzern ausprobieren – mehrere Konten erstellen, um zu sehen, wie sich die Personalisierung unterscheidet
Mehrere Playlists erstellen – beobachten, wie sich Ihre Statistiken und Vorlieben entwickeln
Feedback zu Titeln geben – sehen, wie das System Ihren Geschmack lernt
Überprüfen Sie Ihr MongoDB Atlas-Dashboard – Sie sollten sehen, wie Daten gespeichert werden

Fazit

Sie haben gerade etwas Bemerkenswertes geschaffen – eine KI, die nicht nur menschliche Emotionen versteht, sondern auch lernt und sich mit der Zeit an individuelle Vorlieben anpasst. Ihre Mind-Reading Music API verfügt nun über ein Gedächtnis, eine Persönlichkeit und die Fähigkeit, mit ihren Nutzern zu wachsen.

Die Kombination aus Stimmungserkennung, Nutzerlernen und personalisierten Empfehlungen schafft ein Erlebnis, das mit jeder Interaktion magischer wird. Die Reise jedes Nutzers wird einzigartig und schafft einen persönlichen Soundtrack zu seinem Gefühlsleben.

Ihre API merkt sich nun jede Stimmung, lernt aus jeder Interaktion und entwickelt ein umfassendes Verständnis der musikalischen Vorlieben jedes Nutzers. Dies ist die Grundlage für wirklich personalisierte KI-Erlebnisse.

Wie geht es weiter?

Bereit, noch einen Schritt weiterzugehen? Hier sind einige spannende Richtungen:

Erweiterte Analysen: Fügen Sie Stimmungsmustererkennung und prädiktive Empfehlungen hinzu
Soziale Funktionen: Lassen Sie Benutzer Playlists teilen und den Musikgeschmack von Freunden entdecken
Mobile App: Erstellen Sie React Native- oder Flutter-Apps für iOS/Android
Sprachintegration: Fügen Sie Sprache-zu-Text für freihändige Stimmungseingabe hinzu
Maschinelles Lernen: Implementieren Sie kollaboratives Filtern für noch bessere Empfehlungen
Bereitstellung: Stellen Sie mit den richtigen Umgebungsvariablen auf AWS/Vercel bereit

Experimentieren und entwickeln Sie weiter – die Zukunft personalisierter KI-Erlebnisse liegt in Ihren Händen!

Bereit für die nächste Herausforderung? Bleiben Sie dran für unser kommendes Tutorial zum Hinzufügen sozialer Funktionen und kollaborativem Filtern, um ein Musikentdeckungsnetzwerk zu erstellen, das Menschen durch gemeinsame emotionale Erfahrungen.