Configurer l'interface utilisateur

Cette page du tutoriel Google Cloud Search montre comment configurer une application de recherche personnalisée à l'aide du widget Recherche intégrable. Pour commencer ce tutoriel depuis le début, reportez-vous à la page Tutoriel de mise en route de Cloud Search.

Installer des dépendances

  1. 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.

  2. À partir de la ligne de commande, remplacez le répertoire par cloud-search-samples/end-to-end/search-interface.

  3. Pour télécharger les dépendances requises pour exécuter le 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 :

  1. Revenez à la console Google Cloud.

  2. Dans le volet de navigation de gauche, cliquez sur Identifiants.

  3. Dans la liste déroulante Créer des identifiants, sélectionnez ID client OAuth. La page "Créer un ID client OAuth" s'affiche.

  4. (Facultatif) Si vous n'avez pas configuré l'écran de consentement, cliquez sur CONFIGURER L'ÉCRAN DE CONSENTEMENT. L'écran "Consentement OAuth" s'affiche.

    1. Cliquez sur Interne, puis sur CRÉER. Un autre écran de consentement OAuth s'affiche.

    2. Renseignez les champs obligatoires. Pour obtenir d'autres instructions, consultez la section sur le consentement de l'utilisateur dans Configurer OAuth 2.0.

  5. Cliquez sur la liste déroulante Type d'application, puis sélectionnez Application Web.

  6. Dans le champ Nom, saisissez "tutorial".

  7. Dans le champ Origines JavaScript autorisées, cliquez sur AJOUTER UN URI. Un champ "URI" vide s'affiche.

  8. Dans le champ URI, saisissez http://localhost:8080.

  9. Cliquez sur CRÉER. L'écran "Client OAuth créé" s'affiche.

  10. Notez l'ID client. Cette valeur permet d'identifier l'application lors de la demande d'autorisation pour l'utilisateur avec OAuth2. Le code secret du client n'est pas nécessaire pour cette implémentation.

  11. Cliquez sur OK.

Créer l'application de recherche

La prochaine étape consiste à créer une application de recherche dans la console d'administration. Il s'agit d'une représentation virtuelle de l'interface de recherche et de sa configuration par défaut.

  1. Revenez à la console d'administration Google.
  2. Cliquez sur l'icône Applications. La page d'administration des applications s'affiche.
  3. Cliquez sur Google Workspace. La page "Administration des applications Google Workspace" s'affiche.
  4. Faites défiler la page vers le bas, puis cliquez sur Cloud Search. La page des paramètres de Google Workspace s'affiche.
  5. Cliquez sur Applications de recherche. La page "Rechercher des applications" s'affiche.
  6. Cliquez sur le signe + jaune. La boîte de dialogue "Créer une application de recherche" s'affiche.
  7. Dans le champ Nom à afficher, saisissez "tutorial".
  8. Cliquez sur CRÉER.
  9. Cliquez sur l'icône en forme de crayon à côté de l'application de recherche que vous venez de créer ("Modifier l'application de recherche"). La page "Détails de la demande de recherche" s'affiche.
  10. Notez l'ID de l'application.
  11. À droite de Sources de données, cliquez sur l'icône en forme de crayon.
  12. À côté de "Tutoriel", cliquez sur le bouton Activer. Ce bouton active la source de données du tutoriel pour la nouvelle application de recherche.
  13. À droite de la source de données "tutorial", cliquez sur Options d'affichage.
  14. Cochez toutes les facettes.
  15. Cliquez sur ENREGISTRER.
  16. 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 avec les valeurs suivantes :

  1. À partir de la ligne de commande, remplacez le répertoire par `cloud-search-samples/end-to-end/search-interface/public`.
  2. Ouvrez le fichier app.js dans un éditeur de texte.
  3. Recherchez la variable searchConfig en haut du fichier.
  4. Remplacez [client-id] par l'ID client OAuth créé précédemment.
  5. Remplacez [application-id] par l'ID de l'application de recherche noté dans la section précédente.
  6. 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 :

  1. Ouvrez votre navigateur et accédez à http://localhost:8080.
  2. Cliquez sur Se connecter pour autoriser l'application à interroger Cloud Search à votre place.
  3. Dans le champ de recherche, saisissez une requête, telle que le mot "test", puis appuyez sur Entrée. Les résultats de la requête doivent apparaître sur la page, ainsi que les facettes et les commandes de pagination permettant de naviguer dans les résultats.

Comprendre le code

Les sections qui suivent examinent la construction de l'interface utilisateur.

Charger le widget

Le widget et les bibliothèques associées sont chargés en deux phases. La première consiste à charger le script d'amorce :

index.html
<script src="https://apis.google.com/js/api.js?mods=enable_cloud_search_widget&onload=onLoad" async defer></script>

La seconde consiste à appeler le rappel onLoad quand le script est prêt. Sont ensuite chargés le client API Google, Google Sign-in et les bibliothèques de widgets Cloud Search.

app.js
/**
 * Load the cloud search widget & auth libraries. Runs after
 * the initial gapi bootstrap library is ready.
 */
function onLoad() {
  gapi.load('client:auth2:cloudsearch-widget', initializeApp)
}

Le reste de l'initialisation de l'application est géré par initializeApp une fois que toutes les bibliothèques nécessaires ont été chargées.

Gérer l'autorisation

Les utilisateurs doivent autoriser l'application à effectuer des recherches à leur place. Le widget peut directement demander cette autorisation à l'utilisateur, mais vous pouvez améliorer l'expérience utilisateur en la gérant vous-même.

L'application propose deux affichages différents de l'interface de recherche en fonction de l'état de connexion de l'utilisateur.

index.html
<div class="content">
  <div id="app" hidden>
    <div id="header">
      <button id="sign-out">Sign-out</button>
    </div>
    <!-- Markup for widget...-->
  </div>
  <div id="welcome" hidden>
    <h1>Cloud Search Tutorial</h1>
    <p>Sign in with your Google account to search.</p>
    <button id="sign-in">Sign-in</button>
  </div>
</div>

L'affichage approprié est activé et les gestionnaires des événements de connexion et déconnexion sont configurés pendant l'initialisation :

app.js
/**
 * Initialize the app after loading the Google API client &
 * Cloud Search widget.
 */
async function initializeApp() {
  await gapi.auth2.init({
      'clientId': searchConfig.clientId,
      'scope': 'https://www.googleapis.com/auth/cloud_search.query'
  });

  let auth = gapi.auth2.getAuthInstance();

  // Watch for sign in status changes to update the UI appropriately
  let onSignInChanged = (isSignedIn) => {
    document.getElementById("app").hidden = !isSignedIn;
    document.getElementById("welcome").hidden = isSignedIn;
    if (resultsContainer) {
      resultsContainer.clear();
    }
  }
  auth.isSignedIn.listen(onSignInChanged);
  onSignInChanged(auth.isSignedIn.get()); // Trigger with current status

  // Connect sign-in/sign-out buttons
  document.getElementById("sign-in").onclick = (e) =>  auth.signIn();
  document.getElementById("sign-out").onclick = (e) => auth.signOut();

  // ...

}

Créer l'interface de recherche

Le widget Recherche nécessite une petite quantité de balisage HTML pour la saisie de la recherche et la présentation des résultats de recherche :

index.html
<div id="search_bar">
  <div>
    <div id="suggestions_anchor">
      <input type="text" id="search_input" placeholder="Search for...">
    </div>
  </div>
</div>
<div id="facet_results" ></div>
<div id="search_results" ></div>

Le widget est initialisé et lié aux éléments d'entrée et de conteneur lors de l'initialisation :

app.js
gapi.config.update('cloudsearch.config/apiVersion', 'v1');
resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setSearchApplicationId(searchConfig.searchAppId)
  .setSearchResultsContainerElement(document.getElementById('search_results'))
  .setFacetResultsContainerElement(document.getElementById('facet_results'))
  .build();

const searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
  .setSearchApplicationId(searchConfig.searchAppId)
  .setInput(document.getElementById('search_input'))
  .setAnchor(document.getElementById('suggestions_anchor'))
  .setResultsContainer(resultsContainer)
  .build();

Félicitations, vous avez terminé le tutoriel. Continuez pour obtenir les instructions de nettoyage.

Précédent Suivant