Criando um formulário de endereço usando o Google Autocomplete

Semana passada, eu precisei melhorar a experiência dos usuários da empresa na qual eu trabalho, facilitando o preenchimento do formulário de endereço. Então, fui pesquisar sobre e não encontrei algo rápido e direto para o que eu precisava, muitos sugerem uso de bibliotecas desnecessárias e que acabam afetando o funcionamento da sua aplicação.

Portanto, esse artigo é o que eu gostaria de ter encontrado como guia para criar meu formulário de endereço com autocomplete usando a API do Google e React Hook Forms.

—

Os formulários de endereço desempenham um papel essencial na coleta de informações precisas dos usuários na web. Ao longo dos anos, esses formulários têm passado por uma evolução significativa.

No início da web, esses formulários eram compostos por campos individuais, como "Rua", "Cidade", "Estado" e "CEP". Embora funcionassem, esses formulários apresentavam desafios para os usuários, especialmente quando se tratava de inserir informações precisas e padronizadas. A experiência do usuário era muitas vezes frustrante, com a necessidade de preencher manualmente cada campo, sujeito a erros e inconsistências.

React Hook Form

Com a crescente popularidade do React como biblioteca frontend, o React Hook Form se tornou uma escolha preferida para gerenciar formulários em aplicações React. Ele oferece um conjunto de ferramentas poderosas para criar e validar formulários com facilidade e eficiência, além de fornecer uma excelente experiência ao usuário.

- Performance: O React Hook Form é projetado para ser extremamente performático, reduzindo a quantidade de re-renderizações e otimizando o desempenho da aplicação.

- Sintaxe Simples: A sintaxe simples e intuitiva torna a criação de formulários mais rápida e fácil.

- Validação Eficiente: O React Hook Form oferece suporte a validação de entrada, permitindo que você crie regras de validação personalizadas para os campos de endereço.

- Controle de Estado Manual: Ele permite um controle granular sobre o estado do formulário e seus campos, evitando o uso excessivo de estado global.

- Suporte a Integração: O React Hook Form pode ser facilmente integrado a bibliotecas e ferramentas adicionais.

A seguir, veja o nosso formulário usando o React Hook Form junto com uma biblioteca de validação de schema, o zod.

Você pode olhar o código aqui.

Autocomplete com a base do Google

Para melhorar a usabilidade, surgiram recursos de preenchimento automático (autocomplete) nos formulários de endereço. Esses recursos sugerem opções à medida que o usuário digitava, agilizando o preenchimento, mas ainda dependiam de dados locais ou listas pré-definidas.

Já a API do Google Autocomplete nos fornece sugestões em tempo real com base no que o usuário digita, utilizando o vasto banco de dados do Google para endereços em todo o mundo. Isso permite que os usuários preencham os campos de endereço com apenas alguns cliques, reduzindo erros e economizando tempo.

Benefícios do Google Autocomplete

- Precisão e Padronização: A API do Google Autocomplete ajuda a garantir que as informações de endereço estejam precisas e padronizadas.

- Redução de Erros: Com o preenchimento automático, os usuários estão menos propensos a cometer erros ao digitar manualmente os detalhes do endereço.

- Maior Taxa de Conversão: Uma experiência de usuário mais amigável e eficiente pode levar a uma maior taxa de conversão em formulários de cadastro ou checkout.

Custos do Google Autocomplete

A API do Google de Autocomplete está dentro do conjunto de APIs do Google Maps que oferece diversas informações relacionadas a mapas, como rotas, geolocalização, timezone, entre outros, além de informações do Google negócios com horário de funcionamento dos locais buscados.

É lógico que isso tem um custo e pode ser conferido no link. Hoje fica na faixa de 2,83 USD por 1000 requisições, mas temos um saldo gratuito de 200 USD por mês.

Como Integrar o Google Autocomplete com o React Hook Form

- Passo 1: Crie uma conta no Google Cloud Platform e ative a API do Google Places por esse link.

- Passo 2: Após ativar, coloque a API Key nas suas variáveis de ambiente como GOOGLE_MAPS_API_KEY. Lembre-se que esta chave ficará pública na sua aplicação e, portanto, é importante restringir o uso da chave no painel do Google Console.

- Passo 3: Utilize o hook useGoogleAutocomplete.ts para ter acesso às callbacks de auto preenchimento. Esse hook utiliza o script JS do Google para acessar as APIs. Ele pega o primeiro campo de input e fica "escutando" o preenchimento para retornar possíveis resultados de endereços.

Você pode olhar o resultado aqui.

- Passo 4: Implemente as callbacks do hook useGoogleAutocomplete.ts para preencher os valores do formulário.

Aqui o resultado.

- Passo 5: Fique à vontade para customizar o hook e os campos de acordo com o seu caso de uso.

Conclusão

Agora sim, temos um guia para adicionar a API do Google Autocomplete em nosso formulário de endereço em React, sem usar bibliotecas para isso.

Até a próxima, pessoal!

Referências

https://developers.google.com/maps/documentation/places/web-service/autocomplete

https://www.tracylum.com/blog/2017-05-20-autocomplete-an-address-with-a-react-form/

https://github.com/derrmru/address-autocomplete

https://github.com/ErrorPro/react-google-autocomplete

https://thepetersweeney.com/autocomplete-address/

Escrever post sobre Google Maps

https://www.tracylum.com/blog/2017-05-20-autocomplete-an-address-with-a-react-form/

https://developers.google.com/maps/documentation/places/web-service/autocomplete

https://github.com/derrmru/address-autocomplete

https://github.com/ErrorPro/react-google-autocomplete

https://thepetersweeney.com/autocomplete-address/