--- title: "Cuadrilla: app para equipos sin conexión | abuenoben" description: "Gestiona equipos, tareas y fotografías sin conexión. Explora los vídeos de Cuadrilla para Android e iOS y su sincronización manual." canonical: "https://showroom.abuenoben.com/apps/cuadrilla/" language: "es" --- # Cuadrilla: trabajar sin conexión. Equipos, tareas y fotografías con guardado local. Cuando vuelve la conexión, decides cuándo sincronizar. ### Guardar sin red y sincronizar después Modo avión, cambio guardado, cierre del proceso, reapertura con foto disponible, fallo de conexión y recuperación. [Ver vídeo]() Recorrido de la aplicación. 48 s. [Ver vídeo vertical]()[Descargar vídeo]() Qué muestra el recorrido Modo avión, cambio guardado, cierre del proceso, reapertura con foto disponible, fallo de conexión y recuperación. - Cambiar el estado y continuar trabajando sin conexión. - Cerrar y volver a abrir la aplicación conservando tareas y fotografías. - Recuperar la conexión y sincronizar los cambios con los demás dispositivos. ## ¿Necesitáis una app para vuestro equipo? Podemos concretar los flujos, los datos que deben funcionar offline y las integraciones de cada plataforma antes de cerrar el alcance. [Plantear un proyecto móvil]() Pantallas y plataformas ## El trabajo diario, desde Android. Cada tarea reúne su responsable, estado y fotografías. Los cambios se guardan en el dispositivo para poder continuar trabajando incluso cuando no hay conexión. ### Organizar el trabajo y adjuntar una foto Equipo, asignación, cambio de estado e importación desde el selector de fotografías de Android. [Ver vídeo]() Recorrido de la aplicación. 59 s. [Ver vídeo vertical]()[Descargar vídeo]() Qué muestra el recorrido Equipo, asignación, cambio de estado e importación desde el selector de fotografías de Android. ### Capturas de las pantallas [![Cuadrilla en Android: tareas y responsables. Listado del Equipo Norte con estados, filtros y responsables.]()]() **Tareas y responsables** Listado del Equipo Norte con estados, filtros y responsables. [![Cuadrilla en Android: personas del equipo. Personas del equipo, funciones y tareas abiertas.]()]() **Personas del equipo** Personas del equipo, funciones y tareas abiertas. [![Cuadrilla en Android: una foto dentro de la tarea. Estado, responsable y fotografía adjunta.]()]() **Una foto dentro de la tarea** Estado, responsable y fotografía adjunta. Ver todas las pantallas y estados de la aplicación [![Cuadrilla en Android: buscar una tarea. Búsqueda local por el término material.]()]() **Buscar una tarea** Búsqueda local por el término material. [![Cuadrilla en Android: consultar la foto. Visor de la fotografía guardada en la tarea.]()]() **Consultar la foto** Visor de la fotografía guardada en la tarea. [![Cuadrilla en Android: cambiar el estado sin conexión. Tarea marcada como hecha con modo avión y sin túnel al servidor.]()]() **Cambiar el estado sin conexión** Tarea marcada como hecha con modo avión y sin túnel al servidor. [![Cuadrilla en Android: reabrir sin perder la foto. Fotografía disponible después de cerrar y reabrir sin conexión.]()]() **Reabrir sin perder la foto** Fotografía disponible después de cerrar y reabrir sin conexión. [![Cuadrilla en Android: cambios pendientes de compartir. Tras el fallo de conexión, los cambios locales se conservan y la revisión remota no avanza.]()]() **Cambios pendientes de compartir** Tras el fallo de conexión, los cambios locales se conservan y la revisión remota no avanza. [![Cuadrilla en Android: sincronización confirmada. Conexión recuperada y sincronización manual completada; estado local y remoto comprobados iguales.]()]() **Sincronización confirmada** Conexión recuperada y sincronización manual completada; estado local y remoto comprobados iguales. [![Cuadrilla en Android: tema oscuro. La misma aplicación con el tema oscuro del sistema.]()]() **Tema oscuro** La misma aplicación con el tema oscuro del sistema. [![Cuadrilla en Android: 320 dp y texto al 200 %. Comprobación en ancho estrecho, tema oscuro y texto ampliado; el contenido se desplaza.]()]() **320 dp y texto al 200 %** Comprobación en ancho estrecho, tema oscuro y texto ampliado; el contenido se desplaza. [![Cuadrilla en Android: navegación en ancho de tableta. Ancho de 600 dp: navegación lateral y espacio adicional para el contenido.]()]() **Navegación en ancho de tableta** Ancho de 600 dp: navegación lateral y espacio adicional para el contenido. ## iOS: la misma base de interfaz, con sus adaptadores nativos. El proyecto incluye el host SwiftUI, la pantalla Compose mediante UIViewController, cámara con UIKit, selector PHPicker y cliente HTTP Darwin. Las pantallas y las reglas se comparten; los permisos y los selectores del sistema tienen implementación por plataforma. ### Equipos, tareas y fotografías en iPhone [Ver vídeo]() Qué muestra el recorrido Selección de equipo, consulta de tareas, asignación de responsables y detalle con fotografía. ### Capturas de las pantallas [![iOS: Lista de tareas]()]() Lista de tareas [![iOS: Personas del equipo]()]() Personas del equipo [![iOS: Detalle con fotografía]()]() Detalle con fotografía Arquitectura y límites ## Qué se comparte y dónde están los límites. Kotlin Multiplatform comparte el modelo, la validación, la persistencia, la combinación de cambios y el cliente HTTP. Compose Multiplatform comparte las pantallas. Los hosts Android e iOS resuelven la entrada a la app y las integraciones del sistema. | Parte | Tecnología | Responsabilidad | | --- | --- | --- | | Interfaz | Compose Multiplatform · Material 3 | Tareas, equipo, formularios, detalle, visor y ajustes. | | Operaciones y estado | AppController · Coroutines · StateFlow | Ejecutar operaciones asíncronas, observar los datos y mostrar resultados o errores. | | Reglas y escrituras | WorkspaceRepository · Mutex | Validar los cambios y publicar el estado solo después de guardarlo. | | Persistencia local | Okio · JSON · JPEG en Base64 | Snapshot privado del espacio, con archivo temporal y renombrado atómico. | | Comunicación | Cliente Ktor · OkHttp / Darwin | Descargar y enviar el espacio cuando el usuario pulsa Sincronizar. | | Servidor opcional | Python HTTP · SQLite | Un espacio con clave compartida y revisión comprobada dentro de una transacción. | ### Una base compartida, límites claros [![Una base compartida, límites claros. Pantallas, estado, validación y persistencia en el módulo Kotlin Multiplatform.]()]() Pantallas, estado, validación y persistencia en el módulo Kotlin Multiplatform. [SVG editable]()[Fuente Mermaid]()[PNG]() ### Qué se comparte y qué es nativo [![Qué se comparte y qué es nativo. Dos hosts móviles. JVM se utiliza para pruebas del módulo compartido, sin app de escritorio.]()]() Dos hosts móviles. JVM se utiliza para pruebas del módulo compartido, sin app de escritorio. [SVG editable]()[Fuente Mermaid]()[PNG]() ### Decisiones de arquitectura Guardar antes de confirmar El repositorio escribe en disco antes de actualizar la interfaz. Un fallo de red no participa en el guardado local y un fallo de disco no se presenta como un cambio guardado. Un snapshot acotado El snapshot JSON mantiene juntos los datos y las fotografías: hasta 12 MB, 500 tareas, 30 equipos y 50 personas por equipo. Para muchas fotos o actualizaciones incrementales, la evolución sería una base local y archivos de imagen separados. Compartir por decisión del usuario La sincronización es manual. Se comparan la última base sincronizada, el estado local y el remoto para conservar cambios independientes y detectar cambios incompatibles en el mismo registro. Guardado y sincronización ## Del trabajo local a los cambios compartidos. Una tarea pertenece a un equipo y puede asignarse a una persona de ese equipo. Tiene título, descripción, estado, prioridad, fecha opcional y hasta seis fotografías. Retirar a una persona conserva sus tareas sin asignación. ### Tarea y fotografía, sin depender de un enlace temporal 1. Crear o editar la tarea y su responsable. 2. Abrir la cámara o el selector del sistema e importar un JPEG de hasta 1280 px y 900 KB. 3. Validar el nuevo espacio, escribir un temporal y renombrarlo de forma atómica. 4. Actualizar la interfaz y leer ese estado al reabrir, incluidas las fotos, sin necesitar servidor. ### De la tarea a una foto disponible sin red [![De la tarea a una foto disponible sin red. La confirmación llega después de guardar: la red no participa en la escritura local.]()]() La confirmación llega después de guardar: la red no participa en la escritura local. [SVG editable]()[Fuente Mermaid]()[PNG]() ### Sincronizar con revisión y conflictos visibles 1. Pulsar Sincronizar y descargar el espacio remoto con su revisión. 2. Comparar base, local y remoto por equipo o tarea. Los cambios independientes se combinan. 3. Si un registro tiene cambios incompatibles, mostrar ambas versiones y pedir cuál conservar. Esa elección puede descartar la otra versión. 4. Enviar solo si hay cambios que compartir. SQLite comprueba la revisión en una transacción; un HTTP 409 obliga a descargar y combinar otra vez. 5. Tras la confirmación remota, guardar la nueva base local. Si falla la red, conservar el trabajo para reintentar. ### Compartir sin sobrescribir a ciegas [![Compartir sin sobrescribir a ciegas. Sincronización manual con base, versión local y versión remota; conflictos por equipo o tarea.]()]() Sincronización manual con base, versión local y versión remota; conflictos por equipo o tarea. [SVG editable]()[Fuente Mermaid]()[PNG]() ## Un flujo completo, con y sin conexión. 1. Organizar equipos y asignar cada tarea a una persona. 2. Añadir fotografías desde la cámara o la galería y guardarlas junto a la tarea. 3. Cambiar el estado y continuar trabajando sin conexión. 4. Cerrar y volver a abrir la aplicación conservando tareas y fotografías. 5. Recuperar la conexión y sincronizar los cambios con los demás dispositivos. El guardado local y la sincronización son operaciones independientes. El equipo comparte una dirección de servidor y una clave de espacio; cada persona decide cuándo enviar y recibir los cambios desde Ajustes. [Todas las demos]() Cuadrilla · Gestión de equipos, tareas y fotografías.