THF CLI: A nova ferramenta para desenvolvedores TOTVS HTML Framework

Jhony Senem
TOTVS Developers
Published in
2 min readJan 11, 2019

O THF CLI é um command-line interface para criar aplicações Angular com o THF configurado, acelerando o desenvolvimento e sem precisar se preocupar com pacotes compatíveis ou configurações iniciais, como adicionar CSS do THF no arquivo angular.json e etc.

A primeira versão será a 3.0.0 para acompanhar a versão MAJOR do pacote @totvs/thf-ui e derivados.

O projeto open-source está disponível no github, onde a comunidade poderá contribuir e criar issues para possíveis inconsistências encontradas.

Instalação

Verifique se possui instalados Node, NPM e GIT.

Depois, instale o CLI globalmente:

> npm i -g @totvs/thf-cli

Começando

Inicie um novo projeto usando o THF CLI e adicione componentes dinamicamente em seu projeto.

Para criar e rodar uma aplicação, siga as etapas abaixo:

thf new SampleProject
cd SampleProject
ng serve

Para verificar os comandos disponíveis através do terminal, execute o seguinte comando:

thf --help

Comandos

Nesta primeira versão, foram lançados dois comandos que serão apresentados em seguida.

new

thf new <projectName> --template <template> --title <title>

Este comando cria um projeto Angular com o THF e suas dependências configuradas, a importação e configuração do tema também será feita de forma automática.

Por default, o template utilizado é sidemenu.

Opções

--template / -t

Pode-se utilizar dois templates, são eles:

  • blank: cria um projeto básico, sem módulos adicionais; e
  • sidemenu: cria um projeto pronto para dar sequência no desenvolvimento, com feature modules, lazy loading e shared module;

--title

O valor informado nesta opção será utilizado como título da aplicação, caso não utilizar esta opção, o nome do projeto será usado como o título.

thf new <projectName> --title <title>

add

thf add customers

Adiciona em seu projeto um módulo que possui um componente dinâmico de sua escolha com rotas internas configuradas.

Deve estar na pasta raiz do projeto, por exemplo:
c:\caminho\projeto

Se o projeto foi construído através do template sidemenu, precisamos configurar o novo módulo adicionando-o na rota e na lista de menu do projeto.

app.component.ts

readonly menus: Array<ThfMenuItem> = [
{ label: ‘Home’, link: ‘/home’ },
{ label: ‘Users’, link: ‘/users’ },
// add here
{ label: ‘newComponent’, link: ‘/newComponent’ },
];

app-routing.component.ts

const routes: Routes = [
{ path: ‘home’, loadChildren: ‘./home/home.module#HomeModule’ },
{ path: ‘users’, loadChildren: ‘./users/users.module#UsersModule’},
// add here
{ path: ‘newComponent’, loadChildren: ‘./newComponent/newComponent.module#NewComponentModule’ },
{ path: ‘’, redirectTo: ‘/home’, pathMatch: ‘full’}
];

Caso for um projeto Angular comum, é necessário importar o novo módulo na sua aplicação.

Próximos passos

Novos comandos e melhorar os comandos existentes para que cada vez mais possamos ter uma ferramenta que de fato seja utilizada por todos, afim de melhorar nosso desenvolvimento e que possamos focar ainda mais apenas na regras de negócio, deixando o THF cuidar dos detalhes!
A comunidade THF será importantíssima para isto, contribuindo conosco para crescermos juntos!

Até breve!
Jhony Eduardo Senem

--

--

Jhony Senem
TOTVS Developers

Engenheiro de Pequisa e Desenvolvimento | Core Team Portinari UI | https://portinari.io