Ionic 3 com Firebase | Configurando & Salvando Primeiro Curso

Fala pessoal, tudo bem? Espero sinceramente que sim!

Continuando nossa série sobre Ionic 3 com Firebase, nesta aula nós vamos configurar nosso projeto para de fato utilizar o Firebase dentro de nosso app.

No post passado nós demos inicio ao nosso projeto, instalando assim as depêndencias necessárias para a comunicação com nosso backend, neste caso, provido pelo próprio Firebase.

Então vamos continuar nossa jornada!

O Firebase

O Firebase é um projeto comprado pela Google em meados de 2014 que funciona como um Backend As A Service ou BAAS.

Na época o Firebase era conhecido pelo Realtime Database, onde você salvava e sincronizava dados em tempo real em todos os dispositivos conectados.

O Realtime Database continua existindo, só que agora junto a diversos outros serviços providos pelo Firebase, como:

  • Autenticação Social;
  • Analytics para Apps;
  • FCM (Firebase Cloud Message);
  • AD MOB;
  • Storage;

Esses são alguns do serviços disponiveis no Firebase e cada dia mais a Google investe em funcionalidades e novas opções dentro dos serviços, como o lançamento do Kit para Machine Learning.

Para nosso curso conheceremos de inicio o Realtime Database, então vamos lá!

Nossa conta no Firebase

Antes de tudo precisamos criar um conta no Firebase, acesse http://firebase.google.com e conecte sua conta Google existente. É bem simples e fácil.

Após a criação de sua conta acesse o seu console clicando no menu superior direito chamado de ‘Go to Console (Acessar Console)‘. Você cairá na tela abaixo:

Para setar um novo projeto, basta clicar em Adicionar projeto. Você verá em sua tela um poup-up com alguns campos para adição de informações como o nome do projeto, a região e alguns checks de informações; Preencha todos e clique em Criar Projeto, ao fim do pop-up:

Após a conclusão de criação, prossiga clicando no botão Continuar:

Com isso você cairá na tela interna de opções para o projeto criado. Os projetos dentro do firebase suportam três plataformas:

  • Web;
  • Android;
  • iOS;

O Firebase traz suporte de utilização tanto para aplicações Web, Híbridas como também para apps nativos com Android e iOS!

Na tela inicial podemos clicar em Adicionar Firebase ao seu projeto Web, ao clicar será aberto um pop-up com algumas configurações que utilizaremos mais a frente em nosso projeto Ionic, na imagem abaixo eu seleciono apenas o que você precisa copiar para adicionarmos em nosso app Ionic, veja:

Essas informações são muito particulares do seu app, então tome cuidado ao utiliza-las. Neste caso estou mostrando para você conhecer e saber quais dados precisamos copiar/utilizar.

Com  os dados em mãos podemos acesar, ainda dentro do painel, a área do Realtime Database. Na mesma tela inicial do projeto você encontrar o menu do Realtime Database logo abaixo:

Basta clicar em Começar  no card referente. Como vamos utilizar o Realtime Database, clique em começar no card do Realtime Database. Veja abaixo:

Ao clicar você será levado a uma tela de configuração de acesso, selecione a opção teste dando a possibilidade de qualquer pessoal acessar seu banco. Neste cenário que estamos não precisamos realizar autenticação ou alguma outra regra para acesso em nosso database, entretanto, no mundo real é importante que tenhamos esse cuidado. Veja a imagem abaixo:

Feito isso, podemos clicar em Ativar no canto inferior direito de nosso pop-up. Com isso já temos o necessários, por hora, aqui em nosso painel do Firebase.

Vamos voltar para nosso app Ionic e realizar os passos necessários para salvar dados vindos do app em nosso realtime database dentro do Firebase.

Voltando ao nosso app

Em nosso projeto precisamos realizar 3 passos para chegarmos ao objetivo deste post:

  • Configurar o AngularFire;
  • Criar Nosso Service para o CRUD com Firebase;
  • Criar nosso componente de form para inserção dos nossos primeiros dados;

Vamos lá!

Configurando AngularFire2

O primeiro passo é importar o módulo do AngularFire em nosso app.module.ts. Na chave import adicione as linhas abaixo:

AngularFireModule.initializeApp({
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
}),
AngularFireDatabaseModule

Veja o app.module na integra clicando aqui.

Acima importamos dois módulos, o módulo base que recebe as configurações recebidas no setup do nosso projeto no firebase e o módulo responsável por trazer os participantes necessários para utilização do RealTime Database dentro de nossa aplicação.

Com isso podemos continuar!

Criando Provider FirebaseService

Inicialmente para este post nós iremos gerar nosso provider e adicionar o primeiro método que será nosso save. Vá até seu terminal ou cmd(Windows) e execute o comando abaixo na raiz do seu projeto:


ionic generate provider firebaseService

O comando gerará um provider para nós dentro da pasta src/providers/firebase-service/, chamado de firebase-service.ts que conterá nossa  lógica de consumo do RealTime Database.


import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

/*
Generated class for the FirebaseServiceProvider provider.

See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class FirebaseServiceProvider {

constructor(public db: AngularFireDatabase) {
}

}

O provider gerado será praticamente igual ao acima, com uma pequena diferença que já removi as chamadas para o client http que não utilizaremos nesta série.  Adicionei acima também a chamada, no construtor, para o AngularFireDatabase que vêm do pacote angularfire2/database.

Vamos criar nosso primeiro método, o método save. Veja o código abaixo:


save(course: any) {
this.db.list('courses')
.push(course)
.then(r => console.log(r));
}

O método é bem simples, primeiramente chamamos nosso schema a ser utilizado, neste caso courses. Posteriormente chamamos o método push para adicionar nosso novo curso na lista de cursos em questão, este curso será recebido via passagem de parâmetro para este método.

O retorno desta operação é via promisse, para isso utilizamos o then para visualizarmos o retorno desta operação, aqui somente realizamos um console.log que posteriormente será substituido por um toastr com mensagens de operação para o usuário.

Com isso podemos partir para a geração do nosso component(page) responsável por exibir o form de save.

Criar nosso componente de form para inserção dos nossos primeiros dados

Primeiramente vamos gerar nossa page, execute o comando abaixo em seu terminal ou cmd:


ionic generate page save

Chamo aqui minha page de save, a mesma será gerada dentro de src/pages na pasta save. Aqui não existe muita complicação, iremos criar um form que conterá o bind para um objeto course, assim que o form for preenchido passaremos o objeto course para nosso service FirebaseServiceProvider do qual nossa page save irá se utilizar.

Primeiramente vamos ao código do save.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FirebaseServiceProvider } from '../../providers/firebase-service/firebase-service';

/**
* Generated class for the SavePage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/

@IonicPage()
@Component({
selector: 'page-save',
templateUrl: 'save.html',
})
export class SavePage {

course = {
'title': '',
'price': '',
'description' : ''
};

constructor(
public navCtrl: NavController,
public navParams: NavParams,
public dbService: FirebaseServiceProvider
) {
}

ionViewDidLoad() {
console.log('ionViewDidLoad SavePage');
}

save(course) {
this.dbService.save(course);
}
}

Como podemos ver no código acima adicionamos ao nosso construtor a chamada para nosso FirebaseServiceProvider que será injetado neste componente de página. Outro ponto a atentar é nosso método save que recebe um parâmetro course e passa para ser processado pelo service, simplificando as coisas e isolando o comportamente dos processos com o firebase.

Agora vamos alterar nossa view save.html criando nosso form, segue o código na integra abaixo:

Nosso form é bem simples, como comentado, utilizamos o two-way databind para passarmos os dados do curso para nosso método save que se utiliza do service para persistência no nosso bd.

Utilizamos também o event-bind click no button do form para que ao clicarmos nele essa operação descrita seja executada enviando assim as informações para o backend, neste caso firebase.

Com isso chegamos ao resultado abaixo, nossa tela de inserção com a persistência no RealTimeDatabase:

No video ao fim do post eu crio uma navegação para chegarmos nesta tela, além de mostrar todo o tutorial aqui descrito, convido você a da uma assistida! 😀

Outro detalhe, não esqueça de registrar sua page lá no app.module na chave entryComponents e também na chave declarations.

Conclusão

Nesta segunda parte chegamos ao nosso primeiro save no Realtime Database, dentro do Firebase. O processo se torna bem simplificando quando utilizamos o sdk oficial e também isolamos a lógica de acessos e etc em um serviço, permitindo futuramente o reaproveitamente deste comportamento em outros aplicativos.

No video abaixo mostro o tutorial acima e alguns detalhes a mais. Te convido a da uma assistida:

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.

2 comentários em “Ionic 3 com Firebase | Configurando & Salvando Primeiro Curso”

Deixe uma resposta

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