Konfigurowanie interfejsu użytkownika

Ta strona samouczka Google Cloud Search pokazuje, jak skonfigurować wyszukiwarkę niestandardową za pomocą widżetu wyszukiwania, który można umieścić na stronie. Aby rozpocząć ten samouczek od początku, zapoznaj się z samouczkiem Wprowadzenie do Cloud Search.

Instalowanie zależności

  1. Jeśli oprogramowanie sprzęgające nadal indeksuje repozytorium, otwórz nową powłokę i kontynuuj w niej.

  2. W wierszu poleceń przejdź do katalogu cloud-search-samples/end-to-end/search-interface.

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

npm install

Tworzenie danych logowania wyszukiwarki

Oprogramowanie sprzęgające wymaga danych logowania konta usługi do wywoływania interfejsów API Cloud Search. Aby utworzyć dane logowania:

  1. Wróć do konsoli Google Cloud.

  2. W menu po lewej stronie kliknij Dane logowania.

  3. Na liście Utwórz dane logowania wybierz Identyfikator klienta OAuth. Pojawi się strona „Utwórz identyfikator 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 UTWÓRZ. Pojawi się kolejny ekran „Zgoda OAuth”.

    2. Wypełnij wymagane pola. Więcej informacji znajdziesz w sekcji Zgoda 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 został utworzony”.

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

  11. Kliknij OK.

Tworzenie wyszukiwarki

Następnie utwórz wyszukiwarkę w konsoli administracyjnej. Wyszukiwarka jest wirtualną reprezentacją 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 „Administracja aplikacjami Google Workspace”.
  4. Przewiń w dół i kliknij Cloud Search. Pojawi się strona „Ustawienia Google Workspace”.
  5. Kliknij Wyszukiwarki. Pojawi się strona „Wyszukiwarki”.
  6. Kliknij okrągły żółty przycisk +. Pojawi się okno „Utwórz nową wyszukiwarkę”.
  7. W polu Nazwa wyświetlana wpisz „tutorial”.
  8. Kliknij UTWÓRZ.
  9. Obok nowo utworzonej wyszukiwarki kliknij ikonę ołówka („Edytuj wyszukiwarkę”). Pojawi się strona „Szczegóły wyszukiwarki”.
  10. Zapisz Identyfikator aplikacji.
  11. Po prawej stronie Źródła danych kliknij ikonę ołówka.
  12. Obok opcji „tutorial” kliknij przełącznik Włącz. Ten przełącznik włącza źródło danych samouczka dla nowo utworzonej wyszukiwarki.
  13. Po prawej stronie źródła danych „tutorial” kliknij Opcje wyświetlania.
  14. Zaznacz wszystkie aspekty.
  15. Kliknij ZAPISZ.
  16. Kliknij GOTOWE.

Konfigurowanie aplikacji internetowej

Po utworzeniu danych logowania i aplikacji do wyszukiwania zaktualizuj konfigurację aplikacji, aby uwzględnić te wartości:

  1. W wierszu poleceń przejdź do katalogu `cloud-search-samples/end-to-end/search-interface/public`.
  2. Otwórz plik app.js w edytorze tekstu.
  3. U góry pliku znajdź zmienną searchConfig.
  4. Zastąp [client-id] utworzonym wcześniej identyfikatorem klienta OAuth.
  5. Zastąp [application-id] identyfikatorem aplikacji wyszukiwania zapisanym w poprzedniej sekcji.
  6. Zapisz plik.

Uruchamianie aplikacji

Aby uruchomić aplikację, wykonaj to polecenie:

npm run start

Wysyłanie zapytań do indeksu

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

  1. Otwórz przeglądarkę i przejdź do http://localhost:8080.
  2. Kliknij Zaloguj się , aby autoryzować aplikację do wysyłania zapytań do Cloud Search w Twoim imieniu.
  3. W polu wyszukiwania wpisz zapytanie, np. słowo „test”, i naciśnij Enter. Na stronie powinny się wyświetlić wyniki zapytania wraz z aspektami i elementami sterującymi paginacją, które umożliwiają poruszanie się po wynikach.

Sprawdzanie kodu

W pozostałych sekcjach opisujemy, jak jest zbudowany interfejs użytkownika.

Wczytywanie widżetu

Widżet i powiązane biblioteki są wczytywane w 2 etapach. Najpierw wczytywany jest skrypt bootstrap:

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. Wczytuje ono klienta API Google, Logowanie przez Google i biblioteki widżetu wyszukiwania 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łą część inicjowania aplikacji obsługuje funkcja initializeApp po wczytaniu wszystkich wymaganych bibliotek.

Obsługa autoryzacji

Użytkownicy muszą autoryzować aplikację, aby mogła wysyłać zapytania w ich imieniu. Widżet może wyświetlać użytkownikom prośbę o autoryzację, ale lepsze wrażenia użytkownika można uzyskać, samodzielnie obsługując autoryzację.

W przypadku interfejsu wyszukiwania aplikacja wyświetla 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łączany jest prawidłowy widok i konfigurowane są procedury obsługi zdarzeń logowania i wylogowania:

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 kodu HTML do obsługi danych wejściowych wyszukiwania i przechowywania wyników wyszukiwania:

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>

Podczas inicjowania widżet jest inicjowany i powiązany z elementami wejściowymi i kontenerowymi:

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

Gratulacje! Samouczek został ukończony. Postępuj zgodnie z instrukcjami dotyczącymi czyszczenia.

Poprzedni Następny