برمجة تطبيق الهاتف المحمول | الوحدة الثالثة | الدرس الثالث

برمجة تطبيق الهاتف المحمول هو عنوان الدرس الثالث من الوحدة الثالثة التي تحمل اسم “تطوير التطبيقات باستخدام مخترع التطبيقات” من مقرر “هندسة البرمجيات”.

ستتعرف في هذا الموضوع على تطبيقات البرمجة في مخترع التطبيقات، بالإضافة لبرمجة الشاشة الرئيسة، وبرمجة شاشة المُدن، وبرمجة شاشة مَعلَم (المصمك).

لذا قم بقراءة أهداف التعلُّم بعناية، ثم أعد قراءتها وتأكَّد من تحصيل كافة محتوياتها بعد انتهائك من دراسة الموضوع.

أهداف التعلُّم

• معرفة تطبيقات البرمجة في مخترع التطبيقات.
• برمجة الشاشة الرئيسة.
• برمجة شاشة المُدن.
• برمجة شاشة مَعلَم (المصمك).

هيا لنبدأ!

تطبيقات البرمجة في مخترع التطبيقات (Programming Application in App Inventor)

قبل البدء بتطوير التطبيقات باستخدام اللبنات البرمجية، ستتعرَّف على بعض المفاهيم والأوامر الأساسية في عملية التطوير مثل: التعامل مع البيانات المتغيِّرة، وتنفيذ منطق البرنامج وتدفقه.

المتغيرات في مخترع التطبيقات Variable in App Inventor

يتيح لك متغير التطبيقات في app inventor  إنشاء المتغيرات والتحكم بها، حيث يمكن تكوين المتغيرات وتهيئتها بأنواع متعددة من البيانات مثل:

• الأرقام العشوائية.
• السلاسل النصية.

يوجد للمتغيرات في مخترع التطبيقات نطاقات مخصصة لعملها كما يلي:

• عام (Global)

يمكن الوصول للمتغيرات من خلال جميع عمليات التحكم والإجراءات واللبنات البرمجية.

• محلي (Local)

لا يمكن الوصول إلى المتغيرات إلا داخل الإجراء الذي يتضمنها.

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

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

القوائم في مخترع التطبيقات Lists in App Inventor

يمكن تعريف القوائم على أنها هيكل بيانات بسيط ومفيد يمكن استخدامه لتنفيذ منطق التطبيق (Application Logic)ويقدم مخترع التطبيقات طرقًا لمعالجة البيانات في القوائم والتفاعل معها.

مكونات قائمة الخيارات The ListPicker Component

تتيح لك (ListPicker) قائمة الخيارات إنشاء منطق خاص بالتطبيق اعتمادًا على اختياراتك، وعند الضغط على مكون ListPicker (قائمة الخيارات) يتغير مظهر الشاشة لعرض محتويات القائمة، وتسمى خاصية المكون التي تخزن بيانات القائمة باسم Elements (العناصر).

إرسال المتغيرات إلى شاشة أخرى Sending Variables to Another Screen

يتيح مخترع التطبيقات للبرنامج إرسال قيمة تهيئة يمكن الوصول إليها بواسطة الشاشة التالية وذلك عند استخدام أمر لفتح شاشة أخرى.

العبارات الشرطية IF في مخترع التطبيقات Conditional IF Statements in App Inventor

تم إنشاء اللبنات البرمجية If الشرطية في مخترع التطبيقات بشكل مشابه للقوائم، ويمكنك اضافة عبارتي If و else إلى اللبنات البرمجية باستخدام أيقونة الترس.

مكون ترتيب التمرير العمودي The Vertical Scroll Arrangement Component

يتم استخدام مكون VerticalScrollArrangement (ترتيب الترتيب العمودي) لتنسيق ظهور المكونات الأخرى على المحور الرأسي، وإنشاء مجمع لمحاذاتها كما يدعم خاصية Scrolling (التمرير) للمكونات التي لا تتناسب مع حجم الشاشة.

يمكن تغيير محاذاة المكونات الموجودة داخل المجمع باستخدام اللبنتين البرمجيتين التاليتين:

مكون الترتيب الأفقي The Horizontal Arrangement Component

يتم استخدام المكون Horizontal Arrangement (الترتيب الأفقي) لتنسيق ظهور المكونات الأخرى أفقيًا، وإنشاء مجمع لمحاذاتها.

يمكن تغيير محاذاة المكونات الموجودة داخل المجمع باستخدام اللبنتين البرمجيتين التاليتين:

لمعرفة المزيد من المعلومات عن المتغيرات والقوائم في مخترع التطبيقات، قم بالاطّلاع على الرابط التالي:

المتغيرات والقوائم في مخترع التطبيقات – Technovationchallenge

بإمكانك مراجعة محتوى موضوع “برمجة تطبيق الهاتف المحمول” من بدايته وحتى نهاية هذا القسم، من خلال الرابط التالي:

برمجة الشاشة الرئيسة (Programming the Home Screen)

ستنقل الشاشة الرئيسة Screen1 (شاشة 1) المستخدم إلى شاشة Cities (المدن)، وستُحدد اللغة التي سيتم استخدامها على الشاشات التالية أيضًا.

برمجة أزرار دعم اللغة Programming Language Support Buttons

ستُبرمج الآن أزرار اللغة لتغيير النص على الصفحة الرئيسة وتخزين متغير يحدد اللغة المناسبة للنص في الشاشة التالية ستكون اللغة الإنجليزية هي اللغة الافتراضية لكل الصفحات.

لبرمجة زرّي اللغة في الشاشة الرئيسة:

1. حدِّد لبنة Click (عند.الضغط) لمُكوِّن discover_button_en (زرّ_اكتشف_بالإنجليزية).
2. حدِّد مجموعة التحكم وافتح شاشة Cities (المُدن) باستخدام startValue (قيمة البداية).
3. اضبط startValue (قيمة البداية) إلى en (الإنجليزية).
4. كرِّر الخطوات أعلاه لمُكوِّن discover_button_ar (زرّ_اكتشف_بالعربية) واضبط startValue (قيمة البداية) إلى ar (العربية).

بإمكانك مراجعة محتوى موضوع “برمجة تطبيق الهاتف المحمول” بدايةً من عنوان “برمجة الشاشة الرئيسة” وحتى نهاية هذا القسم، من خلال الرابط التالي:

برمجة شاشة المُدن (Programming the Cities Screen)

كما ذكرنا سابقًا، فإن الشاشة الرئيسة ستنقل المستخدم إلى الصفحة الخاصة بالمدن، كما ستُحدد اللغة التي سيتم استخدامها على الشاشات التالية أيضًا.

إنشاء المحتوى الخاص بقائمة الخيارات Creating the Content for the ListPicker

يجب أن تملأ ListPicker Elements (عناصر قائمة الخيارات) بالنص المناسب حسب اللغة المستخدمة.

• الخطوة الأولى لذلك هي تحديد قوائم النقاط البارزة للوجهات المختلفة باللغتين العربية والإنجليزية.
• الخطوة الثانية هي تهيئة المكونات ListPicker (قائمة الخيارات باللغة المناسبة).

لإنشاء قوائم المحتوى:

1. أنشئ متغيّرًا جديدًا يدعى riyadh_highlights_en (معالم_الرياض_بالإنجليزية).
2. أنشئ اللبنة البرمجية make a list (إنشاء قائمة) وضعها في المتغيّر riyadh_highlights_en(معالم_الرياض_بالإنجليزية).
3. املأ القائمة بأسماء الأماكن باللغة الإنجليزية.
4. كرِّر العملية للمتغيّر الخاص باللغة العربية riyadh_highlights_ar (معالم_الرياض_بالعربية).

يتم استخدام عبارة if then لبرمجة عنصر القائمة بحيث يفتح الشاشة المرتبطة به عند الضغط عليه. إذا ضغط المستخدم على AI Masmak (المصمك)، فستفتح الصفحة المتعلقة به.

لتحديد محتوى القائمة:

1. حدِّد اللبنة BeforePicking (قَبل الاختيار) لمُكوِّن riyadh_list (قائمة_الرياض).
2. أنشئ عبارة if else if الشرطية.
3. أضف شرط equals (يساوي) لعبارة if وشرط آخر لعبارة else if.
4. أضف متغيّر get start value (الحصول على قيمة البداية) إلى الجانب الأيسر من شرطَي equals(يساوي).
5. أضف en (الإنجليزية) إلى الجانب الأيمن من شرط equals (يساوي) الأول، وar (العربية) إلى الجانب الأيمن من شرط equals (يساوي) الثاني.
6. اختر أمر set Elements to (ضبط العناصر إلى) من قائمة Riyadh_list (قائمة_الرياض).
7. أضف متغيّرات القائمة المناسبة للأمر أعلاه.
8. أضف لبنة التعليمات البرمجية if else if إلى حدث BeforePicking (قَبل الاختيار).

بإمكانك مراجعة محتوى موضوع “برمجة تطبيق الهاتف المحمول” بدايةً من عنوان “برمجة شاشة المُدن” وحتى هذه النقطة، من خلال الرابط التالي:

فتح صفحة جديدة من قائمة الخيارات Opening a New Page from the ListPicker

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

 للحصول على اسم الصفحة الجديدة للمَعلَم من التحديد ListPicker (قائمة الخيارات):

1. أنشئ variable (متغيّر) جديد اسمه selection (اختيار).
2. أضف empty string (سلسلة نصيّة فارغة) إلى المتغيّر selection (اختيار).
3. حدِّد الحدث AfterPicking (بَعد الاختيار) لمُكوِّن riyadh_list (قائمة الرياض).
4. أضف المتغيّر selection (اختيار) داخل الحدث AfterPicking (بَعد الاختيار).
5. اضبط المتغيّر selection (اختيار) إلى خاصية Selection (اختيار) لـ riyadh_list (قائمة الرياض).
6. أضف لبنة التعليمات البرمجية if داخل الحدث AfterPicking (بَعد الاختيار).

فتح الصفحة المناسبة لاختيار قائمة الخيارات Opening the Appropriate Page for the ListPicker Selection

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

لفتح الصفحة المناسبة من التحديد ListPicker (قائمة الخيارات):

1. أضف شرط or الذي يحتوي على شرطّي equals (يساوي)، وضعهما في عبارة if داخل حدث AfterPicking (بَعد الاختيار).
2. أضف المتغيّر selection (اختيار) إلى الجانب الأيسر من شرطَي equals (يساوي).
3. أضف empty string (سلسلة نصيّة فارغة) المتعلقة بمَعلَم AI Masmak (المصمك) باللغة الإنجليزية والعربية إلى الجانب الأيمن من شرطَي equals (يساوي).
4. افتح شاشة AI Masmak (المصمك) مع تحديد StartValue (قيمة البداية) التي استخدمتها في الشاشة السابقة.

بإمكانك مراجعة محتوى موضوع “برمجة تطبيق الهاتف المحمول” بدايةً من عنوان “فتح صفحة جديدة من قائمة الخيارات” وحتى نهاية هذا القسم، من خلال الرابط التالي:

برمجة شاشة مَعلَم (المصمك) (Programming the Highlight Screen (AI Masmak))

ستتغير لغة الشاشة الخاصة بالمعلم وكذلك تنسيق النص اعتمادًا على اختيار اللغة من الصفحة الرئيسة، وستُقدم هذه الشاشة أيضًا خيار عرض خريطة تفاعلية الموقع المعلم.

تغيير اللغة ديناميكيًا لصفحة المعلم Dynamically Changing the Language for the Highlight Page

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

ستتم محاذاة النص بشكل صحيح بناءً على اللغة التي تم اختيارها في الصفحة الرئيسة، حيث تتم محاذاة النص إلى اليسار إذا كان اختيار اللغة هو الإنجليزية، ومحاذاة النص إلى اليمين إذا كان اختيار اللغة هو العربية.

لتغيير اللغة ديناميكيًا:

1. أنشئ المتغيّرات المناسبة لتسمية النصوص.
2. أضف empty string (سلسلة نصيّة فارغة) لتسميتي title (العنوان)، وdescription (الوصف) الخاصين بمَعلَم AI Masmak (المصمك) بكل من اللغتين الإنجليزية والعربية.
3. حدِّد الحدث initialize (التهيئة) لشاشة AI Masmak.
4. أضف لبنة التعليمات البرمجية if else if داخل حدث initialize (التهيئة).
5. أضف شرط equals (يساوي) داخل كل عبارة if.
6. أضف get start value (الحصول على قيمة البداية) إلى الجانب الأيسر من شرطَي equals (يساوي).
7. أضف en (الإنجليزية) إلى الجانب الأيمن من شرط equals (يساوي) الأول، وar (العربية) إلى الجانب الأيمن من شرط equals (يساوي) الثاني.
8. اضبط خاصية Text (النصّ) الخاصة بـ title_label (عنوان_التسمية) إلى title variable (عنوان المتغيّر) الخاص باللغة المناسبة.
9. اضبط خاصية Text (النصّ) الخاصة بـ description_Label (وصف_التسمية) إلى description variable (وصف المتغيّر) للغة المناسبة.
10. اضبط خاصية Alignhorizontal (المحاذاة الأفقية) لأداة verticalArrangement1 (الترتيب العمودي1) إلى اتجاه المحاذاة المناسب للغة.

برمجة الخريطة التفاعلية Programming the Interactive Map

سيفتح التطبيق خريطة تفاعلية للمعلم عند ضغط المستخدم على زر الخريطة، وسيتم تهيئتها حسل إحداثيات المعلم.

لبرمجة الخريطة التفاعلية:

1. أضف متغيّرًا جديدًا باسم coordinates (الإحداثيات).
2. أضف النصّ التالي إلى متغيّر coordinates (الإحداثيات): 6312, 46.7134.
3. حدِّد حدث Click (الضغط) لمُكوِّن map_button (زرّ_الخريطة).
4. اضبط خاصية CenterFromString (توسيط من السلسلة النصيّة) لمكوّن map (الخريطة) إلى المتغيّر coordinates (الإحداثيات).
5. اضبط خاصية Visible (مرئي) لمُكوِّن map (الخريطة) للبنة التعليمات البرمجية لتكون true (صحيحة).

لقد أصبح التطبيق جاهزًا الآن وعليك اختباره، استخدم محاكي الأندرويد (Android Emulator) أو تنزيل تطبيق وتثبيته وتشغيله على جهاز أندرويد الخاص بك. ويمكنك أيضًا مسح رمز الاستجابة السريعة (QR) باستخدام جهاز الأندرويد لمعاينته، يمكنك مشاهدة شاشات تطبيقك عند تشغيل البرنامج باستخدام المحاكي في الصور التوضيحية التالية:

فيما يلي الشاشات التي ستظهر عند الضغط على الزرّ باللغة العربية:

بإمكانك مراجعة محتوى موضوع “برمجة تطبيق الهاتف المحمول” بدايةً من عنوان “برمجة شاشة معلم المصمك” وحتى نهاية الموضوع، من خلال الرابط التالي:

اختبر تحصيلك لمحتوى الموضوع من خلال الرابط التالي:

الواجب الإلكتروني

إلى هنا يكون قد انتهى موضوع “برمجة تطبيق الهاتف المحمول”، لا تنسوا مراجعة أهداف التعلُّم أعلى المقال، وانتظرونا في الموضوع القادم!

روابط هامة

مقررات الفصل الدراسي الأول