👉 Cómo usar la Dragon Ball API con JavaScript (Ejemplo real paso a paso)

Cómo usar la API de Dragon Ball para aprender a consumir APIs (Ejemplo real en JavaScript)

Si estás aprendiendo a trabajar con APIs, probablemente ya viste ejemplos aburridos sobre usuarios o productos.

Pero… ¿qué tal aprender usando personajes de Dragon Ball?

En esta guía paso a paso vamos a utilizar la Dragon Ball API para obtener información de tus personajes favoritos y mostrarla en tiempo real con JavaScript y fetch. Es un ejercicio ideal si estás comenzando en el mundo del desarrollo web.

---

🚀 ¿Qué vas a aprender en este tutorial?

• Qué es una API y para qué sirve
• Cómo hacer una petición con fetch
• Cómo leer datos en formato JSON
• Mostrar información dinámica en una página
• Crear una mini app interactiva

Además, usar ejemplos divertidos hace que el aprendizaje sea más rápido y fácil de recordar.

---

¿Qué es la Dragon Ball API?

La Dragon Ball API es un servicio gratuito que proporciona datos sobre la serie, incluyendo personajes, episodios, ataques y planetas.

Puedes revisar la documentación oficial aquí:

👉 Ver documentación de la API

---

🛠️ Tecnologías utilizadas

• HTML → estructura de la página
• JavaScript → lógica de la aplicación
• Fetch API → obtención de datos

---

Paso 1: Preparando el HTML

Crearemos un combobox para seleccionar un personaje y un área donde se mostrará la información automáticamente.

---

Paso 2: Llamando a la API con JavaScript

La función obtenerPersonajeInfo(personaje) hace la petición a la API usando el nombre seleccionado.

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

• Construimos la URL
• Usamos fetch para obtener los datos
• Convertimos la respuesta a JSON
• Mostramos la información en pantalla

---

Mostrar la 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 con extensión .html y ábrelo en tu navegador.

Verás un selector de personajes que cargará la información automáticamente.

👉 Ver ejemplo funcionando

---

💡 ¿Por qué practicar con APIs divertidas?

Aprender con proyectos interesantes mejora la retención y hace que la programación sea menos frustrante.

Cuando combinas tecnología con algo que te gusta, es más probable que continúes aprendiendo.

---

🔥 APIs gratuitas para seguir practicando

• Pokémon API
• Rick and Morty API
• Star Wars API

Explorar distintas APIs te ayudará a convertirte en un desarrollador más versátil.

---

Conclusión

Con este ejemplo ya puedes empezar a trabajar con la Dragon Ball API y construir aplicaciones interactivas.

Este ejercicio es perfecto para mejorar tus habilidades en JavaScript y entender cómo funcionan las peticiones a servicios externos.

Si quieres seguir aprendiendo sobre macros, automatización y programación práctica, te recomiendo explorar otros artículos del blog.

TIP PRO: intenta modificar el ejemplo para filtrar personajes por raza o planeta 😉