Skip to Content
Author's profile photo Chaim Bendelac

Developing with XS Advanced: Get started with the SAP Web IDE for SAP HANA

TinyWorld – Part 2

Get started with the SAP Web IDE for SAP HANA

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


This is part 2 of the “Developing with XS Advanced” tutorial. In part 1, Introduction to the TinyWorld application, we introduced the TinyWorld application.

Now we will get started, by creating a project with three modules, then build and run the first version of this application.

Create a project

An application is created within a context of a project. There are three options to set up a new project:


  • Create it from scratch, using a “project template”
  • Import a previously exported project archive (zip file)
  • Clone a project from an existing Git repository.

Here, we will start completely from scratch. From the file menu, select the “New > Project from Template” wizard:

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


There is currently only one project template to select, so click “Next”, enter the Project Name tinyworld, optionally add a description, and click “Next” again to complete the wizard. The IDE should now show your tinyworld project like this:

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

Create a SAP HANA database module

Now that we have an empty application project, we can add our first module, which will be a SAP HANA database (HDB) module. Select the tinyworld/ folder, right-click > “New > HDB Module” wizard:

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

Call it tinydb. Keep the default namespace. Complete the wizard to create the module.

We will now use CDS to design a small database model. CDS is a SAP enhancement to SQL for defining and consuming semantically rich data models. Navigate to the src/ subfolder of the tinydb/ module folder, right-click it and select “New > CDS Artifact”. On the window that opens switch to the text editor, and enter the name of the file: tinyf. Once the editor opens, type the following text into the file, and save it (CTRL/S on Windows).

namespace tinyworld.tinydb; 

context tinyf {

  entity world {

    key continent: String(100);

  };

};

The file is automatically suffixed with .hdbcds. This suffix is important – it determines how the file will be treated in the SAP HANA database. As you can see, our data-model has a single entity (database table) called world, with a single field (column) called continent. Our next step is to build this module, in order to deploy this design-time data model into database catalog objects that can subsequently be used.

Build the HDB module

Select the tinydb/ module folder, right-click “> Build” (or: select “Build > Build” from the top-menu). This starts the build process.


After a short time you will see this on the console: (Builder) Build of /tinyworld/tinydb completed


The data-model was successfully activated in a SAP HANA database container (aka HDI container), and can now be used to store and retrieve data. We will do this in the next part of this tutorial.


Create a Node.js module

Next we create our first Node.js app, conveniently based on the XSJS library. First, create a Node.js module. Select the tinyworld/ folder, right-click “New > Node.js module”, call it tinyjs, check the “Enable xsjs support” checkbox and finish the wizard. You will now have a new module folder with several files. Look for a file called lib/index.xsjs, and double-click it.  It opens in the JavaScript editor to show code similar to the following. Leave it as is, or go ahead and replace it with the following text, and then save:

$.response.contentType = “text/html”;

$.response.setBody(“It’s a tiny JS World!”);

We could first build the Node.js module, but we can also just directly run it (this will automatically build it too). Select the tinyjs/ module folder, right-click > “Run > Run as Node.js Application”.  A new browser tab will open with the URL of the app.


Return to the Web IDE tab, to watch progress on the “Run console”. After some delay, the status switches from “New” to “Running” to indicate that your small Node.js app has been deployed to the XS Advanced Node.js runtime. Switch to the app’s tab, or access it with the URL you see at the bottom of the Run console, like this:


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

And you will now see “It’s a tiny JS World!” on your screen.

Create an HTML5 module

Similarly, add an HTML5 module to the project and call it tinyui. Then, double-click the generated resources/index.html file to open it in the Web IDE HTML/JS editor. Select and replace the file content with the following:

<!DOCTYPE html>

<html> <body> Tiny HTML World! </body> </html>

Then, run the web app from the toolbar or right-click the tinyui/ module folder > “Run > Run as > Web Application”:

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

The text “Tiny HTML world” will appear in another tab of your browser. You can also click the link to the app which appears at the bottom of the tinyui run console.

Summary of part 2


In a few minutes, we learned how to use the Web IDE to develop a small (and, admittedly, pretty useless…) application, consisting of three separate modules.


Note that each module stood by itself: the business logic didn’t access the data model, and the UI app didn’t access the business logic. We will address this in the next part of this TinyWorld tutorial (Create a SAP HANA based client-server application).

Other parts of the TinyWorld tutorial:

Part 1: Introduction to the TinyWorld application


The basic totorial

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



Assigned Tags

      22 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      FWIW:

      • I had trouble creating a project using IE as my browser. Switching to Chrome worked better.
      • The lib/index.xsjs contained the following content:

       

                $.response.contentType = "text/plain";

                $.response.setBody("Hello World");

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

      Hi Kate,

      Thanks for your comments.

       

      I have added slightly modified this blog to be more clear about the default hello text. Part 1 now recommends Chrome, as it should have.

      --

      Chaim

      Author's profile photo Naresh Setty
      Naresh Setty

      When i try to build a DB module in webide, I get this following error

       

      Build of nareshtest failed. Builder 'mtabuilder' is not available for workspace workspace546nnbvigd48f0gk.

       

      Also I see root folder name as "workspace" in webide comapre to "local" in this blog?

       

      Pl. advice

      Author's profile photo Nachshon Vagmayster
      Nachshon Vagmayster

      Hi Naresh

       

      Which version of web IDE for HANA are you using?

       

      Best Regards

      Nachshon

      Author's profile photo Naresh Setty
      Naresh Setty

      When I installed SPS12, WebIDE gets installed automatically with it. I am not sure the version?

      Author's profile photo Nachshon Vagmayster
      Nachshon Vagmayster

      In SPS12 an additional application 'di-builder' is deployed in runtime onto the XS space which was defined in the DI mtaext file (this is usually be - DEV). This application is responsible for executing the Build actions.

       

      The deployment of the 'di-builder' application is triggered when a user, logs into WebIDE and creates a project. A common issue is that the developer does not have the right permissions (a 'SpaceDeveloper' role) for the defined Development Space. 

       

       

       

      Take a look at the mtaext file used in the web IDE installation, the development space is maintained in the parameter DEV_SPACE. Next, make sure the user you have logged in with to web IDE have the SpaceDeveloper role in that development space. You can do that by executing the following XS client commands

       

       

       

      xs target -s <dev space>

      xs space-users myorg <dev space>

       

       

       

      This will list the different roles in the system and the users assigned to them. If your user is not listed for SpaceDeveloper role, run the following command

      xs set-space-role <user name> myorg <dev space> SpaceDeveloper

       

       

       

      To re-trigger the di-builder deployment process you have to create a new MTA project.

       

      Hope that helps.

      Nachshon

      Author's profile photo Former Member
      Former Member

      Hi Nachshon,

       

      I also have the same problem even after recreating a new MTA project in webide with the space role specified to the user. I've also restarted di-core, but it didn't help..

       

      Here is the result of 'xs apps':

       

      Getting apps in org "orgname" / space "SAP" as XSA_ADMIN...

      Found apps:

       

       

      name                    requested state   instances   memory

      -----------------------------------------------------------------------------------------

      deploy-service          STARTED           1/1         280 MB

      component-registry-db   STOPPED           0/1         16.0 MB

      component-registry      STARTED           1/1         128 MB

      product-installer       STARTED           1/1         256 MB

      hrtt-service            STARTED           1/1         512 MB

      hrtt-core               STARTED           1/1         512 MB

      hrtt-db                 STOPPED           0/1         256 MB

      di-core-db              STOPPED           0/1         256 MB

      di-local-npm-registry   STARTED           1/1         <not specified>

      di-core                 STARTED           1/1         512 MB

      di-runner               STARTED           1/1         512 MB

      webide                  STARTED           1/1         1.00 GB

       

      As you can see, there is no di-builder deployed into the xs apps. When I checked the DEV_SPACE, there was no apps deployed in that space.

       

      Is there any other way to deploy the di-builder in SPS12?

       

      Best regards,

      Wonseok

      Author's profile photo Dirk Raschke
      Dirk Raschke

      Hi Wonseok,

      keep also an eye on this post: SAP XS Advanced Builder not available

      BR,

      Dirk

      Author's profile photo Naresh Setty
      Naresh Setty

      I dont see any space like "DEV", all i see is PROD and SAP. I dont remember what space used during sps12 installation. I am not sure if installation asked for webide development space. How do I find out now after the install?

       

      If I switch my user to PROD space and try this, I still get the same error message.

       

      After SPS12 installation, how do we switch the space for WEBIde to use?

       

      Pl. advice

      Author's profile photo Nachshon Vagmayster
      Nachshon Vagmayster

      You can run the following xs client commands to know what is your Development space as provided during installation:

       

      xs target -s SAP

      xs env di-core | grep DEV_SPACE

       

      Example output:

      DEV_SPACE: PROD

       

       

      Once you find out your development space, check if the di-builder is deployed there. If not than make sure your user is granted with the appropriate SpaceDeveloper role, as I specified in my previous replay.

       

      Best Regards

      Nachshon

      Author's profile photo Former Member
      Former Member

      Hi,

       

      Did you resolve the issue? If yes, may I know how?

       

      I did the following but I am not sure if it is a good way...

       

      xs set-env di-core DEV_SPACE SAP

       

      Just changed the parameter to SAP from DEV, then Build works...

      But how can i use another spcae?

       

       

      Best regards,

      Daniel

      Author's profile photo Naresh Setty
      Naresh Setty

      I reinstalled SPS12 along with webide and used the DEV space during installation which resolved the issue.

      Author's profile photo Jay Malla
      Jay Malla

      Hi Daniel,

      Were you running HANA Express by any chance?  I am using HANA Express on AWS and running into problems with the build.  When I try to build, I get the error: HANA Express – Builder ‘mtabuilder’ is not available for workspace.  When I try to run a nodeJS module, I get the error:

      I added SpaceDeveloper in the SAP space to XSA_DEV.  I also set the environment variable DEV_SPACE to SAP.  I have the project set to SAP space - but the build is still not working and I am stuck.  Any insight?

      Thanks,

      Jay

      Author's profile photo Former Member
      Former Member

       

      Hi, i have the same issue, but couldn’t solve it.

      xs set-env di-core DEV_SPACE SAP didn’t work for me.. is there a way to set the correct dev space?

      Also coudn’t install the di-core with the mtaext file, cause it was thowing errors.. .so i had to install it without it. Is there a way to put the mtaext parameters now?

      I have been reinstalling xsa and trying and trying and there doesn’t seem to be a workarround (and now SAP took out the note for installing webide for SPS12 which seems odd also)

      Thanks.-

      Author's profile photo Will Crowe
      Will Crowe

      Could you specify exactly which template you used?  In the blog you say "there is only one template available", but I have something like 12 to choose from, and not sure which one is correct.  None that I have seem to match up with the screens and choices that you are showing.  I don't see anyplace where I can create an SAP HANA Database module.

      Author's profile photo Former Member
      Former Member

      Hello, i have the same issue, builder not available.

      di-core and di-runner apps are running in SAP space. But I am working in DEV space. should i install the webide in DEV space ?

      Thanks in advance

       

      Author's profile photo Anuj Sethi
      Anuj Sethi

      Did you make any progress on this? I have the same issue, have opened a  new thread for this. There are no apps running in DEV space so changed my DEV_SPACE to SAP but that did not help either.

      Author's profile photo Former Member
      Former Member

      Hi Anuj,

      you need to log on into the di-space-enablement-ui, you can get the link with xs app di-space-enablement-ui --urls.

      Run that and it will install the di-builder into any space you select (in your case the DEV space).

      Author's profile photo Jay Malla
      Jay Malla

      Hi Anuj – did you ever get this working on HANA express SPS 12.  I did see your comment on – https://github.com/SAPDocuments/Tutorials/issues/1651

      I am running into the same issue.  I think according to Thomas Jung's reply on the SAP HANA development course, we should just develop in the SAP space for the HANA Express SPS 12.

      Regards,

      Jay

      Author's profile photo Jonathan Ma
      Jonathan Ma

      Can you please update this document? The screens are quite different in Hana 2.0.

      Thanks!

      Author's profile photo Stefano Cataldo
      Stefano Cataldo

      Hi everybody,

      a small suggestion to who wants to make this tutorials. I have the topic, that I have to replace all the inverted commas " " or ' ' (German: Anführungszeichen) after copy the code. Other ways I didn't work.

      Have a lot of fun, Stefano

      Author's profile photo Bert Furey
      Bert Furey

      When I right click on the tinyjs folder and Run as Node.js Application the build fails with an initial error of:

      make: g++: Command not found

      any suggestions on how to fix this?