Vysoké Učení Technické V Brně Brno University of Technology
Total Page:16
File Type:pdf, Size:1020Kb
VYSOKÉ UČENÍ TECHNICKÉ V BRNĚ BRNO UNIVERSITY OF TECHNOLOGY FAKULTA INFORMAČNÍCH TECHNOLOGIÍ ÚSTAV POČÍTAČOVÉ GRAFIKY A MULTIMÉDIÍ FACULTY OF INFORMATION TECHNOLOGY DEPARTMENT OF COMPUTER GRAPHICS AND MULTIMEDIA PRÁCE S HISTORICKÝMI MAPAMI NA MOBILNÍM ZAŘÍZENÍ DIPLOMOVÁ PRÁCE MASTER’S THESIS AUTOR PRÁCE Bc. MARTIN URBAN AUTHOR BRNO 2014 VYSOKÉ UČENÍ TECHNICKÉ V BRNĚ BRNO UNIVERSITY OF TECHNOLOGY FAKULTA INFORMAČNÍCH TECHNOLOGIÍ ÚSTAV POČÍTAČOVÉ GRAFIKY A MULTIMÉDIÍ FACULTY OF INFORMATION TECHNOLOGY DEPARTMENT OF COMPUTER GRAPHICS AND MULTIMEDIA PRÁCE S HISTORICKÝMI MAPAMI NA MOBILNÍM ZAŘÍZENÍ INTERACTION WITH OLD MAPS ON MOBILE DEVICES DIPLOMOVÁ PRÁCE MASTER’S THESIS AUTOR PRÁCE Bc. MARTIN URBAN AUTHOR VEDOUCÍ PRÁCE Ing. VÍTĚZSLAV BERAN, Ph.D. SUPERVISOR BRNO 2014 Abstrakt Cílem této diplomové práce je experimentovat s nejmodernějšími webovými technologiemi a navrhnout nový postup pro tvorbu mobilních aplikací. Díky navženým postupùm je možné vytváøet mobilní aplikace, které jsou multiplatformní a zároveň téměř nerozpoznatelné od nativních. Dùraz je kladený na výkon a nativní chování uživatelského rozhraní. Popsané postupy jsou demonstrované na aplikaci pro práci s historickými mapami, která je schopna v reálném èase zobrazovat mapy z historických archivù po celém světě. Testy demonstrační aplikace vykazují oproti standardním postupùm tvorby webových aplikací rapidní zrychlení. Abstract The goal of this thesis is to experiment with the latest web technologies and to design new process for mobile application creation. It is possible to create multiplatform applications which are almost unrecognizable from native applications by proposed procedures. It is focused on performance and native behaviour of the user interface in this thesis. Described practices are demonstrated on application designed for work with historical maps, which is able to show maps from historical archives whole over world real-time. Rapid acceleration has been showed on the demonstrative application compared to standard process of creation of web applications. Klíčová slova mobilní aplikace, webová aplikace, historické mapy, web worker, CSS hardvérové akcelerace, HTML5, CSS3, vícevláknový Javascript, Google Closure Tools, výkonný web, multiplat- formní mobilní aplikace, PhoneGap, moderní webové technologie Keywords mobile application, web application, historical maps, web worker, CSS hardware accele- ration, HTML5, CSS3, multithreaded Javascript, Google Closure Tools, web performance, multiplatfom mobile development, PhoneGap, modern web technologies Citace Martin Urban: Práce s historickými mapami na mobilním zařízení, diplomová práce, Brno, FIT VUT v Brně, 2014 Práce s historickými mapami na mobilním zařízení Prohlášení Prohla¹uji, že jsem tuto diplomovou práci vypracoval samostatně pod vedením Ing. Vítěz- slava Berana Ph.D. a uvedl jsem v¹echny literární prameny a publikace, ze kterých jsem èerpal. Další informace mi poskytl Mgr. Peter Pøidal ze spoleènosti Klokan Technologies. ....................... Martin Urban 31. èervence 2014 Poděkování Děkuji svému vedoucímu Ing. Vítězslavu Beranovi Ph.D. za odborné vedení a podněty, které mi pri řešení tohoto projektu poskytl. Dále děkuji Mgr. Petru Pøidalovi ze spoleè- nosti Klokan Technologies za odborné konzultace a pomoc v oblasti historických map a za možnost vyvíjet reálně nasaditelnou aplikaci s existující uživatelskou základnou. © Martin Urban, 2014. Tato práce vznikla jako školní dílo na Vysokém učení technickém v Brně, Fakultě informa- čních technologií. Práce je chráněna autorským zákonem a její užití bez udělení oprávnění autorem je nezákonné, s výjimkou zákonem definovaných případů. Obsah 1 Úvod 3 2 Platformy a technológie4 2.1 Frameworky pre sprístupnenie API mobilného zariadenia...........4 2.2 Frameworky pre tvorbu webových používateľských rozhraní.........5 2.3 Google Closure Tools...............................7 2.4 Kartografické dáta a mobilné zariadenia....................8 3 Komunikaèné kanály 14 3.1 Získavanie dát zo serveru............................ 14 3.2 Získavanie máp zo serveru............................ 15 3.3 iFramy a komunikácia medzi nimi........................ 16 3.4 Prístup k API zariadenia............................ 18 4 Výkon mobilnej aplikácie 19 4.1 Hardvérová akcelerácia animácii......................... 19 4.2 Využitie potenciálu viacjadrových procesorov................. 23 4.3 Moduly v JS................................... 26 4.4 Šablóny...................................... 28 5 Používateľské rozhranie a interakcia 31 5.1 Interakcia s mapou a inými zložitejšími prvkami............... 31 5.2 Responzívny dizajn a detekcia zariadení.................... 32 5.3 Prednačítavanie obrázkov............................ 33 5.4 Rozdiely medzi natívnymi a webovými aplikáciami.............. 33 5.5 Ovládanie dotykových aplikácií......................... 35 6 Demon¹traèná aplikácia a testovanie 39 6.1 Analýza a návrh aplikácie............................ 39 6.2 Realizácia aplikácie................................ 43 6.3 Testovanie aplikácie............................... 47 7 Záver 58 A Obsah CD 60 B In¹talácia a spustenie 61 C Vlastnosti a nastavenia pre natívny vzhľad webovej aplikácie 63 1 D Trieda pre JSONP vo Web Workeri 65 E Plagát 68 2 Kapitola 1 Úvod Vzhľadom k vysokej popularite mobilných zariadení, sa väčšina desktopových aplikácií pre- súva práve na mobilné platformy. Napriek tomu neexistuje jednoduché rie¹enie pre vývoj natívnych mobilných aplikácií na viacerých platformách súèasne. Možným riešením tohto problému je tvorba tzv. hybridných aplikácií, teda webových aplikácií s prístupom k har- dvéru zariadenia. Ak napríklad vyvíjaná aplikácia pracuje s dátovo nároènými obrazovými informáciami, akými sú aj historické mapy vo vysokom rozlíšení, výkon poskytovaný ¹tan- dardnými webovými technológiami nestaèí. Účel tejto práce je experimentovanie s najmodernejšími webovými technológiami a ná- vrhnutie vhodného prístupu k tvorbe mobilných aplikácií. Dôraz je kladený na výkon, plat- formovú nezávislos» a plynulé používateľské rozhranie, ktoré sa èo najviac podobá tomu z natívnych aplikácií. Táto práca je èlenená do 7 kapitol. Kapitola2 obsahuje prehľad existujúcich techno- lógií pre tvorbu hybridných a webových aplikácií. Ïalej obsahuje prehľad technológií pre prácu s mapami a ukážky existujúcich mapových projektov. Ïal¹ie tri kapitoly tvoria jadro práce. Zaoberajú sa skúmaním jednotlivých technológií a návrhom ich použitia v kombinácií s inými technológiami. Kapitola3 sa orientuje na problematiku komunikácie so serverom ako i medzi jednotlivými èas»ami aplikácie. Kapitola4 sa zaoberá vylep¹ovaním výkonu a kapitola5 je zameraná na používateľské rozhranie. Kapitola6 je venovaná aplikácií, ktorá demon¹truje navrhnuté postupy a rie¹enia. Návrh a realizácia aplikácie je nasledo- vaná podkapitolou o testovaní. Testovaný je prínos navrhnutých postupov a technológií na implementácií demon¹traènej aplikácie. Závereèná kapitola7 obsahuje zhrnutie výsledkov a smery ďalšieho vývoja demon¹traènej aplikácie. Demon¹traèná aplikácia slúži na prehliadanie historických máp, ktoré sú sprístupňované rôznymi svetovými i českými in¹titúciami. Snaží sa ich atraktívnym spôsobom sprístupňo- va» ¹irokej verejnosti. Týmto demon¹traèná aplikácia napĺňa jeden z pozitívnych trendov modernej doby, ktorým je záchrana kultúrneho dedièstva - napríklad aj historických doku- mentov a máp. 3 Kapitola 2 Platformy a technológie Multiplatformový vývoj mobilných aplikácií v súèasnosti nie je úplne vyrie¹ený problém. Každá spoloènos» si presadzuje svoj vývojový jazyk, prostredie a podporované technológie. Napriek tomu existujú možnosti, akými tieto obmedzenia obísť. Jedným zo spôsobov ako to dosiahnu» je využitie webových technológií. Veľké množstvo aplikácií práve zobrazuje informácie prostredníctvom webového rozhrania, a teda hlavná èas» aplikácie beží v rámci webového rámca. Do tejto kategórie patria napríklad mapové aplikácie. Ak sa rozhliadneme po existujúcich frameworkoch, ktoré umožňujú tvorbu natívnych aplikácii pre rôzne platformy, nájdeme ich hneď desiatky. Zvyèajne sa jedná o kombiná- ciu HTML5, CSS3 a javascriptu. Môže sa jedna» o kompletné rie¹enie ale i kombináciu frameworkov. Jeden pre vlastnú implementáciu funkènosti webovej aplikácie pomocou ja- vascriptu, ktorý sprístupňuje API mobilného zariadenia. Druhý pre používateľské rozhranie s optimalizovaným CSS pre rôzne zariadenia. 2.1 Frameworky pre sprístupnenie API mobilného zariade- nia Pri tvorbe multiplatformových aplikácií je potrebné použiť framework ktorý zabezpečí vrstvu (web-to-native), ktorý vyrovná rozdiely medzi jednotlivými platformami a zjednote- ným spôsobom sprístupní API zariadení prostredníctvom javascriptu. U webových aplikácii sa v podstate začlení rámec s internetovým prehliadaèom do natívnej aplikácie. Existuje niekoľko frameworkov a každý má podobné vlastnosti a možnosti. Každý spĺňa to èo je pre vývoj nutne potrebné a pridáva nieèo ¹peciálne, čím si snaží získa» používateľov. Pre bežných používateľov sú vhodnej¹ie kompletné rie¹enia, ktoré poskytujú Intel App's framework1 alebo Appcelerator Titanium2. Framework od Intelu je komplexnejší a po- skytuje preddefinované používateľské prvky pre jednoduch¹iu tvorbu UI, ktoré napodobňujú natívne aplikácie. Je možné využíva» rôzne šablóny pre rôzne platformy. Javascriptová kniž- nica je podmnožinou populárnej jQuery knižnice. Je možné použiť i plnohodnotnú jQuery knižnicu pre maximalizáciu funkcionality. Dokumentácia a kvalitné návody sú samozrej- mos»ou. Oproti Appcelerator Titanium nepodporuje