- vừa được xem lúc

Mẹo hữu ích dành cho dân chuyên Scraping Web

0 0 1

Người đăng: Thái Thịnh

Theo Viblo Asia

Bạn là người chuyên đi cào dữ liệu web (Web Scraping) hay là người mới muốn tập tành trong lĩnh vực này, vừa để phục vụ sở thích, vừa để kiếm tiền, kiếm traffic website hay bất kỳ điều gì khác. Bài viết này sẽ hỗ trợ phần nào để giúp các bạn thuận lợi hơn cho các kế hoạch của mình.

Web Scraping là gì?

Web scraping là việc trích xuất dữ liệu từ các trang web bằng cách phân tích cú pháp HTML của trang web đó nhằm phục vụ mục đích thu thập nội dung. Nó thường liên quan đến việc tự động hóa trình duyệt hoặc gửi yêu cầu HTTP đến trang web, sau đó phân tích cấu trúc HTML để lấy các thông tin cụ thể như văn bản, liên kết hoặc hình ảnh. Trong bài viết này, tôi sẽ hướng dẫn các bạn cách để sử dụng công cụ Puppeteer, là một thư viện được sử dụng để chuyên scraping các trang web.

Puppeteer là gì?

Puppeteer là một thư viện Node.js, dùng để cung cấp API cấp cao nhằm kiểm soát trình duyệt Chrome hoặc Chromium mà không cần giao diện người dùng (Headless). Chrome không cần giao diện người dùng (Headless Chrome) là phiên bản Chrome có thể chạy mọi thứ mà không cần UI (vô cùng hoàn hảo để chạy mọi thứ ở chế độ nền).

Chúng ta có thể tự động hóa nhiều tác vụ khác nhau bằng cách sử dụng Puppeteer, chẳng hạn như:

  • Web Scraping: Trích xuất nội dung từ các trang web liên quan đến việc tương tác với HTML và JavaScript của trang. Tôi thường lấy nội dung bằng cách nhắm mục tiêu vào CSS Selectors.
  • Tạo PDF : Chuyển đổi các trang web thành PDF là giải pháp lý tưởng khi bạn muốn tạo trực tiếp PDF từ một trang web, thay vì chụp ảnh màn hình rồi chuyển đổi ảnh chụp màn hình thành PDF.
  • Kiểm tra tự động: Chạy thử nghiệm trên các trang web bằng cách mô phỏng các hành động của người dùng như nhấp vào nút, điền vào biểu mẫu và chụp ảnh màn hình. Điều này loại bỏ quá trình tẻ nhạt khi phải tự tay duyệt qua các biểu mẫu dài dằng dặc chỉ để đảm bảo mọi thứ đều ổn thỏa.

Làm thế nào để bắt đầu Scraping web với Puppeteer?

Đây chính là phần mà các bạn mong chờ, đầu tiên chúng ta phải cài đặt thư viện, thực hiện theo bước sau. 1. Sử dụng npm

npm i puppeteer # Downloads compatible Chrome during installation.
npm i puppeteer-core # Alternatively, install as a library, without downloading Chrome.

2. Sử dụng yarn

yarn add puppeteer // Downloads compatible Chrome during installation.
yarn add puppeteer-core // Alternatively, install as a library, without downloading Chrome.

3. Sử dụng pnpm

pnpm add puppeteer # Downloads compatible Chrome during installation.
pnpm add puppeteer-core # Alternatively, install as a library, without downloading Chrome.

Ví dụ về cách mà Puppeteer thu thập dữ liệu trang web

Sau đây là ví dụ về cách thu thập dữ liệu từ một trang web. Tôi đã sử dụng đoạn mã này để lấy sản phẩm từ trang web Myntra cho dự án thương mại điện tử của mình.

const puppeteer = require("puppeteer");
const CategorySchema = require("./models/Category"); // Define the scrape function as a named async function
const scrape = async () => { // Launch a new browser instance const browser = await puppeteer.launch({ headless: false }); // Open a new page const page = await browser.newPage(); // Navigate to the target URL and wait until the DOM is fully loaded await page.goto('https://www.myntra.com/mens-sport-wear?rawQuery=mens%20sport%20wear', { waitUntil: 'domcontentloaded' }); // Wait for additional time to ensure all content is loaded await new Promise((resolve) => setTimeout(resolve, 25000)); // Extract product details from the page const items = await page.evaluate(() => { // Select all product elements const elements = document.querySelectorAll('.product-base'); const elementsArray = Array.from(elements); // Map each element to an object with the desired properties const results = elementsArray.map((element) => { const image = element.querySelector(".product-imageSliderContainer img")?.getAttribute("src"); return { image: image ?? null, brand: element.querySelector(".product-brand")?.textContent, title: element.querySelector(".product-product")?.textContent, discountPrice: element.querySelector(".product-price .product-discountedPrice")?.textContent, actualPrice: element.querySelector(".product-price .product-strike")?.textContent, discountPercentage: element.querySelector(".product-price .product-discountPercentage")?.textContent?.split(' ')[0]?.slice(1, -1), total: 20, // Placeholder value, adjust as needed available: 10, // Placeholder value, adjust as needed ratings: Math.round((Math.random() * 5) * 10) / 10 // Random rating for demonstration }; }); return results; // Return the list of product details }); // Close the browser await browser.close(); // Prepare the data for saving const data = { category: "mens-sport-wear", subcategory: "Mens", list: items }; // Create a new Category document and save it to the database // Since we want to store product information in our e-commerce store, we use a schema and save it to the database. // If you don't need to save the data, you can omit this step. const category = new CategorySchema(data); console.log(category); await category.save(); // Return the scraped items return items;
}; // Export the scrape function as the default export
module.exports = scrape;

Giải thích về đoạn mã trên:

Trong đoạn mã này, tôi sử dụng Puppeteer để thu thập dữ liệu sản phẩm từ một trang web. Sau khi trích xuất thông tin chi tiết, tôi tạo ra một lược đồ (CategorySchema) để cấu trúc và lưu dữ liệu này vào cơ sở dữ liệu của tôi. Bước này đặc biệt hữu ích nếu bạn muốn tích hợp các sản phẩm đã thu thập vào cửa hàng thương mại điện tử của mình. Nếu không cần lưu trữ dữ liệu trong cơ sở dữ liệu, bạn có thể bỏ qua các đoạn mã schema liên quan.

Trước khi trích xuất, điều quan trọng là phải hiểu cấu trúc HTML của trang web và xác định bộ CSS Selectors nào chứa nội dung mà bạn muốn trích xuất.

Trong trường hợp của tôi, tôi đã sử dụng bộ CSS Selectors có liên quan được xác định trên trang web Myntra để trích xuất nội dung tôi đang nhắm mục tiêu.

Như vậy có lẽ đã giúp bạn hiểu được cách mà Puppeteer hoạt động rồi nhỉ. Hy vọng giải pháp này sẽ thích hợp cho những bạn nào đã và đang trên con đường phát triển website.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Một số quy tắc và name class phổ biến cho Front-end Dev

Trong CSS, các thủ tục setting đóng vai trò to lớn, nhưng bên cạnh đó, cách đặt tên theo các từ đơn sao cho phù hợp cũng quan trọng không kém . Đặt tên rất khó, nhưng cũng rất quan trọng .

0 0 88

- vừa được xem lúc

2021, chúng ta cần tối ưu hóa việc tải hình ảnh trên web như nào?

Rất chào các bạn,. Như các bạn đã biết, trong kỉ nguyên công nghệ, song song với sự sinh ra dày đặc của các trang web mới cũng là sự biến mất của những trang web "lạc hậu" hay hoạt động kém hiệu quả.

0 0 52

- vừa được xem lúc

Tài nguyên nghiên cứu sâu Html

1. Articles and standards. . HTML 5.

0 0 193

- vừa được xem lúc

Tìm hiểu về Event.preventDefault(), Event.stopPropagation() và Event.stopImmediatePropagation()

Chúng ta thương thấy 3 method này và có thể dẫn dến bối rối và nhầm lẫn giữa chúng:. . Event.preventDefault().

0 0 45

- vừa được xem lúc

Vanilla JS Project: Tính tuổi

1. Yêu cầu.

0 0 63

- vừa được xem lúc

Thủ thuật nhỏ để căn chỉnh image với object-fit

Chào các bạn,. Có lẽ trong hành trình code của các bạn thì không ít lần gặp vấn đề méo ảnh do fix cứng cả width, height của ảnh nhỉ? Hoặc kể cả khi bạn set value cho 1 thuộc tính weigth hoặc height còn thuộc tính còn lại để auto thì nhiều lúc ảnh cũng không được hiển thị toàn vẹn cho lắm.

0 0 43