Konfigurowanie interfejsu użytkownika

Na tej stronie samouczka Google Cloud Search pokazujemy, jak skonfigurować niestandardową wyszukiwarkę za pomocą umieszczonego widżetu wyszukiwania. Aby zacząć od początku tego samouczka, zapoznaj się z samouczkiem wprowadzającym do Cloud Search.

Instalowanie zależności

  1. Jeśli oprogramowanie sprzęgające nadal indeksuje repozytorium, otwórz nową powłokę i tam przejdź dalej.

  2. W wierszu poleceń zmień katalog na cloud-search-samples/end-to-end/search-interface.

  3. Aby pobrać zależności wymagane do uruchomienia serwera WWW, uruchom to polecenie:

npm install

Tworzenie danych logowania do wyszukiwarki

Aby móc wywoływać interfejsy Cloud Search API, oprogramowanie sprzęgające wymaga danych logowania do konta usługi. Aby utworzyć dane logowania:

  1. Wróć do konsoli Google Cloud.

  2. W menu po lewej stronie kliknij Dane logowania.

  3. Z listy Utwórz dane logowania wybierz Identyfikator klienta OAuth. Pojawi się strona „Tworzenie identyfikatora klienta OAuth”.

  4. Opcjonalnie: Jeśli nie masz skonfigurowanego ekranu zgody, kliknij SKONFIGURUJ EKRAN ZGODY. Pojawi się ekran „Zgoda OAuth”.

    1. Kliknij Wewnętrzne i wybierz UTWÓRZ. Pojawi się kolejny ekran „Zgoda OAuth”.

    2. Wypełnij wymagane pola. Dalsze instrukcje znajdziesz w sekcji dotyczącej zgody użytkownika w artykule Konfigurowanie protokołu OAuth 2.0.

  5. Kliknij listę Typ aplikacji i wybierz Aplikacja internetowa.

  6. W polu Nazwa wpisz „tutorial”.

  7. W polu Autoryzowane źródła JavaScript kliknij DODAJ URI. Pojawi się puste pole „Identyfikatory URI”.

  8. W polu Identyfikatory URI wpisz http://localhost:8080.

  9. Kliknij UTWÓRZ. Pojawi się ekran „Klient OAuth utworzony”.

  10. Zapisz identyfikator klienta. Ta wartość służy do identyfikowania aplikacji w przypadku żądania autoryzacji użytkownika za pomocą protokołu OAuth2. W tej implementacji nie jest wymagany tajny klucz klienta.

  11. Kliknij OK.

Tworzenie wyszukiwarki

Następnie utwórz wyszukiwarkę w konsoli administracyjnej. Wyszukiwarka to wirtualna reprezentacja interfejsu wyszukiwania i jego domyślnej konfiguracji.

  1. Wróć do konsoli administracyjnej Google.
  2. Kliknij ikonę Aplikacje. Pojawi się strona „Administracja aplikacjami”.
  3. Kliknij Google Workspace. Pojawi się strona „Administrowanie aplikacjami w Google Workspace”.
  4. Przewiń w dół i kliknij Cloud Search. Pojawi się strona „Ustawienia Google Workspace”.
  5. Kliknij Wyszukiwarki. Pojawi się strona „Wyszukaj aplikacje”.
  6. Kliknij okrągły żółty przycisk +. Pojawi się okno „Utwórz nową wyszukiwarkę”.
  7. W polu Wyświetlana nazwa wpisz „tutorial”.
  8. Kliknij UTWÓRZ.
  9. Kliknij ikonę ołówka obok nowo utworzonej wyszukiwarki („Edytuj wyszukiwarkę”). Pojawi się strona „Szczegóły wyszukiwarki”.
  10. Zapisz identyfikator aplikacji.
  11. Po prawej stronie opcji Źródła danych kliknij ikonę ołówka.
  12. Obok opcji „samouczek” kliknij przełącznik Włącz. Ten przełącznik włącza źródło danych samouczka dla nowo utworzonej wyszukiwarki.
  13. Na prawo od źródła danych „samouczek” kliknij Opcje wyświetlania.
  14. Sprawdź wszystkie aspekty.
  15. Kliknij ZAPISZ.
  16. Kliknij GOTOWE.

Skonfiguruj aplikację internetową

Po utworzeniu danych logowania i aplikacji do wyszukiwania zaktualizuj konfigurację aplikacji, aby uwzględnić te wartości w następujący sposób:

  1. W wierszu poleceń zmień katalog na „cloud-search-samples/end-to-end/search-interface/public”.
  2. Otwórz plik app.js w edytorze tekstu.
  3. Znajdź zmienną searchConfig u góry pliku.
  4. Zastąp [client-id] utworzonym wcześniej identyfikatorem klienta OAuth.
  5. Zastąp [application-id] identyfikatorem wyszukiwarki zanotowanym w poprzedniej sekcji.
  6. Zapisz plik.

Uruchamianie aplikacji

Uruchom aplikację, korzystając z tego polecenia:

npm run start

Wykonywanie zapytania w indeksie

Aby wysłać zapytanie do indeksu za pomocą widżetu wyszukiwania:

  1. Otwórz przeglądarkę i wejdź na stronę http://localhost:8080.
  2. Kliknij Sign in (Zaloguj się), aby autoryzować aplikację do wysyłania zapytań do Cloud Search w Twoim imieniu.
  3. W polu wyszukiwania wpisz zapytanie, na przykład słowo „test”, i naciśnij Enter. Strona powinna wyświetlać wyniki zapytania wraz z aspektami i elementami sterującymi podziału na strony, aby umożliwić nawigację między wynikami.

Sprawdzanie kodu

W pozostałych sekcjach omawiamy projekt interfejsu.

Wczytuję widżet

Widżet i powiązane biblioteki są wczytywane w dwóch etapach. Najpierw wczytywany jest skrypt wczytywania:

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

Następnie, gdy skrypt jest gotowy, wywoływane jest wywołanie zwrotne onLoad. Następnie wczytuje klienta interfejsu API Google, Logowanie przez Google oraz biblioteki widżetów Cloud Search.

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

Pozostała inicjalizacja aplikacji jest obsługiwana przez initializeApp po wczytaniu wszystkich wymaganych bibliotek.

Autoryzacja obsługi

Użytkownicy muszą upoważnić aplikację do wysyłania zapytań w ich imieniu. Widżet może prosić użytkowników o autoryzację, ale możesz poprawić komfort użytkowników, przeprowadzając autoryzację samodzielnie.

W przypadku interfejsu wyszukiwania aplikacja prezentuje 2 różne widoki w zależności od stanu logowania użytkownika.

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>

Podczas inicjowania włączony jest właściwy widok, a moduły obsługi zdarzeń logowania i wylogowywania są skonfigurowane:

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

  // ...

}

Tworzenie interfejsu wyszukiwania

Widżet wyszukiwania wymaga niewielkiej ilości znaczników HTML na potrzeby danych wejściowych wyszukiwania i przechowywania wyników:

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>

Widżet jest inicjowany i powiązany z elementami danych wejściowych i kontenerem podczas inicjowania:

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

Gratulujemy! Udało Ci się ukończyć samouczek. Dalej znajdziesz instrukcje czyszczenia.

Wstecz Dalej