Cursos Empresas Blog Live Conf Eventos Precios

0:0018:36

Descargando información y creando nodos

Clase 13 de 29

Clase 13 / 29

Carlos Eduardo Gomez García

Recomiendo encarecidamente trabajar con Windows Subsystem for Linux para hacer cualquier práctica de programación, en serio, creanme, les va a ahorrar demasiados dolores de cabeza, si aún no sabes cómo instalar Windows Subsystem for Linux, puedes aprenderlo en el Curso de Prework: Configuración de Entorno de Desarrollo en Windows. . Dicho esto, aquí les dejo los pasos de la instalación para NodeJS para Linux y para Windows Subsystem for Linux (Node en su versión más actualizada) . Primero, actualicemos nuestros repositorios (es muy probable que les pida su contraseña):

sudo apt update && sudo apt upgrade

Ahora, añadimos el repositorio de NodeJS el cuál nos proveerá la versión más reciente (este traerá la versión 14, si quieres puedes revisar por la versión 15):

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

Ahora sí procedemos a instalar NodeJS:

sudo apt install nodejs

. Esto te debería instalar NPM y NodeJS, para revisarlo, puedes ejecutar en tu terminal esto

node --version && npm --version

¡Así de fácil es instalar cosas en Linux! . Si quieres hacerlo en Windows entonces ve a la página de NodeJS y ejecuta su instalador (recomiendo la versión LTS) :D

Pablo Verduzco

Hace 6 años

También te recomiendo nvm.

Jonathan 🦑 Alvarez

Profesor

Hace 6 años

Niiice, con eso es mucho más fácil desarrollar en Windows!

@pabloverduzco recomendó NVM para manejar versiones de Node, también lo sugiero, aunque yo uso FNM (tiene una mejora de performance). Y también existe "n"

Comentarios (180)180 comentarios

Sebastian Gonzalez

Jimmy Buriticá Londoño

Me gusta más usar async/await, te quedo bien desarrollado el ejercicio.

Andrés Felipe García Rendón

Muchsa gracias por compartir tus apuntes.Salu2

Andres Felipe Pinchao Ramirez

MIS APUNTES 😎🤙🤙👌

//URL API
 const url = "https://platzi-avo.vercel.app/api/avo";


 /*Web API Fetch
 
 La utilizamos para traer recursos desde cualquier otro sitio web

 Lo unico que tenemos que pasarle es nuestra url
 
 1. Nos conectaremos al servidor

 */

window
    .fetch(url)
/*2. Procesar la respuesta y despues la convertimos en JSON
    Fetch es algo que nos devuelve una promesa asi que
    trabajaremos con promesas para obtener la respuesta
    y transformarla en JSON

*/
    .then(respuesta => respuesta.json())

 /*3.
 Luego de que convirtamos la respuesta en JSON lo que obtenemos
 ahora es informacion y la obtenemos concatenando otra promesa

 
 Cuando tengamos el JSON  tendremos esa informacion que
 nos servira para renderizar esa info en nuestro navegador*/
    .then(responseJson =>{

        const todosLosItems = [];
        /*recorremos cada uno de los elementos que estan en arrays
        con un forEach
        
        */

        responseJson.data.forEach(item => {
        /*atraves del parametro de la funcion del forEach accedemos
        a los elementos de la respuesta json*/

    //creamos nuestros elementos
        const imagen = document.createElement('img');
    
        const titulo = document.createElement('h2');
       
        const precio = document.createElement('div');
      
    // cremos el contenedor donde vamos a poner nuestros elementos

        const container = document.createElement('div');

    /*agregamos los elementos a un contenedor
    
        container.appendChild(imagen);
        container.appendChild(titulo);
        container.appendChild(precio);
    
    */

        container.append(imagen,titulo,precio);
        
    //agregamos el contenedor en nuestro body
        //document.body.appendChild(container);
        todosLosItems.push(container);
        
            console.log(item.name);
            
        });

        document.body.append(...todosLosItems)

    });

/*RESUMEN: NOS CONECTAMOS A UNA API QUE ES UN PUENTE CON LA INFORMACION 
  DE UN SERVIDOR Y ESE SERVIDOR NOS DEVUELVE ESA INFORMACION, Y UTILIZAMOS
  UN CICLO POR CADA UNO DE LOS ELEMENTOS QUE NOS DEVUELVE ESE SERVIDOR
  CREAMOS NODOS Y SE LOS AGREGAMOS AL FINAL A NUESTRO HTML*/

/*RETO PARA MEJORAR ESTE CODIGO  Y ES HACERLO CON ASYNC Y AWAIT EN VES 
  DE PROMESAS */```

David Daniel Castillo Nava

Te ganas mi me gusta por compartir la url gracias

Luis Felipe Medina Rodriguez

😎 carita fachera

Jenny Aguilar

Hace 5 años

Por si hay alguno que se pregunta cómo hace Jonathan para ver en formato json lo que arroja la API directo en el navegador, hay extensiones para el navegador que son muy útiles para ello. En mi caso uso JSON Viewer y parece que el profe igual. Se habilita en la configuración del navegador y se busca desde extensiones. El repo de github es https://goo.gl/fmphc7. Espero les sirva.

Luis Alejandro Vera Hernandez

Era lo que necesitaba. Gracias

Keyla Conde Sánchez

Hace 4 años

Claro que me sirvió, muchas gracias!

Vsqz Gabriel

Genial! es una forma más óptima :D

Edgar Lopez Arroyo

Interesante, no conocía ese método :D

Guillermo Castaño Vèlez

Este es el curso que estaba esperando de Platzi para poder conectar todo lo básico con el curso profesional.

Magali Alexander López Chavira

Tarea: Obtener información con async/away

John Ruiz

Wenos días;

@magali

Genial código, lo he entendido muy bien, gracías.

Armando Rivera

Link de la API https://platzi-avo.vercel.app/api/avo

Diego Daniel Pedroza Perez

Puede ser que necesiten instalar create-snowpack-app para que funcione, Así que pueden usar npm para instalar el paquete

npm install create-snowpack-app```

Rodrigo Martinez

dont forget

$ sudo

Luis Alain

Jose Oscar Rosas Perez

No sé que es ese archivo . env, pero ya me actualiza automáticamente los cambios en el navegador. Gracias

Santander Cristian

Gracias por el intento, pero no me funcionó.

Iván Garcia

Un poco más gráfico para entenderlo mejor 🤣

Diego Rubio

por qué no actualiza los freaking cambios en mi compu? instale snowpack con npm pero aun aí hago cambios y no actualiza los cambios en el browser, no sé nunca he utilizado snopack, hasta hoy ni sabía que existía

Arturo Mauricio Terceros Beltrán

X2. Alguna solución?

José Luis Encastin Flores

Me pasó lo mismo. Tenía que cerrar la ventana, parar el proceso en la terminal y volver a correr con npm start.

Si alguien encontró alguna solución, lo agradecería.

Hector Andres Erira Huertas

Estaba teniendo problemas para crear el proyecto con npx asi que lo instalé de forma global

npm install -g create-snowpack-app

despues ejecute

create-snowpack-app my-app --template snowpack-template-tailwind```

de esta forma me funcionó, yo uso windows

Uriel Alberto Arevalo Franco

Gracias, lo instalé tal cual. Y funcionó.

Juan Diego Pelaez González

Hace 3 años

Muchas Gracias

Jesus Chirinos

a alguien mas le ha tomado 3 días solo esta clase?

Alex Camacho

¿Qué se te dificulto? :) Preguntando igual siempre podemos obtener explicaciones diferentes.

Hey heyy ¿algo en particular en lo que te podamos ayudar? :D

Sebastian Heredia

Que clase mas deliciosa, pude aplicar todos los conocimientos de la ruta como lo fue NPM, JS, Asincronismo, etc. :)

Lo mismo pienso. Aunque me tarde cerca de una hora en esta sola clase, lo sentí súper real, porque me hizo repasar varios conceptos. ¡Me encantó! Ojalá traigan más cursos con el profesor Jonathan.

Julio Astudillo

A alguien mas no le deja hacer el npm start?

Ya me viene dando problemas desde que se instalaron las dependencias con el npx

Efraín Hernández García

Por si a alguien le sirve, para detener el localhost desde la terminal basta con teclear crtl + c o cmd + c

Karenn Yeraldin Hernández Duarte

Jose Luis Barboza Gonzales

¿como cambio el puerto? Port 8080 not available. Use --port to specify a different port intente con: npm start --port 8081 npm start --port:8081

Intenta así:

npm start -- --port 8081

LEANDRO DARIO MAMANI

Porque no me sale la misma estructura del código que al profesor?

Carlos Guillermo Coello Valenzuela

es porque él tiene instalada una extensión para visualizar de mejor forma los jsons

Aquí el link a la extensión: https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=es

Fernando Quinteros Gutierrez

También puedes usar Postman, para realizar este tipo de consultas de una manera más ordenada te lo recomiendo bastante, en el curso de Postman se aprende muy bien la herramienta

Descargando información y creando nodos

Progreso del curso

DOM y Web API

Operaciones básicas

Workshop 1: Fetch

Eventos

Workshop 2: Lazy loading

Workshop 3

Librerías relacionadas

Conclusiones