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.

В начало

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

В этой статье мы разработаем 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 для решения этой задачи.

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.

<!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.

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

В начало

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

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

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

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

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 показан скриншот приложения отслеживания в действии.

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

В начало

Заключение

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

В начало

Загрузка

Информация о методах загрузки

Ресурсы

Научиться

• Оригинал статьи (EN).
  
  
• Создание мобильных Web-приложений с помощью HTML 5. Часть 2: Организация локального хранилища для мобильных Web-приложений с помощью HTML 5 (Michael Galpin, developerWorks, май 2010 г.): познакомьтесь с важными новыми функциями HTML 5 для беспроводных приложений. Стандартизация локального хранения и простой API позволяют хранить большие объемы данных на стороне клиента и повысить производительность.
  
  
• Создание мобильных Web-приложений с помощью HTML 5. Часть 3: Работа мобильных Web-приложений в автономном режиме с помощью HTML 5 (Michael Galpin, developerWorks, июнь 2010 г.): придайте своему приложению способность работать как с подключением к Интернету, так и без него, и научитесь определять, когда приложение переходит из офлайна в онлайн, и наоборот.
  
  
• Создание Ajax-приложений для мобильного Web (Michael Galpin, developerWorks, март 2010 г.): научитесь использовать Ajax, ключевую часть любого мобильного Web-приложения.
  
  
• Новые элементы HTML 5 (Elliotte Rusty Harold, developerWorks, август 2007 г.). HTML 5 – это не только JavaScript. Читайте о некоторых новых способах разметки HTML 5 (EN).
  
  
• Android и iPhone – войны браузеров. Часть 1: WebKit спешит на помощь (Frank Ableson, developerWorks, декабрь 2009 г.). Вам нравится подход использования HTML 5 для разработки мобильных Web-приложений, но вы хотите поместить свое приложение в iPhone App Store и Android Market? Читайте о том, как убить двух зайцев, в первой части этого цикла из двух статей (EN).
  
  
• Погружение в HTML 5: эта бесплатная книга дает представление о методах обнаружения и многих других особенностях HTML 5 (EN).
  
  
• Библиотека справочных материалов по Safari: этот ресурс удобен для тех, кто разрабатывает Web-приложения для iPhone.
  
  
• Спецификация HTML 5 W3C (рабочий проект, март 2010 г.): основополагающий источник сведений по HTML 5.
  
  
• Другие статьи этого автора (Michael Galpin, developerWorks, с апреля 2006 г. по настоящее время): читайте статьи об XML, Eclipse, Apache Geronimo, Ajax, API Googl и других технологиях.
  
  
• Мой developerWorks: настройте DeveloperWorks для себя.
  
  
• Сертификация по XML IBM: как стать сертифицированным разработчиком XML и смежных технологий IBM.
  
  

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

• Проект 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.
  
  

Об авторе

Оценить эту статью

Комментарии

В начало

Содержание

• Об этом цикле статей
• Предварительные замечания
• Введение
• Усложняем задачу: отслеживание
• Заключение
• Загрузка
• Ресурсы
• Об авторе
• Комментарии