Real-time IoT app with React + Firebase + esp8266

in the upper-right corner of the menu bar, or press Command + Space bar, type “Terminal” and hit enter.

Or the Command Prompt if you are using Windows, click the start button search for cmd.

exe and hit enter.

The following code will install through npm a package called “create-react-app” which is a tool to prepare a basic project so that you can jump right into developing the application.

Also, -g means it will be installed globally on your machine allowing it to be used on any folder lets say.

The next packages you will need will be installed locally only, on the project folder.

Write the code on the terminal/cmd window and hit enter.

npm install -g create-react-appYou may need to write “sudo npm install -g create-react-app” which will await your computer’s password to make such changes as a super user.

Now that this amazing tool is installed, you can type the following code to change the directory to the Documents folder and create a project with the name iot-distance-sensor.

You can change that name to whatever you want.

cd Documentscreate-react-app iot-distance-sensorIf you don’t use “cd Documents” you will create the project folder on the default location for the terminal, which is likely to be the logged user folder.

When completed, a new folder will appear with the name you’ve chosen.

Let’s proceed with the coding editor.

Launch VSCode or another editor you’ve got and choose File → Open … and select the folder that was created by create-react-app.

You should have something like the above image when you open src → App.

js on the left menu.

VSCode enables an embedded CLI, which can be accessed by clicking Terminal → New Terminal on the top menu.

If you are not using VSCode, you should use the default CLI and make sure you are on the project folder to follow through.

npm startThe above code starts a development server on port 3000, so you can see your web application live at localhost:3000.

Also, run the following command to install the packages that will be used:npm install –save firebase axiosBack to VSCode you can right click and delete App.

test.

js and logo.

svg for they won’t be used.

Right-click src → New File and create canvas.

jsx, firebase.

jsx, and then style.

css.

Below I have included comments on all files explaining what each line of code does since that’s not the main purpose of this guide.

 Here, however, I intend to explain what these files do.

canvas.

jsx renders a HTML5 <canvas/> element which allows the creation of graphics on the web using JavaScript.

This will visually indicate the level of the water in the tank based on the distance provided by the sensor, stretching a blue rectangle drawn on the canvas every time the value is altered.

firebase.

jsx is the file that will establish a connection to the Firebase database, it will be used by our main component to listen to changes on the data of a specific field, in this case, the distance that is being stored.

App.

js is the main component, it will combine the above ones while capturing the data and showing the desired behavior.

You will have to overwrite the file that is created with the project with the code below.

style.

css is responsible for styling the application.

You have to change the fields <YOUR_FIREBASE_PROJECT_NAME> and<YOUR_WEB_API_KEY> of firebase.

jsx.

Remember you saved these values at the end of section 2 of this guide.

firebase.

jsxcanvas.

jsxApp.

jsxstyle.

cssWith that done lets put everything in place.

Make sure the NodeMCU board is powered on and has connected to the specified Wi-Fi, then you can open the browser on localhost:3000 assuming you have started the development server already (using npm start).

Moving the distance sensor will send the information to the database and the application will consume this data, automatically changing the value and the size of the blue rectangle on the canvas.

Awesome!.You made it to the very end of this tutorial.

Thank you very much for your attention and feel free to ask me anything if you have encountered a problem.

If you feel like, follow me on Twitter @pflevy.

.

. More details

Leave a Reply