Ajoutez des amis à votre API Mind-Reading Music : Partage social en temps réel

Prêt à rendre votre API Mind-Reading Music véritablement sociale ? Dans ce tutoriel, vous ajouterez un système d'amis robuste et un partage de playlists conservé dans la base de données, afin que les utilisateurs puissent consulter les playlists partagées par leurs amis même lorsqu'ils ne sont pas en ligne. Nous utiliserons Socket.io pour les mises à jour en temps réel et MongoDB pour le stockage persistant.

Ce que vous allez créer

Système d'amis – Ajoutez et gérez vos amis par nom d'utilisateur avec une amitié mutuelle à l'aide d'ObjectIds.
Partage persistant de playlists – Les playlists partagées sont enregistrées dans la base de données et peuvent être consultées à tout moment.
Notifications en temps réel – Recevez des notifications instantanées lorsque vos amis partagent (s'ils sont en ligne).
Flux d'activité – Consultez les partages récents de vos amis avec des aperçus de playlist cliquables.
Analyse d'humeur améliorée – Génération intelligente de playlists avec options de recherche de secours.

Prérequis

Votre API Mind-Reading Music complétée à partir de Partie 2
MongoDB, Node.js et npm installés
Identifiants de l'API Spotify (ID client et secret)
30 à 45 minutes de codage

Dans la partie 2, vous avez créé des comptes utilisateur avec historique des humeurs et préférences intelligentes. Passons maintenant à la socialisation ! Vous apprendrez à connecter les utilisateurs, à partager des playlists en temps réel et de manière permanente, et à voir ce que vos amis écoutent en fonction de leur humeur.

Comprendre les concepts clés

Avant de nous plonger dans le code, comprenons ce que nous construisons :

Socket.io – Une bibliothèque qui permet une communication bidirectionnelle en temps réel entre votre serveur et votre navigateur. Imaginez un appel téléphonique plutôt qu'un SMS : vous pouvez envoyer et recevoir des informations instantanément sans actualiser la page.
Stockage persistant : Sauvegarde des données dans votre base de données MongoDB afin qu'elles y restent même lorsque les utilisateurs se déconnectent. C'est comme enregistrer un fichier sur votre disque dur au lieu de le conserver en mémoire.
Références ObjectId : MongoDB crée des relations entre les données. Au lieu de copier toutes les informations de vos amis dans votre profil, vous stockez simplement une référence (comme un pointeur) vers leur profil.
Schémas : Considérez-les comme des plans qui définissent la structure de vos données. Ils indiquent à MongoDB quels champs chaque document doit contenir et quel type de données doit contenir chaque champ.

Étape 1 : installer les dépendances requises

Ouvrez votre terminal dans le répertoire de votre projet et installez Socket.io pour des fonctionnalités en temps réel :

npm install socket.io

Ce que cela fait : Cette commande télécharge et installe la bibliothèque Socket.io dans votre projet. La commande npm install récupère les paquets du registre npm (une immense bibliothèque de code JavaScript) et les ajoute à votre dossier node_modules.

Les autres dépendances (sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv) devraient déjà être installées depuis la partie 2.

Étape 2 : Mettre à jour votre modèle utilisateur avec des fonctionnalités sociales

Puisque vous avez déjà créé un modèle utilisateur dans la partie 2, nous allons le mettre à jour pour ajouter des fonctionnalités sociales. Le modèle utilisateur est comme un modèle qui définit les informations que nous stockons sur chaque utilisateur dans notre base de données.

Ce que nous ajoutons :

friends array – Une liste de références ObjectId à d'autres utilisateurs. Français Au lieu de stocker les informations complètes de l'utilisateur, nous stockons simplement les identifiants qui pointent vers d'autres documents utilisateur dans la base de données.
sharedWith et isShared champs – Ceux-ci suivent les entrées d'humeur qui ont été partagées et avec qui elles l'ont été.
sharedPlaylistSchema – Un nouveau schéma (plan directeur) qui définit à quoi ressemble une playlist partagée : qui l'a partagée, pour quelle humeur elle était destinée, les pistes et quand elle a été partagée.
sharedPlaylists tableau – Une liste qui stocke toutes les playlists que vos amis ont partagées avec vous.

Remplacez votre models/User.js par :

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // Schéma pour les entrées d'humeur individuelles (chaque fois que l'utilisateur génère une playlist) const moodEntrySchema = new mongoose.Schema({ text: String, // Ce que l'utilisateur a tapé (par exemple, « je me sens heureux aujourd'hui ») detectedMood: String, // L'humeur détectée par notre analyseur (par exemple, « heureux ») confidence: Number, // Notre degré de confiance (0-10) playlistGenerated: [{ // Tableau des pistes que nous avons recommandées trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } // null = non noté, true = aimé, false = non aimé }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // Avec qui avons-nous partagé cela ? isShared: { type: Boolean, default: false }, // Cela a-t-il été partagé ? timestamp: { type: Date, default: Date.now } // Quand cela a-t-il été créé ? }); // Schéma pour les préférences utilisateur (genres favoris, etc.) 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] } }); // NOUVEAU : Schéma pour les playlists que vos amis partagent avec vous const sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // Référence ObjectId à l'ami qui a partagé sharedByUsername: String, // Nom d'utilisateur pour un affichage facile (dénormalisé pour les performances) mood: String, // À quelle ambiance était destinée cette playlist ? playlist: [{ // Nom réel des pistes : String, artiste : String, image_album : String, id : String }], horodatage : { type : Date, par défaut : Date.now } // Quand cela a-t-il été partagé ? }); // Schéma utilisateur principal - définit la structure d'un document utilisateur 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' }], // Tableau de références ObjectId aux amis moodHistory: [moodEntrySchema], // Toutes les listes de lecture générées par cet utilisateur sharedPlaylists: [sharedPlaylistSchema], // Listes de lecture que les amis ont partagées avec cet utilisateur preferences: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Number, default: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { type: Date, default: Date.now } } }, { timestamps: true }); // Ajouter automatiquement les champs createdAt et updatedAt // Middleware: Exécuter cette fonction avant d'enregistrer un utilisateur (pour hacher son mot de passe) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // Hacher uniquement si le mot de passe a été modifié this.password = await bcrypt.hash(this.password, 12); // Hacher avec 12 tours de sel next(); }); // Méthode: Vérifier si un mot de passe correspond au mot de passe haché userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // Méthode : Mettre à jour les statistiques de l'utilisateur en fonction de son historique d'humeur userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean); // Obtenir toutes les humeurs non vides this.stats.totalPlaylists = moods.length; if (moods.length > 0) { // Compter le nombre de fois que chaque humeur apparaît const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // Trouver l'humeur avec le nombre le plus élevé this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral'); } else { this.stats.mostCommonMood = 'neutral'; } // Calculer l'heure préférée de la journée en fonction du moment où ils génèrent des listes de lecture 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'; } }; // Exporter le modèle afin que nous puissions l'utiliser dans d'autres fichiers module.exports = mongoose.model('User', userSchema);

Concepts clés expliqués :

Références ObjectId – Le tableau friends ne stocke pas l'intégralité des objets utilisateur. Au lieu de cela, il stocke les ObjectIds (identifiants uniques) qui pointent vers d'autres utilisateurs. C'est efficace, car si un ami change de nom d'utilisateur, nous n'avons pas besoin de le mettre à jour partout ; nous suivons simplement la référence.
Dénormalisation – Notez que nous stockons à la fois sharedBy (ObjectId) et sharedByUsername (String). C'est ce qu'on appelle la dénormalisation : stocker les mêmes données à plusieurs endroits pour des raisons de performances. Nous stockons le nom d'utilisateur afin de ne pas avoir à rechercher l'utilisateur à chaque affichage de playlists partagées.
Middleware (.pre()) – Exécuté automatiquement avant certaines opérations. Ici, il hache les mots de passe avant de les enregistrer dans la base de données pour des raisons de sécurité.
Méthodes d'instance (.methods) – Ce sont des fonctions que vous pouvez appeler sur des documents utilisateur individuels, comme user.comparePassword() ou user.updateStats().

Étape 3 : Mettez à jour votre interface HTML avec des fonctionnalités sociales

Mettons maintenant à jour l'interface utilisateur pour inclure la gestion des amis et un flux d'activité. Le code HTML définit la structure de votre page Web : les éléments qui apparaissent et leur emplacement.

Ce que nous ajoutons à l'interface utilisateur :

Section Liste d'amis : affiche vos amis actuels.
Ajouter une entrée d'ami : champ de texte pour saisir le nom d'utilisateur d'un ami.
Flux d'activité récent : affiche les listes de lecture partagées par vos amis (cliquable pour afficher la liste de lecture complète).
Case à cocher Partager : option permettant de partager votre liste de lecture générée avec vos amis.
Zone de notification : notifications contextuelles pour les mises à jour en temps réel.

Remplacez votre public/index.html par :

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>API de lecture de pensées musicales - Social</title> <style> /* Réinitialiser les styles de navigateur par défaut */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Style du corps principal avec arrière-plan dégradé */ body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; color: #333; } /* Conteneur pour l'ensemble du tableau de bord */ .dashboard { max-width: 1000px; margin: 0 auto; padding: 20px; } /* Section d'en-tête avec message de bienvenue */ .header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); /* Effet de flou pour le glassmorphisme */ border-radius: 20px; padding: 30px; margin-bottom: 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* Disposition en grille à deux colonnes : section playlist (plus grande) et section amis (plus petite) */ .main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } /* Style de carte pour les deux sections */ .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); } /* Style des éléments de formulaire */ input, textarea, button { width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; } /* Style spécifique aux boutons avec un arrière-plan dégradé */ button { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; cursor: pointer; font-weight: 600; } /* Effet de survol subtil sur les boutons */ button:hover { transform: translateY(-2px); } /* Style individuel des éléments amis */ .friend-item { background: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 8px; border-left: 4px solid #667eea; /* Couleur d'accentuation à gauche */ } /* Style de la fenêtre contextuelle de notification (masquée par défaut, apparaît depuis la droite) */ .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); /* Démarrer hors écran */ transition: transform .3s ease; z-index: 1000; max-width: 300px; } /* Afficher la notification (glisser vers l'intérieur) */ .notification.show { transform: translateX(0); } /* Formulaires de connexion et d'inscription */ .login-section, .register-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; max-width: 400px; margin: 50px auto; } /* Contrôles de case à cocher pour le partage */ .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"> <!-- Section d'authentification (formulaires de connexion/inscription) --> <div id="authSection"> <!-- Formulaire de connexion --> <div class="login-section"> <h2>🧠🎵 Bienvenue !</h2> <input type="text" id="loginUsername" placeholder="Nom d'utilisateur"/> <input type="password" id="loginPassword" placeholder="Mot de passe"/> <button onclick="login()">Connexion</button> <p><a href="#" onclick="showRegister()">Vous n'avez pas de compte ? Inscrivez-vous</a></p> </div> <!-- Formulaire d'inscription (masqué par défaut) --> <div id="registerSection" class="register-section" style="display:none"> <h2>🎵 Créez votre profil musical</h2> <input type="text" id="regUsername" placeholder="Nom d'utilisateur"/> <input type="email" id="regEmail" placeholder="E-mail"/> <input type="password" id="regPassword" placeholder="Mot de passe"/> <button onclick="register()">Créer un compte</button> <p><a href="#" onclick="showLogin()">Vous avez déjà un compte ? Se connecter</a></p> </div> </div> <!-- Section du tableau de bord principal (affichée après la connexion) --> <div id="dashboardSection" style="display:none"> <!-- En-tête avec nom d'utilisateur et bouton de déconnexion --> <div class="header"> <h1>🧠🎵 Votre lecteur personnel de pensées musicales</h1> <p>Bienvenue, <span id="username"></span>!</p> <button onclick="logout()" style="width:auto; margin-top:10px">Déconnexion</button> </div> <!-- Disposition à deux colonnes : section Playlist à gauche, section Amis à droite --> <div class="main-content"> <!-- Colonne de gauche : Génération de playlist --> <div class="playlist-section"> <h2>💭 Comment vous sentez-vous ?</h2> <textarea id="moodText" placeholder="Décrivez votre humeur..."></textarea> <div class="share-controls"> <label><input type="checkbox" id="shareWithFriends"/>Partager avec des amis</label> </div> <button onclick="generatePlaylist()">🎧 Générer la playlist</button> <!-- Les résultats s'affichent ici après la génération de la playlist --> <div id="result" style="display:none"></div> </div> <!-- Colonne de droite : Amis et activité --> <div class="friends-section"> <h3>👥 Mes amis</h3> <div id="friendsList"></div> <h4>Ajouter un ami</h4> <input type="text" id="friendUsername" placeholder="Nom d'utilisateur de l'ami"/> <button onclick="addFriend()">Ajouter un ami</button> <h4>Activité récente</h4> <!-- Les playlists partagées des amis apparaissent ici --> <div id="friendActivity">L'activité des amis apparaîtra ici...</div> </div> </div> </div> </div> <!-- Conteneur pour les fenêtres contextuelles de notification --> <div id="notificationArea"></div> <!-- Inclut la bibliothèque Socket.io (servie automatiquement par notre serveur) --> <script src="/socket.io/socket.io.js"></script> <!-- Inclut notre JavaScript personnalisé --> <script src="./js/app.js"></script> </body> </html>

Comprendre la structure HTML :

Deux sections principales : authSection (connexion/inscription) et dashboardSection (application principale). Une seule est visible à la fois.
Disposition en grille : Le .main-content utilise CSS Grid pour créer deux colonnes (2 fr pour la playlist, 1 fr pour les amis). Cela signifie que la section de la playlist est deux fois plus large.
Gestionnaires d'événements : onclick="functionName()" indique au navigateur d'appeler une fonction JavaScript lorsque l'élément est cliqué.
ID : les éléments ont des ID uniques (comme id="friendsList") afin que notre JavaScript puisse les trouver et les modifier ultérieurement.

Étape 4 : mettre à jour server.js avec Socket.io, les points de terminaison d'amis et le partage persistant

Nous allons maintenant mettre à jour notre serveur pour gérer les demandes d'amis, le partage de playlists et la communication en temps réel. Le serveur est le « cerveau » de votre application : il traite les requêtes, communique avec la base de données et renvoie les réponses aux utilisateurs.

Ce que nous ajoutons au serveur :

Serveur Socket.io – Permet une communication bidirectionnelle en temps réel entre le serveur et les clients.
/api/add-friend endpoint – Gère les demandes d'amitié (amitié mutuelle).
/api/shared-playlists endpoint – Renvoie les playlists partagées par vos amis.
/api/personalized-playlist amélioré – Enregistre désormais les playlists partagées dans les bases de données de vos amis.
Gestionnaires d'événements Socket – Écoutent et émettent des événements en temps réel (authentification, partage).

Remplacez votre server.js par :

// Charger les variables d'environnement depuis le fichier .env require('dotenv').config(); // Importer les modules requis 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'); // Initialiser le générateur de playlist const playlistGen = new PlaylistGenerator(); const PORT = process.env.PORT || 3000; // Connexion à la base de données MongoDB async function connectDB() { try { console.log('🔗 Connexion à MongoDB…'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }); console.log('✅ MongoDB connecté avec succès !'); } catch (err) { console.error('❌ Échec de la connexion à MongoDB :', err.message); process.exit(1); // Quitter si la connexion à la base de données échoue } } connectDB(); // Créer une application Express et un serveur HTTP const app = express(); const server = http.createServer(app); // Initialiser Socket.io sur le serveur HTTP const io = socketIo(server); // Mappage pour suivre les utilisateurs en ligne : userId => socketId // Cela nous permet d'envoyer des messages à des utilisateurs spécifiques qui sont actuellement connectés const connectedUsers = new Map(); // Gestionnaire de connexion Socket.io - s'exécute lorsqu'un client se connecte io.on('connection', socket => { console.log('🔗 Socket connected:', socket.id); // Gère l'événement 'authenticate' - le client nous dit qui il est socket.on('authenticate', ({ userId, username }) => { // Stocke l'ID de socket de cet utilisateur afin que nous puissions lui envoyer des messages plus tard connectedUsers.set(userId, socket.id); socket.userId = userId; // Attache l'ID utilisateur à ce socket socket.username = username; // Attache le nom d'utilisateur à ce socket console.log(`✅ Utilisateur authentifié : ${username}`); }); // Gère l'événement 'share_playlist' - l'utilisateur souhaite partager avec ses amis socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { try { // Boucle sur tous les ID d'amis for (let friendId of friendIds) { // Obtenir l'ID de socket pour cet ami (s'il est en ligne) const sid = connectedUsers.get(friendId.toString()); if (sid) { // L'ami est en ligne ! Envoyez-lui une notification en temps réel io.to(sid).emit('friend_shared_playlist', { friendName, mood, playlist }); } // Si l'ami est hors ligne, il verra la playlist dans son flux d'activité lorsqu'il se connectera } } catch (err) { console.error('Erreur de partage de playlist :', err); } }); // Gérer la déconnexion - supprimer l'utilisateur de la carte en ligne socket.on('disconnect', () => { if (socket.userId) { connectedUsers.delete(socket.userId); console.log(`👋 Disconnected: ${socket.username}`); } }); }); // Middleware pour analyser les corps de requête JSON app.use(express.json()); // Servir les fichiers statiques du dossier 'public' (HTML, CSS, images) app.use(express.static(path.join(__dirname, 'public'))); // ===== POINTS DE TERMINAISON API ===== // POST /api/register - Créer un nouveau compte utilisateur app.post('/api/register', async (req, res) => { try { const { username, email, password } = req.body; // Valider la saisie if (!username || !email || !password) { return res.status(400).json({ error: 'Tous les champs sont obligatoires' }); } if (password.length < 6) { return res.status(400).json({ error: 'Le mot de passe doit comporter au moins 6 caractères' }); } // Vérifier si le nom d'utilisateur ou l'e-mail existe déjà const exists = await User.findOne({ $or: [{ username }, { email }] }); if (exists) { return res.status(400).json({ error: 'Le nom d'utilisateur ou l'e-mail existe déjà' }); } // Créer et enregistrer un nouvel utilisateur (le mot de passe sera haché automatiquement par notre middleware de pré-enregistrement) const user = new User({ username, email, password }); await user.save(); res.status(201).json({ message: 'Utilisateur créé avec succès' }); } catch (err) { console.error('Erreur d'enregistrement :', err); res.status(500).json({ error: 'Échec de l'enregistrement' }); } }); // POST /api/login - Authentifier l'utilisateur et renvoyer le jeton JWT app.post('/api/login', async (req, res) => { try { const { username, password } = req.body; // Rechercher un utilisateur par nom d'utilisateur ou par e-mail const user = await User.findOne({ $or: {[ username }, { email: username }] }); // Vérifier si l'utilisateur existe et si le mot de passe est correct if (!user || !(await user.comparePassword(password))) { return res.status(401).json({ error: 'Invalid credentials' }); } // Créer un jeton JWT (comme une carte d'identité temporaire) const token = jwt.sign( { userId: user._id }, // Charge utile (ce que nous codons) process.env.JWT_SECRET, // Clé secrète (la maintient en sécurité) { expiresIn: '7d' } // Le jeton expire dans 7 jours ); // Renvoyer le jeton au client res.json({ token, user: { username: user.username, email: user.email, friends: user.friends } }); } catch (err) { console.error('Erreur de connexion :', err); res.status(500).json({ error: 'Échec de la connexion' }); } }); // GET /api/profile - Obtenir le profil de l'utilisateur actuel // Le middleware 'auth' vérifie le jeton JWT et attache l'utilisateur à req.user app.get('/api/profile', auth, async (req, res) => { try { // Mettre à jour les statistiques de l'utilisateur req.user.updateStats(); await req.user.save(); // Remplir le tableau des amis (remplacer les ObjectIds par les objets utilisateur réels) 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('Erreur de profil :', err); res.status(500).json({ erreur : « Échec du chargement du profil » }); } }); // GET /api/shared-playlists - Obtenir les playlists que des amis ont partagées avec vous app.get('/api/shared-playlists', auth, async (req, res) => { try { // Obtenir les 10 dernières playlists partagées, triées de la plus récente à la plus ancienne const sharedPlaylists = req.user.sharedPlaylists .sort((a, b) => b.timestamp - a.timestamp) // Trier par horodatage décroissant .slice(0, 10); // Prendre les 10 premières res.json({ sharedPlaylists }); } catch (err) { console.error('Erreur des playlists partagées :', err); res.status(500).json({ error: 'Échec du chargement des playlists partagées' }); } }); // POST /api/add-friend - Ajouter un ami (amitié mutuelle) app.post('/api/add-friend', auth, async (req, res) => { try { const { friendUsername } = req.body; // Trouver l'ami par nom d'utilisateur const friend = await User.findOne({ username: friendUsername }); if (!friend) { return res.status(404).json({ error: 'Utilisateur non trouvé' }); } // Vérifier si déjà amis if (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) { return res.status(400).json({ error: 'Déjà amis avec cet utilisateur' }); } // Ajouter chaque utilisateur à la liste d'amis de l'autre (amitié mutuelle) req.user.friends.push(friend._id); friend.friends.push(req.user._id); // Enregistrer les deux utilisateurs await req.user.save(); await friend.save(); res.json({ message: 'Ami ajouté avec succès', friendId: friend._id }); } catch (err) { console.error('Erreur d'ajout d'ami :', err); console.error('Erreur de pile :', err.stack); res.status(500).json({ error: 'Échec de l'ajout d'ami' }); } }); // POST /api/personalized-playlist - Générer une playlist basée sur l'humeur 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: 'Please say me how you are feel!' }); } // 1. Analyser l'humeur à partir du texte de l'utilisateur const moodAnalysis = moodAnalyzer.analyzeMood(text); // 2. Générer une playlist basée sur l'humeur const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 3. Enregistrer dans l'historique des humeurs de l'utilisateur 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. Si le partage est activé, enregistrez dans le tableau sharedPlaylists de chaque ami 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 => ({ // Partager les 5 premiers titres name: t.name, artist: t.artist, album_image: t.album_image, id: t.id })) }; // Boucle tous les amis et ajouter cette playlist à leurs playlists partagées for (let friendId of req.user.friends) { const friend = await User.findById(friendId); if (friend) { friend.sharedPlaylists.push(sharedPlaylistData); await friend.save(); } } } // 5. Envoyer la réponse au client res.json({ moodAnalysis, playlist, personalizedMessage: `D'après votre historique, voici votre playlist ${moodAnalysis.mood} parfaite !` }); } catch (err) { console.error('Erreur de playlist personnalisée :', err); console.error('Pile d'erreurs :', err.stack); res.status(500).json({ error: 'Échec de la génération de la playlist personnalisée. Veuillez réessayer.' }); } }); // Solution de secours : servir index.html pour toutes les routes non API (pour le routage SPA) app.use((req, res, next) => { if (req.method === 'GET' && !req.path.startsWith('/api/')) { res.sendFile(path.join(__dirname, 'public', 'index.html')); } else { next(); } }); // Gestionnaire d'erreurs global app.use((err, req, res, next) => { console.error('Erreur globale :', err); res.status(500).json({ error: 'Erreur interne du serveur', details: err.message }); }); // Démarrer le serveur server.listen(PORT, () => { console.log(`🚀 Serveur exécuté sur http://localhost:${PORT}`); });

Concepts clés du serveur expliqués :

Middleware – Fonctions qui traitent les requêtes avant qu'elles n'atteignent vos gestionnaires de route. express.json() analyse le JSON à partir des corps de requête, auth vérifie les jetons JWT.
async/await – Syntaxe JavaScript moderne pour la gestion des opérations asynchrones (comme les requêtes de base de données). await suspend l'exécution jusqu'à la résolution de la promesse.
Codes d'état HTTP – Nombres indiquant le résultat : 200 = succès, 201 = créé, 400 = requête incorrecte, 401 = non autorisé, 404 = introuvable, 500 = erreur serveur.
Événements Socket.io – Messages nommés qui circulent entre le client et le serveur. socket.on() écoute les événements, socket.emit() en envoie.
JWT (Jeton Web JSON) – Un moyen sécurisé d'identifier les utilisateurs. Lorsqu'ils se connectent, nous leur fournissons un jeton. Ils envoient ce jeton avec chaque requête pour prouver qui ils sont.

Étape 5 : Mettre à jour le JavaScript du frontend (public/js/app.js)

Enfin, ajoutons le JavaScript qui rend notre frontend interactif. Ce code s'exécute dans le navigateur de l'utilisateur et gère des éléments tels que les clics sur les boutons, les requêtes API et les mises à jour en temps réel.

Fonction de ce JavaScript :

Gère l'authentification – Connexion, inscription, déconnexion et stockage des jetons
Initialise Socket.io – Se connecte au serveur et écoute les événements en temps réel
Effectue des requêtes API – Utilise fetch() pour communiquer avec les points de terminaison du serveur
Met à jour l'interface utilisateur – Crée dynamiquement des éléments HTML basés sur les données du serveur
Gère les interactions utilisateur – Clics sur les boutons, soumissions de formulaires, etc.

Remplacez votre public/js/app.js par le code complet présenté dans le tutoriel...

(Le Le bloc de code app.js suit exactement le même principe que précédemment, avec toutes les fonctions de connexion, d'inscription, de chargement de playlists partagées, etc.

Étape 6 : Testez votre API Social Music

Il est maintenant temps de tout tester ! Suivez ces étapes attentivement :

Démarrez votre serveur : Dans votre terminal, exécutez npm start. Vous devriez voir des messages tels que « MongoDB connecté ! » et « Serveur en cours d'exécution sur http://localhost:3000 ».
Ouvrez deux fenêtres de navigateur : Ouvrez http://localhost:3000 dans deux fenêtres de navigateur distinctes (ou une fenêtre normale et une fenêtre de navigation privée). Ceci simule deux utilisateurs différents.
Inscrire l'utilisateur 1 : Dans la première fenêtre, cliquez sur « S'inscrire » et créez un utilisateur (par exemple, nom d'utilisateur : « alice »).
Inscrire l'utilisateur 2 : Dans la deuxième fenêtre, créez un autre utilisateur (par exemple, nom d'utilisateur : « bob »).
Ajoutez-vous comme amis : Dans la fenêtre d'Alice, saisissez « bob » dans le champ « Ajouter un ami » et cliquez sur Ajouter un ami. Faites de même dans la fenêtre de Bob (saisissez « alice »). Vous devriez vous voir dans vos listes d'amis !
Partager une playlist : Dans la fenêtre d'Alice, saisissez quelque chose comme « Je me sens super heureux aujourd'hui ! » dans la zone de texte d'humeur. Cochez la case « Partager avec des amis », puis cliquez sur « Générer une playlist ».
Regardez la magie opérer :
- Si Bob est en ligne (fenêtre toujours ouverte), il verra une notification apparaître à droite !
- Bob devrait également voir la playlist partagée d'Alice apparaître dans sa section « Activité récente ».
- Bob peut cliquer sur la playlist partagée pour afficher la liste complète des chansons.
- Si Bob se déconnecte et se reconnecte plus tard, la playlist partagée sera toujours là !

Comprendre comment tout cela fonctionne ensemble

Voyons ce qui se passe lorsqu'Alice partage une playlist avec Bob :

Alice coche « Partager avec des amis » et clique sur « Générer une playlist »
Le frontend envoie une requête POST à /api/personalized-playlist avec shareWithFriends: true
Le serveur analyse l'humeur d'Alice et génère une playlist à l'aide de l'API Spotify
Le serveur enregistre la playlist dans le tableau moodHistory d'Alice
Le serveur parcourt les amis d'Alice (y compris Bob) et ajoute la playlist au tableau sharedPlaylists de chaque ami dans MongoDB
Le frontend émet un share_playlist Événement Socket.io pour notifier les amis en ligne
Le serveur reçoit l'événement et vérifie si Bob est en ligne (regarde dans la carte connectedUsers).
Si Bob est en ligne, le serveur lui envoie un événement friend_shared_playlist avec l'aperçu de la playlist.
Le navigateur de Bob reçoit l'événement et appelle showNotification() pour afficher une fenêtre contextuelle.
Le navigateur de Bob appelle également loadSharedPlaylists() pour actualiser le flux d'activité.
Si Bob est hors ligne, il verra la playlist dans son flux d'activité lors de sa prochaine connexion (car elle est enregistrée dans son tableau sharedPlaylists).

Ce que vous avez créé

Félicitations ! Vous avez créé une application musicale sociale complète ! Voici ce que vous avez accompli :

🤝 Système d'amis – Les utilisateurs peuvent ajouter des amis par nom d'utilisateur. Les amitiés sont mutuelles (les deux utilisateurs deviennent amis) et stockées sous forme de références ObjectId dans MongoDB.
💾 Partage de playlists persistantes – Les playlists partagées sont enregistrées dans la base de données dans le tableau sharedPlaylists de chaque ami. Cela signifie que les données sont conservées même après la déconnexion.
📡 Notifications en temps réel – Grâce à Socket.io, les utilisateurs en ligne reçoivent des notifications instantanées lorsque leurs amis partagent des playlists. Pas besoin de rafraîchir la page !
📰 Flux d'activité – Les utilisateurs peuvent consulter les playlists récemment partagées par tous leurs amis, classées par ordre décroissant de popularité. Cliquer sur une playlist affiche la liste complète des pistes.
🔐 Authentification sécurisée – Les mots de passe sont hachés avec bcrypt (jamais stockés sous forme de texte brut) et les jetons JWT sont utilisés pour authentifier les requêtes API.
⏱️ Compatible hors ligne – Les amis peuvent afficher les playlists partagées même s'ils n'étaient pas en ligne lorsque la playlist a été partagée. Tout est enregistré dans la base de données !

Concepts clés que vous avez appris

Communication en temps réel avec Socket.io (WebSockets)
Relations de base de données utilisant les références ObjectId de MongoDB
Dénormalisation pour les performances (stockage de l'ObjectId et du nom d'utilisateur)
Conception d'API RESTful (points de terminaison GET et POST avec codes d'état HTTP appropriés)
Modèle middleware pour l'authentification et le traitement des requêtes
Async/await pour la gestion des opérations asynchrones
Manipulation DOM pour mettre à jour dynamiquement l'interface utilisateur
Architecture pilotée par événements avec les événements Socket.io

Dépannage Problèmes

Connexion à MongoDB impossible – Assurez-vous que votre serveur MongoDB est en cours d'exécution et que votre MONGODB_URI dans .env est correct.
Informations d'identification non valides lors de la connexion – Vérifiez votre nom d'utilisateur et votre mot de passe. Attention, ils sont sensibles à la casse !
Utilisateur introuvable lors de l'ajout d'un ami – Assurez-vous de saisir le nom d'utilisateur exact (sensible à la casse). L'utilisateur doit s'être inscrit en premier.
Les playlists partagées ne s'affichent pas – Vérifiez la console de votre navigateur (touche F12) pour détecter d'éventuelles erreurs. Assurez-vous que les deux utilisateurs sont amis et que la case « Partager avec des amis » est cochée.
Les notifications en temps réel ne fonctionnent pas – Assurez-vous que Socket.io est connecté. Vérifiez la console du navigateur pour savoir si « 🔗 Connecté au serveur ».

Prochaines étapes et idées pour développer votre application musicale sociale, voici quelques idées pour aller plus loin :

Demandes d'amis – Au lieu d'une amitié instantanée, demandez aux utilisateurs d'envoyer des demandes qui peuvent être acceptées ou refusées.

Messagerie privée – Ajoutez un système de chat avec Socket.io pour que les amis puissent s'envoyer des messages.

Commentaires sur les playlists – Permettez aux utilisateurs de commenter les playlists partagées.

Aimer/Ne pas aimer les morceaux – Ajoutez des boutons « J'aime »/« Je n'aime pas » à chaque morceau d'une playlist.

Compatibilité des goûts musicaux – Calculez un pourcentage basé sur la similarité des préférences musicales de deux utilisateurs.

Recherche d'utilisateurs – Ajoutez une fonction de recherche pour trouver des utilisateurs par nom d'utilisateur.

Supprimer/Supprimer des amis – Possibilité de supprimer des amis ou des playlists partagées.

Pages de profil – Affichage des statistiques utilisateur, des humeurs préférées et des playlists récentes.

Playlists collaboratives – Possibilité pour plusieurs amis d'ajouter des morceaux à une playlist partagée.

Historique des playlists – Affichage de toutes vos playlists précédemment générées.

Vous avez créé une application musicale sociale complète avec des fonctionnalités en temps réel et un stockage de données persistant ! C'est une base solide pour comprendre le développement web moderne. Continuez à expérimenter et à développer !🎵✨