الأحد، 5 مايو 2019

تطبيق القرآن الكريم

تطبيق القرآن الكريم
سنقوم من خلال هذا الدرس بإنشاء تطبيق للقرآن الكريم، يعتمد على الملفات الصوتية المتاحة على الإنترنت، ليمكن من الوصول إليها وتشغيلها، والتحكم بها، بهدف الاحتفاظ بحجم صغير للبرنامج.




الهدف من التطبيق:

·       استخدام مكون الترتيب الأفقي (HorizontalArrangement)، ومكون الترتيب الرأسي (VerticalArrangement) لترتيب المكونات على شاشة التطبيق.
·       استخدام مكون قائمة العناصر(ListPicker) إنشاء قائمة عناصر داخل التطبيق.
·       استخدام إجراء تهيئة الشاشة (Screen.Initialize) لتحميل الرسائل المخصصة بعد تشغيل التطبيق.
·       استخدام مكون لاعب الوسائط (Player) الذي يستخدم لقراء ملفات الوسائط (صوت).
·       استخدام مكون المنزلق (Slider) للتحكم في درجة الصوت من خلال التطبيق.
الأدوات المستخدمة في التطبيق:

الأداة
الفئة
الاسم
الوظيفة
Label
User Interface
Sura
اسم الصورة التي يتم تشغيلها.
Label
User Interface
Volume
عنوان اسم منزلق التحكم في الصوت.
VerticalArrangement
Layout
VerticalArrangement1
يضم كافة عناصر التطبيق.
VerticalArrangement
Layout
VerticalArrangement2
يتضمن صورة التطبيق.
HorizontalArrangement
Layout
HorizontalArrangement1
يتضمن قائمة العناصر التي تتضمن سور القرآن الكريم المضمنة في التطبيق.
HorizontalArrangement
Layout
HorizontalArrangement2
يضم أزرار التحكم في تشغيل السور.
image
User Interface
image1
يعرض صورة التطبيق.
ListPicker
User Interface
ListPicker
قائمة العناصر التي ستضم سور القرآن الكريم.
Button
User Interface
Pause
توقيف مؤقت لملف الصوت المشغل بشكل مؤقت.
Button
User Interface
Play
يشغل ملف الصورة.
Button
User Interface
Stop
يوقف تشغيل ملف السورة المشغل.
Slider
User Interface
Slider1
قائمة سور القرآن.
Player
Media
Player1
مشغل ملفات الوسائط المختارة.

فكرة التطبيق:
يتم عرض قائمة في التطبيق تتضمن أسماء سور القرآن الكريم المتضمنة في التطبيق، الذي يمكن أن يتسع للقرآن الكريم كله، مع الاحتفاظ بحجم برنامج صغير، نتيجة للاعتماد على تشغيل سور القرآن الكريم بشكل مباشر من خادم متاح على الإنترنت، ويمكن التطبيق من التحكم في السور بتشغيلها أو توقيفها مؤقتا أو توقيفها تمام، ويمكن كذلك في التحكم في درجة الصوت من خلال منزلق خاص يتم تخصيصه داخل التطبيق.
- ابحث في الإنترنت عن صور مناسبة لتستخدمها كرمز للبرنامج في مكون الصورة (image1)، وكذلك صور الأزرار (pause)، (play)، (stop)، باستخدام خاصية الصورة (image) لكل زر.
- انتقل إلى الموقع التالي على الإنترنت (mp3quran.net)، وحدد المقرئ الذي تريد استخدام صوته وتلاوته في التطبيق، اضغط رابط (تحميل ملف mp3) بالزر الأيمن للفأرة، ثم اختر أمر (نسخ الرابط)، واحتفظ بروابط السور التي تريد إضافتها للتطبيق في ملف نص، وهي تكون على النسق التالي: (http://server10.mp3quran.net/trablsi/001.mp3)
خطوات التطبيق:
1- قم بإنشاء تطبيق جديد في آب اينفنتور، وقم بتسميته بالاسم "Quran".
2- قم بإضافة مكونات التطبيق على الشاشة، قم بتخصيصها لتكون كما بالشكل التالي:



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



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



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



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



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



وبذلك تتم إضافة أسماء السور إلى القائمة، بعد استدعائها من متغير التهيئة العام.
إضافة روابط السور داخل القائمة:
نحتاج في هذه الخطوة الأخيرة إلى إضافة الارتباطات بشكل مرتب مع أسماء السور، وأن تتم كتابة اسم السورة المختارة أعلى منزلق الصوت، وتعيين الرابط لمكون المشغل (Player1) ليقوم بتشغيل السورة المختارة. يتم ذلك باتباع الخطوات التالية:
1- انقر عنصر القائمة (ListPicker1)، ثم اسحب كتلة (ListPicker1.AfterPicking) إلى منطقة الكتل.
2- انقر عنصر عنوان (Sura) أسفل منطقة الكتل، ثم اسحب كتلة (set Sura.Text to) داخل كتلة (ListPicker1.AfterPicking).
3- انقر فئة كتل القوائم (Lists)، ثم اسحب كتلة إنشاء قائمة (select list item list index) داخل متغير التهيئة العام (set Sura.Text to).
4- انقر فئة كتل المتغيرات (Variables) ثم اسحب متغير (get) فارغ وضعه في نهاية كتلة (select list item list)، ثم اختر متغير التهيئة العام الخاص بأسماء السور (global listMp3) من قائمة (get).
5- انقر عنصر القائمة (ListPicker1) أسفل قائمة المكونات، ثم اسحب كتلة (ListPicker1.SelectionIndex) داخل مكون (select list item index).
6- انقر عنصر عنوان المشغل (Player1) أسفل منطقة الكتل، ثم اسحب كتلة (set Player.Source) داخل كتلة (ListPicker1.AfterPicking).
7- انقر فئة كتل القوائم (Lists)، ثم اسحب كتلة إنشاء قائمة (select list item list index) داخل متغير مصدر المشغل (set Player.Source).
8- انقر فئة كتل المتغيرات (Variables) ثم اسحب متغير (get) فارغ وضعه في نهاية كتلة (select list item list)، ثم اختر متغير التهيئة العام الخاص بروابط السور (global listStram) من قائمة (get).
8- انقر عنصر القائمة (ListPicker1) أسفل قائمة المكونات، ثم اسحب كتلة (ListPicker1.SelectionIndex) داخل مكون (select list item index).



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



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




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





ليست هناك تعليقات:

إرسال تعليق