VYSOKÉ UČENÍ TECHNICKÉ V BRNĚ BRNO UNIVERSITY OF TECHNOLOGY FAKULTA ELEKTROTECHNIKY A KOMUNIKAČNÍCH TECHNOLOGIÍ ÚSTAV AUTOMATIZACE A MĚŘICÍ TECHNIKY FACULTY OF ELECTRICAL ENGINEERING AND COMMUNICATION DEPARTMENT OF CONTROL AND INSTRUMENTATION CHATOVACÍ SYSTÉM PRO MOBILNÍ TELEFONY DIPLOMOVÁ PRÁCE MASTER'S THESIS AUTOR PRÁCE Bc. MICHAL STAROSTA AUTHOR BRNO 2012 VYSOKÉ UČENÍ TECHNICKÉ V BRNĚ BRNO UNIVERSITY OF TECHNOLOGY FAKULTA ELEKTROTECHNIKY A KOMUNIKAČNÍCH TECHNOLOGIÍ ÚSTAV AUTOMATIZACE A MĚŘICÍ TECHNIKY FACULTY OF ELECTRICAL ENGINEERING AND COMMUNICATION DEPARTMENT OF CONTROL AND INSTRUMENTATION CHATOVACÍ SYSTÉM PRO MOBILNÍ TELEFONY CHAT SYSTEM FOR MOBILE PHONES DIPLOMOVÁ PRÁCE MASTER'S THESIS AUTOR PRÁCE Bc. MICHAL STAROSTA AUTHOR VEDOUCÍ PRÁCE Ing. TOMÁŠ MACHO, Ph.D. SUPERVISOR BRNO 2012 VYSOKÉ UČENÍ TECHNICKÉ V BRNĚ Fakulta elektrotechniky a komunikačních technologií Ústav automatizace a měřicí techniky Diplomová práce magisterský navazující studijní obor Kybernetika, automatizace a měření Student: Bc. Michal Starosta ID: 72886 Ročník: 2 Akademický rok: 2011/2012 NÁZEV TÉMATU: Chatovací systém pro mobilní telefony POKYNY PRO VYPRACOVÁNÍ: 1. Seznamte se s problematikou OS pro "chytré" mobilní telefony. Zaměřte se na komunikaci přes WiFi. 2. Navrhněte koncepci chatovacího systému vhodného pro mobilní platformy komunikující přes WiFi. 3. Implementujte chatovací systém na straně webového serveru. 4. Vytvořte aplikační software pro mobilní telefony. 5. Chatovací systém odlaďte a ověřte jeho funkčnost. DOPORUČENÁ LITERATURA: ZANDL,Patrick. Bezdrátové sítě WiFi : praktický průvodce. 1.vyd. Brno:Computer Press, 2003. 190 s. Termín zadání: 6.2.2012 Termín odevzdání: 21.5.2012 Vedoucí práce: Ing. Tomáš Macho, Ph.D. doc. Ing. Václav Jirsík, CSc. Předseda oborové rady UPOZORNĚNÍ: Autor diplomové práce nesmí při vytváření diplomové práce porušit autorská práva třetích osob, zejména nesmí zasahovat nedovoleným způsobem do cizích autorských práv osobnostních a musí si být plně vědom následků porušení ustanovení § 11 a následujících autorského zákona č. 121/2000 Sb., včetně možných trestněprávních důsledků vyplývajících z ustanovení části druhé, hlavy VI. díl 4 Trestního zákoníku č.40/2009 Sb. ABSTRAKT Cieľom tejto diplomovej práce je návrh a implementácia lokálneho chatovacieho systému pre mobilné zariadenia a inteligentné telefóny. Systém je tvorený hlavným serverom zas- trešujúcim komunikáciu mobilných aplikácii, webovým serverom zastrešujúcim komuniká- ciu webových klientov a prezentačnou aplikáciou, ktorej úlohou je zobrazovanie chatu pre okolie. Mobilná aplikácia je vytvorená na operačné systémy Android, iOS, Windows Mobile a Symbian. Lokálny chat je vymedzený dosahom Wifi signálu a Wifi sieť je slúži pre komunikáciu a posielanie správ. Samotné správy sa zobrazujú dynamicky a je možné ich poslať z mobilnej aplikácie na sociálnu sieť Facebook ako užívateľský status. KĽÚČOVÉ SLOVÁ lokálny chat, Android, iOS, Symbian, Windows Mobile, OpenPlug Studio, PHP, JavaScript, Java, ActionScript, MXML ABSTRACT The aim of this master’s thesis is design and implementation local chat system for mobile devices and smartphones. System contains main server, witch covers communication with application for smartphones and web server, witch covers communications with browsers and presentation application, witch goal is to presenting chat to area. Smartphone ap- plication is crated for Android, iOS, Windows Mobile and Symbian operating systems. Wifi network is used for communication and message sending and signal coverage area defines local chat. Messages are shown dynamically and it’s possible send them asuser status to Facebook social network. KEYWORDS local chat, Android, iOS, Symbian, Windows Mobile, OpenPlug Studio, PHP, JavaScript, Java, ActionScript, MXML STAROSTA, Michal Chatovací systém pro mobilní telefony: diplomová práce. Brno: Vysoké učení technické v Brně, Fakulta elektrotechniky a komunikačních technologií, Ústav automatizace a měřicí techniky, 2012. 68 s. Vedoucí práce byl Ing. Tomáš Macho, , Ph.D. PREHLÁSENIE Prehlasujem, že som svoju diplomovoú prácu na tému „Chatovací systém pro mo- bilní telefony“ vypracoval samostatne pod vedením vedúceho diplomovej práce, využitím odbornej literatúry a ďalších informačných zdrojov, ktoré sú všetky citované v práci a uvedené v zozname literatúry na konci práce. Ako autor uvedenej diplomovej práce ďalej prehlasujem, že v súvislosti s vytvorením tejto diplomovej práce som neporušil autorské práva tretích osôb, najmä som nezasiahol nedovoleným spôsobom do cudzích autorských práv osobnostných a som si plne vedomý následkov porušenia ustanovenia S 11 a nasledujúcich autorského zákona č. 121/2000 Sb., vrátane možných trestnoprávnych dôsledkov vyplývajúcich z ustanovenia S 152 trestného zákona č. 140/1961 Sb. Brno . ................................... (podpis autora) POĎAKOVANIE Rád by som poďakoval vedúcemu diplomovej práce pánovi Ing. Tomáši Machovi, Ph.D. za odborné vedenie, konzultácie, trpezlivosť a podnetné návrhy k práci. Brno . ................................... (podpis autora) OBSAH Úvod....................................... 12 1 Popis použitých technológií 14 1.1 Štandard IEEE 802.11 . 14 1.2 Operačné systémy . 15 1.2.1 Operačný systém Android . 15 1.2.2 Operačný systém iOS . 15 1.2.3 Operačný systém Symbian . 16 1.2.4 Operačný systém Windows Mobile 6 . 16 1.3 Kódovanie Base64 . 16 1.4 Protokol HTTP . 17 1.5 Technológie na serverovej strane . 17 1.5.1 Java . 17 1.5.2 HTTP server Apache . 18 1.5.3 Skriptovací jazyk PHP . 18 1.5.4 HTML (HyperText Markup Language) . 19 1.5.5 CSS (Cascading Style Sheets) . 20 1.5.6 Skriptovací jazyk JavaScript . 20 1.5.7 Ajax (Asynchronous JavaScript and XML) . 20 1.6 Technológie na klientskej strane . 21 1.6.1 ActionScript . 21 1.6.2 MXML . 22 1.6.3 oAuth (Open Authentication) . 22 1.7 Technológie použité pri vývoji aplikácii . 22 1.7.1 OpenPlug Studio . 22 1.7.2 Vývojové prostredie Flash Builder . 23 1.7.3 NetBeans IDE . 23 2 Návrh chatovacieho systému 24 2.1 Požiadavky na systém . 24 2.2 Hardvér serverovej časti . 25 2.3 Serverová časť . 27 2.3.1 Java Server . 30 2.3.2 QPrezentér . 30 2.3.3 Webový Server . 32 2.4 Klientská časť . 33 2.4.1 Diagramy prípadov použitia . 33 2.4.2 Mobilná aplikácia . 34 2.4.3 Webová stránka . 37 3 Implementácia chatovacieho systému 39 3.1 Implementácia Java servera . 39 3.2 Implementácia Qprezentéra . 40 3.2.1 Popis funkcionalít Qprezentéra . 40 3.3 Implementácia mobilnej aplikácie . 42 3.3.1 Popis funkcionalít mobilnej aplikácie . 42 3.3.2 Vytváranie a prispôsobenie okien . 44 3.4 Implementácia webovej stránky . 47 4 Overenie a odladenie funkčnosti chatu 49 4.1 Java Server a Qprezentér . 49 4.2 Webová stránka a Webový server . 50 4.3 Mobilná aplikácia . 50 4.3.1 Overenie funkčnosti aplikácie na simulátore . 50 4.3.2 Inštalácia na platformu iOS . 51 4.3.3 Inštalácia na platformu Android . 52 4.3.4 Inštalácia na platformu Symbian . 53 4.3.5 Inštalácia na platformu Windows Mobile . 53 5 Záver 54 Literatúra 56 Zoznam symbolov, veličín a skratiek 59 Zoznam príloh 60 A Use Case Diagramy 61 A.1 Užívateľ využívajúci mobilnú aplikáciu . 61 A.2 Užívateľ využívajúci webovú stránku . 61 B Hlavné triedy v mobilnej aplikácií 62 C Stromová štruktúra okien aplikácie 63 D Vývojový diagram overovania funkčnosti aplikácie 64 E Platformová podpora nástroja OpenPlug Studio 65 F Qprezentér 66 G Mobilná aplikácia a webová stránka 67 H Príloha CD 68 ZOZNAM OBRÁZKOV 1.1 Typy sietí: a. infraštruktúra, b. ad-hoc . 14 1.2 Trhový podiel mobilných prehliadačov [19] . 19 1.3 Princíp komunikácie prehliadača so serverom prostredníctvom Ajaxu 21 2.1 Bloková schéma systému Qvidoo z pohľadu užívateľa . 25 2.2 Blokový diagram zariadení v systéme Qvidoo . 26 2.3 Blokové schéma komunikácie aplikácie a webového klienta so serverovou časťou . 29 2.4 LCD obrazovky s návrhom Qprezentéra rozdeleného na tri časti. 31 2.5 Životný cyklus správy . 36 2.6 Návrh rozloženia objektov stránky . 38 3.1 Zobrazenie statusu poslaného z aplikácie Qvidoo na sociálnej sieti Facebook s odkazom na aplikáciu . 43 3.2 Príklad navigačného modelu pre platformu Android vyvolaného tlačid- lom Menu ................................. 45 3.3 Webová stránka chatu. 47 4.1 Inštalačné okno po spustení inštalačného súboru Qprezenter.exe ... 49 4.2 Jednotlivé okná simulátorov s tlačidlami postupe zľava: iOS, Android, Windows Mobile, Symbian S60 . 51 4.3 Inteligentné zariadenie na ktorom bola overovaná aplikácia pre plat- formu iOS. [28] . 52 4.4 Inteligentný telefón HTC Tattoo na ktorom bola overovaná aplikácia pre platformu Android. [29] . 52 4.5 Inteligentný telefón Nokia N5530 na ktorom bola overovaná aplikácia pre platformu Symbian. [31] . 53 A.1 Diagram prípadov využitia pre užívateľa pripajajúceho sa cez aplikáciu 61 A.2 Diagram prípadov využitia pre užívateľa pripajajúceho sa cez webovú stránku . 61 C.1 Stromová štruktúra okien mobilnej aplikácie . 63 D.1 Vývojový diagram pri overovaní funkčnosti aplikácie . 64 F.1 Qprezentér so správami a animovaným banerom na ľavej strane a so statickým na pravej. 66 G.1 Okná mobilnej aplikácie a náhľad webovej stránky . 67 ZOZNAM TABULIEK 1.1 Porovnanie štandardov b,g,n [22] . 15 1.2 Distribučné kanály známych výrobcov operačných systémov. [25] . 16 2.1 Návrh formátu a štruktúry posielanej správy . 28 2.2 Zoznam a popis navrhnutých okien v mobilnej aplikácii. 37 3.1 Zoznam tried Java Servera. 39 3.2 Zoznam tried aplikácie Qprezenter . 40 3.3 Príklad vytvárania užívateľských okien v jazyku MXML. 45 3.4 Príklad veľkých rozdielov v hustote pixelov [32] . 46 3.5