Criando um Web Scraper com NodeJs

O Web Scraping é uma espécie de garimpo da internet. Esse “garimpo” envolve a extração de informações de determinado site. A ideia do Web Scraping é automatizar o trabalho usando bots, que coletam um maior número de dados em uma curta fração de tempo.

O processo de Web Scraping pode ser dividido em duas etapas principais:

• Buscando o código-fonte HTML do site por meio de uma solicitação HTTP ou usando um navegador Headless;

• Analisando os dados brutos para extrair apenas as informações de seu interesse.

Para realização deste tutorial, será necessário o Node.js na versão 8.x ou posterior e npm instalados no seu computador.

Vamos começar!

Crie uma pasta chamado scraper e inicie com o code. Abra o terminal do code e execute o comando:

npm init -y

Esse comando inicializará o projeto com um arquivo “package.json”. Deixe-o com seus padrões.

Agora, instalaremos as dependências que utilizaremos para criar o Web Scraper:

npm install axios cheerio puppeteer –save

O que cada dependência faz?

• Axios: é um cliente HTTP baseado em Promises para Node.js;

• Cheerio: implementação do jQuery para o Node.js. O Cheerio facilita a seleção, edição e exibição de elementos DOM;

• Puppeteer: uma biblioteca Node.js para controlar o Chrome ou Chromium.

Web Scrap:

Para demonstrar como fazer Web Scrap em um site utilizando o Node.js, configuraremos um script para capturar algumas informações da tabela do Campeonato Carioca de 2020 (Taça Rio). Especificamente, capturaremos os principais goleadores da competição até o momento e organizaremos os dados como um JSON.

Crie um novo arquivo na sua pasta scrapper, chamado goleadorScrap.js.

1º Passo:

Faça as requisições do axios, cheerio e coloque a url em uma constante (Vamos utilizar o site do globoesporte para fazer esse Web Scrap):

const axios = require('axios');
const cheerio = require('cheerio');
const url = 'https://globoesporte.globo.com/rj/futebol/campeonato-carioca/';

Agora, precisamos utilizar o axios para realizar a leitura do nosso HTML. O axios nos traz uma longa sequência de HTML, mas como analisar esse HTML e extrair apenas os dados que queremos? Esse é o trabalho do Cheerio. Ele nos permite utilizar os métodos jQUery para analisar o HTML e extrair informações que desejamos com ele.

Abra o link e abra as ferramentas de desenvolvedor, pressionando a tecla f12 ou clicando com o botão direito do mouse e Inspecionando. Vamos trazer os dados dos artilheiros do Campeonato Carioca. Como você pode notar, o corpo da tabela possui uma div com classe chamada “ranking-item-wrapper”, que contém as informações de cada jogador. Precisamos de um vetor para armazenar essas informações. O código ficaria assim:

const axios = require('axios');
const cheerio = require('cheerio');
const url = 'https://globoesporte.globo.com/rj/futebol/campeonato-carioca/';

axios(url).then(response => {
    const html = response.data;
    const $ = cheerio.load(html);
    const tabelaStatus = $('.ranking-item-wrapper');
    const tabelaJogador = [];
}).catch(console.error);

Os dados que queremos capturar dessa tabela são:

• Nome do jogador: criaremos uma constante chamada nomeJogador, que receberá o texto disponível na div com classe “jogador-nome”.

• Posição do Jogador: qual a posição do jogador. Pegue a classe “jogador-posicao” e capture o seu conteúdo de texto;

• Número de gols: a quantidade de gols que o jogador fez. Capture o conteúdo da classe “jogador-gols”;

• Time do jogador: o time para qual o jogador pertence. Nesse atributo, precisamos capturar o texto “alt” da tag “img”, que está aninhada a uma div com classe “jogador-escudo”.

O código ficará assim:

const nomeJogador = $(this).find('.jogador-nome').text();
const posicaoJogador = $(this).find('.jogador-posicao').text();
const numeroGols = $(this).find('.jogador-gols').text();
const timeJogador = $(this).find('.jogador-escudo > img').attr('alt');

Agora, precisamos dar um push no nosso vetor. Para isso, usaremos um .each para criar um laço de repetição, colocando em cada posição do vetor, um objeto com os dados do jogador. Feito isso, mostraremos no console os dados de cada jogador!

Este é o código completo:

const axios = require('axios');
const cheerio = require('cheerio');
const url = 'https://globoesporte.globo.com/rj/futebol/campeonato-carioca/';

axios(url).then(response => {
    const html = response.data;
    const $ = cheerio.load(html);
    const tabelaStatus = $('.ranking-item-wrapper');
    const tabelaJogador = [];

    tabelaStatus.each(function(){
        const nomeJogador = $(this).find('.jogador-nome').text();
        const posicaoJogador = $(this).find('.jogador-posicao').text();
        const numeroGols = $(this).find('.jogador-gols').text();
        const timeJogador = $(this).find('.jogador-escudo > img').attr('alt');
        tabelaJogador.push({
            nomeJogador,
            posicaoJogador,
            numeroGols,
            timeJogador
        });
    });
    console.log(tabelaJogador);
}).catch(console.error);

Faça o teste! Veja o resultado no seu terminal!

Gostou deste exemplo? Comente abaixo!