React web pro administraci IoT zařízení

Vít Uličný
·03/07/2024
·5 min.
Naším cílem bylo implementovat web pro management IoT zařízení v jazyce Javascript a knihovně React. Projekt vývoje platformy pro správu zařízení IoT nám trval 3 měsíce. Začali jsme v březnu 2019 a skončili v květnu 2019. Klient je společnost s názvem Iot Solution, která vyvíjí vlastní zařízení IoT.

Hlavní cíl
Systém online správy IoT zařízení nabízí zákazníkům způsob, jak spravovat své senzory a zobrazovat měření senzorů v grafech.
Hlavní výzvou bylo vyvinout jednoduchou, rychlou a snadno použitelnou webovou aplikaci, React front-end web s možností přihlášení, správy zařízení IoT a zobrazení grafů s daty.
Výsledek
Výsledkem bylo, že jsme společnosti IoT Solution doručili řešení React webovou aplikaci připojenou přes REST API k backend web serveru.
Jejich zákazníci nyní vidí data senzorů v grafech a mají přístup k informacím o senzorech, jako je název snímače, ID zařízení, stav baterie, výkon signálu, atd.
Zákazníci mohou také změnit dobu přenosu snímače a změnit tak frekvenci měření.
Použité technologie a knihovny
Pro tento webový projekt jsme použili technologii React s pomocí knihovny Redux a frameworku Amplify od Amazonu.
Další zajímavé knihovny v projektu byly:
- Chart.js pro jednoduché a poutavé grafy v JavaScriptu založené na HTML5,
- React-intl pro internacionalizaci React aplikace,
- Moment.js umožňující analyzovat a zobrazovat data a časy v jazyce JavaScript,
- a Bootstrap pro snadnou tvorbu responzivních stránek pro mobilní telefony.
Tým na projektu
Rascasone tým, který pracoval na tomto projektu React frontend webu, měl tři členy:
- vedoucí projektu Štěpánka,
- jeden React vývojář Šimon,
- a jeden tester Jakub.
Naše řešení podrobně
- Formulář pro přihlášení
- Registrační formulář
- Ověření e-mailu a uživatele
- Přehled IoT zařízení
- Přidání nových IoT zařízení prostřednictvím formuláře s validací
- Plně responzivní design / optimalizace pro mobily
- Grafy s informacemi o senzorech IoT
- Podpora více jazyků
- Připojení API REST k backendu web serveru
1. Formulář pro přihlášení
Jedná se o klasické přihlášení do admin / uživatelské sekce. Tento krok jsme vyřešili pomocí frameworku AWS Amplify.

2. Formulář registrace
Formulář pro registraci jsme také vyřešili rychle a jednoduše pomocí AWS frameworku Amplify.

3. E-mail a ověření uživatele
Po správném zadání všech informací je uživateli zaslán ověřovací e-mail. Jelikož je web více jazyčný, musí i email s potvrzením obsahovat všechny jazykové mutace. Ověřovací e-mail obsahuje konfirmační kód, který je třeba vložit do ověřovacího formuláře.


4. Seznam zařízení IoT
Po přihlášení si může uživatel zobrazit své registrované senzory, přidat nový senzor, upravit aktuální senzor nebo zobrazit data senzorů v grafech. Hlavním požadavkem na UI / UX webu bylo mít vše velmi jednoduché a přehledné.

5. Přidání nových IoT zařízení prostřednictvím formuláře s validacemi
Webová aplikace umožnuje přidat nová zařízení prostřednictvím formuláře. Formulář má několik vstupů s validací textu, číselných polí a datových typů.




6. Plně responzivní design, optimalizovaný pro mobily
Jedním z hlavních požadavků bylo mít plně responzivní design, optimalizovaný pro mobily. To znamená, že web má stejnou funkčnost pro uživatele z desktopu nebo notebooku stejně jako pro uživatele používající mobilní telefony.

7. Grafy s informacemi o IoT senzorech
Existuje spousta druhů IoT senzorů a typů IoT zařízení. Tato zařízení produkují mnoho různých dat, například informace o teplotě, vlhkosti nebo GPS poloze. Tyto informace se pak zobrazí v grafech.


8. Podpora více jazyků
Webová aplikace podporuje více jazyků, tzv. multijazyčnost. V současné době beží web v angličtině a češtině. Kdykoli ake v budoucnu lze přidat další jazyky.
Máte pro nás další výzvu?
Pokud potřebujete podobný webový systém nebo platformu, kontaktujte nás kdykoliv a my vám můžeme pomoci.
Máte nápad na nový projekt?
Popište nám ho! Rádi odpovíme na všechny vaše dotazy, nebo rovnou domluvíme termín schůzky.
Ozvěte se Vítovi! Vše s vámi projedná a probere.
Vít Uličný
Zakladatel & CEO
