Konfigurowanie interfejsu użytkownika

Na tej stronie samouczka Google Cloud Search dowiesz się, jak skonfigurować niestandardową wyszukiwarkę za pomocą widżetu wyszukiwania z możliwością umieszczania. Aby rozpocząć pracę 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 przejdź do niej.

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

Do wywoływania interfejsów Cloud Search API oprogramowanie sprzęgające wymaga danych logowania 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 „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 kolejno Wewnętrzny i 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 OAuth 2.0.

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

6. W polu Name (Nazwa) wpisz „tutorial” (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 „Utworzono klienta OAuth”.

10. Zapisz identyfikator klienta. Ta wartość służy do identyfikowania aplikacji, gdy żąda ona autoryzacji użytkownika za pomocą OAuth2. W przypadku 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 „Administrowanie 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 „Wyszukaj aplikacje”.
6. Kliknij okrągły żółty przycisk +. Pojawi się okno dialogowe „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. Po prawej stronie źródła danych „samouczka” kliknij Opcje wyświetlania.
14. Sprawdź wszystkie aspekty.
15. Kliknij ZAPISZ.
16. Kliknij GOTOWE.

Konfigurowanie aplikacji internetowej

Po utworzeniu danych logowania i wyszukiwarki zaktualizuj konfigurację aplikacji, dodając te wartości:

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. Odszukaj zmienną searchConfig u góry pliku.
4. Zastąp [client-id] wcześniej utworzonym identyfikatorem klienta OAuth.
5. Zastąp [application-id] identyfikatorem wyszukiwarki z poprzedniej sekcji.
6. Zapisz plik.

Uruchamianie aplikacji

Uruchom aplikację, wykonując to polecenie:

npm run start

Wykonywanie zapytania dotyczącego indeksu

Aby wysłać zapytanie do indeksu przy użyciu widżetu wyszukiwania:

1. Otwórz przeglądarkę i wejdź na 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”, a następnie naciśnij Enter. Aby poruszać się po wynikach, musisz wyświetlić na stronie wyniki zapytania wraz z aspektami i elementami sterującymi podziału na strony.

Sprawdzanie kodu

W pozostałych sekcjach przedstawiamy sposób tworzenia interfejsu użytkownika.

Wczytuję widżet

Widżet i powiązane z nim biblioteki są ładowane w 2 etapach. Najpierw wczytuje się skrypt wczytywania:

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

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

/**
 * 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 część inicjowania aplikacji jest obsługiwana przez initializeApp po załadowaniu wszystkich wymaganych bibliotek.

Autoryzacja obsługi

Użytkownicy muszą autoryzować aplikację do wysyłania zapytań w ich imieniu. Widżet może prosić użytkowników o autoryzację, ale możesz zwiększyć wygodę użytkowników, samodzielnie obsługując autoryzację.

Interfejs wyszukiwania przedstawia 2 różne widoki aplikacji w zależności od stanu zalogowania użytkownika.

<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 i skonfigurowane są moduły obsługi zdarzeń logowania i wylogowania:

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

  // ...

}

Tworzę interfejs wyszukiwania

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

<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 wejściowymi i kontenerami podczas inicjowania:

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. Przejdź dalej, aby wyświetlić instrukcje czyszczenia.

Wstecz Dalej