Histórico da Página

Objetivo

O intuito deste programa é gerar CRUDs simples para as tabelas disponíveis dos bancos selecionados

O projeto está disponível aqui:totvs-codegen.zip

Acesso

O gerador pode ser acessado através da url do ambiente configurado

No momento, não existe necessidade de um login, então basta acessar o endereço e utilizar.

Obs: Pode acontecer de a página não ser exibida completamente. Se isso acontecer, apenas recarregue a página.

Tipos de projeto

Atualmente, são gerados os artefatos:

• Progress (API e BO)
  API no padrão T-Talk, e BO com consulta dinâmica usando GpsQuery
• Frontend PO-UI 16 Simplificado (Angular16)
  Tela padrão de CRUD com codificação simplificada, utilizando po-ui@16 + angular16

Alguns artefatos possuem dependências específicas a serem adicionadas no projeto.
Para verificar as dependências do projeto, acessa a sessão de dependências do projeto.

Dependências para a casca do projeto frontend

• node: 16.20.0
• totvs-gps-controls: ^15.0.17
• totvs-gps-crud: ^5.0.7
• totvs-gps-services: ^15.0.0
• totvs-gps-utils: ^5.0.7
• totvs-gps-custom: ^5.0.3

     Obs.: As dependências totvs-gps-controls, totvs-gps-crud, totvs-gps-services e totvs-gps-utils e totvs-gps-custom serão disponibilizadas em um .tgz na casca disponibilizada na sessão de template do frontend

Dependências do projeto

• node: 14.20.1
• typescript: 3.8.3
• angular: 9.1.6
• progress: 12/11

Instalação do projeto

Necessário ter o node 14.20.1, angular 9.1.6 e progress 12/11 instalado na máquina.

Para instalação do node, basta acessar este link 

Para instalação do angular, com o node instalado, basta executar o comando npm install -g @angular/[email protected]

Se o ambiente for windows, execute o comando get-executionpolicy em seu powershell, se o resultado for diferente de RemoteSigned, execute o seguinte comando: Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

Com o projeto baixado, na pasta raiz do projeto é necessário executar o comando npm install, para instalação das dependências do projeto

Para sincronização dos dados basta acessar a sessão de sincronia de dados

Após isso, basta rodar o comando npm run prod

Obs.: Caso o ambiente do Codegen seja o mesmo ambiente que vai ser gerado os artefatos, terá que versionar o node, utilizando o NVM, podendo baixar no link aqui

Utilização

Na tela inicial, podem ser pesquisadas as aplicações que já estão cadastradas, incluir uma nova, editar uma já existente, excluir e gerar os artefatos da aplicação.

Image Added

Cadastrando uma aplicação

Uma nova aplicação pode ser cadastrada através do botão Adicionar, ou uma aplicação existente pode ser alterada através da ação de editar.

Os dados básicos da aplicação estão dentro da sessão Dados da aplicação.

Image Added

Os dados a serem informados:

• Tabela: nome da tabela do banco de dados. As tabelas são atualizadas todos os dias, após aplicação do dicionário de dados. Para mais informações de como realizar consulte a etapa de sincronia de dados
• Nome do componente: é o nome da aplicação que será gerada
• Descrição: titulo da aplicação
• Módulo: módulo, dentro do padrão de APIs. Ex: "hcg", "hfp"
• Versão: versão, dentro do padrão de APIs. Ex: "v1", "v2"
• Time responsável: nome do time responsável. Ex: "contratos", "financas"

O nome do componente segue um padrão específico (lower case, palavras separadas por hífen). Caso o nome não esteja neste padrão, ao sair do campo o nome será corrigido automaticamente.

Adicionando campos

Image Added

Um campo pode ser adicionado através da ação Adicionar dentro da tabela Campos disponíveis.
Ao clicar em adicionar, caso exista alguma aplicação que a chave primária seja similar ao campo em questão, será solicitado se deseja adicionar um novo relacionamento. Neste caso, será aberta a tela conforme o item Adicionando zooms logo abaixo.
Obs: o gerador pode sugerir um zoom de algum campo que tenha o nome parecido, mas que não seja correto, devido as diferentes variações de nomes de campos que temos no banco de dados.

Image Added

O preenchimento dos campos deve seguir as informações abaixo:

• Propriedade: nome da propriedade no modelo de dados (nome interno, deve ser usado camelCase e nomenclatura em inglês)
• Descrição: label em tela para este campo. Será sugerido o label cadastrado no dicionário de dados
• Tipo ABL: tipo do dado Progress. Já será sugerido o tipo correto
• Valor Fixo ABL: campo o campo possuir um valor fixo a ser aplicado diretamente no backend
• Tipo JS: tipo do dado JavaScript. Já será sugerido o tipo correto
• Valor Inicial JS: quando houver um valor inicial para a propriedade em tela
• Formato Entrada: máscara do campo
• Tamanho máximo: limite de caracteres permitido no campo em tela
• Chave Primária
• Obrigatório
• Editável: indica se o campo estará disponível para alteração durante a edição do registro (na inclusão, continua disponível)
• Auto-incremento: indica se o campo (numérico) terá o valor incrementado automaticamente (neste caso, não estará habilitado na inclusão)
• Visível: indica se o campo deve aparecer na tela de detalhes
• Listado em grid: indica se o campo deve aparecer na tela de listagem
• Link: indica se, na tela de listagem, o campo terá um link para tela de detalhes
• Filtro: indica se o campo será considerado para pesquisa
• Filtro por faixa: indica se o campo de filtro, será por faixa (inicial e final)

Quando houver algum relacionamento cadastrado na aplicação, será exibido um campo adicional chamado Enumerador / Zoom, ao qual terá a lista de relacionamentos que podem ser utilizados.

Adicionando enumeradores

Image Added

Ao clicar em Adicionar na tabela Relacionamentos, e selecionar a opção Enumerador, a tela para cadastro de enumeradores será aberta.

Image Added

Deve ser informado o nome do componente (mesmas regras do nome do componente da aplicação), uma descrição informativa do zoom, e os valores do mesmo.

Âncora
zoom zoom

Adicionando zooms

Image Added

Ao clicar em Adicionar na tabela Relacionamentos, e selecionar a opção Zoom, a tela para cadastro de enumeradores será aberta.

Image Added

Só pode ser criado zoom para uma aplicação já cadastrada no gerador. Ao informar a aplicação de zoom, novas opções serão abertas para seleção.

Image Added

O campo chave se refere ao campo que será utilizado como valor na aplicação, e o campo label se refere ao campo que será utilizado como descrição do valor.

Na tabela logo abaixo, serão exibidos todos os campos cadastrados na aplicação de referência do zoom, e devem ser selecionados os campos a serem exibidos na tela do zoom.

Gerando os artefatos

Na tela inicial, ao selecionar uma aplicação existente, e acionar a opção Executar, será aberta a tela para gerar os artefatos.

Image Added

Devem ser selecionados os tipos de artefato que serão gerados.

Ao confirmar a execução, serão gerados os artefatos em um caminho de rede, ao qual irá aparecer no rodapé da tela. Também terá um link para copiar o caminho para a área de transferência.

Image Added

Sincronização de dados

Para que as tabelas apareçam é necessário com o progress 12 ou 11 instalado na máquina, executar o arquivo com tais parâmetros abaixo:

[caminho_instalacao_progress_12_ou_11 (ex.: dlc122)]/bin/prowin32.exe -b  -cpterm iso8859-1 -cpstream ibm850 -basekey "ini" -ininame "arquivo.ini" -pf "\arquivo.pf" -p  "caminho_instalacao_codegen\src-abl\dict-dump.p" -param \caminho_instalacao_codegen\data[bases_de_dados_que_serao_utilizadas_separados_por_vírgula (ex.: srcadger, gp)]

• arquivo.pf: O .pf é o arquivo que contém as configurações da conexão do progress com o banco. Nele vai estar alguns parâmetros da sessão, bem como apontamentos de conexões com bancos de dados
• arquivo.ini: O .ini é para configuração para telas GUI (Graphical User Interface) 

Caso apareça uma mensagem semelhante a essa:Image Added

Exclua os arquivos gerados no /data/tables e tente novamente.

Em seguida, deve-se executar o comando npm run build:data contido no package.json para atualizar os dados

Criação de template

Template Frontend

O Codegen gera apenas a aplicação para ser inserido dentro de um projeto Angular

Aqui fica disponibilizado a "casca" de um projeto Angular

Casca_do_projeto.7z

Para verificar as dependências da casca do projeto frontend, clique aqui

Para instalar as dependências da casca do projeto frontend, basta rodar o comando npm install --legacy-peer-deps na pasta thf2

Para o build do artefato, na basta thf2, após o artefato e suas dependências estarem nos devidos lugar, basta executar o comando ng build nome-do-artefato --watch --output-path=diretorio-tomcat\webapps\nome-do-projeto\nome-do-artefato --configuration=production

Após isso, se tudo ocorrer bem, o projeto poderá ser acessado no http://localhost:porta-configurada/nome-do-projeto/nome-do-artefato

Caso seja gerado um novo template, após a compilação do projeto, já irá aparecer na tela para seleção desse template

• Para criar um novo template é necessário criar na pasta data/template.

Image Added

• Usando como base um dos dois templates existentes (backend/frontend), basta copiar e colar na mesma pasta e fazer as devidas alterações

     Obs.: Pode-se ainda alterar os templates existentes

• O nome da pasta será o título que ficará ao tentar gerar o artefato

Image Added

• Para o template de frontend, na pasta [nome_do_template]/$Datasul/src, terá o angular.json da funcinonalidade gerada que será colocado no projeto

      Obs.: É possível fazer a geração de arquivos necessário para integração contínua, como por exemplo o pom.xml, que é utilizado com a ferramenta maven

Image Added

•  Dentro da pasta [nome_do_template]/$Datasul/src/app/programs terá a pasta cuja seja o nome do componente na criação do mesmo, dentro dela conterá todo o conteúdo de um CRUD simples

Image Added

• Dentro da pasta [nome_do_template]/$Datasul/src/bootstrap conterá o arquivo de estilização que será colocado dentro da pasta do projeto

Image Added

• Na casca do projeto disponibilizado contém o arquivo app.component.spec.ts é apenas um modelo para testes que pode ser implementado ou não

Image Added

Template Backend

O Codegen gera apenas a aplicação para ser inserido dentro de projeto progress

As includes ut-api, ut-api-notfound, ut-api-utils, ut-api-action já são expedidadas no produto padrão

• Para criar um novo template é necessário criar na basta data/template.

Image Added

• Usando como base um dos dois templates existentes (backend/frontend), basta copiar e colar na mesma pasta e fazer as devidas alterações

      Obs.: Pode-se ainda alterar os templates existentes

• O nome da pasta será o título que ficará ao tentar gerar o artefato

Image Added

• Para o template de backend, na pasta [nome_do_template]/$GP/[nome_do_componente], terá a pasta api, bosau, dbo e rtp

Image Added

• Dentro da pasta api/v1, irá conter o arquivo cuja vai fazer comunicação com a bosau e realizar a comunicação com o frontend, contendo os endpoints
• Dentro da pasta bosau, irá conter dois arquivos, o .i, onde ficará a include da tabela temporária, e no ponto .p conterá o fluxo de CRUD com a conexão da tabela selecionada
• Dentro da pasta dbo/utils, irá conter o arquivo .i, onde faz as tratativas de erros http que são recebidas pela rowerror.i do rtp
• Dentro da pasta rtp, irá conter o arquivo .i, onde pode se chamar para gerar erros de campos e de regras, como no exemplo abaixo:

Image Added