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

Hi Bridget,

The recent acquisition of South Side Supply (SSS) should provide a great opportunity to grow market share.  To ensure this, we need to “close the loop” on several open issues.  We are requesting your immediate help with an issue that requires a proof-of-concept (POC).  Details follow.  The internal demo is in ten days.

QR Codes hold more data than barcodes.  For that reason, South Side Supply (SSS) recently started shipping products, from their “general industrial” line,  with these improved labels.  Ever since the switch, a  key customer had continually requested an application to help identify and label the older, unlabeled products.  This application was never delivered.

We need to demonstrate that we can quickly and effectively build this application in a short time frame.  This will help ensure this customer of our capabilities and our commitment.  In the end, the application should improve the customer’s procurement process and ultimately, helps us to become more ingrained within their supply chain.

Please review the following requirements and submit an architecture proposal, a UI mock-up, and resource estimates by EOD.

Purpose: 

Search and identify older, unlabeled products and give the user the ability to generate a QR Code Label.

Key Requirements:

• Users can search by Product ID.
• Users can search by Product Description (Freestyle / no wild-cards)
• Users can search by a picture of a product (image recognition / drag & drop)
• Return a list of found products with basic information (ID, Description, UOM)
• Users should be able to select a product to view the details, including a picture of the product (limited set of pictures for POC)
• Users should be able to select a product to view the details, including a QR Code Label.

Future Design Considerations:

• The QR Code Label cannot be static. The customer wants to be able to add their own text to the label.
• Mobile with camera integration likely key UI platform
• Integration with our Distribution Platform
• Hooks for customer’s purchasing system

Thanks,
Ollie

Chief Technology Officer
Campton Hills Industrial, Inc.
4N498 Town Hall Rd, Campton Hills, IL 60175

Besides the UI code, the full logic of the application will be contained within two integration flows or the services called by them.  The integration flows (iFlows) will be built using SAP Cloud Integration, which is a key component of the SAP Business Technology Platform (BTP).  Very little coding will  be required to build these iFlows.  The majority of the logic will be wrapped in components called “steps”, which you drag and drop onto a “canvas” and then configure as needed.  There are steps for mapping messages from one format to another.  There are steps for modifying the message, as it proceeds through the flow.  There are additional steps for calling other systems, for logically changing the path of the message, for events, and so on.  When a configurable step is not enough, you just drag a “script” step onto the canvas and manipulate the message as needed, using JavaScript or Groovy Script. This application will require the creation of two iFlows:  “Products” and “Details”.

Products Integration Flow

The “Products” iFlow will return a list of products, filtered by product ID, product description, or an uploaded image.   If an image is passed to the iFlow, it first passes this image to a custom connector, built within SAP Open Connectors.   This connector reduces the amount of coding required to authenticate and connect to the Amazon Web Services (AWS) image recognition service, called Rekognition.  The identified “labels”, returned from this service, are used to construct a query string, based on the product description.  For example, if the following image was sent to the AWS Rekognition service, the followings labels would be returned: Label Confidence Bird 99.9% Animal 99.9% Hummingbird 94.8% Bee Eater 77.2% These labels would then be used to construct a query string that searches for products with a description containing any or all of these words.  If no image is passed, it will construct a query string based on the passed-in product ID and description.  Passing both headers and the body will result in an amalgamated query string.  With or without a query string, it will then call the “Product” API, on SAP API Business Hub, to find and return a list of products. SAP API Business Hub The main purpose of the API Business Hub is to provide a central catalog of SAP and selected partner APIs, for application developers to search, discover, and test.   For this application, the API Business Hub is used to mimic the product service of Campton Hills Industrial

These iFlows are designed to be called via HTTP, so when deployed, Cloud Integration will provide an endpoint.  We could call these endpoints directly, from our user interface, but exposing the endpoint through SAP API Management will provide a number of advantages, including:

• Simplified API consumption
• Centralized API governance
• Omni-channel experience creation
• Configurable security and traffic management
• Monetization of digital assets

Finally, the user interface will be built using Node.js and will utilize the following modules:

1. The user clicks the “Search” button, after entering all or none of the filters, which include a product ID, a product description, and an image.
2. The products are returned in a table. If an image was uploaded, the “Image Recognition Labels” tab is visible.  Clicking on this tab will show the labels returned by the image recognition service and the amount of confidence for each label.
3. Clicking on the details link will display a product card, which includes a product image (if it exists) and a generated QR Code.

1. The HTTP message can come into the flow with the product ID and description in the request header.  The request body may contain the base64 encoded image data.
2. The “Initialize” content modifier takes the externalized parameters (configurable properties) and sets them as values in the message header and properties.
3. If there is an image in the message body, the “Determine Route” script step sets the message route to “2”. Otherwise, the default route remains “1”.
4. The “Router” step directs the message to the correct route.
5. If the route has been set to “2”, then custom open connector is called to get the labels from the AWS Rekognition service. Otherwise, the “Set Product Filter” script is called.
6. The “Set Product Filter” script constructs the filter string of the query, using the values of product ID, product description, and any labels returned from the image recognition server. For example:
   $filter=ProductID eq ‘112334’ and ( substringof(‘light’,Description) or ( substringof(‘lamp’,Description) )
7. The Product API is called on SAP API Business Hub to retrieve the selected products.
8. The products are returned in the body of the response message.

1. The HTTP message comes into the flow with the product ID in the request header.
2. The “Initialize” content modifier takes the externalized parameters (configurable properties) and sets them as values in the message header and properties.
3. The “Get Product Info” is a request/reply step that calls the Product API, on SAP API Busines Hub, to retrieve the selected product.
4. The “Product Info – JSON to UTF-8” script step builds the value that will be used to generate the QR Code:

     String cr = "%0A";
     String sp = "%20";
     String tb = "%09";
     
     String line1 = "Campton Hills Industrial";
     String line2 = "ID:"+tb+properties.ProductID[0];
     String line3 = "Desc:"+tb+properties.Description[0];
     String line4 = "UOM:"+tb+properties.BaseUOM[0]+sp+'-'
                          +sp+properties.BaseUOMText[0];
   
     String qr_string = line1+cr+line2+cr+line3+cr+line4;
   
     message.setProperty("qr_string", qr_string);
   ​

5. The “Get QR Code” request/reply step calls the QR Code Generator API to get the QR Code.
6. The “finalize JSON” step encodes the QR Code in the message using Base64. It also manipulates the message body to return the product attributes, the image URL, and the base64 encoded QR Code.
7. The JSON is returned in the body of the response message.