في هذه المقالة نستكمل سلسلة نحو البرمجة ومع المستوى الثالث وقررت من خلاله انشاء سلسلة جديدة تابعة لسلسلة نحو البرمجة تكون بعنوان (مخترع التطبيقات APP-Inventor) لروعة الامر وحتى يسهل عليك الرجوع إليها من خلال اقسام المدونة بشكل مستقل عن سلسلة نحو البرمجة فبسم الله نبدأ:
مقدمة عن APP-Inventor
في نهاية مقالة نحو البرمجة ( 2 ) ذكرت مقدمة بسيطة عن مخترع التطبيقات يمكن الرجوع اليها واليوم بدون مقدمات نتحدث عنه في قالب مشاريع تصقل مهاراتك في صنع التطبيقات كعادة المدونة دون التطرق للمصطلحات والتعريفاتاولاً: المتطلبات
- وجود انترنت ( ضروري )
- كمبيوتر ( ضروري )
- هاتف اندوريد ومثبت عليه تطبيق MIT AI2 Companion ( ضروري )
- حساب جوجل لتسجيل الدخول الى مخترع التطبيقات
- جديد بالذكر توجد طرق للعمل على بيئة مشابهة تمام لمخترع التطبيقات دون الحاجة للانترنت ولا حساب Gmail ولكن لا افضلها في الوقت الحالي وقد نتطرق اليها بالتفصيل حسب سياق السلسلة اذا لازم الأمر.إن شاء الله.
ثانيا: مخترع التطبيقات APP-Inventor
- انقر على الرابط http://ai2.appinventor.mit.edu تظهر معك الصفحة الرئيسية وبها مجموعة من الدروس ومعلومات عن المنصة وتطبيقات الاخرين ما يفيدنا حالياً ان تنقر انشاء تطبيق 👇
- ينقلك في البداية الى تسجيل الدخول وسيتطلب منك الدخول بحساب Gmail سجل بيانات ( إذا لم يصل عمرك الى 16 عام يتطلب الأمر وجود أحد الابوين معك)
- بعد تسجيل الدخول تظهر امامك صفحة الاتفاقية انقر موافقة
- حدد عدم اظهار الرسالة التالية وانقر زر استكمال
- اغلق ايضا النافذة السابقة فكل ما سبق لاستخدامك الاول فقط بعد ذلك سيحتفظ المتصفح ببيانات الدخول مباشرة ولن تحتاج لتفيذ ما سبق لذلك من المهم اضافة الصفحة الى المفضلة الخاصة بمتصفحك كما في الصورة التالية وهى صفحة مشروعاتك - حالياً فارغة - انقر بدء مشروع جديد
المشروع الاول ( مرحبا مخترع التطبيقات )
كعادة اغلب لغات البرمجة وفي البداية يبدأ الجميع برنامج أهلا بالعالم هو برنامج يطبع جملة "أهلا بالعالم" على جهاز العرض، ويعتبر هذا النوع من البرامج تقديمًا جيدًا لبداية تعلّم أي لغة برمجة جديدة.الغرض من المشروع
- انشاء البرنامج الاول لك
- التعرف على واجهة منصة مخترع التطبيقات
- التعرف على الادوات المستخدمة في تصميم التطبيق
- تجربة التطبيق على هاتفك
- تحميل التطبيق الى الهاتف او جهاز الكمبيوتر
- تصدير المشروع aia
- اضافة المشروع الى القوالب المتوفرة ليتعمل منه الآخرون
- اذهب الى الرابط http://ai2.appinventor.mit.edu/ او استدعيها من المفضلة ( يفترض انك اضفتها فيما سبق)
- اغلق نافذة ( ابدأ مع بعض البرامج التعليمية -- GET STARTED WITH SOME TUTORIALS)
- انقر من يمين الشاشة زر بدء مشروع جديد start new project
- يظهر معك مربع حواري لكتابة اسم لمشروع الاول ويشترط ان يبدا بحروف انجليزية فقط ولا يحتوي رموز او مسافة او حروف عربية
- حدد الاسم Hello ثم اختر موافق ok
مرحلة التصميم
ستظهر معك واجهة تصميم التطبيق كالآتي:
1) مايمكن اعتباره شريط القوائم ومن أهم ما به :
- Projects هذه القائمة بها مشاريعك كلها ومنها تستطيع تصديرها او استيراد مشاريع اخرى.
- Connect منها تستيطع الاتصال بهاتف لعرض التطبيق او الاتصال بالمحاكي
- Build منها تستطيع بناء البرنامج بامتداد APK صالح للتثبيت على هواتف اللاندوريد او الامتداد الاحدث جوجل aab
- Screen1 الاختيار بين شاشات التطبيق التي تدرجها والافتراضي انها شاشة واحدة
- add Screen1 اضافة شاشة الى التطبيق
- Remove Screen ازالة احدى الشاشات
- Publish to Gallery نشر تطبيقك داخل مجتمع MIT الخاص بمخترع التطبيقات
- Designer شاشة التصميم وهى التي تظهر كما في الصورة السابقة
- Blocks الاوامر وتتشابه مع سكريتش من حيث تجميع لبنات الاومر في نسق معين وسنتعرف عليها بعد قليل
- تحتوي جميل ادوات البرمجة او الكائنات المستخدمة مثل الازرار وصندوق النص وملصق النص الخ ... يكفيك سحب الكائن وافلاته على واجهة العرض .
- هى الوجهة التي توضع عليها الادوات وتشبه الموبيل بحيث تستطيع معاينة موضع الادوات.
- كل الادوات التي تم وضعها على الواجهة تظهر هنا حتى تستطيع تعديل خصائصها0
- تظهر هنا خصائص كل اداة او عنصر يتم تحديدها في الخطوة 5 .
- جميع الوسائط المتعددة التي يتم دمجها داخل تطبيقك من صور او فيديوهات او ملفات صوتية اضغط upload وحمل الوسائط التي ترغب فيها.
- نسحب من اللوحة Palette الاداة label ونضعها داخل صورة الهاتف (واجهة التصميم 4) امامك وكذلك Button
- حدد من نافذة العناصر رقم 5 في الصورة Screen1 واتجه الى صندوق الخصائص 6 وعدل الخاصية AlignHorizontal الى center
- حدد button من نفس النافذة 5 ثم منالنافذة 6 في الاسفل داخل خاصية Text اكتب ( انقر هنا )
- يصبح معك التصميم كالآتي:
- لايوجد ما يمنع ان تغير اي خصائص اخرى كحجم ونوع الخط جرب وضع بصمتك
مرحلة الاكواد
ستظهر معك واجهة تصميم التطبيق كالآتي:
هل لاحظت شيء 👀 اذا كنت تتابع السلسلة من البداية ستجد فعلا ان الامر يشبه لبنات سكراتش الى حد ما وفيها :
- Blocks جميع اللبنات المستخدمة في البرمجة
- Viewer المنطقة التى ستضع عليها لبناتك او المقاطع البرمجية
- حدد من جزء Blocks الزر button1 ستظهر لك المقاطع البرمجية له اسحب مقطع "لبنة" when button1 click .
- حدد من جزء Blocks الزر label1 ستظهر لك المقاطع البرمجية له اسحب مقطع "لبنة" set label1.text to ضعها داخل اللبنة السابقة.
- حدد من جزء Blocks الجزء text منه اسحب لبنة نص فارغ ستجدها اول لبنة وقم بتوصيلها مع اللبنة السابقة بعد to واكتب بداخلها أهلا بالعالم.
- ستصبح المقاطع البرمجية معك كالآتي:
معاينة التطبيق وتحميله
- لمعاينة التطبيق اختر من قائمة connect الامر AI Companion سيظهر امامك باركود
- افتح تطبيق MIT AI2 Companion على هاتف ( من المفترض انك قمت بتحميله قبل قليل )
- انقر scan QR code ثم وجه الكاميرا الى الكود ( لابد ان يستخدم الهاتف والجهاز شبكة واي فاي واحدة )
- لتحميل التطبيق من قائمة Build اختر الأمر Android App (.apk) لتظهر امامك ايضا شاشة بها QR قم بمسحه باي برنامج على هاتفك او من خلال التطبيق السابق او انقر زر Download apk now لتحميله على جهاز الكمبيوتر ومن ثم انقله بطريقتك الى الهاتف .
- عند تثبيت التطبيق على الهاتف تظهر لك رسائل تحذيرية لان التطبيق من خارج المتجر وافق ولا تقلق من شيء إن شاء الله.
*** اليك هذا الفيديو للمساعدة في اعداد التطبيق
والى مشاريع اخرى دمتم بخير