Neighborhood Tips App (Dicas do Bairro)

Neighborhood Tips App (Dicas do Bairro)
Aplicativo de página única em ReactJs para dar dicas do meu bairro

Neighborhood Tips App (Dicas do Bairro)

Aplicativo de página única em ReactJs para dar dicas do meu bairro

Neighborhood Tips App (Dicas do Bairro)
Aplicativo de página única em ReactJs para dar dicas do meu bairro

Como ultimo projeto do Nanodegree de Front-End da Udacity somos desafiados a desenvolver do zero uma aplicação de Mapa de página única utilizando o framework ReactJS.

Esta foi minha segunda aplicação em React, porém mais desafiadora por ter que integrar o Google Maps API e uma API de terceiro, no qual para este projeto utilizei a API do Foursquare, que é uma aplicação de check-ins já bastante difundida e que tem muitos locais já registrados com muitas informações, fotos e dicas.

Entendendo os Requisitos do Projeto

Primeiramente para entender a estrutura dos Componentes React e a integração com a API do Google Maps, estudei um pacote chamado google-maps-react no qual já nos fornece toda a estrutura da API do Google Maps como Componentes do React.

Desenhei e redesenhei em uma folha de papel a estrutura dos meus componentes para encontrar o melhor formato e distribuição dos componentes tanto do Googe Maps quanto os que eu precisava criar.

Basicamente o Projeto deve ter:

  • Um mapa ocupando toda a tela;
  • Pelo menos 5 lugares que gosto marcados no mapa, com dicas e informações;
  • Um campo para filtrar estes lugares pelo nome;
  • Uma lista para retornar o resultado do filtro ou mostrar toda a lista dos locais nela;
  • Trazer informações para cada local a partir de um serviço de terceiro, no caso usei o Foursquare ( App de checkIns e avaliações de locais );
  • Sincronizar os marcadores dos locais no mapa com a lista dos locais (ao filtrar a lista os marcadores também deverá ser filtrada);
  • E por fim, tratar todos os erros quanto do carregamento das APIs avisando o usuário.


Começando com o Código

Iniciei fazendo um projeto simples com Vanilla JS (javascript puro), para entender a  API do Google Maps, depois fiz um esboço usando React JS renderizando o mapa com os marcadores.

Tentando desacoplar mais os componentes, usei os componentes fornecidos pelo pacote google-maps-react, o Map e o Marker, então re-desenhei em um papel uma estrutura mais otimizada e parti para o código.

Configurei API do Google Maps no componente de mais alto nível, então criei os componentes como o Map e depois o Marker onde neste ultimo criei as instancias dos marcadores dos locais e as suas informações (infoWindow), onde neste infoWindow fiz o Fetch da API do Foursquare trazendo dicas e fotos de cada local para serem apresentadas aos usuários quando clicado nos marcadores no mapa.

Após testar o mapa criei o componente para filtrar os locais e também o componente onde a lista dos marcadores é mostrada e filtrada. O grande desafio foi fazer a comunicação dos componentes do input de filtro com o componente da lista de resultados do filtro e o componente Marker onde a renderização esperada na lista de filtro deve ser a mesma no mapa.

Para resolver esse desafio no componente de mais alto nível criei um “State” que é onde se armazena dados que irão alterar durante o uso do App. Neste State eu controlei minha lista de locais favoritos enviando a mesma lista, tanto para a lista de filtro como para os marcadores no mapa, para manter o sincronismo devido o uso do filtro.

Por fim, simulei e realizei testes para tratar os erros que possam vir a ocorrer durante o carregamento e/ou o uso do App, sempre deixando o usuário informado com avisos na tela.

O principal desafio aqui foi tratar o erro quando a requisição da API do Google Maps é recusada por exemplo, neste caso o App ficava apenas mostrando a informação “Loading...” e não fazia mais nada.

Voltando ao javascript puro, com ele eu usaria o atributo “onerror” na tag Script do carregamento da API, porém usando o pacote google-maps-react isto é feito internamente. Então após leituras e pesquisas consegui achar uma forma de “atacar” essa tag Script que é criada automaticamente por este pacote react.

Neighborhood Tips App (Dicas do Bairro)

Fui buscar a Tag Script apenas apos o DOM ter carregado completamente e ai então jogar a função no atributo “onerror” dela para se vier a ocorrer algum erro, a mensagem deverá ser lançada na tela informando o usuário.

Concluindo

Gostei muito deste pacote e ainda mais de desenvolver usando React. Ele lhe agiliza muito o desenvolvimento te induzindo a deixar o código mais enxuto e organizado de fácil entendimento e manutenção.

Este sendo meu segundo projeto em React, não tenho muita referencia de tempo, no entanto meus números foram:

  • 23 dias para concluir
  • Em média 1 hora e meia por dia de desenvolvimento

Nota: Nos vinte e três dias estão também os dias que tive que ler e estudar algumas vezes.

Cada vez mais gosto do React, devido este modelo de desenvolvimento usando Classes e Orientação a Objetos, o código fica mais organizado, mais coeso, menos desacoplado de fácil manutenção e entendimento. Bora pro próximo :D.

 

Em Ação Aqui

 

Referências

  • Compartilhe esse post
  • Compartilhar no Facebook00
  • Compartilhar no Google Plus00
  • Compartilhar no Twitter

Olá, deixe seu comentário para Neighborhood Tips App (Dicas do Bairro)

Enviando Comentário Fechar :/

Converse Comigo