Cómo usar la API de Dragon Ball (Tutorial completo en JavaScript + Código descargable)

Cómo usar la API de Dragon Ball (Tutorial completo en JavaScript + Código descargable)

Aprender a consumir APIs es una de las habilidades más demandadas en programación hoy en día.

En este tutorial te voy a enseñar paso a paso cómo hacerlo usando JavaScript… pero con un ejemplo mucho más interesante que los típicos datos aburridos.

👉 Vamos a construir una mini app real usando la API de Dragon Ball.

⚡ Al final podrás descargar el proyecto completo listo para usar.

---

📥 Descarga el proyecto completo

Si quieres ahorrar tiempo y tener todo listo, puedes descargar el proyecto completo:

👉 Descargar HTML + JavaScript listo (Proyecto completo)

---

Ejemplo de Dragon Ball API con JavaScript (Fetch paso a paso)

A continuación verás un ejemplo completo de cómo consumir la Dragon Ball API usando JavaScript y fetch. Este ejemplo es ideal si estás aprendiendo APIs REST para proyectos reales.

fetch("https://dragonball-api.com/api/characters?name=goku")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

Este código realiza una petición HTTP y devuelve datos en formato JSON que puedes usar en cualquier aplicación.

https://dragonball-api.com/api/

---

🚀 ¿Qué vas a aprender?

• Cómo consumir APIs con JavaScript
• Cómo trabajar con JSON
• Cómo mostrar datos dinámicos
• Cómo construir una mini app real

---

💼 ¿Por qué aprender APIs te puede ayudarte a conseguir trabajo?

El consumo de APIs es una habilidad clave en roles como:

• Desarrollador web
• Analista de datos
• Ingeniero de software

Hoy en día, la mayoría de las aplicaciones se conectan a APIs, por lo que dominar esto puede abrirte oportunidades laborales reales.

---

¿Qué es la Dragon Ball API y cómo funciona?

La Dragon Ball API es un servicio gratuito que proporciona datos sobre personajes, episodios y más.

Puedes revisar la documentación oficial aquí:

👉 Ver documentación de la API

---

🛠️ Tecnologías utilizadas

• HTML
• JavaScript
• Fetch API

---

Paso 1: Preparar el HTML

Crearemos un selector de personajes y un área donde se mostrará la información automáticamente.

---

Cómo consumir la API con JavaScript

async function obtenerPersonajeInfo(personaje) {
    const url = `https://dragonball-api.com/api/characters?name=${personaje.toLowerCase()}`;
    const respuesta = await fetch(url);
    const datos = await respuesta.json();
}

---

Mostrar información del personaje

function mostrarInformacionPersonaje(info) {
    const infoDiv = document.getElementById('personaje-info');
    const imagen = info.image || info.image_url || 'https://via.placeholder.com/300';

    infoDiv.innerHTML = `
        <h2>${info.name}</h2>
        <p><strong>Raza:</strong> ${info.race || 'Desconocida'}</p>
        <p><strong>Poder:</strong> ${info.power || 'Desconocido'}</p>
        <p><strong>Descripción:</strong> ${info.description || 'No disponible'}</p>
        <img src="${imagen}" style="width:300px;height:auto;" />
    `;
}

---

Probar el código

Guarda el archivo como .html y ábrelo en tu navegador.

👉 Ver ejemplo funcionando

---

💡 Lleva esto a proyectos reales

Este mismo enfoque lo puedes aplicar en dashboards, automatización o aplicaciones web reales.

---

🚀 Conclusión

Ahora ya sabes cómo consumir APIs usando JavaScript con un ejemplo real.

👉 Descargar proyecto completo aquí