1 - Vue d’ensemble de l’ajout de la recherche à un site web

Article
11/24/2023

Dans ce tutoriel de Recherche Azure AI, créez une application web qui effectue une recherche dans un catalogue de livres, puis déployez le site web sur une ressource Azure Static Web Apps.

Ce tutoriel s’adresse aux développeurs JavaScript qui souhaitent créer une application cliente frontend qui inclut des interactions de recherche telles que la navigation par facettes, l’autocomplétion et la pagination. Il illustre également la bibliothèque @azure/search-documents dans le Kit de développement logiciel (SDK) Azure pour JavaScript pour les appels à Recherche Azure AI pour l’indexation et l’interrogation de flux de travail sur le back-end.

Que fait l’exemple ?

Cet exemple de site web permet d’accéder à un catalogue de 10 000 livres. Un utilisateur peut effectuer une recherche dans le catalogue en entrant du texte dans la barre de recherche. Quand l’utilisateur entre du texte, le site web utilise la fonctionnalité de suggestion de l’index de recherche pour compléter le texte. Une fois la requête terminée, la liste des livres s’affiche avec une partie des détails. Un utilisateur peut sélectionner un livre pour en voir tous les détails, lesquels sont stockés dans l’index de recherche du livre.

L’expérience de recherche comprend les éléments suivants :

Recherche : fournit des fonctionnalités de recherche pour l’application.
Suggestions : fournit des suggestions au fur et à mesure que l’utilisateur tape dans la barre de recherche.
Facettes et filtres : fournit une structure de navigation par facettes qui filtre par auteur ou par langue.
Résultats paginés – fournit des contrôles de pagination pour faire défiler les résultats.
Recherche de document : recherche un document par ID afin de récupérer tout son contenu pour la page de détails.

Comment l’exemple est-il organisé ?

Cet exemple de code comprend les composants suivants :

App	Objectif	GitHub Référentiel Location
Client	Application React (couche de présentation) pour afficher les livres, avec la recherche. Elle appelle l’application Azure Function.	/search-website-functions-v4/client
Serveur	Application de fonction Azure (couche métier) : appelle l’API Recherche Azure AI à l’aide du Kit de développement logiciel (SDK) JavaScript	/search-website-functions-v4/api
Insertion en bloc	Fichier JavaScript pour créer l’index et y ajouter des documents.	/search-website-functions-v4/bulk-insert

Configurer votre environnement de développement

Installez le logiciel suivant dans votre environnement de développement local.

Node.js LTS
- Sélectionnez le runtime et la version les plus récents dans cette liste des versions de langage prises en charge.
- Si vous avez une autre version de Node.js installée sur votre ordinateur local, envisagez d’utiliser Node Version Manager (nvm) ou un conteneur Docker.
Git
Visual Studio Code, avec les extensions suivantes
- Azure Static Web App
- Utilisez le terminal intégré pour des opérations en ligne de commande.
Facultatif :
- Ce tutoriel n’exécute pas l’API de fonction Azure localement. Si vous envisagez de le faire localement, vous devez installer azure-functions-core-tools globalement avec la commande bash suivante :
```
npm install -g azure-functions-core-tools@4
```

Duplication et clonage de l’exemple de recherche avec git

La duplication de l’exemple de référentiel est essentielle pour pouvoir déployer l’application web statique. L’application web statique détermine les actions de génération et le contenu de déploiement en fonction de l’emplacement de votre duplication (fork) GitHub. L’exécution du code dans l’application Web statique est distante, l’application Web statique lisant le code de votre échantillon dupliqué.

Dans GitHub, dupliquez (fork) l’exemple de référentiel.

Terminez le processus de duplication dans votre navigateur web avec votre compte GitHub. Ce tutoriel utilise votre duplication (fork) dans le cadre du déploiement vers une application web statique Azure.
Sur un terminal bash, téléchargez votre exemple d’application dupliqué sur votre ordinateur local.

Remplacez YOUR-GITHUB-ALIAS par votre alias GitHub.
```
git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-javascript-samples
```
Sur le même terminal bash, accédez à votre référentiel dupliqué pour cet exemple de recherche de site web :
```
cd azure-search-javascript-samples
```
Utilisez la commande code . de Visual Studio Code pour ouvrir votre dépôt dupliqué. Les tâches restantes sont accomplies à partir de Visual Studio Code, sauf indication contraire.
```
code .
```

Créez un groupe de ressources pour vos ressources Azure

Dans Visual Studio Code, ouvrez la barre d’activités et sélectionnez l’icône Azure.
Connectez-vous à Azure si ce n’est pas déjà fait.
Dans la section Ressources, sélectionnez Ajouter (+), puis Créer un groupe de ressources.
Entrez un nom de groupe de ressources, par exemple cognitive-search-demo-rg.
Entrez une région :
- Pour Node.js, sélectionnez West US 2. Il s’agit de la région recommandée pour la préversion du modèle de programmation (PM) v4 Azure Function.
- Pour C# et Python, nous recommandons les régions suivantes, prises en charge par Azure Static Web Apps au moment de la rédaction de ce document : West US 2, East US 2, West Europe, Central US, East Asia

Utilisez ce groupe de ressources pour toutes les ressources créées durant ce tutoriel. Un groupe de ressources vous donne une unité logique pour gérer les ressources, notamment les supprimer une fois que vous avez terminé.

Étapes suivantes

Créer un index de recherche et le charger avec des documents

Share via