¿Qué tan bueno es tu equipo de Pokemon? Un workflow n8n que te da las claves

nov. 1, 2025

En artículos anteriores hemos explorado los fundamentos de n8n, desde su configuración inicial hasta los diferentes tipos de nodos y mejores prácticas profesionales. Ahora es momento de dar un paso más allá y trabajar con conceptos intermedios que encontrarás constantemente en automatizaciones del mundo real.

En esta ocasión construiremos un analizador de equipos Pokémon que demuestra patrones esenciales como el procesamiento de múltiples elementos, la transformación de datos complejos provenientes de APIs, y la combinación de información de diferentes fuentes. Aunque el tema es lúdico, los conceptos que aprenderás se aplican directamente a casos de uso empresariales como el enriquecimiento de datos de clientes, análisis de inventarios, o agregación de métricas.

Prueba la aplicación: Puedes experimentar la herramienta final en funcionamiento visitando pokeanalyzer.betazeta.dev antes de construir tu propio workflow.

El desafío: trabajar con datos complejos de APIs

La mayoría de las APIs modernas no devuelven datos simples y planos. En su lugar, entregan estructuras JSON anidadas con arrays, objetos dentro de objetos, y referencias a otros endpoints. Este es precisamente el escenario que enfrentarás al trabajar con PokéAPI, una API gratuita y bien documentada que proporciona información exhaustiva sobre el universo Pokémon.

Un ejemplo de respuesta de PokéAPI para un Pokémon individual incluye:

  {
    "name": "charizard",
    "stats": [
      { "base_stat": 78, "stat": { "name": "hp" } },
      { "base_stat": 84, "stat": { "name": "attack" } },
      { "base_stat": 78, "stat": { "name": "defense" } }
    ],
    "types": [
      { "type": { "name": "fire" } },
      { "type": { "name": "flying" } }
    ],
    "abilities": [
      { "ability": { "name": "blaze" } }
    ]
  }
   

Este nivel de complejidad requiere técnicas específicas para extraer, transformar y analizar la información útil. Veamos cómo construir un workflow que maneje esto de forma elegante.

Arquitectura del workflow

Nuestro analizador de equipos Pokémon seguirá esta estructura modular accesible vía webhook:

Diagrama de flujo del workflow “Analizador de Equipo Pokémon Web” creado en n8n. Se muestran las entradas “Webhook (POST) /pokemon-team-analyzer” y “Manual Trigger”, ambas conectadas al nodo “Code: Preparar Input”. Este se enlaza con “Split In Batches: Loop Over Items”, que a su vez se divide en dos rutas: una ejecuta la petición “HTTP Request: PokéAPI /pokemon/{name}” seguida de “Code: Transformar Datos”, y la otra continúa con “Code: Analizar Equipo (agregado)”, “Edit Fields: Formatear Salida” y “Respond to Webhook”.

Esta arquitectura nos permite:

• Recibir peticiones externas mediante un webhook HTTP POST
• Procesar múltiples Pokémon de forma iterativa sin duplicar nodos
• Transformar datos complejos en estructuras manejables
• Agregar información de múltiples llamadas API
• Responder automáticamente con el análisis completo en formato JSON

Captura del editor de n8n mostrando el flujo “Analizador de Equipo Pokémon Web” con nodos “Manual Trigger” y “Webhook” que alimentan “Preparar Input”; un bucle “Loop Over Items” conecta con “Obtener Datos Pokémon” → “Transformar Datos” y con “Analizar Equipo” → “Formatear Salida” → “Respond to Webhook”. Se ve el botón “Execute workflow from Webhook” y el estado “Active” en la parte superior.

Construyendo el workflow paso a paso

Paso 1: Configurar el webhook y preparar el input

Comenzaremos con dos puntos de entrada: un Webhook para recibir peticiones HTTP desde aplicaciones externas, y un Manual Trigger para pruebas durante el desarrollo. Ambos se conectan al nodo Code (Preparar Input).

Configuración del nodo Webhook:

• HTTP Method: POST
• Path: pokemon-team-analyzer
• Options → Allowed Origins: La URL de tu aplicación desplegada en netlify (https://pokemon-team-analyzer.netlify.app) o “*” para admitir todos los orígenes (sólo para pruebas).
• Respond: Using 'Respond to Webhook' Node

El webhook espera recibir un JSON con este formato:

  {
    "names": ["charizard", "blastoise", "venusaur", "pikachu", "gengar", "dragonite"]
  }
   

Configuración del nodo Code (Preparar Input):

El código de este nodo extrae el array de nombres del JSON recibido, valida que haya entre 2 y 6 Pokémon, normaliza los nombres (minúsculas, sin espacios), y los convierte al formato de items que n8n espera para la iteración.

📦 Código completo: Tienes el archivo workflow.json completo con el código fuente en el repositorio de GitHub

Paso 2: Iterar sobre el equipo con Loop Over Items

El nodo Loop Over Items (antiguamente Split In Batches en n8n) es clave para workflows intermedios. Nos permite procesar cada elemento de un array de forma secuencial, ejecutando los nodos siguientes una vez por cada item.

Configuración:

• Mantén la configuración por defecto, que procesará cada item automáticamente
• Este nodo tiene dos salidas: la primera (loop) ejecuta el procesamiento iterativo, la segunda (done) se activa cuando todos los items han sido procesados

Cómo funciona el loop:

1. La salida loop (inferior) procesa cada Pokémon individualmente
2. Los datos transformados regresan al nodo Loop cerrando el ciclo
3. Cuando termina, la salida done (superior) envía todos los resultados al análisis agregado

Paso 3: Consultar PokéAPI para cada Pokémon

Ahora usaremos un nodo HTTP Request para obtener los datos de cada Pokémon desde la API.

Configuración del HTTP Request:

• Method: GET
• URL: https://pokeapi.co/api/v2/pokemon/{{ $json.pokemon_name }}
• Options → Response → Response Format: JSON

La expresión {{ $json.pokemon_name }} se reemplazará automáticamente con el nombre de cada Pokémon durante la iteración. Por ejemplo, en la primera vuelta será charizard, en la segunda blastoise, y así sucesivamente.

Paso 4: Transformar los datos complejos

La respuesta de PokéAPI es extensa (más de 100 líneas de JSON). Necesitamos extraer solo la información relevante en un nodo Code.

Qué hace este nodo:

• Valida que los datos de PokéAPI existan
• Aplana las estadísticas de arrays anidados a objetos simples
• Extrae tipos, habilidades y sprites
• Calcula el total de estadísticas
• Usa operadores null-safe (?., ??) para evitar errores

Paso 5: Agregar datos del equipo completo

Después del Loop, necesitamos agregar todos los Pokémon procesados para analizar el equipo como conjunto. Este nodo Code se conecta a la salida “done” del Loop.

Qué hace este nodo:

• Normaliza el array de Pokémon recibido del loop
• Calcula promedios de estadísticas (HP, Attack, Defense, Speed, Total)
• Analiza cobertura de tipos únicos del equipo
• Identifica al Pokémon más fuerte (mayor total de stats)
• Identifica al Pokémon más rápido (mayor speed)
• Usa programación defensiva con funciones auxiliares safeStat

📦 Código completo: Tienes el archivo workflow.json completo con el código fuente en el repositorio de GitHub

Paso 6: Formatear la salida y responder al webhook

Usaremos dos nodos finales: Edit Fields (Formatear Salida) para estructurar los datos, y Respond to Webhook para enviar la respuesta HTTP.

Configuración del nodo Edit Fields:

• Mode: Define (using Assignments)
• Assignments:
  • title: Pokémon Team Analysis (tipo: String)
  • team_size: {{ $json.team_size }} (tipo: Number)
  • members: {{ $json.team_members.join(', ') }} (tipo: String)
  • stats: {{ $json.team_stats }} (tipo: String/Object)
  • highlights: {{ $json.highlights }} (tipo: String/Object)
  • type_coverage: {{ $json.type_coverage }} (tipo: String/Object)

Configuración del nodo Respond to Webhook:

• Respond With: All incoming items

Este último nodo cierra el ciclo del webhook, enviando automáticamente la respuesta HTTP con el análisis completo en formato JSON. Esto permite que aplicaciones externas (como frontends web, apps móviles, o scripts) consuman directamente el análisis.

Resultado en acción: ¿Quieres ver este workflow funcionando en tiempo real? Prueba la demo práctica en pokeanalyzer.betazeta.dev y analiza tu equipo favorito.

Probando el workflow y construyendo una interfaz web

Una vez construido el workflow completo, puedes probarlo de varias formas: mediante el Manual Trigger para desarrollo interno, o a través del webhook con herramientas como curl, Postman o tu propia aplicación web. Para hacer el analizador verdaderamente accesible, vamos a crear una interfaz web completa que consuma el webhook de n8n.

Captura de la interfaz web de Pokémon Team Analyzer. En la parte superior, se muestra un formulario para introducir hasta seis nombres de Pokémon y un botón “Analyze Team”. Debajo aparece la sección “Team Lineup” con seis Pokémon —Charizard, Mewtwo, Pikachu, Arceus, Rayquaza y Lucario— cada uno con su imagen, roles y estadísticas como velocidad, ataque y BST. En la parte inferior, se muestra una tarjeta con la puntuación global del equipo: 78, calificación B (Great), junto a indicadores de cobertura de tipos, Pokémon más rápido (Mewtwo con 130 SPD) y análisis de debilidades, destacando un doble riesgo frente a tipo volador.

Probando con curl (opción rápida)

Antes de construir la interfaz, verifica que el webhook funcione correctamente:

  curl -X POST https://tu-n8n-domain.com/webhook/pokemon-team-analyzer \
    -H "Content-Type: application/json" \
    -d '{
      "names": ["charizard", "blastoise", "venusaur", "pikachu", "gengar", "dragonite"]
    }'
   

Ejemplo de respuesta del webhook:

  [
    {
      "title": "Pokémon Team Analysis",
      "team_size": 3,
      "members": "charizard, blastoise, pikachu",
      "stats": "{\"avg_hp\":64,\"avg_attack\":74,\"avg_defense\":73,\"avg_speed\":89,\"avg_total\":461}",
      "highlights": "{\"strongest\":{\"name\":\"charizard\",\"total_stats\":534},\"fastest\":{\"name\":\"charizard\",\"speed\":100}}",
      "type_coverage": "{\"unique_types\":[\"fire\",\"flying\",\"water\",\"electric\"],\"coverage_count\":4,\"total_types\":4}",
      "detailed_members": [
        {
          "name": "charizard",
          "id": 6,
          "height": 17,
          "weight": 905,
          "stats": {
            "hp": 78,
            "attack": 84,
            "defense": 78,
            "special-attack": 109,
            "special-defense": 85,
            "speed": 100
          },
          "total_stats": 534,
          "types": [
            "fire",
            "flying"
          ],
          "abilities": [
            "blaze",
            "solar-power"
          ],
          "sprite": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/6.png",
          "artwork": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/6.png",
          "dream_world": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/6.svg"
        },
        {
          "name": "blastoise",
          "id": 9,
          "height": 16,
          "weight": 855,
          "stats": {
            "hp": 79,
            "attack": 83,
            "defense": 100,
            "special-attack": 85,
            "special-defense": 105,
            "speed": 78
          },
          "total_stats": 530,
          "types": [
            "water"
          ],
          "abilities": [
            "torrent",
            "rain-dish"
          ],
          "sprite": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/9.png",
          "artwork": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/9.png",
          "dream_world": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/9.svg"
        },
        ...
      ]
    }
  ]
   

Construyendo la aplicación web

La interfaz web consume el webhook de n8n mediante una aplicación HTML/JavaScript vanilla con Tailwind CSS. La implementación incluye un formulario de 6 campos para nombres de Pokémon, validación cliente (mínimo 2, máximo 6), y renderizado dinámico de resultados con estadísticas agregadas, cobertura de tipos y cards individuales de cada Pokémon con sus sprites oficiales.

El flujo de comunicación es directo:

  const res = await fetch('https://tu-n8n.com/webhook/pokemon-team-analyzer', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ names: ["charizard", "blastoise", ...] })
  });
   

La respuesta JSON del webhook se procesa para mostrar estadísticas del equipo, badges de colores por tipo (fuego=rojo, agua=azul), sprites animados, y estados de carga con spinners. El diseño es completamente responsivo (mobile, tablet, desktop) y maneja errores CORS y validaciones de forma elegante.

📦 Código completo: Tanto el workflow n8n (workflow.json) como la aplicación web completa index.html están disponibles en el repositorio de GitHub con instrucciones detalladas de despliegue.

n8n como backend serverless

Este patrón demuestra cómo usar n8n como un backend serverless completo, eliminando la necesidad de crear APIs tradicionales con Express, FastAPI o similar. El frontend estático puede desplegarse en Netlify, Vercel o GitHub Pages, mientras n8n maneja toda la lógica de negocio, validaciones y transformación de datos.

Conceptos clave aprendidos

Este workflow demuestra patrones intermedios esenciales que aplicarás constantemente en automatizaciones profesionales:

1. Webhooks como API endpoints: Convertir workflows n8n en servicios REST consumibles por cualquier aplicación
2. Procesamiento iterativo con loops: Usar Split In Batches para manejar arrays de datos de forma eficiente
3. Transformación de datos anidados: Convertir JSON complejo de APIs externas en estructuras simples y manejables
4. Agregación de datos: Combinar información de múltiples items procesados en un análisis consolidado
5. Programación defensiva: Usar operadores null-safe (?., ??) y validaciones para evitar errores en tiempo de ejecución
6. Uso estratégico del nodo Code: Para transformaciones complejas que otros nodos no pueden manejar eficientemente
7. Respuestas HTTP estructuradas: Formatear datos para consumo externo mediante Respond to Webhook
8. Separación frontend-backend: n8n como backend serverless consumido por frontends estáticos

Experimenta el ejemplo práctico: ¿Listo para ver estos conceptos en acción? Visita pokeanalyzer.betazeta.dev y descubre cómo el workflow que acabas de aprender analiza equipos Pokémon en tiempo real.

Aplicaciones en el mundo real

Los mismos principios de webhook → loop → transform → aggregate → respond se pueden aplicar a:

• Análisis de sentimiento masivo: Procesar reviews de productos, extraer sentimientos con IA, y agregar métricas
• Enriquecimiento de leads: Recibir lista de emails, consultar APIs de enriquecimiento y devolver perfiles completos
• Monitoreo de precios: Iterar sobre lista de URLs de productos, scrapear precios, calcular promedios y tendencias
• Validación de datos: Procesar CSVs grandes validando cada fila contra múltiples criterios y devolviendo reporte

Con estos fundamentos, estás equipado para construir automatizaciones profesionales que manejen datos complejos del mundo real. Los mismos principios de iteración, transformación y agregación se aplican sin importar si trabajas con Pokémon, clientes, productos o cualquier otro tipo de datos.

Happy Coding!