Criando uma aplicação (Internet Banking) com Angular 6 — na prática e sem complicações parte 1

Danilo Agostinho
Jul 23, 2018 · 7 min read

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

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: com . com . 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 , 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

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 , 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 do Google.

Santander utiliza angular/angular material.

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 .

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 { }
Gif explicativo

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:

  1. 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';

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 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á:

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

Grande abraço!

Ir para Parte 2

Training Center

Conectamos pessoas que querem aprender algo relacionado a desenvolvimento de software com gente que pode guiá-las.

Danilo Agostinho

Written by

Front-end developer. Autor @Imasters. Mentor Traning Center. @danilodev_silva

Training Center

Conectamos pessoas que querem aprender algo relacionado a desenvolvimento de software com gente que pode guiá-las.