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

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
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
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)
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
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
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)
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
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)
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

Clonar el repositorio de ConstruProgress backend (ya hecho) y revisar los endpoints disponibles (especialmente /offline/sync, rutas de inspección, templates, autenticación).
Definir contratos exactos de las APIs (request/response) y documentarlos en un archivo API.md dentro del repo móvil o en el wiki.
Crear la rama dev en el repositorio móvil y comenzar con la fase 1 (autenticación y layout base).
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.

6.5 KiB Raw Permalink Blame History Unescape Escape