Developing with XS Advanced: Get started with the ...

Chaim_Bendelac · ‎2016 Mar 28

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