Cette page a été traduite par l'API Cloud Translation.

Configurer l'interface utilisateur

Cette page du tutoriel Google Cloud Search explique comment configurer de recherche à l'aide du widget Recherche intégrable. Pour commencer ce tutoriel depuis le début, Tutoriel de mise en route de Cloud Search

Installer des dépendances

Si le connecteur n'a pas fini d'indexer le référentiel, ouvrez une nouvelle interface système et continuer sur cette page.
À partir de la ligne de commande, remplacez le répertoire par cloud-search-samples/end-to-end/search-interface
Pour télécharger les dépendances requises pour 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 l'API Cloud Search API. 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 Create credentials (Créer des identifiants), sélectionnez ID client OAuth : L'option "Créer un ID client OAuth" s'affiche.
(Facultatif) Si vous n'avez pas configuré l'écran de consentement, cliquez sur CONFIGURER L'ÉCRAN D'AUTORISATION Le paramètre "Consentement OAuth" s'affiche.
1. Cliquez sur Interne, puis sur CRÉER. Un autre "consentement OAuth" écran s'affiche.
2. Renseignez les champs obligatoires. Pour plus d'instructions, adressez-vous à l'utilisateur de la section "Consentement" 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. Une zone vide "URI" s'affiche.
Dans le champ URI, saisissez http://localhost:8080.
Cliquez sur CRÉER. "Client OAuth créé" s'affiche.
Notez l'ID client. Cette valeur sert à identifier l'application lorsque demandant l'autorisation de l'utilisateur avec OAuth2. Le code secret du client n'est pas obligatoire 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 son configuration.

Revenez à la console d'administration Google.
Cliquez sur l'icône Applications. Dans "Administration des applications", s'affiche.
Cliquez sur Google Workspace. La section "Apps Google Workspace administration" s'affiche.
Faites défiler la page vers le bas et cliquez sur Cloud Search. "Paramètres de Google Workspace" page s'affiche.
Cliquez sur Applications de recherche. La page "Applications de recherche" s'affiche.
Cliquez sur le bouton + jaune rond. La fenêtre "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 que vous venez de créer. ("Modifier l'application de recherche"). L'option "Rechercher les détails de 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 du "tutoriel" source de données, 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-la à jour. pour inclure ces valeurs comme suit:

À partir de la ligne de commande, remplacez le répertoire par `cloud-search-samples/end-to-end/search-interface/public.'
Ouvrez le fichier app.js dans 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 le 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, comme le mot "test". et appuyez sur Entrée. La page doit afficher les résultats de la requête, ainsi que les attributs et des commandes de pagination pour parcourir les résultats.

Examiner 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, l’amorçage est chargé:

index.html

Afficher sur GitHub

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

Ensuite, le rappel onLoad est appelé une fois le script prêt. Elle charge ensuite le client API Google, Google Sign-In et les bibliothèques de widgets Cloud Search.

app.js

Afficher sur GitHub

/**
 * 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 toutes les bibliothèques requises chargées.

Gérer l'autorisation

Les utilisateurs doivent autoriser l'application à effectuer des requêtes en leur nom. Lorsque le widget peut inviter les utilisateurs à donner leur autorisation, vous pouvez améliorer l'expérience utilisateur en gérant vous-même l'autorisation.

Pour l'interface de recherche, l'application propose deux affichages différents selon sur l'état de connexion de l'utilisateur.

index.html

Afficher sur GitHub

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

Pendant l'initialisation, la vue appropriée est activée et les gestionnaires de les événements de connexion et de déconnexion sont configurés:

app.js

Afficher sur GitHub

/**
 * 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 recherche et de stocker les résultats de recherche:

index.html

Afficher sur GitHub

<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. pendant l'initialisation:

app.js

Afficher sur GitHub

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. Continuer sur pendant les instructions de nettoyage.

Précédent Suivant