Configurar Firebase en Ionic 4

Integrar Firebase en Ionic 4

Antes de iniciar, es necesario que tengas instalado Ionic en su versión mas reciente, esto lo puedes seguir aquí.

Configuración de Firebase

Primero que todo necesitamos dirigirnos a la consola de Firebase, para esto debemos de tener vinculada una cuenta de Google, si no les aparece la ventana de proyectos recientes deberán de autenticarse.

Una vez autenticados debemos de añadir un nuevo proyecto, presionamos el botón de agregar proyecto +, y mostrará un formulario en donde debemos de ingresar el nombre de nuestro proyecto.

En la parte inferior nos permitirá modificar el id de nuestro proyecto, debemos de tener en cuenta que es un identificador único así que debemos de elegir bien. Continuamos.

El segundo paso nos indica si deseamos habilitar los Analytics de Google, como recomendación podemos dejarlo habilitado. Continuamos.

El Tercer paso nos preguntará en donde deseamos habilitar los Analytics, como recomendación usen el país en donde se encuentren, así mismo nos pedirá que aceptemos los términos y condiciones.

Y para finalizar debemos de presionar el botón crear proyecto. Nos va a redirigir al dashboard de nuestro proyecto.

Es momento de vincular Firebase a nuestro proyecto:

Para este ejemplo usaremos AngularFire2 esta es la librería oficial de Firebase para Angular.

vamos a dirigirnos a la terminal y ubicarnos dentro de nuestro proyecto, esto dependerá en donde se encuentra alojado su proyecto.

una vez dentro de la carpeta de nuestro proyecto ejecutaremos el siguiente comando:

npm install firebase @angular/fire --save

Ya instalado vamos a regresar al dashboard de nuestro proyecto en la consola de Firebase, en la ventana principal nos indicará qe para empezar debemos de añadir Firebase a nuesta aplicación, nos aparecerán 4 opciones, iOS, Android, Web y Unity, nosotros vamos a elegir Web ya que estaremos usando Angular.

Una vez seleccionada vamos a seguir los pasos del registro de nuestra app:

nos pedirá nombrar nuestra aplicación y si deseamos podemos configurar también el Firebase Hosting, esa configuración la pueden ver aquí.

Registramos nuestra aplicacion y desplegará el paso número 2 que debemos de seguir, lo primero que debemos de hacer es copiar el contenido de las llaves "{ }"

Este contenido de configuración debemos de pegarlo en un archivo de variables de ambiente, primero debemos de dirigirnos a:

src/environments/

Vamos a crear un archivo con el nombre de "firebaseconfig.ts" (si desean usar otro nombre no hay ningún problema).

aquí vamos a pegar la información de nuestro proyecto en Firebase:

export const firebaseConfig = {
    apiKey: '',
    authDomain: '',
    databaseURL: '',
    projectId: '',
    storageBucket: '',
    messagingSenderId: '',
    appId: ''
  };

ahora vamos a inicializar nuestra aplicación con esta configuración debemos de dirigirnos a:

src/app/app.module.ts

aqui debemos de importar el archivo de configuración que creamos hace un momento y también el Modulo de AngularFire.

import { firebaseConfig } from '../environments/firebaseConfig';
import { AngularFireModule } from '@angular/fire';

ahora ya podemos usar la variable de nuestro archivo de configuración esto lo hacemos en el @NgModule({})

En los imports haremos uso del "AngularFireModule.initializeApp()" y dentro de los parentesis, agregaremos nuestra variavle de configuración "firebaseConfig".

El ejemplo quedaría de la siguiente manera:

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
    IonicStorageModule.forRoot(), 
    AngularFireModule.initializeApp(firebaseConfig) //solo esta Línea
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Camera,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

Asegurate de agregar la coma antes de añadir el AngularFireModule a los imports

Con esto ya tenemos configurado e inicializado el proyecto con Firebase.