.svg){kind=icon}
.png)
Podrías llegar a preguntarte. ¿Para qué voy a conectar Webflow con Airtable como backend, si ya tengo un maravilloso CMS dentro?
Bueno… puedes tener razón. Pero a nadie se le escapa que una base de datos en Airtable es una de las cosas más sólidas que existe. Ríete de las parejas que se conocen desde el colegio. La relación que puede ofrecerte Airtable como backend es mucho más fuerte y duradera.
En este pequeño tutorial te voy a explicar cómo podemos conectar Airtable y Webflow, vía Make (anteriormente Integromat) y qué puedes hacer con esta conexión. Con Airtable, las posibilidades en webflow se multiplican. Vamos a verlo.
Lo primero que necesitamos es una colección en el CMS de Webflow. Es en ella en la que vamos a volcar los datos que introduzcamos en Airtable.
Para ello, he preparado una sencilla colección para, por ejemplo, un blog, en la que vamos a tener un campo de titular, otro de descripción, un rich text para el contenido, una imagen y un selector para determinar la temática.
Al crear una colección, Webflow nos ofrece la posibilidad de crear ítems de prueba. Los utilizaremos, de momento, para establecer la forma en la que se mostrará nuestra colección en el designer. Así podemos verlo en la imagen.
.png)
Una vez tenemos nuestra colección lista en Webflow, tenemos que construir nuestra base de datos en Airtable. Lo haremos utilizando los mismos campos que en la colección., pero añadiendo algunos más.
Es conveniente utilizar un campo de RecordID, otro de texto en el que podemos incluir el campo de ID desde Webflow (para modificar ítems o borrarlos) y un campo de LastModified.
.png)
Ya tenemos los preliminares listos. Vamos a meternos en materia. Para que esto funcione necesitamos que la conexión entre ambas herramientas se haga con una automatización. En este caso, vamos a usar Make.
Lo primero que necesitamos es abrir un escenario y, en este caso, vamos a incorporar un módulo de Watch Records de Airtable. Seleccionaremos nuestra tabla y seguimos,
.png)
A este campo vamos a conectarle otro de Webflow, en concreto el de Crear un Ítem. Antes de empezar a usarlo, tenemos que configurar la conexión entre Make y Webflow. Para ello, le daremos a Add y nos pedirá nuestras credenciales de Webflow. Seleccionamos dónde queremos dar acceso, y listo.
.png)
Ahora ya hemos establecido la conexión. So falta mapear los campos de Airtable con los campos de Webflow. Para ello, seleccionaremos la página a la que nos conectaremos, la colección que queremos y los campos que hay que rellenar.
.png)
Lanzamos el escenario y… ¡Voilà! Ya tenemos nuestros campos de la base de datos dentro de la Collection de Webflow.
.png)
Muy sencillo, ¿verdad? Pues vamos a complicarlo un poco…
Por último, vamos a ver cómo podemos hacer cambios en nuestra base de datos de Airtable y que estos se reflejen en nuestro CMS de Webflow.
Para ello, vamos a necesitar añadir cosas a nuestro escenario. Lo primero, un router. En la rama de arriba mantendremos el módulo de crear un ítem, pero le añadiremos otro de Update Record en Airtable. Lo que queremos aquí es pasar el ID del registro de Webflow y guardarlo en nuestra tabla de Airtable.
.png)
En el segundo camino es el de actualizar el ítem de Webflow. Para ello añadiremos un módulo de Update Item de Webflow y en el Item ID, pasaremos el campo de Webflow ID que ya tenemos en nuestra base.
.png)
Por último, puede que quieras borrar un ítem del CMS de Webflow. Yo te voy a proponer un método para que siempre puedas volver a recuperarlo. En nuestra base de Airtable vamos a crear un campo de checkbox en el que decidiremos si mostramos u ocultamos la publicación del CMS. En caso de marcar esta opción, desencadenaremos una automatización que eliminará el registro de Webflow.
Lo primero que necesitamos es que haya un filtro que active o desactive esta parte del escenario en función de si tenemos marcado o no el checkbox.
.png)
Lo siguiente que necesitamos es un módulo de Delete Ítem de Webflow. Para configurarlo, debemos de ir primero a nuestra collection en Webflow y copiar el collection ID
.png)
Ese collection ID es el que vamos a pegar en el módulo de Webflow y, en el Item ID, pasaremos el WebflowID que tenemos guardado en nuestro Airtable. De este modo, ese registro desaparecerá del CMS.
.png)
Si queremos recuperarlo, tan sencillo como crear otro camino al que le pondremos el filtro opuesto y conecte con un módulo de Create Item. De este modo, volverá a nuestro CMS.
Hasta aquí este tutorial sobre cómo conectar ambas herramientas. La unión de Airtable y Webflow puede ir, lógicamente, mucho más allá, aprovechando la potencia que nos dan las bases de datos hiper vitaminadas.
Airtable también puede conectarse a Webflow a través de otras herramientas, como Wized, que te permitirá crear una web app de tu página.
¡Nos vemos pronto!
Notion es la mejor herramienta nocode de organización de vida personal y empresarial.
%2520(1).png)
%2520(1).jpeg)
%2520(1).png)
.png)