Welcome!

APIs for the Internet of Things

Max Katz

Subscribe to Max Katz: eMailAlertsEmail Alerts
Get Max Katz via: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Blog Feed Post

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.

 


Read the original blog entry...

More Stories By Max Katz

Max Katz heads Developer Relations for Appery.io, a cloud-based mobile app platform. He loves trying out new and cool REST APIs in mobile apps. Max is the author of two books “Practical RichFaces” (Apress 2008, 2011), DZone MVB (Most Valuable Blogger), and is a frequent speaker at developer conferences. You can find out what Max is up to on his blog: http://maxkatz.org and Twitter: @maxkatz.