Frameworksp

Páginas filhas
  • Versão 17 (17.3.3)

Versões comparadas

Versão antiga 16

changes.mady.by.user Leonardo Castro da Silva

Gravado em

comparado com

Nova versão 17

changes.mady.by.user Debora Frias Constantino

Gravado em

Chave

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

01. Dependências

  • @angular
    • Angular na versão 17
  • @po-ui
    • ng-components@^17.13.9
    • ng-templates@^17.0.0
  • subsink
  • totvs/po-theme
    • po-theme@^17.0.0

02. Instalação

Caso já seja um projeto existente, basta instalar a dependência do protheus-lib-core

Bloco de código
languagebash
themeMidnight
npm i @totvs/protheus-lib-core@latest


Caso o CLI do Angular ainda não esteja instalado, é necessário instalar o mesmo:

Bloco de código
languagebash
themeMidnight
npm i -g @angular/cli@17


Para iniciar um projeto Angular, de forma macro, os comandos são os seguintes

Bloco de código
languagebash
themeMidnight
ng new my-protheus-app
cd my-protheus-app
ng add @po-ui/ng-components@latest
ng add @po-ui/ng-templates@latest
npm i subsink
npm i @totvs/protheus-lib-core@latest
ng serve


03. Atualização da versão 15 para a 17

Para atualizar o @totvs/protheus-lib-core da versão 15 para a 17 deve-se seguir alguns passos:

  1. Atualizar o Angular e o PO-UI do projeto para a versão 16;
  2. Após atualizar para a versão 16, atualizar para a versão 17 (Documento de atualização do PO-UI: https://po-ui.io/guides/migration-poui);
  3. Após realizar a atualização dos pacotes acima para a versão 17, instalar o protheus-lib-core:
Bloco de código
languagebash
themeMidnight
npm i @totvs/protheus-lib-core@latest
Nota
titleDependências

Certificar-se de que as dependências seguem as versões abaixo:

  "dependencies": {
    "@angular/animations": "~17.3.9",
    "@angular/common": "~17.3.9",
    "@angular/compiler": "~17.3.9",
    "@angular/core": "~17.3.9",
    "@angular/forms": "~17.3.9",
    "@angular/platform-browser": "~17.3.9",
    "@angular/platform-browser-dynamic": "~17.3.9",
    "@angular/platform-server": "~17.3.9",
    "@angular/router": "~17.3.9",
    "@po-ui/ng-components": "^17.1.0",
    "@po-ui/ng-templates": "^17.1.0",
    "@po-ui/style": "^17.1.0",
    "@totvs/common-assets": "^1.1.1",
    "@totvs/po-theme": "^17.1.0",
    "core-js": "^3.13.0",
    "rxjs": "~7.8.1",
    "rxjs-compat": "^6.6.3",
    "subsink": "^1.0.2",
    "tslib": "^2.6.2",
    "zone.js": "~0.14.4"
  }
  "devDependencies": {
    "@angular-devkit/build-angular": "~17.3.7",
    "@angular-eslint/builder": "17.5.1",
    "@angular-eslint/eslint-plugin": "17.5.1",
    "@angular-eslint/eslint-plugin-template": "17.5.1",
    "@angular-eslint/schematics": "17.5.1",
    "@angular-eslint/template-parser": "17.5.1",
    "@angular/cli": "~17.3.7",
    "@angular/compiler-cli": "~17.3.9",
    ...
    "typescript": "~5.2.2"
  }


04. Utilização

Para utilizar o protheus-lib-core, basta importar o módulo principal no projeto:

Bloco de código
languagejs
themeMidnight
import { ProtheusLibCoreModule } from '@totvs/protheus-lib-core';

Também adicionar o módulo no imports:

Bloco de código
languagejs
themeMidnight
  imports: [
    ProtheusLibCoreModule,
  ],


05. Exemplo

Importar um dos serviços do protheus-lib-core, como o ProAppConfigService que permite a comunicação do app com a camada ADVPL, permitindo por exemplo fechar a dialog a qual o app foi aberto:

Bloco de código
languagejs
themeMidnight
import { ProAppConfigService } from '@totvs/protheus-lib-core';

Criar o constructor para utilizar o serviço importado:

Bloco de código
languagejs
themeMidnight
constructor(private proAppConfigService: ProAppConfigService) {
}

Método para fechar o app no Protheus, podendo ser chamado no menu, em algum botão etc:

Bloco de código
languagejs
themeMidnight
private closeApp() {
  if (this.proAppConfigService.insideProtheus()) {
    this.proAppConfigService.callAppClose();
  } else {
    alert('O App não está sendo executado dentro do Protheus.');
  }
}


06. Geração do aplicativo

Gerar o app com o comando de build do Angular CLI:

Bloco de código
languagebash
themeMidnight
ng build

Compactar a pasta do projeto gerada dentro da pasta dist
A compatação deve ser feita, mantendo o nome da pasta original, sendo uma compactação utilizando ZIP, porém com a extensão app.
Criar um fonte ADVPL contendo a chamada da função FWCallApp, esse fonte deve ser incluso no menu. O parâmetro da função FWCappApp deve ser o nome do app, nome do arquivo gerado .app, sem extensão.

Para maiores informações sobre abrir o aplicativo dentro do Protheus: FwCallApp - Abrindo aplicativos Web no Protheus


Templatedocumentos