X.commerce Android Apps the Easy Way, Part 1: Understanding App Inventor

I am on a never ending quest to teach others about new ways to make commerce and mobile development simpler and faster. When I find something that can potentially enable both in one fell swoop, I get very excited!

What’s caught my attention lately? Google’s App Inventor for Android (@AppInv) and X.commerce web APIs allow you to build commerce apps quickly and visually using web based communication.

This article is the first in a series in which I’ll examine how to use App Inventor along with eBay’s web APIs to build Android commerce apps. In this installment, I’ll introduce App Inventor. I’ll discuss what it is, how to setup the development software and start using it, how to share App Inventor built projects and apps, and some of the limitations of this approach versus developing Android apps in Java using the Android SDK.

Future articles will look at how to access RESTful web APIs from App Inventor and what you can do with the eBay APIs. The final article in this series will build upon all the previous ones to walk you through creating an example Android eBay commerce app built using App Inventor.

What is App Inventor?

If you follow technology news, you know that Android has been a shining star of mobile success for Google. We’ve written quite a bit about Android here in the DevZone, and for good reason: It provides an open, flexible, widely adopted mobile application platform that enables you to build just about any kind of app you can dream up. But in order to develop for Android and use the Android SDK, one needs to be relatively facile with Java programming.

Some smart folks at Google Labs thought it would be interesting to try removing that Java programming restriction. Enter App Inventor.

As Google describes it on their “What is App Inventor” page:

App Inventor lets you develop applications for Android phones using a web browser and either a connected phone or emulator. The App Inventor servers store your work and help you keep track of your projects.

The key pieces of software that you use to build your app include:

• App Inventor Designer – used to select components for your application
• App Inventor Blocks Editor – once you’ve select components in the designer, you specify their behavior by assembling them together here
• Android emulator – used to execute your applications; alternatively, you may connect a real Android-based phone to your system and test deploy your apps to it (recommended if you have an Android handset)

We’ll step through how to set up and use the App Inventor software later in this article. To get a feel at this point for how App Inventor works, I’d encourage you to watch the App Inventor introductory video below (click here to jump to the video on YouTube if the embed below isn’t working for you).

Hopefully you now have a feel for what App Inventor is and the basics of how to use it. It’s time to get it installed and give it a test drive!

Setting up the software

You should follow the provided App Inventor setup instructions to get up and running quickly. Click here to access the instructions.

Important points:

• You need a Mac, Windows, or Linux system (detailed specs in the setup instructions linked to above)
• You need a relatively recent version of either the Firefox, Safari, Chrome, or Internet Explorer browser (again details in the setup instructions)
• You need to have Java 6 installed and properly configured to be able to run Java Web Start applications

You should test your installation by loading the App Inventor Java test page at: http://appinventor.googlelabs.com/ode/JWSTest/AppInvJWSTest.html

Assuming the first part of the test (browser configuration check) passes, you should then click the orange Java icon “Launch” button to test launch a simple provided Java Web Start application (in this case, a Notepad). If all goes well the Notepad will launch and you should see something like this:

Once you have passed the browser and Java configuration stages, you still need to install App Inventor Setup into your development system. This contains the Android emulator and drivers for various Android hardware (the designer runs in the browser and the block editor via Java Web Start). Download and install the setup program via the instructions appropriate to your operating system:

• Mac OS X
• GNU/Linux
• Windows

Getting started

After installing the setup software, you are ready to do one of two things: Either setup your Android phone for development or build your first app with the emulator.

Although there are certainly some development and testing advantages to using a real phone, and I would recommend you do so for serious application development, we’ll stick with the emulator for consistency’s sake for the rest of this article. So, click here to start working through building a simple app in the emulator.

Google has provided very detailed instructions for you to follow as you build your first App Inventor app. The instructions being here: http://appinventor.googlelabs.com/learn/setup/hellopurr/hellopurremulatorpart1.html

Rather than reinvent the wheel, I thought I’d just call out the major steps and let you get all the details you need from their instruction page and the previously embedded example video. The main things you need to do to get a new project underway are:

1. Navigate to http://appinventor.googlelabs.com/ (this will launch App Inventor in your browser)
2. Create a new project
3. Drag and drop a “Button” component into the viewer (Screen1)
4. Upload an image for your button (I chose to use my ugly mug as shown below) and remove the unwanted button text as directed in the directions linked to above.
5. Launch the editor by clicking “Open the Blocks Editor” in the designer browser window (this will launch a Java Web Start download and may require you to approve several steps via popup windows before the blocks editor launches in a separate window)
6. Launch the emulator by clicking “New emulator” in the editor window (as noted in the screenshot below, this may take several minutes before it’s ready)

Once everything is launched and you’ve swiped right to unlock the emulator screen if necessary, click “Connect to device” in the blocks editor window and select your emulator instance; more magic will happen (this may also take awhile) and then, presto, you should see your app including the button image you specified running in the emulator.

Now you are ready to complete your application. Click here to work through the second part of the provided example including adding some text with a “Label” component and a “Sound” which you wire up to play when a user clicks on your image button.

The only thing left to do now is to make your app available for others to use. You do this by selecting “Package for Phone”. From there you can choose to:

• Show Barcode – provides a QR code that Android users can scan to install your app
• Download to this Computer – lets you save a local Android Package (.apk) containing your app which you can then use or redistribute to others as you see fit
• Download to Connected Phone – lets you deploy immediately to any phone you’ve been developing with

And that’s about all there is to building a simple Android app using App Inventor!

Click here to read the complete post on the PayPal X Developer Network including a discussion of limitations of using App Inventor versus the full Android SDK.