أضف أصدقاءك إلى واجهة برمجة تطبيقات الموسيقى التي تقرأ أفكارك: مشاركة اجتماعية فورية. هل أنت مستعد لجعل واجهة برمجة تطبيقات الموسيقى التي تقرأ أفكارك اجتماعية حقًا؟ في هذا البرنامج التعليمي، ستضيف نظام أصدقاء قويًا ومشاركة قوائم تشغيل محفوظة في قاعدة البيانات، ليتمكن المستخدمون من مشاهدة قوائم تشغيل أصدقائهم المشتركة حتى في حال عدم اتصالهم بالإنترنت. سنستخدم Socket.io للتحديثات في الوقت الفعلي وMongoDB للتخزين الدائم.

ما ستبنيه

نظام الأصدقاء - أضف أصدقاء وأدرهم حسب اسم المستخدم مع صداقة متبادلة باستخدام ObjectIds
مشاركة قائمة التشغيل الدائمة - يتم حفظ قوائم التشغيل المشتركة في قاعدة البيانات ويمكن عرضها في أي وقت
إشعارات في الوقت الفعلي - احصل على إشعارات فورية عندما يشارك الأصدقاء (إذا كانوا متصلين بالإنترنت)
موجز النشاط - شاهد مشاركات الأصدقاء الأخيرة مع معاينات قائمة التشغيل القابلة للنقر
تحليل الحالة المزاجية المحسّن - إنشاء قوائم تشغيل ذكية مع بدائل البحث

المتطلبات الأساسية

واجهة برمجة تطبيقات Mind-Reading Music المكتملة من الجزء الثاني
تم تثبيت MongoDB وNode.js وnpm
بيانات اعتماد واجهة برمجة تطبيقات Spotify (معرف العميل والسر)
مدة البرمجة من 30 إلى 45 دقيقة

في الجزء الثاني، أنشأتَ حسابات مستخدمين بسجلّ مزاجي وتفضيلات ذكية. الآن سنجعلها اجتماعية! ستتعلم كيفية ربط المستخدمين، ومشاركة قوائم التشغيل آنيًا ومستمرًا، ومعرفة ما يستمع إليه أصدقاؤك بناءً على مزاجهم.

فهم المفاهيم الأساسية

قبل التعمق في البرمجة، دعونا نفهم ما نبنيه:

Socket.io - مكتبة تُمكّن من الاتصال الفوري ثنائي الاتجاه بين خادمك ومتصفحك. تخيل الأمر كمكالمة هاتفية بدلًا من الرسائل النصية - يمكنك إرسال واستقبال المعلومات فورًا دون الحاجة إلى تحديث الصفحة.
التخزين الدائم - حفظ البيانات في قاعدة بيانات MongoDB لتبقى هناك حتى عند تسجيل خروج المستخدمين. هذا يُشبه حفظ ملف على القرص الصلب بدلًا من مجرد الاحتفاظ به في الذاكرة.
مراجع معرف الكائن - طريقة MongoDB في بناء العلاقات بين البيانات. بدلاً من نسخ جميع معلومات صديقك إلى ملفك الشخصي، يمكنك ببساطة تخزين مرجع (كمؤشر) لملفه الشخصي.
المخططات - اعتبرها بمثابة مخططات تحدد بنية بياناتك. فهي تُحدد لـ MongoDB الحقول التي يجب أن يحتوي عليها كل مستند ونوع البيانات التي يجب أن يحتوي عليها كل حقل.

الخطوة 1: تثبيت التبعيات المطلوبة

افتح الطرفية في مجلد مشروعك وثبّت Socket.io للميزات الفورية:

npm install socket.io

وظيفة هذا: يقوم هذا الأمر بتنزيل مكتبة Socket.io وتثبيتها في مشروعك. يقوم أمر npm install بجلب الحزم من سجلّ npm (مكتبة ضخمة من أكواد جافا سكريبت) وإضافتها إلى مجلد node_modules. يجب أن تكون التبعيات الأخرى (sentiment، وspotify-web-api-node، وbcryptjs، وjsonwebtoken، وmongoose، وexpress، وdotenv) مثبتة مسبقًا من الجزء الثاني. الخطوة الثانية: تحديث نموذج المستخدم بميزات التواصل الاجتماعي بما أنك أنشأت نموذج المستخدم في الجزء الثاني، فسنُحدّثه لإضافة ميزات التواصل الاجتماعي. نموذج المستخدم هو بمثابة قالب يُحدد المعلومات التي نخزنها حول كل مستخدم في قاعدة بياناتنا. ما نضيفه:

friends array - قائمة بمراجع ObjectId للمستخدمين الآخرين. بدلاً من تخزين معلومات المستخدم الكاملة، نقوم فقط بتخزين معرفات تشير إلى مستندات مستخدم أخرى في قاعدة البيانات.
sharedWith وisShared الحقول - تتبع هذه الحقول إدخالات الحالة المزاجية التي تمت مشاركتها والأشخاص الذين تمت مشاركتها معهم.
sharedPlaylistSchema - مخطط جديد (مخطط) يحدد شكل قائمة التشغيل المشتركة: من شاركها، وما الحالة المزاجية التي كانت مخصصة لها، والمسارات، ومتى تمت مشاركتها.
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 = disliked }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // مع من شاركنا هذا؟ isShared: { type: Boolean, default: false }, // هل تمت مشاركة هذا؟ الطابع الزمني: { النوع: التاريخ، الافتراضي: Date.now } // متى تم إنشاء هذا؟ }); // مخطط تفضيلات المستخدم (الأنواع المفضلة، وما إلى ذلك) const userPreferencesSchema = new mongoose.Schema({ favoriteGenres: [String], preferredEnergyLevel: { النوع: الرقم، الحد الأدنى: 0، الحد الأقصى: 1 }, dislikedArtists: [String], moodMusicMapping: { سعيد: [String], حزين: [String], نشيط: [String], هادئ: [String], غاضب: [String], رومانسي: [String], حنين: [String] } }); // جديد: مخطط لقوائم التشغيل التي يشاركها الأصدقاء معك const sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // مرجع ObjectId إلى الصديق الذي شارك sharedByUsername: String, // اسم المستخدم للعرض السهل (غير طبيعي للأداء) mood: String, // ما هي الحالة المزاجية التي كانت قائمة التشغيل هذه لها؟ playlist: [{ // اسم المسارات الفعلية: String, الفنان: String, صورة الألبوم: String, id: String }], الطابع الزمني: { 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 تلقائيًا // Middleware: تشغيل هذه الوظيفة قبل حفظ المستخدم (لتجزئة كلمة المرور الخاصة به) 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);

شرح المفاهيم الأساسية:

مراجع معرف الكائن - لا تخزن مصفوفة friends كائنات المستخدم بالكامل. بدلاً من ذلك، تخزن معرفات الكائن (معرفات فريدة) التي تشير إلى مستخدمين آخرين. هذا فعال لأنه إذا غيّر صديق اسم المستخدم الخاص به، فلن نحتاج إلى تحديثه في كل مكان - كل ما علينا فعله هو اتباع المرجع.
إلغاء التطبيع - لاحظ أننا نخزن كلاً من sharedBy (معرف الكائن) وsharedByUsername (سلسلة نصية). هذا ما يسمى إلغاء التطبيع - تخزين نفس البيانات في أماكن متعددة لتحسين الأداء. نخزن اسم المستخدم حتى لا نضطر للبحث عنه في كل مرة نعرض فيها قوائم التشغيل المشتركة.
الوسيط (.pre()) - يعمل هذا تلقائيًا قبل عمليات معينة. هنا، يُجزّئ كلمات المرور قبل حفظها في قاعدة البيانات لأغراض الأمان.
طرق المثيل (.methods) - هذه دوال يمكنك استدعاؤها في مستندات المستخدم الفردية، مثل user.comparePassword() أو user.updateStats().

الخطوة 3: تحديث واجهة HTML الأمامية بميزات التواصل الاجتماعي

الآن، لنُحدّث واجهة المستخدم لتشمل إدارة الأصدقاء وموجز الأنشطة. يحدد HTML بنية صفحة الويب الخاصة بك - العناصر التي تظهر ومكان وضعها.

ما نضيفه إلى واجهة المستخدم:

قسم قائمة الأصدقاء - يعرض أصدقائك الحاليين
إضافة إدخال صديق - حقل نصي لإدخال اسم مستخدم صديق
موجز الأنشطة الأخيرة - يعرض قوائم التشغيل التي شاركها أصدقاؤك (يمكن النقر عليها لعرض قائمة التشغيل الكاملة)
مربع اختيار المشاركة - خيار لمشاركة قائمة التشغيل التي تم إنشاؤها مع الأصدقاء
منطقة الإشعارات - إشعارات منبثقة للتحديثات في الوقت الفعلي

استبدل public/index.html بما يلي:

<!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Mind-Reading Music API - Social</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 { الخلفية: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* تصميم عناصر النموذج */ الإدخال، منطقة النص، الزر { العرض: 100%؛ الحشو: 12px؛ الهامش: 10px 0؛ الحد: 2px solid #e1e5e9؛ حد الحد: 8px؛ حجم الخط: 16px؛ } /* تصميم خاص بالزر مع خلفية متدرجة اللون */ الزر { الخلفية: linear-gradient(135deg, #667eea, #764ba2); اللون: #fff؛ الحد: لا شيء؛ المؤشر: مؤشر؛ وزن الخط: 600؛ } /* تأثير التحويم الدقيق على الأزرار */ button:hover { transform: translateY(-2px); } /* تصميم عناصر الصديق الفردية */ .friend-item { background: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 8px; border-left: 4px solid #667eea; /* لون مميز على اليسار */ } /* تصميم نافذة الإشعارات المنبثقة (مخفية بشكل افتراضي، تنزلق من اليمين) */ .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); /* البدء خارج الشاشة */ transition: transform .3s ease; z-index: 1000; max-width: 300px; } /* عرض الإشعار (الانزلاق للداخل) */ .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="Username"/> <input type="password" id="loginPassword" placeholder="Password"/> <button onclick="login()">تسجيل الدخول</button> ليس لديك حساب؟ سجّل الآن!-- نموذج التسجيل (مخفي افتراضيًا) --> <div id="registerSection" class="register-section" style="display:none"> <h2>🎵 أنشئ ملفك الموسيقي</h2> <input type="text" id="regUsername" placeholder="Username"/> <input type="email" id="regEmail" placeholder="Email"/> <input type="password" id="regPassword" placeholder="Password"/> <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="Friend's username"/> <button onclick="addFriend()">إضافة صديق</button> <h4>النشاط الأخير</h4> <!-- تظهر قوائم التشغيل المشتركة للأصدقاء هنا --> <div id="friendActivity">سيظهر نشاط الصديق هنا...</div> </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 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 connectUsers = new Map(); // معالج اتصال Socket.io - يعمل عندما يتصل العميل بـ io.on('connection', socket => { console.log('🔗 Socket connect:', socket.id); // التعامل مع حدث 'authenticate' - يخبرنا العميل من هو socket.on('authenticate', ({ userId, username }) => { // تخزين معرف مقبس هذا المستخدم حتى نتمكن من إرسال رسائل إليه لاحقًا connectUsers.set(userId, socket.id); socket.userId = userId; // إرفاق معرف المستخدم بهذا المقبس socket.username = username; // إرفاق اسم المستخدم بهذا المقبس console.log(`✅ المستخدم المعتمد: ${username}`); }); // التعامل مع حدث 'share_playlist' - يريد المستخدم المشاركة مع الأصدقاء socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { try { // التكرار خلال جميع معرفات الأصدقاء لـ (let friendId of friendIds) { // احصل على معرف المقبس لهذا الصديق (إذا كان متصلاً بالإنترنت) 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'))); // ===== نقاط نهاية واجهة برمجة التطبيقات ===== // POST /api/register - إنشاء حساب مستخدم جديد app.post('/api/register', async (req, res) => { try { const { username, email, password } = req.body; // التحقق من صحة الإدخال if (!username || !email || !password) { return res.status(400).json({ error: 'All fields are required' }); } if (password.length < 6) { return res.status(400).json({ error: 'Password must be at least 6 characters' }); } // تحقق مما إذا كان اسم المستخدم أو البريد الإلكتروني موجودًا بالفعل const exists = await User.findOne({ $or: [{ username }, { email }] }); if (exists) { return res.status(400).json({ error: 'اسم المستخدم أو البريد الإلكتروني موجود بالفعل' }); } // إنشاء مستخدم جديد وحفظه (سيتم تجزئة كلمة المرور تلقائيًا بواسطة برنامج الوسيط الخاص بنا للحفظ المسبق) const user = new User({ username, email, password }); await user.save(); res.status(201).json({ message: 'تم إنشاء المستخدم بنجاح' }); } catch (err) { console.error('خطأ في التسجيل:', err); res.status(500).json({ error: 'فشل التسجيل' }); } }); // POST /api/login - مصادقة المستخدم وإرجاع رمز JWT app.post('/api/login', async (req, res) => { try { const { username, password } = req.body; // البحث عن المستخدم من خلال اسم المستخدم أو البريد الإلكتروني const user = await User.findOne({ $or: {[ username }, { email: username }] }); // التحقق من وجود المستخدم وصحة كلمة المرور if (!user || !(await user.comparePassword(password))) { return res.status(401).json({ error: 'Invalid credentials' }); } // إنشاء رمز JWT (مثل بطاقة هوية مؤقتة) const token = jwt.sign( { userId: user._id }, // الحمولة (ما نقوم بترميزه) 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({ error: 'فشل تسجيل الدخول' }); } }); // GET /api/profile - الحصول على ملف تعريف المستخدم الحالي // يتحقق برنامج الوسيط "auth" من رمز JWT ويربط المستخدم بـ req.user app.get('/api/profile', auth, async (req, res) => { try { // تحديث إحصائيات المستخدم req.user.updateStats(); await req.user.save(); // ملء مصفوفة الأصدقاء (استبدال معرفات الكائنات بكائنات المستخدم الفعلية) 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({ خطأ: 'فشل تحميل الملف الشخصي' }); } }); // 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('Shared playlists error:', err); res.status(500).json({ error: 'فشل تحميل قوائم التشغيل المشتركة' }); } }); // 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: 'Please tell me how you are feeling!' }); } // 1. تحليل الحالة المزاجية من نص المستخدم const moodAnalysis = moodAnalyzer.analyzeMood(text); // 2. إنشاء قائمة تشغيل تعتمد على الحالة المزاجية const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 3. الحفظ في سجل الحالة المزاجية للمستخدم const entry = { text, detectedMood: moodAnalysis.mood, الثقة: 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، الفنان: t.artist، صورة الألبوم: t.album_image، المعرف: 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، personalMessage: `Based on your history، here's your perfect ${moodAnalysis.mood} playlist!` }); } 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({ error: 'خطأ داخلي في الخادم', details: err.message }); }); // ابدأ تشغيل الخادم server.listen(PORT, () => { console.log(`🚀 Server running on http://localhost:${PORT}`); });

شرح المفاهيم الأساسية للخادم:

Middleware – وظائف تعالج الطلبات قبل وصولها إلى معالجات المسار الخاصة بك. يقوم express.json() بتحليل JSON من نصوص الطلب، ويتحقق auth من رموز JWT.
async/await – صيغة JavaScript حديثة للتعامل مع العمليات غير المتزامنة (مثل استعلامات قاعدة البيانات). await يُوقف التنفيذ مؤقتًا حتى يتم تنفيذ الوعد.
رموز حالة HTTP - أرقام تشير إلى النتيجة: 200 = نجاح، 201 = إنشاء، 400 = طلب خاطئ، 401 = غير مُصرَّح به، 404 = لم يتم العثور عليه، 500 = خطأ في الخادم.
أحداث Socket.io - رسائل مُسمّاة تنتقل بين العميل والخادم. socket.on() يستمع للأحداث، وsocket.emit() يُرسل الأحداث.
JWT (رمز ويب JSON) - طريقة آمنة لتحديد هوية المستخدمين. عند تسجيل دخولهم، نُعطيهم رمزًا. يرسلون هذا الرمز مع كل طلب لإثبات هويتهم.

الخطوة 5: تحديث JavaScript في الواجهة الأمامية (public/js/app.js)

وأخيرًا، دعنا نضيف JavaScript الذي يجعل واجهتنا الأمامية تفاعلية. يعمل هذا الكود في متصفح المستخدم ويتعامل مع أشياء مثل نقرات الأزرار وطلبات واجهة برمجة التطبيقات والتحديثات في الوقت الفعلي.

ما يفعله هذا JavaScript:

إدارة المصادقة - تسجيل الدخول والتسجيل وتسجيل الخروج وتخزين الرمز
تهيئة Socket.io - الاتصال بالخادم والاستماع إلى الأحداث في الوقت الفعلي
إجراء طلبات واجهة برمجة التطبيقات - استخدام fetch() للتواصل مع نقاط نهاية الخادم
تحديث واجهة المستخدم - إنشاء عناصر HTML ديناميكيًا بناءً على البيانات من الخادم
التعامل مع تفاعلات المستخدم - نقرات الأزرار وإرسال النماذج وما إلى ذلك.

استبدل public/js/app.js بالكود الكامل الموضح في البرنامج التعليمي...

(يتبع كود app.js نفس الخطوات السابقة، مع جميع وظائف تسجيل الدخول، والتسجيل، وتحميل قوائم التشغيل المشتركة، إلخ.)

الخطوة 6: اختبار واجهة برمجة تطبيقات الموسيقى الاجتماعية

الآن حان وقت اختبار كل شيء! اتبع هذه الخطوات بعناية:

شغّل الخادم: في الطرفية، شغّل الأمر npm start. ستظهر لك رسالتان مثل "MongoDB متصل!" و"Server running on http://localhost:3000".
افتح نافذتي متصفح: افتح http://localhost:3000 في نافذتي متصفح منفصلتين (أو نافذة عادية ونافذة تصفح متخفي). يُحاكي هذا مستخدمين مختلفين.
تسجيل المستخدم 1: في النافذة الأولى، انقر على "تسجيل" وأنشئ مستخدمًا (مثلًا، اسم المستخدم: "alice").
تسجيل المستخدم 2: في النافذة الثانية، أنشئ مستخدمًا آخر (مثلًا، اسم المستخدم: "bob").
إضافة بعضكما البعض كأصدقاء: في نافذة أليس، اكتب "bob" في حقل "إضافة صديق" وانقر على "إضافة صديق". كرر الأمر نفسه في نافذة بوب (اكتب "alice"). يجب أن يظهر كل منكما في قائمة أصدقائكما!
مشاركة قائمة تشغيل: في نافذة أليس، اكتب شيئًا مثل "أشعر بسعادة غامرة اليوم!" في مربع نص الحالة المزاجية. حدد مربع الاختيار "مشاركة مع الأصدقاء"، ثم انقر على "إنشاء قائمة تشغيل".
شاهد السحر يحدث:
- إذا كان بوب متصلاً بالإنترنت (النافذة لا تزال مفتوحة)، فسيرى إشعارًا ينزلق من اليمين!
- يجب أن يرى بوب أيضًا قائمة تشغيل أليس المشتركة تظهر في قسم "الأنشطة الأخيرة".
- يمكن لبوب النقر على قائمة التشغيل المشتركة لعرض القائمة الكاملة للأغاني.
- إذا سجل بوب خروجه ثم سجل دخوله مرة أخرى لاحقًا، فستظل قائمة التشغيل المشتركة موجودة!

فهم كيفية عمل كل شيء معًا

لنتتبع ما يحدث عندما تشارك أليس قائمة تشغيل مع بوب:

تحدد أليس "مشاركة مع الأصدقاء" وتنقر على "إنشاء قائمة تشغيل"
الواجهة الأمامية ترسل طلب POST إلى /api/personalized-playlist مع shareWithFriends: true
الخادم يحلل مزاج أليس وينشئ قائمة تشغيل باستخدام واجهة برمجة تطبيقات Spotify
الخادم يحفظ قائمة التشغيل في مصفوفة moodHistory الخاصة بأليس
الخادم يتنقل بين أصدقاء أليس (بما في ذلك بوب) ويضيف قائمة التشغيل إلى مصفوفة sharedPlaylists الخاصة بكل صديق في MongoDB
الواجهة الأمامية تُصدر حدث share_playlist Socket.io لإعلام الأصدقاء المتصلين بالإنترنت
يستقبل الخادم الحدث ويتحقق مما إذا كان بوب متصلاً بالإنترنت (يبحث في خريطة connectedUsers)
إذا كان بوب متصلاً بالإنترنت، يرسل الخادم إليه حدث friend_shared_playlist مع معاينة قائمة التشغيل
يستقبل متصفح بوب الحدث ويستدعي showNotification() لعرض نافذة منبثقة
يستدعي متصفح بوب أيضًا loadSharedPlaylists() لتحديث موجز النشاط

إذا كان بوب غير متصل بالإنترنت، فسيشاهد قائمة التشغيل في موجز نشاطه عند تسجيل الدخول في المرة التالية (لأنها محفوظة في sharedPlaylists الخاصة به (array)

ما أنجزته

تهانينا! لقد نجحت في بناء تطبيق موسيقى اجتماعي متكامل الميزات! إليك ما أنجزته:

🤝 نظام الأصدقاء - يمكن للمستخدمين إضافة أصدقاء باستخدام اسم المستخدم. الصداقات متبادلة (يصبح كلا المستخدمين صديقين لبعضهما البعض) وتُحفظ كمراجع ObjectId في MongoDB.

💾 مشاركة قوائم التشغيل بشكل مستمر - تُحفظ قوائم التشغيل المشتركة في قاعدة البيانات في مصفوفة sharedPlaylists الخاصة بكل صديق. هذا يعني أن البيانات تبقى حتى بعد تسجيل خروج المستخدمين.

📡 إشعارات فورية - باستخدام Socket.io، يتلقى المستخدمون المتصلون بالإنترنت إشعارات فورية عند مشاركة الأصدقاء لقوائم التشغيل. لا حاجة لتحديث الصفحة!

📰 موجز الأنشطة - يمكن للمستخدمين رؤية قوائم التشغيل المشتركة الأخيرة لجميع أصدقائهم، مرتبة حسب الأحدث أولاً. عند النقر على قائمة تشغيل، ستظهر قائمة الأغاني كاملةً.

🔐 مصادقة آمنة - يتم تشفير كلمات المرور باستخدام bcrypt (لا تُخزَّن كنص عادي)، وتُستخدم رموز JWT لمصادقة طلبات واجهة برمجة التطبيقات.

⏱️ مناسب للاستخدام دون اتصال بالإنترنت - يمكن للأصدقاء مشاهدة قوائم التشغيل المشتركة حتى لو لم يكونوا متصلين بالإنترنت عند مشاركتها. تم حفظ كل شيء في قاعدة البيانات!

المفاهيم الرئيسية التي تعلمتها

التواصل في الوقت الفعلي مع Socket.io (WebSockets)

علاقات قاعدة البيانات باستخدام مراجع MongoDB ObjectId

إلغاء التطبيع لتحسين الأداء (تخزين كل من ObjectId واسم المستخدم)

تصميم واجهة برمجة تطبيقات RESTful (نقاط نهاية GET وPOST مع رموز حالة HTTP الصحيحة)

نمط الوسيط للمصادقة ومعالجة الطلبات

Async/await للتعامل مع العمليات غير المتزامنة

معالجة DOM لتحديث واجهة المستخدم ديناميكيًا

الهندسة المعمارية الموجهة بالأحداث مع أحداث Socket.io

استكشاف الأخطاء وإصلاحها

"تعذر الاتصال بـ MongoDB" - تأكد من تشغيل خادم MongoDB وأن MONGODB_URI في .env صحيح.

"بيانات اعتماد غير صالحة" عند تسجيل الدخول - تحقق جيدًا من اسم المستخدم وكلمة المرور. تذكر أنهما حساسان لحالة الأحرف!

"لم يتم العثور على المستخدم" عند إضافة صديق - تأكد من كتابة اسم المستخدم الصحيح (حساس لحالة الأحرف). يجب أن يكون قد سجل أولاً.

قوائم التشغيل المشتركة لا تظهر - تحقق من وحدة تحكم المتصفح (F12) بحثًا عن أخطاء. تأكد من أن كلا المستخدمين صديقان وأن مربع الاختيار "مشاركة مع الأصدقاء" مُفعّل.

الإشعارات الفورية لا تعمل - تأكد من اتصال Socket.io. تحقق من لوحة تحكم المتصفح بحثًا عن "🔗 متصل بالخادم".

الخطوات التالية والأفكار للتوسع

الآن وقد أصبح لديك تطبيق موسيقى اجتماعي يعمل، إليك بعض الأفكار لتطويره:

طلبات الصداقة - بدلًا من الصداقة الفورية، اطلب من المستخدمين إرسال طلبات قابلة للقبول أو الرفض.

المراسلة الخاصة - أضف نظام دردشة باستخدام Socket.io ليتمكن الأصدقاء من مراسلة بعضهم البعض.

تعليقات قوائم التشغيل - اسمح للمستخدمين بالتعليق على قوائم التشغيل المشتركة.

الإعجاب/عدم الإعجاب بالمقاطع الصوتية - أضف أزرار الإعجاب/عدم الإعجاب لكل مقطع صوتي في قائمة التشغيل.

توافق الأذواق الموسيقية - احسب نسبة مئوية بناءً على مدى تشابه تفضيلات الموسيقى لدى مستخدمين.

البحث عن المستخدمين - أضف ميزة بحث للعثور على المستخدمين حسب اسم المستخدم.

حذف/إلغاء الصداقة - إضافة إمكانية إزالة الأصدقاء أو حذف قوائم التشغيل المشتركة

صفحات الملف الشخصي - عرض إحصائيات المستخدم، والحالات المزاجية المفضلة، وقوائم التشغيل الحديثة

قوائم التشغيل التعاونية - السماح لعدة أصدقاء بإضافة مسارات إلى قائمة تشغيل مشتركة

سجل قوائم التشغيل - عرض جميع قوائم التشغيل التي أنشأتها سابقًا

لقد أنشأت تطبيقًا موسيقيًا اجتماعيًا متكاملًا بميزات فورية وتخزين دائم للبيانات! هذا أساس متين لفهم تطوير الويب الحديث. استمر في التجربة والبناء!🎵✨