Comment gratter un site Web à l'aide de l'API Geekflare Web Scraping

Le scraping Web est un processus permettant d'extraire des informations utiles du World Wide Web. Lors d'une recherche sur Google, un robot d'exploration (bot), c'est-à-dire le robot d'exploration, parcourt presque tout le contenu sur le Web et sélectionne ce qui vous intéresse.

Cette idée que l'information ou la connaissance doit être accessible à tous a conduit à la formation du World Wide Web. Cependant, les données que vous recherchez doivent être autorisées pour un usage public.

How is web scraping useful?

Nous vivons à l'ère des données. Les données brutes peuvent être converties en informations utiles qui peuvent être utilisées pour servir un objectif plus large à l'aide de grattage web. Il peut être utilisé pour analyser et étudier les utilisateurs d'un produit afin d'améliorer le produit, 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 tarification des concurrents et, en conséquence, élaborer les leurs. Le scraping Web peut également être utilisé pour la météo et les nouvelles.

Challenges

# 1. Restriction 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 le font pour empêcher les attaques malveillantes sur leur site Web.

# 2. Captcha

Faire la distinction entre un vrai humain et un bot essayant d'accéder au site Web est ce que font réellement les captchas. 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

C'est l'un des plus grands obstacles pour les scrapers Web. Les sites Web modernes utilisent des frameworks frontaux capables de créer des applications d'une seule page. La plupart des applications d'une seule page n'ont pas de contenu rendu par le serveur. Au lieu de cela, ils génèrent le contenu selon les besoins en utilisant du javascript côté client. Il est donc difficile pour les grattoirs de savoir quel est le contenu d'une page Web. Afin d'obtenir le contenu, vous devez rendre du javascript côté client.

The Geekflare API

A API de grattage Web résout la plupart des défis rencontrés lors du grattage Web, car il gère tout pour vous. Explorons l'API Geekflare et voyons comment vous pouvez l'utiliser pour le scraping Web.

L'API de Geekflare propose un processus simple en trois étapes :

Fournir une URL à gratter
Fournir quelques options de configuration
Obtenir les données

Il peut gratter la page Web pour vous, puis renvoyer des données HTML brutes sous forme de chaîne ou dans un fichier HTML accessible via un lien, selon la manière qui vous convient.

Utilisation de l'API

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

Dans un nouveau dossier, créez un fichier nommé index.mjs. La raison derrière mjs est que nous voulons que ce fichier soit considéré comme un module ES au lieu d'un fichier Common JS. Vérifier la différence entre les modules ES et les fichiers JS communs.

Exécuter la commande npm init -y dans le terminal dans le dossier ou le répertoire en cours. Cela va créer un package.json fichier pour vous.

À l'intérieur de l' package.json fichier, modifiez le main valeur clé à index.mjs si c'est autre chose par défaut. Alternativement, vous pouvez également ajouter une clé type et fixez sa valeur égale à module.

{
  “type”: “module”
}

Ajouter une dépendance nommée axios en exécutant npm i axios commande dans le terminal. Cette dépendance nous aide à envoyer des demandes de récupération à des points de terminaison spécifiques.

Un bureau de coordination de MentorHabiletés 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",
  "license": "ISC",
  "dependencies": {
    "axios": "^1.1.3"
  }
}

L’ axios à l'intérieur de l' index.mjs fichier comme celui-ci. Ici le import mot clé est utilisé car il s'agit d'un module ES. S'il s'agissait d'un fichier commonJS, cela aurait été le require mot-clé.

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. Ainsi, vous pouvez le stocker dans une constante.

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

Spécifiez l'URL que vous souhaitez récupérer et obtenir les données.

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

Créez une fonction asynchrone et initialisez axios à l'intérieur.

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

Dans le axios options de configuration, vous devez spécifier la méthode comme post, l'URL avec le point de terminaison, un en-tête appelé x-api-key dont la valeur sera la clé API fournie par Geekflare et enfin, une data objet qui sera envoyé à l'API Geekflare. Vous pouvez obtenir votre clé API en allant sur dash.geekflare.com.

const res = await axios({
    method: "post",
    url: `${baseUrl}/webscraping`,
    headers: {
        "x-api-key": "your api key"
    },
    data: {
        url: toScrapeURL,
        output: 'file',
        device: 'desktop',
        renderJS: true
    }
})

Comme vous pouvez le voir, l'objet de données a les propriétés suivantes :
- url: l'URL d'une page Web qui doit être extraite.
- sortie: 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. La chaîne en ligne est la valeur par défaut.
- dispositif: le type d'appareil sur lequel vous souhaitez ouvrir la page Web. Il accepte trois valeurs, 'desktop', 'mobile' et 'tablet', 'desktop' étant la valeur par défaut.
- renduJS: une valeur booléenne pour spécifier si vous souhaitez afficher 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 le documentation officielle de l'API Geekflare.

Appelez la fonction asynchrone et récupérez les données. Vous pouvez utiliser une IIFE (expression de fonction appelée immédiatement).

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

La réponse sera 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/tests/web-scraping/pbn0v009vksiszv1cgz8o7tu.html'
}

Parsing HTML

Pour analyser le HTML, vous pouvez utiliser un package npm nommé node-html-parser et d'extraire également des données de HTML. Par exemple, si vous souhaitez extraire le titre d'une page Web, vous pouvez faire :

import { parse } from ‘node-html-parser’
const html = parse(htmlData) // htmlData is the raw html string you get from the Geekflare API.

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

Benefits of using Geekflare API

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 afficher le javascript nécessaire pour afficher le contenu, vous n'obtenez rien d'autre qu'un élément conteneur sans contenu. Permettez-moi de vous montrer un exemple.

Voici un site de démonstration construit en utilisant react et vitejs. Grattez ce site à l'aide de l'API Geekflare avec l'option renderJS définie sur false. Qu'est-ce que vous obtenez?

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

Il n'y a qu'un conteneur racine sans contenu. C'est là que l'option renderJS entre en action. Essayez maintenant de gratter le même site avec l'option renderJS définie sur true. Qu'est ce que tu obtiens?

<body>
    <div id="root">
        <div class="App">
            <div>
                <a href="https://vitejs.dev" target="_blank">
                    <img src="/vite.svg" class="logo" alt="Vite logo">
                </a>
                <a href="https://reactjs.org" target="_blank">
                    <img src="/assets/react.35ef61ed.svg" class="logo react" alt="React logo">
                </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 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 IP ne se produira par le site Web. L'API Geekflare inclut la fonctionnalité de proxy sous son Plan prime.

Mot de la fin

L'utilisation d'une API de grattage Web vous permet de vous concentrer uniquement sur les données grattées sans trop de tracas techniques. En dehors de cela, l'API Geekflare fournit également des fonctionnalités telles que la vérification des liens brisés, le méta-grattage, les statistiques de charge du site Web, la capture d'écran, l'état du site et bien plus encore. Tout cela sous une seule API. Vérifiez documentation officielle de l'API Geekflare pour plus d'information.

Murtuza Surti

Auteur

Ingénieur logiciel et créateur de contenu