Création d'une application de recherche avec Blazor et Elasticsearch

De la recherche vectorielle aux puissantes API REST, Elasticsearch offre aux développeurs la boîte à outils de recherche la plus complète. Explorez nos notebooks d’exemples sur GitHub pour tester de nouveaux cas d’usage. Vous pouvez également démarrer votre essai gratuit ou exécuter Elasticsearch en local dès aujourd’hui.

Dans cet article, vous apprendrez à tirer parti de vos compétences en C# pour créer une application de recherche à l'aide de Blazor et d'Elasticsearch. Nous allons utiliser le client Elasticsearch .NET pour exécuter des requêtes de recherche plein texte, sémantique et hybride.

NOTE Si vous êtes familier avec l'ancienne version du client Elasticsearch C# NEST, lisez cet article de blog sur la dépréciation du client NEST et les nouvelles fonctionnalités. NEST était la génération précédente du client .NET, qui a été remplacée par le client Elastic.Clients.Elasticsearch package

• Qu'est-ce que Blazor ?
• Qu'est-ce que l'ESRE ?
• Configuration d'ELSER
• Indexation des données
• Demande de permis de construire

Qu'est-ce que Blazor ?

Blazor est un framework web open source basé sur HTML, CSS et C# créé par Microsoft pour permettre aux développeurs de créer des applications web qui s'exécutent sur le client ou le serveur. Blazor vous permet également de créer des composants réutilisables pour construire des applications plus rapidement ; il permet aux développeurs de construire la vue HTML et les actions en C# dans le même fichier, ce qui aide à maintenir un code lisible et propre. De plus, avec Blazor Hybrid, vous pouvez créer des applications mobiles natives accédant aux capacités de la plateforme native via le code .NET.

Quelques-unes des caractéristiques qui font de Blazor un framework idéal pour travailler :

• Options de rendu côté serveur et côté client
• Composants réutilisables de l'interface utilisateur
• Mises à jour en temps réel avec SignalR
• Gestion intégrée des états
• Système de routage intégré
• Vérifications solides du typage et de la compilation

Pourquoi Blazor ?

Blazor offre plusieurs avantages par rapport à d'autres cadres et bibliothèques : il permet aux développeurs d'utiliser le langage C# pour le code client et le code serveur, en fournissant un typage fort et une vérification au moment de la compilation, ce qui améliore la fiabilité. Il s'intègre parfaitement à l'écosystème .NET, permettant la réutilisation de bibliothèques et d'outils .NET, et offre un support de débogage robuste.

Qu'est-ce que l'ESRE ?

Elasticsearch Relevance Engine™ (ESRE ) est un ensemble d'outils permettant de créer des applications de recherche utilisant l'apprentissage automatique et l'intelligence artificielle au-dessus du puissant moteur de recherche Elasticsearch.

Pour en savoir plus sur l'ESRE, vous pouvez lire notre article de blog ici.

Configuration d'ELSER

Pour tirer parti des capacités ESRE d'Elastic, nous allons utiliser ELSER comme fournisseur de modèle.

Remarque : pour utiliser les modèles ELSER d'Elasticsearch, vous devez disposer d'une licence Platinum ou Enterprise, et d'un nœud de Machine Lerning (ML) dédié d'une taille minimale de 4 Go. Pour en savoir plus, cliquez ici.

Commencez par créer le point d'arrivée de l'inférence :

Si vous utilisez ELSER pour la première fois, il se peut que vous rencontriez une erreur 502 Bad Gateway lorsque le modèle se charge en arrière-plan. Vous pouvez vérifier l'état du modèle sur Machine Learning > Trained Models dans Kibana. Une fois qu'il est déployé, vous pouvez passer à l'étape suivante.

Indexation des données

Vous pouvez télécharger le jeu de données ici et importer les données à l'aide de Kibana. Pour ce faire, allez sur la page d'accueil et cliquez sur "Upload data". Ensuite, téléchargez le fichier et cliquez sur Import. Enfin, allez dans l'onglet Advanced et collez les mappings suivants :

Nous allons créer un index capable d'exécuter des requêtes sémantiques et en texte intégral. Le type de champ semantic_text se chargera du découpage et de l'intégration des données. Notez que nous indexons longDescription comme semantic_text, vous pouvez utiliser copy_to si vous voulez indexer un champ comme semantic_text et text`.

Construire l'application avec Blazor & Elasticsearch

Clé API

La première chose à faire est de créer une clé API pour authentifier nos requêtes à Elasticsearch. La clé API doit être en lecture seule et n'être autorisée qu'à interroger l'index books-blazor.

Vous verrez quelque chose comme ceci :

Enregistrez la valeur du champ de réponse encoded car vous en aurez besoin ultérieurement. Si vous travaillez sur Elastic Cloud, vous aurez également besoin de votre Cloud ID. (Vous pouvez le trouver ici).

Création du projet Blazor

Commencez par installer Blazor et créez un projet d'exemple en suivant les instructions officielles.

Une fois le projet créé, la structure des dossiers et des fichiers doit ressembler à ceci :

Le modèle d'application comprend Bootstrap v5.1.0 pour le stylisme.

Terminez la configuration du projet en installant le client Elasticsearch .NET :

Une fois cette étape terminée, votre page devrait ressembler à ceci :

Structure des dossiers

Nous allons maintenant organiser nos dossiers comme suit :

Les dossiers sont expliqués :

• Components/Pages/Search.razor : page principale contenant la barre de recherche, les résultats et les filtres.
• Composants/Pages/Search.razor.css : les styles de page.
• Components/Elasticsearch/SearchBar.razor : composant de barre de recherche.
• Components/Elasticsearch/Results.razor : composant de résultats.
• Components/Elasticsearch/Facet.razor : composant de filtres.
• Components/Svg/GlassIcon.razor : icône de recherche.
• Components/_Imports.razor : ce fichier importera tous les composants.
• Models/Book.cs : ce fichier contient le schéma du champ livre.
• Models/Response.cs : ce fichier stocke le schéma de la réponse, y compris les résultats de la recherche, les facettes et le nombre total de résultats.
• Services/ElasticsearchService.cs : Service Elasticsearch. Il gère la connexion et les requêtes à Elasticsearch.

Configuration initiale

Commençons par un peu de nettoyage.

Supprimer les fichiers :

• Composants/Pages/Compteur.razor
• Composants/Pages/Météo.razor
• Composants/Pages/Home.razor
• Components/Layout/NavMenu.razor
• Composants/Layout/NavMenu.razor.css

Vérifiez le fichier /Components/_Imports.razor. Vous devriez avoir les importations suivantes :

Intégrer Elastic dans le projet

Maintenant, importons les composants d'Elasticsearch :

Nous allons supprimer la barre latérale par défaut afin de disposer de plus d'espace pour notre application en la supprimant du fichier /Components/Layout/MainLayout.razor:

Entrons maintenant les informations d'identification Elasticsearch pour les secrets d'utilisateur:

Grâce à cette approche, .Net 8 stocke les données sensibles dans un emplacement distinct, en dehors du dossier du projet, et les rend accessibles à l'aide de l'interface IConfiguration. Ces variables seront disponibles pour tout projet .Net qui utilise les mêmes secrets d'utilisateur.

Ensuite, modifions le fichier Program.cs pour lire les secrets et monter le client Elasticsearch :

Tout d'abord, il faut importer les bibliothèques nécessaires :

• BlazorApp.Services : contient le service Elasticsearch.
• Elastic.Clients.Elasticsearch : importe la bibliothèque .Net 8 du client Elasticsearch.
• Elastic.Transport : importe la bibliothèque de transport Elasticsearch, ce qui nous permet d'utiliser la classe ApiKey pour authentifier nos requêtes.

Deuxièmement, insérez le code suivant avant la ligne var app = builder.Build():

Ce code va lire les informations d'identification Elasticsearch à partir des secrets d'utilisateur et créer une instance de client Elasticsearch.

Après l'initialisation du client ElasticSearch, ajoutez la ligne suivante pour enregistrer le service Elasticsearch :

L'étape suivante consistera à construire la logique de recherche dans le fichier /Services/ElasticsearchService.cs:

Tout d'abord, il faut importer les bibliothèques et les modèles nécessaires :

Ensuite, ajoutez la classe ElasticsearchService, le constructeur et les variables :

Configuration de la recherche

Construisons maintenant notre logique de recherche :

• BuildFilters construira les filtres pour la requête de recherche en utilisant les facettes sélectionnées par l'utilisateur.
• BuildHybridQuery construira une requête de recherche hybride qui combine la recherche plein texte et la recherche sémantique.

Ensuite, ajoutez la méthode de recherche :

• SearchBooksAsync: effectuera la recherche en utilisant la requête hybride et renverra les résultats en incluant les agrégations pour construire les facettes.
• FormatFacets: formatera la réponse des agrégations dans un dictionnaire.
• ConvertFacetDictionary: convertit le dictionnaire de facettes dans un format plus lisible.

L'étape suivante consiste à créer les modèles qui représenteront les données renvoyées dans le site hits de la requête Elasticsearch et qui seront imprimées en tant que résultats dans notre page de recherche.

Nous commençons par créer le fichier /Models/Book.cs et y ajouter ce qui suit :

Ensuite, il faut configurer la réponse Elastic dans le fichier /Models/Response.cs et ajouter ce qui suit :

Configuration d'une interface utilisateur de base

Ensuite, ajoutez le composant SearchBar. Dans le fichier /Components/Elasticsearch/SearchBar.razor, ajoutez ce qui suit :

Ce composant contient une barre de recherche et un bouton pour effectuer la recherche.

Blazor offre une grande flexibilité en permettant de générer du HTML dynamiquement en utilisant du code C# dans le même fichier.

Ensuite, dans le fichier /Components/Elasticsearch/Results.razor, nous construirons le composant de résultats qui affichera les résultats de la recherche :

Enfin, nous devons créer des facettes pour filtrer les résultats de la recherche.

Remarque : les facettes sont des filtres qui permettent aux utilisateurs d'affiner les résultats de leur recherche en fonction d'attributs ou de catégories spécifiques, tels que le type de produit, la fourchette de prix ou la marque. Ces filtres sont généralement présentés sous forme d'options cliquables, souvent sous forme de cases à cocher, afin d'aider les utilisateurs à affiner leur recherche et à trouver plus facilement des résultats pertinents. Dans le contexte d'Elasticsearch, les facettes sont créées à l'aide d' agrégations.

Nous configurons les facettes en plaçant le code suivant dans le fichier /Components/Elasticsearch/Facet.razor:

Ce composant lit une agrégation terms sur les champs author, categories et status, puis produit une liste de filtres à renvoyer à Elasticsearch.

Mettons tout cela bout à bout.

Dans le fichier /Components/Pages/Search.razor:

Notre page fonctionne !

Comme vous pouvez le constater, la page est fonctionnelle mais manque de style. Ajoutons quelques feuilles de style CSS pour le rendre plus organisé et plus réactif.

Commençons par remplacer les styles de présentation. Dans le fichier Components/Layout/MainLayout.razor.css:

Ajoutez les styles pour la page de recherche dans le fichier Components/Pages/Search.razor.css:

Notre page commence à s'améliorer :

Mettons-y les dernières touches :

Créez les fichiers suivants :

• Composants/Elasticsearch/Facet.razor.css
• Composants/Elasticsearch/Results.razor.css

Et ajoutez les styles pour Facet.razor.css:

Pour Results.razor.css:

Résultat final :

Pour lancer l'application, vous pouvez utiliser la commande suivante :

dotnet watch

Vous avez réussi ! Vous pouvez désormais rechercher des livres dans votre index Elasticsearch en utilisant la barre de recherche et filtrer les résultats par auteur, catégorie et statut.

Effectuer une recherche plein texte et sémantique

Par défaut, notre application effectuera une recherche hybride utilisant à la fois le texte intégral et la recherche sémantique. Vous pouvez modifier la logique de recherche en créant deux méthodes distinctes, l'une pour le texte intégral et l'autre pour la recherche sémantique, puis en sélectionnant une méthode pour élaborer la requête en fonction des données saisies par l'utilisateur.

Ajoutez les méthodes suivantes à la classe ElasticsearchService dans le fichier /Services/ElasticsearchService.cs:

Ces deux méthodes fonctionnent de manière similaire à la méthode BuildHybridQuery, mais elles n'effectuent qu'une recherche plein texte ou sémantique.

Vous pouvez modifier la méthode SearchBooksAsync pour utiliser la méthode de recherche sélectionnée :

Vous pouvez trouver le formulaire complet ici

Conclusion

Blazor est un framework efficace qui vous permet de construire des applications web en utilisant C#. Elasticsearch est un moteur de recherche puissant qui vous permet de créer des applications de recherche. En combinant les deux, vous pouvez facilement créer des applications de recherche robustes, en tirant parti de la puissance d'ESRE pour créer une expérience de recherche sémantique en peu de temps.

Questions fréquentes