Imagine that you are the owner of a grocery's warehouse, and you need to always be aware of the temperature and humidity inside the room to inform employees in the event of an emergency. Remember how often you run home to check whether you switched off the iron, or whether you closed the door. It's beneficial to know that even when you're several thousand kilometres away, you can get such information through an app, and perform all necessary subsequent operations.
Solution
The application, in which you can track changes in device data in real-time, is a web interface with the ability to create widgets that allow you to display and manage remote devices via the Internet.
The appearance of each widget can be configured separately. For example, you can configure a colour change if values are out of range. The temperature monitoring widget can also be displayed as a digital thermometer.
The user can see all their devices and the data received from them in real-time and in a convenient format. It's possible to build graphs and reports for the selected time intervals with further unloading in Excel and PDF formats. Through the UI, you can set commands and send them to certain devices.
The range of managed devices is unlimited. The board can be connected to a car, a window, a kettle, a lawn watering system, etc.
Technologies used
To store and process data from devices, a server is needed that will receive, process, and send information to the application. Such a server can be developed independently: IoT device vendors provide documentation for the exchange protocol for their devices.
However, it turned out to be more rational to use a free service that has restrictions only on device limits – the so-called ‘broker’ from flespi. It provides a well-documented API, as well as an MQTT client for inter-device information exchange.
The chosen language is JavaScript, and for fast and comfortable development – the React.js library is used in conjunction with Redux. Thanks to React, new data from the instruments are displayed instantly in the user interface with maximum performance for the latter.
For communication between devices in real-time, the MQTT technology is used, which is replaced by WebSocket in the browser version. The application has an adaptive layout that allows you to work with devices via a mobile browser.
When choosing between Vue, Angular, and React technologies, we preferred the latter, with plans to develop a mobile application for iOS and Android platforms. The React Native technology from Facebook (recognized as an extremist organization by the Russian government) is the best suited for this task. Most of the logic has already been implemented, and we will be able to use the created React components with minimal changes. This will significantly reduce the cost of development.
2002–2024