DEV Community

Cover image for Como fazer web scrape com Node.js
Arthur Guimarães
Arthur Guimarães

Posted on

Como fazer web scrape com Node.js

#node #webscrap #cheerio #javascript

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!

Top comments (0)