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

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

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

الدرس: أنشطة تصميم التطبيقات

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

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

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

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

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

📝 ملخص الصفحة

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

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

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

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

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

--- SECTION: 3 --- صمم تطبيقًا بترتيب عمودي وترتيبين أفقيين، ويجب أن يحتوي كل ترتيب أفقي على زرين، وأن تكون جميع المكونات في مجمع خاص بها. استخدم خصائص المحاذاة المناسبة للمكونات. --- SECTION: 4 --- صمم شاشة أخرى للتطبيق أعلاه تحتوي على HorizontalArrangement (الترتيب الأفقي) كمُجمّع خارجي، وترتيبين عموديين VerticalArrangement (ترتيب عمودي) مع أزرار بداخلهما، وستكون جميع المكونات في منتصف المجمع الخاص بها. استخدم خصائص المحاذاة المناسبة للمكونات. --- SECTION: 5 --- صمم شاشة أخرى للتطبيق أعلاه تحتوي على VerticalArrangement (ترتيب عمودي)، وثلاثة صفوف من HorizontalArrangement (الترتيب الأفقي)، وسيحتوي كل صف HorizontalArrangement على صورتين، حيث تشير كل صورة إلى رياضة مختلفة. تأكد من أن جميع المكونات مرتبة في وسط مجمعها وأن كافة الصور لها الأبعاد نفسها. وزارة التعليم Ministry of Education 2023 - 1447 152

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

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

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

الإجابة: VerticalArrangement VA_Main خصائص: Width=Fill parent, height=Fill parent, Align=Center HA1, HA2 خصائص: Width=Fill parent, Align=Center في HA1 أضيف زرين، وفي HA2 أضيف زرين. اجعل الأزرار Automatic.

خطوات الحل:

  1. **الشرح:** لنفهم هذا السؤال: المطلوب تصميم تطبيق باستخدام App Inventor. الفكرة هنا هي ترتيب المكونات في واجهة المستخدم. نبدأ بإنشاء مجمع رئيسي من نوع VerticalArrangement (ترتيب عمودي) ليكون الحاوية الأساسية. نضبط خصائصه لتشغل الشاشة كاملة (Fill parent) ونحاذاته لتكون في المنتصف (Align=Center). داخل هذا المجمع العمودي، نضيف مجمعين أفقيين (HorizontalArrangement). كل مجمع أفقي يجب أن يحتوي على زرين. نضبط خصائص كل مجمع أفقي ليشغل العرض كاملاً (Width=Fill parent) ونحاذاته لتكون في المنتصف (Align=Center). أخيراً، نضيف زرين داخل كل مجمع أفقي، ونضبط عرض الأزرار لتكون تلقائية (Automatic) لتناسب النص بداخلها. إذن الإجابة هي: **VerticalArrangement VA_Main خصائص: Width=Fill parent, height=Fill parent, Align=Center. HA1, HA2 خصائص: Width=Fill parent, Align=Center. في HA1 أضيف زرين، وفي HA2 أضيف زرين. اجعل الأزرار Automatic.**

سؤال 4: صمم شاشة أخرى للتطبيق أعلاه تحتوي على HorizontalArrangement (الترتيب الأفقي) كمُجمّع خارجي، وترتيبين عموديين VerticalArrangement (ترتيب عمودي) مع أزرار بداخلهما، وستكون جميع المكونات في منتصف المجمع الخاص بها. استخدم خصائص المحاذاة المناسبة للمكونات.

الإجابة: HorizontalArrangement HA_Outer خصائص: Width=Fill parent, height=Fill parent, Align=Center VerticalArrangement VA_Left, VA_Right خصائص: Width=Automatic, Align=Center في كل منهما، واجعل عرض الأزرار Automatic.

خطوات الحل:

  1. **الشرح:** الفكرة في هذا السؤال هي تصميم شاشة أخرى بنمط مختلف. نبدأ بإنشاء مجمع خارجي رئيسي من نوع HorizontalArrangement (ترتيب أفقي). نضبط خصائصه ليشغل الشاشة كاملة (Fill parent) ونحاذاته لتكون في المنتصف (Align=Center). داخل هذا المجمع الأفقي، نضيف مجمعين عموديين (VerticalArrangement). نسميهما مثلاً VA_Left و VA_Right. نضبط خصائص كل مجمع عمودي ليكون عرضه تلقائياً (Width=Automatic) ليتناسب مع محتوياته، ونحاذاته لتكون في المنتصف (Align=Center). داخل كل مجمع عمودي، نضيف أزراراً. نضبط عرض الأزرار لتكون تلقائية (Automatic) لتناسب النص. إذن الإجابة هي: **HorizontalArrangement HA_Outer خصائص: Width=Fill parent, height=Fill parent, Align=Center. VerticalArrangement VA_Left, VA_Right خصائص: Width=Automatic, Align=Center. في كل منهما، واجعل عرض الأزرار Automatic.**

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

الإجابة: VerticalArrangement VA_Main خصائص: Fill parent و Align Center HorizontalArrangement Row1-3 خصائص: Width=Fill parent Image بأبعاد (100x100) مع ScalePictureToFit.

خطوات الحل:

  1. **الشرح:** لنفهم هذا السؤال: المطلوب تصميم شاشة تعرض صوراً لرياضات. نبدأ بإنشاء مجمع رئيسي من نوع VerticalArrangement (ترتيب عمودي). نضبط خصائصه ليشغل الشاشة كاملة (Fill parent) ونحاذاته لتكون في المنتصف (Align=Center). داخل هذا المجمع العمودي، نضيف ثلاثة مجمعات أفقية (HorizontalArrangement) تمثل صفوفاً. نسميها مثلاً Row1 و Row2 و Row3. نضبط خصائص كل صف ليشغل العرض كاملاً (Width=Fill parent) لترتيب الصور بشكل متساوٍ. داخل كل صف أفقي، نضيف صورتين. كل صورة تمثل رياضة مختلفة. نضبط أبعاد كل صورة لتكون متساوية، مثلاً 100 بكسل في العرض و 100 بكسل في الطول (100x100). نستخدم خاصية ScalePictureToFit لضمان أن الصورة تتكيف مع الأبعاد المحددة دون تشويه. إذن الإجابة هي: **VerticalArrangement VA_Main خصائص: Fill parent و Align Center. HorizontalArrangement Row1-3 خصائص: Width=Fill parent. Image بأبعاد (100x100) مع ScalePictureToFit.**

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

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

ما هي الخطوات المطلوبة لتصميم تطبيق بترتيب عمودي وترتيبين أفقيين، بحيث يحتوي كل ترتيب أفقي على زرين؟

الإجابة: 1. استخدام VerticalArrangement كمُجمّع رئيسي. 2. إضافة HorizontalArrangement داخل المجمع العمودي. 3. وضع زرين داخل كل ترتيب أفقي. 4. استخدام خصائص المحاذاة المناسبة لجميع المكونات داخل مجمعاتها الخاصة.

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

تلميح: فكر في التسلسل الهرمي للمجمعات: مجمع رئيسي خارجي، ثم مجمعات فرعية بداخله، ثم المكونات النهائية.

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

كيف تصمم شاشة تحتوي على HorizontalArrangement كمُجمّع خارجي، وترتيبين عموديين بداخله، مع أزرار في كل ترتيب عمودي؟

الإجابة: 1. استخدام HorizontalArrangement كمُجمّع خارجي رئيسي. 2. إضافة VerticalArrangement داخل المجمع الأفقي. 3. وضع أزرار داخل كل ترتيب عمودي. 4. محاذاة جميع المكونات في منتصف المجمع الخاص بها باستخدام خصائص المحاذاة المناسبة.

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

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

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

ما هي خطوات تصميم شاشة لعرض رياضات مختلفة باستخدام مجمع عمودي وصفوف أفقية للصور؟

الإجابة: 1. استخدام VerticalArrangement كمُجمّع رئيسي. 2. إضافة ثلاثة صفوف من HorizontalArrangement داخل المجمع العمودي. 3. وضع صورتين داخل كل صف أفقي، حيث تشير كل صورة إلى رياضة مختلفة. 4. ضمان أن جميع المكونات مرتبة في وسط مجمعها وأن كافة الصور لها الأبعاد نفسها.

الشرح: يهدف هذا التصميم لتنظيم محتوى مرئي (صور رياضات) في صفوف داخل عمود، مع الحفاظ على تناسق الأبعاد والمحاذاة المركزية.

تلميح: ركز على هيكل الصفوف (الأفقية) داخل العمود الرئيسي، ووظيفة كل صف.

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

ما الفرق الجوهري في الهيكل بين التصميم الأول (العمودي مع أفقيين) والتصميم الثاني (الأفقي مع عموديين)؟

الإجابة: الفرق الرئيسي هو نوع المجمع الخارجي الرئيسي: في التصميم الأول المجمع الخارجي هو VerticalArrangement (عمودي) ويحتوي على مجمعات فرعية أفقية. في التصميم الثاني المجمع الخارجي هو HorizontalArrangement (أفقي) ويحتوي على مجمعات فرعية عمودية.

الشرح: يُظهر هذا الفرق مرونة استخدام مجمعات الترتيب (Arrangements) في App Inventor لإنشاء هياكل تخطيطية مختلفة بناءً على المجمع الخارجي المختار.

تلميح: قارن بين أول مكون يُذكر في وصف كل تصميم.

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

ما المفهوم الجوهري المشترك بين التصاميم الثلاثة المذكورة في الصفحة؟

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

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

تلميح: فكر في الكلمة المتكررة 'مجمع' وهدف جميع التصاميم.

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