A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso de Firebase para Web 2019

Curso de Firebase para Web 2019

Juan Guillermo G贸mez Torres

Juan Guillermo G贸mez Torres

Consultas en real time

18/32
Recursos

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.

Aportes 35

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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 馃憤:

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

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('/')
  }
}

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 馃槏馃敟馃帀.

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

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

Aqu铆 mas tutoriales sobre react y firestore

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?

La nueva web es much铆simo m谩s din谩mica que hace tan solo algunos a帽os

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 鈥渟ettings鈥 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 鈥渉ack鈥 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.

Ahora para obtener los posts es as铆

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

websockets VS DataSnapshot

que es mejor para un chat !?

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

esto parece brujeria!!! jejeje

Que tan seguro es si filtramos por 鈥渦id鈥 ???

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

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鈥

Si su consola les llena de errores, desactiven adBlock

La sentencia where que se usa en la clase me estaba lanzando error con la versi贸n 8.6.8 de Firestore.

Para arreglarlo me toc贸 agregar la operaci贸n como segundo par谩metro, de esta forma:

this.db.collection('posts')
  .where('autor', '==', emailUser)
  .onSnapshot(...)
yyy

Incre铆ble, tienes la misma funcionalidad de realtime database de firebase en una plataforma m谩s robusta que es Firestore, me encanta:D

y si quisiera filtrar por multiples campos?

Alguien logro 鈥減aginar鈥 los resultados? mire la documentacion pero no me quedo muy claro鈥

length: 2
proto: Array(0)

No lo puedo recorrer el array

Como hago para ala subir una imagen que tengo en mi computadora esta se vea reflaja? como se obtiene la ruta de esa imagen?

Si quieren subir un video de youtube, le tienen que dar click derecho en el video de youtube y darle donde dice copiar codigo insercion, ese es la url que deberan utilizar

Se supone que este es un curso b谩sico y vienen tantas cosas que muchos no sabemos o no tenemos experiencia en ello. El maestro habla tan lento, que incluso subiendole la velocidad al video, sigue siendo lento.

Lo logre hacer con nextjs鈥ue dificil porque no supe como capturar la informacion de onSnapShot en los estados de react ya que estos no son arreglos como tal sino son como canales abiertos entre firestore y la aplicacion para poder actualizar los datos. Igualmente esto no hacia falta para esta funcionalidad y comparto al igual que muchos que comentaron que mas bien eso es una desventaja en este caso. Eso consume ancho de banda y la verdad es que la app pudiera ser mas lenta.

mi solucion fue la siguiente. Para recuperar los datos yo utilice la funcion get() y esto te devuelve un arreglo que tienes que mapear para mostrar contenido y la infomacion de este contenido la muestras con la funcion docs() dentro de cada uno

Para obtener una collection y guardarla en el estado:

const getPosts = async () => {
      let aux = databaseController.consultarTodosPosts();
      
      let array = [];
      aux.get()
        .then((result) => {
          setOnSnapShot(result.docs)
          console.log(onSnapshot)
        })

  }

  useEffect(() => {
    getPosts();
  }, []);

Para mostrarlo en el render:

return (
    <div>
        <div className="flex flex-col lg:flex-row flex-wrap">

          {onSnapshot && onSnapshot.map((post,k) => {
              return(
                <div key={k} className="w-full lg:w-1/2">
                    <Cards
                       titulo={post.data().titulo}
                       descripcion={post.data().descripcion}
                       linkVideo={post.data().videoLink}
                />
                </div>
              );
          })}
        </div>
    </div>
  )

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.

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()
  }, [])```

se menciona que usar 鈥榬ealtime鈥 鈥榤ejora鈥 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 鈥榚scuchando鈥 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 鈥榝ondo鈥 para mantener a tus usuarios actualizados鈥 ojo con eso, porque se paga por consultas鈥 si no se es cuidadoso, esta 鈥渕uletilla鈥 se puede convertir en un agujero economico鈥

Que pasa o como resolvemos cuando el autor cambia su email y ya hay N posts creados con el email anterior, que sucede con el filtro de mis posts?

Como podemos obtener los datos en caso que nuestro documento tenga un dato de tipo reference?