Západočeská univerzita v Plzni Fakulta aplikovaných věd Katedra informatiky a výpočetní techniky. Systém pro správu a realizaci informačních

Za´padoˇceska´ univerzita v Plzni Fakulta aplikovanyćh vˇed Katedra informatiky a vy´poˇcetn´ı techniky

Diplomov´ a pr´ ace Syst´ em pro spr´ avu a realizaci informaˇ cn´ıch maj´ aku

Plzeˇ n 2013

Bc. Ludˇek Vlk

Prohl´ aˇ sen´ı Prohlaˇsuji, ˇze jsem diplomovou práci vypracoval samostatnˇe a v´ yhradnˇe s pouˇzit´ım citovan´ ych pramen˚ u. V Plzni dne 14. kvˇetna 2013 Ludˇek Vlk

Dˇekuji vedouc´ımu práce Ing. Ladislavu Peˇsiˇckovi za odborné veden´ı a cenné rady pˇri vypracován´ı diplomové práce.

Abstract This diploma thesis deals with the problems of providing informations using information beacons. Market of available information systems is explored during this work. Universal system for providing informations to mobile devices was designed and implemented based on discovered problems. In this work was also created a mobile application for iOS and sent for approval to the App Store. Employees of institutions (zoo, museum, exhibitions, ...) can register their own institution through web interface for free and provide information about their institutions through information beacons. Information beacons is unique identifiable place, that contains informations. Users can find information beacons with mobile app using location, QR codes and 3-digit key.

Obsah ´ 1 Uvod 1.1 Informaˇcn´ı majáky . . . . . . . . . . . . . . . . . . . . . . . . 1.2 C´ıl práce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1 1 1

2 Syst´ emy pro poskytov´ an´ı informac´ı 2.1 V´ yznam informaˇcn´ıch maják˚ u . . . . . 2.1.1 Pouˇzit´ı v muze´ıch . . . . . . . . 2.1.2 Pouˇzit´ı v zoologické zahradˇe . . 2.1.3 Pouˇzit´ı v hromadné dopravˇe . . 2.1.4 Pouˇzit´ı ve vzdˇelávac´ıch zaˇr´ızen´ı 2.2 Hustonská Zoo . . . . . . . . . . . . . 2.3 Lunchtime . . . . . . . . . . . . . . . . 2.4 iZeeum . . . . . . . . . . . . . . . . . . 2.5 iTag . . . . . . . . . . . . . . . . . . .

. . . . . . . . .

2 2 2 2 3 3 3 4 5 7

. . . . . . . . . .

9 9 10 10 12 13 14 14 15 15 16

3 N´ avrh syst´ emu 3.1 Modelov´ y pˇr´ıklad . . . . . . . . . ´ cel systému . . . . . . . . . . . 3.2 Uˇ 3.3 Funkce a vlastnosti systému . . . 3.3.1 Systém . . . . . . . . . . . 3.3.2 Klientská aplikace . . . . . 3.4 Uˇzivatelé systému . . . . . . . . . 3.4.1 Zamˇestnanec instituce . . 3.4.2 Uˇzivatel klientské aplikace 3.4.3 Správce Tagiee . . . . . . 3.5 Návrh moˇzn´ ych alternativ . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . .

. . . . . . . . . .

. . . . . . . . .

. . . . . . . . . .

. . . . . . . . .

. . . . . . . . . .

. . . . . . . . .

. . . . . . . . . .

. . . . . . . . .

. . . . . . . . . .

. . . . . . . . .

. . . . . . . . . .

. . . . . . . . .

. . . . . . . . . .

. . . . . . . . .

. . . . . . . . . .

. . . . . . . . .

. . . . . . . . . .

. . . . . . . . .

. . . . . . . . . .

. . . . . . . . .

. . . . . . . . . .

. . . . . . . . .

. . . . . . . . . .

4 Realizace syst´ emu 17 4.1 Um´ıstˇen´ı systému . . . . . . . . . . . . . . . . . . . . . . . . . 17 4.2 Pouˇzité technologie a knihovny . . . . . . . . . . . . . . . . . 17 4.2.1 PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

OBSAH

4.3 4.4

4.5

OBSAH 4.2.2 MySQL . . . . . . . . . . . . . . . . . 4.2.3 Framework Nette . . . . . . . . . . . . 4.2.4 Google Maps JavaScript API v3 . . . . 4.2.5 Google Charts . . . . . . . . . . . . . . 4.2.6 JQuery . . . . . . . . . . . . . . . . . . 4.2.7 JQuery UI . . . . . . . . . . . . . . . . 4.2.8 Uploadify . . . . . . . . . . . . . . . . 4.2.9 Jcrop . . . . . . . . . . . . . . . . . . . Databázová vrstva . . . . . . . . . . . . . . . 4.3.1 Triggery . . . . . . . . . . . . . . . . . Tagiee API . . . . . . . . . . . . . . . . . . . 4.4.1 JSON format . . . . . . . . . . . . . . 4.4.2 API pro komunikaci . . . . . . . . . . Implementace webového rozhran´ı . . . . . . . 4.5.1 Struktura . . . . . . . . . . . . . . . . 4.5.2 Databázová vrstva . . . . . . . . . . . 4.5.3 Správa uˇzivatel˚ u a instituc´ı . . . . . . 4.5.4 Vytváˇren´ı a editován´ı obsahu instituc´ı

5 Klientsk´ aˇ c´ ast 5.1 Platforma iOS . . . . . . . . . . . . . . . 5.2 Pod´ıl verz´ı iOS na trhu . . . . . . . . . . 5.3 Pouˇzité knihovny . . . . . . . . . . . . . 5.3.1 AFNetworking . . . . . . . . . . 5.3.2 ZBarSDK . . . . . . . . . . . . . 5.3.3 OpenUDID . . . . . . . . . . . . 5.3.4 MWPhotoBrowser . . . . . . . . 5.3.5 DYRateView . . . . . . . . . . . 5.3.6 EGOTableViewPullRefresh . . . 5.3.7 ECGraph . . . . . . . . . . . . . 5.4 Implementace klientské aplikace . . . . . 5.4.1 Komunikace se systémem Tagiee . 5.4.2 Databázová vrstva . . . . . . . . 5.4.3 Uˇzivatelské rozhran´ı . . . . . . . 5.4.4 Verze pro iPad . . . . . . . . . . 5.4.5 Notifikace systému Tagiee . . . . 5.5 Publikován´ı aplikace . . . . . . . . . . . 5.5.1 App Store . . . . . . . . . . . . . 5.5.2 iOS Developer Program . . . . . 5.5.3 iTunes Connect . . . . . . . . . . 5.5.4 Pˇr´ıprava certifikát˚ u . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

17 18 22 22 23 24 24 24 25 27 29 30 30 33 34 35 37 38

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

42 42 42 43 43 44 44 45 45 45 46 47 47 48 52 61 62 63 63 63 63 64

OBSAH

OBSAH

5.5.5 5.5.6 5.5.7 5.5.8

Vytvoˇren´ı aplikace v iTunes Connect Nahrán´ı aplikace . . . . . . . . . . . Schvalovac´ı proces . . . . . . . . . . Schválen´ı aplikace Tagiee . . . . . . .

6 Ovˇ eˇ ren´ı funkcionality 6.1 Systém Tagiee . . . . . . 6.1.1 Mapa maják˚ u . . 6.2 Webové prostˇred´ı . . . . 6.2.1 Statistiky . . . . 6.3 Klientská aplikace Tagiee

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

64 65 65 66

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

67 67 68 68 69 69

7 Z´ avˇ er A Pˇ r´ılohy A.1 Web API . . . . . . . . . . . . . . . . . . . . . . . . . . A.1.1 add_review . . . . . . . . . . . . . . . . . . . . A.1.2 beacon_found . . . . . . . . . . . . . . . . . . . A.1.3 device_visit_institution . . . . . . . . . . . A.1.4 get_institution_by_uiid . . . . . . . . . . . . A.1.5 get_institution_list . . . . . . . . . . . . . . A.1.6 get_institution_revision . . . . . . . . . . . A.1.7 get_reviews . . . . . . . . . . . . . . . . . . . A.2 App Store Review Guidelines . . . . . . . . . . . . . . A.2.1 Functionality . . . . . . . . . . . . . . . . . . . A.2.2 Metadata (name, descriptions, ratings, rankings, A.2.3 Location . . . . . . . . . . . . . . . . . . . . . . A.2.4 User interface . . . . . . . . . . . . . . . . . . . A.2.5 Damage to device . . . . . . . . . . . . . . . . . A.2.6 Personal attacks . . . . . . . . . . . . . . . . . . A.2.7 Privacy . . . . . . . . . . . . . . . . . . . . . . A.2.8 Legal requirements . . . . . . . . . . . . . . . . A.3 Instalaˇcn´ı pˇr´ıruˇcka systému Tagiee . . . . . . . . . . . A.3.1 Základn´ı poˇzadavky . . . . . . . . . . . . . . . A.3.2 Adresáˇrová struktura . . . . . . . . . . . . . . . A.4 Uˇzivatelská pˇr´ıruˇcka webového rozhran´ı . . . . . . . . . A.5 Uˇzivatelská pˇr´ıruˇcka mobiln´ı aplikace . . . . . . . . . .

73

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . etc) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . .

i i i i i ii iv iv iv vi vi vii viii viii viii ix ix ix x x x xi xii

´ 1 Uvod 1.1

Informaˇ cn´ı maj´ aky

V dneˇsn´ı modern´ı dobˇe jsou informace dostupné témˇeˇr na kaˇzdém rohu, napˇr´ıklad na zastávkách, na elektronick´ ych panelech nebo i v mobiln´ıch telefonech. Nejvˇetˇs´ı slabinou je poskytnut´ı tˇechto informac´ı lidem, kteˇr´ı je vyˇzaduj´ı. I v dneˇsn´ı dobˇe, ne kaˇzd´ y si um´ı vyhledat informace, které zrovna potˇrebuje. Pˇredstavme si, co kdyby bylo nepsané pravidlo, ˇze u kaˇzdého obchodn´ıho centra by byla um´ıstˇena viditelná nebo neviditelná znaˇcka detekovatelná mobiln´ım zaˇr´ızen´ım (napˇr. telefonem) a poskytla informace o vˇsech slevách nacházej´ıc´ıch se v tomto centru. Mohli bychom vˇsak i toto pravidlo rozˇs´ıˇrit na zastávky hromadné dopravy, kde na základˇe detekován´ı zastávky mobiln´ım zaˇr´ızen´ım by se zobrazil seˇrazen´ y v´ ypis nejbliˇzˇs´ıch spoj˚ u od aktuáln´ıho ˇcasu. Pokud by se lidé nauˇcili pˇrij´ımat takto informace, dostali by jen ty, které je zaj´ımaj´ı a pomohou jim v kaˇzdodenn´ım ˇzivotˇe. Definujeme-li informaˇcn´ı maják, jedná se o jednoznaˇcnˇe identifikovatelnou znaˇcku, jeˇz poskytne znalostn´ı informace o m´ıstˇe, na nˇemˇz se nacház´ı. Tyto znalostn´ı informace se ukáˇz´ı aˇz v pˇr´ıpadˇe detekován´ı znaˇcky mobiln´ım zaˇr´ızen´ım. Znaˇcka m˚ uˇze b´ yt viditelná (název, kl´ıˇc, obrázek) nebo neviditelná (poloha, signál).

1.2

C´ıl pr´ ace

C´ılem diplomové práce je prozkoumat problematiku specializovan´ ych systém˚ u pro poskytován´ı informac´ı návˇstˇevn´ık˚ um. Na základˇe zjiˇstˇen´ ych problému navrhnout a realizovat univerzáln´ı systém pro poskytován´ı informac´ı mobiln´ım zaˇr´ızen´ım. Souˇca´st´ı ˇreˇsen´ı bude tedy i klientská mobiln´ı aplikace pro platformu iOS (viz 5.1), která bude komunikovat s navrˇzen´ ym systémem, bude schopná detekovat informaˇcn´ı majáky a zobrazovat znalostn´ı informace maják˚ u. Klientská mobiln´ı aplikace bude pˇredloˇzena ke schválen´ı digitáln´ımu obchodu App Store (viz 5.5.1).

1

2 Systémy pro poskytován´ı informac´ı Dnes mnoho instituc´ı vyuˇz´ıvá systémy pro poskytován´ı informac´ı. Obecnˇe se jedná se o levn´ y zdroj informac´ı pro návˇstˇevn´ıky. V této kapitole bude nejdˇr´ıve popsáno vyuˇzit´ı tˇechto systém˚ u v r˚ uzn´ ych odvˇetv´ıch a následnˇe budou ukázány reálné systémy.

2.1

V´ yznam informaˇ cn´ıch maj´ ak˚ u

Systémy pro poskytován´ı informac´ı m˚ uˇzeme vyuˇz´ıt v r˚ uzn´ ych odvˇetv´ı. M˚ uˇzeme se s nimi setkat na ulici, v obchodech, v muze´ıch, v zoologické zahradˇe, ve vzdˇelávac´ıch instituc´ıch nebo i v hromadné dopravˇe. V této sekci jsou uvedeny pˇr´ıklady, kde se daj´ı systémy pro poskytován´ı informac´ı vyuˇz´ıt. Systém poskytne informace na základˇe nalezen´ ych maják˚ u mobiln´ım zaˇr´ızen´ım, respektive pomoc´ı aplikace v mobiln´ım zaˇr´ızen´ı.

2.1.1

Pouˇ zit´ı v muze´ıch

V muzeu se nacház´ı r˚ uzné exponáty, které jsou um´ıstˇeny v oddˇelen´ ych sekc´ıch. Muzeum má v digitáln´ım obchodˇe volnˇe dostupnou aplikaci. Pˇri pˇr´ıchodu do muzea se návˇstˇevn´ıkovi nab´ıdne mapa vˇsech sekc´ı s jejich krátk´ ym popisem. Kaˇzd´ y exponát má ˇca´rov´ y kód, kter´ y pomoc´ı aplikace návˇstˇevn´ık sejme a obdrˇz´ı informace v r˚ uzn´ ych jazyc´ıch. R˚ uzné jazyky cizinc˚ um dovol´ı pˇrekonat jazykovou bariéru a mohou si tak lépe uˇz´ıt prohl´ıdku muzea. Zamˇestnanc˚ um m˚ uˇze tento systém uˇsetˇrit práci t´ım, ˇze nemusej´ı dˇelat prohl´ıdky v r˚ uzn´ ych jazyc´ıch. Staˇc´ı se jen omezit na ty nejrozˇs´ıˇrenˇejˇs´ı jazyky a pro ostatn´ı poskytnout lokalizovan´ y popis exponátu skrze mobiln´ı aplikaci.

2.1.2

Pouˇ zit´ı v zoologick´ e zahradˇ e

Zoologická zahrada má nˇekolik v´ ybˇeh˚ u s r˚ uzn´ ymi exempláˇri. Pˇri vstupu do zoologické zahrady návˇstˇevn´ık skrze mobiln´ı aplikaci z´ıská mapu vˇsech druh˚ u zv´ıˇrat a rostlin. Návˇstˇevn´ık navˇst´ıv´ı v´ ybˇeh, jenˇz aplikace rozezná a poskytne 2

Systémy pro poskytován´ı informac´ı

Hustonská Zoo

uˇzivateli obrázky a videa o zv´ıˇreti. Aplikace zároveˇ n zobraz´ı uˇzivateli seznam ˇcasovˇe nejbliˇzˇs´ıch komentovan´ ych krmen´ı a prezentac´ı zv´ıˇrat. T´ım, ˇze návˇstˇevn´ık navˇst´ıv´ı v´ ybˇeh, zamˇestnanci sb´ıraj´ı informace napˇr´ıklad, kter´ y v´ ybˇeh je atraktivn´ı pro návˇstˇevn´ıky, a kter´ y naopak je ménˇe zaj´ımav´ y. Zároveˇ n m˚ uˇzou návˇstˇevn´ıci pˇridávat komentáˇre skrze mobiln´ı aplikaci, ˇc´ımˇz zamˇestnanci zoo z´ıskaj´ı zpˇetnou vazbu.

2.1.3

Pouˇ zit´ı v hromadn´ e dopravˇ e

V u ´vodu byl zm´ınˇen´ y pˇr´ıklad zastávek hromadné dopravy. Rozˇs´ıˇrit ho lze kromˇe zobrazen´ı ˇcasovˇe nejbliˇzˇs´ıch spoj˚ u i o vzdálenost potenciáln´ıho cestuj´ıc´ıho od zastávky a nav´ıc za jak dlouho by mohl u n´ı normáln´ı ch˚ uz´ı b´ yt.

2.1.4

Pouˇ zit´ı ve vzdˇ el´ avac´ıch zaˇ r´ızen´ı

Univerzita se rozprost´ırá po celém mˇestˇe, vˇetˇsina fakult má svoji budovu. Informaˇcn´ı maják by mohl b´ yt um´ıstˇen u kaˇzdé budovy univerzity a novˇe pˇr´ıchoz´ım student˚ um by mohl pomoci v orientaci a pˇr´ıpadnˇe studentovi nalézt jeho v´ yuku, z´ıskat j´ıdeln´ı l´ıstek menz ˇci historické u ´daje o univerzitˇe.

2.2

Hustonsk´ a Zoo

Hustonská Zoo disponuje 6000 zv´ıˇrat a kaˇzd´ y rok ji navˇst´ıv´ı 1,84 milión˚ u návˇstˇevn´ık˚ u. [hus()] Hustonská Zoo nab´ız´ı volnˇe staˇzitelnou mobiln´ı aplikaci pro systém iOS (viz Obr. 2.1) a Android skrze digitáln´ı obchod App Store a Google Play. Aplikace pro obˇe platformy, jsou co se t´ yˇce funkcionality, totoˇzné. Aplikace nab´ız´ı uˇzivateli informace o zoo, jej´ı cen´ık, návˇstˇevn´ı doby a jej´ı polohu. Aplikace umoˇzn ˇuje ucelenou prohl´ıdku celé zoo (viz Obr. 2.1b), aniˇz by musel návˇstˇevn´ık bloudit po zoo a rozhodovat se, jak´ y v´ ybˇeh navˇst´ıv´ı jako dalˇs´ı. Pˇri prohl´ıdce nab´ız´ı aplikace mapu se vˇsemi moˇzn´ ymi v´ ybˇehy (viz Obr. 2.1c).

3


´ (a) Uvodn´ ı obrazovka aplikace s rozcestn´ıkem.

Lunchtime

(b) Seznam v´ ybˇeh˚ u, kter´ ych se prohl´ıdka t´ yká.

(c) Mapa jednotliv´ ych v´ ybˇehu, které jsou souˇcást´ı prohl´ıdky.

Obrázek 2.1: Mobiln´ı aplikace Hustonské Zoo Aplikace k v´ ybˇeh˚ um nab´ız´ı fotografie o exempláˇr´ıch a krátk´ y popisek. Jako bonus nab´ız´ı aplikace vyfocen´ı v´ ybˇehu s rámeˇckem.

2.3

Lunchtime

Lunchtime je portál inzeruj´ıc´ı nejbliˇzˇs´ı restaurace hladov´ ym zákazn´ık˚ um, t´ım ˇze jim ukáˇze poledn´ı menu, které restaurace nab´ız´ı.

Princip Majitelé restaurac´ı si pˇredplat´ı mˇes´ıˇcn´ı inzerci v katalogu Lunchtime. Kaˇzd´ y den majitel poskytne portálu denn´ı nab´ıdku j´ıdel své restaurace. Lunchtime tuto nab´ıdku rozˇs´ıˇr´ı skrze sv˚ uj portál, email, pdf, RSS, exportuje na web majitele, zobraz´ı na Facebooku, rozeˇsle dalˇs´ım portál˚ um a jeˇstˇe poskytne informace mobiln´ım aplikac´ım Lunchtime. [lun()]

4


iZeeum

Pro majitele restaurac´ı se jedná o dobré zviditelnˇen´ı na internetu,umoˇzn´ı strávn´ık˚ um zanechat zpˇetnou vazbu o jejich podniku a automatizuje u ´kony s denn´ım menu. Lunchtime ˇci hosté se pˇripomenou kaˇzd´ y vˇsedn´ı den, aby restaurace vyvˇesila své poledn´ı menu. T´ım, ˇze restaurace dennˇe uvolˇ nuje nab´ıdku j´ıdel, se zvyˇsuje potencionáln´ı návˇstˇevnost podniku. Host˚ um tento systém umoˇzn ˇuje skrze portál, nebo mobiln´ı aplikaci nab´ıdnout seznam nejbliˇzˇs´ıch podnik˚ u s denn´ı nab´ıdkou j´ıdel, na základˇe které se mohou rozhodnout, jakou restauraci navˇst´ıv´ı. Hosté mohou skrze aplikaci provádˇet rezervace, aniˇz by museli hledat kontaktn´ı informace na stránkách podniku.

Mobiln´ı aplikace Lunchtime Aplikace je volnˇe dostupná pro Android, Bada a iOS. Mobiln´ı aplikace umoˇzn ˇuje na základˇe polohy uˇzivatele zobrazit nejbliˇzˇs´ı podniky a jejich denn´ı nab´ıdku. Pokud chce uˇzivatel provést rezervaci, lze pˇristoupit na kartu podniku v aplikaci a z´ıskat potˇrebné informace pro proveden´ı rezervace ˇci zanechán´ı pˇripom´ınky. Na obrázc´ıch (viz Obr. 2.2) je ukázka z mobiln´ı aplikace pro systém iOS.

2.4

iZeeum

Pr˚ uvodce iZeeum je informaˇcn´ı systém poskytuj´ıc´ı informace o umˇen´ı v muze´ıch, galeri´ıch a exhibic´ıch skrze mobiln´ı aplikaci pro iOS.

Princip Zamˇestnanci instituc´ı pˇridaj´ı do systému iZeeum informace a fotografie o exponátech a informace o své instituci (popis, poloha, cen´ık, otev´ırac´ı doby). Systém iZeeum si fotografie exponát˚ u zpracuje a uloˇz´ı. Uˇzivatel aplikace vyfot´ı exponát a fotografie se porovná se systémem iZeeum a podle shody nab´ıdne audiovizuáln´ı informace o exponátu. [ize()] Instituce pˇridán´ım se do systému iZeeum z´ıská levn´ y a nenároˇcn´ y systém pro poskytován´ı informac´ı. Nav´ıc se nenaruˇsuje vizáˇz exponát˚ u, které by se 5


´ (a) Uvodn´ ı obrazovka aplikace se seznamem nejbliˇzˇs´ıch podnik˚ u.

iZeeum

(b) Skrze mobiln´ı aplikaci lze i pˇridávat nové restaurace.

(c) Karta podniku.

(d) Mapa nejbliˇzˇs´ıch restaurac´ı.

Obrázek 2.2: Mobiln´ı aplikace Lunchtime pro iOS musely jinak identifikovat pomoc´ı QR kód˚ u, hesel ˇci speciáln´ıch obraz˚ u. T´ım, ˇze uvnitˇr muze´ı nebo galeri´ı nelze pouˇz´ıt lokalizaˇcn´ı sluˇzby (napˇr. GPS), se jedná o zaj´ımavou alternativu. Návˇstˇevn´ık˚ um staˇc´ı k identifikaci exponátu jen fotoaparát a pˇripojen´ı k internetu, ˇc´ımˇz se zjednoduˇsuje pouˇzitelnost této identifikace.

6


iTag

Mobiln´ı aplikace iZeeum Mobiln´ı aplikace je opˇet volnˇe dostupná v obchodˇe App Store (viz Obr. 2.3). Aplikace si zakládá na jednoduchosti a obsahuje jednu obrazovku s informacemi, jak iZeeum funguje a tlaˇc´ıtko pro poˇr´ızen´ı fotografie. Na základˇe vyhodnocené fotografie se zobraz´ı audiovizuáln´ı a textové informace o exponátu. Fotografie se odes´ılá sytému iZeeum, systém vyhodnot´ı fotografii a pˇri pˇr´ıpadné shodˇe poˇsle aplikaci informace o exponátu. Systém iZeeum um´ı vyhodnotit fotografii do 1 vteˇriny.

´ (a) Uvodn´ ı obrazovka aplikace s moˇznost´ı poˇr´ızen´ı fotografie.

(b) Video o exponátu.

(c) Textové informace o exponátu.

Obrázek 2.3: Mobiln´ı aplikace iZeeum pro iOS

2.5

iTag

Systém iTag poskytuje informace o odjezdech ze zastávek mˇestské hromadné dopravy PMDP v Plzni.

7


iTag

Princip Na kaˇzdé zastávce je um´ıstˇen NFC tag a QR kód. Pomoc´ı NFC technologie v telefonu nebo ˇcteˇcky QR kódu se pˇreˇcte URL1 adresa, na které je seznam ˇcasovˇe nejbliˇzˇs´ıch spoj˚ u z dané zastávky. PMDP má tak nov´ y pohodln´ y zp˚ usob poskytnut´ı j´ızdn´ıho ˇra´du cestuj´ıc´ım. Základn´ım poˇzadavkem je chytr´ y mobiln´ı telefon disponuj´ıc´ı mobiln´ım pˇripojen´ım k internetu a fotoaparátem.

1

Uniform Resource Locator - slouˇz´ı k pˇresné specifikaci um´ıstˇen´ı zdroj˚ u na Internetu.

8

3 Návrh systému V této kapitole je popsán návrh univerzáln´ıho komplexn´ıho systém Tagiee. Pod pojmem instituce se mysl´ı veˇrejnˇe dostupné zaˇr´ızen´ı napˇr´ıklad muzeum, zoo apod.

3.1

Modelov´ y pˇ r´ıklad

V této sekci je uvedeno pouˇzit´ı systému Tagiee, na základˇe kterého jsem se rozhodoval pˇri návrhu. ZOO Plzeˇ n se rozléhá na 21 hektarech, pracuje v n´ı 134 zamˇestnanc˚ ua celkem zde m˚ uˇzeme naj´ıt 1307 r˚ uzn´ ych zv´ıˇrat. [zoo()] V ZOO se budou nacházet des´ıtky informaˇcn´ıch maják˚ u. GPS poloha bude vyuˇzita u venkovn´ıch v´ ybˇeh˚ u a v pavilónech QR kód. V dinoparku budou naopak pouˇzity NFC tagy. Pomoc´ı tˇechto technologi´ı lze tyto majáky naj´ıt. Návˇstˇevn´ık navˇst´ıv´ı plzeˇ nskou ZOO. Pˇri vstupu bude um´ıstˇeno znaˇcen´ı, ˇze ZOO vyuˇz´ıvá systém Tagiee a je v nˇem zaregistrovaná pod unikátn´ım identifikátorem ’zoopl’. Návˇstˇevn´ık si stáhne mobiln´ı aplikaci Tagiee, pokud ji uˇz dávno nemá staˇzenou, z obchodu s aplikacemi. Poté se v aplikaci návˇstˇevn´ık pˇrihlás´ı k ZOO pomoc´ı seznamu nejbliˇzˇs´ıch instituc´ı nebo pomoc´ı unikátn´ıho identifikátoru. U vstupu se nacház´ı volnˇe dostupná WiFi s´ıt’. Uˇzivatel se m˚ uˇze pˇrihlásit k této WiFi s´ıti a stáhnout vˇsechen obrázkov´ y obsah, ke kterému se m˚ uˇze dostat nalezen´ım maják˚ u a uˇsetˇrit tak pˇrenos dat na mobiln´ım pˇripojen´ı. Návˇstˇevn´ık pˇrijde napˇr´ıklad k tuˇcn ˇák˚ um, kteˇr´ı maj´ı sv˚ uj venkovn´ı v´ ybˇeh. Návˇstˇevn´ık by se rád dozvˇedˇel dalˇs´ı informace o tuˇcn ˇác´ıch, o jejich potravˇe a stylu ˇzivota. Pomoc´ı aplikace zapne vyhledáván´ı maják˚ u a aplikace návˇstˇevn´ıkovi nab´ıdne obrázky, videa a informace o tuˇcn ˇać´ıch. Návˇstˇevn´ık pokraˇcuje v prohl´ıdce a navˇst´ıv´ı pavilón plaz˚ u. Pavilón plaz˚ u je um´ıstˇen v budovˇe, ve které nen´ı dostupn´ y signál GPS. Vedle terári´ı jsou vˇsak QR kódy. Návˇstˇevn´ık otevˇre aplikaci a pomoc´ı ˇcteˇcky QR kódu se mu 9

´ cel systému Uˇ

Návrh systému zobraz´ı jednotlivé informace o plaz´ıch.

Následuj´ıc´ı návrh systému by mˇel b´ yt pouˇziteln´ y pro tento modelov´ y pˇr´ıklad (viz 3.3).

3.2

´ cel syst´ Uˇ emu

´ celem je tedy navrhnout volnˇe ˇsiˇriteln´ Uˇ y systém pro poskytován´ı informac´ı návˇstˇevn´ık˚ um instituc´ı. Návˇstˇevn´ık z´ıská na základnˇe navˇst´ıven´ ych informaˇcn´ıch maják˚ u znalosti, ke kter´ ym by se pˇri bˇeˇzné prohl´ıdce nedostal (napˇr. z nedostatku m´ısta na informaˇcn´ıch cedul´ı). Informace by nemˇely b´ yt návˇstˇevn´ık˚ um nijak vnucovány, naopak poskytnuty zájemc˚ um pokud moˇzno co nejrychleji a nejintuitivnˇeji.

3.3

Funkce a vlastnosti syst´ emu

Systém bude uchovávat a poskytovat informace o instituci, o um´ıstˇen´ı informaˇcn´ıch maják˚ u a obsahu maják˚ u pˇri jejich nalezen´ı. Pokud se vrát´ıme k pˇredeˇslému motivaˇcn´ımu pˇr´ıkladu (viz. 3.1), tak instituce je zoo, informaˇcn´ı maják bude napˇr´ıklad zemˇepisná poloha v´ ybˇehu opic a po nalezen´ı tohoto majáku se zobraz´ı dodateˇcné informace o opic´ıch. Systém se bude skládat ze serverové ˇca´sti Tagiee a klientské aplikace Tagiee pro mobiln´ı telefony (viz Obr. 3.1). Systém s mobiln´ı aplikac´ı bude komunikovat pomoc´ı pevnˇe definovaného Web API1 . Serverová ˇca´st bude poskytovat webové prostˇred´ı, pˇres které zamˇestnanci instituc´ı mohou pˇridávat a mˇenit obsah jejich instituc´ı. Klientské aplikace budou dostupné skrze mobiln´ı obchody s aplikacemi (App Store, Google Play, Windows Phone Store). Tagiee m˚ uˇze slouˇzit i jako inovace v oblasti informaˇcn´ıch technologi´ı pro instituci. Zamˇestnanec instituce si vytvoˇr´ı u ´ˇcet v systému Tagiee skrze webové prostˇred´ı. K tomuto u ´ˇctu si pˇridá jednu nebo v´ıce instituc´ı, ke kter´ ym m˚ uˇze pˇridávat r˚ uzné informaˇcn´ı majáky. Informaˇcn´ı majáky budou um´ıstˇeny po 1

Rozhran´ı pro komunikaci s webov´ ym serverem pomoc´ı HTTP protokolu a strukturovan´ ych dat.

10

Návrh systému

Funkce a vlastnosti systému

Obrázek 3.1: Architektura systému Tagiee. celé instituci a budou detekovatelné pomoc´ı následuj´ıc´ıch technologi´ı: • Podle lokace - GPS2 , WiFi3 , Bluetooth4 . Maják bude naleziteln´ y nejen podle zemˇepisn´ ych souˇradnic (ˇs´ıˇrka, v´ yˇska) ale i podle seznamu nejbliˇzˇs´ıch WiFi a Bluetooth. Posledn´ı dvˇe technologie usnadn´ı navigaci uvnitˇr budovy. • Podle NFC5 (kaˇzd´ y maják m˚ uˇze b´ yt nalezen pomoc´ı NFC tagu). • Podle QR kódu6 (kaˇzd´ y maják m˚ uˇze b´ yt nalezen podle QR kódu). • Podle 3-m´ıstného hash kl´ıˇce (kaˇzd´ y maják m˚ uˇze b´ yt nalezen podle kl´ıˇce). V´ıce o technologi´ıch a metodách nalezen´ı maják˚ u se zab´ yvá Bc. Jiˇr´ı Hromádka ve své diplomové práci Komunikace a identifikace informaˇcn´ıch ma” ják˚ u“. Po nalezen´ı informaˇcn´ıho majáku se uˇzivateli zobraz´ı obsah v podobˇe 2

Global Positioning System - globáln´ı druˇzicov´ y polohov´ y systém s jehoˇz pomoc´ı lze urˇcit polohu s pˇresnost´ı na deset metr˚ u. 3 Oznaˇcen´ı nˇekolika standard˚ u IEEE 802.11 popisuj´ıc´ı bezdrátovou komunikaci v poˇc´ıtaˇcové s´ıti. 4 Standard pro bezdr´ atovou komunikaci mezi dvˇema ˇci v´ıce elektronick´ ymi zaˇr´ızen´ımi. 5 Near field communication - slouˇz´ı ke komunikaci mezi dvˇema zaˇr´ızen´ımi na krátkou vzd´ alenost. 6 Prostˇredek pro automatizovan´ y sbˇer dat.

11

Návrh systému


text˚ u, obrázk˚ u a videa. Zamˇestnanci budou m´ıt pˇr´ıstup ke statistikám o návˇstˇevnosti jejich instituce a zpˇetnou vazbu od uˇzivatel˚ u pomoc´ı krátk´ ych hodnocen´ı, která mohou návˇstˇevn´ıci pˇridat k instituci. Uˇzivatel si bude moci zdarma stáhnout klientskou aplikaci do svého telefonu. Pˇri zapnut´ı aplikace se uˇzivateli na základˇe jeho polohy nab´ıdne seznam nejbliˇzˇs´ıch instituc´ı, ke kter´ ym se m˚ uˇze pˇrihlásit. Pˇrihláˇsen´ı k instituci lze i zadán´ım unikátn´ıho identifikátoru, jenˇz má kaˇzdá instituce v systému Tagiee. Po pˇrihláˇsen´ı k instituci m˚ uˇze uˇzivatel zobrazit d˚ uleˇzité informace jako jsou otev´ırac´ı doby, cen´ık, kontaktn´ı u ´daje. Uˇzivatel pomoc´ı aplikace m˚ uˇze naleznout informaˇcn´ı majáky pouze u pˇrihláˇsené instituce. Nalezen´ım majáku z´ıská znalost´ı informace o m´ıstˇe, kde se maják nacház´ı. Nalezené majáky se ukládaj´ı pro pozdˇejˇs´ı prohl´ıˇzen´ı. Mobiln´ı zaˇr´ızen´ı jako poskytovatelé tˇechto informac´ı byla vybrána z d˚ uvodu jejich rozˇs´ıˇrenosti mezi návˇstˇevn´ıky. Dle studie ve 3. ˇctvrtlet´ı roku 2012 bylo prodáno v´ıce neˇz 1083 milión˚ u chytr´ ych“ mobiln´ıch zaˇr´ızen´ı. [stu()] ” Mobiln´ı chytré“ zaˇr´ızen´ı vyuˇz´ıvá fotoaparát, lokalizaˇcn´ı sluˇzby, mobiln´ı in” ternet, umoˇzn ˇuje instalaci aplikac´ı tˇret´ıch stran apod. Systém a klientská aplikace budou m´ıt tedy následuj´ıc´ı vlastnosti a funkˇcnost (viz 3.3.1 a 3.3.2).

3.3.1

Syst´ em

• Systém bude navrˇzen pro snadné budouc´ı rozˇs´ıˇren´ı. • Systém bude disponovat webov´ ym rozhran´ım pro zamˇestnance instituc´ı. • Systém bude komunikovat s klientskou aplikac´ı skrze Web API. • Umoˇzn´ı zdarma registraci do systému Tagiee. • Umoˇzn´ı pˇridán´ı a editován´ı instituc´ı, maják˚ u pˇrihláˇsen´ ym uˇzivatel˚ um. • Obsah jednotliv´ ych maják˚ u budou tvoˇrit texty, obrázky a video, které bude umˇet systém pˇridat a editovat. • Systém bude uchovávat veˇskeré textové informace a obrázky. Videa budou uloˇzena na extern´ıch u ´loˇziˇst´ıch.

12

Návrh systému


• Systém poskytne seznam nejbliˇzˇs´ıch instituc´ı na základˇe polohy uˇzivatele. • Systém poskytne klientsk´ ym aplikac´ı vˇsechen obsah pˇridan´ y zamˇestnanci instituc´ı. • Systém mus´ı jednoznaˇcnˇe identifikovat vˇsechny zaˇr´ızen´ı, na kter´ ych bˇeˇz´ı klientská aplikace, instituce, majáky a zdroje (obrázky, videa apod.). • Systém bude pˇrij´ımat informace z klientské aplikace a na základˇe nich tvoˇrit statistiky o vyuˇzit´ı Tagiee v instituc´ıch. • Systém bude ukládat informace o nalezen´ı informaˇcn´ıho majáku. Pokud uˇzivatel smaˇze klientskou aplikaci, tak po znovu nainstalován´ı aplikace nepˇrijde o jednou jiˇz nalezené majáky. • Systém bude pˇrij´ımat hodnocen´ı uˇzivatel˚ u, která budou slouˇzit jako zpˇetná vazba zamˇestnanc˚ um instituce.

3.3.2

Klientsk´ a aplikace

Klientská aplikace by pokud moˇzno mˇela m´ıt následuj´ıc´ı funkˇcnost, aby se zachovala u ´roveˇ n sluˇzby Tagiee. • Mobiln´ı aplikace bude splˇ novat podm´ınky pro vstup do digitáln´ıch obchod˚ u s aplikacemi (App Store, Google Play, Windows Phone Store). • Aplikace bude vyuˇz´ıvat GPS, NFC, WiFi, Bluetooth, fotoaparát a pˇripojen´ı k internetu. • Klientská aplikace bude komunikovat se systémem Tagiee pomoc´ı API. • Aplikace bude schopná zobrazit nejbliˇzˇs´ı instituce vyuˇz´ıvaj´ıc´ı systém Tagiee a následné pˇrihláˇsen´ı k nim. Pokud nebude dostupná GPS technologie pro z´ıskán´ı aktuáln´ı polohy, bude moˇznost se pˇrihlásit k instituci pomoc´ı unikátn´ıho identifikátoru. Pˇrihláˇsen´ım se m´ın´ı staˇzen´ı informac´ı o instituci vˇcetnˇe vˇsech dostupn´ ych maják˚ u a jejich textového obsahu. Staˇzené textové informace se uchovaj´ı pro pozdˇejˇs´ı pouˇzit´ı. • Umoˇzn´ı nalezen´ı informaˇcn´ıch maják˚ u návˇstˇevn´ıkem pomoc´ı jednoznaˇcné identifikovatelné znaˇcky (lokalizaˇcn´ı sluˇzba - GPS, QR kód, NFC, WiFi, bluetooth, 3-m´ıstn´ y hash kl´ıˇc). 13

Návrh systému

Uˇzivatelé systému

• Pˇri nalezen´ı maják˚ u skrze lokalizaˇcn´ı sluˇzbu, mus´ı aplikace zobrazit vˇsechny nalezitelné majáky na mapˇe. • Aplikace bude umˇet zobrazit seznam vˇsech nalezen´ ych maják˚ u, jejich obsah vˇcetnˇe vˇsech obrázk˚ u a vide´ı. Jednou jiˇz staˇzené obrázky si aplikace uchová, aby se v budoucnu nestahovaly znovu. • Mobiln´ı aplikace Tagiee mus´ı b´ yt ˇsetrná k vyuˇzit´ı mobiln´ı datové s´ıtˇe. V pˇr´ıpadˇe pˇripojen´ı k WiFi s´ıti je moˇznost pˇred zaˇca´tkem prohl´ıdky instituce stáhnout vˇsechny obrázky obsahu maják˚ u, které se zobraz´ı v pˇr´ıpadˇe jejich nalezen´ı. • Aplikace mus´ı zobrazit vˇzdy aktuáln´ı informace, pokud je dostupné pˇripojen´ı k internetu. • Klientská aplikace bude sb´ırat statistiky o akc´ıch uˇzivatele. Akce jsou pˇrihláˇsen´ı k instituci a nalezen´ı majáku. Tyto akce bude umˇet poslat systému Tagiee. Pokud nebude dostupné pˇripojen´ı k internetu, tyto statistiky se uloˇz´ı a poˇslou, aˇz pˇripojen´ı k internetu bude znovu navázáno. • Aplikace bude umˇet pˇridat krátké hodnocen´ı. • Velikost celé aplikace mus´ı b´ yt minimalizována pro moˇznost staˇzen´ı i pˇres mobiln´ı internetové pˇripojen´ı. • Aplikace mus´ı b´ yt ˇsetrná k baterii a zap´ınat / vyp´ınat lokalizaˇcn´ı sluˇzby dle potˇreby. • Aplikace mus´ı unikátnˇe napˇr´ıˇc platformami identifikovat zaˇr´ızen´ı.

3.4

Uˇ zivatel´ e syst´ emu

K systému budou pˇristupovat 3 typy uˇzivatel˚ u. Zamˇestnanci instituc´ı, návˇstˇevn´ıci vyuˇz´ıvaj´ıc´ı klientskou aplikaci a samotn´ı správci systému Tagiee.

3.4.1

Zamˇ estnanec instituce

Zamˇestnanec instituce bude povˇeˇrená osoba, která bude tvoˇrit obsah své instituce v systému Tagiee. Zamˇestnanec bude schopen vykonávat tyto u ´kony. 14

Návrh systému

Uˇzivatelé systému

• Bezplatná registrace do systému Tagiee. • Pˇridán´ı / editován´ı instituc´ı. • Pˇridán´ı / editován´ı maják˚ u a jejich obsahu. S t´ım spojené nahráván´ı obrázk˚ u a vide´ı. • Prohl´ıˇzen´ı statistik návˇstˇevnosti a hodnocen´ı od uˇzivatel˚ u. • Nahláˇsen´ı nevhodného hodnocen´ı od uˇzivatel˚ u.

3.4.2

Uˇ zivatel klientsk´ e aplikace

Uˇzivatel mus´ı vlastnit mobiln´ı chytr´ y“ telefon, kter´ y disponuje pˇripojen´ım ” k internetu.Uˇzivatel bude schopen vykonávat tyto následuj´ıc´ı u ´kony. • Bezplatnˇe stáhnout klientskou aplikaci Tagiee z aplikaˇcn´ıch obchod˚ u. • Uˇzivatel m˚ uˇze povolit uˇz´ıván´ı lokalizaˇcn´ı sluˇzby v aplikaci. • Nalezen´ı informaˇcn´ıch maják˚ u pomoc´ı lokalizaˇcn´ıch sluˇzeb, QR kódu, 3-m´ıstného hash kl´ıˇce a NFC tagu. • Pˇridán´ı krátké recenze k instituci. • Staˇzen´ı vˇsech obrázk˚ u pˇred prohl´ıdkou instituce. • Pˇrihláˇsen´ı k instituci skrze jej´ı unikátn´ı identifikátor nebo na základˇe polohy. • Zobrazit informace o instituci. • Zobrazit jiˇz jednou nalezené majáky s jejich obsahem.

3.4.3

Spr´ avce Tagiee

Správce systému Tagiee se mus´ı starat o kvalitu obsahu pˇridan´ ych zamˇestnanci instituc´ı. • Kontrolovat pravost instituc´ı, aby nedocházelo k znekvalitnˇen´ı sluˇzby Tagiee. 15

Návrh systému

Návrh moˇzných alternativ

• Mazat nevhodná (vulgárn´ı a nemravná) hodnocen´ı uˇzivatel˚ u na základˇe nahláˇsen´ı zamˇestnanci instituce.

3.5

N´ avrh moˇ zn´ ych alternativ

Alternativou m˚ uˇze b´ yt odstranˇen´ı pˇrihláˇsen´ı k instituci. Mobiln´ı aplikace by po zapnut´ı zaˇcala automaticky vyhledávat nejbliˇzˇs´ı majáky, aniˇz by byla definována instituce. Zjednoduˇsila by se klientská aplikace, jeˇz by po startu odeslala informace o své poloze systému Tagiee, kter´ y by poskytl informace o nejbliˇzˇs´ıch majác´ıch. Problémem zde m˚ uˇze b´ yt m´ıchán´ı jednotliv´ ych maják˚ u r˚ uzn´ ych instituc´ı a jejich ovˇeˇren´ı pravosti. Nen´ı problém pak nastrˇcit maják do instituce, kter´ y má mylné informace. Souˇcasn´ y navrˇzen´ y systém tohle odstraˇ nuje t´ım, ˇze si uˇzivatel sám vybere, k jaké instituci se chce pˇrihlásit. Aplikace totiˇz rozpozná pouze ty majáky, které pˇridali zamˇestnanci instituce.

16

4 Realizace systému Pro realizaci systému byla vybrána technologie MySQL (viz 4.2.2) a PHP (viz 4.2.1) pro rychl´ y v´ yvoj systému. API pro komunikaci s klientsk´ ymi aplikacemi bylo napsáno v ˇcistém PHP. Pro v´ yvoj frontendového webového prostˇred´ı byl pouˇzit ˇcesk´ y Framework Nette (viz 4.2.3).

4.1

Um´ıstˇ en´ı syst´ emu

Systém Tagiee byl um´ıstˇen na placeném webhostingu Onebit pod doménou tagiee.com. Hosting podporuje PHP 5.3/5.4, MySQL.

4.2 4.2.1

Pouˇ zit´ e technologie a knihovny PHP

PHP je technologie bˇeˇz´ıc´ı na serveru. Stránky se p´ıˇs´ı pomoc´ı php skript˚ u, které obsahuj´ı jak HTML, CSS a kód PHP. Ve chv´ıli, kdy webov´ y server obdrˇz´ı poˇzadavek na zobrazen´ı stránky vyuˇz´ıvaj´ıc´ı PHP skripty, server vezme HTML kód, poté server provede ˇca´sti PHP skript˚ u a v´ ysledek spoj´ı do odpovˇedi. [php()]

4.2.2

MySQL

1 ˇ MySQL je relaˇcn´ı databázov´ y systém typu SRBD . Kaˇzdá databáze v MySQL je tvoˇrena z jedné nebo v´ıce tabulek, které maj´ı ˇrádky a sloupce. V ˇra´dc´ıch jsou jednotlivé záznamy a sloupce uvozuj´ı název ˇci datov´ y typ jednotliv´ ych pol´ı. Práce s daty se provád´ı pomoc´ı deklarativn´ıho programovac´ıho jazyka SQL. 1

Systém ˇr´ızen´ı b´ aze dat - software zajiˇst’uj´ıc´ı práci s databáz´ı.

17

Realizace systému

4.2.3

Pouˇzité technologie a knihovny

Framework Nette

Framework Nette je opensource framework pro tvorbu webov´ ych aplikac´ı v PHP 5. V´ yhody frameworku jsou eliminace bezpeˇcnostn´ıch rizik, ˇsablonovac´ı systém, podpora AJAXu, ˇcist´ y objektov´ y návrh, komponenty, událostmi ˇr´ızené programován´ı, v´ ykon, dependency injection, pluginy a rozˇs´ıˇren´ı. Nette vyuˇz´ıvá architekturu MVP: • Model - Datová a funkˇcn´ı vrstva, jeˇz se stará o ukládán´ı dat a aplikaˇcn´ı logiku (napˇr. pˇrihláˇsen´ı, pˇridán´ı a zmˇena dat). • View - Stará se pouze o vykreslen´ı v´ ysledku poˇzadavku uˇzivatele. V Nette jsou to ˇsablony. • Presenter - Spojuje Model a View vrstvu. Na základˇe poˇzadavku od uˇzivatele vyvolá pˇr´ısluˇsnou aplikaˇcn´ı logiku. Informace o Nette v této podsekci vycház´ı z jej´ı dokumentace. [net()] ˇ Sablony Silnou pˇrednost´ı Nette je ˇsablonovac´ı systém Latte. Latte uˇsetˇr´ı práci a zabezpeˇc´ı v´ ystup napˇr´ıklad proti XSS2 apod. Základem je Latte soubor, kter´ y obsahuje HTML, Javascript a Latte makra. V následuj´ıc´ım pˇr´ıkladu je uveden rozd´ıl mezi PHP a Latte makry. V PHP bude vypsáno pole prvk˚ u jako seznam, kde kaˇzd´ y ˇretˇezec bude zaˇc´ınat velik´ ym p´ısmenem:
// Tvoreni ID itemu . < li id = " item - " >
Cross-Site Scripting je metoda naruˇsen´ı webov´ ych stránek zneuˇz´ıvaj´ıc´ı neoˇsetˇren´ ych ´ cn´ık pak dok´ v´ ystup˚ u. Utoˇ aˇze do stránky podstrˇcit sv˚ uj vlastn´ı kód a t´ım m˚ uˇze stránku pozmˇenit nebo dokonce z´ıskat citlivé u ´daje o návˇstˇevn´ıc´ıch.

18

Realizace systému


echo htmlSpecialChars ( mb_convert_case ( $item , MB_CASE_TITLE )) ?>

Tento kód je vˇsak velmi nepˇrehledn´ y. Pomoc´ı Latte maker bude kód vypadat následovnˇe: < ul n : if = " $items " > < li n : foreach = " $items as $item " >{ $item | capitalize }

Vˇsimnout si m˚ uˇzete tzv. helper˚ u, jsou to slova za znakem |“, které umoˇz” n ˇuj´ı formátován´ı v´ ysledného textu, ˇc´ısel apod. V pˇredchoz´ım pˇr´ıkladˇe je helper slov´ıˇcko capitalize, které znamená, ˇze ˇretˇezec bude vypsán vˇzdy s prvn´ım velk´ ym p´ısmenem.

Presentery Presenter je objekt, jenˇz vezme poˇzadavek pˇreloˇzen´ y routerem (obousmˇerné pˇrekládán´ı mezi URL a akc´ı presenteru) a vybere odpovˇed’. Odpovˇed´ı m˚ uˇze b´ yt HTML stránka, obrázek, XML dokument, soubor na disku, JSON, pˇresmˇerován´ı apod. Kaˇzd´ y presenter má sv˚ uj ˇzivotn´ı cyklus (viz obr. 4.1). Ihned po vytvoˇren´ı presenteru se zavolá metoda startup(). Ta inicializuje promˇenné nebo oveˇr´ı uˇzivatelská oprávnˇen´ı. Metoda action provede urˇcit´ y u ´kon (pˇrihlás´ı uˇzivatele, zap´ıˇse data do databáze) pˇr´ıpadnˇe pˇresmˇeruje na jin´ y presenter. Metoda handle zpracovává signály. Signály jsou urˇceny pro komponenty a pro zpracován´ı AJAXov´ ych poˇzadavk˚ u. D˚ uleˇzitou metodou je render, pˇri n´ıˇz pˇredá presenter ˇsablonˇe data, která bude ˇsablona zobrazovat.

Datab´ aze Nette poskytuje vrstvu pro práci s databáz´ı, jeˇz za programátora bude pokládat efektivn´ı dotazy, které nebudou pˇrenáˇset zbyteˇcná data. Základem je objekt nad PDO3 Nette/Database/Connection. Nad t´ımto objektem se daj´ı 3

Tˇr´ıda reprezentuj´ıc´ı spojen´ı mezi PHP a databázov´ ym serverem.

19

Realizace systému


ˇ Obrázek 4.1: Zivotn´ ı cyklus presenteru v Nette. pokládat klasické SQL dotazy Na následuj´ıc´ım pˇr´ıkladu je ukázáno vytvoˇren´ı objektu Connection a a poloˇzen´ı SQL dotazu. use Nette \ Database \ Connection ; $database = new Connection ( $dsn , $user , $password ); $database - > query ( ’ SELECT * FROM categories WHERE id =? ’ , 123) -> dump ();

U sloˇzitˇejˇs´ıch dotaz˚ u lze vyuˇz´ıt nástroj odvozen´ y od NotORM. NotORM je PHP knihovna pro snadnˇejˇs´ı práci s databáz´ı a obsahuje bal´ık metod, které za nás vygeneruj´ı poˇzadované SQL dotazy. Nutné je vˇsak podotknout, pokud bychom chtˇeli vyuˇz´ıvat tuto funkci v Nette, je nutné m´ıt typ tabulek v databázi s ciz´ımi kl´ıˇci napˇr. InnoDB, kde název sloupeˇcku ciz´ıch kl´ıˇc˚ u bude obsahovat název tabulky, na kterou se odkazuje a suffix id. Na následuj´ıc´ım pˇr´ıkladu je pouˇzit´ı nástroje NotORM. use Nette \ Database \ Connection ; $database = new Connection ( $dsn , $user , $password ); $database - > table ( ’ categories ’) - > where ( array ( ’ id ’ = >123)) -> dump ();

20

Realizace systému


T´ımto zp˚ usobem m˚ uˇzeme tvoˇrit mnohem sloˇzitˇejˇs´ı dotazy a vyuˇz´ıvat r˚ uzné agregaˇcn´ı a filtraˇcn´ı funkce. Poˇzadovaná data jsou vrácena jako ActiveRow objekt, se kter´ ym zacház´ıme jako s polem.

Formul´ aˇ re Nette um´ı jednoduˇse vytvoˇrit formuláˇre tˇr´ıdy Nette/Forms/Form. Formuláˇre se validuj´ı jak na stranˇe serveru, tak i na stranˇe Javascriptu, podporuj´ı v´ıcejazyˇcnost a poskytuj´ı zabezpeˇcen´ı proti zranitelnosti systém˚ u. Jednoduch´ y pˇrihlaˇsovac´ı formuláˇr vypadá následovnˇe. require ’ Nette / loader . php ’; use Nette \ Forms \ Form ; $form = new Form ; // Pridani poli $form - > addText ( ’ name ’ , ’ Jmeno : ’ ); $form - > addPassword ( ’ password ’ , ’ Heslo : ’ ); $form - > addSubmit ( ’ send ’ , ’ Registrovat ’ ); echo $form ; // vykresli formular

Nette má velikou ˇskálu validaˇcn´ıch pravidel od emailu aˇz po URL. V pˇr´ıpadˇe u ´spˇeˇsnˇe vyplnˇeného formuláˇre se zavolá metoda, která se formuláˇri nastav´ı následovnˇe. $form - > onSuccess [] = $this - > loginSubmited ; public function loginSubmitted ( Form $form ) { // Zpracovani $jmeno = $form - > values - > name ; // Jmeno $password = $form - > values - > password ; // Heslo }

Metoda loginSubmitted bude zavolána pˇri odeslán´ı formuláˇre. K jednotliv´ ym hodnotám z formuláˇre se pˇristupuje pˇres instanci Form pˇredanou jako parametr této metody.

21

Realizace systému

4.2.4


Google Maps JavaScript API v3

Google Maps JavaScript API v3 umoˇzn ˇuje vloˇzen´ı Google mapy na vlastn´ı stránky. API poskytuje funkce které pracuj´ı s mapou a mohou j´ı nastavovat r˚ uzné anotace, polohu, ale i informace z mapy z´ıskávat. [map()] Mapa se pˇripoj´ı k blokovému elementu
pomoc´ı javascriptového kódu. var map ; function initialize () { var mapOptions = { zoom : 8 , // Nastaveni jake misto na mape ma byt zobrazeno . center : new google . maps . LatLng ( -34.397 , 150.644) , // Typ mapy mapTypeId : google . maps . MapTypeId . ROADMAP }; // Napojeni mapy na div s id =" map - canvas " map = new google . maps . Map ( document . getElementById ( ’map - canvas ’) , mapOptions ); } // Inicialize Google Map google . maps . event . addDomListener ( window , ’ load ’ , initialize );

4.2.5

Google Charts

Google Charts je nástroj, kter´ y umoˇzn´ı vloˇzen´ı graf˚ u na stránky pomoc´ı javascriptu. Podporuje veliké mnoˇzstv´ı graf˚ u napˇr. koláˇcové, spojnicové, sloupcové apod. Nejprve je nutné inicializovat graf. [cha()] // Nacteni vizualizace grafu . google . load ( ’ visualization ’ , ’ 1.0 ’ , { ’ packages ’ :[ ’ corechart ’ ]}); // Nastaveni callbacku pro vykresleni grafu . google . setOnLoadCallback ( drawChart );

Po inicializaci se nadefinuj´ı data a napln´ı se jim instance grafu. function drawChart () { // Definice dat . var data = new google . visualization . DataTable (); data . addColumn ( ’ string ’ , ’ Topping ’ ); data . addColumn ( ’ number ’ , ’ Slices ’ );

22

Realizace systému


data . addRows ([ [ ’ Mushrooms ’ , 3] , [ ’ Onions ’ , 1] , ]); // Nastaveni grafu . var options = { ’ width ’ :400 , ’ height ’ :300}; // Vytvoreni instance grafu , ktere se predaji // data a nastaveni . var chart = new google . visualization . PieChart ( document . getElementById ( ’ chart_div ’ )); // Vykresleni grafu . chart . draw ( data , options ); }

4.2.6

JQuery

JQuery je javascriptová knihovna usnadˇ nuj´ıc´ı práci a pˇrehlednost javascriptu. [jqu()] Knihovna má následuj´ıc´ı funkce: • V´ ybˇer DOM element˚ u. • Funkce pro procházen´ı a zmˇenu DOM. • Kompletn´ı podpora AJAX. • Manipulace s CSS. • Události, na které lze napojit vlastn´ı funkce. • Rozˇsiˇritelnost o dalˇs´ı pluginy. Pouˇzit´ı knihovny spoˇc´ıvá v importován´ı javascriptové knihovny do stránek: < script type = " text / javascript " src = " jquery . js " >

23

Realizace systému

4.2.7


JQuery UI

JQuery UI je sada efekt˚ u, widget˚ u, témat a interaktivn´ıch prvk˚ u postavená nad knihovnou JQuery. Základem je importován´ı CSS a javascriptového souboru do HTML dokumentu a poté lze vyuˇz´ıvat funkce tohoto rozˇs´ıˇren´ı. [jqu()]

4.2.8

Uploadify

Uploadify je JQuery plugin, pomoc´ı kterého lze nahrávat na server soubory. Jsou dvˇe r˚ uzné verze a to HTML5 a Flash. Uploadify podporuje nahrán´ı v´ıce soubor˚ u, zobrazuje pr˚ ubˇeh nahráván´ı souboru a v HTML5 verzi podporuje drag and drop pˇridán´ı souboru do nahrávac´ıho formuláˇre. Zobrazen´ı formuláˇre pro nahráván´ı soubor˚ u se provede nasazen´ım pluginu pomoc´ı JQuery nad blokov´ ym elementem
. [upl()] $ ( function () { $ ( " # file_upload " ). uploadify ({ width : 120 , height : 30 , // Nahravaci animace swf : ’/ uploadify / uploadify . swf ’ , // PHP skript pro zpracovani nahraneho obrazku . uploader : ’/ uploadify / uploadify . php ’ }); });

4.2.9

Jcrop

JCrop je JQuery plugin, kter´ y umoˇzn´ı vybrat v´ yseˇc v obrázku. Nad elementem nebo se nasad´ı JCrop plugin. [jcr()] $ ( function () { $ ( ’# jcrop_target ’ ). Jcrop (); });

24

Realizace systému

4.3

Databázová vrstva

Datab´ azov´ a vrstva

Databáze v MySQL byla vytvoˇrena pomoc´ı nástroje MySQL Workbench 5.2. MySQL Workbench je grafick´ y uˇzivatelsk´ y nástroj pro architekty a v´ yvojáˇre databáz´ı. Umoˇzn ˇuje tvorbu a modelován´ı databáz´ı MySQL. Na obrázku (Obr. 4.2) je datov´ y model systému Tagiee. Názvy vˇsech tabulek jsou anglicky mal´ ym p´ısmenem a v jednotném ˇc´ısle. Propojovac´ı tabulky ciz´ıch kl´ıˇc˚ u jsou tvoˇreny názvy propojen´ ych tabulek oddˇelené podtrˇz´ıtkem. Aby se databáze mohla vyuˇz´ıvat s frameworkem Nette, vˇsechny ciz´ı kl´ıˇce jsou pojmenovány názvem tabulky, na kterou se odkazuj´ı se suffixem id. Základem je tabulka uˇzivatel˚ u (user). Zamˇestnanec instituce si mus´ı nejprve vytvoˇrit tento u ´ˇcet, kde zadá informace o sobˇe. Uˇzivatel má r˚ uzné role, pokud se jedná o správce instituce, dovol´ı systém Tagiee pˇridán´ı jedné ˇci v´ıce instituc´ı (institution). K pˇridán´ı instituce staˇc´ı název instituce, unikátn´ı identifikátor instituce (uiid) a adresa. Adresa se skládá ze zemˇe, kraje, mˇesta, ulice a poˇstovn´ıho smˇerovac´ıho ˇc´ısla. Na základˇe tˇechto u ´daj˚ u se z´ıskaj´ı zemˇepisné souˇradnice z Google Maps. Novˇe vytvoˇrená instituce nen´ı aktivn´ı a je nutné ji aktivovat pro zobrazen´ı v mobiln´ıch aplikac´ıch. Aktivovat instituci lze jen v tom pˇr´ıpadˇe, ˇze jsou vyplnˇeny poloˇzky: popis instituce, cen´ık, otev´ırac´ı doby a je pˇridán alespoˇ n jeden maják. Cen´ık a otev´ırac´ı doby jsou uloˇzeny v databázi jako JSON (viz 4.4.1) pole. K instituci lze pˇridat majáky (beacon), zdroje (resource) a lokace (location). Zdroj je multimediáln´ı obsah, jako je napˇr´ıklad obrázek. Zdroje jsou propojeny s instituc´ı pomoc´ı propojovac´ı tabulky resource institution. Lokace je um´ıstˇen´ı informaˇcn´ıho majáku. Nemus´ı se jednat pouze o zemˇepisné souˇradnice, ale i o seznam nejbliˇzˇs´ıch WiFi a Bluetooth s´ıt´ı, podle kter´ ych lze jednoznaˇcnˇe definovat polohu informaˇcn´ıho majáku. Seznam WiFi a Bluetooth je v databázi uloˇzen jako JSON pole. Instituce m˚ uˇze m´ıt libovolné mnoˇzstv´ı maják˚ u. Maják má unikátn´ı identifikátor ubid a 3-m´ıstn´ y kl´ıˇc, kter´ y je unikátn´ı jen v rámci instituce. QR kód a NFC budou vyuˇz´ıvat ubid k identifikaci majáku a kl´ıˇc bude vyuˇz´ıvat 3-m´ıstného kl´ıˇce. Kaˇzd´ y maják má sv˚ uj popis a textov´ y obsah. Obsah je uloˇzen opˇet jako JSON pole v následuj´ıc´ım formátu: [1.. N array ] = > ( [ type ] = > String { image | text | audio | video }

25

Realizace systému


Obrázek 4.2: Datov´ y model systému Tagiee. [ heading ] = > String

26

Realizace systému


[ content ] = > String [ resource_id ] = > Array integer )

Rozliˇsuj´ı se 4 typy obsahu a to obrázek, video, odkaz a text. V pˇr´ıpadˇe textu se vypln´ı kolonky heading, content a type se nastav´ı na text. U odkazu se vypln´ı také heading a content, kde v heading bude název odkazu a v content bude pˇr´ımo odkaz. U obrázk˚ u se m˚ uˇze heading a content vynechat, ale mus´ı b´ yt vyplnˇen resource id. V resource id bude pole id referuj´ıc´ı na obrázky. U videa bude pouze v content odkaz na Youtube video. Jeden maják m˚ uˇze m´ıt tedy neomezené“ mnoˇzstv´ı text˚ u a odkaz˚ u (omezen´ı dáno ” velikost´ı sloupeˇcku v databázi), 10 obrázk˚ u a 1 Youtube video. O tohle omezen´ı se stará webová aplikaˇcn´ı vrstva systému Tagiee. Zdroje k majáku jsou zaznamenány v tabulce beacon resource. Kaˇzdé mobiln´ı zaˇr´ızen´ı se zaˇrad´ı do tabulky device s unikátn´ım identifikátorem. Pˇrihlás´ı-li se zaˇr´ızen´ı k instituci, vloˇz´ı se záznam do tabulky device institution a v pˇr´ıpadˇe nalezen´ı majáku se vloˇz´ı záznam do beacon device. Tabulka review uchovává hodnocen´ı uˇzivatel˚ u k dané instituci. Jedno zaˇr´ızen´ı m˚ uˇze pˇridat pouze jedno hodnocen´ı k jedné instituci.

4.3.1

Triggery

Od verze MySQL 5.0.2 pˇribyla podpora triger˚ u. Triger je pojmenovan´ y databázov´ y objekt, kter´ y je spojen s urˇcitou tabulkou a aktivuje se událost´ı pˇri práci nad n´ı. MySQL podporuje události INSERT (vloˇzen´ı), UPDATE (aktualizace dat) a DELETE (smazán´ı). Jeˇstˇe se rozliˇsuj´ı akce BEFORE (pˇred vykonán´ı události) a AFTER (po vykonán´ı události). [mys()] Pˇri vykonán´ı triggeru mohou b´ yt inicializovány dvˇe promˇenné a to NEW a OLD. Pˇri události INSERT m˚ uˇze b´ yt pouˇzita pouze promˇenná NEW. OLD promˇenná v události INSERT nen´ı. U události DELETE je moˇzno pouˇz´ıt zase naopak pouze promˇennou OLD. Nakonec u události UPDATE lze pouˇz´ıt obˇe promˇenné. Promˇenná OLD je pouze urˇcená ke ˇcten´ı a nelze do n´ı zapisovat. [mys()]

27

Realizace systému


Revize instituce Kaˇzdá instituce má ˇc´ıslo svoj´ı revize. Ta urˇcuje aktuálnost dat pro klientské aplikace. Pokud má klientská aplikace ˇc´ıslo revize niˇzˇs´ı neˇz je v systému, aplikace v´ı, ˇze má zastaralá data a stáhne si posledn´ı verzi dat. Revize se bude zvyˇsovat o ˇc´ıslo 1 pˇri kaˇzdé zmˇenˇe / pˇridán´ı informac´ı v instituci a jejich majác´ıch. Tuto logiku jsem pˇresunul z aplikaˇcn´ı vrstvy do databázové. V databázi je nad tabulkou institution, beacon a location trigger, kter´ y zajist´ı zvyˇsován´ı ˇc´ısla revize v instituci. Na následuj´ıc´ım pˇr´ıkladˇe je trigger, kter´ y po kaˇzdé zmˇenˇe informac´ı nad tabulkou beacon inkrementuje revizi instituce. DELIMITER // CREATE TRIGGER ‘ update_rev_beacon ‘ AFTER UPDATE ON ‘ beacon ‘ FOR EACH ROW BEGIN UPDATE institution i SET i . revision = i . revision + 1 WHERE i . id = NEW . institution_id ; END // DELIMITER ;

Trigger se spust´ı pˇri aktualizaci kaˇzdého záznamu v tabulce beacon d´ıky kl´ıˇcovému slovu FOR EACH ROW. Podobné triggery jsou v tabulkách location a institution. Pˇri pˇridán´ı hodnocen´ı uˇzivatelem, tedy aktualizace tabulky review, nedocház´ı ke zmˇenˇe revize. Hodnocen´ı nejsou kl´ıˇcové informace, pro která by bylo nutné stahovat vˇsechny informace o instituci znovu.

N´ avˇ stˇ evnost maj´ ak˚ u, instituc´ı O návˇstˇevn´ıkovi, jenˇz navˇst´ıv´ı instituci, se do databáze tato událost zaznamená. Návˇstˇevn´ık m˚ uˇze navˇst´ıvit instituci v´ıcekrát. Aby se neplnily statistiky, tak navˇst´ıven´ı instituce bude zaznamenáno jen jednou za 24 hodin. Pokud by návˇstˇevn´ık navˇst´ıvil instituci ve 24 hodinách v´ıcekrát, v databázi bude záznam pouze jednou. Naopak navˇst´ıv´ı-li instituci dvakrát s intervalem jednoho mˇes´ıce, budou zaznamenány v databázi dvˇe návˇstˇevy. V následuj´ıy c´ım kódu je ukázka vytvoˇren´ı triggeru nad tabulkou device institution, kter´ nepovol´ı pˇridán´ı v´ıce záznam˚ u o navˇst´ıven´ı stejné instituce stejn´ ym návˇstˇevn´ıkem bˇehem 24 hodin. DELIMITER // CREATE TRIGGER ‘ device_institution_prevent ‘ BEFORE INSERT ON ‘ device_institution ‘ FOR EACH ROW BEGIN

28

Realizace systému

Tagiee API

DECLARE count INT default 0; SET count = ( SELECT COUNT (*) FROM device_institution WHERE device_id = NEW . device_id AND institution_id = NEW . institution_id AND abs ( UNIX_TIMESTAMP ( NEW . timestamp ) UNIX_TIMESTAMP ( timestamp )) < 86400 );

IF ( count > 0) THEN SIGNAL SQLSTATE ’ 45000 ’ SET MESSAGE_TEXT = " device already visit institution in this day ! " ; END IF ; END // DELIMITER ;

Pˇred vloˇzen´ım nového záznamu se projde tabulka device institution a porovná se, kolik záznam˚ u v tabulce je pˇridan´ ych do 24 hodin (86400 sekund) od právˇe pˇridávaného záznamu v promˇenné NEW. Pokud takov´ y záznam existuje, jedná se o duplicitu za 24 hodin a je vyvolána v´ yjimka, která zruˇs´ı pˇridán´ı záznamu. Stejn´ ym zp˚ usobem je ˇreˇseno nalezen´ı majáku návˇstˇevn´ıkem. Objeven´ı je zaznamenáno pouze jednou za 24 hodin, stejnˇe jako u navˇst´ıven´ı instituce. Kód triggeru je obdobn´ y a nacház´ı se nad tabulkou device beacon.

4.4

Tagiee API

Systém pˇredevˇs´ım komunikuje s mobiln´ımi zaˇr´ızen´ımi. Pro implementaci bylo pouˇzité ˇcisté PHP. Komunikace prob´ıhá formou dotaz / odpovˇed’, tedy na kaˇzd´ y dotaz je odpovˇed’. Komunikace je skrze HTTP Post poˇzadavek a samotná data jsou v JSON formátu (viz 4.4.1).

29

Realizace systému

4.4.1

Tagiee API

JSON format

JSON je formát dat urˇcen´ y pˇredevˇs´ım k jejich pˇrenosu. Je jednoduch´ y na generován´ı a parsován´ı. V JSON se vyskytuj´ı dvˇe struktury: • Kolekce neseˇrazen´ ych pár˚ u (název a hodnota) naz´ yváno jako objekt. Objekt zaˇc´ıná závorkou { a konˇc´ı párovou závorkou }. Za kaˇzd´ ym názvem je dvojteˇcka a páry se oddˇeluj´ı ˇca´rkou. • Seˇrazené pole prvk˚ u. Pole zaˇc´ıná hranatou závorkou [ a konˇc´ı druhou párovou závorkou ]. Prvky v poli jsou oddˇeleny ˇca´rkou. Struktury se m˚ uˇzou do sebe libovolnˇe vnoˇrovat a tvoˇrit tak spolu komplexnˇejˇs´ı datovou strukturu. Hodnotou m˚ uˇze b´ yt ˇretˇezec, ˇc´ıslo, pole, objekt, true, false a null. [jso()]

4.4.2

API pro komunikaci

Jak uˇz bylo zm´ınˇeno, poˇzadavek je v JSON formátu. Server z´ıská poˇzadavek pomoc´ı funkce file get contents() nad php://input. $input = file_get_contents ( ’ php :// input ’ );

Funkce file get contents($file) pˇreˇcte cel´ y soubor nad vstupn´ım streamem. V pˇr´ıpadˇe POST poˇzadavku jsou vstupn´ım streamem data, která POST pˇrenáˇs´ı, tedy v naˇsem pˇr´ıpadˇe JSON struktura. Otevˇren´ y stream sm´ı b´ yt ˇcten pouze jednou a nepodporuje operace pro vyhledáván´ı. T´ımto jsme dostali JSON strukturu, jeˇz je nutné dekódovat. Dekódován´ı je provedeno nativn´ı funkc´ı PHP json decode($json). $in = json_decode ( $input );

Pokud nen´ı nastaveno, v´ ysledek po parsován´ı je v objektu, kterému rozum´ı PHP a m˚ uˇzeme s n´ım dále pracovat. Kaˇzd´ y poˇzadavek mus´ı obsahovat pole type, které urˇcuje, jak´ y obsah má b´ yt vrácen. Dalˇs´ı povinn´ y parametr je udid, jenˇz je unikátn´ı identifikátor kaˇzdého zaˇr´ızen´ı. Spolu s unikátn´ım identifikátorem je povinn´ ym parametrem 30

Realizace systému

Tagiee API

platform a version definuj´ıc´ı platformu, na které zaˇr´ızen´ı bˇeˇz´ı. Pole version nen´ı povinné, ale je doporuˇcené. [ type ] = > string [ udid ] = > string [ platform ] = > ios / android / win [ version ] = > string

Po u ´spˇeˇsném dekódován´ı a zkontrolován´ı je dle pole type vykonána odpovˇed’. Odpovˇed’ je sestavena do asociativn´ıho pole v PHP, ze kterého se generuje JSON struktura pomoc´ı funkce json encode($array) a nastaven´ı HTTP hlaviˇcky na content-type: application/json. /* Return as JSON array */ header ( " Content - type : application / json " ); echo json_encode ( $out );

Pokud byly parametry poˇzadavku zadány správnˇe, tak odpovˇed’ bude v následuj´ıc´ım formátu: [ status ] = > true [ response ]= > array / object

V pˇr´ıpadˇe ˇspatnˇe zadan´ ych parametr˚ u bude vyhozena v´ yjimka s chybou v následuj´ıc´ım formátu: [ status ] = > false [ error ] = > string [ code ] = > int

Systém Tagiee odpov´ıdá na následuj´ıc´ı typy poˇzadavk˚ u. Pro ukázku bude uveden pˇr´ıklad jednoho dotazu nad API. Celá dokumentace API je v pˇr´ıloze.

get institution list Vrac´ı seznam instituc´ı do vzdálenosti 100 km. Pˇredpokladem je urˇcen´ı zemˇepisné polohy uˇzivatele v poˇzadavku. Kromˇe povinn´ ych parametr˚ u poˇzadavku je nav´ıc potˇreba vyplnit tyto pole: /* Request */ [ type ] = > get_institution_list [ lat ] = > double [ lon ] = > double

31

Realizace systému

Tagiee API

/* Response */ [ response ]= > ( [1.. N array ] [ revision ] = int [ logo ] = > string [ uiid ] = > string [ name ] = > string [ address ] = > string [ lat ] = > double [ lon ] = > double [ rating ] = > double [ number_reviews ] = > int )

V odpovˇedi je seznam instituc´ı se jménem, adresou, unikátn´ıho identifikátoru instituce uiid, zemˇepisné polohy a hodnocen´ı instituce uˇzivateli.

get institution by uiid Na základˇe platného unikátn´ıho identifikátoru vrac´ı textové informace o instituci. Informace o instituci jako je název, adresa, zemˇepisné souˇradnice, otev´ırac´ı doby, hodnocen´ı uˇzivatel˚ u, cen´ık, kontaktn´ı informace. Seznam vˇsech maják˚ u spolu s jejich textov´ ym obsahem a seznam vˇsech pouˇzit´ ych zdroj˚ uv obsahu maják˚ u.

get institution revision Na základˇe unikátn´ıho identifikátoru instituce vrát´ı aktuáln´ı revizi instituce. Aplikace si m˚ uˇze d´ıky tomuto poˇzadavku zjistit, jestli má nejnovˇejˇs´ı verzi dat.

device visit institution V pˇr´ıpadˇe pˇrihláˇsen´ı k instituci je poslána notifikace systému Tagiee, která uchová tuto informaci pro budouc´ı statistiky návˇstˇevnosti.

32

Realizace systému

Implementace webového rozhran´ı

beacon found Pokud návˇstˇevn´ık nalezene maják, poˇsle systému Tagiee notifikaci informuj´ıc´ı o tomto nálezu, téˇz pro budouc´ı statistiky návˇstˇevnosti maják˚ u.

get review Vrát´ı seznam posledn´ıch hodnocen´ı instituce. D´ıky poˇzadavku get institutionby uiid mobiln´ı zaˇr´ızen´ı zjist´ı poˇcet hodnocen´ı a na základˇe tohoto poˇctu si m˚ uˇze aplikace sama urˇcit, kolik recenz´ı chce vrátit a hodnocen´ı stránkovat.

add review Umoˇzn´ı pˇridán´ı hodnocen´ı uˇzivatelem. Jeden uˇzivatel m˚ uˇze pˇridat pouze jedno hodnocen´ı k dané instituci.

admin Na základˇe pˇrihlaˇsovac´ıch u ´daj˚ u poskytne zamˇestnanci instituce informace o sv´ ych pˇridan´ ych instituc´ıch a majác´ıch.

add location Pˇrihláˇsen´ı uˇzivatelé m˚ uˇzou ke sv´ ym instituc´ım pˇridat lokace, na kter´ ych se nacházej´ı. Pˇridán´ı nen´ı povoleno z d˚ uvodu bezpeˇcnosti, pokud nejsou pˇredány pˇrihlaˇsovac´ı u ´daje správce instituce.

4.5

Implementace webov´ eho rozhran´ı

K implementaci webového prostˇred´ı systému Tagiee jsem vyuˇzil PHP a framework Nette. Webové prostˇred´ı bude slouˇzit zamˇestnanc˚ um instituc´ı pro vytváˇren´ı a editován´ı obsahu o jejich instituci.

33

Realizace systému

4.5.1


Struktura

Struktura webové ˇcásti (Obr. 4.3) Tagiee je rozdˇelena na 2 funkˇcn´ı moduly. Prvn´ım modulem je defaultn´ı prostˇred´ı pro pˇrihláˇsen´ı, registraci, pˇridán´ı instituce a druh´ y modulem je samotné editován´ı obsahu instituce. Prvn´ı modul se nacház´ı ve sloˇzce app, respektive jeho presentery a ˇsablony ve sloˇzkách app/presenters a app/templates. Druh´ y modul je v podsloˇzce app/InstitutionModule a presentery, ˇsablony ve sloˇzkách app/InstitutionModule/presenter a app/InstitutionModule/templates.

Obrázek 4.3: Struktura webového rozhran´ı. Datová vrstva je spoleˇcná pro oba moduly a je um´ıstˇena ve sloˇzce app/model. O datové vrstvˇe (viz 4.5.2). Ve sloˇzce www/ jsou um´ıstˇeny CSS styly, Javascript, obrázky souvisej´ıc´ı s grafikou webu a podp˚ urné soubory knihoven.

34

Realizace systému

4.5.2



Základem databázové vrstvy je tˇr´ıda Repository. Konstruktorem se pˇredá instance Nette/Database/Connection, která umoˇzn ˇuje pˇripojen´ı k databázi. Konkrétn´ı pˇripojen´ı je definované ve sloˇzce app/config/config.neon následuj´ıc´ım zp˚ usobem: database : dsn : ’ mysql : host =127.0.0.1; dbname = tagieecom1 ’ user : ’ tagiee . com ’ password : ’ XXXXXX ’

Tˇr´ıda Repository má d˚ uleˇzitou metodu getTable(). Tato metoda na základˇe jména tˇr´ıdy vybere tabulku, ze které bude ˇc´ıst záznamy. Pravidlo pro jmenován´ı tˇr´ıd je jméno tabulky zaˇc´ınaj´ıc´ı velik´ ym p´ısmenem následuj´ıc´ı slovem Repository. Pokud tedy chceme vrátit vˇsechny uˇzivatele systému Tagiee, zavoláme metodu getTable() nad instanc´ı tˇr´ıdy UserRepository. Tˇr´ıda UserRepository je definovaná následovnˇe. class UserRepository extends Repository { }

Tˇr´ıda UserRepository je bez metod, protoˇze si plnˇe vystaˇc´ı s tˇr´ıdami svého rodiˇce. Metoda getTable() na základˇe názvu tˇr´ıdy bude vyb´ırat záznamy z tabulky user. Pokud bychom si nevystaˇcili s metodami rodiˇce, nen´ı problém rozˇs´ıˇrit tuto tˇr´ıdu o své metody. Rozdˇelen´ı na podtˇr´ıdy pˇridává na pˇrehlednosti datové vrstvy a jasnˇe definuje i jej´ı chován´ı. Tˇr´ıda Repository obsahuje tyto metody pro práci s tabulkami: • getTable() - Vrát´ı objekt reprezentuj´ıc´ı databázovou tabulku. Pokud jinak nespecifikujeme v´ ybˇer, vrac´ı vˇsechny záznamy v tabulce jako Nette/Database/Table/Selection, j´ımˇz se dá procházet jako polem. • findBy(array $condition) - Najde specifick´ y záznam v tabulce, parametrem je podm´ınka jako asociativn´ı pole, tedy název sloupeˇcku => hodnota. Vrac´ı se jako objekt Nette/Database/Table/Selection. • insert(array $values) - Vloˇz´ı nov´ y záznam do tabulky, parametrem je opˇet asociativn´ı pole název sloupeˇcku => hodnota. 35

Realizace systému


• update(array $condition, array $values) - Aktualizuje záznam v tabulce. Parametrem jsou dvˇe asociativn´ı pole. Prvn´ı je podm´ınka, jak´ y záznam se bude aktualizovat a druh´ ym parametrem jsou hodnoty, které se maj´ı aktualizovat. • delete(array $condition) - Smaˇze záznam z tabulky. Parametrem je podm´ınka, která vybere záznam, jenˇz se smaˇze. • exec($query, $data) - Vykoná nad databáz´ı SQL pˇr´ıkaz. Prvn´ım parametrem je pˇr´ıkaz obsahuj´ıc´ı jeden nebo v´ıce znak˚ u ?“ a druh´ ym ” parametrem je pole hodnot, které se dosad´ı m´ısto otazn´ık˚ u. Aby byly tˇr´ıdy model˚ u jednoduˇseji pouˇzitelné, zaregistruj´ı se jako sluˇzby, tud´ıˇz se presenter nemus´ı starat o jejich vytváˇren´ı. Jako sluˇzby se zaregistruj´ı do souboru app/config/config.neon následuj´ıc´ım zp˚ usobem: services : userRepository : DB \ UserRepository ... institutionRepository : DB \ InstitutionRepository

Název na levé stranˇe pˇred dvojteˇckou definuje instanci UserRepository jako sluˇzbu, kterou je moˇzné pouˇz´ıt kdykoliv v presenterech. Pravá strana urˇcuje, jaká instance bude vytvoˇrena. Objekt UserRepository dˇed´ıc´ı od tˇr´ıdy Repository vˇsak vyˇzaduje pˇri vytvoˇren´ı instance v konstruktoru instanci tˇr´ıdy Connection. Avˇsak Nette má funkci Auto-Wiring, která pozná, ˇze je tˇreba instance Connection a tuto instanci za programátora vytvoˇr´ı. Pro u ´plnost bude ukázáno pouˇzit´ı tˇechto modelov´ ych tˇr´ıd v presenterech: class RegisterPresenter extends BasePresenter { /* * @var DB \ UserRepository * */ private $userRepository ;

protected function startup () { parent :: startup (); // Ziskani instance DB \ UserRepository $this - > userRepository = $this - > context - > userRepository ; }

public function registerFormSucceeded ( $form ) {

36

Realizace systému


.... $data = array ( ’ username ’ = > $values - > username , ’ password ’ = > Authenticator :: calculateHash ( $values - > password ) , ..... ’ post_code ’ = > $values - > post_code ); // Pridani uzivatele do tabulky $this - > userRepository - > insert ( $data ); }

}

4.5.3

Spr´ ava uˇ zivatel˚ u a instituc´ı

Po pˇristoupen´ı na adresu http://tagiee.com se zobraz´ı u ´vodn´ı pˇrihlaˇsovac´ı obrazovka s informacemi o sluˇzbˇe Tagiee, k ˇcemu slouˇz´ı a pro koho je urˇcena. Pˇrihlásit se p˚ ujde pod u ´ˇctem, kter´ y si zamˇestnanec vytvoˇr´ı. Na u ´vodn´ı stránce je také odkaz k registraci nového uˇzivatele. Na celém webu je dostupná horn´ı liˇsta, správa pˇrihláˇseného uˇzivatele a moˇznost jeho odhláˇsen´ı. Na adrese http://tagiee.com/register/ je registraˇcn´ı formuláˇr nového uˇzivatele. Po uˇzivateli je poˇzadováno kromˇe uˇzivatelského jména a hesla detailn´ı kontaktn´ı u ´daje. Detailn´ı informace jsou potˇreba z d˚ uvodu, aby se neregistroval kaˇzd´ y a aby obsah sluˇzby Tagiee byl hodnotn´ y. K pˇrihláˇsen´ı se vyuˇz´ıvá tˇr´ıda Authenticator a jej´ı statická metoda calculateHash($heslo, $s˚ ul = null), která pomoc´ı PHP funkce crypt($heslo, $s˚ ul = null) vytvoˇr´ı z hesla osolen´ y“ zakódovan´ y ˇretˇezec, kter´ y se pˇri pˇrihláˇsen´ı ” porovnává se zadan´ ym heslem. Pro vytvoˇren´ı se zakóduje ˇretˇezec pomoc´ı této metody: /* Zakodovani hesla */ Authenticator :: calculateHash ( $form - > values - > password );

Pˇri pˇrihláˇsen´ı se pak porovná zakódovan´ y ˇretˇezec z databáze s touto metodou. Metoda pak vrát´ı u ´plnˇe stejn´ y zakódovan´ y ˇretˇezec. T´ım dojde k porovnán´ı a ovˇeˇren´ı, ˇze se heslo shoduje. /* Heslo k overeni . */ $password = $form - > values - > password ;

37

Realizace systému


/* Ziskani zakodovaneho retezce z databaze . */ $row = $this - > database - > table ( ’ user ’) -> where ( ’ username ’ , $username ) - > fetch (); if ( $row - > password !== $this - > calculateHash ( $password , $row - > password )) { /* Hesla se neshoduji . */ }

Pokud je uˇzivatel pˇrihláˇsen, na u ´vodn´ı stránce se mu zobraz´ı seznam jeho instituc´ı a moˇznost jejich pˇridán´ı. Pro pˇridán´ı instituce je nutné zadat jej´ı název, unikátn´ı identifikátor a informace o um´ıstˇen´ı. Pokud chce zamˇestnanec smazat instituci, je nutné kontaktovat správce systému Tagiee z bezpeˇcnostn´ıch d˚ uvod˚ u a nechtˇeného smazán´ı instituce. V pˇr´ıpadˇe potˇreby je moˇzné deaktivovat instituci pˇri jej´ım editován´ı (viz 4.5.4). Z u ´vodn´ı obrazovky lze vybrán´ım instituce pˇrej´ıt k jej´ı editaci.

4.5.4

Vytv´ aˇ ren´ı a editov´ an´ı obsahu instituc´ı

Editace instituce je dostupná na adrese http://tagiee.com/institution/. Editován´ı instituce je jen pro pˇrihláˇsené uˇzivatele. Kaˇzd´ y uˇzivatel si m˚ uˇze editovat jen svoje vytvoˇrené instituce. Editován´ı instituce je rozdˇeleno na nˇekolik ˇca´st´ı, které maj´ı svou specifickou adresu a ke kter´ ym se lze dostat z levé postrann´ı nab´ıdky.

Informace a statistiky Tato stránka se zobraz´ı pod adresou http://tagiee.com/institution/. Lze zde aktivovat / deaktivovat instituci. Deaktivovaná instituce nebude dostupná skrze klientskou aplikaci. Novˇe vytvoˇrená instituce nen´ı aktivovaná a lze ji aktivovat pouze, pokud obsahuje název, popisek, logo instituce, kontaktn´ı telefon a email, otev´ırac´ı dobu, cen´ık, zemˇepisné souˇradnice a obsahuje alespoˇ n jeden aktivn´ı maják. Na stránce lze nalézt r˚ uzné statistiky t´ ykaj´ıc´ı se instituce a jej´ıch maják˚ u, poˇcet pˇr´ıstup˚ u, nalezen´ı maják˚ u dle technologi´ı a pod´ıl zaˇr´ızen´ı s operaˇcn´ım systém a jejich jednotliv´ ych verz´ı. K zobrazen´ı jsou vyuˇzity tabulky a ko38

Realizace systému


láˇcové grafy pomoc´ı Google Charts (viz 4.2.5). V pˇr´ıpadˇe statistik jsou dotazy nad databáz´ı sestavovány ruˇcnˇe a kv˚ uli rychlosti se nevyuˇz´ıvá NotORM Nette. ´ Uprava instituce ´ Uprava u ´daj˚ u o instituci vyuˇz´ıvá adresu http://tagiee.com/institution//edit/. Na u ´pravu se lze dostat i z levé postrann´ı nab´ıdky. Vˇsechny informace o instituci jsou mˇenitelné kromˇe unikátn´ıho identifikátoru uiid instituce. Logo se nahrává skrze knihovnu Uploadify (viz 4.2.8). Logo mus´ı b´ yt obrázek ve formátu PNG, JPG ˇci JPEG, mus´ı m´ıt minimáln´ı rozliˇsen´ı 250x250px a velikost menˇs´ı neˇz 300 Kb. Minimáln´ı rozliˇsen´ı je pro zachován´ı kvality obsahu. Omezen´ı velikosti obrázku je z d˚ uvodu sn´ıˇzen´ı pˇrenosu dat mobiln´ı datovou s´ıt´ı. Nahran´ y obrázek je oˇr´ıznut do ˇctverce. Po nahrán´ı je moˇzno tento obrázek upravit pomoc´ı knihovny Jcrop (viz 4.2.9) a zvolit si jinou ˇctvercovou v´ yseˇc v obrázku. Editace u ´daj˚ u o instituci se provád´ı bez nutnosti znovu naˇcten´ı stránky.

Pˇ rid´ an´ı, u ´ prava maj´ ak˚ u Pˇridán´ı maják˚ u má adresu http://tagiee.com/institution//beacons. Zde je um´ıstˇen seznam maják˚ u, jejich pˇrehled a je moˇzno kdykoliv majáky smazat. Pro pˇridán´ı staˇc´ı název majáku. Novˇe pˇridan´ y maják je neaktivn´ı. Novému majáku se vygeneruje unikátn´ı identifikátor UBID, kter´ y se skládá z unikátn´ıho identifikátoru instituce a názvu majáku. Dále se novému majáku vygeneruje náhodn´ y unikátn´ı 3-m´ıstn´ y kl´ıˇc, jenˇz je unikátn´ı u vˇsech maják˚ uv instituci. Pomoc´ı tohoto 3-m´ıstného kl´ıˇce lze pak také nalézt maják klientskou aplikac´ı. ´ Uprava maják˚ u má vlastn´ı stránku, na maják se lze dostat i pomoc´ı adresy http://tagiee.com/institution//beacons//. Pro u ´pravu maják˚ u nen´ı nutnost znovu naˇcten´ı stránky, komunikace prob´ıhá AJAXov´ ymi poˇzadavky. Neaktivovan´ y maják lze aktivovat pouze, pokud je vyplnˇeno jméno, popisek a vytvoˇren obsah, kter´ y se zobraz´ı po jeho nalezen´ı. Nespln´ı-li se tyto podm´ınky, formuláˇr pro aktivaci majáku nebude zobrazen. Obsah majáku podporuje pˇridán´ı text˚ u, odkaz˚ u, obrázk˚ u a jednoho You39

Realizace systému


tube videa. Obsah maják˚ u je uloˇzen do databáze jako JSON pole a je omezen velikost´ı sloupeˇcku content v tabulce beacon, coˇz je 15000 znak˚ u. Pˇridán´ı textu a odkazu se provád´ı pˇretaˇzen´ım elementu do kontejneru, ve kterém se m˚ uˇzou libovolnˇe ˇradit. K tomu se pouˇz´ıvá knihovna JQuery, respektive JQuery UI. Nad kontejneru je plugin .sortable(), kter´ y ˇrad´ı elementy v kontejneru a nad elementy je plugin .draggable(), kter´ y umoˇzn´ı jejich pˇretaˇzen´ı do kontejneru. /* Plugin pro text a odkaz */ $ ( " # text , # href " ). draggable ({ connectToSortable : " # sortable " , helper : " clone " , revert : " invalid " }); /* Plugin pro kontainer */ $ ( " # sortable " ). sortable ();

Po kliknut´ı na elementy v kontejneru se zobraz´ı dialogové okno, které umoˇzn´ı jejich editaci. Pro zobrazen´ı dialogu se vyuˇz´ıvá plugin dialog z knihovny JQuery UI. Elementy pro pˇridán´ı obrázk˚ u a videa se nevkládaj´ı do kontejneru. Jsou samostatné a umoˇzn ˇuj´ı pˇridán´ı aˇz deseti obrázk˚ u a jednoho videa. Poloha maják˚ u se udává pomoc´ı lokac´ı, které se definuj´ı v samotné sekci.

Lokace Lokace jsou dostupné na adrese http://tagiee.com/institution//location. Lokace se pouˇz´ıvaj´ı pro definován´ı polohy maják˚ u pˇri jejich u ´pravˇe. Lokace je zobrazena pomoc´ı komponenty LocationControl. Jednotlivé zobrazené komponenty LocationControl mus´ı m´ıt vlastn´ı instanci a b´ yt navzájem nezávislé. K tomu se vyuˇz´ıvá tˇr´ıda Multiplier, která pro kaˇzdou komponentu vytvoˇr´ı vlastn´ı instanci. D´ıky této tˇr´ıdˇe je moˇzné m´ıt v´ıce nezávisl´ ych komponent na jedné stránce.

40

Realizace systému


Nahr´ an´ı obr´ azk˚ u Obrázky jsou na adrese http://tagiee.com/institution//resource/ a vkládaj´ı se pomoc´ı knihovny Uploadify (viz 4.2.8). Obrázek mus´ı m´ıt minimáln´ı rozliˇsen´ı 250x250px a velikost menˇs´ı neˇz 2 Mb. Velikost je omezena kv˚ uli hardwarovˇe slabˇs´ım mobiln´ım zaˇr´ızen´ı (nˇekterá zaˇr´ızen´ı se systémem Android nedokáˇz´ı zobrazit obrázek vˇetˇs´ı neˇz 2 Mb).

41

5 Klientská ˇcást Klientská ˇcást byla implementována pro platformu iOS (viz 5.1). V této kapitole vycház´ım ze své bakaláˇrské práce, kde jsem se zab´ yval v´ yvojem aplikac´ı pro platformu iOS v jazyce Objective-C 2.0 a popisoval vlastnosti jazyka a principy v´ yvoje mobiln´ıch aplikac´ı. Realizace klientské ˇca´sti Tagiee byla vyv´ıjena na operaˇcn´ım systému OS X 10.8.3 ve v´ yvojovém prostˇred´ı Xcode 4.6.1. a bude dostupná pro platformu iOS 6 a novˇejˇs´ı. Minimáln´ı verze 6.0 byla vybrána d´ıky novinkám ve v´ yvoji aplikac´ı a tomu, ˇze 81,2% zaˇr´ızen´ı iOS bˇeˇz´ı ve verzi 6 a v´ıce (viz 5.2).

5.1

Platforma iOS

Mobiln´ı operaˇcn´ı systém iOS byl vytvoˇren firmou Apple Inc. P˚ uvodnˇe byl urˇcen pro mobiln´ı zaˇr´ızen´ı iPhone. Nyn´ı je vˇsak operaˇcn´ı systém vyuˇz´ıván i v zaˇr´ızen´ıch jako iPod Touch, iPad a Apple TV. [ios()] Systém iOS je odvozen z operaˇcn´ıho systému OS X. Tyto dva operaˇcn´ı systémy spolu sd´ılej´ı OS X kernel, BSD sokety pro s´ıt’ovou komunikaci, jazyk Objective-C a C/C++ kompilery. OS X pro tvorbu grafick´ ych interaktivn´ıch aplikac´ı vyuˇz´ıvá framework Cocoa, kter´ y se skládá z knihoven a vysokou ´rovˇ nového API. Aplikace, vytvoˇrené nad t´ımto frameworkem, z´ıskaj´ı vzhled a funkˇcnost nativn´ıch aplikac´ı systému OS X. Cocoa vyuˇz´ıvá architekturu MVC1 . Systém iOS vyuˇz´ıvá framework Cocoa Touch, kter´ y je uzp˚ usoben pro dotyková zaˇr´ızen´ı. [ios()]

5.2

Pod´ıl verz´ı iOS na trhu

Dle v´ yzkumu spoleˇcnosti 14 Oranges Software Inc. je pod´ıl zaˇr´ızen´ı iOS 6 dominantn´ı na trhu (viz Obr. 5.1) k 14. u ńoru 2013. [ora()] 1

Model-View-Controller rozdˇeluje datovou vrstvu, ˇr´ıd´ıc´ı logiku a uˇzivatelské rozhran´ı do tˇr´ı nez´ avisl´ ych komponent.

42

Klientská ˇcást

Pouˇzité knihovny

Obrázek 5.1: Pod´ıl verz´ı iOS na trhu.

5.3

Pouˇ zit´ e knihovny

Vˇsechny uvedené knihovny jsou volnˇe dostupné a ˇsiˇritelné. Na knihovnách je ukázán zp˚ usob jejich základn´ıho pouˇzit´ı. V implementaˇcn´ı ˇca´sti aplikace (viz 5.4) je popsána jejich u ´prava pro pouˇzit´ı v aplikaci.

5.3.1

AFNetworking

AFNetworking je s´ıt’ová knihovna pro iOS a OS X postavená na frameworku Foundation, tedy hlavnˇe na NSURLConnection a NSOperation. Knihovna dovoluje pos´ılat HTTP poˇzadavky nebo stahovat obrázky pˇr´ıpadnˇe soubory. Témˇeˇr vˇsechny metody knihovny vyuˇz´ıvaj´ı bloky kód˚ u, které se zavolaj´ı pˇri u ´spˇeˇsném / ne´ uspˇeˇsném HTTP poˇzadavku. Knihovna umoˇzn ˇuje vytvoˇren´ı HTTP klienta, kter´ y m˚ uˇze b´ yt nastaven pro komunikaci s webov´ ymi sluˇzbami. HTTP klient vyuˇz´ıvá frontu poˇzadavk˚ u, tud´ıˇz napˇr. pˇri stahován´ı galerie obrázk˚ u se obrázky stáhnou postupnˇe a nevyt´ıˇz´ı tolik datovou linku. Na následuj´ıc´ım pˇr´ıkladu je pouˇzit´ı knihovny AFNetworking pro komunikaci s webov´ ym API, které vrát´ı odpovˇed’ ve formˇe JSON struktury. [afn()] /* Adresa pro komunikaci s API */ NSURL * url = [ NSURL URLWithString : @ " https :// api . net / posts /0/ " ];

43



/* Vytvoreni HTTP pozadavku . */ NSURLRequest * request = [ NSURLRequest requestWithURL : url ]; AFJSONRequestOperation * operation = [ AFJSONRequestOperation JSONRequestOperationWithRequest : request success :^( NSURLRequest * request , NSHTTPURLResponse * response , id JSON ) { /* Komunikace uspesna . */ } failure : nil ]; /* Zahajeni komunikace . */ [ operation start ];

5.3.2

ZBarSDK

ZBarSDK je volnˇe ˇsiˇritelná knihovna, která umoˇzn ˇuje v reálném ˇcase ˇcten´ı kód˚ u EAN-13/UPC-A, UPC-E, EAN-8, Code 128, Code 39, Interleaved 2 of 5 a QR kód˚ u. Pro pouˇzit´ı staˇc´ı implementovat metody protokolu ZBarReaderDelegate a vytvoˇrit instanci ZBarReaderViewController. Pokud je vˇse pˇripravené, je moˇzné zobrazit Zbar ˇcteˇcku napˇr´ıklad jako modáln´ı okno. [zbd()]

5.3.3

OpenUDID

Od verze iOS 5.0 Apple zakázal pouˇzit´ı systémového unikátn´ıho identifikátoru zaˇr´ızen´ı takzvané UDID. Vˇsechny nové aplikace vyuˇz´ıvaj´ıc´ı tohoto identifikátoru budou zam´ıtnuty k publikován´ı do obchodu App Store. Stávaj´ıc´ı aplikace vyuˇz´ıvaj´ıc´ı UDID budou do konce kvˇetna 2013 vyˇrazeny z obchodu. Proto vznikla volná implementace UDID, která m˚ uˇze unikátnˇe identifikovat zaˇr´ızen´ı napˇr´ıˇc mobiln´ımi platformami. K identifikaci se vyuˇz´ıvá sériové ˇc´ıslo procesoru a MAC adresa WiFi adaptéru. Pouˇzit´ı je následuj´ıc´ı: # include " OpenUDID . h " NSString * openUDID = [ OpenUDID value ];

Statická metoda value vrac´ı unikátn´ı ˇretˇezec zaˇr´ızen´ı o délce 40ti znak˚ u. Pˇr´ıklad takového ˇretˇezce je 1c2cf41ab0e5c4a83702ee0c7e77c11d2cdfb3d6“. ” [ope()]

44


5.3.4


MWPhotoBrowser

MWPhotoBrowser (viz Obr. 5.2) je volná implementace nativn´ı obrázkové galerie systému iOS. Snaha knihovny je b´ yt pˇresnou kopi´ı nativn´ı galerie. Knihovna zvládá cachován´ı a stahován´ı obrázk˚ u v pr˚ ubˇehu prohl´ıˇzen´ı. [mwp()]

Obrázek 5.2: Ukázka MWPhoto galerie. Implementace je pomoc´ı modáln´ıho okna nebo pomoc´ı navigaˇcn´ıho controlleru.

5.3.5

DYRateView

DYRateView je univerzáln´ı komponenta, která zobrazuje hodnocen´ı ve formˇe pˇeti hvˇezdiˇcek. Komponenta m˚ uˇze b´ yt i editovatelná a slouˇzit jako zdroj hodnocen´ı od uˇzivatel˚ u aplikace. [dyr()] DYRateView je objekt UIView, pouˇzit´ı je tedy následuj´ıc´ı: DYRateView * rateView = [[ DYRateView alloc ] initWithFrame : frame ]; rateView . rate = 4.7; rateView . alignment = RateViewAlignmentRight ; [ self . view addSubview : rateView ];

5.3.6

EGOTableViewPullRefresh

EGOTableViewPullRefresh (viz Obr. 5.3) je rozˇs´ıˇren´ı UITableView o moˇznost stáhnout prstem tabulku a znovu naˇc´ıst jej´ı obsah. EGOTableView45



PullRefresh se pˇridá do tabulky jako jej´ı hlaviˇcka a implementován´ım scrollView protokolu tabulky se vloˇz´ı funkˇcnost. [ego()]

Obrázek 5.3: Znovu naˇcten´ı tabulky stáhnut´ım prstem.

5.3.7

ECGraph

ECGraph je knihovna, která vykresl´ı v jakémkoliv UIView graf. Knihovna podporuje kreslen´ı sloupcov´ ych a spojnicov´ ych graf˚ u. Na následuj´ıc´ım pˇr´ıkladu je implementace sloupcového grafu. [ecg()] CGContextRef _context = UIGraphicsGetCurrentContext (); ECGraph * graph = [[ ECGraph alloc ] initWithFrame : CGRectMake (10 ,10 , 480 , 320) withContext : _context isPortrait : NO ]; NSArray * items = [[ NSArray alloc ] initWithObjects : item1 , item2 , nil ]; [ graph setXaxisTitle : @ " name " ]; [ graph setYaxisTitle : @ " Percentage " ]; [ graph setGraphicTitle : @ " Histogram " ]; [ graph setDelegate : self ]; [ graph drawHistogramWithItems : items lineWidth :2 color :[ UIColor blackColor ]];

Pro vykreslen´ı se vyuˇz´ıvá funkce UIGraphicsGetCurrentContext(), která slouˇz´ı pro kreslen´ı uvnitˇr UIView. Pˇredpokladem je volán´ı této funkce v me46


Implementace klientské aplikace

todˇe drawRect() kaˇzdého UIView, kter´ y chce implementovat graf.

5.4

Implementace klientsk´ e aplikace

Klientská aplikace byla implementována na základˇe návrhu (viz 3.3.2).

5.4.1

Komunikace se syst´ emem Tagiee

Ke komunikaci s klientsk´ ym API byla vyuˇzita knihovna AFNetworking (viz 5.3.1). Základem je spoleˇcn´ y HTTP klient, kter´ y je singletonem a má spoleˇcnou instanci pro komunikaci s API v celé aplikaci. Klient je jiˇz pˇrednastaven pro komunikaci pomoc´ı JSON struktur. Komunikace nad t´ımto klientem se provád´ı postupnˇe a tud´ıˇz nedocház´ı k zahlcen´ı s´ıtˇe. static NSString * const kAPIURL = @ " http :// api . tagiee . com " ; @implementation TagieeClient + ( TagieeClient *) sharedClient { static TagieeClient * _sharedClient = nil ; static dispatch_once_t onceToken ; dispatch_once (& onceToken , ^{ _sharedClient = [[ TagieeClient alloc ] initWithBaseURL : [ NSURL URLWithString : kAPIURL ]]; }); return _sharedClient ; } - ( id ) initWithBaseURL :( NSURL *) url { self = [ super initWithBaseURL : url ]; if (! self ) { return nil ; } // Response type JSON [ self registerHTTPOperationClass : [ AFJSONRequestOperation class ]]; // Request type JSON [ self setParameterEncoding : AFJSONParameterEncoding ];

47



// Accept HTTP Header ; [ self setDefaultHeader : @ " Accept " value : @ " application / json " ]; return self ; } @end

Takto pˇrednastaven´ y klient je jiˇz schopn´ y komunikovat s Tagiee Web API (viz 4.4) pomoc´ı definovan´ ych poˇzadavk˚ u. Pouˇzit´ı klienta pro pˇr´ıstup k instituci vypadá následovnˇe: NSDictionary * jsonParams = @ { @ " type " : @ " get_institution_by_uiid " , @ " uiid " : uiid , @ " udid " :[ OpenUDID value ] , @ " platform " : @ " ios " , @ " version " :[[ UIDevice currentDevice ] systemVersion ]}; [[ TagieeClient sharedClient ] postPath : @ " " parameters : jsonParams success :^( AFHTTPRequestOperation * operation , id JSON ) { NSDictionary * response = JSON ; // Komunikace uspesna , zpracovani instituce } failure :^( AFHTTPRequestOperation * operation , NSError * error ) { // Doslo k chybe pro komunikaci }

Poˇzadavek i odpovˇed’ jsou ve formˇe objektu NSDictionary, tedy asociativn´ıho pole. Pro zjednoduˇsen´ı jsou jednotlivé typy poˇzadavk˚ u Web API ve vlastn´ıch tˇr´ıdách, které definuj´ı protokolové metody, které se zavolaj´ı v pˇr´ıpadˇe u ´spˇechu ˇci ne´ uspˇechu. Vˇsechny typy poˇzadavk˚ u systému Tagiee byly implementovány.

5.4.2


Framework Core Data Framework Core Data je persistentn´ı u ´loˇziˇstˇe, které se definuje entitami a vazbami mezi nimi. Framework má v sobˇe podporu funkc´ı pro editován´ı textu, lazy loading2 , vyhledáván´ı v datech, migraci dat a správu vazeb mezi 2

N´ avrhov´ y vzor naˇc´ıt´ an´ı objekt˚ u z databáze aˇz kdyˇz jsou potˇreba. Zvyˇsuje se v´ ykon ˇcten´ı dat a sniˇzuj´ı se pamˇet’ové n´ aroky.

48



entitami. Data se mohou uloˇzit do souboru XML nebo jako SQLite soubor.

Datov´ y model Datov´ y model v aplikaci (viz Obr. 5.4) byl vytvoˇren pomoc´ı editoru Xcode. Model v sobˇe ukládá informace o instituci a jej´ıch majác´ıch. Stáhnuté obrázky jsou také uloˇzeny v databázi a to jako BLOBs3 data. Apple uvád´ı, ˇze s ukládán´ım obrázk˚ u do Core Data se mus´ı opatrnˇe. Dá se dosáhnout dobr´ ych v´ ykonnostn´ıch v´ ysledk˚ u s daty do 10 MB, s t´ım ˇze BLOBs budou uloˇzeny v samotné entitˇe a bude na nˇe vazba. T´ım, ˇze Core Data pouˇz´ıvá lazy loading, bude obrázek naˇcten aˇz v pˇr´ıpadˇe jeho potˇreby.

Obrázek 5.4: Datov´ y model Core Data v aplikaci. 3

Binary Large OBjects - Velik´ a nadmˇerná data napˇr´ıklad obrázky nebo zvuky.

49



Pouˇ zit´ı Core Data v aplikaci V aplikaci je pouˇzito u ´loˇziˇstˇe SQLite pro Core Data. Pomoc´ı Xcode se vygeneruje objektov´ y model, kter´ y odpov´ıdá datovému modelu. Kaˇzdá entita bude reprezentovaná tˇr´ıdou oddˇedˇenou od NSManagedObject. Vazby mezi entitami budou propojeny pomoc´ı pole, pokud se jedná o vazbu 1:N nebo o referenci na jinou tˇr´ıdu vazby 1:1. Nejprve se nahraje objektov´ y model do pamˇeti. - ( NSManagedObjectModel *) managedObjectModel { if ( _managedObjectModel != nil ) { return _managedObjectModel ; } _managedObjectModel = [ NSManagedObjectModel mergedModelFromBundles : nil ]; return _managedObjectModel ; }

Pokud je naˇcten´ y objektov´ y model, z´ıská se koordinátor na Core Data u ´loˇziˇstˇe. V tomto pˇr´ıpadˇe na soubor TagieeModel.sqlite. Koordinátor slouˇz´ı jako prostˇredn´ık mezi objektov´ ym modelem a t´ım datov´ ym, tud´ıˇz mapuje objekty na jednotlivé entity. - ( NSPersistentStoreCoordinator *) persistentStoreCoordinator { if ( _persistentStoreCoordinator != nil ) { return _persistentStoreCoordinator ; } NSURL * storeURL = [[ self applicationDocumentsDirectory ] URLByAppendingPathComponent : @ " TagieeModel . sqlite " ]; NSError * error = nil ; _persistentStoreCoordinator = [[ NSPersistentStoreCoordinator alloc ] initWithManagedObjectModel :[ self managedObjectModel ]]; if (![ _persistentStoreCoordinator addPersistentStoreWithType : NSSQLiteStoreType configuration : nil URL : storeURL options : nil error :& error ]) { // Nelze pouzit model } return _persistentStoreCoordinator ; }

Pro koordinátor je nutné vytvoˇrit prostor nebo-li kontext, ve kterém se 50



bude pracovat s daty (ˇc´ıst je a mˇenit). To zajist´ı objekt NSManagedObjectContext, kterému se pˇredá koordinátor, podle kterého bude vˇedˇet, jak´ y typ dat si má uchovat a jaké informace poskytnout. - ( NSManagedObjectContext *) managedObjectContext { if ( _managedObjectContext != nil ) { return _managedObjectContext ; } NSPersistentStoreCoordinator * coordinator = [ self persistentStoreCoordinator ]; if ( coordinator != nil ) { _managedObjectContext = [[ NSManagedObjectContext alloc ] init ]; [ _managedObjectContext setPersistentStoreCoordinator : coordinator ]; } return _managedObjectContext ; }

ˇ ı dat z kontextu se pak provád´ı pomoc´ı objektu NSFetchRequest, Cten´ kter´ y na základˇe formáln´ıho popisu objektu NSEntityDescriptor vrát´ı napˇr´ıklad vˇsechny instituce uloˇzené v Core Data. NSFetchRequest * fetchRequest = [[ NSFetchRequest alloc ] init ]; NSEntityDescription * entity = [ NSEntityDescription entityForName : @ " InstitutionModel " inManagedObjectContext : context ]; [ fetchRequest setEntity : entity ]; NSError * error ; for ( InstitutionModel * institution in [ context executeFetchRequest : fetchRequest error :& error ]){ // Instituce }

T´ımto se dostane objekt InstitutionModel, ve kterém jsou data o instituci. Tyto data se m˚ uˇzou mˇenit a následnˇe pak uloˇzit. Uloˇzen´ı se provede metodou save: nad kontextem. Aby se uloˇzen´ı projevilo, je nutné aby se jednalo o stejnou instanci tˇr´ıdy InstitutionModel, jaká byla vrácena z objektu NSFetchRequest. Pro ukázku bude uvedeno pˇridán´ı nové instituce do Core Data pomoc´ı metody insertNewObjectForEntityForName:inManagedObjectContext: nad tˇr´ıdou NSEntityDescription. InstitutionModel * institution = [ NSEntityDescription insertNewObjectForEntityForName : @ " InstitutionModel " inManagedObjectContext : context ];

51


5.4.3


Uˇ zivatelsk´ e rozhran´ı

Tato ˇcást se bude zab´ yvat popisem uˇzivatelského rozhran´ı jen pro iPhone a iPod Touch. Aplikace se skládá z nˇekolika obrazovek (viz Obr. 5.5), kde základn´ım kamenem je UINavigationViewController. UINavigationViewController je komponenta, která um´ı zobrazit obsah (UIViewControllery) v hierarchické struktuˇre. Základn´ım prvkem UINavigationViewController je navigaˇcn´ı liˇsta, která obsahuje titulek popisuj´ıc´ı, kde se uˇzivatel právˇe nacház´ı a pˇr´ıpadné tlaˇc´ıtko zpˇet, které um´ı vrátit na pˇredchoz´ı zobrazenou obrazovku. ´ Uvodn´ ı obrazovka Po zapnut´ı aplikace se uˇzivateli zobraz´ı nejbliˇzˇs´ı dostupné instituce (viz Obr. 5.6). Nejbliˇzˇs´ı instituce jsou zobrazeny pomoc´ı UITableViewControlleru, kter´ y je rozˇs´ıˇren o EGOTableViewPullRefresh (viz 5.3.6) aktualizaci obsahu posunut´ım prstu smˇerem dol˚ u. Seznam nejbliˇzˇs´ıch instituc´ı je zobrazen jako UIView containment, jenˇz umoˇzn ˇuje vloˇzen´ı UIViewControlleru do jiného. T´ım je moˇzné na obrazovce zobrazit spodn´ı tlaˇc´ıtko spolu se seznamem nejbliˇzˇs´ıch instituc´ı. Uˇzivatel se m˚ uˇze pˇrihlásit k instituci i pomoc´ı unikátn´ıho identifikátoru instituce dotykem na spodn´ı tlaˇc´ıtko. Pomoc´ı tlaˇc´ıtek v navigaˇcn´ı liˇstˇe se m˚ uˇze uˇzivatel dostat do administrace a historie.

Zobrazen´ı instituce Po pˇrihláˇsen´ı k instituci se zobraz´ı obrazovka (viz Obr. 5.7), ve které je moˇzné pˇristoupit k nalezen´ı maják˚ u, k informac´ım o instituci, k jednou jiˇz nalezen´ ym maják˚ um, zobrazit hodnocen´ı uˇzivatel˚ u a pˇresnou polohu instituce. Uprostˇred se nacház´ı UISegmentController, tedy záloˇzky, které definuj´ı obsah pod n´ım. V pˇr´ıpadˇe ˇze obsah, kter´ y se nacház´ı pod záloˇzkami, bude dlouh´ y a nevejde se na obrazovku, je moˇzno jej posunout d´ıky UIScrollView. Pˇri posunu se záloˇzky pˇripnou k horn´ımu ˇcásti obrazovky, tud´ıˇz jsou vˇzdy vidˇet. Pod záloˇzkami je obsah opˇet pomoc´ı UIView containment. Tedy schránka, která m˚ uˇze v sobˇe zobrazovat dalˇs´ı UIViewControllery (informace o instituci, nalezené majáky, hodnocen´ı uˇzivatel˚ u,...). Schránka má svého rodiˇce, tedy UIViewController, kter´ y zobrazuje hlaviˇcku s logem instituce a záloˇzky. Mezi tˇemito UIViewControllery se pˇrep´ıná následuj´ıc´ım zp˚ usobem. 52



Obrázek 5.5: Uˇzivatelské rozhran´ı mobiln´ı aplikace. - ( void ) cycleFromViewController : ( UIViewController *) oldC toViewController : ( UIViewController *) newC { /* Odebere se stary UIViewController . */ [ oldC willMoveToParentViewController : nil ]; [ oldC . view removeFromSuperview ]; [ oldC removeFromParentViewController ];

/* Prida se novy UIViewController . */

53



´ Obrázek 5.6: Uvodn´ ı obrazovka aplikace. [ self addChildViewController : newC ]; newC . view . frame = _container . bounds ; [ _container addSubview : newC . view ]; [ newC didMoveToParentViewController : self ]; }

Bohuˇzel t´ım, jak jsou UIViewControllery ve schránce (berou vˇsechny doteky rodiˇcovského UIViewControlleru a zpracovávaj´ı si je samy), je problém dosáhnout posouván´ı celé obrazovky. Trikem je pˇrepoˇc´ıst velikost obsahu (UIViewControlleru ve schránce), a nastavit tak schránce poˇzadovanou velikost. UIScrollView se bohuˇzel také neum´ı sám od sebe se roztahovat dle obsahu, proto je nutné i jemu nastavit velikost. - ( void ) updateScrollViewWithView :( UIView *) view { /* Vypocte se velikost noveho obsahu . */ CGSize size = [ view sizeThatFits : CGSizeMake ( _container . frame . size . width , CGFLOAT_MAX )]; /* Spocte se celkova velikost i s hlavickou a schrankou */ CGFloat height = _container . frame . origin . y + view . frame . size . height ; /* Pokud je velikost mensi nez cela obrazovka , nastavi se velikost + 1 */ if ( height <= _scrollView . frame . size . height ) height = _scrollView . frame . size . height + 1;

54


(a) Obrazovka pro nalezen´ı maj´ ak˚ u.


(b) Nalezené majáky.

(d) Obrazovka s hodnocen´ım uˇzivatel˚ u.

(c) Informace o instituci.

(e) Zobrazen´ı polohy instituce.

Obrázek 5.7: Obrazovka zobrazuj´ıc´ı informace o instituci. /* Upravy se velikost UIScrollView */ _scrollView . contentSize = CGSizeMake ( _scrollView . frame . size . width , height ); /* Upravy se velikost containeru */

55



CGRect frame = _container . frame ; frame . size . height = height ; _container . frame = frame ; }

Zmˇen´ı-li se ve schránce UIViewController, tak nov´ y UIViewController zavolá nad sv´ ym rodiˇcem metodu updateScrollViewWithView:, která zjist´ı velikost jeho hlavn´ıho UIView podle metody sizeThatFits:. Pokud je velikost nového UIViewControlleru, respektive jeho UIView, menˇs´ı neˇz velikost obrazovky, pouˇzije se velikost obrazovky zv´ yˇsená o jeden pixel. T´ım se zajist´ı 4 tzv. bounce efekt“ . Poté se jiˇz nastav´ı nová velikost obsahu UIScrollView ” a velikost schránky.

Nalezen´ı maj´ aku podle lokalizaˇ cn´ı sluˇ zby Jednou z metod nalezen´ı majáku je pomoc´ı lokalizaˇcn´ı sluˇzby. Pokud uˇzivatel chce nalézt maják dle jeho lokace, mus´ı stisknout ikonu lokalizaˇcn´ı sluˇzby (viz Obr. 5.7a) a zobraz´ı se mu nové okno (viz Obr. 5.8), které nalezne majáky v bl´ızkosti uˇzivatele.

Obrázek 5.8: Nalezen´ı majáku dle lokalizaˇcn´ı sluˇzby. K tomu byl vyuˇzit objekt MKMapView, kter´ y poskytuje mapové roz4

Obsah, kter´ y se vejde do UIScrollView, nen´ı jiˇz posunuteln´ y. Bounce efekt umoˇzn ˇuje posouvat i nad t´ımto obsahem. Ve finále to potom vypadá, jakoby obsah skákal.

56



hran´ı aplikac´ım. MKMapView je nastaven na sledován´ı uˇzivatelské polohy. V bl´ızkosti 20 metr˚ u se zaznamená informaˇcn´ı maják, kter´ y se zobraz´ı uˇzivateli v UITableView tabulce pod mapou. Vˇsechny majáky, kromˇe tˇech s nulov´ ymi zemˇepisn´ ymi souˇradnicemi, se zobraz´ı uˇzivateli na mapˇe. MKMapView pouˇz´ıvá protokol MKMapViewDelegate, kter´ y v pˇr´ıpadˇe zmˇeny polohy uˇzivatele notifikuje metodu mapView:mapView didUpdateUserLocation:. V této metodˇe se zkontroluje vzdálenost se vˇsemi informaˇcn´ımi majáky. Pokud bude maják v bl´ızkosti 20 metr˚ u, zobraz´ı se v tabulce a zbarv´ı se do zelené barvy. Majáky ve vzdálenosti vˇetˇs´ı jak 20 metr˚ u jsou zbarveny ˇcervenˇe a z tabulky smazány. Zobrazen´ ym maják˚ um na mapˇe se ˇr´ıká anotace a jsou instanc´ı tˇr´ıdy MKAnnotationView. Pro zmˇenu jejich barev je nutné vˇsechny anotace z mapy odebrat a následnˇe znovu pˇridat. Tato zmˇena se dˇeje pˇri kaˇzdé zmˇenˇe polohy uˇzivatele. T´ım, ˇze se anotace odeberou a znovu pˇridaj´ı, se zavolá metoda mapView:viewForAnnotation:, ve které se dle vzdálenosti nastav´ı barvy maják˚ u. Hledán´ı maják˚ u dle polohy je povoleno, aˇz kdyˇz je pˇresnost GPS vertikálnˇe a horizontálnˇe 10 metr˚ u. Kdyby nebyla uplatnˇena tato podm´ınka, pˇri zapnut´ı GPS kol´ısá poloha uˇzivatele a nab´ıdne majáky uˇzivateli, i kdyˇz se u nich zrovna nenacház´ı. To samé plat´ı, kdyˇz se vypne displej zaˇr´ızen´ı, na pozad´ı bˇeˇz´ı zjiˇst’ován´ı souˇcasné polohy , které je jiˇz pˇresné a naleze majáky, i kdyˇz se u nich uˇzivatel právˇe nenacház´ı. Aby se tomuhle pˇredeˇslo, je nastaven delegát MKMapView na nil pˇri vypnut´ı displeje. Pˇri zapnut´ı displeje zase naopak je delegát MKMapView nastaven pro sledován´ı polohy. - ( void ) viewDidLoad { [[ NSNotificationCenter defaultCenter ] addObserver : self selector : @selector ( applicationWillResign ) name : UIApplicationWillResignActiveNotification object : NULL ];

[[ NSNotificationCenter defaultCenter ] addObserver : self selector : @selector ( applicationWillEnterForeground ) name : UIApplicationWillEnterForegroundNotification object : NULL ]; } - ( void ) applicationWillResign { _mapView . delegate = nil ; }

57



- ( void ) applicationWillEnterForeground { _mapView . delegate = self ; }

Aby se zachytila událost zapnut´ı a vypnut´ı displeje, je nutné si zaregistrovat observer na UIApplicationWillResignActiveNotification pro detekci vypnut´ı displeje a UIApplicationWillEnterForegroundNotification pro detekci zapnut´ı displeje. Operaˇcn´ı systém iOS nepodporuje z´ıskán´ı informac´ı o okoln´ıch WiFi a Bluetooth s´ıt´ıch, které by mohly pomoci urˇcen´ı polohy uvnitˇr budov. Existuj´ı knihovny, které dokáˇz´ı z´ıskat seznam okoln´ıch WiFi a Bluetooth vys´ılaˇc˚ u, ale vyuˇz´ıvaj´ı neokomentované privátn´ı API, které Apple nepovoluje ve sv´ ych aplikac´ıch. ˇ Cten´ ı QR k´ odu a 3-m´ıstn´ eho kl´ıˇ ce Dalˇs´ı metodou nalezen´ı majáku je pˇreˇcten´ı QR kódu (viz Obr. 5.9a). K tomu je pouˇzita knihovna ZBarSDK (viz 5.3.2). Knihovna ZbarSDK rozkóduje obrázek a unikátn´ı identifikátor majáku se porovná s uloˇzen´ ymi majáky, pokud se najde shoda, nab´ıdne se uˇzivateli pˇr´ısluˇsn´ y maják. Dalˇs´ı metoda nalezen´ı je pomoc´ı 3-m´ıstného kl´ıˇce (viz Obr. 5.9b). K tomu je vyuˇzito textové pole UITextField. Ten vyuˇz´ıvá protokol UITextFieldDelegate a implementac´ı jeho metody textChanged: se zjiˇst’uje velikost zadaného ˇretˇezce. Pokud je velikost ˇretˇezce rovná tˇrem, porovná se kl´ıˇc s majáky. Pokud se najde shoda, uˇzivateli se nab´ıdne maják pˇr´ısluˇsej´ıc´ı kl´ıˇci.

Zobrazen´ı obsahu maj´ aku Obsah majáku se zobraz´ı po jeho nalezen´ı. Obsahem m˚ uˇze b´ yt text, odkaz, obrázky a video z YouTube5 . Obsah je vytváˇren dynamicky, tud´ıˇz je moˇzné libovolnˇe kombinovat vˇsechny typy obsahu. Systém Tagiee ale jako prvn´ı pos´ılá sadu obrázk˚ u, pak kombinuje hypertextov´ y odkaz s textem. Text m˚ uˇze m´ıt nadpis a odstavec. Nakonec je zobrazeno video z Youtube. 5

Sluˇzba pro sd´ılen´ı videa.

58



(a) Nalezen´ı maj´ aku pomoc´ı QR k´ odu

(b) Nalezen´ı majáku pomoc´ı 3-m´ıstného kl´ıˇce

Obrázek 5.9: Dalˇs´ı moˇznosti nalezen´ı maják˚ u. Odkaz je ˇreˇsen pomoc´ı tlaˇc´ıtka UIButton. Text je zobrazen pomoc´ı textového popisku BeaconContentLabel oddˇedˇené od UILabel. Od verze iOS 6.0 lze vyuˇz´ıt k zobrazen´ı textu NSAttributedString. NSAttributedString je ˇretˇezec, kter´ y m˚ uˇze b´ yt obohacen o r˚ uzné formátován´ı. BeaconContentLabel pˇretˇeˇzuje metodu setAttributedText:, která nastav´ı potˇrebné parametry textu. -( void ) setAttributedText :( NSAttributedString *) attributedText { /* Vytvoreni odstavce */ NSMutableParagraphStyle * paragraph = [[ NSMutableParagraphStyle alloc ] init ]; /* Zarovnani do bloku */ paragraph . alignment = NSTextAlignmentJustified ; /* Atributovany retezec */ NSMutableAttributedString * attributtedString = [[ NSMutableAttributedString alloc ] initWithAttributedString : attributedText ]; [ attributtedString addAttributes : @ { NSParagraphStyleAttributeName : paragraph } range : NSMakeRange (0 , [ attributtedString length ])]; [ super setAttributedText : attributtedString ]; /* Libovolny pocet radek , zalamovani slov */

59



self . numberOfLines = 0; self . lineBreakMode = NSLineBreakByWordWrapping ; /* Prepocitat a nastavit */ [ self sizeToFit ]; }

Obrázky jsou zobrazeny v horizontáln´ım UIScrollView, ten má pod sebou UIPageControl, kter´ y stránkuje jednotlivé obrázky. Po kliknut´ı na obrázek se otevˇre galerie MWPhotoBrowser (viz 5.3.4). Obrázky jsou naˇc´ıtány skrze AFNetworking (viz 5.3.1). Jiˇz jednou staˇzen´ y obrázek se uloˇz´ı do Core Data, tud´ıˇz, pokud si uˇzivatel znovu zobraz´ı obsah, obrázky se naˇctou z Core Data m´ısto z Internetu. Youtube video je zobrazeno jako webové okno v UIWebView následovnˇe: NSString * urlString = @ " http :// www . youtube . com / embed / ID " ; NSString * html = [ NSString stringWithFormat : @ " < html > < head > < style type = ’ text / css ’> body { background - color : transparent ; color : white ;} < body style = ’ margin :0 ’ > < iframe width = ’% f ’ height = ’% f ’ src = ’% @ ’ frameborder = ’0 ’ allowfullscreen > " , 300.0 , 200.0 , urlString ]; UIWebView * videoView = [[ UIWebView alloc ] initWithFrame : CGRectMake (x , y , 300 , 200)]; [ videoView loadHTMLString : html baseURL : nil ]; [ self . scrollView addSubview : videoView ];

Do UIWebView je vloˇzena stránka, kde pˇres tag <iframe> je spuˇstˇeno embedované video z Youtube.

Administr´ atorsk´ aˇ c´ ast V rámci pˇredmˇetu KIV/MKZ vznikla administrátorská ˇca´st aplikace (viz Obr. 5.10). K administrátorské ˇca´sti se lze dostat z u ´vodn´ı obrazovky tlaˇc´ıtkem v navigaˇcn´ım menu. Administrátorská ˇca´st umoˇzn ˇuje z´ıskat pˇrehled o instituc´ıch, majác´ıch, hodnocen´ı uˇzivatel˚ u a umoˇzn ˇuje pˇridán´ı souˇcasné polohy do systému Tagiee. Souˇcasná poloha je pouˇzitelná ve webovém prostˇred´ı systému Tagiee jako poloha majáku. Pˇr´ıstup do administrátorské ˇcásti je povolen pouze pˇrihláˇsen´ ym uˇzivatel˚ um. Pˇrihlaˇsovac´ı u ´daje jsou stejné jako v pˇr´ıpadˇe webového prostˇred´ı systému Tagiee. Zamˇestnanec instituce má pˇr´ıstup pouze ke sv´ ym vytvoˇren´ ym instituc´ım a maják˚ um. 60



(a) Seznam instituc´ı.

(b) Seznam maják˚ u.

Obrázek 5.10: Administrátorská ˇca´st aplikace Tagiee.

5.4.4

Verze pro iPad

V rámci oborového projektu KIV/OPSWI byla vytvoˇrena verze pro zaˇr´ızen´ı iPad. Tˇr´ıdy pro práci s databáz´ı a komunikaci s Web API jsou spoleˇcné s verz´ı pro iPhone. Grafické komponenty jako jsou informace o instituci, obrazovky pro nalezen´ı maják˚ u, seznam nalezen´ ych maják˚ u, hodnocen´ı a obsah maják˚ u, byly kompletnˇe pˇrevzaty z verze pro iPhone. Uspoˇrádán´ı komponent se zmˇenilo a optimalizovalo pro vˇetˇs´ı displej tabletu iPad (viz Obr. 5.11). Základem je UINavigationViewController, seznam nejbliˇzˇs´ıch instituc´ı je zobrazen pomoc´ı UIViewCollectionViewController, kter´ y zobrazuje narozd´ıl od UITableViewControlleru buˇ nky do mˇr´ıˇzky. Pˇri pˇrihláˇsen´ı k instituci jsou na jedné obrazovce (viz Obr. 5.12) zobrazeny informace o instituci, poloha instituce, hodnocen´ı instituce, seznam nalezen´ ych maják˚ u a moˇznosti pro nalezen´ı maják˚ u. Nalezen´ı maják˚ u pomoc´ı GPS, QR kódu a kl´ıˇce jsou identické s verz´ı pro iPhone, s t´ım ˇze m´ısto nového okna je pouˇzito modáln´ı okno, aby nedocházelo ke zbyteˇcnému pˇrekreslován´ı komponent. Verze pro iPad nebude zaˇclenˇena v prvn´ı verzi klientské aplikace do obchodu AppStore, ale vyjde jako aktualizace aplikace.

61



Obrázek 5.11: Rozloˇzen´ı grafick´ ych komponent pro zaˇr´ızen´ı iPad.

Obrázek 5.12: Obrazovka instituce na zaˇr´ızen´ı iPad.

5.4.5

Notifikace syst´ emu Tagiee

Klientská aplikace notifikuje systém Tagiee o akc´ıch uˇzivatele. Akcemi jsou jiˇz zm´ınˇené nalezen´ı majáku uˇzivatelem a pˇrihláˇsen´ı k instituci. Komunikace prob´ıhá skrze Web API. V pˇr´ıpadˇe nedostupnosti pˇripojen´ı se uloˇz´ı tato notifikace a odeˇsle se aˇz v pˇr´ıpadˇe znovu zapnut´ı aplikace, tedy v metodˇe ap62


Publikován´ı aplikace

plication:didFinishLaunchingWithOptions:. Pro uloˇzen´ı notifikac´ı se vyuˇz´ıvá Core Data u ´loˇziˇstˇe.

5.5

Publikov´ an´ı aplikace

Klientská aplikace byla odeslána na schválen´ı do digitáln´ıho obchodu s aplikacemi App Store. (viz 5.5.1).

5.5.1

App Store

App Store je obchod s digitáln´ım obsahem pro platformu iOS. V lednu 2013 bylo v obchodu dostupn´ ych v´ıce neˇz 775 tis´ıc aplikac´ı a to ve 119 zem´ı svˇeta. Aby aplikace mohla b´ yt zveˇrejnˇena v obchodˇe, mus´ı splˇ novat podm´ınky obchodu App Store. Vybrané podm´ınky t´ ykaj´ıc´ı se klientské aplikace Tagiee jsou v pˇr´ıloze (viz pˇr´ıloha A.2).

5.5.2

iOS Developer Program

K publikován´ı aplikace do obchodu App Store je nutné si pˇredplatit iOS Developer Program za 99 dolar˚ u roˇcnˇe. Existuje i iOS Developer Enterprise Program za 299 dolar˚ u roˇcnˇe, kter´ y je urˇcen spoleˇcnostem a umoˇzn ˇuje kromˇe klasické distribuce distribuovat aplikace pomoc´ı vlastn´ıho obchodu urˇceného jen pro zamˇestnance spoleˇcnosti. Pokud si uˇzivatelé koup´ı aplikaci, Apple si bere provizi 30% a zbyl´ ych 70% jde v´ yvojáˇri. Stejné je to i s transakcemi uvnitˇr aplikace, Apple si nárokuje také provizi 30%.

5.5.3

iTunes Connect

Po pˇredplacen´ı iOS Developer Programu dostane v´ yvojáˇr pˇr´ıstup do iTunes Connect, kter´ y dovol´ı v´ yvojáˇri nahrát svou aplikaci do obchodu App Store. Sekce iTunes Connect poskytuje informace o aplikaci, poˇcet jej´ıho staˇzen´ı, 63



poˇcet nákup˚ u, informace o platbách a moˇznost editován´ı popisku aplikace v App Store.

5.5.4

Pˇ r´ıprava certifik´ at˚ u

Pro odeslán´ı aplikace do AppStore je nutné v Member Center pod Identifiers zaloˇzit App ID. App ID je unikátn´ı ˇretˇezec specifikuj´ıc´ı aplikaci. Klientská aplikace má com.tagiee.Tagiee. Pokud je App ID nastavené, vytvoˇr´ı se v Provisioning Profiles Distribution certifikát pro odeslán´ı aplikace do iTunes Connect.

5.5.5

Vytvoˇ ren´ı aplikace v iTunes Connect

V iTunes Connect se vytvoˇr´ı aplikace a vypln´ı se informace v následuj´ıc´ım poˇrad´ı: • V´ ychoz´ı jazyk aplikace. • Název aplikace. • SKU Number - Unikátn´ı identifikátor aplikace. • Bundle ID - Identifikátor, kter´ y umoˇzn´ı budouc´ı aktualizace aplikace. Bundle ID se bere z vytvoˇreného App ID. • Kdy bude dostupná aplikace v App Store. • Cenová politika. • Verze aplikace. Mus´ı b´ yt 1.0 a vyˇsˇs´ı. • Copyright, kategorie v App Store, vˇekové omezen´ı. • Metadata aplikace - Popisek, kl´ıˇcová slova( podle kter´ ych se bude aplikace hledat v App Store), odkaz na podporu. • Kontaktn´ı informace na v´ yvojáˇre. • Nahrán´ı ikony a ukázkov´ ych obrázk˚ u z aplikace.

64


5.5.6


Nahr´ an´ı aplikace

Pokud je jiˇz aplikace hotová (naprogramovaná), uˇz j´ı zb´ yvá pouze nahrát do iTunes Connect na schválen´ı. V iTunes Connect se zmáˇckne tlaˇc´ıtko Ready to Submit. V Xcode se vybere z menu Product->Archive. Otevˇre se Organizer, ve kterém je tlaˇc´ıtko Distribute.... Stisknut´ım tohoto tlaˇc´ıtka se otevˇre dialogové okno, ve kterém je potˇreba vybrat Submit to the App Store. T´ım se nahraje aplikace k iTunes Connect.

5.5.7

Schvalovac´ı proces

Odeslaná aplikace má sv˚ uj schvalovac´ı proces. Schvalovac´ı proces má nˇekolik etap. Z tˇechto etap vyberu jen ty, které se t´ ykaj´ı odeslán´ı aplikace skrze Xcode a klientské aplikace Tagiee. • Prepare for Upload - Prvn´ı stav aplikace, ˇceká se na vyplnˇen´ı korektn´ıch metadat (kl´ıˇcová slova, popis aplikace, ...) o aplikaci. • Waiting for Upload - Metadata jsou vyplnˇena, je nutné nahrát aplikaci skrze Xcode. • Waiting for Review - Aplikace je odeslána, ale d´ıky velkému mnoˇzstv´ı odeslan´ ych aplikac´ı ˇceká ve frontˇe na schválen´ı. Tato operace trvá obvykle t´ yden aˇz dva. • In Review - Aplikace je ve schvalovac´ım procesu, zamˇestnanci Applu testuj´ı aplikaci a provád´ı na n´ı automatizované testy. Apple udává statistiku schvalován´ı (viz Obr. 5.13). • Pending Developer Release - Aplikace byla schválena, ˇceká se na povolen´ı v´ yvojáˇre, aby um´ıstil svou aplikaci do obchodu. • Processing for App Store - Aplikace byla povolena v´ yvojáˇrem, aplikace se indexuje do App Store. Aplikace by se mˇela objevit v App Store do 24 hodin. • Ready for Sale - Aplikace byla u ´spˇeˇsnˇe um´ıstˇena v App Store. • Rejected - Aplikace nevyhovuje podm´ınkám obchodu App Store a je vrácena na pˇrepracován´ı. Pracovn´ıci Apple kontaktuj´ı v´ yvojáˇre pomoc´ı emailu nebo telefonicky. 65



• Metadata Rejected - Aplikace byla zam´ıtnuta kv˚ uli ˇspatn´ ym metadat˚ um (ˇspatnˇe vyplnˇen´ y popis aplikace, kl´ıˇcová slova apod). • Removed from Sale - Aplikace byla vyˇrazena z obchodu kv˚ uli novˇe ustanoven´ ym podm´ınkám. • Missing Screenshot - Obrázky aplikace pro App Store nesplˇ nuj´ı podm´ınky.

Obrázek 5.13: Statistika, kolik odeslan´ ych aplikac´ı na schválen´ı je vyˇr´ızeno.

5.5.8

Schv´ alen´ı aplikace Tagiee

V prvn´ım schvalovac´ım kole nebyla aplikace schválena pro vstup do obchodu App Store z d˚ uvodu nepochopen´ı u ´ˇcelu aplikace hodnot´ıc´ı komis´ı. Funkˇcnost aplikace je závislá na poloze uˇzivatele. Doporuˇcená poloha pro testován´ı aplikace byla uvedena ve zprávˇe pro komisi, avˇsak komise vyˇzaduje video, které demonstruje funkˇcnost systému Tagiee. Celá zpráva komise: We began the review of your app but are not able to continue because we need access to a video that demonstrates your app in use. You can provide a link to a demo video of your app in iTunes Connect. Go to ”Manage Your Applications,”select your app, click ”Edit Information,”then scroll to the ”Review Notes”section and add the demonstration video access details. Na základˇe poˇzadavk˚ u komise bylo vytvoˇreno video a odesláno na schválen´ı. V dobˇe odevzdán´ı diplomové práce je klientská aplikace ve schvalovac´ım procesu.

66

6 Ovˇeˇren´ı funkcionality Systém Tagiee byl ovˇeˇren na vytvoˇrené instituci Západoˇceské univerzity v Plzni a jej´ı prohl´ıdkou pomoc´ı mobiln´ıch aplikac´ı.

6.1

Syst´ em Tagiee

Na Západoˇceské univerzitˇe bylo vytvoˇreno 12 maják˚ u. Kaˇzd´ y maják je detekovateln´ y pomoc´ı QR kódu, unikátn´ıho kl´ıˇce a NFC tagu. Majáky po nalezen´ı zobraz´ı informace v podobˇe text˚ u, obrázk˚ u, odkaz˚ u ˇci vide´ı o daném m´ıstˇe. Seznam maják˚ u je následuj´ıc´ı: • Fakulta aplikovan´ ych vˇ ed - Fakulta aplikovan´ ych vˇed se nacház´ı v budovˇe na Univerzitn´ı 22 a lze ji naj´ıt i pomoc´ı GPS lokace. • Katedra tˇ elesn´ e v´ ychovy a sportu - Katedra tˇelesné v´ ychovy a sportu se nacház´ı v budovˇe na Univerzitn´ı 14 a lze ji také nalézt pomoc´ı GPS lokace a WiFi s´ıt´ı. • Fakulta elektrotechnick´ a - Fakulta elektronická se nacház´ı v budovˇe na Univerzitn´ı 26 a téˇz ji lze nalézt pomoc´ı GPS souˇradnic. ˇ Bory - Menza Bory je um´ıstˇena na univerzitn´ım troj´ • Menza ZCU uheln´ıku a lze ji také detekovat pomoc´ı GPS polohy. ˇ Koll´ • Menza ZCU arova - Menza Kollárova je na rozd´ıl od pˇredchoz´ıch maják˚ u um´ıstˇena v centru mˇesta a ne v univerzitn´ım areálu. Lze ji také nalézt pomoc´ı GPS polohy na adrese Kollárova 19 v Plzni. • Knihovna Bory - Knihovna bory je um´ıstˇena v univerzitn´ım areálu na adrese Univerzitn´ı 18 a je nalezitelná také pomoc´ı GPS souˇradnic. • Katedra informatiky a v´ ypoˇ cetn´ı techniky - Katedra informatiky je v budovˇe Fakulty aplikovan´ ych vˇed ve 4tém patˇre. • Uˇ cebna poˇ c´ıtaˇ cov´ e grafiky - Uˇcebna poˇc´ıtaˇcové grafiky je ve ˇctvrtém patˇre katedry informatiky a v´ ypoˇcetn´ı techniky. Uˇcebna je detekovatelná pomoc´ı WiFi s´ıt´ı.

67

Ovˇeˇren´ı funkcionality

Webové prostˇred´ı

• Uˇ cebna poˇ c´ıtaˇ cov´ ych s´ıt´ı - Uˇcebna poˇc´ıtaˇcov´ ych s´ıt´ı je ve ˇctvrtém patˇre katedry informatiky a v´ ypoˇcetn´ı techniky. Uˇcebna je detekovatelná pomoc´ı WiFi s´ıt´ı. • EEG ERP uˇ cebna - Uˇcebna EEG a ERP je ve ˇctvrtém patˇre katedry informatiky a v´ ypoˇcetn´ı techniky. Uˇcebna je detekovatelná pomoc´ı WiFi s´ıt´ı. • Laboratoˇ r digit´ aln´ı fabriky - Laboratoˇr digitáln´ı fabriky je ve tˇret´ım patˇre katedry pr˚ umyslového inˇzen´ yrstv´ı a managmentu. Uˇcebna je detekovatelná pomoc´ı WiFi s´ıt´ı. • Kancel´ aˇ r UK422 - Kanceláˇr Doc. Ing. Pˇremka Brady MSc. PhD. je ve ˇctvrtém patˇre katedry informatiky a v´ ypoˇcetn´ı techniky. Uˇcebna je detekovatelná pomoc´ı WiFi a Bluetooth s´ıt´ı. Vytvoˇrená instituce umoˇzn´ı novˇe pˇr´ıchoz´ım student˚ um k orientaci v area´lu Západoˇceské univerzity. Návˇstˇevn´ıci z´ıskaj´ı informace o jednotliv´ ych budovách Univerzity. Pˇri návˇstˇevˇe menz se uˇzivateli zobraz´ı odkaz na j´ıdeln´ıˇcek a pˇri návˇstˇevˇe knihovny odkaz pro vyhledáván´ı knih apod.

6.1.1

Mapa maj´ ak˚ u

Na obrázku (viz Obr. 6.1) je mapa vˇsech maják˚ u, které jsou detekovatelné pomoc´ı GPS souˇradnic.

6.2

Webov´ e prostˇ red´ı

Instituce a majáky byli pˇridány pomoc´ı webového prostˇred´ı na adrese tagiee.com. Webové prostˇred´ı bylo testováno na následuj´ıc´ıch prohl´ıˇzeˇc´ıch. • Safari 6.0.3 - OS X 10.8.3 • Chrome 25 - OS X 10.8.3 • Opera 12.15 - OS X 10.8.3 • IE 10 - Windows 7 SP1 x64 68


Klientská aplikace Tagiee

ˇ naleziteln´ Obrázek 6.1: Mapa maják˚ u instituce ZCU ych pomoc´ı GPS souˇradnic.

6.2.1

Statistiky

Systém sb´ırá statistiky o vyuˇz´ıvanosti instituce Západoˇceské univerzity (viz Obr. 6.2). Statistiky byly sesb´ırány za 20 dn´ı existence instituce. Statistiky jsou aktuáln´ı k datu 14.kvˇetna 2013. Dalˇs´ımi statistikami jsou koláˇcové informace o majác´ıch, tedy procentua´ln´ı nalezen´ı maják˚ u (viz Obr. 6.3a), pod´ıl technologi´ı, které byly vyuˇzity pro nalezen´ı maják˚ u (viz Obr. 6.3b) a pod´ıl mobiln´ıch platforem (viz Obr. 6.3c).

6.3

Klientsk´ a aplikace Tagiee

Mobiln´ı aplikace Tagiee byla ovˇeˇrena na vytvoˇrené instituci Západoˇceské univerzity (viz 6.1). Postupnˇe byly nalezeny vˇsechny majáky, vˇsemi detekovateln´ ymi moˇznostmi, které systém iOS nab´ız´ı, tedy pomoc´ı zemˇepisné polohy, kl´ıˇce a QR kódu. Zbylé technologie NFC, Wifi a Bluetooth byly vyzkouˇseny na platformˇe Android v diplomové práci Komunikace a identifikace infor” maˇcn´ıch maják˚ u“ vypracované Bc. Jiˇr´ı Hromádkou. 69



Obrázek 6.2: Statistiky o vyuˇzit´ı Západoˇceské univerzity skrze systém Tagiee.

70



(a) Statistika maják˚ u.

(b) Statistiky o vyuˇzit´ı technologi´ı pro detekov´ an´ı maj´ ak˚ u.

(c) Pod´ıl platforem.

Obrázek 6.3: Koláˇcové statistiky. Klientská aplikace byla spuˇstˇena a otestována na zaˇr´ızen´ı iPhone 4, 4S, 5 a iPad 2. Testován´ı probˇehlo i bez pˇr´ıstupu k internetu a bez podpory lokalizaˇcn´ıch sluˇzeb. V pˇr´ıpadˇe vypnut´ı lokalizaˇcn´ı sluˇzby se dá pˇrihlásit k Západoˇceské univerzitˇe pomoc´ı unikátn´ıho identifikátoru zcu“. Pˇri nedo” stupnosti internetového pˇripojen´ı se ukládá aktivita uˇzivatele a pˇri pˇr´ıˇst´ım zapnut´ı aplikace se uloˇzená aktivita odeˇsle systému Tagiee. Bˇehem prohl´ıdky Západoˇceské univerzity v Plzni, byly poˇr´ızeny obrázky pro ovˇeˇren´ı funkˇcnosti (viz Obr. 6.4).

71



(a) Nalezen´ a Z´ apadoˇcesk´ a instituce.

(b) Nalezen´ı maj´ aku pomoc´ı GPS.

(c) Nalezen´ı majáku pomoc´ı kl´ıˇce.

(d) Nalezen´ı majáku QR kódem.

(e) Maj´ ak katedry informatiky a v´ ypoˇcetn´ı techniky.

(f) Maj´ ak fakulty aplikovan´ ych vˇed.

(g) Informace o instituci.

(h) Seznam jiˇz nalezen´ ych maják˚ u.

Obrázek 6.4: Ovˇeˇren´ı klientské aplikace Tagiie.

72

7 Závˇer Systémy pro poskytován´ı informac´ı lze vyuˇz´ıt témˇeˇr ve vˇsech oblastech a odvˇetv´ıch. Tyto systémy umoˇzn´ı uˇzivatel˚ um z´ıskat právˇe ty informace, které potˇrebuj´ı. D´ıky rozˇs´ıˇrenosti byla vybrána mobiln´ı zaˇr´ızen´ı jako poskytovatelé tˇechto informac´ı. V´ ysledkem je univerzáln´ı systém pro poskytován´ı informac´ı Tagiee. Systém umoˇzn ˇuje skrze webové rozhran´ı zamˇestnanc˚ um instituc´ı pˇridat svou instituci do systému spolu s informaˇcn´ımi majáky, které uˇzivatel˚ um ˇci návˇstˇevn´ık˚ um poskytnou informace o instituci. Návˇstˇevn´ık bude k informac´ım pˇristupovat pomoc´ı mobiln´ı aplikace. Systém Tagiee poskytuje Web API, pomoc´ı kterého mobiln´ı aplikace komunikuj´ı se systémem a z´ıskávaj´ı potˇrebná informace. Uˇzivatelé mobiln´ı aplikace mohou nacházet informaˇcn´ı majáky po celé instituci v podobˇe lokalizaˇcn´ıch sluˇzeb, WiFi, Bluetooth, NFC, QR kód˚ u a 3-m´ıstného kl´ıˇce. Spolu se systémem byla vytvoˇrena mobiln´ı aplikace Tagiee pro platformu iOS. Aplikace byla vytvoˇrená s ohledem na pravidla a podm´ınky obchodu App Store, do kterého byla odeslána na schválen´ı. Mobiln´ı aplikace umoˇzn ˇuje nalezen´ı maják˚ u pomoc´ı lokalizaˇcn´ıch sluˇzeb, QR kód˚ u a 3-m´ıstn´ ych kl´ıˇc˚ u. Nalezen´ı pomoc´ı WiFi a Bluetooth nen´ı operaˇcn´ım systémem podporováno. Ovˇeˇren´ı systému a mobiln´ı aplikace probˇehlo na vytvoˇrené instituci Západoˇceské univerzity v Plzni. Západoˇceská univerzita má 11 maják˚ u rozm´ıstˇen´ ych po areálu na Borech a v centru mˇesta. Systém by se v budoucnu dal rozˇs´ıˇrit o systém soutˇeˇz´ı. Pokud by uˇzivatel nalezl vˇsechny majáky instituce, vyplnil by kontaktn´ı u ´daje a mohl b´ yt zaˇrazen o slosován´ı cen. Nebo by mohla prob´ıhat soutˇeˇz o nejlepˇs´ı fotografii, kterou by návˇstˇevn´ık poˇr´ıdil v pr˚ ubˇehu prohl´ıdky a nahrál ji do systému skrze mobiln´ı aplikaci, kterou by pak zamˇestnanci vyhodnotili. Naopak rozˇs´ıˇren´ım aplikace by mohly b´ yt notifikace, které by zamˇestnanec instituce poslal vˇsem uˇzivatel˚ um, kteˇr´ı navˇst´ıvili instituci a informovat je o novinkách ˇci slevách.

73

Seznam obr´ azk˚ u 2.1 2.2 2.3

Mobiln´ı aplikace Hustonské Zoo . . . . . . . . . . . . . . . . . Mobiln´ı aplikace Lunchtime pro iOS . . . . . . . . . . . . . . . Mobiln´ı aplikace iZeeum pro iOS . . . . . . . . . . . . . . . .

3.1

Architektura systému Tagiee. . . . . . . . . . . . . . . . . . . 11

4.1 4.2 4.3

ˇ Zivotn´ ı cyklus presenteru v Nette. . . . . . . . . . . . . . . . . 20 Datov´ y model systému Tagiee. . . . . . . . . . . . . . . . . . . 26 Struktura webového rozhran´ı. . . . . . . . . . . . . . . . . . . 34

5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8 5.9 5.10 5.11 5.12 5.13

Pod´ıl verz´ı iOS na trhu. . . . . . . . . . . . . . . . . . . . . Ukázka MWPhoto galerie. . . . . . . . . . . . . . . . . . . . Znovu naˇcten´ı tabulky stáhnut´ım prstem. . . . . . . . . . . . Datov´ y model Core Data v aplikaci. . . . . . . . . . . . . . . Uˇzivatelské rozhran´ı mobiln´ı aplikace. . . . . . . . . . . . . . ´ Uvodn´ ı obrazovka aplikace. . . . . . . . . . . . . . . . . . . . Obrazovka zobrazuj´ıc´ı informace o instituci. . . . . . . . . . Nalezen´ı majáku dle lokalizaˇcn´ı sluˇzby. . . . . . . . . . . . . Dalˇs´ı moˇznosti nalezen´ı maják˚ u. . . . . . . . . . . . . . . . . Administrátorská ˇca´st aplikace Tagiee. . . . . . . . . . . . . Rozloˇzen´ı grafick´ ych komponent pro zaˇr´ızen´ı iPad. . . . . . . Obrazovka instituce na zaˇr´ızen´ı iPad. . . . . . . . . . . . . . Statistika, kolik odeslan´ ych aplikac´ı na schválen´ı je vyˇr´ızeno.

. . . . . . . . . . . . .

ˇ naleziteln´ Mapa maják˚ u instituce ZCU ych pomoc´ı GPS souˇradnic. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.2 Statistiky o vyuˇzit´ı Západoˇceské univerzity skrze systém Tagiee. 6.3 Koláˇcové statistiky. . . . . . . . . . . . . . . . . . . . . . . . . 6.4 Ovˇeˇren´ı klientské aplikace Tagiie. . . . . . . . . . . . . . . . .

4 6 7

43 45 46 49 53 54 55 56 59 61 62 62 66

6.1

69 70 71 72

Seznam zkratek • API, Application Programming Interface - sb´ırka procedur, funkc´ı ˇci tˇr´ıd nˇejaké knihovny (ale tˇreba i jiného programu nebo jádra operaˇcn´ıho systému), které m˚ uˇze programátor vyuˇz´ıvat. API urˇcuje, jak´ ym zp˚ usobem se funkce knihovny volaj´ı ze zdrojového kódu. • GPS, Global Positioning System - globáln´ı druˇzicov´ y polohov´ y systém s jehoˇz pomoc´ı lze urˇcit polohu s pˇresnost´ı na deset metr˚ u. • NFC, Near Field Communication - slouˇz´ı ke komunikaci mezi dvˇema zaˇr´ızen´ımi na krátkou vzdálenost. • QR k´ od - prostˇredek pro automatizovan´ y sbˇer dat. • RSS - rodina XML formát˚ u urˇcen´ ych pro ˇcten´ı novinek na webov´ ych stránkách • PMDP, Plzeˇ nské mˇestské dopravn´ı podniky, a.s. - hromadná mˇestská doprava mˇesta Plzeˇ n. • URL, Uniform Resource Locator - slouˇz´ı k pˇresné specifikaci um´ıstˇen´ı zdroj˚ u na Internetu. • WiFi - oznaˇcen´ı mnoˇziny standard˚ u IEEE 802.11 popisuj´ıc´ı bezdrátovou komunikaci v poˇc´ıtaˇcové s´ıti. • HTTP, Hypertext Transfer Protocol - internetov´ y protokol urˇcen´ y pro v´ ymˇenu hypertextov´ ych dokument˚ u ve formátu HTML • PHP, Hypertext Preprocessor - je skriptovac´ı programovac´ı jazyk. • HTML, HyperText Markup Language - je znaˇckovac´ı jazyk pro hypertext. Je hlavn´ım z jazyk˚ u pro vytváˇren´ı stránek v systému World Wide Web, kter´ y umoˇzn ˇuje publikaci dokument˚ u na Internetu.

• CSS, Cascading Style Sheets - jazyk pro popis zp˚ usobu zobrazen´ı stránek napsan´ ych v jazyc´ıch HTML, XHTML nebo XML. ˇ • SRBD, Systém ˇr´ızen´ı báze dat - software zajiˇst’uj´ıc´ı práci s databáz´ı. • AJAX, Asynchronous JavaScript and XML je obecné oznaˇcen´ı pro technologie v´ yvoje interaktivn´ıch webov´ ych aplikac´ı, které mˇen´ı obsah sv´ ych stránek bez nutnosti jejich znovunaˇc´ıtán´ı. • MVC, Model-View-Controller rozdˇeluje datovou vrstvu, ˇr´ıd´ıc´ı logiku a uˇzivatelské rozhran´ı do tˇr´ı nezávisl´ ych komponent. • MVP, Model-View-Presenter - MVP je podobná architektuˇre MVC. Obˇe architektury se liˇs´ı hlavnˇe v u ´loze jejich centráln´ıho kamene, tedy Presenter × Controller. Presenter hraje ˇcistˇe roli prostˇredn´ıka, kter´ y jen volá model a v´ ysledky pˇredává view, kdeˇzto Controller má nav´ıc na starosti i nˇekteré události uˇzivatelského rozhran´ı. • XSS, Cross-Site Scripting je metoda naruˇsen´ı webov´ ych stránek zneu´ cn´ık pak dokáˇze do stránky podstrˇcit ˇz´ıvaj´ıc´ı neoˇsetˇren´ ych v´ ystup˚ u. Utoˇ sv˚ uj vlastn´ı kód a t´ım m˚ uˇze stránku pozmˇenit nebo dokonce z´ıskat citlivé u ´daje o návˇstˇevn´ıc´ıch. • XML, Extensible Markup Language - obecn´ y znaˇckovac´ı jazyk. Jazyk je urˇcen pˇredevˇs´ım pro v´ ymˇenu dat mezi aplikacemi a pro publikován´ı dokument˚ u, u kter´ ych popisuje strukturu z hlediska vˇecného obsahu jednotliv´ ych ˇca´st´ı, nezab´ yvá se vzhledem. • JSON, JavaScript Object Notation - odlehˇcen´ y formát pro v´ ymˇenu dat. Je jednoduˇse ˇciteln´ y i zapisovateln´ y ˇclovˇekem a snadno analyzovateln´ y i generovateln´ y strojovˇe. • SQL, Structured Query Language - dotazovac´ı jazyk pouˇz´ıvan´ y pro práci s daty v relaˇcn´ıch databáz´ıch. • DOM, Document Object Model - je objektovˇe orientovaná reprezentace XML nebo HTML dokumentu • UI, User Interface - uˇzivatelské rozhran´ı (grafické komponenty, okna). • UIID, Unique Institution ID - unikátn´ı identifikátor instituce v systému Tagiee. • UBID, Unique Beacon ID - unikátn´ı identifikátor majáku v systému Tagiee.

• UDID, Unique Device ID - unikátn´ı identifikátor zaˇr´ızen´ı v systému Tagiee. • BLOBs, Binary Large OBjects - objemná data napˇr´ıklad obrázky nebo zvuky. • MAC adresa, Media Access Control - jedineˇcn´ y identifikátor s´ıt’ového zaˇr´ızen´ı.

Literatura [afn()] AFNetworking [online]. [cit. 10.5.2013]. https://github.com/AFNetworking/AFNetworking. [cha()] Google Chart Tools [online]. [cit. 10.5.2013]. https://developers.google.com/chart/. [dyr()] DYRateView [online]. [cit. 10.5.2013]. https://github.com/dyang/DYRateView.

Dostupné

z:

Dostupné z: Dostupné

z:

[ecg()] Draw charts with quartz2d for iPhone and iPod [online]. [cit. 10.5.2013]. Dostupné z: http://code.google.com/p/ecgraph/. [ego()] EGOTableViewPullRefresh [online]. [cit. 10.5.2013]. Dostupné z: https://github.com/enormego/EGOTableViewPullRefresh. [hus()] Huston Zoo [online]. [cit. 20.4.2013]. http://www.houstonzoo.org/about-the-zoo/. [ios()] Develop Apps for iOS [online]. [cit. 20.4.2013]. https://developer.apple.com/technologies/ios/.

Dostupné

z:

Dostupné z:

[ize()] iZeeum [online]. [cit. 20.4.2013]. Dostupné z: http://www.izeeum.com. [jcr()] JCrop [online]. [cit. 10.5.2013]. Dostupné z: http://www.jcrop.com. [jqu()] jQuery [online]. [cit. 10.5.2013]. Dostupné z: http://jquery.com. [jso()] Introducing JSON [online]. http://www.json.org.

[cit.

20.4.2013].

Dostupné

z:

[lun()] Proˇc Lunchtime ? [online]. [cit. 20.4.2013]. http://o.lunchtime.cz.

Dostupné z:

[map()] Google Maps API [online]. [cit. 10.5.2013]. https://developers.google.com/maps/.

Dostupné z:

[mwp()] MWPhotoBrowser — A simple browser [online]. [cit. 10.5.2013]. https://github.com/mwaterfall/MWPhotoBrowser.

iOS photo Dostupné z:

[mys()] Using Triggers [online]. [cit. 20.4.2013]. Dostupné http://dev.mysql.com/doc/refman/ 5.0/en/triggers.html. [net()] Nette Documentation [online]. [cit. 20.4.2013]. http://doc.nette.org. [ope()] OpenUDID [online]. [cit. 10.5.2013]. https://github.com/ylechelle/OpenUDID.

z:

Dostupné z: Dostupné

z:

[ora()] iOS Version Statistics – February 14th 2013 [online]. [cit. 20.4.2013]. Dostupné z: http://www.14oranges.com/2013/02/ios-version-statistics--february-14th-2013/. [php()] PHP (2) - Jak to funguje [online]. [cit. 20.4.2013]. Dostupné z: http://www.linuxsoft.cz/article.php?id_article=172. [stu()] Study finds smartphone users top 1B for first time ever [online]. [cit. 20.4.2013]. Dostupné z: http://appleinsider.com/articles/12/10/17/study-findssmartphone-users-top-1b-for-first-time-ever. [upl()] Uploadify [online]. [cit. http://www.uploadify.com.

10.5.2013].

[zbd()] ZBar iPhone SDK [online]. [cit. 10.5.2013]. http://zbar.sourceforge.net/iphone/sdkdoc/.

Dostupné

z:

Dostupné z:

[zoo()] Zoo Plzeˇ n v ˇc´ıslech [online]. [cit. 20.4.2013]. Dostupné z: http://www.zooplzen.cz/o-nas/zoo-v-cislech/zoo-v-cislech.aspx.

A Pˇr´ılohy A.1

Web API

V této ˇcásti uvedu plnou dokumentaci k Web API systému Tagiee. Web API má slouˇzit mobiln´ım aplikac´ım k z´ıskán´ı informac´ı o instituc´ıch a majác´ıch.

A.1.1

add_review

[ type ] = > add_review [ udid ] = > string - unikatni identifikator zarizeni [ uiid ] = > string - instituce , ke ktere se hodnoceni pridava [ review ] = > string - kratke slovni hodnoceni [ rating ] = > int [ platform ] = > string { ios | android | win } [ version ] = > string - ve formatu x . x . x ODPOVED [ status ] = > boolean

A.1.2

beacon_found

[ type ] = > device_found_beacon [ udid ] = > string - unikatni identifikator zarizeni [ uiid ] = > string - instituce , ke ktere se pozadavek tyka [ tech ] = > string { gps | qr | nfc | key } - pouzita technologie [ discovered_datetime ] = > datetime [ platform ] = > string { ios | android | win } [ version ] = > string - ve formatu x . x . x ODPOVED [ status ] = > boolean

A.1.3

device_visit_institution

[ type ] = > device_visit_institution [ udid ] = > string - unikatni identifikator zarizeni [ uiid ] = > string - instituce , ke ktere se pozadavek tyka [ discovered_datetime ] = > datetime [ platform ] = > string { ios | android | win } [ version ] = > string - ve formatu x . x . x ODPOVED

i

Pˇr´ılohy

Web API

[ status ] = > boolean

A.1.4

get_institution_by_uiid

[ type ] = > get_institution_by_uiid [ udid ] = > string - unikatni identifikator zarizeni [ uiid ] = > string - instituce , ke ktere se pozadavek tyka [ platform ] = > string { ios | android | win } [ version ] = > string - ve formatu x . x . x ODPOVED [ status ] = > boolean [ response ]= > ( [ revision ] = int [ logo ] = > string - url obrazku [ uiid ] = > string [ name ] = > string [ description ] = > string [ address ] = > string [ lat ] = > double [ lon ] = > double [ tel ] = > string [ support_email ] = > string [ prices ] = > ( [1.. N array ] [ type ] = > string [ price ] = > string [ currency ] = > string ) [ opening_hours ] = > ( [1.. N array ] [ days ] = > string [ time ] = > string ) [ allow_offline ] = > boolean [ allow_uploads ] = > boolean [ allow_reviews ] = > boolean [ number_reviews ] = > int [ rating ] = > float [ user_posted_review ] = > boolean [ beacons ] = > ( [1.. N array ] = > ( [ ubid ] = > string

ii

Pˇr´ılohy

Web API

[ name ] = > string [ description ] = > string [ lat ] = > double [ lon ] = > double [ key ] = > int [ additional ] = > ( [1.. N array ] = > - sila signalu urcena poradim ( [ tech ] = > string [ data ] = > string ) ) [ content ] = > ( [1.. N array ] = > ( [ type ] = > string { image | text | youtube | href } [ heading ] = > string [ content ] = > string [ resource_id ] = > ( [0.. N array ] = > int ) ) ) [ discovered ] = > boolean ) ) [ resources ] = > ( [1.. N array ] = > ( [ id ] = > int [ type ] = > string [ size ] = > double [ path ] = > string [ metadata ] = > ( [ width ] = > int [ height ] = > int [ caption ] = > string ) ) ) ) )

iii

Pˇr´ılohy

A.1.5

Web API

get_institution_list

[ type ] = > get_institution_list [ udid ] = > string - unikatni identifikator zarizeni [ platform ] = > string { ios | android | win } [ version ] = > string - ve formatu x . x . x [ lat ] = > double [ lon ] = > double ODPOVED [ status ] = > boolean [ response ]= > ( [1.. N array ] [ revision ] = int [ logo ] = > string - url obrazku [ uiid ] = > string [ name ] = > string [ address ] = > string [ lat ] = > double [ lon ] = > double [ rating ] = > double [ number_reviews ] = > int )

A.1.6

get_institution_revision

[ type ] = > get_institution_revision [ udid ] = > string - unikatni identifikator zarizeni [ uiid ] = > string - instituce , ke ktere se pozadavek tyka [ platform ] = > string { ios | android | win } [ version ] = > string - ve formatu x . x . x ODPOVED [ status ] = > boolean [ response ]= > ( [ revision ] = int )

A.1.7

get_reviews

[ type ] = > get_reviews [ udid ] = > string - unikatni identifikator zarizeni [ uiid ] = > string - instituce , ke ktere se pozadavek tyka [ platform ] = > string { ios | android | win } [ version ] = > string - ve formatu x . x . x

iv

Pˇr´ılohy

Web API

[ from ] = > int - spodni limit [ to ] = > int - horni limit ODPOVED [ status ] = > boolean [ response ]= > ( [1.. N array ] [ added ] = > string [ rating ] = > double [ review ] = > string )

v

Pˇr´ılohy

A.2

App Store Review Guidelines


V této sekci budou uvedeny podm´ınky vztahuj´ıc´ı se k aplikaci Tagiee pro vstup aplikace do App Store. Podm´ınky se vztahuj´ı ke dnu 5. kvˇetna 2013. Podm´ınky jsou pro u ´plnost uvedeny v origináln´ım anglickém znˇen´ı. Celé znˇen´ı App Store Review Guidelines bude uloˇzené na pˇriloˇzeném CD.

A.2.1

Functionality

• Apps that crash will be rejected • Apps that exhibit bugs will be rejected • Apps that include undocumented or hidden features inconsistent with the description of the App will be rejected • Apps that use non-public APIs will be rejected • Apps that read or write data outside its designated container area will be rejected • Apps that download code in any way or form will be rejected • Apps that install or launch other executable code will be rejected • iPhone Apps must also run on iPad without modification, at iPhone resolution, and at 2X iPhone 3GS resolution • Apps that duplicate Apps already in the App Store may be rejected, particularly if there are many of them, such as fart, burp, flashlight, and Kama Sutra Apps. • Apps that are not very useful, unique, are simply web sites bundled as Apps, or do not provide any lasting entertainment value may be rejected • Apps that are primarily marketing materials or advertisements will be rejected • Multitasking Apps may only use background services for their intended purposes: VoIP, audio playback, location, task completion, local notifications, etc. • Apps that browse the web must use the iOS WebKit framework and WebKit Javascript vi

Pˇr´ılohy


• Apps that arbitrarily restrict which users may use the App, such as by location or carrier, may be rejected • Apps must follow the iOS Data Storage Guidelines or they will be rejected

A.2.2

Metadata (name, descriptions, ratings, rankings, etc)

• Apps or metadata that mentions the name of any other mobile platform will be rejected • Apps with placeholder text will be rejected • Apps with descriptions not relevant to the application content and functionality will be rejected • App names in iTunes Connect and as displayed on a device should be similar, so as not to cause confusion • Small and large App icons should be similar, so as to not to cause confusion • Apps with App icons and screenshots that do not adhere to the 4+ age rating will be rejected • Apps with Category and Genre selections that are not appropriate for the App content will be rejected • Developers are responsible for assigning appropriate ratings to their Apps. Inappropriate ratings may be changed/deleted by Apple • Developers are responsible for assigning appropriate keywords for their Apps. Inappropriate keywords may be changed/deleted by Apple • Developers who attempt to manipulate or cheat the user reviews or chart ranking in the App Store with fake or paid reviews, or any other inappropriate methods will be removed from the iOS Developer Program • Apps which recommend that users restart their iOS device prior to installation or launch may be rejected • Apps should have all included URLs fully functional when you submit it for review, such as support and privacy policy URLs vii

Pˇr´ılohy

A.2.3


Location

• Apps that do not notify and obtain user consent before collecting, transmitting, or using location data will be rejected • Apps that use location-based APIs for automatic or autonomous control of vehicles, aircraft, or other devices will be rejected • Apps that use location-based APIs for dispatch, fleet management, or emergency services will be rejected • Location data can only be used when directly relevant to the features and services provided by the App to the user or to support approved advertising uses

A.2.4

User interface

• Apps must comply with all terms and conditions explained in the Apple iOS Human Interface Guidelines • Apps that look similar to Apps bundled on the iPhone, including the App Store, iTunes Store, and iBookstore, will be rejected • Apps that do not use system provided items, such as buttons and icons, correctly and as described in the Apple iOS Human Interface Guidelines may be rejected • Apps that create alternate desktop/home screen environments or simulate multi-App widget experiences will be rejected • Apps that alter the functions of standard switches, such as the Volume Up/Down and Ring/Silent switches, will be rejected • Apple and our customers place a high value on simple, refined, creative, well thought through interfaces. They take more work but are worth it. Apple sets a high bar. If your user interface is complex or less than very good, it may be rejected

A.2.5

Damage to device

• Apps that encourage users to use an Apple Device in a way that may cause damage to the device will be rejected • Apps that rapidly drain the device’s battery or generate excessive heat will be rejected viii

Pˇr´ılohy

A.2.6


Personal attacks

• Any App that is defamatory, offensive, mean-spirited, or likely to place the targeted individual or group in harms way will be rejected • Professional political satirists and humorists are exempt from the ban on offensive or mean-spirited commentary

A.2.7

Privacy

• Apps cannot transmit data about a user without obtaining the user’s prior permission and providing the user with access to information about how and where the data will be used • Apps that require users to share personal information, such as email address and date of birth, in order to function will be rejected • Apps that target minors for data collection will be rejected

A.2.8

Legal requirements

• Apps must comply with all legal requirements in any location where they are made available to users. It is the developer’s obligation to understand and conform to all local laws • Apps that contain false, fraudulent or misleading representations or use names or icons similar to other Apps will be rejected • Apps that solicit, promote, or encourage criminal or clearly reckless behavior will be rejected • Apps that enable illegal file sharing will be rejected • Apps that enable anonymous or prank phone calls or SMS/MMS messaging will be rejected • Developers who create Apps that surreptitiously attempt to discover user passwords or other private user data will be removed from the iOS Developer Program • Apps which contain DUI checkpoints that are not published by law enforcement agencies, or encourage and enable drunk driving, will be rejected

ix

Pˇr´ılohy

A.3

Instalaˇcn´ı pˇr´ıruˇcka systému Tagiee

Instalaˇ cn´ı pˇ r´ıruˇ cka syst´ emu Tagiee

Pro nasazen´ı systému Tagiee na server, je nutné splnit poˇzadavky na systém a dodrˇzet adresáˇrovou strukturu. Poté uˇz staˇc´ı pˇrekop´ırovat soubory a systém bude funkˇcn´ı.

A.3.1

Z´ akladn´ı poˇ zadavky

• Server dostupn´ y na adrese tagiee.com • MySQL 5.5 a novˇejˇs´ı s moˇznost´ı vytvoˇren´ı trigger˚ u. • PHP 5.3 a novˇejˇs´ı. • Schopnost vytvoˇren´ı poddomén. • Moˇznost nastaven´ı práv pro zápis a u ´pravu soubor˚ u.

A.3.2

Adres´ aˇ rov´ a struktura

Pro nasazen´ı je také nutné dodrˇzet tuto adresáˇrovou strukturu :

x

Pˇr´ılohy

A.4

Uˇzivatelská pˇr´ıruˇcka webového rozhran´ı

Uˇ zivatelsk´ a pˇ r´ıruˇ cka webov´ eho rozhran´ı

Na u ´vodn´ı stranˇe webového rozhran´ı http://tagiee.com lze vytvoˇrit u ´ˇcet do systému Tagiee, poˇzadavkem na nového uˇzivatele je zadán´ı pˇrihlaˇsovac´ıch u ´daj˚ u a informace o uˇzivateli (bydliˇstˇe a kontaktn´ı u ´daje). Po u ´spˇeˇsné registraci je moˇzno vytvoˇrit novou instituci, kde je vyˇzadován jej´ı název, unikátn´ı identifikátor a um´ıstˇen´ı. K vytvoˇren´ı instituce a jej´ı editace slouˇz´ı postrann´ı levé menu. Vytvoˇrená instituce nen´ı aktivn´ı a pro jej´ı aktivaci je nutné vyplnit tyto u ´daje: • Popis instituce. • Logo instituce. • Telefonn´ı kontakt na instituci. • Emailov´ y kontakt na instituci. • Vyplnit cen´ık. • Vyplnit otev´ırac´ı doby instituce. • Pˇridat alespoˇ n jeden maják. Pro pˇridán´ı majáku je potˇreba jeho název. Nov´ y maják téˇz nen´ı aktivn´ı a pro aktivaci se mus´ı vyplnit následuj´ıc´ı u ´daje: • Popisek majáku. • Pˇridán´ı obsahu majáku. Text a odkaz k majáku se pˇridaj´ı pˇretaˇzen´ım do stˇredového kontejneru. Obrázkov´ y obsah se nepˇretahuje, ale po kliknut´ı na obrázkov´ y element se zobraz´ı dialogové okno, jenˇz umoˇzn´ı pˇridán´ı obrázk˚ u. Pokud nejsou nahrány ˇzádné obrázky, rozhran´ı vyzve k jejich pˇridán´ı na dalˇs´ı stránce. Video pomoc´ı YouTube se pˇridá obdobnˇe jako obrázek.

xi

Pˇr´ılohy

A.5

Uˇzivatelská pˇr´ıruˇcka mobiln´ı aplikace

Uˇ zivatelsk´ a pˇ r´ıruˇ cka mobiln´ı aplikace

Instalace aplikace se provede jej´ım staˇzen´ım z digitáln´ıho obchodu App Store, aˇz tam bude uveˇrejnˇena. V dobˇe psan´ı diplomové práce jeˇstˇe nebyla aplikace schválena hodnot´ıc´ı komis´ı. Aplikace pro sv˚ uj bˇeh vyˇzaduje pˇripojen´ı k internetu. Po jej´ım zapnut´ı se zobraz´ı v´ yzva k povolen´ı lokalizaˇcn´ıch sluˇzeb uvnitˇr aplikace. Pokud jsou lokalizaˇcn´ı sluˇzby dostupné a uˇzivatel se nacház´ı ve 100 kilometrech od Plznˇe, nalezne se Západoˇceská univerzita. V pˇr´ıpadˇe nedostupnosti lokalizaˇcn´ıch sluˇzeb se lze pˇrihlásit k Západoˇceské univerzitˇe pomoc´ı jej´ıho identifikátoru zcu“. ” Pro nalezen´ı maják˚ u lze vyuˇz´ıt GPS. Informaˇcn´ı majáky se nacházej´ı v univerzitn´ım areálu na Borech. V pˇr´ıpadˇe nalezen´ı pomoc´ı QR kódu a 3m´ıstného kl´ıˇce lze vyuˇz´ıt tyto obrázky a kl´ıˇce :

(a) Maj´ ak katedry informatiky a v´ ypoˇcetn´ı techniky. Lze nalézt i pomoc´ı kl´ıˇce #169.

(b) Maják fakulty aplikovan´ ych vˇed. Lze nalézt i pomoc´ı kl´ıˇce #391.

xii

Západočeská univerzita v Plzni Fakulta aplikovaných věd Katedra informatiky a výpočetní techniky. Systém pro správu a realizaci informačních

Recommend Documents