🔌 ¿Qué son las APIs y cómo usarlas?

11 - 🔌 ¿Qué son las APIs y cómo usarlas?

Aprende qué es una API, para qué sirve, y cómo puedes usar APIs externas e internas en tus proyectos. Veremos ejemplos visuales y prácticos con fetch y Next.js.

---

🧠 ¿Qué es una API?

API significa Application Programming Interface o “Interfaz de Programación de Aplicaciones”. Es como un mesero digital: tú haces una petición (como pedir comida) y la API te trae lo que pediste desde la cocina (el servidor).

Las APIs permiten que dos programas se comuniquen entre sí. Por ejemplo, cuando una app del clima te muestra la temperatura, probablemente está usando una API para obtener esos datos.

---

📂 Tipos de APIs: internas vs externas

• 🔐 APIs internas: se usan dentro de una misma aplicación o empresa. Por ejemplo, una API que conecta el sistema de ventas con el de inventario.
• 🌐 APIs externas: son públicas o de terceros. Por ejemplo, la API de Google Maps o la de Twitter.

Las APIs externas suelen requerir una API Key para autenticarse y controlar el acceso.

---

🍽️ Ejemplo visual: pedir comida

Imagina que estás en un restaurante:

• 📋 Tú = el cliente
• 🧑‍🍳 Cocina = el servidor
• 🧑‍💼 Mesero = la API

Tú haces un pedido → el mesero lo lleva a la cocina → la cocina prepara la comida → el mesero te la trae. Así funciona una API: tú (el frontend) haces una petición, y la API te devuelve los datos desde el servidor.

---

💻 Ejemplo práctico: usando fetch para obtener datos

Vamos a usar la API pública https://jsonplaceholder.typicode.com/users para obtener una lista de usuarios.

// pages/usuarios.js
import { useEffect, useState } from 'react';

export default function Usuarios() {
  const [usuarios, setUsuarios] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => setUsuarios(data.slice(0, 3)));
  }, []);

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-3">👥 Usuarios desde API externa</h1>
      {usuarios.map(u => (
        <p key={u.id}>{u.name}</p>
      ))}
    </div>
  );
}
      

🧩 Resultado visual:

👥 Leanne Graham

👥 Ervin Howell

👥 Clementine Bauch

Datos obtenidos dinámicamente desde una API externa.

✅ Ideal para: mostrar usuarios, productos, noticias, clima, etc.

---

🌍 Ejemplos de APIs populares

• 📦 Fake Store API: https://fakestoreapi.com — productos falsos para practicar.
• 📰 News API: https://newsapi.org — titulares de noticias.
• 📍 Google Maps API: mapas, rutas y geolocalización.
• 🐦 Twitter API: tweets, perfiles y estadísticas.

---

💡 Consejo: empieza usando APIs públicas sin autenticación para practicar. Luego puedes explorar APIs más avanzadas con autenticación y parámetros dinámicos.

← Volver al índice