← Volver al índice | Arquitectura del Sistema | Especificación Web SPA

Especificación — App Móvil¶

Tipo: Especificación Funcional
Audiencia: Equipo de desarrollo frontend/móvil, diseño UX
Fecha: 20 de marzo de 2026
Relacionado con: Arquitectura del Sistema | Arquitectura IA

1. Descripción General¶

Aplicación móvil multiplataforma (iOS/Android) construida con React Native que permite a los investigadores del IEO capturar, identificar y registrar muestras biológicas usando la cámara del dispositivo y el motor de IA.

Stack Tecnológico¶

Componente	Tecnología
Framework	React Native + Expo
Cámara	`react-native-vision-camera` v4/v5
Edge AI	`react-native-fast-tflite`
Worklets	`react-native-worklets-core`
Estado servidor	`@tanstack/react-query`
Persistencia local	`react-native-mmkv`
Navegación	`react-navigation` v6
Networking	Axios + WebSocket nativo

2. Pantallas y Flujos¶

flowchart TB
    subgraph AUTH ["Autenticación"]
        LOGIN["Login - Entra ID"]
    end

    subgraph MAIN ["Pantallas Principales"]
        HOME["Dashboard"]
        CAM["Cámara - Captura"]
        VIDEO["Vídeo en Tiempo Real"]
        HIST["Historial de Muestras"]
        DET["Detalle de Muestra"]
    end

    subgraph AUX ["Auxiliares"]
        META["Formulario Metadatos"]
        RES["Resultado IA"]
        CONF["Confirmación"]
        SETTINGS["Ajustes"]
    end

    LOGIN --> HOME
    HOME --> CAM
    HOME --> VIDEO
    HOME --> HIST
    CAM --> META --> RES --> CONF
    VIDEO --> RES
    HIST --> DET

    style CAM fill:#e74c3c,color:#fff
    style VIDEO fill:#9b59b6,color:#fff
    style RES fill:#2ecc71,color:#fff

3. Detalle de Pantallas¶

Elemento	Descripción
Autenticación	OAuth2 / OIDC contra Microsoft Entra ID
Flujo	`react-native-app-auth` con PKCE
Persistencia	Token almacenado en Keychain/Keystore seguro
Auto-login	Refresh token automático en segundo plano

3.2 Dashboard (Home)¶

Elemento	Descripción
Resumen del día	Muestras capturadas hoy, identificaciones pendientes
Accesos rápidos	Botones a Cámara, Vídeo, Historial
Estado de conexión	Indicador online/offline
Muestras pendientes de sincronización	Contador de datos offline no sincronizados

3.3 Cámara — Captura de Foto¶

Elemento	Descripción
Vista cámara	Pantalla completa con overlay de guía
Botón de captura	Captura foto de alta resolución
Flash	Control de flash automático/manual
Zoom	Pinch-to-zoom
Pre-view rápida	Pre-clasificación Edge AI antes de enviar
Galería	Selección de imagen existente

3.4 Vídeo en Tiempo Real¶

Elemento	Descripción
Stream	Vídeo en vivo con detección dinámica
Overlay	Bounding box + especie + confianza sobre el vídeo
FPS	≥ 15 FPS de detección en overlay
Captura de frame	Botón para capturar el frame actual
Conexión WebSocket	Stream de frames al backend via WS

3.5 Formulario de Metadatos¶

Campo	Tipo	Obligatorio
Código interno	Texto	Sí
Talla (cm)	Numérico decimal	No
Peso (g)	Numérico decimal	No
Sexo macroscópico	Selector: M / F / Indeterminado	No
Método de captura	Selector: Arrastre, Palangre, Nasas, Otro	No
Zona geográfica	Selector + GPS automático	Sí
Campaña	Selector de campañas activas	No
Notas	Texto libre	No

3.6 Resultado IA¶

Elemento	Descripción
Especie sugerida	Nombre científico + nombre común
Confianza	Porcentaje con barra visual
Edad estimada	Años (si aplica — otolitos)
Sexo estimado	Con indicador de fiabilidad
Top-5 similares	Carousel de muestras similares con score
Acciones	Confirmar / Rechazar / Corregir

3.7 Historial de Muestras¶

Elemento	Descripción
Lista	Listado cronológico con thumbnail + especie + fecha
Filtros	Por especie, fecha, campaña, estado de confirmación
Búsqueda	Barra de búsqueda por código o especie
Pull-to-refresh	Actualización de datos

4. Modo Offline¶

flowchart TB
    subgraph ONLINE ["Modo Online"]
        O1["Captura foto"]
        O2["Envía al backend"]
        O3["Recibe resultado IA"]
        O4["Persiste en servidor"]
    end

    subgraph OFFLINE ["Modo Offline"]
        F1["Captura foto"]
        F2["Edge AI - TFLite"]
        F3["Resultado parcial"]
        F4["Almacena en MMKV"]
    end

    subgraph SYNC ["Sincronización"]
        S1["Detecta conexión"]
        S2["Envía cola de pendientes"]
        S3["Recibe resultados completos"]
        S4["Actualiza registros locales"]
    end

    OFFLINE --> SYNC
    S1 --> S2 --> S3 --> S4

    style OFFLINE fill:#e67e22,color:#fff
    style SYNC fill:#2ecc71,color:#fff

Capacidades Offline¶

Funcionalidad	Disponible Offline
Captura de foto	✅
Pre-clasificación Edge AI (top-5)	✅
Entrada manual de metadatos	✅
Identificación completa (CAG+RAG)	❌
Búsqueda por similitud	❌
Historial local	✅ (datos cacheados)
Sincronización automática	✅ (al recuperar red)

5. Edge AI — Pipeline On-Device¶

5.1 Flujo del Frame Processor¶

flowchart LR
    CAM2["Cámara - 60 FPS"] --> FP["Frame Processor"]
    FP --> OCV["OpenCV: resize + normalize"]
    OCV --> TFL2["TFLite: clasificación"]
    TFL2 --> TOP5["Top-5 candidatos"]
    TOP5 --> UI["Overlay en pantalla"]

    style FP fill:#e74c3c,color:#fff
    style TFL2 fill:#9b59b6,color:#fff

5.2 Modelo TFLite¶

Parámetro	Valor
Entrada	Imagen 224×224 RGB normalizada
Salida	Vector de probabilidades por especie
Tamaño	~50 MB (cuantizado INT8)
Latencia	~69ms por frame (iPhone 13+)
Aceleración	GPU delegate (iOS: Core ML, Android: NNAPI)

6. Requisitos No Funcionales¶

Requisito	Valor
Plataformas	iOS 15+ / Android 10+
Tamaño de app	< 100 MB (sin modelo TFLite offline)
Tiempo de arranque	< 3s hasta pantalla funcional
Latencia de captura	< 500ms desde botón hasta preview
Almacenamiento offline	Hasta 500 muestras con imágenes
Seguridad	Datos en reposo cifrados (Keychain/Keystore)
Accesibilidad	WCAG 2.1 nivel AA

Documentos Relacionados¶

Nivel	Documento	Descripción
Arquitectura	Arquitectura del Sistema	Stack, flujos de uso, componentes
Arquitectura	Arquitectura IA	Edge AI, modelos TFLite
Especificación	Web SPA	Estrategia de contingencia web
Especificación	API REST	Endpoints consumidos por la app
Negocio	Visión de Plataforma	Contexto de negocio