If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

What are we going to build?

In this tutorial, we’ll build an app that starts the barcode scanner on button click. After the scan is complete, we’ll display the scan information.

Before you begin

Tutorial level: intermediate.

Note:  Please find an advanced tutorial with use of barcode scanner and Database via the link.

Apache Cordova (PhoneGap)

Apache Cordova (PhoneGap) is automatically included when you create a new project in Appery.io. The barcode scanner component used in Appery.io is based on this plugin.

Creating a new app

Create a new app in the Appery.io app builder. From the Apps page, enter an app name (use any name) and click “Create.” You’ll see a start page.

Creating the UI

The UI will be be simple:
UI

There is a Button, and three Labels below the button.

The Theme/Swatch used is: Pastel/B.

Note: To change your theme and swatch settings, you need to import the available default themes via plug-ins first: CREATE NEW > From Plug-in (or click “Add more Themes” from App settings > General), which will open a window with the list of available themes for importing. Select the theme(s) to import and click “Import selected plug-ins”:CatalogThemes

Then, in the builder, go to Project > App Settings. You’ll be able to change your theme and swatch via the drop-down menus.

Adding a barcode scanner service

To add the barcode scanner service:

1. From Projects view; CREATE NEW > Service > Barcode, and click “Create Service.” The service will be listed under the Services folder.

2. If you open the service, you’ll see that everything has been preconfigured:BarcodeService

Now we need to bind the service to the page.

Binding the barcode service

1. Open the DATA tab.

2. For datasource, select Device > BarcodeService > Add. The mobilebarcode1 service will be added to the page:BarcodeService1

3. The service has no Before send parameters defined, so, click “Mapping” for  Success event, and  you’ll see the following:SuccessMapping

4. Since we want to display the picture we just took, create the following mapping, and save:SuccessMapping1

Where:

text – is the text representation of the barcode data.
format – is the type of barcode detected.
cancelled – is whether or not the user cancelled the scan.

Launching the barcode scanner

  1. Open the DESIGN tab.
  2. Select the button, open the EVENTS tab, and add the following event:
    mobilebuttonX > Click > Invoke service > mobilebarcode1, and click “Save”.

Error handling

To handle scan errors, go to the DATA tab, select mobilebarcode1 for the component, and then select a fail event:FailEvent

Don’t forget to save.

Note: Learn more about error handling via the link.

Testing the app

Since we’re invoking a native component (barcode scanner), the app has to be tested as a hybrid app, or installed on the device. Testing won’t work in the browser.

The final app will look like:
Screenshot_2013-05-13-15-50-18

The example above shows the scanning of a QR code that returned a URL.

Once you get the value from the scan, you can save it in local storage and use it as an input to another API to get more information about the scan. For example, if you scanned a product barcode number, you could then invoke a service to get information about the product.

Android

Testing on Android is relatively simple, since you can install any app rather quickly on your device. Your options for testing:

  1. Use the Appery.io Mobile Tester app. It’s an app that allows you to launch any app created in Appery.io as a hybrid app. You can find it in the Google Play Store.
  2. Build the Android binary and install it your device. When the build is completed, you will see a QR code. Scanning the QR code will download the app to your phone. You can also email the app to your device.

iOS

iOS options:

  1. Build the app and install it on your device. 
  2. You have the option to run the Appery.io Mobile Tester for iOS. However, it requires building the app and installing it on your device.

More help resources

More help resources are links to the blog, our YouTube channel and other web sites.