Debreceni Egyetem Informatikai Kar Mobil webalkalmazás fejlesztés Témavezető Dr Juhász István egyetemi adjunktus Készítette: Máté Balázs Programtervező Informatikus MSc Debrecen 2011
Tartalomjegyzék K... 4 B... 5 M... 7 SMS... 7 Mobil weboldalak... 7 N... 7 M... 8 M... 10 D... 10 A W K... 11 E... 11 Internet Explorer... 11 Mobile Safari... 11 N... 11... 11 A... 12 W O... 12 B B... 12 F... 12 Opera Mobile... 12 Firefox for mobile... 12 JQTouch... 13 B... 13 I... 17 G... 19 K... 19 GPS... 19 A-GPS... 19 C... 20 W F P... 20... 20
IP... 20 Nyelv... 20 H... 20 W3C Geolocation API... 20 Google Gears... 24 Multiplatform Geolocation API... 25 T... 26 Web Storage... 26 Web SQL Database... 28 Gears Storage... 31 O... 32 Cache manifest... 33 E... 33 HTML 5 formok... 35 A... 37 Projekt adatlap... 37 V... 37 K... 38 F... 38 N... 38 A... 38 A... 39 Kliens oldal... 39 Szerver oldal... 39 Logikai terv... 40 Use case diagram... 40 Activity diagramok... 40 A... 41 K... 42 Ö... 44 I... 45
Köszönetnyilvánítás K Dr. J I
Bevezetés Az okostelefon internet nélkül olyan mint az autó benzin nélkül. A Ó A mai okostelefonok alkalma ainak legfo weboldalainkat vagy azok mobiltelefonra nagy figyelmet kell, amely A mobil k u - mail r a write-once-publish- M a, amelyek tele, HTML C J valamint ok, amelyek on A v valamint a ben
valamint API Ú hogy e E, - anak, valamint hogy is. Fontos megjegyezni, hogy w Maga az alkalm t szenteltem a
Mobil alkalmazástípusok SMS A M H M ek a. Ilyen alk I M A emelt M E H M E M D C 160 karakteres limit Mobil weboldalak A m A meg E H H C A Natív alkalmazások A sok, amelyek A
- F A ezek tartalmat meg E -fixek E H L L A P L H M Mobil webalkalmazások A mobil ek a mobil telefon HTML C J A jelenti, hogy az sokkal AJAX folytonos A
A P A A A P O meg kifejezetten iphone- J nak HTML API,, hogy P ontosan hely, ahol enne vagy b, hogy Ezen O K lef E H HTML C J E G E N
Mobil böngészők A teljes mobil, A z N at F Kurzo É M F E Kurzo es l L É M Direkt és proxys böngészők M - A ai T T
G Nem mobil kompa A WebKit böngészőmotor A W K A motor HTML C J K M OS X- W O t a tart jen. A helyzet azonban nem ilyen. Előretelepített böngészők Internet Explorer A I E M M 1996-ban jelent meg a Windows CE 1.0 platformra. A Windows Mobile 6.5- az IE4- - IE - A Poc PC A W P IE IE Mobile Safari A M O W K C Nokia S család böngészője M N N N. A N W K Symbian böngésző A N -as, W K
F Android böngésző A A W K M WebOS böngésző A P O W K BlackBerry böngésző M R I M RIM A - B B RIM W K Felhasználó által telepíthető böngészők E l Opera Mobile Az Opera Mobile kurzo W M F O M s - Firefox for mobile A M G
JQTouch A jqtouch egy kifejezetten ios platformhoz fejlesztett jquery plug-in mobil N HTML A QT z W K dolgot A amelyek k A QT R vagy PhoneG Bemutatás A jqtouch J C Q Q A ekben F az i, mivel azok elengedhetetlenek a jqtouchos A k az T HTML body DIV gyermekei. A HTML. Alapsz A HTML A HTML HTML DIV ID-
A HTML Q QT J QT C C z A QT C C W K E C. A C M QT a P UIK A DIV H C DIV E DIV ID a <!DOCTYPE html> <html> <head> <title> QT </title> <link rel="stylesheet" type="text/css" href="jqtouch/jqtouch.css" /> <link href="themes/apple/theme.css" rel="stylesheet" type="text/css" /> <script src="jqtouch/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="jqtouch/jqtouch.js" type="text/javascript"></script> <script type="text/javascript"> var jqt = $.jqtouch(); </script> </head> <body> <div id="fooldal"> <div class="toolbar"> <h1> K </h1> </div> </div> </body> </html>
A DOM- H akk H QT AJAX tartalmat DIV- C d DIV F AJAX HTML HTML HTML I P E <body> <div id="fooldal"> <div class="toolbar"> <h1>
K </h1> </div> <a href="/ettermek">é </a> </div> </body> ettermek.html: <div> <ul> <li>f F É </li> <li>b É </li> <li>k É </li> </ul> </div> E <body> <div id="fooldal"> <div class="toolbar"> <h1> K </h1> </div> <a href="#page-2">é </a> </div> <div id="page-2" class="current"> <div> <ul> <li>finom F É </li> <li>b É </li> <li>k É </li> </ul> </div> </div> </body> O dinamikus target="_webapp" - P <a href="http://www.google.com" target="_webapp">google</a> A meg. A QT
<div id="page-2" class="current"> <div class="toolbar"> <h1> É </h1> <a class="back" href="#">vissza</a> </div> <div> <ul> <li>f F É </li> </ul> </div> </div> A QT G hanem a linkeket f B É B É F P elhelyezett Inicializálási paraméterek A QT QT J QT a QT QT J a Q J A QT
É A J addglosstoicon true P backselector.back,.cancel,.goback cachegetrequests true GET cubeselector.cube dissolveselector.dissolve fadeselector.fade fixedviewport true b zoomolhat formselector AJAX fullscreen true az oldal P icon false P preloadimages false a startupscreen null useanimations true
Geolokáció E GP -szel, A GPS E i K Mindegyik, amelyet H Kliens oldali helymeghatározás GPS A G P (GPS), F E GP A telefonnak szabad A-GPS Az Assisted GPS egy szoftvera amelyek valamilyen nak T jobb m vagy pontatlanabb adat addig, GP
Cellainformáció A M WiFi Poziciós rendszer E amelyhez WiFi- E I G F Szerver oldali helymeghatározás HTTP IP cím L IP F IP IP Nyelv H HTTP Helymeghatározás böngészőből W3C Geolocation API A World Wide Web Consortium JavaS API helye E API E API a, is
A elet A pozíció meghatározása [NoInterfaceObject] interface NavigatorGeolocation { readonly attribute Geolocation geolocation; }; Navigator implements NavigatorGeolocation; [NoInterfaceObject] interface Geolocation { void getcurrentposition(in PositionCallback successcallback, in optional PositionErrorCallback errorcallback, in optional PositionOptions options); long watchposition(in PositionCallback successcallback, in optional PositionErrorCallback errorcallback, in optional PositionOptions options); void clearwatch(in long watchid); }; [Callback=FunctionOnly, NoInterfaceObject] interface PositionCallback { void handleevent(in Position position); }; [Callback=FunctionOnly, NoInterfaceObject] interface PositionErrorCallback { void handleevent(in PositionError error); }; [Callback, NoInterfaceObject] interface PositionOptions { attribute boolean enablehighaccuracy; attribute long timeout; attribute long maximumage; }; [NoInterfaceObject] interface Position { readonly attribute Coordinates coords; readonly attribute DOMTimeStamp timestamp; }; [NoInterfaceObject] interface Coordinates { readonly attribute double latitude; readonly attribute double longitude; readonly attribute double? altitude;
readonly attribute double accuracy; readonly attribute double? altitudeaccuracy; readonly attribute double? heading; readonly attribute double? speed; }; A geolocation objektum, amely, a navigator A C P param azza. A H a, akkor az C P A Position objektum tartalmazza a rcallbac P E, A Hiba konstans UNKNOWN_ERROR PERMISSION_DENIED POSITION_UNAVAILABLE TIMEOUT L A A A helyzet nem i adatok I B (timeout), egy arra -e megkapni (enablehighaccuracy) (maximumage). P <script type="text/javascript">
if (navigator.geolocation) { navigator.geolocation.getcurrentposition(sikeresgeo, errorgeo, {enablehighaccuracy:true, timeout:10000, maximumage:30000}); } else { alert( A helymeghatározás nem elérhető ); } function sikeresgeo(position) { alert( Szélesség + position.coords.latitude + "\n" + Hosszúság + position.coords.longitude + "\n" + Pontosság + position.coords.accuracy + " m \n\n" + Időpont + new Date(position.timestamp).toLocaleString()); } function errorgeo(error) { switch (error.code) { case error.permission_denied: alert( A helymeghatározás nem engedélyezett ); break; case error.position_unavailable: alert( A helymeghatározás sikertelen ); break; case error.timeout: alert('a helymeghatározás időtúllépés miatt sikertelen ); break; case error.unknown_error: alert( A helymeghatározás ismeretlen hiba miatt sikertelen ); break; } } </script> E W C API Ilyenkor E P A ID-t ad vissza, amelyet a clearwatch
Google Gears A G G, A W C API d A W M I E A - H a Gears API-t, majd a W3C API- A W3C API- G API t A R A A gearsaddresslanguage par RFC szerinti nyelvet adhatunk meg a L ationproviderurl pedig a G H R A A street streetnumber premises city region country countrycode postalcode A G API W C API PO ITION UNAVAILABLE TIMEOUT P C P
P var geolocation = google.gears.factory.create("beta.geolocation"); geolocation.getcurrentposition(sikeresgeo, errorgeo, { enablehighaccuracy: true, gearsrequestaddress: true, gearsaddresslanguage: "hu-hu" }); function sikeresgeo(position) { if (position.gearsaddress) { var address = position.gearsaddress; alert( Ország + address.country + "\n" + Város + address.city + "\n" + 'Utca: ' + address.street + "\n" + Irányítószám + address.postalcode); } } function errorgeo(error) { switch (error.code) { case error.position_unavailable: alert('a helymeghatározás sikertelen ); break; case error.timeout: alert( A helymeghatározás időtúllépés miatt sikertelen ); break; } } Multiplatform Geolocation API A lt MIT- J API. H G G maga a geo.js. A API - H W C API ition objektumot vagy szere if (geo_position_js.init()){ geo_position_js.getcurrentposition(sikeresgeo, errorgeo); } else{
G } N elmozdulna. A W3C APIval ellen azt settimeout/s I C P Tárolás A abban a tekintetben, hogy nehezen tudtak a kliens oldalon adatokat perzisztensen his A A A HTTP -vissza 4 KB- O E ne, Web Storage A W HTML K, a localstorage, amely, E adatok megmaradnak,
A interface Storage { readonly attribute unsigned long length; DOMString key(in unsigned long index); getter any getitem(in DOMString key); setter creator void setitem(in DOMString key, in any value); deleter void removeitem(in DOMString key); void clear(); }; A kulcs z J atott A parseint(), parsefloat() A I I A I I az egyes elemek k A a windows objektum storage minden egyes alkalommal, amikor a setitem(), I T I a dni. A StorageEvent objektum V V F, nt. P function tamogat_web_storage() { return ('localstorage' in window) && window['localstorage']!== null; } var storagetamogatott = tamogat_web_storage(); if (navigator.geolocation) { navigator.geolocation.getcurrentposition(sikeresgeo, { enablehighaccuracy: true }); } function sikeresgeo(position) {
} if (storagetamogatott) { var pos = { latitude: position.coords.latitude, longitude: position.coords.longitude, altitude: position.coords.altitude, accuracy: position.coords.accuracy, timestamp: new Date(position.timestamp) }; var pozok = localstorage.getitem('posok'); if (pozok!= null) { pozok = JSON.parse(pozok); pozok.push(pos); localstorage.setitem('posok', JSON.stringify(pozok)); } else { pozok = new Array(); pozok.push(pos); localstorage.setitem('posok', JSON.stringify(pozok)); } } Web SQL Database A Web SQL Database API, mint azt a neve is sugallja, kliens oldali, JavaScriptben E API. [Supplemental, NoInterfaceObject] interface WindowDatabase { Database opendatabase(in DOMString name, in DOMString version, in DOMString displayname, in unsigned long estimatedsize, in optional DatabaseCallback creationcallback); }; Window implements WindowDatabase; [Supplemental, NoInterfaceObject] interface WorkerUtilsDatabase { Database opendatabase(in DOMString name, in DOMString version, in DOMString displayname, in unsigned long estimatedsize, in optional DatabaseCallback creationcallback); DatabaseSync opendatabasesync(in DOMString name, in DOMString version, in DOMString displayname, in unsigned long estimatedsize, in optional DatabaseCallback creationcallback); }; WorkerUtils implements WorkerUtilsDatabase; [Callback=FunctionOnly, NoInterfaceObject] interface DatabaseCallback { void handleevent(in Database database); };
Ú az opendatabase D ek nak, amelyek nak A a V H QL H sor, T transaction() QL E T interface Database { void transaction(in SQLTransactionCallback callback, in optional SQLTransactionErrorCallback errorcallback, in optional SQLVoidCallback successcallback); void readtransaction(in SQLTransactionCallback callback, in optional SQLTransactionErrorCallback errorcallback, in optional SQLVoidCallback successcallback); readonly attribute DOMString version; void changeversion(in DOMString oldversion, in DOMString newversion, in optional SQLTransactionCallback callback, in optional SQLTransactionErrorCallback errorcallback, in optional SQLVoidCallback successcallback); }; [Callback=FunctionOnly, NoInterfaceObject] interface SQLVoidCallback { void handleevent(); }; [Callback=FunctionOnly, NoInterfaceObject] interface SQLTransactionCallback { void handleevent(in SQLTransaction transaction); }; [Callback=FunctionOnly, NoInterfaceObject] interface SQLTransactionErrorCallback { void handleevent(in SQLError error); };
A QL a typedef sequence<any> ObjectArray; interface SQLTransaction { void executesql(in DOMString sqlstatement, in optional ObjectArray arguments, in optional SQLStatementCallback callback, in optional SQLStatementErrorCallback errorcallback); }; [Callback=FunctionOnly, NoInterfaceObject] interface SQLStatementCallback { void handleevent(in SQLTransaction transaction, in SQLResultSet resultset); }; [Callback=FunctionOnly, NoInterfaceObject] interface SQLStatementErrorCallback { boolean handleevent(in SQLTransaction transaction, in SQLError error); }; P <script type="text/javascript"> var db = window.opendatabase("geo", "1.0", "geo", 10); db.transaction(function (t) { t.executesql("create TABLE IF NOT EXISTS coords(" + "id integer primary key autoincrement," + "latitude float," + "longitude float," + "altitude float," + "accuracy float," + "timestamp timestamp)", [], null, error); }); function beszuras(pos) { db.transaction(function (t) { t.executesql("insert INTO coords (latitude,longitude,altitude,accuracy,timestamp) VALUES (?,?,?,?,?)", new Array(pos.latitude, pos.longitude, pos.altitude, pos.accuracy, pos.timestamp), null, error); }); } function darab_lekerdezes() { db.transaction(function (t) {
t.executesql("select COUNT(*) as darab FROM coords", [], function (transaction, data) { alert(data.rows.item(0).darab); }); }); } function error(transaction, error) { alert(error.message); } if (navigator.geolocation) navigator.geolocation.getcurrentposition(sikeresgeo); function sikeresgeo(position) { var pos = { latitude: position.coords.latitude, longitude: position.coords.longitude, altitude: position.coords.altitude, accuracy: position.coords.accuracy, timestamp: position.timestamp }; beszuras(pos); } darab_lekerdezes(); </script> Gears Storage A G G W QL D API. Fontos megjegyezni, hogy az Android platfor szinkron. P <script src="js/gears_init.js" type="text/javascript"></script> <script type="text/javascript"> var db = google.gears.factory.create('beta.database'); db.open('geo'); db.execute("create TABLE IF NOT EXISTS coords(" + "id integer primary key autoincrement," + "latitude float," + "longitude float," + "altitude float," + "accuracy float," + "timestamp timestamp)"); function lekerdezes() { var rs = db.execute('select * FROM coords'); while (rs.isvalidrow()) { var id = rs.field(0); var name = rs.field(1); var pos = { id: rs.field(0),
} </script> latitude: rs.field(1), longitude: rs.field(2), altitude: rs.field(3), accuracy: rs.field(4), timestamp: rs.field(5) }; rs.next(); } rs.close(); Offline webalkalmazások Nem csak az a Maga a kifejez ellentm, hiszen a web majd r esetben pont nincs. Sok esetben azonban G E HTML az Offline Application Caching API. A J zen E hez webszerveren, amely tu W e. A DOM- -e
szerverrel. Cache manifest A, amely MIME -manifest- n tudja <!DOCTYPE html> <html manifest="/cache.manifest"> A CACHE MANIFE T A nek CACHE, a fallba az offline nem A n F egyezni, hogy azon html oldalak, hivatkoznak, automatikusan Események H akkor a window.applicationcache objektumon a. 1. H oldal HTML, 2. H oldalon, n
H 3. H - a. H s b. H A C C meg. 4. Ha a folyamat fel,. M arra, E ha egy, P CACHE MANIFEST # verzio 1 CACHE fooldal.html terkep.html tavasz.css logo.jpg NETWORK ettermek.cshtml menuk.cshtml
HTML 5 formok A HTML 5- amelyek J k. E nem azok I E -os A. a <form> <input type="text" name="e" placeholder Étterem neve" /> <input type="submit" value Keresés /> </form> I form a E alamely <form> <input type="text" name="e" autofocus /> <input type="submit" value Keresés /> </form> A E az email, url, number, date, time tesz E O az A e mintha text sem okozhat semmilyen.
Alkalmazás Projekt adatlap C D M R A H A agilis. A M B Vízió M kapcsolatban mos : - A F A
Követelmények Funkcionális követelmények - - - - - - - Nem funkcionális követelmények - - - O A - a - A megvalósításhoz használt technológiák o Microsoft SQL Server o ASP.NET WebMatrix o jquery
o jqtouch o Google Maps Architekturális terv Az - Kliens oldal A, A Jav HTML - Szerver oldal Webszerver A - t, Adatbázisszerver A
Logikai terv Use case diagram A A Activity diagramok Új menü felvétele Ú - H f
Menü keresése A Adatbázisterv
A A P NET- tre fog a. A U M R - U I R A ID N C T on, E-mail, T H z ere is. M kik az, valamint az k f A É A - E A A F. Képernyőtervek F K m.debrecenimenuk.hu M É T Kedvencek K D : É : K 11 h k s c p s v 1 2 3 1 4 5 6 7 8 9 1 1 1 1 1 1 01 1 21 32 42 52 62 72 82 92 02 12 2 3 4 5 6 7 8 9 0 K É A B C É M A 800 Ft Leves, F, Desszert B 900 Ft Leves, F, Desszert É
É É A É A É A É A É A P P 11. www.pelda.hu 06 52 123 456 800 Ft É A É A É A T Kedvencek K É A É A É A É A É A É A É A É A
Összegzés API- em ek T az volt az oka, hogy sokak a A a miatt, emesnek tartottam K folyamatos E azok, amelyek hiszen most alakulnak ki A Ú ndolom, hogy
Irodalomjegyzék Brian Fling Mobile Design and Development Mark Pilgrim HTML 5 Up and Running Gail Rahn Frederick, Rajesh Lal Beginning Smartphone Web Development Jonathan Strak Building iphone Apps with HTML, CSS and JavaScript Maximiliano Firtman Programming the Mobile Web Sarah Allen, Vidal Graupera, Lee Lundrigan Pro Smartphone Cross-Platform Development Offline webapps: http://dev.w3.org/html5/offline-webapps/ Web Storage: http://dev.w3.org/html5/webstorage/ Web Database: http://dev.w3.org/html5/webdatabase/ G http://dev.w3.org/geo/api/spec-source.html jqtouch: http://jqtouch.com/