Step-by-Step on how to connect Node-Red to FORCE Bridge API

This is a step-by-step guide to creating a production dashboard based on Node-Red with data from your Bridge API instance.

1) Installing Node-Red and dashboard component

The first step to installing and starting Node-Red is done here: https://nodered.org/docs/getting-started/.

After installing Node-Red, the following steps (as shown in the figure below) will guide you through installation of the dashboard:

Fig. 1: Installing Node-Red – user settings page

Go to Hamburger-Menu and click Manage Palette.
Select Palette.
Navigate to the Install
Search for “Node-Red-Dashboard”.
Click install.

Now you are ready to create your user interface (UI) with Node-Red.

2) What is the FORCE Bridge API?

FORCE Bridge API is an application programming interface (Open API) for Smart Manufacturing.

The documentation for our Bridge API can be found on our swaggerhub page. or as a PDF file in the customer area of our homepage.

3) Obtaining an access token

To make requests to Bridge API, you will first need authorization.

Bridge API works with OAuth 2.0, so you must first log in with your information. After that, you will get an access token that can be used to work on the Bridge API. If you have your URL, user, and password, you can use it for your Bridge API. Otherwise, GitHub users can find the login data and URL for the FORCAM Bridge API, which is explained as follows.

Create your first flow to get the access token from the Bridge-API with your login data.

First, put an inject node to the flow and open it. You will need an inject node to fire repeatedly every few seconds. In our use case, it is every minute.

Fig. 2: Adding an inject node

After adding the inject node, add the http request node to the flow. If you open the request node, set the method to GET and the URL to the URL of your Bridge API with your login data.

In our example below, GitHub is the username and password. Your data can replace this if you have your system.

Fig. 3: Adding an http request

Add a JSON node to parse the response and show it on the debug node.

Here, we renamed the JSON node to JSON converter and the debug node to Log response to show their functionality.

Fig. 4: Adding JSON node to parse the response

In the end, you should get the following flow in Node-Red:

Fig. 5: Final flow in Node-Red

There will be a screen like the one shown in the figure below, where you will get your access token and other data.

Fig. 6: Msg payload screen with an access token and other data

4) Using the token for other requests

The obtained access token is now used to authorize a new HTTP request from our Bridge API. This is done via a function node where the request is created, as shown below.

Fig. 7: Creating a new http request via function node

The header for the request is defined with the type (Bearer) and access token. To prepare a request in the function node, set your request URL in msg.url.

In this case, we want to get the data of a chosen workplace with the defined workplace ID. If you want data for another workplace, change the workplace ID.

The request for the chosen workplace is ready now and needs to be saved with the finish button.

Next, set up an HTTP request node, but this time without a URL.

Set the method to GET if it is not already set.

Fig. 9: Setting an http request without URL

Add a JSON converter node and a debug node to see the response in the debug area.

Fig. 10: Adding a JSON converter and a debug node to see the response

The requested data will now be shown in the response screen and will look like this:

To display the desired data in a UI, the data must be extracted in a function node before it can be displayed as text.

5) Displaying text in the UI

To display a text in the UI, set and open the function node and add only the return msg to the coding area so that the whole message will be returned from the Bridge API. Set the name to Extract workplace from response.

Connect the function node with the JSON converter node, as shown below.

Fig. 13: Connecting the function node with the JSON converter node

After receiving the message, the desired response text can be displayed as text in the dashboard.

For this, put a text node to the flow and configure it by opening it and first defining a Group. To achieve this, click the pen icon to the right of the choice box (see figure below).

Fig. 14: Editing the text node “Add new ui_group”

Rename your group to Workplace and add a new ui_tab via the pen icon.

The width can be changed to 10 if more space is needed for the text to show fully. For this, click on the pen icon again.

Fig. 15: Editing the properties of the text node

You can now name your dashboard. This name will be shown as the header for your entire dashboard.

In this case, we have used the name Dashboard for a workplace. Click on Update at the top right to apply the setting and to close this dialog. Click on Update/Done on the other dialogs consecutively.

Write the name of your data in the Label field. In this case, it is Workplace Id.

In the value format field, copy the path from debug console (see figure below) and put it after “msg.”. It should look like this: “{{msg.payload.properties.id

Fig. 18: Copying the path from the debug console

This is what the flow with text should look like when finished:

Fig. 19: Finished flow with text

The text node is now finished and displayed on the dashboard as in the figure below. To open and see the dashboard, open a new tab in your browser and type in the URL http://127.0.0.1:1880/ui/. More of these text elements can be created for your UI, similarly.

Fig. 20: Finished text element

6) Creating a bar chart with Bridge API

To display total quantities with their categories in a bar chart, make a request similar to the previous ones. In this case, the API “/operations/{operationId}/quantitySummary” is used to receive data, and the chart node is used.

In the function node „Extract data for bar chart“, set the parameters for your chart. If no quantity is produced, all data needs to be set to zero because the parameters do not exist in the Bridge API. If the quantity is produced, the data is obtained as follows.

Setting the code format within the Function tab according to the format shown below is important.

Fig. 22: Function node “Extract data for bar chart”

Now that the function node is set, you can import the chart node to your flow and configure it as described below. It is possible to rename the Label, choose the Group, the chart type, and the bars’ colors.

Fig. 23: Editing the chart node

The resulting bar-chart:

Fig. 24: The resulting bar-chart

7) Running the full demo

Go to https://github.com/FORCAM-FORCE-Bridge-API/samples-node-red at the GitHub repository to run the full demo. There you can clone the repository or download the repository as zip file.