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:

Screen Shot 2014-11-02 at 8.03.16 PM

  • 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.

Screen Shot 2014-11-02 at 8.10.41 PM

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:

Screen Shot 2014-11-02 at 8.12.36 PM

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:

Screen Shot 2014-11-02 at 8.14.12 PM

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:

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:

Screenshot_2014-11-02-20-26-49

After invoking the app and scanning a bar code:

Screenshot_2014-11-02-20-27-28

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.

 

4 thoughts on “Tutorial: Creating a Barcode Scanner App With PhoneGap

  1. Hello Support,

    Just tested this tutorial but the camera does not open when I click the scan button on the iPhone.
    Did I miss something?
    How can we investigate?

    Another question is which phonegap plugin do you use for this service?

    Kind regards,
    Mario

  2. Hello Max,

    Just tested this tutorial but my iPhone does not open the camera when clicking the scan button.
    How do we investigate?

    Also: Which phonegap plugin do you use with this service?

    Kind regards,
    Mario

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s