TPV Barra
TPV en el móvil para cobrar la barra de un festival: suma la ronda, calcula el cambio y funciona sin cobertura
La hice para mí, para cobrar en la barra del festival Contempopranea (Don Benito) con mi propio iPhone. Necesitaba sumar rondas con muchos productos distintos, calcular el cambio sin equivocarme con colas largas y que funcionara aunque en el recinto no hubiera cobertura.
Sobre el proyecto
TPV Barra es una aplicación web que hace de punto de venta táctil en la barra de un evento. Lleva la cuenta de lo que pide cada cliente, suma el total y calcula el cambio a partir del dinero que entrega.
Ahora tiene la carta de Contempopranea: 11 productos en tres bloques (vaso, agua y Monster; y cerveza, tinto de verano, refresco y combinado en vasos de 400 y 900 ml). Toda la carta sale de un único array en script.js, así que adaptarla a otro evento es cambiar unas líneas.
Está hecha en HTML, CSS y JavaScript, sin frameworks. Es una PWA: se instala en la pantalla de inicio con su icono y un service worker la guarda en el móvil, así que abre y funciona sin conexión. Los precios se cambian desde la propia app y se guardan en el dispositivo.
Matemáticas exactas: todo se calcula en céntimos
El punto más delicado de un TPV es el cambio: un error de redondeo con decimales puede hacer que la cuenta no cuadre. Por eso todo el dinero se maneja internamente como números enteros de céntimos en lugar de decimales, evitando los típicos fallos de coma flotante de JavaScript.
- Precios y subtotales en céntimos enteros
- Teclado de pago tipo datáfono, sin ambigüedad decimal
- Cambio siempre exacto, sin errores de redondeo
- Aviso visual si el pago no cubre el total
Carta por bloques
Cada producto tiene sus botones + y − y su subtotal, agrupados por color: la bebida, vaso de 400 ml y vaso de 900 ml.
Cobro y cambio
Teclado tipo datáfono para el dinero entregado; el cambio sale al momento y avisa con "Falta dinero" si no llega.
Precios editables
Panel de ajustes para fijar el precio de cada producto; se guarda en el móvil con localStorage.
Sin cobertura
Instalable como app y con service worker: tras abrirla una vez con conexión, funciona offline.
Stack Tecnológico
Lenguaje & UI
- HTML5 Semántico
- CSS3 (Grid + Variables)
- JavaScript Vanilla
Datos & Precisión
- Aritmética en céntimos enteros
- LocalStorage API
- Formato monetario es-ES
Despliegue
- Git & GitHub
- GitHub Pages
- PWA: manifest + service worker
- Probada en Safari para iPhone
Galería
