Tutorial: Creating a Barcode Scanner App With PhoneGap

Introduction

This short tutorial shows how to build a barcode scanner app with Apache Cordova (PhoneGap) using Appery.io cloud development platform.

The tutorial has the following steps:

1. Register for Appery.io account
2. Create a new app
3. Build the app UI
4. Add Barcode scanner service
5. Binding the service to the page
6. Testing the app

Register for Appery.io account

If you don’t have an Appery.io account, please sign up for the Starter (free) plan.  Sign up should take 1-2 minutes.

Create a new app

Once you have an account (or have signed in if you have an existing account), click Create new app button to create a new app. Enter app name and click Create. Every app that you create comes bundled with Apache Cordova and the Barcode scanner plugin. This means you can invoke any Cordova API right way.

Building the app UI

Using the drag and drop editor, build the app UI:

• The button will invoke the Barcode scanner
• The three labels below the button:
  • First label will display the value scanned
  • Second label will display the type of the code scanned
  • Third label will display true or false. True means the scan has been cancelled by the user.

Adding Barcode scanner service

To add the Barcode scanner service, go to Create New > Service > Barcode, click Create Service button. The service will now be listed under Services folder.

Binding the service to the page

First we need to add the service to the page. Switch to DATA view. For Data source select Device > BarcodeService, click Add. The service will be added to the page:

The service doesn’t require any input (Before send) mapping.

For output mapping (Success) click the Mapping button. Using drag and drop create the following mapping:

Click Save and return to save all changes.

The last step is to invoke the service. Go back to Design view. Select the button and open the Events tab. For Action, select Invoke Service > mobilebarcode1.  Click Save.

Testing the app

As you built an app that uses a native API, the app has to be tested on the device. Appery.io provides a special Mobile Tester app that allows you to test the app without installing it on the device. This is very handy as you don’t need to install the app to test after every small update during development.

The tester app is available for Android and iOS:

• iOS
• Android

Once you download and install the app sign in with your Appery.io username and password. You will see a list of all your apps:

After invoking the app and scanning a bar code:

Summary

Using the Appery.io cloud development platform to create hybrid mobile apps is fast and easy. If you want to learn more, head to our Dev Center for many other tutorial or check out our YouTube channel.