Desenvolva um Mashup Baseado em Local Dinâmico

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.

Voltar para parte superior

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.

Voltar para parte superior

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.

Voltar para parte superior

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.

1 de 9 | Próximo

Comentários

Voltar para parte superior

Índice

• Antes de Iniciar
• Hello Map, o Novo Hello World
• Um Atualizador do Ajax
• Aqui Está o Mashup
• Configuração com Flickr
• Estenda a Procura
• Mais sobre a API de Procura
• Recursos
• Sobre o autor

---

1 de 9 | Próximo