VueJS + firebase

Creando un chat

Vamos a crear un chat

Usaremos el repo de las clases de firebase de andrey de base.

en este caso tengo un fork con la solución y todo comiteado poco a poco

https://github.com/YuniorGlez/eoi-vue-firebase/commits/feature/firebase-implementing-global-chat/

Añadimos simplemente en el Appvue unos botoncitos para poder navegar a la página de chat nueva y a login/register

Incorporamos esta nueva página de ChatView en el router

Preparamos en el ChatView una parte para mostrar los mensajes del chat y añadir uno nuevo

También averiguamos quien es el usuario actual logeado y cargamos los mensajes en el mounted

Tenemos que decidir, como guardar en la base de datos los chats o los mensajes

Aquí hace falta lo de siempre, mucho papel y lápiz:

- ¿Es un único chat comun para todo el mundo?

- ¿El chat se crea por parte de un owner y le pertenece e invita a otros? ¿Hay más chats?

- ¿Hay un concepto de "grupo" y el chat es de un grupo?

Para este tipo de decisiones por suerte ya no estás solo, le puedes comentar a tu nuevo patito de goma (chatgpt) tu situación y preguntarle cual considera que es la mejor forma de guardar esa información en tu bd de firebase

Un modo

Otro modo, una única colección de "messages" porque el chat es común

Otro modo, una única colección de "messages" porque el chat es común

Cargar los mensajes, se usa onSnapshot

onSnapshot se ejecuta en tiempo real

Otro modo, una única colección de "messages" porque el chat es común

Para guardar los mensajes nuevos, usas el addDoc

Otro modo, una única colección de "messages" porque el chat es común

Recuerda los imports

<script>
import { collection, addDoc, onSnapshot, query } from "firebase/firestore";
import { auth, db } from "@/firebase/config";
import { onAuthStateChanged, updateProfile } from "firebase/auth";

Listo, solo nos queda una cosa, que el mensaje "se sepa de quien es"

Link docu firebase js sdk

Listo, solo nos queda una cosa, que el mensaje "se sepa de quien es"

Depende del proveedor que haya usado el usuario para hacer login, a lo mejor si que tienes un displayName

En nuestro caso, como al crearse la cuenta no lo tiene, pues se lo pedimos en esta vista y lo dejamos guardado

Reto

Nos ponemos en grupo, hacemos cómo he hecho yo, un fork a andrey y tratamos de generar esta tabla nueva de messages. IMPORTANTE, para no pisarnos, que cada uno nombre la colección diferente, por ejemplo. "messages-vero" "messages-pablo" , etc

REPO DE ANDREY QUE TENEMOS QUE FORKEAR : https://github.com/andreycattalin/eoi-vue-firebase

Mi rama por si os perdéis demasiado y no recordáis nada :) Recuerda que tienes los commits de poco a poco
https://github.com/YuniorGlez/eoi-vue-firebase/tree/feature/firebase-implementing-global-chat

Sed felices

Avanzamos los proyectos