Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.



Column
width2

Image ModifiedEAI (do inglês Enterprise Application Integration) é uma referência aos meios computacionais e aos princípios de arquitetura de sistemas utilizados no processo de Integração de Aplicações Corporativas. Os procedimentos e ferramentas de EAI viabilizam a interação entre sistemas corporativos heterogêneos por meio da utilização de serviços.

Tagcloud
cumulusTColor0xFF7F00
typespage
excludePrefixlogix
shapepentagon
formatcumulusCanvas
width300
cotageai
cumulusHiColor0xA8A8A8
cumulusTColor20x126699
height300

                                                   

Ampliar o conhecimento sobre o tema integrações

Conhecer as tecnologias envolvidas

Conhecer o padrão TOTVS para integrações




draw.io Diagram
borderfalse
viewerToolbartrue
fitWindowfalse
diagramNameConteudo
simpleViewertrue
linksauto
tbstyletop
lboxtrue
diagramWidth1331
revision2




Conceitos gerais de integração

  • Definição de EAI
  • Por que integrar?
  • Formas de integração
  • Elementos de uma integração

Tecnologias

  • XML/SOAP
  • JSON/REST

Mensagem Padronizada

  • Termos e conceitos
  • Anatomia de uma mensagem


draw.io Diagram
borderfalse
viewerToolbartrue
fitWindowfalse
diagramNameInicio
simpleViewertrue
linksauto
tbstyletop
lboxtrue
diagramWidth1331
revision2

Definição de EAI

Expandir
titleClique para saber...

Enterprise Application Integration


É uma referência aos meios computacionais e aos princípios de arquitetura de sistemas utilizados no processo de Integração de Aplicações Corporativas.

https://pt.wikipedia.org/wiki/EAI

Tem com objetivo alcançar a interoperabilidade e a organização do fluxo de informações entre aplicações heterogêneas

garantir a comunicação entre as diferentes aplicações que constituem o sistema de informação da empresa, incluindo clientes, parceiros ou fornecedores. 

o projeto EAI envolve a implementação de uma arquitetura em que as diferentes aplicações se comuniquem entre si

isso implica no desenvolvimento de conectores (middleware) para a interface das aplicações que utilizam protocolos de comunicações diferentes (geralmente proprietários). 

Por que Integrar?

Expandir
titleClique para saber...



Os objetivos da arquitetura do EAI são:


  • Integração de aplicações, sistemas de informação e processos de negócio de uma empresa;
  • Integração com aplicações internas e externas da empresa que servem de suporte ao processo de negócio da mesma, como por exemplo processo financeiro, RH, dentre outros;
  • Conjunto de ferramentas de análise e monitoramento de processos e mensagens em tempo real.

Alguns conceitos

Formas de Integração - Modos de Comunicação

Expandir
titleClique para saber...

Painel
borderColorgrey
borderWidth2
borderStyledashed

SÍNCRONO

Na integração síncrona, o programa de origem envia a mensagem e só prossegue a execução ao obter o retorno da mesma.

Painel
borderColorgrey
borderWidth2
borderStyledashed

ASSÍNCRONO

Na integração assíncrona, o sistema envia a mensagem, e em seguida deposita a mensagem na fila, retornando OK para o sistema.

Enquanto esse procedimento é efetuado, o programa em questão continua sendo executado. A mensagem enviada permanece na fila aguardando seu processamento.




                                                 

Elementos de uma Integração

Expandir
titleCique para saber...

Componente

Descrição

Exemplo

Sistemas

Refere-se aos sistemas que trocarão informações entre si

Aplicações do módulo de CRM trocando informações com o módulo de faturamento

Dados

Conjunto de dados (layouts de arquivos) que serão trafegados pela arquitetura durante a troca de dados entre os sistemas

XML ou Texto

Interface

Forma de enviar receber dados entre os sistemas

Web services, adaptadores

Comunicação

Tipo de comunicação a ser utilizada durante a troca de informações entre os sistemas

Síncrona ou assíncrona



Integração EAI2

Fluxos de Comunicação

Expandir
titleClique para saber...

O EAI2 deve permitir que uma mesma instância do aplicativo hospedeiro (Datasul 11 ou superior) possa se integrar com vários aplicativos diferentes, denominados External Applications. Esta capacidade implica na existência de regras de roteamento que irão definir quais mensagens devem ser encaminhadas para cada aplicativo.

Portanto, a regra de roteamento levará em consideração APENAS o fluxo de troca de mensagens entre o host application e os external applications, DESCARTANTO qualquer possibilidade de troca de mensagens diretas entre as external applications.

Componentes da Integração - JOINVILLE

Expandir
titleClique para saber...
draw.io Diagram
borderfalse
viewerToolbartrue
fitWindowfalse
diagramNamecomponentes
simpleViewerfalse
width
linksauto
tbstyletop
lboxtrue
diagramWidth994
revision1

Tecnologias envolvidas na Integração

Expandir
titleClique para saber...

XML/SOAP



JSON/REST


MÉTODOS (Verbos) HTTP  REST

draw.io Diagram
borderfalse
viewerToolbartrue
fitWindowfalse
diagramDisplayName
lboxtrue
revision3
diagramNamehttpRest
simpleViewerfalse
width1100
linksauto
tbstyletop
diagramWidth1049


draw.io Diagram
borderfalse
viewerToolbartrue
fitWindowfalse
diagramNamemensagem
simpleViewertrue
linksauto
tbstyletop
lboxtrue
diagramWidth1331
revision2

Painel
borderColorwhite
bgColor#B0E0E6
borderWidth2
borderStyledashed

Mensagem Padronizada (antes conhecida como mensagem única) é o modelo de dados em que todos os produtos da TOTVS devem trabalhar durante troca de informações. Seu objetivo é evitar o processo de transformação de mensagens, fazendo assim com que a mensagem, após definida, torne-se padrão independente de produtos.


Painel
borderColorwhite
bgColor#B0E0E6
borderWidth2
borderStyledashed


Com o modelo de mensagem apresentado, também se torna uniforme seu tratamento pelos produtos, principalmente no que diz respeito à capacidade de rastreamento, pois em seu conteúdo é possível identificar a origem e o tipo.


Painel
borderColorwhite
bgColor#B0E0E6
borderWidth2
borderStyledashed

Além disso, a mensagem única estabelece alguns padrões que devem ser seguidos por todos os produtos que participam de integrações. Esses padrões, por exemplo, definem tipos de mensagens suportadas e informações obrigatórias que farão parte do conteúdo de cada mensagem.  Porém, a composição dessas mensagens será definida em conjunto com especialistas de negócio e não faz parte do escopo deste documento.


A mensagem padronizada é a solução para tornar mais fácil a integração dos vários sistemas adquiridos pela TOTVS.

Expandir
titleClique para saber...
Painel
borderColorwhite
bgColor#D3D3D3
borderWidth2
borderStyledashed

Uma vez que os produtos TOTVS terão um “idioma” comum para troca de informações, será possível conectar diretamente com vários produtos ao mesmo tempo, trocando informações, sem a necessidade do TOTVS ESB.




No tráfego da integração existem  3 tipos de mensagens, cada uma com uma finalidade.


Expandir
titleClique para saber...
Painel
borderColorwhite
bgColor#D3D3D3
borderWidth2
borderStyledashed

O padrão de mensagem TOTVS.

draw.io Diagram
borderfalse
viewerToolbartrue
fitWindowfalse
diagramDisplayName
lboxtrue
revision1
diagramNameCopy of tipoMensagem
simpleViewerfalse
width600
linksauto
tbstyletop
diagramWidth516


draw.io Diagram
borderfalse
viewerToolbartrue
fitWindowfalse
diagramNameTiposDeEntrega
simpleViewertrue
linksauto
tbstyletop
lboxtrue
diagramWidth1331
revision2

Painel
borderColorwhite
bgColor#B0E0E6
borderWidth2
borderStyledashed

Tipos de Entrega (Delivery Type) é a denominação pela qual é referenciado o tipo de comunicação entre os aplicativos. Em determinados modelos de dados, o programa necessita de uma resposta imediata do aplicativo externo. Já em outras vezes, o modelo não necessita de uma resposta ou não naquele determinado momento, economizando o tempo que o programa aguarda durante troca de mensagens.



Síncrono

Sync: o processamento da mensagem do tipo síncrono acontece no momento da execução, ou seja, o aplicativo interno aguarda a resposta do aplicativo externo para continuar a execução.


Expandir
titleClique para saber...
Painel
borderColorwhite
bgColor#D3D3D3
borderWidth2
borderStyledashed

Normalmente, mas não necessariamente, utiliza-se essa funcionalidade quando são necessárias mais informações no retorno, como dados complementares aos enviados.

draw.io Diagram
borderfalse
viewerToolbartrue
fitWindowfalse
diagramDisplayName
lboxtrue
revision1
diagramNameenvioSync
simpleViewerfalse
width
linksauto
tbstyletop
diagramWidth669



Assíncrono

Async: quando enviada uma mensagem do tipo assíncrono, o aplicativo interno não aguarda uma resposta do aplicativo externo para continuar a execução.



Expandir
titleClique para saber...
Painel
borderColorwhite
bgColor#D3D3D3
borderWidth2
borderStyledashed

O destino recebe a mensagem e coloca em uma fila junto com outras mensagens assíncronas. Posteriormente, o processamento delas é efetuado na ordem em que chegaram. Ou seja, caso a origem necessite de retorno, será feito em um momento futuro e não durante a execução do programa. É comum o uso dessas mensagens para replicação de cadastros simples, onde não envolve processamento complexo.

draw.io Diagram
borderfalse
viewerToolbartrue
fitWindowfalse
diagramDisplayName
lboxtrue
revision2
diagramNameenvioASSync
simpleViewerfalse
width
linksauto
tbstyletop
diagramWidth669


draw.io Diagram
borderfalse
viewerToolbartrue
fitWindowfalse
diagramNameAnatomiaMsg
simpleViewertrue
linksauto
tbstyletop
lboxtrue
diagramWidth1331
revision2


BUSINESS MESSAGE

A estrutura da Mensagem de Negócio está dividida em 3 partes.

Painel
borderColorwhite
bgColorlightgrey
borderStyledashed

Uma mensagem do tipo BusinessMessage são aquelas que iniciam qualquer processo de troca de mensagens entre os aplicativos.

Sempre que um aplicativo A quiser enviar ou solicitar informações do aplicativo B, ele enviará uma BusinessMessage que será processada pelo aplicativo destinatário.

Expandir
titleClique para saber...

Cabeçalho da mensagem: contem informações sobre a mensagem sendo trafegada, como seu identificador único, data em que foi gerada, transação ao qual se refere, entre outras.

Cabeçalho da transação: onde é definido qual o tipo da mensagem de negócio, que pode ser do tipo EVENT ou do tipo REQUEST.

Conteúdo de negócio: Uma BusinessMessage, seja do tipo Event quanto do tipo Request, tem seu atributo Content definido no schema da mensagem padronizada TOTVS. Isso fica a cargo das Áreas de Negócio, conforme a demanda das integrações.


Na imagem abaixo pode-se verificar um exemplo da anatomia de uma Business Message:

draw.io Diagram
borderfalse
viewerToolbartrue
fitWindowfalse
diagramDisplayName
lboxtrue
revision2
diagramNameAnatomia1
simpleViewerfalse
width800
linksauto
tbstyletop
diagramWidth1345

RESPONSE MESSAGE

A estrutura da Mensagem de Resposta está dividida em 4 partes.

Painel
borderColorwhite
bgColorlightgrey
borderStyledashed

Uma ResponseMessage representa o resultado do processamento de uma BusinessMessage pelo aplicativo que a recebeu e o seu conteúdo pode variar de acordo com o tipo de mensagem e com o resultado do processamento.

Todas as respostas geradas por uma BusinessMessage devem ser associadas à mensagem original e mantidas pelo aplicativo-origem, como forma de rastrear quem processou aquela mensagem e qual o resultado do processamento.

A mensagem de resposta contém informações sobre o resultado do processamento de uma BusinessMessage.

Expandir
titleClique para saber...

Cabeçalho da mensagem: contem informações sobre a mensagem sendo trafegada, como seu identificador único, data em que foi gerada, transação ao qual se refere, entre outras.

ReceivedMessage: Segmento com informações sobre a mensagem original (BusinessMessage) que deu origem a esta resposta.

  • SentBy: Indica qual foi a instancia que gerou a mensagem original
  • UUID: Identificador universal da mensagem de origem

ProcessingInformation: Segmento com informações sobre o resultado do processamento

  • ProcessedOn: Timestamp de quando a mensagem foi processada pelo destino
  • Status: Situação final do processamento (ok ou error)
  • Details: Lista de mensagens (erro ou aviso) retornadas no processamento.

ReturnContent: informações de negócio retornadas no processamento



Informações
iconfalse

Como se define o ReturnContent?

Da mesma forma que o atributo Content de uma BusinessMessage, o atributo ReturnContent de uma ResponseMessage é definido no schema da mensagem padronizada.


Na imagem abaixo pode-se verificar um exemplo da anatomia de uma Response Message:

draw.io Diagram
borderfalse
viewerToolbartrue
fitWindowfalse
diagramDisplayName
lboxtrue
revision3
diagramNameAnatomia2
simpleViewerfalse
width800
linksauto
tbstyletop
diagramWidth1214

RECEIPT MESSAGE

A estrutura da Mensagem de Recebida está dividida em 2 partes.

Painel
borderColorwhite
bgColorlightgrey
borderStyledashed

Uma ReceiptMessage representa a confirmação de recebimento de uma BusinessMessage pelo aplicativo destino.

Diferente da ResponseMessage, uma ReceiptMessage não irá conter qualquer informação relevante sobre o processamento da mensagem, uma vez que se entende que, se o aplicativo destino retornou um Receipt, ele não processou a mensagem naquele momento (comunicação assíncrona).

Quando a mensagem for processada pelo aplicativo-destino, uma mensagem de resposta (ResponseMessage) será gerada e encaminhada ao aplicativo que originou a BusinessMessage..

Expandir
titleClique para saber...

As informações contidas nas mensagens de recibo são genéricas e focam especificamente nos dados de recebimento da mensagem.

Onde:

ReceivedMessage: Segmento com informações sobre a mensagem original (BusinessMessage) que deu origem a esta resposta.

  • SentBy: Indica qual foi a instancia que gerou a mensagem original
  • UUID: Identificador universal da mensagem de origem

ReceiptData: Segmento com informações sobre o recebimento da mensagem

  • ReceivedOn: Timestamp do recebimento da mensagem.

Quando uma BusinessMessage é recebida e for síncrona, ela deverá ser processada imediatamente e gerará como resposta uma ResponseMessage.

Quando uma BusinessMessage é recebida e for assíncrona, será gerada como resposta, no momento da recepção uma ReceiptMessage, e posteriormente quando for processada será enviada uma ResponseMessage para esta mensagem.


Na imagem abaixo pode-se verificar um exemplo da anatomia de uma Receipt Message:

draw.io Diagram
borderfalse
viewerToolbartrue
fitWindowfalse
diagramDisplayName
lboxtrue
revision5
diagramNameAnatomia3
simpleViewerfalse
width900
linksauto
tbstyletop
diagramWidth1381


draw.io Diagram
borderfalse
viewerToolbartrue
fitWindowfalse
diagramNamecunstrucao
simpleViewertrue
linksauto
tbstyletop
lboxtrue
diagramWidth1331
revision2

Fluxo de criação da mensagem padronizada

Expandir
titleClique para saber...



HTML
<!DOCTYPE html>
<html>
<head>
<script<meta typename="text/javascriptviewport" asynccontent="" src="https://static.hotjar.com/c/hotjar-1385772.js?sv=7">
</script>
<script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js">
</script>
<script type="text/javascript" async="" src="https://ssl.google-analytics.com/ga.js">
</script>
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-K57L5DW">
</script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-K57L5DW');
</script>
<meta http-equiv="X-UA-Compatible" content="IE=11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="editable-slot slotfull layout-2-3" id="slotFull7">
<div id="SlotG" slot="true" decorator="false" editableslot="true" class=" slotint sortable">

<div id="_instance_185647_" appcode="cultura_minha_vida_rh_dwp">
<div id="wcm_widget_185647" class="wcm_widget">
<div class="wcm_corpo_widget_single">
<div id="CulturaRH_185647" class="super-widget fluig-style-guide cultura-texto" data-params="CulturaRH.instance({'group': 'TDW','cabecalho': '','dataset': 'ds_cultura_dwp'})">
<!-- bloco-vertical-tabs -->
<input type="hidden" name="instanciaId" id="instanciaId" value="185647">
<button type="button" class="btn btn-default edit-acoes fs-display-none edit-acoes-cutura" data-toggle="tooltip" data-placement="right" title="Editar ações do Painel" data-open-list-cultura-modal="">
<span class="fluigicon fluigicon-pencil fluigicon-sm"></span>
</button>
<div class="row">
<div class="wrapper-container">
<div class="container-max-1368px mx-auto px-0">
<div class="bs4-row bs4-no-gutters">

<div class="block-vertical-tabs bs4-col-12">
<div class="totvs-title bs4-col-12 mb-3 px-0 mt-0">
<h2 class="mt-0"> Cultura #SOMOSTOTVERS </h2>
</div>
<div id="cultura_185647">
<p class="mx-auto"> </p>
<div class="vertical-tabs-border bs4-row bs4-no-gutters">

<div class="bs4-col-3 px-0">
<div class="bs4-row bs4-no-gutters h-100 div-title-culture">
<div class="vertical-tabs-btn bs4-col-12 px-0 flex-container cursor-pointer">
<p class="w-100 text-md-left title-culture"> Valorizamos gente boa que é boa gente </p>
</div>
<div class="vertical-tabs-btn bs4-col-12 px-0 flex-container cursor-pointer">
<p class="w-100 text-md-left title-culture"> O sucesso do cliente é o nosso sucesso </p>
</div>
<div class="vertical-tabs-btn bs4-col-12 px-0 flex-container cursor-pointer active">
<p class="w-100 text-md-left title-culture"> Tecnologia + conhecimento são o nosso DNA </p>
</div>
</div>
</div>
<div class="vertical-tabs-content bs4-col-9 px-0 flex-container">
<div class="description-culture">
<div class="jjj m-0 d-none">

<title></title>


<ul>
<li>Somos curiosos: corremos atrás de aprender e conhecer.</li>
<li>Somos colaborativos: trabalhamos em equipes multifuncionais de forma produtiva, lidando com as diferenças de opinião e personalidade.</li>
<li>Somos digitais e intuitivos, pensamos simples e usamos tecnologia como parte do nosso dia a dia.</li>
<li>Somos fanáticos por resultados, e o “como” é tão importante quanto ”o que“.</li>
<li>Gostamos de viver em um ambiente dinâmico e que constantemente nos desafia com a evolução e superação.</li>
<li>Somos guardiões e disseminadores da Cultura. Temos orgulho do que somos.</li>
</ul>


</div>
<div class="jjj m-0 d-none">

<title></title>


<ul>
<li>Praticamos a empatia em nossas relações e fazemos o melhor em cada entrega.</li>
<li>Nossas atitudes são direcionadas para gerar melhor experiência para os clientes.</li>
<li>De forma física e/ou digital, estamos presentes e próximos.</li>
</ul>


</div>
<div class="jjj m-0">

<title></title>


<ul>
<li>Sabemos onde queremos chegar e construímos uma jornada que cria valor consistente ao longo do caminho.</li>
<li>Buscamos e aplicamos conhecimentos em tecnologia e em negócios na elaboração de soluções inovadoras, necessárias e viáveis.</li>
<li>Assumimos risco de forma responsável e "nos atiramos".</li>
<li>Se acertamos, aceleramos! Se erramos, admitimos, corrigimos rápido, aprendemos e evoluímos.</li>
</ul>


</div>
</div>
</div>

</div>
</div>
</div>

</div>
</div>
</div>
</div>
<!-- /bloco-vertical-tabs -->
</div>

<script type="text/template" class="template-cultura">
<p class="mx-auto"> </p>
<div class="vertical-tabs-border bs4-row bs4-no-gutters">

<div class="bs4-col-3 px-0">
<div class="bs4-row bs4-no-gutters h-100 div-title-culture">
{{#itens}}
<div class="vertical-tabs-btn bs4-col-12 px-0 flex-container cursor-pointer">
<p class="w-100 text-md-left title-culture"> {{titulo_texto}} </p>
</div>
{{/itens}}
</div>
</div>
<div class="vertical-tabs-content bs4-col-9 px-0 flex-container">
<div class="description-culture">
{{#itens}}
<div class="jjj m-0 d-none"> {{{conteudo_texto}}} </div>
{{/itens}}
</div>
</div>

</div>
</script>

<script type="text/template" class="template-cultura-list">
<tr documentId="{{documentid}}">
<td>{{titulo_texto}}</td>
<td>{{{conteudo_texto}}}</td>
<td class="text-right">
<span class="fluigicon fluigicon-fileedit fluigicon-sm" data-toggle="tooltip" data-placement="left"
title="edit" data-edit-acao documentId="{{documentid}}"></span>
<span class="fluigicon fluigicon-trash fluigicon-sm" data-placement="left"
title="Remover" data-remove-acao documentId="{{documentid}}"></span>
</td>
</tr>
</script> 
</div>
</div>
</div>


</div>

</div>

</body>width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}

/* Style the tab */
.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: 300px;
}

/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
}
</style>
</head>
<body>

<h2>Vertical Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
   
</body>
</html>