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
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:
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:
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:
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:
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”:
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
FWIW:
$.response.contentType = "text/plain";
$.response.setBody("Hello World");
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
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
Hi Naresh
Which version of web IDE for HANA are you using?
Best Regards
Nachshon
When I installed SPS12, WebIDE gets installed automatically with it. I am not sure the version?
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
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
Hi Wonseok,
keep also an eye on this post: SAP XS Advanced Builder not available
BR,
Dirk
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
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
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
I reinstalled SPS12 along with webide and used the DEV space during installation which resolved the issue.
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
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.-
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.
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
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.
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).
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
Can you please update this document? The screens are quite different in Hana 2.0.
Thanks!
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
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?