● Proyecto destacado · Frontend · PWA

KAVANA Calculadora — eficiencia de producción que funciona donde la fábrica no tiene señal

En una de las empresas donde trabajé como operario, fabricando perfiles de acero en varias perfiladoras, la producción se apuntaba en el parte de papel, en metros, y sacar la eficiencia de cabeza o con la calculadora era lento y fácil de equivocar. Esta app es una ayuda personal para el operario: hace ese cálculo en la tablet o el móvil, al momento y sin conexión, mientras él sigue rellenando su parte en papel como siempre. La hice para mi propio uso y pasé de tardar 5 minutos en rellenar el parte a 30 segundos.

Tecnologías: Vanilla JavaScript (ES Modules), localStorage, Service Worker, PWA.

Míralo en 50 segundos · con subtítulos
2
Formas de medir: metros o piezas por hora
0
Servidores: todo se calcula en el dispositivo
12
Decisiones de diseño explicadas por escrito
100%
Funciona sin cobertura en la nave
El origen

Por qué construí esto

En la empresa la producción de cada perfiladora se apuntaba a mano, en metros. Al final del turno había que sacar la eficiencia: lo producido frente a lo que se podía producir en ese tiempo, con modelos distintos y medidas en metros o en piezas. Hacerlo de cabeza o con calculadora es lento y es fácil equivocarse.

La Calculadora nace para eso: el operario elige su línea, anota lo que lleva hecho y ve la eficiencia al instante, aunque en la nave no haya cobertura. No sustituye al parte en papel ni envía nada a la empresa: es una ayuda para rellenarlo sin hacer cuentas.

Los datos son del operario y se quedan en su dispositivo. Si quiere, puede guardar su historial en un Excel o en una hoja de su propio Drive para llevar un control personal de su producción y tenerlo a mano si la empresa le pregunta por algún turno.

El parte de producción en papel, con la fórmula de eficiencia, y la Calculadora Kavana en un móvil haciendo el mismo cálculo
La app en un turno

Así se usa en planta

Capturas de la app publicada con una línea de ejemplo: una perfiladora que mide en metros, con dos modelos de perfil. Los datos son inventados.

El operario configura su línea: unidad de medida, objetivo por hora y modelos
1. El operario configura su línea una sola vez: unidad de medida, objetivo por hora y modelos con sus medidas.
Producción del turno apuntada en palets, filas y paquetes, con la eficiencia en vivo del 87,0 %
2. Durante el turno apunta lo que lleva en palets, filas y paquetes, como se cuenta en planta, y ve la eficiencia al momento: 16.704 m de 19.200 posibles, un 87,0 %.
Lo que falta para el 100 % del turno, en palets, filas y paquetes
3. «Te falta para el 100 %»: lo que queda por contar, traducido a palets, filas y paquetes, para ir rellenando el parte.
Historial personal de turnos, con guardado en Drive y Excel propios
4. Cada turno queda guardado solo en su dispositivo. Si quiere, lo pasa a su propio Excel o a una hoja de su Drive para llevar su control personal.
Lo que demuestra

Capacidades técnicas visibles en este proyecto

📱

PWA offline-first real

Service Worker con caché de todos los archivos. Instalable en el dispositivo, funciona sin conexión, carga en menos de 500ms.

⚡

Sin framework ni compilación

JavaScript con módulos nativos del navegador: el código que ves es el código que se ejecuta. La única librería externa es SheetJS, y solo se usa para exportar a Excel.

🧮

Motor de cálculo puro

Eficiencia por tiempo teórico frente al turno real, en piezas/hora o metros/hora, y Meta 100%: cuánto hay que fabricar de cada modelo para llegar al objetivo, en palets, filas y paquetes.

💾

Persistencia localStorage

Plantillas de línea, sesiones de producción e histórico completos en el dispositivo, con export/import JSON para migrar entre equipos.

📊

Excel y Drive personales

Descarga el histórico en .xlsx (SheetJS) o lo guarda en una hoja del Drive del propio operario, con permiso solo para los archivos que crea la app. Es para su control personal: la app no envía nada a la empresa.

🎨

Temas por línea

6 paletas de color para identificar líneas de producción de un vistazo, con anti-FOUC para que el tema se aplique antes de pintar.

Criterio aplicado, no solo código

Decisiones de arquitectura que responden a restricciones reales

🔄 Vanilla JS en vez de React

Una SPA de lógica acotada no necesita un framework de 100KB. ES Modules nativos dan estructura sin build step. ADR-002. ADR →

💾 localStorage en vez de IndexedDB

Primero fue Dexie/IndexedDB, pero para datos pequeños y uso individual la complejidad no se justificaba. Se migró a localStorage: síncrono, simple, universal. ADR-008. ADR →

🧩 CustomEvent bus en vez de estado global

Los módulos UI se comunican con eventos nativos del navegador, sin librería de estado. ADR-005.

📐 Meta 100% en palets, filas y paquetes

Para cada modelo, el objetivo del turno se traduce a lo que el operario cuenta en planta: primero palets completos, luego filas y luego paquetes. No reparte el objetivo entre modelos, porque eso lo decide la orden de producción. ADR-009.

El flujo completo

Cómo funciona un turno de producción

Operario (tablet industrial, sin red) │ configura la línea con su plantilla ▼ Calculadora (motor puro en el dispositivo) │ eficiencia en tiempo real · piezas o metros por hora ▼ localStorage (en el propio dispositivo) │ sesión guardada al instante, sin esperar a nadie ▼ Historial + Export su control personal · Excel o hoja propia en Drive · copia JSON
Demo en vivo

Pruébala ahora

📱 La app

PWA instalable en el móvil o la tablet. Funciona offline: los datos se guardan en el dispositivo y no dependen de ningún servidor.

Abrir la app →

💻 Código + decisiones

Repo público con 73 pruebas, 12 ADRs y la documentación técnica. Sin build step: clonar y abrir index.html.

Ver en GitHub →

¿Quieres ver más?

Este es uno de los siete proyectos del portfolio. Cada uno con su problema real, sus decisiones documentadas y su código verificado.