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;
    }
}
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

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 📬