Interaktivní portál pro jazykovou výměnu a výuku jazyků

Transkript

1 Mendelova univerzita v Brně Provozně ekonomická fakulta Interaktivní portál pro jazykovou výměnu a výuku jazyků Diplomová práce Vedoucí práce: doc. Ing. František Dařena Ph.D. Bc. Michal Ševčík Brno 2014

2

3 Chtěl bych tímto poděkovat doc. Ing. Františku Dařenovi Ph.D. za odbornou pomoc a cenné rady při zpracovávání této závěrečné práce.

4

5 Čestné prohlášení Prohlašuji, že jsem tuto práci: Interaktivní portál pro jazykovou výměnu a výuku jazyků vypracoval/a samostatně a veškeré použité prameny a informace jsou uvedeny v seznamu použité literatury. Souhlasím, aby moje práce byla zveřejněna v souladu s 47b zákona č. 111/1998 Sb., o vysokých školách ve znění pozdějších předpisů, a v souladu s platnou Směrnicí o zveřejňování vysokoškolských závěrečných prací. Jsem si vědom/a, že se na moji práci vztahuje zákon č. 121/2000 Sb., autorský zákon, a že Mendelova univerzita v Brně má právo na uzavření licenční smlouvy a užití této práce jako školního díla podle 60 odst. 1 Autorského zákona. Dále se zavazuji, že před sepsáním licenční smlouvy o využití díla jinou osobou (subjektem) si vyžádám písemné stanovisko univerzity o tom, že předmětná licenční smlouva není v rozporu s oprávněnými zájmy univerzity, a zavazuji se uhradit případný příspěvek na úhradu nákladů spojených se vznikem díla, a to až do jejich skutečné výše. V Brně dne 21. května 2014

6

7 Abstract Ševčík, M. Interactive portal for language exchange and language learning. Diploma thesis. The topic of this thesis is design and implementation of an application for language exchange and language learning. The purpose of this application is to offer possibilities of searching language partners based on given preferences, arranging personal meetings and providing alternative types of communications with these partners. The thesis begins with survey of the current state in the field of this topic, identifies bottlenecks of current solutions and concisely depicts the importance of knowing foreign language. Ensued part of this thesis analyzes requirements of proposed application, The penultimate part covers implementation of application based on previous analysis and includes user interface and source code samples. Final part is dedicated to summary the results, recommendations for using the application, possible extensions and opportunities for promotion of the application. Keywords Foreign languages, learning, language exchange, web portal, communication, modern technologies, responsive design, mobile- first approach Abstrakt Ševčík, M. Interaktivní portál pro jazykovou výměnu a podporu výuky jazyků. Brno: MENDELU v Brně, Tématem diplomové práce je návrh a implementace aplikace pro podporu jazykových výměn a podporu výuky jazyků. Účelem aplikace je uživatelům nabídnout možnost vyhledání jazykového partnera podle zadaných preferencí, sjednání osobního setkání a poskytnutí alternativních druhů komunikace s těmito jazykovými partnery. Práce začíná průzkumem současného stavu v oblasti této problematiky, kde upozorňuje na nedostatky současných řešení a stručně vysvětluje důležitost znalosti cizího jazyka. Následuje analýza a návrh zamýšlené aplikace. V této části práce jsou vymezeny požadavky na vytvářenou aplikaci. Po fázi návrhu následuje fáze implementace, kde jsou ukázky uživatelského rozhraní a zdrojového kódu aplikace. Závěr práce je věnován shrnutí dosažených výsledků, doporučením pro používání aplikace, možným rozšířením aplikace a možnostem propagace. Klíčová slova Cizí jazyky, výuka, jazyková výměna, webový portál, komunikace, moderní technologie, responsivní design, mobile- first přístup

8

9 9 Obsah 1 Úvod a cíl práce Úvod Cíl práce Struktura práce Cizí jazyk a potřeba jeho znalosti v dnešní době K čemu je cizí jazyk dobrý Ostatní Jak se správně naučit cizí jazyk Současný stav v oblasti podpory jazykových výměn a výuky jazyků Mylanguageexchange.com Language- exchanges.org Interpals.net Italki.com Ostatní Metodika práce 27 5 Analýza a návrh řešení Neformální specifikace Formální specifikace Diagram případů užití Specifikace diagramu případů použití Nefunkční požadavky Technologie pro implementaci PHP HTTP Server Databázový systém Redis Javascript... 39

10 Coffeescript AJAX HTML5, CSS WebRTC Node.js WebSocket Frameworky a knihovny pro implementaci Nette framework Dibi Angular.js Architektura Model- View- Controller ZURB Foundation Express.js PeerJS Ostatní Propojení jednotlivých technologií Entitně- relační diagram Popis tabulek Adresářová struktura Implementace Obecný layout Hlavička webu Patička webu Hlavní strana Přihlášení uživatele Registrace uživatele Reset hesla uživatele Odhlášení uživatele Nastavení uživatelského účtu Osobní informace Komunikační zájmy... 61

11 Jazyky, které uživatel zná Jazyky, které uživatel chce znát Změna profilové fotografie Oblíbení uživatelé Poznámkový blok Přehled soukromých zpráv Vyhledávání jazykových partnerů Výsledky vyhledávání jazykových partnerů Detail profilu Soukromá zpráva Chatová komunikace Video komunikace Hlasová komunikace Lokalizace uživatelského rozhraní Responsivní design Responsivní hlavička aplikace Responsivita stránky vyhledávání jazykového partnera Responzivita detailu uživatelského profilu Ostatní stránky Komunikace javascriptu s PHP Ukázka služby api na straně klienta Ukázka ApiModule na straně serveru Ukázka odpovědi ze serveru Socketová komunikace Ukázka emitování události na straně klienta # Ukázka odchycení a emitování události na straně serveru Ukázka odchycení události na straně klienta # Adresy stránek aplikace Administrace aplikace Diskuze a závěr 83 8 Literatura 85

12 12 9 Přílohy [A] Entitně- relační diagram [B] Přiložené CD... 90

13 13 Seznam obrázků Obr. 1 Hlavní strana portálu 21 Obr. 2 Hlavní strana portálu exchanges.org 23 Obr. 3 Hlavní strana portálu 24 Obr. 4 Hlavní strana portálu 25 Obr. 5 Diagram případů užití 30 Obr. 6 Srovnání tradičního modelu webových aplikací a AJAXového modelu 40 Obr. 7 Zjednodušené schéma vytvoření spojení mezi dvěma klienty 42 Obr. 8 Schéma zpracování požadavků u HTTP serveru Apache a Node.js 43 Obr. 9 Schéma připojení webových prohlížečů pomocí webového socketu k serveru44 Obr. 10 Schéma spolupráce jednotlivých částí MVC architektury 47 Obr. 11 Diagram spolupráce, propojení jednotlivých technologií aplikace 50 Obr. 12 Hlavička nepřihlášeného uživatele 55 Obr. 13 Hlavička přihlášeného uživatele 56 Obr. 14 Patička aplikace 56 Obr. 15 Hlavní strana aplikace 57 Obr. 16 Nastavení uživatelského profilu 60 Obr. 17 Přehled oblíbených uživatelů 62 Obr. 18 Poznámkový blok 63 Obr. 19 Přehled soukromých zpráv 64

14 14 Obr. 20 Detail příchozí soukromé zprávy 64 Obr. 21 Formulář pro vyhledávání jazykových partnerů 65 Obr. 22 Ukázka špatně a dobře vyplněného textového pole radius 66 Obr. 23 Ukázka výsledků vyhledávání jazykových partnerů 67 Obr. 24 Detail profilu uživatele 69 Obr. 25 Modální okno s formulářem pro odeslání soukromé zprávy 70 Obr. 26 Obrazovka s chatovou komunikací 70 Obr. 27 Tlačítko pro otevření aktivních chat konverzací 71 Obr. 28 Modální okno se zahájeným video hovorem 72 Obr. 29 Modální okno s audio hovorem 72 Obr. 30 Hlavička aplikace na zařízení s širokou obrazovkou 74 Obr. 31 Hlavička aplikace na zařízení s malou obrazovkou zavřené menu 74 Obr. 32 Hlavička aplikace na zařízení s malou obrazovkou otevřené menu 74 Obr. 33 Mobilní zobrazení formuláře pro vyhledávání jazykového partnera 75 Obr. 34 Responsivní tabulka výsledků vyhledávání 75 Obr. 35 Mobilní zobrazení detailu uživatelského profilu 76 Obr. 36 Ukázka administračního prostředí 81

15 15 Seznam tabulek Tab. 1 Skóre jednotlivých javascriptových MVC frameworků podle webu sporto.github.com Tab. 2 Hlavní rozdíly mezi CSS frameworky ZURB Foundation a Twitter Bootstrap 46 48

16 16

17 17 1 Úvod a cíl práce 1.1 Úvod Rodilí mluvčí, zejména z anglicky hovořících zemí se neučí žádný cizí jazyk a stali se tak závislí na jazykových schopnostech ostatních. V knize The Tongue- Tied American: Confronting the Foreign Language Crisis z roku 1987 senátor Paul Simon prohlásil, že občanů Spojených států amerických přichází o pracovní příležitosti, protože nemají žádnou znalost cizího jazyka. A dá se předpokládat, že dnes je toto číslo několikrát vyšší. Během posledních 20 let se země celého světa, zejména díky moderním technologiím, výrazně vzájemně propojily. Jedna z mnoha potřeb pro fungování v tomto moderním světě je komunikace, a to především v cizím jazyce. Snaha naučit se cizí jazyk se určitě neobejde bez pevné vůle, motivace a velké dřiny. Pro pochopení a naučení se každého jazyka je nutné pochopit mnoho jeho složek, jako je například gramatika. Důležitější, než znát teoreticky celou gramatiku nějakého jazyka, je umět tuto gramatiku použít. Ani čtení ani psaní nenaučí nikoho hovořit v nějakém jazyce plynule a s minimálním počtem přeřeknutí. Vhodným způsobem, jak se dobře naučit cizí jazyk, je přímá komunikace s rodilým mluvčím. Z osobní zkušenosti mi jazyková výměna pomohla zejména v pozvednutí sebevědomí při komunikaci v cizím jazyce, osvojení si jazykových obratů (zejména hovorových) a rychlejším přemýšlení, respektive k rychlé skladbě vět a tím pádem k plynulému hovoru. Na rozdíl od hovorové komunikace má při psaní člověk mnoho času si celou myšlenku a skladbu věty promyslet a případně ji několikrát překontrolovat a opravit. Již delší dobu se zajímám o webové portály zprostředkovávající vyhledávání jazykových partnerů pro jazykovou výměnu pomocí osobního setkání. Mám osobní zkušenost jak se skupinovými setkáními, tak se setkání s jednotlivci. Po intenzivní osobní roční jazykové výměně s rodilým anglickým mluvčím a dvouroční spoluprací se společností se sídlem v Anglii jsem zjistil, že jednodušší, rychlejší a zábavnější způsob, jak se naučit efektivně cizí jazyk prakticky neexistuje. Bohužel drtivá většina dostupných aplikací na internet je buď velice zastaralá, zpoplatněná a nebo nenabízí vhodné nástroje pro splnění účelu portálu tohoto zaměření. Tyto nedostatky mají potom za následek snížení důvěryhodnosti těchto aplikací, což vede k neochotě uživatelů je používat. Už dlouho jsem přemýšlel o vytvoření portálu podobného zaměření, který by zdarma nabízel vhodné nástroje a techniky pro výuku cizích jazyků a to zejména prostřednictvím organizování osobních setkání. Proto jsem se rozhodl takovou aplikaci vytvořit jako svoji závěrečnou práci. Jazyková výměna pomocí osobního setkání je podmíněna přítomností jednoho z účastníků jazykové výměny v cizí zemi. Proto bych kromě zprostředkování osobních setkání také rád nabídnul jinou formu komunikace a to běžnou chatovou komunikaci, hlasovou komunikaci nebo video komunikaci.

18 18 Při výběru technologií a platformy pro implementaci takovéto aplikace jsem se rozhodl jít cestou webové aplikace. Toto rozhodnutí jsem učinil zejména z následujícího úvodu. Aplikace má umožňovat komunikaci v reálném čase s jinými uživateli, tudíž vyžaduje připojení k internetu. Vytvářet aplikaci závislou na konkrétní platformě by znamenalo odepření přístupu uživatelům na platformě jiné - stejně tak v případě tvorby aplikace pro konkrétní operační systém. Nejjednodušším řešením, které tak nabídne možnost přístupu k aplikaci nezávisle na platformě a operačním systému je webová aplikace. I skrz internetovými prohlížeči se vyskytují implementační rozdíly některých technologií a s tímto faktem je nutno dopředu počítat. 1.2 Cíl práce Cílem práce je návrh a implementace internetové aplikace pro podporu výuky cizích jazyků a jazykových výměn, která bude nabízet své služby bez poplatků. V aplikaci bude kladen důraz na použití moderních technologií, uživatelský komfort, responsivní design a takzvaný přístup mobile- first. 1.3 Struktura práce Prvním krokem této práce bude stručný rozbor problematiky potřeby znalosti cizího jazyka v dnešní době a některé aspekty, které napomáhají při studiu cizího jazyka. Dalším krokem při tvorbě této závěrečné práce bude průzkum současného stavu v oblasti webových aplikací pro podporu jazykových výměn a výuku jazyků. Obsahem tohoto průzkumu bude podrobnější rozebrání několika současných řešení. Výsledkem tohoto průzkumu bude seznam hlavních nedostatků těchto aplikací, kterým se ve svém řešení budu snažit vyhnout. V další části této práce proběhne návrh řešení a následně implementace. Návrh řešení bude obsahovat výběr konkrétních technologií, frameworků, definici požadavků na aplikaci, tvorbu entitně- relačního diagramu, tvorbu diagramu případů užití a dalších náležitostí nutných k vytvoření zamýšlené aplikace. V závěru práce proběhne zhodnocení dosažených výsledků, diskuze o přínosu aplikace a diskuze nad možnými rozšířeními této aplikace. Zmíním se také o případných možnostech propagace.

19 19 2 Cizí jazyk a potřeba jeho znalosti v dnešní době V dnešní kosmopolitní době je znalost cizího jazyka tak elementární záležitost, jako například řídit automobil nebo používat mobilní telefon [47]. Většina anglických a amerických rodilých mluvčí se neučí žádný cizí jazyk. Tím pádem jsou závislí na jazykových schopnostech ostatních. To platí zejména pro země, kde je angličtina hlavním úředním jazykem [45]. Jeden z důvodů, proč se angličtí rodilí mluvčí neučí žádný jiný jazyk je způsoben tím, že věří, že Každý ve světě mluví anglicky. Správná interpretace tohoto tvrzení je však Každý na světě umí něco z anglického jazyka [45]. I přes to, že anglicky mluvící lidé jsou jedni z nejvíce prosperujících na celém světě, bylo by krátkozraké ignorovat globální vzestup např. Číny, Japonska nebo Brazílie a dalších neanglofonních zemí. Z tohoto důvodu je především pro anglofonní obyvatele usilování hodné a žádoucí naučit se mluvit jazykem těchto národností [45]. 2.1 K čemu je cizí jazyk dobrý Umění dorozumění se příslušným jazykem v cizině cizince výrazně přiblíží k porozumění každodenního života místních obyvatel a pomůže mu pochopit jejich zvyklosti a mentalitu. Bez znalosti cizího jazyka by tyto aspekty cizinci zůstaly skryty za oponou jazykové bariéry [47]. Znalost jazyka odjakživa patřila k váženým znalostem, neboť lidé schopní komunikovat více než jednou řečí dokázali budovat mosty mezi jednotlivci a skupinami, kteří by jinak byli odkázáni na snahu pochopení gest druhé strany a následně věnovat velké množství času při snaze o napravení chyb způsobeným nedorozuměním [47]. Navíc přímý rozhovor v cizím jazyce je mnohem více osobní a efektivní [45]. Důvody, proč se učit cizí jazyk, mohou být různého charakteru, např. [46]: praktické, účelové, intelektuální, sentimentální. Dovolím si připomenout světově známý citát Tomáše Garrigue Masaryka - Kolik jazyků znáš, tolikrát jsi člověkem Ostatní Důvodů pro naučení se cizího jazyka může být mnoho a vždy záleží na osobních preferencích. Mezi tyto důvody můžeme zařadit například:

20 20 zdokonalování sebe sama, lepší pochopení vlastních myšlenkových pochodů, udržování zdravé mysli, pochopení lidské populace, porozumění textům písniček v cizím jazyce, porozumění dokumentům, filmům, seriálům v cizím jazyce, získávání přátel, pochopení cizí kultury. 2.2 Jak se správně naučit cizí jazyk Ideálním způsobem, jak se naučit cizí jazyk, je přestěhovat se do ciziny, kde se tímto jazykem hovoří a snažit se do tohoto jazyka ponořit a pokusit se co nejlépe zařadit do každodenního života místních lidí a jejich kultury. Nicméně i při pobytu v zahraničí, kde se hovoří jazykem, který se chce někdo naučit, je potřeba tento jazyk aktivně studovat. Další možností, jak se naučit cizí jazyk, je komunikace s rodilým mluvčím bez nutnosti pobytu v zahraničí tzv. jazyková výměna. Jazyková výměna může probíhat prostřednictvím osobního setkání nebo jiné formy živé komunikace chatová komunikace, hlasová komunikace nebo video komunikace. Právě jazyková výměna a komunikace prostřednictvím alternativních forem komunikace je předmětem této práce. Třetí možností, jak se naučit cizí jazyk, je samostudium bez. Pomocí samostudia však nelze dosáhnout stejných kvalit při ovládání cizího jazyka jako při přímé komunikaci s rodilým mluvčím. Poznávání jazyka je dlouhodobý proces a v jeho průběhu se vyskytuje mnoho milníků [45]. Znalost každého jazyka se skládá z několika částí [44]: 1. slovní zásoba, 2. gramatika, 3. poslech, 4. mluvení, 5. čtení, 6. psaní. Komunikací s rodilým mluvčím prostřednictvím nějaké formy živé komunikace spojené s chatovou komunikací (nebo jinou formou dopisování) pokrývá všech šest výše zmíněných oblastí.

21 21 3 Současný stav v oblasti podpory jazykových výměn a výuky jazyků Na internetu existuje poměrně dost řešení týkajících se - zejména podpory - jazykových výměn a výuky jazyků. Vybral jsem proto několik větších zástupců z těchto řešení, na které se blíže zaměřím. Vybral jsem zejména řešení, která jsou nějakým způsobem funkční a důvěryhodné. Mnoho existujících řešení obsahuje opravdu pouze základní funkčnost a nízký počet vytvořených profilů. Tato řešení jsem automaticky vyloučil z průzkumu, protože jejich studium by vzhledem k jejich rozsahu nemělo žádnou vypovídající hodnotu. 3.1 Mylanguageexchange.com Obr. 1 Hlavní strana portálu První ze zástupců z řad webových stránek pro jazykovou výměnu je portál Funguje již od roku Uživatelské rozhraní

22 22 (používající tabulkový layout) a použité technologie jsou původní 14 let staré 1. Po zaregistrování a přihlášení je možné zdarma poslat Hi! pozdrav libovolnému uživateli, což pouze zašle automaticky generovanou zprávu jako upozornění, že uživatel má zájem o jazykovou výměnu. Pro zaslání vlastní zprávy je potřeba zaplatit jeden z Gold Membership tarifů, začínajících na $6.00 US (měsíční tarif). Stejně tak bez zaplaceného tarifu není možné využívat chat s ostatními uživateli. Portál nabízí klasické vyhledávání podle standartních atributů (rodný jazyk, cvičící jazyk, stát, město, věk, druh komunikace aj.). Sekce hlasová komunikace (případně sekce video komunikace) slouží pouze k informování uživatele, jaký software je možné pro hlasovou a video komunikaci použít, nenabízí však integraci této komunikace přímo. Zajímavá je sekce Word games, kde je například možné hrát klasickou šibenici, resp. hádání písmen daného slova. Portál je přeložen do osmi světových jazyků. 1

23 Language- exchanges.org Obr. 2 Hlavní strana portálu exchanges.org Portál exchanges.org je postavený na redakčním systému Drupal 7 2 a je v provozu od roku Prakticky nabízí po registraci a přihlášení pouze vyhledávání jazykových partnerů na základě tří údajů rodný jazyk, procvičující jazyk a stát. Komunikovat s uživateli portálu je možné pouze prostřednictvím soukromých zpráv. Aplikace nemá integrovaný chat, video komunikaci ani hlasovou komunikaci, pouze zmiňuje, jakými softwary třetích stran je možné takovouto komunikaci s partnerem provozovat. I přes velmi limitovanou funkcionalitu portál disponuje responsivním designem a jeho zobrazení je tak optimalizováno pro prohlížení na mobilních zařízeních. 2

24 Interpals.net Obr. 3 Hlavní strana portálu Webový portál existuje od roku 1999 a během svojí patnáctileté existence prošel několika kompletními změnami grafického rozhraní, přičemž poslední změna proběhla v roce Stejně jako portál exchanges.com nabízí pro komunikaci pouze zasílání soukromých zpráv. K chatování, hlasové a video komunikaci je opět zapotřebí použít softwaru třetích stran. Webová stránka bohužel nemá dostupné žádné zobrazení pro mobilní zařízení, nicméně i přesto se těší poměrně velkému počtu návštěvníků.

25 Italki.com Obr. 4 Hlavní strana portálu Služba funguje od roku Její uživatelské rozhraní má příjemné barvy a je vzdušný. Informace jsou přehledně organizované a srozumitelné. Podstata této aplikace je založena na tzv. italki credit (ITC), což je fiktivní měna vytvořená pro účely této služby. Jeden ITC odpovídá zhruba 2 Kč a je za něj možné kupovat služby ve formě vyučování od ostatních uživatelů portálu. Podle zadaných parametrů služba vybere a zobrazí kandidáty, u kterých je možné si za ITC zakoupit vyučovací dobu. Cena se pohybuje za 1 hodinu od 50 do 500 ITC za hodinu výuky, což odpovídá Kč za hodinu výuky. Aplikace má verzi pro zobrazení na mobilních zařízeních. Bohužel nelze služeb výuky využívat bez zakoupení ITC.

26 Ostatní Další dostupné aplikace jdou ruku v ruce, co se týká jejich funkčnosti. Patří mezi ně portály a Všechny tyto čtyři portály prakticky nabízí pouze vytvoření účtu a vyhledání jazykového partnera pouze na základě rodného jazyka, procvičujícího jazyka a státu. Pro komunikaci slouží pouze systém soukromých zpráv. Chat, hlasová a video komunikace musí být opět zprostředkovávána softwarem třetích stran. V podstatě všechny zmíněné aplikace nabízí pouze vytvoření uživatelského profilu a vyhledání jazykového partnera na základě limitovaného množství kritérií. Jedinou výjimkou je služba italki.com, kde je však jakákoliv komunikace zpoplatněna. Hlavními nedostatky současných řešení z řad portálů pro jazykovou výměnu jsou tedy zejména: zastaralost, v HTML zejména tabulkové layouty, flashové aplikace, nekompletnost, neintuitivní uživatelské rozhraní, nepřehlednost, zejména při vyhledávání partnerů, absence mobilního designu, omezená funkčnost bez zaplacení tarifu, špatná dohledatelnost, slabá propagace, nízké povědomí o podobných službách v České republice.

27 27 4 Metodika práce Jak je uvedeno v zadání této práce a jak již bylo řečeno v úvodu, zamýšlená aplikace bude vytvořena formou webová aplikace. V druhé kapitole této práce je stručně vysvětlena potřeba znalosti nějakého cizího jazyka v dnešní době a stručně popsány obecné metody vedoucí k jeho naučení. Problematika byla studována z literárních a internetových zdrojů. V třetí kapitole této práce byla podrobněji rozebrána současná řešení v oblasti webových aplikací pro jazykovou výměnu a podporu výuky jazyků. Tato část byla prováděna metodou pozorování a experimentování. Pro objektivní zhodnocení jednotlivých řešení bylo nutné vytvořit si na daných portálech uživatelské účty a aplikace hlouběji prozkoumat. Na základě tohoto průzkumu byly u jednotlivých aplikací identifikovány jejich silné a slabé stránky. Na konci této kapitoly byl vytvořen seznam hlavních nedostatků současných řešení, kde mým záměrem je při implementaci řešení vlastního se těmto nedostatkům vyhnout. Každá aplikace by měla v rámci svého životního cyklu projít několika základními fázemi. Mezi tyto fáze patří specifikace problému, analýza a návrh, implementace, testování, provoz a údržba [40]. Fáze specifikace problému byla splněna v kapitole zadání a úvodu práce. Ve fázi analýzy se zaměřím na studium daného problému bez ohledu na implementační omezení. Fáze analýzy bude obsahovat: neformální specifikaci, formální specifikaci, diagram případů užití, specifikaci diagramu případů užití, neformální požadavky. Diagram případů užití je jeden z typů UML 3 diagramu a používá se k popisu chování systému. Zachycuje jaké typy uživatelů se systémem pracují a jaké činnosti v rámci systému mohou vykonávat. Diagram případů užití však pouze zachycuje tyto činnosti bez nějakého hlubšího popisu. K tomu slouží specifikace diagramu případů užití. Nefunkční požadavky jsou požadavky, které se netýkají konkrétní funkcionality systému, ale definují požadavky na kvalitu služby, tzv. Quality of service requirements [1]. Po fázi analýzy následuje návrh, kde se zaměřím na: tvorbu databázového entitně- relačního diagramu a popis jednotlivých entit, resp. vzniklých tabulek, výběr technologií pro implementaci zamyšlené aplikace, výběr frameworků a podpůrných knihoven pro vybrané technologie. 3 Unified Modeling Language

28 28 Na základě vytvořené analýzy a návrhu aplikace proběhne implementace pomocí zvolených technologií, frameworků a knihoven. V části této práce, zabývající se implementací, popíši vytvořenou aplikaci. Popis jednotlivých vytvořených stránek aplikace doplním obrázky ilustrujícími uživatelské rozhraní. Kromě popisu vytvořených stránek aplikace vyberu názorné fragmenty zdrojového kódu pro popis použitých technologií. Poslední část této práce se bude zabývat shrnutím a zhodnocením dosažených výsledků a potvrzením či vyvrácením splnění cílů práce. Pojednám o přínosu vzniklé aplikace, uvedu doporučení pro její používání, rozeberu možnosti budoucích rozšíření aplikace a srovnám vytvořené řešení se současným stavem již existujících řešení. V neposlední řadě krátce rozeberu možnosti propagace aplikace.

29 29 5 Analýza a návrh řešení Základním účelem analýzy je studium daného problému bez ohledu na implementační omezení. Analýza se skládá z vytvoření neformální a formální specifikace dle zadání práce. Výsledkem analýzy je model systému, který je složen z různých diagramů a textových popisů prvků systému [43]. Na základě analýzy a splněním jejich dílčích částí vznikne internetová aplikace pro podporu jazykových výměn a výuky jazyků. 5.1 Neformální specifikace Aplikaci bude vytvořena tak, aby fungovala v prostředí internetového prohlížeče. Aplikaci bude moci používat kdokoliv, kdo má přístup k internetu. Primárním účelem aplikace je zprostředkování osobních setkání (jazykových výměn) a zprostředkování několika druhů komunikací přímo s rodilými mluvčími. V aplikaci bude možno vyhledávat jazykové partnery a prohlížet si jejich profily. Do aplikace bude možno se zaregistrovat, čímž bude uživateli zpřístupněna možnost navázat s ostatními uživateli aplikace komunikaci nebo si domluvit osobní setkání tj. jazykovou výměnu. Mezi základní druhy komunikace bude zařazena chatová komunikace, hlasová komunikace a video komunikace. Aplikace bude vytvořena s důrazem na moderní technologie a podporu mobilních zařízení. Název aplikace je Languageiffy, volně přeloženo jako zjazykovatění. 5.2 Formální specifikace Formální specifikace konkrétněji popisuje jednotlivé funkce a vlastnosti aplikace, které od ní požadujeme. Tuto kapitolu jsem rozdělil na tři podkapitoly: diagram případů užití, specifikace diagramu případů užití a nefunkční požadavky Diagram případů užití Prvním krokem tvorby diagramu případů užití je identifikace zúčastněných stran, neboli aktorů. V případě této aplikace se jedná o uživatele přihlášeného do aplikace a uživatele nepřihlášeného do aplikace, resp. anonymního uživatele. Diagram znázorňuje, ke kterým akcím mají jednotliví aktéři přístup.

30 30 Obr. 5 Diagram případů užití

31 Specifikace diagramu případů použití Samotný diagram případů užití znázorňuje, jaké funkcionality systém obsahuje a kým mohou být spouštěny. Kromě názvu jednotlivých případů užití o nich však nevíme nic. Tento problém řeší specifikace diagramu případů užití. Nemá žádnou pevně definovanou podobu. Jeho forma může byt jak tabulka, tak prostý text. Vytvoření uživatelského účtu Funkcionalita: umožňuje vytvořit uživatelský účet, na základě kterého je možné se následně přihlásit do aplikace. Vstup: E- mailová adresa uživatele, heslo, kontrola hesla. Provedení: Po odeslání formuláře se v databázi hledá shoda se zadaným e- mailem ve formuláři. Pokud je nalezena shoda, je uživatel informován, že zadaný je již použit. Pokud shoda nalezena není, je vytvořen nový uživatelský účet. Přihlášení uživatele Funkcionalita: Přihlásí uživatele do aplikace. Vstup: E- mail a heslo uživatele. Provedení: Po odeslání formuláře je v případě úspěchu uživatel přihlášen do aplikace. Při neúspěchu je uživatel informován o chybně zadaných přihlašovacích údajích. Odhlášení uživatele Funkcionalita: Odhlásí uživatele z aplikace. Vstup: žádný Provedení: Uživatel je odhlášen z aplikace a přesměrován na hlavní stranu. Reset hesla uživatele Funkcionalita: Zašle uživateli požadavek na reset hesla v případě zapomenutí. Vstup: E- mailová adresa uživatele. Provedení: Po odeslání formuláře je na zadaný e- mail zaslán odkaz pro vstup na stránku, kde si uživatel může vytvořit nové heslo. Platnost žádosti o nové heslo je jedna hodina. Uživatel musí mít k e- mailovému účtu přístup. Nastavení uživatelského profilu Funkcionalita: Uloží povinné údaje o uživateli do databáze, aby ostatní uživatelé mohli tento profil nalézt při hledání jazykového partnera. Vstup: Jméno, příjmení, pohlaví, datum narození, země pobytu, město, stručný popis, komunikační zájmy, jazyky, kterými uživatel hovoří, jazyky, které se uživatel chce učit, profilová fotka. Provedení: Uživateli je nabídnut podrobný formulář, kde musí vyplnit povinné údaje za účelem zobrazení svého profilu ve vyhledávání. Při

32 32 odeslání formuláře je uživatel informován o úspěchu, případně neúspěchu, pokud některá pole zůstala nevyplněna nebo byla vyplněna chybně. Zobrazení úvodní strany aplikace Funkcionalita: Zobrazí úvodní stranu aplikace se základními informace o účelu a možností dále procházet aplikaci. Vstup: žádný Provedení: Uživateli je zobrazena hlavní strana aplikace se základními informacemi o aplikaci a interaktivní mapou světa zobrazující všechny aktuálně připojené uživatele. Hlavní strana slouží jako rozcestník pro další používání aplikace. Změna lokalizace aplikace Funkcionalita: Přepne aplikaci na zvolenou lokalizaci. Vstup: Zvolený jazyk aplikace. Provedení: Kliknutím na zvolenou volbu lokalizace se změní jazyková mutace aplikace. Změna se týká kompletně celého uživatelského rozhraní napříč celou aplikací. Vyhledání jazykového partnera Funkcionalita: Zobrazí seznam dostupných jazykových partnerů na základě zadaných kritérií. Vstup: Jazyk, kterým jazykový partner hovoří, jazyk, který jazykový partner procvičuje, země původu partnera, město partnera, věk (rozmezí od do) partnera, pohlaví partnera, příznak profilové fotky, komunikační zájmy partnera (e- mailová komunikace, audio komunikace, chatová komunikace, video komunikace, osobní setkání). Pokud je uživatel přihlášen a má povolenou detekci geolokace, lze vyplnit i maximální vzdálenost, ve které se má partner vyhledávat od pozice uživatele. Provedení: Jedinou povinnou položkou formuláře je alespoň jeden vybraný jazykový zájem, ostatní položky jsou nepovinné a pouze zpřesňují výběr partnera. Po odeslání formuláře je uživatel informován, kolik vyhovujících profilů bylo nalezeno a tyto jsou zobrazeny v tabulce. Tabulka obsahuje základní údaje s možností otevření detailů jednotlivých profilů. Pod tabulkou je zobrazena mapa, která zobrazuje nalezené uživatele se zapnutou geolokací s možností přesměrování na jejich profil. Pokud není nalezen žádný záznam, uživatel je o tomto informován. Zobrazení uživatelského profilu Funkcionalita: Zobrazí detail uživatelského profilu. Vstup: Identifikátor uživatele v podobě hash řetězce. Provedení: Stránka profilu uživatele obsahuje kompletní seznam informací vyplněných uživatelem. Jméno a příjmení, pohlaví, věk, země pobytu, město, datum registrace, komunikační zájmy, jazyky kterými uživatel hovoří,

33 33 jazyky které uživatel procvičuje, stručný popis, profilovou fotografii, datum poslední aktivity. V uživatelském profilu je možné tento přidat mezi oblíbené, zaslat soukromou zprávu, zahájit chatovou komunikaci, audio komunikaci a video komunikaci. Odeslání soukromé zprávy uživateli Funkcionalita: Odešle zvolenému uživateli soukromou zprávu. Vstup: Předmět zprávy, text zprávy, identifikátor uživatele ve tvaru hash řetězce. Provedení: Uživateli je zobrazen formulář se dvěma povinnými vstupními poli předmět zprávy a text zprávy. Po stisknutí odesílacího tlačítka je uživateli zaslána soukromá zpráva a formulář zmizí. Zahájení chatové komunikace s uživatelem Funkcionalita: Zahájí nebo naváže na předchozí chatovou komunikaci s uživatelem. Vstup: Identifikátor uživatele ve tvaru hash řetězce. Provedení: Po zahájení chatové komunikace se zobrazí okno umožňující komunikaci v reálném čase. Obsahuje pouze jednu povinnou položku text zprávy. Pokud již komunikace s uživatelem někdy proběhla, je načtena historie této komunikace. Zahájení hlasové komunikace s uživatelem Funkcionalita: Zahájí hlasovou komunikaci s uživatelem. Vstup: Identifikátor uživatele ve tvaru hash řetězce. Provedení: Před zahájením hlasové komunikace se druhému uživateli pošle požadavek o zahájení hlasové komunikace. Ten má možnost ji přijmout nebo odmítnout. V případě úspěchu je navázáno hlasové spojení uživatelů. V případě zamítnutí je iniciující uživatel o tomto informován. Zahájení video komunikace s uživatelem Funkcionalita: Zahájí video komunikaci s uživatelem. Vstup: Identifikátor uživatele ve tvaru hash řetězce. Provedení: Před zahájením video komunikace se druhému uživateli zašle požadavek o zahájení video komunikace. Ten má možnost ji přijmout nebo odmítnout. V případě úspěchu je navázáno obrazové a hlasové spojení uživatelů. V případě zamítnutí je iniciující uživatel o tomto informován. Zobrazení soukromých zpráv Funkcionalita: Zobrazí přehled přijatých a odeslaných soukromých zpráv. Vstup: Identifikátor uživatele ve tvaru hash řetězce. Provedení: Na stránce je v podobě tabulky zobrazena příchozí a odchozí komunikace soukromých zpráv seřazena sestupně od nejnovější zprávy. Tabulka je podpořena stránkováním. Seznam obsahuje informace o stáří

34 34 soukromé zprávy, předmět zprávy, příjemce nebo odesílatel zprávy, příznak přečtení, možnost zobrazit detail zprávy a možnost zprávu smazat. Zobrazení detailu soukromé zprávy Funkcionalita: Zobrazí detail soukromé příchozí nebo odchozí zprávy. Vstup: Identifikátor zprávy ve tvaru hash řetězce. Provedení: V modálním okně je zobrazen detail zprávy. Detail obsahuje předmět zprávy, příjemce nebo odesílatele zprávy, stáří zprávy. Pokud je zobrazen detail příchozí soukromé zprávy, je ve spodní části modálního okna zobrazen formulář pro rychlou odpověď. Obsahuje dvě povinné položky předmět zprávy a text zprávy. Pokud zpráva nebyla dosud přečtena, je příznak přečtení změněn na hodnotu ano a je sníženo počítadlo nepřečtených zpráv v aplikaci. Smazání soukromé zprávy Funkcionalita: Smaže soukromou příchozí nebo odchozí zprávu z seznamu. Vstup: Identifikátor zprávy ve tvaru hash řetězce. Provedení: Po stisknutí tlačítka pro smazání zprávy je zprávě v databázi nastaven příznak smazaní na straně uživatele, který smazání inicioval. Smazání neovlivňuje zobrazení zprávy ve výpisu u uživatele, s nímž komunikace probíhala. Počítadlo nepřečtených soukromých zpráv Funkcionalita: Zobrazuje počet nepřečtených přijatých soukromých zpráv. Vstup: Seznam nepřečtených zpráv. Provedení: V horní části aplikace je zobrazeno počítadlo nepřečtených soukromých zpráv. Při přijetí nové soukromé zprávy je počítadlo navýšeno o hodnotu 1, v případě přečtení doposud nepřečtené příchozí soukromé zprávy je počítadlo o hodnotu 1 sníženo. Přidání uživatele mezi oblíbené Funkcionalita: Přidá uživatele mezi seznam oblíbených uživatelů. Vstup: Identifikátor uživatele ve formě hash řetězce. Provedení: Přidá uživatele mezi oblíbené, pro jednodušší přístup k jejich profilům. Odebrání uživatele z oblíbených Funkcionalita: Odebere uživatele ze seznamu oblíbených uživatelů. Vstup: Identifikátor uživatele ve formě hash řetězce. Provedení: Odebere uživatele ze seznamu oblíbených uživatelů. Zobrazení oblíbených uživatelů Funkcionalita: Zobrazí seznam oblíbených uživatelů. Vstup: Identifikátor uživatele ve formě hash řetězce.

35 35 Provedení: Zobrazí stručný seznam oblíbených uživatelů umožňující rychlý přístup k jejich profilům. Obsahuje ovládací prvky pro odebrání z oblíbených. Počítadlo připojených a přihlášených uživatelů Funkcionalita: Zobrazení počtu připojených a přihlášených uživatelů. Vstup: Identifikátory připojených a přihlášených uživatelů. Provedení: Zobrazení počtu aktuálně přihlášených uživatelů a zobrazení počtu přihlášených uživatelů. Počítadlo je u uživatelů aktualizováno ihned po připojení a odpojení nebo přihlášení a odhlášení uživatele. Zápisník Funkcionalita: Možnost zaznamenávání poznámek do elektronického zápisníků. Vstup: Libovolný text. Provedení: Uživatel má možnost zapisovat si poznámky do elektronického zápisníku, který poskytuje základní formátovací operace. Zápisník se automaticky ukládá Nefunkční požadavky Nefunkční požadavky se netýkají přímo konkrétních funkcí aplikace, ale definují požadavky na kvalitu služby, anglicky Quality of Service. Rozdělil jsem je na následující kategorie: Uživatelské rozhraní Uživatelské rozhraní zamýšlené aplikace musí být intuitivní, moderní, přehledné a maximálně univerzální. Uživatelské rozhraní musí být vytvořeno tak, aby se aplikace dala pohodlně používat i na tabletech a mobilních telefonech tj. použití responsivního designu. Software Jelikož je aplikace zpracovávána jako webová aplikace, pro správný běh je vyžadován libovolný operační systém s běžným moderním internetovým prohlížeč Google Chrome, Mozilla Firefox, Apple Safari, Opera nebo Microsoft Internet explorer verze 9 a vyšší. V internetovém prohlížeči je požadováno mít zapnutý javascript. Aplikace vyžaduje připojení k internetu. Doba odezvy Aplikace by měla mít nízkou dobu odezvy požadavků. Tohoto může být dosaženo např. použitím AJAXových požadavků, web socketové komunikace nebo key- value datového úložiště v paměti počítače. Přenositelnost

36 36 Aplikace by měla fungovat na většině mobilních zařízení s operačním systémem Android a ios. Kvůli hardwarovým a softwarovým limitacím mobilních zařízení může být funkčnost video komunikace a hlasové komunikace omezena. Rozšiřitelnost a modifikovatelnost Aplikace musí být navržena a implementována tak, aby bylo možné ji pohodlně rozšiřovat o novou funkcionalitu. Zároveň úpravy stávajícího kódu musí být jednoduché a bez větších komplikací. Použitelnost Aplikace by měla být navržena tak, aby byla uživatelsky přívětivá a nenutila uživatele dlouze přemýšlet při hledání cesty ke splnění určitého úkolu. Ovládání aplikace by mělo být jednoduše naučitelné a zapamatovatelné. Uživatel by měl být spokojený s používáním aplikace. 5.3 Technologie pro implementaci Po fázi analýzy a návrhu následuje fáze implementace a zavedení. Před touto fází je nutné zvolit technologie, pomocí kterých bude zamýšlená aplikace implementována. Jak vyplývá ze zadání, výstup aplikace bude ve formě webové aplikace. Tomuto je potřeba výběr technologií přizpůsobit. Ze zadání rovněž vyplývá, že aplikace má využívat moderní technologie a být kompatibilní i s mobilními zařízeními. Mým cílem je tuto webovou aplikaci přiblížit co nejvíce nativní aplikaci. Z tohoto důvodu bude aplikace vytvořena metodou full- javascript frontend, jinak nazývána také tlustý klient. Internetový prohlížeč potom bude komunikovat, resp. získávat data ze serveru a posílat data na server prostřednictvím techniky AJAX, resp. AJAJ. Aplikace bude obsahovat i části, které vyžadují real- time komunikaci. Vhodným řešením pro splnění tohoto požadavku je použití web socketové komunikace a javascriptového http serveru Node.js. Jako databázové úložiště bude použita všestranně použitelná databáze MySQL. Zároveň kvůli odlehčení zátěže MySQL bude použita Redis databáze. Redis databáze je key- value úložiště uchovávající data v paměti RAM, na rozdíl od MySQL, které ukládá soubory fyzicky na disk. Pro zprostředkování hlasové a video komunikace bude použito technologie WebRTC (Real Time Communication) a cloudový server, který bude sloužit jako MediaServer 4. Aplikační vrstva, neboli uživatelské rozhraní bude implementováno pomocí technologií HTML5, CSS3 a Javascript. Server, se kterým bude aplikace v javascriptu komunikovat bude naprogramován v jazyce PHP, běžící na HTTP serveru Apache. 4 Server pro výměnu dat multimediálního charakteru

37 PHP PHP (rekurzivní akronym pro PHP: Hypertext Preprocessor) je široce používaný, server- side, otevřený, univerzální skriptovací jazyk, který je vhodný zejména pro vývoj webů a může byt vložen do HTML [3]. Rozdíl mezi PHP a například javascriptem je ten, že skript se spouští na serveru, vygeneruje HTML a to je posláno zpět klientovi. Klient přijme výsledek tohoto skriptu, ale nemá tušení, čím byl tento výsledek vygenerován [3]. PHP je interpretovaný jazyk, to znamená, že zdrojový kód nemusíme překládat do strojového kódu. Pro běh programu je nutný zdrojový kód (skript) a tzv. interpret, který zdrojový kód interpretuje. Opakem k interpretovaným jazykům jsou jazyky kompilované, u nichž se zdrojový kód přeloží do strojového kódů. Strojový kód je potom spustitelný soubor [6]. Výhodou interpretovaných jazyků je snadná úprava zdrojového kódu, jednodušší hledání chyb a jejich odstraňování. Další výhodou je jejich přenositelnost pokud na dané platformě existuje interpret daného jazyka. Nevýhody interpretovaných jazyků jsou potřeba interpreta a pomalejší běh programu. PHP je extrémně jednoduchý pro začátečníky, ale nabízí i velmi pokročilé techniky pro profesionální programátory. Příbuzné jazyky k PHP jsou Perl a C. Čtyři hlavní výhody PHP jsou: přístupnost, kompatibilita, jednoduchost, široká komunita. Server W3Techs.com uvádí, že PHP používá 81.9% všech webových stránek, u kterých je znám server- side programovací jazyk [5] HTTP Server Při tvorbě pokročilejších webových stránek se programátor neobejde bez znalosti fungování HTTP (HyperText Transfer Protocol) protokolu a komunikace mezi klientem a serverem [7]. Princip fungování HTTP protokolu je jednoduchý. Klient pošle požadavek, server tento požadavek zpracuje a pošle klientovi zpět odpověď. Klient je zpravidla internetový prohlížeč, ale může jím být i vyhledávací robot nebo jiný druh programu. HTTP server je program, který běží na počítači (označovaném jako server) a právě nejznámějším HTTP serverem je Apache Databázový systém Z důvodu potřeby ukládat data na webovém serveru je potřeba zvolit vhodný databázový systém. Databázových systémů je nepřeberné množství a charakter aplikace je vždy hlavním faktorem při výběru toho nejvhodnějšího. Mezi

38 38 nejpopulárnější databázové systémy patří Oracle, MySQL, Microsoft SQL Server, PostgreSQL, MongoDB [9]. Já jsem zvolil databázový systém MySQL z důvodu jeho rozšířenosti, ale zejména z následujících důvodů [8][10]: škálovatelnost a flexibilita, vysoký výkon, vysoká dostupnost, robustní transakční systém, pevná data- warehouse základna, ochrana dat, podpora 24 hodin denně, 7 dní v týdnu, velký výkon, rychlé zpracování dotazů. MySQL je relační databáze. Relační databáze je kolekce datových položek uspořádaných v předem formálně popsaných tabulkách [11]. Jednotlivé položky tabulky mohou být v relaci s položkami v jiných tabulkách. Tyto relace se vytváří za pomocí primárních klíčů a cizích klíčů. Pokud máme položku v tabulce A, která má být v relaci s položkou z tabulky B, musí tabulka A obsahovat u každé položky primární (unikátní) klíč, který potom u položky v tabulce B uvedeme jako cizí klíč. V MySQL, jak název napovídá, se pro práci s databází používá jazyk SQL (Structured Query Language, Strukturovaný dotazovací jazyk). Příkazy pro práci s databází MySQL dělíme do několika skupin [12]: příkazy pro definici dat, příkazy pro manipulaci s daty, příkazy transakcí, příkazy pro správu funkcí, práce s předpřipravenými příkazy, příkazy pro správu práv a účtů Redis Jak bylo zmíněno výše, z důvodu odlehčení zátěže MySQL databáze bude paralelně s touto použito úložiště Redis. Jedná se o multiplatformní open source pokročilé key- value úložiště. Často také nazýváno jako server datových struktur, protože klíče mohou obsahovat řetězce, hashe, množiny a jiné datové struktury [13]. Úložiště Redis jsem vybral zejména proto, že se jedná o nejpoužívanější key- value úložiště [15]. Hlavní rozdíl úložiště Redis oproti databázi MySQL (a jiným běžným databázím) je ten, že všechna data jsou načtená v paměti RAM a tedy umožňují mnohem rychlejší práci s daty, než běžná databáze. Data v paměti RAM se pravidelně zálohují na disk. Redis je podporován mnoha programovacími jazyky, včetně PHP a javascriptu [14]. Právě podpora těchto jazyků je důležitá v budoucí implementaci této aplikace.

39 Javascript Javascript je vysokoúrovňový, dynamický, netypový a interpretovaný programovací jazyk. Je vhodný jak pro psaní objektově- orientovaného kódu, tak pro psaní funkcionálního či imperativního kódu [17]. Většina moderních prohlížečů používá nový přístup zpracování javascriptového kódu Just In Time kompilaci. Prohlížeč se rozhodne, jestli je potřeba některé bloky kódu zkompilovat metodou Just In Time a tím výrazně zrychlit běh aplikace [18]. Javascript je programovací jazyk webových prohlížečů, tj. je to jazyk na straně klienta. Drtivá většina moderních internetových stránek používá javascript. Všechny moderní internetové prohlížeče - ať už na osobních počítačích, tabletech, mobilních telefonech nebo herních konzolích obsahují interpret javascriptu. Javascript je jedna ze tří technologií, kterou by měl každý vývojář internetových stránek ovládat [17]. Javascript je v této aplikaci důležitý zejména z důvodu snahy přiblížení se webovou aplikací aplikaci nativní. Javascript poskytuje prostředky pro interakci s uživatelem, asynchronní komunikaci, změnu obsahu webové stránky a to bez nutnosti obnovení stránky. Javascript lze použít i mimo prostředí webového prohlížeče. V této práci bude důležité zejména použití javascriptu jako programovacího jazyka na straně serveru Coffeescript Coffeescript je programovací jazyk, který se transkompiluje do javascriptu. Coffeescript se snaží odhalit dobré a silné stránky javascriptu a poskytnout je jednoduchou formou uživatelům [39]. Jednoduše řečeno je to nástavba pro javascript, která nabízí vyšší míru abstrakce. Mezi hlavní výhody Coffeescriptu patří [39]: zjednodušený zápis funkcí, automatické doplňování return příkazu, rozšířená funkčnost při práci s poli, interpolace textových řetězců, vytváření tříd pomocí klíčového slova class a dědění tříd pomocí klíčového slova extends. Nejen kvůli výše zmíněným důvodům, ale také zejména kvůli zvýšené čitelnosti bude v této práci použit jazyk Coffeescript AJAX AJAX akronym pro Asynchronous Javascript And XML, reprezentuje podstatný převrat v možnostech webových aplikací.

40 40 AJAX není technologie. Ve skutečnosti je AJAX spojení několika technologií v jeden celek, které otevírají nové možnosti v tvorbě webových stránek [16]. AJAX je složen z následujících technologií a praktik [16]: HTML, CSS, dynamické zobrazování a interakce pomocí objektového modelu dokumentu (DOM), výměna dat za pomocí XML a XSLT nebo pomocí JSON, asynchronní komunikace pomocí XMLHttpRequest, javascript. Obr. 6 Srovnání tradičního modelu webových aplikací a AJAXového modelu [16] Použití AJAXu je v této práci klíčová vlastnost. Oproti klasickému modelu, kdy klient pošle požadavek čeká je mu vrácen výsledek a je překreslena celá stránka, AJAX umožňuje asynchronní komunikaci se serverem bez nutnosti překreslení celé stránky, nýbrž pouze jejího fragmentu. Toto chování značně přiblíží požitek z aplikace nativní aplikaci a zmenší objem dat přenášených

41 41 po internetu, protože namísto posílání celé HTML stránky se bude posílat pouze fragment HTML či dokonce pouze holá data bez jakéhokoliv HTML HTML5, CSS3 Jelikož zamýšlená aplikace poběží v prostředí webového prohlížeče, pro tvorbu uživatelského rozhraní bude použit klasický přístup značkovací jazyk HTML5 pro definici struktury dokumentu a CSS3 pro definici vzhledu dokumentu. HTML5, neboli Hypertext Markup Language, je značkovací jazyk používaný pro tvorbu struktury a prezentování obsahu v rámci World Wide Web resp. Internetu [19]. HTML, aktuálně v poslední verzi 5, mělo za jeden z hlavních cílů vylepšit multimediální podporu v prohlížečích [19]. Mimo jiné bylo aplikační programové rozhraní rozšířeno například o tyto funkce [20]: drag&drop, offline webové aplikace, web storage, editace dokumentu, geolokace, web SQL databáze. CSS, neboli Cascading Style Sheets je jazyk používaný pro popis vzhledu dokumentů napsaných značkovacím jazykem v případě této aplikace HTML. CSS popisuje vzhled dokumentu tak, aby bylo možné ho zobrazit v čitelné podobě na různých typech zařízení velké obrazovky, malé obrazovky, tiskárny, tablety, mobilní telefony [21]. V zamýšlené aplikaci bude použito CSS verze 3, které umožňuje použití pokročilých funkcí vzhledu. Patří mezi ně například [22]: funkce přechodů, funkce animace, funkce 3D transformací, pokročilý box- model podmíněná pravidla WebRTC Vznikající aplikace bude podporovat hlasovou a video komunikaci. Ze zadání vyplývá, že mají být v aplikaci použity moderní technologie. V oblasti video komunikace a hlasové komunikace v prostředí webového prohlížeče není mnoho možností. Prakticky se nabízí dvě možnosti Flash a WebRTC. Zhruba před deseti lety byl flash dominantní technologií zprostředkovávající interaktivní obsah na webu. Tři roky zpět byl flash stále častým nástrojem pro tvorbu interaktivního obsahu, ale od nástupu nových moderních technologií

42 42 (převážně HTML5 s vylepšenou multimediální podporou) popularita flashe upadá. Mimo to flash není podporován mnoha zařízeními [23]. Velký úpadek flashe nastal především, když společnost Apple oznámila, že mobilní telefony iphone a tablety ipad nebudou podporovat flashový obsah. V současné době iphone a ipad zařízení tvoří 60% mobilních zařízení s přístupem k internetu. Společnost Adobe nedávno navíc ukončila podporu flashového obsahu na mobilních zařízeních s operačním systémem Android [23]. Druhou a mnohem vhodnější možností, kterou jsem pro budoucí implementaci zvolil, je použití technologie WebRTC (Real Time Communication). WebRTC je aplikační programové rozhraní definované konsorciem W3C 5, které umožňuje psát browser- to- browser aplikace s podporou video hovorů, hlasové komunikace a sdílení souborů bez jakýchkoliv doplňků [24]. Implementace se provádí pomocí HTML5 a javascriptu. WebRTC je podporován následujícími moderními prohlížeči [26]: Google Chrome, Mozilla Firefox, Opera. Obr. 7 Zjednodušené schéma vytvoření spojení mezi dvěma klienty [26] Zelený klient pošle žádost o vytvoření spojení spolu se svým datovým streamem 6, resp. streamem s multimediálním obsahem, červený klient se rozhodne, zda žádost o vytvoření spojení příjme či nikoliv, při zamítnutí žádosti se spojení ukončí, při přijmutí žádosti červený klient přijme multimediální stream a v odpovědi žádosti odešle svůj multimediální stream [26]. 5 Konsorcium W3C 6 Stream tok dat