Lisää ystäviä ajatustenlukumusiikin API:in: reaaliaikainen sosiaalinen jakaminen

Oletko valmis tekemään ajatustenlukumusiikin API:stasi todella sosiaalisen? Tässä opetusohjelmassa lisäät vankan ystäväjärjestelmän ja soittolistojen jakamisen, joka säilyy tietokannassa, jotta käyttäjät voivat tarkastella ystäviensä jakamia soittolistoja, vaikka he eivät olisi verkossa. Käytämme Socket.io-alustaa reaaliaikaisiin päivityksiin ja MongoDB-alustaa pysyvään tallennukseen.

Mitä rakennat

Ystäväjärjestelmä – Lisää ja hallinnoi ystäviä käyttäjätunnuksilla, joilla on yhteisiä ystävyyssuhteita, ObjectId-tunnusten avulla
Pysyvä soittolistojen jakaminen – Jaetut soittolistat tallennetaan tietokantaan ja niitä voi tarkastella milloin tahansa
Reaaliaikaiset ilmoitukset – Saat välittömiä ilmoituksia, kun ystävät jakavat (jos verkossa)
Toiminta-syöte – Näet viimeisimmät ystävien jakamat klikattavien soittolistojen esikatseluiden avulla
Parannettu mielialan analysointi – Älykäs soittolistojen luonti varahauilla

Edellytykset

Valmis mielenlukumusiikki-API-alustasi Osa 2
MongoDB, Node.js ja npm asennettuna
Spotify API -tunnistetiedot (asiakastunnus ja salaisuus)
30–45 minuuttia koodausaikaa

Osassa 2 loit käyttäjätilejä, joissa on mielialahistoria ja älykkäät asetukset. Nyt teemme siitä sosiaalista! Opit yhdistämään käyttäjiä, jakamaan soittolistoja sekä reaaliajassa että pysyvästi ja näkemään, mitä ystäväsi kuuntelevat heidän mielialojensa perusteella.

Keskeisten käsitteiden ymmärtäminen

Ennen kuin sukellamme koodiin, ymmärretään, mitä olemme rakentamassa:

Socket.io – Kirjasto, joka mahdollistaa reaaliaikaisen kaksisuuntaisen viestinnän palvelimesi ja selaimesi välillä. Ajattele sitä kuin puhelua tekstiviestien sijaan – voit lähettää ja vastaanottaa tietoja välittömästi ilman sivun päivittämistä.
Pysyvä tallennus – Tallentaa tietoja MongoDB-tietokantaasi, jotta ne pysyvät siellä, vaikka käyttäjät kirjautuisivat ulos. Tämä on kuin tallentaisit tiedoston kiintolevylle sen sijaan, että se vain säilyisi muistissa.
ObjectId-viitteet – MongoDB:n tapa luoda suhteita tietojen välille. Sen sijaan, että kopioisit kaikki ystäväsi tiedot profiiliisi, tallennat vain viittauksen (kuten osoittimen) heidän profiiliinsa.
Skeemat – Ajattele näitä piirustuksina, jotka määrittelevät tietojesi rakenteen. Ne kertovat MongoDB:lle, mitä kenttiä kussakin dokumentissa tulisi olla ja minkä tyyppistä dataa kuhunkin kenttään tulee.

Vaihe 1: Asenna vaaditut riippuvuudet

Avaa terminaali projektihakemistossasi ja asenna Socket.io reaaliaikaisia ominaisuuksia varten:

npm install socket.io

Mitä tämä tekee: Tämä komento lataa ja asentaa Socket.io-kirjaston projektiisi. Komento npm install noutaa paketteja npm-rekisteristä (valtava JavaScript-koodikirjasto) ja lisää ne node_modules-kansioosi.

Muut riippuvuudet (sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv) pitäisi olla jo asennettuna osasta 2.

Vaihe 2: Päivitä käyttäjämallisi sosiaalisilla ominaisuuksilla

Koska olet jo luonut käyttäjämallin osassa 2, päivitämme sen lisäämällä sosiaalisia ominaisuuksia. Käyttäjämalli on kuin malli, joka määrittää, mitä tietoja tallennamme kustakin käyttäjästä tietokantaamme.

Mitä lisäämme:

friends-taulukko – Luettelo ObjectId-viittauksista muihin käyttäjiin. Sen sijaan, että tallentaisimme kaikki käyttäjätiedot, tallennamme vain tunnisteet, jotka osoittavat muihin käyttäjädokumentteihin tietokannassa.
sharedWith- ja isShared-kentät – Nämä seuraavat, mitä tunnelmamerkintöjä on jaettu ja kenen kanssa ne jaettiin.
sharedPlaylistSchema – Uusi skeema (suunnitelma), joka määrittelee, miltä jaettu soittolista näyttää: kuka sen jakoi, mihin tunnelmaan se oli tarkoitettu, kappaleet ja milloin se jaettiin.
sharedPlaylists-taulukko – Lista, joka tallentaa kaikki soittolistat, jotka ystäväsi ovat jakaneet kanssasi.

Korvaa models/User.js tiedostosi seuraavalla:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // Yksittäisten mielialamerkintöjen kaava (joka kerta, kun käyttäjä luo soittolistan) const moodEntrySchema = new mongoose.Schema({ text: String, // Käyttäjän kirjoittama teksti (esim. "olen onnellinen tänään") detectedMood: String, // Analysaattorimme havaitsema mieliala (esim. "onnellinen") confidence: Number, // Kuinka varmoja olemme (0-10) playlistGenerated: [{ // Suosittelemiemme kappaleiden taulukko trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } // null = ei arvioitu, true = liked, false = inhaled }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // Kenen kanssa jaoimme tämän? isShared: { type: Boolean, default: false }, // Jaettiinko tämä? timestamp: { type: Date, default: Date.now } // Milloin tämä luotiin? }); // Käyttäjäasetusten kaava (suosikkigenret jne.) 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] } }); // UUTTA: Kaava soittolistoille, joita ystävät jakavat kanssasi const sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // ObjectId-viittaus ystävään, joka jakoi sharedByUsername: String, // Käyttäjätunnus helppoa näyttöä varten (denormalisoitu suorituskyvyn parantamiseksi) mood: String, // Mille tunnelmalle tämä soittolista oli tarkoitettu? playlist: [{ // Kappaleen nimi: String, artisti: String, album_image: String, id: String }], timestamp: { type: Date, default: Date.now } // Milloin tämä jaettiin? }); // Pääkäyttäjän skeema - määrittää käyttäjädokumentin rakenteen 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' }], // Taulukko ObjectId-viittauksista ystäviin moodHistory: [moodEntrySchema], // Kaikki tämän käyttäjän luomat soittolistat sharedPlaylists: [sharedPlaylistSchema], // Soittolistat, jotka ystävät ovat jakaneet tämän käyttäjän kanssa preferences: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Number, default: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { type: Date, default: Date.now } } }, { timestamps: true }); // Lisää automaattisesti createdAt- ja updatedAt-kentät // Middleware: Suorita tämä funktio ennen käyttäjän tallentamista (salasanan hajauttamiseksi) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // Hajauta vain, jos salasana on muutettu this.password = await bcrypt.hash(this.password, 12); // Hajauta 12 kierroksella saltaa next(); }); // Metodi: Tarkistetaan, vastaako salasana hajautettua salasanaa userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // Metodi: Päivittää käyttäjän tilastoja heidän mielialahistoriansa perusteella userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean); // Hae kaikki ei-tyhjät mielialat this.stats.totalPlaylists = moods.length; if (moods.length > 0) { // Laske kuinka monta kertaa kukin mieliala esiintyy const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // Etsi mieliala, jolla on korkein määrä this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral'); } else { this.stats.mostCommonMood = 'neutral'; } // Lasketaan suosikkikellonaika soittolistojen luontiajankohdan perusteella 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 ? 'yö' : avg < 12 ? 'aamu' : avg < 18 ? 'iltapäivä' : 'ilta'; } }; // Vie malli, jotta voimme käyttää sitä muissa tiedostoissa module.exports = mongoose.model('User', userSchema);

Keskeiset käsitteet selitettynä:

ObjectId-viittaukset – friends-taulukko ei tallenna kokonaisia käyttäjäobjekteja. Sen sijaan se tallentaa ObjectId-tunnuksia (yksilöllisiä tunnisteita), jotka osoittavat muihin käyttäjiin. Tämä on tehokasta, koska jos ystävä vaihtaa käyttäjätunnustaan, meidän ei tarvitse päivittää sitä kaikkialla – seuraamme vain viittausta.
Denormalisointi – Huomaa, että tallennamme sekä sharedBy (ObjectId) että sharedByUsername (String). Tätä kutsutaan denormalisoinniksi – samojen tietojen tallentamiseksi useisiin paikkoihin suorituskyvyn parantamiseksi. Tallennamme käyttäjätunnuksen, jotta meidän ei tarvitse etsiä käyttäjää joka kerta, kun näytämme jaettuja soittolistoja.
Middleware (.pre()) – Tämä suoritetaan automaattisesti ennen tiettyjä toimintoja. Tässä se hajauttaa salasanat ennen niiden tallentamista tietokantaan turvallisuussyistä.
Instanssimetodit (.methods) – Nämä ovat funktioita, joita voit kutsua yksittäisille käyttäjädokumenteille, kuten user.comparePassword() tai user.updateStats().

Vaihe 3: Päivitä HTML-käyttöliittymäsi sosiaalisilla ominaisuuksilla

Päivitetään nyt käyttöliittymä lisäämällä siihen ystävien hallinta ja aktiviteettisyöte. HTML määrittää verkkosivusi rakenteen – mitkä elementit näkyvät ja mihin ne sijoittuvat.

Mitä lisäämme käyttöliittymään:

Ystäväluettelo-osio – Näyttää nykyiset ystäväsi
Lisää ystävä -syöte – Tekstikenttä ystävän käyttäjätunnuksen syöttämiseen
Viimeisimpien toimintojen syöte – Näyttää soittolistat, jotka ystäväsi ovat jakaneet (klikkaamalla voit nähdä koko soittolistan)
Jaa-valintaruutu – Mahdollisuus jakaa luomasi soittolista ystävien kanssa
Ilmoitusalue – Ponnahdusikkunailmoitukset reaaliaikaisista päivityksistä

Korvaa public/index.html tiedostosi seuraavalla:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Ajatuksia lukevan musiikin API - Sosiaalinen</title> <style> /* Palauta selaimen oletustyylit */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Päätekstin tyyli liukuvärjätyllä taustalla */ body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; color: #333; } /* Koko kojelaudan säiliö */ .dashboard { max-width: 1000px; margin: 0 auto; padding: 20px; } /* Ylätunnisteosio tervetuloviestillä */ .header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); /* Sumennustehoste lasimorfismille */ border-radius: 20px; padding: 30px; margin-bottom: 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* Kaksisarakkeinen ruudukkoasettelu: soittolistaosio (isompi) ja ystäväosio (pienempi) */ .main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } /* Kortin tyylit molemmille osioille */ .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); } /* Lomake-elementtien muotoilu */ input, textarea, button { width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; } /* Painikkeen erityinen muotoilu liukuvärjätyllä taustalla */ button { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; cursor: pointer; font-weight: 600; } /* Hienovarainen leijutusefekti painikkeissa */ button:hover { transform: translateY(-2px); } /* Yksittäisen ystäväesineen muotoilu */ .friend-item { background: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 8px; border-left: 4px solid #667eea; /* Korostusväri vasemmalla */ } /* Ilmoitusten ponnahdusikkunan tyyli (oletuksena piilotettu, liukuu sisään oikealta) */ .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); /* Aloita näytön ulkopuolella */ transition: transform .3s ease; z-index: 1000; max-width: 300px; } /* Näytä ilmoitus (liukuu sisään) */ .notification.show { transform: translateX(0); } /* Kirjautumis- ja rekisteröintilomakkeet */ .login-section, .register-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; max-width: 400px; margin: 50px auto; } /* Valintaruudun säätimet jakamista varten */ .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"> <!-- Todennusosio (Kirjautumis-/Rekisteröitymislomakkeet) --> <div id="authSection"> <!-- Kirjautumislomake --> <div class="login-section"> <h2>🧠🎵 Tervetuloa takaisin!</h2> <input type="text" id="loginUsername" placeholder="Käyttäjänimi"/> <input type="password" id="loginPassword" placeholder="Salasana"/> <button onclick="login()">Kirjaudu sisään</button> <p><a href="#" onclick="showRegister()">Eikö sinulla ole tiliä? Rekisteröidy</a></p> </div> <!-- Rekisteröintilomake (oletuksena piilotettu) --> <div id="registerSection" class="register-section" style="display:none"> <h2>🎵 Luo musiikkiprofiilisi</h2> <input type="text" id="regUsername" placeholder="Käyttäjänimi"/> <input type="email" id="regEmail" placeholder="Sähköposti"/> <input type="password" id="regPassword" placeholder="Salasana"/> <button onclick="register()">Luo tili</button> <p><a href="#" onclick="showLogin()">Onko sinulla jo tili? Kirjaudu sisään</a></p> </div> </div> <!-- Päänäkymä (näytetään kirjautumisen jälkeen) --> <div id="dashboardSection" style="display:none"> <!-- Yläpalkki, jossa käyttäjätunnus ja uloskirjautumispainike --> <div class="header"> <h1>🧠🎵 Henkilökohtainen musiikkimieltenlukijasi</h1> <p>Tervetuloa, <span id="käyttäjänimi"></span>!</p> <button onclick="logout()" style="width:auto; margin-top:10px">Kirjaudu ulos</button> </div> <!-- Kaksisarakkeinen asettelu: Soittolistaosio vasemmalla, Ystävät-osio oikealla --> <div class="main-content"> <!-- Vasen sarake: Soittolistagenerointi --> <div class="playlist-section"> <h2>💭 Mitä mieltä olet?</h2> <textarea id="moodText" placeholder="Kuvaile mielialaasi..."></textarea> <div class="share-controls"> <label><input type="checkbox" id="shareWithFriends"/>Jaa ystävien kanssa</label> </div> <button onclick="generatePlaylist()">🎧 Luo soittolista</button> <!-- Tulokset näkyvät tässä soittolistan luomisen jälkeen --> <div id="result" style="display:none"></div> </div> <!-- Oikea sarake: Ystävät ja toiminta --> <div class="friends-section"> <h3>👥 Ystäväni</h3> <div id="friendsList"></div> <h4>Lisää ystävä</h4> <input type="text" id="friendUsername" placeholder="Ystävän käyttäjätunnus"/> <button onclick="addFriend()">Lisää ystävä</button> <h4>Viimeisin toiminta</h4> <!-- Ystävien jaetut soittolistat näkyvät tässä --> <div id="friendActivity">Ystävien toiminta näkyy tässä...</div> </div> </div> </div> </div> <!-- Ilmoitusponnahdusikkunoiden säilö --> <div id="ilmoitusalue"></div> <!-- Sisällytä Socket.io-kirjasto (palvelimemme tarjoaa sen automaattisesti) --> <script src="/socket.io/socket.io.js"></script> <!-- Sisällytä mukautettu JavaScript-koodimme --> <script src="./js/app.js"></script> </body> </html>

HTML-rakenteen ymmärtäminen:

Kaksi pääosiota: authSection (kirjautuminen/rekisteröityminen) ja dashboardSection (pääsovellus). Vain yksi on näkyvissä kerrallaan.
Ruudukkoasettelu: .main-content käyttää CSS Grid -rajapintaa kahden sarakkeen luomiseen (2fr soittolistalle, 1fr ystäville). Tämä tarkoittaa, että soittolistaosio on kaksi kertaa leveämpi.
Tapahtumankäsittelijät: onclick="functionName()" käskee selainta kutsua JavaScript-funktiota, kun elementtiä napsautetaan.
ID:t: Elementeillä on yksilölliset ID:t (kuten id="friendsList"), jotta JavaScript voi löytää ja muokata ne myöhemmin.

Vaihe 4: Päivitä server.js Socket.io:lla, ystäväpäätepisteillä ja pysyvällä jakamisella

Päivitämme nyt palvelimemme käsittelemään ystäväpyyntöjä, soittolistojen jakamista ja reaaliaikaista viestintää. Palvelin on sovelluksesi "aivot" – se käsittelee pyyntöjä, kommunikoi tietokannan kanssa ja lähettää vastaukset takaisin käyttäjille.

Mitä lisäämme palvelimeen:

Socket.io-palvelin – Mahdollistaa reaaliaikaisen, kaksisuuntaisen kommunikaation palvelimen ja asiakkaiden välillä
/api/add-friend endpoint – Käsittelee ystäväpyyntöjä (keskinäinen ystävyys)
/api/shared-playlists endpoint – Palauttaa soittolistoja, jotka ystävät ovat jakaneet kanssasi
Parannettu /api/personalized-playlist – Tallentaa nyt jaettuja soittolistoja ystävien tietokantoihin
Socket-tapahtumankäsittelijät – Kuuntelee ja lähettää reaaliaikaisia tapahtumia (todennus, jakaminen)

Korvaa server.js jossa:

// Lataa ympäristömuuttujat .env-tiedostosta require('dotenv').config(); // Tuo tarvittavat moduulit 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'); // Alusta soittolistageneraattori const playlistGen = new PlaylistGenerator(); const PORT = process.env.PORT || 3000; // Yhdistetään MongoDB-tietokantaan async function connectDB() { try { console.log('🔗 Yhdistetään MongoDB:hen…'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }); console.log('✅ MongoDB yhteys muodostettu onnistuneesti!'); } catch (err) { console.error('❌ MongoDB-yhteys epäonnistui:', err.message); process.exit(1); // Poistutaan, jos tietokantayhteys epäonnistuu } } connectDB(); // Luodaan Express-sovellus ja HTTP-palvelin const app = express(); const server = http.createServer(app); // Alustataan Socket.io HTTP-palvelimen päälle const io = socketIo(server); // Yhdistetään verkossa olevien käyttäjien seuraamiseen: userId => socketId // Tämän avulla voimme lähettää viestejä tietyille käyttäjille, jotka ovat tällä hetkellä yhteydessä const connectedUsers = new Map(); // Socket.io-yhteydenkäsittelijä - suoritetaan, kun asiakas muodostaa yhteyden io.on('connection', socket => { console.log('🔗 Socket connected:', socket.id); // Käsittelee 'authenticate'-tapahtuman - asiakas kertoo meille kuka hän on socket.on('authenticate', ({ userId, username }) => { // Tallentaa tämän käyttäjän soketin tunnuksen, jotta voimme lähettää heille viestejä myöhemmin connectedUsers.set(userId, socket.id); socket.userId = userId; // Liitä käyttäjätunnus tähän sokettiin socket.username = username; // Liitä käyttäjätunnus tähän sokettiin console.log(`✅ Authenticated user: ${username}`); }); // Käsittelee 'share_playlist'-tapahtuman - käyttäjä haluaa jakaa ystävien kanssa socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { try { // Käydään läpi kaikki ystävätunnukset for (let friendId of friendIds) { // Haetaan soketin tunnus tälle ystävälle (jos hän on online-tilassa) const sid = connectedUsers.get(friendId.toString()); if (sid) { // Ystävä on online-tilassa! Lähetä hänelle reaaliaikainen ilmoitus io.to(sid).emit('friend_shared_playlist', { friendName, mood, playlist }); } // Jos ystävä on offline-tilassa, hän näkee soittolistan aktiviteettisyötteessään kirjautuessaan sisään } } catch (err) { console.error('Soittolistajakovirhe:', err); } }); // Käsittele katkaisu - poista käyttäjä online-kartalta socket.on('disconnect', () => { if (socket.userId) { connectedUsers.delete(socket.userId); console.log(`👋 Yhteyden katkaisu: ${socket.username}`); } }); }); // Väliohjelmisto JSON-pyyntöjen rungon jäsentämiseen app.use(express.json()); // Tarjoile staattisia tiedostoja 'public'-kansiosta (HTML, CSS, kuvat) app.use(express.static(path.join(__dirname, 'public'))); // ===== API-PÄÄTEPISTEET ===== // POST /api/register - Luo uusi käyttäjätili app.post('/api/register', async (req, res) => { try { const { käyttäjätunnus, sähköpostiosoite, salasana } = req.body; // Tarkista syöte if (!käyttäjätunnus || !email || !password) { return res.status(400).json({ virhe: 'Kaikki kentät ovat pakollisia' }); } if (password.length < 6) { return res.status(400).json({ virhe: 'Salasanan on oltava vähintään 6 merkkiä' }); } // Tarkista, onko käyttäjätunnus tai sähköpostiosoite jo olemassa const exists = await User.findOne({ $tai: [{ käyttäjätunnus }, { sähköposti }] }); if (olemassa) { return res.status(400).json({ virhe: 'Käyttäjätunnus tai sähköpostiosoite jo olemassa' }); } // Luo ja tallenna uusi käyttäjä (salasanan hajauttaa automaattisesti tallennusta edeltävä väliohjelmistomme) const user = new User({ käyttäjätunnus, sähköpostiosoite, salasana }); await user.save(); res.status(201).json({ viesti: 'Käyttäjä luotu onnistuneesti' }); } catch (err) { console.error('Rekisteröintivirhe:', err); res.status(500).json({ virhe: 'Rekisteröinti epäonnistui' }); } }); // POST /api/login - Käyttäjän todentaminen ja JWT-tunnuksen palauttaminen app.post('/api/login', async (req, res) => { try { const { käyttäjätunnus, salasana } = req.body; // Etsi käyttäjä käyttäjänimen tai sähköpostiosoitteen perusteella const user = await User.findOne({ $or: {[ käyttäjätunnus }, { email: käyttäjätunnus }] }); // Tarkistetaan, onko käyttäjä olemassa ja onko salasana oikein if (!user || !(await user.comparePassword(password))) { return res.status(401).json({ error: 'Virheelliset tunnistetiedot' }); } // Luodaan JWT-tunnus (kuten väliaikainen henkilökortti) const token = jwt.sign( { käyttäjätunnus: käyttäjä._id }, // Hyötykuorma (mitä koodaamme) process.env.JWT_SECRET, // Salainen avain (pitää sen turvassa) { expiresIn: '7d' } // Tunnus vanhenee 7 päivän kuluttua ); // Lähetä tunnus takaisin asiakkaalle res.json({ token, user: { username: user.username, email: user.email, friends: user.friends } }); } catch (err) { console.error('Kirjautumisvirhe:', err); res.status(500).json({ error: 'Kirjautuminen epäonnistui' }); } }); // GET /api/profile - Hakee nykyisen käyttäjän profiilin // 'auth'-väliohjelmisto tarkistaa JWT-tokenin ja liittää käyttäjän req.user-objektiin app.get('/api/profile', auth, async (req, res) => { try { // Päivitä käyttäjätilastot req.user.updateStats(); await req.user.save(); // Täytä ystävät-taulukko (korvaa ObjectId:t varsinaisilla käyttäjäobjekteilla) 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('Profiilivirhe:', err); res.status(500).json({ error: 'Profiilin lataaminen epäonnistui' }); } }); // GET /api/shared-playlists - Hae soittolistat, jotka ystäväsi ovat jakaneet kanssasi app.get('/api/shared-playlists', auth, async (req, res) => { try { // Hae viimeisimmät 10 jaettua soittolistaa lajiteltuna uusimman mukaan const sharedPlaylists = req.user.sharedPlaylists .sort((a, b) => b.timestamp - a.timestamp) // Lajittele laskevaan järjestykseen aikaleiman mukaan .slice(0, 10); // Ota ensimmäiset 10 res.json({ sharedPlaylists }); } catch (err) { console.error('Jaettujen soittolistojen virhe:', err); res.status(500).json({ virhe: 'Jaettujen soittolistojen lataaminen epäonnistui' }); } }); // POST /api/add-friend - Lisää ystävä (keskinäinen ystävyys) app.post('/api/add-friend', auth, async (req, res) => { try { const { friendUsername } = req.body; // Etsi ystävä käyttäjänimellä const friend = await User.findOne({ käyttäjätunnus: friendUsername }); if (!friend) { return res.status(404).json({ error: 'Käyttäjää ei löytynyt' }); } // Tarkistetaan, onko jo ystävä if (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) { return res.status(400).json({ error: 'Tämä käyttäjä on jo ystävä' }); } // Lisää jokainen käyttäjä toistensa ystävälistalle (keskinäinen ystävyys) req.user.friends.push(friend._id); friend.friends.push(req.user._id); // Tallenna molemmat käyttäjät await req.user.save(); await friend.save(); res.json({ message: 'Ystävä lisätty onnistuneesti', friendId: friend._id }); } catch (err) { console.error('Ystävän lisäysvirhe:', err); console.error('Virhepino:', err.stack); res.status(500).json({ error: 'Ystävän lisääminen epäonnistui' }); } }); // POST /api/personalized-playlist - Luo mielialaan perustuva soittolista 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: 'Kerro minulle, miltä sinusta tuntuu!' }); } // 1. Analysoi mieliala käyttäjän tekstin perusteella const moodAnalysis = moodAnalyzer.analyzeMood(text); // 2. Luo soittolista mielialan perusteella const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 3. Tallenna käyttäjän mielialahistoriaan 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. Jos jakaminen on käytössä, tallenna jokaisen ystävän sharedPlaylists-taulukkoon 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 => ({ // Jaa ensimmäiset 5 kappaletta name: t.name, artist: t.artist, album_image: t.album_image, id: t.id })) }; // Käy läpi kaikki ystävät ja lisää tämä soittolista heidän jaettuihin soittolistoihinsa for (let friendId of req.user.friends) { const friend = await User.findById(friendId); if (friend) { friend.sharedPlaylists.push(sharedPlaylistData); await friend.save(); } } } // 5. Lähetä vastaus asiakkaalle res.json({ moodAnalysis, playlist, personalizedMessage: `Historiasi perusteella tässä on täydellinen ${moodAnalysis.mood} soittolistasi!` }); } catch (err) { console.error('Mukautetun soittolistan virhe:', err); console.error('Virhepino:', err.stack); res.status(500).json({ error: 'Mukautetun soittolistan luominen epäonnistui. Yritä uudelleen.' }); } }); // Varamenetelmä: Tarjoaa index.html-tiedostoa muille kuin API-reiteille (SPA-reititystä varten) app.use((req, res, next) => { if (req.method === 'GET' && !req.path.startsWith('/api/')) { res.sendFile(path.join(__dirname, 'public', 'index.html')); } else { next(); } }); // Globaali virheenkäsittelijä app.use((err, req, res, next) => { console.error('Globaali virhe:', err); res.status(500).json({ virhe: 'Sisäinen palvelinvirhe', tiedot: err.message }); }); // Käynnistä palvelin server.listen(PORT, () => { console.log(`🚀 Palvelin käynnissä osoitteessa http://localhost:${PORT}`); });

Palvelimen keskeiset käsitteet selitettynä:

Middleware – Funktiot, jotka käsittelevät pyynnöt ennen kuin ne saavuttavat reitinkäsittelijäsi. express.json() jäsentää JSON-koodin pyyntöjen rungoista, auth tarkistaa JWT-tokenit.
async/await – Moderni JavaScript-syntaksi asynkronisten operaatioiden (kuten tietokantakyselyiden) käsittelyyn. await keskeyttää suorituksen, kunnes lupaus on ratkaistu.
HTTP-tilakoodit – Numerot, jotka osoittavat tuloksen: 200 = onnistui, 201 = luotu, 400 = virheellinen pyyntö, 401 = luvaton, 404 = ei löytynyt, 500 = palvelinvirhe.
Socket.io-tapahtumat – Nimetyt viestit, jotka liikkuvat edestakaisin asiakkaan ja palvelimen välillä. socket.on() kuuntelee tapahtumia, socket.emit() lähettää tapahtumia.
JWT (JSON Web Token) – Turvallinen tapa tunnistaa käyttäjät. Kun he kirjautuvat sisään, annamme heille tunnuksen. He lähettävät tämän tunnuksen jokaisen pyynnön mukana todistaakseen henkilöllisyytensä.

Vaihe 5: Päivitä käyttöliittymän JavaScript (public/js/app.js)

Lisätään lopuksi JavaScript, joka tekee käyttöliittymästämme interaktiivisen. Tämä koodi suoritetaan käyttäjän selaimessa ja käsittelee esimerkiksi painikkeiden klikkauksia, API-pyyntöjä ja reaaliaikaisia päivityksiä.

Mitä tämä JavaScript tekee:

Hallitsee todennusta – Kirjautuminen, rekisteröityminen, uloskirjautuminen ja tokenien tallennus
Alustaa Socket.io:n – Yhdistää palvelimeen ja kuuntelee reaaliaikaisia tapahtumia
Tekee API-pyyntöjä – Käyttää fetch()-metodia kommunikoidakseen palvelimen päätepisteiden kanssa
Päivittää käyttöliittymän – Luo dynaamisesti HTML-elementtejä palvelimelta saatujen tietojen perusteella
Käsittelee käyttäjien vuorovaikutusta – Painikkeiden klikkaukset, lomakkeiden lähetykset jne.

Korvaa public/js/app.js-tiedostosi opetusohjelmassa näytetyllä koko koodilla...

(App.js-koodilohko noudattaa täsmälleen seuraavaa ennen, kaikkine toimintoineen kirjautumiseen, rekisteröitymiseen, jaettujen soittolistojen lataamiseen jne.)

Vaihe 6: Testaa Social Music -sovellusliittymääsi

Nyt on aika testata kaikki! Noudata näitä ohjeita huolellisesti:

Käynnistä palvelimesi: Suorita terminaalissa npm start. Sinun pitäisi nähdä viestejä, kuten "MongoDB yhdistetty!" ja "Palvelin käynnissä osoitteessa http://localhost:3000".
Avaa kaksi selainikkunaa: Avaa http://localhost:3000 kahdessa erillisessä selainikkunassa (tai yhdessä tavallisessa ikkunassa ja yhdessä incognito-ikkunassa). Tämä simuloi kahta eri käyttäjää.
Rekisteröi käyttäjä 1: Ensimmäisessä ikkunassa napsauta "Rekisteröidy" ja luo käyttäjä (esim. käyttäjätunnus: "alice").
Rekisteröi käyttäjä 2: Toisessa ikkunassa luo toinen käyttäjä (esim. käyttäjätunnus: "bob").
Lisää toisenne ystäviksi: Kirjoita Alicen ikkunassa "Lisää ystävä" -kenttään "bob" ja napsauta Lisää ystävä. Tee sama Bobin ikkunassa (kirjoita "alice"). Teidän pitäisi nähdä toisenne ystävälistoissanne!
Jaa soittolista: Kirjoita Alicen ikkunassa mieliala-tekstikenttään esimerkiksi "Olen tänään superonnellinen!". Valitse "Jaa ystävien kanssa" -valintaruutu ja napsauta sitten "Luo soittolista".
Katso taikaa:
- Jos Bob on verkossa (ikkuna on edelleen auki), hän näkee ilmoituksen liukuvan oikealta!
- Bobin pitäisi myös nähdä Alicen jaettu soittolista "Viimeisin toiminta" -osiossa.
- Bob voi napsauttaa jaettua soittolistaa nähdäkseen koko kappaleluettelon.
- Jos Bob kirjautuu ulos ja sisään myöhemmin uudelleen, jaettu soittolista on edelleen olemassa!

Ymmärtäminen, miten kaikki toimii yhdessä

Jäljitetään, mitä tapahtuu, kun Alice jakaa soittolistan Bobin kanssa:

Alice tarkistaa "Jaa ystävien kanssa" ja napsauttaa "Luo soittolista"
Frontend lähettää POST-pyynnön osoitteeseen /api/personalized-playlist, jossa on shareWithFriends: true
Server analysoi Alicen mielialan ja luo soittolistan Spotify API:n avulla
Server tallentaa soittolistan Alicen moodHistory-taulukkoon
Server käy läpi Alicen ystävät (mukaan lukien Bobin) ja lisää soittolistan jokaisen ystävän sharedPlaylists-taulukkoon MongoDB:ssä
Frontend lähettää share_playlist Socket.io-tapahtuman ilmoittaakseen verkossa friends
Palvelin vastaanottaa tapahtuman ja tarkistaa, onko Bob online-tilassa (katsoo connectedUsers-kartasta)
Jos Bob on online-tilassa, palvelin lähettää hänelle friend_shared_playlist-tapahtuman, jossa on soittolistan esikatselu
Bobin selain vastaanottaa tapahtuman ja kutsuu showNotification()-funktiota näyttääkseen ponnahdusikkunan
Bobin selain kutsuu myös loadSharedPlaylists()-funktiota päivittääkseen aktiviteettisyötteen
Jos Bob on offline-tilassa, hän näkee soittolistan aktiviteettisyötteessään, kun hän kirjautuu sisään seuraavan kerran (koska se on tallennettu hänen sharedPlaylists-taulukkoonsa)

Mitä olet rakentanut

Onnittelut! Olet onnistuneesti rakentanut täysin varustellun sosiaalisen musiikkisovelluksen! Tässä on saavutuksesi:

🤝 Kaverijärjestelmä – Käyttäjät voivat lisätä kavereita käyttäjätunnuksella. Ystävyyssuhteet ovat molemminpuolisia (molemmista käyttäjistä tulee toistensa ystäviä) ja tallennetaan ObjectId-viittauksina MongoDB:hen.
💾 Pysyvä soittolistojen jakaminen – Jaetut soittolistat tallennetaan tietokantaan kunkin ystävän sharedPlaylists-taulukkoon. Tämä tarkoittaa, että tiedot säilyvät, vaikka käyttäjät kirjautuisivat ulos.
📡 Reaaliaikaiset ilmoitukset – Socket.io:n avulla verkossa olevat käyttäjät saavat välittömiä ilmoituksia, kun ystävät jakavat soittolistoja. Sivua ei tarvitse päivittää!
📰 Toimintasyöte – Käyttäjät voivat nähdä kaikkien ystäviensä viimeksi jaetut soittolistat lajiteltuna uusimman mukaan. Soittolistan napsauttaminen näyttää koko kappalelistan.
🔐 Suojattu todennus – Salasanat tiivistetään bcryptillä (ei koskaan tallenneta pelkkää tekstiä), ja JWT-tokenia käytetään API-pyyntöjen todentamiseen.
⏱️ Offline-ystävällinen – Ystävät voivat katsella jaettuja soittolistoja, vaikka he eivät olisi olleet online-tilassa soittolistan jakamisen aikaan. Kaikki tallennetaan tietokantaan!

Oppimasi keskeiset käsitteet

Reaaliaikainen kommunikointi Socket.io:n (WebSockets) kanssa
Tietokantasuhteet MongoDB ObjectId -viittausten avulla
Denormalisointi suorituskyvyn parantamiseksi (sekä ObjectId:n että käyttäjätunnuksen tallentaminen)
RESTful API -suunnittelu (GET- ja POST-päätepisteet oikeilla HTTP-tilakoodeilla)
Väliohjelmistomalli todennusta ja pyyntöjen käsittelyä varten
Async/await asynkronisten operaatioiden käsittelyyn
DOM-manipulointi käyttöliittymän dynaamiseen päivittämiseen
Tapahtumapohjainen arkkitehtuuri Socket.io-tapahtumilla

Yleisten ongelmien vianmääritys

"Yhteyttä MongoDB:hen ei voida muodostaa" – Varmista, että MongoDB-palvelimesi on käynnissä ja että MONGODB_URI tiedostossa .env on oikein.
"Virheelliset tunnistetiedot" kirjautumisen yhteydessä – Tarkista käyttäjätunnuksesi ja salasanasi. Muista, että niissä on kirjainkokoero!
"Käyttäjää ei löytynyt" ystävää lisättäessä – Varmista, että kirjoitat oikean käyttäjätunnuksen (kirjainkokoero). Heidän on täytynyt rekisteröityä ensin.
Jaetut soittolistat eivät näy – Tarkista selaimesi konsolista (F12) virheet. Varmista, että molemmat käyttäjät ovat ystäviä ja että "Jaa ystävien kanssa" -valintaruutu on valittuna.
Reaaliaikaiset ilmoitukset eivät toimi – Varmista, että Socket.io on yhdistetty. Tarkista selaimen konsolista "🔗 Yhdistetty palvelimeen".

Seuraavat vaiheet ja ideoita laajentamiseksi

Nyt kun sinulla on toimiva sosiaalisen musiikin sovellus, tässä on ideoita sen kehittämiseksi:

Ystäväpyynnöt – Välittömän ystävyyssuhteen sijaan vaadi käyttäjiä lähettämään pyyntöjä, jotka voidaan hyväksyä tai hylätä.
Yksityisviestit – Lisää chat-järjestelmä Socket.io:n avulla, jotta ystävät voivat viestitellä toisilleen.
Soittolistojen kommentit – Anna käyttäjien kommentoida jaettuja soittolistoja.
Tykkää/ei tykkää kappaleista – Lisää peukku ylös/alas -painikkeet jokaiseen soittolistan kappaleeseen.
Musiikkimaun yhteensopivuus – Laske prosenttiosuus sen perusteella, kuinka samankaltaisia kahden käyttäjän musiikkimieltymykset ovat.
Hae käyttäjiä – Lisää hakutoiminto käyttäjien löytämiseksi käyttäjänimen perusteella.
Poista/poista kaveruus – Lisää mahdollisuus poistaa ystäviä tai poistaa jaettuja. soittolistat
Profiilisivut – Näytä käyttäjätilastot, suosikkitunnelmat ja viimeisimmät soittolistat
Yhteistyösoittolistat – Anna useiden ystävien lisätä kappaleita jaettuun soittolistaan
Soittolistahistoria – Näytä kaikki aiemmin luomasi soittolistat

Olet rakentanut täyden palvelun sosiaalisen musiikkisovelluksen, jossa on reaaliaikaiset ominaisuudet ja pysyvä tiedontallennus! Tämä on vankka perusta modernin web-kehityksen ymmärtämiselle. Jatka kokeilua ja rakentamista!🎵✨