Imaginez créer une plate-forme de commerce électronique sur laquelle nous pouvons facilement récupérer des données sur les produits en temps réel à partir de grands magasins comme eBay, Amazon et Flipkart. Bien sûr, il existe Shopify et des services similaires, mais soyons honnêtes : il peut sembler un peu fastidieux d'acheter un abonnement uniquement pour un projet. Alors, je me suis dit, pourquoi ne pas gratter ces sites et stocker les produits directement dans notre base de données ? Ce serait un moyen efficace et rentable d'obtenir des produits pour nos projets de commerce électronique.

Qu’est-ce que le Web Scraping ?

Le Web scraping consiste à extraire des données de sites Web en analysant le code HTML des pages Web pour lire et collecter du contenu. Cela implique souvent d'automatiser un navigateur ou d'envoyer des requêtes HTTP au site, puis d'analyser la structure HTML pour récupérer des informations spécifiques telles que du texte, des liens ou des images. Puppeteer est une bibliothèque utilisée pour gratter les sites Web.

?Qu'est-ce que le Marionnettiste ?

Puppeteer est une bibliothèque Node.js. Elle fournit une API de haut niveau pour contrôler les navigateurs Chrome ou Chromium sans tête. Headless Chrome est une version de Chrome qui exécute tout sans interface utilisateur (parfait pour exécuter des choses en arrière-plan).

Nous pouvons automatiser diverses tâches à l'aide du marionnettiste, telles que :

• Web Scraping : L'extraction de contenu de sites Web implique d'interagir avec le code HTML et JavaScript de la page. Nous récupérons généralement le contenu en ciblant les sélecteurs CSS.
• Génération PDF : la conversion de pages Web en PDF par programmation est idéale lorsque vous souhaitez générer directement un PDF à partir d'une page Web, plutôt que de prendre une capture d'écran puis de convertir la capture d'écran en PDF. (P.S. Toutes mes excuses si vous avez déjà des solutions de contournement pour cela).
• Tests automatisés : Exécution de tests sur des pages Web en simulant les actions des utilisateurs comme cliquer sur des boutons, remplir des formulaires et prendre des captures d'écran. Cela élimine le processus fastidieux consistant à parcourir manuellement de longs formulaires pour garantir que tout est en place.

?Comment débuter avec le marionnette ?

Tout d'abord, nous devons installer la bibliothèque, allez-y et faites-le.
Utilisation de npm :

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

Utiliser du fil :

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

Utilisation de pnpm :

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

? Exemple pour démontrer l'utilisation du marionnettiste

Voici un exemple de comment gratter un site Web. (P.S. J'ai utilisé ce code pour récupérer des produits du site Web Myntra pour mon projet de commerce électronique.)

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;

?Explication:

• Dans ce code, nous utilisons Puppeteer pour extraire les données produit d'un site Web. Après avoir extrait les détails, nous créons un schéma (CategorySchema) pour structurer et enregistrer ces données dans notre base de données. Cette étape est particulièrement utile si nous souhaitons intégrer les produits scrapés dans notre boutique e-commerce. Si le stockage des données dans une base de données n'est pas requis, vous pouvez omettre le code lié au schéma.
• Avant le scraping, il est important de comprendre la structure HTML de la page et d'identifier quels sélecteurs CSS contiennent le contenu que vous souhaitez extraire.
• Dans mon cas, j'ai utilisé les sélecteurs CSS pertinents identifiés sur le site Myntra pour extraire le contenu que je ciblais.