مقدمة عامة
يُعدّ مكون QuranView حلاً متكاملاً لعرض صفحات المصحف الإلكتروني في تطبيقات React Native. يعرض جميع الصفحات الست مئة واربعة للمصحف مع دعم التفاعل مع الآيات والأسماء السور. يعتمد على قاعدة بيانات SQLite وعرض الصور الديناميكي.
تم تطوير المكون ضمن منظومة Expo ليعمل على iOS و Android والويب. ويتميز بواجهة TypeScript حديثة ونظام إحداثيات متكامل.
المستودع الرسمي: github.com/adelpro/mushaf-imad-expo
لماذا ترحيل مصحف عماد إلى React Native و Expo؟
توسيع نطاق الوصول للمستخدمين
مصحف عماد الأصلي مبني بـ SwiftUI لنظام iOS فقط، مما يحد من الوصول لملايين مستخدمي Android. تهجير المشروع إلى React Native يتيح نفس التجربة الغنية لجميع المستخدمين بغض النظر عن جهازهم. كما يدعم Expo الويب بنفس قاعدة الكود، مما يعني تطبيق يعمل على ثلاثة منصات رئيسية بتكلفة تطوير واحدة.
تقليل تكاليف الصيانة
بدلاً من صيانة كود منفصل لكل منصة (Swift/SwiftUI لـ iOS، Kotlin/Jetpack Compose لـ Android)، يمكن فريق واحد صيانة كود واحد يعمل في كل مكان. هذا يُقلل الجهد والتكلفة ويضمن تجربة متسقة عبر جميع المنصات. التحديثات والإصلاحات تصل لجميع المستخدمين في وقت واحد.
الاستفادة من منظومة Expo
Expo تُوفّر بنية تحتية جاهزة للتعامل مع الملفات والصور وقواعد البيانات والخطافات. لا حاجة لكتابة كود أصلي لكل ميزة، فالحزم الجاهزة تتكامل مع الكود بأقل جهد. كما يُتيح نظام OTA تحديث التطبيقات المنشورة دون المرور بعمليات الموافقة على المتاجر.
التطوير السريع والاختبار
بيئة التطوير في Expo سريعة ومتكاملة. يمكن تشغيل التطبيق على المحاكي أو الجهاز الحقيقي بنقرة واحدة، ومشاركة التطبيق مع المختبرين عبر رابط مباشر. هذا يُسرّع دورة التطوير ويُسهّل الحصول على التغذية الراجعة.
المساهمة المجتمعية
مفتوح المصدر يُتيح للمطورين المساهمة في تطوير المشروع وتحسينه. بدلاً من بناء كل شيء من الصفر، يمكن الاستفادة من العمل المبذول في مصحف عماد وتكييفه لمنصات أخرى. هذا يُثري منظومة التطبيقات الإسلامية المفتوحة المصدر.
السكريبتات والأدوات مساعدة
يتضمن المشروع مجموعة من السكريبتات المساعدة لإدارة البيانات والصور والتحقق من سلامة قاعدة البيانات. تقع هذه السكريبتات في مجلد scripts/ وتُسهّل عمليات الصيانة والتطوير.
سكريبت توليد خريطة الصور
سكريبت generate-map.js يُولّد ملف src/constants/imageMap.ts الذي يحتوي على مسارات جميع صور أسطر المصحف. يقرأ السكريبت المجلدات من assets/images/quran/ ويُنشئ مصفوفة منظمة تُستخدمها المكونات لتحميل الصور بكفاءة.
node scripts/generate-map.js
سكريبت التحقق من قاعدة البيانات
سكريبت check-db-data.js يُعرض محتوى قاعدة البيانات وعدد السجلات في كل جدول. يُستخدم للتحقق من سلامة البيانات واستخراج عينات للتأكد من صحة التنسيق.
node scripts/check-db-data.js
سكريبت ترحيل Realm إلى SQLite
سكريبت migrate-realm-to-sqlite.js يُحوّل قاعدة بيانات Realm إلى SQLite. يقرأ جميع الكيانات ويُنشئ الجداول المناسبة مع الفهارس لتحسين الأداء. يُفيد عند الترقية من الإصدارات القديمة أو نقل البيانات.
node scripts/migrate-realm-to-sqlite.js
سكريبتات التحقق المتخصصة
سكريبتات إضافية للتحقق من جوانب محددة: check-page-numbering.js يتحقق من ترقيم الصفحات، وcheck-pages-schema.js يفحص هيكل الجداول، وcheck-markers.js يتحقق من صحة علامات الآيات.
أصل المشروع ومصادره
مصحف عماد - المشروع الأصلي
مكون QuranView مُستوحى ومُقتبس من مشروع مصحف عماد الذي طوّره إبراهيم قريقع والمجتمع التقني إتقان https://community.itqan.dev/d/98 . مصحف عماد هو حزمة SwiftUI تُقدّم تجربة قراءة مصحف متكاملة لنظام iOS 17 وما فوق، تتضمن عرض جميع الصفحات الست والستين مع بيانات الآيات والعناوين والتوقيتات الصوتية.
المشروع الأصلي متاح كمصدر مفتوح على GitHub ويتميز بدعم متعدد المنصات لـ iOS و macOS، وقاعدة بيانات Realm للبيانات، ونظام تخزين مؤقت aggressive، ومشغل صوت متكامل مع تزامن العرض، ومكونات SwiftUI قابلة لإعادة الاستخدام.
الاختلافات والتكييف
هذا المشروع يُكيّف فكرة مصحف عماد لمنظومة React Native و Expo. بدلاً من Realm، نستخدم SQLite لتوافقها مع بيئة Expo. بدلاً من SwiftUI، نستخدم مكونات React Native. الهدف هو توفير نفس التجربة الغنية لمستخدمي تطبيقات الجوال عبر المنصات المختلفة.
الهيكل العام للمكون
توزيع الملفات والمجلدات
يعتمد المكون على هيكل تنظيمي واضح يفصل بين المسؤوليات المختلفة. يتم وضع جميع الملفات المتعلقة بالمكون داخل مجلد src/components/quran/، حيث يحتوي هذا المجلد على مجموعة من الملفات المتخصصة التي تعمل معًا لتقديم الوظائف الكاملة. الملف الرئيسي QuranView.tsx يُعدّ نقطة الدخول الأساسية ويحتوي على منطق العرض والتفاعل، بينما تُعرّف الأنواع والواجهات في ملف types.ts لضمان سلامة البيانات.
تتولى الملفات الأخرى أدوارًا متخصصة: يتولى ملف useQuranData.ts إدارة جلب البيانات من قاعدة البيانات، بينما يوفر ملف constants.ts الإعدادات الافتراضية والثوابت المستخدمة في العرض. المكونات الفرعية مثل VersePopup.tsx وChapterPopup.tsx وSuraNameBar.tsx وVerseFasel.tsx تُعنى بعرض العناصر التفاعلية فوق صور الصفحات. يُسهّل ملف index.ts الاستيراد من مكان واحد لجميع الوظائف والتصديرات.
src/
├── components/
│ └── quran/
│ ├── index.ts # التصديرات الرئيسية
│ ├── types.ts # تعريفات الأنواع
│ ├── constants.ts # الإعدادات الافتراضية
│ ├── useQuranData.ts # خطاف جلب البيانات
│ ├── QuranView.tsx # المكون الرئيسي
│ ├── VersePopup.tsx # نافذة معلومات الآية
│ ├── ChapterPopup.tsx # نافذة معلومات السورة
│ ├── SuraNameBar.tsx # شريط اسم السورة
│ └── VerseFasel.tsx # علامة رقم الآية
├── services/
│ └── SQLiteService.ts # خدمة قاعدة البيانات
└── assets/
├── quran.db # قاعدة البيانات
└── images/quran/ # صور الصفحات
قاعدة البيانات والبيانات المخزنة
يعتمد المكون على قاعدة بيانات SQLite لتخزين وتنظيم جميع البيانات المتعلقة بالمصحف. تتكون القاعدة من عدة جداول مترابطة: جدول pages الذي يحتوي على البيانات الوصفية لجميع الصفحات الستة والستين، وجدول chapters الذي يخزن معلومات السور الأربعة عشرة والستين. جدول verses هو الأكبر حجمًا حيث يحتوي على بيانات الألفين ومائتين وستة وثلاثين آية مع علامات مواقعها.
يخزن جدول chapter_headers مواقع أسماء السور داخل كل صفحة، وهي معلومة ضرورية لعرض أشرطة الأسماء في المواقع الصحيحة. أما جدول verse_highlights فيحتوي على إحداثيات المناطق القابلة للضغط داخل كل آية، مما يتيح للمستخدمين الضغط على أي جزء من الآية لتفعيل الأحداث المرتبطة بها. هذه البيانات مُنظمة بعناية لضمان أداء عالٍ عند الاستعلام عنها.
سهولة الاستخدام
البساطة في البداية
صُمم المكون ليكون سهل الاستخدام منذ اللحظة الأولى. يمكن للمطور إضافة مكون عرض القرآن إلى تطبيقه بسطر واحد فقط من الكود، حيث يكفي استيراد المكون من المسار الصحيح ثم استخدامه مع تمرير رقم الصفحة المراد عرضها. لا يتطلب المكون أي إعدادات معقدة أو تنسيقات خاصة، فهو يأتي مُهيّأً افتراضيًا للعمل بشكل صحيح مباشرة بعد التثبيت.
تظهر سهولة الاستخدام أيضًا في نظام الخصائص القابلة للتخصيص. يمكن للمطور التحكم في كل جانب من جوانب المكون دون الحاجة لتعديل الكود الداخلي. سواء أراد إظهار أو إخفاء علامات الآيات، أو تغيير الألوان، أو تخصيص التعامل مع ضغطات المستخدم، كل ذلك متاح من خلال خصائص بسيطة تُمرر عند استخدام المكون.
المرونة في التخصيص
يوفر المكون مستويات متعددة من التخصيص تناسب مختلف الاحتياجات. في المستوى الأساسي، يمكن التحكم في العناصر المرئية مثل أشرطة أسماء السور وعلامات الآيات والتسطيرات. في المستوى المتوسط، يمكن تخصيص الألوان والسمات لتتناسب مع تصميم التطبيق. أما في المستوى المتقدم، فيمكن تجاوز وظائف العرض بالكامل واستبدالها بمكونات مخصصة.
يدعم المكون أيضًا التخصيص الديناميكي للبيانات من خلال نظام الإحداثيات. يمكن للبرنامج استقبال إشعارات عند ضغط المستخدم على أي عنصر، مما يتيح بناء واجهات تفاعلية متقدمة. على سبيل المثال، يمكن إظهار قائمة خيارات عند الضغط المطول على آية، تتضمن خيارات مثل النسخ والتعليق والبحث والوضع في المفضة.
الأنواع والواجهات البرمجية
أنواع البيانات الأساسية
يوفر المكون مجموعة شاملة من الأنواع التي تُعرّف بنية البيانات المستخدمة. نوع Verse يُمثّل الآية القرآنية ويحتوي على معرفها ورقمها ونصها بتنسيقات متعددة، بالإضافة إلى معلومات الموقع لكل نمط إملائي. نوع Chapter يُمثّل السورة ويشمل رقمها واسمها العربي والإنجليزي ونوعها المكّي أو المدني. نوع Page يُمثّل صفحة المصحف ويحتوي على مصفوفة من الآيات والعناوين الواردة فيها.
تُعرّف الأنواع أيضًا الهياكل المساندة: نوع VerseMarker يُمثّل علامة رقم الآية وإحداثياتها، ونوع VerseHighlight يُمثّل المنطقة القابلة للتفاعل ضمن الآية، ونوع ChapterHeader يُمثّل موقع اسم السورة داخل الصفحة. هذه الأنواع تضمن تناسق البيانات وتسهّل التحقق من صحتها في وقت التجميع.
أنواع الأحداث والخصائص
يُعرّف المكون أنواعًا خاصة للأحداث لضمان تمرير البيانات بشكل صحيح. نوع VersePressEvent يحتوي على بيانات الآية المضغوطة ورقم الصفحة والسورة، بالإضافة إلى إحداثيات الضغط. نوع ChapterPressEvent يحتوي على بيانات السورة المضغوطة ورقم الصفحة والإحداثيات. هذه الأنواع تُمكّن المطورين من معرفة السياق الكامل للحدث والاستجابة له بشكل مناسب.
خصائص المكون (QuranViewProps) مُصنّفة إلى عدة فئات: الخصائص المطلوبة مثل pageNumber، وخصائص التخطيط مثل layout، وخصائص العرض مثل showSuraName وshowVerseMarkers، وخصائص السمة مثل backgroundColor وhighlightColor، وخصائص التفاعل مثل onVersePress وonChapterPress. كل خاصية لها نوع محدد وقيمة افتراضية مناسبة.
كيفية الاستخدام
الاستخدام الأساسي
يبدأ استخدام المكون باستيراده من مساره الصحيح ثم تمرير رقم الصفحة المطلوبة. يعرض المكون تلقائيًا الصفحة المطلوبة مع جميع العناصر التفاعلية. في حالة جاري تحميل البيانات أو حدوث خطأ، يُظهر المكون مؤشر تحميل أو رسالة خطأ حسب الحالة. هذا السلوك الافتراضي يضمن تجربة مستخدم جيدة حتى في ظروف الاتصال الضعيفة.
import { QuranView } from "./components/quran";
<QuranView pageNumber={1} />
التعامل مع ضغطات المستخدم
يمكن تعريف وظائف استدعاء لت التعامل مع ضغطات المستخدم على الآيات والسور. الوظيفة تستقبل كائنًا يحتوي على جميع المعلومات ذات الصلة بالحدث، مما يتيح اتخاذ إجراءات مناسبة. الضغط القصير عادةً ما يُستخدم للإظهار السريع للمعلومات، بينما يُستخدم الضغط المطول للقوائم والإجراءات الإضافية.
function MyScreen() {
const handleVersePress = (event) => {
console.log("آية رقم:", event.verse.number);
console.log("سورة رقم:", event.chapter);
console.log("صفحة رقم:", event.page);
};
const handleVerseLongPress = (event) => {
console.log("ضغط مطول على آية:", event.verse.number);
// إظهار قائمة خيارات...
};
return (
<QuranView
pageNumber={1}
onVersePress={handleVersePress}
onVerseLongPress={handleVerseLongPress}
/>
);
}
استخدام النوافذ المنبثقة المدمجة
يوفر المكون نوافذ منبثقة جاهزة لعرض معلومات الآيات والسور. يمكن استخدام هذه النوافذ مباشرة أو بناء نوافذ مخصصة خاصة بالتطبيق. النوافذ المدمجة تتعامل تلقائيًا مع عرض البيانات والتلوين والحجم حسب السمة المختارة.
import { QuranView, VersePopup, ChapterPopup } from "./components/quran";
function MyScreen() {
const [selectedVerse, setSelectedVerse] = useState(null);
const [versePopupVisible, setVersePopupVisible] = useState(false);
return (
<>
<QuranView
pageNumber={1}
onVersePress={(event) => {
setSelectedVerse(event.verse);
setVersePopupVisible(true);
}}
/>
<VersePopup
visible={versePopupVisible}
verse={selectedVerse}
onClose={() => setVersePopupVisible(false)}
/>
</>
);
}
المشكلات التي يحلها المكون
مشكلة عرض المصحف باحترافية
يُعالج المكون التحدي الأساسي في بناء تطبيقات المصحف الإلكتروني، وهو عرض الصور النصية للقرآن بشكل دقيق مع الحفاظ على جودة العرض وقابلية التفاعل. تتطلب هذه المهمة التعامل مع تعقيدات متعددة: محاذاة النصوص، وحجم الخطوط، ومواقع العلامات، والمناطق القابلة للضغط. يقوم المكون بكل هذا تلقائيًا بناءً على بيانات مُعدّة مسبقًا.
مشكلة التفاعل مع المحتوى
يُوفر المكون حلًا متكاملًا للتفاعل مع محتوى المصحف. يتعامل مع التحديات البرمجية مثل: تحديد أي آية تم الضغط عليها عندما تتداخل عدة آيات في سطر واحد، والتعرف على الضغط على جزء من آية تمتد على عدة أسطر، وإدارة الأوامر المختلفة للضغط القصير والطويل. هذه التعقيدات مُجرّدة بالكامل خلف واجهة برمجية بسيطة.
مشكلة التوافق عبر المنصات
يُلغي المكون الحاجة لكتابة كود منفصل لكل منصة. بدلاً من التعامل مع واجهات برمجة مختلفة لنظامي iOS و Android والويب، يمكن للمطور كتابة كود واحد يعمل على جميع المنصات. هذا يُقلل وقت التطوير والصيانة بشكل كبير، ويضمن تجربة متسقة للمستخدمين على مختلف الأجهزة.
مشكلة إدارة البيانات
يُبسّط المكون التعامل مع قاعدة بيانات SQLite من خلال تجريد العمليات المعقدة. لا يحتاج المطور لفهم تفاصيل قاعدة البيانات أو كتابة استعلامات SQL، بل يمكنه استخدام خطاف useQuranData لجلب البيانات المطلوبة بسهولة. المكون يتولى إدارة دورة حياة قاعدة البيانات والتحميل الكسول للصور.
كيفية استخدام المكون في مشروعك
التثبيت والتهيئة
أول خطوة هي تثبيت التبعيات المطلوبة. يحتاج المكون إلى حزمة expo-sqlite للتعامل مع قاعدة البيانات، وexpo-asset لتحميل الأصول، وreact-native-svg لعرض العناصر مثل علامات الآيات وأشرطة السور.
npm install expo-sqlite expo-asset react-native-svg
استيراد واستخدام المكون
الاستخدام الأساسي بسيط للغاية. قم باستيراد المكون من مساره ثم مرر رقم الصفحة المطلوبة. يمكن تخصيص المظهر والسلوك من خلال الخصائص المتاحة.
import { QuranView } from './components/quran';
function App() {
return <QuranView pageNumber={1} />;
}
التحكم في العناصر المرئية
لإظهار أو إخفاء عناصر معينة، استخدم الخصائص المنطقية. مثلاً، لإخفاء علامات الآيات واسم السورة:
<QuranView
pageNumber={1}
showSuraName={false}
showVerseMarkers={false}
showHighlights={false}
/>
التعامل مع الضغطات والإحداثيات
عرّف وظائف لاستقبال الأحداث عند ضغط المستخدم على الآيات أو السور. الوظيفة تستقبل كائنًا يحتوي على البيانات الكاملة للحدث.
const handleVersePress = (event) => {
console.log('آية رقم:', event.verse.number);
console.log('سورة رقم:', event.chapter);
console.log('صفحة رقم:', event.page);
};
const handleChapterPress = (event) => {
console.log('سورة رقم:', event.chapter.number);
};
<QuranView
pageNumber={1}
onVersePress={handleVersePress}
onChapterPress={handleChapterPress}
/>
استخدام النوافذ المنبثقة
المكون يتضمن نوافذ منبثقة جاهزة لعرض معلومات الآيات والسور. يمكن إظهارها عند ضغط المستخدم.
import { QuranView, VersePopup, ChapterPopup } from './components/quran';
import { useState } from 'react';
function MyScreen() {
const [verse, setVerse] = useState(null);
const [showVersePopup, setShowVersePopup] = useState(false);
return (
<>
<QuranView
pageNumber={1}
onVersePress={(event) => {
setVerse(event.verse);
setShowVersePopup(true);
}}
/>
<VersePopup
visible={showVersePopup}
verse={verse}
onClose={() => setShowVersePopup(false)}
/>
</>
);
}
تخصيص الألوان
غيّر ألوان الخلفية والتسطير لتناسب سمة تطبيقك.
<QuranView
pageNumber={1}
backgroundColor="#FFFFFF"
highlightColor="rgba(0, 120, 0, 0.3)"
/>
التنقل بين الصفحات
لعرض صفحات متعددة مع إمكانية التنقل، استخدم FlatList مع paging مفعّل.
import { FlatList, Dimensions } from 'react-native';
import { QuranView } from './components/quran';
const { width } = Dimensions.get('window');
const pages = Array.from({ length: 604 }, (_, i) => i + 1);
function MushafScreen() {
return (
<FlatList
data={pages}
horizontal
pagingEnabled
renderItem={({ item }) => (
<QuranView pageNumber={item} />
)}
style={{ width }}
/>
);
}
هيكل الصفحة والتخطيط
عناصر الصفحة
تتكون كل صفحة من عدة طبقات متراكبة. الطبقة الأولى هي صور أسطر القرآن، وهي صور فعلية للأسطور مُعالجة مسبقًا. الطبقة الثانية هي أشرطة أسماء السور التي تُعرض في مواقعها الصحيحة فوق الصور. الطبقة الثالثة هي علامات أرقام الآيات (الفواصل). الطبقة الرابعة هي مناطق الضغط المرئية فقط عند تفعيل خيار الإبراز. الطبقة الخامسة هي المناطق الشفافة القابلة للتفاعل.
نظام الإحداثيات
يعتمد المكون على نظام إحداثيات نسبي يعتمد على نسبة العرض. جميع المواقع محسوبة كنسب من عرض الشاشة، مما يضمن ظهور الصفحة بشكل متناسب على مختلف أحجام الشاشات. يتعامل المكون تلقائيًا مع التغييرات في حجم الشاشة وإعادة الحساب حسب الحاجة.
خطوات الترحيل والتثبيت
الخطوة الأولى: نسخ الملفات
نقل مجلد quran/ بالكامل من مسار src/components/ إلى المجلد المناسب في المشروع الجديد. يجب أيضًا نسخ ملف SQLiteService.ts إلى مجلد الخدمات، وملف قاعدة البيانات quran.db إلى مجلد الأصول، ومجلد صور الصفحات إلى مسار الأصول.
assets/
├── quran.db
└── images/quran/
├── 1/
│ ├── 1.png
│ └── ...
└── ...
الخطوة الثانية: تثبيت التبعيات
تثبيت الحزم المطلوبة لتشغيل المكون. هذه الحزم متاحة من خلال مستودع npm وتعمل على جميع المنصات المدعومة. يُنصح بتحديد الإصدارات لضمان التوافق مع الإصدار المستخدم في التطوير الأصلي.
npm install expo-sqlite expo-asset react-native-svg
الخطوة الثالثة: إعداد خريطة الصور
إذا تم تغيير مواقع صور الصفحات، يجب تحديث ملف imageMap.ts الذي يحتوي على مسارات الصور. يمكن إنشاء هذا الملف تلقائيًا باستخدام سكريبت التوليد المضمن في المشروع.
node scripts/generate-map.js
الخطوة الرابعة: التحقق من قاعدة البيانات
التأكد من صحة قاعدة البيانات ومحتواها. يمكن استخدام السكريبت المضمن للتحقق من وجود الجداول والبيانات المطلوبة. في حالة ظهور أخطاء مثل "no such table"، يجب التأكد من نسخ ملف قاعدة البيانات بشكل صحيح.
node scripts/check-db-data.js
حالة التطوير والدعم
الوظائف المُنجزة والمُتاحة
يعمل المكون حالياً بشكل كامل في عدة مجالات أساسية تُشكّل العمود الفقري لتطبيق المصحف الإلكتروني. تُمثّل الصفحات الست مئة وأربعة للمصحف الوظيفة الأساسية المُنجزة بالكامل، حيث يمكن عرض أي صفحة من الصفحات بسهولة تامة من خلال تمرير رقم الصفحة المطلوب. يتم تحميل البيانات والصور بشكل ديناميكي مع دعم التخزين المؤقت لتحسين الأداء.
تُعرض أسماء السور بشكل صحيح فوق النص القرآني في مواقعها المناسبة داخل كل صفحة. يتم تحديد موقع اسم السورة بناءً على بيانات chapter_headers المخزنة في قاعدة البيانات، مما يضمن دقة العرض بغض النظر عن حجم الشاشة أو_orientation الجهاز. كما تدعم أشرطة الأسماء التفاعل الكامل مع دعم الضغط القصير والطويل.
علامات نهاية الآيات (الفواصل) مُدمجة بشكل كامل في نظام العرض. تظهر العلامات في مواقعها الصحيحة المحسوبة مسبقًا، وتتكامل مع نظام الأحداث لتوفير تجربة تفاعلية سلسة. يمكن للمستخدمين الضغط على أي علامة آية للحصول على معلومات إضافية أو تنفيذ إجراءات مخصصة.
قاعدة بيانات SQLite مُهيّأة للعمل بكفاءة عالية وتحتوي على جميع البيانات المطلوبة. الجداول مُحسّنة للاستعلام السريع، والبيانات مُنظمة بشكل يدعم الاستخدام الفعّال للذاكرة. الخطاف useQuranData يتولى إدارة جلب البيانات بشكل غير متزامن مع عرض حالات التحميل والأخطاء تلقائيًا.
الوظائف قيد التطوير
يعمل الفريق حاليًا على تطوير عدة ميزات إضافية لتوفير تجربة قرآنية متكاملة. نسخة الويب لا تزال في مراحل التطوير الأولى، حيث تتطلب معالجة بعض التحديات المتعلقة بتحميل الصور والتعامل مع أحداث اللمس في بيئة المتصفح. الهدف هو توفير تجربة متسقة مع النسختين الأصليتين.
مشغل الصوت قيد التصميم والتنفيذ ليدعم التلاوة والاستماع للقرآن الكريم. المخطط يتضمن دعم عدة قراء وتلاوة آيات محددة وتنسيقات صوتية متعددة. يتطلب هذا العمل تكاملاً مع نظام الملفات لتخزين الملفات الصوتية مؤقتًا.
نظام التفاعل مع الآيات (الضغط والضغط المطول) يحتاج إلى تحسينات إضافية. الهدف هو إظهار قوائم خيارات غنية عند التفاعل مع الآية، تتضمن خيارات مثل النسخ والتعليق والتفسير والبحث والمشاركة. كما يُخطط لإضافة تسطيرات مرئية عند تحديد آية معينة.
لماذا Expo
بساطة التطوير
يُوفّر Expo بيئة تطوير متكاملة تُبسّط عملية بناء تطبيقات React Native. لا يحتاج المطور للتعامل مع التكوينات المعقدة لـ Xcode أو Android Studio، فجميع أدوات البناء مُدمجة في بيئة Expo. يمكن تشغيل التطبيق على المحاكي أو الجهاز الحقيقي بنقرة واحدة، ومشاركة التطبيق مع المختبرين عبر رابط مباشر.
دعم المنصات المتعددة
يُعدّ دعم المنصات المتعددة من أهم مزايا Expo. بنفس قاعدة الكود، يمكن بناء تطبيق يعمل على iOS و Android والويب. هذا يُقلل تكلفة التطوير والصيانة بشكل كبير، ويضمن تجربة متسقة للمستخدمين على مختلف المنصات. المكون مبني خصيصًا ليعمل بسلاسة في هذا السياق.
نظام التصدير
يتيح Expo تصدير التطبيق بصيغ مختلفة حسب الحاجة. يمكن إنشاء نسخة أصلية لنظام iOS باستخدام expo run:ios، أو نسخة أصلية لنظام Android باستخدام expo run:android. كما يمكن تصدير تطبيق ويب متكامل يعمل في المتصفح. هذه المرونة تُناسب سيناريوهات النشر المختلفة.
التكامل مع الخدمات
يتكامل Expo مع مجموعة واسعة من الخدمات التي تُعزز إمكانيات التطبيق. خدمات مثل الإشعارات push، والتخزين السحابي، والمصادقة، والتحليلات متاحة كحزم جاهزة. يمكن للمكون الاستفادة من هذه الخدمات لبناء تطبيقات قرآنية متكاملة تجمع بين التلاوة والتفاعل والتعلم.
الصيانة والتحديث
يضمن نظام التحديث OTA من Expo إمكانية تحديث التطبيقات المنشورة دون المرور بعملية إعادة الموافقة على المتاجر. هذا يُمكّن المطورين من إصلاح الأخطاء وإضافة ميزات جديدة بسرعة. كما أن مجتمع Expo الكبير يضمن توفر الدعم والمساعدة عند الحاجة.
الأداء والأمان
تُوفّر التطبيقات المبنية مع Expo أداءً مقاربًا للتطبيقات الأصلية، حيث يتم تجميعها إلى كود أصلي لكل منصة. قاعدة البيانات SQLite المُستخدمة في المكون تعمل محليًا على الجهاز، مما يضمن سرعة الوصول للبيانات وأمانها. لا تتطلب أي بيانات اتصال بالإنترنت للعمل الأساسي.
الخاتمة
يُمثّل مكون QuranView حلاً متكاملاً ومتطورًا لعرض المصحف الإلكتروني في تطبيقات React Native. يجمع المكون بين القوة والمرونة، ويُوفّر واجهة برمجية بسيطة تُمكّن المطورين من بناء تطبيقات قرآنية احترافية في وقت قصير. من خلال الاستفادة من منظومة Expo، يمكن للمكون العمل بسلاسة على جميع المنصات الرئيسية، مما يُوسّع نطاق الوصول للمستخدمين.
إن اعتماد المكون على TypeScript يضمن جودة الكود ويُقلل الأخطاء، بينما يوفر نظام الإحداثيات المرن إمكانيات واسعة للتخصيص والتفاعل. مع الدعم للنمطين الإملائيين والتعامل الذكي مع الضغطات، يُناسب المكون احتياجات مختلف التطبيقات القرآنية، سواء كانت تطبيقات تلاوة بسيطة أو منصات تعليمية متكاملة.
