Firebase & AngularFire In Depth:
Notas del Curso
1. Introducción a Firebase y AngularFire
Firebase es una plataforma de desarrollo de aplicaciones respaldada
por Google que ofrece varios servicios como bases de datos en tiempo
real, autenticación, almacenamiento de archivos, y hosting.
AngularFire es una biblioteca oficial de Angular que facilita la
integración de Firebase con aplicaciones Angular. Proporciona servicios y
herramientas que permiten utilizar los servicios de Firebase dentro de un
proyecto Angular de manera más eficiente.
Servicios clave de Firebase:
o Firebase Authentication: Manejo de autenticación de usuarios
con distintos proveedores como Google, Facebook,
email/password, etc.
o Cloud Firestore: Base de datos NoSQL en tiempo real que
permite almacenar y sincronizar datos en las aplicaciones.
o Firebase Storage: Almacenamiento de archivos, especialmente
útil para guardar imágenes y videos.
o Firebase Hosting: Hosting rápido y seguro para aplicaciones
web.
2. Integración de Firebase con Angular usando AngularFire
Configuración inicial:
o Iniciar un nuevo proyecto en Firebase Console.
o Instalar AngularFire y Firebase en el proyecto Angular: npm install
@angular/fire firebase.
o Configurar Firebase en el proyecto Angular añadiendo las
credenciales en el archivo [Link].
o Importar AngularFireModule y AngularFirestoreModule en el
módulo principal de Angular ([Link]).
Autenticación con Firebase:
o Configurar servicios de autenticación en Firebase Console.
o Usar el servicio AngularFireAuth en Angular para manejar el
registro, inicio de sesión y autenticación con proveedores como
Google.
o Implementación de métodos como signInWithEmailAndPassword,
signOut, y manejo de usuarios autenticados mediante authState.
Uso de Firestore:
o Colecciones y documentos: Firestore organiza datos en
colecciones, y cada colección contiene documentos que son
estructuras de datos en formato JSON.
o Métodos para CRUD (Create, Read, Update, Delete):
Crear: add(), set() para agregar documentos.
Leer: valueChanges(), snapshotChanges() para obtener
datos en tiempo real.
Actualizar: update() para modificar documentos.
Eliminar: delete() para borrar documentos.
o Consultas avanzadas: Filtrado y ordenamiento de datos con
where() y orderBy().
3. Casos de uso y mejores prácticas
Autenticación y protección de rutas:
o Protege rutas en Angular usando guardas (AuthGuard) que
verifican el estado de autenticación.
o Ejemplo: Redirigir a la página de inicio de sesión si el usuario no
está autenticado.
o Usar observables para suscribirse al estado de autenticación y
mostrar/habilitar funcionalidades específicas en la UI según el
estado del usuario.
Sincronización de datos en tiempo real:
o Usar Firestore para sincronizar datos en tiempo real entre
usuarios, por ejemplo, en aplicaciones de chat, listas de tareas, o
aplicaciones colaborativas.
o Ventajas de Firestore: fácil escalabilidad y bajo tiempo de latencia
para sincronización de datos.
Manejo de almacenamiento:
o Subir y manejar archivos (imágenes, documentos) usando
AngularFireStorage.
o Proveer URLs seguras para acceder a archivos almacenados en
Firebase Storage.
o Implementar carga y progreso de archivos en tiempo real,
mostrando el progreso al usuario.
Despliegue de aplicaciones:
o Desplegar la aplicación Angular directamente desde la línea de
comandos usando Firebase Hosting: firebase deploy.
o Beneficios: Certificados SSL automáticos, URLs personalizadas, y
fácil integración con el backend de Firebase.