Overview
App Inventor supports scanning of product identification “bar codes” and QR codes. Bar codes are typically found on consumer product packaging. QR codes are used for web addresses (so you can scan the QR code and go directly to the web address), part and product inventory tracking, and to deliver short messages.
In this tutorial, we create a simple App Inventor app to scan bar and QR codes.
Update: José Luis Núñez provides his own tutorial (in Spanish) for a bar code scanning app to check seating in a theater (written in App Inventor). Watch it on Youtube here: Curso de App Inventor 2 (José Luis Núñez)
User Interface
Our App Inventor app has a simple user interface – a single button to scan either a bar or QR code. When pressed, the app activates the camera to scan the code and then returns a result value.
If the code is a numeric bar code value, the app displays a web page of information about the item corresponding to the bar code. If the returned code contains a web address, then that web address is displayed on screen. Here is an example from scanning the UPC code on a package of tea:
In the next example, a QR code containing http://appinventor.mit.edu is scanned:
And here is the result:
Designer View
Drag a WebViewer component from the Palette’s User Interface section, and drag a BarCodeScanner component from the Sensor’s section. The WebViewer is the “earth” icon in this screen, and the BarCodeScanner is an invisible component, below the canvas area.
Two labels are used – one to display the text “Result:” and the other to display the returned code.
Blocks Code
To activate the BarCodeScanner, we call the DoScan method:
The above activates the camera and displays a view on screen (in Landscape mode). Once a bar code or QR code is successfully scanned, the camera is automatically turned off and an AfterScan event is generated.
The AfterScan event has one parameter named result; this contains the converted scan code – a numeric value for a bar code or an http:// URL for a web address (anything else is displayed in the lblBarCodeResult label, on screen).
Creating QR Codes
To create your own QR Code images use any of the QR code generators available online – just search for “Create QR Code free” – I used http://www.qrstuff.com/
Download Source
Right Click (or Ctrl-Click on Mac OS X) and choose “Save as” (or similar wording): BarCode_Scanner.aia
E-Books and Printed Books
If you find these tutorials helpful (I hope you do!) please take a look at my books on App Inventor. To learn more about the books and where to get them (they are inexpensive) please see my App Inventor Books page.
- App Inventor 2 Introduction (Volume 1 e-book)
Step-by-step guide to easy Android programming
- App Inventor 2 Advanced Concepts (Volume 2 e-book)
Step-by-step guide to Advanced features including TinyDB
- App Inventor 2 Databases and Files (Volume 3 e-book)
Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
- App Inventor 2 Graphics, Animation and Charts (Volume 4 e-book and printed book)
Step-by-step guide to graphics, animation and charts
Thank you for visiting! — Ed
