صفحة 125 - كتاب التقنية الرقمية - الصف 12 - الفصل 1 - المملكة العربية السعودية

بيئة عمل مطور التطبيقات MIT

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

اسم المشروع (Project Name)

يتم عرض جميع العناصر التي تستخدمها في المشروع في قسم المكونات (Components).

زر التصميم (Designer button)

زر اللبنات (Blocks button)

الأدوات المستخدمة في إعداد واجهة المستخدم (User Interface)

شاشة العرض (Screen View) هي مساحة العمل لإضافة الأدوات ومعاينة ظهورها في التطبيق.

تُستخدم الخصائص (Properties) لتغيير خصائص العناصر المضافة إلى شاشة التطبيق.

وزارة التعليم Ministry of Education 2025 - 1447

125

بيئة عمل مطور التطبيقات MIT يتم تقسيم واجهة مطور التطبيقات إلى صفحتين. هذه هي صفحات التصميم (Designer)، واللبنات (Blocks) التي يمكنك الوصول إليها من خلال زرّي (التصميم واللبنات) في أعلى يمين الشاشة. صفحة التصميم هي المكان الذي تصمم فيه التطبيق الخاص بك، تُدخل مكونات في الشاشة وتُغيّر خصائصها الأساسية. صفحة اللبنات هي المكان الذي تبرمج فيه تلك المكونات. اسم المشروع (Project Name) يتم عرض جميع العناصر التي تستخدمها في المشروع في قسم المكونات (Components). زر التصميم (Designer button) زر اللبنات (Blocks button) الأدوات المستخدمة في إعداد واجهة المستخدم (User Interface) شاشة العرض (Screen View) هي مساحة العمل لإضافة الأدوات ومعاينة ظهورها في التطبيق. تُستخدم الخصائص (Properties) لتغيير خصائص العناصر المضافة إلى شاشة التطبيق. وزارة التعليم Ministry of Education 2025 - 1447 125 --- VISUAL CONTEXT --- **DIAGRAM**: MIT App Inventor Development Environment - Designer View Description: A detailed screenshot of the MIT App Inventor development environment, specifically showing the 'Designer' view. The interface is structured with several distinct panels and elements: 1. **Top Menu Bar**: Contains options like 'Projects', 'Connect', 'Build', 'Settings', 'Help', 'My Projects', 'View Trash', 'Guide', 'Report an Issue', 'English', and a user email 'saadsa.fahd@gmail.com'. On the far right, two prominent buttons are visible: 'Designer' (highlighted, indicating the current view) and 'Blocks'. 2. **Project Name**: At the top left, the project name 'Healthy_Food' is displayed, along with the 'MIT APP INVENTOR' logo. 3. **Palette Panel (Left)**: Labeled 'Palette' and 'User Interface', this panel lists various user interface components available for drag-and-drop. A search bar 'Search Components...' is at the top. Components visible include: 'Button', 'CheckBox', 'DatePicker', 'Image', 'Label', 'ListPicker', 'ListView', 'Notifier', 'PasswordTextBox', 'Slider', 'Spinner', 'Switch', 'TextBox', 'TimePicker', and 'WebViewer'. Below these, a 'Layout' section is also visible. 4. **Viewer Panel (Center)**: Labeled 'Viewer', this central area displays a simulated phone screen, representing the app's user interface. It includes a checkbox 'Display hidden components in Viewer' and a dropdown 'Phone size (505,320)'. The phone screen itself shows 'Screen1' at the top, a status bar with '9:48' time and Wi-Fi signal, and navigation buttons at the bottom (triangle, circle, square). 5. **Components Panel (Middle-Right)**: Labeled 'Components', this panel lists all components currently added to the 'Screen1' of the project. Only 'Screen1' is visible in this list. 6. **Properties Panel (Right)**: Labeled 'Properties', this panel allows modification of the selected component's attributes. It shows properties for 'Screen1', including 'AboutScreen', 'AccentColor' (default), 'AlignHorizontal' (Left: 1), 'AlignVertical' (Top: 1), 'AppName' (Healthy_Food), 'BackgroundColor' (default), 'BackgroundImage' (None), 'BigDefaultText', 'BlocksToolkit' (All), 'CloseScreenAnimation' (Default), 'DefaultFileScope' (App), and 'HighContrast'. 7. **Media Panel (Bottom-Right)**: A smaller panel below 'Properties' labeled 'Media', with buttons 'Rename', 'Delete', and 'Upload File...'. Context: This diagram serves as a visual guide to the MIT App Inventor's Designer interface, illustrating the layout and function of its key panels and controls. It is used to explain how users can design their applications by adding and configuring UI components.