Apps no Protheus
Bem, não é novidade que o Protheus vem abrindo apps.
Porém muitos tem a seguinte dúvida, como fazer um?
Bom, bora criar um!!! =]
Pré-requisitos:
- NodeJS e NPM, você pode utilizar o Yarn também caso prefira
O App que vamos criar, será feito com Angular 14, portanto o primeiro passo é instalar o CLI do Angular 14 ou atualizar o seu CLI:
npm i -g @angular/cli@14Com o CLI instalado, vamos começar criando o projeto Angular:
ng new my-protheus-appEsse comando vai inicializar um projetinho Angular, que inclusive, já é funcional! Porém vamos começar a instalar algumas coisinhas nele.
Primeiro de tudo, esse comando criou uma pasta chamada my-protheus-app e precisamos abrir ela para todos os demais comandos que vamos usar, vamos lá:
cd my-protheus-appJá dentro da pastinha de nosso projeto, vamos começar instalando nossa biblioteca de componentes, nosso querido PO UI, que inclusive é uma biblioteca recomendada pelo Angular (veja aqui!):
ng add @po-ui/ng-components@14
ng add @po-ui/ng-templates@14Agora, é instalar o protheus-lib-core, essa biblioteca vai nos ajudar com as integrações com o Protheus, como autenticação, tenantid etc:
npm i @totvs/protheus-lib-corePode ser necessário instalar o subsink, pois existe essa dependência no protheus-lib-core
Pronto, instalamos basicamente todas as bibliotecas para o funcionamento do nosso app, porém… As cores do PO UI não são as mesmas do Protheus. Nesse caso, podemos instalar o Tema do Protheus, isso mesmo! Ele vai basicamente deixar nosso app azulzinho :D
npm i @totvs/po-theme@14Bom, temos tudo instalado… Mas nada sendo usado =D
Vamos começar configurando o tema, além de instalar o mesmo, precisamos informar o Angular para usar esse CSS.
Para isso, vamos alterar o arquivo angular.json e inserir os arquivos CSS do tema da TOTVS:
"styles": [
"node_modules/@totvs/po-theme/css/po-theme-default-variables.min.css",
"node_modules/@totvs/po-theme/css/po-theme-default.min.css",
"node_modules/@po-ui/style/css/po-theme-core.min.css"
]Agora, vamos importar o módulo do protheus-lib-core, e só de fazer isso, já teremos autenticação, envio de tenantid conforme a filial logada e muito mais.
Faremos isso alterando o arquivo app.module.ts:
import { ProtheusLibCoreModule } from '@totvs/protheus-lib-core';Além de importar ele, devemos adicionar o ProtheusLibCoreModule no imports do NgModule.
Agora é fazer a build, basta usar o comandinho abaixo:
ng buildPode ser necessário aumentar o tamanho budgets no angular.json para a build.
Após a build do app, será criada a pasta dist e dentro da mesma teremos a pastinha do app buildado.
Essa pastinha é BEM importante pra gente, ela deve ser compactada em formato ZIP, PORÉM, com a extensão .APP. Isso mesmo!
Agora temos o nosso .app, que será o resource compilado em nosso repositório.
Vamos compilar esse arquivo.app no repositório, ele será lido na função FWCallApp.
E falando em FWCallApp, tá na hora de criar a nossa função de menu, que será a responsável por abrir o app.
Vamos criar o fonte myprtapp.prw e nele, deve conter o seguinte código:
#include "protheus.ch"user function myprtapp()
FWCallApp("my-protheus-app")
return
Compilar o fonte myprtapp.prw e inserir a função myprtapp no menu do seu SIGAESP ou de qualquer módulo que você tenha aquele carinho e PRONTO! Se tem um app dentro do Protheus! =D
Mas calma… Você vai perceber que não consegue fechar ele =P
Aí novamente, entra o protheus-lib-core, entre alguns dos seus serviços, temos o ProAppConfigService, esse cara vai nos dar um método que permite fechar o app, ele faz uma jogada “mágica” e se comunica com a thread ADVPL para que ela encerre a dialog:
import { ProAppConfigService } from '@totvs/protheus-lib-core';constructor(private proAppConfigService: ProAppConfigService) {}private closeApp() {
if (this.proAppConfigService.insideProtheus()) {
this.proAppConfigService.callAppClose();
} else {
alert('O App não está sendo executado dentro do Protheus.');
}
}
