Crear salas de chat
Presentación
Firebase Auth
Cloud Firestore
Cloud Storage
Cloud Functions
Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.
- Pongamos en práctica todo lo aprendido sobre Firestore en el Curso de Firebase creando una vista que permita añadir salas de conversación a nuestro proyecto VueTalk
- Primero, debemos crear el componente que haga de vista:
CreateRoom.vue
y en él un formulario para asignar el nombre y la descripción de la sala. - Luego, debemos añadir la ruta en nuestro archivo de enrutamiento
router/index.js
.
const CreateRoom = () => import("../views/CreateRoom.vue");
...
{
path: "/create",
name: "create",
component: CreateRoom,
meta: {
requiresAuth: true
}
}
- Sin olvidar actualizar el enlace desde nuestro componente cabecera a la nueva sección.
<router-link class="navbar-item" :to="{ name: 'create' }">
Create Room
</router-link>
- El siguiente paso es crear la acción en nuestro módulo
rooms
de Vuex que nos permita conectar con Cloud Firestore.
import { db } from "../firebase.js";
...
async createRoom({ rootState }, { name, description }) {
await db.collection("rooms").add({
name,
description,
createdAt: Date.now(),
admin: rootState.user.user.uid
});
}
- Por último nos queda completar el método local
createRoom
en el compoenteCreateRoom.vue
para que conecte con la acción Vuex recién creada.
async createRoom() {
this.isLoading = true;
try {
await this.$store.dispatch("rooms/createRoom", {
name: this.roomData.name,
description: this.roomData.description
});
this.$toast.success("Room created");
this.roomData.name = this.roomData.description = "";
setTimeout(() => this.$router.push({ name: "home" }), 1000);
} catch (error) {
console.error(error.message);
this.$toast.error(error.message);
} finally {
this.isLoading = false;
}
}
Código inicial
¿Tienes alguna pregunta sobre esta lección de Curso Firebase para Web?
Resuelve todas tus dudas sobre Firebase en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.