Prof. Fausto Cintra/ novembro 8, 2019/ Desenvolvimento front-end/ 0 comments

1. Tirando uma cópia do projeto de exemplo do professor

Se você acompanhou todas as aulas e fez o projeto de exemplo juntamente com o professor, PARABÉNS! Você está pronto para prosseguir no desenvolvimento do seu próprio projeto.

No entanto, se seu código estiver desatualizado em relação àquele do professor ou com erros, não se preocupe. Siga os passos a seguir:

  1. Acesse o repositório do professor correspondente à sua turma (matutino ou noturno);
  2. Clique sobre o botão Fork no canto superior direito (pode demorar um pouco). Será criada uma espécie de “cópia” do repositório do professor para o seu próprio repositório;
  3. Acesse o seu repositório e, na barra de endereços do navegador, coloque gitpod.io/#/ ANTES da URL para iniciar um novo workspace no GitPod;
  4. Acesse https://gitpod.io/access-control/ e libere o acesso write public repos na coluna do GitHub;
  5. Em https://gitpod.io/settings/, crie as varáveis de ambiente DB_USER, DB_PASS e DB_NAME, com valores de acordo com as informações do seu cadastro no serviço MongoDB Atlas;
  6. No terminal do GitPod, execute cd back-end e em seguida npm start para testar a conectividade ao banco de dados.

2. Criando os services

Os services são os responsáveis por fazer a comunicação entre a aplicação Angular e a API (back-end). Para criar um service do Angular, execute o comando exemplificado mais abaixo.

SUBSTITUA nome-da-entidade pelo nome da sua entidade no back-end. Fique atento às seguintes recomendações:

  • Use sempre letras minúsculas no nome da entidade;
  • Caso o nome da sua entidade tenha mais de uma palavra, mantenha-as todas em minúsculas e separe as partes com hífen.

No terminal:

npm run ng generate service nome-da-entidade/nome-da-entidade

NOTA: as palavras generate e service podem ser abreviadas pelas suas primeiras letras:

npm run ng g s nome-da-entidade/nome-da-entidade

Isso irá criar um arquivo chamado nome-da-entidade.service.ts na pasta src\app\nome-da-entidade. Isso ajuda muito na organização do código.

Copie o código do service curso.service.ts do repositório do professor e cole no arquivo gerado, substituindo o conteúdo. Faça as adaptações e substituições necessárias para o nome de sua entidade, com cuidado para preservar as letras maiúsculas e minúsculas de acordo com o padrão do Angular.

É recomendável que você crie TODOS os services necessários agora no início, para que eles estejam disponíveis quando forem necessários.

3. Criando um componente de listagem simples

  1. Para começar, escolha uma entidade simples e que não tenha nenhuma referência. No seu diagrama, essas entidades aparecem nas extremidades.

SUBSTITUA nome-da-entidade pelo nome da sua entidade no back-end. Fique atento às seguintes recomendações:

  • Use sempre letras minúsculas no nome da entidade;
  • Caso o nome da sua entidade tenha mais de uma palavra, mantenha-as todas em minúsculas e separe as partes com hífen.
  • Não se esqueça do -list no final do comando!

2. Escolhida a entidade, execute no terminal:

npm run ng generate component nome-da-entidade/nome-da-entidade-list

NOTA: as palavras generate e component podem ser abreviadas pelas suas primeiras letras:

npm run ng g c nome-da-entidade/nome-da-entidade-list

O comando executado irá criar os seguintes arquivos:

  • src/app/nome-da-entidade/nome-da-entidade-list/nome-da-entidade-list.component.html
  • src/app/nome-da-entidade/nome-da-entidade-list/nome-da-entidade-list.component.scss
  • src/app/nome-da-entidade/nome-da-entidade-list/nome-da-entidade-list.component.ts

Em seguida, copie o código dos arquivos curso-list.component.html, curso-list.component.scss e curso-list.component.ts do repositório do professor e cole nos arquivo gerados, de acordo com seus tipos, substituindo o conteúdo.

Faça as adaptações e substituições necessárias para o nome de sua entidade, com cuidado para preservar as letras maiúsculas e minúsculas de acordo com o padrão do Angular.

Você também precisará adaptar os nomes dos atributos da sua entidade nas colunas da tabela (arquivo .html) e na listagem da variável displayedColumns do arquivo .ts.

3. Abra o arquivo src/app/app-routing.module. No início do arquivo, importe o seu componente de listagem.

import { NomeDaEntidadeListComponent } from './nome-da-entidade/nome-da-entidade-list/nome-da-entidade-list.component';

4. Mais abaixo, no mesmo arquivo, acrescente a rota para o seu componente:

const routes: Routes = [
  // Pode haver outras rotas antes
  {
    path: 'nome-da-entidade',
    component: NomeDaEntidadeListComponent
  }
  // Pode haver outras rotas depois
}

5. No arquivo src\app\ui\main-menu\main-menu.component.html, crie um item para acessar seu component de listagem, seguindo os exemplos já existentes nesse mesmo arquivo.

6. Execute o comando npm start no front-end e, em outro terminal, o comando npm start no back-end. Você deve ser capaz de ver seus dados na listagem, caso os tenha cadastrado corretamente.

4. Criando um componente de formulário simples

  1. Um componente de formulário simples fará par com um componente de listagem simples que você já criou. Portanto, só gere componentes de formulário se você já tiver gerado o respectivo componente de listagem.

SUBSTITUA nome-da-entidade pelo nome da sua entidade no back-end. Fique atento às seguintes recomendações:

  • Use sempre letras minúsculas no nome da entidade;
  • Caso o nome da sua entidade tenha mais de uma palavra, mantenha-as todas em minúsculas e separe as partes com hífen.
  • Não se esqueça do -form no final do comando!

2. Escolhida a entidade, execute no terminal:

npm run ng generate component nome-da-entidade/nome-da-entidade-form

O comando executado irá criar os seguintes arquivos:

  • src/app/nome-da-entidade/nome-da-entidade-form/nome-da-entidade-form.component.html
  • src/app/nome-da-entidade/nome-da-entidade-form/nome-da-entidade-form.component.scss
  • src/app/nome-da-entidade/nome-da-entidade-form/nome-da-entidade-form.component.ts

3. Em seguida, copie o código dos arquivos curso-form.component.html, curso-form.component.scss e curso-form.component.ts do repositório do professor e cole nos arquivo gerados, de acordo com seus tipos, substituindo o conteúdo.

Faça as adaptações e substituições necessárias para o nome de sua entidade, com cuidado para preservar as letras maiúsculas e minúsculas de acordo com o padrão do Angular.

Você precisará trabalhar o arquivo .html do formulário de acordo com os atributos e tipos de atributos da sua própria entidade. No exemplo do curso-form.component.html, o atributo exemplificado é do tipo string, e, portanto, é utilizado um <input matInput> para capturá-lo. Se esse não for o seu caso, você encontrará mais exemplos de componentes de formulário para outros tipos de dados em turma-form.component.html.

4. Abra o arquivo src/app/app-routing.module. No início do arquivo, importe o seu componente de formulário.

import { NomeDaEntidadeFormComponent } from './nome-da-entidade/nome-da-entidade-form/nome-da-entidade-form.component';

5. Mais abaixo, no mesmo arquivo, acrescente a rota para o seu componente:

const routes: Routes = [
  // Pode haver outras rotas antes
  {
    path: 'nome-da-entidade/novo',
    component: NomeDaEntidadeFormComponent
  },
  {
    path: 'nome-da-entidade/:id',
    component: NomeDaEntidadeFormComponent
  }
  // Pode haver outras rotas depois
}

6. Execute o comando npm start no front-end e, em outro terminal, o comando npm start no back-end. A partir do componente de listagem, você deverá ser capaz de acesar o formulário pelo botão Nova entidade ou pelo botão de edição de cada uma das linhas da listagem.

5. Criando componentes de listagem mais complexos

Os componentes de listagem para entidades mais complexas seguem o mesmo princípio do componente de listagem simples, conforme explicado no item 10. A única diferença é que a tabela, provavelmente, terá mais colunas e a variável displayedColumns deverá ser ajustada para que elas sejam corretamente exibidas.

6. Criando componentes de formulário mais complexos

  1. Siga os passos 1 e 2 do item 4.
  2. No passo 3, utilize o código dos arquivos turma-form.component.html, turma-form.component.scss e turma-form.component.ts do repositório do professor e cole nos arquivo gerados, de acordo com seus tipos, substituindo o conteúdo.
  3. Continue com o passo 3 do item 4.
  4. No arquivo nome-da-entidade-form.component.ts, você precisará importar, além do service correspondente a NomeDaEntidade, os services de todas as outras entidades relacionadas (para preencher os comboboxes).
  5. Verifique as variáveis da classe (logo acima do constructor). Deve haver:
    • uma variável de objeto vazio para a entidade principal do formulário;
    • uma variável de vetor vazio, com o nome no plural, para cada entidade relacionada.
  6. Edite os parâmetros do constructor para injetar apenas os serviços importados anteriormente.
  7. Edite a função ngOnInit() para carregar corretamente as variáveis de vetor das entidades relacionadas.
  8. Continue com os passos 4, 5 e 6 do item 4.
Share this Post