Canvas

Visão Geral

O Canvas é a interface de desenvolvimento principal do DHuO para a criação de integrações. A partir dela é possível utilizar recursos de arrastar e soltar (drag and drop) e preenchimento de formulários para o desenho de fluxos de integração de maneira no-code.

Anatomia de uma integração

Uma integração, também chamada de fluxo ou serviço de integração, consiste em uma sequência de tarefas (também chamadas de tasks, passos ou steps) executadas para processar informações. No DHuO cada tarefa é representada por um componente, podendo realizar a comunicação com aplicações ou sistemas, avaliação de lógicas ou transformação de dados.

ID do Componente

Todos os componentes possuem um identificador único, utilizado para acessar os dados de saída da execução de cada um. O identificador é preenchido no campo ID do Componente no formulário de configuração do componente.

Triggers

Toda integração deve ter pelo menos um componente do tipo Trigger. Entretanto, não é permitido adicionar mais de um trigger do mesmo tipo. Os triggers indicam como o serviço de integração será acionado (disparado, executado), como, por exemplo: por meio de chamadas HTTP, publicação de eventos em filas/brokers de mensagens, horário de agendamento.

Fluxo de execução

Todos os componentes devem estar ligados. A ordem de execução é determinada pelas conexões de origem e destino entre os componentes. A única exceção é o componente Go Plugin, caso ele seja utilizado para criar funções Go Template no fluxo. Nesse cenário, as funções são utilizadas por outros componentes, na forma de biblioteca e não fazendo parte do fluxo de execução.

Após a execução do componente, uma estrutura chave-valor será gerada com os dados de saída e adicionada ao contexto de execução. Os dados podem ser acessados em outros componentes em etapas posteriores do fluxo.

Por fim, o resultado da execução do último componente é considerado o retorno da execução do fluxo de integração. Para saber mais detalhes técnicos sobre a execução da integração, acesse a seção Motor de integrações.

Estrutura da interface

A interface do canvas é composta, basicamente, de 4 elementos:

• quadro branco (o próprio canvas)
• paleta de componentes e serviços
• controles de visualização
• botão salvar

Quadro branco

O quadro branco é o local para onde os componentes são arrastados e configurados, formando o fluxo de integração. Os componentes presentes possuem:

• Rótulo de identificação, caso o campo Nome seja preenchido no formulário de configuração do componente. A única exceção é o componente de serviços, que não possui esse campo, sendo apresentado o nome e a versão do serviço utilizado.
• Conexão de origem, marcado como um ponto preto na extremidade direita do componente
• Conexão de destino, marcado como um ponto preto na extremidade esquerda do componente

As conexões de origem e destino indicam a ordem de execução do fluxo entre os componentes. Componentes Trigger possuem apenas conexão de origem, pois são os iniciadores dos fluxos.

As seguintes ações são possíveis na interface:

• Adicionar componente: selecione, clique e arraste um componente da paleta de componentes e serviços para o quadro branco. Depois, preencha o formulário de configurações e salve o componente.
• Conectar componentes: faça as conexões necessárias conforme a ordem de execução do fluxo. Para isso, clique no vértice (ponto preto) do componente de origem e arraste em direção ao vértice do componente de destino.
• Editar componente: selecione o componente e clique no ícone engrenagem
• Excluir componente: selecione o componente e clique no ícone lixeira
• Visualizar subfluxos: presente em componentes de serviços, selecione o componente e clique no ícone olho. O canvas do serviço utilizado como subfluxo será exibido.

Cuidado!

Ao excluir um componente, essa ação não poderá ser desfeita.

Paleta de componentes e serviços

Localizada do lado direito da tela, a paleta de componentes e serviços contém todos os componentes disponíveis para uso na construção de uma integração. Os componentes são classificados em 5 categorias:

• Triggers (acionadores do fluxo)
• Técnicos
• Lógicos
• Business
• Serviços

Cada categoria possui uma cor, facilitando a identificação e a visão geral do fluxo: cinza-claro para triggers; azul para componentes lógicos; amarelo para componentes técnicos; laranja para componentes business; cinza-escuro para componentes de serviços (subfluxos).

Os componentes de serviços são um tipo especial de componentes que são as integrações reutilizáveis. No catálogo de seviços serão listados todas as integrações do workspace com a opção Reutilizar integração configurada. Os serviços são incluídos com subfluxos na execução da integração principal.

Para saber mais sobre cada tipo de componente, acesse as seções Catálogo de componentes e Catálogo de serviços.

Controles de visualização

Os controles de visualização estão localizados na parte inferior esquerda da tela. São eles:

• Controles de zoom: botões + e -. Utilize os controles de zoom para focar em partes específicas ou para ampliar a visualização de todo o fluxo.
• Centralização: botão em forma de quadrado. Utilize para centralizar a visualização dos componentes presentes no canvas.
• Bloqueio de interação: botão 🔒. Utilize para bloquear a interação com os componentes adicionados no canvas e realizar uma navegação "somente leitura". Nesse modo, os componentes não poderão ser movidos, editados ou excluídos.
• Minimapa: funcionando como uma pré-visualização de alto nível, o minimapa ajuda a navegar rapidamente por fluxos extensos. Cada categoria de componente possui uma cor distinta no minimapa, facilitando a identificação e a visão geral do fluxo.

Atalhos

A interface do canvas conta com algumas ações realizadas por atalhos de teclado e mouse para facilitar e agilizar o desenho dos fluxos de integração.

Atalho	Ação
Scroll do mouse	Controle de zoom para visualização do fluxo
Esc	Fecha formulários de configuração de componentes
Delete	Apaga um componente ou conexão selecionado (apenas um por vez)
Segurar Ctrl + clique	Seleciona múltiplos componentes clicados
Segurar Shift + arrasta	Seleciona múltiplos componentes em área

Configuração

O canvas de uma integração é gerenciado pela interface do estúdio da integração. A partir da home, acesse o menu > Integrações. Na página de integrações, visualize a integração desejada e acesse o menu > Canvas.

Permissões

Apenas usuários com papel de administrador da organização (Org Admin) ou provedor de APIs (API Provider) podem alterar o conteúdo do canvas. Para saber mais, acesse a seção Papéis e permissões.