السلام عليكم ورحمة الله وبركاته،
أحببت مشاركتكم تجربة تطوير هذا التطبيق: قارئ القرآن بالتجويد (Tajweed Quran Reader).
هو تطبيق ويب تفاعلي يهدف لتيسير تلاوة القرآن الكريم من خلال التلوين الآلي لأحكام التجويد، مع إمكانية الاستماع للتلاوة ومتابعتها بصرياً.
فكرة التطبيق نبعت من الرغبة في توفير أداة تقنية بسيطة، لا تتطلب تثبيتاً معقداً، وتساعد القارئ على ضبط أحكامه أثناء التلاوة من خلال الإشارات البصرية والمرجعية الصوتية.
الكود المصدري متاح مفتوح المصدر (Open Source) للجميع.
زيارة التطبيق: من الرابط التالي
المستودع على غيتهب: من الرابط التالي
نظرة عامة
أبرز المميزات:
- أحكام التجويد الملونة: تمييز بصري للأحكام (المدود، القلقلة، الإخفاء، إلخ) بألوان محددة.
- المزامنة الصوتية (Audio Sync): تشغيل تلاوة (الشيخ مشاري العفاسي) مع تظليل الآية الحالية تلقائياً لتسهيل المتابعة. (لا يوجد حالياً تزامن على مستوى الكلمة، لكن أنوي النظر في هذا مستقبلاً أو أن يقترح أحد حلولاً لهذا في الردود)
التصميم وتجربة المستخدم (UX/UI)
اعتمدت في التصميم على مكتبة TailwindCSS مع عناصر shadcn لبناء الواجهة وركّزت على تصميمها للهاتف المحمول أولاً، وهذا ينعكس في كلّ تفاصيل الواجهة من الشريط العلوي والسفلي وطريقة عرض البيانات - هناك دعم لشاشات الحاسوب بالطبع، لكن التجربة مصممة للهاتف بشكل رئيسي.
البنية التقنية
ينقسم الكود إلى وحدات منطقية:
- Core: الملفات الأساسية مثل
ApiClient للاتصال بالخادم و Player لإدارة الصوت.
- Managers: لإدارة واجهة المستخدم (
UIManager) وقواعد التجويد (TajweedManager).
البيانات والـ API
يعتمد التطبيق على Al-Quran Cloud API كمصدر موثوق للنص القرآني (الرسم العثماني) وملفات الصوت.
يتم جلب بيانات الصفحة عند الطلب ومعالجتها لعرضها:
// مثال مبسط لجلب محتوى الصفحة
async function loadPage(pageNumber) {
const textData = await ApiClient.getPageText(pageNumber);
const audioData = await ApiClient.getPageAudio(pageNumber);
// دمج البيانات وعرضها
}
التخزين المحلي (LocalStorage)
بدلاً من استخدام قواعد بيانات معقدة، نستخدم LocalStorage في المتصفح لحفظ حالة المستخدم، مما يسمح باستكمال القراءة من حيث توقفت حتى بعد إغلاق المتصفح.
البيانات المحفوظة تشمل:
lastReadPage: رقم آخر صفحة تمت قراءتها.userPreferences: تفضيلات اللغة والثيم (فاتح/داكن).
// استعادة الصفحة عند بدء التطبيق
const savedPage = localStorage.getItem('last_page') || '1';
state.currentPage = validatePage(savedPage);
الخطوط
استخدمت الخطّ العثماني الموفّر من القرآن كلاود والموجود في موقعهم، هذا الخطّ كبير الحجم نسبياً لكنّه يوفّر التجربة الأفضل للعمل مع الAPI خاصّتهم، وصراحة كان عليّ تجربته في مشاريع سابقة لأنّه وكما يبدو لي ممتاز جداً ويسهل التعامل معه.
الآفاق المستقبلية
هذه نسخة أولية، وهناك خطط للتطوير بإذن الله:
- إضافة خيارات لقراء متعددين.
- إضافة المتابعة مع الآية كلمة بكلمة لتسهيل فهم القواعد أثناء القراءة. حيث تظهر القاعدة عندما يصل القارئ للكلمة.
