Criando Aplicativos da Web com HTML 5, Parte 1: Combinar HTML 5, APIs de Localização Geográfica e Serviços da Web para Criar Mashups Móveis

Localizar e controlar coordenadas a serem usadas em vários serviços da web

Na primeira parte desta série em cinco partes, você irá conhecer uma das novas tecnologias mais populares disponíveis para aplicativos da web para dispositivos móveis: localização geográfica. Todo os smartphones de primeira linha têm GPS integrado e agora você aprenderá como ele pode ser usado por um aplicativo da web. Neste artigo, você aprenderá como usar os vários aspectos do padrão de localização geográfica e como usá-lo com alguns serviços da web populares para criar um mashup de dispositivo móvel interessante.

Michael Galpin, Software Architect, eBay

Michael Galpin's photoMichael Galpin é arquiteto da eBay e contribuidor frequente do developerWorks. Ele já se apresentou em várias conferências técnicas, incluindo JavaOne, EclipseCon e AjaxWorld. Para ter uma ideia de qual é seu próximo projeto, siga @michaelg no Twitter.



31/Jul/2013

25 de maio de 2010: Links incluídos na Parte 2 desta série nas seções Sobre esta Série, Resumo e Recursos.

02 de junho de 2010: Links incluídos na Parte 3 desta série nas seções Sobre esta Série, Resumo e Recursos.

08 de junho de 2010: Links incluídos na Parte 4 desta série nas seções Sobre esta Série, Resumo e Recursos.

29 de junho de 2010: Links incluídos na Parte 5 desta série nas seções Sobre esta Série, Resumo e Recursos.

Sobre esta Série

HTML 5 é uma tecnologia muito divulgada, mas por uma boa razão. Ela promete ser um ponto de mudança tecnológico para levar recursos de aplicativos de desktop para o navegador. Embora já seja promissora para navegadores tradicionais, tem ainda mais potencial para os navegadores de dispositivos móveis. Melhor ainda, os navegadores de dispositivos móveis mais populares já adotaram e implementaram muitas partes significativas da especificação HTML 5. Nesta série em cinco partes, você dará uma olhada mais de perto em diversas dessas novas tecnologias que fazem parte do HTML 5 e podem ter um enorme impacto no desenvolvimento de aplicativos da web para dispositivos móveis. Em cada parte desta série, você desenvolverá um aplicativo da web funcional para dispositivo móvel demonstrando um recurso do HTML 5 que pode ser usado em navegadores da web de dispositivos móveis modernos, como os encontrados no iPhone e em dispositivos baseados em Android.


Pré-requisitos

Acrônimos usados frequentemente

  • API: Interface de programação de aplicativos
  • CSS: folhas de estilo em cascata
  • GPS: Sistema de Posicionamento Global
  • HTML: Linguagem de Marcação de Hipertexto
  • JSONP: JSON com preenchimento
  • SDK: Software Developer Kit
  • UI: Interface com o usuário
  • W3C: World Wide Web Consortium

Neste artigo, você irá desenvolver aplicativos da web usando as tecnologias da web mais recentes. A maior parte do código aqui é apenas HTML, JavaScript e CSS—as principais tecnologias de qualquer desenvolvedor da web. A coisa mais importante que você precisará são navegadores para realizar testes. Para este artigo, é altamente recomendável que tenha o Mozilla Firefox 3.5+, pois é um navegador de desktop que suporta localização geográfica. É claro que deve testar em navegadores de dispositivos remotos também e, para isso, deve ter os SDKs mais recentes do iPhone e do Android. Neste artigo, o iPhone SDK 3.1.3 e o Android SDK 2.1 foram usados. Consulte a seção Recursos para obter links.


O Básico: Obtendo uma Correção

A localização geográfica por si só é até certo ponto uma inovação. Permite determinar onde o usuário está. No entanto, apenas saber isso e relatar ao usuário não seria muito útil. Por que alguém se importaria com sua latitude e longitude exatas? É quando se começa a usar isso em combinação com outros dados e serviços que podem fazer uso da localização que se começa a produzir alguns resultados interessantes. Praticamente todos esses serviços irão querer a latitude e a longitude de um usuário como parte de seus dados de entrada. Geralmente, isso é tudo que se precisa, então vamos ver como obter isso. A Listagem 1 mostra a API de JavaScript padrão para isso.

Listagem 1. Localizando um Usuário: getCurrentPosition
navigator.geolocation.getCurrentPosition(successCallback, 
errorCallback, options);

Esta é a API essencial para localização geográfica. Para uma grande classe de aplicativos, essa é a única coisa que você irá precisará. O objeto de localização geográfica faz parte do objeto do navegador padrão. Ele tem alguns métodos, mas o mais comumente usado é getCurrentPosition. Acessar a posição de um usuário é uma operação cara (você pode estar acessando um satélite no espaço!) e requer o consentimento do usuário, assim, é uma operação assíncrona. Seus parâmetros são funções para retorno de chamada: uma para sucesso e uma para falha.

A função success terá um único parâmetro passado do tipo Position. Esse objeto terá duas propriedades: uma propriedade timestamp e uma propriedade chamada coords do tipo Coordinates. Um objeto Coordinates tem diversas propriedades:

  • latitude
  • longitude
  • altitude
  • accuracy
  • altitudeAccuracy
  • heading
  • speed

Nem todas essas propriedades estarão disponíveis em todos os dispositivos, exceto por latitude, longitude e accuracy. Se a API de localização geográfica for suportada e o dispositivo puder resolver sua localização, é possível contar com latitude, longitude e accuracy.

Desenvolver habilidades sobre este tema

Este conteúdo é parte de um guia progressivo de capacitação para o aprimoramento de suas habilidades. Consulte HTML5 fundamentals

A função callback de erro terá um único parâmetro passado do tipo PositionError. Uma instância de PositionError terá duas propriedades: code e message. A message é específica do dispositivo e é útil para depuração. A code deve ter um de três valores:

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

Seu aplicativo deve depender do código para exibir uma mensagem de erro fácil e simples para o usuário.

Observe que a especificação do W3C também permite um terceiro parâmetro de opções. Isso inclui coisas como tempo limite para quanto tempo leva para determinar a localização do usuário. No entanto, isso não é suportado em dispositivos como o iPhone ainda, portanto, seu uso não é aconselhável. Agora que já viu a API em detalhes, dê uma olhada em um exemplo simples para usá-la.

Integrando ao Twitter

Nos dias de hoje o hello world de mashups é usar o Twitter de alguma maneira. Para seu primeiro exemplo, você usará a API de procura do Twitter. Ela suporta procura por tweets dentro de um determinado raio de uma localização. Listagem 2 mostra a procura local do Twitter.

Listagem 2. Procura Local do 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>

O usuário pode inserir um termo de procura na caixa de texto. Um clique no botão chama a função startSearch . É onde você usa a API de localização geográfica. Primeiro, você verifica se está disponível. Se estiver, então, chama a API getCurrentPosition . Para o retorno de chamada de sucesso, você usa a função searchTwitter. Para a função callback de erro, um encerramento simples é passado que simplesmente exibe as informações de erro.

A função searchTwitter é chamada quando a localização é determinada com sucesso pelo navegador. Aqui a posição passada à função é usada para incluir um parâmetro geocode em sua consulta de procura do Twitter. O exemplo na Listagem 2 procura tweets dentro de 50 milhas da localização determinada. Para chamar o Twitter, uma tag de script dinâmico é usada, que é uma técnica frequentemente referida como JSONP. Isso é suportado pela API de procura do Twitter e permite chamar a procura do Twitter diretamente do navegador, sem a necessidade de nenhum servidor. Isso é indicado pelo parâmetro callback na consulta. Observe que está configurado para showResults. Esse é o nome da função que será chamada. Não está mostrado na Listagem 2, pois é usado somente para criar a UI, mas está disponível como parte do código-fonte deste artigo (consulte Downloads). A Figura 1 mostra uma captura de tela do código da Listagem 2 em execução em um iPhone.

Figura 1. Procurar no Twitter a partir de um iPhone
Procurar no Twitter a partir de um iPhone

Este aplicativo, como muitos outros aplicativos de reconhecimento de localização, precisa obter a localização somente uma vez. No entanto, outros aplicativos precisarão rastrear os usuários enquanto eles estão se deslocando. Esses aplicativos precisarão usar outras APIs de localização geográfica mais avançadas.


Mais Avançado: Rastreamento

Às vezes seu aplicativo precisa não apenas da localização atual do usuário, mas precisa ser atualizado toda vez que o usuário mudar de localização. Há uma API para isso e ela é chamada de watchPosition. É muito semelhante a getCurrentPosition, usando os mesmos parâmetros. A principal diferença é que retorna um ID. Esse ID pode ser usado em conjunto com a API de localização geográfica final, clearWatch. Essa função pega o ID obtido de watchPosition. Você verá, ao chamar watchPosition, que o navegador ficará enviando atualizações à função de retorno de chamada de sucesso passada até que você chame clearWatch. Obter de forma contínua a localização de um usuário pode realmente drenar a bateria de um dispositivo móvel, então, use essas APIs com muito cuidado. Agora, veja um exemplo.

Integrando ao Google Maps

Para este exemplo, você alavancará APIs do Google Maps. Elas são otimizadas para serem usadas em dispositivos móveis, com ênfase especial nas plataformas iPhone e Android. Isso as torna muito atraentes para desenvolvedores da web para dispositivos móveis, principalmente se criarem aplicativos de reconhecimento de localização. O aplicativo de amostra abaixo mostrará simplesmente a localização do usuário em um mapa, atualizando o mapa cada vez que a localização do usuário mudar. A Listagem 3 mostra o código de mapeamento.

Listagem 3. Aplicativo de Mapeamento com Localização Geográfica
<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>

Quando o corpo do documento for carregado, a função initialize será chamada. Essa função verifica se a localização geográfica é suportada no navegador. Se for, então, chama getCurrentPosition, semelhante ao exemplo anterior na Listagem 2. Quando obtém uma localização, cria um mapa usando a API do Google Maps. Observe como a latitude e a longitude são usadas para criar uma instância de google.maps.LatLng. Esse objeto é usado para centralizar o mapa. Em seguida, você cria um marcador no mapa para representar a localização atual do usuário. O marcador usa novamente a latitude e a longitude recebidas da API de localização geográfica.

Após criar o mapa e colocar um marcador no mesmo, você começa a rastrear o usuário. O ID retornado é capturado de watchPosition. Sempre que uma nova posição for recebida, o mapa é centralizado novamente na nova localização e o marcador movido para essa localização. A Listagem 4 mostra mais duas funções que precisam ser observadas.

Listagem 4. Geocodificação e Cancelamento de Funções de Rastreamento
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);
    }
}

Na Listagem 3, a função showLocation é chamada quando o mapa é desenhado inicialmente e quando uma atualização da localização do usuário é recebida. Essa função é mostrada na Listagem 4. Ela usa uma instância de google.maps.Geocoder (criada no início da função initialize na Listagem 3.) Essa API permite executar geocodificação ou pegar um endereço e transformá-lo em coordenadas de mapeamento (latitude e longitude.) Também executa geocodificação reversa—pegando coordenadas de mapeamento e retornando um endereço físico. Neste caso, você pega as coordenadas produzidas pela API de localização geográfica e usa a API do Google Maps para revertê-las por geocodificação. Os resultados são, então, exibidos na tela.

A última função na Listagem 4 é a função stopTracking . Ela é chamada quando o usuário clica no botão criado no HTML na Listagem 3. Aqui você usa trackerId obtido ao chamar pela primeira vez a função watchPosition . Você simplesmente passa isso à função clearWatch e o navegador/dispositivo irá parar de obter a localização do usuário e irá parar de chamar seu JavaScript. A Figura 2 mostra uma captura de tela do aplicativo rastreador em uso.

Figura 2. Aplicativo de Rastreamento
Aplicativo de Rastreamento

É claro que para realmente testar o rastreamento, é necessário alterar a localização. Usar o Google App Engine pode ser uma ferramenta útil, pois permite fazer upload facilmente de seu aplicativo da web para uma localização que pode ser publicamente acessada. Então, será possível testar diretamente de seu dispositivo móvel em qualquer lugar que seu dispositivo possa ter uma boa conexão de celular. Ao fazer isso, será possível subir em um transporte público ou pedir que alguém o leve para uma volta de carro e ver seu aplicativo da web responder à sua mudança de localização.


Resumo

Este artigo mostrou como usar APIs de localização geográfica em um aplicativo da web para dispositivo móvel. GPS pode soar muito sensual, mas complicado. No entanto, como viu, o padrão W3C para localização geográfica fornece uma API muito simples. Ela é direta para obter a localização de um usuário e rastrear essa localização ao longo do tempo. A partir daí, é possível passar as coordenadas para diversos serviços da web que suportam localização ou, possivelmente, você tem seu próprio serviço de reconhecimento de localização que está desenvolvendo. Na Parte 2 desta série em HTML 5 e aplicativos da web para dispositivos móveis, você verá como aproveitar armazenamento local para melhorar o desempenho de aplicativos da web para dispositivos móveis.


Download

DescriçãoNomeTamanho
Article source codegeo.zip3KB

Recursos

Aprender

Obter produtos e tecnologias

Discutir

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que acessar o developerWorks, um perfil será criado para você. Informações do seu perfil (tais como: nome, país / região, e empresa) estarão disponíveis ao público, que poderá acompanhar qualquer conteúdo que você publicar. Seu perfil no developerWorks pode ser atualizado a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Software livre, Desenvolvimento móvel
ArticleID=837873
ArticleTitle=Criando Aplicativos da Web com HTML 5, Parte 1: Combinar HTML 5, APIs de Localização Geográfica e Serviços da Web para Criar Mashups Móveis
publish-date=07312013