110 lines
6.5 KiB
Markdown
110 lines
6.5 KiB
Markdown
# 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.
|