Chapter 11: Visualize Data by Creating a Server-Side Application in the IBM Cloud

In this chapter, we will create a server application to visualize data that has been sent from an edge device in the IoT, using Node-RED. For a server-side application, I would like to use the IBM Cloud here. By following the tutorials in this chapter, you will master how to visualize sensor data on a server application.

Let's get started with the following topics:

  • Preparing a public MQTT broker service
  • Publishing the data from Node-RED on an edge device
  • Subscribing and visualizing data on the cloud-side Node-RED

By the end of this chapter, you will have mastered how to visualize sensor data on cloud platforms.

Technical requirements

To progress in this chapter, you will require the following:

Preparing a public MQTT broker service

Recall the previous chapter, Chapter 10, Handling Sensor Data on the Raspberry Pi. We sent the data of the temperature/humidity sensor, which was connected to the edge device (Raspberry Pi), to the cloud and confirmed that the data could be observed on the cloud side.

In the previous chapter, we checked how to operate an MQTT broker using a service called Mosquitto. This was in order to focus on sending data from edge devices to an MQTT broker.

However, this was a mechanism where everything was done locally on the Raspberry Pi. Essentially, when trying to implement an IoT mechanism, MQTT brokers should be in a public location and accessible from anywhere via the internet.

It is possible to host your own Mosquitto MQTT broker in the public cloud, but that adds some extra complexity in terms of setting up and maintaining it. There are a number of public MQTT services available that can make it easier to get started.

In this chapter, we will use a service called CloudMQTT for the MQTT broker, but you can replace the MQTT broker part with your favorite service. You can also publish your own MQTT broker, such as Mosquitto, on IaaS instead of using SaaS:

Figure 11.1 – CloudMQTT overview

Figure 11.1 – CloudMQTT overview

Important note

An MQTT broker is a server that receives messages from the publisher and sends them to subscribers.

The server that delivers messages in PubSub is called the MQTT broker.

PubSub is an amalgamation of the words Publisher and Subscriber:

a) A publisher is a person who delivers a message.

b) A subscriber is a person who subscribes to a message.

You can think of it as a server that receives messages from clients and distributes them to clients.

MQTT differs from ordinary socket communication in that it communicates on a one-to-many basis. In other words, it has a mechanism to distribute the message of one client to many people. This system allows us to deliver messages to many people simultaneously in real time.

We will now learn how to prepare for CloudMQTT. As mentioned previously, CloudMQTT is an MQTT broker published as SaaS. If you don't use CloudMQTT and want to use another SaaS MQTT broker or publish an MQTT broker on IaaS, you can skip this step. However, the basic configuration information for using an MQTT broker remains the same, so I believe this step will help you configure any MQTT broker.

Perform the following steps to create an MQTT broker service on CloudMQTT:

  1. Log in to CloudMQTT at https://cloudmqtt.com/.

    When you access the website, click the Log in button at the top right of the window:

    Figure 11.2 – CloudMQTT website

    Figure 11.2 – CloudMQTT website

    If you already have your CloudMQTT account, log in to your account by entering your email address and password:

    Figure 11.3 – Logging in to CloudMQTT

    Figure 11.3 – Logging in to CloudMQTT

    If you don't yet have your account, please create a new account via the Sign up button at the bottom of the window:

    Figure 11.4 – Creating your account

    Figure 11.4 – Creating your account

  2. Create an instance.

    After logging in, click the Create New Instance button in the top-right corner of the window:

    Figure 11.5 – Creating a new instance

    Figure 11.5 – Creating a new instance

  3. Select a name and payment plan.

    This name is for your MQTT broker service. You can give it any name you want. I have used Packt MQTT Broker.

    Unfortunately, the free plan, Cute Cat, is no longer available. So, we will select the cheapest plan, Humble Hedgehog, here. This plan costs $5/month.

    It's up to you to use this paid service. If you want to avoid billing, you need to look for a free MQTT broker service.

    After selecting the name and payment plan, click the Select Region button:

    Figure 11.6 – Selecting a name and payment plan

    Figure 11.6 – Selecting a name and payment plan

  4. Select a region and data center.

    This service is running on AWS. So, you can select a region where the data center is placed. You can select any region. Here, we are using US-East-1.

  5. After making the selection, click the Review button:
    Figure 11.7 – Selecting a region and data center

    Figure 11.7 – Selecting a region and data center

  6. Next, finalize creation of the MQTT broker instance.

    Please check the payment plan, service name, service provider, and data center region. After that, click the Create instance button to finalize creation of this instance:

Figure 11.8 – Finalizing MQTT broker instance creation

Figure 11.8 – Finalizing MQTT broker instance creation

Publishing the data from Node-RED on an edge device

In this section, we will configure our Raspberry Pi. To get started, launch the Raspberry Pi and open the Node-RED flow editor. This Node-RED flow editor should still have a flow to send the sensor data implemented in Chapter 10, Handling Sensor Data on the Raspberry Pi, to the server. If you have deleted this flow, or if you have not created it, please re-execute it by referring to Chapter 10, Handling Sensor Data on the Raspberry Pi. Double-click the mqtt out node that makes up the flow to open the settings window. We used Mosquitto last time, but this time we will connect to CloudMQTT.

Perform the following steps to configure Node-RED on the Raspberry Pi to connect to CloudMQTT:

  1. Access the flow you created in Chapter 10, Handling Sensor Data on the Raspberry Pi.

    In this chapter, we only use a flow with the mqtt out node because this scenario is just for sending data to a Raspberry Pi:

    Figure 11.9 – Accessing the flow we created in the previous chapter

    Figure 11.9 – Accessing the flow we created in the previous chapter

  2. Edit the mqtt out node.

    We now need to edit the connecting configuration. Open the settings window of the mqtt out node by double-clicking on it:

    Figure 11.10 – Opening the settings window of the mqtt out node

    Figure 11.10 – Opening the settings window of the mqtt out node

    Set the configuration to connect to CloudMQTT.

    Set the Topic, Qos, and Retain values as follows:

    • Topic: packt
    • Qos: 1
    • Retain: true
  3. Click the Edit button (pencil mark) to the right of Server to open the credential properties:
    Figure 11.11 – Clicking the Edit button to open the Properties settings

    Figure 11.11 – Clicking the Edit button to open the Properties settings

  4. On the Server settings panel, select the Connection tab and fill in each property as follows:
    • Server: driver.cloudmqtt.com
    • Port: 18913

      The other properties in the Connection tab are not supposed to be changed and must be kept at their default values.

      You can refer to the following screenshot for the Connection tab settings:

Figure 11.12 – MQTT broker server settings

Figure 11.12 – MQTT broker server settings

  1. Next, select the Security tab to edit the configuration to connect the MQTT broker and fill in each property as follows:
    • Username: The user that you got from CloudMQTT.
    • Password: The password that you got from CloudMQTT.

      You can refer to the following screenshot for the Security tab settings:

Figure 11.13 – MQTT broker user and password settings

Figure 11.13 – MQTT broker user and password settings

You can check these properties at the CloudMQTT admin menu. This menu can be accessed via the Instances list of the CloudMQTT dashboard: https://customer.cloudmqtt.com/instance

Figure 11.14 – CloudMQTT Instances list

Figure 11.14 – CloudMQTT Instances list

This completes the settings on the Raspberry Pi side. Next, let's set up the Node-RED flow editor so that data can be acquired (subscribed) with Node-RED on the cloud side.

Subscribing and visualizing data on the cloud-side Node-RED

In this section, we will see how to visualize the received data with Node-RED on the cloud side. This uses one of the dashboard nodes as we learned in Chapter 6, Implementing Node-RED in the Cloud, but this time, we'll choose Gauge's UI to make it look a little better.

The cloud-side Node-RED used this time runs on the IBM Cloud (PaaS), but CloudMQTT, which created the service as an MQTT broker earlier, is a cloud service that differs from the IBM Cloud.

In this chapter, we will learn that an MQTT broker exists so that it can be accessed from various places, and that both publishers (data distributors) and subscribers (data receivers) can use it without being aware of where it is.

Preparing Node-RED on the IBM Cloud

Now, let's create a Node-RED flow connected to CloudMQTT by performing the following steps. Here, we will use Node-RED on the IBM Cloud. Please note that it is not Node-RED on the Raspberry Pi:

  1. Open the Node-RED flow editor, log in to your IBM Cloud, and call the Node-RED service you have already created from your dashboard.
  2. Either click on View all or Cloud Foundry services on the Resource summary tile on the dashboard. Clicking on either option will take you to a list of resources on the IBM Cloud you created:
    Figure 11.15 – Opening the resource list

    Figure 11.15 – Opening the resource list

    If you have not created a Node-RED service on your IBM Cloud, please refer to Chapter 6, Implementing Node-RED in the Cloud, to create one before moving ahead.

  3. Under the Cloud Foundry apps displayed on the Resource list screen, click on the Node-RED service you created to open the Node-RED flow editor:
    Figure 11.16 – Selecting the Node-RED service you created

    Figure 11.16 – Selecting the Node-RED service you created

  4. Then, click Visit App URL to access the Node-RED flow editor:
    Figure 11.17 – Clicking Visit App URL

    Figure 11.17 – Clicking Visit App URL

  5. When the top screen of the Node-RED flow editor is displayed, click the Go to your Node-RED flow editor button to open the Node-RED flow editor:
    Figure 11.18 – Clicking the Go to your Node-RED flow editor button

    Figure 11.18 – Clicking the Go to your Node-RED flow editor button

  6. Make a flow to visualize the data.

    When you accessed your Node-RED flow editor on your IBM Cloud, create a flow as follows. Place the mqtt in node, json node, two change nodes, and gauge node after each change node. If you want to get the debug log for this flow, please add the debug node after any node. In this example, two debug nodes are placed after the mqtt in node and the first change node.

    You already have the dashboard nodes, including the gauge node. If you don't have them, please go back to the Make a flow for use case 2 – visualizing data tutorial in Chapter 6, Implementing Node-RED in the Cloud, to get the dashboard nodes:

    Figure 11.19 – Making a flow

    Figure 11.19 – Making a flow

  7. Edit the mqtt in node. Double-click on the mqtt in node to open the settings window. Set Topic, Qos, and Output with the following values:
    • Topic: packt
    • Qos: 1
    • Output: auto-detect (string or buffer)
  8. Click the Edit button (pencil icon) to the right of Server to open the credential properties:
    Figure 11.20 – Clicking the Edit button to open the Properties settings

    Figure 11.20 – Clicking the Edit button to open the Properties settings

  9. On the Server settings panel, select the Connection tab, and fill in each property with the following values:
    • Server: driver.cloudmqtt.com
    • Port: 18913

      The other properties of the Connection tab are not supposed to be changed and must be kept at their default values.

      You can refer to the following screenshot for the Connection tab settings:

Figure 11.21 – MQTT broker server settings

Figure 11.21 – MQTT broker server settings

  1. Next, select the Security tab to edit the configuration to connect the MQTT server and fill in each property with the following values:
    • Username: The user that you got from CloudMQTT.
    • Password: The password that you got from CloudMQTT.

      You can refer to the following screenshot for the Security tab settings:

Figure 11.22 – MQTT broker user and password settings

Figure 11.22 – MQTT broker user and password settings

As you may have already noticed, these properties have the same values that you set for the mqtt out node on the Raspberry Pi Node-RED. Please refer to the CloudMQTT dashboard if necessary.

  1. Now, edit the json node. Double-click on the json node to open the settings window. Select Convert between JSON String & Object on Action, and set msg.payload on Property:
    Figure 11.23 – Setting the json node properties

    Figure 11.23 – Setting the json node properties

  2. Edit the settings of the change node. Double-click on the first change node to open the Settings window and then set msg.payload.temperature in the box entitled to under the Rules area. Then, click the Done button to close the settings window:
    Figure 11.24 – Setting the properties of the first change node

    Figure 11.24 – Setting the properties of the first change node

  3. Also, edit the settings of the second change node. Double-click on the second change node to open the Settings window. Set msg.payload.humidity in the box entitled to in the Rules area and then click the Done button to close the settings window:
    Figure 11.25 – Setting the properties of the second change node

    Figure 11.25 – Setting the properties of the second change node

  4. Edit the settings of the first gauge node. Double-click on the first gauge node to open the Settings window and then click the Edit button (pencil icon) to the right of Group to open the properties:
    Figure 11.26 – Clicking the Edit button to open the Properties settings

    Figure 11.26 – Clicking the Edit button to open the Properties settings

  5. In the dashboard's group setting panel, fill in each property with the following values:
    • Name: Raspberry Pi Sensor data

      * It's OK to provide any name here. This name will be displayed on the chart web page that we'll create.

      Other properties are not supposed to be changed and must be kept at their default values. You can refer to the following screenshot:

Figure 11.27 – Setting the group name

Figure 11.27 – Setting the group name

  1. Go back to the main panel of the gauge node settings and fill in each property with the following values:
    • Type: Gauge
    • Label: Temperature
    • Units: °C (if you prefer to use Fahrenheit, please use °F)
    • Range: -15 ~ 50 (if you prefer to use Fahrenheit, please adjust the range accordingly)

      Other properties are not supposed to be changed from their default values. You can refer to the following screenshot for the settings:

Figure 11.28 – Setting the gauge node properties

Figure 11.28 – Setting the gauge node properties

  1. Edit the settings of the second gauge node. Double-click on the second gauge node to open the Settings window and then select the same Group name you created in the previous step. Fill in each property with the following values:
    • Type: Gauge
    • Label: Humidity
    • Units: %
    • Range: 0 ~ 100

      Other properties are not supposed to be changed from their default values. You can refer to the following screenshot for the settings:

Figure 11.29 – Setting the gauge node properties

Figure 11.29 – Setting the gauge node properties

Please make sure to deploy the flow on your Node-RED.

This completes the Node-RED configuration on the IBM Cloud. This means that this flow is already subscribing (awaiting the data) with the topic packt for the CloudMQTT service. Next, it's time to publish and subscribe to the data.

Visualization of the data on the IBM Cloud

On the edge device side, on the Raspberry Pi, we are ready to publish the sensor data to CloudMQTT with the topic packt. On the cloud side, the flow is already with the packt topic for the CloudMQTT service.

For a Raspberry Pi, perform the following steps to publish your data:

  1. Publish the data from your Raspberry Pi.

    Access your Node-RED flow editor on your Raspberry Pi. Click the button of the inject node to run this flow for publishing grove temperature and humidity sensor data:

    Figure 11.30 – Running the flow for publishing data

    Figure 11.30 – Running the flow for publishing data

  2. Check receipt of the data on the IBM Cloud.

    You will be able to receive (subscribe) the data via CloudMQTT. You can check it on the debug tab on your Node-RED flow editor on the IBM Cloud:

    Figure 11.31 – Checking the subscribing of the data

    Figure 11.31 – Checking the subscribing of the data

  3. Open the chart web page via the chart tab on your Node-RED flow editor on the IBM Cloud and then click the open button (diagonal arrow icon) to open it:
Figure 11.32 – Opening the chart web page

Figure 11.32 – Opening the chart web page

You will see the web page gauge chart with the data displayed:

Figure 11.33 – The chart web page is displayed

Figure 11.33 – The chart web page is displayed

Congratulations! Now you know how to observe the data sent from the Raspberry Pi on the server and visualize it as a chart.

If you want the flow configuration file to make this flow on your Node-RED, you can get it here: https://github.com/PacktPublishing/-Practical-Node-RED-Programming/blob/master/Chapter11/getting-sensordata-with-iotplatform.json.

Summary

In this chapter, we experienced how to receive the sensor data sent from an edge device and visualize it on the server side.

In this chapter, we used CloudMQTT and Node-RED on the IBM Cloud. Node-RED can run on any cloud platform and on-premises, and you can try to make this kind of application in any environment. That's why remembering this pattern will definitely be useful for your future development with other cloud IoT platforms.

In the next chapter, we will look at a hands-on scenario of making a chatbot application with Node-RED. This will introduce you to a new way of using Node-RED.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
44.222.231.51