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:

Parte 2
Parte 3
Parte 4
Parte 5

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.

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

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