TheLazy.Dev
Portfolio GitHub

Blog

node |webscrap |cheerio |javascript

Como fazer web scrape com Node.js

artgmrs

Arthur Guimarães

Posted on March 5, 2023

Como fazer web scrape com Node.js

Como fazer web scrape com Node.js

Esse tutorial é indicado para iniciantes em Web scraping ou caso você precise saber quais recursos utilizar para realizar essa tarefa no Node.js. Você verá a poderosa combinação do Node.js + Cheerio + Axios para a raspagem de dados.

Pré requisitos

  1. NodeJs 18+ e npm 8+: Qualquer versão do Node.js 18+ com o npm é suficiente.
  2. Uma IDE ou editor de código de sua preferência. Recomendamos o Visual Studio Code, o qual foi utilizado pra criação desse tutorial.

Desejável:

  1. Conhecimento básico de javascript e chamadas HTTP - mas se não tiver, tudo bem também, vou explicar um pouco mais no decorrer do tutorial e você pode aprofundar depois :)

Mão na massa

Crie uma nova pasta e inicie um projeto javascript:




npm init -y
Enter fullscreen mode Exit fullscreen mode

Adicione as bibliotecas do axios e cheerio:




npm install axios cheerio
Enter fullscreen mode Exit fullscreen mode

Na raiz da pasta crie o arquivo ìndex.js:
Estrutura de pastas do projeto

No arquivo index.js faça a importação do cheerio e axios:



const axios = require('axios');
const cheerio = require('cheerio');
Enter fullscreen mode Exit fullscreen mode

Ainda no index.js crie o método executeScrape() e faça a chamada dele ao final do arquivo:



async function executeScrape() {
} 

executeScrape();
Enter fullscreen mode Exit fullscreen mode

Agora utilizaremos o axios para fazer a chamada ao website que desejamos fazer a raspagem de dados.

💡O axios é utilizado para realizarmos chamadas HTTP para outros sistemas. No nosso projeto o usaremos para fazer um request GET e recuperar o HTML do site o qual nós faremos a raspagem dos dados. Para aprofundar no axios acesse a documentação.

Neste tutorial vamos usar o site do NodeBr para recuperar os dados da aba "Quem somos":



const url = 'https://nodebr.org/sobre/';

async function executeScrape() {
  const { data } = await axios.get(url);

  console.log(data);
}

executeScrape();
Enter fullscreen mode Exit fullscreen mode

Execute o programa para validar o retorno do axios:



node index.js
Enter fullscreen mode Exit fullscreen mode

Ao executar o programa devemos ver o HTML da página logado no console:



<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Quem Somos &#8211; NodeBR</title>
...
Enter fullscreen mode Exit fullscreen mode

Agora utilizaremos o cheerio para ler o HTML retornado pelo axios e simula-lo em uma espécie de estrutura de DOM virtual, onde conseguiremos realizar consultas utilizando seletores CSS.

💡O Cheerio analisa o HTML e fornece uma API para percorrer/manipular a estrutura de dados. Especificamente, ele não produz uma renderização visual, aplica CSS, carrega recursos externos ou executa JavaScript que é comum para um SPA (aplicativo de página única). Isso torna o Cheerio muito, muito mais rápido do que outras soluções. Mais informações acesse a documentação oficial.

Podemos nos livrar do console.log(data) e faremos o carregamento do HTML no cheerio a partir do método load(), atribuindo o retorno para a variável $:



async function executeScrape() {
  const { data } = await axios.get(url);

  const $ = cheerio.load(data);
}
Enter fullscreen mode Exit fullscreen mode

Pronto, agora podemos realizar consultas utilizando seletores CSS a partir da variável $.

💡Seletores CSS são padrões usados para selecionar elementos no HTML. Referência aqui

Para descobrir qual seletor usar para recuperar os dados que queremos vamos acessar a página https://nodebr.org/sobre/ e selecionar Inspecionar (ou apertar o comando CTRL + SHIFT + C que também abre o seletor) e verificar a árvore HTML da página.

Podemos ver que o texto de "Quem somos" fica em um parágrafo dentro de uma div com a classe "entry-content":

Estrutura HTML do site nodebr

O seletor que retorna a informação que queremos é o 'div.entry-content > p'. Para realizar a consulta utilizando um seletor podemos passa-lo para a variável $. Por fim, usamos o método text() para extrair o texto do parágrafo (este método funciona em outras tags HTML também!):



async function executeScrape() {
  const { data } = await axios.get(url);
  const $ = cheerio.load(data);

  const entryContent = $('div.entry-content > p').text();

  console.log(entryContent);
}

// A NodeBR é a maior comunidade brasileira de Node.js. Com uma organização descentralizada oferecemos ajuda, dicas, eventos e todo tipo de recursos gratuitos para que a plataforma Node.js possa ganhar tração no Brasil.
Enter fullscreen mode Exit fullscreen mode

Prontinho, temos nosso web scraper feito com Node.js + Cheerio + Axios :)

Caso precise consultar o código final do projeto, basta acessar o repositório on github - não esqueça de deixar um like por lá :)

Até a próxima!

💖 💪 🙅 🚩
artgmrs
Arthur Guimarães

Posted on March 5, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Como fazer web scrape com Node.js
node Como fazer web scrape com Node.js

March 5, 2023