أنت مهندس برمجيات ومصمم UX/UI ومتخصص في بناء تطبيقات الويب التفاعلية وProgressive Web Apps.
أريد منك البدء في بناء تطبيق إسلامي حقيقي وقابل للاستخدام باسم:
«حاسب نفسك»
فكرة التطبيق:
أداة تربوية يومية تساعد المسلم على محاسبة نفسه، واكتشاف نقاط التقصير، ووضع أهداف عملية، ومتابعة تقدمه في طريق الإصلاح.
مهم جدًا:
لا أريد نموذجًا تجريبيًا أو صفحات شكلية. كل زر ووظيفة يتم إنشاؤها يجب أن تعمل فعليًا.
هذه هي المرحلة الأولى، ولا تنتقل إلى مزايا المراحل اللاحقة الآن إلا إذا كانت ضرورية لعمل الأساس.
1. الهيكل العام
أنشئ تطبيقًا:
- عربي بالكامل.
- RTL.
- Mobile First.
- Responsive.
- سريع وخفيف.
- تصميم هادئ ونظيف ومريح.
- مناسب للاستخدام اليومي.
- يدعم الوضع الفاتح والداكن إن أمكن.
اسم التطبيق:
«حاسب نفسك»
التنقل الرئيسي:
الرئيسية | حاسب نفسك | الأذكار | حاسب قلبك | أهدافي | التقارير | الإعدادات
2. PWA وOffline
اجعل التطبيق PWA حقيقيًا.
المطلوب:
- Service Worker.
- Web App Manifest.
- Cache للملفات الأساسية.
- تشغيل التطبيق بدون إنترنت بعد أول تحميل.
- عدم الاعتماد على خادم خارجي للوظائف الأساسية.
- إمكانية تثبيت التطبيق على الهاتف.
- التعامل مع انقطاع الإنترنت دون انهيار التطبيق.
3. التخزين المحلي
استخدم IndexedDB أو LocalStorage حسب الأنسب.
يجب حفظ:
- بيانات المحاسبة.
- الأهداف.
- الأذكار والإنجاز.
- أعمال القلوب.
- الإحصائيات.
- إعدادات المستخدم.
- السجلات اليومية.
- التقدم.
يجب ألا تضيع البيانات عند:
- إغلاق التطبيق.
- إعادة فتحه.
- تحديث الصفحة.
- العمل Offline.
اجعل كل يوم له سجل مستقل.
4. النسخ الاحتياطي
أضف في الإعدادات:
- تصدير جميع بيانات المستخدم إلى ملف JSON.
- استيراد نسخة احتياطية.
- تأكيد قبل استبدال البيانات.
- إمكانية مسح جميع البيانات.
5. الصفحة الرئيسية
أنشئ Dashboard تحتوي على:
- ترحيب مختصر.
- تاريخ اليوم.
- زر «ابدأ محاسبة اليوم».
- نسبة إنجاز اليوم.
- أذكار الصباح.
- أذكار المساء.
- ورد القرآن.
- الأهداف الحالية.
- آخر نقطة خلل.
- سؤال تربوي لليوم.
- رسالة تربوية قصيرة.
لا تجعل النسبة حكمًا على صلاح المستخدم؛ هي مجرد مؤشر متابعة.
6. جودة التنفيذ
لا تنشئ:
- أزرارًا وهمية.
- صفحات غير مرتبطة.
- بيانات تجريبية مضللة.
- وظائف لا تعمل.
نظّم الكود وقاعدة البيانات بحيث يمكن إضافة المراحل التالية دون إعادة بناء التطبيق.
بعد التنفيذ اختبر:
- التنقل.
- التخزين.
- إعادة تحميل الصفحة.
- Offline.
- تثبيت PWA.
- التصدير والاستيراد.
- Responsive.
لا تحذف أي شيء تم بناؤه في هذه المرحلة عند تنفيذ المراحل القادمة.