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

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

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

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

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

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

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

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

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

📝 ملخص الصفحة

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

يتضمن المحتوى شرحاً لمكونات التطبيق مثل AlMasmak وdescription_label، وكيفية تعيين خصائصها مثل الارتفاع والنص ولون النص باستخدام كتل برمجية مرئية. كما يوضح كيفية التعامل مع أحداث التهيئة (Initialize) لتنفيذ منطق شرطي بناءً على قيمة بداية (start value).

يتم عرض أمثلة عملية على استخدام الكتل البرمجية لتنفيذ الترجمة (Localization) بين اللغتين الإنجليزية والعربية، مما يساعد الطلاب على فهم أساسيات البرمجة المرئية وتطوير تطبيقات متعددة اللغات. يشمل ذلك استخدام المتغيرات العامة (global variables) لتخزين النصوص بلغات مختلفة.

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

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

--- SECTION: Application Header Bar --- MIT APP INVENTOR Projects Connect Build Settings Help --- SECTION: Project Navigation Bar --- Visit_SA_App AlMasmak Add Screen Remove Screen Publish to Gallery --- SECTION: Blocks Panel Header --- Blocks --- SECTION: Blocks Categories --- Math Text Lists Dictionaries Colors Variables Procedures --- SECTION: AlMasmak App Components --- AlMasmak discover_label VerticalArrangement1 title_label image description_label map_button Map1 --- SECTION: Generic Component Block --- Any component --- SECTION: Viewer Panel Header --- Viewer --- SECTION: UI Property Setting Blocks --- set description_label . Height set description_label . Height to set description_label . HeightPercent to description_label . Text set description_label . Text to description_label . TextColor set description_label . TextColor to --- SECTION: AlMasmak Initialization Logic --- when AlMasmak .Initialize do if get start value = "en" then set title_label . Text to get global title_en set description_label . Text to get global description_en else if get start value = "ar" then set title_label . Text to get global title_ar set description_label . Text to get global description_ar --- SECTION: Page Footer --- وزارة التعليم Ministry of Education 173 2025 - 1447 --- VISUAL CONTEXT --- **DIAGRAM**: MIT App Inventor Blocks Editor Screenshot Description: A screenshot of the MIT App Inventor development environment, specifically the Blocks editor. The interface is divided into a left panel listing block categories and app components, and a main canvas on the right where programming blocks are assembled. The top section of the main canvas shows blocks for setting properties of a 'description_label' component (Height, HeightPercent, Text, TextColor). The bottom section displays a 'when AlMasmak .Initialize' event block containing conditional logic (if/else if) to set 'title_label' and 'description_label' text based on a 'start value' being 'en' (English) or 'ar' (Arabic), using global variables for titles and descriptions. A blue circle with the number '9' and a dashed arrow points from the 'set description_label . Text to' block to the 'when AlMasmak .Initialize' block, indicating a connection or flow. Key Values: MIT APP INVENTOR, Visit_SA_App, AlMasmak, Blocks, Viewer, description_label, Height, HeightPercent, Text, TextColor, when AlMasmak .Initialize, get start value, en, ar, global title_en, global description_en, global title_ar, global description_ar, وزارة التعليم, Ministry of Education, 173, 2025 - 1447 Context: This visual demonstrates how to implement basic UI manipulation and localization logic within an MIT App Inventor application using visual programming blocks. It shows how to set component properties and handle application initialization events with conditional statements.

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

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

ما هو الغرض من كتلة 'when AlMasmak .Initialize' في MIT App Inventor؟

الإجابة: هي كتلة حدث (event handler) تُنفَّذ عند بدء تشغيل التطبيق أو عند تهيئة الشاشة، وتُستخدم لتنفيذ التعليمات الأولية مثل تعيين النصوص بناءً على اللغة.

الشرح: تُعد كتل الأحداث (Event Handlers) أساسية في البرمجة المرئية، حيث تنتظر حدوث إجراء معين (مثل التهيئة) ثم تستجيب بتنفيذ مجموعة من التعليمات.

تلميح: فكر في اللحظة التي تبدأ فيها الشاشة بالعمل وما الذي يجب أن يحدث أولاً.

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

ما هي الخطوات التي تنفذها الكود البرمجي في كتلة 'when AlMasmak .Initialize' الموضحة؟

الإجابة: 1. التحقق من قيمة المتغير 'start value'. 2. إذا كانت القيمة تساوي "en"، يتم تعيين نص title_label و description_label من المتغيرات العامة title_en و description_en. 3. إذا كانت القيمة تساوي "ar"، يتم تعيين النصوص من المتغيرات العامة title_ar و description_ar.

الشرح: يمثل هذا التسلسل منطقاً شرطياً بسيطاً للتحويل بين اللغات (Localization) عند بدء تشغيل التطبيق، وهو تطبيق عملي لمفهوم التحكم في التدفق (Control Flow).

تلميح: راجع بنية جملة الشرط if/else if.

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

ما الفرق بين كتل 'set description_label . Text to' و 'set description_label . HeightPercent to' في واجهة MIT App Inventor؟

الإجابة: كتلة 'set description_label . Text to' تُستخدم لتعيين أو تغيير المحتوى النصي الذي يظهر للمستخدم على الواجهة. بينما كتلة 'set description_label . HeightPercent to' تُستخدم لتعيين ارتفاع المكون كنسبة مئوية من ارتفاع الحاوية أو الشاشة الأم.

الشرح: يُظهر هذا الفرق بين كتل تعيين الخصائص (Property Setters) التي تتحكم في محتوى المكون (مثل النص) وتلك التي تتحكم في مظهره وتخطيطه (مثل الأبعاد).

تلميح: فكر في نوع الخاصية التي يتم تعديلها في كل حالة: المحتوى أم المظهر والتخطيط.

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

ما هو دور المتغيرات العامة (Global Variables) مثل 'title_en' و 'description_ar' في الكود الموضح؟

الإجابة: تُستخدم لتخزين القيم (مثل العناوين والوصف بلغات مختلفة) في مكان مركزي يمكن الوصول إليه من أي جزء في التطبيق، مما يسهل عملية إدارة المحتوى متعدد اللغات وتحديثه.

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

تلميح: فكر في سبب عدم كتابة النص مباشرة داخل كتلة التعيين.

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

كيف يمكن وصف بنية الكود البرمجي المرئي (Visual Programming) في MIT App Inventor كما هو موضح في الصفحة؟

الإجابة: يتكون من مكونات (Components) في لوحة التصميم (Viewer) وكتل برمجية (Blocks) في لوحة البرمجة. يتم برمجة التطبيق عن طريق تجميع هذه الكتل معاً بشكل منطقي، مثل ربط كتلة حدث (Initialize) بكتل شرطية (if) وكتل تعيين الخصائص (set . Text to).

الشرح: هذه البنية تمثل جوهر البرمجة المرئية، حيث يحول المطور المفاهيم المنطقية إلى كتل مادية يمكن سحبها وإفلاتها وربطها، مما يقلل من أخطاء بناء الجملة (Syntax Errors).

تلميح: انظر إلى أقسام الواجهة المذكورة: Blocks, Viewer, والمكونات المدرجة.

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