Skip to Content
Author's profile photo Chaim Bendelac

Developing with XS Advanced: A TinyWorld Tutorial

TinyWorld – Part 1

 Introduction to the TinyWorld application

/wp-content/uploads/2016/03/image001_916210.png

Hello!

 

In his recent blog post, SAP HANA SPS 11: New Developer Features; XS Advanced, Thomas Jung introduced XS Advanced, the new application service that is included with SAP HANA, starting with SPS11.

This blog is the first part in a multi-part tutorial, in which we will learn how to develop business applications for SAP HANA and XS Advanced.

In the past you may have used the SAP HANA studio. In this tutorial, we will build our application using the brand new SAP Web IDE for SAP HANA.

SAP Web IDE for SAP HANA (herein: Web IDE) is available with HANA SPS11 and later, for use with XS Advanced. It is a new adaption of the existing SAP Web IDE (available on HCP), and is specially designed for developing entire business applications on SAP HANA.

/wp-content/uploads/2016/03/screenshot_842_916215.jpg

Figure 1 – SAP Web IDE for SAP HANA

 For more information on how to obtain and install the SAP Web IDE for HANA, and for full documentation, see http://scn.sap.com/docs/DOC-71432.

See SAP HANA SPS 11: New Developer Features; SAP Web IDE for SAP HANA for additional links, including a SAP Academy recording of this tutorial, for those of you who prefer watching  videos.

Multi-module business applications

Business applications usually consist of multiple tiered parts (modules) which together form a complete application.

The most common case is a multi-module application consisting of a database model, some business logic (written in a server-side programming language like Java or Node.js), and a user interface app that accesses the data model via the business logic or via OData interfaces.

Developers of multi-module applications must carefully agree on APIs. Testing, installing and deploying such applications (particularly in cloud environments) is very challenging due to the need to orchestrate all these different activities.

SAP HANA based multi-module applications usually follow a standard pattern: the database model consists of data aggregations, filters and selection logic on top of basic tables, designed using CDS specification language and rich Calculation Views. The data model can be accessed via SQL, or can be exposed via OData to allow UI apps to directly access the data. UI apps usually use the SAP UI5 design library.

The TinyWorld application

To illustrate the use of the Web IDE and of programming in the SAP HANA XS Advanced environment, we are going to develop a small application called “TinyWorld”.

TinyWorld is an example of such a three-tier multi-module application. Users use it to create and view a simplified model of the world, merely consisting of continents and their countries.

TinyWorld comprises the following modules:

  1. tinyui: A UI app module, written with HTLM/JS
  2. tinyjs: A business logic module, written with Node.js
  3. tinydb: An SAP HANA database module

As you may have inferred, it is intentionally a really small application, so that you will not be distracted by unnecessary details, and can focus on the development experience of working with SAP HANA and XS Advanced.

To gain a good understanding of the development process we recommend that you try to follow the steps of the tutorial in the order it is presented. However, if you do not have time, you can also access and study the source code, and then read this tutorial to understand how it was constructed (see the Appendix for instructions).

The entire TinyWorld tutorial is structured as follows:

Part 1: Introduction to the TinyWorld application (this blog)

The basic tutorial

Part 2:   Get started with the SAP Web IDE for SAP HANA

Part 3:   Create a SAP HANA based client-server application

Part 4:   Add SAP HANA business logic

Part 5:   Add business logic with Node.js

Advanced topics

Part 6:   Create Node.js unit tests

Part 7:   Under the hood

Part 8:   Source control

Part 9:   Application life cycle

Part 10: Add authentication

Part 11: Add authorization

Appendix: Getting the source code

More sections will be added over time, so keep checking back.

 

Prerequisites for this tutorial

Become a qualified developer

To access the Web IDE, you will need the username and password of a development user.  Details depend on how users, authentication and XS Advanced orgs are configured in your landscape. If SAP HANA is the identity provider of your system (usually), here is how your administrator might create a development user called Peter:

  • Using a HANA console (Studio, Cockpit, hdbsql client, etc.), enter the following SQL:

create user Peter password "MySecret1" set parameter 'XS_RC_XS_CONTROLLER_USER' = 'XS_CONTROLLER_USER'

  • Using the XS command line tools, login to xs (system/installation dependent) and enter:

xs set-space-role Peter initial SAP SpaceDeveloper

Note: In order to deploy applications into another space, you will require SpaceDeveloper rights in that space as well.

Login to the Web IDE and the SAP HANA run time tools

The actual URL of the Web IDE is installation dependent. The following command returns the URL in your system:

xs app webide -urls

Use the resulting URL in your browser (Chrome, Netscape). For the first time, you may be required to change your administrator-provided password (i.e. Mysecret1, in the above example). Also, ignore any “your connection is not private” messages you may see.

Similarly, the URL of the SAP HANA runtime tools (herein RTT) can be determined via the following command:

xs app hrtt-core -urls

This tool is loaded in a separate browser window.

We recommend the use of Chrome or Firefox as your browser for the completion of this tutorial.

 

Summary of part 1

This blog is the first of a multi-part tutorial, teaching you how to develop HANA based applications with XS Advanced, using the new SAP Web IDE for SAP HANA development tools.

We hope that you will enjoy the rest of this tutorial.

And now, let’s get started: Get started with the SAP Web IDE for SAP HANA !

Assigned Tags

      16 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Dirk Raschke
      Dirk Raschke

      Hi,

      I'm wondering, why I'm not authorized to open this link.

      http://scn.sap.com/docs/DOC-71432

      Is this link only for sap-user reachable?

      BR

      Thanks for this nice and helpful blog!

      Author's profile photo Chaim Bendelac
      Chaim Bendelac
      Blog Post Author

      Hi Dirk,


      Thanks!


      The SAP Web IDE for SAP HANA is released today (29 March 2016), and the documentation link (and some of the next chapters in this blog series) will be published later in the day.

      Author's profile photo Dirk Raschke
      Dirk Raschke

      Hi Chaim,

      that's sounds great! 🙂

      We are very excited for next Web IDE release!

      Author's profile photo Alex Myakinkii
      Alex Myakinkii

      Hello Chaim.

      Thanks for this nice article set.

      Your efforts to moving xs advanced to production-ready state are really impressive with web ide integration.

      That's much more convenient way to manage applications than external editors/vcs and command line services manipulation and deploy.

      Unfortunatelly we were unable to read the documentation at http://scn.sap.com/docs/DOC-71432 with any of our logins.

      We have on-premise sps11.

      Is there a way to get web ide and test it in our landscape at the moment?

      Author's profile photo Alex Myakinkii
      Alex Myakinkii

      That awkward moment when your comment has been approved two days after the question has been answered )

      Author's profile photo Timothy Muchena
      Timothy Muchena

      Hi

      Thanks for the blogs. How do I get access to the SAP Web IDE for SAP HANA?

      Kind regards

      Author's profile photo Chaim Bendelac
      Chaim Bendelac
      Blog Post Author

      Documentation and installation information: http://scn.sap.com/docs/DOC-71432.

      Author's profile photo Luca Manassero
      Luca Manassero

      Hi,

      if I understand it correctly the SAP Web IDE you're using for this tutorial is NOT presently available on SAP HCP, or is it?

      Thanks,

      Author's profile photo Christoph Pohl
      Christoph Pohl

      Exactly. Although it is the same framework underneath, these are currently 2 disjoint editions of the same product.

      Author's profile photo Former Member
      Former Member

      Hi... I am new to SAP WEB IDE. I am exploring to start with node js sample prog. But I dont see the choose New--> Node.js Module  option in my web IDE view.

      Appreciate if someone can help me here what is missing, Thanks 

      Author's profile photo Jay Malla
      Jay Malla

      Note SAP webIDE for HCP is different from SAP webIDE for SAP HANA (SPS11, SPS12 and HANA 2.0).  You need access to one of those HANA systems instead of using HCP.  I ran into the same issue looking to the option for Node.js  and not finding it.  I launched the HANA Express edition on AWS and was able to get to the SAP webIDE for SAP HANA.

      Author's profile photo Morten Espelid
      Morten Espelid

      Hi,

      I get "Forbidden" when trying to access the Web IDE. The log says: "GET request to /watt/index.html completed with status 403 - You do not have the required scopes to access this resource."

      I think I have the correct components installed. I have:

      • XS Monitoring - Installed Version: 1.4.0
      • SAP Web IDE Web Client - Installed Version: 4.1.0
      • SAP HANA XS Advanced Runtime - Installed Version: 1.0.55.288028

      I have access to Web UI for XS Advanced Administration.

      I have users with parameter: parameter 'XS_RC_XS_CONTROLLER_USER' = 'XS_CONTROLLER_USER'

      I have given: xs set-space-role Morten orgname SAP SpaceDeveloper, I tried the same for user XSA_ADMIN

      I have made a role collection with Role Template (and Role Name) = WebIDE_Developer (this is from Application Name webide!i1).

      I have assigned this role collection to both XSA_ADMIN and Morten.

      The command: "xs app webide -urls" tells me the WebIDE is at https://vhcalhdbdb.dummy.nodomain:51023, so I go there, but get the error mentioned: Forbidden.

      What have I missed?

       

      Author's profile photo Carsten Ziegler
      Carsten Ziegler

       

      ... and then you use your Netscape Communicator to enter the string into AltaVista and while the search engine works you play a round of Pong...

      Time-travelling?

      Author's profile photo Christine Unkmeir
      Christine Unkmeir

      thank you for the blog.

      Author's profile photo Gautami Edara
      Gautami Edara

      Hi Chaim Bendelac,

       

      Thank you for the tutorial.

      I have followed the tutorial stepwise and facing issue in binding the data.

      Error in the console says -  " initial loading of metadata failed (404) ".

      I have added the required code under mta.yaml -

      ID: tinyworld
      _schema-version: '2.1'
      version: 0.0.1

      modules:
      - name: tinydb
      type: hdb
      path: ./tinydb
      requires:
      - name: hdi_tinydb

      - name: tinyjs
      type: nodejs
      path: ./tinyjs
      requires:
      - name: tinydb
      - name: hdi_tinydb
      provides:
      - name: tinyjs_api
      properties:
      service_url: ${default-url}

      - name: tinyui
      type: html5
      path: ./tinyui
      parameters:
      disk-quota: 512M
      memory: 256M
      build-parameters:
      builder: grunt
      requires:
      - name: tinyjs_api
      group: destinations
      properties:
      name: tinyjs_be
      url: ~{service_url}
      resources:
      - name: hdi_tinydb
      type: com.sap.xs.hdi-container
      properties:
      hdi-container-name: ${service-name}

      index.html

      <!DOCTYPE HTML>
      <head>
      <meta http-equiv"X-UA-Compatible" content="IE=Edge"/>

      <title>DevXdemo</title>

      <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"

      id="sap-ui-bootstrap" data-sap-ui-libs="sap.ui.commons, sap.ui.table" data-sap-ui-theme="sap_bluecrystal">

      </script>

      <script>

      var oModel = new sap.ui.model.odata.ODataModel("/euro.xsodata", true);

      var oTable = new sap.ui.table.Table({ title: "European Countries" });

      oTable.addColumn(new sap.ui.table.Column({ label: "Country Name", template: "name" }));

      oTable.setModel(oModel); oTable.bindRows("/euro"); oTable.placeAt("content");

      </script>

      </head>

      <body class='sapUiBody'> <div id='content'></div> </body>

      </html>

      xs-app.json

      {
      "welcomeFile": "/tinyui/index.html",
      "authenticationMethod": "none",

      "routes": [
      {"source": "^/euro.xsodata/.*$", "destination": "tinyjs_be"},
      {

      "source": ".*\\.xsjs",

      "destination": "tinyjs_be"

      }
      ]
      }

       

      Apart from this, when I run the nodejs- xsodata file as Nodejs application it gives the dataset whereas binding in the index.html it doesn't give output.

      Can you please help me resolve this issue.

      Regards,

      Gautami Edara

      Author's profile photo Eric Cassaro
      Eric Cassaro

      Gautami, did you figure out this issue? I´m having the same.

       

      Thanks, Eric