تطبيقات الهواتف الذكية
يريد سائح أن يتعرّف على أهم الآثار في المدن الفلسطينية، لكن الوصول إلى كثير منها صعب بسبب الاحتلال. ماذا لو استطعت تصميم تطبيق هاتف ذكي بنفسك، بلا كتابة سطر برمجي واحد، يعرض خارطة فلسطين وعليها نقاط لكل مدينة، وعند لمس أي نقطة تظهر صورة موقعها الأثري؟ هذا تمامًا ما توفره منصة MIT App Inventor 2 المفتوحة المصدر: تصميم تطبيقات حقيقية بالسحب والإفلات فقط. كيف تعمل واجهتا التصميم والبرمجة معًا لتحويل فكرتك إلى تطبيق يعمل فعليًّا على هاتفك؟
أسئلة نفكر بها قبل أن نبدأ
- ما الفرق بين واجهة التصميم (Designer) وواجهة البرمجة (Blocks) في MIT App Inventor 2؟
- كيف تُبنى الأدوات (Components) على الشاشة، وكيف تُربَط بها كتل برمجية منطقية (Blocks) لتحدد سلوكها؟
- ما الطرق الثلاث لمعاينة التطبيق أثناء تطويره، وما الفرق بين ملفي .aia و .apk؟
- كيف يمكن الاستفادة من القوالب الجاهزة والمشاريع مفتوحة المصدر بدل البرمجة من الصفر؟
استراتيجية التعلّم لهذا الدرس
درس تطبيقي-عملي بالكامل يقدّم برنامج MIT App Inventor 2 عبر محاكاة "مصمّم تطبيق" بمرحلتين (تصميم بالسحب والإفلات، ثم برمجة باختيار الكتلة الصحيحة) تكرر نشاط خارطة المدن/الجهاز الهضمي من الكتاب تمامًا، مع أنشطة مختبرية متتابعة تبني تطبيقًا حقيقيًّا تدريجيًّا ولعبة تصنيف لعناصر الواجهتين.
بما أن الكتاب يقدّم نشاط "خارطة المدن الفلسطينية" بتفصيل خطوة بخطوة (وضع Canvas، إضافة ImageSprite للنقاط والصور، ربط أحداث Touched بضبط خاصية Visible)، صُمّمت محاكاة "مصمّم تطبيق الجسم البشري" لتكرار المنطق نفسه بالضبط على سياق مختلف (أعضاء الجسم بدل المدن)، بمرحلتي تصميم وبرمجة متتاليتين، تنتهيان بتشغيل فعلي يُظهر نتيجة عمل الطالب، تمامًا كما يعمل التطبيق الحقيقي في المختبر.
شرح الدرس — عرض تقديمي تفاعلي
مصطلحات ومفاهيم الدرس
- App Inventor
- برنامج تطوير تطبيقات مفتوح المصدر من MIT، يعتمد السحب والإفلات وتركيب اللبنات المنطقية دون كتابة كود برمجي نصي.
- واجهة التصميم (Designer)
- الواجهة المستخدمة لبناء الشكل العام للتطبيق بالسحب والإفلات، وتضم لوحة الأدوات ومنطقة العرض وشجرة المكونات ولوحة الخصائص.
- واجهة اللبنات (Blocks)
- الواجهة المستخدمة لبرمجة منطق التطبيق عبر تجميع لبنات (قطع) منطقية وربطها ببعضها، بدل كتابة أكواد نصية.
- ImageSprite
- أداة تمثل عنصرًا (صورة) يمكن التفاعل معه والتحكم بموقعه وحركته فوق أداة الرسم (Canvas)، وتستخدم للنقاط التفاعلية والصور المتحركة.
- ملف .apk
- صيغة ملف التطبيق النهائي الجاهز للتثبيت على أي جهاز أندرويد مباشرة، بخلاف ملف .aia القابل للتعديل داخل App Inventor.
المحاكاة التفاعلية
الأنشطة
الألعاب التعليمية
الاختبارات — أسئلة الدرس
- ما الفرق بين واجهة التصميم وواجهة اللبنات في App Inventor؟واجهة التصميم (Designer) تُستخدم لبناء الشكل العام للتطبيق بالسحب والإفلات (الأزرار، الصور، النصوص)، بينما واجهة اللبنات (Blocks) تُستخدم لبرمجة منطق التطبيق (ماذا يحدث عند كل حدث) عبر تجميع لبنات منطقية دون كتابة كود نصي.
- اذكر ثلاثة مكونات من واجهة التصميم ووظيفة كل منها.لوحة الأدوات (Palette): تضم قائمة الأدوات المتاحة للتصميم. منطقة العرض (Viewer): تعرض شكل التطبيق أثناء بنائه. لوحة الخصائص (Properties): تتحكم بخصائص الأداة المحددة كالطول والعرض والألوان.
- ما الطرق الثلاث لمعاينة تطبيق App Inventor؟المعاينة المباشرة على هاتف أندرويد حقيقي متصل بالإنترنت عبر تطبيق Companion ومسح رمز QR، أو الوصل بالحاسوب عبر وصلة USB، أو استخدام محاكي (هاتف افتراضي) على الحاسوب نفسه.
- ما الفرق بين ملف .aia وملف .apk؟.aia هو صيغة ملف المشروع القابل للتعديل والاستيراد داخل App Inventor نفسه، بينما .apk هو ملف التطبيق النهائي الجاهز للتثبيت على أي جهاز أندرويد مباشرة، دون إمكانية العودة لتعديل شيفرته المصدرية.
الإثراء
- ابحث عن أدوات أخرى في لوحة App Inventor (كأداة WebViewer وأداة Sound) ووظيفة كل منها، ثم صمّم فكرة تطبيق يستخدم واحدة منها.
- ابحث عن الفرق بين برنامج App Inventor وبرنامج Scratch من حيث الجهاز المستهدف (حاسوب أم هاتف أندرويد) ولغة البرمجة المستخدمة داخليًّا.
- ابحث عن كيفية إضافة قاعدة بيانات محلية (TinyDB) لتطبيق App Inventor لحفظ بيانات المستخدم بين مرات تشغيل التطبيق.
أوراق العمل
ورقة عمل مُشتقّة تلقائيًا من أنشطة وأسئلة هذا الدرس، جاهزة للتنزيل أو الطباعة مباشرة.
أولًا: الأنشطة
- تطبيق خارطة المدن الفلسطينية: صمّم تطبيقًا تعريفيًّا بالمدن الفلسطينية بحيث تكون شاشة التطبيق خارطة فلسطين، وعليها نقاط تمثل مواقع المدن، وعند لمس النقطة تظهر صورة الموقع الأثري في المدينة، وعند الضغط عليها ثانية تختفي الصورة.
- تطبيق أجزاء الجهاز الهضمي: استخدم الفكرة نفسها من نشاط خارطة المدن في عمل تطبيق حول أجزاء الجهاز الهضمي في الإنسان، بحيث يظهر اسم الجزء وعبارة تعريفية به عند لمسه، مستخدمًا أداة اللافتة (Label) لعرض النص.
- تطوير شاشة افتتاحية متحركة: صمّم شاشة افتتاحية لأي تطبيق من اختيارك، تحتوي مجموعة صور تتحرك باتجاهات عشوائية باستخدام أداتي Clock وImageSprite، وعند الضغط على الشاشة تتوقف الحركة وينتقل التطبيق إلى شاشة ثانية.
- نشاط*: تطوير تطبيق اهتزاز الهاتف الذكي ليتحدث: أدخل تطويرات على تطبيق "تحدث مع هاتفك الذكي" من خلال إضافة أداة استشعار الاهتزاز، بحيث تُستخدَم ليتحدث الهاتف كلما اهتز، مع العلم أن هذه الأداة مخفية ولا تظهر على شاشة الهاتف.
- بحث: القوالب الجاهزة في App Inventor: ابحث عن تطبيق لعبة جاهز في مستودع App Inventor، واستوردْه إلى حسابك (Import project)، ثم تبادل ملفات .aia مع زملائك، وابحث في برمجته عن أفكار جديدة مفيدة.
- للنقاش: الفرق بين .aia و .apk: ما الأمر الذي يساعدك على إرسال ملف .apk من حسابك على App Inventor إلى صديقك؟ وما الفرق بين امتدادي .aia و .apk من حيث إمكانية التعديل؟
ثانيًا: أسئلة الدرس
- ما الفرق بين واجهة التصميم وواجهة اللبنات في App Inventor؟
- اذكر ثلاثة مكونات من واجهة التصميم ووظيفة كل منها.
- ما الطرق الثلاث لمعاينة تطبيق App Inventor؟
- ما الفرق بين ملف .aia وملف .apk؟
دليل المعلم
الأهداف التعليمية
- أن يميّز الطالب بين واجهتي التصميم واللبنات في App Inventor ووظيفة كل منها.
- أن يصمّم الطالب واجهة تطبيق بسيطة ويبرمج منطقها الأساسي عبر السحب والإفلات.
- أن يميّز الطالب بين صيغتي الملفين .aia و .apk وطرق معاينة التطبيق الثلاث.
الخطة الزمنية
الحصة الأولى: تعريف البرنامج وواجهة التصميم. الحصة الثانية والثالثة: واجهة اللبنات + المحاكاة (نشاط خارطة المدن/الجهاز الهضمي) في المختبر. الحصة الرابعة والخامسة: أدوات الحركة والشاشة الافتتاحية في المختبر. الحصة السادسة: المعاينة والحفظ والتصدير + اللعبة وأسئلة الدرس.
استراتيجيات التدريس المقترحة
- اعتماد نشاط تطبيق خارطة المدن الفلسطينية (أو الجهاز الهضمي) كمثال سردي واحد يمر عبر مرحلتي التصميم والبرمجة معًا.
- استخدام محاكاة "مصمّم تطبيق الجسم البشري" لتكرار نشاط الكتاب بمرحلتيه (تصميم ثم برمجة) قبل الانتقال إلى المختبر الحقيقي.
- تخصيص حصص كافية للعمل العملي المباشر في مختبر الحاسوب على برنامج App Inventor الحقيقي، فالمهارة هنا عملية بالأساس.
الأخطاء الشائعة لدى الطلبة
- الخلط بين خاصية "ظاهر" (Visible) للأداة وحذفها فعليًّا من التطبيق.
- محاولة كتابة نص برمجي بدل استخدام اللبنات، أو الخلط بين مواضع اللبنات المتوافقة (كوضع لبنة رقمية داخل فتحة نصية).
نصائح التقييم
- اطلب من الطالب تصميم وبرمجة تطبيق جديد بسيط (غير مذكور في الدرس) باستخدام أداتين أو أكثر من App Inventor.
- استخدم محاكاة مصمّم التطبيق كتقييم تكويني سريع يجمع بين مهارتي التصميم والبرمجة قبل الانتقال إلى مشروع المختبر الحقيقي.
تحليل الذكاء الاصطناعي للدرس
الفكرة العامة
تطوير تطبيقات الهاتف الذكي لا يتطلب بالضرورة كتابة كود برمجي، بل يمكن تحقيقه عبر تركيب لبنات منطقية بصرية (Blocks) مرتبطة بعناصر تصميم مرئية (Designer)، وهذا ما يجعل مهارة البرمجة المنطقية في متناول أي طالب دون خبرة مسبقة في لغات البرمجة النصية.
المفاهيم الأساسية
- الفرق بين واجهة التصميم وواجهة اللبنات
- ربط عناصر التصميم بالمنطق البرمجي عبر الأحداث (When) والخصائص (set)
- معاينة وتصدير التطبيق النهائي
المفاهيم الفرعية
- أدوات الحركة (Clock, ImageSprite) والانتقال بين الشاشات
- الفرق بين ملفي .aia و .apk
- الاستفادة من القوالب والمشاريع مفتوحة المصدر الجاهزة
الكلمات المفتاحية
المصطلحات
- الحدث (Event): لحظة معينة تُنفَّذ فيها مجموعة من الأوامر البرمجية، مثل "متى تم لمس الأداة" (When...Touched) أو "متى بدأ تشغيل الشاشة" (When Screen.Initialize).
- المحاكي (Emulator): هاتف أندرويد افتراضي يعمل داخل نافذة على جهاز الحاسوب، يُستخدَم لمعاينة التطبيق دون الحاجة لجهاز أندرويد حقيقي.
المهارات المستهدفة
- بناء واجهة تطبيق بالسحب والإفلات باستخدام أدوات التصميم المناسبة
- ربط الأحداث بالخصائص عبر لبنات منطقية لتحقيق سلوك تفاعلي محدد
- تصدير التطبيق ومعاينته على جهاز حقيقي أو محاكي
الأهداف
- تصميم واجهة تطبيق هاتف ذكي باستخدام أدوات App Inventor
- برمجة منطق تفاعلي بسيط للتطبيق عبر واجهة اللبنات
نواتج التعلّم
- يصمّم الطالب واجهة تطبيق بسيطة تحتوي عناصر تفاعلية (صور، لافتات، أزرار) باستخدام واجهة التصميم.
- يبرمج الطالب سلوكًا تفاعليًّا محددًا (كإظهار/إخفاء عنصر عند النقر) باستخدام واجهة اللبنات.
- يميّز الطالب بين ملفي .aia و .apk ويستخدم الطريقة المناسبة لمعاينة تطبيقه.
المتطلبات السابقة
- فهم أساسي لمفهوم الخوارزمية والتسلسل المنطقي من الصفوف السابقة (كبرنامج سكراتش).
أكثر الأخطاء الشائعة
- الخلط بين خاصية Visible وحذف الأداة فعليًّا
- محاولة التفكير بمنطق الكود النصي بدل منطق اللبنات البصرية
احتياجات الدرس من مكوّنات
مستوى بلوم
التطبيق والإنشاء، عبر تصميم وبرمجة تطبيق هاتف ذكي فعلي يعمل من الصفر.
نوع الدرس
تطبيقي-عملي بالكامل، يعتمد على العمل المباشر في مختبر الحاسوب على برنامج App Inventor الحقيقي.
الفئة العمرية
الصف الحادي عشر — فرعا العلمي والصناعي
أفضل طريقة شرح حسب الفئة العمرية
الفئة العمرية (16-17 سنة) تستوعب منطق البرمجة المرئية بعمق أكبر حين تُكرِّر نشاطًا حقيقيًّا من الكتاب (خارطة المدن أو الجهاز الهضمي) بمرحلتين واضحتين: تصميم بالسحب والإفلات، ثم برمجة باختيار الكتلة الصحيحة من بين خيارات مقترحة قريبة الشبه، بحيث يرى نتيجة تطبيقه الفعلية تعمل فورًا، بدل تعريف "اللبنات المنطقية" كمفهوم مجرد.