تخيل إنشاء منصة للتجارة الإلكترونية حيث يمكننا بسهولة جلب بيانات المنتج في الوقت الفعلي من المتاجر الكبرى مثل eBay وAmazon وFlipkart. بالتأكيد، هناك Shopify وخدمات مماثلة، ولكن لنكن صادقين - قد يكون شراء اشتراك لمشروع ما أمرًا مرهقًا بعض الشيء. لذلك، فكرت، لماذا لا نتخلص من هذه المواقع ونخزن المنتجات مباشرة في قاعدة البيانات الخاصة بنا؟ ستكون طريقة فعالة وفعالة من حيث التكلفة للحصول على منتجات لمشاريع التجارة الإلكترونية لدينا.

ما هو تجريف الويب؟

يتضمن تجريف الويب استخراج البيانات من مواقع الويب عن طريق تحليل HTML لصفحات الويب لقراءة المحتوى وجمعه. غالبًا ما يتضمن ذلك أتمتة المتصفح أو إرسال طلبات HTTP إلى الموقع، ثم تحليل بنية HTML لاسترداد أجزاء محددة من المعلومات مثل النصوص أو الروابط أو الصور. محرك الدمى هي إحدى المكتبات المستخدمة لاستخراج مواقع الويب.

ما هو محرك الدمى؟

Puppeteer هي مكتبة Node.js. وهي توفر واجهة برمجة تطبيقات عالية المستوى للتحكم في متصفحات Chrome أو Chromium مقطوعة الرأس. يعد Headless Chrome إصدارًا من chrome يقوم بتشغيل كل شيء بدون واجهة مستخدم (مثالي لتشغيل الأشياء في الخلفية).

يمكننا أتمتة المهام المختلفة باستخدام محرك الدمى، مثل:

• تجريد الويب: يتضمن استخراج المحتوى من مواقع الويب التفاعل مع HTML وJavaScript الخاصين بالصفحة. نقوم عادةً باسترداد المحتوى من خلال استهداف محددات CSS.
• إنشاء PDF: يعد تحويل صفحات الويب إلى ملفات PDF برمجيًا أمرًا مثاليًا عندما تريد إنشاء ملف PDF مباشرةً من صفحة ويب، بدلاً من التقاط لقطة شاشة ثم تحويل لقطة الشاشة إلى ملف PDF. (ملاحظة: نعتذر إذا كان لديك بالفعل حلول بديلة لهذا).
• الاختبار الآلي: إجراء الاختبارات على صفحات الويب من خلال محاكاة إجراءات المستخدم مثل النقر على الأزرار، وملء النماذج، والتقاط لقطات الشاشة. وهذا يلغي العملية الشاقة المتمثلة في مراجعة النماذج الطويلة يدويًا للتأكد من أن كل شيء في مكانه الصحيح.

كيف تبدأ مع العرائس؟

أولاً علينا تثبيت المكتبة، والمضي قدمًا والقيام بذلك.
باستخدام npm:

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

استخدام الغزل:

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

استخدام pnpm:

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

؟ مثال لتوضيح استخدام محرك الدمى

فيما يلي مثال لكيفية استخلاص موقع ويب. (ملاحظة: لقد استخدمت هذا الرمز لاسترداد المنتجات من موقع Myntra الإلكتروني لمشروع التجارة الإلكترونية الخاص بي.)

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 sport wear', { 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;

؟توضيح:

• في هذا الكود، نستخدم محرك الدمى لاستخراج بيانات المنتج من موقع الويب. بعد استخراج التفاصيل، نقوم بإنشاء مخطط (CategorySchema) لتنظيم هذه البيانات وحفظها في قاعدة البيانات الخاصة بنا. تعتبر هذه الخطوة مفيدة بشكل خاص إذا أردنا دمج المنتجات المسروقة في متجر التجارة الإلكترونية الخاص بنا. إذا لم يكن تخزين البيانات في قاعدة بيانات مطلوبًا، فيمكنك حذف التعليمات البرمجية المتعلقة بالمخطط.
• قبل استخراج المحتوى، من المهم فهم بنية HTML للصفحة وتحديد محددات CSS التي تحتوي على المحتوى الذي تريد استخراجه.
• في حالتي، استخدمت محددات CSS ذات الصلة المحددة على موقع Myntra الإلكتروني لاستخراج المحتوى الذي كنت أستهدفه.