Criando um CRUD com THF (1/7)- Iniciando o projeto
Olá mundo!
Objetivo dessa série
A ideia é criar um pequeno CRUD com o THF, explorando alguns dos seus componentes e, conforme a série avançar, adicionar novas funcionalidades ao projeto. Nós não vamos desenvolver nada relacionado ao backend, vamos focar 100% no desenvolvimento usando o THF.
Sobre o projeto
Vamos criar uma aplicação básica de cadastro de clientes, o velho e bom Customers. Se surgirem novas ideias, nós vamos incorporando ao projeto.
Iremos usar a versão @totvs/thf-cli@3.0.0 para gerar nossa aplicação.
Lista de posts da série "Criando um CRUD com THF"
- Iniciando o projeto ✅
- Listando nossos clientes ✅
- Pesquisando pelos nossos clientes ✅
- Criando um novo cliente ✅
- Visualizando dados de um cliente ✅
- Atualizando um cliente ✅
- Apagando um ou mais clientes ✅
Essa lista pode sofrer alterações até o final da série. 😅
Pré requisitos
Vontade de aprender, conhecer Angular e ler o post que ensina a criar uma aplicação com o THF Cli em três passos.
Não esqueça de instalar o THF Cli.
Passo 1 — Criando e preparando o projeto
Para iniciar, vamos criar nossa aplicação, vá até seu diretório de trabalho e execute os seguintes comandos para dar início ao projeto:
thf new thf-customers --title "THF | My Customers"
cd thf-customers
ng serve
Fazendo isso e acessando a url http://localhost:4200 no seu browser favorito, você já deve ter algo parecido com isso:
Passo 2 — Limpando o que não precisa
Abra o projeto em seu editor favorito e remova a pasta src\app\users. Não vamos precisar desse módulo agora.
Eu uso e sugiro o uso do Visual Studio Code.
Agora vamos apagar o menu Users e a rota do módulo que acabamos de remover.
Acesse o arquivo src/app/app.component.ts e remova o item do menu com o label Users.
E, por último, acesse o arquivo src/app/app-routing.module.ts e remova a rota que aponta para o módulo Users.
Sua aplicação deve ficar assim:
E agora José?
Esse foi só o início do nosso projeto. No próximo post vou disponibilizar nosso backend de teste para darmos início a criação da nossa lista de clientes.
Você pode encontrar os fontes do projeto no repositório do github.