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

API Changes (11.15.2015)

BarcodeScanner services created before these changes may not work properly. To solve this problem, the Barcode.js custom JavaScript should be replaced by the new content (see the attached file).

Introduction

This tutorial shows how to create an AngularJS app that uses the Barcode_scan service.

The app will look like:

Before you begin

Tutorial level: intermediate.

Prerequisites: an Appery.io account.

Apache Cordova (PhoneGap)

Apache Cordova (PhoneGap) is automatically included when you create a new project in Appery.io. The Barcode_scan component used in Appery.io is the cross-platform BarcodeScanner for Cordova / PhoneGapfrom.

To learn more about the component, any other settings or options, please see the PhoneGap barcodescanner-plugin page.

Creating the app

Design

1. Open your Appery.io Bootstrap & AngularJS project or create a new one. You will get two default pages: index and Screen1.

2. Go to Screen1 and create the following UI consisting of:

  • the Button component. Configure its Text to scan and set ng-click to scan().
  • the Link component. Set its Href and Text properties as {{link}} and Target = _blank.

This is how the UI should look like:

If you are new to using Bootstrap & AngularJS components, read here.

Now, let’s create services and variables and bind them with UI components.

Scope

1. First, go to SCOPE and add a variable: link, Type = String.

2. Then, to add a BarcodeScanner plugin for Android, perform: Project > CREATE NEW > From Plug-in.

3. In the new window, select Apperyio Barcode Service and click “Import selected plugins”.

4. In the Project view, a related service (Barcode_scan) and a JavaScript (Barcode) file appear.

After a native service has been added to the app, it can be called. Invoking a native service is very similar to invoking a REST service.

5.To call the added service, go to the SCOPE view of the Screen1 page, add a new function: scan, and click “Edit”, opening the function editor.

6. Next, use the snippet Invoke service: click “Invoke service”, delete the text service_name in the code and click <CTRL> + <SPACE> to select Barcode_Scan.

Instead of invoking services in the code editor with subsequent auto completing, you can use a drag and drop feature to invoke services. Read here to learn how.

7. Then, open the code editor and add the following to the code:

The result is like the following:

The encode() method isn’t realized with Appery.io, but, if needed, it can be added manually. Mind, that it works for Android devices only.

Testing the app

Since we’re invoking a native component, this app needs to be tested as a hybrid app, or installed on the device.

Android

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.

  1. Build the Android binary and install it your device. When the build is completed, you’ll 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

  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.
  2. Build the app and install it on your device.