Представьте, что вы владелец продуктового склада, и вам необходимо всегда знать о температуре и влажности внутри помещения, чтобы при любой внештатной ситуации информировать сотрудников. Вспомните, как часто вы возвращаетесь домой, чтобы проверить выключен ли утюг или закрыта ли дверь. Хорошо, что даже находясь за несколько тысяч километров, можно получить подобную информацию через приложение и произвести необходимые операции.
Решение
Приложение, в котором можно отслеживать изменения данных приборов в реальном времени, представляет собой веб-интерфейс с возможностью создания виджетов, которые позволяют отображать и управлять удаленными устройствами при помощи интернет.
Внешний вид каждого виджета может быть настроен отдельно. Например, можно настроить изменение цвета, если происходит выход за пределы значений. Виджет для мониторинга температуры может отображаться как цифровой градусник.
Пользователь может видеть все свои устройства и данные, полученные от них, в режиме реального времени и в удобном формате. Возможно построение графиков и отчетов за выбранный интервал времени c дальнейшей выгрузкой в форматах Excel и PDF. Через UI можно задавать команды и отправлять их на устройства.
Спектр управляемых устройств не ограничен. Плата может быть подключена к автомобилю, окну, чайнику, системе полива газона и прочим.
Используемые технологии
Для хранения и обработки данных от приборов необходим сервис, который будет получать, обрабатывать и отправлять информацию в приложение. Такой сервер можно разработать самостоятельно: поставщики IoT устройств предоставляют документацию к протоколу обмена для своих приборов.
Однако более рациональным оказалось использование бесплатного сервиса, имеющего ограничения только по лимитам на устройства, — так называемого «брокера» от компании flespi. Производитель предоставляет отлично документированный API, а также MQTT-клиент для обмена информацией между приборами.
Язык выбран JavaScript, а для быстрой и комфортной разработки — библиотека React.js в связке с Redux. Благодаря React новые данные с приборов отображаются мгновенно в интерфейсе пользователя с максимальной производительностью для последнего.
Для связи между приборами в режиме реального времени используется технология MQTT, которая в браузерной реализации заменяется на WebSocket. Приложение имеет адаптивную верстку, что позволяет работать с устройствами через мобильный браузер.
Выбирая между технологиями Vue, Angular и React, мы отдали предпочтение последней в связи с планами разработки мобильного приложения для платформ iOS и Android. Для этой задачи как нельзя лучше подходит технология React Native от Facebook (признана экстремисткой) — разработчика React. Большинство логики уже написано, и мы сможем использовать созданные React-компоненты с минимальными изменениями. Это значительно снизит себестоимость разработки.
2002–2024