Configurer l'interface utilisateur

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

Installer des dépendances

Remplacez votre répertoire de travail par le répertoire cloud-search-samples/end-to-end/search-interface et exécutez la commande suivante pour télécharger les dépendances requises pour l'exécution du serveur Web :

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 des identifiants :

  1. Accédez à la page "Créer un ID client OAuth" dans la console de développement.

    Accéder à la page "Créer un ID client OAuth"

  2. Sélectionnez Application Web comme type d'application.
  3. Dans le champ Nom, saisissez tutorial.
  4. Dans Origines JavaScript autorisées, saisissez http://localhost:8080.
  5. Appuyez sur Créer.

Notez l'ID client du nouveau client, qui permettra d'identifier l'application lors de la demande d'autorisation pour l'utilisateur avec OAuth2. Le code secret n'est pas nécessaire pour cette implémentation.

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. Dans la console d'administration, accédez à la page des applications de recherche.

    Accéder à la page des applications de recherche

  2. Appuyez sur bouton +.
  3. Dans le champ Nom à afficher, saisissez tutorial.
  4. Appuyez sur Créer.
  5. Appuyez sur Ajouter pour créer la source de données.
  6. Appuyez sur l'icône représentant un crayon à côté de la nouvelle source de données.
  7. Cliquez sur la colonne Sources de données.
  8. Recherchez votre source de données dans la liste et appuyez sur le bouton bascule pour l'activer.
  9. Appuyez sur options d'affichage afin de sélectionner les opérateurs pour la génération d'attributs.
  10. Cochez tous les opérateurs disponibles.
  11. Appuyez sur Enregistrer.
  12. Appuyez sur OK.

Notez l'ID application de la nouvelle source de données.

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. Ouvrez le fichier public/app.js avec un éditeur de texte.
  2. Recherchez la variable searchConfig en haut du fichier.
  3. Remplacez [client-id] par l'ID client OAuth créé précédemment.
  4. Remplacez [application-id] par l'ID de l'application de recherche créée dans la section précédente.
  5. Enregistrez le fichier.

Exécuter l'application

Démarrez l'application en exécutant la commande :

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. Appuyez sur le bouton Connexion 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 attributs et les commandes de pagination permettant de naviguer dans les résultats.

Comprendre le code

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 :

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

/**
 * 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 les autorisations

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.

<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 :

/**
 * 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 :

<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 :

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