Viens on recode Google avec l'API de Wikipédia

Coder un Moteur de Recherche avec l'API Wikipédia, HTML, CSS et JavaScript

On a tous un jour rêvé de construire notre propre Google. Une page blanche, une barre de recherche, et derrière, la promesse d'accéder à la connaissance universelle. Si créer un index complet du web est une tâche herculéenne réservée à quelques géants, recréer l'expérience d'un moteur de recherche, son interface et sa réactivité, est un projet incroyablement amusant et à la portée de tout développeur web curieux.

Aujourd'hui, on ne va pas juste créer une page web. On va construire une porte d'entrée vers la plus grande encyclopédie du monde. Nous allons coder, de A à Z, un moteur de recherche élégant, inspiré de l'interface minimaliste de Google, mais alimenté par la richesse infinie de l'API de Wikipédia. Nous utiliserons uniquement la sainte trinité du front-end : HTML pour la structure, CSS pour le style, et JavaScript pour donner vie à notre projet. Au programme : une barre de recherche intelligente avec auto-complétion, un affichage dynamique des résultats, et une interface propre et réactive. C'est le projet parfait pour maîtriser les appels API et la manipulation du DOM.

Le plan avant la conception

Un bon moteur de recherche, même simple, est composé de plusieurs pièces qui doivent s'emboîter parfaitement. Voici notre feuille de route :

La Façade (HTML) : On va créer la structure de base : un titre stylisé, un champ de saisie pour la recherche, et un conteneur qui accueillera nos résultats.
L'Esthétique (CSS) : On s'inspirera de la palette de couleurs de Google pour créer une interface familière et épurée. On soignera les détails comme les ombres, les transitions et le placement des éléments.
Le Cerveau (JavaScript) : C'est là que toute la magie opère.
- Écouter l'utilisateur : On détectera chaque touche frappée dans la barre de recherche.
- Dialoguer avec Wikipédia : À chaque frappe, on enverra une requête à l'API de Wikipédia pour obtenir des suggestions d'articles (l'auto-complétion).
- Afficher les Suggestions : On créera dynamiquement une liste de suggestions sous la barre de recherche.
- Lancer la Recherche complète : Quand l'utilisateur appuie sur "Entrée" ou valide sa recherche, on enverra une nouvelle requête pour obtenir les résultats complets.
- Construire la page de résultats : On effacera les suggestions et on construira dynamiquement la liste des résultats, avec titre, extrait et un lien vers l'article complet.

Étape 1 : La Structure HTML

Commençons par le commencement. Notre fichier index.html est simple et sémantique. Il contient un conteneur principal, un titre h1 qui imitera le logo de Google, un formulaire de recherche, et un conteneur vide div qui sera rempli par JavaScript.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WikiSearch - Moteur de Recherche</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1 class="title">
            <span style="color: #4285F4;">W</span>
            <span style="color: #DB4437;">i</span>
            <span style="color: #F4B400;">k</span>
            <span style="color: #4285F4;">i</span>
            <span style="color: #0F9D58;">S</span>
            <span style="color: #DB4437;">e</span>
            <span style="color: #F4B400;">a</span>
            <span style="color: #4285F4;">r</span>
            <span style="color: #0F9D58;">c</span>
            <span style="color: #DB4437;">h</span>
        </h1>

        <form id="search-form" class="search-form">
            <input type="text" id="search-input" class="search-input" placeholder="Recherchez sur Wikipédia..." autocomplete="off">
            <div id="suggestions-container" class="suggestions-container"></div>
        </form>

        <div id="results-container" class="results-container"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Étape 2 : Le Style CSS - Donner une Identité Visuelle

Maintenant, habillons notre page. Ce CSS va centrer les éléments, styliser la barre de recherche pour qu'elle ressemble à celle de Google (avec des bords arrondis et une ombre subtile), et préparer les styles pour nos résultats et suggestions qui seront générés plus tard.

/* style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    margin: 0;
    padding-top: 15vh;
}

.container {
    width: 100%;
    max-width: 600px;
    text-align: center;
}

.title {
    font-size: 6em;
    font-weight: 500;
    margin-bottom: 30px;
}

.search-form {
    position: relative;
}

.search-input {
    width: 100%;
    padding: 15px 20px;
    font-size: 1.2em;
    border: 1px solid #dfe1e5;
    border-radius: 24px;
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
    outline: none;
    box-sizing: border-box;
}

.search-input:hover, .search-input:focus {
    border-color: #d2d3d6;
}

.suggestions-container {
    position: absolute;
    width: 100%;
    background: white;
    border: 1px solid #dfe1e5;
    border-top: none;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 4px 6px rgba(32, 33, 36, 0.28);
    text-align: left;
    max-height: 300px;
    overflow-y: auto;
}

.suggestion-item {
    padding: 10px 20px;
    cursor: pointer;
}

.suggestion-item:hover {
    background-color: #eee;
}

.results-container {
    margin-top: 40px;
    text-align: left;
}

.result-item {
    margin-bottom: 25px;
}

.result-item a {
    text-decoration: none;
    color: #1a0dab;
    font-size: 1.4em;
}

.result-item a:hover {
    text-decoration: underline;
}

.result-item .snippet {
    color: #4d5156;
    font-size: 1em;
    line-height: 1.5;
}

Étape 3 : JavaScript - Le cerveau qui connecte Tout

C'est le moment de vérité. Dans notre fichier script.js, nous allons orchestrer toute la logique.

Partie 1 : Initialisation et Écouteurs d'Événements

On commence par récupérer nos éléments du DOM et on met en place les écouteurs d'événements qui déclencheront nos fonctions : un sur l'input pour l'auto-complétion, et un sur le formulaire pour la recherche complète.

const searchInput = document.getElementById('search-input');
const suggestionsContainer = document.getElementById('suggestions-container');
const searchForm = document.getElementById('search-form');
const resultsContainer = document.getElementById('results-container');

// Écouteur pour l'auto-complétion
searchInput.addEventListener('input', () => {
    const query = searchInput.value;
    if (query.length > 2) {
        getSuggestions(query);
    } else {
        suggestionsContainer.innerHTML = '';
        suggestionsContainer.style.display = 'none';
    }
});

// Écouteur pour la recherche complète
searchForm.addEventListener('submit', (event) => {
    event.preventDefault(); // Empêche le rechargement de la page
    const query = searchInput.value;
    if (query) {
        getResults(query);
        suggestionsContainer.innerHTML = '';
        suggestionsContainer.style.display = 'none';
    }
});

Partie 2 : L'Auto-complétion - Dialoguer avec Wikipédia

Ici, on crée la fonction getSuggestions qui va appeler l'API de Wikipédia. On utilise l'action opensearch qui est parfaite pour obtenir une liste de suggestions. L'API de Wikipédia est un peu particulière, elle nécessite des paramètres spécifiques et l'utilisation de JSONP pour contourner les problèmes de CORS.

async function getSuggestions(query) {
    const url = `https://fr.wikipedia.org/w/api.php?action=opensearch&search=${encodeURIComponent(query)}&limit=5&namespace=0&format=json&origin=*`;

    try {
        const response = await fetch(url);
        const data = await response.json();
        
        const suggestions = data[1];
        displaySuggestions(suggestions);
    } catch (error) {
        console.error("Erreur lors de la récupération des suggestions:", error);
    }
}

function displaySuggestions(suggestions) {
    if (suggestions.length === 0) {
        suggestionsContainer.style.display = 'none';
        return;
    }

    suggestionsContainer.innerHTML = '';
    suggestions.forEach(suggestion => {
        const div = document.createElement('div');
        div.className = 'suggestion-item';
        div.textContent = suggestion;
        div.addEventListener('click', () => {
            searchInput.value = suggestion;
            getResults(suggestion);
            suggestionsContainer.innerHTML = '';
            suggestionsContainer.style.display = 'none';
        });
        suggestionsContainer.appendChild(div);
    });
    suggestionsContainer.style.display = 'block';
}

Partie 3 : La Recherche Complète et l'Affichage des Résultats

Enfin, la fonction getResults. Elle utilise l'action query avec list=search pour obtenir une liste de résultats plus complète, incluant un "snippet" (extrait). On construit ensuite dynamiquement le HTML pour chaque résultat et on l'injecte dans notre conteneur.

async function getResults(query) {
    const url = `https://fr.wikipedia.org/w/api.php?action=query&list=search&srsearch=${encodeURIComponent(query)}&format=json&origin=*`;

    try {
        resultsContainer.innerHTML = '<p>Chargement...</p>';
        const response = await fetch(url);
        const data = await response.json();

        const results = data.query.search;
        displayResults(results);
    } catch (error) {
        console.error("Erreur lors de la recherche:", error);
        resultsContainer.innerHTML = '<p>Une erreur est survenue.</p>';
    }
}

function displayResults(results) {
    resultsContainer.innerHTML = '';

    if (results.length === 0) {
        resultsContainer.innerHTML = '<p>Aucun résultat trouvé.</p>';
        return;
    }

    results.forEach(result => {
        const resultDiv = document.createElement('div');
        resultDiv.className = 'result-item';
        
        const titleLink = document.createElement('a');
        titleLink.href = `https://en.wikipedia.org/?curid=${result.pageid}`;
        titleLink.target = '_blank';
        titleLink.textContent = result.title;
        
        const snippetDiv = document.createElement('div');
        snippetDiv.className = 'snippet';
        snippetDiv.innerHTML = result.snippet + '...'; // innerHTML pour interpréter les balises

        resultDiv.appendChild(titleLink);
        resultDiv.appendChild(snippetDiv);
        resultsContainer.appendChild(resultDiv);
    });
}

Conclusion

Félicitations ! En assemblant ces trois fichiers, vous avez créé bien plus qu'une simple page web. Vous avez construit une application interactive qui se connecte à l'une des plus grandes sources de savoir humain et la présente de manière élégante et intuitive.

Ce projet est une excellente base. Vous pouvez maintenant l'améliorer : ajouter une pagination, gérer plus de langues, ou même intégrer d'autres API pour créer un "méta-moteur" de recherche. Vous avez maintenant les clés en main. Le web est votre terrain de jeu.

Coding Team

Viens on recode Google avec l'API de Wikipédia

Le plan avant la conception

Étape 1 : La Structure HTML

Étape 2 : Le Style CSS - Donner une Identité Visuelle

Étape 3 : JavaScript - Le cerveau qui connecte Tout

Partie 1 : Initialisation et Écouteurs d'Événements

Partie 2 : L'Auto-complétion - Dialoguer avec Wikipédia

Partie 3 : La Recherche Complète et l'Affichage des Résultats

Conclusion

3 تعليقات

Un guide complet et pas-à-pas pour coder votre premier petit LLM (mini-GPT) en Python

Oubliez Ngrok ! Apprenez à exposer votre serveur local (localhost) au monde entier directement depuis VsCode en quelques clics

HTML Canvas + JavaScript : Fabriquez un curseur reptile qui bouge et réagit

Viens on recode le jeu Crossy Road en 3D avec JavaScript et Three.js

Viens, on recrée le jeu Mario en JavaScript de A à Z

Viens, on code un détecteur de visages avec JavaScript