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.
- Cree un archivo
.env.localen la raíz del proyecto. - Añada sus URLs de webhook, por ejemplo:
NEXT_PUBLIC_N8N_LIVENESS_WEBHOOK="https://tu-n8n.com/webhook/liveness" - 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);
}
}