I recently came across a blog post from DJ Adams in which recounted what he presented at the OSCON 2014 conference, in concert with Andreas Kunz and Frederic Berg from SAP. This blog entry is accompanied by a full blown tutorial that you can, step by step, replicate on your computer at your own pace. There is minimal setup required (download openui5 and node.js) and it is all pretty straight forward. If you are a beginner or interested in *ui5/Fiori, I warmly suggest trying this tutorial out for yourself. It is a simple example that consumes a local json data source and exposes the data via a lightweight html5 application (that you piece together following his tutorial).
Some time later, I came across another very nicely explained post, this time from Rui Nogueira, in which he explained how to publish an lightweight html5 application to the SAP HANA Cloud Platform, using Git.In his example, Rui publishes a simple weather app to that SAP HANA Cloud Platform.
On the basis of these two posts, I decided to try this out for myself, but give it my own spin.
My chosen scenario, was to replicate an application that I did a few years ago, when I was working for a well know Australian Pharmaceutical company. At the time I developed a proof of concept application that was geared toward the International sales team. Essentially, this app gave the travelling salesman detailed product information, including the next time the production campaign of that product was planned for. This application was built using jquery mobile and incorporated nice functions such as local storage and a syncing capability to keep the mobile device database up to date with the latest product information that resided on an SAP system. This application was then, using phonegap wrapped into an app deployed on iPhones. A screenshot of that early application is shown below.
My application details
Having my given UI5 my application a bit of thought, I set out to build an application:
- That was going to run on my iPhone and iPad (i.e have a responsive layout)
- That was going to incorporate master/detail views
- That was going to provide me with a search function
- That was, in the detail view, going to provide me with both textual information on my chosen product as well as the accompanying product image
- That was going to consume a json data feed, served through and external URL (i.e on a different domain)
Building the application
Building the application was quickly expedited. To start off with, I used a local data file as my json data source. My troubles began when I switched to using my external data source, at which point no data was being loaded in the application. Switching on the Chrome development tools, I was able to quickly identify the source of the problem : I was trying to make a cross domain call, which my browser was of course preventing me from doing. Firing up Chrome in the – disable security – mode, provided temporary joy, as I was now able to load the external data source. However, my original remit was to be able to serve this application on an iDevice, so a permanent solution had to be found. I found the answer on the CORS (cross origin resource sharing) website. You see, the json feed I am consuming is being served through a php script, on a server I control. All I needed to do was to alter my script so as to send the correct headers, namely:
From that point on, I was then able to publish my application to the SAP HANA Cloud Platform, using the steps outlined in Rui’s blog post. Screenshots of my final product are shown below:
The master / detail views. The detail view is split in two tabs, one to show textual product information and one to show the product image.
A search function was also implemented.
I should also point out, that initially, after having published my application to the SAP HANA Cloud Platform, I was once again facing a blank screen – i.e no data was being loaded. At first I thought that once again I was plagued by the CORS problems I had previously encountered. Once again I used the Chrome developer tools to try and find out what the problem was. This time I was getting a message indicating that the content must be served over https as shown below.
Doing a bit of searching, I came to find out that this was to prevent ‘man in the middle attacks’ – i.e my HANA application is being served via https, but is making an insecure call to an http script. This can very easily be bypassed by clicking on the shield icon that is displayed in your URL bar (I could also I suppose have served my json data through https).
Using the application on my mobile devices causes no problems at all – works just great! That’s it – incredibly simple to do.
As usual, feel free to drop a comment or question.