واجهة MIT App Inventor: بناء تطبيقات الجوال - كتاب هندسة البرمجيات - الصف 12 - الفصل 1 - المملكة العربية السعودية

الكتاب: كتاب هندسة البرمجيات - الصف 12 - الفصل 1 | المادة: هندسة البرمجيات | المرحلة: الصف 12 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

الدرس: تصميم تطبيقات الجوال باستخدام MIT App Inventor

📚 معلومات الصفحة

الكتاب: كتاب هندسة البرمجيات - الصف 12 - الفصل 1 | المادة: هندسة البرمجيات | المرحلة: الصف 12 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

نوع المحتوى: درس تعليمي

مستوى الصعوبة: مبتدئ

📝 ملخص الصفحة

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

يتم عرض مثال عملي لتطبيق 'زيارة السعودية'، حيث يتم إضافة صورة علم المملكة العربية السعودية كخلفية للشاشة، مع زر 'زيارة السعودية'. كما تُوضح كيفية إدارة خصائص الشاشة مثل إخفاء العنوان من خلال خاصية TitleVisible.

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

📄 النص الكامل للصفحة

--- SECTION: Top Navigation Bar --- Projects Connect Build Settings Help My Projects View Trash Guide Report an Issue English qkhaled.bl@gmail.com --- SECTION: App and Screen Management --- MIT APP INVENTOR Visit_SA_App Screen1 Add Screen... Remove Screen Publish to Gallery --- SECTION: Mode Selector --- Designer Blocks --- SECTION: Palette --- Palette Search Components... User Interface Button CheckBox DatePicker Image Label ListPicker Notifier PasswordTextBox Slider Spinner Switch TextBox TimePicker WebViewer Layout Media Drawing and Animation Sensors Social Storage Connectivity Lego Mindstorms Experimental Extension --- SECTION: Viewer --- Viewer Display hidden components in Viewer Phone size (505,320) Screen1 (mobile phone emulator showing an app with Saudi flag background and 'Visit Saudi Arabia' button, status bar showing 9:48 time and Wi-Fi signal) --- SECTION: Components --- Components Screen1 Visit_KSA --- SECTION: Properties --- Properties Screen1 AboutScreen AccentColor Default AlignHorizontal Center 3 AlignVertical Center 2 AppName Discover_KSA BackgroundColor Default BackgroundImage KSA_flag.jpg BigDefaultText BlocksToolkit CloseScreenAnimation Default DefaultFileScope App HighContrast Icon Name Sizing Responsive Theme Classic Title Screen1 TitleVisible TutorialURL VersionCode 1 VersionName 1.0 --- SECTION: شكل 3.8 --- شكل 3.8: إضافة صورة الخلفية --- SECTION: ملاحظة --- عند إلغاء تحديد هذه الخاصية لن يتم عرض اسم الشاشة. --- SECTION: Page Number --- 124 --- SECTION: Publisher Information --- وزارة التعليم Ministry of Education 2025 - 1447 --- VISUAL CONTEXT --- **SCREENSHOT**: MIT App Inventor Development Environment Description: A screenshot of the MIT App Inventor web interface, showing the 'Designer' view for creating a mobile application named 'Visit_SA_App'. The interface is divided into several panels: 'Palette' on the left with various UI components, 'Viewer' in the center displaying a mobile phone emulator with the app's current design, 'Components' listing the elements in the current screen, and 'Properties' on the right for configuring selected components. The mobile screen shows a green background with the Saudi Arabian flag and a button labeled 'Visit Saudi Arabia'. A dashed arrow indicates the connection between the 'TitleVisible' checkbox in the 'Properties' panel and the display of the screen title on the mobile emulator. Data: The screenshot illustrates the visual design process in MIT App Inventor, specifically how to set a background image for a screen and manage its properties. The 'Properties' panel shows various attributes for 'Screen1', including 'AppName' set to 'Discover_KSA' and 'BackgroundImage' set to 'KSA_flag.jpg'. The 'TitleVisible' checkbox is unchecked, which is explained by the Arabic note, indicating that the screen name 'Screen1' is not displayed on the mobile emulator. Key Values: App Name: Visit_SA_App, Phone size: (505,320), Component: Screen1, Component: Visit_KSA, Property: AppName: Discover_KSA, Property: BackgroundImage: KSA_flag.jpg, Property: TitleVisible: unchecked, Mobile screen time: 9:48 Context: This visual demonstrates the user interface of MIT App Inventor, a block-based programming tool for developing Android applications. It specifically highlights the process of adding and configuring visual elements like a background image and a button, and managing screen properties. The Arabic caption and note provide specific instructions related to setting the background image and controlling the visibility of the screen title.

✅ حلول أسئلة الكتاب الرسمية

عدد الأسئلة: 1

سؤال مربع-1: ملاحظة: عند إلغاء تحديد هذه الخاصية لن يتم عرض اسم الشاشة.

الإجابة: عند إلغاء تحديد هذه الخاصية لن يتم عرض اسم الشاشة.

خطوات الحل:

  1. **الشرح:** لنفهم هذا السؤال. الجملة تتحدث عن خاصية أو خيار في برنامج أو نظام ما. كلمة "خاصية" هنا تشير إلى إعداد أو خيار يمكن تفعيله أو إلغاؤه. عندما نقول "عند إلغاء تحديد هذه الخاصية"، فهذا يعني أن المستخدم قام بإزالة علامة التحديد (✓) من مربع اختيار (Checkbox) أو خيار مشابه. النتيجة المذكورة هي "لن يتم عرض اسم الشاشة". هذا يعني أن وظيفة أو نتيجة هذا الخيار هي التحكم في إظهار أو إخفاء اسم معين (ربما اسم المستخدم أو عنوان الشاشة) على الواجهة. إذن، الفكرة هنا هي فهم العلاقة السببية: إلغاء التحديد يؤدي إلى نتيجة محددة وهي الإخفاء. ولذلك الإجابة التي تلخص هذه العلاقة هي: **عند إلغاء تحديد هذه الخاصية لن يتم عرض اسم الشاشة.**

🎴 بطاقات تعليمية للمراجعة

عدد البطاقات: 6 بطاقة لهذه الصفحة

ما هي وظيفة لوحة 'الخصائص' (Properties) في بيئة تطوير MIT App Inventor؟

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

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

تلميح: فكر في القسم الذي يظهر عند تحديد مكون ما في لوحة 'المكونات' (Components).

التصنيف: تعريف | المستوى: سهل

ما هي الخاصية التي تتحكم في إظهار أو إخفاء اسم الشاشة (مثل 'Screen1') على واجهة التطبيق في MIT App Inventor؟

الإجابة: الخاصية التي تتحكم في ذلك هي 'TitleVisible'. عند إلغاء تحديدها (unchecked)، لن يتم عرض اسم الشاشة.

الشرح: تتيح خاصية 'TitleVisible' للمطور اختيار ما إذا كان يريد عرض العنوان الافتراضي للشاشة (مثل Screen1) للمستخدم النهائي أم إخفاءه للحصول على واجهة أنظف.

تلميح: ابحث عن خاصية مرتبطة بعنوان الشاشة ووظيفتها الظهور أو الاختفاء.

التصنيف: مفهوم جوهري | المستوى: سهل

كيف يمكن إضافة صورة خلفية لشاشة في تطبيق باستخدام MIT App Inventor؟

الإجابة: يتم إضافة صورة خلفية عن طريق تحديد الشاشة (مثل Screen1) في لوحة 'المكونات'، ثم الذهاب إلى لوحة 'الخصائص' وضبط قيمة الخاصية 'BackgroundImage' لتحتوي على اسم ملف الصورة المطلوب (مثل KSA_flag.jpg).

الشرح: تعد خاصية 'BackgroundImage' إحدى خصائص مكون الشاشة الرئيسية، ويتم تعيينها بمسار ملف الصورة المخزن في مشروع التطبيق.

تلميح: تذكر أن العملية تتم من خلال لوحة الخصائص بعد تحديد المكون الصحيح.

التصنيف: صيغة/خطوات | المستوى: متوسط

ما هو الغرض من لوحة 'المكونات' (Components) في واجهة MIT App Inventor؟

الإجابة: لوحة 'المكونات' تعرض قائمة هرمية بجميع العناصر (مثل الشاشات والأزرار والنصوص) التي تمت إضافتها إلى التطبيق الحالي، مما يسمح بتحديدها وإدارتها.

الشرح: تعمل هذه اللوحة كقائمة محتويات للمشروع، حيث يمكن للمطور رؤية هيكل التطبيق وتحديد أي مكون لتعديل خصائصه في اللوحة المجاورة.

تلميح: انظر إلى القسم الذي يسرد العناصر الموجودة داخل التطبيق، مثل 'Screen1' و 'Visit_KSA'.

التصنيف: تعريف | المستوى: سهل

ما الفرق بين وضعي 'المصمم' (Designer) و 'المقاطع' (Blocks) في MIT App Inventor؟

الإجابة: وضع 'المصمم' (Designer) مخصص لتصميم واجهة المستخدم وإضافة المكونات المرئية وضبط خصائصها. بينما وضع 'المقاطع' (Blocks) مخصص لبرمجة المنطق والسلوك وراء هذه المكونات باستخدام لغة برمجة مقاطع رسومية.

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

تلميح: انظر إلى أزرار التبديل في قسم 'Mode Selector' بالواجهة.

التصنيف: فرق بين مفهومين | المستوى: متوسط

ما هي الخاصية التي تحدد الاسم الذي يظهر للمستخدم عند تثبيت التطبيق على جهازه؟

الإجابة: الخاصية التي تحدد ذلك هي 'AppName'. في المثال، تم تعيينها إلى 'Discover_KSA'.

الشرح: قيمة خاصية 'AppName' هي التي سيراها المستخدم تحت أيقونة التطبيق على شاشة الهاتف الرئيسية، بينما 'Screen1' هو اسم داخلي يستخدمه المطور داخل بيئة التطوير.

تلميح: هذا الاسم مختلف عن الاسم الداخلي للشاشة (Screen1).

التصنيف: مفهوم جوهري | المستوى: سهل