Transcripciones
1. Te damos la bienvenida a la clase.: Hola a todos y bienvenidos a nuestra introducción al Ajax. Aquí es donde aprendemos a usar Ajax para recuperar datos dinámicamente de Internet y ponerlos en nuestras páginas web. Durante esta clase, aprenderás todo lo que necesitas saber para empezar a usar Ajax, incluyendo cómo usar datos JSON, cómo acceder a API públicas, que es de donde provienen los datos, y por supuesto, todo lo que necesitas saber para hacer una solicitud Ajax, que es enviar los datos, leer respuestas, manejar errores, y mantener entretenidos a nuestros usuarios mientras esperan a que termine nuestra solicitud Ajax. Durante esta clase, por supuesto, vamos a construir un proyecto. Esto es lo que vamos a construir. Esta pequeña página web aquí recupera titulares de una API de noticias, los
muestra en un lado de la página y cuando nuestro usuario hace clic, entonces muestra GIF animados interpretando el titular, que es la mejor manera en que puedo pensar, de darle sentido a los titulares del mundo en este momento. Entonces, ¿para quién es esta clase? Bueno, es una introducción al Ajax, pero en realidad, es una clase intermedia, en que parece que ya conoces algún JavaScript y que te sientes cómodo trabajando con HTML. Por supuesto, si tiene alguna pregunta o comentario durante la clase, por favor hágamelo saber en el área de discusión. Te volveré enseguida, lo contrario, no te olvides de presionar el botón de seguir y esperaré verte dentro de la clase.
2. Pero, ¿qué es esto de AJAX?: Entonces, antes de sumergirnos en usar AJAX, tendremos una pequeña charla de bueno, ¿qué significa? ¿ Qué es eso A-J-A-X? ¿ Qué hacemos realmente con él, y cuáles son los pros y los contras de usarlo? Entonces, en primer lugar, echemos un vistazo a lo que significa AJAX. Bueno, la primera A significa Asíncrono lo que significa que si vamos a hacer algo asíncramente, empezamos trabajo asíncrono, sea lo que sea entonces vamos y hacemos
otra cosa mientras el trabajo asíncrono está haciendo lo suyo, completando esperamos. Una vez terminada, nos hará saber que está hecho y nos alejamos de cualquier trabajo que estuviéramos haciendo antes y luego vamos a tratar los resultados de eso. Mi analogía habitual para eso es hacer mi desayuno. Lo primero que hago es hervir un poco de agua y luego hago el resto de mi desayuno. No espero el agua que termine de hervir para mi taza de té caliente. Antes de hacer el resto de mi desayuno, solo
arranco esa tetera y luego hago todo lo demás y esa tetera es como una operación asíncrona. Espero que esa pequeña analogía funcione para ti. Pasando a la derecha, el J no es de esperar que salga adelante JavaScript. Entonces, tenemos JavaScript asincrónico y luego obtenemos otro A que significa plus, realmente es un y. Por alguna razón, la gente de AJAX decidió que siempre se debe deletrear como Javascript Asíncrona Plus, eso es realmente un And, X que significa XML que es lo que todos usaban
en el día en que AJAX fue por primera vez inventado, pero ya nadie usa XML realmente en las comunicaciones AJAX front-end. Todo el mundo utiliza JSON, Javascript Object Notation. Tendremos un mini vistazo a lo que JSON es un poco más tarde en la clase solo para asegurarnos de que todos estamos al día en eso, nada demasiado complicado, pero este es el formato de datos que se utiliza para intercambiar información entre un servidor y una web navegador. Hablando de eso, ¿qué hace AJAX? Bueno, tenga en cuenta esto, este es el arreglo habitual que tenemos. Esta es la conocida forma AJAX de enviar información entre un navegador y un servidor. Este es el escenario, en el que no queremos usar AJAX realmente. Imaginemos que tenemos un formulario de registro para una nueva página web y enviamos nuestros datos al servidor golpeando un registro en el punto y luego el servidor envía de vuelta toda nuestra nueva página web. Entonces, todo en nuestro navegador cambia y boom, tenemos una página completamente nueva cargada en nuestro navegador. Tenemos ese formulario de registro en nuestra historia. Entonces, si presionamos el botón Atrás, vamos a terminar de nuevo en el formulario de registro. Entonces, para esto utilizamos AJAX. Imagina que tenemos una página web abierta y es algún tipo de herramienta de búsqueda, puedes ver que tienes una lupa poco en su navegador y te mandamos fuera de nuestra consulta. Nos tocamos con algún endpoint llamado Buscar en nuestro servidor y estamos pasando un parámetro que queremos buscar, y luego el servicio envía de vuelta algunos datos, no envía de vuelta una página web completamente nueva. Lo que hacemos es tomar esos datos y meterlos en medio de nuestra página web existente, no
cargamos una nueva. Entonces, claramente, esa es una experiencia bastante diferente para el usuario. No se ve la página web, así que lo conseguimos y yo la veo recargar. Acabo de ver la página que estaban mirando originalmente con las cosas nuevas apareciendo repentinamente en medio de ella. Entonces, ¿cuáles son los pros y los contras de usar AJAX? Bueno, en el lado feliz, esto crea una gran experiencia de usuario cuando se usa bien porque
nos da páginas web muy interactivas y receptivas y en general, estamos enviando menos datos. Simplemente estamos enviando los datos que necesitamos del servidor o estamos recuperando los datos que necesitamos del servidor a través del navegador y no toda una página web. Una de las otras cosas de las que tenemos que ser un poco cuidadosos con AJAX, bueno, puede introducir complejidad que de otra manera no estaría ahí en nuestras páginas web. Creo que eso es un comercio justo porque estamos obteniendo funcionalidad que de otra manera no estaría ahí también. Pero la cosa es que usar AJAX puede hacer más compleja la lógica de cómo el código JavaScript. Usando una dos llamadas AJAX, no nos introduce demasiados problemas pero cuando nuestra llamada AJAX se completa y tiene que hacer otra llamada AJAX y eso se completa y eso requiere una tercera llamada AJAX, entonces puede ser bonita difícil saber qué está pasando y si algo va mal, depuración puede ser bastante difícil. Tenemos que tener mucho cuidado finalmente de no romper el botón Atrás porque si tenemos los resultados de algunas grandes solicitudes AJAX sentadas en una página web y el usuario hace clic en el enlace, tal vez eso está en nuestros datos AJAX y luego hacen clic en el botón Atrás, ¿ van a ver los resultados de las llamadas AJAX que hicimos anteriormente? Bueno, a menos que tuviéramos cuidado de almacenarlos en caché y reenviarlos, entonces probablemente no. Estarán de vuelta donde iniciaron antes de que se hicieran estas solicitudes AJAX. Entonces, tal vez estés diciendo, bueno, ¿qué pasó aquí? Los usuarios están acostumbrados al botón Atrás mostrándoles exactamente la misma página que dejaron antes de seguir un enlace fuera de esa página. Entonces, ahora que hemos echado un vistazo rápido a lo que significa AJAX, hemos visto lo que hace y hemos echado un vistazo a los pros y los contras, empezaremos a ver cómo se usa realmente en JavaScript en nuestra próxima lección de video.
3. Cómo usar AJAX en Javascript: Está bien. Entonces, ahora es el momento de hablar de cómo hacemos una solicitud AJAX en JavaScript. hoy, estaremos viendo cómo hacemos eso en JavaScript, obviamente, usando el objeto XMLHttpRequest, y cómo realmente podemos usarlo para hacer una solicitud. Entonces, XMLHttpRequest. Entonces, ¿qué es eso? Bueno, esta es una parte estándar de JavaScript en un navegador. Entonces, siempre va a estar disponible para ti en un navegador. Tiene todo lo que necesitamos para hacer una solicitud AJAX en ella. A menudo, a menudo, a menudo se abrevia sólo XHR o xhr en minúscula porque es bastante bocado. Por último, no se debe confundir con ninguna cantidad de otras cosas que se utilizan para solicitudes asíncronas. Hay un montón de cosas construidas encima de XMLHttpRequest y se están
construyendo más cosas en JavaScript para manejar operaciones asíncronas como promesas, como Async/Await, y estamos recibiendo algo llamado fetch pronto. Pero XMLHttpRequest es el método fundamental que tenemos para hacer una solicitud AJAX. Tan sólo una vez más ese XML en el nombre es totalmente engañoso. No tenemos que recuperar XML. La mayoría de las veces estaremos consiguiendo JSON y en breve estaremos viendo un pequeño ejemplo de eso. El primero que tenemos que hacer es inicializar y o crear un nuevo objeto usando el nuevo operador, y luego llamaremos a open on it. Vamos a ver cada una de estas cosas en detalle en tan solo un segundo. Entonces, no te preocupes demasiado por esta lista por la que estoy corriendo ahora mismo, pero lo primero que tenemos que hacer es llamar abierta, que es decir ¿cómo queremos hacer nuestra petición y a dónde vamos a hacer nuestra petición? Entonces queremos asignar una función a algo llamado onload, y esto es lo que nos llamaremos cuando la solicitud se complete con éxito. También queremos asignar una función a una propiedad llamada onerror, que se llamará si hay un error al realizar la solicitud AJAX. Por último, podemos llamar a enviar, que en realidad enviará la solicitud. Entonces, echemos un vistazo a eso en código porque eso es bastante abstracto, la lista ahí, y será mucho mejor verlo realmente funcionando. Está bien. Entonces, aquí estoy en un documento de ejemplo. Se trata de un archivo HTML con algo de JavaScript dentro de él entre etiquetas de script. Lo he hecho de esta manera solo para asegurarme de que todo esté en ese único lugar y fácil de ver. Esto lo he incluido en la sección de recursos para que puedas ir y echarle un vistazo y jugar con él tú mismo si quieres. Pero sólo voy a bajar al fondo del documento aquí y aquí es donde está nuestro HTML real, justo aquí abajo. No veo dónde lo seleccionaré. Ahí vamos. Este es uno de nuestro cuerpo HTML real y los bits que realmente nos interesan están aquí. Tenemos un botón al hacer clic ejecutará una función JavaScript llamada Cargar imagen. Entonces tenemos una pequeña imagen con un ID de GIF y fuentes configuradas a nada. Entonces, echemos un vistazo a esta función Cargar imagen. Aquí está. Podemos ponerlo en la pantalla, eso es genial. Entonces, definimos una función llamada Load Image, y aquí estamos instanciando un nuevo XMLHttpRequest. Vamos a saltarnos esto por ahora, volveré a ello muy pronto. Entonces llamamos abierto en nuestra nueva solicitud AJAX y
decimos bien queremos ejecutar un método GET contra una URL. Aquí está la definición de nuestra URL. Lo he roto en bits solo para delinear cada parte de la URL. Normalmente no lo haría
así, así que estamos haciendo una solicitud contra este endpoint aquí, que es parte de la API de Giphy por devolver un GIF aleatorio. Generalmente anexando un signo de interrogación para decir que va a haber algunos parámetros en esta URL. Estamos configurando nuestra calificación en G. Giphy es en su mayoría contenido aportado por el usuario, a
algunos de los usuarios les gusta enviar contenido
muy desafiante así que me apego al contenido clasificado G. Después tenemos nuestro separador para parámetros en nuestra URL y luego finalmente tenemos una clave API. Las claves API son una forma de decirle a un servicio como Giphy quién está haciendo la solicitud. Normalmente, íbamos a pedirle a Giphy una clave API propia y lo usaríamos en todas nuestras solicitudes. Esta es una muy antigua que Giphy solía usar para todos. Ahora tienen individuales y pasaremos por encima conseguir uno cuando empecemos a construir nuestra aplicación de ejemplo. De todos modos, habiendo dicho todo eso esa es nuestra URL aleatoria de Giphy y la usamos aquí. Entonces, estamos diciendo por favor abra esta URL usando el método GET. Esta bandera aquí verdadera significa hacerla asíncrona. Podríamos llevar esto a falso y hacerlo sincrónico pero todo el punto de AJAX es que es asíncrono. Entonces, lo haremos, lo haremos asincrónico. Después asignamos una función a onload, y esto es lo que queremos hacer cuando la solicitud haya concluido. Entonces, lo primero que hacemos es conseguir una referencia a nuestra imagen, recuerda que había una imagen en nuestro HTML con una ID de GIF. Ah sí, estoy en el campamento de gente que dice GIF no JIF. Entonces, lo siento si eso realmente te fastidia. Entonces queremos obtener la respuesta real que vino
del servidor para nuestra solicitud y eso está en una propiedad llamada texto de respuesta. Entonces lo que hacemos es convertir eso en un objeto JavaScript usando JSON parse. Entonces, como dije estaremos echando un vistazo a JSON y cómo funciona muy brevemente en una de las próximas lecciones. Pero el punto es que podemos convertir la respuesta en un objeto JavaScript y asignamos eso a los datos de respuesta. Después obtenemos algo llamado, imagen URL original, de la parte de datos de los datos de respuesta y lo asignamos al atributo fuente de nuestra imagen. ¡ Dios! Esto para bajar aquí, recuerda aquí está nuestra imagen, tiene un ID de GIF y aquí está su atributo fuente, actualmente establecido en nada, pero le asignaremos este valor. También estaré echando un vistazo a la documentación de la API de Giphy, para que sepas dónde encontrar esa información sobre lo que hay dentro de estas respuestas, porque sé que eso parece justo una lista aleatoria y misteriosa de atributos ahí. También asignaremos el atributo de error. Entonces decimos: “Oh, esto va a ser una función”, si algo sale mal sólo vamos a decir, “Mostrar una alerta”, y decir, “Oh, eso fue un error”. Entonces finalmente lo enviamos. Entonces, aquí es donde realmente se envía la solicitud y esperamos una vez que haya sido recibida y las respuestas enviadas con éxito, entonces se ejecutará nuestra función onload, y entonces nuestra imagen tendrá asignado un atributo fuente, y lo podremos ver en nuestro navegador. Entonces, ahora que hemos visto todo esto, echémosle un vistazo en el navegador. Está bien. Entonces, aquí está nuestra pequeña página de prueba AJAX, Giphy AJAX solicitud. Aquí sale el botón Cargar imagen. Entonces, si hice clic en eso. Ahí sí. Es más o menos lo que esperarías obtener si le pides una imagen aleatoria a Giphy, y podemos seguir presionando este botón para recuperar imágenes aleatorias. Sí, y así puedo seguir cargando estos todo el día. Hola Profesor. Entonces, puedes ver que la API de Giphy nos
está enviando referencias a imágenes que podemos cargar en nuestro navegador. Entonces, solo para recapitular, cuando hacemos una solicitud XHR comenzamos por ejecutar open en nuestra nueva solicitud, asignamos onload y onerror, que le dice a la solicitud qué hacer cuando tiene éxito o falla. Entonces, por último, enviamos la solicitud. Hemos visto eso implementado en nuestro código, podemos ver hacemos una nueva solicitud primero, luego la abrimos. Asignamos una función para onload, esto es lo que hacemos cuando la solicitud se resuelve con éxito. Asignamos una función a onerror, qué hacer cuando las cosas salen mal. Entonces finalmente lo enviamos. Entonces, ese es un ejemplo muy corto y rápido de cómo podemos hacer una solicitud AJAX.
4. API públicas: lo que tienes que saber: Está bien. Bienvenido de nuevo a nuestra intro a Ajax todo el mundo. En esta lección, sólo vamos a hacer un rápido recorrido por la definición de términos y asegurarnos de estar al día en algunos conceptos fundamentales que necesitaríamos para el resto de esta clase. Entonces, cómo usar una API y lo primero de lo que necesitamos hablar está bien, ¿qué es una API? Y luego llegamos a hacer un poco de refresco JSON porque JSON es el formato de datos que normalmente se utiliza para transferir datos entre clientes y alguna API web y luego vamos a salir y sacar la clave API para nuestro servicio de noticias y luego vamos a echa un vistazo a los docs para ese servicio así que tenemos un poco de idea de cómo usarlo. Pero antes que nada, ¿qué es una API? Bueno, es sinónimo de Interfaz de Programación de Aplicaciones y realmente es solo un lugar al que podemos enviar solicitudes de datos. Entonces, puedo decir “Por favor mándame todas las fotos que parecen perros” o podría decir “Oye, por favor guarda y guarda esta nueva foto de este perro”. También podemos recibir respuestas como nos va a mandar vuelta un montón de fotos de perros si estamos usando algún tipo de foto API o una API de imagen como Giphy o si estamos enviando una solicitud para guardar algo, podría volver y decir “Oye, yo lo guardó. Todo estuvo bien” o podría decir “Oye, hubo un error al guardar la foto de tu perro”, y luego podemos averiguar qué hacer después. Y una API es un término realmente súper general. Cualquier tipo de biblioteca de terceros que utilicemos cuenta con una API. Las interfaces web que vamos a estar viendo durante esta clase, como interfaces de socket de muy bajo nivel. Todas estas cosas tienen una forma definida de interactuar con ellas y ahora vamos a tener un poco de refresco rápido para JSON. Es increíblemente ampliamente utilizado pero sé que no todo el mundo realmente lo ha usado o está familiarizado con él así que lo voy a echar un vistazo rápido ahora, incluyendo jugar con algún código. Es sinónimo de notación de objetos JavaScript y lo que eso realmente significa es que es una forma de tomar alguna cadena formateada de cierta manera y convertirla en un objeto JavaScript y entonces podemos hacer lo mismo. Podemos tomar un objeto JavaScript y convertirlo en una cadena y estas cadenas son súper útiles para enviar entre una API y un cliente como tu navegador porque significa que
tenemos este stream yendo hacia atrás y hacia adelante que podemos convertir en un objeto Java Script. Es muy fácil formatear datos de esa manera porque lo hace muy bajo esfuerzo pero también es muy fácil de usar para nosotros. Se trata de un formato que podemos editar nosotros mismos para que podamos leer con facilidad y es una forma de datos muy intuitiva para usar. Y así que echemos un vistazo a eso ya en algún código ahora mismo. De acuerdo entonces, aquí hay un pequeño archivo que se incluye en los recursos del proyecto para esta clase. Se llama jsondemo.html y todo lo que tengo aquí es un poquito de HTML abajo con un botón que hace algo, demo de
JSON cuando se hace clic y aquí está nuestra función demo JSON y podemos ver eso en el navegador. Hacemos clic en el botón y algunas cosas se imprimen en la consola. Y ahora lo que estamos viendo aquí es que estoy usando un conjunto de cuerdas multilínea ES6. Eso sólo significa que podemos usar esto como un texto posterior para definir una cadena que se extiende sobre múltiples líneas y así es como se ve JSON. Vamos a envolver todo y algunas
llaves rizadas y luego vamos a tener un valor clave o un nombre clave seguido de
un valor y las claves siempre aparecen como una “cadena” entre comillas como esta y luego el valor, bueno podría ser que si es un número no se citará, si es una cadena se citará, el valor podría ser una matriz o podría ser otro tipo de objeto. El punto es que podemos tomar esta cadena, darle al JavaScript construido en el objeto JSON y pedirle que pase nuestra cadena SomeJSON y convertirla en algún objeto y luego podremos acceder a las propiedades de este objeto de forma individual al igual que un objeto JavaScript normal. Ahora podemos registrar todos estos individualmente a la consola. Entonces vayamos a través de nuestro navegador, demo de JSON, haga clic en “Por favor comprueba la consola” y yo hago clic en ella y he
aquí, aquí tenemos todos nuestros pequeños valores saliendo en la consola. genial. Entonces, claro que si vamos y tratamos de hacerlo, solo
voy a descomentar esto, por
supuesto solo para mostrar que no hay alguna magia peculiar de interpretación de cuerdas sucediendo aquí, si volvemos a nuestra cadena SomeJson y tratamos de
acceder a un propiedad de eso y presione refrescar y luego haga clic en el botón de la consola y si alguno nos estamos indefiniendo diciendo que esta cosa no tiene una propiedad de cadena porque es solo una cadena y ese valor es indefinido. Ahora claro que va al revés también, digamos que tenemos este nuevo objeto. Vamos a llamar a nuevo JSOBJ, objeto, y de la forma normal de JavaScript
le damos un nombre y luego un valor y seguimos haciendo eso. Podemos definir una matriz de cosas por supuesto y luego podemos ir y registrar eso a la consola como un objeto y por supuesto el navegador lo imprimirá muy bien para nosotros, siendo muy útil y luego podemos ir y convertir nuestro objeto JSOBJ en una cadena usando JSON stringify, nuevo JSOBJ y así si comprobamos eso en el navegador o recargamos de nuevo. Y aquí podemos ver que nuestro objeto ha sido en primer lugar impreso porque me acaba de gustar el log de la consola y se ha roto muy bien por el navegador pero también nos hemos convertido en una cadena usando JSON stringify y tú podemos ver acabamos de conseguir esta cadena muy grande aquí y esto es lo que enviaríamos a través de una API o en
una respuesta API o una solicitud porque es más fácil enviar un montón de caracteres por cable pero es más trabajo enviar un objeto real del cable a su manera. Y por eso usamos JSON. Es muy conveniente, es muy legible e intuitivo para que lo utilicemos y ahora es el estándar predeterminado para comunicarse con una API de la web. Entonces, hemos visto lo que es JSON, hemos visto cómo funciona. A continuación necesitamos obtener una clave API para la API que vamos a usar. Ahora, recuerda que una clave API es única para ti. Es una cosa que tienes que usar en tu búsqueda a una API. Asumiendo que se trata de alguna API pública y no es una que te has implementado en algún servidor en algún lugar, sino que obtienes tu clave API, te identifica, esa manera la API sabe si estás haciendo 100 mil millones respuestas o solicitudes un segundo entonces probablemente seas algún tipo de problema y te cortarán pero es una forma de identificarte cuando realices tus solicitudes. Y vamos a estar usando newsapi.org para sacar nuestros titulares de, originalmente
esperaba usar la API de Google News pero veo que está en estado de semicierre. No sé cuánto tiempo va a estar por ahí porque lleva
bastante tiempo semiapagado pero creo que podría desaparecer en cualquier momento. De todos modos, estamos usando este api.org y para usarlos tendremos que
conseguir una clave API así que dirígete a newsapi.org. Podemos ver que se nos presenta con esta página y lo primero que vemos es obtener la clave API. Entonces, adelante y llene eso. Soy Luke y mi dirección de correo electrónico está terriblemente hecha, fabish@. Esto es como una tontería dirección de correo electrónico chicos. Y puede que tenga que usar otra contraseña. Soy un individuo, no soy un robot. Acepto los términos y sí, usaremos un enlace de atribución en nuestra página eventualmente. Presentar, y no gracias, no voy a guardar eso. Y así finalmente, tenemos nuestra clave API. Este es el valor que necesitamos usar en nuestras solicitudes a la interfaz newsapi.org. Entonces, ahora que tenemos nuestra clave, mejor
revisemos la documentación de la API. Asumiendo que no es tu API, si es una API que has escrito tú mismo entonces probablemente sepas cómo funciona. Y eso es también asumiendo que la documentación existe y es coherente y está actualizada. Se trata de un servicio público. A veces están muy bien documentados y a veces apenas están documentados. Entonces, vayamos a revisar la documentación para la API de noticias. Y realmente lo que necesitamos hacer es simplemente recargar esa página y la documentación es bastante decente realmente con estos chicos. Eso es sencillo. Vamos a estar usando las solicitudes de titulares principales y ellos proporcionan una solicitud de muestra encantadora utilizando nuestra clave API ya. Están diciendo “Oye, así es como haces una solicitud a nuestra API” y esto es lo que vas a recuperar y luego te vas a dar esta encantadora estructura plegable para que puedas ver el nivel superior, tenemos como tres cosas, estatus y el número de resultados y luego nos dan los artículos y dentro de los artículos bien, es esto una fuente y el autor y un título y una descripción y así sucesivamente. Entonces, eso es realmente bastante bonito. Y luego van y documentan cuáles son los parámetros, cuándo se pueden ajustar y luego finalmente su documento,
su respuesta y lo que hay dentro de la respuesta. Entonces, esto es bastante sencillo y bastante fácil de usar para nosotros. Ahora en la siguiente lección, vamos a echar un vistazo a los tres tipos de estados principales que
necesitamos atender en una solicitud Ajax y comenzaremos a usar esta API. Por lo que espero verlos en la siguiente lección y recuerden si tienen alguna pregunta o le gustaría algo aclarado por favor háganmelo saber en el área de discusión y me pondré directo de vuelta a ustedes.
5. Tres estados básicos de AJAX (empezaremos por la espera): De acuerdo todos bienvenidos de nuevo. En esta lección, vamos a estar viendo los tres estados
fundamentales del Ajax que necesitamos atender cuando estamos programando un cliente de Ajax o tratando solicitudes y respuestas con Ajax. Ahora Ajax siendo como un protocolo de red, hay como un bazillion estados diferentes en
los que las conexiones de red de bajo nivel real pueden estar adentro, pero hay tres que realmente necesitamos
cuidarnos y ese código de cliente que está a la espera. Entonces, has enviado una solicitud y los usuarios están esperando que la solicitud le guste terminar o hacer algo. Tenemos que mostrarles algo, decirles
que las cosas realmente están sucediendo y luego finalmente el éxito. Bueno nuestra solicitud se completó con éxito, por lo que deberíamos hacer algo con la respuesta. En caso de que las cosas no funcionen, deberíamos manejar el error también. Entonces, tiempo de esperar. Entonces, ¿qué es este negocio con la espera? Bueno, tenemos que decirle al usuario que su acción ha tenido un efecto de algún tipo. Porque si hacen clic en un botón y no pasa nada, entonces sólo les va a gustar seguir haciendo clic en ese botón como locos probablemente. Tenemos que decirles realmente que, sí, se ha notado
tu acción y al hacer algo al respecto aunque aún no tengas los resultados,
y como decía, la retroalimentación ayuda a los usuarios. Les ayuda a saber que algo está pasando porque conseguir que las solicitudes asíncronas pueden ser muy lentas a veces. Bueno, no súper lentos como minutos pero
pueden ser lo suficientemente lentos como para que un usuario comience a rascarse la cabeza diciendo: “Bueno, ¿qué está pasando? No lo entiendo. Hice clic en el botón, no pasa nada”. Lo que realmente necesitamos hacer ahora es comenzar a implementar una solicitud a nuestra API de noticias. Entonces tenemos nuestra Clave API, hemos comprobado los docs. Entonces, voy a estar implementando una solicitud y mostrándole al usuario un poco de spinner de peso. No vamos a hacer nada con los resultados todavía, eso es para la siguiente lección, pero ya veremos cómo podemos hacerlo en este momento. Te animo encarecidamente a codificar junto a mí, porque en nuestros recursos de proyecto, tenemos giphy-news.html, que es html esqueleto, que incluye un enlace a algún CSS predefinido, que colocará un poco una página y algún estilo bastante mínimo solo para ayudarnos a empezar. También y parece que hay algo llamado news-api.js, ahí también, que es solo un archivo JavaScript vacío. Eso es lo que vamos a llenar. Entonces, tienes todo lo que necesitas para codificar también. Creo que esa es una gran manera de aprender y animarte fuertemente a golpear Pausa siempre que haya terminado de hacer algo e implementarlo también. Entonces, solo para darte un rápido análisis de lo que HTML además de incluir algo de JavaScript y CSS, tenemos el cuerpo, tenemos H1 yendo también nosotros, ya
sabes lo que estamos viendo. Tenemos div vacío, con un id ajax-espera y clase esperando. El animación y el spinner y todo se hace enteramente en CSS. Entonces, echa un vistazo a ese archivo si te interesa ver cómo hace eso. Básicamente es un div con una frontera discontinua. Está girando alrededor y tiene un tamaño y posición predefinidos. Entonces, eso hace que sea fácil de mostrar y ocultar. Entonces cuando entramos en nuestra sección principal de nuestra página, tenemos tres divs; error, titulares, gifs. Estaremos llenando cada uno de estos según sea necesario. Se puede ver que nuestro html ha proporcionado espacios para nuestro tres tipo de estados aquí. Tenemos nuestro div de espera que
mostraremos cuando algo esté pasando pero aún no haya terminado. Tenemos un div error para cuando las cosas salen mal y estos dos son para rellenar cuando las cosas van bien. Entonces, empecemos a implementar nuestro JavaScript. Entonces lo primero que creo que queremos es una función y la llamaremos mostrar titulares. Off a un gran inicio. Queremos asegurarnos de que esa función se llame cuando la página haya cargado o completado la carga. Entonces, diremos directamente la ventana de murciélago. AddeventListener, Correcto. Aquí es donde queremos realizar nuestra solicitud API. Entonces, solo voy a agregar esto en bastante rápido para evitar el dolor de verme pasar muchas horas haciendo mis errores tipográficos. Entonces lo que queremos como lo primero está bien, ¿a dónde debemos enviar nuestra solicitud? Sabemos que por mirar nuestra documentación y aquí, estamos de vuelta en la página de documentación de News API. Sabemos que podemos usar este punto final de titulares principales aquí mismo. Eso es genial. Eso lo tendremos ahí dentro. Entonces necesitamos tener un pequeño signo de interrogación para decir que hay algunos parámetros en nuestra URL y que nuestro- bueno, buscaremos dentro de EU. Nuestro siguiente parámetro establecerá la categoría a entretenimiento. Estoy usando el entretenimiento porque el uso general es un poco sombrío a veces. Pensé que lo mantendría grande y luego finalmente vamos a establecer API Key. Esta es mi Clave API, por favor no uses mi Clave API. No queremos que las noticias ni la gente se mezcle con eso. Entonces, ahí está. Tenemos nuestra URL. Ahora bien, ¿qué tenemos que hacer después de eso? Como hemos visto en nuestra lección anterior, cuando estábamos demostrando la API de Giphy, necesitamos crear una solicitud y luego necesitamos abrirlo. Diga, solicita abierta. Vamos a estar usando GET todo el camino por aquí. No vamos a estar almacenando ningún dato en estas API, así que vamos a estar usando GET para que podamos obtener datos desde ahí. Entonces por fin queremos que esta sea una solicitud asíncrona por lo que decimos Verdadero. Entonces, las cosas que necesitamos establecer por supuesto son decir onload, que no hará nada en este momento. De igual manera, tendremos que tener algún tipo de manejador de errores, qué hacemos cuando las cosas salen mal. Pondremos eso también a una función vacía por el momento. Pero lo que sí queremos hacer es, por supuesto, enviar nuestra solicitud y luego en este punto, queremos mostrar a nuestro usuario que algo realmente está sucediendo e implementar nuestra funcionalidad de espera. Para hacer eso podemos establecer nuestro ID o nuestro div más bien de Ajax Espera a solo volar. Actualmente está oculto. Tiene una exhibición de ninguno. Podemos configurar la pantalla para que se bloquee. Entonces, diremos muy rápido y diremos document.getElementById ('ajax-wait') 'bloqueo'. Ahora bien, realmente no queremos hacer este tipo de cosas en medio de nuestro show- Headlinescode pero esto es algo que se esconderá en otra función muy pronto. Pero sólo queremos asegurarnos de que realmente podamos hacer algo. Entonces, vamos a salir de nuestro navegador y darle un torbellino a eso, y ahí está girando felizmente. Como puedes ver sigue ahí girando. Nuestra solicitud obviamente ha sido hecha y enviada y estamos mostrando nuestro gif spinning. No obstante, ¿bien se ha completado la solicitud? ¿ Hay algún error? No lo sabemos. Será mejor que hagamos algo para ocultar esta cosa una vez que hayamos terminado nuestra solicitud. Entonces, aquí vamos en nuestra función y, por
supuesto, queremos poner eso a nada ahora. Muy bien. Entonces, volvamos a la recarga de nuestro navegador. Como puedes ver como estoy recargando, mostramos un div giratorio y luego vuelve a desaparecer porque completamos nuestra solicitud. ¿ Terminamos con éxito o sin éxito? Quién sabe, eso es éxito de registro. Mira eso y aquí diré error recarga. Mira nuestra consola, éxito o muy bueno y éxito. Entonces, podemos ver que estamos configurando nuestra URL con algunos parámetros en ella, creando un nuevo objeto XMLHttpRequest. Lo estamos abriendo, diciendo que queremos realizar un GET HttpRequest, con nuestra URL que definió. Queremos que sea asíncrono, cuando nuestra solicitud se complete con éxito, debemos ejecutar la función onload. Que se define así hasta el momento. Cuando hay un error, queremos hacer esto. Por último, lo enviamos, para que se ejecute una de estas. Por último, queremos mostrar [inaudible] para darle alguna retroalimentación al usuario, que su acción realmente ha tenido un efecto de algún tipo. Ahora, la siguiente cosita pequeña que voy a hacer es simplemente esconder nuestro documento getElementbyId bla bla blah cols ahí. Boom, ahí está. Entonces, básicamente estamos usando una función que toma un ID y un valor de visualización, obteniendo el elemento del documento, verificando para ver que existe el elemento y configurando la visualización en lo que sea que se haya pasado. Entonces tenemos una función show and hide, uno de ellos pasa en bloque para SetEDisplay el otro que pasa en ninguno. Por último, somos libres de bajar y decir HideEle ('ajax-wait'), y luego hacer lo mismo ahí. Ups, y entonces podemos decir show. Volveremos a probar eso en nuestro navegador, recargar, ese tardó un tiempo. Ahí puedes ver que hemos mostrado nuestro div pequeño blanco, nuestro feedback blanco y después hemos completado
con éxito y hemos eliminado nuestro div de espera de la página. Ahora bien, eso está todo bien, pero se puede ver que aún no estamos mostrando ningún titular en nuestra página, que es, lo que realmente, realmente queremos hacer. Entonces, en nuestra siguiente lección, estaremos trabajando en el caso de éxito donde leemos la respuesta de la API y escribimos los titulares individuales a nuestra página web. Como siempre, si tienes algún problema, las cosas no te están funcionando, avísame enseguida en el área de discusión y te ayudaré en cuanto pueda.
6. Lectura de titulares de nuestra API de noticias: De acuerdo entonces. Entonces, en esta lección, vamos a revisar cómo finalmente podemos leer los resultados de nuestra solicitud de titulares de nuestra API de noticias. Ya hemos visto cómo los esperaremos y sabemos que nuestra solicitud se completa con éxito, pero aún no hemos hecho nada con la respuesta. Entonces, hoy vamos a ver cómo podemos leer los resultados. veremos cómo los analizamos, ya visto cómo hacer eso en JSON pero vamos a trabajar a través de eso de todos modos. Por último, en realidad nos pondremos a exhibir nuestros titulares. Entonces, aquí estamos en nuestro código en JavaScript y si vamos y miramos nuestra propia función de carga. Puedes ver, como recuerdas, simplemente
ocultamos nuestro pequeño spinner y luego registramos el éxito a la consola. No súper emocionante pero lo que podemos hacer en su lugar, probablemente la siguiente cosa no tan emocionante pero más útil, es en lugar de registrar el éxito podemos registrar solicitud ResponseText. Entonces, ahora, ResponseText es todo lo que la API nos envió de vuelta, y recuerda que esto es un gran flujo en formato JSON, por lo que no es un objeto JavaScript con el que podamos hacer nada útil todavía pero
podemos desenfocarlo al log y ver qué es dentro de ella. Entonces, voy a guardar eso. Vuelve al navegador, recarga. Se está llevando un tiempo. Ya está cargado y se puede ver que efectivamente tenemos algo de vuelta de nuestra API. Dice: “Estado OK, resultados totales 20”, y luego entra en artículos. Se puede ver que tienes un cuadrado, corchete al principio ahí lo que significa que es una matriz y luego simplemente se pone fuera del borde de la línea de la consola porque es bastante grande. Entonces, en este punto estoy pensando : “Hombre, quiero ver qué hay dentro de esa respuesta”. Entonces, volvamos a nuestra documentación de la API de noticias y mientras podemos bajar a la documentación de respuesta aquí y ver, oh sí. Obtenemos un estatus, resultados, artículos. Eso todo se alinea con nuestra expectativa por lo que hemos visto en nuestra consola y luego dentro de la matriz del artículo, tenemos fuente, autor, título. Este es el titular o título del audio. Esta es la cosa con la que queremos jugar, ¿verdad? Entonces, volvamos a primero esa página web, y ahora nuestro código y en su lugar lo que haremos es decir NewsData. Firma del usuario Json.parse. Sí. Entonces, podemos hacer eso y sólo para que sepamos que algo sensato está sucediendo, imprimamos nuestro conjunto de artículos. Entonces, tomaremos nuestro registro de consola desde aquí y agarraremos nuestros artículos de NewsData. De nuevo, esto no es como una cosa súper útil pero nos va a verificar que sí tenemos un objeto JavaScript y podemos ver los artículos. Entonces, recargar, y bueno viejo Firefox, quiero decir Firefox aquí nos ha dado una matriz que podemos ir y mirar aquí. Bueno, y podemos ver lo primero es algo sobre Rihanna y algo más es sobre los Vengadores y Kylie Jenner. Tan emocionante. Entonces, ahora lo que podemos hacer es tener un simple bucle completo viejo y decir: “Para var articleIDX es cero”. Digamos que ArticleIDX es menor que- longitud ArticleIDX, vamos a hacer un plus plus. No soy un fan súper masivo de ese tipo de operadores pero mantener la vida sencilla. Ya puedo ir por eso. Está bien. Entonces, tengo un poco de bucle completo y finalmente, no
estoy satisfecho con ese formato. Como dije, ahora imprimamos exactamente un artículo, ¿no? Entonces diremos artículos de noticias. Imprimiremos el título de cada artículo. Sabemos que ahí hay un título. Entonces, intentemos eso. Volveremos a nuestro navegador y lo que registramos ahora es un montón de artículos o titulares de artículos a nuestra consola, lo cual es genial. Entonces, estamos cada vez más cerca y más cerca de lo que realmente queremos. Ahora, lo siguiente que hay que hacer es poner todo esto en la página web en lugar de en la consola, y para hacer eso voy a hacer este truco raro. Llamaremos a que la salida es una matriz. Entonces, lo que haremos es construir una matriz de HTML que
podemos atascar en nuestros artículos o en nuestros titulares, div. Entonces, recuerda que tenemos este div con una id de titulares y vamos a meterle un montón de cosas. El siguiente paso más sencillo que podemos hacer es decir, “output.push the title”, y luego finalmente, podemos decir, “Get by id”, y eso fueron titulares, HTML
interno, usuario sign output.join, así. Entonces, ¿qué estamos haciendo? Estamos recibiendo nuestros titulares div. Estamos diciendo que queremos que el HTML, básicamente todo dentro del div sea igual a nuestra matriz de salida unido con un montón de nuevas líneas. Entonces, podemos ir y echarle un vistazo a eso y luego conseguimos un montón de titulares todos en una gran masa intacta en medio de nuestra página allí. Nuevamente, hasta el momento tan bueno. Pero lo ejecutamos, es un poco más bien y cada vez que hacemos el titular vamos a ponerlo dentro es div muy propio. Eso los hará aparecer en nueva línea y nos da la oportunidad de aplicarles algún estilo también a ellos, pues mira algunos estilos predefinidos listos para nuestros artículos. Entonces, abriremos un div. Pondremos nuestro artículo, título o titular dentro de él y luego cerraremos ese div, y de nuevo podremos obtener el beneficio de eso solo uniendo nuestra salida en una gran cadena larga y asignándola a HTML en el elemento de nuestros titulares. Entonces, volvamos a eso y vamos a recargar, y ya ves que tengo una pequeña línea por encima y por debajo de cada uno de los titulares del artículo. Tan solo para separarlos un poco, y puedes están apareciendo individualmente en cada línea. Entonces, nos estamos acercando cada vez más y más cerca de cómo queremos que aparezcan realmente. Pero recuerda, sí queremos que sean camarillas. Tendrás que hacer click en ellos. Entonces, lo siguiente que podemos hacer es ponerlos dentro y una etiqueta. Entonces, diremos, “un href es igual. Entonces, podemos ponerlos dentro en una etiqueta así. Ahora, cuando volvemos a nuestro navegador, nos recargamos y todos están haciendo clic lo cual es genial pero cuando hacemos clic en
ellos, realmente no hacen nada. Pero ahora, esto se está poniendo un poco ocupado dentro de estas función onload aquí, y realmente quiero poner todo esto dentro de una función
propia solo para separarlo un poco. Entonces, voy a subir hasta arriba aquí y digo que estoy tratando de MakeHeadline. Se puede ver cómo he podido pensar en esto antes. Y vamos a tener aquí, vamos a tener nuestro título, eso es todo lo que necesitamos saber realmente. Y, sí así que pon todo eso ahí dentro. Y esto sólo se convierte en título. Y entonces lo que queremos hacer es devolver nuestra salida. Por lo que podemos pasar la salida, y devolverla de nuevo con unas cuantas cosas más dentro de ella. Entonces, ahora necesitamos usar nuestra función MakeHeadline. Borrantemente borré ese muy útil bit de texto. De todos modos. Ahí está de vuelta otra vez. Vamos a probar si eso funciona. Recargar y por supuesto necesito incluir también nuestra salida y decir que la salida está asignada allí. De acuerdo, finalmente podemos hacer eso, y está bien. Entonces, esto es lo que necesitamos aquí, y asegurarnos de que todo funcione como se esperaba. Y lo hace, así que todo bien y bien. No obstante, necesitamos nuestro MakeHeadline, necesitamos un poco de href para hacer algo cuando se hace clic. Entonces, diremos onclick es igual, digamos solo log. Borrantemente tenemos que empezar a escapar de cotizaciones aquí, clicado. Tan solo para asegurarnos de que esto vaya a funcionar para nosotros también. De acuerdo, guarde eso. Regresa a nuestro navegador, y podemos decir click, click, click, click, click, click. Podemos ver que eso se está ejecutando ahí. Y podríamos ser perdonados por pensar que lo siguiente que hay que hacer es decidir bien, sólo
pongamos nuestro título ahí dentro. Así, ¿verdad? Está bien. Entonces, solo comprobemos. Vea cómo funciona esto. Dale una recarga a esto. Por último, genial, estamos mostrando todos nuestros titulares aquí, y vamos a elegir uno con mucho cuidado para hacer click, y excelente que muestre el titular en nuestra consola, y la forma en que queremos. Hacemos clic en esa línea, error de sintaxis, faltante corchetes, cerrar corchetes tras lista de argumentos. Entonces, podemos ver que elegí uno de estos titulares, tiene una cita en él. Y por supuesto, estamos usando comillas simples aquí para encerrar nuestro título. Entonces, lamentablemente vamos a tener que hacer algo con las cotizaciones que están dentro del título. Y lo rápido y fácil que podemos hacer es un reemplazar todas nuestras cotizaciones simples. Y todos ellos. Entonces, he puesto una g ahí para decir, conseguir todo lo que encuentres en la cuerda, no solo la primera, y luego queremos sustituirla por una contrasta, y como es una contralga necesitamos hacer un doble escape de la contralga. Lo cual es súper aburrido. Usaría comillas dobles para esto. Correcto, entonces, ¿qué estamos haciendo aquí? Estamos diciendo, lo que queremos hacer es reemplazar cada sola cita, una barras inclinadas seguidas de una sola cita. Entonces, estamos escapando de ellos básicamente, diciendo que esta sola cita no tiene función en esta cadena. Es solo para exhibir. Quiero decir que usamos dos barras inclinadas contrarias porque estamos diciendo que no hagas el escape ahora, haz el escape en la cadena real que se imprime. Dios, y así lo que tenemos que hacer ahora es volver a nuestras noticias giphy, página web, recarga. Y elijamos algo que no tenga cotizaciones en él. Entonces, hay uno sobre Karlie Kloss. Podemos ver a Karlie Kloss se imprime en la consola, felizmente. ¿ Qué pasa con Avengers Infinity. Vea aquí nuestras comillas simples que aparecen en la consola. Días felices. Y finalmente tener ese algo con comillas dobles en ella. Oh querida, literal de cadena sin terminar. Entonces, eso va a estar causando problemas, por la doble cita. Va a haber una última cosa que vamos a hacer aquí. Vamos a decir EncodeuriComponent. Ahora bien, esto es algo que está incorporado en Javascript, que es para preparar una cadena para ser utilizada en una URL pero nos da otros beneficios como codificar muchas de las cadenas que causan, o codificar muchos de los caracteres que causan, nosotros problemas. No obstante, las cotizaciones simples no son tratadas por EncodeuriComponent. Cabeza hacia atrás. Daríamos una recarga a nuestra página, dar click en este título más problemático y podrás ver lo que tenemos aquí. Los espacios se han convertido en por ciento dos cero, que es valor hexadecimal para un espacio, y nuestros otros personajes problemáticos también se han convertido. Se puede ver que la cotización doble ahora es por ciento dos, y todavía tenemos nuestra sola cotización ahí que se ha escapado con una contralga, razón por la
cual está apareciendo felizmente en nuestra consola. Y el punto es que ahora tenemos un valor que podemos alimentar a la giphy API por recuperar un montón de imágenes que coinciden con los lúpulos de Drake en N*E*R*D y Lemon Remix de Rihanna. Entonces, eso es hasta donde vamos a llevar eso para esta lección porque lo que hemos hecho es enviar con éxito una solicitud a la API de noticias. Hemos recibido respuesta. Hemos procesado la respuesta, y la hemos puesto en nuestra página web. Estamos tomando medidas cuando se hace clic en la respuesta o cuando se hace clic en el título. Y lo siguiente que queremos hacer es enviar eso a la API giphy para recuperar un montón de imágenes. Como siempre, si te encuentras con algún problema durante esta lección, haciendo cualquiera de esto tú mismo, recuerda por favor házmelo saber en el área de discusión y te ayudaré de inmediato. De lo contrario, te veré en la siguiente lección.
7. Cómo manejar los errores de AJAX: Está bien. Entonces eso nos lleva al último de los tres estados Ajax de los que hablé, de los que necesitamos cuidar si tenemos bien el uso Ajax y eso es fracaso. ¿ Qué hacemos cuando las cosas no salen bien? Bueno, todo esto se trata de manejar errores obviamente. Entonces, si enviamos una solicitud fuera y la respuesta indica que no fue exitosa por alguna razón, y debemos hacerle saber al usuario que las cosas no salieron bien. Que lo que intentaban hacer quizá no fue exitoso. ¿ Deberían intentarlo de nuevo? Todo esto es parte de asegurarse de que el usuario entienda en qué resultado ha resultado su acción. Una vez más, esto va a ser un poco codealong. Por favor, haga una vez más copia la codificación a medida que vaya. Es sólo una gran manera de aprender y mucho mejor que sentarse y mirar porque obviamente voy a estar haciendo esto también, al mismo tiempo. Entonces, volvamos al código, y como refresco recordemos que tenemos este div aquí mismo con una id de error. Este es el que vamos a usar para mostrar mensaje de error, y sí tiene algún inicio especial predefinido en nuestro CSS para que se vea un poco rojo y un enojado como un error. También está configurado para tener una pantalla de no [inaudible], para que normalmente no lo veamos. Entonces, aquí estamos en nuestro código Javascript, y aquí está la función de nuestro titular de show y acaba de perder ahí por un minuto. Aquí estamos en el error. Entonces, asignamos una función a la propiedad on error de la solicitud. Lo primero que hacemos es ocultar los dientes blancos, para que el usuario sepa que su solicitud ha concluido. Entonces, lo último que haré es obtener nuestro elemento de error, y
ponerlo en un mensaje de error. Ahí vamos. Lo último que tenemos que hacer es mostrar un elemento, que es el elemento de error. Entonces, aquí estamos. Simplemente recargaré el archivo. Página web, y hay que dar click en esta, y puedo ver se sigue comportando como antes. Ahora, titular aparece en la consola y todo está bien. No estamos viendo ningún mensaje de error que si vamos y
apagamos nuestro WiFi y “Hey presto, voy a hacer un recargado”. Vemos un mensaje de error simplemente no el mensaje de error más bonito del mundo, pero podemos decir que estamos indicando con toda claridad que
ha habido un problema y estamos captando el hecho de que
hubo un problema y contándole al usuario sobre ella. Bueno en una recarga, y ahí tenemos de nuevo nuestros titulares. Entonces eso es todo, demostración muy rápida de cómo
podemos mostrar cuando las cosas han salido mal sin petición Ajax. En nuestra siguiente lección, pasaremos a poner en acción todo lo que has aprendido hasta ahora inscribiéndote en la API de Giphy. Echando un vistazo a los docs y luego encajando nuestros titulares en la API de Giphy para mostrar algunas imágenes.
8. Accede a la API GIPHY con tus increíbles nuevas habilidades en AJAX: Está bien. Entonces, es hora de poner en acción tus nuevas habilidades. Es tiempo de práctica. La práctica te ayudará realmente a consolidar todo lo que has aprendido hasta ahora. Vamos a utilizar el motor de búsqueda GIPHY. Tomaremos el titular que tenemos, o uno de los titulares en los que podríamos hacer clic en nuestra página web, y introduciremos ese titular en la búsqueda de imágenes de GIPHY, después,
mostraremos cualquier imagen que coincida con ese titular. Vamos a hacer esto un paso a la vez. Entonces, no estoy diciendo: “Oye, solo ve y haz eso ahora mismo”. El primero que tenemos que hacer, es inscribirnos a una clave API en GIPHY. Entonces, dirígete a developers.giphy.com. Haga clic en el botón Iniciar sesión. Haga clic en Unirse GIPHY que está en escritura pequeñita en la parte inferior del registro en forma. Vuelve a developers.giphy.com, porque una vez que te has unido, creo que te deja en giphy.com. Haga clic en Crear una App. Después rellene el formulario para crear la solicitud. Entonces te mostrará tu Clave API. Podrás usar eso en cualquier llamada a la API que realices. Voy a hacer eso ahora mismo. Seguro que ya se ha inscrito para servicios en línea antes. Entonces, no va a haber nada súper desafiante aquí. Pero, aún te animo a que vayas a probar eso antes de que me veas hacerlo también. Está bien. Entonces, aquí estamos en la página de desarrolladores de GIPHY. Probablemente sea todo lo que esperarías de GIPHY. Entonces, voy a dar click en Iniciar sesión. Voy a dar clic al diminuto enlace GIPHY Únete a GIPHY. Yo sí encuentro que su página de registro sea bastante distrayente. Usaré mi luke.fabish @lukefabish. Pondré mi nombre de usuario en lukefabish-gifs, y mi contraseña sería impresionante, algo alrededor de eso. Ahí vamos. No sé si puedes oírlo a través del micrófono. Esta página está haciendo girar a los fans de mi laptop y giran como locos. Entonces, voy a dar clic en Unirse y bajarme de esto lo antes posible. Yo diría que no guardes eso. Está bien. Entonces, nos hemos unido y ahora llego a dar clic en Crear una App. Vale Entonces, vamos a decir, Todas las noticias que GIPHY nos puede dar. Yo lo llamaré Noticias GIPHY. Voy a dar click Crear App y boom. Ahí está mi clave API, la cual he seleccionado y copiado. Entonces, esa es la clave que podemos usar para realizar solicitudes de API contra la API de GIPHys. Ahora, que hemos hecho esto, mejor
vamos a revisar los docs API de GIPHY. Entonces, podemos encontrar esos en developers.giphy.com/docs. Solo hay algo de navegación por la izquierda. Consulta Documentación Técnica. Haga clic en Buscar Endpoint. Después podrás revisar sus parámetros en las solicitudes y podrás ver lo que se incluye en la respuesta de esas solicitudes. Parte de esas respuestas es algo llamado el Objeto GIF que creo. Entonces, echa un vistazo a Definiciones de Esquema, nuevo, en la navegación de la mano izquierda. Haga clic en el Objeto GIF. Sobre todo, no te preocupes. Estaré dando un paso adelante usando la respuesta GIPHY, particularmente el Objeto GIF, que es algo grande. Me encontré un poco desconcertante. Pero, lo haremos juntos. Está bien. Entonces, no tienes que escribir esa URL en tu barra de direcciones. Simplemente podemos hacer clic en el ítem del menú Docs. Se acabó de una alegre y giphy-like otra vez. Pero por encima del lado izquierdo aquí, tenemos Documentación Técnica. Echa un vistazo a eso. Aquí está nuestra Búsqueda GIFS. Entonces, vamos al Search Endpoint. Se puede ver que el anfitrión es api.giphy.com. Aquí está nuestro camino y nos dice qué debe entrar en la solicitud. Nuestra clave API, por supuesto, las consultas, que estableceremos en nuestro titular, y algunas otras cosas que nosotros, o la otra que realmente usaremos es la escritura. Lo pondremos en G para protegernos de algunos de los contenidos de GIPHY más desafiantes. La respuesta nos dice que obtenemos algo llamado datos. Esto va a ser el que tendremos una matriz de Objetos GIF, Paginación, y algo llamado Meta Object. El que realmente necesitamos revisar, oh, hombre mi fan se está volviendo loco por el momento, es el Objeto GIF. Podemos simplemente hacer clic aquí para ir y mirarlo. Pero, dije que está en Definiciones de Esquema, y es Objeto GIF. Aquí vamos. Nos dice que tenemos que escribir una identificación,
una babosa, muchas cosas en realidad,
como montones, y montones y montones de cosas. Incluye la mayoría de todas las imágenes. Entonces, tenemos que ir a mirar el objeto de las imágenes. Aquí es donde residen realmente nuestros datos de imagen o URL para encontrar la imagen. En esta respuesta hay un montón de tipos diferentes. Hay altura fija, y ancho fijo, y ancho fijo todavía, y ancho fijo bajado de muestreo, y así sucesivamente, y así sucesivamente, y así sucesivamente. Encontrarás que bajamos camino al original. Está bien. Entonces, éste es el que vamos a usar. Entonces, iremos a buscar nuestro original, que es otro objeto, que tiene una URL. Simplemente utilizaríamos esta URL para mostrar nuestra imagen. Como dije, esto es mucho detalle. Lo que queremos está enterrado bastante profundo en la respuesta. Te mostraré cómo podemos acceder a eso en nuestro código. Entonces, un paso a la vez. Cómo vamos a hacer nuestra Búsqueda GIF. Entonces, este es el bit donde quiero que encienda su editor de texto, vaya desde donde lo hemos dejado con nuestros otros pasos hasta ahora,
y básicamente, haga una copia de la función de nuestro titular de show que ya tenemos y llámalo Mostrar GIFs si usted me gusta. Vamos a reemplazar algunas cosas ahí para empezar. Entonces, ya sabes cómo construimos la URL con algunos parámetros. Ahora, nuestra URL debe ser esta, http://api.giphy.com/v1/gifs/search. Deberíamos utilizar los parámetros de la siguiente manera. El rating debería ser G, Q debería ser el titular, y hablaré de eso justo en un momento, y el apiKey debería estar configurado en cualquiera que fuera tu clave API. A continuación, asigne una función para onload para su nueva solicitud http XML. Simplemente haz que imprima los resultados de la solicitud API a la consola del navegador. Entonces la propiedad onerror puede ser más o menos igual que antes con un mensaje ligeramente diferente, ¿verdad? Se produjo un error al obtener GIF en lugar de haber un error al obtener titulares. Pero lo que realmente quería volver es por los parámetros. He dicho que Q debería ser igual a su titular clicado. Entonces, ya sabes dónde construimos nuestro enlace titular. Aquí está justo aquí. Estamos construyendo nuestro enlace. Tenemos onclick=console.log. Cambia eso por el nombre de tu nueva función, Mostrar GIF, si así es como decidiste llamarlo. Pasaremos en nuestro título codificado en URI. Entonces eso estará disponible para que pases a la solicitud de búsqueda de GIPHY. Entonces, por favor sí tengan un intento de implementar eso. Como dije, podemos empezar con una copia de nuestra función Show Headlines, modificarla usando la información que tienes aquí. Una vez que hayas hecho eso, pasaré por cómo podemos empezar a mostrar imágenes individuales en la página web. Entonces, aquí estamos de vuelta otra vez y ahora voy a hacer mi función Mostrar GIFs. Entonces, como dije, de verdad, súper te animo fuertemente a que tengas un go en esto por tu cuenta antes de seguir aquí. Sólo porque eso es como súper buena práctica. Voy a empezar con una copia de nuestra
función de titulares de show y sobre la parte superior del último corsé rizado, fatal error de cálculo. Entonces, lo que queremos hacer, déjame llamarlo Mostrar GIF. Está bien. Entonces, tenemos Mostrar GIF en nuestros titulares URL se va a convertir en nuestra URL GIF. URL de GIF, la voy a usar aquí abajo. Está bien y voy a reemplazar eso por el GIPHY API End of Point. Entonces quiero establecer nuestra calificación es igual a g. Diré q es igual a, bueno, necesitamos tener ese tiempo pasado. Voy a decir, sólo voy a llamarlo Search Term, porque definitivamente podríamos volver a
usar esto en el futuro. Entonces, vamos a estar buscando, podríamos usarlo para buscar más que titulares. Está bien. Entonces, ahí está nuestra URL con parámetros. Estamos haciendo nuestra petición como antes. Emitimos un Get ya que estamos pidiendo información y no tratando de actualizar información en el servidor. Debería ser un post. Ahora, nos metemos en definir nuestro onload. Nuevamente, ocultarán nuestro elemento de peso. Diremos, bueno, sí, entonces, solo enviaremos esto a la consola, ¿no? Como dije, haríamos console.log. El resto de ella podemos deshacernos por ahora. En el error diremos : “Hubo un error al recuperar GIF. Por favor inténtalo de nuevo”. Entonces, lo último que necesitamos hacer es asegurarnos de que
se llame a esta cosa cuando se haga clic en uno de nuestros titulares, así que volveremos a donde construimos el titular y diremos, “ShowGIFs”. Ahí vamos. Entonces, voy a recargar nuestra página de Noticias GIPHY. Déjame hacer clic en un titular, y puedes ver que nuestro blanco se está mostrando y luego desaparece. Entonces puedes ver que tenemos todas estas cosas aquí de GIPHY, así que esta es la respuesta de la API de GIPHY. Según lo prometido, comienza con una clave de datos, que es una matriz de los Objetos GIF como vimos definidos en la documentación de GIPHY. Entonces, aquí estamos de vuelta de nuevo en nuestra función de show GIFs, y me acercaré a esto de la misma manera que lo hicimos anteriormente. Trabajaremos a través de ella un poco a la vez solo para que podamos navegar lentamente hacia sacar estas cosas a la página web en un formato que queramos. Entonces, lo primero que haré es definir un objeto. Lo llamaré GifData es igual a Json.parse (Req.ResponseText). Vamos a dar salida a eso en su lugar, GifData. Entonces, voy a guardar eso, volver a nuestro navegador, recargar, click en un titular y ver que esto se
ha descompuesto ahora en un objeto real y siendo impreso muy bien para nosotros por Firefox. Tenemos tres partes fundamentales de nuestra respuesta. Tenemos datos, tenemos meta y paginación. La paginación es información sobre cuántos resultados hay, cuántos resultados hay arriba una página, y nos permite hacer una página a través de grandes conjuntos de resultados. Pero, no vamos a estar haciendo eso, sólo estaremos haciendo la primera, la primera página de resultados. Un poco de metadatos nos hablan de nuestro estado, 200 bien, el mensaje está bien, y nos da ID de respuesta, y luego finalmente, datos con nuestros objetos GIPHY, que son todas estas cosas. Si vamos a buscar una de esas, podemos ver que esa cosa que vimos en la documentación está aquí. Nos interesan las imágenes. Bajemos con las imágenes, y luego finalmente después de todo eso, podemos ver que hay un original con la URL. Podemos usar esa URL para mirar realmente un GIF. Me pregunto qué es ese GIF. Vamos a darle click. Muy bien. Entonces, empecemos a usar esos datos. Entonces, en lugar de simplemente registrar los datos GIF, lo que podemos hacer es configurar otro poco for loop. Diré por, digamos que es menor que el número de elementos en nuestra respuesta. Entonces, diré “Gifdata.data.length”. Diré, “GifidX”, nuevo por brevedad usando un operador unitario, no un ventilador. Entonces, ¿qué podemos hacer con esto? Bueno, lo que podemos hacer es que podemos decir, vale, por favor muéstranos datos (GifidX) .images.original.url. Cielos mío, así que creo que eso es correcto. No recuerdo exactamente. Veamos qué obtenemos en nuestra consola. Recargarla. Da click a un titular, y aquí nos dan un montón de GIF. Ahora, vamos a dar un click hacia arriba, a ver qué obtenemos. Yo sí encuentro este levemente adictivo pinchando sobre estas cosas para ver cuáles son. De todos modos, así que ahora que tenemos eso, tenemos todo lo que necesitamos para empezar a meter imágenes en nuestra página web. Pero, ¿cómo vamos a hacer eso? Bueno, realmente lo que quiero hacer es crear un montón de etiquetas de imagen y poner esas dentro de nuestros GIFs div porque si recuerdas, nuestro HTML tiene un div con una ID de GIFs, así que quiero llenar eso con imágenes, cada una con sus atributos de origen establecidos a lo que sea nuestro GifData, gifidX, images.original.url es tan directo. Sé que voy a querer una nueva función para esto. Vamos a inventar uno, addGifImage así. Esto va a ser algo que añada nuestra URL para crear una imagen dentro de un contenedor. Entonces, nuestro contenedor va a ser ese div llamado GIF. Entonces queremos todo esto ahí dentro. Esos sonidos divertidos que puedes oírme haciendo solo a mí usando comandos. Entonces, tenemos una definición de una función para hacer eso por nosotros. Entonces, vamos a subir a arriba mostrar GIF y crear esta función llamada
función addGifImage AddToElementID e IMGSRC. Entonces, lo que queremos hacer es crear una nueva imagen, y diremos, porque le pediremos al navegador que haga eso para que creemos un nuevo elemento de imagen, CreateElement de tipo img. Ahora que tenemos una nueva imagen, podemos decir que es una fuente, y decir Newimg.Source es igual a fuente de imagen. Lo que queremos hacer ahora es agregar esto a nuestra imagen, pues un contenedor para nuestras imágenes. Hemos pasado el nombre de ese contenedor aquí, AddToElementID. Podría simplemente llamar a eso ImageContainerID. Ese parece ser un nombre más intuitivo. Entonces, diremos containeRele es igual document.getElementById (ImageContainerID). Entonces podemos decir containerele.add. No, es apéndice. Gracias por recordarme. Editor de texto un NewIMG. Estamos prácticamente terminados. Entonces, ¿qué va a pasar aquí? Cada vez que miramos una de estas URL, necesitamos llamar a AddGifImage, y vamos a decir,
por favor, haga un nuevo elemento de imagen, establezca la fuente a esta URL y anexarlo a nuestro contenedor GIF. Entonces, nuestros GIFs div. Veamos cómo va eso en el navegador. Recargar, esperar, y voy a dar clic en 'Voluntaria' Renovado. Está bien, y mira lo que tenemos. Aquí te dejamos un montón de GIF apareciendo de GIPHY. Ellos más o menos igualan a este nuevo negocio de Will y Grace. Entonces, sí y están apareciendo así lado a lado y los GIFs están apareciendo en este formato de columna otra vez, por el CSS que he configurado previamente para esto. Entonces, esto es bastante bueno. Entonces, veamos otra, Bella Hadid y algo u otro, ¿
y qué está pasando aquí? Algunas cosas parecían haber cambiado, otras no. No estoy seguro de que nuestra calificación G esté funcionando realmente de la manera que debería aquí, pero tenemos como cargas más GIFs de los que deberíamos tener. Lo que está pasando aquí es, porque estamos llamando a este AppendChild a nuestro contenedor, es agregarle muchos GIFs o estas imágenes pero no está despejando los viejos. Entonces, mejor que hagamos eso antes de hacer otra cosa. Entonces, lo que vamos a hacer de nuevo, digamos sólo document.getElementById, GIFs, punto, así. Entonces, eso es decir, oye, todo dentro de nuestros GIFs div lo puso a nada, cadena vacía. Entonces, veamos cómo funciona eso en el navegador ahora. Vamos a recargar esto. Voy a dar clic a esta cosa sobre Barbra Streisand. Voy a deshacerme de nuestra consola. Bueno, aquí están nuestros GIF. Wow, príncipe Carlos. Entonces, conseguimos algunas otras imágenes de Prince aquí claramente, pero podemos ver que estos GIFs anteriores están siendo despejados y los
reemplazamos por todos estos otros tipos de GIFs Princey. Entonces, esta es más o menos la aplicación ya que pretendíamos construirla. Tenemos titulares por un lado, GIF por el otro que coinciden con titulares cuando hacemos clic en ellos. Estamos obteniendo todos estos datos de dos API diferentes donde obtenemos los titulares de la API de noticias. Alimentamos un titular en la API de GIPHY para obtener un montón de imágenes GIF coincidentes.
9. ¡Llegó la hora de despedirnos!: Está bien. Todo el mundo, eso es todo para nuestra clase. Hemos cubierto mucho terreno. Hemos visto cómo trabajamos con JSON. Hemos visto cómo accedemos a las API públicas, cómo podemos usar AJAX para hacer solicitudes, leer respuestas y manejar errores, y por supuesto, hemos construido nuestra pequeña página web para mostrar regalos que coinciden con los titulares del mundo. Por favor, no olvides publicar tu proyecto en el área de los proyectos. Me encanta ver el trabajo que hacen los estudiantes, y, por supuesto, estoy aquí listo y esperando para ayudarte si te
encuentras con algún problema mientras construyes tu proyecto. De lo contrario, por favor no te olvides de seguir si quieres ver más clases como esta y espero volver a verte en el futuro.
