1
1. Introducing App Inventor 2 Hello. This time let’s learn how to make a smartphone app. There are two common ways: using the IDE called Eclipse and using the App Inventor 2 developed by the MIT Media Lab. For my last school project, I made a game by using the Scratch. So for the following years, I decided to learn about the App Inventor 2 that uses the same method of building blocks as Scratch. There are two screens in AI2. First, on the “Designer” screen, you can define the format, effect, and connection shown on the smartphone, such as buttons, clock, texts, and Internet and PC resources.
Secondly, on the “Blocks” screen, you can build Blocks like on the Scratch and do programming so that the app performs its actual operations.
2
The advantages of AI2 are that you can instantly check the newly developed app on smart phones. Also the Emulator that enables you to check the app through the computer screen is very fast and convenient. You can develop the app in one of the two environments: on-line environment that connects to the remote server and off-line environment that is possible only through NUC with virtual server setting. Let’s start from the on-line environment.
3
2. Looking into the “Designer” screen Go to “ai.appinventor.mit.edu” on the Internet. You have to use the ‘Chrome Browser.’ You need a Google account, too.
When you type in the name of the “New Project” on the first screen of AI2, the “Designer” screen will appear. On the upper left hand side of the screen, find and click “Project” and go to “My Projects”. Your projects will be saved here through the remote server. Now, click your Project Name, and go back to the “Designer” screen.
The “Designer” screen is divided into 4 sections. Using “Viewer” in the middle, you can arrange each Component based on the associated smartphone screen. Each component in the “Palette” section is categorized. On the default screen, you will see the components of “User Interface”. Click different categories on the lower ones, and check the components that belong to each category. If you want to connect these components with resources in computer, you can use the “Properties” section on the right. These components will appear on the smartphone, as they should be. 4
3. Making a Simple App screen in “Designer” Now, let’s make a very simple app. Make three buttons and when you click on each button, the corresponding color will fill the screen. You can restore it to the original state if you press the 4th button. Drag a ‘Button’ component in the “User Interface” three times to the Viewer section. Programming the function of the buttons will be done on the “Blocks” screen later on, but you should work on the appearance and arrangement on the “Designer” screen. Use the “Components” and “Properties” sections to change each button’s text, color, and name to something meaningful.
Now let’s arrange the vertically arranged buttons horizontally. In the “Layout” category of the “Palette” section, bring the “HorizontalArrangement” component to the “Viewer” section. Select ‘Width’ of the ‘Properties’ section to ‘Fill parent’,
5
and bring in each button. Now each button has become a Subcomponent. The outline in the 'Viewer' section does not appear on the smartphone, so don’t worry about it. Bring the ‘Canvas’ component of the ‘Drawing and Animation’ category in the ‘Palette’ section to the ‘Viewer’ section in order to create a space with changing colors. Select ‘Width’ of the ‘Properties’ section to ‘Fill parent’ and set ‘Height’ as 300 pixels.
Underneath, let’s make a button that wipes the Canvas’ color.
6
4. Programming at “Blocks” screen Now, let’s set the functions for each component so that it can do its operations. It is similar to programming by building blocks on Scratch. Click on “Blocks” on the upper right hand of AI2 screen.
Click on “Blue_Button” of the “Blocks” section on the left of the new screen and select the ‘when Blue_Button.Click’ block. Apply the same method for Red, Green, and Wipe buttons.
Click on “Canvas_Coloring” of the “Blocks” section. Find a block called ‘set Canvas_Coloring. BackgroundColor to’ and place it in the ‘when Blue_Button.Click’ block. Select ‘Duplicate’ three times after right-clicking on the new block. Move the duplicated block to the corresponding location.
7
To fill the socket of the blocks, find the “Built-in” category of the “Blocks” section and drag the corresponding ‘Colors’ blocks. Put them into the sockets. Now you have completed the first smartphone app.
Just in case, save the first app on NUC. Click on ‘My projects’ on the upper right hand of the screen and check the box next to the app name. Select ‘Export selected project(.aia) to my computer’ in the ‘Project’ menu on the upper left hand of the AI2 screen.
Click on the arrow on the bottom left corner and check where it is saved through ‘Show in folder’. Save the app in the relevant directory. Similarly, when you want to open the app, select ‘Import selected project(.aia) from my computer’ in the “Project” menu. 8