Создание мобильных Web-приложений с применением HTML 5: Часть 1. Комбинирование HTML 5, API-интерфейсов геолокации и Web-сервисов для создания гибридных мобильных приложений

Фцнкции поиска и отслеживания координат местоположения для использования в различных Web-сервисах

В этой статье мы рассмотрим различные аспекты стандарта геолокации и способы его применения с некоторыми популярными Web-сервисами для создания интересных гибридных мобильных приложений.

Майкл Галпин, инженер по программному обеспечению, Vitria Technology

Майкл Галпин (Michael Galpin) имеет учёную степень по математике в Калифорнийском Технологическом институте. Он является Java-разработчиком с конца 90-х гг. и работает инженером по программному обеспечению в Vitria Technology, в Саннивейл, Калифорния.



10.02.2012 (Впервые опубликовано 06.05.2010)

25 мая 2010 г.: добавлены ссылки на часть 2 этого цикла в разделах "Об этом цикле статей", "Заключение" и "Ресурсы".

2 июня 2010 г.: добавлены ссылки на часть 3 этого цикла в разделах "Об этом цикле статей", "Заключение" и "Ресурсы".

8 июня 2010 г.: добавлены ссылки на часть 4 этого цикла в разделах "Об этом цикле статей", "Заключение" и "Ресурсы".

29 июня 2010 г.: добавлены ссылки на часть 5 этого цикла в разделах "Об этом цикле статей", "Заключение" и "Ресурсы".

Об этом цикле статей

HTML 5 – чрезвычайно популярная технология, и тому есть уважительная причина. Она обещает стать технологической переломной точкой в процессе переноса настольных приложений в браузер. Она перспективна для традиционных браузеров, но еще больше возможностей обещает браузерам мобильным. Более того, разработчики самых популярных мобильных браузеров уже освоили и реализовали многие важные элементы спецификации HTML 5. В этом цикле из пяти статей мы рассмотрим некоторые из этих новых технологий, которые входят в HTML 5 и могут оказать огромное влияние на разработку мобильных Web-приложений. В каждой статье мы будем разрабатывать какое-нибудь действующее мобильное Web-приложение, демонстрирующее функции HTML 5, которое можно использовать с современными мобильными Web-браузерами вроде тех, что работают на устройствах iPhone и Android.


Предварительные замечания

Часто используемые сокращения

  • API: Application Programming Interface – интерфейс программирования приложений
  • CSS: Cascading stylesheet – каскадная таблица стилей
  • GPS: Global Positioning System – глобальная система позиционирования
  • HTML: Hypertext Markup Language – язык гипертекстовой разметки
  • JSONP: JSON with padding – JSON с грунтованием
  • SDK: Software Developer Kit – пакет ПО разработчика
  • UI: User Interface – пользовательский интерфейс
  • W3C: World Wide Web Consortium

В этой статье мы разработаем Web-приложение с использованием новейших Web-технологий. Большая часть кода – это просто HTML, JavaScript и CSS – основные технологии любого Web-разработчика. Главное, что вам понадобится – это браузеры для тестирования. Для этой статьи настоятельно рекомендуется Mozilla Firefox 3.5+, так как это настольный браузер, поддерживающий геолокацию. Конечно, приложение нужно будет протестировать и на мобильных браузерах, так что понадобятся последние SDK iPhone и Android. В этой статье используются iPhone SDK 3.1.3 и Android SDK 2.1. Ссылки приведены в разделе Ресурсы.


Введение

Геолокация – это нечто новое. Она позволяет определить, где находится пользователь. Однако просто знать свое местоположение не так уж полезно. Что проку в точном определении собственной широты и долготы? Но если использовать их в сочетании с другими данными и сервисами, способными определять местоположение, вы начинаете получать некоторые интересные результаты. Почти все эти сервисы используют координаты широты и долготы пользователя в качестве входных данных. Часто это все, что нужно, так что давайте посмотрим, как это сделать. Листинг 1 демонстрирует стандартный API JavaScript для решения этой задачи.

Листинг 1. Определение местоположения пользователя: getCurrentPosition
navigator.geolocation.getCurrentPosition(successCallback, 
errorCallback, options);

Это важный API для геолокации. Для широкого класса приложений это единственное, что требуется. Объект геолокации является частью стандартного объекта навигатора. У него есть несколько методов, но наиболее распространенный – это getCurrentPosition. Получение местоположения пользователя – дорогостоящая операция (нужно достать до спутника в космосе!), которая требует согласия пользователя, так что это асинхронная операция. Ее параметры – это функции обратного вызова: одна на случай успеха и одна на случай отказа.

Функции успеха передается один параметр типа Position. Это объект с двумя свойствами: свойством timestamp и свойством coords типа Coordinates. Объект Coordinates имеет несколько свойств:

  • latitude (широта)
  • longitude (долгота)
  • altitude (высота)
  • accuracy (точность)
  • altitudeAccuracy (точность определения высоты)
  • heading (направление движения)
  • speed (скорость)

За исключением широты, долготы и точности, эти свойства доступны не на всех устройствах. Если API геолокации поддерживается, и устройство способно определять свое положение, можно считать, что широта, долгота, и точность определены.

Функция ошибки callback получает один параметр типа PositionError. Экземпляр PositionError будет иметь два свойства: code и message. Первое зависит от конкретного устройства и полезно для целей отладки. Code может принимать одно из трех значений:

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

Приложение должно опираться на этот код для отображения пользователю наглядных сообщений об ошибке.

Отметим, что спецификация W3C допускает и третий параметр. Это тайм-аут на время определения местоположения пользователя. Однако он пока не поддерживается устройствами типа iPhone, поэтому использовать его не рекомендуется. Теперь, когда нам знакомы детали API, рассмотрим простой пример его применения.

Интеграция с Twitter

Hello world гибридных приложений сегодня – это работа с Twitter. Для первого примера воспользуемся API поиска Twitter. Он поддерживает поиск твитов в заданном радиусе от местоположения. Листинг 2 демонстрирует локальный поиск Twitter.

Листинг 2. Локальный поиск Twitter
<!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>

Пользователь может ввести поисковый запрос в текстовое поле. Нажатие кнопки вызывает функцию startSearch. Здесь-то мы и воспользуемся API Geolocation. Сначала убедимся, что это возможно. Если да, то обратимся к API getCurrentPosition. В случае успешного обратного вызова используем функцию searchTwitter. В случае ошибки функции callback просто передадим функцию closure с отображением информации об ошибке.

Когда местоположение успешно определено браузером, вызывается функция searchTwitter. При этом переданная функции позиция используется для добавления параметра geocode в поисковый запрос Twitter. Пример, приведенный в листинге 2, ищет твиты в пределах 50 миль от определенного местоположения. Чтобы вызвать Twitter, воспользуемся тегом динамического сценария – этот метод часто называют JSONP. Он поддерживается поисковым API Twitter и позволяет вызывать механизм поиска Twitter непосредственно из браузера, без необходимости в каких-либо серверах. На это указывает параметр запроса callback. Заметьте, что ему присвоено значение showResults. Это имя функции, которая будет вызвана. Она не показана в листинге 2, так как используется только для создания пользовательского интерфейса, но включена в исходный код для этой статьи (см. раздел Загрузки). На рисунке 1 приведен скриншот кода из листинга 2, выполненного на iPhone.

Рисунок 1. Поиск в Twitter через iPhone
Скриншот, показывающий результаты поиска твитов в пределах 50 миль от iPhone

Это приложение, как и многие другие программы с определением местоположения, требует лишь однократного ввода координат. Однако другие программы должны отслеживать местоположение пользователя в движении. Для них понадобятся другие, более развитые API геолокации.


Усложняем задачу: отслеживание

Иногда приложению требуется не только знать текущее местоположение пользователя, но обновлять его каждый раз, когда пользователь меняет местоположение. Для этого существует API, который называется watchPosition. Он очень похож на getCurrentPosition и получает те же параметры. Основное отличие заключается в том, что он возвращает идентификатор. Этот идентификатор может использоваться в сочетании с последним API геолокации clearWatch. Данная функция принимает идентификатор, полученный от watchPosition. После вызова watchPosition браузер продолжает отправлять обновления переданной ему функции успешного обратного вызова до тех пор, пока не будет вызвана функция clearWatch. Непрерывное получение местоположения пользователя может быстро разрядить батарею мобильного устройства, так что эти API следует использовать с большой осторожностью. Рассмотрим пример.

Интеграция с Google Maps

Для этого примера используем API карты Google. Они оптимизированы для мобильных устройств с особым акцентом на платформы iPhone и Android. Это делает их очень привлекательными для разработчиков мобильных Web-сайтов, особенно при создании приложений с использованием местоположения. Приведенный ниже пример приложения просто показывает местоположение пользователя на карте, обновляя карту всякий раз при изменении этого местоположения. Соответствующий код приведен в листинге 3.

Листинг 3. Картографическое приложение с геолокацией
<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>

Сразу после загрузки тела документа вызывается функция initialize. Она проверяет, поддерживается ли геолокация браузером. Если да, то вызывается getCurrentPosition, как в предыдущем примере из листинга 2. Когда функция получает данные о местоположении, она создает карту, используя API Google Map. Обратите внимание на то, как широта и долгота используются для создания экземпляра google.maps.LatLng. Это объект, используемый для центровки карты. Затем создается маркер, показывающий на карте текущее местоположение пользователя. Маркер вновь использует широту и долготу, полученные от API геолокации.

После создания карты и нанесения на нее маркера начинается отслеживание пользователя. Идентификатор поступает из watchPosition. Всякий раз, когда определено новое местоположение, карта центрируется на новом месте, и маркер перемещается в это место. В листинге 4 показаны еще две функции, на которые следует обратить внимание.

Листинг 4. Функции геокодирования и отмены отслеживания
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);
    }
}

В листинге 3 при первоначальной прорисовке карты и при обновлении местоположения пользователя вызывается функция showLocation. Эта функция показана в листинге 4. Он использует экземпляр google.maps.Geocoder (созданный функцией initialize в начале листинга 3.) Этот API позволяет выполнять геокодирование, или принятие адреса и его преобразование в координаты (широта и долгота). Он выполняет и геодекодирование – принимая координаты и возвращая физический адрес. В данном случае геодекодирование координат, полученных от API геолокации, выполняется с помощью API Google Maps. Затем результаты отображаются на экране.

Последняя функция в листинге 4 – это stopTracking. Она вызывается, когда пользователь нажимает кнопку, созданную в HTML в листинге 3. Здесь используется идентификатор trackerId, полученный при первом обращении к функции watchPosition. Вы просто передаете его функции clearWatch и браузер/устройство прекращает определять местоположение пользователя и обращаться к вашему сценарию JavaScript. На рисунке 2 показан скриншот приложения отслеживания в действии.

Рисунок 2. Приложение отслеживания
Скриншот, показывающий карту и маркер местоположения, созданный примером приложения отслеживания

Конечно, чтобы по-настоящему проверить отслеживание, нужно изменить местоположение. Полезным инструментом может стать Google App Engine, поскольку он позволяет легко загружать Web-приложения в общедоступные места. Затем их можно тестировать прямо со своего мобильного устройства везде, где оно может установить хорошую связь с сотовой сетью. Сделав это, вы можете сесть на общественный транспорт или поездить с кем-то на машине и понаблюдать, как ваше Web-приложение реагирует на изменение местоположения.


Заключение

В этой статье показано, как использовать API геолокации в мобильном Web-приложении. GPS может показаться очень привлекательным, но это сложная технология. Однако, как видите, стандарт геолокации W3C предоставляет очень простой API. Это позволяет получить информацию о местоположении пользователя и отслеживать его. Из этого приложения можно передавать координаты различным Web-сервисам, которые поддерживают местоположение, или даже своему собственному сервису, который вы разрабатываете. Во второй части этого цикла статей об HTML 5 и мобильных Web-приложениях мы рассмотрим, как воспользоваться преимуществом локального хранилища для повышения производительности мобильного Web-приложения.


Загрузка

ОписаниеИмяРазмер
Исходный код для статьиgeo.zip3 КБ

Ресурсы

Научиться

Получить продукты и технологии

  • Проект Modernizr: мощная утилита для поиска функций HTML 5, в том числе таких, как localStorage, Web Workers, applicationCache и другие.
  • Web-сайт разработчиков Android: загрузите Android SDK, познакомьтесь с материалами по API и следите за последними новостями о платформе Android.
  • SDK iPhone: загрузите последнюю версию SDK iPhone для разработки приложений, работающих на iPAD, iPhone и iPod Touch.
  • Проект Open Source Android: получите открытый исходный код мобильной платформы Android.
  • SDK Google App Engine: загрузите инструменты Java™ и Python для создания масштабируемых Web-приложений с использованием Google.

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=XML, Open source
ArticleID=792768
ArticleTitle=Создание мобильных Web-приложений с применением HTML 5: Часть 1. Комбинирование HTML 5, API-интерфейсов геолокации и Web-сервисов для создания гибридных мобильных приложений
publish-date=02102012