Consumiendo API

Clase 21 de 26 • Curso de Asincronismo con JavaScript

Maria Gabriela Rodriguez Cuevas

student•

📀 𝗖𝗹𝗮𝘀𝗲 #𝟭𝟴: 𝗖𝗼𝗻𝘀𝘂𝗺𝗶𝗲𝗻𝗱𝗼 𝗔𝗣𝗜 𝟭𝟴/𝟮𝟭 📀 . 🔧 ++Continuando con la lógica de la landing:++ .

Entra a https://rapidapi.com/ y creamos una cuenta al dar click en ++Sign Up++ y seguir los pasos.
El profesor usará la API de youtube, así que en el buscador puedes colocar la API que quieras usar. La versión de la API de youtube que vamos a usar es ++YouTube V3++.
Una vez seleccionada la API, nos mostrará 3 columnas con los servicios y herramientas que están disponibles para la API, para el ejemplo se selecciona Channel Videos para obtener los últimos vídeos publicados. En la columna central, se debe indicar la id del canal que queremos mostrar en la landing, éste se obtiene en la url de youtube después de channel/, por ejemplo para el canal de youtube del profesor: https://www.youtube.com/channel/UC9k0tTsh_qStx0HPuPftSsg el id del canal es UC9k0tTsh_qStx0HPuPftSsg ese es el que se debe pegar en el parámetro ++channeld++.
Más abajo, se puede configurar el máximo de vídeos que se desea obtener (máximo hasta 50), para el ejemplo se colocó 9.
En la tercera columna, se selecciona en la lista el lenguaje de programación y el método que se quiere usar, en este caso: JavaScript → fetch con ésto aparecerá la plantilla del código.
Para visualizar la salida al testear la plantilla, en la columna del medio al dar click en Test Endpoint, la pestaña Results se activa y podemos conocer cada uno de los elementos de los objetos, esa información nos será útil para nuestro el código.
Copiar la plantilla e ir al editor VSC en la ruta src/assets y pegarlo en main.js
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=UCw05fUBPwmpu-ehXFMqfdMw&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:

//Lógica de async: ir por los datos, luego esperar por ellos y finalmente retornarlos hacia el usuario
async function fetchData(urlApi) { //siempre async antes de function
const response = await fetch(urlApi, options); //hacemos uso del fetch() y solo por esta vez le pasamos la opciones 
const data = await response.json(); //estructura de los datos transformandolos en json
return data; //retorna la información de la API que estamos solicitando
}

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 () => {
//Dentro implementamos la lógica necesaria para hacer el llamado a la API, obtener los elementos y mostrarlos en html
//Se implementa try y catch
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, en este caso, cuando analizamos la salida de la API en rapidapi, hay una jerarquía de los datos, están los 9 “items” del 0 al 8 para la posición de cada vídeo, luego el “snippet” de cada item, luego “thumbnails” y éste a su vez los tamaños de la imagen (nos interesa con la más alta resolución “high”), también nos interesa mostrar la descripción “description” y nombre “title” de cada vídeo:

(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.thumbnails.high.url}" alt="${video.snippet.description}" class="w-full">
                </div>
                <div class="mt-4 flex justify-between">
                    <h3 class="text-sm text-gray-700" style="color:white;">
                        <span aria-hidden="true" class="absolute inset-0"></span>
                        ${video.snippet.title}
                    </h4>
                </div>
            </div>
        `).slice(0, 4).join('')}
        `;
        content.innerHTML = view;
    } catch {
     
    }
})();

Si quieres saber más del ++método map++, en el enlace hay ejemplos: aquí
- Para el ++método slice++: aquí
- Para el ++método join++: aquí
En index.html buscamos el comentario de  para agregar el id de **++content ++**y pueda mostrar los vídeos en la landing, para ello, borramos el div después del comentario, incluyendo su contenido, queda así:

<div class="mt-6 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8" id="content">
<!-- content -->
</div>

Y ahora para que pueda leer la lógica de main, dado que el id lo llamamos content, en el archivo main agregamos la referencia content:

const content = null || document.getElementById('content');

Lucas Aristizábal

student•

es normal que la parte donde ya pones la info en el innerHTML o el view te lo ponga como string? siento que me está generando un error por eso y no he podido solucionarlo ayudita?

Maria Gabriela Rodriguez Cuevas

student•

Hola Lucas, no había visto tu mensaje ¿te sigue generando el mismo error?

Juan Nicolás Cabrera

student•

puede que haya mejorado este curso a comparacion con el anterior pero lo tienen que volver a hacer una tercera vez, en español

Yuliam Rivera González

student•

the same jajajajajaja

Alberto Depablos

student•

JAJAJAJAJAJA

Yohana Alexandra Triviño Vasquez

student•

Una buena sugerencia para platzi es que los cursos siempre piensen que estan hablando a gente que no sabe nada, en particular hago muchos cursos y leo y me documento pero a veces no entiendo lo que el profe explica y hay algunos profes que se me dificulta coger la linea de lo que hacen. El curso de API REST con express fue super bueno, el profesor alli me aclaro muchisimos vacios que creo que tenia, este curso en particular tambien ha sido muy bueno pero hay momentos donde se pierde uno con el profe, es un punto por mejorar porque con el profe oscar en los cursos que he iniciado me ha pasado. He notado que el profe tiene que leer mucho algun telepronter, tal vez sea eso, cuando uno enseña algo que domina y mas conversadito fluye mejor.

Anderson Parra

student•

solo quiero terminar este curso para buscar otro que me explique mejor.

Jesús Álvarez

student•

Si no tienes imagen para colocar en el hero pueden usar este enlace https://picsum.photos/500 les dará una imagen distinta cada vez que recarguen la página

Kalet Adonay Chavez Alas

student•

funciones anonimas autoejecutables!!!

Andres Prieto

student•

Checa esto, https://developer.mozilla.org/es/docs/Glossary/IIFE

Andres Gallego

student•

Les recomiendo hacer una copia del resultado de la API, pues al final si les pasa algún error o si están haciendo mejoras les va a sacar un status of 429 (Too Many Requests). Esto es porque la API tiene un límite de 40 peticiones MENSUALES,

JUAN DAVID MARIN URIBE

student•

Este es el codigo de HTML que hace falta en el minuto 13:20

<div class="group relative">
            <div
              class="w-full bg-gray-200 aspect-w-1 aspect-h-1 rouded-md overflow-hidden group-hover:opacity-75 lg:aspect-none"
            >
              <img src="" alt="" 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>
                Title
              </h4>
            </div>
          </div>

Julian David Alzate Cuervo

student•

héroe sin capa

Israel Churata

student•

Hay un error al cerrar <h4>, lo estas cerrando con </h5>, lo cual debe ser con el mismo </h4>

David Rangel

student•

Otra forma de averiguar el channel ID es la siguiente: 1. Ingresas al canal de tu elección, en mi caso el de la NASA: https://www.youtube.com/@nasa_es

2. Le das click a su descripción (señalado con la línea roja):

3. Das click en compartir canal:

4. Seleccionas la opción "Copiar ID del Canal"

Y listo, ¡celebra! Ya tienes el ID de canal.

Leidy Tatiana Rico Gamboa

student•

muchas gracias yo buscando en google como encontrarlo y no salia Muchas Gracias

Daniel Velasco

student•

Este es el ID de el profesor Oscar ( UC9k0tTsh_qStx0HPuPftSsg )

German Cavani

student•

Aquí esta la API que utiliza el profesor en este video: Youtube V3

Luis Eduardo

student•

Decidi construir mi propia API para poner en practica mis habilidades de backend y tener un portafolio mas completo. Me va a tocar hcaer mucho trabajo :s pero aqui pueden ir viendo el progreso de este proyecto.

Decidi hacer un blog financiero (estudio finanzas en la universidad) que incluya un blog, seccion de noticias, calculadoras y una seccion de contacto. Deseenme suerte.

https://github.com/EsquizoDEV/financeBlog

Tambien ire comentando por aqui algunos avances:

Dejo el primer avance, super importante primero ir definiendo que queremos que haga nuestra aplicacion, antes de pasar a programar como locos, entonces es lo que estoy haciendo.

La página tendrá 3 secciones principales, un blog, noticias, una sección de calculadoras y una sección de contacto. El blog, consumirá el contenido principal (texto e imágenes) desde una API construida en NodeJS, express y utilizando una base de datos SQL, esto nos permitirá crear una misma estructura para el frontend del blog y simplemente consumir los datos sin perder el estilo. Para el blog la API tendrá varios niveles, un nivel para obtener información de todos los blogs actuales, que serán utilizados para mostrarse en un carrusel, el API debe responder con información general de cada blog (Blog Nivel 0 Especificacion). También habrá un nivel para obtener a el detalle de un blog, la estructura de respuesta de este request, tiene que ser la correcta para el renderizado adecuado del frontend. En el frontend, nuestro Javascript, necesita saber la estructura de esa entrada de blog, es decir, necesitamos saber el titulo principal, la introducción, la cantidad de subtítulos que hay a lo largo del blog, y los contenidos relativos a cada subtitulo, así también, cada sección puede ir o no acompañada de una imagen, que tendrá que aparecer entre cada cambio de sección. Para ver mejor un ejemplo de respuesta, ir a la especificación de Blog Api Nivel 1. Blog API Nivel 0 especificacion: Rutas, métodos y ejemplos de respuesta: Ruta: api/ V1/blogs Method: GET Res example: [{ “Title”: ”The first entry”, “ShortContent”:”The short content string”, “Date”: 27/05/22, “Id”: “123456” }] Blog API nivel 1 especificación: Ruta: api/v1/blog/:id Method: GET Res example: { “Title”: “Blog title” “MainIMG”: “IMG SRC”, “Intro”: “String intro”, “SubContent”: [{ “Title”: “Subtitle 1”, “Content”: “Content string”, “Image”: “IMG SRC” }] }

Cecilio Cauich

student•

Para los que igual que un servidor solo tienen un idea no muy clara sobre lo que es una api. Aquí unos links que les puede ayudar a tender mejor. link1 link2

Gabriela Ramírez

student•

Me encanta esta clase, es un buen método sin hacer tantos id en el HTML, solo un getElementById y esta todo

Andres Prieto

student•

Es buena Práctica usar querySelector(), te facilita la vida

PD: Para mí Óscar es uno de los mejores instructores de Platzi; cuando vez uno de sus cursos eso suele suceder

Jeans Pierre Monrroy Caicedo

student•

genial curso

Jorman Urbina

student•

Debemos tener en cuenta que en el ambito laboral necesitaremos buscar informacion de manera inmediata si no la recordamos, aprovechemos los vacios de informacion para buscarla nosotros mismos. somos responsables de nuestro aprendizaje , aunque si , la explicacion esta bastante intensa y poco fluida

Samuel Suárez

student•

Esta clase me volo la cabeza. Hice todo lo que dijo el profesor pero no entendi muy bien el porque de todo eso. No se si es mi culpa o es que el curso va muy rapido... pero me hubiese gustado que explicaran detalladamente el porque de cada cosa en lugar de solo ir al grano

Andres Dominguez

student•

Tranquilo bro, esto es backend, yo igual estaba tratando de implementar una API de typeform para implementar en una App Web que está en construcción (muy a futuro) de un emprendimiento familiar. La metodología de estos cursos es mala la verdad, toca estar buscando, leyendo, estudiando de varios sitios a la vez. Lo cual entendería en una plataforma gratuita, no en una de SUSCRIPCIÓN.

Fernando Meneses

student•

🙋‍♂️ Quiero compartir un link donde resume:

de manera 👉 ++simple y concreta++ 👈 .

spoiler. Minuto 11:43 ** ¡funciones anonimas autoejecutables!** hagame el... favor. ++Se dieron garra++. Bien por el profe y su dominio del tema, mal por que los conceptos se asumen que ya "se saben" . Este curso desentona de todos los que he tomado. Mucho tecnisismo y teoria nunca antes vista

Anthony Quintero

student•

Esta plataforma de RapidApi es increible!

Joaquin Pinto

student•

ACTUALIZACIÓN OCTUBRE-2024:

RapidAPI: - Cambió la interfaz para hacer test de la api, ahora es de paga :'(. - El input para poner el channel no reconoce el nuevo formato de channels de youtube, ahora es : @channel, por ejemplo: @platzi. - el formato para conseguir channels en YouTube es rebuscado, un poco complicado.

CONCLUSIÓN: usen otra API para terminar bien el curso.

Consumiendo API

Introducción

Lo que aprenderás en este curso

Qué es el asincronismo

Event Loop

Iniciando a programar con JavaScript

Callbacks

Configuración

Qué son los Callbacks

Playground: Ejecuta un callback con 2s de demora

XMLHTTPRequest

Fetch data

Callback hell

Promesas

Qué son las promesas

Playground: Crea una función de delay que soporte asincronismo

Fetch

Fetch POST

Async Await

Funciones asíncronas

Try and catch

Playground: Captura el error de una petición

¿Cómo enfrentar los errores?

Generadores

Generators

Proyecto CV

Proyecto del curso

Consumiendo API

Desplegando el proyecto

Playground: Crea una utilidad para hacer peticiones

Nunca pares de crear

Conclusión

¿Qué camino tomar para seguir aprendiendo?

Autoevaluación de Proyecto: Creación de Landing Page