Introduction

This article covers building barcode scanning apps on IOS (iPhone/iPad) with Phonegap.   For reference, Phonegap is going to become Apache Cordova any day now, so the process can be confusing if you are looking at older materials.  Before we get started we make the following assumptions about your development environment:

• Operating System is OS/X Lion
• Your IDE is XCode 4.2
• You have installed Phonegap 1.5.0 or higher
• You have downloaded Phonegap Plugins

While the general process will work with newer and possibly older versions, this is the environment we have tested this process with.   Also, if you mix versions of Phonegap and the plugins you will have naming convention problems, especially if you mix recent plugins with and older Phonegap install or vice-versa thanks to the transition from Phonegap to Apache Cordova.

We recommend following the links above as Google search results may bring you to older code.   We also recommend that if you had an older version of Phonegap that you install the latest version and start a new Cordova project via XCode with the new install.    Once your test app is successful you can follow the Upgrade Guide that will be included in the docs section of the downloaded zip file.

Our example app is named “abundascan”, which is also the default target that was created.  You will see that name in the screen shots included herein.

Step 1: Build A Starter Cordova App

Start Xcode and create a new Cordova project.  Build your project and run it in your simulator or directly to your connected IOS device.  This will build the template project.

Step 2: Add The Cordova Source Files

After you’ve downloaded and unzipped the files from the Phonegap Plugins page you will have a phonegap-plugins folder full of various plugins.   There will e a subfolder named “BarcodeScanner”.  This is the folder that will have the contents you need.

Highlight the following files and drag them from that folder over to your XCode window and drop them under the <target_name>/Plugins subfolder:

• CDVBarcodeScanner.mm
• zxing-all-in-one.cpp
• zxing-all-in-one.h

Step 3: Edit The Cordova Plist

This file provides the symbol table references that will be used to connect the JavaScript components to the compiled plugin.    Find the Supporting Files folder under your <target_name> folder and click on Cordova.plist.

This will show the key/type/value table int he main editing window.  Click on the arrow next to Plugins to expand that section, then hover over to the right of the word “Plugins” to get the add/subtract entry buttons.  Click the plus to add a new empty line.

In the new line enter org.apach.cordova.barcodeScanner as the key name.  Note the capital “S”.

In the value column enter CDVBarcodeScanner.

Step 4: Add Link Libraries

In order for the project to compile in the new BarcodeScanner library you will need to add some new core libraries to your build commands.   In Xcode click on the target in the left hand sidebar (this is usually the topmost line under which all other items reside).   The project summary should appear in the main window. Click on the Build Phases top tab.

Open up the first Link Binary With Libraries group.   At the bottom of the expansion is the add/remove buttons.  Click on the + to add a new library.    Type in the following names (partial search will work) and add these libraries to the list:

• AVFoundation.framework
• AssetsLibrary.framework
• CoreVideo.framework
• libiconv.dylib

Note: You may need to click on the IOS5 folder when the quick search is running to see your matches.  

Other Settings

ZXing.cpp Optimizations Off

You may also need to turn off optimization for the zxing-all-in-one.cc file.   To do this, expand the compile sources group.  You will see a half-dozen file names with the last one likely being zxing-all-in-one.cpp.    This is actually a 2-column listing, if your screen is not wide enough you will see a “C…” trailing on the top right of the group.  Go just to the left of this and move your mouse in the header slowly, you will see the expansion double-headed arrow.  Click and drag to the left to expand this column.   Now double-click in this column to the right of the zxing-all-in-one.cpp file and add -O0 (letter “oh”, number zero) and click done.

No ARC

Do not use ARC (Objective-C Automatic Reference Counting).  If you did not turn this OFF when starting your project you can go to the Build Settings tab, scroll down to the Apple LLVM compiler 3.0 – Language group, expand it, and look for “Objective-C Automatic Reference Counting) and set it to no.

Add JavaScript and Run

Now you just need to add the reference to the barcodescanner.js file in your HTML files for the app and bind a click or hyperlink to the JavaScript barcodeScanner.scan_code call.     Run and you should be able to activate the scanner.