Posted on

#7 Deploy App to SCF in SAPĀ® CAPM – 7 Steps to Get Started With SAPĀ® CAPM

Before we begin!

In this 7 blog series, we are going to provide a small end-to-end scenario to work with SAP® CAPM. Here the usecase we are going to use is of Learning Management System(LMS) and build a Student List App and Deploy it to SCF.

Link to Master(or Main) Blog from which all the other blogs can be reached is Here.

  • If you wanted to check out the detailed course on SAP® CAPM the link is Here.
  • If you want to get learn SAP® Cloud Platform Development in Detailed then we have a 35hrs hands-on course Here.
  • For current offers and discounts check offer page Here.

In this section we are going to deploy our App to SAP® Cloud Foundry(SCF) in SAP® Cloud Platform(SCP)

 

 

 

Step 1: Building DB Artifacts

Till now, we were using sqlite3 Database in the local environment to test. Now we will use HANA® DB in Cloud or HDI Container(which comes with Free Trial of SCF).

To deploy our database artifacts i.e the cds which describe the structure and csv data. We need to first convert it to SQL, in which the HDI container/HANA® DB can process the creation of the table and loading of data.

For this we need to build our db artifacts, this we do by opening .cdsrc.json and adding the content as shown below


{

"build": {

"target": "gen",

"tasks": [

{ "src": "db", "for": "hana", "options": { "model": ["db", "srv"] } },

{ "src": "srv", "for": "node-cf", "options": { "model": ["db", "srv"] } },

{ "src": "app", "for": "node-cf" }

]

}

}

 

Note: In this case, we are telling the CAPM to create a build inside folder gen(which will get created once we run cds build/all command). And inside the gen folder, we will get db, srv and app build code.

For our purpose, we only need db artifacts so the above .cdsrc.json code can be just for db build as shown below


{

"build": {

"target": "gen",

"tasks": [

{ "src": "db", "for": "hana", "options": { "model": ["db", "srv"] } }

]

}

}

Step 2: cds build/all to Build Artifacts

Now let’s start the build process which will read the .cdsrc.json file and create a gen folder and add all the build artifacts inside it


cds build/all

Step 3: Create the HDI Container in SCF

Now lets, create the HDI container in the cloud. We can do it manually with Cockpit UI or with CLI. Below us CLI Code which you can execute after you are logged in to your SCF account from CLI


cf create-service hanatrial hdi-shared somedbname

In this case, the SAP® Cloud Foundry service is hanatrail, the plan is hdi-shared and somedbname is your HDI container name.

Step 4: Change package.json DB

Open the package.json file from the project directory and update the place we have sqlite to hana i.e. from "kind": "sqlite", to "kind": "hana",.

Here, we are telling CAPM App to use HANA® DB(or HDI) connection setting


{

"name": "democds",

"version": "1.0.0",

"description": "Generated by cds init",

"repository": "<Add your repository here>",

"license": "ISC",

"dependencies": {

"@sap/cds": "^3.18.4",

"express": "^4.17.1",

"hdb": "^0.17.1",

"sqlite3": "^4.1.0"

},

"engines": {

"node": "^8.9"

},

"scripts": {

"start": "cds run"

},

"cds": {

"requires": {

"db": {

"kind": "hana",

"model": [

"db/",

"srv/"

]

}

}

}

}

 

Note: You can also run command to uninstall sqlite3 from the project if you face exit status 14 error while deploying the app to SCF with below command

npm uninstall sqlite3

or Just remove the sqlite3 dependencies from package.json.

Step 5: Create YML

To deploy our App in cloud we can either use mta.yml or manifest.yml.

Note: .yml and .yaml are both extensions of YML descriptor file and are same. But mta.yml and manifest.yml are both different kinds.

You can think mta.yml as an advanced version of manifest.yml where you have more features like adding resource bundles, also when an app is deployed with mta.yml file then in client-side a compressed zip file is created with all Apps artifacts and then this zip file is deployed to Cloud. In the case of using manifest.yml file while deploying, all files are uploaded sequentially and no zip file is created locally as in the previous case.

In our case, we use manifest.yml file in the root of the project for simplicity as shown below

Create a new file named manifest.yml


touch manifest.yml

Add Deployment information to manifest.yml file as below:


---

applications:

- name: hdbApp

path: ./gen/db

memory: 256M

health-check-type: process

services:

- somedbname



- name: newApp

path: ./

services:

- somedbname

Here, we are first deploying the db artifacts which will create the tables in HDI container(or HANA® DB) and Add data. After that, we deploy the newApp, which will deploy our CAPM App.

Step 6: cf push and Test

For deploying App in Cloud you can use the command


cf push

Which needs to be done in the root of the Project, where you see your manifest.yml file you created.

Output of the application will be

Fiori Launchpad:

Output Fiori Launchpad

 

 

Data of Students:

Output Fiori Launchpad

 

🙂 Congratulations! You have completed this series.


Before we end!

In this 7 blog series, we are going to provide a small end-to-end scenario to work with SAP® CAPM. Here the usecase we are going to use is of Learning Management System(LMS).

Link to Master(or Main) Blog from which all the other blogs can be reached is Here.

  • If you wanted to check out the detailed course on SAP® CAPM the link is Here.
  • If you want to get learn SAP® Cloud Platform Development in Detailed then we have a 35hrs hands-on course Here.
  • For current offers and discounts check offer page Here.
Posted on

#6 Creating Custom UI5 App in SAPĀ® CAPM – 7 Steps to Get Started With SAPĀ® CAPM

Before we begin!

In this 7 blog series, we are going to provide a small end-to-end scenario to work with SAP® CAPM. Here the usecase we are going to use is of Learning Management System(LMS) and build a Student List App and Deploy it to SCF.

Link to Master(or Main) Blog from which all the other blogs can be reached is Here.

  • If you wanted to check out the detailed course on SAP® CAPM the link is Here.
  • If you want to get learn SAP® Cloud Platform Development in Detailed then we have a 35hrs hands-on course Here.
  • For current offers and discounts check offer page Here.

In this part, we are going to make a UI5 App. This will allow us to separate View Code From Data Definition, i.e. the Annotations we have written in CDS view, we can separate it in UI5 App.

We can also provide our user with a Fiori® Launchpad experience and customize further the UI components.

 

 

 

 

Step 1: File structures

Create an app folder inside the project root. This will hold all our UI codes

    mkdir app

Create the UI Project Structure as below, here we have app as root for UI project, inside this we have index.cds, index.html and studentsDetails folder. studentsDetails Folder contains webapp folder which has Component.js, manifest.json and fiori-service.cds

|-- app
    |-- index.cds
    |-- index.html
    |-- studentsDetails
        |-- webapp
            |-- Component.js
            |-- manifest.json
            |-- fiori-service.cds

Step 2: index.html Code

  • In file index.html we are going to add a tile that represents our Fiori® App. The template Code for the inde.html is as below
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LMS Students</title>
    <script>
      window["sap-ushell-config"] = {
        defaultRenderer: "fiori2",
        applications: {
          "manage-Students": {
            title: "Manage Students",
            icon: "sap-icon://documents",
            description: "Students Management",
            additionalInformation: "SAPUI5.Component=studentsDetails",
            applicationType: "URL",
            url: "/studentsDetails/webapp",
            navigationMode: "embedded"
          }
        }
      };
    </script>
    <script src="https://sapui5.hana.ondemand.com/test-resources/sap/ushell/bootstrap/sandbox.js"></script>
    <script
      src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
      data-sap-ui-libs="sap.m, sap.ushell, sap.collaboration, sap.ui.layout"
      data-sap-ui-compatVersion="edge"
      data-sap-ui-theme="sap_belize"
      data-sap-ui-frameOptions="allow"
    ></script>
    <script>
      sap.ui
        .getCore()
        .attachInit(() =>
          sap.ushell.Container.createRenderer().placeAt("content")
        );
    </script>
  </head>
  <body class="sapUiBody" id="content"></body>
</html>

Step 3: index.cds Code

In index.cds we are going to add reference to file where our CDS UI Annotations are defined. In this file, we can give one or more cds file path. This also brings modular structure to our app as well.

Code of index.cds is

using from './studentsDetails/fiori-service';

Step 4: component.js Code

Inside webapp we will add a file named component.js which will basically describe about UI5/Fiori App. This also, includes the manifest.json information, which we are going to define in next step

sap.ui.define(["sap/fe/AppComponent"], ac =>
  ac.extend("studentsDetails.Component", {
    metadata: { manifest: "json" }
  })
);

Step 5: manifest.json Code

In manifest.json file we are going to define data source of service, routes, App title etc.

Below is the blank template of the manifest.json

{
    "_version": "1.8.0",
    "sap.app": {
      "id": "student",
      "type": "application",
      "title": "Students Details",
      "description": "studentsDetails",
      "dataSources": {
        "<Data Source Name>": { 
          // example: mysrvdemo or first 
          // which is your service name

          "uri": "<URL>", // example: /mysrvdemo/ or /first/
          "type": "OData",
          "settings": {
            "odataVersion": "4.0"
          }
        }
      }
    },
    "sap.ui5": {
      "dependencies": {
        "libs": {
          "sap.fe": {}
        }
      },
      "models": {
        "": {
          "dataSource": "<dataSources Name>",
          "settings": {
            "synchronizationMode": "None",
            "operationMode": "Server",
            "autoExpandSelect": false,
            "earlyRequests": false,
            "groupProperties": {
              "default": {
                "submit": "Auto"
              }
            }
          }
        }
      },
      "routing": {
        "routes": [ {
          "pattern": ":?query:",
          "name": "Student",
          "target": "Student"
        }
        ],
        "targets": {
          "Student": {
              "type": "Component",
              "id": "Student",
              "name": "sap.fe.templates.ListReport",
              "options": {
                "settings": {
                  "entitySet": "<Name of Structure>"
                  //example: Students 
                }
              }
            }
        }
      }
    }
  }

Step 6: fiori-service.cds Code

Inside fiori-service.cds we define the annotations for the UI according to which data will be rendered in screen

using first from '../../srv/schema';
annotate first.Students with @(
     UI: {
    SelectionFields: [ email,first_name],
    LineItem: [
      {Value: email,
            Label:'email'},
      {Value: first_name,
            Label:'first_name'},
      {Value: last_name,
            Label:'last_name'},
      {Value: date_sign_up,
            Label:'date_sign_up'}
    ],
  HeaderInfo: {
      TypeName: 'email', TypeNamePlural: 'Emails',
      Title: { Value: email },
      Description: { Value: first_name }
    }
}
);

Step 7: Run the App

Now save all files and run the App:


cds run --in-memory

Step 8: Output

You will see now a Fiori® Launchpad with you App placed as a Tile. If you go inside you will see List based elements showing Students details.

Fiori Launchpad:

Output Fiori Launchpad

 

 

Data of Students:

Output Fiori Launchpad

 

 

 


Before we end!

In this 7 blog series, we are going to provide a small end-to-end scenario to work with SAP® CAPM. Here the usecase we are going to use is of Learning Management System(LMS).

Link to Master(or Main) Blog from which all the other blogs can be reached is Here.

  • If you wanted to check out the detailed course on SAP® CAPM the link is Here.
  • If you want to get learn SAP® Cloud Platform Development in Detailed then we have a 35hrs hands-on course Here.
  • For current offers and discounts check offer page Here.
Posted on

#5 Create UI with Annotation in SAPĀ® CAPM – 7 Steps to Get Started With SAPĀ® CAPM

Before we begin!

In this 7 blog series, we are going to provide a small end-to-end scenario to work with SAP® CAPM. Here the usecase we are going to use is of Learning Management System(LMS) and build a Student List App and Deploy it to SCF.

Link to Master(or Main) Blog from which all the other blogs can be reached is Here.

  • If you wanted to check out the detailed course on SAP® CAPM the link is Here.
  • If you want to get learn SAP® Cloud Platform Development in Detailed then we have a 35hrs hands-on course Here.
  • For current offers and discounts check offer page Here.

Getting data in Fiori UI with annotations, just by using services.

 

 

 

Step 1: Missing Part

If we go inside by clicking on in Fiori link as shown below in the service output

Output

We will get a Fiori based App with no data, as shown below

Output

The issue here is that we have not added Annotation(s) in our data definition.
Annotations are required for UI to know how to bind the data to UI fields.

 

Step 2: Adding Annotations to Entities

We can add the UI Annotations to the CDS file present inside the db folder


    annotate Students with @(
    UI: {

        LineItem: [
            {Value: email,
            Label:'Email'}
                ]
        }
    );

Explanation of the Annotations

  • Here, we are using annotate keyword to add Annotations to entity Students
  • UI keyword specifies that its going to be added to UI
  • In selection field we add the entity fields
  • In Lineitem we add the column attributes via label and data value by value keyword
  • In identification we add the key of the entity

Step 3: Adding Header Annotations

We can also add header fields with annotations with using HeaderInfo keywords.
This will show us the data, when we navigate to next page.

So, the updated Annotations are below


annotate Students with @(
    UI: {
        LineItem: [
            {Value: email,
            Label:'email'},
            {Value: first_name,
            Label:'first_name'},
            {Value: last_name,
            Label:'last_name'},
            {Value: date_sign_up,
            Label:'date_sign_up'}
        ],
        //To add header info
    HeaderInfo: {
      Title: { Value: email },
      Description: { Value: first_name }
    }
}
);

Final CDS Code

Now the final CDS file inside db folder will apread as below

namespace myCompany.hr.lms; 
entity Students{
    key email : String(65);
    first_name : String(20);
    last_name : String(20);
    date_sign_up : Date;
}
annotate Students with @(
    UI: {

      SelectionFields: [ email,first_name],
        LineItem: [
            {Value: email,
            Label:'email'},
            {Value: first_name,
            Label:'first_name'},
            {Value: last_name,
            Label:'last_name'},
            {Value: date_sign_up,
            Label:'date_sign_up'}
        ],
        //To add header info
    HeaderInfo: {
      TypeName: 'email', TypeNamePlural: 'Emails',
      Title: { Value: email },
      Description: { Value: first_name }
    }
}
);

 

Step 4: Restart Server With New Code

Now if we restart the server with new code, we will see the Data in Fiori App, which previously we were not able to see with Fiori Preview.

This is how front page will look like

 

Output

When we click on any Line item, we can navigate to detail page and also see the Header Info, as per our Annotation

Note: Here the Title which is email is not shown because the detail page(where we navigate) is not Object Page.

 

Output


Before we end!

In this 7 blog series, we are going to provide a small end-to-end scenario to work with SAP® CAPM. Here the usecase we are going to use is of Learning Management System(LMS).

Link to Master(or Main) Blog from which all the other blogs can be reached is Here.

  • If you wanted to check out the detailed course on SAP® CAPM the link is Here.
  • If you want to get learn SAP® Cloud Platform Development in Detailed then we have a 35hrs hands-on course Here.
  • For current offers and discounts check offer page Here.
Posted on

#4 Creating Schema and Database in SAPĀ® CAPM ā€“ 7 Steps to Get Started With SAPĀ® CAPM

Before we begin!

In this 7 blog series, we are going to provide a small end-to-end scenario to work with SAP® CAPM. Here the usecase we are going to use is of Learning Management System(LMS) and build a Student List App and Deploy it to SCF.

Link to Master(or Main) Blog from which all the other blogs can be reached is Here.

  • If you wanted to check out the detailed course on SAP® CAPM the link is Here.
  • If you want to get learn SAP® Cloud Platform Development in Detailed then we have a 35hrs hands-on course Here.
  • For current offers and discounts check offer page Here.

Steps for creating Schema, Database(Local with Sqlite3) and Service

 

 

 

 

Step 1: DB and CSV Folder

Add a folder named db in the project directory

      mkdir db

Inside db folder create another folder csv

      mkdir csv

 

Step 2: Create the CDS Data Structure

Now we will create the data structure for our project, in this case we will create a simple Student entity

Create CDS

Create a .cds file where we are going to add the CDS structure

   touch filename.cds

Entity Model

Inside cds file create db model as shown below

    namespace myCompany.hr.lms;
    entity Students{
        key email : String(65);
        first_name : String(20);
        last_name : String(20);
        date_sign_up : Date;
    }

Here key is assigned as email and key is also a required field.

 

Step 3: Add CSV Data

Inside CSV folder create file using command

    touch filename.csv

Add data to the file as shown below, here we are adding data entries. The first row is coloum attribute followed by Data values of the respective Structure we created above.

email;first_name;last_name;date_sign_up
demo@demo.com;demo;demo;2019-10-10
john@demo.com;john;din;2019-10-10

Note: The filename should be same as the absolute path of the CDS entity, in this case this is myCompany.hr.lms-Students. So internally CAPM lib connects CSV Data to CDS entity.

 

Step 4: Create Service

In srv folder, we are going to create a projection without above cds structure. This will expose the CDS entity as Service.

Note: In this service, we have assigned an annotation on entity student which is @readonly. This annotation will restrict the entity to be read-only which means using the service entity records cannot be updated, deleted or inserted.
Also, here we have to be careful of the namespace, we have used the namespace myCompany.hr.lms so the service needs to use lms.Students to refer to our Student Entity in CDS view above.


using myCompany.hr.lms from '../db/<Your CDS Entity File Name>';

service  first{
   @readonly entity Students as projection on lms.Students;
}

 

Step 5: Installing Sqlite3 and Running

We can run locally with sqlite3 module, which will allow us to quickly test the result

So, let’s add sqlite3 in our project

  npm i sqlite3

Now, lets run the CDS view, we are using --in-memory tag so that CDS will run using sqlite3 DB

  cds run --in-memory

Also, if you want to deploy data to sqlite3 permanently then you can use

  cds deploy --to sqlite

After running the deploy command, the output in console will be

  > filling myCompany.hr.lms.Students from db/csv/myCompany.hr.lms-Students.csv
  /> successfully deployed to ./sqlite.db
  > updated ./package.json

And you will also see a sqlite.db file added to your project.

Now you can just use cds run next time to run app with data from sqlite DB. Also, you can use cds run --in-memory if in case, you changed some data/data structure(CDS) and want to quickly test in-memory.

 

Step 6: Final Result

We will have our application running in port 4004 by default, if we open http://localhost:4004 we will find our application running.

For seeing the data you can go to the URL: http://localhost:4004/first/Students

  {"@odata.context":"$metadata#Students",
  "@odata.metadataEtag":"W/\"FUwMtxpIrUe7k/V4eF2OyWTA9Qv5dMundzkfj2iqOWk=\"",
  "value":
  [
    {"email":"demo@demo.com",
      "first_name":"demo",
      "last_name":"demo",
      "date_sign_up":"2019-10-10"},
      {"email":"john@demo.com",
      "first_name":"john",
      "last_name":"din",
      "date_sign_up":"2019-10-10"}
    ]}

Before we end!

In this 7 blog series, we are going to provide a small end-to-end scenario to work with SAP® CAPM. Here the usecase we are going to use is of Learning Management System(LMS).

Link to Master(or Main) Blog from which all the other blogs can be reached is Here.

  • If you wanted to check out the detailed course on SAP® CAPM the link is Here.
  • If you want to get learn SAP® Cloud Platform Development in Detailed then we have a 35hrs hands-on course Here.
  • For current offers and discounts check offer page Here.
Posted on

#3 Hello World Service in SAPĀ® CAPM ā€“ 7 Steps to Get Started With SAPĀ® CAPM

Before we begin!

In this 7 blog series, we are going to provide a small end-to-end scenario to work with SAP® CAPM. Here the usecase we are going to use is of Learning Management System(LMS) and build a Student List App and Deploy it to SCF.

Link to Master(or Main) Blog from which all the other blogs can be reached is Here.

  • If you wanted to check out the detailed course on SAP® CAPM the link is Here.
  • If you want to get learn SAP® Cloud Platform Development in Detailed then we have a 35hrs hands-on course Here.
  • For current offers and discounts check offer page Here.

In this section we will be creating and running a simple CAPM Service, so lets start!

 

 

 

 

Step 1: Create a New CAPM Project

      cds init <ProjectName>

This will create a Blank project of capm.

You will see 3 main content in the folder:

  • package.json
  • package-lock.json
  • node_modules

On going inside the node_modules folder you will see list of individual modules which got downloaded

    root@apples-MacBook-Air:~/Desktop/Blog/capm1/demo1/demop/node_modules$ ls -l
total 0
drwxr-xr-x   3 root  staff  102 Nov 21 15:20 @sap
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 accepts
drwxr-xr-x   6 root  staff  204 Nov 21 15:20 array-flatten
drwxr-xr-x   8 root  staff  272 Nov 21 15:20 body-parser
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 bytes
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 content-disposition
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 content-type
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 cookie
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 cookie-signature
drwxr-xr-x  15 root  staff  510 Nov 21 15:20 debug
drwxr-xr-x   8 root  staff  272 Nov 21 15:20 depd
drwxr-xr-x   6 root  staff  204 Nov 21 15:20 destroy
drwxr-xr-x   6 root  staff  204 Nov 21 15:20 ee-first
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 encodeurl
drwxr-xr-x   6 root  staff  204 Nov 21 15:20 escape-html
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 etag
drwxr-xr-x   8 root  staff  272 Nov 21 15:20 express
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 finalhandler
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 forwarded
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 fresh
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 http-errors
drwxr-xr-x   8 root  staff  272 Nov 21 15:20 iconv-lite
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 inherits
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 ipaddr.js
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 media-typer
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 merge-descriptors
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 methods
drwxr-xr-x  11 root  staff  374 Nov 21 15:20 mime
drwxr-xr-x   8 root  staff  272 Nov 21 15:20 mime-db
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 mime-types
drwxr-xr-x   6 root  staff  204 Nov 21 15:20 ms
drwxr-xr-x   8 root  staff  272 Nov 21 15:20 negotiator
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 on-finished
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 parseurl
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 path-to-regexp
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 proxy-addr
drwxr-xr-x  12 root  staff  408 Nov 21 15:20 qs
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 range-parser
drwxr-xr-x   8 root  staff  272 Nov 21 15:20 raw-body
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 safe-buffer
drwxr-xr-x   9 root  staff  306 Nov 21 15:20 safer-buffer
drwxr-xr-x   8 root  staff  272 Nov 21 15:20 send
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 serve-static
drwxr-xr-x   8 root  staff  272 Nov 21 15:20 setprototypeof
drwxr-xr-x   8 root  staff  272 Nov 21 15:20 statuses
drwxr-xr-x   6 root  staff  204 Nov 21 15:20 toidentifier
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 type-is
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 unpipe
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 utils-merge
drwxr-xr-x   7 root  staff  238 Nov 21 15:20 vary

Step 2: Content of package.json

If you go inside the package.json, you will see two dependencies

  • @sap/cds
  • express
{
    "name": "demop",
    "version": "1.0.0",
    "description": "Generated by cds init",
    "repository": "<Add your repository here>",
    "license": "ISC",
    "dependencies": {
        "@sap/cds": "^3.18.4",
        "express": "^4.17.1"
    },
    "engines": {
        "node": "^8.9"
    },
    "scripts": {
        "build": "cds build/all --clean",
        "deploy": "cds deploy",
        "start": "cds run"
    }
}

Step 3: server.js of @sap/cds

@sap/cds is the module which is inside folder node_modules/@sap/cds.
Here you will find server.js which is actually the file which is run when you execute
a CAP Project with cds run command.

 

Content inside node_modules/@sap/cds

    root@apples-MacBook-Air:~/Desktop/Blog/capm1/demo1/demop/node_modules/@sap/cds$ ls -l
    total 928
    -rw-r--r--   1 Ajay  staff   25104 Nov 15 21:06 CHANGELOG.md
    -rw-r--r--   1 Ajay  staff     746 Nov 15 21:06 README.md
    -rw-r--r--   1 Ajay  staff  396160 Nov 18 12:48 SIGNATURE.SMF
    drwxr-xr-x   5 Ajay  staff     170 Nov 21 15:20 _i18n
    drwxr-xr-x  10 Ajay  staff     340 Nov 21 15:20 apis
    drwxr-xr-x  20 Ajay  staff     680 Nov 21 15:20 bin
    -rw-r--r--   1 Ajay  staff    3619 Nov 15 21:06 common.cds
    -rw-r--r--   1 Ajay  staff   12591 Feb 28  2017 developer-license-3.1.txt
    drwxr-xr-x   3 Ajay  staff     102 Nov 21 15:20 etc
    drwxr-xr-x  12 Ajay  staff     408 Nov 21 15:20 lib
    drwxr-xr-x  53 root  staff    1802 Nov 21 15:20 node_modules
    -rw-r--r--   1 Ajay  staff    7293 Nov 15 21:06 npm-shrinkwrap.json
    -rw-r--r--   1 Ajay  staff    9574 Nov 21 15:20 package.json
    -rw-r--r--   1 Ajay  staff    1517 Nov 15 21:06 server.js

Step 4: Create a simple Service

Create srv

First, we create a folder with name srv inside the project directory

     mkdir srv

Create js

then we create a file mySimpleService.js which is going to contain our service

    touch mySimpleService.js

Implement js

then, we create a module which holds our service, in simple js we can write as


    const exportSRV = function(srv) {
    srv.on("somesrv", req => {
            return "Hello " + req.data.msg;
        });
    };

    module.exports = exportSRV;

the same code we can write using ES6 and arrow notation as

    //this code is same as above but with arrow(=>) function
    module.exports = srv => {
    srv.on("somesrv", req => {
            return "Hello " + req.data.msg;
        });
    };

Create cds service

Create a new file with name mySimpleService.cds in same folder of srv.
Here the name of the cds file can be different from js file but to keep
track of our service we have named it same

    touch mySimpleService.cds

Add Service as function

then, we will add same service name which we exported in above js file

    service exportSRV {
        function somesrv (msg:String) returns String;
    }

Run project

So, far we have two files one js and one cds. Now we come to root of project and
run it with command cds run

    cds run

You will see a message in console that server is running in port 4004

    apples-MacBook-Air:/Users/apple/Desktop/Blog/camp2/demop# cds run

[cds] - serving exportSRV at /exportsrv - with impl: srv/mySimpleService.js
[cds] - service definitions loaded from:

  srv/mySimpleService.cds

[cds] - launched in: 1949.628ms
[cds] - server listening on http://localhost:4004 ...
[ terminate with ^C ]

Open the browser and go to url

http://localhost:4004/exportsrv/somesrv(msg='world')

You will get below output

{
@odata.context: "$metadata#Edm.String",
@odata.metadataEtag: "W/"wF4SeVv7xAHyDG7O8zaA1wEHxkfG89tmiLrYI88n37c="",
value: "Hello world"
}

🙂 Congratulations! You have now a Simple CAP Service Working.


Before we end!

In this 7 blog series, we are going to provide a small end-to-end scenario to work with SAP® CAPM. Here the usecase we are going to use is of Learning Management System(LMS).

Link to Master(or Main) Blog from which all the other blogs can be reached is Here.

  • If you wanted to check out the detailed course on SAP® CAPM the link is Here.
  • If you want to get learn SAP® Cloud Platform Development in Detailed then we have a 35hrs hands-on course Here.
  • For current offers and discounts check offer page Here.