Coleccionando Compañeros — Album Digital
Autores: Federico Murphy, Nicolás Marucho y Lautaro Tacchini, Nicolás García Aramouni
Como equipo de trabajo, a menudo nos enfrentamos al desafío de conocer a nuestros compañeros más allá de las tareas y responsabilidades laborales. Generar un ambiente laboral sano e incentivar las relaciones dentro del equipo son pilares fundamentales para que el día a día en el trabajo sea más ameno. Para esto, con frecuencia buscamos medios divertidos e interactivos para poder fomentar el encuentro.
Hace aproximadamente un año, arrancaba el Mundial de fútbol que aún no sabíamos que íbamos a ganar. Había tanta emoción y expectativas durante esos días que, de alguna forma, había que aprovechar. Dado que nuestro equipo tiene una fuerte pasión por los datos y la tecnología, se nos ocurrió desarrollar una aplicación que le diera a cada miembro del equipo un álbum para completar con una figurita por cada compañero. En un momento en el que conseguir las figuritas oficiales era todo un desafío, esto brindaba además un complemento creativo y divertido al tema del momento, y la posibilidad de poder interactuar y conocer más a nuestros compañeros. Lo que empezó como una idea medio alocada, y que inicialmente era mucho más simple, se transformó en una web data-app con múltiples funcionalidades. Es decir, utilizando Python para el desarrollo logramos que un equipo se reúna cada mañana para poder intercambiar y conocer al resto del equipo. Ahora bien, ¿cómo armamos esta solución?
Solucion
Durante 4 semanas desarrollamos e implementamos una aplicación web, donde 10 personas colaboraron para crear una aplicación que alcanzó a 100 personas.
El proceso para poder lanzarla se puede resumir en los siguientes pasos:
Diseño
El primer paso en nuestro proceso fue pensar qué queríamos hacer y cómo se debería ver, con el objetivo doble de crear algo divertido e interactivo. Creamos los diseños para que la aplicación sea llamativa y fácil de usar. Para ello, identificamos a los miembros del equipo y sus roles, y en base a eso elaboramos figuritas con fotos y escudos. Además, diseñamos las páginas del álbum con una estructura coherente y atractiva, permitiendo una navegación sencilla.
Este rol fue clave para que se equilibraran los elementos gráficos y textuales en cada página, aumentando el atractivo general de la aplicación.
Back-End
Una vez que sabíamos qué queríamos hacer y cómo debería lucir, comenzamos con el desarrollo propiamente dicho. Para esto, utilizamos programación orientada a objetos, una metodología que nos permitió organizar y estructurar nuestro código alrededor de objetos que representan entidades del mundo real. Esto nos permite crear un sistema más eficiente y flexible, ya que podemos encapsular la lógica relacionada con cada objeto en su propio código.
Nos enfocamos en crear tres entidades: figurita (Card), Pagina (Page) y Álbum.
· Figurita: Cada figurita representa un participante, por lo que la clase cuenta con atributos como el nombre y la imagen para referirse a ellos. Por otro lado, se requieren atributos que nos permitan conectar cada figurita con el álbum, para lo cual utilizamos la posición en la página (nos permite pegar la figurita exactamente dónde va), el número de página donde va (para evitar que sea pegada en una página incorrecta), la orientación (vertical/horizontal) o si ya está pegada.
· Página: La clase Página constituye cada página del álbum, que contiene una lista de objetos Figurita y detalles de diseño (como la imagen a mostrar).
· Álbum: La clase Álbum representa el álbum completo conteniendo tanto una lista de objetos Página como también todas las figuritas. Esta clase está dotada de una serie de funciones que nos permiten accionar sobre el álbum como pegar una figura en una página determinada, cambiar a la siguiente página o ir a una determinada página.
Como elemento adicional, es importante remarcar que utilizamos la librería Pillow para cargar y manipular las imágenes. El proceso de pegado de una figurita es más complicado de realizar de lo que parece. Este incluye un solapamiento de imágenes (página del álbum + figurita) en el lugar exacto. Para esto, las figuritas contaban con coordenadas (atributo ya nombrado) que permitían dicha correcta ubicación y el tamaño que debían tener para que el solapamiento sea perfecto. Esto último nos forzó a crear un método que ajuste el tamaño de la figurita al espacio que esta tenía en la página del álbum. En cuanto al álbum, utilizamos la librería para poder pegar dos páginas continuas y poder visualizarlas como un álbum completo.
Front-End
Una vez que teníamos cada elemento del back-end, continuamos con desarrollar las interacciones de los usuarios con el álbum. Para facilitar esto, utilizamos Streamlit, una herramienta de desarrollo de aplicaciones web interactivas basada en Python. Esta nos permitió crear una interfaz de usuario de manera simple y eficiente. Lo más interesante de esto es que permite que cada botón que se clickea en esta interfaz, luego va a tener un efecto en la visualización o un impacto en las bases de datos, lo cual era clave para asegurar una buena experiencia, y la trazabilidad de las interacciones.
La plataforma se segmentó en diversas secciones, las más relevantes son: álbum, paquetes, mercado y estadísticas.
En la sección de paquetes, los usuarios podían abrir tres paquetes cada día. Cada paquete proporciona tres figuritas aleatorias. El valor de algunas cartas, como los escudos, es mayor debido a su baja tasa de ocurrencia, lo que los convierte en artículos de intercambio valiosos.
La sección del álbum le muestra a cada usuario su álbum y las figuritas que tiene pegadas. Aquí se le permite identificarlas como repetidas o pegarlas en el álbum.
La posibilidad de intercambiar de manera virtual con otros usuarios añadió una dinámica emocionante al juego. En la sección de mercado los usuarios pueden proponer intercambios a los demás, quienes pueden aceptar o rechazar sus ofertas, incentivando la participación, ya que todos aspiran a ser los primeros en completar su álbum. En esta sección cada participante podía crear un nuevo intercambio (en general pactado antes) o ver los intercambios en curso. Era muy interesante ver, cada mañana, como el chat grupal se inundaba de mensajes que pedía u ofrecía figuritas para ir completando su colección.
En línea con nuestra pasión por la ciencia de datos, se incorporó una sección de estadísticas generales. Aquí, los usuarios pueden ver información como el presentismo, el porcentaje de figuritas que tienen pegadas en sus álbumes y el promedio de su equipo, entre otras.
Si aún tienes ganas de verlo andando pueden ver una demo en: Album Demo
Base de Datos
Considerando la gran cantidad de interacciones que necesitábamos guardar (asignar paquetes, abrir, ver que figuritas se tenían/faltaban, que intercambios se hacían), era necesario tener esta información guardada de forma prolija y robusta. Para esto, utilizamos SQLite para conservar los datos durante el desarrollo del juego. Este es un software de código abierto, que facilita el rápido y eficiente acceso y almacenamiento de datos en bases de datos relacionales, eliminando la necesidad de un servidor externo.
En nuestra base de datos, disponemos de una tabla principal que preservaba la información de cada usuario y sus respectivas figuritas. Cada figurita y usuario se registran con sus respectivas veces repetidas y si se encuentra pegada en el álbum. Este sistema nos posibilita reconstruir el álbum de cada usuario tal y como lo dejó cada vez que inicia sesión.
Además, contamos con una tabla donde se registraban todas las propuestas de intercambios en el mercado. En esta se tiene que usuarios participan del intercambio, cuando se creó, y las cartas involucradas.
Para asegurar que ningún otro usuario pudiera ingresar al álbum de alguien más creamos usuarios y contraseñas para cada uno. Estas se almacenan de forma encriptada en una tabla adicional.
Hosteo
Una vez finalizada la implementación inicial de nuestro álbum, era necesario un hosting apropiado para nuestra aplicación web. La idea era poder disponibilidad nuestra aplicación para que los usuarios puedan acceder desde cualquier dispositivo e interactuar entre sí. A la vez, resultó necesario soportar concurrencia para efectuar los intercambios de figuritas entre jugadores.
Antes de conseguir un servidor para nuestra aplicación, optamos por dockerizar nuestro proyecto con el fin de contar con un contenedor que nos facilitara la puesta en producción independientemente del servicio que deseamos utilizar. De esta forma, creamos un dockerfile que soporte python con streamlit y cuente con todas las dependencias correspondientes instaladas.
Con respecto al servidor, en primer lugar, se optó por utilizar el servicio gratuito que ofrece streamlit para hostear aplicaciones creadas con dicha biblioteca. Esta opción nos habilitó a utilizar nuestra aplicación en su versión preliminar a modo de testeo. Sin embargo, los recursos que ofrecía el paquete gratuito no soportaban los requerimientos minimos de nuestra aplicación completa.
Finalmente decidimos utilizar Amazon Web Services para hostear nuestra aplicación y utilizamos la herramienta de port-forwarding para que cualquier persona que contara con la dirección IP pudiera acceder al álbum.
Jugabilidad
En esta sección hablamos de algunos de los desafíos al desarrollar esta aplicación, entre ellos trabas y decisiones (muchas muy criticadas) que hubo que tomar para que haya un juego justo para todos.
En una primera instancia entregábamos 3 paquetes por día. Habíamos realizado simulaciones de cuanto iba a tardas en promedio un usuario en completar el álbum asumiendo su velocidad de intercambio y la tasa de aparición de las figuritas. Al pasar una semana nos dimos cuenta de que subestimamos este tiempo ya que todos los usuarios colocaban casi el 100% de sus figuritas al intercambiarlas en un grupo de 100 personas. A pesar del descontento de los participantes, tuvimos que reducir el número para que se pudiera completar en fechas cercanas a cuando terminara el mundial.
Para poder dejar que los jugadores más intensos se diferenciaran implementamos “easter eggs”, estos eran tareas ocultas que al completarlas se regalaban paquetes. Una de ellas era una pantalla que mostraba con cuantas personas había intercambiado representado con distintos emojis para cada una de ellas. Al llegar a 10 personas únicas se le regalaba un código promocional que permitía que abra un nuevo paquete.
Los códigos promocionales fueron una idea para dar mayor dinámica en el juego y se entregaban cuando jugábamos un partido, o en otras ocasiones especiales. Algo que intentaban los jugadores era darle su código a otro jugador para que uno lo complete más rápido, para evitar esto, en la base de datos cada código era generado aleatoriamente y asignado para un usuario. Esto permitía que cada usuario pueda redimir únicamente los códigos asignados a cada uno. Otro aspecto positivo de los códigos promocionales fue poder otorgar paquetes a quienes lo merecían, dado que habían estado ausentes o por algún error en nuestro desarrollo (que corregíamos en el mismo día).
Los paquetes de figuritas se habilitaban todos los días hábiles a las 00:00hs de Argentina. Esto parecía un dato irrelevante al principio, pero mientras más nos acercábamos al final más chances había de completar el álbum, y las chances de colocar figuritas más comunes cada vez era más difícil. Esta medida causo que empezaran a mandar mensajes a horarios completamente alocados. Lógicamente tuvimos que aumentar el horario de apertura a las 9am, medida ampliamente criticada por los jugadores en otros países.
Por otro lado, el hecho de haber hecho un desarrollo rápido implicó que hubiera ciertas cuestiones o bugs que fueron resueltos diariamente, pero que también implicaron un desafío para mantener una aplicación funcional, y que mantenga el interés del equipo.
Otro factor interesante ocurría en la sección de intercambios. Originalmente los usuarios podían intercambiar un numero dispar de figuritas, además de tener probabilidades de ocurrencia diferentes desconocidas. Algunos grupos inteligentes decidieron aliarse y completar el álbum de a muchos regalándose figuritas entre ellos. Al tener acceso a la base de datos vimos estas transacciones y limitamos los intercambios a números parejos de figuritas. Esta medida hizo que el grupo de trabajo estallara todos los días con gente queriendo cambiar sus figuritas donde todo el mundo enviaba sus repetidas y se armaban charlas entre completamente extraños.
Conclusión
La creación de esta aplicación fue una solución efectiva y agradable para mejorar el trabajo en equipo. La idea de convertirnos en “figuritas” de un álbum de fútbol fue un gran éxito que no solo cambió nuestra dinámica de equipo para mejor, también nos proporcionó una forma divertida y única de conocernos a todos. El poder realizar una actividad virtual de esta magnitud les permitió a aquellas personas que viven lejos poder interactuar más con el equipo.
A nivel técnico, resultó ser un trabajo que requirió mucho esfuerzo y coordinación de todas las partes involucradas, desde el momento en que comenzó la idea hasta el día a día con las actualizaciones constantes que surgían al solucionar errores.
