What are we going to build?
In this tutorial, we’ll build an app that starts the barcode scanner on button click. After the scan is complete, we’ll display the scan information.
Before you begin
Tutorial level: intermediate.
Note: Please find an advanced tutorial with use of barcode scanner and Database via the link.
Apache Cordova (PhoneGap)
Apache Cordova (PhoneGap) is automatically included when you create a new project in Appery.io. The barcode scanner component used in Appery.io is based on this plugin.
Creating a new app
Create a new app in the Appery.io app builder. From the Apps page, enter an app name (use any name) and click “Create.” You’ll see a start page.
Creating the UI
There is a Button, and three Labels below the button.
The Theme/Swatch used is: Pastel/B.
Note: To change your theme and swatch settings, you need to import the available default themes via plug-ins first: CREATE NEW > From Plug-in (or click “Add more Themes” from App settings > General), which will open a window with the list of available themes for importing. Select the theme(s) to import and click “Import selected plug-ins”:
Then, in the builder, go to Project > App Settings. You’ll be able to change your theme and swatch via the drop-down menus.
Adding a barcode scanner service
To add the barcode scanner service:
1. From Projects view; CREATE NEW > Service > Barcode, and click “Create Service.” The service will be listed under the Services folder.
Now we need to bind the service to the page.
Binding the barcode service
1. Open the DATA tab.
text – is the text representation of the barcode data.
format – is the type of barcode detected.
cancelled – is whether or not the user cancelled the scan.
Launching the barcode scanner
- Open the DESIGN tab.
- Select the button, open the EVENTS tab, and add the following event:
mobilebuttonX > Click > Invoke service > mobilebarcode1, and click “Save”.
Don’t forget to save.
Note: Learn more about error handling via the link.
Testing the app
Since we’re invoking a native component (barcode scanner), the app has to be tested as a hybrid app, or installed on the device. Testing won’t work in the browser.
The final app will look like:
The example above shows the scanning of a QR code that returned a URL.
Once you get the value from the scan, you can save it in local storage and use it as an input to another API to get more information about the scan. For example, if you scanned a product barcode number, you could then invoke a service to get information about the product.
Testing on Android is relatively simple, since you can install any app rather quickly on your device. Your options for testing:
- 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.
- Build the Android binary and install it your device. When the build is completed, you will see a QR code. Scanning the QR code will download the app to your phone. You can also email the app to your device.
- Build the app and install it on your device.
- You have the option to run the Appery.io Mobile Tester for iOS. However, it requires building the app and installing it on your device.
More help resources
More help resources are links to the blog, our YouTube channel and other web sites.