Working with Arduino, Node.js and Angular

The integration of embedded devices with web applications is growing. Before this moment, let's talk about how to use Arduino with such an application.

The proposal will be to read a sensor through the Arduino, send this data through the serial port, store them in a database, and finally display them on a web page that will consume an API.

Before we start let's explain how each component of our application works.

Let's read the sensor and send this data through the serial port (But why do not we send via an Ethernet shield, for example? A: Let's go friends, in the next phase we will remove the serial communication). Once received, our Node.js application will read the data, persist it in the database, and expose an API.

Node.js is a JavaScript-based development platform that works in a cross-platform environment for the development of server-side web applications. Its goal is to help programmers create high-scalability applications.

The database we will use is MongoDB. MongoDB is a NoSQL database, that is, it has the characteristic of containing all the important information in a single document.

Through the API, our application developed in Angular will read in intervals the data of the bank and display them. Let's work on the idea of ​​a temperature gauge.

Come on!

First let's read the sensor data through the analog port is to write them on the serial port. Let's simulate that our sensor is a potentiometer connected to the A0 pin of the Arduino.

We will now get our Node.js application to receive this data and store it in our database.

Let's apply the MVC concept in the Node application, so we'll have our model and controller.

Our model will be the Temperature class, defined with the value and date fields.

Our controller will respond to requests, which will be the requests of our web application. Let's work with a post and a get, respectively an action to create a record and another to read the latest data. Look here.

Our Route will be responsible for reading the serial port, which in our example is COM5 and for each data received, will be registered in the bank and will also inform the endpoints of the service. See how you got here.

We can not forget to talk about our persistence of data. Our bank will have a collection called Temperature (we can call the table, for those who are not accustomed to NoSQL), which records the value (sensor data) and date (date of receipt).

I used mLab to create an online base, it has a free version that meets us at the moment.

You can use mLab's own site to view collections, but I used Studio3T software. Once you have made the connection to your base created in mLab, you have this view:

Now we have almost everything ready!

If you download the project and run our server together with the Arduino firmware, you will see that the data is being inserted into the database.

We need our Angular application to consume the API data. This is very simple.

Remember our Route? In it has an "GetTemperature" endpoint, it returns the most recent record.

Let's use Postman to test the API.

Ready! Now just consume the API and display the data. To give a cool style on our site I used this lib.

The end result is this:

I hope I have helped a bit and for anyone who wants access to the source code click here.