Nessa parte iremos fazer a ligação dos dados do Angular com o Firebase.

AGORA SIM, VAMOS INTEGRAR TUDO E VER A MÁGICA ACONTECER

Na primeira parte criamos uma lista que é alimentada no método form_submit, dessa vez iremos enviar esses dados diretamente ao Firebase e de lá iremos listar no template html. Vamos nós? Para deixar tudo bem declarado iremos criar um componente para o form e outro para a listagem dos dados. Mas antes dos componentes vamos criar um módulo específico para o cadastro-pessoa, ele irá definir o escopo dos componentes criados na pasta, mantendo a hirarquia, mais tarde podemos falar mais sobre esse conceito. Para criar o componente vá ao terminal, dentro da pasta da aplicação e digite o comando:

ng g m cadastro-pessoa

Para criar os novos componentes vá ao terminal, dentro da pasta da aplicação e digite os seguintes comandos.

ng g c cadastro-pessoa/cadastro-pessoa-form
ng g c cadastro-pessoa/cadastro-pessoa-lista

<a href="https://static.imasters.com.br/wp-content/uploads/2017/07/2-4.png"><img class="aligncenter size-large wp-image-118271" src="https://static.imasters.com.br/wp-content/uploads/2017/07/2-4-620x422.png" alt="" width="620" height="422" />
</a>

Se você notar, os novos componentes foram importados e declarados dentro do módulo cadastro-pessoa, respeitando a hierarquia que queremos seguir. Isso é feito de forma automática pelo angular cli. Sempre depois de uma modificação como essas eu novamente inicio o servidor para saber se está tudo bem, em muito momentos nos focamos em codar e esquecemos de verificar possíveis bugs com um simples “ng serve”. Então, vamos ver se está tudo ok.

ng serve

<a href="https://static.imasters.com.br/wp-content/uploads/2017/07/3-3.png"><img class="aligncenter size-large wp-image-118272" src="https://static.imasters.com.br/wp-content/uploads/2017/07/3-3-620x264.png" alt="" width="620" height="264" /></a>

Agora vamos colocar os novos componentes dentro do template HTML do cadastro-pessoa

Essa parte é um tanto chata, vou tentar explicar de forma simples. Ao criarmos o módulo dentro de cadastro-pessoa, precisamos trocar as referências dos componentes para esse módulo e retirá-las de app.module para que fiquem somente no cadastro-pessoa.module.

Para simplificar vamos mudar primeiramente ao app.module.ts que deve ficar como na imagem abaixo, apenas com o import CadastroPessoaModule.

Vamos continuar com o template html do cadastro-pessoa-form. Copiei tudo que havia no template cadastro-pessoa para ele e ficou como na imagem abaixo.

Vamos fazer o mesmo que fizemos com o código do cadastro-pessoa.component.ts para o cadastro-pessoa-form.component.ts. Deverá ficar como na imagem abaixo.

Com isso pronto, vamos limpar o cadastro-pessoa.component.ts.

Vamos revisar o código do cadastro-pessoa.module, algumas diferenças se fazem presentes, e acho necessário mostrar para um melhor entendimento

Repare que dentro do modulo existem os imports de cada component da pasta cadastro-pessoa. O import de FormsModule, exports dos components e as declarations dos mesmos.

Como eu disse, essa parte é bem chatinha, se por acaso você achou confusa demais, me avise e faça as críticas que julgar necessárias que juntas melhoraremos o entendimento. ?

Bom, até eu me perdi agora, deixa eu ver aonde estou, perai…

Ah sim, vamos colocar o component cadastro-pessoa-form dentro do template html do cadastro-pessoa, ficará como na imagem abaixo.

Feito isso, vamos novamente ver se está tudo ok, lembre-se que até agora apenas modificamos o local do códigos que já escrevemos, apenas por uma questão didática, pois como eu disse, essa parte é chatinha, e precisa estar bem fixada para continuarmos. Vamos lá, ng serve!!

ng serve

<a href="https://static.imasters.com.br/wp-content/uploads/2017/07/11-1.png"><img class="aligncenter size-large wp-image-118282" src="https://static.imasters.com.br/wp-content/uploads/2017/07/11-1-620x229.png" alt="" width="620" height="229" /></a>

Agora vamos retirar a listagem do cadastro-pessoa-form algo simples assim

E assim

Agora limpe cadastro-pessoa-form.ts que tínhamos da lista

E colocamos a lista no cadastro-pessoa.component.html

Como resultado, nada mais funcionará =D. Caso tenha parado o serviço, rode novamente ng serve e veja como ficou.

É agora que vamos colocar o firebase para funcionar. Primeiramente vamos declarar o provider do AngularFireDatabase no arquivo cadastro-pessoa.module.ts.

import { AngularFireDatabase } from 'angularfire2/database';

e

<br /> providers:[AngularFireDatabase]

Agora dentro de cadastro-pessoa-form.component.ts vamos colocar os seguinte códigos

import { AngularFireDatabase } from ‘angularfire2/database’;

Vamos também injetar a depência do AngularFireDatabase.

constructor( private angularFire: AngularFireDatabase) { }

Vamos modificar o método form_submit para gravar os dados na base.

form_submit(f: NgForm) {
this.angularFire.list("pessoas").push(
{
nome: f.controls.nome.value,
sobrenome: f.controls.sobrenome.value
}
).then((t: any) => console.log('dados gravados: ' + t.key)),
(e: any) => console.log(e.message);
f.controls.nome.setValue('');
f.controls.sobrenome.setValue('');
}

Deve ficar igual a imagem abaixo.

Agora apenas mais um detalhe, precisamos liberar a leitura e escrita na base de dados, para isso vá até o console do firebase, em regras da base de dados. HTTPS://CONSOLE.FIREBASE.GOOGLE.COM/U/0/PROJECT/SIMPLESAPPREALTIME/DATABASE/RULES E sete as regras para true.

Se tudo deu certo e se não quebrou ao rodar o servidor, podemos fazer um teste para saber se está gravando na base de dados \0/ Vou gravar um vídeo para mostrar =D

Bom, gravou, agora temos que listar! Vamos implementar um pouquinho de código no cadastro-pessoa-lista.component.ts

import { AngularFireDatabase, FirebaseListObservable } from ‘angularfire2/database’;
 pessoas: FirebaseListObservable<any[]>;
constructor(db: AngularFireDatabase) {
this.pessoas = db.list(‘pessoas’);
}

E no cadastro-pessoa.component.html.

<h1>Lista de pessoas</h1>
<ul>
<li *ngFor=”let p of pessoas| async”>
{{ p.nome + ‘ ‘ + p.sobrenome}}
</li>
</ul>

Devem ficar como nas imagens abaixo.

Agora vamos a mais um vídeo =D

Bom, desenvolvedoras, acho que era isso. Os códigos fontes estão todos no Github.

https://github.com/jelielmendes/simplesapprealtime

Como eu já havia dito antes, qualquer dúvida e sugestão, por favor, me avisem.