AppMobi has been busy launching new products for HTML5 developers looking to tap into the native functions of smartphones and tablets using the web technologies they’re already familiar with. Most recently, appMobi released the MobiUs browser and the corresponding XDK (cross-platform development kit). MobiUs can be used both as a standalone browser and as an app that integrates with the Safari browser. With MobiUs, web apps on iOS devices can access hardware on the iPhone and iPad from within the browser at the same level of performance as traditional native apps.
The company has put together some video tutorials from a recent webinar it hosted that gets into the details of building apps with native functionality using HTML5 and JavaScript. The videos give a quick look at how to access the accelerometer and barcode scanner; the device’s camera; network and notification functions; and audio and RSS parsing. These functions rely on the appMobi JavaScript API to access the native functions of mobile smartphones and tablets.
The video below goes into detail about how to use the XDK and appMobi’s JavaScript library to access the accelerometer and barcode scanner in an HTML5 app. In upcoming posts we’ll look at the remaining examples from the recent webinar.
All the examples can be duplicated in the appMobi XDK, available for free from the Chrome Web Store. The XDK emulator lets you see your code in action in real time across a number of devices running iOS and Android.
Accelerometer & Barcode Scanner
The accelerometer measures how the device moves through space, or (as the name suggests) the rate of acceleration of the device. It does this in three dimensions (X, Y, Z), so it can detect the orientation and movement of the device forward and backward; side to side; and up and down. Values for acceleration are expressed between -1 and 1, with 0 being the midstate for each dimension. The code used in the example app you see in the video above uses the watchAccelerometer command, pinging the device at designated intervals to check the orientation and acceleration.
The barcode reader scans and interprets QR codes using the camera on both iOS and Android devices. Two-dimensional QR codes can only be read on the Android version of the scanner. When accessed via an HTML5 app, the camera opens automatically. Once the app detects a QR code using an event listener command, the device carries out the barcode function. AppMobi.device.scanBarcode and appMobi.device.barcode.scan are the events used to grab the QR code, and the barcodeScanned event fires after a successful scan.
Find the full documentation for the accelerometer and barcode scanner in appMobi’s resource center.
Next we’ll take a look at how to use appMobi’s API library to tap into the phone’s camera.
If you enjoyed this article, please consider sharing it!
Sponsors
