Syafirul Ramli's ;).

The Empire of Syafirul Ramli ;).

My first Android App ;).

with one comment

It’s taken me a while to find the time to really explore Google App Inventor, Google’s software that allows non-programmers to easily create personal applications and explore programming concepts using their Android devices. As it turns out, I needn’t have worried about “finding the time” — It’s remarkably fast and easy, but provides important insights into the inner workings of Android for anyone just getting started. As an educational tool, it’s a must for introductory programming courses. Here’s a walk through of the experience, as well as a gallery from the process.

First, though, for anyone unfamiliar with App Inventor, here is a brief YouTube clip showing how one of the example applications was created:

App Inventor is fairly well documented with examples and tutorials, help files, and a community forum (in the form of a Google Group). It runs on Windows, Linux, and Mac OS X and only requires Java and an Android device. I used the instructions to set up my computer and phone, and then just jumped in. Could I figure out how to create a working Android app without the manual, tutorials, etc? Only one way to find out.

My first goal was to create a simple app that would let me choose which of my favorite ZDNet blogs I wanted to launch. I chose a basic list picker (the moral equivalent of a drop down in Android) and got to work.

App Inventor really has three components. The first is the website appinventor.googlelabs.com, where the actual design and distribution of the app takes place. This is all hosted on Google’s cloud, so App Inventor documentation is readily accessible and the apps themselves can be easily downloaded to an Android phone by simply scanning a barcode that is generated and hosted there as well.

The second is a Java application that talks to the App Inventor site and to your connected phone. The application is called the “Blocks Editor” and (according to Google),

uses the Open Blocks Java library for creating visual blocks programming languages. Open Blocks is distributed by the Massachusetts Institute of Technology’s Scheller Teacher Education Program and…is closely related to the Scratch programming language, a project of the MIT Media Laboratory’s Lifelong Kindergarten Group.

The third part is the phone itself, running App Inventor software when connected to a computer with an active Blocks Editor session. The interplay is remarkably slick: as you design the basic layout (buttons, labels, list pickers, etc.) of the App in a phone-sized window on your web browser, corresponding objects appear in the Blocks Editor and the design appears in real time on your phone as well. Whereas the App Inventor site handles the layout and distribution of the app, the Blocks Editor handles the logic and programming.

Building the app wasn’t hard in terms of layout or figuring out the interface for the Blocks Editor. Users of Scratch should feel right at home. However, actually knowing which objects to use, reference, and manipulate to make things happen had me heading for the examples and online references. My goal was to launch a web browser, passing the URLs of the individual blogs that I’d picked to the browser. There’s an ActivityStarter object that the AppInventor suggested I use via a tool tip and it was easy to set the attributes to match the web page I wanted to open, but it wasn’t clear how actually launch a web browser.

Fortunately, the examples are extensive and this page got me where I needed to go. It turns out that I only needed to set the Action attribute to android.intent.action.VIEW and pass the URL using the DataUri attribute.

The Blocks Editor allows you to cut, copy, and paste blocks of code (standard keyboard shortcuts only), making such things as nested if statements quite easy once the initial logic has been worked out. The editor has built-in objects, methods, and attributes that leverage most of the features users might need and supports if-then-else logic, choose statements, text operations, etc.

If you’d like to play with my first simple App, scan this QR code with your Android phone:

. It will prompt you to download an apk file, which you can then use with the Google App Installer to fire it up.

Thinking this app was just a little too easy, I decided to get a bit fancier and try my hand at Twitter integration. It wasn’t until I’d coded most of a new app that I realized Twitter’s recent OAuth conversion had broken Twitter authentication in the App Inventor. However, you can download the app I created by scanning the code to the left with your Android phone. The idea was to be able to use this app in a classroom, replacing interactive response systems with a simple app and a Twitter feed. Now if Google would just include support for OAuth in App Inventor, it would actually work.

Minor issues aside, this is a powerful tool. It makes it equally easy to create new bodily function apps and really useful applications on the Android platform. It’s also the perfect introduction to object-oriented programming, opening the door to much more sophisticated applications on Android and elsewhere. If you haven’t already, check out the gallery from my App Inventor adventures.

Who said? Christopher Dawson said😉.

Written by Syafirul Ramli>>

September 28, 2010 at 10:35 AM

Posted in Android, Google, Mobile OS

One Response

Subscribe to comments with RSS.

  1. Hi, nice description of your experience. Would you please share with me/us the code for your first apk above. I am trying to launch the phone browser to a URL but could find how to do that.

    Thanks.
    rmnattas at gmail.com

    rmnattas

    October 29, 2010 at 12:48 PM


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: