Como integrar um projeto Ionic 2 com o Firebase

Com uma configuração simples no seu arquivo app.module.ts é possível integrar o seu projeto com o Firebase.

Crie um projeto Ionic 2. Se você não sabe como fazer isso: clique aqui. Crie um novo projeto no Firebase e copie o objeto de configuração dele. Se você não sabe como fazer isso, clique aqui.

Configurando o Firebase no seu projeto

Acesse a pasta do seu projeto usando o Prompt de Comandos. Usando esse terminal, você vai precisar instalar os módulos do AngularFire2 e Firebase com o comando:

npm install angularfire2 firebase --save

Se você não tem o Node JS instalado, clique aqui para ver o outro tutorial. Caso não saiba como usar o Prompt de Comandos do Windows, clique aqui.

Abra, no seu projeto Ionic 2, o arquivo /src/app/app.module.ts, injete os provedores (serviços) Firebase e declare sua configuração Firebase firebaseConfig(aquele objeto javascript lá do seu painel do projeto Firebase, lembra?).

No atributo imports do @NgModule adicione o módulo do AngularFire, passando o objeto de configuração firebaseConfig como parâmetro — veja na linha 26. Você vai precisar para isso, importar o AngularFireModule (escondido na linha 1):

import { AngularFireModule } from "angularfire2";

Pronto! Agora já podemos injetar o provedor do AngularFire em nossos componentes por meio do construtor.

...
import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Component({
  ...
})
export class ChatPage {
  ...

  constructor(public af: AngularFire) {
    ...
  }
}

Gostou do tutorial? Me siga para ver outros, curta e compartilhe!