Thursday, May 5, 2011

App Inventor for Android

Note: App Inventor for Android is a discontinued Google product. Therefore, this blog post is obsolete. However, I will leave it posted here for the curious.

I’ve just started teaching myself how to write apps for Android based phones using Google’s App Inventor for Android. I created a simple clock application in order to experiment with App Inventor. The Layout workspace is web-based and runs in my browser. It looks like this (click image for a larger image):

Layout

The left column in the above window shows the Palette which is like Visual Studio’s Toolbox. It has multiple sections and as shown the Basic section is open. To the right of the Palette is the Viewer where you can drag and drop and arrange components from the Palette. To the right of the Viewer is a list of components in the Viewer. If you select a component you can see and modify its properties in the right-hand column of the Layout.

Clicking the button labeled Open the Blocks Editor launches the Java-based Blocks Editor which resides on my local drive. The Blocks Editor allows me to create variables, procedures, and event handlers for the components I added to the Layout Viewer.

In this simple Clock app, I use a Label to display the time and a clock component to generate the event that updates the label with the latest time. Although it is a simple matter to display the phone’s time and date properly formatted by the Clock component, I would get Universal Time. Since I want to display local time I have to adjust for the difference between EDT and UT. I also convert the Clock’s time from a 24 hour format to a 12 hour format with AM/PM suffix. Finally, I don’t want one minute past 12 to be displayed as “12:1” so I check the number of digits in the minutes variable and pad it with a “0” when necessary. The resulting code workspace looks like this (click image for a larger image):

Blocks Editor

I don’t have an Android phone so I tested the program on a smartphone Emulator. Here is what the Emulator displays:

Emulator

The App Inventor is easy to use and very intuitive. But if I am going to write a complex app I’ll probably want to use something like Eclipse with a Java plug-in and an Android SDK.

For a comparison I decided to write the exact same app in Visual Basic. Of course, I can’t run it on a phone. But here’s the code to run the very same app on a Windows PC. Compare it to the App Inventor Blocks Editor.
Public Class Form1
    Dim lastMin As Integer
   
Private Sub Form1_Load() Handles MyBase.Load
        lastMin = Now.Minute
        lblTime.Text = Now.ToShortTimeString
    End Sub

    Private Sub Timer1_Tick() Handles Timer1.Tick
        If lastMin <> Now.Minute Then
            lastMin = Now.Minute
            lblTime.Text = Now.ToShortTimeString
        End If
    End Sub
End Class


The VB Now object returns local time so no time zone conversion is required. The ToShortTimeString method returns a properly formatted time string, so no formatting is required. And the app looks like:



To be fair to App Inventor, I went back to the Blocks Editor and removed all the time formatting and put in a time formatting block. Now the Blocks Editor workspace looks like this (click image for a larger image):



On the Emulator the app looks like this:


Notice that the app now displays seconds which is not desirable. For one thing, the Clock event must be fired every second to update the seconds. That may consume more power from the phone’s battery if the app is running as a background task. However, the Blocks Editor workspace is greatly simplified. And it’s likely that an app will only need to know the time, not display the time, in which case the format is acceptable.
It might be possible to simplify further. I’ve only just started studying App Inventor. Plus, App Inventor is still evolving. It’s so new that I’m using a beta version.

No comments: