Zobrazenie zdroja stránky Klientská aplikácia pre zobrazenie dát ako súčasť senzorického informačného systému

{{Hlavička_MTF|{{PAGENAME}}|Adam Zverbík|Ing. Juraj Ďuďák, PhD.|
2019/2020
|Bakalárska práca
|Aplikovaná informatika a automatizácia v priemysle
}} 
[[Kategória:Študentské práce]][[Kategória:Bakalárske práce]][[Kategória:Informatika]]

{{Praca_uvod|1|Klientská aplikácia pre zobrazenie dát ako súčasť senzorického informačného systému|Informačný systém Sensorical|Analýza požiadaviek a štruktúra klientskej aplikácie|Nástroje použité na vývoj aplikácie eAurela|Implementácia aplikácie eAurela|Uvedenie aplikácie eAurela do produkcie}}

__TOC__

{{Abstrakt
|Cieľom záverečnej práce je vyvinúť a implementovať multiplatformnú desktopovú aplikáciu a web aplikáciu. Výsledkom tejto práce je funkčná klientská aplikácia pre zobrazenie dát a spravovanie senzorického informačného systému Sensorical. V prvej kapitole je opísaný systém Sensorical, jeho dátový model a komunikácia so serverom. Druhá kapitola sa venuje analýze požiadaviek a štruktúre aplikácie. V tretej kapitole sú popísané nástroje, ktoré boli použité pri vývoji aplikácie. Štvrtá kapitola pojednáva o implementácií a piata kapitola je venovaná buildovaniu aplikácie.
<br />|The aim of the bachelor thesis is to develop and implement multiplatform desktop application and web application. The result of this thesis is functional client application, which shows and manages data of the sensoric information system Sensorical. Data model of sensorical system and communication with server is described in the first chaper. The second chapter is dedicated to analyze requirements and structure of the application. The tools used in development process are described in the third chapter. The fourth chapter is about implementation and the fifth chapter describes building of the final application.<br />
}}

'''Úvod'''

Internet. Dnes si život bez neho vieme iba ťažko predstaviť. Obrovské množstvo ľudí sa pripojí na internet každý jeden deň. Či už si chcú nájsť nejakú informáciu, objednať niečo z internetového obchodu, pozrieť seriál, film, alebo chcú komunikovať s ďalšími ľuďmi, pripojenými na druhom konci sveta. Internet je stále dostupnejší. Vďaka novým, vyspelejším technológiám sa stáva pripojenie stabilnejšie a rýchlejšie. Práve kvôli tomu sú internetové aplikácie stále populárnejšie. Takáto aplikácia je plnohodnotná aplikácia, ale používateľ si nemusí nič inštalovať do svojho počítača, jednoducho sa pripojí na internet a v pohodlí internetového prehliadača si aplikáciu spustí.

Vzhľadom na neustály pokrok technológií sú stále výkonnejšie a dostupnejšie aj samotné počítače. S rastúcim výkonom počítačov rastie aj popularita jazyka JavaScript a jeho frameworkov, nakoľko moderné počítače si s ním hravo poradia. To umožňuje vývoj moderných, dynamických aplikácií s použitím internetových technológií. Takýmito frameworkami sú aj React a Electron. React umožňuje beh jedno-oknovej (single-page) aplikácie v internetovom prehliadači, Electron zase v okne operačného systému. Kombináciou týchto dvoch frameworkov vznikne multiplatformná desktopová aplikácia dostupná aj z internetového prehliadača.

Senzorický informačný systém Sensorical je systém, ktorý zaznamenáva a analyzuje namerané environmentálne dáta. Dáta sú zaznamenávané meracími zariadeniami, ktoré merajú hodnoty v určitých časových intervaloch a po zaznamenaní tejto hodnoty komunikujú so vzdialeným serverom, kde sa tieto dáta ukladajú. Tento informačný systém obsahuje desktopovú aplikáciu, internetovú aplikáciu a aplikáciu pre operačný systém Android.

Cieľom práce je naprogramovať a implementovať multiplatformnú desktopovú aplikáciu, ktorá dostala názov eAurela. Aplikácia eAurela bude dostupná aj z internetového prehliadača, čo značne zjednoduší spravovanie celého systému Sensorical. Aplikácia bude zobrazovať posledné namerané hodnoty z meracích zariadení a grafické výstupy z vybraných časových intervalov. Administrátori informačného systému budú mať možnosť z aplikácie spravovať celý systém.

= Informačný systém Sensorical =

Informačný systém Sensorical je systém, ktorý bol navrhnutý v spoločnosti TNTech s.r.o. a je to ucelený systém pre zber a analýzu environmentálnych dát. Tento systém sa skladá z hardvérovej a softvérovej časti.

==== Hardvérová časť ====

Skladá sa z meracích zariadení (senzorov), ktoré vysielajú namerané dáta a z jedného alebo viacerých prijímacích modulov, ktoré pokrývajú monitorovanú oblasť.

Meracie zariadenie má za úlohu spracovať namerané hodnoty, pripraviť telemetrické dáta, formátovať dáta podľa určeného kľúča a odoslať spracované údaje prostredníctvom rádiového rozhrania.

Modul prijímača je určený pre bezdrôtový príjem dát odoslaných meracími zariadeniami. Obsahuje tiež modul komunikačného rozhrania RS485, čo umožňuje zaradiť viac prijímacích modulov na jeden káblový rozvod.

==== Softvérová časť ====

Merací systém je určený pre dlhodobé merania. Softvérovú časť môžeme ďalej rozdeliť na dátovú a aplikačnú časť.

Dátová sa skladá z dvoch databázových modelov a z aplikačného programového rozhrania (API).

Prvý databázový model predstavuje databázu, ktorá slúži pre uchovávanie informácií potrebných na autorizáciu, a taktiež informácie o aplikáciach pre zber environmentálnych dát, s ktorými systém pracuje (viď [[#sub:auth|1.1.1]]). Táto databáza je uložená na serveri, ktorý bol pomenovaný ''Auth API''.

Druhý databázový model je reprezentovaný databázou, ktorá uchováva údaje o konkrétnej aplikácii zberu dát (viď [[#sub:manage|1.1.2]]). Pre každú aplikáciu je vytvorená vlastná databáza, ktorá môže byť uložená na serveri ''Auth API'' alebo na ľubovoľnom inom. Pre jasnú identifikáciu sa tieto servery nazývajú ''Manage API''. Informácie o serveroch sa nachádzajú v prvom databázovom modeli.

V aplikačnej časti sa nachádza viacero softvérových produktov. Tieto produkty slúžia na prístup a analýzu nameraných údajov , .

== Dátový model ==

Pre systém Sensorical boli vytvorené dva databázové modely. Prvý model sa týka autorizácie používateľov. Databáza sa delí na časti: časť definujúca používateľov systému, časť definujúca spoločnosti a aplikácie, časť s obmedzeniami používateľov.

Druhý model sa týka konkrétnych aplikácií zberu dát. Aplikácia môže byť spustená na serveri, kde je spustená autorizácia používateľov, ale taktiež môže byť spustená aj na inom serveri. Tento model sa delí na časti: časť rozmiestnenia senzorov, časť s informáciami o senzoroch, časť pre ukladanie nameraných hodnôt.

=== Dátový model pre autorizáciu ===

Tento model definuje všetkých používateľov systému Sensorical. Pri prihlasovaní do systému prebieha porovnávanie údajov s údajmi uloženými v tejto databáze. Štruktúra tabuliek, označenie primárnych kľúčov a dátových typov jednotlivých atribútov je zobrazená na obrázku obr. [[#fig:dblogin|1.1]].


'''Štruktúra dátového modelu pre autorizáciu'''

[[File:bpaz_login.png|thumb|500px|Entitno-relačný diagram dátového modelu pre autorizáciu používateľov<span label="fig:dblogin"></span>]]


'''Časti dátového modelu pre autorizáciu'''

* časť definujúca všetkých používateľov systému:
** entitná množina '''Users''',
* časť definujúca spoločnosti a aplikácie:
** entitné množiny '''Companies, Apps, Servers''',
* časť s obmedzeniami používateľov:
** entitné množiny '''Restrictions, AppRestrictions'''.

=== Časť definujúca používateľov systému ===

Systém Sensorical môže používať viacero používateľov, preto je nevyhnutné zaznamenávať informácie o používateľoch, ich údaje a práva.


'''Users'''

Každému používateľovi je vytvorené prihlasovacie meno (login) a heslo (password), ktorými sa prihlasuje do systému. Atribút isAdmin hovorí, či má používateľ administrátorské práva.

=== Časť definujúca spoločnosti a aplikácie ===

Entitné množiny v tejto časti obsahujú informácie o spoločnostiach a aplikáciách, ku ktorým sa dá pripojiť, a taktiež o serveroch, na ktorých sa dané aplikácie nachádzajú.


'''Companies'''

Zoznam všetkých spoločností. Entitná množina ''UserCompanies'' určuje, ktorý používateľ má prístup k spoločnosti.


'''Apps'''

Zoznam všetkých aplikácií zberu dát, ku ktorým sa dá prihlásiť. Vzťah medzi entitnými množinami ''Companies'' a ''Apps'' je 1:N, teda spoločnosť môže mať viacero aplikácií, ale aplikácia sa môže nachádzať iba v jednej spoločnosti.


'''Servers'''

Každá aplikácia sa môže nachádzať na inom serveri. Táto entitná množina definuje práve informácie o serveroch a ich URL adrese.


=== Časť s obmedzeniami používateľov ===

Tieto entitné množiny nám upresňujú určité obmedzenia práv používateľov.


'''Restrictions a AppRestrictions'''

Definujú obmedzenia používateľov do konkrétnych aplikácií.

=== Dátový model aplikácie zberu dát ===

Tento dátový model definuje konkrétnu aplikáciu zberu dát. Daná databáza môže byť spustená na rovnakom serveri, ako je hlavný server systému Sensorical (''Auth API''), alebo na ľubovoľnom inom. Pre jasnú identifikáciu sa tieto servery nazývajú ''Manage API''. Štruktúra tabuliek, označenie primárnych kľúčov a dátových typov jednotlivých atribútov je zobrazená na obrázku obr. [[#fig:dbnsoric|1.2]].


'''Štruktúra dátového modelu informačných systémov'''

[[File:bpaz_nsoric.png|thumb|500px|Entitno-relačný diagram dátového modelu aplikácie zberu dát<span label="fig:dbnsoric"></span>]]


'''Časti dátového modelu aplikácie zberu dát'''

* časť definujúca rozmiestnenie senzorov v oblasti:
** entitné množiny '''Areas, Sectors, Sensors, SensorSectors, GroupViews,'''
* časť pre ukladanie nameraných hodnôt:
** entitné množiny '''MeasuredValues, MeasuredDates''',
* časť s informáciami o senzoroch:
** entitné množiny '''SensorProperties, Types, TypesGroup1, TypesGroup2''',
* časť definujúca používateľov informačného systému:
** entitné množiny '''Users, UserGroups'''.

=== Časť definujúca používateľov systému ===

K danej aplikácií nemusí mať prístup každý používateľ systému Sensorical.


'''Users'''

V tejto entitnej množine sú informácie o používateľoch, ktorý majú prístup k danej aplikácii. Na serveri je každému používateľovi vygenerovaný dočasný JWT token, ktorý je používaný v ďalších požiadavkách na server ako autorizačný kľúč.


'''UserGroups'''

Táto entitná množina definuje práva používateľa.

=== Časť rozmiestnenia senzorov ===

Umiestnenie meracích zariadení je zabezpečené hierarchickou štruktúrou. Najvyššia časť tejto štruktúry je oblasť (''Areas''). V oblasti sa nachádzajú sektory (''Sectors''), v ktorých sa nachádzajú dané senzory (''Sensors'').


'''Areas'''

Zoznam všetkých oblastí v konkrétnej aplikácií. Počet oblastí je neobmedzený. Používateľ musí mať definované práva pre prístup k danej oblasti. Tieto práva definuje entitná množina ''GroupViews''


'''Sectors'''

Definuje zoznam všetkých sektorov. Jeden sektor sa môže nachádzať iba v jednej oblasti, ale oblasť môže obsahovať niekoľko sektorov.


'''Sensors'''

Táto entitná množina definuje zoznam meracích zariadení v danom informačnom systéme.


'''SensorSectors'''

Upresňuje vzťah medzi entitnými množinami ''Sectors'' a ''Sensors''. Nakoľko do sektoru môže byť umiestnených viacero senzorov a môže sa stať, že jeden senzor je priradený do viacerých sektorov, je tu použitý vzťah M:N.

=== Časť pre ukladanie nameraných hodnôt ===

Táto časť zabezpečuje ukladanie nameraných hodnôt. Okrem nameraných hodnôt sa ukladá aj dátum a čas merania, ktorý je potrebný kvôli zobrazeniu časovej závislosti.


'''MeasuredDates'''

V tejto entitnej množine prebieha ukladanie dátumu a času merania. Vďaka tomu možno vidieť, kedy ktoré meranie prebehlo.


'''MeasuredValues'''

V tejto entitnej množine prebieha ukladanie hodnôt nameraných senzormi. Táto množina je prepojená s množinami ''Sensors'' a ''MeasuredDates'', čo zabezpečuje priradenie hodnoty k senzoru a tiež aj k dátumu a času merania.

=== Časť s informáciami o senzoroch ===

V tejto časti modelu je definovaná kategorizácia senzorov, ich vlastnosti a typy.


'''SensorProperties'''

Definícia vlastností meracích zariadení. Každý senzor má svoju maximálnu a minimálnu prípustnú hodnotu. Táto entitná množina slúži pre zobrazenie týchto hodnôt.


'''Types'''

Určuje typ daného senzora.


'''TypesGroup1'''

Keďže senzory môžu merať rôzne fyzikálne veličiny, v tejto entitnej množine sú zadefinované všetky fyzikálne jednotky senzorov.

== Komunikácia so serverom ==

Na komunikáciu so serverom bol použitý dátový prenos s architektúrou klient-server. Jedná sa o dvojvrstvovú architektúru, kde klient obsahuje používateľské rozhranie a aplikačnú logiku, pričom na serveri beží relačná databáza.

K prístupu údajov, ktoré sú na serveri uložené, slúži aplikačné programové rozhranie (REST API) a komunikačný protokol definovaný práve nad týmto API.

=== Požiadavky posielané na server ===

Požiadavky, ktoré sú aplikáciou odosielané na server musia byť posielané vo formáte JSON.


'''Údaje, ktoré môžu byť odosielané pre Auth API'''

* ''login'' - prihlasovacie meno používateľa,
* ''password'' - prihlasovacie heslo používateľa,
* ''company ID'' - ID spoločnosti,
* ''application ID'' - ID aplikácie.


'''Údaje, ktoré môžu byť odosielané pre Manage API'''

* ''Authorization''
** v tomto parametri je uvedený JWT token vygenerovaný serverom (viac v kapitole [[#bezpecnost|[bezpecnost]]]),
** povinný údaj, ktorý treba uvádzať v každej požiadavke na Manage API,
** slúži pre autorizáciu používateľa,
* ''application''
** názov aplikácie zberu dát,
** povinný údaj pri prihlasovaní sa k vybranej aplikácií,
* ''user-login''
** prihlasovacie meno používateľa
* ''area/sector/sensor ID''
** ID oblasti/sektoru/senzoru
* ''interval''
** časový interval pri zobrazovaní nameraných hodnôt vo forme grafu,
* ''factor''
** doplnenie parametru interval,
** je to celé číslo, základná hodnota je 1
** slúži pri vysokých intervaloch, server bude posielať iba každú n-tú hodnotu, kde n je práve hodnota parametra factor

=== Odpovede zo servera ===

Odpovede, ktoré aplikácia obdrží zo servera sú tiež vo formáte JSON. Odpovede sa delia na dve fázy.


'''Prvá fáza: stav'''

Stav definuje úspešnosť alebo neúspešnosť pripojenia (vlastnosť ''status'') Môžu nastať 3 variácie stavov. Stav 200 hovorí o úspešne spracovanej požiadavke.

[[File:bpaz_response1.png|thumb|250px|Odpoveď 200 zo servera<span label="fig:response1"></span>]]

Stav 4XX je chybový stav. Pri tomto type stavu je chyba na strane klienta (nesprávne prihlasovacie údaje, nesprávna URL adresa, chýbajúci JWT token a podobne). Môže nadobúdať hodnoty od 400 do 499 vrátane (Obr. [[#fig:response404|[fig:response404]]]).

Stav 5XX je taktiež chybový stav. V tomto prípade je chyba ale na strane servera a nie u klienta. Môže nadobúdať hodnoty od 500 do 599 vrátane (Obr. [[#fig:response500|[fig:response500]]]).

[[File:bpaz_response404.png|thumb|250px|Odpoveď 404<span id="fig:response404" label="fig:response404">[fig:response404]</span>]]

[[File:bpaz_response500.png|thumb|250px|Odpoveď 500<span id="fig:response500" label="fig:response404">[fig:response500]</span>]]


'''Druhá fáza: konkrétne hodnoty'''

Ak bola posielaná požiadavka úspešná (status: 200), potom druhá fáza odpovede zo serveru obsahuje konkrétne hodnoty, ktoré boli v požiadavke zažiadané.

[[File:bpaz_response2.png|700px|alt=Odpoveď obsahujúca konkrétne hodnoty<span label="fig:response2"></span>|Odpoveď obsahujúca konkrétne hodnoty<span label="fig:response2"></span>]]