info@ipesoft.com
+421 907 703 854
Obchodná 9076/3D
010 08 Žilina
Slovensko
SK
26.3.2024
Ipesoft D2000 SmartWeb – prvé skúsenosti
Je tvorba webovej aplikácie s real-time dátami ťažká ?
„D2000 SmartWeb prepája svet real-time aplikácií postavených na aplikačnom serveri Ipesoft D2000 so svetom webových technológií.“ To je stručná charakteristika nášho najnovšieho modulu, ktorý pribudol do portfólia D2000 začiatkom roka 2017 a ktorý som mal možnosť nedávno vyskúšať aj ja. Potreboval som vytvoriť peknú prezentačnú vrstvu k malej demo aplikácii (https://demo.ipesoft.com/iot), znázorňujúcej reálne schopnosti integrácie aplikačného servera D2000 s ekosystémom Low Power WAN IoT na báze LoRaWAN. Pre mňa, ako prispievateľa do predošlej generácie produktu, bolo použitie D2000 SmartWeb-u výzvou, na ktorú som sa tešil, a na pár riadkoch by som chcel zhrnúť svoje skúsenosti, pocity a dojmy.
D2000 SmartWeb je generačne už náš tretí produkt na prenos real-time dát z D2000 na web. Od svojich predchodcov sa odlišuje použitou technológiou a tiež nárokmi na technologické znalosti aplikačného programátora. Staršia technológia D2000 TCL zobrazuje vo webovom prehliadači grafické schémy vytvorené pre hrubého klienta HI v editore GR a preto nevyžaduje žiadnu znalosť webových technológií. A hoci má výsledná stránka pevné, väčšinou neresponzívne rozloženie vizuálnych prvkov, medzi našimi partnermi je stále obľúbená. Naopak D2000 WebSuite je na tom presne opačne. Napriek využívaniu moderných prvkov je už prekonaný a prekonal ho práve najnovší D2000 SmartWeb. WebSuite staval na technológii Java EE a umožňoval tvorbu pekných, moderných stránok, ale používať ho dokázal iba expert na široké spektrum back-endových a front-endových technológií s vysokou úrovňou skúseností a samotná tvorba aplikácie bola značne komplikovaná.
D2000 SmartWeb má back-end vytvorený tiež v Java EE, ale dodávame ho ako black-box, resp. integrálnu súčasť jadra aplikačného servera D2000. Úlohou aplikačného programátora je vytvoriť už len front-end s využitím základných webových technológií, ako sú HTML, CSS a JavaScript. Sami uznáte, že sa jedná o technológie, ktorých znalosť je medzi programátormi dnes už rozšírená, a teda nekladú už na tvorcov aplikácií žiadne extrémne nároky. Je samozrejmé, že súčasťou D2000 SmartWeb je aj knižnica ľahko použiteľných komponentov, ktoré natívne sprístupňujú real-time hodnoty objektov, dáta z archívu a databázových konektorov, prípadne iné údaje a vlastnosti aplikačného servera D2000. Komponenty môžu byť aplikačnými programátormi ďalej vylepšované, rozširované, prípadne si môžu vytvárať a do aplikácií pridávať aj svoje vlastné.
V spomínanej demo aplikácii som využil prvky na monitorovanie teploty a vlhkosti, umiestnené v sídle firmy Ipesoft. Snímače komunikujú technológiou LoRaWAN, väčšinou cez našu vlastnú LoRaWAN sieť, aj keď sme vyskúšali aj služby a infraštruktúru iných „štandardných“ poskytovateľov. Všetky namerané dáta v reálnom čase spracúva a archivuje aplikácia na platforme D2000, ktorá obsahuje 2 linky, 5 staníc, 21 meraných bodov a 21 archivovaných hodnôt. Ako vidíte, je to naozaj malá demo aplikácia. Front-end je tvorený webovou aplikáciou zloženou zo siedmich stránok, pre každý snímač a gateway po jednej, plus úvodná „prehľadová“ stránka. Na stránkach sú znázornené aktuálne namerané hodnoty jednotlivých meraných veličín, grafy s ich historickým priebehom, informačné texty a ilustračné obrázky.
Na vytvorení tejto aplikácie som spolupracoval s kolegom Marekom Gregorom, ktorý vytvoril kostru webovej aplikácie, keďže som vo webových technológiách stále iba začiatočník. Ja som už potom stránkam dodal obsah a doladil vzhľad. Pre zaujímavosť v skratke uvediem náročnosť jednotlivých činností, ktoré sme museli postupne vykonať:
- Samotné vytvorenie aplikácie v D2000 vrátane konfigurácie služieb u poskytovateľov mi zabralo 3 hodiny.
- Vytvorenie kostry webovej aplikácie (z nulového stavu) zložené z nasledovných prvkov:
- štýl s responzívnym dizajnom založený na Boostrap-e,
- konfigurácia pre amChart grafy,
- dva na mieru vytvorené komponenty na zobrazenie real-time hodnôt, časových značiek hodnoty, a popisom hodnoty objektu
- zostavenie stránok, zatiaľ ale s prázdnym obsahom.
Toto celé trvalo 2 dni.
- Tvorba obsahu stránok, čiže napísanie textov, dodanie obrázkov, plus drobné korekcie vo vizuálnom rozložení prvkov na stránkach, spolu 5 hodín.
Pre zaujímavosť tiež uvediem, že rozšírenie aplikácie o jeden merač pomocou štandardných vlastností D2000 SmartWeb-u odhadujeme na cca 1-2 hodiny. Pri pridávaní ďalšieho zariadenia by bolo potrebné vykonať nasledovné činnosti:
- zaradenie merača do konfigurácie u poskytovateľa sieťových služieb,
- doplnenie konfigurácie aplikácie v D2000 (1 linka, 2-3 merané body),
- pridanie novej stránky do webovej aplikácie kopírovaním a modifikovaním jednej z existujúcich stránok,
- rozšírenie úvodnej stránky.
Aplikácia je dnes funkčná, môžete si ju pozrieť na už spomenutej adrese https://demo.ipesoft.com/iot a sami môžete posúdiť, či sú 3 dni práce na takejto aplikácii málo alebo veľa. Jedno viem ale určite. Keby sme namiesto D2000 SmartWeb-u použili D2000 WebSuite, bolo by to skôr niečo ako 3 týždne a myslím si, že šikovný programátor by to s D2000 TCL zvládol za 1,5 dňa, ale bez responzívneho dizajnu.
Na záver mi nedá sa ešte nepochváliť, že korekcie do existujúcej aplikácie som zvládol už úplne sám, hoci som s webovými technológiami doteraz skoro vôbec nepracoval. Tým chcem naznačiť, že použitie SmartWeb-u je pomerne jednoduché a základy sa dajú zvládnuť skutočne v krátkom čase.
Tomáš Bača
Iné blogy