Výpis blogu

Obsah článku

React web pro administraci IoT zařízení

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.

IoT devices management platform
IoT devices management platform

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ě

  1. Formulář pro přihlášení
  2. Registrační formulář
  3. Ověření e-mailu a uživatele
  4. Přehled IoT zařízení
  5. Přidání nových IoT zařízení prostřednictvím formuláře s validací
  6. Plně responzivní design / optimalizace pro mobily
  7. Grafy s informacemi o senzorech IoT
  8. Podpora více jazyků
  9. 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.

Sign in, login form
Formulář pro přihlášení

2. Formulář registrace

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

Registration, Sign up form
Formulář registrace pomocí AWS 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.

Verification email with confirmation code
Potvrzovací email a ověření uživatele
The verification form with the verification code
Formulář pro ověření uživatele a jeho emailu

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é.

The main screen with IoT devices list
Seznam IoT zařízení

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ů.

A form with validations to add new devices
Přidání nových IoT zařízení prostřednictvím formuláře s ověřením
Text input field validation
Validace neproběhla v pořádku
Green / Passed validation
Úspěšná validace
Number field validations
Validace čísel

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.

A fully responsive / mobile friendly design
Plně responzivní design, optimalizovaný pro mobily

 

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.

Charti with IoT sensor information
Graf s informacemi o IoT senzorech
Second Chart with IoT sensor information
Graf s informacemi o IoT senzorech

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.

Související články

Více článků
Rascasone

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

Vít Uličný