Lógica del Landing

• Para empezar entramos a RapiAPI, y utilizamos la API de YouTubeV3.

• Seleccionamos Channel Videos para obtener los últimos videos publicados e indicamos el ID del canal de nuestro profesor UC9k0tTsh_qStx0HPuPftSsg y lo colocamos en channelId.

• Lo bueno de esta plataforma es que nos da el código para la implementación con distintas tecnologías en este caso JS > fetch.

• Luego podemos dar en Test Endpoint, y en la pestaña result ver la respuesta de la petición.

• La url que se pasa por argumento a la función fetch, la cambiamos al inicio del código para declarar la constante API:

  const API = "<https://youtube-v31.p.rapidapi.com/search?channelId=UCBVjMGOIkavEAhyqpxJ73Dw&part=snippet%2Cid&order=date&maxResults=9>";
  

• La variable options si la dejamos igual, tal cual como lo muestra rapidapi:

  const options = {
    method: 'GET',
    headers: {
  	  'X-RapidAPI-Key': '6540473ff4mshfbdbb244ab22f99p10c708jsnfd294791e746',
  		'X-RapidAPI-Host': 'youtube-v31.p.rapidapi.com'
    }
  };
  

• Como vamos a usar el asyn/await, borramos el código de fetch estructurado con then y catch. En lugar de ello, usamos la lógica que hicimos en ejemplos anteriores:

  async function fetchData(urlApi) {
  const response = await fetch(urlApi, options); 
  const data = await response.json();
  return data;
  }
  

• Ahora vamos usar un nuevo concepto: una función que se invoca a sí misma; con JavaScript podemos tener funciones anónimas que permitan llamarse automáticamente, la estructura cuenta con la palabra reservada async y con funciones arrows:

  (async () => {
  try{
  } catch {
  }
  })();
  

• Dentro de try{} estará el llamado de la API y el template de html para interpretar los datos a iterar por cada objeto.

  (async () => {
    try {
      const videos = await fetchData(API);
      let view = `
      ${videos.items
        .map(
          (video) => `
        <div class="group relative">
          <div
            class="w-full bg-gray-200 aspect-w-1 aspect-h-1 rounded-md
            overflow-hidden group-hover:opacity-75 lg:aspect-none">
            <img src="${video.snippet.thumnail.high.url}" alt="${video.snippet.description}" class="w-full"/>
          </div>
          <div class="mt-4 flex justify-between">
            <h3 class="text-sm text-gray-700">
              <span aria-hidden="true" class="absolute inset-0"></span>
              ${video.snippet.title}
            </h3>
          </div>
        </div>
      `
        )
        .slice(0, 4)
        .join("")}
        
      `;
    } catch {}
  })();