Mejora tu API de música para leer la mente: Agrega cuentas de usuario con historial de estado de ánimo y preferencias inteligentes. Transforma tu generador de listas de reproducción que detecta emociones en un compañero musical personalizado que aprende de cada interacción. Este tutorial de seguimiento incorpora autenticación de usuario, análisis de estado de ánimo y aprendizaje inteligente de preferencias para crear experiencias musicales verdaderamente personalizadas. Lo que estamos desarrollando hoy. ¿Recuerdas nuestra API de música para leer la mente, que podía detectar emociones y generar listas de reproducción? Hoy la personalizamos. Estamos agregando:

Autenticación de usuario que realmente funciona (sin los complejos dolores de cabeza de OAuth)
Panel de historial de estado de ánimo con excelentes análisis
Preferencias de listas de reproducción inteligentes que aprenden del comportamiento del usuario
Recomendaciones personalizadas que mejoran con el tiempo
Persistencia de datos para que los usuarios nunca pierdan su viaje musical

Al final de este tutorial, su API recordará que a Sarah le encanta el rock indie cuando está triste, mientras que Mike prefiere la música clásica para las sesiones de concentración.

Lo que necesitará

Su API de lectura de mentes musical completa del tutorial anterior
30 minutos de codificación enfocada tiempo
Cuenta MongoDB Atlas (el nivel gratuito funciona perfectamente)
Comprensión básica de las bases de datos (¡lo mantendremos simple!)

Configuración de la autenticación de usuario (la forma fácil)

Primero, agreguemos los paquetes que necesitamos para la administración de usuarios.

Vaya a su terminal en su editor de código, escriba o pegue el siguiente comando y presione Enter:

npm install mongoose bcryptjs jsonwebtoken express-session connect-mongo

Paso 1: Configuración de la conexión a la base de datos

Una vez que se complete la instalación, cree un nuevo archivo llamado database.js y agregue el siguiente código:

const mongoose = require('mongoose'); const connectDB = async () => { try { console.log('🔗 Conectando a MongoDB...'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, }); console.log('✅ ¡MongoDB se conectó exitosamente!'); } catch (error) { console.error('❌ La conexión con MongoDB falló:', error.message); process.exit(1); } }; module.exports = connectDB;

Guarde con cmd + s, ctrl + s o archivo y luego guardar.

Cree su cuenta de MongoDB Atlas

Visite: mongodb.com/cloud/atlas
Haga clic en: el botón "Comenzar" (normalmente en la esquina superior derecha)

Opciones de registro

Tienes tres maneras de crear una cuenta:

Opción A: Registro por correo electrónico

Haz clic en "Registrarse con correo electrónico"
Introduce tu dirección de correo electrónico
Crea una contraseña segura
Haz clic en "Crear tu cuenta de Atlas"

Opción B: Registro en Google

Haz clic en "Registrarse con Google"
Elige tu cuenta de Google
Otorga los permisos necesarios

Opción C: GitHub Regístrate

Haz clic en "Registrarse en GitHub"
Autoriza a MongoDB Atlas a acceder a tu cuenta de GitHub

Verifica tu correo electrónico

Revisa tu bandeja de entrada
Haz clic en el enlace de verificación de MongoDB
Esto confirma que tu cuenta es real

Crea tu primer clúster de bases de datos

Si no ves tu panel después de iniciar sesión, es posible que tengas que hacer clic en tu nombre en la esquina superior derecha para abrir el siguiente menú desplegable y hacer clic en Atlas:

Luego verá el panel de Atlas. ¡Es hora de crear tu base de datos!

Elige tu tipo de implementación

Haz clic en "Clústeres" en "Base de datos" en la barra lateral izquierda

Clústeres de MongoDB Atlas en la barra lateral

Haz clic en "Crear un clúster"

Botón de compilación de clúster de MongoDB

Seleccione "Gratis"

Será redirigido a una página para implementar su clúster y deberá seleccionar el plan gratuito.

Selección de plan gratuito de MongoDB Atlas

Selección de proveedor de nube: Verá tres opciones de proveedor:

AWS (Amazon Web Services) ⭐ Recomendado
Google Cloud Platform
Microsoft Azure

Elija: AWS (es el más popular y tiene la mayor cantidad de regiones)

Selección de región: Después de seleccionar AWS, verá un menú desplegable con muchas Regiones. Elige la más cercana a tu ubicación para un mejor rendimiento:

🇺🇸 Estados Unidos:

us-east-1 (Norte de Virginia) - Costa Este
us-west-2 (Oregón) - Costa Oeste
us-central-1 (Iowa) - Costa Central

🇪🇺 Europa:

eu-west-1 (Irlanda) - Europa Occidental
eu-central-1 (Fráncfort) - Europa Central
eu-west-2 (Londres) - Reino Unido

🌏 Asia Pacífico:

ap-southeast-1 (Singapur) - Sudeste Asiático
ap-south-1 (Bombay) - India
ap-northeast-1 (Tokio) - Japón

💡 Consejo: Si no estás seguro, us-east-1 suele ser la opción más segura, con más funciones.

Luego, haz clic en el botón "Crear implementación".

Botón para crear implementación de MongoDB

Crear usuario de base de datos

Paso 3.1: Agregar usuario de base de datos

Verá la pantalla "Inicio rápido de seguridad"
Método de autenticación: Mantenga seleccionado "Nombre de usuario y contraseña"
Nombre de usuario: Ingrese un nombre de usuario (por ejemplo, mood-music-user)
Contraseña:
- Opción A: Haga clic en "Generar contraseña segura automáticamente" (recomendado)
- Opción B: Cree su propia contraseña segura (al menos 8 caracteres)
¡Copia la contraseña inmediatamente! La necesitarás para tu cadena de conexión

Formulario de usuario para crear base de datos de MongoDB

⚠️ ¡Copia y guarda tu contraseña inmediatamente!

Haz clic en: "Crear usuario de base de datos"
Haz clic en: "Elegir un método de conexión"

Elegir método de conexión

Verás varias opciones de conexión:

Controladores 👈 Esto es lo que queremos para las aplicaciones Node.js
Compass (aplicación GUI de escritorio de MongoDB)
Shell (interfaz de línea de comandos de MongoDB)
MongoDB para VS Code (extensión de VS Code)
Atlas SQL (interfaz SQL para MongoDB)

Selecciona: "Controladores": esto te da la cadena de conexión para aplicaciones como Node.js

Selección del método de conexión de MongoDB

Configurar la conexión del controlador

Después de seleccionar "Controladores":

Controlador: Seleccione "Node.js" en el menú desplegable
Versión: Seleccione su versión de Node.js o déjela como predeterminada (normalmente funciona bien)
Cadena de conexión: Verá la conexión La cadena aparece a continuación

Copia tu cadena de conexión

Verás algo como esto:

mongodb+srv://<nombre de usuario>:<contraseña>@cluster0.abc123.mongodb.net/?retryWrites=true&w=majority

Importante: ¡Esta es una plantilla! Necesitas:

Reemplazar <username> con el nombre de usuario de tu base de datos
Reemplazar <password> con la contraseña de tu base de datos
Agregar el nombre de tu base de datos después de .net/

Ejemplo de transformación

Antes (plantilla):

mongodb+srv://<username>:<password>@cluster0.abc123.mongodb.net/?retryWrites=true&w=majority

Después (listo para usar):

mongodb+srv://mood-music-user:MySecurePassword123@cluster0.abc123.mongodb.net/mood-music-db?retryWrites=true&w=majority

Aviso:

<nombre de usuario> → mood-music-user
<contraseña> → MySecurePassword123
Se agregó /mood-music-db como nombre de la base de datos

Haga clic en listo'

Paso 5: Agregue la cadena de conexión a su proyecto

Actualice su archivo .env

Abre tu archivo .env y agrega:

MONGODB_URI=mongodb+srv://mood-music-user:MySecurePassword123@cluster0.abc123.mongodb.net/mood-music-db?retryWrites=true&w=majority JWT_SECRET=your-super-secret-jwt-key-here-make-it-long-and-random SESSION_SECRET=another-secret-key-for-sessions-also-long-and-random

Generar secretos fuertes

Para JWT_SECRET y SESSION_SECRET, necesitas cadenas aleatorias que no dañen tus archivos de configuración.

⚠️ Importante: Evite caracteres especiales como @, #, $, %, /, ? en las contraseñas, ya que pueden romper las cadenas de conexión y los archivos JSON.

Opción A: Generador en línea simple (recomendado)

Visite: JWTSECRETS
Configuración:
- Número de contraseñas: 1
- Longitud de la contraseña: 32
- ✅ Marca "mayúsculas (A-Z)"
- ✅ Marca "minúsculas (a-z)"
- ✅ Marca "dígitos (0-9)"
- ❌ Desmarca "puntuación"
Haz clic en "Obtener contraseñas"

Opción B: Usa la consola de tu navegador (¡Súper fácil!)

Abre cualquier sitio web (como google.com)
Presiona F12 (o haz clic derecho → Inspeccionar)
Haz clic en la pestaña "Consola"

Pega este código y presiona Enter:

Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2)

Copia el resultado. Será algo como: k8m9x2n7p4q1w3e5r6t8y9u2i4o7p1a5s3d6f8g2h4j7k9l

Opción C: Método manual (si todo lo demás falla)

Simplemente escribe una cadena aleatoria larga usando:

Letras: A-Z, a-z
Números: 0-9
Ejemplo: MyApp2024SecretKey789RandomString456Auth

Ejemplo final de .env

SPOTIFY_CLIENT_ID=tu_id_de_cliente_de_Spotify_aquí SPOTIFY_CLIENT_SECRET=tu_secreto_de_cliente_de_Spotify_aquí MONGODB_URI=mongodb+srv://usuario-de-música-de-estado-animo:MySecurePassword123@cluster0.abc123.mongodb.net/mood-music-db?retryWrites=true&w=majority JWT_SECRET=A8f2K9mP3qR7sT1vW5yX8bC4eN6jL2oU9iH7gF3dS6aZ1mQ4wE8rT5yU2pI9oL SESSION_SECRET=B7gT3mK9pL2sF6vW1yX4eR8aC5qN9jM7oU3iH6dG2fS8aZ4mQ1wE5rT7yU9pI3oL PORT=3000

Puntos clave:

✅ No se permiten caracteres especiales en JWT_SECRET ni SESSION_SECRET
✅ La contraseña de MongoDB evita caracteres que interrumpen la URL
✅ Todos los secretos son largos y aleatorios
✅ Seguro de usar en archivos JSON y cadenas de conexión

Paso 2: Modelo de usuario con seguimiento de estado de ánimo

Crea una carpeta llamada models y agrega un archivo llamado User.js dentro de ella. Luego, agrega y guarda el siguiente código en el archivo:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); const moodEntrySchema = new mongoose.Schema({ texto: String, detectMood: String, confianza: Número, playlistGenerated: [{ trackName: String, artista: String, spotifyId: String, me gustó: { tipo: Boolean, predeterminado: null } }], marca de tiempo: { tipo: Fecha, predeterminado: Date.now } }); const userPreferencesSchema = new mongoose.Schema({ favoriteGenres: [Cadena], preferredEnergyLevel: { tipo: Número, mín.: 0, máx.: 1 }, dislikedArtists: [Cadena], moodMusicMapping: { feliz: [Cadena], triste: [Cadena], enérgico: [Cadena], tranquilo: [Cadena], enojado: [Cadena], romántico: [Cadena], nostálgico: [Cadena] } }); const userSchema = new mongoose.Schema({ nombre de usuario: { tipo: String, requerido: verdadero, único: verdadero, recorte: verdadero, minlength: 3 }, correo electrónico: { tipo: String, requerido: verdadero, único: verdadero, minúsculas: verdadero }, contraseña: { tipo: String, requerido: verdadero, minlength: 6 }, moodHistory: [moodEntrySchema], preferencias: { tipo: userPreferencesSchema, predeterminado: () => ({}) }, estadísticas: { totalPlaylists: { tipo: Número, predeterminado: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { tipo: Fecha, predeterminado: Date.now } } }, { marcas de tiempo: verdadero }); // Calcular el hash de la contraseña antes de guardar userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); this.password = await bcrypt.hash(this.password, 12); next(); }); // Comparar contraseñas userSchema.methods.comparePassword = async function(password) { return bcrypt.compare(password, this.password); }; // Calcular las estadísticas del usuario userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(entry => entry.detectedMood); this.stats.totalPlaylists = this.moodHistory.length; // Encuentra el estado de ánimo más común const moodCounts = moods.reduce((acc, mood) => { acc[mood] = (acc[mood] || 0) + 1; return acc; }, {}); this.stats.mostCommonMood = Object.keys(moodCounts).reduce((a, b) => moodCounts[a] > moodCounts[b] ? a : b, 'neutral' ); // Determina la hora favorita del día const hours = this.moodHistory.map(entry => entry.timestamp.getHours()); const avgHour = hours.reduce((a, b) => a + b, 0) / hours.length; if (avgHour < 6) this.stats.favoriteTime = 'night'; else if (avgHour < 12) this.stats.favoriteTime = 'morning'; else if (avgHour < 18) this.stats.favoriteTime = 'afternoon'; else this.stats.favoriteTime = 'evening'; }; module.exports = mongoose.model('User', userSchema);

Paso 3: Middleware de autenticación

Cree una carpeta llamada middleware y agregue un archivo llamado auth.js dentro de ella. Luego, agregue el siguiente código al archivo y guárdelo:

const jwt = require('jsonwebtoken'); const User = require('../models/User'); const auth = async (req, res, next) => { try { const token = req.header('Authorization')?.replace('Bearer ', '') || req.session.token; if (!token) { return res.status(401).json({ error: 'No se proporcionó token' }); } const decoded = jwt.verify(token, process.env.JWT_SECRET); const user = await User.findById(decoded.userId); if (!user) { return res.status(401).json({ error: 'No se encontró el usuario' }); } req.user = user; next(); } catch (error) { res.status(401).json({ error: 'Token no válido' }); } }; module.exports = auth;

Panel de usuario con Beautiful Analytics

Crea una nueva carpeta en tu proyecto y nómbrala public luego agrega un archivo dentro de esta carpeta y nómbrala index.html:

<!DOCTYPE html> <html> <head> <title>Mind-Reading Music API - Panel personal</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', system-ui, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; color: #333; } .dashboard { ancho máximo: 1200px; margen: 0 automático; relleno: 20px; } .header { fondo: rgba(255,255,255,0.95); filtro de fondo: desenfoque(10px); radio del borde: 20px; relleno: 30px; margen inferior: 30px; alineación del texto: centro; sombra del cuadro: 0 8px 32px rgba(0,0,0,0.1); } .stats-grid { visualización: cuadrícula; columnas de plantilla de cuadrícula: repetir(ajuste automático, minmáx(250px, 1fr)); espacio: 20px; margen inferior: 30px; } .stat-card { fondo: rgba(255,255,255,0.9); radio del borde: 15px; relleno: 25px; alineación del texto: centro; sombra del cuadro: 0 4px 15px rgba(0,0,0,0.1); } .mood-input-section { fondo: rgba(255,255,255,0.95); radio del borde: 20px; relleno: 30px; margen inferior: 30px; } .mood-history { fondo: rgba(255,255,255,0.95); radio del borde: 20px; relleno: 30px; } .history-item { fondo: #f8f9fa; radio del borde: 10px; relleno: 15px; margen inferior: 15px; borde izquierdo: 4px sólido #667eea; } .login-section, .register-section { fondo: rgba(255,255,255,0.95); radio del borde: 20px; relleno: 30px; ancho máximo: 400px; margen: 50px automático; } entrada, área de texto, botón { ancho: 100%; relleno: 12px; margen: 10px 0; borde: 2px sólido #e1e5e9; radio del borde: 8px; tamaño de fuente: 16px; } botón { fondo: degradado lineal(135deg, #667eea, #764ba2); color: blanco; borde: ninguno; cursor: puntero; peso de fuente: 600; } botón:hover { transformar: translateY(-2px); }    <div class="dashboard"> <div id="authSection"> <div class="login-section"> <h2>🧠🎵 ¡Bienvenido de nuevo!</h2> <input type="text" id="loginUsername" placeholder="Nombre de usuario"> <input type="password" id="loginPassword" placeholder="Contraseña"> <button onclick="login()">Iniciar sesión</button> <p><a href="#" onclick="showRegister()">¿No tienes cuenta? Regístrate</a></p> </div> <div id="registerSection" class="register-section" style="display:none;"> <h2>🎵 Crea tu perfil musical</h2> <input type="text" id="regUsername" placeholder="Nombre de usuario"> <input type="email" id="regEmail" placeholder="Correo electrónico"> <input type="password" id="regPassword" placeholder="Contraseña"> <button onclick="register()">Crear cuenta</button> <p><a href="#" onclick="showLogin()">¿Ya tienes una cuenta? Iniciar sesión</a></p> </div> </div> <div id="dashboardSection" style="display:none;"> <div class="header"> <h1>🧠🎵 Tu lector personal de mentes musicales</h1> <p>¡Bienvenido de nuevo, <span id="username"></span>! ¿Listo para descubrir tu banda sonora perfecta?</p> <button onclick="logout()" style="width:auto; margin-top:10px;">Cerrar sesión</button> </div> <div class="stats-grid"> <div class="stat-card"> <h3>📊 Listas de reproducción totales</h3> <div id="totalPlaylists" class="stat-number">0</div&</div> <div class="stat-card"> <h3>😊 Estado de ánimo favorito</h3> <div id="favoriteMood" class="stat-text">-</div> </div> <div class="stat-card"> <h3>🕐 Mejor momento</h3> <div id="bestTime" class="stat-text">-</div> </div> <div class="stat-card"> <h3>🎵 Género principal</h3> <div id="topGenre" class="stat-text">-</div> </div> </div> <div class="mood-input-section"> <h2>💭 ¿Cómo te sientes ahora mismo?</h2> <textarea id="moodText" placeholder="Describe tu estado de ánimo actual, qué está pasando o cómo quieres sentirte..."></textarea> <button onclick="generatePersonalizedPlaylist()">🎧 Genera mi lista de reproducción perfecta</button> <div id="result" style="display:none;" class="result"></div> </div> <div class="mood-history"> <h2>📈 Tu viaje del estado de ánimo</h2> <div id="historyContainer"></div> </div> </div> </div>