N8N: Automatizaciones, Workflows e IA para Desarrolladores

N8N: Automatizaciones, Workflows e IA para Desarrolladores

Cuando escuchamos hablar de automatizaciones, muchos pensamos en Zapier, Make o en scripts caseros con cron jobs. Pero en los últimos años, N8N ha ido ganando terreno como una de las herramientas más potentes y flexibles para construir workflows inteligentes que no solo conectan servicios, sino que también integran IA, agentes autónomos y lógica personalizada con código.

Prepárate, porque aquí no hablamos solo de arrastrar cajitas: vamos a ver ejemplos con código, integración con agentes de IA y comparaciones entre tiempo de decisión y carga cognitiva en el diseño de workflows.

¿Qué es N8N y por qué debería importarte?

N8N (pronunciado n-eight-n) es una herramienta de automatización de código abierto que te permite conectar APIs, servicios web y scripts propios en flujos visuales.

  • No estás limitado a un set cerrado de integraciones: puedes crear tus propios nodos en JavaScript.
  • Es self-hosted: tienes el control de tus datos y tu infraestructura.
  • Ofrece un modo “low-code” para usuarios no técnicos, pero a la vez se adapta perfectamente a quienes queremos meter las manos en el código.

Primeros pasos con N8N ⚡

Instalación con npm

npm install n8n -g
n8n start

Esto te abre un panel en http://localhost:5678 desde donde ya puedes empezar a crear tus primeros workflows.

Instalación con Docker

version: "3"
services:
  n8n:
    image: n8nio/n8n
    ports:
      - "5678:5678"
    environment:
      - GENERIC_TIMEZONE=Europe/Madrid
    volumes:
      - ~/.n8n:/home/node/.n8n

Construyendo tu primer workflow en N8N 🛠️

Caso práctico: automatizar un flujo con APIs y Google Sheets

Imagina que quieres crear un flujo donde:

  1. Cada vez que alguien rellena un formulario en tu web,
  2. Los datos se envían a un Google Sheet,
  3. Y además recibes una notificación en Slack.

Ejemplo de lógica en un nodo Function

// Prompt enviado al nodo OpenAI
Clasifica este email en una de las siguientes categorías:
- Soporte
- Ventas
- Spam
Texto: {{$json["text"]}}

Integrando N8N con IA y agentes autónomos

Ejemplo: un agente que clasifica correos

  1. Un IMAP Node revisa tu bandeja de entrada.
  2. Un OpenAI Node clasifica el correo: “soporte”, “ventas”, “spam”.
  3. Según la categoría, se crea un ticket en Jira o se mueve a una carpeta.
// Nodo "Function" en N8N
return [
  {
    json: {
      nombre: $json["name"],
      email: $json["email"],
      fecha: new Date().toISOString(),
    }
  }
];

Comparando tiempo de decisión vs carga cognitiva 🧠

En un flujo manual (ej. revisar correos, copiar datos, pegar en Excel), el tiempo de decisión es enorme: cada acción depende de tu atención.

Con un workflow en N8N, reduces la carga cognitiva: no necesitas pensar en cada paso, solo en diseñar la lógica inicial.

Snippets para inspirarte como desarrolladora

Ejemplo: consumir una API REST desde N8N


// Configuración en nodo HTTP Request
{
  "url": "https://api.openweathermap.org/data/2.5/weather?q=Barcelona&appid=API_KEY",
  "method": "GET"
}
// Nodo Function
return [
  {
    json: {
      ciudad: $json["name"],
      temperatura: $json["main"]["temp"] - 273.15,
      clima: $json["weather"][0]["description"]
    }
  }
];

Ejemplo: workflow para generación de resúmenes con IA

// Prompt en nodo OpenAI
Resume el siguiente texto en 3 puntos clave:
{{$json["content"]}}

Consejos avanzados para trabajar con N8N

Usa Variables Globales

Puedes definir credenciales y variables de entorno que se reutilizan en todos tus flujos.

Versionado de workflows

N8N permite exportar tus flujos en JSON. Súbelos a GitHub y tendrás control de versiones.

Extiende con tus propios nodos

class MiNodoPersonalizado {
  async execute() {
    return this.helpers.returnJsonArray([{ saludo: "Hola desde mi nodo" }]);
  }
}

Preguntas frecuentes (FAQs)

¿N8N es gratis?

Sí, es open-source bajo licencia Apache 2.0. Puedes usarlo en local gratis. Si quieres una versión en la nube gestionada, existe n8n.cloud de pago.

¿Necesito saber programar para usar N8N?

No estrictamente. Puedes crear workflows solo con nodos visuales. Pero si sabes programar, tu poder se multiplica porque puedes extender y personalizar cada flujo.

¿Qué diferencia a N8N de Zapier o Make?

Principalmente: flexibilidad, control de datos y posibilidad de extender con código propio. Zapier/Make son más fáciles al inicio, pero N8N te da el control real.

¿El siguiente paso en tu desarrollo: crear o delegar?

Trabajar con N8N es como pasar de ser un operador manual a ser una arquitecta de procesos. Te da el control de cómo se conectan tus sistemas, cómo colaboran tus agentes de IA y cómo se libera tu mente de tareas repetitivas.

En ese balance entre tiempo de decisión y carga cognitiva, N8N se convierte en un aliado estratégico para quienes queremos crear más, pensar mejor y automatizar con sentido.

Dark mode vs Light mode: cuándo usar cada uno y cómo implementarlos

como experta diseñadora gráfica genera una imagen para el blog martagonzalez.dev para el post titulado: Dark mode vs Light mode: cuándo usar cada uno y cómo implementarlos

¿Qué es realmente el Dark Mode y el Light Mode?

El modo claro (light mode) es la convención clásica: fondos claros y texto oscuro.

El modo oscuro (dark mode) invierte esta lógica: fondos oscuros y texto claro.
Pero no se trata solo de cambiar colores. Un buen dark mode necesita contrastes adecuados,
una paleta optimizada y una jerarquía visual clara.

Piensa que no es simplemente “dar vuelta” el esquema de colores, sino rediseñar la experiencia.

Dark mode vs Light mode: ventajas y desventajas

Ventajas del Dark Mode

  • Reduce fatiga visual en entornos oscuros.
  • Mejora la autonomía en pantallas OLED.
  • Aporta estética moderna y elegante.

Desventajas del Dark Mode

  • Peor legibilidad en textos largos.
  • Puede aumentar la carga cognitiva si los contrastes son malos.

Ventajas del Light Mode

  • Excelente para lectura prolongada.
  • Más familiar para la mayoría de usuarios.
  • Contraste y jerarquía más fáciles de gestionar.

Desventajas del Light Mode

  • En la oscuridad produce deslumbramiento.
  • Puede parecer menos sofisticado en ciertas interfaces.

¿Cuándo usar cada uno?

La clave no es cuál es mejor, sino cuál es mejor para tu contexto.

Casos ideales para Light Mode

  • Blogs y periódicos digitales.
  • Aplicaciones educativas o de lectura intensiva.
  • Herramientas de oficina (documentos, hojas de cálculo).

Casos ideales para Dark Mode

  • Aplicaciones creativas (editores de código, diseño, música).
  • Apps de entretenimiento (Netflix, YouTube, Spotify).
  • Interfaces para uso nocturno o en ambientes oscuros.

La mejor opción: dar ambas posibilidades

Lo más recomendable es implementar un sistema dual y permitir que el usuario elija.
Esto reduce la carga cognitiva porque no impones un estilo,
sino que das libertad.

Cómo implementar Dark Mode y Light Mode

Aquí te muestro diferentes formas de hacerlo en proyectos web,
desde lo más sencillo en CSS hasta integraciones en React y Tailwind.

1) Detectar preferencia del sistema con CSS

 

/* Light por defecto */
body {
    background-color: #ffffff; 
    color: #222222; 
    } 
/* Dark automático */ 
@media (prefers-color-scheme: dark) { body { 
        background-color: #121212; 
        color: #f1f1f1; 
    } 
}

2) Toggle manual con JavaScript

const btn = document.getElementById('toggle-theme'); btn.addEventListener('click', () => { document.body.classList.toggle('dark'); localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light' ); });

3) Dark Mode con Tailwind CSS

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  theme: { extend: {} },
};

<div class="bg-white text-black dark:bg-gray-900 dark:text-white">
  <h1>Hola Mundo</h1>
</div>

4) Toggle en React

<code class=»language-tsx»>const [theme, setTheme] = useState( localStorage.getItem(‘theme’) || ‘light’ ); useEffect(() => { document.body.className = theme; localStorage.setItem(‘theme’, theme); }, [theme]); </code>

Buenas prácticas

Contraste adecuado

Evita el negro puro #000 y el blanco puro #fff.
Usa tonos suaves como #121212 y #f9f9f9.

Colores de acento

En dark mode, los colores vibran más. Ajusta saturación para evitar cansancio visual.

Imágenes e iconos

Asegúrate de que tus ilustraciones y logos tengan versión para ambos modos.

Preguntas frecuentes

¿El dark mode es siempre mejor para la vista?

No. Es útil en entornos oscuros, pero puede cansar en lecturas largas.

¿Debo implementar ambos modos en mi web?

Sí, si tu producto se usa en contextos variados (blogs, apps de productividad, e-learning).

¿El dark mode afecta al SEO?

No directamente. Pero mejora la experiencia del usuario y eso ayuda al posicionamiento.


Ofrecer ambas opciones es sencillo hoy en día y aporta comodidad, accesibilidad
y personalización. Al final, lo importante no es qué prefiero yo, sino qué le da
a tu usuario una mejor experiencia.

Cómo desplegar tu aplicación de React + Vite en GitHub Pages

🚀 Cómo desplegar tu aplicación de React + Vite en GitHub Pages

Publicar tu app en GitHub Pages es una forma rápida y gratuita de mostrar tus proyectos front-end. En esta guía te explico, paso a paso, cómo hacerlo desde un proyecto creado con React y Vite.

Requisitos previos

  • Proyecto creado con React + Vite.
  • Repositorio en GitHub con tu código.
  • Node.js y terminal operativos.

Nota: GitHub Pages sirve sitios estáticos (HTML/CSS/JS); no ejecuta código de servidor.

Configura la ruta base en vite.config.ts o vite.config.js

Vite necesita saber desde qué ruta se servirá tu sitio en producción. Para repositorios de proyecto
(https://TU_USUARIO.github.io/NOMBRE_DEL_REPO/), define base con esa URL.

Ejemplo: vite.config.ts


import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
  plugins: [react()],
  base: 'https://TU_USUARIO.github.io/NOMBRE_DEL_REPO/',
})

Si usas un User/Org Page (repositorio llamado TU_USUARIO.github.io), la base suele ser '/':

export default defineConfig({
  plugins: [react()],
  base: '/',
})

Instala y prepara gh-pages

  1. Instala la dependencia:

    npm install --save-dev gh-pages
  2. Añade scripts en package.json:

    {
      "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview",
        "deploy": "npm run build && gh-pages -d dist"
      }
    }

    El script deploy compila tu app y publica la carpeta dist en la rama gh-pages.

Despliega tu app

  1. Ejecuta el despliegue:

    npm run deploy
  2. Activa GitHub Pages: en tu repositorio, ve a Settings > Pages y selecciona la rama gh-pages (carpeta raíz).

  3. Verifica la URL final:

    https://TU_USUARIO.github.io/NOMBRE_DEL_REPO/

Resumen rápido

Paso Acción
1 Definir base en Vite según tu tipo de página (User/Org o Project).
2 Instalar gh-pages.
3 Añadir scripts build y deploy en package.json.
4 Ejecutar npm run deploy.
5 Configurar GitHub Pages para usar la rama gh-pages.
6 Comprobar la URL publicada.

Rutas con React Router (SPA)

GitHub Pages no soporta el history API del navegador sin configuración extra. Tienes dos alternativas:

  1. Usar HashRouter (recomendado por simplicidad):

    import { HashRouter, Routes, Route } from 'react-router-dom'
    export function App() {
      return (
        <HashRouter>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
          </Routes>
        </HashRouter>
      )
    }
  2. Mantener BrowserRouter y añadir una 404.html que redirija a index.html (más avanzado). Para la mayoría de casos, HashRouter es suficiente.

Problemas comunes y soluciones

  • 404 Not Found / rutas rotas: usa HashRouter o configura una 404.html que redirija a index.html.

  • Recursos (CSS/JS) sin cargar: comprueba que base termina en / y apunta a la URL correcta.

  • La página no actualiza tras desplegar: puede ser la caché. Fuerza recarga (Ctrl/Cmd + Shift + R) o espera unos minutos a la propagación.

  • Error de permisos al publicar: verifica que el repositorio no es privado (o que tu configuración de Pages permite despliegue desde gh-pages).

  • Rama gh-pages no aparece: se crea en el primer npm run deploy. Si falla, revisa el log del comando.

Checklist final

  • He configurado base correctamente según el tipo de página.
  • La app compila sin errores con npm run build.
  • Las rutas funcionan (preferiblemente con HashRouter).
  • GitHub Pages está activado apuntando a gh-pages.
  • La URL final carga estilos, imágenes y navegación.