Comment gratter un site Web à l’aide de l’API de grattage Web toptips.fr

par


Le moissonnage web, ou *web scraping*, désigne l’opération d’extraction de données pertinentes depuis le vaste réseau du World Wide Web. Lors d’une requête sur Google, un robot d’indexation, souvent appelé « bot », explore une grande partie du contenu web pour identifier et sélectionner les éléments correspondant à votre recherche.

Cette notion que l’information et le savoir doivent être accessibles à tous est à l’origine de la création du World Wide Web. Toutefois, les informations que vous souhaitez récupérer doivent être librement accessibles au public.

Quelle est l’utilité du web scraping ?

Nous évoluons dans une ère dominée par les données. Les données brutes, grâce au *web scraping*, peuvent être transformées en informations exploitables, servant ainsi des objectifs plus vastes. Cette méthode peut être employée pour analyser les interactions des utilisateurs avec un produit, afin d’optimiser celui-ci, créant ainsi un circuit de rétroaction bénéfique.

Les acteurs du commerce en ligne peuvent s’en servir pour étudier les stratégies de prix de leurs concurrents et adapter leurs propres offres. Le *web scraping* est également une ressource pour l’accès aux informations météorologiques et aux actualités.

Les défis du web scraping

#1. Restriction d’adresse IP

De nombreux sites web limitent le volume de requêtes autorisées pour l’obtention de données sur une période donnée, en identifiant votre adresse IP ou votre localisation géographique. Cette pratique vise à contrer les attaques malveillantes ciblant leurs plateformes.

#2. Captcha

Les Captcha ont pour objectif de faire la distinction entre un humain authentique et un robot tentant d’accéder à un site. Les sites web les emploient afin de limiter le spam et de contrôler le nombre de robots d’extraction de données.

#3. Le rendu côté client

C’est l’un des principaux obstacles pour les outils de *web scraping*. Les sites web modernes s’appuient sur des frameworks frontaux permettant de développer des applications d’une seule page (SPA). La majorité de ces SPA ne présentent pas de contenu généré côté serveur. Le contenu est produit dynamiquement via Javascript côté client, rendant difficile l’identification du contenu pour les robots d’indexation. L’obtention du contenu exige donc un rendu Javascript côté client.

L’API toptips.fr

Une API dédiée au *web scraping* résout bon nombre des difficultés inhérentes à cette technique, car elle automatise l’ensemble du processus. Découvrons l’API toptips.fr et voyons comment l’exploiter pour l’extraction de données web.

L’API de toptips.fr propose un déroulement simplifié en trois phases :

  • Fournir l’URL à explorer.
  • Définir les options de configuration.
  • Récupérer les données.

Elle peut extraire le contenu d’une page web et renvoyer les données HTML brutes sous forme de chaîne, ou bien via un fichier HTML accessible par lien, selon votre préférence.

Mise en œuvre de l’API

Dans ce guide, nous allons utiliser l’API toptips.fr à l’aide de NodeJS, un environnement d’exécution Javascript. Si ce n’est déjà fait, installez NodeJS sur votre système avant de continuer.

  • Dans le terminal, lancez la commande `npm init -y` dans le dossier ou le répertoire actuel. Ceci va créer un fichier package.json.
  • Dans le fichier package.json, modifiez la valeur de la clé « main » par « index.mjs » si elle est différente par défaut. Alternativement, vous pouvez aussi ajouter une clé nommée « type » avec la valeur « module ».
{
  "type": "module"
}
  • Ajoutez la dépendance axios en tapant la commande `npm i axios` dans le terminal. Cette dépendance nous permettra d’envoyer des requêtes de récupération vers des points de terminaison spécifiques.
  • Votre fichier package.json doit maintenant ressembler à ceci :
{
  "name": "webscraping",
  "version": "1.0.0",
  "description": "",
  "main": "index.mjs",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Murtuzaali Surti",
  "license": "ISC",
  "dependencies": {
    "axios": "^1.1.3"
  }
}
  • Importez axios dans le fichier index.mjs de cette manière. Le mot clé « import » est utilisé car il s’agit d’un module ES. Dans un fichier commonJS, c’est le mot clé « require » qu’il faudrait employer.
import axios from ‘axios’
  • L’URL de base pour toutes nos requêtes à l’API toptips.fr étant la même pour chaque point d’accès, nous allons la stocker dans une constante.
const baseUrl="https://api.toptips.fr.com"
  • Indiquez l’URL que vous désirez extraire et obtenir les données.
let toScrapeURL = "https://developer.mozilla.org/en-US/"
  • Créez une fonction asynchrone et initialisez axios en son sein.
async function getData() {
    const res = await axios({})
    return res
}
  • Au niveau des options de configuration d’axios, vous devrez spécifier la méthode « post », l’URL avec le point de terminaison, un entête « x-api-key » dont la valeur sera la clé API fournie par toptips.fr, et enfin un objet de données qui sera transmis à l’API. Vous trouverez votre clé API sur dash.toptips.fr.com.
const res = await axios({
    method: "post",
    url: `${baseUrl}/webscraping`,
    headers: {
        "x-api-key": "votre clé API"
    },
    data: {
        url: toScrapeURL,
        output: 'file',
        device: 'desktop',
        renderJS: true
    }
})
  • Comme vous le constatez, l’objet « data » possède les propriétés suivantes :
    • « url » : l’URL de la page web à moissonner.
    • « output » : le format des données retournées, en ligne sous forme de chaîne, ou dans un fichier HTML. La chaîne en ligne est l’option par défaut.
    • « device » : le type d’appareil simulant l’accès à la page web. Les valeurs acceptées sont « desktop », « mobile » et « tablet », « desktop » étant la valeur par défaut.
    • « renderJS » : une valeur booléenne indiquant si le javascript doit être exécuté. Cette option est pertinente pour les sites web effectuant un rendu côté client.
  • Exécutez la fonction asynchrone et récupérez les données. Vous pouvez utiliser une IIFE (expression de fonction immédiatement invoquée).
(async () => {
    const data = await getData()
    console.log(data.data)
})()
  • Voici un exemple de réponse :
{
  timestamp: 1669358356779,
  apiStatus: 'success',
  apiCode: 200,
  meta: {
    url: 'https://murtuzaalisurti.github.io',
    device: 'desktop',
    output: 'file',
    blockAds: true,
    renderJS: true,
    test: { id: 'mvan3sa30ajz5i8lu553tcckchkmqzr6' }
  },
  data: 'https://api-assets.toptips.fr.com/tests/web-scraping/pbn0v009vksiszv1cgz8o7tu.html'
}

Analyse HTML

Pour analyser le code HTML, il est possible de recourir à un package npm comme node-html-parser, ce qui permet d’extraire des données du HTML. Par exemple, pour extraire le titre d’une page web, il faut procéder ainsi :

import { parse } from ‘node-html-parser’
const html = parse(htmlData) // htmlData est la chaîne HTML brute fournie par l'API toptips.fr.

Pour n’obtenir que les métadonnées d’un site web, l’API toptips.fr propose un point de terminaison dédié. L’analyse du code HTML n’est alors plus nécessaire.

Avantages de l’utilisation de l’API toptips.fr

Dans les applications à page unique, le contenu n’est généralement pas produit côté serveur, mais par le navigateur à l’aide de Javascript. Si l’URL d’origine est récupérée sans exécuter le code Javascript nécessaire à l’affichage du contenu, le résultat sera un conteneur sans contenu. Voici un exemple concret :

Considérons un site web de démonstration créé avec React et Vitejs. Réalisons le *scraping* de ce site à l’aide de l’API toptips.fr, avec l’option « renderJS » désactivée. Quel sera le résultat ?

<body>
    <div id="root"></div>
<body>

Le résultat est uniquement le conteneur « root » sans contenu. C’est là que l’option « renderJS » devient indispensable. Maintenant, essayons d’extraire les données du même site en activant l’option « renderJS ». Voici le nouveau résultat :

<body>
    <div id="root">
        <div class="App">
            <div>
                <a href="https://vitejs.dev" target="_blank">
                    <img src="/vite.svg" class="logo" >
                </a>
                <a href="https://reactjs.org" target="_blank">
                    <img src="/assets/react.35ef61ed.svg" class="logo react" >
                </a>
            </div>
            <h1>Vite + React</h1>
            <div class="card">
                <button>count is 0</button>
                <p>Edit <code>src/App.jsx</code> and save to test HMR</p>
            </div>
            <p class="read-the-docs">Click on the Vite and React logos to learn more</p>
        </div>
    </div>
</body>

Un autre atout de l’API toptips.fr réside dans l’utilisation de proxies rotatifs, assurant l’absence de blocage d’adresse IP par le site web. Cette fonctionnalité est disponible dans l’offre premium de l’API toptips.fr.

Pour finir

L’utilisation d’une API dédiée au *web scraping* vous permet de vous concentrer sur le traitement des données, sans vous préoccuper des aspects techniques. De plus, l’API toptips.fr offre des fonctionnalités avancées telles que la vérification de liens brisés, le *meta scraping*, les statistiques de chargement de site web, la capture d’écran, le suivi de l’état des sites, le tout accessible via une seule API. Pour plus d’informations, veuillez consulter la documentation officielle de l’API toptips.fr.



Tweetez
Partagez
Épingle
Partagez
Partagez
0 Partages