Sem vložte zadání Vaší práce

Sem vložte zadání Vaší práce.

České vysoké učení technické v Praze Fakulta informačních technologií Katedra softwarového inženýrství

Bakalářská práce

Cesta k bohatství (internetová aplikace) Lukáš Kmoch

Vedoucí práce: Ing. Martin Půlpitel

22. května 2012

Poděkování Chtěl bych poděkovat Ing. Martinu Půlpitelovi za pomoc při psaní práce a jeho konstruktivní připomínky, stejně tak jako Ing. Josefu Gattermayerovi za oponenturu práce. V neposlední řadě děkuji také rodičům, za obrovskou trpělivost, kterou se mnou měli při psaní práce.

Prohlášení Prohlašuji, že jsem předloženou práci vypracoval samostatně a že jsem uvedl 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 22. května 2012

..................... 7

České vysoké učení technické v Praze Fakulta informačních technologií c 2012 Lukáš Kmoch. 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 Lukáš Kmoch. Cesta k bohatství (internetová aplikace): Bakalářská práce. Praha: ČVUT v Praze, Fakulta informačních technologií, 2012.

Abstract Bachelor’s thesis The way to wealth deals with designing and the implementation of an educational web game. The game should, using questions, educate its players. Questions, which should serve as a food for thought and stimulate desire to get financial education. The objective of this game is, similar to Robert Kiyosakis books [1], to increase financial IQ. The aim of this bachelor’s thesis is to choose the appropriate technology and use it for creation of an expandable web application which contains the game itself, discussion forum, players ranking and other functions. Keywords The way to wealth, education, web game, finance, business

Abstrakt Bakalářská práce Cesta k bohatství se zabývá návrhem a implementací webové vzdělávací hry. Hry, která by měla formou otázek vzdělávat hráče. Otázek, které donutí hráče k zamyšlení a touze sebevzdělávat se v oblasti financí. Hra se tak snaží, stejně jako Robert Kiyosaki ve svých knihách [1], zvýšit finanční IQ. 9

Cílem bakalářské práce je zvolit vhodnou technologii a pomocí ní vytvořit rozšiřitelnou webovou aplikaci, která obsahuje samotnou hru, diskusní fórum, žebříček hráčů a další funkce. Klíčová slova

Cesta k bohatství, vzdělání, webová hra, finance, podnikání

10

Obsah Úvod

17

1 O hře 19 1.1 Myšlenka hry . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 1.2 Pro koho je hra určena . . . . . . . . . . . . . . . . . . . . . . . 20 1.3 Otázky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 2 Rešerše existujících řešení 21 2.1 Dobyvatel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 2.2 Cashflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 2.3 Srovnání . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 3 Analýza a návrh 3.1 Agilní metodiky . . . . 3.2 Požadavky na aplikaci 3.3 Use case . . . . . . . . 3.4 Grafický návrh . . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

4 Volba technologie 4.1 Volba programovacího jazyku . . . 4.2 Volba databáze pro datovou vrstvu 4.3 Volba serveru pro webovou aplikaci 4.4 O zvolené technologii . . . . . . . . 4.5 CSS . . . . . . . . . . . . . . . . . 4.6 AJAX . . . . . . . . . . . . . . . . 4.7 jQuery . . . . . . . . . . . . . . . .

. . . .

. . . . . . .

. . . .

. . . . . . .

. . . .

. . . . . . .

. . . .

. . . . . . .

. . . .

. . . . . . .

. . . .

. . . . . . .

. . . .

. . . . . . .

. . . .

. . . . . . .

. . . .

. . . . . . .

. . . .

. . . . . . .

. . . .

. . . . . . .

. . . .

. . . . . . .

. . . .

. . . . . . .

. . . .

. . . . . . .

. . . .

. . . . . . .

. . . .

23 23 25 26 26

. . . . . . .

29 29 32 32 32 38 38 38

5 Realizace 39 5.1 Subversion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 5.2 Přihlašování . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 11

5.3 5.4 5.5

Ovládací prvky . . . . . . . . . . . . . . . . . . . . . . . . . . . Databáze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Požadované funkce . . . . . . . . . . . . . . . . . . . . . . . . .

6 Testování 6.1 Unit testy . . . . 6.2 UI testy . . . . . 6.3 Web performance 6.4 Load test . . . . 6.5 Shrnutí testů . .

. . . . . . test . . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

41 43 44 47 47 53 54 54 54

7 Nasazení 59 7.1 ASP2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 7.2 Cloud Computing a Windows Azure . . . . . . . . . . . . . . . 60 8 Dokumentace 63 8.1 Doxygen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Závěr 65 Návrhy do budoucna . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Literatura

67

A Seznam použitých zkratek

71

B Instalační a uživatelská příručka 73 B.1 Instalace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 B.2 Spuštění . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 B.3 Uživatelská příručka . . . . . . . . . . . . . . . . . . . . . . . . 74 C Obsah přiloženého CD

77

12

Seznam obrázků 3.1 3.2 3.3 3.4

Agilní vývojový cyklus software. FDD vývojový cyklus software . Use case aplikace . . . . . . . . . Rozvržení stránek CKB . . . . .

. . . .

24 25 26 28

4.1 4.2

Popularita webových serverů . . . . . . . . . . . . . . . . . . . . . Model View Controller . . . . . . . . . . . . . . . . . . . . . . . . .

33 34

5.1 5.2 5.3

Membership provider . . . . . . . . . . . . . . . . . . . . . . . . . . Widget hodnocení otázky . . . . . . . . . . . . . . . . . . . . . . . Diagram databáze CKB . . . . . . . . . . . . . . . . . . . . . . . .

40 42 43

6.1 6.2 6.3 6.4 6.5 6.6

Výsledky unit testů . . . . . . Výsledky coded UI testů . . . Load test summary . . . . . . Load test summary . . . . . . Load test graf . . . . . . . . . Load test treshold violations

. . . . . .

52 53 55 56 57 58

7.1

Cloud Computing

. . . . . . . . . . . . . . . . . . . . . . . . . . .

60

B.1 Vzhled aplikace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . B.2 Vzhled hry. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

75 76

. . . . . .

. . . . . .

13

. . . .

. . . . . .

. . . .

. . . . . .

. . . .

. . . . . .

. . . .

. . . . . .

. . . .

. . . . . .

. . . .

. . . . . .

. . . .

. . . . . .

. . . .

. . . . . .

. . . .

. . . . . .

. . . .

. . . . . .

. . . .

. . . . . .

. . . .

. . . . . .

. . . .

. . . . . .

. . . .

. . . . . .

. . . .

. . . . . .

. . . .

. . . . . .

. . . .

. . . . . .

. . . .

. . . . . .

Seznam tabulek 3.1

Statistika rozlišení monitorů . . . . . . . . . . . . . . . . . . . . . .

15

27

Úvod „Myšlení je nejtěžší práce, která existuje. To je pravděpodobně důvod, proč tak málo lidí myslí.“[2] Henry Ford Myšlenka je základ každého bohatství. Bill Gates by se nikdy nemohl stát nejbohatším mužem planety, pokud by nepřemýšlel. Mark Zuckerberg by nemohl stát na počátku obrovsky úspěšné webové aplikace Facebook, nebýt prvotní myšlenky. Bohatství je všude kolem nás, stačí se pro něj „ohnout“. A právě myšlenka stojí i na počátku webové aplikace Cesta k bohatství – myšlenka naučit se přemýšlet a zároveň vzdělat v oblasti podnikání, které umožňuje myšlenku realizovat. Bakalářská práce Cesta k bohatství (on-line hra) tak má za cíl vytvořit určitou cestu, která by zábavnou formou nasměrovala hráče k získání potřebných vědomostí. A touto cestou je webová aplikace. Webová aplikace, která je přístupná každému bez rozdílu věku, pohlaví a vzdělání. Aplikace, kterou je možné hrát i na starém počítači. Aplikace, která je 100% funkční, otestovaná a připravena pro využívání libovolným počtem hráčů. Aplikace, která obsahuje hru, jež hráče zaujme. Mimo samotné hry, která vzdělává hráče, se aplikace neobejde bez dalších částí. Tyto části hru dělají zábavnější a hratelnější. CKB 1 by tak neměla umožňovat pouze hraní hry. Měla by umožňovat ukládání výsledků, aby spolu mohli jednotliví hráči porovnávat dosažené znalosti a mohli tak mezi sebou soupeřit o to, kdo je tím nejlepším. Dále by aplikace měla obsahovat fórum, kde by hráči mohli diskutovat o hře a o otázkách samotných, stejně jako by její součástí mohla být část pro hodnocení otázek a tvorbu otázek nových. Otázky by tak mělo být možné jednoduše přidávat a uživatelé by si sami mohli zvolit znalosti, které považují za zajímavé a důležité.

1

CKB, Cesta k bohatství

17

Úvod Cílem práce tak je vytvořit základ aplikace, který by byl lehce rozšiřitelný a obsahoval všechny požadované části. Navrhnout vzhled aplikace, který nového návštěvníka stránek zaujme a bude obsahovat originální zajímavou myšlenku. Něco čím se odliší od ostatních webových aplikací. Nakonec aplikaci nasadit na vhodný webový server, aby si aplikaci mohl kdokoliv zahrát.

18

Kapitola

O hře 1.1

Myšlenka hry

Cest k bohatství (a teď budu mluvit pouze o tom finančním) je nesčetné množství! Ať už je to cesta přes dobře placené zaměstnání, podnikání, zdědění finančních prostředků od rodičů a nebo talent na sport. Ta, na kterou nás tato hra připraví, je ale pouze jedna z nich, a to právě cesta podnikání. Proč právě podnikání? Protože podnikání umožňuje realizovat myšlenku. Není třeba mít žádný talent jako je tomu u sportu, stejně jako není třeba mít ani velké množství peněz. Jediné, co je třeba pro začátek podnikání, jsou vhodné znalosti a odhodlání něčeho dosáhnout. Co Vás tedy hra naučí? Odpovědět na teoretické, ale i praktické otázky z těchto oblastí: • Finance • Investování • Podnikání • Vedení týmu • Práce s lidmi • Organizace • Motivace Cílem hry ale není pouze se naučit zodpovědět správně dané otázky. Cílem hry je naučit se přemýšlet, a to přemýšlet tak, jako to dělají bohatí lidé. 19

1

1. O hře

Pěstování peněz Ve hře se můžete vydat dvěma směry. První možností je postupně procházet otázky z jednotlivých oblastí a tím "pěstovat"peníze na svém stromě. Druhou možností je tzv. volná cesta, kdy náhodně odpovídáte na otázky, diskutujete o otázkách a hádáte se o jejich správnosti. Pokud se rozhodnete pro první možnost, čeká vás výběr z několika témat. Pro splnění každého tématu musíte dosáhnout úspěšnosti alespoň 19 z 20 otázek. Po splnění tématu se zvedne vaše úroveň, zároveň také vypěstujete další bankovky na vašem stromě, který vás provází skrze celou hru. Současný vzhled stromu najdete pod záložkou Hodnocení.

1.2

Pro koho je hra určena

Hra je určena pro kohokoliv, kdo se rád vzdělává, kdo chce získat vzdělání v některé z oblastí nebo jen vypěstovat co největší strom. Hru si však zároveň můžete zahrát, i když máte jen chvilku času a chcete pouze zkusit pár otázek ve volné hře.

1.3

Otázky

Ukázka několika otázek, které hra obsahuje. • V který den byl tzv. Černý pátek? • Zkratka HDP označuje? • Největší HDP má stát? • Nejvíce zadlužený stát je? (Největší dluh v % HDP) • Co znamená zkratka RPSN? • Co to je Petrodolar? • Jaká je snížená sazba DPH?(rok 2012) • Jaká je základní sazba DPH?(rok 2012) • Pojem Bear market označuje? • Co to je pákový efekt? • Perpetuita je? • Co to znamená refinancovat hypotéku? Další otázky se nacházejí v hře. 20

Kapitola

Rešerše existujících řešení Aplikací, které se podobají CKB není mnoho. Mezi ty nejvíce podobné patří český Dobyvatel [33] a Cashflow [32], které se pokusím v následujících řádcích představit.

2.1

Dobyvatel

Aplikace Dobyvatel je jednou z velmi oblíbených českých her – obsahuje obrovskou základnu hráčů. Tato hra je postavena na jednoduché logice, kdy se hráč snaží obsadit co největší území zvoleného státu. Pro obsazení některé z částí státu hráč musí správně zodpovědět danou otázku. Hlavním rozdílem mezi CKB a Dobyvatelem je však téma otázek. Dobyvatel nemá pevně stanovené téma otázek.

Implementace Základ aplikace Dobyvatel je implementován v jazyku PHP, a to ať už jde o žebříček hráčů, registraci do hry atd. Samotná hra je pak pomocí Adobe Flash. Nejde však pouze o hru: po zaregistrování se hráč může účastnit online chatu, turnajů, přidávat si přátele, a to vše právě pomocí již zmiňovaného Adobe Flash.

2.2

Cashflow

Cashflow je online hra vytvořena Robertem Kiyosakim. Původně šlo o deskovou hru, ta ale byla rozšířena i na internet. Hlavním záměrem hry je zvýšit finanční IQ hráče a dostat se z tzv. krysího kolečka, přičemž zvyšování neprobíhá formou otázek, ale hraním hry zaměřené na investování. Hráč se tak musí správně rozhodovat a investovat co nejvýhodněji, a to tak, aby se dostal z krysího závodu. 21

2

2. Rešerše existujících řešení

Implementace Podobně jako Dobyvatel využívá odlišný jazyk pro aplikaci a hru. Aplikace je postavena na ASP.NET Web Forms a samotná hra znovu na Adobe Flash.

2.3

Srovnání

Přesto, že Cesta k bohatství, Dobyvatel a Cashflow mají několik společných rysů, srovnání je takřka nemožné. Dobyvatel totiž sice obsahuje podobně jako CKB otázky, myšlenka hry je však absolutně odlišná. U Cashflow jde o přesně opačný problém – myšlenka hry je velmi podobná, za to samotný způsob hraní je odlišný.

22

Kapitola

Analýza a návrh 3.1

Agilní metodiky

Důležitým bodem vývoje software je ujasnit si jakým způsobem bude vlastně software vyvíjen. V dnešní době existuje velké množství přístupů, které se zabývají vývojovým cyklem softwarového projektu. V posledních letech se upouští od klasických přístupů, jakými je například vodopádový nebo inkrementální přístup a začínají se využívat převážně agilní přístupy. Jak už napovídá sám název, hlavním kritériem vývoje takového software je rychlost2 . Na začátku projektu se stanoví nejmenší potřebná funkčnost a vývoj je přizpůsoben tak, aby jí bylo dosaženo v co nejmenším možném čase (probíhá takzvané období sprintu). Při agilním vývoji se na rozdíl od klasických metod vývoje software stanoví čas, kdy bude jeho vývoj ukončen. Tím, co se tedy mění, je pouze funkčnost celé aplikace. Dosáhne-li se požadované minimální funkčnosti rychleji než v požadovaném čase, stanoví se další funkce aplikace a vývoj tak pokračuje. Tento proces probíhá tak dlouho, dokud jsou požadovány další funkce a není dosaženo stanoveného data ukončení vývoje [3]. Agilní vývoj software se dá znázornit diagramem na obrázku 3.1. Využití agilních metodik při vývoji CKB je vhodné díky pevně danému datu odevzdání bakalářské práce. je třeba však ještě rozhodnout, kterou z možných agilních metodik využít. • TDD, Test-driven development. • XP, Extreme Programming. • AUP, Agile Unified Process. • FDD, Feature Driven Development. 2

Agile, hbitý

23

3

3. Analýza a návrh

Obrázek 3.1: Agilní vývojový cyklus software. Převzato z [7].

3.1.1

Feature-driven development

FDD nepopisuje celý vývoj software; zabývá se pouze částí návrhu a implementace – FDD tedy neřeší, kdy budou probíhat samotné testy. Testování aplikace tak může probíhat před samotným vývojem aplikace podle principu TDD a nebo až po napsání samotné featury. Vývoj aplikace CKB využívá druhý jmenovaný přístup. Samotné testování tedy probíhalo až po implementaci featury (více o testování aplikace v kapitole 6). Vývoj software podle FDD prochází 5 fázemi, přičemž poslední dvě se stále opakují. Viz obrázek 3.2. V první fázi je vytvořen model, který popisuje celou aplikaci. Cílem tohoto kroku ale není vytvořit přesný popis aplikace, model proto nemusí mít žádnou formální podobu. Hlavním cílem je, aby celý tým dobře, a pokud možno stejně, pochopil model řešeného problému. V druhé fázi je vytvořen seznam všech featur, přičemž featurami jsou v tomto případě všechny zákazníkem ohodnotitelné funkce.

24

3.2. Požadavky na aplikaci

Obrázek 3.2: FDD vývojový cyklus software

V třetí fázi vývoje je cílem vytvořit plán prací a přidělit featury hlavnímu programátorovi, který zodpovídá za jejich vývoj. Čtvrtá fáze se zabývá samotným návrhem zvolené featury; s celým týmem se procházejí jednotlivé požadavky a model se upravuje tak, aby obsahoval všechny detaily pro vytvoření požadované vlastnosti. V páté fázi již probíhá samotná implementace featury, kdy probíhá také i samotné testování (ať už před napsáním samotného kódu nebo až po napsání). Další informace o FDD lze nalézt [3].

3.2

Požadavky na aplikaci

Požadavky na aplikaci byly rozděleny do dvou částí: požadavky na uživatelské prostředí a požadavky systémové. Uživatelské: • Jednoduchý a zároveň zajímavý grafický design • Registrace hráčů • Možnost uchování výsledků v databázi • Zobrazení žebříčku hráčů • Možnost přidávání a mazání otázek • Umožnit hráčům hodnocení otázek • Jednoduché fórum pro diskuzi 25


Obrázek 3.3: Use case aplikace

Systémové • Možnosti animace • Vyhnout se již zastaralému Adobe Flash • Snadná testovatelnost • Levný hosting webového serveru • Levný a zároveň výkonný hosting SQL serveru

3.3

Use case

Požadované funkce aplikace byly zakresleny do use case diagramu 3.3.

3.4

Grafický návrh

Při návrhu webových stránek je důležitá volba šířky stránky. V dnešní době spousta počítačů využívá obrovské 20" a větší monitory s rozlišením 1600x900. Na druhou stranu existuje i mnoho notebooků s 15" a menšími monitory, které využívají rozlišení 1024x768. Ze statistik 3.4 vyplývá, že nejvíce počítačů využívá rozlišení 1366x768. 26

3.4. Grafický návrh Rozlišení 1366x768 1280x1024 1024x768 1280x800 1680x1050 1920x1080 1440x900 1600x900

16.04-22.04.2012 16.89% 13.71% 13.66% 12.25% 6.04% 5.47% 5.43% 2.64%

18.04-24.04.2011 11.64% 16.16% 18.55% 14.48% 6.66% 3.80% 6.08% 1.76%

19.04-25.04.2010 5.50% 18.47% 24.73% 16.84% 6.74% 1.93% 6.48% 0.78%

Tabulka 3.1: Statistika rozlišení monitorů. Převzato z [8].

V tabulce je ještě jeden důležitý údaj: 13.66% počítačů využívá nízké rozlišení 1024x768. Proto je šířka webu CKB zvolena tak, aby i uživatelé se šířkou monitoru 1024 pixelů mohli stránky prohlížet bez jakýchkoli problémů.3

GRID 960 Stránky optimalizované pro šířku 1024px by měly obsahovat okraje, a proto se využívá takzvaný 960 grid [12]. Jak už vyplývá z názvu, jde o návrh webových stránek o šířce 960px. Tento grid systém však neurčuje pouze šířku webové stránky; při využití grid systému je totiž celá webová stránka rozdělena na jednotlivé sloupce o pevně dané šířce. Webové stránky CKB využívají 16 sloupcový systém, kdy každý sloupec má šířku 40px a na každé straně 10px okraje.

Rozvržení stránky Rozdělení stránky na sloupce samozřejmě nestačí, musel být také vytvořen kompletní layout4 stránky s jasně daným umístěním hlavičky, patičky, loga, případných reklam a dalších prvků. Základní rozložení stránky je na obrázku 3.4. Při návrhu byla brána v potaz i možnost vložení reklamy, proto jsou v návrhu dvě místa, kam by reklama v budoucnu mohla být vložena. Místo v horní části je ideální pro banner5 o velikosti 745x100px a do pravé spodní části může být umístěn například banner o velikosti 160x600px. V návrhu se samozřejmě počítá i se samotným prostorem pro hru, který má rozměry 640x480px.

3

Rozlišení s šířkou menší než 1024 pixelů je až na 18. pozici v zastoupení 0.46%. Layout, rozvržení stránky 5 Banner, reklamní proužek 4

27


Obrázek 3.4: Rozvržení stránek CKB

Vzhled Vzhled webových stránek je jedna z nejdůležitějších částí návrhu. Je to totiž právě vzhled (a v neposlední řadě samozřejmě zajímavý obsah stránek), co udrží náhodného návštěvníka na stránce. Grafickým návrhem webových stránek se zabývá mnoho talentovaných designérů, a proto je velmi těžké vytvořit web, který svým vzhledem opravdu zaujme. Shánět kvalitního designéra je složité a pochopitelně velmi drahé. Nabízí se však na tomto místě naštěstí mnoho alternativních řešení, jak dosáhnout kvalitního a působivého webu. Jednou z těch, kterou lze považovat za velice zajímavou, je využít některý z webů, jakým je třeba 99design. Tyto webové stránky jsou shromaždištěm grafických designérů. Jak tyto stránky fungují? Zadavatel na stránky vloží představu o vzhledu stránek; barvě, o tom, jaké texty by měla stránka obsahovat a další požadavky. Vloží cenu a datum do kdy má být návrh hotový. Designéři, které nabídka zaujala, začnou vypracovávat návrhy a umísťovat je na web. Na konci období si jen vyberete ten nejlepší návrh. Toto opravdu elegantní řešení však stále přináší mnoho problémů. Tím hlavním je, že za pár korun nepřesvědčíte žádného návrháře, aby návrh webu udělal a nebo stránky nebudou v požadované kvalitě. Více o 99designs [13].V takové situaci se nedá dělat nic jiného, než se spolehnout na vlastní grafické schopnosti programátora a využít co nejvíce prvků poskytovaných zvolenou technologií.

28

Kapitola

Volba technologie Prvním krokem při tvorbě aplikace je volba vhodného jazyka umožňující vývoj webové aplikace. Zde je seznam takových jazyků, mezi kterými je možno volit.

4.1

Volba programovacího jazyku

• PHP • Ruby • Java • Flash • ASP.NET Na internetu je velká řada článků pojednávajících o tom, jak vybrat vhodný jazyk pro tvorbu webové aplikace [9]. Probíhají vášnivé diskuze o tom, který jazyk je ten nejlepší. Situace je ještě zkomplikována tím, že pro každý jazyk se nabízí řada frameworků. Pro porovnání jednotlivých frameworků by bylo třeba mít dostatečné informace o všech frameworkách, nehledě na to, že frameworků pro vývoj webových aplikací je obrovské množství a porovnávat všechny dohromady je v podstatě nemožné – proto byli vybráni jen ty nejvýznamnější zástupci pro každý jazyk.

PHP Nejznámějším PHP frameworkem je Zend Framework. Při volbě pro PHP, ale nejsou tak důležité vlastnosti frameworku jako samotný jazyk PHP. • PHP je jednoduchý jazyk vhodný pro začínající webové vývojáře. • Největší množství knih a článků; na téměř všechny problémy lze nalézt řešení. 29

4

4. Volba technologie Více informací o PHP [16].

Ruby – Ruby on Rails Motem Ruby on Rails je "Konvence nad konfigurací"a "Neopakujte se". Programátor by tedy měl měnit pouze věci, jejichž nastavení se liší od defaultního. • Model-View-Controller. • Architektonický vzor REST. • Podpora AJAX. • Generování hlavní části aplikace pomocí Scaffolding. Více informací o JSF [15].

Java – JSF • Založeno na oblíbeném jazyku Java. • Odděluje uživatelské rozhraní a aplikační logiku. • Definice uživatelského rozhraní pomocí XML. Více informací o JSF [17].

Java – GWT Velmi zajímavá volba (obrovský nárust zájmu o GWT). • Založeno na oblíbeném jazyku Java. • Nestandardní možnost vývoje. GWT není tak úplně framework – jde spíše o sadu nástrojů. • Převod kódu Java do JavaScriptu. • Podpora AJAX. • Menší uplatnění na trhu práce. Vývoj za pomoci GWT je poznamenán omezením, která přináší JavaScript. Tato omezení se Google snaží vyřešit vytvořením vlastního programovacího jazyku pro webové aplikace s názvem Dart. Přesto, že Google oznámil, že vývoj GWT bude samozřejmě pokračovat, je pohled směřován převážně k Dart a jen čas ukáže, jak se tento nový jazyk uchytí.6 Více informací o GWT [18]. 6

30

17. února 2012 byl uvolněn experimentální prohlížeč Chromium podporující Dart.

4.1. Volba programovacího jazyku

Flash Základním požadavkem na aplikaci CKB je vyhnout se již trochu zastaralému Adobe Flash a tak Flash automaticky nepřipadá v úvahu. Přesto by bylo dobré alespoň uvést důvody, proč se využití Flash vyhnout. • Potřeba instalace modulu do prohlížeče. • Nelze přistupovat přímo k databázi. • Nejistá budoucnost s nástupem HTML5. Více informací o Flash [29].

ASP.NET – ASP.NET MVC • Nezávislost na programovacím jazyku. Kód můžeme psát v C#, VB.NET a dalších .NET jazycích. • Výkon. Vysoká rychlost běhu aplikací. • Skvělé vývojové prostředí – Visual Studio nemá ve světě vývoje software konkurenci a nabízí obrovskou řadu výhod, čímž urychluje psaní aplikací nejen v ASP .NET. • Snadné testování. • Podpora AJAX. Více informací o ASP.NET MVC[10] nebo [4]. Při porovnání jednotlivých frameworků vychází jako nejlepší z možností jeden z následující trojice: Ruby on Rails, GWT a ASP.NET MVC. Ruby on Rails a ASP.NET MVC jsou založeny na návrhovém vzoru MVC a tak umožňují snadné testování. Jak je tomu u GWT? Je několik návrhových vzorů, které se dají využít pro vytvoření testovatelné GWT aplikace, a tím je právě například také MVC – takže ani testování neulehčí nakonec volbu frameworku. Jen na detailnější porovnání těchto tří možností by se dala napsat nejedna bakalářská práce. Každý z těchto tří frameworků má své výhody a nevýhody, ale je mezi nimi jeden zásadní rozdíl: zkušenosti programátora s Ruby, Javou a C# jsou absolutně rozdílné. Největší a zároveň nejlepší zkušenosti jsou právě s posledním jmenovaným jazykem C#. Zvoleným frameworkem pro aplikaci CKB tak je ASP.NET MVC. Tato volba s sebou přináší dvě výhody. Tou první je vývojové prostředí Visual Studio, což kromě zrychlení psaní aplikace (díky IntelliSense) poskytuje i integrované nástroje pro testování aplikace. Pro psaní unit testů tak nemusí být využívány služby některého z dalších softwarů a stejně tak pro testy UI může být využito coded UI testů, které jsou součástí Visual Studia. Druhou výhodou je podpora jQuery [24], které usnadňuje tvorbu grafických prvků stránky. 31

4. Volba technologie

4.2

Volba databáze pro datovou vrstvu

• MySQL • PostgreSQL • Microsoft SQL Server • Oracle Vzhledem k volbě ASP.NET, které je Microsoft frameworkem, se jeví jako nejlepší volba Microsoft SQL Server. Kombinace dvou technologii Microsoftu zajišťuje spolehlivost a jistotu.

4.3

Volba serveru pro webovou aplikaci

Při vývoji aplikace za pomoci ASP.NET práci se serverem ulehčí ASP.NET development server, který je součástí Visual studia – ten navíc postačí prakticky při celém vývoji aplikace. Pokud má být aplikace uvolněna k použití, development server už nevystačí, a proto je třeba rozhodnout, jaký server použít. Možnosti jsou naštěstí vlastně jen dvě. • IIS 7.5 • Apache Při pohledu na statistiky 4.1 je Apache mnohem používanější než IIS, jeho obliba v posledních letech velmi vzrostla. Problém při volbě Apache serveru není ani podpora ASP.NET, ten je totiž možné na Apache serveru rozjet přes Mod mono [11]. Tento přístup však není doporučovaný a hlavní problém nastává při hledání hostingu. Hostingů, které poskytují kombinaci Apache + ASP.NET + MS SQL, není mnoho. Za to pro hosting IIS serveru existuje velké množství možností. Jednou z nich je freehosting poskytovaný ZONER software, a.s. [27] a nebo hosting IIS na cloudu Windows Azure 7.2. A právě z důvodu hostingu byl zvolen jako webový server IIS.

4.4

O zvolené technologii

ASP.NET ASP.NET je framework pro tvorbu dynamických webových stránek, je přímým nástupcem technologie ASP a nabízí řadu výhod. Mezi hlavní z nich patří množství jazyků, ve kterých se webové stránky mohou psát, a to ať už jde o defaultní Visual Basic, C# nebo J#. Stránky ASP.NET jsou kompilovány, díky čemuž je aplikace rychlejší. ASP.NET obsahuje také například knihovnu 32

4.4. O zvolené technologii

Obrázek 4.1: Popularita webových serverů. Převzato z [30].

ASP.NET Ajax, díky které lze jednoduše aktualizovat část stránky bez nutnosti odesílat serveru celou stránku. Více informací o ASP.NET [10] Při psaní webových stránek za pomoci ASP.NET framework ještě nabízí volbu z dalších tří součástí: Web Pages, Web Forms a nebo MVC. Web Pages jsou obecně nejjednodušší; poskytují rychlou cestu, jak zkombinovat kód serveru a HTML. Web Forms využívají Page controller pattern a jsou vhodné především pro vývojáře klasických desktop aplikací. Ovládací prvky Web Forms jsou totiž velmi podobné těm, které znají z desktopových aplikací. MVC jsou nejnovější, představují velmi mocný nástroj, a to hlavně díky velmi snadnému testování [10].

ASP.NET MVC ASP.NET MVC je, jak už z názvu jasně vyplývá, založen na návrhovém vzoru Model-View-Controller, který rozděluje aplikaci na tři části. Jak znázorňují šipky na obrázku 4.2 jednotlivé vrstvy jsou společně provázány. 33


Obrázek 4.2: Model View Controller

Model Implementuje businnes logiku a není přímo závislý na žádné další části architektury. Přiklad Modelu Příklad Modelu (v jazyce C#) pro tvorbu otázky: 1 p u b l i c c l a s s QuestionModel 2 { 3 [ Key ] 4 public i n t QuestionId { get ; s e t 5 p u b l i c s t r i n g Question { get ; s e t 6 p u b l i c s t r i n g RightAnswer { g e t ; 7 p u b l i c s t r i n g Answer1 { g e t ; s e t 8 p u b l i c s t r i n g Answer2 { g e t ; s e t 9 p u b l i c s t r i n g Answer3 { g e t ; s e t 10 }

; } ; } set ; } ; } ; } ; }

Controller Zpracovává požadavky od View. Controller má přímý odkaz na Model a může tak zpracovávat data modelu a zároveň má odkaz na View, kterému může data získaná z modelu zaslat. 34

4.4. O zvolené technologii Příklad Controlleru Příklad Controlleru (v jazyce C#), který využívá třídu QuestionModel. Tu zasílá pro zobrazení do View: 1 public c l a s s PagesController : Controller 2 { 3 p u b l i c A c t i o n R e s u l t ShowQuestion ( ) 4 { 5 // Zde by b y l o z í sk án í dat z datab á z e 6 QuestionModel q u e s t i o n = new QuestionModel { 7 Q u e s t i o n = "V k t e r ý den b y l t z v . Če r n ý pá t e k ? " ; 8 RightAnswer = "Út e r ý " ; 9 Answer1 = " St ř eda " ; 10 Answer2 = "Čt v r t e k " ; 11 Answer3 = "Pá t e k " ; 12 } 13 r e t u r n View ( q u e s t i o n ) ; 14 } 15 }

View Obsahuje definici UI. Zpracovává data od controlleru, a zobrazuje je do uživatelského prostředí. Zároveň může sloužit i k získání dat od uživatele, které přepošle controlleru ke zpracování. Příklad View Příklad View (v jazyce C#), který zobrazí data zaslaná z Controlleru: 1 2 3 4 5 6 7 8 9

@model QuestionModel
Otá zka :

@Model . RightAnswer

@Model . Answer1

@Model . Answer2

@Model . Answer3

35

4. Volba technologie Princip MVC Ze zdrojového kódu je vidět, jak ASP.NET MVC funguje. Nejdříve je zavolán příslušný controller (podle routovacích pravidel), který získá model s příslušnými daty z databáze. Poté zavolá view, kterému získaná data předá k zobrazení. View se nakonec postará pouze o zobrazení dat v uživatelském prostředí [4]. Routovací pravidla Routovací pravidla slouží k rozpoznání, který controller zavolat při zadání URL adresy [4]. Při vytvoření nového projektu v ASP.NET MVC projekt poskytuje základní routovací pravidlo, které nalezneme v souboru Global.asax.cs 1 2 3 4 5 6 7 8

r o u t e s . MapRoute ( " D e f a u l t " , // Route name " { c o n t r o l l e r }/{ a c t i o n }/{ i d } " , // URL with p a r a m e t e r s new { c o n t r o l l e r = " Pages " , a c t i o n = " Index " , i d = UrlParameter . O p t i o n a l } // Parameter d e f a u l t s ); Routovací pravidlo je, jak bude ještě dále popsáno, vcelku jasné. První parametr udává název routovacího pravidla. Druhý parametr udává, jak samotné routování probíhá. První část v URL udává, jaký controller bude zavolán, zatímco druhá určuje jaká akce a třetí část URL se předává samotné akční metodě jako vstupní parametr. Třetí parametr routovacího pravidla udává defaultní hodnoty. Proto například při požadavku na zobrazení stránky / bude URL automaticky změněna na /Pages/Index Lze samozřejmě dodefinovat i další pravidla jako například:

1 2 3 4 5 6 7 8

r o u t e s . MapRoute ( " Forum " , // Route name " Pages /Forum/{ page } " , // URL with p a r a m e t e r s new { c o n t r o l l e r = " Pages " , a c t i o n = " Forum " , page = " 0 " } // Parameter d e f a u l t s ); Toto pravidlo způsobí, že při zadání adresy Pages/Forum bez parametru page, bude do URL automaticky za parametr page, dodána defaultní hodnota (v tomto případě 0).

36

4.4. O zvolené technologii

ADO.NET Entity framework EF je jedním z možných způsobu přístupu k datům uloženým v databázi. Poskytuje Object Relational Mapping, který mapuje relační databázové schéma na objekty. Oproti jeho konkurentovi LINQ to SQL nabízí řadu výhod. Mezi hlavní takové výhody EF patří: • Nezávislost na databázi: MySQL, Oracle, PostreSQL, . . . • Možnost vytvořit vztah M:N bez „mezientity“ • Dlohodobě udržitelná aplikace • Dotazovací mechanismus EntitySQL EF pracuje s konceptuálním modelem, který je zcela nezávislý na databázi, přičemž jsou tři možnosti, jak s tímto konceptuálním modelem pracovat. Database first Nejdříve se vytvoří databáze a z té poté je vygenerován entity data model. Model first V tomto přístupu je více způsobů, jak EF využít. Například se nadefinují entity pomocí EDM designéru a poté se vygeneruje script pro vytvoření databáze pomocí Generate Database Script Wizard. Code first Tento přístup je použit v aplikaci Cesta k bohatství. Jde o poslední a nejnovější z možností. Tato funkcionalita je poprvé v EF 4.1. V přístupu code first se nejdříve definuje model pomocí CLR tříd. Tyto třídy se pak mapují na existující databázi, nebo se nechá EF vytvořit databázové schéma zcela automaticky. Další informace o ADO.NET Entity frameworku [19].

37


4.5

CSS

CSS je jazyk pro definování vzhledu a rozvržení webových stránek. Pomocí CSS se přistupuje k jednotlivým prvkům HTML, XHTML užitím selektorů. Jednotlivým prvkům stránek se nastavuje pozice, barva písma, barva pozadí apod. Například: 1

. class_name { c o l o r : b l a c k } ) Vybere prvky, které patří do třídy class_name a těmto prvkům nastaví barvu na černou. CSS mohou také vybírat prvky podle identifikátoru nebo na základě jména.

1 #id_name { c o l o r : b l a c k } 2
{ c o l o r : r e d } Aplikace CKB využívá CSS verzi 3.0, která umožňuje nastavovat nejnovější vlastnosti prvkům (například nastavení kulatých rohů). Bohužel některé z těchto vlastností nejsou některými staršími prohlížeči podporovány (například v Internet Exploreru verze 8 kulaté rohy neuvidíte). Více o tom, jak jsou vlastnosti CSS využity v aplikaci CKB, se dozvíte v kapitole 3.4 Více o CSS na stránkách [14].

4.6

AJAX

Asynchronous JavaScript and XML [10] je označení pro přístup, ve kterém je pomocí JavaScriptu v kombinaci s CSS, možné implementovat prvky, se kterými lze pracovat bez potřeby obnovování celé stránky. Lze tak vložit do webové stránky ovládací prvek, který je odesílán asynchronně. ASP.NET MVC 3 obsahuje rozsáhlou podporu AJAXu a při založení nového MVC projektu jsou již všechny potřebné skripty vloženy do složky Scripts. AJAX umožňuje také jednoduché a rychlé psaní asynchronních ovládacích prvků. Více o tom, jak je AJAX využit v aplikaci CKB, se dozvíte v kapitole 5.3.

4.7

jQuery

jQuery je javascriptová knihovna, která umožňuje pracovat s jednotlivými prvky html stránky. Pomocí jQuery se prvkům nastavují animace, reakce na události a další vlastnosti. Mimo to může jQuery také manipulovat a upravovat CSS styly jednotlivých prvků, a tím dynamicky měnit vzhled stránek bez nutnosti znovu načítat stránku. jQuery navíc poskytuje možnost vložení uživatelských prvků, mezi které patří tlačítka, dialogy, ikony atd. Těmto prvkům pak lze nastavit vzhled ručně za pomoci CSS a nebo si CSS nechat vygenerovat pomocí ThemeRoller. Další informace o jQuery a ThemeRoller [24].

38

Kapitola

Realizace 5.1

Subversion

Ať už vývoj aplikace probíhá pouze jedním vývojářem a nebo ve velké skupině programátorů, vývoj by se neobešel bez SVN. 7 Subversion umožňuje přístup k jednomu zdrojovému kódu více uživatelům. Na vývoji aplikace tak může pracovat mnoho programátorů najednou. Zároveň se subversion, jak už napovídá sám název, stará o správu jednotlivých verzí aplikace; pomocí subversion například lze zjistit, v jaké verzi je právě vyvíjený software. Subversion také zálohuje jednotlivé verze zdrojového kódu a tak je možné se vrátit k některé z předchozích verzí [6].

5.2

Přihlašování

Při zakládání nového projektu v ASP.NET MVC je na výběr zda vytvořit aplikaci prázdnou, internetovou nebo intranetovou. Pokud je zvolena aplikace internetová, obsahuje ASP.NET Membership Provider, což je featura, která vytvoří do aplikace account controller. Ten umožní uživatelům přihlašování do aplikace pod unikátním uživatelským jménem a heslem. MP poskytuje kromě samotného přihlášení uživatele například i možnost změnit heslo, smazat uživatele atd. MP uchovává informace o uživatelích v SQL databázi. Pro ukládání uživatelského hesla je možné využít jednu ze tří možných forem: čistý text, zašifrovaný text a nebo hashovaný text. V základním nastavení je heslo ukládáno v hashované formě, což je nejbezpečnější z těchto tří variant.

7

Případně jsou k dispozici jiné služby pro sdílení souborů, jakou je například Dropbox.

39

5

5. Realizace

Obrázek 5.1: Membership provider

40

5.3. Ovládací prvky MP neuchovává pouze jméno a heslo uživatele, ale umožňuje i nastavování uživatelských rolí, volbu oprávnění pro jednotlivé role, uchovává verzi SQL schématu, datum posledního přihlášení uživatele, název aplikace a mnoho dalších informací. Proto je také pro využívání v malých až středních aplikacích kritizováno, a to ne jen pro svou robustnost, ale také pro využití GUID. GUID je 128bitový identifikátor, což je 2128 možných čísel. Díky tak vysokému počtu možností a speciálnímu algoritmu pro generování těchto čísel, je skoro nemožné vygenerovat dvě stejná čísla. GUID má však samozřejmě i své nevýhody. Zdá se totiž zbytečné využít 128bitů dlouhý GUID (místo například 32bitového integeru), pro databázi, která obsahuje malý počet záznamů. Kde tedy GUID využívat? Například pro databáze, kde chceme, aby mohlo větší množství uživatelů vytvářet záznamy bez potřeby zjišťovat, jaké unikátní ID je na řadě.[23] Aplikace CKB, patří právě mezi ony menší aplikace, kde není třeba miliony záznamů. V plánu je také využít databázi CKB i pro další webové aplikace, a tak je databáze vytvořená Membership Providerem s primárním klíčem GUID.

5.3

Ovládací prvky

Žádná aplikace se neobejde bez widgetů8 . Widget poskytuje uživateli možnost interakce. Tvorba widgetů pro webovou aplikaci není tak jednoduchá jako u klasických desktop aplikací. Při každé interakci s widgetem se totiž odesílá celá webová stránka serveru a ten stránku zpracuje a zašle zpět. Pokud tedy je na stránce více widgetů, odesílají se všechny najednou a nezáleží na tom, který widget uživatel reálně využíval. Tento problém řeší AJAX (co je to AJAX, bylo již popsáno v kapitole 4.6). Implementace widgetu v aplikaci CKB je nejlépe vidět na widgetu pro hodnocení otázek. Jak tento widget vypadá je znázorněno na obrázku 4.2. Samotná implementace widgetu je velmi jednoduchá: nejdříve je vytvořen controller, který provede požadované akce a vrátí partial view.9 1 [ HttpPost ] 2 p u b l i c P a r t i a l V i e w R e s u l t QuestionRanking ( s t r i n g rank ing , 3 string questionId ) 4 { 5 int id ; 6 I n t 3 2 . TryParse ( q u e s t i o n I d , out i d ) ; 7 r e p . ChangeQuestionRanking ( id , r a n k i n g ) ; 8 r e t u r n P a r t i a l V i e w ( r e p . RandomDisapprovedQuestion ( ) ) ; 9 } 8

Widget, ovládací prvek Partial view; částečný pohled se využívá převážně, pokud má být nějaká část stránky použitá na více místech najednou, bez nutnosti duplikace kódu. 9

41

5. Realizace

Obrázek 5.2: Widget hodnocení otázky

Poté je vytvořeno samotné view, jehož kouzlo spočívá v tom, že data jsou odeslána specifikovanému controlleru. Ten data zpracuje a vrátí nový partial view, který nakonec nahradí div s id, jež je nastaveno v UpdateTargetId. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

@model CKB. Models . DisapprovedQuestionModel @using ( Ajax . BeginForm ( " QuestionRanking " , " Pages " , new AjaxOptions { I n s e r t i o n M o d e = I n s e r t i o n M o d e . Replace , HttpMethod = "POST" , OnFailure = " s e a r c h F a i l e d " , UpdateTargetId = " ajaxRankingForm " , })) {
Ohodno ´t t e p r o s ím o t á zku

@Model . Question
}
Implementace controlleru a view je oproti samotné implementaci v aplikaci CKB zkrácena. Jde na tomto místě tedy pouze o ukázku, jak jsou v aplikaci CKB vytvářeny ovládací prvky. 42

5.4. Databáze

Obrázek 5.3: Diagram databáze CKB

5.4

Databáze

Databázové schéma díky EF nemusí být vytvářeno ručně. EF totiž vygeneruje schéma automaticky z vytvořeného modelu. Výsledné schéma je na obrázku 5.4. Přestože, schéma neobsahuje velké množství tabulek, jsou v něm všechny potřebné informace. Základem je tabulka UserModels obsahující veškeré potřebné informace o zaregistrovaném uživateli. Další důležitou tabulkou je TopicModels. Tato tabulka slouží pro přiřazení ke každé otázce některé z témat. Pokud má být otázka vložena pouze do volné hry, je třeba nastavit TopicId na 0. S tabulkou TopicModels úzce souvisí tabulka QuestionModels, která slouží k uložení všech schválených otázek ve hře. Při ukládání nové otázky je třeba si dát pozor, zda pro otázku existuje téma s příslušným ID. DisapprovedQuestionModels je tabulka pro otázky, které přidali sami uživatelé. Pro ukládání výsledků hráče slouží tabulka ResultModels, ve které kromě samotného výsledku je i datum, kdy hráč výsledku dosáhl. Tabulka ForumModels uchovává jednotlivé příspěvky na fóru. 43

5. Realizace

5.5

Požadované funkce

Hlavním bodem implementace bylo vytvořit všechny požadované základní funkce. Tyto funkce jsou zakresleny do use case diagramu 3.3. Tato část bakalářské práce se tak zabývá popisem těchto funkcí, se zaměřením na nestandardní části implementace.

5.5.1

Hra

Samotná hra se skládá ze dvou částí: hra a volná hra.

Hra Hra je pouze pro registrované hráče. Po jejím spuštění má hráč na výběr z jednotlivých témat, přičemž u každého z nich je progressbar zobrazující nejlepší úspěšnost hráče. Hráč tak ví, které téma má již splněné. Po vybrání jednoho z tématu je z databáze náhodně vygenerována otázka na dané téma. Hráč na otázku odpoví a je mu zobrazena správná odpověď. Tímto způsobem hra pokračuje, dokud není zodpovězeno 20 náhodných otázek. Pokud je na konci hry dosaženo skóre alespoň 19, je hráči zobrazena gratulace a úroveň hráče automaticky vzroste.

Volná hra Pro hraní Volné hry není na rozdíl od klasické hry třeba registrace. V této hře jsou otázky znovu náhodně generovány z databáze, ale nejsou omezeny na některé z témat. Tato hra nikdy nekončí a tak po zodpovězení otázky jsou znovu a znovu generovány nové náhodné otázky. Nestandardní části První nestandardní částí implementace hry je vytvoření progress barů pro jednotlivá témata. Progres bar je vytvořen pomocí jQuery. Bohužel při standardním využití jsou každému divu z id progressbar přiřazeny pomocí skriptu třídy, pro které je nastaven vzhled pomocí CSS. To je obrovské omezení, protože není možné tímto způsobem vytvořit více různých progress barů na jedné stránce. Toto omezení tak muselo být vyřešeno nastavením jednotlivých tříd ručně. Druhou nestandardní částí implementace hry je využití databáze pro ukládání veškerých výsledků hráče. Při běžné implementaci by takovéto informace nebyly ukládány do databáze, ale do cookies. To by přinášelo velké omezení. Hráč například po rozehrání hry nemůže odejít a vrátit se k rozehrané hře později a právě z tohoto důvodu je pro veškeré ukládání mezivýsledků využita databáze. 44

5.5. Požadované funkce

5.5.2

Fórum

Fórum umožňuje hráčům diskutovat, a to jak o hře samotné, tak o daných otázkách, přičemž tato funkce je otevřena pouze pro registrované hráče. Nestandardní části První nestandardní částí je možnost při vkládání příspěvku vložit jakékoliv uživatelské jméno. Hráč tak nemusí odhalit svou skutečnou identitu a zůstává v anonymitě. Toto řešení je zvoleno proto, aby hráči mohli přidávat komentáře ke hře bez strachu, že za ně budou potrestáni. Jak se toto řešení projeví v praxi, se samozřejmě ukáže až časem Druhou nestandarní částí je rozdělení fóra na dvě view. První část, pro vložení komentáře, je generována metodou Forum v controlleru Pages. Druhá část, zobrazující jednotlivé komentáře, je dogenerované partial view metodou ShowForum znovu z controlleru Pages.

5.5.3

Žebříček hráčů

Hra obsahuje pro zpestření žebříček hráčů, který zobrazuje všechny zaregistrované hráče, čímž lze zobrazit výsledky jakéhokoliv hráče. Řazení hráčů v žebříčku probíhá podle dosažené úrovně. Pokud se úrovně hráčů ovšem shodují, tak po dle počtu správně zodpovězených otázek. A pokud ani toto kritérium nerozhodne, tak záleží na počtu špatných odpovědí. U nich je řazení samozřejmě obrácené, než u předchozích kritérií, což znamená, že čím méně špatných odpovědí, tím lepší postavení v žebříčku. Nestandardní části Prvním nestandardním řešením v hodnocení je listování. Implementace listování pochází z tutoriálu [5]. Implementace v CKB však přidává číslo pořadí záznamu, kdy je do modelu, který se předává view, přidána proměnná s názvem StartIndex obsahující pořadí prvního předaného hráče. Tato proměnná je pak při každém zobrazení informací o hráči zobrazena a zvýšena o 1.

5.5.4

Tvorba otázek

Vytvořit novou otázku do aplikace CKB je možno dvěma způsoby. První možnost je vyhrazena pouze pro uživatele v roli administrátora, zatímco druhá pro libovolného i neregistrovaného hráče. Po přihlášení se do aplikace CKB s rolí administrátora je v hlavním menu zobrazena nová položka Nastavení. V této položce má administrátor možnost vytvořit libovolnou otázku a nebo téma. Při vytvoření otázky pomocí formuláře je otázka uložena do databáze a rovnou přiřazena do otázek ve hře. 45

5. Realizace Druhý způsob vytvoření otázky je složitější. Otázka totiž není přiřazena rovnou do otázek ve hře, ale do otázek neschválených. Neschválené otázky jsou zobrazovány uživatelům aplikace a ti je mohou ohodnotit – pokud byla otázka dobře ohodnocena, je přiřazena do otázek ve volné hře. Přesný popis, jak a kdy je otázka schválena, je v části 5.5.5. Nestandardní části První nestandardním řešením, v tomto případě spíše zajímavým, je tvorba uživatelské role administrátora. Pro vytvoření administrátora je třeba provést několik kroků. Prvním je zapnutí uživatelských rolí, druhým je vytvoření potřebných uživatelských rolí (v případě CKB jde o role Administrators a Users) a nakonec třetím krokem je samotné přiřazení role uživateli, například pomocí UI ASP.NET Configuration.

5.5.5

Hodnocení otázek

Hodnocení otázek slouží ke schválení otázek vytvořených uživateli a je implementováno pomocí widgetu, který se nachází na pravé straně webové stránky a jeho vzhled je na obrázku 5.2. Tento widget obsahuje tři tlačítka: Dobrá, Průměr, Špatná, přičemž po kliknutí na tlačítko Dobrá je hodnocení otázky zvednuto o 3, po kliknutí na tlačítko Průměr je hodnocení otázky zvednuto o 1 a po kliknutí na tlačítko Špatná je hodnocení otázky sníženo o 2. Pokud některá z otázek dosáhne hodnocení lepšího než 20, je přesunuta do otázek ve volné hře. Naopak pokud dosáhne hodnocení menšího než -20 je odstraněna. Nestandardní části První nestandardním řešením hodnocení otázky je přesunutí neschválené otázky do otázek schválených. To je provedeno tak, že je vytvořena nová instance třídy pro schválené otázky (QuestionModel) a té je do konstruktoru předána otázka neschválená (DisapprovedQuestionModel). Konstruktor vezme neschválenou otázku, prohází odpovědi a ty společně se správnou odpovědí vloží do jednotlivých proměnných dané třídy. Nakonec se pouze neschválená otázka odstraní a schválená uloží do databáze.

46

Kapitola

Testování Důležitým krokem při vývoji aplikace je testování. Testování umožňuje ověřit správnou funkci aplikace, nebo některé z jejich částí. Při testování se ale neověřuje pouze funkce aplikace. Testy také zvyšují kvalitu aplikace. Testování aplikace CKB probíhalo v několika stadiích. Po napsání nové vlastnosti probíhaly nejdříve unit testy, které testovaly jednotlivé nejmenší části aplikace. Po otestování všech částí aplikace pomocí unit testů nastala fáze funkčních a zátěžových testů.

6.1

Unit testy

Unit testy jsou testy, které se zaměřují na nejmenší části aplikace. Testují jednotlivé metody, třídy a jejich funkčnost. Při psaní každého testu je nutné se zaměřit pouze na jednu funkcionalitu. Díky tomu je při nesplnění některého z unit testů okamžitě jasné, kde je chyba a může tak být velmi rychle napravena. Mimo to jsou unit testy velmi rychlé; je tak možné po každé větší změně aplikace spustit znovu celou sadu testů, čímž se ověří, zda při implementaci nové vlastností nedošlo k poškození některé z předchozích funkcí aplikace. Pomocí unit testů se v ASP.NET MVC testují jednotlivé controllery, metody, validační pravidla, routovací pravidla a mnoho dalších součástí aplikace [21]. Pro kompletní otestování aplikace pomocí unit testů na to musí být brán zřetel již při vývoji. MVC pattern sice totiž výborně rozdělí aplikaci na tři části: model, view a controller, které jsou jako takové snadno testovatelné, nemusí to ale samo o sobě stačit pro řádné otestování. Pro kompletní otestování aplikace je potřeba využít další patterny, a proto v aplikaci Cesta k bohatství jsou implementovány následující patterny.

47

6

6. Testování

Repository pattern Repository pattern [20] slouží k oddělení business logiky od samotné aplikace a umožňuje tak pokrýt unit testy i části aplikace, které přistupují k databázi. Ať už jde o mazání záznamů z databáze, změnu záznamů nebo vytváření nových. Kromě ulehčení testování repository pattern přináší i další spoustu výhod. Zde jsou alespoň ty hlavní tři: • Možnost stejných dotazů na databázi z různých míst bez zbytečného duplicitního kódu. • Shromáždění všech dotazů na jedno místo. • Zpřehlednění a lepší udržitelnost kódu. Implementace repository patternu je jednoduchá – pouze se pro veškeré dotazy vytvoří třída repository a v té se vytvoří potřebné metody, přičemž každá taková metoda obsahuje právě jeden dotaz na databázi. Například implementace repository patternu pro třídu GameController: 1 p u b l i c c l a s s GameController : C o n t r o l l e r 2 { 3 p r i v a t e EFDbContext db ; 4 5 p u b l i c A c t i o n R e s u l t Index ( ) 6 { 7 r e t u r n View ( 8 db . User . OrderByDescending ( p => p . U s e r L e v e l ) . 9 ThenByDescending ( p => p . TotalRightAnswerCount ) . 10 ThenByDescending ( p => p . TotalWrongAnswerCount ) ; 11 ); 12 } 13 } By nejdříve nahradila dotaz za příslušnou metodu: 1 p u b l i c c l a s s GameController : C o n t r o l l e r 2 { 3 p r i v a t e CKBRepository r e p ; 4 5 p u b l i c A c t i o n R e s u l t Index ( ) 6 { 7 r e t u r n View ( r e p . TopPlayers ( ) ) ; 8 } 9 }

48

6.1. Unit testy A následně implementovala samotnou třídu repository: 1 p u b l i c c l a s s CKBRepository 2 { 3 p r i v a t e EFDbContext db ; 4 5 p u b l i c IQueryable <UserModel> TopPlayers ( ) 6 { 7 r e t u r n db . User . OrderByDescending ( p => p . U s e r L e v e l ) . 8 ThenByDescending ( p => p . TotalRightAnswerCount ) . 9 ThenByDescending ( p => p . TotalWrongAnswerCount ) ; 10 } 11 12 // Dal š í dotazy 13 } Pomocí repository patternu jsou tedy odděleny jednotlivé dotazy od samotné aplikace. Stále se však musí všechny unit testy provádět proti databázi. Provádění všech testů přímo nad databází by bylo sice možné, ale hlavně při testování částí, které mažou, vkládají a mění záznamy v databázi, velmi pomalé. Po každém provedeném unit testu, který mění databázi, by se totiž musela databáze dostat do původního stavu, a proto je potřeba další pattern.

Dependency injection DI spolu v kombinaci s vhodným mocking frameworkem 6.1 a repository patternem 6.1 umožňuje provádění unit testů bez jakéhokoliv zásahu do databáze. DI má velké množství využití, to které je hlavní v tomto případě však je pro vložení takzvaného mock objektu. Implementace DI patternu umožňuje při vytváření controlleru vybrat, zda bude předán konstruktoru mock objekt, nebo konstruktor zůstane bez vstupního parametru. V případě, že je předán konstruktoru mock objekt (někdy se také využívá implementace takzvaného fake repository), nebude controller provádět dotazy nad reálnou databází, ale nad mock objektem [22].

49

6. Testování Implementace DI pro třídu GameController 6.1: 1 p u b l i c c l a s s GameController : C o n t r o l l e r 2 { 3 p r i v a t e ICKBRepository r e p ; 4 5 p u b l i c GameController ( ) : t h i s ( new CKBRepository ( ) ) 6 {} 7 8 p u b l i c GameController ( ICKBRepository r e p o s i t o r y ) 9 { 10 rep = r e p o s i t o r y ; 11 } 12 13 p u b l i c A c t i o n R e s u l t Index ( ) 14 { 15 r e t u r n View ( r e p . TopPlayers ( ) ) ; 16 } 17 } Pak už není nic jednoduššího, než při vytváření controlleru podvrhnout v unit testech místo třídy repository falešný mock objekt, který nahradí databázi.

Mocking framework Je velké množství možností, jaký objekt v testech do konstruktoru vložit. Může se například implementovat vlastní falešný repository, který bude uchovávat data ve vhodném objektu, nebo využít některý z mocking frameworků. Seznam možných mocking frameworků s podporou ASP.NET MVC • RhinoMocks • Nunit.Mocks • TypeMock • nMock • Moq Mocking framework umožňuje vytvářet nepravé informace, a to jak pro databázové dotazy, tak například vložit controlleru falešný ControllerContext objekt, přes který se získá například jméno uživatele. 50

6.1. Unit testy Moq Pro testování aplikace CKB byl využit Moq [31]. Jde o jednoduchou knihovnu pro aplikace .NET a Silverlight, která umožňuje jednoduše vytvořit mock objekt a tomu pro jednotlivé volání nastavit návratovou hodnotu. Například takto třídě GameController 6.1 jednoduše podvrhne mock objekt, který při volání metody TopPlayers() vrátí zadaný objekt. 1 var mock = new Mock ( ) ; 2 mock . Setup ( p => p . TopPlayers ( ) ) 3 . Returns ( / ∗ Objekt k t e r ý chceme aby metoda vr á t i l a ∗ / ) ; 4 var c o n t r o l l e r = new P a g e s C o n t r o l l e r ( mock . Object ) ; Nebo takto se vloží falešný ControllerContext objekt s nastavenou hodnotou User.Identity.Name. 1 2 3 4 5 6 7 8 9 10 11

// Vytvo ř en í mock o b j e k t u var mock = new Mock ( ) ; var mockCon = new Mock ( ) ; // Nastaven í mockCon . SetupGet ( p => p . HttpContext . User . I d e n t i t y . Name) . Returns ( " UserName " ) ; // Vlo ž i t mock o b j e k t u do c o n t r o l l e r u var c o n t r o l l e r = new GameController ( mock . Object ) ; c o n t r o l l e r . C o n t r o l l e r C o n t e x t = mockCon . Object ;

Dotazy Pomocí mock objektu se tedy nastavují návratové hodnoty pro metody, které pracují s databází. Co ale samotná implementace těchto metod? Samozřejmě i tuto funkcionalitu je třeba otestovat. Nabízejí se zde dvě možnosti: první je znovu využít vlastnosti DI a implementovat takzvaný fake context. Tento přístup má však spoustu odpůrců, protože při testech proti fake contextu testujeme LINQ to Objects a ne LINQ to Entitities. Proto se při testování samotných dotazů v aplikaci CKB využívá druhý přístup: testovat proti reálné databázi. Testovat proti produkční databázi10 by se rovnalo téměř jisté sebevraždě, a tak se při vývoji software využívá druhá databáze, oddělená od databáze produkční. Pro tuto databázi se většinou používá označení development.11 10

Databáze, která je využívána samotnými uživateli a obsahuje tak velmi citlivé údaje, jejichž poškození či ztráta by bylo obrovským problémem. 11 Development, vývojová

51

6. Testování

Obrázek 6.1: Výsledky unit testů

52

6.2. UI testy

Obrázek 6.2: Výsledky coded UI testů

6.2

UI testy

Další z testů, které by měla obsahovat každá webová aplikace, jsou testy UI. Pro testování UI je na výběr ze dvou způsobů: buď se provádějí manuální testy a nebo lze využít jeden z nástrojů, jakým je například Selenium či coded UI test a vytvořit tak testy automatizované. Automatizované testy se převážně využívají ke kontrole, zda po změně v kódu nedošlo k poškození funkce některé z implementovaných částí UI – nemusí tak být prováděn ručně dokola jeden a ten samý test. Na druhou stranu napsání automatizovaného testu je pomalejší než testování manuální, a proto je důležité stanovit, která část aplikace bude testována ručně a pro kterou budou napsány testy automatizované. Hlavní část aplikace CKB, tedy samotná hra, byla testována ručně a to hlavně z důvodu, že psaní automatizovaného testu by bylo zbytečně časově náročné. Další funkce aplikace, jakými je například zobrazení fóra, žebříčku a ohodnocení otázky, jsou pokryty testy automatizovanými za pomocí coded UI testů.

Coded UI Tests Coded UI testy slouží ke kontrole správné funkčnosti UI. Při tvorbě coded UI testu pro webovou aplikaci se pouze naklikají akce tak, jako by je dělal reálný uživatel. Tyto akce jsou zaznamenány Visual Studiem a je z nich vygenerován kód, který akce zopakuje. Nakonec se pouze nastaví, jaké hodnoty mají být na konci zkontrolovány. Takto vytvořený test pak může být kdykoliv spuštěn aby nastavenou funkci zkontroloval.

53

6. Testování

6.3

Web performance test

Podobně jako coded UI testy se ve Web testech nahrávají uživatelské akce, ale na rozdíl od coded UI testů se zde nezaznamenávají jednotlivé akce jako je kliknutí na tlačítko, ale pouze navigace stránky. Interpretace web testu je tedy pouze seřazený seznam jednotlivých URL s parametry. Můžeme také vytvořit testy, kde budou parametry předávané do URL získané dynamicky, například z databáze. Web testy kromě samotných testů navigace slouží jako základ pro load testy.

6.4

Load test

Pomocí coded UI testů a web performance testů je aplikace otestována pro jednoho uživatele. Jak se ale aplikace bude chovat při větším počtu uživatelů? Jaký bude výkon aplikace? Právě k tomu slouží load testy. Pomocí load testů jsou vytvořeni virtuální uživatelé. Tito uživatelé poté spouští jednotlivé testovací skripty, které mohou být různě promíchané a jednotlivým uživatelům lze také nastavit prohlížeč a rychlost připojení. Pro účely CKB je hlavním důvodem, proč dělat load testy, chování aplikace při velkém počtu uživatelů. Samotné výsledky jsou vedlejší, protože rychlost aplikace záleží především na zvoleném hostingu. Díky Windows Azure, které je popsáno v kapitole 7.2, se o vytížení serveru nemusíme starat. Pro účely testování aplikace byl vytvořen load test pojmenovaný LoadTestAll. Najdeme ho v projektu odděleného od hlavní aplikace CKB.LoadTests.12 Tento test kombinuje všechny web testy dohromady a tak kontroluje počet chyb aplikace při více zároveň běžících web testech. Výsledky load testu s názvem LoadTestAll se nacházejí na obrázcích 6.3, 6.4, 6.5, 6.6. Obrázky ve větším rozlišení se nacházejí na přiloženém CD. Z výsledků load testu vidíme, že došlo ke třem chybám a osmi překročením prahových hodnot. Všechny tři chyby jsou typu Http Error (500 - InternalServerError), což je chyba způsobená nejspíše vysokou zátěží serveru, nejde tedy o chybu samotné aplikace. Stejně tak překročení prahových hodnot je problém testování na málo výkonném serveru. LoadTestAll tedy úspěšně otestoval chování aplikace pro více uživatelů.

6.5

Shrnutí testů

Pro aplikaci CKB byly úspěšně implementovány všechny vhodné testy. Testy úspěšně zkontrolovaly funkci jednotlivých částí aplikace pomocí unit testů a coded UI testů a poté celkové chování aplikace pomocí load testu. Všechny části aplikace tak jsou úspěšně otestovány a aplikace je tedy připravena k nasazení. 12

54

Prosím o nespouštění testu. Test totiž probíhá proti nasazené aplikaci.

6.5. Shrnutí testů

Obrázek 6.3: Shrnutí load testu zobrazující naměřené hodnoty.

55

6. Testování

Obrázek 6.4: Další hodnoty load testu.

56

6.5. Shrnutí testů

Obrázek 6.5: Výsledky testu zakreslené do grafu.

57

6. Testování

Obrázek 6.6: Graf load test treshold violations zobrazuje, kdy došlo k překročení prahových hodnot. 58

Kapitola

Nasazení Základním požadavkem pro vývoj aplikace CKB bylo pro zvolenou technologii najít levný hosting webového serveru a zároveň levný a výkonný hosting SQL serveru. Dobrý webový server a server SQL je totiž základním kamenem každé webové aplikace. Pro hosting MS SQL a aplikace využívající ASP.NET 4.0. existují minimálně dva velmi dobří poskytovatelé. Tím prvním je „freehosting nejen pro vývojáře“ jak stojí v logu stránek ASP2 [27].

7.1

ASP2

ASP2 je projekt vytvořený pod záštitou ZONER software, a.s., který umožňuje vývojářům využívat některé služby zcela zdarma. Mezi tyto služby patří: • Doména třetího řádu. • IIS 7.5 a ASP.NET 4.0 • Microsoft SQL Server 2008 R2 s maximální velikostí datového souboru 20 MB • WWW prostor o velikosti 25 MB • Přístup přes FTP Společnost ZONER software, a.s. tedy nabízí vyzkoušení a provoz nejnovějších technologií zcela zdarma. Jedinou překážkou je omezení na místo, a to jak databáze, tak samotné webové stránky. Pro zkušební provoz webových stránek, které neobsahují velké množství obrázků, ale postačí. Mezi takové stránky patří právě CKB. Zde byl roněž spuštěn testovací provoz aplikace. Kam ale bude aplikace přesunuta při růstu nároků na datový prostor a to především databáze? Pro možnost rychle reagovat na změnu požadavků byl vyvinut cloud computing. 59

7

7. Nasazení

Obrázek 7.1: Cloud Computing. Převzato z [25].

7.2

Cloud Computing a Windows Azure

Cloud Computing Cloud computing je název pro sdílení prostředků pomocí sítě – jde tedy o přesunutí aplikací na internetový server a přístup k nim přes webový prohlížeč. Nemusí jít však pouze o vzdálený přístup k aplikacím; pomocí cloudu můžeme přistupovat například i k datům. Cloud v mnohém připomíná koncept starších služeb ASP13 . Proč zrovna název cloud? Protože architektura cloudu se podobá právě mraku. K čemu všemu se dá cloud využít je vidět na obrázku 7.1. Proč vůbec využívat služby cloudu? Zde je pár hlavních výhod a rozdílů oproti umístění aplikace na klasický webový server: • Software provozovaný v cloudu není třeba aktualizovat – o vše se postará poskytovatel cloudu. • Pro využívání náročných aplikací nepotřebujeme výkonný počítač – vše se vypočítává právě v cloudu a my se tak nemusíme starat o systémové zdroje. 13

60

Active Server Pages, aktivní serverové stránky

7.2. Cloud Computing a Windows Azure • Pay as you go aneb plať, jak jdeš, je systém placení za služby pouze v takovém rozsahu, v jakém jsou využity. Neplatí se tedy klasický měsíční paušál. Poplatky jsou pouze například za využitý prostor, dobu využívání cpu a dalších parametrů podle zvoleného poskytovatele. • Diky Pay as you go se u malých webů můžeme dostat na nižší poplatky než při placení měsíčního paušálu. Na druhou stranu poskytuje cloud jednu velkou nevýhodu, a tou je fakt, že umístěním databáze do cloudu umožňujeme přístup k datům společnosti, která nám cloud poskytuje.

Windows Azure Windows Azure je jeden z mnoha poskytovatelů služby cloud, který umožňuje vkládání webových aplikací v jakémkoliv jazyce. Nemusí tedy jít pouze o aplikace psané v jedné z Microsoft technologiích, ale například i o PHP aplikaci. Azure poskytuje hosting různě velkých webových aplikací, s různými nároky na hardware. Ty se také mohou v období používání libovolně měnit. Windows Azure navíc poskytuje zdarma 90denní zkušební období, takže jediné, co je pro vyzkoušení Windows Azure třeba, je mobilní telefon a kreditní karta. Budoucí přesun aplikace CKB je plánován právě pod Windows Azure. Další informace o Windows Azure [26].

61

Kapitola

Dokumentace 8.1

Doxygen

Dokumentace ke zdrojovému kódu ve formátu HTML a PDF se nachází na přiloženém CD. Její konkrétní umístění zde C. Dokumentace je psána přímo do zdrojového kódu pomocí Doxygenu [28]. Doxygen definuje jakým způsobem okomentovat zdrojový kód. Visual Studio obsahuje podporu pro Doxygen a tak díky IntelliSense14 urychluje psaní dokumentace. Po napsání komentářů ke všem potřebným třídám je dokumentace vygenerována pomocí nástroje Doxywizard, který jednoduše rekurzivně prohledá zadanou složku s projektem a vygeneruje výslednou HTML a PDF15 dokumentaci. Jednoduchá ukázka jak mohou vypadat Doxygen komentáře. 1 2 3 4 5 6 7 8

/// <summary> /// View f o r LogOn u s e r s /// /// View ( / Account / Logon) p u b l i c A c t i o n R e s u l t LogOn ( ) { r e t u r n View ( ) ; } V aplikaci CKB je okomentována většina tříd a metod. U některých ale komentář s popisem, k čemu třída (motoda, proměnná atd.) slouží není, jelikož to už jasně vyplývá z názvu třídy.

14 15

IntelliSense je součást Visual Studia, která automaticky doplňuje uživatelem psaný text. Ve skutečnosti doxywizard nevygeneruje přímo výsledné PDF, ale pouze latex šablonu.

63

8

Závěr Cílem práce bylo zvolit vhodný framework pro webovou aplikaci tak, aby aplikace byla snadno testovatelná a pomocí zvolené technologie implementovat internetovou aplikaci, která umožňuje hraní jednoduché online vzdělávací hry. Dalším úkolem bylo vytvořit pro hru základní okruh otázek. Poté bylo třeba aplikaci otestovat tak, aby byla zajištěna její plná funkčnost a nakonec hru nasadit na vhodný webový server. Všech požadovaných cílů bylo dosaženo. Nejprve byl zvolen framework ASP.NET MVC, za jehož pomocí byla aplikace implementována se všemi požadovanými částmi. Dále byly vytvořeny dvě hry, z toho jedna na volné téma, kterou si může zahrát i neregistrovaný hráč a druhá, která je pouze pro registrované hráče a umožňuje odpovídat na otázky na jednotlivá témata. Bylo rovněž vytvořeno jednoduché fórum, které umožňuje diskutovat o daných otázkách. Aplikace také obsahuje žebříček hráčů a možnost přidávat a hodnotit vložené otázky. Pro aplikaci byly vytvořeny základní otázky, které byly vloženy na zvolený SQL server. Hra je tak v tomto okamžiku plně hratelná. Aplikaci se povedlo otestovat, a to nejdříve pomocí unit testů, které otestovaly jednotlivé nejmenší části aplikace, a poté pomocí testů uživatelského prostředí. Nakonec byla aplikace otestována pomocí load testů, které jí otestovaly pro více uživatelů a zároveň load testy otestovaly zátěž, jakou server zvládne. Pro aplikaci byl zvolen jak hosting pro testovací nasazení, kde aplikace v současné době běží pod doménou třetího řádu http://ckb.asp2.cz/, tak hosting pro budoucí nasazení na cloudu Windows Azure, který umožňuje jednoduše přizpůsobit výkon požadavkům aplikace.

65

Závěr

Návrhy do budoucna I přesto, že se povedlo dosáhnout všech požadovaných cílů, aplikace skrývá možnosti, jak ji vylepšit a rozšířit. Jde především o fórum, které je v této verzi jednoduché a není tak příliš uživatelsky přívětivé. Dalo by se rozšířit například o možnost upravovat vložené příspěvky nebo vytvořit fóra pro jednotlivá témata. Další možností, jak hru rozšířit, je zvětšit počet otázek, které hra obsahuje. Otázek bylo sice vytvořeno celkem velké množství, ale hrozí, že se velmi rychle začnou opakovat, a to hlavně v případě, kdy se hráč rozhodne zahrát si hru na nějaké z témat. Hru by také bylo vhodné nasadit na Windows Azure. Výkon serveru, na kterém aplikace běží v současné době, je špatný čímž se aplikace při větším počtu uživatelů stává velmi pomalou. Navíc i prostor pro databázi bude nejspíše velmi rychle zaplněn po registraci nových uživatelů a po přidání dalších otázek. Posledním návrhem do budoucna je vytvořit další podobné aplikace, avšak s odlišnou tématikou. Mohla by tak být například vytvořena podobná aplikace Cesta do historie, která by vycházela ze základu vytvořeného pro aplikaci Cesta k bohatství, a jak už je z názvu jasné, obsahovala by otázky z historie, čímž by se hra stala přístupnější i pro další hráče.

66

Literatura [1] KIYOSAKI, Robert T. Bohatý táta, chudý táta: co bohatí učí svoje děti c 2001, 214 s. ISBN 80-720a chudí a střední vrstvy ne. Praha: Pragma, 5822-3. [2] VLACH, Robert. Inteligence v podnikání. Na volné noze c [online]. 2005 – 2012 [cit. 2012-05-22]. Dostupné z: http://navolnenoze.cz/blog/inteligence/ [3] HAJDIN, Tomáš. Agilní metodiky vývoje software. Brno, 2005. Dostupné z: DIPLOMOVÁ PRACE. Masarykova univerzita. [4] FREEMAN, Adam.Pro ASP.NET MVC 3 framework. 3rd. ed. New York: Apress, c2011, 824 s. The expert’s Voice in.NET. ISBN 978-1-4302-3404-3. [5] CONERY, Rob, Scott HANSELMAN, Phil HAACK a Scott GUTHRIE. Professional ASP.NET MVC 1.0. Indianapolis, IN: Wiley Pub, 2009. ISBN 04-703-8461-1. Dostupné z: [6] PILATO, C. Version control with subversion. 2nd ed. Beijing: O’Reilly, 2008, 404 s. ISBN 978-0-596-51033-6. Dostupné z: [7] Development Methodology. EXELANZ. [online]. [cit. 2012-05-09]. Dostupné z: c 2000 - 2012 [cit. [8] Screen resolutions. Gemius SA [online]. 2012-05-09]. Dostupné z: [9] Choosing a Web Application Programming Language. Hoover Web Design c 2000-2010 [cit. 2012-05-15]. Dostupné z: [online]. 67

Literatura [10] MICROSOFT. ASP.NET [online]. [cit. 2012-05-09]. Dostupné z: [11] Mod mono [online]. [June 2004] [cit. 2012-05-15]. Dostupné z: [12] SMITH, Nathan. 960 Grid System [online]. c 2012 [cit. 2012-05-09]. Dostupné z:

[13] 99DESIGNS. Logo design, web design & more! [online]. c 2006–2012 [cit. 2012-05-09]. Dostupné z:

c 1994-2011 [cit. 2012[14] BOS, Bert. Cascading Style Sheets. W3C. [online]. 05-09]. Dostupné z: c 2012 [cit. [15] HEINEMEIER HANSSON, David. Ruby on Rails. [online]. 2012-05-09]. Dostupné z: c 2001-2012 [cit. 2012-05-15]. Do[16] THE PHP GROUP. PHP [online]. stupné z: http://www.php.net/ c 2008-2012 [cit. 2012-05-09]. Dostupné z: [17] JavaServer Faces [online]. [18] Google Developers: Google Web Toolkit. GOOGLE, Inc. [online]. [cit. 2012-05-09]. Dostupné z: c [19] ADO.NET Entity Framework. MICROSOFT. MSDN [online]. 2012 [cit. 2012-05-09]. Dostupné z: c 2012 [20] The Repository Pattern. MICROSOFT. MSDN [online]. [cit. 2012-05-15]. Dostupné z: [21] Unit Testing in ASP.NET MVC Applications. MICROc 2012 [cit. 2012-05-15]. Dostupné z: SOFT. MSDN [online]. [22] ASP.NET MVC 3: Dependency Injection. MICROSOFT. MSDN [online]. c 2012 [cit. 2012-05-15]. Dostupné z: [23] Guid Structure. MICROSOFT. [cit. 2012-05-15]. Dostupné z: us/library/system.guid.aspx> 68

c MSDN [online].

2012
Literatura c [24] THE JQUERY FOUNDATION. JQuery: JavaScript Library [online]. 2012 [cit. 2012-05-09]. Dostupné z: [25] MIDORI REILLY, Allison. Smallbiztechnology. Wait! What is Cloud Computing? [online]. September 13, 2011 [cit. 2012-05-09]. Dostupné z: c 2012 [cit. 2012-05-09]. Do[26] MICROSOFT. Windows Azure [online]. stupné z: c 2005-2009 [cit. 2012-05-09]. [27] ZONER SOFTWARE, a.s. ASP2 [online]. Dostupné z: c 1997-2012 [cit. 2012-05-09]. [28] HEESCH, Dimitri. Doxygen [online]. Dostupné z: <www.doxygen.org/> [29] Adobe flash. ADOBE SYSTEMS INCORPORATED. Adobe Flash Proc 2012 [cit. 2012-05-09]. fessional CS6 [online]. Dostupné z: c 2012 [cit. 2012-05-15]. [30] Web server popularity. HackerTarget [online]. Dostupné z: [31] Moq: The simplest mocking library for .NET and Silverlight. Code Google [online]. [April 2011] [cit. 2012-05-15]. Dostupné z: [32] Cashflow. THE RICH DAD OPERATING COMPANY, Inc. c 2000-2012 [cit. 2012-05-20]. Dostupné z: Rich dad [online]. c 2002-2012 [cit. 2012-05-20]. Dostupné z: [33] Dobyvatel [online].

69

Příloha

Seznam použitých zkratek CKB Cesta k bohatství UI User interface GUI Graphical user interface XML Extensible markup language HTML HyperText Markup Language PHP Hypertext Preprocessor CSS Cascading Style Sheets PDF Portable Document Format FDD Feature-driven development TDD Test-driven development XP Extreme Programming AUP Agile Unified Process DI Dependency injection JSF JavaServer Faces GWT Google Web Toolkit AJAX Asynchronous JavaScript and XML MVC Model-view-controller ASP Active Server Pages SQL Structured Query Language 71

A

A. Seznam použitých zkratek URL Uniform Resource Locator EF ADO.NET Entity Framework CLR Common Language Runtime SVN Subversion GUID Globally unique identifier HTTP Hypertext Transfer Protocol

72

Příloha

B

Instalační a uživatelská příručka Aplikaci CKB si můžete vyzkoušet na stránkách http://ckb.asp2.cz/, ale je možné jí také spustit na vlastním serveru. První část této kapitoly se zabývá instalací potřebných nástrojů a samotným spuštěním aplikace na vlastním stroj, druhá část je věnována samotnému ovládání aplikace.

B.1

Instalace

Potřebné nástroje: • Microsoft Visual Studio 2010 Ultimate • .NET 4.0 je součástí instalace Visual Studia, případně je možné ho stáhnout ze stránek: • ASP.NET MVC 3 není součástí instalace, proto je třeba MVC3 stáhnout a nainstalovat ze stránek: • Microsoft SQL Server 2008 Express je součást instalace Visual Studia nebo ho znovu můžeme stáhnout ze stránek:

B.2

Spuštění

Po nainstalování potřebných nástrojů můžeme aplikaci spustit. Aplikace obsahuje 10 uživatelů: • administrátor: uživatelské jméno="Administrator"a heslo="cestakchudobe" • testovací uživatel: uživatelské jméno="TestUser"a heslo="tttttt" 73

B. Instalační a uživatelská příručka • osm registrovaných uživatelů: uživatelské jméno="User?"a heslo="uuuuuu".

B.2.1

Testy

Unit testy Zde stačí pouze nastavit projekt CKB.UnitTests jako StartUp. Coded UI testy Pro spuštění coded UI testů je třeba nainstalovat Internet Explorer a poté aplikaci spustit na localhost:24193. Nakonec otevřeme Internet Explorer na nastavené adrese. Spustit testy pak lze znovu pouhým nastavením StartUp projektu na projekt CKB.CodedUITests Webové testy Jelikož tyto testy slouží jako základ pro test zátěžový, probíhají přímo proti nasazené aplikaci. Způsobují například náhodné ohodnocení otázky, a je tak lepší se spouštěním těchto testů vyhnout. Load test Tento test probíhá proti nasazené aplikaci: přesto, že ho najdete v odděleném projektu CKB.LoadTest, je výslovně zakázáno tento test spouštět! Způsobuje totiž velkou zátěž serveru, přidávání nesmyslných příspěvků do fóra a další nepořádek v nasazené aplikaci. Pokud vás zajímají výsledky tohoto testu, najdete je v kapitole 6.4.

B.3

Uživatelská příručka

Vzhled úvodní stránky je na obrázku B.1. Aplikace rozlišuje 3 druhy uživatelů: neregistrovaný uživatel, registrovaný uživatel a administrátor.

Neregistrovaný uživatel: Neregistrovaný uživatel má přístup do těchto částí aplikace: • Úvodní stránka: Stránka slouží pouze k navigaci po aplikaci. • O hře: Obsahuje základní informace o hře a možnost vytvořit neschválenou otázku. Ta, pokud bude kladně ohodnocena uživateli, bude systémem zařazena mezi volné otázky bez tématu. • Žebříček: Žebříček hráčů s vyhledáváním podle jména hráče. Pozor, záleží také na velikosti písmen. 74

B.3. Uživatelská příručka

Obrázek B.1: Vzhled aplikace.

• Volná hra: Hra obsahující otázky na všechna témata.

Registrovaný uživatel: Zaregistrováním uživatel získává přístup k dalším částem aplikace. • Hrát: Obsahuje tlačítka pro výběr hry na některé z témat, po jehož vybrání tématu je spuštěna samotná hra. Vzhled hry je zobrazen na obrázku B.2. • Hodnocení: Obsahuje výsledky hráče a současný vzhled stromu. • Fórum: Fórum umožňující přidávat komentáře o hře, názory na hru atd.

Administrátor: Tato role má nejvyšší možné oprávnění. Administrátorem se stává registrovaný uživatel poté, co mu některý z administrátorů přidělí příslušná oprávnění. Administrátor má navíc přístup do sekce nastavení, která umožňuje další funkce. • Zobrazit témata: Zobrazí všechny vytvořené témata i s informací o ID. 75

B. Instalační a uživatelská příručka

Obrázek B.2: Vzhled hry.

• Vytvořit téma: Obsahuje jednoduchý formulář pro vytvoření nového tématu (stačí zadat pouze název tématu). • Vytvořit otázku: Obsahuje možnost vytvořit schválenou otázku. Pole RightAnswer se musí shodovat právě s jednou z odpovědí (pole Answer1, Answer2, Answer3 a Answer4). • Smazat příspěvek: Umožňuje smazat jakýkoliv z příspěvků zadáním ID příspěvku. • Přidat administrátora: Přidá roli administrátora uživateli se zadaným jménem. • Odstranit administrátora: Odebere roli administrátora.

76

Příloha

Obsah přiloženého CD

readme.txt...................................stručný popis obsahu CD dokumentace...............................dokumentace implementace html ............................... dokumentace ve formátu HTML latex...............................dokumentace ve formátu LATEX otázky......................................otázky, které hra obsahuje src impl...................................zdrojové kódy implementace aplikace CKB ............................ zdrojove kódy aplikace databáze ......................... skript pro vytvoření databáze thesis ...................... zdrojová forma práce ve formátu LATEX obrázky ........................................ použité obrázky text ....................................................... text práce BP_Kmoch_Lukas_2012.pdf .............. text práce ve formátu PDF BP_Kmoch_Lukas_2012.ps ................. text práce ve formátu PS 77

C

Sem vložte zadání Vaší práce

Recommend Documents

Otá zka :

@Model . RightAnswer

@Model . Answer1

@Model . Answer2

@Model . Answer3

Ohodno ´t t e p r o s ím o t á zku

@Model . Question