Gorilla Guide: Essential Steps for IoT Success Part 2
** Note: This post was written by Gorilla Fabian Montealegre and former Gorilla Christopher Valerio.
Internet of Things (IoT) connects every aspect of our lives to the cloud. We don’t just share cat pictures and baby videos anymore, we live like the Jetsons! To demonstrate our IoT skills, a small band of Gorillas took on a simple problem: What is the most effective way to heat or cool a room based on current ambient temperature?
In our first Gorilla Guide to IoT post, we determined which hardware and software to use for our project and explained how to set everything up for development. In this final post, we explain how to start reporting data to the cloud, and set up rules to work with the data recorded. We also discuss the backend server developed on Go and a dashboard app built with React and MaterialUI. We’ll share code snippets and hints on how to do most of the heavy lifting development.
React Application
We chose a stack of React, Redux, and MaterialUI for the webapp.
MaterialUI helps keep good design principles without having to be a UX guru. It offers a wide variety of free templates to use in a simple project like ours. We went with rafaelhz’s responsive template, in order to save time.
Redux was chosen because we weren’t sure if we needed to handle server side events or use websockets. Luckily, Redux works perfectly in both scenarios.
The UI is pretty straightforward. It shows the temperature and fan status and allows the user to change temperature and fan settings. The fan icon will rotate to show that the fan is on. If the user toggles the override switch, the fan won’t listen to the backend events, and will only change manually. If the override thresholds switch is toggled, the fan will only change by manually turning it on/off.
The app uses lodash’s debounce function to avoid sending multiple requests when the user is changing the text fields for min/max thresholds. Here is an example of how to do it.
Take a look at our code snippet:
updateTempMax = debounce(max => { this.props.dispatch(putTempMax(parseFloat(max), this.props.temp.name)) }, 600)
We also included a simple timeline graph for live changes in temperature. It shows the fluctuation in temperature since the start of the app.
The whole React app can be found here.
Go backend
Go has become a popular programming language, and it’s a really good tool to build blazing fast APIs. It also provides a huge amount of standard and community-made libraries, which makes developing APIs and microservices a win-win process.
While deciding which tools and frameworks to use to build our simple API, we found an interesting few worth mentioning:
After some analysis, the team decided to use Gin-Gonic. It’s ideal for managing routing, is easy to use and has a good performance. So, the whole server uses two files:
main.go, that has the routing logic.things.go, that deals with the devices shadow logic.
Check out our code repo here.
AWS IoT Go SDK
AWS provides a rich SDK to work with shadow devices. For more details about it, take a look at the documentation here.
By adding the following imports in your file, you’ll be ready to roll:
import ( "encoding/json" "fmt" "github.com/aws/aws-sdk-go/aws" "github.com/aws/aws-sdk-go/aws/session" "github.com/aws/aws-sdk-go/service/iotdataplane" "github.com/gin-gonic/gin" "net/http" )
Dockerfile
In order to build and deploy the app, we are using docker.
This is our dockerfile:
FROM golang:1.8 ADD . /go/src/gorilla_fan RUN go get github.com/gin-gonic/gin && go get -u github.com/aws/aws-sdk-go/aws/... && go get gopkg.in/gin-contrib/cors.v1 RUN go install gorilla_fan ENTRYPOINT /go/bin/gorilla_fan EXPOSE 9090
To build this just run:.
$ docker build -t iotproject . $ docker run --name iotproject -p9090:9090 iotproject -d
Conclusions
The Go server is not necessary to use AWS IoT, but if you want to have an extra layer of security and management, or connect other devices that don’t work with MQTT, it’s a nice approach to follow. Also, it gives more reliability to your infrastructure.
Managing the state of the fan and thermostats was fairly easy thanks to Redux. MaterialUI made the whole UX very simple. We highly recommend using Redux when polling data from a server or using websockets, mostly because of how straightforward your stored data will be managed.
