تقنية رقمية 3 [03-تطبيقات الهواتف الذكية]-[120-167].pdf

‫الدرس الثاني‪:‬‬ ‫الذيك‬ ‫بناء تطبيقات الهاتف‬ ‫ي‬ ‫لقد تعلمت في الدرس السابق مراحل إنشاء تطبيق الهاتف الذكي‪ .‬في هذا الدرس ستنشئ أول تطبيق للهاتف الذكي الخاص بك‪.‬‬ ‫ً‬ ‫أواًل‪ :‬التخطيط والتصميم‬ ‫ّ‬ ‫وتطور تطبيقك الذي ستعمل‬ ‫قبل أن تصمم‬ ‫عليه‪ ،‬فإنه يتوجب عليك التخطيط الجيد له‬ ‫من خالل ا...

‫الدرس الثاني‪:‬‬ ‫الذيك‬ ‫بناء تطبيقات الهاتف‬ ‫ي‬ ‫لقد تعلمت في الدرس السابق مراحل إنشاء تطبيق الهاتف الذكي‪ .‬في هذا الدرس ستنشئ أول تطبيق للهاتف الذكي الخاص بك‪.‬‬ ‫ً‬ ‫أواًل‪ :‬التخطيط والتصميم‬ ‫ّ‬ ‫وتطور تطبيقك الذي ستعمل‬ ‫قبل أن تصمم‬ ‫عليه‪ ،‬فإنه يتوجب عليك التخطيط الجيد له‬ ‫من خالل اتباع خطوات عديدة منها‪:‬‬ ‫تحديد فكرة التطبيق‪.‬‬ ‫تحديد أهداف التطبيق‪.‬‬ ‫تحديد الفئة المستهدفة من استخدام‬ ‫التطبيق‪.‬‬ ‫ً‬ ‫تصميم الشكل المبدئي للتطبيق (يدويا)‪.‬‬ ‫رسومات التطبيق‬ ‫‪120‬‬ ‫لقطات الشاشات النهائية للتطبيق الخاص بك‪.‬‬ ‫‪121‬‬ ‫ً‬ ‫ثانيا‪ :‬التطوير (التنفيذ)‬ ‫ّ‬ ‫ستنشئ تطبيقك األول باستخدام برنامج مطور التطبيقات ‪ .MIT‬يحتوي هذا البرنامج على التصنيفات األساسية للطعام‪ ،‬وضمن كل‬ ‫تصنيف توجد أمثلة على األطعمة الصحية وفوائدها‪.‬كما يقدم البرنامج مجموعة من النصائح المتعلقة بأساليب الحياة الصحية‪.‬‬ ‫ّ‬ ‫مطور التطبيقات ‪:MIT‬‬ ‫بدء تشغيل برنامج‬ ‫> افتح موقع ‪.appinventor.mit.edu‬‬ ‫‪1‬‬ ‫>اضغط على !‪( Create Apps‬إنشاء تطبيقات)‪.‬‬ ‫> ادخل بحساب جوجل الخاص بك‪.‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫>اقرأ الشروط واألحكام‪ ،‬ثم اضغط على ‪( I accept the terms of service‬اقبل بشروط الخدمة)‪.‬‬ ‫>ثم اضغط على ‪( Continue‬متابعة) في نافذة رسالة الترحيب‪.‬‬ ‫‪5‬‬ ‫>في الرسالة الثانية التي تظهر‪ ،‬اضغط على ‪( START A BLANK PROJECT‬بدء مشروع فارغ)‪.‬‬ ‫> في الرسالة اآلتية‪ ،‬اكتب اسم المشروع واضغط على ‪( OK‬موافق)‪.‬‬ ‫‪7‬‬ ‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫‪122‬‬ ‫‪4‬‬ ‫‪4‬‬ ‫‪6‬‬ 5 6 7 123 ‫إنشاء مشروع جديد‬ ‫هناك طريقة أخرى إلنشاء مشروع جديد وهي الضغط على زر ابدأ مشروع جديد (‪.)Start new project‬‬ ‫في صفحة المشاري ــع يمكنك أن تجد جميع المشاري ــع التي أنشأتها‪.‬‬ ‫إنشاء مشروع جديد‪:‬‬ ‫>اضغط على ‪( Start new project‬ابدأ مشروع جديد)‪.‬‬ ‫> اكتب ً‬ ‫اسما لمشروعك‪ 2 ،‬واضغط على ‪( OK‬موافق)‪3 .‬‬ ‫‪1‬‬ ‫ً‬ ‫جاهزا لبدء العمل عليه‪.‬‬ ‫> لقد أصبح مشروعك‬ ‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫اسم المشروع مكتوب‬ ‫باللغة اإلنجليزية‪.‬‬ ‫‪124‬‬ ‫ّ‬ ‫مطور التطبيقات ‪MIT‬‬ ‫بيئة عمل‬ ‫يتم تقسيم واجهة ّ‬ ‫مطور التطبيقات إلى صفحتين‪ .‬هذه هي صفحات التصميم (‪ ،)Designer‬واللبنات (‪ )Blocks‬التي يمكنك‬ ‫الوصول إليها من خالل زري (التصميم واللبنات) في أعلى يمين الشاشة‪.‬‬ ‫ُ‬ ‫ُ‬ ‫وت ّ‬ ‫غير خصائصها األساسية‪.‬‬ ‫دخل مكونات في الشاشة‬ ‫صفحة التصميم هي المكان الذي تصمم فيه التطبيق الخاص بك‪ .‬ت ِ‬ ‫صفحة اللبنات هي المكان الذي تبرمج فيه تلك المكونات‪.‬‬ ‫زر اللبنات‬ ‫زر التصميم‬ ‫(‪.)Blocks button‬‬ ‫(‪.)Designer button‬‬ ‫ُ‬ ‫تستخدم الخصائص‬ ‫(‪ )Properties‬لتغيير‬ ‫خصائص العناصر المضافة‬ ‫إلى شاشة التطبيق‪.‬‬ ‫يتم عرض جميع العناصر التي‬ ‫تستخدمها في المشروع في قسم‬ ‫المكونات (‪.)Components‬‬ ‫شاشة العرض (‪Screen‬‬ ‫‪ )View‬هي مساحة العمل‬ ‫إلضافة األدوات ومعاينة‬ ‫ظهورها في التطبيق‪.‬‬ ‫اسم المشروع‬ ‫(‪.)Project Name‬‬ ‫األدوات المستخدمة في‬ ‫إعداد واجهة المستخدم‬ ‫(‪.)User Interface‬‬ ‫‪125‬‬ ‫ً‬ ‫ّ‬ ‫استخداما في واجهة تصميم تطبيقات الهواتف الذكية‬ ‫المكونات األكثر‬ ‫ّ‬ ‫المكون‬ ‫الوصف‬ ‫األيقونة‬ ‫زر األمر (‪)Button‬‬ ‫القيام بمهمة محددة عند ضغطه‪.‬‬ ‫صورة (‪)Image‬‬ ‫مكون خاص يعرض الصور‪.‬‬ ‫أداة التسمية (‪)Label‬‬ ‫تعرض ً‬ ‫نصا يتم تخصيصه في خاصية حقل النص (‪.)Text‬‬ ‫االختيار من القائمة‬ ‫(‪)ListPicker‬‬ ‫يتم الضغط عليه لعرض عدة خيارات نصية لالختيار من بينها‪.‬‬ ‫ّ‬ ‫مطور التطبيقات ‪MIT‬‬ ‫إنشاء تطبيق الغذاء الصحي في‬ ‫ً‬ ‫اكتب اسم الصفحة الرئيسة (‪ )Home‬ليكون عنوانا للشاشة األولى (‪ ،)Screen1‬والتي ستكون هي الشاشة الرئيسة للتطبيق‪.‬‬ ‫لتغيير عنوان الشاشة‪:‬‬ ‫> اضغط على ‪( Screen1‬الشاشة األولى) من قسم ‪( Components‬المكونات)‪.‬‬ ‫>مرر الشريط الجانبي لألسفل في قسم ‪( Properties‬الخصائص)‪،‬‬ ‫‪( Title‬العنوان)‪ ،‬اكتب كلمة الصفحة الرئيسة (‪3 .)Home‬‬ ‫‪2‬‬ ‫‪1‬‬ ‫وفي حقل‬ ‫‪2‬‬ ‫‪1‬‬ ‫‪3‬‬ ‫‪126‬‬ ‫ش ئ‬ ‫ستن� اآلن زر أمر يسىم "نصائح صحية"‪ .‬عندما تضغط عىل الزر ‪ ،‬ستفتح شاشة جديدة بها "نصائح صحية"‪.‬‬ ‫إضافة زر (‪:)Button‬‬ ‫>اسحب وأفلت ‪( Button‬زر) من لوحة العناصر في األدوات المستخدمة في إعداد‬ ‫واجهة المستخدم‪1 .‬‬ ‫> اضغط ‪( Rename‬إعادة تسمية)‪.‬‬ ‫> اكتب االسم الجديد‪،‬‬ ‫‪3‬‬ ‫‪2‬‬ ‫و اضغط على ‪( OK‬موافق)‪.‬‬ ‫‪4‬‬ ‫>مرر الشريط الجانبي لألسفل في قسم ‪( Properties‬الخصائص) ثم اضغط على‬ ‫‪( Text‬النص) واكتب النص الذي سيظهر على زر األمر"نصائح صحية"‪5 .‬‬ ‫‪1‬‬ ‫‪2‬‬ ‫ّ‬ ‫سيتغير االسم في قسم المكونات‬ ‫وعند استخدام اللبنات‪.‬‬ ‫‪3‬‬ ‫بإمكانك كتابة اسم الزر‬ ‫باللغة العربية واإلنجليزية‪.‬‬ ‫‪4‬‬ ‫ّ‬ ‫سيتغير االسم في شاشة العرض‪.‬‬ ‫‪5‬‬ ‫‪127‬‬ ‫يجب أن توضع أزرار التطبيق ف ي� الشاشة الرئيسة‪.‬‬ ‫لوضع الزر في وسط الشاشة‪:‬‬ ‫> اضغط على ‪( Screen1‬الشاشة األولى) من قسم ‪( Components‬المكونات)‪.‬‬ ‫‪1‬‬ ‫>من قسم ‪( Properties‬الخصائص) حدد ‪( AlignHorizontal‬محاذاة أفقية) إلى ‪Center: 3‬‬ ‫(التوسيط‪ 2 ،)3 :‬ثم حدد ‪( AlignVertical‬محاذاة عمودية) إلى ‪( Center: 2‬التوسيط‪3 .)2 :‬‬ ‫‪1‬‬ ‫رقم يرمز إلى‬ ‫محاذاة محتوى أداة‬ ‫المحاذاة األفقية‪.‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫رقم يرمز إلى‬ ‫محاذاة محتوى أداة‬ ‫المحاذاة العمودية‪.‬‬ ‫أجر بعض التحسينات‪ ،‬عن طريق إضافة صورة خلفية‪.‬‬ ‫اآلن ِ‬ ‫إلضافة ّ‬ ‫مكون ‪( BackgroundImage‬صورة خلفية)‪:‬‬ ‫> اضغط على ‪( Screen1‬الشاشة األولى)‪.‬‬ ‫‪1‬‬ ‫> من لوحة ‪( Properties‬الخصائص)‪ ،‬اضغط على ‪( BackgroundImage‬صورة خلفية)‪.‬‬ ‫> اضغط على ‪( Upload File‬تحميل الملف)‪،‬‬ ‫> اضغط على ‪( Choose File‬اختيار الملف)‪،‬‬ ‫‪3‬‬ ‫‪4‬‬ ‫لتحميل الصورة من جهاز الحاسب الخاص بك‪.‬‬ ‫الختيار صورة من جهاز الحاسب الخاص بك‪.‬‬ ‫> ستظهر نافذة يمكنك اختيار الصورة التي تريد إضافتها من الحاسب‪،‬‬ ‫> اضغط على ‪( OK‬موافق)‪.‬‬ ‫ً‬ ‫ُ‬ ‫> انتظر قلياًل حتى ترفع الصورة‪.‬‬ ‫‪7‬‬ ‫‪128‬‬ ‫‪2‬‬ ‫‪5‬‬ ‫اضغط على ‪( Open‬فتح)‪.‬‬ ‫‪6‬‬ ‫‪1‬‬ ‫‪4‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫‪5‬‬ ‫‪6‬‬ ‫يمكنك تغيير زر لون خلفية من‬ ‫‪( BackgroundColor‬لون الخلفية)‪.‬‬ ‫يمكنك تحديد ‪( FontBold‬الخط‬ ‫ً‬ ‫الغامق)‪ ،‬لجعل النص غامقا‪.‬‬ ‫‪7‬‬ ‫حدد الزر‬ ‫لتعديل‬ ‫خصائصه‪.‬‬ ‫يمكنك تغيير لون النص‪ ،‬من خيار‬ ‫‪( TextColor‬لون النص)‪.‬‬ ‫‪129‬‬ ‫ش ئ‬ ‫ستن� شاشة جديدة تحتوي عىل النصائح الصحية‪.‬‬ ‫الخطوة اآلتية‪:‬‬ ‫إلضافة شاشة (‪:)Screen‬‬ ‫يتم تسمية اسم الشاشة فقط باللغة‬ ‫اإلنجليزية‪ ،‬وأن تبدأ بحرف‪ ،‬وال تقبل أرقام‬ ‫في بداية االسم‪ .‬باإلمكان أن يحتوي االسم‬ ‫على حروف‪ ،‬وأرقام‪ ،‬وتسطير سفلي فقط‪.‬‬ ‫> اضغط ‪( Add Screen‬إضافة شاشة)‪.‬‬ ‫>اكتب ً‬ ‫اسما للشاشة‪ ،‬وليكن ‪( Screen2‬الشاشة الثانية)‪2 .‬‬ ‫‪1‬‬ ‫> اضغط على ‪( OK‬موافق)‪.‬‬ ‫> ّ‬ ‫مرر الشريط الجانبي لألسفل في قسم ‪( Properties‬الخصائص)‪ ،‬وفي حقل‬ ‫‪3‬‬ ‫‪( Title‬العنوان)‪ ،‬اكتب النص الذي سيظهر في أعلى الصفحة "النصائح"‪.‬‬ ‫‪4‬‬ ‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫ّ‬ ‫غير محاذاة‬ ‫المحتوى‪.‬‬ ‫أضف خلفية إلى‬ ‫الشاشة الثانية لجعلها‬ ‫أكثر جاذبية كما‬ ‫ً‬ ‫تعلمت سابقا‪.‬‬ ‫أضف خلفية إلى‬ ‫الشاشة الثانية لجعلها‬ ‫أكثر جاذبية كما‬ ‫ً‬ ‫تعلمت سابقا‪.‬‬ ‫‪4‬‬ ‫‪130‬‬ ‫حان الوقت إلضافة النصائح الصحية في التطبيق الخاص بك‪ .‬لعرض النصائح الموضوعة من أعلى إلى أسفل‪ ،‬ستستخدم مكون‬ ‫الترتيب العمودي (‪.)VerticalArrangement‬‬ ‫إلضافة مكون الترتيب العمودي (‪:)VerticalArrangement‬‬ ‫> من مجموعة ‪( Layout‬تخطيط)‪ ،‬حدد مكون ‪( VerticalArrangement‬الترتيب العمودي)‪.‬‬ ‫‪1‬‬ ‫>أضف مكون ‪( VerticalArrangement‬الترتيب العمودي) إلى الشاشة عن طريق سحبه وإفالته في ‪( Viewer‬العارض)‪.‬‬ ‫>في المكون ‪( VerticalArrangement‬الترتيب العمودي) الموجود في ‪( Properties‬الخصائص)‪ّ ،‬‬ ‫عين خاصية‬ ‫‪2‬‬ ‫‪( AlignHorizontal‬محاذاة أفقية) إلى ‪( Center: 3‬التوسيط‪ 3 ،)3 :‬وخاصية ‪( AlignVertical‬محاذاة عمودية) إلى‬ ‫‪( Center: 2‬التوسيط‪ 4 ،)2 :‬وخاصية ‪( BackgroundColor‬لون الخلفية) إلى ‪( None‬ال يوجد)‪5 .‬‬ ‫المكون ‪( VerticalArrangement‬الترتيب العمودي) الموجود في ‪( Properties‬الخصائص)‪.‬‬ ‫‪3‬‬ ‫‪1‬‬ ‫‪5‬‬ ‫‪4‬‬ ‫‪2‬‬ ‫لحذف عنصر اذهب لقائمة األدوات‬ ‫المكون (‪ )component‬حدد‬ ‫العنصر المراد حذفه باختياره أسفل‬ ‫القائمة يوجد زر الحذف (‪.)Delete‬‬ ‫‪131‬‬ ‫اآلن بعد أن أنشأت المكون الرأسي (‪ ،)Vertical Component‬تحتاج إلى إضافة نص فيه‪ .‬إلضافة نص ستستخدم أداة التسمية‬ ‫(‪.)Label‬‬ ‫إلضافة أداة التسمية (‪:)Label‬‬ ‫>اسحب وأسقط أداة ‪( Label‬التسمية) من لوحة ‪( User Interface‬واجهة المستخدم)‬ ‫مكون ‪( VerticalArrangement‬الترتيب العمودي)‪2 .‬‬ ‫‪1‬‬ ‫إلى داخل‬ ‫>في الحقل ‪( Text‬النص) الموجود في ‪( Properties‬الخصائص) اكتب " أهمية وجبة اإلفطار‪،".‬‬ ‫ّ‬ ‫وغير ‪( TextColor‬لون النص) إلى ‪( White‬أبيض)‪ 4 ،‬و ‪( TextAlignment‬محاذاة النص) إلى‬ ‫‪( Center: 1‬التوسيط‪5 . )1 :‬‬ ‫‪3‬‬ ‫>كرر الخطوات السابقة لكتابة النصائح حيث يتم إضافة أداة ‪( Label‬التسمية) لكل نصيحة ويتم‬ ‫سحبها داخل ‪6 .VerticalArrangement‬‬ ‫أضف تسمية جديدة لكل نصيحة‪.‬‬ ‫‪2‬‬ ‫‪1‬‬ ‫‪6‬‬ ‫‪3‬‬ ‫‪5‬‬ ‫‪4‬‬ ‫ال تقلق عند كتابة النص العربي‬ ‫في مطور التطبيقات ‪ ،MIT‬سوف‬ ‫تظهر لك عالمة الوقف (النقطة)‬ ‫على يمين النص‪ ،‬ولكن عند‬ ‫تشغيل التطبيق سوف تظهر في‬ ‫مكانها الصحيح على يسار النص‪.‬‬ ‫‪132‬‬ ‫يمكن‬ ‫تحديد األداة‬ ‫وحذفها‬ ‫ً‬ ‫أيضا‪.‬‬ ‫من خالل تحديد المكون‬ ‫التسمية (‪ ،)Label‬والضغط‬ ‫على التسمية (‪،)Rename‬‬ ‫باإلمكان تسمية االداة باللغة‬ ‫العربية واإلنجليزية‪.‬‬ ‫اللبنات البرمجية (‪)Programming blocks‬‬ ‫ُ‬ ‫اللبنات في ّ‬ ‫مطور التطبيقات ‪ MIT‬هي القطع التي تربطها ببعضها لتبلغ تطبيقك بما يجب فعله‪ .‬يحتوي كل مكون في المشروع على‬ ‫مجموعه خاصة من اللبنات‪ ،‬مثل األحداث‪ ،‬والطرق‪ ،‬والخصائص‪ .‬لبرمجة أحد المكونات‪ ،‬تحتاج إلى التبديل إلى وضع اللبنات (‪.)Blocks‬‬ ‫لتبديل إلى وضع اللبنات (‪:)Blocks‬‬ ‫> من قائمة الشاشات اختر ‪( Screen1‬الشاشة األولى)‪.‬‬ ‫> اضغط على زر ‪( Blocks‬اللبنات)‪.‬‬ ‫‪1‬‬ ‫‪2‬‬ ‫‪1‬‬ ‫‪2‬‬ ‫التبديل ما بين وضع‬ ‫‪( Designer‬المصمم)‬ ‫ووضع ‪( Blocks‬اللبنات)‪.‬‬ ‫يمكن تخزين اللبنات في ‪Backpack‬‬ ‫(الحقيبة) ومن ثم سحبها وإفالتها من‬ ‫هناك وهكذا يمكن الوصول بسرعة إليها‪.‬‬ ‫منطقة‬ ‫البرمجة‪.‬‬ ‫مكونات واجهة المستخدم‬ ‫الخاصة بـ ‪Screen1‬‬ ‫(الشاشة األولى)‪.‬‬ ‫مجموعة‬ ‫اللبنات‪.‬‬ ‫طريقة العرض االفتراضية‪.‬‬ ‫التكبير‪.‬‬ ‫التصغير‪.‬‬ ‫يمكن حذف اللبنات من خالل‬ ‫سحبها وإفالتها إلى السلة‪.‬‬ ‫‪133‬‬ ‫اآلن‪ ،‬ستوفر وظائف لزر النصائح (‪ ،)Tips‬بحيث يعرض شاشة النصائح (الشاشة الثانية) عند الضغط عليه‪.‬‬ ‫لبرمجة زر‪:‬‬ ‫> اختر الزر المسمى ‪( Tips‬نصائح)‪.‬‬ ‫‪1‬‬ ‫> يتم سحب اللبنة في منطقة البرمجة ‪( when Tips .Click‬عند الضغط على ‪.)Tips‬‬ ‫> من لوحة ‪( Blocks‬اللبنات) اضغط على قسم ‪( Control‬التحكم)‪.‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫>اسحب لبنة ‪( open another screen ScreenName‬افتح شاشة أخرى ‪)ScreenName‬‬ ‫وضعها داخل لبنة ‪( when Tips.Click‬عند الضغط على ‪4 .)Tips‬‬ ‫> اختر شاشة ‪( Screen2‬الشاشة الثانية)‪.‬‬ ‫‪5‬‬ ‫‪2‬‬ ‫‪1‬‬ ‫‪3‬‬ ‫‪5‬‬ ‫‪4‬‬ ‫‪134‬‬ ‫ً‬ ‫ثالثا‪ :‬اختبار التطبيق‬ ‫تطبيقك جاهز لالختبار‪ .‬هناك طريقتان مختلفتان الختبار التطبيق الخاص بك في ّ‬ ‫مطور التطبيقات ‪MIT‬؛ الطريقة األولى هي عبر‬ ‫المحاكي (‪ ،)Emulator‬وهو برنامج يثبت على جهاز الحاسب الخاص بك‪ ،‬ويحاكي جهاز الهاتف الذكي‪.‬‬ ‫الطريقة الثانية هي استخدام مصاحب الذكاء االصطناعي (‪ ،)AI Companion‬وهو تطبيق ّ‬ ‫تثبته على هاتفك الذكي الفعلي‪ .‬يوفر لك‬ ‫ّ‬ ‫ً‬ ‫ضوئيا باستخدام تطبيق مصاحب الذكاء االصطناعي الذي يحمل التطبيق الذي‬ ‫موقع مطور تطبيقات ‪ MIT‬برمز ‪ ،QR‬لتقوم بمسحه‬ ‫أنشأته على مطور التطبيقات على هاتفك الذكي الفعلي‪ .‬يمكنك تثبيت تطبيق مصاحب الذكاء االصطناعي‪ ،‬في جهاز أندرويد الخاص‬ ‫بك من خالل الرابط‪:‬‬ ‫‪https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3‬‬ ‫‪ .1‬شغل التطبيق باستخدام مصاحب الذكاء االصطناعي (‪)AI Companion‬‬ ‫لتوصيل التطبيق بـمصاحب الذكاء االصطناعي (‪:)AI Companion‬‬ ‫> اضغط على ‪( Connect‬االتصال)‪،‬‬ ‫‪1‬‬ ‫ثم اختر ‪( AI Companion‬مصاحب الذكاء االصطناعي) من القائمة العلوية‪.‬‬ ‫‪2‬‬ ‫> سيظهر مربــع حوار يحتوي على رمز االستجابة السري ــع ‪ QR‬أو رمز الكود على شاشة جهاز الحاسب الخاص بك‪.‬‬ ‫ّ‬ ‫>على جهاز الهاتف الذكي الخاص بك‪ ،‬شغل مصاحب الذكاء االصطناعي لمطور التطبيقات (‪) MIT AI companion‬‬ ‫ً‬ ‫ضوئيا)‪ ،‬أو االتصال بالرمز‪4 .‬‬ ‫‪ ،‬واضغط على ‪( scan QR code‬ماسح رمز االستجابة السري ــع‬ ‫‪3‬‬ ‫ضوئيا أو أدخل الرمز في نافذة مصاحب الذكاء االصطناعي‪ُ ،‬‬ ‫ً‬ ‫سيعرض التطبيق الذي أنشأته على جهاز الهاتف الذكي‬ ‫>امسح الرمز‬ ‫الخاص بك‪.‬‬ ‫> بعد إدخال الرمز أو ماسح الرمز‪ ،‬انتظر حتى تظهر الشاشة التي أنشأتها‪.‬‬ ‫> اضغط على الزر لعرض الشاشة الثانية‪.‬‬ ‫‪5‬‬ ‫‪6‬‬ ‫‪1‬‬ ‫‪2‬‬ ‫‪135‬‬ ‫‪3‬‬ ‫‪4‬‬ ‫رمز االستجابة السري ــع ‪ QR‬الذي‬ ‫ً‬ ‫ضوئيا‪ ،‬إذا اخترت مسح‬ ‫ستمسحه‬ ‫ً‬ ‫ضوئيا‪.‬‬ ‫رمز االستجابة السريعة‬ ‫الرمز الذي‬ ‫ستستخدمه‪ ،‬إذا اخترت‬ ‫االتصال برمز الكود‪.‬‬ ‫‪5‬‬ ‫‪6‬‬ ‫ّ‬ ‫مطور التطبيقات‪ ،‬تتم إزالة التطبيق الذي أنشأته‪ ،‬لذلك‬ ‫عند إغالق‬ ‫عليك تثبيته على هاتفك الذكي لكي يتم حفظه‪.‬‬ ‫‪136‬‬ ‫‪ .2‬تشغيل التطبيق باستخدام محاكي األندرويد‬ ‫ستستخدم اآلن محاكي األندرويد لتشغيل تطبيق الهاتف على جهاز الحاسب الخاص بك‪.‬‬ ‫لتوصيل التطبيق بالمحاكي (‪:)Emulator‬‬ ‫> اضغط على ‪( Connect‬االتصال)‪،‬‬ ‫‪1‬‬ ‫ثم اختر ‪( Emulator‬المحاكي) من القائمة العلوية‪.‬‬ ‫> بعد إدخال أو مسح الكود يتم االنتظار حتى تظهر الشاشة التي تم إنشاؤها‪.‬‬ ‫> اضغط على الزر لعرض الشاشة الثانية‪.‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫‪4‬‬ ‫‪1‬‬ ‫‪2‬‬ ‫يجب تشغيل تطبيق‬ ‫المحاكي للحاسب‬ ‫المكتبي قبل بدء االتصال‬ ‫بموقع ّ‬ ‫مطور التطبيقات‬ ‫على الموقع اإللكتروني‪.‬‬ ‫‪3‬‬ ‫‪137‬‬ ‫لنطبق ً‬ ‫معا‬ ‫تدريب ‪1‬‬ ‫حدد الجملة الصحيحة والجملة الخطأ فيما يلي‪:‬‬ ‫صحيحة‬ ‫خطأ‬ ‫‪ .1‬يمكنك إضافة زر إلى شاشة من قائمة المكونات‪.‬‬ ‫‪ .2‬يمكنك إعادة تسمية الزر بالضغط على زر الفأرة األيمن‪ ،‬واختيار إعادة التسمية‪.‬‬ ‫‪ .3‬يمكنك تحميل صورة من جهاز الحاسب الخاص بك الستخدامها كخلفية‪.‬‬ ‫ّ‬ ‫مطور‬ ‫‪.4‬الختبار التطبيق الخاص بك في جهاز أندرويد‪ ،‬عليك تثبيت تطبيق مصاحب‬ ‫التطبيقات ‪ )MIT App Inventor Companion( MIT‬على هذا الجهاز‪.‬‬ ‫‪.5‬لعرض التطبيق الذي تنشئه على هاتفك‪ ،‬عليك الضغط على االتصال‪ ،‬ثم اختيار مصاحب‬ ‫الذكاء االصطناعي‪.‬‬ ‫تدريب ‪2‬‬ ‫ً‬ ‫ً‬ ‫ّ‬ ‫بسيطا حول البلد الذي تريد زيارته‪.‬‬ ‫مطور التطبيقات ‪ ،MIT‬وأنشئ تطبيقا‬ ‫افتح‬ ‫> أعد تسمية الشاشة الرئيسة باسم "‪ ،"Home‬وأضف صورة خلفية‪.‬‬ ‫> أضف زرين وسمهما "‪( "Sightseeing‬معالم المدينة)‪ ،‬و "‪( "Useful Information‬معلومات مفيدة)‪.‬‬ ‫> أنشئ شاشة جديدة واستخدم أداة التسمية لكتابة بعض المعلومات المفيدة‪.‬‬ ‫تدريب ‪3‬‬ ‫صف كيف تساعدك مكونات الترتيب العمودي (‪ )VerticalArrangement‬في تشكيل تخطيط‬ ‫شاشة الهاتف الذكي‪.‬‬ ‫ ‪.................................................................................................................................................‬‬ ‫ ‪.................................................................................................................................................‬‬ ‫ ‪.................................................................................................................................................‬‬ ‫‪138‬‬ ‫ ‪.‬‬ ‫الدرس الثالث‪:‬‬ ‫برمجة التطبيق‬ ‫في الدرس السابق‪َّ ،‬‬ ‫صممت شاشتين في التطبيق الخاص بك‪ .‬الشاشة الرئيسة مع زر‪ ،‬يفتح شاشة جديدة عند الضغط عليه‪ .‬كما‬ ‫أنشأت شاشة أخرى (شاشة النصائح) تتضمن صورة ونص على شكل تسميات‪ .‬ستضيف في هذا الدرس ًّ‬ ‫زرا آخر باسم األطعمة‬ ‫الصحية (‪ )Healthy foods‬في التطبيق الذي أنشأته في الدرس السابق‪.‬‬ ‫إنشاء قائمة‬ ‫ُ‬ ‫القوائم هي نوع من تراكيب البيانات تستخدم إلنشاء وإدارة مجموعات مختلفة من القيم أو العناصر‪.‬‬ ‫عند الضغط على زر األطعمة الصحية‪ ،‬ستظهر قائمة بأصناف الطعام كاآلتي‪:‬‬ ‫> اللحوم واألسماك (‪)Meat and fish‬‬ ‫> الحبوب (‪)Cereals‬‬ ‫> الخضراوات (‪)Vegetables‬‬ ‫> الفواكه (‪)Fruits‬‬ ‫> منتجات الحليب (‪)Milk products‬‬ ‫> المكسرات (‪)Nuts‬‬ ‫أداة منتقي القائمة (‪)ListPicker‬‬ ‫لتضمين قائمة في ّ‬ ‫مطور التطبيقات ‪ ،MIT‬هناك خطوتان‪ :‬الخطوة األولى هي إضافة مكون منتقي القائمة (‪ .)ListPicker‬الخطوة‬ ‫الثانية هي إعطاء وظيفة للمكون (‪ ،)Component‬عن طريق برمجتها‪.‬‬ ‫ستستخدم هذا الزر في تطبيقك لكي تنشئ قائمة بأصناف األطعمة‪.‬‬ ‫‪139‬‬ ‫إضافة قائمة منتقي القائمة (‪:)ListPicker‬‬ ‫> ّبدل شاشة العرض ‪( Screen1‬الشاشة األولى) إلى وضع ‪( Designer‬المصمم)‪.‬‬ ‫‪1‬‬ ‫>من لوحة ‪( User Interface‬واجهة المستخدم)‪ ،‬اسحب وأفلت زر القائمة ‪( ListPicker‬منتقي القائمة) إلى شاشة‬ ‫العرض (مساحة العمل)‪2 .‬‬ ‫> اضغط على ‪( Rename‬إعادة تسمية)‪.‬‬ ‫> اكتب ً‬ ‫اسما ألداة منتقي القائمة وليكن ‪( Foods‬األطعمة)‪.‬‬ ‫‪3‬‬ ‫> اضغط على ‪( OK‬موافق)‪.‬‬ ‫‪4‬‬ ‫‪5‬‬ ‫>من قسم ‪( Properties‬الخصائص)‪ ،‬في حقل ‪( Text‬النص)‪ ،‬اكتب "أطعمة صحية"‪.‬‬ ‫ً‬ ‫(الخط الغامق) لجعل النص غامقا‪7 .‬‬ ‫‪6‬‬ ‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫‪4‬‬ ‫‪5‬‬ ‫‪7‬‬ ‫‪6‬‬ ‫‪140‬‬ ‫وحدد ‪FontBold‬‬ ‫لقد صممت القائمة وعليك أن تخصص وظائفها‪.‬‬ ‫إلنشاء قائمة بالعناصر‪:‬‬ ‫ّ‬ ‫>بدل شاشة العرض ‪( Screen1‬الشاشة األولى) إلى وضع ‪( Blocks‬اللبنات)‪،‬‬ ‫تحديد زر القائمة ‪( Foods‬األطعمة)‪.‬‬ ‫>من لوحة ‪( Blocks‬اللبنات) اضغط على لبنة ‪( Lists‬القوائم)‪.‬‬ ‫>اضغط على لبنة ‪( make a list‬إنشاء قائمة)‪،‬‬ ‫> سيكون الظاهر في البرنامج فقط فراغين‪.‬‬ ‫>اضغط إشارة‬ ‫‪5‬‬ ‫‪2‬‬ ‫ثم اسحبها وأفلتها داخل منطقة البرمجة‪.‬‬ ‫‪4‬‬ ‫إلضافة المزيد من العناصر في القائمة‪.‬‬ ‫> اضغط على ‪( item‬عنصر)‪،‬‬ ‫> أنشئ ‪ 6‬عناصر للقائمة‪.‬‬ ‫‪3‬‬ ‫‪1‬‬ ‫وتأكد من‬ ‫ثم اسحبه وأفلته تحت لبنة ‪( list‬قائمة)‪.‬‬ ‫‪6‬‬ ‫‪7‬‬ ‫‪8‬‬ ‫‪1‬‬ ‫‪3‬‬ ‫‪4‬‬ ‫‪5‬‬ ‫‪2‬‬ ‫‪6‬‬ ‫‪7‬‬ ‫‪8‬‬ ‫‪141‬‬ ‫إلضافة نص لعناصر القائمة‪:‬‬ ‫> من لوحة ‪( Blocks‬اللبنات) اضغط على قسم لبنات ‪( Text‬النص)‪.‬‬ ‫‪1‬‬ ‫>اضغط على لبنة " " ‪( A text String‬سلسلة نصية " ") ثم اسحبها وأفلتها‬ ‫بجوار كل فراغ تحت لبنة ‪( make a list‬إنشاء قائمة)‪2 .‬‬ ‫> اضغط داخل لبنة " " ‪( A text String‬سلسلة نصية " ") لكتابة النص‪.‬‬ ‫> اكتب اسم كل أصناف الطعام‪.‬‬ ‫‪3‬‬ ‫‪4‬‬ ‫‪2‬‬ ‫‪1‬‬ ‫‪3‬‬ ‫‪4‬‬ ‫‪142‬‬ ‫استخدام المتغيرات (‪)Variables‬‬ ‫في ّ‬ ‫مطور التطبيقات‪ ،‬المتغير هو موقع تخزين يحتوي على قيمة يمكن أن تتغير أثناء تنفيذ التطبيق‪ .‬يمكن استخدام المتغيرات لتخزين‬ ‫مجموعة واسعة من أنواع البيانات ‪ ،‬بما في ذلك األرقام أو النصوص أو القوائم‪ .‬يمكن تهيئة المتغيرات بقيمة أولية‪ ،‬وتحديثها أثناء تنفيذ‬ ‫التطبيق واستخدامها في العبارات الشرطية للتحكم في سلوك التطبيق‪.‬‬ ‫هناك نوعان من المتغيرات وهما‪:‬‬ ‫‪.1‬المتغيرات المحلية (‪:)Local Variable‬‬ ‫ُ‬ ‫وهي المتغيرات التي ال يمكن استخدامها إال داخل لبنة محددة؛ وتستخدم اللبنة اآلتية إلنشاء المتغير المحلي‪:‬‬ ‫في المثال اآلتي تم إنشاء متغير محلي اسمه "‪ "a‬وقيمته ‪.10‬‬ ‫‪.2‬المتغيرات العامة (‪:)Global Variable‬‬ ‫ُ‬ ‫وهي المتغيرات التي يمكن استخدامها أو تغيير قيمتها في أي جزء من التطبيق؛ وتستخدم اللبنة اآلتية لتعريف المتغير العام‪:‬‬ ‫‪143‬‬ ‫متغ� عام‪.‬‬ ‫ليك تستخدم القائمة الخاصة بك‪ ،‬يجب أن تعينها إىل ي‬ ‫ي‬ ‫لتعيين متغير لقائمة‪:‬‬ ‫> من لوحة ‪( Blocks‬اللبنات) اضغط على قسم لبنات ‪( variables‬المتغيرات)‪.‬‬ ‫‪1‬‬ ‫>إلنشاء متغير عام اضغط على لبنة ‪( initialize global name to‬تهيئة االسم العام‬ ‫إلى) ثم اسحبها وأفلتها داخل منطقة البرمجة‪2 .‬‬ ‫> اضغط داخل االسم ثم اكتب "‪ "Foods‬كإسم للمتغير‪.‬‬ ‫ً‬ ‫> اربط المتغير ‪ Foods‬بالقائمة التي أضفتها سابقا‪4 .‬‬ ‫‪3‬‬ ‫‪2‬‬ ‫‪1‬‬ ‫‪4‬‬ ‫‪3‬‬ ‫‪144‬‬ ‫برمجة قائمة الطعام في مطور التطبيقات ‪MIT‬‬ ‫ً‬ ‫ً‬ ‫جديدا وتعين قيمة محددة له من القائمة؛ لكي تتم عملية اختيار قائمة األصناف‪.‬‬ ‫متغيرا‬ ‫عليك أن تنشئ‬ ‫ً‬ ‫متغيرا ً‬ ‫ً‬ ‫جديدا باسم "‪ "selection‬وقم بتوصيله بلبنة " " ‪( A text String‬سلسلة نصية " ")‪.‬‬ ‫عاما‬ ‫أنشئ‬ ‫هذه الخطوة ضرورية لكي‬ ‫يعمل التطبيق بشكل صحيح‬ ‫عند تثبيته على الهاتف الذكي‪.‬‬ ‫ستبرمج اآلن قائمة األطعمة التي أنشأتها‪ ،‬وذلك باستخدام األوامر اآلتية حيث سيتم تفعيل القائمة وتصبح جاهزة لالستخدام‪.‬‬ ‫لعرض القائمة‪:‬‬ ‫> من لوحة ‪( Blocks‬اللبنات)‪ ،‬اضغط على زر القائمة ‪.Foods‬‬ ‫‪1‬‬ ‫>اضغط على لبنة ‪( when Foods.BeforePicking do‬عندما تكون األطعمة‪.‬قبل االختيار) واسحبها‬ ‫وأفلتها في منطقة البرمجة‪2 .‬‬ ‫>اضغط على لبنة ‪( set Foods.Elements to‬عين عناصر‪.‬األطعمة إلى) ثم اسحبها وأفلتها في لبنة‬ ‫‪( when Foods.BeforePicking do‬عندما تكون األطعمة‪.‬قبل االختيار)‪3 .‬‬ ‫> في لوحة ‪( Blocks‬اللبنات)‪ ،‬اضغط على قسم ‪( Variables‬المتغيرات)‪.‬‬ ‫‪4‬‬ ‫>اضغط على لبنة ‪( get‬احصل على)‪ ،‬واسحبها وأفلتها إلى اللبنة ‪( set FoodsElements to‬عين عناصر‬ ‫األطعمة) إلى داخل اللبنة ‪( when Foods.BeforePicking do‬عندما تكون األطعمة‪.‬قبل االختيار)‪5 .‬‬ ‫> اضغط على السهم الموجود في لبنة ‪( get‬احصل على) وحدد ‪.global Foods‬‬ ‫‪6‬‬ ‫‪2‬‬ ‫‪1‬‬ ‫‪145‬‬ 3 5 4 6 146 ‫عندما تفتح التطبيق في هذه المرحلة على‬ ‫هاتفك الذكي‪ ،‬سترى ما يأتي‪:‬‬ ‫عندما تضغط على‬ ‫زر األطعمة الصحية‬ ‫ستظهر القائمة‪.‬‬ ‫واآلن‪ ،‬أنشئ شاشة جديدة‪ ،‬بحيث عند اختيار أي عنصر‬ ‫من القائمة "‪ ،"Meat_FiIsh‬على سبيل المثال "اللحوم‬ ‫واألسماك"‪ ،‬سيتم فتح شاشة جديدة لهذا العنصر‪.‬‬ ‫ستحتوي شاشة اللحوم واألسماك (‪)meat and fish‬‬ ‫على األدوات اآلتية‪:‬‬ ‫> ‪( Labels‬التسميات)‪.‬‬ ‫> ‪( Image‬الصورة)‪.‬‬ ‫أنشئ شاشة‬ ‫جديدة واستخدم‬ ‫مكون التسمية‬ ‫(‪ )label‬إلضافة‬ ‫النص‪.‬‬ ‫‪147‬‬ ‫ً‬ ‫أيضا على صورة‪ ،‬سترى في هذه الخطوات كيفية إضافة صورة إلى الشاشة‪:‬‬ ‫ستحتوي هذه الشاشة‬ ‫إلضافة صورة إلى الشاشة‪:‬‬ ‫>اسحب وأفلت أداة ‪( Image‬صورة) من لوحة ‪( User Interface‬واجهة المستخدم) إلى شاشة العرض‪.‬‬ ‫‪1‬‬ ‫>من ‪( Properties‬الخصائص) اضغط ‪( Picture‬صورة) ثم اضغط ‪( Upload File‬رفع ملف) لتحميل‬ ‫الصورة من الحاسب الخاص بك‪2 .‬‬ ‫> اضغط ‪( Choose File‬اختر ملف)‪.‬‬ ‫‪3‬‬ ‫>ستظهر نافذة ‪( open‬فتح)‪ ،‬اختر الصورة التي تريد إضافتها من الحاسب الخاص بك‪،‬‬ ‫(فتح)‪5 .‬‬ ‫> ثم اضغط ‪( OK‬موافق)‪.‬‬ ‫> تم أدرج الصورة‪.‬‬ ‫‪4‬‬ ‫ثم اضغط ‪Open‬‬ ‫‪6‬‬ ‫‪7‬‬ ‫>من ‪( Properties‬الخصائص)‪ ،‬حدد ‪( Width‬العرض) إلى ‪.30precent‬‬ ‫‪9‬‬ ‫‪1‬‬ ‫‪3‬‬ ‫‪2‬‬ ‫‪148‬‬ ‫‪7‬‬ ‫‪4‬‬ ‫‪5‬‬ ‫‪6‬‬ ‫‪8‬‬ ‫‪9‬‬ ‫بعد تغيير خصائص‬ ‫الصورة فإنها ستبدو هكذا‪.‬‬ ‫‪149‬‬ ‫اآلن بعد أن أنشأت شاشة اللحوم واألسماك (‪ ،)Meat and fish‬تحتاج إلى برمجة القائمة لفتح هذه الشاشة عند الضغط على القائمة‬ ‫لعرض عنصر من القائمة‪:‬‬ ‫> اختر ‪( Screen1‬الشاشة االولى)‪.‬‬ ‫‪1‬‬ ‫>من لوحة ‪( Blocks‬اللبنات) اضغط على زر ‪.Foods‬‬ ‫‪2‬‬ ‫>اضغط على لبنة ‪( when Foods.AfterPicking do‬عندما تكون األطعمة‪.‬بعد االختيار)‪ ،‬ثم اسحبها وأفلتها داخل‬ ‫منطقة البرمجة‪3 .‬‬ ‫>من لوحة ‪( Blocks‬اللبنات)‪ ،‬اضغط قسم لبنات ‪( Variables‬المتغيرات)‪.‬‬ ‫‪4‬‬ ‫>اضغط لبنة ‪( set to‬اضبط إلى)‪ ،‬ثم اسحبها وأفلتها داخل لبنة ‪( when Foods.AfterPicking do‬عندما تكون‬ ‫األطعمة‪.‬بعد االختيار)‪5 .‬‬ ‫>من لوحة ‪( Blocks‬اللبنات)‪ ،‬اضغط على زر ‪.Foods‬‬ ‫‪6‬‬ ‫>اضغط على لبنة ‪( Foods.Elements‬عناصر‪.‬األطعمة) ثم اسحبها وأفلتها داخل لبنة ‪when Foods.AfterPicking‬‬ ‫‪( do‬عندما تكون األطعمة‪.‬بعد االختيار) بجوار اضبط إلى (‪7 .)set to‬‬ ‫>اضغط على السهم بجوار ‪( set to‬اضبط إلى)‪ ،‬واختر ‪( global selection‬االختيار العام)‪.‬‬ ‫>اضغط على السهم بجوار ‪( Elements‬العناصر) واختر ‪( Selection‬االختيار)‪.‬‬ ‫‪8‬‬ ‫‪9‬‬ ‫‪1‬‬ ‫‪3‬‬ ‫‪2‬‬ ‫‪150‬‬ ‫‪5‬‬ ‫‪4‬‬ ‫‪7‬‬ ‫‪9‬‬ ‫‪6‬‬ ‫‪8‬‬ ‫سيتم تشغيل هذا الحدث بعد اختيار عنصر من القائمة؛ ُيرجع منتقي القائمة (‪ )ListPicker‬نتائجه والخصائص التي تم ملؤها فيه‪.‬‬ ‫‪151‬‬ ‫االختيار‬ ‫يتم استخدام الجملة الشرطية ‪( If then‬إذا عندما) لبرمجة عنصر القائمة بحيث يفتح الشاشة المرتبطة به عند الضغط عليه‪.‬‬ ‫إذا ضغطت على صنف "اللحوم و األسماك" فيجب فتح الصفحة المقابلة له‪.‬‬ ‫إلضافة تركيب ‪ if‬الشرطي‪:‬‬ ‫> من لوحة ‪( Blocks‬اللبنات) اضغط على قسم لبنات ‪( Control‬التحكم)‪.‬‬ ‫‪1‬‬ ‫> اضغط على لبنة ‪( if then‬إذا)‪ ،‬واسحبها وأفلتها داخل المنطقة البرمجية‪.‬‬ ‫‪2‬‬ ‫> اضغط على لبنة ‪( Logic‬المنطقية)‪.‬‬ ‫> اسحب وأفلت لبنة = بجانب لبنة ‪.if‬‬ ‫‪3‬‬ ‫‪4‬‬ ‫> اضغط على لبنة ‪( Variables‬المتغيرات)‪.‬‬ ‫‪5‬‬ ‫>اسحب وأفلت لبنة ‪( get‬احصل على) إلى الجزء األيسر من اللبنة =‪ ،‬واختر ‪( global selection‬االختيار العام)‪.‬‬ ‫> اضغط على لبنة ‪( Text‬النص)‪.‬‬ ‫>اسحب وأفلت لبنة ‪( Text‬النص)‬ ‫‪7‬‬ ‫‪8‬‬ ‫إلى الجزء األيمن من اللبنة =‪ ،‬واكتب "اللحوم واألسماك" (‪.)Meat and Fish‬‬ ‫‪2‬‬ ‫‪1‬‬ ‫‪3‬‬ ‫‪4‬‬ ‫‪152‬‬ ‫‪6‬‬ ‫‪9‬‬ 6 5 8 7 9 153 ‫افتح شاشة جديدة‬ ‫عند الضغط على عنصر في القائمة‪ ،‬يجب فتح الشاشة المقابلة‪ .‬على سبيل المثال‪ ،‬إذا ضغطت على خيار اللحوم واألسماك‪ ،‬فيجب‬ ‫فتح شاشة اللحوم واألسماك (‪ )meat and fish‬في التطبيق‪.‬‬ ‫فتح شاشة جديدة‪:‬‬ ‫> اضغط على قسم لبنات ‪( Control‬التحكم)‪.‬‬ ‫‪1‬‬ ‫>اسحب وأفلت لبنة ‪ ( open another screen screenName‬افتح شاشة أخرى ‪،)screenName‬‬ ‫"‪3 ."Meat_Fish‬‬ ‫> ضع اللبنة الجديدة بجوار لبنة ‪( then‬ثم)‪.‬‬ ‫‪2‬‬ ‫‪4‬‬ ‫>اربط لبنة ‪( if then‬إذا عندما) بلبنة ‪( when Foods.AfterPicking do‬عندما تكون األطعمة‪.‬بعد االختيار)‪.‬‬ ‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫‪4‬‬ ‫‪154‬‬ ‫وحدد‬ ‫‪5‬‬ ‫‪5‬‬ ‫إنشاء قائمة فرعية‬ ‫ً‬ ‫تتضمن قائمة الحبوب أصنافا فرعية‪ ،‬وهذا يعني أنه عند الضغط على قائمة الحبوب الرئيسة يجب فتح قائمة فرعية لتعرض اآلتي‪:‬‬ ‫متغ� ‪.Foods‬‬ ‫عليك برمجة قائمة جديدة لهذه األصناف وتعيينها إىل ي‬ ‫‪155‬‬ ‫ُ‬ ‫ستوضع القائمة داخل لبنة ‪ ،if‬حيث ستظهر هذه الخيارات عند الضغط على قائمة الحبوب‪.‬‬ ‫لذلك‪ ،‬سيكون الرمز النهائي للقائمة عند الضغط على زر األطعمة الصحية كما يأتي‪:‬‬ ‫تفتح قائمة العناصر عندما‬ ‫يضغط عليها المستخدم؛ ويمكنك‬ ‫العثور عليها في المقطع البرمجي‬ ‫لمنتقي القائمة (‪.)Listpicker‬‬ ‫‪156‬‬ ‫ر ً‬ ‫ابعا‪ :‬النشر والتسويق‬ ‫مجموعة حزمة أندرويد (‪)Android Package Kit‬‬ ‫حزمة ‪ APK‬الخاصة باألندرويد هي تنسيق ملف الحزمة الذي يستخدمه نظام التشغيل أندرويد لتوزي ــع تطبيقات الجوال وتثبيتها‪ ،‬مثلما‬ ‫يحدث مع أجهزة الحاسب بنظام ويندوز التي تستخدم الملفات باالمتداد ‪ .exe‬لتثبيت البرامج‪ ،‬يقوم ملف ‪ APK‬بنفس الوظيفة مع‬ ‫نظام أندرويد‪ .‬عندما ّ‬ ‫تحمل ملف ‪ APK‬عبر اإلنترنت‪ ،‬فأنت في الواقع تحصل على التطبيق‪.‬‬ ‫ً‬ ‫جاهزا‪ ،‬يمكنك إنشاء ملف ‪ APK‬لكي تشاركه مع زمالئك‪.‬‬ ‫إذا أصبح تطبيقك‬ ‫‪1‬‬ ‫فتح شاشة جديدة‪:‬‬ ‫> اضغط على ‪( Build‬بناء)‪.‬‬ ‫‪2‬‬ ‫‪1‬‬ ‫>اختر(‪( Android App.(apk‬تطبيق أندرويد‪.‬‬ ‫(‪2 .))apk‬‬ ‫>يظهر ‪( Progress Bar‬شريط التقدم)‪،‬‬ ‫وعند اكتمال الشريط يمكنك اختيار إما حفظ‬ ‫الملف على جهاز الحاسب الخاص بك‪ 4 ،‬أو‬ ‫تقديم رمز االستجابة السري ــع ‪5 .QR‬‬ ‫‪3‬‬ ‫‪3‬‬ ‫‪5‬‬ ‫‪4‬‬ ‫‪157‬‬ ‫لنطبق ً‬ ‫معا‬ ‫تدريب ‪1‬‬ ‫ت‬ ‫ت‬ ‫يأ� وتحقق منها باستخدام الحاسب‪:‬‬ ‫اخ� اإلجابة الصحيحة مما ي‬ ‫‪.1‬أي لبنة تفتح شاشة جديدة؟‬ ‫‪.2‬أي لبنة تحدد قيمة للمتغير؟‬ ‫‪.3‬أي لبنة تنشئ قيمة أولية للمتغير؟‬ ‫‪158‬‬ ‫تدريب ‪2‬‬ ‫ّ‬ ‫حسن التطبيق الذي أنشأته في الدرس من خالل إضافة عناصر غذائية أخرى عن طريق إنشاء‬ ‫قوائم وشاشات مطابقة‪.‬‬ ‫> الحبوب (الشوفان‪ ،‬األرز‪ ،‬الخبز)‪.‬‬ ‫> الفواكه (التفاح‪ ،‬الموز‪ ،‬البرتقال)‪.‬‬ ‫>منتجات الحليب (الجبن‪ ،‬الحليب‪ ،‬اللبن‪ ،‬الزبادي)‪.‬‬ ‫>المكسرات (اللوز‪ ،‬الكاجو‪ ،‬الفستق)‪.‬‬ ‫تدريب ‪3‬‬ ‫ً‬ ‫أضف ً‬ ‫زرا جديدا باسم ‪( Sports practice‬ممارسة الرياضة) في تطبيقك كما فعلت في قائمة‬ ‫األطعمة الصحية‪ .‬وعند الضغط على هذا الزر‪ ،‬ستظهر قائمة بتمارين مختلفة؛ أنشئ التعليمات‬ ‫البرمجية المطابقة واختبر التطبيق‪.‬‬ ‫تدريب ‪4‬‬ ‫ّ‬ ‫حسن التطبيق حول البلد الذي تريد زيارته عن طريق إضافة المزيد من المكونات‪.‬‬ ‫>باستخدام أداة منتقي القائمة‪ ،‬أنشئ زر باسم ‪( sightseeing‬المعالم السياحية)؛ ُليظهر المعالم السياحية األكثر‬ ‫شعبية في البلد عند الضغط على القائمة‪.‬‬ ‫>أنشئ ً‬ ‫رمزا لتحديد معلم محدد من معالم القائمة‪ ،‬وافتح الشاشة المتطابقة‪.‬‬ ‫> أنشئ ملف ‪ّ ،apk.‬‬ ‫وحمل التطبيق على هاتفك الذكي‪.‬‬ ‫‪159‬‬ ‫مـ شـروع الوحدة‬ ‫أنشئ تطبيق اختبار قصير للهاتف الذكي‪.‬‬ ‫سيحتوي االختبار على ثالثة أسئلة متعددة الخيارات تتعلق بالتقنية الرقمية‪ .‬لكل سؤال ثالث خيارات؛‬ ‫أحدها فقط هو الصحيح‪.‬‬ ‫> إذا تمت اإلجابة عن السؤال بشكل صحيح‪ ،‬فستظهر رسالة "اإلجابة صحيحة " (‪.)Correct Answer‬‬ ‫> إذا كانت اإلجابة غير صحيحة‪ ،‬فستعرض رسالة "حاول مرة أخرى" (‪.)Try again‬‬ ‫‪1‬‬ ‫َّ‬ ‫مخط ًطا ًّ‬ ‫يدويا للتطبيق‪.‬‬ ‫خطط وصمم‬ ‫‪2‬‬ ‫طور التطبيق باستخدام ُم ّ‬ ‫ّ‬ ‫طور التطبيقات ‪.MIT‬‬ ‫> أضف زر أمر بعنوان "‪ "Start the Quiz‬في الشاشة األولى‪.‬‬ ‫> أنشئ شاشة خاصة بكل سؤال‪.‬‬ ‫> ضع أداة التسمية (‪ )Label‬خاصة بكل سؤال‪.‬‬ ‫> ضع أداة زر األمر (‪ )button‬بجانب كل إجابة‪.‬‬ ‫> أنشئ شاشتين‪ ،‬واحدة بـاسم "‪ "Correct Answer‬واألخرى بـاسم "‪."Try again‬‬ ‫> في شاشة "‪ "Try again‬ضع ًّزرا ينقلك إلى الشاشة األولى‪.‬‬ ‫‪3‬‬ ‫> برمج األزرار لتفتح الشاشات بشكل صحيح‪.‬‬ ‫> احفظ التطبيق ثم شغله واختبره‪.‬‬ ‫‪4‬‬ ‫‪160‬‬ ‫ّ‬ ‫حمل التطبيق على جهازك الهاتف الذكي‪.‬‬ ‫في الختام‬ ‫جدول المهارات‬ ‫درجة اإلتقان‬ ‫المهارة‬ ‫أتقن‬ ‫لم يتقن‬ ‫‪ .1‬تمييز المفاهيم األساسية لتطبيقات الهاتف الذكي‪.‬‬ ‫‪ .2‬تحديد خطوات بناء تطبيق الهاتف الذكي‪.‬‬ ‫‪ .3‬تصميم واجهة مستخدم لتطبيق الهاتف الذكي‪.‬‬ ‫‪ .4‬إنشاء تطبيقات الهواتف الذكية ببيئة برمجة قائمة على اللبنات البرمجية األساسية‪.‬‬ ‫‪ .5‬اختبار التطبيقات على الهواتف الذكية‪.‬‬ ‫المصطلحات‬ ‫ملف ‪APK‬‬ ‫برنامج تطبيقي‬ ‫‪APK file‬‬ ‫‪Application Software‬‬ ‫تطبيق الهاتف الذكي‬ ‫رمز االستجابة السريـ ــع‬ ‫الخلفية‬ ‫‪Background‬‬ ‫اللبنات‬ ‫‪Blocks‬‬ ‫برنامج النظام‬ ‫الزر‬ ‫‪Button‬‬ ‫المتغيرات‬ ‫المكونات‬ ‫القائمة‬ ‫‪Components‬‬ ‫‪List‬‬ ‫القائمة الفرعية‬ ‫خبرة المستخدم‬ ‫واجهة المستخدم‬ ‫‪Mobile Application‬‬ ‫‪QR code‬‬ ‫‪Sub-menu‬‬ ‫‪System Software‬‬ ‫‪Variables‬‬ ‫‪User Experience‬‬ ‫‪User Interface‬‬ ‫‪161‬‬ ‫اخت� نفسك‬ ‫ب‬ ‫السؤال األول‬ ‫ييل‪:‬‬ ‫حدد الجملة الصحيحة والجملة الخطأ فيما ي‬ ‫‪ .1‬عدم وجود خطة إلدارة ش‬ ‫الم�وع يؤدي إىل ضياع الوقت وضعف األداء‪.‬‬ ‫الم�وع ف� توف� الوقت والجهد ت‬ ‫بال� ي ز‬ ‫‪ .2‬تساعد إدارة ش‬ ‫ك� عىل األولويات‪.‬‬ ‫ي‬ ‫ي‬ ‫الم�وع ض‬ ‫‪ .3‬إدارة ش‬ ‫تق� عىل احتمالية الفشل‪.‬‬ ‫ي‬ ‫للم�وع وفهمها لضمان جودة ش‬ ‫التغي�ات ف� العنارص الرئيسة ش‬ ‫الم�وع‪.‬‬ ‫‪ .4‬يجب دراسة‬ ‫ي‬ ‫ي‬ ‫ق‬ ‫ف‬ ‫ش‬ ‫با� العنارص أو الجودة‪.‬‬ ‫‪ .5‬تأثر أحد المحددات ي� مثلث إدارة الم�وع ال يؤثر عىل ي‬ ‫الب�ية إىل خطة خاصة ً‬ ‫تبعا لحجم واحتياجات ش‬ ‫‪ .6‬يمكن فصل خطة الموارد ش‬ ‫الم�وع‪.‬‬ ‫‪ .7‬تتكون خطة القبول من المهام والقرارات المتعلقة بتكلفة ش‬ ‫الم�وع‪.‬‬ ‫معاي� الموارد ولكنها ليست عىل وجه التحديد ً‬ ‫جزءا من الخطة المالية‪.‬‬ ‫‪ .8‬تحدد خطة القبول‬ ‫ي‬ ‫ً ف‬ ‫ك� ف� تقدير التكلفة ً‬ ‫ن‬ ‫حاسما ي� دقتها‪ ،‬كما أن الحصول عىل‬ ‫دورا‬ ‫‪.9‬تؤدي ب‬ ‫خ�ة األفراد المشار ي ي‬ ‫ف‬ ‫ث‬ ‫بيانات من مشاري ــع سابقة أو مشاري ــع مماثلة يساهم ي� الحصول عىل تقديرات أك� دقة‪.‬‬ ‫تعي� الموارد هو عملية تحديد وتنظيم جميع الموارد الالزمة إلكمال ش‬ ‫‪ .10‬ي ن‬ ‫الم�وع‪ ،‬مثل‬ ‫الموارد ش‬ ‫الب�ية والمعدات والمواد والمرافق‪.‬‬ ‫ف‬ ‫الب�ية عىل العنرص ش‬ ‫‪.11‬تركز الموارد ش‬ ‫الب�ي ومشاركتهم ي� تنفيذ المهام واألنشطة داخل‬ ‫المؤسسة‪.‬‬ ‫‪162‬‬ ‫صحيحة‬ ‫خطأ‬ ‫ن‬ ‫الثا�‬ ‫السؤال‬ ‫ي‬ ‫ييل‪:‬‬ ‫حدد الجملة الصحيحة والجملة الخطأ فيما ي‬ ‫صحيحة‬ ‫خطأ‬ ‫‪ .1‬يمكن حساب أولويات الموارد باستخدام طريقة المسار الحرج‪.‬‬ ‫‪.2‬يمكن أن يساعد تقسيم فريق العمل إىل فرق فرعية ألداء العمل بشكل ّ‬ ‫فعال من خالل‬ ‫ِ‬ ‫ٍ‬ ‫تقسيمه إىل أجزاء أصغر وأبسط‪.‬‬ ‫ف‬ ‫ً‬ ‫ً‬ ‫ن‬ ‫زم� يساعد ي� التخطيط والتنسيق وتتبع‬ ‫‪.3‬يوفر مخطط ف جانت رسما تخطيطيا لجدول ي‬ ‫مهام محددة � ش‬ ‫الم�وع‪.‬‬ ‫ي‬ ‫ً‬ ‫‪.4‬التفاوض ليس �ض‬ ‫وريا عند تقدير الوقت‪ ،‬ت‬ ‫ح� لو كانت هناك مواعيد نهائية لتسليم‬ ‫ش‬ ‫الم�وع‪.‬‬ ‫ف‬ ‫‪.5‬مدي ــر الم ـ شـروع فق ــط ه ــو المس ــؤول ع ــن تحدي ــد مق ــدار الوق ــت المخص ــص ل ــكل عض ــو ي�‬ ‫الفري ــق‪.‬‬ ‫‪ .6‬تقوم طريقة أيزنهاور بتقييم المهام ً‬ ‫بناء عىل أهميتها وتعقيدها‪.‬‬ ‫ُ‬ ‫أسايس ف ي� تصنيف البيانات وترتيبها حسب المهام‪.‬‬ ‫‪.7‬تستخدم طريقة تحليل ‪ ABC‬بشكل‬ ‫ي‬ ‫ن‬ ‫زم�‬ ‫‪.8‬تتضمن إدارة المهام عملية تحديد المهام الفردية وتخطيطها وتنفيذها ضمن إطار ي‬ ‫محدد‪.‬‬ ‫‪ .9‬تطبيق جانت بروجكت ال يوفر معلومات حول المواعيد النهائية ش‬ ‫للم�وع‪.‬‬ ‫ب� المهام ف� إدارة ش‬ ‫‪ .10‬التبعيات يه العالقات ي ن‬ ‫الم�وع‪.‬‬ ‫ي‬ ‫ي‬ ‫ُّ‬ ‫ً‬ ‫ً‬ ‫أساسيا ف� إدارة المسار الحرج ش‬ ‫للم�وع‪.‬‬ ‫عنرصا‬ ‫‪ُ .11‬يعد فهم تبعية المهام‬ ‫ي‬ ‫ن‬ ‫تنتيه مهمة أخرى‪.‬‬ ‫تع� أن مهمة واحدة يجب أن تبدأ قبل أن‬ ‫ي‬ ‫‪ .12‬عالقة البداية للنهاية ي‬ ‫‪163‬‬ ‫السؤال الثالث‬ ‫ييل‪:‬‬ ‫حدد الجملة الصحيحة والجملة الخطأ فيما ي‬ ‫ال�مجيات إطار عمل لتنظيم عمليات اإلنتاج ألي نظام ف� ت‬ ‫ش�‬ ‫‪.1‬توفر دورة حياة تطوير ب‬ ‫ي‬ ‫المجاالت بما ف ي� ذلك أنظمة تقنية المعلومات واالتصاالت‪.‬‬ ‫ين‬ ‫تحس� استخدام الموارد أثناء مرحلة الصيانة‪ ،‬وليس أثناء‬ ‫‪.2‬تهدف دورة حياة النظام إىل‬ ‫مرحلة التطوير واالختبار‪.‬‬ ‫ال�مجيات واألجهزة الخاصة‬ ‫‪.3‬دورة حياة النظام قابلة للتطبيق بهدف تطوير مكونات ب‬ ‫بأنظمة تقنية المعلومات واالتصاالت‪.‬‬ ‫‪.4‬تتضمن عملية التحليل تحديد جميع الوظائف المطلوبة للنظام الجديد بالتفصيل مع‬ ‫اإلشارة إىل أية صعوبات محتملة‪.‬‬ ‫‪.5‬مرحل ــة التطوي ــر ومرحل ــة االختب ــار منفصلت ــان ً‬ ‫تمام ــا ويمك ــن تنفيذهم ــا بش ــكل مس ــتقل ع ــن‬ ‫بعضهم ــا البع ــض‪.‬‬ ‫ُّ‬ ‫‪.6‬تعد الصيانة �ض ورية لمعالجة أخطاء النظام‪ ،‬كما تعمل عىل ضبط النظام ليتالءم مع أية‬ ‫اختالفات ف ي� بيئات العمل‪.‬‬ ‫ت‬ ‫يل� جميع المتطلبات‬ ‫‪.7‬التقييم المستمر ال حاجة له؛ ألنه عند تنفيذ النظام من المف�ض أن ب ي‬ ‫دون الحاجة إىل التقييم‪.‬‬ ‫َّ‬ ‫يه مرحلة منفصلة تنفذ بعد اكتمال مرحلة الصيانة‪.‬‬ ‫‪ .8‬مرحلة التوثيق ي‬ ‫ِّ‬ ‫يز‬ ‫ت‬ ‫ال� يجب أن ينفذها النظام‪.‬‬ ‫‪ .9‬تحدد المتطلبات الوظيفية اإلجراءات األساسية‬ ‫والم�ات ي‬ ‫ت‬ ‫للمستخد ي ن‬ ‫م�‪.‬‬ ‫ال� يظهرها النظام‬ ‫‪ .10‬تشمل المتطلبات ي‬ ‫ِ‬ ‫غ� الوظيفية الرسائل والتنبيهات ي‬ ‫ُّ‬ ‫ُ َّ‬ ‫ئ‬ ‫خططات ث‬ ‫النيص‪.‬‬ ‫أك� فعالية من الوصف‬ ‫المر� للمعلومات باستخدام الم‬ ‫‪ .11‬يعد التمثيل‬ ‫ي‬ ‫ي‬ ‫‪َّ ُ .12‬‬ ‫خططات يه تمثيل نيص للمعلومات باستخدام األشكال واألسهم لعرض ت‬ ‫ال�تيبات‬ ‫الم‬ ‫ي‬ ‫ي‬ ‫والعالقات المختلفة بينها‪.‬‬ ‫‪164‬‬ ‫صحيحة‬ ‫خطأ‬ ‫السؤال الرابع‬ ‫ييل‪:‬‬ ‫حدد الجملة الصحيحة والجملة الخطأ فيما ي‬ ‫صحيحة‬ ‫خطأ‬ ‫ن ف‬ ‫ا� ي� االعتبار عىل تقليل‬ ‫‪.1‬يساعد تصميم األنظمة وتطويرها وصيانتها مع أخذ األمن‬ ‫ب‬ ‫السي� ي‬ ‫ت‬ ‫غ�‬ ‫الوصول‬ ‫من‬ ‫الحساسة‬ ‫واألنظمة‬ ‫اإللك�ونية‪ ،‬وحماية البيانات‪،‬‬ ‫أخطار الهجمات‬ ‫ي‬ ‫المرصح به‪.‬‬ ‫ن‬ ‫للتداب� األمنية بمجرد ش‬ ‫ا�‬ ‫ن� النظام كبديل لألمن‬ ‫‪.2‬يمكن للمؤسسات إعطاء األولوية‬ ‫ب‬ ‫ي‬ ‫السي� ي‬ ‫ف ي� دورة حياة النظام‪.‬‬ ‫‪ .3‬تي�ك كل عمل أو تصفح تقوم به ع� ت‬ ‫اإلن�نت ً‬ ‫أثرا يسىم البصمة الرقمية‪.‬‬ ‫ب‬ ‫ٍ‬ ‫ٍ‬ ‫‪ .4‬يمكن استخدام سجالت الخادم كأساس لتحليالت الويب‪.‬‬ ‫‪.5‬تنش ــأ البصم ــات الرقمي ــة غ ـ يـر النش ــطة دون قص ــد م ــن األف ـراد خ ــال بع ــض الح ــاالت أو‬ ‫االرتباط ــات المح ــددة‪.‬‬ ‫‪ .6‬جدار الحماية هو نظام أمان للشبكات تراقب وتتحكم ف ي� حركة مرور الشبكة‪.‬‬ ‫‪.7‬تقدم ش�كات التقنية أدلة موسعة حول كيفية جمعها للمعلومات الخاصة‪.‬‬ ‫‪.8‬يمكن ش‬ ‫ل�كات التقنية جمع المعلومات الخاصة من األفراد واستخدامها‪ ،‬لذلك من المهم‬ ‫أن يكونوا عىل دراية بكيفية قيامها بذلك‪.‬‬ ‫ِّ‬ ‫ت‬ ‫ت‬ ‫بشكل صامت‬ ‫اإللك�ونية ال تتبع سجالت تصفحك‬ ‫ال� تقدمها لك المواقع‬ ‫ٍ‬ ‫‪.9‬نفس الخوادم ي‬ ‫دون علمك‪.‬‬ ‫‪.10‬يمكن إنشاء