Uma introdução ao Web Scraping com o Cheerio

Alicia Brunner included in Programming Javascript Web Scraping Jquery Web Development

2023-08-07 1546 words 8 minutes

Contents

O processo de web scraping permite a extração de informações de um site específico, que utiliza HTML para representar seu conteúdo. A facilidade de acessar dados valiosos pode ser facilitada quando o HTML é bem estruturado e significativo.

A utilização de uma ferramenta de web scraping é comumente empregada para extrair e manter dados, bem como monitorar quaisquer modificações subsequentes.

Conceitos de jQuery que vale a pena conhecer antes de usar o Cheerio

jQuery é uma biblioteca JavaScript amplamente utilizada que simplifica o processo de trabalho com o

Antes de se tornar proficiente na utilização do Cheerio, é imperativo entender o processo de seleção de elementos HTML por meio do jQuery. Felizmente, o jQuery suporta a maioria dos seletores CSS3, facilitando assim a extração de elementos do Document Object Model (DOM). Por favor, examine o seguinte exemplo:

 $("#container");

O referido bloco de código utiliza a biblioteca JavaScript conhecida como jQuery para selecionar os elementos HTML que possuem um atributo id com o valor “container”. Para comparação, uma implementação comparável usando JavaScript padrão seria semelhante ao seguinte:

 document.querySelectorAll("#container");

Os blocos de código anteriores demonstram as vantagens de utilizar jQuery na programação, já que o primeiro exemplo é mais legível em comparação com o segundo, o que destaca os benefícios de usar esta popular biblioteca JavaScript.

A biblioteca de programação JavaScript fornece uma variedade de técnicas para manipular elementos HTML por meio da utilização de vários métodos, como text(), html() e outros. Esses métodos permitem percorrer o Document Object Model (DOM) usando técnicas que incluem parent(), brothers(), prev() e next().

A utilização do método each() em vários projetos baseados no Cheerio tornou-se amplamente predominante, pois permite a iteração por meio de objetos e arrays. A sintaxe para a função each() aparece da seguinte forma:

 $(<element>).each(<array or object>, callback)

Dentro do referido bloco de código, a função designada como “callback” é executada sempre que um elemento ou propriedade dentro do respectivo array ou objeto é processado.

Carregando HTML com Cheerio

A utilização da biblioteca Cheerio para processamento de dados HTML ou XML começa com a chamada do método cheerio.load(). Observe a ilustração a seguir para compreender sua funcionalidade.

 const $ = cheerio.load('<html><body><h1>Hello, world!</h1></body></html>');
console.log($('h1').text())

A utilização da biblioteca jQuery permite a extração do material textual não adulterado contido na tag h1, através da implementação do método text(). O formato completo da função load() é demonstrado a seguir:

 load(content, options, mode)

O parâmetro “content” refere-se aos dados HTML ou XML reais que são passados para o método “load()”. Além disso, um objeto opcional conhecido como “opções” pode ser utilizado para manipular a operação do método mencionado acima. Em seu estado padrão, o método “load()” incorpora os elementos “html”, “head” e “body” caso estejam ausentes. No entanto, se desejar descontinuar esta funcionalidade, é imperativo definir o “modo” para “falso”.

Capturando notícias de hackers com Cheerio

O código utilizado neste empreendimento é acessível por meio de um repositório GitHub e é concedido ao público em geral de forma gratuita de acordo com os termos da licença do MIT.

Agregando o conhecimento acumulado até agora, cabe a alguém construir um web scraper elementar. O site Hacker News, preferido por empreendedores e pioneiros, apresenta uma plataforma ideal para exibir sua proficiência em web scraping devido às suas rápidas velocidades de carregamento, interface de usuário descomplicada e falta de anúncios.

As instruções fornecidas sugerem que se deve garantir a presença de Node.js e npm (Node Package Manager) em seu computador antes de criar um diretório vazio e um arquivo package.json dentro dele. Espera-se que o arquivo package.json contenha dados JSON específicos para o projeto.

 {
  "name": "web-scraper",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "cheerio": "^1.0.0-rc.12",
    "express": "^4.18.2"
  },
  "devDependencies": {
    "nodemon": "^3.0.1"
  }
}

Depois de executar as etapas acima, acesse o prompt de comando e execute os seguintes comandos:

 npm i

O processo acima mencionado deve imbuir os pré-requisitos necessários para a construção da ferramenta de raspagem da web. Esses componentes incluem Cheerio, um aplicativo para dissecar HTML, ExpressJS, uma plataforma para configurar o host, bem como Nodemon, uma ferramenta utilitária que monitora alterações no empreendimento e reinicia o servidor de forma autônoma.

Configurando as coisas e criando as funções necessárias

No arquivo index.js, é necessário estabelecer uma variável constante chamada “PORT” e atribuir a ela um valor adequado. Isso pode ser feito definindo o valor de PORT para 5500 ou qualquer outro número apropriado. Além disso, é essencial importar os pacotes Cheerio e Express para o bom funcionamento do web scraper.

 const PORT = 5500;
const cheerio = require("cheerio");
const express = require("express");
const app = express();

Vamos atribuir um valor à variável “url” designando-a com a URL do Hacker News.

 const url = 'https://news.ycombinator.com';
let html;
let finishedPage;

 function getHeader(){
    return `
        <div style="display:flex; flex-direction:column; align-items:center;">
        <h1 style="text-transform:capitalize">Scraper News</h1>
        <div style="display:flex; gap:10px; align-items:center;">
        <a href="/" id="news" onClick='showLoading()'>Home</a>
        <a href="/best" id="best" onClick='showLoading()'>Best</a>
        <a href="/newest" id="newest" onClick='showLoading()'>Newest</a>
        <a href="/ask" id="ask" onClick='showLoading()'>Ask</a>
        <a href="/jobs" id="jobs" onClick='showLoading()'>Jobs</a>
        </div>
        <p class="loading" style="display:none;">Loading...</p>
        </div>
`}

Utilize uma função, designada como getScript() , que recupera um script escrito em JavaScript para execução em um navegador da web. Esta função deve ser chamada com a inclusão de um argumento, denotado como type , para especificar seu propósito.

 function getScript(type){
    return `
    <script>
    document.title = "${type.substring(1)}"

    window.addEventListener("DOMContentLoaded", (e) => {
      let navLinks = [...document.querySelectorAll("a")];
      let current = document.querySelector("#${type.substring(1)}");
      document.body.style = "margin:0 auto; max-width:600px;";
      navLinks.forEach(x => x.style = "color:black; text-decoration:none;");
      current.style.textDecoration = "underline";
      current.style.color = "black";
      current.style.padding = "3px";
      current.style.pointerEvents = "none";
    })

    function showLoading(e){
      document.querySelector(".loading").style.display = "block";
      document.querySelector(".loading").style.textAlign = "center";
    }
    </script>`
}

Por fim, temos a implementação de uma função assíncrona chamada fetchAndRenderPage(). O objetivo desta função é recuperar dados de uma página da Web no Hacker News, processar e formatar o conteúdo usando o Cheerio e, posteriormente, transmitir as informações processadas ao cliente para fins de exibição.

 async function fetchAndRenderPage(type, res) {
    const response = await fetch(`${url}${type}`)
    html = await response.text();
}

No Hacker News, uma gama diversificada de conteúdo é apresentada. Isso inclui artigos de notícias, postagens solicitando informações ou assistência de outros usuários rotulados como"pedir", tópicos de tendência designados como"melhores", itens postados recentemente indicados como"mais recentes"e oportunidades de emprego marcadas como"empregos".

A funcionalidade acima mencionada pode ser articulada da seguinte forma: A função fetchAndRenderPage() recupera uma coleção de artigos de notícias da página da Web do Hacker News, dependendo da categoria específica designada pelo usuário. Caso o processo de recuperação dos dados seja realizado com sucesso, a função associa o código HTML às informações recuperadas.

O seguinte código pode ser adicionado à função:

 res.set('Content-Type', 'text/html');
res.write(getHeader());

const $ = cheerio.load(html);
const articles = [];
let i = 1;

O bloco de código acima mencionado ilustra a utilização de vários métodos na configuração e envio de elementos de resposta de uma página da web. Especificamente, a função “set()” é empregada para estabelecer um campo de cabeçalho do protocolo de transferência de hipertexto (HTTP), enquanto o método “write()” é responsável por despachar uma parte do corpo da resposta. Além disso, a função “load()” recebe conteúdo HTML como entrada.

Para escolher os elementos filhos de todos os componentes que possuem um atributo de classe com o valor “titleline”, você pode utilizar as seguintes linhas de código.

 $('.titleline').children('a').each(function(){
    let title = $(this).text();
    articles.push(`<h4>${i}. ${title}</h4>`);
    i\+\+;
})

A cada iteração, o bloco de código atual extrai o conteúdo textual do elemento HTML designado e o deposita na variável titulada.

Em seguida, devemos inserir a resposta do script obtida no array “articles”. Em seguida, definiremos uma variável chamada “finishedPage”, que conterá o código HTML finalizado a ser enviado ao navegador do cliente. Por fim, utilizaremos o método “write()” para transmitir a variável “finishedPage” como um chunk, seguido do fechamento do ciclo de resposta através do método “end()”.

 articles.push(getScript(type))
finishedPage = articles.reduce((c, n) => c \+ n);
res.write(finishedPage);
res.end();

Definindo as rotas para lidar com solicitações GET

Sob a função fetchAndRenderPage, utilize o método express.get() para estabelecer rotas para vários tipos de postagem. Subseqüentemente, empregue o método listen() para atender às conexões de entrada na porta designada dentro de sua rede local.

 app.get('/', (req, res) => {
    fetchAndRenderPage('/news', res);
})

app.get('/best', (req, res) => {
    fetchAndRenderPage('/best', res);
})

app.get('/newest', (req, res) => {
    fetchAndRenderPage('/newest', res);
})

app.get('/ask', (req, res) => {
    fetchAndRenderPage('/ask', res);
})

app.get('/jobs', (req, res) => {
    fetchAndRenderPage('/jobs', res);
})

app.listen(PORT)

No trecho de código mencionado acima, todo e qualquer método get incorpora uma função de retorno de chamada que anexa a função fetchAndRenderPage com o tipo correspondente e o objeto res como um argumento.

Ao abrir o terminal e executar o comando “npm run start,

Estendemos nossos mais sinceros parabéns a você por seu esforço bem-sucedido em recuperar os títulos das postagens do Hacker News por meio de raspagem, sem recorrer a nenhuma API externa.

Levando as coisas adiante com a raspagem da Web

Os dados extraídos do Hacker News podem ser utilizados para gerar uma variedade de representações visualmente atraentes, como diagramas, representações pictóricas e agregações textuais conhecidas como nuvens de palavras, todas destinadas a fornecer um meio compreensível para mostrar padrões e insights.

Ao utilizar técnicas de web scraping, pode-se examinar a reputação online de indivíduos em uma plataforma específica, examinando vários aspectos, como o número de votos positivos obtidos, os comentários postados e outros fatores relevantes.