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.
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 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 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.
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 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.
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.
<!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>
{
"authenticationMethod": "none",
"routes": [
{
"path": "/openweathermap",
"target":
{
"type": "destination",
"name": "openweather"
},
"description": "OpenWeather System"
},
{
"path": "/sapui5",
"target": {
"type": "service",
"name": "sapui5",
"entryPath":"/resources"
},
"description": "SAPUI5"
}
]
}
Name=openweather
URL=http\://api.openweathermap.org/data/2.5/weather
ProxyType=Internet
Type=HTTP
CloudConnectorVersion=1
Authentication=NoAuthentication
You might want to check the blog post from ankur.kumar27 around ESPM Webshop on light weight HTML5 applications. Good read and goes far beyond my simple example in this blog post.
Based on the feedback of a colleague today (thanks tobias.oberlies!) 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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
36 | |
25 | |
17 | |
13 | |
8 | |
7 | |
7 | |
6 | |
6 | |
6 |