Como extrair mapas de sites para uma maior eficiência

Utilizar informação pública para o crescimento do próprio negócio é uma prática comum entre empresários de todo o mundo.

Inteligência de preços, monitorização da concorrência, otimização de receitas e outras soluções para ajudar o seu negócio a prosperar podem ser obtidas através de uma ferramenta de web scraping. Imagine quanto tempo demoraria a copiar e colar as informações de centenas de produtos numa tabela. É aqui que a WebScrapingAPI muda as regras do jogo.

Digamos que queira extrair os produtos de um site em massa. Uma forma de utilizar uma ferramenta de web scraping é selecionar manualmente o URL de cada página de produto para que a ferramenta o extraia. Isto significa que tem de fazer alguma pesquisa no site e ver onde cada página de produto está localizada, e assim por diante.

Se o site tiver apenas algumas dezenas de páginas, pode ser viável, mas e se o site tiver centenas ou mesmo milhares de páginas? O trabalho pode tornar-se um pouco tedioso, demorar muito tempo e ser desagradável também.

O que podemos fazer numa situação dessas?

Sitemaps. O que são?

Os mapas do site podem ser benéficos quando se trata de SEO. São como uma planta do site, ajudando os motores de busca a encontrar, rastrear ou até indexar todo o conteúdo do seu site.

Normalmente, são utilizados por sites de grande dimensão para estruturar melhor as suas páginas e ajudar os motores de busca a identificar as páginas mais importantes das menos importantes.

Podemos usar estes mapas do site a nosso favor ao fazer scraping? Claro! Vamos descobrir como podem ajudar-nos a extrair o conteúdo de um site em massa.

Para utilizarmos a WebScrapingAPI, precisamos de criar a nossa conta e obter a nossa chave de acesso privada, utilizada para autenticar-nos na API. Não precisa de se preocupar, pois a criação da conta é gratuita e não é necessário adicionar o seu cartão de crédito ou outras informações pessoais.

Ao iniciar sessão, seremos redirecionados para o Painel de Controlo. Aqui, veremos a nossa chave de acesso, que iremos utilizar dentro de momentos. Certifique-se de que a guarda em segredo, mas se achar que a sua chave privada foi comprometida, pode sempre repor a mesma premindo o botão «Reset API Key».

Para mais detalhes sobre como a WebScrapingAPI funciona e como pode ser integrada no seu projeto, pode sempre consultar a documentação; e para testar as funcionalidades, o API Playground ajuda-o a visualizar os resultados ainda melhor!

Chega de apresentação, vamos ver como podemos usar a WebScrapingAPI para fazer scraping utilizando sitemaps.

Para este exemplo, utilizaremos o NodeJS como nossa linguagem de programação, mas pode utilizar qualquer linguagem de programação com a qual se sinta confortável. Em seguida, iremos extrair o mapa do site e analisar os URLs dos produtos, extrair as páginas dos produtos e armazenar os dados num ficheiro CSV. Desta forma, pode extrair dados em massa utilizando a WebScrapingAPI, mas se desejar extrair apenas determinadas páginas, também pode fazer pedidos específicos.

Neste exemplo, iremos analisar os mapas do site da Maplin, que podem ser encontrados na parte inferior do ficheiro robots.txt.

Seguindo a URL acima, seremos redirecionados para o XML que contém os links do mapa do site.

Se seguirmos o primeiro link acima, chegaremos ao mapa do site de diferentes páginas, algumas das quais são páginas de produtos! Essas são as páginas das quais extrairemos dados e os guardaremos num ficheiro CSV para uso posterior. Parece simples, não é?

Para extrair apenas os dados de que precisamos, temos de saber onde estão localizados. Para isso, vamos visitar o URL dos interruptores de iluminação inteligentes acima e usar a ferramenta de inspeção do desenvolvedor.

Percebemos que cada produto da lista está localizado sob uma tag li com a classe ais-Hits-item.

Dentro deste nó, vemos que o título e o preço se encontram, respetivamente, na tag h3 com a classe result-title e na tag span com a classe after_special price.

Este passo é bastante simples; basta instalar este conjunto de pacotes:

• jsdom: útil quando se trata de análise de HTML.
• got: este pacote irá ajudar-nos a fazer o pedido HTTP à WebScrapingAPI.
• xml2js: irá analisar o xml e convertê-lo num objeto para facilitar a utilização.
• csv-writer: para armazenar os dados extraídos num ficheiro CSV.

Para instalar todos estes pacotes, basta utilizar esta linha de comando no terminal do seu projeto:

npm install jsdom got xml2js csv-writer

Aqui, vamos utilizar uma das funcionalidades da WebScrapingAPI para renderizar a página e aguardar que todo o seu conteúdo seja carregado. Desta forma, podemos obter mais dados. Não se esqueça de adicionar a sua chave de acesso privada e o URL que pretende extrair; no nosso caso, o URL do mapa do site que contém os links para as páginas de produtos.

const api_url = "https://api.webscrapingapi.com/v1"
const url = "https://www.maplin.co.uk/media/sitemap/maplin_uk-1-1.xml"
let params = {
   api_key: "XXXXX",
   url: url,
   render_js: 1,
   wait_until: 'networkidle2'
}

Depois de obter o resultado da API, precisamos de converter a cadeia de caracteres XML num objeto.

const response = await got(api_url, {searchParams: params})

const parser = new xml2js.Parser()
parser.parseString(response.body, async function (err, result) { 
// the rest of the code 
}

O próximo passo será percorrer as URLs dos produtos, criar uma solicitação para cada uma delas para extrair os dados do produto e selecionar quais informações precisamos de armazenar.

Não precisamos de percorrer todas as URLs do mapa do site para este exemplo, por isso vamos considerar apenas as URLs da posição 5 à 10. A seguir, vamos preparar os parâmetros para a solicitação da API e usar o JSDOM para analisar o HTML resultante.

Para selecionar o título e o preço do produto, vimos anteriormente que estes se encontram dentro da tag h3 com a classe result-title e da tag span com a classe after_special price, respetivamente.

Depois de criar um objeto com o título e o preço que acabámos de extrair, adicionamo-lo à matriz de produtos.

O código deve ficar mais ou menos assim:

let products = []

for (let index = 5; index < 10; index++) {
   params.url = result['urlset']['url'][index]['loc'][0]

   const res = await got(api_url, {searchParams: params})

   const {document} = new JSDOM(res.body).window

   const elements = document.querySelectorAll('li.ais-Hits-item')
   if (elements) {
       elements.forEach((element) => {
           let element_obj = {}

           const title = element.querySelector('h3.result-title')
           if (title && title.innerHTML) element_obj.title = title.innerHTML
           const price = element.querySelector('.after_special.price')
           if (price && price.innerHTML) element_obj.price = price.innerHTML

           if (element_obj && element_obj.title && element_obj.price)
               products.push(element_obj)
       })
   }
}

É aqui que usamos a biblioteca csv-writer para nos ajudar a converter uma lista de objetos num ficheiro CSV.

Basta especificar o caminho e o nome do ficheiro a ser criado, bem como a matriz de cabeçalhos, que consiste em objetos de coluna, onde o id representa as propriedades dos objetos de produto e o título é o nome da coluna.

const csvWriter = require('csv-writer').createObjectCsvWriter({
   path: 'products.csv',
   header: [
       {id: 'title', title: 'Product Name'},
       {id: 'price', title: 'Product Price'}
   ]
})
csvWriter.writeRecords(products).then(() => console.log('Success!!'))

Extraímos com sucesso os dados utilizando sitemaps para navegar pelas páginas de produtos de um site, parabéns! Aqui está a visualização completa do código:

const {JSDOM} = require("jsdom");
const got = require("got");
const xml2js = require("xml2js");

(async () => {
   const api_url = "https://api.webscrapingapi.com/v1"
   const url = "https://www.maplin.co.uk/media/sitemap/maplin_uk-1-1.xml"
   let params = {
       api_key: "XXXXX",
       url: url,
       render_js: 1,
       wait_until: 'networkidle2'
   }
   const response = await got(api_url, {searchParams: params})

   const parser = new xml2js.Parser()
   parser.parseString(response.body, async function (err, result) {

       let products = []

       for (let index = 5; index < 10; index++) {
           params.url = result['urlset']['url'][index]['loc'][0]

           const res = await got(api_url, {searchParams: params})

           const {document} = new JSDOM(res.body).window

           const elements = document.querySelectorAll('li.ais-Hits-item')
           if (elements) {
               elements.forEach((element) => {
                   let element_obj = {}

                   const title = element.querySelector('h3.result-title')
                   if (title && title.innerHTML) element_obj.title = title.innerHTML
                   const price = element.querySelector('.after_special.price')
                   if (price && price.innerHTML) element_obj.price = price.innerHTML

                   if (element_obj && element_obj.title && element_obj.price)
                       products.push(element_obj)
               })
           }
       }

       const csvWriter = require('csv-writer').createObjectCsvWriter({
           path: 'products.csv',
           header: [
               {id: 'title', title: 'Product Name'},
               {id: 'price', title: 'Product Price'}
           ]
       })

       csvWriter.writeRecords(products).then(() => console.log('Success!!'))
   })
})();

Espero que este tutorial tenha sido útil e tenha facilitado a sua compreensão de como é simples usar os sitemaps a nosso favor no que diz respeito ao web scraping.

É ainda menos demorado e, desta forma, não perderá páginas como normalmente aconteceria ao navegar manualmente num site.

Quando se trata de scraping em massa, é claro que usar mapas do site é uma solução muito melhor do que selecionar manualmente cada página de produto ou mesmo usar um spider para rastrear o site.

Até ao próximo episódio do nosso programa de web scraping, que tal experimentares a WebScrapingAPI? Podes testá-la com até 1000 chamadas de API gratuitas. Até à próxima!