مقدمة إلى مخترع التطبيقات MIT | الوحدة الثالثة | الدرس الأول

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

ستتعرف في هذا الموضوع على تطوير تطبيقات الهاتف المحمول، بالإضافة لمخترع التطبيقات MIT (MIT App Inventor)، والبدء بإنشاء التطبيقات في مخترع التطبيقات، والقيام ببرمجة الزرّ التفاعلي، واختبار التطبيق.

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

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

• معرفة تطوير تطبيقات الهاتف المحمول.
• معرفة مُخترع التطبيقات MIT.
• إنشاء التطبيقات باستخدام مخترع التطبيقات MIT.
• برمجة الزرّ التفاعلي.
• اختبار التطبيق.

هيا لنبدأ!

تطوير تطبيقات الهاتف المحمول (Developing Mobile Applications)

تشبه عملية تصميم تطبيقات الهاتف المحمول وتطويرها عملية تطبيق موقع الويب أو تطبيق حاسب مكتبي.

تعريف هام

تطبيق الهاتف المحمول (Mobile Application)

يعدُّ تطبيق الهاتف المحمول نوعًا من البرامج التطبيقية المُصمَّمة للعمل على الأجهزة المحمولة، كالهواتف الذكية والأجهزة اللوحية.

تعريف هام

مخترع التطبيقات MIT (MIT App Inventor)

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

يمكِن تطوير تطبيقات الأجهزة المحمولة بلغات برمجة خاصة مثل: جافا (Java) أو كوتلن (Kotlin) أو سويفت (Swift). يمكِن أيضًا تجهيز التطبيق للتوزيع باستخدام أداة مخترع التطبيقات.

تطوير تطبيق خاص بالسياحة Developing a Tourism Application

ستُطور تطبيقًا للسياح الزائرين للمملكة العربية السعودية يسمح لهم بالبحث عن المعالم المميزة والأكثر جاذبية فيها.

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

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

في هذا الدرس سنعمل على تصميم جميع الشاشات الخاصة بهذا التطبيق، ثم سنقوم ببرمجتها في الدرس التالي.

 

الاختلافات بين النمذجة الأولية لواجهة المستخدم وتطوير واجهة المستخدم Difference between Prototyping UI and Developing UI

عند تصميم نماذج شبكية باستخدام أداة تصميم النماذج الأولية، يتم ترتيب ظهور العناصر والمكونات على الشاشة بشكل مبدئي.

يتم ترتيب هذه المكونات ديناميكيًا وفقًا للأداة المستخدمة عند تطوير التطبيق الفعلي.

يُستخدم مخترع التطبيقات MIT كما في معظم منصات التطوير مجمعًا للمكونات (Container Components)لترتيب ومحاذاة المكونات الأخرى الموضوعة بداخله. ضع في اعتبارك أن طرائق إنشاء واجهة المستخدم تختلف بين مرحلة إنشاء النماذج الأولية، ومرحلة التطوير الفعلي للتطبيق.

معلومة

تم تطوير مخترع التطبيقات (App Inventor) بواسطة قوقل (Google) عام 2010 وتتم إدارته الآن بواسطة معهد ماساتشوستس للتقنية (Massachusetts Institute of Technology – MIT).

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

مخترع تطبيقات أندرويد – ويكيبيديا

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

الانتقال من النموذج الأولي إلى التطبيق (Transitioning from Prototype to Application)

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

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

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

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

النقاط الرئيسة المستفادة من الملاحظات والتغذية الراجعة بخصوص النموذج الأولي هي كالتالي:

• يجب وضع مكونات شاشات المدن والمعالم المميزة داخل مجمع بلون خلفية يختلف قليلاً عن صورة العلم.
• يجب أن يكون لشاشة المعالم المميزة مظهر متناسق مع صفحة المدن.
• من المفيد توفير طريقة لعرض الموقع الخاص بكل معلم يتم عرضه.

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

البدء بإنشاء التطبيقات في مخترع التطبيقات (Start Building Apps with App Inventor)

للبدء بإنشاء التطبيقات باستخدام مخترع التطبيقات MIT، يلزمك تسجيل الدخول إلى مخترع التطبيقات باستخدام حسابك في قوقل.

لبدء مخترع التطبيقات MIT:

1. انتقل إلى موقع الويب mit.edu واضغط على Create Apps! (إنشاء تطبيقات).
2. سجل الدخول باستخدام حساب قوقل الخاص بك.
3. ستظهر الآن مساحة عمل MIT App Inventor (مخترع التطبيقات MIT).

لبدء مشروع جديد في مخترع التطبيقات MIT:

1. اضغط على Start new project (بدء مشروع جديد).
2. اكتب اسمًا لمشروعك.
3. اضغط على OK (موافق).

واجهة مخترع التطبيقات (The App Inventor Interface)

يتم تقسيم واجهة مخترع التطبيقات إلى قسمين وهما:

• التصميم.
• اللبنات البرمجية.

يمكن الوصول إلى هذين القسمين بالتبديل بين خيارين من أعلى يمين الشاشة:

• المصمم (Designer): هو المكان الذي تُدرج فيه المكونات في الشاشة وتغيّر خصائصها الأساسية.
• اللبنات البرمجية (Blocks): هو المكان الذي تقوم فيه ببرمجة تلك المكونات.

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

تغيير خصائص المُكوِّن (Changing the Properties of a Component)

ستجعل عنوان الشاشة الأولى Home (الأولى) عوضًا عن Screen1 (الشاشة1)، وستكون تلك الشاشة بمثابة الشاشة الرئيسة للتطبيق.

ستُغير Title (العنوان) إلى Home (الرئيسة) في Viewer  (العارض) كما هو موضح في الشكل أدناه.

لتغيير عنوان الشاشة:

1. حدِّد Screen1 (شاشة 1)، من قسم Components (المكوِّنات).
2. مرِّر الشريط الجانبي في قسم Properties (الخصائص) لأسفل.
3. في حقل Title (العنوان)، اكتب كلمة Home (الرئيسة).

إضافة زر إلى الشاشة Adding a button to the screen

سننشئ الآن زر أمر يسمى  Visit KSA (زيارة المملكة العربية السعودية)، وعند الضغط على هذا الزر سيفتح التطبيق شاشة جديدة ويعرض الوجهات التي يمكن زيارتها في المملكة العربية السعودية.

لإضافة المُكوِّن Button (زرّ):

1. اسحب المُكوِّن Button (زرّ) وأفلته من لوحة User Interface (واجهة المُستخدِم) إلى الشاشة.
2. اضغط على Rename (إعادة تسمية).
3. اكتب Visit_KSA (زيارة المملكة العربية السعودية).
4. ثم اضغط على OK (موافق).
5. مرِّر الشريط الجانبي لأسفل في قسم Properties (الخصائص)، ثم اضغط على Text (النصّ) واكتب Visit Saudi Arabia (زيارة المملكة العربية السعودية).

محاذاة مكونات الشاشة Aligning the Components of the Screen

يجب أن تضع أزرار التطبيق في منتصف الشاشة.

لوضع الزرّ في منتصف الشاشة:

1. حدِّد Screen1 (شاشة 1) من قسم Components (المُكوِّنات).
2. من قسم Properties (الخصائص)، ومن AlignHorizontal (محاذاة أفقية) اختر Center: 3 (المنتصف: 3).
3. من AlignVertical (محاذاة عمودية) اختر Center: 2 (المنتصف: 2).

إضافة صورة خلفية إلى الشاشة Adding a Background Image to the Screen

ستجري بعض التحسينات على التطبيق من خلال إضافة صورة خلفية إلى الشاشة.

لإضافة صورة الخلفية:

1. من قسم Properties (الخصائص) في Screen1 (شاشة 1)، حدِّد خاصية BackgroungImage(صورة الخلفية).
2. اضغط على Upload File (تحميل ملف) لتحميل الصورة من حاسبك.
3. اضغط على Choose File (اختيار ملف) لاختيار صورة من حاسبك.
4. ستظهر نافذة مفتوحة، اختر منها الصورة التي تريد إضافتها من حاسبك.
5. ثم اضغط على Open (فتح).
6. ثم اضغط على OK (موافق).
7. مرِّر الشريط الجانبي لأسفل في قسم Properties (الخصائص) الخاص بشاشة Screen1 (شاشة 1).
8. ألغِ تحديد خاصية TitleVisible (العنوان مرئي).

لإضافة مكوِّن Label (التسمية):

1. من مجموعة User Interface (واجهة المُستخدِم)، أضف مكوِّن Label (التسمية) إلى الشاشة عن طريق سحبه وإفلاته أسفل Button1 (زرّ 1).
2. أعد تسميته إلى welcome_label (التسمية­_الترحيبية) بتحديد Rename (إعادة تسمية) من لوحة Components (المُكوِّنات).
3. في المُكوِّن welcome_label (التسمية­_الترحيبية)، امسح خاصية Text (النصّ).
4. اضبط الخاصية TextColor (لون النصّ) إلى White (أبيض).

برمجة الزرّ التفاعلي (Programming the Interactive Button)

بعد أن أضفت الزر، ستُضيف الآن بعد اللبنات البرمجية التي تجعل الزر يعرض الجملة Welcome to Saudi Arabia (مرحبا بكم في المملكة العربية السعودية) عند الضغط عليه، عليك أولاً تغيير العرض من Designer(المصمم) إلى Blocks (اللبنات البرمجية).

صفحة اللبنات البرمجية في مخترع التطبيقات The App Inventor Blocks Page

هذه هي صفحة اللبنات لواجهة مخترع التطبيقات حيث سيتم عرض جميع المكونات التي أضفتها من صفحة المصمم هنا.

يمكن برمجتها باستخدام لغة البرمجة مرئية قائمة على اللبنات البرمجية.

هناك أنواع عديدة من اللبنات البرمجية التي يمكن استخدامها بما فيها:

• منطق البرنامج .(Program Logic)
• معالجة الحدث (Event Handling).
• معالجة المتغير (Variable Manipulation).
• تغيير المكون (Changing Component).

لاحظ أن

لكل مكوِّن تحدده معالِجات أحداث (Event Handlers) وعمليات خاصة به للتحكُّم في خصائصه.

لتحديد حدث الضغط على الزرّ:

1. حدِّد المُكوِّن Visit_KSA (زيارة_المملكة العربية السعودية).
2. اختر اللبنة البرمجية when Visit_KSA.Click (عند الضغط على زيارة_المملكة العربية السعودية).
3. اسحبها وأفلتها في منطقة البرمجة.

للوصول إلى خاصية Text (النصّ) الخاصة بالتسمية:

1. حدِّد المُكوِّن welcome_label (التسمية_الترحيبية).
2. اسحب وأفلت اللبنة البرمجية set welcome_label .Text (ضبط نصّ التسمية_الترحيبية إلى).
3. ضع اللبنة السابقة داخل قسم do (نفِّذ) الخاص باللبنة البرمجية when Visit_KSA.Click (عند الضغط على زيارة_المملكة العربية السعودية).

لتعديل خاصية Text (النصّ) الخاصة بالتسمية:

1. حدِّد مجموعة Text (النصّ).
2. حدِّد اللبنة البرمجية empty string (سلسلة نصيَّة فارغة).
3. ضع اللبنة البرمجية empty string (سلسلة نصيَّة فارغة) في اللبنة البرمجية set Text to (ضبط النصّ إلى).
4. اكتب Welcome to Saudi Arabia (مرحبًا بكم في المملكة العربية السعودية) في لبنة empty string(سلسلة نصيّة فارغة).

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

اختبار التطبيق (Testing the Application)

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

يمكنك اختبار التطبيق في مخترع التطبيقات MIT بطريقتين مختلفتين:

• المحاكي (Emulator): هو برنامج تقوم بتثبيته على حاسبك ليحاكي جهاز الهاتف المحمول.
• (MIT AI2 Companion): هو تطبيق تقوم بتثبيته على هاتفك المحمول فعليًا، وبعد تثبيت التطبيق يمكنك الدخول إلى موقع مخترع التطبيقات الإلكتروني ومسح رمز الاستجابة السريعة (QR) الخاص بتطبيقك باستخدام MIT AI2 Companion، والذي بدوره سيحمل التطبيق الذي أنشأته على المتصفح الموجود على هاتفك، يمكنك تثبيت تطبيق MIT AI2 Companion من الرابط التالي:

https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3&pli=1

إعداد محاكي الأندرويد Setting up the Android Emulator

ستقوم الآن بتثبيت محاكي الأندرويد (Android Emulator) لتشغيل تطبيق الهاتف المحمول على حاسبك.

لإعداد تطبيق محاكي الأندرويد (Android Emulator):

1. انتقل إلى موقع الويب التالي: https://appinventor.mit.edu/explore/ai2/windows.
2. اضغط على رابط Download the installer (تنزيل المُثبت) لتنزيل ملف المُثبت بامتداد “.exe”.
3. بعد تنزيل المُثبت اتبع الخطوات الموضحة في صفحة الويب.

1. تشغيل التطبيق باستخدام محاكي الأندرويد

لتشغيل التطبيق:

1. اضغط على Connect (اتصال).
2. اختر Emulator (المحاكي).
3. اضغط على الزرّ لعرض الرسالة.

لاحظ أن

يجب تشغيل تطبيق المحاكي للحاسب المكتبي قبل بدء الاتصال بموقع مخترع التطبيقات على الويب.

2. تشغيل التطبيق باستخدام MIT AI2 Companion

لاتصال التطبيق بـ MIT AI2 Companion:

1. اضغط على Connect (اتصال).
2. ثم اضغط على AI Companion من القائمة العلوية.
3. سيظهر صندوق حوار برمز QR (الاستجابة السريعة) على شاشة حاسبك.
4. شغّل تطبيق MIT AI2 Companion من هاتفك المحمول، ثم اضغط على زرّ Scan QR code (مسح رمز الاستجابة السريعة) الموجود في Companion، وقم بمسح الرمز في نافذة App Inventor (مخترع التطبيقات) وسيتم عرض التطبيق الذي تقوم بإنشائه على جهازك.
5. اضغط على الزرّ لعرض الرسالة.

لاحظ أن

قبل مسح رمز الاستجابة السريعة، يجب أن يكون الجهازان متّصلين بالشبكة اللاسلكية نفسها.

معلومة

عند إغلاق AI Companion  ستتم إزالة التطبيق، ويجب تثبيت التطبيق على الجهاز الذكي ليبقى بشكلٍ دائم.

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

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

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

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

روابط هامة

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