web crawler – Fazendo um crawler com Node JS

Web Crawler – Aprenda a fazer um com Node JS.

Eu tenho certeza que você já precisou fazer uma tarefa chata e repetida na web. Aquele tipo de tarefa que você poderia mandar um robô fazer. Eu passei por isso em 2015 quando estava fazendo estágio.  Recebi a tarefa de verificar pagina por pagina se a logo da empresa estava sendo carregado no header. O mais engraçado disso tudo é que na época já existir formas de reaproveitamento de código. Ou seja, escrever apenas um header e importar nas outras páginas. Contudo, Foi uma tarefa bem chata e precisei de algumas canecas de café para finalizar. Naquela época eu não conhecia o poder de um web crawler e achava que um programa desses só poderia ser feito por alguma grande empresa como Google.

Os anos se passaram e o tempo fez a tecnologia ficar ainda mais acessível. Hoje, chegamos em um nível de abstração tão maduro que qualquer pessoa pode fazer um robô que verifica se a uma imagem existe ou não em uma página.

Antes de tudo quero te convidar para se inscrever na nossa newsletter e ficar por dentro das novidades do blog.

O que é um Web Crawler?

De forma objetiva, Web Crawler é um robô programado para acessar uma página web e coletar informações sobre ela. O Google utiliza essa tecnologia para rastrear e indexar suas páginas. O processo é bem simples, o robô acessa o seu site de tempos em tempos coleta os links que tem na sua página. Esses links acabam salvos em uma base de dados gigantesca fazendo você aparecer nos resultados de pesquisa.

Você pode ler também:

• web crawler – Fazendo login no instagram com um robô
• Busca por voz utilizando web speech api
• Transformando voz em texto com HTML5 – Speech Recognition API

 

Escopo do projeto / Motivação

Imagine que estamos trabalhando em um aplicativo que avisa sobre a previsão do tempo. Ele fica escutando sites de previsão do tempo e notifica ao usuário para levar o guarda-chuva antes de sair de casa.

Imagine que nesse mundo não existe APIs para consultar a previsão do tempo mas temos sites que disponibilizam essa informação.

A nosso missão é criar um crawler cujo o objetivo é acessar um site sobre previsão do tempo, extrair a previsão do dia e mandar isso para alguma base de dados.

Criando os arquivos

Primeiramente vamos criar um novo projeto no seu editor de código ou IDE favorita.

Não vamos nos preocupar com padrões, boas práticas etc… vamos deixar a engenharia para uma V2 desse projeto. Aliás, excesso de engenharia pode prejudicar muito o seu desempenho. Não se prenda a isso no inicio, primeiro faça seu código funcionar e depois refatores aplicando boas práticas de desenvolvimento.

Voltando ao código…

Quais libs usar para o projeto web crawler

Para esse projeto vamos usar apenas 3 pacotes do node.

• Request: É um pacote para fazer requisições HTTP. Infelizmente essa lib está depreciada. Esse projeto foi descontinuado porque aparentemente é possível fazer requisições de outras formas com outras libs e com o próprio JS. Fica a seu critério escolher outra forma de fazer requisições.
• Cheerio:  É um pacote bem legal. Basicamente ele receber um HTML em forma de string e a partir dele é possível manipular esse HTML usando a mesma sintaxe do jquery. Você pode saber mais olhando o NPM oficial deles.
• FS: Esse é um pacote nativo que já vem instalado no nodejs. O FS (File System) é um pacote para manipular arquivos dentro do seu computador. Com ele é possível criar qualquer tipo de arquivo. Você pode criar um TXT com um texto dentro ou um JSON com a estrutura de dados necessária para o nosso projeto.

Instalação dos pacotes…

yarn add cheerio request

ou

npm install cheerio request

Ideias iniciais e primeiros passos:

Primeiramente vamos importar os 3 pacotes que instalamos, em seguidas, definimos uma variável com a URL do site que queremos raspar (scraping). Por último vamos criar uma função onde ficará toda nossa lógica.

Estou chamando a função principal de ‘getDayForecast’.  Ela recebe uma URL e faz uma requisição para essa URL utilizando o request. O pacote Request disponibiliza uma função de call back como segundo parâmetro.

No nosso call back vamos verificar se ocorreu algum erro e retornar null, mas você por substituir por um console.log(erro) e finalizar a função. Caso dê tudo certo, definimos o cheerio em uma variável passando o HTML que conseguirmos na requisição.

const cheerio = require("cheerio");
const request = require("request");
const fs = require('fs');

const SITE = 'https://www.climatempo.com.br/';

function getDayForecast(URL) {
  request(URL, async (error, resp, html) => {
    if (error) return null;

    const $ = await cheerio.load(html);

    
  })
}

getDayForecast(SITE);

Analisando o site alvo.

O site que eu escolhi foi o clima tempo. Esse site disponibiliza a previsão do tempo para o dia atual e  para os próximos 2 dias.

Primeiramente vamos olhar como é o HTML do site e ver se podemos usar algo a nosso favor.

Logo que abrimos as ferramentas de desenvolvimento já é possível ver o atributo alt com a frase “não chove” quando inspecionamos o card. Podemos usar isso para verificar se o dia será de chuva ou não.

Utilizando o cheerio para coletar informações.

Como já havia mencionado, o request fez o download do HTML completo do site.  Muito desse conteúdo não será utilizado, entretanto, o papel do cheerio é selecionar apenas a informação que estamos buscando.

Vai ser um pouco complicado se o site estiver usando algum framework de css como bootstrap. Isso por que as classes do css não terão relação com o conteúdo além de se repetir bastante no código.

Em primeiro lugar vou fazer uma seleção buscando a imagem do ícone que aparece no card. É ela que tem o atributo informando o “não chove”. No print podemos ver que a tag IMG é irmã de uma ancora (elas estão no mesmo nível). Primeiramente vamos fazer uma seleção buscando pelas tags <a> com a CLASS “transparent-link” e depois, usando o seletor “+” do css, vamos buscar a taga <img /> (O seletor + trás imediatamente o próximo irmão da tag selecionada). Por fim, vamos extrair o atributo alt da tag IMG.

Usando jquery essa seleção ficaria assim:

$('a.transparent-link + img').attr('alt')

O resultado disso será o texto contido no alt da imagem selecionada.

Por fim, vamos armazenar todo o resultado do nosso scraping em um arquivo TXT usando o File System. Um arquivo TXT talvez não seja o mais adequado, mas ele vai servir por enquanto. Para uma próxima feature seria interessante armazenar esses dados em um banco.

const cheerio = require("cheerio");
const request = require("request");
const fs = require('fs');

const SITE = 'https://www.climatempo.com.br/';

function getDayForecast(URL) {
  request(URL, async (error, resp, html) => {
    if (error) return null;

    const $ = await cheerio.load(html);

    // pega o alt da imagem e salva na const alt
    const alt = $('a.transparent-link + img').attr('alt')

    // Salva a previsão em um arquivo TXT. Espera um caminho e o conteúdo do arquivo
    fs.writeFileSync("previsao.txt", alt);
  })
}

getDayForecast(SITE);

Por fim, basta rodar o comando node index.js no seu terminal e ver o resultado. (obs: Eu não sei em que momento você esta vendo isso mas até o momento o código ainda funciona. O site pode atualizar e o seletor não fazer mais sentido.)

E aii? Gostou do resultado?

Conta a sua opinião nos comentários.

 

Outros links

• @devraphaelcorrea
• raphaelcorrea.dev