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!