Create your first Arduino + Node.js IoT Visualization App in under 15 minutes

“Smart homes and other connected products won’t just be aimed at home life. They’ll also have a major impact on business. And just like any company that blissfully ignored the Internet at the turn of the century, the ones that dismiss the Internet of Things risk getting left behind.” — Jared Newman, writing in Fast Company

Currently, IoT and Node.js are the two buzzwords heard in the field of technology. The implementation of an IoT application using Node.js and Arduino itself is an interesting topic to learn. By the end of this post, you will build a real-time temperature monitoring system. Trust me…! It’s very easy to build this application if you have all prerequisites.

GitHub repository to be followed: node-temperature-monitor (https://github.com/Narendra-Kamath/node-temperature-monitor)

Hardware requirements

1. Arduino Uno R3 board [Buy now]
2. 1k Ω Resistor [Buy now]
3. 1k Ω NTC Thermistor
4. Jumper wires X 3 (Male to Male) [Buy now]
5. Breadboard [Buy now]
6. Desktop

Software requirements

1. Arduino IDE [Download]
2. Node.js [Download]

After having the above-mentioned prerequisites, connect the Arduino board and upload the example code of standard firmata. This particular code allows you to make the Arduino as a standard communicable device to the desktop and we are going to control Arduino board using the Node.js application that we are going to build. So let us verify and upload the ‘Standard Firmata’ code to Arduino from Arduino IDE.

Selecting the StandardFirmata code and uploading it to Arduino Uno R3

After uploading the code to the board, we are going to setup the circuit, where we use three jumper wires, 1k Ω NTC Thermistor, 1k Ω Resistor and breadboard along with the Arduino board.

Circuit Design

After setting up the hardware, now the main part is to prepare the Node.js server (for transmitting data from Arduino) and the client application (to receive from server app). The GitHub repository provided in the start of this post can be cloned for a quick test of this application.

The application has two parts, the server side and the client side.

Part 1: Server-side application

In the server.js file, we are going to include two dependencies,

• node-dweetio: It’s an easy to use and free messaging platform for the Internet of Things.
• johnny-five: This node module is used to connect to Arduino board from our Node.js application.

The code is simple and straightforward. Where there is a mention of a pin for which we have connected the data jumper wire (A0). Since thermistor is a variable resistor, Arduino cannot calculate the temperature and the resistance, but it can be used to measure the voltage.

At first, we have to measure the resistance and later from that, we can measure the temperature. It is the same logic which is applied in the ‘on-change’ event of the temperature sensor (Reference: Make an Arduino temperature sensor). DweetThing is a unique name which can be given for the connected thing, which is ‘node-temperature-monitor’ in the given example. The server part is now ready, where on every change in temperature, a message object will be dweeted.

Part 2: Client-side visualization application

Now we have setup the server part. It is the time to create a wonderful client-side application to receive the dweeted data and visualize it.

Here we are going to use socket.io node module to enable real-time bidirectional event-based communication. When there is a dweet sent from the server, the app.js catches the dweet and the same data is emitted using the socket.io instance. Now we are going to create a view part of the node application in the public folder. This particular folder will have an index.html page and a JavaScript file.

The index.html file has a dependency on socket.io, jquery, bootstrap and morris js. We are using Morris.js charting library for creating a simple line chart to display the temperature at particular time instance as and when there is a dweet from the server.

Final Steps

Since we have created both the server and the client side of the application, first we will start the server. Refer the GitHub repository to get an idea of how to start the server. When the server is made up, the console will look something like this,

> npm run server-start

Server console output

Now the wonderful part of this application is visualization. Run the command and visit http://localhost:3000,

> npm run start

Real-time temperature monitoring

Congratulations we have now created a Node.js based real-time temperature monitoring and visualization application. Wasn’t it easy?

Kindly share your views in the responses section :) Thank you!

References

• Make an Arduino Temperature Sensor
• Creating an IoT case