Presentación

Firebase Auth

Cloud Firestore

Cloud Storage

Cloud Functions

Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.

  • Tras aprender lo imprescindible sobre cómo estructurar datos en Cloud Firestore, es el momento de aprender a agregarlos de forma programática. Aunque lo haremos constantemente durante el proyecto, en esta lección veremos dos de las formas más utilizadas.
  • Primero, a través del método set() podemos añadir un nuevo documento a cualquier colección o subcolección.
  • Como ya vimos en una lección anterior, dentro de los documentos puedes añadir cualquier tipo JavaScript válido como matrices, booleanos, objetos y demás.
import { db } from "../firebase";
const user = { name: "Juan", city: "Valencia", country: "Spain" };
await db.collection("users").doc("juanwmedia").set(user);
  • Si ya existiese un documento cono ese identificador, se sobre escribiría. Para evitarlo podemos fusionar ambos objetos pasando indicando true en la opción merge.
await db.collection("users").doc("juanwmedia").set(user, { merge: true });
  • Por otro lado, con el método add() también podemos añadir documentos, la única diferencia es que dejamos que Cloud Firestore sea el que cree una ID única para el mismo, así te aseguras al 100% de que la inserción se va a realizar.
  • En mi experiencia la gran mayoría de las veces uso add() para crear nuevos documentos para mis colecciones: nuevo usuario, nuevo mensaje, nueva sala, etc.
await db.collection("users").add(user);
  • ⚠️ En la documentación se cita algo importante: las ID's generadas con add() no están basadas en timestamps (sí lo están en Realtime Database) por lo que necesitarás añadir algún tipo de marca de tiempo si quieres ordenar.
  • Como al utilizar add() estás delegando en Cloud Firestore la creación de la "clave primaria", puedes obtener explícitamente una nueva referencia de documento doc() para luego utilizar en otros lugares, por ejemplo para guardar la propia id en el documento.
const docRef = db.collection("users").doc();
await docRef.set({ name: "Guizmo", created: Date.now(), id: docRef.id });
  • Estas son las principales formas de añadir documentos en Firestore. Dejaremos las transacciones para más adelante donde las utilizaremos para actualizar secciones de documentos cuando el usuario actualiza su perfil.
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 📬