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

أصبحت تطبيقات الهواتف المحمولة التي نستعملها كل يوم تؤثر في حياتنا، وتزداد أهميتها مع اتساع المجالات الحياتية والأفكار الجديدة في تلك التطبيقات التي لم يعد برمجتها وإطلاقها مقتصراً على شركات البرمجة الكبيرة؛ إنما أصبح المبرمجون الأفراد قادرين على تصميم، وبرمجة ونشر تطبيقاتهم على المنصات والمتاجر المختلفة، وليس غريباً أن نعلم أن مئات الآلاف من التطبيقات اليوم أطلقها مبرمجون شباب وهواة باستعمال أدوات تصميم وتطوير مفتوحة المصدر لا تعتمد على كتابة لغات البرمجة جعلت من تطوير التطبيقات الذكية أمراً بالغ السهولة.

ولكن كيف جعلت هذه التطبيقات من الهواتف المحمولة أدوات ذكية تؤثر في حياتنا؟

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

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

هل تعلم:

طورت جامعة ⁦MIT⁩ الأمريكية برنامج سكراتش ⁦Scratch⁩ كلغة مفتوحة المصدر؛ إذ يمكن بناء برامج أخرى عليها، وتتوفر بدعم تام للغة العربية، بينما تم تطوير ⁦App Inventor⁩ من قبل شركة جوجل ومن ثم تحول إلى ⁦MIT⁩ وما زال الدعم مقتصراً على اللغة الإنجليزية. يوفر موقعاً سكراتش و⁦App Inventor⁩ الفرصة لمستخدميهما لمشاركة إبداعاتهم وأفكارهم وتبادل الآراء والتعاون في إنتاج المشاريع والحصول على التغذية الراجعة.

يمكنك بدء استعمال ⁦App inventor⁩ مباشرة على موقع البرنامج دون الحاجة لتنصيبه من خلال متصفح الإنترنت، ولكن ذلك يتطلب اتصالك بالإنترنت طوال فترة عملك، ويمكن التسجيل والبدء باستعمال الرابط التالي:

يفضل تنصيب البرنامج والعمل عليه دون الحاجة للاتصال بالإنترنت، ويتم ذلك بتحميل البرنامج من الموقع الرسمي حسب نظام التشغيل الخاص بحاسوبك من خلال تنزيل البرنامج من الرابط التالي: ⁦http⁩://⁦appinv.us/aisetup_windows⁩ ثم تنصيبه على جهاز الحاسوب الخاص بك كأي برنامج آخر.

مساعدة: قبل البدء باستعمال البرنامج تأكد أن جهازك مجهز ببيئة جافا ⁦java⁩؛ لكي يعمل بالشكل المطلوب.

1. يحتوي برنامج ⁦App inventor⁩ على واجهتين ستحتاج استعمالهما أثناء عملك عليه لتطوير تطبيقاتك: الواجهة الأولى وتعرف باسم واجهة التصميم ⁦Designer⁩ وستستعمل بناء الشكل العام لبرنامجك بحيث تتيح لك استعمال خاصية السحب والإفلات للبناء الشكل العام لتطبيقك.
2. أما الواجهة الثانية فهي واجهة اللبنات ⁦Blocks⁩ والتي ستستعملها لبرمجة تطبيقك من خلال تجميع اللبنات الخاصة ببرنامجك، وربطها مع بعضها حسب المنطق الخاص بتطبيقك.

تتكون من قائمة الأدوات التي تستخدم في تصميم التطبيق، مثل الأزرار والقوائم وأدوات الرسم والتصوير، بالإضافة للمجموعة من الأدوات المتقدمة كالحساسات والفيديو والربط مع مواقع التواصل الاجتماعي وغير ذلك من الأدوات التي تستخدم عن طريق السحب والإفلات على الشاشة، ويمكن التحكم بخصائص كل أداة من خلال ⁦Properties⁩.

واجهة التصميم ⁦Designer⁩ في برنامج ⁦App Inventor⁩.

من أهم مميزات برنامج ⁦App inventor⁩ أنه لا يحتاج إلى كتابة أكواد برمجية؛ لأنه يعتمد على تركيب قطع أو اللبنات "⁦Blocks⁩" لإعطاء أوامر البرمجة لكل جزء من التطبيق وتقسم هذه القطع بشكل عام لأوامر التحكم أو المنطق أو عمليات حسابية، كما ويمكن تطوير لبنات خاصة بك بشكل متقدم لاحقاً لأداء وظائف خاصة بك.

واجهة البرمجة ⁦Blocks⁩ في برنامج ⁦App Inventor⁩.

ستتعرف على وظائف الأجزاء البرمجية من خلال أنشطة عملية في هذا الدرس ولمعرفة تفاصيل كل جزء برمجي بتفصيل أكثر فإن موقع البرنامج يوفر شرحاً كاملاً لكل جزء وكيفية التعامل معه على الرابط الآتي: ⁦http⁩://⁦appinventor.mit.edu/explore/ai2/support/blocks.html⁩

نشاط (1): المدن الفلسطينية وأهم الآثار فيها

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

خطوات العمل:

(ثلاث صور للمدن، وصورة خارطة فلسطين).

2. تصميم نافذة التطبيق:

• أداة ⁦Canvas⁩، لوحة رسم من المجموعة ⁦Drawing and Animation⁩، وتغيير خاصية ⁦width Height⁩ لتكون ملء الشاشة.
• الأداة ⁦ball⁩ من المجموعة نفسها التي تمثل النقطة السوداء الدالة على المدينة الفلسطينية وبعدد المدن المراد التعريف بها (على الأقل ثلاث).

  ضبط الخاصية نصف قطر النقطة ⁦Radius⁩، لتكون (الرقم 5) كما في الشكل.

• الأداة ⁦image Sprite⁩ تكرر بعدد القرى وعدد النقاط السابقة، ضبط الخاصية ⁦picture⁩ كما في الشكل، وتحميل صورة لكل منها، وإحدى هذه الصور تكون الخارطة والصور الأخرى للمدن.

عند بدء تشغيل التطبيق تكون شاشة التطبيق فقط تحمل الخارطة والنقاط:

برمجة الحدث عند بدء الشاشة. اللبنات البرمجية لإخفاء صور المدن الفلسطينية.

وعند النقر على النقطة السوداء التي تمثل المدينة، يتم إظهار الصورة الخاصة بها:

وعند النقر على صورة المدينة يتم إخفاؤها:

حيث تمثل ⁦(Nablus)⁩ اسم النقطة السوداء الخاصة بمدينة نابلس.

فكّر:

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

ملاحظة: يمكن إضافة أو إظهار لافتة توضيحية باستخدام الأداة ⁦Noti Fier⁩ من مجموعة واجهة المستخدم ⁦User Inter face⁩.

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

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

تحضير خمس صور لـ (سمكة، طائر، بالون، سيارة، طفل كرتون)

• ⁦Canvas⁩ من مجموعة ⁦Drawing and animation⁩ ضبط خاصية الطول ⁦Height⁩: ⁦fill Parent⁩، وخاصية العرض ⁦Width⁩: ⁦fill Parent⁩ لتملأ الشاشة.
• أداة ⁦imageSprite (⁩العدد 5) ضبط خاصية ⁦Speed⁩ بالقيمة 2، وخاصية ⁦picture⁩، وتعيين صورة لكل ⁦imagesprite⁩.
• أداة ⁦clock⁩ من مجموعة ⁦sensors⁩، وضبط الخصائص كما في الشكل المجاور.

• إضافة شاشة ثانية للنافذة الرئيسية باستخدام الزر ⁦add screen⁩، للتنقل في وضع التصميم بين الشاشات من قائمة الشاشات إلى اليسار. ويمكن حذف أي شاشة بتحديدها والضغط على الزر ⁦remove screen⁩.

3. تجميع اللبنات البرمجية:

• تغيير اتجاه حركة الصورة بزاوية عشوائية من 1 إلى 90.

• تغيير سرعة حركة الصورة:

• تغيير طول الصورة:

• تغيير عرض الصورة:

• تغيير الإحداثي السيني للصورة:

• سحب الحدث ⁦clock.timer⁩، والخاص بالأداة ⁦Clock⁩، ووضع اللبنات البرمجية لصورة واحدة فيه، ليتم تنفيذها كلما مرّ زمن الفترة المحدد، كما يأتي:

• الحدث ⁦clock1.Timer⁩: يعمل على تكرار تنفيذ الجمل البرمجية كل فترة زمنية، تساوي قيمة الخاصية ⁦TimeInterval⁩ التي تم تعيينها 1000 ميلي ثانية.
• اللبنة البرمجية ⁦imageSprite1.Heading⁩ تستخدم لتعيين اتجاه الحركة.
• اللبنة البرمجية ⁦imageSprite1.Speed⁩ لتحديد سرعة الحركة.
• الأمر ⁦random integer from⁩ من المجموعة ⁦Math⁩ يستخدم لتوليد رقم عشوائي بين رقمين.
• إكمال اللبنات البرمجية لباقي الصور كما في الصورة الأولى، وجميعها في داخل الحدث نفسه.
• لوقف الحركات (جعل المؤقت غير ممكن) عند الضغط على الشاشة باستخدام الحدث ⁦Canvas.touchUp⁩، أي عند لمس الشاشة يتم تجميد جميع الحركات.

• استخدام جملة الانتقال إلى الشاشة الثانية:

• يصبح الكود البرمجي بالشكل الآتي:

يمكن معاينة التطبيق بثلاث طرق:

الطريقة الأولى: المعاينة على جهاز الأندرويد مباشرة إذا كان لديك جهاز يعمل بنظام أندرويد ومتصل بالإنترنت قم بتثبيت تطبيق ⁦MIT A12 Companion⁩ على الهاتف الأندرويد من خلال البحث عنه على متجر ⁦Play Store⁩ الخاص بتطبيقات الهواتف الذكية التي تعمل بنظام أندرويد. لابد أن يكون هناك اتصال بالإنترنت لكل من الحاسوب والهاتف افتح قائمة ⁦Connect⁩ بالبرنامج، ثم اختر ⁦Al companion⁩، ثم عن طريق كاميرا الهاتف قم بعمل ⁦Scan QR code⁩ كما هو موضح في الشكل ثم ⁦Connect with code⁩ حتى يعمل التطبيق على الهاتف.

الطريقة الثانية: وهي مناسبة لمستخدمي برنامج ⁦App inventor⁩ في حالة عدم توفر اتصال بالإنترنت على جهاز المحمول من خلال شبكة ⁦Wifi⁩ بحيث يمكن معاينة التطبيق على هاتف الأندرويد من خلال وصل الحاسوب بجهاز المحمول من خلال وصلة ⁦USB⁩، في نفس الواجهة الموضحة في الشكل أعلاه افتح قائمة ⁦Connect⁩ بالبرنامج، ثم اختر ⁦USB⁩.

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

بعد الانتهاء من عمل التطبيق نقوم بحفظه وتحميله جاهزاً للاستخدام بالخطوات التالية:

• من قائمة المشروع ⁦Project⁩ قم باختيار حفظ التطبيق ⁦Save Project⁩.
• من قائمة ⁦Build⁩ قم باختيار ⁦Save .apk to my computer⁩ كما هو موضح في الشكل.

اختر المكان الذي تريد حفظ البرنامج فيه على حاسوبك واختر اسماً مناسباً له. ستجد الملف في المكان الذي اخترته بصيغة ⁦Apk⁩. يمكنك نقله إلى هاتفك المحمول أو هاتف صديقك وتجربة التطبيق.

بحث: ابحث من خلال شبكة الإنترنت عن ميزات صيغة ⁦APK⁩ للملفات الخاصة بتطبيقات أجهزة المحمول العاملة بنظام أندرويد وناقشها مع زملائك.

نشاط 3: تطوير تطبيق (اهتزاز الهاتف الذكي ليتحدث) قم بإدخال تطويرات على تطبيق (تحدث مع هاتفك الذكي) الذي قمت بتطويره في النشاط السابق من خلال إضافة الأداة ⁦Accelerometer Sensor⁩، حيث سيتم استخدامها ليتحدث كلما اهتز الهاتف الذكي، مع العلم أنَّ هذه الأداة مخفية، ولا تظهر على شاشة الهاتف.

من أهم مزايا البرامج والمنصات مفتوحة المصدر هو توفير عدد كبير من البرامج والتطبيقات الجاهزة التي قام مستخدمون آخرون بتطويرها بحيث يمكن الاستعانة بها مجاناً واستعمالها والتطوير عليها بدلاً من برمجتها مجدداً. الشكل أدناه يوضح كيفية استيراد القوالب الجاهزة من خلال الضغط على ⁦Project⁩، ثم اختيار ⁦Import Project⁩.

بالإمكان الحصول على مجموعة كبيرة من المشاريع الجاهزة، والتعديل عليها من ⁦Gallery⁩ الموجودة في ⁦App Inventor⁩ انظر الى الشكل، وجرب البحث عن مشروع للرسم. وتستطيع الحصول على أي تطبيق للتعديل عليه من شبكة الانترنت شرط أن يكون امتداده ⁦aia⁩، وعند الحصول عليه تستطيع اضافته الى حسابك عن طريق الأمر ⁦Import project (.aia) from my computer⁩ من قائمة ⁦Projects⁩.

نشاط 4: ابحث عن تطبيق لعبة، ثم تبادل ملفات ⁦aia⁩ مع زملاءك، وابحث في البرمجة عن أفكار جديدة مفيدة.

• ما الأمر الذي يساعدك على ارسال ملف ⁦aia⁩ من حسابك على ⁦App Inventor⁩؟
• ما الفرق بين الامتدادين ⁦apk⁩ و ⁦aia⁩.

1. وحدة قياس سرعة المعالج:

• أ. البايت
• ب. الهيرتز
• ج. الميجابايت
• د. 23 بت

2. ⁦core i7⁩ يعتبر:

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

3. أب ستور ⁦App Store⁩:

• أ. متجر جوجل
• ب. متجر أبل
• ج. هاتف ذكي
• د. معالج ذكي

4. نظام مفتوح المصدر:

• أ. IOS
• ب. Android
• ج. ويندوز
• د. ويندوز 10

5. ⁦imageSprite3⁩ عبارة عن صورة تدرج في:

• أ. Screen
• ب. Canvas
• ج. Lablel
• د. Button

6. من خصائص الكائن ⁦Clock1⁩:

• أ. text
• ب. TimerInterval
• ج. Speed
• د. Radius

س2-

• أ. ما وظيفة الامر ⁦gaidxd⁩؟
• ب. قارن بين الواقع الافتراضي والواقع المعزز؟
• ج. ما وظيفة اللبنات البرمجية التالية:
• د. ما الفرق بين الحدثين

• أ. يحتوي صورة خصائص أداة ⁦imageSprite⁩ وعند الضغط على الخاصية يعطي وظيفتها.
• ب. يعمل على اظهار عددين عشوائيين محصورين بين 1 و 10 يظهران في مربعات تسمية ويتغيران كل ثانية زمنية.
• ج. يعمل كعداد للزمن بالثواني بحيث يتغير كل ثانية.
• د. يعمل على اظهار صورة تتحرك عشوائياً لمدة 5 ثواني ثم تختفي.