Navrhněte a implementujte webový portál pro milovníky čokolády. Proveďte analýzu současných řešení a zdůvodněte návrh vlastního řešení.

Navrhněte a implementujte webový portál pro milovníky čokolády. Proveďte analýzu současných řešení a zdůvodněte návrh vlastního řešení. Zaměřte se na návrh uživatelské sekce, vytvoření uživatelských profilů, komunikaci mezi uživateli, sdílení médií apod. Integrujte prvky třetích stran pro posílení sociálních aspektů webu a web optimalizujte pomocí metod SEO. Navrhněte uživatelské testy a otestujte funkčnost celé aplikace. Aplikaci vytvořte s použitím platformy Java EE.

České vysoké učení technické v Praze Fakulta informačních technologií Katedra softwarového inženýrství Bakalářská práce Webový portál pro milovníky čokolády Šárka Hatašová Vedoucí práce: Ing. Jiří Balcárek 6. ledna 2014

Poděkování Děkuji Ing. Jiřímu Balcárkovi za vedení této práce. Další poděkování patří rodině, přátelům a všem těm, kteří mě ve snaze práci dokončit podpořili.

Prohlášení Prohlašuji, že jsem předloženou práci vypracovala samostatně a že jsem uvedla veškeré použité informační zdroje v souladu s Metodickým pokynem o etické přípravě vysokoškolských závěrečných prací. Beru na vědomí, že se na moji práci vztahují práva a povinnosti vyplývající ze zákona č. 121/2000 Sb., autorského zákona, ve znění pozdějších předpisů, zejména skutečnost, že České vysoké učení technické v Praze má právo na uzavření licenční smlouvy o užití této práce jako školního díla podle 60 odst. 1 autorského zákona. V Praze dne 6. ledna 2014.....................

České vysoké učení technické v Praze Fakulta informačních technologií c 2014 Šárka Hatašová. Všechna práva vyhrazena. Tato práce vznikla jako školní dílo na Českém vysokém učení technickém v Praze, Fakultě informačních technologií. Práce je chráněna právními předpisy a mezinárodními úmluvami o právu autorském a právech souvisejících s právem autorským. K jejímu užití, s výjimkou bezúplatných zákonných licencí, je nezbytný souhlas autora. Odkaz na tuto práci Hatašová, Šárka. Webový portál pro milovníky čokolády. Bakalářská práce. Praha: České vysoké učení technické v Praze, Fakulta informačních technologií, 2014.

Abstract This bachelor thesis deals with the design and implementation of web portal, which brings chocolate lovers together. The goal is to create a web application provides monitoring of chocolate consumption and offers to users a lot of advices on how to keep a healthy lifestyle. The thesis describes selected technology of platform Java EE, explains and illustrates application of methods of SEO and web portal connection to Facebook API. The entire application is based on Java EE platform using Prime Faces framework. Keywords Chocolate, Java EE, SEO, social networks. ix

Abstrakt Tato bakalářská práce se zabývá návrhem a implementací webového portálu, který sdružuje milovníky čokolády. Výstupem práce je webová aplikace, která umožňuje důkladné sledování vlastní konzumace čokolády a nabízí uživatelům rady týkající se zdravého životního stylu. Práce dále popisuje vybrané technologie platformy Java EE, vysvětluje a demonstruje aplikaci metod SEO a napojení webového portálu na API Facebooku. Vývoj proběhl na platformě Java EE za použití frameworku Prime Faces. Klíčová slova Čokoláda, Java EE, SEO, sociální sítě. x

Obsah Úvod 1 1 Analýza a návrh 3 1.1 Současný stav problematiky.................. 3 1.2 Vlastní řešení.......................... 4 1.3 Analýza požadavků....................... 4 1.4 Modelování případů užití.................... 7 1.5 Návrh databáze......................... 13 2 Realizace 15 2.1 Použité technologie....................... 15 2.2 Implementace webové aplikace................. 20 2.3 Provázání se sociální sítí.................... 25 2.4 Optimalizace webových stránek................ 26 3 Testování 29 3.1 Příprava testování........................ 29 3.2 Průběh testování........................ 30 3.3 Výsledky testování....................... 32 Závěr 35 Literatura 37 A Instalační a uživatelská příručka 39 A.1 Instalační příručka....................... 39 A.2 Uživatelská příručka...................... 39 xi

B Seznam použitých zkratek 43 C Obsah přiloženého CD 45 xii

Seznam obrázků 1.1 Diagram případů užití - operace s čokoládou........... 8 1.2 Diagram případů užití - uživatelé................. 9 1.3 Vztahy mezi entitami........................ 13 2.1 Java EE - čtyřvrstvá architektura[7]................ 16 2.2 Životní cyklus JSF [5]....................... 19 2.3 Webové rozhraní přihlášení do aplikace.............. 21 2.4 Přidání přítele............................ 24 2.5 Rozesílání zpráv........................... 25 xiii

Seznam tabulek 1.1 Kontrola splnění požadavků.................... 12 xv

Úvod Skladba stravy, potažmo životní styl jako celek, je v dnešní době jedno z předních společenských témat. Webový portál pro milovníky čokolády je jednou z možných odpovědí na otázku, jak jednoduše a pohodlně skloubit zdravý životní styl s potřebou konzumovat nutričně ne zcela vhodné potraviny. Každému uživateli webová aplikace nabídne rady, jak by měla vypadat jeho další strava, aby nedošlo k nežádoucímu nárůstu váhy, popřípadě mu doporučí kompenzační cvičení, aby spálil takové množství kalorií, které je nadlimitní pro jeho doporučený denní energetický příjem. Systém sám vyhodnotí všechny uživatelem zadané údaje jako je věk, pohlaví, hmotnost aj. a na základě zkonzumovaného množství čokolády se rozhodne, co by měl uživatel zvolit za sportovní aktivitu, jak dlouho se jí věnovat a jak správně přizpůsobit svůj jídelníček. Cílem bakalářské práce je uvést do provozu webový portál pro milovníky čokolády, který by svým uživatelům umožňoval nejen komunikovat a sdílet nejrůznější informace v rámci komunity, ale který by jim také pomohl držet se zásad zdravého životního stylu. Přesný popis a shrnutí jednotlivých požadavků na webový portál se nachází v kapitole Analýza a návrh. Implementací se zabývá kapitola Realizace, která je členěna do čtyř hlavních částí. Podkapitola Použité technologie popisuje použité nástroje a technologie, které byly pro vývoj webové aplikace klíčové. Podkapitola Implementace webové aplikace demonstruje použití těchto technologií v praxi. V podkapitole Provázání se sociální sítí je řešeno propojení webového portálu s API 1 sociální sítě Facebook. Pod- 1 API (Application Programming Interface) je soubor metod a tříd, které může programátor využít při tvorbě vlastní aplikace. 1

Úvod kapitola Optimalizace webových stránek se věnuje popisu a zapracování metod, které optimalizují webové stránky pro vyhledávače. Příprava, provedení a vyhodnocení uživatelských testů je popsáno v kapitole Testování. 2

Kapitola 1 Analýza a návrh 1.1 Současný stav problematiky Na internetu se vyskytuje velké množství různorodých komunit. V rámci celosvětové sítě internet zatím neexistuje pro milovníky čokolády žádný jim vlastní prostor, kde by se mohli virtuálně scházet, komunikovat spolu a sdílet obsah. Existuje ovšem několik webových portálů, které se specializují na podobný druh uživatelů. Nejznámější z nich jsou webové portály se zaměřením na konzumenty piva, kde spolu uživatelé soutěží a vzájemně si porovnávají množství vypitých piv. Příkladem takového webu je Pivní deníček 2. 1.1.1 Pivní deníček Pivní deníček je volně dostupná webová aplikace, která nabízí registrovaným uživatelům možnost sledovat nejrůznější statistiky o vlastní spotřebě piva, recenzovat restaurace, hospody a jednotlivé druhy piva a soutěžit s ostatními uživateli, kdo tohoto nápoje vypije nejvíc. Pivní deníček existuje od roku 2010, kdy byl spuštěn v podobě Facebook aplikace. V roce 2012 vznikl samostatný web, na Facebooku již plně nezávislý. I přesto si Pivní deníček zachoval silné provázání s touto sociální sítí. Nový uživatel se může rozhodnout, zda se zaregistruje anebo využije svého Facebook účtu, přes který se může přihlásit. Webová aplikace je postavena na frameworku Ruby on Rails, který je založen na objektově orientovaném skriptovacím jazyku Ruby. Frontend, 2 Pivní deníček je dostupný na: www.pivnidenicek.cz. 3

1. Analýza a návrh tedy část webu, která je viditelná pro návštěvníky, běží za pomoci moderního značkovacího jazyka HTML5, CSS3 a javascriptové knihovny JQuery. V dnešní době má web Pivní deníček kolem 1000 unikátních přístupů denně a téměř 15 000 registrovaných uživatelů 3. 1.2 Vlastní řešení Hrubý koncept Pivního deníčku bude sloužit autorovi k částečné inspiraci při vývoji vlastního Webového portálu pro milovníky čokolády. Hlavní funkce, které webový portál nabídne, jsou: sledovat vlastní spotřebu čokolády a možnost porovnat se s přáteli, přidávat či odebírat přátele, rozesílat přátelům soukromé zprávy, sdílet jednotlivé grafy konzumace prostřednictvím sociálních sítí, nechat si systémem vypočítat, jak by bylo vhodné upravit svůj jídelníček, nechat si poradit, jakou zvolit pohybovou aktivitu, aby nedošlo k nárůstu hmotnosti, podílet se na hodnocení jednotlivých druhů čokolád. 1.3 Analýza požadavků V následujících dvou podkapitolách jsou rozepsány přesné požadavky na webový portál. Funkční požadavky popisují interakci uživatele s webovou aplikací. V nefukčních (obecných) požadavcích jsou shrnuty nároky na způsob implementace aplikace, její výkonnost, dostupnost a celkový design. 1.3.1 Funkční požadavky F1. Vytvoření a úprava uživatelského profilu Uživatelský profil je automaticky vytvořen po úspěšné registraci. Osobní údaje lze později změnit. 3 Zdroj informací je Lukáš Zeman, autor Pivního deníčku. 4

1.3. Analýza požadavků F2. Přidání/odebrání přítele Přihlášený uživatel si může přidat jiného uživatele do seznamu svých přátel. Přátelství je oboustranné, přidáním přítele vznikne vazba přátelství i na straně druhého uživatele. Přítele je také možné ze seznamu přátel odebrat. F3. Zasílání zpráv Uživatelé spolu mohou komunikovat prostřednictvím soukromých zpráv. Zprávu lze zaslat pouze takovému uživateli, který je na seznamu přátel. Zprávu lze zaslat více uživatelům najednou. F4. Vytvoření konzumace čokolády a generování grafů Do systému přihlášený uživatel zadává datum a množství snězené čokolády. Ta se následně zobrazí v přehledném grafu. Graf je škálovatelný, lze si vybrat, jaké časové období bude zobrazovat. Systém umožní porovnání dat dvou uživatelů, kteří jsou přátelé. Tyto data zobrazí v grafické podobě. Každý vygenerovaný graf lze sdílet prostřednictvím sociální sítě, tj. označit ho Líbí se mi. F5. Výpočet jídelníčku Systém uchovává všechna data o zkonzumovaném množství čokolády. Na základě těchto hodnot, pohlaví, věku a váhy uživatele je stanoven doporučený denní příjem kalorií a procentuální rozložení základních živin (tuky, cukry, bílkoviny). Systém sestaví jídelníček, kde budou zastoupeny jednotlivé živiny tak, aby byl pokryt jejich doporučený denní příjem a energetická hodnota se pohybovala kolem předem vypočtené hranice. Na žádost uživatele se provede výpočet jídelníčku a zobrazí se. F6. Výpočet pohybové aktivity Pokud uživatele tíží, kolik zkonzumoval čokolády, systém mu navrhne pohybové aktivity tak, aby přijaté množství kalorií spálil. Vypočítat, jakou pohybovou aktivitu zvolit, je možné pro konzumace uskutečněné za poslední týden, měsíc, rok a všechny celkem uskutečněné. F7. Hodnocení čokolády 5

1. Analýza a návrh Systém obsahuje databázi čokolád (od různých tyčinek přes bonboniéry až po klasické tabulky) a značek, pod které tyto výrobky spadají. Přihlášení uživatelé mohou hodnotit jak jednotlivé čokolády, tak i značky. Každý druh čokolády má svoji stránku, kde jsou o ní uvedené detailní údaje. Hodnocení oblíbenosti probíhá na úrovni přidání nula až pěti hvězdiček k výrobku nebo značce. Na stránku výrobku je možné také přidat komentář. F8. Vytvořit/upravit/odstranit údaje o čokoládě Administrátor má možnost přidat do systému nový čokoládový výrobek nebo značku čokolády. Údaje může kdykoli modifikovat anebo danou položku úplně odstranit. F9. Upravit údaje o uživateli, smazat uživatele Administrátor má právo upravovat údaje již existujících uživatelů a uživatele smazat. 1.3.2 Nefunkční požadavky 6 N1. Dostupnost přes webové rozhraní Systém bude dostupný jako webová aplikace, hlavní funkce webového portálu budou moci využívat pouze přihlášení uživatelé. V anonymním režimu bude možné se pouze zaregistrovat, přihlásit nebo si přečíst informace o projektu. N2. Rozšiřitelnost V budoucnu se počítá s rozšířením funkčnosti webového portálu, zejména se zdokonalením způsobu výpočtu optimálního množství přijatých živin a rozšíření portfolia hodnocení jednotlivých čokolád. Zdrojový kód by měl být napsán čistě a s komentáři, implementace by měla proběhnout takovým způsobem, aby později nečinilo jinému programátorovi problémy vyznat se v kódu aplikace a doprogramovat její novou část. N3. Spolehlivost Systém musí fungovat spolehlivě i při vyšší návštěvnosti, všechny požadavky musí být vyřizovány rychle bez časové prodlevy. Před nasazením webové aplikace je potřeba se zaměřit na výběr vhodného hardwaru.

1.4 Modelování případů užití 1.4.1 Seznam uživatelů Administrátor systému 1.4. Modelování případů užití Přidává, odebírá či modifikuje jednotlivé čokolády. Upravuje údaje již existujících uživatelů. Má právo uživatele odstranit ze systému. Recenze od uživatelů, které jsou uvedené na stránce výrobku, může smazat. Může využívat systém stejným způsobem jako přihlášený uživatel. Přihlášený uživatel Upravuje své osobní údaje a spravuje svůj uživatelský profil. Profil je přístupný pouze pro přátele. Vytváří si seznam přátel, se kterými následně může komunikovat skrz zasílání soukromých zpráv. Vkládá do systému množství čokolády, kterou zkonzumoval a nechává si vygenerovat graf konzumace. Do tohoto grafu může zahrnout i data vybraného přítele. Nechává si systémem navrhnout vhodný jídelníček a nechává si poradit, jak by se měl správně hýbat, aby nepřibral na váze. Recenzuje a hodnotí čokolády. Anonymní uživatel Nemá přístup do webové aplikace. Pro získání přístupu se musí zaregistrovat nebo přihlásit. 7

1. Analýza a návrh 1.4.2 Diagramy případů užití Obrázek 1.1: Diagram případů užití - operace s čokoládou 8

1.4. Modelování případů užití 1.4.3 Diagramy případů užití Obrázek 1.2: Diagram případů užití - uživatelé 9

1. Analýza a návrh 1.4.4 Popisy případů užití 1.4.4.1 Operace s čokoládou Následující popisy užití (UC1 až UC12) jsou také schématicky znázorněny na obrázku 1.1. UC1 - Zobrazit seznam čokolád Umožňuje zobrazit seznam všech čokolád, které jsou zadané v systému. UC2 - Vložit nový druh čokolády Administrátor zobrazí seznam čokolád a pomocí formuláře vloží do systému nový druh čokolády. UC3 - Upravit údaje o čokoládě Administrátor zobrazí seznam čokolád a u vybrané položky upraví potřebné údaje. UC4 - Odstranit čokoládu Administrátor zobrazí seznam čokolád a vybranou položku odstraní ze systému. UC5 - Hodnotit čokoládu Uživatel zobrazí seznam čokolád, vybere si položku a ohodnotí ji. Hodnocení probíhá na úrovni přidání 0-5 hvězdiček a zanechání komentáře. UC6 - Odstranit recenzi Administrátor zobrazí seznam čokolád a u vybrané položky odstraní uživatelem zanechaný komentář. UC7 - Vložit novou konzumaci čokolády Uživatel může zobrazit seznam čokolád, vybrat si přesný druh, který právě zkonzumoval, zapsat množství a vložit do systému. Nebo může postupovat tak, že rovnou přejde k formuláři vkládání nové konzumace a název čokolády napíše sám ručně. UC8 - Zobrazit graf konzumace Graf konzumace si uživatel zobrazí po přidání nové konzumace. Dříve vygenerované grafy není možné prohlížet, ale je možné jejich vytvoření znovu vyvolat. 10

1.4. Modelování případů užití UC9 - Porovnat konzumaci s přáteli Uživateli je umožněno vizualizovat ve svém grafu jak vlastní konzumaci, tak i konzumaci přátel. Přátele, které do grafu zahrne, vybírá přes seznam přátel. UC10 - Sdílet graf konzumace prostřednictvím sociálních sítí Uživatel po zobrazení grafu konzumace může takový graf sdílet na sociální síti. UC11 - Vygenerovat úpravu jídelníčku Po vložení nové konzumace čokolády si uživatel nechá vygenerovat úpravu jídelníčku, která se váže k dané konzumaci. UC12 - Nechat si poradit pohybovou aktivitu Po vložení nové konzumace čokolády si uživatel nechá systémem poradit, jakou pohybovou aktivitu by měl zvolit. 1.4.4.2 Správa uživatelů, přátelství Popisy užití (UC13 až UC19) jsou také schématicky znázorněny na obrázku 1.2. UC13 - Zobrazit seznam uživatelů Umožňuje zobrazit seznam všech uživatelů, kteří jsou zaregistrovaní. UC14 - Upravit údaje o uživateli Administrátor zobrazí seznam uživatelů a vybere si uživatele, jehož údaje chce změnit. Uživateli je dovoleno upravovat jen své vlastní údaje, k údajům jiných uživatelů nemá přístup. UC15 - Smazat uživatele Administrátor zobrazí seznam uživatelů a vybere si uživatele, kterého chce ze systému odstranit. UC16 - Zobrazit seznam přátel Umožňuje uživateli zobrazit seznam všech jeho přátel. Nemá-li žádné, seznam je prázdný. UC17 - Přidat přítele Uživatel zobrazí seznam uživatelů a vybere si takového, se kterým chce navázat přátelství. Pokud daný uživatel žádost o přátelství akceptuje, stávají se přáteli. 11

1. Analýza a návrh UC18 - Odstranit přítele Uživatel zobrazí seznam přátel a přítele odstraní. Odstraněného přítele lze v budoucnu znovu přidat na seznam přátel. UC19 - Napsat příteli zprávu Uživatel zobrazí seznam přátel a pošle příteli zprávu nebo rovnou přejde ke psaní zprávy a jméno přítele doplní ručně. 1.4.5 Kontrola splnění všech požadavků Tabulka 1.1 demostruje pokrytí funkčních požadavků případy užití. Pokud by se stalo, že by některý z případů užití nepokrýval žádný z funkčních požadavků, musel by být takový případ užití neprodleně odstraněn pro svoji nadbytečnost. Na druhé straně, pokud by existoval funční požadavek, který by nebyl splněn ani jedním případem užití, bylo by potřeba takový případ užití přidat. Z tabulky níže je patrné, že všechny funční požadavky jsou pokryty a žádný případ užití není redundantní. Tabulka 1.1: Kontrola splnění požadavků F1 F2 F3 F4 F5 F6 F7 F8 F9 UC1 X X X UC2 X UC3 X UC4 X UC5 X UC6 X UC7 X UC8 X UC9 X UC10 X UC11 X UC12 X UC13 X X X X UC14 X X UC15 X UC16 X X UC17 X UC18 X UC19 X Splněno ano ano ano ano ano ano ano ano ano 12

1.5. Návrh databáze 1.5 Návrh databáze Návrh databáze vychází z analytické části, kde byly přesně definované nároky a požadavky na webovou aplikaci. Na obrázku 1.3 je znázorněn hrubý koncept databázového schématu a vztahy mezi jednotlivými entitami. Obrázek 1.3: Vztahy mezi entitami 1.5.1 Entity Entita User představuje uživatele systému. Smyčka User-User naznačuje možné přátelství mezi uživateli. U každého uživatele je evidován seznam jeho přátel, který (pokud uživatel dosud nenavázal žádné přátelství) může být i prázdný. 13

1. Analýza a návrh Entita Consumption zastupuje jednu konkrétní konzumaci čokolády. Drží si u sebe seznam ingrediencí a informaci o tom, co za čokoládu uživatel zkonzumoval (entita Chocolate Item). Uživatel může mít neomezený počet konzumací, ale jedna určitá konzumace patří výhradně jednomu uživateli. Entita Chocolate Item zastupuje čokoládovou pochoutku, například Milka Alpine Milk 100 g. Její typ je uložen v entitě Chocolate Type (v tomto případě by byl typ tabulka čokolády) a značka je uložená (Milka), spolu dalšími informacemi o výrobci, v entitě Brand. Pokud k této čokoládě existují uživatelské recenze, je entita Chocolate Item provázaná s entitou Review. Entita Review odpovídá recenzi, kterou napsal konkrétní uživatel a váže se k dané čokoládové pochoutce. 14

Kapitola 2 Realizace Tato kapitola se věnuje jak popisu hlavních rysů a principů technologií, které byly pro vývoj webové aplikace klíčové, tak i implementaci samotného webového portálu, jeho provázání se sociální sítí a optimalizacím, které byly provedeny, aby byl obsah webového portálu vhodný pro zpracování vyhledávači. 2.1 Použité technologie 2.1.1 Java Enterprise Edition Java Enterprise Edition[4] (dříve označována jako J2EE) je platforma poskytující širokou škálu nástrojů pro vývoj, provoz a správu podnikových aplikací v jazyce Java. Java EE je postavena na platformě Java SE 4 a je doplněna mimojiné o technologie, které jsou určeny pro vývoj webových aplikací (JavaServer Faces, Facelets, Java Persistence API aj.). Výhody platformy Java[6]: multiplatformní řešení, nezávislé na operačním systému klienta nebo serveru, standardizované technologie s detailní a dobře strukturovanou dokumentací, široká komunita vývojářů, 4 Java Standard Edition (Java SE nebo dříve označována také jako J2SE) je platforma, která poskytuje rozhraní základních Java knihoven a obsahuje běhové prostředí (JVM - Java Virtual Machine). 15

2. Realizace stabilní podpora, vysoká úroveň zabezpečení, robustnost. 2.1.1.1 Architektura Javy Enterprise Edition Aplikace postavené na platformě Java EE jsou vícevrstvé. Rozložení jednotlivých vrstev v rámci takové aplikace je zobrazeno na obrázku 2.1. Nezávisle na platformě mají vícevrstvé aplikace typicky tři hlavní, od sebe navzájem oddělené části: prezenční vrstva, aplikační vrstva a vrstva persistence dat. Obrázek 2.1: Java EE - čtyřvrstvá architektura[7] V terminologii Java EE se jedná o tyto čtyři vrstvy: klientská vrstva (client tier), webová vrstva (web tier), aplikační vrstva (business tier) a EIS vrstva (enterprise information system tier). Klientská vrstva Jako klient, nebo-li něco, co se snaží vzdáleně přistoupit k Java EE serveru, si lze představit libovolnou aplikaci (např. webový prohlížeč) 16

2.1. Použité technologie nebo systém (jiný server). Komunikace mezi klientem a serverem probíhá tak, že klient zašle serveru požadavek (např. o zobrazení stránky), server požadavek zpracuje a zašle klientovi odpověď. Webová vrstva Webová vrstva se skládá z komponent, které interagují s aplikační vrstvou. Jejich úkolem je především zprostředkovat klientovi dynamicky generovaný obsah a vstupům od uživatele (např. odeslání formuláře, přihlášení se do aplikace, kliknutí na tlačítko apod.) vracet odpovídající výstup. Mezi technologie používané ve webové vrstvě patří: Servlets, Java- Server Faces technology, JavaServer Faces Facelets technology, Java- Server Pages, JavaServer Pages Standard Tag Library a JavaBeans Components. Aplikační (business) vrstva Hlavní logika aplikace je umístěna v aplikační vrstvě. Aplikační vrstva komunikuje s databázovou a webovou vrstvou. Pokud je klientem jiná aplikace než webový prohlížeč (např. speciálně navržená mobilní aplikace), komunikuje přímo s aplikační vrstvou. Vystavět aplikační logiku lze pomocí následujících technologií: Enterprise JavaBeans components, JAX-RS RESTful web services, JAX- WS web service endpoints a Java Persistence API entities. EIS vrstva Součástí EIS vrstvy jsou databázové servery a odkazy na jiné datové zdroje. K přístupu do EIS vrstvy se používají tyto technologie: The Java Database Connectivity API, The Java Persistence API, The Java EE Connector Architecture a The Java Transaction API. 2.1.2 JavaServer Faces JavaServer Faces[1] je technologie, která rozděluje webovou vrstvu aplikace na dvě základní části. První částí je definice uživatelského prostředí vytvořená pomocí XML 5 tagů. Druhou částí webové vrstvy je aplikační logika, která je tvořena tzv. backing beans. 5 XML (extensible Markup Language) je jazyk, kde význačné části dokumentu (tzv. elementy) jsou označeny pomocí specifických značek. 17

2. Realizace Backing bean je třída napsaná v jazyce Java a je provázána s komponentami v GUI 6, je tedy dostupná z JSF stránky. Backing bean musí mít definované jméno a rozsah působnosti (tzv. scope). Příklady druhů scope: application scope - data v backing beaně jsou přístupná po celou dobu běhu aplikace, session scope - data v backing beaně jsou přístupná pouze v rámci aktuální relace, s koncem relace končí i životnost backing bean, request scope - backing bean je přístupná jen v aktuálním požadavku, view scope - životnost a přístupnost dat v backing beaně je možná tak dlouho, dokud se uživatel pohybuje v rámci jedné stránky, tedy dokud metoda action vrací null nebo void. V různých rozšířeních existují i další možnosti pro nastavení rozsahu působnosti - conversation scope, flash scope, custom scope aj. 2.1.2.1 Životní cyklus JSF Na obrázku 2.2 je zachycen životní cyklus JSF. Obsluha požadavku o zobrazení JSF stránky až po zaslání odpovědi je rozdělena do šesti částí: restore view, apply request, process validations, update module values, invoke application a render response. V JSF rozlišujeme dva typy požadavků: initial a postback. Initial je takový požadavek, který prochází pouze dvěma fázemi životního cyklu - první (restore view) a poslední (render response). Jako initial označujeme takový požadavek, kdy je o zobrazení stránky požádáno poprvé. Na druhé straně, požadavek typu postback je vytvořen po odeslání formuláře, který se nacházel na stránce, co byla zobrazena jako výsledek initial požadavku. Postback požadavek prochází všemi šesti fázemi životního cyklu, protože typicky je potřeba data z formuláře nějakým způsobem zpracovat a provést na to navázané události. 6 GUI (Graphical User Interface) je uživatelské rozhraní. 18

2.1. Použité technologie Obrázek 2.2: Životní cyklus JSF [5] Restore view Pokud bylo ke stránce přistoupeno již v předešlém požadavku, je v této fázi je obnoven komponentový model (component tree). V případě, že je stránka zobrazena poprvé, je sestaven nový komponentový model. Apply request V této fázi se prochází celý komponentový model a každá komponenta kontroluje, které hodnoty z požadavku k ní patří a tyto hodnoty si lokálně ukládá. Process validations Pokud jsou ke stránce připojeny validátory, které mají za úkol kontrolovat, jestli jsou data korektní, jsou spuštěny právě v této fázi. Je-li validace úspěšná, tj. data jsou v pořádku, pokračuje životní cyklus další fází. Je-li validace neúspěšná, je okamžitě vyvolána poslední fáze cyklu (render response). Update module values Díky tomu, že data prošla validací, je bezpečné provést aktualizici dat v příslušných Java Beans. 19

2. Realizace Invoke application V této fázi je vyvolána action metoda, kterou uživatel spustil například stisknutím tlačítka nebo kliknutím na odkaz. Tato metoda provede zpracování požadavku. Její návratovou hodnotou je řetězec, který říká, jaká další stránka se po zpracování zobrazí. Render response Poslední fáze cyklu má za úkol vykreslit odpověď v podobě požadované stránky a zaslat ji v zakódované podobě prohlížeči. Celý cyklus se opakuje od začátku, když uživatel znovu odešle formulář, klikne na odkaz apod. 2.1.3 PrimeFaces PrimeFaces je ajaxový framework rozšiřující aplikace postavené na platformě Java EE o AJAX 7 technologii. Umožňuje vytvoření tzv. Rich Internet Application 8 s použitím čistého programovacího jazyka Java. PrimeFaces vyvíjí společnost Prime Technology jako open source software 9. Tento framework poskytuje vývojářům širokou škálu komponent pro JSF (prvky formuláře, tlačítka, grafy a mnoho dalších). 2.2 Implementace webové aplikace 2.2.1 Přihlášení do aplikace Přihlášení do aplikace je realizováno přes JSF formulář s Prime Faces komponentami, viz obrázek 2.3. Pro úspěšné přihlášení je třeba zadat uživatelské jméno a heslo, které se následně ověří proti databázi. 7 AJAX (Asynchronous JavaScript and XML) je souhrnné označení technologií pro vývoj interaktivních webových stránek. 8 Obecné označení technologií, které používají interaktivní webové aplikace. 9 Jako open source je označový takový software, ke kterému je volně dostupný zdrojový kód a uživatelé jej mohou prohlížet, upravovat a využívat. 20

2.2. Implementace webové aplikace Obrázek 2.3: Webové rozhraní přihlášení do aplikace Heslo není v databázi z bezpečnostních důvodů evidováno jako prostý text, před uložením hesla do databáze je nejdříve uživatelem zadaný řetězec tzv. osolen [3], je využito metody solení hesla. Sůl je náhodný řetězec (viz fragment zdrojového kódu 2.1, řádek č. 4), který je k heslu připojen. Osolené heslo je zašifrováno pomocí hashovací funkce 10 a teprve takto upravené je uloženo do databáze. Použití soli je výhodné zejména proto, že pouhým pohledem na databázovou tabulku s uloženými hesly uživatelů nemůže útočník zjistit, jaká je jejich neosolená verze, ale také není zjevné, kteří uživatelé mají hesla stejná. Zdrojový kód 2.1: CryptoUtils.java 1 public static String encrypt ( String str ) { 2 BASE64Encoder encoder = new BASE64Encoder (); 3 byte [] salt = new byte [ 8]; 4 rand. nextbytes ( salt ); 5 return encoder. encode ( salt ) + encoder 6. encode ( str. getbytes ()); 7 } 8 9 public static String decrypt ( String encstr ) { 10 if ( encstr!= null && encstr. length () > 12) { 10 Hashovací funkce zajišťuje pro rozdílné vstupní řetězce rozdílné výstupní řetězce. 21

2. Realizace 11 12 String cipher = encstr. substring ( 12); 13 BASE64Decoder decoder = new BASE64Decoder (); 14 15 try { 16 return new String ( decoder. decodebuffer ( cipher )); 17 } catch ( IOException e) { 18 JsfUtil. adderrormessage ( ResourceBundle 19. getbundle ("/ Bundle ") 20. getstring (" login_decryt_exception " )); 21 } 22 } 23 return ""; 24 } Kliknutí na tlačítko Přihlásit vyvolá příslušnou Java bean, která slouží k zalogování do aplikace (zdrojový kód 2.2). Vložené záznamy se porovnají s referenčními a výsledkem je buď úspěšné přihlášení (návratová hodnota je přímo požadavek nové stránky, řádek č. 17) nebo neúspěšné - návratová hodnota je prázdný řetězec, zahodí se data z formuláře, provede se znovunačtení aktuální stránky a vypíše se hláška o neúspěšné autentizaci. Aby byla obsluha webové aplikace pro administrátora co nejpohodlnější (zejména při čerstvém nahrání na server, kdy ještě v databázi neexistuje žádný uživatel), byla implementována i tzv. zadní vrátka (backdoor), tedy způsob, jak obejít klasickou autentizaci popsanou výše. Volání metody createfirstadminaccount vytvoří v databázi záznam o novém uživateli a přidělí mu administrátorská práva. Zdrojový kód 2.2: LoginBean.java 1 public String login () { 2 3 if ( username. equals (" createfirstadminaccount ")) { 4 createfirstadminaccount (); 5 } 6 7 try { 8 Query q = userfacade. getem (). createquery 9 (" SELECT u FROM User u WHERE u. username = 10 : username "); 11 12 q. setparameter (" username ", username ); 13 User loggeduser = ( User ) q. getsingleresult (); 14 22

2.2. Implementace webové aplikace 15 if ( loggeduser. getpassword (). equals ( password )) { 16 sessionbean. setloggeduser ( loggeduser ); 17 return "/ main / index? faces - redirect = true "; 18 } 19 } catch ( Exception e) { 20 } 21 22 JsfUtil. adderrormessage ( ResourceBundle 23. getbundle ("/ Bundle ") 24. getstring (" login_wrong_username_password " )); 25 26 return ""; 27 } 2.2.2 Přátelství Přidání nového přítele je realizováno přes PrimeFaces komponentu auto- Complete. Do této komponenty uživatel po jednotlivých znacích vypisuje uživatelské jméno potenciálního přítele. Komponenta mu sama napovídá, jakého uživatele si dle zadaných znaků může přidat (viz obrázek 2.4). Způsob, jakým je v aplikaci implementována nápověda této komponenty, je zobrazeno na ukázce zdrojového kódu 2.3. Vstupem funkce je řetězec zadaný uživatelem. Pokud tento řetězec obsahuje velká písmena, jsou převeda na malá, jak je vidět na řádku č. 4. Následuje cyklus, který prochází všechny uživatele se shodným jménem. Z výsledků hledání je vyloučen samotný uživatel, který přátele vyhledává (podmínka na řádku č. 7) a uživatelé, kteří již jsou jeho přáteli (podmínka na řádku č. 11). Všechny ostatní takto nalezené potenciální kandidáty na přítele funkce vrací jako seznam (řádek č.22). Relace přátelství v aplikaci funguje tak, že pokud si uživatel přidá přítele, jeho příteli se i uživatel, který stál na počátku procesu, zobrazuje dále jako přítel. To samé platí i při smazání přítele. Smaže-li si uživatel svého přítele, zmizí i on ze seznamu jeho přátel. Relace přátelství je tedy bijektivní. Přehled všech přátel je viditelný z profilu uživatele. Uživateli je umožňeno ve svém seznamu přátel vyhledávat a řadit dle všech dostupných parametrů (uživatelské jméno, křestní jméno, příjmení, věk atd.). Zdrojový kód 2.3: UserAction.java 1 public List < User > searchforuser ( String query ) { 2 List < User > suggestions = new ArrayList < >(); 3 23

2. Realizace 4 query = query. tolowercase (); 5 6 for ( User u : userfacade. getusers ()) { 7 if (u. equals ( sessionbean. getloggeduser ())) { 8 continue ; 9 } 10 11 if ( sessionbean. getloggeduser (). getfriends () 12. contains (u)) { 13 continue ; 14 } 15 16 if (u. getusername (). tolowercase () 17. startswith ( query )) { 18 suggestions. add (u); 19 } 20 } 21 22 return suggestions ; 23 } Obrázek 2.4: Přidání přítele 24

2.3. Provázání se sociální sítí 2.2.3 Rozesílání zpráv Na obrázku 2.5 je patrné rozložení PrimeFaces komponent v rámci formuláře, který zajišťuje odesílání zpráv. V komponentě SelectManyMenu je možné zaškrtnout libovolný počet přátel, kterým bude zpráva zaslána. Do této komponenty jsou nahráni pouze vlastní přátelé uživatele. Nemá-li uživatel žádné přátele, nemůže fakticky nikomu zprávu odeslat. Kliknutím na tlačítko odeslat se zpráva uloží do databáze jako řetězec znaků. Uživateli, který ji odeslal, se přiřadí její identifikátor mezi seznam odeslaných zpráv. Uživatelům, kterým byla určena, se identifikátor přiřadí do přijatých zpráv. Fyzicky se text zprávy vyskytuje v databázi pouze jednou, aby nedocházelo k nekonzistencím. Obrázek 2.5: Rozesílání zpráv 2.3 Provázání se sociální sítí Provázání se sociální sítí Facebook je realizováno přes tlačítko Líbí se mi (anglicky Like). Toto tlačítko je na webovém portálu umístěno na veřejné hlavní stránce, na privátní stránce s konzumací uživatele a na stránce s detaily určitého druhu čokolády. Zdrojový kód pro přidání tlačítka poskytuje 25

2. Realizace Facebook a je dostupné na https://developers.facebook.com/docs /plugins/like-button/. Samotný skript stačí přidat do těla webové stránky a potom na místo, kam chceme umístit tlačítko přidat div se speciálními atributy. Jeden z těchto atributů se nazývá data-href a jeho hodnota definuje, která webová stránka se má označit jako oblíbená. 2.4 Optimalizace webových stránek Search engine optimization (SEO)[8][9], nebo-li optimalizace pro vyhledávače, je soubor metod a doporučení, jak vytvářet webové stránky, aby jejich ohodnocení vyhledávačem bylo co nejvyšší. Na internetu se vyskutují biliony různých stránek, mezi kterými uživatelé typicky vyhledávají pomocí klíčových slov. Výsledkem takového vyhledávání je seznam stránek; zjednodušeně se dá říci, že stránky na top pozicích vyhovují uživatelem zadaným klíčovým slovům více než ty, které jsou v seznamu níže. Dobré ohodnocení stránky vyhledávačem znamená dobré umístění v rámci relevantního seznamu výsledků, tedy dobrou viditelnost pro potenciální návštěvníky. Hlavní důraz SEO metod je kladen na strojové ohodnocení stránky, nikoli na přívětivost uživatelského prostředí. S tím souvisí otázka, jaké metody je ještě vhodné při výstavbě webové stránky použít a jaké už spíše ne - hranice mezi tím, co zlepšuje dosažitelnost webové stránky a tím, co už je jen pouhá manipulace s daty, může být někdy velmi tenká. 2.4.1 Etické metody Jako etické jsou označovány takové metody SEO, které zlepšují obsah webové stránky a mají dlouhodobý efekt na umístění ve výsledcích vyhledávání. Příklady etických metod: Obsah webových stránek by měl být aktuální, unikátní a neduplicitní. Kód by měl být validní. HTML 11 tagy je třeba používat v souladu s jejich sémantickým, nikoli jen syntaktickým, významem. Názvy souborů, ve kterých jsou stránky uložené, jsou relevatní, tedy odpovídají obsahu. Je třeba si uvědomit, že i název HTML souboru 11 HTML (HyperText Markup Language) je značkovací jazyk, který se používá pro vytváření webových stránek. 26

2.4. Optimalizace webových stránek se zobrazuje ve výsledcích vyhledávání; z toho důvodu by měl být co možná nejkratší. Každá stránka musí mít vhodný titulek a nadpis. Je třeba si dát pozor, aby každá stránka měla nadpis úrovně h1 jiný, neduplicitní. U obrázků je nutný popis (tj. výstižně vyplněný atribut alt elementu img). Pomocí meta tagů[10] jsou vyhledávačům předávány další potřebné informace o webové stránce. Meta tagy se standardně nachází v hlavičce HTML souboru a slouží k popisu obsahu stránky, jména autora, definici klíčových slov a typu kódování. Budování zpětných odkazů v rámci vlastní webové stránky je přínosné, protože sběrač dat (tzv. crawler) v závislosti na provázanosti jednotlivých stránek usuzuje, která stránka v rámci celého webu je důležitější (směřuje na ni více vnitřních odkazů) a která méně. Přítomnost sitemap souboru v kořenovém adresáři webu pomáhá sběračům se lépe na stránce orientovat. Sitemap soubor, tedy soubor obsahující mapu stránek v takové podobě, aby byla pro následné automatizované zpracování co nejvhodnější, není třeba vytvářet ručně, ale nechat si jej vygenerovat pomocí vhodného nástroje. Soubor robots.txt, opět umístěný v kořenovém adresáři webu, poskytuje informace o tom, které stránky má vyhledávač indexovat a které ne. 2.4.2 Neetické metody Neetické SEO metody mají jediný cíl - okamžitě zvýšit pozici webové stránky. Metody, jakých je k tomu použito, jsou často zavádějící a podvodné; ze strany vyhledávačů je snaha se těmto metodám bránit a takové stránky penalizovat. Příklady neetických metod: Skrytý text je na stránky umisťován za účelem umělého zvýšení počtu klíčových slov. Webové stránky se skrytým (neviditelným) textem se mohou krátkodobě dostat na lepší pozici, protože se skokově zvýší frekvence výskytu klíčových slov. Spamování je manipulace s obsahem jiných webů takovým způsobem, aby na cílovou webovou stránku vedlo velké množství zpětných odkazů. Toho lze dosáhnout například přidáváním velkého množství příspěvků s odkazy do diskuzních fór, návštěvních knih nebo na 27

2. Realizace blogy, které s tématem webové stránky nemusí mít vůbec nic společného. Spamování se zpravidla neprovádí ručně (pro velkou pracnost), ale jsou na to využívány automatizované nástroje. Podsouvání stránek je klamavá metoda, kdy se odkaz na stránce nebo stránka samotná tváří, že odkazuje někam jinam, než tomu je ve skutečnosti. Robotům, kteří prochází stránky a sbírají data, se podsouvá jiný obsah než ten, který je zobrazen návštěvníkům. Odkazové farmy jsou webové stránky, které jsou vzájemně provázány odkazy. Účel takového provázání je opět jediný - získat od vyhledávače lepší ohodnocení, přičemž na takových stránkách často nebývají pro uživatele žádné relevatní informace. 2.4.3 Optimalizace webového portálu Zapracování etických metod SEO proběhlo v několika krocích. Už při prvotním návrhu stránek byly tyto metody brány v potaz - každá stránka má unikátní, pro ni výstižný titulek a jediný neduplicitní nadpis úrovně h1, důležité fráze jsou v textu vyznačené elementy strong nebo em, které mají především sémantický význam. V hlavičkách XHTML 12 souborů jsou uvedeny meta tagy s popisem obsahu, klíčových slov, jména autora, typu kódování a jazyku obsahu webových stránek. Po ukončení vývoje webového portálu a nasazení na produkční server je třeba vygenerován soubor sitemap.xml a následně robots.txt, kde je omezeno automatizované sbírání dat a procházení stránek jen na veřejnou sekci webu a veřejně dostupné soubory. 12 XHTML (extensible HyperText Markup Language) je značkovací jazyk používaný k tvorbě hypertextových dokumentů. 28

Kapitola 3 Testování Cílem testování je odhalit případné nedostatky v návrhu uživatelského rozhraní webového portálu a ověřit jeho použitelnost. 3.1 Příprava testování Webová aplikace je navržena tak, aby ji mohli používat dva typy uživatelů - běžný uživatel a administrátor. Při přípravě testování byl kladen důraz na zachycení profilu průměrného uživatele a definici častých úloh a akcí, který tento uživatel v aplikaci provádí. 3.1.1 Profily typických uživatelů Administrátor Administrátor aplikace je člověk kolem 35 let, který bez problému ovládá PC, nemá zkušenosti s vývojem aplikací, ale má povědomí o tom, jak vývoj a údržba takových aplikací probíhá. Rozumí základům programování, ale nikdy se této činnosti více do hloubky nevěnoval. Běžný uživatel Běžný uživatel aplikace je mladý člověk kolem 25 let, který zvládá základní ovládání PC, ale nemá zkušenosti s vývojem aplikací. Na internetu tráví podstatnou část svého volného času a je aktivní na sociálních sítích. 29

3. Testování 3.1.2 Testovací úlohy Scénář úloh pro běžného uživatele: 1. Projít kompletní registrací, 2. upravit si svůj uživatelský profil, 3. přidat přítele, 4. odeslat příteli zprávu, 5. přidat recenzi k libovolné čokoládě, 6. přidat konzumaci, 7. vygenerovat graf konzumace, označit graf jako Líbí se mi, 8. vygenerovat doporučenou úpravu jídelníčku. Scénář úloh pro administrátora: 1. Upravit osobní údaje libovolného běžného uživatele, 2. smazat uživatele, 3. přidat do systému dvě nové ingredience, 4. přidat do systému novou čokoládu, editovat její vlastnosti a přiřadit jí nově vytvořené ingredience. 3.2 Průběh testování Pro účely testování bylo vybráno deset jedinců, kteří odpovídali požadovaným uživatelským profilům. Všichni testovaní dostali před testem dotazník ověřující jejich znalost práce s počítačem a zkušenosti s podobnými aplikacemi. Šest z nich dostalo k testování úlohy pro běžného uživatele, čtyři pro administrátora. Během testování byl přítomný moderátor, který testované seznámil s testem. V případě, kdy měl některý z testovaných vážné problém s vyřešením úlohy, fungoval moderátor také jako malá nápověda. Po průchodu všemi úlohami následovalo krátké interview s moderátorem, kdy byl testovaný podroben několika otázkám týkajících se zejména celkového dojmu z webové aplikace. Na závěr dostali testovaní k vyplnění další dotazník, který se přímo týkal řešených úloh. 30

3.2. Průběh testování 3.2.1 Dotazník před testem 1. Kolik Vám je let (jedna odpověď): a) méně než 20 b) 20-25 c) 26-30 d) 31-35 e) 36-40 f) více než 40 2. Jaké je Vaše nejvyšší ukončené vzdělání (jedna odpověď): a) vyučen(a) b) vyučen(a) s maturitou c) středoškolské d) vysokoškolské 3. Počítač používám (jedna odpověď): a) denně b) několikrát do týdne c) několikrát do měsíce d) nikdy 4. Kde všude využíváte počítač (více odpovědí): a) doma b) v práci c) ve škole d) jinde 5. Jak často jste aktivní na sociální síti (jedna odpověď): a) ano, zpravidla každý den b) ano, několikrát do týdne c) mám účet na sociální síti, ale nevyužívám jej d) ne 31

3. Testování 3.2.2 Dotazník po testu 1. Setkal(a) jste se někdy s podobnou webovou aplikací (jedna odpověď): a) ano b) ne 2. Setkal(a) jste se při průchodu úlohami s některou, která se vám nepodařila vyřešit (jedna odpověď): a) ano, doplňte číslo úlohy: b) ne 3. Orientace na webovém portálu byla pro vás (jedna odpověď): a) jednoduchá b) mírně obtížná c) obtížná 4. Pokud vám orientace připadala mírně obtížná nebo obtížná, navrhněte změny ve vzhledu: 5. Jaké funkce vám na webovém portálu chybí: 6. Budete v budoucnu využívat webový portál pro milovníky čokolády (jedna odpověď): a) ano b) ne c) nevím 3.3 Výsledky testování Vyhodnocení testování proběhlo na základě analýzy dat získané z dotazníků, reakcí testovaných v průběhu samostatného řešení úloh a následných připomínek. Data z úvodního dotazníku: 40% testovaných je ve věkovém rozmezí 20-25 let, 30% je ve věku 26-30 let a po 10% pro věkové rozmezí pod 20 let, 31-36 let a 36-40 let. Nejvyšší dosažené vždělání testovaných je ze 70% středoškolské a z 30% vysokoškolské. Všichni testovaní uvedli, že počítač používají denně a to jak doma, tak v práci, tak i ve škole. 80% dotazovaných je aktivních na sociální síti každý den, 20% několikrát do týdne. 32

3.3. Výsledky testování Během samostatné práce na zadaných úlohách nikdo z testovaných nenarazil na větší problém, který by bylo třeba konzultovat. Jediné výtky směřovaly k nejasnému popisu několika položek menu, které při menším rozlišení prohlížeče zmizely a nahradila je ikona. Data ze závěrečného dotazníku: celých 90% dotazovaných se dosud nesetkalo s podobnou webovou aplikací, nikdo z dotazovaných nenarazil na úlohu, kterou by nebyl schopen vyřešit, a zároveň nikdo neměl problémy s orientací na webovém portálu. Na otázku, jaké funkce na webovém portálu dotazovanému chybí, se objevily tyto odpovědi: Chybí propracovanější tvorba jídelníčku - co např. spolupráce s výživovým poradcem nebo dietologem? Představoval by bych si větší výčet možných pohybových aktivit. Pro budoucí možné používání webového portálu se vyslovilo 60% testovaných, 20% odmítlo a 20% zatím neví. Webovou aplikaci se podařilo úspěšně otestovat a ověřit si, že je bez problému použitelná. Na základě výstupů z testování došlo k úpravě uživatelského rozhraní. K položkám menu, které se zobrazují jen jako ikona, byl přidán popis zobrazitelný po najetí myší. 33

Závěr Tato práce byla zaměřena na analýzu, návrh a implementaci webového portálu pro milovníky čokolády. Plně funkční webová aplikace prošla úspěšně uživatelskými testy. Hlavním přínosem webového portálu je inovativní přístup k problematice konzumace nezdravých potravin. Prostřednictvím webového portálu je možné nejen sledovat svou vlastní spotřebu čokolády, ale také mít ji pod kontrolou. Možností, jak v budoucnu webový portál rozšířit, je mnoho. Zdokonalit lze generování vhodného jídelníčku systémem a to jak po stránce implementační, tak i faktické - navázat spolupráci s odborníkem na výživu. Dále by stálo za úvahu propojení profilů těch uživatelů, kteří jsou aktivní v rámci sítě Runtastic 13, s profilem na webovém portálu. Data z této sítě by doplnila data o energetickém příjmu čokolády, což by ovlivnilo tvorbu stravovacího plánu a umožnilo tak jeho větší individualizaci. V neposlední řadě autor přímo počítá s vývojem mobilní aplikace pro telefony se systémem Android a Windows Phone. 13 Runtastic je aplikace pro chytré mobilní telefony určená pro zaznamenávání sportovních aktivit (běh, cyklistika, sjezdové lyžování atd.) a také sociální síť, kde se sdružují lidé s aktivním přístupem ke sportu. Webové stránky jsou dostupné na: https://www.runtastic.com. 35

Literatura [1] GEARY D., HORSTMANN C.: Core JavaServer Faces, Third Edition. 1. vyd. Upper Saddle River (New Jersey) : Prentice Hall Press, 2010. 672 s. ISBN 0-13-701289-6. [2] RUBINGER A. L., BURKE B.: Enterprise JavaBeans 3.1. 1. vyd. Sebastopol (California): O Reilly Media, 2010. 766 s. ISBN 978-0-596-15802-6. [3] Solení hesel aneb Sůl nad zlato [online]. 2007 [cit. 2013-11-06]. Dostupné z: http://www.phpguru.cz/clanky/soleni-hesel. [4] Java EE [online]. [cit. 2013-12-10]. Dostupné z: https://netbeans.org/kb/trails/java-ee.html. [5] The Life Cycle of a JavaServer Faces Page [online]. [cit. 2013-12-12]. Dostupné z: http://docs.oracle.com/javaee/5/tutorial/doc /bnaqq.html. [6] Oracle a Java - funkce a výhody [online]. [cit. 2013-12-12]. Dostupné z: http://www.oracle.com/cz/technologies/java /features/index.html. [7] Your First Cup: An Introduction to the Java EE Platform [online]. [cit. 2013-12-10]. Dostupné z: http://docs.oracle.com/javaee/7 /firstcup/doc/java-ee002.htm. [8] Search engine optimization [online]. [cit. 2013-12-28]. Dostupné z: https://edux.fit.cvut.cz/courses/bi-vwm/_media/lectures /lecture05.pdf. 37

Literatura [9] JERKOVIC I. J.: SEO Warrior. 1. vyd. Sebastopol (California): O Reilly Media, 2010. 472 s. ISBN 978-0-596-15707-4. [10] HTML <meta> Tag [online]. [cit. 2013-12-30]. Dostupné z: http://www.w3schools.com/tags/tag_meta.asp. 38

Příloha A Instalační a uživatelská příručka Příručka popisuje postup nasazení aplikace na server a návod k jejímu používání ze strany běžného uživatele a administrátora. A.1 Instalační příručka Pro úspěšné nasazení aplikace je třeba, aby konfigurace serveru splňovala tyto minimální požadavky: aplikační server Oracle GlassFish 4.0 a databáze Oracle MySQL. Před instalací aplikace na server je třeba zajistit, aby byla vytvořeno prázdné databázové schéma s názvem chocolate. Otevřete projekt v NetBeans IDE 14. Nastavte uživatelské jméno a heslo k databázi; k tomuto účelu jsou v projektu připraveny soubory persistence.xml a glassfish-resources.xml. Projekt spusťte. Pro přímé nasazení aplikace na aplikačním serveru Oracle GlassFish je na přiloženém CD připraven WAR 15 archiv. A.2 Uživatelská příručka A.2.1 A.2.1.1 Administrátor Přihlášení do aplikace Pro první přihlášení administrátora do aplikace, je-li databáze prázdná a žádný uživatelský profil ještě neexistuje, je možné využít připravená zadní 14 NetBeans IDE je vývojové prostředí volně dostupné na: https://netbeans.org/. 15 WAR (Web application ARchive) je soubor používaný k distribuci webových aplikací vytvořených na platformě Java EE. 39

A. Instalační a uživatelská příručka vrátka a přihlásit se jako administrátor bez nutnosti projít registrací. Na stránce s přihlašovacím formulářem je třeba zadat do pole jméno create- FirstAdminAccount a do pole heslo libovolný neprázdný řetězec. Následně je třeba vrátit se na úvodní stránku, znovu přejít k přihlašovacímu formuláři a zadat tyto údaje - jméno: admin, heslo: tajne. Pokud přihlášení neproběhlo úspěšně, zkontrolujte, jestli v databázi chocolate v tabulce usertable existuje záznam o nově vytvořeném uživateli. Pokud ne, opakujte celý postup znovu, anebo vytvořte v databázi nový záznam ručně. Jestliže budete vytvářet záznam ručně, je třeba nejdříve vytvořit v tabulce address záznam o adrese, poté v tabulce usertable vyplnit alespoň uživatelské jméno, heslo, pohlaví, uživatelskou roli (1 - administrátor, 0 - běžný uživatel) a identifikační číslo předem vytvořené adresy. A.2.1.2 Správa uživatelských účtů Kliknutím na položkou menu Uživatelé Seznam uživatelů se zobrazí kompletní výčet všech uživatelských účtů. Mezi uživateli je možné vyhledávat dle libovolného kritéria a řadit je poklepáním na první buňku sloupce, podle kterého chceme řazení provést. Pro správu uživatelských účtů jsou připravené tři akce - editace již existujících údajů, smazání uživatelského účtu nebo vytvoření nového uživatelského účtu. Editace uživatele Okno s editací údajů konkrétního uživatele se zobrazí při stisknutí tlačítka tužky. V dialogovém okně se nachází předvyplněné všechny údaje, které je možné upravit. Pro aplikování nových úprav je třeba stisknout tlačítko Uložit, pro návrat k původnímu stavu a zahození úprav tlačítko Zavřít. Smazání uživatele Smazat účet je možné kliknutím na ikonu křížku. Potvrzením akce v dialogovém okně, které se následně objeví, jsou všechna uživatelova data nenávratně smazána. Vytvoření nového uživatele Vytvořit uživatelský účet lze pomocí tlačítka Nový uživatel. Kromě změny role při editaci uživatele je toto je jediný způsob, jak z aplikace vytvořit dalšího administrátora systému. Při klasickém průchodu registrací je uživateli automaticky přiřazena role bežného uživatele. 40