So how does one go about adding support for bar code scanning in a Hybrid mobile application? This is where the beauty of the PhoneGap (aka Apache Cordova) hybrid framework shines through. PhoneGap has a rich ‘plugin’ library of open source components built by the community to support advanced use cases like push notification, mobile payments (using PayPal) and yes, bar code and QR Code scanning. In fact, the Salesforce Mobile SDK itself uses PhoneGap plugins to support our OAuth login process and our secure offline storage (aka SmartStore).
Lets say we wanted to enhance our MerchandiseMobile Visualforce page to allow users to search for Merchandise records by scanning a bar code or QR Code. You can peruse the final codebase for this application in GitHub, but here are the step-by-step instructions for adding bar code scanning to your Hybrid mobile application.
- First, convert your Visualforce page into a Hybrid application using the Salesforce Mobile SDK. Detailed instructions on how you can do this can be found in Tutorials 5 (iOS) and 6 (Android) of the Mobile SDK workbook.
- Next, download the GitHub repo for the PhoneGap plugins to your local machine (using git clone or clicking the ‘Downloads’ link on the top right). Depending on which mobile platform you’re developing for, follow the instructions in the readme file to import the bar code scanner plugin in your Android or iOS project.
- Import the barcodescanner.js file that is included in the PhoneGap plugin Git repo into your Visualforce page. For example, here is a small snippet from my MerchandiseMobile VF page.
Note that you will also need to import the core PhoneGap JS file in your VF page.
It should be noted that in addition to using the hybrid approach described above, you can also implement bar code scanning in a native mobile application if you’re comfortable with native Android or iOS development.
I’m presenting a session on developing web and hybrid mobile applications at our free Cloudstock London event on May 22nd. I’ll be demoing and discussing this bar code scanning application in that session and so if you’re based in the UK (or happen to be in town early for the London Olympics), register for Cloudstock and check out this and other great technical sessions we have lined up. Warm beer, fish and chips and some mobile hacking. Now that’s what I call developer manna!
p.s. The QR code embedded in this post can be used to test the bar code scanning function described herein. A special Force.com T-Shirt awaits the first developer who can tweet me with the code embedded in that QR Code. I’ll trust the audience to only use the Merchandise sample app to scan the code – i.e. scout’s honor rules apply.