En este post vamos a ver cómo guardar datos en una base de datos de Airtable a través de un formulario y un flujo de Arengu.
Requisitos previos para guardar en Airtable datos de Arengu
Para poder realizar este tutorial, hay que cumplir con los siguientes requisitos:
- Crear una cuenta de usuario de Arengu: Con el plan gratuito podemos empezar a crear formularios y flujos. Además contamos con 100 envíos de formularios totalmente gratis.
- Crear una cuenta usuario de Airtable: Del mismo modo, Airtable cuenta con un plan gratuito que será más que suficiente para empezar a trabajar con la herramienta y llevar a cabo este tutorial.
Crear una tabla en Airtable
Una vez que hemos creado ambas cuentas, lo primero será crear una tabla en Airtable. De este modo podremos dar forma a nuestras filas o entidades y sabremos qué campos necesitamos añadir a nuestro formulario de Arengu.
Para este ejemplo, vamos a utilizar una tabla de Usuarios que hemos creado en nuestra base de datos de tutoriales de NoCodeSpain.
Crear un formulario en Arengu
Una vez hemos creado la tabla, y sabemos qué campos queremos añadir a nuestro formulario para insertar registros, el siguiente paso es ir a la consola de administración de Arengu y crear un nuevo formulario.
Nos mostrará un asistente donde nos permitirá escoger si queremos crear un formulario en blanco, importar un escenario ya existente (Plantillas predefinidas de Arengu) o bien utilizar el asistente que nos irá guiando paso a paso.
Para añadir campos al formulario, tan solo tendremos que seleccionar el tipo de campo y arrastrarlo al centro del editor.
Como se puede observar, para cada uno de los campos, te permite personalizar las propiedades, por ejemplo si queremos mostrar el Label o queremos hacerlo requerido como se muestra en la siguiente imagen.
En nuestro caso, hemos creado un formulario simple con los campos «Nombre» y «Email» ya que son los campos que necesitamos para completar un registro en nuestra tabla de Airtable.
Cambiar el nombre de un formulario Arengu
Por último, para publicar nuestro formulario, tendremos que hacer click en el botón «Publish», pero previamente podemos asignar un nombre personalizado al formulario haciendo click sobre la esquina superior izquierda encima del texto «Blank form».
Crear un flujo en Arengu
El próximo paso, es crear un disparador que se encargue de identificar cuándo se ha enviado el formulario, y qué debe hacer con los datos enviados. Para ello, utilizaremos los flujos de Arengu ya que nos permiten integrarnos con otras herramientas.
Para crear un flujo en Arengu, tenemos que ir a la pestaña «Flows» que encontraremos en la parte izquierda de la ventana y pulsaremos el botón «Crear flujo»
En este momento nos preguntará que tipo de flujo de Arengu queremos crear para nuestra integración con Airtable:
- Flujos de validación: Son flujos que se utilizarán cuando queremos hacer formularios en varios pasos que requieren almacenar la información de manera temporal. Por ejemplo, cuando creamos el registro de un usuario vía email y queremos enviar un código de verificación de email antes de dar por finalizado el registro.
- Flujos de integración: Son flujos que ejecutarán las tareas definidas en el momento de enviar, sin «esperar» a que el usuario realice otra opción.
Para nuestra integración de Arengu con Airtable podríamos utilizar cualquiera de los dos flujos, en este caso he seleccionado de tipo «Validación».
Configurar conexión entre Arengu y Airtable
El primer paso para almacenar en Airtable nuestros datos de Arengu, es añadir una «Acción» que nos permita crear un registro. Para ello utilizaremos el buscador como se observa en la siguiente imagen.
El siguiente paso, es configurar la conexión entre nuestra base de datos y el formulario. Lo podremos hacer en el menú lateral de la configuración de la acción y necesitaremos un API KEY.
Obtener API Key de Airtable
Para obtener el API Key de Airtable tendremos que ir a la sección «Account» de nuestra cuenta de usuario en Airtable y buscaremos la sección «API» como se observa en las siguientes imagenes.
Una vez tenemos el API key configurado, tendremos que seleccionar la base de datos donde queremos guardar la información configurando el BASE ID que se puede obtener accediendo a la URL https://airtable.com/api con la sesión iniciada y seleccionando la base de datos que queramos.
Por último, tendremos que configurar el nombre de la tabla escribiendo el nombre en la configuración de Arengu tal cual está en la base de datos de Airtable.
Si todo ha salido correctamente, la configuración debería quedar similar a la siguiente imagen.
Relacionar los campos entre Arengu y Airtable
Para guardar los datos de un formulario de Arengu en nuestra base de datos, tendremos que relacionar los campos existentes entre los sistemas, y para ello utilizaremos la configuración que encontraremos tras la configuración de la conexión.
En la primera columna, escribiremos el nombre de la columna que tenemos en Airtable diferenciando entre mayúsculas y minúsculas. Mientras que en la segunda columna añadiremos el valor del campo que queramos relacionar haciendo uso del asistente de Arengu, y seleccionando la opción «Input Data».
Si todo ha salido correctamente, tendremos la configuración finalizada con los campos relacionados entre nuestro formulario de Arengu y la tabla de Airtable.
Por último, y para poder finalizar el flujo tendremos que añadir la acción «Submit» al formulario y publicaremos el flujo.
Asociar un flujo a un formulario de Arengu
Una vez tengamos el flujo, tendremos que editar el formulario y asignarle el flujo creado.
Para ello, una vez estemos en la sección del editor de formulario encontraremos una opción «Flows» y la posibilidad de asociar el flujo según el momento de envío: Después de enviar el primer paso, después de enviar todo el formulario etc.
Una vez tengamos el flujo asociado, tan solo tendremos que guardar el formulario de nuevo.
Añadir formulario Arengu a web
Si queremos hacer accesible a los usuarios el formulario, podemos añadirlo a nuestra web, para ello tendremos que copiar el código HTML que nos ofrece Arengu cuando pulsamos la opción de «Embed»
En este caso, vamos a añadir el código fuente en una página de Vatui, una web creada con Webflow.
Verificar integración de Arengu y Airtable
Si queremos comprobar el funcionamiento, podemos insertar el código fuente en alguna página web que tengamos, y enviar un registro.
Por último, tendremos que ir a la base de datos de Airtable y verificar si el registro se ha creado correctamente.
Conclusiones
Como puedes ver, en este tutorial hemos aprendido a como podemos crear un formulario mucho más visual con Arengu que nos permita almacenar información en Airtable.
En resumen, para crear esta integración necesitamos:
- Crear una base de datos y una tabla en Airtable
- Crear un formulario en Arengu
- Crear un flujo en Arengu y asociarlo al formulario previamente creado
- Integrar el HTML de Arengu en nuestra web (Opcional)
Una vez hemos creado un formulario y hemos añadido información en nuestra base de datos, el siguiente ejercicio es evitar la duplicidad de los datos. Y para ello, he preparado el tutorial sobre cómo comprobar si existe registro en Airtable antes de insertar con Arengu.
Si tienes alguna duda, añade un comentario o contacta conmigo a través de Twitter en @JumaGrande.
2 comentarios en «Crear integración entre Arengu y Airtable»