View metadata, citation and similar papers at core.ac.uk brought to you by CORE
provided by Digital library of Brno University of Technology
VYSOKE´ UCˇ ENI´ TECHNICKE´ V BRNEˇ BRNO UNIVERSITY OF TECHNOLOGY
FAKULTA INFORMACˇ NI´CH TECHNOLOGII´ U´ STAV INFORMACˇ NI´CH SYSTE´ MU˚
FACULTY OF INFORMATION TECHNOLOGY DEPARTMENT OF INFORMATION SYSTEMS
SOCIA´ LNI´ SI´Tˇ PRO KOLEKTIVNI´ SPORTY
DIPLOMOVA´ PRA´ CE MASTER’S THESIS
AUTOR PRA´ CE Bc. IVO ADAM AUTHOR
BRNO 2015 VYSOKE´ UCˇ ENI´ TECHNICKE´ V BRNEˇ BRNO UNIVERSITY OF TECHNOLOGY
FAKULTA INFORMACˇ NI´CH TECHNOLOGII´ U´ STAV INFORMACˇ NI´CH SYSTE´ MU˚
FACULTY OF INFORMATION TECHNOLOGY DEPARTMENT OF INFORMATION SYSTEMS
SOCIA´ LNI´ SI´Tˇ PRO KOLEKTIVNI´ SPORTY SOCIAL NETWORK FOR TEAM SPORTS
DIPLOMOVA´ PRA´ CE MASTER’S THESIS
AUTOR PRA´ CE Bc. IVO ADAM AUTHOR
VEDOUCI´ PRA´ CE Ing. RADEK BURGET, Ph.D. SUPERVISOR
BRNO 2015 Abstrakt Tato diplomová práce se zabývá vývojem webové sociální sítě pro organizaci amatérských utkání v kolektivních sportech. Je implementována v jazyce JavaScript. Klientská část je napsána v aplikačním rámci AngularJS. Serverová část je postavena na platformě Node.js, využívá aplikační rámec Express a NoSQL databázi MongoDB. Ke zdrojům uloženým na serveru lze přistupovat prostřednictvím aplikačního rozhraní REST. Sociální síť integruje vybrané zásuvné moduly nabízené existujícími sociálními sítěmi. Například přihlašovací di- alog nebo tlačítka pro sdílení. Vytvořená aplikace funguje ve webových prohlížečích Google Chrome, Mozilla Firefox a Internet Explorer verze 10 a vyšší.
Abstract This master thesis deals with development of a social network for organizing amateurish matches in collective sports. It is implemented in JavaScript. Client side is written in AngularJS framework. Server side is built on Node.js platform, uses framework Express and NoSQL database MongoDB. Resources stored on server are accessible via REST API. The social network integrates some plugins from existing social networks. For example login dialog or share buttons. The created application supports web browsers Google Chrome, Mozilla Firefox and Internet Explorer version 10 or higher.
Klíčová slova sociální síť, JavaScript, Node.js, AngularJS, MongoDB
Keywords social network, JavaScript, Node.js, AngularJS, MongoDB
Citace Ivo Adam: Sociální síť pro kolektivní sporty, diplomová práce, Brno, FIT VUT v Brně, 2015 Sociální síť pro kolektivní sporty
Prohlášení Prohlašuji, že jsem tuto práci vypracoval samostatně pod vedením Ing. Radka Burgeta, Ph.D. Uvedl jsem všechny literární prameny a publikace, ze kterých jsem čerpal.
...... Ivo Adam 26. května 2015
Poděkování Děkuji Ing. Radku Burgetovi, Ph.D za vedení mé diplomové práce.
c Ivo Adam, 2015. Tato práce vznikla jako školní dílo na Vysokém učení technickém v Brně, Fakultě informa- čních technologií. Práce je chráněna autorským zákonem a její užití bez udělení oprávnění autorem je nezákonné, s výjimkou zákonem definovaných případů. Obsah
1 Úvod 3
2 World Wide Web 4 2.1 Komunikační protokol HTTP ...... 4 2.2 Adresa URL ...... 5 2.3 Webové stránky ...... 5 2.4 Webové aplikace ...... 7
3 Tvorba webových aplikací 8 3.1 Technologie klientské části ...... 9 3.1.1 HTML a DOM ...... 9 3.1.2 CSS ...... 10 3.1.3 JavaScript ...... 11 3.2 Technologie serverové části ...... 13 3.2.1 Aplikační rámce ...... 13 3.2.2 Databáze ...... 14 3.2.3 Architektura REST pro webové API ...... 16
4 Sociální sítě 17 4.1 Facebook ...... 17 4.2 Twitter ...... 20 4.3 Google+ ...... 21
5 Návrh sociální sítě pro kolektivní sporty 22 5.1 Specifikace požadavků a případů použití ...... 22 5.2 Architektura ...... 24 5.2.1 Serverová část ...... 24 5.2.2 Klientská část ...... 26 5.3 Uživatelé, registrace a autentizace ...... 28 5.4 Sportovní události ...... 31 5.5 Upozornění a soukromé zprávy ...... 33
6 Implementace a testování sociální sítě pro kolektivní sporty 34 6.1 Organizace archivu se zdrojovými kódy ...... 35 6.2 Použité knihovny a externí komponenty ...... 36 6.3 Validace formulářů ...... 37 6.4 Filtrování dat ...... 38 6.5 Experimentální ověření funkčnosti ...... 38
1 7 Závěr 39
A Přístupové body serverového REST API 42
B Testovací scénář 44
2 Kapitola 1
Úvod
Přestože je sport zdraví prospěšná činnost, existuje dle průzkumu Evropské unie [1] velká část populace, která jej vůbec neprovozuje. Průzkum uvádí, že nejčastějším důvodem, proč člověk nesportuje, je nedostatek času. V České Republice tento důvod uvedlo 52% a v rámci celé EU pak 42% dotázaných. Lidé, kteří by rádi sportovali, ale nejsou nikde organizováni, mohou mít problém při shánění spoluhráčů, respektive protihráčů. Ty shání mezi kamarády, ale často se stává, že nemají čas a nikoho tak nenajdou. Nejeden pokus o zorganizování takové sportovní akce pak končí neúspěchem. Přitom je velmi pravděpodobné, že lidí, kteří by si ten den šli zahrát určitý kolektivní sport je v té dané oblasti více, jenom o sobě nevědí a nemohou se domluvit. V dnešní době, kdy jsou lidé propojeni pomocí internetu, se nabízí možnost domluvy přes web, například pomocí nějaké sociální sítě1 nebo aplikace pro plánování schůzek. Při snaze použít zmíněné nástroje bylo zjištěno, že pro organizaci takové sportovní akce nejsou vhodně navržené. Sociální sítě sice umožňují vytvářet a spravovat události, ale vyhledávat mezi existujícími událostmi je možné pouze fulltextově a nelze tedy události filtrovat na základě typu, místa, věku účastníků či dalších kritérií. Webové aplikace pro plánování schůzek zase fungují na principu rozesílání pozvánek e-mailem. Je tedy zřejmé, že není možné naplánovat schůzku s cizími lidmi, jejichž e-mailové adresy organizátor nezná. Řešením by mohlo být vytvoření nové sociální sítě navržené pro organizování sportovních akcí. Uživatel této sítě by měl možnost organizovat sportovní akce a vyhledávat mezi nimi podle vhodných kritérií. Vytvořením takové sociální sítě se zabývá tato diplomová práce. Kapitola 2 vysvětluje princip internetové služby World Wide Web a definuje s ní spojené základní pojmy. Kapitola 3 uvádí přehled technologií používaných pro tvorbu webových aplikací, s důra- zem na vývoj v jazyce JavaScript. Kapitola 4 popisuje existující, celosvětově nejpoužívanější sociální sítě. Vysvětluje jejich typické použití a možnosti integrace do vlastní aplikace. Kapitola 5 obsahuje návrh nové sociální sítě vhodné pro organizování amatérských spor- tovních akcí. Kapitola 6 popisuje implementaci vybraných problémů navržené sociální sítě a experi- mentální ověření její funkčnosti. Kapitola 7 hodnotí dosažené výsledky a uvádí možná rozšíření implementované aplikace. Diplomová práce navazuje na semestrální projekt, ze kterého využívá kapitoly 1 až 4 a část kapitoly 5.
1Pojem Sociální síť“ je v této práci chápán jako webová aplikace se zaměřením na sdílení informací ” a vzájemnou interakci mezi uživateli.
3 Kapitola 2
World Wide Web
World Wide Web (WWW, W3)[3] vynalezl v roce 1989 Tim Berners-Lee. Jedná se o dis- tribuovaný systém využívající síť internet pro sdílení dokumentů v různých formátech. Dokumenty může nabízet libovolný počítač připojený k internetu, na kterém běží potřebný software - webový server (Apache, ISS a jiné). K dokumentům uloženým na webových serve- rech lze přistupovat prostřednictvím klienta - webový prohlížeč (Internet Explorer, Google Chrome a další). Ten dokáže vyžádat dokumenty od serveru a následně je zobrazit. Klíčo- vým typem dokumentů na webu jsou hypertextové1 dokumenty napsané v HTML2, které typicky obsahují textové informace, obrázky (příp. další multimediální data) a hypertextové odkazy na jiné dokumenty na webu. Tyto odkazy mohou být jak lokální (v rámci stejného serveru), tak i globální (na jiný dokument na jiném serveru). Na web lze tedy nahlížet také jako na síť vzájemně propojených zdrojů informací a proto je web často označován jako hypertextový systém. Dnes se o rozvoj jeho standardů stará World Wide Web Consortium (W3C), kterému předsedá jeho zakladatel Tim Berners-Lee.
2.1 Komunikační protokol HTTP
Veškerá komunikace mezi webovými klienty a servery se odehrává přes internet, prostřed- nictvím HTTP3 [4]. Tento protokol aplikační vrstvy je vystavěn nad protokolem TCP4 a typicky používá ke komunikaci port číslo 80. HTTP pracuje způsobem dotaz - odpo- věď a neuchovává informace o předchozích dotazech, proto je označován za bezestavový protokol. Základní dotazovací metody, kterými klient komunikuje se serverem, jsou:
• GET - požadavek na zaslání dokumentu. Nejčastěji používaná metoda.
• HEAD - požadavek na zaslání hlavičky (metadat) dokumentu.
• POST - odeslání uživatelských dat na server, například formulářová data.
• PUT - nahrání dat na server.
• DELETE - smazání dat ze serveru. 1Hypertext - text umožňující nesekvenční přístup pomocí sítě vazeb nazývané odkazy.[2] 2HTML (HyperText Markup Language) - značkovací jazyk pro hypertextové dokumenty. Podrobněji se jím zabývá kapitola 3.1.1 3HTTP (HyperText Transfer Protocol) - komunikační protokol pro přenos dokumentů na webu. 4TCP (Transmission Control Protocol) - spojově orientovaný protokol transportní vrstvy internetu.
4 Odpověď serveru na dotaz klienta se pak skládá ze stavového kódu a případně požadovaného dokumentu. Stavový kód je tříciferné číslo ve tvaru yxx, kde y určuje kategorii odpovědi a xx specifikuje konkrétní variantu z dané kategorie. Možných kategorií je celkem 5:
• 1xx - informační charakter
• 2xx - úspěšné zpracování požadavku
• 3xx - požadovaný dokument se nachází jinde (přesměrování)
• 4xx - chyba klienta (neplatný požadavek)
• 5xx - chyba serveru (není schopen zpracovat validní požadavek)
Nejběžněji se vyskytují stavové kódy 200 - úspěch, 404 - požadovaný dokument nebyl na serveru nalezen a 503 - server je dočasně nedostupný.
2.2 Adresa URL
Každý dokument musí být možné v rámci webu jednoznačně identifikovat, aby na něj bylo možné odkazovat, respektive aby jej mohl klient od serveru vyžádat. K tomu se pou- žívá adresa URL5 [5]. Například URL http://en.wikipedia.org/wiki/JavaScript identifikuje dokument JavaScript, který je uložen ve složce wiki na serveru s doménovým jménem en.wikipedia.org. URL adresa je používána k identifikaci objektů i v jiných internetových službách, ne pouze na webu, proto je nutné na jejím začátku specifikovat komunikační pro- tokol (v případě webu je to http). Uvedená problematika adresování objektů v rámci webu není úplná, v praxi je nutné provést překlad doménového jména serveru na IP6 adresu prostřednictvím systému DNS7, jehož výklad přesahuje rámec této práce.
2.3 Webové stránky
Webovou stránkou se rozumí množina tematicky zaměřených dokumentů propojených od- kazy, které jsou uloženy na stejném webovém serveru. Webové stránky se dají z pohledu zpracování serverem rozdělit do dvou kategorií, na statické a dynamické.
Statické webové stránky Statická webová stránka má obsah pevně definovaný jejím tvůrcem. Když klient požádá o dokumenty, ze kterých se sestává, tak je server odešle přesně v té podobě, v jaké byly na server uloženy. To odpovídá výše popsaným principům webu, které ilustruje obrázek 2.1. Obrázek zachycuje situaci, kdy uživatel zadal do adresního řádku webového prohlížeče URL adresu stránky o JavaScriptu uložené na serveru wikipedia. Tím prohlížeč vyslal na příslušný server HTTP požadavek na daný hypertextový dokument. Ten server zpracoval a odeslal zpět HTTP odpověď s požadovaným dokumentem.
5URL (Uniform Resource Locator) - unikátní identifikátor zdroje. 6IP (Internet Protocol) - protokol síťové vrstvy internetu zajišťující směrování. 7DNS (Domain Name System) - distribuovaný systém internetových informací, umožňuje například pře- vádět doménová jména na IP adresy a naopak.
5 D= = D =F;F íD ; ; í== ; ; = =
č =F;FD8UUD íD mD8LD D8UF5DFFí8UíUWD l íD = žD l> l íDFL<5
ID D D D
Obrázek 2.1: Znázornění výměny statických dokumentů mezi webovým klientem a serverem pomocí aplikačního protokolu HTTP.
Dynamické webové stránky Obsah webové stránky, respektive dokumentů ze kterých se skládá, ovšem nemusí být pouze statický a je možné jej generovat dynamicky. To je umožněno díky skriptování na straně serveru. Když klient požádá o dokument, který obsahuje programový kód určitého jazyka, tak server nejdříve kód vyhodnotí a poté klientovi odešle dokument obsahující vypočtená data. Protože server vyhodnocuje tento kód pro každý požadavek zvlášť, je možné vyge- nerovat rozdílnou odpověď pro stejný požadavek, například na základě času, přístupových práv nebo dotazu do datového úložiště. Princip generování obsahu webových stránek je znázorněn na obrázku 2.2.
9L9 L6F6 í9 F F íLL F F
č L6F697gg9 í9 =97>9 97g6<96>í75í6W9 U í9 L ž9 V U> U í9ýgdv I9 9 9 9ó ě
Obrázek 2.2: Webový server při požadavku na dokument obsahující kód programovacího jazyka nejprve vyhodnotí daný kód a poté odešle klientovi dokument s vypočtenými daty.
6 2.4 Webové aplikace
V roce 2004 se web dostal do nové vývojové etapy, označované jako Web 2.0“. V té ” době začaly vznikat funkčně propojené množiny dynamických stránek - webové aplikace. Obsah webové aplikace tvoří její uživatelé. Každý uživatel má většinou svůj vlastní účet a na základě oprávnění může přistupovat pouze k určité podmnožině dokumentů. Při tvorbě webové aplikace je tak nutné zajistit autentizaci a autorizaci uživatelů, jejich sezení a bez- pečnost.
Autentizace je proces ověření identity uživatele. Nejčastějším způsobem je zadání dvo- jice uživatelské označení (jméno, email, apod.) a heslo, které je ověřeno vůči předem vytvořenému záznamu v databázi, jež vznikl při zaregistrování uživatele.
Autorizace je proces ověření oprávnění uživatele. Například zda-li má uživatel oprávnění pro přístup k daným dokumentům.
Sezení označuje trvalé spojení mezi klientem a serverem. Ve webové aplikaci je velmi vhodné udržovat stav komunikace s každým uživatelem (například zdali je již přihlášen či nikoliv), na základě kterého server může přizpůsobit svoji odpověď. Ovšem, jak již bylo zmíněno, HTTP je bezestavový protokol a je tedy nutné udržovat kontext komu- nikace na úrovni samotné aplikace. Běžně se k tomuto účelu používají HTTP cookies8.
Bezpečnost webové aplikace je nutné zajistit na několika místech, jinak hrozí únik, zneu- žití či ztráta potenciálně citlivých dat uživatele. Základní předpoklad bezpečné apli- kace je vyvarování se bezpečnostních chyb v naprogramovaných skriptech (především neošetřený uživatelský vstup z formulářů). Také je nutné zajistit šifrování komunikace mezi klientem a serverem. Protokol HTTP posílá veškerá data v otevřené podobě, což útočníkovi umožňuje odposlouchávat komunikaci a zjistit tím citlivé údaje (heslo atp.). Šifrování komunikace lze zajistit nahrazením klasického HTTP za HTTPS9.
Popularita webových aplikací roste především díky všudypřítomnosti webových pro- hlížečů a s tím související snadné přenositelnosti mezi platformami. Také schopnost ak- tualizovat a spravovat webové aplikace bez nutnosti distribuovat a instalovat novou verzi software zvlášť u každého uživatele, je jejich velkou výhodou. Díky uvedeným výhodám se některé, dříve pouze desktopové aplikace (např. kancelářský balík), již běžně vytvářejí jako aplikace webové. Způsobem a technologiemi vytváření webové aplikace se zabývá následující kapitola.
8HTTP cookies - technologie umožňující serveru uložit malé množství dat na straně klienta. Tato data pak klient automaticky posílá na server při každém HTTP dotazu. 9HTTPS (HyperText Transfer Protocol Secure) - nadstavba nad HTTP, která šifruje veškerá přenášená data pomocí SSL/TLS, což je kryptografický protokol fungující na principu asymetrické šifry.
7 Kapitola 3
Tvorba webových aplikací
Tato kapitola shrnuje problematiku vytváření webových aplikací. Představuje základní kli- entské a serverové technologie i některé populární aplikační rámce1 a knihovny2, především pak ty, které budou použity v této práci při tvorbě sociální sítě pro kolektivní sporty. Pro- tože téměř všechny webové aplikační rámce jsou postaveny na architektuře Model-View- Controller, bude zde tato architektura stručně popsána.
Architektura MVC (Model-View-Controller) Architektura MVC[13] rozděluje aplikaci na tři logické části - Model, View a Controller. Mo- del reprezentuje data, se kterými aplikace pracuje. View zobrazuje uživatelské rozhraní a vi- zualizuje data uložená v modelu. Controller má pak na starosti zpracování událostí a logiku aplikace. Výhodou rozdělení jsou snazší úpravy jednotlivých částí, které se navíc téměř nepro- mítají do částí ostatních. Závislosti jednotlivých komponent jsou patrné z obrázku 3.1. Je důležité si uvědomit, že model není závislý na žádné kom- ponentě, což je důležitá vlastnost MVC architek- tury. Tok událostí v aplikaci probíhá následovně:
1. Uživatel vykoná nějakou akci na uživatel- ském rozhraní 2. Akce je zachycena Controllerem 3. Controller rozhodne, jak na akci zareagovat, ř ř a obvykle změní nějaké hodnoty v Modelu nebo přímo ovlivní View Obrázek 3.1: Blokové schéma architek- tury MVC se znázorněním vazby na 4. View zobrazí změny uživateli uživatele.
1Aplikační rámec (angl. Framework) - univerzální a znovupoužitelná softwarová struktura, která usnadňuje řešení často se opakujících problémů. 2Knihovna - sada funkcí (příp. tříd a objektů), která může být sdílena více programy.
8 3.1 Technologie klientské části
Klientská část aplikace sestává z dokumentů stažených ze serveru. Obsah dokumentů inter- pretuje webový prohlížeč a jsou-li v podporovaném formátu, tak jejich obsah vhodně zob- razí uživateli. Základ všech webových stránek, respektive aplikací, jsou dokumenty napsané v HTML (HyperText Markup Language), CSS (Cascading Style Sheets) a JS (JavaScript).
3.1.1 HTML a DOM HTML[12] je značkovací jazyk, který vychází ze SGML3. Používá se pro definici obsahu hypertextových dokumentů. Pomocí HTML značek a jejich vlastností je možné přiřadit jednotlivým částem obsahu dokumentu význam. Například značka
vyznačuje hlavní nadpis a značka
odstavec. Většina značek je párová, to znamená, že musí vyznačovanou část dokumentu obklopovat z obou stran, přičemž značka uzavírací (ta v textu více napravo) obsahuje navíc znak / za první úhlovou závorkou (viz. příklad HTML dokumentu na ob- rázku 3.2). Existují ale i značky nepárové, které se typicky používají pro vkládání externích zdrojů do HTML dokumentu, například nepárová značka slouží pro vložení obrázku. Množina povolených značek závisí na konkrétní verzi HTML. Dnes je aktuální verze 5, jejíž finální specifikace byla vydána v říjnu 2014 a podporují ji všechny moderní webové prohlížeče. Struktura dokumentu v HTML je pevně daná. Nejdříve je nutné deklarovat typ dokumentu, pro HTML5 se to provede značkou . Poté vždy následuje zna- čka reprezentující celý dokument, která v sobě obsahuje právě dvě značky,
j s ss ssss s ss ss ssss s ssss s s s s s s ss s
Obrázek 3.2: HTML dokument, jeho reprezentace ve formě DOM a výsledek, který zobrazí webový prohlížeč.
3SGML (Standard Generalized Markup Language) - univerzální metajazyk, který dovoluje definovat zna- čkovací jazyky. 4DOM (Document Object Model) - objektový model dokumentu se stromovou strukturou.
9 3.1.2 CSS CSS[12] je jazyk pro definici vzhledu dokumentu vyznačeného pomocí jazyka HTML, nebo jemu příbuzného. Umožňuje vyznačeným částem dokumentu nastavit barvu, velikost, pozici, okraje atp. Dokument zapsaný v jazyku CSS sestává z pravidel. Každé pravidlo je tvořeno dvěma částmi, selektorem a blokem s deklaracemi vlastností. Selektor určuje, na které prvky HTML dokumentu se dané pravidlo vztahuje. Blok deklarací uvádí konkrétní vlastnosti, jež upravují vzhled daných prvků. Každá vlastnost má pevně stanovené jméno a hodnoty, kterých může nabývat. Přípustné typy selektorů a vlastností jsou definovány ve specifikaci CSS. Aby se pravidla definovaná v CSS dokumentu promítla do vzhledu HTML dokumentu, je nutné v hlavičce HTML dokumentu na daný CSS dokument odkázat nepárovou značkou , jak je vidět na obrázku 3.3.
b c c c # cH c cc ;c cccc c F cccc c cccc c 1 5 1 cccc # c cc F cc cccc ; c F ; c cccc c c c c 5 F cccc c; c c cc F cccc # c F
Hlavní nadpis
Obrázek 3.3: HTML dokument a k němu připojený CSS dokument, který nastavuje vzhled značkám
,a
. Pod dokumenty je výsledek, který se zobrazí ve webovém pro- hlížeči. Zobrazený příklad předpokládá, že CSS dokument se jmenuje style.css a je umístěn ve stejném adresáři jako HTML dokument.
Bootstrap Bootstrap5 je populární aplikační rámec, který sestává ze dvou částí. První je napsána v jazyku CSS a druhá v JavaScriptu. Tento odstavec popisuje pouze CSS část, informace o JavaScriptové části jsou uvedeny v kapitole 3.1.3. CSS část Bootstrapu výrazně usnadňuje stylování dokumentů pomocí sady připravených CSS pravidel. Umožňuje například velmi snadno vytvořit mřížkové rozložení stránky (angl. grid layout), které se navíc může dyna- micky přizpůsobovat velikosti zobrazovacího zařízení, což je vhodné při tvorbě responziv- ního designu. Dále pomáhá například s typografií nebo formátováním tabulek, formulářů, navigací či tlačítek.
5Bootstrap - http://getbootstrap.com/
10 3.1.3 JavaScript JavaScript[16] je prototypově založený programovací jazyk. Kód v jazyce JavaScript lze vkládat přímo do HTML dokumentů, protože webové prohlížeče obsahují interpret to- hoto jazyka. Pro vyznačení JavaScriptového kódu se používá HTML značka