Přidání přátel do vašeho rozhraní API pro čtení myšlenek: Sdílení na sociálních sítích v reálném čase

Jste připraveni, aby vaše rozhraní API pro čtení myšlenek bylo skutečně sociální? V tomto tutoriálu přidáte robustní systém přátel a sdílení playlistů, které se ukládají do databáze, takže si uživatelé mohou prohlížet sdílené playlisty svých přátel, i když nejsou online. Pro aktualizace v reálném čase použijeme Socket.io a pro trvalé ukládání MongoDB.

Co vytvoříte

Systém přátel – Přidávání a správa přátel podle uživatelského jména se vzájemným přátelstvím pomocí ObjectId
Trvalé sdílení playlistů – Sdílené playlisty se ukládají do databáze a lze si je kdykoli prohlédnout
Oznámení v reálném čase – Získejte okamžitá oznámení, když přátelé sdílejí (pokud jsou online)
Kanál aktivit – Zobrazení nedávných sdílení přátel s klikatelnými náhledy playlistů
Vylepšená analýza nálady – Inteligentní generování playlistů s možností vyhledávání

Předpoklady

Vaše dokončené rozhraní Mind-Reading Music API od 2. část
Nainstalovány MongoDB, Node.js a npm
Přihlašovací údaje Spotify API (ID klienta a tajný klíč)
30–45 minut kódování

Ve 2. části jste si vytvořili uživatelské účty s historií nálad a chytrými preferencemi. Teď se pustíme do sociálních sítí! Naučíte se, jak propojit uživatele, sdílet playlisty v reálném čase i trvale a sledovat, co vaši přátelé poslouchají na základě jejich nálad.

Pochopení klíčových konceptů

Než se ponoříme do kódu, pojďme si vysvětlit, co vytváříme:

Socket.io – Knihovna, která umožňuje reálnou obousměrnou komunikaci mezi vaším serverem a prohlížečem. Představte si to jako telefonní hovor místo textových zpráv – můžete okamžitě odesílat a přijímat informace, aniž byste museli stránku obnovovat.
Trvalé úložiště – Ukládání dat do databáze MongoDB, aby tam zůstala i po odhlášení uživatelů. Je to jako uložení souboru na pevný disk, místo aby se jen uchovával v paměti.
Odkazy na ObjectId – Způsob, jakým MongoDB vytváří vztahy mezi daty. Místo kopírování všech informací o vašich přátelích do vašeho profilu pouze ukládáte odkaz (například ukazatel) na jejich profil.
Schémata – Představte si je jako plány, které definují strukturu vašich dat. Říkají MongoDB, jaká pole by měl každý dokument obsahovat a jaký typ dat se do každého pole vkládá.

Krok 1: Instalace požadovaných závislostí

Otevřete terminál v adresáři projektu a nainstalujte Socket.io pro funkce v reálném čase:

npm install socket.io

Co to dělá: Tento příkaz stáhne a nainstaluje knihovnu Socket.io do vašeho projektu. Příkaz npm install načte balíčky z registru npm (obrovská knihovna kódu JavaScript) a přidá je do složky node_modules.

Ostatní závislosti (sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv) by již měly být nainstalovány z 2. části.

Krok 2: Aktualizace modelu uživatele o sociální funkce

Protože jste již v 2. části vytvořili model uživatele, aktualizujeme ho a přidáme sociální funkce. Model uživatele je jako šablona, která definuje, jaké informace o každém uživateli ukládáme do naší databáze.

Co přidáváme:

friends – Seznam odkazů ObjectId na ostatní uživatele. Místo ukládání úplných informací o uživateli ukládáme pouze ID, která odkazují na dokumenty jiných uživatelů v databázi.
sharedWith a isShared – Tato pole sledují, které položky nálad byly sdíleny a s kým byly sdíleny.

sharedPlaylistSchema – Nové schéma (návrh), které definuje, jak vypadá sdílený playlist: kdo ho sdílel, pro jakou náladu byl, skladby a kdy byl sdílen.

sharedPlaylists pole – Seznam, který ukládá všechny playlisty, které s vámi vaši přátelé sdíleli.

Nahraďte soubor models/User.js tímto:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // Schéma pro jednotlivé položky nálady (pokaždé, když uživatel vygeneruje playlist) const moodEntrySchema = new mongoose.Schema({ text: String, // Co uživatel napsal (např. „dnes se cítím šťastný“) detectedMood: String, // Nálada, kterou náš analyzátor detekoval (např. „šťastný“) confidence: Number, // Jak moc si jsme jisti (0-10) playlistGenerated: [{ // Pole skladeb, které jsme doporučili trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } // null = nehodnoceno, true = líbilo se mi, false = nelíbilo se mi }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // S kým jsme to sdíleli? isShared: { type: Boolean, default: false }, // Bylo to sdíleno? timestamp: { type: Date, default: Date.now } // Kdy to bylo vytvořeno? }); // Schéma pro uživatelské preference (oblíbené žánry atd.) 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] } }); // NOVINKA: Schéma pro playlisty, které s vámi sdílejí přátelé const sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // ObjectId odkaz na přítele, který sdílel sharedByUsername: String, // Uživatelské jméno pro snadné zobrazení (denormalizováno pro výkon) mood: String, // Pro jakou náladu byl tento playlist? playlist: [{ // Skutečný název skladby: String, interpret: String, album_image: String, id: String }], timestamp: { type: Date, default: Date.now } // Kdy bylo toto sdíleno? }); // Hlavní schéma uživatele - definuje strukturu uživatelského dokumentu 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' }], // Pole odkazů na ObjectId přátele moodHistory: [moodEntrySchema], // Všechny playlisty, které tento uživatel vygeneroval sharedPlaylists: [sharedPlaylistSchema], // Playlisty, které přátelé sdíleli s tímto uživatelem preferences: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Number, default: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { type: Date, default: Date.now } } }, { timestamps: true }); // Automaticky přidat pole createdAt a updatedAt // Middleware: Spustit tuto funkci před uložením uživatele (pro hashování jeho hesla) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // Hash pouze v případě změny hesla this.password = await bcrypt.hash(this.password, 12); // Hash s 12 koly saltu next(); }); // Metoda: Zkontrolovat, zda heslo odpovídá hashovanému heslu userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // Metoda: Aktualizace statistik uživatelů na základě historie jejich nálad userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean); // Získání všech neprázdných nálad this.stats.totalPlaylists = moods.length; if (moods.length > 0) { // Spočítání, kolikrát se každá nálada objeví const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // Nalezení nálady s nejvyšším počtem this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral'); } else { this.stats.mostCommonMood = 'neutral'; } // Vypočítá oblíbenou denní dobu na základě doby generování playlistů 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'; } }; // Export modelu, abychom ho mohli použít v jiných souborech module.exports = mongoose.model('User', userSchema);

Vysvětlení klíčových konceptů:

Reference ObjectId – Pole friends neukládá celé objekty uživatelů. Místo toho ukládá ObjectId (jedinečné identifikátory), které odkazují na jiné uživatele. To je efektivní, protože pokud přítel změní své uživatelské jméno, nemusíme ho aktualizovat všude – stačí se řídit referencí.

Denormalizace – Všimněte si, že ukládáme jak sharedBy (ObjectId), tak i sharedByUsername (String). Tomu se říká denormalizace – ukládání stejných dat na více míst kvůli výkonu. Uživatelské jméno ukládáme, abychom ho nemuseli vyhledávat pokaždé, když zobrazujeme sdílené playlisty.

Middleware (.pre()) – Spouští se automaticky před určitými operacemi. Zde se hesla před uložením do databáze z bezpečnostních důvodů hašují.

Metody instance (.methods) – Jedná se o funkce, které můžete volat na dokumenty jednotlivých uživatelů, například user.comparePassword() nebo user.updateStats().

Krok 3: Aktualizujte HTML frontend o sociální funkce

Nyní aktualizujme uživatelské rozhraní tak, aby zahrnovalo správu přátel a informační kanál o aktivitách. HTML definuje strukturu vaší webové stránky – jaké prvky se zobrazují a kde jsou umístěny.

Co přidáváme do uživatelského rozhraní:

Sekce seznamu přátel – Zobrazuje vaše aktuální přátele

Přidat vstup pro přítele – Textové pole pro zadání uživatelského jména přítele

Kanál nedávné aktivity – Zobrazuje seznamy skladeb, které vaši přátelé sdíleli (kliknutím zobrazíte celý seznam skladeb)

Zaškrtávací políčko Sdílet – Možnost sdílet vygenerovaný seznam skladeb s přáteli

Oblast oznámení – Vyskakovací oznámení o aktualizacích v reálném čase

Nahraďte soubor public/index.html tímto:

<!DOCTYPE html> <html lang="cs"> <head> Mind-Reading Music API - Sociální sítě <div class="login-section"> <h2>🧠🎵 Vítejte zpět!</h2> <input type="text" id="loginUsername" placeholder="Uživatelské_jméno"/> <input type="password" id="loginPassword" placeholder="Heslo"/> <button onclick="login()">Přihlásit se</button> <p><a href="#" onclick="showRegister()">Nemáte účet? Zaregistrujte se</a></p> </div>  <div id="registerSection" class="register-section" style="display:none"> <h2>🎵 Vytvořte si hudební profil</h2> <input type="text" id="regUsername" placeholder="Uživatelské jméno"/> <input type="email" id="regEmail" placeholder="Email"/> <input type="password" id="regPassword" placeholder="Heslo"/> <button onclick="register()">Vytvořit účet</button> <p><a href="#" onclick="showLogin()">Již máte účet? Přihlásit se</a></p> </div> </div>  <div id="dashboardSection" style="display:none">  <div class="header"> <h1>🧠🎵 Váš osobní čtenář hudebních myšlenek</h1> <p>Vítejte, <span id="username"></span>!</p> <button onclick="logout()" style="width:auto; margin-top:10px">Odhlásit</button> </div>  <div class="main-content">  <div class="playlist-section"> <h2>💭 Jak se cítíte?</h2> </textarea><div class="share-controls"><label><input type="checkbox" id="shareWithFriends"/>Sdílet s přáteli</label></div><button onclick="generatePlaylist()">🎧 Generovat playlist</button><div id="result" style="display:none"></div></div><div class="friends-section"><h3>👥 Moji přátelé</t;/h3> <div id="friendsList"></div> <h4>Přidat přítele</h4> <input type="text" id="friendUsername" placeholder="Uživatelské jméno přítele"/> <button onclick="addFriend()">Přidat přítele</button> <h4>Nedávná aktivita</h4>  <div id="friendActivity">Zde se zobrazí aktivita přátel...</div> </div> </div> </div>  <div id="notificationArea"></div> <lt;!-- Zahrnout knihovnu Socket.io (automaticky obsluhovanou naším serverem) --> <script src="/socket.io/socket.io.js"></script>  <script src="./js/app.js"></script> </body> </html></code></pre> <h3>Pochopení struktury HTML:</h3> <ul> <li><strong>Dvě hlavní sekce</strong>: <code>authSection</code> (přihlášení/registrace) a <code>dashboardSection</code> (hlavní aplikace). Viditelná je pouze jedna v danou chvíli.</li> <li><strong>Rozvržení mřížky</strong>: Soubor <code>.main-content</code> používá CSS mřížku k vytvoření dvou sloupců (2fr pro playlist, 1fr pro přátele). To znamená, že sekce playlistu je dvakrát tak široká.</li> <li><strong>Obslužné rutiny událostí</strong>: <code>onclick="functionName()"</code> říká prohlížeči, aby po kliknutí na prvek zavolal funkci JavaScriptu.</li> <li><strong>ID</strong>: Prvky mají jedinečná ID (například <code>id="friendsList"</code>), takže je náš JavaScript může později najít a upravit.</li> </ul> <h2>Krok 4: Aktualizujte server.js pomocí Socket.io, Friend Endpoints a Persistent Sharing</h2> <p>Nyní aktualizujeme náš server, aby zvládal žádosti o přátelství, sdílení playlistů a komunikaci v reálném čase. Server je „mozkem“ vaší aplikace – zpracovává požadavky, komunikuje s databází a odesílá odpovědi zpět uživatelům.</p> <h3>Co přidáváme na server:</h3> <ul> <li><strong>Socket.io server</strong> – Umožňuje obousměrnou komunikaci v reálném čase mezi serverem a klienty</li> <li><strong><code>/api/add-friend</code> endpoint</strong> – Zpracovává žádosti o přátelství (vzájemné přátelství)</li> <li><strong><code>/api/shared-playlists</code> endpoint</strong> – Vrací seznamy skladeb, které s vámi přátelé sdíleli</li> <li><strong>Vylepšený <code>/api/personalized-playlist</code></strong> – Nyní ukládá sdílené seznamy skladeb do databází přátel</li> <li><strong>Obslužné rutiny událostí Socket</strong> – Naslouchají a vytvářejí události v reálném čase (autentizace, sdílení)</li> </ul> <p><strong>Nahraďte svůj <code>server.js</code> s:</strong></p> <pre><code>// Načtení proměnných prostředí ze souboru .env require('dotenv').config(); // Import požadovaných modulů 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'); // Inicializace generátoru playlistů const playlistGen = new PlaylistGenerator(); const PORT = process.env.PORT || 3000; // Připojení k databázi MongoDB async function connectDB() { try { console.log('🔗 Připojování k MongoDB…'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }); console.log('✅ MongoDB úspěšně připojeno!'); } catch (err) { console.error('❌ Připojení k MongoDB selhalo:', err.message); process.exit(1); // Ukončení, pokud se připojení k databázi nezdaří } } connectDB(); // Vytvoření aplikace Express a HTTP serveru const app = express(); const server = http.createServer(app); // Inicializace Socket.io nad HTTP serverem const io = socketIo(server); // Mapování pro sledování online uživatelů: userId => socketId // To nám umožňuje odesílat zprávy konkrétním uživatelům, kteří jsou aktuálně připojeni const connectedUsers = new Map(); // Obslužná rutina připojení Socket.io - spustí se, když se klient připojí io.on('connection', socket => { console.log('🔗 Socket connected:', socket.id); // Zpracování události 'authenticate' - klient nám sdělí, kdo je socket.on('authenticate', ({ userId, username }) => { // Uložení ID socketu tohoto uživatele, abychom mu později mohli posílat zprávy connectedUsers.set(userId, socket.id); socket.userId = userId; // Připojení userId k tomuto socketu socket.username = username; // Připojení userId k tomuto socketu console.log(`✅ Authenticated user: ${username}`); }); // Zpracování události 'share_playlist' - uživatel chce sdílet s přáteli socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { try { // Projdeme všechna ID přátel for (let friendId of friendIds) { // Získáme ID socketu pro tohoto přítele (pokud je online) const sid = connectedUsers.get(friendId.toString()); if (sid) { // Přítel je online! Pošlete mu upozornění v reálném čase io.to(sid).emit('friend_shared_playlist', { friendName, mood, playlist }); } // Pokud je přítel offline, uvidí playlist ve svém kanálu aktivit po přihlášení } } catch (err) { console.error('Chyba sdílení playlistu:', err); } }); // Zpracování odpojení - odebrání uživatele z online mapy socket.on('disconnect', () => { if (socket.userId) { connectedUsers.delete(socket.userId); console.log(`👋 Odpojeno: ${socket.username}`); } }); }); // Middleware pro analýzu těl JSON požadavků app.use(express.json()); // Načítání statických souborů ze složky 'public' (HTML, CSS, obrázky) app.use(express.static(path.join(__dirname, 'public'))); // ===== KONCOVÉ BODY API ===== // POST /api/register - Vytvoření nového uživatelského účtu app.post('/api/register', async (req, res) => { try { const { uživatelské_jméno, e-mail, heslo } = req.body; // Ověření vstupu if (! uživatelské_jméno || !email || !heslo) { return res.status(400).json({ chyba: 'Všechna pole jsou povinná' }); } if (password.length < 6) { return res.status(400).json({ chyba: 'Heslo musí mít alespoň 6 znaků' }); } // Zkontrolujeme, zda uživatelské_jméno nebo e-mail již existuje const exists = await User.findOne({ $or: [{ uživatelské_jméno }, { e-mail }] }); if (exists) { return res.status(400).json({ chyba: 'Uživatelské_jméno nebo e-mail již existuje' }); } // Vytvoření a uložení nového uživatele (heslo bude automaticky hašováno naším middlewarem pro předběžné ukládání) const user = new User({ username, email, password }); await user.save(); res.status(201).json({ message: 'Uživatel byl úspěšně vytvořen' }); } catch (err) { console.error('Chyba registrace:', err); res.status(500).json({ error: 'Registrace selhala' }); } }); // POST /api/login - Ověření uživatele a vrácení JWT tokenu app.post('/api/login', async (req, res) => { try { const { username, password } = req.body; // Vyhledání uživatele podle uživatelského jména nebo e-mailu const user = await User.findOne({ $or: {[ username }, { email: username }] }); // Kontrola, zda uživatel existuje a heslo je správné if (!user || !(await user.comparePassword(password))) { return res.status(401).json({ error: 'Neplatné přihlašovací údaje' }); } // Vytvoření JWT tokenu (jako dočasný průkaz totožnosti) const token = jwt.sign( { userId: user._id }, // Účelová data (co kódujeme) process.env.JWT_SECRET, // Tajný klíč (udržuje ho v bezpečí) { expiresIn: '7d' } // Platnost tokenu vyprší za 7 dní ); // Odeslat token zpět klientovi res.json({ token, user: { username: user.username, email: user.email, friends: user.friends } }); } catch (err) { console.error('Chyba přihlášení:', err); res.status(500).json({ error: 'Přihlášení se nezdařilo' }); } }); // GET /api/profile - Získá profil aktuálního uživatele // Middleware 'auth' ověří JWT token a připojí uživatele k req.user app.get('/api/profile', auth, async (req, res) => { try { // Aktualizace statistik uživatelů req.user.updateStats(); await req.user.save(); // Naplnění pole přátel (nahrazení ObjectIds skutečnými objekty uživatelů) 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('Chyba profilu:', err); res.status(500).json({ chyba: 'Nepodařilo se načíst profil' }); } }); // GET /api/shared-playlists - Získá playlisty, které s vámi sdíleli přátelé app.get('/api/shared-playlists', auth, async (req, res) => { try { // Získá posledních 10 sdílených playlistů, seřazených podle nejnovějšího const sharedPlaylists = req.user.sharedPlaylists .sort((a, b) => b.timestamp - a.timestamp) // Seřadit sestupně podle časového razítka .slice(0, 10); // Vezme prvních 10 res.json({ sharedPlaylists }); } catch (err) { console.error('Chyba sdílených playlistů:', err); res.status(500).json({ chyba: 'Nepodařilo se načíst sdílené playlisty' }); } }); // POST /api/add-friend - Přidání přítele (vzájemné přátelství) app.post('/api/add-friend', auth, async (req, res) => { try { const { friendUsername } = req.body; // Nalezení přítele podle uživatelského jména const friend = await User.findOne({ username: friendUsername }); if (!friend) { return res.status(404).json({ error: 'Uživatel nenalezen' }); } // Zkontroluje, zda již existuje přátelství if (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) { return res.status(400).json({ error: 'S tímto uživatelem již máte přátelství' }); } // Přidání každého uživatele do seznamu přátel toho druhého (vzájemné přátelství) req.user.friends.push(friend._id); friend.friends.push(req.user._id); // Uložení obou uživatelů await req.user.save(); await friend.save(); res.json({ message: 'Přítel úspěšně přidán', friendId: friend._id }); } catch (err) { console.error('Chyba přidání přítele:', err); console.error('Chyba stack:', err.stack); res.status(500).json({ chyba: 'Přidání přítele se nezdařilo' }); } }); // POST /api/personalized-playlist - Generování playlistu na základě nálady 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: 'Prosím, řekněte mi, jak se cítíte!' }); } // 1. Analyzování nálady z textu uživatele const moodAnalysis = moodAnalyzer.analyzeMood(text); // 2. Generování playlistu na základě nálady const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 3. Uložení do historie nálad uživatele 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. Pokud je sdílení povoleno, uložit do pole sharedPlaylists každého přítele 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 => ({ // Sdílet prvních 5 skladeb name: t.name, artist: t.artist, album_image: t.album_image, id: t.id })) }; // Projdeme všechny přátele a přidáme tento playlist do jejich sdílených playlistů for (let friendId of req.user.friends) { const friend = await User.findById(friendId); if (friend) { friend.sharedPlaylists.push(sharedPlaylistData); await friend.save(); } } } // 5. Odešleme odpověď zpět klientovi res.json({ moodAnalysis, playlist, personalizedMessage: `Na základě vaší historie je zde váš perfektní ${moodAnalysis.mood} playlist!` }); } catch (err) { console.error('Chyba personalizovaného playlistu:', err); console.error('Chyba stack:', err.stack); res.status(500).json({ chyba: 'Nepodařilo se vygenerovat personalizovaný playlist. Zkuste to prosím znovu.' }); } }); // Záložní: Použít index.html pro všechny trasy mimo API (pro směrování SPA) app.use((req, res, next) => { if (req.method === 'GET' && !req.path.startsWith('/api/')) { res.sendFile(path.join(__dirname, 'public', 'index.html')); } else { next(); } }); // Obsluha globálních chyb app.use((err, req, res, next) => { console.error('Globální chyba:', err); res.status(500).json({ chyba: 'Interní chyba serveru', podrobnosti: err.message }); }); // Spuštění serveru server.listen(PORT, () => { console.log(`🚀 Server běží na http://localhost:${PORT}`); });</code></pre> <h3>Vysvětlení klíčových konceptů serveru:</h3> <ul> <li><strong>Middleware</strong> – Funkce, které zpracovávají požadavky předtím, než se dostanou k vašim obslužným rutinám tras. <code>express.json()</code> analyzuje JSON z těl požadavků, <code>auth</code> ověřuje tokeny JWT.</li> <li><strong>async/await</strong> – Moderní syntaxe JavaScriptu pro zpracování asynchronních operací (jako jsou databázové dotazy). <code>await</code> pozastaví provádění, dokud se slib nevyřeší.</li> <li><strong>Stavové kódy HTTP</strong> – Čísla, která označují výsledek: 200 = úspěch, 201 = vytvořeno, 400 = chybný požadavek, 401 = neoprávněný, 404 = nenalezen, 500 = chyba serveru.</li> <li><strong>Události Socket.io</strong> – Pojmenované zprávy, které se vyměňují mezi klientem a serverem. <code>socket.on()</code> naslouchá událostem, <code>socket.emit()</code> události odesílá.</li> <li><strong>JWT (JSON Web Token)</strong> – Bezpečný způsob identifikace uživatelů. Když se přihlásí, přidělíme jim token. Tento token odesílají s každým požadavkem, aby prokázali, kdo jsou.</li> </ul> <h2>Krok 5: Aktualizace JavaScriptu frontendu (public/js/app.js)</h2> <p>Nakonec přidejme JavaScript, který učiní náš frontend interaktivním. Tento kód běží v prohlížeči uživatele a zpracovává věci, jako jsou klikání na tlačítka, požadavky API a aktualizace v reálném čase.</p> <h3>Co tento JavaScript dělá:</h3> <ul> <li><strong>Spravuje ověřování</strong> – Přihlášení, registrace, odhlášení a ukládání tokenů</li> <li><strong>Inicializuje Socket.io</strong> – Připojuje se k serveru a naslouchá událostem v reálném čase</li> <li><strong>Vytváří požadavky API</strong> – Používá <code>fetch()</code> pro komunikaci s koncovými body serveru</li> <li><strong>Aktualizuje uživatelské rozhraní</strong> – Dynamicky vytváří prvky HTML na základě dat ze serveru</li> <li><strong>Zpracovává interakce uživatelů</strong> – Kliknutí na tlačítka, odesílání formulářů atd.</li> </ul> <p><strong>Nahraďte svůj <code>public/js/app.js</code> celým kódem uvedeným v tutoriálu...</strong></p> <p><em>(Blok kódu app.js následuje přesně jako předtím, s všechny funkce pro přihlášení, registraci, načtení sdílených playlistů atd.)</em></p> <h2>Krok 6: Otestujte své API pro sociální hudbu</h2> <p>Nyní je čas vše otestovat! Pečlivě postupujte podle těchto kroků:</p> <ol> <li><strong>Spusťte server:</strong> V terminálu spusťte příkaz <code>npm start</code>. Měly by se zobrazit zprávy jako „MongoDB connected!“ a „Server running on http://localhost:3000“.</li> <li><strong>Otevřete dvě okna prohlížeče:</strong> Otevřete <code>http://localhost:3000</code> ve dvou samostatných oknech prohlížeče (nebo v jednom běžném okně a jednom anonymním okně). Simulují se dva různí uživatelé.</li> <li><strong>Registrace uživatele 1:</strong> V prvním okně klikněte na „Registrovat se“ a vytvořte uživatele (např. uživatelské jméno: „alice“).</li> <li><strong>Registrace uživatele 2:</strong> Ve druhém okně vytvořte dalšího uživatele (např. uživatelské jméno: „bob“).</li> <li><strong>Přidejte se navzájem do přátel:</strong> V okně Alice zadejte do pole „Přidat přítele“ „bob“ a klikněte na Přidat přítele. Totéž udělejte v okně Boba (zadejte „alice“). Měli byste se navzájem vidět ve svých seznamech přátel!</li> <li><strong>Sdílení playlistu:</strong> V okně Alice zadejte do textového pole nálady například „Dnes se cítím super šťastná!“. Zaškrtněte políčko „Sdílet s přáteli“ a poté klikněte na „Vytvořit seznam skladeb“.</li> <li><strong>Sledujte, jak se děje kouzlo:</strong> <ul> <li>Pokud je Bob online (okno je stále otevřené), uvidí oznámení, které se zobrazí zprava!</li> <li>Bob by měl také vidět Alicin sdílený seznam skladeb v sekci „Nedávná aktivita“.</li> <li>Bob může kliknout na sdílený seznam skladeb a zobrazit si tak úplný seznam skladeb.</li> <li>Pokud se Bob odhlásí a později znovu přihlásí, sdílený seznam skladeb tam bude stále!</li> </ul> </li> </ol> <h2>Pochopení toho, jak to všechno funguje</h2> <p>Pojďme sledovat, co se stane, když Alice sdílí playlist s Bobem:</p> <ol> <li><strong>Alice zaškrtne políčko „Sdílet s přáteli“ a klikne na „Generovat playlist“</strong></li> <li><strong>Frontend</strong> odešle POST požadavek na <code>/api/personalized-playlist</code> s parametrem <code>shareWithFriends: true</code></li> <li><strong>Server</strong> analyzuje Alicinu náladu a generuje playlist pomocí Spotify API</li> <li><strong>Server</strong> ukládá playlist do pole <code>moodHistory</code> Alice</li> <li><strong>Server</strong> prochází Alicinými přáteli (včetně Boba) a přidává playlist do pole <code>sharedPlaylists</code> každého z nich v MongoDB</li> <li><strong>Frontend</strong> vygeneruje událost Socket.io <code>share_playlist</code> pro upozornění online přátelé</li> <li><strong>Server</strong> přijme událost a zkontroluje, zda je Bob online (hledá v mapě <code>connectedUsers</code>)</li> <li><strong>Pokud je Bob online</strong>, server mu odešle událost <code>friend_shared_playlist</code> s náhledem playlistu</li> <li><strong>Bobův prohlížeč</strong> přijme událost a zavolá <code>showNotification()</code> pro zobrazení vyskakovacího okna</li> <li><strong>Bobův prohlížeč</strong> také volá <code>loadSharedPlaylists()</code> pro obnovení kanálu aktivit</li> <li><strong>Pokud je Bob offline</strong>, uvidí playlist ve svém kanálu aktivit, až se příště přihlásí (protože je uložen v jeho poli <code>sharedPlaylists</code>)</li> </ol> <h2>Co jste vytvořili</h2> <p>Gratulujeme! Úspěšně jste vytvořili plnohodnotnou aplikaci pro sociální hudbu! Zde je to, čeho jste dosáhli:</p> <ul> <li><strong>🤝 Systém přátel</strong> – Uživatelé si mohou přidávat přátele podle uživatelského jména. Přátelství jsou vzájemná (oba uživatelé se navzájem spřátelí) a ukládají se jako reference ObjectId v MongoDB.</li> <li><strong>💾 Trvalé sdílení playlistů</strong> – Sdílené playlisty se ukládají do databáze v poli <code>sharedPlaylists</code> každého přítele. To znamená, že data přetrvávají i po odhlášení uživatelů.</li> <li><strong>📡 Oznámení v reálném čase</strong> – Pomocí Socket.io dostávají online uživatelé okamžitá oznámení, když přátelé sdílejí playlisty. Není třeba obnovovat stránku!</li> <li><strong>📰 Kanál aktivit</strong> – Uživatelé si mohou prohlížet nedávno sdílené playlisty od všech svých přátel, seřazené od nejnovějších. Kliknutím na seznam skladeb se zobrazí kompletní seznam skladeb.</li> <li><strong>🔐 Bezpečné ověřování</strong> – Hesla jsou hašována pomocí bcrypt (nikdy se neukládají jako prostý text) a k ověřování požadavků API se používají tokeny JWT.</li> <li><strong>⏱️ Offline-friendly</strong> – Přátelé si mohou prohlížet sdílené seznamy skladeb, i když v době sdílení nebyli online. Všechno se ukládá do databáze!</li> </ul> <h2>Klíčové koncepty, které jste se naučili</h2> <ul> <li><strong>Komunikace v reálném čase</strong> se Socket.io (WebSockets)</li> <li><strong>Vztahy k databázi</strong> s využitím referencí MongoDB ObjectId</li> <li><strong>Denormalizace</strong> pro výkon (ukládání ObjectId i uživatelského jména)</li> <li><strong>Návrh RESTful API</strong> (koncové body GET, POST se správnými stavovými kódy HTTP)</li> <li><strong>Vzor middlewaru</strong> pro ověřování a zpracování požadavků</li> <li><strong>Async/await</strong> pro zpracování asynchronních operací</li> <li><strong>Manipulace DOM</strong> pro dynamickou aktualizaci uživatelského rozhraní</li> <li><strong>Architektura řízená událostmi</strong> s událostmi Socket.io</li> </ul> <h2>Řešení běžných problémů</h2> <ul> <li><strong>„Nelze se připojit k MongoDB“</strong> – Ujistěte se, že váš server MongoDB běží a že váš <code>MONGODB_URI</code> v <code>.env</code> je správný.</li> <li><strong>„Neplatné přihlašovací údaje“ při přihlašování</strong> – Zkontrolujte si znovu své uživatelské jméno a heslo. Nezapomeňte, že rozlišují velká a malá písmena!</li> <li><strong>„Uživatel nenalezen“ při přidávání přítele</strong> – Ujistěte se, že zadáváte přesné uživatelské jméno (rozlišují velká a malá písmena). Musí se nejdříve zaregistrovat.</li> <li><strong>Sdílené playlisty se nezobrazují</strong> – Zkontrolujte konzoli prohlížeče (F12), zda neobsahuje chyby. Ujistěte se, že oba uživatelé jsou přátelé a že je zaškrtnuto políčko „Sdílet s přáteli“.</li> <li><strong>Upozornění v reálném čase nefungují</strong> – Ujistěte se, že je Socket.io připojen. V konzoli prohlížeče zkontrolujte „🔗 Připojeno k serveru“.</li> </ul> <h2>Další kroky a nápady na rozšíření</h2> <p>Nyní, když máte funkční aplikaci pro sociální hudbu, zde je několik nápadů, jak ji posunout dále:</p> <ul> <li><strong>Žádosti o přátelství</strong> – Místo okamžitého přátelství vyžadujte od uživatelů odesílání žádostí, které lze přijmout nebo odmítnout</li> <li><strong>Soukromé zprávy</strong> – Přidejte chatovací systém pomocí Socket.io, aby si přátelé mohli navzájem posílat zprávy</li> <li><strong>Komentáře k playlistům</strong> – Umožněte uživatelům komentovat sdílené playlisty</li> <li><strong>Líbí se mi/Nelíbí se mi skladby</strong> – Přidejte tlačítka palec nahoru/dolů ke každé skladbě v playlistu</li> <li><strong>Kompatibilita hudebního vkusu</strong> – Vypočítejte procento na základě toho, jak podobné jsou hudební preference dvou uživatelů</li> <li><strong>Vyhledávání uživatelů</strong> – Přidejte funkci vyhledávání pro nalezení uživatelů podle uživatelského jména</li> <li><strong>Smazat/odebrat z přátel</strong> – Přidejte možnost odebrat přátelé nebo smazat sdílené playlisty</li> <li><strong>Stránky profilů</strong> – Zobrazení statistik uživatelů, oblíbených nálad a nedávných playlistů</li> <li><strong>Společné playlisty</strong> – Umožnění více přátelům přidávat skladby do sdíleného playlistu</li> <li><strong>Historie playlistů</strong> – Zobrazení všech dříve vygenerovaných playlistů</li> </ul> <p>Vytvořili jste plnohodnotnou aplikaci pro sociální hudbu s funkcemi pro práci v reálném čase a trvalým úložištěm dat! Toto je solidní základ pro pochopení moderního webového vývoje. Pokračujte v experimentování a budování!🎵✨</p></article></body></html>