01
La jornada, ordenada
Las órdenes del día por hora, con la prioridad marcada. Lo que queda por hacer arriba; lo cerrado, al final.
Demo interactiva · App de campo
El parte de trabajo que se cierra en la calle, no en la oficina.
El operario abre su jornada, ve las órdenes por hora y prioridad, documenta el antes y el después, anota el material, firma y cierra. Aunque no haya cobertura: el parte queda en el móvil y sube solo cuando vuelve la red.
Prueba a abrir el parte de las luminarias y cerrarlo firmando. Si se te queda pequeña, ábrela a pantalla completa.
TecnologíaReact Native + Expo
ParaBrigadas y contratas
Sin coberturaCierra y sincroniza después
FirmaEn pantalla o por nombre
El circuito completo
Un aviso del vecino, un parte del operario.
Las dos demos son el mismo municipio. Varios partes de esta app llevan el código del aviso ciudadano del que nacen, porque así es como funciona de verdad: alguien comunica un socavón y alguien tiene que ir a taparlo.
Vendidas juntas, cubren el recorrido entero. Por separado, cada una resuelve su mitad.
El vecino avisa
Comunica la incidencia con foto y ubicación, y recibe un número de registro con el que seguir el estado.
Ver la demo de avisos ciudadanos
La brigada ejecuta
Recibe la orden con la prioridad ya asignada, documenta la intervención y cierra el parte firmado. El aviso puede pasar a resuelto.
Qué hace
Lo que hoy se escribe en un papel que se moja.
El parte en papel se rellena mal, se pierde y llega a la oficina dos días tarde. Y cuando alguien reclama seis meses después, no hay forma de demostrar qué se hizo ni cuándo.
02
Antes, después y material
Dos fotos, el consumo de material marcado de una lista y las observaciones del operario. Eso es lo que justifica el trabajo.
03
Firma y cierre
Firma en pantalla con el dedo, o escribiendo el nombre. El parte se cierra con hora exacta y tiempo empleado.
Sin cobertura
En un barranco no hay 4G, y el trabajo sigue.
Una app de campo que exige conexión para guardar es una app que el operario deja de usar el primer día que falla. Aquí el parte se cierra siempre: queda en el dispositivo, la pantalla dice cuántos hay en cola y suben cuando vuelve la red.
En la demo puedes verlo: cierra un parte y aparece el aviso de que está guardado en el móvil, con su botón de enviar.
“Si el operario tiene que elegir entre la app y hacer su trabajo, va a elegir su trabajo.”
Accesibilidad
El caso difícil: firmar con el dedo.
Firmar dibujando no es accesible y no tiene arreglo: no se puede trazar con un lector de pantalla ni con el teclado. Es el ejemplo perfecto de que la accesibilidad no se resuelve con un plugin, sino decidiendo qué alternativa ofreces.
Aquí la pantalla de cierre da siempre dos caminos, y ninguno es el «modo degradado» del otro.
Dos formas de dar la conformidad
Firmar en pantalla, o escribir el nombre y marcar la casilla de conformidad. Se elige, no se sufre.
Prioridad y estado con texto
«Urgente» pone urgente, además de ir en rojo. En obra, comunicar solo con color no es una opción.
Casillas con estado real
El material usa casillas de verificación que anuncian «marcado» o «no marcado», no botones que cambian de color.
Secciones navegables
Los rótulos de cada bloque se ven como etiquetas pequeñas pero son encabezados de verdad: se puede saltar de uno a otro.
Objetivos de 48 píxeles
WCAG 2.2 pide 24. Con guantes de trabajo, 48 es lo que se acierta a la primera.
Comprobado, no supuesto
Contraste, tamaños y semántica se midieron sobre la app ya construida. Aparecieron fallos y se corrigieron.
Cómo está hecha
Misma base de código, tres destinos.
React Native con Expo. De ahí sale el paquete de Google Play, el de App Store y esta versión web con HTML real, que es la que estás tocando ahora mismo.
La firma no usa ninguna librería de terceros: es PanResponder recogiendo el trazo y react-native-svg pintándolo.
React Native
Expo SDK 57
Expo Router
TypeScript
react-native-svg
PanResponder
expo-image-picker
Export estático
Qué es y qué no
Hasta dónde llega esta demo.
Es una maqueta funcional, no un servicio en producción
La brigada y el municipio son ficticios y los partes viven en la memoria del navegador: al recargar vuelven a empezar. La cola de envío está simulada. Para una implantación real haría falta añadir:
- Backend con el registro de partes y su numeración oficial
- Almacenamiento local de verdad y sincronización con resolución de conflictos
- Identificación del operario y control de qué partes ve cada brigada
- Panel de planificación para el responsable del servicio
- Enlace real con el expediente del aviso ciudadano
- Valor probatorio de la firma según lo que exija la intervención
¿Tienes brigadas rellenando partes en papel?
Cuéntame cómo es el circuito hoy: quién asigna, quién ejecuta y dónde acaba el papel. Te digo qué parte se puede llevar al móvil primero y con qué alcance conviene empezar.