David Briddock gets into Google’s App Inventor
App Inventor 2 (AI2) is a platform that aims to open up Android app creation to everyone. All you’ll need to begin is a Windows, Mac or Linux PC, a web browser and a Google account.
Ideally you’ll also have an Android smartphone or tablet, but even this isn’t essential to get started.
What We’ll Learn
As this will be our first app, we’ll explore the Designer View and Blocks View in detail. The lessons we learn here can be applied to all future articles in this series. We won’t be starting with the traditional ‘Hello World’ approach, but instead construct a useful yet simple-to-build timer app. Along the way we’ll be add some basic User Interface screen components alongside a clock timer component from the Sensors group.
So; let’s get started!
Starting AI2
In your browser navigate to the AI2 home page (ai2.appinventor.mit.edu) and sign in with your Google account.
As this is the first time we’ve used AI2 the project page appears. Here we can create a new project with the Start New Project button and give the it a suitable name, let’s say ‘MMTimer’.
Next we see the to the main AI2 creation page. You’ll notice we’re automatically placed into the Designer View mode, which is where app building really starts.
Screen
Look closely at the Viewer and Components panels. Notice there’s already a screen component called ‘Screen1’. It’s into this screen that we’ll be dropping the other Timer app components.
Over to the right is the Properties panel for the currently selected component – namely Screen1. In this panel ensure the AppName is set to ‘MMTimer’, then set the Title to ‘MM Timer’ and the BackgroundColor to Black. Now for the screen components.
Visual Components
The component Palette panel is over to the left. The individual components are arranged in groups, namely User Interface, Layout, Media and so on. To discover more about a specific block click on the small circled question mark beside each one.
Open the group called User Interface. Drag and drop the Label component over to the Screen1 area in the Viewer panel. The label appears in the top left of the Screen1 area. Also notice that Label1 has appeared underneath Screen1 in the Components panel.
Non-visual Components
We’ll also need a clock for our timer. From the Sensor group grab a Clock component then drag and drop it over to the Screen1 area.
Once again we see a Clock1 component has been added underneath Screen1 in the Components panel. This time it’s also added to the Non-visible Components area underneath the screen.
Component Properties
First select the Label1 component in the Components panel. Then click the Rename button (it’s at the bottom of this panel) and set the name to ‘TimerLabel’.
Now let’s set some label properties: In the Properties panel change the BackgroundColor to Black (click on the small square or colour name) and the TextColor to Yellow. Then increase the FontSize to ‘96.0’ and set the Text to ‘0’. Finally, set both the Height and Width to the ‘Fill parent...’ option from the popup options list.
Now we shall turn our attention to the clock. The first step is to select Clock1 in the Components panel, click the Rename button and change the name to ‘TimerClock’. You’ll notice the TimerInterval is already set to 1000ms which, conveniently for us, is equal to one second. So we don’t need to change any of the timer property values.
App Code
Now it’s time to actually start coding. You’ll need to click on the Blocks View button, which is next to the Designer View button on the green menu bar. The first task will be to initialise the second count to zero; so to do this, in the lefthand Blocks panel, open the Variables group then grab a brown ‘initialise global variable’ block and Drag it into the Viewer panel coding area. As this variable holds our seconds value, you should probably change the variable’s text from the default ‘name’ to ‘secs’.
Now to set its value. Grab a blue number value block from the Math group and snap it onto the end of the ‘initialise global variable’ block. We’ll leave the value as zero.
Timer Ticks
We going to need some code to update the label we’ve set up when each timer ‘tick’ event occurs, which we’ve established happens every second. To do this, look over in the Blocks panel click on the TimerClock component, then grab a brown ‘when TimerClock.Timer’ block and drop it onto the coding area.
We need to fill in the empty inner space. First grab an orange ‘set global secs’ block from the Variables group. Snap it into the specially shaped slot inside the brown ‘when TimerClock. Timer’ block.
To set the value of this orange block we need to do some math. So grab a blue ‘+’ block from the Math group and snap it onto the end of the orange ‘set’ block. You’ll notice that there are two empty spaces; the first space is filled with an orange ‘get secs’ block from the Variable group, the second is filled with a blue Math number block. Click the default zero value and change it to one to increase ‘global secs’ by one on every ‘tick’.
Label Update
Finally our label needs to show that total number of seconds. Click on the TimerLabel component, grab a dark green ‘set TimerLabel.text’ block and snap it just below the orange ‘set global secs’ block. Fill in the missing value with an orange ‘get secs’ block from the Variable group.
Now ensure the warning and error counts in the bottom left corner are both zero then carefully check your code against the Blocks View image.
It’s all much easier than it sounds in words and a fun way to create code.
App Testing
To test our app we’ll use the Connect menu’s convenient Emulator option. If you haven’t done this already, first download MIT’s aiStarter app and install it onto your PC (goo.gl/zPfazK).
The emulator takes a while to start up, so be patient, but eventually you’ll see a virtual Android phone running the timer app you’ve just created.
What you should see is an incrementing second count displayed on the screen. If you don’t, something’s wrong and you’ll need to carefully check the coding blocks and data values, fixing any mistakes you find along the way. Then use the Connect menu’s Reset Connection option before starting the Emulator again.
Going Further
Next time we’ll extend this timer app with some useful new components and block code functionality.
We’ll also explore a superior app testing method, and discover how to load our apps onto a real Android smartphone or tablet.