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.
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.
Olá, deixe seu comentário para Neighborhood Tips App (Dicas do Bairro)