הוסף חברים לממשק ה-API שלך לקריאת מחשבות: שיתוף חברתי בזמן אמת

מוכנים להפוך את ממשק ה-API שלך לקריאת מחשבות לחברתי באמת? במדריך זה, תוסיף מערכת חברים חזקה ושיתוף רשימות השמעה שנשמרים במסד הנתונים, כך שמשתמשים יוכלו לצפות ברשימות ההשמעה המשותפות של חבריהם גם כשהם לא מחוברים לאינטרנט. נשתמש ב-Socket.io לעדכונים בזמן אמת וב-MongoDB לאחסון מתמשך.

מה תבנה

מערכת חברים – הוסף ונהל חברים לפי שם משתמש עם חברות הדדית באמצעות ObjectIds
שיתוף מתמשך של פלייליסטים – פלייליסטים משותפים נשמרים במסד הנתונים וניתן לצפות בהם בכל עת
התראות בזמן אמת – קבל התראות מיידיות כאשר חברים משתפים (אם מחוברים)
פיד פעילות – ראה שיתופי חברים אחרונים עם תצוגות מקדימות של פלייליסטים הניתנות ללחיצה
ניתוח מצב רוח משופר – יצירת פלייליסטים חכמה עם חלופות חיפוש

דרישות קדם

ממשק ה-API למוזיקה לקריאת מחשבות שהושלם מ-חלק 2
MongoDB, Node.js ו-npm הותקנו
אישורי API של Spotify (Client ID וסוד)
30-45 דקות של זמן קידוד

בחלק 2, בניתם חשבונות משתמש עם היסטוריית מצבי רוח והעדפות חכמות. עכשיו אנחנו הולכים להפוך את זה לחברתי! תלמדו כיצד לחבר משתמשים, לשתף רשימות השמעה בזמן אמת וגם באופן קבוע, ולראות למה החברים שלכם מאזינים בהתבסס על מצבי הרוח שלהם.

הבנת המושגים המרכזיים

לפני שנצלול לקוד, בואו נבין מה אנחנו בונים:

Socket.io – ספרייה המאפשרת תקשורת דו-כיוונית בזמן אמת בין השרת לדפדפן שלכם. חשבו על זה כמו שיחת טלפון במקום הודעות טקסט - אתם יכולים לשלוח ולקבל מידע באופן מיידי מבלי לרענן את הדף.
אחסון מתמיד - שמירת נתונים במסד הנתונים של MongoDB שלכם כך שיישארו שם גם כאשר משתמשים מתנתקים. זה כמו שמירת קובץ בכונן הקשיח שלכם במקום פשוט לשמור אותו בזיכרון.
הפניות לזיהוי אובייקטים - הדרך של MongoDB ליצור קשרים בין נתונים. במקום להעתיק את כל המידע של חברכם לפרופיל שלכם, אתם פשוט מאחסנים הפניה (כמו מצביע) לפרופיל שלהם.
סכמות - חשבו על אלה כתוכניות שמגדירות את מבנה הנתונים שלכם. הם אומרים ל-MongoDB אילו שדות צריכים להכיל כל מסמך ואיזה סוג נתונים נכנסים בכל שדה.

שלב 1: התקנת תלויות נדרשות

פתח את הטרמינל שלך בספריית הפרויקט שלך והתקן את Socket.io עבור תכונות בזמן אמת:

npm install socket.io

מה זה עושה: פקודה זו מורידה ומתקינה את ספריית Socket.io לתוך הפרויקט שלך. הפקודה npm install מורידה חבילות מהרישום של npm (ספרייה ענקית של קוד JavaScript) ומוסיפה אותן לתיקיית node_modules שלך.

התלויות האחרות (sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv) אמורות להיות מותקנות כבר מחלק 2.

שלב 2: עדכן את מודל המשתמש שלך עם תכונות חברתיות

מכיוון שכבר יצרת מודל משתמש בחלק 2, נעדכן אותו כדי להוסיף תכונות חברתיות. מודל המשתמש הוא כמו תבנית שמגדירה איזה מידע אנו מאחסנים על כל משתמש במסד הנתונים שלנו.

מה שאנחנו מוסיפים:

friends arch – רשימה של הפניות ObjectId למשתמשים אחרים. במקום לאחסן מידע מלא על המשתמש, אנו מאחסנים רק מזהים המצביעים על מסמכי משתמש אחרים במסד הנתונים.
sharedWith ו-isShared השדות – אלה עוקבים אחר אילו ערכי מצב רוח שותפו ועם מי הם שותפו.
sharedPlaylistSchema – סכימה חדשה (blueprint) שמגדירה כיצד נראית רשימת השמעה משותפת: מי שיתף אותה, לאיזה מצב רוח היא נועדה, הרצועות ומתי היא שותפה.
sharedPlaylists array – רשימה המאחסנת את כל רשימות ההשמעה שחבריך שיתפו איתך.

החלף את models/User.js שלך ב:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // סכמה עבור ערכי מצב רוח בודדים (בכל פעם שמשתמש יוצר רשימת השמעה) const moodEntrySchema = new mongoose.Schema({ text: String, // מה שהמשתמש הקליד (למשל, "מרגיש שמח היום") detectedMood: String, // מצב הרוח שהמנתח שלנו זיהה (למשל, "מאושר") confidence: Number, // כמה אנחנו בטוחים (0-10) playlistGenerated: [{ // מערך של שירים שהמלצנו עליהם trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } // null = not rated, true = liked, false = dislike }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // עם מי שיתפנו את זה? isShared: { type: Boolean, default: false }, // האם זה שותף? timestamp: { type: Date, default: Date.now } // מתי זה נוצר? }); // סכמה להעדפות משתמש (ז'אנרים מועדפים וכו') 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] } }); // חדש: סכימה עבור רשימות השמעה שחברים משתפים איתך const sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // הפניה של ObjectId לחבר ששיתף sharedByUsername: String, // שם משתמש לתצוגה קלה (מנורמל לצורך ביצועים) mood: String, // לאיזה מצב רוח היה שייך רשימת ההשמעה הזו? playlist: [{ // שם הרצועה בפועל: String, artist: String, album_image: String, id: String }], timestamp: { type: Date, default: Date.now } // מתי זה שותף? }); // סכימת משתמש ראשית - מגדירה את המבנה של מסמך משתמש 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' }], // מערך של הפניות ObjectId לחברים moodHistory: [moodEntrySchema], // כל רשימות ההשמעה שמשתמש זה יצר sharedPlaylists: [sharedPlaylistSchema], // רשימות השמעה שחברים שיתפו עם משתמש זה preferences: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Number, default: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { type: Date, default: Date.now } } }, { timestamps: true }); // הוספה אוטומטית של השדות createdAt ו-updatedAt // תוכנה ביניים: הפעלת פונקציה זו לפני שמירת משתמש (כדי לבצע גיבוב של הסיסמה שלו) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // ביצוע גיבוב רק אם הסיסמה שונתה this.password = await bcrypt.hash(this.password, 12); // ביצוע גיבוב עם 12 סבבי מלח next(); }); // שיטה: בדיקה אם סיסמה תואמת לסיסמה המגובבת userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // שיטה: עדכון סטטיסטיקות משתמש בהתבסס על היסטוריית מצב הרוח שלהם userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean); // קבל את כל מצבי הרוח שאינם ריקים this.stats.totalPlaylists = moods.length; if (moods.length > 0) { // ספירת מספר הפעמים שכל מצב רוח מופיע const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // מצא את מצב הרוח עם הספירה הגבוהה ביותר this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral'); } else { this.stats.mostCommonMood = 'neutral'; } // חשב את השעה המועדפת ביום בהתבסס על מתי הם יוצרים רשימות השמעה 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'; } }; // ייצא את המודל כדי שנוכל להשתמש בו בקבצים אחרים module.exports = mongoose.model('User', userSchema);

הסבר על מושגים מרכזיים:

הפניות ל-ObjectId – המערך friends אינו מאחסן אובייקטים שלמים של משתמשים. במקום זאת, הוא מאחסן מזהי אובייקט (מזהים ייחודיים) המצביעים על משתמשים אחרים. זה יעיל מכיוון שאם חבר משנה את שם המשתמש שלו, אנחנו לא צריכים לעדכן אותו בכל מקום - אנחנו פשוט עוקבים אחר ההפניה.
דה-נורמליזציה - שימו לב שאנחנו מאחסנים גם sharedBy (ObjectId) וגם sharedByUsername (String). זה נקרא דה-נורמליזציה - אחסון אותם נתונים במקומות מרובים לצורך ביצועים. אנחנו מאחסנים את שם המשתמש כדי שלא נצטרך לחפש את המשתמש בכל פעם שאנחנו מציגים רשימות השמעה משותפות.
תוכנת מידה (.pre()) - זה פועל אוטומטית לפני פעולות מסוימות. כאן, הסיסמאות מופעלות לפני שמירתן במסד הנתונים לצורך אבטחה.
שיטות מופע (.methods) – אלו הן פונקציות שניתן לקרוא להן במסמכי משתמש בודדים, כמו user.comparePassword() או user.updateStats().

שלב 3: עדכן את ממשק ה-HTML שלך עם תכונות חברתיות

כעת בואו נעדכן את ממשק המשתמש כך שיכלול ניהול חברים ופיד פעילות. קוד ה-HTML מגדיר את מבנה דף האינטרנט שלך - אילו אלמנטים מופיעים והיכן הם ממוקמים.

מה שאנחנו מוסיפים לממשק המשתמש:

מקטע רשימת חברים – מציג את החברים הנוכחיים שלך
קלט הוסף חבר – שדה טקסט להזנת שם המשתמש של חבר
עדכון פעילות אחרונה – מציג רשימות השמעה שחבריך שיתפו (ניתן ללחוץ כדי לצפות ברשימת ההשמעה המלאה)
תיבת סימון שתף – אפשרות לשתף את רשימת ההשמעה שנוצרה עם חברים
אזור התראות – התראות קופצות לעדכונים בזמן אמת

החלף את public/index.html שלך ב:

<!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 - רשת חברתית</title> <style> /* איפוס סגנונות ברירת מחדל של הדפדפן */ * { margin: 0; padding: 0; box-sizing: border-box; } /* עיצוב גוף ראשי עם רקע הדרגתי */ body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; color: #333; } /* מיכל עבור לוח המחוונים כולו */ .dashboard { max-width: 1000px; margin: 0 auto; padding: 20px; } /* כותרת עליונה עם הודעת ברכה */ .header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); /* אפקט טשטוש עבור גלאסמורפיזם */ border-radius: 20px; padding: 30px; margin-bottom: 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* פריסת רשת בת שתי עמודות: קטע רשימת השמעה (גדול יותר) וקטע חברים (קטן יותר) */ .main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } /* עיצוב כרטיסים לשני הקטעים */ .playlist-section, .friends-section { background: rgba(255,255,255,0.95); border-radius: 20px; ריפוד: 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* עיצוב אלמנטים של טופס */ input, textarea, button { width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; } /* עיצוב ספציפי לכפתורים עם רקע גרדיאנט */ button { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; cursor: pointer; font-weight: 600; } /* אפקט ריחוף עדין על כפתורים */ button:hover { transform: translateY(-2px); } /* עיצוב פריט חבר בודד */ .friend-item { background: #f8f9fa; padding: 10px; margin: 5px 0; רדיוס-גבול: 8 פיקסלים; גבול-שמאל: 4 פיקסלים מוצק #667eea; /* צבע הדגשה משמאל */ } /* עיצוב חלון קופץ של התראות (מוסתר כברירת מחדל, מחליק פנימה מימין) */ .notification { position: fixed; top: 20 פיקסלים; right: 20 פיקסלים; background: rgba(102,126,234,0.95); color: #fff; padding: 15 פיקסלים 20 פיקסלים; רדיוס-גבול: 8 פיקסלים; box-shadow: 0 4 פיקסלים 15 פיקסלים rgba(0,0,0,0.1); transform: translateX(400 פיקסלים); /* התחלה מחוץ למסך */ transition: transform .3s ease; z-index: 1000; רוחב-מקסימלי: 300 פיקסלים; } /* הצגת התראה (מחליק פנימה) */ .notification.show { transform: translateX(0); } /* טפסי התחברות והרשמה */ .login-section, .register-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; max-width: 400px; margin: 50px auto; } /* פקדי תיבת סימון לשיתוף */ .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"> <!-- מקטע אימות (טפסי התחברות/הרשמה) --> <div id="authSection"> <!-- טופס התחברות --> <div class="login-section"> <h2>🧠🎵 ברוכים השבים!</h2> <input type="text" id="loginUsername" placeholder="שם משתמש"/> <input type="password" id="loginPassword" placeholder="סיסמה"/> <button onclick="login()">התחברות</button> <p><a href="#" onclick="showRegister()">אין לך חשבון? הירשם</a></p> </div> <!-- טופס הרשמה (מוסתר כברירת מחדל) --> <div id="registerSection" class="register-section" style="display:none"> <h2>🎵 צור את פרופיל המוזיקה שלך</h2> <input type="text" id="regUsername" placeholder="שם משתמש"/> <input type="email" id="regEmail" placeholder="Email"/> <input type="password" id="regPassword" placeholder="סיסמה"/> <button onclick="register()">צור חשבון</button> <p><a href="#" onclick="showLogin()">כבר יש לך חשבון? התחבר</a></p> </div> </div> <!-- לוח המחוונים הראשי (מוצג לאחר הכניסה) --> <div id="dashboardSection" style="display:none"> <!-- כותרת עליונה עם שם משתמש וכפתור התנתקות --> <div class="header"> <h1>🧠🎵 קוראת המחשבות המוזיקלית האישית שלך</h1> <p>ברוכה הבאה, <span id="username"></span>!</p> <button onclick="logout()" style="width:auto; margin-top:10px">התנתק</button> </div> <!-- פריסה בת שתי עמודות: מדור רשימת השמעה משמאל, מדור חברים מימין --> <div class="main-content"> <!-- עמודה שמאלית: יצירת רשימת השמעה --> <div class="playlist-section"> <h2>💭 איך אתה מרגיש?</h2> <textarea id="moodText" placeholder="תאר את מצב הרוח שלך..."></textarea> <div class="share-controls"> <label><input type="checkbox" id="shareWithFriends"/>שתף עם חברים</label> </div> <button onclick="generatePlaylist()">🎧 צור רשימת השמעה</button> <!-- התוצאות מופיעות כאן לאחר יצירת רשימת ההשמעה --> <div id="result" style="display:none"></div> </div> <!-- עמודה ימנית: חברים ופעילות --> <div class="friends-section"> <h3>👥 החברים שלי</h3> <div id="friendsList"></div> <h4>הוסף חבר</h4> <input type="text" id="friendUsername" placeholder="שם משתמש של חבר"/> <button onclick="addFriend()">הוסף חבר</button> <h4>פעילות אחרונה</h4> <!-- רשימות השמעה משותפות של חברים מופיעות כאן --> <div id="friendActivity">פעילות חברים תופיע כאן...</div> </div> </div> </div> </div> <!-- מיכל לחלונות קופצים של התראות --> <div id="notificationArea"></div> <!-- כלול את ספריית Socket.io (המוגשת אוטומטית על ידי השרת שלנו) --> <script src="/socket.io/socket.io.js"></script> <!-- כלול את קוד ה-JavaScript המותאם אישית שלנו --> <script src="./js/app.js"></script> </body> </html>

הבנת מבנה ה-HTML:

שני חלקים עיקריים: authSection (התחברות/הרשמה) ו-dashboardSection (האפליקציה הראשית). רק אחד גלוי בכל פעם.
פריסת רשת: ה-.main-content משתמש ברשת CSS כדי ליצור שתי עמודות (2fr עבור רשימת השמעה, 1fr עבור חברים). משמעות הדבר היא שאזור רשימת ההשמעה רחב פי שניים.
מטפלי אירועים: onclick="functionName()" מורה לדפדפן לקרוא לפונקציית JavaScript כאשר לוחצים על האלמנט.
מזהים: לאלמנטים יש מזהים ייחודיים (כמו id="friendsList") כך שה-JavaScript שלנו יכול למצוא ולשנות אותם מאוחר יותר.

שלב 4: עדכון server.js עם Socket.io, נקודות קצה של חברים ושיתוף מתמיד

כעת נעדכן את השרת שלנו לטפל בבקשות חברות, שיתוף פלייליסטים ותקשורת בזמן אמת. השרת הוא ה"מוח" של האפליקציה שלכם – הוא מעבד בקשות, מדבר עם מסד הנתונים ושולח תגובות בחזרה למשתמשים.

מה שאנחנו מוסיפים לשרת:

שרת Socket.io – מאפשר תקשורת דו-כיוונית בזמן אמת בין השרת ללקוחות
/api/add-friend endpoint – מטפל בבקשות חברות (חברות הדדית)
/api/shared-playlists endpoint – מחזיר רשימות השמעה שחברים שיתפו אתכם
/api/personalized-playlist משופר – כעת שומר רשימות השמעה משותפות למסדי הנתונים של חברים
מטפלי אירועי Socket – האזנה ופליטה של אירועים בזמן אמת (אימות, שיתוף)

החלפה של server.js עם:

// טען משתני סביבה מקובץ .env require('dotenv').config(); // ייבא מודולים נדרשים 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'); // אתחל את מחולל רשימת ההשמעה const playlistGen = new PlaylistGenerator(); const PORT = process.env.PORT || 3000; // התחברות למסד הנתונים של MongoDB async function connectDB() { try { console.log('🔗 התחברות ל-MongoDB…'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }); console.log('✅ MongoDB התחבר בהצלחה!'); } catch (err) { console.error('❌ חיבור MongoDB נכשל:', err.message); process.exit(1); // יציאה אם חיבור למסד הנתונים נכשל } } connectDB(); // יצירת אפליקציית Express ושרת HTTP const app = express(); const server = http.createServer(app); // אתחול Socket.io על גבי שרת HTTP const io = socketIo(server); // מפה למעקב אחר משתמשים מחוברים: userId => socketId // זה מאפשר לנו לשלוח הודעות למשתמשים ספציפיים המחוברים כעת const connectedUsers = new Map(); // מטפל חיבור Socket.io - פועל כאשר לקוח מתחבר io.on('connection', socket => { console.log('🔗 Socket connected:', socket.id); // מטפל באירוע 'authenticate' - הלקוח מספר לנו מי הוא socket.on('authenticate', ({ userId, username }) => { // אחסון מזהה ה-socket של משתמש זה כדי שנוכל לשלוח לו הודעות מאוחר יותר connectedUsers.set(userId, socket.id); socket.userId = userId; // צרף מזהה משתמש ל-socket הזה socket.username = username; // צרף שם משתמש ל-socket הזה console.log(`✅ משתמש מאומת: ${username}`); }); // מטפל באירוע 'share_playlist' - המשתמש רוצה לשתף עם חברים socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { try { // עובר על כל מזהי החברים עבור (let friendId of friendIds) { // קבל את מזהה ה-socket עבור חבר זה (אם הוא מחובר) const sid = connectedUsers.get(friendId.toString()); if (sid) { // חבר מחובר! שלח לו התראה בזמן אמת io.to(sid).emit('friend_shared_playlist', { friendName, mood, playlist }); } // אם חבר לא מחובר, הוא יראה את רשימת ההשמעה בפיד הפעילות שלו כשהוא יתחבר } } catch (err) { console.error('שגיאת שיתוף רשימת השמעה:', err); } }); // טיפול בניתוק - הסרת משתמש מהמפה המקוונת socket.on('disconnect', () => { if (socket.userId) { connectedUsers.delete(socket.userId); console.log(`👋 Disconnected: ${socket.username}`); } }); }); // תוכנה ביניים לניתוח בקשות JSON גופי app.use(express.json()); // הגשת קבצים סטטיים מהתיקייה 'public' (HTML, CSS, תמונות) app.use(express.static(path.join(__dirname, 'public'))); // ===== נקודות קצה של API ===== // POST /api/register - יצירת חשבון משתמש חדש app.post('/api/register', async (req, res) => { try { const { שם משתמש, דוא"ל, סיסמה } = req.body; // אימות קלט if (!username || !email || !password) { return res.status(400).json({ שגיאה: 'כל השדות נדרשים' }); } if (password.length < 6) { return res.status(400).json({ שגיאה: 'הסיסמה חייבת להיות באורך של לפחות 6 תווים' }); } // בדיקה אם שם משתמש או דוא"ל כבר קיימים const exists = await User.findOne({ $or: [{ שם משתמש }, { דוא"ל }] }); if (exists) { return res.status(400).json({ שגיאה: 'שם משתמש או דוא"ל כבר קיימים' }); } // יצירה ושמירה של משתמש חדש (הסיסמה תעבור גיבוב אוטומטית על ידי תוכנת טרום-שמירה שלנו) const user = new User({ שם משתמש, דוא"ל, סיסמה }); await user.save(); res.status(201).json({ הודעה: 'המשתמש נוצר בהצלחה' }); } catch (err) { console.error('שגיאת רישום:', err); res.status(500).json({ שגיאה: 'ההרשמה נכשלה' }); } }); // POST /api/login - אימות משתמש והחזרת אסימון JWT app.post('/api/login', async (req, res) => { try { const { שם משתמש, סיסמה } = req.body; // חיפוש משתמש לפי שם משתמש או דוא"ל const user = await User.findOne({ $or: {[ שם משתמש }, { דוא"ל: שם משתמש }] }); // בדיקה אם המשתמש קיים והסיסמה נכונה if (!user || !(await user.comparePassword(password))) { return res.status(401).json({ שגיאה: 'אישורים לא חוקיים' }); } // יצירת אסימון JWT (כמו תעודת זהות זמנית) const token = jwt.sign( { userId: user._id }, // Payload (מה שאנחנו מקודדים) process.env.JWT_SECRET, // מפתח סודי (שומר על אבטחה) { expiresIn: '7d' } // תוקף האסימון פג בעוד 7 ימים); // שלח את האסימון בחזרה ללקוח res.json({ token, user: { username: user.username, email: user.email, friends: user.friends } }); } catch (err) { console.error('שגיאת כניסה:', err); res.status(500).json({ שגיאה: 'הכניסה נכשלה' }); } }); // GET /api/profile - קבל את הפרופיל של המשתמש הנוכחי // תוכנת הביניים 'auth' מאמתת את אסימון ה-JWT ומחברת את המשתמש ל- req.user app.get('/api/profile', auth, async (req, res) => { try { // עדכון סטטיסטיקות משתמש req.user.updateStats(); await req.user.save(); // אכלוס מערך חברים (החלפת ObjectIds באובייקטים של המשתמש בפועל) 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('שגיאת פרופיל:', err); res.status(500).json({ error: 'טעינת הפרופיל נכשלה' }); } }); // GET /api/shared-playlists - קבל רשימות השמעה שחברים שיתפו איתך app.get('/api/shared-playlists', auth, async (req, res) => { try { // קבל את 10 רשימות ההשמעה המשותפות האחרונות, ממוינות לפי הרשימות הראשונות האחרונות const sharedPlaylists = req.user.sharedPlaylists .sort((a, b) => b.timestamp - a.timestamp) // מיין בסדר יורד לפי חותמת זמן .slice(0, 10); // קח את 10 הראשונות res.json({ sharedPlaylists }); } catch (err) { console.error('שגיאה ברשימות השמעה משותפות:', err); res.status(500).json({ שגיאה: 'טעינת רשימות השמעה משותפות נכשלה' }); } }); // POST /api/add-friend - הוספת חבר (חברות הדדית) app.post('/api/add-friend', auth, async (req, res) => { try { const { friendUsername } = req.body; // חיפוש חבר לפי שם משתמש const friend = await User.findOne({ username: friendUsername }); if (!friend) { return res.status(404).json({ error: 'המשתמש לא נמצא' }); } // בדיקה אם כבר חברים if (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) { return res.status(400).json({ error: 'כבר חברים עם משתמש זה' }); } // הוספת כל משתמש לרשימת החברים של השני (חברות הדדית) req.user.friends.push(friend._id); friend.friends.push(req.user._id); // שמור את שני המשתמשים await req.user.save(); await friend.save(); res.json({ message: 'חבר נוסף בהצלחה', friendId: friend._id }); } catch (err) { console.error('שגיאת הוספת חבר:', err); console.error('שגיאה במחסנית:', err.stack); res.status(500).json({ error: 'הוספת חבר נכשלה' }); } }); // POST /api/personalized-playlist - יצירת רשימת השמעה מבוססת מצב רוח 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: 'אנא ספר לי איך אתה מרגיש!' }); } // 1. ניתוח מצב הרוח מטקסט המשתמש const moodAnalysis = moodAnalyzer.analyzeMood(text); // 2. יצירת רשימת השמעה המבוססת על מצב רוח const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 3. שמירה בהיסטוריית מצבי הרוח של המשתמש 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. אם השיתוף מופעל, שמור במערך sharedPlaylists של כל חבר 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 => ({ // שתף את 5 הרצועות הראשונות name: t.name, artist: t.artist, album_image: t.album_image, id: t.id })) }; // עוברים בלולאה על כל החברים ומוסיפים את רשימת ההשמעה הזו לרשימות ההשמעה המשותפות שלהם for (let friendId of req.user.friends) { const friend = await User.findById(friendId); if (friend) { friend.sharedPlaylists.push(sharedPlaylistData); await friend.save(); } } } // 5. שולחים תגובה חזרה ללקוח res.json({ moodAnalysis, playlist, personalizedMessage: `בהתבסס על ההיסטוריה שלך, הנה רשימת ההשמעה המושלמת שלך ב-${moodAnalysis.mood}!` }); } catch (err) { console.error('שגיאת רשימת השמעה מותאמת אישית:', err); console.error('שגיאה בסטאק:', err.stack); res.status(500).json({ error: 'יצירת רשימת השמעה מותאמת אישית נכשלה. אנא נסו שוב.' }); } }); // גיבוי: הגשת קובץ index.html לכל נתיב שאינו API (לניתוב SPA) app.use((req, res, next) => { if (req.method === 'GET' && !req.path.startsWith('/api/')) { res.sendFile(path.join(__dirname, 'public', 'index.html')); } else { next(); } }); // מטפל שגיאות גלובלי app.use((err, req, res, next) => { console.error('שגיאה גלובלית:', err); res.status(500).json({ שגיאה: 'שגיאת שרת פנימית', פרטים: err.message }); }); // הפעל את השרת server.listen(PORT, () => { console.log(`🚀 Server running on http://localhost:${PORT}`); });

הסבר על מושגי מפתח בשרת:

תוכנת ביניים – פונקציות שמעבדות בקשות לפני שהן מגיעות למטפלי הנתיבים שלך. express.json() מנתח JSON מגופי הבקשה, auth מאמת אסימוני JWT.
async/await – תחביר ג'אווה סקריפט מודרני לטיפול בפעולות אסינכרוניות (כמו שאילתות מסד נתונים). await עוצר את הביצוע עד שההבטחה תתממש.
קודי סטטוס HTTP – מספרים המציינים את התוצאה: 200 = הצלחה, 201 = נוצר, 400 = בקשה שגויה, 401 = לא מורשה, 404 = לא נמצא, 500 = שגיאת שרת.
אירועי Socket.io – הודעות בעלות שם שעוברות הלוך ושוב בין הלקוח לשרת. socket.on() מאזין לאירועים, socket.emit() שולח אירועים.
JWT (JSON Web Token) – דרך מאובטחת לזיהוי משתמשים. כאשר הם מתחברים, אנו נותנים להם אסימון. הם שולחים את האסימון הזה עם כל בקשה כדי להוכיח מי הם.

שלב 5: עדכון קוד ה-JavaScript של ממשק ה-Frontend (public/js/app.js)

לבסוף, בואו נוסיף את קוד ה-JavaScript שהופך את ממשק ה-Frontend שלנו לאינטראקטיבי. קוד זה פועל בדפדפן של המשתמש ומטפל בדברים כמו לחיצות על כפתורים, בקשות API ועדכונים בזמן אמת.

מה עושה קוד ה-JavaScript הזה:

מנהל אימות – כניסה, רישום, יציאה ואחסון אסימונים
מאתחל את Socket.io – מתחבר לשרת ומאזין לאירועים בזמן אמת
מבצע בקשות API – משתמש ב-fetch() כדי לתקשר עם נקודות קצה של השרת
מעדכן את ממשק המשתמש – יוצר באופן דינמי אלמנטי HTML המבוססים על נתונים מהשרת
מטפל באינטראקציות של משתמשים – לחיצות על כפתורים, הגשת טפסים וכו'.

החלף את public/js/app.js שלך בקוד המלא המוצג במדריך...

(בלוק הקוד app.js עוקב בדיוק אחר לפני כן, עם כל הפונקציות עבור התחברות, הרשמה, טעינת רשימות השמעה משותפות וכו')

שלב 6: בדוק את ממשק ה-API של המוזיקה החברתית שלך

עכשיו הגיע הזמן לבדוק הכל! בצע את השלבים הבאים בקפידה:

הפעל את השרת שלך: בטרמינל שלך, הפעל npm start. אתה אמור לראות הודעות כמו "MongoDB מחובר!" ו-"Server running on http://localhost:3000".
פתח שני חלונות דפדפן: פתח את http://localhost:3000 בשני חלונות דפדפן נפרדים (או חלון רגיל אחד וחלון גלישה בסתר אחד). פעולה זו מדמה שני משתמשים שונים.
רישום משתמש 1: בחלון הראשון, לחץ על "הרשמה" וצר משתמש (למשל, שם משתמש: "אליס").
רישום משתמש 2: בחלון השני, צור משתמש נוסף (למשל, שם משתמש: "בוב").
הוסף אחד את השני כחברים: בחלון של אליס, הקלד "בוב" בשדה "הוסף חבר" ולחץ על הוסף חבר. עשו את אותו הדבר בחלון של בוב (הקלד "אליס"). אתם אמורים לראות אחד את השני ברשימות החברים שלכם!
שתף רשימת השמעה: בחלון של אליס, הקלד משהו כמו "אני מרגישה סופר שמחה היום!" בתיבת הטקסט של מצב הרוח. סמן את תיבת הסימון "שתף עם חברים" ולאחר מכן לחץ על "צור רשימת השמעה".
צפה בקסם קורה:
- אם בוב מחובר (החלון עדיין פתוח), הוא יראה התראה שקופית מימין!
- בוב אמור לראות גם את רשימת ההשמעה המשותפת של אליס מופיעה במקטע "פעילות אחרונה" שלו.
- בוב יכול ללחוץ על רשימת ההשמעה המשותפת כדי לצפות ברשימת השירים המלאה.
- אם בוב יתנתק ויתחבר שוב מאוחר יותר, רשימת ההשמעה המשותפת עדיין תהיה שם!

הבנת איך הכל עובד יחד

בואו נעקוב אחר מה שקורה כאשר אליס משתפת רשימת השמעה עם בוב:

אליס מסמנת "שתף עם חברים" ולוחצת על "צור רשימת השמעה"
ממשק החזית שולח בקשת POST אל /api/personalized-playlist עם shareWithFriends: true
שרת מנתח את מצב הרוח של אליס ויוצר רשימת השמעה באמצעות Spotify API
שרת שומר את רשימת ההשמעה למערך moodHistory של אליס
שרת עובר בלולאה על חבריה של אליס (כולל בוב) ומוסיף את רשימת ההשמעה למערך sharedPlaylists של כל חבר ב-MongoDB
ממשק החזית פולט share_playlist אירוע Socket.io להודעת חברים מחוברים
השרת מקבל את האירוע ובודק אם בוב מחובר (מחפש במפת connectedUsers)
אם בוב מחובר, השרת שולח לו אירוע friend_shared_playlist עם תצוגה מקדימה של רשימת ההשמעה
הדפדפן של בוב מקבל את האירוע וקורא ל- showNotification() כדי להציג חלון קופץ
הדפדפן של בוב קורא גם ל- loadSharedPlaylists() כדי לרענן את פיד הפעילות
אם בוב לא מחובר, הוא יראה את רשימת ההשמעה בפיד הפעילות שלו בפעם הבאה שיתחבר (מכיוון שהיא נשמרת במערך sharedPlaylists שלו)

מה שבנית

מזל טוב! בניתם בהצלחה אפליקציית מוזיקה חברתית מלאה! הנה מה שהשגתם:

🤝 מערכת חברים – משתמשים יכולים להוסיף חברים לפי שם משתמש. חברויות הן הדדיות (שני המשתמשים הופכים לחברים זה של זה) ומאוחסנות כהפניות ObjectId ב-MongoDB.
💾 שיתוף רשימות השמעה מתמיד – רשימות השמעה משותפות נשמרות במסד הנתונים במערך sharedPlaylists של כל חבר. משמעות הדבר היא שהנתונים נשארים גם לאחר שמשתמשים מתנתקים.
📡 התראות בזמן אמת – באמצעות Socket.io, משתמשים מחוברים מקבלים התראות מיידיות כאשר חברים משתפים רשימות השמעה. אין צורך ברענון הדף!
📰 הזנת פעילות – משתמשים יכולים לראות רשימות השמעה משותפות אחרונות מכל החברים שלהם, ממוינות לפי החדשות ביותר תחילה. לחיצה על רשימת השמעה מציגה את רשימת השירים המלאה.
🔐 אימות מאובטח – סיסמאות עוברות גיבוי באמצעות bcrypt (לעולם לא נשמרות כטקסט רגיל), ואסימוני JWT משמשים לאימות בקשות API.
⏱️ התאמה למצב לא מקוון – חברים יכולים לצפות ברשימות השמעה משותפות גם אם לא היו מחוברים בזמן שיתוף רשימת ההשמעה. הכל נשמר במסד הנתונים!

מושגים מרכזיים שלמדתם

תקשורת בזמן אמת עם Socket.io (WebSockets)
קשרי מסד נתונים באמצעות הפניות של MongoDB ObjectId
דה-נורמליזציה לביצועים (אחסון גם ObjectId וגם שם משתמש)
עיצוב RESTful API (נקודות קצה GET, POST עם קודי סטטוס HTTP מתאימים)
תבנית תוכנה לאימות ועיבוד בקשות
Async/await לטיפול בפעולות אסינכרוניות
מניפולציה של DOM לעדכון דינמי של ממשק המשתמש
ארכיטקטורה מונחית אירועים עם אירועי Socket.io

פתרון בעיות נפוצות

"לא ניתן "התחבר ל-MongoDB" – ודא ששרת ה-MongoDB שלך פועל ושה-MONGODB_URI שלך ב-.env נכון.
"אישורים לא חוקיים" בעת הכניסה – בדוק שוב את שם המשתמש והסיסמה שלך. זכור, הם תלויי רישיות!
"המשתמש לא נמצא" בעת הוספת חבר – ודא שאתה מקליד את שם המשתמש המדויק (תלוי רישיות). הם חייבים להירשם תחילה.
רשימות השמעה משותפות אינן מופיעות – בדוק את קונסולת הדפדפן שלך (F12) עבור שגיאות. ודא ששני המשתמשים חברים ושהתיבת הסימון "שתף עם חברים" מסומנת.
התראות בזמן אמת אינן פועלות – ודא ש-Socket.io מחובר. בדוק את קונסולת הדפדפן עבור "🔗 מחובר לשרת".

הצעדים הבאים ורעיונות להרחבה

כעת, לאחר שיש לך אפליקציית מוזיקה חברתית פעילה, הנה כמה רעיונות שיעזרו לך לקחת את זה צעד קדימה:

בקשות חברות – במקום חברות מיידית, דרוש מהמשתמשים לשלוח בקשות שניתן לקבל או לדחות
הודעות פרטיות – הוסף מערכת צ'אט באמצעות Socket.io כדי שחברים יוכלו לשלוח הודעות זה לזה
תגובות לרשימת השמעה – אפשר למשתמשים להגיב על רשימות השמעה משותפות
לייק/דיסלייק לרצועות – הוסף כפתורי לייק/דיסל לכל רצועה ברשימת השמעה
תאימות לטעם מוזיקלי – חישוב אחוזים בהתבסס על מידת הדומה להעדפות המוזיקה של שני משתמשים
חיפוש משתמשים – הוסף פונקציית חיפוש כדי למצוא משתמשים לפי שם משתמש
מחק/הסר חברות – הוסף אפשרות להסיר חברים או למחוק רשימות משותפות רשימות השמעה
דפי פרופיל – הצגת סטטיסטיקות משתמש, מצבי רוח מועדפים ופלייליסטים אחרונים
רשימות השמעה שיתופיות – אפשרות לחברים מרובים להוסיף שירים לפלייליסט משותף
היסטוריית רשימות השמעה – הצגת כל רשימות ההשמעה שיצרת בעבר

בנית אפליקציית מוזיקה חברתית מלאה עם תכונות בזמן אמת ואחסון נתונים מתמשך! זהו בסיס איתן להבנת פיתוח אתרים מודרני. המשך להתנסות ולבנות!🎵✨