Tutorial: Creating a Barcode Scanner App With PhoneGap


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:


After invoking the app and scanning a bar code:



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.



  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,

  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,

  3. Hello Max,

    I am excited to begin using Appery.io to create just this kind of barcode scanning app. However, after following the steps above (as well as using the jQuery Mobile App instructions at https://docs.appery.io/v2.4.0/docs/cordova-jquerymobile-barcode-scanner and the Ionic App instructions at https://docs.appery.io/docs/cordova-ionic-barcode-scanner and even the database sample app instructions at https://docs.appery.io/docs/samples-barcode-scanner-database-app), all of them fail to open the Camera as Mario says above. I am using the Appery.io Tester App (https://docs.appery.io/docs/apperyio-tester-app) on the App Store. I am testing on an iPhone 8 and an iPad 9.7-Inch 6th Gen (Wi-Fi/Cellular) 32. Both are running IOS 11.4. I am also using an iPhone 6S Running IOS 9. The result is the same on all. It never tries to launch the camera and never even asks for permission to use the camera. I noticed that all of the tutorials, including this one, are quite old. Has something changed in the latest versions that I need to know about?

    1. Hi Daniel – I don’t know what could be the issue. It’s been some time since I used the Barcode scanner or Camera plug-ins (I left Appery.io in May 2017). Your best option is to reach out to Appery.io support. I’m sure this is something simple and they will figure it out fast.

Leave a Comment

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.