Building awesome mobile apps with SAPUI5 and PhoneGap

[Former Member]

Overview and why SAPUI5 is awesome

In a recent blog, DJ Adams points out that SAPUI5 represents a fundamentally different direction than existing SAP UI technologies. One of the goals of SAPUI5 can be seen as to facilitate and catalyze innovation around the core business systems that SAP delivers. For this to work, SAP must embrace the prevalent technologies and patterns that have gained momentum on the web. With SAPUI5 the "not invented here" syndrome has been surpressed, and for a lot of scenarios this approach gives significant benefits:

1. Developers do not need SAP specific skills, but can instead use HTML5 and javascript competence a lot of them already have.
   In effect this means better capacity and lower costs
2. Developers can continue to use frameworks that they know and love. Frameworks such as jQuery, backbone, underscore and PhoneGap, but also the new killer framework that will be invented sometime in 2013 (let's call it aWes_ome)

In my company bouvet, we want to test out the second benefit and choose to the experiment with PhoneGap (aka. Apache Cordova). PhoneGap allows us to create mobile apps with HTML5 and Javascript and package it as native app to all major mobile platforms (iOS, Android, Windows phone ++)

Hope you enjoy this simple proof of concept mobile app with SAPUI5 and PhoneGap.

Let's get started.

Why PhoneGap is awesome

“PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best... HTML and JavaScript.” - http://phonegap.com/

Hybrid web containers such as PhoneGap are an alternative to both native mobile app development (different for each mobile platform) and mobile-enabled web sites. Here is why you should care about PhoneGap:

• Develop application in HTML5 and Javascript
  (no new competence required for each mobile platform)
• Behaves as a native app with an app icon, update via app store etc
• Package and deploy the same app to all major mobile platforms.
  There is even a build services that automates the process https://build.phonegap.com/
• Provides a generic Javascript interface to native capabilities of the devices
  http://docs.phonegap.com/en/1.7.0/index.html
• Possible to implement native plugins for each mobile platform and call it from javascript.
  For those case when the javascript device API is not sufficient; for example push notifications
  https://github.com/phonegap/phonegap-plugins
• Cross-origin resource sharing will work automatically since there is no domain conflict
  (As PhoneGap html files are hosted under the file protocol).
  Great for consuming SAP NetWeaver Gateway services
  More about Cross-origin resource sharing at http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing

Step-by-step guide for being awesome with SAPUI5 and PhoneGap

Step 1:

Setup a PhoneGap project based on your mobile platform from http://phonegap.com/start .

I've used the Android development environment on Eclipse.

Step 2:

Download SAPUI5 beta

Step 3:

Unzip the SAPUI5 beta and the file sapui5-static.zip.

Copy the resources folder to \project\assets\www\sapui5\

In addtion, I've created the

• Folder \project\assets\www\phonegap for the phonegap javascript api
• Folder \project\assets\www\app_resources for specific web resources for my app

At this moment my project's file system is like this

Step 4:

Create the file \project\assets\www\index.html

This is the starting page for your app

Here you should refer to both PhoneGap and SAPUI5 javascripts. Please note that you should not include a / at the start of the reference

<script type="text/javascript" charset="utf-8" src="phonegap/cordova-1.6.0.js"></script>

<script id="sap-ui-bootstrap"

      type="text/javascript"

      src="sapui5/resources/sap-ui-core.js"

      data-sap-ui-theme="sap_platinum"

      data-sap-ui-libs="sap.ui.commons">

</script>

For a full example file that can be used, please see https://gist.github.com/2659702

Step 5:

There is a small bug in SAPUI5 beta that you'll experience if you run the app at this time.

The message you get is " Uncaught TypeError: Cannot read property 'theme' of nul at file:///android_asset/www/sapui5/resources/sap-ui-core.js:12931"

The error is at line 12931 of the file /projectasset/www/sapui5/resources/sap-ui-core.js .

My workaround was to edit this file by adding try catch clause, and this stopped the problem..

Here is the code I ended up using

// 2. read server wide sapui5 configuration

var sUrl = "/sap-ui-config.json"; // TODO: make configurable

var oResponse = jQuery.sap.sjax({url:sUrl});

try {

          if (oResponse.success) {

                    var oServerCfg = {};

                    if (typeof oResponse.data == "string") {

                              try {

                                        oServerCfg = jQuery.parseJSON(oResponse.data);

                              } catch(ex) {

                                        jQuery.sap.log.warning("Error when parsing the JSON configuration content from " + sUrl + " : " + ex);

                              }

                    } else {

                              oServerCfg = oResponse.data;

                    }

                    for (var n in M_SETTINGS) {

                              if (oServerCfg[n]) {

                                        setValue(n, oServerCfg[n]);

                              }

                    }

          }

} catch(ex2){

          jQuery.sap.log.error("Error when parsing the JSON configuration content from " + sUrl + " : " + ex2);

}

Step 6: Profit !

Build the android app and deploy the application to mobile device.

This a screenshot from the app you've now hopefully built

Step 7: (optional) Package for all other mobile platforms

Follow the instructions at https://build.phonegap.com/

Conclusion

Hopefully, you've seen how easy it is to integrate SAPUI5 with PhoneGap and I think this applies to alot of the other de-facto standard frameworks on the web.

SAPUI5 works very well with mobile devices, though not all components and aspects of it are yet optimized for mobile.

I'll leave you with a more advanced example, showing the Feed component. Don't forget to be awesome.