Inicio Rapido del Flow Designer JedIN: Abriendo y Navegando Tu Primer Flujo
Del Login a Tu Primer Flujo en 10 Pasos
El Flow Designer de JedIN es el entorno de desarrollo visual donde los flujos de integracion cobran vida. Construido sobre ReactFlow, ofrece un canvas donde arrastras, conectas y configuras nodos de integracion — transformando lo que serian cientos de lineas de configuracion en un diagrama visual que cualquier persona del equipo puede leer.
JedIN viene con mas de 101 paquetes que contienen flujos de integracion de nivel produccion. Cada paquete agrupa artefactos relacionados (iflows, mapeos de valores, scripts) en una unidad logica. Esta guia recorre el camino completo desde el login hasta tener un flujo abierto en el canvas, con cada panel y control explicado.
Ya seas un arquitecto de integracion evaluando la plataforma o un desarrollador a punto de construir tu primer flujo, esta guia te da la conciencia espacial para trabajar con confianza dentro del designer.
Prerrequisitos
Antes de comenzar, confirma que tienes:
- Una cuenta JedIN (cualquier tier) con acceso al producto Integration
- Al menos un paquete disponible en tu tenant — JedIN viene precargado con 101+ paquetes cubriendo SAP, SFDC e integraciones personalizadas
- Un navegador moderno — Chrome o Edge recomendados para mejor rendimiento de ReactFlow
- Resolucion de pantalla de 1280x720 o superior — el Flow Designer usa un layout multi-panel que se beneficia de pantallas mas anchas
Paso 1: Iniciar Sesion en JedIN
- Abre tu navegador y navega a
https://[tu-dominio]/login. - Ingresa tu direccion de correo electronico y contrasena.
- Haz clic en Iniciar Sesion.
Resultado Esperado: Llegas al dashboard de JedIN. El dashboard muestra tarjetas de resumen para actividad reciente, metricas de ejecucion y enlaces de acceso rapido a las funciones mas utilizadas. El encabezado muestra el nombre de tu tenant y avatar en la esquina superior derecha.
Paso 2: Seleccionar el Producto Integration
- Localiza el selector de producto en la esquina superior izquierda de la barra de encabezado. Puede estar mostrando "R2-CX" u otro nombre de producto.
- Haz clic en el selector de producto para abrir el menu desplegable.
- Selecciona JedIN Integration de la lista.
Resultado Esperado: La barra lateral se actualiza para mostrar la navegacion de Integration: Dashboard, Design, Monitoring, Marketplace y Settings. La marca del encabezado refleja el contexto del producto Integration.
Paso 3: Navegar a la Pagina Design
- En la barra lateral izquierda, haz clic en Design.
- La pagina Design carga, mostrando una lista buscable de todos los paquetes en tu tenant.
Resultado Esperado: Ves una lista paginada mostrando 101+ paquetes. Cada tarjeta de paquete muestra el nombre del paquete, descripcion, numero de artefactos y fecha de ultima modificacion. Una barra de busqueda en la parte superior permite filtrar paquetes por nombre. Los paquetes estan ordenados alfabeticamente por defecto.
Paso 4: Abrir un Paquete
- Recorre la lista de paquetes o usa la barra de busqueda para encontrar un paquete. Para esta guia, busca "Business Partner Replication New".
- Haz clic en el nombre del paquete para abrirlo.
Resultado Esperado: La pagina de detalle del paquete se abre. Ves el encabezado del paquete con nombre, descripcion, proveedor e informacion de version. Debajo del encabezado, una interfaz con pestanas proporciona acceso al contenido del paquete.
Paso 5: Ver la Pestana Artifacts
- Haz clic en la pestana Artifacts si no esta ya seleccionada.
- La pestana muestra todos los artefactos contenidos en este paquete.
Resultado Esperado: Una tabla lista cada artefacto con las siguientes columnas:
| Columna | Descripcion |
|---|---|
| Name | El identificador del artefacto (clickeable) |
| Type | El tipo de artefacto — tipicamente iflow para flujos de integracion, pero tambien puede ser valuemapping, scriptcollection o messagemapping |
| Version | La version del artefacto (ej.: 1.0.0 o Active) |
| Status | Estado actual de despliegue — Draft, Published o Deployed |
Puedes ver uno o mas artefactos dependiendo del paquete. Los flujos de integracion (tipo iflow) son los que se abren en el Flow Designer.
Paso 6: Abrir el Flow Designer
- Localiza un artefacto con tipo iflow en la tabla de artefactos.
- Haz clic en el nombre del artefacto para abrirlo.
Resultado Esperado: El Flow Designer carga en una nueva vista. El canvas ocupa la mayor parte de la pantalla. Ves un diagrama visual del flujo de integracion que contiene nodos conectados por aristas. El layout incluye:
- Canvas (centro) — el area de trabajo principal mostrando el diagrama del flujo
- Paleta de Nodos (izquierda o accesible via barra de herramientas) — lista categorizada de nodos disponibles
- Panel de Propiedades (derecha o inferior) — configuracion para el nodo o arista seleccionado
- Barra de Herramientas (superior) — botones de accion para edicion, despliegue y gestion del flujo
- Minimapa (esquina inferior derecha) — una pequena vista general de todo el flujo para navegacion rapida
Paso 7: Entender el Canvas
El canvas es el corazon del Flow Designer. Tomate un momento para explorar los elementos visuales:
-
Nodos — formas rectangulares o redondeadas que representan pasos de integracion. Los tipos comunes de nodos incluyen:
- Integration Process — el contenedor principal (swimlane) que contiene la logica del flujo
- Start Event — un circulo que marca donde el flujo comienza (activado por timer, llamada HTTP o mensaje)
- End Event — un circulo que marca donde el flujo termina
- Content Modifier — un paso que transforma o enriquece el mensaje
- Request Reply — un paso que llama a un sistema externo y espera respuesta
- Router — una forma de diamante que divide el flujo basado en condiciones
-
Aristas — flechas que conectan nodos en secuencia. Las aristas definen el orden de ejecucion. Algunas aristas llevan etiquetas indicando condiciones (ej.: "orderType == 'PO'").
-
Swimlanes — bandas horizontales que agrupan nodos por participante. Un flujo tipico tiene una swimlane Sender, una swimlane Integration Process y una swimlane Receiver.
Resultado Esperado: Puedes rastrear visualmente el flujo desde Start hasta End, siguiendo las aristas a traves de cada paso de procesamiento. Pasar el raton sobre un nodo muestra un tooltip con el nombre y tipo del nodo.
Paso 8: Explorar la Paleta de Nodos
La Paleta de Nodos contiene todos los bloques de construccion disponibles para construir flujos. Esta organizada en 12 categorias:
| # | Categoria | Descripcion | Ejemplos |
|---|---|---|---|
| 1 | Participants | Sistemas o actores externos | Sender, Receiver |
| 2 | Events | Marcadores de ciclo de vida del flujo | Start Timer, Start Message, End Message |
| 3 | Process | Contenedor y control de flujo | Integration Process, Local Integration Process, Exception Subprocess |
| 4 | Call | Pasos de invocacion | Process Call, Send Step |
| 5 | Message Routing | Logica condicional y de division | Router, Multicast, Splitter, Aggregator, Join, Gather |
| 6 | Message Transformers | Manipulacion de datos | Content Modifier, Message Mapping, Script Step, XSLT Mapping, Filter, Converter |
| 7 | Persistence | Almacenamiento y recuperacion de datos | Data Store Operations (Write, Get, Select, Delete), Persist Message |
| 8 | Security | Cifrado y firma | Encryptor, Decryptor, Signer, Verifier |
| 9 | Encoder | Codificacion y decodificacion | Base64 Encoder, MIME Multipart Encoder, ZIP Compression |
| 10 | Validator | Validacion de contenido | XML Validator, JSON Validator, EDI Validator |
| 11 | SAP Adapters | Conectividad especifica SAP | IDoc, RFC, SOAP (SAP RM), OData V2, SuccessFactors, Ariba |
| 12 | Connectors | Conectividad de uso general | HTTP, SFTP, AMQP, Kafka, JDBC, Mail, AS2, ELSTER |
- Abre la paleta haciendo clic en el icono de paleta en la barra de herramientas o en el toggle del panel lateral.
- Haz clic en una categoria para expandirla y ver los nodos disponibles.
- Para agregar un nodo al canvas, arrastalo desde la paleta y sueltalo en el area del canvas dentro de una swimlane.
Resultado Esperado: La paleta muestra las 12 categorias. Expandir cualquier categoria revela sus nodos con iconos y etiquetas. Arrastrar un nodo al canvas lo posiciona y automaticamente sugiere conexiones de aristas a nodos cercanos.
Paso 9: Usar el Panel de Propiedades
Cuando seleccionas un nodo o arista en el canvas, el Panel de Propiedades aparece con opciones de configuracion. El panel tiene 8 pestanas:
| Pestana | Proposito |
|---|---|
| General | Nombre, descripcion, configuraciones especificas del tipo (ej.: URL del adapter, tipo de autenticacion, modo de procesamiento) |
| Runtime Configuration | Asignacion de memoria, valores de timeout, politicas de reintento |
| Error Configuration | Estrategia de manejo de errores — continuar, lanzar excepcion o enrutar a subproceso de error |
| References | Enlaces a recursos externos — mapeos de valores, scripts, esquemas usados por este nodo |
| Externalized Parameters | Parametros expuestos para configuracion especifica del entorno (ej.: URLs de endpoint, alias de credenciales) — permite que el mismo flujo funcione entre dev/staging/prod |
| Problems | Problemas de validacion y advertencias detectados en el flujo actual — campos obligatorios faltantes, expresiones invalidas, conexiones incompatibles |
| Deployment Status | Estado actual de despliegue, timestamp del ultimo despliegue, version del runtime y logs de despliegue |
| Design Guidelines | Recomendaciones de mejores practicas y verificaciones de cumplimiento para el tipo de nodo seleccionado |
- Haz clic en cualquier nodo en el canvas.
- El Panel de Propiedades se abre en el lado derecho.
- Navega por las pestanas para ver cada area de configuracion.
- Modifica un valor (ej.: cambia el nombre del nodo en la pestana General).
Resultado Esperado: Cada pestana carga su contenido cuando se selecciona. Los campos obligatorios estan marcados con asterisco. Las configuraciones invalidas muestran mensajes de error inline. Los cambios surten efecto inmediato en el canvas — por ejemplo, renombrar un nodo actualiza su etiqueta en tiempo real.
Paso 10: Usar la Barra de Herramientas y Controles de Zoom
La barra de herramientas en la parte superior del Flow Designer proporciona acciones principales:
| Boton | Accion |
|---|---|
| Edit | Alterna el modo de edicion — cuando esta activado, puedes arrastrar nodos, crear aristas y modificar propiedades. Cuando esta desactivado, el canvas es de solo lectura. |
| Configure | Abre la configuracion a nivel de flujo — parametros externalizados, valores predeterminados de manejo de errores y metadatos del flujo. |
| Deploy | Publica y despliega el flujo en el motor de runtime. El flujo debe pasar la validacion antes del despliegue. |
| Delete | Elimina el artefacto de flujo del paquete. Requiere confirmacion. |
Los controles de zoom estan ubicados en la esquina inferior derecha del canvas:
| Control | Accion |
|---|---|
| + (Zoom In) | Aumenta el nivel de zoom del canvas un paso |
| - (Zoom Out) | Disminuye el nivel de zoom del canvas un paso |
| Fit | Ajusta automaticamente zoom y pan para que el flujo completo quepa en el area visible del canvas |
| Toggle del Minimapa | Muestra u oculta el minimapa — una vista en miniatura de todo el flujo que indica la posicion actual de tu viewport |
- Haz clic en Edit para entrar en modo de edicion.
- Usa Ctrl + Scroll (o pellizco del trackpad) para acercar y alejar.
- Haz clic en Fit para resetear la vista y mostrar el flujo completo.
- Alterna el Minimapa para ver la vista general del flujo en la esquina.
Resultado Esperado: El modo de edicion habilita controladores interactivos en nodos y aristas. Los controles de zoom responden suavemente. El boton Fit centra el flujo. El minimapa refleja con precision el contenido del canvas y resalta tu viewport actual como un rectangulo translucido.
Lo Que Has Aprendido
Al completar esta guia, ahora sabes como:
- Navegar desde el dashboard de JedIN hasta el Flow Designer
- Encontrar y abrir paquetes y artefactos en la pagina Design
- Leer los elementos visuales en el canvas — nodos, aristas y swimlanes
- Explorar la Paleta de Nodos con 12 categorias para encontrar bloques de construccion de integracion
- Usar el Panel de Propiedades con 8 pestanas para configurar cualquier elemento seleccionado
- Controlar el canvas con acciones de la barra de herramientas y controles de zoom
Proximos Pasos
- Construir un flujo desde cero — crea un nuevo paquete, agrega un artefacto y arrastra nodos desde la paleta para construir una integracion HTTP-a-HTTP simple
- Despliegue y monitoreo — usa el boton Deploy y luego cambia a la pagina Monitoring para observar tu flujo ejecutarse en tiempo real
- Explorar el Marketplace — navega por 15+ paquetes de conectores preconstruidos que puedes instalar y personalizar
- Conectar R2-CX — cambia al producto R2-CX y usa comandos asistidos por IA para crear, configurar y desplegar flujos usando lenguaje natural
Para mas guias, navega por la Wiki de JedIN o visita la guia de Inicio con R2-CX.
Related Articles
Guia de Monitoreo JedIN: Leyendo el Dashboard en Tiempo Real
Guia paso a paso para navegar por el dashboard de monitoreo de JedIN — ejecuciones en tiempo real, metricas de procesamiento de mensajes, gestion de artefactos y vista general de seguridad.
Guia del Marketplace JedIN: Navegando e Instalando Conectores
Guia paso a paso para navegar por el Marketplace de JedIN — descubriendo conectores, explorando plantillas e instalando paquetes para tus proyectos de integracion.
Arquitectura de la Plataforma JedIN — Integracion, R2-CX y Ecosistema MCP
Una vision general arquitectural de la plataforma JedIN — como el producto Integration, el consultor autonomo R2-CX y el ecosistema MCP de 152 herramientas trabajan juntos para entregar integracion empresarial y gestion de sistemas impulsada por IA.