České vysoké učení technické v Praze Fakulta elektrotechnická Katedra počítačové grafiky a interakce
Bakalářská práce
Komunitní server Jan Běhounek
Vedoucí práce: Mgr. Pavel Stupka
Studijní program: Softwarové technologie a management Obor: Web a multimedia leden 2010
1
2
Poděkování Rád bych tímto poděkoval vedoucímu své bakalářské práce, Mgr. Pavlu Stupkovi, že se ochotně ujal mého tématu. Dále patří dík mé rodině a přátelům za podporu při tvorbě tohoto projektu.
3
4
Prohlášení Prohlašuji, že jsem svou bakalářskou práci vypracoval samostatně a použil jsem pouze podklady uvedené v přiloženém seznamu. Nemám závažný důvod proti užití tohoto školního díla ve smyslu § 60 Zákona č.121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů (autorský zákon).
V Praze dne 8.1.2010
……………………………………. Podpis
5
6
Abstract The intention of this bachelor thesis is to design and implement application of community server using interactive Google maps technology. The purpose of the system is to enable its users to share their favorite places with others. The theoretical part of the work particularly includes an insight to several commercially successful community portal solutions, custom implementation design and description of used technology.
Abstrakt Cílem této bakalářské práce je navrhnout a implementovat aplikaci komunitního serveru využívajícího technologie interaktivních map společnosti Google. Podstatou systému je umožnit uživatelům sdílení svých oblíbených míst s ostatními. Teoretická část práce obsahuje zejména nahlédnutí na několik komerčně úspěšných řešení komunitního portálu, návrh implementace vlastní aplikace a popis použitých technologií.
7
8
Obsah 1.
Úvod ................................................................................................................... 17 1.1.
2.
3.
4.
Co je to komunitní server ..................................................................................... 18 2.1.
Komunita ......................................................................................................18
2.2.
Komunitní server jako fenomén doby ............................................................ 18
2.3.
Mapa a možnosti určování polohy ................................................................. 19
2.3.1.
Global Positioning System (GPS) ........................................................... 19
2.3.2.
A-GPS ................................................................................................... 19
2.3.3.
IP lokace ................................................................................................ 20
Současná řešení ................................................................................................... 21 3.1.
Libimseti.cz................................................................................................... 21
3.2.
Lide.cz ..........................................................................................................22
3.3.
MySpace.com................................................................................................ 23
3.4.
Facebook.com ............................................................................................... 24
3.4.1.
Historie Facebooku ................................................................................ 24
3.4.2.
Současné vyhlídky ................................................................................. 25
3.4.3.
Možnosti systému .................................................................................. 25
3.4.4.
Aplikace ................................................................................................. 26
3.4.5.
Technické zázemí ................................................................................... 27
Cíle a požadavky ................................................................................................. 29 4.1.
Deklarace záměru .......................................................................................... 29
4.2.
Katalog požadavků ........................................................................................ 29
4.2.1.
Nefunkční požadavky ............................................................................. 29
4.2.2.
Funkční požadavky ................................................................................ 30
4.3. 5.
Struktura práce .............................................................................................. 17
Chování aplikace ........................................................................................... 31
Návrh .................................................................................................................. 32 5.1.
Doménový model .......................................................................................... 32
5.2.
Případy užití .................................................................................................. 32
5.3.
Relační databázový model ............................................................................. 32
5.4.
Architektura MVC ........................................................................................ 32
5.5.
Grafické rozhraní .......................................................................................... 33
9
5.5.1. 6.
Optimalizace pro rozlišení ..................................................................... 34
Technologie ........................................................................................................ 35 6.1.
XHTML (eXtensible HyperText Markup Language) .................................... 35
6.2.
CSS (Cascading Style Sheets)....................................................................... 35
6.3.
PHP (Hypertext Preprocessor) ...................................................................... 36
6.4.
MySQL ........................................................................................................ 36
6.5.
JavaScript ..................................................................................................... 36
6.6.
AJAX (Asynchronous JavaScript and XML) ................................................ 37
6.7.
Google Maps API ......................................................................................... 37
6.7.1. 7.
Proč právě Google Maps ....................................................................... 37
Implementace ..................................................................................................... 38 7.1.
Controller - Handlery a Dispatcher ............................................................... 38
7.2.
View - Teng ................................................................................................. 39
7.3.
Model – Providery ........................................................................................ 40
7.4.
Bezpečnost ................................................................................................... 40
7.4.1.
SQL Injection ........................................................................................ 40
7.4.2.
Cross-Site Scripting – XSS .................................................................... 41
Vybraná zajímavá řešení............................................................................... 41
7.5.
7.5.1.
Modální okna ........................................................................................ 41
7.5.2.
Agregace stejných bodů......................................................................... 41
Testování ............................................................................................................ 43
8.
8.1.
Kognitivní průchod....................................................................................... 43
8.2.
Akceptační testy ........................................................................................... 43
8.3.
Usability testování ........................................................................................ 43
8.3.1.
Výsledky testování ................................................................................ 44
Závěr .................................................................................................................. 45
9.
Doporučení pro budoucí vývoj ..................................................................... 45
9.1. 10.
Seznam použitých zkratek ............................................................................... 47
11.
Použitá literatura ............................................................................................. 48
12.
UML diagramy ............................................................................................... 49
13.
Uživatelská příručka ....................................................................................... 55
13.1.
Registrace ................................................................................................. 55
13.2.
Přidání bodu do mapy ............................................................................... 55
13.3.
Editace informací o bodu .......................................................................... 55 10
13.4.
Odebrání bodu z mapy ............................................................................... 55
13.5.
Nabídka přátelství ...................................................................................... 56
13.6.
Zrušení přátelství ....................................................................................... 56
13.7.
Nastavení účtu ........................................................................................... 56
13.8.
Editace informací v profilu ........................................................................ 56
13.9.
Změna přihlašovacího emailu .................................................................... 56
13.10.
Změna hesla............................................................................................... 57
13.11.
Nastavení a správa obrázku profilu ............................................................ 57
13.12.
Status a zpráva ........................................................................................... 57
13.13.
Komentování statusu či zprávy .................................................................. 57
13.14.
Nastavení přítomnosti ................................................................................ 57
14.
Instalační příručka ........................................................................................... 59
14.1.
Instalace .................................................................................................... 59
14.2.
Požadavky na server .................................................................................. 59
15.
Obsah CD ........................................................................................................ 59
11
12
Seznam obrázků Obrázek 1 - Libimseti.cz ............................................................................................. 21 Obrázek 2 - Lide.cz ..................................................................................................... 22 Obrázek 3 - MySpace.com profilová stránka ............................................................... 23 Obrázek 4 - Facebook.com profilová stránka ............................................................... 26 Obrázek 5 - Znázornění MVC architektury .................................................................. 33 Obrázek 6 - Doménový model ..................................................................................... 49 Obrázek 7 - Use Case diagram Profilu ......................................................................... 50 Obrázek 8 - Use Case diagram POI ............................................................................. 51 Obrázek 9 - Use Case diagram Fotky ...........................................................................52 Obrázek 10 - Databázový model .................................................................................. 53
13
14
Seznam tabulek Tabulka 1 - Vysvětlení významu atributů FBML ......................................................... 28 Tabulka 2 - Ukázka vybraných tagů a operátorů Tengu ............................................... 40
15
16
Kapitola 1 1. Úvod V posledních deseti letech nového tisíciletí se světová webová scéna značně proměnila. Vedle klasického statického webu, který představoval zejména text a obrázky, se začínal pozvolna objevovat i nový styl vytváření webového obsahu. Webové stránky získaly interaktivní složku. Vývoj se ale nezastavil jen u interaktivity obsahu, dal totiž uživatelům mocný nástroj podílet se na jeho tvorbě vlastními příspěvky. Tímto krokem vzniklá decentralizace obsahových zdrojů umožnila webové stránky přetvořit z izolovaných úložišť dat v aplikaci obsahující informace i funkcionalitu. Stávají se tak platformou poskytující webové aplikace. Komunitní web využívá právě těchto nových možností k získávání uživatelsky zajímavého obsahu. Největší komunitní servery kladou důraz zejména na sdílení statusů, fotografií, chatování, blogování apod. Tato práce si klade za cíl navrhnout a vytvořit komunitní server, který zapojí do komunitních možností další prvek a zároveň změní jeho běžné využití. Tímto novým prvkem je mapový podklad spojený s bodem zájmu (POI) z angl. point of interest.
1.1.
Struktura práce
Tato práce v následujících pěti kapitolách, po zevrubné rešerši současných nejznámějších řešení, pojednává o analýze, návrhu, implementaci a následném testování webové aplikace komunitního serveru. V této kapitole bude ještě vysvětleno, co stojí za pojmem komunita a komunitní server. Dále stručné zamyšlení nad oblibou sdílení osobních údajů na internetu a také nad možnostmi jejich využití s mapovým podkladem. V kapitole druhé budou popsána tradiční i neobvyklá stávající řešení a to jak na české tak mezinárodní úrovni. Třetí kapitola se zaměří na cíle a požadavky kladené na vznikající aplikaci, jaký bude její přínos a kam by měla ideově směřovat, analýzu a návrh, krátce zde představíme MVC architekturu a její zakomponování do návrhu systému.
17
Čtvrtá kapitola se zabývá technologiemi pro implementací systému, popisem jednotlivých komponent, jejich klady a zápory. Na problematiku testování se podíváme z několika úhlů v kapitole páté. A závěru patří kapitola šestá se zhodnocením výsledků práce a návrhy na její vylepšení.
2. Co je to komunitní server 2.1.
Komunita
Než zde bude popsána myšlenka komunitního serveru, bylo by dobré zmínit, co je to vlastně komunita. Zde je stručná definice. Za komunitu je považováno společenství živých bytostí, které sdílejí určitou oblast, omezenou prostorově, jejich společnými zájmy apod. Komunitu charakterizuje zejména sdílená vzájemná interakce, vycházející například ze společných potřeb nebo zájmů. Komunity se obvykle vytvářejí na jednom konkrétním místě. Zejména s rozšířením internetu ale toto omezení přestává platit, například komunity na diskusních fórech, linuxová komunita apod.[1]
2.2.
Komunitní server jako fenomén doby
Komunitní server představuje platformu zajišťující interakci mezi uživateli. Představuje jeden z pilířů web 2.01. Obvykle má velkou spoustu funkcí, které mohou uživatelé využívat. Jde například o blogy, fotogalerie, emailovou schránku, vlastní webový prostor a různé agregované informační streamy. Převážná většina jejich obsahu je tvořena samotnými uživateli sdílením osobních dat, které se v současnosti rozmohlo do masových rozměrů díky gigantům webového světa, jako je například Facebook. Využíváním služeb komunitních serverů uživatel samozřejmě mnoho získává. Nové způsoby komunikace jsou vždy vítány, i když mnohdy mohou být i návykové. Každopádně se tímto otevírají možnosti pro zefektivnění komunikace, seznamování, sdílení dat, je možná výměna zkušeností u odborně či zájmově orientovaných komunit a jistý je i určitý pozitivní vliv na psychiku uživatele.[2][3][8]
1
ustálené označení pro etapu vývoje webu, v níž byl pevný obsah webových stránek nahrazen prostorem pro sdílení a společnou tvorbu obsahu
18
Naproti tomu existují i možné negativní stránky a vlivy komunitních webů na společnost. Mezi prvními by jistě mělo figurovat zneužití osobních dat, ať už k šíření spamu, virů či malwaru, tak ke komerčním účelům v reálném světě. Na používání a komunikaci s komunitou mohou vznikat závislosti a s nimi spojený negativní dopad na psychické i fyzické zdraví uživatele. Problémy s případnou trestnou činností a zneužíváním mladistvých se nevyhnou zřejmě žádné oblasti anonymního prostředí internetu.
2.3.
Mapa a možnosti určování polohy
Jak bylo v úvodu stanoveno, tato práce má do komunitního prostředí zapracovat mapové podklady. K tomuto účelu je třeba nějakého souřadného systému určování polohy v mapě. Je standardem používat zeměpisnou délku a šířku. Dále je k dispozici více možností, jak tyto souřadnice zjistit a posléze využít.
2.3.1.
Global Positioning System (GPS)
GPS2 je globální polohový družicový systém, s jehož pomocí lze díky 24 satelitům vysílajícím radiové signály kdekoliv na zemi i ve vzduchu určit polohu, směr pohybu objektu a přesný čas. Přesnost určení polohy je závislá na podmínkách a pohybuje se v řádu metrů až jedné desítky metrů. Existují i jiné systémy družicového určování polohy jako například evropský Galileo, ty jsou však méně rozšířené nebo nedokončené.
2.3.2.
A-GPS
A-GPS3 je zkratka používaná pro Assisted GPS. Použití je nejčastější v přenosných zařízeních disponujících připojením k mobilní síti. Zařízení pracuje s informacemi o blízkých BTS a úrovních signálu, které odesílá na server. Server vrací dopočítanou přibližnou polohu zařízení. Tato metoda se využívá zejména ve velkých městech mezi vysokými budovami. Určením přibližné polohy je možno v kombinaci s GPS urychlit nalezení satelitů.
2 3
GPS – ftp://tycho.usno.navy.mil/pub/gps/gpssy.txt A-GPS – http://www.gpsworld.com/gpsworld/article/articleDetail.jsp?id=12287
19
2.3.3.
IP lokace
IPv44 je jednoznačný identifikátor počítače v síti, který neodpovídá žádnému geografickému schématu, používaných pro orientaci. Jsou proto potřeba převodní tabulky a mechanismy. Ty je potřeba udržovat aktuální na bázi poskytovatelů konektivity. Pro Českou republiku existují tyto podklady zdarma, bohužel nejsou 100% aktuální ani na bázi určení města nebo kraje. V současné době se ale tyto funkce, zdokonalené například o lokalizaci pomocí Wi-fi, začínají integrovat přímo do nových verzí webových prohlížečů.[4]
4
IPv4 – Internet Protocol version 4 – http://tools.ietf.org/html/rfc791
20
Kapitola 2 3. Současná řešení Do této časti jsou vybrány zajímavé projekty, jak české, tak mezinárodní. Je zde popsáno, jak vznikly nebo čím jsou zajímavé. Zvláštní pozici má Facebook jako současný největší komunitní portál na světě.
3.1.
Libimseti.cz
Vzniklo v roce 2002, jako kopie amerického serveru hotornot.com. Jeho tvůrcem a v současné době většinovým spoluvlastníkem je Oldřich Neuberger, bývalý student fakulty elektrotechnické ČVUT.
Obrázek 1 - Libimseti.cz
Z počátku bylo jedinou funkčností Libimseti hodnocení vlastních fotografií uživatelů. Ke konci roku 2003 byly přidány komunitní funkce. Libimseti se tak stalo jedním z prvních nezávislých a samostatných komunitních portálů v České republice. 21
Nebylo tedy zastřešeno žádným silným internetovým hráčem té doby. Největšího úspěchu a rozšíření povědomí o značce dosáhlo během let 2006 – 2008.
Počet
registrovaných uživatelů dosáhl až k 1,4 milionu a denní návštěvnost čítala 240 tisíc reálných uživatelů. Po celou dobu své existence se Libimseti (Obrázek 1) profilovalo čistě jako lokální seznamovací portál. S masivním rozšířením Facebooku v České republice přistoupilo k napodobení některých jeho oblíbených funkcí.[6]
3.2.
Lide.cz
Existenci serveru Lide.cz můžeme zaznamenat již od roku 1997, tehdy se ale nejednalo o komunitní server. Ve spolupráci se společností PinkNet poskytoval služby pro vyhledávání emailových adres. V roce 2002 došlo ke změně na chatovací portál. Pod hlavičkou Seznam.cz byl vývoj směrován k transformaci na plnohodnotný komunitní portál. Tento vývoj až do roku 2006 zajišťovali Pavel Francírek a Martin Michale, kteří před tímto projektem společně vytvořili systémy Xko a Xchat. V průběhu existence Lide.cz (Obrázek 2) počtem uživatelů zhruba dvakrát převyšoval Libimseti.cz, a to zejména díky podpoře mateřského portálu Seznam.cz.[7]
Obrázek 2 - Lide.cz
22
3.3.
MySpace.com
MySpace založili v polovině roku 2003 Tom Anderson a Chris DeWolfe jako komunitní portál, vyvíjený společností Intermix Media Inc. Od počátku se profiloval jako „place for friends“, tedy místo pro přátele, a i když nebyl svým zaměřením zdaleka první službou, stal se během dvou let nejúspěšnější ve své kategorii. MySpace dosáhl v srpnu 2006 hranice 100 milionů uživatelských účtů. V té době ale začala léta stagnace a posléze úpadku. Pro služby typu web 2.0 je podmínkou životaschopnosti vysoká míra inovace, kterou MySpace nebyl schopen poskytnout.
Obrázek 3 - MySpace.com profilová stránka
Ale vraťme se k tomu, co portál nabízí. Ačkoli v České republice je znám spíše kvůli své hudební části, MySpace Music, na počátku tuto část ve své podstatě vůbec neobsahoval a byla přidána až v průběhu vzestupu MySpace na první příčku v počtu aktivních uživatelů. Flexibilita byla jednou z výhod oproti tehdejším konkurentům. Při spuštění MySpace využila zakládající společnost Intermix Media svých rozsáhlých databází emailových adres, na které rozeslala pozvánky. K rozšíření pomohly i další komerční aktivity společnosti Intermix Media, například sponzorství na hudebních akcích a samozřejmě seznamka, kterou tato společnost provozovala. Na serveru hned při registraci zadáváte, samozřejmě volitelně, své preference, zda vám jde o kamarádství či randění a mimo jiné i sexuální orientaci. Základním prvkem portálu je domovská stránka s profilem uživatele (Obrázek 3), jejíž obsahem jsou poslední příspěvky v blogu, top přátelé, samozřejmě uživatelova 23
fotografie, základní informace typu bydliště, věk, pohlaví a pak také zájmy a stručné představení sebe samotného. Přátelství zde není nijak odstupňováno a může znamenat prakticky cokoliv. Přítel tak může být dlouholetý známý nebo v krajním případě spambot. Velký rozdíl od konkurenčních portálů spočívá u MySpace v možnosti měnit vzhled svého profilu prakticky neomezeně. Při editaci textových polí lze totiž používat i HTML značek a kaskádových stylů (CSS). Zatímco u konkurence musí uživatel vzít zavděk předefinovanými styly popřípadě akceptovat jednotný styl grafiky. Díky tomu je možné změnit naprosto vše, pozadí stránky, rozvržení prvků, orámování, velikost a barva písma atd. Tato otevřenost ale negativně ovlivňuje orientaci na stránce.[8]
3.4.
Facebook.com
Tomuto komunitnímu portálu zde věnuji více prostoru, jelikož byl při vytváření velkou inspirací, pro jeho originální přístup k uživatelskému prostředí a ovládání aplikace. Zároveň využívá podobné technologie, které jsem se rozhodl využít ve svém projektu, pro jejich inovativní a moderní přístup pro práci s obsahem stránky.
3.4.1.
Historie Facebooku
Facebook byl založen v únoru 2004 Markem Zuckenbergem, bývalým studentem Harvard University, jako sociální síť pro studenty této univerzity. Nejdříve se zapojily i další elitní univerzity a brzy se rozšířil na všechny univerzity ve Spojených státech, poté i anglické, mexické a francouzské. Začaly se zapojovat i střední školy a od února roku 2006 dokonce i soukromé společnosti. V srpnu téhož roku bylo rozhodnuto otevřít přístup na Facebook pro kohokoliv staršího 13 let. Facebook by se dal popsat jako rozsáhlá webová komunitní aplikace sloužící hlavně k tvorbě sociálních sítí, komunikaci mezi uživateli, sdílení multimediálních dat, zábavě a udržování vztahů. Začátkem prosince 2007 se stal Facebook se svými 57 miliony aktivními uživateli stránkou s největším počtem uživatelů mezi studentskými weby. Od zpřístupnění veřejnosti, tedy za pouhý rok od roku 2006, poskočil z 60. na 7. pozici mezi nejnavštěvovanějšími stránkami světa. Ve spojených státech je Facebook jedničkou pro online sdílení fotografií s více než 60 miliony nahraných fotografií týdně.[9]
24
3.4.2.
Současné vyhlídky
V současné době čítá na více než 325 milionů aktivních uživatelů po celém světě, kteří stále přibývají ohromným tempem 250 tisíc za den. Za měsíc je zhlédnuto více než 65 miliard stránek, vyhledáno přes 500 milionů výsledků, velikost indexu vyhledávání přesahuje 200GB a počet fotografií uložených na jeho serverech se počítá v miliardách. Tato čísla však neustále rostou, tudíž je pravděpodobné, že už ani v tuto chvíli nejsou aktuální. Facebook je tak považován za největší společenskou síť na světě. Jeho hodnota je nyní odhadována na 10 miliard dolarů. V posledních dnech a týdnech se mluví o změnách v nastavení soukromí a snaze Facebooku přimět uživatele sdílet své soukromí s větším okruhem lidí, či nastavit si informace v profilu jako veřejné. Z pohledu vývojáře je tato snaha pochopitelná, jelikož indexace vyhledávačů je vždy žádaná a přivádí nové uživatele, více zobrazení stránek a celkově otevření soukromí přispívá k rozšiřování uživatelské základny. S tímto mohou vyvstat samozřejmě problémy, kdy uživatelé tyto změny odmítnou akceptovat. Proto se Facebook snaží redukovat původní systém sítí a sdílení informací. Dnes ale ještě není známo, do jaké míry budou sítě rušeny, zda na národní bázi, regionální, či se podniknou zásahy jiným způsobem.
3.4.3.
Možnosti systému
Zapojení se do komunity Facebooku začíná stručnou efektivní registrací, po které se vás systém ujme jednoduchým průvodcem. Pokusí se vám sérií několika kroků najít vaše první přátele, bez nichž by byl váš facebookový účet prakticky prázdný a nenaplňoval by svoji podstatu. Pokud jiný uživatel souhlasí s tím, že je váš přítel, můžete si prohlížet jeho profil a odebírat jeho novinky. Systém dále umožňuje komunikaci mezi uživateli pomocí zpráv nebo chatu. Další funkčnost obstarávají aplikace. Ty základní pocházejí přímo od tvůrců Facebooku. Od května 2007, kdy bylo oznámeno, že se na tvorbě budou podílet i další firmy, které mohou užívat prostředí a programovat pro něj nové aplikace, od propojení s dalšími webovými službami až po zcela samostatné flashové aplikace.
25
3.4.4.
Aplikace
V tomto odstavci zmíním tři zajímavé základní aplikace a ve zkratce popíšu jejich funkci.
Obrázek 4 - Facebook.com profilová stránka
o The Wall (Zeď) – V každém uživatelském profilu je tato základní aplikace, bez níž by Facebook nebyl tím čím je. Zobrazuje vzkazy, novinky přátel i multimediální obsah (Obrázek 4). o Photos (Fotografie) – Aplikace umožnuje sdílet fotografie s přáteli. Upload fotek je řešen přes aplet, což je sice velice pohodlné, ale vyžaduje nainstalovanou Javu na straně uživatele. Fotografie pak lze vybírat přímo z disku, online otáčet, upravovat a označovat v nich přátele, kteří poté dostávají oznámení o označení na svoji zeď. o Poke (Štouchnutí) – Každý uživatel má možnost virtuálně „šťouchnout“ kteréhokoliv jiného uživatele. Tato funkce bez zřejmého užitku je velmi oblíbená. Takovéto šťouchnutí je možno interpretovat jakkoliv, především jako snahu o upoutání pozornosti. Spousta aplikací třetích stran se snaží tuto funkci kopírovat a rozšiřovat. 26
3.4.5.
Technické zázemí
Jádro Facebooku je postaveno na softwarovém balíku LAMP (Linux, Apache, MySQL, PHP). Dále se využívají technologie vyžadující podporu na straně uživatele, tedy například Java, Flash5 nebo AJAX6. Pro usnadnění tvorby facebookových aplikací je možno použít jazyk FBML (Facebook Markup Language), který je extenzí HTML a zajišťuje konzistenci aplikací a bezpečnost. Je také možné používat upravený JavaScript pod názvem FBJS (Facebook JavaScript). Pro dotazy k databázi se používá FQL (Facebook Query Language).[10] Zde můžeme vidět příklad FBML pro vytvoření selektoru přátel. Nejdříve vstupní textové pole pro omezení výběru:
Následované výpisem s integrovanou funkcí výběru samotného:
5 6
Grafický vektorový program, momentálně ve vlastnictví společnosti Adobe (www.adobe.com) Asynchronous JavaScript and XML
27
Vidíme, že vše je řešeno velmi komplexně a pro lepší porozumění je zde tabulka atributů: Povinné Název volitelné uid
Typ int
name idname
string string
include_me
bool
exclude_ids
array
Popis Uživatel, jehož přátele vybíráme (defaultně uid zalogovaného) Jméno elementu formuláře. Jméno skrytého formuláře, který obsahuje jména vybraných uživatelů. Indikuje, zda zahrnout zalogovaného uživatele do seznamu. Pole uživatelů, kteří jsou ze seznamu vyjmuti.
include_lists
bool
Indikuje, zda zahrnou přátele do seznamu.
prefix_id
bool
Indikuje, zda do seznamu zahrnout i uživatele, jejichž soukromá data nejsou veřejná.
Tabulka 1 - Vysvětlení významu atributů FBML
28
Kapitola 3 4. Cíle a požadavky V této kapitole se změříme na vlastní záměr celého projektu a vymezíme přesně jeho funkce. Pro analýzu poslouží základní modely, které popisují aplikaci jak z hlediska datové struktury, tak z hlediska uživatele.
4.1.
Deklarace záměru
Cílem projektu je navrhnout a implementovat komunitní server, který bude využívat technologii Google maps. Uživatelé budou mít možnost sdílet svá oblíbená místa s ostatními pomocí interaktivních map. Nepřihlášený uživatel bude moci pouze prohlížet profily míst. Přihlášený uživatel získá možnost body vkládat do své mapy a to jak nové body, tak již existující, vkládat k nim fotky, sdílet informace s přáteli, psát zprávy, statusy, upravovat svůj profil a také komentovat body a statusy.
4.2.
Katalog požadavků
Katalog požadavků definuje funkce, jaké bude aplikace poskytovat a jaká omezení jsou na ni kladena.
4.2.1.
Nefunkční požadavky
Výkonnost
1. Systém bude zvládat minimálně řádově desítky tisíc uživatelů 2. Systém bude odpovídat na požadavky uživatelů v řádu stovek milisekund
Bezpečnost
1. Systém bude odolný proti standardním útokům 2. Privátní data v systému nebudou „zvenku“ dostupná
29
Jednotnost
1. Správné zobrazení v nejpoužívanějších prohlížečích podporujících klíčové technologie aplikace
4.2.2.
Funkční požadavky
Registrace
1. Uživatel získá svůj profil a práva k vytvoření vlastní mapy bodů zájmu a vkládání fotek
Point of Interest (POI)
1. Uživatel může v mapovém podkladu vytvořit POI 2. Nastavení typu POI 3. Uživatel může editovat své vlastní POI 4. Změna typu POI 5. Uživatel může mazat POI ze své mapy 6. Stejná POI a. Uživatel může zjistit, kdo má stejné POI v mapě b. Uživatel může přidat cizí POI i do své mapy 7. Uživatel může psát zprávy k jemu dostupným POI 8. Uživatel může vkládat komentáře u všech jemu dostupných POI 9. Data z POI je možno agregovat do statistik
Profil uživatele
1. Fotky v profilu 2. Kontakt na uživatele 3. Další informace o uživateli 4. Zobrazení uživatelových POI 5. Nastavení profilu a. Uživatel si může změnit heslo b. Uživatel může změnit profilovou fotku c. Uživatel může změnit kontaktní informace
30
Log uživatelských stavů
1. uživatel může nastavit vlastní stav 2. uchovává se historie uživatelských stavů 3. historie i stav jsou sdíleny pouze přáteli
Vzkazy 1. Uživatel může posílat vzkazy jiným uživatelům
Vyhledávání 1. Mezi uživateli 2. Mezi POI
Administrace 1. Možnost editovat POI 2. Dovoluje mazat nevhodné fotky 3. Dovoluje mazat nevhodné komentáře 4. Možnost editovat profily
4.3.
Chování aplikace
Jelikož bude aplikace využívat API7 Google maps, je třeba tomu faktu přizpůsobit styl práce se zbytkem stránky, na níž je mapa umístěna. Servery společnosti Google nemají dostatečnou konektivitu, abychom mohli pracovat standardně na principu opakovaných načtení po změně obsahu stránky vyvolaného uživatelem. Komfort při používání aplikace by se tak znatelně snížil. Bude tedy nutné využívat asynchronní volání serveru na pozadí aplikace. To je zároveň výhodné i z hlediska přenášených dat, kdy přenášíme jen to, co opravdu potřebujeme a nezatěžujeme server opakovanými požadavky na data, která už nám poskytl.
7
Application Programming Interface
31
5. Návrh V této kapitole se již zabýváme konkrétním návrhem funkčnosti aplikace. Představíme zde doménový model aplikace. Veškeré požadavky na aplikaci a akce, které bude moct uživatel s aplikací provádět, jsou přehledně zakreslené v diagramech případů užití a sekvenčních diagramech, ke kterým je dále i vysvětlující textový popis.
5.1.
Doménový model
Doménový model (Obrázek 6) je konceptuální datový model a slouží především k modelování reality. Jeho smysl spočívá hlavně v ucelení představy logických celků systému a jejich atributů. Je třeba podotknout, že se jedná o prvotní náhled do problémové domény, tedy vytvářeného projektu a nijak tedy nemusí souviset s výslednou implementací a uložením dat v systému.
5.2.
Případy užití
Případy užití (Obrázek 7 až Obrázek 9) nám vlastně ukazují v diagramech uspořádané funkční požadavky aplikace z hlediska uživatele. Systém rozlišuje tři typy uživatelů, nepřihlášeného, přihlášeného a administrátora. Nepřihlášený uživatel může prohlížet a procházet profily bodů a jejich detaily, nemůže do nich však nijak zasahovat. Nemá přístup do jiných sekcí, může se pouze přihlásit nebo registrovat a tím získat funkce popsané v části 4.2.2 krom administrace, která náleží logicky pouze administrátorovi.
5.3.
Relační databázový model
Jak už z názvu vyplývá, relační model databáze (Obrázek 10) přesně popisuje strukturu databáze, její tabulky a relace mezi nimi, atributy tabulek, primární a cizí klíče. Zohledňuje již konkrétní implementaci, což je hlavní rozdíl od modelu doménového.
5.4.
Architektura MVC
Za zkratkou MVC stojí anglická slova Model – View – Controller. Označují třívrstvou architekturu aplikace, která v posledních letech získala na oblibě zejména u internetových aplikací. Výhodou je mimo jiné to, že změnou jedné z částí zůstávají ostatní nedotčeny nebo pouze minimálně. 32
Jak již bylo řečeno, architektura MVC dělí aplikaci do tří vrstev (viz obr.). Aplikační a datovou logiku zapouzdřuje model. Vrstva obstarávající výstup na displej se nazývá view a controller reaguje na akce uživatele. Mezi uživatelem a controllerem stojí mimo jiné dispatcher, který také v určitých případech určuje, jaké view zobrazit a jakými daty ho naplnit.[11]
Obrázek 5 - Znázornění MVC architektury
5.5.
Grafické rozhraní
Grafické rozhraní u aplikací typu web 2.0 není nejpodstatnější částí, je třeba, aby bylo čisté a efektivní a nijak nepřebíjelo obsah. Zásady pro jeho tvorbu bych shrnul do několika bodů: 33
Navigace na stránce musí být na obvyklém místě, které se v rámci aplikace nemění.
Hlášení systému jsou barevně odlišena od okolí a případně barevně rozdělena podle významu.
Odkazy jsou jednotné, zvýrazněné kontrastní barvou, využívají podtržení.
Logo odkazuje na domovskou stránku.
5.5.1.
Optimalizace pro rozlišení
Trendy dnes udávají jasný směr k širokoúhlým displejům s vysokým rozlišením obrazu. Bohužel se nové technologie a zařízení s vyšším rozlišením dostávají mezi veřejnost velmi pomalým tempem a vzniká tak paradoxně situace, kdy část uživatelů zůstává u extrémně nízkých rozlišení jako je například 800x600px a druhý extrém jsou uživatelé s rozlišením vyšším než 1680x1050px. Pro optimální zobrazení je tak třeba volit šířku stránky kompromisně. Osobně jsem se rozhodl pro minimální šířku 1024px, která se dá dnes považovat za standard. Optimalizovat pro rozlišení nižší by již bylo na úkor většiny uživatelů.
34
Kapitola 4 6. Technologie V této kapitole si ukážeme a popíšeme všechny technologie, jaké byly pro tvorbu aplikace použity.
6.1.
XHTML (eXtensible HyperText Markup Language)
Jedná se o značkovací jazyk pro tvorbu hypertextových dokumentů vyvinutý konsorciem W3C8. Původně se předpokládalo, že se stane nástupcem HTML, jehož vývoj byl verzí 4.01 ukončen. Nyní se ale vytváří další verze HTML, která ponese označení HTML 5.0 a její XML variantu XHTML 5. Stručně řečeno XHTML se více přibližuje podmínkám XML dokumentů, neříká tedy nic o vzhledu obsahu, ale popisuje pouze strukturu. Pomocí DTD9, které udává jazyk pro popis struktury XML dokumentu a omezuje množinu přípustných dokumentů spadajících do daného typu nebo třídy, rozlišujeme tři druhy XHTML.[12]
XHTML 1.0 Strict – vhodný pro použití, chcete-li čistě strukturovaný dokument bez formátovacích značek souvisejících s rozvržením stránky a vzhledem. Předpokládané je jeho využití společně s CSS.
XHTML 1.0 Transitional – je přechodným typem DTD pro webové stránky, stojí na pomezí HTML a XHTML. Povoluje formátovací tagy pro text a další atributy přímo v kódu. Hodí se pro vytváření stránek pro starší prohlížeče, nebo chcete-li využívat některé zavržené tagy a atributy.
XHTML 1.0 Frameset – tento typ podporuje používání zastaralých značek a přidává podporu dnes již překonaných a témeř nepoužívaných rámců. Již se prakticky nepoužívá.
6.2.
CSS (Cascading Style Sheets)
Česky podivně znějící název „tabulky kaskádových stylů“, představuje jazyk pro popis způsobu zobrazení HTML, XHMTL nebo XML dokumentů. Jazyk byl opět 8 9
Mezinárodní konsorcium, které vyvíjí webové standardy (www.w3c.org) Document Type Definition
35
navržen standardizační organizací W3C, v současné době se pracuje na revizi CSS 3 ale některé z nejnovějších prohlížečů mají problém i se specifikací CSS 2.1. CSS
bývá
umístěn
v samotném
souboru,
na
který
je
odkazováno
v hlavičce dokumentu, může být připojeno i více verzí, například každá pro jiné médium nebo pro různé prohlížeče.
6.3.
PHP (Hypertext Preprocessor)
Rekurzivní zkratka PHP označuje platformově nezávislý skriptovací jazyk primárně určený k tvorbě dynamických webových stránek. Skripty PHP jsou prováděny na straně serveru a k uživateli je přenášen až výsledek jejich činnosti. Tento jazyk jsem zvolil zejména pro jednoduchost syntaxe a také jeho velké rozšíření v oblasti tvorby internetových stránek. Přestože má samozřejmě i řadu nevýhod. Je to jazyk tzv. dynamicky typový tzn., že se typ proměnné určuje až v okamžiku přiřazení hodnoty. Díky tomu mohou vznikat různé bezpečnostní mezery v aplikaci. Další nevýhodou je, že nebyl původně navržen jako objektový a podpora objektů se objevuje až ve verzi PHP 5, kde se kvůli ohledům na zpětnou kompatibilitu potýká s problémy. Zvažoval jsem i použití Java EE 10, což je velmi propracovaná technologie, používaná především pro tvorbu rozsáhlých a náročných aplikací. Její nevýhodou byla zejména nízká rychlost práce s daty a nevhodnost pro menší projekt.
6.4.
MySQL
MySQL je databázový systém vytvořený švédskou firmou MySQL AB. Je to multiplatformní databáze a jak již název napovídá, komunikace s ní probíhá pomocí jazyka SQL11.
6.5.
JavaScript
JavaScript je objektově orientovaný interpretovaný skriptovací jazyk používaný zejména pro internetové stránky. Tyto skripty jsou spouštěny přímo na straně klienta a jsou buď vkládány přímo do HTML kódu, nebo, což je samozřejmě čistější řešení, umístěny v samostatném souboru, na nějž se podobně jako u CSS odkazujeme
10
platforma pro vývoj serverových aplikací v jazyce Java Structured Query Language – standardizovaný dotazovací jazyk používaný pro práci s daty v relačních databázích 11
36
v hlavičce dokumentu. Toto řešení má i výhodu, že prohlížeč si soubor se skripty uloží do cache12 a již jej znovu nenačítá. Velkým problémem JavaScriptu je jeho odlišná reprezentace v různých prohlížečích a to zejména ve starších verzích Internet Exploreru (IE), které si s klesající tendencí stále drží téměř desetiprocentní podíl na trhu. Pro velký podíl JavaScriptu v aplikaci, jsem se rozhodl tyto zastaralé verze prohlížečů ve své aplikaci nepodporovat. Ze stejného důvodu prohlížeče bez podpory JavaScriptu nemohou se stránkou pracovat a uživateli bude doporučeno přejít k používání jiného prohlížeče, či povolení JavaScriptu.[13]
6.6.
AJAX (Asynchronous JavaScript and XML)
Zkratka AJAX označuje skupinu technologií sloužících k tvorbě interaktivních webových aplikací, které dokážou komunikovat se serverem a získávat tak nová data pro zobrazení bez reloadu stránky. Se serverem tedy komunikuje javascriptová vrstva, která pracuje s vrácenými daty a zapracovává je do stránky, na rozdíl od klasického přístupu, kde každá akce typu kliknutí na odkaz vyvolá reaload stránky. Výhodou je přiblížení vzhledu aplikace k plnohodnotné aplikaci a snížení zátěže serveru, nevýhodou je změna stylu práce se stránkou, kdy částečně mizí posloupnost stránek, mezi kterými se lze navigovat pomocí tlačítek Zpět a Další. Tento nedostatek lze odstranit například zásahem do url, využitím části za znakem #.
6.7.
Google Maps API
Google Maps API umožňuje vložit Google Maps na vlastní webové stránky pracující s JavaScriptem. API poskytuje řadu nástrojů pro manipulaci s mapou a přidávání obsahu do mapy prostřednictvím různých služeb, což umožňuje vytvořit robustní mapové aplikace na webových stránkách. Pro jejich používání je třeba získat klíč, který se použije v hlavičce stránky, na nichž budou Google Maps umístěny.[5]
6.7.1.
Proč právě Google Maps
Také Mapy.cz mají vlastní API, ty však nedosahují takových kvalit, například mapa obsahuje pouze Evropu a může být za den zobrazena pouze 1000 krát. 12
je označení pro vyrovnávací paměť používanou ve výpočetní technice
37
Dalším konkurenčním produktem je Microsoft Virtual Earth, který má horší podklady pro Českou republiku než Google Maps, ale není k němu třeba žádného klíče. API obou produktů jsou velice podobná. Nevýhodou Google Maps API je, že je poskytováno bez záruky - může být kdykoliv změněno či zrušeno. Jeho hlavní výhodou je notorická známost.
7. Implementace V minulé části již bylo řečeno, že pro implementaci byl zvolen jazyk PHP, v této části to ještě doplníme a bude krátce popsána funkčnost aplikace postavené na jednoduchém uzavřeném frameworku nazvaném Jetwork. Ten sice neposkytuje prakticky žádné vyšší knihovny, ale jeho struktura není složitá k pochopení.
7.1.
Controller - Handlery a Dispatcher
Třída Service slouží v aplikaci jako dispatcher. Dispatcher pouze překládá požadavky z url, které jsou, pokud je třeba, posléze obslouženy ActionHandlery13 a vybírá vhodnou šablonu z view. Třída PoiActionHandler má na starosti zpracování dat o bodech, které zobrazí view. Informace o bodech zpracovává buď na požadavek JavaScriptu nebo na přímý požadavek pro naplnění šablony. UserActionHandler je třída, která obstarává veškeré akce týkající se uživatele jako je například registrace. Metody zajišťující agregaci uživatelských dat apod. Jsou zde obslouženy i požadavky pro zpracování dat na uživatelův profil. ProfileActionHandler, třída s trochu nelogickým názvem, který zůstal od počátku psaní aplikace nezměněn ale byla mu přidána další funkčnost a obsluhuje tak všechny dotazy volané AJAXem. SettingActionHandler, třída starající se o změny uživatelského nastavení účtu a profilu. Obsahuje algoritmy pro upload a zmenšení profilových fotek. Je tu také metoda zajišťující odesílání ověřovacích emailů. 13
Třídy s implementovanou funkčností z vrstvy controlleru
38
$this->mapper->add( "PoiDetail", array( "path"
=> "ajax/detail",
"priority" => "1" ), array( "load_file" => "poi.php", "content_class" => "PoiHandler", "content_fn" => "info", "template" => "poiDetail.html" ) );
Výpis kódu 7.1: Příklad zápisu položky do dispatcheru
7.2.
View - Teng
Název Teng je vlastně akronym skrývající slova Template Engine neboli šablonovací systém. Přesněji je to šablonovací systém předně pro C++, ale existuje i jako modul pro Python a také, což je podstatné pro nás, rozšíření pro PHP. Teng striktně odděluje prezentační logiku od logiky aplikační. Každá šablona je před generováním stránky zkompilována do takzvaného byte kódu. Byte kód je posloupnost instrukcí pro procesor Teng enginu. Během generování stránek engine vykoná instrukce byte kódu a výsledek vypíše na výstup.[14]
Teng Template example ${variable}
Výpis kódu 7.2: Příklad zápisu fragmentu za použití Teng
39
Tengový zápis
Význam
Začátek bloku pro výpis
Konec bloku pro výpis
Výpis proměnné
${variable}
Zkráceně zapsaný výpis proměnné uvnitř bloku
Nastavení proměnné, je platná pouze v daném bloku.
expession
?
expression_true
: Ternární operátor
expression_false Tabulka 2 - Ukázka vybraných tagů a operátorů Tengu
7.3.
Model – Providery
Model představuje datovou vrstvu a zapouzdření datové logiky. Ve frameworku Jetwork je model reprezentován tzv. providery, které používají ke komunikaci s databází SQL. Model je v samotné aplikaci tvořen šesti třídami. PoiProvider, UserProvider, StatusProvider, ImageProvider, FriendProvider, které obsahují funkce pro manipulaci s jim přiřazenými tabulkami a LoginProvider zajišťující zalogovaní a odlogování uživatele. Připojení k databázi zajišťuje framework.Využívá k tomu údaje z konfiguračního souboru jetwork.conf.
7.4.
Bezpečnost
Internetové aplikace musejí samozřejmě velmi dbát na bezpečnost, jelikož jsou dostupné veřejnosti a je známo mnoho tzv. hacků, které mohou být proti aplikaci použity, aby změnily její vzhled, vykradly data nebo jiným způsobem poškodily její fungování.
7.4.1.
SQL Injection
SQL Injection patří mezi nejčastější typ útoku na neošetřené vstupy webové aplikace. Míří na databázovou vrstvu aplikace. Tento útok umožňujeme, pokud textové řetězce z formuláře vkládáme přímo do SQL dotazu. Pak je možné formulářem vložit vlastní SQL příkaz a předat vlastní příkaz nebo změnit funkci původního. Zabránit tomuto útoku lze escapováním14 znaků se speciálním významem. Tuto ochranu zajišťuje Jetwork automaticky. 14
převádění potenciálně nebezpečných znaků na sekvenci, která nepředstavuje nebezpečí
40
7.4.2.
Cross-Site Scripting – XSS
Tato metoda také využívá neošetřených vstupů nebo url a to k vložení vlastního skriptu do aplikace. Podstrčeným skriptem bývá nejčastěji JavaScript, který může získávat citlivá data uživatelů, nebo poškozovat zobrazení stránky. Ochranou proti tomuto typu útoku spočívá v odfiltrování nebezpečných entit pomocí PHP funkce htmlspecialchars v okamžiku jejich výpisu. V aplikace je použita i javascriptová obdoba této funkce, která je aplikována na vstupy, které se ihned využívají na straně klienta bez odeslání na server.
7.5.
Vybraná zajímavá řešení
Z celé aplikace jsem vybral několik řešení problému, která mi přišla zajímavá a ne úplně obvyklá.
7.5.1.
Modální okna
Body se do mapy vkládají na základě funkčnosti API poskytového společností Google. Vyvstává otázka, zda využít pro práci s body v mapě standardně nabízených funkcí, nebo zda využít vlastní řešení. Body se v kontextu s mapou označují jako overlay. API nám pro tzv. clickable overlay nabízí standardní funkci OpenInfoWindow, která při kliknutí vyvolá zobrazení jednoduchého okna tvaru bubliny přímo v mapě. Pokud ale požadujeme při kliknutí na overlay zobrazit více informací, malé infowindow se může stát poněkud nepohodlným řešením. Větší infowindow zase může přesahovat rozměr prvku mapy ve stránce. Modální okno15 pak představuje pro práci s Google maps ideální řešení, jak nezasahovat do stránky samotné, ale odsunout ji do pozadí a uživateli předložit potřebné informace. Informace se tak zobrazují bez přechodu na novou stánku či zásahu do současně zobrazené stránky. Tento faktor výrazně zvyšuje použitelnost webové prezentace.
7.5.2.
Agregace stejných bodů
U situace, kdy uživatel vkládá nový bod do své mapy, jsem řešil problém, jak zajistit, aby uživatelé mohli sdílet body, které již v aplikaci existují a nevkládat tak
15
Okno, které se zobrazí v popředí a vyžaduje interakci, aby se uživatel mohl vrátit zpět do aplikace
41
duplicity. Došel jsem tak k nápadu oddělit skutečná místa od jejich reprezentace v uživatelově mapě a přejít tak na jakýsi vyšší stupeň abstrakce. Pokud tedy v uživatel klikne do své mapy s úmyslem vložit bod, aplikace nejdříve nabídne zadání typu místa (např. kavárna, sport apod.). Jakmile uživatel zadá typ, aplikace v pozadí kontaktuje server a nabídne uživateli již existující místa tohoto typu, která jsou nejblíže souřadnicím místa kliku. Celou
logiku nalezení těchto míst
v podstatě obstarává vrstva model. Uživatel samozřejmě nemusí nabídku akceptovat a může ve své mapě vytvořit duplicitní bod. Logika aplikace ale pravděpodobně jeho bod z nabídky již existujících bodů vyřadí, vždy záleží na počtu uživatelů, které se bodu podaří získat. Sytém ale duplicity plně vyloučit nedokáže. Není to totiž prakticky možné.
42
Kapitola 5 8. Testování Během implementace byla každá funkce systému průběžně testována několika reálnými uživateli, tak byla ověřována funkčnost zároveň regresivně, tedy zda přidávání nových funkcí neovlivnilo negativně funkčnost původních. Zároveň tak byla prověřována funkčnost na více systémech a v různých prohlížečích. Pro tyto účely byla aplikace nasazena na webový server na adrese www.inmap.cz.
8.1.
Kognitivní průchod
Jedná se o prvotní jednoduchou ale neméně důležitou metodu testování aplikace, kterou provádí sám vývojář na základě stanoveného scénáře. Scénář byl sestaven tak, aby zahrnul registraci nového uživatele, vyhledání několika přátel, přidání několika statusů a bodů do mapy. Test odhalil závadu související se špatnými odkazy, ale žádné nefunkční prvky v aplikaci, a všechny kroky scénáře byly splněny.
8.2.
Akceptační testy
Tyto testy ověřují splnění zadání, které je specifikováno v části návrhu, konkrétně v katalogu požadavků. Byla otestována přítomnost všech specifikovaných funkcí.
8.3.
Usability testování
Pro ověření použitelnosti aplikace byl proveden usability test. Zůčastnílo se ho celkem pět uživatelů, proto lze jeho povahu popsat spíše jako kvalitativní než kvantitativní. Věk oslovených testerů se pohyboval mezi 18 a 27 lety, jejich zkušenost s počítačem se pohybovala od uživatelské až po velmi pokročilou. Byl určen scénář, jako seznam akcí, které se mají pokusit provést. 1. Podívat se na profil nejvíce komentovaného místa a najít jeho nejstarší komentáře. 2. Prohlédnout si fotky tohoto místa. 3. Zaregistrovat se. 4. Vytvořit nový status. 5. Nastavit si profilový obrázek. 43
6. Najít nějakého uživatele se jménem Jan a požádat ho o přátelství. 7. Přidat do své mapy libovolný bod. Po dokončení těchto úkolů byl testerům předložen jednoduchý dotazník. 1. Podařilo se vám splnit všechny úkoly? 2. Měli jste problém, nebo jste váhali nad některým z úkolů? 3. Kolik času vám tyto úkoly zabraly? 4. Připadá vám aplikace přehledná? 5. Chybělo vám v aplikaci něco?
8.3.1.
Výsledky testování
Zadané úkoly se bez výjimky podařilo splnit všem uživatelům. Někteří ale zaváhali nad posledním sedmým bodem. Kdy nevěděli jak vložit bod do mapy a hledali nějaké menu pro vkládání. Nakonec se ale dopracovali k tomu, že stačí kliknout do mapy. Nicméně jsem se rozhodl přidat uvítací systémový status, zobrazený po registraci, obsahující informace jak pracovat s mapou. Druhým zádrhelem, který se vyskytl, bylo nastavení ikony uživatele, které souvisí s profilovým obrázkem. Kdy si této možnosti téměř polovina uživatelů nevšimla. Aplikace s tímto již ale počítala a vytvořila ikonu automaticky, tu je možno kdykoliv upravit. Z dotazníků také vyplynulo, že uživatelé považovali ovládání za poměrně intuitivní a přehledné. Jeden z uživatelů by ocenil filtrování vložených bodů i na stránce profilu.
44
Kapitola 6 9. Závěr Cílem bakalářské práce bylo navrhnout a implementovat aplikaci pro komunitní server s využitím interaktivních map. Výsledná aplikace umožňuje uživatelům snadno sdílet svá oblíbená místa, diskutovat o nich, sdílet fotografie. Či jen dávat najevo, kde se právě vyskytují či kam míří. Počáteční rešerše existujících řešení měla napomoci proniknutí do problematiky komunit. Odhalit současné trendy a požadavky na uživatelsky přívětivou komunitní aplikaci. Tento průzkum značně napomohl výběru použitých technologií a jejich následnému vhodnému využití. Podařilo se také zodpovědět, v čem tkví úspěch komunitních portálů a proč některé upadají, zatímco jiné narůstají na popularitě. Návrhem aplikace bylo na diagramech případů užití ukázáno, jakou funkčnost má aplikace obsahovat a přinést ucelený pohled na aplikaci již od počátku vývoje. To umožnilo hladší průběh implementace a nebylo nutné měnit již napsané součásti. Testování aplikace probíhalo již od prvních chvil implementování jednotlivých komponent systému. Objevilo řadu drobných závad v uživatelském rozhranní, které byly úspěšně opraveny. Práci jako celek hodnotím kladně pro její přínos nových zkušeností při tvorbě webových aplikací a znalostí nových technologií a trendů.
9.1.
Doporučení pro budoucí vývoj
Současná aplikace by se dala nazvat spíše beta verzí, jelikož při nasazení do ostrého provozu by pravděpodobně nedokázala uživatele v této velmi konkurenční sféře webu oslovit. Upoutat uživatele může krom samotného konceptu zejména interaktivně zpracovaný design a množství poutavých komunitních funkcí. Při tvorbě aplikace vyplynulo mnoho nápadů, jak by se dala aplikace rozšířit. Jedním z nich je například geolokace uživatele. Pokus o její základní implementaci selhal kvůli nedostatečným databázovým podkladům pro Českou republiku. To je problém spočívající ve financování projektu. S geolokací také úzce souvisí další rozšíření, což je mobilní verze aplikace. Ta by celý koncept sdílení oblíbených míst 45
značně zatraktivnila. Moderní mobilní zařízení často disponují GPS přijímačem, problém spočívá spíše v neexistující standardizaci rozhranní a systémů. Uplatnění na velkých dotykových displejích je nasnadě. Současnou webovou aplikaci by osvěžil profesionálně zpracovaný grafický návrh. Z funkčního hlediska pak možnosti pro sdílení multimediálního obsahu a také funkce podstatné zejména pro finanční zhodnocení projektu. Mezi ty by se dal zařadit systém pro selektivní zobrazování cílené reklamy a partnerství s komerčními subjekty, jejichž lokace by byla umístěna v mapě a profil by měl speciální obsah.
46
Kapitola 7 10. Seznam použitých zkratek AJAX Asynchronous JavaScript and XML API Application Programming Interface BTS Base transmmiter Station CSS Cascading Style Sheets DTD Document Type Definition FBJS Facebook JavaScript FBML Facebook Markup Language FQL Facebook Query Language GPS Global Positioning System HTML HyperText Markup Language IPv4 Internet Protocol version 4 LAMP balík Linux, Apache, MySQL, PHP MVC Model View Controller PHP Hypertext Preprocessor POI Point of Interest XHTML Extensible HyperText Markup Language XML Extensible Markup Language XSS Cross-site scripting
47
11. Použitá literatura [1] Wikipedia : community [online]. 2007 [cit. 2009-12-20]. Dostupný z WWW:
. [2] Wikipedia : Komunitni server [online]. 2007 [cit. 2009-12-20]. Dostupný z WWW: . [3] ANTOŠ, David. Radosti a strasti komunitních serverů [online]. 2007. c19982009 [cit. 2009-12-22]. Dostupný z WWW: . [4] IP Geolocation [online]. 2007 [cit. 2009-12-24]. Dostupný z WWW: . [5] Google Code [online]. c2009 [cit. 2009-12-24]. Dostupný z WWW: . [6] Libimseti.cz
[online].
c2009
[cit.
2009-12-24].
Dostupný
z
WWW:
. [7] Wikipedia: Lide.cz [online]. 2005 [cit. 2009-12-26]. Dostupný z WWW: . [8] ZBIEJCZUK, Adam. WEB 2.0 : charakteristiky a služby. [s.l.], 2007. 120 s. FSS MUNI. Diplomová práce. Dostupný z WWW: . [9] Facebook Marketing Statistics, Demographics, Reports, and News [online]. c2005-2009 [cit. 2009-12-26]. Dostupný z WWW: . [10]
Facebook Developers Wiki [online]. c2009 [cit. 2009-12-25]. Dostupný z
WWW: [11]
Wikipedia: MVC [online]. c2003-2009 [cit. 2009-12-25]. Dostupný z
WWW: [12]
.
.
The w3c markup validation service [online]. c2009 [cit. 2009-12-26].
Dostupný z WWW: [13]
jQuery JavaScript Library [online]. c2009 [cit. 2009-12-26]. Dostupný z
WWW: [14]
.
.
Teng: Template Engine for PHP, C++ and Python [online]. c2009 [cit.
2009-12-26]. Dostupný z WWW: . 48
Příloha A 12. UML diagramy
Obrázek 6 - Doménový model
49
Obrázek 7 - Use Case diagram Profilu
50
Obrázek 8 - Use Case diagram POI
51
Obrázek 9 - Use Case diagram Fotky
52
Obrázek 10 - Databázový model
53
54
Příloha B 13. Uživatelská příručka Tato příručka popisuje všechny důležité funkce systému.
13.1.
Registrace
Registrační formulář se nachází přímo na homepage. Registrace probíhá následovně:
Vyplňte všechny položky formuláře.
Po kliknutí na tlačítko registrovat vyplňte kontrolní kód a dokončete registraci.
Systém vás automaticky přihlásí.
Po úspěšné registraci vám bude zaslán ověřovací email na uvedenou adresu, zde je třeba potvrdit registraci kliknutím na odkaz, aby profil nebyl deaktivován.
13.2.
Přidání bodu do mapy
Na stránce vlastního profilu klikněte do mapy na vybrané místo.
Následujte průvodce vytvářením bodu.
13.3.
Editace informací o bodu
Pokud jste bod založili, máte možnost editovat informace v jeho profilu.
Po vložení bodu je možno na bod v mapě kliknout, tím se zobrazí modální okno se základními informacemi.
Zde klikněte na odkaz Jít na profil místa.
Na profilu bodu klikněte v levém sloupci na Spravovat profil.
Kliknutím na odkaz upravit máte možnost editovat jednotlivé části.
Uložení vyvolá tlačítko Uložit.
13.4.
Odebrání bodu z mapy
Na profilu bodu klikněte v levém sloupci na odkaz Odebrat z mé mapy
Pokud jste byli jediným uživatelem s tímto bodem v mapě, bod bude kompletně vymazán z databáze.
55
13.5.
Nabídka přátelství
Pokud jste daného uživatele ještě nepožádali o přátelství, můžete tak učinit na jeho profilové stránce, kliknutím na odkaz Přidat mezi přátele v levém sloupci.
Uživateli můžete poslat i veřejnou zprávu na jeho profil.
Pokud uživatel potvrdí nabídku přátelství v levém sloupci sekce Domů, stáváte se přáteli.
13.6.
Zrušení přátelství
Přátelství je možno jednostranně ukončit kliknutím na odkaz Odebrat z přátel v levém sloupci na profilu přítele nebo v seznamu přátel kliknutím na křížek napravo od uživatelova jména.
13.7.
Nastavení účtu
Kliknutím na odkaz Nastavení v horním menu přejdete do sekce nastavení.
Kliknutím na odkaz upravit máte možnost editovat jednotlivé části.
Uložení vyvolá tlačítko Uložit.
13.8.
Editace informací v profilu
Na vlastním profilu klikněte na odkaz Jít na profil místa.
Na profilu bodu klikněte v levém sloupci na Spravovat profil.
Kliknutím na odkaz upravit máte možnost editovat jednotlivé části.
Uložení vyvolá tlačítko Uložit.
13.9.
Změna přihlašovacího emailu
V sekci nastavení pod částí Kontaktní email je možno změnit email používaný pro přihlášení.
Po potvrzení nového emailu heslem je odeslán ověřovací mail na uvedenou adresu, zde je třeba potvrdit změnu kliknutím na odkaz.
Po odhlášení je pro opětovné přihlášení třeba použít tuto novou adresu.
56
13.10. Změna hesla
V sekci nastavení pod částí Heslo je možno změnit heslo používané pro přihlášení.
Vyplňte všechny položky.
Uložení vyvolá tlačítko změnit heslo.
13.11. Nastavení a správa obrázku profilu
V sekci nastavení pod odkazem Obrázek profilu v levém sloupci je možno změnit obrázek profilu.
Vyberte obrázkový soubor typu .jpg, .png nebo .gif.
Tažením vyberte ořez pro vaši ikonu a uložte tlačítkem uložit.
Obrázek lze též vymazat kliknutím na tlačítko vymazat.
Všechny profilové obrázky je možno spravovat a prohlížet kliknutím na odkaz Zobrazit fotky v levém sloupci stránky profilu.
13.12. Status a zpráva
Status či zprávu je možno vložit v horní části profilové stránky.
Odeslání vyvolá tlačítko Odeslat.
Mazat může vždy buď majitel profilu, nebo autor klepnutím na tlačítko vymazat.
13.13. Komentování statusu či zprávy
Komentář může vložit uživatel sám nebo kdokoliv z jeho přátel.
Kliknutím na tlačítko reagovat se zobrazí pole pro vložení komentáře.
Pole přizpůsobuje svoji velikost rozsahu textu.
Odeslání vyvolá tlačítko komentovat.
13.14. Nastavení přítomnosti
V modálním okně, které se objeví po kliknutí na bod v mapě, může uživatel nastavit, kde se právě nachází nebo kam směřuje.
Klinutím na tlačítko Právě jsem tady uloží jeho polohu.
57
58
Příloha C 14. Instalační příručka Pro vyzkoušení je aplikace s reálnými daty testovacích uživatelů umístěna na webovém serveru na adrese inmap.cz.
14.1.
Instalace
1. Zkopírujte obsah složky source do kořenového adresáře na vašem serveru. 2. V souboru /app/jetwork.conf nastavte údaje pro přístup k databázi. 3. Do databáze importuje soubor inmap.sql. 4. V souboru /app/templ/teng.conf nastavte url adresy serveru. 5. V souboru gr/js/func.js změňte url adresy používané JavaScriptem. 6. Zkontrolujte, že složky /data/icon, /data/orig a /data/thumb mají nastavena práva pro zápis.
14.2.
Požadavky na server
PHP verze 5+
Webový server Apache
Nainstalovaná databáze MySQL 5
Nainstalovaný modul php_gd2
Na serveru povolený rewrite_module
15. Obsah CD Kořenový adresář CD obsahuje:
Adresář source se zdrojovými kódy aplikace
Soubor inmap.sql se strukturou SQL databáze
BP-behoujan.pdf – tento soubor
59
