Skip to Content
Technical Articles
Author's profile photo James Koefelda

Ten Days with SAP BTP, AWS, a Third-party API, and Node.js – Part II

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.

 

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.

  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,
    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
  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,
    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
  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!

Assigned tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Burak Yilmaz
      Burak Yilmaz

      Hello James,

      I completed the all steps but i couldnt be able to see my products. I became 401 Error but i already give my id and secret. Which id and secret (default_it-rt_api or default_it-rt_integration-flow) should we give for env. After equal should i use (") this symbol or not ?

      For example CLIENT_ID=sb-4b5be8f5

      or CLIENT_ID="sb-4b5be8f5................."

       

      Thank you for your amazing blog again.

      Author's profile photo James Koefelda
      James Koefelda
      Blog Post Author

      Hey Burak,

      I used the credentials of the default_it-rt_integration-flow instance.  In the .env file, values should be assigned without the quotation marks (e.g. CLIENT_ID=sb-4b5be8f5)

       

      Author's profile photo Burak Yilmaz
      Burak Yilmaz

      Thank you again James i am able to run my program without any error. Thanks again this great Blog.