Firebase + AngularFire + Ionic, en 7 pasos

June 14, 2017

Incluir Firebase en un proyecto de ionic puede ser algo complejo pero el equipo de Angular nos ofrece AngularFire, una librería para conectar más fácil con firebase dentro de Ionic o cualquier proyecto basado en Angular.

Paso 1: Creación del proyecto en Firebase.

Debes ir a la nueva consola de firebase aquí{:target=“_blank”} y crear un proyecto nuevo:

firebase-database-and-ionic-2

Paso 2: Copiar las variables de configuración.

Ahora debemos ir a la sección de Auth y copiar las variables de configuración que nos provee firebase, oprime el botón WEB SETUP:

firebase-database-and-ionic-2

Paso 3: Reglas de seguridad

Por último vamos a la sección de Database y configuraremos las reglas de seguridad para que nos permita conectarnos a la base de datos sin ninguna autentificación:

firebase-database-and-ionic-2

Paso 4: Iniciando el proyecto

Lo primero que haremos será iniciar un nuevo proyecto con ionic, vamos a nuestra terminal y ejecutamos:

ionic start demo104 blank --cordova

Ionic crea una carpeta con el nombre del proyecto, nuestro siguiente paso será ubicarnos dentro a la carpeta del proyecto desde nuestra terminal con:

cd demo104

El proyecto inicia con el template blank y por esto tendremos una estructura básica del proyecto, la carpeta en la que vamos a trabajar será src:

Paso 5: Agregar Firebase y AngularFire

Ahora para integrar Firebase y AngularFire debemos instalar dos dependencias en el proyecto, así:

npm install firebase angularfire2 --save

Paso 6: Creando variable de configuración

Debemos crear una variable que tenga las llaves otorgadas por Firebase en app.module.ts.

const firebaseConfig = {
  apiKey: "AIzaSyAvYzM1bqFjoVi-VGMHeDbN0XwFsYDtLQ0",
  authDomain: "demo104-60efc.firebaseapp.com",
  databaseURL: "https://demo104-60efc.firebaseio.com",
  projectId: "demo104-60efc",
  storageBucket: "demo104-60efc.appspot.com",
  messagingSenderId: "903778168776"
};

Paso 7: Conectado Ionic con Firebase

Para conectarnos a Firebase debemos importar a AngularFireModule y AngularFireDatabaseModule, agregar estos módulos a los imports de la aplicación, así:

...

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';

export const firebaseConfig = {
  apiKey: "AIzaSyAvYzM1bqFjoVi-VGMHeDbN0XwFsYDtLQ0",
  authDomain: "demo104-60efc.firebaseapp.com",
  databaseURL: "https://demo104-60efc.firebaseio.com",
  projectId: "demo104-60efc",
  storageBucket: "demo104-60efc.appspot.com",
  messagingSenderId: "903778168776"
};

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig,'demo104'),
    AngularFireDatabaseModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [...]
})
export class AppModule {}

Y listo ya con la anterior configuración conectamos Ionic con Firebase, si quieres ver el ejemplo completo con Firebase Database, puede ir aquí: