Skip to Content

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



To report this post you need to login first.

17 Comments

You must be Logged on to comment or reply to a post.

  1. Kate Wringe

    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”);

    (0) 
    1. Chaim Bendelac 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

      (0) 
  2. 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

    (0) 
        1. 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

          (0) 
          1. Won Seok Kim

            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

            (0) 
          2. 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

            (0) 
            1. 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

              (0) 
            2. Daniel Wang

              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

              (0) 
  3. Franco Lezana

     

    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.-

    (0) 
  4. 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.

    (0) 
  5. Houssem Eddine Hariz

    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

     

    (0) 
    1. 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.

      (0) 
      1. Houssem Eddine Hariz

        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).

        (0) 

Leave a Reply