19. API Rick&Morty

 

Tutorial 19: API Rick & Morty - Conociendo nuestro recurso

🌐 Introducción a la API Rick & Morty

¡Excelente noticia! Vamos a utilizar una API pública y completamente gratuita que contiene toda la información de la famosa serie Rick & Morty. Esta API es perfecta para practicar porque:

✅ No requiere autenticación
✅ Es completamente gratuita
✅ Tiene datos reales y actualizados
✅ Está muy bien documentada
✅ Es perfecta para proyectos de aprendizaje

🔗 Accediendo a la documentación oficial

Vamos a la página web oficial de la API:

text

https://rickandmortyapi.com/

Características principales de la API:

• Base URL: https://rickandmortyapi.com/api

• Tipo: REST API

• Formato de respuesta: JSON

• Rate limiting: Sin límites conocidos (para uso educativo)

📚 Explorando la documentación

1. Endpoints disponibles

La API tiene 3 endpoints principales:

Endpoint	Descripción	Ejemplo
/character	Personajes de la serie	https://rickandmortyapi.com/api/character
/location	Ubicaciones del universo	https://rickandmortyapi.com/api/location
/episode	Episodios de la serie	https://rickandmortyapi.com/api/episode

2. Estructura de la respuesta

Cuando hacemos una petición a /character, obtenemos:

json

{

  "info": {

    "count": 826,

    "pages": 42,

    "next": "https://rickandmortyapi.com/api/character?page=2",

    "prev": null

  },

  "results": [

    {

      "id": 1,

      "name": "Rick Sanchez",

      "status": "Alive",

      "species": "Human",

      "type": "",

      "gender": "Male",

      "origin": {...},

      "location": {...},

      "image": "https://rickandmortyapi.com/api/character/avatar/1.jpeg",

      "episode": [...],

      "url": "https://rickandmortyapi.com/api/character/1",

      "created": "2017-11-04T18:48:46.250Z"

    },

    // ... más personajes

  ]

}

🔍 Probando la API manualmente

Opción 1: Navegador web

Simplemente visita en tu navegador:

text

https://rickandmortyapi.com/api/character

Verás el JSON completo con los primeros 20 personajes.

Opción 2: Usando fetch en la consola del navegador

Abre las herramientas de desarrollo (F12) y en la pestaña "Console", escribe:

javascript

// Prueba rápida

fetch('https://rickandmortyapi.com/api/character')

  .then(response => response.json())

  .then(data => console.log(data.results[0]));

Opción 3: Herramientas como Postman o Insomnia

Si quieres probar más a fondo, estas herramientas son excelentes para hacer peticiones HTTP.

📊 Información útil de cada personaje

Campos que recibiremos por cada personaje:

Campo	Tipo	Descripción	Ejemplo
id	number	ID único	1
name	string	Nombre completo	"Rick Sanchez"
status	string	Estado de vida	"Alive", "Dead", "unknown"
species	string	Especie	"Human", "Alien"
type	string	Subtipo	"" (vacío si no tiene)
gender	string	Género	"Male", "Female"
origin	object	Lugar de origen	{"name": "Earth", "url": "..."}
location	object	Última ubicación	{"name": "Earth", "url": "..."}
image	string	URL de la imagen	"https://.../avatar/1.jpeg"
episode	array	Lista de episodios	["https://.../episode/1", ...]
url	string	URL del personaje	"https://.../character/1"
created	string	Fecha creación	"2017-11-04T18:48:46.250Z"

🎯 Lo que necesitamos para nuestro proyecto

Para nuestra aplicación, vamos a utilizar principalmente:

1. name → Para mostrar el nombre

2. image → Para mostrar la foto

3. status → Para indicar si está vivo o muerto

4. species → Para mostrar la especie

5. episode.length → Para contar episodios

🔄 Paginación de la API

La API usa paginación. Cada página contiene 20 personajes. Para navegar:

javascript

// Primera página

https://rickandmortyapi.com/api/character

// Segunda página

https://rickandmortyapi.com/api/character?page=2

// Podemos ver cuántas páginas hay en "info.pages"

💡 Funcionalidades avanzadas (opcional)

Si quieres expandir el proyecto más adelante:

1. Búsqueda por nombre

text

https://rickandmortyapi.com/api/character/?name=rick

2. Filtros múltiples

text

https://rickandmortyapi.com/api/character/?name=rick&status=alive&species=human

3. Obtener personaje específico

text

https://rickandmortyapi.com/api/character/1

🛠️ Preparando nuestro código

Modifica tu función reqApi en App.js:

javascript

const reqApi = async () => {

  console.log("Llamando a la API...");

  

  // URL de la API

  const api = await fetch("https://rickandmortyapi.com/api/character");

  

  // Convertir respuesta a JSON

  const characterApi = await api.json();

  

  // Ver lo que obtenemos en consola

  console.log("Respuesta completa:", characterApi);

  console.log("Total personajes:", characterApi.info.count);

  console.log("Primer personaje:", characterApi.results[0]);

};

🧪 Prueba rápida en tu aplicación

1. Actualiza tu función reqApi con el código anterior

2. Abre la consola del navegador (F12)

3. Haz clic en "Buscar personajes"

4. Deberías ver la respuesta de la API en la consola

Lo que verás:

• Un objeto con propiedades info y results

• results es un array con 20 objetos (personajes)

• Cada objeto tiene todas las propiedades que vimos antes

📝 Ejemplo de respuesta simplificada:

javascript

// characterApi.results[0] sería:

{

  "id": 1,

  "name": "Rick Sanchez",

  "status": "Alive",

  "species": "Human",

  "image": "https://rickandmortyapi.com/api/character/avatar/1.jpeg",

  "episode": [

    "https://rickandmortyapi.com/api/episode/1",

    "https://rickandmortyapi.com/api/episode/2",

    // ... 51 episodios en total

  ]

}

🎨 Visualizando lo que vamos a crear

Imagina que por cada personaje mostraremos:

text

┌─────────────────────┐

│  [Imagen Personaje] │

│                     │

│  Nombre: Rick Sanchez│

│  Estado: ● Alive    │

│  Especie: Human     │

│  Episodios: 51      │

└─────────────────────┘

🔗 Recursos útiles

• Documentación oficial: https://rickandmortyapi.com/documentation

• GitHub del proyecto: https://github.com/afuh/rick-and-morty-api

• Playground para pruebas: Usa la consola de tu navegador

⚠️ Consideraciones importantes

1. CORS está habilitado → Podemos hacer fetch directamente desde el navegador

2. Las imágenes están alojadas → No necesitamos descargarlas

3. Los datos son reales → La API se actualiza con nuevos episodios

4. Es solo para desarrollo → En producción considerarías límites de tasa

🚀 Próximos pasos

En el siguiente tutorial vamos a:

1. Almacenar la respuesta de la API en el estado de React

2. Mostrar los personajes en lugar de la imagen de inicio

3. Crear componentes para cada tarjeta de personaje

---

💬 Actividad práctica

Antes de continuar, haz esto:

1. Ve a https://rickandmortyapi.com/api/character en tu navegador

2. Examina la estructura JSON

3. Identifica 3 personajes que reconozcas

4. Actualiza tu función reqApi para que muestre solo los nombres en consola

javascript

const reqApi = async () => {

  const api = await fetch("https://rickandmortyapi.com/api/character");

  const characterApi = await api.json();

  

  // Muestra solo los nombres

  characterApi.results.forEach(personaje => {

    console.log(personaje.name);

  });

};

¿Lograste ver la lista de nombres en la consola? ¡Excelente! Estás listo para el siguiente paso. 🌟

---

¿Tienes preguntas sobre cómo funciona la API? ¡Es el momento perfecto para aclararlas!