استكمالاً للموضوع السابق (
، قمت للتو برفع نسخة تجريبية من التطبيق على GitHub Pages بعد محاولة الاستضافة على عدة مواقع أخرى باءت بالفشل :)
ما الجديد منذ الموضوع السابق؟
تم الانتقال إلى قواعد بيانات IndexedDB ضمن المتصفح، وهي من الميزات الحديثة ضمن المتصفحات، حيث يتم تخزين قاعدة بيانات النص القرآني والترجمات ومعلومات التلاوات ضمن المتصفح، وبهذا لا داعي لأي شيء من جهة الخادم، سوى تقديم الملفات الثابتة static، ولا داعي أيضًا لإبقاء كامل قاعدة البيانات ضمن الذاكرة، وهو ما كنت أفعله في السابق.
التطبيق يعمل بلا اتصال بعد اكتمال تحميل كافة الملفات أول مرة، يمكنك زيارة الرابط نفسه حتى لو كنت غير متصل بالإنترنت (يعتمد على ميزة AppCache).
يتم تحميل النص القرآني مرة واحدة وتخزينه ضمن المتصفح، مما يسمح بتحسين الأداء بشكل رائع.
يتم تحميل الترجمة عند تفعيلها فقط، ثم تخزينها في المتصفح ضمن قاعدة بيانات IndexedDB.
الترجمات تعمل، تعرض ترجمة كل آية تحتها، ويمكن اختيار أكثر من ترجمة، وبأكثر من لغة.
طبعاً مع إمكانية إخفاء الترجمات بالكامل والاكتفاء بالنص القرآني
بدل الحاجة للتنقل بين الصفحات أثناء القراءة، كل ما عليك هو متابعة التمرير للأسفل لتحميل الصفحة التالية (infinte scrolling)
البحث يعمل
النقر على إحدى نتائج البحث ينقلك مباشرة إلى هذه الآية، في السابق كان ينقلك إلى بداية الصفحة التي فيها الآية
التلاوات تعمل بشكل تجريبي (هناك بعض المشاكل تؤدي لتكرار تلاوة الصفحة بدل الانتقال للصفحة التالية، أعمل على حلها)
جودة التلاوات قابلة للتكيف مع سرعة الاتصال (لا يوجد متصفح حالياً يتبنى الواجهة البرمجية لمعلومات الاتصال Network Information API سوى Firefox OS على حد علمي، وعلى هذا ستحصل دوماً على أعلى دقة للتلاوة على بقية المتصفحات)
صور التطبيق
شاهدها هنا
متطلبات التشغيل
أحدث نسخة من Chrome أو Firefox على Android 4.0+
أحدث نسخة Chrome على iOS 7+ (لم أقم بالتجربة ولكن المفترض أن يعمل)
Firefox OS 1.2+
شكر خاص
- أحب أن أتقدم بالشكر الجزيل للدكتور خالد حسني (
لمساهمته الكبيرة في تطوير المشروع، حيث قدم لي نسخًا معدلة من خط أميري قرآن، كما تم اعتماد النص القرآني الذي يعمل عليه (
، وهو يتبع معايير
- لؤي العقاد (
لنصائحه ولاقتراحه نشر التطبيق كتطبيق ويب بدل الاعتماد على منصة Cordova (هذا سهل المهمة أكثر :))
- مجتمع Arabia I/O لتشجيعهم لي على المتابعة
مشاكل معروفة
بطء التحميل للمرة الأولى: الأمر يعتمد على سرعة اتصالك، في المرات القادمة التي يتم فتح التطبيق فيها، المفترض أن تستخدم النسخة المخزنة ضمن AppCache، وهذا يعني أنه لا حاجة للاتصال بعد ذلك (باستثناء عند تشغيل التلاوات بالطبع).
النص القرآني تجريبي، ومبني على عمل الدكتور خالد حسني. لاحظت بعض الأخطاء في إشارات الوقف، وسأعمل على التبليغ عنها ثم تحديث المشروع، في الوقت الحالي بإمكانك استخدام النص القرآني من مشروع الفانوس كبديل، وذلك عند بناء التطبيق بالأمر التالي:
gulp --production --experimental 0
تُرجى التجربة على هاتف ذكي أو جهاز لوحي، ليس على desktop أو laptop. السبب هو أن التطبيق مصمم لشاشات اللمس ومبني على إطار عمل للهواتف الذكية.
متصفح Chrome لا يعرض النص القرآني بشكل صحيح، السبب في Chrome، لن أعمل على إيجاد حلول ترقيعية الآن. لإصلاح المشكلة يمكنك تعطيل تلوين النص القرآني في إعدادات التطبيق، مع ذلك ستبقى إشارة الآية تسبق الرقم، لكن النتيجة ستكون أفضل بالطبع.
Firefox يعرض النصوص بطريقة صحيحة، لكن لسبب ما لا يمكن النقر على زر تبديل وضع الخيار ضمن الإعدادات.
تكرار تلاوة الصفحة بدل الانتقال للصفحة التالية (أعمل على حلها)
تقطع التلاوة: بما أن التطبيق يعتمد على Network Information API لتقدير سرعة اتصالك بالإنترنت، فلا يمكن الاستفادة من هذه الميزة إلا على Firefox (وربما على Firefox OS فقط)، إذا واجهت تقطعاً بالتلاوات، فالسبب هو بطء اتصالك بالإنترنت وفشل التطبيق في تقدير سرعته لجلب تلاوة بدقة مناسبة. سأبحث عن حلول أخرى لتقدير سرعة الاتصال.
النسخة المستضافة على GitHub Pages لا توفر سوى الترجمات باللغتين العربية والإنكليزية حالياً.
الخطوات التالية
حل المشاكل السابقة
تعريب التطبيق، وتوفير إمكانية ترجمته لأية لغة
لتقليل استهلاك الذاكرة، حذف الصفحات القديمة في قائمة التمرير عند الابتعاد عنها لمسافة معينة
لتجربة التطبيق
المساهمات
هل تجيد تطوير تطبيقات الويب؟ ساعدني على GitHub
التعليقات
عمل جميل جداً،
كاقتراح إيجاد طريقة مبسطة لوضع اختصار لرابط الموقع على الهواتف المحمولة، مثلا رمز بين البرامج عند الضغط عليه يدخل للموقع، لأن الكثير من مستخدمي الهواتف "عوام"، فربما حتى المفضلة لا يعرفونها.
تصفحته من خلال الكمبيوتر عبر "كروم"، وحصلت هذه المشكلة :
نعم إنشاء اختصار ضمن خطتي
المشكلة ستواجهك كذلك على كروم على أندرويد، يمكنك الذهاب للإعدادات وتعطيل الخيار Use different colors for diacritics and quranic annotation signs، لكن ستبقى علامة الأية خارج النص. المشكلة من كروم، فيرفوكس يعرضها بشكل صحيح.
لم ألق نظرة على أكواد الـ CSS، لكن لو كنت استخدمتها في الخطوط فربما المشكلة من عدم توافقية الخط مع المتصفح،
راجع :
لست متأكد أبداً من الحل لكن ربما يكون طريقا له.
بما أن واجهة التطبيق حالياً بالإنكليزية، فمن المناسب أن يكون اسم السورة بالإنكليزية مع ترجمة إنكليزية حالياً.
قريباً سيقوم البرنامج باكتشاف اللغة المناسبة وعرض المحتوى المناسب، مثلاً: في الواجهة العربية: اسم السورة بالعربي، تفسير عربي مع النص القرآني، وبالإنكليزية: الترجمة الإنكليزية مع أسماء السور بالإنكليزية... إلخ
إنجاز رائع ومذهل أخي محمد فواز ^_^
حاولت التواصل معك من فترة , عندي مشروع تطبيق ويب (القرآن الكريم على مستعرض Google Chrome) لكن النقطة المهمة كما ذكرت حضرتك : أوفلاين
يوجد عدة تطبيقات ويب لكن أونلاين وليست أوفلاين بشكل كامل .
مشكلتي شوي بالتصميم (HTML + CSS) لذلك بحاجة للمساعدة :)
أدعو الله أن يوفقك إن شاء الله ويكون برنامج قوي جداً ومميز والله يجزيك الخير ...
جربته علي chrome اخر اصدار علي الاندرويد 4.4.2 الاداء سيء وبطيء
لا اعتقد انها فكرة ناجحة نشره علي تطبيق ويب online, جرب استخدام CocoonJS, قبل ايام وصلني بريد الكتروني بخصوص دعم ludei لتطبيقات الويب html5 وبامكانك استعماله الان
تعليقي علي موضوعك السابق
جربته علي chrome اخر اصدار علي الاندرويد 4.4.2 الاداء سيء وبطيء وبالاخص استخدم CM11 وعلي جهاز nexus4 يعتبر جهاز قوي نسبيا حجم ram تقريبا 2 جيجا بايت!!
لا اعتقد انها فكرة ناجحة نشره علي تطبيق ويب online, جرب استخدام CocoonJS, قبل ايام وصلني بريد الكتروني بخصوص دعم ludei لتطبيقات الويب html5 وبامكانك استعماله الان
تعليقي علي موضوعك السابق
قد تهمك بيانات القرآن كاملة بما فيها التفاسير وصور الصفحات وحدود الآيات:
وهذا رابط لبرنامج تجريبي للبيانات: