Last year in May the SAP HANA Cloud Platform got a really cool new feature. From May 21st, 2014 on it got very easy to deploy HTML5 apps on the SAP HANA Cloud Platform and along with that users also got Git repositories to support that new feature. At that point in time I wrote a blog post showing how to deploy HTML5 apps on SAP HANA Cloud Platform.

Since then a lot of happened and the SAP Web IDE was developed and introduced. Today a new feature was added that makes the usage of the Web IDE even easier. It’s “just” a little additional icon next to the name of your HTML5 app in the cockpit, but I really love the simplicity coming along with that so that I decided to write a new blog post to show how you can develop and deploy HTML5 apps in the build-in Web IDE of the SAP HANA Cloud Platform.

As a basis I’ll take the same code I’ve used in my initial blog, but will do everything inside the Web IDE.

This is now the step-by-step description on how to do it.

Step1: Create the destination

Before starting creating the app we’ll create a destination to the openweathermap API.

Explanation Screenshot

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

Step1_1.png

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

Step1_2.png

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

Step1_3.png

Step 2: Create the HTML5 Application

Now let’s create the HTML5 app. Pay attention to step 2 where the “magic happens” :-).

Explanation Screenshot

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

/wp-content/uploads/2015/03/step2_1_673646.png

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.

/wp-content/uploads/2015/03/step2_2_673647.png

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.

/wp-content/uploads/2015/03/step2_3_673648.png

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.

/wp-content/uploads/2015/03/step2_4_673649.png

5. Your project was created.

Now let’s fill it with our code.

/wp-content/uploads/2015/03/step2_5_673650.png

Part 3: Setup your Git settings

Last step in our preparations. We’ll setup the Git settings in the Web IDE.

Explanation Screenshot

1. Open the menu Tools > Preferences

/wp-content/uploads/2015/03/step3_1_673651.png

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.

/wp-content/uploads/2015/03/step3_2_673655.png
3. Switch back to the development view by clicking on the </> symbol on the top left. /wp-content/uploads/2015/03/step3_3_673656.png

Part 4: Create the app

Explanation Scrennshot

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

/wp-content/uploads/2015/03/step4_1_673657.png

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

/wp-content/uploads/2015/03/step4_2_673661.png

3. Confirm the project name tempdemowebide by clicking on Next

/wp-content/uploads/2015/03/step4_3_673662.png

4. In this last step provide the following information:

View Type: JavaScript

View Name: weather

As a last step click on Next

/wp-content/uploads/2015/03/step4_4_673663.png

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

/wp-content/uploads/2015/03/step4_5_673664.png
6. A project skeleton was created for your project tempdemowebide /wp-content/uploads/2015/03/step4_6_673665.png

Part 5: Provide the source code

Explanation Screenshot

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

/wp-content/uploads/2015/03/step5_1_673666.png

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

/wp-content/uploads/2015/03/step5_3_673667.png
4. Substitute the code there with the code listed here in the right on the right and after that click on the Save button.

      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

/wp-content/uploads/2015/03/step5_5_673669.png
6. Substitute the code there with the code listed here in the right on the right and after that click on the Save button.

    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;

         }

  });

Part 6: Test the app and & deploy to SAP HANA Cloud Platform

Explanation Screenshot
1. Select the file index.html and press the Run button /wp-content/uploads/2015/03/step6_1_673670.png
2. The application should be launched in a new window /wp-content/uploads/2015/03/step6_2_673671.png
3. Switch back to the Web IDE window, right-click on the tempdemowebide folder and select the commands Deploy > Deploy to SAP HANA Cloud Platform /wp-content/uploads/2015/03/step6_3_673672.png

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

Finish by clicking on Deploy

/wp-content/uploads/2015/03/step6_4_673673.png

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

/wp-content/uploads/2015/03/step6_5_673674.png
6. Your application is up and running /wp-content/uploads/2015/03/step6_6_673675.png

I hope this step-by-step guide helps you a bit to get started with creating HTML5 apps with the Web IDE.

Best,

Rui

To report this post you need to login first.