Lo primero que vamos a hacer es eliminar el mostrar por consola el contenido de los mensajes desde el componente del chat, así que hacemos el subscribe a secas:
Ahora, por fin, vamos a sustituir el tipo "any" de nuestros mensajes por una interface en condiciones.
Creamos la interface "Mebsaje":
Sustituimos en el servicio del char toda referencia a "any" por "Mensaje" y modificamos la función "cargarMensajes()" para que devuelva un array de interface "Mensaje", que los muestre por consola, y que los guarde en la variable "chats" del servicio:
Ahora modificamos el html del componente para que, con un ngFor, nos muestre todos los mensajes:
Con esto ya tendríamos pintados todos los mensajes en la pantalla de chats.
Ahora vamos a ver cómo guardar un mensaje nuevo en FireBase desde la caja de texto.
Lo primero que vamos a hacer es crear una función nueva "agregarMensaje()" en el servicio del chat:
Como se puede ver, creamos una variable de tipo "Mensaje" a la que le asignamos un nombre "Demo" literal, un mensaje que será el texto que le pasemos a la función, y una fecha que creamos en el momento. Después, agregamos el mensaje al array "itemsCollection", que es la forma de guardar en FireBase un mensaje.
Quedaría pendiente tanto asignar el uuid del mensaje como el verdadero nombre de usuario, algo que haremos más adelante en otra entrada.
Ahora modificamos el componente del chat para modificar la función "enviarMensaje()" como sigue:
Como se puede ver, hemos hecho una comprobación de que, si el mensaje no está vacío, llamamos al servicio y a la función "agregarMensaje" pasándole el texto escrito.
Como la función devuelve una promesa, escribimos por consola lo que devuelva y borramos la caja de texto si el mensaje se ha guardado correctamente.
Ahora si arrancamos la aplicación, vemos que se cargan todos los mensajes en pantalla. S escribimos en la caja de texto:
Y pulsamos la tecla enter, el mensaje se guardará y cargará en la pantalla:
Podemos comprobar en la consola que se muestra el mensaje también:
Y en FireBase que se encuentra el mensaje guardado:
Y eso es todo de momento.
No hay comentarios:
Publicar un comentario