Developing with XS Advanced: A TinyWorld Tutorial
TinyWorld – Part 1
Introduction to the TinyWorld application
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.
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:
- tinyui: A UI app module, written with HTLM/JS
- tinyjs: A business logic module, written with Node.js
- 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 !
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!
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.
Hi Chaim,
that's sounds great! 🙂
We are very excited for next Web IDE release!
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?
That awkward moment when your comment has been approved two days after the question has been answered )
Hi
Thanks for the blogs. How do I get access to the SAP Web IDE for SAP HANA?
Kind regards
Documentation and installation information: http://scn.sap.com/docs/DOC-71432.
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,
Exactly. Although it is the same framework underneath, these are currently 2 disjoint editions of the same product.
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
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.
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:
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?
... 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?
thank you for the blog.
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
Gautami, did you figure out this issue? I´m having the same.
Thanks, Eric