QuranApp نبذة عن مشروع
صُمم تطبيق QuranApp خصيصاً لمساعدتك على استيعاب معاني
كلمات القرآن بعمق وسهولة، سواء كنت مبتدئاً أو متقدماً. يتيح لك التطبيق لمس أي كلمة لرؤية معناها فوراً، والضغط على التلميح لعرض معناها التفصيلي وجذرها اللغوي، كما يوفّر ترجمة بنغالية و إنجليزية لتسهيل الفهم. يمكنك الانتقال السريع إلى أي سورة وآية بكتابة رقمها، واستعراض التحليل النحوي لكل كلمة، بالإضافة إلى شرح موسّع مع أمثلة من القرآن والسنة. كما يدعم التطبيق وضع علامات مرجعية على صفحات أو آيات أو حتى كلمات مفردة، وحفظ الكلمات في دفتر ملاحظات لمراجعتها لاحقاً، وهو مثالي لتعلّم المفردات القرآنية.
والأهم من ذلك، يعمل التطبيق دون اتصال بالإنترنت، فلا تحتاج إلى شبكة لقراءة ما سبق تحميله.
التطبيق من تطوير الدكتور **Omar AL Zabir (Github profile) يعمل حاليا في instagram و messenger كما عمل سابقا لدى Microsoft
سنقوم في هذه المرحلة بتحليل الطريقة التي قام بها المطور بترتيب الكلمات على صفحات المصحف باستعمال الرسم العثماني مما سمح له بتصوير صفحات المصحف بتنسيق مصحف المدينة المنورة بدقة و دون الحاجة الى استعمال الصور لكل صفحة.**
فوائد هذه الطريقة
- إمكانية الوصول للمصحف الكريم كلمة بكلمة
- إمكانية تلوين الكلمات وإضافة أحكام التلاوة
- إمكانية إضافة تفسيير القرٱن على مستوى الكلمة
- إمكانية إضافة إعراب القرآن على مستوى الكلمة
- تقليل حجم الملفات في التطبيق بشكل كبيير جدا دون الحاجة لإضافة 604 صورة لصفحات المصحف
- دقة عالية وغير محدودة باستعمال الخط العثماني على كافة الشاشات
تحليل تنسيق الصفحات في المصحف
سنقوم بأخد الصفحة التاسعة - سورة البقرة كنموذج ونقوم بتحليلها
صورة للصفحة من التطبيق
الكود المصدري للصفحة
<div class="surah_title">
<a href="#surahpanel" id="surahNameButton">ﮌﮎ</a>
</div>
<div class="page_content">
<div class="page008 line">
<span class="word" sura="2" ayah="49" word="1" type="0">ﭑ</span
><span class="word" sura="2" ayah="49" word="2" type="0">ﭒ</span
><span class="word" sura="2" ayah="49" word="3" type="0">ﭓ</span
><span class="word" sura="2" ayah="49" word="4" type="0">ﭔ</span
><span class="word" sura="2" ayah="49" word="5" type="0">ﭕ</span
><span class="word" sura="2" ayah="49" word="6" type="0">ﭖ</span
><span class="word" sura="2" ayah="49" word="7" type="0">ﭗ</span
><span class="word" sura="2" ayah="49" word="8" type="0">ﭘ</span>
</div>
<div class="page008 line">
<span class="word" sura="2" ayah="49" word="9" type="0">ﭙ</span
><span class="word" sura="2" ayah="49" word="10" type="0">ﭚ</span
><span class="word" sura="2" ayah="49" word="11" type="0">ﭛ</span
><span class="word" sura="2" ayah="49" word="12" type="0">ﭜ</span
><span class="stop_mark" sura="2" ayah="49" word="12" type="2"
>ﭝ</span
><span class="word" sura="2" ayah="49" word="13" type="0">ﭞ</span
><span class="word" sura="2" ayah="49" word="14" type="0">ﭟ</span
><span class="word" sura="2" ayah="49" word="15" type="0">ﭠ</span>
</div>
<div class="page008 line">
<span class="word" sura="2" ayah="49" word="16" type="0">ﭡ</span
><span class="word" sura="2" ayah="49" word="17" type="0">ﭢ</span
><span class="word" sura="2" ayah="49" word="18" type="0">ﭣ</span
><span class="ayah_number" sura="2" ayah="49" word="19" type="1"
>ﭤ</span
><span class="word" sura="2" ayah="50" word="1" type="0">ﭥ</span
><span class="word" sura="2" ayah="50" word="2" type="0">ﭦ</span
><span class="word" sura="2" ayah="50" word="3" type="0">ﭧ</span
><span class="word" sura="2" ayah="50" word="4" type="0">ﭨ</span
><span class="word" sura="2" ayah="50" word="5" type="0">ﭩ</span>
</div>
<div class="page008 line">
<span class="word" sura="2" ayah="50" word="6" type="0">ﭪ</span
><span class="word" sura="2" ayah="50" word="7" type="0">ﭫ</span
><span class="word" sura="2" ayah="50" word="8" type="0">ﭬ</span
><span class="word" sura="2" ayah="50" word="9" type="0">ﭭ</span
><span class="word" sura="2" ayah="50" word="10" type="0">ﭮ</span
><span class="ayah_number" sura="2" ayah="50" word="11" type="1"
>ﭯ</span
><span class="word" sura="2" ayah="51" word="1" type="0">ﭰ</span
><span class="word" sura="2" ayah="51" word="2" type="0">ﭱ</span
><span class="word" sura="2" ayah="51" word="3" type="0">ﭲ</span>
</div>
<div class="page008 line">
<span class="word" sura="2" ayah="51" word="4" type="0">ﭳ</span
><span class="word" sura="2" ayah="51" word="5" type="0">ﭴ</span
><span class="word" sura="2" ayah="51" word="6" type="0">ﭵ</span
><span class="word" sura="2" ayah="51" word="7" type="0">ﭶ</span
><span class="word" sura="2" ayah="51" word="8" type="0">ﭷ</span
><span class="word" sura="2" ayah="51" word="9" type="0">ﭸ</span
><span class="word" sura="2" ayah="51" word="10" type="0">ﭹ</span
><span class="word" sura="2" ayah="51" word="11" type="0">ﭺ</span
><span class="word" sura="2" ayah="51" word="12" type="0">ﭻ</span>
</div>
<div class="page008 line">
<span class="ayah_number" sura="2" ayah="51" word="13" type="1"
>ﭼ</span
><span class="word" sura="2" ayah="52" word="1" type="0">ﭽ</span
><span class="word" sura="2" ayah="52" word="2" type="0">ﭾ</span
><span class="word" sura="2" ayah="52" word="3" type="0">ﭿ</span
><span class="word" sura="2" ayah="52" word="4" type="0">ﮀ</span
><span class="word" sura="2" ayah="52" word="5" type="0">ﮁ</span
><span class="word" sura="2" ayah="52" word="6" type="0">ﮂ</span
><span class="word" sura="2" ayah="52" word="7" type="0">ﮃ</span
><span class="word" sura="2" ayah="52" word="8" type="0">ﮄ</span
><span class="ayah_number" sura="2" ayah="52" word="9" type="1"
>ﮅ</span
>
</div>
<div class="page008 line">
<span class="word" sura="2" ayah="53" word="1" type="0">ﮆ</span
><span class="word" sura="2" ayah="53" word="2" type="0">ﮇ</span
><span class="word" sura="2" ayah="53" word="3" type="0">ﮈ</span
><span class="word" sura="2" ayah="53" word="4" type="0">ﮉ</span
><span class="word" sura="2" ayah="53" word="5" type="0">ﮊ</span
><span class="word" sura="2" ayah="53" word="6" type="0">ﮋ</span
><span class="word" sura="2" ayah="53" word="7" type="0">ﮌ</span
><span class="ayah_number" sura="2" ayah="53" word="8" type="1"
>ﮍ</span
>
</div>
<div class="page008 line">
<span class="word" sura="2" ayah="54" word="1" type="0">ﮎ</span
><span class="word" sura="2" ayah="54" word="2" type="0">ﮏ</span
><span class="word" sura="2" ayah="54" word="3" type="0">ﮐ</span
><span class="word" sura="2" ayah="54" word="4" type="0">ﮑ</span
><span class="word" sura="2" ayah="54" word="5" type="0">ﮒ</span
><span class="word" sura="2" ayah="54" word="6" type="0">ﮓ</span
><span class="word" sura="2" ayah="54" word="7" type="0">ﮔ</span
><span class="word" sura="2" ayah="54" word="8" type="0">ﮕ</span>
</div>
<div class="page008 line">
<span class="word" sura="2" ayah="54" word="9" type="0">ﮖ</span
><span class="word" sura="2" ayah="54" word="10" type="0">ﮗ</span
><span class="word" sura="2" ayah="54" word="11" type="0">ﮘ</span
><span class="word" sura="2" ayah="54" word="12" type="0">ﮙ</span
><span class="word" sura="2" ayah="54" word="13" type="0">ﮚ</span
><span class="word" sura="2" ayah="54" word="14" type="0">ﮛ</span
><span class="word" sura="2" ayah="54" word="15" type="0">ﮜ</span
><span class="word" sura="2" ayah="54" word="16" type="0">ﮝ</span>
</div>
<div class="page008 line">
<span class="word" sura="2" ayah="54" word="17" type="0">ﮞ</span
><span class="word" sura="2" ayah="54" word="18" type="0">ﮟ</span
><span class="word" sura="2" ayah="54" word="19" type="0">ﮠ</span
><span class="word" sura="2" ayah="54" word="20" type="0">ﮡ</span
><span class="word" sura="2" ayah="54" word="21" type="0">ﮢ</span
><span class="word" sura="2" ayah="54" word="22" type="0">ﮣ</span
><span class="stop_mark" sura="2" ayah="54" word="22" type="2"
>ﮤ</span
><span class="word" sura="2" ayah="54" word="23" type="0">ﮥ</span
><span class="word" sura="2" ayah="54" word="24" type="0">ﮦ</span
><span class="word" sura="2" ayah="54" word="25" type="0">ﮧ</span
><span class="word" sura="2" ayah="54" word="26" type="0">ﮨ</span>
</div>
<div class="page008 line">
<span class="ayah_number" sura="2" ayah="54" word="27" type="1"
>ﮩ</span
><span class="word" sura="2" ayah="55" word="1" type="0">ﮪ</span
><span class="word" sura="2" ayah="55" word="2" type="0">ﮫ</span
><span class="word" sura="2" ayah="55" word="3" type="0">ﮬ</span
><span class="word" sura="2" ayah="55" word="4" type="0">ﮭ</span
><span class="word" sura="2" ayah="55" word="5" type="0">ﮮ</span
><span class="word" sura="2" ayah="55" word="6" type="0">ﮯ</span
><span class="word" sura="2" ayah="55" word="7" type="0">ﮰ</span
><span class="word" sura="2" ayah="55" word="8" type="0">ﮱ</span
><span class="word" sura="2" ayah="55" word="9" type="0">ﯓ</span
><span class="word" sura="2" ayah="55" word="10" type="0">ﯔ</span>
</div>
<div class="page008 line">
<span class="word" sura="2" ayah="55" word="11" type="0">ﯕ</span
><span class="word" sura="2" ayah="55" word="12" type="0">ﯖ</span
><span class="word" sura="2" ayah="55" word="13" type="0">ﯗ</span
><span class="word" sura="2" ayah="55" word="14" type="0">ﯘ</span
><span class="ayah_number" sura="2" ayah="55" word="15" type="1"
>ﯙ</span
><span class="word" sura="2" ayah="56" word="1" type="0">ﯚ</span
><span class="word" sura="2" ayah="56" word="2" type="0">ﯛ</span
><span class="word" sura="2" ayah="56" word="3" type="0">ﯜ</span>
</div>
<div class="page008 line">
<span class="word" sura="2" ayah="56" word="4" type="0">ﯝ</span
><span class="word" sura="2" ayah="56" word="5" type="0">ﯞ</span
><span class="word" sura="2" ayah="56" word="6" type="0">ﯟ</span
><span class="word" sura="2" ayah="56" word="7" type="0">ﯠ</span
><span class="ayah_number" sura="2" ayah="56" word="8" type="1"
>ﯡ</span
><span class="word" sura="2" ayah="57" word="1" type="0">ﯢ</span
><span class="word" sura="2" ayah="57" word="2" type="0">ﯣ</span>
</div>
<div class="page008 line">
<span class="word" sura="2" ayah="57" word="3" type="0">ﯤ</span
><span class="word" sura="2" ayah="57" word="4" type="0">ﯥ</span
><span class="word" sura="2" ayah="57" word="5" type="0">ﯦ</span
><span class="word" sura="2" ayah="57" word="6" type="0">ﯧ</span
><span class="word" sura="2" ayah="57" word="7" type="0">ﯨ</span
><span class="stop_mark" sura="2" ayah="57" word="7" type="2">ﯩ</span
><span class="word" sura="2" ayah="57" word="8" type="0">ﯪ</span
><span class="word" sura="2" ayah="57" word="9" type="0">ﯫ</span
><span class="word" sura="2" ayah="57" word="10" type="0">ﯬ</span
><span class="word" sura="2" ayah="57" word="11" type="0">ﯭ</span>
</div>
<div class="page008 line">
<span class="word" sura="2" ayah="57" word="12" type="0">ﯮ</span
><span class="stop_mark" sura="2" ayah="57" word="12" type="2"
>ﯯ</span
><span class="word" sura="2" ayah="57" word="13" type="0">ﯰ</span
><span class="word" sura="2" ayah="57" word="14" type="0">ﯱ</span
><span class="word" sura="2" ayah="57" word="15" type="0">ﯲ</span
><span class="word" sura="2" ayah="57" word="16" type="0">ﯳ</span
><span class="word" sura="2" ayah="57" word="17" type="0">ﯴ</span
><span class="word" sura="2" ayah="57" word="18" type="0">ﯵ</span
><span class="ayah_number" sura="2" ayah="57" word="19" type="1"
>ﯶ</span
>
</div>
<div class="page_no">
<a href="#pagejumppanel" id="pagejumpbutton" data-rel="popup">٨</a>
</div>
</div>
الكود مقسم الى
- title - العنوان إسم الصورة
- content - محتوى الصفحة ويحتوي على 15 سطر كما هو مقسم في طبعة المدينة المنورة
- page number - رقم الصورة كما يتيح لنا التنقل للصفحات الأخرى عند النقر عليه
أولا - العنوان أو إسم السورة
<div class="surah_title">
<a href="#surahpanel" id="surahNameButton">ﮌﮎ</a>
</div>
عند تحليل الكود الخاص بالصفحة نلاحظ الرموز “ﮌ” و “ﮎ”
كلاهما من رموز الخط العثماني في نطاق Arabic Presentation Forms-A.
تُستخدم في كتابة عناوين السور بخط مصحف المدينة.
وهي في حالتنا هذه “سورة البقرة”
باختصار: رموز زخرفية/خطية عثمانية، لا تمثل كلمات عربية قابلة للقراءة بل شكل خطي خاص.
تُستخدم هذه الرموز في مصحف المدينة لأنها تمثل أشكالاً خطية دقيقة تُطابق تماماً الشكل المطبوع في المصحف العثماني، وليست مجرد حروف عربية عادية.
الهدف منها:
- الحفاظ على هيئة النص الأصلية كما في مصحف المدينة دون أي اختلاف في الرسم أو التشكيل.
- ضمان تطابق الصفحة الرقمية مع الصفحة الورقية حرفاً وموقعاً.
- منع تغيّر الشكل بسبب اختلاف الخطوط أو محركات العرض في المتصفحات.
- تمكين التحديد الدقيق للكلمة أو الآية عند التلاوة أو التفاعل (مثل التفسير أو الترجمة).
باختصار، هذه الأكواد لا تُستخدم للقراءة النصية بل للعرض المطابق للمصحف المطبوع حرفاً وشكلاً.
ثانيا - رقم الصفحة
<div class="page_no">
<a href="#pagejumppanel" id="pagejumpbutton" data-rel="popup">٨</a>
</div>
ويرمز لرقم الصفحة في أسفل صفحة المصحف الكريم.
ثالثا - محتوى الصفحة
وهو مكون من 15 سطرا والتي يتكون منها مصحف المدينة المنورة، وللحفاظ على ترتيب الكلمات كما في الاصدار المطبوع من المصحف تم استعمال رموز العثماني التي تعبر عن كلمات المصحف كما يلي الخط
<div class="page008 line">
<span class="word" sura="2" ayah="49" word="1" type="0">ﭑ</span
><span class="word" sura="2" ayah="49" word="2" type="0">ﭒ</span
><span class="word" sura="2" ayah="49" word="3" type="0">ﭓ</span
><span class="word" sura="2" ayah="49" word="4" type="0">ﭔ</span
><span class="word" sura="2" ayah="49" word="5" type="0">ﭕ</span
><span class="word" sura="2" ayah="49" word="6" type="0">ﭖ</span
><span class="word" sura="2" ayah="49" word="7" type="0">ﭗ</span
><span class="word" sura="2" ayah="49" word="8" type="0">ﭘ</span>
</div>
هذا الكود يمثل كلمات سطر من سطور الصفحة التاسعة أي 8+1 لأن العد يبدأ من الصفر.
كل كلمة ممثلة برمز من رموز الخط العثماني محتوات في مكمون htlm span.
تم تخصيص كل span بخصائص data لبرمجتها فيما بعد بلغة الجاف سكريبت
Class: من أجل تغيير تنسييق CSS
Sura: السورة الحالية
Aya: الآية الحالية
Word: ترتيب الكلمة الحالية في سياق الٱية
سيتم إستعمال هاته المعطيات لتحديد الكلمة بالضبط في المصحف أو index
من الملف التاليي: sql/wordbyword.txt
1 2 1 ٱلْحَمْدُ All praises and thanks প্রসংসা, গুণকীর্তণ করা
1 2 2 لِلَّهِ (be) to Allah, আল্লাহ
1 2 3 رَبِّ (the) Lord প্রভু, সযত্নে পালনকর্তা
1 2 4 ٱلْعَٰلَمِينَ (of all) the worlds, সকল জাতি, সৃষ্টিজগত
1 3 1 ٱلرَّحْمَٰنِ The Most Merciful Qualitatively, পরম দয়ালু
1 3 2 ٱلرَّحِيمِ the Most Merciful Quantitatively. নিরন্তর দয়ালু
1 4 1 مَٰلِكِ Master মালিক, প্রভু
1 4 2 يَوْمِ (of the) Day দিন, এইদিন
1 4 3 ٱلدِّينِ (of) [the] Judgment, ধর্ম
1 5 1 إِيَّاكَ You Alone শুধুমাত্র
1 5 2 نَعْبُدُ we worship, উপাসনা করা
1 5 3 وَإِيَّاكَ and You Alone শুধুমাত্র
1 5 4 نَسْتَعِينُ we ask for help. সাহায্য চাওয়া
1 6 1 ٱهْدِنَا Guide us পথ দেখানো
1 6 2 ٱلصِّرَٰطَ (to) the path, পথ/ রাস্তা, পন্থা
1 6 3 ٱلْمُسْتَقِيمَ the straight, সোজা, সরল, সঠিক
1 7 1 صِرَٰطَ (The) path পথ/ রাস্তা, পন্থা
1 7 2 ٱلَّذِينَ (of) those যে
1 7 3 أَنْعَمْتَ You have bestowed (Your) Favors অনুগ্রহ করা, নেয়ামত দেয়া, পুরস্কার দেওয়া
.....
حيث يحتوي على فهرس لكلمات القرآن بثلاث لغات: العربية, الإنجليزية وبالبنغالية.
كما تم الاستعانة بالملف data/Transliteration.csv لإضافة خاصية نطق الكلمات العربية بالحروف اللاتينية أو ما يعرف بال Transliteration
1,1,1,bis'mi
1,1,2,l-lahi
1,1,3,l-raḥmāni
1,1,4,l-raḥīmi
1,2,1,al-ḥamdu
1,2,2,lillahi
1,2,3,rabbi
1,2,4,l-ʿālamīna
1,3,1,al-raḥmāni
1,3,2,l-raḥīmi
1,4,1,māliki
1,4,2,yawmi
1,4,3,l-dīni
1,5,2,naʿbudu
1,5,4,nastaʿīnu
1,6,1,ih'dinā
1,6,2,l-ṣirāṭa
.........
يمكن بسهولة تظمين معلومات أخرى كالتفسيير و الإعراب على مستوى الآية و حتى الحرف عن طريق الاستفادة من مكون data في كل كلمة كمثال
<span class="word" sura="2" ayah="57" word="18" type="0">ﯵ</span>
يرمز إلى الكلمة الثامنة عشر في الآية السابعة والخمسون من السورة الثانية.
كيف قام المطور بإنشاء الصفحات؟
المطور إستعمل قاعدة بيانات SQL مخزنة في هذا الملف QuranAppData.7z واستعمل هذا الكود لإنشاء الصفحات sql/generate ayah spans.sql
declare @text nvarchar(max)
set @text = N'ﮈﮉﮊﮋﮌﮍﮎﮏﮐﮑﮒ'
select * from [dbo].[SplitString](@text, ';')
select '<span '
+ 'class="' + class
+ '" sura="' + convert(nvarchar(3), sura)
+ '" ayah="' + convert(nvarchar(3), ayah)
+ '" word="' + convert(nvarchar(3), itemindex)
+ '">'
+ item + ';</span>' as word
FROM
(
select
1 as sura
,2 as ayah
,(select ItemIndex+1 from (select (
select Item from [dbo].[SplitString](s.text, ';')) as AyahNumber from surah_page s where s.page=603) A
where A.AyahNumber = Item)
,case when
exists (select * from (select (select top 1 Item from [dbo].[SplitString](text, ';') where len(item)>0 order by ItemIndex desc) as AyahNumber from surah_page s where s.page=603) A
where A.AyahNumber = Item)
then 'ayah_number'
else 'word'
end as class
,item
FROM [dbo].[SplitString](@text, ';')
) A
where len(item)>0
--select (select top 1 Item from [dbo].[SplitString](text, ';') where len(item)>0 order by ItemIndex desc) as AyahNumber from surah_page where page=1
select (select top 1 Item from [dbo].[SplitString](text, ';')) as AyahNumber from surah_page where page=1
أترك الشرح لأهل الإختصاص في قواعد البيانات
الخاتمة
من خلال تحليل مشروع QuranApp يتضح أن المطور اعتمد على منهج هندسي ذكي يمزج بين التحقيق النصي والدقة الطباعية، إذ استبدل الصور الثابتة للصفحات برموز الرسم العثماني المعياري (Unicode Presentation Forms-A)، ليحصل على مصحف رقمي مطابق شكلاً وموقعاً دون عبء الصور أو فقدان الدقة.
بهذا الأسلوب أصبح بالإمكان التعامل مع كل كلمة كوحدة مستقلة يمكن ربطها بالمعنى، الترجمة، الإعراب أو أحكام التجويد، وهو ما يجعل المشروع قاعدة ممتازة لتطبيقات تعليمية أو بحثية متقدمة في علوم القرآن.
ومع ذلك، يلاحظ أن المشروع لم يذكر مصدر البيانات القرآنية المعتمدة (النص، علامات الوقف، أو الترقيم)، وهو جانب محوري في تطبيقات المصحف الإلكتروني. غياب التوثيق للمصدر يُضعف من موثوقية النص وسلامة اعتماده الشرعي، خاصة في مشروعات يُفترض أن تعتمد على بيانات مصحفية موثقة مثل مجمع الملك فهد أو Tanzil.net.
بشكل عام، يظل المشروع مثالاً تقنياً متقدماً في توظيف Unicode لخدمة النص القرآني، لكنه يحتاج إلى تعزيز الشفافية في مصادر البيانات لضمان الثقة الأكاديمية والدينية في محتواه.
