¡Hola y bienvenido/a de nuevo! En esta lección, vamos a pasar a la práctica y a construir el primer y más importante nodo de nuestro flujo de trabajo: el disparador (trigger). Este nodo es el que iniciará toda nuestra automatización.
Lo primero es acceder a nuestra instancia de n8n. Una vez dentro, vamos a empezar a construir.»
(Paso a Paso en n8n)
«Paso 1: Crear el Flujo de Trabajo (Workflow)
Dentro de mi panel de n8n, voy a crear un nuevo flujo de trabajo desde cero. Le daré un nombre descriptivo para encontrarlo fácilmente más tarde, por ejemplo: ‘NanoBanana AI Agent’.
Paso 2: Añadir el Nodo Disparador (Trigger)
Nuestro primer nodo será el que activa todo el proceso. Hacemos clic para añadir un nuevo nodo y buscamos el disparador llamado ‘On Form Submission’. Este nodo especial crea un formulario web que, cuando un usuario lo rellena y lo envía, pone en marcha toda la secuencia de acciones que definiremos a continuación.
Paso 3: Configurar los Detalles del Formulario
Ahora vamos a configurar la información que verá el usuario.
- En ‘Form Title’ (Título del Formulario), escribimos algo claro como: ‘Generador de Imágenes de Moda con IA‘.
- En ‘Form Description’ (Descripción), podemos explicar brevemente qué hace la herramienta. Un buen truco es que este campo soporta HTML básico para darle formato. Escribiré algo como:
Un workflow con IA, Nano Banana y n8n que convierte imágenes de ropa en fotos de modelos de alta calidad, ahorrando tiempo y costes.
Paso 4: Añadir los Campos (Fields) del Formulario
Necesitamos que el usuario nos proporcione dos cosas: la imagen de la prenda y el prompt. Para ello, vamos a añadir dos ‘elementos de formulario’ o campos:
- El Campo de Imagen:
- Hacemos clic en ‘Add Form Element’.
- En ‘Field Name’ (Nombre del Campo), lo llamaremos
imagen. Este será el nombre interno de la variable. - En ‘Field Type’ (Tipo de Campo), elegimos ‘File’ (Archivo).
- Muy importante: Desactivamos la opción ‘Allow Multiple Files’, ya que solo queremos procesar una imagen a la vez.
- Marcamos la casilla ‘Required’ (Obligatorio) para asegurarnos de que el usuario no pueda enviar el formulario sin una imagen.
- Podemos dejar los tipos de archivo aceptados por defecto, como JPG o PNG.
- El Campo de Texto (Prompt):
- Volvemos a hacer clic en ‘Add Form Element’.
- En ‘Field Name’, lo llamaremos
prompt. - En ‘Field Type’, seleccionamos ‘Text’ (Texto).
- En ‘Placeholder’, podemos escribir un ejemplo para guiar al usuario. Por ejemplo:
Una actriz india llevando este vestido, pose de cuerpo completo.Esto ayuda a que el usuario sepa qué tipo de texto esperamos. - Marcamos también este campo como ‘Required’.
Paso 5: Probar el Formulario
¡Perfecto! Con nuestro formulario creado, es hora de probarlo. Hacemos clic en ‘Execute Node’ (Ejecutar Nodo). n8n nos abrirá una nueva pestaña con el formulario tal y como lo vería un usuario.
Ahora, simularemos ser el cliente:
- Hacemos clic en ‘Choose File’ y seleccionamos una imagen de una prenda.
- Escribimos un prompt de ejemplo:
Una actriz india llevando este vestido, sentada en un sofá con un fondo liso. - Hacemos clic en ‘Submit’.
Al volver a n8n, veremos que el nodo se ha ejecutado correctamente y tenemos una salida de datos. Si la exploramos, veremos la información en formato JSON: un objeto imagen con los datos del archivo y un objeto prompt con el texto que hemos escrito. ¡Incluso podemos previsualizar la imagen haciendo clic en ‘View’!»
(Cierre)
«¡Genial! Nuestro punto de partida ya está funcionando. Hemos creado con éxito la puerta de entrada a nuestra automatización.
En la siguiente lección, conectaremos el siguiente nodo, que se encargará de tomar esta imagen que hemos recibido y subirla a un servicio en la nube para poder trabajar con ella. ¡Nos vemos allí!