Wrote this back in 2017. A lot has changed since then, but still worth publishing. Made a video, but unable to locate it.
Developing a Web app for Home Automation
In my previous blog, I discussed one of the most interesting applications of IOT - Home automation and the reason behind why I am building such a project despite the fact that it is nothing new and a lot of people have done that previously and the answer was a curiosity to implement technology in daily use. I work in one of the best IOT startups based out of Bangalore and have learned a lot in the last 3 years i.e. Product development, Hardware, Firmware, and a bit about web-application.
Web applications play a major role in any of the IOT applications as they provide an interface to interact with the device i.e. that device can be a device that we are trying to control or a device that is sending data to a remote server. Below is a short description of the data flow from the device to the server and from the server to the device.
Although I never worked in depth on any of the applications (except some that I developed for myself), I find this project to be a base where I can try implementing some of what I have learned.
Web applications play a major role in any of the IOT applications as they provide an interface to interact with the device i.e. that device can be a device that we are trying to control or a device that is sending data to a remote server. Below is a short description of the data flow from the device to the server and from the server to the device.
Although I never worked in depth on any of the applications (except some that I developed for myself), I find this project to be a base where I can try implementing some of what I have learned.
As I discussed in my previous blog DIY type projects are quite different from what we use to develop in any company, here while discussing the web app, we will not be doing the optimally best code with all the possible features, but initially, we will try to make it work and then later on we will keep on adding different features like SSL or OAuth based API's like this. Please pardon me if my way of coding seems to be too repetitive.
Web-app
Front-end - I am using Material Design Lite - UI developed using MDL literally looks good without investing much in CSS. For asynchronous communication with the server, I thought of using AJAX or JS.
(a) Using Ajax, a request to the server can be made in the background to get the latest state of the device i.e. if someone at home has turned OFF / ON the device manually, that state needs to be reflected on the web app.
(b) Using JS to receive the data from the backend and change the state of the radio button accordingly.
Probably i will create two working branches of the code i.e. one with Ajax and one with JS. As of now, i will go with option (b), as it is relatively easy for me to write a code in python and pass it to a JS using Jinja. Below is a small pictorial description of what i explained above.
Back-end - I am using a combination of Python, Nginx, Flask, and MySQL for server-side coding. I learned most of it from Digitalocean post on how to create web-application. I have been doing Python for some time. Also in my present startup, i always come across Python code base for the gateway, so it's relatively easy for me (yes for me only, most of the people I know work with PHP).
API first should have been the approach that I should have taken if I had been writing this to be distributed as a service or product. But as I am doing this only for my personal use, for web-application, it would be a normal request but for Android applications, I have to write apis. And when it comes to API, you need to take care of security (I have to do more research and reading on the same). I am still in the process of learning more about API's. While working with Flask + Python, you will get a lot of support in writing API with all the related issues being taken care of like
Moving ahead of APIs, when we consider hardware running a small stack of software that will actually control the appliances, we need to think about "how to pass the information from the server to the device". Well there are multiple ways to tackle this problem and I will discuss in detail with respect to them in my next blog post on Hardware (Hardware as in RPI + relay board + small piece of software), but still in order to get that done, I need the counterpart on the server. As this post is on the web, I will focus mostly on the web par (APIs do come under this) but still focus should be on the web app.
To make it look more professional, I will create a login / sign-up page which will let me use a combination of login ID and password to make it secure. Also, going ahead, we can make the landing page more systematic like Places --> home/office --> appliances.
Moving ahead, I have chosen Mysql as a database and not any other time series database because here the velocity of data is too low, and of all, we are not storing but updating the records, so Mysql seems to be the best choice. Now in the future, if this same server, is to be used to calculate the energy consumption of a house, then we have to store the ON/OFF state for the full day and then at the last of the day, run a script to calculate the net electricity consumed (yes - of course it will some more coding or you can say lot of coding - like storing the power ratings of the appliance, then for each user, each appliance, calculate the energy consumption, then for a person calculate the electricity consumed and then email / sms him etc.
Below is the snapshot of the working of the web app and corresponding changes on the back-end DB. As of now, this is running locally in my system. Once this all is tested, will deploy it in the server and start using it.
