EAI (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.

Linha Datasul > 1 GUIA EAI2 - Datasul > image2020-5-20_20-58-16.png

Ampliar o conhecimento sobre o tema integrações

Conhecer as tecnologias envolvidas

Conhecer o padrão TOTVS para integrações

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

Definição de EAI

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?

Linha Datasul > 1 GUIA EAI2 - Datasul > pqEAI.png

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

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.

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

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

Linha Datasul > 1 GUIA EAI2 - Datasul > image2020-5-20_19-35-17.png

Integração EAI2

Fluxos de Comunicação

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.

Linha Datasul > 1 GUIA EAI2 - Datasul > image2020-5-18_14-49-15.png

Componentes da Integração - JOINVILLE

Tecnologias envolvidas na Integração

XML/SOAP

Linha Datasul > 1 GUIA EAI2 - Datasul > image2020-5-18_17-30-20.png

JSON/REST

Linha Datasul > 1 GUIA EAI2 - Datasul > image2020-5-20_19-53-3.png

MÉTODOS (Verbos) HTTP REST

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.

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.

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.

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.

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.

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.

BUSINESS MESSAGE

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

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.

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:

RESPONSE MESSAGE

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

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.

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

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:

RECEIPT MESSAGE

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

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..

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:

Fluxo de criação da mensagem padronizada

Linha Datasul > 1 GUIA EAI2 - Datasul > image2020-5-27_16-47-37.png

<head>
<meta name="viewport" content="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>

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Verdana, sans-serif;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
<body>

<h2 style="text-align:center">ARQUITETURA EAI2</h2>

<div class="row">
  <div class="column">
    <img src="https://tdn.totvs.com/download/attachments/549501254/envioASSync.png?api=v2" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://tdn.totvs.com/download/attachments/549501254/envioASSync.png?api=v2" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://tdn.totvs.com/download/attachments/549501254/envioASSync.png?api=v2" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://tdn.totvs.com/download/attachments/549501254/envioASSync.png?api=v2" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
  </div>
</div>

<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">×</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="https://tdn.totvs.com/download/attachments/549501254/envioASSync.png?api=v2" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="https://tdn.totvs.com/download/attachments/549501254/envioASSync.png?api=v2" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="https://tdn.totvs.com/download/attachments/549501254/envioASSync.png?api=v2" style="width:100%">
    </div>
    
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="https://tdn.totvs.com/download/attachments/549501254/envioASSync.png?api=v2" style="width:100%">
    </div>
    
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>


    <div class="column">
      <img class="demo cursor" src="https://tdn.totvs.com/download/thumbnails/549501254/pngwing.com%20%2841%292.png?version=1&modificationDate=1589556678803&api=v2" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://tdn.totvs.com/download/thumbnails/549501254/pngwing.com%20%2841%292.png?version=1&modificationDate=1589556678803&api=v2" style="width:100%" onclick="currentSlide(2)" alt="Snow">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://tdn.totvs.com/download/thumbnails/549501254/pngwing.com%20%2841%292.png?version=1&modificationDate=1589556678803&api=v2" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://tdn.totvs.com/download/thumbnails/549501254/pngwing.com%20%2841%292.png?version=1&modificationDate=1589556678803&api=v2" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
  </div>
</div>

<script>
function openModal() {
  document.getElementById("myModal").style.display = "block";
}

function closeModal() {
  document.getElementById("myModal").style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
    
</body>
</html>