Aplikace pro pl´ anov´ an´ı sportovn´ıho tr´ eninku
Bakal´ aˇ rsk´ a pr´ ace
Studijn´ı program: B2646 – Informaˇcn´ı technologie Studijn´ı obor: 1802R007 – Informaˇcn´ı technologie Autor pr´ace: Anzhelika Rysaeva
Vedouc´ı pr´ace: Mgr. Jiˇr´ı Vran´y, Ph.D.
Application for sport training plans
Bachelor thesis
Study programme: B2646 – Information Technology Study branch: 1802R007 – Information Technology
Author: Anzhelika Rysaeva
Supervisor: Mgr. Jiˇr´ı Vran´y, Ph.D.
Zadání bakalářské práce
Aplikace pro plánování sportovního tréninku
Jméno a příjmení: Anzhelika Rysaeva
Osobní číslo: M16000051
Studijní program: B2646 Informační technologie Studijní obor: Informační technologie
Zadávající katedra: Ústav nových technologií a aplikované informatiky Akademický rok: 2018/2019
Zásady pro vypracování:
1. Seznamte se s problematikou programování webových služeb s podporou REST API, s problema- tikou ukládání většího množství provázaných dat a SW řešeními používanými pro tvorbu klientské a serverové části aplikace v jazyce JavaScript.
2. Navrhněte aplikaci pro plánování sportovního tréninku, která umožní trenérům připravovat tré- ninkovém plány pro závodníky a závodníkům naopak tyto tréninkové plány číst a reportovat průběh tréninku. Při návrhu se zaměřte na bezpečnost systému, uživatelskou přístupnost a srozumitelnost.
3. Navrženou aplikaci implementujte a ověřte její praktickou použitelnost. Při implementaci využijte architektury REST, vytvořte serverovou i klientskou část.
Rozsah grafických prací: dle potřeby Rozsah pracovní zprávy: 30 – 40 stran
Forma zpracování práce: tištěná/elektronická
Jazyk práce: Čeština
Seznam odborné literatury:
[1] RICHARDSON, Leonard a Michael AMUNDSEN. RESTful Web APIs. Beijing: O’Reilly, 2013. ISBN 978- 1449358068.
[2] SUBRAMANIAN, Vasan. Pro MERN stack: full stack web app development with Mongo, Express, Re- act, and Node. Berkeley, California: Apress, 2017. Books for professionals by professionals. ISBN 978- 1484226520.
[3] BANKS, Alex a Eve PORCELLO. Learning React: functional web development with React and Redux.
Sebastopol, CA: O’Reilly Media, 2017. ISBN 978-1491954621.
Vedoucí práce: Mgr. Jiří Vraný, Ph.D.
Ústav nových technologií a aplikované informatiky Datum zadání práce: 18. října 2018
Předpokládaný termín odevzdání: 30. dubna 2019
prof. Ing. Zdeněk Plíva, Ph.D.
děkan
L.S.
Ing. Josef Novák, Ph.D.
vedoucí ústavu
Prohlášení
Byla jsem seznámena s tím, že na mou bakalářskou práci se plně vztahuje zákon č. 121/2000 Sb., o právu autorském, zejména § 60 – školní dílo.
Beru na vědomí, že Technická univerzita v Liberci nezasahuje do mých au- torských práv užitím mé bakalářské práce pro vnitřní potřebu Technické univerzity v Liberci.
Užiji-li bakalářskou práci nebo poskytnu-li licenci k jejímu využití, jsem si vědoma povinnosti informovat o této skutečnosti Technickou univerzi- tu v Liberci; v tomto případě má Technická univerzita v Liberci právo ode mne požadovat úhradu nákladů, které vynaložila na vytvoření díla, až do jejich skutečné výše.
Bakalářskou práci jsem vypracovala samostatně jako původní dílo s použi- tím uvedené literatury a na základě konzultací s vedoucím mé bakalářské práce a konzultantem.
Současně čestně prohlašuji, že texty tištěné verze práce a elektronické ver- ze práce vložené do IS/STAG se shodují.
24. srpna 2019 Anzhelika Rysaeva
Podˇ ekov´ an´ı
R´ada bych podˇekovala vˇedouc´ımu sv´e bakal´aˇrsk´e pr´ace panu Mgr.
Jiˇr´ımu Vran´emu, Ph.D. za odborn´e veden´ı a pomoc pˇri zpracov´an´ı t´eto pr´ace.
Abstrakt
Tato bakal´aˇrsk´a pr´ace se zamˇeˇruje na implementaci webov´e apli- kace pro vytrvalostn´ı sporty, kter´a je urˇcena pro cyklistiky, bˇeˇzce, lyˇzaˇre atd. Aplikace nab´ız´ı tren´er˚um moˇznost vytv´aˇret tr´eninkov´e pl´any a sportovc˚um tyto tr´eninkov´e pl´any ˇc´ıst a reportovat pr˚ubˇeh tr´eninku. Dosaˇzen´ı dan´eho c´ıle v t´eto pr´aci prob´ıh´a zaprv´e zkoum´an´ım problematiky programov´an´ı webov´ych sluˇzeb a po- pul´arn´ıch webov´ych ˇreˇsen´ı sportovn´ıch aplikac´ı, a zadruh´e zvolen´ım vhodn´ych technologi´ı pro v´yvoj a n´asledn´ym n´avrhem vlastn´ıho ˇreˇsen´ı, kter´e je podrobnˇe popsan´e v kapitole
”Reˇserˇse“.
Jedn´ım z d˚uleˇzit´ych krok˚u pro dosaˇzen´ı c´ıle je implementace roz- hran´ı, kter´a je podrobnˇeji popsan´a v kapitole
”Webov´a aplikace“. V n´ı se soustˇred´ım na popis pouˇzit´ych technologi´ı a jednotliv´ych im- plementovan´ych funkc´ı pro tuto webovou aplikaci. Webov´a aplikace vyuˇz´ıv´a programovac´ı jazyk TypeScript, JavaScriptovou knihovnu React, pomocn´e React n´astroje Context a knihovnu Ant Design pro implementaci klientsk´e ˇc´asti, a syst´em Node.js a framework Ex- press.js pro realizaci serveru a tak´e nerelaˇcn´ı datab´aze MongoDB pro pr´aci s daty.
Posledn´ı ˇc´ast bakal´aˇrsk´e pr´ace je vˇenov´ana zhodnocen´ı dosaˇzen´ych v´ysledk˚u a pl´an˚um rozˇs´ıˇren´ı funkc´ı t´eto webov´e aplikace do bu- doucna.
Kl´ıˇcov´a slova: Webov´a aplikace, pl´anov´an´ı sportovn´ıho tr´eninku, REST, MongoDB, TypeScript, React, Node.js
Abstract
This bachelor’s thesis focuses on the implementation of an endu- rance sports web application which was developed for sportsmen such as cyclists, runners or skiers. Thanks to this application, coa- ches build training plans for athletes who can access them during their training session. Moreover, this application enables an easy addition of comments to any activity. The goals of this thesis are focused on programming of web services and popular web-based solutions for sport applications. Moreover, it focuses on the se- lection of appropriate technologies for the development of an own application. The above-mentioned process is described in detail in the chapter Research. This thesis is specifically concerned with the implementation of an interface which is discussed in the chapter Web Application. This chapter focuses on the description of tech- nologies used and the features implemented. The web application uses a programming language TypeScript, JavaScript library Re- act, React auxiliary tools Context and the Ant Design library for programming the client – side of the web application. Node.js and server framework Express.js were used to implement the backend part of the web aplication, data management is handled by the non-relational database MongoDB. The last chapter of the thesis evaluates the results achieved and explores the future development of the web application.
Keywords: Web application, sport training plans, REST, Mon- goDB, TypeScript, React, Node.js
Obsah
Seznam zkratek . . . 12
1 Uvod´ 13 2 Reˇserˇse 14 2.1 Problematika programov´an´ı webov´ych sluˇzeb . . . 14
2.1.1 REST API. . . 15
2.1.2 Ukl´ad´an´ı vˇetˇs´ıho mnoˇzstv´ı provozovan´ych dat . . . 16
2.1.3 Softwarov´e ˇreˇsen´ı pro tvorbu klientsk´e a serverov´e ˇc´asti apli- kace v jazyce JavaScript . . . 17
2.2 Dostupn´e webov´e aplikace pro pl´anov´an´ı sportovn´ıho tr´eninku . . . . 19
2.2.1 Trainingpeaks.com . . . 20
2.2.2 Strava.com . . . 21
2.2.3 Trainright.com . . . 23
2.3 Volba funkc´ı, technologi´ı webov´e aplikace a motivace k bakal´aˇrsk´e pr´aci 24 3 Webov´a aplikace 26 3.1 Fundament aplikace . . . 26
3.1.1 V´ıcejazyˇcnost aplikace . . . 26
3.1.2 Klientsk´a ˇc´ast . . . 27
3.1.3 Serverov´a ˇc´ast . . . 29
3.2 Datov´e ´uloˇziˇstˇe . . . 29
3.3 Realizovan´e rozhran´ı webov´e aplikace . . . 31
3.3.1 Profil sportovce . . . 33
3.3.2 Kalend´aˇr tr´enink˚u . . . 34
3.3.3 Pˇrid´an´ı tr´enink˚u . . . 34
3.3.4 Anal´yza v´ysledk˚u tr´enink˚u sportovce . . . 35
3.3.5 Komunikace tren´era a sportovce . . . 38
3.4 Bezpeˇcnost webov´e aplikace . . . 38
4 Z´avˇer 41
Seznam pouˇzit´e literatury 42
Seznam obr´ azk˚ u
2.1 Trainingpeaks.com: Kalend´aˇr z´avodn´ıka. . . 20
2.2 Trainingpeaks.com: seznam z´avodn´ık˚u tren´era a jejich data . . . 21
2.3 Trainingpeaks.com: anal´yza v´ysledn´ych hodnot tr´eninku . . . 22
2.4 Strava.com: praktick´a uk´azka profilu webov´e aplikace . . . 23
2.5 Strava.com: funkce Gobal Heatmap . . . 24
2.6 Webov´a aplikace Trainright.com . . . 25
3.1 Struktura React komponent webov´e aplikace . . . 28
3.2 Model MongoDB . . . 30
3.3 Pˇrihlaˇsovac´ı formul´aˇr . . . 31
3.4 Profil sportovce: osobn´ı ´udaje a t´ydenn´ı statistika tr´enov´an´ı . . . 33
3.5 Profil sportovce: napl´anovan´e tr´eninky . . . 33
3.6 Profil sportovce: odtr´enovan´e tr´eninky . . . 34
3.7 Kalend´aˇr tr´enink˚u: rozhran´ı pro tren´era. . . 34
3.8 Kalend´aˇr tr´enink˚u: rozhran´ı pro sportovce . . . 35
3.9 Pˇrid´an´ı tr´enink˚u: editor tr´enink˚u . . . 35
3.10 Pˇrid´an´ı tr´enink˚u: knihovna tr´enink˚u. . . 36
3.11 Rozhran´ı pro sportovce: pohled na tr´enink a funkce importu v´ysledk˚u do aplikace. . . 36
3.12 Pˇrevod dat z form´atu XML do JSON . . . 37
3.13 Graf v´ysledn´ych hodnot tr´eninku . . . 37
3.14 Funkce komunikace tren´era a sportovce . . . 38
3.15 Z´ahlav´ı odpovˇedi HTTP . . . 39
Seznam zkratek
REST (Representational state transfer) je architektura komunikace server- klient, kter´a byla navrˇzena Royem Fieldingem
SOAP (Simple Object Access Protocol) je protokol slouˇz´ıc´ı pro v´ymˇenu zpr´av pomoc´ı HTTP
React je JavaScriptov´a knihovna urˇcena pro vytv´aˇren´ı uˇzivatelsk´ych roz- hran´ı
Node.js je softwarov´y syst´em, kter´y je zaloˇzen na V8 JavaScript od spoleˇcnosti Google
XML (eXtensible Markup Language) je znaˇckov´ych jazyk vyvinut´y W3C CRUD (Create, Read, Update, Delete) jsou ˇctyˇri operace, kter´e se prov´adˇej´ı
nad z´aznamem v trval´em ´uloˇziˇsti
JSON (JavaScript Object Notation) je datov´y form´at
HTML (HyperText Markup Language) znaˇckovac´ı jazyk pouˇz´ıvan´y pro tvorbu webov´ych str´anek
CSS (Cascading Style Sheets) jsou kask´adov´e styly
JSX (JavaScript XML) je rozˇs´ıˇren´ı syntaxe jazyka JavaScript
PHP (Hypertext Preprocessor) je skriptovac´ı programovac´ı jazyk pro im- plementaci serverov´e ˇc´asti webov´ych aplikac´ı
SQL (Structured Query Language) je dotazovac´ı jazyk, kter´y je pouˇz´ıvan´y pro manipulaci s daty v relaˇcn´ıch datab´az´ıch
MongoDB je dokumentov´a datab´aze
CSRF (ross Site Request Forgery) je metoda ´utoku na webov´e str´anky, kter´a zneuˇz´ıv´a akce uˇzivatel˚u, kteˇr´ı jsou bˇehem ´utoku pˇrihl´aˇseni
XSS (Cross-site scripting) je metoda ´utoku na webov´e aplikaci prostˇrednictv´ım chyb ve skriptech aplikace
API (Application Programming Interface) je rozhran´ı, kter´e je vytvoˇreno za ´uˇcelem programov´an´ı aplikac´ı
UI (User Interface) je uˇzivatelsk´e rozhran´ı
GPX (GPS eXchange Format) je textov´y form´at urˇcen´y pro uchov´av´an´ı dat GPS, kter´y je zaloˇzen´y na XML
1 Uvod ´
V souˇcasn´e dobˇe existuje velk´y v´ybˇer webov´ych aplikac´ı pro r˚uzn´e typy sport˚u, napˇr.
pro pl´anov´an´ı fitness tr´eninku nebo mˇeˇren´ı poˇctu krok˚u a dalˇs´ı. Tyto aplikace maj´ı r˚uzn´a nastaven´ı i funkce a pom´ahaj´ı tren´er˚um a sportovc˚um zlepˇsovat sv˚uj v´ykon.
Tato pr´ace je zaloˇzena na splnˇen´ı hlavn´ıho c´ıle — realizaci webov´eho prostˇred´ı, kter´e umoˇzn´ı tren´er˚um pˇripravovat tr´eninkov´e pl´any pro sportovce a sportovc˚um umoˇzˇnuje tyto pl´any ˇc´ıst a reportovat pr˚ubˇeh tr´eninku. Metody ˇreˇsen´ı dan´eho c´ıle spoˇc´ıvaj´ı ve zkoum´an´ı dvou d˚uleˇzit´ych aspekt˚u — problematiky programov´an´ı webov´ych sluˇzeb a existuj´ıc´ıch webov´ych prostˇred´ı pro pl´anov´an´ı tr´enink˚u.
Co se t´yˇce prvn´ıho aspektu, je vhodn´e se soustˇredit na problematiku v´yvoje webov´ych sluˇzeb s podporou REST API, problematiku ukl´ad´an´ı vˇetˇs´ıho mnoˇzstv´ı provozovan´ych dat a existuj´ıc´ı softwarov´a ˇreˇsen´ı pro tvorbu klienta a serveru v jazyce JavaScript. Tyto technologie byly poˇzadavkem pro tuto pr´aci a jsou tak´e vhodn´e pro v´yvoj modern´ıch webov´ych sluˇzeb. Co se druh´eho aspektu t´yˇce, efektivn´ım zp˚usobem je zanalyzovat existuj´ıc´ı ˇreˇsen´ı sportovn´ıch webov´ych aplikac´ı, zjistit jak´e funkce jsou pro tren´era i pro sportovce praktick´e, a na z´akladˇe zjiˇstˇen´ych informac´ı navrhnout a implementovat webovou aplikaci, kter´a bude pˇrin´aˇset nˇeco uˇziteˇcn´eho nebo nov´eho pro obˇe strany.
2 Reˇ serˇ se
Tato kapitola popisuje problematiku programov´an´ı webov´ych sluˇzeb s podporou REST API, na pˇr´ıkladˇe porovn´an´ı architektury rozhran´ı REST a SOAP proto- kolu pro v´ymˇenu zpr´av pˇres s´ıt’. Tak´e seznamuje s problematikou ukl´ad´an´ı vˇetˇs´ıho mnoˇzstv´ı provozovan´ych dat prostˇrednictv´ım anal´yzy relaˇcn´ıch a nerelaˇcn´ıch da- tab´az´ı, na pˇr´ıkladˇe MySQL a MongoDB. D´ale jsou zde pops´any technologie pro tvorbu klientsk´e a serverov´e ˇc´asti webov´e aplikace, coˇz je programovac´ı jazyk Ja- vaScript, jeho knihovny a frameworky a tak´e programovac´ı jazyk PHP a platforma Node.js. Po rozboru problematiky programov´an´ı webov´ych sluˇzeb tato kapitola ana- lyzuje dostupn´e webov´e aplikace pro pl´anov´an´ı sportovn´ıho tr´eninku a na pˇr´ıkladˇe Trainingpeaks.com, Strava.com a Trainright.com zjiˇst’uje praktick´e pouˇziteln´e funkce sportovn´ıch webov´ych aplikac´ı. Na konci je uveden n´avrh funkc´ı vlastn´ı webov´e apli- kace a zvolen´e technologie pro programov´an´ı t´eto webov´e aplikace spolu s motivac´ı pro tuto pr´aci.
2.1 Problematika programov´ an´ı webov´ ych sluˇ zeb
Webov´a sluˇzba je softwarov´e prostˇred´ı, kter´e umoˇzˇnuje komunikaci mezi klientsk´ymi a serverov´ymi aplikacemi na webu. Sluˇzby mohou byt vyhled´any po s´ıti a mohou b´yt tak´e vyvol´any. Pˇri vyvol´an´ı by mˇela webov´a sluˇzba poskytnout urˇcit´e funkce klientovi, kter´y ji vyvolal.[1]
Po pˇreˇcten´ı t´eto obecn´e ale velmi pˇresn´e definice je vidˇet, ˇze nen´ı zde zm´ınka o s´ıt’ov´em protokolu, programovac´ım jazyku ani softwarov´e platformˇe. To znamen´a, ˇze neexistuj´ı ˇz´adn´a omezen´ı na pouˇzit´ı technologie. To znamen´a, ˇze tento softwarov´y syst´em umoˇzˇnuje komunikaci a v´ymˇenu dat nˇekolika informaˇcn´ıch syst´em˚u, nehledˇe na pouˇzit´e technologie, jazyky a protokoly komunikace.
Problematika programov´an´ı webov´ych sluˇzeb spoˇc´ıv´a v tom, ˇze je pro kaˇzd´y projekt jeˇstˇe na zaˇc´atku v´yvoje potˇreba zvolit vhodn´e technologie pro rychl´y a
efektivn´ı v´yvoj. To jsou technologie pro programov´an´ı klientsk´e a serverov´e ˇc´asti aplikace, pak n´avrh datov´eho ´uloˇziˇstˇe a v´ybˇer architektury rozhran´ı nebo protokoly v´ymˇeny zpr´av.[1]
N´asleduj´ıc´ı podkapitoly popisuj´ı nˇekolik existuj´ıc´ıch ˇreˇsen´ı pro programov´an´ı webov´ych sluˇzeb a webov´ych aplikac´ı a pak vol´ı vhodn´e technologie pro tuto pr´aci.
2.1.1 REST API
Pro v´ymˇenu informac´ı v decentralizovan´em distribuovan´em prostˇred´ı se pouˇz´ıvaj´ı protokoly a architektury. Pˇr´ıkladem takov´ych protokol˚u a architektur pro webov´e sluˇzby jsou SOAP (Simple Object Access Protokol), REST( Representational State Transfer) a XML-RPC (XML Remote Procedure Call).
SOAP protokol je odvozen z XML-RPC a je jeho dalˇs´ım krokem ve v´yvoji, zat´ımco REST je sp´ıˇs architektura komunikace zaloˇzen´a na manipulaci s objekty CRUD (Create Read Update Delete). Samozˇrejmˇe existuj´ı i jin´e protokoly, ale protoˇze se ˇsiroce nepouˇz´ıvaj´ı, zamˇeˇr´ım se na dvˇe hlavn´ıch technologie – SOAP a REST. Vzhledem k tomu, ˇze XML-RPC je
”zastaral´y“ protokol, nebudu ho analy- zovat detailnˇeji.[2]
REST neboli Representational state transfer je architektura rozhran´ı, navrˇzen´a pro syst´emy jako je napˇr. WWW (world wide web), stavˇen´y pro webov´e sluˇzby.
Architektura REST je z hlediska pouˇzit´ı velmi jednoduch´a. D´ıky vzhledu pˇr´ıchoz´ıho poˇzadavku m˚uˇzeme okamˇzitˇe urˇcit, co dan´y poˇzadavek dˇel´a bez nutnosti pochopen´ı form´atu (na rozd´ıl od SOAP, XML-RPC). REST je povaˇzov´an za m´enˇe n´aroˇcn´y, protoˇze data jsou pˇren´aˇsena bez pouˇzit´ı dalˇs´ıch vrstev a nen´ı tedy nutno parso- vat poˇzadavek pro pochopen´ı a nen´ı potˇreba pˇrekl´adat data z jednoho form´atu do druh´eho. Poˇzadavky a odpovˇedi RESTful syst´em˚u mohou b´yt pˇren´aˇseny v ASCII, XML, JSON nebo v jak´ychkoliv jin´ych form´atech, kter´e rozpozn´a klient a server.
Form´at JSON je jednoduˇsˇs´ı a pochopiteln´y pro ˇcten´ı a psan´ı. Ve vˇetˇsinˇe pˇr´ıpad˚u je ide´aln´ı pro v´ymˇenu dat pˇres internet. [3]
SOAP protokol slouˇz´ı pro v´ymˇenu zpr´av a vyuˇz´ıv´a XML ke k´odov´an´ı poˇzadavku a odpovˇed´ı mezi klientem a serverem. Tento protokol velmi dlouho slouˇzil pro zas´ıl´an´ı zpr´av, pouˇz´ıvaly ho t´emˇeˇr vˇsechny webov´e sluˇzby. SOAP se vˇetˇsinou pouˇz´ıv´a pro podnikov´e webov´e sluˇzby vyˇzaduj´ıc´ı vysok´y stupeˇn zabezpeˇcen´ı, napˇr´ıklad pro fi- nanˇcn´ı a platebn´ı sluˇzby. Dalˇs´ım argumentem pro uplatnˇen´ı SOAP je podpora starˇs´ıch webov´ych sluˇzeb, kter´e maj´ı hodnˇe uˇzivatel˚u, a ty se pˇripojuj´ı ke sv´ym
sluˇzb´am prostˇrednictv´ım rozhran´ı SOAP. [2]
Vzhledem k tomu, ˇze v´yvoj´aˇri v dneˇsn´ı dobˇe potˇrebuj´ı vytv´aˇret lehk´e webov´e a mobiln´ı aplikace, z´ıskala flexibilnˇejˇs´ı architektura REST rychle na popularitˇe. A proto je v t´eto bakal´aˇrsk´e pr´aci pˇri implementaci vlastn´ıho ˇreˇsen´ı webov´e aplikace, podle m´eho n´azoru, vhodn´e pouˇzit´ı REST architektury komunikace klienta a serveru, coˇz pˇrin´aˇs´ı flexibilitu a jednoduchost z hlediska uˇz´ıv´an´ı a s pouˇzit´ım v´ymˇeny dat ve form´atu JSON pˇrin´aˇs´ı lepˇs´ı pochopitelnost pro ˇcten´ı a psan´ı zpr´av.
2.1.2 Ukl´ ad´ an´ı vˇ etˇ s´ıho mnoˇ zstv´ı provozovan´ ych dat
Jeˇstˇe pˇred zaˇc´atkem v´yvoje jak´ehokoliv softwaru je pro v´yvoj´aˇre hlavn´ı ot´azkou volba relaˇcn´ı (SQL) nebo nerelaˇcn´ı (NoSQL) datab´aze.
Relaˇcn´ı datab´aze pouˇz´ıvaj´ı dotazovac´ı jak´ym SQL (Structure Query Language) pro definov´an´ı a zpracov´an´ı strukturovan´ych dat, coˇz pˇredstavuje velk´e moˇznosti pro softwarov´y v´yvoj. D˚uleˇzitou vlastnost´ı relaˇcn´ı datab´aze je to, ˇze data jsou pre- zentov´ana ve formˇe tabulek. MySQL, Oracle, PostgreSQL a Microsoft SQL server jsou syst´emy ˇr´ızen´ı b´aze dat podporuj´ıc´ı relaˇcn´ı model.[4]
Co se nerelaˇcn´ıch datab´az´ı t´yˇce, existuje velk´e mnoˇzstv´ı NoSQL technologi´ı - dokumentov´e, objektov´e, grafov´e atp. Napˇr´ıklad dokumentov´a datab´aze prezentuje data ve formˇe dokument˚u, kter´e v´yvoj´aˇr m˚uˇze bˇehem v´yvoje softwaru vytv´aˇret, aniˇz by musel nastavovat jejich struktury, kaˇzd´y dokument pˇritom m˚uˇze m´ıt svou vlastn´ı strukturu. Pro pr´aci s nerelaˇcn´ı datab´az´ı jsou vhodn´e syst´emy ˇr´ızen´ı b´aze dat podporuj´ıc´ı nerelaˇcn´ı model, coˇz jsou MongoDB, BigTable, Redis, RavenDB, Cassandra, HBase, CouchDB atd.[5]
Pro lepˇs´ı pochopen´ı v´yhod a nev´yhod SQL a NoSQL syst´em˚u ˇr´ızen´ı b´aze dat a pro volbu nejvhodnˇejˇs´ıho syst´emu pro vlastn´ı ˇreˇsen´ı webov´e aplikace d´ale po- rovn´av´am relaˇcn´ı a nerelaˇcn´ı model na pˇr´ıkladˇe MySQL a MongoDB.
MySQL je vysoce vyvinut´y datab´azov´y syst´em, kolem kter´eho je vytvoˇrena velk´a komunita v´yvoj´aˇr˚u, obsahuje velk´e mnoˇzstv´ı pˇr´ıklad˚u a je vysoce spolehliv´y. Tato datab´aze je dostupn´a na vˇsech hlavn´ıch platform´ach vˇcetnˇe Linuxu, Windows, BSD nebo Solarisu. Jedn´a se o open source datab´azi, kter´a je volnˇe dostupn´a. Co se t´yˇce datab´aze MongoDB, ta umoˇzˇnuje pruˇznˇe pracovat s datov´ym sch´ematem, aniˇz by bylo nutn´e mˇenit samotn´a data, nab´ız´ı vysok´y v´ykon pˇri prov´adˇen´ı jednoduch´ych dotaz˚u a v´yvoj´aˇr m˚uˇze pˇrid´avat pole nebo sloupce do t´eto datab´aze bez poˇskozen´ı struktury dat a v´ykonu syst´emu.[6]
V pˇr´ıpadˇe t´eto pr´ace jsou d˚uleˇzit´a krit´eria: jednoduˇse mˇenit strukturu datab´aze a pˇrid´avat nov´e datov´e typy, pak rozˇs´ıˇren´ı funkc´ı webov´e aplikace bˇehem v´yvoje, technick´a podpora a zkuˇsenosti v´yvoj´aˇr˚u syst´emu ˇr´ızen´ı b´aze dat.
MySQL je tou spr´avnou volbou pro kaˇzd´y objekt, kter´y se m˚uˇze spolehnout na pˇreddefinovanou strukturu a specifikovan´a sch´emata. Oproti tomu MongoDB je skvˇelou volbou pro rychlerostouc´ı projekty bez specifick´e struktury. Pokud v´yvoj´aˇr nen´ı schopen na zaˇc´atku projektu definovat strukturu datab´aze nebo se projekt neust´ale mˇen´ı, je dobr´e zvolit MongoDB, coˇz odpov´ıd´a poˇzadavk˚um na datab´azi webov´e aplikace t´eto bakal´aˇrsk´e pr´ace. A proto je MongoDB vyhovuj´ıc´ı volbou pro tuto webovou aplikaci.[6]
2.1.3 Softwarov´ e ˇ reˇ sen´ı pro tvorbu klientsk´ e a serverov´ e ˇ c´ asti aplikace v jazyce JavaScript
Prvn´ı softwarov´e ˇreˇsen´ı pro tvorbu klientsk´e a serverov´e ˇc´asti aplikace v jazyce Ja- vaScript, kter´e budu analyzovat, je kombinace jazyk˚u HTML, CSS a JavaScript pro klientskou ˇc´ast a taky PHP pro serverovou ˇc´ast. Toto ˇreˇsen´ı pro klientskou ˇc´ast vyˇzaduje pouˇzit´ı znaˇckovac´ıho jazyka HTML pro vykreslen´ı struktury webov´e str´anky, kask´adov´e styly CSS pro popis zp˚usobu zobrazen´ı element˚u na webov´e str´ance a skriptovac´ı jazyk JavaScript pro vytv´aˇren´ı interaktivn´ı webov´e str´anky, coˇz znamen´a programov´an´ı web str´anky nebo aplikace samostatnˇe, bez pomocn´ych technologi´ı, kter´e zjednoduˇs´ı pr´aci program´atora. Takov´e ˇreˇsen´ı je vhodn´e pro jed- noduch´e str´anky nebo mal´e webov´e aplikace. S pouˇzit´ım knihoven nebo framework˚u lze ˇreˇsit celou ˇradu probl´em˚u implementace, zabezpeˇcen´ı a testov´an´ı aplikace, coˇz v´yvoj aplikace zjednoduˇs´ı a zrychl´ı.
Pouˇzit´ı skriptovac´ıho jazyka PHP (Personal Home Page) pro serverovou ˇc´ast webov´e aplikace m´a sv´e v´yhody a nev´yhody. Jednou z v´yhod PHP je obrovsk´a k´odov´a datab´aze pro vˇsechny druhy ˇreˇsen´ı. Na rozd´ıl od jazyk˚u Java nebo Python a dalˇs´ıch univerz´aln´ıch programovac´ıch jazyk˚u byl PHP navrˇzen speci´alnˇe pro web, a z toho d˚uvodu obsahuje potˇrebn´e funkce pro pr´aci s HTML, servery ˇci datab´azemi.
Nev´yhodou PHP je to, ˇze PHP n´asleduje klasick´y model klient-server, kde ˇz´adost o str´anku spouˇst´ı aplikaci, pˇripojuje se k datab´azi, zpracov´av´a a vykresluje HTML.
D´ıky tomu je PHP ponˇekud pomalejˇs´ı neˇz napˇr´ıklad platforma Node.js.[7]
JavaScriptov´e knihovny a frameworky, napˇr´ıklad knihovna React nebo framework Angular, umoˇzˇnuj´ı vytv´aˇren´ı komponent, kter´e dˇel´ı webovou str´anku na kousky
k´odu, jeˇz se snadnˇeji lad´ı a pˇr´ıpadnˇe jsou znovu pouˇziteln´e na jin´ych str´ank´ach. Pˇri pouˇzit´ı JavaScriptov´ych knihoven nebo framework˚u se st´ale uplatˇnuj´ı HTML, CSS a JavaScript a k tomu se nab´ız´ı moˇznost vytv´aˇret vlastn´ı komponenty.[8]
Dalˇs´ı softwarov´e ˇreˇsen´ı pro tvorbu klientsk´e a serverov´e ˇc´asti aplikace v jazyce JavaScript je s vyuˇzit´ım JavaScriptov´ych framework˚u nebo knihoven pro klientskou ˇc´ast plus softwarov´e platformy Node.js a frameworku Express.js pro serverovou ˇc´ast.
Angular je JavaScriptov´y framework, kter´y je napsan´y v jazyce TypeScript a byl vyvinut spoleˇcnost´ı Google. React je JavaScriptov´a knihovna vyvinut´a spoleˇcnost´ı Facebook a tak´e slouˇz´ı pro vytv´aˇren´ı uˇzivatelsk´ych rozhran´ı. React a Angular maj´ı mnoho podobn´ych prvk˚u, ale tak´e mnoho rozd´ıl˚u. Jeden z nich je ten, ˇze Angu- lar slouˇz´ı jako plnohodnotn´y framework MVC, zat´ımco React d´av´a program´atorovi mnohem v´ıce svobody a poskytuje
”view“ v MVC, coˇz znamen´a, ˇze Model a Cont- roller si v´yvoj´aˇr mus´ı vyˇreˇsit s´am. Z tohoto d˚uvodu si v´yvoj´aˇr m˚uˇze vybrat libovoln´e vlastn´ı knihovny. Kaˇzd´y projekt React je odliˇsn´y a vyˇzaduje vlastn´ı strukturu a ar- chitekturu projektu.[8]
React d´ale tak´e poskytuje zaj´ımav´e n´astroje, jak´ymi jsou n´astroje pro testov´an´ı komponent, knihovny pro pˇrid´an´ı funkˇcnost´ı, do nichˇz napˇr´ıklad patˇr´ı React-route pro smˇerov´an´ı, Redux nebo MobX pro spr´avu stavu aplikace. React pouˇz´ıv´a virtu´aln´ı DOM a Angular m´a tak´e vlastn´ı implementaci DOMu - incremental DOM. D´ıky tˇemto technologi´ım jsou Angular a React nesm´ırnˇe rychl´e. V´yvoj´aˇri JavaScriptov´e knihovny React se rozhodli zkombinovat ˇsablony uˇzivatelsk´eho rozhran´ı a logiku JavaScriptu a v´ysledkem je
”JSX“, kter´y pouˇz´ıv´a jazyk podobn´y jazyku XML. JSX umoˇzˇnuje ps´at znaˇcky pˇr´ımo do k´odu JavaScriptu a usnadˇnuje v´yvoj, protoˇze vˇse je na jednom m´ıstˇe. React vyˇzaduje pouze znalosti JavaScriptu, zat´ımco pˇri pr´aci s frameworkem Angular mus´ı v´yvoj´aˇr zn´at i jeho specifickou syntax. Jak uˇz bylo zm´ınˇeno, React a Angular jsou oba zaloˇzen´e na komponent´ach. Komponenta obdrˇz´ı vstup a po nˇejak´e intern´ı logice vr´at´ı vykreslenou ˇsablonu uˇzivatelsk´eho rozhran´ı (napˇr´ıklad pˇrihlaˇsovac´ı formul´aˇr nebo tabulku) jako v´ystup. Komponenty by mˇely b´yt snadno pouˇziteln´e v r´amci jin´ych komponent nebo projekt˚u.[9]
Pomoc´ı platformy Node.js a frameworku Express.js lze vytv´aˇret vysoce ˇsk´alovateln´e serverov´e aplikace. Node.js byl vytvoˇren v roce 2009 Ryanem Dahlem ve spoleˇcnosti Google a slouˇz´ı jako softwarov´a platforma, zaloˇzen´a na JavaScriptu V8.[10]
Node.js umoˇzˇnuje vytv´aˇret aplikace, kter´e mohou zpracov´avat v´ıce poˇzadavk˚u najednou pomoc´ı fronty ud´alost´ı JavaScriptu, jeˇz maximalizuj´ı vyuˇzit´ı jednoho pro- cesoru a pamˇeti poˇc´ıtaˇce pˇri zpracov´an´ı v´ıce poˇzadavk˚u neˇz bˇeˇzn´e servery. D´ıky t´eto
funkci je Node.js vynikaj´ıc´ı volbou pro aplikace v re´aln´em ˇcase nebo pro ty, kter´e vyˇzaduj´ı mnoho I/O operac´ı. Jednou z hlavn´ıch v´yhod Node.js je to, ˇze mnoho popul´arn´ıch JavaScriptov´ych knihoven, jako jsou React nebo Vue, je naps´ano v Ja- vaScriptu, kter´y je jazykem vˇsech modern´ıch prohl´ıˇzeˇc˚u. M´ıt jeden jazyk v klientsk´e a serverov´e ˇcast´ı webov´e aplikace je pro podporu aplikace a pro koordinaci mezi ˇcleny t´ymu velmi dobr´e. Node.js m´a tak´e sv´e nev´yhody, k nimˇz patˇr´ı napˇr´ıklad jeho architektura, kter´a m´a urˇcit´a omezen´ı, jako je n´ızk´a efektivita pˇri vysok´em zat´ıˇzen´ı CPU, aˇckoliv se Node.js v konkurenˇcn´ım zpracov´an´ı mnoha poˇzadavk˚u, st´ale se mu nedaˇr´ı s takov´ymi operacemi, jak´ymi jsou tvorba grafiky nebo zpracov´an´ı obrazu.
Koncept a implementace Node.js jsou skvˇel´e pro aplikace v re´aln´em ˇcase.[10]
Na z´akladˇe anal´yzy existuj´ıc´ıch ˇreˇsen´ı pro tvorbu klientsk´e a serverov´e ˇc´asti apli- kace byla pro klientskou ˇc´ast zvolena JavaScriptov´a knihovna React a pro serverovou ˇc´ast platforma Node.js a framework Express.js z toho d˚uvodu, ˇze knihovna React je zaloˇzena na komponent´ach, coˇz umoˇzˇnuje snadnˇejˇs´ı ladˇen´ı a pouˇzit´ı stejn´ych kom- ponent na nˇekolika m´ıstech ve webov´e aplikaci a pouˇzit´ı stejn´eho jazyka v serverov´e a klientsk´e ˇc´asti pˇri implementaci webov´e aplikace je velmi dobr´e pro jej´ı podporu.
2.2 Dostupn´ e webov´ e aplikace pro pl´ anov´ an´ı spor- tovn´ıho tr´ eninku
Vˇetˇsina lid´ı, kter´a se zaj´ım´a o sport, v souˇcasn´e dobˇe pouˇz´ıv´a pomocn´e softwary, z nichˇz kaˇzd´y m´a sv´e vlastn´ı poˇzadavky k funkc´ım takov´eho softwaru. Uˇzivatel´e tˇechto softwar˚u jsou velmi ˇcasto profesion´aln´ı z´avodn´ıci a tren´eˇri, kteˇr´ı potˇrebuj´ı pohodln´e a srozumiteln´e rozhran´ı pro sledov´an´ı sv´ych v´ykon˚u a pokrok˚u, synchronizaci dat o tr´eninc´ıch z r˚uzn´ych zaˇr´ızen´ı, pl´anov´an´ı, sledov´an´ı a anal´yzu tr´enink˚u a oboustran- nou komunikaci. Mezi takov´e aplikace pro pl´anov´an´ı sportovn´ıho tr´eninku se ˇrad´ı napˇr´ıklad Trainingpeaks.com, Strava.com nebo Trainright.com.
Tato bakal´aˇrsk´a pr´ace je zamˇeˇrena na webovou aplikaci pro vytrvalostn´ı sporty.
Napˇr´ıklad aplikace pro cyklisty se dˇel´ı do nˇekolika kategori´ı. Jednou z nich jsou aplikace, kter´e prostˇrednictv´ım navigace urˇcuj´ı ujetou vzd´alenost z´avodn´ıka. Dalˇs´ı takovou kategori´ı jsou aplikace, pom´ahaj´ıc´ı pl´anovat trasu j´ızdy a obsahuj´ı pˇr´ıruˇcky pro opravu kol. Tato kapitola na pˇr´ıkladu placen´ych a neplacen´ych aplikac´ı popisuje podrobnˇeji sportovn´ı webov´e aplikace, kter´ymi jsem se inspirovala.
2.2.1 Trainingpeaks.com
Na trhu existuje mnoho elektronick´ych asistent˚u, kter´e pom´ahaj´ı tren´er˚um a z´avodn´ık˚um vytv´aˇret a reportovat tr´eninky, jako jsou webov´e a mobiln´ı aplikace, pulsmetry, sen- sory aktivit atd. V´yvoj´aˇri tˇechto softwar˚u pouˇz´ıvaj´ı vlastn´ı algoritmy a v d˚usledku toho udrˇzuj´ı sv´e vlastn´ı rozhran´ı pro anal´yzu sportovn´ıch dat.
Jedn´ım z takov´ych softwar˚u je Trainingpeaks.com, kter´y nab´ız´ı mnoho zaj´ımav´ych ˇreˇsen´ı jak pro z´avodn´ıka, tak tren´era. TrainingPeaks.com je placen´a webov´a aplikace pro triatlon, cyklistiku, bˇeh a jin´e sporty. Kaˇzd´y z´avodn´ık, kter´y m´a stanoven´y urˇcit´y c´ıl, m´a d´ıky t´eto webov´e aplikaci rozhran´ı pro tyto ´uˇcely. Z´avodn´ık m´a moˇznost vy- brat si hotov´y tr´enink nebo urˇcit´eho tren´era, jenˇz mu pˇriprav´ı tr´enink na m´ıru. Tyto tr´eninky se objev´ı v kalend´aˇri z´avodn´ıka a z´avodn´ık m´a moˇznost komentovat pr˚ubˇeh tr´eninku a tak´e se sv´ym tren´erem komunikovat (obr´azek 2.1). [11]
Obr´azek 2.1: Trainingpeaks.com: Kalend´aˇr z´avodn´ıka
Jednou z d˚uleˇzit´ych funkc´ı webov´e aplikace Trainingpeaks.com je to, ˇze si z´avodn´ık m˚uˇze synchronizovat, nahr´avat nebo si pˇretahovat data tr´enink˚u z jin´ych webov´ych nebo mobiln´ıch aplikac´ı, kter´e pouˇz´ıv´a. Mezi hlavn´ı v´yhody t´eto webov´e aplikace oproti konkurenci patˇr´ı, ˇze podporuje import dat ze zaˇr´ızen´ı a program˚u od ta- kov´ych v´yrobc˚u, jako jsou Garmin, Polar, Timex ˇci Strava. Jak uˇz jsem zm´ınila, webov´a aplikace Trainingpeaks.com obsahuje rozhran´ı i pro tren´era. Jednou z funkc´ı
tren´ersk´eho rozhran´ı je, ˇze tren´er vid´ı seznam sv´ych z´avodn´ık˚u a jejich data na jed- nom m´ıstˇe (obr´azek 2.2).[11]
Obr´azek 2.2: Trainingpeaks.com: seznam z´avodn´ık˚u tren´era a jejich data Tato funkce usnadˇnuje pl´anov´an´ı a sledov´an´ı pr˚ubˇehu tr´enink˚u a komunikaci se z´avodn´ıky. Dalˇs´ı zaj´ımavou funkc´ı pro tren´ery je moˇznost vytv´aˇret strukturovan´a cviˇcen´ı, kter´a se automaticky aktualizuj´ı do kalend´aˇre urˇcit´eho z´avodn´ıka. Tren´er si tato cviˇcen´ı m˚uˇze uloˇzit do seznamu cviˇcen´ı a pak je snadno aplikovat do kalend´aˇre kaˇzd´eho z´avodn´ıka. Funkce Performance management chart umoˇzˇnuje ve formˇe grafu v pr˚ubˇehu cviˇcen´ı monitorovat d˚uleˇzit´e hodnoty a zajistit, jestli z´avodn´ık dos´ahl sv´ych c´ıl˚u. Posledn´ı avˇsak velice d˚uleˇzitou funkc´ı je, ˇze webov´a aplikace Trainingpe- aks.com analyzuje v´ysledn´e hodnoty tr´eninku (obr´azek 2.3), jako jsou v´ykon, srdeˇcn´ı tep a dalˇs´ı data. T´ım pom´ah´a tren´erovi vylepˇsit i tr´enink do budoucna.[11]
Mˇes´ıˇcn´ı pˇredplatn´e t´eto webov´e aplikace je pro z´avodn´ıky 19,95 dolar˚u, ˇctvrtletn´ı pˇredplatn´e je za 16,33 dolar˚u mˇes´ıˇcnˇe a celoroˇcn´ı pˇredplatn´e za 9,92 dolar˚u mˇes´ıˇcnˇe.
Cena pro tren´era je stanovena podle poˇctu tr´enovan´ych z´avodn´ık˚u. Do ˇctyˇr z´avodn´ık˚u je cena 19 dolar˚u mˇes´ıˇcnˇe plus jednor´azov´y vstupn´ı poplatek 99 dolar˚u. Pˇri neome- zen´em poˇctu z´avodn´ık˚u je cena 49 dolar˚u a takt´eˇz vstupn´ı poplatek 99 dolar˚u.[11]
2.2.2 Strava.com
Jedn´a se o americk´y projekt, kter´y m´a jak webovou, tak mobiln´ı verzi aplikace a je urˇcen´y v´yhradnˇe pro z´avodn´ıky. Aplikace Strava je velmi obl´ıben´a d´ıky tomu, ˇze kombinuje funkci tr´eninkov´eho den´ıku, kter´y zobrazuje vˇsechny kl´ıˇcov´e ukaza- tele, jak´ymi jsou vzd´alenost, rychlost, spotˇrebovan´e kalorie, puls, intenzita a z´atˇeˇz tr´eninku a tak´e funkce GPS sledov´an´ı a soci´aln´ı s´ıtˇe. Tato aplikace z´avodn´ıkovi umoˇzˇnuje zaznamen´avat svou ˇcinnost, sd´ılet fotografie z pr˚ubˇehu tr´eninku a z´ısk´avat hodnocen´ı a koment´aˇre od ostatn´ıch z´avodn´ık˚u (obr´azek 2.4).[12]
Obr´azek 2.3: Trainingpeaks.com: anal´yza v´ysledn´ych hodnot tr´eninku
Podle m´eho n´azoru je velkou konkurenˇcn´ı v´yhodou aplikace Strava to, ˇze umoˇzˇnuje synchronizaci dat o tr´eninku z jin´ych zaˇr´ızen´ı a obsahuje data z r˚uzn´ych softwar˚u, napˇr´ıklad Zwift, Sunto, Amazfit, Fitbit, MIO, Polar, Tacx atd.
Dalˇs´ı funkc´ı, kterou se Strava liˇs´ı od konkurence, je Global Heatmap. Strava prostˇrednictv´ım sv´e aplikace shrom´aˇzdila informace o v´ıce neˇz 100 milionech j´ızd na kole sv´ych uˇzivatel˚u. Tyto trasy jsou um´ıstˇeny na celosvˇetov´e mapˇe, coˇz umoˇzˇnuje glob´aln´ı hodnocen´ı sportu z r˚uzn´ych zem´ı. Tato mapa ˇzivˇe ukazuje m´ısta, kde ˇzij´ı obyvatel´e, kteˇr´ı se vˇenuj´ı sportu. Na obr´azku 2.5 je vidˇet mapa vˇsech j´ızd na kole za obdob´ı dvou let.[12]
Tato mapa se skl´ad´a ze 700 milion˚u ˇcinnost´ı, ze 7,7 bilion˚u rastrovan´ych pi- xel˚u, z 5 terabajt˚u vstupn´ıch dat, z celkov´e vzd´alenosti 16 miliard kilometr˚u a z celkovˇe zaznamenan´e aktivity ˇcin´ıc´ı 100000 let. Jedinou nev´yhodou, kterou jsem v aplikaci Strava objevila, bylo to, ˇze aplikace nenab´ız´ı ˇz´adn´e rozhran´ı pro tren´era a tren´er nem´a ˇz´adnou moˇznost vytv´aˇret, analyzovat a ani jakkoliv ˇr´ıdit tr´enink. Co se t´yk´a cenov´e politiky, z´avodn´ık m˚uˇze vyuˇz´ıt bezplatn´e verze, v nichˇz je vˇetˇsina funkc´ı vypnuta. Pokud z´avodn´ık bude cht´ıt pouˇz´ıvat veˇsker´e funkce, kter´e aplikace
Obr´azek 2.4: Strava.com: praktick´a uk´azka profilu webov´e aplikace
Strava nab´ız´ı, mus´ı si zaplatit mˇes´ıˇcn´ı pˇredplatn´e, pohybuj´ıc´ı se v ˇr´adech jednotek dolar˚u.[12]
Podle m´eho n´azoru je aplikace Strava nejv´ıce propracovan´a ze vˇsech dostupn´ych aplikac´ı a z´aroveˇn pro z´avodn´ıka obsahuje vˇetˇs´ı mnoˇzstv´ı uˇziteˇcn´ych funkc´ı.
2.2.3 Trainright.com
Dalˇs´ı aplikac´ı pro pl´anov´an´ı sportovn´ıho tr´eninku, kterou jsem se inspirovala, je Trainright.com, jeˇz slouˇz´ı jako informaˇcn´ı port´al pro z´avodn´ıky.
Trainright.com nenab´ız´ı rozhran´ı pro z´avodn´ıka ani tren´era, ale vyuˇz´ıv´a rozhran´ı aplikace Trainingpeaks.com, kterou jsem zmiˇnovala jiˇz dˇr´ıve. Jelikoˇz je tato webov´a aplikace sp´ıˇse informaˇcn´ıho charakteru, tren´eˇri a z´avodn´ıci tak maj´ı moˇznost se dozvˇedˇet hodnˇe zaj´ımav´ych informac´ı o cyklistice, o r˚uzn´ych sportovn´ıch akc´ıch a t´aborech a tak´e maj´ı prostˇrednictv´ım t´eto aplikace moˇznost si na tyto akce koupit vstup (obr´azek 2.6).[13]
Jej´ı nejvˇetˇs´ı nev´yhodou je podle m´eho n´azoru finanˇcn´ı n´aroˇcnost a to, ˇze pro
´
uˇcely pl´anov´an´ı a anal´yzy tr´enink˚u vyuˇz´ıv´a ciz´ı rozhran´ı. Naopak nejvˇetˇs´ı v´yhodou oproti konkurenˇcn´ım ˇreˇsen´ım je to, ˇze Trainright.com funguje jako soci´aln´ı s´ıt’, kter´a sdruˇzuje cyklistickou komunitu na z´akladˇe poˇr´ad´an´ı r˚uzn´ych sportovn´ıch akc´ı.
Obr´azek 2.5: Strava.com: funkce Gobal Heatmap
2.3 Volba funkc´ı, technologi´ı webov´ e aplikace a mo- tivace k bakal´ aˇ rsk´ e pr´ aci
Motivac´ı pro tuto bakal´aˇrskou pr´aci bylo tedy vytvoˇrit aplikaci, kter´a sportovc˚um a tren´er˚um poskytne z´akladn´ı uˇziteˇcn´e funkce a pˇr´ıjemn´e rozhran´ı pro pr´aci, a kter´a se pˇr´ıpadnˇe stane z´akladem sportovn´ı open source aplikace.
Funkce webov´e aplikace t´eto bakal´aˇrsk´e pr´ace byly navrhnuty na z´akladˇe anal´yzy existuj´ıc´ıch sportovn´ıch webov´ych aplikac´ı a tak´e na z´akladˇe komunikace s koneˇcn´ym uˇzivatelem sportovn´ıch aplikac´ı, coˇz je nejlepˇs´ı zp˚usob, jak zjistit praktick´e pouˇziteln´e funkce pro jak´ykoliv software. D´ale jsou uvedeny funkce vlastn´ıho ˇreˇsen´ı webov´e apli- kace, popis implementace tˇechto funkc´ı se nach´az´ı v kapitole
”Webov´a aplikace“ t´eto bakal´aˇrsk´e pr´ace. Tren´er a sportovec maj´ı v t´eto webov´e aplikaci vlastn´ı rozhran´ı na z´akladˇe sv´ych poˇzadavk˚u. Tren´er m´a k dispozici Dashboard pro sledov´an´ı infor- mac´ı o kaˇzd´em ze sv´ych sportovc˚u, to znamen´a: osobn´ı ´udaje, statistiku tr´enov´an´ı, koment´aˇre od sportovce a v´ysledky kaˇzd´eho tr´eninku. Tak´e je pro nˇej pˇripraven´y kalend´aˇr kaˇzd´eho sportovce, kam si tren´er m˚uˇze pˇrid´avat nov´e tr´eninky a sledovat v´ysledky tr´enink˚u ve formˇe grafu.
Rozhran´ı pro sportovce obsahuje Dashboard s informacemi sportovce o tr´eninc´ıch, statistice tr´enink˚u a detailnˇejˇs´ı popis kaˇzd´eho tr´eninku, kter´y byl napl´anov´an urˇcit´ym tren´erem. Jednou z praktick´ych, uˇziteˇcn´ych funkc´ı webov´e aplikace pro sportovce je synchronizace dat z aplikace Strava.com prostˇrednictv´ım importu dat ve form´atu
Obr´azek 2.6: Webov´a aplikace Trainright.com
gpx. Tato importovan´a data webov´a aplikace analyzuje ve formˇe grafu pro lepˇs´ı zjiˇstˇen´ı v´ykonnosti tr´eninku. Rozhran´ı pro sportovce tak´e nab´ız´ı kalend´aˇr s tr´eninky pro jejich sledov´an´ı a reportovan´ı.
Na z´akladˇe zkoum´an´ı existuj´ıc´ıch technologi´ı pro tvorbu webov´ych sluˇzeb byla zvolena pro komunikace klienta a serveru – architektura REST, pro tvorbu klientsk´e ˇc´asti webov´e aplikace – JavaScriptov´a knihovna React, pro tvorbu serverov´e ˇc´asti webov´e aplikace – platforma Node.js a framework Express.js, pro ukl´ad´an´ı vˇetˇs´ıho mnoˇzstv´ı provozovan´ych dat – nerelaˇcn´ı datab´aze MongoDB.
3 Webov´ a aplikace
Tato kapitola detailnˇe popisuje rozhran´ı pro tren´era a sportovce a d´ale technologie pouˇzit´e bˇehem v´yvoje, implementace a testov´an´ı klientsk´e a serverov´e ˇc´asti. Webov´a aplikace pro pl´anov´an´ı sportovn´ıho tr´eninku je napsan´a v programovac´ıma jazyce TypeScript, kter´y doplˇnuje JavaScriptov´a knihovna React a n´astroj Context pro jed- noduch´e uchov´an´ı aktu´aln´ıho stavu webov´e aplikace. Serverov´a ˇc´ast webov´e aplikace byla implementovan´a prostˇrednictv´ım platformy Node.js, frameworku Express.js a pro manipulaci s daty byla pouˇzita nerelaˇcn´ı datab´aze MongoDB.
3.1 Fundament aplikace
3.1.1 V´ıcejazyˇ cnost aplikace
Webov´a aplikace t´eto bakal´aˇrsk´e pr´ace uˇzivateli nab´ız´ı rozhran´ı ve dvou jazyc´ıch, v angliˇctinˇe a ˇceˇstinˇe. Tato funkce je implementov´ana pomoc´ı knihovny React Intl, kter´a poskytuje React komponenty a API pro zpracov´av´an´ı pˇreklad˚u dat, ˇc´ısel a ˇretˇezc˚u. Do projektu byla nainstalov´ana knihovna React Intl, pak byl v kompo- nentˇe importov´an n´astroj IntlProvider z react-intl a soubory en.json a cz.json, kter´e obsahuj´ı kl´ıˇc a hodnotu pro kaˇzd´e slovo nebo vˇetu, jeˇz je potˇreba pˇreloˇzit. Pak je ne- zbytn´e vnoˇrit komponentu, kterou je potˇreba pˇreloˇzit, do komponenty IntlProvider a pro kaˇzd´e slovo nebo vˇetu urˇcit kl´ıˇc, podle nˇehoˇz se bude hledat jeho pˇreklad.
Aplikace se snadno rozˇsiˇruje do dalˇs´ıch jazykov´ych verz´ı, napˇr´ıklad pro ˇspanˇelskou verzi je nutn´e vytvoˇrit soubor sp.jsou, kter´y bude obsahovat kl´ıˇc a pˇreklad pro kaˇzd´e slovo v aplikaci, a pot´e je potˇreba importovat tento soubor do hlavn´ı komponenty aplikace App.tsx. T´ımto zp˚usobem je moˇzn´e pˇrid´avat do aplikace dalˇs´ı jazykov´e verze.
3.1.2 Klientsk´ a ˇ c´ ast
Webov´a aplikace je naprogramovan´a v jazyce TypeScript.
TypeScript je nadmnoˇzinou JavaScriptu, kter´a podporuje statick´e typov´an´ı, tˇr´ıdy a interfacy. V´yhodou pouˇzit´ı TypeScriptu je to, ˇze IDE nab´ız´ı vˇetˇs´ı moˇznosti pro vychyt´an´ı chyb bˇehem naps´an´ı k´odu. TypeScript je modern´ı JavaScript. Jedn´a se o vˇcasn´e vychyt´av´an´ı chyb, coˇz dˇel´a v´yvoj efektivnˇejˇs´ı z´aroveˇn s pouˇzit´ım komunity JavaScriptu. TypeScript se velmi dobˇre integruje s knihovnami JavaScript, ˇc´ımˇz pom´ah´a k pohodlnˇejˇs´ımu programovan´ı.[14]
Pro implementaci webov´e aplikace byl pouˇzit editor Visual Studio Code, k nˇemuˇz byla potˇreba instalace r˚uzn´ych bal´ıˇck˚u a z´avislost´ı pro programovac´ı jazyky, knihovny a datab´aze. Visual Studio Code podporuje programovac´ı jazyk TypeScript, ale neob- sahuje kompil´ator TypeScript. V r´amci implementace webov´e aplikace byl nainsta- lov´an kompil´ator TypeScript lok´alnˇe do projektu prostˇrednictv´ım spr´avce bal´ıˇck˚u yarn. Po instalaci kompil´atoru TypeScript je d˚uleˇzit´e vytvoˇren´ı souboru tscon- fig.json, kter´y definuje nastaven´ı TypeScriptu a moˇznosti kompil´atoru. Tento soubor obsahuje
”compilerOptions“, coˇz jsou pravidla kompilace, a tak´e
”include“, kter´y ob- sahuje informace o vˇsech souborech, jeˇz se kompiluj´ı do programovac´ıho jazyka Ja- vaScript. Dalˇs´ım d˚uleˇzit´ym souborem, kter´y byl vygenerov´an, je tslint.json. Tento soubor obsahuje sadu pravidel, jeˇz pˇri kaˇzd´em spuˇstˇen´ı projektu nahl´as´ı chybn´e pouˇzit´ı rozˇs´ıˇren´ı TypeScriptu, jako je napˇr´ıklad chybn´e pouˇzit´ı statick´eho typov´an´ı nebo atribut˚u objektovˇe orientovan´eho programovan´ı. Pro zobrazen´ı inteligentn´ıho doplnˇen´ı k´odu a r˚uzn´ych informac´ı jsem pouˇzila IntelliSense, coˇz je n´astroj editoru Visual Studio Code. Tento n´astroj mi pomohl ps´at k´od rychleji a spr´avnˇe.
Pˇri implementaci klientsk´e ˇc´asti webov´e aplikace byla pouˇzita JavaScriptov´a knihovna React. Knihovna React je zaloˇzena na komponent´ach a kaˇzd´a komponenta vykresl´ı do prohl´ıˇzeˇce pomoc´ı metody render ˇsablonu uˇzivatelsk´eho rozhran´ı jako v´ystup. Nˇekter´e komponenty, implementovan´e v klientsk´e ˇc´asti t´eto webov´e aplikace, byly pouˇzity v r´amci jin´ych komponent, coˇz usnadˇnuje implementaci uˇzivatelsk´ych rozhran´ı webov´e aplikace.[9]
Na obr´azku 3.1 je uk´azka struktury komponent JavaScriptov´e knihovny React, kter´a byla implementovan´a na z´akladˇe poˇzadavk˚u t´eto bakal´aˇrsk´e pr´ace.
Editor Visual Studio Code, jenˇz byl pouˇzit pro programovan´ı webov´e aplikace, podporuje JSX a jedn´a se o rozˇs´ıˇren´ı syntaxe programovac´ıho jazyka JavaScript.
Komponenty knihovny React, kter´e byly implementov´any v klientsk´e ˇc´asti webov´e
Obr´azek 3.1: Struktura React komponent webov´e aplikace
aplikace, obsahuj´ı JSX. Pˇri pr´aci s t´ımto rozˇs´ıˇren´ım bylo nutn´e zmˇenit pˇr´ıponu soubor˚u *.ts na pˇr´ıponu *.tsx.
Design webov´e aplikace je implementov´an prostˇrednictv´ım React UI knihovny Ant design, kter´e obsahuje velkou sadu hotov´ych komponent nebo jejich ˇc´ast´ı pro vytv´aˇren´ı interaktivn´ıch uˇzivatelsk´ych rozhran´ı. Tato knihovna je naps´ana v jazyce TypeScript[15], coˇz je jednou z v´yhod pro webovou aplikace t´eto bakal´aˇrsk´e pr´ace.
Dalˇs´ımi v´yhody knihovny jsou jej´ı popularita – na github m´a kolem 50000 hvˇezd a tak´e to, ˇze komponenty, podle m´eho n´azoru, jsou pro koneˇcn´eho uˇzivatele sympatick´e a pohodln´e k pouˇzit´ı. React UI Knihovna Ant design nab´ız´ı ˇsirok´y v´ybˇer komponent pro vytv´aˇren´ı uˇzivatelsk´eho rozhran´ı. V t´eto pr´aci byly pouˇzity dalˇs´ı komponenty nebo jejich ˇc´asti: menu, tabulky, selecty pro jazyk, data, pak pˇrihlaˇsovac´ı formul´aˇr, kalend´aˇr, tlaˇc´ıtka atd. Pr´ace s React UI knihovnou Ant byla snadn´a. Bylo zapotˇreb´ı instalovat UI knihovnu do projektu a pak pro pouˇzit´ı komponent UI knihovny v hlaviˇcce kaˇzd´e vlastn´ı komponenty importovat pouˇzit´y element komponenty React UI knihovny Ant.
Pro uchov´av´an´ı aktu´aln´ıho stavu webov´e aplikace byl pouˇzit React n´astroj Con- text, kter´y poskytuje zp˚usob pˇred´av´an´ı dat pˇres strom komponent bez ruˇcn´ıho pˇred´av´an´ı Props na kaˇzd´e ´urovni. Z d˚uvodu moˇznosti skl´ad´an´ı React komponent do sebe se pouˇz´ıv´a Props, coˇz je prostˇredek pro pˇred´av´an´ı dat mezi komponen-
tami, kter´y funguje jen jednosmˇernˇe, smˇerem shora dol˚u od komponenty rodiˇc ke komponentˇe potomka. Tato metoda je obˇcas pˇr´ıliˇs n´aroˇcn´a pro Props, pˇren´aˇsen´ych do mnoha komponent ve webov´e aplikaci. Tento probl´em pr´avˇe ˇreˇs´ı React n´astroj Context, pouˇzit´y v t´eto pr´aci. Pro pouˇzit´ı n´astroje Context ve webov´e aplikaci bylo potˇreba nainstalovat Context do projektu a pak v komponentˇe, jeˇz obsahuje uˇziteˇcn´e Props pro jinou komponentu, byla vnoˇrena komponenta Context.Provider, kter´a definuje, jak´a data bude pˇred´avat a jak´e komponentˇe. Pak je v komponentˇe, v n´ıˇz potˇrebujeme pouˇz´ıt Props, definov´ana komponenta Context.Consumer, kter´a pˇrij´ım´a Props a pak s nimi pracuje.[9]
3.1.3 Serverov´ a ˇ c´ ast
Implementace serveru webov´e aplikace probˇehlo v softwarov´em prostˇred´ı Node.js a skl´ad´a se z node modules — potˇrebn´a sloˇzka, kter´a obsahuje vˇsechny moduly pouˇzit´e bˇehem pr´ace s Node.js, pak z middleware — souˇc´ast serveru, kter´a kontro- luje opr´avnˇen´ı uˇzivatele a obsahuje logiku pr´ace s tokenem. Algoritmus autorizace uˇzivatele pomoc´ı tokenu je pops´an v podkapitole
”Testov´an´ı a bezpeˇcnost webov´e aplikace“, z models — soubory urˇcen´e pro modely kolekc´ı dokument˚u datab´aze Mon- goDB. S modely pracuje MongoDB pomoc´ı modulu Mongoose a taky z routes — obsahuje soubory s logikou chov´an´ı serveru, coˇz jsou metody komunikace serveru s klientskou ˇc´ast´ı webov´e aplikace.
3.2 Datov´ e ´ uloˇ ziˇ stˇ e
Pro uloˇzen´ı dat byla pouˇzita nerelaˇcn´ı datab´aze MongoDB. D˚uvodem k jej´ımu pouˇzit´ı byl fakt, ˇze bˇehem implementace webov´e aplikace se neust´ale mˇenila struk- tura kolekc´ı datab´aze a pˇri dalˇs´ım rozˇsiˇrov´an´ı funkc´ı t´eto webov´e aplikace pak bude snadn´e pˇridat nov´e datov´e typy, kolekce a dokumenty MongoDB.
MongoDB umoˇzˇnuje ukl´adat a pˇrid´avat dokumenty do kolekc´ı bez zmˇeny cel´e struktury modelu datab´aze, coˇz dˇel´a pr´aci s daty pro program´atora pohodlnˇejˇs´ı.
Pro jednoduˇsˇs´ı pˇr´ıstup k objekt˚um v MongoDB v t´eto bakal´aˇrsk´e pr´aci byla pouˇzita JavaScriptov´a knihovna Mongoose, kter´a podporuje n´astroje pro CRUD operace.[6]
Model MongoDB t´eto webov´e aplikace zahrnuje kolekce, do nichˇz se ukl´adaj´ı data o tren´erovi, sportovci, napl´anovan´ych a odtr´enovan´ych tr´eninc´ıch vˇcetnˇe jejich v´ysledk˚u (obr´azek 3.2).
Kolekce User
first_name: String;
last_name: String;
email: String;
password: String;
trainer: ObjectId;
role: String
Kolekce Workout
title_workout: String;
trainer: ObjectId;
sportsman: ObjectId;
user_workout_date: ObjectId;
exercises: ObjectId;
draft: Boolean;
description_workout: String
Kolekce Exercise
duration: String;
draft: Boolean;
intensity: { from: Number, to: Number };
trainer: ObjectId;
workout: ObjectId
Kolekce ExerciseElement
userworkoutdate_id: String;
lat: Number;
lon: Number;
time: String;
power: Number;
ele: Number;
hr: Number;
cad: Number
Kolekce UserWorkoutDate workout: ObjectId;
sportsman: ObjectId;
trainer: ObjectId;
date: Date;
completed: Boolean;
planned_duration: String;
real_duration: String
Kolekce Comment
author: ObjectId;
workout: ObjectId;
content: String
Obr´azek 3.2: Model MongoDB
Struktura dokumentu kolekce User obsahuje atributy jm´eno a pˇr´ıjmen´ı uˇzivatele, emailovou adresu a ˇsifrovan´e heslo, pouˇz´ıvan´e pro ovˇeˇrov´an´ı pˇr´ıstupu uˇzivatele do webov´e aplikace, d´ale pak atribut role pro rozpozn´an´ı uˇzivatele z´avodn´ıka ˇci tren´era, pak id tren´era – tento atribut je urˇcen pro vyhled´av´an´ı seznam˚u sportovc˚u urˇcit´eho tren´era.
Jednou z pomocn´ych funkc´ı pro tren´era je zde moˇznost vytv´aˇren´ı vlastn´ı knihovny tr´enink˚u. Tato funkce je implementov´ana pomoc´ı kolekce Workout. Struktura doku- mentu t´eto kolekce obsahuje atribut draft datov´eho typu Boolean. Atribut draft se nastav´ı na hodnotu true, pokud je entita urˇcen´a pro knihovnu tr´enink˚u, nebo naopak na hodnotu false, pokud entita je re´aln´y tr´enink pro sportovce urˇcen´y tren´erem.
Struktura dokumentu kolekce Exercise se pouˇz´ıv´a pro manipulaci se cviˇcen´ımi, ze kter´ych se tr´enink skl´ad´a, a obsahuje n´asleduj´ıc´ı atributy: doba cviˇcen´ı, intenzita cviˇcen´ı (hodnota intenzity od a do), id tren´era a id tr´eninku.
Kolekce Workout se uˇz´ıv´a pro manipulaci s tr´eninky a jej´ı struktura obsahuje dalˇs´ı atributy: n´azev tr´eninku, id tren´era, kter´y ten tr´enink napl´anoval, id sportovce, jenˇz ten tr´enink bude tr´enovat, pole cviˇcen´ı, ze kter´ych se skl´ad´a tr´enink, draft, popis – pozn´amku od tren´era pro sportovce. Atribut id userworkoutdate je urˇcen pro funkce maz´an´ı tr´eninku z kalend´aˇre tren´era ˇci sportovce.
Pro jednoduˇsˇs´ı manipulaci s tr´eninky v kalend´aˇri tren´era a sportovce je urˇcen´a kolekce UserWorkoutDate. Struktura dokumentu t´eto kolekce obsahuje atributy id tr´eninku, id sportovce, id tren´era a datum tr´eninku.
Webov´a aplikace tak´e nab´ız´ı funkce importu soubor˚u ve form´atu gpx. Pro tuto
funkci je v datab´azi webov´e aplikace urˇcen´a kolekce ExerciseElement, do kter´e se ukl´adaj´ı dokumenty s atributy: lat, lon, time, power, ele, hr, cad. To jsou v´ysledn´e hodnoty tr´eninku sportovce, z nichˇz se skl´ad´a gpx soubor. Atribut userworkoutdate- id v t´eto kolekci je urˇcen pro spojen´ı tˇechto v´ysledn´ych dat tr´eninku s urˇcit´ym tr´eninkem v kalend´aˇre tren´era a sportovce.
Posledn´ı kolekce MongoDB webov´e aplikace je Comment, kter´a je urˇcena pro uchov´av´an´ı zpr´av sportovce a tren´era ohlednˇe tr´eninku. Dokumenty t´eto kolekce obsahuj´ı atributy id tr´eninku, id autora zpr´avy a zpr´avu.
Obr´azek 3.3: Pˇrihlaˇsovac´ı formul´aˇr
3.3 Realizovan´ e rozhran´ı webov´ e aplikace
Uˇzivatel´e t´eto webov´e aplikace se dˇel´ı na tren´ery a sportovce. Kaˇzd´y z uˇzivatel˚u m´a pˇr´ıstup k urˇcit´ym funkc´ım a str´ank´am webov´e aplikace. C´ılem pr´ace bylo navrhnout a implementovat praktickou webovou aplikaci pro pl´anov´an´ı sportovn´ıho tr´eninku, kde maj´ı tren´eˇri i sportovci k dispozici rozhran´ı podle sv´ych potˇreb. Prvn´ı str´anka, kter´a se uˇzivateli po spuˇstˇen´ı aplikace zobraz´ı, je pˇrihlaˇsovac´ı formul´aˇr(obr´azek 3.3).
Ten umoˇzˇnuje pˇr´ıstup do webov´e aplikace prostˇrednictv´ım zad´an´ı emailov´e adresy a hesla.
V pˇr´ıpadˇe shody uˇzivatelsk´ych ´udaj˚u vygeneruje server JSON Web Token, coˇz je standard, kter´y definuje zp˚usob bezpeˇcn´eho pˇrenosu informac´ı mezi klientem a serverem ve form´atu objekt˚u JSON[16]. Spolu s informacemi o uˇzivateli poˇsle server klientovi zpr´avu. Pokud dojde k pˇresmˇerov´an´ı uˇzivatelem na jinou str´anku, apli- kace pochop´ı, ˇze se jedn´a o autorizovan´eho uˇzivatele a nevyˇzaduje po nˇem opˇetovn´e pˇrihl´aˇsen´ı. Klient poˇsle serveru dotaz, kter´y obsahuje JSON Web Token uloˇzen´y do prohl´ıˇzeˇce. Server deˇsifruje data JSON Web Tokenu, porovn´a je s daty existuj´ıc´ıch uˇzivatel˚u v datab´azi aplikace a pak klientovi poˇsle odpovˇed’ s informacemi o tom, ˇze takov´y uˇzivatel jiˇz existuje a nasmˇeruje ho na j´ım poˇzadovanou str´anku. Pokud uˇzivatel zad´a emailovou adresu ˇci heslo, kter´e nejsou v datab´azi, webov´a aplikace nahl´as´ı uˇzivateli, ˇze emailov´a adresa nebo heslo nejsou spr´avn´e. V opaˇcn´em pˇr´ıpadˇe, pokud pˇrihl´aˇsen´ı probˇehlo ´uspˇeˇsnˇe, webov´a aplikace nahl´as´ı uˇzivateli, ˇze emailov´a adresa a heslo jsou spr´avn´e a povol´ı pˇr´ıstup do webov´e aplikace.
Podle zvolen´e role uˇzivatele — tren´er nebo sportovec — vygeneruje webov´a apli- kace funkce, kter´e bude nab´ızet.
Tren´erovi nab´ız´ı aplikace funkci
”R´ıdic´ı panel“, kter´ˇ a poskytuje tren´erovi se- znam vˇsech jeho sportovc˚u, s moˇznost´ı prohl´ıˇzen´ı kalend´aˇre jednotliv´ych sportovc˚u s napl´anovan´ymi a odtr´enovan´ymi tr´eninky, a tak´e s moˇznost´ı prohl´ıˇzen´ı profilu s osobn´ımi ´udaji sportovc˚u, statistikou tr´enov´an´ı za t´yden, napl´anovan´e a odtr´enovan´e tr´eninky. Do kalend´aˇre urˇcit´eho sportovce m´a tren´er moˇznost pˇrid´avat tr´enink na libovoln´e datum prostˇrednictv´ım vytvoˇren´e knihovny tr´enink˚u nebo vytvoˇren´ım nov´eho tr´eninku. Pomoc´ı chatu m˚uˇze tak´e se sportovcem komunikovat. Dalˇs´ı zaj´ımav´a funkce je
”Kalend´aˇr“. Tren´er m˚uˇze v jednom kalend´aˇri sledovat tr´eninky vˇsech spor- tovc˚u.
Sportovc˚um nab´ız´ı aplikace funkci
”R´ıdic´ı panel“. Prostˇrednictv´ım t´ˇ eto funkce sportovec m´a moˇznost sledovat svou vlastn´ı t´ydenn´ı statistiku tr´enov´an´ı, m˚uˇze si prohl´ıˇzet odtr´enovan´e a napl´anovan´e tr´eninky. Funkce
”Kalend´aˇr“ nab´ız´ı sportovci rozhran´ı, ve kter´em m˚uˇze sledovat sv´e tren´erem napl´anovan´e tr´eninky a po rozklik- nut´ı tr´eninku se mu objev´ı str´anka s podrobn´ymi informacemi o tr´eninku a moˇznosti pˇrid´an´ı v´ysledk˚u tr´eninku pomoc´ı funkce importu souboru ve form´atu gpx. I spor- tovec zde m´a k dispozici n´astroj pro komunikaci s tren´erem, a prostor, kam si m˚uˇze zapsat sv´e pocity a pozn´amky z tr´eninku. N´asleduj´ıc´ı podkapitoly popisuj´ı detailnˇe funkce realizovan´e ve webov´e aplikaci.
Obr´azek 3.4: Profil sportovce: osobn´ı ´udaje a t´ydenn´ı statistika tr´enov´an´ı
Obr´azek 3.5: Profil sportovce: napl´anovan´e tr´eninky
3.3.1 Profil sportovce
Tren´er m´a k dispozici profil kaˇzd´eho sportovce (obr´azek 3.4), v nˇem vid´ı osobn´ı ´udaje sportovce — jm´eno, pˇr´ıjmen´ı, emailovou adresu, d´ale t´ydenn´ı statistiku tr´enov´an´ı, tj. dobu tr´enov´an´ı a poˇcet napl´anovan´ych a odtr´enovan´ych tr´enink˚u. Pro lepˇs´ı sledov´an´ı v´ysledk˚u sportovce zde aplikace tren´erovi nab´ız´ı tabulku odtr´enovan´ych tr´enink˚u (obr´azek 3.6) s moˇznost´ı detailn´ıho prohl´ıˇzen´ı v´ysledk˚u formou graf˚u a ko- ment´aˇr˚u od sportovce, na kter´e m´a tren´er moˇznost odpovˇedˇet. D´ale profil sportovce nab´ız´ı tren´erovi moˇznost sledovat napl´anovan´e tr´eninky v tabulce
”Napl´anovan´e tr´eninky“(obr´azek 3.5).
Obr´azek 3.6: Profil sportovce: odtr´enovan´e tr´eninky
Obr´azek 3.7: Kalend´aˇr tr´enink˚u: rozhran´ı pro tren´era
3.3.2 Kalend´ aˇ r tr´ enink˚ u
Funkce
”Kalend´aˇr tr´enink˚u“ je k dispozici pro oba typy uˇzivatel˚u (obr´azek 3.7, obr´azek 3.8). Tren´er m´a k dispozici dva typy kalend´aˇre, prvn´ım je kalend´aˇr se vˇsemi tr´eninky vˇsech sportovc˚u pro jednoduch´y pˇrehled vˇsech akc´ı, kter´e se budou konat v urˇcit´em ˇcasov´em intervalu (napˇr. tento t´yden nebo mˇes´ıc) a druh´ym je kalend´aˇr urˇcit´eho sportovce, do kter´eho m´a tren´er moˇznost pˇrid´avat tr´eninky a kontrolovat jejich v´ysledky.
3.3.3 Pˇ rid´ an´ı tr´ enink˚ u
Funkce pl´anov´an´ı sportovn´ıch tr´enink˚u je v t´eto webov´e aplikaci implementov´ana dvˇema zp˚usoby. Prvn´ı moˇznost´ı je vytvoˇren´ı nov´eho tr´eninku prostˇrednictv´ım edi- toru (obr´azek 3.9). V tomto pˇr´ıpadˇe tren´er v kalend´aˇri dan´eho sportovce mus´ı zvolit datum, n´azev, popis tr´eninku a vytvoˇrit sadu cviˇcen´ı, ze kter´ych se tr´enink skl´ad´a.
Obr´azek 3.8: Kalend´aˇr tr´enink˚u: rozhran´ı pro sportovce
Cviˇcen´ı obsahuje dobu tr´enov´an´ı a intenzitu cviˇcen´ı, coˇz je hodnota ud´avan´a v pro- centech. Po zad´an´ı vˇsech informac´ı o tr´eninku a stisknut´ım tlaˇc´ıtka
”pˇridat tr´enink“, se nov´y tr´enink objev´ı v kalend´aˇri sportovce.
Obr´azek 3.9: Pˇrid´an´ı tr´enink˚u: editor tr´enink˚u
Druhou moˇznost´ı je vytvoˇren´ı vlastn´ı knihovny tr´enink˚u tren´erem (obr´azek 3.10).
Vytvoˇren´e tr´eninky pak pˇrid´av´a do kalend´aˇr˚u jednotliv´ych sportovc˚u.
3.3.4 Anal´ yza v´ ysledk˚ u tr´ enink˚ u sportovce
Funkce anal´yzy v´ysledk˚u tr´enink˚u sportovce v t´eto webov´e aplikaci byla implemento- van´a importem gpx soubor˚u (obr´azek 3.11) se zaznamenan´ymi hodnotami z pr˚ubˇehu
Obr´azek 3.10: Pˇrid´an´ı tr´enink˚u: knihovna tr´enink˚u jeho tr´eninku.
Obr´azek 3.11: Rozhran´ı pro sportovce: pohled na tr´enink a funkce importu v´ysledk˚u do aplikace
Pˇri implementaci importu soubor˚u byla pouˇzita knihovna Xml.js. Tato knihovna slouˇz´ı pro pˇreveden´ı dat z form´atu XML do form´atu JSON a tak´e k pasov´an´ı tˇechto dat (obr´azek 3.12).
Gpx je soubor, kter´y je pro tuto pr´aci vygenerovan´y prostˇrednictv´ım webov´e aplikace Strava.com a obsahuje v´ysledn´a data cviˇcen´ı, z nichˇz se skl´ad´a tr´enink.
Knihovna Xml.js transformuje tato data do form´atu JSON a metoda parseGPX provede rozbor tˇechto dat.
Gpx soubor obsahuje data z kaˇzd´e vteˇriny tr´eninku. Pro anal´yzu v´ysledk˚u tr´eninku je potˇreba spoˇc´ıtat stˇredn´ı hodnotu pro kaˇzdou minutu tr´eninku. Tato hodnota se vypoˇc´ıt´a seˇcten´ım kaˇzd´ych 60 vteˇrin tr´eninku a vydˇel´ı se ˇc´ıslem 60, coˇz je poˇcet
Data ve formátu XML souboru gpx Data ve formátu JSON po parsování
Obr´azek 3.12: Pˇrevod dat z form´atu XML do JSON
tˇechto hodnot za minutu tr´eninku. T´ımto zp˚usobem jsou poˇc´ıtan´y stˇredn´ı hodnoty kaˇzd´e minuty tr´eninku, kter´e se pak zobraz´ı na grafu.
Graf v´ysledn´ych hodnot tr´eninku je realizov´an pomoc´ı ˇsablony Line knihovny Chart.js. JavaScriptov´a knihovna Chart.js je n´astroj umoˇznuj´ıc´ı snadno vytv´aˇret r˚uzn´e typy graf˚u. ˇSablona Line generuje spojovac´ı ˇc´arov´y graf (obr´azek 3.13), kter´y uˇzivatel˚um pˇri pˇrejet´ı myˇsi na urˇcitou hodnotu umoˇzˇnuje pozorovat kaˇzdou hodnotu tohoto grafu zvl´aˇst’ a tak´e umoˇzˇnuje pozorovat kˇrivku zmˇeny tˇechto hodnot.
Obr´azek 3.13: Graf v´ysledn´ych hodnot tr´eninku
Klientsk´a ˇc´ast webov´e aplikace obsahuje React komponentu LineChart.tsx pro vykreslen´ı graf˚u a taky komponentu PureSelect.tsx pro zvolen´ı elementu (tagu),
Obr´azek 3.14: Funkce komunikace tren´era a sportovce podle nˇehoˇz se pak generuje graf urˇcit´ych hodnot gpx souboru.
3.3.5 Komunikace tren´ era a sportovce
Reportov´an´ı pr˚ubˇehu tr´eninku, zapisov´an´ı pozn´amek a pocit˚u sportovcem je d˚uleˇzitou souˇc´ast´ı ´uspˇeˇsn´eho tr´eninku. Tato funkce m˚uˇze pomoci tren´erovi sportovce l´epe pozn´avat a pl´anovat jim tr´eninky na m´ıru. Proto byla v t´eto pr´aci implementov´ana funkce komunikace tren´era a sportovce (obr´azek 3.14). Funkce je implementov´ana pomoc´ı React komponenty CommentComponent.tsx. Zpr´avy se ukl´adaj´ı do kolekce Comment datab´aze MongoDB.
3.4 Bezpeˇ cnost webov´ e aplikace
Jedn´ım z d˚uleˇzit´ych krok˚u pˇri implementaci webov´e aplikace bylo soustˇredit se na bezpeˇcnost syst´emu. Efektivn´ım zp˚usobem ochrany proti ´utoku CSRF je token. To- ken je ˇsifrovan´a sada bajt˚u a ochrana spoˇc´ıv´a v ovˇeˇren´ı tokenu, kter´y server vyge- neroval, a tokenu, odeslan´eho uˇzivatelem. Webov´a aplikace pouˇz´ıv´a protokol JSON Web Token k ovˇeˇren´ı uˇzivatele pˇri vstupu do aplikace prostˇrednictv´ım pˇrihl´aˇsen´ı.
Tren´er nebo sportovec prostˇrednictv´ım pˇrihlaˇsovac´ıho formul´aˇre odeˇsle na server webov´e aplikace soukrom´e ´udaje, jako jsou emailov´a adresa a heslo. Server pak v pˇr´ıpadˇe shody emailov´e adresy a hesla s ´udaji v datab´azi aplikace vygeneruje JSON Web Token protokol, kter´y obsahuje ´udaje uˇzivatele. Tento protokol server poˇsle
klientovi. Pˇri smˇerov´an´ı na jinou str´anku aplikace, pomoc´ı protokolu JSON Web Token, kter´y uˇzivatel pos´ıl´a serveru, pochop´ı, ˇze se jedn´a o autorizovan´eho uˇzivatele a nevyˇzaduje po nˇem opˇetovn´e autorizov´an´ı a server pak uˇzivateli povol´ı pˇrej´ıt na poˇzadovanou str´anku.
Pro uchov´av´an´ı JSON Web Tokenu ve webov´e aplikaci byl pouˇzit modul express- session. Tento modul uchov´av´a data JSON Web Tokenu a cookies v serverov´e ˇc´asti aplikace vytvoˇren´ım nov´e kolekce v MongoDB – session. V prohl´ıˇzeˇci se tak ukl´ad´a pouze id dokumentu MongoDB, ˇc´ımˇz se vyluˇcuje moˇznost kr´adeˇze informac´ı z co- okies a JSON Web Tokenu. Nav´ıc je doba platnosti cookies omezena na 15 minut, coˇz sniˇzuje riziko kr´adeˇze cookies a ´utok˚u na aplikaci skrze ukraden´a data.
Zaj´ımavou alternativou k modulu pro obsluhov´an´ı cookies dat je modul cookies- session. Tento modul lze pouˇz´ıt pouze v pˇr´ıpadˇe, ˇze cookies data jsou relativnˇe mal´a a lze je pˇrev´est na element´arn´ı hodnoty snadnˇeji, neˇz na objekty. Je d˚uleˇzit´e si uvˇedomit, ˇze soubory cookie jsou pro klienta viditeln´e, a z toho d˚uvodu by mˇely b´yt v t´eto webov´e aplikaci chr´anˇeny nebo skryty. Proto byl zvolen modul express-session.
Na ochranu webov´e aplikace proti ´utok˚um byl pouˇzit n´astroj Helma, kter´y pˇred nˇekter´ymi zn´am´ymi typy ´utok˚u pom´ah´a chr´anit pomoc´ı konfigurace hlaviˇcky HTTP.
Jako ochrana proti XSS byla pouˇzita funkce xssFiltr n´astroje Helmet, kter´a ak- tivuje funkce X-XSS-Protection ve vˇetˇsinˇe modern´ıch prohl´ıˇzeˇc˚u a tak´e funkce hide- PoweredBy, kter´a ukr´yv´a informaci o tom, ˇze server aplikace je napsan´y prostˇrednictv´ım frameworku Express.js. To vyluˇcuje moˇznost urˇcit´ych ´utoku pˇr´ımo na tento fra- mework. Na obr´azku je uveden pˇr´ıklad HTTP odpovˇedi s implementovan´ymi funk- cemi Helmet (obr´azek 3.15).
Obr´azek 3.15: Z´ahlav´ı odpovˇedi HTTP
Tento n´astroj m´a i dalˇs´ı zaj´ımav´e funkce urˇcen´e proti ´utok˚um na webov´e aplikace, jako napˇr. funkce hpkp, kter´a pˇrid´av´a v z´ahlav´ı Public Key Pinning, aby zabr´anil
´
utok˚um pomoc´ı faleˇsn´ych certifik´at˚u, hsts nastavuje z´ahlav´ı, Strict-Transport-Security nastavuje ochranu pˇripojen´ı k serveru (pˇres HTTP pomoc´ı SSL/TLS), dalˇs´ı funkce noCache nastavuje z´ahlav´ı Cache-Control a tak´e z´ahlav´ı Pragma tak, aby zak´azalo na stranˇe klienta ukl´ad´an´ı do cache, a v neposledn´ı ˇradˇe tak´e funkce frameguard, kter´a nastavuje z´ahlav´ı X-Frame-Options na ochranu proti clickjackingu, coˇz je typ
´
utoku na aplikaci, pˇri kter´em uˇzivatel provede nˇejakou ˇcinnost na str´ance a spust´ı akci, kterou nepˇredpokl´adal.
4 Z´ avˇ er
C´ılem t´eto pr´ace bylo realizovat praktick´e webov´e prostˇred´ı, kter´e umoˇzˇnuje tren´er˚um pohodln´e pl´anov´an´ı tr´enink˚u a z´aroveˇn umoˇzˇnuje sportovc˚um ˇc´ıst a reportovat sv´e tr´eninky. Podle m´eho n´azoru je tento c´ıl splnˇen. Kromˇe z´akladn´ıch funkc´ı, kter´e byly poˇzadovan´e na zaˇc´atku pr´ace, nab´ız´ı webov´a aplikace dalˇs´ı uˇziteˇcn´e a zaj´ımav´e prostˇred´ı pro tren´era a sportovce.
V aplikaci je implementov´an editor pro vytv´aˇren´ı tr´enink˚u, nav´ıc si tren´er m˚uˇze vytvoˇrit vlastn´ı knihovnu tr´enink˚u, coˇz mu pom´ah´a svou pr´aci zefektivnit. Sportovec m´a moˇznost reportovat a ps´at si pozn´amky ke sv´emu tr´eninku, a i tren´er m˚uˇze prostˇrednictv´ım chatu sd´ılet svou zpˇetnou vazbu. Webov´a aplikace nab´ız´ı i dalˇs´ı zaj´ımav´e moˇznosti, napˇr´ıklad anal´yzu v´ysledk˚u tr´eninku ve formˇe grafu nebo t´ydenn´ı statistiku tr´enov´an´ı. Tyto funkce jsou uvedeny v podkapitole
”Realizovan´e rozhran´ı webov´e aplikace“.
Jedn´ım z d˚uleˇzit´ych krok˚u naps´an´ı t´eto pr´ace byla analytick´a ˇc´ast, kter´a probˇehla jeˇstˇe pˇred samotn´ym v´yvojem webov´e aplikace a je pops´ana v kapitole
”Reˇserˇse“.
Pˇredmˇetem analytick´e ˇc´asti bylo zkoum´an´ı problematiky programov´an´ı webov´ych sluˇzeb, zvolen´ı nejvhodnˇejˇs´ıch technologi´ı pro v´yvoj webov´e aplikace, a tak´e zkoum´an´ı existuj´ıc´ıch webov´ych ˇreˇsen´ı, coˇz pomohlo navrhnout vlastn´ı ˇreˇsen´ı webov´e aplikace.
Do budoucna se pl´anuje pˇridat nov´e funkce jako jsou: napˇr. automatick´a syn- chronizace dat s popul´arn´ımi aplikacemi, kter´e pouˇz´ıvaj´ı sportovci, d´ale pak zlepˇsen´ı funkce anal´yzy v´ysledk˚u tr´enink˚u a tak´e komunikace mezi sportovci pro vytvoˇren´ı pˇr´atelsk´e sportovn´ı komunity v r´amci t´eto webov´e aplikace.
Seznam pouˇ zit´ e literatury
[1] M. Kalin. Java Web Services: Up and Running. 1005 Gravenstein Highway North, Sebastopol, CA: O’Reilly Media, Inc., 2009. isbn: 9780596521127.
[2] R. Anderson. SoapUI Cookbook. Birmingham B3 2PB, UK.: Packt Publishing Ltd., 2015. isbn: 9781784394219.
[3] L. Richardson, S. Ruby a M. Amundsen. RESTful Web APIs. O’Reilly Media, Inc., 2013. isbn: 9781449358068.
[4] C. J. Date. The new relational database dictionary. 2016. isbn: 9781491951736.
[5] G. Harrison. Next Generation Databases NoSQL, NewSQL, and Big Data.
2015. isbn: 9781484213308.
[6] MongoDB. MongoDB and MySQL Compared. url: https://www.mongodb.
com/compare/mongodb-mysql. (cit. 2019-15-07).
[7] D. Sklar. Learning PHP. O’Reilly Media, Inc., 2016. isbn: 9781491933572.
[8] S. Seshadri. Angular: Up and Running. O’Reilly Media, Inc, 2018. isbn: 9781491999837.
[9] A. Banks a E. Porcello. Learning React: functional web development with React and Redux. Sebastopol, CA: O’Reilly Media, 2017. isbn: 9781491954621.
[10] V. Subramanian. Pro MERN Stack: Full Stack Web App Development with Mongo, Express, React, and Node. Berkeley, California: Apress, 2017. isbn:
9781484226520.
[11] Trainingpeaks. Be Prepared on Race Day. url:https://www.trainingpeaks.
com/athlete-features/. (cit. 2019-17-07).
[12] Strava. Building the home for your active life. url: https://www.strava.
com/about. (cit. 2019-17-07).
[13] Trainright. Become A Stronger, Fitter Athlete In Less Time With Endurance Coaching. url: https://trainright.com/. (cit. 2019-17-07).
[14] G. Lim. Learning TypeScript. Packt Publishing Ltd., 2015. isbn: 9781783985548.
[15] Antdesign. Ant Design of React Documentation. url: https://ant.design/
docs/react/introduce. (cit. 2019-25-07).
[16] JWT. Introduction to JSON Web Tokens. url:https://jwt.io/introduction/.
(cit. 2019-17-07).
