Instrucciones de Uso

Aprenda cómo personalizar fácilmente la apariencia y la funcionalidad de esta aplicación de demostración.

Cambiar el Logo

Para cambiar el logo que se muestra en la barra lateral, edite el archivo src/components/app-sidebar.tsx. Localice el componente Image y reemplace la propiedad src con la URL de su propio logo.

/* src/components/app-sidebar.tsx */
  import Image from 'next/image';

  export function AppSidebar() {
    return (
      <SidebarHeader>
        <Link href="/">
          <Image
            src="URL_DE_TU_LOGO_AQUI" // <- Cambia esta URL
            width={120}
            height={40}
            alt="Tu Logo"
            className="w-auto h-auto"
          />
        </Link>
      </SidebarHeader>
      // ...
    );
  }
Personalizar Colores

La paleta de colores de la aplicación se define mediante variables CSS en src/app/globals.css. Puede cambiar los colores principales modificando los valores HSL (Tono, Saturación, Luminosidad).

/* src/app/globals.css */
  :root {
    --background: 220 13% 96%; /* Gris Claro */
    --sidebar-background: 211 71% 17%; /* Azul Oscuro */
    --primary: 173 96% 42%; /* Verde azulado brillante */
    /* ... otras variables de color ... */
  }
Conexión a Webhooks de n8n

Cada prueba de verificación puede conectarse a un webhook de n8n para procesar los datos. Recomendamos usar variables de entorno para gestionar las URLs de los webhooks.

  1. Cree un archivo .env.local en la raíz del proyecto.
  2. Añada sus URLs de webhook, por ejemplo: NEXT_PUBLIC_N8N_LIVENESS_WEBHOOK="https://tu-n8n.com/webhook/liveness"
  3. En el componente de la prueba correspondiente (p. ej., src/components/liveness-check.tsx), acceda a la variable de entorno y úsela para realizar la llamada de red como se muestra en el ejemplo.
// En el componente de la página, ej: /components/liveness-check.tsx
  // 1. Defina la URL del webhook (preferiblemente desde variables de entorno)
  const N8N_LIVENESS_WEBHOOK_URL = process.env.NEXT_PUBLIC_N8N_LIVENESS_WEBHOOK || 'URL_DEL_WEBHOOK_POR_DEFECTO';

  // 2. Dentro de una función que maneja la verificación
  async function performVerification(imageData) {
    try {
      const response = await fetch(N8N_LIVENESS_WEBHOOK_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ imageData: imageData }),
      });
      
      if (!response.ok) {
        throw new Error('La respuesta del webhook no fue exitosa');
      }

      const result = await response.json();
      // ... procesar el resultado del webhook
    } catch (error) {
      console.error('Error al llamar al webhook:', error);
    }
  }