El brief era muy claro: teníamos 2 semanas para implementar una plataforma de juegos en 4 idiomas y diseñar una solución de control de acceso ligera dirigida a clientes de hoteles.

Requisitos

El objetivo de la aplicación era proporcionar una plataforma de juegos y entretenimiento a los huéspedes de los hoteles a través de sus dispositivos móviles con un control de acceso con la mínima fricción, evitando utilizar el clásico esquema de usuario y contraseña.

La plataforma debía contemplar las siguientes características:

  • Diseño responsive, mobile first.
  • Acceso controlado a los contenidos y restringido a los clientes del hotel.
  • Multi-idioma: español, inglés, francés y alemán.
  • Backend de administración que permita gestionar el alta de hoteles en el servicio y los accesos a la aplicación.
  • Integración en la plataforma de un conjunto de juegos interactivos y vídeos licenciados para el cliente con un volumen de más de 3 GB de información.

El desafío principal al que nos enfrentábamos era el tiempo limitado para implementar la solución: dos (frenéticas) semanas.

Arquitectura

La solución que diseñamos y finalmente ejecutamos en el plazo acordado consta de cuatro módulos:

  1. Aplicación web multidispositivo: es el componente principal de la plataforma y es accesible por los usuarios a través de sus dispositivos móviles o portátiles. Implementamos una PWA de diseño sencillo, instalable en el escritorio y desarrollada en Angular.
  2. Catálogo de juegos: estos juegos estarán integrados en la aplicación móvil y serán proporcionados por un proveedor externo. Además cuenta con la posibilidad de incorporar nuevos juegos de otros proveedores o incluso contenidos propios del cliente.
  3. CDN (Content Delivery Network): este componente se encarga de servir los juegos y vídeos optimizados a través de servidores distribuidos.
  4. Backend de administración WordPress: permite gestionar los usuarios y dar de alta los hoteles que han contratado el servicio.

La solución

El primer reto ha sido gestionar el volumen de datos de los juegos interactivos. Para ofrecerlos de una manera rápida y eficiente seleccionamos un CDN que mantuviera redundancia en Europa y así garantizar que no hubiera problemas de cuellos de botella con las descargas.

En el caso de los vídeos hicimos algo parecido, transcodificamos los originales para poder servirlos utilizando DASH (Dynamic Adaptive Streaming over HTTP). Con esta técnica los usuarios de la plataforma recibirán los vídeos, dependiendo de su dispositivo y su conexión a Internet, en el formato y resolución óptima.

La parte más compleja era diseñar el sistema de control de acceso. Como el acceso a los juegos no resultaba excesivamente crítico, optamos por implementar un sistema de geofencing, de modo que permitiéramos el acceso directo mediante localización a los huéspedes que estuvieran dentro de un radio determinado del hotel (configurable desde el backend). Para hacer el sistema más robusto, establecimos una forma de acceso redundante mediante una contraseña temporal, de modo que, si por ejemplo un usuario no tenía habilitada la localización, contara con un método de acceso alternativo.

Adicionalmente, y para facilitar el acceso a la plataforma, generamos de forma dinámica un código QR único de acceso al servicio para cada hotel participante, que se envía de forma automática junto con la password temporal. Además integramos en la propia aplicación de usuario un lector de QRs para facilitar esta tarea.

Pantallas de ejemplo de la aplicación Acttiv Games
¡PWA lista en 2 semanas!

Durante la demo de presentación, hicimos unas tarjetas con etiquetas NFC integradas, como ejemplo de forma adicional de acceso al servicio y facilitar su uso acercando simplemente el dispositivo a la tarjeta. Esto permitiría a los hoteles integrar el servicio en tótems, en el mostrador de recepción o en otras ubicaciones estratégicas dentro del hotel.

En cuanto a la parte de backend, el alta de hoteles se simplificó de forma que sólo fuese necesario el nombre del hotel y su correo electrónico. A través del nombre posicionamos el hotel de forma transparente en Google Maps, con la posibilidad por parte del administrador de reubicarlo en el propio mapa. Como parámetros configurables, el tiempo de validez de las contraseñas temporales y el radio de alcance del geofencing.

Finalmente, el backend se encarga del envío por correo electrónico de las credenciales de acceso, código QR y password temporal, y de su regeneración de forma periódica y automática, minimizando las labores administrativas por parte del cliente.

Por último, para que el cliente pudiera validar la plataforma en los 4 idiomas, nos aprovechamos de ChatGPT y delegamos en la iA para traducir todas las cadenas de texto de forma casi instantánea. Una ventaja más de la vida moderna 😉