Integración de Webhooks (Make, Zapier...): ex Notion

Notion ha recaudado 300 millones de dólares y es una de las aplicaciones de bases de conocimiento más potentes del mercado. Puedes crear páginas, notas, tareas y bases de datos para hacer un seguimiento de todos tus proyectos.

Con la API de Notion, ahora puedes conectar muchos servicios a tu Notion.

¿Y si pudieras crear tu propia aplicación y utilizar Notion como un panel de administración súper potente?

¡Puedes hacerlo con Voltapp! La herramienta que permite crear aplicaciones sin escribir una sola línea de código.

Vamos a ver cómo queda, utilizaremos la potente funcionalidad de webhook para enviar una nueva entrada de formulario a una tabla de Notion a través de Make, la herramienta de automatización.

Vídeos

https://www.loom.com/share/9d2adfc0e6824eefbd39b789031322f5

Vamos a crear un formulario Voltapp que, cuando se complete, añadirá una fila a una tabla Notion.

Necesitaremos 3 cosas:

una cuenta en editor.voltapp.tech, entonces puedes crear un Nuevo Proyecto de Aplicación para llegar a una pantalla como la mía

también una cuenta en Make.com

y una cuenta en Notion.so

cuando tengas tus 3 cuentas creadas, no dudes en colocarlas en 3 pestañas para ver mejor su efecto

https://www.loom.com/share/1b0618d358384a96a7aa77dc4de7634d

El primer paso es ir a Notion. Tiene que hacer clic en Añadir una nueva página en el menú de la izquierda, luego en Tabla y finalmente en Nueva base de datos para crear una nueva base de datos.

Aquí es muy importante dar un título a la base de datos para que podamos encontrarla después en la herramienta Make. En este ejemplo lo llamaré DemoVoltappNotion.

A continuación vamos a modificar nuestra tabla para tener un formulario de suscripción a un boletín: un nombre, un apellido y un correo electrónico.

Renuevo el nombre de la primera columna Nombre a Nombre, la segunda columna Etiquetas a Apellido.

El tipo de la columna Apellido debe cambiarse a Texto.

A continuación, vamos a añadir una última columna que será el correo electrónico.

Ahora nuestra tabla está lista para recibir los datos de su aplicación Voltapp.

https://www.loom.com/share/79c8793eaef545dba6fc2c608f7f6664

De vuelta a Voltapp, crearemos nuestro formulario.

Una Voltapp se compone de ladrillos de código llamados nodos.

Vamos al menú Nodos de la parte superior, y añadimos el nodo Entrada, que arrastramos a la lista de nodos de la izquierda. Para este nodo de entrada, ¿ves el cuadro azul de la derecha? Es una variable, es decir, un atributo dinámico que contendrá el primer dato del formulario: el nombre de la persona. Así que vamos a cambiar el nombre de esta variable por el de First name.

Modificamos su Portapuesto, que es lo que se muestra como mensaje por defecto para que el usuario sepa lo que tiene que rellenar en este campo.

Vamos a crear otras 2 entradas haciendo lo mismo para cada variable y el soporte de lugar: para el apellido y para el correo electrónico.

Por último, creamos un botón para que el usuario valide el formulario. Vamos a colocarlo al final de la lista de nodos. Cambia su texto por el de Enviar formulario.

A continuación, guardamos nuestro proyecto.

https://www.loom.com/share/a432586d3b1e4f8289805d442bbc55a2

Hablemos de la organización de las variables en la aplicación. Al hacer clic en la primera Entrada y luego ir al menú Variables, vemos la variable Primer nombre vinculada a este nodo.

En Voltapp, por defecto, las variables están vinculadas a su nodo, de manera que un nodo puede ser fácilmente reutilizado en otra aplicación manteniendo sus atributos dinámicos.

Aquí, moveremos las variables hacia arriba en el nodo App padre arrastrándolas a la parte superior de la lista de nodos.

Hagamos esto para la 1ª Entrada, la 2ª y la 3ª.

https://www.loom.com/share/1ec1ebe938034042b32c6145f8ac34e7

Vamos a codificar visualmente el comportamiento del botón cuando se hace clic en él. Para ello, hagamos clic en él y pasemos a su modo de gráfico haciendo clic en el icono de gráfico de la parte superior.

Añadamos el primer bloque, que siempre es un bloque de evento: tomemos aquí el bloque Click.

A continuación, enviaremos una solicitud HTTP a Make.

Una petición HTTP es un poco como ir a un contador, tenemos que identificar nuestro contador con un número especial. Aquí, este número de identificación es un enlace, una URL que espera sus peticiones.

Extendamos la pequeña flecha a la derecha del bloque de clic para crear el siguiente bloque de solicitud HTTP.

La url nos la proporcionará Make más adelante.

Primero tenemos que definir el método de la petición: vamos a elegir Post, que permite enviar datos. Existen otros, como GET, que nos habrían permitido recibir datos.

A continuación, tenemos que definir el modelo de datos de la solicitud. Aquí es un paquete, que llamamos objeto, que contiene 3 datos. Siendo el objeto ya seleccionado, vamos a crear estos 3 datos, nombre, apellido y correo electrónico. Ahora tenemos que decirle al bloque de dónde saldrá este objeto compuesto por 3 datos.

En Voltapp, para definir visualmente un atributo de un bloque, tenemos que ampliar el punto de este atributo. Así que vamos a ampliar el punto de datos para elegir el bloque de objetos de estructura.

Al hacer clic en este bloque se podrían rellenar los datos a mano, pero vamos a hacerlo más inteligente conectando cada variable correspondiente a él mediante el icono de enlace.

Conectemos los datos firstname a la variable firstname, lastname a lastname, y email a email.

Guardemos y pasemos a Make.

https://www.loom.com/share/1a4a7c25cd2d4fdaa625bd2cd269bcf3

Make es una herramienta de automatización que ejecutará continuamente un servidor para ti, un ordenador remoto que funciona continuamente, esperando las instrucciones de activación que le envíes en una herramienta para crear automáticamente instrucciones de acción en otra.

Hay más de 2000 aplicaciones disponibles para automatizar el envío de correos electrónicos, notificaciones o la actualización de una tabla, que es lo que vamos a hacer en Notion.

Vayamos al icono del gráfico de escenarios de la izquierda y pulsemos el botón Crear escenario.

Un escenario en Notion es como un gráfico en Voltapp, leído de izquierda a derecha.

Vamos a elegir la instrucción de activación: el Webhook.

El Webhook es un formato para recibir peticiones HTTP. Muchas herramientas ofrecen Webhooks que permiten conectar Voltapp directamente con ellas.

Vamos a crear un Webhook personalizado, luego creamos uno nuevo haciendo clic en Añadir, dejamos el título por defecto, y luego hacemos clic en Guardar.

Make entonces te dice que el webhook está abierto a cualquier petición HTTP que tenga esta url en azul. A continuación, podemos copiarlo y pegarlo en el bloque HTTP Request de Voltapp.

Veamos si funciona probando la aplicación haciendo clic en el botón de vista previa de la parte superior.

Introduzcamos algunos datos de prueba para comprobarlo y, a continuación, hagamos clic en Enviar formulario.

Volvemos a entrar en Make y oh chico, ha recibido nuestros datos y los ha entendido.

El Webhook está terminado, así que hagamos clic en Ok para cerrarlo.

Hagamos clic en Añadir otro módulo, para elegir la herramienta Notion y seleccionar las instrucciones de acción allí.

Vemos muchas posibilidades. Lo que nos interesa es crear una fila en una base de datos, así que vamos a elegir Crear un elemento de la base de datos.

Ahora tenemos que conectarnos a nuestra Notion. Hagamos clic en Añadir y elijamos Notion public que podríamos renombrar y hagamos clic en Guardar.

Se abrirá una ventana para que su Notion permita a Make conectarse a él.

Haga clic en Seleccionar páginas, y elija la nueva página que creamos anteriormente, luego haga clic en Permitir acceso.

Dado que la página de Notion puede estar formada por varias bases de datos, debemos indicarle el ID de la base de datos en cuestión.

Copiamos el nombre DemoVoltappNotion de la base de datos, lo pegamos en Make y lo buscamos haciendo clic en Search. Make entonces encuentra automáticamente su ID.

También aparecen las 3 columnas de la base de datos.

Hagamos clic en la casilla del primer nombre para ver qué datos del trigger Webhook podemos enviar. Así que vamos a arrastrar los datos del primer nombre a la caja del primer nombre.

Hagamos lo mismo con el apellido y el correo electrónico.

El escenario de Make está ahora completo.

https://www.loom.com/share/90c4c0dbd4394d21ae29fface3517f4e

Vamos a probarlo haciendo clic en Ejecutar una vez en la parte inferior izquierda. Make está a la espera de la famosa petición.

Volvamos a validar el formulario y podrás ver que en Make, el trigger de Webhook y la acción en Notion se han puesto en verde, el escenario ha funcionado.

De hecho, en la parte inferior derecha puedes ver en el registro el historial de las instrucciones.

Finalmente vamos a Notion, y por arte de magia, se ha creado una nueva línea en la base de datos.

https://www.loom.com/share/07e6a0fcd3574c96a92b2c7a8e0ca9b8

Ahora que nuestra prueba es exitosa, activemos este escenario en Make para todas las futuras consultas haciendo clic en el botón Ejecutar.

https://www.loom.com/share/b1cae0aa816845cab35ba53e73a53b30

Volvamos a Voltapp para un paso estético opcional: hacer que la aplicación esté centrada independientemente del tamaño de la pantalla.

Hagamos clic en el nodo Sección de la izquierda, que agrupa y organiza a los demás. Luego, en el menú de atributos de la derecha, vamos a elegir en la parte de Diseño para cambiar el ancho de la opción de ajuste al contenido a la opción de porcentaje de pantalla, que está al 100% por defecto.

Hagamos lo mismo con la longitud de la sección.