Schematics: Criando um gerador de códigos com Angular — Parte 2
Tags: angular, angularcli, angularschematics, frontend
Published: 2022-01-19 01:13:54

---
title: Schematics: Criando um gerador de códigos com Angular — Parte 2
published: true
date: 2019-06-12 04:27:23 UTC
tags: angular,angularcli,angularschematics,frontenddevelopment
canonical_url: https://ricardo-mello.medium.com/schematics-criando-um-gerador-de-c%C3%B3digos-com-angular-pt-2-81b558ce1638
---

### Schematics: Criando um gerador de códigos com Angular — Parte 2

![](https://cdn-images-1.medium.com/max/1024/1*6hidlCWFJer25hBprw7D_A.jpeg)

> Este post é o segundo de uma série sobre o Schematics, que aborda desde os conceitos até termos um gerador de código funcional. Leia o primeiro post [aqui](https://dev.to/ricmello/schematics-criando-um-gerador-de-codigos-com-angular-parte-1-4056).

[No post anterior](https://medium.com/@ricardo.mello/schematics-criando-um-gerador-de-c%C3%B3digos-com-angular-introdu%C3%A7%C3%A3o-23fcad8e4ddb) nós aprendemos os principais conceitos do Schematics e criamos a nossa primeira Collection. Agora, vamos estruturar a nossa Collection e criar o nosso gerador.

![](https://cdn-images-1.medium.com/max/330/1*vGMqrn9N60IeRh-QjXm4lg.jpeg)

### Criando o Schema

O Schema contém os metadados com as opções que o schematic permite e/ou precisa para funcionar. Pra adicionar um Schema ao nosso schematic padrão, vamos criar o arquivo `schema.json` dentro da pasta `my-schematics` com o seguinte conteúdo:

{% gist https://gist.github.com/ricmello/e983db67ef5802b5f032cdf5161c805d %}

Nele, nós definimos alguns atributos padrões, como o `path`, que é fornecido pelo CLI, e o atributo `name`, que será o nome do nosso módulo customizado.

Nós conseguimos obter o nome do módulo pelo flag `--name` e pelo `argv[0]` que é o primeiro argumento passado pro comando (ex.: ng g my-schematics hello). Caso nenhum nome seja passado, o `x-prompt` perguntará o nome do módulo. Lembrando que o nome está marcado como `required`, tornando ele um parâmetro obrigatório.

Esses parâmetros estarão disponíveis como atributos do no nosso objeto `_options`, que a gente usou no hello world.

Feito isso, vamos alterar o `collection.json` novamente para que ele referencie o nosso schema:

{% gist https://gist.github.com/ricmello/c6f5f12f62e8c2b2d8ab46ddcf5e8998 %}

### Definindo a Collection padrão

Lembra que eu disse que é legal estender a collection do Angular pra gente não precisar ficar passando o nome da nossa collection o tempo todo? Pra isso, Vamos adicionar a linha `["extends": "@schematics/angular"]` ao arquivo `collection.json`. Ele vai ficar assim:

{% gist https://gist.github.com/ricmello/0cf429a51c5ebc487cb57af5741ef101 %}

Depois, vamos adicionar a chave `cli` com a nossa collection no arquivo `angular.json` do projeto:

```
// angular.json
...  
  "cli": {
    "defaultCollection": "my-schematics"
  }
```

Agora, você pode executar o seu schematic da mesma forma que executa os comandos do Angular!

### Configurando o gerador

Vamos configurar a `RuleFactory` para gerar o nosso módulo conforme o template que ainda iremos definir. Para isso, substitua o conteúdo do arquivo `index.ts` pelo arquivo abaixo:

{% gist https://gist.github.com/ricmello/9f079ad8d3c7ed5bfc09828bb0ba8bb6 %}

A nossa `Rule` pode ser resumida em três etapas:

- Obtenção os dados do projeto a partir da configuração do workspace;
- Montagem do `path` em que os arquivo serão criados;
- Parse dos arquivos de template.

É necessário dar algumas voltas pra ter um schematic consistente e que funcione tanto dentro do projeto quanto a partir da raiz, assim como os schematics do próprio Angular. No final de tudo, o resultado é bem satisfatório.

### Criando o Template

Nós podemos trabalhar de várias formas com o schematics. Seja executando os schematics padrão para gerar uma estrutura de módulo personalizada ou alterando arquivos da tree. Como estamos falando em geração de código, vamos gerar o nosso módulo via template.

Nosso template vai conter um módulo com dois componentes. O template do schematics não é nada diferente do que nós já estamos acostumados. A sintaxe lembra muito um cara old school chamado ASP.

Como já temos o nosso `index.ts` pronto pra compilar o nosso template, vamos ao trabalho!

#### Template do módulo

O primeiro arquivo a ser criado é o nosso módulo. Vamos criar uma pasta chamada `files` dentro do diretório do nosso schematics e nela o arquivo: `__name@dasherize__.module.ts.template`. Esse nome esquisito é necessário para que o parser gere o nome do arquivo utilizando a função `dasherize` que irá converter o atributo `name` para kebab-case.

{% gist https://gist.github.com/ricmello/189cf361284d2cc8a4d7247d159b1f7d %}

No nosso template, nós utilizamos a função `classify` para converter o atributo `name` para PascalCase, e com isso gerar os nomes das classes dinamicamente.

#### Template dos componentes

No caso dos componentes, a lógica é a mesma. Você pode criar um ou vários componentes no mesmo diretório ou em pastas separadas que o schematics respeitará a sua estrutura. No nosso caso, vamos criar os dois componentes (list e form) no mesmo diretório do módulo:

{% gist https://gist.github.com/ricmello/93e99e90b5cd1d0dc46a1d2de3d3577e %}

{% gist https://gist.github.com/ricmello/710a45aa43544422ad295771f4c69721 %}

### E agora, José?

Vamos ver se esse treco todo funciona? Primeiro vamos rodar o `npm run build` do projeto `my-schematics` para compilar o projeto, navegar para o projeto `my-project` e ficar feliz porque agora é hora da verdade! Vamos executar o nosso gerador:

```
ng g my-schematics awesome
```

<img width="300" src="https://media.giphy.com/media/12NUbkX6p4xOO4/giphy.gif">

RODOOOUU!! Geramos um módulo com dois componentes básicos dentro do nosso projeto. Agora basta definir as suas rotas e testar os seus componentes que acabaram de sair do forno. OU, fica a lição de casa: adicionar as rotas ao seu template do schematics também.

Eu preferi padronizar tudo. Módulos, rotas, esqueletos de página e até mesmo os testes unitários foram adicionados ao template. Uma dica é: Crie um módulo completamente funcional do jeito que você quer padronizar e converta ele pra template somente quando estiver tudo pronto. Assim fica mais fácil de testar enquanto você está desenvolvendo.

Até a próxima!