Desenvolva um Mashup Baseado em Local Dinâmico

Mashups, Mapas e Capturas Instantâneas

Mashups são uma nova metodologia de desenvolvimento da Web altamente interativa. Essencialmente, uma combinação de conteúdos relacionados reunidos de fontes diferentes, os mashups fornecem conteúdo dinâmico rico para uma super experiência do usuário. Ter o Asynchronous JavaScript + XML (Ajax) e o mashup misturados em sua caixa de ferramentas de desenvolvimento irá beneficiar você com a alta demanda na área de trabalho da Web 2.0 em expansão.

Ken Bluttman, Freelance Web Developer, Freelance Consultant

Ken BluttmanKen Bluttman vem se divertindo com teclados de computador há quase duas décadas. Ao longo do caminho, ele conquistou várias linguagens de programação e escreveu meia dúzia de livros sobre computadores. E há sempre um amanhã para se fazer mais.



07/Out/2008

Antes de Iniciar

Este tutorial segue os passos rumo ao uso do Ajax para atualizar dinamicamente uma página da Web. Os dados necessários para a atualização de uma parte da página utilizando uma chamada Ajax são tirados de uma parte diferente da página que foi preenchida a partir de outra origem. Essa é a base de um mashup— dados misturados. O Ajax é fundamental para esse processo porque permite que outra parte da página seja atualizada sem atualizar a página inteira. Ter um conhecimento básico do Ajax vai ajudar você a seguir este tutorial; uma visão geral/atualização do Ajax está incluída no tutorial para que você acompanhe a velocidade do Ajax.

Sobre Este Tutorial

Este tutorial apresenta uma técnica de mashup comum e faz construções a partir dela. Os mapas são predominantes no uso da Web e contribuem com um grande mashup. No tutorial, a API do Google Maps fornece o mapa e a função de mapeamento. Dados retornados do mapa — coordenadas de latitude e longitude — são aplicados a outra API, fornecida pelo Flickr, o Web site de fotografias popular. O Flickr possui um recurso para o usuário final que permite que você geotag fotografias transferidas por upload: as coordenadas de latitude e longitude do local onde a imagem foi feita são associadas à fotografia.

O roundtrip do mashup segue clicando em um mapa do Google e fazendo a API do mapa retornar para as coordenadas onde você clicou. Esses valores são então enviados para a API do Flickr utilizando o Ajax. O resultado final é um fluxo de fotografias com geotags feitas pelas coordenadas.

Ao longo do caminho, você utiliza um recurso adicional da API do Flickr: tags. Tags (não geotags) são palavras-chave que descrevem uma fotografia. Por exemplo, você poderia colocar uma tag em uma fotografia da Golden Gate Bridge utilizando as palavras São Francisco, ponte, Golden Gate, névoa (essa ponte está em meio a muita névoa) entre outras coisas. As tags foram incluídas pelas pessoas que estão fazendo o upload de suas fotografias no Flickr. Neste exemplo, você não cria novas tags, mas apenas procura por elas.

Como este mashup consiste em diferentes APIs, com o Ajax no meio, o tutorial introduz os componentes em uma sequência:

  1. Os princípios básicos dos mapas do Google são demonstrados. Você aprende como criar um e alterá-lo.
  2. O Ajax será discutido a seguir porque o Ajax utiliza dados que vêm do mapa do Google. A cobertura do Ajax inclui um atualizador na chamada básica do Ajax.
  3. O mashup é demonstrado: coordenadas de latitude e longitude do mapa do Google são enviadas para a API do Flickr através do mecanismo Ajax, e fotografias são retornadas do Flickr.
  4. Os princípios básicos do uso da API do Flickr são demonstrados. Você aprende como obter uma conta do Flickr e a utilizar a API do Flickr.

Objetivos

O objetivo deste tutorial é que você utilize seu conhecimento sobre Ajax e o aplique para que dados de uma API sejam enviados para outra API em uma chamada do Ajax. Alguns parâmetros são enviados para a chamada do Ajax. As informações retornadas da chamada do Ajax são formatadas para serem apresentadas corretamente na página da Web.

Pré-requisitos

Muito deste tutorial utiliza código JavaScript. Ajax não é uma linguagem; é um paradigma de programação que conta com código JavaScript. Ter conhecimento do Ajax é útil, mas se isso for um problema, pelo menos um bom conhecimento funcional de código JavaScript é importante. O tutorial também supõe que você conheça alguns dos principais recursos de um mapa: distância, coordenadas e escala.

Requisitos do Sistema

O acesso a um servidor da Web e um domínio válido são os únicos requisitos técnicos para este tutorial. Você precisa de permissão para incluir arquivos no domínio. PHP é utilizado para a linguagem do lado do servidor, mas o código do lado do servidor é bastante simples. No servidor, você utiliza código para consultar um banco de dados ou para recuperar dados de um serviço. Se esses conceitos lhe forem familiares em qualquer linguagem de servidor, será uma tarefa fácil regravar o PHP na linguagem do lado do servidor de sua escolha.


Hello Map, o Novo Hello World

Geralmente o "primeiro dente" da programação dos desenvolvedores nasce durante a criação de aplicativos Hello World. Isso é comum. No novo mundo da Web 2.0, você cria um mapa.

O Mundo Se Torna o Mapa

O Google é um excelente lugar para se iniciar um treino com mapas. Observe que você deve ter uma URL para trabalhar. Supondo que você tenha acesso a um domínio, siga estas etapas:

  1. Se você ainda não tiver uma, abra uma conta com o Google (para obter o link, consulte Recursos).
  2. Inscreva-se para a chave da API do Google Maps (consulte Recursos). Certifique-se de ler os termos e condições. O Google apresenta a você a chave da API e uma página de amostra rápida que você pode salvar e transferir por upload. Você terá seu aplicativo Hello Map em um instante.

A Listagem 1 mostra o código gerado automaticamente fornecido pelo Google para você começar. Observe que para manter a privacidade, a chave da API é substituída pelas letras X. A chave da API real é uma string alfanumérica aleatória longa.

Listagem 1. Uma Página de Mapa Básica
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=XXXXXXXXXXXXXXXX"
      type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

Programação da API do Google Maps

A API fornece dezenas de classes para inclusão em seu aplicativo. Uma das mais utilizadas é GMap2, que cria o sinalizador de substituição para um novo mapa. Muitos métodos estão disponíveis com GMap2. Por exemplo, setCenter centraliza o mapa nas configurações de latitude e longitude fornecidas.

A Figura 1 mostra o mapa gerado por este código, centralizado próximo da Sede do Google em Mountain View, CA. Você pode rolar o mapa utilizando o mouse, mas a posição inicial do mapa é indicada no código com uma configuração de latitude/longitude, por esta linha:

map.setCenter(new GLatLng(37.4419, -122.1419), 13).

Figura 1. O Mapa Renderizado Inicial
Mostrando o mapa Palo Alto, CA

Altere as Coordenadas do Mapa e o Fator de Zoom

Latitude e Longitude Definidas

A latitude fornece uma posição geográfica vertical. A longitude fornece uma posição geográfica horizontal. As linhas de latitude estão ao redor da circunferência da Terra; a do equador é a mais longa. As linhas de longitude vão de um pólo ao outro. O local onde as duas se encontram fornece as coordenadas para um local. Latitude e longitude são apresentadas como graus, minutos e segundos. Um grau de latitude tem aproximadamente 69 milhas; um minuto de latitude tem aproximadamente 1,15 milhas; um segundo de latitude tem aproximadamente 0,02 milhas ou pouco mais de 100 pés. As distâncias de longitude variam, dependendo do lugar na Terra onde a medida é considerada. Um grau de longitude tem aproximadamente 69 milhas do equador; o tamanho diminui em direção aos pólos.

O mapa na Figura 1 é útil quando você está cruzando a Googletown, mas provavelmente você tem outras idéias sobre como utilizar o mapa.

Você precisa de configurações de latitude e longitude para encontrar seu canto no mundo; então, onde localizar essas coordenadas vitais? Existem vários lugares, como um atlas ou um pacote de software especializado. Como tudo isso envolve a Web, você pode acessá-la para obter coordenadas mais úteis. Uma pequena procura na Web por coordenadas de latitude e longitude gratuitas retorna vários sites úteis, listados na seção Recursos.

Ao alterar o código na Listagem 1 você pode mostrar um mapa da Filadélfia, PA (consulte Figura 2). Para isso, você só precisa alterar as coordenadas na função load. As coordenadas para Filadélfia são 39.9531 e -75.1651. Também é possível aumentar o fator de zoom do método setCenter para 14 (na Listagem 1, ele é 13); o número maior fornece um zoom maior. (Um fator de zoom baixo — digamos, 4 — mostraria uma quantidade significativa da Terra). Portanto, para Filadélfia, com um pouco de aumento no zoom, a inicialização do mapa agora é map.setCenter(new GLatLng(39.9531, -75.1651), 14).

Figura 2. Aumentando o Zoom em Filadélfia, PA
Mostrando o mapa Philadelphia, PA

Um Atualizador do Ajax

Até aqui, você criou um mapa e, se achou necessário, alterou as coordenadas. Isso se trata do mapa. O Ajax é o próximo na string. Você utiliza o Ajax para enviar as coordenadas do centro do mapa para o servidor para processamento. Se partes do Ajax estiverem confusas, este é o ponto certo para você revisar a chamada básica do Ajax.

Ajax 101

O Ajax trabalha instanciando um objeto XMLHttpRequest. Devido às incompatibilidades de navegador sempre presentes, você deve codificar esta etapa de criação de objeto para que ela seja executada através de uma série de tentativas de criação do objeto, até que a correta seja localizada, conforme mostrado na Listagem 2.

Listagem 2. Designando uma Variável a uma Instanciação do Objeto XMLHttpRequest
var XMLHttpRequestObject = false;
  try {
    XMLHttpRequestObject = new ActiveXObject("MSXML2.XMLHTTP");
    } catch (exception1) {
      try {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (exception2) {
           XMLHttpRequestObject = false;
        }
     }
  if (!XMLHttpRequestObject && window.XMLHttpRequest) {
      XMLHttpRequestObject = new XMLHttpRequest();
  }

A estrutura do código na Listagem 2 é necessária para versões antigas do Internet Explorer. O Internet Explorer 7 utiliza o objeto XMLHttpRequest padrão. Versões anteriores do Internet Explorer utilizam um tipo ou outro de um objeto XMLHTTP específico da Microsoft. Resumindo, esse constructo de código cria o objeto necessário que trabalha com o navegador específico. Para o propósito da discussão, o objeto será referido como objeto XMLHttpRequest.

O código na Listagem 2 é executando quando a página é carregada, portanto, o objeto está pronto para ser utilizado quando necessário. O objeto é o conduite entre a página e o servidor, agindo como uma atualização de mini-página. E o mais importante, uma chamada do Ajax utiliza o objeto XMLHttpRequest para acessar dados ou executar um processo no servidor. Fazendo isso, os argumentos que são necessários no lado do servidor da interação podem ser enviados, caso seja necessário. O servidor retorna o estado e o status da chamada, junto com quaisquer dados enviados de volta, através do objeto, e então os dados são disponibilizados na página.

Quando os dados são retornados, uma maneira típica de exibi-los é designá-los à propriedade innerHTML de uma div ou outra tag HTML. A Listagem 3 mostra este próximo passe de mágica, retirado de um dos exemplos mostrados mais adiante no tutorial.

Listagem 3. A Chamada do Ajax
function getPhotos(lat, lon) {

  if (XMLHttpRequestObject) {
    var obj = document.getElementById("photosgohere");
    var tags = document.getElementById("tags").value;
    var query = 'photos.php?lat=' + lat + '&lon=' + lon + '&tags=' + tags;
    XMLHttpRequestObject.open ("GET", query);
    XMLHttpRequestObject.onreadystatechange = function() {
    if (XMLHttpRequestObject.readyState == 4 &&
        XMLHttpRequestObject.status == 200) {
     obj.innerHTML = XMLHttpRequestObject.responseText;
    }
  }
XMLHttpRequestObject.send(null);
}
}

Esta é uma função JavaScript, portanto, esse código não é executado até ser chamado por alguma ação — provavelmente um evento click ou onchange. Em linguagem para leigos, o código faz isto:

  1. Verifica se o objeto existe (se ele foi criado quando a página foi carregada).
  2. Designa a variável obj ao elemento da página photosgohere (que é div).
  3. Designa a variável tags ao valor localizado no elemento da página tags (que é uma caixa de texto).
  4. Monta a chamada, que é para o arquivo photos.php no servidor. Uma string de consultas é criada aqui para que a chamada transporte os argumentos que o arquivo do servidor precisa para consultar os dados.
  5. Abre o objeto XMLHttpRequest, preparando-o para uso.
  6. Utiliza uma função anônima para testar o estado e o status do objeto. Quando a chamada é concluída (verificando-se a mudança de estado e o status), os resultados retornados para a página são colocados no elemento photosgohere. A variável de representação, obj, recebe e transfere os resultados. Observe que a propriedade responseText do objeto é acessada dentro da função anônima quando o estado e o status indicam a conclusão.
  7. Inicia a chamada com o método send(null).

O código do cliente é apenas metade da história. A Listagem 4 mostra o código para o arquivo photos.php (o arquivo no servidor que consulta dados e os envia de volta para o navegador).

Listagem 4. O Código do Lado do Servidor Utilizado com a Chamada do Ajax
<?php
  $lonlow=urlencode($_GET['lon']-0.1);
  $lonhigh=urlencode($_GET['lon']+0.1);
  $latlow=urlencode($_GET['lat']-0.1);
  $lathigh=urlencode($_GET['lat']+0.1);
  $tags = urlencode($_GET['tags']);

  function getInfo($url){
    $chandle = curl_init();
    curl_setopt($chandle, CURLOPT_URL, $url);
    curl_setopt($chandle, CURLOPT_RETURNTRANSFER, 1);
    $result = curl_exec($chandle);
    curl_close($chandle);
    return $result;
  }

  $url="http://api.flickr.com/services/rest/?method=flickr.photos.search
    &api_key=xxxxxx&tags={$tags}&bbox={$lonlow},{$latlow},{$lonhigh},{$lathigh}
    &per_page=10";
  $result = getInfo($url);
  $content= simplexml_load_string($result);
  echo 'Total Found=' . $content->photos['total'] . '<br /><br />';
  foreach ($content->photos->photo as $photo) {
    $title = $photo['title'];
    $farmid = $photo['farm'];
    $serverid = $photo['server'];
    $id = $photo['id'];
    $secret = $photo['secret'];
    $owner = $photo['owner'];
    $thumb_url =
      "http://farm{$farmid}.static.flickr.com/{$serverid}/{$id}_{$secret}_tjpg";
    $page_url = "http://www.flickr.com/photos/{$owner}/{$id}";
    $image_html= "<a href='{$page_url}'><img alt='{$title}'
      src='{$thumb_url}'/></a>";
    echo '<p>' . $image_html;
    echo '<br />' . $title . '</p>';
 }
?>

Muito do código na Listagem 4 é baseado no uso da API do Flickr, que será discutida adiante. Por enquanto, uma visão geral é suficiente:

  • Os valores de latitude e longitude fornecidos são expandidos em quatro coordenadas que definem uma caixa geográfica.
  • Uma chamada é feita para a API do Flickr, com sua chave de API, as tags a serem procuradas e as quatro coordenadas da caixa criadas na etapa anterior.
  • Os dados do Flickr retornados são processados em um formato utilizável e gravados através de instruções echo do PHP. Esse processo retorna uma série de instruções echo pré-montadas para serem colocadas em photosgohere div, como sua propriedade innerHTML.

Observe que a chamada para o Flickr requer uma chave de API, assim como a chamada do Google Maps. Aqui, como antes na API do Google Maps, a chave da API real será substituída por uma série de letras X. O tutorial ajuda você a obter sua própria API do Flickr na seção "Configuração com o Flickr."


Aqui Está o Mashup

Anteriormente, Listagem 1 mostrou o constructo básico do Google Maps. Primeiro você instanciou um objeto de mapa do Google, GMap2. Você pode incluir eventos neste objeto utilizando um constructo de listener, que diz ao objeto de mapa para estar pronto para agir quando ocorrer um evento designado. Neste exemplo, o mapa recebe um evento click. O mapa já pode ser rolado (clique e mantenha o mouse pressionado para mover o mapa), mas agora você fará o mapa responder a um clique também.

Inclua o Listener de Evento de Mapa

O código revisado é mostrado na Listagem 5. Este é o código da página inteira, HTML e código JavaScript.

Listagem 5. O Arquivo HTML do Lado do Cliente Completo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script type="text/javascript"
   src="http://maps.google.com/maps?file=api&v=2&key=xxxxx">
</script>
<script type="text/javascript">

  var XMLHttpRequestObject = false;
  try {
    XMLHttpRequestObject = new ActiveXObject("MSXML2.XMLHTTP");
    } catch (exception1) {
      try {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (exception2) {
           XMLHttpRequestObject = false;
        }
     }
  if (!XMLHttpRequestObject && window.XMLHttpRequest) {
      XMLHttpRequestObject = new XMLHttpRequest();
  }
function getPhotos(lat, lon) {

  if (XMLHttpRequestObject) {
    var obj = document.getElementById("photosgohere");
    var tags=document.getElementById("tags").value;
    var query='photos.php?lat=' + lat + '&lon=' + lon + '&tags=' + tags;
    XMLHttpRequestObject.open ("GET", query);
    XMLHttpRequestObject.onreadystatechange = function() {
    if (XMLHttpRequestObject.readyState == 4 &&
        XMLHttpRequestObject.status == 200) {
     obj.innerHTML = XMLHttpRequestObject.responseText;
    }
 }
XMLHttpRequestObject.send(null);
}
}
function load() {
 if (GBrowserIsCompatible()) {
   var map = new GMap2(document.getElementById("map"));
   map.setCenter(new GLatLng(39.9531, -75.1651), 14);
 }
 GEvent.addListener(map, "click", function() {
 var coords = map.getCenter();
 coords=coords.toString();
 document.getElementById("message").innerHTML = coords;
 var coords2=coords.substr(1,coords.length-2);
 pos=coords2.search(/,/);
 var lat=coords2.substring(0,pos);
 var lon=coords2.substring(pos+1, coords2.length);
 getPhotos(lat, lon);

});
}
</script>
</head>
<body onload="load()">
<table>
<tr><td valign="top"><div id="map"
    style="width: 500px; height: 450px"></div><br />
<b><div id="message"></div></b><br />
<form>
<b>Enter tag(s) here, then click on the map</b><br />
<input type="text" id="tags" />
</form>
<td>&nbsp;&nbsp;</td><td valign="top">
    <div id="photosgohere"></div></td>
</tr>
</table>
</body>
</html>

A Figura 3 mostra a página renderizada, a partir do código na Listagem 2. O mapa da Filadélfia aparece, e abaixo dele há um lugar para se inserir uma tag ou tags. Quando você insere informações da tag, um clique no mapa faz isto:

  • Retorna as coordenadas do centro do mapa (lembre-se de que o mapa é rolável, portanto o centro pode ser diferente todas as vezes)
  • Chama o código do Ajax, no qual a string de consultas é montada a partir de duas coordenadas e das tags
  • Envia quaisquer fotografias correspondentes do Flickr e as exibe na página
Figura 3. A Página da Web, Pronta e Aguardando Seu Mashup
Mostrando o mapa Philadelphia, PA

O Mashup, Concluído

Mais sobre Latitude e Longitude

O equador tem 0 grau de latitude. Os graus de latitude aumentam em números movendo-se para cima a partir do equador para um número máximo de 90 graus no pólo Norte. Movendo-se para o sul a partir do equador, os números diminuem para -90 graus para o pólo Sul. O Primeiro Meridiano é uma linha imaginária que vai do Pólo Norte ao Pólo Sul através do Greenwich, Inglaterra. Essa linha tem 0 grau de longitude. O número aumenta para posições ao leste e diminui para posições ao oeste. Oposta à Terra a partir do Greenwich está a linha vertical onde -180 graus e 180 graus se encontram.

Hora da diversão! A Figura 4 mostra o resultado da inserção da tag Liberdade e um clique no mapa. Essas figuras do Sino da Liberdade da Filadélfia existentes são retornadas, bem como todas as outras fotografias com uma tag Liberdade.

Figura 4. Procurando por "Liberdade" em Filadélfia
Mostrando o mapa Philadelphia, PA

Um clique no mapa também coloca as coordenadas do centro do mapa abaixo do mapa. Filadélfia está a aproximadamente 39 graus de latitude e -75 graus de longitude. A Figura 4 mostra um mashup: duas origens de dados reunidas em uma página. Nesse caso, as informações da API do Google foram transferidas para a API do Flickr através do Ajax; o resultado final mostra o mapa do Google e as fotografias do Flickr retornadas.


Configuração com Flickr

Flickr é um Web site centrado em fotografias bastante popular. Você pode fazer o upload de suas fotografias, criar álbuns de fotografias, designar se as fotografias serão abertas ao público ou apenas a amigos e família e muito mais. O Flickr também é um porto segundo dos desenvolvedores de API de ponta. A API do Flickr possui inúmeras funções, e apenas uma -- procurar -- é tudo que você precisa para criar este mashup.

Obtenha uma Conta, Obtenha uma Chave de API e Comece a Trabalhar!

Para criar este mashup, você precisa abrir uma conta do Flickr. Depois de fazer isso, obtenha uma chave de API do Flickr (consulte Recursos para conhecer links).

A área de interesse dos desenvolvedores e aficionados por API é a seção code.flickr do Flickr (consulte Recursos). Nessa área estão os fóruns, um blog do Desenvolvedor e a documentação da API. Na página da API do Flickr (consulte Recursos) estão todos os recursos que você precisa para a introdução à API do Flickr: uma visão geral, os Termos de Serviço, uma lista de todas as chamadas de API, documentação para elas e um banco de teste para experimentar as chamadas da API. Esse último recurso é útil principalmente porque retorna uma string URL pronta para execução para ser utilizada no código da página.

Todas as chamadas da API do Flickr são utilizadas com uma determinada URL: http://api.flickr.com/services/rest/?method=, com o método de API específico listado em seguida, seguindo pela chave de API e quaisquer outros parâmetros, tanto obrigatórios quanto opcionais. Este tutorial é construído em torno do método de API search, portanto, a URL acaba se assemelhando a esta:

$url="http://api.flickr.com/services/rest/?method=flickr.photos.search

O restante da string URL contém dos parâmetro: a chave de API e os parâmetros que são específicos do método.

A chamada da API de Procura do Flickr é utilizada neste tutorial porque os parâmetros latitude e longitude podem ser enviados para o método da API. Mas o que isso faz é dar ao resultados um ponto central. O simples fornecimento da latitude e da longitude não limita a área geográfica na qual as fotografias são procuradas. Para isso, você utiliza outros parâmetros. O método search aceita uma caixa delimitadora composta de quatro pontos geográficos que definem uma área física retangular.

O mapa do Google fornece as duas coordenadas a partir do centro do mapa. Elas são enviadas para a API do Flickr através da chamada do Ajax. No arquivo photos.php, quatro coordenadas são criadas a partir das duas: um décimo de um grau é adicionado e subtraído da latitude e da longitude fornecidas, e esses quatro valores definem a caixa. O seguinte código do PHP faz isso:

$lonlow=urlencode($_GET['lon']-0.1);
$lonhigh=urlencode($_GET['lon']+0.1);
$latlow=urlencode($_GET['lat']-0.1);
$lathigh=urlencode($_GET['lat']+0.1);

Quatro variáveis são inicializadas e, mais tarde, inseridas na chamada da API, como esta:

bbox={$lonlow},{$latlow},{$lonhigh},{$lathigh}

Como um grau de latitude é cerca de 69 milhas, uma caixa delimitadora que considera que os cantos sejam um décimo de um grau cobre aproximadamente 49 milhas quadradas. Ou seja, arredonda-se 6.9 milhas para 7; então, 7x7=49 milhas quadradas.

Você pode enviar mais de uma tag para a API de Procura do Flickr. A Figura 5 mostra o uso de duas tags: Filadélfia e zoo. Colocando-se um sinal de mais entre as palavras (Filadélfia+zoo), você faz a procura localizar fotografias contendo as duas tags. Não fique surpreso, mas algumas fotografias de animais serão retornadas. Observe que na figura, o mapa foi rolado antes de ser clicado. O zoológico da Filadélfia está próximo do centro do mapa.

Figura 5. Procurando o Zoológico da Filadélfia
Mostrando o mapa Philadelphia, PA

Mais sobre o Servidor

Agora que você viu como o mashup funciona, vamos ver mais detalhes sobre o que ocorre no servidor. As coordenadas e as tags são enviadas para o arquivo photos.php. A caixa delimitadora é criada, conforme mencionado anteriormente. A URL contém a chamada e incorpora a chave da API e os parâmetros. Outro parâmetro — o número de fotografias retornado por página — é incorporado à string, mas é opcional.

A chamada para a API de Procura retorna dados, mas não fotografias. Os dados retornados contêm informações que apontam para locais no espaço do Flickr onde as fotografias são localizadas, bem como as informações associadas (título, proprietário, local da imagem, entre outras). Os dados retornados da chamada para a URL da API do Flickr são passadas através das funções da biblioteca Curl para facilitar o gerenciamento dos dados. Os dados são passados através da função simplexml_load_string do PHP para facilitar o trabalho com cada elemento XML utilizando constructo For Each.

No constructo For Each, o XML analisado é remontado para as especificações que criam um link de volta para o arquivo de fotografia no Flickr. Esse link é enviado de volta a partir da chamada do Ajax, e como esse é um link para uma fotografia em miniatura, ao voltar para a página da Web, você verá miniaturas. Você pode clicar nessas miniaturas para ver fotografias reais, conforme mostrado mais adiante neste tutorial.


Estenda a Procura

O mashup básico está concluído. Você pode inserir tags, clicar em um mapa da Filadélfia e obter fotografias relacionadas obtidas do Flickr. E se a Filadélfia não for sua preferência? Sem problemas. Você pode alterar o mashup para se adequar às suas necessidades.

Você Decide Onde Procurar

A próxima parte deste tutorial estende o processo para que em vez de obter as coordenadas do mapa, você as insira. O mapa agora começa a diminuir o zoom para que você tenha uma visão do continente dos Estados Unidos. Quando você clica no mapa, ele aumenta o zoom para as coordenadas fornecidas. Em seguida, a procura é executada da mesma maneira — com as coordenadas e as tags.

A página possui duas novas caixas de entrada para os números de latitude e longitude. Consulte a Figura 6.

Figura 6. As Coordenadas e as Tags São Inseridas
Mostrando o mapa U.S.

Utilizando 40.77 e -73.94 para a cidade de Nova Iorque, a Figura 7 mostra fotografias retornadas de uma procura na tag trem.

Figura 7. Fotografias de Trem da Cidade de Nova Iorque
Mostrando o mapa U.S.

A Tabela 1 mostra as coordenadas para as principais cidades do mundo.

Tabela 1. Coordenadas para Principais Cidades
CidadePaísLatitudeLongitude
BeijingChina39.85116.38
BerlimAlemanha52.513.35
BostonEstados Unidos42.32-71.2
ChicagoEstados Unidos42.32-71.2
DallasEstados Unidos32.82-96.72
DenverEstados Unidos39.8-104.9
Las VegasEstados Unidos36.2-115.3
LondresInglaterra51.460.01
MoscouRússia55.7837.6
NashvilleEstados Unidos36.2-86.8
Nova DelhiÍndia28.5577.15
ParisFrança48.82.3
PhoenixEstados Unidos33.36-112.1
Rio de JaneiroBrasil-23-43.3
RomaItália41.912.4
São FranciscoEstados Unidos37.75-122.56
SeattleEstados Unidos47.62-122.3
SydneyAustrália-33.84151.2
TorontoCanada43.7-79.4
VancouverCanadá49.2-123.12
Washington, DCEstados Unidos38.9-77

Os valores de latitude e longitude não são tão fáceis de se localizar como você pode esperar. Uma procura na Web por essas principais cidades apresentou valores variáveis, com precisão variável. Lembre-se de que quanto mais pontos decimais houver no valor, maior será a precisão. Esses valores foram testados com relação aos mapas do Google e foram ajustados da forma adequada para trazer essas cidades para o centro do mapa.

Como um tipo de prova das coordenadas, a Figura 8 mostra um mapa do Google com marcadores para quatro cidades européias da Tabela 1: Berlim, Londres, Paris e Roma. Você pode localizar informações sobre marcadores (um tipo de sobreposição) na documentação da API do mapa do Google sobre sobreposições (consulte Recursos).

Figura 8. Marcadores em um Mapa, Configurado com Coordenadas Fornecidas
Um mapa mostrando 4 cidades Européias.

A Listagem 6 mostra a parte do código da página que cria os marcadores.

Listagem 6. Criando Marcadores de Mapa do Google
<script type="text/javascript">
function load() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(48.8, 2.3), 4);
      var berlin = new GLatLng(52.5, 13.55);
      map.addOverlay(new GMarker(berlin));
      var london = new GLatLng(51.46, 0.01);
      map.addOverlay(new GMarker(london));
      var paris = new GLatLng(48.8, 2.3);
      map.addOverlay(new GMarker(paris));
      var rome = new GLatLng(41.9, 12.4);
      map.addOverlay(new GMarker(rome));
  }
}
</script>

Utilizando o Zoom

O fator de zoom do mapa também faz diferença no que você vê. Se um conjunto de coordenadas estiver fora, mas a área mostrada pelo mapa for maior, por motivo de aparência, as coordenadas parecem corretas. Isso é bom para a visualização do mapa, mas obter as coordenadas com a maior precisão possível ajuda você a obter o máximo de fotografias do Flickr. Lembre-se de que as fotografias que são retornadas possuem geotags (elas têm configurações de latitude e longitude) e a caixa delimitadora tem aproximadamente 49 milhas quadradas. Portanto, as coordenadas do mapa que estão fora algumas milhas podem criar uma enorme diferença na qual as fotografias, se houver alguma, são retornadas.

Você define o fator de zoom do mapa do Google no método setCenter do objeto map do Google. Um número pequeno fornece mais área ao mapa e um número maior aumenta o zoom. Cada valor alto aumenta ainda mais o zoom:

  • O fator de zoom na Figura 5 é 14.
  • O fator de zoom na Figura 6 é 3.
  • O fator de zoom na Figura 7 é 10.
  • O fator de zoom na Figura 8 é 4.

Mais sobre a API de Procura

A chamada da API de Procura no Flickr é uma das mais abrangentes. Mais de 30 parâmetros podem ser anexados à chamada. A lista inteira de parâmetros está disponível para revisão e teste na área da API do Flickr.

Um Monte de Parâmetros

Aqui está uma amostra dos parâmetros de Procura:

  • user_id: Cada membro do Flickr possui um ID. Quando utilizado, a procura é filtrada para as imagens transferidas por upload por esse usuário.
  • tags: Explicado anteriormente neste tutorial.
  • min_upload_date e max_upload_date: Permitem filtrar a data em que as fotografias foram transferidas por upload para o Flickr.
  • min_taken_date e max_taken_date: Permitem filtrar quando as fotografias foram tiradas.
  • privacy_filter: Várias configurações se aplicam a fotografias. O padrão é (1) público. Todas as fotos mostradas neste tutorial são públicas. As outras configurações permitem visibilidade a amigos ou família.
  • bbox: A caixa delimitadora utilizada no tutorial.
  • media: Fotos ou vídeos.
  • per_page: Quantas fotografias retornar por página. O valor pode variar de 1 - 500; o padrão é 100.

Personalize

Os métodos de procura apresentados neste tutorial dão uma guinada aqui. A seguir está a configuração de uma procura feita com um ID de usuário e tags. Com essa abordagem, você pode fazer referência às suas próprias fotografias ou às de um amigo ou membro da família. A propriedade user_id é a chave para a filtragem de uma pessoa; este exemplo utiliza a pessoa mais lógica — o autor.

A Figura 9 mostra uma página da Web na qual apenas uma tag ou tags são inseridas. Integrado à chamada da API do Flickr está o ID do usuário do autor. As tags passadas são inseridas na chamada da API e apenas as fotografias do autor, que recebem tags conformemente, aparecem.

Figura 9. As Fotografias do Autor
As Fotografias do Autor

A codificação da página da Web e do arquivo photos.php utilizada na chamada do Ajax é modificada para o uso mostrado na Figura 9. A página da Web é configurada de modo que o mapa seja aberto mostrando Washington D.C.. O ouvinte do mapa captura o evento click e chama a função getphotos(), mas sem passar as coordenadas.

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(38.9, -77), 11);
}
GEvent.addListener(map, "click", function() {
getPhotos();
});
}

No arquivo photos.php, apenas as tags passadas são utilizadas e o ID do usuário é integrado à string URL. As configurações de latitude/longitude/caixa delimitadora são omitidas — o local, Washington DC, já é conhecido. Como antes, a chave da API é substituída pelas letras X, mas o ID do usuário está no código; ele está disponível através do Flickr, portanto, não há razão para ocultá-lo:

$url="http://api.flickr.com/services/rest/?method=flickr.photos.search
&api_key=xxxxxxxx&user_id=28770060%40N02&tags={$tags}";

As fotografias retornadas do Flickr são miniaturas vinculadas às suas imagens grandes associadas. Um clique em uma miniatura exibe a fotografia em tamanho normal no Web site do Flickr. A Figura 10 mostra o que aparece quando você clica na fotografia superior na Figura 9.

Outras informações interessantes aparecem na página do Flickr mostrada na Figura 10. Talvez seja difícil ver na captura de tela, mas à direita da fotografia estão informações sobre o Photostream do autor (um termo do Flickr), as tags associadas à fotografia e o local (pois a fotografia possui geotags). Quando faz o upload de uma fotografia para o Flickr, você pode se surpreender ao ver que ele também mostra o tipo de câmera utilizada e a data em que a fotografia foi tirada. O Flickr também monitora quantas vezes a foto foi visualizada.

Figura 10. A Visualização Ampliada de uma Fotografia
Minhas fotografias

À direita da Figura 10 está o link Mais Propriedades. Um clique neste link retorna detalhes precisos sobre a fotografia, incluindo tempo de exposição, configuração de abertura, velocidade ISO, resolução e muito mais. Se você não estiver familiarizado com esses termos, eles indicarão quanto tempo o obturador da câmera esteve aberto, até que ponto o obturador se abriu e a velocidade de saturação do filme. Essa última informação é interessante porque as câmeras digitais não utilizam filme! Mas as velocidades ISO são um fator importante na fotografia, portanto o equivalente digital está disponível. A Figura 11 mostra as informações Mais Detalhes expandidas para a fotografia na Figura 10.

Figura 11. Informações Precisas sobre a Fotografia
Minhas fotografias

O Mundo de Mashups Está Vivo e em Plena Atividade

O elemento fundamental na composição de um mashup é a capacidade de se obter informações de fontes externas. Tais informações estão disponíveis através de serviços da Web e chamadas de API. Muitos Web sites estão entrando em ação e oferecendo suas próprias APIs para os desenvolvedores experimentarem. Fazendo pesquisas para este tutorial, foi fácil me desviar dos testes de várias APIs e Web sites dedicados a mashups.

A maioria do uso de APIs é gratuita. Os Web sites oferecendo APIs querem o tráfego e a exposição que o uso de suas APIs pode trazer. Muitos limitam quantas chamadas de API podem ser feitas por dia e muitos diferenciam aplicativos pessoais e comerciais. O foco do aplicativo comercial pode ter um preço ou outros requisitos. Cada serviço de API tem seus próprios Termos de Serviço, portanto, certifique-se de ler as letras miúdas para não ultrapassar nenhum limite jurídico.

Recursos

Aprender

Obter produtos e tecnologias

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 você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM 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
ArticleID=387207
ArticleTitle=Desenvolva um Mashup Baseado em Local Dinâmico
publish-date=10072008