¿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

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

Cómo extraer datos de cualquier sitio web con JavaScript

Cómo extraer datos de cualquier sitio web con JavaScript

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Las capas invisibles: por qué las entrevistas con los usuarios son un activo irremplazable

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Las capas invisibles: por qué las entrevistas con los usuarios son un activo irremplazable

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps