Etiqueta: Firebase

Bingo Social

Bingo Social es una web app que permite crear cartones de bingo que puedes compartir con amigos o en redes para que todos jueguen a la vez y puedan ver en tiempo real la evolución de los demás participantes.

Cartón de bingo de las cosas que escuchan los escritores de blogs en 2025

Es un modo de mantenerse entretenido y en contacto de un modo amigable y divertido. Cada cual elige de qué quiere crear el bingo, como por ejemplo:

  • Cuñadeces que dirán los familiares en las fiestas.
  • Exaltaciones corporativas en la cena de empresa.
  • «Consejos» para los enfermos crónicos.
  • Frases que dirá el amigo de las criptomonedas en la próxima quedada.
  • Qué se verá en la Isla de las tentaciones o Eurovisión.
  • Cuáles serán las últimas «politicadas» del año.
  • Los espontáneos que se incorporarán por año nuevo a vuestro canal de Telegram.
  • … cualquier cosa que se te ocurra, ¡incluso si no es graciosa!

Para los interesados en los aspectos más técnicos, no, no tiene modelo de negocio, es sólo por los jajas y por demostrarme que podía hacerlo.

El desarrollo tecnológico ha tenido una dosis alta de asistencia de Google Gemini y el resultado es una single page application con Vite (React) que se aloja en Firebase del que usa Firestore para la persistencia de datos y la autenticación para la gestión de los usuarios (que son anónimos pero se les recuerda entre accesos).

Como curiosidad, aunque lo he colgado de un dominio propio (bingo-social.yups.me) por aquello de tener el control en el futuro, el identificador de proyecto asignado en firebase es bingo-social (bingo-social.web.app), así sin numeritos ni nada, ¡he sido el primero en hacer un Bingo Social en Firebase!

Dejadme un comentario o escribidme por donde más rabia os dé si lo probáis y tenéis algún Feedback 🙂

¡Ojo! Cuidado en Firebase con el forEach de los Snapshots de la Realtime Database

Firebase es un PaaS de Google con un nivel de abstracción muy alto que te permite tener un completo backend serverless. Hacía años que no lo usaba y estoy encantado con él, pero hay que andarse con ojo porque ningún entorno ni tecnología llega a ser perfecto.

La semana pasada estaba programando una cosa en Javascript usando la librería de Firebase, para un proyecto en el que he usado su Realtime Database para montar un sistema de presencia que me diga en todo momento quién está on y quién está off.

En un momento dado, detecté un problema que no entendía de dónde podía venir:

Hacía una query a la base de datos, que me devolvía unos resultados que yo procesaba. Sin embargo, el resultado era un único dato cuando en la BBDD tenía que haber más. Tras unos cuantos tests, me di cuenta de que si lo mismo lo programaba de distintos modos (que deberían comportarse igual) ¡el resultado era distinto!

snapshot.forEach(s=> array.push(s.val()));
//vs
snapshot.forEach(s=>{array.push(s.val())});

Esas dos estructuras, daban resultados distintos ¿cómo podía ser?

Tras darle unas cuantas vueltas con cara de absoluta incredulidad llegué a la clave del asunto en el último sitio que me quedaba por mirar de la documentación de Firebase:

Último ejemplo de la documentación de Firebase
https://firebase.google.com/docs/reference/js/firebase.database.DataSnapshot#for-each

Se habían alineado Roma con Santiago:

  • Un desarrollador/diseñador había elegido usar un nombre habitual, dándole un comportamiento no habitual.
  • En Javascript todo lo que no sea falso/0/undefined se evalua como true.
  • La información referente a como funcionaba estaba en el último rincón de la documentación.

Todo habría sido distinto si el método se hubiese llamado cancellableForEach; o si al menos hubiesen comprobado que el valor recibido era verdadero comparándolo con el operador de igualdad estricta («=== true»); o si, ya cogiéndolo por los pelos, la ejecución del método cuando reciba algo que no sea booleano arrojase un warning…

En cualquier caso, tras un rato de frustración el problema quedó solucionado.

Valga este post tanto para recordar que hay que tener cuidado en Firebase con el forEach de los Snapshots de la Realtime Database, como para recordar la importancia de los nombres que ponemos a las cosas.