Menu

Firebase + AngularFire + Ionic, en 7 pasos

firebase - June 14, 2017 por Nicolas Molina
ionic3.3.0ionic-native3.10.3ionic-app-scripts1.3.7cordova-cli7.0.1ionic-cli3.3.0

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í y crear un proyecto nuevo:

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:

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:

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

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í:

Ver código

Recuerda:

Si quieres ejecutar este demo en tu computadora, debes tener el entorno de ionic instalado y luego de descargar o clonar el proyecto debes ubicarte en tu proyecto en la terminal y luego ejecutar

npm install

Y luego

ionic cordova prepare

esto es para descargar todas las dependencias del proyecto.

¡Compártelo!