Puente: De la Cámara a la Lógica

Paso 5 de 11

Tener el valor del código (ej: "SKU-9920") es solo el principio. El verdadero reto es qué hacer con él. En una arquitectura profesional, el escáner no toma decisiones; solo emite datos.

El Patrón “Observer”

Tu componente de cámara debe ser un “emisor”. Cuando detecta algo, delega la responsabilidad a un controlador superior.

Detección

El hardware procesa los frames buscando patrones (QR/Barras).

// 🧱 src/components/scanner/CameraScanner.tsx
export const CameraScanner = ({ onDataDetected }) => {
  const handleBarCodeScanned = ({ data }) => {
    // 1. Emitir el dato al padre
    onDataDetected(data);
  };

  return <CameraView onBarcodeScanned={handleBarCodeScanned} ... />;
};

Estrategias de Integración

Dependiendo de tu app, el dato escaneado disparará diferentes flujos:

Búsqueda en API

Tomas el ID y haces un fetch a tu backend para obtener el nombre, precio e imagen del producto.

Deep Linking

Si el QR contiene una URL de tu app (myapp://products/123), usas Expo Router para navegar directamente.

Validación Local

Búsqueda rápida en un array local (útil para apps offline o tickets precargados).

Ejemplo: Búsqueda y Navegación

Este ejemplo muestra cómo unir el escaneo con la lógica de negocio en un Screen:

// src/app/(checkout)/scanner.tsx (Lógica de Navegación)
import { router } from 'expo-router';
import { useProductStore } from '@/lib/modules/products/store';

const ScanScreen = () => {
  const { fetchProduct } = useProductStore();

  const handleData = async (code: string) => {
    try {
      // 1. Buscamos el producto en nuestro cerebro (Lib/Modules)
      const success = await fetchProduct(code);

      if (success) {
        // 2. Si existe, navegamos al detalle
        router.push(`/products/${code}`);
      }
    } catch (error) {
      Alert.alert("Error", "Código no registrado en el sistema");
    }
  };

  return <CameraScanner onDataDetected={handleData} />;
};