With today’s update on the trial landscape we have an option to deploy lightweight HTML5 apps on the SAP HANA Cloud Platform. Under the tabs for HANA XS Applications and Java Applications you see now an additional tab called HTML5 Applications.

I’d like to show you in a short video how you can leverage this functionality to create a small sample SAPUI5 app which connects to a public weather API. It’s not intended to be used in productive environments, but rather helps you understand the concepts with a useful application.

While watching the video you can follow all the steps I’ve described below.

But first I’ll explain what this sample app is about I’m using to show you the functionality of the HTML5 Applications on SAP HANA Cloud Platform.

The code for the app

You can find the code for this small app in the listing below for the file index.html. The code for the SAPUI5 app consumes the API of openweathermap to get the current weather of a city. In this case you’ll get the current weather in Lisbon and the city of Neustadt an der Weinstrasse which is defined in row 81 and 85 of this app.

The access to the API is not done. Instead we are using the path /openweathermap (also in line 81 and 85) which is mapped to a destination called openweather. The mapping between the path and the destination is done in a file called neo-app.json.

The neo-app.json file

The neo-app.json file needs to be deployed in the same folder as the index.html file. It creates the connection between the path we want to use to access the API (/openweathermap) and the destination configuration we have to configure in the Destinations panel of your trial account on SAP HANA Cloud Platform Cockpit.

With this file you tell the dispatcher for the HTML5 apps to re-direct all calls on /openweathermap to the destination openweather.

The destination configuration for openweathermap

The destination describes now where the resource is that the application is looking for. The name of the destination needs to map to the name defined in the neo-app.json file above. So in our case it’s openweather. You can find the file content in the listing at the end of this blog post called openweather.txt.
Later on you simply import it as destination in the Destinations panel on your account.

How to deploy the app on SAP HANA Cloud Platform

Creating the HTML5 app in the cockpit

• Open your cockpit for your trial account on SAP HANA Cloud Platform
• Create a new HTML 5 App in the tab HTML5 Applications
• Click on the name of the newly created app
• Click on the tab Development and copy the link of the Git repository to your clipboard

Accessing the Git repo and pushing all files to Git

• Start Eclipse and switch to the Git perspective
• Click on “Clone a Git Repository“
• Paste the Git-URL you’ve copied from your cockpit into the URI field of the popped-up window, provide your user name and password of your SAP HANA Cloud Platform trial account into the fields User and Password, click on Next, click on Next again and click on Finish.
• Now right click on the Git repository and select the command Import Projects
• Select Import as general project, click on Next and after that on Finish
• Switch to the Web perspective in Eclipse
• Create a file called index.html and copy and paste the code from the listing below for the index.html file into that file and save it
• Do the same for the file neo-app.json. You get the source for that file from the listing below for the neo-app.json file
• Right-click on your Eclipse project and select Team and Commit
• Provide your credentials
• Provide a short commit message and select both files in the box below so that are selected
• Click on Commit
• Right-click on your Eclipse project and select Team and Push to Upstream
• Provide your credentials
• Click on OK

Creating the destination and deploying the app

• Now switch back to your cockpit for your trial account on SAP HANA Cloud Platform
• Select your HTML5 app
• Click on the tab Development
• You’ll notice that there is a new commit listed up with the comment you’ve provided before
• Now create the destination
  • Switch to account level on your cockpit and click on the Destinations tab
  • Click on New Destination
  • Click on Import from File and import the destination as a file with the content of the listing below for the file openweather.txt
  • Save it
• Click on the tab HTML5 Applications
• Click on the name of the your app
• Click on the Development tag
• Click on the link of the commit message
• Your app shows up now and should show you the current weather in Walldorf
• This link is only accessible to you as a developer

Provide others access to your app

If you want to make your app externally accessible you need to create a version of your code, activate it and start your app. This is what you’d have to do:

• In the list of available commits select the commit that you want and click on the “Create Version” icon at the right end of the line
• Provide a version name like 0.1 and click on Add
• Now switch to the tab Version Management
• You should see the version you’ve just created before
• Now click on the icon at the right end of the line to Activate this application version
• You get a message telling you that the version has been activated and that the Changes will be effective after (re)-start of the application. Confirm the question if you really want to do this with by clicking on Yes.
• Switch to the HTML5 Application Dashboard and click on the Application Url
• This is the URL under which others can now access your app

In the video you can see a few more things that you can do with HTML5 apps on SAP HANA Cloud Platform as the easy versioning of commits as well as the activation of the different versions of your HTML5 app.

Let the party begin

So now that this is working why not adding an additional tile which retrieves information from another source? Add another “route” to the neo-app.json file and an corresponding additional destination. Share your ideas on SCN.

Hope you enjoy using it.

Code for file index.html

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

<title>Lightweight HTML5 apps and Git on SAP HANA Cloud Platform</title>

<script src=”/sapui5/sap-ui-core.js”

    type=”text/javascript” id=”sap-ui-bootstrap”

    data-sap-ui-libs=”sap.ui.commons, sap.suite.ui.commons, sap.m”

    data-sap-ui-theme=”sap_bluecrystal”>

</script>

<script type=”text/javascript”>

    // #####################################

    // Model – Start

    // #####################################

    var getModelFromURL = function(url) {

        var url = url;

        var oModel = new sap.ui.model.json.JSONModel();

        oModel.loadData(url, null, false);

        return oModel;

    };

    // Model – End

    // #####################################

    // Views – Start

    // #####################################

    // builds the main page

    var buildMainPage = function(id, title, content) {

        var page = new sap.m.Page(id, {

            title : title,

            showNavButton : false,

            content : content

        });

        return page;

    };

    // builds the weather tile

    var buildWeatherTile = function(id, oModel) {

        var tile = new sap.m.StandardTile(id, {

            numberUnit : “Celsius”,

            infoState : “Success”,

            press : function() {

                var link = “http://openweathermap.org/city/” + oModel.oData.id;

                window.open(link, “_blank”);

            },

            tap : function() {

                var link = “http://openweathermap.org/city/” + oModel.oData.id;

                window.open(link, “_blank”);

            }

        });

        // Bind weather icon

        tile.bindProperty(“icon”, “/weather/0/icon”, function(bValue) {

            return “http://openweathermap.org/img/w/” + bValue + “.png”;

        });

        tile.setModel(oModel);

        // Bind name of city to the tile title

        tile.bindProperty(“title”, “/name”, function(bValue) {

            var longTitle = “Current weather in ” + bValue;

            return longTitle;

        });

        // Bind weather details to info field of tile

        tile.bindProperty(“info”, “/weather/0/description”);

        // Bind temperature to the number field of the tile

        tile.bindProperty(“number”, “/main/temp”, function(bValue) {

            // We want Celsius

            var degreesCelsius = Math.round(bValue – 273.15);

            // Also add the Celsius sign to the temperature value

            //Switch to Fahrenheit

            //var degreesFahrenheit = Math.round(((bValue – 273.15) * 9/5) + 32);

            //return degreesFahrenheit + “\u00b0”;

            return degreesCelsius + “\u00b0”;

        });

        return tile;

    };

    // Views – End

    // #####################################

    // Main SAPUI5 application – Start

    // #####################################

    var idPageMain = “main”;

    var app = new sap.m.App(“myApp”, {

        initialPage : idPageMain

    }); // page1 should be displayed first

    // Create a tile for the current weather in Lisbon

    var oModelWeatherCity1 = getModelFromURL(“/openweathermap?q=:Lisbon”);

    var weatherTileCity1 = buildWeatherTile(“myWeatherTileCity1”, oModelWeatherCity1);

    // Create another tile for the current weather in another city

    var oModelWeatherOther = getModelFromURL(“/openweathermap?q=Neustadt an der Weinstrasse”);

    var weatherTileOther = buildWeatherTile(“myWeatherTileOther”, oModelWeatherOther);

    // Now create the page and place it into the HTML document

    var mainPage = buildMainPage(idPageMain, “Lightweight HTML5 apps and Git on SAP HANA Cloud Platform”, [weatherTileCity1,weatherTileOther ]);

    app.addPage(mainPage);

    app.placeAt(“content”);

    // Main SAPUI5 application – End

    // #####################################

</script>

</head>

<body class=”sapUiBody”>

    <div id=”content”></div>

</body>

</html>

Code for file neo-app.json

{

      “authenticationMethod”: “none”,

    “routes”: [

        {

            “path”: “/openweathermap“,

            “target”:

            {

                “type”: “destination”,

                “name”: “openweather“

            },

            “description”: “OpenWeather System”

        },

        {

                “path”: “/sapui5”,

                “target”: {

                                “type”: “service”,

                                “name”: “sapui5”,

                                “entryPath”:”/resources”

                },

                “description”: “SAPUI5”

        }

    ]

}

Code for the destination file openweather.txt

Name=openweather

URL=http\://api.openweathermap.org/data/2.5/weather

ProxyType=Internet

Type=HTTP

CloudConnectorVersion=1

Authentication=NoAuthentication

UPDATES

June 10th, 2014

You might want to check the blog post from Ankur Kumar around ESPM Webshop on light weight HTML5 applications. Good read and goes far beyond my simple example in this blog post.

Jul 9th, 2014

Based on the feedback of a colleague today (thanks Tobias!) I’ve cleaned-up the code in the index.html a bit and also provided some pattern you can use to create additional weather tiles.

Best,

Rui