Aplicaciones Web Orientadas a Servicios • ITIID-05 •

Práctica Guiada: Consumo de la API de YouTube

En esta práctica desarrollaremos una aplicación web básica que consumirá la API de YouTube Data v3 para buscar videos y mostrar sus resultados en pantalla.

El objetivo es comprender cómo se realiza el intercambio de información mediante HTTP, cómo se reciben datos en formato JSON y cómo se integran en una aplicación web.

Objetivo de la práctica

Que el estudiante:

  • Consuma una API real (YouTube Data API v3).
  • Utilice fetch() para realizar solicitudes HTTP.
  • Interprete respuestas en formato JSON.
  • Muestre dinámicamente los resultados en el navegador.

🛠 Requisitos previos

  1. Cuenta de Google.
  2. Crear un proyecto en Google Cloud Console.
  3. Habilitar YouTube Data API v3.
  4. Generar una API Key.

Paso 1: Obtener API Key

  1. Ir a: https://console.cloud.google.com/
  2. Crear un nuevo proyecto.
  3. Ir a “APIs y servicios”.
  4. Habilitar YouTube Data API v3.
  5. Ir a “Credenciales”.
  6. Crear credencial → Clave de API.
  7. Copiar la clave generada.

⚠️ Nota importante:
No subir la API Key a repositorios públicos.

Paso 2: Crear el proyecto

Crear un archivo llamado: index.html

Paso 3: Estructura HTML básica

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Buscador YouTube</title>
  <style>
    body { font-family: Arial; padding: 20px; }
    input { padding: 8px; width: 300px; }
    button { padding: 8px; }
    .video { margin-top: 20px; }
    iframe { margin-top: 10px; }
  </style>
</head>
<body>

  <h1>Buscador de Videos - YouTube API</h1>

  <input type="text" id="searchInput" placeholder="Buscar videos..." />
  <button onclick="buscarVideos()">Buscar</button>

  <div id="resultados"></div>

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

Paso 4: Crear archivo JavaScript

Crear un archivo llamado: app.js

Paso 5: Código para consumir la API

Reemplaza TU_API_KEY con tu clave real.

const API_KEY = "TU_API_KEY";

async function buscarVideos() {
  const query = document.getElementById("searchInput").value;
  const resultadosDiv = document.getElementById("resultados");

  resultadosDiv.innerHTML = "Cargando...";

  try {
    const response = await fetch(
      `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${query}&type=video&maxResults=5&key=${API_KEY}`
    );

    const data = await response.json();

    mostrarResultados(data.items);

  } catch (error) {
    resultadosDiv.innerHTML = "Error al cargar los videos";
    console.error(error);
  }
}

function mostrarResultados(videos) {
  const resultadosDiv = document.getElementById("resultados");
  resultadosDiv.innerHTML = "";

  videos.forEach(video => {
    const videoId = video.id.videoId;
    const titulo = video.snippet.title;

    resultadosDiv.innerHTML += `
      <div class="video">
        <h3>${titulo}</h3>
        <iframe width="400" height="250"
          src="https://www.youtube.com/embed/${videoId}"
          frameborder="0"
          allowfullscreen>
        </iframe>
      </div>
    `;
  });
}

¿Qué está ocurriendo aquí?

  1. El usuario escribe una palabra clave.

  2. La función buscarVideos() envía una solicitud HTTP GET a la API.

  3. La API responde en formato JSON.

  4. Extraemos los datos necesarios (videoId y título).

  5. Insertamos dinámicamente un iframe para mostrar el video.

Ejemplo de solicitud HTTP

GET https://www.googleapis.com/youtube/v3/search

Parámetros utilizados:

  • part=snippet

  • q=palabraClave

  • type=video

  • maxResults=5

  • key=API_KEY

Conceptos aplicados

  • Modelo cliente-servidor

  • Solicitudes HTTP

  • Uso de API Key

  • Formato JSON

  • Programación asíncrona (async/await)

  • Manipulación del DOM

  • Integración de servicios externos

Evidencia de entrega

  • Captura de pantalla funcionando

  • Código fuente

  • Explicación breve del funcionamiento

Criterios de evaluación

  • Correcta conexión con la API

  • Interpretación adecuada del JSON

  • Uso correcto de fetch y async/await

  • Presentación funcional de resultados

  • Comprensión del intercambio de informaciónv