I recently blogged about a sample mobile application built using a combination of Visualforce and other standard web technologies like HTML5, CSS3 and JavaScript (specifically JQuery Mobile). The application mobilizes the ‘Merchandise’ Custom Object by presenting a mobile optimized List and Detail View of data stored in that Object. I also demoed and dissected this application in some detail in the Mobile SDK webinar that Eugene and I recorded recently. In addition to discussing web mobile apps, i.e. applications delivered entirely via the browser on the mobile device, we also covered hybrid mobile applications developed using the Salesforce Mobile SDK. Hybrid apps fall somewhere in the middle of the web<–>native spectrum of mobile development. Like web apps, hybrid mobile apps are developed primarily in web technologies like HTML5, JavaScript, and CSS. However, you can then use the Salesforce Mobile SDK container (which is based on the open source PhoneGap project) to put a thin native ‘wrapper’ around the web application and access native device features like the camera, microphone etc. During the webinar, I demoed one example of using a Hybrid application to access native device capabilities – the ability to snap a picture on the mobile device and attach it to the respective Merchandise record in Salesforce. Another common use case for developing Hybrid applications is scanning bar codes or QR codes.

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.

1. 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.
2. 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.
3. 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.

4. We’re now ready to initiate bar code scanning from our Visualforce page. The great thing about PhoneGap is that you can access all device functions via JavaScript – no iOS/Android specific coding required. Here is how I invoke the Bar Code scanner PhoneGap plugin in my Visualforce page.

   Line 2 shows how simple it is to use bar code scanning using the custom PhoneGap plugin. If the bar code/QR code scan is successful, the success callback function get invoked with the scanned text or string (‘result.text’ above). The plugin also passes along the format of the bar code scanned (e.g. ‘QR_CODE’, ‘UPC_A’, ‘DATA_MATRIX’ etc.) via the ‘result.format’ variable. I then simply use JavaScript Remoting to invoke a method on the Apex controller attached to this VF page (line 6) to search for any Merchandise records that match the scanned bar code value.

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.