بناء عارض قرآن يتجاوز القراءة التقليدية: كيف أضفت طبقات البيانات مع open-quran-view
القرآن ليس مجرد نص نقرأه، بل هو كلام الله نسمعه بالتلاوة ونفهم معانيه وندرك تطبيقاته في حياتنا اليومية. عرض النص العربي في صفحة ثابتة وحده لا يوصل هذه التجربة الغنية.
أردت بناء تطبيق يحتفظ بالنص القرآني في مركز الاهتمام، لكنه يضيف فوقه طبقات من التلاوة والتفسير على مستوى الكلمة. النتيجة: بنية متعددة الطبقات تجعل العرض والتلاوة متزامنين تماماً — عندما يبدأ الصوت، تُضاء الكلمة التي يُتلى بها الآن، وإذا لمست أي كلمة يظهر تفسيرها فوراً.
إليك كيف عملت هذا.
الأساس: open-quran-view
الأساس هو حزمة open-quran-view على npm، التي بنيتها لعرض صفحات القرآن في React والويب. تتولى كل التفاصيل المعقدة: تموضع النص العربي على الصفحة، التعامل مع تخطيطات المصحف المختلفة (حافظ QCF V2، حافظ QCF V4، حافظ يونيكود)، وتوفير تفاعلات على مستوى الكلمة عبر أحداث مثل onWordClick.
واجهة الحزمة بسيطة ومباشرة:
interface OpenQuranViewProps {
page: number;
width: number;
height: number;
theme: "light" | "dark";
mushafLayout?: "hafs-v2" | "hafs-v4" | "hafs-unicode";
onPageChange?: (page: number) => void;
onWordClick?: (word: {
id: number;
surahNumber?: number;
ayahNumber?: number;
}) => void;
onLoad?: (layout: unknown) => void;
}
هذه الحزمة تعرض الصفحة. هذه طبقة الأساس.
الطبقة الأولى: التلاوة على مستوى الكلمة
Quran foundation API تدعم segments=true التي تعيد بيانات التوقيت لكل كلمة مع الملفات الصوتية.
عندما تستدعي https://api.quran.com/api/qdc/audio/reciters/{id}/audio_files?chapter={surah}&segments=true تحصل على طوابع زمنية لكل كلمة في السورة وقت البداية ووقت النهاية بالمللي ثانية لكل كلمة.
هذا يفتح إمكانيات:
- إضاءة الكلمة الحالية أثناء التلاوة الصوتية
- لمس أي كلمة للقفز إلى موقعها في الصوت
- عرض التلاوة كلمة كلمة أثناء تحرك القارئ
الطبقة الثانية: التفسير على مستوى الكلمة
التفسير عادة يُقدم على مستوى الآية كاملة. لكنك قد تحتاج لفهم كل كلمة في سياقها.
تطبيق مبين يربط مراجع التفسير على مستوى الكلمة. عندما تلمس كلمة، يُجلب التفسير لهذا اللفظ بالذات (راجع تصميم التفسير على مستوى الكلمة والنقاش المجتمعي). ملف الربط بين الكلمات والتفسير /data/tafseers/quran-words.json نتج عن نقاش مع MostafaOsmanFathi. والصعوبة الحقيقية أن واجهة القرآن الكريم وبيانات التفسير تستخدمان نظام فهرسة مختلف، فكان لا بد من عمل محاذاة لفهرس الكلمات.
هذه الطبقة لا تُغني عن التفسير على مستوى الآية، بل تُكمّلها حيث الكلمات الفردية تحتاج تفسيراً.
الطبقات الثلاث معاً
| الطبقة | المصدر | ما تُضيفه |
|---|
| النص القرآني | open-quran-view | صفحة النص العثماني، التفاعل على مستوى الكلمة |
| التلاوة | Quran Foundation API | مزامنة الصوت مع الكلمات، توقيت التلاوة |
| التفسير | ملف JSON للكلمات | تفسير كل كلمة، المعنى في سياقه |
عندما تعمل الطبقات الثلاث معاً، تحصل على تجربة متكاملة: تقرأ النص العربي، والصوت يُضيء كل كلمة أثناء تلاوتها، ولمس أي كلمة يكشف تفسيرها، كل هذا في صفحة واحدة دون تنقل.
لماذا هذه البنية
تطبيقات القرآن المعتادة تفصل هذه التجارب في شاشات مختلفة: تذهب للشاشة المختصرة بالتلاة لتسمع، وشاشة التفسير لتقرأ، وشاشة النص لتقرأ. الربط بين هذه الشاشات ضعيف.
وضع كل شيء في صفحة واحدة يحافظ على السياق المتزامن. الكلمة التي تقرأها هي التي تُتلى وهي التي تُفسر.
ما يُمكن بناؤه
هذه البنية تفتح الباب لبناء:
- برامج تعليم التجويد: إضاءة الكلمات التي تُنطق خطأ، إظهار أحكام المد والتنوين بصرياً
- تطبيقات تلاوة مُخصصة: تسريع أو إبطاء كلمات معينة للتدريب
- نماذج ذكاء اصطناعي للتلاة: بيانات التوقيت لكل تدريب أو التحقق من نماذج التلاة، الطوابع الزمنية توفر مرجعية دقيقة للنطق والإيقاع
- بحث في التفسير على مستوى الكلمة: إيجاد كل موضع يظهر فيه جذر عربي معين في التفسير
- تفسير مقارن: عرض عدة مصادر للتفسير جنباً إلى جنب، كل منها مُثبت على نفس الكلمة
- سهولة الوصول: مزامنة الصوت مع الكلمات تساعد ضعاف البصر على المتابعة
ما تعلمته
بيانات الطوابع الزمنية من Quran Foundation API موثوقة ومنظمة بشكل جيد. لكن المحاذاة بين البيانات كانت الأصعب — واجهات مختلفة تستخدم فهارس مختلفة، والتوفيق بينها requires طبقة وسيطة مع منطق تحويل صريح.
حزمة open-quran-view تتولى العرض. وطبقات البيانات تتولى الثراء. معاً أصبح ممكناً بناء تجارب قرآنية كانت حكراً على التطبيقات الأصلية أو أدوات متفرقة.
كود تطبيق Mubin متوفر على GitHub. حزمة open-quran-view على npm. إذا كنت تبني شيئاً في هذا المجال، الحزمة تتولى العرض فتفرغ لبناء البيانات.
تطبيق Mubin Quran متاح على mubin.adelpro.us.kg
