Como fazer web scrape com Node.js
Tags: node, webscrap, cheerio, javascript
Published: 2023-03-05 23:06:32


##  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+](https://nodejs.org/en/download/): 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](https://code.visualstudio.com/), 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

```

Adicione as bibliotecas do `axios` e `cheerio`:
```

npm install axios cheerio

```

Na raiz da pasta crie o arquivo `ìndex.js`:
![Estrutura de pastas do projeto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5sedcld91jb60mtci8c.png)

No arquivo `index.js` faça a importação do `cheerio` e `axios`:
```js
const axios = require('axios');
const cheerio = require('cheerio');
```

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

executeScrape();
```

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](https://axios-http.com/docs/intro).

Neste tutorial vamos usar o site do [NodeBr](https://nodebr.org) para recuperar os dados da aba "Quem somos":
```js
const url = 'https://nodebr.org/sobre/';

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

  console.log(data);
}

executeScrape();
```

Execute o programa para validar o retorno do axios:
```
node index.js
```

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>
...
```

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](https://cheerio.js.org/docs/intro). 

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 `$`:
```js
async function executeScrape() {
  const { data } = await axios.get(url);

  const $ = cheerio.load(data);
}
```

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](https://www.w3schools.com/cssref/css_selectors.php) 

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1od10zbbu699747pzeg.png)

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!):
```js
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.
```


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](https://github.com/artgmrs/scraper-nodejs) - não esqueça de deixar um like por lá :) 

Até a próxima!