Diese Seite wurde von der Cloud Translation API übersetzt.

Benutzeroberfläche einrichten

Auf dieser Seite des Tutorials zu Google Cloud Search erfahren Sie, wie Sie eine benutzerdefinierte Suchanwendung mit dem einbettbaren Such-Widget. Den Anfang dieses Tutorials finden Sie unter Anleitung für die ersten Schritte mit Cloud Search

Abhängigkeiten installieren

Wenn der Connector das Repository noch indexiert, öffnen Sie eine neue Shell und fahren Sie dort fort.
Ändern Sie in der Befehlszeile das Verzeichnis in cloud-search-samples/end-to-end/search-interface
Um die erforderlichen Abhängigkeiten für den Webserver ausführen, führen Sie den folgenden Befehl aus:

npm install

Anmeldedaten für die Suchanwendung erstellen

Der Connector benötigt Anmeldedaten für das Dienstkonto, um Cloud Search aufzurufen APIs So erstellen Sie die Anmeldedaten:

Kehren Sie zur Google Cloud Console zurück.
Klicken Sie im linken Navigationsmenü auf Anmeldedaten.
Wählen Sie in der Drop-down-Liste Anmeldedaten erstellen OAuth-Client-ID. OAuth-Client-ID erstellen angezeigt.
Optional: Wenn Sie den Zustimmungsbildschirm noch nicht konfiguriert haben, klicken Sie auf ZUSTIMMUNGSBILDSCHIRM KONFIGURIEREN. Die „OAuth-Zustimmung“ erscheint.
1. Klicken Sie auf Intern und dann auf ERSTELLEN. Eine andere „OAuth-Zustimmung“ Bildschirm angezeigt wird.
2. Füllen Sie die Pflichtfelder aus. Weitere Anweisungen erhältst du vom Nutzer Abschnitt „Einwilligung“ des OAuth 2.0 einrichten
Klicken Sie auf die Drop-down-Liste Anwendungstyp und wählen Sie Webanwendung aus.
Geben Sie im Feld Name „tutorial“ ein.
Klicken Sie im Feld Autorisierte JavaScript-Quellen auf URI HINZUFÜGEN. Eine leere „URIs“ angezeigt.
Geben Sie im Feld URIs den Wert http://localhost:8080 ein.
Klicken Sie auf Erstellen. Die Meldung „OAuth-Client erstellt“ erscheint.
Notieren Sie sich die Client-ID. Dieser Wert wird verwendet, um die Anwendung zu identifizieren, wenn die Nutzerautorisierung mit OAuth2 anfordert. Der Clientschlüssel ist nicht erforderlich für diese Implementierung.
Klicken Sie auf OK.

Suchanwendung erstellen

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

Kehren Sie zur Admin-Konsole zurück.
Klicken Sie auf das Apps-Symbol. Die Seite „App-Verwaltung“ angezeigt.
Klicken Sie auf Google Workspace. Der Bereich „Apps – Google Workspace-Verwaltung“ angezeigt.
Scrollen Sie nach unten und klicken Sie auf Cloud Search. Die Einstellungen für Google Workspace Seite angezeigt wird.
Klicken Sie auf Suchanwendungen. „Search Appplications“ angezeigt.
Klicken Sie auf das runde gelbe +. Die Seite „Neue Suchanwendung erstellen“ wird angezeigt.
Geben Sie im Feld Display name (Anzeigename) „tutorial“ ein.
Klicken Sie auf Erstellen.
Klicken Sie neben der neu erstellten Suchanwendung auf das Stiftsymbol. („Suchanwendung bearbeiten“). Die Seite „Details zur Suchanwendung“ angezeigt.
Notieren Sie sich die Anwendungs-ID.
Klicken Sie rechts neben Datenquellen auf das Stiftsymbol.
Neben „Anleitung“ Klicken Sie auf die Ein/Aus-Schaltfläche Aktivieren. Mit dieser Ein/Aus-Schaltfläche können Sie Die Datenquelle der Anleitung für die neu erstellte Suchanwendung.
Rechts neben „Anleitung“ Datenquelle auf Anzeigeoptionen.
Prüfen Sie alle Attribute.
Klicken Sie auf SPEICHERN.
Klicken Sie auf FERTIG.

Webanwendung konfigurieren

Nachdem Sie die Anmeldedaten und die Suchanwendung erstellt haben, aktualisieren Sie die Anwendung konfigurieren, um diese Werte wie folgt einzubeziehen:

Ändern Sie in der Befehlszeile das Verzeichnis in `cloud-search-samples/end-to-end/search-interface/public.'
Öffnen Sie die Datei app.js in einem Texteditor.
Suchen Sie am Anfang der Datei nach der Variable searchConfig.
Ersetzen Sie [client-id] durch die zuvor erstellte OAuth-Client-ID.
Ersetzen Sie [application-id] durch die ID der Suchanwendung, die im vorherigen Abschnitts.
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:

Öffnen Sie Ihren Browser und rufen Sie http://localhost:8080 auf.
Klicken Sie auf Anmelden, um die App zum Abfragen von Cloud Search zu autorisieren. .
Geben Sie in das Suchfeld eine Suchanfrage ein, z. B. das Wort "Test", und drücken Sie enter eingeben. Die Seite sollte die Abfrageergebnisse zusammen mit Attributen und Paginierung, um durch die Ergebnisse zu navigieren.

Code prüfen

In den verbleibenden Abschnitten wird der Aufbau der Benutzeroberfläche erläutert.

Widget laden

Das Widget und die zugehörigen Bibliotheken werden in zwei Phasen geladen. Erstens: die Bootstrap- Script geladen:

index.html

Auf GitHub ansehen

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

Zweitens wird der onLoad-Callback aufgerufen, sobald das Script bereit ist. Anschließend wird er geladen. den Google API-Client, Google Log-in und die Widget-Bibliotheken für Cloud Search.

app.js

Auf GitHub ansehen

/**
 * 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 verbleibende Initialisierung der App wird von initializeApp durchgeführt sobald alle erforderlichen Bibliotheken geladen sind.

Autorisierung verarbeiten

Nutzer müssen die App autorisieren, Abfragen in ihrem Namen durchzuführen. Während das Widget können Nutzer zur Autorisierung auffordern, können Sie die Nutzererfahrung indem Sie die Autorisierung selbst durchführen.

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

index.html

Auf GitHub ansehen

<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 Anmelde- und Abmeldeereignisse sind konfiguriert:

app.js

Auf GitHub ansehen

/**
 * 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 erfordert etwas HTML-Markup für die Suche. und die Suchergebnisse enthalten:

index.html

Auf GitHub ansehen

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

app.js

Auf GitHub ansehen

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 das Tutorial erfolgreich abgeschlossen! Dem Straßenverlauf von Anweisungen zur Bereinigung.

Zurück Weiter