Consultas en Tiempo Real con Firestore para Aplicaciones Web

Clase 18 de 32 • Curso de Firebase 5 para Web

Resumen

Las Consultas en real time son la capacidad de obtener la información de nuestra base de datos y actualizarla en nuestra aplicación cada vez que la modificamos desde cualquier sitio. A diferencia de otros servicios, Firebase notifica a nuestras aplicaciones cada vez que cambia la información la información que estamos consumiendo, así mejoramos la performance de nuestra aplicación porque no debemos consultar todo el tiempo a la base de datos.

Juan Castro

teacher•

Estos tutoriales (algunos en ingles 🇺🇸) son muy útiles para complementar lo que aprendimos en la clase y ver las otras formas (o no 😅) de consumir la información de Firetore en tiempo real con otros proyectos 👍:

David Farinango

student•

Gracias bro!

Russell Sotomayor

student•

El curso esta fuera de tiempo y la enseñanza es muy confusa.. No estoy satisfecho con este curso..

John Agudelo

student•

yo veo que todo aplica al firebase de hoy, tal vez es por que hay que entender el proyecto que estan usando de base, lo mejor seria que aplicaras los conocimientos en un proyecto propio

Santiago Patiño

student•

Concuerdo, yo estoy siguiendo el curso pero con un proyecto propio y a 1.75x y todo super bien. Sin embargo, veo que seguir el curso con el proyecto base que tiene, si es un poco confuso.

Alejandro González Reyes

student•

Les dejo una actualización en el archivo de util.js Puesto que la fecha no se muestra con el formato correcto NAN/NAN/NAN a consecuencia de cambios en en la API de firestore

class Utilidad {
  static obtenerFecha (timeStamp) {    
   // El cambio es llamar al atributo seconds
    const d = new Date(timeStamp.seconds)
    console.log(timeStamp);
    console.log(d);
    let month = '' + (d.getMonth() + 1)
    let day = '' + d.getDate()
    let year = d.getFullYear()

    if (month.length < 2) month = '0' + month
    if (day.length < 2) day = '0' + day

    return [day, month, year].join('/')
  }
}

Carlos Rodríguez Huerta

student•

A la fecha de escribir este comentario. Se debe dejar como esta escrito en los documentos del repo sin agregar ".seconds"

Juan Castro

teacher•

Eso de que Firebase nos notifique cada vez que hay algún cambio en las BDs en vez de nosotros consultar cada segundo (haciendo nuestra aplicación cada vez más lenta) es mágico 😍🔥🎉.

Juan Guillermo Gómez Torres

teacher•

Hola, tu decides si quieres recibir la info en real time y en algunas ocasiones es más rápido que estar siempre consultando

Henry Yerry Bravo Sánchez

student•

Usuar varias consultas https://firebase.google.com/docs/firestore/query-data/queries?hl=es-419

    .where('key', '==', value)
    .where('key', '==', value)

David Farinango

student•

Aquí mas tutoriales sobre react y firestore

Agregando Firestore y Obteniendo Colección

Oscar Torres

student•

No me despliega el video por el siguiente error

Refused to display 'https://www.youtube.com/watch?v=kpcjBD1XDwU' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

Como puedo corregirlo?

Freddy Vega

Team Platzi•

Prueba con otro video. Quizás este esté restringido para correr fuera de Youtube.

Oscar Torres

student•

Nada Fredy, intenté con varios videos y sucedió lo mismo, con una imagen funciona perfectamente.

Albert Jiménez

student•

La nueva web es muchísimo más dinámica que hace tan solo algunos años

Carlos Rodríguez Huerta

student•

Tuve que quitar el constructor de la clase Post y llevarlo al archivo general.js para poder crear otro post pues me aparecio un error en consola que decia que la firestore ya habia sido inicializado y los "settings" ya habian seteados y no podian modificarse.

$(() =>  {
....
....
....

firebase.initializeApp(varConfig);

db = firebase.firestore();
// recupera datos datetime(convierte) a timestamp
const settings = { timestampsInSnapshots: true, enablePersistence: true };
db.settings(settings);

$('#btnInicioSesion').click(() => {
....
...
....
....

)

Deduzco que al existir al menos un post éste se mostraba en el front y por lo tanto, se inicializaba firestore. Por ello el error y algún cambio en la API. Puesto que, cuando el profesor lo ejecutó, todo era correcto. <-------------------------> Añado un pequeño "hack" que realicé para poder mostrar los videos de youtube:

Click derecho en el video a insertar y seleccionar copiar código de inserción.
Copiar el código en algún lugar(bloc de notas, editor de codigo, etc) y copiar el src que nos brindará youtube para usar en el iframe.
Usar para registrar el video al crear un post y/o actualizar en firestore en caso ya se haya creado el post y tengan problemas con el video.

Carlos Rodríguez Huerta

student•

Casi, lo olvidó. En la clase Post reemplazar this.db por db

Miguel R.

student•

Muchas gracias!

Ivan Fuentes González

student•

Ahora para obtener los posts es así

this.db.collection('posts').get().then(....

Joao Alejandro Pereira Quiñones

student•

websockets VS DataSnapshot

que es mejor para un chat !?

Daniel Esteves

student•

Websockets mil veces, ya que vas a necesitar consultar datos cada vez que haya alguno nuevo

Geovanny Álvarez

student•

Para React Pueden utilizar un useEffect para suscribirse y enviar estos datos al estado, también retorno el, id del documento para utilizarlo como key.

  const [realTimeData, setRealTimeData] = useState([])

  //Real time queries
  useEffect(() => {
    const unsubscribe = DB.collection('products').onSnapshot(querySnapShot => {
      const data = querySnapShot.docs.map(doc => {
        return { id: doc.id, ...doc.data() }
      })
      setRealTimeData(data)
    })

    //remember to unsubscribe from your realtime listener on unmount or you will create a memory leak
    return () => unsubscribe()
  }, [])```

Paolo Joaquin Pinto Perez

student•

Si les sale algún error con los videos de YouTube, asegurense que cuando llenaron en el formulario el link del video, tenga el formato: https://www.youtube.com/embed/id-del-video Ya que se necesita /embed/ para la inserción a HTML.

Cesar Payro

student•

se menciona que usar 'realtime' 'mejora' el rendimiento.. estoy en desacuerdo con esa frase.. dirai que mejora la experiencia del usuario (=datos en tiempo real) y facilita el trabajo del programdor (no tiene que hacer las llamadas de consulta a mano).. pero estar 'escuchando' cambios a la base de datos AUMENTA la carga al servidor (imagina eso x 1000 usuarios que estuvieran usando tu aplicacion al mismo tiempo).. por supuesto esto es oro para google, porque si hace un cambio se traduce en x1000 consultas automaticas en el 'fondo' para mantener a tus usuarios actualizados... ojo con eso, porque se paga por consultas.. si no se es cuidadoso, esta "muletilla" se puede convertir en un agujero economico..

Roberto Antonio Flores Zamora

student•

Cual es el pluggin para intelisense de JS ? para que al crear una funcion en otro archivo y usarlo, siempre entienda que funcion es ?

Juan Guillermo Gómez Torres

teacher•

Hola, no entendí, puedes explicar mejor??

Daniel Esteves

student•

¡Hola Roberto! Cuando se utiliza VSCode ya tiene integrado un autocompletado, lo que debes hacer es importar el archivo de .js a el archivo que estás utilizando para que puedas usarlo ahí

Luis Abdel Rangel Castro

student•

esto parece brujeria!!! jejeje

Joseph Alexander Whacheng Barreto

student•

Que tan seguro es si filtramos por "uid" ???

Daniel Esteves

student•

Estarías consultando por el ID básicamente, no tendrías ningún tipo de problema solo que no le deberías mostrar esa información a ningún usuario

Alejandro Daniel Oroncoy Almeyda

student•

Esta parte del curso parece ser una de las mejores! Me quede anonajado!

Cesar Payro

student•

esta capacidad es super interesante por el poco esfuerzo de implementacion requerido.. pero cuidado.. si tienes X usuarios, cada CRUD que alguien haga se traducira en X consultas por usuario que este usando la aplicacion en ese momento .. asi que si tienes 1000 usuarios usando el app y alguien inserta un post, se disparan 1000 consultas a tu cuota?
$$$$$ si no se maneja con cuidado..

David Behar

student•

Si su consola les llena de errores, desactiven adBlock

Consultas en Tiempo Real con Firestore para Aplicaciones Web

Bienvenida e Introducción

Firebase para Web: Autenticación y Base de Datos

Firebase: Plataforma Integral para Desarrollar Aplicaciones Web y Móviles

Creación y gestión de un videoblog con Firebase

Consola Web de Administración

Configuración de Firebase en Proyectos Web y Móviles

Configuración de Firebase en Proyecto Web con JavaScript

Autenticación de Usuarios

Autenticación y Creación de Usuarios con Firebase

Autenticación con Firebase: Email y Google paso a paso

Autenticación de Usuarios con Firebase: Registro y Verificación de Email

Autenticación con Google usando Firebase en aplicaciones web

Implementación de Autenticación con Facebook en Firebase

Gestión de Autenticación de Usuarios con Firebase

Gestión de Usuarios en Firebase: Creación, Inhabilitación y Plantillas

Exportar e Importar Usuarios en Firebase Auth

Gestión de la Base de Datos

Firestore: Gestión y Estructura de Datos en Firebase

Comparación entre Realtime Database y Firestore de Firebase

Configuración de Firestore en un Proyecto Firebase

Inserción de documentos en Firestore con JavaScript

Consultas en Tiempo Real con Firestore para Aplicaciones Web

Consultas y Operaciones de Datos en Firestore

Reglas de Seguridad en Bases de Datos con Firestore

Creación y gestión de índices en Firestore para optimizar consultas

Almacenamiento de archivos

Almacenamiento de Archivos en Firebase: Gestión y Seguridad

Subir Imágenes a Firebase Storage desde un Blog

Reglas de Seguridad en Firebase Storage para Blogs

Hosting

Características y beneficios del hosting de Firebase

Despliegue de Aplicaciones con Firebase Hosting

Configuración Personalizada de Hosting con Firebase

Notificaciones Push

Notificaciones Push con Firebase Cloud Messaging

Implementación de Notificaciones en Blog con Firebase

Implementación de Notificaciones Push con Firebase y Firestore

Implementación de Notificaciones Push con Firebase en Blogs

Conclusiones

Integración de Firebase en Aplicaciones Web