Olá, pessoal! Tudo bem com vocês?

Recentemente eu estive conversando com o William Oliveira sobre a dificuldade que as pessoas iniciantes na área de TI têm quando o assunto é criar uma aplicação na prática ou coisas do tipo.

Outro ponto também corriqueiro, é que na Internet existem muitos tutoriais teóricos, confusos e pouco práticos, sem falar das vezes que a narrativa é muito técnica, o que prejudica quem não entende jargões técnicos.

Pensando nisso, elaborei uma série de artigos para iniciantes em Angular 2+, em um formato prático, ensinando desde instalação da ferramenta, até a configuração e criação da arquitetura do projeto.

A ideia é desenvolver um SPA (aplicação de página única) Internet Banking com o Angular na Versão 6. Apesar dessa ser a nova versão do Framework, vocês podem seguir os artigos a partir da versão 2 em diante. Porém, é altamente indicado seguir os pré-requisitos para manter uma compatibilidade e diminuir as chances de erros durante o desenvolvimento.

Detalhes sobre o projeto

No final da série pretendo criar um CRUD com o fluxo natural features de um Internet Banking, com recursos como:

• Cadastro de clientes;
• Acesso a minha conta;
• Saldos;
• Extrato.

Não usarei nenhuma linguagem de Back-end, nem persistirei os dados em um banco. Tudo será salvo no LocalStorage do navegador.

Como dito acima, o conteúdo pretende ser para inciantes, caso fuja do propósito, peço que me avisem nos comentários.

Pré-requisitos

• Node.js (v8.11.3)
• Angular 6 (v6.0.9)
• Angular material (v6.3.3)
• Bootstrap ( v4.1.2)
• JSON Server (v0.14.0)

Como editor de texto para o artigo vou utilizar o VS Code, mas fique a vontade para escolher seu editor de preferência. Deixo como sugestão (VS Code, Sublime e Notepad++).

Sobre a arquitetura escolhida

Acho importante entender porque escolhi as tecnologias acima. Primeiro, é válido saberem que grandes instituições e ramos, como: bancos, e-commerce, credenciamento médico, entre outras, estão utilizando essa arquitetura. Portanto, para aproximá-los do cenário atual, decidi utilizar tecnologias que ajudem, caso estejam na busca por oportunidades com Angular.

Obervação: existem outras combinações, por exemplo: React com Redux ou Vue.js com Laravel – depende de empresa para empresa.

Sistema operacional

Escolhi o Windows com o intuito de atender a maioria dos leitores, mas fiquem a vontade para seguir com outros sistemas operacionais também.

Começando as atividades

Considerando que você já tenha instalado o Node.js, abra o prompt de comando e verifique a versão instalada do Node.

Verificando a versão do node.js

node -v

Instalando o angular cli

npm install -g @angular/cli

Para quem não sabe, o angular CLI é uma ferramenta de linha de comando do Angular. Com ele, podemos criar projetos novos, criar components facilmente, dentre outras coisas, muito rapidamente e sem complicações.

Se a instalação der certo, você vera um tela parecida com essa:

Verificando a versão do Angular CLI instalada

ng -v

O angular na versão 6 foi instalado com sucesso.

Criando nossa aplicação

O projeto vai se chamar traning-banking em homenagem ao Training Center. Para criá-lo, é mais fácil que do que você imagina.

ng new traning-bank

Aguarde finalizar a criação do scaffold e instalar as dependências.

Assim que o Angular CLI finalizar a criação do projeto, você terá uma tela parecida com isso:

Sucesso! Entre na pasta do projeto.

cd traning-bank

E inicialize o servidor do angular:

ng s

Tudo pronto! Agora abra o navegador e acesse o endereço a seguir:

http://localhost:4200/

Aplicação rodando, podemos começar a instalação do Angular Material e do Bootstrap.

Abrindo a aplicação no editor de texto

Abra o seu editor de texto e configure-o para abrir a pasta do seu projeto. No VS Code você só precisa clicar em “file” > “open folder“.

Não vou entrar em detalhes sobre os arquivos da aplicação; vamos aprendendo na prática, aos poucos.

Instalando o angular material

Para quem não conhece o Angular Material, ele pode ser visto como um pacote de components, que a equipe do Angular disponibiliza. É de fácil integração para qualquer aplicação, e segue as boas práticas do Material Design da Google.

Perceba a tag de component <alert>. Pois é, trata-se de um component do angular material. Você pode ver a lista de components que pode usar do Angular Material aqui.

Não se apegue ao detalhes, vamos ser o mais objetivo possível.

Instalando Angular Material

Recomendo que você abra uma nova janela do seu prompt/terminal, e digite o comando:

npm install --save @angular/material @angular/cdk

Assim que terminar a instalação das dependências, você terá uma tela parecida com essa:

Instale agora o pacote de animações. Sem ele, não será possível utilizar, por exemplo, um component de modal.

npm install --save @angular/animations

Animations instalado com sucesso!

Configurando angular material na aplicação

Abra o arquivo app.module.ts, adicione o BrowserAnimationsModule, e em seguida declare em imports.

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

Abra o arquivo style.css e importe o CSS do Angular Material.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Testando o angular material

Vamos usar um component do material. Veja como é simples usar um modal. Siga os passos a seguir:

1. Importe no app.module.ts o módulo:

import {MatDialogModule} from ‘@angular/material/dialog’;

• Agora declare o MatDialogModule em imports:

imports: [MatDialogModule]

2. Abra o arquivo app.component.ts e atualize-o, seguindo os passos:

• Importe o component MatDialog:

import {MatDialog} from '@angular/material';

• Injete o Matdialog no constructor da classe:

constructor(public dialog: MatDialog) {}

• E na classe do component, insira os dois métodos:

openDialog() {
    const dialogRef = this.dialog.open(DialogContentExampleDialog, {
      height: '350px'
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }

Basicamente, abrir e fechar o component.

4. Para finalizar, abra o arquivo app.component.html e insira o código abaixo:

<button mat-button (click)="openDialog()">Open dialog</button>

Basicamente, temos um botão html, com um event bind (evento) do angular de click, que dispara o método openDialod(. Simples, né?

Vamos ver o resultado?

Sucesso! Agora podemos usar qualquer component do Angular Material.

Instalando e configurando o Bootstrap

Em apenas dois passos conseguimos integrar o bootstrap ao projeto, para isso siga os passos:

1. Instale o pacote do bootstrap via npm

npm install bootstrap --save

2. Abra arquivo style.css e adicione o import do bootstrap

@import "~bootstrap/dist/css/bootstrap.css";

Agora no arquivo app.component.html, insira o código abaixo:

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Resultado

Acho que é isso. Este artigo fica por aqui. Na parte 2 da série, vamos criar e componentizar nossa aplicação, criar rotas (navegação) e muito mais.

Espero ter ajudado, e qualquer dúvida podem pingar aqui nos comentários, ou se quiser falar comigo, estou sempre no Twitter, então me segu27e lá: @danilodev_silva.

O projeto está no GitHub, e para acessá-lo, clique aqui.

Grande abraço!