▸ CódigoPaso 1 gratis

Crea tu primer panel con datos en vivo usando APIs gratis y sin claves

Elige una API gratis de la lista Public APIs, pregúntale desde el navegador y la terminal, y monta en un solo archivo un panel del tiempo de tu ciudad que se actualiza solo.

Al terminar tendrás

  • ▸ Sabrás qué es una API y cómo encontrar en la lista Public APIs las que no piden clave
  • ▸ Tendrás un panel del tiempo de tu ciudad en un archivo HTML que se actualiza solo
  • ▸ Entenderás fetch y JSON, y sabrás ver por dentro lo que hace tu página con las herramientas del navegador
  • ▸ Conocerás las normas de uso (límites, atribución, uso no comercial) para no meterte en líos
Tiempo
30 min
Coste real
€0
Requisitos
2 GB RAM · sin GPU
Sistemas
Windows · macOS · Linux

Antes de empezar

  • □ Un ordenador con Windows 10/11, macOS o Linux y conexión a internet
  • □ Un navegador: Chrome, Edge o Firefox
  • □ Nada que instalar, ni cuentas, ni tarjeta: las APIs de esta misión no piden registro
  • □ Unos 30 minutos

Necesitas además: Solo navegador, terminal y un editor de texto

✓ Probada en macOS 26 (Apple Silicon) con Chrome y curl 8.7.1, contra Open-Meteo y Frankfurter, 31-10-2026. Los comandos de Windows (PowerShell) y Linux sin probar todavía

  1. 1

    Paso 1 / 6 · ~5 min · gratis

    Entiende qué es una API y hazle tu primera pregunta

    Una API es como una ventanilla: le preguntas con una dirección web y te contesta con datos. Aquí eliges una gratis que no pide registro y le preguntas desde el navegador.

    1. 1

      Mira el dibujo: así funciona cualquier API. Tu navegador (o tu página) pide algo con una dirección web, la API lo busca y te devuelve la respuesta en un texto ordenado que se llama JSON.

      Cómo funciona una API

      Preguntar es gratis y no hace falta cuenta: la dirección web lleva la pregunta (qué sitio y qué dato quieres).
    2. 2

      Abre en el navegador github.com/public-apis/public-apis. Es la lista de APIs gratis más grande de GitHub: unas 2.000 APIs ordenadas por temas y casi 500.000 estrellas.

      Cuidado Lo primero que verás son anuncios del patrocinador (APILayer, IPstack, Weatherstack…). Esas APIs piden crear una cuenta. No hagas clic: baja hasta el apartado Index.

    3. 3

      En Index pulsa Weather (el tiempo). Verás una tabla con 5 columnas. Fíjate en estas 3:

      • Auth: «No» significa que no pide registro ni clave. Es lo que quieres.
      • HTTPS: «Yes» significa que la conexión va cifrada.
      • CORS: «Yes» significa que una página web puede pedirle datos directamente (lo usarás en el paso 3).
    4. 4

      Busca la fila de Open-Meteo. Tiene No, Yes, Yes: perfecta para empezar.

      La fila que buscas

      | Open-Meteo | Free weather API for non-commercial use | No | Yes | Yes |

      Truco ¿No la encuentras? Pulsa Ctrl+F (Cmd+F en Mac), escribe Open-Meteo y el navegador te lleva a ella.

    5. 5

      Hazle tu primera pregunta. Copia esta dirección, pégala en la barra de direcciones del navegador (donde escribes las webs) y pulsa Enter. Le pides la temperatura y el viento de Madrid ahora mismo:

      Pégalo en la barra del navegador
      $https://api.open-meteo.com/v1/forecast?latitude=40.42&longitude=-3.70&current=temperature_2m,wind_speed_10m

      Lo que verás

      {"latitude":40.39599,"longitude":-3.6793447,"generationtime_ms":0.045,"utc_offset_seconds":0,"timezone":"GMT","timezone_abbreviation":"GMT","elevation":667.0,"current_units":{"time":"iso8601","interval":"seconds","temperature_2m":"°C","wind_speed_10m":"km/h"},"current":{"time":"2026-10-31T10:15","interval":900,"temperature_2m":15.1,"wind_speed_10m":3.7}}
    6. 6

      Busca en el texto "temperature_2m": el número que va justo después es la temperatura de Madrid ahora, en grados. "wind_speed_10m" es el viento en km/h.

      Truco En Chrome y Edge, marca la casilla «Dar formato al texto» de arriba y verás el JSON ordenado, un dato por línea.

    7. 7

      ¿Te lías con tanto símbolo? Pídele a tu IA que te lo traduzca:

      Prompt para tu IA

      Te pego la respuesta de una API del tiempo. Explícame como si tuviera 10 años qué significa cada dato, cuál es la temperatura y por qué hay llaves { } y comillas. [pega aquí el texto que te ha salido]

    Comprobación: En el navegador ves un texto que empieza por {"latitude" y dentro aparece "temperature_2m" seguido de un número. Acabas de hablar con una API sin cuenta ni clave.

    Si algo falla (3)
    Sale "error":true y un mensaje en inglés
    Te has dejado o cambiado algún trozo de la dirección. Vuelve a copiarla entera con el botón Copiar, sin espacios al principio ni al final.
    El navegador hace una búsqueda en Google en vez de abrir la dirección
    Has pegado la dirección incompleta. Tiene que empezar exactamente por https://api.open-meteo.com
    Me pide registrarme o una tarjeta
    Has entrado en un anuncio de arriba o en una API con Auth «apiKey». Vuelve a la tabla Weather y elige una con Auth «No».
  2. 2

    // acceso_restringido

    Pasos 2–6 con el plan Anual

Primeros logros

Ya lo tienes funcionando. Pruébalo con esto:

Que tu IA le añada el pronóstico de mañana

Pega tu panel.html entero después de este prompt en ChatGPT, Claude o tu IA local, y sustituye el archivo por lo que te devuelva.

Prompt para tu IA

Soy principiante. Este es mi panel del tiempo en un solo archivo HTML que usa la API gratuita de Open-Meteo. Añádele la temperatura máxima y mínima de mañana usando el parámetro daily=temperature_2m_max,temperature_2m_min de la misma API, sin claves ni librerías. Devuélveme el archivo completo y explícame en 3 frases qué has cambiado. [pega aquí tu panel.html]

Un segundo panel: el euro en dólares

Pregunta en el navegador a la API Frankfurter (también en la lista, sin clave): https://api.frankfurter.dev/v1/latest?from=EUR&to=USD,GBP y pídele a tu IA que haga una tarjeta igual que la del tiempo con esos datos.

Siguiente misión

Ya sabes traer datos de internet a tu página. Ahora convierte un script en una app web de verdad.

Siguiente misión

Cómo deshacerlo

Todo está en la carpeta panel-api de tu carpeta personal: bórrala y no queda nada. Si en Mac activaste en TextEdit «Mostrar archivos HTML como código HTML» y no lo quieres, desmárcalo en TextEdit › Ajustes › Abrir y guardar.

Borrar la carpetamacOS
$rm -rf ~/panel-api
Borrar la carpetaLinux
$rm -rf ~/panel-api
Siguiente misiónCrea una intro animada lista para Reels programando con código