Digital Technology 3 - Smart Phone Applications PDF

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

‫الوحدة الثالثة‪:‬‬ ‫تطبيقات الهواتف الذكية‬ ‫ً‬ ‫ً‬ ‫ً‬ ‫يشهد العالم الرقمي في وقتنا الحالي ّ‬ ‫واستخداما من قبل مستخدمي‬ ‫انتشارا‬ ‫تطو ًرا هائاًل في عدد التطبيقات التي أصبحت أكثر‬ ‫الهواتف الذكية؛ لسهولة استخدامها وتوفيرها الكثير من الخدمات والفوائد‪ .‬في هذه الوحدة‪ ،‬ستتعلم كيفية إنشاء تطبيقات‬ ‫الهاتف الذكي باستخدام أداة تطوير للتطبيقات‪.‬‬ ‫أهداف التعلم‬ ‫ستتعلم في هذه الوحدة‪:‬‬ ‫> التمييز بين برامج النظام والبرامج التطبيقية‪.‬‬ ‫> التمييز بين واجهة المستخدم وتجربة المستخدم‪.‬‬ ‫> خطوات بناء تطبيقات الهواتف الذكية‪.‬‬ ‫ّ‬ ‫مطور التطبيقات ‪)MIT App Inventor) MIT‬‬ ‫>كيفية استخدام برنامج‬ ‫لتطوير تطبيق هاتف ذكي بسيط‪.‬‬ ‫> برمجة التطبيق واختباره على الهواتف الذكية‪.‬‬ ‫األدوات‬ ‫ّ‬ ‫مطور التطبيقات ‪)MIT App Inventor) MIT‬‬ ‫> برنامج‬ ‫> مصاحب الذكاء االصطناعي (‪)AI Companion‬‬ ‫‪112‬‬ ‫الدرس األول‪:‬‬ ‫مقدمة عن تطبيقات الهواتف الذكية‬ ‫ُ ُّ‬ ‫برامج النظام والبرامج التطبيقية هما نوعان أساسيان من البرامج التي تعد حاسمة لعمل جهاز الحاسب‪ .‬في هذا الدرس‪ ،‬ستتمكن من‬ ‫ً‬ ‫أيضا‪.‬‬ ‫التمييز بين هذين المفهومين وخصائص تطبيق الهاتف الذكي‬ ‫البرنامج‬ ‫هو مجموعة من التعليمات الخاصة بالحاسب تقوم بأداء مهمة محددة‪ ،‬وتنقسم إلى نوعين‪ ،‬برامج النظام والبرامج التطبيقية‪.‬‬ ‫األجهزة‬ ‫نظام التشغيل‬ ‫برنامج تطبيقي‬ ‫المستخدم‬ ‫برامج النظام (‪)System Software‬‬ ‫برامج النظام هي المسؤولة عن إدارة األجهزة‪ ،‬وتتضمن البرامج المخصصة إلدارة الحاسب‪ ،‬مثل‪ :‬نظام التشغيل‪ ،‬وأدوات‬ ‫إدارة الملفات‪.‬‬ ‫يتم تشغيل برنامج النظام ليعمل باستمرار في ذاكرة الحاسب‪ ،‬ويتضمن‪ :‬اإلعدادات والتفضيالت ومكتبات الملفات‬ ‫والوظائف المستخدمة لتطبيقات النظام‪ .‬يتم تصميم برنامج النظام لتنفيذ وتقديم خدمات لبرامج التطبيقات‪ ،‬وهو‬ ‫الوسيط بين المستخدم واألجهزة‪.‬‬ ‫أمثلة على برامج النظام‪:‬‬ ‫>أنظمة التشغيل (مثل ويندوز‪ ،‬وأندرويد‪ ،‬و‪ ،macOS‬و‪.)iOS‬‬ ‫>برامج تعريف المكونات المادية (مثل برنامج تعريف الطابعة)‪.‬‬ ‫‪113‬‬ ‫البرامج التطبيقية (‪)Application Software‬‬ ‫التطبيقات هي برامج الحاسبة تم تصميمها لتنفيذ مجموعة من المهام المنظمة أو األنشطة المنسقة المفيدة‬ ‫للمستخدم وتختصر بـ ‪.App‬‬ ‫يختص التطبيق بالمهمة التي تم تصميمه ألجلها‪ ،‬و التي قد تكون بسيطة كتطبيق اآللة الحاسبة أو شديدة التعقيد مثل‬ ‫تقريبا‪ً ،‬‬ ‫ً‬ ‫بدءا من الحاسب المكتبي والحاسب‬ ‫تطبيق معالجة النصوص‪ ،‬ويمكن تشغيل البرنامج التطبيقي على أي جهاز‬ ‫ً‬ ‫المحمول وصواًل إلى الهاتف الذكي والجهاز اللوحي‪ .‬يطلق على التطبيقات التي يتم إنشاؤها لكي تعمل على أجهزة‬ ‫الهواتف الذكية اسم تطبيقات الهاتف الذكي‪.‬‬ ‫أمثلة على البرامج التطبيقية‪:‬‬ ‫> معالج النصوص‪.‬‬ ‫> جداول البيانات‪.‬‬ ‫> الحاسبة‪.‬‬ ‫> مستعرض الويب‪.‬‬ ‫> تطبيقات تحرير مقاطع الفيديو‪.‬‬ ‫االختالفات بين برامج النظام والبرامج التطبيقية‬ ‫وجه المقارنة‬ ‫االستخدام‬ ‫تستخدم لتشغيل مكونات الحاسب‪.‬‬ ‫تستخدم ألداء مهمة محددة‪.‬‬ ‫وقت تثبيت البرنامج‬ ‫ً‬ ‫يتــم تثبيــت برامــج النظــام علــى أجهــزة الحاســب عنــد يتــم تثبيــت البرنامــج التطبيقــي وفقــا لحاجــة‬ ‫المســتخدم ‪.‬‬ ‫تثبيــت نظــام التشــغيل‪.‬‬ ‫التعامل مع المستخدم‬ ‫ال يتعامــل المســتخدم عــادة مــع برامــج النظام بشــكل يتعامــل المســتخدم مــع البرامــج التطبيقيــة‬ ‫بشــكل مبا شــر‪.‬‬ ‫مباشــر‪ ،‬وإنمــا مــن خــال البرامــج التطبيقية‪.‬‬ ‫االستقاللية‬ ‫‪114‬‬ ‫برامج النظام‬ ‫البرامج التطبيقية‬ ‫يمكن أن تعمل برامج النظام بشكل مستقل‪.‬‬ ‫ال تســتطيع البرامــج التطبيقيــة العمــل بشــكل‬ ‫مســتقل‪ ،‬بــل تعمــل فــي بيئــة برنامــج النظــام‪.‬‬ ‫تطبيقات الهواتف الذكية (‪)Mobile application‬‬ ‫هي نوع من البرامج التطبيقية تم تصميمها لكي تعمل على األجهزة المحمولة مثل الهواتف الذكية واألجهزة اللوحية‪.‬‬ ‫أمثلة لتطبيقات الهواتف الذكية‪:‬‬ ‫> تطبيقات البريد اإللكتروني‪.‬‬ ‫> تطبيقات التواصل االجتماعي‪.‬‬ ‫> تطبيقات الرسائل الفورية‪.‬‬ ‫> تطبيقات الخرائط‪.‬‬ ‫>تطبيقات حكومية (الوزارت‪ ،‬المدارس‪ ،‬المستشفيات‪.)...‬‬ ‫مراحل إنشاء تطبيقات الهواتف الذكية‬ ‫ً‬ ‫أواًل‪ :‬التخطيط والتصميم‬ ‫ً‬ ‫ثانيا‪ :‬التطوير (التنفيذ)‬ ‫حد د ا لفكرة ‪ ،‬وا لهد ف من‬ ‫التطبيق‪ ،‬والفئة المستهدفة منه‪.‬‬ ‫ً‬ ‫ً‬ ‫يدويا للتطبيق‬ ‫أنشئ مخططا‬ ‫يشمل وا جها ت ا لمستخد م‬ ‫المختلفة وكيفية ارتباطها مع‬ ‫بعضها‪.‬‬ ‫استخدم أحد برامج تطوير تطبيقات‬ ‫الهواتف الذكية لتنفيذ التصميم الذي‬ ‫توصلت إليه في المرحلة السابقة‪.‬‬ ‫ر ً‬ ‫ابعا‪ :‬النشر والتسويق‬ ‫ّ‬ ‫وحمله في متجر‬ ‫اعتمد التطبيق‬ ‫التطبيقات‪.‬‬ ‫ً‬ ‫ثالثا‪ :‬االختبار‬ ‫اختبر التطبيق وعالج أي مشاكل قد‬ ‫تظهر في البرمجة أو التصميم‪ ،‬ثم أضف‬ ‫اللمسات األخيرة إلى عملك‪.‬‬ ‫‪115‬‬ ‫التفاعل بين المستخدم والحاسب‬ ‫تتكون عملية تعامل المستخدم مع الحاسب من‪:‬‬ ‫واجهة المستخدم لتطبيقات الهواتف الذكية (‪User Interface (UI‬‬ ‫تعتمد عملية تصميم واجهة التطبيق على تحقيق التوازن والتناسق بين عناصره بما‬ ‫تتضمنه من ألوان وصور وعناصر التحكم مثل التسميات (‪ )Labels‬ومربعات النص‬ ‫(‪ )Text Boxes‬واألزرار (‪ .)Buttons‬فعملية تصميم التطبيق ال تقل أهمية عن‬ ‫برمجته‪ ،‬حيث إن واجهة التطبيق هي ما يراه المستخدم ويتفاعل معه عند استخدام‬ ‫التطبيق‪.‬‬ ‫تجربة المستخدم (‪User Experience (UX‬‬ ‫إن واجهة المستخدم الناجحة هي التي تشمل التنظيم الجيد للعناصر المرئية وآلية‬ ‫التحكم بالتطبيق‪ ،‬باإلضافة إلى مراعاة تجربة المستخدم والتي تشير إلى االهتمام‬ ‫برغبات وتوقعات المستخدم للوصول إلى احتياجاته بسهولة وفعالية‪.‬‬ ‫ً‬ ‫ً‬ ‫إيجابيا عند استخدامه‪.‬‬ ‫شعورا‬ ‫يجب أن يتم تصميم التطبيق بشكل يعطي المستخدم‬ ‫ً‬ ‫المواصفات العامة إلنشاء واجهة مستخدم جيدة تمنح تجربة مستخدم جيدة أيضا‪:‬‬ ‫> منظمة بشكل جيد‪.‬‬ ‫> بسيطة‪.‬‬ ‫> تعمل بكفاءة‪.‬‬ ‫> متجاوبة مع حاجات المستخدم‪.‬‬ ‫> مرنة‪.‬‬ ‫‪116‬‬ ‫أمثلة لبرامج إنشاء تطبيقات الهواتف الذكية‪:‬‬ ‫> ‪MIT App Inventor‬‬ ‫> ‪Thunkable‬‬ ‫ّ‬ ‫مطور التطبيقات ‪)MIT App Inventor( MIT‬؟‬ ‫ما هو برنامج‬ ‫ُيستخدم ّ‬ ‫مطور التطبيقات ‪ MIT‬إلنشاء تطبيقات الهواتف الذكية‪،‬‬ ‫> ‪AppyBuilder‬‬ ‫حيث يسمح بإنشاء التطبيقات دون الحاجة لكتابة المقطع‬ ‫البرمجي من خالل استخدام بيئة اللبنات بشكل مشابه لبرنامج‬ ‫سكراتش‪.‬‬ ‫> ‪Kodular‬‬ ‫> ‪DroidMaker‬‬ ‫> ‪HYBRO STUDIO‬‬ ‫ّ‬ ‫مطور التطبيقات ‪:MIT‬‬ ‫مميزات استخدام برنامج‬ ‫>اختصار الوقت‪ ،‬حيث يمكننا تطوير تطبيق في أقل من ساعة واحدة‪.‬‬ ‫>يساعد على تطوير مهارات اإلبداع من خالل استخدام اللبنات وتقليل احتماالت ارتكاب األخطاء‪.‬‬ ‫>سهولة مشاركة التطبيقات التي يتم إنشاؤها في هذا البرنامج‪.‬‬ ‫>إمكانية الوصول إلى العديد من الوظائف األساسية في الهاتف مثل المكالمات الهاتفية‪ ،‬الرسائل‬ ‫النصية القصيرة‪ ،‬وأجهزة االستشعار عن الموقع والصوت وغيرها‪.‬‬ ‫> إمكانية حفظ البيانات عبر منصات التخزين السحابي‪.‬‬ ‫تم تطوير برنامج ّ‬ ‫مطور التطبيقات ‪ MIT‬في معهد ماساتشوستس للتقنية‬ ‫(‪.)Massachusetts Institute of Technology‬‬ ‫‪117‬‬ ‫لنطبق ً‬ ‫معا‬ ‫تدريب ‪1‬‬ ‫حدد الجملة الصحيحة والجملة الخطأ فيما يلي‪:‬‬ ‫صحيحة‬ ‫خطأ‬ ‫‪ .1‬برامج النظام (‪ )System Software‬هي المسؤولة عن إدارة األجهزة‪.‬‬ ‫‪ .2‬يعد أندرويد أحد أنظمة برامج النظام‪.‬‬ ‫‪ .3‬يتعامل المستخدم مباشرة مع جميع برامج النظام‪.‬‬ ‫‪ .4‬يتم استخدام البرنامج التطبيقي من قبل المستخدم ألداء مهمة محددة‪.‬‬ ‫‪ .5‬متصفح الويب هو مثال على برامج النظام‪.‬‬ ‫تدريب ‪2‬‬ ‫اكتب الفرق بين واجهة المستخدم لتطبيقات الهواتف الذكية (‪ User Interface (UI‬وتجربة‬ ‫المستخدم ( ‪.User Experience (UX‬‬ ‫‪118‬‬ ‫تدريب ‪3‬‬ ‫صف كيف ستساعد مرحلة التخطيط والتصميم في تطوير التطبيق‪.‬‬ ‫تدريب ‪4‬‬ ‫ّ‬ ‫مطور التطبيقات ‪ MIT‬عن تطوير تطبيقات‬ ‫قارن كيف يختلف تطوير التطبيقات باستخدام‬ ‫الهواتف الذكية التقليدية‪.‬‬ ‫‪119‬‬ ‫الدرس الثاني‪:‬‬ ‫الذيك‬ ‫بناء تطبيقات الهاتف‬ ‫ي‬ ‫لقد تعلمت في الدرس السابق مراحل إنشاء تطبيق الهاتف الذكي‪ .‬في هذا الدرس ستنشئ أول تطبيق للهاتف الذكي الخاص بك‪.‬‬ ‫ً‬ ‫أواًل‪ :‬التخطيط والتصميم‬ ‫ّ‬ ‫وتطور تطبيقك الذي ستعمل‬ ‫قبل أن تصمم‬ ‫عليه‪ ،‬فإنه يتوجب عليك التخطيط الجيد له‬ ‫من خالل اتباع خطوات عديدة منها‪:‬‬ ‫تحديد فكرة التطبيق‪.‬‬ ‫تحديد أهداف التطبيق‪.‬‬ ‫تحديد الفئة المستهدفة من استخدام‬ ‫التطبيق‪.‬‬ ‫ً‬ ‫تصميم الشكل المبدئي للتطبيق (يدويا)‪.‬‬ ‫رسومات التطبيق‬ ‫‪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‬‬ ‫مـ شـروع الوحدة‬ ‫أنشئ تطبيق اختبار قصير للهاتف الذكي‪.‬‬ ‫سيحتوي االختبار على ثالثة أسئلة متعددة الخيارات تتعلق بالتقنية الرقمية‪ .‬لك?