I am an avid user of mobile devices and I love them at home and around work, but never really had any interest in learning how to develop native applications for them, as it would mean that I had to learn yet another language that I would most certainly forget how to use right away due to lack of practice.
Having said that I never the less always felt that I am kind of missing the train in some ways seeing that mobile devices are everywhere and they have become a huge factor for companies when it comes to being able to reach individual customers, but also in being able to provide better and more efficient services to their employees and business partners.
This feeling got me interested in mobile frameworks like Sencha Touch, Appcelerator or JQuery Mobile that allow you to build web pages for mobile apps. I was primarily attracted by the fact that such applications would be written in HTML and JavaScript, which I already knew, and on top would be device independent, or I should say that is what their marketing speak promises. I had to pretty quickly find out that this approach, while quite ok for some use cases, does not work that well for others. These frameworks are designed to be put onto a Web-Server and are typically served to the device through an existing internet connection. Some of these frameworks provide packaging capabilities that allow you to deploy the application on the device, but as of this writing, this packaging does not allow you to access OS functionality like Accelerometer, Compass, Camera, the Event System of the Device, the File System, Geolocation and many more features.
Somewhat disappointed, I walked away from them although I was impressed by their capabilities and really liked their approach. I really did not look back until recently, when I got introduced to PhoneGap. PhoneGap, much like NimbleKit, are device dependent libraries that consist of a WebView capable of rendering local HTML and JavaScript files to build the UI and JavaScript API’s on the OS side to allow you to talk to phone capabilities like the ones mentioned above. Naturally I had to try this out, knowing that if it would work, I could just put one of the Web Frameworks on top of it and finally have a set of tools that would allow me to build applications not only for one device, but potentially for all devices that are supported by PhoneGap or NimbleKit with no native development knowledge.
Container libraries like PhoneGap and a Web Framework on top is already a quite attractive combination for a developer, but the idea of being able to read data from an SAP Source by using the Gateway on top is killer. Up to the SP3 of SAP Gateway have required you to not only call a Gateway Service but also to parse the Atom feed that the Gateway would return to your application. Not anymore. Since SP4 the SAP Gateway talks JSON and thanks to the good guys of ES Workplace, their Gateway is already on SP4. This combo got me really excited. I was thinking “Gateway, JSON, PhoneGap, JavaScript … this should work like a charm”. So let’s start by trying to make PhoneGap talk to SAP Gateway.
Following are the set of pieces and a brief description on how to make this work. I have so far not added a WebFramework but I will for sure in the future. Right now, it is only PhoneGap and Gateway. I only had to write a few lines of HTML and JavaScript to make this work which should give you an idea how simple yet powerful this combo is.
I made my Android based PhoneGap project available for you to pull from GitHub in case you are interested in it. I assume migrating this to, let’s say iOS, should be a snap.
First things first. You have to start with building a Project for the device you will eventually run your app on. PhoneGap has various “Getting
started “ tutorials showing you how to do this. If you intend to make HTTP calls from PhoneGap, your natural next step is to find out how to make this work. PhoneGap is essentially a WebView and you therefore do HTTP calls with the almighty XMLHttpRequest directly from JavaScript. People that know XMLHttpRequest will immediately think that they will have to work around the security restrictions of JavaScript that restrict cross domain http calls. This is not the case on PhoneGap. PhoneGap provides configuration entries inside their cordova.xml file that allows you to specify the domain(s) that your application is allowed to call.
<access origin=https://gw.esworkplace.sap.com/>
A quick entry into the cordova.xml file for ES Workplace and we are able to make calls to it.
Next on the list is looking at XMLHttpRequest itself. The documentation that I used showed that the open method has 5 parameters, type-of-request, URL, Synchronous or Asynchronous call, username and password. Filling them with the right parameters should not be that complicated to read something off of ES Workplace. I figured that the first parameter certainly has to be a “GET” and the second one a valid URL from ES Workplace. Looking around, I found the list of available Gateway Services on ES Workplace. To get the service to respond with JSON, you simply exchangethe $format=xml in the URL with $format=json. Going through the services on ES Workplace, I found that not all services do this and I checked back with the ES Workplace folks. The reason for this is that some services on the ES Workplace were built with an older framework that has since been replaced with Gateway. If you find such a service, do not try to make it work with JSON. Simply move on to another one that does work. I found that the ones around the flight example work quite well and I ended up using the list of agencies.
http://gw.esworkplace.sap.com/sap/opu/odata/IWBEP/RMTSAMPLEFLIGHT_2/TravelAgencies/?$format=json
Although ES Workplace requires a username and password, I thought that this would not be a problem at all. Simply call the open method with GET, URL, false (for asynchronous calls), username and password and be done. Not so much on PhoneGap. Searching on the web, I found out that PhoneGap does not support the username and password parameters but I had to put them manually into the request header. This required a capability to encode the password into a Base64 string which at first I did not know how to do. Eventually I stumbled over a number of tutorials that said I should use the Web Toolkit Base64 Java Script library for it. I downloaded the code from the website, put it into a base64.js file inside my project and made the necessary references to it. I extracted some of my project code here but please have a look at the project for the full example and how it works.
// Call the Base64 function and build HTTP authentication header
function makeBasicAuth(uname, pword){
var tok = uname + ":" + pword;
var hash = Base64.encode(tok);
}
// call the Gateway service with XMLHttpRequest passing Authentication as header
function getAgencies(uname, pword){
...
var auth = makeBasicAuth(uname, pword);
var req = XMLHttpRequest();
req.open("GET",http://gw.esworkplace.sap.com/sap/opu/odata/IWBEP/RMTSAMPLEFLIGHT_2/TravelAgencies/?$format=json, true);
req.setRequestHeader('Authorization', auth);
... the onreadystatechanged function definition goes here (see project on GitHub for details)...
// Finally send the XMLHttpRequest
req.send();
The only thing that is left is making sense out of the response. That in turn is very simple as it only requires you to make use of the JavaScript JSON.parse functionality.
var obj = JSON.parse(req.responseText);
JSON.parse returns a JavaScript object and you are left with looping over the object picking out the information you would like to display.For the agency service, the array of agencies is nested inside the obj.d as the results array and you can do a for loop over them, sticking them into the DOM tree with the innerHTML function of the html document.
for (var i = 0; i < obj.d.results.length; i++)
document.getElementById('lbAgencies').innerHTML = obj.d.results[i].Name
If you are interested in what else is inside the response stick, copy the response that you get from the Gateway into one of the JSON beautifier online apps.
This is basically it for reading data from SAP Gateway into the PhoneGap container. Certainly this is only the beginning of something that I think is very promising. In the coming weeks I will go ahead and experiment some more with this combo and update you on my results.
At last here is a quick summary of the links provided throughout the document:
