Inicio Rapido do Flow Designer JedIN: Abrindo e Navegando Seu Primeiro Fluxo
Do Login ao Seu Primeiro Fluxo em 10 Passos
O Flow Designer do JedIN e o ambiente de desenvolvimento visual onde os fluxos de integracao ganham vida. Construido sobre o ReactFlow, ele oferece um canvas onde voce arrasta, conecta e configura nodes de integracao — transformando o que seriam centenas de linhas de configuracao em um diagrama visual que qualquer pessoa da equipe pode ler.
O JedIN vem com mais de 101 pacotes contendo fluxos de integracao de nivel producao. Cada pacote agrupa artefatos relacionados (iflows, mapeamentos de valor, scripts) em uma unidade logica. Este guia percorre o caminho completo do login ate ter um fluxo aberto no canvas, com cada painel e controle explicado.
Seja voce um arquiteto de integracao avaliando a plataforma ou um desenvolvedor prestes a construir seu primeiro fluxo, este guia oferece a consciencia espacial para trabalhar com confianca dentro do designer.
Pre-requisitos
Antes de comecar, confirme que voce tem:
- Uma conta JedIN (qualquer tier) com acesso ao produto Integration
- Pelo menos um pacote disponivel no seu tenant — o JedIN vem pre-carregado com 101+ pacotes cobrindo SAP, SFDC e integracoes customizadas
- Um navegador moderno — Chrome ou Edge recomendados para melhor performance do ReactFlow
- Resolucao de tela de 1280x720 ou superior — o Flow Designer usa um layout multi-painel que se beneficia de telas mais largas
Passo 1: Fazer Login no JedIN
- Abra seu navegador e navegue ate
https://[seu-dominio]/login. - Digite seu endereco de email e senha.
- Clique em Entrar.
Resultado Esperado: Voce chega ao dashboard do JedIN. O dashboard exibe cards de resumo para atividade recente, metricas de execucao e links de acesso rapido para os recursos mais utilizados. O cabecalho mostra o nome do seu tenant e avatar no canto superior direito.
Passo 2: Selecionar o Produto Integration
- Localize o seletor de produto no canto superior esquerdo da barra de cabecalho. Ele pode estar mostrando "R2-CX" ou outro nome de produto.
- Clique no seletor de produto para abrir o menu dropdown.
- Selecione JedIN Integration da lista.
Resultado Esperado: A barra lateral atualiza para mostrar a navegacao do Integration: Dashboard, Design, Monitoring, Marketplace e Settings. A marca do cabecalho reflete o contexto do produto Integration.
Passo 3: Navegar ate a Pagina Design
- Na barra lateral esquerda, clique em Design.
- A pagina Design carrega, exibindo uma lista pesquisavel de todos os pacotes no seu tenant.
Resultado Esperado: Voce ve uma lista paginada mostrando 101+ pacotes. Cada card de pacote exibe o nome do pacote, descricao, numero de artefatos e data da ultima modificacao. Uma barra de busca no topo permite filtrar pacotes por nome. Os pacotes sao ordenados alfabeticamente por padrao.
Passo 4: Abrir um Pacote
- Percorra a lista de pacotes ou use a barra de busca para encontrar um pacote. Para este guia, busque por "Business Partner Replication New".
- Clique no nome do pacote para abri-lo.
Resultado Esperado: A pagina de detalhes do pacote abre. Voce ve o cabecalho do pacote com nome, descricao, fornecedor e informacoes de versao. Abaixo do cabecalho, uma interface com abas fornece acesso ao conteudo do pacote.
Passo 5: Visualizar a Aba Artifacts
- Clique na aba Artifacts se ela nao estiver selecionada.
- A aba exibe todos os artefatos contidos neste pacote.
Resultado Esperado: Uma tabela lista cada artefato com as seguintes colunas:
| Coluna | Descricao |
|---|---|
| Name | O identificador do artefato (clicavel) |
| Type | O tipo do artefato — tipicamente iflow para fluxos de integracao, mas tambem pode ser valuemapping, scriptcollection ou messagemapping |
| Version | A versao do artefato (ex.: 1.0.0 ou Active) |
| Status | Status atual de deploy — Draft, Published ou Deployed |
Voce pode ver um ou mais artefatos dependendo do pacote. Fluxos de integracao (tipo iflow) sao os que abrem no Flow Designer.
Passo 6: Abrir o Flow Designer
- Localize um artefato com tipo iflow na tabela de artefatos.
- Clique no nome do artefato para abri-lo.
Resultado Esperado: O Flow Designer carrega em uma nova view. O canvas ocupa a maior parte da tela. Voce ve um diagrama visual do fluxo de integracao contendo nodes conectados por edges. O layout inclui:
- Canvas (centro) — a area de trabalho principal mostrando o diagrama do fluxo
- Paleta de Nodes (esquerda ou acessivel via barra de ferramentas) — lista categorizada de nodes disponiveis
- Painel de Propriedades (direita ou inferior) — configuracao para o node ou edge selecionado
- Barra de Ferramentas (topo) — botoes de acao para edicao, deploy e gerenciamento do fluxo
- Minimapa (canto inferior direito) — uma pequena visao geral do fluxo inteiro para navegacao rapida
Passo 7: Entender o Canvas
O canvas e o coracao do Flow Designer. Reserve um momento para explorar os elementos visuais:
-
Nodes — formas retangulares ou arredondadas representando etapas de integracao. Tipos comuns de nodes incluem:
- Integration Process — o container principal (swimlane) que contem a logica do fluxo
- Start Event — um circulo marcando onde o fluxo comeca (acionado por timer, chamada HTTP ou mensagem)
- End Event — um circulo marcando onde o fluxo termina
- Content Modifier — uma etapa que transforma ou enriquece a mensagem
- Request Reply — uma etapa que chama um sistema externo e aguarda resposta
- Router — uma forma de losango que divide o fluxo baseado em condicoes
-
Edges — setas conectando nodes em sequencia. Edges definem a ordem de execucao. Alguns edges carregam rotulos indicando condicoes (ex.: "orderType == 'PO'").
-
Swimlanes — faixas horizontais que agrupam nodes por participante. Um fluxo tipico tem uma swimlane Sender, uma swimlane Integration Process e uma swimlane Receiver.
Resultado Esperado: Voce pode rastrear visualmente o fluxo do Start ao End, seguindo os edges atraves de cada etapa de processamento. Passar o mouse sobre um node mostra um tooltip com o nome e tipo do node.
Passo 8: Explorar a Paleta de Nodes
A Paleta de Nodes contem todos os blocos de construcao disponiveis para construir fluxos. Ela e organizada em 12 categorias:
| # | Categoria | Descricao | Exemplos |
|---|---|---|---|
| 1 | Participants | Sistemas ou atores externos | Sender, Receiver |
| 2 | Events | Marcadores de ciclo de vida do fluxo | Start Timer, Start Message, End Message |
| 3 | Process | Container e controle de fluxo | Integration Process, Local Integration Process, Exception Subprocess |
| 4 | Call | Etapas de invocacao | Process Call, Send Step |
| 5 | Message Routing | Logica condicional e de divisao | Router, Multicast, Splitter, Aggregator, Join, Gather |
| 6 | Message Transformers | Manipulacao de dados | Content Modifier, Message Mapping, Script Step, XSLT Mapping, Filter, Converter |
| 7 | Persistence | Armazenamento e recuperacao de dados | Data Store Operations (Write, Get, Select, Delete), Persist Message |
| 8 | Security | Criptografia e assinatura | Encryptor, Decryptor, Signer, Verifier |
| 9 | Encoder | Codificacao e decodificacao | Base64 Encoder, MIME Multipart Encoder, ZIP Compression |
| 10 | Validator | Validacao de conteudo | XML Validator, JSON Validator, EDI Validator |
| 11 | SAP Adapters | Conectividade especifica SAP | IDoc, RFC, SOAP (SAP RM), OData V2, SuccessFactors, Ariba |
| 12 | Connectors | Conectividade de uso geral | HTTP, SFTP, AMQP, Kafka, JDBC, Mail, AS2, ELSTER |
- Abra a paleta clicando no icone da paleta na barra de ferramentas ou no toggle do painel lateral.
- Clique em uma categoria para expandi-la e ver os nodes disponiveis.
- Para adicionar um node ao canvas, arraste-o da paleta e solte-o na area do canvas dentro de uma swimlane.
Resultado Esperado: A paleta exibe todas as 12 categorias. Expandir qualquer categoria revela seus nodes com icones e rotulos. Arrastar um node para o canvas o posiciona e automaticamente sugere conexoes de edges para nodes proximos.
Passo 9: Usar o Painel de Propriedades
Quando voce seleciona um node ou edge no canvas, o Painel de Propriedades aparece com opcoes de configuracao. O painel tem 8 abas:
| Aba | Proposito |
|---|---|
| General | Nome, descricao, configuracoes especificas do tipo (ex.: URL do adapter, tipo de autenticacao, modo de processamento) |
| Runtime Configuration | Alocacao de memoria, valores de timeout, politicas de retry |
| Error Configuration | Estrategia de tratamento de erros — continuar, lancar excecao ou rotear para subprocess de erro |
| References | Links para recursos externos — mapeamentos de valor, scripts, schemas usados por este node |
| Externalized Parameters | Parametros expostos para configuracao especifica do ambiente (ex.: URLs de endpoint, aliases de credenciais) — permite que o mesmo fluxo funcione entre dev/staging/prod |
| Problems | Problemas de validacao e avisos detectados no fluxo atual — campos obrigatorios ausentes, expressoes invalidas, conexoes incompativeis |
| Deployment Status | Estado atual de deploy, timestamp do ultimo deploy, versao do runtime e logs de deploy |
| Design Guidelines | Recomendacoes de boas praticas e verificacoes de conformidade para o tipo de node selecionado |
- Clique em qualquer node no canvas.
- O Painel de Propriedades abre no lado direito.
- Navegue pelas abas para ver cada area de configuracao.
- Modifique um valor (ex.: altere o nome do node na aba General).
Resultado Esperado: Cada aba carrega seu conteudo quando selecionada. Campos obrigatorios sao marcados com asterisco. Configuracoes invalidas mostram mensagens de erro inline. Mudancas surtem efeito imediato no canvas — por exemplo, renomear um node atualiza seu rotulo em tempo real.
Passo 10: Usar a Barra de Ferramentas e Controles de Zoom
A barra de ferramentas no topo do Flow Designer fornece acoes principais:
| Botao | Acao |
|---|---|
| Edit | Alterna o modo de edicao — quando ativado, voce pode arrastar nodes, criar edges e modificar propriedades. Quando desativado, o canvas e somente leitura. |
| Configure | Abre a configuracao do nivel do fluxo — parametros externalizados, padroes de tratamento de erros e metadados do fluxo. |
| Deploy | Publica e faz deploy do fluxo no motor de runtime. O fluxo deve passar pela validacao antes do deploy. |
| Delete | Remove o artefato de fluxo do pacote. Requer confirmacao. |
Os controles de zoom estao localizados no canto inferior direito do canvas:
| Controle | Acao |
|---|---|
| + (Zoom In) | Aumenta o nivel de zoom do canvas em um passo |
| - (Zoom Out) | Diminui o nivel de zoom do canvas em um passo |
| Fit | Ajusta automaticamente zoom e pan para caber o fluxo inteiro na area visivel do canvas |
| Toggle do Minimapa | Mostra ou oculta o minimapa — uma visualizacao em miniatura de todo o fluxo que indica a posicao atual do seu viewport |
- Clique em Edit para entrar no modo de edicao.
- Use Ctrl + Scroll (ou pinca do trackpad) para aumentar e diminuir o zoom.
- Clique em Fit para resetar a visualizacao e mostrar o fluxo inteiro.
- Alterne o Minimapa para ver a visao geral do fluxo no canto.
Resultado Esperado: O modo de edicao habilita manipuladores interativos nos nodes e edges. Os controles de zoom respondem suavemente. O botao Fit centraliza o fluxo. O minimapa reflete com precisao o conteudo do canvas e destaca seu viewport atual como um retangulo translucido.
O Que Voce Aprendeu
Ao completar este guia, voce agora sabe como:
- Navegar do dashboard do JedIN ate o Flow Designer
- Encontrar e abrir pacotes e artefatos na pagina Design
- Ler os elementos visuais no canvas — nodes, edges e swimlanes
- Navegar pela Paleta de Nodes com 12 categorias para encontrar blocos de construcao de integracao
- Usar o Painel de Propriedades com 8 abas para configurar qualquer elemento selecionado
- Controlar o canvas com acoes da barra de ferramentas e controles de zoom
Proximos Passos
- Construir um fluxo do zero — crie um novo pacote, adicione um artefato e arraste nodes da paleta para construir uma integracao HTTP-para-HTTP simples
- Deploy e monitoramento — use o botao Deploy e depois mude para a pagina Monitoring para assistir seu fluxo executar em tempo real
- Explorar o Marketplace — navegue por 15+ pacotes de conectores pre-construidos que voce pode instalar e customizar
- Conectar o R2-CX — mude para o produto R2-CX e use comandos assistidos por IA para criar, configurar e fazer deploy de fluxos usando linguagem natural
Para mais guias, navegue pelo Wiki do JedIN ou visite o guia de Inicio com R2-CX.
Related Articles
JedIN Flow Designer — Desenvolvimento Visual de Integrações com Paridade SAP CPI
Guia passo a passo para construir e configurar fluxos de integração no Flow Designer visual do JedIN, com canvas ReactFlow, paleta de nós em 12 categorias, painel de propriedades com 8 abas e paridade total com SAP CPI.
Como Executar uma Avaliacao Cross-System com R2-CX (C4C + JedIN)
Guia passo a passo para usar o R2-CX para auditar seu tenant SAP C4C e a plataforma de integracao JedIN simultaneamente — combinando saude do CRM e saude da integracao em um relatorio executivo.
Guia de Monitoramento JedIN: Lendo o Dashboard em Tempo Real
Guia passo a passo para navegar no dashboard de monitoramento do JedIN — execuções em tempo real, métricas de processamento de mensagens, gerenciamento de artefatos e visão geral de segurança.