بناء تطبيقات الهاتف الذكي | الوحدة الثالثة | الدرس الثاني

بناء تطبيقات الهاتف الذكي هو عنوان الدرس الثاني من الوحدة الثالثة التي تحمل اسم “تطبيقات الهواتف الذكية” في الفصل الدراسي الأول من مقرر “تقنية رقمية 3”.

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

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

نواتج التعلُّم

• تطبيق مراحل إنشاء التطبيقات الذكية.
• إنشاء تطبيق هاتف ذكي.

هيا لنبدأ!

مقدمة – بناء تطبيقات الهاتف الذكي

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

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

هاتف ذكي – ويكيبيديا

أولًا: التخطيط والتصميم

قبل أن تصمم وتطوّر تطبيقك الذي ستعمل عليه، فإنه يتوجب عليك التخطيط الجيد له من خلال اتّباع خطوات عديدة، منها:

• تحديد فكرة التطبيق.
• تحديد أهداف التطبيق.
• تحديد الفئة المُستهدفة من استخدام التطبيق.
• تصميم الشكل المبدئي للتطبيق (يدويًا).

لقطات الشاشات النهائية للتطبيق الخاص بك.

ثانيًا: التطوير والتنفيذ

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

 بدء تشغيل برنامج مطوّر التطبيقات MIT:

1. افتح موقع mit.edu.
2. اضغط على Create Apps! (إنشاء تطبيقات).
3. ادخل بحساب جوجل الخاص بك.
4. اقرأ الشروط والأحكام، ثم اضغط على I accept the terms of service (اقبل بشروط الخدمة).
5. ثم اضغط على Continue (متابعة) في نافذة رسالة الترحيب.
6. في الرسالة الثانية التي تظهر، اضغط على START A BLANK PROJECT (بدء مشروع فارغ).
7. في الرسالة الآتية، اكتب اسم المشروع واضغط على OK (موافق).

إنشاء مشروع جديد

هناك طريقة أخرى لإنشاء مشروع جديد وهي الضغط على زر ابدأ مشروع جديد

(Start new project).

في صفحة المشاريع يمكنك أن تجد المشاريع التي أنشأتها.

لإنشاء مشروع جديد:

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

لقد أصبح مشروعك جاهزًا لبدء العمل عليه.

بيئة عمل مطور التطبيقات MIT

يتم تقسيم واجهة مطوّر التطبيقات إلى صفحتين. هذه هي صفحات التصميم (Designer)، واللبنات (Blocks) التي يمكِنك الوصول إليها من خلال زري (التصميم واللبنات) في أعلى يمين الشاشة.

• صفحة التصميم هي المكان الذي تصمِّم فيه التطبيق الخاص بك. تُدخِل مكوّنات في الشاشة وتُغيِّر خصائصها الأساسية.
• صفحة اللبنات هي المكان الذي تبرمج فيه تلك المكوّنات.

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

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

إنشاء تطبيق الغذاء الصحي في مطور التطبيقات MIT

اكتب اسم الصفحة الرئيسة (Home) ليكون عنوانًا للشاشة الأولى (Screen1) والتي ستكون هي الشاشة الرئيسة للتطبيق.

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

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

ستنشئ الآن زر أمر يسمى “نصائح صحية”، عندما تضغط على الزر ستفتح شاشة جديدة بها “نصائح صحية”.

إضافة زر (Button):

1. اسحب وأفلت Button (زر) من لوحة العناصر في الأدوات المُستخدَمة في إعداد واجهة المُستخدِم.
2. اضغط Rename (إعادة تسمية).
3. اكتب الاسم الجديد.
4. اضغط على OK (موافق).
5. مرر الشريط الجانبي للأسفل في قسم Properties (الخصائص) ثم اضغط على Text (النص) واكتب النص الذي سيظهر على زر الأمر “نصائح صحية”.

يجب أن توضع أزرار التطبيق في الشاشة الرئيسة.

لوضع الزر في وسط الشاشة:

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

الآن أجرِ بعض التحسينات، عن طريق إضافة صورة خلفية.

لإضافة مكوِّن BackgroundImage (صورة خلفية):

اضغط على Screen1 (الشاشة الأولى).

1. من لوحة Properties (الخصائص)، اضغط على BackgroundImage (صورة خلفية).
2. اضغط على Upload File (تحميل الملف)، لتحميل الصورة من جهاز الحاسب الخاص بك.
3. اضغط على Choose File (اختيار الملف)، لاختيار صورة من جهاز الحاسب الخاص بك.
4. ستظهر نافذة يمكِنك اختيار الصورة التي تريد إضافتها من الحاسب.
5. اضغط على Open (فتح).
6. اضغط على OK (موافق).
7. انتظر قليلًا حتى تُرفع الصورة.

الخطوة الآتية: ستُنشئ شاشة جديدة تحتوي على النصائح الصحية.

لإضافة شاشة (Screen):

1. اضغط Add Screen (إضافة شاشة).
2. اكتب اسمًا للشاشة، وليكن Screen2 (الشاشة الثانية).
3. اضغط على OK (موافق).
4. مرِّر الشريط الجانبي للأسفل في قسم Properties (الخصائص)، وفي حقل Title (العنوان)، اكتب النص الذي سيظهر في أعلى الصفحة “النصائح”.

لاحظ أن

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

حان الوقت لإضافة النصائح الصحية في التطبيق الخاص بك. لعرض النصائح الموضوعة من أعلى إلى أسفل، ستستخدِم مكوِّن الترتيب العمودي (VerticalArrangement).

لإضافة مكون الترتيب العمودي (VerticalArrangement):

1. من مجموعة Layout (تخطيط)، حدِّد مكوِّن VerticalArrangement (الترتيب العمودي).
2. أضف مكوّن VerticalArrangement (الترتيب العمودي) إلى الشاشة عن طريق سحبه وإفلاته في Viewer (العارض).
3. في المكوّن VerticalArrangement (الترتيب العمودي) الموجود في Properties (الخصائص)، عيّن خاصية AlignHorizontal (محاذاة أفقية) إلى Center: 3 (التوسيط: 3).
4. عيّن خاصية AlignVertical (محاذاة عمودية) إلى Center: 2 (التوسيط: 2).
5. عيّن خاصية BackgroundColor (لون الخلفية) إلى None (لا يوجد).

الآن بعد أن أنشأت المكوّن الرأسي (Vertical Component)، تحتاج إلى إضافة نص فيه. لإضافة نص ستستخدِم أداة التسمية (Label).

لإضافة أداة التسمية (Label):

1. اسحب وأسقط أداة Label (التسمية) من لوحة User Interface (واجهة المستخدم).
2. إلى داخل مكوّن VerticalArrangement (الترتيب العمودي).
3. في الحقل Text (النص) الموجود في Properties (الخصائص) اكتب “أهمية وجبة الإفطار”.
4. غيّر TextColor (لون النص) إلى White (أبيض).
5. غيّر TextAlignment (محاذاة النص) إلى Center: 1 (التوسيط: 1).
6. كرِّر الخطوات السابقة لكتابة النصائح حيث يتم إضافة أداة Label (التسمية) لكل نصيحة ويتم سحبها داخل VerticalArrangement.

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

اللبنات البرمجية (Programming Blocks)

اللبنات البرمجية في مطور التطبيقات MIT هي القطع التي تربطها ببعضها لتبلغ تطبيقك بما يجب فعله.

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

لبرمجة أحد المكونات تحتاج لى التبديل إلى وضع اللبنات (Blocks).

لتبديل إلى وضع اللبنات (Blocks):

1. من قائمة الشاشات اختر Screen1 (الشاشة الأولى).
2. اضغط على زر Blocks (اللبنات).

الآن ستوفر وظائف لزر النصائح (Tips) بحيث يعرض شاشة النصائح (الشاشة الثانية) عند الضغط عليه.

لبرمجة زر:

1. اختر الزر المسمى Tips (نصائح).
2. يتم سحب اللبنة في منطقة البرمجة when Tips.Click (عند الضغط على Tips).
3. من لوحة Blocks (اللبنات) اضغط على قسم Control (التحكم).
4. اسحب لبنة open another screen ScreenName (افتح شاشة أخرى ScreenName) وضعها داخل لبنة when Tips.Click (عند الضغط على Tips).
5. اختر شاشة Screen2 (الشاشة الثانية).

ثالثًا: اختبار التطبيق

تطبيقك جاهز للاختبار، هناك طريقتان مختلفتان لاختبار التطبيق الخاص بك في مطور التطبيقات MIT:

• المحاكي Emulator

هو برنامج يثبت على جهاز الحاسب الخاص بك ويحاكي جهاز الهاتف الذكي.

• مصاحب الذكاء الاصطناعي AI Companion

هو تطبيق تثبته على هاتفك الذكي الفعلي، يوفر لك موقع مطور تطبيقات MIT رمز QR لتقوم بمسحه ضوئيًا باستخدام تطبيق مصاحب الذكاء الاصطناعي الذي يحمل التطبيق الذي أنشأته على مطور التطبيقات على هاتفك الذكي الفعلي.

يمكنك تثيبت تطبيق مصاحب الذكاء الاصطناعي في جهاز أندرويد الخاص بك من خلال الرابط:

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

 

1. شغل التطبيق باستخدام مصاحب الذكاء الاصطناعي (AI Companion)

لتوصيل التطبيق بمصاحب الذكاء الاصطناعي (AI Companion):

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

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

5. بعد إدخال الرمز أو ماسح الرمز، انتظر حتى تظهر الشاشة التي أنشأتها.
6. اضغط على الزر لعرض الشاشة الثانية.

لاحظ أن

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

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

ستستخدم الآن محاكي الأندرويد لتشغيل تطبيق الهاتف على جهاز الحاسب الخاص بك.

لتوصيل التطبيق بالمحاكي (Emulator):

1. اضغط على Connect (الاتصال).
2. ثم اختر Emulator (المحاكي) من القائمة العلوية.
3. بعد إدخال أو مسح رمز الاستجابة السريع QR يتم الانتظار حتى تظهر الشاشة التي تم إنشاؤها.
4. اضغط على الزر لعرض الشاشة الثانية.

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

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

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

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

روابط هامة

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