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 compoente CreateRoom.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
Aprende Firebase en Escuela Vue

¿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.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬