BAKALÁŘSKÁ PRÁCE. Grafický actor systém pro výuku programování. Graphical actor system for programming education

BAKALÁŘSKÁ PRÁCE Grafický actor systém pro výuku programování Graphical actor system for programming education

Un ico rn Co lle ge © 20 11 Un ico rn Co lle ge , V K ap slo vn ě 27 67 /2 , P ra h a 3 , 1 30 00 Ná ze v p rá ce v ČJ: Ná ze v p rá ce v AJ:

G ra f ický a cto r syst é m p ro výu ku p ro gra m o vá n í G ra p h ica l a cto r syst e m f o r p ro gra m m in g ed uca t ion

Au to r:

Pa t rik Ma jko wski

Aka de m ický ro k:

20 11

Ko nt a kt:

E -ma il: pa t rik.m a jko wski@ gm a il. co m Te l. : (+4 20 ) 7 23 15 5 8 26

Bakalářská práce Grafický actor systém pro výuku programování Graphical actor system for programming education

1.

ZADÁNÍ

▪3▪


2.

ABSTRAKT

Cílem této práce je realizovat systém pro výuku programování a algoritmizace. Toto je zatím doménou především mnoha desktopových aplikací a jazyků. Právě proto bude tento systém zpracován s využitím moderních technologií : jazyk Ruby s nadstavbou Ruby on Rails, JavaScript s knihovnou jQuery a podobně. Takovéto aplikaci říkáme webová aplikace - uživatel má pouze webový prohlížeč a aplikace samotná běží na vzdáleném stroji - serveru. Tento přístup má kromě nesporných výhod i řadu nevýhod, cílem práce je s využitím JavaScriptu dosáhnout chování co nejblíže klasické desktopové aplikaci. Další částí práce je formální charakteristika systému - popisy jednotlivých use-case, class diagramy důležitých sekcí nebo ostatní zajímavé diagramy. Zároveň je také součástí kompletní uživatelská příručka. V té je popsáno veškeré API přístupné pro uživatele, pomocí kterého může testovat svoje algoritmy.

Klíčová slova: výuka programování, algoritmizace, Ruby on Rails, webová aplikace, JavaScript, webový prohlížeč, AJAX, jQuery

▪4▪


3.

ABSTRACT

The aim of this work is to implement system for education on topics of programming and algorithm design. For now, it is domain of many desktop applications and languages. Because of this, the application will be deployed with usage of modern technologies : Ruby language with Ruby on Rails framework, JavaScript with jQuery library and so on. Such application is called web application user only has a web browser and the application itself runs at remote computer - server. This ap proach has many advantages, but also a few disadvantages, this work aims to minimize those by using JavaScript, and achieve almost similar behavior to a desktop application. Another part ot the work is formal definition of the application - descriptions of all use-cases, class diagrams of import ant section or other important diagrams. Next part is complete user's manual. It contains definition of an API that users can use to implement and test their algorithms.

Keywords: programming teaching, algorithmization, Ruby on Rails, web application, JavaScript, web browser, AJAX, jQuery

▪5▪


4.

PROHLÁŠENÍ

Prohlašuji, že svou bakalářskou práci na téma Grafický actor systém pro výuku programování jsem vypracoval samostatně pod vedením vedoucího bakalářské práce a s použitím odborné literatury a dalších informačních zdrojů, které jsou v práci citovány a jsou též uvedeny v seznamu literatury a použitých zdrojů. Jako autor uvedené bakalářské práce dále prohlašuji, že v souvislosti s vytvořením této bakalářské práce jsem neporušil autorská práva třetích osob, zejména jsem nezasáhl nedovoleným způsobem do cizích autorských práv osobnostních a jsem si plně vědom následků porušení ustanovení § 11 a následujících autorského zákona č. 121/2000 Sb.

V Praze dne 10.04.2011

Patrik Majkowski

▪6▪


5.

PODĚKOVÁNÍ

Děkuji vedoucímu bakalářské práce Tomášovi Holasovi za účinnou metodickou, pedagogickou a odbornou pomoc a další cenné rady při zpracování mé bakalářské práce.

▪7▪


6.

OBSAH

1. 2. 3. 4. 5. 6. 7. 8.

Zadání......................................................................................................................................... 3 Abstrakt....................................................................................................................................... 4 Abstract....................................................................................................................................... 5 Prohlášení.................................................................................................................................. 6 Poděkování................................................................................................................................. 7 Obsah.......................................................................................................................................... 8 Úvod.......................................................................................................................................... 10 Přehled jazyků určených pro výuku programování.............................................................11 8.1 Logo.................................................................................................................................. 11 8.2 Squeak.............................................................................................................................. 13 8.3 Karel.................................................................................................................................. 16 8.4 Pascal............................................................................................................................... 17 8.5 Java (BlueJ)..................................................................................................................... 18 8.6 Ostatní jazyky.................................................................................................................. 19 9. Robot Karel Online.................................................................................................................. 21 9.1 High-level pohled............................................................................................................ 21 9.2 Use-case model............................................................................................................... 23 9.3 Datový model................................................................................................................... 24 9.3.1 Tabulka Actors............................................................................................................. 25 9.3.2 Tabulka Maps............................................................................................................... 25 9.3.3 Tabulka Simulations.................................................................................................... 26 9.3.4 Tabulka SimulationSteps............................................................................................ 27 9.4 Komponenta Map_controller.......................................................................................... 28 9.4.1 Založit vzor mapy......................................................................................................... 28 9.4.2 Editovat vzor mapy...................................................................................................... 28 9.4.3 Zobrazit vzor mapy...................................................................................................... 30 9.4.4 Smazat vzor mapy....................................................................................................... 30 9.5 Komponenta Actors_controller......................................................................................31 9.5.1 Založit vzor aktéra....................................................................................................... 31 9.5.2 Editovat vzor aktéra.................................................................................................... 31 9.5.3 Zobrazit vzor aktéra.................................................................................................... 31 9.5.4 Smazat vzor aktéra...................................................................................................... 31 9.6 Komponenta Simulations_controller.............................................................................31 9.6.1 Založit simulaci............................................................................................................ 32 9.6.2 Editovat aktéry simulace............................................................................................. 32 9.6.3 Provést simulaci........................................................................................................... 34 9.6.4 Sledovat simulaci......................................................................................................... 38 9.6.5 Smazat simulaci........................................................................................................... 40 10. Uživatelská příručka............................................................................................................. 41 10.1 Úvodní stránka.............................................................................................................. 41 10.2 Správa vzorů map......................................................................................................... 42 10.3 Správa vzorů aktérů..................................................................................................... 44 10.4 Správa simulací............................................................................................................. 45 10.5 API aktéra ...................................................................................................................... 49 10.5.1 Objekt Vector2........................................................................................................... 49 10.5.2 Metody aktéra............................................................................................................ 50 10.5.3 Shrnutí API................................................................................................................. 51 11. Příkladová data..................................................................................................................... 52 11.1 Mapy............................................................................................................................... 52 11.2 Aktéři............................................................................................................................... 52 11.3 Simulace......................................................................................................................... 53

▪8▪


12. 13. 14. 15. 16. 17. 18.

Závěr....................................................................................................................................... 54 Conclusion............................................................................................................................. 55 Seznam použité literatury.................................................................................................... 56 Seznam použitých symbolů a zkratek................................................................................57 Seznam obrázků.................................................................................................................... 58 Seznam tabulek..................................................................................................................... 60 Seznam příloh........................................................................................................................ 61

▪9▪


7.

ÚVOD

Princip fungování algoritmů, základní programátorských konstrukcí, datových typů atd. je pro každého budoucího programátora naprosto základní znalost. Každé školní zařízení, které si klade za cíl vychovávat budoucí vývojáře k tomuto problému přistupuje jinak. Některé školy využívají nějaký z běžně používaných programovacích jazyků. Tento přístup má výhodu v praktičnosti výsledky jsou tak úplně běžnými programy, což může studenty motivovat k dalšímu bádání. Velkou nevýhodou je ale absence okamžitého, dobře viditelného výsledku. Ve většině případů je první forma rozhraní, s kterou přijdou studenti do styku, textová konzole. Teď je na místě si připomenout, že se bavíme o uživatelích nejnižšího stupně znalostí - chce si vyzkoušet fungování svých algoritmů a okamžitě vidět výsledek. Textové výpisy na konzoli toto do jisté míry umožňují, avšak některé uživatele mohou odrazovat. Možností, jak toto řešit, je rovnou dát studentům nástroje pro tvorbu GUI (grafické uživatelské rozhraní). Toto s sebou ale nese další komplikace - GUI je prakticky vždy svázáno s objektově orientovaným přístupem (OOP). Tento přístup, ačkoliv je dnes uznávaný jako správný přidává další úroveň znalostí, která je nezbytná pro studenty, a proto dále komplikuje počáteční výukový proces. Aby bylo možné programování a algoritmizaci přiblížit např. dětem nebo naprostým začátečníkům, vznikla řada specializovaných jazyků určených právě pro výuku algoritmizace. Podrobný přehled a popis těchto jazyků je náplní další části tohoto textu. Internet je dnes fenoménem, jehož vývoj za posledních 10 let šel velice rychle kupředu. Web, jakožto stěžejní služba Internetu se také přizpůsoboval bouřlivému vývoji. Z původně statických stránek, které byly pouze formou zobrazení dokumentů, se vyvinuly dnešní Web 2.0 1 aplikace. Ohromnou výhodou webových aplikací oproti konvenčním je její dostupnost kdekoliv, kde se nachází připojení k Internetu. Zároveň je aplikace sdílená všemi uživateli, což přináší možnost jejich interakce. Aplikace, jež je praktickou součástí této práce má za cíl spojit oba tyto světy - inspiruje se programovacím jazykem Karel jakožto specializovaným nástrojem pro výuku programování. Zároveň je realizována jako Web 2.0 aplikace, uživateli tedy pro použití stačí používat moderní prohlížeč a být připojen k Internetu. Cílem je ukázat, že webové aplikace se dají využít i pro tuto problémovou doménu, se všemi výhodami, které přináší.

1

Termín „Web 2.0“ je ustálené označení pro etapu vývoje webu, v níž byl pevný obsah webových stránek nahrazen prostorem pro sdílení a společnou tvorbu obsahu. Týká se období od roku 2004 do současnosti. (zdroj: http://en.wikipedia.org/wiki/Web_2.0) .

▪ 10 ▪


8. PŘEHLED JAZYKŮ URČENÝCH PRO VÝUKU PROGRAMOVÁNÍ Tato kapitola obsahuje nejznámější ze specializovaných jazyků určených pro výuku programování. Čerpá především z článku o těchto jazycích na www.root.cz.

8.1

Logo

Dle mého názoru jeden z nejzajímavějších jazyků pro tuto problémovou doménu. Vznikl už v roce 1967 a celý je orientovaný na 2-rozměrné pole, po kterém se pohybuje aktér - želva. Tento aktér je vybaven perem, které za ním kreslí stopu, toto pero se dá programově ovládat (vypnutí/zapnutí). Aktér rozumí těmto příkazům: Příkaz

Parametr

Význam

forward

počet kroků

Posun želvy dopředu o zadaný počet kroků

back

počet kroků

Posun želvy zpět o zadaný počet kroků

left

úhel ve stupních

Natočení želvy doleva o zadaný úhel

right

úhel ve stupních

Natočení želvy doprava o zadaný úhel

penup

Zvednutí pera (vypnutí kreslení čáry)

pendown

Položení pera (zapnutí kreslení čáry)

stop

Ukončení procedury

Tabulka 1 - Příkazy jazyka Logo Tento velice jednoduchý a pochopitelný princip umožňuje uživatelům tvořit programy s jasným a rychlým výstupem, kterým si mohou ověřit správnost jimi navrženého algoritmu. Interpret Loga také umožňuje používat všechny potřebné programátorské konstrukce : podmínky, cykly, definice procedur a rekurzi. Pro příklad uvedeme následující zdrojový text zapsaný v jazyce Logo : to ctverec :velikost repeat 4 [ forward :velikost right 90 ] end to obrazec :pocet repeat :pocet [ ctverec 100

▪ 11 ▪


]

left 360/:pocet

end obrazec 20 Zdrojový text 1 - Příklad v jazyce Logo Jedná se o definici 2 procedur : ctverec a obrazec. Každá z nich přijímá jeden parametr, u procedury ctverec určuje délku hrany generovaného čtverce, u procedury obrazec určuje počet generovaných čtverců rovnoměrně pootočených. Nakonec probíhá volání procedury obrazec s parametrem 20. Po spuštění tohoto programu v programu FMSLogo (jeden z mnoha interpreterů loga pro Windows) získáme následující výstup (trojúhelník ve středu reprezentuje aktéra, nejedná se o výstup programu):

Obrázek 1 - Výstup prvního příkladového programu jazyce Logo V jazyce Logo lze s využitím rekurze napsat i mnohem pokročilejší algoritmy, například pro vykreslování fraktálních obrazců (zdrojový text převzat od : http://et.bgcbellevue.org/logo/fractals.html ) : TO SNOWFLAKE.SIDE :LENGTH :DEPTH IF :DEPTH = 0 [ FORWARD :LENGTH STOP ] SNOWFLAKE.SIDE :LENGTH

/ 3 :DEPTH - 1

▪ 12 ▪


LEFT 60 SNOWFLAKE.SIDE :LENGTH RIGHT 120 SNOWFLAKE.SIDE :LENGTH LEFT 60 SNOWFLAKE.SIDE :LENGTH END

/ 3 :DEPTH - 1 / 3 :DEPTH - 1 / 3 :DEPTH - 1

TO SNOWFLAKE :LENGTH :DEPTH REPEAT 3 [ SNOWFLAKE.SIDE :LENGTH :DEPTH RIGHT 120 ] END SNOWFLAKE 200 4 Zdrojový text 2 - Pokročilejší příklad v jazyce Logo Výstupem je známý fraktál sněhové vločky :

Obrázek 2 - Výstup druhého příkladového programu v jazyce Logo (zdroj: http://et.bgcbellevue.org/logo/fractals.html)

8.2

Squeak

Výukový projekt, který staví na objektově orientovaném jazyku Smalltalk. Tento jazyk je takzvaně čistě objektový, to znamená, že i základní datové typy jako je celé číslo nebo hodnota pravda/nepravda jsou objekty (na rozdíl např. od jazyka Java, kde se jedná o tzv. primitivní datové

▪ 13 ▪


typy). S tím také souvisí mechanismus komunikace jednotlivých objektů mezi sebou, kdy se komunikuje výhradně přes tzv. zprávy. Tyto zprávy mohou být 3 různých typů: ■ Unární zpráva ■ Binární zpráva ■ Zpráva s obecným počtem parametrů

Unární zpráva neobsahuje žádné parametry, jediným způsobem, jak zjistit její význam je přímo její název (tzv. selektor). Příkladem unární zprávy je například zjištění absolutní hodnoty čísla : -42 abs > 42 Číslo -42 je objektem celého čísla, které umí reagovat na přijetí zprávy abs - navrácením své absolutní hodnoty. Binární zpráva pracuje s dvojicí objektů, prvním objektem je příjemce zprávy, tedy objekt, který zprávu zpracovává. Druhým objektem je parametr zprávy. Je nezvyklé, že na zprávách jsou ve Squeaku postaveny i základní aritmetické a logické operace. Nezvyklé proto, že u nich neplatí priorita operátorů, jak bývá na tomto místě zvykem. Například výraz 5 + 4 * 2 se vyhodnotí jednoduše zleva doprava, čili jako 18, ačkoliv matematicky správný výsledek je, s ohledem na prioritu násobení před sčítáním, 13. Samozřejmě je zde možnost vynutit prioritu použitím kulatých závorek, dalším pravidlem je priorita zpracovávání jednotlivých typů zpráv : unární, binární, obecný počet parametrů. Zpráva s obecným počtem parametrů je zobecněním předchozích typů zpráv. Obsahuje libovolné množství klíčových slov ukončených dvojtečkou, za každým klíčovým slovem následuje parametr. Situaci lépe ilustruje převzatý obrázek, který srovnává binární zprávu a zprávu s obecným počtem parametrů:

▪ 14 ▪


Obrázek 3 - Syntaxe binární zprávy a zprávy s proměnným počtem parametrů (zdroj: http://www.root.cz/clanky/zaklady-programovani-ve-squeaku-2/) Jak je z obrázku patrné, selektorem zprávy jsou potom všechna zadaná klíčová slova. Nelze tedy nějaké zprávě zadat špatný počet parametrů, v případě, že nějaký parametr zapomeneme nebo naopak přebývá, tak příjemce zprávy zahlásí chybu, že takovou zprávu nezná. Squeak nabízí velmi pokročilé prostředí pro vývoj programů. Umožňuje dokonce si otáčet okna o libovolný úhel a celé působí velmi hravě. Screenshot s tímto prostředím obsahuje následující obrázek.

Obrázek 4 - Vývojové prostředí Squeaku (zdroj: http://www.root.cz/clanky/prvni-kroky-ve-squeaku/)

▪ 15 ▪


Dle mého mínění je Squeak skvělou volbou pro pokročilejší studenty, kteří už mají základní znalosti a chtěli by se naučit programovat objektově, jak je to dnes již v podstatě standardem.

8.3

Karel

Dostáváme se k jazyku, který je hlavní inspirací a vzorem pro aplikaci která je součástí této bakalářské práce. Vznikl v roce 1981 a je pojmenován podle jména Karla Čapka, spisovatele, který napsal hru R.U.R. - v té se poprvé vyskytlo slovo robot, které se dnes používá po celém světě. Robot je také hlavním aktérem v tomto jazyce. Pohybuje se po 2D souřadnicovém systému, který kromě něj může obsahovat ještě zdi a značky. Zeď je neprůchozím elementem zatímco značka může být robotem zvednuta a přesunuta jinam. Robot se může pohybovat pouze do čtyř základních směrů (nahoru, dolů, doleva, doprava) a velikost jednoho kroku je fixní. Oproti Logu je tedy pohyb robota velmi jednoduchý, to je zároveň důvod, proč je tento jazyk asi nejvhodnější pro úplné začátečníky. Instrukční sada robota obsahuje : Klíčové slovo

Význam

KROK

Posun o jedno políčko vpřed ve směru pohybu

VLEVO-VBOK

Otočení aktéra o 90 stupňů doleva

ZVEDNI

Zvedne značku, pokud tam nějaká je

POLOZ

Položí značku kterou robot drží

Tabulka 2 - Instrukční sada jazyka Karel Instrukční sada je tedy naprosto minimální a důležitou součástí je tzv. slovník. V podstatě se jedná o uložené procedury. Idea je taková, že uživatel si pomocí elementárních příkazů dodefinuje svoje, vlastní. Typickým příkladem je procedura pro orientaci robota např. na sever NA-SEVER ZNAMENA KDYZ JE SEVER KONEC JINAK VLEVO-VBOK NA-SEVER KONEC KONEC Zdrojový text 3 - Procedura v jazyce Karel

▪ 16 ▪


Vzhled jednoho z mnoha prostředí implementujících jazyk Karel je vidět na následujícím obrázku.

Obrázek 5 - Prostředí Karel na platformě Windows (zdroj: http://www.root.cz/clanky/programovacijazyky-urcene-pro-vyuku-programovani/ )

8.4

Pascal

Nemohu zapomenout ne tento dnes již archaický jazyk, který je ale dodnes používán na mnoha školách (byl i mou první zkušeností s programováním). Byl navržen v roce 1969 pro účely výuky tak, aby v něm bylo možné psát programy splňující zásady strukturovaného programování. Strukturovaným programováním myslíme rozpad programu na jednotlivé dílčí funkčnosti procedury a funkce, které problém postupně řeší. Důležitou ideou je maximální vyhýbání se instrukci GOTO a její náhrada strukturovanými bloky podmínek a cyklů. Jazyk obsahuje spoustu knihoven pro práci s grafikou a podobně. Ve své původní podobě nebyl objektový, to ale změnila

▪ 17 ▪


nadstavba Object Pascal. Velice známé je i prostředí Delphi, které vyvíjela a udržovala firma Borland. Delphi ve verzi 7 je údajně prý stále používáno 2, což je důkazem jeho popularity. Toto IDE umožňuje velice rychle vyvíjet aplikace s GUI rozhraním. Výhodou je nenáročnost pro studenty, ačkoliv se jedná o OOP jazyk, tak pro ně stačí pochopit princip asynchronních událostí např. po kliknutí na tlačítko.

Obrázek 6 - Prostředí Borland Delphi 7 (zdroj: http://www.kdedevelopers.org/node/1617 )

8.5

Java (BlueJ)

Javu jistě není potřeba blíže představovat. Dnes se jedná o jeden z nejvíce používaných OOP jazyků v business sféře. BlueJ je speciální IDE pro tento jazyk, které je specificky určeno pro výuku. Uživatel například vidí graficky strukturu tříd jeho programu, může ji jednoduše klikáním modifikovat zatímco IDE na pozadí upravuje zdrojové soubory tak, aby odpovídaly této struktuře. Také může snadno volat metody na těchto třídách jednoduše pomocí myši. Jedná se o drobná usnadnění, která ale dle mého názoru dost usnadňují poznávání novým uživatelům. 2

Podle článku na http://edn.embarcadero.com/article/39136.

▪ 18 ▪


Obrázek 7 - BlueJ běžící na Mac OS X (zdroj: http://www.bluej.org/about/what.html )

8.6

Ostatní jazyky

Do této skupiny jsem se rozhodl zařadit další jazyky, které jsou vhodné pro výuku programování. Především se jedná o jazyky Ruby a Python. Oba jsou objektově orientované a interpretované, což je velká výhoda při výuce. Interpretovaný jazyk totiž můžeme prozkoumávat ve formě interaktivní konzole, kde se dá velice rychle vyzkoušet některé jednoduché konstrukce, popřípadě ověřit fungování nějakého algoritmu.

Obrázek 8 - IRB (Interative RuBy) konzole demonstrující vlastnosti objektu textového řetězce (String)

▪ 19 ▪


Na konec této kapitoly bych rád dodal, že i jazyky, které zde nejsou zmíněny se dají použít na výuku programování. Jazyk je pouze nástrojem, jak dosáhnout implementace nějakého algoritmu. Pokud se student naučí algoritmicky myslet, tak mu může být jedno, v jakém jazyce bude problém řešit (samozřejmě po seznámení se s syntaxí nebo speciálními vlastnostmi jazyka). Každý jazyk, který naučí studenta používat základní programátorské konstrukce tak jde klasifikovat, jako jazyk vhodný pro výuku programování.

▪ 20 ▪


9.

ROBOT KAREL ONLINE

Obsahem této kapitoly je popis aplikace Robot Karel online která je praktickou součástí této bakalářské práce. Jsou v ní popsány jednotlivé komponenty, spolupráce mezi nimi, použité technologie a podobně.

High-level pohled Obsahuje

Obsahuje

Mapa

Databáze

Vzor aktéra

Obsahuje

Je vytvořena podle vzoru

Vzor mapy

Zdrojový kód

Jsou vytvořeni podle vzorů

9.1

Simulace

Aktér

Instance zdrojového kódu

Simulační krok

Obrázek 9 - High level pohled na aplikaci Robot Karel 3 3

Barvy entit určují jejich prioritu podle zásad UUBML (Unicorn Unified Business Modeling Language), tedy:

■ světle žlutá - nejvyšší priorita (např. Simulace) ■ světla modrá - vysoká priorita (např. Mapa) ■ šedá - normální priorita (např. Vzor mapy) ■ světle šedá - nízká priorita (v tomto diagramu není využita) Toto platí dále pro všechny diagramy, ve kterých se budou tyto barvy vyskytovat.

▪ 21 ▪


Na diagramu vidíme nejdůležitější entity v aplikaci. Začneme u simulace - ta reprezentuje chování jednoho nebo více aktérů, kteří jsou její součástí. Tito aktéři jsou vytvořeni podle nějakého vzoru aktéra, od kterého přebrali jeho zdrojový kód - ten určuje, jak se budou v simulaci pohybovat a chovat. Další součástí simulace je také mapa, která definuje velikost pole, po kterém se mohou aktéři pohybovat a zároveň pozice zdí, přes které aktéři nemohou projít. Mapa je také založena podle již existující šablony, kterou zkopíruje. Důležitou vlastností obou vzorů (mapy i aktéra) je to, že po založení simulace a zkopírování vlastností vzoru vazba mezi vzorem a jeho instancí (to, co je součástí simulace) zaniká. Pokud tedy modifikujeme například některý z vzorů mapy, tak se tato změna na již existujících simulacích neprojeví. To samé platí i pro aktéry. Zatímco mapa je po té, co se stane součástí simulace už dále needitovatelná, u aktérů (respektive jejich zdrojových kódů) toto neplatí. Pro účely výuky je žádoucí, aby bylo možné zdrojový kód jednoduše měnit a sledovat výsledek. Proto má aktér obsaženu tzv. instanci zdrojového kódu. Ta má vyjadřovat, že na začátku byla vytvořena zkopírováním nějakého vzoru aktéra, ale na toto nelze spoléhat, protože uživatel ji může velmi snadno měnit. Poslední součástí každé simulace je množina jejich simulačních kroků. Jeden simulační krok obsahuje pozice a orientaci všech aktérů na dané mapě v jednom okamžiku. Zároveň obsahuje také pořadové číslo kroku, které zajišťuje jednoznačné uspořádání tohoto kroku mezi ostatními kroky simulace. Pokud si budeme přehrávat kroky od nejnižšího k nejvyššímu, tak získáme kompletní výstup simulace, tedy pozici a orientace všech jejich aktérů od začátku do konce. Konec simulace určuje uživatel, který si vždy může určit, kolik kroků simulace chce spočítat dopředu. Výpočet kroků simulace zajišťuje jádro aplikace - podle výchozí pozice aktérů a jejich instancí zdrojového kódu vypočte jejich další pozici. Poté tento výpočet opakuje, dokud nevygeneruje potřebný počet simulačních kroků. Databáze má za úkol zajistit perzistentní uchovávání veškerých dat, které během chodu aplikace vznikají. Jsou v ní tedy uloženy veškeré vzory map i aktérů. Zároveň ukládá i kompletní stav každé simulace, tedy její mapu, všechny aktéry včetně instancí zdrojových kódů a veškeré vypočtené simulační kroky. Ukládání simulačních kroků s sebou nese jednu výhodu : pokud uživatel nijak nemodifikoval parametry simulace (zejména počet, pozici aktérů, jejich orientaci a zdrojové kódy), tak není nutno znova počítat simulační kroky, pokud už tak bylo jednou uděláno. Postačuje pouze z databáze přečíst všechny simulační kroky, provést jejich seřazení a výstup prezentovat uživateli.

▪ 22 ▪


9.2

Use-case model <>

UC01 - Vytvořit vzor mapy

UC02 – Editovat vzor mapy

UC03 – Zobrazit vzor mapy

UC04 – Smazat vzor mapy

UC05 - Vytvořit vzor aktéra

UC06 - Editovat vzor aktéra

UC07 – Smazat vzor aktéra

UC08 - Vytvořit simulaci Uživatel

UC09 – Editovat aktéry simulace

UC10 - Provést simulaci

UC11 – Sledovat simulaci

UC12 – Smazat simulaci

UC13 – Zobrazit nápovědu

Obrázek 10 - Use-case model

▪ 23 ▪


Use-case model (model případů užití) nám ukazuje jednotlivé funkčnosti aplikace z pohledu koncového uživatele. Na první pohled je zřejmé, že uživatelé aplikace nejsou nijak klasifikováni z hlediska přístupových práv a podobně. Tuto část jsem vynechal, protože mým hlavním cílem bylo navrhnout „motor“ aplikace, než řešit další problémy spojené s implementací uživatelských účtů a bezpečností. Těchto 13 případů užití má za cíl umožnit všechny operace s entitami popsané v high-level pohledu. Posledním případem užití je zobrazení rychlé nápovědy, která je vyvolána jako první stránka při přístupu ke kořenovému adresáři aplikace. Některé případy užití jsou triviální z hlediska implementace a proto jsou na modelu případů užití značeny normální prioritou. Případy užití označené vysokou prioritou již obnášejí více záležitostí ohledně asynchronní komunikace s aplikací pomocí AJAXu4 a podobně. Případy užití označené nejvyšší prioritou tvoří zmiňovaný „motor“ aplikace.

9.3

Datový model 1

Actor

Map

Simulation

* SimulationStep

Obr. 11 - Datový model aplikace Na první pohled překvapí datový model svou jednoduchostí. Tabulky Actor a Map obsahují vzory aktérů a map, mezi simulací a těmito tabulkami neexistuje žádná vazba kvůli tomu, že nechceme, aby se po změně nějakého vzoru toto projevilo v existujících simulacích. Simulace má větší množství simulačních kroků. Celá databáze se tedy skládá ze 4 tabulek. Tento model vznikl postupným vývojem, kdy se neustále objevoval problém omezení klasických SQL databází. Jedná se o to, že nejsou vhodné na uchovávání proměnlivého množství dat (počet aktérů v simulaci, různé velikosti map). Optimálním řešením se nakonec ukázalo použití formátu YAML5 nebo JSON6. Jelikož bylo jasné využití JavaScriptu jako jazyka na straně prohlížeče, tak padla volba na formát JSON. JSON je formát, který umožňuje převádět objekty umístěné v paměti programu do jejich reprezentace běžným textovým řetězcem a obráceně. Zároveň definuje i pole, 4

AJAX je zkratkou pro „Asynchronous JavaScript and XML“ - jedná se o mechanismus, kdy může webová stránka komunikovat se serverem mimo klasický model požadavek/odpověď. Toto umožňuje stránkám dynamicky zobrazovat a aktualizovat obsah bez nutnosti neustálého obnovování okna prohlížeče. Díky tomu se mohou aplikace chováním více podobat klasickým desktopovým.

5

YAML Ain't Markup Language - Formát serializace objektů široce využívaný v jazyce Ruby a frameworku Ruby on Rails.

6

JavaScript Object Notation - Lehký a jednoduchý formát výměny dat. Je založený na syntaxi JavaScriptu.

▪ 24 ▪


do kterého je možno těchto objektů umístit více za sebe. Syntaxe není až tak důležitá, pro její definici navštivte: http://www.json.org/. Rozhraní JSONu je velmi jednoduché, programátorovi poskytuje 2 metody. První metoda očekává jako parametr nějaký objekt, vrací řetězec s JSON reprezentací tohoto objektu. Druhá metoda funguje přesně obráceně - očekává JSON reprezentaci objektu, který posléze vrací. Se znalostí JSONu a jeho výhod můžeme přejít na popis tabulek a jejich sloupců. Pokud název nějakého sloupce končí _json, tak to označuje, že je tento sloupec využit na ukládání dat ve formátu JSON. To automaticky znamená, že při čtení z tohoto sloupce je potřeba jej zpracovat JSON parserem. To samé platí i pro ukládání, akorát je proces obrácený. Dále to již text nebude zmiňovat. Každá tabulka obsahuje sloupec id s primárním klíčem. Toto zajišťuje automaticky platforma Rails, proto dále nebude tento sloupec zmiňován.

9.3.1

Tabulka Actors

Název sloupce

Datový typ (Rails)

Obsah

name

string

Název aktéra

description

string

Popis aktéra

source_code

binary

Zdrojový kód pro jeden krok aktéra

static_code

binary

Zdrojový kód vykonáváný pouze na začátku

hitpoints

integer

Počet životů aktéra na začátku

Tabulka 3 - Sloupce tabulky Actors Tabulka obsahuje pouze veškeré údaje vzorů aktéra. JSON jako takový není použitý, protože zde pro to není důvod.

9.3.2

Tabulka Maps

Název sloupce

Datový typ (Rails)

Obsah

name

string

Název mapy

data_json

binary

Mapa ve formátu JSON

Tabulka 4 - Sloupce tabulky Maps Zde již je využito formátu JSON pro uložení mapy. Mapa je 2-rozměrné pole (pole polí) - délky těchto polí určují velikost mapy, ačkoliv aplikace je omezena pouze na čtvercové mapy maximální velikosti 40 (kvůli grafickým prvkům na této mapě). Vnitřní pole může být buďto prázdné (potom je políčko volné) nebo může obsahovat řetězec „wall“, který označuje, že na tomto políčku se nachází zeď. Mapa neobsahuje žádné pozice aktérů - více o tomto rozhodnutí v dalších kapitolách.

▪ 25 ▪


Jako příklad toho, jak vypadá uložená mapa ve formátu JSON, si nejprve ukažme mapu vizuálně:

Obrázek 12 - Příkladová mapa7 Je to tedy mapa velikosti 3x3, která má 3 zdi na svojí hlavní diagonále. JSON reprezentace této mapy vypadá takto:

[ [["wall"],[],[]], [[],["wall"],[]], [[],[],["wall"]] ] Zdrojový kód 4 - Příkladová mapa ve formátu JSON Znaky '[' a ']' označují začátek a konec pole, prvky tohoto pole jsou odděleny čárkou. Pro zpřehlednění výpisu byly do kódu přidány znaky nového řádku, aby byla zjevná analogie mezi mapou a její JSON reprezentací. Ve skutečné databázi se JSON ukládá vždy maximálně jednoduše, tedy bez znaků nových řádků. Naopak se většinou automaticky tzv. vyescapuje znak uvozovky (") protože SQL dotaz použitý při manipulaci s tímto znakem by nebyl validní. Escapovaním myslíme přidání znaku \ před problémový znak - to zajistí validnost výsledného dotazu.

9.3.3

Tabulka Simulations

Název sloupce

Datový typ (Rails)

Obsah

name

string

Název simulace

map_json

binary

Instance mapy pro tuto simulaci ve formátu JSON

actors_json

binary

Instance aktérů pro tuto simulaci ve formátu JSON

Tabulka 5 - Sloupce tabulky Simulations Simulace již využívá naplno možností formátu JSON. Sloupec map_json obsahuje 1:1 zkopírovanou mapu ze vzoru mapy, podle které byla tato simulace založena. Sloupec actors_json obsahuje definici aktérů - jedná se o pole N objektů (kde N je počet aktérů v simulaci). Prvkům tohoto pole říkáme pracovně ActorDef (definice aktéra) a obsahuje tyto atributy:

7

Červené políčko označuje zeď, bílé je volné políčko.

▪ 26 ▪


Název atributu

Význam

id

ID aktéra pro tuto simulaci. Je použito pro spárování s dalšími objekty v simulaci

name

Název aktéra

source_code

Instance zdrojového kódu vykonávaného při každém kroku

static_code

Instance zdrojového kódu vykonávaného jednorázově na začátku simulace

hitpoints

Počet životů aktéra

Tabulka 6 - Atributy objektu ActorDef Tyto objekty slouží k uchovávání dat o aktérech která se v průběhu simulace nemění. Nabízí se totiž možnost pro jednoduchost duplikovat všechna data o aktérech do všech vygenerovaných simulačních kroků. Zde je však na místě šetřit prostorem v databázi i přenosovým pásmem. Proto jsou tato data oddělena od ostatních. Na klientu se poté provádí párování těchto neměnných dat s ostatními podle ID interního pro každou simulaci.

9.3.4

Tabulka SimulationSteps

Název sloupce

Datový typ (Rails)

Obsah

simulation_id

integer

ID simulace ke které tento krok patří

data_json

binary

Stav jednoho simulačního kroku

step_no

integer

Pořadové číslo kroku

Tabulka 7 - Sloupce tabulky SimulationSteps Do této tabulky se ukládá výsledek simulace po zpracování. Každá simulace tedy má nějaký počet simulačních kroků, pokud si je „přehrajeme“ seřazené podle pořadového čísla (step_no), tak získáme kompletní popis jednoho běhu simulace. Obsah každého kroku je uložen ve sloupci data_json. Jedná se o objekt s atributy ■ actors - pole délky M (kde M je počet všech aktérů v simulaci) s objekty, které nazýváme

ActorMapDef (actor map definition). Tyto objekty popisují pozici a orientaci aktéra v daném kroku simulace. Zároveň obsahují i položku ID pro spárování s ActorDef objektem. ■ markers - pole délky N (kde N je počet značek v simulaci) s objekty, které popisují pozici těchto

značek v simulaci. ■ battle_msg - řetězec obsahující zprávu s informacemi o zbývajících životech všech aktérů.

▪ 27 ▪


9.4

Komponenta Map_controller

Smyslem této komponenty je zajistit správu vzorů map. Jedná se o operace (v závorce je uveden název použitý v implementaci aplikace, toto platí i pro všechny ostatní ): ■ založit vzor mapy (new, create) ■ editovat vzor mapy (edit) ■ zobrazit vzor mapy (show) ■ smazat vzor mapy (destroy_it)

9.4.1

Založit vzor mapy

Při zakládání nového vzoru mapy je od uživatele nejprve zjištěn a validován název mapy a její rozměry. Po přijetí těchto dat je založen v databázi objekt vzoru mapy se zadanými vlastnostmi. Do jeho JSON kódu je vygenerována mapa se zadaným rozměrem. Tato mapa obsahuje zatím samá volná políčka. Nad touto mapou je okamžitě zavolána funkčnost „editace vzoru mapy“.

9.4.2

Editovat vzor mapy

Tato funkčnost je vždy volána nad nějakou existující mapou (podle ID). Pokud není mapa nalezena v databázi, tak okamžitě vrací chybu. V opačném případě je mapa přečtena z databáze a zaslána javascriptovému modulu map-editor. Tento modul zajišťuje vykreslování aktuálního stavu mapy, jeho editace uživatelem pomocí myši a odeslání změněné mapy zpět na server, pokud došlo ke změně. Mapu je možno odeslat na server explicitně uživatelským požadavkem, nebo se automaticky uloží při opuštění funkčnosti. Funkce související s vykreslováním mapy jsou sjednoceny do dalšího javascriptového modulu který se jmenuje canvas. Canvas je také název elementu, který je využit pro samotné zobrazování vykreslené mapy a jejich aktérů. Jedná se o nový element související s HTML5, umožňuje jednoduchou práci s 2D i 3D obsahem pomocí JavaScriptu. V době psaní tohoto textu (květen 2011) již je podporován v posledních verzích všech majoritních prohlížečů (Internet Explorer verze 9, Mozilla Firefox verze 4.0, Google Chrome verze 11). Pro jednodušší práci s JavaScriptem a AJAXem obecně aplikace využívá javascriptovou knihovnu jQuery8, která zjednodušuje práci. Pro kontextová menu nad mapou je využito pluginu do

8

Pro více informací o jQuery navštivte její domovskou stránku http://jquery.com/.

▪ 28 ▪


jQuery s názvem ContextMenu9. Pohled na celou funkčnost by měl zpřesnit následující komunikační diagram: 1. přesměrování na edit.html

Webový prohlížeč

Canvas

6. vykreslení mapy

2. předání ID mapy

Webový server aplikace

3. požadavek na mapu 4. odpověď s mapou

5. inicializace objektu

8. uložení mapy Mapa

7. editace mapy

Map-editor

Uživatel

Obrázek 13 - Komunikační diagram operace Editace vzoru mapy Číslo kroku

Popis

1

Operace začíná tím, že server zná ID mapy, kterou chce uživatel editovat. Toto ID obdržel buďto přímo od uživatele (explicitní požadavek na editaci), nebo je automaticky předáno předchozím krokem zakládání mapy. Server vygeneruje editační stránku do které je zakódován i fragment JavaScriptu, který zajistí, že klient obdrží ID mapy pro editaci.

2

ID mapy vložené serverem do editační stránky je zpracováno klientským JavaScriptem a uloženo.

3

Je zaslán AJAX požadavek na získání JSON dat se stavem mapy.

9

Pro více informací o tomto pluginu navštivte jeho domovskou stránku http://www.trendskitchens.co.nz/jquery/contextmenu/.

▪ 29 ▪


4

Server vrací JSON kód se stavem mapy klientovi.

5

Klient převede dodaná JSON data na objekt mapy.

6

Modul Canvas vykreslí objekt mapy do elementu canvas.

7

Uživatel provádí změny mapy pomocí myši a kontextového menu. Po každé změně se automaticky provede opět krok 6 kvůli obnovení grafického stavu.

8

Klient vezme aktuální stav mapy, převede na formát JSON a odešle serveru k uložení.

Tabulka 8 - Posloupnost činností operace Editace vzoru mapy

9.4.3

Zobrazit vzor mapy

Tato funkčnost je oproti předchozí dosti jednoduchá, protože je zde využito sdílení kódu. Zobrazení mapy využívá již existující javascriptový modul canvas. Modul zajišťující zobrazení mapy se jmenuje map-display, jeho implementace je ale naprosto triviální, pouze volá inicializační metodu modulu canvas. 1. přesměrování na show.html Webový prohlížeč

Canvas

6. vykreslení mapy

2. předání ID mapy


3. požadavek na mapu 4. odpověď s mapou


Map-display

Mapa

Obrázek 14 - Komunikační diagram operace zobrazení mapy Jelikož činnosti jsou prakticky identické s předchozí operací, tak je tabulka s podrobným popisem vynechána.

▪ 30 ▪


9.4.4

Smazat vzor mapy

Tato operace obnáší pouze nalezení záznamu o mapě v databázi a jeho smazání. Jelikož jednotlivé simulace nemají žádnou vazbu na tento objekt, tak není nutné řešit referenční integritu a podobně. Mazání bude úspěšné vždy.

9.5

Komponenta Actors_controller

Tato komponenta zajišťuje správu veškerých vzorů aktérů v aplikaci. Poskytuje tyto operace : ■ založit vzor aktéra (new, create) ■ editovat vzor aktéra (edit, update) ■ zobrazit vzor aktéra (show) ■ smazat vzor aktéra (destroy_it)

9.5.1

Založit vzor aktéra

Založení aktéra začíná zobrazením formuláře s jeho atributy. Ty jsou uživatelem vyplněny. Poté v databázi vzniká objekt vzoru aktéra, který je naplněn zadanými atributy.

9.5.2

Editovat vzor aktéra

Nejprve je vybrán vzor aktéra podle jeho ID. Je zobrazen formulář s atributy načtenými z databáze. Uživatel změní některá data a po potvrzení uživatelem je objekt v databázi aktualizován.

9.5.3

Zobrazit vzor aktéra

Vzor aktéra je v databázi nalezen podle svého ID. Uživateli je zobrazen formulář pouze pro čtení s údaji zvoleného aktéra.

9.5.4

Smazat vzor aktéra

Vzor aktéra je v databázi nalezen podle svého ID. Poté je provedeno smazání tohoto objektu z databáze. Opět platí neexistence vazby mezi simulací a vzorem aktéra, proto bude mazání vždy úspěšné.

▪ 31 ▪


9.6

Komponenta Simulations_controller

Toto je skutečný „motor“ aplikace. Komponenta zajišťuje zakládání a mazání simulací. Především ale umožňuje uživateli se simulací interagovat a sledovat její výstupy. Poskytuje následující operace: ■ založit simulaci (new, create) ■ editovat aktéry simulace (edit_actors) - zároveň používá interní operace get_actors, get_map, get_initial_state, save_sim pro AJAXová

volání ■ provést simulaci (simulate) ■ sledovat simulaci (watch) - zároveň používá interní operace get_actors, get_map, get_story pro AJAXová volání ■ smazat simulaci (destroy_it)

9.6.1

Založit simulaci

Od uživatele je nejprve zjištěn požadovaný název simulace a vzor mapy, která bude použita pro simulaci. Poté je v databázi založen objekt simulace. Následuje zkopírování mapy ze vzoru do nově založené simulace. Pokud uživatel explicitně nezrušil volbu, tak je volána operace „editovat aktéry simulace“ nad nově založenou simulací.

9.6.2

Editovat aktéry simulace

Tato operace umožňuje uživateli, aby do existující simulace umístil aktéry - tedy objekty, které se chovají podle svého zdrojového kódu. Zároveň může také umisťovat značky, což je speciální druh aktéra. Jako takový nic nedělá, ostatní aktéři je však mohou přenášet. Dále má uživatel možnost existující aktéry editovat a mazat. Po ukončení editace je podle stavu aktérů vytvořen první simulační krok, který je základem pro další kroky generované v operaci „provést simulaci“. Veškerá funkčnost je implementována podobně, jako v modulu map-editor, tedy pomocí canvasu a jQuery

▪ 32 ▪


kontextových menu. Navíc je zde využito služeb pluginu SimpleModal 10 který umožňuje vytvářet ekvivalent modálních11 oken v prohlížeči. Situaci dále popisuje komunikační diagram: 1. přesměrování na edit_actors.html Webový server aplikace

Webový prohlížeč

Canvas

7. požadavek na počáteční stav 8. odpověď s počátečním stavem

6. vykreslení mapy

4. odpověď s mapou

2. předání ID simulace

3. požadavek na mapu

10. vykreslení aktérů

13. uložení počátečního stavu


Počáteční stav simulace

12.2 modifikace objektu

9.1 inicializace objektu

12.1 modifikace objektu

9.2 inicializace objektu

Actor-editor

Mapa

11. modifikace aktérů

Aktéři simulace

Uživatel

Obrázek 15 - Komunikační diagram operace Editovat aktéry simulace Číslo kroku

Popis

1

Operace začíná tím, že server zná ID simulace, které zakóduje do stránky edit_actors.html a tu nechá zobrazit.

2

ID simulace se uloží do modulu actor-editor.

3

AJAXovým voláním je zaslán požadavek na

10 Pro více informací o pluginu navštivte jeho domovskou stránku http://www.ericmmartin.com/projects/simplemodal/. 11 Modálním oknem rozumíme takové okno, které je na popředí a blokuje zbytek aplikace, dokud není zavřeno.

▪ 33 ▪


mapu pro simulaci podle ID simulace. 4

Je obdržena JSON reprezentace mapy.

5

Mapa je dekódována a je podle ní inicializován její objekt.

6

Mapa je modulem canvas vykreslena.

7

Je zaslán AJAXový požadavek na obdržení počátečního stavu simulace.

8

Je obdržena JSON reprezentace počátečního stavu simulace (tento stav může být prázdný).

9.1, 9.2

Počáteční stav je dekódován a podle něj jsou inicializovány objekty počátečního stavu a aktérů. V případě, že byl počáteční stav prázdný, jsou tyto objekty inicializovány na prázdnou hodnotu.

10

Aktéři jsou vykresleni pomocí modulu canvas.

11

Uživatel změnil aktéry simulace (přidal/editoval/odebral).

12.1,12.2

Je provedena modifikace objektů počátečního stavu a aktérů tak, aby reflektovaly změnu. Zároveň se volá krok 10 pro obnovení grafiky.

13

Počáteční stav je odeslán na server. Tam je dekódován a uložen jako 1. simulační krok dané simulace. Tato funkčnost je volána buďto manuálně uživatelem z kontextového menu nebo automaticky při opuštění funkčnosti.

Tabulka 9 - Činnosti operace Editovat aktéry simulace

9.6.3

Provést simulaci

Smyslem této operace je vygenerovat průběh simulace, do které již byli umístěni aktéři. Vygenerováním simulace rozumíme vytvoření N simulačních kroků, kde N je voleno uživatelem. Simulační kroky existují jako řádky tabulky SimulationSteps, samotné generování nemá žádný grafický výstup. Tato operace je určena k tomu, aby byla volána z operace „sledovat simulaci“. Jelikož obecně v simulaci může existovat více aktérů, tak je nutno zavést pravidla pro jejich chování v rámci simulace: ■ Během jednoho kroku se může aktér pohnout maximálně o jedno políčko (ale nesmí přitom

útočit). ■ Během jednoho kroku může aktér jinému udělit poškození o velikosti 1 (musí ale být jeho

bezprostředním sousedem). Potom se ale nemůže v tomto kroku pohnout. ■ Aktér může zvednout značku, pokud se na ní nachází.

▪ 34 ▪


■ Maximální počet značek na jednom políčku je 4. ■ Pokud má aktér 0 životů, je ze simulace odebrán. ■ Při útočení na jiného aktéra je mu poškození způsobeno až v dalším kroku.

Pro splnění těchto pravidel a zvýšení robustnosti výsledného kódu je implementován následující mechanismus: při zavolání metody např move() pro posun k tomuto posunu ihned nedochází. Místo toho na objektu ActorImpl12 existují 3 stavové proměnné, každá z nich může nabývat hodnoty pravda/nepravda: ■ move - aktér se chce pohnout o jedno políčko ■ drop - aktér chce položit značku, kterou nese ■ pickup - aktér chce zvednou značku, na které se nachází

Tyto stavové proměnné jsou vyhodnoceny objektem SimulationRunner po vykonání uživatelského kódu a stavy aktérů jsou poté podle nich aktualizovány. Poté jsou všechny stavové proměnné nastaveny na „nepravda“ a pokračuje se dalším krokem. Díky tomu snadno zajistíme splnění všech uvedených pravidel13. Souboje aktérů mezi sebou jsou řešeny způsobem, který zajišťuje férovost za každé situace. Jedná se o to, že v rámci každého tahu je vypočten tzv. battle plán - ten určuje kolik životů ztratí každý z aktérů. Aktérům je poté až po kompletním sestavení battle plánu nastaveno poškození, které je na začátku dalšího tahu způsobeno atomicky všem aktérům. Neexistuje zde tedy výhoda prvního útoku nebo podobně. Například pokud budou spolu bojovat 2 aktéři se stejným počtem životů, tak se oba navzájem zničí v danou chvíli. Algoritmus generování dalších kroků funguje takto: 1. Způsobit poškození aktérům zadané v minulém kroku. 2. Smazat všechny aktéry s 0 životy 3. Zajistit zvednutí / položení značek 4. Přesunout aktéry 5. Vykonat zdrojový kód (to znamená opět nastavit příznaky jednotlivých akcí) 6. Uložit simulační krok do databáze. 12 Tento objekt je reprezentací aktéra po dobu generování simulačních kroků. 13 Hlavní motivací bylo vynutit první pravidlo, tedy aby uživatel nemohl v kódu řetězit více příkazů pro pohyb. To teď udělat může, ale aktér se pohne jenom jednou za krok.

▪ 35 ▪


Toto pořadí kroků je především kvůli uživatelské přívětivosti - součástí mnoha algoritmů jsou ladící výpisy, u kterých uživatel očekává, že budou odpovídat skutečné poloze aktéra. Nastal čas zmínit se o vnitřnostech mechanismu vykonávání kódu jednotlivých aktérů. Nabízela se možnost navrhnout svůj vlastní jazyk. Výhodou tohoto přístupu je kompletní kontrola nad bezpečností vygenerovaného kódu, velkou nevýhodou je však pracnost (je v podstatě potřeba napsat kompletní překladač, včetně podmínek, cyklů a podobně). Druhou možností je využít existujícího jazyka - Ruby a vykonávat jej pomocí metody eval14. Výhodou je, že odpadá pracná implementace překladače - je dostupný kompletně celý jazyk Ruby včetně veškerých jeho kladných vlastností. Problémem tohoto přístupu je ale bezpečnost - pokud dáme uživateli možnost vykonávat obecný kód, tak tento kód je vykonáván, jakoby byl součástí hlavní aplikace. To má za následek nepříjemné vlastnosti jako možnost vynutit pád aplikace, prohlížet a editovat soubory na serveru (Ruby umožňuje samozřejmě i spouštět další programy) a podobně. Pro aplikaci byla zvolena cestu eval-u s tím, že bude implementována nějaká forma sandboxu 15 pro vykonávaný kód. Tento mechanismus funguje na dvou úrovních. První úroveň je třída Evaluator - v té probíhá samotné vykonávání kódu a obsahuje API, s pomocí kterého se pracuje s aktérem. Toto API je ve skutečnosti implementováno v instanci aktéra - třída Evaluator má na tuto třídu referenci a zprostředkovaně volá metody. Toto nám zajistí přesnou kontrolu nad tím, co lze z uživatelského kódu volat. Tato úroveň ale nedostačuje sama, protože uživatel by snadno mohl pomocí reference na instanci aktéra přistupovat k interním objektům simulace a podobně. Proto přichází ke slovu druhá úroveň zabezpečení a tou je BlackList. Jedná se o prostý výčet zakázaných slov, které se nesmí v kódu vyskytovat, jinak nastává vyjímka. Tento seznam podchycuje právě věci jako jako přístup k referenci na instanci aktéra, ukončení aplikace, volání programu z příkazové řádky a podobně. Samozřejmě, že toto zabezpečení pravděpodobně není 100% a existuje způsob, jak aplikaci shodit. Jsem však názoru, že po identifikaci takového problému a zakázání příslušných klíčových slov lze dosáhnout odolnosti proti většině pokusů.

14 Z anglického evaluate - vykonat. Jedná se o metodu, která na vstupu přijímá textový řetězec, který chápe jako zdrojový kód v daném jazyce a ten ihned vykoná. 15 Sandboxováním myslíme bezpečné oddělení tohoto kódu od zbytku aplikace.

▪ 36 ▪


1. vytvoření instancí

Počáteční stav simulace

SimulationRunner

Instance aktérů 3. vykonání zdrojového kódu

Aktéři simulace

2. smazání všech existujících kroků

5. uložení kroku simulace

Evaluator 4. validace zdrojového kódu

SimulationSteps

BlackList

Obrázek 16 - Komunikační diagram operace Provést simulaci

Číslo kroku

Popis

1

SimulationRunner obdrží první krok simulace (objekt ActorMapDef) a definici všech aktérů (objekt ActorDef). Podle těchto 2 objektů založí objekty ActorImpl (implementace aktéra) název a zdrojové kódy zjistí z objektu ActorDef, pozici a směr z objektu ActorMapDef.

2

Jsou smazány veškeré existující simulační kroky. Toto je nezbytné pro zaručení konzistence nově generovaných kroků.

3

Třída Evaluator je požádána o vykonání zdrojového kódu aktéra.

4

Implementace vykonávání kódu uvnitř třídy Evaluator zajistí ověření kódu oproti objektu BlackList.

5

Po vykonání kódu (úspěšném i neúspěšném) je vytvořen simulační krok a uložen do databáze. Tento krok obsahuje pozice a směry pohybu

▪ 37 ▪


všech aktérů - tyto pozice se získá z atributů ActorImpl objektů.

Tabulka 10 - Činnosti operace provést simulaci

9.6.4

Sledovat simulaci

Sledováním simulace myslíme grafické vyjádření jednotlivých simulačních kroků pro uživatele. Tyto simulační kroky byly vykonány v předchozí operaci. Uživatel má možnost tyto simulační kroky sledovat buďto za sebou, nebo je možné je převíjet a začínat od daného kroku. Důležitou vlastností této operace je to, že nedochází k žádné modifikaci dat v perzistentním úložišti. Pouze se načtou odpovídající řádky tabulky SimulationSteps, převedou do JSONu a pošlou klientskému JavaScriptu. Ten zajistí zobrazení uživateli. 1. přesměrování na watch.html

4. odpověď s mapou 7. požadavek na příběh simulace 8. odpověď s příběhem

13. vykreslení aktérů

10. požadavek na aktéry simulace

9 inicializace objektu

Příběh simulace


Simulation-player 12. inicializace objektu

11. odpověď s aktéry simulace

Canvas

6. vykreslení mapy

3. požadavek na mapu

Webový prohlížeč 2. předání ID simulace


Mapa

14. požadavek na změnu zobrazení

Aktéři simulace

Uživatel

Obrázek 17 - Komunikační diagram operace Sledovat simulaci Číslo kroku

Popis

1

Server zná ID simulace, kterou chce uživatel přehrát, vygeneruje stránku watch.html do které je toto ID zakódováno.

▪ 38 ▪


2

JavaScriptový modul simulation-player si uloží ID simulace.

3

Je zaslán požadavek na získání mapy podle ID simulace.

4

Odpověď s mapou dorazila.

5

Mapa je dekódována a je inicializován její objekt.

6

Mapa je vykreslena modulem canvas.

7

Je zaslán požadavek na získání příběhu simulace (story). Tento příběh jsou jednotlivé simulační kroky seřazené za sebou a vložené do pole.

8

Odpověď s příběhem dorazila.

9

Příběh je dekódován a je inicializován jeho objekt.

10

Je zaslán požadavek na získaní objektů ActorDef pro tuto simulaci.

11

Dorazila odpověď s aktéry simulace.

12

Je inicializován objekt s aktéry.

13

Modul canvas vykreslí všechny aktéry na grafiku mapy.

14

Uživatel změnil např. číslo vykreslovaného kroku nebo zapnul automatické přehrávaní, je automaticky volána činnost 13 pro obnovení grafiky.

Tabulka 11 - Činnosti operace Sledovat simulaci V implementaci této operace je opět využit modul canvas jako správce grafiky. Modul simulationplayer poskytuje API pro manipulací se stavem simulace, který chceme vykreslovat. Je opět využit modul ContextMenu a SimpleModal do jQuery pro implementaci pokročilých prvků GUI. Navíc je zde použit plugin Timers16. Tento plugin umožňuje snadno implementovat události opakující se v čase. V tomto případě se jedná o možnost, kdy uživatel nechce neustále klikat na tlačítko další krok - timer(časovač) zajistí automatické volání teto funkčnosti s daným intervalem. Kontextové menu je využito pro možnost zobrazit si zdrojový kód nějakého aktéra - stačí na něj kliknout pravým tlačítkem a vybrat si, který chceme zobrazit. Při sledování simulace není možnost měnit zdrojový kód aktéra ihned. K tomuto rozhodnutí jsem dospěl, při pomyšlení na matení uživatele, kdy např. 50% simulace bude vygenerováno pomocí jednoho kódu, ten se poté změní a zbytek bude vygenerován podle jiného kódu. Také by bylo nutné zavést nějaký mechanismus, jak spojit vygenerovaný krok se zdrojovým kódem. Hlavním důvodem, na který jsem narazil při pokusu toto implementovat, je ale uložení kontextu aktéra. Oproti originálnímu Karlovi jsem chtěl umožnit, aby každý aktér mohl mít svoje lokální proměnné. 16 Pro více informací o pluginu navštivte jeho domovskou stránku http://plugins.jquery.com/project/timers

▪ 39 ▪


Typickým příkladem užití je algoritmus procházení bludiště, který je součástí aplikace (jeden ze vzorů aktéra). U toho algoritmu má aktér ve svém statickém zdrojovém kódu definovanou proměnnou, do které si ukládá již navštívené uzly. Pokud bychom chtěli implementovat možnost dynamicky měnit zdrojový kód, tak by bylo nutné nějak zajistit, aby se do perzistentního úložiště uložily i tyto lokální proměnné. Napadla mě možnost heuristicky projít statický zdrojový kód a hledat definice proměnných, pro velkou pracnost a nespolehlivost takového řešení jsem se mu rozhodl vyhnout. Jediný způsob, jak tedy změnit zdrojový kód aktéra, je spustit nad simulací operaci Editovat aktéry simulace. Po ukončení této operace je zaručeno, že simulace bude obsahovat pouze jeden krok (=počáteční stav, to co uživatel nastavil) a vygenerovaná simulace tedy bude konzistentní a podle jednoho zdrojového kódu pro každého aktéra.

9.6.5

Smazat simulaci

Implementačně velice jednoduchá operace. Server dostane ID simulace, kterou chce uživatel smazat a provede její odstranění z perzistentního úložiště. Zároveň se díky referenční integritě provede smazání všech simulačních kroků (pokud je simulace má). Tyto simulační kroky samy o sobě totiž nedávají smysl a jejich znovupoužití nepřipadá v úvahu.

▪ 40 ▪


10.

UŽIVATELSKÁ PŘÍRUČKA

Obsahem této kapitoly je manuál k použití aplikace. Měl by každému pomoci v pochopení fungování aplikace a možnost snadno a rychle začít psát svoje vlastní algoritmy. Dále následuje popis API aktéra, který je taktéž nezbytný k efektivní realizaci různých algoritmů.

10.1

Úvodní stránka

Obrázek 18 - Úvodní stránka aplikace Tato stránka je první která se zobrazí po zadání URL aplikace a obsahuje krátký návod k použití (anglicky). Zároveň je na ní vidět hlavní menu, které se nachází v horní části a je přístupné z kterékoliv stránky. Toto menu slouží pro přístup ke skupinám jednotlivých funkčností: ■ Welcome (úvodní stránka) ■ Map templates (správa vzorů map) ■ Actor templates (správa vzorů aktérů) ■ Simulations (správa simulací)

▪ 41 ▪


10.2

Správa vzorů map

Obrázek 19 - Správa vzorů map Účelem této stránky je umožnit uživateli vytvářet, mazat, editovat a zobrazovat vzory map. Veškeré vzory map uložené v databázi jsou zde zobrazeny v seznamu. Pomocí odkazu Show se provede zobrazení vzoru mapy. Pomocí tlačítka Destroy můžeme smazat existující vzor mapy. Pod tabulkou nalezneme odkaz New Map, který slouží k založení nového vzoru mapy:

Obrázek 20 - Založení nového vzoru mapy ▪ 42 ▪


Zde potřebujeme zadat 2 parametry: název mapy, kterým bude mapa identifikována a její rozměry (mapa je vždy čtvercová, proto se zadává strana tohoto čtverce, maximální velikost z důvodu grafiky je 30 políček). Odkaz Back vede zpátky na seznam vzorů map. Po stisknutí tlačítka Create Map je v databázi založen objekt mapy a uživatel je okamžitě přesměrován na stránku editoru mapy (stejný editor se spustí pomocí odkazu Edit nad již existující mapou):

Obrázek 21 - Náhled editoru mapy Největší část obrazovky zabírá zobrazení mapy. Při kliknutí pravým tlačítkem v oblast mapy se zobrazí kontextové menu:

Obrázek 22 - Kontextové menu editoru mapy

▪ 43 ▪


Význam jednotlivých položek menu je následující: ■ Select brush wall

- vybírá nástroj kreslicí zdi

■ Select eraser

- vybírá nástroj na mazání

■ Save

- ukládá mapu na server

Výchozím po spuštění je mazací nástroj. Po vybrání nástroje je možno jej pomocí levého tlačítka používat - tedy buďto kreslit zdi, nebo je mazat. Rozměry mapy nelze v tomto místě měnit. Mapa se ukládá při použití příslušné volby v menu nebo při opuštění stránky / zavření tabu (záložky v prohlížeči). Pod zobrazením mapy je odkaz Back, který se vrací na obrazovku správy map.

10.3

Správa vzorů aktérů

Obrázek 23 - Správa vzorů aktérů Na této stránce můžeme podobně jako mapy zobrazovat, editovat a mazat vzory aktérů. Jelikož aktéři neobsahují žádné speciální grafické prvky, které by bylo nutné popisovat, tak pouze textově: ■ odkaz Show zobrazuje informace o tomto aktérovi - jeho název (Name), popis (Description),

zdrojový kód (Source code) a statický zdrojový kód (Static code). Pod popisem nalezneme tlačítko edit, které spouští následující funkčnost a Back, které vede zpět na seznam vzorů aktérů.

▪ 44 ▪


■ odkaz Edit umožňuje editovat informace existujícího aktéra. Zobrazení je stejné, jako u odkazu

Show, akorát je zde možnost údaje měnit. Zdrojový kód v tomto místě není nijak validován ani spouštěn. ■ odkaz Destroy slouží ke smazání existujícího aktéra ze simulace.

10.4

Správa simulací

Obrázek 24 - Správa simulací Na této stránce můžeme vytvářet nové simulace, mazat existující, měnit aktéry v existující a také sledovat vygenerované výstupy. Odkaz New Simulation, ten nás přesměruje na stránku:

▪ 45 ▪


Obrázek 25 - Založení nové simulace Zde je zobrazen formulář sloužící k zadání vlastností nové simulace. Název (Name) by měl stručně popisovat obsah mapy, rozbalovací box (Map template) je určen k výběru šablony mapy podle názvu. Po vytvoření simulace je uživatel ihned přesměrován na obrazovku editace aktérů této simulace:

Obrázek 26 - Editor aktérů Stránka editoru aktérů vypadá prakticky stejně, jako editor map, pouze smysl kontextového menu je jiný. Umožňuje nám editovat existující aktéry na mapě, vytvářet nové, nebo je mazat. Podle toho na jaké políčko klikneme, tak se zobrazí menu s možnostmi relevantními pro toto políčko. Při kliknutí na prázdné (bílé) políčko můžeme:

▪ 46 ▪


■ Place actor here (zobrazí okno s možnostmi nového aktéra) ■ Place marker here (na toto políčko umístí značku) ■ Save (uloží stav simulace)

Pokud na políčko umístíme aktéra první volbou, tak je zobrazeno okno s možnostmi nového aktéra:

Obrázek 27 - Možnosti nového aktéra V horní části okna můžeme editovat název nového aktéra (standardně je pojmenován Actor N kde N roste pro každého přidaného aktéra). Políčko description obsahuje popis vzoru aktéra a nelze jej zde měnit. Pole hitpoints ukazuje, kolik životů bude mít tento aktér na začátku(bere se ze šablony aktéra). Rozbalovací menu direction definuje směr pohybu, jakým bude nový aktér natočený (left doleva, down - dolů, up - nahoru, right - doprava). Nakonec rozbalovací menu template vybírá vzor

▪ 47 ▪


aktéra, který bude použit k naplnění oken source (zdrojový kód) a static source (statický zdrojový kód). Tento kód lze okamžitě editovat, pro více informací o tomto tématu viz kapitola API aktéra. Po stisknutí tlačítka Place se tento aktér umístí do mapy. Tlačítko s logem X vpravo nahoře zavře tento dialog. Při kliknutí na políčko obsahující aktéra přibude možnost Edit actor, ta zobrazí prakticky stejný dialog, jako akce Place actor here, akorát se jedná o editaci stávajícího aktéra. Zároveň se pomocí možnosti Remove actor můžeme existujícího aktéra zbavit. Na jednotlivá políčka je možno také umisťovat značky (marker) - slouží k tomu možnosti Place marker here a Remove marker. Stav simulace se uloží při použití funkce Save nebo automaticky při opuštění editoru aktérů. Na seznam všech simulací se vrátíme stisknutím tlačítka Back dole na stránce. Zpět na seznamu simulací, nyní můžeme vidět, že právě editovaná simulace obsahuje právě jeden vygenerovaný krok ve sloupci Computed step count. Proto můžeme pomocí tlačítka Watch přejít k jejímu sledování:

Obrázek 28 - Sledování simulace

▪ 48 ▪


Stránka je rozdělena na 2 části. V levé části je opět grafika mapy a aktéru, na aktéry můžeme kliknout pravým tlačítkem myši a nechat si zobrazit zdrojové kódy. V pravé části se nachází okno se zprávami. Na začátku je vždy „HP report“ pro aktuální krok. Tento report obsahuje seznam všech aktérů a počet jejich životů. Zároveň jsou zde zobrazeny i hlášky, pokud byl nějaký aktér ze simulace odstraněn. Do další části se zapisují hlášky od jednotlivých aktérů, popř. systémová hlášení a podobně v rámci jednoho kroku. Zpráva od aktéra vždy začíná jeho jménem, v případě, že více aktérů posílá zprávu zároveň, potom se zprávy řadí pod sebe. Pod oknem se zprávami se nachází řídící panel přehráváni. V zápisu Step N of M vidíme v M celkový počet vygenerovaných kroků a N je číslo zobrazovaného kroku. Údaj N lze přepsat a tím se okamžitě přesunout na nějaký krok. Tlačítka + a - slouží ke zvýšení popř. snížení aktuálního kroku o 1. Zaškrtávací políčko AutoPlay slouží k zapnutí nebo vypnutí automatického přehrávání simulace. Tlačítko Simulate... zobrazuje dialog s volbou, kolik kroků chceme pro simulaci vygenerovat od začátku. Maximální počet je 500, po stisknutí tlačítka Simulate na dialogu je nutné počkat, na doběhnutí simulace (nápis Please Wait... zmizí), poté můžeme křížkem vpravo nahoře zavřít dialog a prohlédnout si výsledek simulace. Zároveň při spuštění simulace, které byli právě změněni aktéři (a tedy nemá žádné simulační kroky) se zobrazí okénko s informací pro uživatele, že nejprve musí vygenerovat nějaké simulační kroky pomocí tlačítka Simulate. Pomocí tlačítka Back pod grafikou mapy se můžeme vrátit na seznam simulací, tlačítko Edit actors odkazuje na editaci aktérů pro tuto simulaci.

10.5

API aktéra

Tato kapitola popisuje jednotlivé metody, které obsahuje aktér. Zároveň funguje i jako tutoriál, jak psát kód pro aktéry. Jazykem pro aktéry je kód v Ruby a proto musí splňovat veškeré jeho požadavky.

10.5.1

Objekt Vector2

Tento objekt je základem pro veškeré 2 složkové vektory figurující v simulaci ( pozice a směr ). Obsahuje 2 základní atributy x,y které jsou jeho složkami. Tento vektor je možno inicializovat více způsoby: ■ žádný parametr: Vektor má hodnotu (0,0) ■ 1 parametr typu Hash:

▪ 49 ▪


- :direction s hodnotou řetězec - inicializuje vektor v příslušném směru podle názvu direction

(left, down, up, right) - :x a :y s celočíselnou hodnotou - inicializuje vektor s požadovanými složkami

Metody poskytované objektem Vector2 jsou následující (v závorce za názvem jsou případné parametry, v závorce na konci je uveden návratový typ) : ■ x - vrací hodnotu složky X (celé číslo) ■ y - vrací hodnotu složky Y (celé číslo) ■ +(Vector2) - umožňuje sečíst tento vektor s jiným vektorem (Vector2) ■ -(Vector2) - umožňuje odečíst tento vektor s jiným vektorem (Vector2) ■ to_s - převede vektor na jeho řetězcovou reprezentaci - pokud se jedná o jeden ze základních

směrů, potom vrací „left“, „down“, „up“, „right“, pokud je hodnota jiná, potom vrací řetězec „X Y“ kde X a Y jsou hodnoty složek (řetězec) ■ zero? - vrací true, pokud je řetězec nulový, jinak false (boolean) ■ equals?(Vector2) - vrací true, pokud se oba vektory rovnají, jinak false (boolean) ■ get_inverse - vrací opačný vektor k tomuto (implementováno pouze pro základní 4 směry)

(Vector2)

10.5.2

Metody aktéra

Samotný aktér standardně disponuje tímto API (pro definici vlastního stačí využít níže uvedené metody a přidat je do statického kódu aktéra): ■ attack - Zaútočí na sousedního aktéra ve směru pohybu. V případě, že toto nelze, je zobrazena

hláška. ■ get_direction - Vrací aktuální směr aktéra (Vector2) ■ get_directions - Vrací pole se seznamem všech směrů, do kterých je možné se pohnout z

aktuálního místa (Ruby pole) ■ get_position - Vrací aktuální pozici aktéra (Vector2)

▪ 50 ▪


■ move - Pohne s aktérem po vykonání ostatního kódu ve směru pohybu. V případě nemožnosti

(kolize, atd.) je zobrazena hláška. (nil) ■ move_possible? - Vrací true, pokud se dá pohnout ve směru pohybu, jinak false (boolean) ■ set_direction(řetězec) - Nastaví směr aktéra na jeden ze 4 základních směrů předaném v

parametru (nil) ■ marker_present? - Vrací true, pokud se aktér nachází nad značkou, jinak false (boolean) ■ pickup_marker - Sebere značku, nad kterou se aktér nachází. V případě, že se tam značka

nenachází, neudělá nic (nil) ■ drop_marker - Položí značku, kterou dříve aktér sebral. Se sebranou značkou se může aktér

volně pohybovat, unese však pouze jednu. Pokud žádnou nemá, neudělá nic (nil) ■ log(řetězec) - Explicitně zaloguje hlášku zadanou v řetězci

10.5.3

Shrnutí API

API umožňuje veškeré činnosti, jako originální jazyk Karel, zároveň díky implementaci statického kódu je možné si vytvářet vlastní lokální proměnné pro každého aktéra a podobně, což umožňuje tvořit složitější a zajímavější algoritmy. Pro více informací a příklady použití doporučuji projít si vzory aktéru uložené ve fixtures (iniciální data pro databázi) v praktické části práce.

▪ 51 ▪


11.

PŘÍKLADOVÁ DATA

Aplikace obsahuje ve svých fixtures17 několik objektů každého typu pro začátek. Jejich smyslem je umožnit uživatelům ihned pracovat s aplikací a prohlédnout si její možnosti. Všechny příklady jsou standardně uložené, tedy jsou plně editovatelné.

11.1

Mapy

■ Maze - mapa obsahující bludiště - základ simulace pro procházení bludiště ■ Empty 10x10 - Prázdná mapa velikosti 10x10 políček. ■ Empty 20x20 - Prázdná mapa velikosti 20x20 políček. ■ Empty 30x30 - Prázdná mapa velikosti 30x30 políček. ■ Empty 40x40 - Prázdná mapa velikosti 40x40 políček.

11.2

Aktéři

■ Basic mover - Obsahuje implementaci pouze pohybu vpřed. ■ Basic fighter - Implementace pohybu vpřed + útoku na souseda. ■ Maze solver - Implementace procházení bludištěm. Aktér využívá lokálního úložiště a do hashe

si ukládá, které cesty uzly už prošel. ■ Assassin - Implementace se snaží dostat do definovaného cíle (souřadnice uloženy v lokálním

úložišti). Zároveň provádí i útok. ■ Karel - Referenční implementace jazyka Karel. Obsahuje stejnou instrukční sadu a některé

operace jsou implementovány stejně, jako v jazyce Karel (otáčení atd.). Instrukční sada je definována v lokálním úložišti. Aktér se pohybuje horizontálně, při nárazu do stěny změní směr. ■ Karel carrier - Rozšíření předchozího, aktér postupně přenese všechny značky, na které po

cestě narazil ke stěnám. 17 Standardní způsob uložení výchozích dat v Ruby on Rails aplikaci

▪ 52 ▪


11.3

Simulace

■ Marker demo - využívá mapu Empty 20x20 a 4 aktéry typu Karel carrier. Smyslem simulace je

demonstrovat možnosti práce se značkami. ■ Maze solving - využívá mapu Maze a 1 aktéra typu Maze solver. Smyslem této simulace je

demonstrovat možnosti lokálního úložiště a pokročilejších algoritmů. ■ Big fight - využívá mapu Empty 40x40 a spoustu aktérů typu Assasin. Smyslem této simulace je

demonstrovat bojový systém a zpracování velkého množství aktérů.

▪ 53 ▪


12.

ZÁVĚR

Implementací praktické části této práce jsem si vyzkoušel a ověřil, že prostředí pro výuku programování lze realizovat i pomocí webových technologií. Uvědomil jsem si výhody i limitace takového řešení. Největší limitací pro mě bylo nutnost implementovat systém vytváření kroků pro simulaci, na druhou stranu jsem chtěl mít všechna data uložená v databázi pro konzistenci, kde klient slouží pouze k zobrazování informací. Ohledně GUI už skutečně není problém realizovat i složité prvky - pomocí JavaScriptu se nechají realizovat bez problému. Velkou pomocí mi zde byla knihovna jQuery navržená vedoucím práce, která velice usnadňuje práci s JavaScriptem, tvorbou GUI i grafiky. Aplikace samotná pracuje korektně na všech majoritních prohlížečích v nejnovější verzi (Internet Explorer verze 9, Mozilla Firefox verze 4, Google Chrome verze 11). Na starších prohlížečích může nastat problém s elementem canvas, který je součástí nové specifikace HTML5. Tento způsob vykreslování grafiky jsem si zvolil proto, že se velmi podobá klasickému vykreslování grafiky např. v jazyce Pascal, jeho další výhodou je 2D akcelerace. Co se týká „motoru“ aplikace - jsem rád, že se mi podařilo implementovat alespoň částečně fungující procházení bludištěm s využitím lokální paměti aktérů (program je součástí fixtures). Boj na blízko jsem se rozhodl implementovat pomocí férového rozdělování poškození. Tato implementace se nakonec ukázala jako dosti robustní a efektivní. Zároveň jsem se snažil maximálně otestovat a odladit veškeré implementované funkčnosti. Věřím tomu, že uživatel znalý programování může velice rychle dát dohromady fungující algoritmus a nechat si jej odsimulovat. Co se týká přívětivosti pro skutečného začátečníka - zde je nutno zapracovat na celém prostředí a více odstínit vnitřní API aktéra, aby se skutečně jednalo o jazyk sloužící k výuce programování. Na druhou stranu je celé API trochu přizpůsobené mému cílovému algoritmu - a tím je, jak bylo zmíněno, uvedené procházení aktéra bludištěm. Další příkladový vzor aktéra obsahuje můj pokus o zjednodušení API - jedná se o aliasy, které mají za cíl emulovat velmi omezenou instrukční sadu jazyka Karel. Na přiloženém CD je k nalezení kompletní složka celého projektu v Ruby on Rails, pro spuštění postačuje tuto aplikaci spustit standardním způsobem 18. Jednodušší cesta pro vyzkoušení je stáhnout si soubor z adresy http://dl.dropbox.com/u/9254315/bp.txt 19 a navštívit adresu v něm obsazenou.

18 Pro více informací navštivte domovskou stránku Ruby on Rails: http://www.rubyonrails.org/ 19 Nemohu zaručit, že se adresa, kde je nasazená aplikace nezmění, proto radši volím cestu, jak mohu adresu snadno změnit pro příští návštěvníky. V případě neexistence souboru nebo nefunkčnosti odkazu mě prosím kontaktujte.

▪ 54 ▪


13.

CONCLUSION

By implementing practical part of the work, I have verified that an environment for teaching pro gramming can be also implemented using web technologies. I have also realized advantages and limitations of such solution. The biggest limitation for me was the necessity of using the concept of simulation steps that are saved, on the other hand I wanted to have all the data stored in database for consistency, where client is only used for displaying data. Regarding GUI - there is really no problem in implementing advanced controls - they can be very easily implemented by using JavaScript. Library called jQuery which was suggested by my thesis manager was also a big help for me. It simplifies work with JavaScript and graphics. Application works correctly om current versions of major browsers (Internet Explorer version 9, Mozilla Firefox version 4, Google Chrome version 11). Older browsers may have problems with canvas element which is part of HTML5 specification. I have chosen this style of rendering graphics because its approach very closely resembles work with graphics of some classic languages - Pascal for example. Other advantage of canvas is its 2D acceleration. Regarding “engine” of the application - I'm glad, that I have implemented at least partially working of algorithm which traverses a maze (algorithm can be found in fixtures). Melee combat was implemented using fair damage algorithm, which has proven to be robust and effective. I have also tried to maximally test and verify all implemented features. I believe that computer savvy user can very quickly implement his own algorithms and have them simulated. On the topic of average user's ease of use - there is work that needs to be done, including user-friendliness of the interface and separate inner API of the actor from the user, so the language really becomes suitable for educa tion. On the other hand all of API was implemented around my target algorithm - which is maze traversal, as already mentioned. Another actor template contains my try to simplify the API of the actor by emulating reduced instruction set of original Karel language. The CD included with this work contains complete Rails project folder, execute it using standard method20.

Easier

way

to

try

the

application

is

by

downloading

file

at

address:

http://dl.dropbox.com/u/9254315/bp.txt and visit the address contained in it. 21

20 For more information, visit Ruby on Rails homepage at: http://www.rubyonrails.org/ 21 I cannot guarantee, that deployment address of the application wouldn't change. So I placed it in a text file, that I could easily change if such change occurs. If the file doesn't exist or application doesn't work, please contact me.

▪ 55 ▪


14.

SEZNAM POUŽITÉ LITERATURY

1. Steven Holzner Ph. D. (2006), Beginning Ruby on Rails. Wrox Beginning Guides 2. Dave Thomas, Chad Fowler, Andy Hunt (2004), Programming Ruby. Wrox 3. Programovací jazyku určené pro výuku programování, www.root.cz 4. Dokumentace jQuery, jquery.com 5. Ruby on rails documentation, api.rubyonrails.org/ 6. Dokumentace

k

jQuery

pluginu

ContextMenu,

www.trendskitchens.co.nz/jquery/contextmenu/ 7. Dokumentace k jQuery pluginu Timers, plugins.jquery.com/project/timers 8. Dokumentace k jQuery pluginu SimpleModal, www.ericmmartin.com/projects/simplemodal/

▪ 56 ▪


15.

SEZNAM POUŽITÝCH SYMBOLŮ A ZKRATEK

Zkratka

Popisek

GUI

Grafické uživatelské rozhraní

OOP

Objektově orientované programování

UUBML

Unicorn Unified Business Modeling Language

AJAX

Asynchronous JavaScript and XML

YAML

YAML Ain't Markup Language

JSON

JavaScript Object Notation

API

Application Programming Interface

▪ 57 ▪


16.

SEZNAM OBRÁZKŮ

1. Výstup prvního příkladového programu jazyce Logo 2. Výstup druhého příkladového programu v jazyce Logo (zdroj: http://et.bgcbellevue.org/logo/fractals.html ) 3. Syntaxe binární zprávy a zprávy s proměnným počtem parametrů (zdroj: http://www.root.cz/clanky/zaklady-programovani-ve-squeaku-2/) 4. Vývojové prostředí Squeaku (zdroj: http://www.root.cz/clanky/prvni-kroky-ve-squeaku/) 5. Prostředí Karel na platformě Windows (zdroj: http://www.root.cz/clanky/programovacijazyky-urcene-pro-vyuku-programovani/) 6. Prostředí Borland Delphi 7 (zdroj: http://www.kdedevelopers.org/node/1617) 7. BlueJ běžící na Mac OS X (zdroj: http://www.bluej.org/about/what.html) 8. IRB (Interative RuBy) konzole demonstrující vlastnosti objektu textového řetězce (String) 9. High level pohled na aplikaci Robot Karel 10. Use-case model 11. Databázový model aplikace 12. Příkladová mapa 13. Komunikační diagram operace Editace vzoru mapy 14. Komunikační diagram operace zobrazení mapy 15. Komunikační diagram operace Editovat aktéry simulace 16. Komunikační diagram operace Provést simulaci 17. Komunikační diagram operace Sledovat simulaci 18. Úvodní stránka aplikace 19. Správa vzorů map 20. Založení nového vzoru mapy 21. Náhled editoru mapy 22. Kontextové menu editoru mapy 23. Správa vzorů aktérů

▪ 58 ▪


24. Správa simulací 25. Založení nové simulace 26. Editor aktérů 27. Možnosti nového aktéra 28. Sledování simulace

▪ 59 ▪


17.

SEZNAM TABULEK

1. Příkazy jazyka Logo 2. Instrukční sada jazyka Karel 3. Sloupce tabulky Actors 4. Sloupce tabulky Maps 5. Sloupce tabulky Simulations 6. Atributy objektu ActorDef 7. Sloupce tabulky SimulationSteps 8. Posloupnost činností operace Editace vzoru mapy 9. Činnosti operace Editovat aktéry simulace 10. Činnosti operace provést simulaci 11. Činnosti operace Sledovat simulaci

▪ 60 ▪


18.

SEZNAM PŘÍLOH

Tento text neobsahuje žádné přílohy (kromě přiloženého CD s aplikací).

▪ 61 ▪

BAKALÁŘSKÁ PRÁCE. Grafický actor systém pro výuku programování. Graphical actor system for programming education

Recommend Documents