Verbeter je API voor gedachtenlezende muziek: voeg gebruikersaccounts toe met stemmingsgeschiedenis en slimme voorkeuren

Transformeer je emotiedetectie-afspeellijstgenerator tot een gepersonaliseerde muziekbegeleider die leert van elke interactie. Deze vervolgtutorial voegt gebruikersauthenticatie, stemmingsanalyse en intelligent voorkeursleren toe om echt gepersonaliseerde muziekervaringen te creëren.

Waar we vandaag aan werken

Herinner je je onze API voor gedachtenlezende muziek nog die emoties kon detecteren en afspeellijsten kon genereren? Vandaag maken we hem persoonlijker. We voegen toe:

Gebruikersauthenticatie die echt werkt (geen ingewikkelde OAuth-problemen)
Dashboard voor stemmingsgeschiedenis met prachtige analyses
Slimme afspeellijstvoorkeuren die leren van gebruikersgedrag
Gepersonaliseerde aanbevelingen die in de loop van de tijd beter worden
Gegevenspersistentie zodat gebruikers hun muzikale reis nooit kwijtraken

Aan het einde van deze tutorial zal je API onthouden dat Sarah van indierock houdt als ze verdrietig is, terwijl Mike de voorkeur geeft aan klassieke muziek voor focussessies.

Wat je nodig hebt

Je voltooide API voor gedachtenlezende muziek uit de vorige tutorial
30 minuten geconcentreerd coderen tijd
MongoDB Atlas-account (gratis versie werkt perfect)
Basiskennis van databases (we houden het simpel!)

Gebruikersauthenticatie instellen (de eenvoudige manier)

Laten we eerst de pakketten toevoegen die we nodig hebben voor gebruikersbeheer.

Ga naar je terminal in je code-editor, typ of plak de volgende opdracht en druk op enter:

npm install mongoose bcryptjs jsonwebtoken express-session connect-mongo

Stap 1: Databaseverbinding instellen

Zodra de installatie is voltooid, maak je een nieuw bestand met de naam database.js en voeg je de volgende code toe:

const mongoose = require('mongoose'); const connectDB = async () => { try { console.log('🔗 Verbinding maken met MongoDB...'); wacht op mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, }); console.log('✅ MongoDB succesvol verbonden!'); } catch (error) { console.error('❌ MongoDB-verbinding mislukt:', error.message); process.exit(1); } }; module.exports = connectDB;

En sla op met cmd + s, ctrl + s of bestand en sla op.

Maak uw MongoDB Atlas-account aan

Ga naar: mongodb.com/cloud/atlas
Klik op: de knop "Aan de slag" (meestal in de rechterbovenhoek)

Aanmeldopties

Je hebt drie manieren om een account aan te maken:

Optie A: Aanmelden via e-mail

Klik op 'Aanmelden via e-mail'
Voer je e-mailadres in
Maak een sterk wachtwoord
Klik op 'Maak je Atlas-account aan'

Optie B: Aanmelden via Google

Klik op 'Aanmelden via Google'
Kies je Google-account
Verleen de benodigde rechten

Optie C: GitHub Aanmelden

Klik op "Aanmelden met GitHub"
Autoriseer MongoDB Atlas om toegang te krijgen tot uw GitHub-account

Verifieer uw e-mailadres

Controleer uw e-mailinbox
Klik op de verificatielink van MongoDB
Dit bevestigt dat uw account echt is

Maak uw eerste databasecluster

Als u uw dashboard niet ziet nadat u bent ingelogd, moet u mogelijk op uw naam in de rechterbovenhoek klikken om de volgende vervolgkeuzelijst te openen en op Atlas klikken:

Vervolgens ziet u het Atlas-dashboard. Tijd om uw database te maken!

Kies uw implementatietype

Klik op "Clusters" onder "Database" in de linkerzijbalk

Klik op "Een cluster bouwen"

Kies "Gratis"

U wordt doorgestuurd naar een pagina om uw cluster te implementeren en u kunt het gratis abonnement selecteren.

Selectie van cloudprovider: U ziet drie provideropties:

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

Kies: AWS (de populairste en met de meeste regio's)

Regioselectie: Nadat u AWS hebt geselecteerd, ziet u een vervolgkeuzelijst met veel regio's. Kies degene die het dichtst bij uw locatie ligt voor betere prestaties:

🇺🇸 Verenigde Staten:

us-east-1 (N. Virginia) - Oostkust
us-west-2 (Oregon) - Westkust
us-central-1 (Iowa) - Centraal

🇪🇺 Europa:

eu-west-1 (Ierland) - West-Europa
eu-central-1 (Frankfurt) - Centraal-Europa
eu-west-2 (Londen) - VK

🌏 Azië-Pacific:

ap-southeast-1 (Singapore) - Zuidoost-Azië
ap-south-1 (Mumbai) - India
ap-northeast-1 (Tokio) - Japan

💡 Pro-tip: Als u het niet zeker weet, is us-east-1 meestal de veiligste keuze met de meeste functies.

Klik vervolgens op de knop "Implementatie maken"

Databasegebruiker aanmaken

Stap 3.1: Databasegebruiker toevoegen

U ziet het scherm "Snelstartgids voor beveiliging"
Authenticatiemethode: Houd "Gebruikersnaam en wachtwoord" geselecteerd
Gebruikersnaam: Voer een gebruikersnaam in (bijv. mood-music-user)
Wachtwoord:
- Optie A: Klik op "Secure Password Autogenerate" (veilig wachtwoord automatisch genereren)
- Optie B: Maak uw eigen sterke wachtwoord aan (minimaal 8 tekens)
Kopieer het wachtwoord direct! Je hebt dit nodig voor je verbindingsreeks

MongoDB database gebruikersformulier aanmaken

⚠️ Kopieer en bewaar je wachtwoord onmiddellijk!

Klik op: "Databasegebruiker maken"
Klik op: "Kies een verbindingsmethode"

Kies een verbindingsmethode

U ziet verschillende verbindingsopties:

Stuurprogramma's 👈 Dit is wat we willen voor Node.js-apps
Compass (MongoDB's desktop GUI-applicatie)
Shell (MongoDB command line interface)
MongoDB voor VS Code (VS Code-extensie)
Atlas SQL (SQL-interface voor MongoDB)

Selecteer: "Stuurprogramma's" - dit geeft u de verbindingsreeks voor applicaties zoals Node.js

Uw driververbinding configureren

Na het selecteren van "Drivers":

Driver: Selecteer "Node.js" in de vervolgkeuzelijst
Versie: Selecteer uw Node.js-versie of laat de standaardversie staan (werkt meestal prima)
Verbindingsreeks: Hieronder ziet u de verbindingsreeks.

Kopieer uw verbindingsreeks.

U ziet dan iets als dit:

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

Belangrijk: Dit is een sjabloon! U moet het volgende doen:

Vervang <gebruikersnaam> door de gebruikersnaam van uw database
Vervang <wachtwoord> door het wachtwoord van uw database
Voeg de naam van uw database toe na .net/

Voorbeeldtransformatie

Voor (sjabloon):

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

Na (klaar voor gebruik):

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

Let op:

<gebruikersnaam> → mood-music-user
<wachtwoord> → MySecurePassword123
/mood-music-db toegevoegd als databasenaam

Klik op 'Gereed'

Stap 5: Verbindingsreeks toevoegen aan uw project

Uw .env-bestand bijwerken

Open uw .env-bestand en voeg het volgende toe:

MONGODB_URI=mongodb+srv://mood-music-user:MySecurePassword123@cluster0.abc123.mongodb.net/mood-music-db?retryWrites=true&w=majority JWT_SECRET=your-super-secret-jwt-key-here-make-it-long-and-random SESSION_SECRET=another-secret-key-for-sessions-also-long-and-random

Sterke geheimen genereren

Voor JWT_SECRET en SESSION_SECRET hebt u willekeurige tekenreeksen nodig die uw configuratiebestanden niet beschadigen.

⚠️ Belangrijk: Vermijd speciale tekens zoals @, #, $, %, /, ? in wachtwoorden, omdat deze verbindingsreeksen en JSON-bestanden kunnen verbreken.

Optie A: Eenvoudige online generator (aanbevolen)

Ga naar: JWTSECRETS
Instellingen:
- Aantal wachtwoorden: 1
- Wachtwoordlengte: 32
- ✅ Aankruisen "hoofdletters (A-Z)"
- ✅ Vink "kleine letters (a-z)" aan
- ✅ Vink "cijfers (0-9)" aan
- ❌ Vink "leestekens" uit
Klik op "Wachtwoorden ophalen"

Optie B: Gebruik de console van je browser (supergemakkelijk!)

Open een website (zoals google.com)
Druk op F12 (of klik met de rechtermuisknop → Inspecteren)
Klik op het tabblad "Console"

Plak deze code en druk op Enter:

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

Kopieer het resultaat - het zal er ongeveer zo uitzien: k8m9x2n7p4q1w3e5r6t8y9u2i4o7p1a5s3d6f8g2h4j7k9l

Optie C: Handmatige methode (als al het andere faalt)

Typ gewoon een lange willekeurige string met:

Letters: A-Z, a-z
Cijfers: 0-9
Voorbeeld: MyApp2024SecretKey789RandomString456Auth

Definitief .env voorbeeld

SPOTIFY_CLIENT_ID=uw_spotify_client_id_hier SPOTIFY_CLIENT_SECRET=uw_spotify_client_geheim_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

Belangrijkste punten:

✅ Geen speciale tekens in JWT_SECRET en SESSION_SECRET
✅ MongoDB-wachtwoord vermijdt URL-afbrekende tekens
✅ Alle geheimen zijn lang en willekeurig
✅ Veilig te gebruiken in JSON-bestanden en verbindingsreeksen

Stap 2: Gebruikersmodel met stemmingsregistratie

Maak een map met de naam models en voeg een bestand met de naam User.js toe aan de map. Voeg vervolgens de volgende code toe aan het bestand en sla deze op:

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({ gebruikersnaam: { type: String, vereist: true, uniek: true, trim: true, minlength: 3 }, e-mail: { type: String, vereist: true, uniek: true, kleine letters: true }, wachtwoord: { type: String, vereist: true, minlength: 6 }, stemmingsgeschiedenis: [moodEntrySchema], voorkeuren: { type: userPreferencesSchema, standaard: () => ({}) }, statistieken: { totaalAfspeellijsten: { type: Number, standaard: 0 }, favorieteTijd: String, meestVoorkomendeStemming: String, joinDate: { type: Date, standaard: Date.now } } }, { tijdstempels: true }); // Hash wachtwoord voordat het wordt opgeslagen userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); this.password = await bcrypt.hash(this.password, 12); next(); }); // Wachtwoorden vergelijken userSchema.methods.comparePassword = async function(password) { return bcrypt.compare(password, this.password); }; // Bereken gebruikersstatistieken userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(entry => entry.detectedMood); this.stats.totalPlaylists = this.moodHistory.length; // Vind meest voorkomende stemming 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' ); // Bepaal favoriete tijd van de dag const hours = this.moodHistory.map(entry => entry.timestamp.getHours()); const avgHour = hours.reduce((a, b) => a + b, 0) / hours.length; if (avgHour < 6) this.stats.favoriteTime = 'night'; else if (avgHour < 12) this.stats.favoriteTime = 'morning'; anders als (avgHour < 18) this.stats.favoriteTime = 'middag'; anders this.stats.favoriteTime = 'avond'; }; module.exports = mongoose.model('Gebruiker', userSchema);

Stap 3: Authenticatiemiddleware

Maak een map met de naam middleware en voeg daarin een bestand met de naam auth.js toe. Voeg vervolgens de volgende code toe aan het bestand en sla het op:

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; als (!token) { return res.status(401).json({ fout: 'Geen token opgegeven' }); } const gedecodeerd = jwt.verify(token, process.env.JWT_SECRET); const gebruiker = wacht op User.findById(gedecodeerd.gebruikers-ID); als (!gebruiker) { return res.status(401).json({ fout: 'Gebruiker niet gevonden' }); } req.gebruiker = gebruiker; volgende(); } catch (fout) { res.status(401).json({ fout: 'Ongeldig token' }); } }; module.exports = auth;

Gebruikersdashboard met prachtige analyses

Maak een nieuwe map in uw project en noem deze public. Voeg vervolgens een bestand toe aan deze map en noem het index.html:

<!DOCTYPE html> <html> <head> <title>Gedachtenlezende muziek-API - Persoonlijk dashboard</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', system-ui, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; color: #333; } .dashboard { max-breedte: 1200px; marge: 0 auto; opvulling: 20px; } .header { achtergrond: rgba(255,255,255,0.95); achtergrondfilter: vervagen(10px); randradius: 20px; opvulling: 30px; marge-onderkant: 30px; tekstuitlijning: midden; vakschaduw: 0 8px 32px rgba(0,0,0,0.1); } .stats-grid { weergave: raster; rastersjabloonkolommen: herhalen(automatisch aanpassen, minmax(250px, 1fr)); tussenruimte: 20px; marge-onderkant: 30px; } .stat-card { achtergrond: rgba(255,255,255,0.9); randradius: 15px; opvulling: 25px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .mood-input-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; margin-bottom: 30px; } .mood-history { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; } .history-item { background: #f8f9fa; border-radius: 10px; padding: 15px; margin-bottom: 15px; border-left: 4px solid #667eea; } .login-sectie, .register-sectie { achtergrond: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; max-width: 400px; margin: 50px auto; } input, textarea, knop { breedte: 100%; padding: 12px; margin: 10px 0; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; } knop { achtergrond: linear-gradient(135deg, #667eea, #764ba2); kleur: wit; border: none; cursor: pointer; font-weight: 600; } knop:hover { transform: translateY(-2px); } </style> </head> <body> <div class="dashboard"> <div id="authSection"> <div class="login-section"> <h2>🧠🎵 Welkom terug!</h2> <input type="text" id="loginUsername" placeholder="Gebruikersnaam"> <input type="password" id="loginPassword" placeholder="Wachtwoord"> <button onclick="login()">Inloggen</button> <p><a href="#" onclick="showRegister()">Heeft u nog geen account? Meld u aan</a></p> </div> <div id="registerSection" class="register-section" style="display:none;"> <h2>🎵 Maak je muziekprofiel aan</h2> <input type="text" id="regUsername" placeholder="Gebruikersnaam"> <input type="email" id="regEmail" placeholder="E-mail"> <input type="password" id="regPassword" placeholder="Wachtwoord"> <button onclick="register()">Account aanmaken</button> <p><a href="#" onclick="showLogin()">Heb je al een account? Inloggen</a></p> </div> </div> <div id="dashboardSection" style="display:none;"> <div class="header"> <h1>🧠🎵 Jouw persoonlijke muziekgedachtenlezer</h1> <p>Welkom terug, <span id="gebruikersnaam"></span>! Klaar om jouw perfecte soundtrack te ontdekken?</p> <button onclick="logout()" style="width:auto; margin-top:10px;">Uitloggen</button> </div> <div class="stats-grid"> <div class="stat-card"> <h3>📊 Totaal aantal afspeellijsten</h3> <div id="totalPlaylists" class="stat-number">0</div&</div> <div class="stat-card"> <h3>😊 Favoriete stemming</h3> <div id="favoriteMood" class="stat-text">-</div> </div> <div class="stat-card"> <h3>🕐 Beste tijd</h3> <div id="bestTime" class="stat-text">-</div> </div> <div class="stat-card"> <h3>🎵 Topgenre</h3> <div id="topGenre" class="stat-text">-</div> </div> </div> <div class="mood-input-section"> <h2>💭 Hoe voel je je nu?</h2> <textarea id="moodText" placeholder="Beschrijf je huidige stemming, wat er gebeurt of hoe je je wilt voelen..."></textarea> <button onclick="generatePersonalizedPlaylist()">🎧 Genereer mijn perfecte afspeellijst</button> <div id="result" style="display:none;" class="result"></div> </div> <div class="mood-history"> <h2>📈 Jouw stemmingsreis</h2> <div id="historyContainer"></div> </div> </div> </div> <script src="/js/app.js"></script> </body> </html>

Maak nu in uw map public een map en noem deze js. Maak vervolgens een bestand app.js in de map js met de volgende 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'; } async function login() { const username = document.getElementById('loginUsername').value; const password = document.getElementById('loginPassword').value; if (!username || !password) { alert('Vul alle velden in'); return; } try { const response = await fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) }); const data = await response.json(); if (response.ok) { authToken = data.token; localStorage.setItem('authToken', authToken); loadDashboard(); } anders { alert(data.error || 'Aanmelden mislukt'); } } catch (fout) { console.error('Aanmeldfout:', error); alert('Aanmelden mislukt. Probeer het opnieuw.'); } } async function register() { const username = document.getElementById('regUsername').value; const email = document.getElementById('regEmail').value; const password = document.getElementById('regPassword').value; if (!username || !email || !password) { alert('Vul alle velden in'); return; } try { const response = await fetch('/api/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, email, password }) }); const data = await response.json(); if (response.ok) { alert('Account succesvol aangemaakt! Meld u aan.'); showLogin(); } else { alert(data.error || 'Registratie mislukt'); } } catch (error) { console.error('Registratiefout:', error); alert('Registratie mislukt. Probeer het opnieuw.'); } } async function loadDashboard() { try { const response = await fetch('/api/profile', { headers: { 'Authorization': 'Bearer ' + authToken } }); if (response.ok) { currentUser = await response.json(); showDashboard(); updateStats(); loadMoodHistory(); } else { logout(); } } catch (error) { console.error('Dashboard laadfout:', error); logout(); } } functie showDashboard() { document.getElementById('authSectie').style.display = 'geen'; document.getElementById('dashboardSectie').style.display = 'blok'; document.getElementById('gebruikersnaam').textContent = huidigeGebruiker.gebruikersnaam; } functie updateStats() { document.getElementById('totaleAfspeellijsten').textContent = huidigeGebruiker.stats.totaleAfspeellijsten || 0; document.getElementById('favorieteStemming').textContent = huidigeGebruiker.stats.meestVoorkomendeStemming || '-'; document.getElementById('besteTijd').textContent = huidigeGebruiker.stats.favorieteTijd || '-'; 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>Nog geen stemmingsgeschiedenis. Genereer je eerste afspeellijst!</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} tracks generated</small> </div>` ).join(''); } async function generatePersonalizedPlaylist() { const moodText = document.getElementById('moodText').value; if (!moodText.trim()) { alert('Beschrijf hoe u zich voelt!'); return; } probeer { const response = wacht op fetch('/api/gepersonaliseerde-afspeellijst', { methode: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken }, body: JSON.stringify({ tekst: moodText }) }); const data = wacht op response.json(); als (response.ok) { displayPersonalizedResults(data); loadDashboard(); } anders { alert(data.error || 'Kan afspeellijst niet genereren'); } } catch (fout) { console.error('Fout bij genereren van afspeellijst:', fout); alert('Kan afspeellijst niet genereren. Probeer het opnieuw.'); } } functie displayPersonalizedResults(data) { const resultDiv = document.getElementById('resultaat'); resultDiv.style.display = 'blok'; const html = ` <h3>Gedetecteerde stemming: ${data.moodAnalysis.mood} (Vertrouwen: ${data.moodAnalysis.confidence}/10)</h3> <p>${data.personalizedMessage || 'Hier is je afspeellijst!'}</p> <div class="afspeellijst"> ${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 ? 'Bedankt! We zullen meer van dit soort tracks aanbevelen.' : 'Begrepen! We zullen vergelijkbare tracks vermijden.'); } catch(error) { console.error('Feedback error:', error); } } function logout() { localStorage.removeItem('authToken'); authToken = null; currentUser = null; document.getElementById('authSection').style.display = 'block'; document.getElementById('dashboardSection').style.display = 'none'; showLogin(); }

Vervang uw server.js-bestand

Vervang de code van uw server.js-bestand door het volgende:

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'); // Maak verbinding met MongoDB const connectDB = async () => { try { console.log('🔗 Verbinding maken met MongoDB...'); wacht op mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, }); console.log('✅ MongoDB succesvol verbonden!'); } catch (error) { console.error('❌ MongoDB-verbinding mislukt:', 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')); // De hoofdpagina weergeven app.get('/', (req, res) => { res.sendFile(__dirname + '/public/index.html'); }); // Gebruikersregistratie app.post('/api/register', async (req, res) => { try { const { gebruikersnaam, e-mail, wachtwoord } = req.body; if (!gebruikersnaam || !e-mail || !wachtwoord) { return res.status(400).json({ error: 'Alle velden zijn verplicht' }); } if (password.length < 6) { return res.status(400).json({ error: 'Wachtwoord moet minimaal 6 tekens lang zijn' }); } const existingUser = await User.findOne({ $or: {[ email }, { username }] }); if (existingUser) { return res.status(400).json({ error: 'Gebruikersnaam of e-mail bestaat al' }); } const user = new User({ gebruikersnaam, e-mail, wachtwoord }); await user.save(); res.status(201).json({ message: 'Gebruiker succesvol aangemaakt' }); } catch (error) { console.error('Registratiefout:', error); res.status(500).json({ error: 'Registratie mislukt' }); } }); // Gebruikerslogin app.post('/api/login', async (req, res) => { try { const { gebruikersnaam, wachtwoord } = req.body; const user = await User.findOne({ $or: {[ gebruikersnaam }, { email: gebruikersnaam }] }); if (!user || !(await user.comparePassword(wachtwoord))) { return res.status(401).json({ error: 'Ongeldige inloggegevens' }); } const token = jwt.sign( { userId: user._id }, process.env.JWT_SECRET, { expiresIn: '7d' } ); res.json({ token, gebruiker: { gebruikersnaam: user.username, email: user.email } }); } catch (error) { console.error('Inloggen fout:', fout); res.status(500).json({ fout: 'Aanmelden mislukt' }); } }); // Gebruikersprofiel ophalen 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: 'Profiel laden mislukt' }); } }); // Gepersonaliseerde afspeellijst genereren app.post('/api/personalized-playlist', auth, async (req, res) => { try { const { text, playlistSize = 15 } = req.body; if (!text) { return res.status(400).json({ error: 'Vertel me alsjeblieft hoe je je voelt!' }); } const moodAnalysis = moodAnalyzer.analyzeMood(text); const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // Opslaan in de geschiedenis van de gebruiker 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: `Op basis van je geschiedenis heb ik deze afspeellijst specifiek afgestemd op je ${moodAnalysis.mood}-stemming!` }); } catch (error) { console.error('Fout bij gepersonaliseerde afspeellijst:', error); res.status(500).json({ error: 'Het genereren van een gepersonaliseerde afspeellijst is mislukt. Probeer het opnieuw.' }); } }); // Feedback bijhouden app.post('/api/track-feedback', auth, async (req, res) => { try { const { trackId, liked } = req.body; res.json({ message: 'Feedback ontvangen! We zullen toekomstige aanbevelingen verbeteren.' }); } catch (error) { console.error('Feedbackfout:', error); res.status(500).json({ error: 'Kan feedback niet verwerken' }); } }); app.listen(PORT, () => { console.log(`🚀 API voor muziek met gedachtenlezen draait op http://localhost:${PORT}`); console.log('🧠 Klaar om stemmingen te analyseren en afspeellijsten te genereren!'); });

Wat u nu zou moeten kunnen doen

1. Anonieme gebruikers (oorspronkelijke functionaliteit)

Bezoek uw website zonder in te loggen
Genereer afspeellijsten met behulp van uw bestaande stemmingsanalyse
Krijg muziekaanbevelingen op basis van emoties

2. Geregistreerde gebruikers (nieuwe functies)

Maak een account aan en log in
Genereer gepersonaliseerde afspeellijsten die in de loop van de tijd verbeteren
Bekijk je stemmingsgeschiedenis en persoonlijke analyses
Vind nummers leuk/niet leuk om de AI te trainen
Bekijk statistieken zoals je favoriete stemming, totaal aantal afspeellijsten, enz.

Stapsgewijze testhandleiding

Test 1: Controleer of je server start

node server.js

Je zou het volgende moeten zien:

🔑 Spotify-authenticatie proberen... 🎵 Spotify succesvol verbonden! 🔗 MongoDB verbonden... ✅ MongoDB succesvol verbonden! 🚀 API voor muziek die gedachten kan lezen, draait op http://localhost:3000 🧠 Klaar om stemmingen te analyseren en afspeellijsten te genereren!

Test 2: Bezoek je website

Ga naar: http://localhost:3000

Wat je zou moeten zien:

Een inlogformulier met de vraag om gebruikersnaam en wachtwoord
Een link "Nog geen account? Meld je aan"

Test 3: Maak je eerste account aan

Klik op: "Nog geen account? Meld je aan"
Vul in:
- Gebruikersnaam: testuser
- E-mailadres: test@example.com
- Wachtwoord: wachtwoord123
Klik op: "Account aanmaken"
Verwacht resultaat: "Account succesvol aangemaakt! Meld u aan."

Test 4: Meld u aan bij uw dashboard

Gebruik de gegevens die u zojuist hebt aangemaakt
Klik op: "Inloggen"
U zou het volgende moeten zien:
- Welkomstbericht met uw gebruikersnaam
- Statistiekenkaarten met 0 afspeellijsten, nog geen favoriete stemming
- Tekstvak met de vraag "Hoe voelt u zich nu?"

Test 5: Genereer uw eerste persoonlijke afspeellijst

Typ iets als: "Ik ben superenthousiast over mijn nieuwe project!"
Klik op: "Genereer mijn perfecte afspeellijst"
Je zou het volgende moeten zien:
- Gedetecteerde stemming (waarschijnlijk "energiek" of "vrolijk")
- Lijst met nummers met albumhoes
- Voorbeeld van audiospelers (indien beschikbaar)
- Duim omhoog/omlaag-knoppen voor elk nummer

Test 6: Test het leersysteem

Klik op duim omhoog 👍 bij nummers die je leuk vindt
Klik op duim omlaag 👎 bij nummers die je niet leuk vindt
Verwacht: Waarschuwingsberichten met de tekst "Bedankt! We zullen meer van dit soort nummers aanbevelen"

Test 7: Controleer je statistieken

Vernieuw de pagina of genereer een andere afspeellijst
Je statistieken zouden nu het volgende moeten weergeven:
- Totaal afspeellijsten: 1 (of meer)
- Favoriete stemming: de stemming die is gedetecteerd
- Andere statistieken zouden moeten verschijnen

Verschillende scenario's testen

Probeer verschillende stemmingen:

"Ik heb het net uitgemaakt met mijn vriendin en het regent" (zou moeten detecteren: verdrietig)
"Ik heb zin in mijn training!" (zou moeten detecteren: energiek)
"Ik wil gewoon rustig chillen en studeren" (zou moeten detecteren: chillen)
"Ik voel me romantisch op deze date night" (zou moeten detecteren: romantisch)

Test Edge Cases:

"" (leeg - zou een foutmelding moeten tonen)
"asdf willekeurige tekst" (zou standaard neutraal/relaxt moeten zijn)
"Ik ben EXTREEM opgewonden!!!" (zou een hogere betrouwbaarheid moeten detecteren)

Veelvoorkomende problemen en snelle oplossingen

❌ "MongoDB-verbinding mislukt"

Controleer: Is uw .env-bestand correct ingesteld met de MongoDB-verbindingsreeks?

# Voer dit uit om uw databaseverbinding te testen node -e "require('dotenv').config(); console.log('MONGODB_URI:', process.env.MONGODB_URI ? 'Set ✅' : 'Missing ❌');"

❌ "Spotify-verbinding mislukt"

Controleer: Staan je Spotify API-sleutels in het bestand .env?

# Voer dit uit om Spotify-referenties te controleren node -e "require('dotenv').config(); console.log('Spotify Client ID:', process.env.SPOTIFY_CLIENT_ID ? 'Set ✅' : 'Missing ❌');"

❌ Inloggen/Registreren werkt niet

Controleer: Ziet u foutmeldingen in de browserconsole?

Druk op F12 → tabblad Console
Zoek naar rode foutmeldingen

❌ Pagina toont oude interface

Oplossing: Vernieuw de pagina hard

Druk op Ctrl+Shift+R (Windows/Linux)
Druk op Cmd+Shift+R (Mac)

Wat zou moeten werken versus wat nog steeds eenvoudig is

✅ Zou nu moeten werken:

Gebruikersregistratie en inloggen
Basisstemmingsdetectie en afspeellijstgeneratie
Stemmingsgeschiedenis opslaan in database
Eenvoudig Feedback over like/dislike
Statistieken bijhouden (totaal aantal afspeellijsten, favoriete stemming)

🚧 Nog steeds basis (geavanceerde functies voor later):

Complexe machine learning op basis van gebruikersfeedback
Sociale functies en het delen van afspeellijsten
Geavanceerde analyses en stemmingspatronen
Interface van mobiele app

Volgende stappen na het testen

Zodra alles werkt:

Probeer het met verschillende gebruikers - maak meerdere accounts aan om te zien hoe personalisatie verschilt
Genereer meerdere afspeellijsten - kijk hoe je statistieken en voorkeuren zich ontwikkelen
Geef feedback op nummers - kijk hoe het systeem je smaak leert
Controleer je MongoDB Atlas-dashboard - je zou moeten zien dat er gegevens worden opgeslagen

Conclusie

Je hebt zojuist iets bijzonders gebouwd: een AI die niet alleen menselijke emoties begrijpt, maar ook leert en zich in de loop der tijd aanpast aan individuele voorkeuren. Je Mind-Reading Music API heeft nu een geheugen, een persoonlijkheid en de mogelijkheid om met zijn gebruikers mee te groeien.

De combinatie van stemmingsdetectie, gebruikersleren en gepersonaliseerde aanbevelingen creëert een ervaring die met elke interactie magischer wordt. De reis van elke gebruiker wordt uniek en creëert een persoonlijke soundtrack voor hun emotionele leven.

Je API onthoudt nu elke stemming, leert van elke interactie en bouwt een uitgebreid begrip op van de muzikale voorkeuren van elke gebruiker. Dit is de basis voor echt gepersonaliseerde AI-ervaringen.

Wat is de volgende stap?

Klaar om dit nog verder te brengen? Hier zijn enkele interessante richtingen:

Geavanceerde analyses: Voeg herkenning van stemmingspatronen en voorspellende aanbevelingen toe
Sociale functies: Laat gebruikers afspeellijsten delen en ontdek de muzieksmaak van vrienden
Mobiele app: Bouw React Native- of Flutter-apps voor iOS/Android
Spraakintegratie: Voeg spraak-naar-tekst toe voor handsfree stemmingsinvoer
Machine learning: Implementeer collaboratieve filtering voor nog betere aanbevelingen
Implementatie: Implementeer in AWS/Vercel met de juiste omgevingsvariabelen

Blijf experimenteren en bouwen - de toekomst van gepersonaliseerde AI-ervaringen ligt in jouw handen!

Klaar voor de volgende uitdaging? Blijf op de hoogte van onze komende tutorial over het toevoegen van sociale functies en collaboratieve filtering om een muziekontdekkingsnetwerk te creëren dat mensen verbindt via gedeelde emotionele ervaringen.