برمجة الزر التفاعلي - كتاب هندسة البرمجيات - الصف 12 - الفصل 1 - المملكة العربية السعودية

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

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

الدرس: برمجة الزر التفاعلي Programming the Interactive Button

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

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

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

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

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

📝 ملخص الصفحة

يشرح هذا الدرس كيفية برمجة زر تفاعلي في بيئة MIT App Inventor لعرض رسالة ترحيبية عند الضغط عليه. يبدأ الدرس بتوجيه المستخدم للتبديل من واجهة المصمم (Designer) إلى واجهة اللبنات البرمجية (Blocks) لبدء عملية البرمجة.

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

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

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

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

برمجة الزر التفاعلي Programming the Interactive Button بعد أن أضفت الزر، ستضيف الآن بعض اللبنات البرمجية التي ستجعل الزر يعرض الجملة Welcome to Saudi Arabia (مرحباً بكم في المملكة العربية السعودية) عند الضغط عليه. عليك أولاً تغيير العرض من Designer (المصمم) إلى Blocks (اللبنات البرمجية). --- SECTION: صفحة اللبنات البرمجية في مختبر التطبيقات The App Inventor Blocks Page --- صفحة اللبنات البرمجية في مختبر التطبيقات The App Inventor Blocks Page هذه هي صفحة اللبنات لواجهة مختبر التطبيقات حيث سيتم عرض جميع المكونات التي أضفتها من صفحة المصمم هنا، ويمكن برمجتها باستخدام لغة برمجة مرئية قائمة على اللبنات البرمجية. هناك أنواع عديدة من اللبنات التي يمكن استخدامها، بما فيها لبنات برمجة لمنطق البرنامج (Program Logic)، ومعالجة الحدث (Event Handling)، ومعالجة المتغير (Variable Manipulation) وتغيير المكون (Component Alteration). يمكنك تخزين اللبنات البرمجية في الحقيبة (Backpack) ثم سحبها وإفلاتها من هناك لتتمكن من الوصول إليها لاحقًا بسرعة. وزارة التعليم Ministry of Education 2025 - 1447 126 --- VISUAL CONTEXT --- **DIAGRAM**: شكل 3.10: واجهة اللبنات البرمجية في مختبر التطبيقات Description: A screenshot of the MIT App Inventor Blocks editor interface, illustrating various programming blocks and user interface elements. The interface is divided into several sections: a left-hand palette for blocks, a main workspace for assembling blocks, and controls for managing the workspace. X-axis: N/A Y-axis: N/A Data: The diagram shows the visual programming environment. On the left, a 'Blocks' palette lists categories like 'Built-in' (Control, Logic, Math, Text, Lists, Dictionaries, Colors, Variables, Procedures) and component-specific blocks (Screen1, Any component), along with a 'Media' section for 'Upload File'. The top bar includes project management, connection, build options, and user account information. Tabs for 'Designer' and 'Blocks' are visible. The main central area, labeled 'منطقة البرمجة' (Programming Area), displays several example programming blocks, such as 'when Screen1 BackPressed do', 'when Screen1 Initialize do', 'call Screen1 AskForPermission', and 'set Screen1 AboutScreen to'. On the right side, there are controls for 'توسيط اللبنات البرمجية للكود' (Center blocks), 'التكبير' (Zoom In), 'التصغير' (Zoom Out), and a trash can icon for deleting blocks, labeled 'يمكن حذف اللبنات الإنشائية عن طريق سحبها وإفلاتها في السلة'. Key Values: Blocks palette categories: Control, Logic, Math, Text, Lists, Dictionaries, Colors, Variables, Procedures, Screen1, Any component, Example blocks: when Screen1 BackPressed, when Screen1 Initialize, call Screen1 AskForPermission, Interface labels: Blocks, Designer, Media, Upload File, Projects, Connect, Build, Export, Guide, Report an issue, English, ghuied@gmail.com, Arabic labels: فئات اللبنات البرمجية, عرض اللبنات البرمجية القابلة للبرمجة, التبديل بين وضع المصمم ووضع اللبنات البرمجية, مكونات واجهة المستخدم الخاصة بـ Screen1 (شاشة 1), منطقة البرمجة, توسيط اللبنات البرمجية للكود, التكبير, التصغير, يمكن حذف اللبنات الإنشائية عن طريق سحبها وإفلاتها في السلة. Context: This diagram illustrates the visual programming interface of App Inventor, specifically the 'Blocks' editor, which is used to define the behavior and logic of mobile applications. It shows how different types of programming blocks are organized and assembled to create code, and how users can interact with the workspace.

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

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

سؤال مربع-1: ما هي وظيفة الأزرار المشار إليها في واجهة اللبنات البرمجية للتبديل بين الأوضاع؟

الإجابة: التبديل بين وضع المصمم ووضع اللبنات البرمجية

خطوات الحل:

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

سؤال مربع-2: ماذا تسمى المنطقة المشار إليها في واجهة اللبنات البرمجية التي تحتوي على فئات اللبنات؟

الإجابة: فئات اللبنات البرمجية

خطوات الحل:

  1. **الشرح:** في واجهة اللبنات البرمجية، يتم تنظيم اللبنات (Blocks) في مجموعات حسب وظيفتها أو حسب المكون الذي تنتمي إليه. هذه المجموعات تسمى فئات. المنطقة المشار إليها هي المكان الذي تعرض فيه هذه الفئات، مثل فئة "Control" أو "Logic" أو فئات خاصة بالمكونات التي أضفتها. إذن الإجابة هي: **فئات اللبنات البرمجية**

سؤال مربع-3: ماذا يمثل الجزء المشار إليه في واجهة اللبنات البرمجية الذي يعرض اللبنات القابلة للبرمجة؟

الإجابة: عرض اللبنات البرمجية القابلة للبرمجة

خطوات الحل:

  1. **الشرح:** عندما تختار فئة معينة من فئات اللبنات، تظهر اللبنات الفردية التي تنتمي إلى تلك الفئة. الجزء المشار إليه هو المكان الذي تظهر فيه هذه اللبنات بشكل مفصل، بحيث يمكنك سحبها ووضعها في منطقة البرمجة لبناء الكود. إذن الإجابة هي: **عرض اللبنات البرمجية القابلة للبرمجة**

سؤال مربع-4: ما هي وظيفة الأيقونة المشار إليها في واجهة اللبنات البرمجية لتوسيط الكود؟

الإجابة: توسيط اللبنات البرمجية للكود.

خطوات الحل:

  1. **الشرح:** أثناء العمل على الكود في منطقة البرمجة، قد تتحرك اللبنات أو لا تكون في مركز العرض. الأيقونة المشار إليها هي أداة مساعدة تقوم تلقائياً بترتيب اللبنات الموجودة في منطقة البرمجة وجعلها في وسط الشاشة، مما يسهل رؤية الكود وتنظيمه. إذن الإجابة هي: **توسيط اللبنات البرمجية للكود**

سؤال مربع-5: ما هي وظيفة الأيقونة المشار إليها في واجهة اللبنات البرمجية للتكبير؟

الإجابة: التكبير.

خطوات الحل:

  1. **الشرح:** عندما تكون اللبنات البرمجية صغيرة الحجم أو تريد رؤية تفاصيل الكود بشكل أوضح، يمكنك استخدام أداة التكبير. الأيقونة المشار إليها، والتي غالباً ما تكون على شكل عدسة مكبرة أو علامة زائد (+)، تسمح لك بزيادة حجم عرض اللبنات في منطقة البرمجة. إذن الإجابة هي: **التكبير**

سؤال مربع-6: ما هي وظيفة الأيقونة المشار إليها في واجهة اللبنات البرمجية للتصغير؟

الإجابة: التصغير.

خطوات الحل:

  1. **الشرح:** على العكس من التكبير، قد تحتاج أحياناً إلى رؤية صورة أشمل للكود إذا كان كبيراً. الأيقونة المشار إليها، والتي غالباً ما تكون على شكل عدسة مصغرة أو علامة ناقص (-)، تسمح لك بتقليل حجم عرض اللبنات في منطقة البرمجة. إذن الإجابة هي: **التصغير**

سؤال مربع-7: ماذا تسمى المنطقة المركزية المشار إليها في واجهة اللبنات البرمجية؟

الإجابة: منطقة البرمجة

خطوات الحل:

  1. **الشرح:** هذه المنطقة هي قلب واجهة اللبنات البرمجية. هنا تقوم ببناء برنامجك عن طريق سحب اللبنات من فئات العرض وربطها معاً. كل ما تضيفه من لبنات برمجية يتم وضعه وترتيبه في هذه المنطقة المركزية لإنشاء سلسلة من التعليمات. إذن الإجابة هي: **منطقة البرمجة**

سؤال مربع-8: ماذا تسمى المكونات المشار إليها في واجهة اللبنات البرمجية والخاصة بـ Screen1؟

الإجابة: مكونات واجهة المستخدم الخاصة بـ Screen1 (شاشة 1)

خطوات الحل:

  1. **الشرح:** في بيئة التطوير، يمكن أن يحتوي المشروع على أكثر من شاشة (Screen). المكونات المشار إليها هي تلك التي قمت بإضافتها وتخصيصها للشاشة الأولى (Screen1) في وضع المصمم، مثل الأزرار أو النصوص أو الصور. في واجهة اللبنات، تظهر هذه المكونات كفئات أو خيارات خاصة بها. إذن الإجابة هي: **مكونات واجهة المستخدم الخاصة بـ Screen1 (شاشة 1)**

سؤال مربع-9: كيف يمكن حذف اللبنات الإنشائية المشار إليها في واجهة اللبنات البرمجية؟

الإجابة: يمكن حذف اللبنات الإنشائية عن طريق سحبها وإفلاتها في السلة.

خطوات الحل:

  1. **الشرح:** إذا أردت إزالة لبنة إنشائية (مثل لبنة "if" أو "for") من منطقة البرمجة لأنك لم تعد تحتاجها أو أخطأت في وضعها، فإن العملية بسيطة. الفكرة هي أن تسحب هذه اللبنة باستخدام مؤشر الفأرة وتحركها خارج منطقة البرمجة نحو رمز السلة (عادةً ما يكون أيقونة سلة مهملات) ثم تفلتها هناك، فتُحذف تلقائياً. إذن الإجابة هي: **يمكن حذف اللبنات الإنشائية عن طريق سحبها وإفلاتها في السلة**

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

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

ما هي صفحة اللبنات البرمجية (Blocks Page) في مختبر التطبيقات (App Inventor)؟

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

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

تلميح: فكر في المكان الذي يتم فيه تحويل التصميم إلى منطق تشغيلي للبرنامج.

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

ما هي أنواع اللبنات البرمجية المتوفرة في صفحة اللبنات بمختبر التطبيقات؟

الإجابة: أنواع عديدة من اللبنات تشمل: لبنات برمجة لمنطق البرنامج (Program Logic)، ومعالجة الحدث (Event Handling)، ومعالجة المتغير (Variable Manipulation) وتغيير المكون (Component Alteration).

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

تلميح: تذكر أن اللبنات تنقسم حسب الوظيفة التي تؤديها في البرنامج.

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

ما هي وظيفة الحقيبة (Backpack) في واجهة اللبنات البرمجية؟

الإجابة: وظيفة الحقيبة هي تخزين اللبنات البرمجية ثم سحبها وإفلاتها منها لتتمكن من الوصول إليها لاحقًا بسرعة.

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

تلميح: فكر في أداة تساعد على إعادة استخدام الأجزاء البرمجية.

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

ما هي الخطوة الأولى لبرمجة زر تفاعلي لعرض جملة ترحيبية في App Inventor؟

الإجابة: الخطوة الأولى هي تغيير العرض من Designer (المصمم) إلى Blocks (اللبنات البرمجية).

الشرح: يجب الانتقال إلى بيئة البرمجة (Blocks) لبدء كتابة الكود الذي يحدد سلوك الزر عند الضغط عليه.

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

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

ما هو الهدف من برمجة الزر التفاعلي كما ورد في النص؟

الإجابة: الهدف هو جعل الزر يعرض الجملة 'Welcome to Saudi Arabia (مرحباً بكم في المملكة العربية السعودية)' عند الضغط عليه.

الشرح: هذا مثال تطبيقي على كيفية ربط حدث (الضغط على الزر) بإجراء محدد (عرض رسالة ترحيبية).

تلميح: فكر في النتيجة المرجوة من تفاعل المستخدم مع الزر.

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