suhaibaffan / aquran

A mobile-optimized, cross-platform Quran app built with web technologies.

#مشروع تطبيق للقرآن الكريم للهواتف الذكية مبني بلغات الويب

##لماذا؟ جربت عدة تطبيقات للقرآن الكريم على نظام أندرويد، ولم تكن النتائج تعجبني دوماً، لعل أفضلها كان Quran Android لكن مشكلته كانت في كونه يعرض صورًا للصفحات من مصحف المدينة بدلاً من النصوص، الأمر الذي يجعلها صعبة القراءة على الشاشات الصغيرة وفي وضع الشاشة الشاقولي (portrait) وكذلك فإن الصور تجعل عرض الترجمة مرافقاً للأية غير ممكن، بل يجب النقر مطولاً على كل آية للاطلاع على تفسيرها أو ترجمتها، بعض التطبيقات الأخرى لا توفر ميزة البحث، وبعضها لا يراعي قابلية الاستخدام. قررت البدء بتصميم التطبيق في البداية ليكون تطبيق Chrome يعمل بلا اتصال وبدأت ببناءه بالاعتماد على إطار العمل Bootstrap 3، ثم أدركت أن من الأفضل بناءه على أنه تطبيق للهواتف أولاً (mobile first) ثم الانتقال إلى سطح المكتب إن كان الأمر ممكناً. لذا قمت بالانتقال إلى إطار العمل ionic (وهو حديث نسبياً) أولاً لكونه موجهاً للهواتف الذكية، وثانياً لأنه مبنيّ على إطار عمل Angular JS الذي أعشقه وأعتقد أن خبرتي به لا بأس بها.

##ما الذي يقدمه التطبيق؟ التطبيق حالياً يوفر المميزات التالية:

• عرض النص القرآن مع تلوين الحركات وعلامات الوقف بلونين مختلفين لتسهيل القراءة
• دعم كل الترجمات التي يقدمها مشروع ذكر
• دعم كل التلاوات التي يقدمها مشروع EveryAyah
• البحث باستخدام الواجهة البرمجية لمشروع الفانوس
• البحث بلا اتصال عند غياب الاتصال بالإنترنت، والمعتمد على التعابير النظامية (Regular Expressions) الذي يوفر إمكانية تجاهل الأخطاء في الهمزات والحركات

##الجوانب التقنية المشروع مبني على إطار العمل Ionic الذي يستخدم Angular JS، النصوص البرمجية مكتوبة بلغة CoffeeScript وملفات العرض مكتوبة بلغة Jade، ملفات التنسيق مكتوبة بلغة Sass. بالنسبة لنمط التصميم (Design Pattern) فهو بالطبع MVC، وملفات .coffee منسقة ضمن مجلدات وكل منها مسؤول عن خدمة أو متحكم... بما يسهل تطوير وتعديل الوحدات بشكل منفصل.

##ما الأنظمة التي سيستهدفها المشروع؟ بما أن المشروع مبني بلغات الويب وإطار عمل يستهدف الهواتف الذكية، فإنه سيكون متوفراً بقدر ضئيل من التعديلات على عدة أنظمة ذكية على رأسها Android وiOS وFirefox OS. سأضيف إعدادات منصة Cordova لبناء التطبيقات وسيتم الانتقال إليها على عدة مراحل، بالنتيجة سيتوفر التطبيق المنصات السابقة عند انتهاء الانتقال إلى Cordova.

##صور للتطبيق حالياً هكذا يبدو التطبيق: (إن تعذر عرض الصور أدناه فشاهدها هنا)

##تجربة المشروع والمساهمة في التطوير

• إن كنت تجيد التعامل مع مشاريع الويب فانسخ المشروع إلى جهازك وابنه باستخدام الأوامر التالية:

  1. تأكد من تثبيت node وnpm على جهازك
  2. استنسخ المشروع إلى جهازك git clone https://github.com/forabi/aQuran.git
  3. انتقل إلى مجلد المشروع cd aQuran
  4. ثبت متطلبات المشروع npm install
  5. ثبت متطلبات Bower بالأمر bower install
  6. ابن المشروع gulp build (أضف --firefox أو --chrome لبناء التطبيق لمنصة Firefox OS أو كتطبيق Chrome على الترتيب)
  7. ابدأ المشروع على الخادم المحلي gulp serve
  8. افتح localhost:7000 لبدء التطبيق. أنصح باستخدام Firefox وفي منظور التصميم المستجيب (Responsive Design View) لأن Chrome لا يعرض الكلمات العربية المشكلة بصورة صحيحة في نسخه الأخيرة.

• هل بإمكانك الترجمة أو التوثيق؟ أنشئ فرعاً عن المشروع على GitHub وأجر تعديلاتك ثم ادفعها إليّ!