الدرس 2: هيكلة صفحة HTML

📲 إنشاء أول تطبيق بسيط: تطبيق "مرحبًا بك"

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

📝 1. إنشاء مشروع جديد

1. من الواجهة الرئيسية، انقر على زر "Create New Project".
2. أدخل اسم المشروع: HelloApp (بدون فراغات).
3. انقر على "OK" للبدء.

🎨 2. تصميم واجهة التطبيق (Designer)

في واجهة المصمم Designer، اتبع الخطوات التالية:

• من قائمة User Interface، اسحب مكون Button وضعه في وسط الشاشة.
• غير النص المكتوب على الزر إلى: "اضغط هنا".
• من نفس القائمة، اسحب مكون Label وضعه تحت الزر.
• احذف النص الموجود داخل الـ Label (اجعله فارغاً).

🔗 3. برمجة التطبيق (Blocks)

انتقل الآن إلى واجهة Blocks لكتابة منطق التطبيق. الهدف هو أنه عند الضغط على الزر، يتم عرض عبارة "مرحبًا بك" في خانة Label.

قم بما يلي:

1. اختر الزر (Button1) من القائمة على اليسار.
2. اسحب الكتلة: when Button1.Click do
3. اختر Label1 ثم اسحب الكتلة: set Label1.Text to
4. من القائمة Text، اسحب الكتلة التي تحتوي على نص، وضع فيها: "مرحبًا بك في أول تطبيق لي!"
5. ركب الكتل معاً كما في الصورة 👇 .

📱 4. تجربة التطبيق على هاتفك

افتح تطبيق AI2 Companion على هاتفك، ثم:

• انقر على "Connect" ثم "AI Companion" من الحاسوب.
• امسح الرمز QR أو أدخل الكود الظاهر.
• اضغط على الزر في التطبيق وشاهد النتيجة!

---

🎉 تهانينا! لقد أنشأت أول تطبيق لك باستخدام MIT App Inventor. في المقالة القادمة، سنتعرف على كيفية استخدام المكونات الأساسية مثل الصور، القوائم، وشرائح النصوص.

➡️ المقالة الرابعة: استخدام المكونات الأساسية

📚 سلسلة تعلم MIT App Inventor:

• 🔹 المقالة 1: مقدمة حول MIT App Inventor
• 🔹 المقالة 2: التسجيل والدخول إلى المنصة
• 🔹 المقالة 3: إنشاء أول تطبيق بسيط
• 🔹 المقالة 4: استخدام المكونات الأساسية
• 🔹 المقالة 5: التحكم في الأحداث
• 🔹 المقالة 6: تخزين البيانات بـ TinyDB
• 🔹 المقالة 7: استخدام المستشعرات
• 🔹 المقالة 8: استخدام GPS والخريطة
• 🔹 المقالة 9: تصدير التطبيق واختباره
• 🔹 المقالة 10: مشروع تطبيقي نهائي