Adăugați prieteni la API-ul dvs. de citire a gândurilor pentru muzică: Partajare socială în timp real

Sunteți gata să faceți API-ul dvs. de citire a gândurilor pentru muzică cu adevărat social? În acest tutorial, veți adăuga un sistem robust de prieteni și partajarea listelor de redare care persistă în baza de date, astfel încât utilizatorii să poată vizualiza listele de redare partajate ale prietenilor lor chiar și atunci când nu sunt online. Vom folosi Socket.io pentru actualizări în timp real și MongoDB pentru stocare persistentă.

Ce veți construi

Sistem de prieteni – Adăugați și gestionați prieteni după numele de utilizator, cu prietenie reciprocă folosind ObjectIds
Partajare persistentă a listelor de redare – Listele de redare partajate sunt salvate în baza de date și pot fi vizualizate oricând
Notificări în timp real – Primiți notificări instantanee când prietenii partajează (dacă sunt online)
Flux de activitate – Vedeți distribuirile recente ale prietenilor cu previzualizări ale listelor de redare pe care se poate da clic
Analiză îmbunătățită a stării de spirit – Generare inteligentă de liste de redare cu opțiuni de căutare rezerve

Cerințe preliminare

API-ul dvs. Mind-Reading Music finalizat din Partea 2
MongoDB, Node.js și npm instalate
Acreditări API Spotify (ID client și Secret)
30–45 de minute de programare

În Partea a 2-a, ați creat conturi de utilizator cu istoric al stărilor de spirit și preferințe inteligente. Acum vom face ca lucrurile să fie sociale! Veți învăța cum să conectați utilizatorii, să partajați liste de redare atât în timp real, cât și persistent și să vedeți ce ascultă prietenii dvs. în funcție de stările lor de spirit.

Înțelegerea conceptelor cheie

Înainte de a intra în cod, haideți să înțelegem ce construim:

Socket.io – O bibliotecă care permite comunicarea bidirecțională, în timp real, între server și browser. Gândește-te la asta ca la un apel telefonic în loc de mesaje text – poți trimite și primi informații instantaneu fără a actualiza pagina.
Stocare persistentă – Salvarea datelor în baza de date MongoDB, astfel încât acestea să rămână acolo chiar și atunci când utilizatorii se deconectează. Aceasta este ca și cum ai salva un fișier pe hard disk în loc să îl păstrezi doar în memorie.
Referințe ObjectId – Modul MongoDB de a crea relații între date. În loc să copiezi toate informațiile prietenului tău în profilul tău, stochezi doar o referință (ca un pointer) către profilul său.
Schema – Gândește-te la acestea ca la niște planuri care definesc structura datelor tale. Acestea îi spun lui MongoDB ce câmpuri ar trebui să aibă fiecare document și ce tip de date intră în fiecare câmp.

Pasul 1: Instalați dependențele necesare

Deschideți terminalul în directorul proiectului și instalați Socket.io pentru funcții în timp real:

npm install socket.io

Ce face aceasta: Această comandă descarcă și instalează biblioteca Socket.io în proiectul dumneavoastră. Comanda npm install preia pachete din registrul npm (o bibliotecă imensă de cod JavaScript) și le adaugă în folderul node_modules.

Celelalte dependențe (sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv) ar trebui să fie deja instalate din Partea 2.

Pasul 2: Actualizați modelul de utilizator cu funcții sociale

Deoarece ați creat deja un model de utilizator în Partea 2, îl vom actualiza pentru a adăuga funcții sociale. Modelul de utilizator este ca un șablon care definește ce informații stocăm despre fiecare utilizator în baza noastră de date.

Ce adăugăm:

friends - O listă de referințe ObjectId la alți utilizatori. În loc să stocăm informații complete despre utilizatori, stocăm doar ID-uri care indică alte documente ale utilizatorilor din baza de date.

Câmpurile
sharedWith și isShared – Acestea urmăresc ce intrări de dispoziție au fost partajate și cu cine au fost partajate.

sharedPlaylistSchema – O nouă schemă (blueprint) care definește cum arată o listă de redare partajată: cine a partajat-o, pentru ce dispoziție a fost, piesele și când a fost partajată.
Matricea
sharedPlaylists – O listă care stochează toate listele de redare pe care prietenii tăi le-au partajat cu tine.

Înlocuiește fișierul models/User.js cu:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // Schemă pentru intrările individuale de stare de spirit (de fiecare dată când utilizatorul generează o listă de redare) const moodEntrySchema = new mongoose.Schema({ text: String, // Ce a tastat utilizatorul (de exemplu, „mă simt fericit astăzi”) detectedMood: String, // Starea de spirit detectată de analizorul nostru (de exemplu, „fericit”) confidence: Number, // Cât de încrezători suntem (0-10) playlistGenerated: [{ // Matrice de piese recomandate trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } // null = neevaluat, true = apreciat, false = neapreciat }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // Cu cine am distribuit asta? isShared: { type: Boolean, default: false }, // A fost distribuită? timestamp: { type: Date, default: Date.now } // Când a fost creată? }); // Schemă pentru preferințele utilizatorului (genuri favorite etc.) const userPreferencesSchema = new mongoose.Schema({ favoriteGenres: [String], preferredEnergyLevel: { type: Number, min: 0, max: 1 }, dislikedArtists: [String], moodMusicMapping: { happy: [String], sad: [String], energic: [String], chill: [String], angry: [String], romantic: [String], nostalgic: [String] } }); // NOU: Schemă pentru listele de redare pe care prietenii le partajează cu tine const sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // Referință ObjectId la prietenul care a partajat sharedByUsername: String, // Nume de utilizator pentru afișare ușoară (denormalizat pentru performanță) stare de spirit: String, // Pentru ce stare de spirit era această listă de redare? playlist: [{ // Numele real al piesei: String, artist: String, album_image: String, id: String }], timestamp: { type: Date, default: Date.now } // Când a fost partajată? }); // Schema principală a utilizatorului - definește structura unui document de utilizator 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' }], // Matrice de referințe ObjectId la prieteni moodHistory: [moodEntrySchema], // Toate listele de redare pe care acest utilizator le-a generat sharedPlaylists: [sharedPlaylistSchema], // Listele de redare pe care prietenii le-au partajat cu acest utilizator preferences: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Number, default: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { type: Date, default: Date.now } } }, { timestamps: true }); // Adaugă automat câmpurile createdAt și updatedAt // Middleware: Execută această funcție înainte de a salva un utilizator (pentru a-i share parola) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // Hash doar dacă parola a fost modificată this.password = await bcrypt.hash(this.password, 12); // Hash cu 12 runde de sare next(); }); // Metodă: Verifică dacă o parolă se potrivește cu parola hash userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // Metodă: Actualizează statisticile utilizatorilor pe baza istoricului stărilor lor de spirit userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean); // Obține toate stările de spirit care nu sunt goale this.stats.totalPlaylists = moods.length; if (moods.length > 0) { // Numără de câte ori apare fiecare stare de spirit const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // Găsește starea de spirit cu cel mai mare număr this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral'); } else { this.stats.mostCommonMood = 'neutral'; } // Calculează ora preferată din zi pe baza momentului în care generează liste de redare 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'; } }; // Exportăm modelul pentru a-l putea folosi în alte fișiere module.exports = mongoose.model('User', userSchema);

Concepte cheie explicate:

Referințe ObjectId – Tabloul friends nu stochează obiecte utilizator întregi. În schimb, stochează ObjectId-uri (identificatori unici) care indică alți utilizatori. Acest lucru este eficient deoarece, dacă un prieten își schimbă numele de utilizator, nu trebuie să îl actualizăm peste tot – pur și simplu urmăm referința.

Denormalizare – Observați că stocăm atât sharedBy (ObjectId), cât și sharedByUsername (String). Aceasta se numește denormalizare – stocarea acelorași date în mai multe locuri pentru performanță. Stocăm numele de utilizator pentru a nu fi nevoiți să căutăm utilizatorul de fiecare dată când afișăm liste de redare partajate.

Middleware (.pre()) – Aceasta rulează automat înainte de anumite operațiuni. Aici, parolele sunt hașate înainte de a fi salvate în baza de date, din motive de securitate.

Metode de instanță (.methods) – Acestea sunt funcții pe care le puteți apela asupra documentelor individuale ale utilizatorilor, cum ar fi user.comparePassword() sau user.updateStats().

Pasul 3: Actualizați-vă interfața HTML cu funcții sociale

Acum, haideți să actualizăm interfața cu utilizatorul pentru a include gestionarea prietenilor și un flux de activități. HTML-ul definește structura paginii web – ce elemente apar și unde sunt poziționate.

Ce adăugăm în interfața cu utilizatorul:

Secțiunea Listă de prieteni – Afișează prietenii actuali

Adăugați un prieten – Câmp de text pentru a introduce numele de utilizator al unui prieten

Flux de activitate recentă – Afișează listele de redare pe care prietenii le-au distribuit (se poate face clic pentru a vizualiza lista de redare completă)

Casetă de selectare Partajare – Opțiune de a partaja lista de redare generată cu prietenii

Zonă de notificare – Notificări pop-up pentru actualizări în timp real

Înlocuiți public/index.html cu:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Mind-Reading Music API - Social</title> <style> /* Resetează stilurile implicite ale browserului */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Stilizarea corpului principal cu fundal gradient */ body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; color: #333; } /* Container pentru întregul tablou de bord */ .dashboard { max-width: 1000px; margin: 0 auto; padding: 20px; } /* Secțiune antet cu mesaj de bun venit */ .header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); /* Efect de estompare pentru glassmorfism */ border-radius: 20px; padding: 30px; margin-bottom: 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* Aspect grilă pe două coloane: secțiune playlist (mai mare) și secțiune prieteni (mai mică) */ .main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } /* Stilizarea cardului pentru ambele secțiuni */ .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); } /* Stilizarea elementelor formularului */ input, textarea, button { width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; } /* Stilizare specifică butoanelor cu fundal gradient */ button { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; cursor: pointer; font-weight: 600; } /* Efect subtil de hover asupra butoanelor */ button:hover { transform: translateY(-2px); } /* Stilizare individuală a elementului prieten */ .friend-item { background: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 8px; border-left: 4px solid #667eea; /* Culoare de accent în stânga */ } /* Stilizarea ferestrei pop-up de notificări (ascunsă implicit, glisează din dreapta) */ .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); /* Pornire în afara ecranului */ transition: transform .3s ease; z-index: 1000; max-width: 300px; } /* Afișează notificarea (glisează) */ .notification.show { transform: translateX(0); } /* Formulare de autentificare și înregistrare */ .login-section, .register-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; max-width: 400px; margin: 50px auto; } /* Controale tip casetă de selectare pentru partajare */ .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">  <div id="authSection">  <div class="login-section"> <h2>🧠🎵 Bine ați revenit!</h2> <input type="text" id="loginUsername" placeholder="Nume utilizator"/> <input type="password" id="loginPassword" placeholder="Parolă"/> <button onclick="login()">Autentificare</button> <p><a href="#" onclick="showRegister()">Nu aveți un cont? Înregistrați-vă</a></p> </div>  <div id="registerSection" class="register-section" style="display:none"> <h2>🎵 Creează-ți profilul muzical</h2> <input type="text" id="regUsername" placeholder="Nume utilizator"/> <input type="email" id="regEmail" placeholder="Email"/> <input type="password" id="regPassword" placeholder="Parolă"/> <button onclick="register()">Creează cont</button> <p><a href="#" onclick="showLogin()">Ai deja un cont? Conectează-te</a></p> </div> </div>  <div id="dashboardSection" style="display:none">  <div class="header"> <h1>🧠🎵 Cititorul tău personal de gânduri muzicale</h1> <p>Bun venit, <span id="username"></span>!</p> <button onclick="logout()" style="width:auto; margin-top:10px">Deconectare</button> </div>  <div class="main-content">  <div class="playlist-section"> <h2>💭 Cum te simți?</h2> <textarea id="moodText" placeholder="Descrie-ți starea de spirit..."></textarea> <div class="share-controls"> <label><input type="checkbox" id="shareWithFriends"/>Distribuie cu prietenii</label> </div> <button onclick="generatePlaylist()">🎧 Generează listă de redare</button>  <div id="result" style="display:none"></div> </div>  <div class="friends-section"> <h3>👥 Prietenii mei</h3> <div id="friendsList"></div> <h4>Adaugă un prieten</h4> <input type="text" id="friendUsername" placeholder="Numele de utilizator al prietenului"/> <button onclick="addFriend()">Adaugă un prieten</button> <h4>Activitate recentă</h4>  <div id="friendActivity">Activitatea prietenilor va apărea aici...</div> </div> </div> </div>  <div id="notificationArea"></div>  <script src="/socket.io/socket.io.js"></script>  <script src="./js/app.js"></script> </body> </html>

Înțelegerea structurii HTML:

Două secțiuni principale: authSection (autentificare/înregistrare) și dashboardSection (aplicația principală). Doar una este vizibilă la un moment dat.

Aspect grilă: .main-content folosește CSS Grid pentru a crea două coloane (2fr pentru playlist, 1fr pentru prieteni). Asta înseamnă că secțiunea listei de redare este de două ori mai lată.

Gestionare evenimente: onclick="functionName()" îi spune browserului să apeleze o funcție JavaScript atunci când se dă clic pe element.

ID-uri: Elementele au ID-uri unice (cum ar fi id="friendsList"), astfel încât JavaScript-ul nostru le poate găsi și modifica ulterior.

Pasul 4: Actualizați server.js cu Socket.io, puncte finale prieten și partajare persistentă

Acum vom actualiza serverul nostru pentru a gestiona cererile de prietenie, partajarea listelor de redare și comunicarea în timp real. Serverul este „creierul” aplicației tale – procesează cererile, comunică cu baza de date și trimite răspunsuri înapoi utilizatorilor.

Ce adăugăm la server:

Server Socket.io – Permite comunicarea bidirecțională în timp real între server și clienți

/api/add-friend endpoint – Gestionează cererile de prietenie (prietenie reciprocă)

/api/shared-playlists endpoint – Returnează listele de redare pe care prietenii le-au partajat cu tine

/api/personalized-playlist îmbunătățite – Acum salvează listele de redare partajate în bazele de date ale prietenilor

Gestionare de evenimente Socket – Ascultă și emite evenimente în timp real (autentificare, partajare)

Înlocuiește-ți server.js cu:

// Încarcă variabilele de mediu din fișierul .env require('dotenv').config(); // Importă modulele necesare 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'); // Inițializează generatorul de liste de redare const playlistGen = new PlaylistGenerator(); const PORT = process.env.PORT || 3000; // Conectare la baza de date MongoDB async function connectDB() { try { console.log('🔗 Conectare la MongoDB…'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }); console.log('✅ MongoDB s-a conectat cu succes!'); } catch (err) { console.error('❌ Conexiunea MongoDB a eșuat:', err.message); process.exit(1); // Ieșire dacă conexiunea la baza de date eșuează } } connectDB(); // Creează aplicația Express și serverul HTTP const app = express(); const server = http.createServer(app); // Inițializează Socket.io deasupra serverului HTTP const io = socketIo(server); // Mapare pentru urmărirea utilizatorilor online: userId => socketId // Aceasta ne permite să trimitem mesaje către anumiți utilizatori care sunt conectați în prezent const connectedUsers = new Map(); // Gestionar conexiune Socket.io - rulează când un client se conectează io.on('connection', socket => { console.log('🔗 Socket connected:', socket.id); // Gestionează evenimentul 'authenticate' - clientul ne spune cine este socket.on('authenticate', ({ userId, username }) => { // Stochează ID-ul socket al acestui utilizator pentru a-i putea trimite mesaje mai târziu connectedUsers.set(userId, socket.id); socket.userId = userId; // Atașează userId la acest socket socket.username = username; // Atașează numele de utilizator la acest socket console.log(`✅ Utilizator autentificat: ${username}`); }); // Gestionează evenimentul 'share_playlist' - utilizatorul dorește să partajeze cu prietenii socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { try { // Parcurge toate ID-urile prietenilor for (let friendId of friendIds) { // Obține ID-ul socket pentru asta prieten (dacă este online) const sid = connectedUsers.get(friendId.toString()); if (sid) { // Prietenul este online! Trimite-i o notificare în timp real io.to(sid).emit('friend_shared_playlist', { friendName, mood, playlist }); } // Dacă prietenul este offline, va vedea lista de redare în fluxul său de activitate când se va conecta } } catch (err) { console.error('Eroare la partajarea listei de redare:', err); } }); // Gestionează deconectarea - elimină utilizatorul de pe harta online socket.on('disconnect', () => { if (socket.userId) { connectedUsers.delete(socket.userId); console.log(`👋 Deconectat: ${socket.username}`); } }); }); // Middleware pentru analizarea corpurilor cererilor JSON app.use(express.json()); // Difuzează fișiere statice din folderul 'public' (HTML, CSS, imagini) app.use(express.static(path.join(__dirname, 'public'))); // ===== ENDPOINT-URI API ===== // POST /api/register - Creează un cont de utilizator nou app.post('/api/register', async (req, res) => { try { const { username, email, password } = req.body; // Validează datele de intrare if (!username || !email || !password) { return res.status(400).json({ error: 'Toate câmpurile sunt obligatorii' }); } if (password.length < 6) { return res.status(400).json({ error: 'Parola trebuie să aibă cel puțin 6 caractere' }); } // Verifică dacă numele de utilizator sau adresa de e-mail există deja const exists = await User.findOne({ $or: [{ username }, { email }] }); if (exists) { return res.status(400).json({ error: 'Numele de utilizator sau adresa de e-mail există deja' }); } // Creează și salvează un utilizator nou (parola va fi codificată automat prin hashing de middleware-ul nostru de pre-salvare) const user = new User({ nume de utilizator, email, parolă }); await user.save(); res.status(201).json({ mesaj: 'Utilizator creat cu succes' }); } catch (err) { console.error('Eroare de înregistrare:', err); res.status(500).json({ eroare: 'Înregistrarea a eșuat' }); } }); // POST /api/login - Autentifică utilizatorul și returnează token-ul JWT app.post('/api/login', async (req, res) => { try { const { username, password } = req.body; // Găsește utilizatorul după nume de utilizator sau e-mail const user = await User.findOne({ $or: { username }, { email: username }] }); // Verifică dacă utilizatorul există și parola este corectă if (!user || !(await user.comparePassword(password))) { return res.status(401).json({ error: 'Invalid credentials' }); } // Creează token-ul JWT (ca un card de identitate temporar) const token = jwt.sign( { userId: user._id }, // Payload (ceea ce codificăm) process.env.JWT_SECRET, // Cheie secretă (îl păstrează în siguranță) { expiresIn: '7d' } // Token-ul expiră în 7 zile ); // Trimite token-ul înapoi clientului res.json({ token, user: { username: user.username, email: user.email, friends: user.friends } }); } catch (err) { console.error('Eroare de autentificare:', err); res.status(500).json({ error: 'Autentificare eșuată' }); } }); // GET /api/profile - Obține profilul utilizatorului curent // Middleware-ul 'auth' verifică token-ul JWT și atașează utilizatorul la req.user app.get('/api/profile', auth, async (req, res) => { try { // Actualizează statisticile utilizatorului req.user.updateStats(); await req.user.save(); // Populează tabloul friends (înlocuiește ObjectId-urile cu obiecte reale ale utilizatorului) await req.user.populate('friends', 'username _id'); const { username, email, friends } = req.user; res.json({ _id: req.user._id, username, email, friends: friends.map(f => ({ username: f.username, _id: f._id })) }); } catch (err) { console.error('Eroare profil:', err); res.status(500).json({ error: 'Încărcarea nu a reușit' profile' }); } }); // GET /api/shared-playlists - Obține liste de redare pe care prietenii le-au partajat cu tine app.get('/api/shared-playlists', auth, async (req, res) => { try { // Obține ultimele 10 liste de redare partajate, sortate după cea mai recentă const sharedPlaylists = req.user.sharedPlaylists .sort((a, b) => b.timestamp - a.timestamp) // Sortează descrescător după timestamp .slice(0, 10); // Preia primele 10 res.json({ sharedPlaylists }); } catch (err) { console.error('Eroare liste de redare partajate:', err); res.status(500).json({ error: 'Nu s-a putut încărca listele de redare partajate' }); } }); // POST /api/add-friend - Adaugă un prieten (prietenie reciprocă) app.post('/api/add-friend', auth, async (req, res) => { try { const { friendUsername } = req.body; // Găsește prietenul după numele de utilizator const friend = await User.findOne({ username: friendUsername }); if (!friend) { return res.status(404).json({ error: 'Utilizator negăsit' }); } // Verifică dacă sunt deja prieteni if (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) { return res.status(400).json({ error: 'Deja prieteni cu acest utilizator' }); } // Adaugă fiecare utilizator la lista de prieteni a celuilalt (prietenie reciprocă) req.user.friends.push(friend._id); friend.friends.push(req.user._id); // Salvează ambii utilizatori await req.user.save(); await friend.save(); res.json({ mesaj: 'Prieten adăugat cu succes', friendId: friend._id }); } catch (err) { console.error('Eroare la adăugarea prietenului:', err); console.error('Stiva de erori:', err.stack); res.status(500).json({ eroare: 'Adăugarea prietenului nu a reușit' }); } }); // POST /api/personalized-playlist - Generează o listă de redare bazată pe starea de spirit 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: 'Te rog spune-mi cum te simți!' }); } // 1. Analizează starea de spirit din textul utilizatorului const moodAnalysis = moodAnalyzer.analyzeMood(text); // 2. Generează o listă de redare pe baza stării de spirit const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 3. Salvează în istoricul stării de spirit al utilizatorului 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. Dacă partajarea este activată, salvează în matricea sharedPlaylists a fiecărui prieten 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 => ({ // Partajează primele 5 piese name: t.name, artist: t.artist, album_image: t.album_image, id: t.id })) }; // Parcurge toți prietenii și adaugă această listă de redare la Listele lor de redare partajate for (let friendId of req.user.friends) { const friend = await User.findById(friendId); if (friend) { friend.sharedPlaylists.push(sharedPlaylistData); await friend.save(); } } } // 5. Trimite răspunsul înapoi clientului res.json({ moodAnalysis, playlist, personalizedMessage: `Pe baza istoricului tău, iată lista de redare ${moodAnalysis.mood} perfectă!` }); } catch (err) { console.error('Eroare listă de redare personalizată:', err); console.error('Stiva de erori:', err.stack); res.status(500).json({ error: 'Nu s-a putut genera lista de redare personalizată. Vă rugăm să încercați din nou.' }); } }); // Rezervă: Serviți fișierul index.html pentru orice rute non-API (pentru rutare SPA) app.use((req, res, next) => { if (req.method === 'GET' && !req.path.startsWith('/api/')) { res.sendFile(path.join(__dirname, 'public', 'index.html')); } else { next(); } }); // Rulare globală a erorilor app.use((err, req, res, next) => { console.error('Eroare globală:', err); res.status(500).json({ error: 'Eroare internă server', details: err.message }); }); // Porniți serverul server.listen(PORT, () => { console.log(`🚀 Server care rulează pe http://localhost:${PORT}`); });

Concepte cheie ale serverului explicate:

Middleware – Funcții care procesează cererile înainte ca acestea să ajungă la handlerele de rută. express.json() analizează JSON din corpurile cererilor, auth verifică token-urile JWT.

async/await – Sintaxă JavaScript modernă pentru gestionarea operațiunilor asincrone (cum ar fi interogările bazei de date). `await` întrerupe execuția până când promisiunea este rezolvată.
`
Coduri de stare HTTP` – Numere care indică rezultatul: 200 = succes, 201 = creat, 400 = cerere greșită, 401 = neautorizată, 404 = negăsită, 500 = eroare server.
`
Evenimente Socket.io` – Mesaje denumite care circulă între client și server. `socket.on()` ascultă evenimente, `socket.emit()` trimite evenimente.
`
JWT (JSON Web Token)` – O modalitate sigură de a identifica utilizatorii. Când se conectează, le oferim un token. Ei trimit acest token cu fiecare solicitare pentru a dovedi cine sunt.

Pasul 5: Actualizați JavaScript-ul frontend-ului (public/js/app.js)

În cele din urmă, să adăugăm JavaScript-ul care face frontend-ul nostru interactiv. Acest cod rulează în browserul utilizatorului și gestionează lucruri precum clicuri pe butoane, solicitări API și actualizări în timp real.

Ce face acest JavaScript:

Gestionează autentificarea – Autentificare, înregistrare, deconectare și stocarea token-urilor

Inițializează Socket.io – Se conectează la server și ascultă evenimente în timp real

Efectuează solicitări API – Folosește fetch() pentru a comunica cu endpoint-urile serverului

Actualizează interfața cu utilizatorul – Creează dinamic elemente HTML pe baza datelor de la server

Gestionează interacțiunile utilizatorului – Clicuri pe butoane, trimiteri de formulare etc.

Înlocuiți fișierul public/js/app.js cu codul complet prezentat în tutorial...

(Blocul de cod app.js urmează exact așa cum înainte, cu toate funcțiile pentru autentificare, înregistrare, încărcareaSharedPlaylists etc.)

Pasul 6: Testați API-ul dvs. Social Music

Acum este timpul să testați totul! Urmați cu atenție acești pași:

Porniți serverul: În terminal, rulați npm start. Ar trebui să vedeți mesaje precum „MongoDB conectat!” și „Serverul rulează pe http://localhost:3000”.

Deschideți două ferestre de browser: Deschideți http://localhost:3000 în două ferestre de browser separate (sau o fereastră obișnuită și o fereastră incognito). Aceasta simulează doi utilizatori diferiți.

Înregistrați utilizatorul 1: În prima fereastră, faceți clic pe „Înregistrare” și creați un utilizator (de exemplu, nume de utilizator: „alice”).

Înregistrați utilizatorul 2: În a doua fereastră, creați un alt utilizator (de exemplu, nume de utilizator: „bob”).

Adăugați-vă reciproc ca prieteni: În fereastra lui Alice, scrieți „bob” în câmpul „Adăugați un prieten” și faceți clic pe Adăugați un prieten. Faceți același lucru în fereastra lui Bob (scrieți „alice”). Ar trebui să vă vedeți reciproc în listele voastre de prieteni!

Distribuiți o listă de redare: În fereastra lui Alice, scrieți ceva de genul „Mă simt super fericit astăzi!” în caseta de text a stării de spirit. Bifați caseta de selectare „Distribuiți cu prietenii”, apoi faceți clic pe „Generați listă de redare”.

Urmăriți cum se întâmplă magia:

Dacă Bob este online (fereastra este încă deschisă), va vedea o notificare care apare din dreapta!

Bob ar trebui să vadă și lista de redare partajată a lui Alice apărând în secțiunea sa „Activitate recentă”.

Bob poate face clic pe lista de redare partajată pentru a vizualiza lista completă de melodii.

Dacă Bob se deconectează și se conectează din nou mai târziu, lista de redare partajată va fi în continuare acolo!

Înțelegerea modului în care funcționează totul împreună

Să urmărim ce se întâmplă când Alice distribuie o listă de redare cu Bob:

Alice bifează „Distribuie cu prietenii” și dă clic pe „Generează listă de redare”

Frontend trimite o cerere POST către /api/personalized-playlist cu shareWithFriends: true

Serverul analizează starea de spirit a lui Alice și generează o listă de redare folosind API-ul Spotify

Serverul salvează lista de redare în matricea moodHistory a lui Alice

Serverul parcurge prietenii lui Alice (inclusiv Bob) și adaugă lista de redare în matricea sharedPlaylists a fiecărui prieten în MongoDB

Frontend emite o cerere share_playlist Eveniment Socket.io pentru notificarea prietenilor online

Serverul primește evenimentul și verifică dacă Bob este online (caută în harta connectedUsers)

Dacă Bob este online, serverul îi trimite un eveniment friend_shared_playlist cu previzualizarea listei de redare

Browserul lui Bob primește evenimentul și apelează showNotification() pentru a afișa o fereastră pop-up

Browserul lui Bob apelează, de asemenea, loadSharedPlaylists() pentru a reîmprospăta fluxul de activitate

Dacă Bob este offline, va vedea lista de redare în fluxul său de activitate când se va conecta data viitoare (deoarece este salvată în matricea sa sharedPlaylists)

Ce ați construit

Felicitări! Ai construit cu succes o aplicație socială de muzică complet funcțională! Iată ce ai realizat:

🤝 Sistem de prieteni – Utilizatorii pot adăuga prieteni după numele de utilizator. Prieteniile sunt reciproce (ambii utilizatori devin prieteni unul cu celălalt) și sunt stocate ca referințe ObjectId în MongoDB.

💾 Partajare persistentă a listelor de redare – Listele de redare partajate sunt salvate în baza de date în matricea sharedPlaylists a fiecărui prieten. Aceasta înseamnă că datele persistă chiar și după ce utilizatorii se deconectează.

📡 Notificări în timp real – Folosind Socket.io, utilizatorii online primesc notificări instantanee atunci când prietenii partajează liste de redare. Nu este necesară reîmprospătarea paginii!

📰 Flux de activitate – Utilizatorii pot vedea listele de redare partajate recent de la toți prietenii lor, sortate după cele mai noi. Dacă dați clic pe o listă de redare, se afișează lista completă de melodii.

🔐 Autentificare securizată – Parolele sunt codificate prin hashing cu bcrypt (nu sunt niciodată stocate ca text simplu), iar token-urile JWT sunt folosite pentru a autentifica solicitările API.

⏱️ Compatibil offline – Prietenii pot vizualiza listele de redare partajate chiar dacă nu erau online când lista de redare a fost partajată. Totul este salvat în baza de date!

Concepte cheie pe care le-ați învățat

Comunicare în timp real cu Socket.io (WebSockets)

Relații în baza de date folosind referințe MongoDB ObjectId

Denormalizare pentru performanță (stocarea atât a ObjectId-ului, cât și a numelui de utilizator)

Proiectare API RESTful (puncte finale GET, POST cu coduri de stare HTTP adecvate)

Model middleware pentru autentificare și procesare a cererilor

Async/await pentru gestionarea operațiunilor asincrone

Manipulare DOM pentru actualizarea dinamică a interfeței utilizator

Arhitectură bazată pe evenimente cu evenimente Socket.io

Depanarea problemelor comune

„Nu se poate conecta la MongoDB” – Asigurați-vă că serverul MongoDB rulează și că MONGODB_URI din .env este corect.

„Credențiale nevalide” la conectare – Verificați de două ori numele de utilizator și parola. Rețineți că acestea sunt sensibile la majuscule/minuscule!

„Utilizator negăsit” la adăugarea unui prieten – Asigurați-vă că introduceți numele de utilizator exact (sensibil la majuscule/minuscule). Trebuie să se fi înregistrat mai întâi.

Listele de redare partajate nu apar – Verificați consola browserului (F12) pentru erori. Asigurați-vă că ambii utilizatori sunt prieteni și că a fost bifată caseta de selectare „Distribuire cu prietenii”.

Notificările în timp real nu funcționează – Asigurați-vă că Socket.io este conectat. Verificați consola browserului pentru „🔗 Conectat la server”.

Pașii următori și idei pentru extindere

Acum că aveți o aplicație socială de muzică funcțională, iată câteva idei pentru a o dezvolta mai departe:

Cereri de prietenie – În loc de prietenie instantanee, solicitați utilizatorilor să trimită cereri care pot fi acceptate sau refuzate

Mesaje private – Adăugați un sistem de chat folosind Socket.io, astfel încât prietenii să își poată trimite mesaje reciproc

Comentarii pe lista de redare – Permiteți utilizatorilor să comenteze listele de redare partajate

Apreciază/nu-ți place melodiile – Adăugați butoane de apreciere/nu-i plac la fiecare melodie dintr-o listă de redare

Compatibilitate a gusturilor muzicale – Calculați un procent în funcție de cât de similare sunt preferințele muzicale ale doi utilizatori

Căutați utilizatori – Adăugați o funcție de căutare pentru a găsi utilizatori după numele de utilizator

Ștergeți/anulați prietenia – Adăugați posibilitatea de a elimina prieteni sau ștergeți liste de redare partajate

Pagini de profil – Afișați statisticile utilizatorilor, stările de spirit preferate și listele de redare recente

Listuri de redare colaborative – Permiteți mai multor prieteni să adauge melodii la o listă de redare partajată

Istoricul listelor de redare – Vizualizați toate listele de redare generate anterior

Ați construit o aplicație socială completă pentru muzică, cu funcții în timp real și stocare persistentă a datelor! Aceasta este o bază solidă pentru înțelegerea dezvoltării web moderne. Continuați să experimentați și să construiți!🎵✨