Friday, September 3, 2010

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:

21 comments:

  1. This will cause code monkeys everywhere to lose their jobs!

    ReplyDelete
  2. Step 7... is it possible to check if the Zxing scanner is installed using the ResolveActivity call? If so, could you explain or show an example?

    ReplyDelete
  3. Quick question - will this work with App Inventor without a droid device attached. Just using the Droid emulator that App Inventor comes with

    I keep getting this error and i can't figure out if it's because App Inventor's emulator doesn't have zxing scanner support

    intent {act=google.com.zxing.client.android.scan

    ReplyDelete
  4. how can i set it after scan send me straight to google site instant of clicking on result

    ReplyDelete
  5. California Waterparks you need the Barcode Scanner app installed. I had the same problem - installed the app on my phone and it worked. Not sure how you would get around that on the emulator, though.

    ReplyDelete
  6. I think the reason it didn't work California Waterparks is that the emulator does not have anything for it to scan. So it is pointless to try it there, you would have to download it to phone to test it out.

    ReplyDelete
  7. The problem,

    intent {act=google.com.zxing.client.android.scan}

    =( in phone

    ReplyDelete
  8. This is great, my husband really wanted a barcode scanner for his android, but we thought the app would cost money. Does this program cost anything to use, or is it free? I would love to save a little money while getting something for my husband that he wants....

    ReplyDelete
  9. I followed all the above instructions exactly and then packaged and downloaded the app to my motorolla droid 2 cellphone. When I pressed the scan button, I got the following error: " No activity found to handle Intent{ act=com.google.zxing.client.android.SCAN}

    Please help me out ASAP!!
    My email id is jayneil.dalal@gmail.com

    ReplyDelete
  10. This app piggybacks off of another scanner app. Download and install the Barcode Scanner app by ZXing Team and the above code will work. https://market.android.com/details?id=com.google.zxing.client.android

    ReplyDelete
  11. Thank you for replying. But is there anyway I can package the Zxing app with the app that I am making , so that everything is bundled into only one .apk file..??

    ReplyDelete
  12. i have the same prob as JD. how to fix it? pls reply me ASAP. :(

    ReplyDelete
  13. i got a question... i want to use my own web service using tinywebdb... the problem is i don't know how to request & retrieve data... can you show me the works...???

    ReplyDelete
  14. When I try to scan then It displays " Error 1501 Your device does not have any scanning application installed " What could be the reason ????

    ReplyDelete
  15. This app of code bar scanner is very useful!Thank you for sharing:)

    ReplyDelete
  16. This is great, my husband really wanted a barcode scanner for his android, but we thought the app would cost money. Does this program cost anything to use, or is it free? I would love to save a little money while getting something for my husband that he wants....3g Technology

    ReplyDelete
  17. I was wondering whether the barcode scanner can scan all types of barcodes and not just QR barcodes?

    ReplyDelete
  18. When I try to scan then It displays " Error 1501 Your device does not have any scanning application installed " What could be the reason ????

    ReplyDelete
  19. I can use the bar code scanner but it does not work properly.

    Web based sales management

    ReplyDelete