Apps no Protheus com PO UI

Apps no Protheus  com PO UI

Olá pessoal! Hoje vou compartilhar um exemplo de como criar um app dentro do Protheus. Muitas pessoas têm dúvidas sobre como fazer isso, então vamos criar um app juntos!

Antes de começar, certifique-se de ter o NodeJS e o NPM instalados. Você também pode usar o Yarn, se preferir. O app que vamos criar será feito com Angular 14, portanto o primeiro passo é instalar ou atualizar a CLI do Angular:

```

npm i -g @angular/cli@14

```

Com a CLI instalada, vamos começar criando o projeto Angular:

```

ng new my-protheus-app

```

Esse comando irá inicializar um projeto Angular básico. Agora vamos instalar algumas dependências nele.

Dentro da pasta do projeto, instale a biblioteca de componentes PO UI, que é recomendada pelo Angular:

```

cd my-protheus-app

ng add @po-ui/ng-components@14

ng add @po-ui/ng-templates@14

```

Agora, vamos instalar a biblioteca protheus-lib-core, que nos ajudará com as integrações com o Protheus, como autenticação e tenantid:

```

npm i @totvs/protheus-lib-core

```

Você também pode precisar instalar o subsink, pois existe essa dependência no protheus-lib-core.

Ótimo, agora instalamos todas as bibliotecas necessárias para o funcionamento do nosso app. No entanto, as cores do PO UI não correspondem às do Protheus. Para resolver isso, podemos instalar o Tema do Protheus, que deixará nosso app com o estilo azul do Protheus:

```

npm i @totvs/po-theme@14

```

Agora que temos tudo instalado, vamos começar configurando o tema. Abra o arquivo `angular.json` e adicione os arquivos CSS do tema da TOTVS na seção "styles":

```

"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 `ProtheusLibCoreModule` no arquivo `app.module.ts`. Ao importar esse módulo, teremos recursos como autenticação e envio de tenantid conforme a filial logada:

```

import { ProtheusLibCoreModule } from '@totvs/protheus-lib-core';

```

Certifique-se de adicionar o `ProtheusLibCoreModule` no array de imports do NgModule.

Feito isso, vamos fazer a build do app usando o seguinte comando:

```

ng build

```

Após a build, será criada uma pasta chamada `dist`, onde teremos o app compilado. Essa pasta é muito importante, pois nela encontraremos nosso app pronto para ser usado. Compacte essa pasta em formato ZIP, mas renomeie a extensão para `.APP`.

Agora temos nosso arquivo `.app`, que é o recurso compilado que será lido pela função `FWCallApp`.

Aproveitando o assunto, é hora de criar a função de menu responsável por abrir o app. Crie o arquivo `myprtapp.prw` com o seguinte código:

```

#include "protheus.ch"

user function myprtapp()

FWCallApp("my-protheus-app")

return

```

Compile o arquivo `myprtapp.prw` e adicione a função `myprtapp` ao menu do seu sistema Protheus.

Espero que este exemplo tenha sido útil para você criar seus próprios apps dentro do Protheus. Divirta-se desenvolvendo!