Aggiungi amici alla tua API musicale di lettura del pensiero: condivisione social in tempo reale

Pronto a rendere la tua API musicale di lettura del pensiero davvero social? In questo tutorial, aggiungerai un solido sistema di amici e una condivisione di playlist che persiste nel database, così gli utenti possono visualizzare le playlist condivise dai loro amici anche quando non sono online. Utilizzeremo Socket.io per gli aggiornamenti in tempo reale e MongoDB per l'archiviazione persistente.

Cosa costruirai

Sistema di amici – Aggiungi e gestisci amici in base al nome utente con amicizia reciproca tramite ObjectId
Condivisione persistente delle playlist – Le playlist condivise vengono salvate nel database e possono essere visualizzate in qualsiasi momento
Notifiche in tempo reale – Ricevi notifiche istantanee quando gli amici condividono (se online)
Feed attività – Visualizza le recenti condivisioni degli amici con anteprime delle playlist cliccabili
Analisi dell'umore avanzata – Generazione intelligente di playlist con fallback di ricerca

Prerequisiti

La tua API Mind-Reading Music completata da Parte 2
MongoDB, Node.js e npm installati
Credenziali API Spotify (ID cliente e segreto)
30-45 minuti di programmazione

Nella Parte 2, hai creato account utente con cronologia degli stati d'animo e preferenze intelligenti. Ora lo renderemo social! Imparerai come connettere gli utenti, condividere playlist sia in tempo reale che in modo persistente e vedere cosa ascoltano i tuoi amici in base al loro stato d'animo.

Comprendere i concetti chiave

Prima di immergerci nel codice, capiamo cosa stiamo sviluppando:

Socket.io – Una libreria che consente la comunicazione bidirezionale in tempo reale tra il server e il browser. Pensalo come una telefonata invece di un messaggio di testo: puoi inviare e ricevere informazioni istantaneamente senza aggiornare la pagina.
Archiviazione persistente: salva i dati nel tuo database MongoDB in modo che rimangano lì anche quando gli utenti si disconnettono. È come salvare un file sul disco rigido invece di conservarlo semplicemente in memoria.
Riferimenti ObjectId: il modo in cui MongoDB crea relazioni tra i dati. Invece di copiare tutte le informazioni dei tuoi amici nel tuo profilo, memorizzi semplicemente un riferimento (come un puntatore) al loro profilo.
Schemi: pensali come progetti che definiscono la struttura dei tuoi dati. Indicano a MongoDB quali campi deve avere ogni documento e quale tipo di dati deve essere inserito in ogni campo.

Passaggio 1: installare le dipendenze richieste

Aprire il terminale nella directory del progetto e installare Socket.io per le funzionalità in tempo reale:

npm install socket.io

A cosa serve: questo comando scarica e installa la libreria Socket.io nel progetto. Il comando npm install recupera i pacchetti dal registro npm (un'enorme libreria di codice JavaScript) e li aggiunge alla cartella node_modules.

Le altre dipendenze (sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv) dovrebbero essere già state installate dalla Parte 2.

Passaggio 2: Aggiorna il tuo modello utente con funzionalità social

Poiché hai già creato un modello utente nella Parte 2, lo aggiorneremo per aggiungere funzionalità social. Il modello utente è come un modello che definisce quali informazioni memorizziamo su ciascun utente nel nostro database.

Cosa stiamo aggiungendo:

friends array – Un elenco di riferimenti ObjectId ad altri utenti. Invece di memorizzare informazioni complete sull'utente, memorizziamo solo gli ID che puntano ad altri documenti utente nel database.
sharedWith e isShared: questi tengono traccia delle voci di stato d'animo che sono state condivise e con chi.

sharedPlaylistSchema: un nuovo schema (blueprint) che definisce l'aspetto di una playlist condivisa: chi l'ha condivisa, per quale stato d'animo era, le tracce e quando è stata condivisa.

sharedPlaylists array: un elenco che memorizza tutte le playlist che i tuoi amici hanno condiviso con te.

Sostituisci il tuo models/User.js con:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // Schema per le singole voci di umore (ogni volta che l'utente genera una playlist) const moodEntrySchema = new mongoose.Schema({ text: String, // Cosa ha digitato l'utente (ad esempio, "mi sento felice oggi") detectedMood: String, // L'umore rilevato dal nostro analizzatore (ad esempio, "felice") confidence: Number, // Quanto siamo sicuri (0-10) playlistGenerated: [{ // Array di tracce che abbiamo consigliato trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } // null = non valutato, true = piaciuto, false = non piaciuto }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // Con chi abbiamo condiviso questo? isShared: { type: Boolean, default: false }, // È stato condiviso? timestamp: { type: Date, default: Date.now } // Quando è stato creato? }); // Schema per le preferenze dell'utente (generi preferiti, ecc.) 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] } }); // NOVITÀ: Schema per le playlist che gli amici condividono con te const sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // Riferimento ObjectId all'amico che ha condiviso sharedByUsername: String, // Nome utente per una facile visualizzazione (denormalizzato per le prestazioni) mood: String, // Per quale stato d'animo era questa playlist? playlist: [{ // Le tracce effettive name: String, artist: String, album_image: String, id: String }], timestamp: { type: Date, default: Date.now } // Quando è stata condivisa? }); // Schema utente principale: definisce la struttura di un documento utente 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 di riferimenti ObjectId agli amici moodHistory: [moodEntrySchema], // Tutte le playlist generate da questo utente sharedPlaylists: [sharedPlaylistSchema], // Playlist che gli amici hanno condiviso con questo utente preferences: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Numero, predefinito: 0 }, favoriteTime: Stringa, mostCommonMood: Stringa, joinDate: { tipo: Data, predefinito: Date.now } } }, { timestamp: true }); // Aggiungi automaticamente i campi createdAt e updatedAt // Middleware: esegui questa funzione prima di salvare un utente (per eseguire l'hash della sua password) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // Esegui l'hash solo se la password è stata modificata this.password = await bcrypt.hash(this.password, 12); // Hash con 12 round di salt next(); }); // Metodo: controlla se una password corrisponde alla password sottoposta a hash userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // Metodo: aggiorna le statistiche dell'utente in base alla cronologia del suo umore userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean); // Ottieni tutti gli umori non vuoti this.stats.totalPlaylists = moods.length; if (moods.length > 0) { // Conta quante volte appare ogni umore const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // Trova l'umore con il conteggio più alto this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral'); } else { this.stats.mostCommonMood = 'neutral'; } // Calcola l'ora preferita del giorno in base a quando vengono generate le playlist 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'; } }; // Esportare il modello in modo da poterlo utilizzare in altri file module.exports = mongoose.model('User', userSchema);

Concetti chiave spiegati:

Riferimenti ObjectId – L'array friends non memorizza interi oggetti utente. Invece, memorizza ObjectId (identificatori univoci) che puntano ad altri utenti. Questo è efficiente perché se un amico cambia il suo nome utente, non dobbiamo aggiornarlo ovunque: seguiamo semplicemente il riferimento.

Denormalizzazione – Nota che memorizziamo sia sharedBy (ObjectId) che sharedByUsername (String). Questa è chiamata denormalizzazione: memorizzare gli stessi dati in più posizioni per migliorare le prestazioni. Memorizziamo il nome utente in modo da non doverlo cercare ogni volta che visualizziamo playlist condivise.

Middleware (.pre()) – Viene eseguito automaticamente prima di determinate operazioni. In questo caso, esegue l'hashing delle password prima di salvarle nel database per motivi di sicurezza.

Metodi di istanza (.methods) – Sono funzioni che puoi richiamare sui singoli documenti utente, come user.comparePassword() o user.updateStats().

Passaggio 3: Aggiorna il tuo frontend HTML con le funzionalità social

Ora aggiorniamo l'interfaccia utente per includere la gestione degli amici e un feed delle attività. L'HTML definisce la struttura della tua pagina web: quali elementi appaiono e dove sono posizionati.

Cosa stiamo aggiungendo all'interfaccia utente:

Sezione elenco amici – Mostra i tuoi amici attuali

Aggiungi input amico – Campo di testo per inserire il nome utente di un amico

Feed attività recenti – Mostra le playlist che i tuoi amici hanno condiviso (cliccabile per visualizzare la playlist completa)

Casella di controllo Condividi – Opzione per condividere la playlist generata con gli amici

Area notifiche – Notifiche pop-up per aggiornamenti in tempo reale

Sostituisci il tuo public/index.html con:

<!DOCTYPE html> <html lang="it"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>API musicale per la lettura della mente - Social</title> <style> /* Reimposta gli stili predefiniti del browser */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Stile del corpo principale con sfondo sfumato */ body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; color: #333; } /* Contenitore per l'intera dashboard */ .dashboard { max-width: 1000px; margin: 0 auto; padding: 20px; } /* Sezione di intestazione con messaggio di benvenuto */ .header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); /* Effetto sfocatura per glassmorphism */ border-radius: 20px; padding: 30px; margin-bottom: 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* Layout griglia a due colonne: sezione playlist (più grande) e sezione amici (più piccola) */ .main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } /* Stile della scheda per entrambe le sezioni */ .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); } /* Stile degli elementi del modulo */ input, textarea, button { width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; } /* Stile specifico del pulsante con sfondo sfumato */ button { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; cursor: pointer; font-weight: 600; } /* Effetto hover sottile sui pulsanti */ button:hover { transform: translateY(-2px); } /* Stile dei singoli elementi amico */ .friend-item { background: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 8px; border-left: 4px solid #667eea; /* Colore accento a sinistra */ } /* Stile popup di notifica (nascosto per impostazione predefinita, scorre da destra) */ .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); /* Avvia fuori dallo schermo */ transition: transform .3s ease; z-index: 1000; max-width: 300px; } /* Mostra notifica (slide in) */ .notification.show { transform: translateX(0); } /* Moduli di accesso e registrazione */ .login-section, .register-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; max-width: 400px; margin: 50px auto; } /* Controlli casella di controllo per la condivisione */ .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>🧠🎵 Bentornato!</h2> <input type="text" id="loginUsername" placeholder="Username"/> <input type="password" id="loginPassword" placeholder="Password"/> <button onclick="login()">Accedi</button> <p><a href="#" onclick="showRegister()">Non hai un account? Registrati</a></p> </div>  <div id="registerSection" class="register-section" style="display:none"> <h2>🎵 Crea il tuo profilo musicale</h2> <input type="text" id="regUsername" placeholder="Nome utente"/> <input type="email" id="regEmail" placeholder="Email"/> <input type="password" id="regPassword" placeholder="Password"/> <button onclick="register()">Crea account</button> <p><a href="#" onclick="showLogin()">Hai già un account? Accedi</a></p> </div> </div>  <div id="dashboardSection" style="display:none">  <div class="header"> <h1>🧠🎵 Il tuo lettore musicale personale</h1> <p>Benvenuto, <span id="username"></span>!</p> <button onclick="logout()" style="width:auto; margin-top:10px">Disconnessione</button> </div>  <div class="main-content">  <div class="playlist-section"> <h2>💭 Come ti senti?</h2> <textarea id="moodText" placeholder="Descrivi il tuo umore..."></textarea> <div class="share-controls"> <label><input type="checkbox" id="shareWithFriends"/>Condividi con gli amici</label> </div> <button onclick="generatePlaylist()">🎧 Genera playlist</button>  <div id="result" style="display:none"></div> </div>  <div class="friends-section"> <h3>👥 I miei amici</h3> <div id="friendsList"></div> <h4>Aggiungi un amico</h4> <input type="text" id="friendUsername" placeholder="Nome utente dell'amico"/> <button onclick="addFriend()">Aggiungi amico</button> <h4>Attività recenti</h4>  <div id="friendActivity">L'attività degli amici verrà visualizzata qui...</div> </div> </div> </div> </div>  <div id="notificationArea"></div>  <script src="/socket.io/socket.io.js"></script>  <script src="./js/app.js"></script> </body> </html>

Comprendere la struttura HTML:

Due sezioni principali: authSection (login/register) e dashboardSection (app principale). Solo una è visibile alla volta.

Layout a griglia: .main-content utilizza la griglia CSS per creare due colonne (2fr per la playlist, 1fr per gli amici). Ciò significa che la sezione playlist è larga il doppio.

Gestori eventi: onclick="functionName()" indica al browser di chiamare una funzione JavaScript quando si fa clic sull'elemento.

ID: gli elementi hanno ID univoci (come id="friendsList") in modo che il nostro JavaScript possa trovarli e modificarli in seguito.

Passaggio 4: aggiorna server.js con Socket.io, endpoint di amicizia e condivisione persistente

Ora aggiorneremo il nostro server per gestire le richieste di amicizia, la condivisione di playlist e la comunicazione in tempo reale. Il server è il "cervello" della tua app: elabora le richieste, comunica con il database e invia risposte agli utenti.

Cosa stiamo aggiungendo al server:

Server Socket.io – Consente la comunicazione bidirezionale in tempo reale tra server e client

/api/add-friend endpoint – Gestisce le richieste di amicizia (amicizia reciproca)

/api/shared-playlists endpoint – Restituisce le playlist che gli amici hanno condiviso con te

/api/personalized-playlist migliorato – Ora salva le playlist condivise nei database degli amici

Gestori eventi Socket – Ascoltano ed emettono eventi in tempo reale (autenticazione, condivisione)

Sostituisci il tuo server.js con:

// Carica le variabili di ambiente dal file .env require('dotenv').config(); // Importa i moduli richiesti 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'); // Inizializza il generatore di playlist const playlistGen = new PlaylistGenerator(); const PORT = process.env.PORT || 3000; // Connettiti al database MongoDB funzione asincrona connectDB() { try { console.log('🔗 Connessione a MongoDB…'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }); console.log('✅ MongoDB connesso correttamente!'); } catch (err) { console.error('❌ Connessione MongoDB non riuscita:', err.message); process.exit(1); // Esci se la connessione al database non riesce } } connectDB(); // Crea l'app Express e il server HTTP const app = express(); const server = http.createServer(app); // Inizializza Socket.io sul server HTTP const io = socketIo(server); // Mappa per tracciare gli utenti online: userId => socketId // Questo ci consente di inviare messaggi a utenti specifici che sono attualmente connessi const connectedUsers = new Map(); // Gestore di connessione Socket.io - viene eseguito quando un client si connette io.on('connection', socket => { console.log('🔗 Socket connesso:', socket.id); // Gestisce l'evento 'authenticate' - il client ci dice chi è socket.on('authenticate', ({ userId, username }) => { // Memorizza l'ID socket di questo utente in modo da potergli inviare messaggi in seguito connectedUsers.set(userId, socket.id); socket.userId = userId; // Allega userId a questo socket socket.username = username; // Allega username a questo socket console.log(`✅ Utente autenticato: ${username}`); }); // Gestisce l'evento 'share_playlist' - l'utente desidera condividere con gli amici socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { try { // Esegue un ciclo attraverso tutti gli ID amico per (let friendId di friendId) { // Ottieni l'ID socket per questo amico (se è online) const sid = connectedUsers.get(friendId.toString()); if (sid) { // L'amico è online! Inviagli una notifica in tempo reale io.to(sid).emit('friend_shared_playlist', { friendName, mood, playlist }); } // Se l'amico è offline, vedrà la playlist nel suo feed attività quando effettuerà l'accesso } } catch (err) { console.error('Errore di condivisione della playlist:', err); } }); // Gestisci la disconnessione: rimuovi l'utente dalla mappa online socket.on('disconnect', () => { if (socket.userId) { connectedUsers.delete(socket.userId); console.log(`👋 Disconnesso: ${socket.username}`); } }); }); // Middleware per analizzare i corpi delle richieste JSON app.use(express.json()); // Servire file statici dalla cartella 'public' (HTML, CSS, immagini) app.use(express.static(path.join(__dirname, 'public'))); // ===== ENDPOINT API ===== // POST /api/register - Crea un nuovo account utente app.post('/api/register', async (req, res) => { try { const { username, email, password } = req.body; // Convalida l'input if (!username || !email || !password) { return res.status(400).json({ error: 'Tutti i campi sono obbligatori' }); } if (password.length < 6) { return res.status(400).json({ error: 'La password deve essere lunga almeno 6 caratteri' }); } // Controlla se il nome utente o l'email esistono già const exists = await User.findOne({ $or: [{ username }, { email }] }); if (exists) { return res.status(400).json({ errore: 'Il nome utente o l'email esiste già' }); } // Crea e salva un nuovo utente (la password verrà automaticamente sottoposta a hash dal nostro middleware di pre-salvataggio) const user = new User({ nome utente, email, password }); await user.save(); res.status(201).json({ messaggio: 'Utente creato correttamente' }); } catch (err) { console.error('Errore di registrazione:', err); res.status(500).json({ errore: 'Registrazione fallita' }); } }); // POST /api/login - Autentica l'utente e restituisce il token JWT app.post('/api/login', async (req, res) => { try { const { username, password } = req.body; // Trova l'utente tramite nome utente o email const user = await User.findOne({ $or: {[ username }, { email: username }] }); // Controlla se l'utente esiste e se la password è corretta if (!user || !(await user.comparePassword(password))) { return res.status(401).json({ error: 'Invalid credentials' }); } // Crea un token JWT (come una carta d'identità temporanea) const token = jwt.sign( { userId: user._id }, // Payload (ciò che stiamo codificando) process.env.JWT_SECRET, // Chiave segreta (mantiene (è sicuro) { expiresIn: '7d' } // Il token scade tra 7 giorni ); // Invia il token al client res.json({ token, user: { username: user.username, email: user.email, friends: user.friends } }); } catch (err) { console.error('Errore di accesso:', err); res.status(500).json({ error: 'Accesso non riuscito' }); } }); // GET /api/profile - Ottieni il profilo dell'utente corrente // Il middleware 'auth' verifica il token JWT e associa l'utente a req.user app.get('/api/profile', auth, async (req, res) => { try { // Aggiorna le statistiche utente req.user.updateStats(); await req.user.save(); // Popola l'array degli amici (sostituisci gli ObjectId con gli oggetti utente effettivi) 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('Errore profilo:', err); res.status(500).json({ errore: 'Impossibile caricare il profilo' }); } }); // GET /api/shared-playlists - Ottieni le playlist che gli amici hanno condiviso con te app.get('/api/shared-playlists', auth, async (req, res) => { try { // Ottieni le ultime 10 playlist condivise, ordinate dalla più recente alla più recente const sharedPlaylists = req.user.sharedPlaylists .sort((a, b) => b.timestamp - a.timestamp) // Ordina in modo decrescente per timestamp .slice(0, 10); // Prendi le prime 10 res.json({ sharedPlaylists }); } catch (err) { console.error('Errore playlist condivise:', err); res.status(500).json({ error: 'Impossibile caricare le playlist condivise' }); } }); // POST /api/add-friend - Aggiungi un amico (amicizia reciproca) app.post('/api/add-friend', auth, async (req, res) => { try { const { friendUsername } = req.body; // Trova l'amico tramite nome utente const friend = await User.findOne({ username: friendUsername }); if (!friend) { return res.status(404).json({ error: 'Utente non trovato' }); } // Controlla se sei già amico if (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) { return res.status(400).json({ error: 'Sei già amico di questo utente' }); } // Aggiungi ogni utente all'elenco degli amici dell'altro (amicizia reciproca) req.user.friends.push(friend._id); friend.friends.push(req.user._id); // Salva entrambi gli utenti await req.user.save(); await friend.save(); res.json({ message: 'Amico aggiunto correttamente', friendId: friend._id }); } catch (err) { console.error('Errore di aggiunta amico:', err); console.error('Stack di errori:', err.stack); res.status(500).json({ error: 'Impossibile aggiungere amico' }); } }); // POST /api/personalized-playlist - Genera una playlist basata sull'umore 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: 'Per favore, dimmi come ti senti!' }); } // 1. Analizza l'umore dal testo dell'utente const moodAnalysis = moodAnalyzer.analyzeMood(text); // 2. Genera una playlist basata sull'umore const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 3. Salva nella cronologia dell'umore dell'utente 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. Se la condivisione è abilitata, salva nell'array sharedPlaylists di ciascun amico 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 => ({ // Condividi le prime 5 tracce name: t.name, artist: t.artist, album_image: t.album_image, id: t.id })) }; // Esegui un ciclo tra tutti gli amici e aggiungi questa playlist alle loro playlist condivise for (let friendId of req.user.friends) { const friend = await User.findById(friendId); if (friend) { friend.sharedPlaylists.push(sharedPlaylistData); await friend.save(); } } } // 5. Invia la risposta al client res.json({ moodAnalysis, playlist, personalizedMessage: `In base alla tua cronologia, ecco la tua playlist ${moodAnalysis.mood} perfetta!` }); } catch (err) { console.error('Errore nella playlist personalizzata:', err); console.error('Stack degli errori:', err.stack); res.status(500).json({ error: 'Fallito per generare una playlist personalizzata. Riprova.' }); } }); // Fallback: servi index.html per qualsiasi percorso non API (per il routing SPA) app.use((req, res, next) => { if (req.method === 'GET' && !req.path.startsWith('/api/')) { res.sendFile(path.join(__dirname, 'public', 'index.html')); } else { next(); } }); // Gestore degli errori globali app.use((err, req, res, next) => { console.error('Errore globale:', err); res.status(500).json({ error: 'Errore interno del server', details: err.message }); }); // Avvia il server server.listen(PORT, () => { console.log(`🚀 Server in esecuzione su http://localhost:${PORT}`); });

Concetti chiave del server spiegati:

Middleware – Funzioni che elaborano le richieste prima che raggiungano i gestori di rotta. express.json() analizza JSON dai corpi delle richieste, auth verifica i token JWT.

async/await – Sintassi JavaScript moderna per la gestione di operazioni asincrone (come le query del database). await mette in pausa l'esecuzione finché la promessa non viene risolta.

Codici di stato HTTP – Numeri che indicano il risultato: 200 = successo, 201 = creato, 400 = richiesta non valida, 401 = non autorizzato, 404 = non trovato, 500 = errore del server.

Eventi Socket.io – Messaggi denominati che vengono scambiati tra client e server. socket.on() ascolta gli eventi, socket.emit() invia eventi.

JWT (JSON Web Token) – Un modo sicuro per identificare gli utenti. Quando accedono, forniamo loro un token. Inviano questo token con ogni richiesta per dimostrare chi sono.

Passaggio 5: aggiorna JavaScript del frontend (public/js/app.js)

Infine, aggiungiamo il JavaScript che rende il nostro frontend interattivo. Questo codice viene eseguito nel browser dell'utente e gestisce operazioni come clic sui pulsanti, richieste API e aggiornamenti in tempo reale.

Cosa fa questo JavaScript:

Gestisce l'autenticazione – Accesso, registrazione, disconnessione e archiviazione dei token

Inizializza Socket.io – Si connette al server e ascolta gli eventi in tempo reale

Effettua richieste API – Utilizza fetch() per comunicare con gli endpoint del server

Aggiorna l'interfaccia utente – Crea dinamicamente elementi HTML in base ai dati del server

Gestisce le interazioni dell'utente – Clic sui pulsanti, invii di moduli, ecc.

Sostituisci il tuo public/js/app.js con il codice completo mostrato nel tutorial...

(Il file app.js Il blocco di codice segue esattamente come prima, con tutte le funzioni per login, registrazione, caricamento di SharedPlaylists, ecc.

Passaggio 6: testa la tua API Social Music

Ora è il momento di testare tutto! Segui attentamente questi passaggi:

Avvia il server: Nel terminale, esegui npm start. Dovresti visualizzare messaggi come "MongoDB connesso!" e "Server in esecuzione su http://localhost:3000".

Apri due finestre del browser: Apri http://localhost:3000 in due finestre del browser separate (oppure una finestra normale e una finestra di navigazione in incognito). Questo simula due utenti diversi.

Registra utente 1: Nella prima finestra, clicca su "Registrati" e crea un utente (ad esempio, nome utente: "alice").

Registra utente 2: Nella seconda finestra, crea un altro utente (ad esempio, nome utente: "bob").

Aggiungetevi a vicenda come amici: Nella finestra di Alice, digita "bob" nel campo "Aggiungi un amico" e clicca su Aggiungi amico. Fai lo stesso nella finestra di Bob (digita "alice"). Dovreste vedervi a vicenda nei vostri elenchi di amici!

Condividi una playlist: Nella finestra di Alice, digita qualcosa come "Oggi mi sento super felice!" nella casella di testo dell'umore. Seleziona la casella di controllo "Condividi con gli amici", quindi fai clic su "Genera playlist".

Guarda la magia:

Se Bob è online (finestra ancora aperta), vedrà una notifica scorrere da destra!

Bob dovrebbe anche vedere la playlist condivisa di Alice apparire nella sua sezione "Attività recenti".

Bob può fare clic sulla playlist condivisa per visualizzare l'elenco completo dei brani.

Se Bob si disconnette e si riconnette in seguito, la playlist condivisa sarà ancora lì!

Capire come funziona tutto insieme

Tracciamo cosa succede quando Alice condivide una playlist con Bob:

Alice seleziona "Condividi con gli amici" e clicca su "Genera playlist"

Il frontend invia una richiesta POST a /api/personalized-playlist con shareWithFriends: true

Il server analizza l'umore di Alice e genera una playlist utilizzando l'API Spotify

Il server salva la playlist nell'array moodHistory di Alice

Il server scorre gli amici di Alice (incluso Bob) e aggiunge la playlist all'array sharedPlaylists di ciascun amico in MongoDB

Il frontend emette un Evento Socket.io share_playlist per avvisare gli amici online

Il server riceve l'evento e controlla se Bob è online (cerca nella mappa connectedUsers)

Se Bob è online, il server gli invia un evento friend_shared_playlist con l'anteprima della playlist

Il browser di Bob riceve l'evento e chiama showNotification() per visualizzare un popup

Il browser di Bob chiama anche loadSharedPlaylists() per aggiornare il feed delle attività

Se Bob è offline, vedrà la playlist nel suo feed delle attività al prossimo accesso (perché è salvata nel suo array sharedPlaylists)

Cosa hai creato

Congratulazioni! Hai creato con successo un'app musicale social completa! Ecco cosa hai realizzato:

🤝 Sistema di amici – Gli utenti possono aggiungere amici tramite il nome utente. Le amicizie sono reciproche (entrambi gli utenti diventano amici l'uno dell'altro) e vengono memorizzate come riferimenti ObjectId in MongoDB.

💾 Condivisione persistente delle playlist – Le playlist condivise vengono salvate nel database nell'array sharedPlaylists di ciascun amico. Ciò significa che i dati persistono anche dopo che gli utenti si disconnettono.

📡 Notifiche in tempo reale – Utilizzando Socket.io, gli utenti online ricevono notifiche istantanee quando gli amici condividono playlist. Non è necessario aggiornare la pagina!

📰 Feed attività – Gli utenti possono vedere le playlist condivise di recente da tutti i loro amici, ordinate dalla più recente alla più recente. Cliccando su una playlist viene visualizzato l'elenco completo delle tracce.

🔐 Autenticazione sicura – Le password vengono sottoposte a hash con bcrypt (mai memorizzate come testo normale) e i token JWT vengono utilizzati per autenticare le richieste API.

⏱️ Compatibile con la modalità offline – Gli amici possono visualizzare le playlist condivise anche se non erano online quando la playlist è stata condivisa. Tutto viene salvato nel database!

Concetti chiave appresi

Comunicazione in tempo reale con Socket.io (WebSocket)

Relazioni tra database utilizzando riferimenti ObjectId di MongoDB

Denormalizzazione per le prestazioni (memorizzazione sia di ObjectId che di nome utente)

Progettazione API RESTful (endpoint GET, POST con codici di stato HTTP appropriati)

Pattern middleware per l'autenticazione e l'elaborazione delle richieste

Async/await per la gestione delle operazioni asincrone

Manipolazione DOM per aggiornare dinamicamente l'interfaccia utente

Architettura basata sugli eventi con eventi Socket.io

Risoluzione dei problemi comuni

"Impossibile connettersi a MongoDB" – Assicurati che il tuo server MongoDB sia in esecuzione e che il tuo MONGODB_URI in .env sia corretto.

"Credenziali non valide" durante l'accesso – Controlla attentamente nome utente e password. Ricorda, sono sensibili alle maiuscole e alle minuscole!

"Utente non trovato" quando aggiungi un amico – Assicurati di digitare il nome utente esatto (sensibile alle maiuscole e alle minuscole). L'utente deve essersi registrato per primo.

Playlist condivise non visualizzate – Controlla la console del tuo browser (F12) per eventuali errori. Assicurati che entrambi gli utenti siano amici e che la casella di controllo "Condividi con gli amici" sia selezionata.

Notifiche in tempo reale non funzionanti – Assicurati che Socket.io sia connesso. Controlla la console del browser per "🔗 Connesso al server".

Prossimi passi e idee per espandersi

Ora che hai un'app musicale social funzionante, ecco alcune idee per svilupparla ulteriormente:

Richieste di amicizia – Invece di un'amicizia immediata, richiedi agli utenti di inviare richieste che possono essere accettate o rifiutate

Messaggistica privata – Aggiungi un sistema di chat utilizzando Socket.io in modo che gli amici possano scambiarsi messaggi

Commenti alle playlist – Consenti agli utenti di commentare le playlist condivise

Tracce Mi piace/Non mi piace – Aggiungi pulsanti pollice in su/giù a ciascuna traccia in una playlist

Compatibilità dei gusti musicali – Calcola una percentuale in base a quanto sono simili le preferenze musicali di due utenti

Cerca utenti – Aggiungi una funzione di ricerca per trovare gli utenti in base al nome utente

Elimina/Rimuovi dagli amici – Aggiungi la possibilità di rimuovere amici o eliminare playlist condivise

Pagine del profilo – Mostra statistiche utente, stati d'animo preferiti e playlist recenti

Playlist collaborative – Consenti a più amici di aggiungere tracce a una playlist condivisa

Cronologia playlist – Visualizza tutte le playlist generate in precedenza

Hai creato un'app musicale social completa con funzionalità in tempo reale e archiviazione dati persistente! Questa è una solida base per comprendere lo sviluppo web moderno. Continua a sperimentare e a costruire!🎵✨