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

 

 تطبيقات الهواتف الذكية 

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

برنامج App inventor

هو برنامج بدأت فيه جوجل عام 2010 ثم أوقفته عام 2011 بعد جعله مفتوح المصدر, ليتبناه بعد ذلك معهد MIT الأمريكي , حيث يتح هذا البرنامج تصميم تطبيقات أند رويد باستخدام واجهة رسومية, فكل ما تطلبه هو سحبوافلات قطع وتركيبها مع بعضها, يشابه فكرة لغة البرمجة Scratch التي أطلقها معهد MIT ذاته سابقا.

تنصيب برنامج App inventor

يوجد طريقتان للعمل على البرامج 

• الطريقة الأولى :(ONLINE)
• العمل على البرنامج عبر موقعه على الإنترنت (http://ai2.appinventor.mit.edu)
• من خلال تسجيل الدخول بحساب الجيميل العادي . 
•  تتطلب توفر الانترنت. 
• الطريقة الثانية:(Offline)

• العمل على البرنامج عبر تنزيله على الجهاز الشخصي.
• تحميل البرامج حسب نظام التشغيل الخاص بجهازك عبر الموقع الرسمي اضغط هنا
• وهذا يتطلب  مجموعة من الأشياء مثل الجافا وjdk.
•  يحتاج إلى برنامج محاكي الهاتف, يتم تنزيله من الانترنت ,مثل ai2 starter
•  رابط النسخة المحمولة اضغط هنا اختيار نظام الملفات 64,32 الخاص بجهازك , شاهد الفيديو .
• لا تحتاج إلى انترنت 

يستخدم الهاتف الشخصي لاختبار التطبيق في الحالتين 

والمفضل عندي الطريق الأولى مع تنزيل تطبيق mit ai2 companion  على الهاتف الذكي

تعرف على  واجهة البرنامج App inventor

يتكون البرنامج من واجهتين رئيسيتن :-

• شرح واجهة  التصميم : Designer

• يطلق عليها واجهة التصميمDesigner 
• توجد في أعلى يمين البرنامج بجوار Blocks
• وتستخدم لتصميم واجهات البرنامج وإضافة اللمسات الجمالية. 
• تتكون من نافذة خصائص الادوات Properties و محتويات التطبيق Components وصناديق الادوات  . 
• اضافة الشاشات على التطبيق add screen.
• واجهة شاشة التصميم .

انظر الصورة التالية

• شرح واجهة اللبنات :Blocks 
•  يطلق عليها واجهةBlocks 
• توجد في أعلى يمين البرنامج بجوار Designer
• تستخدم لكتابة التعليمات البرمجية الخاصة بالتطبيقات المختلفة .
•  الساحة البيضاء حيث تتزاحم اللبنات عند الضغط على الأدوات.
• يسار الشاشة منطقة الأدوات تحتوي على 
• لبنات البناء  ( Logic , Text , Variables وProcedure).
• المكونات تظهر اسفل لبنات البناء (لبنات ايقونات التطبيق).
• الأخطاء ( اسفل الشاشة) تظهر فيها عدد الأخطاء في التطبيق.
• سلة المحذوفات (لحف العناصر التي لا تريدها).
• حافظة اللبنات البرمجية.

انظرالصورة التالية

 

شاهد الفيديو التالي للتتعرف على مكونات البرنامج 

  

شرح قائمة Connect : ( تستخدم لمعاينة التطبيق ) طرق معاينة التطبيق:

• الطريقة الأولى : 

في حال توفر الانترنت على كلا من جهاز الحاسوب والهاتف مع تنزيل تطبيق MIT AI2 Companion على الهاتف الأندرويد نقوم باختيار الخيار الأول Al Companion  كما يظهر في الصورة التالية :

ثم تظهر صورة كود التطبيق على جهاز الحاسوب الخاص بك كما في الصورة التالية:-

 

 نقوم بتشغيل التطبيق على الهاتف الأندرويد

 ثم نختار scan QR code ثم ننتظر شيئا يسيرا ثم نشاهد تنفيذ التطبيق كما يظهر في الصورة التالية 

• الطريقة الثانية :

إذا لم يكن لديك جهاز أندرويد نختار الخيار الثاني Emulator  

وهو عبارة عن هاتف افتراضي يعمل بنظام الأندرويد على جهاز الحاسوب يمكنك تنزيل المحاكي عبر الانترنت بكل سهولة ويسر

ويمر بالمراحل التالية أثناء تشغيله على حاسوبك: 

• الطريقة الثانية :

استخدام وصلة USB في حالة عدم توفر الانترنت على جهاز الهاتف .

حفظ التطبيق وتحميله :

• الفرق بين aia , apk ؟

• ولحفظ التطبيق هناك طريقتين أيضا: 

• حفظ الملف بامتداد aia: وهذا النوع يعمل على جهاز الحاسوب ويمكن التعديل عليه ويتم ذلك بالضغط على قائمة project ثم export selected project (aia) to my computer
• حفظ الملف بامتداد apk: وهذا النوع يعمل على جهاز الهاتف الذكي ولا يمكن تعديله ويتم ذلك بالضغط على قائمة Build ثم save apk to my computer

• تحتوى على الأدوات  :
• الكرة(Ball ).
• اللوحة القماشية (Canvas).
• كائن الصور(ImageSprite)إيميجسبرايت
• الكرة : عبارة عن كائن دائري يمكن أن يتفاعل مع الأحداث المختلفة مثل (اللمس والسحب  والتحرك وفق قيم خصائصها ).
• اللوحة القماشية: عبارة عن لوحة يمكن الرسم عليها وتحريك الكائن بكل سهولة . 
•  كائن صورة : حيث يمكن وضع هذا الكائن على اللوحة القماشية ويتفاعل مع الحركة واللمس والكائنات الاخرى مثل كائن صورة. 

أهم الأحداث المستخدمة في الكتاب المدرسي مع أدوات Drawing and Animation

أولا : فكرة التطبيق :-

 شاهد الفديو  التالي :

ثانيا : تنفيذ خطوات عمل التطبيق :-

....::::التعيين ٣::::..... 

مشروع تطبيق  مواقعي المفضلة

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

بخطوات  متسلسلة  يطلب في نهاية الامر من الطلاب تسليم التطبيق الذي عمل على تصميمه وإرساله عبر الصفوف الافتراضية  

خطوات تنفيذ المشروع 

أولا :تصميم شاشات التطبيق 

عدد الشاشات 2 

الشاشة الاولى تمثل شاشة الترحيب وزر الدخول للشاشة الرئيسية 

الشاشة الثانية (الشاشة الرئيسية) وتمثل قائمة منسدلة تحتوى كافة المواقع 

شاهد الفيديو التالي 

ثانيا:كتابة لبنات الانتقال بين الشاشات مع اختبار سلامة اللبنات من الأخطاء

الإجراء:عند النقر على رز الدخول قم بالانتقال إلى الشاشة الرئيسية(محتويات الموقع)

 شاهد الفيديو 

• شرح كتلة التعليمات (1) : شاشة الدخول

الـ button : له مجموعة من الأحداث منها Click()

الحدث المستخدم  عند الضغط على زر الـ  button ثم بتنفيذ اللبنات التالية 

يستخدم لفتح الشاشة التي تحمل اسم Screen2

ملاحظة؟ يجب اغلاق الشاشة التي تسبق هذه الشاشة حتى لا تحدث مشاكل في الذاكرة.

يجب عدم اغلاق الشاشة الاولى من التطبيق .

ثالثا: كتابة التعليمات الخاصة بشاشة التطبيق الرئيسية 

شاهد الفيديو التالي 

• شرح كتلة التعليمات رقم (1) : في الشاشة الرئيسية 

كتلة التعليمات رقم (1)

تستخدم هذه الكتلة  لتسمية متغيرات عامة ويمكن تغيير اسم المتغير بالنقر على كلمة name 

في مثالنا المتغير هنا يحمل اسم listweb من نوع list 

تسمية المتغيرات 

انشاء القوائم 

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

تسمية العناصر

تستخدم هذه اللبنة لإضافة النص كما يظهر في القائمة أعلاه  عناصر القائمة ( وزراة التربية ,المدونة , روافد ) 

كتلة التعليمات رقم (2) : الشاشة الرئيسية

كتلة التعليمات رقم (2)

عند النقر على زر Button 1  قم بتفيذ التعليمات التالية 

والتي تعني :
1-جلب عناصر المتغير التي يحمل اسم listweb في مستعرض  القائمة ListView1(لإظهار العناصر)

2- ثم قم بإظهار عناصر القائمة 

كتلة التعليمات رقم (٣): الشاشة الرئيسية 

كتلة التعليمات رقم (3)

عند انتقاء عنصر من مستعرض القائمة Listview نفذ التالي 

جلب قيمة العنصر المنتقى من القائمة الأولى لاختيار نفس قيمة العنصر من القائمة الثانية وتخزينه في متغير يحمل اسم homeurl في مستعرض الويب ليتم الانتقال للصفحة الويب ثم عمل إخفاء للقائمة 

جلب قيمة عنصر المصفوفة حسب index

رابعا : حفظ المشروع 

ثم قم بحفظ المشروع باستخدام قائمة من قائمة المشروع Project قم باختيار حفظ التطبيق Project Save.

ثم عمل نسخة apk   من قائمة Build ثم اختار  Save .apk to my computer 

ملاحظة ::مهمة يقوم المتصفح بتنزيل ملف البرنامج سواء كان apk أو aia في مجلد التنزيلات