music_player_website
تفاصيل العمل
تطبيق ويب لمشغل موسيقى مع تكامل Deezer ونظام استرجاع كلمة مرور آمن
قمت مؤخرًا بتطوير تطبيق ويب متكامل لمشغل موسيقى يجمع بين واجهة مستخدم أنيقة، تفاعل وسائط متقدم، مصادقة آمنة، وإدارة للأغاني في الوقت الفعلي. المشروع تم بناؤه بالكامل باستخدام HTML، CSS، Bootstrap، JavaScript، مع الاعتماد على التخزين المحلي والتخزين المؤقت للجلسة، إضافة إلى التكامل مع واجهة برمجة تطبيقات Deezer للحصول على محتوى موسيقي حي.
أهم الميزات
مشغل موسيقى تفاعلي
يحتوي التطبيق على مشغل صوت مخصص يمكن من خلاله تشغيل وإيقاف الموسيقى، الانتقال للأغنية التالية أو السابقة، شريط تقدم يعرض الوقت الحالي والوقت الإجمالي للأغنية، التحكم في مستوى الصوت، عرض قائمة تشغيل مبنية على التصنيفات والبحث، وحفظ الأغنية الحالية وموضع التشغيل حتى يتمكن المستخدم من المتابعة من حيث توقف.
فلترة وبحث ذكي
يوفر التطبيق إمكانية فلترة الأغاني حسب الفئة مثل الرومانسي، الشعبي والمهرجانات، مع إمكانية البحث المباشر عن الأغاني من خلال مطابقة العنوان، مع تمييز الأغنية المشغلة حاليًا في قائمة التشغيل.
تكامل مع Deezer API
يعتمد التطبيق على واجهة برمجة التطبيقات الخاصة بـ Deezer لجلب بيانات الأغاني مثل العنوان والفنان والملف الصوتي مباشرة بشكل ديناميكي. كما يتعامل مع الطلبات غير المتزامنة ويعرض المحتوى في الوقت الفعلي، مع تحسين بنية المشروع للفصل بين البيانات والكود الثابت.
نظام استرجاع كلمة مرور آمن
يوفر التطبيق تدفق كامل لاسترجاع كلمة المرور يبدأ بإدخال البريد الإلكتروني أو اسم المستخدم، ثم الإجابة على سؤال أمني مخصص، وأخيرًا إعادة التوجيه لشاشة إعادة تعيين كلمة المرور. يتم تجزئة كلمات المرور باستخدام SHA-256 مع إضافة salt قبل تخزينها في localStorage، ويتم استخدام sessionStorage لحفظ حالة الاسترجاع بشكل مؤقت وآمن.
إظهار وإخفاء كلمة المرور
يتيح التطبيق للمستخدمين إمكانية التبديل بين إظهار وإخفاء كلمة المرور عند إدخالها، لتسهيل عملية التحقق أثناء الكتابة.
واجهة متجاوبة وتجربة مستخدم سلسة
تم تصميم التطبيق ليعمل بسلاسة على مختلف الأجهزة والشاشات باستخدام media queries، مع الاعتماد على تأثيرات لونية وانتقالات سلسة وتحسينات بصرية لزيادة جاذبية تجربة المستخدم.
التقنيات والمفاهيم المستخدمة
HTML5 وCSS3
JavaScript (ES6)
التحكم في عنصر الصوت باستخدام Audio API
التخزين المحلي والتخزين المؤقت للجلسة
تجزئة كلمات المرور باستخدام خوارزمية SHA-256
التكامل مع Deezer API للحصول على البيانات الحية
SweetAlert2 لعرض التنبيهات
media queries لتوفير تصميم متجاوب
ما تعلمته
من خلال هذا المشروع اكتسبت خبرة عملية في إدارة جلسات المستخدم وتأمين كلمات المرور داخل المتصفح، والعمل مع واجهات برمجة تطبيقات خارجية ودمج البيانات الحية، بالإضافة إلى تحسين تجربة المستخدم عبر البحث، الفلترة، والحفاظ على الحالة بين الجلسات، إلى جانب تصميم واجهة حديثة ومتجاوبة بالكامل من البداية.