Crear integración entre Arengu y Airtable

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.

Tabla de usuarios creada en Airtable
Tabla de usuarios creada en Airtable

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.

Ventana de administración de formularios en Arengu

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.

Editor de formulario arengu y propiedades del campo "Nombre"
Editor de formulario arengu y propiedades del campo «Nombre»

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».

Cambiar
nombre al formulario de Arengu
Cambiar nombre al formulario de Arengu

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»

Menú de administración de flujos en Arengu
Menú de administración de flujos en Arengu

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.
Tipos de flujos disponibles en Arengu
Tipos de flujos disponibles en Arengu

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.

Añadir una acción de Airtable al flujo de Arengu
Añadir una acción de Airtable al flujo de Arengu

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.

Menú de usuario en Airtable
Menú de usuario en Airtable
Obtener Api Key de usuario en Airtable
Obtener Api Key de usuario en Airtable

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.

Obtener Base ID de Airtable desde API
Obtener Base ID de Airtable desde API

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.

Ejemplo de configuración de Airtable en Arengu
Ejemplo de configuración de Airtable en Arengu

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».

Obtención de datos de los input del formulario de Arengu
Obtención de datos de los input del formulario de Arengu

Si todo ha salido correctamente, tendremos la configuración finalizada con los campos relacionados entre nuestro formulario de Arengu y la tabla de Airtable.

Relación de campos entre la tabla de Airtable y formulario Arengu
Relación de campos entre la tabla de Airtable y formulario Arengu

Por último, y para poder finalizar el flujo tendremos que añadir la acción «Submit» al formulario y publicaremos el flujo.

Añadir acción submit a formulario de Arengu
Añadir acción submit a formulario de Arengu

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.

Configurar flujo después de enviar el formulario
Configurar flujo después de enviar el formulario

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.

Obtener código HTML para compartir formulario
Obtener código HTML para compartir formulario

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.

Ejemplo de formulario integrado en una web personalizada
Ejemplo de formulario integrado en una web personalizada

Por último, tendremos que ir a la base de datos de Airtable y verificar si el registro se ha creado correctamente.

Registro de Airtable creado desde un formulario de Arengu
Registro de Airtable creado desde un formulario de Arengu

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:

  1. Crear una base de datos y una tabla en Airtable
  2. Crear un formulario en Arengu
  3. Crear un flujo en Arengu y asociarlo al formulario previamente creado
  4. 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»

Deja un comentario

RSS
LinkedIn
Share