Comment gratter un site web en utilisant l'API de grattage web de Geekflare

Le “web scraping” est un processus qui permet d’extraire des informations utiles du World Wide Web. Lors d’une recherche sur Google, un robot (bot), c’est-à-dire le crawler, parcourt la quasi-totalité du contenu du web et sélectionne ce qui est pertinent pour vous.

L’idée que l’information ou la connaissance devrait être accessible à tous a conduit à la création du World Wide Web. Toutefois, les données que vous recherchez doivent être autorisées pour un usage public.

Quelle est l’utilité du web scraping ?

Nous vivons à l’ère des données. Les données brutes peuvent être converties en informations utiles qui peuvent être utilisées à des fins plus larges avec l’aide du web scraping. Il peut être utilisé pour analyser et étudier les utilisateurs d’un produit afin d’améliorer ce dernier, en d’autres termes, pour créer une boucle de rétroaction.

Les entreprises de commerce électronique peuvent l’utiliser pour étudier les stratégies de prix de leurs concurrents et élaborer en conséquence les leurs. Le web scraping peut également être utilisé pour les bulletins météorologiques et les bulletins d’information.

Défis

#1. Restriction de l’IP

Plusieurs sites web limitent le nombre de requêtes que vous pouvez effectuer pour obtenir les données du site dans un certain intervalle de temps en détectant votre adresse IP ou votre géolocalisation. Ils agissent ainsi pour prévenir les attaques malveillantes sur leur site web.

#2. Captcha

Les captchas permettent de faire la distinction entre un véritable humain et un robot qui tente d’accéder au site web. Les sites web l’utilisent pour empêcher le spam sur le site web ainsi que pour contrôler le nombre de “scrapers” sur le site web.

#3. Rendu côté client

Il s’agit de l’un des plus grands obstacles pour les web scrapers. Les sites web modernes utilisent des frameworks frontaux capables de créer des applications à page unique. La plupart de ces applications n’ont pas de contenu rendu par le serveur.

Au lieu de cela, elles génèrent le contenu en fonction des besoins à l’aide de javascript côté client. Il est donc difficile pour les “scrapers” de savoir quel est le contenu d’une page web. Pour obtenir le contenu, vous devez générer du JavaScript côté client.

L’API Geekflare

Une API de web scraping résout la plupart des problèmes rencontrés lors de la réalisation de web scraping, car elle s’occupe de tout pour vous. Explorons l’API de Geekflare et voyons comment vous pouvez l’utiliser pour le web scraping.

L’API de Geekflare vous propose une procédure simple en trois étapes :

Fournissez une URL à récupérer
Fournissez quelques options de configuration
Obtenez les données

L’API peut scanner la page web pour vous et renvoyer les données HTML brutes sous la forme d’une chaîne ou d’un fichier HTML accessible via un lien, selon ce qui vous convient.

Utilisation de l’API

Dans ce tutoriel, vous apprendrez à utiliser l’API Geekflare à l’aide de NodeJS – un environnement d’exécution javascript. Installez NodeJS sur votre système si vous ne l’avez pas encore fait avant de continuer.

Dans un nouveau dossier, créez un fichier nommé index.mjs. La raison de l’extension mjs est que nous voulons que ce fichier soit considéré comme un module ES au lieu d’un fichier JS commun. Vérifiez la différence entre les modules ES et les fichiers JS communs.

Exécutez la commande npm init -y dans le terminal dans le dossier ou répertoire courant. Elle créera un fichier package.json pour vous.

Dans le fichier package.json, changez la valeur de la clé principale en index.mjs si elle est différente par défaut. Vous pouvez également ajouter un type de clé et fixer sa valeur à module.

{
  "type" : "module"
}

Ajoutez une dépendance nommée axios en exécutant la commande npm i axios dans le terminal. Cette dépendance nous aide à effectuer des requêtes de récupération vers des points d’extrémité spécifiques.

Votre package.json devrait ressembler à ceci :

{
  "name" : "webscraping",
  "version" : "1.0.0",
  "description" : "",
  "main" : "index.mjs",
  "scripts" : {
    "test" : "echo \"Error : no test specified\" && exit 1"
  },
  "author" : "Murtuzaali Surti",
  "licence" : "ISC",
  "dependencies" : {
    "axios" : "^1.1.3"
  }
}

Importez axios dans le fichier index.mjs comme ceci. Ici, le mot-clé import est utilisé parce qu’il s’agit d’un module ES. S’il s’agissait d’un fichier commonJS, le mot-clé require aurait été utilisé.

import axios from 'axios'

L’URL de base pour toutes nos requêtes à l’API Geekflare sera la même pour chaque point de terminaison. Vous pouvez donc la stocker dans une constante.

const baseUrl = 'https://api.geekflare.com/fr'

Spécifiez l’URL à partir de laquelle vous souhaitez récupérer les données.

let toScrapeURL = "https://developer.mozilla.org/en-US/"

Créez une fonction asynchrone et initialisez axios à l’intérieur de celle-ci.

async function getData() {
    const res = await axios({})
    return res
}

Dans les options de configuration d’axios, vous devez spécifier la méthode comme post, l’URL avec le point de terminaison, un en-tête connu sous le nom de x-api-key dont la valeur sera la clé API fournie par Geekflare et enfin, un objet de données qui sera envoyé à l’API Geekflare. Vous pouvez obtenir votre clé API en vous rendant sur dash.geekflare.com/fr.

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 pouvez le constater, l’objet data possède les propriétés suivantes :
- url: l’URL de la page web qui doit être scannée.
- output: le format dans lequel les données vous sont présentées, soit en ligne sous forme de chaîne, soit dans un fichier HTML. Inline string est la valeur par défaut.
- device: le type d’appareil sur lequel vous souhaitez que la page web soit ouverte. Il accepte trois valeurs : “desktop”, “mobile” et “tablet”, la valeur par défaut étant “desktop”.
- renderJS: une valeur booléenne pour spécifier si vous voulez rendre le javascript ou non. Cette option est utile lorsque vous avez affaire à un rendu côté client.

Si vous voulez une liste complète des options de configuration, lisez la documentation officielle de l’API Geekflare.

Appelez la fonction asynchrone et récupérez les données. Vous pouvez utiliser une IIFE (Immediately Invoked Function Expression).

(async () => {
    const data = await getData()
    console.log(data.data)
})()

La réponse ressemblera à quelque chose comme ceci :

{
  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.geekflare.com/fr/tests/web-scraping/pbn0v009vksiszv1cgz8o7tu.html'
}

Analyse du code HTML

Pour analyser le code HTML, vous pouvez utiliser un paquetage npm appelé node-html-parser et extraire des données du code HTML. Par exemple, si vous souhaitez extraire le titre d’une page web, vous pouvez le faire :

import { parse } from 'node-html-parser'
const html = parse(htmlData) // htmlData est la chaîne html brute que vous obtenez de l'API Geekflare.

Alternativement, si vous ne voulez que les métadonnées d’un site web, vous pouvez utiliser le point de terminaison de l’API métadonnées de Geekflare. Vous n’avez même pas besoin d’analyser le code HTML.

Avantages de l’utilisation de l’API Geekflare

Dans les applications à page unique, le contenu n’est souvent pas rendu par le serveur, mais par le navigateur à l’aide de javascript. Ainsi, si vous récupérez l’URL d’origine sans rendre le javascript nécessaire au rendu du contenu, vous n’obtiendrez rien d’autre qu’un élément conteneur sans contenu. Laissez-moi vous montrer un exemple.

Voici un site de démonstration construit avec react et vitejs. Scrapez ce site en utilisant l’API Geekflare avec l’option renderJS réglée sur false. Qu’avez-vous obtenu ?

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

Il n’y a qu’un conteneur racine sans contenu. C’est là que l’option renderJS entre en action. Essayez maintenant de récupérer le même site avec l’option renderJS réglée sur true. Qu’obtenez-vous ?

<body&gt
    <div id="root"&gt
        <div class="App"&gt
            <div&gt
                <a href="https://vitejs.dev" target="_blank"&gt
                    <img src="/vite.svg" class="logo" alt="Vite logo"&gt
                </a&gt
                <a href="https://reactjs.org" target="_blank"&gt
                    <img src="/assets/react.35ef61ed.svg" class="logo react" alt="logo React"&gt
                </a&gt
            </div&gt
            <h1>Vite React</h1&gt
            <div class="card"&gt
                <button>le compte est 0</button&gt
                </p> <p>Éditez <code>src/App.jsx et enregistrez pour tester HMR
 
             
Cliquez sur les logos Vite et React pour en savoir plus

Un autre avantage de l’utilisation de l’API Geekflare est qu’elle vous permet d’utiliser un proxy rotatif afin de vous assurer qu’aucun blocage d’IP ne se produira par le site web. L’API Geekflare inclut la fonction proxy dans son plan premium.

Le mot de la fin

L’utilisation d’une API de web scraping vous permet de vous concentrer uniquement sur les données scannées sans trop de difficultés techniques. En outre, l’API Geekflare offre également des fonctionnalités telles que la vérification des liens brisés, le méta scraping, les statistiques de chargement du site web, la capture de captures d’écran, l’état du site et bien d’autres choses encore. Tout cela dans le cadre d’une API unique. Consultez la documentation officielle de l’API Geekflare pour plus d’informations.