O Futuro do SmartClient

A linha Protheus 100% na Web

Daniel Otto
Mansano

2024/ Junho
Agenda 2

Introdução WebApp

WebAgent WebMonitor

Depuração Broker HTTP

AdvPL/TLPP via
Navegador
Introdução 3

O Projeto Zero Installation

O Projeto Zero Installation visa levar

todos os produtos da Linha Protheus para
a nuvem, evitando, onde for possível, a
instalação de aplicativos locais.
Introdução 4

O Projeto Zero Installation

A conclusão deste projeto implica na

descontinuidade do SmartClient Desktop
 5

02 WebApp
 6

As 3 ondas da evolução do WebApp

Interface Acesso/Integração Protocolo

Lit-Element WebAgent WebSocket (+9.1.x)

● Similaridade ● Microsoft Office ● Protocolo enxuto
● Usabilidade ● Sistema de arquivos ● Zero configuração
● Performance ● Execução de programas ● Performance em alta latência
● Reaproveitamento de código ● Equipamentos
 WebApp Comparativo, da tela de login à edição de um produto 7

WebSocket vs Desktop | Menor, melhor…

Os testes foram feitos em três etapas:

1-Sem pontos de distorção;

2-Cenário mais comum;
3-Redes com baixa velocidade.

Empate técnico -5% +38%

48.46

Webapp Arquitetura 8

Shared WebSocket
Memory WebApp

Navegador

TCP/IP SmartClient
AppServer
48.46

Webapp Arquitetura 9

Shared WebSocket
Memory WebApp

Navegador

TCP/IP SmartClient
AppServer

Uma seção do WebApp consome cerca de 300Kb a mais, relativos ao

motor que traduz as telas AdvPL/TLPP em conteúdo HTML.

O processamento e a manipulação de dados (CRUD), continua sendo

de responsabilidade do AppServer/DBAccess utilizando o WebApp.
 Webapp Porta Multiprotocolo 10

Sem Conexão segura (SSL)

O Multiprotocolo é um acelerador, criando rotas a partir de uma porta
única, facilitando a entrega de diversos serviços aos seus usuários.

No arquivo [Link], usaremos:

[DRIVERS]
ACTIVE=TCP
MULTIPROTOCOLPORT=1 => Habilita Multiprotocolo
MULTIPROTOCOLPORTSECURE=0 => Desabilita SSL
[TCP]
TYPE=TCPIP
PORT=5023 => Multiporta
[WebApp]
PORT=8023

[Link]
 Webapp Porta Multiprotocolo 11

Com Conexão segura (SSL)

Não abordaremos a configuração de conexões seguras, estes links possuem informações a respeito:

● Application Server - Porta Multiprtocolo

○ [Link]
● Porta Multiprotocolo - Geração de Certificado
○ [Link]
● Porta Multiprotocolo - Instalação de Certificado
○ [Link]
 Webapp Limitações dos Navegadores 12

Limite máximo de conexões por domínio

Os browsers possuem um limite máximo de conexões por domínio, e

cada aba do SIGAMDI representa uma conexão com o AppServer.

Ao atingir esse limite, o browser bloqueia novas conexões até que uma
das abas anteriores seja fechada.

[Link]
Comportamento dos links abaixo em relação a esse
[Link]
WebEngine+InactiveTimeout

O TWebEngine é um Iframe, e por questões de segurança (Same-origin_policy)

os navegadores bloqueiam scripts que tentam acessar um iframe de uma
origem diferente, possibilitando técnicas maliciosas como Clickjacking.

Os eventos que controlam o timeout do WebApp são disparados pela

navegação entre componentes AdvPL/TLPP (Tab/Enter), ao utilizar o
TWebEngine só será possível capturar esses eventos se o
protocolo, host-name e porta forem da mesma origem.

[Link]
 Webapp Apêndices importantes 13

EnvServer/LastMainProg

Padroniza os acessos aos seus ambientes e programas para todos os usuários.

[WEBAPP]
Port=8080
EnvServer=SQLITE,MSSQL,ORACLE,DEVOPS
LastMainProg=SIGAFAT,SIGAFIN,SIGAEST

HideParamsForm

Oculta a tela de parâmetros iniciais, iniciando o ERP com as opções definidas nas chaves EnvServer e LastMainProg.

[WEBAPP]
Port=8080
HideParamsForm=1
EnvServer=SQLITE
LastMainProg=SIGAFAT

Importante
O download inicial do WebAgent é disponibilizado na tela de parâmetros, sendo
necessário o contorno abaixo quando utilizar o HideParamsForm:
[Link]
 Webapp Apêndices importantes 14

OnlyHostNames

Define se o acesso será feito exclusivamente por nomes de domínio, bloqueando o acesso via IP:

[WEBAPP]
Port=8080
OnlyHostNames=1 => 0=Desligado (default) | 1=Ligado

SetKey no Webapp

Os navegadores modernos impedem que scripts de terceiros capturem ou

modifiquem o comportamento de seus atalhos padrão.

Por isso não é possível associar um bloco de código às seguintes

combinações de teclas:

[Link]
Webapp Compatibilidade com o Mobile (Tablets) 15
 Webapp Transição do Desktop para o WebApp 16

Preparamos um FAQ para facilitar sua transição do SmartClient Desktop para o WebApp.

[Link]
Introdução 17

O Projeto Zero Installation

A conclusão deste projeto implica na

descontinuidade do SmartClient Desktop
 18

03 WebAgent
 WebAgent Informações importantes 19

O WebAgent é um serviço websocket opcional, necessário "apenas" nas estações de trabalho

que necessitem liberar ao WebApp acessos como:

● Leitura e gravação de arquivos locais;

● Integração com o pacote Microsoft Office;
● Consumo de DLLs (Windows), SOs (Linux) e Dylibs (MacOS).

Importante:
Para uso das rotinas padrão, como cadastros e relatórios, o WebAgent não é necessário.

Vantagens no uso do WebAgent em conjunto com o WebApp

● Simplificação na montagem e padronização de ambientes;

● Instalação e atualização mais rápida em relação ao SmartClient, devido ao menor número de arquivos.

[Link]
 WebAgent Configuração 20

Configuração para download do WebAgent, arquivo [Link].

[WEBAGENT]
VERSION=1.0.0
Windows_x86=C:\totvs\appserver\webagent\[Link] => Caminho completo
Windows_x64=webagent\[Link] => Caminho relativo à pasta do AppServer
Darwin_universal=webagent\[Link]
Linux_x64_deb=webagent\[Link]
Linux_x64_rpm=webagent\[Link]

● Version: Define a versão atual do instalador para download,

pode ser utilizada para update (versão superior) ou downgrade (inferior).
● Demais parâmetros: Definem o Sistema Operacional e o local para
download, pode ser utilizado o caminho relativo ao AppServer

O download é feito pelo popup ao lado, apresentado na tela de parâmetros,

bastando baixar e instalar a aplicação.

Após instalado, essa tela não será mais exibida.

[Link]
 WebAgent Parâmetros de linha de comando 21

O WebAgent pode ser iniciado via linha de comando, esses parâmetros podem ser
utilizados em conjunto, as opções são:

Exibe help com essas opções

web-agent -h ou --help

Abre o WebAgent em console e não exibe o ícone da bandeja (systray)

web-agent -c ou --console

Altera a porta padrão (21021) para 21023

web-agent --port 21023

Exibe a versão do WebAgent

web-agent -v ou --version

Habilita a geração de log para investigações de problemas

web-agent --locallog 1
 WebAgent Parâmetros de linha de comando 22

É possível abrir uma janela sem abas do navegador utilizando o parâmetro launch, essa opção passa a sensação ao usuário de estar rodando
uma aplicação convencional e não o navegador.

É possível também utilizar parâmetros de abertura (&A=), artifício usado, por exemplo, no SIGALOJA, e muito útil em algumas customizações.

Importante: Na primeira vez que o comando "launch" for utilizado, o navegador possivelmente será exibido sem estar maximizado, para
obter uma melhor experiência, recomendamos que você maximize a janela antes de entrar no ERP.

Nas próximas sessões o navegador irá respeitar o estado/tamanho em que foi fechado pela última vez.

Sintaxe:
webagent launch "ip+porta+parâmetros" --browser="caminho para o navegador"

Importante: "ip+porta+parâmetros" precisam ser passados entre aspas duplas, exemplo:

web-agent launch "[Link]

Mais exemplos:

Windows
C:\Users\Administrator\AppData\Local\Programs\web-agent\[Link] launch "[Link]
--browser="C:\Program Files\Google\Chrome\Application\[Link]"

Linux
/opt/web-agent/web-agent launch "[Link] --browser="/usr/bin/microsoft-edge"

[Link] Web Agent-Launch

 WebAgent Parâmetros de linha de comando 23

É possível abrir uma janela sem abas do navegador utilizando o parâmetro launch, essa opção passa a sensação ao usuário de estar rodando
uma aplicação convencional e não o navegador.

É possível também utilizar parâmetros de abertura (&A=), artifício usado, por exemplo, no SIGALOJA, e muito útil em algumas customizações.

Importante: Na primeira vez que o comando "launch" for utilizado, o navegador possivelmente será exibido sem estar maximizado, para
obter uma melhor experiência, recomendamos que você maximize a janela antes de entrar no ERP.

Nas próximas sessões o navegador irá respeitar o estado/tamanho em que foi fechado pela última vez.

Sintaxe:
webagent launch "ip+porta+parâmetros" --browser="caminho para o navegador"

Importante: "ip+porta+parâmetros" precisam ser passados entre aspas duplas, exemplo:

web-agent launch "[Link]

Mais exemplos:

Windows
C:\Users\Administrator\AppData\Local\Programs\web-agent\[Link] launch "[Link]
--browser="C:\Program Files\Google\Chrome\Application\[Link]"

Linux
/opt/web-agent/web-agent launch "[Link] --browser="/usr/bin/microsoft-edge"

[Link] Web Agent-Launch

 WebAgent Execução de rotinas sem interface 24

Muitas rotinas de processamento não possuem interface, e o parâmetro --headless pode ser utilizado nestes casos.

Windows
C:\Users\Administrator\AppData\Local\Programs\web-agent\[Link] launch
"[Link] --browser="C:\Program
Files\Google\Chrome\Application\[Link]" --headless

Linux
/opt/web-agent launch "[Link]
--browser="/usr/bin/microsoft-edge" --headless

[Link]
 WebAgent Registro do Certificado (SSL) para uso do WebAgent 25

O certificado garante que apenas o WebApp tenha acesso à API do WebAgent, que recebe exclusivamente conexões via localhost.

O registro é automático para Windows 10/11, e será efetivado na primeira execução do WebAgent.
Importante: Caso apresentada uma tela solicitando o registro, confirme esta opção.

Para Linux e MacOS é necessária a configuração manual do certificado.

[Link]

Neste exemplo iremos configurar o certificado para o Microsoft Edge no Ubuntu Linux

● Após a instalação do WebAgent

● Localize o arquivo totvs_certificate_CA.crt na pasta /opt/web-agent
● Acesse o Edge e efetue o registro:
○ Na barra de navegação digite: edge://settings/privacy/manageCertificates
○ Acesse: Authorities (autoridades)
○ Na sequência: O botão Import (importar)
○ Selecione o arquivo totvs_certificate_CA.crt na pasta /opt/web-agent
○ Marque todos os Trusts como na imagem ao lado, e por fim, OK

Importante:
É necessário configurar o certificado para cada navegador que utilize no Linux
 WebAgent Habilitando o WebAgent na Tela de Parâmetros 26

01 - Na tela de parâmetros, selecione o botão de configuração. 02 - Habilite o Agent Local, a porta padrão é a 21021,
podendo ser alterada se necessário.

04 - Pressionando o OK na tela de parâmetros, será exibida a

03 - Na sequência, feche a configuração clicando no X mensagem abaixo, confirme a abertura do WebAgent.
na parte superior da tela.
É possível permitir que o WebAgent seja aberto automaticamente.
WebAgent Integração com o Microsoft Office 27
WebAgent Consumindo uma DLL 28
WebAgent Lendo um diretório 29
WebAgent Recuperando dados da estação de trabalho 30
 31

04 WebMonitor
 WebMonitor Configuração 32

O WebMonitor permite acompanhar as sessões do ERP, e já vem ligado por padrão em

builds iguais ou superiores à [Link] do AppServer.

Importante: O WebMonitor utiliza a porta multiprotocolo, exemplo:

[Link]

[Link]
 WebMonitor Funcionalidades 33

As funcionalidades do WebMonitor são as mesmas do Monitor Electron.

 WebMonitor Sistema de Privilégios (a partir da versão 1.2) 34

O WebMonitor suporta um sistema simples de privilégios, baseado no arquivo [Link].

● Para manter o comportamento atual com versões anteriores, todas as operações vem liberadas por padrão.
● Os usuários devem pertencer ao grupo administrador ou ser administrador.
● As informações desta sessão são compartilhadas pelo monitor da extensão TDS-VSCode e pelo Monitor Electron.

[TDS]
AllowMonitor=*
EnableDisconnectUser=admin
EnableSendMessage=admin,user1,user2
EnableBlockNewConnection=0

● <username list> é a lista de usuários com o privilégio

liberado, separadas por `,` (vírgula).

● Para liberar o privilégio a qualquer usuário (grupo admin),

coloque `*` (valor padrão).

● Para bloquear o privilégio a qualquer usuário

coloque `0` (zero).

[Link]
 WebMonitor WebMonitor com Broker 35

Para utilização do WebMonitor com o Broker é necessária a chave PROTHEUS_MONITOR_EMBEDDED=1 no [Link].

[Link]

Importante:
Por enquanto, a chave PROTHEUS_MONITOR_EMBEDDED só funciona com o Broker TCP (SmartClient Desktop), por
tanto, se utilizar Broker HTTP para WebApp, será necessário criar um Broker TCP apenas para o monitoramento.

Importante: A partir da release 24.10 não será necessário este contorno.

O acesso do WebMonitor via Broker deve obrigatoriamente ser feito através do protocolo HTTP ([Link] mesmo
que a conexão tenha sido configurada via SSL, essa característica se deve à configuração da porta Multiprotocolo.

[Link]
 WebMonitor Descontinuidade do Monitor Electron 36

Com a liberação do WebMonitor, o Monitor Electron

entra em fase de descontinuidade,
e não será compatível com a nova release 24.10

[Link]
 37

05 Depuração via
VSCode
 Depuração AdvPL/TLPP via Navegador 38

01-Acesse depuração, a engrenagem e Adicionar Configuração 02-Selecione a opção TOTVS Language Debug via Web App

03-Informe o ip:porta para chamada da sessão via WebApp 04-Selecione o launcher que acabamos de criar
A depuração deve ser feita diretamente na porta do WebApp

* Nota de rodapé – asterisco superescrito 14pt e texto 18pt.

[Link]
 Depuração AdvPL/TLPP via Navegador 39

05-Acesse Configurações, procure por navigator, selecione

a aba Usuário e informe o caminho para o seu navegador, 06-Inicie a Depuração
neste exemplo, utilizamos o Edge em Linux.

07-Prossiga normalmente com a depuração

 40

06 Broker HTTP
 Broker HTTP Configuração 41

O Broker HTTP é um balanceador de carga, distribuindo as conexões entre dois ou mais servidores, sua configuração é muito simples,
onde o servidor principal terá os IPs e Portas dos servidores secundários, que receberão efetivamente as conexões.
Importante: É obrigatório o uso da porta multiprotocolo, pois ela fará o redirecionamento para os servidores com o WebApp.
No Linux, para configuração do Servidor Primário é obrigatório utilizar o arquivo [Link].

Servidor Primário ([Link]) Servidor Secundário #1 Servidor Secundário #2

[GENERAL] [general] [general]

ConsoleLog=0 app_environment=sqlite app_environment=sqlite
[DRIVERS] [DRIVERS]
[BALANCE_HTTP] ACTIVE=TCP ACTIVE=TCP
LOCAL_SERVER_PORT = 8000 MULTIPROTOCOLPORT=1 MULTIPROTOCOLPORT=1
; hostname/ip e porta destino MULTIPROTOCOLPORTSECURE=0 MULTIPROTOCOLPORTSECURE=0
REMOTE_SERVER_01 = localhost 8001 [TCP] [TCP]
REMOTE_SERVER_02 = localhost 8002 TYPE=TCPIP TYPE=TCPIP
PORT=8001 => Está é a porta multiprotocolo PORT=8002
Inicie os servidores secundários, e na sequência
inicie o servidor primário, com as seguintes [WebApp] [WebApp]
linhas de comando: PORT=8011 PORT=8012

Windows: appserver -balance_http

Linux: ./appsrvlinux -balance_http [Link]
Broker HTTP Iniciando os serviços 42

O acesso será feito pela porta configurada no servidor primário

E redirecionada automaticamente aos secundários

 Broker HTTP Configuração de conexões seguras 43

Para informações sobre conexões seguras entre o Broker HTTP e o AppServer, acesse os links abaixo:

● Application Server - Porta Multiprotocolo

○ [Link]

● Seção [SSLConfigure]
○ A seção permite habilitar o TOTVS | Application Server para criptografar e autenticar as informações
que são transmitidas pela internet, assim como outras operações de assinatura e certificação.
○ [Link]
 Broker HTTP Consultando o status do broker via browser 44

Acessando a rota abaixo é possível ver o status de conexões por servidores secundários, exemplo utilizando a porta 8000:
[Link]

[Link]
 Broker HTTP Links relevantes 45

● Application Server - Porta Multiprotocolo

○ [Link]
● Uso do Broker HTTP com SmartClient HTML e Porta Multi Protocolo
○ [Link]
● Balanceamento entre Clientes HTTP e servidor Application Server
○ [Link]
● Balanceamento com Broker
○ [Link]
● WebEngine+InactiveTimeout
○ [Link]
OBRIGADO
Mansano Daniel Otto
Gestor - TEC Product Owner - TEC
mansano@[Link] [Link]@[Link]
Valorizamos gente boa que é boa gente

Somos movidos por resultados

Investimos na tecnologia que viabiliza

[Link] @totvs

Construímos relações de longo prazo com nossos clientes

@totvs @somostotvers

Quando colaboramos somos mais fortes

/totvs /totvs

[Link] company/totvs
#SOMOSTOTVERS