Skip to Content

Develop a Business App Using SAP Business Application Studio

test
0 %
Develop a Business App Using SAP Business Application Studio
Details

Develop a Business App Using SAP Business Application Studio

October 5, 2020
Created by
July 26, 2020
Develop a simple CAP Node.js application using SAP Business Application Studio.

You will learn

  • How to create a CAP project
  • How to develop business applications based on the SAP Cloud Programming Model (CAP)
  • How to run and test your application using the Run Configurations tool

Prerequisites

The application you’ll develop is a simple bookshop app that consists of a data model with three entities:

  • Books
  • Authors
  • Genres

The data model is exposed via the Catalog Service. The application has some initial data that is used for testing the application, and some custom logic that runs after reading the books from the Books entity.

Once you have all the code in place, you will test the application locally.


Step 1: Create new CAP project
  1. From the SAP Business Application Studio Welcome page, click Create project from template.

    You can also go to the Command Palette and choose SAP Business Application Studio: Create Project From Template.

    Create Project from Template
  2. Leave the default target folder path.

  3. Select the CAP Project template, and click Next.

    Select CAP Template
  4. Enter bookshop as the name for the project, and leave all other options not checked.

    Click Next.

  5. When prompted, click Open in New Workspace. The new workspace loads and is displayed in the file explorer.

Log on to answer question
Step 2: Define bookshop data schema
  1. In the db folder, create a new file called schema.cds.

  2. Populate the file with the following entity definitions:

    using { Currency, managed, sap } from '@sap/cds/common';
    namespace my.bookshop;
    
    entity Books : managed {
      key ID : Integer;
      title  : localized String(111);
      descr  : localized String(1111);
      author : Association to Authors;
      genre  : Association to Genres;
      stock  : Integer;
      price  : Decimal(9,2);
      currency : Currency;
    }
    
    entity Authors : managed {
      key ID : Integer;
      name   : String(111);
      books  : Association to many Books on books.author = $self;
    }
    
    /** Hierarchically organized Code List for Genres */
    entity Genres : sap.common.CodeList {
      key ID   : Integer;
      parent   : Association to Genres;
      children : Composition of many Genres on children.parent = $self;
    }
    
    
  3. Save your changes.

    The schema.cds file is shown with an error. That’s expected and will be resolved in the next section.

Log on to answer question
Step 3: Define bookshop service
  1. In the srv folder, create a new file called cat-service.cds.

  2. Populate the file with the following service definitions:

    using { my.bookshop as my } from '../db/schema';
    service CatalogService @(path:'/browse') {
    
      @readonly entity Books as SELECT from my.Books {*,
        author.name as author
        } excluding { createdBy, modifiedBy };
    
        action submitOrder (book : Books.ID, amount: Integer);
      }
    
    
  3. Save your changes.

Log on to answer question
Step 4: Add initial data
  1. In the db folder, create a new folder called data.

  2. In the data folder, create a new file called my.bookshop-Authors.csv, and populate it with the following:

    ID;name
    101;Emily Brontë
    107;Charlotte Brontë
    150;Edgar Allen Poe
    170;Richard Carpenter
    
  3. In the data folder, create a new file called my.bookshop-Books.csv, and populate it with the following:

    ID;title;author_ID;stock
    201;Wuthering Heights;101;12
    207;Jane Eyre;107;11
    251;The Raven;150;333
    252;Eleonora;150;555
    271;Catweazle;170;22
    
    
  4. Save your changes.

Log on to answer question
Step 5: Add custom logic

In the srv folder, create a new file called cat-service.js, and populate it with the following:

/**
* Implementation for CatalogService defined in ./cat-service.cds
*/
const cds = require('@sap/cds')
module.exports = function (){
  // Register your event handlers in here, e.g....
  this.after ('READ','Books', each => {
    if (each.stock > 111) {
      each.title += ` -- 11% discount!`
    }
  })
}

Your application should look similar to the structure shown in the picture below.

Project structure

Save your changes.

You can also see the CAP Project explorer, with which you can see the semantic structure of the application.

What is the Project Explorer?
×
Step 6: Test the application with local database

You can explicitly deploy your application to a persistent local SQLite database, or you can run your application and it will implicitly use an in-memory database.

This step describes how to run the application with an in-memory database.

You will first add all required dependencies, and the create and run a run configuration.

  1. Add and install all required dependencies.

    • From the Terminal menu, select New Terminal.

    • On the bookshop folder, run the following:

      npm install
      
      
  2. From the left side menu, open the Run Configurations view.

    Open Run Configurations view
  3. Click + at the top of the view to add a new configuration.

    Open Run Configurations view
  4. Select bookshop as the runnable application from the command palette prompt.

  5. Press Enter to use the default name for the configuration. A new configuration is added to the run configuration tree.

  6. Click the right green arrow on the right of the configuration name to run the application.

    Run application
  7. When prompted, click Expose and Open for port 4004.

    Expose and open

    The port 4004 the application is running on is exposed to external access, in this case, to the browser.

  8. Press Enter to use the default description. The application opens in the browser and you can click to see the metadata and entities the service.

    Open app
  9. Place a breakpoint in the function in the cat-service.js file.

  10. In the running app, click the Books entity. It should stop at the breakpoint.

    Breakpoint
  11. Click Debugger icon on the side menu to open the Debugger view. Click Continue in the debugger until all the books are read and the page is presented.

  12. Remove the breakpoint.

  13. Stop the application by clicking Stop in the Debug pane.

What does the Expose action do?
×

Next Steps

Back to top