Full-Stack Web Scraping : créez des aperçus de liens avec Vite.js, React et Node.js

Présentation

Le développement Web est en constante évolution et avec des outils comme Vite.js et React, créer des applications frontales rapides et réactives n'a jamais été aussi simple. Mais que se passe-t-il lorsque vous avez besoin que votre application récupère et affiche du contenu provenant d’autres sites Web ? C'est là qu'intervient le web scraping, et aujourd'hui, nous allons créer une application full-stack qui fait exactement cela.

Dans ce tutoriel, vous apprendrez à créer un générateur d'aperçu de liens dynamiques en utilisant React pour le frontend et Node.js avec Cheerio pour le backend. Il s'agit d'un projet fantastique pour les développeurs Web qui souhaitent explorer le web scraping tout en travaillant avec des outils modernes et efficaces comme Vite et TypeScript.

Ce que vous apprendrez :

• Mise en place d'un projet Vite.js React avec TypeScript
• Créer un serveur Node.js avec Express
• Utiliser Axios et Cheerio pour le web scraping
• Créer une application full-stack dans un seul projet cohérent

1. Monter votre projet

Nous allons commencer par mettre en place la structure du projet. Dans ce didacticiel, le frontend et le backend seront hébergés dans le même répertoire de projet. Cette configuration facilite le développement et maintient votre projet organisé.

Commencez par créer le projet ReactJS avec ViteJS et utilisez le modèle Typescript

Création du frontend React avec Vite.js

Ensuite, utilisez Vite pour échafauder l'interface React avec TypeScript :

pnpm create vite@latest

Cette commande configure un nouveau projet React dans un répertoire de votre projet, en utilisant
TypeScript. Accédez au dossier votre projet et installez les dépendances :

<span>cd your-project<br>pnpm install</span>

2. Configuration du serveur Node.js

Maintenant que le frontend est prêt, passons à la création d'un serveur Node.js. Commencez par créer un répertoire de serveur et initialiser un projet Node.js :

<span>cd ..<br>mkdir server<br>cd server<br>pnpm init</span>

Vous aurez besoin d'Express pour le serveur, d'Axios pour effectuer des requêtes HTTP
, de Cheerio pour analyser le HTML, d'un body-parser pour récupérer le corps JSON à partir de
requête et de cors pour activer CORS pour l'API :

npm install express axios cheerio <span>body-parser cors</span>

3. Création de l'API Web Scraping

Une fois le backend configuré, nous pouvons créer un point de terminaison d'API qui accepte une URL, récupère son contenu et extrait les métadonnées clés telles que le titre, la description et l'image.

Voici la structure de base du serveur dans index.ts :

<span>// index.js<br><br>const express = require("express");<br>const bodyParser = require("body-parser");<br>const cors = require("cors");<br><br>const { getUrlPreview } = require("./url.controller");<br><br>const app = express();<br>const PORT = process.env.SERVER_PORT || 5005;<br><br>app.use(bodyParser.json());<br>app.use(cors());<br><br>app.get("/health", (<span>req, res) =></span> {<br>  return res.status(200).json({ status: "Server Running" });<br>});<br>app.post("/preview", getUrlPreview);<br><br>app.listen(PORT, () => {<br>  console.log("Server is running: %s", PORT);<br>});</span>

<span>// url.controller.js<br><br>const axios = require("axios");<br>const cheerio = require("cheerio");<br>const { object, string, ValidationError } = require("yup");<br><br>const schema = object({<br>  url: string().url().required(),<br>});<br><br>const getUrlPreview = async (req, res) => {<br>  try {<br>    const value = await schema.validate(req.body);<br><br>    const { data } = await axios.get(value.url);<br>    const $ = cheerio.load(data);<br><br>    const title =<br>      $('meta[property="og:title"]').attr("content") || $("title").text();<br>    const description =<br>      $('meta[property="og:description"]').attr("content") ||<br>      $('meta[property="description"]').attr("content");<br>    const image =<br>      $('meta[property="og:image"]').attr("content") ||<br>      $("img").first().attr("src");<br><br>    const previewData = {<br>      title: title || "No title available",<br>      description: description || "No description available",<br>      image: image || "No image available",<br>    };<br><br>    return res.status(200).json(previewData);<br>  } catch (err) {<br>    if (err instanceof ValidationError) {<br>      return res.status(422).send(err.message);<br>    }<br><br>    console.log(err);<br><br>    return res.status(500).send("Something went wrong!");<br>  }<br>};<br><br>module.exports = {<br>  getUrlPreview,<br>};</span>

Ce code configure un simple serveur Express qui écoute les requêtes POST dans /api/preview. Lorsqu'une requête est effectuée avec une URL, le serveur récupère le contenu HTML de cette URL à l'aide d'Axios et l'analyse avec Cheerio. Les métadonnées sont ensuite extraites et renvoyées au client.

4. Création du composant d'aperçu du lien

Dans l'application React, créez un composant qui prendra une URL en entrée et affichera l'aperçu récupéré depuis le backend.

Voici comment implémenter le composant App pour gérer le générateur d'aperçu de lien :

pnpm create vite@latest

<span>cd your-project<br>pnpm install</span>

Ce composant permet aux utilisateurs de saisir une URL, qui est ensuite envoyée au backend pour récupérer et afficher l'aperçu du lien.

5. Exécuter l'application

Enfin, pour exécuter l'application, vous devez démarrer les serveurs frontend et backend :

Démarrez le serveur Node.js :

<span>cd ..<br>mkdir server<br>cd server<br>pnpm init</span>

Démarrez l'interface Vite React :

npm install express axios cheerio <span>body-parser cors</span>

Accédez à http://localhost:5173 et vous verrez votre application en action, permettant aux utilisateurs de saisir une URL et de générer un aperçu du lien.

Conclusion

Dans ce tutoriel, nous avons combiné la puissance de Vite.js, React, Node.js et Cheerio pour créer une application full-stack capable de faire du web scraping. Que vous cherchiez à créer un projet personnel ou à ajouter une nouvelle compétence à votre portfolio, comprendre comment intégrer le frontend et le backend dans un seul projet est inestimable.

N'oubliez pas que même si le web scraping est un outil puissant, il est essentiel de l'utiliser de manière responsable. Respectez toujours les conditions d’utilisation des sites Web que vous grattez et tenez compte des implications éthiques.

Si vous avez trouvé ce tutoriel utile, n'oubliez pas de vous abonner à ma chaîne pour plus de contenu comme celui-ci, et de laisser un commentaire si vous avez des questions ou des suggestions pour de futurs tutoriels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!