Aplicaciones Web Orientadas a Servicios • ITIID-05 •

Clase práctica: Consumo de una API tipo red social con fetch

En las clases anteriores analizamos cómo funcionan las APIs de redes sociales y qué elementos de programación se necesitan para utilizarlas.
En esta sesión llevaremos esos conceptos a la práctica, consumiendo una API pública que simula el comportamiento de una red social.

El objetivo es comprender el proceso completo de:

  • Realizar una petición a un servicio externo.
  • Recibir información estructurada.
  • Procesarla y mostrarla en una aplicación web.

Objetivo de la práctica

Al finalizar la práctica, el estudiante será capaz de:

  • Consumir una API tipo red social utilizando fetch.
  • Procesar respuestas en formato JSON.
  • Mostrar información dinámica en una página web.
  • Relacionar el consumo de APIs con la arquitectura orientada a servicios.

API seleccionada: JSONPlaceholder

Para esta práctica utilizaremos JSONPlaceholder, una API pública que simula una red social.

¿Por qué usar JSONPlaceholder?

  • Es gratuita.
  • No requiere autenticación.
  • Simula usuarios, publicaciones y comentarios.
  • Es ideal para fines educativos.

URL base: https://jsonplaceholder.typicode.com

Estructura del proyecto

El proyecto tendrá la siguiente estructura:

  • index.html
  • app.js

No se utilizarán frameworks para enfocarnos en el funcionamiento de la API.

Paso 1: Estructura HTML

Creamos el archivo index.html:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>API tipo Red Social</title>
</head>
<body>

  <h1>Consumo de API tipo Red Social</h1>
  <button onclick="cargarPublicaciones()">Cargar publicaciones</button>

  <ul id="lista"></ul>

  <script src="app.js"></script>
</body>
</html>

Paso 2: Realizar la petición con fetch

En el archivo app.js, creamos la función que consumirá la API:

function cargarPublicaciones() {
  fetch("https://jsonplaceholder.typicode.com/posts")
    .then(response => response.json())
    .then(data => mostrarPublicaciones(data))
    .catch(error => console.error("Error:", error));
}

Aquí estamos:

  • Realizando una petición HTTP GET

  • Consumiendo un servicio externo

  • Recibiendo información en JSON

Paso 3: Procesar y mostrar la información

Agregamos la función para mostrar los datos en pantalla:

function mostrarPublicaciones(publicaciones) {
  const lista = document.getElementById("lista");
  lista.innerHTML = "";

  publicaciones.slice(0, 10).forEach(post => {
    const item = document.createElement("li");
    item.innerHTML = `
      <strong>${post.title}</strong><br>
      ${post.body}
    `;
    lista.appendChild(item);
  });
}

En este paso:

  • Recorremos un arreglo de objetos JSON.

  • Accedemos a propiedades.

  • Mostramos información dinámica en la interfaz.

Actividad de la clase

Evidencia práctica

  1. Ejecuta la aplicación en el navegador.

  2. Carga las publicaciones desde la API.

  3. Captura evidencia del resultado.

Responde brevemente:

  • ¿Qué información se obtuvo de la API?

  • ¿Qué método HTTP se utilizó?

  • ¿Por qué esta API simula una red social?