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

مصادقة المستخدم التي تعمل بالفعل (لا توجد مشاكل OAuth معقدة)
لوحة معلومات سجل الحالة المزاجية مع تحليلات رائعة
تفضيلات قائمة التشغيل الذكية التي تتعلم من سلوك المستخدم
توصيات مخصصة تتحسن بمرور الوقت
استمرار البيانات حتى لا يفقد المستخدمون رحلتهم الموسيقية أبدًا

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

ما ستحتاج إليه

واجهة برمجة تطبيقات Mind-Reading Music المكتملة من السابق
دورة تعليمية
30 دقيقة من وقت الترميز المركّز
حساب MongoDB Atlas (الطبقة المجانية تعمل بشكل مثالي)
فهم أساسي لقواعد البيانات (سنبقيها بسيطة!)

إعداد مصادقة المستخدم (الطريقة السهلة)

أولاً، دعنا نضيف الحزم التي نحتاجها لإدارة المستخدمين.

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

npm install mongoose bcryptjs jsonwebtoken express-session connect-mongo

الخطوة 1: إعداد اتصال قاعدة البيانات

بمجرد اكتمال التثبيت، أنشئ ملفًا جديدًا يسمى database.js وأضف التعليمات البرمجية التالية:

const mongoose = require('mongoose'); const connectDB = async () => { try { console.log('🔗 الاتصال بـ MongoDB...'); انتظر mongoose.connect(process.env.MONGODB_URI، { useNewUrlParser: true، useUnifiedTopology: true، }); console.log('✅ تم توصيل MongoDB بنجاح!'); } catch (خطأ) { console.error('❌ فشل اتصال MongoDB:'، error.message)؛ process.exit(1)؛ } }; module.exports = connectDB;

واحفظ الملف باستخدام cmd + s أو ctrl + s أو file ثم احفظ.

أنشئ حساب MongoDB Atlas الخاص بك

تفضل بزيارة: mongodb.com/cloud/atlas
انقر على: زر "ابدأ" (عادةً في الزاوية اليمنى العليا)

خيارات التسجيل

لديك ثلاث طرق لإنشاء حساب:

الخيار أ: التسجيل عبر البريد الإلكتروني

انقر على "التسجيل باستخدام البريد الإلكتروني"
أدخل عنوان بريدك الإلكتروني
أنشئ كلمة مرور قوية
انقر على "إنشاء حساب Atlas"

الخيار ب: التسجيل عبر جوجل

انقر على "التسجيل باستخدام جوجل"
اختر حساب جوجل الخاص بك
امنح الأذونات اللازمة

الخيار ج: التسجيل في GitHub

انقر على "التسجيل باستخدام GitHub"
تفويض MongoDB Atlas للوصول إلى حساب GitHub الخاص بك

التحقق من بريدك الإلكتروني

تحقق من صندوق الوارد في بريدك الإلكتروني
انقر على رابط التحقق من MongoDB
هذا يؤكد أن حسابك حقيقي

أنشئ أول مجموعة قواعد بيانات لديك

إذا لم تتمكن من رؤية لوحة التحكم الخاصة بك بعد تسجيل الدخول، فقد تضطر إلى النقر فوق اسمك في الزاوية العلوية اليمنى لفتح القائمة المنسدلة التالية والنقر فوق Atlas:

ستظهر لك بعد ذلك لوحة معلومات Atlas. حان وقت إنشاء قاعدة البيانات الخاصة بك!

اختر نوع النشر

انقر على "المجموعات" أسفل "قاعدة البيانات" من الشريط الجانبي الأيسر

انقر على "إنشاء مجموعة"

اختر "مجاني"

سيتم إعادة توجيهك إلى صفحة نشر مجموعة قواعد البيانات، وترغب في اختيار الخطة المجانية.

اختيار موفر السحابة: سترى ثلاثة خيارات للموفر:

AWS (خدمات الويب من أمازون) ⭐ موصى به
منصة جوجل السحابية
مايكروسوفت أزور

اختر: AWS (إنها الأكثر شيوعًا ولديها (أغلب المناطق)

اختيار المنطقة: بعد تحديد AWS، سترى قائمة منسدلة تحتوي على العديد من المناطق. اختر الأقرب إلى موقعك للحصول على أداء أفضل:

🇺🇸 الولايات المتحدة:

us-east-1 (شمال فرجينيا) - الساحل الشرقي
us-west-2 (أوريغون) - الساحل الغربي
us-central-1 (أيوا) - وسط

🇪🇺 أوروبا:

eu-west-1 (أيرلندا) - أوروبا الغربية
eu-central-1 (فرانكفورت) - أوروبا الوسطى
eu-west-2 (لندن) - المملكة المتحدة

🌏 آسيا والمحيط الهادئ:

ap-southeast-1 (سنغافورة) - جنوب شرق آسيا
ap-south-1 (مومباي) - الهند
ap-northeast-1 (طوكيو) - اليابان

💡 نصيحة احترافية: إذا لم تكن متأكدًا، فإن us-east-1 عادةً ما يكون الخيار الأكثر أمانًا مع معظم الميزات.

ثم انقر فوق زر "إنشاء نشر"

إنشاء مستخدم قاعدة البيانات

الخطوة 3.1: إضافة مستخدم قاعدة البيانات

ستظهر لك شاشة "البدء السريع للأمان"
طريقة المصادقة: أبقِ "اسم المستخدم وكلمة المرور" محددين
اسم المستخدم: أدخل اسم مستخدم (مثلًا، mood-music-user)
كلمة المرور:
- خيار أ: انقر على "إنشاء كلمة مرور آمنة تلقائيًا" (موصى به)

انسخ كلمة المرور فورًا! ستحتاجها لسلسلة الاتصال الخاصة بك

⚠️ انسخ كلمة مرورك واحفظها فورًا!

انقر: "إنشاء مستخدم قاعدة البيانات"

انقر: "اختيار طريقة اتصال"

اختر طريقة الاتصال

ستظهر لك عدة خيارات اتصال:

برامج التشغيل 👈 هذا ما نريده لتطبيقات Node.js

Compass (تطبيق واجهة المستخدم الرسومية لسطح مكتب MongoDB)

Shell (واجهة سطر أوامر MongoDB)

MongoDB لـ VS Code (امتداد VS Code)

Atlas SQL (واجهة SQL لـ MongoDB)

حدد: "برامج التشغيل" - سيمنحك هذا سلسلة الاتصال لتطبيقات مثل Node.js

تكوين اتصال برنامج التشغيل

بعد تحديد "برامج التشغيل":

برنامج التشغيل: حدد "Node.js" من القائمة المنسدلة

الإصدار: حدد إصدار Node.js الخاص بك أو اتركه افتراضيًا (عادةً ما يعمل بشكل جيد)

سلسلة الاتصال: سترى سلسلة الاتصال تظهر أدناه

انسخ سلسلة الاتصال الخاصة بك

سترى شيئًا مثل هذا:

mongodb+srv://<username>:<password>@cluster0.abc123.mongodb.net/?retryWrites=true&w=majority

هام: هذا قالب! يجب عليك:

استبدال <username> باسم مستخدم قاعدة البيانات لديك

استبدال <password> بكلمة مرور قاعدة البيانات لديك

إضافة اسم قاعدة البيانات بعد .net/

مثال على التحويل

قبل (القالب):

mongodb+srv://<username>:<password>@cluster0.abc123.mongodb.net/?retryWrites=true&w=majority

بعد (جاهز للاستخدام):

mongodb+srv://mood-music-user:MySecurePassword123@cluster0.abc123.mongodb.net/mood-music-db?retryWrites=true&w=majority

ملاحظة:

<username> → mood-music-user

<password> → MySecurePassword123

تمت إضافة /mood-music-db كاسم لقاعدة البيانات

انقر فوق 'تم'

الخطوة 5: إضافة سلسلة اتصال إلى مشروعك

تحديث ملف .env

افتح ملف .env وأضف:

MONGODB_URI=mongodb+srv://mood-music-user:MySecurePassword123@cluster0.abc123.mongodb.net/mood-music-db?retryWrites=true&w=majority JWT_SECRET=your-super-secret-jwt-key-here-make-it-long-and-random SESSION_SECRET=another-secret-key-for-sessions-also-long-and-random

إنشاء أسرار قوية

بالنسبة إلى JWT_SECRET وSESSION_SECRET، تحتاج إلى سلاسل عشوائية لا تؤدي إلى كسر تكوينك الملفات.

⚠️ هام: تجنب الأحرف الخاصة مثل @ و # و $ و % و / و ? في كلمات المرور لأنها قد تؤدي إلى كسر سلاسل الاتصال وملفات JSON.

الخيار أ: مولد بسيط عبر الإنترنت (مستحسن)

قم بزيارة: JWTSECRETS

الإعدادات:

عدد كلمات المرور: 1

طول كلمة المرور: 32

✅ حدد "الأحرف الكبيرة (A-Z)"

✅ حدد "الأحرف الصغيرة (a-z)"

✅ حدد "الأرقام (0-9)"

❌ قم بإلغاء تحديد "علامات الترقيم"

انقر فوق "الحصول على كلمات المرور"

الخيار ب: استخدم وحدة تحكم المتصفح (سهل للغاية!)

افتح أي موقع ويب (مثل google.com)

اضغط على F12 (أو انقر بزر الماوس الأيمن → فحص)

انقر فوق علامة التبويب "وحدة التحكم"

الصق هذا الرمز واضغط على Enter:
Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2)

انسخ النتيجة - ستكون شيئًا مثل: k8m9x2n7p4q1w3e5r6t8y9u2i4o7p1a5s3d6f8g2h4j7k9l

الخيار ج: الطريقة اليدوية (إذا فشلت كل الطرق الأخرى)

اكتب سلسلة عشوائية طويلة باستخدام:

الحروف: A-Z, a-z

الأرقام: 0-9

مثال: MyApp2024SecretKey789RandomString456Auth

مثال .env النهائي

SPOTIFY_CLIENT_ID=your_spotify_client_id_here SPOTIFY_CLIENT_SECRET=your_spotify_client_secret_here MONGODB_URI=mongodb+srv://mood-music-user:MySecurePassword123@cluster0.abc123.mongodb.net/mood-music-db?retryWrites=true&w=majority JWT_SECRET=A8f2K9mP3qR7sT1vW5yX8bC4eN6jL2oU9iH7gF3dS6aZ1mQ4wE8rT5yU2pI9oL SESSION_SECRET=B7gT3mK9pL2sF6vW1yX4eR8aC5qN9jM7oU3iH6dG2fS8aZ4mQ1wE5rT7yU9pI3oL PORT=3000

النقاط الرئيسية:

✅ لا توجد أحرف خاصة في JWT_SECRET وSESSION_SECRET

✅ كلمة مرور MongoDB تتجنب الأحرف التي قد تؤدي إلى كسر عناوين URL

✅ جميع الأسرار طويلة وعشوائية

✅ آمن للاستخدام في ملفات JSON وسلاسل الاتصال

الخطوة 2: نموذج المستخدم مع تتبع الحالة المزاجية

أنشئ مجلدًا باسم models وأضف ملفًا باسم User.js داخل المجلد. ثم أضف الكود التالي واحفظه في الملف:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); const moodEntrySchema = new mongoose.Schema({ النص: سلسلة، تم اكتشاف الحالة المزاجية: سلسلة، الثقة: رقم، قائمة التشغيل المولدة: [{ اسم المسار: سلسلة، الفنان: سلسلة، معرف Spotify: سلسلة، الإعجاب: { النوع: منطقي، الافتراضي: لا شيء } }]، الطابع الزمني: { النوع: التاريخ، الافتراضي: 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 userSchema = new mongoose.Schema({ اسم المستخدم: { النوع: سلسلة، مطلوب: صحيح، فريد: صحيح، تقليم: صحيح، الحد الأدنى للطول: 3 }، البريد الإلكتروني: { النوع: سلسلة، مطلوب: صحيح، فريد: صحيح، أحرف صغيرة: صحيح }، كلمة المرور: { النوع: سلسلة، مطلوب: صحيح، الحد الأدنى للطول: 6 }، تاريخ المزاج: [moodEntrySchema]، التفضيلات: { النوع: مخطط تفضيلات المستخدم، الافتراضي: () => ({}) }، الإحصائيات: { إجمالي قوائم التشغيل: { النوع: رقم، الافتراضي: 0 }، وقت المفضلة: سلسلة، المزاج الأكثر شيوعًا: سلسلة، تاريخ الانضمام: { النوع: التاريخ، الافتراضي: Date.now } } }، { الطوابع الزمنية: صحيح }); // تجزئة كلمة المرور قبل الحفظ userSchema.pre('حفظ', async function(next) { if (!this.isModified('password')) return next(); this.password = await bcrypt.hash(this.password, 12); next(); }); // قارن كلمات المرور userSchema.methods.comparePassword = async function(password) { return bcrypt.compare(password, this.password); }; // احسب إحصائيات المستخدم userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(entry => entry.detectedMood); this.stats.totalPlaylists = this.moodHistory.length; // ابحث عن الحالة المزاجية الأكثر شيوعًا const moodCounts = moods.reduce((acc, mood) => { acc[mood] = (acc[mood] || 0) + 1; return acc; }, {}); this.stats.mostCommonMood = Object.keys(moodCounts).reduce((a, b) => moodCounts[a] > moodCounts[b] ? a : b, 'neutral' ); // حدد الوقت المفضل من اليوم const hours = this.moodHistory.map(entry => entry.timestamp.getHours()); const avgHour = hours.reduce((a, b) => a + b, 0) / hours.length; if (avgHour < 6) this.stats.favoriteTime = 'night'; else if (avgHour < 12) this.stats.favoriteTime = 'morning'; else if (avgHour < 18) this.stats.favoriteTime = 'afternoon'; else this.stats.favoriteTime = 'evening'; }; module.exports = mongoose.model('User', userSchema);

الخطوة 3: مصادقة الوسيط

أنشئ مجلدًا باسم middleware وأضف ملفًا باسم auth.js بداخله. ثم أضف الكود التالي إلى الملف واحفظه:

const jwt = require('jsonwebtoken'); const User = require('../models/User'); const auth = async (req, res, next) => { try { const token = req.header('Authorization')?.replace('Bearer ', '') || req.session.token; if (!token) { return res.status(401).json({ error: 'No token provided' }); } const decoded = jwt.verify(token, process.env.JWT_SECRET); const user = await User.findById(decoded.userId); if (!user) { return res.status(401).json({ error: 'User not found' }); } req.user = user; next(); } catch (error) { res.status(401).json({ error: 'Invalid token' }); } }; module.exports = auth;

لوحة معلومات المستخدم مع تحليلات جميلة

أنشئ مجلدًا جديدًا في مشروعك وأطلق عليه اسم public ثم أضف ملفًا داخل هذا المجلد وأطلق عليه اسم index.html:

<!DOCTYPE html> <html> <head> <title>Mind-Reading Music API - لوحة معلومات شخصية</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', system-ui, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); الحد الأدنى للارتفاع: 100 سم؛ اللون: #333؛ } .dashboard { الحد الأقصى للعرض: 1200 بكسل؛ الهامش: 0 تلقائي؛ الحشو: 20 بكسل؛ } .header { الخلفية: rgba(255,255,255,0.95)؛ مرشح الخلفية: طمس (10 بكسل)؛ نصف قطر الحدود: 20 بكسل؛ الحشو: 30 بكسل؛ الهامش السفلي: 30 بكسل؛ محاذاة النص: مركز؛ ظل الصندوق: 0 8 بكسل 32 بكسل rgba(0,0,0,0.1)؛ } .stats-grid { العرض: الشبكة؛ أعمدة قالب الشبكة: التكرار (الملاءمة التلقائية، الحد الأدنى الأقصى (250 بكسل، 1 قدم))؛ الفجوة: 20 بكسل؛ الهامش السفلي: 30 بكسل؛ } .stat-card { الخلفية: rgba(255,255,255,0.9); نصف قطر الحدود: 15 بكسل; الحشو: 25 بكسل; محاذاة النص: المركز; ظل الصندوق: 0 4 بكسل 15 بكسل rgba(0,0,0,0.1); } .mood-input-section { الخلفية: rgba(255,255,255,0.95); نصف قطر الحدود: 20 بكسل; الحشو: 30 بكسل; الهامش السفلي: 30 بكسل; } .mood-history { الخلفية: rgba(255,255,255,0.95); نصف قطر الحدود: 20 بكسل; الحشو: 30 بكسل; } .history-item { الخلفية: #f8f9fa; نصف قطر الحدود: 10 بكسل; الحشو: 15 بكسل; الهامش السفلي: 15 بكسل; border-left: 4px solid #667eea; } .login-section, .register-section { الخلفية: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; max-width: 400px; margin: 50px auto; } الإدخال، منطقة النص، الزر { العرض: 100%؛ padding: 12px; margin: 10px 0؛ border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; } الزر { الخلفية: linear-gradient(135deg, #667eea, #764ba2); اللون: أبيض؛ border: none؛ المؤشر: pointer؛ font-weight: 600; } الزر: hover { التحويل: translateY(-2px); } </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()">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="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="stats-grid"> <div class="stat-card"> <h3>📊 إجمالي قوائم التشغيل</h3> <div id="totalPlaylists" class="stat-number">0</div&</div> <div class="stat-card"> <h3>😊 الحالة المزاجية المفضلة</h3> <div id="favoriteMood" class="stat-text">-</div> </div> <div class="stat-card"> <h3>🕐 أفضل وقت</h3> <div id="bestTime" class="stat-text">-</div> </div> <div class="stat-card"> <h3>🎵 Top Genre</h3> <div id="topGenre" class="stat-text">-</div> </div> </div> </div> <div class="mood-input-section"> <h2>💭 كيف تشعر الآن؟</h2> <textarea id="moodText" placeholder="صف حالتك المزاجية الحالية، أو ما يحدث، أو كيف تريد أن تشعر..."></textarea> <button onclick="generatePersonalizedPlaylist()">🎧 أنشئ قائمة التشغيل المثالية الخاصة بي</button> <div id="result" style="display:none;" class="result"></div> </div> <div class="mood-history"> <h2>📈 رحلة مزاجك</h2> <div id="historyContainer"></div> </div> </div> </div> </div> <script src="/js/app.js"></script> </body> </html>

الآن داخل مجلد public الخاص بك، قم بإنشاء مجلد وأطلق عليه اسم js وقم بإنشاء ملف app.js داخل مجلد js باستخدام الكود التالي:

let authToken = localStorage.getItem('authToken'); let currentUser = null; if (authToken) { loadDashboard(); } function showLogin() { document.querySelector('.login-section').style.display = 'block'; document.getElementById('registerSection').style.display = 'none'; } function showRegister() { document.querySelector('.login-section').style.display = 'none'; document.getElementById('registerSection').style.display = 'block'; } دالة async login() { const username = document.getElementById('loginUsername').value; const password = document.getElementById('loginPassword').value; if (!username || !password) { alert('الرجاء ملء جميع الحقول'); return; } try { const response = await fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) }); const data = await response.json(); if (response.ok) { authToken = data.token; localStorage.setItem('authToken', authToken); loadDashboard(); } else { alert(data.error || 'فشل تسجيل الدخول'); } } catch (error) { console.error('خطأ تسجيل الدخول:', error); alert('فشل تسجيل الدخول. يُرجى المحاولة مرة أخرى.'); } } async function register() { const username = document.getElementById('regUsername').value; const email = document.getElementById('regEmail').value; const password = document.getElementById('regPassword').value; if (!username || !email || !password) { alert('يرجى ملء جميع الحقول'); return; } try { const response = await fetch('/api/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, email, password }) }); const data = await response.json(); if (response.ok) { alert('تم إنشاء الحساب بنجاح! يُرجى تسجيل الدخول.'); showLogin(); } else { alert(data.error || 'فشل التسجيل'); } } catch (error) { console.error('خطأ في التسجيل:', error); alert('فشل التسجيل. يُرجى المحاولة مرة أخرى.'); } } async function loadDashboard() { try { const response = await fetch('/api/profile', { headers: { 'Authorization': 'Bearer ' + authToken } }); if (response.ok) { currentUser = await response.json(); showDashboard(); updateStats(); loadMoodHistory(); } else { logout(); } } catch (error) { console.error('خطأ في تحميل لوحة المعلومات:', error); logout(); } } دالة showDashboard() { document.getElementById('authSection').style.display = 'لا شيء'; document.getElementById('dashboardSection').style.display = 'block'; document.getElementById('اسم المستخدم').textContent = اسم المستخدم الحالي; } دالة updateStats() { document.getElementById('إجمالي قوائم التشغيل').textContent = المستخدم الحالي.stats.إجمالي قوائم التشغيل || 0; document.getElementById('favoriteMood').textContent = المستخدم الحالي.stats.mostCommonMood || '-'; document.getElementById('bestTime').textContent = المستخدم الحالي.stats.favoriteTime || '-'; document.getElementById('topGenre').textContent = (currentUser.preferences.favoriteGenres && currentUser.preferences.favoriteGenres[0]) || '-'; } دالة loadMoodHistory() { const historyContainer = document.getElementById('historyContainer'); if (!currentUser.moodHistory || currentUser.moodHistory.length === 0) { historyContainer.innerHTML = '<p>لا يوجد سجل للمزاج بعد. أنشئ قائمة التشغيل الأولى الخاصة بك!</p>'; return; } const recentHistory = currentUser.moodHistory.slice(-5).reverse(); historyContainer.innerHTML = recentHistory.map(entry => `<div class="history-item"> <strong>${entry.detectedMood}</strong> - ${new Date(entry.timestamp).toLocaleDateString()} <p>${entry.text}</p> <small>${entry.playlistGenerated.length} مسارات تم إنشاؤها</small> </div>` ).join(''); } دالة غير متزامنة generatePersonalizedPlaylist() { const moodText = document.getElementById('moodText').value; if (!moodText.trim()) { alert('الرجاء وصف شعورك!'); العودة؛ } حاول { استجابة ثابتة = انتظار جلب ('/api/قائمة تشغيل شخصية'، { الطريقة: 'نشر'، الرؤوس: { 'نوع المحتوى': 'التطبيق/json'، 'التفويض': 'حامل' + رمز التفويض }، الجسم: JSON.stringify ({ النص: moodText }) }); بيانات ثابتة = انتظار الاستجابة. json ()؛ إذا (response.ok) { عرض النتائج الشخصية (البيانات)؛ تحميل لوحة التحكم ()؛ } وإلا { تنبيه (data.error || 'فشل في إنشاء قائمة التشغيل')؛ } } التقاط (خطأ) { وحدة التحكم.خطأ ('خطأ في إنشاء قائمة التشغيل:'، خطأ)؛ تنبيه ('فشل في إنشاء قائمة التشغيل. يرجى المحاولة مرة أخرى.')؛ } } دالة عرض النتائج الشخصية (البيانات) { نتيجة ثابتة Div = document.getElementById ('النتيجة')؛ resultDiv.style.display = 'block'; const html = ` <h3>تم اكتشاف الحالة المزاجية: ${data.moodAnalysis.mood} (الثقة: ${data.moodAnalysis.confidence}/10)</h3> <p>${data.personalizedMessage || 'هذه قائمة التشغيل الخاصة بك!'}</p> <div class="playlist"> ${data.playlist.map(track => ` <div style="display: flex; align-items: center; margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 8px;"> ${track.album_image ? `<img src="${track.album_image}" alt="Album" style="width:50px;height:50px;border-radius:8px;margin-right:15px;">` : ''} <div style="flex: 1;"> <strong>${track.name}</strong><br> <span style="color: #666;">${track.artist}</span> </div> <div> <button onclick="likeTrack('${track.id}', true)" style="width:auto;padding:5px 10px;margin:0 5px;">👍</button> <button onclick="likeTrack('${track.id}', false)" style="width:auto;padding:5px 10px;margin:0 5px;">👎</button> </div> </div> `).join('')} </div> `; resultDiv.innerHTML = html; } دالة async likeTrack(trackId, liked) { try { await fetch('/api/track-feedback', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken }, body: JSON.stringify({ trackId: trackId, liked: liked }) }); alert(liked ? 'شكرًا! سنوصي بالمزيد من هذا.' : 'فهمت! سنتجنب المسارات المشابهة.'); } catch (error) { console.error('خطأ التعليقات:', error); } } function logout() { localStorage.removeItem('authToken'); authToken = null; currentUser = null; document.getElementById('authSection').style.display = 'block'; document.getElementById('dashboardSection').style.display = 'none'; showLogin();

استبدال ملف server.js الخاص بك

استبدل كود ملف server.js الخاص بك بما يلي:

require('dotenv').config(); const express = require('express'); 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'); // الاتصال بـ MongoDB const connectDB = async () => { حاول { console.log('🔗 الاتصال بـ MongoDB...'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, }); console.log('✅ تم الاتصال بـ MongoDB بنجاح!'); } catch (error) { console.error('❌ فشل اتصال MongoDB:', error.message); process.exit(1); } }; connectDB(); const app = express(); const PORT = process.env.PORT || 3000; const playlistGen = new PlaylistGenerator(); app.use(express.json()); app.use(express.static('public')); // تقديم الصفحة الرئيسية app.get('/', (req, res) => { res.sendFile(__dirname + '/public/index.html'); }); // تطبيق تسجيل المستخدم. 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 letters' }); } const existingUser = await User. findOne({ $or: {[ email }, { username }] }); if (existingUser) { return res.status(400).json({ error: 'User name or email already exist' }); } const user = new User({ username, email, كلمة المرور }); انتظار المستخدم.حفظ(); res.status(201).json({ رسالة: 'تم إنشاء المستخدم بنجاح' }); } catch (خطأ) { console.error('خطأ في التسجيل:', error); res.status(500).json({ خطأ: 'فشل التسجيل' }); } }); // تطبيق تسجيل دخول المستخدم. 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' }); } const token = jwt. sign( { userId: user._id }, process.env.JWT_SECRET, { expiresIn: '7d' }); res.json({ token, user: { username: user.username, email: user.email } }); } catch (error) { console.error('خطأ تسجيل الدخول:', error); res.status(500).json({ error: 'فشل تسجيل الدخول' }); } });// احصل على ملف تعريف المستخدم app.get('/api/profile', auth, async (req, res) => { try { req.user.updateStats(); await req.user.save(); res.json(req.user); } catch (error) { res.status(500).json({ error: 'فشل تحميل الملف الشخصي' }); } }); // تطبيق إنشاء قائمة تشغيل مخصصة. post('/api/personalized-playlist', auth, async (req, res) => { try { const { text, playlistSize = 15 } = req.body; if (!text) { return res.status(400).json({ error: 'من فضلك أخبرني كيف تشعر!' }); } const moodAnalysis = moodAnalyzer.analyzeMood(text); const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // حفظ في سجل المستخدم req.user.moodHistory.push({ text, detectedMood: moodAnalysis.mood, confident: moodAnalysis.confidence, playlistGenerated: playlist.map(track => ({ trackName: track.name, artist: track.artist, spotifyId: track.id })) }); req.user.updateStats(); await req.user.save(); res.json({ moodAnalysis, playlist, personalizeMessage: ``استنادًا إلى تاريخك، لقد صممت قائمة التشغيل هذه خصيصًا لمزاجك ${moodAnalysis.mood}!` }); } catch (error) { console.error('خطأ في قائمة التشغيل المخصصة:', error); res.status(500).json({ error: 'فشل في إنشاء قائمة تشغيل مخصصة. يُرجى المحاولة مرة أخرى.' }); } }); // تطبيق ملاحظات المسار. post('/api/track-feedback', auth, async (req, res) => { try { const { trackId, liked } = req.body; res.json({ message: 'تم استلام الملاحظات! سنعمل على تحسين التوصيات المستقبلية.' }); } catch (error) { console. error('خطأ في الملاحظات:', error); res. status(500). json({ error: 'فشل في معالجة الملاحظات' }); } }); app. listen(PORT, () => { console. log(`🚀 Mind-Reading Music API running on http://localhost:${PORT}`); console. log('🧠 جاهز لتحليل الحالة المزاجية وإنشاء قوائم التشغيل!'); });

ما يجب أن تكون قادرًا على فعله الآن

1. المستخدمون المجهولون (الوظيفة الأصلية)

قم بزيارة موقع الويب الخاص بك دون تسجيل الدخول

قم بإنشاء قوائم تشغيل باستخدام تحليل الحالة المزاجية الحالية لديك

احصل على توصيات موسيقية بناءً على المشاعر

2. المستخدمون المسجلون (ميزات جديدة)

أنشئ حسابًا وسجل الدخول

أنشئ قوائم تشغيل مخصصة تتحسن بمرور الوقت

عرض سجل الحالة المزاجية والتحليلات الشخصية

أعجب/لم يعجبني المسارات لتدريب الذكاء الاصطناعي

شاهد إحصائيات مثل الحالة المزاجية المفضلة وقوائم التشغيل الإجمالية وما إلى ذلك.

دليل الاختبار خطوة بخطوة

الاختبار 1: تحقق من بدء تشغيل الخادم

node server.js

يجب أن ترى:

🔑 محاولة مصادقة Spotify... 🎵 تم الاتصال بـ Spotify بنجاح! 🔗 تم الاتصال بـ MongoDB... ✅ تم الاتصال بـ MongoDB بنجاح! 🚀 واجهة برمجة تطبيقات موسيقى قراءة الأفكار تعمل على http://localhost:3000 🧠 هل أنت مستعد لتحليل مزاجك وإنشاء قوائم تشغيل؟

الاختبار الثاني: تفضل بزيارة موقعك الإلكتروني

انتقل إلى: http://localhost:3000

ما يجب أن تراه:

نموذج تسجيل دخول يطلب اسم المستخدم/كلمة المرور

رابط "ليس لديك حساب؟ سجل الآن"

الاختبار الثالث: أنشئ حسابك الأول

انقر: "ليس لديك حساب؟ سجل الآن"

املأ:

اسم المستخدم: testuser

البريد الإلكتروني: test@example.com

كلمة المرور: password123

انقر: "إنشاء حساب"

النتيجة المتوقعة: "تم إنشاء الحساب بنجاح! يُرجى تسجيل الدخول."

الاختبار 4: تسجيل الدخول إلى لوحة التحكم

استخدم بيانات الاعتماد التي أنشأتها للتو

انقر: "تسجيل الدخول"

يجب أن ترى:

رسالة ترحيب باسم المستخدم الخاص بك

بطاقات الإحصائيات تُظهر 0 قوائم تشغيل، ولا يوجد مزاج مفضل حتى الآن

مساحة نصية تسأل "كيف حالك الآن؟"

الاختبار 5: أنشئ أول بطاقة شخصية لك قائمة التشغيل

اكتب شيئًا مثل: "أنا متحمس جدًا لمشروعي الجديد!"

انقر فوق: "إنشاء قائمة التشغيل المثالية"

يجب أن ترى:

الحالة المزاجية المكتشفة (ربما "نشطة" أو "سعيد")

قائمة الأغاني مع غلاف الألبوم

معاينة مشغلات الصوت (إن وجدت)

أزرار الإبهام لأعلى/لأسفل لكل أغنية

الاختبار 6: اختبار نظام التعلم

انقر فوق الإبهام لأعلى 👍 على الأغاني التي تعجبك

انقر فوق الإبهام لأسفل 👎 على الأغاني التي لا تعجبك

المتوقع: رسائل تنبيه تقول "شكرًا! سنوصي بالمزيد من هذا القبيل"

الاختبار 7: تحقق من تحديث الإحصائيات الخاصة بك

تحديث الصفحة أو إنشاء قائمة تشغيل أخرى

يجب أن تظهر إحصائياتك الآن:

إجمالي قوائم التشغيل: 1 (أو أكثر)

الحالة المزاجية المفضلة: أيًا كانت الحالة المزاجية التي تم اكتشافها

يجب أن تبدأ الإحصائيات الأخرى في الظهور

اختبار سيناريوهات مختلفة

جرب حالات مزاجية مختلفة:

"لقد انفصلت للتو عن صديقتي والآن تمطر" (يجب أن يكتشف: حزين)

"أنا متحمس لجلسة التمرين الخاصة بي!" (يجب الكشف عن: نشيط)

"أريد فقط الاسترخاء والدراسة بهدوء" (يجب الكشف عن: هادئ)

"أشعر بالرومانسية في هذه الليلة" (يجب الكشف عن: رومانسي)

اختبار الحالات الحدية:

"" (فارغ - يجب أن يظهر خطأ)

"نص عشوائي asdf" (يجب أن يكون افتراضيًا محايدًا/هادئًا)

"أنا متحمس للغاية!!!" (يجب الكشف عن ثقة أعلى)

المشكلات الشائعة والحلول السريعة

❌ "فشل اتصال MongoDB"

التحقق: هل تم إعداد ملف .env الخاص بك بشكل صحيح باستخدام سلسلة اتصال MongoDB؟

# قم بتشغيل هذا لاختبار اتصال قاعدة البيانات لديك node -e "require('dotenv').config(); console.log('MONGODB_URI:', process.env.MONGODB_URI ? 'Set ✅' : 'Missing ❌');"

❌ "فشل اتصال Spotify"

تحقق: هل مفاتيح واجهة برمجة تطبيقات Spotify الخاصة بك موجودة في ملف .env؟

# قم بتشغيل هذا للتحقق من بيانات اعتماد Spotify node -e "require('dotenv').config(); console.log('Spotify Client ID:', process.env.SPOTIFY_CLIENT_ID ? 'Set ✅' : 'Missing ❌');"

❌ تسجيل الدخول/التسجيل لا يعمل

تحقق: هل ترى أي رسائل خطأ في وحدة تحكم المتصفح؟

اضغط على F12 → علامة تبويب وحدة التحكم

ابحث عن رسائل خطأ حمراء

❌ الصفحة تُظهر الواجهة القديمة

الحل: تحديث الصفحة بشدة

اضغط على Ctrl+Shift+R (Windows/Linux)

اضغط على Cmd+Shift+R (Mac)

ما الذي يجب أن يعمل مقابل ما لا يزال أساسيًا

✅ يجب أن يعمل الآن:

تسجيل المستخدم وتسجيل الدخول

الكشف الأساسي عن الحالة المزاجية وإنشاء قائمة التشغيل

حفظ سجل الحالة المزاجية في قاعدة البيانات

ملاحظات بسيطة بالإعجاب/عدم الإعجاب

تتبع الإحصائيات (إجمالي قوائم التشغيل، الحالة المزاجية المفضلة)

🚧 لا يزال أساسيًا (ميزات متقدمة لاحقًا):

تعلم آلي معقد من ملاحظات المستخدم

ميزات التواصل الاجتماعي ومشاركة قوائم التشغيل

تحليلات متقدمة وأنماط الحالة المزاجية

واجهة تطبيق الهاتف المحمول

الخطوات التالية بعد الاختبار

بمجرد أن يعمل كل شيء:

جرب مع مستخدمين مختلفين - أنشئ حسابات متعددة لمعرفة مدى اختلاف التخصيص

إنشاء قوائم تشغيل متعددة - شاهد كيف تتطور إحصائياتك وتفضيلاتك

إعطاء ملاحظات على المسارات - شاهد كيف يتعلم النظام ذوقك

تحقق من لوحة معلومات MongoDB Atlas الخاصة بك - يجب أن ترى البيانات المخزنة

الخلاصة

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

إن الجمع بين اكتشاف الحالة المزاجية وتعلم المستخدم والتوصيات الشخصية يخلق تجربة تزداد سحرًا مع كل تفاعل. تصبح رحلة كل مستخدم فريدة، مما يخلق مسارًا صوتيًا شخصيًا لحياته العاطفية.

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

ما التالي؟

هل أنت مستعد للمضي قدمًا في هذا؟ إليك بعض الاتجاهات المثيرة:

التحليلات المتقدمة: أضف التعرف على نمط الحالة المزاجية والتوصيات التنبؤية

الميزات الاجتماعية: اسمح للمستخدمين بمشاركة قوائم التشغيل واكتشاف ذوق الموسيقى لدى الأصدقاء

تطبيق الهاتف المحمول: قم ببناء تطبيقات React Native أو Flutter لنظامي التشغيل iOS/Android

تكامل الصوت: أضف تحويل الكلام إلى نص لإدخال الحالة المزاجية بدون استخدام اليدين

التعلم الآلي: قم بتنفيذ التصفية التعاونية للحصول على توصيات أفضل

النشر: النشر على AWS/Vercel باستخدام متغيرات البيئة المناسبة

استمر في التجربة والبناء - مستقبل تجارب الذكاء الاصطناعي المخصصة بين يديك!

هل أنت مستعد للتحدي التالي؟ ترقب برنامجنا التعليمي القادم حول إضافة الميزات الاجتماعية والتصفية التعاونية إلى إنشاء شبكة اكتشاف موسيقى تربط الأشخاص من خلال التجارب العاطفية المشتركة.