Scraping Amazon duke përdorur Puppeteer dhe Browserless

Scraping Amazon duke përdorur Puppeteer dhe Browserless

Në këtë artikull, ne do të automatizojmë plotësisht procesin e kërkimit të një produkti në Amazon. Në mënyrë të veçantë, ne do të kërkojmë për karrige zyre dhe do të gërvishtim faqen e rezultateve të Amazon për emrin dhe çmimin e produktit. Më poshtë është një pamje vizuale e asaj që do të synojmë në faqe.

Këtu është çelësi, gjithçka që do të përdorim është një skenar dhe nën 50 rreshta kodi. Si do ta bëjmë këtë ju mund të pyesni? Magjia e JavaScript. Për më tepër, një bibliotekë nyje e quajtur Puppeteer dhe një shërbim në internet i quajtur Browserless. Nëse nuk dini shumë për këto mjete, unë do t'ju rekomandoja t'i kontrolloni ato më tej. Ato ofrojnë shumë aftësi të rregullta! Ne do të shqyrtojmë disa prej tyre në këtë artikull.

Për informacione të mëtejshme mbi Puppeteer, unë do të rekomandoja shumë të shikoni "Foljen e Eric Bidelman në konferencën e Google I/O" në 2018. Gjithashtu, por nëse jeni të uritur për më shumë Browserless pasi të keni lexuar këtë artikull, kontrolloni "Webinar i Joel Griffith rreth mënyrave interesante për të optimizuar scraping në internet». Joel është CEO i Browserless dhe ofron këshilla dhe truke të shkëlqyera për t'u përdorur në mjediset tuaja pa Browser dhe Puppeteer.

Pse Kukulla?

Më pas, le të shpjegojmë shumë shpejt pse po përdorim Puppeteer për të përmbushur detyrën tonë për të automatizuar një kërkim në Amazon. Së pari, Puppeteer ofron një API të shkëlqyer të nivelit të lartë për të kontrolluar Chrome (si pa kokë ashtu edhe pa kokë). Puppeteer mirëmbahet nga ekipi i Chrome DevTools. Këta inxhinierë e dinë se çfarë po bëjnë. Së fundi, shumica e gjërave që mund të bëni manualisht në shfletues mund të realizohen duke përdorur Puppeteer. Kjo do të na lejojë të manipulojmë me lehtësi skriptin tonë për të kryer veprimet që duam në shfletues.

Konfigurimi fillestar

Në rregull, le të shkojmë tek ajo! Ne do të fillojmë me konfigurimin fillestar. Për fat të mirë për ne, nuk ka shumë varësi që duhet të instalojmë. Ka vetëm një… Kukullar.

npm i puppeteer

Pasi të keni ekzekutuar atë komandë, jeni gati të shkoni! 👍

Pa shfletues

Teknikisht jeni gati për të filluar kodimin, por ka një mjet tjetër që dua të përdor së bashku me Puppeteer. Ky mjet është një shërbim ueb i quajtur pa shfletues. Pse do ta përdor këtë mjet që po pyesni? Le të hyjmë në atë.

Skripti që do të kodojmë është një nga shumë gjëra që mund të bëhen me Puppeteer dhe Chrome pa kokë. Le të themi se dëshironi ta ekzekutoni këtë skenar në një nga aplikacionet tuaja të prodhimit, por nuk dëshironi të shtoni Puppeteer si një varësi shtesë. Cfare mund te besh? Ky është një skenar ku Browserless vjen në shpëtim. Me Browserless nuk ka nevojë të instaloni paketa ose varësi shtesë, dhe është në përputhje me Puppeteer. E tëra çfarë ju duhet të bëni është të lidhni dhe luani (Ne do të marrim më shumë në detajet e konfigurimit të Browserless më poshtë). Kjo heq një ngarkesë të madhe nga aplikacioni juaj. Mund të testoni dhe ekzekutoni skriptet e Puppeteer në mjediset tuaja të zhvilluesit dhe ndërkohë të ekzekutoni Browserless në mjediset tuaja të prodhimit pa pasur nevojë të shqetësoheni për bagazhin shtesë. Flisni për një rritje të performancës!

Një zonë tjetër ku shkëlqen pa shfletues është në mjediset e zhvillimit të largët (p.sh. repl.it, gitpod, codepen, hapësira kodesh, etj.). Meqenëse nuk ka nevojë të instaloni ndonjë softuer, mund të lidhni lehtësisht me API-në pa shfletues dhe të ekzekutoni skriptet tuaja Puppeteer në të gjitha mjediset tuaja të largëta.

Përpara se të arrijmë te skripti aktual, le të shohim se si të konfigurojmë shpejt pa shfletues.

Për fillestarët, do t'ju duhet të krijoni një llogari. Pasi të konfiguroni llogarinë tuaj, do të drejtoheni te pulti juaj pa shfletues.

Këtu mund të gjeni grafikun tuaj të përdorimit të sesionit, bilancin e parapaguar, çelësin API dhe të gjitha të mirat e tjera të llogarisë.

Mbajeni në dorë çelësin tuaj API pasi do ta përdorim pasi të fillojmë të shkruajmë skriptin tonë. Për më tepër, ne jemi gati të fillojmë kodimin!

Kodi

Ok tani për pjesën emocionuese! Më pëlqen të tregoj produktin përfundimtar në fillim dhe më pas të shpërndaj secilën pjesë nga lart poshtë. Këtu është skenari ynë:

const puppeteer = require("puppeteer");
const fs = require("fs");
const scrape = async () => {
  const browser = await puppeteer.connect({
    browserWSEndpoint:
      "wss://chrome.browserless.io?token=[ADD BROWSERLESS API TOKEN HERE]",
  });
  const page = await browser.newPage();
  await page.goto("https://www.amazon.com");
  await page.type("#twotabsearchtextbox", "office chair");
  await page.click("#nav-search-submit-button");
  await page.waitForSelector(".s-pagination-next");
  // Go to next results page
  await page.click(".s-pagination-next");
  await page.waitForSelector(".s-pagination-next");
  // Gather product title
  const title = await page.$$eval("h2 span.a-color-base", (nodes) =>
    nodes.map((n) => n.innerText)
  );
  // Gather price
  const price = await page.$$eval(
    "[data-component-type='s-search-result'] span.a-price[data-a-color='base'] span.a-offscreen",
    (nodes) => nodes.map((n) => n.innerText)
  );
  // Consolidate product search data
  const amazonSearchArray = title.slice(0, 5).map((value, index) => {
    return {
      title: title[index],
      price: price[index],
    };
  });
  const jsonData = JSON.stringify(amazonSearchArray, null, 2);
  fs.writeFileSync("amazonSearchResults.json", jsonData);
  await browser.close();
};
scrape();

Okie doke, le të zhytemi në këtë. 2 rreshtat e parë po tërheqin modulet JavaScript. Ne do të duam të tërheqim Puppeteer për arsye të dukshme. Moduli i dytë është ajo që ne do të përdorim për të eksportuar të dhënat tona të gërvishtura në një skedar JSON.

const puppeteer = require("puppeteer");
const fs = require("fs");

Seksioni tjetër është fillimi i funksionit tonë aktual scrape(). Në fillim të këtij funksioni me shigjeta, ne lidhemi me API-në pa shfletues duke përdorur tastin API që keni marrë nga paneli i kontrollit pa shfletues.

const browser = await puppeteer.connect({
    browserWSEndpoint:
      "wss://chrome.browserless.io?token=[ADD BROWSERLESS API TOKEN HERE]",
  });

Përndryshe, mund ta zëvendësoni këtë pjesë të kodit me puppeteer.launch si kjo:

const browser = await puppeteer.launch({ headless: false });

Kjo është mirë për ta bërë në mjedisin tuaj të devijuesit për të testuar skriptin. Kjo do të kursejë burimet tuaja pa shfletues dhe do të ndihmojë në korrigjimin e gabimeve nëse ka ndonjë problem me kodin tuaj. Një gjë që doja të theksoja ishte vetia {headless: false} që po transmetohet. Kjo i thotë Puppeteer të hapë Chrome në ekran në mënyrë që të mund të shihni vizualisht se si kodi po ndërvepron me faqen e internetit. Mjaft e lezetshme për t'u parë dhe tepër e dobishme kur krijoni skripta!

Në seksionin tjetër, ne krijojmë një faqe të re të shfletuesit, lundrojmë në faqen e internetit të Amazon, gjejmë shiritin e kërkimit, shkruajmë çdo gjë që duam të kërkojmë (në këtë rast jemi duke kërkuar për një karrige zyre), klikojmë butonin e kërkimit dhe në fund duke pritur që faqja të ngarkohet. Më konkretisht, në pritje të ngarkimit të faqes në fund të faqes. Do ta shihni pse në një minutë.

const page = await browser.newPage();
  await page.goto("https://www.amazon.com");
  await page.type("#twotabsearchtextbox", "office chair");
  await page.click("#nav-search-submit-button");
  await page.waitForSelector(".s-pagination-next");

Ky seksion i mëposhtëm është një lloj bonusi. Po sikur të dëshironit të lundroni disa faqe thellë në rezultatet e kërkimit? Kjo është ajo që ne arrijmë në bllokun tjetër të kodit.

E mbani mend se si prisnim që të ngarkohej faqet në pjesën e fundit të kodit? Në këtë seksion, ne klikojmë në butonin "faqja tjetër" që prisnim. Kjo do të navigojë shfletuesin tonë në faqen tjetër të karrigeve të zyrës.

await page.click(".s-pagination-next");
  await page.waitForSelector(".s-pagination-next");

Në rregull, tani për të mbledhur të dhënat që duam nga faqja! Pjesa e mëposhtme e kodit është ajo që gjen titullin e produktit dhe çmimin e karriges së zyrës. Unë dua të shtoj një mohim të vogël këtu. Kur inspektoni faqen e kërkimit të Amazon, do të vini re se kodi i tyre i përpiluar është pak i ngatërruar. Nëse këto atribute specifike nuk po funksionojnë për ju, sigurohuni që të inspektoni vetë faqen e rezultateve të kërkimit dhe të gjeni atributet HTML që funksionojnë për skenarin tuaj. Kjo është ajo ku përdorimi i asaj vetie puppeteer.launch({ headless: false }) mund të ndihmojë.

// Gather product title
  const title = await page.$$eval("h2 span.a-color-base", (nodes) =>
    nodes.map((n) => n.innerText)
  );
  // Gather price
  const price = await page.$$eval(
    "[data-component-type='s-search-result'] span.a-price[data-a-color='base'] span.a-offscreen",
    (nodes) => nodes.map((n) => n.innerText)
  );

Ok, kështu që pasi të kemi marrë titujt dhe çmimet e produkteve tona, është koha për të konsoliduar të dhënat tona. Për këtë unë do të marr vetëm 5 rezultatet e para që kam mbledhur.

// Consolidate product search data
  const amazonSearchArray = title.slice(0, 5).map((value, index) => {
    return {
      title: title[index],
      price: price[index],
    };
  });

Së fundi, ne duam të shfaqim ose ruajmë të dhënat tona. Nëse thjesht dëshironi të shihni se çfarë rezultatesh kthehen, mund të console.log(amazonSearchArray);. Por le të themi se dëshironi t'i eksportoni këto të dhëna në një skedar JSON dhe ndoshta përdorni atë JSON për të bërë një grafik të rezultateve. Për të ruajtur të dhënat tuaja në një skedar JSON, do të përdorni kodin në shembullin tonë.

const jsonData = JSON.stringify(amazonSearchArray, null, 2);
  fs.writeFileSync("amazonSearchResults.json", jsonData);

I shtova parametra shtesë metodës stringify për qëllime formatimi. Parametri i fundit është një parametër space.

Dhe për të përfunduar skenarin tonë, ne mbyllim shfletuesin.

await browser.close();

Më poshtë është një shfaqje vizuale e asaj që skenari ynë po bën në shfletues.

Siç mund ta shihni, Puppeteer është një API mjaft i lezetshëm. Çiftoje atë me Browserless dhe do të kesh një mjet automatizimi super të shkallëzueshëm, scraping në internet. A ka ndezur ky artikull një ide apo mendim? Më njoftoni në komente ose në Twitter në @tylerreicks. Gëzuar kodimin ❤️!