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

Em:

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
Módulo criado

Módulo criado

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
Componentes criados

Componentes criados

Se vc 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
Ai amor, eu sei que está tudo funcionandinho!! ❤

Ai amor, eu sei que está tudo funcionandinho!! ❤

Agora vamos colocar os novos componentes dentro da 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

import do módulo CadastroPessoaModule

import do módulo CadastroPessoaModule

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

Template html do cadastro-pessoa-form

Template html do cadastro-pessoa-form

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

cadastro-pessoa-form.component.ts

cadastr0-pessoa-form.component.ts

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

cadastro-pessoa.component.ts limpinho

cadastro-pessoa.component.ts limpinho

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.

cadastro-pessoa.module.ts

cadastro-pessoa.module.ts

Como eu disse, essa parte é beeeem chatinha, se por acaso vc achou confusa demais, me avise, faça as críticas necessárias que juntas melhoraremos o entendimento 🙂

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

009

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

cadastro-pessoa.component.ts

cadastro-pessoa.component.ts

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

ng serve
Tudo ok para mim, e para vcs?!

Tudo ok para mim, e para vcs?!

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

cadastro-pessoa-lista.component.html

cadastro-pessoa-lista.component.html

E assim

cadastro-pessoa-lita.component.ts

cadastro-pessoa-lita.component.ts

Agora limpe cadastro-pessoa-form.ts de o que tinhamos da lista

cadastro-pessoa-form.component.ts limpo

cadastro-pessoa-form.component.ts limpo

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

cadastro-pessoa.component.html

cadastro-pessoa.component.html

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

nada funciona… triste né?! :(

nada funciona… triste né?! 🙁

É 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]
cadastro-pessoa.module.ts

cadastro-pessoa.module.ts

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.

cadastro-pessoa-form.component.ts

cadastro-pessoa-form.component.ts

Agora apenas mais detalhezinho, 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

Regras da Base de dados

Regras da Base de dados

Se tudo deu certo, 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 parecido como nas imagens abaixo

cadastro-pessoa-lista.component.ts

cadastro-pessoa-lista.component.ts

cadastro-pessoa-lista.component.html

cadastro-pessoa-lista.component.html

Agora vamos a mais um vídeo =D

Bom devas, acho que era isso, os fonte 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 Agora vou nanar! Bjuss.😘 Ps: Na parte 4 iremos fazer o depoy para o Firebase Hosting 🤓

Ps: Essa parte teve participação especial da Candy <3

Candy minha filhota linda!!!

Candy minha filhota linda!!!

  • Module folding: matando o código morto

    E aí galera! O tópico de hoje é module folding, também conhecido como tree-shaking. Estes termos são um tanto complicados de traduzir para o português, logo, utilizarei os nomes em inglês ao longo deste artigo. Module folding Module folding, ou tree-shaking, trata-se de uma técnica de eliminação de código morto (não utilizado), com o intuito […]

  • Weekly #173 – Ghost 0.11.13, Microsoft Linux e Firefox 50

    A BrazilJS Weekly é a seleção semanal que reúne as novidades sobre o desenvolvimento Web no Brasil e no mundo. Ainda não é inscrito? Faça o seu cadastro e receba nossa Newsletter semanal 😎👊🙂👌👍 Sugira conteúdo para a Weekly usando o nosso canal de issues no Github. Um agradecimento especial aos 6 colaboradores da edição […]

  • Os 22 anos do JavaScript, contados pelo seu criador, Brendan Eich

    Nesta semana, especificamente no dia 15 de Maio, o JavaScript comemorou o seu 22º aniversário 👏 👏 👏
    Muito se sabe da história do JavaScript, mas que tal saber exatamente o que aconteceu nestes 22 anos através do seu criador?

Patrocinadores BrazilJS

Gold

Silver

Bronze

Apoio

BrazilJS® é uma iniciativa NASC.     Hosted by Getup