Learning Objectives

By the end of this lesson, students will be able to:

1. Utilize the App Inventor environment to open, update, and test an app.
2. Identify the Designer and Blocks Editor components in the App Inventor environment.
3. Modify code blocks and component properties to alter an app's appearance and functionality.
4. Test and troubleshoot a project.

Lesson Plan

Activity

🔽 Introduction to MIT App Inventor & Starting App Inventor

App Inventor is a block-based programming environment that enables users to create mobile applications for tablets and smartphones. Log in using your Google account.

📱MIT App Inventor Theory

🔽 Demonstration of App Inventor Programming Environment : Two major view - Designer and Blocks

1. Designer

Designer

📱MIT App Inventor Theory

1. Blocks : To switch to the Blocks Editor, click on the "Blocks" button located in the upper right corner of the screen. The Blocks Editor is comprised of two main parts:

Blocks Editor

📱MIT App Inventor Theory

🔽 Modifying the TwoButtonGame app

1. Download TwoButtonGame.aia from files above. An aia file is a project file created by the MIT App Inventor that teaches beginners to create Android and iOS applications.
2. Go to http://appinventor.mit.edu/ and click on "Create App" located at the top of the page. Log in using your Google account.

1. Ask students to import the TwoButtonGame.aia project and demonstrate how to do so. 1️⃣ Click the "Project" button and select "Import project (.aia) from my computer" from the drop-down menu. The "Import Project..." dialogue box will appear. 2️⃣ Click the "Choose file" button and select the specific .aia file from the source folder in the "Open" dialogue box. 3️⃣ Click the "open" button and then the "OK" button in the "Import Project..." dialogue box.

1. Let’s run the App

3.1. Designer View

• To get started, download the MIT App Inventor application from the Google Play or App Store on your smartphone or tablet. Run the MIT AI2 Companion app. Click the blue scan QR Code button.

• Under the Connect menu, choose AI Companion. Scan the QR code on your tablet or smartphone.

• Make sure you are in the Designer window by clicking on the Designer button at the top right of the screen.

• Explain Viewer and Components.

• Click on the LeftButton in the Components panel and change the properties as follows: BackgroundColor: choose any color you like, Shape: rounded. Then, change the RightButton in the same way.

• Make any other changes that you want. For instance, how can you enlarge the ResetButton? How can you modify the shapes and colors of buttons?
• Look at the app on your smartphone or tablet. Notice how the app changes when you make a change in App Inventor.

3.2 Blocks View

• Click the Blocks button and go to the Blocks Editor. You program your application to do certain actions using codes. In the App Inventor, they are represented by code blocks.

• In case of using multiple Screen components, each one of them has its own code, which is created in its Viewer and can use only its contained components. Select a component(Screen or one contained in Screen in this case) to find its code blocks

  1️⃣ Event handler: An event handler will execute the codes placed in the do part (or socket) of its block when a certain event  occurs in the component. The event is specified in the **when** part of the handler.
  

   2️⃣ Property setter(the dark-green "set **ComponentName. Property**" blocks)

  3️⃣ Built-in: code blocks that does not belong to a component, e.g.math. operation

• Let’s try : In the LeftButton.Click and RightButton.Click blocks, change the number to any number other than 1.

1. Auto-saving function: The App Inventor saves your project periodically. It is safer to save the project manually using the menu command Projects » Save project or Projects » Save project as

1. Debugging: Ask students to test their app using the MIT AI2 Companion app. Remind students that it is important to regularly and frequently test and debug their apps. A block has a red triangle icon if it has an error or a yellow triangle icon if it has a warning (after clicking the button “Show Warning”). Clicking the icon shows the warning or error message. Debug all the warnings and errors!

• Demonstrate how to use MIT AI2 Companion for immediate testing and debugging.

  1️⃣ Click on the "Connect" menu and then select "AI Companion".

Open the MIT AI2 Companion on the device and click the blue button to scan the QR code that appears on the computer.

2️⃣ Or Select “Refresh Companion Screen or Reset Connection.

Closing

• Review Two Button Game by solving assessment problems together.

Answer: A. Designer

B. Component