Scraping

Clase 29 de 31 • Curso de Fundamentos de Node.js

Resumen

Hoy vamos a explorar las posibilidades de la automatización y extracción de datos web, también conocido como web scraping, utilizando el entorno Node.js. Hablaremos de herramientas útiles de terceros que pueden integrarse a nuestro entorno de desarrollo para potenciar nuestras aplicaciones con capacidades de captura de datos en línea. Aprenderemos cómo utilizar Puppeteer, una biblioteca que permite controlar navegadores sin interfaz gráfica, lo que abre un abanico de posibilidades para los desarrolladores a la hora de interactuar con contenido web y automatizar tareas. Te invitamos también a explorar más sobre JavaScript y sus posibilidades en plataformas educativas como Platzi.

¿Qué es Puppeteer y cómo podemos usarlo en Node.js?

Puppeteer es una biblioteca de Node.js que proporciona una API de alto nivel para controlar Chrome o Chromium sobre el protocolo DevTools. Su uso es fundamental para realizar tareas de web scraping, pruebas de rendimiento y automatización de flujos de usuarios en un navegador.

¿Cómo instalar Puppeteer en nuestro proyecto?

Para empezar con Puppeteer, sigue estos pasos:

Crea una nueva carpeta para tu proyecto.
Inicializa tu proyecto con npm init para generar un package.json.
Instala Puppeteer con el comando npm install puppeteer.

¿Cómo ejecutar y utilizar funciones asincrónicas en Puppeteer?

Puppeteer funciona de manera asincrónica, lo que es perfecto para operar con procesos que requieren manejo de tiempos de espera y tareas que no se ejecutan instantáneamente.

¿Cómo manejamos la asincronía con funciones autoejecutadas?

Puedes utilizar una función autoejecutada asincrónica para manejar las operaciones de Puppeteer:

Define una función asincrónica anónima.
Envuelve esta función entre paréntesis para hacerla una expresión.
Ejecuta la función inmediatamente para operar con Promesas usando await.

¿Cómo lanzar un navegador con Puppeteer?

Lanzar un navegador es bastante sencillo:

Utiliza el método puppeteer.launch().
Para ver el navegador en funcionamiento y no solo en modo headless, puedes pasar headless: false como opción.
Ejecuta tu script y observa cómo Puppeteer abre y controla el navegador.

¿Cómo interactuar con páginas web usando Puppeteer?

Una vez que tienes tu navegador lanzado y controlado por Puppeteer, puedes comenzar a interactuar con páginas web:

Dirígete a una página con el método browser.newPage() seguido de page.goto(url).
Ejecuta scripts dentro de la página para obtener datos, como por ejemplo, capturar el texto de un titular H1.
Accede a elementos del DOM utilizando page.$ y page.evaluate().

¿Cómo recolectar y utilizar datos con Puppeteer?

Puppeteer no solo te permite manipular páginas web, sino también recolectar datos de ellas:

Podrías extraer el contenido HTML de elementos específicos.
Guarda los datos recolectados en variables o archivos para su uso posterior.
Automatiza flujos de usuario y recopila información relevante para tus necesidades.

Explorando Puppeteer y sus capacidades, te encuentras en el camino de familiarizarte con herramientas poderosas de automatización y scraping web. Recuerda que estas habilidades son altamente demandadas en el mundo actual lleno de datos y aplicaciones web. ¡Sigue practicando y aprendiendo para convertirte en un experto en esta área fascinante!

Victor Contreras

student•

Me jodio un buen rato el ; del final del require, creo que es importante que para node siempre se use. Pensé que el profesor lo hacía por costumbre... pero no

Juan Teixeira

student•

Gracias por colocar esto, justo me estaba pasando.!

Ricardo Francisco Sánchez Sánchez

student•

Mike Arthur Pinta Pacheco

student•

Para los que estén en WSL2, y les salga un error de este estilo:

error  while loading shared libraries: libatk-1.0.so.0: cannot open shared object file: No such file or directory

*Lo de "libatk" puede decir cualquier cosa con lib, prueben el siguiente comando

sudo apt-get install -y libgbm-dev

Si y ++SOLO SI++ no les funciona, prueben este comando ++también++

sudo apt-get install -yq --no-install-recommends libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 libnss3

En cualquiera de los dos casos les dará un error

Unable to open X display.

Al estar en un subsistema, no podemos ver pantallas, por lo que puppeteer en WSL solo funciona removiendole headless.

Cambiamos esta linea

const browser = await puppeteer.launch({ headless: false });

A esto:

const browser = await puppeteer.launch();

⚠️No vamos a poder ver la pagina en el navegador como en la clase, pero recuerden, puppeteer se usa mas que nada para ver una página sin necesidad de cargarla visualmente. Hay más métodos para usar puppeteer en windows, pero este es la manera mas sencilla que he encontrado para que funcione

Alejandro Medina Castillo

student•

Gracias, este comentario debería tener más likes, fue justo lo que me funciono para WSL

Enmanuel Josue Sarmiento Benitez

student•

Gracias tu ayuda me sirvió para poder practicar lo visto bien clase, de resto el código no me funcionaba y veía y veía el código y no encontraba que tenía mal

Francisco Garcia [C6]

student•

Esto es solo como para saber que existe. Pero para profundizar es necesario ver curso de scrapig o cacharrear.

const puppeteer = require('puppeteer');

(async () =&gt; {
    console.log('lanzamos navegador');
    // const browser = await puppeteer.launch();
    const browser = await puppeteer.launch( { headless: false } );

    const page = await browser.newPage();
    await page.goto('https://es.wikipedia.org/wiki/Node.js');

    var titulo1 = await page.evaluate(()  =&gt; {
        const h1 = document.querySelector('h1');
        console.log(h1.innerHTML);
        return h1.innerHTML;
    });

    console.log(titulo1);
    console.log('Cerramos navegador');
    browser.close();
    console.log('Navegardor cerrado');
}) ();

José Agustin Rios

student•

Gracias por pasarlo en limpio, voy a guardarme el codigo para futuras referencias

Sergio Arturo Enriquez Nava

student•

Para este uso scraping se traduce como raspado.

Cristian Alexander Salazar Atalaya

student•

Para los que están en windows corriendo con WSL, he buscando pero al parecer no es posible hacerlo, les recomiendo que creebn otra carpeta limpia y lo hagan con la consola powersell de windows funciona bien.

Samuel Martínez Hernández

student•

Fue por mucho lo más sencillo, trate de aplicar posibles soluciones de otros comentarios pero me mandaba un error sobre uno de lo módulos. Gracias!

Carlos Enrique Gonzalez Peña

student•

Con Puppeteer no solo podemos leer la informacion de la pagina, tambien podemos lazar eventos de click para editar o ejecutar acciones en dicha pagina, una ves lo utilice para cargar una pagina, buscar un boton y clickearlo, para despues agarrar un texto que aparecia en pantalla la cual era una token y utilizar esta en mis request. Aparte con Puppeteer podemos crear PDFs a patir de HTML, entre otras cosas!

Puppeteer es hecho por google, recuerdo haber visto el directo cuando lo presentron, dele un ojo a su npm, es muy util el poder saber todas las posibilidades de ese, asi tienen mas maneras de solucionar sus problemas!

Jose Ever Muñoz Muñoz

student•

wao puppeteer tiene a un grande detras

Emanuel Valero

student•

En la página de github de puppeteer se puede encontrar más documentación sobre las cosas que este paquete hace. Aca comparto el enlace: https://github.com/puppeteer/puppeteer

Cristian Daniel Jesus Rios

student•

npm init –y 

npm i puppeteer

Jose Daniel Molina

student•

Un resumen de la clase

/*
  Entendiendo web scrapping con puppeteer...
  Funciona de forma asincrona
*/
const puppeteer = require('puppeteer');

// Funcion autoejecutable
(async () => {
  console.log('Lanzar el navegador');
  // const browser = await puppeteer.launch();
  /*
    {headless: false} lo que hace es que el navegador no
    se lance en segundo plano
  */
  const browser = await puppeteer.launch({headless: false});
  // Abrir una pagina en el navegador
  const page = await browser.newPage();
  // Ir a una pagina
  await page.goto('https://wikipedia.org/wiki/Node.js');
  /*
    Ejecutar un script, con page.evaluate,
    lo que hace es evaluar lo que le digamos dentro de la pagina y
    devolver el resultado
  */
  const titulo1 = await page.evaluate(() => {
    const h1 = document.querySelector('h1');
    return h1.innerHTML;
  });
  console.log(titulo1);
  // Usamos browser.close para cerrar el navegador despues de haber extraido los datos;
  console.log('Cerrando el navegador');
  browser.close();
  console.log('Navegador cerrado');

})();```

Bruno Amadori

student•

Qué divertido y que ganas de programar bots que me dió esto jaja.

José Barrios Pulido

student•

Las función que describe el profesor se llaman IIFE: Funciones que se ejecutan tan pronto como se definen: https://developer.mozilla.org/es/docs/Glossary/IIFE

Hans Roche

student•

Me daba error no abria Chrome, lo pude solucionar así:

const puppeteer = require("puppeteer");
const PATHS = {
	win32: {
		executablePath:
			"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
		userDataDir: "C:\\Users\\TuNombreDeUsuario\\AppData\\Local\\Temp\\puppeteer_user_data",
	},
	linux: {
		executablePath:
			"/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe",
		userDataDir: "/mnt/c/Users/TuNombreDeUsuario/AppData/Local/Temp/puppeteer_user_data",
	},
};

(async () => {
	console.log("Lanzamos navegador!");

	const browser = await puppeteer.launch({
		headless: false,
		executablePath: PATHS[process.platform].executablePath,
		userDataDir: PATHS.win32.userDataDir,
		defaultViewport: null,
	});

	const page = await browser.newPage();
	await page.goto("https://es.wikipedia.org/wiki/Node.js");

	console.log("Cerramos Navegador...");
	// browser.close();
	console.log("Navegador cerrado");
})();

Pablo Daniel Amé

student•

Muy Muy poderoso, para los que tienen problemas con puppeteer en wsl2 lo solucione de la siguiente manera:

Instalar chrome en wsl2 siguiendo este tutorial: Link

en el codigo agregar está linea

    const browser = await puppeteer.launch({
        args: [
            '--disable-gpu',
            '--disable-dev-shm-usage',
            '--disable-setuid-sandbox',
            '--no-first-run',
            '--no-sandbox',
            '--no-zygote',
            '--single-process',
        ]
    }); // default is true

christopher montiel

student•

Buenísimo me solucionaste la vida amigo!! muchas gracias!

alam angel gutierrez vazquez

student•

Sí tienen problemas instalando puppeteer:

reintenten el comando

npm init –y

y después reintenten la instalación

npm i puppeteer

Esteban Cifuentes

student•

Para los que utilizan wsl2 esta es la mejor solucion que pude encontrar

const browser = await puppeteer.launch({
        args: [
            '--disable-gpu',
            '--disable-dev-shm-usage',
            '--disable-setuid-sandbox',
            '--no-first-run',
            '--no-sandbox',
            '--no-zygote',
            '--single-process',
        ]
    });```

Víctor Isaac Arias García

student•

Genial con esta linea me funciono el scraping en WSL2

Ernesto Vizcaíno Alvarado

student•

Curso de web Scraping

Lizardo Reyes

student•

Si, pero con python

Cristhian Calderón

student•

no aparece el curso de webscraping

Marcial Ambriz

student•

Yo tuve un problema al lanzar el navegador por que uso la consola WSL en VS code, lo logre con cmd, solo tuve que reinstalar puppeteer para que cargara de nuevo chromium y desde CMD ejecutar el código

Wilson Fernando Antury Torres

student•

Función auto-ejecutable: ( async () => { } ) ()

Felix Torres Javier Antonio

student•

Mejor conocida como:

IIFE (Immediately Invoked Function Expression)

https://developer.mozilla.org/en-US/docs/Glossary/IIFE

Raphael Hinostroza

student•

Me aparece el siguiente error:

(node:8521) UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process!

Posdata: No puedo subir imágenes arrastrándolo al comentario.

Ivan Sevilla

student•

Me pasó lo mismo. Me mostraba esto:

(node:5136) UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process! spawn C:\Users\ivano\Documents\Cursos-Platzi\Fundamentos-de-NodeJS\handle-tools-with-node\scraping\node_modules\puppeteer\.local-chromium\win64-756035\chrome-win\chrome.exe ENOENT

Lo que enes que hacer es ir al directorio que te aparece y te vas a dar cuenta que no está chrome.exe. Entonces lo que tenes que hacer es descomprimir chrome-win que en mi casa se encontraba en

C:\Users\ivano\Documents\Cursos-Platzi\Fundamentos-de-NodeJS\handle-tools-with-node\scraping\node_modules\puppeteer\.local-chromium

Una vez que lo descomprimir lo moves a la carpeta win64-756035 y borras lo que habia antes en esa carpeta

De acá saque la solucion

Arturo Mauricio Terceros Beltrán

student•

Con que descomprimiste? Algun comando?

Leonardo Angelit Gálvez

student•

Está genial! Lo probé creand un servidor en node y mostrando ahí el listado de cursos que tengo en Platzi, con su badge y enlace al diploma, como idea para la web personal 🙈

Alexander Nova Arevalo

student•

const puppeteer =  require('puppeteer')


const run = async ()=>
{
    const browser = await puppeteer.launch()
    const page = await browser.newPage()


    // TOMAR UN SCREENSHOT
    // await page.goto('https://platzi.com/cursos/html5-css3/opiniones/1/');
    
    // await page.screenshot({
        //     path: 'screenshot.png',
        //     fullPage: true
        // })
    
    async function getPageData() {
        
        await page.goto('https://platzi.com/cursos/html5-css3/opiniones/1/');

        const data = await page.evaluate(()=>{
            
            const $reviews = document.querySelectorAll('.Review')
            const data = []

            $reviews.forEach(($reviews)=>{

                let description = $reviews
                                  .querySelector('.Review-description')
                                  .textContent
                                  .trim()

                let name = $reviews
                           .querySelector('.Review-info .Review-name strong')
                           .textContent
                           .trim()
              
                let starts = $reviews
                             .querySelector('.Review-info .Review-stars')
                             .querySelectorAll('.fulled')
                             .length
                

                data.push({
                    content: description,
                    name:  name,
                    starts : starts
                })
            })
            return {
                reviews: data,
            }
        })
    
        console.log("DATA,", data);
        
    }

    getPageData()

    // await browser.close()
    
}

run()

sudo apt-get install -yq --no-install-recommends libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 libnss3

const puppeteer = require('puppeteer');

(async () =&gt; {
    console.log('lanzamos navegador');
    // const browser = await puppeteer.launch();
    const browser = await puppeteer.launch( { headless: false } );

    const page = await browser.newPage();
    await page.goto('https://es.wikipedia.org/wiki/Node.js');

    var titulo1 = await page.evaluate(()  =&gt; {
        const h1 = document.querySelector('h1');
        console.log(h1.innerHTML);
        return h1.innerHTML;
    });

    console.log(titulo1);
    console.log('Cerramos navegador');
    browser.close();
    console.log('Navegardor cerrado');
}) ();

/*
  Entendiendo web scrapping con puppeteer...
  Funciona de forma asincrona
*/
const puppeteer = require('puppeteer');

// Funcion autoejecutable
(async () => {
  console.log('Lanzar el navegador');
  // const browser = await puppeteer.launch();
  /*
    {headless: false} lo que hace es que el navegador no
    se lance en segundo plano
  */
  const browser = await puppeteer.launch({headless: false});
  // Abrir una pagina en el navegador
  const page = await browser.newPage();
  // Ir a una pagina
  await page.goto('https://wikipedia.org/wiki/Node.js');
  /*
    Ejecutar un script, con page.evaluate,
    lo que hace es evaluar lo que le digamos dentro de la pagina y
    devolver el resultado
  */
  const titulo1 = await page.evaluate(() => {
    const h1 = document.querySelector('h1');
    return h1.innerHTML;
  });
  console.log(titulo1);
  // Usamos browser.close para cerrar el navegador despues de haber extraido los datos;
  console.log('Cerrando el navegador');
  browser.close();
  console.log('Navegador cerrado');

})();```

const puppeteer = require("puppeteer");
const PATHS = {
	win32: {
		executablePath:
			"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
		userDataDir: "C:\\Users\\TuNombreDeUsuario\\AppData\\Local\\Temp\\puppeteer_user_data",
	},
	linux: {
		executablePath:
			"/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe",
		userDataDir: "/mnt/c/Users/TuNombreDeUsuario/AppData/Local/Temp/puppeteer_user_data",
	},
};

(async () => {
	console.log("Lanzamos navegador!");

	const browser = await puppeteer.launch({
		headless: false,
		executablePath: PATHS[process.platform].executablePath,
		userDataDir: PATHS.win32.userDataDir,
		defaultViewport: null,
	});

	const page = await browser.newPage();
	await page.goto("https://es.wikipedia.org/wiki/Node.js");

	console.log("Cerramos Navegador...");
	// browser.close();
	console.log("Navegador cerrado");
})();

    const browser = await puppeteer.launch({
        args: [
            '--disable-gpu',
            '--disable-dev-shm-usage',
            '--disable-setuid-sandbox',
            '--no-first-run',
            '--no-sandbox',
            '--no-zygote',
            '--single-process',
        ]
    }); // default is true

const browser = await puppeteer.launch({
        args: [
            '--disable-gpu',
            '--disable-dev-shm-usage',
            '--disable-setuid-sandbox',
            '--no-first-run',
            '--no-sandbox',
            '--no-zygote',
            '--single-process',
        ]
    });```

(node:5136) UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process! spawn C:\Users\ivano\Documents\Cursos-Platzi\Fundamentos-de-NodeJS\handle-tools-with-node\scraping\node_modules\puppeteer\.local-chromium\win64-756035\chrome-win\chrome.exe ENOENT

const puppeteer =  require('puppeteer')


const run = async ()=>
{
    const browser = await puppeteer.launch()
    const page = await browser.newPage()


    // TOMAR UN SCREENSHOT
    // await page.goto('https://platzi.com/cursos/html5-css3/opiniones/1/');
    
    // await page.screenshot({
        //     path: 'screenshot.png',
        //     fullPage: true
        // })
    
    async function getPageData() {
        
        await page.goto('https://platzi.com/cursos/html5-css3/opiniones/1/');

        const data = await page.evaluate(()=>{
            
            const $reviews = document.querySelectorAll('.Review')
            const data = []

            $reviews.forEach(($reviews)=>{

                let description = $reviews
                                  .querySelector('.Review-description')
                                  .textContent
                                  .trim()

                let name = $reviews
                           .querySelector('.Review-info .Review-name strong')
                           .textContent
                           .trim()
              
                let starts = $reviews
                             .querySelector('.Review-info .Review-stars')
                             .querySelectorAll('.fulled')
                             .length
                

                data.push({
                    content: description,
                    name:  name,
                    starts : starts
                })
            })
            return {
                reviews: data,
            }
        })
    
        console.log("DATA,", data);
        
    }

    getPageData()

    // await browser.close()
    
}

run()

Scraping

Conocer los conceptos básicos de NodeJS

Instalación de Node.js

Node: orígenes y filosofía

EventLoop: asíncrona por diseño

Monohilo: implicaciones en diseño y seguridad

Configurar las variables de entorno en Node.js

Herramientas para ser más felices: Nodemon y PM2

Cómo manejar la asincronía

Callbacks

Callback Hell: refactorizar o sufrir

Promesas

Async/await

Entender los módulos del core

Globals

File system

Console

Errores (try / catch)

Procesos hijo

Módulos nativos en C++

HTTP

OS

Process

Utilizar los módulos y paquetes externos

Gestión de paquetes: NPM y package.json

Construyendo módulos: Require e Import

Módulos útiles

Datos almacenados vs en memoria

Buffers

Streams

Conocer trucos que no quieren que sepas

Benchmarking (console time y timeEnd)

Debugger

Error First Callbacks

Manejar herramientas con Node

Scraping

Automatización de procesos

Aplicaciones de escritorio