Integración de Firestore en Angular para guardar mensajes de chat

Implementa un chat confiable con Firestore en Angular: guarda mensajes y conversaciones, reemplaza mocks por un servicio real y ajusta reglas de seguridad. Aquí verás, paso a paso, cómo usar addDoc, query con where, suscripciones con onSnapshot y manejo de Observable para obtener un flujo reactivo y ordenado por fecha desde el frontend.

¿Cómo integrar FirestoreService para guardar mensajes y conversaciones?

Para centralizar el guardado y la lectura, se crea un FirestoreService que inyecta Firestore y expone métodos claros. Se validan datos mínimos del modelo de mensaje de chat: usuario, contenido y tipo. Si falta algo, se rechaza la promesa y se muestra el error en el chat. Cuando todo está ok, se toma la colección de mensajes y se usa addDoc con la estructura que espera Firebase.

• Validaciones obligatorias: usuario, contenido y tipo.
• Colecciones: mensajes y conversaciones.
• Errores: se capturan con catch y se propagan al componente.
• Ordenamiento: por fecha en el frontend, tras recibir los documentos.

¿Qué valida guardar mensaje?

Se confirma que el mensaje tenga los campos esenciales. Luego se mapea al formato esperado por Firebase y se almacena con addDoc en la colección de mensajes.

// FirestoreService async guardarMensaje(mensaje: MensajeChat): Promise<void> { if (!mensaje.usuario || !mensaje.contenido || !mensaje.tipo) { throw new Error('Datos de mensaje incompletos'); } const ref = collection(this.firestore, 'mensajes'); const data = { usuario: mensaje.usuario, contenido: mensaje.contenido, tipo: mensaje.tipo, // 'usuario' | 'asistente' | 'error' fecha: mensaje.fecha, }; await addDoc(ref, data); }

¿Cómo obtener mensajes por usuario con observable?

Se construye una query con where para filtrar por el ID de usuario. Se usa onSnapshot para escuchar cambios en tiempo real y emitirlos a través de un Observable. Los mensajes se mapean al modelo de chat y se ordenan por fecha en el frontend para asegurar consistencia.

obtenerMensajesDeUsuario(usuarioId: string): Observable<MensajeChat[]> { return new Observable((observer) => { const ref = collection(this.firestore, 'mensajes'); const q = query(ref, where('usuario', '==', usuarioId)); const unsubscribe = onSnapshot(q, (snap) => { const mensajes = snap.docs.map(d => d.data() as MensajeChat) .sort((a, b) => a.fecha - b.fecha); observer.next(mensajes); }, (error) => { observer.error(error); }); return () => unsubscribe(); }); }

¿Cómo se guardan conversaciones completas?

Además de los mensajes individuales, se guardan conversaciones con sus metadatos: usuario, título y los mensajes incluidos. Se usa la misma mecánica: referencia a la colección y addDoc, gestionando errores en el catch.

async guardarConversacion(conv: Conversacion): Promise<void> { const ref = collection(this.firestore, 'conversaciones'); await addDoc(ref, { usuario: conv.usuario, titulo: conv.titulo, mensajes: conv.mensajes, fecha: conv.fecha, }); }

¿Cómo reemplazar el mock por FirestoreService en el chat?

El ChatService pasa de datos falsos a datos reales. Se inyecta el FirestoreService y se reemplazan, uno por uno, los mocks en inicialización y envío de mensajes. Al suscribirse al observable de mensajes por usuario, cada cambio ejecuta las acciones en los componentes que dependen de ese flujo.

• Inicializar chat: suscripción a obtener mensajes por usuario.
• mensajeSubject: emite el array recibido para actualizar la UI.
• carga de historial: se marca en false cuando llegan los datos.
• Errores: se muestran y se emite un array vacío.

// ChatService (fragmentos) async inicializarChat(usuarioId: string) { this.firestoreService.obtenerMensajesDeUsuario(usuarioId).subscribe({ next: (mensajes) => { this.mensajeSubject.next(mensajes); this.cargandoHistorial = false; }, error: (e) => { console.error(e); this.mensajeSubject.next([]); } }); } async enviarMensaje(mensajeUsuario: MensajeChat) { await this.firestoreService.guardarMensaje(mensajeUsuario); // tipo: 'usuario' // Al recibir respuesta del asistente o un error, también se guarda. await this.firestoreService.guardarMensaje(mensajeAsistente); // tipo: 'asistente' // En caso de fallo de Gemini, guardar mensaje de 'error'. }

• Tipos de mensaje: usuario, asistente y error.
• Sustitución total del mock: se activa la inyección, se importan dependencias y se borran líneas simuladas.

¿Cómo ajustar reglas de Firestore y validar el flujo end-to-end?

En la consola de Firebase, en Firestore Database > rules, se pegan reglas que permiten acceder a documentos y modificar mensajes para usuarios autenticados en modo test. Se guarda con Publish o con control S. Luego se levanta la app con npm start, se inicia sesión con Google y se verifica la creación de la colección de mensajes y la persistencia.

• Autenticación con Google: la app toma la imagen y el ID del usuario.
• Persistencia: tras refrescar, se recuperan los mensajes por coincidencia de usuario en el where.
• Tipos visibles en la data: 'usuario' para el emisor y 'asistente' para la respuesta.
• Colecciones generadas: mensajes y, cuando corresponda, conversaciones.

Buenas prácticas reforzadas en el proceso: - Uso de Observable para reactividad en la UI. - onSnapshot para escuchar cambios y unsubscribe para limpiar suscripciones. - Ordenamiento por fecha en frontend para consistencia de la conversación. - Manejo de errores consistente con promesas y catch en componentes.

¿Te gustaría ver el patrón para paginar mensajes o mejorar el ordenamiento con índices? Comenta qué parte quieres profundizar y qué retos encuentras al integrar Firestore en tu chat.