KIẾN THỨC PHONEGAP cho những bạn mới tập tành phonegap

Phonegap cho ngi mi hc Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 1 MC LC LI NÓI U 5 Các tài liu liên quan 6 I.Events 7 1.1.Hiu thêm v events 7 1.2.Cách s dng EVENTS LISTENER 8 1.3.Hiu thêm v các dng s kin EVENT TYPES 9 1.3.1.Backbutton 9 1.3.2.Deviceready 10 1.3.3.Menubutton 11 1.3.4.Pause 12 1.3.5.Resume 13 1.3.6.Searchbutton 14 1.3.7.Online 15 1.3.8.Offline 16 1.3.9.Mt ví d đn gin v s phn hi li các s kin events 17 1.3.10.Mt ví d đn gin v vic phn hi li các s kin Button Events 18 II.Cách làm vic vi thit b, mng network, và các thông báo notifications 20 2.1.Cách ly thông tin t thit b 20 2.1.2.Cách ly v tên ca thit b Device Name 20 2.1.3.Cách ly v thông tin phiên bn phonegap 21 2.1.4.Cách ly v nn tng thit b Device Platform 21 2.1.5.Cách ly v ID quc t ca thit b UUID 21 2.1.6.Cách ly v thông tin phiên bn h điu hành 22 2.1.7.Ví d v cách ly thông tin ca thit b 22 2.2.Cách kim tra 1 mng network 23 Cách xác đnh dng kt ni 24 2.3.Cách s dng các thông báo NOTIFICATIONS 26 2.3.1.Cách s dng Alerts 26 2.3.2.Cách s dng hp thoi tng tác Confirmation Dialogs 27 2.3.3.Cách s dng Beeps 28 2.3.4.Cách s dng ch đ rung Vibrations 29 2.3.5.Ví d v cách s dng tt c 4 loi thông báo Notifications 29 III.Gia tc k Accelerometer 32 Phonegap cho ngi mi hc Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 2 3.1.Th nào là gia tc k Accelerometer ? 32 3.2.Cách s dng gia tc k Accelerometer 32 3.3.Các ng dng dùng gia tc k Accelerometer 33 3.4.Cách s dng đi tng gia tc k ACCELERATION OBJECT 36 3.5.Cách s dng các phng thc ACCELEROMETER METHODS 37 3.5.1.Phng thc getCurrentAcceleration 37 3.5.2.Phng thc watchAcceleration 38 3.5.3.Phng thc clearWatch 39 3.6.La chn cu hình ACCELEROMETER OPTION 40 3.7.Ví d v cách s dng gia tc k ACCELEROMETER 40 Cách thc ví d hot đng 41 IV.Ví trí đa lý Geolocation 42 4.1.Th nào là v trí đa lý Geolocation ? 42 4.2.Cách s dng Geolocation 42 4.3.Các mu ng dng v Geolocation 42 4.4.Các đi tng POSITION, POSITIONERROR, và COORDINATES 45 4.4.1.i tng Position Object 45 4.4.2.i tng PositionError 46 4.4.3.i tng Coordinates Object 46 4.5.Ví d minh ha v geolocation 46 Cách ví d hot đng 47 4.6.Cách ci thin giao din và tri nghim ca ngi dùng 48 V.Media 52 5.1.Các Media Files là gì ? 52 5.2.Cách s dng các Media Files 52 5.3.Các ng dng mu s dng media API 52 5.4.i tng MEDIA OBJECT 55 5.5.Cách s dng các phng thc methods 56 5.5.1.phng thc media.getCurrentPosition 56 5.5.2.Phng thc media.getDuration 57 5.5.3.Phng thc media.pause 58 5.5.4.Phng thc media.play 59 5.5.5.Phng thc media.release 61 5.5.6.Phng thc media.seekTo 61 5.5.7.Phng thc media.startRecord 62 5.5.8.Phng thc media.stop 63 Phonegap cho ngi mi hc Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 3 5.5.9.Phng thc media.stopRecord 64 5.5.10.Kim soát li MediaError 65 5.5.11.Ví d v vic s dng media api 66 VI.Lu tr Storage 73 6.1.im khác bit gia Session Storage và Local Storage ? 75 6.2.Cách s dng local storage 76 6.3.Cách s dng đi tng DATABASE OBJECT 77 6.3.1.Cách to và Cách m 1 database 77 6.3.2.Cách chy 1 sql Query 78 6.3.3.Cách phân tích và tin x lý các câu lnh SQL (phòng chng SQL injection) 81 6.3.4.Các giao dch Transactions 82 6.4.Cách xem 1 tp kt qu 84 6.5.iu chnh li 86 6.6.Ví d v cách xây dng 1 database đn gin : 89 VII.Files 91 7.1.H thng FILESYSTEMS 91 7.2.Tìm hiu v các th mc dn DIRECTORIES và các files 92 7.2.1.Cách s dng đi tng DirectoryEntry Object 92 7.2.2.getMetadata 93 7.2.3.setMetadata 94 7.2.4.moveTo 95 7.2.5.copyTo 96 7.2.6.toURI 97 7.2.7.remove 97 7.2.8.getParent 98 7.2.9.createReader 98 7.2.10.getDirectory 99 7.2.11.getFile 99 7.2.12.removeRecursively 100 7.3.metadata 101 7.4.FileError 102 7.5.Flags 102 7.6.LocalFileSystem 103 7.7.DirectoryReader 104 7.8.Cách s dng đi tng FileEntry Object 105 7.8.1.getMetadata 106 Phonegap cho ngi mi hc Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 4 7.8.2.moveTo 107 7.8.3.copyTo 108 7.8.4.toURI 109 7.8.5.remove 109 7.8.6.getParent 109 7.8.7.createWriter 110 7.8.8.file 111 7.9.Cách đc các files - FileReader 111 7.9.1.readAsDataURL 112 7.9.2.abort 113 7.9.3.readAsText 114 7.10.Cách đc các files – FileWriter 116 7.11.Cách truyn dn files – FileTransfer 120 7.11.1.upload 120 7.11.2.download 124 7.11.3.abort 125 7.11.4.onprogress 125 7.12.FileTransferError 126 VIII.Camera 127 8.1.Cách truy cp 1 nh Picture 127 8.2.Cách thit lp các cu hình trong Camera Options 139 8.2.1.Quality 140 8.2.2.destinationType 141 8.2.3.sourceType 143 8.2.4.allowEdit 145 8.2.5.encodingType 146 8.2.6.targetHeight và targetWidth 146 8.2.7.mediaType 146 8.2.8.saveToPhotoAlbum 147 8.3.Làm vic vi các vn đ xy ra vi camera 147 IX.Splashscreen 151 10.1.Cách phn quyn Permissions 151 Android 151 iOS 151 10.2.Cách thit lp 151 10.3.show 152 Phonegap cho ngi mi hc Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 5 10.4.hide 153 LI NÓI U 1 đim cá nhân mình rt thích  Phonegap, đó chính là tính đn gin và hu nh không có tính ràng buc. Phonegap đc gi là framework tuy nhiên nó không ging nh 1 vài framework PHP mà mình đã tng hc, vi nhng framework PHP này, nó đnh ngha li hoàn toàn cách bn vit mã code, và nó đòi hi bn phi hiu rõ sâu rng v các thành phn h thng bên trong, thì bn mi có th lp trình thông tho đc. Vi Phonegap, nó không kìm kp bn vào trong 1 h thng có 1 quy chun riêng ri rm nào c, bn có th t do thoi mái lp trình theo cách mà bn mun (tuy nhiên cái gì cng có 2 mt ca nó), bn ch cn nm bt 1 công ngh duy nht - công ngh nn Web(bao gm HTML5, Javascript, CSS), b qua gánh nng cn phi nm bt và hiu rõ v các công ngh bên trong mi nn tng (Android, iOS, Blackberry, Windowphone, ầ) mà bn vn có th to ra đc các ng dng “vit mt ln, biên dch qua cloud và chy khp ni – tng thích vi hu ht các nn tng h điu hành di đng hin ti”. Tài liu đc vit ging nh 1 bn ghi chép, ghi li nhng th mà mình đã đc đc t các ebook ting anh, do vy b cc sp xp ca nó có th cha chính xác, cách trình bày không theo chun 1 ebook nào c và nhiu ch vit cha rõ ngha và không mch lc do hn ch v ngoi ng ca bn thân mình. Tài liu mang đm tính cht cá nhân do vy bn s bt gp trong tài liu này nhiu đon kí t in đm, in màu, c ch ln bt thng và đc tô màu khác nhau - đó là các đon có liên quan đn nhau hay là nhng ghi chú quan trng mà bn cn phi đc k. Ni dung trong tài liu này đc da trên các cun ebook: “Beginning Phonegap - Thomas Myer”, “PhoneGap Essentials - John M. Wargo”, “Apache Cordova Documentation 2.2.0 – Phonegap team”, và 1 s gii thích, đnh ngha v kin trúc ca HTML5 t W3C.org. Tài liu này không đ cp ti đy đ các hàm APIs đc Phonegap h tr. C th, các phn sau b lc b: Capture, Compass, Contacts, Globalization, Guides (do mình không có thi gian đ vit nt, và mình cng không s dng đn các phn b lc b này) Nu có thc mc hay góp ý gì, các bn có th đng ký ngay 1 nick vào din đàn www.phonegap.vn/forum đ đt câu hi trc tip, các MOD và ADMIN s tr li câu hi ca bn trong thi gian sm nht. Phonegap cho ngi mi hc Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 6 Các tài liu liên quan  “Lp trình hng đi tng trong Javascript và các kiu mu thit k”: http://www.slideshare.net/myloveforyounqt/lap-trinh-huong-doi-tuong-trong- javascript-va-cac-kieu-mau-thiet-ke  “Cách ti u hóa môi trng lp trình ng dng cho Android”: http://www.slideshare.net/myloveforyounqt/cch-ti-u-ha-mi-trng-lp-trnh-ng-dng- cho-android-tng-tc-my-o-android  Hoc đn gin truy cp vào th mc chia s sau: http://sdrv.ms/VoAXBi (rt có th trong 1 thi gian na, mình s vit 1 ebook liên quan đn Jquery Mobile, nu có thì các bn s thy nó xut hin trong th mc chia s này) Phonegap cho ngi mi hc Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 7 I.Events 1 s kin events trong phonegap tng đi ging s kin trong javascript.1 hành đng (thao tác) đc thc hin trên thit b - ví d nh document object model (DOM) đã đc ti xong và do đó thit b  trng thái sn sàng “ready” - và hin ti phonegap có th thc hin 1 vài th đ tr li(đáp ng) li s kin này 1.1.Hiu thêm v events  đn gin hóa, ta hiu 1 event là bt c hành đng nào mà có th đc xác đnh (nhn bit) bi phonegap.trong lp trình javascript truyn thng, bt c phn t nào trên 1 trang page cng có th có các s kin event nào đó, và nó có th đc kích hot bi 1 vài mã javascript.ví d nh 1 s kin onrollover trên 1 link có th gây ra xut hin 1 bng pop-up, hay s kin onclick có th gây ra 1 bng hp thoi xem trc Tóm li, s kin events có th là click chut, 1 image loading, rolling over trên 1 link nào đó hay nhng đi tng DOM khác, vic la chn 1 trng input field trong 1 form, submitting 1 form, hay s kin gõ 1 phím bt kì trên bàn phím.v đa s thì tt c các dng s kin events trên cng có th đc s dng khi ta phát trin các ng dng s dng phonegap.tuy nhiên có nhng s kin ch đc đnh ngha bên trong phonegap nh sau :  deviceready  pause  resume  online  offline  backbutton  batterycritical  batterylow  batterystatus  menubutton  searchbutton  startcallbutton Phonegap cho ngi mi hc Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 8  endcallbutton  volumedownbutton  volumeupbutton trong tt c các s kin events trên thì s kin deviceready là quan trng nht mà ta phi xem xét ti.không có nó thì ng dng ca ta s không bit khi nào phonegap đã đc load hoàn toàn.khi nó đc kích hot, ta có th gi 1 cách an toàn bt c các hàm PhoneGap function nào và do đó có th ln lt truy cp an toàn vào các API bn đa khi s kin deviceready event đc kích hot, thì ta bit đc 2 điu : DOM đã đc load, và do vy đã có PhoneGap API 1.2.Cách s dng EVENTS LISTENER đ s dng bt c s kin event nào, thì ta s cn phi s dng 1 event listener.nh ví d sau : dùng đ xác đnh s kin deviceready.ta phi làm nh sau : <!DOCTYPE html> <html> <head> <title>PhoneGap Device Ready Example</title> <script type=”text/javascript” charset=”utf-8” src=”phonegap.js”></script> <script type=”text/javascript” charset=”utf-8”> document.addEventListener(“deviceready”, onDeviceReady, false); function onDeviceReady() { // call the phonegap api document.addEventListener(“pause”, onPause, false); document.addEventListener(“resume”, onResume, false); } function onPause(){ } function onResume(){ } </script> </head> <body> </body> Phonegap cho ngi mi hc Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 9 </html> Ví d trên nhc nh ta rng deviceready có th là 1 s kin nhng nó li không phi là s kin chun tc trong trình duyt, nó ch hot đng và nhn bit bi trong phonegap.nu ta th chy s kin này trong 1 trình duyt thông thng thì nó không bao gi đc kích hot 1.3.Hiu thêm v các dng s kin EVENT TYPES 1.3.1.Backbutton S kin backbutton đc kích hot khi ngi dùng n vào nút Back trên thit b Android  xác đnh s kin event này, thì ta cn đng ký 1 event listener nh sau : document.addEventListener(“backbutton”, onBackButton, false); function onBackButton(){ //handle the back button } Cng ging nh các s kin event khác thì ta không nên đng ký ging nh th này cho ti khi ta đã xác đnh đc s kin deviceready event: <!DOCTYPE html> <html> <head> <title>PhoneGap backbutton Example</title> <script type=”text/javascript” charset=”utf-8” src=”phonegap.js”></script> <script type=”text/javascript” charset=”utf-8”> document.addEventListener(“deviceready”, onDeviceReady, false); function onDeviceReady() { // Register the event listener document.addEventListener(“backbutton”, onBackButton, false); } // Handle the back button // function onBackButton() { Phonegap cho ngi mi hc Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 10 } </script> </head> <body> </body> </html> 1.3.2.Deviceready Nh đã nhc đn t trc, s kin deviceready là s kin quan trng nht mà ta có th xác đnh.theo đó ta cn phi xác đnh s kin này đu tiên trc khi ta làm bt c nhng gì khác bi vì khi nó đc kích hot thì đng ngha vi vic ta chc chn gi đc các PhoneGap API document.addEventListener(“deviceready”, onDeviceReady, false); function onDeviceReady(){ //ready! }  dành cho nhng ngi phát trin trên BlackBerry OS 4.6, thì RIM Browserfield không h tr hàm s kin event này, nên ta cn s dng PhoneGap.available đ thay th nh sau : function onLoad() { var intervalID = window.setInterval( function() { if (PhoneGap.available) { window.clearInterval(intervalID); onDeviceReady(); } }, 500 ); } function onDeviceReady() { // use the phonegap api! } [...]... Nexus One tr v bi n tho Passion n ph m) voles email: ngotrung.poli.t@gmail.com / www .phonegap. vn/forum 20 im ih c BlackBerry Bold 8900 tr v iPhone tr v thu c thi t l p trong iTunes c h tr device.name 2.1.3.C 8900 ) tb yv n phonegap l yv t b , ta s d ng thu device .phonegap var myDevicePhoneGap = device .phonegap; thu device .phonegap 2.1.4.C c h tr tb y v n n t ng thi t b Device Platform yv ah t b , ta s... email: ngotrung.poli.t@gmail.com / www .phonegap. vn/forum 17 im ih c ki n deviceready event listener ki event API cr i c a phonegap khi ki n deviceready event onDeviceReady() event listener m function event g i1 ki n pause 2 cho s ki n resume event 1.3.10.M t n v vi c ph n h i l ki n Button Events PhoneGap Button Example document.addEventListener... listener to detect if PhoneGap is ready // function onLoad() { document.addEventListener deviceready onDeviceReady, false); } // okay, PhoneGap is ready // function onDeviceReady() { email: ngotrung.poli.t@gmail.com / www .phonegap. vn/forum 22 im ih c } ng iv theo ta vi m onLoad() function addEventListener event handler b c bi t, ta mu ch n phonegap. js.ti p d ng... PhoneGap offline Example false); function onDeviceReady() { // Register the event listener } // Handle the offline event // function isOffline() { } email: ngotrung.poli.t@gmail.com / www .phonegap. vn/forum 16 im ih c 1.3.9.M t nv s Ta t o ra ng d ph n h i l n, ph n h i l ki n events ki n : PhoneGap Event... device.name a thi t b device .phonegap device.platform device.uuid ng device : n c a phonegap lo i c a thi t b ) s id c a thi t b device.Version nh y quan tr ng ph ng window object, do v c.hi 2 bi u tham chi u t thi t b device : //both of these reference the same device var myPhoneName = window.device.name; var myPhoneName = device.name; trong ph h cl yv a thi t b device n phonegap ID qu c t nh thi t... khi ta di chuy n n sang tr i hay sang ph i th l ta l ta cho n 1 k t qu tr n tr c Y.n u di chuy n n ra xa th ta c mi u t l chi u l n xu ng v c th m v n u ta c m l y thi t b v c m n ti im tb m, ng.n u ta di chuy n thi t b ra xa b ng theo tr c Y, v n u di chuy n n l i g n th ta cho thi t b xu ng m ta i trong h t a v ta di chuy n n sang ph i th ta cho n k t qu d c k t qu d l gi p ta h b t c c ch n l ta... ng i v c iphone email: ngotrung.poli.t@gmail.com / www .phonegap. vn/forum 33 im ih c tb nghi ng hay chuy trong h i u khi n 1 tr i b 6-3, trong i xuy n qua c ta s d ng ng ng i v t t t nhi n, c v s c c ng d ng s d ng gia t c k accelerometer email: ngotrung.poli.t@gmail.com / www .phonegap. vn/forum 34 im ih c email: ngotrung.poli.t@gmail.com / www .phonegap. vn/forum 35 im ih c 3.4.C ch s d i ng gia t c k... // Handle the menubutton // email: ngotrung.poli.t@gmail.com / www .phonegap. vn/forum 18 im ih c function onMenuButton() { } // Handle the searchbutton // function onSearchButton() { } ch c ch n r ng ng d ng event listeners, t a thi t b Menu, Back buttons email: ngotrung.poli.t@gmail.com / www .phonegap. vn/forum 19 im ih c II c v i thi t b , m 2.1 thi t b cg runtime... onResume(){ //handle the resume event } c s ki n deviceready PhoneGap resume Example function onDeviceReady() { // Register the event listener } // Handle the resume // function onResume() { } email: ngotrung.poli.t@gmail.com / www .phonegap. vn/forum 13 im ih c 1.3.6.Searchbutton S ki n searchbutton Search nh s ki t b android... search button } c s ki n deviceready PhoneGap searchbutton Example ffunction onDeviceReady() { // Register the event listener ton, false); } // Handle the search button // function onSearchButton() { } email: ngotrung.poli.t@gmail.com / www .phonegap. vn/forum 14 im ih c 1.3.7.Online S ki n online t khi 1 ng d ck tn . 10.3.show 152 Phonegap cho ngi mi hc Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www .phonegap. vn/forum 5 10.4.hide 153 LI NÓI U 1 đim cá nhân mình rt thích  Phonegap, đó. này đc da trên các cun ebook: “Beginning Phonegap - Thomas Myer”, PhoneGap Essentials - John M. Wargo”, “Apache Cordova Documentation 2.2.0 – Phonegap team”, và 1 s gii thích, đnh ngha. th mc chia s này) Phonegap cho ngi mi hc Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www .phonegap. vn/forum 7 I.Events 1 s kin events trong phonegap tng đi ging