Desplegando el proyecto

Clase 22 de 26 • Curso de Asincronismo con JavaScript

Clase anteriorSiguiente clase

Cristian Leonardo Acero Mancipe

student•

"Nunca paremos de aprender"

Diego Mauricio Parrado Cardozo

student•

aqui tamos!!!

Alvaro Eduardo Garzón Pira

student•

@Ikal...

Fuera de memes o bromas, el mensaje de "Nunca pares de aprender" es algo más significativo que solo acabar todos los cursos o si te mueres, si te mueres pues nada, al menos hasta el día de tu muerte aprendiste algo nuevo cada día, en este mundo no hay nadie, absolutamente nadie que lo sepa, por lo que si acabas todos los cursos pues super, felicidades campeón, pero tienes más cosas por aprender de otros temas que quizás no sean de tanta atención como cocina, mecánica, carpintería, entre otros; Solo toma esa frase con más calma, no hay que ser el aguafiestas de los comentarios. :)

Maria Gabriela Rodriguez Cuevas

student•

🖨️ 𝗖𝗹𝗮𝘀𝗲 #𝟭𝟵: 𝗗𝗲𝘀𝗽𝗹𝗲𝗴𝗮𝗻𝗱𝗼 𝗲𝗹 𝗽𝗿𝗼𝘆𝗲𝗰𝘁𝗼 🖨️ . Debemos hacer la inserción de content para tenerlo visualmente, justo antes de catch:

content.innerHTML = view; //innerHTML es igual a la vista que se ha creado e itera con el metodo map y devuelve un nuevo arreglo con los elementos que queremos obtener como el título, la descripción, la imagen miniatura de la API

Para el catch, se debe agregar la estructura (podemos editar la salida como queramos):

catch (error){
console.log(error); //en caso que de que haya un error el catch lo captura e imprime qué tipo de error devolvió
}

Para conectar el index con el main, se agrega un script con la raíz del proyecto:

<script defer src="./assets/main.js"></script> <!--cuando ésto se ejecute en el navegador, va a leer el archivo main y asignar en memoria c/u de los elementos API, options (la lógica del código).-->

Es importante colocar la palabra defer:

++Defer++ es un atributo ++booleano++.
Solo debe usarse si hay un script externo que lo contenga src
El script se descarga en paralelo al análisis de la página y se ejecuta tan pronto como esté disponible (antes de que se complete el análisis). Fuente: aquí .
Se ejecuta el index.html con la extensión Live Server y debe aparecer la landing con todos los elementos de forma correcta.
Con la herramienta Inspeccionar del navegador (dar click derecho a la página y buscar Inspeccionar), nos permite analizar cuáles son los posibles errores arrojados por consola (Console) y si se selecciona la pestaña Network, se puede visualizar los servicios y conexiones a la API en vivo.
Una vez que estemos satisfechos con la landing, se procede a subir el código a un servidor, en éste caso a Github.
Para el ++deploy++ se hace la implementación de Github pages (mostrar nuestro código html dentro del repositorio).
Vamos a consola para instalar el paquete con: npm install gh-pages --save-dev-
Agregar en el archivo package.json el script (editar el apartado “test”):

"scripts": {
"deploy": "gh-pages -d src"
},

Se crea una nueva rama en el repositorio y se habilita para su publicación. Para ello primero se debe actualizar los cambios al repositorio antes del deploy, en consola para conocer el estado del se proyecto: git status

Para confirmar y comentar que hay nuevos archivos y cambios se coloca: git commit -m “[ADD] files”
Por último se hace el deploy con el comando: npm run deploy que ejecuta un comando de gh-pages para la subida de una rama y que luego se pueda mostrar como una página web.
-Para obtener la dirección que arroja en Github con gh-pages, hay que entrar en la pestaña de Settings, en el panel izquierdo entrar a Pages, automáticamente nos muestra la url para ver nuestra landing y compartirla a otros.

Alejandro Sebastian Dubon Estrada

student•

En esta clase del curso profesional de javascript explican como es que llega un script al navegador en el caso de defer se va a ejecutar Javascript hasta el final, es decir luego de que se cargue todo el documento.

Jheyner David Ibagon Cuenca

student•

Es verdad, explica muchas cosas, pero a un nivel intermedio avanzado; lastimosamente no tuve empatía de conexión en aprendizaje con él, es muy bueno, pero creo que para la parte académica NO, se aleja a muchos profesores en su metodología de enseñanza y para este tipo de curso que es muy avanzado y útil NO logre aprender y entender muchas cosas, con él llegues hasta el 50% de su curso lo abandone y seguí en la ruta de aprendizaje para REACT pues sentí estancamiento. Saludos

Alvaro Eduardo Garzón Pira

student•

Es muy interesante lo que indicas Jheyner, supongo que eso pasa con unos, otros como yo me sentí muy bien con este profesor, es cierto que en ocasiones no es tan bueno al momento de explicar diversos temas pero él me ayudó a resolver dudas, no he acabado el curso pero si he visto que mucha gente se queja de él, te invito a que le des otra oportunidad al profesor ;) Y que tengas el título de cada clase como tema a investigar por aparte, para que el profesor solo te resuelva dudas.

Carlos Machado

student•

Luego de haber pensado mucho decidí adaptar con esto una web tributo a Lovecraft que tenía guardada, los videos quedaron en la última secci´n con la opción de ir a ellos directamente

Arian Daniel Benjamin Goicochea

student•

Una bestia!

Ramiro Godoy

student•

Quiero avisar que está caído el link para hacer el desafío

César Augusto Cortés Labrada

student•

Si, y sigue caído a la fecha.

Christian Eduardo Figueroa Sandoval

student•

También he estado intentando pero aún no hay acceso a ese enlace.

Fabian Bejarano González

student•

No he logrado que funcione. En mi caso la consola afirma que videos.items no está definido, por lo que asumo que el llamado a la API no está sirviendo.

Hice debugging con un console.log dentro de la función fetchData y el resulto de data es un objeto que dice 'You are not subcribed to this API'. ¿Para usar esta API en especifico hay que pagar la dub premium de RapidApi? Se me hace raro porque en la pagina dice que la API es 'Freemiun'.

Francisco Ponce

student•

Podría ser que no le diste clic en el botón de suscribir en la página donde estábamos testeando la API, hay que dar clic en ese botón y posteriormente elegir la capa freemium $0. Te limita a unas cuantas peticiones diarias, pero sí funciona para resolver el proyecto del curso gratis. Es lo que se me ocurre por el error que mencionas.

Aunque si no funciona, igual podría ser otra cosa y en ese caso, sería cool si pudieras compartir tu código para que entre todos te demos un manito.

Fabian Bejarano González

student•

Uuu, si, tienes toda la razón, no le di a la suscripción gratis. ¡Ya está sirviendo! ¡Muchas gracias!

Nicolás Goux

student•

Realice un proyecto desde cero utilizando html, sass y js. El proyecto se basa en utilizar la API PokeApi para obtener de manera aleatoria un pokemon, mostrar sus imagenes y los detalles del mismo. Dejo el enlace al GitHub Pages https://nicogoux.github.io/Find-your-pokemon-app/

Raycris Maldonado

student•

Para el reto, utilice la libreria que se llamam sweet alert es muy facil de usar, se las recomiendo, aqui les dejo el link https://sweetalert2.github.io/#examples

Alvaro Eduardo Garzón Pira

student•

Que gran aporte, ¡Gracias!

Juan Luis Medina Coelho

student•

Parece que por alguna razón no puedo consumir las APIs. Al cargar la pagina me sale un error en el GET que dice 403, lo que parece significar forbidden, o sea que no tngo permitido el acceso. Es muy raro porque revisé otros proyectos poesteados en los comentarios y parecen no tener problemas consumiendo las APIs de youtube u.u

Carlos López

student•

me pasaba lo mismo, se soluciona seleccionando la suscripción gratis, saludos

Tahiris Goliat

student•

Tengo una duda, que quizás tenga una respuesta obvio. En caso de que exista un nuevo video en la lista, se mostrara automáticamente sin necesidad de refrescar la pantalla?

Oscar Barajas Tavares

Team Platzi•

No, tendríamos que crear un hook para notificar, en la API de Youtube es posible hacerlo.

Carlos Quesada Díaz

student•

Hola! Aquí les dejo mi versión 1.0. Apliqué el dark mode en Tildwindcss y capté el vídeo de YouTube que tengo en uno de mis canales. Mi reto es ahora usar la API de Pinterest para insertar mis proyectos.

!Porfolio Darkmode 1.0

N40 M10

student•

JOSE DAVID OROZCO CASTAÑEDA

student•

Algo molesto de la metodologia del profe es que asi sea algo sencillo no lo explica asi sea por encima como el defer.

dejo una explicacion rapida

Es posible que la solución que te hayan sugerido sea utilizar el atributo "defer" en la etiqueta del script en el HTML. El atributo "defer" se utiliza para diferir la ejecución de un script hasta que se haya cargado completamente el documento HTML, lo que significa que el script se ejecutará después de que se hayan construido los elementos HTML de la página web.

El error "Cannot set properties of null (setting 'innerHTML')" se produce cuando intentas establecer la propiedad "innerHTML" en un elemento que aún no ha sido creado en el DOM (Document Object Model). Si colocas el script que intenta acceder al elemento antes de que se haya creado el elemento en el HTML, se producirá este error.

Al utilizar el atributo "defer" en la etiqueta del script, le estás indicando al navegador que diferirá la ejecución del script hasta que se haya construido completamente la página web, lo que garantiza que los elementos HTML que se intentan acceder ya existan en el DOM.

Por ejemplo, puedes agregar el atributo "defer" en la etiqueta del script de esta manera:

php
Copy code
<script src="tu-archivo.js" defer></script>
De esta manera, el script se ejecutará después de que se haya construido la página web y se hayan creado los elementos HTML que se intentan acceder, lo que evitará el error "Cannot set properties of null (setting 'innerHTML')".

Jair Daniel Lozada Mariño

student•

creo que tambien funciona si se coloca el script al final antes de cerrra la etiqueta body

Miguel Ángel González Jimenéz

student•

Víctor Esteban Cómbita Daza

student•

Mi proyecto: https://vcombitad.github.io/async-landing/

Diego Fernando Mera Largo

student•

Aqui dejo humildemente mi aporte, en mi caso, consumi la API de studio ghibli, la puedes encontrar aqui si deseas probar tu tambien!: https://ghibliapi.herokuapp.com/#section/Base-URL

y aqui esta el resultado de mi poryecto: https://sora-san-df.github.io/Project-CV/

y slgunas fotitos! c:

Bryan Josue Vivanco Silva

student•

hola me sigue sin mostrar los videos en mi landing, tengo ese mensaje en consola: {

"message": "Invalid API key. Go to https:\/\/docs.rapidapi.com\/docs\/keys for more info."

}

los datos de la api-key y de api-host estan bien escritos, alguien me puede ayudar?

Jhon Freddy Paz Guzman

student•

me sale exactamente el mismo error XD:

{"message":"Invalid API key. Go to https:\/\/docs.rapidapi.com\/docs\/keys for more info."}

Christopher William Flores Rimac

student•

Hola me llego un correo "GitGuardian has detected the following RapidAPI Key exposed within your GitHub account." saben que significa ?

Shuriko Alzate

student•

Hola, alguien me puede decir porque no me sale mi pagina publicada? El link que me da github me manda solo esto :( T---T:

Shuriko Alzate

student•

y ya subí todo al repositorio...

Sergio Javier Lopez Olivera

student•

Saludos Shuriko, probablemente tenga que ver con las siguientes razones que le presenté a un compañero:

No has subido todavía los cambios a tu repo
Todavía te falta instalar el paquete de npm para actualizar la gh-page
No has configurado todavía el script para correr el comando en npm
Quizás tienes los archivos en una rama o conjunto de carpetas diferentes (hay discrepancia en la ruta del script en el package.json y tu configuración real en tu entorno de trabajo)
No has vinculado el main.js en el archivo html o no has puesto la palabra defer antes de src en el script main.js

Esas son las que se me vienen a la mente en estos momentos.

Andrés Felipe Cubillos Ospina

student•

Muchachos para los que les sale el error de que no cargan los datos de la API, es facil la solucion: La pagina Rapid de consumir Apis no te deja si no estas suscrito a algun plan, deben tomar el plan gratuito y ahi si se cargan los datos en nuestra landing page, a mi me funciono 🥳🥳

en caso de que no sea eso revisen el codigo debe haber algun error

content.innerHTML = view; //innerHTML es igual a la vista que se ha creado e itera con el metodo map y devuelve un nuevo arreglo con los elementos que queremos obtener como el título, la descripción, la imagen miniatura de la API

<script defer src="./assets/main.js"></script> <!--cuando ésto se ejecute en el navegador, va a leer el archivo main y asignar en memoria c/u de los elementos API, options (la lógica del código).-->

Es posible que la solución que te hayan sugerido sea utilizar el atributo "defer" en la etiqueta del script en el HTML. El atributo "defer" se utiliza para diferir la ejecución de un script hasta que se haya cargado completamente el documento HTML, lo que significa que el script se ejecutará después de que se hayan construido los elementos HTML de la página web.

El error "Cannot set properties of null (setting 'innerHTML')" se produce cuando intentas establecer la propiedad "innerHTML" en un elemento que aún no ha sido creado en el DOM (Document Object Model). Si colocas el script que intenta acceder al elemento antes de que se haya creado el elemento en el HTML, se producirá este error.

Al utilizar el atributo "defer" en la etiqueta del script, le estás indicando al navegador que diferirá la ejecución del script hasta que se haya construido completamente la página web, lo que garantiza que los elementos HTML que se intentan acceder ya existan en el DOM.

Por ejemplo, puedes agregar el atributo "defer" en la etiqueta del script de esta manera:

php
Copy code
<script src="tu-archivo.js" defer></script>
De esta manera, el script se ejecutará después de que se haya construido la página web y se hayan creado los elementos HTML que se intentan acceder, lo que evitará el error "Cannot set properties of null (setting 'innerHTML')".

Desplegando el proyecto

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