Tạo các ứng dụng Web di động với HTML 5, Phần 1: Kết hợp HTML 5, các API định vị địa lý, và các dịch vụ Web để tạo ra các ứng dụng hỗn hợp di động

Tìm kiếm và theo vết các tọa độ vị trí để sử dụng trong các dịch vụ Web khác nhau

Trong phần đầu tiên của loạt bài năm phần này, bạn sẽ được cung cấp một trong những công nghệ mới phổ biến nhất có sẵn cho các ứng dụng web di động: định vị địa lý (xác định vị trí địa lý). Tất cả các máy điện thoại thông minh cao cấp đều có GPS gắn sẵn trên chúng, và bây giờ bạn sẽ tìm hiểu cách có thể sử dụng nó bằng một ứng dụng Web. Trong bài viết này, bạn sẽ học cách sử dụng các khía cạnh khác nhau của tiêu chuẩn định vị địa lý và cách sử dụng nó với một số dịch vụ Web phổ biến để tạo ra một ứng dụng hỗn hợp (mashup) di động thú vị.

Michael Galpin, Kiến trúc sư phần mềm, Ludi Labs

Michael Galpin đã phát triển phần mềm Java một cách chuyên nghiệp từ năm 1998. Ông hiện đang làm việc cho eBay. Ông đã có bằng về toán học của Viện Công nghệ California.



29 06 2010 (Xuất bản lần đầu tiên vào ngày 18 11 2011)

25.10.2010: Thêm các liên kết cho Phần 2 của loạt bài này trong các phần Giới thiệu về loạt bài này, Tóm tắt, và Tài nguyên.

02.06.2010: Thêm các liên kết cho Phần 3 của loạt bài này trong các phần Giới thiệu về loạt bài này, Tóm tắt, và Tài nguyên.

08.06.2010: Thêm các liên kết cho Phần 4 của loạt bài này trong các phần Giới thiệu về loạt bài này, Tóm tắt, và Tài nguyên.

29.06.2010: Thêm các liên kết cho Phần 5 của loạt bài này trong các phần Giới thiệu về loạt bài này, Tóm tắt, và Tài nguyên.

Giới thiệu về loạt bài này

HTML 5 là một công nghệ được quảng cáo thổi phồng rất nhiều, nhưng có lý do chính đáng. Nó hứa hẹn sẽ là một điểm bùng phát công nghệ để mang các khả năng ứng dụng của máy tính để bàn đến cho trình duyệt. Do có triển vọng đối với các trình duyệt truyền thống, nên nó thậm chí còn có nhiều tiềm năng hơn cho các trình duyệt di động. Hơn nữa, các trình duyệt di động phổ biến nhất đã chấp nhận và triển khai thực hiện nhiều phần quan trọng của đặc tả HTML 5. Trong loạt bài năm phần này, bạn sẽ xem xét kỹ hơn một số những công nghệ mới đó, là một phần của HTML 5, có thể có tác động rất lớn trong việc phát triển ứng dụng Web di động. Trong mỗi phần của loạt bài này, bạn sẽ phát triển một ứng dụng Web di động đang làm việc để giới thiệu một tính năng của HTML 5, có thể được sử dụng trên các trình duyệt web di động hiện đại giống như các trình duyệt đã thấy trên các thiết bị iPhone và các thiết bị dựa vào-Android.


Các điều kiện cần trước

Các từ viết tắt thông dụng

  • API: Giao diện lập trình ứng dụng
  • CSS: Bảng định kiểu xếp chồng
  • GPS: Hệ thống định vị toàn cầu
  • HTML: Ngôn ngữ đánh dấu siêu văn bản
  • JSONP: JSON có lớp đệm
  • SDK: Bộ công cụ cho nhà phát triển phần mềm
  • UI: Giao diện người dùng
  • W3C: Hiệp hội mạng toàn cầu

Trong bài viết này, bạn sẽ phát triển các ứng dụng Web bằng cách sử dụng các công nghệ Web mới nhất. Hầu hết các mã có ở đây chỉ là HTML, JavaScript và CSS — các công nghệ lõi của nhà phát triển Web bất kỳ. Điều quan trọng nhất mà bạn sẽ cần là các trình duyệt để thử nghiệm các ứng dụng. Với bài viết này, điều vô cùng cần thiết là bạn có Mozilla Firefox 3.5+, vì nó là một trình duyệt cho máy tính để bàn có hỗ trợ định vị địa lý. Tất nhiên bạn cũng phải thử nghiệm trên các trình duyệt di động, và bạn sẽ cần có các bản iPhone SDK và Android SKD mới nhất cho các trình duyệt đó. Trong bài viết này có sử dụng iPhone SDK 3.1.3 và Android SDK 2.1. Xem phần Tài nguyên để biết các liên kết.


Các vấn đề cơ bản: Bắt đầu tìm vị trí

Định vị địa lý tự nó có phần nào mới lạ. Nó cho phép bạn xác định xem người sử dụng đang ở đâu. Tuy nhiên, việc chỉ biết vị trí địa lý và ghi lại nó cho người dùng sẽ không có ích lắm. Tại sao mọi người lại quan tâm đến vĩ độ và kinh độ chính xác của họ? Đó là khi bạn bắt đầu sử dụng vị trí địa lý kết hợp với dữ liệu và các dịch vụ khác có thể sử dụng vị trí, ở đó bạn bắt đầu đưa ra một số kết quả thú vị. Hầu như tất cả các dịch vụ này sẽ cần vĩ độ và kinh độ của người dùng như là một phần của đầu vào của chúng. Thường thì việc định vị địa lý là tất cả mọi thứ bạn cần, vì vậy chúng ta hãy xem xét cách bạn nhận được vị trí địa lý. Liệt kê 1 cho thấy JavaScript API chuẩn cho việc định vị địa lý.

Liệt kê 1. Tìm một người dùng: getCurrentPosition
navigator.geolocation.getCurrentPosition(successCallback, 
errorCallback, options);

Đây là API cần thiết để định vị địa lý. Đối với một lớp lớn các ứng dụng, API là điều duy nhất mà bạn luôn cần. Đối tượng định vị địa lý là một phần của đối tượng trình chuyển hướng (navigator) tiêu chuẩn. Nó có một vài phương thức, nhưng phương thức thường được dùng nhất là getCurrentPosition. Việc truy cập thông tin một vị trí của người dùng là một hoạt động tốn kém (bạn có lẽ cần với tới một vệ tinh trong không gian) và đòi hỏi phải có sự đồng ý của người dùng, do đó đây là một hoạt động không đồng bộ. Các tham số của nó là các hàm gọi lại: một hàm cho thành công, và một hàm cho thất bại.

Hàm thành công sẽ truyền một tham số duy nhất về kiểu Position (vị trí). Đối tượng này sẽ có hai đặc tính: một đặc tính dấu thời gian và một đặc tính được gọi là coords của kiểu Coordinates (Các tọa độ). Một đối tượng Coordinates có một số đặc tính:

  • latitude (vĩ độ)
  • longitude (kinh độ)
  • altitude (độ cao)
  • accuracy (độ chính xác)
  • altitudeAccuracy (độ chính xác độ cao)
  • heading (tiêu đề)
  • speed (tốc độ)

Không phải tất cả các đặc tính này đều sẽ có sẵn trên tất cả các thiết bị, trừ vĩ độ, kinh độ và độ chính xác. Nếu geolocation API (API định vị địa lý) được hỗ trợ và các thiết bị có thể tìm ra vị trí của mình, thì bạn có thể hy vọng ở vĩ độ, kinh độ, và độ chính xác.

Hàm callback (gọi lại) lỗi sẽ truyền một tham số duy nhất của kiểu PositionError (Lỗi vị trí). Một cá thể PositionError sẽ có hai đặc tính: mã và thông báo. Thông báo này là riêng cho thiết bị, và rất có ích để gỡ lỗi. Mã cần có một trong ba giá trị sau:

  • PERMISSION_DENIED (1)
  • POSITION_UNAVAILABLE (2)
  • TIMEOUT (3)

Ứng dụng của bạn cần dựa vào mã này để hiển thị một thông báo lỗi thân thiện với người dùng.

Lưu ý, đặc tả W3C cũng tính đến một tham số thứ ba cho các tùy chọn. Các tùy chọn này bao gồm những thứ giống như một thời gian chờ để xác định vị trí của người dùng phải mất bao lâu. Tuy nhiên, tham số này vẫn chưa được hỗ trợ cho các thiết bị như iPhone, vì vậy không nên sử dụng nó. Bây giờ bạn đã xem xét chi tiết API này, hãy xem xét một ví dụ đơn giản để sử dụng nó.

Tích hợp với Twitter

Hiện nay câu hello world (chào thế giới) của ứng dụng hỗn hợp là để sử dụng Twitter theo một cách nào đó. Với ví dụ đầu tiên của mình, bạn sẽ sử dụng API tìm kiếm của Twitter. Nó hỗ trợ tìm kiếm các mẩu tin (tweet) từ một vị trí trong vòng bán kính cụ thể. Liệt kê 2 cho thấy việc tìm kiếm Twitter cục bộ.

Liệt kê 2. Tìm kiếm Twitter cục bộ
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width"/>
<title>Local Twitter Search</title>
<script type="text/javascript">
    function startSearch(){
        var gps = navigator.geolocation;
        if (gps){
            gps.getCurrentPosition(searchTwitter, 
                   function(error){
                alert("Got an error, code: " + error.code + " message: " 
+ error.message);
             });
        } else {
            searchTwitter();
        }
    }
    function searchTwitter(position){
        var query = "http://search.twitter.com/search.json?callback=showResults&q=";
        query += $("kwBox").value;
        if (position){
            var lat = position.coords.latitude;
            var long = position.coords.longitude;
            query += "&geocode=" + escape(lat + "," + long + ",50mi");
        }
        var script = document.createElement("script");
        script.src = query;
        document.getElementsByTagName("head")[0].appendChild(script);
    }
</script>
</head>
<body>
    <div id="main">
        <label for="kwBox">Search Twitter:</label>
        <input type="text" id="kwBox"/>
        <input type="button" value="Go!" onclick="startSearch()"/>
    </div>
    <div id="results">
    </div>
</body>
</html>

Người dùng có thể nhập một thuật ngữ tìm kiếm vào hộp văn bản. Nhấn chuột lên nút gọi hàm startSearch. Đây là nơi bạn sử dụng geolocation API. Trước tiên, bạn kiểm tra xem nó có sẵn chưa. Nếu có, thì bạn gọi getCurrentPosition API. Đối với cuộc gọi lại thành công, bạn sử dụng hàm searchTwitter. Đối với hàm callback lỗi, bạn truyền một tập kín đơn giản để chỉ hiển thị thông tin lỗi.

Hàm searchTwitter được gọi khi trình duyệt này xác định thành công vị trí đó. Ở đây bạn sử dụng vị trí được truyền tới hàm này để thêm một tham số geocode (mã hoá địa lý) cho truy vấn tìm kiếm Twitter của bạn. Ví dụ trong Liệt kê 2 tìm kiếm các mẩu tin ở vị trí đã xác định trong vòng 50 dặm. Để gọi Twitter, bạn sử dụng một thẻ kịch bản lệnh động, đây là một kỹ thuật thường được gọi là JSONP. API tìm kiếm của Twitter hỗ trợ thẻ này, và cho phép bạn gọi tìm kiếm Twitter trực tiếp từ trình duyệt, mà không cần có máy chủ nào. Thẻ này được chỉ thị bởi tham số callback trong truy vấn. Lưu ý là nó được thiết lập là showResults. Đó là tên của hàm sẽ được gọi ra. Nó không được hiển thị trong Liệt kê 2, do nó chỉ được sử dụng để tạo giao diện người dùng, nhưng nó lại có sẵn như là một phần của mã nguồn cho bài viết này (xem Tải về). Hình 1 cho thấy một ảnh chụp màn hình của mã này từ Liệt kê 2 đang chạy trên iPhone.

Hình 1. Tìm kiếm Twitter từ một máy iPhone
Ảnh chụo màn hình cho thấy các kết quả tìm kiếm từ các mẩu tin trong vòng 50 dặm của một máy iPhone

Ứng dụng này, giống như nhiều ứng dụng nhận biết vị trí khác, chỉ cần nhận được vị trí đó một lần. Tuy nhiên, các ứng dụng khác sẽ cần theo vết những người dùng khi họ đang di chuyển. Các ứng dụng đó sẽ cần sử dụng các API định vị địa lý khác, tiên tiến hơn.


Nâng cao hơn: Theo vết

Đôi khi ứng dụng của bạn cần không chỉ vị trí hiện tại của người dùng, mà còn cần được cập nhật mỗi khi người dùng thay đổi vị trí. Có một API dành cho việc đó và nó được gọi là watchPosition. Nó là rất giống với getCurrentPosition, có các tham số tương tự. Những có một khác biệt chính là nó sẽ trả về một ID (mã định danh). ID này có thể được sử dụng kết hợp với geolocation API cuối cùng, clearWatch. Hàm này lấy ra ID mà bạn nhận được từ watchPosition. Bạn thấy, khi bạn gọi watchPosition, trình duyệt sẽ tiếp tục gửi thông tin cập nhật đến hàm gọi lại thành công mà bạn đã truyền nó, cho đến khi bạn gọi clearWatch. Việc liên tục nhận được vị trí của người dùng thực sự có thể tiêu tốn pin của một thiết bị di động, do đó hãy sử dụng các API này thận trọng. Bây giờ hãy xem xét một ví dụ.

Tích hợp với Google Maps

Với ví dụ này, bạn sẽ sử dụng các Map API (API Bản đồ) của Google. Các API này được tối ưu hóa để sử dụng trên các thiết bị di động, với sự tập trung đặc biệt vào các nền tảng iPhone và Android. Điều này làm cho chúng trở nên rất hấp dẫn với các nhà phát triển Web di động, đặc biệt là khi bạn tạo ra các ứng dụng nhận biết vị trí. Ứng dụng mẫu dưới đây sẽ hiển thị vị trí của người dùng trên bản đồ, cập nhật bản đồ này mỗi khi có các thay đổi vị trí của người dùng. Liệt kê 3 cho thấy mã lập bản đồ này.

Liệt kê 3. Ứng dụng lập bản đồ có Định vị địa lý
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>I'm tracking you!</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
     sensor=true"></script> 
<script type="text/javascript">
    var trackerId = 0;
    var geocoder;
    var theUser = {};
    var map = {};
    function initialize() {
        geocoder = new google.maps.Geocoder();
        if (navigator.geolocation){
            var gps = navigator.geolocation;
            gps.getCurrentPosition(function(pos){
                var latLng = new google.maps.LatLng(pos.coords.
latitude,pos.coords.longitude);
                var opts = {zoom:12, center:latLng, mapTypeId: 
google.maps.MapTypeId.ROADMAP};
                map = new google.maps.Map($("map_canvas"), opts);
                theUser = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    title: "You!"
                });
                showLocation(pos);
            });
            trackerId = gps.watchPosition(function(pos){
                var latLng = new google.maps.LatLng(pos.coords.latitude,pos.
coords.longitude);
                map.setCenter(latLng);
                theUser.setPosition(latLng);
                showLocation(pos);
            });
        }
  }
</script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
    <div id="superbar">      
        <span class="msg">Current location: 
              <span id="location"></span>
          </span>
          <input type="button" value="Stop tracking me!" 
onclick="stopTracking()"/>
      </div>
  <div id="map_canvas" style="width:100%; height:90%; float:left; 
border: 1px solid black;">
  </div> 
</body> 
</html>

Một khi phần thân của tài liệu nạp, hàm initialize (khởi tạo) được gọi. Hàm này sẽ kiểm tra xem định vị địa lý có được hỗ trợ trên trình duyệt đó không. Nếu có, thì nó gọi getCurrentPosition, tương tự như ví dụ trước trong Liệt kê 2. Khi nó nhận được một vị trí, nó tạo một bản đồ bằng cách sử dụng Google Map API. Lưu ý cách sử dụng vĩ độ và kinh độ để tạo một cá thể của google.maps.LatLng. Đối tượng này được sử dụng để lấy tâm bản đồ. Tiếp theo, bạn tạo một điểm dấu trên bản đồ để diễn tả vị trí hiện tại của người dùng. Điểm dấu này một lần nữa sử dụng vĩ độ và kinh độ mà bạn nhận được từ geolocation API.

Sau khi tạo bản đồ này và đặt một điểm dấu trên nó, bạn bắt đầu theo vết người dùng. Bạn lấy ID được trả về từ watchPosition. Bất cứ khi nào nhận được một vị trí mới, bạn đặt lại tâm bản đồ trên vị trí mới, và di chuyển điểm dấu đến vị trí đó. Liệt kê 4 cho thấy nhiều hơn hai hàm mà bạn cần xem xét.

Liệt kê 4. Mã hoá địa lý và loại bỏ các hàm theo dõi
function showLocation(pos){
    var latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
    if (geocoder) {
        geocoder.geocode({'latLng': latLng}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                $("location").innerHTML = results[1].formatted_address;
            } 
          } 
        });
      }        
}
function stopTracking(){
    if (trackerId){
        navigator.geolocation.clearWatch(trackerId);
    }
}

Trong Liệt kê 3, hàm showLocation được gọi khi lần đầu trích ra bản đồ và khi nhận được một bản cập nhật vị trí của người dùng. Hàm này được chỉ rõ trong Liệt kê 4. Nó sử dụng một cá thể của google.maps.Geocoder (được tạo ra vào lúc bắt đầu của hàm initialize trong Liệt kê 3.) API này cho phép bạn thực hiện mã hoá địa lý, hoặc lấy ra một địa chỉ và biến nó thành tọa độ bản đồ (vĩ độ và kinh độ). Nó cũng thực hiện giải mã địa lý — lấy ra các tọa độ lập bản đồ và trả về một địa chỉ vật lý. Trong trường hợp này, bạn lấy các tọa độ được geolocation API tạo ra và sử dụng Google Maps API để giải mã địa lý chúng. Các kết quả này sau đó được hiển thị trên màn hình.

Hàm cuối cùng trong Liệt kê 4 là hàm stopTracking. Hàm này được gọi khi người dùng nhấn chuột vào nút được tạo ra trong HTML trong Liệt kê 3. Ở đây bạn sử dụng trackerId đã thu được khi lần đầu tiên bạn đã gọi hàm watchPosition. Bạn chỉ cần truyền hàm này đến hàm clearWatch và lúc này trình duyệt/thiết bị sẽ ngừng nhận vị trí của người dùng và cũng sẽ dừng gọi JavaScript của bạn. Hình 2 cho thấy một ảnh chụp màn hình của ứng dụng theo vết đang chạy.

Hình 2. Ứng dụng theo vết
Ảnh chụo màn hình cho thấy một bản đồ và dấu vị trí được tạo ra bằng ứng dụng theo vết mẫu

Tất nhiên, để thực sự thử nghiệm theo vết, bạn cần phải thay đổi vị trí. Việc sử dụng Google App Engine (Máy ứng dụng của Google) có thể là một công cụ có ích, vì nó cho phép bạn dễ dàng tải lên ứng dụng Web của bạn đến một vị trí có thể truy cập công khai. Sau đó, bạn có thể trực tiếp thử nghiệm từ thiết bị di động của bạn ở bất cứ nơi nào mà điện thoại của bạn có thể nhận được một kết nối di động tốt. Một khi bạn làm điều đó, bạn có thể di chuyển trên các phương tiện giao thông công cộng hoặc có ai đó chở bạn đi xung quanh và xem ứng dụng Web của bạn đáp ứng với vị trí thay đổi của bạn.


Tóm tắt

Bài viết này đã cho bạn thấy cách sử dụng các geolocation API trong một ứng dụng Web di động. GPS có thể nghe rất gợi cảm, nhưng lại phức tạp. Tuy nhiên, như bạn đã thấy, tiêu chuẩn W3C dùng cho định vị địa lý lại cung cấp một API rất đơn giản. Để nhận được vị trí của người dùng và theo vết vị trí đó theo thời gian thật là đơn giản. Từ đó bạn có thể truyền các tọa độ đến một loạt các dịch vụ Web có hỗ trợ vị trí, hoặc có lẽ bạn có dịch vụ nhận biết vị trí riêng của mình mà bạn đang phát triển. Trong Phần 2 của loạt bài này về HTML 5 và các ứng dụng Web di động, bạn sẽ xem xét cách lợi dụng bộ nhớ cục bộ để cải thiện hiệu năng của các ứng dụng Web di động.


Tải về

Mô tảTênKích thước
Article source codegeo.zip3KB

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=775359
ArticleTitle=Tạo các ứng dụng Web di động với HTML 5, Phần 1: Kết hợp HTML 5, các API định vị địa lý, và các dịch vụ Web để tạo ra các ứng dụng hỗn hợp di động
publish-date=06292010