لم أبدأ من تطبيق جاهز.
لم أنسخ كودًا من مكانٍ ما.
بدأتُ من الصفر: فكرة، بحث، تصميم، ثم سطر كود بعد سطر — حتى صار تطبيقًا يخدم كتاب الله بصدق.
كنتُ أبحث عن تطبيق مصحف يُرضي القلب قبل العين: دون إعلانات، دون تعقيد، دون مصادر مغلقة — تطبيق يُشعرك أنك أمام مصحف حقيقي، لا أمام واجهة تقنية جامدة.
لكنني لم أجد ما أبحث عنه… فقررتُ أن أصنعه بنفسي.
الخطوة الأولى: البحث عن مصدر موثوق — لأن القرآن لا يُبنى على تقديرات
قبل أن أكتب سطر كود واحد، قضيتُ وقتًا طويلًا في البحث عن مصدر دقيق وموثوق للقرآن الكريم — نصًّا، تقسيمًا، ترقيمًا، ورسمًا عثمانيًا.
لا يمكن — بأي حال — أن أبني تطبيقًا لكتاب الله وأعتمد على بيانات غير مدققة أو غير موثقة علميًا!
لذلك، اعتمدتُ على المصادر التالية كأساس علمي وتقني:
صفحات المصحف من موقع مجمع الملك فهد:
https://qurancomplex.gov.sa/techquran/dev/
وهو المصدر الرسمي لرسم المصحف المدني، مع تحديثات دقيقة — مثل تصحيح 43 موضعًا من المسافات بين الكلمات، وتعديل أرقام الأجزاء، وإزالة الكشيدة، وإضافة أعمدة بداية ونهاية السطر.
بيانات التفاسير من موقع آيات (جامعة الملك سعود):
https://quran.ksu.edu.sa/ayat
لتوفير تفسيرات موثوقة ومبنية على مراجع علمية.
مشاريع مفتوحة المصدر للإلهام والهيكلة:
مثل Zizwar/mushaf-mauri و forabi/aQuran — لفهم أفضل للتحديات التقنية في عرض المصحف.
كل هذه المصادر شكّلت العمود الفقري للبيانات التي بني عليها التطبيق — بدقة، شفافية، وإخلاص.
الخطوة الثانية: اختيار أدوات البرمجة — استراتيجية واحدة، منصات متعددة
بعد تجهيز البيانات، كان عليّ اتخاذ قرار حاسم: أي تقنية سأستخدم لبناء التطبيق؟
هدفي كان واضحًا: تطبيق واحد يعمل على الويب، أندرويد، iOS، ويندوز، وماك دون إعادة كتابة الكود.
بعد دراسة متأنية، اخترتُ Expo + React Native ولأسباب وجيهة: كتابة كود واحد يُنشر على 5 منصات وفر شهورًا من التطوير.
هذا الاختيار لم يكن تقنيًا فقط… بل كان دعوة للتعاون: أي مطور في العالم يمكنه أخذ الكود، فهمه، وتطويره — لأن القرآن للجميع.
الخطوة الثالثة: الإصدار الأول — التحدي الأكبر: ربط الآية بالصورة بالتفسير
بدأتُ بالإصدار الأساسي:
عرض مصحفي ورش وحفص، كل مصحف يحتوي على 604 صورة، مطابقة تمامًا لطبعة مجمع الملك فهد في المدينة المنورة.
لكن التحدي الحقيقي لم يكن في عرض الصور… بل في ربط كل آية بموقعها الدقيق على الصفحة، ثم عرض تفسيرها عند النقر!
كيف فعلتها؟
- رسم خرائط (divs) لكل آية على كل صفحة، عند النقر على أي مساحة، يُفتح تفسير الآية في نافذة منبثقة.
- دعم التبديل بين عدة تفاسير (ابن كثير، الطبري، السعدي...) دون إعادة تحميل الصفحة.
ثم جاء التحسين الأهم: الأداء!
- بدل تحميل 604 صفحات دفعة واحدة، طوّرتُ نظامًا يُحمّل 3 صفحات قبل الصفحة الحالية + 3 بعدها فقط، مما جعل التنقل فوريًا حتى على الأجهزة الضعيفة.
- بالنسبة للتفاسير: لا يُحمّل إلا التفسير الذي اختاره المستخدم، والباقي يُحمّل عند الطلب لتقليل استهلاك الذاكرة والوقت.
هذا الإصدار كان نواة المشروع… والتحدي الأصعب — وقد نجح!
الخطوة الرابعة: تحسين واجهة المستخدم — لأن التدبر يحتاج راحة
بعد استقرار الأداء، ركزتُ على تجربة المستخدم:
- حفظ آخر صفحة تمت قراءتها تلقائيًا.
- قائمة السور والأجزاء للتنقل السريع.
- صوت تقليب الصفحة + حركة انسيابية تحاكي تقليب صفحات المصحف الورقي.
- وضع ملء الشاشة + شريط أدوات علوي قابل للإخفاء لاستغلال كل بوصة من الشاشة في عرض الآيات.
كل هذه التحسينات "بسيطة" ظاهريًا… لكنها غيّرت تجربة المستخدم من "قراءة تقنية" إلى "قراءة روحانية".
الخطوة الخامسة: صفحة الإعدادات — تخصيص التطبيق لكل قارئ
لأن كل مستخدم له ذوقه وراحته، أضفتُ صفحة إعدادات كاملة تسمح لك بـ:
- التبديل بين روايتي حفص وورش.
- كتم/تشغيل صوت تقليب الصفحة.
- تغيير حجم الخط (للنصوص الجانبية).
- اختيار التفسير الافتراضي.
- تفعيل/إلغاء وضع ملء الشاشة.
التطبيق لم يعد "عامًا"… بل أصبح خاصًا بك.
الخطوة السادسة: خاصية البحث — ابحث في القرآن… كأنك تبحث في قلبك
أضفتُ محرك بحث ذكي يسمح لك بالبحث:
في نص الآيات.
مع إمكانية الانتقال المباشر للآية.
أو عرض التفسير فورًا.
ثم طوّرتُه باستخدام مكتبة Fuse.js — لدعم:
البحث المتقدم باستخدام fuse..js (حتى لو أخطأت في كتابة الكلمة).
- الترتيب حسب الأهمية.
- النتائج الفورية أثناء الكتابة.
الخطوة السابعة: التنقل السريع — من أي مكان… إلى أي آية
أضفتُ نظام تنقل متطور يسمح لك بالقفز:
- إلى أي صفحة مباشرة.
- إلى أي سورة أو جزء.
- إلى أي آية برقمها.
دون تأخير. دون تحميل. فقط… اضغط… وانتقل.
الخطوة الثامنة: دليل المستخدم — لأن التطبيق الجيد… يحتاج شرحًا أجمل
docs.quran.us.kg
لم أترك المستخدم يتخبط.
أعددتُ دليلًا تفاعليًا داخل التطبيق، مع:
- صور توضيحية.
- شروحات لكل زر وكل قائمة.
- نصائح للاستخدام الأمثل.
لأن التطبيق — مهما كان بسيطًا — لا يُقدّر حقه إلا إذا فهمه المستخدم.
الخطوة التاسعة: تحسين تطبيق الويب — PWA + عمل دون إنترنت
أردتُ أن يكون التطبيق متاحًا للجميع — حتى على المتصفح.
لذلك:
حوّلتُ النسخة الويب إلى تطبيق ويب تقدمي (PWA).
أضفتُ دعمًا كاملاً للعمل دون اتصال بالإنترنت — بعد التحميل الأولي.
حسّنتُ الأداء على المتصفحات المختلفة.
النتيجة؟
تطبيق ويب يُنافس التطبيقات الأصلية — في السرعة، في الوظائف، وفي التجربة.
يمكنك تجربته الآن: https://quran.us.kg
الخطوة العاشرة: نشر التطبيق على google play store
التطبيق متوفر حاليًا على: أندرويد: Google Play
ماذا عن iOS؟
أما iOS… فالتحدي ليس تقنيًا — بل مالي.
رسوم الاشتراك السنوية في Apple Developer Program مرتفعة جدًا — ولا تتناسب مع طبيعة المشروع (غير ربحي، مفتوح المصدر).
لكن… الكود جاهز!
وأي مطور أو جهة خيرية ترغب في نشره على App Store — فليتواصل معي. سأزوده بكل ما يحتاجه… مجانًا.
الخاتمة: لم أبنِ "تطبيقًا"... بل بنيتُ "بابًا"
بابًا يدخل منه الطفل ليحفظ سورة الفاتحة.
بابًا يلجأ إليه الطالب في امتحانه.
بابًا يفتحه المسافر في طائرته.
بابًا يُصلّي به المصلّي في ظلمة الليل.
هذا هو Open Mushaf.
ليس تطبيقًا… بل وسيلة.
ليس برنامجًا… بل صدقة جارية.
رابط المشروع على github: https://github.com/adelpro/open-mushaf-native
