Cette page du tutoriel Google Cloud Search explique comment configurer une application de recherche personnalisée à l'aide du widget Recherche intégrable. Pour commencer depuis le début de ce tutoriel, consultez le tutoriel de mise en route de Cloud Search.
Installer des dépendances
Si le connecteur n'a pas fini d'indexer le dépôt, ouvrez une nouvelle interface système et poursuivez la procédure dans celle-ci.
Depuis la ligne de commande, remplacez le répertoire par
cloud-search-samples/end-to-end/search-interface
.Pour télécharger les dépendances nécessaires à l'exécution du serveur Web, exécutez la commande suivante:
npm install
Créer les identifiants de l'application de recherche
Le connecteur requiert les identifiants du compte de service pour appeler les API Cloud Search. Pour créer les identifiants:
Revenez à la console Google Cloud.
Dans le volet de navigation de gauche, cliquez sur Identifiants.
Dans la liste déroulante Créer des identifiants, sélectionnez ID client OAuth. La page "Créer un ID client OAuth" s'affiche.
(Facultatif) Si vous n'avez pas configuré l'écran d'autorisation, cliquez sur CONFIGURER L'ÉCRAN D'AUTORISATION. L'écran d'autorisation OAuth s'affiche.
Cliquez sur Interne, puis sur CRÉER. Un autre écran « Consentement OAuth » s'affiche.
Renseignez les champs obligatoires. Pour en savoir plus, consultez la section "Consentement de l'utilisateur" de la page Configurer OAuth 2.0.
Cliquez sur la liste déroulante Type d'application, puis sélectionnez Application Web.
Dans le champ Nom, saisissez "tutorial".
Dans le champ Origines JavaScript autorisées, cliquez sur Ajouter un URI. Un champ "URI" vide s'affiche.
Dans le champ URI, saisissez
http://localhost:8080
.Cliquez sur CRÉER. L'écran "Client OAuth créé" s'affiche.
Notez l'ID client. Cette valeur permet d'identifier l'application lors de la demande d'autorisation de l'utilisateur avec OAuth2. Le code secret du client n'est pas nécessaire pour cette implémentation.
Cliquez sur OK.
Créer l'application de recherche
Créez ensuite une application de recherche dans la console d'administration. L'application de recherche est une représentation virtuelle de l'interface de recherche et de sa configuration par défaut.
- Revenez à la console d'administration Google.
- Cliquez sur l'icône Applications. La page "Administration des applications" s'affiche.
- Cliquez sur Google Workspace. La page "Apps Google Workspace administration" (Administration des applications Google Workspace) s'affiche.
- Faites défiler la page vers le bas et cliquez sur Cloud Search. La page "Paramètres de Google Workspace" s'affiche.
- Cliquez sur Applications de recherche. La page "Search Appplications" (Recherche d'applications) s'affiche.
- Cliquez sur le bouton jaune + rond. La boîte de dialogue "Créer une application de recherche" s'affiche.
- Dans le champ Nom à afficher, saisissez "tutorial".
- Cliquez sur CRÉER.
- Cliquez sur l'icône en forme de crayon à côté de l'application de recherche nouvellement créée ("Modifier l'application de recherche"). La page "Rechercher des informations sur l'application" s'affiche.
- Notez l'ID application.
- À droite de Sources de données, cliquez sur l'icône en forme de crayon.
- À côté de "Tutoriel", cliquez sur le bouton Activer. Ce bouton permet d'activer la source de données du tutoriel pour l'application de recherche que vous venez de créer.
- À droite de la source de données "tutoriel", cliquez sur Options d'affichage.
- Vérifiez tous les attributs.
- Cliquez sur ENREGISTRER.
- Cliquez sur OK.
Configurer l'application Web
Après avoir créé les identifiants et l'application de recherche, mettez à jour la configuration de l'application pour inclure ces valeurs comme suit:
- Dans la ligne de commande, remplacez le répertoire par "cloud-search-samples/end-to-end/search-interface/public".
- Ouvrez le fichier
app.js
avec un éditeur de texte. - Recherchez la variable
searchConfig
en haut du fichier. - Remplacez
[client-id]
par l'ID client OAuth créé précédemment. - Remplacez
[application-id]
par l'ID de l'application de recherche noté dans la section précédente. - Enregistrez le fichier.
Exécuter l'application
Démarrez l'application en exécutant la commande suivante:
npm run start
Interroger l'index
Pour interroger l'index à l'aide du widget Recherche:
- Ouvrez votre navigateur et accédez à
http://localhost:8080
. - Cliquez sur Se connecter pour autoriser l'application à interroger Cloud Search en votre nom.
- Dans le champ de recherche, saisissez une requête, par exemple le mot "test", puis appuyez sur Entrée. La page doit afficher les résultats de la requête, ainsi que les attributs et les commandes de pagination permettant de les parcourir.
Comprendre le code
Les autres sections examinent la construction de l'interface utilisateur.
Charger le widget
Le widget et les bibliothèques associées sont chargés en deux phases. Tout d'abord, le script d'amorçage est chargé:
Ensuite, le rappel onLoad
est appelé une fois le script prêt. Il charge ensuite le client API Google, Google Sign-In et les bibliothèques de widgets Cloud Search.
L'initialisation restante de l'application est gérée par initializeApp
une fois toutes les bibliothèques requises chargées.
Gérer l'autorisation
Les utilisateurs doivent autoriser l'application à effectuer des requêtes en leur nom. Bien que le widget puisse inviter les utilisateurs à accorder une autorisation, vous pouvez améliorer l'expérience utilisateur en gérant vous-même l'autorisation.
Pour l'interface de recherche, l'application présente deux affichages différents en fonction de l'état de connexion de l'utilisateur.
Lors de l'initialisation, la vue appropriée est activée et les gestionnaires des événements de connexion et de déconnexion sont configurés:
Créer l'interface de recherche
Le widget Recherche nécessite une petite quantité de balisage HTML pour l'entrée de recherche et le stockage des résultats de recherche:
Le widget est initialisé et lié aux éléments d'entrée et de conteneur lors de l'initialisation:
Félicitations, vous avez terminé le tutoriel. Continuez pour obtenir des instructions de nettoyage.