1.    Open your cockpit for your trial account on SAP HANA Cloud Platform via the link https://account.hanatrial.ondemand.com/cockpit, switch to account level on your cockpit and click on the Destinations tab

2.    Click on New Destination & provide details for the destination

Name: openweather

Type: HTTP

Description: Openweather map destination

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

Proxy Type: Internet

Cloud Connector Version: 2

Authentication: NoAuthentication

At the end click on Save

3.    As a result you should see now your new destination listed

1. Switch to the tab HTML5 Applications, click on New Application and call your application tempdemowebide. Click on Save

2. The application should now appear in the list of HTML5 Applications.

Now click on the pencil icon in the row of your newly created app.

3. The Web IDE starts and informs you now that it’ll clone the empty Git repository into the Web IDE.

Just confirm by clicking on the OK button.

4. Finally you need to provide your credentials. Just do so. Ideally just click on the Remember Me field so you don’t have to provide them again.

Click on the OK button to move on.

5. Your project was created.

Now let’s fill it with our code.

1. Open the menu Tools > Preferences

2. Click on Git Settings and confirm or modify the provided credentials.

Ideally you should confirm by clicking on OK and after that saving these settings by clicking on Save and acknowledge the changes with a final click on OK.

1. Now let’s create the app via a template. Click on the project tempdemowebide, right-click on it and select  New > Project from Template

2. Select the template SAPUI5 Application Project and click on Next

3. Confirm the project name tempdemowebide by clicking on Next

4. In this last step provide the following information:

View Type: JavaScript

View Name: weather

As a last step click on Next

5. Finish the creation of the app with a click on Finish

1. Double-click on the file called neo-app.json

2. Substitute the code there with the code listed here in the right on the right and after that click on the Save button on the top left.

{

“authenticationMethod”: “none”,

    “routes”: [

        {

“path”: “/openweathermap”,

“target”:

            {

“type”: “destination”,

“name”: “openweather”

            },

“description”: “OpenWeather System”

        },

        {

“path”: “/resources”,

“target”: {

“type”: “service”,

“name”: “sapui5”,

“entryPath”:”/resources”

            },

“description”: “SAPUI5”

        }

    ]

}

3. Double-click on the file called weather.view.js in the view folder

      sap.ui.jsview(“view.weather”, {

     getControllerName: function() {

              return “view.weather”;

     },

     createContent: function(oController) { // Create the page and the weather tiles

              var mainPage = this.buildMainPage(“main”, “Welcome “, [

this.buildWeatherTile(“sofia”, “Sofia”, oController),

this.buildWeatherTile(“walldorf”, “Walldorf”, oController),

                       this.buildWeatherTile(“telaviv”, “Tel aviv”, oController),

                       this.buildWeatherTile(“bangalore”, “Bangalore”, oController)

                       ]);

              return mainPage;

     },

     buildMainPage: function(id, title, content) { // creates the main container for the mobile application

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

                       title: title,

                       showNavButton: false,

                       content: content

              });

              return page;

     },

     buildWeatherTile: function(id, city, oController) { // The model contains the weather data                 

              var oModel = oController.getModelFromURL(city); // A tile is the UI element used to display the weather data

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

                       numberUnit: “Celsius”,

                       infoState: “Success”,

                       press: function() {

                                var link = “http://openweathermap.org/city/” + this.getModel().oData.id;

                                window.open(link, “_blank”);

                       }

              }); // Bind icon path from the model to the the weather tile icon

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

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

              });

              tile.setModel(oModel); // Bind the name of the city to the tile title

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

                       var longTitle = “Current weather in ” + bValue;

                       return longTitle;

              }); // Bind the weather details to the info field of tile

              tile.bindProperty(“info”, “/weather/0/description”); // Bind the 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

                       return degreesCelsius + “\u00b0”;

              });

              return tile;

     }

  });

5. Double-click on the file called weather.controller.js in the view folder

    sap.ui.controller(“view.weather”, {

// reads the weather data for the given city into a new json model

         getModelFromURL: function(city) {

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

                  oModel.loadData(“/openweathermap?q=” + city, null, false);

                  return oModel;

         }

  });

4. Please click on the Activate and the Create version field and provide the version number 1.0

Finish by clicking on Deploy

5. Congratulations. Your app is now on SAP HANA Cloud Platform!

You can now click on the link Open the active version of the application