Benutzeroberfläche einrichten

Auf dieser Seite der Anleitung zu Google Cloud Search wird beschrieben, wie Sie mit dem einbettbaren Such-Widget eine benutzerdefinierte Suchanwendung einrichten. Den ersten Teil des Tutorials finden Sie auf dieser Seite.

Abhängigkeiten installieren

  1. Wenn der Connector das Repository noch indexiert, öffnen Sie eine neue Shell und fahren Sie dort fort.

  2. Ändern Sie das Verzeichnis über die Befehlszeile in cloud-search-samples/end-to-end/search-interface.

  3. Führen Sie den folgenden Befehl aus, um die erforderlichen Abhängigkeiten zum Ausführen des Webservers herunterzuladen:

npm install

Anmeldedaten für die Suchanwendung erstellen

Der Connector benötigt Dienstkonto-Anmeldedaten, um die Cloud Search APIs aufzurufen. So erstellen Sie die Anmeldedaten:

  1. Kehren Sie zur Google Cloud Console zurück.

  2. Klicken Sie im linken Navigationsmenü auf Anmeldedaten.

  3. Wählen Sie in der Drop-down-Liste Anmeldedaten erstellen die Option OAuth-Client-ID aus. Die Seite „OAuth-Client-ID erstellen“ wird angezeigt.

  4. Optional: Wenn Sie den Zustimmungsbildschirm nicht konfiguriert haben, klicken Sie auf ZUSTIMMUNGSBILDSCHIRM KONFIGURIEREN. Der Bildschirm "OAuth-Zustimmung" wird angezeigt.

    1. Klicken Sie auf Intern und dann auf ERSTELLEN. Ein weiterer „OAuth-Zustimmungsbildschirm“ wird angezeigt.

    2. Füllen Sie die Pflichtfelder aus. Weitere Informationen finden Sie im Abschnitt zur Nutzereinwilligung unter OAuth 2.0 einrichten.

  5. Klicken Sie auf die Drop-down-Liste Anwendungstyp und wählen Sie Webanwendung aus.

  6. Geben Sie im Feld Name „tutorial“ ein.

  7. Klicken Sie im Feld Autorisierte JavaScript-Quellen auf URI HINZUFÜGEN. Ein leeres Feld „URIs“ wird angezeigt.

  8. Geben Sie im Feld URIs den Wert http://localhost:8080 ein.

  9. Klicke auf ERSTELLEN. Der Bildschirm "OAuth-Client erstellt" wird angezeigt.

  10. Notieren Sie sich die Client-ID. Mit diesem Wert wird die Anwendung identifiziert, wenn eine Nutzerautorisierung mit OAuth2 angefordert wird. Der Clientschlüssel ist für diese Implementierung nicht erforderlich.

  11. Klicken Sie auf OK.

Suchanwendung erstellen

Erstellen Sie als Nächstes eine Suchanwendung in der Admin-Konsole. Die Suchanwendung ist eine virtuelle Darstellung der Suchoberfläche und ihrer Standardkonfiguration.

  1. Kehren Sie zur Admin-Konsole zurück.
  2. Klicken Sie auf das Apps-Symbol. Die Seite „App-Verwaltung“ wird angezeigt.
  3. Klicken Sie auf Google Workspace. Die Seite „Google Workspace-Apps verwalten“ wird angezeigt.
  4. Scrollen Sie nach unten und klicken Sie auf Cloud Search. Die Seite „Einstellungen für Google Workspace“ wird angezeigt.
  5. Klicken Sie auf Suchanwendungen. Die Seite „Suchanwendungen“ wird angezeigt.
  6. Klicken Sie auf das runde gelbe +. Das Dialogfeld „Neue Suchanwendung erstellen“ wird angezeigt.
  7. Geben Sie im Feld Anzeigename „tutorial“ ein.
  8. Klicke auf ERSTELLEN.
  9. Klicken Sie auf das Stiftsymbol neben der neu erstellten Suchanwendung („Suchanwendung bearbeiten“). Die Seite „Details zur Suchanwendung“ wird angezeigt.
  10. Notieren Sie sich die Anwendungs-ID.
  11. Klicken Sie rechts neben Datenquellen auf das Stiftsymbol.
  12. Klicken Sie neben „Anleitung“ auf die Ein/Aus-Schaltfläche Aktivieren. Mit dieser Ein/Aus-Schaltfläche wird die Datenquelle der Anleitung für die neu erstellte Suchanwendung aktiviert.
  13. Klicken Sie rechts neben der Datenquelle „Tutorial“ auf Anzeigeoptionen.
  14. Prüfen Sie alle Attribute.
  15. Klicke auf SPEICHERN.
  16. Klicke auf FERTIG.

Webanwendung konfigurieren

Nachdem Sie die Anmeldedaten und die Suchanwendung erstellt haben, aktualisieren Sie die Anwendungskonfiguration mit den folgenden Werten:

  1. Ändern Sie in der Befehlszeile das Verzeichnis in "cloud-search-sample/end-to-end/search-interface/public".
  2. Öffnen Sie die Datei app.js mit einem Texteditor.
  3. Suchen Sie oben in der Datei die Variable searchConfig.
  4. Ersetzen Sie [client-id] durch die zuvor erstellte OAuth-Client-ID.
  5. Ersetzen Sie [application-id] durch die im vorherigen Abschnitt notierte Suchanwendungs-ID.
  6. Speichern Sie die Datei.

Anwendung ausführen

Starten Sie die Anwendung mit dem folgenden Befehl:

npm run start

Index abfragen

So fragen Sie den Index mit dem Such-Widget ab:

  1. Öffnen Sie Ihren Browser und gehen Sie zu http://localhost:8080.
  2. Klicken Sie auf Anmelden, um die Anwendung dazu zu autorisieren, Cloud Search in Ihrem Namen abzufragen.
  3. Geben Sie im Suchfeld eine Suchanfrage ein, z. B. das Wort „Test“, und drücken Sie die Eingabetaste. Auf der Seite sollten die Abfrageergebnisse zusammen mit Facetten und Steuerelementen für die Paginierung angezeigt werden, um durch die Ergebnisse zu navigieren.

Code prüfen

In den verbleibenden Abschnitten wird untersucht, wie die Benutzeroberfläche aufgebaut ist.

Widget wird geladen

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>

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

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

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

Autorisierung handhaben

Nutzer müssen die Anwendung autorisieren, in ihrem Namen Abfragen auszuführen. Nutzer können zwar vom Widget zur Autorisierung aufgefordert werden, aber Sie können die Nutzerfreundlichkeit verbessern, indem Sie die Autorisierung selbst vornehmen.

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

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 richtige Ansicht aktiviert und die Handler für An- und Abmeldeereignisse konfiguriert:

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

  // ...

}

Suchoberfläche erstellen

Das Such-Widget benötigt etwas HTML-Markup für die Sucheingabe und zum Speichern der Suchergebnisse:

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ährend der Initialisierung an die Eingabe- und Containerelemente gebunden:

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

Herzlichen Glückwunsch, Sie haben die Anleitung erfolgreich abgeschlossen! Fahren Sie fort, um Anweisungen zur Bereinigung zu erhalten.

Zurück Weiter