Web Scraping avec JavaScript et Node.Js

Robert Sfichi le 16 janvier 2023

Soyons honnêtes. À l'avenir, le volume de données de l'internet ne cessera de croître. Il n'y a vraiment rien que nous puissions faire pour y remédier. C'est là que les Web Scrapers entrent en jeu.

Dans l'article suivant, nous allons vous montrer comment construire votre propre Web Scraper en utilisant JavaScript comme langage de programmation principal.

Comprendre le Web Scraping avec JavaScript

Un scraper web est un logiciel qui vous aide à automatiser le processus fastidieux de collecte de données utiles à partir de sites web tiers. En général, cette procédure consiste à envoyer une requête à une page web spécifique, à lire le code HTML et à décomposer ce code pour collecter des données.

Pourquoi chercher à récupérer des données ?

Supposons que vous souhaitiez créer une plateforme de comparaison de prix. Vous avez besoin des prix de plusieurs articles provenant de quelques boutiques en ligne. Un outil de scraping web peut vous aider à réaliser cette opération en quelques minutes.

Peut-être essayez-vous d'obtenir de nouveaux prospects pour votre entreprise ou même d'obtenir les prix les plus avantageux pour un vol ou un hôtel. Alors que nous parcourions le web à la recherche de cet article, nous sommes tombés sur Brisk Voyage.

Brisk Voyage est une application web qui aide ses utilisateurs à trouver des voyages de dernière minute bon marché pour le week-end. À l'aide d'une sorte de technologie de raclage du web, ils parviennent à vérifier en permanence les prix des vols et des hôtels. Lorsque le web scraper trouve un voyage à bas prix, l'utilisateur reçoit un courrier électronique contenant les instructions de réservation.

À quoi servent les racleurs de sites web ?

Les développeurs utilisent des scrappeurs web pour toutes sortes de recherches de données, mais les cas les plus fréquents sont les suivants :

• Analyse du marché
• Comparaison des prix
• Génération de leads
• Recherche universitaire
• Collecte d'ensembles de données d'entraînement et de test pour l'apprentissage automatique

Quels sont les défis du Web Scraping avec JavaScript et Node.Js ?

Vous savez, ces petites cases à cocher qui vous font admettre que vous n'êtes pas un robot ? Elles ne parviennent pas toujours à éloigner les robots.

Mais la plupart du temps, c'est le cas, et lorsque les moteurs de recherche s'aperçoivent que vous essayez de récupérer leur site web sans autorisation, ils restreignent votre accès.

Les modifications de la structure d'un site web constituent un autre obstacle auquel les scrapeurs web sont confrontés. Un petit changement dans la structure d'un site web peut nous faire perdre beaucoup de temps. Les outils de scraping web nécessitent des mises à jour fréquentes pour s'adapter et effectuer le travail.

Le géoblocage est un autre défi auquel sont confrontés les scrappeurs de sites web. Sur la base de votre emplacement physique, un site web peut vous interdire complètement l'accès si les demandes proviennent de régions non fiables.

Pour relever ces défis et vous aider à vous concentrer sur la création de votre produit, nous avons créé WebScrapingAPI. Il s'agit d'une API facile à utiliser, de niveau entreprise, qui vous aide à collecter et à gérer les données HTML. Nous sommes obsédés par la vitesse, nous utilisons un réseau mondial de proxy rotatif et nous avons déjà plus de 10 000 clients qui utilisent nos services. Si vous pensez que vous n'avez pas le temps de construire un scraper web à partir de zéro, vous pouvez essayer WebScrapingAPI en utilisant le niveau gratuit.

APIs : Le moyen facile de faire du scraping sur le web

La plupart des applications web fournissent une API qui permet aux utilisateurs d'accéder à leurs données d'une manière prédéterminée et organisée. L'utilisateur fait une demande à un point d'accès spécifique et l'application répond avec toutes les données que l'utilisateur a spécifiquement demandées. Le plus souvent, les données sont déjà formatées sous la forme d'un objet JSON.

Lorsque vous utilisez une interface de programmation d'application, vous n'avez normalement pas à vous préoccuper des obstacles susmentionnés. Quoi qu'il en soit, les API peuvent également recevoir des mises à jour. Dans ce cas, l'utilisateur doit toujours garder un œil sur l'API qu'il utilise et mettre à jour le code en conséquence pour ne pas perdre sa fonctionnalité.

En outre, la documentation d'une API est très importante. Si la fonctionnalité d'une API n'est pas clairement documentée, l'utilisateur perd beaucoup de temps.

Comprendre le Web

Une bonne compréhension de l'internet nécessite de nombreuses connaissances. Voici une brève introduction à tous les termes nécessaires pour mieux comprendre le web scraping.

Le protocole HTTP (HyperText Transfer Protocol) est à la base de tout échange de données sur le web. Comme son nom l'indique, HTTP est une convention client-serveur. Un client HTTP, tel qu'un navigateur web, ouvre une connexion à un serveur HTTP et envoie un message, tel que : "Hé ! Quoi de neuf ? Pourriez-vous me passer ces images ?". Le serveur offre généralement une réponse, sous la forme d'un code HTML, et ferme la connexion.

Supposons que vous ayez besoin de visiter Google. Si vous tapez l'adresse dans le navigateur web et que vous appuyez sur Entrée, le client HTTP (le navigateur) enverra le message suivant au serveur :

GET / HTTP/1.1
Host : google.com
Accept : text/html,application/xhtml+xml,application/xml;q=0.9,image/web\p,*/*;q=0.8
Accept-Encoding : gzip, deflate, sdch, br
Connection : keep-aliveUser-Agent : Mozilla/5.0 (Macintosh ; Intel Mac OS X 10_11_6) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

La première ligne du message contient la méthode de requête (GET), le chemin d'accès à la requête (dans notre cas, il s'agit de '/' car nous n'avons accédé qu'à www.google.com), la version du protocole HTTP et plusieurs en-têtes, tels que Connection ou User-Agent.

Parlons des champs d'en-tête les plus importants pour le processus :

• Hôte: Le nom de domaine du serveur auquel vous avez accédé après avoir tapé l'adresse dans le navigateur web et appuyé sur la touche "Entrée".
• User-Agent: Ici, nous pouvons voir les détails concernant le client qui a fait la requête. J'utilise un MacBook, comme le montre la partie __(Macintosh ; Intel Mac OS X 10_11_6)__, et Chrome comme navigateur web __(Chrome/56.0.2924.87)__.
• Accept: En utilisant cet en-tête, le client contraint le serveur à ne lui envoyer qu'un certain type de réponses, comme application/JSON ou text/plain.
• Referrer: ce champ d'en-tête contient l'adresse de la page à l'origine de la requête. Les sites web utilisent cet en-tête pour modifier leur contenu en fonction de l'origine de l'utilisateur.

Une réponse du serveur peut ressembler à ceci :

HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu) Content-Type: text/html; charset=utf-8 
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>The content of the document</body>
</html>

Comme vous pouvez le voir, la première ligne contient le code de réponse HTTP : **200OK. Cela signifie que l'action de scraping a réussi.

Si nous avions envoyé la demande à l'aide d'un navigateur web, celui-ci aurait analysé le code HTML, obtenu tous les autres éléments tels que les fichiers CSS, JavaScript et les images, et rendu la version finale de la page web. Dans les étapes ci-dessous, nous allons essayer d'automatiser ce processus.

Comprendre le Web Scraping avec Node.Js

JavaScript a été initialement créé pour aider ses utilisateurs à ajouter du contenu dynamique aux sites web. Au début, il ne pouvait pas interagir directement avec un ordinateur ou ses données. Lorsque vous accédez à un site web, le JavaScript est lu par le navigateur et transformé en quelques lignes de code que l'ordinateur peut traiter.

Voici Node.Js, l'outil qui permet à Javascript de fonctionner non seulement côté client, mais aussi côté serveur. Node.Js peut être défini comme un langage JavaScript libre et gratuit pour la programmation côté serveur. Il permet à ses utilisateurs de créer et d'exécuter rapidement des applications en réseau.

const http = require('http');
const port = 8000;
const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello world!');
});
server.listen(port, () => {
  console.log(`Server running on port 8000.`);
});

Si vous n'avez pas installé Node.Js, consultez l'étape suivante pour les instructions suivantes. Sinon, créez un nouveau fichier index.js et exécutez-le en tapant dans un terminal node index.js, ouvrez un navigateur et naviguez vers localhost:8000. Vous devriez voir la chaîne suivante : "Hello world !".

Outils nécessaires

Chrome - Veuillez suivre le guide d'installation ici.

• VSCode - Vous pouvez le télécharger à partir de cette page et suivre les instructions pour l'installer sur votre appareil.
• Node.Js - Avant de commencer à utiliser Axios, Cheerio ou Puppeteer, nous devons installer Node.Js et le gestionnaire de paquets Node. La façon la plus simple d'installer Node.Js et NPM est de récupérer l'un des installateurs de la source officielle de Node.Js et de l'exécuter.

Une fois l'installation terminée, vous pouvez vérifier si Node.Js est installé en exécutant node -v et npm -v dans une fenêtre de terminal. La version doit être supérieure à v14.15.5. Si vous rencontrez des problèmes avec ce processus, il existe une autre façon d'installer Node.Js.

Maintenant, créons un nouveau projet NPM. Créez un nouveau dossier pour le projet et exécutez npm init -y. Passons maintenant à l'installation des dépendances.

• Axios - une bibliothèque JavaScript utilisée pour effectuer des requêtes HTTP depuis Node.Js. Exécutez npm install axios dans le dossier nouvellement créé.
• Cheerio - an open-source library that helps us to extract useful information by parsing markup and providing an API for manipulating the resulting data. To use Cheerio you can select tags of an HTML document by making use of selectors. A selector looks like this:  $("div"). This specific selector helps us pick all <div> elements on a page.

Pour installer Cheerio, lancez npm install cheerio dans le dossier du projet.

• Puppeteer - une bibliothèque Node.Js qui permet de prendre le contrôle de Chrome ou Chromium en fournissant une API de haut niveau.

Pour utiliser Puppeteer, vous devez l'installer à l'aide d'une commande similaire : npm install puppeteer. Notez que lorsque vous installez ce paquet, il installe également une version récente de Chromium qui est garantie d'être compatible avec votre version de Puppeteer.

Inspection de la source des données

Tout d'abord, vous devez accéder au site web que vous souhaitez récupérer à l'aide de Chrome ou d'un autre navigateur web. Pour réussir à récupérer les données dont vous avez besoin, vous devez comprendre la structure du site web.

Inspection ciblée du site web

Une fois que vous avez réussi à accéder au site web, utilisez-le comme un utilisateur normal. Si vous avez accédé au subreddit /r/dundermifflin, vous pouvez consulter les messages sur la page principale en cliquant dessus, en consultant les commentaires et les votes positifs, et même en triant les messages en fonction du nombre de votes au cours d'une période donnée.

Comme vous pouvez le voir, le site web contient une liste d'articles, et chaque article comporte des votes positifs et des commentaires.

Il suffit de regarder l'URL d'un site web pour comprendre une grande partie de ses données. Dans le cas présent, https://www.old.reddit.com/r/DunderMifflin représente l'URL de base, le chemin qui nous mène à la communauté Reddit "The Office". Lorsque vous commencez à trier les articles en fonction du nombre de votes, vous pouvez voir que l'URL de base devient https://www.old.reddit.com/r/DunderMifflin/top/?t=year.

Les paramètres de requête sont des extensions de l'URL utilisées pour définir un contenu ou des actions spécifiques en fonction des données transmises. Dans notre cas, "?t=year" représente la période de temps sélectionnée pour laquelle nous voulons voir les messages les plus votés.

Tant que vous êtes sur ce subreddit spécifique, l'URL de base reste la même. Les seules choses qui changeront sont les paramètres de la requête. Nous pouvons les considérer comme les filtres appliqués à la base de données pour récupérer les données que nous voulons. Vous pouvez modifier la période de temps pour ne voir que les messages les plus votés au cours du dernier mois ou de la dernière semaine en changeant simplement l'URL.

Inspection à l'aide d'outils de développement

Dans les étapes suivantes, vous allez en apprendre davantage sur la manière dont les informations sont organisées sur la page. Cela vous permettra de mieux comprendre ce que nous pouvons réellement extraire de notre source.

Les outils de développement vous permettent d'explorer de manière interactive le modèle d'objet du document (DOM) du site web. Nous allons utiliser les outils de développement dans Chrome, mais vous pouvez utiliser n'importe quel navigateur web avec lequel vous êtes à l'aise. Dans Chrome, vous pouvez l'ouvrir en faisant un clic droit n'importe où sur la page et en sélectionnant l'option "Inspecter".

Dans le nouveau menu qui apparaît à l'écran, veuillez sélectionner l'onglet "Éléments". Celui-ci présentera la structure HTML interactive du site web.

Vous pouvez interagir avec le site web en modifiant sa structure, en développant et en réduisant des éléments, voire en les supprimant. Notez que ces modifications ne seront visibles que pour vous.

Les expressions régulières et leur rôle

Les expressions régulières, également connues sous le nom de RegEx, vous aident à créer des règles qui vous permettent de trouver et de gérer différentes chaînes de caractères. Si vous devez analyser de grandes quantités d'informations, la maîtrise du monde des expressions régulières peut vous faire gagner beaucoup de temps.

When you first start using regex, it seems to be a little too complicated, but the truth is they're pretty easy to use. Let's take the following example: \d. By using this expression, you can easily grab any digit from 0 to 9. Of course, there are a lot more complex ones, like: ^(\(\d{3}\)|^\d{3}[.-]?)?\d{3}[.-]?\d{4}$. This matches a phone number, with or without parentheses around the area code, or with or without dots to separate the numbers.

Comme vous pouvez le constater, les expressions régulières sont assez faciles à utiliser et peuvent être très puissantes si vous passez suffisamment de temps à les maîtriser.

Comprendre Cheerio.js

Après avoir installé avec succès toutes les dépendances présentées précédemment et inspecté le DOM à l'aide des outils de développement, vous pouvez passer au scraping proprement dit.

Une chose que vous devez garder à l'esprit est que si la page que vous essayez de récupérer est une SPA (Single Page Application), Cheerio n'est peut-être pas la meilleure solution. En effet, Cheerio ne peut pas vraiment se comporter comme un navigateur web. C'est pourquoi, dans les étapes suivantes, nous allons utiliser Puppeteer. Mais en attendant, découvrons la puissance de Cheerio.

Pour tester la fonctionnalité de Cheerio, essayons de collecter tous les titres de posts sur le subreddit présenté précédemment : /r/dundermifflin.

Créons un nouveau fichier appelé index.js et tapons ou copions simplement les lignes suivantes :

const axios = require("axios");
const cheerio = require("cheerio");
const fetchTitles = async () => {
	try {
		const response = await axios.get('https://old.reddit.com/r/DunderMifflin/');
                const html = response.data;
		const $ = cheerio.load(html);
		const titles = [];
		$('div > p.title > a').each((_idx, el) => {
			const title = $(el).text()
			titles.push(title)
		});
		return titles;
	} catch (error) {
		throw error;
	}};
fetchTitles().then((titles) => console.log(titles));

Pour mieux comprendre le code écrit ci-dessus, nous allons expliquer ce que fait la fonction asynchrone fetchTitles() :

Tout d'abord, nous effectuons une requête GET vers l'ancien site web Reddit à l'aide de la bibliothèque Axios. Le résultat de cette requête est ensuite chargé par Cheerio à la ligne 10. En utilisant les outils de développement, nous avons découvert que les éléments contenant les informations souhaitées sont quelques balises d'ancrage. Pour être sûrs de ne sélectionner que les balises d'ancrage qui contiennent le titre de l'article, nous allons également sélectionner leurs parents en utilisant le sélecteur suivant : $('div > p.title > a')

Pour obtenir chaque titre individuellement et pas seulement un gros morceau de lettres qui n'ont aucun sens, nous devons parcourir chaque article en boucle à l'aide de la fonction each(). Enfin, en appelant text() sur chaque article, nous obtiendrons le titre de l'article en question.

Pour l'exécuter, tapez node index.js dans le terminal et appuyez sur entrée. Vous devriez voir un tableau contenant tous les titres des articles.

DOM pour NodeJS

Comme le DOM d'une page web n'est pas disponible directement pour Node.Js, nous pouvons utiliser JSDOM. Selon sa documentation, JSDOM est une implémentation purement JavaScript de nombreux standards web, notamment les standards DOM et HTML du WHATWG, pour une utilisation avec Node.Js.

En d'autres termes, en utilisant JSDOM, nous pouvons créer un DOM et le manipuler en utilisant les mêmes méthodes que celles que nous utiliserions pour manipuler celui du navigateur web.

JSDOM vous permet d'interagir avec un site web que vous devez explorer. Si vous êtes familier avec la manipulation du DOM du navigateur web, la compréhension de la fonctionnalité JSDOM ne vous demandera pas beaucoup d'efforts.

Pour mieux comprendre le fonctionnement de JSDOM, installons-le, créons un nouveau fichier index.js et tapons ou copions le code suivant :

const { JSDOM } = require('jsdom')
const { document } = new JSDOM(
  '<h1 class="string">Dunder mifflin, the people person\'s paper people!</h2>'
).window
const string = document.querySelector('.string')
console.log(string.innerHTML)
string.textContent = 'Hello world'
console.log(string.innerHTML)

Comme vous pouvez le voir, JSDOM crée un nouveau modèle d'objet de document qui peut être manipulé à l'aide de la même méthode que celle utilisée pour manipuler le DOM du navigateur. À la ligne 3, un nouvel élément h1 est créé dans le DOM. En utilisant la classe attribuée à l'en-tête, nous sélectionnons l'élément à la ligne 7 et modifions son contenu à la ligne 10. Vous pouvez voir la différence en imprimant l'élément DOM avant et après la modification.

Pour l'exécuter, ouvrez un nouveau terminal, tapez node index.js, et appuyez sur entrée.

Bien entendu, vous pouvez effectuer des actions beaucoup plus complexes à l'aide de JSDOM, comme ouvrir une page web et interagir avec elle, remplir des formulaires et cliquer sur des boutons.

Pour ce que ça vaut, JSDOM est une bonne option, mais Puppeteer a gagné beaucoup de terrain ces dernières années.

Comprendre Puppeteer : comment démêler des pages JavaScript

Avec Puppeteer, vous pouvez faire la plupart des choses que vous pouvez faire manuellement dans un navigateur web, comme remplir un formulaire, générer des captures d'écran de pages ou automatiser des tests d'interface utilisateur.

Essayons de mieux comprendre son fonctionnement en faisant une capture d'écran de la communauté Reddit /r/dundermifflin. Si vous avez déjà installé la dépendance, passez à l'étape suivante. Sinon, lancez npm i puppeteer dans le dossier projects. Maintenant, créez un nouveau fichier index.js et tapez ou copiez le code suivant :

const puppeteer = require('puppeteer')
async function takeScreenshot() {
	try {
		const URL = 'https://www.old.reddit.com/r/dundermifflin/'
		const browser = await puppeteer.launch()
		const page = await browser.newPage()
		await page.goto(URL)
		await page.pdf({ path: 'page.pdf' })
		await page.screenshot({ path: 'screenshot.png' })
		await browser.close()
	} catch (error) {
		console.error(error)
	}
}
takeScreenshot()

Nous avons créé la fonction asynchrone takeScreenshot().

Comme vous pouvez le voir, une instance du navigateur est d'abord lancée à l'aide de la commande puppeteer.launch(). Ensuite, nous créons une nouvelle page et en appelant la fonction goto() en utilisant l'URL comme paramètre, la page créée précédemment sera redirigée vers cette URL spécifique. Les méthodes pdf() et screenshot() nous aident à créer un nouveau fichier PDF et une image qui contient la page web en tant que composant visuel.

Enfin, l'instance du navigateur est fermée à la ligne 13. Pour l'exécuter, tapez node index.js dans le terminal et appuyez sur entrée. Vous devriez voir deux nouveaux fichiers dans le dossier projects, appelés page.pdf et screenshot.png.

Alternative à Marionnettiste

Si vous ne vous sentez pas à l'aise avec Puppeteer, vous pouvez toujours utiliser une alternative comme NightwatchJS, NightmareJS, ou CasperJS.

Prenons l'exemple de Nightmare. Parce qu'il utilise Electrons au lieu de Chromium, la taille du bundle est un peu plus petite. Nightmare peut être installé en lançant la commande npm I nightmare. Nous allons essayer de reproduire le processus précédemment réussi de prise de capture d'écran de la page en utilisant Nightmare au lieu de Puppeteer.

Créons un nouveau fichier index.js et tapons ou copions le code suivant :

const Nightmare = require('nightmare')
const nightmare = new Nightmare()
return nightmare.goto('https://www.old.reddit.com/r/dundermifflin')
	.screenshot('./nightmare-screenshot.png')
 	.end()
	.then(() => {
		console.log('Done!')
	})
	.catch((err) => {
		console.error(err)
	})

Comme vous pouvez le voir à la ligne 2, nous créons une nouvelle instance de Nightmare, nous dirigeons le navigateur vers la page web que nous voulons capturer, nous prenons et sauvegardons la capture d'écran à la ligne 5 et nous terminons la session Nightmare à la ligne 6.

Pour l'exécuter, tapez node index.js dans le terminal et appuyez sur entrée. Vous devriez voir deux nouveaux fichiers nightmare-screenshot.png dans le dossier projects.

Principaux enseignements

Si vous êtes encore ici, félicitations ! Vous disposez de toutes les informations nécessaires pour construire votre propre scraper web. Prenons une minute pour résumer ce que vous avez appris jusqu'à présent :

• Un scraper web est un logiciel qui vous aide à automatiser le processus fastidieux de collecte de données utiles à partir de sites web tiers.
• Les scrappeurs web sont utilisés pour toutes sortes de recherches de données : analyse de marché, comparaison de prix ou génération de prospects.
• Les clients HTTP, tels que les navigateurs web, vous permettent d'adresser des demandes à un serveur et d'accepter une réponse.
• JavaScript a été initialement créé pour aider ses utilisateurs à ajouter du contenu dynamique aux sites web. Node.Js est un outil qui permet à JavaScript de fonctionner non seulement côté client, mais aussi côté serveur.
• Cheerio est une bibliothèque open-source qui nous aide à extraire des informations utiles en analysant le code HTML et en fournissant une API pour manipuler les données résultantes.
• Puppeteer est une bibliothèque Node.Js qui est utilisée pour prendre le contrôle de Chrome ou Chromium en fournissant une API de haut niveau. Grâce à elle, vous pouvez faire la plupart des choses que vous pouvez faire manuellement dans un navigateur web, comme remplir un formulaire, générer des captures d'écran de pages, ou automatiser.
• Il suffit de regarder l'URL d'un site web pour comprendre une grande partie de ses données.
• Les outils de développement vous permettent d'explorer de manière interactive le modèle d'objet documentaire du site web.
• Les expressions régulières vous aident à créer des règles qui vous permettent de trouver et de gérer différentes chaînes de caractères.
• JSDOM est un outil qui crée un nouveau modèle d'objet de document qui peut être manipulé en utilisant la même méthode que celle utilisée pour manipuler le DOM du navigateur.

Nous espérons que les instructions étaient claires et que vous avez réussi à obtenir toutes les informations nécessaires pour votre prochain projet. Si vous ne voulez toujours pas le faire vous-même, vous pouvez toujours essayer WebScrapingAPI.

Merci d'avoir tenu jusqu'au bout !