Criando uma aplicação (Internet Banking) com Angular 6 — na prática e sem complicações parte 1
ATENÇÃO: Este tutorial foi descontinuado, em contra partida, lancei um curso completo na Udemy que te ensina a criar uma aplicação 100% na prática com angular 15 para conferir clique aqui: https://bit.ly/curso-angular15-na-pratica
Olá, pessoal! Tudo bem com vocês?
Esta série já possui as seguintes partes:
Recentemente, estive conversando com o William Oliveira, sobre a dificuldade que as pessoas iniciantes na área de TI, tem 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ático, 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 posts 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 tutoriais a partir da versão 2 em diante. Mas, é 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 vou usar nenhuma linguagem de Backend, 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)
- Editor de Texto para o tutorial vou utilizar o Vs Code mas fique a vontade para escolher seu editor de preferência deixo como sugestão (VsCode, Sublime, Notepad++).
Sobre a arquitetura escolhida
Acho importante entender porque escolhi as tecnologias acima. Primeiramente, é válido saberem, que grandes instituições e ramos como bancos, e-commerce, credenciado médico, dentre outras, estão utilizando essa arquitetura. Portanto, para aproximá-los do cenário atual decidi utilizar tecnologias ajudem caso estejam na busca por oportunidades com angular venha a te ajudar.
Obervação: existem outras combinações por exemplo: React com Redux. 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. 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 isto:
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 isto:
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
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 VSCode 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 do Google.
Santander utiliza angular/angular material.
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 terminar a instalação das dependências você terá uma tela parecida com isto:
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 e 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 import 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:
- Importe no app.module.ts o modulo:
import {MatDialogModule} from ‘@angular/material/dialog’;
agora declare o MatDialogModule em imports.
imports: [MatDialogModule]
2. Abra arquivo app.component.ts e atualize-o seguindo os passos:
Import o component MatDialog
import {MatDialog} from '@angular/material/dialog';
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:
- 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 codigo 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 post 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 segue lá: @danilodev_silva
O projeto está no GitHub e para acessá-lo clique aqui.
Grande abraço!