Visualização da Comunidade Freiriana – parte 2

Conforme falamos na parte 1, o objetivo deste post é mostrar a implementação da solução. Portanto, vamos logo ao código.

O projeto está no nosso GitHub, ele é apenas uma demo totalmente funcional, para facilitar a explicação e entendimento de como usar o Google Maps para mostrar pontos dinamicamente no mapa de localizações.

Abaixo, segue uma explicação de cada parte do sistema.

RESOURCES.RB

Neste arquivo está toda a parte da aplicação que fornece os dados, criamos usando o Sinatra para facilitar o entendimento, uma vez que o foco do post é mostrar a parte de integração com o Maps e não a Intranet.

Nele temos a declaração da class Resource, que é responsável por armazenar e fornecer os recursos, que neste caso são as comunidades freirianas. Na class tem o método to_json que fornece os dados dos recursos em JSON, de acordo com a condição passada. Este método é chamado quando a página com a visualização da comunidade Freiriana, consulta esta aplicação para buscar e filtrar os dados das comunidades.

Após a class Resource temos um código para popular a base em SQLite, onde usamos a gem Geocoder, que faz interface com API de geolocalização do Google, para pegar a latitude e longitude da comunidade, e também usamos a gem Faker para criar dados genéricos. Por fim temos as duas actions que fornecem os dados de comunidades, categorias e países utilizados pela página. Na primeira todos os dados são buscados e na segunda ocorre o filtro de acordo com os parâmetros informados na url.

PUBLIC

Na public estão os arquivos da página.

index.html

O html em si, contendo um form para filtrar os dados, uma div onde o mapa é renderizado e outra div onde as informações de uma comunidade são apresentadas.

cumunidadesFreirianas.js

Aqui é onde a “mágica” acontece. A primeira coisa que a página faz é carregar o mapa com todas as informações das comunidades, por meio da function initializeMap. Nela é feita uma consulta na aplicação em Sinatra via AJAX e como a implementação que fizemos era cross domain, precisamos utilizar o JSONP, uma vez que você não pode fazer uma requição AJAX para um domínio diferente.

Como pode se notar no parâmetro jsonpCallback, que sobrescreve o nome da função de callback da request, sendo importante notar que para funcionar e você conseguir pegar os dados em JSON, retornados pela aplicação, você precisa adicionar o parâmetro de callback no retorno, como pode ser visto no arquivo resources.rb no final de cada action.

Após fazer a requisição, nos usamos a API do Google Maps, passando os dados de longitude e latitude de cada comunidade. Adicionamos um listener para ao clicar na posição do mapa mostrar as informações daquela comunidade no painel a direita e por fim montamos os selects de categorias e países.

Há ainda a function showInfo que é responsável por mostrar os dados no painel a direita do mapa e é chamada no listener. E por fim a function filter, responsável por fazer a requisição quando o usuário que filtrar as comunidades por categoria e/ou país, nela há um tratamento para a centralização do mapa, pois quando um país é selecionado, o mapa fica centralizado neste, caso contrário, ele exibe o “mundo inteiro”.

Para rodar o projeto, é recomendado usar o RVM, após instalar ele, instale o Bundler (gem install bundler) e rode o bundle install para instalar as gems do projeto. A aplicação pode ser iniciada com o shotgun (shotgun resources.rb), e após isso é só abrir o arquivo index.html que está na public. Se tudo tiver certo, você verá uma página parecida com essa:

Se tiverem alguma dúvida sobre o código, só fazer um comentário que respondemos. =D

Publicação feita por Fabrício Ferrari (@fabricioffc) e Vitor Margis (@vitormargis).