Saltar al contenido principal

Introducción

El módulo "Integraciones" permite combinar fácilmente APIs y servicios en línea mediante programación visual. El módulo proporciona una interfaz conveniente donde puedes arrastrar y conectar bloques-nodos, creando la lógica de tus aplicaciones de manera visual. Esto simplifica el desarrollo, haciéndolo accesible incluso para aquellos que no son programadores profesionales, y acelera significativamente el proceso de integración de diferentes sistemas:

Elementos clave de la interfaz del módulo Integraciones​

Antes de comenzar a crear tus primeros flujos e integraciones, vamos a familiarizarnos con la interfaz. Comprender cómo están estructurados los elementos clave facilitará el trabajo y te ayudará a adaptarte más rápidamente.

1. Panel izquierdo con nodos​

El panel izquierdo es el lugar donde encontrarás todos los nodos disponibles. Estos son los elementos con los que construirás tus flujos de datos.

Para usar un nodo, simplemente arrástralo al área de trabajo. Todos los nodos tienen su propósito y se configuran de manera individual.

Ejemplo de nodos:

  • Inject: permite enviar datos al flujo manualmente.
  • Debug: muestra datos y mensajes en el menú de depuración.
  • Function: permite escribir código personalizado en JavaScript.
  • Template: se utiliza para crear plantillas de texto o HTML.

2. Pestañas​

Las pestañas están ubicadas sobre el área de trabajo y te permiten alternar entre diferentes proyectos o flujos de datos. Esto es conveniente si estás trabajando en varias integraciones al mismo tiempo o si deseas dividir la lógica en varios flujos.

  • Crear Nuevas Pestañas: Puedes agregar una nueva pestaña haciendo clic en el botón con el signo más +. Cada nueva pestaña representa un flujo de datos separado, lo que te ayuda a organizar mejor el proyecto.
  • Renombrar Pestañas: Para renombrar una pestaña, haz doble clic en su nombre e ingresa un nuevo nombre. Esto es especialmente útil si tienes muchas pestañas y deseas entender claramente qué hay en cada una de ellas.
  • Eliminar Pestañas: Haz clic derecho en la pestaña y selecciona en el menú contextual la opción Delete. Ten cuidado de no perder datos importantes.
  • Desactivar Pestañas: En el mismo menú contextual, la opción Disable desactiva el flujo de la pestaña sin eliminarla. La opción para una pestaña desactivada se llama Enable — vuelve a activar el flujo. En el esquema JSON, este estado se almacena en el campo disabled de la pestaña.

Ejemplo: Si estás trabajando en una integración de pagos, puedes crear pestañas separadas para cada servicio.

3. Área de Trabajo​

El área de trabajo es la parte central de la interfaz, donde construyes y editas tus flujos de datos.

  • Colocación de Nodos: Después de arrastrar un nodo desde el panel izquierdo, aparecerá en el área de trabajo. Aquí puedes moverlo, conectarlo con otros nodos y crear la lógica de tu flujo.
  • Conexión de Nodos: Para conectar nodos, simplemente arrastra una línea desde la salida de un nodo a la entrada de otro. De esta manera, los datos se transmitirán a través del flujo de un nodo a otro.
  • Gestión de Flujos: El área de trabajo permite crear múltiples flujos de datos, lo que ayuda a organizar integraciones y lógicas complejas.

Consejo: Puedes hacer zoom en el área de trabajo con el mouse o el panel táctil para ver todos los detalles de tu flujo.

4. Formulario de edición de nodo​

Cuando haces doble clic en un nodo en el área de trabajo, se abre el formulario de edición de nodo. Esta es la ventana donde configuras el comportamiento del nodo.

  • Campos de Configuración: Cada nodo tiene sus propios parámetros que puedes editar. Por ejemplo, en el nodo Function puedes escribir y editar código.
  • Guardar Cambios: Después de editar el nodo, haz clic en el botón Submit para guardar los cambios.

Ejemplo: En el nodo Function, puedes escribir código en JavaScript que transforma datos. En el nodo Template, puedes crear una plantilla que inserta datos dinámicamente.

5. Panel de depuración​

El panel de depuración se encuentra a la derecha y se utiliza para ver los datos de salida y mensajes del nodo Debug. El panel tiene dos pestañas: Debug — mensajes del flujo y Configuration.

  • Ver Mensajes: Cuando ejecutas el flujo de datos, el nodo Debug envía mensajes a la pestaña Debug. Esto te ayuda a ver lo que está sucediendo en tu flujo y verificar la validez de los datos.
  • Filtrar Mensajes: La lista sobre los mensajes alterna qué mensajes mostrar: all nodes — de todos los nodos, current workflow — solo de los nodos de la pestaña actual. Esto es conveniente cuando tienes muchos datos de salida de diferentes nodos Debug.
  • Limpiar la Ventana de Debug: Haz clic en el ícono de la cruz junto al filtro para eliminar mensajes antiguos y concentrarte en los nuevos datos.

Ejemplo: Si usas un nodo Function para realizar cálculos, agrega un nodo Debug al final del flujo para verificar si tu código está procesando los datos correctamente.

6. Botones de control​

Botón "Abrir en pantalla completa"​

  • Este botón permite expandir la interfaz del módulo Integraciones a pantalla completa, lo cual es útil al trabajar en flujos de datos complejos o al mostrar el proyecto en un monitor grande.
  • Al hacer clic en este botón, obtendrás más espacio para editar y podrás ver mejor todos los detalles de tus flujos.

Botón "Publicar"​

  • Este es el botón principal que guarda y despliega todos los cambios realizados en tus flujos de datos, haciéndolos activos. Después de agregar o modificar nodos, asegúrate de hacer clic en este botón para que tus configuraciones comiencen a funcionar.

Botón "Importar"​

  • Este botón permite importar un esquema existente desde JSON o un ejemplo de la lista. Puedes obtener más información en la sección Importar.

Esquema de Entrada y transmisión de esquemas entre nodos​

Cada nodo en el formulario de edición muestra un bloque Input Schema — este es el esquema de datos que provienen del nodo anterior en el flujo. El esquema muestra los campos disponibles en forma de pares "clave — tipo", teniendo en cuenta la anidación de objetos.

Si la descripción del campo está en la descripción de la API, se mostrará junto a la clave. Estas mismas descripciones son capturadas por el editor de código en forma de autocompletados y sugerencias al escribir plantillas Mustache.

Qué nodos transmiten el esquema al siguiente nodo​

No todos los nodos pueden transmitir el esquema. La lista de nodos que lo hacen es:

  • Function — el esquema se forma a partir del campo Output Example (JSON). Este campo también se utiliza como datos de prueba al invocar el flujo sin ejecutar realmente el código de Function.
  • Admin API — el esquema se toma de la descripción del método en la descripción de la API. Al hacer clic en el botón Execute, el esquema se actualiza con la respuesta real de la API. Los campos que coinciden con la descripción de la API mantienen sus descripciones textuales.
  • Http Request — inicialmente no hay esquema. El esquema aparece después de hacer clic en el botón Execute y se toma de la respuesta real.

Botón Execute​

Los nodos Admin API y Http Request soportan el botón Execute en el formulario de edición. Este inicia la ejecución de toda la cadena de nodos desde el inicio del flujo hasta el nodo actual.

Características:

  • El servidor ejecuta el flujo según el estado del último Publish — antes de probar, asegúrate de que el flujo esté publicado.
  • Si el nodo function en la ruta no transmite datos más allá, pero tiene lleno el Output Example (JSON), este valor se utiliza como datos de prueba.
  • Al recibir una respuesta exitosa, el resultado se transmite al siguiente nodo como esquema.
  • En caso de error, el esquema no se transmite al siguiente nodo.

Llamada automática a nodos de solo lectura​

Todos los nodos admin-api que realizan solicitudes solo de lectura (GET) se llaman automáticamente al abrir la página de Integraciones y al actualizar el flujo a través del botón Publish. Esto permite siempre tener un esquema de datos actualizado sin necesidad de ejecución manual.