Adicione amigos à sua API de Música para Leitura de Mentes: Compartilhamento Social em Tempo Real

Pronto para tornar sua API de Música para Leitura de Mentes verdadeiramente social? Neste tutorial, você adicionará um sistema robusto de amigos e compartilhamento de playlists que permanece no banco de dados, para que os usuários possam visualizar as playlists compartilhadas de seus amigos mesmo quando não estiverem online. Usaremos Socket.io para atualizações em tempo real e MongoDB para armazenamento persistente.

O que você construirá

Sistema de amigos – Adicione e gerencie amigos por nome de usuário com amizade mútua usando ObjectIds
Compartilhamento persistente de playlists – As playlists compartilhadas são salvas no banco de dados e podem ser visualizadas a qualquer momento
Notificações em tempo real – Receba notificações instantâneas quando amigos compartilharem (se estiverem online)
Feed de atividades – Veja compartilhamentos recentes de amigos com visualizações de playlists clicáveis
Análise de humor aprimorada – Geração inteligente de playlists com alternativas de pesquisa

Pré-requisitos

Sua API Mind-Reading Music concluída de Parte 2
MongoDB, Node.js e npm instalados
Credenciais da API do Spotify (ID do Cliente e Segredo)
30 a 45 minutos de tempo de codificação

Na Parte 2, você criou contas de usuário com histórico de humor e preferências inteligentes. Agora vamos torná-lo social! Você aprenderá a conectar usuários, compartilhar playlists em tempo real e de forma persistente e ver o que seus amigos estão ouvindo com base em seus humores.

Compreendendo os Conceitos Principais

Antes de mergulharmos no código, vamos entender o que estamos construindo:

Socket.io – Uma biblioteca que permite comunicação bidirecional em tempo real entre seu servidor e seu navegador. Pense nisso como uma chamada telefônica em vez de mensagens de texto – você pode enviar e receber informações instantaneamente sem atualizar a página.
Armazenamento Persistente – Salva dados no seu banco de dados MongoDB para que permaneçam lá mesmo quando os usuários efetuam logout. É como salvar um arquivo no seu disco rígido em vez de apenas mantê-lo na memória.
Referências de ObjectId – A maneira do MongoDB criar relacionamentos entre dados. Em vez de copiar todas as informações do seu amigo para o seu perfil, você apenas armazena uma referência (como um ponteiro) para o perfil dele.
Esquemas – Pense neles como projetos que definem a estrutura dos seus dados. Eles informam ao MongoDB quais campos cada documento deve ter e que tipo de dados deve ser inserido em cada campo.

Etapa 1: Instalar dependências necessárias

Abra seu terminal no diretório do seu projeto e instale o Socket.io para recursos em tempo real:

npm install socket.io

O que isto faz: Este comando baixa e instala a biblioteca Socket.io no seu projeto. O comando npm install busca pacotes do registro npm (uma enorme biblioteca de código JavaScript) e os adiciona à sua pasta node_modules.

As outras dependências (sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv) já devem estar instaladas da Parte 2.

Etapa 2: Atualize seu Modelo de Usuário com Recursos Sociais

Como você já criou um modelo de Usuário na Parte 2, vamos atualizá-lo para adicionar recursos sociais. O modelo de Usuário é como um modelo que define quais informações armazenamos sobre cada usuário em nosso banco de dados.

O que estamos adicionando:

friends array – Uma lista de referências de ObjectId para outros usuários. Em vez de armazenar informações completas do usuário, apenas armazenamos IDs que apontam para outros documentos do usuário no banco de dados.
sharedWith e isShared campos – Eles rastreiam quais entradas de humor foram compartilhadas e com quem elas foram compartilhadas.
sharedPlaylistSchema – Um novo esquema (projeto) que define a aparência de uma playlist compartilhada: quem a compartilhou, qual era o humor, as faixas e quando ela foi compartilhada.
sharedPlaylists array – Uma lista que armazena todas as playlists que seus amigos compartilharam com você.

Substitua seu models/User.js por:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // Esquema para entradas de humor individuais (cada vez que o usuário gera uma playlist) const moodEntrySchema = new mongoose.Schema({ text: String, // O que o usuário digitou (por exemplo, "sentindo-se feliz hoje") detectedMood: String, // O humor que nosso analisador detectou (por exemplo, "feliz") confidence: Number, // Quão confiantes estamos (0-10) playlistGenerated: [{ // Matriz de faixas que recomendamos trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } // null = não avaliado, true = gostou, false = não gostou }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // Com quem compartilhamos isso? isShared: { type: Boolean, default: false }, // Isso foi compartilhado? timestamp: { type: Date, default: Date.now } // Quando isso foi criado? }); // Esquema para preferências do usuário (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], energy: [String], chill: [String], angry: [String], romantic: [String], nostalgic: [String] } }); // NOVO: Esquema para playlists que amigos compartilham com você const sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // Referência do ObjectId para o amigo que compartilhou sharedByUsername: String, // Nome de usuário para fácil exibição (desnormalizado para desempenho) mood: String, // Para qual humor esta playlist foi criada? playlist: [{ // O nome real das faixas: String, artista: String, imagem_do_álbum: String, id: String }], timestamp: { type: Date, default: Date.now } // Quando isso foi compartilhado? }); // Esquema principal do usuário - define a estrutura de um documento de usuário 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 referências de ObjectId para amigos moodHistory: [moodEntrySchema], // Todas as playlists que este usuário gerou sharedPlaylists: [sharedPlaylistSchema], // Playlists que os amigos compartilharam com este usuário preferences: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Number, default: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { type: Date, default: Date.now } } }, { timestamps: true }); // Adicionar automaticamente os campos createdAt e updatedAt // Middleware: Executar esta função antes de salvar um usuário (para fazer o hash de sua senha) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // Fazer o hash somente se a senha foi alterada this.password = await bcrypt.hash(this.password, 12); // Fazer o hash com 12 rodadas de salt next(); }); // Método: Verificar se uma senha corresponde à senha com hash userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // Método: Atualizar estatísticas do usuário com base no histórico de humor userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean); // Obter todos os humores não vazios this.stats.totalPlaylists = moods.length; if (moods.length > 0) { // Contar quantas vezes cada humor aparece const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // Encontrar o humor com a maior contagem this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral'); } else { this.stats.mostCommonMood = 'neutral'; } // Calcular o horário favorito do dia com base em quando eles geram listas de reprodução 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'; } }; // Exporte o modelo para que possamos usá-lo em outros arquivos module.exports = mongoose.model('User', userSchema);

Conceitos-chave explicados:

Referências de ObjectId – O array friends não armazena objetos de usuário inteiros. Em vez disso, ele armazena ObjectIds (identificadores exclusivos) que apontam para outros usuários. Isso é eficiente porque, se um amigo alterar seu nome de usuário, não precisamos atualizá-lo em todos os lugares – apenas seguimos a referência.
Desnormalização – Observe que armazenamos sharedBy (ObjectId) e sharedByUsername (String). Isso é chamado de desnormalização – armazenando os mesmos dados em vários lugares para desempenho. Armazenamos o nome de usuário para não precisarmos procurá-lo sempre que exibirmos playlists compartilhadas.
Middleware (.pre()) – Executado automaticamente antes de determinadas operações. Aqui, ele faz o hash das senhas antes de salvá-las no banco de dados por questões de segurança.
Métodos de Instância (.methods) – São funções que você pode chamar em documentos de usuários individuais, como user.comparePassword() ou user.updateStats().

Etapa 3: Atualize seu frontend HTML com recursos sociais

Agora, vamos atualizar a interface do usuário para incluir o gerenciamento de amigos e um feed de atividades. O HTML define a estrutura da sua página da web – quais elementos aparecem e onde são posicionados.

O que estamos adicionando à IU:

Seção Lista de amigos – Mostra seus amigos atuais
Adicionar entrada de amigo – Campo de texto para inserir o nome de usuário de um amigo
Feed de atividades recentes – Exibe listas de reprodução que seus amigos compartilharam (clicável para visualizar a lista de reprodução completa)
Caixa de seleção Compartilhar – Opção para compartilhar sua lista de reprodução gerada com amigos
Área de notificação – Notificações pop-up para atualizações em tempo real

Substitua seu public/index.html por:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Mind-Reading Music API - Social</title> <style> /* Redefinir estilos de navegador padrão */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Estilo do corpo principal com fundo gradiente */ body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; color: #333; } /* Contêiner para todo o painel */ .dashboard { max-width: 1000px; margin: 0 auto; padding: 20px; } /* Seção de cabeçalho com mensagem de boas-vindas */ .header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); /* Efeito de desfoque para glassmorphism */ border-radius: 20px; padding: 30px; margin-bottom: 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* Layout de grade de duas colunas: seção de lista de reprodução (maior) e seção de amigos (menor) */ .main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } /* Estilo de cartão para ambas as seções */ .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 dos elementos do formulário */ input, textarea, button { width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; } /* Estilo específico do botão com fundo gradiente */ button { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; cursor: pointer; font-weight: 600; } /* Efeito sutil de foco nos botões */ button:hover { transform: translateY(-2px); } /* Estilo individual de item de amigo */ .friend-item { background: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 8px; border-left: 4px solid #667eea; /* Cor de destaque à esquerda */ } /* Estilo do pop-up de notificação (oculto por padrão, desliza da direita) */ .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 fora da tela */ transition: transform .3s ease; z-index: 1000; max-width: 300px; } /* Mostrar notificação (deslizar para dentro) */ .notification.show { transform: translateX(0); } /* Formulários de login e 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 caixa de seleção para compartilhamento */ .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">     🧠🎵 Bem-vindo de volta!
    ;<a href="#" onclick="showRegister()">Não tem uma conta? Cadastre-se ;</p> 
   🎵 Crie seu perfil musical>/h2>       
 
   👥 Meus amigos> 
  
 
 Adicionar um amigo>

Adicione amigos à sua API de Música para Leitura de Mentes: Compartilhamento Social em Tempo Real

O que você construirá

Pré-requisitos

Compreendendo os Conceitos Principais

Etapa 1: Instalar dependências necessárias

Etapa 2: Atualize seu Modelo de Usuário com Recursos Sociais

O que estamos adicionando:

Conceitos-chave explicados:

Etapa 3: Atualize seu frontend HTML com recursos sociais

O que estamos adicionando à IU:

🎵 Crie seu perfil musical>/h2>

💭 Como você está se sentindo?

👥 Meus amigos>

Adicionar um amigo>

Atividade recente>
A atividade dos amigos aparecerá aqui...

Adicione amigos à sua API de Música para Leitura de Mentes: Compartilhamento Social em Tempo Real

O que você construirá

Pré-requisitos

Compreendendo os Conceitos Principais

Etapa 1: Instalar dependências necessárias

Etapa 2: Atualize seu Modelo de Usuário com Recursos Sociais

O que estamos adicionando:

Conceitos-chave explicados:

Etapa 3: Atualize seu frontend HTML com recursos sociais

O que estamos adicionando à IU:

🧠🎵 Bem-vindo de volta!

💭 Como você está se sentindo?

👥 Meus amigos>

Adicionar um amigo>

Adicionar amigo> Atividade recente> A atividade dos amigos aparecerá aqui...

Atividade recente> A atividade dos amigos aparecerá aqui...

Atividade recente>
A atividade dos amigos aparecerá aqui...