Zobrazenie zdroja stránky Uvedenie aplikácie eAurela do produkcie

[[Kategória:Študentské práce]][[Kategória:Bakalárske práce]][[Kategória:Informatika]]

{{Praca_uvod|5|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__

= =


Aby bola aplikácia dostupná a spustiteľná pre bežného používateľa, je potrebné vykonať build aplikácie. Tento proces slúži pre transformáciu zdrojových kódov v spustiteľnú aplikáciu. Keďže na vývoj aplikácie boli použité dva frameworky, build sa musí vykonať pre každý framework zvlášť. V tejto kapitole sú opísané postupy a nástroje použité pri vytváraní spustiteľnej aplikácie pre jednotlivé platformy. Všetky uvedené zmeny v zdrojovom kóde sa týkajú súboru ''package.json''.

== Buildovanie reactovej aplikácie ==

Keďže electron má zobrazovať reactovú časť aplikácie, je potrebné vykonať build reactovej časti ako prvý. React má zabudovaný skript pre vykonanie buildu, takže nie je potrebné pridať ďalšiu knižnicu (viď kód [[#lst:package|[lst:package]]]). Najdôležitejšia vec pri vykonaní buildu reactovej aplikácie je nastavenie vlastnosti ''homepage''. Táto vlastnosť je kľúčová pre React. Vďaka nej presne vie, kde sa spustiteľná aplikácia nachádza. V prípade, že by sa táto vlastnosť neuviedla, nebolo by možné vidieť reactovú časť aplikácie vo vnútri electronovej aplikácie.

<source lang="javascript">
"homepage": "./",
</source>
Kód 5.1: Definovanie vlastnosti homepage v aplikácii eAurela


Po zadefinovaní vlastnosti ''homepage'' je všetko pripravené na spustenie buildovacieho skriptu. Úspešné ukončenie skriptu je zobrazené na obrázku obr. [[#fig:reactBuild|5.1]].

[[File:bpaz_reactBuild.png|thumb|500px|Obr 5.1 Úspešné použitie buildovacieho skriptu pre React<span label="fig:reactBuild"></span>]]

Po úspešnom prebehnutí tohoto skriptu sa v adresári aplikácie eAurela vytvorí nový priečinok s názvom ''build''. Tento priečinok obsahuje všetky statické súbory aplikácie, ktoré sú pripravené na prácu s electronovou časťou aplikácie.

== Buildovanie electronovej aplikácie ==

Po úspešnom prebehnutí buildu v reactovej časti treba vykonať aj build electronovej časti, čo bude mať za výsledok spustiteľnú aplikáciu. Nakoľko Electron neobsahuje žiadny skript určený na buildovanie, bolo nutné použiť externú knižnicu. Použitá bola knižnica ''electron-packager'' (https://github.com/electron/electron-packager). Po nainštalovaní knižnice je potrebné pridať buildovacie skripty do súboru ''package.json'' pre každý operačný systém.

<source lang="javascript">
// buildovací skript pre Mac OS
"package-mac": "electron-packager . --platform=darwin --arch=x64",
// buildovací skript pre Windows
"package-win": "electron-packager . --platform=win32 --arch=x64",
// buildovací skript pre Linux
"package-lin": "electron-packager . --platform=linux --arch=x64"
</source>
Kód 5.2: Skripty pre použitie knižnice electron-packager


Pre zjednodušenie kódu boli uvedené iba povinné parametre jednotlivých skriptov.Prvý parameter (''electron-packager'') hovorí, aby sa spustil práve ''electron-packager''. Druhý parameter (''.'') hovorí, kde sa nachádza zdrojový kód na zverejnenie. Nasledujúce dva parametre označujú práve cieľovú platformu (''–platfrom'') a typ architektúry (''–arch''). Ďalšie voliteľné parametre by mohli byť názov aplikácie (ak nie je uvedený, použije sa názov uvedený pod vlastnosťou ''name'' v súbore ''package.json''), ikona aplikácie a podobne. Úspešný priebeh skriptu ''package-win'' je vyobrazený na obrázku obr. [[#fig:electronBuild|5.2]].

[[File:bpaz_electronBuild.png|thumb|500px|Obr 5.2 Buildovanie aplikácie eAurela pre platformu Windows<span label="fig:electronBuild"></span>]]

Po úspešnom ukončení skriptu sa opäť vytvorí nový priečinok, ktorý obsahuje spustiteľnú aplikáciu, ako aj zdrojový kód.

= Záver =

Výsledkom práce je softvérový produkt s názvom eAurela. Tento softvérový produkt slúži na zobrazenie environmentálnych dát a spravovanie senzorického informačného systému Sensorical.

Aplikácia eAurela je naprogramovaná pomocou moderných internetových technológií. Na vývoj boli použité javascriptové frameworky React.js a Electron.js. Aplikácia je dostupná na operačných systémoch Windows, Linux a Mac OS ako desktopová aplikácia. Po nasadení bude aplikácia dostupná aj ako internetová aplikácia.

Celá aplikácia eAurela pracuje na princípe volania existujúceho API a je určená výhradne používateľom systému Sensorical. Používatelia majú po prihlásení možnosť zvoliť si aplikáciu, respektíve inštaláciu, z ktorej si chcú prezerať namerané senzorické dáta, alebo si administrátori môžu zvoliť aj možnosť spravovania systému. Po vybraní aplikácie si používatelia môžu prezerať buď poslednú dostupnú nameranú hodnotu, alebo si môžu prezrieť grafické vyobrazenie nameraných hodnôt za nimi vybrané obdobie. Zobrazované dáta sú vždy aktuálne, zo servera sa získavajú pri voľbe aplikácie, alebo pri zmenení formy zobrazenia. Administrátori systému môžu spravovať a upravovať údaje uložené na serveri, môžu meniť používateľom prístupové práva v systéme, poprípade heslo. Administrátori majú možnosť spravovať údaje aj v rámci konkrétnej aplikácie. Tam majú možnosť registrovať do systému nových používateľov, alebo z aplikácie nejakého odobrať. Taktiež môžu upravovať prístupové práva v rámci aplikácie, alebo môžu meniť informácie o senzoroch, ako napríklad názov senzora a podobne.

Vzhľadom na vyššie uvedené funkcionality aplikácie eAurela je možné tvrdiť, že aplikácia spĺňa požiadavky, ktoré jej boli určené. V budúcnosti bude aplikácia rozšírená o rôzne funkcie, napríklad budú doplnené funkcionality v časti spravovania systému, ktoré počas vývoja neboli dostupné na strane servera ako napríklad zmenenie rozmiestnenia senzorov v oblasti, vytvorenie novej spoločnosti alebo aplikácie, novej oblasti, sektora alebo senzora. Taktiež, ak to bude vyžadované, bude možné rozšíriť podporu aplikácie eAurela pre ďalšie jazykové mutácie.

=Zoznam použitej literatúry=
[1] G. Gašpar a M. Skovajsa. “WOOD BIOMASS WIRELESS TEMPERATURE MONITORING SYSTEM”. In: Proceedings of INTERNATIONAL MASARYK CONFERENCE FOR PH.D. STUDENTS AND YOUNG RESEARCHERS. 2015, s. 2028–2034. isbn: 978-80-87952-12-2. doi: null.

[2] J. Ďuďák, M. Skovajsa a I. Sládek. “UTILIZATION OF NSORIC SYSTEM FOR MONITORING OF ECOLOGICAL BUILDING INSULATIONS”. In: Proceedings of INTERNATIONAL MASARYK CONFERENCE FOR PH.D. STUDENTS AND YOUNG RESEARCHERS. 2015, s. 2028–2034. isbn: 978-80-87952-12-2. doi: null.

[3] Electronjs. Electron Documentation. url: https://electronjs.org/docs/tutorial/support. (cit: 28.12.2019).

[4] Reactjs. JavaScript Environment Requirements. url: https://reactjs.org/docs/javascript-environment-requirements.html. (cit: 28.12.2019).

[5] David Čápka. Lekce 2 - UML - Use Case Diagram. url: https://www.itnetwork.cz/navrh/uml/uml-use-case-diagram. (cit: 28.12.2019).

[6] Reactjs. Primary Components. url: https://reactjs.org/docs/introducing-jsx.html. (cit: 31.12.2019).

[7] Jindřich Máca. Lekce 1 - Úvod do React. url: https://www.itnetwork.cz/javascript/react/uvod-do-react. (cit: 27.12.2019).

[8] Reactjs. Components and Props. url: https://reactjs.org/docs/components-and-props.html. (cit: 21.05.2020).

[9] Reactjs. JSX In Depth. url: https://reactjs.org/docs/jsx-in-depth.html. (cit: 21.05.2020).

[10] Reactjs. State and Lifecycle. url: https://reactjs.org/docs/state-and-lifecycle.html. (cit: 21.05.2020).

[11] Electronjs. Electron Application Architecture. url: https://electronjs.org/docs/tutorial/application-architecture. (cit: 29.12.2019).

[12] Electronjs. Writing Your First Electron App. url: https://electronjs.org/docs/tutorial/first-app. (cit: 30.12.2019).

[13] React Training. Introducing JSX. url: https://reacttraining.com/react-router/web/guides/primary-components. (cit: 16.05.2020).

[14] MDN. Promise. url: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise. (cit: 17.05.2020).