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 1)
    • 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.

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.

1. Logon on to AWS
2. Open the S3 console
3. Create a bucket (e.g. chi-products)
   
4. Turn off “block all public access”
   
5. Click the “Create bucket” button
6. Click on the newly created bucket
7. Click on the “Permissions” tab
8. Click the “Edit” button, under “Bucket policy”.
9. 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/*"
   		}
   	]
   }​

10. Save the changes.
11. Click the “Objects” tab of the bucket.
12. Drag the images from the repository folder “AWS/product_images” and drop them onto the bucket.
    
13. Click the “Upload” button
14. Click on one of the images in the bucket
15. Copy the “Object URL” into another browser tab and check the access.
16. 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

1. From the SAP Integration Suite, open the Open Connectors capability.
   
2. Select “Connectors” from the left side
3. Click the “Build New Connector” button
4. Click the “Import” button
5. With the “Connector (JSON format)” selected, click the “From Computer” button
6. Select the “Amazon Rekognition-JSK.json” file, from the “SAP > Integration Suite > Open Connectors” repository folder.
7. Click the “Continue Import” button
8. Check the “Select All Resources” checkbox and click the “Import” button
9. In the “Properties” section, if needed, adjust the “Base URL” for your AWS region.
10. 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 >
       
11. Click the “Save and Next” button
12. Click the “Authenticate Instance” button
13. Give the instance a name and click the “Create Instance” button
14. Select “Test in API docs”
15. Select “POST /labels” method and click “Try it out”
16. Copy the entire text from the “test_rek_body.txt” file, from the “SAP > Integration Suite > Open Connectors” repository folder.
17. Paste the text into the body of the request
18. Click the “Execute” button
19. 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"
        }
      ]
    }
    ​

20. 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.
    
21. Save the “Request URL” value for later configuration (configurable property: Open Connector Request URL)

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

1. From the SAP Integration Suite, open the Cloud Integration capability.
   
2. On the left side, click the “Design” (pencil) button in Cloud Integration.
3. Create the “Create” button, in the upper-right corner, to create a new package.
4. Fill in the required fields, for example:
   
5. Click the “Artifacts” tab
6. Select “Add > Integration Flow”
7. Select the “Upload” radio button.
8. Click the “Browse” button and select the “og_products.zip” file, from “SAP > Integration Suite > Cloud Integration” repository folder.
9. Enter values for the Name, ID, and Description
   
10. Click the “Ok” button
11. Click the “Configure” action
12. On the “Receiver” tab, select “OCN_AWS”
13. Set the value of the “Address” field (configurable property: Open Connector Request URL)
14. Click the “More” tab
15. Set the value of the “APIKey” field (configurable property: SAP API Business API Key)
16. Set the value of the “authorization” field (configurable property: Open Connector Credentials – the string starting with User and ending with the value of Element )
17. Set the value of the “s3_url” field (configurable property: AWS Bucket URL)
18. Click the “Save” button
19. Click the “Deploy” button and click “Yes”
20. Select the “Operations” view from the left side
21. Click the “All” tile
22. Once the artifact is deployed, save the endpoint URL for later configuration (configurable property: Products CI URL)

Test the “Products” Integration Flow

1. Using Postman or a similar application, create a new “request”.
2. Set the request method to “GET”
3. Set the URL (configurable property: Products CI URL)
4. On the “Authorization” tab,
   2. Set the type to “OAuth 2.0”
   3. Set the “Grant Type” to “Client Credentials”
   4. Set the “Access Token URL” to the “tokenurl” value from the configurable property: BTP Service Key Credentials
   5. Set the “Client ID” to the “clientid” value from the configurable property: BTP Service Key Credentials
   6. Set the “Client Secret” to the “clientsecret” value from the configurable property: BTP Service Key Credentials
5. Click the “Get New Access Token” button
6. Click the “Use Token” button
7. On the “Headers” tab, create a new header called “product_desc” and set the value to “bulb”
8. On the “Headers” tab, create a new header called “product_id”
9. 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

1. In SAP Cloud Integration, click the “Design” button on the left-hand side.
2. Open the package that you created earlier.
3. Click on the Artifacts tab.
4. Click the “Edit” button, in the upper-right corner.
5. Click Add -> Integration Flow
6. Select the “Upload” radio button.
7. Click the “Browse” button and select the “og_details.zip” file, from the “SAP > Integration Suite > Cloud Integration” repository folder.
8. Enter values for the Name, ID, and Description
   
9. Click the “Ok” button
10. Select the iFlow that you just uploaded and click “Actions -> Configure”.
11. Click the “More” tab.
12. Set the value of the “APIKey” field (configurable property: SAP API Business API Key).
13. Set the value of the “s3_url” field (configurable property: AWS Bucket URL).
14. Click the “Save” button
15. Click the “Deploy” button and click “Yes”
16. Select the “Operations” view from the left side
17. Click the “All” tile
18. Once the artifact is deployed, save the endpoint URL for later configuration (configurable property: Details CI URL)

Test the “Details” Integration Flow

1. Using Postman or a similar application, create a new “request”.
2. Set the request method to “GET”
3. Set the value of the URL (configurable property: Details CI URL)
4. On the “Authorization” tab,
   2. Set the type to “OAuth 2.0”
   3. Set the “Grant Type” to “Client Credentials”
   4. Set the “Access Token URL” to the “tokenurl” value from the configurable property: BTP Service Key Credentials
   5. Set the “Client ID” to the “clientid” value from the configurable property: BTP Service Key Credentials
   6. Set the “Client Secret” to the “clientsecret” value from the configurable property: BTP Service Key Credentials
5. Click the “Get New Access Token” button
6. Click the “Use Token” button
7. On the “Headers” tab, create a new header called “productID” and set the value to “CLUTCH_REBUILD_KIT”
8. 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

1. From the SAP Integration Suite, open the Cloud Integration capability.
   
2. Click the “Policy Templates” tab
3. Click the “Import” button
4. Click the “Browse” button and select the “Cloud_Platform_Connectivity,zip” file from the “SAP > Integration Suite > API Management” repository folder
5. Click “OK”

Enable the “Products” iFlow in SAP API Management

1. In SAP API Management, click the “Develop” (pencil) button on the left-hand side.
2. On the “APIs” tab, click “Import API”
3. Click the “Browse” button and select the “products.zip” file, from the “SAP > Integration Suite > API Management” repository folder.
4. Click the new “products” API
5. Click the “Edit” button
6. Click the “Target Endpoint” tab
7. Update the value of the URL field to point to the endpoint of the “Products” integration flow (configurable property: Products CI URL)
8. Click the “Save” button
9. Click “Yes”
10. Save the value of the “API Proxy URL” for later configuration (configurable property: Products API URL)

Test the “Products” API

1. Using Postman or a similar application, duplicate and rename the request you created to test the “Products” Integration flow.
2. Update the request URL to the value of the “Products” API Proxy URL (configurable property: Products API URL).
3. Use the “Authorization” tab to get and use a new access token
4. Click “Send” and validate the results

Enable the “Details” Integration Flow in SAP API Management

1. In SAP API Management, click the “Develop” (pencil) button on the left-hand side.
2. Click the “APIs” tab
3. Click “Import API”
4. Click the “Browse” button and select the “details.zip” file, from the “SAP > Integration Suite > API Management” repository folder.
5. Click the new “details” API
6. Click the “Edit” button
7. Click the “Target Endpoint” tab
8. Update the value of the URL field to point to the endpoint of the “Details” integration flow (configurable property: Details CI URL)
9. Click the “Save” button
10. Click “Yes”
11. Save the value of the “API Proxy URL” for later configuration (configurable property: Details API URL)

Test the “Details” API

1. Using Postman or a similar application, duplicate and rename the request you created to test the “Details” Integration flow.
2. Update the request URL to the value of the “Details” API Proxy URL (configurable property: Products API URL).
3. Use the “Authorization” tab to get and use a new access token
4. Click “Send” and validate the results

User Interface (Node.js)

1. Clone this repository using GitHub Desktop, Visual Studio, or download and extract a zip file to a local folder.
2. Create a text file named “.env” in the “React UI > server” repository folder.
3. 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​

   1. The PRODUCTS_URL (Products CI URL) and DETAILS_URL (Details CI URL) should point to the URLs in SAP API Management.
   2. The values for CLIENT_ID and CLIENT_SECRET should come from your BTP Service Key Credentials
   3. The values for MAX_LABELS and MIN_CONFIDENCE do not need to be updated.
4. Save the “.env” file
5. Open the “React UI” folder of the repository in Visual Studio or a similar IDE.
6. In a PowerShell window or from the OS, change to the “server” folder using the command “cd server”
7. Install the dependencies using the command “npm install”
8. Start the server by using command “nodemon server.js”
9. Create a new “Developer PowerShell” window
10. Open the “client” folder using the command “cd client”
11. Install the dependencies using the command “npm install”
12. Start the client by using the command “npm start”
13. Your default browser should open with the URL of localhost:3000 (The first load will take some time)
    
14. Click the “Submit” button and confirm that products are returned
    
15. Drag the beer image from the “AWS -> Product Images” repository folder into the drop-zone, under “Search Products by Image”
16. Click the “Submit” button and confirm the results
    
17. Click on the “Details” link of the “P100112 – Dark Beer” product and confirm the results
    
18. 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!