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

August 31, 2021
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
QR code

Prerequisites

The application you’ll develop is a simple bookshop app consisting 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 Start 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 Start.

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

  5. Click Finish.

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.

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 semantic structure of the application by expanding the CAP DATA MODELS AND SERVICES section located at the bottom of the EXPLORER view.

Project structure
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 (development profile) as the runnable application from the command palette prompt.

    There might be other run configuration options available in the command palette.

    By default, the run configuration is created for the “development” profile. If you configured an additional profile for your application, you can create a run configuration that activates and uses this profile.

    The dependencies of the application are calculated according to the profile selected.

    Select Run Configuration
  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.

  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

    You can also debug your application to check your code logic. For example, to debug the custom logic for this application, perform the following steps:

  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.

    Remove the breakpoint.

  12. Stop the application by clicking Stop in the Debug pane. The number beside the Debug icon represents the number of running processes. Click Stop until there are no processes running.

    Stop the app
What does the Expose action do?
×

Next Steps

Back to top