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

---

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.

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.

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

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

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

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

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

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

---

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

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

Como resultado é criado um componente dentro da pasta app

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

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…’

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>

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.

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

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>

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

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

Desculpem meu sistema estar em inglês

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);}
}

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>

---

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

0