Intégration de la bibliothèque sans tête Coveo avec le framework SAPUI5 : configuration de l’environnement de développement

Dans ce blog, nous explorerons comment intégrer Coveo Headless, une puissante plateforme de recherche et de pertinence, avec OpenUI5, un framework d’interface utilisateur populaire pour la création d’applications Web. Alors que la fonctionnalité de recherche devient de plus en plus cruciale pour les applications modernes, cette intégration nous permettra de créer une expérience de recherche avancée au sein des projets OpenUI5.

Introduction

Coveo Headless est une plateforme de recherche et de pertinence qui offre un ensemble d’API pour créer des expériences de recherche personnalisées. Il exploite l’apprentissage automatique et l’IA pour fournir des résultats personnalisés, ce qui en fait un outil puissant pour améliorer les fonctionnalités de recherche.

OpenUI5 est un framework d’interface utilisateur basé sur JavaScript qui facilite le développement d’applications Web réactives. Il fournit une collection de bibliothèques et d’outils permettant de créer des interfaces utilisateur cohérentes et visuellement attrayantes.

En intégrant Coveo Headless à OpenUI5, nous pouvons combiner les forces des capacités de recherche avancées de Coveo avec les composants flexibles de l’interface utilisateur d’OpenUI5, résultant en une expérience de recherche complète et conviviale.

Exigences

Avant de plonger dans le vif du sujet, il est essentiel de vous assurer que vous disposez des prérequis suivants :

• Connaissance de base des composants Coveo et OpenUI5.
• Familiarité avec JavaScript et Node.js.
• Version Node.js >= 18.12.0 installée (vous pouvez utiliser Node Version Manager, NVM, pour cela).

Configuration de l’environnement de développement

Dans cette section, nous vous guiderons tout au long du processus de configuration de votre environnement de développement pour intégrer Coveo Headless à OpenUI5. Cela inclut le clonage d’un exemple de référentiel OpenUI5, la mise à niveau de votre version Node.js, l’installation des dépendances requises, l’ajout de dépendances au package.json fichier et la configuration des cales pour la compatibilité.

Cloner un exemple de référentiel OpenUI5 :

Pour commencer, clonez l’exemple de référentiel d’application OpenUI5 à partir de GitHub.

URL du référentiel : https://github.com/SAP/openui5-sample-app

Cet exemple de référentiel fournit une structure de base pour une application OpenUI5 et servira de base à l’intégration de la bibliothèque Coveo Headless.

Configurations

Étape 01 : Ajoutez des dépendances à package.json :

Ouvrez le package.json fichier dans le répertoire de votre projet. Ajoutez les dépendances suivantes à la section « dépendances » :

"dependencies": {
    "@coveo/headless": "^1.109.0",
    "http-proxy": "^1.18.1",
    "openui5-redux-model": "^0.4.1"
}

Étape-02 : Ajouter une configuration de cale :

Dans ton ui5.yaml fichier de configuration, ajoutez la configuration shim pour le package Coveo Headless. Cette configuration garantit qu’OpenUI5 charge correctement le module Coveo Headless :

---
specVersion: "2.5"
kind: extension
type: project-shim
metadata:
  name: ui5-ts-shim-showcase.thirdparty
shims:
  configurations:
    "@coveo/headless":
      specVersion: "2.5"
      type: module
      metadata:
        name: "@coveo/headless"
      resources:
        configuration:
          paths:
            "/resources/@coveo/headless/": ""

Étape-03 : Installer les dépendances :

Exécutez les commandes suivantes dans le répertoire de votre projet pour installer les dépendances nouvellement ajoutées.

npm install
cd webapp
yarn install

Veuillez noter que l’installation peut prendre un certain temps.

Étape-04 : Configurer Component.js:

Ouvrez votre Component.js fichier situé dans le dossier webapp et ajoutez le code suivant. Il garantit que Coveo Headless est correctement mappé et reconnu comme module par OpenUI5 :

sap.ui.loader.config({
  map: {
    "*": {
      "@coveo/headless": "@coveo/headless/dist/browser/headless"
    }
  },
  shim: {
    "@coveo/headless/": {
      "amd": true,
      "deps": [],
      "exports": "CoveoHeadless"
    }
  }
});

sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/core/ComponentSupport", "@coveo/headless"], function(UIComponent) {
  "use strict";
  return UIComponent.extend("sap.ui.demo.todo.Component", {
    metadata: {
      manifest: "json"
    }
  });
});

Démarrez un serveur local et exécutez l’application (http://localhost:8080/index.html).

npm start ou ui5 serve -o index.html

Cette configuration garantit que Coveo Headless est correctement chargé et disponible dans votre projet OpenUI5. Vous pouvez également le vérifier dans la console de votre navigateur, comme indiqué dans la capture d’écran ci-dessous :

Vous pouvez maintenant utiliser la variable CoveoHeadless dans votre projet OpenUI5 pour initialiser le moteur de recherche Coveo et commencer à créer une fonctionnalité de recherche avancée.

Résumé

En effectuant les étapes ci-dessus, vous aurez préparé avec succès votre environnement de développement pour intégrer Coveo Headless à OpenUI5. L’exemple d’application OpenUI5 et les dépendances ajoutées serviront de base à la création de votre fonctionnalité de recherche améliorée.

Ressources additionnelles