Develop and deploy a HTML (Angular/Vue/React) app on SAP BTP access S/4 OP, Part III

[Hongjun_Qian]

See my previous blogs for the context:

Part I: Develop and deploy a HTML (Angular/Vue/React) app ... - SAP Community

Part II: Develop and deploy a HTML (Angular/Vue/React) app ... - SAP Community

This post provides detail step to develop and deploy a HTML app (based on Angular) which deployed to SAP BTP via SAP CAP and access data from one single source:

• S/4 On-premise system;

Step 1. Create an Web-API OData Service in S/4 On-premise System.

It is suggested to use RAP for such development in ABAP development world, but it depends on personal choices.

During create service binding, it is recommended to use 'OData V4 - Web API'.

And you can launch the 'Test' button on this API definition, it will launch a Swagger UI as following:

Click on the link 'ABAP Documentation' to show the metadata file. Sometime the linkage itself cannot be opened successfully, copy the link and open the Tab in your browser.

The metadata shall be displayed, save the content to a separate file via 'Save as...'.

Assume the file as `API_DEF.xml`.

Step 2. Create new CAP project (Nodejs based) and Import API.

Refer to Jumpstart & Grow as You Go | CAPire (cloud.sap) for the prerequisites and recommended IDE before creating a new CAP project (Nodejs based).

Using following commands to create a CAP project named 'demoapp':

cds init demoapp

Then, imports the `API_DEF.xml` via following command lines: 

cds import API_DEF.xml --force --as cds

Via this importing, the CDS will create an folder named `external` under `srv`:

Step 3. Complete the CAP Service development.

Enhance the CAP project by definition it's service:

using {  API_DEF as external } from '../srv/external/API_DEF';

service MyAPIService @(impl: 'srv/impl/myapi-service.js') 
{
    @readonly
    entity MyAPI as projection on external.MyEntity;
}

Then, update your `myapi-service.js`:

"use strict";

const cds = require('@sap/cds');

class MyAPIService  extends cds.ApplicationService {
    init() {
        this.on('READ', 'MyAPI', async req => {
            const apiodata = await cds.connect.to("API_DEF");
            const { MyEntity } = apiodata.entities;
            const results = await apiodata.run(SELECT.from (MyEntity));
            return results;
        });
    }
}

module.exports = { MyAPIService }

We need specify a destination (defined in your BTP subaccount) to let CAP know where to fetch the data.

In the `package.json`, section `cds`:

      "API_DEF": {
        "kind": "odata",
        "model": "srv/external/API_DEF",
        "csrf": true,
        "csrfInBatch": true,
        "[production]": {
          "credentials": {
            "destination": "MYERP_DEST",
            "path": "/sap/opu/odata4/sap/API_DEF/0001"
          }
        }
      },

The path here refer to the path in your S/4 OP system. 

Now, your CAP service will automatically (if your configured your destination and connectivty service correctly) when you fetch a `GET` on the MyAPI.

Step 4. Create your HTML app (in this case, use Angular).

You just need create your HTML app in folder `app` and consume the service in `srv` folder.

Refer to Step 4 in my article Develop and deploy a HTML (Angular/Vue/React) app ... - SAP Community 

You don't need additional (for consuming Dest and Conn) logic in `approuter` any more.

Enjoy your coding then.