Gerador de Aplicações - TOTVS CodeGen Cliente

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.

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.

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

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.

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

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

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.

Adicionando zooms

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

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.

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.

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.

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:

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.

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

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

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

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

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

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.

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