Trace
Aplicación multiplataforma para digitalizar el ciclo operativo de hostelería: comandería en sala mediante QR, pantallas operativas KDS en cocina y barra con Firestore Realtime, y un mecanismo demostrativo de trazabilidad en facturación.
01 / OVERVIEW
Digitalización de sala y cocina sin intermediarios físicos
Trace nace como Trabajo de Fin de Grado (TFG) para abordar la fricción habitual en el servicio hostelero: tiempos de espera muertos para pedir o pagar, errores manuales de comanda y desincronización entre la sala y los puestos de preparación (cocina y barra).
Diseñé y construí un sistema completo compuesto por dos vertientes: una interfaz ligera para el comensal accesible al escanear un QR de mesa sin requerir instalación obligatoria, y un panel operativo en tiempo real para el personal del establecimiento con pantallas específicas para cocina, barra y administración.
El proyecto fue concebido como una pieza de ingeniería práctica donde aplicar patrones reactivos con Angular Signals, sincronización distribuida con Firebase Firestore y un pipeline demostrativo de encadenamiento de facturas mediante funciones hash criptográficas.
02 / EL PROBLEMA
Cuellos de botella operativos en sala, barra y cocina
El flujo tradicional de comandas en restauración pequeña y mediana sufre pérdidas de eficiencia por comunicación fragmentada y soporte en papel:
Tiempos muertos de atención
El cliente depende de la disponibilidad del camarero para consultar la carta, pedir rondas adicionales o solicitar la cuenta, lo que dilata la rotación de mesas en horas punta.
Descoordinación entre cocina y barra
Platos y bebidas suelen transitar por el mismo ticket impreso, obligando a los cocineros y camareros de barra a coordinar manualmente qué partidas están listas para servir.
Falta de visibilidad de estados
El comensal no tiene certeza de si su comanda ha entrado en preparación, mientras que el personal carece de un registro visual unificado de tiempos transcurridos por comanda.
Gestión de alérgenos propensa a error
La comunicación verbal o manual de intolerancias alimentarias en sala supone un riesgo sanitario si no se filtra rigurosamente sobre la carta en el momento del pedido.
Pérdida de trazabilidad en facturación
En servicios de caja tradicionales resulta complejo verificar que un ticket no ha sido alterado a posteriori o garantizar un orden cronológico estricto de expedición.
Fricción de entrada para el usuario
Obligar al comensal a descargar una app nativa pesada o crearse una cuenta con contraseña frustra la adopción en mesa.
03 / LA SOLUCIÓN
Arquitectura dual: acceso sin fricción y KDS sincronizado
Trace desacopla la experiencia del comensal del panel de control del personal, unificándolos a través de un backend realtime común sobre Cloud Firestore:
Comensal (Guest)
Acceso inmediato por QR/URL asociado a mesa, autenticación anónima transparente, carta digital con filtrado reactivo de 14 alérgenos, carrito y seguimiento de estado en vivo.
KDS Cocina & Barra
Pantallas operativas dedicadas (Kitchen Display System) que separan automáticamente las líneas de comida y bebida, permitiendo marcar platos 'en preparación' o 'listos'.
Administración de Sala
Panel central para el control de mesas activas, gestión de catálogo de productos, visualización de métricas de servicio y generación de códigos QR de mesa.
Facturación Técnica
Cierre de comanda con cálculo de base e IVA (10%), exportación de tickets en PDF y registro encadenado de hashes SHA-256 para integridad de auditoría.
04 / FLUJO DE PRODUCTO
Recorrido de punta a punta: de la mesa al ticket cerrado
El diseño del flujo prioriza la inmediatez para el cliente y la claridad operativa para el personal de servicio:
Recorrido completo desde la lectura del QR en mesa hasta el registro inmutable de facturación.
- 01Comensal
QR / Mesa
El comensal escanea el QR en mesa con el identificador de mesa embebido en la URL.
- 02Comensal
Identificación Anónima
Se inicializa una sesión anónima en Firebase Auth; el UID queda anclado a la mesa activa.
- 03Comensal
Carta Digital
Exploración de categorías, descripciones, precios e ingredientes cargados reactivamente.
- 04Comensal
Filtro 14 Alérgenos
Filtrado reactivo instantáneo para excluir cualquier plato incompatible con intolerancias.
- 05Comensal
Carrito de Mesa
Gestión de unidades y notas especiales calculadas en tiempo real mediante Angular Signals.
- 06Comensal
Envío de Comanda
Creación atómica de la comanda en Firestore con timestamp, mesa y desglose por partidas.
- 07Personal
KDS Cocina / Barra
Las líneas de cocina y bebida se distribuyen en tiempo real a sus pantallas operativas respectivas.
- 08Comensal
Seguimiento Realtime
El comensal observa el progreso del pedido (recibido → preparando → servido) en su móvil.
- 09Comensal
Solicitud de Cuenta
Petición de cobro notificada directamente al personal de sala con el resumen de consumiciones.
- 10Sistema
Facturación & Hash
Cierre de comanda, emisión de PDF, cálculo de IVA (10%) y encadenamiento SHA-256 del registro.
DEMO / VÍDEO
Demo real de Trace
Recorrido automatizado del flujo de comensal y operación del restaurante, incluyendo sincronización en tiempo real entre Cocina y el dispositivo del comensal.
05 / ARQUITECTURA
Estructura por capas y modelo de distribución de datos
La aplicación utiliza una base de código común basada en componentes standalone de Angular 20 e Ionic 8, compilada tanto a aplicación web progresiva como a ejecutable nativo Android con Capacitor:
Separación de capas: cliente multiplataforma, reactividad en UI, servicios BaaS realtime y módulo de integridad.
Angular 20 & Ionic 8 (Standalone)
Estructura modular orientada a vistas (guest, staff, admin), servicios de negocio desacoplados y estados locales gestionados con Angular Signals y computed properties.
- Angular Signals para estado reactivo sin sobrecarga
- Ionic Framework para componentes UI táctiles adaptativos
- Componentes standalone de Angular 20
- SCSS modular con variables semánticas de tema
Capacitor 8 Bridge (Android)
Empaquetado móvil nativo mediante Capacitor 8 para dispositivos Android del personal, facilitando acceso a almacenamiento seguro y capacidades nativas.
- Build nativo para terminales de sala y barra
- Compatibilidad con lectores de código de barras / QR
- Persistencia local de sesión y configuración
- Soporte offline controlado en caso de micro-cortes
Firebase Auth & Cloud Firestore
BaaS serverless con autenticación dual (anónima para comensales, email/password para administradores) y suscripciones a snapshots en tiempo real para sincronización instantánea.
- onSnapshot listeners para propagación instantánea de tickets
- Colecciones normalizadas: tables, orders, catalog, invoices
- Firestore Security Rules basadas en UID y roles de sesión
- Firebase Hosting para despliegue global de baja latencia
Mecanismo Demostrativo de Integridad SHA-256
Módulo de facturación experimental que calcula un hash criptográfico SHA-256 para cada factura, concatenándolo con el hash del registro previo. Implementa un registro inmutable append-only con fines educativos y de auditoría técnica.
06 / DECISIONES TÉCNICAS
Decisiones de ingeniería fundamentadas y sus trade-offs
Cada decisión técnica clave responde a restricciones operativas reales del entorno hostelero:
Anclaje de Sesión: Mesa → UID Anónimo
Contexto del problema
El cliente de un restaurante no quiere registrarse con email o contraseña para pedir comida; cualquier formulario de alta reduce drásticamente el uso de la aplicación.
Decisión implementada
Implementar autenticación anónima de Firebase al cargar la URL con el parámetro de mesa. El UID asignado se asocia a la mesa activa y se almacena en la sesión del navegador.
Justificación técnica
Permite proteger las operaciones con reglas de seguridad en Firestore (el usuario solo puede leer y modificar las comandas de su mesa activa) sin imponer ninguna fricción de onboarding.
Trade-off asumido
Si el comensal limpia el almacenamiento local o abre una ventana de incógnito, se genera un nuevo UID que requiere vincularse de nuevo a la mesa activa.
Sincronización Realtime con Cloud Firestore
Contexto del problema
En cocina y barra, un retraso de 30 segundos en la recepción de un pedido o en la notificación de 'plato listo' interrumpe el ritmo del pase y deteriora el servicio.
Decisión implementada
Utilizar suscripciones en tiempo real con `onSnapshot` de Cloud Firestore para escuchar cambios en las colecciones de comandas y mesas.
Justificación técnica
Garantiza latencia inferior al segundo en la actualización visual de las pantallas KDS sin incurrir en peticiones de sondeo continuo (polling) que saturarían el ancho de banda y elevarían costes.
Trade-off asumido
Aumenta el consumo de lecturas concurrentes en Firestore. Requiere diseñar suscripciones acotadas por fecha y estado para evitar escuchar histórico innecesario.
Reactividad con Angular Signals y Computed
Contexto del problema
El cálculo dinámico de subtotales, recargos de opciones, cantidades en carrito y filtros de menú generaba susceptibilidad a bucles de detección de cambios (ChangeDetectionStrategy).
Decisión implementada
Adoptar Angular Signals (`signal`, `computed`) para el estado reactivo síncrono del cliente y reservar observables de RxJS para los flujos asíncronos de Firebase.
Justificación técnica
El código resultante es más predecible, legible y eficiente. Los cálculos derivados como el total del carrito o la lista de platos filtrados se recomputan solo cuando cambia su señal de origen.
Trade-off asumido
Exige convivir con un modelo híbrido en el proyecto (Signals para estado de UI y Observables para eventos y streams de Firestore).
Filtrado Reactivo por 14 Alérgenos Oficiales
Contexto del problema
La normativa alimentaria europea exige declarar con exactitud la presencia de 14 alérgenos obligatorios. Un comensal con celiaquía o alergia a frutos secos necesita filtrar la carta con total certeza.
Decisión implementada
Estructurar cada producto con un array de códigos de alérgenos y aplicar un filtro booleano reactivo con Signals que excluye automáticamente cualquier producto que contenga alguno de los alérgenos marcados por el usuario.
Justificación técnica
La comprobación se ejecuta en memoria sobre el catálogo cargado, ofreciendo respuesta instantánea sin llamadas de red adicionales.
Trade-off asumido
Requiere disciplina estricta en el alta de productos en base de datos para que ningún ingrediente quede sin etiquetar.
Integridad Demostrativa de Facturas mediante SHA-256
IMPORTANTE: Este mecanismo es una implementación técnica demostrativa y un ejercicio académico de integridad de datos. NO constituye una homologación según los reglamentos Veri*Factu, ni una certificación de la Agencia Tributaria (AEAT), ni un sistema fiscal legal completo en producción.
Contexto del problema
Se exploró cómo dotar a las operaciones de caja de un mecanismo de inmutabilidad que permitiera detectar cualquier manipulación retroactiva de un ticket expedido.
Decisión implementada
Implementar un encadenamiento de hashes SHA-256 donde cada registro de factura incluye el hash del ticket anterior, número de serie consecutivo, base, IVA (10%), timestamp y firma hash resultante.
Justificación técnica
Demuestra técnicamente cómo implementar una cadena de custodia inmutable (tamper-evident log) en una arquitectura web sin recurrir a una infraestructura de blockchain pesada.
Trade-off asumido
La concurrencia en la expedición simultánea exige un orden estricto de correlación; si dos terminales facturan en el mismo milisegundo debe arbitrarse el orden del encadenamiento.
07 / RETOS Y SOLUCIONES
Obstáculos técnicos encontrados y su resolución
Problemas reales surgidos durante la implementación de Trace y el enfoque adoptado para solucionarlos:
Separación automática de comandas en KDS Cocina y Barra
Un único pedido del comensal contiene habitualmente platos para la cocina y bebidas para la barra. Si ambos paneles ven todo el ticket, se genera confusión visual y duplicación de tareas.
Diseñé un selector de partida por producto. Al persistir la comanda, las líneas se clasifican por destino; la pantalla de cocina suscribe únicamente a partidas gastronómicas y la de barra a coctelería/bebidas, compartiendo un identificador común de comanda.
Sincronización concurrente de estados entre mesa y pase
Cuando cocina marcaba un plato como 'preparado' casi al mismo tiempo que el comensal pedía otra ronda en la misma comanda, se producían sobreescrituras parciales del documento de pedido.
Separé la comanda en dos niveles: un documento padre que controla metadatos de sesión (mesa, fecha, estado global de cobro) y una subcolección de partidas individuales que se actualizan de forma independiente sin bloquear el documento principal.
Generación de facturas en PDF en entornos móviles y PWA
Muchas librerías habituales de Node para generar PDFs dependen del sistema de archivos local y fallan al ejecutarse en el navegador móvil o en Android vía Capacitor.
Utilicé una librería de renderizado puramente cliente basada en Canvas/VFS (pdfmake/jspdf), encapsulando la descarga y visualización en un servicio agnóstico que detecta si corre en navegador web (Blob download) o en Android nativo (Capacitor File Opener).
Optimización de estilos SCSS y budgets en compilación de producción
La compilación de producción de Angular con Ionic generaba advertencias de tamaño excesivo en bundles de estilos (budget warnings) por importaciones redundantes de variables de tema.
Reorganicé la arquitectura de estilos hacia módulos SCSS limpios, externalizando tokens semánticos comunes y eliminando importaciones duplicadas en componentes standalone, reduciendo el bundle de estilos por debajo de los budgets establecidos.
08 / TESTING Y CALIDAD
Estrategia de verificación y pruebas automatizadas
La fiabilidad de las operaciones críticas de cálculo financiero y reactividad se asegura mediante una batería de pruebas automatizadas:
48 tests unitarios pasando
Tests focalizados en lógica matemática de IVA, cálculo de hashes SHA-256, filtrado estricto de alérgenos y separación de partidas en KDS.
Áreas críticas cubiertas por tests
- Cálculo de IVA (10%) y Bases Imponibles
Pruebas de precisión decimal sobre redondeos y desglose de cuotas en pedidos individuales y combinados.
- Encadenamiento SHA-256 de Facturas
Verificación del algoritmo de hash: alteración de un solo carácter en el historial invalida matemáticamente la firma del siguiente bloque.
- Filtrado Reactivo de 14 Alérgenos
Comprobación de que ningún producto con trazas o presencia declarada elude los filtros reactivos del menú.
- Lógica KDS (Cocina vs Barra)
Validación de la correcta bifurcación de líneas de pedido hacia sus pantallas operativas correspondientes.
- Check-in y Anclaje Mesa-UID
Comprobación del ciclo de vida de la sesión anónima y su asociación persistente con el número de mesa.
- Generación de Documentos PDF
Validación del ensamblaje del payload de datos para el renderizado del ticket de cobro.
Garantías de compilación y CI
- TypeScript Estricto
Compilación sin ningún `any` implícito, control estricto de nulos e interfaces exhaustivas.
- ESLint y Prettier
Reglas de estilo y calidad de código ejecutadas en pre-commit y validadas en CI.
- Budgets de Compilación en Producción
Límites estrictos en el tamaño de los bundles de JavaScript y CSS en la compilación final.
09 / SEGURIDAD Y DATOS
Aislamiento de accesos y protección en BaaS
Al no disponer de un backend tradicional propio, la seguridad descansa en las reglas declarativas de Firebase:
Separación de Roles Anónimo vs Administrador
Los comensales operan bajo credenciales anónimas limitadas a su mesa; el personal accede mediante credenciales verificadas con permisos de escritura sobre KDS y catálogo.
Reglas de Seguridad de Firestore
Reglas declarativas que impiden que un cliente pueda consultar o alterar las comandas de otras mesas, o modificar los precios de la carta.
Registros de Facturación Append-Only
Las reglas de Firestore bloquean las operaciones de borrado (`delete`) o modificación retroactiva (`update`) sobre la colección de facturas emitidas.
10 / RESULTADO
Sistema funcional verificado de punta a punta
Sin inventar métricas comerciales ni volumen ficticio de clientes, lo construido es una solución técnica sólida y operativa:
Flujo Integral Sala → Cocina → Caja
Ciclo completo funcional desde la lectura del QR en mesa hasta el cierre y cobro del ticket.
Pantallas Operativas KDS
Interfaces táctiles dedicadas para cocina y barra con actualización realtime sin parpadeos.
Filtrado Rápido de 14 Alérgenos
Experiencia de consulta inclusiva y segura para comensales con intolerancias alimentarias.
Mecanismo Demostrativo de Trazabilidad
Encadenamiento de hashes SHA-256 e impresión de facturas en PDF implementados con rigor técnico.
Distribución Multiplataforma (PWA + Android)
Accesible desde cualquier navegador móvil y empaquetada como app nativa Android con Capacitor 8.
Suite de Tests Automatizados
Cobertura unitaria de todas las operaciones matemáticas y de negocio críticas del sistema.
11 / APRENDIZAJES
Lecciones clave de ingeniería y arquitectura
El desarrollo de Trace me permitió profundizar en desafíos de ingeniería que van más allá del desarrollo de interfaces:
Arquitecturas Realtime y Estados Distribuidos
Comprendí que la sincronización en tiempo real exige pensar en idempotencia y granularidad de documentos para evitar condiciones de carrera entre terminales concurrentes.
Seguridad en Entornos BaaS
Descubrí que en aplicaciones sin servidor propio, las Security Rules son la verdadera capa de negocio y autorización, requiriendo el mismo rigor que un backend tradicional.
Adopción de Angular Signals frente a RxJS
Experimenté de primera mano cómo Signals simplifica drásticamente el estado local de UI frente a la sobrecarga que supone gestionar múltiples subscripciones de RxJS.
Honestidad entre Prueba Técnica y Cumplimiento Normativo
Aprendí a delimitar con precisión la frontera entre implementar un mecanismo criptográfico de hash demostrativo y afirmar erróneamente una certificación legal de Veri*Factu.
El Valor de las Pruebas Unitarias en Cálculos Críticos
Comprobar con tests automatizados el redondeo de impuestos y el encadenamiento de hashes aportó tranquilidad total para refactorizar la lógica sin miedo a regresiones.
Trade-offs en el Despliegue Multiplataforma
Entendí las diferencias entre compilar una PWA ligera y generar un paquete nativo Android con Capacitor, gestionando permisos y capacidades del dispositivo según el contexto.
12 / NAVEGACIÓN TÉCNICA
Secciones detalladas del case study
Accede directamente a los apartados específicos de arquitectura y decisiones:
Desglose de capas cliente, puente Capacitor y Cloud Firestore.
Justificaciones y trade-offs de diseño adoptados en el proyecto.
Detalle técnico del encadenamiento criptográfico demostrativo.
Problemas reales de sincronización, PDF y estilos en producción.
Batería de pruebas unitarias sobre cálculos y reglas de negocio.
Reglas de Firestore, autenticación dual y registros inmutables.