Benutzeroberfläche einrichten

In diesem Teil des Cloud Search-Tutorials erfahren Sie, wie Sie mithilfe des einbettbaren Such-Widgets eine benutzerdefinierte Suchanwendung einrichten. Den ersten Teil des Tutorials finden Sie auf dieser Seite.

Abhängigkeiten installieren

Ändern Sie Ihr Arbeitsverzeichnis zu cloud-search-samples/end-to-end/search-interface und führen Sie den folgenden Befehl aus, um die für den Webserver erforderlichen Abhängigkeiten herunterzuladen:

npm install

Anmeldedaten für die Suchanwendung erstellen

Damit Cloud Search APIs vom Connector aufgerufen werden können, sind Anmeldedaten für das Dienstkonto erforderlich. So erstellen Sie sie:

  1. Gehen Sie in der Entwicklerkonsole zur Seite "OAuth-Client-ID erstellen" oder klicken Sie auf folgenden Link:

    Seite "OAuth-Client-ID erstellen" aufrufen

  2. Wählen Sie als Anwendungstyp die Option Webanwendung aus.
  3. Geben Sie als Name tutorial ein.
  4. Geben Sie unter Autorisierte JavaScript-Quellen http://localhost:8080 ein.
  5. Klicken Sie auf Erstellen.

Notieren Sie sich die Quellen-ID des neu erstellten Clients. Sie benötigen sie, um die Anwendung zu identifizieren, wenn eine Nutzerautorisierung mit OAuth2 angefordert wird. Das Geheimnis ist für diese Implementierung nicht erforderlich.

Suchanwendung erstellen

Als nächsten Schritt erstellen Sie in der Admin-Konsole eine Suchanwendung. Sie ist eine virtuelle Repräsentation der Suchoberfläche und ihrer Standardkonfiguration.

  1. Gehen Sie in der Admin-Konsole zur Seite "Suchanwendungen" oder klicken Sie auf den folgenden Link:

    Seite "Suchanwendungen" aufrufen

  2. Klicken Sie auf die Schaltfläche +.
  3. Geben Sie als Anzeigename tutorial an.
  4. Klicken Sie auf Erstellen.
  5. Klicken Sie auf Hinzufügen, um die Datenquelle zu erstellen.
  6. Klicken Sie neben der neu erstellen Datenquelle auf den Stift.
  7. Klicken Sie auf die Zeile Datenquellen.
  8. Suchen Sie in der Liste nach Ihrer Datenquelle und klicken Sie auf den Schieberegler, um sie zu aktivieren.
  9. Klicken Sie auf display options (Optionen anzeigen), um Operatoren für die Facettierung auszuwählen.
  10. Prüfen Sie alle angezeigten Operatoren.
  11. Klicken Sie auf Speichern.
  12. Klicken Sie auf Fertig.

Notieren Sie sich die Anwendungs-ID der neu erstellten Datenquelle.

Webanwendung konfigurieren

Nachdem Sie die Anmeldedaten und die Suchanwendung erstellt haben, können Sie nun die Anwendungskonfiguration mit folgenden Werten aktualisieren:

  1. Öffnen Sie die Datei public/app.js in einem Texteditor.
  2. Suchen Sie oben in der Datei die Variable searchConfig.
  3. Ersetzen Sie [client-id] durch die zuvor erstellte OAuth-Client-ID.
  4. Ersetzen Sie [application-id] durch die ID der eben erstellten Suchanwendung.
  5. Speichern Sie die Datei.

Anwendung ausführen

Starten Sie die Anwendung, indem Sie den folgenden Befehl ausführen:

npm run start

Den Index abfragen

So fragen Sie den Index mit dem Such-Widget ab: 1. Öffnen Sie Ihren Browser und gehen Sie zu http://localhost:8080. 1. Klicken Sie auf die Schaltfläche Anmelden, um die App dazu zu autorisieren, Cloud Search in Ihrem Namen abzufragen. 1. Geben Sie eine Abfrage wie das Wort "Test" in das Suchfeld ein und drücken Sie die Eingabetaste. Auf der Seite sollten dann die Ergebnisse der Abfrage zusammen mit Facets und Steuerungsmöglichkeiten für die Paginierung angezeigt werden, um in den Ergebnissen blättern zu können.

Den Code verstehen

Widget laden

Das Widget und die zugehörigen Bibliotheken werden in zwei Phasen geladen. Zuerst wird das Bootstrap-Skript geladen:

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

Danach wird die Callback-Funktion onLoad aufgerufen, sobald das Skript bereit ist. Anschließend werden der Google-API-Client, Google Log-in und die Widget-Bibliotheken für Cloud Search geladen.

/**
 * 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)
}

Der Rest der Initialisierung der App wird von initializeApp durchgeführt, sobald alle erforderlichen Bibliotheken geladen sind.

Handlungsautorisierung

Nutzer müssen die Anwendung zur Abfrage in ihrem Namen autorisieren. Während Nutzer vom Widget zur Autorisierung aufgefordert werden können, ist es möglich, die Verwendung für den Nutzer zu vereinfachen, indem Sie die Autorisierung für ihn übernehmen.

Für die Suchoberfläche bietet die Anwendung je nach Anmeldestatus des Nutzers zwei verschiedene Ansichten.

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>

Während der Initialisierung wird die vorgesehene Ansicht aktiviert und die Handler für Anmelde- und Abmeldeereignisse werden konfiguriert:

/**
 * 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();

  // ...

}

Suchoberfläche erstellen

Im Such-Widget sind für die Sucheingaben und die Anzeige der Ergebnisse mehrere HTML-Markups nötig:

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>

Das Widget wird initialisiert und währenddessen an die Eingabe- und Containerelemente gebunden:

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();

Das wars! Sie haben das Tutorial erfolgreich abgeschlossen. Klicken Sie unten auf "Weiter", um eine Anleitung für das Bereinigen zu erhalten.

Zurück Weiter