OBJECT
đối tượng gia tốc kế ACCELERATION OBJECT là 1 đối tượng chỉ có thể đọc và nó chứa dữ liệu gia tốc kế được chụp lại tại 1 điểm xác định trong 1 thời điểm.và đối tượng này có các thuộc tính :
X - đại lương chuyển động trên trục X, được trình bày là 1 số Y - đại lương chuyển động trên trục Y, được trình bày là 1 số Z - đại lương chuyển động trên trục Z, được trình bày là 1 số
Timestamp – mốc thời gian lúc tạo ra, được trình bày trong mili giây
Đối tượng này được tạo ra và được cư trú trong phongegap và nó trả về 1 phương thức accelerometer method như ví dụ sau :
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError); //you now have access to an acceleration object
//which contains x, y, z, and timestamp data function onSuccess(acceleration) { alert(„Acceleration X: „ + acceleration.x + „\n‟ + „Acceleration Y: „ + acceleration.y + „\n‟ + „Acceleration Z: „ + acceleration.z + „\n‟ + „Timestamp: „ + acceleration.timestamp + „\n‟); };
Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 37 function onError() { alert(„Sorry! Error!‟); }; 3.5.Cách sử dụng các phương thức ACCELEROMETER METHODS 3.5.1.Phương thức getCurrentAcceleration
Để lấy về gia tốc kế hiện tại theo trục XYZ thì ta phải sử dụng phương thức accelerometer.getCurrentAcceleration như sau :
navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess,
accelerometerError);
dữ liệu acceleration data được trả về thông qua hàm accelerometerSuccess callback : function onSuccess(acceleration) { alert(„Acceleration X: „ + acceleration.x + „\n‟ + „Acceleration Y: „ + acceleration.y + „\n‟ + „Acceleration Z: „ + acceleration.z + „\n‟ + „Timestamp: „ + acceleration.timestamp + „\n‟) }; function onError() { alert(„ooooops!‟); }; navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
Chú ý: trên các thiết bị IOS, thì việc gọi phương thức getCurrentAcceleration() sẽ
không làm việc như cách mà ta nghĩ,dùng để thay thế cho current acceleration thì nó sẽ báo cáo về giá trị cuối cùng được báo cáo từ lời gọi PhoneGap accelerometer.để thay thế, ta sẽ cần sử dụng phương thức watchAcceleration()
Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 38 3.5.2.Phương thức watchAcceleration
Phương thức watchAcceleration cho phép ta lấy về dữ liệu gia tốc kế ở 1 khoảng thời gian chính xác.nếu ta thiết lập 1 biến chứa lời gọi phương thức và chuyển tiếp vào trong 1 tham số tần suất như là 1 trong những lựa chọn, thì ta sẽ lấy về dữ liệu gia tốc kế dựa trên 1 chu kì chuẩn như sau :
function onSuccess(acceleration) { alert(„Acceleration X: „ + acceleration.x + „\n‟ + „Acceleration Y: „ + acceleration.y + „\n‟ + „Acceleration Z: „ + acceleration.z + „\n‟ + „Timestamp: „ + acceleration.timestamp + „\n‟); }; function onError() { alert(„onError!‟); };
var options = { frequency: 1000 }; // Update every second
var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError,
options);
đoạn code ở trên sẽ tạo ra 1 thơng báo alert theo chu kì từng giây một.1 hàm hữu dụng có thể là 1 vài thứ giống như ở dưới mà trong đó các phần tử DOM ln được làm mới bên trong HTML, và do vậy nó cho ta biết sự in dữ liệu ra màn hình hữu dụng như sau :
function onSuccess(acceleration) {
var myX = document.getElementById(„my_x‟); var myY = document.getElementById(„my_y‟); var myZ = document.getElementById(„my_z‟);
var myT = document.getElementById(„my_timestamp‟); myX.innerHTML(acceleration.x); myY.innerHTML(acceleration.y); myZ.innerHTML(acceleration.z); myT.innerHTML(acceleration.timestamp); } function onError() { alert(„oooops!‟);
Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 39
};
var options = { frequency: 1000 }; // Update every second
var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError,
options);
để đoạn code trên hoạt đọng, ta phải chắc chắn là tạo ra các phần tử DOM tương ứng thích hợp như sau :
<div id=‟my_x‟></div> <div id=‟my_y‟></div> <div id=‟my_z‟></div>
<div id=‟my_timestamp‟></div>
Chú ý: trong iOS thì gia tốc kế được quan tâm đặc biệt, do vậy phonegap sẽ bị giới hạn mức chu kỳ nhỏ nhất là 40 mili giây và lớn nhất là 1000 mili giây.do vậy nếu ta yêu cầu 1 cập nhật có chu kỳ là 3000 mili giây(hay là 3 giây) thì phonegap sẽ yêu cầu 1 chu kỳ là 1000 mili giây trên thiết bị nhưng sẽ gọi hàm callback thành công lại dựa vào yêu cầu là chu kỳ 3000 mili giây
3.5.3.Phương thức clearWatch
Để ngừng việc xem các dữ liệu gia tốc kế được tạo bởi phương thức watchAcceleration(), thì ta phải sử dụng phương thức clearWatch() và tham chiếu tới biến mà ta vừa tạo ra từ trước như sau :
navigator.accelerometer.clearWatch(watchID);
thông thường, ta sẽ kích hoạt sự kiện này thơng qua 1 nút click như sau : <button onclick=”stopWatch();”>Stop Watching</button>
Tất nhiên, ta cũng có thể gán sự kiện này tới 1 vài loại chu kỳ như sau : thu thập dữ liệu trong 30 giây rồi ngừng lại
Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 40
3.6.Lựa chọn cấu hình ACCELEROMETER OPTION
Để thiết lập tần số là 5 giây, ta làm như sau :
var options = { frequency: 5000 }; // Update every 5 seconds
var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
để thiết lập tần số thành nửa giây thì ta sử dụng như sau :
var options = { frequency: 500 }; // Update every .5 seconds
var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options); 3.7.Ví dụ về cách sử dụng gia tốc kế ACCELEROMETER <!DOCTYPE html> <html> <head> <title>Acceleration Example</title>
<script type=”text/javascript” charset=”utf-8” src=”phonegap.js”></script> <script type=”text/javascript” charset=”utf-8”>
var watchID = null;
// Wait for PhoneGap to load
document.addEventListener(“deviceready”, onDeviceReady, false); // PhoneGap is ready, start watching
function onDeviceReady() { startWatch();
}
// Start watching the acceleration function startWatch() {
// Update acceleration every 3 seconds var options = { frequency: 3000 };
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError,
options);
Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 41
// Stop watching the acceleration function stopWatch() { if (watchID) { navigator.accelerometer.clearWatch(watchID); watchID = null; } }
// onSuccess: Get a snapshot of the current acceleration function onSuccess(acceleration) {
var element = document.getElementById(„accelerometer‟);
element.innerHTML = „Acceleration X: „ + acceleration.x + „<br />‟ + „Acceleration Y: „ + acceleration.y + „<br />‟ +
„Acceleration Z: „ + acceleration.z + „<br />‟ + „Timestamp: „ + acceleration.timestamp + „<br />‟;
}
// onError: Failed to get the acceleration // function onError() { alert(„oooops!‟); } </script> </head> <body>
<div id=”accelerometer”>Waiting for accelerometer...</div> <button onclick=”stopWatch();”>Stop Watching</button> </body>
</html>
Cách thức ví dụ hoạt động
Khi ứng dụng vừa load xong thì hàm startWatch() được kích hoạt.hàm này sử dụng phương thức watchAcceleration() để khởi tạo việc xem dữ liệu gia tốc kế và báo cáo lại thông tin về tọa độ trục XYZ và timestamp rồi in ra hiện thị HTML
Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 42
IV.Ví trí địa lý Geolocation
4.1.Thế nào là vị trí địa lý Geolocation ?
Geolocation bao hàm cách xác định vị trí địa lý thật của 1 thiết bị - trong trường hợp này là điện thoại smartphone mà ta sử dụng.cách thông thường nhất để xác định vị trí địa lý của 1 thiết bị là sử dụng tính năng GPS chứa bên trong smartphone – dùng để xác định kinh độ và vĩ độ
Tuy nhiên, 1 vài thiết bị có thể sử dụng những dịch vụ khác để suy luận ra 1 ví trí – ví dụ như : 1 địa chỉ IP, xác định tần số radio (RFID), địa chỉ truy cập wifi (MAC), hay trạm phát sóng.bởi vì có rất nhiều phương thức khác nhau được sử dụng để thu thập các tọa độ ví trí, do vậy khơng ai có thể đảm bảo rằng phonegap API sẽ trả về vị trí thật sự của thiết bị
4.2.Cách sử dụng Geolocation
Lí do hiển nhiên nhất để sử dụng Geolocation gần đây là xu hướng dùng để xác định nơi mà có 1 vài thứ xảy ra.ví dụ như dữ liệu Geolocation được thêm vào các bức ảnh hay trên các mạng xã hội, …
Tuy nhiên các ứng dụng Geolocation chử yếu chỉ rõ các vị trí ở thế giới thật ( giống như nhà hàng, quán bar, …) và kết hợp chúng với thiết bị trên tay người sử dụng
Theo đó có 3 cách sáng tạo mà ta có thể thêm dữ liệu geolocation vào bất cứ ứng dụng nào :
Không chỉ thêm kinh độ và vĩ độ mà còn thêm vào tiêu đề và độ cao vào các bức ảnh Cho phép người dùng tích vào bất cứ tọa độ do đó họ có thể lưu giữ được dấu vết
quãng đường mình đã đi
4.3.Các mẫu ứng dụng về Geolocation
Các ứng dụng về Geolocation nổi tiếng là “foursquare” (hình 8-1) và “Gowalla” (hình 8-2).cả 2 ứng dụng đều là miễn phí và tương thích với các nền tảng thiết bị khác nhau.ta có thể đăng ký và bắt đầu sử dụng chúng.nếu ta đang ở trong 1 nhà hàng ăn hay 1 quán bar thì ta có thể sử dụng chúng để tích vào và sử dụng facebook hay twitter để thơng báo cho bạn bè biết nơi ta đang có mặt
Ngơ Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 43
Cả 2 ứng dụng “Gowalla” và “foursquare” đều hướng tới mỗi trường mạng xã hội – những người sử dụng khơng chỉ tích vào vị trí của mình mà còn truy cập được vào các cuộc hẹn và các lời đề nghị được tạo bởi vị trí của các nhà bán lẻ.
Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 44
Tất nhiên, nếu ta là người dùng facebook hay google+, thì ta có thể tham gia vào trong các games liên quan đến geolocation.như hình 8-3, các địa điểm trong facebook cho phép ta đăng ký 1 vị trí và sau đó nói cho những người bạn khác nơi mà ta có mặt
Trên google+, ta có thể dễ dàng đăng ký 1 địa điểm bằng cách tích vào ơ checkbox ở góc phía trên bên phải của trang như hình 8-4.sau đó ta có thể lựa chọn 1 ví trí từ danh sách các địa điểm lân cận và thêm 1 bản ghi chú và 1 bức ảnh và đăng nó lên
Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 45
4.4.Các đối tượng POSITION, POSITIONERROR, và COORDINATES COORDINATES
PhoneGap Geolocation API sử dụng 3 đối tượng chỉ đọc chứa các thông tin geolocation : Position
PositionError Coordinates
Mỗi đối tượng trong các đối tượng trên được tạo ra và tính tốn khi ta sử dụng các phương thức khác nhau, và dữ liệu được trả về giống như 1 phần của các hàm gọi lại callback
4.4.1.Đối tượng Position Object
Đối tượng Position Object chứa các tọa độ được tạo ra bởi geolocation API và nó gồm 2 thuộc tinh sau :
Coords – đây là 1 tập các tọa độ địa lý (như kinh độ, vĩ độ, độ cao,..) Timestamp – thời điểm được tạo tính bằng mili giây
Ví dụ gọi hàm geolocation.getCurrentPosition() như ở ví dụ dưới thì kết quả trả về gồm có kinh độ, vĩ độ, độ cao, độ chính xác, độ chính xác độ cao, tiêu đề, tấc độ, và timestamp, được truyền vào hàm onSuccess :
var onSuccess = function(position) {
alert(„Latitude: „ + position.coords.latitude + „\n‟ + „Longitude: „ + position.coords.longitude + „\n‟ + „Altitude: „ + position.coords.altitude + „\n‟ + „Accuracy: „ + position.coords.accuracy + „\n‟ +
„Altitude Accuracy: „ + position.coords.altitudeAccuracy + „\n‟ + „Heading: „ + position.coords.heading + „\n‟ +
„Speed: „ + position.coords.speed + „\n‟ +
„Timestamp: „ + new Date(position.timestamp) + „\n‟);
}
function onError(error) {
alert(„code: „ + error.code + „\n‟ + „message: „ + error.message + „\n‟); }
Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 46
navigator.geolocation.getCurrentPosition(onSuccess, onError);
4.4.2.Đối tượng PositionError
như ta nhìn thấy trong ví dụ trước thì ta cũng có khả năng truy cập vào 1 hàm onError callback.hàm này trả về 2 thuộc tính của vấn đề là error code và error message
error code sẽ là 1 trong những lỗi đã được định nghĩa trước như sau :
PositionError.PERMISSION_DENIED PositionError.POSITION_UNAVAILABLE PositionError.TIMEOUT
Và error message sẽ được miêu tả chi tiết lỗi gặp phải
4.4.3.Đối tượng Coordinates Object
Đối tượng Coordinates Object bao gồm 1 tập các thuộc tính chỉ đọc.ta đã gặp chúng trong ví dụ trước như là 1 phần của đối tượng Position object.trong thực tế, thì dữ liệu
Coordinates được đính thêm vào đối tượng Position object và sau đó được trả về thơng qua hàm onSuccess
Các thuộc tính của đối tượng Coordinates object: Vĩ độ latitude – là kiểm số thực
Kinh độ longitude - là kiểm số thực
Dộ cao altitude – độ cao tính bằng m so với mực nước biển
Dộ chính xác accuracy – là độ chính xác của việc đọc vĩ độ/kinh độ Dộ chính xác altitudeAccuracy – là độ chính xác của độ cao
Tiêu đề heading – là hướng di chuyển Tấc độ speed – là tấc độ so với mặt đất (m/s)
4.5.Ví dụ minh họa về geolocation
<!DOCTYPE html> <html>
<head>
<title>Device Properties Example</title>
<script type=”text/javascript” charset=”utf-8” src=”phonegap.js”></script> <script type=”text/javascript” charset=”utf-8”>
Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 47
document.addEventListener(“deviceready”, onDeviceReady, false); var watchID = null;
function onDeviceReady() { // Update every 3 seconds
var options = { frequency: 3000 };
watchID = navigator.geolocation.watchPosition(onSuccess, onError, options); }
// onSuccess Geolocation //
function onSuccess(position) {
var element = document.getElementById(„geolocation‟);
element.innerHTML =‟Latitude: „ + position.coords.latitude + „<br />‟ + „Longitude: „ + position.coords.longitude + „<br />‟ +
„<hr />‟ + element.innerHTML; }
// onError Callback receives a PositionError object // function onError(error) { alert(„code: „ + error.code + „\n‟ + „message: „ + error.message + „\n‟); } </script> </head> <body> <p id=”geolocation”>Watching geolocation...</p> </body> </html> Cách ví dụ hoạt động
Khi ứng dụng được tải xong thì phương thức watchPosition() được kích hoạt và cứ mỗi 3 giây thì thiết bị lại nhận được 1 cập nhật mới về kinh độ và vĩ độ
Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 48
4.6.Cách cải thiện giao diện và trải nghiệm của người dùng
Nếu ta nhìn vào giao diện của ứng dụng geolocation mà ta đã tạo ra ở trên thì ta sẽ nhận thấy nó khơng được đẹp và nó trơng giống như hình 8-5.thực tế thì, tất cả những gì nó thực hiện là thêm liên tục các thơng tin về geolocation vào trong màn hình cho tới khi ta tắt nó
Để tiến hành giao diện UI, đầu tiên ta phải chắc chắn rằng project của ta có các thư mục jQTouch cần thiết ở bên trong nó như đã được mơ tả trong chương trước.lưu ý đặt lên đầu
đoạn code sau đoạn script tải phonegap.js:
<style type=”text/css” media=”screen”>@import “jqtouch/jqtouch.css”;</style> <style type=”text/css” media=”screen”>@import “themes/jqt/theme.css”;</style> <script src=”jqtouch/jquery-1.4.2.js” type=”text/javascript” charset=”utf-8”></script> <script src=”jqtouch/jqtouch.js” type=”application/x-javascript” charset=”utf-8”></script> <script type=”text/javascript” charset=”utf-8”>
var jQT = new $.jQTouch({ icon: „jqtouch.png‟,
Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 49 icon4: „jqtouch4.png‟, addGlossToIcon: false, startupScreen: „jqt_startup.png‟, statusBar: „black‟, preloadImages: [ „themes/jqt/img/activeButton.png‟, „themes/jqt/img/back_button.png‟, „themes/jqt/img/back_button_clicked.png‟, „themes/jqt/img/blueButton.png‟, „themes/jqt/img/button.png‟, „themes/jqt/img/button_clicked.png‟, „themes/jqt/img/grayButton.png‟, „themes/jqt/img/greenButton.png‟, „themes/jqt/img/redButton.png‟, „themes/jqt/img/whiteButton.png‟, „themes/jqt/img/loading.gif‟ ] }); </script>
Tiếp theo, ta cần 1 đoạn HTML đặt trong thẻ <body> như sau : <div id=”home” class=”current”>
<div class=”toolbar”> <h1>Geolocation</h1> </div>
<p id=”geolocation”>Watching geolocation...</p> </div>
Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 50
Đây vẫn chưa phải là giao diện UI đẹp, nhưng nó nhìn đẹp hơn ví dụ gốc.làm cách nào ta có thể cải tiến nó ? đơn giản để làm được điều này, ta có thể đơn giản hóa dữ liệu trả về từ hàm onSuccess function.để thay thế việc in lan man tồn bộ thơng tin, ta có thể làm như sau :
function onSuccess(position) {
var element = document.getElementById(„geolocation‟);
element.innerHTML =‟Position: „ + position.coords.latitude + „, „ + + position.coords.longitude + „<br />‟ +
„<br/>‟ + element.innerHTML; }
Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 52
V.Media
5.1.Các Media Files là gì ?
Media API cho phép ta ghi lại và chơi các file âm thanh audio trên 1 thiết bị.đặc biệt là ta có thể chạy các files audio được load trực tiếp trên thiết bị hay chơi các files audio tải về thông qua internet
Chú ý: 1 điều quan trọng cần phải nhớ rằng là thực thi PhoneGap hiện tại không theo chuẩn của W3C giành cho media, và bất cứ các thực thi trong tương lai có thể
xung đột với các APIs hiện tại.xa hơn nữa thì các Media API chỉ tương thức với các thiết
bị Android và iOS
5.2.Cách sử dụng các Media Files
Có khả năng chơi music hat các audio files khác từ trong smartphone 1 cách khá thuận tiện.ví dụ, nếu ta đang trên 1 hành trình dài và khơng có 1 quyển sách nào trên tay, khơng thành vấn đề, ta có thể nghe 1 cuốn sách audio
Xa hơn, khả năng ghi lại audio cũng trở nên thuận tiện.nếu ta đang chờ cho 1 cuộc hẹn nào