Principy návrhu moderní webové aplikace

Liberec 2016

Principy návrhu moderní webové aplikace

Bakalářská práce

Studijní program: B6209 – Systémové inženýrství a informatika Studijní obor: 6209R021 – Manažerská informatika

Autor práce: Maxim Jeňko

Vedoucí práce: doc. Ing. Klára Antlová, Ph.D.

TECHNICKÁ UNIVERZITA V LIBERCI Ekonomická fakulta

Akademický rok: 2015/2016

, , , ^...,,,. ,

,

ZADANIBAKALARSKEPRACE

(PROJEKTU, UMĚLECKÉHO DÍLA, UMĚLECKÉHO VÝKONU)

Jméno a příjmení: Maxim J eňko

Osobní číslo: E13000027

Studijní program: 86209 Systémové inženýrství a informatika Studijní obor: Manažerská informatika

Název tématu: Principy návrhu moderní webové aplikace Zadávající katedra: Katedra informatiky

Zásady pro vyp raco vá ní:

1. Současné trendy v oblasti návrhů webových aplikací 2. Případová studie - propagace produktů a služeb 3. Návrh metrik hodnocení úspěšnosti navržené aplikace 4. Vyhodnocení návrhu aplikace a podněty pro její zlepšení

Rozsah grafických prací:

Rozsah pracovní zprávy: 30 normostran Forma zpracování bakalářské práce: tištěná/ elektronická Seznam odborné literatury:

PROCHÁZKA, David. SEO: cesta k propagaci vlastního webu. Praha: Grada, 2012. ISBN 978-80-247-4222-9.

UNHELKAR, Bhuvan. The Art of Agile Practice A Composite Approach for Projects and Organizations. Hoboken: CRC Press, 2012. ISBN 14-665-8869-1.

BEYER, Hugh. User-centered agile methods. San Rafael, Calif.: Morgan, 2010.

ISBN 16-084-5372-3.

Elektronická databáze článků ProQuest (knihovna. tul.cz).

Vedoucí bakalářské práce:

Konzultant bakalářské práce:

doc. Ing. Klára Antlová, Ph.O.

Katedra informatiky Ing. Lucie Melounová VIGOUR a. s. Praha

Datum zadání bakalářské práce: 31. října 2015 Termín odevzdání bakalářské práce: 31. května 2017

doc. Ing. Miroslav Žižka, Ph.D. děkan

V Liberci dne 31. října 2015

doc. Ing. Jan Skrbek, Dr.

vedoucí katedry

Prohlášení

Byl jsem seznámen s tím, že na mou bakalářskou práci se plně vztahuje zákon č.

121/2000 Sb., o právu autorském, zejména § 60 – školní dílo.

Beru na vědomí, že Technická univerzita v Liberci (TUL) nezasahuje do mých autorských práv užitím mé bakalářské práce pro vnitřní potřebu TUL.

Užiji-li bakalářskou práci nebo poskytnu-li licenci k jejímu využití, jsem si vědom povinnosti informovat o této skutečnosti TUL; v tomto případě má TUL právo ode mne požadovat úhradu nákladů, které vynaložila na vytvoření díla, až do jejich skutečné výše.

Bakalářskou práci jsem vypracoval samostatně s použitím uvedené literatury a na základě konzultací s vedoucím mé bakalářské práce a konzultantem.

Současně čestně prohlašuji, že tištěná verze práce se shoduje s elektronickou verzí, vloženou do IS STAG.

Datum:

Podpis:

Poděkování

Chtěl bych poděkovat doc. Ing. Kláře Antlové, Ph.D. za její trpělivost při vedení bakalářské práce a za ochotu, kterou prokázala při poskytování cenných rad. Dále bych chtěl poděkovat Ing. Lucii Melounové za její trpělivost, kterou prokázala při učení mě novým věcem.

Anotace

Cílem práce na téma „Principy návrhu moderní webové aplikace“ je navržení metrik hodnocení úspěšnosti webové aplikace a následné aplikování daných metrik na již konkrétní aplikaci +4U Square na jejímž vývoji se autor podílel při výkonu roční praxe ve společnosti Unicorn a.s na pozici uuApp Designer. V úvodu práce jsou popisovány aktuálně nejčastěji využívané technologie pro vývoj webových aplikací. Dále jsou analyzovány některé unikátní prvky využívané k vývoji webových aplikací společností Unicorn. Ve druhé části práce následuje zhodnocení vyvíjené webové aplikace +4U Square, na které se autor přímo podílel. Analýza aplikace obsahuje detailní popis dodržovaných postupů při vývoji aplikace včetně všech jeho fází. V dalších částech jsou navrženy metriky pro hodnocení úspěšnosti webových aplikací a tyto metriky autor následně využity ke zhodnocení finální podoby aplikace.

Klíčová slova

Internet, marketing, reklama, AdWords, Plus4u.net, Unicorn, Metriky hodnocení, Webová aplikace, +4U Square

Annotation

The design principles of modern web applications

The purpose of the Bachelor thesis is to create metrics for evaluating success of a web application and immediate use of these metrics on a +4U Square application on which development the author of this thesis participated while on internship in the company Unicorn a.s. on a uuApps Designer position. Newest trends and common technology in web application development are analyzed and described at the beginning of the work and author explains some of the unique web application development principles and ideas used in Unicorn. In the second part of the thesis the author evaluates all the parts of the development process of the +4U Square web application. The analysis of the final app is very detailed. In the last part of the work there are created metrics for evaluating and measuring success of web applications. These metrics are used to evaluate the +4U Square application.

Key Words

internet, marketing, advertisement, AdWords, Plus4u.net, Unicorn, evaluation metrics, web application, +4U Square

Obsah

1 Současné trendy v oblasti návrhů webových aplikací ... 7

1.1 Definice webové aplikace ... 8

1.2 Vývoj webových aplikací ... 9

1.3 Dostupné technologie ... 10

1.3.1 Front-end ... 11

1.3.2 Back-end ... 14

1.4 Vývojová prostředí... 16

1.5 Očekávání uživatelů ... 16

1.6 Zabezpečení ... 17

1.6.1 Alternativní scénáře ... 17

1.7 Databáze ... 18

1.7.1 Nástroje ... 18

1.8 Uživatelská práva ... 18

1.9 uuBML ... 18

1.9.1 uuBML Ikony ... 19

1.9.2 uuBML Stavy ... 21

2 Případová studie – propagace produktů a služeb... 22

2.1 +4U Square ... 22

2.2 Základní koncept ... 22

2.3 Propagace produktů a služeb ... 22

2.4 Požadované funkčnosti ... 23

2.5 Diagramy ... 23

2.5.1 Produktový pohled aplikace +4U Square ... 24

2.5.2 Případ užití – Create Square ... 25

2.5.3 Případ užití – Register Client ... 26

2.6 Specifika projektu ... 27

2.7 Plán vývoje ... 27

2.7.1 Specifikace cílů ... 27

2.7.2 Specifikace požadavků. ... 27

2.7.3 Návrh ... 28

2.7.4 Vývoj ... 28

2.7.5 Implementace ... 29

2.7.6 Testování ... 29

2.7.7 Zkušební provoz ... 29

2.7.8 Provoz a údržba ... 30

2.8 Zhodnocení ... 30

3 Návrh metrik hodnocení úspěšnosti navržené aplikace ... 32

3.1 Vývoj ... 32

3.2 Implementace ... 33

3.3 Produkce ... 33

4 Vyhodnocení návrhu aplikace a podněty pro její zlepšení ... 34

4.1 Předpoklady úspěšné aplikace ... 34

4.2 Srovnání aplikace s konkurencí ... 34

4.2.1 Google AdWords ... 34

4.3 Návrhy ke zlepšení ... 35

4.4 Zhodnocení ... 36

5 Literatura ... 38

Seznam obrázků

Obrázek 1: Příklad rozložení stránky pomocí nových HTML5 tagů ... 12

Obrázek 2: Různá zobrazení responzivní stránky na různých zařízeních ... 13

Obrázek 3: Příklady ikon používaných v uuBML ... 20

Obrázek 4: Příklady stavů artefaktu v uuBML ... 21

Obrázek 5: Produktový pohled aplikace +4U Square ... 24

Obrázek 6: Diagram případu užití Create Square ... 25

Obrázek 7: Diagram případu užití Register Client ... 26

Seznam ukázek kódu

Seznam zkratek

CGI Common Gateway Interface

HTML HyperText Markup Language

JVM Java Virtual Machine

DOM Document Object Model

W3C World Wide Web Consortium

DHTML dynamické HTML

CSS Cascading Style Sheets

NCSA National Center for Supercomputer Applications API Application Programming Interface

XML Extensible Markup Language

XHTML Extensible Hypertext Markup Language SEO Search Engine Optimization

ASP Active Server Pages

PHP Hypertext Preprocessor

IDE Integrated Development Environment WYSIWYG What you see is what you get

GPL General Public License SQL Structured Query Language

uuBML Unicorn Universe Business Modelling Language RUP Rational Unified Process

PPC Pay Per Click

BEM Business Environment Management SDLC Systems Development Life Cycle

GUI Graphical User Interface

SASS Syntactically Awesome Style Sheets

HLC High Quality Content

7

Úvod

Tématem práce jsou principy návrhu moderní webové aplikace. Tyto principy autor na počátku práce detailněji popisuje a věnuje se každé technologii zvlášť. Současná situaci na poli webových technologií se rychle vyvíjí a většina společností specializující se na vývoj webových aplikací nestíhá držet krok s rychlostí pokroku. Každý rok jsou vyvinuty nové technologie, které překonávají své předchůdce jak ve výkonu tak i uživatelské přívětivosti.

Ve druhé části je detailně analyzována aplikace +4U Square, na jejímž vývoji se autor podílel jako stážista na pozici uuApp Designer. Všechny dílčí celky vývoje aplikace jsou analyzovány a následně dle stanovených metrik slovně ohodnoceny.

V další části jsou navrženy metriky pro hodnocení úspěšnosti webových aplikací, které autor následně použije na aplikaci +4U Square.

8

1 Současné trendy v oblasti návrhů webových aplikací

V této části jsou popisovány technologie nejčastěji používané k vývoji webových aplikací spolu s popisem velmi atraktivních nových trendů. Informace jsou čerpány z ověřených zdrojů, které autor považoval za nejvhodnější v rámci dané problematiky.

1.1 Literární rešerše

V článku s názvem „Computers in Human Behavior“ od autorů Abubaker Shaouf, Kevin Lü a Xiaoying Li je detailně zkoumán vlil vizuální stránky internetových reklam na rozhodování zákazníka při nákupu zboží a služeb v rámci integrovaného modelu. Autoři přišli s devíti teoriemi ohledně vlivu, které následně pomocí dotazníků testovali. Testovací soubor čítal 316 uživatelů internetu. Autoři přišli se závěry, které naznačují rozdíly mezi vnímání internetových reklam u obou pohlaví. Muži tráví méně času brouzdáním po internetových stránkách a většinou se vyhýbají jakýmkoliv formám reklam. Ženy naopak často prohlíží celé stránky a je zde tedy velký potenciál pro zaujetí jejich pozornosti internetovou reklamou. Mezi další výsledky pozorování patří zvýšený zájem o reklamy v levé části internetových stránek u mužů, kdežto ženy pravděpodobněji kliknou na reklamu umístěnou v pravé části stránky.

Ve své disertační práci s názvem Unicorn Enterprise System Powered Company, Vladimír Kovář popisuje platformu a digitální stavebnici Unicorn Universe spolu s metodikou Unicorn Universe Process, na které je tato platforma založena. Práce obsahuje několik příkladů aplikování této metodiky v praxi spolu s dalšími alegoriemi.

1.2 Definice webové aplikace

Jedná se o aplikace poskytované uživatelům skrze všudypřítomnou počítačovou síť – internet, popřípadě ve vnitropodnikovém prostředí pomocí jeho obdoby – intranetu. Za nevídaný nárůst na popularitě může rozmach vysokorychlostního internetu a následný pokles potřeby udržovat osobní data na lokálním počítači, popřípadě lokálních uložištích.

Nesmírnou výhodou webových aplikací je využívání webového prohlížeče jako klienta, který se pak nazývá klientem tenkým, jelikož není nutné, aby znal logiku aplikací.

9 Webové aplikace jsou často používány k implementaci internetových obchodů a blogů, emailových služeb a v neposlední řadě ve vnitropodnikovém prostředí jako informační systém řídící běh malých firem i nadnárodních společností.

Mezi jednu z výhod oproti lokálně uloženému software patří schopnost aktualizace a správy aplikace bez nutnosti instalace nové verzi na všechna zařízení, jejichž počet může řádově dosahovat i desetitisíc.

Další nesmírnou výhodou webových aplikací je možnost pracovat bez ohledu na operační systém nainstalovaný na straně klientského počítače.

Při vývoji webových aplikací se v praxi nejčastěji uplatňuje tzv. třívrstvá architektura, která sestává z vrstvy prezenční, aplikační a datové.

Prezenční vrstva je jako jediná viditelná uživateli. Zajišťuje vstup uživatelů ve formě formulářů a prezentaci výsledků jako odezvu formuláře a za doprovodu animací i přegenerování stránky. Aplikační vrstva zajišťuje výpočty a operace prováděné mezi požadavky a daty. Datová vrstva pak zajišťuje práci s daty, systémem řízení báze dat, mimo jiné integritu a audit dat.

1.3 Vývoj webových aplikací

Ve svých počátcích nebyly webové aplikaci nic víc než pár řádků o firmě a nanejvýše se pyšnily formulářem. Obrázky byly náročné na zpracování a na internetu se jich mnoho neobjevovalo. S rostoucím počtem internetových uživatelů a několikanásobně rychlejšímu a stabilnějšímu internetovému připojení vznikl prostor pro komplexnější webové stránky a konečně i pro webové aplikace.

Mezi prvními technologickými trendy byly CGI skripty, které je možné psát v několika jazycích a které uměly základní komunikaci s databází, např. přidávání, modifikace a odebírání údajů spolu s její interpretací koncovému uživateli. CGI má jeden velký bezpečností nedostatek ve formě spouštění programů přímo v systému uživatele, jenž při špatně navrženém kódu mohl způsobit kritické chyby či umožnění přístupu do systému klienta nežádaným osobám.

10 S příchodem Javy se objevila možnost vytvářet dynamický obsah webových stránek pomocí tzv. apletů. Aplety jsou objemově velmi nenáročné aplikace, které jsou uloženy v těle HTML stránky a k běhu se využíval JVM. Jelikož Java neumožňuje čtení a zápis do souboru spolu s nemožností načítání knihoven, při svém příchodu nebyly aplety velmi populární. Na popularitě ovšem rychle nabyl jejich konkurent – JavaScript.

Jednalo se o nejúčinnější nástroj vývoje webových aplikací a dynamického obsahu při svém vzniku. S pomocí JavaScriptu vznikl DOM, jenž představuje objektově orientovanou reprezentaci webové stránky do stromové struktury a možnost úpravy této struktury pomocí skriptovací jazyka. DOM se rychle stal standardem W3C.

Velká volnost v návrhu skriptů ovlivňující obsah stránky má však silná bezpečností rizika, na které JavaScript v dnešní době doplácí a rychle ztrácí na popularitě na úkor bezpečnějších skriptovacích jazyků – např. Ruby. Uživatelé často volí možnost úplně zakázat JavaScript na svém prohlížeči aby předešli stažení nežádoucího software či ohrožení svých osobních údajů.

Silnou konkurencí za doby svého vzniku byla technologie od společnosti Macromedia (dnes již ve vlastnictví společnosti Adobe) s označením Flash. Jedná se o technologií převážně využívanou k vývoji počítačových her, které jsou spouštěny z prohlížeče a v neposlední řadě grafickému návrhu webových stránek a aplikací s využitím skriptovacího jazyka Action Script. Silnou nevýhodou stejně jako u apletů je nutnost stáhnout si Flash aplikaci stáhnout do svého osobního počítače a následně ji v přehrávači Flash Player spustit. Další nevýhodou byla nutnost zakoupení vývojového prostředí k editaci kódu.

Rozvoj internetu šel ruku v ruce s rozvojem webových technologií a internetových prohlížečů. Velké oblibě dostál DHTML jenž kombinovalo HTML a kaskádové styly, JavaScript a DOM. Možnost měnit obsah webu dynamicky za běhu byla zpřístupněna vývojářům s příchodem prohlížečů Netscape 4 a Internet Explorer 4. Toto vedlo ke striktnímu oddělení logické struktury webových aplikací a vizuálních specifikací uváděných v CSS souborech.

1.4 Dostupné technologie

V následujících kapitolách, rozděleno na Front-end část (obsah zobrazující se koncovým uživatelům) a back-end, (Serverová část aplikací a business logika, část skrytá uživatelům)

11 je rozepsáno několik předních technologií používaných k návrhu, analýze a implementaci webových aplikací.

1.4.1 Front-end

Jedná se o webové technologie – programovací jazyky, které se starají o zobrazení obsahu již koncovému uživateli. Při vytváření grafické stránky webových aplikací hrají zásadní roli zejména kaskádové styly CSS 3 a HTML.

1.4.1.1 HTML 5

Jedná se o nejnovější verzi ze série značkovacích jazyků HTML, využívaných defaultně k tvorbě webových stránek. Mezi hlavní výhody oproti svým předchůdcům patří možnost přehrávání médií přímo v prohlížeči za pomoci nových tagů <audio> a <video> a to i bez nutnosti neustálého připojení k internetu ve formě offline webových aplikací a relační databáze s podporou transakcí.

Jazyk HTML byl navržen v roce 1990 ve spolupráci Tim Berners-Lee a Robert Caillau.

V roce 1991 organizace NCSA najala Marca Andreessena a Erica Blinu k vytvoření jednoho z prvních prohlížečů, Mosaic. Prohlížeč s velkým úspěchem dokončen v roce 1993 pro počítače IBM a Macintosh. Jednalo se o úplně první prohlížeč s grafickým uživatelským rozhraním.

Vývoj jazyka byl ovlivněn vývojem webových prohlížečů, které měli zpětně vliv na strukturu a funkčnosti HTML jazyka.

S novou verzí přišli i nové sémantické párové tagy, jako například <header>, <footer>,

<article>, nav a <section>. V obrázku níže je graficky znázorněn layout responzivního návrhu pomocí nových HTML 5 tagů.

Mezi další novinky patří zjednodušení zápisů doctype, kódování stránky a javascriptem dostupná API na geolokaci, drag & drop funkce.

12 Obrázek 1: Příklad rozložení stránky pomocí nových HTML5 tagů

Zdroj: http://www.tvorba-internetovych-stranek.cz/blog-reader/items/seo-a-html-5.php 1.4.1.2 CSS 3

Jedná se o třetí verzi kaskádových stylů – jazyk popisující způsob zobrazení elementů na webových stránkách psaných v jazycích HTML, XML nebo XHTML.

Autorem prvotního návrhu je Håkon Wium Lie a byl navržen organizací specializující se na standardy – W3C. Umožňuje návrhářům a designérům oddělit vzhled dokumentu od jeho obsahu a struktury.

1.4.1.3 Responsivní design

Jedná se o přizpůsobení vzhledu celé stránky pro vícero zařízení. Z důvodu velkých rozdílů zobrazovacích ploch mobilních zařízení a smartphonů je třeba přizpůsobit obsah stránky všem těmto zařízením. Hlavními nástroji jsou flexibilní obrázky, které se přizpůsobují danému zařízení stejně dobře jako struktura obsahu. Dále pravidla stylování dokumentu - Media Queries, jenž přizpůsobují obsah v závislosti na šířce obrazovky zobrazovaného zařízení.

V roce 2010 překonal celosvětový prodej smartphonů prodej stolních počítačů a notebooků a v roce 2014 bylo přes mobilní zařízení připojeno k internetu více lidí než přes stolní počítač či notebook. Na internetu nastává nedostatek stránek s obsahem přizpůsobitelným právě

13 mobilním telefonům a tabletům. Je proto velmi důležité připravit responzivní stránky správně dle pravidel User Experience.

@media (max-width: 780px) and (min-width: 640px) { body {

background-color: blue;

} }

Ukázka kódu 1: Použití media query Zdroj: vlastní

Další velmi důležitá, avšak často opomíjená vlastnost responzivního webu je jeho rychlost.

Na mobilních zařízeních uživatelé většinou surfují na mobilním internetu, který často nedosahuje dostatečné rychlosti. Responzivní design dbá na to, aby se na takových zařízeních načítali komprimované obrázky, která nejsou náročná na datový přenos a načítání stránek na mobilních zařízeních je velmi rychlé a zároveň velmi přívětivé k datovým limitům telefonních operátorů.

Responzivní design je důležitý pro SEO a společnost Google uděluje bonusové body stránkám, které jsou responzivní a jsou umístěny výše ve výsledcích hledání.

Obrázek 2: Různá zobrazení responzivní stránky na různých zařízeních Zdroj: https://dzone.com/articles/jsf-22-html-5-support

14 1.4.2 Back-end

Stavební kameny všech výpočtů a klient-server-databáze komunikací. Jedná se část skrytou běžnému uživateli, kde je implementována business logika. V následujících kapitolách jsou rozepsané nejvyužívanější programovací jazyky, které jsou v nejnovějších trendech využívány. V čele s Ruby a Pythonem.

1.4.2.1 Ruby

Je jedním z nejpoužívanějších skriptovacích jazyků současnosti. Díky své jednoduché syntaxi a vysokému operačnímu výkonu dokáže plně konkurovat dříve známějším jazykům, jako je Python a Perl.

Mezi největší výhody patří snadno naučitelná syntaxe, dynamické datové typy, plná podpora objektově orientovaného programování a například i absence nechvalně známých středníků na konci řádku. V současnosti je Ruby využíváno hlavně v podobě Ruby on Rails frameworku.

Ruby on Rails je framework pro vývoj webových aplikací využívající napojení na databázi s architekturou model-view-controller. Tato architektura odděluje zobrazení grafického rozhraní aplikace (view) od části zodpovědné za čtení, modifikace a ukládání dat (model) a části reagující na vstupy od uživatele a následné zobrazení výstupů (controller).

1.4.2.2 Python

Jedná se o vysokoúrovňový skriptovací jazyk, který nabízí velmi dynamickou kontrolu datových typů. Podporuje programovací paradigmata, například plné využití objektově orientovaného programování avšak i procedurální a funkcionální. Jedná se tedy o jazyk hybridní.

Jedná se o open source projekt, který zdarma nabízí instalační balíčky pro většinu operačních systému (Windows, Mac OS, Unix). Bývá považován za jeden z nejvhodnějších programovacích jazyků pro začátečníky.

1.4.2.3 C#

C# byl původně vyvinut pro platformu .NET Framework a jedná se o vysokoúrovňový a plně objektově orientovaný programovací jazyk. Využívá se k tvorbě webových aplikací a

15 stránek, formulářových aplikací na operačním systému Windows, vývoji počítačových her a k tvorbě databázových programů.

1.4.2.4 Java

Java je programovací jazyk s mnohaletou tradicí a několika rozvinutými frameworky.

Používá se k vývoji velkých webových aplikací, ale je vhodná i pro menší a střední weby.

K výkonosti programovacího jazyka napomáhá vysoká uživatelská základna, lineární náročnost používání prostředků, absence limitů vyjadřování prostředků a v neposlední řadě obrovská poptávka na trhu práce po Java programátorech. Podle Tiobe indexu je Java nejpoužívanější programovací jazyk na světě. Bezesporu hlavní výhodou je jeho přenositelnost. Díky tomu lze pomocí Javy řídit širokou škálu nejrůznější zařízení, například čipové karty, aplikace v mobilních telefonech, stolních počítačích a noteboocích.

Od roku 2007, kdy Sun Microsystems zpřístupnilo přes 2,5 milionů řádků kódu je Java distribuována jako open source.

1.4.2.5 JavaScript

Vznikl roku 1995 jako doplněk k jazykům HTML a Java. Autorem je Brendan Eich pod společností Netscape Communications. Jedná se o objektově orientovaný skriptovací jazyk, který se z drtivé většiny používá jako interpretovaný programovací jazyk pro vývoj webových stránek. Je často vkládán přímo do HTML kódu a slouží k ovládání nejrůznějších grafických elementů, přes tlačítka, posuvníky textová pole přes obrázky a videa za doprovodu animací a jiných efektů.

Slovo Java je v názvu pouze z marketingových důvodů a jeho syntaxe je zděděná od rodiny C/C++/Java.

Na rozdíl od ASP a PHP se programy v JavaScriptu inicializují až po stažení webové stránky na straně klienta. Z toho jsou patrná jistá bezpečností omezení, například nemožnost práce se soubory.

1.4.2.6 JQuery

JQuery je otevřený a svobodný software pod licencí MIT. Jedná se o javascriptovou knihovnu s velmi širokým spektrem podporovaných prohlížečů a klade důraz na interakci

16 HTML s JavaScriptem. Mezi hlavní výhody patří manipulace s CSS pomocí skriptu a výběru DOM elementů s následnými modifikacemi a okamžitou interpretaci uživateli.

1.4.2.7 Node.js

Jedná se o silný trend ve vývoji webových aplikací. Node.js je softwarový systém navržený k vývoji sofistikovaných webových aplikací a serverů. Jedná se o knihovnu z rodiny JavaScript, která využívá převážně model událostí reagující nejen na akci uživatele ale i mnohé systémové úkony. Jednou z hlavních výhod je velmi vysoká výpočetní rychlost.

1.5 Vývojová prostředí

Jedním z hlavních představitelů pro vývojová prostředí patří IntelliJ IDEA od společnosti JetBrains. Jedná se o jedno z nejpopulárnějších komerčně využívaných vývojových prostředí pro programovací jazyky Java a Groovy.

V oblasti IDE pro jazyk ruby je špičkou na trhu vývojové prostředí také od firmy JetBrains – RubyMine. Autor této bakalářské práce jej hodnotí jako nesmírně intuitivní a skvělou pomůcku pro začínající vývojáře i pro experty v obory, kteří využijí jeho nesčetných funkčností a bezkonkurenčního našeptávače.

Do nedávna dominantní postavou na poli Java IDE, byla open source vývojová platforma – Eclipse. Jedná se o nejvíce rozšiřitelné vývojové prostředí s nesmírným počtem pluginů, se kterými jeho četná komunita neustále přichází.

Třetím, neméně kvalitním nástrojem, je NetBeans sponzorován firmou Oracle Corporation.

Jedná se o zdarma distrubované integrované vývojové prostředí.

Mezi přední WYSIWYG editory patří Adobe DreamWeaver, který vývojářům a návrhářům umožňuje pracovat s jednotlivými elementy webové aplikace jako s interaktivními prvky, které lze například dynamicky přesouvat mezi elementy pouhým tahem myši. Vývojář tedy nemusí přepisovat velké množství kódu, pokud chce pouze přesunout grafický element na jiné místo.

1.6 Očekávání uživatelů

Uživatelé očekávají přesná data, přehledně seřazená do tabulek. Vše na responzivním webovém podkladu, který se dynamicky přizpůsobuje každému zařízení, na kterém je

17 zobrazen. Všechny ovládací prvky se musí přeskládat do takové podoby, která uživateli umožní celou aplikaci jednoduše ovládat na každém zařízení.

Nezbytnou součástí je jednoduché přihlášení do systému. Dnes je již nežádoucí uživateli opětovně zasílat potvrzovací emaily a hesla na telefon. Přihlašovací okno musí být lehce přístupné ze všech odkazů webové aplikace jak na stolních počítačích, tak i mobilních zařízeních a tabletech.

Webová aplikace musí rychle reagovat na akce uživatele. Aplikace proto využívají nejnovějších trendů ve vývoji, např. technologie React umožňuje uživateli zobrazit požadovaný obsah bez prodlevy a za doprovodu jednoduchých, ale esteticky přívětivých animací.

Samozřejmostí je věrohodnost zobrazovaných informací. Webová aplikace nesmí zobrazovat nepravdivé informace, které by případně mátly uživatele.

1.7 Zabezpečení

Každý den jsou okradeny tisíce uživatelů ať už prostřednictvím nepoctivých webových aplikací tak i pomocí internetem šířených virů, spamových emailů a především pomocí zneužití důvěry běžného uživatele.

Webové aplikace, do kterých uživatelé ukládají citlivá data, musí mít nejlepší možné zabezpečení. Velmi osvědčenou praktikou je nucení uživatele zadání silného bezpečnostního heslo s číslem, velkými a malými písmeny spolu se speciálními znaky. Přidání speciálního znaku do hesla uživatele může několikanásobně zvýšit ochranu jeho citlivých dat.

1.7.1 Alternativní scénáře

V dnešní době je nezbytností stavět každou aplikaci tak, aby počítala se všemi alternativními scénáři případů užití a jejich případnému zneužití. Zajištění ošetření vstupů a záměrně vyhledávat slabá místa tak, aby je následně bylo možné lehce opravovat a zacelovat. Nesmí nastat situace, kdy uživatel narazí na neznámé chování aplikace a systém zobrazí neočekávanou chybu. Je zapotřebí důkladné a účelné testování před předáním do provozního prostředí.

18

1.8 Databáze

Jedná se o základní stavební prvek v uchovávání dat a o nejjednodušší způsob strukturování většího množství dat. Všechny záznamy jsou mezi sebou propojeny pomocí klíčů a manipulovat s těmito daty lze pomocí specializovaného software.

1.8.1 Nástroje

MySQL je nejznámější databázový systém, jenž je považován za průkopníka dvojího licencování. Je dostupný jak v podobě bezplatné licence GPL, tak i v komerčně placené verzi. Jedná se o multiplatformní databázi, která operuje v jazyce SQL.

Mezi nejpoužívanější software pro správu databází patří aplikace s názvem phpMyAdmin.

Jedná se o nástroj napsaný v jazyce PHP a slouží ke správě databázových systému pomocí intuitivního webového rozhraní, což je nesmírná výhoda oproti konkurenčním aplikacím, jenž se musí instalovat na lokální počítač.

1.9 Uživatelská práva

Platforma Unicorn Universe je velmi specifická v přístupu k problematice poskytování přístupů svým uživatelům.

Přístupy se udělují přes tzv. přístupové role. Každý zaměstnanec má několik rolí a každá slouží k přístupu do některé z aplikací. Systém je realizován způsobem, který zamezuje přístup do dané části systému a všem jeho informacím, pokud uživatel není obsazen v příslušné roli.

V systému se každé kliknutí uživatele validuje vůči požadované roli, což vede ke značnému zpomalení celého systému, který se snaží zaujmout širokou veřejnost, avšak jedná se o silnou bezpečnostní bariéru vůči případným útokům.

1.10 uuBML

Unicorn Universe Business Modeling Language je nástroj pro komunikaci a vizuální modelování, který si pro své vlastní potřeby sama vyvinula společnost Unicorn.

Metodika RUP řadí vizuální modelování mezi šest dobrých praktik, které při svém správném použití zajistit efektivnější vývoj, propracovanější řízení kvality a lepší výsledky.

19 Vizuální modelování je způsob přemýšlení o problémech a jejich znázornění pomocí obrázků. Modely jsou užitečné pro pochopení problémů, jsou vhodným prostředkem pro komunikaci s ostatními zúčastněnými na projektu (uživatel, analytik, programátor, architekt, zákazník). Modelování podporuje lepší pochopení požadavků, čisté návrhy a lépe udržovatelný systém. Škála modelů je velmi široká, různé modely umožňují zachycení business procesů, věcnou problematiku i architekturu systému.

Některé chyby lze díky rychlé a názorné prezentaci obrázkem odhalit velmi snadno. Ve výsledku šetříme čas i peníze - co bychom jinak složitě a dlouze popisovali slovně, vyjádříme schématem zřejmým na první pohled. V oblasti výroby softwaru kreslíme růžné implemetační digramy, jejichž cílem je odhalit maximum podnětných skutečností a případných chyb spojených s daným procesem. Stejný princip platí všude, nejen při vývoji softwaru.

Pro vizuální modelování je potřeba standardizovat jazyk (formu, notaci, metamodel) a mít nástroj, ve kterém se bude modelovat.

V jazyce uuBML je komunikace zprostředkována pomocí schémat. Schémata jsou vytvářena z definovaných i blíže nedefinovaných objektů. Příkladem objektu, který není v původních šablonách uuBML definován, můžou být například fotografie členů vaší rodiny. Takové nedefinované objekty označujeme v jazyce uuBML jako UFO. Objekty definované jazykem uuBML jsou rozřazeny do vzorníků. Vzorník zpravidla obsahuje objekty z jedné ucelené oblasti.

Rozlišujeme různé typy objektů. Mezi základní definované objekty patří v jazyce uuBML ikony a spojovníky, neboť nesou jádro komunikovaného sdělení - ikony reprezentují popisované objekty (nebo jejich součásti), spojovníky pak představují vztahy mezi těmito objekty. Pomocí ostatních objektů zpřesňujeme své sdělení, rozvíjíme myšlenky, zdůrazňujeme to důležité.

1.10.1 uuBML Ikony

Ikony jsou v jazyce uuBML základním stavebním kamenem, pomocí nichž se ve schématech vyjadřujeme. Svým významem reprezentují konkrétní objekty (produkty, činnosti, pojmy, události, jejich součásti aj.), které popisujeme.

20 Obrázek 3: Příklady ikon používaných v uuBML

Zdroj: https://www.plus4u.net

Během vytváření schémat respektujeme zavedená pravidla. V jazyce uuBML existují jednak pravidla obecná, tedy všeobecně platná doporučení pro tvorbu blíže neurčených schémat. A pak se setkáváme s pravidly, které se vztahují ke konkrétním, specifickým typům schémat.

Například jak kreslit životní cykly artefaktů, jak analyzovat proces nebo jak popsat organizační strukturu podniku. Zavedená pravidla je dobré respektovat, neboť podporují srozumitelnost sdělení obsaženého ve schématu. Lidé si více rozumějí.

21 1.10.2 uuBML Stavy

Stavy jsou používány k přiblížení stavu objektu, který ikona reprezentuje, je-li to pro schéma důležité. Nesou symboly čísel, písmen abecedy a mnoha dalších specifických symbolů.

Obrázek 4: Příklady stavů artefaktu v uuBML

Zdroj: https://www.plus4u.net

Stavy mají důležité použití při modelování životních cyklů artefaktů. Podle metodiky Unicorn Universe Process se rozeznává 9 generických stavů u artefaktů a 8 generických stavů u aktivit. Je kladen důraz na dodržování těchto pravidel.

Cyklus artefaktu je započat tyrkysovou barvou stavu artefaktu, který je právě vytvořen v systému. Na vlastní práci s ním (s jeho obsahem) se teprve připravuje. Plánuje se další postup a shromažďují informace.

Aktivní, zelené stavy značí aktivní práci s artefaktem očekávaný průběh. Aktivní alternativní (žluté) stavy symbolizují nestandardní chování artefaktů nebo pochybnosti v zobrazovaných datech. Uživatelé ale pokračují s prací na artefaktu. Aktivní, červené problémové stavy značí závažný problém s artefaktem. Pasivní, fialové stavy značí stav, kdy byly práce a činnosti související s artefaktem dočasně pozastaveny.

Finální, modré stavy značí ukončení všech aktivit na artefaktu, který byl uzavřen předpokládaným a obvyklým způsobem. Šedé stavy se používají, pokud s daným objektem či artefaktem pracuje systém na pozadí, bez upozornění uživatele.

22

2 Případová studie – propagace produktů a služeb

V této části je analyzován reálně uskutečněný projekt, na jehož vzniku se autor podílel.

Aplikace drží název +4U Square a na vývoji se převážně podílela dnes již neexistující společnost USO APPS, jenž byla součástí Unicorn holdingu. Majitelem celého holdingu je Vladimír Kovář.

2.1 +4U Square

Aplikace se zaměřuje na propagaci produktů a služeb ve vnitropodnikovém prostředí společnosti Unicorn a všechny její aspekty jsou detailně rozepsány v následujících kapitolách.

2.2 Základní koncept

Cílem vývoje aplikace je poskytnutí společnosti Unicorn a službě Plus4U.net efektivní správu reklamních složek ve vnitropodnikovém prostředí. Sloužit k tomu má tzv. Client Page, což je místo, kam klienti budou umisťovat svou reklamu, která se pak s reklamou ostatních klientů bude zobrazovat na společném místě, tzv. Square Page. Na tomto tržišti se všechny reklamy klientů střetávají a potenciální zákazník si může vybrat z široké nabídky produktů a služeb. Tento způsob reklamy by značně ušetřil finanční prostředky vynaložené klienty za jiné formy propagace svých produktů a služeb. V případě úspěchu aplikace a využívání služby potenciálně až 70 000 uživateli, což je dosavadní množství uživatelů služby Plus4U.net, by se jednalo i o značné zefektivnění marketingových možností klientů.

2.3 Propagace produktů a služeb

Propagace produktů a služeb na internetu je zahrnuta v tzv. elektronickém marketingu, který zahrnuje veškeré marketingové aktivity a reklamy, které se umísťují na webové stránky.

Mezi nejúčinnější metody propagace produktů a služeb podniků, je snaha optimalizovat své stránky tak, aby je internetové vyhledávače umisťovali co nejvýše ve výsledcích hledání.

K tomuto účelu slouží soubor pravidel a technik SEO, pomocí kterého firmy mohou získat vyšších umístění.

23 Mezi oblíbené obchodní modely patří PPC. Tento způsob patří do metody affiliate marketingu. Princip spočívá v tom, že inzerent neplatí za každé zobrazení reklamy umístěné na webové stránce, ale platí až ve chvíli, kdy na reklamu klikl potencionální zákazník. Tento typ reklamy si klient může sám inzerent spravovat po registraci v PPC systému. Správu zprostředkovává webové rozhraní a v případě aplikace Google AdWords, firma poskytuje speciální software pro zjednodušenou obsluhu reklam v systému.

Kromě platby za kliknutí na inzerentovu reklamu lze platit i pomocí alternativních modelů.

Jedná se o modely typu CPT (cost per thousand), CPI (cost per impression), CPM (cost per mille), nebo například PPV (pay per view).

2.4 Požadovan é funkčnosti

Aplikace musí obsahovat několik standardních funkčností, které se sdílí napříč většinou aplikací vyvíjených platformě Unicorn Universe. Základem většiny aplikací je vlastní správa karet klientů, osob i organizací. Zřizování přístupů do aplikace zákazníkům je do jisté míry zautomatizovaný proces, při kterém stačí zákazníka obsadit do jedné z předem připravených rolí a systém obstará práva a přístup ke všem potřebným datům.

Zásadní požadovanou funkčností je správa tzv. „Client Page“, které slouží klientům k propagaci vlastních produktů a služeb uvnitř informačního systému společnosti Unicorn.

Dále správa tzv. Square Page, které slouží k promítání a střetávání všech vložených reklam klientů, možnost registrovat klienty a zajišťovat jim přístup na příslušné portály a zajistit všem pověřeným osobám přístupy.

2.5 Diagramy

Na produktovém pohledu aplikace +4U Square jsou zobrazeny základní stavební kameny, ze kterých se webová aplikace skládá. Zeleně jsou zobrazeny klíčové prvky, žlutou barvou jsou znázorněny prvky velmi důležité. Šedě a modře jsou graficky znázorněny méně významné, avšak stále základní aspekty finální aplikace.

Aplikace se skládá ze tří vrstev. Základní vrstvy +4U Square, BEM aplikace, jenž je součástí základní instalace a podpory +4U Contacts aplikace, jenž spravuje účty klientů, vývojového týmu a všech ostatních pracovníků skupiny Unicorn v systému.

Společnost Unicorn si vyvinula vlastní způsob zakreslování entit a vztahů do diagramů

24 V následujících dvou kapitolách autor rozepisuje vybrané případy užití, které jsou součástí aplikace +4U Square a tvoří nedílnou součást návrhu i implementace aplikace.

2.5.1 Produktový pohled aplikace +4U Square

Základem každého návrhu aplikace je detailně zpracovaný produktový pohled. Klíčovými artefakty aplikace +4U Square jsou zelené zakreslené Client Page a Square Page.

V diagramu je zobrazena spolupráce s dvěma dalšími aplikacemi, BEM a +4U Contacts.

Obrázek 5: Produktový pohled aplikace +4U Square Zdroj: https://www.plus4u.net

25 2.5.2 Případ užití – Create Square

Jedná se o stěžejní případ užití v celé aplikaci. Uživatel, který je obsazen v potřebné roli +4U Square Application Executives, spustí případ užití pomocí tlačítka „Create Square“ na artefaktu Application Control Panel, který může být pouze ve třech povolených stavech zakreslených v diagramu, a to zeleném – aktivním, oranžovém – alternativním aktivním a červeném – problémovém aktivním stavu.

Uživatel vyplní formulář se všemi detaily o Square, které se chystá vytvořit. Systém vytvoří základní operační jednotku pro celou aplikaci s parametry, které uživatel zadal na vstupu.

V této jednotce se nachází základní operační řídící panel, ze kterého uživatel může spouštět další funkčnosti, které aplikace nabízí. Dále je uživatel svou rolí přístupovou rolí obsazen do role Square Authority, která mu zajišťuje všechna potřebná práva na řídícím panelu.

Systém vytváří organizační jednotku se všemi složkami a rolemi na pozadí, tedy uživatel nemusí čekat na dokončení procesu vytváření a může pokračovat v jiných činnostech. O dokončení vytváření operačního prostoru uživatele informuje informační aktivita v systému, která se mu zobrazí v úkolovníku a přibyde mu ikonka v navigátoru na konkrétní Square Control Panel.

Obrázek 6: Diagram případu užití Create Square Zdroj: https://www.plus4u.net

26 2.5.3 Případ užití – Register Client

Jedná se o jeden z hlavních případů užití, který uživatel může vykonat v již vytvořené operační jednotce. Daný případ užití se spouští z tlačítka „Register Client“ na Square Control Panelu. Předpokladem pro úspěšné zobrazení formuláře, je obsazení uživatele v roli Square Executives. Pokud je uživatel obsazen v jiných rolích, systém mu nedovolí formulář spustit a zobrazí mu chybovou hlášku, ve kterém je mu vysvětleno, proč nemůže daný formulář spustit.

V případě splnění dodatečných vstupních podmínek ve formě správného stavu artefaktu Square Control Panel, je uživateli zobrazen formulář, ve kterém vybere klienta k registraci do Square. Přímo ve formuláři je možné vytvořit i zcela nového klienta, který se automaticky zaregistruje po dokončení procesu vytváření uživateli do jeho Square.

Systém po potvrzení formuláře vytvoří klientskou organizační jednotku se všemi příslušnými složkami a rolemi popsanými v obrázku níže. Do daných rolí je sám uživatel obsazen svou rolí a do zbylých skupinových rolí jsou obsazené role klienta z aplikace Square BEM. Všem klientským rolím obsayeným do klientské Square jednotky je přidána ikonka v navigátoru na daný Client Portal a jsou informování o registraci informační aktivitou v systému, která se jim zobrazí v jejich úkolovníku.

Obrázek 7: Diagram případu užití Register Client

Zdroj: https://www.plus4u.net

27

2.6 Specifika projektu

Aplikace vyvíjená na platformě Unicorn Universe, která bude konkurenceschopná a bude se podílet na zviditelnění služby Plus4U i samotné společnosti Unicorn.

2.7 Plán vývoje

Před zahájením realizace vývoje každé vyvíjené aplikace, webu, informačního systému nebo i aktualizačního balíčku je důležité definovat jeho životní cyklus. Ten začíná zvážením, zdali je potřeba vůbec komponentu vytvářet, a končí ukončením provozu (více v dalších podkapitolách). Tento cyklus může být různě rozdělen do jednotlivých etap dle použité metodiky.

Velké množství metodik a tzv. standardních aplikací, které slouží jako kuchařky k návrhu nových aplikací. SDLC metodika spolu s ideologií ve firmě Unicorn – proces vývoje aplikace rozdělen do následujících osmi etap.

2.7.1 Specifikace cílů

Jedná se o první krok při plánování vývoje, ve kterém se rozhodne, zda je daná aplikace vůbec potřebná. Načrtnou se termíny odevzdání po etapách rozdělených na logicky členěné celky. Dohodnou se průběžné schůzky se zadavateli celé aplikace, po kterých následují termíny akceptace. Stanoví se počáteční rozpočet, průběžné kontrolní termíny, do kterých by měl vývojový tým vždy dodat jistou část aplikace. Naplánují se průběžné schůzky se zadavateli a složení vývojového týmu, přičemž je běžné v průběhu vývoje tuto sestavu měnit podle potřeb aplikace.

2.7.2 Specifikace požadavků.

V této fázi je již rozhodnuto, že aplikace je potřebná a bude vyvíjena. Připravuje se HLC celé aplikace, jenž obnáší všechny UC detailně rozepsané s návrhem stavů artefaktů, náčrt práv a organizační struktury celé aplikace. Celé HLC se umístí na burzu aplikací, kde o vývoj dané aplikace soutěží vývojové týmy. Burza aplikace funguje jako aukce, kde místo zvyšování nabídky jednotlivé vývojové týmy postupně přihazují nižší a nižší cenu, za kterou jsou ochotni danou aplikaci implementovat. Vývojový tým, který je ochoten aplikaci vyvinout za nejmenší cenu vítězí a daná aplikace je mu přidělena.

28 2.7.3 Návrh

V této fázi dochází k zahájení reálné tvorby aplikace. Veškeré práci na projektu předchází diskuze mezi spolupracovníky a klientem na postupu a množství funkcí, které by měla výsledná aplikace obsahovat. Často využívaným postupem je brainstorming. Součástí návrhu je volba vhodného programovacího jazyka, vývojového prostředí, databázového prostředí a rozdělení práce dle konkrétně zvolené metodiky a pracovní struktury. V případě vývoje aplikací ve společnosti Unicorn je metodika jasně daná a je zde malý prostor pro inovaci bez prvotní přizpůsobení platformy.

Je velice důležité, aby všechny dosavadní kroky byly realizovány s ohledem na zadané požadavky neboť nepředpokládané změny by mohly v dalších fázích způsobit nárůst pracnosti, časové náročnosti a tím i vznik více nákladů a nesplnění zakázky.

Prvním krokem vývojářů po seznámení se s projektem zpravidla bývá návrh databázových struktur a relací, tvorbou procedur a pohledů. Poté je teprve možné začít s vývojem samotného projektu, kdy je kladen maximální důraz na správnou funkčnost a uživatelskou přívětivost. Součástí toho je definování rozložení ovládacích prvků, tvorba formulářů a jsou určeny způsoby zobrazení požadovaných dat. Při vývoji se čerpá z připraveného API, a pokud je potřeba vytváří se i zcela nové pro požadavky aplikace. Pro případnou možnost integrace do dalších systémů vzniká administrační nástroje nebo redakční systém k řízení aplikace.

Zároveň se v této části začíná psát i podrobná dokumentace k celé aplikaci jak ze strany vývojářů (developerů) tak ze strany návrhářů (designérů).

2.7.4 Vývoj

Časově nejnáročnější část vývoje aplikace je samotný vývoj. Psaní obslužných skriptů, příprava grafické stránky a následné propojení s funkční stránkou. Testuje se většinou pouze interně na bázi kontrol základních scénářů a důkladnější testování se nechává na další fáze.

V této části se velmi obtížně implementují dodatečné požadavky klientů a jako ideální řešení se jeví dodatečné funkčnosti implementovat v dalších verzích aplikace. Při posunutí termínu a poskytnutí dodatečných finančních prostředků ze strany klienta je však možné dané požadavky zapracovat i v rámci prvotního vývoje.

29 2.7.5 Implementace

Nyní, kdy už je k dispozici ověřená funkční aplikace, lze začít s nasazováním u klienta v jeho testovacím prostředí, což zahrnuje doladění aplikace tak, aby její chod byl v přesném souladu s prostředím, v jakém bude fungovat. Nový systém je pomocí API integrován do dalších firemních subsystémů, se kterými bude komunikovat. Jsou doladěny datové přenosy a je optimalizována celková provozní náročnost aplikace.

Zároveň dochází k naplnění databáze testovacími daty, která mohou být buď vygenerována, nebo vytvořena konverzí z předchozího systému.

V této fázi už dochází k základnímu školení takzvaných klíčových uživatelů, kteří budou zodpovědní za testování. V případě vývoje v prostředí Unicorn Universe jsou daní uživatelé nazývaní Chief Testery.

2.7.6 Testování

Po nasazení systému může začít jeho testování, kdy dochází k postupnému ověřování všech jeho funkcí. Od testovacích uživatelů se očekává, že systém podrobí důkladné analýze, ve které kontrolují, zda systém odpovídá zadání a dodané dokumentaci. Zároveň se nad testovacími daty ověřují databázové struktury a integrace s dalšími systémy.

Dalším důležitou částí testování je podrobení zkoušce GUI aplikace a uživatelská přívětivost. Během testování uživatelé zadávají výstupy z testování do systému, kde se na ně mohou podívat designéři spolu s vývojáři ze zodpovědného vývojového týmu.

Vývojový tým postupně konzultuje jednotlivé připomínky se zadavatelem. Postupně se zapracovávají opravy a ocení se případné změny. Vše nad rámec původního návrhu musí zadavatel zaplatit.

2.7.7 Zkušební provoz

Vymezený časový úsek, ve kterém probíhá – souběžně s používáním systému – důkladný monitoring aplikace s cílem ověřit kompletní funkčnost a doladit finální připomínky.

Systém je používán maximálním množstvím uživatelů a provádí se zátěžové testy.

Podle původní zakázky nese původní vývojový tým stále zodpovědnost za případné chyby a musí se stále věnovat jejich opravám.

30 Po dokončení pilotního provozu následuje vyhodnocení, a pokud aplikace dostála svým předpokladům, následuje finální akceptace a systém je nasazen do plného provozu.

2.7.8 Provoz a údržba

Systém je nyní ve své finální podobě, která splňuje zadání, nebo je upraven podle potřeb zákazníka a je naplněn funkčnostmi stanovenými při návrhu aplikace. Zaměstnanci jsou proškoleni, umí systém samostatně ovládat (případně i spravovat) a zvládají zaškolit další zaměstnance.

Chod aplikace je pravidelně ověřován a udržován pomocí servisních balíčků nebo dodatečných modulů s cílem zajistit efektivní – a především bezpečný – provoz, který plně odpovídá cílům firmy.

Čím delší čas aplikace stráví v této fázi bez výrazných inovací a komplikací tím větší přínos přinese aplikace firma v dlouhodobém měřítku.

2.8 Zhodnocení

Zhodnocení celého vývoje a zkušeností, které při vývoji autor nasbíral. Podrobnějšímu zhodnocení návrhu aplikace se autor věnuje ve čtvrté kapitole.

Aplikace +4U Square ve své finální podobě zastává všech požadovaných funkčností, které zákazník požadoval a po grafické stránce odpovídá požadovaným představám.

Velice negativně však dopadl vývoj a implementace po časové stránce, kdy aplikace několikanásobně překročila limit stanovený na počátku vývoje. Celková odchylka od původního data dokončení vývoje činí přes šest měsíců a celkové překročení rozpočtu přesahuje jeden milion korun.

Za jednu z hlavních příčin tohoto selhání autor uvádí špatnou komunikace mezi vývojovým týmem a zákazníkem při zpracování nových změnových požadavků v aplikaci, ale i při předávání informací ve vnitřním kruhu vývojového týmu.

Počáteční vize a potenciál aplikace jednoznačně stál za riziko dlouhodobého vývoje tak náročné aplikace, avšak zapojení několika nových zaměstnanců i s absolvováním měsíčního školení do vývoje a odchod vývojářů seniorů v polovině vývoje se prokázal jako velmi nešťastný krok. Již před dokončením aplikace se s jistotou dalo říci, že aplikace je již

31 zastaralá a bude mít jen velmi malé uplatnění na trhu. Nevyhnutelně směřující k odstavení z ostrého provozu krátce po uvedení, jelikož údržba a případná aktualizace se jeví finančně velice nákladné a firma přehodnotila hodnotu dané aplikace na velmi neprofitabilní.

32

3 N ávrh metrik hodnocení úspěšnosti navržené aplikace

V následujících kapitolách jsou navrženy metriky na hodnocení úspěšnosti aplikace. Do hodnocení jsou započteny všechny fáze vývoje aplikace i celkový výsledek nejen z hlediska profitu ale i dlouhodobé konkurenceschopnosti a následování nejnovější trendů při vývoji aplikace.

3.1 Vývoj

Časová náročnost vývoje – aplikace se nesmí vyvíjet déle než 1 rok. V takovém případě je aplikace při vydání již zastaralá.

Splnění, nebo nesplnění požadovaných termínů. Zda aplikace následuje nejnovější trendy ve vývoji webových aplikací a použití nejnovější vývojové nástroje.

Hodnotícím kritériem je i množství lidí podílejících se na vývoji aplikace a efektivita sdílení informací mezi nimi.

Na vývoji aplikace se podílely dva vývojové týmy a vývoj trval osm měsíců. Původní plán počítal s časovou náročností dvou až tří měsíců. Finanční náročnost se z původního rozpočtu 400 000 Kč vyšplhala na velmi vysokých 1 500 000 Kč.

Z hlediska využití nejnovějších trendů při vývoji aplikace lze zpětně říci, že vývojový tým využíval nejnovějších dostupných technologií při vývoji, které jim platforma využívat umožňovala. Vývojový tým v průběhu vývoje pracoval s nástroji pomocí firmou zakoupené licence společnosti jQWidgets, která nabízí velké množství hotových a velmi dobře optimalizovatelných utilit pro vývoj webových aplikací, jako např. datové tabulky, tooltipy, textové editory, navigace a jiné.

Velkým omezením při použití těchto technologií ovšem byla platforma Unicorn Universe, která byla velmi nekompatibilní s jQuery utilitami i jinými JavaScript aplikacemi, které se vývojový tým snažil zaimplementovat v průběhu. Tato rozsáhlá platforma značně komplikovala implementaci nových technologií.

33

3.2 Implementace

Náročnost implementace webové aplikace do již zavedeného systému. Zda je potřeba zaškolovat veškerý personál a uživatele o provozu dané aplikace.

Aplikace se distribuuje ve formě instalačního balíčku, který zákazník pouze nainstaluje do svého teritoria (úložný a pracovní prostor). Jedná se o velmi snadnou implementaci do již rozsáhlého informačního systému.

Kvůli náročnosti dané aplikace je nezbytné zaškolovat personál v používané aplikace +4U Square a při vydání aktualizačních balíčků je nezbytné tento proces opakovat.

3.3 Produkce

Testování širokým spektrem uživatelů a získávání zpětné vazby. Názory odborníků.

Uchycení na trhu a konkurenceschopnost. Možnost hotfixů. Jedná se o jednu z výhod webových aplikací, kdy se nemusí aktualizovat všechna zařízení, kde by byla naše aplikace nainstalovaná avšak pouze server, na kterém je naše aplikace uložena.

Důležitým faktorem je následný monitoring chování aplikace, při kterém se hodnotí zejména stabilita aplikace, tj. zda nedochází k neočekávaným chybám a zda aplikace dělá co má. Do hodnocení je započtena i stabilita serveru, který musí zajistit dostupnost aplikace 24 hodin denně.

Neméně významným kritériem je rozšířená podpora aplikace, ve které se reaguje na zpětnou vazbu od uživatelů aplikace a přidávají se různá přizpůsobení menšího i většího dopadu.

34

4 Vyhodnocení návrhu aplikace a podněty pro její zlepšení

V této a následujících kapitolách je vyhodnoceno několik aspektů návrhu a vývoje aplikace +4U Square. V potaz je brána firemní know-how, rozpočet, komunikace vývojového týmu, doba implementace a další faktory.

4.1 Předpoklady úspěšné aplikace

Klíčovým faktorem úspěšné aplikace je efektivní komunikace mezi členy vývojového týmu a zákazníkem. Efektivní metody sdílení informací a lehce dostupné firemní know-how z předchozích vyvíjených aplikací. Dalším předpokladem je vysoce proškolený a zkušený vývojový tým, který dokáže rychle a efektivně zavést do provozu nové zaměstnance.

Velmi důležitým faktorem ve vývoji úspěšné aplikace je využití nejnovějších trendů v oblasti vývoji a návrhu webových aplikací. V současnosti je jedním z hlavních trendů jsou CSS preprocesory.

Největší potenciál jeví SASS (Syntactically Awesome Style Sheets) preprocesor s několika dedikovanými knihovnami. Nejznámější knihovnou z řady SASS je Motion UI, která se používá ke snadnému vytváření animací a CSS přechodů.

4.2 Srovnání aplikace s konkurencí

Díky vývoji na platformě Unicorn Universe, která již disponuje mnohými vývojovými nástroji pro webové aplikace, se jedná o cenově velmi přijatelnou aplikaci. Náklady na vývoj aplikace +4U Square se vyšplhali ke zdánlivě vysokým 1 500 000 Kč, avšak v zahraničí se vývoj webové aplikace bez podpory již existující platformu může přesáhnout i 10 000 000 Kč.

4.2.1 Google AdWords

K porovnání můžeme zvolit aplikaci Google AdWords, která v roce 2012 přinesla společnosti Google a.s. zisk astronomických 43,7 miliard USD. Jedná se o aplikaci, která nechává klienty přihazovat na klíčová slova, která jsou spojena s jejich podnikáním. Čím více daná společnost na daná klíčová slova přihodí peněz, tím výše se jejich reklama, či

35 odkaz na jejich webové stránky objeví potenciálním zákazníkům ve výsledcích vyhledávání v Google vyhledávači.

Jedná se o velmi efektivní způsob, pro většinu středních a velkých firem, které tak mohou lehce ovlivnit návštěvnost své webové stránky na internetu. Klientům si stačí otevřít Google AdWords účet. K úspěšnosti aplikaci velmi přidává celková popularita a dominance Google vyhledávače na internetu, kdy 65% všech dotazů prochází právě přes Google Search vyhledávač.

4.3 Návrhy ke zlepšení

V této kapitole autor popisuje nejčastější chyby webových aplikací a potenciální možnosti jejich opravy.

Návrhy ke zlepšení pro aplikaci vyvíjenou na platformě se silnými restrikcemi se nacházejí jen těžko. Kvůli dodržování standardu ve vyvíjených aplikacích se návrháři musí držet poměrně striktního vizuálního standardu s velmi nízkým podílem barev na celkovém návrhu.

Barvy se standardně objevují pouze v potvrzujících tlačítkách a v navigaci mezi stránkami.

Aplikacím vyvíjeným pro Unicorn Universe platformu velice chybí podpora responzivního designu. Systém se neumí zobrazovat správně na všech mobilních zařízeních, či tabletech.

V dnešní době je responzivní design stavebním pilířem všech úspěšných webových aplikacích a drtivá většina zákazníků dává přednost responzivním webovým aplikacím před její statickou alternativou.

Dalším velkým lákadlem dnešních zákazníků jsou mobilní aplikace, které doprovázejí a doplňují aplikace webové. Mobilní aplikace jsou velmi užitečné při zobrazování novinek v informačním systému pomocí notifikací na mobilním telefonu, které uživatele odkáží do mobilní aplikace či přímo do samotného informačního systému s webovou aplikací. Další uplatnění by mohli mobilní aplikace nalézt ve správě účtů, avšak i ve vykonávání stěžejních funkčností webové aplikace.

Jedním z velkých omezení aplikací na platformě Unicorn Universe je kontrola práv uživatele při každém kliknutí na odkaz či spuštění Use Case, což způsobuje velmi dlouhou odezvu serveru na akci uživatele. Každé kliknutí může podle typu spuštěného případu užití trvat mezi 2s – 10s. V dnešní době, kdy téměř každý člověk má chytrý telefon s podporou

36 mobilních aplikací, je tato odezva velmi odrazující pro potenciální klienty. Řešením by mohlo být ukládání přístupových práv a seznamu povolených funkčností do Cache prohlížeče, aby se předešlo vysokým prodlevám.

4.4 Zhodnocení

Aplikace +4U Square jeví jen velmi malý potenciál pro úspěch na trhu s webovými aplikacemi zaměřující se na propagaci produktů a služeb. Autor hodnotí velmi negativně dodržované postupy při vývoji a komunikaci vývojového týmu se zákazníkem, který často v průběhu vývoje navrhoval nové funkčnosti, které by vyvíjená aplikace měla obsahovat, avšak odmítal dané změny od původního plánu financovat a vývojovému týmu nezbylo nic jiného, než dané požadavky zapracovat i za cenu překročení časového a finančního rozpočtu.

Vývoj aplikace probíhal po částech, kdy každý týden musel vývojový tým prezentovat dosažený pokrok na prezentačních schůzkách s klientem, kde se po prezentaci aktuálního stavu projektu dohodl další postup vývoje a množství funkcí, které musí vývojový tým stihnout naimplementovat do další schůzky včetně funkčností, které případně do posledního termínu nestihl. Tento systém hodnotí autor velice pozitivně v případě, že se vývojový tým může plně věnovat dané aplikaci a termíny jsou tedy motivací k podávání co nejvyšších výkonů.

Problém nastává, kdy vývojový tým pracuje na několika projektech současně a nestíhá dodržovat nasmlouvané termíny a dodávat spektrum funkčností požadované ve vývojovém plánu. Zákazníkovi případné připomínky a změnové požadavky situaci nijak neulehčují a vývojové týmy často přestávají po několika schůzkách stíhat stanovené termíny a vzniká tedy vysoký tlak na jednotlivé členy týmu.

Výsledná aplikace má velmi neatraktivní vzhled a pro dnešního potenciálního klienta je vzhled velmi silným lákadlem. Absence výraznějšího barevného ladění spolu s chybějícím responzivním designem velmi sráží celkový potenciál aplikace.

Mezi silné nedostatky patří i odezva celé aplikace na akci uživatele, který může čekat i 15 minut na vytvoření organizační jednotky, která je klíčová pro správu a fungování celé aplikace.

37

Závěr

Počet internetových uživatelů v posledních letech několikanásobně vzrostl a s tím i potenciál pro propagování produktů a služeb na internetových stránkách.

Práce se v úvodu zabývá rozborem jednotlivých technologií používaných při vývoji webových aplikací spolu s analýzou nejnovějších trendů, které se v době psaní této práce objevují. V této části jsou popsány i postupy specifické při vývoji webových aplikací společností Unicorn, kde se autor podílel na vývoji aplikace +4U Square.

Následující kapitola se věnuje návrhu metrik hodnocení úspěšnosti webových aplikací, kdy se autor zaměřuje na dodržení určitých kritérií, např. do jaké míry se dodržely stanovené termíny spolu s rozpočtem nebo komunikaci vývojového týmu se zákazníkem.

Tyto metriky jsou následně aplikovány na zhodnocení finální podoby aplikace +4U Square spolu se srovnáním s konkurencí na webových aplikací sloužících k propagaci produktů a služeb.

I přes svůj vysoký potenciál, aplikace má jen velmi malý potenciál proniknout mimo vnitropodnikové prostředí a být distribuována a nabízena široké veřejnosti. Hlavním problémem při vývoji aplikace byla komunikace vývojového týmu se zákazníkem a velké množství změnových požadavků v průběhu implementace. Aplikace nebyla dokončena v původně stanoveném časovém termínu a vysoce překročila původní rozpočet.

38

Literatura

PROCHÁZKA, David. SEO: cesta k propagaci vlastního webu. 1. vyd. Praha: Grada, 2012, 144 s. Průvodce (Grada). ISBN 978-80-247-4222-9

BHUVAN UNHELKAR. The Art of Agile Practice A Composite Approach for Projects and Organizations. Hoboken: CRC Press, 2012. ISBN 14-665-8869-1

HUGH BEYER. User-centered agile methods. San Rafael, Calif.: Morgan, 2010. ISBN 16- 084-5372-3

KOVÁŘ, V., et al. Unicorn ES PoweredCompany - Management. 1. Revidované vyd.

Praha: UnicornCollege, 2009. ISBN 978-80-87349-01-4

SHAOUF, Abubaker, Kevin LÜ a Xiaoying LI. Computers in Human Behavior: The effect of web advertising visual design on online purchase intention: An examination across gender. ScienceDirect [online]. 2016 [cit. 2016-05-01]. ISSN 0747-5632. Dostupné z:

www.elsevier.com/locate/comphumbeh

Ruby on Rails [online]. [cit. 2016-03-19]. Dostupné z: http://weblog.rubyonrails.org/

Python [online]. [cit. 2016-03-21]. Dostupné z: https://www.python.org/

Úvod do profese [online]. 2016 [cit. 2016-05-06]. Dostupné z:

http://blog.zvestov.cz/item/174

Tech Republic [online]. [cit. 2016-03-21]. Dostupné z:

http://www.techrepublic.com/blog/10-things/-10-ways-developers-can-meet-user- expectations-and-ease-frustrations/

PHP Fashion [online]. [cit. 2016-04-27]. Dostupné z: https://phpfashion.com/sass-less- stylus-nebo-ciste-css-2

AWWWARDS: Trends in web design come and go. [online]. [cit. 2016-05-03]. Dostupné z: http://www.awwwards.com/6-web-design-trends-you-must-know-for-2015-2016.html

39 Econsultancy: 15 crucial web design trends for 2016 & beyond [online]. [cit. 2016-05-04].

Dostupné z: https://econsultancy.com/blog/67308-15-crucial-web-design-trends-for-2016- beyond/

Google AdWords. Google [online]. [cit. 2016-05-04]. Dostupné z:

https://www.google.cz/adwords/

Search Engine Optimization Starter Guide [online]. 2010 [cit. 2016-05-04]. Dostupné z:

http://static.googleusercontent.com/media/www.google.com/cs//webmasters/docs/search- engine-optimization-starter-guide.pdf

JavaWorld: Why use Node.js? [online]. [cit. 2016-05-04]. Dostupné z:

http://www.javaworld.com/article/2104480/java-web-development/why-use-node-js.html