Pré-requisitos
Antes de começarmos, vamos certificar-nos de que dispomos das ferramentas necessárias.
Primeiro, baixe e instale o Node.js do site oficial, certificando-se de usar a versão Long-Term Support (LTS). Isso também instalará automaticamente o Node Package Manager (NPM), que usaremos para instalar outras dependências.
Para este tutorial, usaremos o Visual Studio Code como nosso ambiente de desenvolvimento integrado (IDE), mas você pode usar qualquer outro IDE de sua escolha. Crie uma nova pasta para seu projeto, abra o terminal e execute o seguinte comando para configurar um novo projeto Node.js:
npm init -yIsto criará um ficheiro package.json no seu diretório de projeto, que armazenará informações sobre o seu projeto e as suas dependências.
Em seguida, precisamos instalar o TypeScript e as definições de tipo para o Node.js. O TypeScript oferece tipagem estática opcional que ajuda a evitar erros no código. Para fazer isso, execute no terminal:
npm install typescript @types/node --save-devPode verificar a instalação executando:
npx tsc --versãoO TypeScript usa um arquivo de configuração chamado tsconfig.json para armazenar opções do compilador e outras configurações. Para criar esse arquivo em seu projeto, execute o seguinte comando:
npx tsc -initCertifique-se de que o valor de "outDir" esteja definido como "dist". Desta forma, iremos separar os ficheiros TypeScript dos ficheiros compilados. Pode encontrar mais informações sobre este ficheiro e as suas propriedades na documentação oficial do TypeScript.
Agora, crie um diretório "src" no seu projeto e um novo ficheiro "index.ts". É aqui que vamos manter o código de raspagem. Para executar o código TypeScript, é necessário compilá-lo primeiro, portanto, para garantir que não nos esqueçamos dessa etapa extra, podemos usar um comando definido de forma personalizada.
Vá ao ficheiro "package. json" e edite a secção "scripts" desta forma:
"scripts": {
"test": "npx tsc && node dist/index.js"
}Desta forma, quando for executar o script, basta digitar "npm run test" no seu terminal.
Por fim, para extrair os dados do site, usaremos o Puppeteer, uma biblioteca de navegador sem cabeça para Node.js que permite controlar um navegador da Web e interagir com sites de forma programática. Para instalá-la, execute este comando no terminal:
npm install puppeteerÉ altamente recomendado quando se pretende garantir a integridade dos dados, uma vez que muitos sítios Web actuais contêm conteúdo gerado dinamicamente. Se estiver curioso, pode consultar a documentação do Puppeteer antes de continuar para ver o que ele é capaz de fazer.
Localização dos dados
Agora que já tem o seu ambiente configurado, podemos começar a ver como extrair os dados. Para este artigo, optei por extrair dados desta página de produto: https://www.walmart.com/ip/Keter-Adirondack-Chair-Resin-Outdoor-Furniture-Teal/673656371.
Vamos extrair os seguintes dados:
- o nome do produto;
- o número de classificação do produto;
- as avaliações do produto são importantes;
- o preço do produto;
- as imagens do produto;
- os detalhes do produto.
Pode ver todas estas informações destacadas na imagem de ecrã abaixo:
Ao abrir as Ferramentas do desenvolvedor em cada um desses elementos, você poderá observar os seletores CSS que usaremos para localizar os elementos HTML. Se não sabe muito bem como funcionam os selectores CSS, pode consultar este guia para principiantes.
Extração de dados
Antes de escrever o nosso script, vamos verificar se a instalação do Puppeteer correu bem:
import puppeteer from 'puppeteer';
async function scrapeWalmartData(walmart_url: string): Promise<void> {
// Launch Puppeteer
const browser = await puppeteer.launch({
headless: false,
args: ['--start-maximized'],
defaultViewport: null
})
// Create a new page
const page = await browser.newPage()
// Navigate to the target URL
await page.goto(walmart_url)
// Close the browser
await browser.close()
}
scrapeWalmartData("https://www.walmart.com/ip/Keter-Adirondack-Chair-Resin-Outdoor-Furniture-Teal/673656371")Aqui, abrimos uma janela do navegador, criamos uma nova página, acedemos ao URL de destino e, em seguida, fechamos o navegador. Por uma questão de simplicidade e para facilitar a depuração visual, abro a janela do navegador maximizada no modo não headless.
Agora, vamos dar uma vista de olhos à estrutura do sítio Web:
Para obter o nome do produto, selecionamos o atributo«itemprop»do elemento«h1». O resultado que procuramos é o seu conteúdo de texto.
// Extract product name
const product_name = await page.evaluate(() => {
const name = document.querySelector('h1[itemprop="name"]')
return name ? name.textContent : ''
})
console.log(product_name)No que diz respeito ao número de classificação, identificámos como fiáveis os elementos«span»cujo nome de classe termina em«rating-number».
// Extract product rating number
const product_rating = await page.evaluate(() => {
const rating = document.querySelector('span[class$="rating-number"]')
return rating ? rating.textContent : ''
})
console.log(product_rating)E, por fim (para a secção destacada), no que diz respeito ao número de avaliações e ao preço do produto, recorremos ao atributo«itemprop», tal como acima.
// Extract product reviews count
const product_reviews = await page.evaluate(() => {
const reviews = document.querySelector('a[itemprop="ratingCount"]')
return reviews ? reviews.textContent : ''
})
console.log(product_reviews)
// Extract product price
const product_price = await page.evaluate(() => {
const price = document.querySelector('span[itemprop="price"]')
return price ? price.textContent : ''
})
console.log(product_price)Passando agora às imagens dos produtos, avançamos no documento HTML:
É um pouco mais complicado, mas não impossível. Não conseguimos identificar as imagens de forma única apenas por si mesmas, por isso, desta vez, vamos focar-nos nos seus elementos pai. Assim, extraímos os elementos «div» que têm o atributo«data-testid»definido como«media-thumbnail».
Em seguida, convertemos o resultado numa matriz de JavaScript, para que possamos associar cada elemento ao seu atributo«src».
// Extract product images
const product_images = await page.evaluate(() => {
const images = document.querySelectorAll('div[data-testid="media-thumbnail"] > img')
const images_array = Array.from(images)
return images ? images_array.map(a => a.getAttribute("src")) : []
})
console.log(product_images)E, por último, mas não menos importante, descemos na página para consultar os detalhes do produto:
Aplicamos a mesma lógica utilizada na extração das imagens e, desta vez, limitamo-nos a utilizar o nome da classe«dangerous-html».
// Extract product details
const product_details = await page.evaluate(() => {
const details = document.querySelectorAll('div.dangerous-html')
const details_array = Array.from(details)
return details ? details_array.map(d => d.textContent) : []
})
console.log(product_details)O resultado final deve ser o seguinte:
Cadeira Keter Adirondack, Mobiliário de exterior em resina, azul-petróleo
(4,1)
269 avaliações
Agora por 59,99 $
[
'https://i5.walmartimages.com/asr/51fc64d9-6f1f-46b7-9b41-8880763f6845.483f270a12a6f1cbc9db5a37ae7c86f0.jpeg?odnHeight=80&odnWidth=80&odnBg=FFFFFF', 'https://i5.walmartimages.com/asr/80977b5b-15c5-435e-a7d6-65f14b2ee9c9.d1deed7ca4216d8251b55aa45eb47a8f.jpeg?odnHeight=80&odnWidth=80&odnBg=FFFFFF',
'https://i5.walmartimages.com/asr/80c1f563-91a9-4bff-bda5-387de56bd8f5.5844e885d77ece99713d9b72b0f0d539.jpeg?odnHeight=80&odnWidth=80&odnBg=FFFFFF', 'https://i5.walmartimages.com/asr/fd73d8f2-7073-4650-86a3-4e809d09286e.b9b1277761dec07caf0e7354abb301fc.jpeg?odnHeight=80&odnWidth=80&odnBg=FFFFFF',
'https://i5.walmartimages.com/asr/103f1a31-fbc5-4ad6-9b9a-a298ff67f90f.dd3d0b75b3c42edc01d44bc9910d22d5.jpeg?odnHeight=80&odnWidth=80&odnBg=FFFFFF', 'https://i5.walmartimages.com/asr/120121cd-a80a-4586-9ffb-dfe386545332.a90f37e11f600f88128938be3c68dca5.jpeg?odnHeight=80&odnWidth=80&odnBg=FFFFFF',
'https://i5.walmartimages.com/asr/47b8397f-f011-4782-bbb7-44bfac6f3fcf.bb12c15a0146107aa2dcd4cefba48c38.jpeg?odnHeight=80&odnWidth=80&odnBg=FFFFFF'
]
[
'A cadeira Keter Adirondack permite-lhe desfrutar do conforto descontraído desta cadeira popular, mas sem as preocupações associadas à madeira. Combinando o estilo tradicional e o aspeto e toque da madeira com materiais duráveis e que não requerem manutenção, esta cadeira irá encontrar',
'Cadeira Keter Adirondack, Mobiliário de exterior em resina, cinzenta: Fabricada em resina resistente a todas as condições meteorológicas para uma durabilidade máxima A construção em polipropileno resistente às intempéries evita o desbotamento, a oxidação, o descascamento e as amolgadelas — ao contrário da madeira verdadeira Montagem rápida e fácil Porta-copos giratório Conforto clássico redefinido Design ergonómico Durável e resistente às intempéries Relaxamento sem preocupações Dimensões: 79,9 cm C x 80 cm L x 96,5 cm A A altura do assento é de 39 cm, com um assento profundo e encosto alto A cadeira pesa 10 kg — pesada o suficiente para não ser derrubada pelo vento, mas leve o suficiente para reorganizar facilmente o seu espaço no pátio Capacidade de 159 kg '
]Contornar a deteção de bots
Embora a extração de dados do Walmart possa parecer fácil à primeira vista, o processo pode tornar-se mais complexo e desafiante à medida que o projeto vai ganhando escala. O site de retalho implementa várias técnicas para detetar e impedir o tráfego automatizado, pelo que o seu programa de extração, à medida que ganha escala, começa a ser bloqueado.
O Walmart utiliza o modelo «Press & Hold» de CAPTCHA, fornecido pela PerimeterX, que é conhecido por ser praticamente impossível de resolver a partir do código. Além disso, o site também utiliza proteções fornecidas pela Akamai e pela ThreatMetrix e recolhe vários dados do navegador para gerar e associar ao utilizador uma impressão digital única.
Entre os dados do navegador recolhidos, encontramos:
- propriedades do objeto Navigator (deviceMemory, hardwareConcurrency, idiomas, plataforma, userAgent, webdriver, etc.)
- identificação de impressões digitais na tela
- controlos de prazos e de desempenho
- plug-in e enumeração de voz
- Web Workers
- controlo das dimensões do ecrã
- e muitos mais
Uma forma de superar estes desafios e continuar a extrair dados em grande escala é utilizar uma API de extração. Este tipo de serviços oferece uma forma simples e fiável de aceder a dados de sites como o walmart.com, sem necessidade de criar e manter o seu próprio programa de extração.
O WebScrapingAPI é um exemplo de um produto deste género. O seu mecanismo de rotação de proxy evita completamente os CAPTCHAs, e a sua base de conhecimentos alargada permite aleatorizar os dados do browser para que se pareça com um utilizador real.
A configuração é rápida e fácil. Basta registar uma conta para receber a sua chave de API. Esta pode ser acedida a partir do seu painel de controlo e é utilizada para autenticar os pedidos que envia.
Como já configurou o seu ambiente Node.js, podemos utilizar o SDK correspondente. Execute o seguinte comando para o adicionar às dependências do seu projeto:
npm install webscrapingapiAgora só falta ajustar os selectores CSS anteriores à API. A poderosa caraterística das regras de extração torna possível analisar dados sem modificações significativas.
import webScrapingApiClient from 'webscrapingapi';
const client = new webScrapingApiClient("YOUR_API_KEY");
async function exampleUsage() {
const api_params = {
'render_js': 1,
'proxy_type': 'residential',
'timeout': 60000,
'extract_rules': JSON.stringify({
name: {
selector: 'h1[itemprop="name"]',
output: 'text',
},
rating: {
selector: 'span[class$="rating-number"]',
output: 'text',
},
reviews: {
selector: 'a[itemprop="ratingCount"]',
output: 'text',
},
price: {
selector: 'span[itemprop="price"]',
output: 'text',
},
images: {
selector: 'div[data-testid="media-thumbnail"] > img',
output: '@src',
all: '1'
},
details: {
selector: 'div.dangerous-html',
output: 'text',
all: '1'
}
})
}
const URL = "https://www.walmart.com/ip/Keter-Adirondack-Chair-Resin-Outdoor-Furniture-Teal/673656371"
const response = await client.get(URL, api_params)
if (response.success) {
console.log(response.response.data)
} else {
console.log(response.error.response.data)
}
}
exampleUsage();Conclusão
Este artigo apresentou-lhe uma visão geral sobre como extrair dados da Web do Walmart utilizando TypeScript em conjunto com o Puppeteer. Abordámos o processo de configuração do ambiente necessário, a identificação e a extração dos dados, e fornecemos trechos de código e exemplos para o ajudar a orientar-se ao longo do processo.
As vantagens de extrair dados do Walmart incluem a obtenção de informações valiosas sobre o comportamento do consumidor, as tendências do mercado, o acompanhamento de preços e muito mais.
Além disso, optar por um serviço profissional de scraping pode ser uma solução mais eficiente, uma vez que garante que o processo seja totalmente automatizado e lida com as possíveis técnicas de deteção de bots que possam surgir.
Ao tirar partido do poder dos dados do Walmart, pode impulsionar o seu negócio para o sucesso e manter-se à frente da concorrência. Lembre-se de respeitar sempre os termos de serviço do site e de não fazer scraping de forma demasiado agressiva, para evitar ser bloqueado.
