Inserción de documentos en Firestore con JavaScript
Clase 17 de 32 • Curso de Firebase 5 para Web
Contenido del curso
Consola Web de Administración
Autenticación de Usuarios
- 6

Autenticación y Creación de Usuarios con Firebase
06:30 min - 7

Autenticación con Firebase: Email y Google paso a paso
13:12 min - 8

Autenticación de Usuarios con Firebase: Registro y Verificación de Email
15:02 min - 9

Autenticación con Google usando Firebase en aplicaciones web
06:22 min - 10

Implementación de Autenticación con Facebook en Firebase
09:47 min - 11

Gestión de Autenticación de Usuarios con Firebase
11:42 min - 12

Gestión de Usuarios en Firebase: Creación, Inhabilitación y Plantillas
05:05 min - 13

Exportar e Importar Usuarios en Firebase Auth
04:17 min
Gestión de la Base de Datos
- 14

Firestore: Gestión y Estructura de Datos en Firebase
08:36 min - 15
Comparación entre Realtime Database y Firestore de Firebase
02:11 min - 16

Configuración de Firestore en un Proyecto Firebase
09:53 min - 17

Inserción de documentos en Firestore con JavaScript
Viendo ahora - 18

Consultas en Tiempo Real con Firestore para Aplicaciones Web
15:01 min - 19

Consultas y Operaciones de Datos en Firestore
13:12 min - 20

Reglas de Seguridad en Bases de Datos con Firestore
08:07 min - 21

Creación y gestión de índices en Firestore para optimizar consultas
07:13 min
Almacenamiento de archivos
Hosting
Notificaciones Push
Conclusiones
¿Cómo configurar Firestore en el método constructor?
Para conectar con Firestore, primero deberás configurar tu objeto POST. Es importante que la instancia de Firestore esté disponible para ser utilizada en las diferentes funciones. Por ello, definimos una variable db y obtenemos la instancia de Firestore a través de:
this.db = firebase.firestore();
Luego, debes definir ciertas configuraciones. Una configuración clave es TimeStamp in snapshots, la cual permite recuperar todos los valores almacenados como DayTime en formato TimeStamp. Para aplicarlo:
const settings = { timestampsInSnapshots: true };
this.db.settings(settings);
Esta configuración garantiza que las fechas se manipulen correctamente como TimeStamp, optimizando así la gestión de datos temporales.
¿Cómo se crea un Post en Firestore?
Crear un documento en Firestore es un proceso sencillo y dinámico. Primero, debes dirigirte a la colección específica, y si esta no existe, Firestore la creará automáticamente. Para agregar un documento a una colección llamada "Post" usa:
this.db.collection('Post').add({
uid: this.userUid,
author: this.userEmail,
title: this.postTitle,
description: this.postDescription,
imageLink: this.postImageLink,
videoLink: this.postVideoLink,
createdAt: firebase.firestore.FieldValue.serverTimestamp()
})
.then((ref) => {
console.log('ID del POST:', ref.id);
})
.catch((error) => {
console.error('Error creando el POST', error);
});
Aquí, cada campo se define como un par llave: valor en el objeto JS que representa al documento.
¿Cómo gestionar el almacenamiento de Fecha y Hora?
Para obtener la fecha y hora del sistema (servidor) usamos firebase.firestore.FieldValue.serverTimestamp(). Con esto, logramos que Firestore maneje automáticamente las marcas de tiempo, lo cual asegura que siempre operamos con la hora del servidor.
¿Cómo manejar errores al crear un Post?
La inserción en Firestore utiliza promesas, lo cual facilita la gestión de errores de forma eficiente. Si algo sale mal durante la operación de creación, el bloque catch se encargará de alertar sobre el error:
.catch((error) => {
console.error('Error creando el POST', error);
});
Este enfoque permite una depuración más sencilla y un seguimiento efectivo de errores, asegurando un flujo ininterrumpido en la aplicación.
¿Cómo se vincula el Post Controller con la autenticación del usuario?
El Post Controller se encarga de comprobar si un usuario está autenticado antes de permitir la creación de un Post. Este proceso incluye:
- Validación del usuario: Usamos la función
firebase.auth().currentUserpara verificar al usuario actual.
const user = firebase.auth().currentUser;
if (!user) {
console.warn('Para crear un POST debe estar autenticado.');
return;
}
- Recuperación de datos: Si el usuario está autenticado, se recuperan sus detalles y datos del Post desde los campos editables.
const title = this.titleInput.value;
const description = this.descriptionInput.value;
const videoLink = this.videoLinkInput.value;
const imageLink = this.imageLinkInput.value;
- Llamada a la función
crearPost: Se pasa el UID del usuario autenticado y otros detalles necesarios para crear el Post.
crearPost(user.uid, user.email, title, description, imageLink, videoLink);
Esto garantiza que solo los usuarios autenticados puedan interactuar con la creación de contenido, proporcionando un nivel de seguridad adicional.
¿Qué sucede después de que se crea un Post?
Una vez que el Post se ha creado exitosamente, el sistema devuelve un mensaje de confirmación al usuario:
.then(() => {
console.log('POST creado correctamente');
})
Por otro lado, en caso de error, el sistema también notificará apropiadamente, permitiendo que los desarrolladores puedan reaccionar eficazmente ante posibles inconvenientes.
Estos pasos aseguran que la aplicación no solo funciona adecuadamente, sino que también mantiene la seguridad y la integridad de la base de datos y la experiencia del usuario. ¡Anímate a seguir explorando y desarrollando con Firestore!