From Zero to Mobile Inventor in 10 Minutes

More Beta software from Google

The paint is hardly dry on the Android platform — in fact, one could argue that Android may never be “done”, but rather it may be the poster-child for a continuously maturing and evolving software and hardware environment.

Considering the only thing constant with Android is innovation, it is not a big surprise that a team at Google has launched a new development environment for Android called App Inventor.

Just about everything with Google starts out as “beta” and “by invitation only”, so why should a new development platform for Android be any different?

App Inventor doesn’t easily fit into the usual boxes of we think of as a development platform.

App Inventor reminds me the most of the programing environment used for Lego Mindstorms called NXT-G, which is based on Labview technology from National Instruments. Personally, I’ve been trying to move away from the graphical stuff for Lego programming … uh, umm… what I meant to say is that my son is moving from NXT-G to some C based environments which are more compact and procedurally oriented. I personally dislike connecting the dots.

A tour

There are two main pieces to the AppInventor development platform. The first component is a browser-based tool which provides a somewhat WYSIWYG screen builder.

AppInventor browser based tool

This tool allows you to create an inventory of screens and widgets with which to work to construct an application graphically. It is actually superior in ease-of-use when compared to the Android Developer Tools plug-in for Eclipse, though the selection of available widgets is limited. Speaking of choices, here is a partial list of the available widgets which may be “drag-n-dropped” to a screen.

• Basic
• Button
• Canvas
• CheckBox
• Clock
• Image
• Label
• ListPicker
• etc.
• Media
• Camera
• ImagePicker
• Player
• Sound
• VideoPlayer
• Animation
• Social
• ContactPicker
• EmailPicker
• PhoneCall
• PhoneNumberPicker
• Texting
• Twitter
• Sensors
• AccelerometerSensor
• LocationSensor
• OrientationSensor
• And so on…

What is of particular interest in the App Inventor environment is that as you add an element to the screen within the tool, the screen of the phone is updated in real-time.

Coding, if we can call it that, is accomplished within the Android Blocks application. This is a native application which you install to your desktop or laptop computer. This is the piece which has the Lego feel to it.

The main screen is a clear workspace where coding logic blocks are placed. Blocks as they are known are selected from one of two available palettes.

Lego – like Blocks screen

The Built-in Blocks include things like strings, variables, math, List data structures, control logic and colors.

Built-In Blocks

The other palette contains “My Blocks”. For each element added to the GUI, there is a selectable entry, complete with “events” and “methods” available, depending on the element.

MyBlocks Blocks

For example, a TextBox has methods for changing its appearance, setting and getting text, etc.

A Twitter object on the other hand offers functionality for logging in to an account, setting status, following people, and more. The next image shows the available functionality for a TextToSpeech instance.

Text-To-Speech Block

To add some functionality related to a TextToSpeech component, first click on the TextToSpeech instance in the My Blocks pallete. This shows the available events: BeforeSpeaking and AfterSpeaking, a method or verb: Speak, and then some properties which may be set/get, etc.

The next image shows a block to initiate a login to Twitter when Button1 is clicked. Note how two “Text” blocks are connected to provide the user name and password.

Using the Twitter block

An event block, again from the Twitter instance in MyBlocks, allows code to run on a successful Twitter login. Once we know that we are logged in, we can attempt to update our “status” on Twitter by using the SetStatus block. Unfortunately my tests of the Twitter component failed to login. From what I have read on the user groups this is due to the fact that Twitter recently changed their authentication model. Looks like I’ll have to wait until the component is updated before I can release the world’s next Twitter client.

If you don’t like a block, just drag it to the hungry garbage can.

Remove a block

Once the application has been written and you are ready to share it with others, it must be packaged. To accomplish this we jump back over to the browser-based portion of the tool chain where we can select the “Package for Phone” drop down.

Prepare an application for distribution

This looks like a good start — and is ideally suited to non-professional developers. When the features get updated we’ll revisit this and see if we can get the Twitter functionality to work properly. Who knows, maybe they’ll even add a Facebook widget and we can qualify for a multi-million dollar matching grant or two?