Benutzeroberfläche einrichten

In diesem Teil des Google Cloud Search-Tutorials erfahren Sie, wie Sie mithilfe des einbettbaren Such-Widgets eine benutzerdefinierte Suchanwendung einrichten. Das erste Modul des Tutorials finden Sie unter Einführung in Google Cloud Search.

Abhängigkeiten installieren

  1. Wenn die Indexierung des Repositories durch den Connector noch läuft, öffnen Sie eine neue Shell und fahren Sie dort fort.

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

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

npm install

Anmeldedaten für die Suchanwendung erstellen

Damit der Connector die Cloud Search APIs aufrufen kann, sind Anmeldedaten für das Dienstkonto erforderlich. 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 noch 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 unter OAuth 2.0 einrichten im Abschnitt zur Nutzereinwilligung.

  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. Das Feld „URIs“ ist leer.

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

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

  10. Notieren Sie sich die Client-ID. Dieser Wert wird verwendet, um die Anwendung zu identifizieren, wenn eine Nutzerautorisierung mit OAuth2 angefordert wird. Der Clientschlüssel ist für diese Implementierung nicht erforderlich.

  11. Klicken Sie auf OK.

Suchanwendung erstellen

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

  1. Kehren Sie zur Admin-Konsole zurück.
  2. Klicken Sie auf das Symbol „Apps“. Die Seite „App-Verwaltung“ wird angezeigt.
  3. Klicken Sie auf Google Workspace. Die Seite „Verwaltung von Google Workspace-Apps“ 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 „Apps suchen“ 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 neben der neu erstellten Suchanwendung auf das Stiftsymbol („Suchanwendung bearbeiten“). Die Seite „Details zur Suche nach Anwendungen“ wird angezeigt.
  10. Notieren Sie sich die Anwendungs-ID.
  11. Klicken Sie rechts neben Datenquellen auf das Stiftsymbol.
  12. Klicken Sie neben „Anleitung“ auf den Schalter 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 „Anleitung“ auf Anzeigeoptionen.
  14. Setzen Sie ein Häkchen bei allen gewünschten Facetten.
  15. Klicken Sie auf SPEICHERN.
  16. Klicken Sie auf FERTIG.

Webanwendung konfigurieren

Nachdem Sie die Anmeldedaten und die Suchanwendung erstellt haben, aktualisieren Sie die Anwendungskonfiguration so, dass sie diese Werte enthält:

  1. Ändern Sie das Verzeichnis über die Befehlszeile zu „cloud-search-samples/end-to-end/search-interface/public“.
  2. Öffnen Sie die Datei app.js in einem Texteditor.
  3. Suchen Sie oben in der Datei nach der Variablen 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 rufen Sie http://localhost:8080 auf.
  2. Klicken Sie auf Anmelden, um die App dazu zu autorisieren, Cloud Search in Ihrem Namen abzufragen.
  3. Geben Sie in das Suchfeld eine Suchanfrage ein, z. B. „Test“, 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.

Code prüfen

In den verbleibenden Abschnitten erfahren Sie, 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>

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.

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

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

Autorisierung verarbeiten

Nutzer müssen die Anwendung zur Abfrage in ihrem Namen autorisieren. Das Widget kann Nutzer zur Autorisierung auffordern. Eine bessere Nutzererfahrung lässt sich jedoch erreichen, wenn Sie die Autorisierung selbst durchführen.

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:

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

Für das 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:

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

Das war's auch schon! Sie haben die Anleitung erfolgreich abgeschlossen. Klicken Sie unten auf „Weiter“, um eine Anleitung für das Bereinigen zu erhalten.

Zurück Weiter