Lesson Introduction to MIT App Inventor - Software Engineering - ثالث ثانوي
1. Software Engineering
2. Prototyping
3. Developing Applications with App Inventor
4. Software Accessibility and Digital Inclusion
3. Developing Applications with App Inventor وزارة التعليم istry of Education 114 2024-1446 In this unit, you will use MIT App Inventor to develop a functional and interactive mobile application for a tourism campaign. You will use the prototype you created in the previous unit to design the UI and then you will program it. Learning Objectives In this unit, you will learn to: > Utilize a wireframe prototype as a guide to build a UI. > Design a functional UI. > Utilize prototype feedback to improve an application. > Develop an application from specifications. > Enrich a mobile application with content. > Enhance mobile application with interactive UX components. Tools > MIT App Inventor
Developing Applications with App Inventor
Learning Objectives
Tools
Link to digital lesson Lesson 1 Introduction to MIT App Inventor www.ien.edu.sa Developing Mobile Applications The process of designing and developing a mobile application is similar to the process of developing a web or desktop application. Table 3.1: Examples of smartphone applications Email applications Social media applications Communication apps such as instant messaging applications Map applications Administrative applications for governmental entities such as ministries, hospitals or schools Mobile games Mobile Application A mobile application is a type of application software that is designed to run on mobile. devices such as smartphones and tablets. ☑ Figure 3.1: Types of mobile applications Stages of Creating Smartphone Applications Analysis and Design: Select the idea, the goal of the application, and the target group. Create a manual app diagram of the different user interfaces and how they relate to one another. Development: Use a smartphone application development program to implement the design that you devised in the previous stage. وزارة التعليم Ministry of Education 2024-1446 Testing: Test the application and address any programming or design problems that may arise, then add the final touches to your work. Publishing and Marketing: Upload the application, so it can get approved and published to the application store. 115
Developing Mobile Applications
Table 3.1: Examples of smartphone applications
Mobile Application
Stages of Creating Smartphone Applications
MIT App Inventor MIT App Inventor is a development tool for smartphone apps. It allows apps to be created without having to write code by using a building block environment similar to the Scratch application. Traditional mobile development uses coding with mobile- native programming languages like Java, Kotlin or Swift. App Inventor can also package your application in a form ready for distribution. Advantages of Using MIT App Inventor Shorter development time, as we can develop an application in less than one hour. Helps develop creativity skills through the use of software building blocks and reduces the chances of making programming mistakes. Ease of sharing the applications that are created in this program. Access to many basic functions in the phone, such as phone calls, SMS messages, location sensors, audio and video, among others. Ability to save data via cloud storage platforms. وزارة التعليم Ministry of Education 116 2024-1446 Developing a Tourism Application You will develop an application for tourists visiting the KSA that allows them to look for the most popular destinations. When they select a destination, they will be shown a list of highlights for that destination. They will then choose a highlight and be presented with a photo and a description of that highlight. This is the application that you developed a wireframe prototype for in the previous unit. In this lesson you will design all the screens for the application, and in the next lesson you will program them. Differences between Prototyping UI and Developing UI When designing wireframes with a prototyping tool, the appearance of the elements and the components on a screen is arranged with declarative tools. This means that the arrangement of components such as buttons, labels and images can be explicitly specified. When developing the actual application, components are arranged dynamically according to the tool used. MIT App Inventor, like most development platforms, uses container components that are used to arrange and align other components that are placed inside them. Keep in mind that the methods of creating a UI are different when prototyping and when developing an application. INFORMATION App Inventor was developed by Google in 2010 and is now maintained by MIT (Massachusetts Institute of Technology).
MIT App Inventor
Advantages of Using MIT App Inventor
Developing a Tourism Application
Differences between Prototyping UI and Developing UI
App Inventor was developed by Google in 2010 and is now maintained by MIT (Massachusetts Institute of Technology).
Transitioning from Prototype to Application As you have already created a wireframe prototype, you know how to design the UI of the application. This means that the development time will be shorter because the UI and UX decisions have been made already. You only need to use the tools provided by App Inventor to replicate the wireframe's appearance as closely as possible. However, the original wireframe prototype does not represent the final view of the application. Ul changes and new features are implemented during the development of the application, because feedback is given by testing users. While you are preparing to develop the application, users testing give feedback on the wireframe prototype that you created in the previous unit. Their comments can be used to iterate the prototype again, or they can be implemented during the development phase. In this case, you will implement them directly when developing the application in App Inventor. The main points from the prototype feedback are the following: • The components of the Cities and Highlight screens need to have a container with a slightly different background color to the image of the flag. • The Highlight screen needs to have a look consistent with the Cities page. • It would be helpful if there was a way to view the location of each highlight presented. You will now begin to develop the application UI with the prototype as a guide, and you will also implement the comments from the given feedback. Starting Building Apps with App Inventor To start building apps with MIT App Inventor, you need to log into the App Inventor website with your Google account. To start MIT App Inventor: > Go to appinventor.mit.edu and click Create Apps!. 1 > Sign in with your Google account. > You are now viewing the MIT App Inventor workspace. 3 وزارة التعليم Ministry of Education 2024-1446 About Educators News Resources Blogs Sign in with Google 1 Designa Conversational Al Agent for Your App Inventor App Enter your password 0.9M Get Started Try a Tutorial Teach Coding Ask Questions Get Involved Welcome qkhaled.bl@gmail.com Show password 2 To continue, Google will share your name, email address. language preference, and profile picture with App Inventor Authentication Forgot password? Next 117
Transitioning from Prototype to Application
Start Building Apps with App Inventor
MIT APP INVENTOR Projects - Start ne praest wash Lagna Gatery Pto Gary Projects D Name Date Created HELLO PURR 3 Settings Help My Projects View Tra Gude Regon an Engish gled.bl@gmail.com WELCOME TO Dane Modified GET STARTED WITH SOME TUTORIALS TALK TO ME TRANSLATE APP yt can halde a very short time You create a button that has a picture of a cat on it and then program the button so that when it is clicked a new sound plays GO TO TUTORIAL Text to Speech supemingly fun Find out for yourself with this starter app that talks GO TO TUTORIAL Quickly translate English Spanish (and other languages 100) You're challenged with creating an app that could a an aid for immigrant parents who need a little extra help in English- speaking situations. Inspeed by VR Media story What It's Like to be a Translator GO TO TUTORIAL STARTA BLANK PROJECT CLOSE Figure 3.2: Signing in to App Inventor To start a new project in MIT App Inventor: > Click on Start new project. ① > Type a name for your project 2 and click OK. 3 وزارة التعليم Ministry of Education 118 2024-1446 MIT Start new projec PYD Build Settings My Poets View Tach Qu Riport ne English Me To Trash View Trash Lopes Galery Pusat Gallery 1 Nome MIT Projects None Date Create My Proj View Trash Login to Galery Pushto Gallery Date Created Date Modified Date Modified Create new App Inventor project Project name Will SA A 2 Cancel OK 3 Figure 3.3: Start a new project in App Inventor hed mat.com
Figure 3.2: Signing in to App Inventor
To start a new project in MIT App Inventor:
The App Inventor Interface The App Inventor interface is split into two pages. These are the Designer and Blocks pages which you can access through the two buttons (Design & Blocks) at the top right of the screen. The Designer page is where you insert components into the screen and change their basic properties. The Blocks page is where you program those components. Project name The Components section is where all the elements we use in the project are presented. Designer button MIT Projects Connect Build -> Settings Help My Projects View Trash Guide Report an Issue English qkhaled bl@gm.com APP INVENTOR Visit_SA_App Palette Search Components User Interface Button CheckBox DatePicker Image A Label ListPicker ListView Notifier PasswordTextBox Slider Spinner Switch TextBox TimePicker WebViewer Layout Media Screen! Add Screen Remove Screen Publish to Gallery Viewer Display hidden components in Viewer Phone size (505 320) Screeni Drawing and Animation Maps Charts Storage User Interface components Connectivity LEGO® MINDSTORMS® وزارة التعليم Ministry of Education 2024-1446 O 9:48 ☐ Designer Blocks Components Screen! Properties Screen1 AboutScreen Blocks button AccentColor Default Properties are used to change the properties of the elements added to the application screen. BackgroundColor Default BackgroundImage Nons BigDefaultText Blocks Toolkit All- Rename Delete CloseScreenAnimation Default Media DefaultFileScope Upload File App- HighContrast The Viewer is the workspace for adding tools and previewing their appearance in the application. icon None OpenScreenAnimation Default PrimaryColor Default PrimaryColorDark Default ScreenDrientation Unspecified Scrollable Figure 3.4: The App Inventor Designer interface 119
The App Inventor Interface
Table 3.2: App Inventor - most commonly used components Component Button Image Icon Button Image Label A Label ListPicker ListPicker Description A command button to perform a specific task when pressed. A special component that displays images. Displays text to be customized in the Text field in the Properties panel. It is a button that when pressed, displays several text options to choose from. Changing the Properties of a Component You will make the name Home the title of the first screen, Screen1, which will be the main screen of the application. In the viewer, you will change the Title of the screen to Home, as illustrated in the figure below. To change the screen title: > Select Screen1, from the Components section. > Scroll the sidebar down in the Properties section 2 and in the Title field, write the word Home. 3 MIT Projects COMINCT But view Train Responsive▾ Visit_SA_App Deser Components Properties Cosplay hidden components in Viewer Screen Theme Classic User interface Aboutin Button CheckBox 1 9:48 D Image AL ListPicker Accommo Default Algina Algnetical Top Apoliame Title Homel 3 TitleVisible 2 ☑ Listview Notte TutorialURL Swits Tex TimePicke Layout Media Drawing and Animation وزارة التعليم Ministry of Education 120 2024-1446 4 D BackgroundC Backgroundmage Bigbefautest Blocks Toolkit VersionCode Closebnimation 1 DefaulFileScape Medie Upload Fi HighCombat 0 VersionName 1.0 Figure 3.5: Changing the screen title
Table 3.2: App Inventor - most commonly used components
Changing the Properties of a Component
To change the screen title:
Adding a Button to the Screen You will now create a command button called Visit KSA. When you click on this button, the app will open a new screen and offer destinations to visit in the KSA. To add a button component: > Drag and drop the Button from the User Interface panel to the display. 1 > Click Rename. 2 > Type Visit_KSA 3 and press OK. 4 > Scroll the sidebar down in the Properties section, click Text and type "Visit Saudi Arabia". 5 MIT Project Connect Build Settings Help My View Report an Quide Engish hedgmail.com APP INVENTOR Projects T Visit SA App Surent Go Punto Gary Desper BOCKS Palette Viewer Components Display hidden components in Viewer Phone size (805.330 Screent Properties Dutton BackgroundColor User Interface Button CheckBox DataPicker (A) Label ListPicke ListView Notifier PasswordTextB Sider pinne Bech TextBox TinePicker WebViewe Layout Media Drawing and Animation 1 Screen1 Visit Saudi Arabia وزارة التعليم Ministry of Education 2024-1446 Screent Text for Buttont Rename Component Cancel A O ㅁ 4 9:48 9:48 3 Default Enabled FatBold Forttalic 140 FontTypelace default Height image Rename Delete Shape default- Media ShowFeedback 2 Text The name will change in the Components section and in the Blocks page. Properties Visit KSA BackgroundColor Default Textment Enabled center FontBold Fontitalic O FontSize 14.0 FontTypeface default- Height Automatic Width Automatic Image None... The name will be changed in the display. Shape default- ShowFeedback Text Vat Saudi Arabia TextAlignment center: 1 TextColor Default Figure 3.6: Adding a button component 5 121
Adding a Button to the Screen
Aligning the Components of the Screen Your application buttons should be located in the middle of the main screen. To put the button in the center of the screen: > Select Screen1, from the Components section. 1 > From the Properties section, select AlignHorizontal to Center: 3. 2 > Then select AlignVertical to Center: 2. 3 The number 2 is the number assigned to this setting of the vertical alignment tool. MIT Projects Connect Build Settings Help APP INVENTOR My Projects View Trash Report an Guide English qkhaled.bl@gmail.com Issue Visit_SA_App Palette Search Components User Interface Screen1 Add Screen ... Remove Screen Publish to Gallery Viewer Display hidden components in Viewer Phone size (505,320) Button CheckBox DatePicker Screen1 Image A Label ListPicker ListView Notifier PasswordTextBox Slider Spinner Switch TextBox TimePicker WebViewer Layout Media Drawing and Animation وزارة التعليم Ministry of Education 122 2024-1446 Δ Visit Saudi Arabia O ☐ 9:48 Designer Blocks Components Properties Screen1 Visit KSA 1 Screen1 AboutScreen 3 AccentColor Default AlignHorizontal Center :3- AlignVertical Center: 2+ AppName Discover_KSA BackgroundColor Default BackgroundImage None BigDefaultText ㅁ Blocks Toolkit 2 All- CloseScreenAnimation Rename Delete Default Media DefaultFileScope Upload File... App- HighContrast The number 3 is the number assigned to this setting of the horizontal alignment tool. Figure 3.7: Putting the button in the center of the screen Icon None
Aligning the Components of the Screen
Adding a Background Image to the Screen You will make some improvements to the app by adding a background image. To add a background image: > From the Properties section of Screen1, select the BackgroundImage property. > Click Upload File to upload the image from your computer. 2 > Click Choose File to choose an image from your computer. 3 1 > An Open window will appear. Choose the image you want to add from your computer, 4 then click Open. 5 > Then click OK. 6 > Scroll the sidebar down in the Properties section of Screen1, 7 untick the TitleVisible property. 8 Open Visit_SA_App Screen1- Add Screen Remove Screen Publish to Gallery Palette Viewer Search Components Display hidden components in Viewer Phone size (505,320) User Interface Button CheckBox DatePicker Screen1 Image A Label ListPicker ListView D Notifier PasswordTextBox Slider Spinner Switch TextBox 3 TimePicker WebViewer Visit Saudi Arabia 19:48 Designer Blocks Components Properties Screen! visit KSA Screen1 AboutScreen Upload File... 3 Choose File No file chosen OneDrive Pictures Search Pictures Organize New folder Cancel Attachments Desktop Documents Music Pictures Al Masmak.png Jeddah.png KSA_flag.jpg map_icon.png This PC 4 OK AccentColor Default AlignHorizontal Center:3 AlignVertical Center AppName Discover_KSA BackgroundColor Default Backgroundimage None Rename Delete Upload File 2 Media Upload File... Cancel OK HighContrast icon None 3D Objects Desktop Documents Upload File... Choose File KSA flag.jpg Downloads Riyadh.png 5 File name: KSA flag.jpg All f Cancel Open Cancel وزارة التعليم Ministry of Education 2024-1446 1 OK 6 123
Adding a Background Image to the Screen
MIT Projects Connect Build Settings Help APP INVENTOR My Projects Trash View Guide Report an Issue English okhaled.bl@gmail.com Screen1 Add Screen... Remove Screen Publish to Gallery Designer Blocks Visit_SA_App Palette Search Components User Interface Button CheckBox Viewer Display hidden components in Viewer Phone size (505,320) DatePicker Screen1 Image A Label ListPicker ListView Notifier PasswordTextBox Slider Spinner Switch TextBox TimePicker WebViewer Layout Media Drawing and Animation صارة التعليم Ministry of Education 124 2024-1446 Visit Saudi Arabia ☐ Δ 雞 Visit Saudi Arabia 9:48 ☐ 9:48 Components Screen1 Visit KSA Properties Screen1 AboutScreen AccentColor Default AlignHorizontal Center: 3 AlignVertical Center: 2- AppName Discover_HEA BackgroundColor Default Backgroundimage KSA_ BigDefaultText Blocks Toolkit CloseScreenAnimation 7 Rename Delete Default Media DefaultFileScope KSA flag.jpg App HighContrast Upload File... Icon None When you untick this property, the name of the screen is not displayed. Sizing Responsive Theme Classic Title Screen1 TitleVisible 80 TutorialURL Figure 3.8: Adding a background image VersionCode VersionName 1.0
Figure 3.8: Adding a background image
To add a Label component: > From the User Interface group, add a Label component to the screen by dragging and dropping it below the button 1 and rename it welcome_label by selecting Rename from the Components panel. 2 > In the welcome_label component, clear the Text property 3 and set the TextColor property to White. 4 وزارة التعليم Ministry of Education 2024-1446 ← C MIT App Inventor x + Not secure ai2.appinventor.mit.edu/#5139896889901056 Display hidden components in Viewer Phone size (505,320) Search Components User Interface Button CheckBox DatePicker Image 9:48 A Label 1 Wist Rename Component ListPicker ListView Old name: Labelt New name: Notifier PasswordTextBox Slider Spinner トル Visit Saudi Arabia O ☐ 9:48 Visit Saudi Arabia Text for Label1 A welcome_label Cancel None FontBold Fontitalic 。 FontSize 14.0 FontTypeface default HTML Format 。 HasMargins Height Screen1 Visit KSA A Labell welcome_label 2 OK Automatic Width Automatic Text Rename Delete Media TextAlignment left:0 KSA flag.jpg TextColor Upload File... White 4 Visible Figure 3.9: Adding a label component 3 125
To add a Label component:
Programming the Interactive Button Now that you've added the command button, you'll add some code that makes the button display the sentence "Welcome to Saudi Arabia!" when pressed. To do this, you have to change the view from "Designer" to "Blocks". The App Inventor Blocks Page This is the Blocks page of the App Inventor interface. All the components that you add from the Designer page will be shown here and they can be programmed with a block-based visual programming language. There are block elements for program logic, event handling, variable manipulation and component alteration. Code blocks categories. MIT We can store the blocks in the Backpack and then drag and drop them from there so we can quickly access them later. ew Trash Guide APP INVENTOR Report an Issue English qkhaled.bl@gmail.com. Show programmable codeblocks. Visit_SA_App Designer Blocks Blocks Built-in Control Logic Viewer when Screen1 BackPressed do Math when Screen1 Text component Error Occurred functionName errorNumber Lists do Dictionaries Colors Variables Procedures Screent Any component when Screen1 Initialize do when Screen1 OtherScreenClosed otherScreenName result Rename elete do when Screen1 component do PermissionDenied functionName permissionName when Screent PermissionGranted permissionName do Media Upload File... when Screen1 ScreenOrientation Changed do call Screen1 AskForPermission Switch between Designer mode and Blocks mode. permissionName Permission Coarse Location Zoom In call Screen1 HideKeyboard Zoom Out Screen1 AboutScreen set Screen1 AboutScreen to Center codeblocks. User interface components of Screen1 Programming Area Figure 3.10: The App Inventor Blocks interface We can delete building blocks by dragging and dropping them in the basket. وزارة التعليم Ministry of Education 126 2024-1446
Programming the Interactive Button
The App Inventor Blocks Page
Understanding the groups of programmable commands Control Controlling the program flow. Logic Performing logical operations. Math Performing mathematical operations. Text Performing operations on text and strings. Lists Initializing and interacting with list data structures. Dictionaries Initializing and interacting with dictionary data structures. Colors Variables Adding colors to components. Initializing and manipulating variables. Procedures Performing custom procedures. Each component that you select will have its own event handlers and operations to alter their properties. To select the Click event for the button: > Select the Visit_KSA component. 1 > Select the when Visit_KSA.Click block. 2 > Drag and drop it into the programming area. MIT Projects Connect Build Settings Help My APP INVENTOR Projects View Trash Guide Report an English qkhaled.bl@gmail.com Issue Visit_SA_App Screen1 Add Screen... Remove Screen Publish to Gallery Designer Blocks Blocks Viewer Built-in Control when Visit KSA do Click 2 when Visit KSA Click Logic Math when Visit KSA GotFocus do --> Text do 3 Lists Dictionaries Colors variables Procedures Screen Visit KSA ●Awelcome A welcome Jabe Any component when Visit KSA LongClick do when Visit KSA LostFocus do 1 when Visit KSA TouchDown do وزارة التعليم Ministry of Education 2024-1446 Figure 3.11: Selecting the Click event for the button 127
Understanding the groups of programmable commands
Each component that you select will have its own event handlers and operations to alter their properties.
To select the Click event for the button:
To access the Text property of the label: > Select the welcome_label component. 1 > Drag and drop the set welcome_label.Text to block. 2 > Place it inside the do section of the when Visit_KSA.Click block. 3 Discover_KSA Screen1 Add Screen Remove Screen Publish to Gallery Blocks Viewer Built-in Control Logic Math Text Lists Dictionaries colors variables welcome_label set welcome label▾ welcome_label BackgroundColor when Visit KSA Click do set welcome label- Text to BackgroundColor to 3 FontSize set welcome_label▾ FontSize to welcome_label HTMLContent welcome label HasMargins Procedures Screent set welcome label HasMargins to Visit KSA A welcome_label 1 welcome_label Height Any component set welcome_label▾ Height to set welcome label HeightPercent to welcome_label Text Rename Delete 2 set welcome label Text to Media KSA_flag.jpg Upload File welcome_label TextColor set welcome_label TextColor to welcome وزارة التعليم Ministry of Education 128 2024-1446 Privacy Policy and Terms of Use Figure 3.12: Accessing the Text property of the label Designer Blo
To access the Text property of the label:
To modify the Text property of the label: > Select the Text group 1 > Select the empty string block. 2 > Place an empty string block in the set Text to block. 3 > Type "Welcome to Saudi Arabia!" in the empty string block. 4 MIT Projects Connect+ APP INVENTOR Build Settings Help My Projects View Trash Guide Report an Issue English- qkhaled.bl@gmail.com Visit_SA_App Screen1 Add Screen Remove Screen Publish to Gallery Designer Blocks Blocks Built-in Control Viewer 2 when Visit KSA Click Logic join Math 1 Text Lists Dictionaries Colors variables Procedures Screent length is empty compare texts VisiLKSA Alwelcome Jabel Any component upcase starts at text وزارة التعليم Ministry of Education 2024-1446 do set welcome label Text to C when Visit KSA Click do set welcome_label Text T 3 to Welcome to Saudi Arabial| 4 Figure 3.13: Modifying the Text property of the label 129
To modify the Text property of the label:
Testing the Application At various stages in the development of an application, you need to test the application in order to make sure all the features are working. Frequent testing during development helps you discover potential bugs in the programming which should be corrected before publishing and delivering your application. In MIT App Inventor there are two methods of testing your application. The first method is the Emulator which is a program you install on your computer that emulates a mobile device. The second method is the MIT AI2 Companion, which is an application you install on your physical mobile phone. The App Inventor website provides you with a QR code that you scan with the MIT AI2 Companion application which loads the application that you have created on the browser on your physical phone. You can install the MIT A12 Companion app at the following link: https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3 Setting up the Android Emulator You will now install the Android Emulator to run the mobile application on your computer. To setup the Android Emulator application: > Go to the following website: https://appinventor.mit.edu/explore/ai2/windows. 1 > Click on the Download the installer link to download the .exe installer file. 2 > After the installer is downloaded, follow the steps as shown on the webpage. appmventor.mit.edu/explore/ai/windows 1 MIT APP INVENTOR About Educators News Resources Blogs Installing App Inventor 2 Setup on Windows Donate Gor Installing the Windows software for App Inventor Setup has two parts Installing the App Inventor Setup software package. This step is the same for all Android devices, and the same for Windows XP Vista, Windows 7, 8.1, and 10. If you choose to use the USB cable to connect to a device then you'll need to install Windows drivers for your Android phone NOTE: App Inventor 2 does not work with Internet Explorer. For Windows users, we recommend using either Chrome or Firefox as your browser for use with App Inventor Note: These instructions are for the new Emulator package that requires 64-bit Windows. You can find the older version Hero Installing the App Inventor Setup software package You must perform the installation from an account that has administrator privileges, installing via a non-administrator account is currently not supported Note: You will need to be logged in as an Administrator to complete the steps below 2. Locate the file MIT App_Inventor_Tools 30.265.0_win_setup64.exe (-1.5 GB) in your Downloads file or your Desktop: The location of the download on your computer depends on how your browser is configured 2 1. Download the installer. 3 3. Open the file. 4. Click through the steps of the installer. Do not change the installation location but record the installation directory, because you might need it to check drivers later. 5. You will likely get a dialog box from the User Account Manager asking if you wish to make changes to your device. It should say that the software is signed by the Massachusetts Institute of Technology. Click Yes Do you want to allow this app to make changes to your device? MIT App Inventar Tools Vended publisher Massachusetts Institute of Technigy وزارة التعليم Ministry of Education 130 2024-1446 Show more details Locating the Setup software In most cases. App Inventor should be able to locate the Setup software on its own. But if it a C:\Program Files\App Inventor, for the location of the software, the path to enter is Figure 3.14: Installing the Android Emulator application
Testing the Application
Setting up the Android Emulator
1. Run the Application with Android Emulator To run the application: > Click Connect. > Choose Emulator. 2 > Click the button to display the message. 3 The Emulator desktop application needs to be running before you initiate the connection on the App Inventor website. MIT 710 0 7:10 O Projects Connect 1 Settings + H APP INVENTOR Visit_SA_App Al Companion Screen1 ublish to Gall Emulator 2 Viewer USB Refresh Companion Screen Reset Connection join Hard Reset Blocks Built-in Control Logic Math Text length Lists Dictionaries is empty Visit Saudi Arabia 3 Figure 3.15: Testing an application with the Android Emulator 2. Run the Application with MIT AI2 Companion To connect the app to the MIT A12 Companion: > Click Connect 1 and Al Companion from the top menu. 2 > A dialog box with a QR code will appear on your PC screen. 3 > On your mobile device, launch the MIT AI2 Companion app, then click the Scan QR code button on the Companion, 4 and scan the code in the App Inventor window and the app you are building will be displayed on your device. > Click the button to display the message. 5 وزارة التعليم Ministry of Education 2024-1446 Before scanning, both devices have to be connected to the same WiFi network. Visit Saudi Arabia Welcome to Saudi Arabia 131
1. Run the Application with Android Emulator
2. Run the Application with AI Companion
Before scanning both devices have to be connected to the same WiFi network.
وزارة التعليم Ministry of Education 132 2024-1446 1 MIT Projects Connect▾ Build▾ Settings- APP INVENTOR Visit_SA_App Al Companion Screen1 2 n to Emulator Viewer USB Refresh Companion Screen Connect to Companion Launch the MIT A12 Companion on your device and then scan the barcode or type in the code to connect for live testing of your app Need help finding the Companion App? Blocks Built-in Control Logic Reset Connection join Hard Reset Math Text length Lists Dictionaries is empty Colors compare texts Variables Procedures trim Screen1 MIT App Inventor 2 type in the 6-character code -or- scan the QR code Δ Six Character Code connect with code 3 Cancel COSMOTER 01 80% 2:07 COSMOTE 0 80% D2:07 scan QR code 4 Your IP Address is: 192.168.1.3 Version: 2.60 Use Legacy Connection Visit Saudi Arabia Visit Saudi Arabia Welcome to Saudi Arabial 0 ☐ 5 Figure 3.16: Testing an application with the MIT AI2 Companion When you close the Companion app, the application is removed. In order for it to remain on your mobile device, it needs to be installed. O Your code is: rrgnpe
Figure 3.16: Testing an application with the MIT AI2 Companion
When you close the Companion app, the application is removed. In order for it to remain on your mobile device it needs to be installed.
Exercises 1 Describe the four stages of developing a mobile application. 2 Compare how developing applications with MIT App Inventor differs from traditional mobile app development. 3 List the advantages of developing mobile apps with MIT App Inventor. وزارة التعليم Ministry of Education 2024-1446 133
Describe the four stages of developing a mobile application.
Compare how developing applications with MIT App Inventor differs from traditional mobile app development.
List the advantages of developing mobile apps with MIT App Inventor.
4 Create a simple application about a country you want to visit. • Add a new screen named "Home" and add a background image with the country's flag. • Add two buttons named "Sightseeing" and "Useful Information". • Create a new screen and use the Label tool to write some useful information that will appear when the button is clicked. 5 Describe how a wireframe prototype will help with the development of the tourism application. وزارة التعليم Ministry of Education 134 2024 -1446
Create a simple application about a country you want to visit.
Describe how a wireframe prototype will help with the development of the tourism application.
