Control your home using only Javascript – francesco marassi – Medium

How to use #ReactJS, #NodeJS and Espruino on ESP8266 to build some smart home components:

  • JS for the Back-EndEspruino for the components (based on ESP8266)As you can see, there are three main components in this architecture:Progressive Web AppHere I can switch on/off the lights, share nodes with other people and schedule some events for the future.Iper-Cool web appIt’s using React and Redux to handle all the state, and this is also saved on LocalStorage.
  • It’s composed by:an API to create nodes, set node state (switch on/off, change brightness…), add a user to a node and get info about a user.
  • The authentication is based on a Token strategy.A MQTT broker (i’m using Mosca) to connect to the nodes and send/receive state changes.A Socket.io server, to send to the Web app all the state changes caused by other users or by the server (for example: a scheduled event to turn off a light)A MongoDB Database: at work i’m a Postgres guy, so I wanted to give Mongo a try :)The server is really lightweight and I tried to use fewer possible packages and write lots of things by myself.NodesEvery node is based on ESP8266, a microcontroller with integrated WI-FI.
  • jpg”, “users” : [], “schedules” : [], “registered” : true, “uuid” : “code” : “4838”, //used on first node setup “state” : { “open” : false }}A type describes the type of the node: for now I created a temperature node that sends the temperature to the server, and some switch nodes, that turn on/off lights or other electronic devices (a TV).
  • Every time a user make a change on the Web App, a new state is saved on MongoDB and sent via MQTT to the node.

In the last 2 months I spent some nights creating a smart home architecture, based exclusively on Javascript. Here I can switch on/off the lights, share nodes with other people and schedule some…

@ReactiveConf: How to use #ReactJS, #NodeJS and Espruino on ESP8266 to build some smart home components:

As you can see, there are three main components in this architecture:

Here I can switch on/off the lights, share nodes with other people and schedule some events for the future.

It’s using React and Redux to handle all the state, and this is also saved on LocalStorage. A service worker is caching all the GET requests, so after the first load the app is really fast to open and to interact. And with the last Chrome for Android, you can also install it as a normal app 🙂

The server it’s where all the information about the nodes, the users and all the interaction between them resides. It’s composed by:

The server is really lightweight and I tried to use fewer possible packages and write lots of things by myself.

Every node is based on ESP8266, a microcontroller with integrated WI-FI. I found that it is possible to program them with Javascript, using Espruino… and not only plain Javascript, also all the commands from ES2016 are supported!

For now I’m using a NodeMCU and some Sonoff, but you can also buy some other official Espruino boards from their site (I’m really tempted by Puck.js).

NodeMCU and Sonoff don’t have Espruino installed by default, so I used ThingsSDK and their Flasher.js App to flash them in less than a minute. After that, pushing the code on the node is easy as npm run dev.

At the first boot of a new node, it starts an Access Point to configure the Network SSID, Password and the Aurora Code, a 4-digit code that is used by the node to obtain the right MQTT channel and to register himself on the server.

The interface for the Wi-Fi setup is really simple: this is caused by the fact that all the HTML code for the page is inside the node, and they have limited memory. To avoid lots of Out Of Memory! errors, I had to remove lots of lines of fancy CSS.

The structure of a node is simple:

“_id” : ObjectId(“58e915b7e2ae848bee319642”),

“user” : “464636e0–0587–11e7–84a3-a38b03337b96”,

“type” : “switch”,

“name” : “LED 2”,

“image” : “/assets/star-lights.jpg”,

“users” : [],

“schedules” : [],

“registered” : true,

“uuid” : “ffdedc00–1q7b-11e7-a400–6109474f8f1e”,

“code” : “4838”, //used on first node setup

“state” : {

“open” : false

A type describes the type of the node: for now I created a temperature node that sends the temperature to the server, and some switch nodes, that turn on/off lights or other electronic devices (a TV).

Every time a user make a change on the Web App, a new state is saved on MongoDB and sent via MQTT to the node. A node can also publish via MQTT: I currently have a temperature node that push my bedroom temperature and humidity every hour to the server.

The first nodes prototypes were based on Particle Photons, a great service (and hardware) but every Photon costs around 20$: too much for this use. The Sonoff is the perfect hardware for a simple switch: you can find them at less than 10$ (5$ from the official site). I bought them from Amazon only because I wanted them to arrive in 2 days.

Control your home using only Javascript – francesco marassi – Medium