to all Blog Posts

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

Published: · Last updated: · 7 min Lesezeit

This is a step-by-step guide on 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

  1. Go to Hamburger-Menu and click Manage Palette.
  2. Select Palette.
  3. Navigate to the Install
  4. Search for “Node-Red-Dashboard”.
  5. Click install.
  • Now you are ready to create your own user interface (UI) with Node-Red.

2) What is the FORCE Bridge API?

FORCE Bridge API is the first application programming interface (Open API) for Smart Manufacturing. The initiative of IIoT providers, users and universities aims to close the gap between conventional factories with heterogeneous machine controls and the IT standards of the Industrial Internet of Things (IIoT). The aim of the initiative is to further develop the FORCE Bridge API web interface as a bridge to the smart factory and thus establish an open industry standard with diverse application possibilities through the constantly growing app ecosystem.

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.

 

For more detailed information about Bridge API, visit forcebridge.io and to get personal access to Bridge API, please contact us using our contact page.

3) Obtaining an access token

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

Bridge API works with OAuth 2.0 which means you must first log in with your information. After that, you will get an access token which can be used to work on the Bridge API. If you have your own URL, user, and password, you can use it for your own 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. For that, you will need an inject node to repeatedly fire 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. This can be replaced by your own data if you have your own system:

https://forcebridgehackathon.force.eco:25443/ffauth/oauth2.0/accessToken?client_id=GitHub&client_secret=GitHub&grant_type=client_credentials&scope=read%20write

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 in order 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 to get data for another workplace just change the workplace ID.

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

 

The flow should look like this:

Fig. 8: Sample request for the data of a chosen workplace

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:

Fig. 11: Data response screen

In order 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 return msg to the coding area, so the whole message will be returned from the Bridge API. Set the name to Extract workplace from response.

Fig. 12: Setting a return msg function node

Now, 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 do 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.

Fig. 16: Naming the 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.

Fig. 17: Setting the properties Label and Value format

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}}”.

 

 SEQ Bild \* ARABIC 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 in the same way.

 SEQ Bild \* ARABIC 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.

Fig. 21: Flow for creating a bar-chart

 

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.

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

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 type of chart, and the colors of the bars.

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.

Fig. 25: FORCAM FORCE Bridge API GitHub repository

After downloading it, open the Flows folder. Now open Node-Red and click on the hamburger button at the top right to open the menu.

Fig. 26: Node-Red menu bar

Click Import in the menu to open the next screen.

On this screen, click on select a file to import.

Fig. 27: Importing nodes screen

Import the file DashboardForOneWorkplaceFlow.json. This fetches the dashboard which is then deployed by clicking on deploy at the top right.

Open the UI in a new tab using the address http://127.0.0.1:1880/ui.

Fig. 28: Dashboard for a workplace