Consultas en real time

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 👍:

• Firebase Firestore Tutorial - Real-time Data
• Obtener actualizaciones en tiempo real con Cloud Firestore
  

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

• Agregando Firestore y Obteniendo Colección

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 “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.

Ahora para obtener los posts es así

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

websockets VS DataSnapshot

que es mejor para un chat !?

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.

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…

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 “uid” ???

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(...)

Documentacion de firestore

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 “paginar” 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…fue 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>
  )

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

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?