Crear un formulario de dirección usando Google Autocomplete
La semana pasada, necesitaba mejorar la experiencia del usuario en la empresa para la que trabajo facilitando el llenado del formulario de dirección. Entonces, busqué al respecto y no encontré algo rápido y directo para lo que necesitaba. Muchos sugieren usar librerías innecesarias que terminan afectando el funcionamiento de tu aplicación.
Entonces, este artículo es lo que desearía haber encontrado como guía para crear mi formulario de dirección con autocompletar usando la API de Google y React Hook Forms.
Los formularios de dirección desempeñan un papel esencial en la recopilación de información precisa de los usuarios en la web. A lo largo de los años, estas formas han experimentado una evolución significativa.
En los inicios de la web, estos formularios estaban compuestos por campos individuales como "Calle", "Ciudad", "Estado" y "Código postal". Mientras funcionaban, estos formularios presentaban desafíos para los usuarios, especialmente cuando se trataba de ingresar información precisa y estandarizada. La experiencia del usuario era a menudo frustrante, con la necesidad de completar manualmente cada campo, lo que era propenso a errores e inconsistencias.
React Hook Form
Con la creciente popularidad de React como biblioteca frontend, React Hook Form se ha convertido en una opción preferida para administrar formularios en aplicaciones React. Ofrece un conjunto de herramientas poderosas para crear y validar formularios de manera fácil y eficiente y brinda una excelente experiencia de usuario.
- Performance: React Hook Form está diseñado para tener un rendimiento extremadamente alto, reduciendo la cantidad de renderizaciones y optimizando el rendimiento de la aplicación.
- Sintaxis Simple: La sintaxis simple e intuitiva hace que la creación de formularios sea más rápida y sencilla.
- Validación Eficiente: React Hook Form admite la validación de entrada, lo que le permite crear reglas de validación personalizadas para los campos de dirección.
- Control de Estado Manual: Permite un control granular sobre el estado del formulario y sus campos, evitando el uso excesivo del estado global.
- Soporta integración: React Hook Form se puede integrar fácilmente con bibliotecas y herramientas adicionales.
A continuación, ve nuestro formulario usando React Hook Form junto con una librería de validación de schema: zod.
Puedes ver el código aquí.
Autocompletar con la base de Google
Para mejorar la usabilidad, han aparecido funciones de autocompletar en los formularios de direcciones. Estas características sugerían opciones a medida que el usuario escribía, acelerando la finalización, pero aún dependían de datos locales o listas predefinidas.
La API de Autocompletar de Google nos brinda sugerencias en tiempo real basadas en lo que escribe el usuario, utilizando la vasta base de datos de direcciones de Google en todo el mundo. Esto permite a los usuarios completar los campos de dirección con solo unos pocos clics, lo que reduce los errores y ahorra tiempo.
Beneficios de Google Autocomplete
- Precisión y estandarización: La API de Autocompletar de Google ayuda a garantizar que la información de la dirección sea precisa y estandarizada.
- Reducción de errores: Con la función de autocompletar, es menos probable que los usuarios cometan errores al ingresar manualmente los detalles de la dirección.
- Mayor tasa de conversión: Una experiencia de usuario más amigable y eficiente puede generar una mayor tasa de conversión en los formularios de registro o pago.
Costos de Google Autocomplete
La API de Autocompletar de Google forma parte del conjunto de API de Google Maps que ofrece diversa información relacionada con mapas, como rutas, geolocalización, zona horaria, entre otros, además de información comercial de Google con horarios de atención de los lugares buscados.
Es lógico que esto tenga un costo y se puede comprobar en el link. Hoy está en el rango de 2,83 USD por cada 1000 solicitudes, pero tenemos un saldo gratuito de 200 USD al mes.
Cómo integrar Google Autocomplete con React Hook Form
- Paso 1: Crea una cuenta en Google Cloud Platform y activa la API de Google Places en este link.
- Paso 2: Después de activar, coloca la API Key en tus variables de ambiente como GOOGLE_MAPS_API_KEY. Recuerda que esta llave será pública en tu aplicación y, por ende, es importante restringir su uso en el panel de Google Console.
- Passo 3: Utiliza el hook useGoogleAutocomplete.ts para tener acceso a las callbacks de autollenado. Esse hook utiliza el script JS de Google para accesar a las APIs. Él toma primero el campo de input y queda "escuchando" el llenado devolver posibles resultados de direcciones.
Puedes ver el código aquí.
- Paso 4: Implementa las callbacks del hook useGoogleAutocomplete.ts para llenar los valores del formulario.
Aquí el resultado.
- Paso 5: Puedes adecuar el hook y los campos según el uso o tus necesidades.
Conclusión
Ahora sí, tenemos una guía para agregar la API de Autocompletar de Google en nuestro formulario de dirección en React, sin usar librerías para eso.
¡Hasta la próxima!
Referencias
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/
Escribir 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/
Listopro Community da la bienvenida a todas las razas, etnias, nacionalidades, credos, géneros, orientaciones, puntos de vista e ideologías, siempre y cuando promuevan la diversidad, la equidad, la inclusión y el crecimiento profesional de los profesionales en tecnología.