Web Scraping com JavaScript e Node.Js

Robert Sfichi em 16 de janeiro de 2023

Sejamos honestos. A partir de agora, o volume de dados da Internet só vai aumentar cada vez mais. Não há realmente nada que possamos fazer em relação a isso. É aqui que os Web Scrapers entram em cena.

No artigo seguinte, vamos mostrar-lhe como construir o seu próprio Web Scraper utilizando o JavaScript como linguagem de programação principal.

Compreender o Web Scraping com JavaScript

Um web scraper é uma peça de software que o ajuda a automatizar o tedioso processo de recolha de dados úteis de sítios Web de terceiros. Normalmente, este procedimento envolve fazer um pedido a uma página Web específica, ler o código HTML e decompor esse código para recolher alguns dados.

Porque é que alguém deve recolher dados?

Digamos que quer criar uma plataforma de comparação de preços. Precisa dos preços de vários artigos de algumas lojas em linha. Uma ferramenta de recolha de dados da Web pode ajudá-lo a fazer isso em poucos minutos.

Talvez esteja a tentar obter novos contactos para a sua empresa ou mesmo obter os preços mais favoráveis de voos ou hotéis. Enquanto andávamos a pesquisar na Internet para este artigo, deparámo-nos com o Brisk Voyage.

A Brisk Voyage é uma aplicação Web que ajuda os seus utilizadores a encontrar viagens de fim de semana baratas e de última hora. Utilizando uma espécie de tecnologia de recolha de dados da Web, conseguem verificar constantemente os preços dos voos e dos hotéis. Quando o "web scraper" encontra uma viagem com um preço baixo fora do normal, o utilizador recebe um e-mail com as instruções de reserva.

Para que são utilizados os "web scrapers"?

Os programadores estão a utilizar raspadores Web para todos os tipos de obtenção de dados, mas os casos mais utilizados são os seguintes:

• Análise do mercado
• Comparação de preços
• Geração de contactos
• Investigação académica
• Recolha de conjuntos de dados de treino e teste para aprendizagem automática

Quais são os desafios do Web Scraping com JavaScript e Node.Js?

Sabe aquelas pequenas caixas de seleção que o obrigam a admitir que não é um robô? Bem, nem sempre conseguem manter os robots afastados.

Mas, na maior parte das vezes, sim, e quando os motores de busca descobrem que está a tentar fazer scraping do seu sítio Web sem autorização, restringem o seu acesso.

Outro obstáculo que os raspadores da Web enfrentam é representado pelas alterações na estrutura de um sítio Web. Uma pequena alteração na estrutura de um sítio Web pode fazer-nos perder muito tempo. As ferramentas de raspagem da Web requerem actualizações frequentes para se adaptarem e realizarem o trabalho.

Um outro desafio que os web scrapers enfrentam é o chamado bloqueio geográfico. Com base na sua localização física, um sítio Web pode proibir completamente o seu acesso se os pedidos vierem de regiões não fidedignas.

Para combater estes desafios e ajudá-lo a concentrar-se na criação do seu produto, criámos a WebScrapingAPI. É uma API escalonada de nível empresarial fácil de utilizar que o ajuda a recolher e gerir dados HTML. Somos obcecados com a velocidade, utilizamos uma rede global de proxy rotativo e temos mais de 10.000 clientes que já utilizam os nossos serviços. Se acha que não tem tempo para construir o web scraper de raiz, pode experimentar o WebScrapingAPI utilizando o nível gratuito.

APIs: A forma mais fácil de fazer scraping da Web

A maioria das aplicações Web fornece uma API que permite aos utilizadores acederem aos seus dados de uma forma pré-determinada e organizada. O utilizador faz um pedido a um ponto final específico e a aplicação responde com todos os dados que o utilizador pediu especificamente. Na maioria das vezes, os dados já estão formatados como um objeto JSON.

Ao utilizar uma interface de programação de aplicações, normalmente não tem de se preocupar com os obstáculos apresentados anteriormente. Seja como for, as API também podem receber actualizações. Nesta situação, o utilizador tem de estar sempre atento à API que está a utilizar e atualizar o código em conformidade para não perder a sua funcionalidade.

Além disso, a documentação de uma API é muito importante. Se uma funcionalidade da API não estiver claramente documentada, o utilizador perde muito tempo.

Compreender a Web

Uma boa compreensão da Internet requer muitos conhecimentos. Vamos fazer uma breve introdução a todos os termos necessários para compreender melhor o web scraping.

O HTTP ou HyperText Transfer Protocol é a base de qualquer troca de dados na Web. Como o nome sugere, o HTTP é uma convenção cliente-servidor. Um cliente HTTP, como um navegador Web, abre uma ligação a um servidor HTTP e envia uma mensagem, como: "Ei! O que é que se passa? Importas-te de me passar essas imagens?". Normalmente, o servidor dá uma resposta, como o código HTML, e fecha a ligação.

Digamos que precisa de visitar o Google. Se escrever o endereço no navegador Web e premir enter, o cliente HTTP (o navegador) enviará a seguinte mensagem para o servidor:

GET / HTTP/1.1
Host: google.com
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/web\p,*/*;q=0.8
Accept-Encoding: gzip, deflate, sdch, br
Connection: keep-aliveUser-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit\/537.36 (KHTML, como Gecko) Chrome/56.0.2924.87 Safari/537.36

A primeira linha da mensagem contém o método de pedido (GET), o caminho para o qual fizemos o pedido (no nosso caso é apenas '/' porque só acedemos a www.google.com), a versão do protocolo HTTP e vários cabeçalhos, como Connection ou User-Agent.

Vamos falar sobre os campos de cabeçalho mais importantes para o processo:

• Anfitrião: O nome de domínio do servidor a que acedeu depois de ter digitado o endereço no navegador Web e premido enter.
• User-Agent: Aqui podemos ver detalhes sobre o cliente que fez o pedido. Utilizo um MacBook, como se pode ver na parte __(Macintosh; Intel Mac OS X 10_11_6)__, e o Chrome como navegador __(Chrome/56.0.2924.87)__.
• Aceitar: Ao utilizar este cabeçalho, o cliente obriga o servidor a enviar-lhe apenas um determinado tipo de respostas, como application/JSON ou text/plain.
• Referenciador: Este campo de cabeçalho contém o endereço da página que efectua o pedido. Os sítios Web utilizam este cabeçalho para alterar o seu conteúdo com base na origem do utilizador.

Uma resposta do servidor pode ter o seguinte aspeto:

HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu) Content-Type: text/html; charset=utf-8 
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>The content of the document</body>
</html>

Como pode ver, na primeira linha está o código de resposta HTTP: **200OK. Isto significa que a ação de recolha de dados foi bem sucedida.

Agora, se tivéssemos enviado o pedido usando um navegador da Web, ele teria analisado o código HTML, obtido todos os outros recursos, como CSS, arquivos JavaScript, imagens e renderizado a versão final da página da Web. Nas etapas a seguir, vamos tentar automatizar esse processo.

Entendendo o Web Scraping com Node.Js

O JavaScript foi inicialmente criado para ajudar os seus utilizadores a adicionar conteúdo dinâmico aos sítios Web. No início, não podia interagir diretamente com um computador ou com os seus dados. Quando se acede a um sítio Web, o JavaScript é lido pelo navegador e transformado num par de linhas de código que o computador pode processar.

Apresentamos o Node.Js, a ferramenta que ajuda o Javascript a ser executado não apenas no lado do cliente, mas também no lado do servidor. O Node.Js pode ser definido como um JavaScript gratuito e de código aberto para programação do lado do servidor. Ajuda os seus utilizadores a criar e executar rapidamente aplicações de rede.

const http = require('http');
const port = 8000;
const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello world!');
});
server.listen(port, () => {
  console.log(`Server running on port 8000.`);
});

Se não tiver o Node.Js instalado, verifique a próxima etapa para obter as instruções a seguir. Caso contrário, crie um novo arquivo index.js e execute-o digitando em um terminal node index.js, abra um navegador e navegue até localhost:8000. Deverá ver a seguinte cadeia de caracteres: "Hello world!".

Ferramentas necessárias

Chrome - Siga o guia de instalação aqui.

• VSCode - Pode descarregá-lo a partir desta página e seguir as instruções para o instalar no seu dispositivo.
• Node.Js - Antes de começar a usar o Axios, Cheerio ou Puppeteer, precisamos instalar o Node.Js e o gerenciador de pacotes Node. A maneira mais fácil de instalar o Node.Js e o NPM é obter um dos instaladores da fonte oficial do Node.Js e executá-lo.

Depois de concluída a instalação, pode verificar se o Node.Js está instalado executando node -v e npm -v numa janela de terminal. A versão deve ser superior à v14.15.5. Se estiver a ter problemas com este processo, existe uma forma alternativa de instalar o Node.Js.

Agora, vamos criar um novo projeto NPM. Crie uma nova pasta para o projeto e execute npm init -y. Agora vamos instalar as dependências.

• Axios - uma biblioteca JavaScript usada para fazer solicitações HTTP do Node.Js. Execute npm install axios na pasta recém-criada.
• Cheerio - an open-source library that helps us to extract useful information by parsing markup and providing an API for manipulating the resulting data. To use Cheerio you can select tags of an HTML document by making use of selectors. A selector looks like this:  $("div"). This specific selector helps us pick all <div> elements on a page.

Para instalar o Cheerio, por favor execute npm install cheerio na pasta dos projectos.

• Puppeteer - uma biblioteca Node.Js que costumava obter controlo do Chrome ou Chromium fornecendo uma API de alto nível.

Para usar o Puppeteer, é necessário instalá-lo usando um comando semelhante: npm install puppeteer. Note que quando instala este pacote, ele também instala uma versão recente do Chromium que é garantidamente compatível com a sua versão do Puppeteer.

Inspeção da fonte de dados

Em primeiro lugar, é necessário aceder ao sítio Web que pretende extrair utilizando o Chrome ou qualquer outro navegador Web. Para conseguir extrair os dados de que necessita, tem de compreender a estrutura do sítio Web.

Inspeção orientada do sítio Web

Quando conseguir aceder ao sítio Web, utilize-o como um utilizador normal. Se acedeu ao subreddit /r/dundermifflin, pode ver as mensagens na página principal clicando nelas, ver os comentários e os votos positivos, e até ordenar as mensagens pelo número de votos durante um período de tempo específico.

Como se pode ver, o sítio Web contém uma lista de mensagens e cada mensagem tem alguns votos positivos e alguns comentários.

É possível compreender muitos dos dados de um sítio Web apenas olhando para o seu URL. Neste caso, https://www.old.reddit.com/r/DunderMifflin representa o URL de base, o caminho que nos leva à comunidade Reddit "The Office". Ao começar a ordenar as publicações pelo número de votos, pode ver que o URL de base está a mudar para https://www.old.reddit.com/r/DunderMifflin/top/?t=year.

Os parâmetros de consulta são extensões do URL que são utilizadas para ajudar a definir conteúdos ou acções específicas com base nos dados que estão a ser transmitidos. No nosso caso, "?t=year" representa o período de tempo selecionado para o qual pretendemos ver as mensagens mais votadas.

Enquanto estiveres neste subreddit específico, o URL de base permanecerá o mesmo. As únicas coisas que mudarão são os parâmetros de consulta. Podemos vê-los como os filtros aplicados à base de dados para obter os dados que pretendemos. Pode mudar o período de tempo para ver apenas as mensagens mais votadas no último mês ou semana, alterando apenas o URL.

Inspeção utilizando ferramentas de programador

Nos passos seguintes, vai aprender mais sobre a forma como a informação está organizada na página. Terá de o fazer para compreender melhor o que podemos realmente extrair da nossa fonte.

As ferramentas de programador ajudam-no a explorar interactivamente o Modelo de Objeto de Documento (DOM) do Web site. Vamos utilizar as ferramentas de programador no Chrome, mas pode utilizar qualquer navegador Web com que se sinta confortável. No Chrome, pode abri-las clicando com o botão direito do rato em qualquer parte da página e selecionando a opção "Inspecionar".

No novo menu que apareceu no ecrã, selecione o separador "Elementos". Este apresentará a estrutura HTML interactiva do sítio Web.

Pode interagir com o sítio Web, editando a sua estrutura, expandindo e colapsando elementos, ou mesmo eliminando-os. Note que estas alterações só serão visíveis para si.

Expressões regulares e sua função

As expressões regulares, também conhecidas como RegEx, ajudam-no a criar regras que lhe permitem encontrar e gerir diferentes cadeias de caracteres. Se alguma vez precisar de analisar grandes quantidades de informação, dominar o mundo das expressões regulares pode poupar-lhe muito tempo.

When you first start using regex, it seems to be a little too complicated, but the truth is they're pretty easy to use. Let's take the following example: \d. By using this expression, you can easily grab any digit from 0 to 9. Of course, there are a lot more complex ones, like: ^(\(\d{3}\)|^\d{3}[.-]?)?\d{3}[.-]?\d{4}$. This matches a phone number, with or without parentheses around the area code, or with or without dots to separate the numbers.

Como pode ver, as expressões regulares são bastante fáceis de utilizar e podem ser muito poderosas se passar tempo suficiente a dominá-las.

Compreender o Cheerio.js

Depois de ter instalado com êxito todas as dependências apresentadas anteriormente e inspeccionado o DOM utilizando as ferramentas de programador, pode passar à recolha de dados propriamente dita.

Uma coisa que deve ter em conta é que se a página que está a tentar extrair for uma SPA (Single Page Application), o Cheerio pode não ser a melhor solução. A razão é que o Cheerio não consegue pensar como um navegador da Web. É por isso que, nas etapas a seguir, vamos usar o Puppeteer. Mas até lá, vamos descobrir o quão poderoso é o Cheerio.

Para testar a funcionalidade do Cheerio, vamos tentar recolher todos os títulos de publicações no subreddit apresentado anteriormente: /r/dundermifflin.

Vamos criar um novo ficheiro chamado index.js e digitar ou apenas copiar as seguintes linhas:

const axios = require("axios");
const cheerio = require("cheerio");
const fetchTitles = async () => {
	try {
		const response = await axios.get('https://old.reddit.com/r/DunderMifflin/');
                const html = response.data;
		const $ = cheerio.load(html);
		const titles = [];
		$('div > p.title > a').each((_idx, el) => {
			const title = $(el).text()
			titles.push(title)
		});
		return titles;
	} catch (error) {
		throw error;
	}};
fetchTitles().then((titles) => console.log(titles));

Para entender melhor o código escrito acima, vamos explicar o que a função assíncrona fetchTitles() faz:

Primeiro, fazemos um pedido GET ao antigo site do Reddit usando a biblioteca Axios. O resultado desse pedido é então carregado pelo Cheerio na linha 10. Usando as ferramentas de desenvolvimento, descobrimos que os elementos que contêm as informações desejadas são algumas tags âncora. Para termos a certeza de que seleccionamos apenas as etiquetas âncora que contêm o título da publicação, vamos também selecionar os seus pais utilizando o seguinte seletor: $('div > p.title > a')

Para obter cada título individualmente e não apenas uma grande quantidade de letras que não fazem sentido, temos de percorrer cada publicação utilizando a função each(). Por fim, chamar text() a cada item devolver-me-á o título dessa publicação específica.

Para o executar, basta escrever node index.js no terminal e carregar em enter. Deverá ver uma matriz que contém todos os títulos dos posts.

DOM para NodeJS

Como o DOM de uma página da Web não está disponível diretamente para o Node.Js, podemos usar o JSDOM. De acordo com sua documentação, o JSDOM é uma implementação em JavaScript puro de muitos padrões web, notadamente os padrões WHATWG DOM e HTML, para uso com o Node.Js.

Por outras palavras, utilizando o JSDOM, podemos criar um DOM e manipulá-lo utilizando os mesmos métodos que utilizaríamos para manipular o do navegador Web.

O JSDOM permite-lhe interagir com um sítio Web que precisa de rastrear. Se estiver familiarizado com a manipulação do DOM do navegador Web, compreender a funcionalidade do JSDOM não exigirá muito esforço.

Para entender melhor como o JSDOM funciona, vamos instalá-lo, criar um novo arquivo index.js e digitar ou copiar o seguinte código:

const { JSDOM } = require('jsdom')
const { document } = new JSDOM(
  '<h1 class="string">Dunder mifflin, the people person\'s paper people!</h2>'
).window
const string = document.querySelector('.string')
console.log(string.innerHTML)
string.textContent = 'Hello world'
console.log(string.innerHTML)

Como pode ver, o JSDOM cria um novo Modelo de Objeto de Documento que pode ser manipulado usando o mesmo método que usamos para manipular o DOM do navegador. Na linha 3, é criado um novo elemento h1 no DOM. Utilizando a classe atribuída ao cabeçalho, seleccionamos o elemento na linha 7 e alteramos o seu conteúdo na linha 10. Pode ver a diferença imprimindo o elemento DOM antes e depois da alteração.

Para o executar, abra um novo terminal, escreva node index.js e prima enter.

É claro que pode realizar acções muito mais complexas utilizando o JSDOM, como abrir uma página Web e interagir com ela, preencher formulários e clicar em botões.

O JSDOM é uma boa opção, mas o Puppeteer ganhou muita força nos últimos anos.

Compreender o Puppeteer: como desvendar páginas JavaScript

Utilizando o Puppeteer, pode fazer a maioria das coisas que pode fazer manualmente num navegador Web, como preencher um formulário, gerar capturas de ecrã de páginas ou automatizar testes de IU.

Vamos tentar compreender melhor a sua funcionalidade tirando uma captura de ecrã da comunidade Reddit /r/dundermifflin. Se você já instalou a dependência anteriormente, continue para o próximo passo. Caso contrário, execute o npm i puppeteer na pasta de projetos. Agora, crie um novo arquivo index.js e digite ou copie o seguinte código:

const puppeteer = require('puppeteer')
async function takeScreenshot() {
	try {
		const URL = 'https://www.old.reddit.com/r/dundermifflin/'
		const browser = await puppeteer.launch()
		const page = await browser.newPage()
		await page.goto(URL)
		await page.pdf({ path: 'page.pdf' })
		await page.screenshot({ path: 'screenshot.png' })
		await browser.close()
	} catch (error) {
		console.error(error)
	}
}
takeScreenshot()

Criámos a função assíncrona takeScreenshot().

Como pode ver, primeiro é iniciada uma instância do browser utilizando o comando puppeteer.launch(). Em seguida, criamos uma nova página e, ao chamar a função goto() utilizando o URL como parâmetro, a página criada anteriormente será levada para esse URL específico. Os métodos pdf() e screenshot() ajudam-nos a criar um novo ficheiro PDF e uma imagem que contém a página Web como componente visual.

Finalmente, a instância do navegador é fechada na linha 13. Para o executar, escreva node index.js no terminal e prima enter. Deverá ver dois novos ficheiros na pasta de projectos chamados page.pdf e screenshot.png.

Alternativa a marionetista

Se não se sentir à vontade para usar o Puppeteer, pode sempre usar uma alternativa como o NightwatchJS, o NightmareJS ou o CasperJS.

Vejamos o Nightmare, por exemplo. Como está a usar Electrons em vez de Chromium, o tamanho do pacote é um pouco menor. O Nightmare pode ser instalado executando o comando npm I nightmare. Vamos tentar replicar o processo anteriormente bem sucedido de tirar uma captura de ecrã da página usando o Nightmare em vez do Puppeteer.

Vamos criar um novo ficheiro index.js e escrever ou copiar o seguinte código:

const Nightmare = require('nightmare')
const nightmare = new Nightmare()
return nightmare.goto('https://www.old.reddit.com/r/dundermifflin')
	.screenshot('./nightmare-screenshot.png')
 	.end()
	.then(() => {
		console.log('Done!')
	})
	.catch((err) => {
		console.error(err)
	})

Como se pode ver, na linha 2 criamos uma nova instância do Nightmare, apontamos o browser para a página Web que queremos capturar, tiramos e guardamos a captura de ecrã na linha 5 e terminamos a sessão do Nightmare na linha 6.

Para executá-lo, digite node index.js no terminal e pressione enter. Deverá ver dois novos ficheiros nightmare-screenshot.png na pasta de projectos.

Principais conclusões

Se ainda está aqui, parabéns! Tem toda a informação necessária para construir o seu próprio raspador Web. Vamos resumir o que aprendeu até agora:

• Um web scraper é um software que o ajuda a automatizar o tedioso processo de recolha de dados úteis de sítios Web de terceiros.
• As pessoas estão a utilizar raspadores da Web para todos os tipos de recolha de dados: análise de mercado, comparação de preços ou geração de leads.
• Os clientes HTTP, como os navegadores Web, ajudam-no a fazer pedidos a um servidor e a aceitar uma resposta.
• O JavaScript foi inicialmente criado para ajudar os seus utilizadores a adicionar conteúdo dinâmico aos sítios Web. O Node.Js é uma ferramenta que ajuda o Javascript a ser executado não só no lado do cliente, mas também no lado do servidor.
• Cheerio é uma biblioteca de código aberto que nos ajuda a extrair informações úteis analisando HTML e fornecendo uma API para manipular os dados resultantes.
• O Puppeteer é uma biblioteca Node.Js utilizada para obter o controlo do Chrome ou do Chromium, fornecendo uma API de alto nível. Graças a ela, é possível fazer a maioria das coisas que se podem fazer manualmente num navegador Web, como preencher um formulário, gerar capturas de ecrã de páginas ou automatizar.
• É possível compreender muitos dos dados de um sítio Web apenas olhando para o seu URL.
• As ferramentas para programadores ajudam-no a explorar interactivamente o Modelo de Objeto de Documento do sítio Web.
• As expressões regulares ajudam-no a criar regras que lhe permitem encontrar e gerir diferentes cadeias de caracteres.
• O JSDOM é uma ferramenta que cria um novo Modelo de Objeto de Documento que pode ser manipulado utilizando o mesmo método que utiliza para manipular o DOM do browser.

Esperamos que as instruções tenham sido claras e que tenha conseguido obter todas as informações necessárias para o seu próximo projeto. Se, mesmo assim, não quiser fazê-lo sozinho, pode sempre experimentar o WebScrapingAPI.

Obrigado por ter ficado até ao fim!