# Plan para la aplicación móvil de ConstruProgress ## Objetivo Crear una aplicación móvil (Android/iOS, teléfonos y tablets) para realizar inspecciones de campo y sincronizar datos offline con el servidor Laravel de ConstruProgress. ## Tecnologías recomendadas - Framework: Flutter (una sola codebase) - Estado: GetX (o Provider/Bloc) - Almacenamiento local: Sqflite (IndexedDB equivalente) para cola de acciones y datos de inspección - Comunicación API: Dio con interceptors de autenticación y reintentos - Autenticación: Flutter Secure Storage para token (Sanctum/JWT) - Media: Image Picker y Video Player para captura de fotos/videos - Detección de red: Connectivity Plus - Sincronización en background: Workmanager (Android) / Background Fetch (iOS) para intentar enviar cola cuando haya conexión - UI responsive: LayoutBuilder, MediaQuery, Flutter ScreenUtil para adaptar a teléfonos y tablets - Indicadores de conexión: Banner o ícono que muestre 🟢 Online, 🟡 Pendientes (X), 🔴 Offline, con botón “Sincronizar ahora” ## Estructura de carpetas (sugerida) lib/ main.dart config.dart # Endpoints y configuración bindings/ # GetX bindings controllers/ # GetX controllers (AuthController, ProjectController, InspectionController, SyncController) models/ # Modelos de datos (Project, Phase, Feature, Inspection, PendingAction) services/ # Servicios API (ApiService, AuthService, SyncService) ui/ # Pantallas y widgets reutilizables auth/ projects/ inspections/ components/ utils/ # Helpers, extensiones assets/ # Íconos, imágenes ## Fases de desarrollo 1. **Configuración inicial y autenticación** - Crear proyecto Flutter con flutter create - Añadir dependencias esenciales (get, dio, flutter_secure_storage, connectivity_plus, sqflite, workmanager, image_picker) - Configurar .gitignore y README - Implementar pantalla de login que obtenga token desde `/api/sanctum/token` (o similar) y lo guarde de forma segura - Manejo de errores de autenticación y redirección a home 2. **Navegación y layout base** - Implementar BottomNavigationBar o NavigationRail (adaptativo) con secciones: Proyectos, Inspecciones, Perfil - Diseño responsive: usar LayoutBuilder para cambiar entre NavigationBar (teléfono) y NavigationRail (tablet) - AppBar con título y indicador de conexión (🟢/🟡/🔴) y número de acciones pendientes 3. **Módulo de proyectos** - Pantalla de lista de proyectos (con filtro por estado y búsqueda) - Tarjeta de proyecto mostrando nombre, estado, progreso global, última actualización - Navegación al detalle del proyecto al tocar una tarjeta - Detalle del proyecto: lista de fases con barra de progreso, botón para ver mapa (opcional, usar webview o lanzar mapa externo) - Pull-to-refresh para obtener proyectos actualizados desde API (`GET /api/projects`) 4. **Módulo de inspecciones** - Lista de inspecciones asociadas a un proyecto/fase (o global) - Botón “+ Nueva inspección” que abre formulario - Formulario de inspección basado en templates (obtener templates desde `/api/templates/{project}` o `/api/templates?phase_id=X`) - Campos dinámicos según tipo (texto, número, selección, fecha, firma, foto) - Captura de foto usando image_picker, opción para tomar foto o elegir de galería - Guardar borrador localmente (sqflite) mientras se llena el formulario - Botón “Guardar borrador” y “Finalizar inspección” - Al finalizar, validar campos requeridos y enviar a backend (`POST /api/inspections`) o encolar para sincronización offline 5. **Sincronización offline** - Definir modelo de acción pendiente (PendingAction) con campos: id, type, payload, timestamp, retries, synced - Servicio de cola que guarda acciones en base local cuando falta conexión - Al detectar cambio a online (connectivity_plus) o manualmente (botón “Sincronizar ahora”), procesar cola: * Enviar acciones en lote a `/offline/sync` (endpoint existente) * Procesar respuesta por acción, marcar como sincronizada o incrementar reintentos * Manejar errores de servidor (reintentar con backoff exponencial) - Notificaciones locales (opcional) cuando la sincronización completa o falla - Indicador UI: ícono con contador de acciones pendientes, tooltip con detalle 6. **Mapa y visualización de features (opcional MVP)** - Integrar paquete google_maps_flutter o flutter_leaflet para mostrar mapa - Obtener features (GeoJSON) desde `/api/projects/{id}/features` o similar - Permitir tocar un feature para ver detalles y asociar inspección rápida - Modo offline: mostrar features cacheados (descargados previamente cuando había conexión) 7. **Perfil y ajustes** - Pantalla de perfil mostrando nombre, correo, rol - Opción para cerrar sesión (eliminar token seguro) - Ajustes: frecuencia de sincronización background, solo sync en Wi‑Fi, tema claro/oscuro 8. **Pruebas y calidad** - Pruebas unitarias para modelos y servicios (mockito) - Pruebas de widget para pantallas críticas (login, formulario de inspección) - Pruebas de integración para flujos completos (login → inspección → sincronización) - Análisis estático con flutter_lints - Generar APK y AAB para Android, IPA para iOS (usando flutter build) 9. **Despliegue** - Crear cuentas en Google Play Console y App Store Connect - Configurar firmado de aplicaciones (keystore, certificados) - Automatizar builds con fastlane (opcional) - Subir versiones de prueba (internal test, TestFlight) y producción - Monitorear crashes con Firebase Crashlytics (opcional) ## Próximos pasos inmediatos 1. Clonar el repositorio de ConstruProgress backend (ya hecho) y revisar los endpoints disponibles (especialmente `/offline/sync`, rutas de inspección, templates, autenticación). 2. Definir contratos exactos de las APIs (request/response) y documentarlos en un archivo `API.md` dentro del repo móvil o en el wiki. 3. Crear la rama `dev` en el repositorio móvil y comenzar con la fase 1 (autenticación y layout base). 4. Sincronizar frecuentemente con el backend para asegurar compatibilidad. ## Notas adicionales - Usar heroicon y blade-icons para iconos en lugar de emojis o símbolos unicode directos (preferencia del usuario). - Mantener el código limpio y comentado; seguir la guía de estilo de Flutter. - Registrar decisiones importantes en este archivo PLAN_MOBILE.md o en el README.