Ionic 3 com Firebase | Listando dados

Fala pessoal, tudo bem? Espero sinceramente que sim!

Continuando nossa jornada com Ionic & Firebase, neste post nós veremos como listar os dados de nosso realtime database no Firebase.

No episódio passado…

Em nossa última aula nós realizamos as configurações do sdk dentro de nosso app e criamos nosso método responsavel por persistir os dados dentro de nossa schema de cursos.

Listagem

A nossa listagem é bem simples, vamos criar um novo método dentro do nosso FirebaseServiceProvider chamado de getAll.

Vamos ao código abaixo e logo após a algumas explicações:


getAll() {
return this.db.list('courses').snapshotChanges().map(data => {
return data.map(d => ({key: d.key, ...d.payload.val()}));
});
}

O código acima é bem tranquilo, seguindo o mesmo pensamento do save nós precisamos selecionar o schema que desejamos trabalhar, neste caso courses.

Utilizamos aqui o método snapchotChanges, que traz algumas informações extras, além do conteúdo do curso, como a key. Como comentei, o método snapchotChanges traz algumas informações extras, no caso, teremos o retorno de um array com a quantidade de objetos existentes no schema.

Por exemplo, para cada curso salvo teremos uma linha no array retornado do método. As informações do curso encontram-se em d.payload.val(), que precisamos descontruir para recuperar as informações e adicionar no objeto final pós-transformação, e a key, indentificadora do registro, em d.key. Supondo que o recebedor da linha em questão é a variavel d.

Tendo isso em mente, podemos usar o operador map para realizar algumas transformações dentro do array. Neste caso, no nosso código, eu simplemente limpo o retorno trazendo apenas um array com as informações do curso junto com a key, realizando isso em cada linha do retorno vindo do firebase.

Ao fim, para trabalharmos em nossa view teremos um objeto como o abaixo:


{key: "", title:  "", description:  "",  price:  ""}

Com nosso método pronto vamos partir para nossa view.

Listando cursos em nossa Home Page

Vamos utilizar a page home para listagem, então veja o código na íntegra do home.html:

Nossa view acima recebe o atributo courses que traz um observable com os dados tratados posteriormente, usando o pipe async realizamos a assinatura desse observable, que realiza um subscribe por trás. A cada iteração jogamos a linha em questão na variável c e assim conseguimos utilizar as informações do curso a ser exibido em cada linha.

Note também que ao clique do item, por meio da escuta do evento de mesmo nome, passamos a key em questão para o método goToSingle. Tudo tranquilo mas essa view precisa das implementações em sua classe typescript, vamos a ela!

Obs.: Perceba o button na home.html, se você assistiu ao video 2 já sabe o que é, caso não, o btn é o botão criado para termos uma navegação de teste para a tela de inserção.

Segue o código do home.ts:


import { FirebaseServiceProvider } from './../../providers/firebase-service/firebase-service';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SavePage } from '../save/save';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

private courses;

constructor(
public navCtrl: NavController,
public dbService: FirebaseServiceProvider
) {
this.courses = this.dbService.getAll();
}

add(){
this.navCtrl.push(SavePage);
}

goToSingle(key) {
alert(key);
}
}

Não preciso reforçar a definição do parâmetro no construtor da home page para injeção do nosso provider.

Feito isso utilizaremos nosso atributo courses, definido em nossa classe, para receber o retorno do método do provider, o método getAll.

O método goToSingle simplesmente realiza um alert na tela com a key recebida.

Obs.: Perceba o método add no home.ts, se você assistiu ao video 2 já sabe o que é, caso não, o método foi criado para termos uma navegação de teste para a tela de inserção.

Conclusão

Bom chegamos até aqui com a listagem de nossos cursos salvos em nosso realtime database, dentro do Firebase. No vídeo abaixo temos mais detalhes do processo escrito em post, te convido carinhosamente a assistir o vídeo como forma de complementar o texto lido acima.

Em breve vamos lançar a plataforma Ionic Hero, com diversos conteúdos sobre Ionic e seu ecossistema. Inscreva-se na lista de espera clicando aqui.

Abs. Sucesso.

 

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *