Scan Barcodes with Titanium.

--

In this blog, I want you to give a basic knowledge on how to implement a barcode scanner for android and ios mobile app in Titanium using ti.barcode module and ZXing scanner, where I need to scan the barcode and retrieve data and bind it in the label using Appcelerator Titanium.

There is one official barcode module you can look into that is fully open source. This means you can use it directly in your app on both platforms, and you can check the source code to see how it is build, and if needed hook into that logic, expand it with your own functionality or add support for barcode types etc.

It is called ti.barcode and can be found on official modules by Appcelerator: https://github.com/appcelerator-modules/ti.barcode. It uses ZXing under the hood as well.

Note: In this blog, I will explain how to develop barcode scanner for iphone using ti.barcode module and for android using ZXing barcode scanner (but you can use ti.barcode module approach for android as well).

ZXing is a great library to get barcode and QR-scanning support in your Android app. However, it is written in Java, so not available for iOS.

So, how to apply this ti.barcode module to your alloy project,

You may download the Module for iOS / Android from the link below : https://github.com/appcelerator-modules/ti.barcode/releases

1. Click on the module you wish to download and select ti.barcode zip file. It should download a .zip file to your computer.
2. Extracted the zip file.
3. Put the modules folder in the root of your application. So on same level as tiapp.xml.

4. Double-click on the tiapp.xml file.

5. In the right-hand column, click the + to add a new module. It will show you a list of modules available in your global directory and in your project.

6. Once you’ve added a module, clicking the pencil (edit) icon allows you to switch versions if there are multiple versions available.

7. If you wish to delete a module, click the x (delete) button to delete the module.

Now it’s time to start cording on barcode scanner,

1. Let’s add following code lines to barcodeScanner.js file under the lib > barcode

2. Let’s replace index.xml file’s content with the code below:

3. Let’s replace index.js file’s content with the code below:

4. Let’s replace index.tss file’s content with the code below:

5. Let’s add following code lines to alloy.js file.

Alloy.Globals.isiOS = (Titanium.Platform.name == "iPhone OS");
Alloy.Globals.isAndroid = (Titanium.Platform.name == "android");

iOS and Android barcode scanner screenshots are provided below :

Now you can scan barcodes. When you click Open Scanner button on ios, it opens the barcode scanner and scan barcode then displays barcode value on the label. In android, it checks whether you install or not the ZXing barcode scanner app. If you don’t install the app, system will direct you to the ZXing scanner download page on google play store. If you already download the ZXing scanner app, system will open the ZXing scanner app and scan barcode then displays barcode value on the label.