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.

Rascasone

Máte projekt nebo nápad?

Napište nám
CTA