إنشاء تطبيق القرآن الكريم في اب انفنتور

الهدف من التطبيق القرآن الكريم على اب انفنتور

الأدوات المستخدمة في التطبيق

فكرة التطبيق

ابحث في الإنترنت عن صور مناسبة لتستخدمها كرمز للبرنامج في مكون الصورة (image1)، وكذلك صور الأزرار (pause)، (play)، (stop)، باستخدام خاصية الصورة (image) لكل زر.

انتقل إلى الموقع التالي على الإنترنت (mp3quran.net)، وحدد المقرئ الذي تريد استخدام صوته وتلاوته في التطبيق، اضغط رابط (تحميل ملف mp3) بالزر الأيمن للفأرة، ثم اختر أمر (نسخ الرابط)، واحتفظ بروابط السور التي تريد إضافتها للتطبيق في ملف نص.

خطوات التطبيق

• قم بإنشاء تطبيق جديد في آب اينفنتور، وقم بتسميته بالاسم "Quran".
• قم بإضافة مكونات التطبيق على الشاشة، قم بتخصيصها لتكون كما بالشكل التالي:

إضافة السلوكيات لمكونات التطبيق

بعد أن قمنا بإضافة وتصميم مكونات التطبيق وترتيبها على الشاشة، سنقوم في هذه الخطوة بضبط سلوكيات المكونات (Behaviors) لتستجيب للأحداث (Events) أثناء تشغيل التطبيق.


إضافة استجابة الضغط على أزرار التحكم في تشغيل السورة
انتقل إلى شاشة الكتل، انقر عنصر الزر (Play)، ثم اسحب كتلة (Play.Clicl) إلى منطقة الكتل. ثم انقر عنصر المشغل (Player1) أسفل فئات الكتل، ثم اسحب كتلة (Player1.Start) داخل كتلة (Play.Clicl). تقوم هذه الكتلة بتشغيل ملف الصوت المحمل من خلال مكون (Player1).
كرر نفس الخطوة مع الزرين الآخرين لتكون كما بالشكل التالي:

• ليتم توقيف السورة مؤقتا عندما يتم الضغط على زر (Pause)، ويتم توقيف ملف الصوت تمام عندما يتم الضغط على زر (Stop).
• التحكم في الصوت:
• انتقل إلى شاشة الكتل، انقر عنصر المنزلق (Slider)، ثم اسحب كتلة (Slider.PositionChanged) إلى منطقة الكتل. ثم انقر عنصر المشغل (Player1) أسفل فئات الكتل، ثم اسحب كتلة (Player1.Volume) داخل كتلة (Slider.PositionChanged).
• انقر فئة كتل المتغيرات (Variables) ثم اسحب متغير (get) فارغ وضعه في نهاية كتلة (Player1.Volume)، ثم اختر المتغير (thumbPosition) من قائمة (get).
• تقوم هذه الكتلة بتغيير درجة الصوت وفقا للوضعية المحددة على منزلق الصوت (thumbPosition).

إضافة أسماء السور

• نحتاج لقائمة العناصر أن تكون محملة بأسماء سور القراءة الكريم المضمنة في التطبيق طول تشغيله، لذلك سنقوم بتخصيص عناصر هذه القائمة داخل متغير التهيئة العام (initialize global). ولعلم ذلك نتبع ما يلي:
• انقر فئة كتل المتغيرات (Variables) ثم اسحب متغير التهيئة العام (initialize global to) إلى منطقة الكتل، وقم بتسمية هذا المتغير (listMp3).
• انقر فئة كتل القوائم (Lists)، ثم اسحب كتلة إنشاء قائمة (make a list) داخل متغير التهيئة العام (initialize global to).
• انقر زر النجمة الزرقاء داخل كتلة إنشاء القائمة، وقم بإضافة عناصر أخرى (item) داخل القائمة، بعدد السور المطلوب إضافتها في التطبيق.
• انقر قائمة كتل النصوص (Text) ثم اسحب كتلة نص فارغة وضعها في نهاية قائمة إنشاء القائمة (make a list)، واكتب اسم السورة في المكان الفارغ.
• كرر الخطوات السابقة لإضافة معاملات جديدة إلى الكتلة السابقة لتستوعب السور التي تريد تضمينها في التطبيق.

إضافة روابط (Mp3) الخاصة بالسور:
قمنا في الخطوة السابق بإضافة أسماء السور إلى القائمة، من خلال متغير التهيئة العام (initialize global). وسنقوم في هذه الخطوة بإضافة روابط ملفا (mp3) للسور في متغير تهيئة عام آخر، ولعلم ذلك نتبع ما يلي:

انقر فئة كتل المتغيرات (Variables) ثم اسحب متغير التهيئة العام (initialize global to) إلى منطقة الكتل، وقم بتسمية هذا المتغير (listStram).
انقر فئة كتل القوائم (Lists)، ثم اسحب كتلة إنشاء قائمة (make a list) داخل متغير التهيئة العام (initialize global to).
انقر زر النجمة الزرقاء داخل كتلة إنشاء القائمة، وقم بإضافة عناصر أخرى (item) داخل القائمة، بعدد روابط السور المطلوب إضافتها في التطبيق.
انقر قائمة كتل النصوص (Text) ثم اسحب كتلة نص فارغة وضعها في نهاية قائمة إنشاء القائمة (make a list)، وقم بلصق رابط السورة الأولى في كتلة النص.
كرر الخطوات السابقة لإضافة روابط السورة المضمنة في التطبيق بنفس الترتيب المتبع في قائمة أسماء السور.

إضافة أسماء السور على القائمة:

• بعد أن قمنا بإضافة أسماء السور المضنة في التطبيق في متغير عام، سنحتاج لإضافة أسماء هذه الصور داخل القائمة، ويكون ذلك من خلال ما يلي:
• انقر عنصر القائمة (ListPicker1)، ثم اسحب كتلة (ListPicker1.BeforePicking) إلى منطقة الكتل. ثم انقر عنصر القائمة (ListPicker1) مرة أخرى، ثم اسحب كتلة (ListPicker1.Elements) داخل كتلة (ListPicker1.BeforePicking).
• انقر فئة كتل المتغيرات (Variables) ثم اسحب متغير (get) فارغ وضعه في نهاية كتلة (ListPicker1.Elements)، ثم اختر متغير التهيئة العام الخاص بأسماء الصور (global listMp3) من قائمة (get).

وبذلك تتم إضافة أسماء السور إلى القائمة، بعد استدعائها من متغير التهيئة العام.
إضافة روابط السور داخل القائمة:
نحتاج في هذه الخطوة الأخيرة إلى إضافة الارتباطات بشكل مرتب مع أسماء السور، وأن تتم كتابة اسم السورة المختارة أعلى منزلق الصوت، وتعيين الرابط لمكون المشغل (Player1) ليقوم بتشغيل السورة المختارة. يتم ذلك باتباع الخطوات التالية:

• انقر عنصر القائمة (ListPicker1)، ثم اسحب كتلة (ListPicker1.AfterPicking) إلى منطقة الكتل.
• انقر عنصر عنوان (Sura) أسفل منطقة الكتل، ثم اسحب كتلة (set Sura.Text to) داخل كتلة (ListPicker1.AfterPicking).
• انقر فئة كتل القوائم (Lists)، ثم اسحب كتلة إنشاء قائمة (select list item list index) داخل متغير التهيئة العام (set Sura.Text to).
• انقر فئة كتل المتغيرات (Variables) ثم اسحب متغير (get) فارغ وضعه في نهاية كتلة (select list item list)، ثم اختر متغير التهيئة العام الخاص بأسماء السور (global listMp3) من قائمة (get).
• انقر عنصر القائمة (ListPicker1) أسفل قائمة المكونات، ثم اسحب كتلة (ListPicker1.SelectionIndex) داخل مكون (select list item index).
• انقر عنصر عنوان المشغل (Player1) أسفل منطقة الكتل، ثم اسحب كتلة (set Player.Source) داخل كتلة (ListPicker1.AfterPicking).
• انقر فئة كتل القوائم (Lists)، ثم اسحب كتلة إنشاء قائمة (select list item list index) داخل متغير مصدر المشغل (set Player.Source).
• انقر فئة كتل المتغيرات (Variables) ثم اسحب متغير (get) فارغ وضعه في نهاية كتلة (select list item list)، ثم اختر متغير التهيئة العام الخاص بروابط السور (global listStram) من قائمة (get).
• انقر عنصر القائمة (ListPicker1) أسفل قائمة المكونات، ثم اسحب كتلة (ListPicker1.SelectionIndex) داخل مكون (select list item index).

تجريب التطبيق

• اختر أمر (Al companion) من قائمة (Connect).
• وجه كاميرا الهاتف إلى الكود الذي سيظهر على الشاشة، واضغط زر (Scan QR) code) ليتم تشغيل التطبيق على الهاتف.
• انقر عنصر القائمة (اختر سورة)، واختر سورة من القائمة التي ستظهر.
• اضغط الأزرار الموجودة اسفل عنصر القائمة للتحكم في السورة بتشغيل الصوت أو إيقافه مؤقتا أو إيقافه.
• استخدم منزلق الصوت لتعلية الصوت أو تخفيضه.

الشكل الكامل لكتل التطبيق
هذا هو الشكل العامل لكتل التطبيق.

رابط التطبيق بالمعرض