Ten Days with SAP BTP, AWS, a Third-party API, and...

former_member127591 · ‎05-28-2021

This is the second part of a blog series dedicated to exploring the SAP Business Technology Platform (BTP). It provides instructions for deploying and configuring the “Campton Hills Products” application, which is described in Ten Days with SAP BTP, AWS, a Third-party API, and Node.js – Part I. The goal of this installment is to provide a working example of how to:

Build integration flows with SAP Cloud Integration

Enable integration flows as APIs, in SAP API Management

Build, test, and utilize a SAP Open Connector

Integrate SAP BTP with Amazon Web Services

Integrate SAP BTP with a Web API

Build a user interface with Node.js, that exploits React and Express.

If you are interested in learning SAP BTP development, it may be beneficial to get this solution up & running and then adapt it to some contrived requirement. If you are able to enhance the application, for any new requirement (ridiculous or not), please share your results in the comments.

Prerequisites

An SAP BTP trial or enterprise account
- Integration Suite must be enabled (Set Up Integration Suite Trial)
- BTP service key credentials must be created (just follow step 3)
  - These will be referenced as configurable property BTP Service Key Credentials in this document.
- SAP API Business Hub API Key needs to be recorded (Trying Out APIs in a Sandbox Environment)
  - This will be referenced as configurable property SAP API Business API Key in this document.

An AWS pay or Free Tier account
- The account must have programmatic access
- The account must have AWS Management Console access
- The account must have AmazonS3FullAcess policy
- The account must have AmazonRekognitionFullAccess policy
- The account must have the user credentials saved
  - This will be referenced as configurable properties AWS User’s Access Key, AWS User’s Secret Access Key, and AWS Region in this document.

Code and resources from this repository. The following tools can be used:
- Microsoft Visual Studio
- GitHub Desktop
- Download and extract the zip file
- Other GIT applications.

Node.js installed (How to Install Node.js and NPM on Windows)
- npm package needs to be installed

Node.js development environment, for example:
- Microsoft Visual Studio 2019
- Microsoft Visual Studio Code

Configurable Properties

The following properties will be referenced throughout these instructions. It is advised to save the key-value pairs in a separate document.

Property	Description
BTP Service Key Credentials	The clientid, clientsecret, and tokenurl of the credentials. See the Prerequisites section.
AWS User’s Access Key	This is part of the AWS credentials. Credentials should be saved at the time of user creation or should be regenerated and saved.
AWS User’s Secret Access Key	This is part of the AWS credentials. Credentials should be saved at the time of user creation or should be regenerated and saved.
AWS Region	The region for the AWS account (e.g. us-east-2)
AWS Bucket URL	The URL of the S3 bucket that is created to store product images. (e.g. https://product_img.s3.us-east-2.amazonaws.com/)
Open Connector Credentials	These credentials are used to connect the "Products" iFlow to the Open Connector for AWS Rekognition. The credentials contain a "User", an "Organization", and an "Element". The credentials can be obtained while testing the connector.
Open Connector Request URL	This URL is used to connect the "Products" iFlow to the Open Connector for AWS Rekognition. This URL can be obtained while testing the connector.
SAP API Business API Key	The API key required to execute APIs on the SAP API Business Hub. See the prerequisites section.
Products CI URL	The URL endpoint for the "Products" iFlow
Details CI URL	The URL endpoint for the "Details" iFlow
Products API URL	The URL to the "Products" API in SAP API Management
Details API URL	The URL to the "Details" API in SAP API Management

Amazon Web Services

The product images are stored in an Amazon S3 bucket. The following instructions are for creating an S3 bucket, providing public access to the bucket, and uploading the product images. AWS recommends against providing public access to a bucket. The demo application will work without these images. If public access is not provided, the application simply won’t display an image, in the product details card.

Logon on to AWS

Open the S3 console

Create a bucket (e.g. chi-products)

Turn off “block all public access”

Click the “Create bucket” button

Click on the newly created bucket

Click on the “Permissions” tab

Click the “Edit” button, under “Bucket policy”.

Paste in the following policy and adjust the bucket name as needed, for the “Resource” property:

{

	"Version": "2012-10-17",

	"Statement": [

		{

			"Sid": "PublicRead",

			"Effect": "Allow",

			"Principal": "*",

			"Action": [

				"s3:GetObject",

				"s3:GetObjectVersion"

			],

			"Resource": "arn:aws:s3:::chi-products/*"

		}

	]

}

Save the changes.

Click the “Objects” tab of the bucket.

Drag the images from the repository folder "AWS/product_images" and drop them onto the bucket.

Click the “Upload” button

Click on one of the images in the bucket

Copy the “Object URL” into another browser tab and check the access.

Save the Object URL of the bucket, excluding the image name and extension. This will be used for later configuration (configurable property: AWS Bucket URL)

SAP Business Technology Platform (BTP)

The instructions in this section describe how to build the APIs in SAP BTP. The APIs will be deployed in Cloud Integration and enabled in API management. An Open Connector will also be deployed. The Open Connector simplifies the connection between Cloud Integration and the Amazon Rekognition service.

Import, Configure, & Test the Open Connector, for AWS Rekognition, in SAP Open Connectors

From the SAP Integration Suite, open the Open Connectors capability.

Select “Connectors” from the left side

Click the “Build New Connector” button

Click the “Import” button

With the “Connector (JSON format)” selected, click the “From Computer” button

Select the “Amazon Rekognition-JSK.json” file, from the “SAP > Integration Suite > Open Connectors” repository folder.

Click the “Continue Import” button

Check the “Select All Resources” checkbox and click the “Import” button

In the “Properties” section, if needed, adjust the “Base URL” for your AWS region.

In the “Authentication” section, configure the following properties:
1. AWS Access Key ID = < configurable property: AWS User’s Access Key >
2. AWS Secret Access Key = < configurable property: AWS User’s Secret Access Key >
3. AWS Region Name = < configurable property: AWS Region >

Click the “Save and Next” button

Click the “Authenticate Instance” button

Give the instance a name and click the “Create Instance” button

Select “Test in API docs”

Select “POST /labels” method and click “Try it out”

Copy the entire text from the “test_rek_body.txt” file, from the “SAP > Integration Suite > Open Connectors” repository folder.

Paste the text into the body of the request

Click the “Execute” button

If everything is working, you should receive the following response

{

  "LabelModelVersion": "2.0",

  "Labels": [

    {

      "Instances": [

        {

          "Confidence": 99.98808288574219,

          "BoundingBox": {

            "Height": 0.8480676412582397,

            "Left": 0.06890267133712769,

            "Top": 0.06171253323554993,

            "Width": 0.8244233131408691

          }

        }

      ],

      "Confidence": 99.98808288574219,

      "Name": "Tennis Ball",

      "Parents": [

        {

          "Name": "Tennis"

        },

        {

          "Name": "Ball"

        },

        {

          "Name": "Sport"

        }

      ]

    },

    {

      "Confidence": 99.98808288574219,

      "Name": "Sport"

    },

    {

      "Confidence": 99.98808288574219,

      "Name": "Tennis",

      "Parents": [

        {

          "Name": "Sport"

        }

      ]

    },

    {

      "Confidence": 99.98808288574219,

      "Name": "Sports"

    },

    {

      "Confidence": 99.98808288574219,

      "Name": "Ball"

    },

    {

      "Confidence": 82.92636108398438,

      "Name": "Symbol"

    }

  ]

}

Save the credentials for later configuration (configurable property: Open Connector Credentials). It is the string that contains User <value, Organization <value>, Element <value>. Do not include anything else.

Save the “Request URL” value for later configuration (configurable property: Open Connector Request URL)

Import & Configure the “Products” iFlow in SAP Cloud Integration

From the SAP Integration Suite, open the Cloud Integration capability.

On the left side, click the “Design” (pencil) button in Cloud Integration.

Create the "Create" button, in the upper-right corner, to create a new package.

Fill in the required fields, for example:

Click the “Artifacts” tab

Select “Add > Integration Flow”

Select the “Upload” radio button.

Click the “Browse” button and select the “og_products.zip” file, from “SAP > Integration Suite > Cloud Integration” repository folder.

Enter values for the Name, ID, and Description

Click the “Ok” button

Click the “Configure” action

On the “Receiver” tab, select “OCN_AWS”

Set the value of the “Address” field (configurable property: Open Connector Request URL)

Click the “More” tab

Set the value of the “APIKey” field (configurable property: SAP API Business API Key)

Set the value of the “authorization” field (configurable property: Open Connector Credentials - the string starting with User and ending with the value of Element )

Set the value of the “s3_url” field (configurable property: AWS Bucket URL)

Click the “Save” button

Click the “Deploy” button and click “Yes”

Select the “Operations” view from the left side

Click the “All” tile

Once the artifact is deployed, save the endpoint URL for later configuration (configurable property: Products CI URL)

Test the “Products” Integration Flow

Using Postman or a similar application, create a new "request".

Set the request method to “GET”

Set the URL (configurable property: Products CI URL)

On the “Authorization” tab,
1. Set the type to “OAuth 2.0”
2. Set the “Grant Type” to “Client Credentials”
3. Set the “Access Token URL” to the “tokenurl” value from the configurable property: BTP Service Key Credentials
4. Set the “Client ID” to the “clientid” value from the configurable property: BTP Service Key Credentials
5. Set the “Client Secret” to the “clientsecret” value from the configurable property: BTP Service Key Credentials

Click the “Get New Access Token” button

Click the “Use Token” button

On the “Headers” tab, create a new header called “product_desc” and set the value to “bulb”

On the “Headers” tab, create a new header called “product_id”

Click the “Send” button and confirm that the response contains one product:

{

    "d": {

        "results": [

            {

                "__metadata": {

                    "uri": "https://sandbox.api.sap.com/sap/c4c/odata/v1/c4codataapi/ProductCollection('00163E0946E61EE499BA897F337FB77A')",

                    "type": "c4codata.Product",

                    "etag": "W/\"datetimeoffset'2015-02-03T21%3A06%3A48.6625230Z'\""

                },

                "ProductID": "10000242",

                "Description": "Light Bulb",

                "BaseUOM": "EA",

                "BaseUOMText": "Each"

            }

        ]

    }

}

Import & configure the “Details” iFlow in SAP Cloud Integration

In SAP Cloud Integration, click the “Design” button on the left-hand side.

Open the package that you created earlier.

Click on the Artifacts tab.

Click the "Edit" button, in the upper-right corner.

Click Add -> Integration Flow

Select the “Upload” radio button.

Click the “Browse” button and select the “og_details.zip” file, from the “SAP > Integration Suite > Cloud Integration” repository folder.

Enter values for the Name, ID, and Description

Click the “Ok” button

Select the iFlow that you just uploaded and click “Actions -> Configure”.

Click the “More” tab.

Set the value of the “APIKey” field (configurable property: SAP API Business API Key).

Set the value of the “s3_url” field (configurable property: AWS Bucket URL).

Click the “Save” button

Click the “Deploy” button and click “Yes”

Select the “Operations” view from the left side

Click the “All” tile

Once the artifact is deployed, save the endpoint URL for later configuration (configurable property: Details CI URL)

Test the “Details” Integration Flow

Using Postman or a similar application, create a new "request".

Set the request method to “GET”

Set the value of the URL (configurable property: Details CI URL)

On the “Authorization” tab,
1. Set the type to “OAuth 2.0”
2. Set the “Grant Type” to “Client Credentials”
3. Set the “Access Token URL” to the “tokenurl” value from the configurable property: BTP Service Key Credentials
4. Set the “Client ID” to the “clientid” value from the configurable property: BTP Service Key Credentials
5. Set the “Client Secret” to the “clientsecret” value from the configurable property: BTP Service Key Credentials

Click the “Get New Access Token” button

Click the “Use Token” button

On the “Headers” tab, create a new header called “productID” and set the value to “CLUTCH_REBUILD_KIT”

Click the “Send” button and confirm that the response returns the details of the CLUTCH_REBUILD_KIT product.

{

    "ProductID": "CLUTCH_REBUILD_KIT",

    "Description": "Clutch Rebuild Kit",

    "BaseUOM": "EA",

    "BaseUOMText": "Each",

    "UUID": "00163E04-DCEB-1EE3-80F4-BCE39F066EF6",

    "ImageURL": "https://<your bucket>.s3.us-east-2.amazonaws.com/CLUTCH_REBUILD_KIT.png",

    "ProductCategoryID": "CUSTOMER-01",

    "MinimumOrderQuantity": null,

    "label": "iVBORw0KGgoAAAANSUhEUgAAAMgAAADIAQMAAACXljzdAAAABlBMVEX///8AAABVwtN+AAAB+UlEQVRYhc2Y0Y0DIQxELW0BlLCNolskGqUECkDLzYxJlPvI55ldFCXh5cPC47GJ2dfnmnMOy2bnOIcdnYt7dxjBnmXsiqfZ8U17P3HknC0jwmJH487Vr85fPIYg6tquxvOqjDueMK6zILIDcZVooszVdkxoJw2zVPtnTncS6RqENHMXrw/FB5B3JYNJ1Yzvb43/M0Ec1ExjPR2T7JpV+dtPoKRZVpSFv+z8nLUTQ45ZGRdcjy9Gl+U8P2EEFeWL0XVLfj7lEeRQTVV8ZubkzHN43oKItNKoa2QwkZTVGcLIWZdy6SxF7+iPrO39RCdXGHWzRF3B/xIzF0fy6k6qc6hnIHfufDHE+7JqnF2664Q6d/cT9kt637viETNUne44Qs3Q/VDfVA8pFf4MwnnGmNGmnJpnNY6g5rGGMsipQdpW/qKIVK28qbbpPFzpfgChJxfNnJp66cj0ZHegEMJIkLnVM32y41wVR6iYqs6g+l61rX6xnWja9KrCzEdtaaZiTuPI9NkBZ5V4L7k0e5ZQwpmq8EDW5IJHN5bdRI/6lRxQd0Y6zx1G/F7iFTbWbJdDie5mUrHfnLPcr7xubXuJ5glpm6fG7LHmpapIMtz11q2a/ncHk5eCM+cWrOP9n8NWYv6fkOpePTPL+eKI69o7hE+dZU3e+8nX5xd9MIE6QGBA/gAAAABJRU5ErkJggg=="

}

Import a Policy Template in SAP API Management

From the SAP Integration Suite, open the Cloud Integration capability.

Click the “Policy Templates” tab

Click the “Import” button

Click the “Browse” button and select the “Cloud_Platform_Connectivity,zip” file from the “SAP > Integration Suite > API Management” repository folder

Click “OK"

Enable the “Products” iFlow in SAP API Management

In SAP API Management, click the “Develop” (pencil) button on the left-hand side.

On the “APIs” tab, click “Import API”

Click the “Browse” button and select the “products.zip” file, from the “SAP > Integration Suite > API Management” repository folder.

Click the new “products” API

Click the “Edit” button

Click the “Target Endpoint” tab

Update the value of the URL field to point to the endpoint of the “Products” integration flow (configurable property: Products CI URL)

Click the “Save” button

Click “Yes”

Save the value of the “API Proxy URL” for later configuration (configurable property: Products API URL)

Test the “Products” API

Using Postman or a similar application, duplicate and rename the request you created to test the “Products” Integration flow.

Update the request URL to the value of the “Products” API Proxy URL (configurable property: Products API URL).

Use the “Authorization” tab to get and use a new access token

Click “Send” and validate the results

Enable the “Details” Integration Flow in SAP API Management

In SAP API Management, click the “Develop” (pencil) button on the left-hand side.

Click the “APIs” tab

Click “Import API”

Click the “Browse” button and select the “details.zip” file, from the “SAP > Integration Suite > API Management” repository folder.

Click the new “details” API

Click the “Edit” button

Click the “Target Endpoint” tab

Update the value of the URL field to point to the endpoint of the “Details” integration flow (configurable property: Details CI URL)

Click the “Save” button

Click “Yes”

Save the value of the “API Proxy URL” for later configuration (configurable property: Details API URL)

Test the “Details” API

Using Postman or a similar application, duplicate and rename the request you created to test the “Details” Integration flow.

Update the request URL to the value of the “Details” API Proxy URL (configurable property: Products API URL).

Use the “Authorization” tab to get and use a new access token

Click “Send” and validate the results

User Interface (Node.js)

Clone this repository using GitHub Desktop, Visual Studio, or download and extract a zip file to a local folder.

Create a text file named “.env” in the “React UI > server” repository folder.

In this file, set the values, according to your own solution.

TOKEN_URL=https://XXXXXXXetrial.authentication.us10.hana.ondemand.com/oauth/token

PRODUCTS_URL=https://XXXXXXXetrial-trial.integrationsuitetrial-apim.us10.hana.ondemand.com/XXXXXXXetrial/products

DETAILS_URL=https:/XXXXXXXetrial-trial.integrationsuitetrial-apim.us10.hana.ondemand.com/XXXXXXXetrial/details

CLIENT_ID=

CLIENT_SECRET= 

MAX_LABELS=10

MIN_CONFIDENCE=80

The PRODUCTS_URL (Products CI URL) and DETAILS_URL (Details CI URL) should point to the URLs in SAP API Management.

The values for CLIENT_ID and CLIENT_SECRET should come from your BTP Service Key Credentials

The values for MAX_LABELS and MIN_CONFIDENCE do not need to be updated.

Save the “.env” file

Open the “React UI” folder of the repository in Visual Studio or a similar IDE.

In a PowerShell window or from the OS, change to the “server” folder using the command “cd server”

Install the dependencies using the command “npm install”

Start the server by using command “nodemon server.js”

Create a new “Developer PowerShell” window

Open the “client” folder using the command “cd client”

Install the dependencies using the command “npm install”

Start the client by using the command “npm start”

Your default browser should open with the URL of localhost:3000 (The first load will take some time)

Click the “Submit” button and confirm that products are returned

Drag the beer image from the “AWS -> Product Images” repository folder into the drop-zone, under “Search Products by Image”

Click the “Submit” button and confirm the results

Click on the “Details” link of the “P100112 – Dark Beer” product and confirm the results

The QR Code can be scanned using an app on IOS or Android devices.

Hopefully, this application will you help you learn how to develop applications in SAP BTP and integrate them with hyperscalar services and web APIs. Good Luck!