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:

Parte 2
Parte 3
Parte 4

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

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 { }
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á: @danilodev_silva

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

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade