In Extend your SAP jQuery Mobile web app with HTML5 concepts and Native device features - Part 1 of this blog series we constructed a simple mobile web application, using the jQuery Mobile framework, extending it with HTML5 / CSS3 techniques, and connecting it to a SAP ABAP server. Here in Part 2, we will transform our web application into a native app using PhoneGap, leveraging the native capabilities of our mobile device.
About PhoneGap
There is much debate currently about mobile web apps versus native apps. PhoneGap is a framework that can help to dilute that debate. PhoneGap is an open source development framework (MIT licensed - which means it is free) that allows you to convert your web application into a 'native' (hybrid) application. The framework provides a container into which you insert your web app HTML and resources. Containers are provided for different SDKs, including iPhone/iPad, Android, Palm, Symbian and Blackberry. The end result is a native app which wraps your web resources. You can then submit the app to the relevant app store. Importantly, the framework exposes access to native device features via a javascript API. This means that via javascript your app can access native device features such as accelerometer, camera, compass, contacts, geolocation, vibration etc.
At runtime, your web app runs within a web frame that is wrapped by the native PhoneGap app. However, the resources for the web app (eg. html, images, javascript files, css files etc.) can be stored within the app deployment itself. This means that your web app and associated resources are transferred onto the device as part of the app deployment. Note that this means we don't need to utilise the HTML5 application cache when using PhoneGap, since the web app components are already wrapped up into the native app deployment and so don't need to be cached by the browser.
A key benefit with PhoneGap is that it makes native device features accessible. At this time of writing, the PhoneGap API includes the following native integration ...
- Accelerometer - access the device's motion sensor
- Camera - integrate with the device's camera
- Compass - obtain direction the device is pointing
- Contacts - create or find contacts stored on the device
- Device - access properties such as device platform / version
- Events - detect when phonegap framework is loaded
- File - read from / write to files on the device
- Geolocation - obtain current location information for the device
- Media - plays audio files on the device
- Network - detect if the device is currently connected to the network
- Notification - show alerts and confirmations, beep, vibrate the device
- Storage - create and interact with a local SQL database on the device
It is important to note that not every feature is available for every device OS (you would need to see the updated documentation for details).
Also, PhoneGap is not the only framework of it's type available (there are others, including the popular Appcelerator Titanium which I have yet to try out).
DEMONSTRATION
You will recall in Part 1 we constructed a simple web app that monitors SAP system CPU and memory. I needed to think up some scenarios to augment the web app with native device integration.
Here are the scenarios I have built into the app ...
- Shaking the phone triggers a manual poll of the SAP server for an update to system metrics
- Device emits a sound (ping) when the request to the SAP server is sent
- Device vibrates when the request from the SAP server is received
- Device orientation affects the movement of the animated title line (what I affectionately call the 'cylon eye' for those of you who watch Battlestar Galactica) in the direction that the device is tilted (yes, this was just for fun!)
I apologise in advance if these are a bit lame ... I implemented these simply to illustrate some possibilities with our simple app. Please use your imagination and think of the actually useful real-life possibilities you could build here (eg. store customer details in phone contacts, take photos for asset maintenance and propogate them to SAP etc.)
Let's firstly have a look at the end result (YouTube video with audio) ...
HOW DID WE MAKE THAT HAPPEN?
The PhoneGap documentation nicely outlines the javascript API for each supported scenario.
For our web app, you may (or may not) have noticed that the javascript code to support our device integration scenarios was already embedded in the original web app that you tried out in Extend your SAP jQuery Mobile web app with HTML5 concepts and Native device features - Part 1!
Here are the relevant code snippets ...
1. Switch for PhoneGap
I introduced a variable 'phoneGapWrapper' that when switched to true, activates certain logic branches in the javascript. This enables us to keep the web app code base common for when the web app is running as a true web app and when it is running within a PhoneGap container. All that I do when deploying this into a PhoneGap wrapper is to set the variable as follows ...
var phoneGapWrapper = true;
2. Detection that device is ready
Every PhoneGap application must add an event listener to check that the PhoneGap framework has loaded and initialised on the device. Otherwise calling PhoneGap APIs in the javascript prior to this point may result in failures.
We check for this event in the javascript function onBodyLoad() ...
//
// Initial function on load of HTML body
//
function onBodyLoad() {
// If the application is running within a phonegap wrapper,
// register event listener to ensure phonegap is ready first,
// otherwise proceed straight to initialisation routines
if (phoneGapWrapper) {
document.addEventListener("deviceready",onDeviceReady,false);
}
else {
initSysMon();
}
}
3. Register watcher for accelerometer
Here we setup a watcher for the accelerometer, which in regular intervals of 500 milliseconds calls the function 'onAcceleration'.
//
// PhoneGap Only: APIs are ready to call
//
function onDeviceReady() {
// Check accelerometer every 500 milliseconds
watchID = navigator.accelerometer.watchAcceleration(
onAcceleration,
function(){},
{frequency : 500}
);
// Initialise the application
initSysMon();
}
3. Act on accelerometer change
In the function 'onAcceleration', we receive values in the parameter 'accel' indicating the current rate of movement (if any) along an x, y and z axis.
I tuned the values to check for after some actual testing on the device. For this simple example I only check for movement along the x axis (horizontal).
Within this function module we can change the direction of the 'cylon eye' (for small tilt) and trigger a manual poll event (for large shake).
//
// PhoneGap Only: Monitor acceleration
//
function onAcceleration(accel) {
var smallShake = 0.3; // Smaller number detects smaller shake
var largeShake = 1.2; // Higher number detects higher shake
if (true === accel.is_updating) {
return;
}
// set direction of title line animation on small shake
if (accel.x >= smallShake) {
increment = 0.05;
}
if (accel.x <= (0 - smallShake)) {
increment = -0.05;
}
// trigger data refresh on large shake
if ($('#shake').val() == 'on') {
if (accel.x >= largeShake || accel.x <= (0 - largeShake)) {
refreshSystemData();
}
}
}
4. Notifications
Within the javascript function 'refreshSystemData()' we include the logic to trigger a sound when sending a poll request to the SAP server, and to trigger a device vibration when receiving a response ...
//
// Refresh system data from SAP ABAP server
//
function refreshSystemData() {
...
// Phonegap Only: play sound on sending request
if ($('#sounds').val() == 'on') {
navigator.notification.beep(1);
}
...
// Trigger AJAX call to ABAP server
$.ajax({
...
},
success: function(sys){
// Phonegap Only: vibrate phone on receiving response
if ($('#vibration').val() == 'on') {
try {
navigator.notification.vibrate();
}
... etc.
LET'S BUILD IT!
When I first tried this I was stunned at how quickly I was able to convert the web app into a PhoneGap app.
For our simple web app example, there are some preparation steps that need to occur. In summary (assuming you have a relevant device OS SDK available to you), here are the preparation steps ...
1. Download the latest copy of PhoneGap. The unpacked result should look something like this ....
2. Download the following web app resources to a folder on your computer ...
Application Specific Files:
index.htm
(from http://www.johnmoy.com/demos/zsystemmetrics/index.htm)
icon.png
(from http://www.johnmoy.com/demos/zsystemmetrics/icon.png)
beep.wav
(download a free wav file from the internet and rename to this name - this is only required for iOS)
jQuery Files:
jquery-1.4.4.min.js
(from http://code.jquery.com/jquery-1.4.4.min.js)
jQuery Mobile Files:
jquery.mobile-1.0a2.min.js
jquery.mobile-1.0a2.min.css
'images' folder with image files (eg. ajax-loader.png, icons-18-black.png etc.)
(these files download as a zip file here)
Your downloaded files should look something like this ...
Depending upon what device OS you want to deploy to, the process from here is slightly different. The PhoneGap tutorials document the process really nicely for each type of device OS (eg. iOS, Android, Blackberry etc) and so I refer you to the link here.
Assuming you have the preparation steps in place outlined above, I will illustrate how quick and easy it is to deploy this as an iPhone app with the following video (YouTube video with audio) ...
AN EASIER WAY TO BUILD YOUR PHONEGAP APPS
One tricky aspect of multi-platform mobile deployments when deploying native apps is the need to run machines with the specific SDKs / IDEs for the various platforms. It's almost like you need to run a 'build lab' for the various platforms you need to support.
The people at Nitobi Software (who created PhoneGap) have introduced a service called PhoneGap Build which allows you to upload your web app resources, and they will compile it in the cloud for multiple platforms and return the app-store ready apps to you. Effectively this means the build steps shown in the video above would be handled in the cloud for each and every platform that you wish to deploy to. How cool is that!
This service is in beta and so is currently free, but expect some pricing when it is fully launched. Not all platforms are currently supported. You can find more details here.
WEB APP versus NATIVE APP versus PHONEGAP
As I mentioned in at the commencement of this blog, there is fierce debate about the merits of web apps versus native apps. I have mapped out some of the pros and cons for these techniques (having developed apps for each approach) from my perspective. You can see that a framework like PhoneGap (or alternative frameworks such as Appcelerator) that bridge the gap between web apps and native apps can give us the best of both worlds.
I have compiled the following comparison chart for the various options...
You can see that PhoneGap apps can to a degree inherit the best features of web apps and of native apps. This is not to say Native apps are irrelevant. Criteria number 4 above (usability) can often be THE most important criteria. But it comes at a cost when you are looking to deploy to multiple device types. In my opinion games are one area where the native app approach still rules. But games are a far cry from the area of enterprise apps, where the SAP community is focussed.
I believe that combining open source frameworks such as jQueryMobile with the best features of HTML5 / CSS3, and leveraging the native capabilities of the device with a framework such as PhoneGap, you can end up with a very powerful and professional result.
You might wonder where Sybase fits into this equation? Well, I followed the blog 'Developing Mobile Applications with Sybase Unwired Platform (1/3)' by Pierre Dominique and followed his instructions to apply for SUP Personal developer edition in August last year. I have spoken to Sybase, but sadly I am still waiting for the software 😞 One day when I receive it I might be able to blog my thoughts on it.
In closing this two-part blog series, I should leave you with a thought to consider from Gartner ...
Source: 2010 Gartner presentation
"Strategic Planning Assumption: By 2015, mobile Web technologies will have advanced sufficiently, such that half of the applications that today would be written as native applications will be, instead, delivered as Web applications."
- SAP Managed Tags:
5 Comments
