Configuration de l'environnement
Avant de commencer, assurons-nous de disposer des outils nécessaires.
Tout d'abord, téléchargez et installez Node.js depuis le site officiel, en veillant à utiliser la version à support à long terme (LTS). Cela installera également automatiquement Node Package Manager (NPM), que nous utiliserons pour installer d'autres dépendances.
Pour ce tutoriel, nous utiliserons Visual Studio Code comme environnement de développement intégré (IDE), mais vous pouvez utiliser n'importe quel autre IDE de votre choix. Créez un nouveau dossier pour votre projet, ouvrez le terminal et exécutez la commande suivante pour configurer un nouveau projet Node.js :
npm init -yCela créera un fichier package.json dans le répertoire de votre projet, qui stockera des informations sur votre projet et ses dépendances.
Ensuite, nous devons installer TypeScript et les définitions de types pour Node.js. TypeScript offre un typage statique facultatif qui aide à prévenir les erreurs dans le code. Pour ce faire, exécutez dans le terminal :
npm install typescript @types/node --save-devVous pouvez vérifier l'installation en exécutant :
npx tsc --versionTypeScript utilise un fichier de configuration appelé tsconfig.json pour stocker les options du compilateur et d'autres paramètres. Pour créer ce fichier dans votre projet, exécutez la commande suivante :
npx tsc -initAssurez-vous que la valeur de « outDir » est définie sur « dist ». De cette façon, nous séparerons les fichiers TypeScript des fichiers compilés. Vous trouverez plus d'informations sur ce fichier et ses propriétés dans la documentation officielle de TypeScript.
Créez maintenant un répertoire « src » dans votre projet, ainsi qu'un nouveau fichier « index.ts ». C'est là que nous conserverons le code de scraping. Pour exécuter du code TypeScript, vous devez d'abord le compiler. Afin de ne pas oublier cette étape supplémentaire, nous pouvons utiliser une commande personnalisée.
Rendez-vous dans le fichier « package.json » et modifiez la section « scripts » comme suit :
"scripts": {
"test": "npx tsc && node dist/index.js"
}Ainsi, lorsque vous exécuterez le script, il vous suffira de taper « npm run test » dans votre terminal.
Enfin, pour extraire les données du site web, nous utiliserons Puppeteer, une bibliothèque de navigateur sans interface graphique pour Node.js qui vous permet de contrôler un navigateur web et d’interagir avec des sites web par programmation. Pour l’installer, exécutez cette commande dans le terminal :
npm install puppeteerC'est fortement recommandé si vous souhaitez vous assurer de l'exhaustivité de vos données, car de nombreux sites web contiennent aujourd'hui du contenu généré dynamiquement. Si vous êtes curieux, vous pouvez consulter la documentation de Puppeteer avant de continuer pour découvrir toutes ses capacités.
Emplacement des données
Maintenant que votre environnement est configuré, nous pouvons commencer à nous intéresser à l'extraction des données. Pour cet article, j'ai choisi d'extraire les données de la page d'un restaurant irlandais de Dublin : https://www.yelp.ie/biz/the-boxty-house-dublin?osq=Restaurants.
Nous allons extraire les données suivantes :
- le nom du restaurant ;
- la note du restaurant ;
- le nombre d'avis sur le restaurant ;
- le site web de l'établissement ;
- le numéro de téléphone de l'établissement ;
- les adresses physiques du restaurant.
Vous pouvez voir toutes ces informations mises en évidence sur la capture d'écran ci-dessous :
En ouvrant les outils de développement sur chacun de ces éléments, vous pourrez repérer les sélecteurs CSS que nous utiliserons pour localiser les éléments HTML. Si vous débutez avec les sélecteurs CSS, n'hésitez pas à consulter ce guide pour débutants.
Extraction des données
Avant d'écrire notre script, vérifions que l'installation de Puppeteer s'est bien déroulée :
import puppeteer from 'puppeteer';
async function scrapeYelpData(yelp_url: string): Promise<void> {
// Launch Puppeteer
const browser = await puppeteer.launch({
headless: false,
args: ['--start-maximized'],
defaultViewport: null
})
// Create a new page
const page = await browser.newPage()
// Navigate to the target URL
await page.goto(yelp_url)
// Close the browser
await browser.close()
}
scrapeYelpData("https://www.yelp.ie/biz/the-boxty-house-dublin?osq=Restaurants")Ici, nous ouvrons une fenêtre de navigateur, créons une nouvelle page, accédons à notre URL cible, puis fermons le navigateur. Par souci de simplicité et pour faciliter le débogage visuel, j'ouvre la fenêtre de navigateur en mode non headless et en plein écran.
Examinons maintenant la structure du site web :
Il semble que Yelp présente une structure de page quelque peu complexe, car les noms de classe sont générés de manière aléatoire et très peu d’éléments possèdent des valeurs d’attribut uniques.
Mais n’ayez crainte, nous pouvons faire preuve de créativité dans notre approche. Tout d’abord, pour obtenir le nom du restaurant, nous ciblons le seul élément « h1 » présent sur la page.
// Extract restaurant name
const restaurant_name = await page.evaluate(() => {
const name = document.querySelector('h1')
return name ? name.textContent : ''
})
console.log(restaurant_name)Maintenant, pour obtenir la note du restaurant, vous pouvez remarquer qu’au-delà des icônes en forme d’étoiles, la valeur explicite est présente dans l’attribut « aria-label ». Nous ciblons donc l’élément « div » dont l’attribut « aria-label » se termine par la chaîne « star rating ».
// Extract restaurant rating
const restaurant_rating = await page.evaluate(() => {
const rating = document.querySelector('div[aria-label$="star rating"]')
return rating ? rating.getAttribute('aria-label') : ''
})
console.log(restaurant_rating)Et enfin (pour cette section HTML particulière), nous voyons que nous pouvons facilement obtenir le nombre d'avis en ciblant l'élément d'ancrage mis en évidence.
// Extract restaurant reviews
const restaurant_reviews = await page.evaluate(() => {
const reviews = document.querySelector('a[href="#reviews"]')
return reviews ? reviews.textContent : ''
})
console.log(restaurant_reviews)Un jeu d'enfant. Jetons un œil au widget d'informations sur l'entreprise :
Malheureusement, dans ce cas, nous ne pouvons pas nous fier aux sélecteurs CSS. Heureusement, nous pouvons utiliser une autre méthode pour localiser les éléments HTML : XPath. Si vous débutez avec le fonctionnement des sélecteurs CSS, n’hésitez pas à consulter ce guide pour débutants.
Pour extraire l'URL du site web du restaurant, nous appliquons la logique suivante :
localiser l'élément « p » dont le contenu textuel est « Site web de l'entreprise » ;
localiser l'élément frère suivant
localiser l'élément d'ancrage et son attribut « href ».
// Extract restaurant website
const restaurant_website_element = await page.$x("//p[contains(text(), 'Business website')]/following-sibling::p/a/@href")
const restaurant_website = await page.evaluate(
element => element.nodeValue,
restaurant_website_element[0]
)
console.log(restaurant_website)Maintenant, pour le numéro de téléphone et l'adresse, nous pouvons suivre exactement la même logique, à deux exceptions près :
- pour le numéro de téléphone, nous ciblons l'élément frère suivant et extrayons sa propriété textContent ;
- pour l'adresse, nous ciblons l'élément frère suivant de l'élément parent.
// Extract restaurant phone number
const restaurant_phone_element = await page.$x("//p[contains(text(), 'Phone number')]/following-sibling::p")
const restaurant_phone = await page.evaluate(
element => element.textContent,
restaurant_phone_element[0]
)
console.log(restaurant_phone)
// Extract restaurant address
const restaurant_address_element = await page.$x("//a[contains(text(), 'Get Directions')]/parent::p/following-sibling::p")
const restaurant_address = await page.evaluate(
element => element.textContent,
restaurant_address_element[0]
)
console.log(restaurant_address)Le résultat final devrait ressembler à ceci :
The Boxty House
4.5 star rating
948 reviews
/biz_redir?url=http%3A%2F%2Fwww.boxtyhouse.ie%2F&cachebuster=1673542348&website_link_type=website&src_bizid=EoMjdtjMgm3sTv7dwmfHsg&s=16fbda8bbdc467c9f3896a2dcab12f2387c27793c70f0b739f349828e3eeecc3
(01) 677 2762
20-21 Temple Bar Dublin 2Contourner la détection des bots
Si le scraping de Yelp peut sembler facile au premier abord, le processus peut devenir plus complexe et difficile à mesure que vous développez votre projet. Le site web met en œuvre diverses techniques pour détecter et empêcher le trafic automatisé, de sorte que votre scraper à grande échelle commence à être bloqué.
Yelp collecte de nombreuses données de navigateur pour générer et vous associer une empreinte digitale unique. En voici quelques-unes :
- les propriétés de l'objet Navigator (deviceMemory, hardwareConcurrency, platform, userAgent, webdriver, etc.)
- des contrôles de synchronisation et de performance
- les service workers
- vérifications des dimensions de l'écran
- et bien d'autres encore
Une façon de surmonter ces défis et de continuer à effectuer du scraping à grande échelle consiste à utiliser une API de scraping. Ce type de services offre un moyen simple et fiable d'accéder aux données de sites web tels que yelp.com, sans avoir à créer et à maintenir votre propre scraper.
WebScrapingAPI est un exemple de ce type de produit. Son mécanisme de rotation de proxys permet d'éviter complètement les CAPTCHA, et sa base de connaissances étendue permet de randomiser les données du navigateur afin qu'il ressemble à un véritable utilisateur.
La configuration est rapide et facile. Il vous suffit de créer un compte pour recevoir votre clé API. Celle-ci est accessible depuis votre tableau de bord et sert à authentifier les requêtes que vous envoyez.
Comme vous avez déjà configuré votre environnement Node.js, nous pouvons utiliser le SDK correspondant. Exécutez la commande suivante pour l'ajouter aux dépendances de votre projet :
npm install webscrapingapiIl ne reste plus qu'à envoyer une requête GET pour recevoir le document HTML du site web. Notez que ce n'est pas la seule façon d'accéder à l'API.
import webScrapingApiClient from 'webscrapingapi';
const client = new webScrapingApiClient("YOUR_API_KEY");
async function exampleUsage() {
const api_params = {
'render_js': 1,
'proxy_type': 'residential',
}
const URL = "https://www.yelp.ie/biz/the-boxty-house-dublin?osq=Restaurants"
const response = await client.get(URL, api_params)
if (response.success) {
console.log(response.response.data)
} else {
console.log(response.error.response.data)
}
}
exampleUsage();En activant le paramètre « render_js », nous envoyons la requête à l'aide d'un navigateur sans interface graphique, comme vous l'avez fait précédemment dans ce tutoriel.
Après avoir reçu le document HTML, vous pouvez utiliser une autre bibliothèque pour extraire les données qui vous intéressent, comme Cheerio. Vous n'en avez jamais entendu parler ? Consultez ce guide pour vous aider à démarrer !
Conclusion
Cet article vous a présenté un guide complet sur la manière de scraper le site Yelp à l'aide de TypeScript et Puppeteer. Nous avons passé en revue le processus de configuration de l'environnement, la localisation et l'extraction des données, et expliqué pourquoi l'utilisation d'un scraper professionnel est une meilleure solution que de créer le vôtre.
Les données extraites de Yelp peuvent être utilisées à diverses fins, telles que l'identification des tendances du marché, l'analyse du sentiment des clients, la surveillance des concurrents, la création de campagnes marketing ciblées, et bien d'autres encore.
Dans l'ensemble, le web scraping de Yelp.com peut être un atout précieux pour quiconque cherche à obtenir un avantage concurrentiel sur son marché local, et ce guide constitue un excellent point de départ pour y parvenir.
