App Inventor sample project: Barcode Scanner

Up until now, I've created all Android apps in Eclipse with Java and XML code. While I will continue to do that, Google has released a very promising new web tool called App Inventor. This tool allows you to create simple Android apps in the browser all while requiring the developer to have exactly zero (0) knowledge of Java or XML. I've played around with the tool a bit and found that it is indeed easy and intuitive to create simple, 1-screen apps (as of now, it doesn't allow multiple screen apps so that really limits the complexity). For anything even remotely advanced, you'll still have to use the old methods (writing code).

In order to test it out, I decided to build an app--after all, that's the best way to learn, right? I wanted something simple, yet at least a little interesting so I went with a barcode scanner. I know, the app already exists, but this would be fun to see what I could accomplish in about 30 minutes. The app scans a barcode or QRcode and either searches Google with the result or opens the URL in a browser (if the QRCode is a URL, obviously).

So away we go...


1. Click on My Projects, then create a new project. I called mine AndroidScanner.

2. You will now see the layout screen with Palette, Viewer, Components, Media and Properties boxes. Adding components is easy by dragging objects from the Palette box onto the Viewer.

3. Drag 5 objects from the Palette onto the Viewer:

• a Button to launch the scanner [rename to "scanButton"]
• a Label to display the scan result [rename to "resultLabel"]
• another Button to launch the browser [rename to "resultActionButton"]
• an ActivityStarter (non-visible)
• and finally the BarcodeScanner (non-visible)

Your screen should look like this:


4. Now connect your Android phone via usb. On your phone, go to Settings-->Applications-->Development. Enable USB debugging and Stay awake.

5. On the layout screen click the button to Open the Blocks Editor. This will open a Java applet that contains all of the logic blocks/action handlers and interfaces with your phone.

6. For this app, we're first going to need 2 variables: buttonAction (value equals 2 if url is scanned, 1 otherwise) and barcodeResult (value is the resulting string from the barcode scan). To get variables in Blocks Editor, go to Built-In, then Definition and drag "def variable" onto the screen. Set buttonAction as type number by attaching the number block from Built-In-->Math. Likewise, set barcodeResult as type text by attaching the text block from Built-In-->Text.


7. The rest of the code blocks respond to actions. The first of these is the when scanButton.Click do action. This is simply a call to start the barcode scanner. This block is found under My Blocks-->scanButton.


8. The next action to handle is the barcode scanner result. So grab the when BarcodeScanner1.AfterScan do and place it on the screen. Here, I first check to see if the result is a number. If so, I have a good idea it's a standard barcode and so I set the text of the resultActionButton to "Search Google for product" and set the variable buttonAction to 1. If the result is not a number, I then check to see if it is a URL by looking for "http://". If it is a URL, I set the text of resultActionButton to "Visit URL in browser" and set the variable buttonAction to 2. Finally, if the result is not a number or URL, I set the text of resultActionButton to a generic "Search Google for result" and set the variable buttonAction to 1. After all of the conditional statements, I set the barcodeResult variable to the result of the scan so I can use it later.


9. The final action to handle is the resultActionButton handler. So grab the when resultActionButton.Click do and place it on the screen. Here I determine if I should search Google with the result or open the browser and load a URL. I accomplish this by checking the buttonAction variable. If it's 1, search Google, otherwise, open the URL in the browser.


And there ya have it. A simple, functioning barcode scanner app.
Go ahead and test it out by creating your own QRCodes with the QR Code Generator from ZXing. You can scan the codes directly from your computer screen.
Hope you enjoy!

Download this application onto your phone by scanning this code: