tài liệu tổng quát về 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! } [...]... Android, BlackBerry, và iPhone 2.1.3.Cách lấy về thông tin phiên bản phonegap để lấy về thông tin phiên bản phonegap trên thiết bị, ta sử dụng thuộc tính device .phonegap như sau : var myDevicePhoneGap = device .phonegap; thuộc tính device .phonegap được hỗ trợ trên các thiết bị Android, Blackberry, và iPhone 2.1.4.Cách lấy về nền tảng thiết bị Device Platform cách lấy về tên của hệ điều hành trên thiết bị,... phẩm.ví dụ, đây là 1 danh sách của các giá trị trả về cho các loại điện thoại khác nhau :  Android Nexus One trả về là Passion ( đây là tên mã sản phẩm)  Android Motorola Droid trả về là voles Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www .phonegap. vn/forum 20 Phonegap cho người mới học  BlackBerry Bold 8900 trả về là 8900  iPhone trả về là tên được thiết lập trong iTunes( ví dụ như Tom‟s... ngotrung.poli.t@gmail.com / www .phonegap. vn/forum 21 Phonegap cho người mới học 2.1.6.Cách lấy về thông tin phiên bản hệ điều hành cách lấy về tên phiên bản hệ điều hành của thiết bị, ta sử dụng device.version như sau : var myDeviceOS = device.version; phụ thuộc vào hệ điều hành, ta sẽ lấy được về các giá trị khác nhau.ví dụ trên android, hệ điều hành Froyo OS trả về là 2.2 và Éclair OS trả về là 2.1, 2.0.1 hay... Trung – email: ngotrung.poli.t@gmail.com / www .phonegap. vn/forum 16 Phonegap cho người mới học 1.3.9.Một ví dụ đơn giản về sự phản hồi lại các sự kiện events Ta tạo ra ứng dụng đơn giản, phản hồi lại các sự kiện pause và resume events : PhoneGap Event Example . 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. 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. 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ỡ