BessmaSarri
شكراً لكِ يا بسمة
أولاً: الآن يدعم الـ PWA، وتقدري تنزليه كتطبيق. وكمان في ميزة أقوى، إنك تقدري تنزلي السورة أو القرآن الكريم كاملًا بصوت شيخ مع الصور مرة واحدة، ويتحفظ عندك دائمًا، ويظهر لكِ قد إيه أخد من مساحة التخزين. كل ده في الـ Cache عندك.
لديّ 604 ملفًا بصيغة JSON، وكل ملف يمثّل صفحة من صفحات المصحف.
على سبيل المثال: الصفحة الأولى (سورة الفاتحة) تحتوي على 7 آيات.
داخل ملف الـ JSON الخاص بهذه الصفحة توجد إحداثيات X و Y لكل آية، وهذه الإحداثيات تُحدِّد موضع الآية على الصورة. وبناءً على ذلك أستطيع إنشاء عنصر div لكل آية، ووضعه في مكانه الصحيح باستخدام تلك الإحداثيات، ثم تطبيق بعض التنسيقات البسيطة عليه.
أما الصوت، فهو مقسّم بحيث يوجد ملف صوتي مستقل لكل آية، ويتم استدعاؤه عبر الرابط بالشكل التالي:
https://everyayah.com/data/القارئ/
<رقمالسورة><رقمالآية>.mp3
وبذلك أتمكّن من تشغيل صوت الآية المطلوبة. وعند انتهاء تشغيل صوت الآية الأولى مثلًا، أقوم بإزالة التركيز (focus) عنها، ثم أنتقل تلقائيًا إلى الآية التالية، وهكذا حتى نهاية الصفحة.
مثال على ملف صفحة بصيغة JSON:
https://quran-reader-pro-chi.vercel.app/data/db/1.json
أما بالنسبة للتنقّل بين الصفحات، فأنا أعلم من خلال ملف الـ JSON عدد الآيات الموجودة في الصفحة. وعند الوصول إلى آخر آية، يتم تنفيذ حركة سحب (swipe) للانتقال إلى الصفحة التالية (+1).
كما يتم حفظ التقدّم في localStorage، بحيث إذا أتممت الصفحة الأولى مثلًا، يتم تسجيل ذلك ضمن التحدّي، ليبقى محفوظًا عند عودتك إلى التطبيق
4 تم اضافه الفهرس
6 تم تظبيط الازرار وتعدي الاماكن
إن شاء الله قريبًا، بعد ضبط الكود وتنظيم الهيكل (Structure) بشكل نظيف، سيتم طرح المشروع كمصدر مفتوح (Open Source) بإذن الله.
أتمنى منكم المساهمة معي عند إتاحته ان شاء الله
