Créez votre propre moteur de recherche pour vos recettes de cuisine en HTML !

[dysorthographie]

Bonjour,
Le projet ProjetRechercheRecettes est un moteur de recherche léger permettant de retrouver facilement des recettes de cuisine au sein d'un ensemble de fichiers HTML. Conçu pour être déployé en local, il utilise Node.js pour générer un index de recherche basé sur les titres et descriptions de chaque recette, extraits des balises <title> et <meta name="description">. Grâce à une interface simple en HTML et JavaScript, l’utilisateur peut entrer des mots-clés pour trouver les recettes correspondantes, qui s'affichent ensuite sous forme de liens dans le navigateur.

Voici un guide détaillé pour mettre en place un projet de recherche sur des fichiers HTML de recettes de cuisine en utilisant Node.js et un serveur local. Nous allons aborder le processus d'installation de Node.js, la création de scripts start.bat et stop.bat pour démarrer et arrêter le serveur, ainsi que le fonctionnement du moteur de recherche.

---

1. Installation de Node.js​

1. Télécharger Node.js :
   Rendez-vous sur le site https://nodejs.org/fr et téléchargez la version LTS (Long-Term Support). Cette version est recommandée pour la stabilité.
2. Installation de Node.js :
   Une fois le fichier téléchargé, exécutez-le et suivez les instructions d'installation. Node.js installera également npm (Node Package Manager), un outil essentiel pour installer et gérer les bibliothèques JavaScript.
3. Vérifier l’installation :
   Ouvrez un terminal (ou Invite de commandes) et exécutez les commandes suivantes pour vérifier que Node.js et npm sont bien installés :
   bash
   
   node -v
   npm -v
   Ces commandes devraient afficher les versions de Node.js et de npm.

2. Préparation du projet​

1. Créer le répertoire de projet :
   Créez un dossier pour votre projet, par exemple ProjetRechercheRecettes.
2. Créer le répertoire des pages HTML :
   À l’intérieur de ProjetRechercheRecettes, créez un sous-dossier appelé pages_html. Ce dossier contiendra les fichiers HTML des recettes.
3. Fichier JSON pour l’index de recherche :
   Nous allons créer un fichier searchIndex.json dans le dossier ProjetRechercheRecettes pour stocker les informations de recherche, comme les titres et descriptions des recettes.

3. Script pour générer l’index de recherche​

Créez un fichier appelé generateIndex.js dans votre dossier ProjetRechercheRecettes pour extraire les titres et descriptions des fichiers HTML des recettes et générer un index dans searchIndex.json.

Voici un exemple de code pour generateIndex.js :

javascript

const fs = require('fs');
const path = require('path');
const jsdom = require('jsdom');
const { JSDOM } = jsdom;

const directoryPath = path.join(__dirname, 'pages_html');
const outputFilePath = path.join(__dirname, 'searchIndex.json');

let pages = [];

fs.readdir(directoryPath, (err, files) => {
if (err) {
return console.error("Erreur lors de la lecture du dossier :", err);
}

files.forEach(file => {
if (file.endsWith('.html') || file.endsWith('.htm')) {
const filePath = path.join(directoryPath, file);
const content = fs.readFileSync(filePath, 'utf-8');

const dom = new JSDOM(content);
const title = dom.window.document.querySelector("title")?.textContent || "Sans titre";
const description = dom.window.document.querySelector("meta[name='description']")?.content || "Pas de description disponible.";

const url = `pages_html/${file.replace(/\s+/g, '_').toLowerCase()}`;

pages.push({
title: title,
description: description,
url: url
});
}
});

fs.writeFileSync(outputFilePath, JSON.stringify(pages, null, 4), 'utf-8');
console.log("Index de recherche généré dans", outputFilePath);
});

Ce script va scanner tous les fichiers HTML dans pages_html, extraire le titre et la description, puis générer un index JSON pour le moteur de recherche.

4. Serveur local pour héberger les pages​

Pour servir les fichiers HTML localement, nous allons installer le package http-server et créer un fichier batch pour lancer le serveur.

1. Installer http-server :
   Exécutez la commande suivante pour installer http-server globalement :
   bash
   
   npm install -g http-server
2. Script start.bat pour démarrer le serveur local :
   Créez un fichier start.bat dans votre dossier ProjetRechercheRecettes avec le contenu suivant :
   batch
   
   @eCHO off
   echo ============================
   echo Démarrage du Serveur Local
   echo ============================
   
   :: Générer l'index de recherche
   echo Génération de l'index...
   node generateIndex.js
   if %errorlevel% neq 0 (
   echo Erreur lors de la génération de l'index.
   exit /b
   )
   
   :: Démarrer le serveur local
   echo Démarrage du serveur local sur http://localhost:8080...
   start http-server -p 8080
   
   echo Serveur démarré.
   start http://localhost:8080/
   Ce script génère l'index de recherche en exécutant generateIndex.js, puis lance le serveur http-server sur le port 8080.
3. Script stop.bat pour arrêter le serveur :
   Créez également un fichier stop.bat pour arrêter le serveur :
   batch
   
   @eCHO off
   echo ============================
   echo Arrêt du Serveur Local
   echo ============================
   
   :: Arrête les processus http-server
   taskkill /F /IM http-server.exe /T
   
   echo Serveur arrêté.
   Ce script arrête tous les processus http-server.

5. Interface de recherche​

Créez un fichier index.html avec une interface de recherche qui permet de rechercher parmi les recettes et afficher les résultats.

Voici un exemple de code pour index.html :

html

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Moteur de Recherche de Recettes</title>
<script defer src="script.js"></script>
</head>
<body>
<h1>Recherche de recettes</h1>
<input type="text" id="searchInput" placeholder="Rechercher...">
<iframe id="resultFrame" name="resultFrame" style="width: 100%; height: 400px; border: 1px solid #ddd;"></iframe>
</body>
</html>

Le fichier script.js associé gérera la recherche en chargeant searchIndex.json et affichera les résultats dans l’iframe resultFrame.

6. Fonctionnement de la recherche​

Créez un fichier script.js pour implémenter la logique de recherche :

javascript

document.getElementById('searchInput').addEventListener('input', async function() {
const query = this.value.toLowerCase();
const recipes = await loadRecipes();
const results = recipes.filter(recipe => recipe.title.toLowerCase().includes(query));

let resultHtml = "<ul>";
if (results.length > 0) {
results.forEach(recipe => {
resultHtml += `<li><a href="${recipe.url}" target="resultFrame">${recipe.title}</a></li>`;
});
} else {
resultHtml += "<li>Aucune recette trouvée.</li>";
}
resultHtml += "</ul>";

const resultFrame = window.parent.document.getElementById('resultFrame');
resultFrame.contentDocument.open();
resultFrame.contentDocument.write(resultHtml);
resultFrame.contentDocument.close();
});

async function loadRecipes() {
try {
const response = await fetch('searchIndex.json');
if (!response.ok) {
throw new Error("Le fichier JSON est introuvable ou une erreur s'est produite.");
}
return await response.json();
} catch (error) {
console.error("Erreur lors du chargement des recettes:", error);
return [];
}
}

7. Utilisation​

• Pour démarrer le serveur : Double-cliquez sur start.bat. Cela générera l'index de recherche, démarrera le serveur, et ouvrira la page de recherche dans votre navigateur.
• Pour arrêter le serveur : Double-cliquez sur stop.bat.

---

Cette configuration vous permettra d'effectuer une recherche sur vos fichiers HTML de recettes et de voir les résultats instantanément via une interface simple !

Balises <title> et <meta>​

Les balises <title> et <meta> jouent un rôle essentiel dans l'indexation des pages HTML pour votre moteur de recherche de recettes. Voici leur fonction dans le projet et la manière dont le script les utilise.

Rôle des balises <title> et <meta>​

1. Balise <title> :
   Elle définit le titre de la page qui apparaît dans l’onglet du navigateur et fournit un résumé court de la recette. Le script de génération d’index utilise cette balise pour donner un nom significatif à chaque recette dans les résultats de recherche.
   html
   
   <title>Recette de Gâteau au Chocolat</title>
2. Balise <meta name="description"> :
   Elle est utilisée pour décrire brièvement le contenu de la page. La description est souvent utilisée par les moteurs de recherche pour donner un aperçu de la page. Dans ce projet, cette balise est utilisée pour fournir un résumé de chaque recette sous son titre dans les résultats.
   html
   
   <meta name="description" content="Une recette facile de gâteau au chocolat, idéale pour les amateurs de chocolat.">

Utilisation des balises dans generateIndex.js​

Le fichier generateIndex.js extrait les informations des balises <title> et <meta name="description"> pour chaque page HTML, puis les stocke dans searchIndex.json. Voici un rappel de la façon dont le script utilise ces balises :

javascript

const dom = new JSDOM(content);
const title = dom.window.document.querySelector("title")?.textContent || "Sans titre";
const description = dom.window.document.querySelector("meta[name='description']")?.content || "Pas de description disponible.";

• Extraction du <title> : querySelector("title") accède au titre de chaque page HTML. S'il est manquant, le script utilise "Sans titre" par défaut.
• Extraction de la description : querySelector("meta[name='description']") récupère le contenu de la balise <meta name="description">. Si la balise est absente, une description par défaut ("Pas de description disponible.") est utilisée.

Ces données sont ensuite enregistrées dans searchIndex.json pour être affichées dans l'interface de recherche. Par exemple :

json

{
"title": "Recette de Gâteau au Chocolat",
"description": "Une recette facile de gâteau au chocolat, idéale pour les amateurs de chocolat.",
"url": "pages_html/gateau_au_chocolat.html"
}

Résultat dans l'interface de recherche​

Lorsqu'une recherche est effectuée, les titres et descriptions s’affichent pour donner à l'utilisateur un aperçu de chaque recette. Les liens mènent aux pages HTML des recettes.

Exemple d'une page HTML de recette​

Assurez-vous que chaque fichier de recette dans pages_html contient ces balises pour une meilleure indexation. Voici un exemple complet :

html

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Recette de Gâteau au Chocolat</title>
<meta name="description" content="Une recette facile de gâteau au chocolat, idéale pour les amateurs de chocolat.">
</head>
<body>
<h1>Gâteau au Chocolat</h1>
<p>Ingrédients, étapes de préparation, et plus encore...</p>
</body>
</html>

Résumé​

L’ajout des balises <title> et <meta name="description"> dans chaque fichier HTML permet d'enrichir l'index de recherche, de fournir un contexte clair et précis pour chaque recette, et d’offrir une expérience utilisateur agréable dans l’interface de recherche.

bac à sable​

Pour finaliser votre projet de moteur de recherche de recettes, vous avez la possibilité de fournir un bac à sable dans ce lien . Ce bac à sable est une version complète et isolée de votre projet qui permet aux utilisateurs de tester le moteur de recherche de recettes sans affecter leur propre environnement de développement.

Qu'est-ce qu'un bac à sable ?​

Un bac à sable en développement logiciel est un environnement sécurisé et isolé, où un projet peut être testé, manipulé ou exploré sans risque pour les autres programmes ou fichiers. Cela signifie que tout le monde peut tester le projet sans modifier leur système. C'est particulièrement utile pour éviter d'installer des dépendances ou faire des configurations complexes sur l’ordinateur de l’utilisateur.

Contenu du bac à sable​

Dans le cas de ce projet de moteur de recherche de recettes, le bac à sable pourrait inclure :

1. Les fichiers HTML de recettes : Dans un dossier pages_html, contenant les pages de recettes.
2. Les scripts nécessaires:
   • generateIndex.js pour créer l'index de recherche à partir des fichiers de recettes HTML.
   • script.js pour gérer l'interface de recherche dans le navigateur.
3. Serveur local simple : Pour un accès direct depuis le navigateur.
4. Fichiers batch : Des scripts start.bat et stop.bat pour lancer et arrêter le serveur.

Utilisation du bac à sable​

1. Décompression : Les utilisateurs décompressent le fichier ZIP contenant le bac à sable dans un dossier.
2. Installation de Node.js : Le bac à sable fonctionne avec Node.js, donc les utilisateurs doivent s’assurer que Node.js est installé (téléchargeable depuis Node.js).
3. Exécution des scripts: Une fois dans le dossier du bac à sable :
   • Ils exécutent start.bat pour générer l'index et lancer le serveur local.
   • stop.bat permet de fermer le serveur.

Exemple de structure du bac à sable​

ProjetRechercheRecettes/
├── pages_html/
│ ├── recette1.html
│ ├── recette2.html
│ └── ...
│
├── generateIndex.js
├── script.js
├── searchIndex.json // Généré automatiquement par generateIndex.js
├── start.bat
└── stop.bat

Avec ce bac à sable, les utilisateurs peuvent tester le moteur de recherche de recettes sans configuration supplémentaire. Ils peuvent ajouter leurs propres fichiers HTML de recettes dans le dossier pages_html, générer l'index, et voir les résultats de recherche s’afficher dans le navigateur.

Ce guide de configuration garantit que les utilisateurs auront un environnement de test complet, simple à installer, et sans risques pour leur système.

Éditeur HTML:​

Pour travailler facilement avec vos fichiers HTML de recettes, voici un lien vers un mini éditeur HTML qui vous permet de modifier et de prévisualiser rapidement le contenu HTML

HtmlForNull

Cet éditeur est simple et vous permet de visualiser en temps réel les modifications faites dans le code HTML. Vous pourrez tester et ajuster les balises <title> et <meta name="description"> de chaque page de recette afin qu'elles soient bien indexées pour le moteur de recherche de votre projet ProjetRechercheRecettes.

Notez que le nom des fichiers.html ne devront pas contenir d'espaces ; on préférera '_' touche [8] en minuscule.