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

Transkript

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

2

3 Č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

4

5 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.

6

7 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

8 Č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.

9 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

10 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

11 Obsah Úvod 17 1 O hře Myšlenka hry Pro koho je hra určena Otázky Rešerše existujících řešení Dobyvatel Cashflow Srovnání Analýza a návrh Agilní metodiky Požadavky na aplikaci Use case Grafický návrh Volba technologie Volba programovacího jazyku Volba databáze pro datovou vrstvu Volba serveru pro webovou aplikaci O zvolené technologii CSS AJAX jquery Realizace Subversion Přihlašování

12 5.3 Ovládací prvky Databáze Požadované funkce Testování Unit testy UI testy Web performance test Load test Shrnutí testů Nasazení ASP Cloud Computing a Windows Azure Dokumentace Doxygen Závěr 65 Návrhy do budoucna Literatura 67 A Seznam použitých zkratek 71 B Instalační a uživatelská příručka 73 B.1 Instalace B.2 Spuštění B.3 Uživatelská příručka C Obsah přiloženého CD 77 12

13 Seznam obrázků 3.1 Agilní vývojový cyklus software FDD vývojový cyklus software Use case aplikace Rozvržení stránek CKB Popularita webových serverů Model View Controller Membership provider Widget hodnocení otázky Diagram databáze CKB Výsledky unit testů Výsledky coded UI testů Load test summary Load test summary Load test graf Load test treshold violations Cloud Computing B.1 Vzhled aplikace B.2 Vzhled hry

14

15 Seznam tabulek 3.1 Statistika rozlišení monitorů

16

17 Ú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

18 Ú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

19 Kapitola 1 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

20 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

21 Kapitola 2 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

22 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

23 Kapitola 3 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 rychlost 2. 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

24 3. Analýza a návrh Obrázek 3.1: Agilní vývojový cyklus software. Převzato z [7] 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

25 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

26 3. Analýza a návrh 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 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í 1366x

27 3.4. Grafický návrh Rozlišení x % 11.64% 5.50% 1280x % 16.16% 18.47% 1024x % 18.55% 24.73% 1280x % 14.48% 16.84% 1680x % 6.66% 6.74% 1920x % 3.80% 1.93% 1440x % 6.08% 6.48% 1600x % 1.76% 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í layout 4 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 banner 5 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%. 4 Layout, rozvržení stránky 5 Banner, reklamní proužek 27

28 3. Analýza a návrh 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

29 Kapitola 4 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

30 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] února 2012 byl uvolněn experimentální prohlížeč Chromium podporující Dart. 30

31 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

32 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

33 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

34 4. Volba technologie 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 p u b l i c 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 { get ; s e t ; } 7 p u b l i c s t r i n g Answer1 { get ; s e t ; } 8 p u b l i c s t r i n g Answer2 { get ; s e t ; } 9 p u b l i c s t r i n g Answer3 { get ; s e t ; } 10 } 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

35 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 p u b l i c c l a s s P a g e s C o n t r o l l e r : C o n t r o l l e r 2 { 3 p u b l i c ActionResult ShowQuestion ( ) 4 { 5 //Zde by bylo z í sk án í dat z datab á ze 6 QuestionModel q u e s t i o n = new QuestionModel { 7 Question = "V k t e r ý den byl tzv. Čern ý pá tek? " ; 8 RightAnswer = "Út e r ý " ; 9 Answer1 = " St ř eda " ; 10 Answer2 = "Čt v r t e k " ; 11 Answer3 = "Pá tek " ; 12 } 13 return 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: QuestionModel 2 3 <h1>otá zka : </ h1> 4 <div> 5 <h2>@model. RightAnswer </h2> 6 <h2>@model. Answer1</h2> 7 <h2>@model. Answer2</h2> 8 <h2>@model. Answer3</h2> 9 </div> 35

36 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 r o u t e s. MapRoute ( 2 " Default ", // Route name 3 "{ c o n t r o l l e r }/{ a c t i o n }/{ id } ", // URL with parameters 4 new { c o n t r o l l e r = " Pages ", 5 a c t i o n = " Index ", 6 id = UrlParameter. Optional 7 } // Parameter d e f a u l t s 8 ) ; 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 r o u t e s. MapRoute ( 2 " Forum ", // Route name 3 " Pages /Forum/{ page } ", // URL with parameters 4 new { c o n t r o l l e r = " Pages ", 5 a c t i o n = "Forum ", 6 page = " 0 " 7 } // Parameter d e f a u l t s 8 ) ; 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

37 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

38 4. Volba technologie 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 : black }) 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 : black } 2 <h2> { c o l o r : red } 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 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

39 Kapitola 5 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

40 5. Realizace Obrázek 5.1: Membership provider 40

41 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 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 PartialViewResult QuestionRanking ( s t r i n g ranking, 3 s t r i n g q u e s t i o n I d ) 4 { 5 i n t id ; 6 Int32. TryParse ( questionid, out id ) ; 7 rep. ChangeQuestionRanking ( id, ranking ) ; 8 return PartialView ( rep. RandomDisapprovedQuestion ( ) ) ; 9 } 8 Widget, ovládací prvek 9 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. 41

42 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. CKB. Models. DisapprovedQuestionModel 2 3 <d i v i d =" ajaxrankingform"> ( Ajax. BeginForm ( " QuestionRanking ", " Pages ", 5 new AjaxOptions 6 { 7 InsertionMode = InsertionMode. Replace, 8 HttpMethod = "POST", 9 OnFailure = " s e a r c h F a i l e d ", 10 UpdateTargetId = " ajaxrankingform ", 11 } ) ) 12 { 13 <h2>ohodno t te pros ím ot ázku</h2> 14 <h3>@model. Question </h3> 15 <input type="submit " name=" ranking " value ="Dobrá " /> 16 <input type="submit " name=" ranking " value ="Průmě r " /> 17 <input type="submit " name=" ranking " value ="Špatn á " /> 18 <input type="hidden " name=" q u e s t i o n I d " 19 value ="@Model. QuestionId. ToString ( ) " /> 20 } 21 </div> 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

43 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

44 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 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

45 5.5. Požadované funkce 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 Ž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 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

46 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 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 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

47 Kapitola 6 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

48 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 ActionResult Index ( ) 6 { 7 return View ( 8 db. User. OrderByDescending ( p => p. UserLevel ). 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 rep ; 4 5 p u b l i c ActionResult Index ( ) 6 { 7 return View ( rep. TopPlayers ( ) ) ; 8 } 9 } 48

49 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 return db. User. OrderByDescending ( p => p. UserLevel ). 8 ThenByDescending ( p => p. TotalRightAnswerCount ). 9 ThenByDescending ( p => p. TotalWrongAnswerCount ) ; 10 } // 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