Añade amigos a tu API de música para leer la mente: Intercambio social en tiempo real. ¿Listo para que tu API de música para leer la mente sea realmente social? En este tutorial, añadirás un sistema robusto de amigos y compartirás listas de reproducción que se almacenan en la base de datos, para que los usuarios puedan ver las listas de reproducción compartidas de sus amigos incluso sin conexión. Usaremos Socket.io para actualizaciones en tiempo real y MongoDB para almacenamiento persistente.

Lo que construirás

Sistema de amigos: agrega y administra amigos por nombre de usuario con amistad mutua usando ObjectIds
Intercambio persistente de listas de reproducción: las listas de reproducción compartidas se guardan en la base de datos y se pueden ver en cualquier momento
Notificaciones en tiempo real: recibe notificaciones instantáneas cuando los amigos comparten (si están en línea)
Filtro de actividad: ve las acciones recientes de amigos con vistas previas de listas de reproducción en las que se puede hacer clic
Análisis de estado de ánimo mejorado: generación inteligente de listas de reproducción con alternativas de búsqueda

Requisitos previos

Tu API de música de lectura mental completada de Parte 2
MongoDB, Node.js y npm instalados
Credenciales de la API de Spotify (ID de cliente y secreto)
30–45 minutos de programación

En la Parte 2, creaste cuentas de usuario con historial de estados de ánimo y preferencias inteligentes. ¡Ahora lo haremos social! Aprenderás a conectar usuarios, compartir listas de reproducción en tiempo real y de forma persistente, y ver qué escuchan tus amigos según su estado de ánimo.

Conceptos clave

Antes de adentrarnos en el código, entendamos qué estamos creando:

Socket.io: una biblioteca que permite la comunicación bidireccional en tiempo real entre tu servidor y tu navegador. Piensa en ello como una llamada telefónica en lugar de mensajes de texto: puedes enviar y recibir información al instante sin tener que actualizar la página.
Almacenamiento persistente: Guarda los datos en tu base de datos MongoDB para que permanezcan allí incluso cuando los usuarios cierran sesión. Es como guardar un archivo en el disco duro en lugar de simplemente guardarlo en la memoria.
Referencias ObjectId: La forma en que MongoDB crea relaciones entre datos. En lugar de copiar toda la información de tus amigos en tu perfil, simplemente almacenas una referencia (como un puntero) a su perfil.
Esquemas: Piensa en ellos como planos que definen la estructura de tus datos. Le indican a MongoDB qué campos debe tener cada documento y qué tipo de datos van en cada campo.

Paso 1: Instalar las dependencias requeridas

Abra su terminal en el directorio de su proyecto e instale Socket.io para funciones en tiempo real:

npm install socket.io

Qué hace esto: Este comando descarga e instala la biblioteca Socket.io en su proyecto. El comando npm install obtiene paquetes del registro npm (una enorme biblioteca de código JavaScript) y los añade a la carpeta node_modules. Las demás dependencias (sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv) ya deberían estar instaladas en la Parte 2. Paso 2: Actualiza tu modelo de usuario con funciones sociales. Dado que ya creaste un modelo de usuario en la Parte 2, lo actualizaremos para añadir funciones sociales. El modelo de usuario es como una plantilla que define la información que almacenamos sobre cada usuario en nuestra base de datos. Lo que estamos añadiendo:

friends array: una lista de referencias ObjectId a otros usuarios. En lugar de almacenar información completa del usuario, solo almacenamos identificaciones que apuntan a otros documentos de usuario en la base de datos.
sharedWith y isShared: estos rastrean qué entradas de estado de ánimo se han compartido y con quién se compartieron.

sharedPlaylistSchema: un nuevo esquema (modelo) que define cómo se ve una lista de reproducción compartida: quién la compartió, para qué estado de ánimo era, las pistas y cuándo se compartió.

sharedPlaylists matriz: una lista que almacena todas las listas de reproducción que tus amigos han compartido contigo.

Reemplace sus models/User.js con:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // Esquema para entradas de estado de ánimo individuales (cada vez que el usuario genera una lista de reproducción) const moodEntrySchema = new mongoose.Schema({ text: String, // Lo que el usuario escribió (p. ej., "me siento feliz hoy") detectedMood: String, // El estado de ánimo que nuestro analizador detectó (p. ej., "feliz") confidence: Number, // Qué tan seguros estamos (0-10) playlistGenerated: [{ // Matriz de pistas que recomendamos trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } // null = no calificado, true = me gustó, false = no me gustó }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // ¿Con quién compartimos esto? isShared: { type: Boolean, default: false }, // ¿Se compartió esto? timestamp: { type: Date, default: Date.now } // ¿Cuándo se creó esto? }); // Esquema para las preferencias del usuario (géneros favoritos, 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] } }); // NUEVO: Esquema para listas de reproducción que tus amigos comparten contigo const sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // Referencia de ObjectId al amigo que compartió sharedByUsername: String, // Nombre de usuario para una fácil visualización (desnormalizado para mejor rendimiento) mood: String, // ¿Para qué estado de ánimo era esta lista de reproducción? playlist: [{ // Las pistas reales name: String, artist: String, album_image: String, id: String }], timestamp: { type: Date, default: Date.now } // ¿Cuándo se compartió esto? }); // Esquema de usuario principal: define la estructura de un documento de usuario 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' }], // Matriz de referencias de ObjectId a amigos moodHistory: [moodEntrySchema], // Todas las listas de reproducción que este usuario ha generado sharedPlaylists: [sharedPlaylistSchema], // Listas de reproducción que los amigos han compartido con este usuario preferences: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Número, predeterminado: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { type: Date, default: Date.now } } }, { timestamps: true }); // Agregar automáticamente los campos createdAt y updatedAt // Middleware: Ejecutar esta función antes de guardar un usuario (para generar un hash de su contraseña) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // Solo generar un hash si se cambió la contraseña this.password = await bcrypt.hash(this.password, 12); // Generar un hash con 12 rondas de sal next(); }); // Método: Verificar si una contraseña coincide con la contraseña generada por hash userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // Método: Actualizar las estadísticas del usuario en función de su historial de estados de ánimo userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean); // Obtener todos los estados de ánimo no vacíos this.stats.totalPlaylists = moods.length; if (moods.length > 0) { // Contar cuántas veces aparece cada estado de ánimo const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // Encontrar el estado de ánimo con el recuento más alto this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral'); } else { this.stats.mostCommonMood = 'neutral'; } // Calcular la hora favorita del día en función de cuándo generan listas de reproducción 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'; } }; // Exportar el modelo para usarlo en otros archivos module.exports = mongoose.model('User', userSchema);

Conceptos clave explicados:

Referencias a ObjectId: la matriz friends no almacena objetos de usuario completos. En su lugar, almacena ObjectIds (identificadores únicos) que apuntan a otros usuarios. Esto es eficiente porque si un amigo cambia su nombre de usuario, no necesitamos actualizarlo en todas partes; simplemente seguimos la referencia.

Desnormalización: observa que almacenamos tanto sharedBy (ObjectId) como sharedByUsername (String). Esto se denomina desnormalización: almacenar los mismos datos en múltiples ubicaciones para mejorar el rendimiento. Almacenamos el nombre de usuario para no tener que buscarlo cada vez que mostramos listas de reproducción compartidas.

Middleware (.pre()): se ejecuta automáticamente antes de ciertas operaciones. En este caso, genera un hash de las contraseñas antes de guardarlas en la base de datos por seguridad.

Métodos de instancia (.methods): son funciones que se pueden ejecutar en documentos de usuario individuales, como user.comparePassword() o user.updateStats().

Paso 3: Actualiza tu interfaz HTML con funciones sociales

Ahora, actualicemos la interfaz de usuario para incluir la gestión de amigos y un feed de actividades. El HTML define la estructura de tu página web: qué elementos aparecen y dónde se posicionan.

Qué estamos agregando a la interfaz de usuario:

Sección de lista de amigos: muestra a tus amigos actuales

Entrada para agregar amigos: campo de texto para ingresar el nombre de usuario de un amigo

Feed de actividad reciente: muestra las listas de reproducción que tus amigos han compartido (se puede hacer clic para ver la lista de reproducción completa)

Casilla de verificación para compartir: opción para compartir la lista de reproducción generada con amigos

Área de notificaciones: notificaciones emergentes para actualizaciones en tiempo real

Reemplaza tu public/index.html con:

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Mind-Reading Music API - Social</title> <style> /* Restablecer estilos predeterminados del navegador */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Estilo del cuerpo principal con fondo degradado */ body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; color: #333; } /* Contenedor para todo el panel */ .dashboard { max-width: 1000px; margin: 0 auto; padding: 20px; } /* Sección de encabezado con mensaje de bienvenida */ .header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); /* Efecto de desenfoque para glassmorphism */ border-radius: 20px; padding: 30px; margin-bottom: 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* Diseño de cuadrícula de dos columnas: sección de lista de reproducción (más grande) y sección de amigos (más pequeña) */ .main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } /* Estilo de tarjeta para ambas secciones */ .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); } /* Estilo de elementos de formulario */ input, textarea, button { width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; } /* Estilo específico de botón con fondo degradado */ button { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; cursor: pointer; font-weight: 600; } /* Efecto sutil al pasar el cursor sobre los botones */ button:hover { transform: translateY(-2px); } /* Estilo de elemento amigo individual */ .friend-item { background: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 8px; border-left: 4px solid #667eea; /* Color de acento a la izquierda */ } /* Estilo de la ventana emergente de notificación (oculta por defecto, se desliza desde la derecha) */ .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); /* Iniciar fuera de la pantalla */ transition: transform .3s ease; z-index: 1000; max-width: 300px; } /* Mostrar notificación (deslizar hacia adentro) */ .notification.show { transform: translateX(0); } /* Formularios de inicio de sesión y registro */ .login-section, .register-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; max-width: 400px; margin: 50px auto; } /* Controles de casilla de verificación para compartir */ .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"> Sección de autenticación (formularios de inicio de sesión/registro) -->

🧠🎵 ¡Bienvenido de nuevo! ¿No tienes cuenta? Regístrate
Formulario de registro (oculto por defecto) -->
🎵 Crea tu perfil musical ¿Ya tienes una cuenta? Iniciar sesión
</div> </div>  <div id="dashboardSection" style="display:none">  <div class="header"> <h1>🧠🎵 Tu lector personal de mentes musicales</h1> <p>Bienvenido, <span id="username"></span>!</p> <button onclick="logout()" style="width:auto; margin-top:10px">Cerrar sesión</button> </div>  <div class="main-content">  <div class="playlist-section"> <h2>💭 ¿Cómo te sientes?</h2> <textarea id="moodText" placeholder="Describe tu estado de ánimo..."></textarea> <div class="share-controls"> <label><input type="checkbox" id="shareWithFriends"/>Compartir con amigos</label> </div> <button onclick="generatePlaylist()">🎧 Generar lista de reproducción</button>  <div id="result" style="display:none"></div> </div>  <div class="friends-section"> <h3>👥 Mis amigos</h3> <div id="friendsList"></div> <h4>Agregar un amigo</h4> <input type="text" id="friendUsername" placeholder="Nombre de usuario del amigo"/> <button onclick="addFriend()">Agregar amigo</button> <h4>Actividad reciente</h4>  <div id="friendActivity">La actividad de los amigos aparecerá aquí...</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>

Comprendiendo la estructura HTML:

Dos secciones principales: authSection (inicio de sesión/registro) y dashboardSection (aplicación principal). Solo una es visible a la vez.

Diseño de cuadrícula: .main-content usa CSS Grid para crear dos columnas (2fr para la lista de reproducción, 1fr para los amigos). Esto significa que la sección de la lista de reproducción es el doble de ancha.

Manejadores de eventos: onclick="functionName()" le dice al navegador que llame a una función de JavaScript cuando se hace clic en el elemento.

ID: Los elementos tienen ID únicos (como id="friendsList") para que nuestro JavaScript pueda encontrarlos y modificarlos más tarde.

Paso 4: Actualizar server.js con Socket.io, puntos finales de amigos y uso compartido persistente

Ahora actualizaremos nuestro servidor para manejar solicitudes de amistad, uso compartido de listas de reproducción y comunicación en tiempo real. El servidor es el "cerebro" de tu aplicación: procesa las solicitudes, se comunica con la base de datos y envía respuestas a los usuarios.

Qué estamos añadiendo al servidor:

Servidor Socket.io: permite la comunicación bidireccional en tiempo real entre el servidor y los clientes.

/api/add-friend endpoint: gestiona las solicitudes de amistad (amistad mutua).

/api/shared-playlists endpoint: devuelve las listas de reproducción que tus amigos han compartido contigo.

/api/personalized-playlist mejorado: ahora guarda las listas de reproducción compartidas en las bases de datos de tus amigos.

Controladores de eventos de socket: escuchan y emiten eventos en tiempo real (autenticación, uso compartido).

Reemplace su server.js con:

// Cargar variables de entorno desde el archivo .env require('dotenv').config(); // Importar módulos requeridos 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'); // Inicializar el generador de listas de reproducción const playlistGen = new PlaylistGenerator(); const PORT = process.env.PORT || 3000; // Conectarse a la base de datos MongoDB async function connectDB() { try { console.log('🔗 Conectando a MongoDB…'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }); console.log('✅ ¡MongoDB se conectó correctamente!'); } catch (err) { console.error('❌ Error en la conexión con MongoDB:', err.message); process.exit(1); // Salir si falla la conexión a la base de datos } } connectDB(); // Crear la aplicación Express y el servidor HTTP const app = express(); const server = http.createServer(app); // Inicializar Socket.io sobre el servidor HTTP const io = socketIo(server); // Mapa para rastrear usuarios en línea: userId => socketId // Esto nos permite enviar mensajes a usuarios específicos que están conectados actualmente const connectedUsers = new Map(); // Manejador de conexión de Socket.io: se ejecuta cuando un cliente se conecta io.on('connection', socket => { console.log('🔗 Socket conectado:', socket.id); // Manejar el evento 'authenticate': el cliente nos dice quién es socket.on('authenticate', ({ userId, username }) => { // Almacenar el ID de socket de este usuario para que podamos enviarle mensajes más tarde connectedUsers.set(userId, socket.id); socket.userId = userId; // Adjuntar userId a este socket socket.username = username; // Adjuntar nombre de usuario a este socket console.log(`✅ Usuario autenticado: ${username}`); }); // Manejar el evento 'share_playlist': el usuario quiere compartir con amigos socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { try { // Recorrer todos los ID de amigos for (let friendId of friendIds) { // Obtener el ID de socket para este amigo (si está en línea) const sid = connectedUsers.get(friendId.toString()); if (sid) { // ¡El amigo está en línea! Enviarle una notificación en tiempo real io.to(sid).emit('friend_shared_playlist', { friendName, mood, playlist }); } // Si el amigo está desconectado, verá la lista de reproducción en su feed de actividad cuando inicie sesión } } catch (err) { console.error('Error de compartir lista de reproducción:', err); } }); // Manejar desconexión - eliminar usuario del mapa en línea socket.on('disconnect', () => { if (socket.userId) { connectUsers.delete(socket.userId); console.log(`👋 Desconectado: ${socket.username}`); } }); }); // Middleware para analizar cuerpos de solicitudes JSON app.use(express.json()); // Servir archivos estáticos desde la carpeta 'pública' (HTML, CSS, imágenes) app.use(express.static(path.join(__dirname, 'public'))); // ===== PUNTOS FINALES DE LA API ===== // POST /api/register - Crea una nueva cuenta de usuario app.post('/api/register', async (req, res) => { try { const { username, email, password } = req.body; // Valida la entrada if (!username || !email || !password) { return res.status(400).json({ error: 'Todos los campos son obligatorios' }); } if (password.length < 6) { return res.status(400).json({ error: 'La contraseña debe tener al menos 6 caracteres' }); } // Verifica si el nombre de usuario o el correo electrónico ya existen const exists = await User.findOne({ $or: [{ username }, { email }] }); if (exists) { return res.status(400).json({ error: 'El nombre de usuario o correo electrónico ya existe' }); } // Crear y guardar un nuevo usuario (la contraseña será codificada automáticamente por nuestro middleware de pre-guardado) const user = new User({ username, email, password }); await user.save(); res.status(201).json({ message: 'Usuario creado exitosamente' }); } catch (err) { console.error('Error de registro:', err); res.status(500).json({ error: 'Error de registro' }); } }); // POST /api/login - Autenticar usuario y devolver token JWT app.post('/api/login', async (req, res) => { try { const { username, password } = req.body; // Buscar usuario por nombre de usuario o correo electrónico const user = await User.findOne({ $or: {[ username }, { email: username }] }); // Verificar si el usuario existe y la contraseña es correcta if (!user || !(await user.comparePassword(password))) { return res.status(401).json({ error: 'Invalid credentials' }); } // Crear token JWT (como una tarjeta de identificación temporal) const token = jwt.sign( { userId: user._id }, // Carga útil (lo que estamos codificando) process.env.JWT_SECRET, // Clave secreta (lo mantiene seguro) { expiresIn: '7d' } // El token vence en 7 días ); // Enviar token de vuelta al cliente res.json({ token, user: { username: user.username, email: user.email, friends: user.friends } }); } catch (err) { console.error('Error de inicio de sesión:', err); res.status(500).json({ error: 'Error de inicio de sesión' }); } }); // GET /api/profile - Obtener el perfil del usuario actual // El middleware 'auth' verifica el token JWT y adjunta el usuario a req.user app.get('/api/profile', auth, async (req, res) => { try { // Actualizar las estadísticas del usuario req.user.updateStats(); await req.user.save(); // Completar la matriz de amigos (reemplazar ObjectIds con objetos de usuario reales) 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('Error de perfil:', err); res.status(500).json({ error: 'Error al cargar el perfil' }); } }); // GET /api/shared-playlists - Obtener las listas de reproducción que tus amigos han compartido contigo app.get('/api/shared-playlists', auth, async (req, res) => { try { // Obtener las últimas 10 listas de reproducción compartidas, ordenadas por la más reciente primero const sharedPlaylists = req.user.sharedPlaylists .sort((a, b) => b.timestamp - a.timestamp) // Ordenar de forma descendente por marca de tiempo .slice(0, 10); // Tomar las primeras 10 res.json({ sharedPlaylists }); } catch (err) { console.error('Error en listas de reproducción compartidas:', err); res.status(500).json({ error: 'Error al cargar las listas de reproducción compartidas' }); } }); // POST /api/add-friend - Agregar un amigo (amistad mutua) app.post('/api/add-friend', auth, async (req, res) => { try { const { friendUsername } = req.body; // Encontrar al amigo por nombre de usuario const friend = await User.findOne({ username: friendUsername }); if (!friend) { return res.status(404).json({ error: 'No se encontró el usuario' }); } // Verificar si ya son amigos if (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) { return res.status(400).json({ error: 'Ya son amigos de este usuario' }); } // Agregar cada usuario a la lista de amigos del otro (amistad mutua) req.user.friends.push(friend._id); friend.friends.push(req.user._id); // Guardar ambos usuarios await req.user.save(); await friend.save(); res.json({ message: 'Amigo añadido correctamente', friendId: friend._id }); } catch (err) { console.error('Error al añadir amigo:', err); console.error('Error stack:', err.stack); res.status(500).json({ error: 'Error al añadir amigo' }); } }); // POST /api/personalized-playlist - Generar una lista de reproducción basada en el estado de ánimo 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: '¡Por favor, dime cómo te sientes!' }); } // 1. Analizar el estado de ánimo a partir del texto del usuario const moodAnalysis = moodAnalyzer.analyzeMood(text); // 2. Generar una lista de reproducción basada en el estado de ánimo const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 3. Guardar en el historial de estados de ánimo del usuario 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 está habilitado compartir, guardar en la matriz sharedPlaylists de cada amigo 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 => ({ // Compartir las primeras 5 pistas name: t.name, artista: t.artista, imagen_album: t.imagen_album, id: t.id })) }; // Recorre todos los amigos y agrega esta lista de reproducción a sus listas de reproducción compartidas for (let friendId of req.user.friends) { const friend = await User.findById(friendId); if (friend) { friend.sharedPlaylists.push(sharedPlaylistData); await friend.save(); } } } // 5. Envía la respuesta al cliente res.json({ moodAnalysis, playlist, personalizedMessage: `¡Basado en tu historial, aquí está tu lista de reproducción perfecta ${moodAnalysis.mood}!` }); } catch (err) { console.error('Error de lista de reproducción personalizada:', err); console.error('Pila de errores:', err.stack); res.status(500).json({ error: 'Error al generar la lista de reproducción personalizada. Inténtalo de nuevo.' }); } }); // Respaldo: Servir index.html para cualquier ruta que no sea API (para enrutamiento SPA) app.use((req, res, next) => { if (req.method === 'GET' && !req.path.startsWith('/api/')) { res.sendFile(path.join(__dirname, 'public', 'index.html')); } else { next(); } }); // Controlador de errores global app.use((err, req, res, next) => { console.error('Error global:', err); res.status(500).json({ error: 'Error interno del servidor', details: err.message }); }); // Iniciar el servidor server.listen(PORT, () => { console.log(`🚀 Server running on http://localhost:${PORT}`); });

Conceptos clave del servidor explicados:

Middleware: funciones que procesan las solicitudes antes de que lleguen a los controladores de ruta. express.json() analiza JSON de los cuerpos de las solicitudes, auth verifica los tokens JWT.

async/await: sintaxis moderna de JavaScript para manejar operaciones asincrónicas (como consultas de bases de datos). await pausa la ejecución hasta que se resuelve la promesa.

Códigos de estado HTTP: números que indican el resultado: 200 = correcto, 201 = creado, 400 = solicitud incorrecta, 401 = no autorizado, 404 = no encontrado, 500 = error del servidor.

Eventos de Socket.io: mensajes con nombre que se intercambian entre el cliente y el servidor. socket.on() detecta eventos, socket.emit() los envía.

JWT (Token web JSON): una forma segura de identificar a los usuarios. Cuando inician sesión, les proporcionamos un token. Envían este token con cada solicitud para demostrar quiénes son.

Paso 5: Actualizar el JavaScript del frontend (public/js/app.js)

Finalmente, agreguemos el JavaScript que hace que nuestro frontend sea interactivo. Este código se ejecuta en el navegador del usuario y gestiona cosas como clics en botones, solicitudes de API y actualizaciones en tiempo real.

Qué hace este JavaScript:

Gestiona la autenticación: inicio de sesión, registro, cierre de sesión y almacenamiento de tokens

Inicializa Socket.io: se conecta al servidor y escucha eventos en tiempo real

Realiza solicitudes de API: utiliza fetch() para comunicarse con los puntos finales del servidor

Actualiza la interfaz de usuario: crea elementos HTML dinámicamente basados en datos del servidor

Gestiona las interacciones del usuario: clics en botones, envíos de formularios, etc.

Reemplace su public/js/app.js con el código completo que se muestra en el tutorial...

(El El bloque de código app.js sigue exactamente igual que antes, con todas las funciones de inicio de sesión, registro, carga de listas de reproducción compartidas, etc.

Paso 6: Prueba tu API de Música Social

¡Ahora es momento de probarlo todo! Sigue estos pasos cuidadosamente:

Inicia tu servidor: En tu terminal, ejecuta npm start. Deberías ver mensajes como "¡MongoDB conectado!" y "Servidor ejecutándose en http://localhost:3000".

Abre dos ventanas del navegador: Abre http://localhost:3000 en dos ventanas del navegador separadas (o una ventana normal y otra de incógnito). Esto simula dos usuarios diferentes.

Registrar Usuario 1: En la primera ventana, haz clic en "Registrarse" y crea un usuario (p. ej., nombre de usuario: "alice").

Registrar Usuario 2: En la segunda ventana, crea otro usuario (p. ej., nombre de usuario: "bob").

Agregarse mutuamente como amigos: En la ventana de Alice, escribe "bob" en el campo "Agregar un amigo" y haz clic en "Agregar amigo". Haz lo mismo en la ventana de Bob (escribe "alice"). ¡Deberían verse en sus listas de amigos!

Compartir una lista de reproducción: En la ventana de Alice, escribe algo como "¡Hoy estoy súper feliz!" en el cuadro de texto de estado de ánimo. Marca la casilla "Compartir con amigos" y haz clic en "Generar lista de reproducción".

Observa la magia:

Si Bob está conectado (con la ventana abierta), verá una notificación deslizarse desde la derecha.

Bob también debería ver la lista de reproducción compartida de Alice en su sección "Actividad reciente".

Bob puede hacer clic en la lista de reproducción compartida para ver la lista completa de canciones.

Si Bob cierra sesión y vuelve a iniciarla más tarde, ¡la lista de reproducción compartida seguirá ahí!

Comprendiendo cómo funciona todo en conjunto

Veamos qué sucede cuando Alice comparte una lista de reproducción con Bob:

Alice marca "Compartir con amigos" y hace clic en "Generar lista de reproducción".

El frontend envía una solicitud POST a /api/personalized-playlist con shareWithFriends: true

El servidor analiza el estado de ánimo de Alice y genera una lista de reproducción usando la API de Spotify.

El servidor guarda la lista de reproducción en la matriz moodHistory de Alice.

El servidor recorre los amigos de Alice (incluido Bob) y agrega la lista de reproducción a la matriz sharedPlaylists de cada amigo en MongoDB.

El frontend emite un evento share_playlist de Socket.io para notificar a los amigos en línea

El servidor recibe el evento y verifica si Bob está en línea (busca en el mapa connectedUsers)

Si Bob está en línea, el servidor le envía un evento friend_shared_playlist con la vista previa de la lista de reproducción

El navegador de Bob recibe el evento y llama a showNotification() para mostrar una ventana emergente

El navegador de Bob también llama a loadSharedPlaylists() para actualizar el feed de actividades

Si Bob está desconectado, verá la lista de reproducción en su feed de actividades la próxima vez que inicie sesión (porque está guardada en su matriz sharedPlaylists)

Lo que has ¡Felicitaciones! ¡Has creado una app de música social con todas las funciones! Esto es lo que lograste:

🤝 Sistema de amigos: Los usuarios pueden agregar amigos por nombre de usuario. Las amistades son mutuas (ambos usuarios se convierten en amigos) y se almacenan como referencias de ObjectId en MongoDB.

💾 Uso compartido persistente de listas de reproducción: Las listas de reproducción compartidas se guardan en la base de datos, en la matriz sharedPlaylists de cada amigo. Esto significa que los datos persisten incluso después de cerrar sesión.

📡 Notificaciones en tiempo real: Con Socket.io, los usuarios en línea reciben notificaciones instantáneas cuando sus amigos comparten listas de reproducción. ¡No es necesario actualizar la página!

📰 Feed de actividad: Los usuarios pueden ver las listas de reproducción compartidas recientemente de todos sus amigos, ordenadas primero por las más nuevas. Al hacer clic en una lista de reproducción, se muestra la lista completa de pistas.

🔐 Autenticación segura: las contraseñas se cifran con bcrypt (nunca se almacenan como texto sin formato) y se utilizan tokens JWT para autenticar las solicitudes de API.

⏱️ Compatible sin conexión: los amigos pueden ver las listas de reproducción compartidas incluso si no estaban en línea cuando se compartió la lista de reproducción. ¡Todo se guarda en la base de datos!

Conceptos clave que has aprendido

Comunicación en tiempo real con Socket.io (WebSockets)

Relaciones de bases de datos mediante referencias de ObjectId de MongoDB

Desnormalización para mejorar el rendimiento (almacenamiento tanto de ObjectId como de nombre de usuario)

Diseño de API RESTful (puntos finales GET y POST con códigos de estado HTTP adecuados)

Patrón de middleware para autenticación y procesamiento de solicitudes

Async/await para gestionar operaciones asincrónicas

Manipulación del DOM para actualizar dinámicamente la interfaz de usuario

Arquitectura basada en eventos con eventos de Socket.io

Solución de problemas comunes

"No se puede conectar a MongoDB": Asegúrate de que tu servidor MongoDB esté funcionando y que tu MONGODB_URI en .env sea correcto.

"Credenciales no válidas" al iniciar sesión: Revisa tu nombre de usuario y contraseña. ¡Recuerda que distinguen entre mayúsculas y minúsculas!

"Usuario no encontrado" al agregar un amigo: Asegúrate de escribir el nombre de usuario exacto (distingue entre mayúsculas y minúsculas). Debe haberse registrado primero.

No aparecen las listas de reproducción compartidas: Revisa la consola de tu navegador (F12) para ver si hay errores. Asegúrate de que ambos usuarios sean amigos y de que la casilla "Compartir con amigos" esté marcada.

Las notificaciones en tiempo real no funcionan: Asegúrate de que Socket.io esté conectado. Comprueba en la consola del navegador si hay "🔗 Conectado al servidor".

Próximos pasos e ideas para expandir

Ahora que tienes una aplicación de música social que funciona, aquí tienes algunas ideas para llevarla más allá:

Solicitudes de amistad: en lugar de amistad instantánea, solicita a los usuarios que envíen solicitudes que se puedan aceptar o rechazar.

Mensajería privada: añade un sistema de chat con Socket.io para que los amigos puedan enviarse mensajes.

Comentarios en listas de reproducción: permite que los usuarios comenten en listas de reproducción compartidas.

Me gusta/No me gusta de las pistas: añade botones de "me gusta" o "no me gusta" a cada pista de una lista de reproducción.

Compatibilidad musical: calcula un porcentaje basado en la similitud de las preferencias musicales de dos usuarios.

Buscar usuarios: añade una función de búsqueda para encontrar usuarios por nombre de usuario.

Eliminar/Eliminar de amigo: Añade la posibilidad de eliminar amigos o eliminar listas de reproducción compartidas.

Páginas de perfil: Muestra las estadísticas del usuario, estados de ánimo favoritos y listas de reproducción recientes.

Listas de reproducción colaborativas: Permite que varios amigos añadan canciones a una lista de reproducción compartida.

Historial de listas de reproducción: Visualiza todas tus listas de reproducción generadas anteriormente.

¡Has creado una aplicación de música social completa con funciones en tiempo real y almacenamiento de datos persistente! Esta es una base sólida para comprender el desarrollo web moderno. ¡Sigue experimentando y desarrollando! 🎵✨