Nástroje použité na vývoj aplikácie eAurela

Obsah práce

1.	Informačný systém Sensorical
2.	Analýza požiadaviek a štruktúra klientskej aplikácie
3.	Nástroje použité na vývoj aplikácie eAurela
4.	Implementácia aplikácie eAurela
5.	Uvedenie aplikácie eAurela do produkcie

Vo vývoji aplikácie eAurela boli použité viaceré nástroje. Keďže má byť aplikácia eAurela dostupná na platformách Windows, Linux, Mac OS a aj ako internetová aplikácia (nefunkčná požiadavka R01), je naprogramovaná pomocou dvoch javascriptových frameworkov: React.js a Electron.js. Keďže je Electron postavený na Node.js, bolo počas vývoja potrebné použiť aj toto javascriptové behové prostredie.

Framework React.js

React je javascriptová knižnica s otvoreným zdrojovým kódom (open-source) od spoločnosti Facebook. Slúži na tvorbu používateľského rozhrania (UI). Od rôznych iných javascriptových frameworkov sa React odlišuje tým, že sa sústredí iba na jednu špecifickú oblasť a tvorí iba vrstvu pohľadu (view), ktorá prezentuje dáta používateľovi. Jednou z najväčších výhod Reactu je, že povoluje JSX syntax. Táto syntax je rozšírením javascriptu a umožňuje nám písať HTML kód priamo do javascriptového kódu, čo zjednodušuje celý proces . Základným stavebným prvkom React aplikácie sú tzv. komponenty (components). Komponenty sú rôzne znovu použiteľné JSX elementy so zapuzdrenou funkcionalitou. Ich skladaním vzniká komplexná UI aplikácia. Tieto komponenty majú svoje vlastnosti (props) a spravujú svoj vnútorný stav (state). Tento spôsob práce s dátami vedie k viac predvídateľnému správaniu a aj ľahšiemu ladeniu. React je možné používať aj s ďalšími podobne zameranými knižnicami, ako je napríklad Redux, alebo Electron .

Komponenty a vlastnosti

Komponenty nám umožňujú rozdeliť používateľské rozhranie na nezávislé, znovu použiteľné časti. Koncepčne sú ako javascriptové funckie. Prijímajú ľubovoľné vstupy (props) a vracajú reactové elementy, popisujúce, čo by sa malo zobraziť na obrazovke. Komponenty môžu byť funkcionálne alebo triedne.

Funkcionálne komponenty

Najjednoduchší spôsob, ako zadefinovať komponent, je napísať javascriptovú funkciu (viď kód [functionalComponent]).

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Kód 3.1: Príklad funkcionálneho komponentu [8]

Táto funkcia je plnohodnotný komponent, pretože prijíma vlastnosť (props ako properties) s dátami a vracia reactový element.

Triedny komponent

Pre zadefinovanie komponentu sa môže taktiež použiť trieda z ES6 (verzia javascriptu ECMAScript 6).

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Kód 3.2: Príklad triedneho komponentu [8]

Takto zadefinovaný komponent je rovnaký ako uvedený funkcionálny komponent v kóde [functionalComponent].

Vykreslenie komponentu

Spomenuté elementy, popisujúce čo by sa malo na obrazovke vykresliť môžu byť buď reactové elementy, ktoré reprezentujú DOM (Document Object Model) značky (tagy). Každopádne elementy môžu reprezentovať aj používateľom zadefinované komponenty .

// DOM tag
const element = <div />; 
// používateľom definovaný komponent
const element = <Welcome name="Sara" />;

Kód 3.3: Dom tag a používateľom definovaný komponent [8]

Keď React uvidí element reprezentujúci používateľom zadefinovaný komponent, podá tomuto komponentu JSX atribúty a všetkých potomkov ako jeden objekt. Tento objekt sa nazýva props (vlastnosti). React sa ku komponentom začínajúcim malým písmenom správa ako k DOM značkám (napríklad <div /> reprezentuje HTML div tag). Používateľom definovaný komponent musí začínať veľkým písmenom. Je to z toho dôvodu, že React predáva tieto elementy metóde React.createElement(parameter). V prípade, že sa jedná o element začínajúci malým písmenom, tejto metóde sa ako parameter podá názov elementu ako textový reťazec. Ak element začína veľkým písmenom, tejto metóde sa podá celý komponent ako objekt .

Vlastnosti v komponentoch

Konfiguráciu a predávanie dát do komponentu majú na starosti vlastnosti (props). Vlastnosti sú dáta určené iba na čítanie (read-only). Či je komponent definovaný ako trieda alebo funkcia, nikdy nesmie modifikovať a meniť hodnotu vlastnostiam. Funkcie, ktoré nikdy neprepisujú svoje vstupné parametre sa nazývajú čisté (pure) funkcie. Takáto funkcia vráti pri rovnakom vstupe vždy ten istý výsledok. Opakom takejto funkcie je funkcia nečistá (impure), ktorá môže meniť svoj vstup. Všetky reactové komponenty sa musia správať ako čisté funkcie vzhľadom na ich vlastnosti .

Stav aplikácie

Stav (state) je podobný vlastnostiam. Používa sa ale výhradne vo vnútri komponentu pre riadenie toku dát. Sú to teda privátne dáta komponentu. Stav sa deklaruje v konštruktore triedneho komponentu. V konštruktore sa nastaví počiatočný stav, ktorý môže byť počas behu aplikácie menený. Pre zmenu stavu sa používa metóda setState(), a teda stav nikdy nie je menený priamo.

// Wrong
this.state.comment = 'Hello';
// Correct
this.setState({ comment : 'Hello' }) ;

Kód 3.4: Aktualizovanie stavu [10]

Výraz this.state môže byť pre nastavenie stavu použitý iba v konštruktore komponentu. Aktualizovanie stavu spolu s vlastnosťami môže byť asynchrónne, a preto by sa nemalo spoliehať na ich hodnoty pre výpočet nového stavu. Aby sa zabránilo tomuto správaniu, používa sa druhý spôsob zápisu metódy setState, ktorý prijíma funkciu a nie objekt. Táto funkcia dostane ako prvý parameter predchádzajúci stav a ako druhý parameter dostane vlastnosť, v čase kedy je vykonaná aktualizácia. V kóde [setStateFunction] je použitá šípková funkcia, každopádne to tiež správne funguje s regulárnou funkciou .

this.setState((state , props ) => ({
counter : state.counter + props.increment
})) ;

Kód 3.5: Použitie šípkovej funkcie vo vnútri setState [10]

Framework Electron.js

Electron je open-source projekt, ktorý slúži na vývoj a implementáciu multiplatformných desktopových aplikácií. Aplikácie naprogramované pomocou Electronu sú kompatibilné s operačnými systémami Mac, Windows a Linux.

Electron používa Chromium, čo je open-source verzia prehliadača Google Chrome. Ďalej používa Node.js, čo umožňuje vyvíjať desktopové aplikácie pomocou HTML, CSS a javascriptu. V tomto frameworku sú naprogramované populárne aplikácie, ako napríklad Visual Studio Code, Atom editor, Discord a mnoho ďalších.

Vývoj Electron aplikácie

Pokiaľ ide o vývoj, Electron aplikácia je v podstate Node.js aplikácia. Východiskovým súborom je package.json, ktorý je totožný s východiskovým modulom Node.js. Súbor package.json obsahuje informácie o hlavnom procese a taktiež všetky závislosti aplikácie.

{
  "name": "eaurela",
  "version": "0.1.0",
  "main": "./main.js",
  "private": true,
  "dependencies": {
    "react": "^16.12.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "electron-win": "set ELECTRON_DISABLE_SECURITY_WARNINGS=true && set ELECTRON_START_URL=http://localhost:3000/ && electron .",
    "dev-win": "concurrently -k \"npm start\" \"wait-on http://localhost:3000 && npm run electron-win\"",
    "package-win": "electron-packager . --platform=win32 --arch=x64"
   },
   },
  "devDependencies": {
    "concurrently": "^5.0.0",
    "electron": "^9.0.0",
    "wait-on": "^3.3.0"
  }
}

Kód 3.6: Vzor súboru package.json

Súbor package.json je vlastne javascriptový objekt, pričom jednotlivé vlastnosti musia byť v úvodzovkách. Skladá sa z viacerých častí. Prvok "name" je názov aplikácie, "version" hovorí o verzii aplikácie. Jedna z najdôležitejších vlastností je "main". Tá odkazuje na hlavný proces, ktorý sa spustí pri spustení aplikácie. Ďalšie dôležité prvky sú "dependencies" a "scripts". Dependencies hovoria o nainštalovaných knižniciach a ich verziách. Scripts sú skripty dôležité napríklad pre spúšťanie, testovanie alebo buildovanie aplikácie (buildovanie aplikácie je popísané v časti [build]). Skripty sa spúšťajú z príkazového riadku (respektíve terminálu) pomocou príkazu npm (node package manager). Vlastnosť "devDependencies" hovorí o nainštalovaných závislostiach dostupných iba vo fáze vývoja aplikácie.

Procesy Electron aplikácie

Electron aplikácia má viacero procesov. Hlavný proces (main process) má na starosti prácu so súbormi, komunikáciu s operačným systémom.

Vykreslovacie procesy (renderer processes) vytvárajú obsah aplikácie v oknách prehliadača.

V Electron aplikácií, súbor package.json spustí hlavný skript nazývaný hlavný proces. V našom prípade sa hlavný proces nazýva main.js a nachádza sa v rovnakom priečinku ako súbor package.json (viď kód [lst:package], vlastnosť "main"). Skript, ktorý beží v hlavnom procese môže zobrazovať grafické programové rozhranie (Graphical User Interface) vytváraním webových stránok. Electron aplikácia má vždy práve jeden hlavný proces.

Nakoľko Electron používa Chromium pre zobrazovanie webových stránok, jeho viac procesová architektúra je tiež použitá. Každá webová stránka v Electron aplikácií spúšťa jej vlastný proces. Tento proces sa nazýva vykresľovací proces.

Modul BrowserWindow a rozdiel medzi hlavným a vykresľovacím procesom

Modul BrowserWindow nám umožňuje vytvoriť nové okno prehliadača, alebo spravovať už existujúce okno. Každé okno prehliadača je separátny proces - vykresľovací proces.

Hlavný proces vytvára webové stránky vytváraním BrowserWindow inštancií. V každej inštancií BrowserWindow beží webová stránka vo svojom vlastnom vykresľovacom procese.

Hlavný proces spravuje všetky webové stránky a ich korešpondujúce vykresľovacie procesy. Každý vykresľovací proces je izolovaný a stará sa iba o webovú stránku bežiacu v ňom .

const electron = require('electron');
const { app, BrowserWindow} = electron;
let mainWindow;
const createWindow = () =>
{
  mainWindow = new BrowserWindow({
    width: 1250,
    height: 750,
    title: "eAurela",
    resizable: true,
   });
app.on('ready', createWindow);

Kód 3.7: Vytvorenie inštancie BrowserWindow v hlavnom procese main.js

Hlavný proces main.js by mal vytvárať všetky okná a mal by obsluhovať všetky systémové udalosti, ktoré sa v aplikácií môžu vyskytnúť, napríklad vytvorenie okna, ak je obsah aplikácie načítaný (viď kód [lst:BrowserWindow]).