TLDR; This three-part tutorial explains how to setup a basic smart home web app tracking sensor data for temperature and humidity with a Raspberry Pi and web technologies like Mosquitto, Node.js, Express.js, Vue.js, Quasar and Chart.js.
I wrote this three-part tutorial to track my experiences, tech choices and suggestions for you to follow and came up with a solution that comes with an easy hardware setup and some popular (and worth to learn if you are not already familiar with) web development technologies, including Node.js, Mosquitto and Vue.js.
The basic three parts will allow you to run a web application on your local machine. Nevertheless I added some more features including persistent database storing and the deployment in the cloud with Heroku. You will find these tutorials at the end of this page. The code base is stored on Github!
Choose and install hardware (sensors, receiver, Raspberry Pi) for a basic tracking tool on temperature and humidity
I did some research on how to build basic weather stations and home automation systems with a Raspberry Pi but they were mostly no wireless solutions or they came up with too much IoT hacking/soldering and especially required a lot of electrical knowledge I do not have. The core problem I figured out was that many tutorials wanted me to build a remote sensor gagdet with radio functionality and sleep mode (e.g. with an Arduino) all on my own. So the question was: Is there a better and easier alternative to such an all self made solution and what about the receiving hardware on the Raspberry Pi?
Fortunately, there exists an easier alternative I will show you in this part of the tutorial which deals with slightly more expensive IoT gagdets but which enabled me to set up my smart home hardware in a smooth but nonetheless instructive way.
The main problem in this part was how to set up a stable and endlessly running task on my Raspberry Pi to continuously receive the (correct!) sensor data. Secondly I wanted it to somehow process and transfer it to a backend/microservice/middleware, which then would provide an upcoming frontend with JSON data to display. MQTT is the IoT protocol to go with but how to set it up? How can a MQTT broker like Mosquitto work with a Node.js backend properly?
This was somehow the easiest part, because I mainly work as a frontend engineer and know how to implement dashboard-like web app solutions in combination with backend REST API services and the like. I challenged myself with an insight into Vue.js, since I mainly used React as a SPA framework before. In search of a nice UI library I discovered Quasar, which provides a very useful CLI and UI components so that there was no need to come up with an own CSS by myself.
Add more features?
I wrote some more or less standalone tutorials, which will help you to improve your existent application with some more capacities.