Lancez des recherches Google en un clic avec JavaScript !

Frontend Dev Développement web Tips
Débutant tutoriel
Tim
November 25th, 2024
image description

Sur l'un de mes sites, où je répertorie plus de 40 000 mots en anglais comme "Apple", "Beach" ou "Kitchen", j'ai vite réalisé qu'associer une image à chaque mot serait un véritable casse-tête. Plutôt que de me lancer dans cette tâche titanesque, j'ai choisi une solution simple et efficace : permettre aux utilisateurs d'ouvrir directement Google Images pour chaque mot. Cette approche allège mon travail tout en enrichissant l'expérience visuelle des utilisateurs.

Dans cet article, je vais vous montrer comment créer une fonction JavaScript simple qui ouvre une nouvelle fenêtre de recherche Google. Que vous souhaitiez effectuer une recherche classique ou trouver des images spécifiques, cette fonction vous permettra d'intégrer facilement des fonctionnalités de recherche dans vos applications web, sans tracas.

Si la gestion d'une galerie d'images n'est pas votre priorité, diriger les utilisateurs vers Google dans un nouvel onglet est une solution rapide et pratique, offrant un accès immédiat à des résultats visuels pertinents, sans alourdir votre interface.

Le Code JavaScript

javascript 
function openGoogleSearch(keyword, searchType = 'image') {
  let url;

  // Si la recherche est de type image
  if (searchType === 'image') {
    url = `https://www.google.com/search?tbm=isch&q=${encodeURIComponent(keyword)}`;
  } 
  // Si la recherche est de type web
  else if (searchType === 'web') {
    url = `https://www.google.com/search?q=${encodeURIComponent(keyword)}`;
  } 
  // Sinon, par défaut, une recherche web est effectuée
  else {
    console.warn('Type de recherche inconnu. Recherche web par défaut.');
    url = `https://www.google.com/search?q=${encodeURIComponent(keyword)}`;
  }

  // Ouvre la nouvelle fenêtre de recherche Google
  window.open(url, '_blank');
}

Explication du Code

  • Fonction openGoogleSearch() : Cette fonction prend en entrée un mot-clé de recherche (keyword) et un type de recherche optionnel (searchType). Le type de recherche par défaut est défini à 'image'.

  • Paramètres keyword et searchType :

    • keyword : La chaîne de caractères à rechercher.

    • searchType : Définit le type de recherche, soit 'image' pour une recherche d’images, soit 'web' pour une recherche web.

  • Construction de l’URL :

    • L’URL de recherche Google est construite en fonction du type de recherche sélectionné.

    • Pour une recherche d’images, l’URL commence par https://www.google.com/search?tbm=isch&q=, suivie du mot-clé encodé.

    • Pour une recherche web, l’URL commence par https://www.google.com/search?q=, suivie du mot-clé encodé.

  • encodeURIComponent() : Cette fonction est utilisée pour encoder correctement le mot-clé de recherche dans l’URL, afin d’éviter les problèmes d’espaces ou de caractères spéciaux.

  • window.open() : Cette fonction ouvre une nouvelle fenêtre de navigateur et charge l’URL de recherche Google définie. Le paramètre '_blank' indique que la nouvelle fenêtre doit être ouverte dans un nouvel onglet ou une nouvelle fenêtre.

  • Gestion des erreurs : Si le type de recherche n’est pas reconnu, un message d’avertissement est affiché dans la console, et une recherche web par défaut est effectuée.

Utilisation concrète

Cas d’utilisation 3 : Intégrer la recherche de plantes

Imaginons que vous développiez une application web dédiée aux passionnés de jardinage. Cette application pourrait aider les utilisateurs à identifier des plantes spécifiques et à fournir des conseils d'entretien. En intégrant une fonction de recherche, vous permettez aux utilisateurs d’ouvrir Google pour trouver des informations supplémentaires sur les plantes qu'ils souhaitent cultiver.

javascript 
// Exemple d'application web avec une liste de plantes
let plantes = [
  { nom: "Rosier", description: "Plante à fleurs, symbole de l'amour." },
  { nom: "Lavande", description: "Plante aromatique avec un parfum agréable." },
  { nom: "Basilic", description: "Herbe culinaire utilisée en cuisine." },
  // ...
];

// Fonction de recherche de plantes
function searchPlantInfo(plantName) {
  // Ouvre Google pour rechercher des informations sur la plante spécifiée
  openGoogleSearch(`${plantName} plant care`);
}

// Bouton pour rechercher des informations sur les plantes
let plantButton = document.getElementById("plant-button");
plantButton.addEventListener("click", () => {
  let selectedPlant = document.getElementById("plant-input").value;
  searchPlantInfo(selectedPlant);
});

Dans cet exemple, lorsque l'utilisateur saisit le nom d'une plante et clique sur le bouton, la fonction searchPlantInfo() s'active et ouvre Google pour rechercher des conseils d'entretien pour la plante choisie. Cela donne aux utilisateurs un accès immédiat à des ressources précieuses, les aidant ainsi à cultiver et à prendre soin de leurs plantes.

Cas d’utilisation 2 : Intégrer la recherche d'images dans une application de vocabulaire

Imaginons que vous développiez une application web dédiée à l'apprentissage du vocabulaire anglais. Vous pouvez utiliser la fonction openGoogleSearch() pour permettre aux utilisateurs de rechercher des images liées à chaque mot, enrichissant ainsi leur expérience d'apprentissage.

javascript 
// Exemple d'application web avec une liste de mots en anglais
let mots = [
  { mot: "Apple", definition: "A fruit that is typically red, green, or yellow." },
  { mot: "Beach", definition: "A pebbly or sandy shore by a body of water." },
  { mot: "Kitchen", definition: "A room where food is prepared and cooked." },
  // ...
];

// Fonction de recherche d'images
function searchImagesForWord(word) {
  // Ouvre Google Images pour le mot spécifié
  openGoogleSearch(word);
}

// Bouton pour rechercher des images
let imageButton = document.getElementById("image-button");
imageButton.addEventListener("click", () => {
  let selectedWord = document.getElementById("word-input").value;
  searchImagesForWord(selectedWord);
});

Inconvénients de la Redirection vers Google Images

Bien que rediriger les utilisateurs vers Google Images pour des recherches d'images puisse sembler être une solution rapide et pratique, cette approche présente plusieurs inconvénients à considérer :

  1. Perte de Contrôle sur l'Expérience Utilisateur
    En dirigeant vos utilisateurs vers une autre plateforme, vous perdez le contrôle sur l'expérience qu'ils vivent. Ils peuvent se retrouver confrontés à des résultats non pertinents ou à des images de qualité variable. Cela peut diminuer la satisfaction de l'utilisateur. Cependant, cela permet aussi de gagner du temps de développement en évitant de gérer une galerie d'images complexe.

  2. Risque de Distraction
    Lorsque les utilisateurs sont redirigés vers Google, ils peuvent aisément se laisser distraire par d'autres résultats de recherche. Cette distraction peut entraîner une diminution de l'engagement avec votre application. Toutefois, en offrant cette option, vous permettez aux utilisateurs d'accéder rapidement à une multitude d'images qu'ils n'auraient peut-être pas trouvées sur votre site.

  3. Référencement et Trafic
    En redirigeant les utilisateurs vers des sites externes, vous risquez de réduire le trafic sur votre propre site. Avoir un contenu de qualité et pertinent directement sur votre plateforme encourage les utilisateurs à y rester. Cependant, l'intégration de la recherche Google permet de compenser le manque de contenu visuel, tout en préservant la légèreté de votre application.

  4. Valeur Ajoutée
    Proposer des informations directement sur votre site renforce votre autorité et incite les utilisateurs à revenir. Cela dit, offrir un accès immédiat à Google Images peut compléter votre contenu et enrichir l'expérience utilisateur, surtout si votre application ne possède pas d'images associées à chaque mot ou concept.

La Nécessité d'Avoir Ses Propres Informations

Il est donc préférable d'intégrer autant d'informations pertinentes que possible directement dans votre application. Cela peut impliquer la création d'une galerie d'images, l'ajout de descriptions détaillées ou la fourniture de ressources éducatives. En faisant cela, vous améliorez l'expérience utilisateur, maintenez l'engagement et construisez une base de connaissances qui fait autorité dans votre domaine.

Cependant, dans des situations dans lesquelles le contenu visuel est limité, la redirection vers Google Images peut être une solution efficace. Elle offre un accès instantané à des résultats variés et pertinents, tout en vous permettant de vous concentrer sur d'autres aspects essentiels de votre application.

En fin de compte, trouver un équilibre entre fournir un contenu interne de qualité et offrir des solutions externes peut vous aider à créer une expérience utilisateur enrichissante et engageante.

Conclusion

Rediriger les utilisateurs vers Google Images pour des recherches visuelles peut être une solution pratique, surtout lorsque la création d'une galerie d'images est complexe ou chronophage. Bien que cela présente des inconvénients, comme la perte de contrôle sur l'expérience utilisateur, cette approche permet d'enrichir votre application tout en vous concentrant sur d'autres contenus essentiels. En fin de compte, le meilleur équilibre consiste à combiner des informations internes de qualité avec des solutions externes pour offrir une expérience utilisateur optimale.