lunes 9 diciembre 2024

Cómo usar Firebase en Angular

Firebase es una plataforma desarrollada por Google que ofrece servicios backend como base de datos en tiempo real, autenticación de usuarios, almacenamiento de archivos y hosting. En combinación con Angular, Firebase proporciona una solución potente para crear aplicaciones web modernas, escalables y en tiempo real sin preocuparte por la configuración compleja del backend.

Instalación de Firebase en Angular

Antes de comenzar, asegúrate de tener configurado un proyecto Angular. Luego, sigue estos pasos:

1. Instalar las bibliotecas necesarias

Ejecuta el siguiente comando para instalar las bibliotecas oficiales de Firebase y AngularFire, que es la biblioteca oficial para usar Firebase con Angular:

ng add @angular/fire

Este comando no solo instala las dependencias, sino que también configura automáticamente tu proyecto Angular para usar Firebase. Durante el proceso, se te pedirá ingresar las credenciales de tu proyecto de Firebase.

2. Configurar Firebase en tu proyecto Angular

El comando anterior genera un archivo environment.ts con las credenciales de Firebase. Asegúrate de que contenga las claves necesarias, como:

export const environment = {
  firebase: {
    apiKey: "TU_API_KEY",
    authDomain: "TU_PROYECTO.firebaseapp.com",
    projectId: "TU_PROYECTO",
    storageBucket: "TU_PROYECTO.appspot.com",
    messagingSenderId: "TU_SENDER_ID",
    appId: "TU_APP_ID",
  },
  production: false,
};

3. Importar y configurar AngularFire en tu módulo principal

En el archivo app.module.ts, importa los módulos necesarios para inicializar Firebase:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [...],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase), // Inicializar Firebase
    AngularFireAuthModule, // Módulo de autenticación
    AngularFirestoreModule, // Módulo de base de datos Firestore
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Funcionalidades principales de Firebase en Angular

1. Autenticación

Firebase Authentication permite gestionar usuarios fácilmente. A continuación, un ejemplo para registrar usuarios:

import { AngularFireAuth } from '@angular/fire/compat/auth';

constructor(private auth: AngularFireAuth) {}

register(email: string, password: string) {
  this.auth.createUserWithEmailAndPassword(email, password)
    .then(user => console.log('Usuario registrado:', user))
    .catch(err => console.error('Error al registrar:', err));
}

2. Base de datos en tiempo real (Firestore)

Firestore es una base de datos NoSQL en tiempo real. Ejemplo para agregar y leer datos:

import { AngularFirestore } from '@angular/fire/compat/firestore';

constructor(private firestore: AngularFirestore) {}

// Agregar datos
addDocument() {
  this.firestore.collection('usuarios').add({ nombre: 'Juan', edad: 30 })
    .then(docRef => console.log('Documento agregado con ID:', docRef.id))
    .catch(err => console.error('Error al agregar:', err));
}

// Leer datos
getDocuments() {
  this.firestore.collection('usuarios').valueChanges()
    .subscribe(usuarios => console.log('Usuarios:', usuarios));
}

3. Almacenamiento

Para subir archivos al almacenamiento de Firebase:

import { AngularFireStorage } from '@angular/fire/compat/storage';

constructor(private storage: AngularFireStorage) {}

uploadFile(file: File) {
  const filePath = `uploads/${file.name}`;
  this.storage.upload(filePath, file)
    .then(() => console.log('Archivo subido exitosamente'))
    .catch(err => console.error('Error al subir archivo:', err));
}