¿Cómo aumenta la productividad, especialmente cuando desea realizar múltiples tareas y lograr tanto en tan poco tiempo? Todos nos hemos encontrado con situaciones en las que nuestro líder en una organización nos indica que obtengamos (raspemos) información de Internet, especialmente si estamos en un equipo que realiza muchos procesos manuales para lograr su trabajo. Hacer esto con lápiz y papel puede generar errores y perder información específica del sitio web. Este tutorial demostrará cómo automatizar el raspado de datos del sitio web y usarlo para cualquier propósito. Salvadera Puede encontrar el código fuente del proyecto completo en . Bifurque, modifique los scripts y ejecute el código. CodeSandbox <CodeSandbox title="scrape the web" id="web-scraper-nxmv8" /> requisitos previos Es necesario un conocimiento básico de JavaScript para completar este proyecto. Este proyecto está construido con Node.js y Express. Además, para seguir los pasos, debemos hacer lo siguiente: Tener Node.js y NPM instalados en nuestro equipo. Usamos , un administrador de paquetes, para instalar dependencias para nuestro programa npm Haremos uso de un editor de código de nuestra elección. NPM está disponible cuando instala desde la documentación oficial Node Instalación Cree un servidor de nodo con el siguiente comando. npm init -y El comando anterior ayuda a inicializar nuestro proyecto al crear un archivo en la raíz de la carpeta usando npm con el indicador para aceptar el valor predeterminado. Instalaremos el paquete express desde el registro npm para ayudarnos a escribir nuestros scripts para ejecutar el servidor. package.json -y Luego, después de la inicialización, necesitamos instalar las dependencias , y . express cheerio axios npm install express cheerio axios , un Framework web Node.js rápido y flexible express , un paquete que analiza el marcado y proporciona una API para atravesar/manipular la estructura de datos resultante. La implementación de Cheerio es idéntica a jQuery. cheerio , un cliente HTTP basado en promesas para el navegador y node.js. axios Crear un servidor con Node.JS En nuestro archivo JavaScript , usamos el siguiente código para importar Express.js, crear una instancia de la aplicación Express y finalmente iniciar la aplicación como un servidor Express. app.js const express = require('express'); const app = express(); const PORT = process.env.port || 3000; app.listen(PORT, () => { console.log(`server is running on PORT:${PORT}`); }); Antes de iniciar nuestra aplicación en la línea de comandos, debemos instalar como una dependencia de desarrollo. nodemon npm install nodemon --save-dev Nodemon es un script de monitoreo utilizado durante el desarrollo de aplicaciones node.js. Configuraremos el archivo para usar nodemon. Esto nos permite ejecutar nuestra aplicación sin reiniciar manualmente el servidor. package.json { "scripts": { "start": "nodemon app.js" }, "devDependencies": { "nodemon": "^2.0.15" } } Ahora inicie la aplicación en la línea de comando con , que debería mostrar esto en la línea de comando. npm start server is running on PORT:3000 es adecuado para el enrutamiento, como veremos más adelante en el tutorial. Express.js Crear el raspador Con la configuración completa del servidor, implementaremos el raspador web que ayuda a aumentar su productividad y eficiencia en el trabajo en cuestión de minutos. Ahora, en el mismo archivo, , importaremos el paquete para enviar solicitudes HTTP al punto final de transferencia de estado representacional (REST) para realizar operaciones CRUD. app.js axios const express = require('express'); const axios = require('axios') const app = express(); const PORT = process.env.port || 3000; const website = 'https://news.sky.com'; try { axios(website).then((response) => { const html = response.data; console.log(html); }); } catch (error) { console.log(error, error.message); } app.listen(PORT, () => { console.log(`server is running on PORT:${PORT}`); }); Del fragmento de código anterior, usamos axios. Axios toma la URL del sitio web a través del encadenamiento y, una vez que se ha resuelto, recibimos una respuesta de la URL del sitio web de noticias en la línea de comandos. Raspado de datos Para extraer los datos de la URL del sitio web de noticias, actualice nuestro archivo con lo siguiente. El paquete Cheerio lo hará posible. app.js const express = require('express'); const axios = require('axios'); const cheerio = require('cheerio'); const app = express(); const PORT = process.env.PORT || 3000; const website = 'https://news.sky.com'; try { axios(website).then((res) => { const data = res.data; const $ = cheerio.load(data); let content = []; $('.sdc-site-tile__headline', data).each(function () { const title = $(this).text(); const url = $(this).find('a').attr('href'); content.push({ title, url, }); app.get('/', (req, res) => { res.json(content); }); }); }); } catch (error) { console.log(error, error.message); } app.listen(PORT, () => { console.log(`server is running on PORT:${PORT}`); }); Repasemos el código de arriba. El paquete nos permitirá manipular el DOM leyendo los elementos de la página. Apuntaremos a elementos específicos en la página que solo necesitamos raspar. cheerio Para analizar el HTML, utilizamos para analizar todo el HTML de la página y guardarlo con una variable, . cheerio.load(data) const $ Para encontrar elementos específicos en el sitio web con un título, inspeccionamos la página y copiamos el nombre de la clase para la etiqueta . h3 Para cada titular de título, queremos capturar el texto usando y el enlace al título que encontramos con un atributo de . text() href Ahora, para extraer todos nuestros datos en un archivo JSON, creamos una matriz vacía con un variable. Con esta matriz creada, necesitamos insertar el y la guardados mediante el método de inserción en un objeto para mostrar todos los datos extraídos del cliente con el método , con un punto final . content title URL GET app.get / Finalmente, ejecutamos el bloque de código dentro de las sentencias . La instrucción se ejecuta si ocurre una excepción. try...catch catch Con el proceso completado para raspar un sitio web, ahora tenemos los datos raspados en formato JSON. Resumen Ahora que ha visto cómo crear un raspador web con Node.js usando el marco Express.js, no hay excusa para no intentarlo con cualquier sitio web de su elección mientras ahorra tiempo para obtener datos precisos. Esta publicación exploró cómo raspar un sitio web y qué tan productivo puede ser con un método que puede replicar con tantas URL de sitios web. Clone y bifurque el código fuente completo . aquí Otras lecturas Enrutamiento básico con el marco Express ¿Qué puedes hacer a continuación? Para experimentar con lo que construimos, puede obtener los datos del servidor y llamarlos en su aplicación de interfaz. Publicado por primera vez aquí

Fetch

Target

2022 - HackerNoon Contributor of the Year - Data Visualization

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - No No No Nodejs

2022 - Remote Work Warrior

Book a call with @terieyenike

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

 Add passwordless user experiences to your app

Cómo extraer datos de cualquier sitio web con JavaScript

HackerNoon Mobile

Cómo extraer datos de cualquier sitio web con JavaScript

Demasiado Largo; Para Leer

Companies Mentioned

@terieyenike

HISTORIAS RELACIONADAS