Vrienden toevoegen aan je Mind-Reading Music API: realtime sociaal delen

Klaar om je Mind-Reading Music API echt sociaal te maken? In deze tutorial voeg je een robuust vriendensysteem en een functie voor het delen van afspeellijsten toe die in de database blijven staan, zodat gebruikers de gedeelde afspeellijsten van hun vrienden kunnen bekijken, zelfs als ze niet online zijn. We gebruiken Socket.io voor realtime-updates en MongoDB voor permanente opslag.

Wat u gaat bouwen

Vriendensysteem – Vrienden toevoegen en beheren op gebruikersnaam met wederzijdse vriendschap via ObjectIds
Persistent delen van afspeellijsten – Gedeelde afspeellijsten worden opgeslagen in de database en kunnen op elk moment worden bekeken
Realtime-meldingen – Ontvang direct meldingen wanneer vrienden delen (indien online)
Activiteitenfeed – Bekijk recente gedeelde afspeellijsten met klikbare previews van afspeellijsten
Verbeterde stemmingsanalyse – Slimme generatie van afspeellijsten met zoekopties

Vereisten

Uw voltooide Mind-Reading Music API van Deel 2
MongoDB, Node.js en npm geïnstalleerd
Spotify API-referenties (Client-ID en Secret)
30-45 minuten programmeertijd

In deel 2 heb je gebruikersaccounts aangemaakt met stemmingsgeschiedenis en slimme voorkeuren. Nu gaan we het sociaal maken! Je leert hoe je gebruikers kunt verbinden, afspeellijsten kunt delen, zowel in realtime als permanent, en kunt zien waar je vrienden naar luisteren op basis van hun stemming.

De belangrijkste concepten begrijpen

Voordat we in de code duiken, laten we eerst begrijpen wat we bouwen:

Socket.io – Een bibliotheek die realtime tweerichtingscommunicatie tussen je server en browser mogelijk maakt. Zie het als een telefoontje in plaats van een sms-bericht: u kunt direct informatie verzenden en ontvangen zonder de pagina te verversen.
Persistente opslag – Gegevens opslaan in uw MongoDB-database, zodat deze daar blijven, zelfs wanneer gebruikers uitloggen. Dit is vergelijkbaar met het opslaan van een bestand op uw harde schijf in plaats van het alleen in het geheugen te bewaren.
ObjectId-verwijzingen – MongoDB's manier om relaties tussen gegevens te creëren. In plaats van alle informatie van uw vrienden naar uw profiel te kopiëren, slaat u gewoon een verwijzing (zoals een pointer) naar hun profiel op.
Schema's – Zie deze als blauwdrukken die de structuur van uw gegevens definiëren. Ze vertellen MongoDB welke velden elk document moet bevatten en wat voor soort gegevens in elk veld moeten komen.

Stap 1: Vereiste afhankelijkheden installeren

Open uw terminal in uw projectmap en installeer Socket.io voor realtimefuncties:

npm install socket.io

Wat dit doet: Met deze opdracht wordt de Socket.io-bibliotheek gedownload en geïnstalleerd in uw project. De opdracht npm install haalt pakketten op uit het npm-register (een enorme bibliotheek met JavaScript-code) en voegt ze toe aan je map node_modules.

De overige afhankelijkheden (sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv) zouden al geïnstalleerd moeten zijn in Deel 2.

Stap 2: Je gebruikersmodel bijwerken met sociale functies

Aangezien je in Deel 2 al een gebruikersmodel hebt aangemaakt, werken we dit bij om sociale functies toe te voegen. Het gebruikersmodel is een sjabloon die definieert welke informatie we over elke gebruiker in onze database opslaan.

Wat we toevoegen:

friends-array – Een lijst met ObjectId-verwijzingen naar andere gebruikers. In plaats van de volledige gebruikersinformatie op te slaan, slaan we alleen ID's op die verwijzen naar andere gebruikersdocumenten in de database.
sharedWith en isShared velden – Deze houden bij welke stemmingsitems zijn gedeeld en met wie ze zijn gedeeld.
sharedPlaylistSchema – Een nieuw schema (blauwdruk) dat definieert hoe een gedeelde afspeellijst eruitziet: wie deze heeft gedeeld, de stemming, de nummers en wanneer deze is gedeeld.
sharedPlaylists array – Een lijst met alle afspeellijsten die uw vrienden met u hebben gedeeld.

Vervang uw models/User.js door:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // Schema voor individuele stemmingsitems (telkens wanneer de gebruiker een afspeellijst genereert) const moodEntrySchema = new mongoose.Schema({ text: String, // Wat de gebruiker heeft getypt (bijv. "voel me blij vandaag") detectedMood: String, // De stemming die onze analyzer heeft gedetecteerd (bijv. "blij") confidence: Number, // Hoe zeker we zijn (0-10) playlistGenerated: [{ // Array met nummers die we aanbevelen trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } // null = niet beoordeeld, true = leuk gevonden, false = niet leuk gevonden }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // Met wie hebben we dit gedeeld? isShared: { type: Boolean, default: false }, // Is dit gedeeld? timestamp: { type: Datum, standaard: Date.now } // Wanneer is dit gemaakt? }); // Schema voor gebruikersvoorkeuren (favoriete genres, enz.) 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] } }); // NIEUW: Schema voor afspeellijsten die vrienden met je delen const sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // ObjectId-referentie naar de vriend die sharedByUsername: String deelde, // Gebruikersnaam voor eenvoudige weergave (gedenormaliseerd voor prestaties) mood: String, // Voor welke stemming was deze afspeellijst? playlist: [{ // De daadwerkelijke naam van de nummers: String, artiest: String, albumafbeelding: String, id: String }], tijdstempel: { type: Date, standaard: Date.now } // Wanneer werd dit gedeeld? }); // Hoofdgebruikersschema - definieert de structuur van een gebruikersdocument const userSchema = new mongoose.Schema({ username: { type: String, required: true, unique: true, trim: true, minlength: 3 }, email: { type: String, required: true, unique: true, lowercase: true }, password: { type: String, required: true, minlength: 6 }, friends: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // Array met ObjectId-verwijzingen naar vrienden moodHistory: [moodEntrySchema], // Alle afspeellijsten die deze gebruiker heeft gegenereerd sharedPlaylists: [sharedPlaylistSchema], // Afspeellijsten die vrienden met deze gebruiker hebben gedeeld voorkeuren: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Nummer, standaard: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { type: Date, standaard: Date.now } } }, { timestamps: true }); // Voeg automatisch de velden createdAt en updatedAt toe // Middleware: voer deze functie uit voordat u een gebruiker opslaat (om het wachtwoord te hashen) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // Hash alleen als het wachtwoord is gewijzigd this.password = await bcrypt.hash(this.password, 12); // Hash met 12 salt-rondes next(); }); // Methode: controleer of een wachtwoord overeenkomt met het gehashte wachtwoord userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // Methode: Gebruikersstatistieken bijwerken op basis van hun stemmingsgeschiedenis userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean); // Alle niet-lege stemmingen ophalen this.stats.totalPlaylists = moods.length; if (moods.length > 0) { // Tel hoe vaak elke stemming voorkomt const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // De stemming met het hoogste aantal vinden this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral'); } else { this.stats.mostCommonMood = 'neutral'; } // Bereken favoriete tijd van de dag op basis van wanneer ze afspeellijsten genereren const hours = this.moodHistory.map(e => e.timestamp.getHours()).filter(h => !isNaN(h)); if (hours.length) { const avg = hours.reduce((a, b) => a + b, 0) / hours.length; this.stats.favoriteTime = avg < 6 ? 'night' : avg < 12 ? 'morning' : avg < 18 ? 'afternoon' : 'evening'; } }; // Exporteer het model zodat we het in andere bestanden kunnen gebruiken module.exports = mongoose.model('User', userSchema);

Belangrijkste concepten uitgelegd:

ObjectId-referenties – De friends-array slaat geen volledige gebruikersobjecten op. In plaats daarvan slaat het ObjectIds (unieke identifiers) op die naar andere gebruikers verwijzen. Dit is efficiënt omdat als een vriend zijn gebruikersnaam wijzigt, we deze niet overal hoeven bij te werken – we volgen gewoon de referentie.
Denormalisatie – Merk op dat we zowel sharedBy (ObjectId) als sharedByUsername (String) opslaan. Dit wordt denormalisatie genoemd – dezelfde gegevens op meerdere plaatsen opslaan voor betere prestaties. We slaan de gebruikersnaam op, zodat we de gebruiker niet elke keer hoeven op te zoeken wanneer we gedeelde afspeellijsten weergeven.
Middleware (.pre()) – Deze functie wordt automatisch uitgevoerd vóór bepaalde bewerkingen. Hierbij worden wachtwoorden gehasht voordat ze in de database worden opgeslagen voor de beveiliging.
Instance Methods (.methods) – Dit zijn functies die u kunt aanroepen voor individuele gebruikersdocumenten, zoals user.comparePassword() of user.updateStats().

Stap 3: Werk uw HTML-frontend bij met sociale functies

Laten we nu de gebruikersinterface bijwerken met vriendenbeheer en een activiteitenfeed. De HTML definieert de structuur van uw webpagina: welke elementen worden weergegeven en waar ze worden geplaatst.

Wat we toevoegen aan de gebruikersinterface:

Vriendenlijst – Geeft uw huidige vrienden weer
Vriendeninvoer toevoegen – Tekstveld om de gebruikersnaam van een vriend in te voeren
Feed met recente activiteiten – Geeft afspeellijsten weer die uw vrienden hebben gedeeld (klikbaar om de volledige afspeellijst te bekijken)
Selectievakje Delen – Optie om uw gegenereerde afspeellijst met vrienden te delen
Meldingsgebied – Pop-upmeldingen voor realtime-updates

Vervang uw public/index.html door:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Gedachtenlezende muziek-API - Sociaal</title> <style> /* Standaardbrowserstijlen resetten */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Hoofdtekststijl met verloopachtergrond */ body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; color: #333; } /* Container voor het volledige dashboard */ .dashboard { max-width: 1000px; margin: 0 auto; padding: 20px; } /* Koptekstsectie met welkomstbericht */ .header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); /* Vervagingseffect voor glasmorfisme */ border-radius: 20px; padding: 30px; margin-bottom: 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* Rasterindeling met twee kolommen: afspeellijstsectie (groter) en vriendensectie (kleiner) */ .main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } /* Kaartstyling voor beide secties */ .playlist-section, .friends-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* Styling van formulierelementen */ input, textarea, button { width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; } /* Knopspecifieke styling met gradiëntachtergrond */ button { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; cursor: pointer; font-weight: 600; } /* Subtiel zweefeffect op knoppen */ button:hover { transform: translateY(-2px); } /* Styling van individuele vrienditems */ .friend-item { background: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 8px; border-left: 4px solid #667eea; /* Accentkleur links */ } /* Stijl van pop-upmeldingen (standaard verborgen, schuift van rechts in) */ .notification { position: fixed; top: 20px; right: 20px; background: rgba(102,126,234,0.95); color: #fff; padding: 15px 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transform: translateX(400px); /* Begin buiten het scherm */ transition: transform .3s ease; z-index: 1000; max-width: 300px; } /* Melding weergeven (schuift in) */ .notification.show { transform: translateX(0); } /* Inlog- en registratieformulieren */ .login-section, .register-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; max-width: 400px; margin: 50px auto; } /* Selectievakjes voor delen */ .share-controls { display: flex; gap: 10px; margin: 10px 0; } .share-controls input[type=checkbox] { width: auto; margin-right: 5px; } </style> </head> <body> <div class="dashboard"> <!-- Authenticatiesectie (inlog-/registratieformulieren) --> <div id="authSection"> <!-- Inlogformulier --> <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> <!-- Registratieformulier (standaard verborgen) --> <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> <!-- Hoofdsectie van het dashboard (weergegeven na inloggen) --> <div id="dashboardSection" style="display:none"> <!-- Koptekst met gebruikersnaam en afmeldknop --> <div class="header"> <h1>🧠🎵 Uw persoonlijke muziek-mindreader</h1> <p>Welkom, <span id="gebruikersnaam"></span>!</p> <button onclick="logout()" style="width:auto; margin-top:10px">Afmelden</button> </div> <!-- Indeling met twee kolommen: afspeellijstgedeelte links, vriendengedeelte rechts --> <div class="main-content"> <!-- Linkerkolom: afspeellijst genereren --> <div class="playlist-section"> <h2>💭 Hoe voel je je?</h2> <textarea id="moodText" placeholder="Beschrijf je stemming..."></textarea> <div class="share-controls"> <label><input type="checkbox" id="shareWithFriends"/>Delen met vrienden</label> </div> <button onclick="generatePlaylist()">🎧 Afspeellijst genereren</button> <!-- Resultaten verschijnen hier na het genereren van de afspeellijst --> <div id="result" style="display:none"></div> </div> <!-- Rechterkolom: Vrienden en activiteit --> <div class="friends-section"> <h3>👥 Mijn vrienden</h3> <div id="friendsList"></div> <h4>Een vriend toevoegen</h4> <input type="text" id="friendUsername" placeholder="Gebruikersnaam van vriend"/> <button onclick="addFriend()">Vriend toevoegen</button> <h4>Recente activiteit</h4> <!-- Gedeelde afspeellijsten van vrienden worden hier weergegeven --> <div id="friendActivity">Vriendenactiviteit wordt hier weergegeven...</div> </div> </div> </div> <!-- Container voor pop-upmeldingen --> <div id="notificationArea"></div> <!-- Voeg de Socket.io-bibliotheek toe (automatisch aangeleverd door onze server) --> <script src="/socket.io/socket.io.js"></script> <!-- Voeg onze aangepaste JavaScript toe --> <script src="./js/app.js"></script> </body> </html>

De HTML-structuur begrijpen:

Twee hoofdsecties: authSection (inloggen/registreren) en dashboardSection (hoofd-app). Er is er maar één tegelijk zichtbaar.
Rasterindeling: .main-content gebruikt een CSS-raster om twee kolommen te maken (2 fr voor de afspeellijst, 1 fr voor vrienden). Dit betekent dat het afspeellijstgedeelte twee keer zo breed is.
Event handlers: onclick="functionName()" vertelt de browser om een JavaScript-functie aan te roepen wanneer op het element wordt geklikt.
ID's: Elementen hebben unieke ID's (zoals id="friendsList"), zodat onze JavaScript ze later kan vinden en wijzigen.

Stap 4: Werk server.js bij met Socket.io, Friend Endpoints en Persistent Sharing

Nu gaan we onze server bijwerken om vriendschapsverzoeken, het delen van afspeellijsten en realtime communicatie te verwerken. De server is het 'brein' van uw app: hij verwerkt verzoeken, communiceert met de database en stuurt reacties terug naar gebruikers.

Wat we aan de server toevoegen:

Socket.io-server – Maakt realtime, bidirectionele communicatie tussen server en clients mogelijk
/api/add-friend-eindpunt – Verwerkt vriendschapsverzoeken (wederzijdse vriendschap)
/api/shared-playlists-eindpunt – Retourneert afspeellijsten die vrienden met u hebben gedeeld
Verbeterde /api/personalized-playlist – Slaat nu gedeelde afspeellijsten op in de databases van vrienden
Socket-gebeurtenisafhandelaars – Luisteren naar en verzenden van realtime-gebeurtenissen (authenticatie, delen)

Vervang uw server.js door:

// Laad omgevingsvariabelen uit het .env-bestand require('dotenv').config(); // Importeer vereiste modules const path = require('path'); const express = require('express'); const http = require('http'); const socketIo = require('socket.io'); 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'); // Initialiseer afspeellijstgenerator const playlistGen = new PlaylistGenerator(); const PORT = process.env.PORT || 3000; // Maak verbinding met de asynchrone functie van de MongoDB-database connectDB() { try { console.log('🔗 Verbinding maken met MongoDB…'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }); console.log('✅ MongoDB succesvol verbonden!'); } catch (err) { console.error('❌ MongoDB-verbinding mislukt:', err.message); process.exit(1); // Sluit af als de databaseverbinding mislukt } } connectDB(); // Maak een Express-app en HTTP-server const app = express(); const server = http.createServer(app); // Initialiseer Socket.io boven op de HTTP-server const io = socketIo(server); // Kaart om online gebruikers bij te houden: userId => socketId // Hiermee kunnen we berichten sturen naar specifieke gebruikers die momenteel verbonden zijn const connectedUsers = new Map(); // Socket.io-verbindingshandler - wordt uitgevoerd wanneer een client verbinding maakt io.on('connection', socket => { console.log('🔗 Socket connected:', socket.id); // Verwerk 'authenticate'-gebeurtenis - de client vertelt ons wie ze zijn socket.on('authenticate', ({ userId, username }) => { // Sla de socket-ID van deze gebruiker op, zodat we ze later berichten kunnen sturen connectedUsers.set(userId, socket.id); socket.userId = userId; // Koppel de userId aan deze socket socket.username = username; // Koppel de gebruikersnaam aan deze socket console.log(`✅ Geverifieerde gebruiker: ${username}`); }); // Verwerk 'share_playlist'-gebeurtenis - de gebruiker wil delen met vrienden socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { try { // Loop door alle vriend-ID's voor (let friendId of friendIds) { // Haal de socket-ID op voor deze vriend (als ze online zijn) const sid = connectedUsers.get(friendId.toString()); if (sid) { // Vriend is online! Stuur ze een realtime melding io.to(sid).emit('friend_shared_playlist', { friendName, mood, playlist }); } // Als een vriend offline is, ziet hij of zij de playlist in zijn of haar activiteitenfeed wanneer hij of zij inlogt } } catch (err) { console.error('Fout bij het delen van de playlist:', err); } }); // Verbreek de verbinding - verwijder de gebruiker van de online kaart socket.on('disconnect', () => { if (socket.userId) { connectedUsers.delete(socket.userId); console.log(`👋 Verbinding verbroken: ${socket.username}`); } }); }); // Middleware voor het parseren van JSON-aanvraaglichamen app.use(express.json()); // Statische bestanden uit de 'public'-map serveren (HTML, CSS, afbeeldingen) app.use(express.static(path.join(__dirname, 'public'))); // ===== API-EINDPUNTEN ===== // POST /api/register - Maak een nieuw gebruikersaccount aan app.post('/api/register', async (req, res) => { try { const { gebruikersnaam, e-mail, wachtwoord } = req.body; // Valideer invoer if (!gebruikersnaam || !e-mail || !wachtwoord) { return res.status(400).json({ fout: 'Alle velden zijn verplicht' }); } if (password.length < 6) { return res.status(400).json({ fout: 'Het wachtwoord moet minimaal 6 tekens lang zijn' }); } // Controleer of de gebruikersnaam of het e-mailadres al bestaat const exists = await User.findOne({ $or: [{ gebruikersnaam }, { e-mail }] }); if (exists) { return res.status(400).json({ fout: 'Gebruikersnaam of e-mailadres bestaat al' }); } // Maak een nieuwe gebruiker aan en sla deze op (het wachtwoord wordt automatisch gehasht door onze pre-save middleware) const user = new User({ gebruikersnaam, e-mailadres, wachtwoord }); await user.save(); res.status(201).json({ bericht: 'Gebruiker succesvol aangemaakt' }); } catch (err) { console.error('Registratiefout:', err); res.status(500).json({ fout: 'Registratie mislukt' }); } }); // POST /api/login - Gebruiker verifiëren en JWT-token retourneren app.post('/api/login', async (req, res) => { try { const { username, password } = req.body; // Gebruiker zoeken op gebruikersnaam of e-mailadres const user = await User.findOne({ $or: {[ username }, { email: username }] }); // Controleren of de gebruiker bestaat en of het wachtwoord correct is if (!user || !(await user.comparePassword(password))) { return res.status(401).json({ error: 'Invalid credentials' }); } // JWT-token maken (zoals een tijdelijke ID-kaart) const token = jwt.sign( { userId: user._id }, // Payload (wat we coderen) process.env.JWT_SECRET, // Geheime sleutel (zodat deze veilig blijft) { expiresIn: '7d' } // Token verloopt over 7 dagen ); // Stuur token terug naar client res.json({ token, gebruiker: { gebruikersnaam: gebruiker.gebruikersnaam, e-mail: gebruiker.e-mail, vrienden: gebruiker.vrienden } }); } catch (err) { console.error('Aanmeldfout:', err); res.status(500).json({ fout: 'Aanmelden mislukt' }); } }); // GET /api/profile - Profiel van huidige gebruiker ophalen // De 'auth'-middleware verifieert het JWT-token en koppelt de gebruiker aan req.user app.get('/api/profile', auth, async (req, res) => { try { // Gebruikersstatistieken bijwerken req.user.updateStats(); await req.user.save(); // Vriendenarray vullen (ObjectIds vervangen door daadwerkelijke gebruikersobjecten) await req.user.populate('friends', 'gebruikersnaam _id'); const { gebruikersnaam, e-mail, vrienden } = req.user; res.json({ _id: req.user._id, gebruikersnaam, e-mail, vrienden: vrienden.map(f => ({ gebruikersnaam: f.gebruikersnaam, _id: f._id })) }); } catch (err) { console.error('Profielfout:', err); res.status(500).json({ error: 'Profiel kan niet worden geladen' }); } }); // GET /api/shared-playlists - Haal afspeellijsten op die vrienden met je hebben gedeeld app.get('/api/shared-playlists', auth, async (req, res) => { try { // Haal de laatste 10 gedeelde afspeellijsten op, gesorteerd op meest recente eerst const sharedPlaylists = req.user.sharedPlaylists .sort((a, b) => b.timestamp - a.timestamp) // Sorteer aflopend op tijdstempel .slice(0, 10); // Haal de eerste 10 res.json({ sharedPlaylists }); } catch (err) { console.error('Fout in gedeelde afspeellijsten:', err); res.status(500).json({ error: 'Kan gedeelde afspeellijsten niet laden' }); } }); // POST /api/add-friend - Voeg een vriend toe (wederzijdse vriendschap) app.post('/api/add-friend', auth, async (req, res) => { try { const { friendUsername } = req.body; // Zoek de vriend op gebruikersnaam const friend = await User.findOne({ username: friendUsername }); if (!friend) { return res.status(404).json({ error: 'Gebruiker niet gevonden' }); } // Controleer of er al vrienden zijn if (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) { return res.status(400).json({ error: 'Al vrienden met deze gebruiker' }); } // Voeg elke gebruiker toe aan elkaars vriendenlijst (wederzijdse vriendschap) req.user.friends.push(friend._id); friend.friends.push(req.user._id); // Sla beide gebruikers op wait req.user.save(); wait friend.save(); res.json({ message: 'Vriend succesvol toegevoegd', friendId: friend._id }); } catch (err) { console.error('Vriend toevoegen fout:', err); console.error('Fout stack:', err.stack); res.status(500).json({ error: 'Vriend toevoegen mislukt' }); } }); // POST /api/personalized-playlist - Genereer een afspeellijst op basis van stemming app.post('/api/personalized-playlist', auth, async (req, res) => { try { const { text, shareWithFriends = false, playlistSize = 15 } = req.body; if (!text) { return res.status(400).json({ error: 'Vertel me alsjeblieft hoe je je voelt!' }); } // 1. Analyseer de stemming op basis van de tekst van de gebruiker const moodAnalysis = moodAnalyzer.analyzeMood(text); // 2. Genereer een afspeellijst op basis van stemming const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 3. Opslaan in de stemmingsgeschiedenis van de gebruiker const entry = { text, detectedMood: moodAnalysis.mood, confidence: moodAnalysis.confidence, isShared: shareWithFriends, sharedWith: shareWithFriends ? req.user.friends : [], playlistGenerated: playlist.map(t => ({ trackName: t.name, artist: t.artist, spotifyId: t.id })) }; req.user.moodHistory.push(entry); req.user.updateStats(); await req.user.save(); // 4. Als delen is ingeschakeld, opslaan in de sharedPlaylists-array van elke vriend if (shareWithFriends && req.user.friends.length > 0) { const sharedPlaylistData = { sharedBy: req.user._id, sharedByUsername: req.user.username, mood: moodAnalysis.mood, playlist: playlist.slice(0, 5).map(t => ({ // Deel de eerste 5 nummers name: t.name, artiest: t.artist, album_image: t.album_image, id: t.id })) }; // Loop door alle vrienden en voeg deze afspeellijst toe aan hun gedeelde afspeellijsten for (let friendId of req.user.friends) { const friend = await User.findById(friendId); if (friend) { friend.sharedPlaylists.push(sharedPlaylistData); await friend.save(); } } } // 5. Stuur antwoord terug naar de client res.json({ moodAnalysis, playlist, personalizedMessage: `Op basis van je geschiedenis is dit je perfecte ${moodAnalysis.mood}-afspeellijst!` }); } catch (err) { console.error('Fout in gepersonaliseerde afspeellijst:', err); console.error('Fout in stack:', err.stack); res.status(500).json({ error: 'Mislukt om genereer een gepersonaliseerde afspeellijst. Probeer het opnieuw.' }); } }); // Terugvaloptie: serveer index.html voor alle niet-API-routes (voor SPA-routering) app.use((req, res, next) => { if (req.method === 'GET' && !req.path.startsWith('/api/')) { res.sendFile(path.join(__dirname, 'public', 'index.html')); } else { next(); } }); // Globale foutafhandeling app.use((err, req, res, next) => { console.error('Globale fout:', err); res.status(500).json({ error: 'Interne serverfout', details: err.message }); }); // Start de server server.listen(PORT, () => { console.log(`🚀 Server draait op http://localhost:${PORT}`); });

Uitleg van belangrijke serverconcepten:

Middleware – Functies die verzoeken verwerken voordat ze uw routehandlers bereiken. express.json() parseert JSON uit verzoekbody's, auth verifieert JWT-tokens.
async/await – Moderne JavaScript-syntaxis voor het verwerken van asynchrone bewerkingen (zoals databasequery's). await pauzeert de uitvoering totdat de belofte is verwerkt.
HTTP-statuscodes – Cijfers die het resultaat aangeven: 200 = geslaagd, 201 = aangemaakt, 400 = ongeldige aanvraag, 401 = ongeautoriseerd, 404 = niet gevonden, 500 = serverfout.
Socket.io-gebeurtenissen – Benoemde berichten die heen en weer gaan tussen client en server. socket.on() luistert naar gebeurtenissen, socket.emit() verzendt gebeurtenissen.
JWT (JSON Web Token) – Een veilige manier om gebruikers te identificeren. Wanneer ze inloggen, geven we ze een token. Ze sturen deze token met elke aanvraag mee om te bewijzen wie ze zijn.

Stap 5: Frontend JavaScript bijwerken (public/js/app.js)

Tot slot voegen we de JavaScript toe die onze frontend interactief maakt. Deze code wordt uitgevoerd in de browser van de gebruiker en verwerkt zaken als klikken op knoppen, API-verzoeken en realtime-updates.

Wat deze JavaScript doet:

Beheert authenticatie – Inloggen, registreren, uitloggen en tokenopslag
Initialiseert Socket.io – Maakt verbinding met de server en luistert naar realtime-gebeurtenissen
Doet API-verzoeken – Gebruikt fetch() om te communiceren met servereindpunten
Werkt de gebruikersinterface bij – Maakt dynamisch HTML-elementen aan op basis van gegevens van de server
Verwerkt gebruikersinteracties – Klikken op knoppen, formulierinzendingen, enz.

Vervang uw public/js/app.js door de volledige code die in de tutorial wordt getoond...

(De Het app.js-codeblok volgt precies hetzelfde als hiervoor, met alle functies voor inloggen, registreren, loadSharedPlaylists, enz.

Stap 6: Test je Social Music API

Nu is het tijd om alles te testen! Volg deze stappen zorgvuldig:

Start je server: Voer npm start uit in je terminal. Je zou berichten moeten zien zoals "MongoDB connected!" en "Server running on http://localhost:3000".
Open twee browservensters: Open http://localhost:3000 in twee afzonderlijke browservensters (of één normaal venster en één incognitovenster). Dit simuleert twee verschillende gebruikers.
Registreer Gebruiker 1: Klik in het eerste venster op "Aanmelden" en maak een gebruiker aan (bijv. gebruikersnaam: "alice").
Registreer Gebruiker 2: Maak in het tweede venster nog een gebruiker aan (bijv. gebruikersnaam: "bob").
Voeg elkaar toe als vrienden: Typ in Alice's venster "bob" in het veld "Vriend toevoegen" en klik op Vriend toevoegen. Doe hetzelfde in Bobs venster (typ "alice"). Jullie zouden elkaar in jullie vriendenlijst moeten zien!
Deel een afspeellijst: Typ in Alice's venster iets als "Ik voel me vandaag superblij!" in het tekstvak voor je stemming. Vink het vakje 'Delen met vrienden' aan en klik vervolgens op 'Afspeellijst genereren'.
Zie de magie gebeuren:
- Als Bob online is (het venster is nog steeds open), ziet hij een melding van rechts verschijnen!
- Bob zou ook de gedeelde afspeellijst van Alice moeten zien verschijnen in het gedeelte 'Recente activiteit'.
- Bob kan op de gedeelde afspeellijst klikken om de volledige lijst met nummers te bekijken.
- Als Bob uitlogt en later weer inlogt, is de gedeelde afspeellijst er nog steeds!

Begrijpen hoe het allemaal samenwerkt

Laten we eens kijken wat er gebeurt als Alice een afspeellijst deelt met Bob:

Alice vinkt "Delen met vrienden" aan en klikt op "Afspeellijst genereren"
Frontend stuurt een POST-verzoek naar /api/personalized-playlist met shareWithFriends: true
Server analyseert Alice's stemming en genereert een afspeellijst met behulp van de Spotify API
Server slaat de afspeellijst op in Alice's moodHistory-array
Server doorloopt Alice's vrienden (inclusief Bob) en voegt de afspeellijst toe aan de sharedPlaylists-array van elke vriend in MongoDB
Frontend stuurt een share_playlist Socket.io-gebeurtenis om online vrienden op de hoogte te stellen
Server ontvangt de gebeurtenis en controleert of Bob online is (kijkt in de connectedUsers-kaart)
Als Bob online is, stuurt de server hem een friend_shared_playlist-gebeurtenis met een voorbeeld van de afspeellijst
Bobs browser ontvangt de gebeurtenis en roept showNotification() aan om een pop-up weer te geven
Bobs browser roept ook loadSharedPlaylists() aan om de activiteitenfeed te vernieuwen
Als Bob offline is, ziet hij de afspeellijst in zijn activiteitenfeed wanneer hij de volgende keer inlogt (omdat deze is opgeslagen in zijn sharedPlaylists-array)

Wat u hebt Gebouwd

Gefeliciteerd! Je hebt met succes een complete sociale muziekapp gebouwd! Dit is wat je hebt bereikt:

🤝 Vriendensysteem – Gebruikers kunnen vrienden toevoegen op basis van hun gebruikersnaam. Vriendschappen zijn wederzijds (beide gebruikers worden vrienden van elkaar) en worden opgeslagen als ObjectId-verwijzingen in MongoDB.

💾 Blijvend delen van afspeellijsten – Gedeelde afspeellijsten worden opgeslagen in de database in de `sharedPlaylists`-array van elke vriend. Dit betekent dat de gegevens blijven bestaan, zelfs nadat gebruikers zijn uitgelogd.

📡 Realtime meldingen – Met Socket.io ontvangen online gebruikers direct meldingen wanneer vrienden afspeellijsten delen. Geen paginavernieuwing nodig!

📰 Activiteitenfeed – Gebruikers kunnen recent gedeelde afspeellijsten van al hun vrienden zien, gesorteerd op nieuwste eerst. Als je op een afspeellijst klikt, wordt de volledige lijst met nummers weergegeven.

🔐 Veilige authenticatie – Wachtwoorden worden gehasht met bcrypt (nooit opgeslagen als platte tekst) en JWT-tokens worden gebruikt om API-aanvragen te verifiëren.

⏱️ Offline-vriendelijk – Vrienden kunnen gedeelde afspeellijsten bekijken, zelfs als ze niet online waren toen de afspeellijst werd gedeeld. Alles wordt opgeslagen in de database!

Belangrijkste concepten die u hebt geleerd

Realtime communicatie met Socket.io (WebSockets)
Databaserelaties met behulp van MongoDB ObjectId-verwijzingen
Denormalisatie voor prestaties (zowel ObjectId als gebruikersnaam opslaan)
RESTful API-ontwerp (GET-, POST-eindpunten met de juiste HTTP-statuscodes)
Middleware-patroon voor authenticatie en aanvraagverwerking
Async/await voor het verwerken van asynchrone bewerkingen
DOM-manipulatie om de gebruikersinterface dynamisch bij te werken
Gebeurtenisgestuurde architectuur met Socket.io-gebeurtenissen

Problemen oplossen met veelvoorkomende problemen

"Kan geen verbinding maken met MongoDB" – Controleer of je MongoDB-server actief is en of je MONGODB_URI in .env correct is.
"Ongeldige inloggegevens" bij het inloggen – Controleer je gebruikersnaam en wachtwoord. Let op: deze zijn hoofdlettergevoelig!
"Gebruiker niet gevonden" bij het toevoegen van een vriend – Zorg ervoor dat je de exacte gebruikersnaam typt (hoofdlettergevoelig). De gebruiker moet zich eerst hebben geregistreerd.
Gedeelde afspeellijsten worden niet weergegeven – Controleer de console van je browser (F12) op fouten. Controleer of beide gebruikers vrienden zijn en of het selectievakje "Delen met vrienden" is aangevinkt.
Realtimemeldingen werken niet – Controleer of Socket.io verbonden is. Controleer de browserconsole op "🔗 Verbonden met server".

Volgende stappen en ideeën om uit te breiden

Nu je een werkende sociale muziek-app hebt, volgen hier enkele ideeën om ermee verder te gaan:

Vriendschapsverzoeken – In plaats van directe vriendschapsverzoeken, moet je gebruikers verzoeken laten sturen die geaccepteerd of geweigerd kunnen worden.
Privéberichten – Voeg een chatsysteem toe met Socket.io, zodat vrienden elkaar berichten kunnen sturen.
Reacties op afspeellijsten – Laat gebruikers reageren op gedeelde afspeellijsten.
Nummers leuk/niet leuk vinden – Voeg duim omhoog/omlaag-knoppen toe aan elk nummer in een afspeellijst.
Compatibiliteit van muzieksmaak – Bereken een percentage op basis van hoe vergelijkbaar de muziekvoorkeuren van twee gebruikers zijn.
Gebruikers zoeken – Voeg een zoekfunctie toe om gebruikers te vinden op gebruikersnaam.
Verwijderen/ontvrienden – Voeg de mogelijkheid toe om vrienden te verwijderen of gedeelde afspeellijsten te verwijderen
Profielpagina's – Toon gebruikersstatistieken, favoriete stemmingen en recente afspeellijsten
Samenwerkende afspeellijsten – Laat meerdere vrienden nummers toevoegen aan een gedeelde afspeellijst
Afspeellijstgeschiedenis – Bekijk al je eerder gegenereerde afspeellijsten

Je hebt een complete sociale muziekapp gebouwd met realtime functies en permanente gegevensopslag! Dit is een solide basis voor het begrijpen van moderne webontwikkeling. Blijf experimenteren en bouwen!🎵✨