Simples aplicação real time com angular 4 e firebase, parte 1

Com esse artigo quero mostrar como é fácil criar uma aplicação com Angular que tenha a propriedade de ser real time com acesso a dados numa base de dados nosql no Firebase


Parte 1, parte 2, parte 3, parte 4, parte 5,parte 6

A ideia é ter uma postagem viva, que sempre será atualizada de acordo com o feedback das devas que conheço para que seja cada vez melhor escrita e detalhada para que qualquer pessoa possa entender e praticar ❤

Nessa primeira postagem irei até a implementação de uma lista para apresentação de dados

Toda a aplicação será escrita basicamente com typescript e html. Os comandos que irei usar no terminal são para mac, existem algumas diferenças entre Mac, Linux e Windows, mas acredito que não influenciarão nos exemplos 😊

Por que typescript?
Justamente por ser uma linguagem bem intuitiva, ter uma boa documentação, ser elegante e principalmente pq eu gosto :) 
https://www.typescriptlang.org/

A primeira coisa a ser feita caso você ainda não tenha é instalar o https://nodejs.org/en/ sem ele não conseguiremos fazer nada =D
Caso vc já o tenha instalado é sempre bom atualizar.

site nodejs
Node.js é uma plataforma construída sobre o motor JavaScript do Google Chrome para facilmente construir aplicações de rede rápidas e escaláveis. Node.js usa um modelo de I/O direcionada a evento não bloqueante que o torna leve e eficiente, ideal para aplicações em tempo real com troca intensa de dados através de dispositivos distribuídos.
fonte http://nodebr.com/o-que-e-node-js/

Após a instalação já teremos também instalado o gerenciador de pacotes npm, nele iremos encontrar todas as dependências para utilizar no exemplo.

Site npm
NPM é o nome reduzido de Node Package Manager (Gerenciador de Pacotes do Node). A NPM é duas coisas: Primeiro, e mais importante, é um repositório online para publicação de projetos de código aberto para o Node.js; segundo, ele é um utilitário de linha de comando que interage com este repositório online, que ajuda na instalação de pacotes, gerenciamento de versão e gerenciamento de dependências. fonte http://nodebr.com/o-que-e-a-npm-do-nodejs/

Feito esse procedimento vamos começar instalando o angular cli https://www.npmjs.com/package/@angular/cli

Abra o terminal e digite npm install -g @angular/cli e espere, ele vai instalar um horror de coisas, mas é isso mesmo, não se preocupe

Coisa demais!!!

Agora que temos tudo instaladinho vamos começar o projeto angular, utilizando o angular cli 
Digite o comando ng new realtimeapp

Criar a aplicação com o angular

Ele também vai instalar um mooooonte de coisas, e demorar um pouquinho, mas isso é esperado, vc não precisa se preocupar.

Aplicação criada

Bem, após tudo baixado e instalado, vamos ver como ficou, abra a pasta do projeto.

comando code

Eu utilizo para desenvolver o Visual Studio Code, por isso do comando ‘code’, recomendo, mas vc pode usar o editor de sua preferência.

Que lindo!!! ❤

Vamos rodar a aplicação e ver se está tudo ok, para isso volte ao terminal e de dentro da pasta criada digite ng serve

O Visual Studio Code tem um terminal integrado que facilita muito a minha vida, por isso uso ele =D
início ng seve
final ng serve

Se estiver tudo ok vc poderá abrir essa página http://localhost:4200 indicando que está funcionando perfeitamente 😉

ng serve works! :)

Feito isso vamos criar nosso primeiro componente
Primeiro pare o ng serve usando a combinação de teclas ctrl-c
O angular tem algumas regrinhas para nomes de componentes, ele irá separar cada palavras reconhecendo-as por serem iniciadas com a primeira letra maiúscula e irá decompor colocando "-" entre cada palavra, isso é automático, e vc tb pode escrever diretamente com os traços, ex:
CadastroPessoa ficará cadastro-pessoa

Dito isso vamos criar o componente.
digite no terminal ng g c CadastroPessoa
g=gerar, c=componente

Comando para criar um componente para cadastro de pessoa usando o angular cli

Como resultado é criado um componente dentro da pasta app

Cadastro de pessoa criado usando o angular cli

Vamos ver como ficou dentro da estrutura da nossa aplicação o componente criado?
Foi criada uma pasta com o nome de cadastro-pessoa, e dentro dela podemos ver 4 arquivos e reparem nos nomes, o angular cli colocou antes das extensões a palavra '.component', essa é uma das convenções do angular que pode parecer algo desinteressante num primeiro momento, mas ao longo do desenvolvimento passei a notar muito valor na organização de código dando sentido e mostrando a responsabilidade de cada arquivo.
Dentro

arquivo html de template

Não pretendo entrar em pormenores de cada arquivo pois não é esse o objetivo dessa publicação.
O que iremos ver são os .component.html que se referem a template aonde iremos trabalhar a visualização da aplicação e os .component.ts aonde fica o código em typescript, 'métodos, variáveis, etc…'

definição do componente

Vamos testar o componente cadastro-pessoa?
Na figura acima podemos ver o nome do seletor que o angular cli criou automaticamente "selector: 'app-cadastro-pessoa',", é esse seletor que iremos utilizar para implementar o cadastro de pessoa no nosso index.
Abra o arquivo app.component.html e escreva abaixo de </h1> o seletor

<h1>
{{title}}
</h1>
<app-cadastro-pessoa></app-cadastro-pessoa>
cadastro pessoa em app.component

Feito isso vamos ver como está nossa aplicação, abra o terminal vá até a pasta do projeto e digite ng serve, feito o processo abra o navegador no endereço http://localhost:4200
A imagem abaixo deve ser idêntica ao que vc está visualizando no seu browser.

Resultado esperado para componente cadastro-pessoa

Vamos fazer algumas brincadeiras

Vamos criar um formulário que irá ter dois campos, nome e sobrenome.
Não é necessário parar o ng serve, pois a cada alteração de código, seja no html ou na ts ele irá transpilar e recarregar o navegador.
Não se preocupe com layout ou css nesse momento.
Veja como ficou o meu form, fiz uma limpa em app.component.html e .ts tirando o que é desnecessário

cadastro pessoa em app-component
Resultado esperado

Espero que tenha conseguido o resultado esperado, agora vamos implementar o código que irá recuperar as informações do form.
Vamos declarar o ngForm e o método de submit que irá resgatar as informações do formulário.
A imagem abaixo traz os exemplos.

<h1> Cadastro de pessoa</h1>
<form #f=”ngForm” (submit)=”form_submit(f)”>
<input type=”text” ngModel name=”nome” placeholder=”Nome”>
<br />
<input type=”text” ngModel name=”sobrenome” placeholder=”Sobrenome”>
<br />
<button type=”submit”>Cadastrar</button>
</form>
template html com as definições de form, inputs e método de submit
import { FormsModule, NgForm } from ‘@angular/forms’;
import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-cadastro-pessoa’,
templateUrl: ‘./cadastro-pessoa.component.html’,
styleUrls: [‘./cadastro-pessoa.component.css’]
})
export class CadastroPessoaComponent implements OnInit {
constructor() { }
ngOnInit() { }
form_submit(f: NgForm) {
console.log(f.form.controls);
console.log(‘valor do controle nome: ‘ + f.form.controls.nome.value);
}
}
Observe que o como o typescript é tipado, quando passamos o parâmetro f do form no método form_submit, ele é definido como NgForm
Implementação do método de submit passando o form (ngForm) como descrito no template html

Para visualizar o resultado, no chrome abra a visualização do developer tools, pois somos devas e vamos usar =D

Menu view
Item Developer

Desculpem meu sistema estar em inglês

Developer Tools
Resultado esperado

Bom até agora tudo bem, mas quem sabe não criamos uma lista para mostrar os dados gravado?
Vamos lá!
Vamos mexer diretamente no cadastro-pessoa.component.ts e lá declarar um array e inicializá-lo, também vamos implementar no método form_submit a adição de itens a esse array, e mostrar no console o resultado, conforme o exemplo abaixo

export class CadastroPessoaComponent implements OnInit {
pessoas:Array<any>;
constructor() { }
ngOnInit() {
this.pessoas = new Array<any>();
}
form_submit(f: NgForm) {
this.pessoas.push({ nome: f.form.controls.nome.value, sobrenome: f.form.controls.sobrenome.value });
console.log(this.pessoas);
}
}
Array de pessoas implementado
Array com itens!!

Tá bom, gostei, mas não quero que essas informações fiquem apenas no console, quero que aparece na tela, neah?!
Go girls!!!

Vamos implementar um loop no html com angular para exibir os itens do array, para isso iremos atuar diretamente no template html cadastro-pessoa.component.html 
Para isso iremos usar a diretiva *ngFor, conforme exemplo.

<h1> Cadastro de pessoa</h1>
<form #f=”ngForm” (submit)=”form_submit(f)”>
<input type=”text” ngModel name=”nome” placeholder=”Nome”>
<br />
<input type=”text” ngModel name=”sobrenome” placeholder=”Sobrenome”>
<br />
<button type=”submit”>Cadastrar</button>
</form>
<ul>
<li *ngFor=”let p of pessoas”>
{{ p.nome + ‘ ‘ + p.sobrenome}}
</li>
</ul>
implementação do *ngFor no template html

Gente, aqui termina a primeira parte, na próxima iremos começar com o firebase
Espero que tenham gostado, e por favor, feedbacks para melhorarmos essa postagem, pois tenho certeza que faltam alguns detalhes.
Conto com vcs! =D