HANA meets Tiggzi (aka how to create an app during your lunch break)

[RonaldKonijnenb]

Ever since I migrated (well rebuild, no way to upgrade) my Amazon AWS HANA box to SP05, I wanted to try out the much appraised XS engine. For those of you who do not know what that is, SAP brings REST services to HANA with only a couple of lines of code. Take your favorite table or view, expose it and your ready to use the service and do something great with it. In my case, I wanted to build an app.

Amazon AWS

First thing to do when you’ve created your Amazon box is open up port 8000. Probably documented somewhere, but easily overlooked. Without this setting, your service is going nowhere:

How to create a service is documented very well by Thomas Jung in his YouTube series. Just click on below link and spend some hours watching these fantastic “how to” clips. They are worth a watch:

http://www.youtube.com/user/ThomasJung1

Take close attention to the section on .xsapp and .xsaccess files. If forgotten, they can give you a headache, like it did for me 😉

http://scn.sap.com/thread/3306098

Another blog you definitely want to read is lucas Sparvieri’s blog. Known for his detailed blogs, he will bring you up to speed in no time:

http://scn.sap.com/people/lucas.sparvieri/blog/2012/09/11/sap-hana-odata-services-and-jquery

Right, after reading the above you’re good to go. Let’s build an app!

Building an app, it’s not as tough as you think

Actually it’s a piece of cake once you know where to look. There are a dozen of Cloud services which help you to create an iOS, Android, Win8 or HTLM5 app without a single line of code, but they all lack something really fundamental: the power of REST services and APIs. Out of the masses comes a great company: Tiggzi. A silicon valley based company which gives you the power of building apps, with close to zero programming knowledge:

http://techcrunch.com/2012/04/20/tiggzis-drag-and-drop-mobile-app-builder-goes-beyond-templates/

Let’s see how Tiggzi connects to HANA services.

Building an app during your lunch break

It is literally that easy as I put on my investigator hat to figure out the settings, figure out basic authentication and create a simple UI and mapping. You and your imagination can build something remarkable.

First off register on the site:

https://appbuilder.tiggzi.com/projects

After registering you can create your app. You can choose between creating a mobile app which can be pushed to the app store of play store and even Windows 8 is supported. For this test I decided to create a Mobile Web app:

After clicking open you get to your app builder

Don’t you just love Silicon Valley companies 😉

This is basically my end result:

let’s look at individual steps.

Create your service

Press create New --> service

Enter your URL (build up off your Amazon IP address, HANA package, project folder name, xsodata file and named service:

http://xx.xxx.85.50:8000/alerter/services/sales.xsodata/SALES?$format=json

(I masked the IP)

Note the Tiggzi proxy setting. Be sure to tick this as it will make sure that traffic goes via the Tiggzi proxy. This is required as browsers often do not allow services to be invoked outside their own domain. Read up here for more details:

http://help.gotiggr.com/documentation/services/rest-service/using-tiggzi-proxy

Go to request and create a parameter called Authorization:

As my service uses “basic authentication” by default, I will have to enter the value generated by the browser in order to test my service and generate a default mapping. You can get this value by using Chrome Developer Tools, open Network tab and view the request headers sent. As an alternative you can use Fiddler and read its generated trace.

Go to Test and press Test (what else 😉

After Test, press “Automatically Create Service Response” and a mapping will be automatically created from your service. How is that for convenience!

Now it’s time to build you UI

Here is where you can go completely overboard. Tiggzi is incredibly flexible and has some cool elements you can use to build your UI. Don’t like what you see, no problem create your own components and CSS files! For now, I’ll stick to nice and simple:

Very simple UI. Big button which will invoke the HANA service, CGI logo and some of the fields from my service. Trick to neatly align everything is to use a “grid” and “labels”. Also Tiggzi has a YouTube channel with lots of “how to’ clips for inspiration:

http://www.youtube.com/user/tiggzi

Now that the UI is done, let’s map the service:

Add datasource service:

And map!

One final step and you’re done. Assign the service to the button:

Now lets test

Nice test engine:

Press the button and.. Voila!

Adding search

Let’s say you want to make your app a little more flexible. No problem, just add “search”!

I got this great tip from Juergen Schmerder who fiddled around with Tiggzi aswell. Here is how to add search:

Add a “filter” to your service:

Add a search button to your UI:

And enter a little piece of javascript to your mapping:

return "startswith(CUSTOMER,'" + Tiggzi('searchInput').val() + "')";

"CUSTOMER" is the name of the field in my table (ofcourse yours will be different).

And finally map the field to your search button:

And there you go!

Basic authentication

Now there are a little more steps to be taken in order to make sure that authentication is correctly handled in your app. Take the following steps in order to make it work:

Add http://crypto-js.googlecode.com/files/2.5.3-crypto-min.js as an external resource in Project > Project Profile > External resources

Create the following JavaScript file:

function getAuth() {
var bytes = Crypto.charenc.Binary.stringToBytes('username:password');
var base64 = Crypto.util.bytesToBase64(bytes);
return "Basic " + base64;
}

Enter your HANA username and Password

Add the service to the page. Open Data Mapping.  For Authorization parameter, click Add JavaScript and enter the following:

return getAuth();

Conclusion

Is is pretty easy to create a nice HTML5 app without very much effort. If you know a little JavaScript, you can change Tiggzi to fit almost all of your needs. Be sure to also test out the native app options and let me know how it works out for you in the comments!

Thank you for reading and take care.

Ronald.