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

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.   Brno  2014  

 

Bc.  Michal  Ševčík  

 

  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.    

 

Č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  

 _______________________________    

 

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ě,  2014.     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  

 

 

9  

Obsah 1   Úvod  a  cíl  práce  

17  

1.1   Úvod  ...........................................................................................................................................  17   1.2   Cíl  práce  ....................................................................................................................................  18   1.3   Struktura  práce  .....................................................................................................................  18   2   Cizí  jazyk  a  potřeba  jeho  znalosti  v  dnešní  době  

19  

2.1   K  čemu  je  cizí  jazyk  dobrý  ................................................................................................  19   2.1.1   Ostatní  ..............................................................................................................................  19   2.2   Jak  se  správně  naučit  cizí  jazyk  ......................................................................................  20   3   Současný  stav  v  oblasti  podpory  jazykových  výměn  a  výuky  jazyků  

21  

3.1   Mylanguageexchange.com  ...............................................................................................  21   3.2   Language-­‐exchanges.org  ...................................................................................................  23   3.3   Interpals.net  ...........................................................................................................................  24   3.4   Italki.com  .................................................................................................................................  25   3.5   Ostatní  .......................................................................................................................................  26   4   Metodika  práce  

27  

5   Analýza  a  návrh  řešení  

29  

5.1   Neformální  specifikace  ......................................................................................................  29   5.2   Formální  specifikace  ...........................................................................................................  29   5.2.1   Diagram  případů  užití  ...............................................................................................  29   5.2.2   Specifikace  diagramu  případů  použití  ................................................................  31   5.2.3   Nefunkční  požadavky  ................................................................................................  35   5.3   Technologie  pro  implementaci  ......................................................................................  36   5.3.1   PHP  ....................................................................................................................................  37   5.3.2   HTTP  Server  ...................................................................................................................  37   5.3.3   Databázový  systém  .....................................................................................................  37   5.3.4   Redis  ..................................................................................................................................  38   5.3.5   Javascript  .........................................................................................................................  39  

10  

 

5.3.6   Coffeescript  .....................................................................................................................  39   5.3.7   AJAX  ...................................................................................................................................  39   5.3.8   HTML5,  CSS3  ..................................................................................................................  41   5.3.9   WebRTC  ............................................................................................................................  41   5.3.10   Node.js  ............................................................................................................................  43   5.3.11   WebSocket  ....................................................................................................................  43   5.4   Frameworky  a  knihovny  pro  implementaci  ..............................................................  44   5.4.1   Nette  framework  ..........................................................................................................  44   5.4.2   Dibi  .....................................................................................................................................  45   5.4.3   Angular.js  .........................................................................................................................  45   5.4.4   Architektura  Model-­‐View-­‐Controller  ..................................................................  46   5.4.5   ZURB  Foundation  .........................................................................................................  47   5.4.6   Express.js  .........................................................................................................................  48   5.4.7   PeerJS  ................................................................................................................................  49   5.4.8   Ostatní  ...............................................................................................................................  49   5.5   Propojení  jednotlivých  technologií  ...............................................................................  49   5.6   Entitně-­‐relační  diagram  .....................................................................................................  50   5.6.1   Popis  tabulek  ..................................................................................................................  51   5.7   Adresářová  struktura  ..........................................................................................................  53   6   Implementace  

55  

6.1   Obecný  layout  .........................................................................................................................  55   6.1.1   Hlavička  webu  ...............................................................................................................  55   6.1.2   Patička  webu  ..................................................................................................................  56   6.2   Hlavní  strana  ...........................................................................................................................  56   6.3   Přihlášení  uživatele  ..............................................................................................................  58   6.4   Registrace  uživatele  .............................................................................................................  58   6.5   Reset  hesla  uživatele  ...........................................................................................................  58   6.6   Odhlášení  uživatele  ..............................................................................................................  59   6.7   Nastavení  uživatelského  účtu  ..........................................................................................  59   6.7.1   Osobní  informace  .........................................................................................................  60   6.7.2   Komunikační  zájmy  .....................................................................................................  61  

 

11  

6.7.3   Jazyky,  které  uživatel  zná  .........................................................................................  61   6.7.4   Jazyky,  které  uživatel  chce  znát  .............................................................................  61   6.7.5   Změna  profilové  fotografie  ......................................................................................  61   6.8   Oblíbení  uživatelé  ................................................................................................................  61   6.9   Poznámkový  blok  .................................................................................................................  62   6.10   Přehled  soukromých  zpráv  .............................................................................................  63   6.11   Vyhledávání  jazykových  partnerů  ...............................................................................  65   6.12   Výsledky  vyhledávání  jazykových  partnerů  ...........................................................  66   6.13   Detail  profilu  .........................................................................................................................  67   6.14   Soukromá  zpráva  ................................................................................................................  69   6.15   Chatová  komunikace  .........................................................................................................  70   6.16   Video  komunikace  ..............................................................................................................  71   6.17   Hlasová  komunikace  ..........................................................................................................  72   6.18   Lokalizace  uživatelského  rozhraní  ..............................................................................  72   6.19   Responsivní  design  ............................................................................................................  73   6.19.1   Responsivní  hlavička  aplikace  ............................................................................  74   6.19.2   Responsivita  stránky  vyhledávání  jazykového  partnera  ........................  74   6.19.3   Responzivita  detailu  uživatelského  profilu  ...................................................  75   6.19.4   Ostatní  stránky  ...........................................................................................................  76   6.20   Komunikace  javascriptu  s  PHP  .....................................................................................  76   6.20.1   Ukázka  služby  api  na  straně  klienta  .................................................................  77   6.20.2   Ukázka  ApiModule  na  straně  serveru  ..............................................................  77   6.20.3   Ukázka  odpovědi  ze  serveru  ................................................................................  78   6.21   Socketová  komunikace  .....................................................................................................  78   6.21.1   Ukázka  emitování  události  na  straně  klienta  #1  .........................................  79   6.21.2   Ukázka  odchycení  a  emitování  události  na  straně  serveru  ....................  79   6.21.3   Ukázka  odchycení  události  na  straně  klienta  #2  ........................................  79   6.22   Adresy  stránek  aplikace  ...................................................................................................  79   6.23   Administrace  aplikace  ......................................................................................................  80   7   Diskuze  a  závěr  

83  

8   Literatura  

85  

12  

9   Přílohy  

 

89  

9.1   [A]  Entitně-­‐relační  diagram  .............................................................................................  89   9.2   [B]  Přiložené  CD  ....................................................................................................................  90  

 

13  

Seznam  obrázků   Obr.  1   Hlavní  strana  portálu  http://www.mylanguageexchange.com  

21  

Obr.  2   Hlavní  strana  portálu  http://www.language-­‐exchanges.org  

23  

Obr.  3   Hlavní  strana  portálu  http://www.interpals.net  

24  

Obr.  4   Hlavní  strana  portálu  http://www.italki.com  

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  

 

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  

Seznam  tabulek   Tab.  1   Skóre  jednotlivých  javascriptových  MVC  frameworků  podle   webu  sporto.github.com  

46  

Tab.  2   Hlavní  rozdíly  mezi  CSS  frameworky  ZURB  Foundation  a   Twitter  Bootstrap  

48  

16  

 

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   200   000   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  

 

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  

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.“   2.1.1

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  

 

• • • • • • • •

2.2

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.  

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  

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

Obr.  1

Mylanguageexchange.com  

Hlavní  strana  portálu  http://www.mylanguageexchange.com  

První   ze   zástupců   z   řad   webových   stránek   pro   jazykovou   výměnu   je   portál   www.mylanguageexchange.com.   Funguje   již   od   roku   2000.   Uživatelské   rozhraní  

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  http://wayback.archive.org/web/20001110073300/http://www.mylanguageexchange.com/  

 

23  

3.2

Obr.  2

Language-­‐exchanges.org  

Hlavní  strana  portálu  http://www.language-­‐exchanges.org  

Portál  www.language-­‐exchanges.org  je  postavený  na  redakčním  systému  Drupal  72   a   je   v   provozu   od   roku   2006.   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

 

http://www.drupal.org

24  

3.3

Obr.  3

 

Interpals.net  

Hlavní  strana  portálu  http://www.interpals.net  

Webový  portál  www.interpals.net  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  2008.     Stejně   jako   portál   www.language-­‐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ů.                

 

3.4

Obr.  4

25  

Italki.com  

Hlavní  strana  portálu  http://www.italki.com  

Služba   www.italki.com   funguje   od   roku   2007.   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á  100  –  1000  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  

3.5

 

Ostatní  

Další   dostupné   aplikace   jdou   ruku   v   ruce,   co   se   týká   jejich   funkčnosti.   Patří   mezi   ně  portály   www.tandembuddy.com,   www.languageforexchange.com,   www.conversationexchange.com  a    www.polyglotclub.com.   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  

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ů   UML3   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  

 

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  

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

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  

Obr.  5

 

Diagram  případů  užití  

 

5.2.2

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ý  email  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  

 

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  

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  

 

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  

•

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á.   5.2.3

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  

 

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

 

5.3.1

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].   5.3.2

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

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  

 

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ů.   5.3.4

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.    

 

5.3.5

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

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

AJAX  

AJAX   –   akronym   pro   Asynchronous   Javascript   And   XML,   reprezentuje   podstatný   převrat  v  možnostech  webových  aplikací.  

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  

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

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

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  

 

(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   W3C5,   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   streamem6,  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  –  www.w3.org   6  Stream  –  tok  dat  

 

5.3.10

43  

Node.js  

Node.js  je  server-­‐side  řešení  pro  programovací  jazyk  javascript,  v  podstatě  se  jedná   o  HTTP  server  [27].   Node.js   aplikace   jsou   napsané   v   javascriptu   a   mohou   být   spouštěny   v   rámci   běhového  prostředí  Node.js  na  operačních  systémech  Linux,  Mac  OS  X  a  Windows   bez  rozdílu.   Node.js   aplikace   jsou   navrhnuty   tak,   aby   maximalizovaly   propustnost   a  efektivitu,   za   použití   neblokového   vstupu/výstupu   a   asynchronních   událostí.   Právě  díky  asynchronnosti  se  Node.js  používá  pro  vývoj  real-­‐time  aplikací.   Hlavní  rozdíl  mezi  Node.js  a  Apache,  jakožto  HTTP  serverů  je  ten,  že  Apache   pro   každý   http   požadavek   vytváří   nové   vlákno,   resp.   novou   instanci   aplikace.   Node.js  zpracovává  všechny  požadavky  v  jednom  vlákně  a  je  stále  spuštěný.  

Obr.  8

Schéma  zpracování  požadavků  u  HTTP  serveru  Apache  a  Node.js  

5.3.11

WebSocket  

WebSocket   specifikace   definuje   WebSocket   jako   aplikační   programové   rozhraní   navazující   socketové   spojení   mezi   webovým   prohlížečem   a   serverem.   Mezi   klientem   a   serverem   je   vytvořeno   persistentní   spojení   a   obě   strany   mohou   začít   posílat  data  v  kterýkoliv  moment  [28].     WebSockety   jsou   stále   mladá   technologie   a   nemusí   být   implementována   ve  všech  prohlížečích.  Ovšem  je  možné  použít  některé  existující  knihovny,  které  při   chybějící   implementaci   WebSocketů   v   prohlížeči   používají   fallback   v   podobě   AJAXových  requestů  [28].   Jedná  z  takových  knihoven  –  socket.io  -­‐  bude  použita  i  v  této  práci.  

44  

 

Obr.  9 Schéma  připojení  webových  prohlížečů  pomocí  webového  socketu  k  serveru  [zdroj:   http://packtlib.packtpub.com/graphics/9781782166320/graphics/6320OS_06_07.jpg]  

WebSockety   nenahrazují   AJAX.   AJAX   by   se   měl   stále   používat   pro   jednorázové   dotazování   se   na   server.   Technologii,   kterou   ovšem   WebSockety   nahrazují,   je  Comet   server.   Comet   servery   se   používaly   (a   stále   používají)   jako   náhrada   nebo   simulace   real-­‐timeové   komunikace   pomoci   HTTP   long-­‐polling   (tzv.   dlouhé   dotazování,  spojení  je  otevřeno,  dokud  server  nepošle  odpověď).  V  dnešní  době  by   se   WebSockety   měly   používat   jako   standard   realtimové   komunikace   v   oblasti   webových   technologií,   neboť   poskytují   dvousměrné   spojení   s   rychlou   odezvou,   realizované  pomocí  protokolu  TCP  [29].  

5.4

Frameworky  a  knihovny  pro  implementaci  

Technologie   pro   implementaci   jsou   vybrány,   nicméně   pracovat   s   každou   zvolenou   technologií   bez   použití   frameworku   nebo   podpůrných   knihoven   by   zabralo  mnoho  času  s  možnými  bezpečnostními  riziky.   Framework  je  platforma  pro  vývoj  softwarových  aplikací,  která  nabízí  pevný   základ,   na   kterém   mohou   vývojáři   tyto   aplikace   stavět.   Framework   je   zpravidla   množina   předdefinovaných   tříd,   objektů   a   funkcí,   které   mohou   být   použity   pro   zpracování  vstupu  nebo  komunikaci  s  hardwarovými  prostředky  [30].   Framework   je   podobný   rozhraní   pro   programovaní   aplikací   (application   programming  interface),  nicméně  technicky  je  API  spíše  jeho  součástí.    Framework   slouží   jako   programovací   základ,   zatímco   API   zprostředkovává   přístup   k   tomuto   základu  [30].   5.4.1

Nette  framework  

První   technologií,   pro   kterou   je   potřeba   zvolit   framework,   je   PHP.   Na   poli   jazyka   PHP   se   nachází   několik   větších   hráčů   v   oblasti   MVC7   frameworků.   Patří   mezi   ně   například  Zend  Framework  2,  Symfony  2,  CodeIgniter  nebo  Nette.   7  Model-­‐view-­‐controller  

 

45  

Já   jsem   zvolil   framework   Nette,   zejména   díky   rozsáhlé   české   komunitě,   dokonalému  zabezpečení  a  předchozím  pozitivním  zkušenostem  [31].   Hlavní  přednosti  Nette  frameworku  jsou  [31]:   • dokonalé  zabezpečení,   • bezkonkurenční  ladicí  nástroje,   • excelování  ve  výkonu,   • nejaktivnější  komunita  v  ČR  v  oblasti  PHP  frameworků,   • dobré  návyky,  vede  k  psaní  čistého  návrhu  aplikace,   • propracovaná  metoda  moderních  technologií  a  koncepcí:   • AJAX,  AJAJ,   • Dependency  Injection,   • Search  Engine  Optimisation,   • Don't  Repeat  Yourself,   • Keep  It  Short,  Simple,   • Web  2.0,   • vyzrálý  objektový  návrh,   • bohatá  knihovna  pluginů  a  rozšíření.   5.4.2

Dibi  

Pro   práci   s   databází   jsem   se   rozhodl   použít   jednoduchou   abstraktní   databázovou   mezivrstvu.   V   případě   této   aplikace   není   třeba   pracovat   se   složitými   Object   Relation   Mappery,   protože   většina   databázových   operací   budou   převážně   jednoduché  operace  a  ORM  nástroje  by  běh  aplikace  pouze  zbytečně  zdržovaly.     Ideálním   kandidátem   na   tuto   pozici   je   knihovna   Dibi.   Kromě   poskytování   společného   rozhraní   pro   různé   druhy   databází   poskytuje   obrovské   množství   metod   pro   práci   s   databází   nebo   již   získanou   odpovědí   z   databáze   a   metody   pro   ošetření  vstupu  tak,  aby  nemohlo  dojít  k  bezpečnostnímu  útoku  SQL  injection  [35].   5.4.3

Angular.js  

Jak   již   bylo   zmíněno   v   sekci   Technologie   pro   implementaci,   uživatelská   část   aplikace   bude   implementována   formou   full-­‐javascript   frontend,   jinak   řečeno   metodou  tlustý  klient.   Mezi   významné   zástupce   javascriptových   MVC   frameworků   patří   Angular,   Backbone,   CanJS,   Ember   nebo   Knockout.   Vybrat   správný   javascriptový   MVC   framework  je  velmi  obtížné  a  záleží  na  mnoha  faktorech.   Při  rozhodování  mi  pomohlo  srovnání  čtyř  frameworků  –  Angular,  Backbone,   CanJS  a  Knockout  na  webové  stránce  sporto.github.io.  Podle  tohoto  srovnání  jsou   důležitými  vlastnostmi  MVC  frameworku  následující  položky  [33]:   • observables  –  sledování  změn  v  objektu,   • routing   –   změna   URL   adresy   a   vyvolání   odpovídajících   událostí   naslouchajících  této  změně,   • view  bindings  –  použití  sledovaných  objektů  k  automatickému  obnovení  dat   v  šabloně  při  změně,  

46  

 

• two-­‐way   bindings   –   oboustranné   naslouchání   změnám,   jak   z   controlleru   do  šablony,  tak  ze  šablony  do  controlleru,   • partial  views  –  šablony,  které  mohou  načítat  jiné  šablony,   • filtered  list  views  –  filtrování  dat  v  šablonách  podle  zadaných  kritérií.     Následující   tabulka   demonstruje,   jaká   skóre   získaly   jednotlivé   frameworky   při   zvážení  těchto  vlastností:     Angular Backbone CanJS Ember 5 Tab.  1

2

4

5

Skóre  jednotlivých  javascriptových  MVC  frameworků  podle  webu  sporto.github.com  

Mezi  další  klíčové  vlastnosti  při  výběru  jsem  zahrnul:   • flexibilitu,   • produktivitu,   • komunitu  okolo  frameworku,   • počet  doplňků  a  rozšíření.     V   každém   z   těchto   frameworků   jsem   napsal   jednoduchou   aplikaci   a   na   základě   tohoto   otestování,   zvážení   a   ověření   předchozích   kritérií   jsem   vybral   jako   nejvhodnějšího  zástupce  framework  Angular.   Užitečným  nástrojem  při  výběru  javascriptového  MVC  frameworku  může  být   také   stránka   www.todomvc.com,   která   obsahuje   jednoduchou   aplikaci   v   podobě   TODO   seznamu   (úkolovníčku)   napsanou   ve   všech   předních   i   mnoha   dalších   javascriptových  frameworcích.   5.4.4

Architektura  Model-­‐View-­‐Controller  

Nette   i   Angular.js   jsou   frameworky   z  kategorie   Model-­‐View-­‐Controller   (MVC)   frameworků.  MVC  je  vzor  softwarové  architektury  pro  implementaci  uživatelských   rozhraní.  Rozděluje  aplikaci  na  tři  části.  Centrální  komponenta  -­‐  model  –  se  skládá   z  aplikačních   dat,   business   pravidel   a   business   logiky.   View   je   jakýkoliv   výstup   zaslaný  uživateli  –  ať  už  HTML  stránka,  obrázek,  graf  nebo  prostý  text.  Controller     je  část  MVC  architektury,  která  přijímá  vstup  od  uživatele  a  převádí  ho  na  příkazy   zpracovávané  modelem  nebo  view.  

 

47  

Obr.  10 Schéma  spolupráce  jednotlivých  částí  MVC  architektury  [zdroj:   http://upload.wikimedia.org/wikipedia/commons/a/a0/MVC-­‐Process.svg]  

5.4.5

ZURB  Foundation  

Další  druh  frameworku,  který  je  potřeba  vybrat,  je  framework  prezentační  vrstvy  –   tedy  HTML  a  CSS  framework.   CSS  frameworky  se  používají  zejména  z  následujících  důvodů  [22]:   • jsou  otestovány  na  všech  majoritních  prohlížečích,  včetně  mobilních  zařízení,   • jsou  responsivní,   • obsahují  množství  předdefinovaných  komponent,   • předdefinovaná  typografie,   • využívají  mřížkový  systém,   • jsou  jednoduše  přizpůsobitelné.     CSS   Frameworky   se   dají   rozdělit   do   dvou   hlavních   skupin   –   jednoduché   frameworky   a   kompletní   frameworky.   Jednoduché   frameworky   se   někdy   také   označují   pouze   jako   mřížkové   systémy.   Většinou   poskytují   pouze   styly   potřebné   k  vytvoření   mřížkového   (ať   už   flexibilního   či   statického)   návrhu.   Všechny   ostatní   komponenty   a   prvky   stránky   se   potom   musí   tvořit   od   základu.   Oproti   tomu   kompletní   frameworky   nabízí,   jak   název   napovídá,   kompletní   a   přizpůsobitelné   řešení.   Toto   řešení   obsahuje   předdefinovanou   typografii,   formuláře,   tlačítka,   ikony   a  znovupoužitelné  komponenty  –  navigace,  modální  okna,  obrázkové  galerie  a  jiné   [22].     Rozhodl   jsem   se   použít   jeden   z   kompletních   frameworků,   protože   tím   odpadá   zbytečný   čas   strávený   testováním   uživatelského   rozhraní   na   všech   dostupných   prohlížečích,   včetně   mobilních   telefonů   a   také   kvůli   právě   již   předem   předdefinovaným   komponentám,   které   jsou   již   implementovány   jako   best-­‐ practice.  

48  

 

Mezi   dva   hlavní   zástupce   CSS   frameworků   patří   Twitter   Bootstrap   a   ZURB   Foundation,  patřící  právě  do  kategorie  kompletních  frameworků  [21].   Základní  rozdíly  mezi  těmito  dvěma  frameworky  jsou  uvedeny  v  tabulce  níže.     Oranžově  jsou  vyznačeny  ty,  které  mají  největší  prioritu  při  psaní  této  práce  [34].     Twitter  Bootstrap   ZURB  Foundation   Omezené  množství  předdefinovaných   prvků  

Téměř  všechny  možné  předdefinované   prvky  

Používá  relativní  jednotky  pro  určení   rozměrů  

Používá  pixely  pro  určení  rozměrů  

Používá  flexibilní  mřížkový  systém  

Použivá  předdefinovaný  mřížkový   systém  (určuje  hranice  přechodu)  

Používá  mobile-­‐first  přístup  

Používá  mobile-­‐also  přístup  

Menší  komunita  než  Twitter  Bootstrap   Větší  komunita  než  ZURB  Foundation   Tab.  2

Hlavní  rozdíly  mezi  CSS  frameworky  ZURB  Foundation  a  Twitter  Bootstrap  

Mobile-­‐first   přístup   v   případě   Foundation   frameworku   znamená,   že   cokoliv,   co   nemá   explicitně   určený   rozměr   je   považováno   za   mobilní   komponentu.     Mobile-­‐also   přístup   znamená,   že   je   možné   vytvořit   mobilní   verzi   uživatelského   rozhraní,   ale   je   potřeba   specifikovat   hranice   jednotlivých   rozměrů   pro   různá   zařízení.   U   desktop-­‐first   přístupu   bývá   zpravidla   obtížné   poskládat   obsah   na   menších   obrazovkách,   zatímco   mobile-­‐first   přístup   pomáhá   zaměřit   se   na   důležité   části   obsahu   pro   uživatele,   neboť   se   uživatelské   rozhraní   tvoří   směrem   od   malých   rozlišení  k  větším  [34].   Dle   předchozí   tabulky   má   více   kladných   položek   framework   Foundation   a  bude  proto  použit  při  tvorbě  uživatelského  rozhraní.     5.4.6

Express.js  

Protože   Node.js   nabízí   nízko   úrovňové   aplikační   programové   rozhraní,   je   vhodné   použít   nějaký   framework,   který   k   tomuto   pomocí   určité   úrovně   abstrakce   implementuje  zjednodušený  přístup.   Pro   tyto   účely   použiji   flexibilní   framework   Express.js,   který   je   nejen   podle   serveru  designzum.com  nejpopulárnější  a  nejpoužívanější  framework  pro  Node.js   [36].   Express.js   nabízí   robustní   rozhraní   pro   vývojáře,   pomocí   kterého   mohou   vytvářet  jednostránkové,  mnohostránkové  i  hybridní  aplikace  [36][37].  

 

5.4.7

49  

PeerJS  

Z   důvodu   sjednocení   kompatibility   implementace   WebRTC   napříč   prohlížeči   použiji   knihovnu   PeerJS,   která   nabízí   jednotné   rozhraní   k   tomuto   jinak   skrz   prohlížeče  rozdílnému  rozhraní.   Knihovna  poskytuje  kompletní,  konfigurovatelné  a  na  použití  jednoduché  API   pro  peer-­‐to-­‐peer  spojení.  Pouze  pomocí  identifikátoru  může  uživatel  vytvořit  peer-­‐ to-­‐peer  datové  nebo  mediální  spojení  s  jiným  uživatelem  [38].   5.4.8

Ostatní  

V  aplikaci   bude   kromě   výše   zmíněných   frameworků   použito   mnoho   dalších   malých   knihoven.   Knihovny   třetích   stran   budou   použity   zejména   proto,   protože   řeší   nekompatibilitu   napříč   prohlížeči   a   nabízejí   již   hotové   a   otestované   řešení   velkou   skupinou   uživatelů.   Jedná   se   zejména   o   knihovny,   které   vylepšují   uživatelské   prostředí   například   automatickým   odchytáváním   AJAXových   požadavků   a   vizualizací   progresu   těchto   požadavků   –   tj.   informování   uživatele   o  stavu   načítání   na   stránce.   A   dále   o   knihovny,   které   zjednodušují   práci   a  sjednocují   rozhraní   při   práci   s  běžnými   datovými   strukturami,   zejména   v  javascriptu.   Mezi   tyto   knihovny   patří   například   jQuery,   underscore.js,   HubSpot   –   pace.js,   HubSpot   –   messenger.js,   Moment.js,   responsive-­‐tables.js,   Google   Maps,   HubSpot   -­‐   offline.js.  

5.5

Propojení  jednotlivých  technologií  

Na   následujícím   obrázku   je   znázorněno   propojení   jednotlivých   komponent   aplikace,   jinak   také   nazýváno   diagram   spolupráce.   Bílé   obdélníky   znázorňují   technologie,   malým   tučným   písmem   u   těchto   obdélníků   jsou   vyjmenovány   nedůležitější  frameworky  a  knihovny  pro  danou  technologii.      

50  

Obr.  11

5.6

 

Diagram  spolupráce,  propojení  jednotlivých  technologií  aplikace  

Entitně-­‐relační  diagram  

Entitně-­‐relační  diagram  je  vytvořen  na  základě  specifikace  diagramu  případů  užití.   V  diagramu   jsou   naznačeny   kardinality   vztahů.   ER   diagram   obsahuje   dva   druhy   relací   mezi   tabulkami   –   identifikující   relaci   (vyznačená   plnou   čárou   mezi   dvěma   tabulkami)   a   neidentifikující   relaci   (vyznačená   přerušenou   čárou   mezi   dvěma   tabulkami).  U  identifikující  relace  závislá  entita  přebírá  klíčový  atribut  nadřazené   entity   jako   součást   svého   primárního   klíče.   ER   diagram   je   rozdělen   na   tři   logické   části   –   část   zabývající   se   komunikací   mezi   uživateli,   část   zabývající   se   tabulkami  

 

51  

obsahující   číselníky   a   část   zabývající   uživatelskými   profily   a   jejich   nastavením.   Diagram  je  obsažen  v  příloze  [A].   5.6.1

Popis  tabulek  

Tabulka  profiles   • credential_id  –  primární  klíč  tabulky   • date_of_birth  –  datum  narození  uživatele   • firstname  –  křestní  jméno  uživatele   • surname  –  příjmení  uživatele   • sex  –  pohlaví  uživatele   • country_id  –  cizí  klíč  do  tabulky  zemí  (země  pobytu  uživatele)   • city  –  město  pobytu  uživatele   • communication_interests  –  komunikační  zájmy  uživatele   • profile_hash  –  hash  uživatelského  profilu   • description  –  popis  uživatele     Tabulka  credentials   • id  –  primární  klíč  tabulky   • email  –  email  účtu   • salt  –  salt8  účtu   • password  –  heslo  účtu  (hash9)   • registered_date  –  datum  registrace  účtu   • last_logged_in  –  poslední  přihlášení  účtu   • approved  –  příznak,  jestli  je  účet  aktivován   • blocked  –  příznak,  jestli  je  účet  zablokován     Tabulka  favorites   • id  –  primární  klíč  tabulky   • credential_id   –   cizí   klíč   do   tabulky   uživatelů   (id   uživatele,   který   eviduje   záznam  oblíbeného  uživatele)   • favorite_credential_id   –   cizí   klíč   do   tabulky   uživatelů   (id   uživatele,   který   byl   přidán  do  oblíbených  uživatelů)     Tabulka  forgotten_password_requests   • id  –  primární  klíč  tabulky   • credential_id  –  cizí  klíč  do  tabulky  účtů  (účet,  který  žádá  o  vytvoření  nového   hesla)   • hash  –  hash  požadavku   • date_created  –  datum  vytvoření  požadavku  na  změnu  hesla     8  několik  náhodných  bitů,  které  slouží  jako  doplňující  vstup  při  použití  jednocestné  funkce   9  algoritmus  mapující  data  libovolné  délky  na  data  fixní  délky  

52  

 

  Tabulka  profile_geolocations   • id  –  primární  klíč  tabulky   • credential_id  –  cizí  klíč  do  tabulky  uživatelů   • lat  –  zeměpisná  šířka   • lon  –  zeměpisná  délka     Tabulka  profile_knows_languages   • id  –  primární  klíč  tabulky   • language_id  –  cizí  klíč  do  tabulky  jazyků  (cizí  jazyk,  který    uživatel  zná)   • credential_id  –  cizí  klíč  do  tabulky  uživatelů  (uživatel,  který  zná  cizí  jazyk)     Tabulka  profile_wants_languages   • id  –  primární  klíč  tabulky   • language_id   –   cizí   klíč   do   tabulky   jazyků   (cizí   jazyk,   který   chce   uživatel   umět)   • credential_id  –  cizí  klíč  do  tabulky  uživatelů  (uživatel,  který  chce  cizí  jazyk   umět)     Tabulka  profile_pictures   • id  –  primární  klíč  tabulky   • credential_id   –   cizí   klíč   do   tabulky   uživatelů   (uživatel,   kterému   obrázek   náleží)   • name  –  název  obrázku   • priority  –  priorita  obrázku     Tabulka  countries   • id  –  primární  klíč  tabulky   • code  –  kód  země   • name  –  název  země   • continent_name  –  název  kontinentu   • continent_code  –  kód  kontinentu     Tabulka  languages   • id  –  primární  klíč  tabulky   • language  –  název  jazyka   • code  –  kod  jazyka     Tabulka  messages   • id  –  primární  klíč  tabulky   • subject  –  předmět  zprávy   • content  –  obsah  zprávy   • read  –  příznak  přečtení/nepřečtení  zprávy  

 

53  

• • • • •

date_sent  –  datum  odeslání  zprávy   author_credential_id  –  cizí  klíč  do  tabulky  uživatelů  (uživatel,  který  zprávu   odeslal)   recipient_credential_id   –   cizí   klíč   do   tabulky   uživatelů   (uživatel,   který   zprávu  přijal)   deleted_author  –  příznak  smazání  zprávy  autorem   deleted_recipient  –  příznak  smazání  zprávy  příjemcem  

  Tabulka  chats   • id  –  primární  klíč  tabulky   • content  –  obsah  zprávy   • date_sent  –  datum  odeslání  zprávy   • author_credential_id  –  cizí  klíč  do  tabulky  uživatelů  (uživatel,  který  zprávu   odeslal)   • recipient_credential_id   –   cizí   klíč   do   tabulky   uživatelů   (uživatel,   který   zprávu  přijal)  

5.7

Adresářová  struktura  

Adresářová  struktura  aplikace  je  předem  daná,  protože  použité  frameworky  Nette   a   Angular.js   používají  předem   vytvořenou   a   doporučenou   adresářovou   strukturu.   Aplikace  je  rozdělena  do  složek  a  každá  složka  obsahuje  soubory  skriptů  určitého   typu.  V  uvedeném  seznamu  u  jednotlivých  složek  uvedu,  k  čemu  slouží.       • app  –  obsahuje  zaváděcí  soubor  části  aplikace  napsané  v  Nette  frameworku   • AdminModule  –  modul  administrace   • presenters  –  presentery  modulu   • templates  –  šablony  modulu   • ApiModule   –   modul   API   –   část   aplikace,   s  kterou   komunikuje   tlustý   klient   (přijímá  a  odesílá  požadavky)     • presenters  –  presentery  modulu   • config  –  konfigurační  soubory  Nette  frameworku   • lib  –  vlastní  podpůrné  knihovny  v  PHP   • model   –   soubory   pro   komunikaci   s  databází,   obsahuje   většinu   business   logiky  aplikace   • router  –  mapování  url  adres  na  moduly  a  presentery  v  aplikaci   • libs   –   knihovny   potřebné   pro   běh   aplikace,   zejména   Nette   framework   a  databázová  vrstva  dibi   • log  –  složka  pro  logování  chyb   • node  –  složka  obsahující  soubory  Node.js  serveru     • temp  –  složka  s  dočasnými  soubory  Nette  frameworku   • cache   –   obsahuje   zpravidla   vygenerované   třídy   na   základě   konfiguračního   souboru  

54  

 

• www  –  část  aplikace  dostupná  z  prostředí  webového  prohlížeče   • admin_res  –  soubory  stylů  a  javascriptu  pro  administrační  část  aplikace   • files  –  nahrané  soubory  uživateli  aplikace   • pictures  –  profilové  fotky  uživatelů  aplikace   • frontend  –  uživatelská  část  aplikace,  tlustý  klient   • app   • components  –  komponenty  uživatelské  části  aplikace   • images  –  obrázky  uživatelského  rozhraní   • scripts   –   složka   s  vlastní   logikou   aplikace,   obsahuje   konfigurační   soubor  uživatelské  části  aplikace   • controllers  –  controllery  uživatelské  části  aplikace   • core  –  soubor  s  nastavením  některých  knihoven   • directives  –  direktivy  uživatelské  části  aplikace   • filters  –  filtry  uživatelské  části  aplikace   • modules  –  moduly  uživatelské  části  aplikace   • services  –  služby  uživatelské  části  aplikace   • styles  –  definice  stylů,  vzhled  uživatelské  části  aplikace   • views  –  šablony  uživatelské  části  aplikace   • pages  –  šablony  statických  stránek  aplikace  

 

55  

6 Implementace   V   této   kapitole   se   zaměřím   na   popis   implementace   aplikace.   Postupně   budu   rozebírat   jednotlivé   vytvořené   stránky   webového   portálu   a   jejich   použití.   K  nejdůležitějším   stránkám   aplikace   přiložím   obrázky   znázorňující   uživatelské   rozhraní.     Po  popisu  jednotlivých  stránek  aplikace  se  zaměřím  na  klíčové  části  aplikace   a  vysvětlím   princip   jejich   fungování   s  ukázkou   zdrojového   kódu   z  vytvořené   aplikace.  

6.1

Obecný  layout  

Layout  aplikace  je  rozdělen  na  tři  logické  celky   –  hlavička,  obsahová  část  a  patička   aplikace.   6.1.1

Hlavička  webu  

Hlavička  aplikace  je  složena  ze  dvou  částí.  První  –  černá  část  -­‐  má  fixní  pozici  a  je   pro   uživatele   viditelná   v  jakémkoliv   okamžiku   při   procházení   aplikací.   Obsahuje   název   aplikace,   počet   právě   přítomných   uživatelů   v  aplikaci   a   počet   právě   přihlášených   uživatelů   do   aplikace.   Počítadla   uživatelů   jsou   implementována   pomocí  socketové  komunikace  a  jsou  aktualizována  v  reálném  čase.  Dále  fixní  část   hlavičky  obsahuje  rozcestník  do  jednotlivých  částí  aplikace.   Pod  černou  fixní  částí  hlavičky  se  nachází  prostor  s  logem  aplikace  a  tlačítko   pro  přihlášení.  

Obr.  12

Hlavička  nepřihlášeného  uživatele  

V  případě   přihlášeného   uživatele   je   část   s  tlačítkem   pro   přihlášení   nahrazena   jménem  přihlášeného  uživatele  a  dvěma  odkazy:   • My   Account   –   rozbalí   nabídku   s  třemi   možnostmi   –   Settings   (nastavení   uživatelského   profilu),   Favorites   (oblíbení   uživatelé),   Notepad   (poznámkový   blok),   • N   unread   messages   -­‐   odkaz   pro   vstup   do   sekce   se   soukromými   zprávami.   V  pravé  části  potom  profilová  fotografie  uživatele.     Ve  fixní  části  hlavičky  je  nyní  zobrazena  položka  pro  odhlášení  se  z  aplikace.  

56  

 

Obr.  13

Hlavička  přihlášeného  uživatele  

6.1.2

Patička  webu  

Patička   aplikace   obsahuje   ve   svojí   prostřední   části   ovládací   prvky   pro   změnu   lokalizace   aplikace.   Změna   jazyka   je   instantní   bez   obnovení   stránky   aplikace.   Při   kliknutí   na   libovolný   jazyk   jsou   všechny   textové   řetězce   na   stránce   znovu   interpolovány   a   zvolený   jazyk   je   uložen   do   cookie   proměnné   v  prohlížeči   jako   preferovaný,  aby  se  při  příští  návštěvě  tento  automaticky  zvolil.  

Obr.  14

6.2

Patička  aplikace  

Hlavní  strana  

Vstupním  bodem  do  celé  aplikace  je  jako  u  většiny  webových  stránek  hlavní  strana.     Na   hlavní   straně   se   v   horní   části   obsahové   sekce   nachází   mapa   implementovaná   pomocí   map   od   společnosti   Google   –   přesněji   Google   Maps   API.   Na   mapě   jsou   zobrazeni   všichni   právě   připojení   uživatelé   (přihlášení   i  nepřihlášení).   Jednotliví   uživatelé   jsou   zobrazeni   formou   připínáčku   (pinu)   a  po  kliku   na   tento   pin   se   zobrazí   informační   bublina   s   jedním   z   následujících   obsahů:   • „This  is  YOU“  -­‐  pin  na  který  bylo  kliknuto  patří  mně  s  možností  přesměrování   do  detailu  mého  profilu,   • Jméno  uživatele  –  jméno  přihlášeného  uživatele  s  možností  přesměrování  do   detailu  jejich  profilu,   • „anonymous“  -­‐  nepřihlášený  uživatel     Mapa  obsahuje  standartní  ovládací  prvky  –  tj.  pohyb  po  mapě  přetahováním  myši,   přiblížení,  oddálení,  přepnutí  typu  zobrazení  mapy.     Pod   mapou   je   obsahová   část,   která   slouží   k   základnímu   seznámení   nově   příchozích  uživatelů  s  účelem  aplikace.  

 

Obr.  15

 

57  

Hlavní  strana  aplikace  

58  

6.3

 

Přihlášení  uživatele  

Stránka   přihlášení   obsahuje   dva   sloupce.   V  levém   sloupci   je   formulář   pro   přihlášení.  Obsahuje  dvě  povinná  textová  pole:   • Login  –  email,  který  uživatel  zadal  při  registraci,   • Password  -­‐  heslo  uživatele.     V  pravém  sloupci  jsou  dvě  tlačítka:   • Register  –  slouží  pro  přechod  do  stránky  s  registračním  formulářem,   • Reset   password   –   slouží   pro   přechod   do   stránky   s  formulářem   pro   zaslání   požadavku  na  reset  hesla,  pokud  jej  uživatel  zapomene.  

6.4

Registrace  uživatele  

Stránka  registrace  uživatele  obsahuje  pouze  tři  textová  pole:   • email  uživatele  -­‐  bude  sloužit  jako  přihlašovací  jméno,   • heslo   • kontrolu  hesla.     Všechny   položky   jsou   povinné.   Po   vyplnění   formuláře   je   uživateli   odeslán   email   obsahující   odkaz   pro   potvrzení   registrace.   Dokud   uživatel   nepotvrdí   svoji   registraci   kliknutím   na   tento   potvrzovací   odkaz,   nelze   se   zvolenou   kombinací   emailu  a  hesla  do  aplikace  přihlásit.     Příchozí  email  obsahuje  odkaz  ve  tvaru  /registration-confirm/[hash požadavku].   Pro   každý   jednotlivý   požadavek   o   potvrzení   registrace   je  vygenerován   hash   tohoto   požadavku,   aby   nebylo   možné   zaregistrovat   neexistující   emailové   adresy   a   požadavky   na   potvrzení   těchto   emailových   adres   potom   podle   nějaké   vzoru   náhodně   zadávat   do   prohlížeče   a   potvrzovat   tím   tak   neexistující  emailové  adresy.  

6.5

Reset  hesla  uživatele  

Může  se  stát,  že  se  uživateli  nedaří    do  aplikace  přihlásit,  protože  zapomněl  heslo.   Z  obrazovky   pro   přihlášení   se   uživatel   kliknutím   na   tlačítko   Reset   password   dostane   na   stránku,   kde   je   formulář   s  jedním   textovým   polem   pro   zadání   emailu.   Uživatel   zadá   do   tohoto   textového   pole   svůj   email   a   stiskne   tlačítko   Reset   password.   Po   stisku   tlačítka   se   uživateli   zobrazí   informační   hláška,   že   mu   byl   odeslán   email,   ve   kterém   nalezne   odkaz   pro   pokračování   v  procesu   resetování   hesla.  Platnost  tohoto  požadavku  je  jedna  hodina.  Pokud  by  uživatel  na  odkaz  pro   změnu   hesla   klikl   po   více   jak   hodině,   je   informován   o   vypršení   platnosti   tohoto   požadavku  a  musí  žádost  o  změnu  hesla  odeslat  znovu.   Stejně   jako   v  případě   potvrzení   registrace   obsahuje   i   odkaz   pro   potvrzení   požadavku   na   reset   hesla   z  bezpečnostních   důvodů   hash   řetězec.   Po   kliknutí  

 

59  

na  tento   odkaz   je   uživatel   přesměrován   na   stránku   s  formulářem   obsahující   dvě   textová  pole.   • Your  new  password  –  pole  pro  zadání  nového  hesla  (minimálně  8  znaků),   • Your  new  password  again  –  pole  pro  zadání  kontroly  nového  hesla.   Po   odeslání   validního   formuláře   se   odešle   požadavek   na   změnu   hesla   a  uživatel   je   informován,   že   se   může   přihlásit   pomocí   nového   hesla.   Zároveň   je  přesměrován   na   hlavní   stranu   a   požadavek   na   změnu   hesla   je   odstraněn   ze  systému,  aby  nebylo  možné  tento  formulář  vyplňovat  opakovaně.  

6.6

Odhlášení  uživatele  

Odhlášení  uživatele  je  realizováno  pomocí  odkazu  Sign  out  ve  fixní  části  hlavičky.   Po   kliknutí   na   tento   odkaz   se   odešle   požadavek   na   PHP   server.   Server   následně   najde   v  Redis   databázi   záznam   příslušející   danému   uživateli   a   vymaže   informace   o  jeho  sezení10.  Po  vymazání  dat  z  databáze  posílá  server  klientovi  zpět  informaci   o  úspěšném   odhlášení.   Klientská   část   aplikace   tuto   informaci   přijme   a   pomocí   socketové   komunikace   vyvolá   událost   na   Node.js   serveru,   který   informuje   o  odhlášení  uživatele.  Node.js  server  tuto  událost  odchytí,  dekrementuje  počítadlo   aktuálně   přihlášených   uživatelů   a   vyvolá   událost,   která   je   odeslána   všem   připojeným   uživatelům.   Klienti   tuto   informaci   přijmou   a   aktualizují   hodnoty   v  počítadlech   připojených   a   přihlášených   uživatelů.   Zároveň   je   v  javascriptové   aplikaci   na   straně   klienta   vymazána   identita   uživatele,   čímž   je   proces   odhlášení   dokončen.  

6.7

Nastavení  uživatelského  účtu  

Nastavení   uživatelského   profilu   je   umístěno   v  hlavičce   aplikace   pod   odkazem   My   Account   –   Settings.   Nastavení   uživatelského   profilu   je   důležitá   část   aplikace,   neboť   podle   informací,   které   o   sobě   uživatel   vyplní   zvyšuje   nebo   snižuje   šanci,   že  ho  ostatní  uživatelé  hledající  jazykového  partnera,  naleznou.   Formulář  pro  nastavení  uživatelského  profilu  je  rozdělen  do  pěti  podsekcí:   • Personal  informations  -­‐  osobní  informace,   • Communication  interests  -­‐  komunikační  zájmy,   • Languages  you  know  –  jazyky,  které  uživatel  zná,   • Languages  you  want  to  know  –  jazyky,  které  uživatel  chce  znát,   • Change  your  profile  photo  –  změna  profilové  fotografie.     Tento  formulář  je  jediným  místem  v  aplikaci,  který  po  uložení  změn  obnoví  okno   prohlížeče.   Obnovení   prohlížeče   se   provádí   po   úspěšném   uložení   nových   údajů   o  uživateli   proto,   že   se   nově   uložená   data   musí   promítnout   i   v  klientské   části   aplikace   a   je   bezpečnější   stránku   obnovit   a   nechat   si   poslat   nová   data   o   uživateli  

10  spojení  mezi  klientem  a  serverem,  zahrnující  výměnu  paketů  

60  

 

z  databáze,   než   ručně   tyto   nová   data   přiřazovat   v  klientské   části   aplikace.   Tím   je  zaručeno,  že  data  zobrazená  v  prohlížeči  jsou  identická  datům  v  databázi.  

Obr.  16

Nastavení  uživatelského  profilu  

6.7.1

Osobní  informace  

V  části  osobních  informací  uživatel  vyplňuje  základní  údaje  o  svojí  osobě.  Formulář   obsahuje  pole  pro  vyplnění  následujících  údajů:   • Firstname  –  jméno,   • Surname  –  příjmení,   • Sex  –  pohlaví,   • Date  of  Birth  -­‐  datum  narození,   • Country  –  stát,  v  kterém  uživatel  pobývá,   • City  –  město,  v  kterém  uživatel  pobývá,   • Tell  others  something  about  you  –  stručný  popis  uživatele.  

 

6.7.2

61  

Komunikační  zájmy  

V  této  části  formuláře  má  uživatel  možnost  zaškrtnout  jednu  až  pět  možností,  které   se   týkají   jeho   komunikačních   zájmů,   resp.   jaký   způsob   jazykové   výměny   uživatel   hledá.  Tyto  možnosti  zahrnují:   • Email  –  dopisování  prostřednictvím  emailu,   • Audio  –  hlasová  komunikace,   • Chat  –  psaná  komunikace  formou  chatu,   • Video  –  obrazová  a  hlasová  komunikace,   • Personal  –  osobní  setkání.     Kromě   toho,   že   výběr   těchto   pěti   položek   ovlivňuje   zobrazení   uživatele   ve  výsledcích   vyhledávání,   ovlivňuje   přímo   také   zobrazení   tlačítek   pro   zahájení   hlasové   komunikace,   video   komunikace   nebo   chatové   komunikace   přímo   na  stránce  detailu  profilu  uživatele.   6.7.3

Jazyky,  které  uživatel  zná  

V  této   části   formuláře   uživatel   vybírá   ze   seznamu   jazyky,   kterými   je   schopen   komunikovat,   tedy   jazyky   které   nabízí   k  jazykové   výměně.   Po   vybrání   jazyku   z  rolovací  nabídky  je  jazyk  přidán  v  podobě  štítku  pod  tuto  nabídku.   6.7.4

Jazyky,  které  uživatel  chce  znát  

V  této   části   formuláře   uživatel   vybírá   ze   seznamu   jazyky,   které   by   se   rád   pomocí   jazykové  výměny  naučil.  Po  vybrání  jazyku  z  rolovací  nabídky  je  jazyk,  stejně  jako   v  případě  jazyků,  které  uživatel  zná,  přidán  v  podobě  štítku  pod  tuto  nabídku.   6.7.5

Změna  profilové  fotografie  

Změna   profilové   fotografie   je   provedena   ihned   po   stisku   tlačítka   Choose   File   a  vybrání   obrázku.   Uživatel   je   následně   informován   o   tom,   že   jeho   profilová   fotografie   byla   změněna   a   že   pro   promítnutí   této   změny   v  prohlížeči   je   potřeba   obnovit  okno  aplikace.    

6.8

Oblíbení  uživatelé  

Sekce   oblíbených   uživatelů   je   umístěna   v  hlavičce   aplikace   pod   odkazem   My  Account   –   Favorites.   Uživatel   si   jiný   uživatelský   profil   může   uložit   do  oblíbených  například:   • když  ho  jiný  uživatelský  profil  zaujal  a  chce  se  k  němu  později  vrátit,  aby  mohl   s  uživatelem  navázat  komunikaci,   • když   s  nějakým   uživatelem   pravidelně   komunikuje   a   chce   k  jeho   profilu   mít   rychlý  přístup.  

62  

Obr.  17

 

Přehled  oblíbených  uživatelů  

Výpis  oblíbených  uživatelů  obsahuje  tři  sloupce:  profilovou  fotku  uživatele,  jméno   uživatel   s  možností   přesměrování   do   detailu   profilu   uživatele   a   možnost   odebrat   uživatele  z  oblíbených  uživatelů.      

6.9

Poznámkový  blok  

V  aplikaci   je   implementovaný   poznámkový   blok,   který   slouží   uživatelům   k  vytváření   vlastních   poznámek.   Uživatel   si   může   do   poznámkového   bloku   zaznamenávat  nově  získanou  slovní  zásobu,  poznámky  ke  gramatice,  větné  spojení   a  fráze  nebo  odkazy  na  externí  zdroje  při  studiu  jazyka.   V  implementaci   poznámkového   bloku   je   použit   jednoduchý   WYSIWYG11   editor,  který  umožňuje  základní  formátování  textu  –  šest  úrovní  nadpisů,  odstavce,   citace,   tučný   text,   kurzíva,   podtržený   text,   číslovaný   a   nečíslovaný   seznam,   zarovnání  textu,  odkazy  a  další.   Poznámkový   blok   v  intervalu   tří   vteřin   kontroluje,   zda   se   data   v  textové   oblasti   změnila.   Pokud   ano,   odešle   na   server   společně   s  obsahem   textové   oblasti   požadavek  o  uložení  dat  do  databáze.     Textová  oblast  je  do  určité  fáze  natahovací,  aby  zabírala  co  nejméně  místa.  Při   překročení  výšky  600px  se  zobrazí  vertikální  posuvník.  

11  What  You  See  Is  What  You  Get  

 

Obr.  18

63  

Poznámkový  blok  

6.10 Přehled  soukromých  zpráv   Přehled   zpráv   je   implementovaný   tabulkovým   výpisem.   Celkem   obsahuje   pět   sloupců,  které  obsahují:   • ikonu  šipky  vlevo  (odchozí  zpráva)  nebo  ikonu  šipky  vpravo  (příchozí  zpráva)   a  stáří  zprávy,   • předmět  zprávy,   • kdo   soukromou   zprávu   odeslal   nebo   komu   byla   soukromá   zpráva   odeslána   s  možností  přesměrování  do  detailu  profilu,   • příznak,  jestli  byla  zpráva  příjemcem  přečtena  či  nikoliv,   • ovládací  prvky  pro  zobrazení  zprávy  a  pro  smazání  zprávy.     Smazání  zprávy  je  implementováno  metodou  soft  delete,  což  znamená,  že  zpráva   není   fyzicky   smazána   z  databáze,   pouze   je   u   ní   nastaven   příznak   deleted_author  nebo  deleted_recipient  na  pravdivou  hodnotu.  To  kvůli   tomu,   pokud   se   jeden   ze  zúčastněných   této   konverzace   rozhodne   zprávu   smazat,   tak   se   musí   smazat   pouze   a   právě   jemu,   nikoliv   však   druhému   uživateli.   Pokud   příjemce   i   odesílatel   zprávu   označí   za   smazanou,   není   již   nadále   viditelná,   ale  fyzicky  v  databázi  stále  existuje.   Stránkování   je   nastaveno   na   deset   položek   na   každou   stránku,   jedná   se   však   pouze  o  proměnnou,  která  se  dá  kdykoliv  přizpůsobit.  

64  

Obr.  19

 

Přehled  soukromých  zpráv  

Detail   příchozí   i   odchozí   zprávy   se   objevuje   v  modálním12   okně.   Pokud   se   jedná   o  příchozí   zprávu,   je   ve   spodní   části   okna   zobrazen   formulář   pro   okamžitou   odpověď  na  tuto  zprávu.  

Obr.  20

Detail  příchozí  soukromé  zprávy  

 

12   okno   zobrazené   nejblíže   k   uživateli,   před   pokračováním   používání   aplikace   je   nutno   modální  

okno  zavřít  

 

65  

6.11 Vyhledávání  jazykových  partnerů   Jednou   z  nejdůležitějších   stránek   v  této   aplikace   je   vyhledávání   jazykových   partnerů.     Tato   část   aplikace   je   dostupná   jak   přihlášeným   tak   i   nepřihlášeným   uživatelům.  Nepřihlášení  uživatelé  však  neuvidí  položku  Search  in  radius,  neboť   její  funkčnost  využívá  data  přihlášeného  uživatele.  

Obr.  21

Formulář  pro  vyhledávání  jazykových  partnerů  

Do   formuláře   se   vyplňují   informace   a   vlastnosti,   které   požadujeme   po  hledaném   partnerovi.  Formulář  obsahuje  následující  položky:   • Known   language   –   jazyk,   který   hledaný   partner   zná   –   tj.   jazyk,   který   se   chci   naučit,   • Wanted   language   –   jazyk,   který   se   hledaný   partner   chce   naučit   –   tj.   jazyk,   který  umím,   • Country  –  Stát,  ve  kterém  se  partner  nachází,   • Age   –   věk   jazykového   partnera,   je   možné   vyplnit   obě   hranice   nebo   pouze   horní  či  dolní  hranici,     • Sex  –  pohlaví  hledaného  partnera,  výchozí  hodnota  jsou  obě  pohlaví,   • Has   profile   picture   –   příznak,   jestli   hledáme   profil   s  vloženou   profilovou   fotkou,  

66  

 

• Available   for   –   jak   chce   hledaný   partner   komunikovat,   lze   vybrat   libovolné   množství  voleb,  minimálně  však  jednu:   • Email  –  hledaný  partner  chce  komunikovat  prostřednictvím  emailu,   • Audio  –  hledaný  partner  chce  komunikovat  pomocí  hlasové  komunikace,   • Chat  –  hledaný  partner  chce  chatovat,   • Video  –  hledaný  partner  chce  komunikovat  pomocí  obrazové  komunikace,   • Personal  –  hledaný  partner  chce  komunikovat  při  osobním  setkání,   • Search  in  radius  –  hledat  uživatele  v  určité  vzdálenosti  od  mojí  polohy,  pokud   není  zadána  žádná  hodnota  nebo  zadaná  hodnota  není  validní  (záporné  číslo,   nenumerický  znak)  svítí  napravo  od  textového  pole  prázdné  červené  kolečko.   Pokud  je  hodnota  vyplněna  a  je  validní,  svítí  vedle  textového  pole  zelené  plné   kolečko.    

Obr.  22

Ukázka  špatně  a  dobře  vyplněného  textového  pole  radius  

Pro   odeslání   formuláře   a   zobrazení   výsledků   hledání   slouží   velké   potvrzovací   tlačítko  Search.  

6.12 Výsledky  vyhledávání  jazykových  partnerů   Výsledky   vyhledávání   jsou   zobrazeny   formou   tabulky.   Tabulka   se   skládá   z  devíti   sloupců:   • Name  –  jméno  a  příjmení  jazykového  partnera,   • Picture   –   profilová   fotka   jazykového   partnera,   případně   zástupný   obrázek,   pokud  profilová  fotka  nebyla  nahrána,   • Country  –  stát,  ve  kterém  se  jazykový  partner  nachází,   • City  –  město,  ve  kterém  se  jazykový  partner  nachází,   • Age  –  věk  jazykového  partnera,   • Sex  –  pohlaví  jazykového  partnera,   • Available   for   –   druhy   komunikace,   kterými   chce   jazykový   partner   komunikovat,   • Speaks  –  jazyky,  kterými  jazykový  partner  hovoří,   • Wants  to  speak  –  jazyky,  kterými  chce  jazykový  partner  hovořit.     Ve  sloupci  name,  kde  je  jméno  a  příjmení  jazykového  partnera,  je  možné  kliknutím   na   toto   jméno   otevřít   detail   profilu   tohoto   uživatele.   Pokud   má   tento   uživatel  

 

67  

povolené   zjištění   geolokace   pomocí   prohlížeče   a   tento   údaj   je   uložen   v  databázi,   je  vedle  jména  zobrazena  malá  ikonka  symbolizující  bod  na  mapě.     Pod   tabulkou   výsledků   vyhledávání   je   zobrazena   mapa,   která   je  implementována   pomocí   Google   Maps   API.   Uživatelé,   kteří   mají   zapnutou   detekci  geolokace  v  prohlížeči  a  jsou  obsaženi  v  tabulce  výsledků  vyhledávání,  jsou   na  této  mapě  zobrazeni.   Aby   bylo   možné   zjistit,   který   bod   na   mapě   náleží   kterému   uživateli,   zobrazí   se  po   kliku   na   tento   bod   informační   bublina   se   jménem   uživatele.   Toto   jméno,   stejně   jako   ve   výsledcích   vyhledávání,   slouží   jako   odkaz   do   detailu   profilu   tohoto   uživatele.   V  mapě   je   možné   pohybovat   se   všemi   směry,   přibližovat   mapu,   oddalovat  mapu  nebo  přepnout  styl  zobrazení  na  satelitní  snímek.    

Obr.  23

Ukázka  výsledků  vyhledávání  jazykových  partnerů  

6.13 Detail  profilu   Stránka  detailu  profilu  obsahuje  kompletní  dostupné  informace  o  uživateli.  Kromě   toho  obsahuje  také  důležité  ovládací  prvky  pro  zahájení  komunikace.   V  levém   horním   rohu   detailu   profilu   je   hvězda,   která   slouží   jako   tlačítko   pro   uložení   profilu   mezi   oblíbené   profily.   Pokud   profil   není   uložen   mezi   oblíbenými,  

68  

 

je  hvězda   bílá   se   světle   žlutým   okrajem.   Pokud   profil   je   uložen   mezi   oblíbenými,   je  hvězda  sytě  žlutá.   V  pravé   části   záhlaví   profilu   je   text,   který   udává,   kdy   byl   uživatel   naposledy   aktivní,   případně   informuje,   že   uživatel   právě   aktivní   je.   V  levé   části   profilu   je  zobrazena   profilová   fotografie,   případně   zástupný   obrázek,   pokud   profilová   fotografie   chybí.   Vedle   fotografie   je   zobrazen   krátký   popis,   který   o   sobě   uživatel   vyplnil  a  blíže  popisuje  tohoto  uživatele.   Ve  spodní  části  profilu  jsou  dvě  tabulky,  které  obsahují  následující  položky:   • Name  –  jméno  a  příjmení  uživatele,   • Sex  –  pohlaví  uživatele,   • Age  –  věk  uživatele,   • Country  –  stát,  ve  kterém  se  jazykový  partner  nachází,   • City  –  město,  ve  kterém  se  jazykový  partner  nachází,   • Member  since  –  kdy  se  uživatel  zaregistroval  do  systému,   • Communication  interests  –  komunikační  zájmy  uživatele,   • Known  languages  –  jazyky,  které  uživatel  zná,   • Wants  to  know  languages  –  jazyky,  které  chce  uživatel  znát.     V  pravé  spodní  části  profilu  se  zobrazují  až  4  tlačítka:   • Send   message   –   otevře   modální   okno   s  formulářem   pro   odeslání   soukromé   zprávy,   • Start  chat  –  otevře  modální  okno  se  všemi  chatovými  komunikacemi,   • Start  video  chat  –  otevře  modální  okno  a  zahájí  video  komunikaci,   • Start  audio  chat  –  otevře  modální  okno  a  zahájí  audio  komunikaci.     Viditelnost   tlačítek   Start   chat,   Start   video   chat   a   Start   audio   chat   je   závislá   na  dvou  faktorech:   • jestli  má  přihlášený  návštěvník  profilu  povolený  konkrétní  druh  komunikace,   • jestli  má  majitel  profilu  povolený  konkrétní  druh  komunikace.     Tlačítka   Start   video   chat   a   Start   audio   chat   navíc   mají   i   neaktivní   stav,   kdy   na   ně   nelze   kliknout.   Soukromou   zprávu   a   chatovou   zprávu   je   možné   poslat   i  nepřihlášenému   uživateli,   ale   pro   zahájení   video   komunikace   nebo   audio   komunikace  je  nutné,  aby  oba  zúčastnění  byli  online.  

 

Obr.  24

69  

Detail  profilu  uživatele  

6.14 Soukromá  zpráva   Kliknutím  na  tlačítko  Send  Message  v  detailu  profilu  uživatele  se  zobrazí  modální   okno   s  formulářem   pro   zaslání   soukromé   zprávy.   Tento   formulář   obsahuje   dvě   povinná  textová  pole:   • Subject  –  předmět  zprávy,   • Message  –  text  zprávy.     Soukromá  zpráva  se  odešle  tlačítkem  Send!  a  modální  okno  zmizí.    

 

70   Obr.  25

  Modální  okno  s  formulářem  pro  odeslání  soukromé  zprávy  

6.15 Chatová  komunikace   Chatová   komunikace   je   implementována   pomocí   socketové   komunikace   a  konverzace  se  ukládá  do  databáze.  Při  další  návštěvě  nebo  při  obnovení  stránky   má  uživatel  tím  pádem  v  každé  konverzaci  k  dispozici  kousek  předešlé  konverzace.   Po   stisku   tlačítka   Start   chat   se   celá   stránka   –   kromě   fixní   části   hlavičky   -­‐   překryje   poloprůhledným   bílým   pozadím.   Vpravo   nahoře   je   červené   kulaté   tlačítko,  kterým  se  toto  poloprůhledné  pozadí,  resp.  kontejner  pro  chatovací  okna,   skryje.   Chatovací   okna   se   vejdou   dvě   vedle   sebe,   další   se   potom   zobrazují   v  nových   řádcích  opět  po  dvou.  V  mobilním  zobrazení  se  zobrazuje  jedno  chatovací  okno  na   jeden  řádek.  Chatovací  okno  obsahuje:   • Miniaturu   profilové   fotky   nebo   zástupného   obrázku,   pokud   profilová   fotka   nebyla  nahrána,   • Jméno  uživatele,  které  slouží  i  jako  odkaz  do  detailu  uživatelského  profilu,   • ikonu   šipky   dolů,   která   slouží   k  přepnutí   chatu   do   zmenšeného   stavu,   ve  zmenšeném   stavu   je   ikona   nahrazena   šipkou   dolů   indikující   možnost   opakovaného  expandování  chatu,     • ikonu  křížku,  která  slouží  k  vypnutí  chatu  s  daným  uživatelem.  

Obr.  26

Obrazovka  s  chatovou  komunikací  

Pokud   uživatel   opustí   aplikaci   se   zobrazeným   poloprůhledným   pozadím   a  chatovou   komunikací,   při   další   návštěvě   se   mu   aplikace   opět   načte   s  otevřenou   chatovou  komunikací.  

 

Obr.  27

71  

Tlačítko  pro  otevření  aktivních  chat  konverzací  

Pokud   je   oblast   s  chatovacími   okny   zavřená,   v  pravém   spodním   rohu   aplikace   se   zobrazuje   zelené   tlačítko   s  ikonou   a   v  závorce   s  počtem   otevřených   konverzací.   Klik  na  toto  tlačítko  opět  zobrazí  poloprůhledné  pozadí  s  chatovacími  okny.  

6.16 Video  komunikace   Jak   bylo   řečeno   v  návrhu   řešení,   video   komunikace   je   implementována   pomocí   WebRTC  technologie.   Po   stisku   aktivního   tlačítka   Start   video   chat   požádá   internetový   prohlížeč   uživatele   o   povolení   k  používání   webkamery   a   mikrofonu.   Jakmile   uživatel   potvrdí   tuto  výzvu,  objeví  se  modální  okno  obsahující:   • jméno  uživatele,  se  kterým  se  zahajuje  video  komunikace,   • v  pravé  části  video  se  zdrojem  obrazu  z  webkamery  volajícího,   • v  levé  části  místo  pro  zdroj  obrazu  z  webkamery  volaného,   • tlačítko  Hang  up  pro  ukončení  video  hovoru.     Na  straně  volaného  se  objeví  výzva  o  přijetí  příchozího  video   hovoru.  Volaný  může   tuto   výzvu   odmítnout   a   v  tomto   případě   se   hovor   ukončí.   Pokud   volaný   výzvu   potvrdí,   na   straně   volajícího   se   v  levé   části   zobrazí   video   se   zdrojem   obrazu   z  videokamery   volaného.   Na   straně   volaného   se   zobrazí   stejné   okno   jako   na   straně   volajícího  s  oběma  zdroji  videa.   Pokud  volaný  na  výzvu  neodpovídá,  je  po  dvaceti  vteřinách  pokus  o  navázání   spojení   automaticky   ukončen.   Pro   ukončení   hovoru   slouží   modré   tlačítko   Hang   up   ve  spodní  části  modálního  okna.  Po  ukončení  hovoru  jsou  obě  strany  informovány   o  ukončení  hovoru  a  modální  okno  se  uzavře.  

72  

Obr.  28

 

Modální  okno  se  zahájeným  video  hovorem  

6.17 Hlasová  komunikace   Hlasová   komunikace   je   stejně   jako   video   komunikace   implementována   pomocí   technologie  WebRTC.   Proces   zahájení   audio   hovoru   je   analogický   procesu   zahájení   video   hovoru   pouze   s  tím   rozdílem,   že   v  modálním   okně   nejsou   zobrazeny   obrazové   zdroje   z  videokamery.    

Obr.  29

Modální  okno  s  audio  hovorem  

6.18 Lokalizace  uživatelského  rozhraní   Aplikace   umožňuje   změnu   lokalizace.   Soubory   s   překlady   pro   různé   jazykové   mutace  jsou  uloženy  v  kořenové  složce  uživatelské  části  aplikace  a  mají  následující   tvar:   prefix   locale-   +   kód zvoleného jazyka   +   přípona   .json,   například   locale-en.json  nebo  locale-cs.json.   Tyto   soubory   obsahují   překlady   textových   řetězců   zapsaných   ve   formátu   JSON13.   Jako   výchozí   jazyk   aplikace   je   nastavený   anglický   jazyk.   Pokud   si   uživatel   13  Javascript  Object  Notation  

 

73  

přepne   lokalizaci   aplikace   například   na   český   jazyk   a   překlad   některého   řetězce   chybí,  použije  se  překlad  z  anglického  jazyka.     Ukázka  překladového  souboru:   {      "LAYOUT":  {          "HEADER":  {              "USERS_ONLINE":  "users  online",              "LOGGED_IN":  "logged  in",              "NAV":  {                  "HOMEPAGE":  "Homepage",                  "SEARCH_PEOPLE":  "Search  people",                  "HOW_TO":  "How  To",                  "FAQ":  "FAQ",                  "CONTACT":  "Contact",                  "SIGN_OUT":  "Sign  out"              }          }      }   }    

Pokud   potřebujeme   v  šabloně   vypsat   lokalizovaný   text,   například   Search   people   v  menu   aplikace,   získáme   jeho   hodnotu   jako   LAYOUT.HEADER.NAV.SEARCH_PEOPLE.   Tento   řetězec   potom   předáme   překladové  službě,  která  nalezne  správný  překlad  a  ten  vypíše.  

6.19 Responsivní  design   Uživatelské   rozhraní   je   implementováno   tak,   aby   se   dalo   pohodlně   používat   jak   na  normálním  počítači,  tak  na  tabletech  a  mobilních  zařízeních.  Responsivní  design   je   v  aplikaci   implementován   zejména   kvůli   tomu,   aby   se   zamezilo   zobrazování   horizontálního  posuvníku  a  celá  aplikace  se  tedy  ovládala  jednoduchým  posunem   po   obrazovce   pouze   ve   vertikálním   směru.   Aplikace   obsahuje   hodně   podstránek,   proto  zde  uvedu  pouze  pár  příkladů  responsivní  implementace  šablon.     Pro   tvorbu   uživatelského   rozhraní   je   použit   responsivní   framework   ZURB   Foundation,   jak   bylo   zmíněno   v  návrhu   řešení.   Základním   stavebním   kamenem   při   implementaci   responsivního   designu   pomocí   Foundation   je   používání   předdefinovaných  CSS  tříd.   V  aplikaci  je  použitý  12-­‐ti  sloupcový  layout,  tj.  šířka  jednoho  sloupce  odpovídá   1/12  šířce  stránky,  šířka  12-­‐ti  sloupců  odpovídá  plné  šířce  stránky.     Příklad  implementace  responsivního  odstavce  textu:    

 

74  

 

V  příkladu  zdrojového  kódu  zobrazeném  výše  jsou  důležité  tří  věci:   • small-12   –   na   mobilním   zařízení   bude   mít   blok   s  odstavcem   šířku   12-­‐ti   sloupců,  tedy  100%,   • medium-8   –   na   zařízeních   střední   velikosti   (např.   tablet)   bude   mít   blok   s  odstavcem  šířku  8/12  (čili  2/3)  celé  stránky,   • large-6  –  na  velkém  zařízení  bude  mít  sloupec  šířku  6/12  celé  stránky,  tedy   50%.   6.19.1

Responsivní  hlavička  aplikace  

Na   zařízení   se   širokou   obrazovkou   je   menu   ve   fixní   části   hlavičky   zobrazeno   horizontálně  v  řadě.    

Obr.  30

Hlavička  aplikace  na  zařízení  s  širokou  obrazovkou  

Na   mobilních   zařízeních   je   navigace   skrytá   a   rozevírá   se   pomocí   tlačítka   MENU   v  pravé   části   hlavičky.   Po   kliknutí   na   toto   tlačítko   se   zobrazí   vertikální   navigace   na  konci  s  počtem  online  a  přihlášených  uživatelů.    

Obr.  31

Hlavička  aplikace  na  zařízení  s  malou  obrazovkou  –  zavřené  menu  

Obr.  32

Hlavička  aplikace  na  zařízení  s  malou  obrazovkou  –  otevřené  menu  

6.19.2

Responsivita  stránky  vyhledávání  jazykového  partnera  

Stránka   vyhledávání   jazykového   partnera   je   na   širokém   zařízení   sestavenou   ze  dvou   sloupců,   kde   v  levém   sloupci   je   sekce   s  atributy   týkajících   se   jazykového   partnera   jako   takového   a   v  pravém   sloupci   komunikační   zájmy   jazykového   partnera  a  vzdálenost  v  jaké  chceme  od  naší  aktuální  polohy  vyhledávat.  

 

75  

V  mobilní   verzi   tohoto   vyhledávání   jsou   všechny   možnosti   seřazeny   do  jednoho  sloupce.    Textová  pole,  rozbalovací  nabídky  a  potvrzovací  tlačítko  jsou   roztaženy  přes  celou  šířku  obrazovky.  

Obr.  33

Mobilní  zobrazení  formuláře  pro  vyhledávání  jazykového  partnera  

Zobrazení   výsledků   vyhledávání   je   ponecháno   v  tabulkovém   zobrazení.   Tabulka   je  však   poměrně   široká   a   aby   bylo   možné   si   prohlédnout   všechna   data   ve   všech   sloupcích,   první   sloupec   tabulky   se   jménem   uživatele   je   nastaven   jako   fixní   a  v  dalších  sloupcích  se  dá  horizontálně  posouvat.    

Obr.  34

Responsivní  tabulka  výsledků  vyhledávání  

6.19.3

Responzivita  detailu  uživatelského  profilu  

Stránka   detailu   uživatelského   profilu   je   na   širokém   zařízení   ve   spodní   části   sestavenou  ze  dvou  sloupců.  Na  mobilním  zařízení  je  opět  celá  stránka  zobrazena   jako  jeden  sloupec  tak,  aby  bylo  zamezeno  horizontálnímu  posunu  obrazovky.  

76  

 

Obr.  35

Mobilní  zobrazení  detailu  uživatelského  profilu  

6.19.4

Ostatní  stránky  

Responsivita  všech  ostatních  stránek  aplikace  je  implementována  analogicky.  Tedy   tak,   aby   bylo   nutné   posunovat   obrazovku   pouze   ve   vertikálním   směru   a   aby   všechny   informace   byly   dostupné   v   čitelné   a   přehledné   formě   i   na   zařízeních   se   středními  a  malými  obrazovkami.   Responzivní   nejsou   však   pouze   jen   stránky   aplikace,   ale   například   i   modální   okna  s  formuláři  pro  zaslání  soukromé  zprávy  jinému  uživateli  a  tabulky.  

6.20 Komunikace  javascriptu  s  PHP   Pro  komunikaci  mezi  klientskou  částí  aplikace  (webovým  prohlížečem)  a  serverem   je  použit  soubor  technik  a  postupů  souhrnně  nazývaných  jako  AJAX.     V  klientské   části   jsem   v  aplikaci   napsané   pomocí   frameworku  Angular.js   vytvořil   službu   api,   která   se   stará   o   výměnu   dat   se   serverem   –   resp.   posílá   požadavky   na   získání,   smazání,   vytvoření   a   úpravu   dat.   Na   straně   serveru   je  vytvořený   modul   ApiModule,   který   obsahuje   několik   tříd   –   resp.   presenterů,   které  se  starají  o  zpracovávání  příchozích  požadavků  prostřednictvím  AJAXu.  

 

6.20.1

77  

Ukázka  služby  api  na  straně  klienta  

Například   při   zobrazení   detailu   uživatelského   profilu   je   potřeba   poslat   AJAXový   požadavek,  který  ve  své  odpovědi  bude  obsahovat  data  o  uživatelském  profilu.   Zavolání   takového   požadavku   na   straně   klienta   vypadá   následovně:   api.profile(hash_uživatelského_profilu).     Ukázka  kódu  služby:   angular.module('diplomovaPraceFrontendApp')   .factory  'api',  ($http,  bootstrap)  -­‐>     #  Service  logic     apiUrl  =  bootstrap.api         #  Public  API     {       #  get  profile  data  by  profile_hash       profile:  (hash)  -­‐>         $http.get  apiUrl  +  "/profile/get/"  +  hash           #  get  page  by  id       pages:  (id)  -­‐>         $http.get  apiUrl  +  "/pages/"  +  id     }  

 

6.20.2

Ukázka  ApiModule  na  straně  serveru  

Například   u   zmíněného   AJAXového   požadavku   o   data   uživatelského   profilu   se  o  vrácení  odpovědi  postará  následující  kód:     user-­‐>loggedIn)  {                          $profile  =  $this-­‐>profiles-­‐>findByProfileHash($hash,  $this-­‐>user-­‐>id);                  }  else  {                          $profile  =  $this-­‐>profiles-­‐>findByProfileHash($hash);                  }                    $formattedResponse  =  $this-­‐>formatResponse($profile);                  $this-­‐>sendResponse(new  JsonResponse($formattedResponse));          }   }    

Adresa   požadavku   je   /#/api/profile/get/hash_uživatele,   což   se   ve  skutečnosti   na   straně   serveru   namapuje   na   modul   ApiModule,   presenter   ProfilePresenter   a   metodu   actionGet   a   parameter   $hash   této   metody.   Tímto  

78  

 

způsobem   analogicky   funguje   mapování   všech   ostatních   požadavků   na   modul   ApiModule  na  straně  serveru.   6.20.3

Ukázka  odpovědi  ze  serveru  

Odpovědi   na   AJAXové   požadavky   jsou   ze   strany   PHP   serveru  zasílány   ve   formátu   JSON.  Opět  si  dovolím  použít  příklad  při  dotázání  se  na  informace  o  uživatelském   profilu.  Níže  uvedený  kód  je  potom  dále  zpracováván.     Ukázka  JSON:   {      "status"  :  "success",      "response"  :  {          "description"  :  "Lorem  ipsum  dolor  sit  amet,  consectetur...          "sex"  :  "female",          "age"  :  24,          "surname"  :  "Krčmářová",          "picture"  :  "12-­‐morgan-­‐freeman-­‐painting.jpg",          "firstname"  :  "Leontýnka",          "knows_languages"  :  "German",          "communication_interests"  :  "email,skype,chat,video",          "city"  :  "Brno",          "wants_languages"  :  "Czech",          "last_logged_in"  :  {              "date"  :  "2014-­‐05-­‐15  00:12:46",              "timezone_type"  :  3,              "timezone"  :  "Europe/Prague"          },          "country"  :  "American  Samoa",          "profile_hash"  :  "12222222222db908433b80f37c5fbc89b870084b",          "registered_date"  :  {              "date"  :  "2013-­‐11-­‐23  01:41:58",              "timezone_type"  :  3,              "timezone"  :  "Europe/Prague"          }      },      "user"  :  {          "loggedIn"  :  false,          "username"  :  ""      }   }  

6.21 Socketová  komunikace   Socketová   komunikace   umožňuje   komunikaci   na   základě   dvoucestného   TCP   spojení.  Základními  metodami  při  práci  se  socketovou  komunikací  jsou  metody  pro   emitování   události   a   metody   pro   naslouchání   událostem.   Každá   událost   má   svoje   jméno   a   při   emitování   události   můžeme   připojit   data,   která   se   mají   společně   s  touto  událostí  odeslat.   Pěkný  příklad  práce  se  socketovou  komunikací  je  při  posílání  chatové  zprávy   jinému  uživateli.  Ten  se  skládá  ze  tří  částí:  

 

1. 2. 3.

79  

emitování   události   private-­‐message   společně   s   daty   směrem   z  prohlížeče   na  socketový  server,   zachycení   události   private-­‐message   na   straně   socketového   (Node.js)   serveru  a  emitování  stejnojmenné  události  klientovi,  kterému  zpráva  patří,   zachycení  události  private-­‐message  obsahující  data  chatové  komunikace.  

6.21.1

Ukázka  emitování  události  na  straně  klienta  #1  

Následující   kód   emituje   událost   private-­‐message   s  daty   obsahujícími   hash   příjemce  a  samotnou  zprávou.     socket.emit  'private-­‐message',          to:  chat.profile_hash          message:  chat.message  

6.21.2

Ukázka  odchycení  a  emitování  události  na  straně  serveru  

Následující   kód   zachytí   příchozí   událost   private-­‐message,   data   doplní   o   hash   odesílatele   a   událost   emituje   stejnojmennou   událost   cílovému   uživateli.   Zároveň   zapíše  chatovou  komunikaci  do  databáze.     socket.on  "private-­‐message",  (data)  -­‐>      data["from"]  =  socket.profile_hash      socket.broadcast.to(data.to).emit  "private-­‐message",  data      logChatMessage  data  

6.21.3

Ukázka  odchycení  události  na  straně  klienta  #2  

Následující   kód   zachytí   událost   private-­‐message,   převezme   příchozí   data   obsahující   hash   odesílatele   a   samotnou   zprávu   a   tuto   zprávu   předá   k  dalšímu   zpracování.     socket.on  'private-­‐message',  (data)  -­‐>          obj.logIncoming  data  

6.22 Adresy  stránek  aplikace   Jednotlivé   stránky   vytvořené   aplikace   mají   adresu   ve   tvaru   /#/nazevpodstranky/volitelne-parametry   oproti   běžnému   /nazevpodstranky/volitelne-parametry. Vizuální   rozdíl   je   pouze   v  přítomnosti   znaku  #.  URL  adresy  s  tímto  znakem  bývají  typickými  zástupci  aplikací  napsaných   v  javascriptu.  Technicky  je  mezi  těmito  adresami  rozdíl  v  tom,  že  pokud  se  změní   obsah   URL   adresy   za   znakem   #,   nedochází   k  přenačtení   stránky.   Javascript   hlídá   změnu   adresy   za   znakem   #   a   na   tuto   změnu   reaguje   odpovídající   akcí.   Tento   přístup  využívá  i  framework  Angular.js,  v  kterém  je  tato  aplikace  vytvořena.  

80  

 

Ke   správnémů   namapování   URL   adresy   na   odpovídající   controller   se  v  Angular.js  používá  modul  ngRoute.       Ukázka  použití  modulu  ngRoute:   $routeProvider          .when("/profile/:hash",                  templateUrl:  "views/profile.html"                  controller:  "ProfileCtrl"                  data:                          access:                                  isFree:  true              ).when("/notepad",                  templateUrl:  "views/notepad.html"                  controller:  "NotepadCtrl"                  data:                          access:                                  isFree:  false  

  Při   každé   změně   URL   adresy   se   tedy   modul   ngRoute   podívá,   jestli   najde   v  uživatelem   definovaných   vzorech   URL   adres   nějaký   odpovídající.   Pokud   ano,   použije   odpovídající   controller   a   šablonu   definovanou   pro   tuto   adresu.   Pokud   ne,   přesměrovává   uživatele   na   hlavní   stranu   aplikace.   Každý   vzor   URL   adresy   obsahuje   navíc   položku   data,   kde   je   řečeno,   jestli   je   tato   URL   adresa   i   pro   nepřihlášeného     uživatele.   Pokud   se   nepřihlášený   uživatel   snaží   přistoupit   na  stránku,   která   je   dostupná   pouze   pro   přihlášené   uživatele,   je   přesměrován   na  hlavní   stranu   a   informován   o   tom,   že   přístup   do   této   stránky   vyžaduje   přihlášení  se  do  aplikace.  

6.23 Administrace  aplikace   Aplikace   obsahuje   jednoduchou   administraci.   V  administraci   je   možné   provádět   základní  operace  s  číselníky,  resp.  tabulkou  jazyků  a  států.  Mezi   základní   operace   patří   tzv.   CRUD14   operace,   tedy   vytvoření   záznamu,   prohlížení   záznamu,   úprava   záznamu  a  smazání  záznamu.   Kromě   editace   těchto   tabulek   má   uživatel   administrace   možnost   prohlížet   si  všechny   vytvořené   uživatelské   účty   a   má   možnost   zablokovat   účty,   které   nějakým   způsobem   porušují   například   základy   slušného   chování   nebo   etický   kodex.   Uživatel   se   zablokovaným   účtem   je   při   pokusu   o   přihlášení   informován   o  tom,  že  jeho  účet  byl  zablokován.   Administrace  aplikace  se  nachází  na  adrese  /admin.    

14  Create  Read  Update  Delete  

 

Obr.  36

81  

Ukázka  administračního  prostředí  

82  

 

 

83  

7 Diskuze  a  závěr   Výsledkem   této   závěrečné   práce   je   webová   aplikace   umožňující   jejím   uživatelům   vyhledávání   jazykových   partnerů   pro   osobní   setkání.   Kromě   toho   tato   aplikace   nabízí   i   alternativní   druhy   komunikace   a   to   komunikaci   chatovou,   hlasovou   a   obrazovou,  resp.  video  komunikaci.     Aplikace   je   vytvořena   tak,   aby   se   pohodlně   dala   používat   i   na   mobilních   zařízeních,   protože   si   osvojuje   metody   responsivního   designu.   Aplikaci   je   tak   možné   si  zobrazit   na   obrazovce   běžného   počítače,   na   tabletu   i   na   mobilním   telefonu  bez  nutnosti  horizontálního  posunu  po  stránce.     V  aplikaci   je   kladen   důraz   na   používání   moderních   technologií.   Bohužel   ne   všechny   prohlížeče   podporují   všechny   použité   moderní   technologie.   Internet   Explorer   od   společnosti   Microsoft   nemá   ani   ve   své   poslední   verzi   zatím   implementovanou   podporu   WebRTC   technologie   a   proto   při   pokusu   o  zahájení   video   hovoru   nebo   hlasového   hovoru   je   uživatel   o   absenci   této   technologie   v  prohlížeči   informován.   Z  toho   vyplývá:   pokud   má   aplikace   používat   moderní   technologie   a   přístupy,   musí   i   uživatel   používat   moderní   internetové   prohlížeče,   které   tyto   moderní   technologie   podporují.   Druhým   omezením   je   používání   WebRTC   technologií   na   mobilních   zařízeních.   Většina   mobilních   internetových   prohlížečů   na   zařízeních   s  operačním   systémem   Android   a   iOS   bohužel   také   nepodporuje   tuto   technologii   a   uživatel   je   opět   o   tomto   stavu   při   pokusu   o   jejich   použití   informován.   Tento   fakt   však   není   záležitostí   jen   WebRTC   technologie.   Kdyby   při   implementaci   video   a   hlasové   komunikace   byla   použita   například   technologie   Flash,   situace   by   byla   velmi   podobná.   Implementace   podobných   technologií   v   mobilních   zařízeních   je   prozatím   pravděpodobně   otázka   budoucnosti.   Tato   aplikace   se   oproti   existujícím   řešením   liší   hned   v  několika   faktorech.   Je  plně   responsivní   a   uživatelská   část   napsaná   kompletně   celá   v  javascriptu.   To  znamená,   že   i   když   je   tato   aplikace   spouštěna   z  prostředí   internetového   prohlížeče,   velmi   těsně   se   přibližuje   svým   chováním   k  aplikaci   nativní.   Tohoto   chování   je  dosaženo   zejména   díky   použití   MVC   frameworku   Angular.js   od   společnosti   Google.   Komunikace   se   serverem,   napsaném   v  Nette   frameworku   a  programovacím   jazyce   PHP,   probíhá   výhradně   pomocí   souboru   technologií   a  praktik   souhrnně   nazývaných   jako   AJAX.   Kromě   AJAXu   využívá   aplikace   i  socketovou   komunikaci,   která   vedle   asynchronních   požadavků   umožňuje   aplikaci   komunikovat   v  reálném   čase   pomocí   dvousměrného   TCP   spojení.   Velkou   výhodu   této   aplikace   oproti   současným   řešením   vidím   také   v  zobrazování   nalezených   partnerů   na   mapě,   což   dává   uživateli   jasný   přehled   o   tom,   kde   se   jednotliví   jazykoví  partneři  nachází.   Aplikaci   se   hodlám   i   do   budoucna   nadále   věnovat   a   rozšiřovat   ji.   Co   se   týče   vývoje  aplikací  podobného  zaměření,  vývoj  se  prakticky  nikdy  nezastaví  a  existuje   nepřeberné   množství   možností,   jak   aplikaci   vylepšit   a   obohatit   o   novou   funkčnost.   Aplikace   má   podporu   lokalizace   a   je   tedy   možné   ji   přeložit   do   libovolného   množství   jazyků.   Aplikace   však   není   připravená   na   jazyky   orientované   zprava  

84  

 

doleva  (například  arabština)  a  proto  jako  jedno  z  prvních  rozšířeních  by  mělo  být   právě   přizpůsobení   šablon   této   orientaci.   Dalším   rozšířením   by   v   chatové   komunikaci,  video  komunikaci  a  hlasové  komunikaci  mezi  dvěma  uživateli  mohla   být  komunikace  tří  a  více  uživatelů  zároveň.   Při   tvorbě   aplikace   bylo   použito   celkem   9   technologií   –   HTML,   CSS,   javascript,   PHP,   MySQL,   Redis,   Node.js,   WebSocket,   WebRTC,   množství   frameworků,   podpůrných  knihoven  a  vývoj  aplikace  trval  odhadem  asi  7  měsíců.   Vytvořenou   aplikaci   plánuji   zpřístupnit   široké   veřejnosti.   Pro   rozšíření   této   aplikace   mezi   uživatele   internetu   plánuji   ze   začátku   využít   distribuční   kanály   sociálních   sítí   Facebook,   Twitter   a   Google+   a   to   zejména   založením   profilových   stránek  vytvořené  aplikace   na  těchto  sociálních  sítích.  Tuto  formu  propagace  bych   potom   nadále   podpořil   tvorbou   elektronických   propagačních   materiálů,   jako   jsou   například  bannery.   Cíl  práce  se  podařilo  naplnit.  

 

85  

8 Literatura   [1]  ORACLE  CORPORATION.  Oracle:  Quality  of  Service  Requirements.  ORACLE  [online].   2010  [cit.  2014-­‐05-­‐03].  Dostupné  z:  http://docs.oracle.com/cd/E1963601/819-2326/gaxqg/index.html

[2]  TECHTERMS.COM.  TechTerms:  Framework.  TechTerms  [online].  2014  [cit.  2014-­‐ 05-­‐03].  Dostupné  z:  http://www.techterms.com/definition/framework   [3]  THE  PHP  GROUP.  What  is  PHP?.  PHP  [online].  2014  [cit.  2014-­‐05-­‐03].  Dostupné   z:  http://www.php.net/manual/en/intro-whatis.php   [4]  JOHNSON,  S.  Description  of  PHP.  EHow  [online].  2014  [cit.  2014-­‐05-­‐03].   Dostupné  z:  http://www.ehow.com/info_8484766_description-php.html   [5]  Q-­‐SUCCESS.  Usage  of  server-­‐side  programming  languages  for   websites.  W3Techs  [online].  2014  [cit.  2014-­‐05-­‐03].  Dostupné  z:   http://w3techs.com/technologies/overview/programming_language/all   [6]  Interpretovaný  jazyk.  Wikipedia.org  [online].  2013  [cit.  2014-­‐05-­‐03].  Dostupné   z:  http://cs.wikipedia.org/wiki/Interpretovan%C3%BD_jazyk   [7]  JANOVSKÝ,  D.  HTTP  Protokol.  Jak  psát  web  [online].  2014  [cit.  2014-­‐05-­‐03].   Dostupné  z:  http://www.jakpsatweb.cz/server/http-protokol.html   [8]  ANCHOR  SYSTEMS  PTY  LTD.  MySQL  vs  PostgreSQL  comparison.  Anchor  [online].   2010  [cit.  2014-­‐05-­‐03].  Dostupné  z:   http://www.anchor.com.au/hosting/dedicated/mysql_vs_postgres   [9]  SOLID  IT.  DB-­‐Engines  Ranking.  DB-­‐Engines  [online].  2014  [cit.  2014-­‐05-­‐03].   Dostupné  z:  http://db-engines.com/en/ranking   [10]  ORACLE  CORPORATION.  Top  Reasons  to  Use  MySQL.  MySQL  [online].  2014  [cit.   2014-­‐05-­‐03].  Dostupné  z:  https://www.mysql.com/whymysql/topreasons.html   [11]  TECHTARGET.  Relational  database.  TechTarget  [online].  2006  [cit.  2014-­‐05-­‐03].   Dostupné  z:   http://searchsqlserver.techtarget.com/definition/relationaldatabase  

[12]  ORACLE  CORPORATION.  Chapter  13  SQL  Statement  Syntax.  MySQL  [online].  2014   [cit.  2014-­‐05-­‐03].  Dostupné  z:   http://dev.mysql.com/doc/refman/5.5/en/sql-syntax.html

[13]  CITRUSBYTE.  Introduction  to  Redis.  Redis  [online].  2014  [cit.  2014-­‐05-­‐03].   Dostupné  z:  http://redis.io/topics/introduction     [14]  CITRUSBYTE.  Clients.  Redis  [online].  2014  [cit.  2014-­‐05-­‐03].  Dostupné  z:   http://redis.io/topics/introduction     [15]  SOLID  IT.  DB-­‐Engines  Ranking.  DB-­‐Engines  [online].  2014  [cit.  2014-­‐05-­‐03].   Dostupné  z:  http://db-engines.com/en/ranking/key-value+store    

86  

 

[16]  ADAPTIVE  PATH  INC.  Ajax:  A  New  Approach  to  Web  Applications.  Adaptive  Path   [online].  2008  [cit.  2014-­‐05-­‐03].  Dostupné  z:   http://www.adaptivepath.com/ideas/essays/archives/000385.php     [17]  FLANAGAN,  D.  JavaScript:  the  definitive  guide.  Fifth  edition.  Sebastopol:  O´Reilly,   2006,  994  s.  ISBN  05-­‐961-­‐0199-­‐6.   [18]  KOURBATOV,  A.  What  is  JavaScript.  JavaScripter  [online].  2011  [cit.  2014-­‐05-­‐03].   Dostupné  z:  http://www.javascripter.net/faq/whatisja.htm     [19]  KESTEREN  V.,  PIETERS  A.,  PIETERS  S.  HTML5  differences  from  HTML4.  W3C.  W3C   [online].  2011  [cit.  2014-­‐05-­‐03].  Dostupné  z:   http://www.w3.org/TR/2011/WD-html5-diff-20110405/     [20]  KESTEREN  V.,  PIETERS  A.,  PIETERS  S.  Differences  from  HTML4:  API.  W3C.  W3C   [online].  2011  [cit.  2014-­‐05-­‐03].  Dostupné  z:   https://rawgit.com/whatwg/htmldifferences/master/Overview.html#apis    

[21]  W3C.  HTML  &  CSS:  What  is  CSS.  W3C  [online].  2013  [cit.  2014-­‐05-­‐03].   Dostupné  z:  http://www.w3.org/standards/webdesign/htmlcss#whatcss     [22]  BOS,  B.  Descriptions  of  all  CSS  specifications:  CSS  Specifications.  W3C  [online].   2014  [cit.  2014-­‐05-­‐03].  Dostupné z: http://www.w3.org/Style/CSS/specs   [23]  CREAUTITY  CORPORATION.  The  Decline  of  Flash:  What  it  Means  for  eCommerce.   Creatuity  [online].  2014  [cit.  2014-­‐05-­‐03].  Dostupné  z:   http://creatuity.com/2013/05/01/decline-of-flash-what-it-meansecommerce/    

[24]  TRILOGY-­‐LTE.  How  WebRTC  Is  Revolutionizing  Telephony.  Trilogy-­‐LTE   [online].  2014  [cit.  2014-­‐05-­‐03].  Dostupné  z:  http://blogs.trilogy-

lte.com/post/77427158750/how-webrtc-is-revolutionizing-telephony    

[25]  O’REILLY  MEDIA,  INC.  Chapter  18.  WebRTC.  O'Reilly  Atlas  [online].  2013  [cit.   2014-­‐05-­‐03].  Dostupné  z:   http://chimera.labs.oreilly.com/books/1230000000545/ch18.html     [26]  GOOGLE  INC.  WebRTC.  WebRTC  [online].  2012  [cit.  2014-­‐05-­‐03].  Dostupné  z:   http://www.webrtc.org/     [27]  MCLAUGHLIN,  B.  What  is  Node.js?.  Radar  O'Rilley  [online].  2011  [cit.  2014-­‐05-­‐ 03].  Dostupné  z:  http://radar.oreilly.com/2011/07/what-is-node.html     [28]  UBL,  M,  KIMATURA,  E.  Introducing  WebSockets:  Bringing  Sockets  to  the  Web.   HTML5Rocks  [online].  2010  [cit.  2014-­‐05-­‐03].  Dostupné  z:   http://www.html5rocks.com/en/tutorials/websockets/basics/     [29]  KIMATURA,  E.  What  are  WebSockets?.  Pusher  [online].  2012  [cit.  2014-­‐05-­‐03].   Dostupné  z:  http://pusher.com/websockets     [30]  TECHTERMS.COM.  TechTerms:  Framework.  TechTerms  [online].  2014  [cit.  2014-­‐ 05-­‐03].  Dostupné  z:  http://www.techterms.com/definition/framework   [31]  GRUDL,  D.  Nette  Framework.  NETTE  FOUNDATION.  Nette  [online].  2014  [cit.   2014-­‐05-­‐03].  Dostupné  z:  http://www.nette.org  

 

87  

[32]  PORTO,  S.  A  Comparison  of  Angular,  Backbone,  CanJS  and  Ember.  Sebastian's   Blog  [online].  2013  [cit.  2014-­‐05-­‐03].  Dostupné  z:   http://sporto.github.io/blog/2013/04/12/comparison-angularbackbone-can-ember/    

[33]  PORTO,  S.  A  Comparison  of  Angular,  Backbone,  CanJS  and  Ember.  Sebastian's   Blog  [online].  2013  [cit.  2014-­‐05-­‐03].  Dostupné  z:   http://sporto.github.io/blog/2013/04/12/comparison-angularbackbone-can-ember/    

[34]  NARDI,  F.  Top  5  Core  Differences  Between  Bootstrap  3  and  Foundation  5.   Medium  [online].  2014  [cit.  2014-­‐05-­‐03].  Dostupné  z:   https://medium.com/frontend-and-beyond/8b3812c7007c     [35]  NETTE  FOUNDATION.  Dibi  [online].  2014  [cit.  2014-­‐05-­‐03].  Dostupné  z:   http://dibiphp.com/cs/     [36]  DESIGNZUM.  10  Best  Node.js  MVC  Frameworks  for  JavaScript  Developers.   DesignZum  [online].  2014  [cit.  2014-­‐05-­‐03].  Dostupné  z:   http://designzum.com/2014/02/23/10-best-node-js-mvc-frameworksfor-javascript-developers/    

[37]  ExpressJS  [online].  2014  [cit.  2014-­‐05-­‐03].  Dostupné  z:   http://expressjs.com     [38]  PeerJS  [online].  2014  [cit.  2014-­‐05-­‐03].  Dostupné  z:  http://peerjs.com     [39]  CoffeeScript  [online].  2014  [cit.  2014-­‐05-­‐03].  Dostupné  z:   http://www.coffeescript.org     [40]  SCHMULLER,  J.  Myslíme  v  jazyku  UML:  knihovna  programátora.  1.  vyd.  Praha:   Grada,  2001,  359  s.  ISBN  80-­‐247-­‐0029-­‐8.   [41]  REENSKAUG,  T.,  COPLIEN,  J.  The  DCI  Architecture:  A  New  Vision  of  Object-­‐ Oriented  Programming.  Artima  Developer  [online].  2009  [cit.  2014-­‐05-­‐03].   Dostupné  z:  http://www.artima.com/articles/dci_vision.html   [42]  BURBECK,  S.  Applications  Programming  in  Smalltalk-­‐80(TM):  How  to  use   Model-­‐View-­‐Controller  (MVC).  Smalltalk  archive  [online].  1992  [cit.  2014-­‐05-­‐ 03].  Dostupné  z:  http://st-www.cs.illinois.edu/users/smarch/stdocs/mvc.html   [43]  RÁBOVÁ,  I.  Podnikové  informační  systémy  a  technologie  jejich  vývoje.  Brno:   Tribun  CZ,  2008.  139  s.  ISBN  978-­‐80-­‐7399-­‐599-­‐7.     [44]  ASIN  BOOSBRAYK.  Language  Learning:  How  to  Learn  Any  Language  [online].   2011  [cit.  2014-­‐05-­‐04].  Dostupné  z:  http://www.amazon.com/LanguageLearning-How-Learn-Any-ebook/dp/B005BSRAYK   [45]  TRIMNELL,  E.  Why  you  need  a  foreign  language  [online].  2nd  ed.  rev.  and   expanded.  Cincinnati,  Ohio:  Beechmont  Crest  Pub,  2005  [cit.  2014-­‐05-­‐ 04].  ISBN  09-­‐748-­‐3301-­‐0. [46]  AGER,  S.  Why  should  I  learn  a  language?  Omniglot  [online].  2014  [cit.  2014-­‐05-­‐ 04].  Dostupné  z:  http://www.omniglot.com/language/why.htm  

88  

[47]  SEDLÁČEK,  M.  Znalost  cizích  jazyků  v  praxi.  KarieraWeb  [online].  2009  [cit.   2014-­‐05-­‐04].  Dostupné  z:  http://kariera.ihned.cz/c1-38190160-znalostcizich-jazyku-v-praxi   [48]  MORIS,  B.  Why  study  a  foreign  language?.  Learn  Nc  [online].  2009  [cit.  2014-­‐ 05-­‐04].  Dostupné  z:  http://www.learnnc.org/lp/pages/759?ref=search        

 

 

89  

9 Přílohy   9.1

[A]  Entitně-­‐relační  diagram  

90  

9.2

 

[B]  Přiložené  CD  

Přiložené  CD  obsahuje:   • zdrojové  kódy  aplikace,   • export  databáze,   • entitně-­‐relační  diagram.