Dodajte prijatelje u svoj API za čitanje misli: Dijeljenje na društvenim mrežama u stvarnom vremenu

Jeste li spremni učiniti svoj API za čitanje misli zaista društvenim? U ovom vodiču dodat ćete robustan sustav prijatelja i dijeljenje popisa za reprodukciju koji se pohranjuje u bazi podataka, tako da korisnici mogu pregledavati dijeljene popise za reprodukciju svojih prijatelja čak i kada nisu online. Koristit ćemo Socket.io za ažuriranja u stvarnom vremenu i MongoDB za trajnu pohranu.

Što ćete izgraditi

Sustav prijatelja – Dodavanje i upravljanje prijateljima prema korisničkom imenu s međusobnim prijateljstvom pomoću ObjectIds-ova
Trajno dijeljenje popisa za reprodukciju – Dijeljeni popisi za reprodukciju spremaju se u bazu podataka i mogu se pregledavati u bilo kojem trenutku
Obavijesti u stvarnom vremenu – Primajte trenutne obavijesti kada prijatelji dijele (ako su online)
Feed aktivnosti – Pogledajte nedavna dijeljenja prijatelja s pregledima popisa za reprodukciju na koje se može kliknuti
Poboljšana analiza raspoloženja – Pametno generiranje popisa za reprodukciju s rezervnim pretraživanjima

Preduvjeti

Vaš dovršeni API za čitanje misli iz 2. dio
MongoDB, Node.js i npm instalirani
Spotify API vjerodajnice (ID klijenta i tajna)
30–45 minuta vremena za kodiranje

U 2. dijelu izradili ste korisničke račune s poviješću raspoloženja i pametnim postavkama. Sada ćemo ga učiniti društvenim! Naučit ćete kako povezati korisnike, dijeliti popise za reprodukciju u stvarnom vremenu i trajno te vidjeti što vaši prijatelji slušaju na temelju svojih raspoloženja.

Razumijevanje ključnih koncepata

Prije nego što se upustimo u kod, shvatimo što gradimo:

Socket.io – Biblioteka koja omogućuje dvosmjernu komunikaciju u stvarnom vremenu između vašeg poslužitelja i preglednika. Zamislite to kao telefonski poziv umjesto tekstualnih poruka – možete slati i primati informacije odmah bez osvježavanja stranice.
Trajna pohrana – Spremanje podataka u vašu MongoDB bazu podataka tako da ostanu tamo čak i kada se korisnici odjave. To je kao spremanje datoteke na tvrdi disk umjesto da je samo držite u memoriji.
Reference ObjectId-a – MongoDB-ov način stvaranja odnosa između podataka. Umjesto kopiranja svih podataka vašeg prijatelja u vaš profil, samo pohranjujete referencu (poput pokazivača) na njihov profil.
Sheme – Zamislite ih kao nacrte koji definiraju strukturu vaših podataka. Oni govore MongoDB-u koja polja svaki dokument treba imati i koja vrsta podataka ide u svako polje.

Korak 1: Instalirajte potrebne ovisnosti

Otvorite terminal u direktoriju projekta i instalirajte Socket.io za značajke u stvarnom vremenu:

npm install socket.io

Što ovo radi: Ova naredba preuzima i instalira biblioteku Socket.io u vaš projekt. Naredba npm install dohvaća pakete iz npm registra (ogromna biblioteka JavaScript koda) i dodaje ih u vašu mapu node_modules.

Ostale ovisnosti (sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv) već bi trebale biti instalirane iz 2. dijela.

Korak 2: Ažurirajte svoj korisnički model društvenim značajkama

Budući da ste već stvorili korisnički model u 2. dijelu, ažurirat ćemo ga kako bismo dodali društvene značajke. Korisnički model je poput predloška koji definira koje informacije pohranjujemo o svakom korisniku u našoj bazi podataka.

Što dodajemo:

friends niz – Popis referenci ObjectId-a na druge korisnike. Umjesto pohranjivanja svih korisničkih podataka, pohranjujemo samo ID-ove koji upućuju na druge korisničke dokumente u bazi podataka.
sharedWith i isShared polja – Prate koji su unosi raspoloženja podijeljeni i s kim su podijeljeni.
sharedPlaylistSchema – Nova shema (nacrt) koja definira kako izgleda dijeljena playlist: tko ju je podijelio, za koje je raspoloženje bila, pjesme i kada je podijeljena.
sharedPlaylists niz – Popis koji pohranjuje sve playliste koje su vaši prijatelji podijelili s vama.

Zamijenite svoj models/User.js s:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // Shema za pojedinačne unose raspoloženja (svaki put kada korisnik generira popis za reprodukciju) const moodEntrySchema = new mongoose.Schema({ text: String, // Što je korisnik upisao (npr. "osjećam se sretno danas") detectedMood: String, // Raspoloženje koje je naš analizator otkrio (npr. "sretan") confidence: Number, // Koliko smo sigurni (0-10) playlistGenerated: [{ // Niz pjesama koje smo preporučili trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } // null = nije ocijenjeno, true = sviđa mi se, false = nije mi se sviđa }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // S kim smo ovo podijelili? isShared: { type: Boolean, default: false }, // Je li ovo dijeljeno? timestamp: { type: Date, default: Date.now } // Kada je ovo kreirano? }); // Shema za korisničke postavke (omiljeni žanrovi itd.) const userPreferencesSchema = new mongoose.Schema({ favoriteGenres: [String], preferredEnergyLevel: { type: Number, min: 0, max: 1 }, dislikedArtists: [String], moodMupplyMapping: { happy: [String], sad: [String], energic: [String], chill: [String], angry: [String], romantic: [String], nostalgic: [String] } }); // NOVO: Shema za popise za reprodukciju koje prijatelji dijele s vama const sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // ObjectId referenca na prijatelja koji je podijelio sharedByUsername: String, // Korisničko ime za jednostavan prikaz (denormalizirano za performanse) mood: String, // Za koje raspoloženje je bio ovaj popis za reprodukciju? playlist: [{ // Stvarni naziv pjesme: String, izvođač: String, slika_albuma: String, id: String }], timestamp: { type: Date, default: Date.now } // Kada je ovo podijeljeno? }); // Glavna korisnička shema - definira strukturu korisničkog dokumenta const userSchema = new mongoose.Schema({ korisničko ime: { type: String, required: true, unique: true, trim: true, minlength: 3 }, email: { type: String, required: true, unique: true, lowercase: true }, lozinka: { type: String, required: true, minlength: 6 }, prijatelji: {[ type: mongoose.Schema.Types.ObjectId, ref: 'Korisnik' }], // Niz referenci ObjectId-a na prijatelje moodHistory: [moodEntrySchema], // Sve liste za reprodukciju koje je ovaj korisnik generirao sharedPlaylists: [sharedPlaylistSchema], // Liste za reprodukciju koje su prijatelji podijelili s ovim korisnikom preferences: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Number, default: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { type: Date, default: Date.now } } }, { timestamps: true }); // Automatski dodaje polja createdAt i updatedAt // Middleware: Pokreni ovu funkciju prije spremanja korisnika (za hashiranje njihove lozinke) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // Hash samo ako je lozinka promijenjena this.password = await bcrypt.hash(this.password, 12); // Hash s 12 rundi soli next(); }); // Metoda: Provjerava odgovara li lozinka hashiranoj lozinki userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // Metoda: Ažuriranje korisničke statistike na temelju njihove povijesti raspoloženja userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean); // Dohvaćanje svih raspoloženja koja nisu prazna this.stats.totalPlaylists = moods.length; if (moods.length > 0) { // Brojanje koliko se puta svako raspoloženje pojavljuje const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // Pronalaženje raspoloženja s najvećim brojem this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral'); } else { this.stats.mostCommonMood = 'neutral'; } // Izračunaj omiljeno doba dana na temelju kada generiraju popise za reprodukciju const sati = this.moodHistory.map(e => e.timestamp.getHours()).filter(h => !isNaN(h)); if (sati.length) { const avg = sati.reduce((a, b) => a + b, 0) / sati.length; this.stats.favoriteTime = avg < 6 ? 'noć' : avg < 12 ? 'jutro' : avg < 18 ? 'poslijepodne' : 'večer'; } }; // Izvoz modela kako bismo ga mogli koristiti u drugim datotekama module.exports = mongoose.model('User', userSchema);

Objašnjenje ključnih koncepata:

Reference ObjectId – Niz friends ne pohranjuje cijele objekte korisnika. Umjesto toga, pohranjuje ObjectId-ove (jedinstvene identifikatore) koji upućuju na druge korisnike. To je učinkovito jer ako prijatelj promijeni svoje korisničko ime, ne moramo ga ažurirati svugdje – samo pratimo referencu.
Denormalizacija – Primijetite da pohranjujemo i sharedBy (ObjectId) i sharedByUsername (String). To se naziva denormalizacija – pohranjivanje istih podataka na više mjesta radi performansi. Pohranjujemo korisničko ime kako ne bismo morali tražiti korisnika svaki put kada prikazujemo dijeljene popise za reprodukciju.
Middleware (.pre()) – Ovo se automatski pokreće prije određenih operacija. Ovdje se radi o hashiranju lozinki prije spremanja u bazu podataka radi sigurnosti.
Instance Methods (.methods) – To su funkcije koje možete pozvati na pojedinačnim korisničkim dokumentima, poput user.comparePassword() ili user.updateStats().

Korak 3: Ažurirajte svoj HTML Frontend društvenim značajkama

Sada ažurirajmo korisničko sučelje kako bismo uključili upravljanje prijateljima i feed aktivnosti. HTML definira strukturu vaše web stranice – koji se elementi pojavljuju i gdje su pozicionirani.

Što dodajemo korisničkom sučelju:

Odjeljak popisa prijatelja – Prikazuje vaše trenutne prijatelje
Dodaj unos prijatelja – Tekstualno polje za unos korisničkog imena prijatelja
Feed nedavnih aktivnosti – Prikazuje popise za reprodukciju koje su vaši prijatelji podijelili (kliknite za pregled cijelog popisa za reprodukciju)
Potvrdni okvir za dijeljenje – Mogućnost dijeljenja generiranog popisa za reprodukciju s prijateljima
Područje obavijesti – Skočne obavijesti za ažuriranja u stvarnom vremenu

Zamijenite svoj public/index.html s:

<!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 - Društveni</title> <style> /* Resetiraj zadane stilove preglednika */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Stiliziranje glavnog dijela s gradijentnom pozadinom */ body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; color: #333; } /* Spremnik za cijelu nadzornu ploču */ .dashboard { max-width: 1000px; margin: 0 auto; padding: 20px; } /* Zaglavlje s porukom dobrodošlice */ .header { background: rgba(255,255,255,0.95); background-filter: blur(10px); /* Efekt zamućenja za staklomorfizam */ border-radius: 20px; padding: 30px; margin-bottom: 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* Izgled mreže s dva stupca: odjeljak popisa za reprodukciju (veći) i odjeljak prijatelja (manji) */ .main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } /* Stiliziranje kartica za oba odjeljka */ .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); } /* Stiliziranje elemenata obrasca */ input, textarea, button { width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; } /* Stiliziranje specifično za gumb s gradijentnom pozadinom */ button { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; cursor: pointer; font-weight: 600; } /* Suptilni efekt lebdenja na gumbima */ button:hover { transform: translateY(-2px); } /* Stiliziranje pojedinačnih stavki prijatelja */ .friend-item { background: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 8px; border-left: 4px solid #667eea; /* Boja naglaska s lijeve strane */ } /* Stiliziranje skočnog prozora s obavijestima (skriveno prema zadanim postavkama, ulazi zdesna) */ .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); /* Početak izvan zaslona */ transition: transform .3s ease; z-index: 1000; max-width: 300px; } /* Prikaz obavijesti (ulazi unutra) */ .notification.show { transform: translateX(0); } /* Obrasci za prijavu i registraciju */ .login-section, .register-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; max-width: 400px; margin: 50px auto; } /* Kontrole potvrdnih okvira za dijeljenje */ .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"> <!-- Odjeljak za autentifikaciju (Obrasci za prijavu/registraciju) --> <div id="authSection"> <!-- Obrazac za prijavu --> <div class="login-section"> <h2>🧠🎵 Dobrodošli natrag!</h2> <input type="text" id="loginUsername" placeholder="Korisničko ime"/> <input type="password" id="loginPassword" placeholder="Password"/> <button onclick="login()">Prijava</button> <p><a href="#" onclick="showRegister()">Nemate račun? Registrirajte se</a></p> </div> <!-- Obrazac za registraciju (skriven prema zadanim postavkama) --> <div id="registerSection" class="register-section" style="display:none"> <h2>🎵 Izradite svoj glazbeni profil</h2> <input type="text" id="regUsername" placeholder="Korisničko ime"/> <input type="email" id="regEmail" placeholder="Email"/> <input type="password" id="regPassword" placeholder="Password"/> <button onclick="register()">Izradi račun</button> <p><a href="#" onclick="showLogin()">Već imate račun? Prijava</a></p> </div> </div> <!-- Glavni odjeljak nadzorne ploče (prikazuje se nakon prijave) --> <div id="dashboardSection" style="display:none"> <!-- Zaglavlje s korisničkim imenom i gumbom za odjavu --> <div class="header"> <h1>🧠🎵 Vaš osobni čitač glazbenih misli</h1> <p>Dobrodošli, <span id="korisničko ime"></span>!</p> <button onclick="logout()" style="width:auto; margin-top:10px">Odjava</button> </div> <!-- Izgled u dva stupca: Odjeljak popisa za reprodukciju s lijeve strane, odjeljak Prijatelji s desne strane --> <div class="main-content"> <!-- Lijevi stupac: Generiranje popisa za reprodukciju --> <div class="playlist-section"> <h2>💭 Kako se osjećate?</h2> <textarea id="moodText" placeholder="Opišite svoje raspoloženje..."></textarea> <div class="share-controls"> <label><input type="checkbox" id="shareWithFriends"/>Podijeli s prijateljima</label> </div> <button onclick="generatePlaylist()">🎧 Generiraj popis za reprodukciju</button> <!-- Rezultati se pojavljuju ovdje nakon generiranja popisa za reprodukciju --> <div id="result" style="display:none"></div> </div> <!-- Desni stupac: Prijatelji i aktivnosti --> <div class="friends-section"> <h3>👥 Moji prijatelji</h3> <div id="friendsList"></div> <h4>Dodaj prijatelja</h4> <input type="text" id="friendUsername" placeholder="Korisničko ime prijatelja"/> <button onclick="addFriend()">Dodaj prijatelja</button> <h4>Nedavna aktivnost</h4> <!-- Ovdje se prikazuju dijeljene liste za reprodukciju prijatelja --> <div id="friendActivity">Ovdje će se prikazati aktivnost prijatelja...</div> </div> </div> </div> <!-- Spremnik za skočne prozore s obavijestima --> <div id="notificationArea"></div> <!-- Uključite biblioteku Socket.io (automatski je poslužuje naš poslužitelj) --> <script src="/socket.io/socket.io.js"></script> <!-- Uključite naš prilagođeni JavaScript --> <script src="./js/app.js"></script> </body> </html>

Razumijevanje HTML strukture:

Dva glavna odjeljka: authSection (prijava/registracija) i dashboardSection (glavna aplikacija). Samo je jedan vidljiv istovremeno.
Raspored mreže: .main-content koristi CSS Grid za stvaranje dva stupca (2fr za popis za reprodukciju, 1fr za prijatelje). To znači da je odjeljak popisa za reprodukciju dvostruko širi.
Rukovatelji događajima: onclick="functionName()" govori pregledniku da pozove JavaScript funkciju kada se klikne na element.
ID-ovi: Elementi imaju jedinstvene ID-ove (poput id="friendsList") tako da ih naš JavaScript može kasnije pronaći i izmijeniti.

Korak 4: Ažurirajte server.js sa Socket.io, Friend Endpoints i Persistent Sharing

Sada ćemo ažurirati naš poslužitelj za obradu zahtjeva za prijateljstvo, dijeljenje popisa za reprodukciju i komunikaciju u stvarnom vremenu. Poslužitelj je "mozak" vaše aplikacije – obrađuje zahtjeve, komunicira s bazom podataka i šalje odgovore natrag korisnicima.

Što dodajemo poslužitelju:

Socket.io poslužitelj – Omogućuje dvosmjernu komunikaciju u stvarnom vremenu između poslužitelja i klijenata
/api/add-friend krajnja točka – Obrađuje zahtjeve za prijateljstvo (međusobno prijateljstvo)
/api/shared-playlists krajnja točka – Vraća popise za reprodukciju koje su prijatelji podijelili s vama
Poboljšani /api/personalized-playlist – Sada sprema dijeljene popise za reprodukciju u baze podataka prijatelja
Rukovatelji događajima Socketa – Osluškuju i emitiraju događaje u stvarnom vremenu (autentifikacija, dijeljenje)

Zamijenite svoj server.js s:

// Učitavanje varijabli okruženja iz .env datoteke require('dotenv').config(); // Uvoz potrebnih modula 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'); // Inicijalizacija generatora popisa za reprodukciju const playlistGen = new PlaylistGenerator(); const PORT = process.env.PORT || 3000; // Povezivanje s MongoDB bazom podataka async function connectDB() { try { console.log('🔗 Povezivanje s MongoDB…'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }); console.log('✅ MongoDB uspješno povezan!'); } catch (err) { console.error('❌ MongoDB veza nije uspjela:', err.message); process.exit(1); // Izlaz ako veza s bazom podataka ne uspije } } connectDB(); // Izrada Express aplikacije i HTTP poslužitelja const app = express(); const server = http.createServer(app); // Inicijalizacija Socket.io preko HTTP poslužitelja const io = socketIo(server); // Mapa za praćenje online korisnika: userId => socketId // Ovo nam omogućuje slanje poruka određenim korisnicima koji su trenutno povezani const connectedUsers = new Map(); // Socket.io program za obradu veze - pokreće se kada se klijent spoji io.on('connection', socket => { console.log('🔗 Socket connected:', socket.id); // Obrađuje događaj 'authenticate' - klijent nam govori tko su socket.on('authenticate', ({ userId, username }) => { // Pohranjuje ID socketa ovog korisnika kako bismo im kasnije mogli slati poruke connectedUsers.set(userId, socket.id); socket.userId = userId; // Prilaže userId ovom socketu socket.username = username; // Prilaže korisničko ime ovom socketu console.log(`✅ Autentificirani korisnik: ${username}`); }); // Obrađuje događaj 'share_playlist' - korisnik želi dijeliti s prijateljima socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { try { // Prolazi kroz sve ID-ove prijatelja za (let friendId od friendIds) { // Dohvati ID socketa za ovog prijatelja (ako je online) const sid = connectedUsers.get(friendId.toString()); if (sid) { // Prijatelj je online! Pošaljite mu obavijest u stvarnom vremenu io.to(sid).emit('friend_shared_playlist', { friendName, mood, playlist }); } // Ako je prijatelj offline, vidjet će popis za reprodukciju u svom feedu aktivnosti kada se prijavi } } catch (err) { console.error('Greška dijeljenja popisa za reprodukciju:', err); } }); // Upravljanje prekidom veze - uklanjanje korisnika s online mape socket.on('disconnect', () => { if (socket.userId) { connectedUsers.delete(socket.userId); console.log(`👋 Disconnected: ${socket.username}`); } }); }); // Middleware za parsiranje tijela JSON zahtjeva app.use(express.json()); // Poslužuje statičke datoteke iz mape 'public' (HTML, CSS, slike) app.use(express.static(path.join(__dirname, 'public'))); // ===== API KRAJNJE TOČKE ===== // POST /api/register - Stvaranje novog korisničkog računa app.post('/api/register', async (req, res) => { try { const { korisničko_ime, e-pošta, lozinka } = req.body; // Validacija unosa if (!korisničko_ime || !e-pošta || !lozinka) { return res.status(400).json({ greška: 'Sva polja su obavezna' }); } if (password.length < 6) { return res.status(400).json({ greška: 'Lozinka mora imati najmanje 6 znakova' }); } // Provjera postoji li korisničko_ime ili e-pošta već const exists = await User.findOne({ $or: [{ korisničko_ime }, { e-pošta }] }); if (exists) { return res.status(400).json({ greška: 'Korisničko_ime ili e-pošta već postoji' }); } // Stvori i spremi novog korisnika (lozinka će biti automatski hashirana od strane našeg middlewarea za prethodno spremanje) const korisnik = novi Korisnik({ korisničko ime, e-pošta, lozinka }); await korisnik.save(); res.status(201).json({ poruka: 'Korisnik uspješno kreiran' }); } catch (err) { console.error('Pogreška registracije:', err); res.status(500).json({ greška: 'Registracija nije uspjela' }); } }); // POST /api/login - Autentificira korisnika i vraća JWT token app.post('/api/login', async (req, res) => { try { const { korisničko ime, lozinka } = req.body; // Pronalazi korisnika po korisničkom imenu ili e-pošti const user = await User.findOne({ $or: {[ korisničko ime }, { e-pošta: korisničko ime }] }); // Provjerava postoji li korisnik i je li lozinka ispravna if (!user || !(await user.comparePassword(lozinka))) { return res.status(401).json({ greška: 'Nevažeći podaci' }); } // Izrađuje JWT token (poput privremene osobne iskaznice) const token = jwt.sign( { userId: user._id }, // Korisni sadržaj (ono što kodiramo) process.env.JWT_SECRET, // Tajni ključ (održava ga sigurnim) { expiresIn: '7d' } // Token istječe za 7 dana ); // Pošalji token natrag klijentu res.json({ token, user: { username: user.username, email: user.email, friends: user.friends } }); } catch (err) { console.error('Pogreška prijave:', err); res.status(500).json({ error: 'Prijava nije uspjela' }); } }); // GET /api/profile - Dohvati profil trenutnog korisnika // Middleware 'auth' provjerava JWT token i pridružuje korisnika req.user app.get('/api/profile', auth, async (req, res) => { try { // Ažuriranje korisničke statistike req.user.updateStats(); await req.user.save(); // Popunjavanje niza prijatelja (zamjena ObjectIds-ova stvarnim korisničkim objektima) 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('Pogreška profila:', err); res.status(500).json({ greška: 'Nije uspjelo učitavanje profila' }); } }); // GET /api/shared-playlists - Dohvati popise za reprodukciju koje su prijatelji podijelili s vama app.get('/api/shared-playlists', auth, async (req, res) => { try { // Dohvati posljednjih 10 dijeljenih popisa za reprodukciju, sortiranih po najnovijem prvom const sharedPlaylists = req.user.sharedPlaylists .sort((a, b) => b.timestamp - a.timestamp) // Sortiraj silazno po vremenskoj oznaci .slice(0, 10); // Uzmi prvih 10 res.json({ sharedPlaylists }); } catch (err) { console.error('Greška dijeljenih popisa za reprodukciju:', err); res.status(500).json({ greška: 'Nije uspjelo učitavanje dijeljenih popisa za reprodukciju' }); } }); // POST /api/add-friend - Dodavanje prijatelja (uzajamno prijateljstvo) app.post('/api/add-friend', auth, async (req, res) => { try { const { friendUsername } = req.body; // Pronađi prijatelja po korisničkom imenu const friend = await User.findOne({ username: friendUsername }); if (!friend) { return res.status(404).json({ error: 'Korisnik nije pronađen' }); } // Provjeri jesu li već prijatelji if (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) { return res.status(400).json({ error: 'Već ste prijatelji s ovim korisnikom' }); } // Dodaj svakog korisnika na listu prijatelja drugoga (uzajamno prijateljstvo) req.user.friends.push(friend._id); friend.friends.push(req.user._id); // Spremi oba korisnika await req.user.save(); await friend.save(); res.json({ poruka: 'Prijatelj uspješno dodan', friendId: friend._id }); } catch (err) { console.error('Pogreška dodavanja prijatelja:', err); console.error('Stock pogrešaka:', err.stack); res.status(500).json({ pogreška: 'Dodavanje prijatelja nije uspjelo' }); } }); // POST /api/personalized-playlist - Generiranje popisa za reprodukciju na temelju raspoloženja 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: 'Molim vas, recite mi kako se osjećate!' }); } // 1. Analizira raspoloženje iz korisnikove poruke const moodAnalysis = moodAnalyzer.analyzeMood(text); // 2. Generira popis za reprodukciju na temelju raspoloženja const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 3. Sprema u povijest raspoloženja korisnika 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. Ako je dijeljenje omogućeno, spremi u niz sharedPlaylists svakog prijatelja 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 => ({ // Podijeli prvih 5 pjesama name: t.name, artist: t.artist, album_image: t.album_image, id: t.id })) }; // Prođi kroz sve prijatelje i dodaj ovu playlistu na njihove sharedPlayliste for (let friendId of req.user.friends) { const friend = await User.findById(friendId); if (friend) { friend.sharedPlaylists.push(sharedPlaylistData); await friend.save(); } } } // 5. Pošalji odgovor natrag klijentu res.json({ moodAnalysis, playlist, personalizedMessage: `Na temelju vaše povijesti, evo vaše savršene ${moodAnalysis.mood} playliste!` }); } catch (err) { console.error('Greška personaliziranog playlista:', err); console.error('Stock pogrešaka:', err.stack); res.status(500).json({ error: 'Generiranje personaliziranog playlista nije uspjelo. Pokušajte ponovno.' }); } }); // Rezervna opcija: Posluži index.html za sve rute koje nisu API (za SPA usmjeravanje) app.use((req, res, next) => { if (req.method === 'GET' && !req.path.startsWith('/api/')) { res.sendFile(path.join(__dirname, 'public', 'index.html')); } else { next(); } }); // Rukovatelj globalnim greškama app.use((err, req, res, next) => { console.error('Globalna greška:', err); res.status(500).json({ greška: 'Interna greška poslužitelja', detalji: err.message }); }); // Pokreni poslužitelj server.listen(PORT, () => { console.log(`🚀 Poslužitelj radi na http://localhost:${PORT}`); });

Objašnjenje ključnih koncepata poslužitelja:

Middleware – Funkcije koje obrađuju zahtjeve prije nego što stignu do vaših obrađivača ruta. express.json() parsira JSON iz tijela zahtjeva, auth provjerava JWT tokene.
async/await – Moderna JavaScript sintaksa za rukovanje asinkronim operacijama (poput upita bazi podataka). await pauzira izvršavanje dok se obećanje ne riješi.
HTTP statusni kodovi – Brojevi koji označavaju rezultat: 200 = uspjeh, 201 = kreirano, 400 = loš zahtjev, 401 = neovlašteno, 404 = nije pronađeno, 500 = pogreška poslužitelja.
Socket.io događaji – Imenovane poruke koje se prenose između klijenta i poslužitelja. socket.on() osluškuje događaje, socket.emit() šalje događaje.
JWT (JSON web token) – Siguran način identifikacije korisnika. Kada se prijave, dajemo im token. Oni šalju ovaj token sa svakim zahtjevom kako bi dokazali tko su.

Korak 5: Ažurirajte Frontend JavaScript (public/js/app.js)

Na kraju, dodajmo JavaScript koji čini naš frontend interaktivnim. Ovaj kod se izvršava u korisnikovom pregledniku i obrađuje stvari poput klikova na gumbe, API zahtjeva i ažuriranja u stvarnom vremenu.

Što ovaj JavaScript radi:

Upravlja autentifikacijom – Prijava, registracija, odjava i pohrana tokena
Inicijalizira Socket.io – Povezuje se s poslužiteljem i osluškuje događaje u stvarnom vremenu
Šalje API zahtjeve – Koristi fetch() za komunikaciju s krajnjim točkama poslužitelja
Ažurira korisničko sučelje – Dinamički stvara HTML elemente na temelju podataka s poslužitelja
Obrađuje korisničke interakcije – Klikovi na gumbe, slanje obrazaca itd.

Zamijenite svoj public/js/app.js punim kodom prikazanim u vodiču...

(Blok koda app.js slijedi točno kao i prije, s sve funkcije za prijavu, registraciju, učitavanjeSharedPlaylists itd.)

Korak 6: Testirajte svoj API za društvenu glazbu

Sada je vrijeme da sve testirate! Pažljivo slijedite ove korake:

Pokrenite svoj poslužitelj: U terminalu pokrenite npm start. Trebali biste vidjeti poruke poput "MongoDB connected!" i "Server running on http://localhost:3000".
Otvorite dva prozora preglednika: Otvorite http://localhost:3000 u dva odvojena prozora preglednika (ili jednom običnom prozoru i jednom anonimnom prozoru). Ovo simulira dva različita korisnika.
Registriraj korisnika 1: U prvom prozoru kliknite "Registriraj se" i stvorite korisnika (npr. korisničko ime: "alice").
Registriraj korisnika 2: U drugom prozoru stvorite drugog korisnika (npr. korisničko ime: "bob").
Dodajte se kao prijatelji: U Alisinom prozoru upišite "bob" u polje "Dodaj prijatelja" i kliknite Dodaj prijatelja. Učinite isto u Bobovom prozoru (upišite "alice"). Trebali biste se vidjeti na svojim popisima prijatelja!
Dijelite popis za reprodukciju: U Alisinom prozoru upišite nešto poput "Danas se osjećam super sretno!" u tekstni okvir raspoloženja. Označite potvrdni okvir "Podijeli s prijateljima", a zatim kliknite "Generiraj popis za reprodukciju".
Gledajte kako se događa čarolija:
- Ako je Bob online (prozor je još uvijek otvoren), vidjet će obavijest koja se pojavljuje s desne strane!
- Bob bi također trebao vidjeti Alicein dijeljeni popis za reprodukciju u odjeljku "Nedavna aktivnost".
- Bob može kliknuti na dijeljeni popis za reprodukciju kako bi vidio cijeli popis pjesama.
- Ako se Bob odjavi i kasnije ponovno prijavi, dijeljeni popis za reprodukciju i dalje će biti tamo!

Razumijevanje kako sve funkcionira zajedno

Pratimo što se događa kada Alice podijeli popis za reprodukciju s Bobom:

Alice označava "Podijeli s prijateljima" i klikne "Generiraj popis za reprodukciju"
Frontend šalje POST zahtjev na /api/personalized-playlist s shareWithFriends: true
Poslužitelj analizira Aliceino raspoloženje i generira popis za reprodukciju pomoću Spotify API-ja
Poslužitelj sprema popis za reprodukciju u Alicein niz moodHistory
Poslužitelj prolazi kroz Aliceine prijatelje (uključujući Boba) i dodaje popis za reprodukciju u niz sharedPlaylists svakog prijatelja u MongoDB-u
Frontend emitira događaj share_playlist Socket.io kako bi obavijestio online prijatelji
Poslužitelj prima događaj i provjerava je li Bob online (pregledava u mapi connectedUsers)
Ako je Bob online, poslužitelj mu šalje događaj friend_shared_playlist s pregledom popisa za reprodukciju
Bobov preglednik prima događaj i poziva showNotification() za prikaz skočnog prozora
Bobov preglednik također poziva loadSharedPlaylists() za osvježavanje feeda aktivnosti
Ako je Bob offline, vidjet će popis za reprodukciju u svom feedu aktivnosti kada se sljedeći put prijavi (jer je spremljen u njegovom nizu sharedPlaylists)

Što ste izgradili

Čestitamo! Uspješno ste izgradili potpuno opremljenu aplikaciju za društvenu glazbu! Evo što ste postigli:

🤝 Sustav prijatelja – Korisnici mogu dodavati prijatelje po korisničkom imenu. Prijateljstva su uzajamna (oba korisnika postaju prijatelji jedan drugome) i pohranjuju se kao reference ObjectId u MongoDB-u.
💾 Trajno dijeljenje popisa za reprodukciju – Dijeljeni popisi za reprodukciju spremaju se u bazu podataka u nizu sharedPlaylists svakog prijatelja. To znači da podaci ostaju čak i nakon što se korisnici odjave.
📡 Obavijesti u stvarnom vremenu – Pomoću Socket.io, online korisnici dobivaju trenutne obavijesti kada prijatelji dijele popise za reprodukciju. Nije potrebno osvježavanje stranice!
📰 Feed aktivnosti – Korisnici mogu vidjeti nedavno dijeljene popise za reprodukciju svih svojih prijatelja, sortirane od najnovijih. Klikom na popis pjesama prikazuje se cijeli popis pjesama.
🔐 Sigurna autentifikacija – Lozinke se hashiraju pomoću bcrypta (nikada se ne pohranjuju kao običan tekst), a JWT tokeni se koriste za autentifikaciju API zahtjeva.
⏱️ Prilagođeno izvan mreže – Prijatelji mogu pregledavati dijeljene popise pjesama čak i ako nisu bili online kada je popis pjesama podijeljen. Sve se sprema u bazu podataka!

Ključni koncepti koje ste naučili

Komunikacija u stvarnom vremenu sa Socket.io (WebSockets)
Odnosi s bazom podataka korištenjem MongoDB ObjectId referenci
Denormalizacija za performanse (pohranjivanje i ObjectId-a i korisničkog imena)
RESTful API dizajn (GET, POST krajnje točke s odgovarajućim HTTP statusnim kodovima)
Middleware obrazac za autentifikaciju i obradu zahtjeva
Async/await za rukovanje asinkronim operacijama
DOM manipulacija za dinamičko ažuriranje korisničkog sučelja
Arhitektura vođena događajima s događajima Socket.io

Rješavanje uobičajenih problema

"Nije moguće povezati se s MongoDB-om" – Provjerite je li vaš MongoDB poslužitelj pokrenut i je li vaš MONGODB_URI u .env ispravan.
"Nevažeći podaci za prijavu" – Dvaput provjerite svoje korisničko ime i lozinku. Imajte na umu da razlikuju velika i mala slova!
"Korisnik nije pronađen" prilikom dodavanja prijatelja – Provjerite upisujete li točno korisničko ime (razlikuje velika i mala slova). Prvo se moraju registrirati.
Dijeljene liste za reprodukciju se ne prikazuju – Provjerite konzolu preglednika (F12) ima li pogrešaka. Provjerite jesu li oba korisnika prijatelji i je li označen potvrdni okvir "Podijeli s prijateljima".
Obavijesti u stvarnom vremenu ne rade – Provjerite je li Socket.io povezan. Provjerite konzolu preglednika za "🔗 Povezano s poslužiteljem".

Sljedeći koraci i ideje za proširenje

Sada kada imate funkcionalnu društvenu glazbenu aplikaciju, evo nekoliko ideja za daljnji razvoj:

Zahtjevi za prijateljstvo – Umjesto trenutnog prijateljstva, zahtijevajte od korisnika da šalju zahtjeve koji se mogu prihvatiti ili odbiti
Privatne poruke – Dodajte sustav za chat pomoću Socket.io kako bi prijatelji mogli međusobno slati poruke
Komentari na popise za reprodukciju – Omogućite korisnicima komentiranje dijeljenih popisa za reprodukciju
Sviđa mi se/ne sviđa mi se pjesme – Dodajte gumbe za palčeve gore/dolje svakoj pjesmi na popisu za reprodukciju
Kompatibilnost glazbenog ukusa – Izračunajte postotak na temelju toga koliko su slične glazbene preferencije dvaju korisnika
Pretražite korisnike – Dodajte značajku pretraživanja za pronalaženje korisnika prema korisničkom imenu
Izbriši/ukloni prijateljstvo – Dodajte mogućnost uklanjanja prijatelji ili brisanje dijeljenih popisa za reprodukciju
Stranice profila – Prikažite korisničke statistike, omiljena raspoloženja i nedavne popise za reprodukciju
Suradnički popisi za reprodukciju – Omogućite više prijatelja da dodaju pjesme na zajednički popis za reprodukciju
Povijest popisa za reprodukciju – Pogledajte sve svoje prethodno generirane popise za reprodukciju

Izgradili ste cjelovitu društvenu glazbenu aplikaciju sa značajkama u stvarnom vremenu i trajnom pohranom podataka! Ovo je čvrst temelj za razumijevanje modernog web razvoja. Nastavite eksperimentirati i graditi!🎵✨