Pantalla: Escaneo de Codigo de Barras
Identificador: SCR-CAT-006
Modulo: MTS-CAT-001 - Catalogo de Medicamentos
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
Estado: Especificado
FASE: 2 - Value
| Atributo |
Valor |
| Nombre |
Escaneo de Codigo de Barras |
| Proposito |
Busqueda rapida de medicamentos escaneando codigo EAN/UPC |
| Tipo |
Full Screen Modal |
| Acceso |
SCR-CAT-001 > Icono camara |
| Prioridad |
Media |
2. Wireframe ASCII
2.1. Estado: Escaneando
+------------------------------------------+
| [X] |
+------------------------------------------+
| |
| |
| ┌─────────────────────────────────┐ |
| │ │ |
| │ │ |
| │ │ |
| │ ┌───────────────────────┐ │ |
| │ │ │ │ |
| │ │ [ VIEWFINDER ] │ │ |
| │ │ │ │ |
| │ │ ═══════════════════ │ │ |
| │ │ │ │ |
| │ └───────────────────────┘ │ |
| │ │ |
| │ │ |
| │ │ |
| └─────────────────────────────────┘ |
| |
| Apunta al codigo de barras del empaque |
| |
| ┌─────────────────────────────────────┐ |
| │ [🔦 Flash] [📷 Galeria] │ |
| └─────────────────────────────────────┘ |
| |
| Formatos soportados: |
| EAN-13, EAN-8, UPC-A, UPC-E, Code128 |
| |
+------------------------------------------+
2.2. Estado: Codigo Detectado (Procesando)
+------------------------------------------+
| [X] |
+------------------------------------------+
| |
| ┌─────────────────────────────────┐ |
| │ │ |
| │ ┌───────────────────────┐ │ |
| │ │ │ │ |
| │ │ [ VIEWFINDER ] │ │ |
| │ │ ✓ Detectado │ │ |
| │ │ ═══════════════════ │ │ |
| │ │ │ │ |
| │ └───────────────────────┘ │ |
| │ │ |
| └─────────────────────────────────┘ |
| |
| ┌─────────────────────────────────────┐ |
| │ Codigo: 7501234567890 │ |
| │ │ |
| │ ⏳ Buscando... │ |
| │ │ |
| └─────────────────────────────────────┘ |
| |
+------------------------------------------+
2.3. Estado: Medicamento Encontrado
+------------------------------------------+
| [X] |
+------------------------------------------+
| |
| ┌─────────────────────────────────────┐ |
| │ │ |
| │ ┌─────────────────┐ │ |
| │ │ ✓ │ │ |
| │ │ Encontrado │ │ |
| │ └─────────────────┘ │ |
| │ │ |
| │ ───────────────────────────────── │ |
| │ │ |
| │ 💊 Metformina 850mg │ |
| │ Tableta | Via oral │ |
| │ Generico │ |
| │ │ |
| │ Laboratorio: Merck │ |
| │ Codigo: 7501234567890 │ |
| │ │ |
| │ ───────────────────────────────── │ |
| │ │ |
| │ +─────────────────────────────────+│ |
| │ │ Ver ficha completa ││ |
| │ +─────────────────────────────────+│ |
| │ │ |
| │ [Escanear otro] │ |
| │ │ |
| └─────────────────────────────────────┘ |
| |
+------------------------------------------+
2.4. Estado: No Encontrado
+------------------------------------------+
| [X] |
+------------------------------------------+
| |
| ┌─────────────────────────────────────┐ |
| │ │ |
| │ ┌─────────────────┐ │ |
| │ │ ❌ │ │ |
| │ │ No encontrado │ │ |
| │ └─────────────────┘ │ |
| │ │ |
| │ ───────────────────────────────── │ |
| │ │ |
| │ Codigo escaneado: │ |
| │ 7509876543210 │ |
| │ │ |
| │ No encontramos este codigo en │ |
| │ nuestra base de datos. │ |
| │ │ |
| │ Opciones: │ |
| │ │ |
| │ +─────────────────────────────────+│ |
| │ │ + Agregar como personalizado ││ |
| │ +─────────────────────────────────+│ |
| │ │ |
| │ [Intentar de nuevo] │ |
| │ [Buscar por nombre] │ |
| │ │ |
| └─────────────────────────────────────┘ |
| |
+------------------------------------------+
2.5. Estado: Sin Permiso de Camara
+------------------------------------------+
| [X] |
+------------------------------------------+
| |
| ┌─────────────────────────────────────┐ |
| │ │ |
| │ ┌─────────────────┐ │ |
| │ │ 📷 │ │ |
| │ │ │ │ |
| │ └─────────────────┘ │ |
| │ │ |
| │ Permiso de camara requerido │ |
| │ │ |
| │ Para escanear codigos de barras, │ |
| │ necesitamos acceso a tu camara. │ |
| │ │ |
| │ +─────────────────────────────────+│ |
| │ │ Permitir acceso a camara ││ |
| │ +─────────────────────────────────+│ |
| │ │ |
| │ [Buscar por nombre en su lugar] │ |
| │ │ |
| └─────────────────────────────────────┘ |
| |
+------------------------------------------+
3. Componentes UI
3.1. Camera Viewfinder
| Propiedad |
Valor |
| Componente |
CMP-CAT-015 (CameraViewfinder) NUEVO |
| Aspect ratio |
16:9 o device ratio |
| Overlay |
Rectangulo de escaneo |
| Animacion |
Linea de scan pulsante |
| Border |
Esquinas redondeadas |
3.2. Scan Result Card
| Propiedad |
Valor |
| Componente |
CMP-CAT-016 (ScanResultCard) NUEVO |
| Estados |
success, not_found, searching |
| Icono |
Check / X / Spinner |
| Contenido |
Codigo + medicamento |
| Propiedad |
Valor |
| Flash |
Toggle icon button |
| Gallery |
Icon button a galeria |
| Close |
X en header |
3.4. Medication Preview Card
| Propiedad |
Valor |
| Similar a |
CMP-CAT-007 (MedicationResultCard) |
| Extra |
Codigo de barras mostrado |
| Accion |
"Ver ficha completa" |
4. Comportamientos
4.1. Flujo de Escaneo
flowchart TD
A[Abrir escaner] --> B{Permiso camara?}
B -->|No| C[Solicitar permiso]
C --> D{Otorgado?}
D -->|No| E[Mostrar alternativa]
D -->|Si| F[Activar camara]
B -->|Si| F
F --> G[Detectar codigo]
G --> H{Codigo valido?}
H -->|No| I[Ignorar, seguir escaneando]
I --> G
H -->|Si| J[Buscar en BD]
J --> K{Encontrado?}
K -->|Si| L[Mostrar resultado]
K -->|No| M[Mostrar no encontrado]
L --> N{Accion?}
N -->|Ver ficha| O[SCR-CAT-003]
N -->|Escanear otro| F
M --> P{Accion?}
P -->|Agregar personalizado| Q[Formulario]
P -->|Intentar de nuevo| F
P -->|Buscar nombre| R[SCR-CAT-001]
4.2. Gestos
| Gesto |
Elemento |
Accion |
| Tap |
Flash |
Toggle flash |
| Tap |
Gallery |
Seleccionar imagen |
| Tap |
Close |
Cerrar escaner |
| Tap |
Ver ficha |
SCR-CAT-003 |
| Tap |
Escanear otro |
Reset escaner |
| Tap |
Agregar personal |
Formulario personalizado |
| Formato |
Descripcion |
Digitos |
| EAN-13 |
Europa, Latam |
13 |
| EAN-8 |
Productos pequenos |
8 |
| UPC-A |
USA, Canada |
12 |
| UPC-E |
USA comprimido |
8 |
| Code128 |
Industrial |
Variable |
4.4. Manejo de Galeria
flowchart TD
A[Tap galeria] --> B[Abrir picker]
B --> C{Imagen seleccionada?}
C -->|No| D[Cancelar]
C -->|Si| E[Procesar imagen]
E --> F{Codigo detectado?}
F -->|Si| G[Buscar en BD]
F -->|No| H[Error: no se detecto codigo]
H --> I[Volver a camara]
5. Datos Requeridos
interface ScannerScreenData {
// Estado de permisos
cameraPermission: 'granted' | 'denied' | 'not_determined';
// Estado del flash
flashEnabled: boolean;
flashAvailable: boolean;
// Resultado actual
scanResult?: ScanResult;
}
interface ScanResult {
code: string;
format: 'EAN13' | 'EAN8' | 'UPCA' | 'UPCE' | 'CODE128';
status: 'searching' | 'found' | 'not_found';
medication?: MedicationPreview;
}
interface MedicationPreview {
id: string;
name: string;
form: string;
route: string;
type: string;
manufacturer?: string;
}
5.2. Output Events
| Evento |
Payload |
Destino |
| onCodeDetected |
code, format |
Buscar API |
| onMedicationSelect |
medication_id |
SCR-CAT-003 |
| onAddCustom |
code |
Agregar personalizado |
| onFlashToggle |
enabled |
Toggle flash |
| onGallerySelect |
image |
Procesar imagen |
| onClose |
- |
Cerrar |
| onRetry |
- |
Reset |
6. Accesibilidad
6.1. Labels
| Elemento |
accessibilityLabel |
| Viewfinder |
"Camara para escanear codigo de barras" |
| Flash |
"Flash {activado/desactivado}" |
| Gallery |
"Seleccionar imagen de galeria" |
| Close |
"Cerrar escaner" |
| Result |
"Medicamento encontrado: {nombre}" |
6.2. Screen Reader
| Evento |
Anuncio |
| Codigo detectado |
"Codigo detectado, buscando" |
| Encontrado |
"Encontrado: {nombre}" |
| No encontrado |
"Codigo no encontrado en base de datos" |
| Permiso denegado |
"Se requiere permiso de camara" |
7. Metricas
7.1. Analytics Events
| Evento |
Parametros |
| screen_view |
screen_name: "barcode_scanner" |
| scan_start |
source |
| scan_success |
code, format, medication_id |
| scan_not_found |
code, format |
| scan_permission_denied |
- |
| flash_toggle |
enabled |
| gallery_select |
- |
| add_custom_from_scan |
code |
8. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)