4: Integrar Firebase en el Proyecto

Objetivo

Integrar Firebase en el proyecto Ionic para utilizar servicios de backend como Firestore, autenticación y notificaciones push.

Instalar Firebase

En la terminal, ejecuta:

npm install firebase @angular/fire

Configurar Firebase

En Firebase Console, crea un nuevo proyecto y agrega una nueva aplicación web. Copia la configuración de Firebase y pégala en el archivo src/environments/environment.ts:

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
  }
};

Inicializar Firebase en el Proyecto

Abre src/app/app.module.ts y agrega la siguiente configuración:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { environment } from '../environments/environment';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFirestoreModule
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

Conceptos Básicos

Firebase es una plataforma de desarrollo de aplicaciones que proporciona servicios de backend como base de datos en tiempo real, almacenamiento, autenticación y notificaciones push.

Ejercicio

Configura Firebase en tu proyecto Ionic siguiendo los pasos anteriores. Verifica que la configuración sea correcta y que puedas utilizar los servicios de Firebase en tu aplicación.