This blog post is part 1 of a series of blogs on how to develop full-stack To-Do application in SAP Web IDE Full-Stack.

Prerequisites

Before reading this blog please make sure that you have read, understood and implemented part 0 of this series there I have shown how to setup the environment for developing full-stack applications in SAP Web IDE Full-Stack.

Let’s Get Started!

Create your database module

The database module will allow you to create and provision HANA database tables and views, following the SAP HANA programming model.

To create a new database module, follow these steps:

• In SAP Web IDE select your todo project
• Right click it and select New > SAP HANA Database Module 
• Enter db as the module name and click Next
• Remove the namespace (only for the sake of this blog) and make sure that SAP HANA Database Version is 1.0 SPS12. Then click Finish
• 
• SAP Web IDE creates a new db folder in your todo app that contains all the artifacts of your database module. Also the mta.yaml file is updated accordingly.

Now let’s create the HANA data model:

• Expand the db folder, right-click the src folder and select New > HDB CDS Artifact*HDB CDS stands for SAP HANA Core Data Services and it is the approach to transform design time resource into a HANA database objects defined in the CDS document. In simple words: you model your entities and their properties in a simple syntax and all the relevant database artifacts are dynamically generated during deployment.
• Name it todo and click Create
• Expand the src folder and double click on todo.hdbcds file for editing it
• You will immediately notice that SAP Web IDE opens the HDBCDS graphical editor for you. This editor allows you to easily create or change your HANA data model.
• Inside the graphical editor, create a new DB Entity by clicking on the entity icon. Then position it somewhere in the white area and name it Task
• Double-click the entity title and click on the + icon to create the following property:
  • Name: id
  • Type: Primitive Type
  • Data Type: String
  • Length: 10
  • Key: true
  • Not Null: true
  • 

• Following above step, continue to create the below properties:
  • Name: title
  • Type: Primitive Type
  • Data Type: String
  • Length: 100
  • Key: false
  • Non Null: true
  • Name: note
  • Type: Primitive Type
  • Data Type: String
  • Length: 250
  • Key: false
  • Non Null: false
  • Name: status
  • Type: Primitive Type
  • Data Type: Integer
  • Key: false
  • Non Null: false
  • Default: 0
• After creating all the properties of the Task entity, it should look like the below:
• Save your changes and click on the back button to navigate back to the previous screen
• In this screen you should be able to see the new properties you added to the entity.
• Now create another entity and name it SubTask
• Double-click it and add the following properties:
  • id – String length 10, mark as key and not null
  • taskId – String length 10, mark also as key (it is a foreign key for the Task entity) and not null
  • content – String 100, not null for holding the sub task content
  • status – Integer, default value is 0
• Now create a relationship between Task and SubTask. We will create 1 to n relationship because each task can have several subtasks:
  • Click on the Task entity to select it
  • Click on the Association button 
  • Drag and drop a line from the Task entity to the taskId property of the SubTask entity
  • In the dialog enter FromTaskToSubTask as the Name of the association
  • Under Source Cardinality select 1
  • Under Target Cardinality select [0..*]
  • Make sure that Managed is selected under Type and taskId is the Association Key
    
  • Click OK

    

• Now that you have your HANA data model ready, it’s time to build your db module. Building MTA modules requires CF runtime so you must make sure that your project is connected to a SAP Cloud Platform, Cloud Foundry Org and Space:
  • In SAP Web IDE, select your project folder (todo)
  • Right click it and select Project Settings
  • Select Space from the left side menu
  • Select your Cloud Foundry API Endpoint – SAP Web IDE will show you a popup dialog for entering your CF credentials. Make sure you use your email address as username.
  • Select your CF Org and Space – If you are using your trial account, you will see only one org and one space and SAP Web IDE will auto select them for you.
  • Next, install the builder by clicking on the Install Builder button – Notice that installing a builder can take several minutes and you will not be able to build your modules until it is finished.
  • Click Save and wait for the builder to be installed in your SAP Cloud Foundry environment.
• Now that your CF builder is installed it’s time to use it to build your db module. Right-click the db folder and click Build
• SAP Web IDE will now send a request to build your project. You will be able to see the build logs and status in SAP Web IDE runtime console. If you see “Build of /todo/db completed successfully” it means that everything went well and your database module has been built!

Test your database module

In the previous section you created your HANA database module and built it. In order to test the outcome of the build process you need to connect to your HANA database instance, search for the scheme and check if the build process has created 2 tables: one for the Task and another for the SubTask with all of their properties.

In order to connect to your SAP HANA database instance you need to do the following:

1. Download and install Eclipse
2. Install SAP HANA Database Eclipse plugin
3. Go to your Cloud Foundry account and search for the SAP HANA connection string under VCAP SERVICES
4. Grab the scheme id, username and password from there
5. ….
6. ….

Looks exhausting right? Don’t worry, it’s only a joke 🙂  

Lucky for you, SAP Web IDE Full-Stack has the HANA Database Explorer plugin integrated in it,  and it provides an easy and intuitive way to connect, test and provision your SAP HANA database instance on Cloud Foundry!

• In SAP Web IDE Full-Stack, click on the Database Explorer icon which is located on the left side pane
• Click the Connect button
• Click on the + button to add a new database to the database explorer
• Search for your database by typing todo inside the text field. The Database Explorer will show you all schemes that contain the word todo 
• Select your scheme and click OK 

  

• After clicking OK you should notice that the new database has been added to the list of databases
• Now, you can execute any query to this database, check the data and metadata of your tables, views and more.
• Let’s verify our tables were created. Click on Tables (located under your database scheme) and check that both tables exist
• To verify the tables metadata, double-click each table tto see the list of fields and their type
• Please verify that the field types are equivalent to how you modeled them in your hdbcds file 

Congrats! You have created a database module and generated HANA tables on SAP Cloud Foundry!

Bonus! Create or load data

What’s a table without data? 🙂
In order to create some data (without having an app) we can do one of the following:

• Create some data in SAP Web IDE using the HANA Database Explorer
• Load initial data to the tables during build by creating hdbtabledata & csv files.

Creating data using the HANA Database Explorer

• In SAP Web IDE, open the HANA Database Explorer
• Click on Tables under your scheme
• Select the table you want to create data in
• Right click it and choose Open Data 
• 
• The table data will be opened in a new tab (at first you will not see any data)
• To create a new entry, simply click on the + button, enter task id, task title, note and status and click the Save button

Load initial data during the build process

To load initial data during the build process you will need to create the following files:

• todo.hdbtabledata – contains the information on the table fields and the CSV files that will fill them with data

  { 
    "format_version": 1, 
    "imports": 
    [ { 
  		"target_table": "todo.Task", 
  		"source_data" : { "data_type" : "CSV", "file_name" : "tasks.csv", "has_header" : true }, 
  		"import_settings" : { "import_columns" : [ "id", "title","note" ] }, 
  		"column_mappings" : { "id" : 1, "title" : 2, "note" : 3 	} 
  	},
  	{ 
  		"target_table": "todo.SubTask", 
  		"source_data" : { "data_type" : "CSV", "file_name" : "subtask.csv", "has_header" : true }, 
  		"import_settings" : { "import_columns" : [ "id","taskId","content"] }, 
  		"column_mappings" : { "id" : 1, "taskId" : 2, "content" : 3 	} 
  	}
    ] 
  }​

• tasks.csv – contains initial data for the Task table

  id,title,note
  1,my first task, this is my first task
  2,my second task,my second task​

• subtask.csv – contains initial data for the SubTask table

  id,taskId,content
  1,1,First task subtask
  2,1,First task second sub task
  3,2,Second task subtask​

These files should be created under the src folder of your db module. After creating these files your project structure should look like the below:

When everything is ready you can build your project again, and go to the HANA Database Explorer to see the data from the CSV files in the Task and SubTask tables.

Now you can continue to the server-side development, in part 2.