%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% I, the copyright holder of this work, release this work into the
%% public domain. This applies worldwide. In some countries this may
%% not be legally possible; if so: I grant anyone the right to use
%% this work for any purpose, without any conditions, unless such
%% conditions are required by law.
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\documentclass[
  digital,
  table,
  oneside,
  nolof,
  nolot,
]{fithesis3}

\usepackage[resetfonts]{cmap}
\usepackage[main=czech, english]{babel}

%% fonts:
\usepackage{paratype}
\def\textrussian#1{{\usefont{T2A}{PTSerif-TLF}{m}{rm}#1}}
%%
%% The following section sets up the metadata of the thesis.
\thesissetup{
    date        = \the\year/\the\month/\the\day,
    university  = mu,
    faculty     = fi,
    type        = bc,
    author      = Daniel Bradáč,
    gender      = m,
    advisor     = {RNDr. Vít Rusňák, Ph.D.},
    title       = {Rozšíření multiplatformní mobilní aplikace Kapesní skautIS o~agendu hodnocení kvality},
    TeXtitle    = {Rozšíření multiplatformní mobilní aplikace \\Kapesní skautIS \\o~agendu hodnocení kvality},
    keywords    = {Android, iOS, mobilní aplikace, NativeScript, multiplatformní mobilní vývoj, skaut, skautIS},
    TeXkeywords = {Android, iOS, mobilní aplikace, NativeScript, multiplatformní mobilní vývoj, skaut, skautIS},
    abstract    = {%
      SkautIS je rozsáhlý informační systém, který slouží skautské organizaci Junák -- český skaut, z.s. Jeho vybrané sekce vhodné pro přenos na mobilní platformu jsou postupem času implementovány do mobilní aplikace \textit{Kapesní skautIS}. Tato práce se zabývá rozšířením této aplikace o~agendu hodnocení kvality. Byla provedena analýza informačního systému skautIS, agendy hodnocení kvality a~v~neposlední řadě také samotné aplikace \textit{Kapesní skautIS}. Následně byl vytvořen návrh nové agendy, provedena její implementace a~nakonec proběhlo také uživatelské testování nově vzniklé funkcionality. Součástí teoretické části práce je rozbor současných metod pro vývoj mobilních aplikací a~technologie webových služeb.
    },
    thanks      = {%
      Na tomto místě bych chtěl poděkovat RNDr.~Vítu Rusňákovi,~Ph.D. za odborné vedení mé práce a~cenné rady. Dále bych chtěl poděkovat Mgr.~Petru Domkaři za veškerou pomoc při řešení různých problémů s~vývojem.
    },
    bib         = example.bib,
}
\usepackage{makeidx}
\makeindex

%% These additional packages are used within the document:
\usepackage{paralist} %% Compact list environments
\usepackage{amsmath}  %% Mathematics
\usepackage{amsthm}
\usepackage{amsfonts}
\usepackage{url}      %% Hyperlinks
\usepackage{tabularx} %% Tables
\usepackage{tabu}
\usepackage{booktabs}
\usepackage{listings} %% Source code highlighting
\usepackage{caption}

\usepackage{tikz}
\usetikzlibrary{positioning}
\usetikzlibrary{calc}
\usepackage{wrapfig}

\usepackage{comment}

\lstset{
  basicstyle      = {\small\ttfamily},
  identifierstyle = \color{black},
  keywordstyle    = \color{blue},
  keywordstyle    = {[2]\color{cyan}},
  keywordstyle    = {[3]\color{olive}},
  stringstyle     = \color{teal},
  commentstyle    = \itshape\color{magenta},
  breaklines      = true,
}

\usepackage[style=numeric]{biblatex}
\usepackage{floatrow} %% Putting captions above tables
\floatsetup[table]{capposition=top}

\emergencystretch 1em\relax

\clubpenalty=10000
\widowpenalty=10000
\displaywidowpenalty=1000

\begin{document}

\chapter{Úvod}

Junák -- český skaut, z. s. (dále jen Junák) je největší skautskou organizací v~České republice. Její historie sahá až do roku 1912 a~v~současnosti má více než 68\thinspace000 aktivních členů. Pro správu svých záležitostí Junák využívá na míru vytvořený informační systém skautIS, vyvíjený firmou Skeleton Software~s.~r.~o.

SkautIS je rozsáhlý interní systém sloužící pro správu skautských organizačních jednotek. V~rámci tohoto systému jsou implementovány agendy např. pro správu majetku, organizaci skautských akcí, STS (Skautská telefonní síť), hodnocení kvality a~další. Kromě funkcionalit pro registrované uživatele skautIS umožňuje také přístup ke své databázi prostřednictvím vlastního API\footnote{\textit{Application Programming Interface} -- rozhraní pro programování aplikací.}, poskytujícího data formou webových služeb. Každá agenda má svoji vlastní sadu metod, jež data vrací strukturovaná podle protokolu SOAP\footnote{\textit{Simple Object Access Protocol} -- protokol pro přenos dat mezi aplikacemi, který je často využíván pro implementaci webových služeb.}. API tak umožňuje jednotnou integraci s~aplikacemi třetích stran využívajících systému přihlašování nebo jiných dat ze samotného skautISu. Jednou z~těchto aplikací je projekt \textit{Kapesní skautIS}.

\textit{Kapesní skautIS} je studentský projekt, který původně vznikl jako diplomová práce Mgr.~Petra Domkaře~\cite{dpDomkar}. Projekt je zaměřen na vývoj multiplatformní mobilní aplikace s~cílem implementovat vybrané existující agendy skautISu. Součástí návrhu a~implementace je také vhodné přizpůsobení vzhledu agend mobilní platformě. Vývoj probíhá v~moderním multiplatformním aplikačním rámci NativeScript\footnote{\url{https://nativescript.org}} pro cílové operační systémy Android a~iOS. Cílem projektu není dostat kompletně celé webové rozhraní skautISu do separátní mobilní aplikace, ale vybrat pouze ty agendy, jež jsou pro práci v~mobilním prostředí vhodné. Projekt je rozvíjen především v~rámci závěrečných prací studentů, kteří implementují nebo rozšiřují jednotlivé agendy. V~současné době aplikace obsahuje např. agendy osoby, jednotky, zpráv, STS nebo správy majetku.

\newpage
Tato závěrečná práce analyzuje agendu hodnocení kvality a~řeší implementaci její vybrané části do aplikace \textit{Kapesní skautIS}. Toto rozšíření vzniklo za účelem zlepšit dostupnost agendy a~učinit práci s~ní uživatelsky přívětivější. Dále byl zhotoven a~mezi vybrané osoby rozeslán formulář pro uživatelské testování nově vzniklé funkcionality. 

Úvodní dvě kapitoly jsou zaměřeny na teoretické základy a~technologie související s~implementační částí práce. První kapitola rozebírá problematiku vývoje mobilních aplikací a~přibližuje jeho konkrétní způsoby společně s~některými současně dostupnými prostředky -- podrobněji je rozveden aplikační rámec NativeScript. Druhá kapitola krátce přibližuje webové služby, jež jsou podstatnou součástí implementace.

Následující kapitoly se věnují popisu informačního systému skautIS a~analýze agendy hodnocení kvality. Následuje popis aplikace \textit{Kapesní skautIS}, návrh agendy hodnocení kvality a~její implementace. V~neposlední řadě je popsána forma a~jsou zpracovány výsledky uživatelského testování. Závěrečná kapitola pak práci shrnuje.

\chapter{Mobilní aplikace a~jejich vývoj}

Chytré telefony jsou dnes jednou z~hlavních cílových platforem pro vývojáře softwaru. V~průběhu jejich rozvoje pro ně vznikalo velké množství operačních systémů, avšak s~ukončením podpory Windows Phone v~roce 2019 jsou téměř všechny aplikace vyvíjeny pro Android od firmy Google a~pro iOS od firmy Apple. Tyto dva operační systémy jsou již několik let na trhu dominantní, a~proto je pravděpodobné, že v~budoucnu bude vývoj běžných mobilních aplikací cílený stále především na ně.

Společně s~vývojem samotných chytrých telefonů vznikaly i~různé způsoby vývoje mobilních aplikací. Každý z~nich má své silné i~slabé stránky -- vývojář by tak měl pečlivě zvážit priority svého projektu, než se rozhodne pro některý ze způsobů. V~současnosti se jedná o~nativní, webový, hybridní a~multiplatformní způsob vývoje.

\section{Nativní vývoj}

Nativním kódem v~kontextu mobilního vývoje rozumíme kód napsaný přímo v~jazyce podporovaném tvůrci daného operačního systému. Tomuto programovacímu jazyku se poté říká nativní jazyk dané platformy. Samotný operační systém bývá často naprogramován z~velké části právě některým z~nativních jazyků. Aplikacím napsaným v~nativním kódu říkáme \textit{nativní aplikace}. Každá platforma má své vlastní nativní jazyky. Android přímo podporuje vývoj v~jazyce Java a~nově také Kotlin, který má Google v~plánu v~budoucnu upřednostňovat~\cite{devAndroid}. Na druhé straně iOS podporuje nativní vývoj v~jazycích Objective-C a~Swift, přičemž i~zde je druhý jmenovaný jazyk preferovaný do budoucna.

Prostředky pro vývoj nativních aplikací jsou poskytovány přímo tvůrci operačních systémů. Google nabízí své volně dostupné IDE\footnote{\emph{Integrated Development Environment} -- integrované prostředí pro vývoj.} Android Studio, založené na IntelliJ IDEA, pro platformy Windows, macOS i~Linux. Apple oficiálně podporuje vývoj pro iOS ve svém IDE XCode, které je však dostupné pouze pro zařízení na platformě macOS. Součástí obou IDE jsou standardní knihovny (dále SDK\footnote{\emph{Standard Development Kit} -- standardní sada prostředků pro vývoj.}) pro tvorbu nativních aplikací. Funkcionality SDK jsou podrobně zdokumentovány přímo na internetových stránkách výrobců\footnote{iOS: \url{https://developer.apple.com/documentation/}, Android: \url{https://developer.android.com/docs}.}.

Hlavní výhodou nativního vývoje je výkon výsledné aplikace. Možnost přímého přístupu k~API operačního systému pomocí SDK umožňuje maximálně snížit odezvu a~aplikace pak běží v~takzvané \textit{nativní rychlosti}~\cite{SerranoN}. Tato rychlost se používá pro porovnání ostatních přístupů z~hlediska výkonu, protože je nejvyšší možná.

Další důležitou výhodou nativního vývoje je jednoduchý přístup k~prostředkům chytrého telefonu. Tím, že kód vyvíjíme \uv{na míru} konkrétnímu prostředí a~za pomoci knihoven, které poskytuje výrobce daného operačního systému, máme zajištěno rozhraní se všemi dostupnými prostředky. Chytré telefony těchto prostředků nabízí velké množství. Patří mezi ně např.: GPS a~ostatní pohybové senzory, kamera, Bluetooth, mikrofon aj.

Nativní aplikace tvoří instalační balíčky\footnote{Soubory s~příponou \texttt{.apk} (Android) nebo \texttt{.ipa} (iOS).}, pomocí kterých je umožněna snadná distribuce. Nejběžnějším způsobem instalace aplikace je její stažení z~obchodu dané platformy. Výrobce operačního systému tak má pod kontrolou, jaké aplikace mají uživatelé k~dispozici.

V~neposlední řadě je nutné uvést celkovou uživatelskou zkušenost. Nativní aplikace graficky působí velmi podobně jako vzhled celého systému obecně. Uživatel tedy nemá velký problém se v~prostředí zorientovat a~působí na něj přirozeně~\cite{UzairK}. Grafické rozhraní je zpravidla plynulé a~vývojáři, díky využití standardních knihoven, mají méně prostoru pro zanesení chyb, jež by způsobovaly zpomalení nebo pády aplikace.

Hlavní nevýhodou a~primárním důvodem vzniku alternativních možností jsou náklady na vývoj. Tvorba nativních aplikací vyžaduje znalost konkrétního podporovaného jazyka, což zvyšuje nárok na kvalifikaci programátorů~\cite{Pinto}. Vytvořený kód bude zároveň funkční pouze pro jednu zvolenou platformu. Kdybychom chtěli nativní aplikaci pro Android publikovat i~pro iOS, museli bychom vytvořit úplně nový kód v~Objective-C nebo Swiftu. Udržovat dva různé kódy pro jednu mobilní aplikaci může být u~větších projektů velmi nákladné, a~proto v~současnosti existují i~další způsoby vývoje.

\section{Webový vývoj}

Webový vývoj je založen na přizpůsobení standardní webové stránky pro rozhraní chytrého telefonu. Může se jednat o~změny v~rozsahu od drobných úprav zobrazení stránek až po vytvoření tzv. \textit{progresivních webových aplikací} (dále PWA\footnote{\emph{Progressive Web Application} -- webová aplikace, obohacená o~nativní prvky.}).

Webové aplikace jsou upravené internetové stránky, využívající standardní nástroje pro jejich vývoj, jako jsou jazyky HTML, CSS a~JavaScript. Samotná aplikace běží přes webový prohlížeč chytrého telefonu, který interpretuje její obsah. Na rozdíl od nativní aplikace není nutné stahovat žádné instalační balíčky -- webový prohlížeč si sám stáhne všechny zdroje nutné pro interpretaci (např. obrázky nebo JavaScript soubory)~\cite{LiuY}. Dále není nutná ani žádná aktualizace, protože webový prohlížeč zobrazuje vždy nejaktuálnější dostupnou verzi (pokud je zařízení v~online režimu).

PWA tuto technologii rozšiřují a~snaží se uživatelskou zkušenost co nejvíce přiblížit nativním aplikacím. Moderní aplikace tohoto typu mohou přistupovat např. k~souborovému systému zařízení, jeho poloze, kameře nebo mohou využít autentizace pomocí snímače otisků prstu~\cite{PWA}. Dalšími způsoby jak co nejlépe navodit uživateli pocit z~nativní aplikace jsou omezený offline režim (prohlížeč si uloží stav z~poslední návštěvy aplikace v~online režimu) a~možnost vytvoření samostatné ikony rychlého přístupu na domovské obrazovce. Aplikace mohou běžet přes celou obrazovku a~grafické rozhraní je zpravidla plynulejší než u~neupravené internetové stránky.

Hlavní výhodou webového vývoje je odstranění nutnosti udržovat různý kód pro obě platformy zvlášť. S~tím jsou spojeny výrazně nižší náklady na vývoj v~porovnání s~nativními aplikacemi, k~čemuž přispívá i~použití standardních jazyků pro tvorbu internetových stránek (je snazší sehnat programátora JavaScriptu než Swiftu). Další silnou stránkou je také rychlý přístup k~samotné aplikaci -- uživatel přistupuje k~webovým stránkám přes prohlížeč a~nemusí se starat o~žádnou instalaci nebo aktualizace.

Mezi hlavní nevýhody patří především omezený výkon. Aplikace vyvíjené tímto způsobem jsou vždy interpretovány prostřednictvím webového prohlížeče, což má za následek vyšší odezvu a~spotřebu baterie v~porovnání s~nativními aplikacemi~\cite{KoscielniakK}. U~malých a~jednoduchých aplikací může být rozdíl v~rychlosti načtení a~odezvy uživatelského rozhraní minimální, avšak při použití složitějších grafických elementů, nebo jiných prvků náročných na výpočetní výkon zařízení, se může jednat o~výrazný problém. Z~toho důvodu je například vývoj her pro mobilní telefony lepší realizovat pomocí nativního kódu.

Dalším problémem může být podpora konkrétního operačního systému nebo webového prohlížeče. Není vždy zaručeno, že funkcionality dostupné pro webové aplikace, které nabízí Android s~prohlížečem Chrome, bude možné použít i~pro iOS s~prohlížečem Safari. Například výše zmiňované přidání ikony rychlého přístupu není v~současnosti na zařízeních s~iOS plně podporováno a~v~Androidu tuto funkci umožňují pouze prohlížeče Chrome a~Edge. Dalším příkladem je možnost webové aplikace vytvořit notifikaci, kterou iOS zatím také nepodporuje~\cite{PootA}.

\section{Hybridní vývoj}

Hybridní vývoj se snaží vytvořit kompromis mezi nativními a~webovými aplikacemi. Kód hybridních aplikací je, stejně jako u~těch webových, psán za pomocí jazyků pro vývoj internetových stránek (HTML, CSS, JavaScript). Výsledná aplikace na první pohled vypadá jako ta nativní -- běží samostatně bez webového prohlížeče, je instalována pomocí instalačních balíčků a~může být umístěna v~obchodu dané platformy. K~zobrazení obsahu není využíván standardní webový prohlížeč. Místo toho hybridní aplikace používá tzv. \textit{WebView}, což je vestavěný prohlížeč operačního systému~\cite{SaccomaniP}. \textit{WebView} je obaleno nativní aplikací, což má za následek výše uvedené podobnosti. Android funkcionalitu vestavěného prohlížeče realizuje stejnojmennou třídou \texttt{WebView} a~v~iOS ji obstarává třída \texttt{WKWebView}~\cite{GriffithCh}.

Hybridní vývoj sdílí většinu výhod s~webovými aplikacemi -- především se jedná o~využitelnost jednoho kódu pro obě platformy a~možnost využití standardních prostředků pro vývoj internetových stránek. Dostupnost prostředků z~rozhraní operačního systému bývá také obecně lepší oproti webovým aplikacím (záleží na konkrétním aplikačním rámci).

Opět je však tento přístup limitován dostupným výkonem, který výrazně ovlivňuje vykreslování obsahu přes \textit{WebView}~\cite{SaccomaniP}. Dalším omezením může být vybraný aplikační rámec a~jeho vývoj v~čase -- není zaručeno, že budou vždy dostupné všechny prostředky rozhraní operačního systému nebo že v~průběhu času nebude nutné některé části kódu měnit.

O~vytvoření nativního obalu a~jeho propojení s~\textit{WebView} se starají různé nástroje. Mezi jejich nejpopulárnější zástupce patří Apache Cordova a~Ionic Framework.

\subsection{Apache Cordova}

Apache Cordova je aplikační rámec s~otevřeným zdrojovým kódem, který zpřístupňuje nativní prvky zařízení pomocí zásuvných modulů (pluginů). Aplikace je pak tvořena z~těchto modulů, \textit{WebView} a~Webové aplikace, vytvořené pomocí jazyků HTML, CSS a~JavaScript. Jednotlivé složky mezi sebou komunikují pomocí Cordova a~HTML API a~se samotným zařízením je aplikace propojena pomocí rozhraní operačního systému. Schéma architektury Apache Cordova je znázorněno na obrázku~\ref{fig:cordovaArchitecture}.

\begin{figure}[!ht]
  \begin{center}
    \includegraphics[width=.9\textwidth]{fithesis/resources/cordovaArchitecture.png}
  \end{center}
  \caption{Architektura Apache Cordova aplikace. Převzato z~\cite{CordovaOverview}.}
  \label{fig:cordovaArchitecture}
\end{figure}

Zásuvné moduly zajišťují propojení mezi jazykem JavaScript a~nativním kódem dané platformy. Kromě modulů vytvořených vývojáři projektu Apache Cordova je možné používat také zásuvné moduly třetích stran nebo si vyvinout vlastní. Pro tvorbu projektu pod tímto rámcem je práce se zásuvnými moduly zásadní, protože nově vytvořený projekt je úplně prázdný a~žádné neobsahuje. Seznam dostupných modulů, společně s~podporovanými platformami, je dostupný na internetových stránkách projektu\footnote{\url{https://cordova.apache.org/plugins/}}.

\newpage
\subsection{Ionic Framework}

Zásuvné moduly pro Apache Cordova mohou využívat také jiné aplikační rámce. Jedním z~nich je Ionic Framework, který se soustředí primárně na zlepšení a~rozšíření uživatelské zkušenosti. V~rámci tohoto aplikačního rámce je umožněna práce jak s~jazykem JavaScript, tak s~jeho moderními nástavbami a~knihovnami pro tvorbu uživatelského rozhraní (např. Angular, Vue.js a~React)~\cite{NetkowM}.

Firma Drifty co., jež za projektem stojí, vyvíjí také vlastní běhové prostředí \textit{Capacitor}. Jde o~novější alternativu k~Apache Cordova, zaměřenou na snazší instalaci celého vývojového prostředí a~lepší kompatibilitu s~moderními webovými prvky a~rozhraním operačního systému. \textit{Capacitor} nabízí také zpětnou kompatibilitu s~řadou zásuvných modulů pro Apache Cordova, což umožňuje snazší migraci již existujících Apache Cordova projektů bez nutných změn nebo ztráty vytvořené funkcionality~\cite{LynchMax}.

\section{Multiplatformní vývoj}

Posledním přístupem k~vývoji mobilních aplikací je multiplatformní vývoj (angl. \textit{Cross-platform} development). Tento pojem je často zaměňován s~již rozebraným hybridním vývojem díky některým společným vlastnostem, avšak v~jádře jsou obě technologie velmi odlišné. Hlavní společnou vlastností je využití jednoho kódu pro obě platformy. Multiplatformní aplikace však nevyužívají vestavěný prohlížeč, ale překládají kód přímo do nativního jazyka. To oproti hybridním aplikacím obecně zvyšuje ve většině oblastí výkon, který se v~mnoha případech může blížit až nativní rychlosti. Tyto rozdíly jsou nejmarkantnější během operací, které vyžadují přístup k~nativnímu API operačního systému~\cite{Biørn-HansenA}. Dalším charakteristickým rysem je rozdílný vzhled aplikace v~Androidu a~iOS -- kód je překládán do nativního kódu včetně elementů uživatelského rozhraní, které se na obou platformách vzhledově liší.

Podpora nativního API je u~nejoblíbenějších multiplatformních nástrojů obecně velmi dobrá, což umožňuje sdílení velké části kódu mezi oběma platformami. Většinou tyto nástroje nabízí také možnost psát části kódu přímo nativně, čímž lze pokrýt situace, kdy není podporován překlad nějakého konkrétního prvku. Tato místa se tvůrci multiplatformních nástrojů snaží postupně eliminovat a~tím rozšiřovat sdílenost kódu mezi platformami.

Multiplatformní vývoj nabízí podobné výhody jako hybridní a~webový vývoj -- sdílený kód pro obě platformy a~nižší náklady na vývoj. S~velkým množstvím nových nástrojů, které uplatňují tento přístup, existuje možnost výběru mezi několika programovacími jazyky. Navíc tento přístup mimo jiné vylepšuje samotný výkon, který se v~některých případech může vyrovnat tomu nativnímu~\cite{Biørn-HansenA}. 

Za částečnou nevýhodu by se dalo opět považovat omezení samotným aplikačním rámcem a~jeho kompatibilitou s~konkrétním operačním systémem. V~případě nutnosti využít nějakou novou funkcionalitu v~nejnovější verzi operačního systému neexistuje jistota její okamžité dostupnosti. Tento nedostatek částečně řeší nástroje, které umožňují napsat část kódu nativně.

\newpage
Mezi populární zástupce multiplatformních nástrojů v~současnosti patří např.: React Native, Xamarin, Flutter a~NativeScript. NativeScript je aplikační rámec využitý pro vývoj aplikace \textit{Kapesní skautIS}, a~proto bude rozebrán podrobněji.

\subsection{React Native}

React Native je aplikační rámec s~otevřeným zdrojovým kódem, za kterým stojí společnost Facebook. Jedná se o~nástroj založený na knihovně React. React Native aplikace jsou strukturované po jednotlivých komponentách, dodržujících standardní principy objektově orientovaného programování. Pro definování výpočetní logiky je využíván jazyk JavaScript a~pro tvorbu grafického rozhraní JSX (\emph{JavaScript XML}), což je jazyk využívající elementy, inspirované jazykem HTML, pro vykreslování jednotlivých komponent~\cite{ReactNativeDoc}. Při překladu do nativního kódu jsou nadefinované React komponenty překládány na nativní.

Při nutnosti použít kód specifický pro některou z~platforem je možné využít speciálního modulu \texttt{Platform}, který umí rozeznat operační systém a~jeho konkrétní verzi. 

\subsection{Xamarin}

Xamarin je multiplatformní nástroj, s~otevřeným zdrojovým kódem, pro tvorbu aplikací, založený na platformě .NET, od společnosti Microsoft. Programovacím jazykem je C\#.

Xamarin nabízí velké množství nástrojů umožňujících sdílení naprosté většiny kódu mezi platformami. Mezi ty nejdůležitější patří \textit{Xamarin.Essentials} a~\textit{Xamarin.Forms}~\cite{XamarinForms}. První z~nich je sada nástrojů pro přístup aplikace k~nativnímu rozhraní operačního systému. Druhý jmenovaný, \textit{Xamarin.Forms}, slouží pro tvorbu grafického rozhraní s~využitím jazyka XAML (\emph{Extensible Application Markup Language}), což je značkovací jazyk založený na XML. K~překladu zdrojového kódu aplikace do toho nativního slouží rozhraní \textit{Mono}, konkrétně jeho dvě implementace \textit{Xamarin.Android} a~\textit{Xamarin.iOS}.

\subsection{Flutter}

Flutter je aplikační rámec, s~otevřeným zdrojovým kódem, od společnosti Google, postavený na programovacím jazyce Dart. Tento relativně nový rámec (prvotní verze byla vydána v~květnu 2017) rychle získává na popularitě díky svému odlišnému přístupu od ostatních multiplatformních nástrojů.

Flutter nevyužívá žádný značkovací jazyk pro vybudování grafického rozhraní. Místo toho jsou využity speciální třídy, takzvané \textit{Widgets}~\cite{FlutterDoc}. Ty tvoří jednotlivé prvky grafického rozhraní -- tlačítka, textová pole, obrázky, atd. Widget může obsahovat definici stylu, umístění obsahu na stránce, ale i~aplikační logiku a~reakce na uživatelské vstupy. Klíčovou funkcionalitou je možnost jednotlivé widgety v~čase běhu nahrazovat a~tím dynamicky měnit grafické rozhraní. Kromě využívání základních widgetů je možné také definovat své vlastní nebo rozšířit vlastní implementací ty existující.

\subsection{NativeScript}

NativeScript je, stejně jako většina moderních multiplatformních nástrojů pro vývoj, taktéž dostupný formou otevřeného zdrojového kódu. Tento aplikační rámec je vyvíjen od roku 2014, kdy ho představila firma Telerik. V~současnosti je nejnovější vydaná verze NativeScript 7. Preferovaným programovacím jazykem je TypeScript, přičemž podporovány jsou i~aplikační rámce Angular a~Vue.js.

Architektura rámce NativeScript má čtyři hlavní části: Runtimes, Core Modules, Command Line Interface (CLI) a~Plugins~\cite{nsDoc}.

Runtimes je vrstva sloužící pro komunikaci s~nativním rozhraním operačního systému. Ta je umožněna za pomoci běhového prostředí \textit{JavaScript Virtual Machines}. Pro interpretaci kódu na zařízeních s~Androidem je využíván V8 Engine, od vývojářů společnosti Google, který je uplatněn i~pro webový prohlížeč Chrome nebo JavaScriptové prostředí Node.js~\cite{v8Dev}. Pro iOS je použita implementace JavaScriptového interpreta renderovacího jádra \textit{WebKit}\footnote{WebKit je renderovací jádro využité v~prohlížeči Safari.}. Schéma architektury běhového prostředí při překladu pro Android je znázorněno na obrázku~\ref{fig:runtimesAndroid} (architektura pro iOS se příliš neliší).

\begin{figure}[!ht]
  \begin{center}
    \includegraphics[width=\textwidth]{fithesis/resources/runTimesAndroid.png}
  \end{center}
  \caption{Architektura \textit{Runtimes} při překladu pro Android. Převzato z~\cite{nsDocAndroid}.}
  \label{fig:runtimesAndroid}
\end{figure}

S~\textit{Runtimes} přímo komunikuje další vrstva, zvaná \textit{Core Modules}. Tato abstraktní vrstva umožňuje přístup k~nativnímu rozhraní přímo z~některého z~podporovaných jazyků. Stará se také o~definování grafického rozhraní pomocí šablon, založených na jazyce XML. V~neposlední řadě je součástí této vrstvy i~propojení mezi uživatelským rozhraním s~datovým modelem (tzv. \textit{data binding}) a~navigace uvnitř aplikace. NativeScript podporuje jednostranný i~oboustranný \textit{data binding}. Při tom jednostranném je aktualizován prvek na základě změny stavu datového modelu nebo obráceně při reakci na změnu v~grafickém rozhraní (např. uživatel vyplní textové pole). Při oboustranném může být informace aktualizována v~obou směrech.

Rozhraní příkazového řádku (CLI) lze využít pro veškeré operace nad projektem. Je vytvořeno v~prostředí Node.JS, jehož instalace je pro vytvoření projektu nezbytná. Veškeré operace jsou spouštěny pomocí příkazů začínajících výrazem \texttt{tns} (zkratka pro Telerik NativeScript). Přes příkazový řádek lze například vytvořit nový projekt (\texttt{tns create}), sestavit aplikaci (\texttt{tns build}) nebo aktualizovat verzi jádra NativeScriptu (\texttt{tns update}). Projekt lze řídit také z~grafického rozhraní nad CLI s~názvem \textit{NativeScript Sidekick}, což může být pro nováčky přívětivější varianta oproti příkazovému řádku.

\textit{Plugins} jsou balíčky obsahující knihovny s~dostupnou funkcionalitou. NativeScript využívá NPM\footnote{\textit{Node Package Manager} -- nástroj pro správu JavaScriptových balíčků.} pro správu svých balíčků, což usnadňuje jejich instalaci a~údržbu. Do balíčků je seskupena veškerá funkcionalita, kterou NativeScript nabízí, včetně základních funkcionalit modulů jádra (\textit{Core Modules}). Je možné si také vytvořit balíčky vlastní. Pro jejich instalaci je používán příkaz CLI \texttt{tns plugin add}. Veškeré balíčky, které projekt využívá, jsou instalovány do adresáře \texttt{node\_modules}.

Grafické rozhraní je tvořeno za pomocí speciálních kontejnerů, tzv. \textit{layouts}. \textit{Layout} slouží k~definici rozložení prvků na obrazovce aplikace. Zapisují se do šablon způsobem, který připomíná XML elementy nebo párové HTML značky. NativeScript poskytuje několik druhů těchto kontejnerů, přičemž každý z~nich rozmisťuje své prvky na stránce odlišným způsobem, např. \textit{StackLayout} prvky vykreslí horizontálně nebo vertikálně podle pořadí zápisu (lze definovat pomocí vlastnosti \texttt{orientation}).

\chapter{Webové služby}

Webové služby jsou prostředek pro komunikaci mezi dvěma uzly v~síti. Typicky se jedná o~interakci mezi klientem a~serverem, při které klient volá nějakou funkci nad databází poskytovanou serverem. Server tímto způsobem může zpřístupnit některé operace nad svojí databází okolním zařízením v~síti. Klíčovou vlastností webových služeb je platformní nezávislost mezi odesílatelem a~příjemcem zprávy. Jedná se o~ideální způsob interakce mezi součástmi distribuovaného systému. Webové služby jsou také často používány pro integraci mezi dvěma zcela odlišnými systémy. Nejpoužívanějším prostředkem pro přenos zpráv webových služeb je protokol HTTP(S)\footnote{\textit{Hypertext Transfer Protocol (Secure)} -- protokol pro komunikaci mezi uzly v~síti.} a~samotné zprávy jsou nejčastěji standardu XML.

\section{REST}

V~současné době je při tvorbě webových služeb často využíván protokol REST\footnote{\textit{Representational State Transfer}.}, který je postaven na manipulaci s~objekty pomocí tzv. \textit{CRUD} operací\footnote{Složeno z~anglických slov \uv{Create}, \uv{Read}, \uv{Update} a~\uv{Delete}.}. V~této souvislosti se často používá pojem \uv{RESTful API}, což je rozhraní založené na tomto protokolu. Takové API má šest následujících vlastností~\cite{RajputD}:

\begin{enumerate}
    \item API je založeno na architektuře \textit{klient-server}.
    \item API musí definovat jednotné rozhraní pro komunikaci mezi klientem a~serverem.
    \item Každý požadavek klienta je sám o~sobě kompletní bez využití uložených dat na straně serveru.
    \item Každý požadavek by měl obsahovat informaci o~tom, zdali lze odpověď na straně serveru ukládat do vyrovnávací paměti a~na jak dlouho.
    \item Aplikační architektura musí být vrstvena. 
    \item Server může poskytovat klientovi spustitelný kód (\textit{Code-On-Demand}). Jako jediná z~těchto šesti vlastností není pro \uv{RESTful API} povinností.
\end{enumerate}

Kromě XML REST podporuje i~jiné formáty zpráv, jako je např. JSON\footnote{\textit{JavaScript Object Notation} -- formát pro přenos strukturovaných dat.}, což může v~některých případech významně snížit velikost přenášených zpráv.

\section{SOAP}

Jedním z~nejstarších a~stále nejpoužívanějších protokolů pro realizaci webových služeb je SOAP. Název byl původně zkratkou pro anglické sousloví \textit{Simple Object Access Protocol}, od čehož se však ve specifikaci\footnote{https://www.w3.org/TR/soap/} poslední verze 1.2 upustilo. Jedná se o~protokol pro síťovou komunikaci využívající struktury zpráv podle standardu XML.

Díky plné podpoře standardu XML lze zprávy rozšiřovat pomocí vlastních jmenných prostorů. SOAP také striktně nedefinuje aplikační protokol, tudíž lze kromě HTTP(S) využít i~jiné (např. SMTP, jenž je primárně využíván pro e-mailovou komunikaci). Základním problémem SOAP může být přílišná délka jednotlivých zpráv. XML struktura je pro člověka snadno srozumitelná, ale při syntaktické analýze dlouhých zpráv může docházet ke zpomalení komunikace~\cite{PanagiotisL}.

Každá SOAP zpráva má strukturu definovanou následujícími XML elementy (graficky je struktura znázorněna obrázkem~\ref{fig:soapMessage}):

\begin{itemize}
  \item \texttt{<soap:Envelope>}: Základní a~povinný element, který je obalem celé zprávy.
  \item \texttt{<soap:Header>}: Nepovinný element obsahující doplňující informace ve vnořených elementech (tzv. \textit{Header bloky}). Pokud je element přítomen, musí být umístěn bezprostředně po začátku \texttt{<soap:Envelope>} elementu.
  \newpage
  \item \texttt{<soap:Body>}: Povinný element obsahující samotné tělo zprávy. V~rámci těla je možné definovat struktury, které povoluje standard XML. V~případě výskytu chyb se může uvnitř těla odpovědi vyskytovat speciální element \texttt{<soap:Fault>}, obsahující detaily chyby ve vnořených elementech.
\end{itemize}

\begin{figure}[H]
  \begin{center}
    \includegraphics[width=0.65\textwidth]{fithesis/resources/soapMessage.png}
  \end{center}
  \caption{Struktura SOAP zprávy. Převzato z~\cite{YongL}.}
  \label{fig:soapMessage}
\end{figure}

\chapter{Informační systém skautIS}

SkautIS je rozsáhlý interní informační systém, dodávaný firmou Skeleton Software~s.~r.~o. od roku 2009. Jedná se o~stále se rozvíjející projekt, vyvíjený na platformě .NET, do kterého pravidelně přibývá funkcionalita v~podobě nových verzí\footnote{Přehled verzí: \url{https://napoveda.skaut.cz/skautis/nove-verze}} (ke dni 18.~5.~2021 je aktuální verze 13.6). Pro seznámení se s~dostupnou funkcionalitou existuje prostředí \textit{Testovací skautIS}\footnote{Testovací skautis: \url{https://test-is.skaut.cz}}, jež obsahuje smyšlená data pro testovací účely.

Kromě samotných členů Junáka si může uživatelský účet ve skautISu založit i~kdokoliv jiný. Tento základní účet uživateli nabízí jen velmi omezenou funkcionalitu -- především takový účet slouží pro přihlašování do různých ostatních skautských webů. Pro přístup ke členským funkcím je nutné propojení účtu ve skautISu s~evidencí členů Junáka zodpovědnou osobou. Propojení je provedeno na základě uživatelského jména a~osobního bezpečnostního kódu, jenž obdrží každý nově zaregistrovaný uživatel. Posledním možným stupněm uživatelského účtu je jeho ověření na základě úředně ověřeného dokumentu, který stvrzuje totožnost vlastníka účtu. Takový účet mají především členové Junáka ve vedoucích pozicích (např. vedoucí středisek nebo jejich zástupci). Ověřený účet lze v~některých agendách použít místo podpisu na papírovém dokumentu a~vyhnout se tak nutnosti dokumenty tisknout.

Přístupová oprávnění k~jednotlivým agendám skautIS řeší pomocí uživatelských rolí. Každá role má vlastní množinu oprávnění, jež zpřístupňují konkrétní funkcionality v~rámci agend. Uživatel může mít přiřazeno více rolí, ale v~konkrétní moment může mít zvolenou právě jednu. Pro přístup k~funkcionalitám dané role je nutné ji mít v~daný okamžik zvolenou -- nestačí mít danou roli přiřazenou k~uživatelskému účtu. SkautIS má v~současnou chvíli 100 druhů uživatelských rolí, které zahrnují systémové role (např. role \textit{superadmin}), administrátorské role agend (např. role \textit{Admin: STS}) a~především role spojené s~pozicemi v~organizačních jednotkách (např. role \textit{Oddíl: aktivní činovník}).

Organizační struktura Junáka je rozdělena do několika typů organizačních jednotek -- jejich vzájemná hierarchie je znázorněna na obrázku~\ref{fig:JunakOrg}.

\begin{figure}[!ht]
  \begin{center}
\begin{tikzpicture}[node distance={15mm}] 
\tikzstyle{orgNode} = [rectangle, rounded corners,text centered, draw=black, fill=blue!30]
\tikzstyle{upBringNode} = [rectangle, rounded corners,text centered, draw=black, fill=green!30]
\tikzstyle{captionNode} = [text centered]

\node[orgNode] (1) {Ústředí}; 
\node[orgNode] (2) [below left of = 1] {Kraj}; 
\node[orgNode] (3) [right = 0cm and 0.5cm of 2] {Zvláštní jednotka}; 
\node[orgNode] (4) [below of = 2] {Okres}; 
\node[orgNode] (5) [below of = 4] {Středisko}; 

\node[upBringNode] (6) [below of = 5] {Oddíl}; 
\node[upBringNode] (7) [below of = 6] {Družina}; 

\node[captionNode] (8) [below left = 0cm and 0.5cm of 2] {\textit{Organizační jednotky}};
\node[captionNode] (9) [below left = 0cm and 0.5cm of 6] {\textit{Výchovné jednotky}};

\draw[->] (1) -- (2);
\draw[->] (1) -- (3);
\draw[->] (2) -- (4);
\draw[->] (4) -- (5);
\draw[->] (5) -- (6);
\draw[->] (6) -- (7);
\draw[blue,thick] ($(9)+(-2.5,1.6)$)  rectangle ($(6)+(5.1,6.2)$);
\draw[green,thick] ($(9)+(-2.5,-1.5)$)  rectangle ($(6)+(5.1,0.6)$);

\end{tikzpicture} 
\end{center}
  \caption{Hierarchie organizačních jednotek Junáka.}
  \label{fig:JunakOrg}
\end{figure}

Organizaci zastřešuje tzv. \textit{ústředí}. To je tvořeno z~několika ústředních orgánů a~kanceláře Junáka, která zajišťuje běžný provoz organizace. Dalším typem jsou tzv. vyšší organizační jednotky, které zahrnují \textit{kraje} a~\textit{okresy}. Skautská \textit{střediska} jsou pak označovány jako základní organizační jednotky. Střediska dále tvoří alespoň dva \textit{oddíly}, jež mohou mít více \textit{družin}. Všechny jednotky a~jejich zasazení do hierarchické struktury si může každý zaregistrovaný uživatel dohledat v~sekci skautISu \textit{Strom jednotek}.

Speciálním typem jsou \textit{zvláštní jednotky}. Většina z~nich organizačně spadá pod ústředí a~mají specifické určení a~náplň práce. Patří mezi ně např. Tiskové a~distribuční centrum Junáka, jež zajišťuje vydávání spolkového časopisu, nebo Skautský institut.

\section{Agendy skautISu}

Funkcionalita skautISu je rozdělena do jednotlivých agend. Patří mezi ně např.: \textit{Jednotka}, \textit{Osoba}, \textit{Majetek} nebo \textit{Akce}. 

Agenda \textit{Jednotka} poskytuje uživateli především informace týkající se jednotky, v~níž je registrován, nebo kterou na základě přidělených oprávnění může spravovat. Lze tu nalézt základní údaje, kontakty, seznam členů a~obsazení funkcí, údaje o~registraci nebo seznam podřízených jednotek. Informace se uživateli zobrazují omezeně vzhledem k~jeho roli. Mimo jiné lze vyhledávat a~zobrazovat i~ostatní jednotky. Uživatel s~odpovídajícím oprávněním má možnost také údaje editovat (především se jedná o~roli \textit{vedoucí/admin}).

Pro správu vlastních údajů a~dohledání informací o~ostatních uživatelích slouží agenda \textit{Osoba}. SkautIS k~osobám eviduje velké množství údajů -- kromě základních údajů a~kontaktů agenda eviduje také funkce a~kvalifikace osob, účasti na akcích, registrace a~členství nebo udělená skautská vyznamenání.

K~evidenci a~správě majetku jednotek, včetně řízení procesu inventarizace, je určena agenda \textit{Majetek}. Jednotky mohou vlastnit sklady, kterým náleží jednotlivé položky majetku -- jedná se např. o~různé vybavení kluboven jednotek nebo táborové náčiní~\cite{bpOstruzskova}. Agenda pokrývá také možnost si majetek rezervovat a~následně vypůjčit od ostatních jednotek.

Agenda \textit{Akce} eviduje různé typy skautských akcí. Ty se ve skautISu dělí na vzdělávací akce, sněmy, tábory a~ostatní všeobecné akce. Evidovaná data jednotlivých typů se kromě základních údajů, jako je datum a~místo konání, mohou lišit -- vzdělávací akce např. evidují své instruktory a~realizační tým, sněmy zase volené funkce, kandidáty a~komisi. Akce je možné vyhledat a~přihlásit se na ně. Oprávnění uživatelé mají možnost akce vytvářet a~poté případně upravovat jejich údaje.

Mezi další agendy pak patří nabídka benefitů a~služeb, agenda správy dotací, systém pro generování exportů a~v~neposlední řadě také agenda \textit{hodnocení kvality}, jíž je věnována následující sekce.

\section{Agenda hodnocení kvality}

Agenda hodnocení kvality slouží pro získání a~sdílení zpětné vazby. V~současnosti poskytuje skautIS funkcionalitu pro hodnocení kvality jednotek a~akcí. Hodnocení kvality jednotky je prováděno každý rok a~účastní se ho aktivní činovníci a~vedoucí. Hodnotí se různá kritéria související především s~organizací a~fungováním jednotky (kvalifikace vedení, kvalita zázemí, řízení a~plánování apod.). Hodnocení kvality akce je vyplňováno po jejím konání a~vztahuje se vždy k~běhu konkrétní akce (např. tábora).

Proces hodnocení kvality je založen na diskuzi zúčastněných členů a~následnému vyplnění dotazníku ve skautISu, tzv. \textit{celkového hodnocení}. Každý hodnotící člen má možnost připravit své vstupy předem vyplněním \textit{individuálního hodnocení}. To je dotazník s~identickým obsahem, který si každý vyplní sám za sebe a~může jej poté využít jako podklad k~diskuzi s~ostatními. \textit{Individuální hodnocení} není povinné vyplňovat -- vždy je odevzdáváno pouze \textit{celkové hodnocení}, na kterém se musí zúčastnění členové společně domluvit. Při vyplňování celkového hodnocení lze do dotazníku načíst odpovědi z~individuálních hodnocení v~případě, že jej vyplnili alespoň tři členové. U~každé odpovědi je poté zaznačeno kolik členů ji zvolilo. Tato funkcionalita umožňuje při hodnocení rozeznat, ke které z~odpovědí členové inklinují a~je tak možné odhalit případné neshody mezi členy a~vedoucími.

Dotazník je složen ze sady uzavřených otázek se čtyřmi různými možnostmi odpovědí, z~nichž je možné vybrat právě jednu. Možnosti jsou vždy vzestupně seřazeny od nejhorší po nejlepší. Dotazník je členěn do sekcí a~podsekcí podle různých oblastí hodnocení. Příklad části dotazníku hodnocení kvality je zobrazen na obrázku~\ref{fig:dotaznik}.

\begin{figure}[ht]
  \begin{center}
    \includegraphics[width=\textwidth, keepaspectratio]{fithesis/resources/screenshots/dotaznik.png}
  \end{center}
  \caption{Ukázka z~dotazníku hodnocení kvality jednotky. Převzato z~webového rozhraní testovacího skautISu.}
  \label{fig:dotaznik}
\end{figure}

\textit{Celkové hodnocení} je po uzavření automaticky ohodnoceno slovně. Díky stejné formě všech otázek lze dotazník obodovat a~na základě těchto bodů slovně ohodnotit. Takovéto hodnocení nabývá některé z~hodnot: \uv{hodně slabé}, \uv{slabé}, \uv{dobré} nebo \uv{hodně dobré}.

Výsledky hodnocení kvality jsou členům dostupné v~sekci \uv{Moje výsledky}. Nalezneme zde podrobný rozpis celkového hodnocení, rozdělený podle sekcí dotazníku, a~konkrétní číselné hodnocení jednotlivých podsekcí, uvedené v~procentech získaných bodů. Dále je zde dostupný graf meziročního porovnání hodnocení kvality jednotky a~srovnání s~ostatními jednotkami Junáka.

Jedním z~hlavních výstupů je kruhový graf souhrnně zobrazující výsledky hodnocení. Podsekce představují jednotlivé výseče, které svojí šířkou reprezentují váhu hodnocené části (tato váha je zpravidla přímo úměrná počtu otázek v~podsekci). Výsledek hodnocení dané podsekce je znázorněn vybarvenou délkou odpovídající výseče a~výše uvedené slovní hodnocení je reprezentováno žlutými hranicemi. Graf zachycuje také silné a~slabé stránky jednotky pomocí emotikonů -- červené ohraničení značí slabou stránku a~zelené stránku silnou. Příklad takového grafu je na obrázku~\ref{fig:graph}.

Součástí agendy je také vyhledávací formulář sloužící pro dohledání \textit{celkových hodnocení} dle následujících parametrů:

\begin{itemize}
  \item Rok hodnocení -- konkrétní rok nebo možnost \uv{Nezáleží}.
  \item Stav -- možnosti \uv{Rozpracované}, \uv{Odevzdané} nebo \\\uv{Nezáleží}.
  \item Jednotky -- možnosti \uv{Moje jednotka}, \uv{Podřízené jednotky} nebo \uv{Nadřízené jednotky}.
  \item Typ hodnocení -- možnosti \uv{Jednotka}, \uv{Akce} nebo \uv{Všechny}.
\end{itemize}

\begin{figure}[ht]
  \begin{center}
    \includegraphics[width=\textwidth, keepaspectratio]{fithesis/resources/screenshots/graph.png}
  \end{center}
  \caption{Kruhový graf s~výsledky hodnocení kvality. Převzato z~webového rozhraní testovacího skautISu.}
  \label{fig:graph}
\end{figure}

\clearpage
\newpage
\chapter{Aplikace Kapesní skautIS}

Multiplatformní aplikace \textit{Kapesní skautIS} vznikla jako diplomová práce Mgr.~Petra Domkaře v~roce 2018. V~době jejího návrhu existovaly čtyři nezávislé aplikace zpřístupňující různé agendy skautISu pro operační systémy Android, Windows Phone a~iOS~\cite{dpDomkar}. Aplikace pro Android a~Windows Phone byla vytvořena firmou Skeleton Software~s.~r.~o. ze stejné kódové základny a~jejich podpora skončila v~roce 2016. Aplikace pro iOS vznikla jako bakalářská práce v~roce 2015, ale do obchodu platformy se nikdy nedostala. Pro Android dále existovala separátní aplikace pro inventarizaci majetku, která však také nikdy nebyla dostupná v~obchodě platformy.

\textit{Kapesní skautIS} vznikl za účelem vytvořit jednotnou aplikaci, která nahradí všechna existující řešení a~bude snadno rozšiřitelná o~další agendy.

\section{Kódová struktura}

Projekt je z~hlediska kódu a~adresářové struktury rozdělen do jednotlivých modulů. 

\texttt{AppModule} je hlavním modulem celé aplikace, který je zaveden jako první při jejím spuštění. Modul definuje iniciální komponentu (tzv. \uv{bootstrap}) a~importuje ostatní základní moduly, popsané níže.

\texttt{AppRoutingModule} obsahuje všechny cesty ke kořenovým modulům implementovaných agend. Pro navigaci v~aplikaci je poté využívána funkcionalita zásuvného modulu \texttt{NativeScriptRouterModule}.

\texttt{CoreModule} obsahuje implementaci základních funkcionalit, které jsou nezbytné pro chod aplikace. Patří mezi ně např.: implementace přihlášení k~uživatelskému účtu skautISu, volání operací webových služeb nebo obsluha některých prostředků nativního rozhraní (např. vytočení telefonního čísla nebo odeslání SMS zprávy).

\texttt{SharedModule} obsahuje komponenty uživatelského rozhraní podporující jednotnost vzhledu aplikace napříč všemi agendami. Mimo jiné modul obsahuje také implementaci transformačních funkcí, zajišťujících formátování dat různých datových typů. Tato funkcionalita je vytvořena implementací rozhraní \texttt{PipeTransform}, které poskytuje aplikační rámec Angular.

Zdrojové kódy jednotlivých agend jsou umístěny v~adresáři \texttt{app\textbackslash pages} (každá agenda má svůj vlastní podadresář).

\section{Grafické rozhraní}

Úvodní stránkou aplikace je odkaz do přihlašovacího okna skautISu. Aplikaci lze nastavením konstanty \texttt{TEST\_IS} přesměrovat do testovacího nebo produkčního prostředí. Přihlašovací okno testovacího prostředí lze vizuálně rozpoznat podle žlutého pozadí. Náhledy úvodní stránky a~přihlašovacího okna jsou vyobrazeny na obrázcích~\ref{fig:mainPage} a~\ref{fig:loginPage}.

\begin{figure}[!ht]
  \centering
  \RawFloats
    \begin{minipage}{.49\textwidth}
      \centering
      \includegraphics[width=0.9\textwidth]{fithesis/resources/screenshots/mainPage.png}
      \captionsetup{width=0.9\linewidth}
      \caption{Náhled úvodní obrazovky aplikace \textit{Kapesní skautIS}.}
      \label{fig:mainPage}
    \end{minipage}
    \begin{minipage}{.49\textwidth}
      \centering
      \includegraphics[width=0.9\textwidth]{fithesis/resources/screenshots/loginPage.png}
      \captionsetup{width=0.9\linewidth}
      \caption{Náhled přihlašovacího okna aplikace \textit{Kapesní skautIS}.}
      \label{fig:loginPage}
    \end{minipage}
\end{figure}

Domovská stránka obsahuje název uživatelského účtu, profilovou fotku a~aktuálně zvolenou roli. Dále je zde rychlý přístup k~posledním nepřečteným zprávám a~seznam telefonních čísel, která má uživatel registrovaná ve Skautské telefonní síti. Spodní panel obsahuje tlačítka s~odkazy do jednotlivých sekcí aplikace. Tlačítko \textit{Profil} je odkazem na domovskou stránku a~tlačítka \textit{Hledat} a~\textit{Jednotka} obsahují dlaždicová menu s~různými sekcemi agend. První zmiňované menu obsahuje formuláře pro vyhledávání objektů a~druhé je složeno z~odkazů do agend souvisejících s~jednotkou aktuálně zvolené role. Spodní panel obsahuje také tlačítko \textit{Více}, jež zahrnuje funkcionalitu exportů, informace o~aplikaci a~kontakt pro sdílení zpětné vazby od uživatelů. Náhledy domovské stránky a~dlaždicového menu jsou na obrázcích~\ref{fig:homePage} a~\ref{fig:unitMenu}.

\begin{figure}[H]
  \centering
  \RawFloats
    \begin{minipage}{.49\textwidth}
      \centering
      \includegraphics[width=0.9\textwidth]{fithesis/resources/screenshots/homePage.png}
      \captionsetup{width=0.9\linewidth}
      \caption{Náhled domovské obrazovky aplikace \textit{Kapesní skautIS}.}
      \label{fig:homePage}
    \end{minipage}
    \begin{minipage}{.49\textwidth}
      \centering
      \includegraphics[width=0.9\textwidth]{fithesis/resources/screenshots/unitMenu.png}
      \captionsetup{width=0.9\linewidth}
      \caption{Náhled dlaždicového menu jednotky aplikace \textit{Kapesní skautIS}.}
      \label{fig:unitMenu}
    \end{minipage}
\end{figure}

Grafická stylizace je v~celé aplikaci jednotná díky obecné definici stylů. V~souboru \texttt{\_app-common.scss} jsou definovány vlastnosti prvků, které se v~aplikaci často vyskytují -- jedná se např. o~definování vzhledu několika druhů tlačítek, nadpisů nebo seznamů.

\section{Implementované agendy}

\textit{Kapesní skautIS} obsahuje několik agend webového rozhraní skautISu nebo jejich částí -- mezi prvními byly při samotném vzniku projektu agendy \textit{Osoby}, \textit{STS} a~\textit{Jednotka}~\cite{dpDomkar}.

Agenda \textit{Osoby} obsahuje formulář pro dohledání osob v~jednotkách nebo ve skautském adresáři. K~vyhledaným osobám lze zobrazit detail. Stejným způsobem lze zobrazit také detail vlastního profilu po stisknutí profilové fotky na domovské obrazovce.

V~rámci agendy \textit{STS} je možná správa čísel uživatele ve Skautské telefonní síti. Lze zobrazovat detaily a~statistiky využívání služby, vyúčtování nebo QR kód pro provedení platby za službu.

Agenda \textit{Jednotky} zobrazuje detail jednotky, v~níž je uživatel registrován. Kromě základních informací obsahuje detail také seznam osob ve funkci dané jednotky -- po kliknutí na některou z~položek seznamu se dostaneme na detail dané osoby. Stejným způsobem je zobrazený seznam podřízených jednotek a~jednotka nadřízená.

V~rámci agendy \textit{Zprávy} lze prohlížet a~mazat obdržené e-mailové zprávy -- všechny zprávy jsou vizuálně odlišené na přečtené a~nepřečtené pomocí dvou různých ikon.

Další agendou v~současné verzi aplikace je agenda pro \textit{správu majetku}. Mezi její funkcionalitu patří např.: vyhledávání a~zobrazení detailů položek majetku, správa položek majetku a~skladů jednotky, rezervace a~zapůjčování položek majetku nebo jejich vyřazování ze skladů~\cite{bpOstruzskova}.

Mezi nejnovější implementované části aplikace patří agenda pro \textit{vedoucí oddílů} a~agenda \textit{Akce}.

První jmenovaná zahrnuje správu náborů a~nováčků. Tato sekce obsahuje možnost vytvářet a~spravovat termíny náborových schůzek spolu s~náborovými kritérii jednotky. Mimo jiné agenda obsahuje také funkcionalitu pro zakládání elektronických přihlášek a~možnost vytvoření exportů dat jednotky~\cite{bpTreskon}.

Agenda \textit{Akce} poskytuje správu všech druhů akcí, které jsou ve skautISu evidovány. Mezi ty patří tábory, sněmy, vzdělávací akce a~ostatní všeobecné akce. Kromě základních vyhledávání, zakládání a~editace údajů akcí je poskytnuta také např. správa rozpočtu, správa účastníků nebo zobrazení statistik o~zúčastněných osobách~\cite{dpZeman}.

\chapter{Návrh agendy hodnocení kvality}

Agenda hodnocení kvality pro \textit{Kapesní skautIS} je zaměřena na hodnocení jednotek. Jedná se o~nejdůležitější součást agendy a~účastní se ho všichni aktivní činovníci a~vedoucí jednotek, zatímco hodnocení akcí vyplňují pouze jejich pořadatelé a~dle poskytnutých informací není ani příliš využíváno.

Vyplňování dotazníku probíhá v~rámci tzv. \textit{individuálního hodnocení}. Celkové hodnocení je vyplňováno pouze jednou a~to během diskuze se všemi hodnotícími, což je vhodnější dělat na počítači přes webové rozhraní.

Samotný návrh agendy je rozdělen do tří sekcí. První sekce se věnuje části vyhledávání celkových hodnocení kvality jednotek. Druhá sekce rozebírá část založení dotazníku individuálního hodnocení kvality jednotek. Poslední část navrhuje samotný dotazník hodnocení kvality.

\section{Vymezení požadavků}

Požadavky na implementovanou část agendy byly definovány formou \textit{funkčních} a~\textit{nefunkčních} požadavků.

\subsection{Funkční požadavky}

\textit{Funkční požadavky} definují množinu požadované uživatelské funkcionality. Seznam \textit{funkčních požadavků} byl zvolen následovně:

\begin{itemize}
  \item Uživatel může vyhledávat celková hodnocení kvality jednotek pomocí vyhledávacího formuláře.
  \item Uživatel může vyhledávání omezit podle jednotky, roku a~stavu hodnocení.
  \item Uživatel může zobrazit detail vyhledaných hodnocení kvality.
  \item Uzavřená hodnocení kvality uživateli zobrazí také slovní ohodnocení, datum uzavření a~jméno uživatele, který hodnocení uzavřel.
  \item Uživatel může zobrazit vyplněný dotazník uzavřených hodnocení.
  \item Uživatel může zakládat individuální hodnocení kvality své jednotky z~rolí \textit{vedoucí/admin} a~\textit{aktivní činovník}.
  \item Uživatel může zvolit pro jaký dostupný rok hodnocení zakládá.
  \item Uživatel může dotazník uložit v~libovolném stavu.
  \item Uživatel může editovat své existující individuální hodnocení kvality.
\end{itemize}

Jednotlivé funkční požadavky byly zapracovány do diagramu případů užití, který je na obrázku~\ref{fig:UCDiagram}.

\begin{figure}[ht]
  \begin{center}
    \includegraphics[width=\textwidth, keepaspectratio]{fithesis/resources/diagrams/UCDiagram.png}
  \end{center}
  \caption{Diagram případů užití agendy hodnocení kvality pro \textit{Kapesní skautIS}.}
  \label{fig:UCDiagram}
\end{figure}

\subsection{Nefunkční požadavky}

\textit{Nefunkční požadavky} stanovují omezení kladená na software. Takové požadavky se netýkají přímo specifikace uživatelské funkcionality, ale ostatních vlastností jako je např.: výkon aplikace, její spolehlivost, bezpečnost, či udržitelnost jejího kódu. Seznam \textit{nefunkčních požadavků} byl stanoven následovně:

\begin{itemize}
  \item Agenda hodnocení kvality bude součástí aplikace \textit{Kapesní skautIS}, do které bude vhodně začleněna.
  \item Prostředkem pro vývoj budou aplikační rámce NativeScript a~Angular. Jazykem pro implementaci aplikační logiky bude TypeScript.
  \item Bude zachována celková modularita projektu -- nově vzniklá funkcionalita nebude zasahovat do té existující pokud to nebude nezbytně nutné.
  \item Komunikace s~databází skautISu bude probíhat formou webových služeb. 
  \item Pro plné fungování agendy je nutné připojení k~internetu.
\end{itemize}

\section{Vyhledávání celkových hodnocení}

Úvodní stránkou celé agendy je, po vzoru webového rozhraní skautISu, vyhledávací formulář pro celková hodnocení kvality. Odkaz na tuto úvodní stránku je do aplikace zaveden jako nová položka dlaždicového menu jednotky. Formulář má stejné vyhledávací parametry jako ve webovém rozhraní s~výjimkou možnosti výběru typu hodnocení -- jsou vyhledávána pouze hodnocení jednotek. Výsledek vyhledávání je zobrazen formou posuvného seznamu obsahujícího základní informace. Po kliknutí na některý ze záznamů je zobrazen jeho detail.

Stránka detailu se skládá ze základních informací o~konkrétním hodnocení kvality. Pro celková hodnocení ve stavu \uv{Odevzdané} je k~dispozici také slovní ohodnocení a~náhled vyplněného dotazníku -- tento dotazník není možné upravovat.

Návrhy grafického rozhraní úvodní stránky a~detailu celkového hodnocení jsou na obrázcích~\ref{fig:mainPageConcept} a~\ref{fig:detailConcept}.

\begin{figure}[!ht]
  \centering
  \RawFloats
    \begin{minipage}{.49\textwidth}
      \centering
      \includegraphics[width=0.9\textwidth]{fithesis/resources/layouts/mainPage.png}
      \captionsetup{width=0.9\linewidth}
      \caption{Návrh úvodní stránky agendy hodnocení kvality.}
      \label{fig:mainPageConcept}
    \end{minipage}
    \begin{minipage}{.49\textwidth}
      \centering
      \includegraphics[width=0.9\textwidth]{fithesis/resources/layouts/detail.png}
      \captionsetup{width=0.9\linewidth}
      \caption{Návrh stránky detailu celkového hodnocení kvality.}
      \label{fig:detailConcept}
    \end{minipage}
\end{figure}

\section{Zakládání individuálních hodnocení}
\label{creatingInvEval}

Tlačítko pro přístup k~zakládání individuálních hodnocení je součástí úvodní stránky agendy, popsané v~minulé sekci. Po stisknutí tohoto tlačítka se otevře nabídka pro založení individuálního hodnocení kvality jednotky. Součástí této stránky jsou informace o~jednotce, typu a~roku hodnocení. Rok hodnocení je nabídka z~dostupných roků, ve kterých lze hodnocení zakládat. Nachází se zde také upozornění, že se jedná pouze o~individuální hodnocení kvality, které slouží jako podklad k~hodnocení celkovému (stejné upozornění se vyskytuje i~ve webovém rozhraní skautISu).

Stisknutím tlačítka \uv{Založit} je založeno nové individuální hodnocení a~otevřen dotazník. V~případě, že zatím neexistuje celkové hodnocení pro daný rok, je toto hodnocení založeno na pozadí v~rámci existující funkcionality webové služby. Existuje-li již odevzdané celkové hodnocení pro daný rok, je pro něj zakázáno vytvářet další individuální hodnocení. Algoritmus založení individuálního hodnocení jednotky je znázorněn pomocí diagramu aktivit na obrázku~\ref{fig:activityDiagram}. Návrh grafického rozhraní stránky zakládání individuálního hodnocení je na obrázku~\ref{fig:createConcept}.

\begin{figure}[ht]
  \begin{center}
    \includegraphics[width=\textwidth, keepaspectratio]{fithesis/resources/diagrams/activityDiagram.png}
  \end{center}
  \caption{Diagram aktivit založení individuálního hodnocení kvality jednotky.}
  \label{fig:activityDiagram}
\end{figure}

\begin{figure}[H]
  \begin{center}
    \includegraphics[width=0.49\textwidth]{fithesis/resources/layouts/create.png}
  \end{center}
  \captionsetup{width=0.6\linewidth}
  \caption{Návrh stránky zakládání individuálního hodnocení kvality.}
  \label{fig:createConcept}
\end{figure}

\section{Dotazník hodnocení kvality}

Dotazník hodnocení kvality je ve webovém rozhraní systému skautIS zobrazen jako jedna posuvná stránka. Mobilní obrazovka neumožňuje naráz zobrazit stejné množství otázek a~i~kdyby byl dotazník zobrazován stejným způsobem, byl by značně nepřehledný. Z~tohoto důvodu bylo nutné dotazník rozdělit na více částí s~menším počtem otázek na jedné stránce.

Každá otázka dotazníku má svou nadřazenou sekci a~podsekci. Podsekce jsou využity pro vytvoření jednotlivých stránek -- obecně tedy platí, že dotazník má právě tolik stránek, kolik má podsekcí. Jednotlivé stránky jsou seřazeny tak, aby byly uskupeny do jednotlivých sekcí a~nepřeskakovalo se mezi nimi.

Stránka dotazníku obsahuje v~horní části název sekce a~podsekce společně s~jejím slovním popisem. Následují jednotlivé otázky dotazníku patřící pod aktuální podsekci. Pro navigaci mezi jednotlivými stránkami je vytvořen jednoduchý navigační panel ve spodní části obrazovky.

Samotný dotazník je vytvořen ve dvou různých variantách. První varianta umožňuje uživateli dotazník pouze prohlížet bez možnosti jej editovat a~uložit -- tato varianta slouží jako náhled odevzdaného dotazníku celkového hodnocení kvality. Druhá varianta, rozšířená o~možnost jeho editace a~uložení, slouží k~vyplňování individuálního hodnocení kvality.

Návrhy grafického rozhraní obou zmíněných variant jsou na obrázcích~\ref{fig:questionnaireConcept} a~\ref{fig:questionnaireLockedConcept}.

\begin{figure}[H]
  \centering
  \RawFloats
    \begin{minipage}{.49\textwidth}
      \centering
      \includegraphics[width=0.9\textwidth]{fithesis/resources/layouts/questionnaire.png}
      \captionsetup{width=0.9\linewidth}
      \caption{Návrh dotazníku s~možností editace.}
      \label{fig:questionnaireConcept}
    \end{minipage}
    \begin{minipage}{.49\textwidth}
      \centering
      \includegraphics[width=0.9\textwidth]{fithesis/resources/layouts/questionnaireLocked.png}
      \captionsetup{width=0.9\linewidth}
      \caption{Návrh dotazníku bez možnosti editace.}
      \label{fig:questionnaireLockedConcept}
    \end{minipage}
\end{figure}

\chapter{Implementace}

Implementace agendy byla rozdělena podobným způsobem jako její návrh. V~první fázi bylo implementováno vyhledávání a~zobrazení detailu celkových hodnocení kvality jednotek. Poté byl vytvořen formulář pro zakládání individuálních hodnocení. V~poslední fázi byl implementován samotný dotazník. Velká část funkcionality obou variant dotazníku je sdílená, a~proto byla jejich implementace zahrnuta ve společné fázi.

Náhledy implementovaných obrazovek jsou dostupné v~Příloze~\ref{a:Screenshots}.

\section{Prostředky pro implementaci}

Pro implementaci agendy byly využity některé specifické pomocné prostředky.

Pro práci s~aplikačním rozhraním NativeScript bylo využito grafické rozhraní \textit{NativeScript Sidekick}. To umožňuje práci v~intuitivním prostředí se sadou nástrojů pro snadnou správu projektu, která pokryje většinu běžných potřeb (nejsou obsaženy všechny nástroje, které lze používat přes příkazový řádek). Jednou z~hlavních výhod tohoto nástroje je integrovaná správa nainstalovaných emulátorů\footnote{Software umožňující běh programů pro odlišnou platformu.}, na kterých lze snadno spouštět vyvíjenou aplikaci (pro implementaci byl využit emulátor operačního systému Android verze 8.1). \textit{NativeScript Sidekick} umožňuje také jednoduchou správu zásuvných modulů, včetně vyhledávání dostupných balíčků v~NPM registru\footnote{Databáze veřejných zásuvných modulů pod NPM.}.

Pro implementaci volání webových služeb byla nutná důkladná analýza požadovaného vstupu a~vráceného výstupu zvolených operací. Základní přehled všech služeb a~jejich operací je dostupný v~dokumentaci\footnote{\url{https://test-is.skaut.cz/JunakWebservice/}}, která je však pro podrobnější analýzu nedostačující. Dokumentace zachycuje XML strukturu vstupní i~výstupní zprávy, ale význam jednotlivých elementů není nijak blíže popsán a~v~některých případech tak není jasné, jaká konkrétní data obsahují. Tento problém pomáhá řešit testovací rozhraní\footnote{\url{https://ws.skautis.cz/testovani}} pro webové služby, jež umožňuje volat dostupné operace nad databází testovacího skautISu. Vstupní parametry i~odpověď serveru jsou v~testovacím rozhraní ve zjednodušeném formátu pro lepší čitelnost. Pro následnou implementaci je však nutné počítat s~XML formátem definovaným v~dokumentaci. Na obrázcích~\ref{fig:testAPIRequest} a~\ref{fig:testAPIResult} je zachycen příklad volání operace v~testovacím rozhraní, jež vrací seznam let, ve kterých lze založit hodnocení kvality.

\begin{figure}[!ht]
  \centering
  \RawFloats
    \begin{minipage}{.49\textwidth}
      \centering
      \includegraphics[width=0.9\textwidth]{fithesis/resources/testAPIRequest.png}
      \captionsetup{width=0.9\linewidth}
      \caption{Volání operace webové služby v~testovacím rozhraní.}
      \label{fig:testAPIRequest}
    \end{minipage}
    \begin{minipage}{.49\textwidth}
      \includegraphics[width=0.9\textwidth]{fithesis/resources/testAPIResult.png}
      \captionsetup{width=0.9\linewidth}
      \caption{Odpověď serveru na volání operace služby v~testovacím rozhraní.}
      \label{fig:testAPIResult}
    \end{minipage}
\end{figure}

\section{Webové služby}\label{webserv}

Webové služby skautISu jsou aplikací \textit{Kapesní skautIS} volány pomocí jednotné funkcionality. K~tomuto účelu slouží třída \texttt{WebApiService}, která je součástí sdílené funkcionality \texttt{CoreModule}. Třída se stará o~volání operací zvolené webové služby, včetně vytvoření příslušné vstupní zprávy, a~následné načtení dat z~odpovědi do instance konkrétní třídy pomocí funkce předané na vstupu.

Třída poskytuje pouze jednu veřejnou metodu s~názvem \texttt{call}, která implementuje popisovanou funkcionalitu. Její deklarace vypadá následovně:

\begin{lstlisting}
call(entity: BaseInput, outputEntityCreator: () => BaseOutput, webSrvName: string): Observable<any>
\end{lstlisting}

Metoda na vstupu přijímá vstupní entitu, funkci pro vytvoření entity výstupní a~řetězec s~názvem webové služby. Návratovým typem metody je \texttt{Observable<any>}, což v~tomto případě znamená instance třídy výstupní entity obalená typem \texttt{Observable}. \texttt{Observable} je součástí knihovny pro reaktivní programování\footnote{Programovací paradigma založené na aktualizacích stavu na základě šíření určitých změn.} \textit{RxJS}. Jedná se o~třídu reprezentující asynchronní tok dat v~čase, která slouží jako kontejner, do kterého data přichází asynchronně. Na změny stavu instance \texttt{Observable} lze reagovat pomocí metody \texttt{subscribe}, jež zároveň umožňuje data z~instance číst.

Třídy vstupních a~výstupních entit musí být potomky jedné ze dvou konkrétních tříd, které jsou zavedeny v~\texttt{CoreModule}. Vstupní entity musí dědit od třídy \texttt{BaseInput} a~výstupní od \texttt{BaseOutput}. Třída \texttt{BaseInput} obsahuje atributy \texttt{ID\_Application} a~\texttt{wrapper}. První jmenovaný atribut je konstatní UUID\footnote{\textit{Universally Unique Identifier} -- unikátní 128 bitový identifikátor.} aplikace registrované pro používání webových služeb skautISu. Tento identifikátor je povinnou součástí volání všech operací a~každá aplikace komunikující s~API skautISu musí mít svůj vlastní. Atribut \texttt{wrapper} je nepovinný řetězec sloužící pro ošetření nestandardních situací, kdy je tělo vstupní zprávy obaleno do elementu nesoucího název v~atributu uložený. Pokud není atribut \texttt{wrapper} vyplněn, tak se standardně počítá s~tím, že se místo něj použije element s~názvem obsahujícím název dané operace a~suffix \texttt{*Input}. Atributy tříd vstupních a~výstupních entit také musí svými názvy odpovídat elementům zprávy operace, pro kterou jsou určeny. V~neposlední řadě musí být název třídy vstupní entity shodný s~názvem volané operace.

\subsection{Nutné úpravy obecné funkcionality}

Naprostá většina operací má stejnou strukturu vstupních a~výstupních zpráv, ke které lze přistupovat obecně. V~některých případech však nelze anomálie ošetřit ani pomocí atributu \texttt{wrapper} a~je nutný přímý zásah do obecného kódu. Během implementace agendy hodnocení kvality tato situace nastala u~operací \texttt{EvaluationAnswerAllEvalua\-tionPerson} a~\texttt{EvaluationPersonUpdate}.

První zmíněná operace má nestandardní strukturu výstupní zprávy. Operace vrací seznam objektů -- v~takovém případě je obecně pravidlem, že každá položka seznamu je obalena elementem s~názvem obsahující název operace a~suffix \texttt{*Output}. Tato operace má však jednotlivé položky seznamu obaleny elementem s~názvem \texttt{EvaluationAnswerAllOutput}, což muselo být ošetřeno speciální podmínkou, která testuje na název této konkrétní operace.

Operace \texttt{EvaluationPersonUpdate} přijímá vstupní zprávy ve struktuře, jež nebyla v~rámci zmiňované metody \texttt{call} doposud implementována. Zpráva obsahuje element \texttt{Answers}, který je seznamem elementů \texttt{EvaluationAnswerPerson} v~následujícím formátu:

\begin{lstlisting}
<Answers>
    <EvaluationAnswerPerson>
        <ID_EvaluationCriteria>int</ID_EvaluationCriteria>
        <Answer>decimal</Answer>
    </EvaluationAnswerPerson>
    <EvaluationAnswerPerson>
        <ID_EvaluationCriteria>int</ID_EvaluationCriteria>
        <Answer>decimal</Answer>
    </EvaluationAnswerPerson>
</Answers>
\end{lstlisting}

Původní funkcionalita nepočítala s~takto komplexním vstupem a~řešila pouze situace, kdy elementy obsahovaly hodnoty základních datových typů. Z~tohoto důvodu byla vytvořena rekurzivní metoda \texttt{getElementXML}, která kromě základních datových typů řeší i~situace, kdy je typem atributu vstupní entity jiný objekt nebo pole objektů.

\subsection{Použité operace}

Pro implementaci agendy hodnocení kvality byly využity následující operace webové služby \texttt{Evaluation}\footnote{\url{https://test-is.skaut.cz/JunakWebservice/Evaluation.asmx}}:

\begin{itemize}
    \item \texttt{EvaluationAllYear} -- vrátí seznam let, ve kterých jsou hodnocení kvality k~dispozici pro vyhledávání.
    \item \texttt{EvaluationAllYearCreate} -- vrátí seznam let, ve kterých lze založit hodnocení kvality.
    \item \texttt{EvaluationStateAll} -- vrátí seznam možných stavů hodnocení kvality.
    \item \texttt{EvaluationSubtypeAll} -- vrátí seznam možných typů hodnocení kvality.
    \item \texttt{EvaluationAllUnit} -- vrátí seznam celkových hodnocení kvality jednotek.
    \item \texttt{EvaluationAll} -- vrátí seznam celkových hodnocení kvality. Odpověď obsahuje také ID individuálního hodnocení kvality přihlášeného uživatele, pokud takové hodnocení existuje.
    \item \texttt{EvaluationDetail} -- vrátí detail konkrétního hodnocení kvality.
    \item \texttt{EvaluationAnswerAll} -- vrátí dotazník celkového hodnocení kvality.
    \item \texttt{EvaluationAnswerAllEvaluationPerson} -- vrátí dotazník individuálního hodnocení kvality.
    \item \texttt{EvaluationPersonInsert} -- založí individuální hodnocení kvality pod přihlášeným uživatelem.
    \item \texttt{EvaluationPersonUpdate} -- upraví individuální hodnocení kvality.
\end{itemize}

\section{Vyhledávání celkových hodnocení}

Sekce vyhledávání celkových hodnocení kvality jednotek je úvodní sekcí celé agendy.

\begin{wrapfigure}{R}{0.5\textwidth}
    \centering
    \includegraphics[width=0.9\textwidth]{fithesis/resources/screenshots/implSearch.png}
    \caption{Formulář pro vyhledávání hodnocení kvality.}
    \label{fig:implSearch}
\end{wrapfigure}

Pro implementaci vyhledávacího formuláře byla využita komponenta \texttt{RadDataForm}, která existuje jako součást zásuvného modulu \texttt{nativescript-ui-data\-form}. Tento modul již byl v~projektu zaveden v~rámci implementace ostatních agend, a~proto pro jeho použití stačil import do modulu agendy hodnocení kvality. Komponenta je zavedena pomocí stejnojmenného elementu, jemuž je předán zdroj dat pomocí atributu \texttt{source}. Na základě předané třídy a~typů jejích atributů komponenta umí automaticky vygenerovat formulář s~odpovídajícími prvky. Toto řešení však do aplikace graficky nezapadalo, a~proto bylo nutné prvky formuláře ručně definovat pomocí elementu \texttt{TKEntityProperty}. Tento element umožňuje pomocí atributů specifikovat zdroj dat dané položky a~definovat její popisek. Dále lze v~rámci vnořených elementů \texttt{TKPropertyEditor} a~\texttt{TKPropertyStyle} určit typ položky (textové pole, výběr z~několika možností, posuvník, atd.) a~její styl.

V~rámci tohoto formuláře byly vytvořeny položky \textit{Rok}, \textit{Stav} a~\textit{Jednotky} -- všechny tři jsou typu \texttt{Picker}, což označuje výběr z~předem definovaných možností. Položka \textit{Rok} je seznam let, ve kterých lze hodnocení vyhledávat, rozšířený o~možnost \uv{Nezáleží} -- tento seznam byl načten pomocí webové služby. Položka \textit{Stav} je obdobný seznam, poskytnutý webovou službou, který obsahuje možné stavy celkového hodnocení kvality. Poslední zmíněná položka byla vytvořena staticky z~hodnot \textit{Moje jednotka}, \textit{Podřízené jednotky} a~\textit{Nadřízené jednotky}. Výsledný vzhled formuláře je zobrazen na obrázku~\ref{fig:implSearch}

Pro implementaci formulářových položek typu \texttt{Picker} existuje v~\texttt{CoreModule} třída \texttt{PickerProvider}. Tento jednoduchý kontejner umožňuje k~jednotlivým položkám uchovávat klíč a~popisek. Popisek je řetězec, který se ve formuláři zobrazí uživateli, a~klíč je reálná hodnota položky. Tento mechanismus umožňuje skrýt hodnoty nevhodné pro grafické rozhraní -- např. možnost \uv{Moje jednotka} má klíč \uv{My Unit}, což je řetězec využívaný pro volání některých operací webové služby. Položky dotazníku byly navíc obaleny typem \texttt{Observable}, blíže popsaným v~sekci~\ref{webserv}.

Výsledek vyhledávání byl implementován pomocí posuvného seznamu (element \texttt{ScrollView}) a~komponenty \texttt{RadListView} ze zásuvného modulu \texttt{nativescript-ui-dataform}. Element komponenty přijímá zdroj dat přes atribut \texttt{items}, do kterého je předáno pole nalezených celkových hodnocení kvality. Lze definovat vzhled jednotlivých položek pomocí vnořeného elementu \texttt{ng-template}, jenž umí na položky aplikovat různé šablony.

Po kliknutí na některé z~vyhledaných celkových hodnocení kvality je zobrazen jeho detail. Ten je implementován s~využitím komponenty \texttt{LineInfoItem}, která je součástí \texttt{SharedModule}. Komponenta je navržena pro jednotné zobrazování detailních informací o~nějakém objektu.

\section{Zakládání individuálních hodnocení kvality}

K~zakládání individuálního hodnocení kvality jednotky je možné se dostat po kliknutí na tlačítko \uv{Nové individuální hodnocení}, které je umístěno pod formulářem na úvodní stránce agendy. Přístup k~této funkcionalitě mají pouze uživatelé se zvolenou rolí \textit{vedoucí/admin} nebo \textit{aktivní činovník} jednotky (s~výjimkou zvláštních jednotek), a~proto je implementována její kontrola. V~případě, že uživatel některou z~těchto rolí nemá zvolenou, zmíněné tlačítko se mu nezobrazí. Tento mechanismus obstarává třída \texttt{EvaluationPermissionState}, která po každé změně zvolené role kontroluje, zda má uživatel do sekce povolený přístup.

Formulář pro zakládání individuálních hodnocení kvality se skládá z~položek \textit{Jednotka}, \textit{Typ} a~\textit{Rok}. První dvě položky jsou uživatelem neměnitelné a~jsou doplněny na základě aktuálně zvolené role a~jednotky, k~níž se role váže -- tato data jsou dotažena pomocí volání operace \texttt{UnitDetail} webové služby \texttt{OrganizationUnit} (volání již bylo implementováno v~rámci agendy \textit{Jednotka}). Položka \textit{Rok} obsahuje seznam let, ve kterých lze zakládat hodnocení kvality -- data byla opět získána voláním webové služby. Implementace formuláře byla provedena pomocí komponenty \texttt{RadDataForm}, jejíž popis je součástí předešlé sekce. Vzhled formuláře je zachycen na obrázku~\ref{fig:implCreate}.

\begin{wrapfigure}{r}{0.5\textwidth}
    \centering
    \includegraphics[width=0.9\textwidth]{fithesis/resources/screenshots/implCreate.png}
    \caption{Formulář pro zakládání individuálních hodnocení kvality.}
    \label{fig:implCreate}
\end{wrapfigure}

Zakládání individuálních hodnocení je proces složený z~několika kroků -- algoritmus je konkrétně popsán v~sekci~\ref{creatingInvEval}. V~rámci tohoto procesu dochází k~volání několika operací webové služby \texttt{Evaluation}, která jsou na sobě vzájemně závislá. Například volání operace \texttt{Evaluation\-SubtypeAll}, zjišťující seznam všech podtypů, je podmíněno výsledkem operace \texttt{EvaluationAll}, a~proto musí počkat až tato operace skončí. Volání webových služeb je v~aplikaci implementováno asynchronně, a~proto je nutné volání operací synchronizovat, pokud na sebe mají navazovat. Toho je docíleno pomocí klíčového slova jazyka JavaScript (potažmo tedy i~TypeScript) \texttt{await}, které umožňuje označit asynchronní operace, na jejichž výsledek se má počkat před vykonáním dalších instrukcí.

Metoda \texttt{onCreate} třídy \texttt{EvaluationCreateComponent} implementuje funkcionalitu zakládání individuálních hodnocení. Metoda je složena z~postupných volání jednotlivých operací webové služby \texttt{Evaluation}, která jsou vyčleněna do samostatných metod. V~případě výskytu chyby v~datech je uživateli zobrazena chybová hláška a~operace je ukončena. Celý proces je zakončen voláním metody \texttt{loadAnswers}, jež načte jednotlivé otázky dotazníku a~otevře jej.

Načítání všech otázek z~webové služby je časově relativně náročná operace, a~proto je nejdříve ověřeno, že bylo načítání ukončeno, a~až poté dojde k~otevření dotazníku. To je umožněno pomocí časovacích metod jazyka JavaScript \texttt{setInterval} a~\texttt{setTimeout}. Metoda \texttt{setInterval} umožňuje po definovaném intervalu opakovat funkci, kterou dostala na vstupu, do té doby, než je zavolána metoda \texttt{clearInterval}. To je využito k~opakovanému kontrolování stavu načítání odpovědí, dokud není tato operace u~konce. Pro případ chyby je zavedena metoda \texttt{setTimeout}, která vykoná funkci předanou na vstupu po definované prodlevě. Tím je umožněno zabránit nekonečnému opakování funkce \texttt{setInterval} v~případě chyby na straně serveru -- po sedmi vteřinách vyprší časový limit, který opakování ukončí a~zobrazí chybovou hlášku.

\section{Dotazník hodnocení kvality}

\begin{wrapfigure}{r}{0.5\textwidth}
    \centering
    \includegraphics[width=0.9\textwidth]{fithesis/resources/screenshots/implQuestionnaire.png}
    \caption{Dotazník hodnocení kvality v~editovatelné variantě.}
    \label{fig:implQuestionnaire}
\end{wrapfigure}

Dotazník hodnocení kvality je řízen třídou \texttt{EvaluationSurvey}. Tato třída v~konstruktoru přijímá pole otázek dotazníku načtených z~webové služby (jedná se o~instance třídy \texttt{EvaluationAnswer\-AllOutput}). V~rámci funkcionality konstruktoru jsou otázky seřazeny podle atributu určujícího správné pořadí podsekcí dotazníku, podle kterých je dotazník rozdělen na jednotlivé stránky. Třída obsahuje několik atributů řídících obsah aktuální stránky dotazníku. Kromě názvu sekce, názvu podsekce a~jejího popisu je důležitých také několik indexů. Indexy \texttt{currentSetOrder} a~\texttt{maxSetOrder} určují číslo aktuální a~poslední stránky -- podle těchto indexů lze určit, na jaké stránce se uživatel právě nachází a~kolik stránek dotazník má. Indexy \texttt{currentFromIndex} a~\texttt{currentToIndex} jsou indexy první a~poslední otázky aktuální podsekce -- podle těchto indexů lze získat sadu otázek pro aktuální stránku (tuto sadu ve formě pole vrací metoda \texttt{getCurrentSet}). Pro pohyb o~jednu stránku dopředu nebo nazpět, formou nastavení zmiňovaných indexů, se starají metody \texttt{nextSet} a~\texttt{prevSet}.

Každá otázka dotazníku má čtyři možné odpovědi, z~nichž může být v~jednu chvíli zvolena nejvýše jedna. Informace o~tom, která z~odpovědí byla zvolena, je webovou službou poskytnuta ve formě čísla (1--4 pro jednotlivé odpovědi a~0 pro nevyplněnou otázku). Tento přístup je pro práci s~dotazníkem nepraktický, a~proto je každé otázce vytvořena instance třídy \texttt{EvaluationRadioOptions}. Tato třída spravuje čtveřici odpovědí -- ke každé má uložené textové znění a~proměnnou určující, zda je odpověď aktuálně zvolena. Třída poskytuje metodu \texttt{reset}, která zruší zvolenou odpověď, a~metodu \texttt{click}, jež naopak zvolí odpověď podle indexu obdrženého na vstupu.

Pro implementaci uživatelského rozhraní editovatelného dotazníku byl zaveden zásuvný modul \texttt{nativescript-checkbox}. Modul umožňuje definovat elementy \texttt{CheckBox}, které v~grafickém rozhraní vytvoří blok obsahující zaškrtávací tlačítko a~popisek -- každá odpověď v~dotazníku je tak implementována pomocí jednoho elementu. Pomocí atributu \texttt{checked} lze zjistit, zdali je položka zaškrtnuta. Po stisknutí oblasti elementu je zavolána metoda \texttt{click}.

Pod každou otázku editovatelného dotazníku bylo vytvořeno tlačítko \textit{Zrušit odpověď}, které po stisknutí zavolá metodu \texttt{reset}. Toto řešení bylo inspirováno webovým rozhraním skautISu.

Pro přesun mezi jednotlivými stránkami dotazníku byl ve spodní části obrazovky vytvořen navigační panel. Na tomto panelu jsou umístěna tlačítka se šipkami doleva a~doprava, které volají metody \texttt{nextSet} a~\texttt{prevSet}, čímž posouvají mezi jednotlivými stránkami dotazníku. V~editovatelné variantě dotazníku je uprostřed navigačního panelu umístěno také tlačítko \textit{Uložit}, jenž za pomocí webové služby uloží současný stav dotazníku do databáze skautISu.

Náhled dotazníku hodnocení kvality v~editovatelné variantě je zobrazen na obrázku~\ref{fig:implQuestionnaire}.

\chapter{Uživatelské testování}

Za účelem zlepšení uživatelské zkušenosti proběhlo neformální uživatelské testování agendy. Pro potřeby testování byl vytvořen dotazník v~prostředí aplikace \textit{Formuláře Google}.  Dotazník sestával kromě demografické části především z~několika úkolů, pro jejichž splnění bylo nutné využít funkcionality implementované agendy. Úkoly byly rozděleny na dvě sekce -- vyhledávání a~práce s~dotazníkem. Na konci obou sekcí účastníci testování hodnotili práci s~agendou z~hlediska uživatelské přivětivosti a~sdíleli své podněty pro zlepšení. Součástí dotazníku byl také sběr demografických dat a~finální zhodnocení celkového dojmu z~práce s~agendou. Celý dotazník a~kompletní souhrn výsledků jsou k~dispozici v~přílohách této práce, viz Příloha~\ref{a:archive}.

Testování probíhalo na chytrých telefonech s~operačním systémem Android. Byl vytvořen instalační balíček, který si účastníci stáhli do svého zařízení naskenováním QR kódu.

Účastníci testování nebyli členové Junáka, a~tedy neměli zkušenosti s~agendou hodnocení kvality existující ve webovém rozhraní skautISu. Jednalo se o~zkušené uživatele chytrých zařízení, kteří poskytli zpětnou vazbu z~hlediska obecného používání mobilní aplikace.

\section{Výsledky testování}

Testování se zúčastnilo sedm osob s~největším zastoupením ve věku 21--25 let. Celkem šest účastníků testovalo na zařízeních s~úhlopříčkou 5 palců a~více, zbylý jeden uvedl úhlopříčku v~rozsahu 4--4,5 palce. Všechna zařízení měla nainstalována operační systém Android verze 10 nebo 11.

Žádný z~účastníků neměl problém s~náročností úkolů, což potvrzují také správně vyplněné úkoly všemi z~nich. Jeden z~účastníků vytkl časovou náročnost první sekce úkolů, což však nemělo žádnou spojitost s~funkčností agendy. Jedna z~otázek zahrnující počet výsledků vyhledávání měla dvě různé odpovědi, což však bylo vysvětleno změnou dat testovacího skautISu v~průběhu období testování, kterou nebylo možné ovlivnit.

Během testování agendy nebyla nalezena žádná chyba, která by znemožňovala její plnohodnotné používání. Většina nedostatků byla způsobena nevhodným rozložením prvků, což některým účastníkům znepříjemňovalo práci s~agendou. Dále účastníci testování poskytli zajímavé a~relevantní návrhy rozšiřující funkcionality.

Po analýze výsledků testování byly opraveny následující chyby:

\begin{itemize}
    \item Nevhodné rozmístění tlačítek na obrazovce $\rightarrow$ tlačítka byla rozmístěna tak, aby byla snáz dosažitelná palcem.
    \item Nadpis stránek byl umístěn mírně vpravo od středu obrazovky $\rightarrow$ tato chyba byla opravena úpravou CSS vlastností \texttt{padding} a~\texttt{margin}.
    \item Navigační panel dotazníku měl průhledné pozadí, což nepůsobilo z~estetického hlediska dobře při rolování dotazníku (text \uv{zajížděl} pod panel) $\rightarrow$ navigační panel byl upraven tak, aby byl lépe vizuálně oddělen od dotazníku a~text se pod něj nedostával.
\end{itemize}

Na základě návrhů na zlepšení od účastníků testování byly implementovány následující změny a~rozšíření:

\begin{itemize}
    \item Možnost přepínání mezi stránkami dotazníku pomocí gest přejetí doprava a~doleva.
    \item Do výsledku vyhledávání celkových hodnocení kvality byl přidán panel zobrazující vyhledávací parametry a~počet nalezených výsledků.
    \item Položky výsledku vyhledávání byly od sebe lépe vizuálně odděleny tenkou čarou.
    \item Panel dotazníku byl obohacen o~číslování stránek.
\end{itemize}

\chapter{Závěr}

Cílem této práce bylo analyzovat agendu hodnocení kvality informačního systému skautIS a~její část, která bude vhodná i~pro mobilní platformy, implementovat do aplikace \textit{Kapesní skautIS}.

V~teoretické části práce byly představeny moderní způsoby vývoje mobilních aplikací -- pozornost byla věnována především aplikačnímu rámci \textit{NativeScript}. Dále byla krátce představena technologie webových služeb, jež byla významnou součástí implementace. Byl analyzován informační systém skautIS, jeho agenda hodnocení kvality a~poté také aplikace \textit{Kapesní skautIS}. Následně byl vytvořen návrh agendy jako nový modul aplikace. Výstupem práce je rozšíření aplikace \textit{Kapesní skautIS} o~agendu hodnocení kvality, které je zaměřeno na hodnocení kvality jednotek a~tvorbu jejich individuálních hodnocení. Dále byla rozšířena funkcionalita pro volání webových služeb o~schopnost vytvářet vstupní zprávy s~komplexní strukturou. Po dokončení implementace bylo provedeno uživatelské testování a~zpracovány jeho výsledky.

Implementační část práce zahrnovala především vývoj v~aplikačním rámci \textit{NativeScript}. Ten nabízí řadu zajímavých výhod pro multiplatformní vývoj mobilních aplikací, mezi které patří např.: široká podpora moderních prostředků pro tvorbu grafického rozhraní, jednoduchá instalace a~přehledná dokumentace. Osobně jsem ocenil rozšíření do IDE \textit{Visual Studio Code}. Toto vývojové prostředí je z~mého pohledu jedno z~nejlepších na trhu a~jeho rozšíření pro aplikační rámec práci výrazně zpříjemňuje. Díky skvěle zpracovanému tutoriálu je \textit{NativeScript} také velmi přívětivý pro nováčky.

Mezi problémy, které během práce nastaly, patřila např. nutnost častého restartu aplikace z~důvodu ne vždy spolehlivě fungujícího nástroje pro instalaci změn, což zpomalovalo vývoj. Tento nástroj je součástí aplikačního rámce teprve od verze 5.3 a~do budoucna se tak dá předpokládat jeho další zlepšení. Dalším problémem byla nedostatečná dokumentace webových služeb skautISu a~občasné anomálie ve formátu zpráv.

Z~uživatelského testování agendy byla získána velmi dobrá zpětná vazba. Účastníci testování vytkli několik nedostatků, které byly při implementaci přehlédnuty. Naprostá většina obdržených námětů byla shledána jako relevantní a~byla do agendy zapracována.

Mezi možné náměty na rozšíření do budoucna patří vytvoření agendy pro hodnocení kvality akcí. Tato funkcionalita by byla vhodným rozšířením agendy \textit{Akce}, která je již existující součástí aplikace. Funkcionalita vyplňování a~zobrazování dotazníku hodnocení kvality vzniklá v~rámci této práce je vytvořena z~velké části obecně a~mohla by být snadno využitelná pro hodnocení kvality akcí.

V~současné chvíli je agenda hodnocení kvality již součástí hlavní větve projektu a~bude tak zahrnuta v~nejnovější verzi aplikace.

\printbibliography[heading=bibintoc]

\appendix

\chapter{Přílohy v~archivu IS MU}
\label{a:archive}

V~repozitáři závěrečné práce v~IS MU je kromě textu práce také archiv, který obsahuje:

\begin{itemize}
    \item Zdrojové kódy aplikace v~adresáři \\\texttt{\textbackslash kapesni\_skautis\_evaluation}.
    \item Instalační balíček finální verze aplikace pro zařízení Android s~názvem \texttt{kapesni\_skautis\_evaluation.apk}. Aplikace běží nad databází testovacího skautISu.
    \item Zdrojové soubory k~textu práce v~adresáři \texttt{\textbackslash bpBradac\_zdroj}.
    \item Testovací dotazník a~souhrnné výsledky testování v~adresáři \texttt{\textbackslash evaluation\_testing}.
\end{itemize}

\chapter{Náhledy implementovaných obrazovek}
\label{a:Screenshots}

\vspace{50pt}
\begin{figure}[!ht]
  \centering
  \RawFloats
    \begin{minipage}{.45\textwidth}
      \centering
      \includegraphics[width=\textwidth]{fithesis/resources/screenshots/final_screenshots/mainPageFinal.png}
      \captionsetup{labelformat=empty}
      \caption{Hlavní stránka agendy hodnocení kvality.}
    \end{minipage}\hfill
    \begin{minipage}{.45\textwidth}
      \centering
      \includegraphics[width=\textwidth]{fithesis/resources/screenshots/final_screenshots/searchResultFinal.png}
      \captionsetup{labelformat=empty}
      \caption{Výsledek vyhledávání celkových hodnocení.}
    \end{minipage}
\end{figure}

\begin{figure}[!ht]
  \centering
  \RawFloats
    \begin{minipage}{.45\textwidth}
      \centering
      \includegraphics[width=\textwidth]{fithesis/resources/screenshots/final_screenshots/detailFinal.png}
      \captionsetup{labelformat=empty}
      \caption{Detail celkového hodnocení.}
    \end{minipage}\hfill
    \begin{minipage}{.45\textwidth}
      \centering
      \includegraphics[width=\textwidth]{fithesis/resources/screenshots/final_screenshots/detailQuestionnaireFinal.png}
      \captionsetup{labelformat=empty}
      \caption{Dotazník celkového hodnocení.}
    \end{minipage}
\end{figure}

\begin{figure}[!ht]
  \centering
  \RawFloats
    \begin{minipage}{.45\textwidth}
      \centering
      \includegraphics[width=\textwidth]{fithesis/resources/screenshots/final_screenshots/createFinal.png}
      \captionsetup{labelformat=empty}
      \caption{Zakládání individuálního hodnocení.}
    \end{minipage}\hfill
    \begin{minipage}{.45\textwidth}
      \centering
      \includegraphics[width=\textwidth]{fithesis/resources/screenshots/final_screenshots/createQuestionnaireFinal.png}
      \captionsetup{labelformat=empty}
      \caption{Dotazník individuálního hodnocení.}
    \end{minipage}
\end{figure}

\end{document}
