لوحة تحكم متكاملة لتتبع الإنجازات والمراحل

? الهدف من المشروع

كان الهدف من هذا المشروع هو بناء تطبيق ويب ديناميكي ومتجاوب، قادر على تتبع إنجازات المستخدم المعقدة وتحديثها بشكل فوري (Real-time). اخترت بناء لوحة لتتبع تقدم اللاعبين في ألعاب الفيديو (مثل Yakuza 0 و Sifu) كحالة استخدام عملية لإثبات قدرتي على بناء أنظمة إدارة بيانات كاملة (CRUD)، وتصميم واجهة برمجة تطبيقات (RESTful API) متطورة، وعرض البيانات على الواجهة الأمامية بسلاسة تامة.

?️ التقنيات المستخدمة (Tech Stack)

الواجهة الخلفية (Backend): Python, Flask, SQLite3

الواجهة الأمامية (Frontend): Vanilla JavaScript (ES6), HTML5, CSS3 (SCSS/Sass)

الاختبار البرمجي (Testing): Mocha, Chai (التطوير الموجه بالاختبار - TDD)

بيئة العمل وإدارة النسخ: Linux, Git

? التحدي

تتطلب تطبيقات الويب الحديثة تفاعلاً فورياً مع المستخدم دون الحاجة لإعادة تحميل الصفحة. كان التحدي الأساسي هو إدارة التحديثات غير المتزامنة (Asynchronous) في الواجهة الأمامية، مع ضمان سلامة البيانات بدقة ومنع التكرار في قاعدة البيانات.

على سبيل المثال: مدخلات المستخدمين غالباً ما تكون غير دقيقة؛ فإذا أدخل المستخدم كلمة "Sifu " (بمسافة إضافية) ثم أدخل لاحقاً " sifu"، فإن عملية الإدخال القياسية في قاعدة البيانات ستنشئ سجلين مختلفين ومكررين لنفس العنصر.

⚙️ الحل الفني

قمت بهندسة واجهة أمامية وخلفية منفصلتين تماماً تتواصلان عبر واجهة برمجة تطبيقات (API) مخصصة، مع تطبيق الخطوات التالية:

معالجة وتوحيد البيانات في الواجهة الخلفية (Data Normalization): قمت بتطبيق نظام صارم لتنظيف المدخلات عبر Flask. قبل تنفيذ أي استعلام في قاعدة البيانات، يعترض كود Python طلب الـ POST، ويزيل المسافات الزائدة، ويوحد حالة الأحرف (Case-insensitive) لضمان دقة وتطابق البيانات.

منطق التحديث/الإدخال الذكي (Database Upsert): بدلاً من عمليات الإدخال البسيطة، كتبت منطقاً في SQLite يتحقق من السجلات الموجودة مسبقاً. إذا وُجد تطابق، تقوم الواجهة الخلفية بعملية دمج (Upsert) للبيانات الجديدة مع البيانات الحالية وإعطائها معرفات فريدة (Unique IDs) لمنع أي تعارض.

معالجة الواجهة الأمامية ديناميكياً (Asynchronous DOM): تعتمد الواجهة الأمامية على واجهة fetch في JavaScript لإرسال واستقبال البيانات بشكل غير متزامن. عند تحديث أي إنجاز، يتم إعادة بناء الأجزاء المطلوبة فقط من الصفحة فورياً، مع عرض إشعار تفاعلي (Toast Notification) دون إعادة تحميل المتصفح.

موثوقية مبنية على الاختبار (Test-Driven Reliability): لضمان دقة العمليات الحسابية لنسب الإنجاز، قمت بدمج حزمة اختبارات Mocha/Chai مباشرة في التطبيق، مما يضمن حساب النسب المئوية والكسور بدقة تامة والتعامل مع الحالات الاستثنائية (Edge cases) بأمان.

? القيمة المقدمة للعملاء (لماذا هذا مهم؟)

يُظهر هذا المشروع قدرتي على بناء تطبيقات ويب آمنة ومتكاملة من الصفر دون الاعتماد على أطر عمل الواجهة الأمامية الجاهزة أو الثقيلة. كما يبرز فهماً عميقاً لهندسة قواعد البيانات، والتحقق الصارم من صحة المدخلات (وهو أمر حاسم لأي منصة تتعامل مع بيانات المستخدمين)، والقدرة على تقديم تجربة مستخدم (UX) سلسة واحترافية.