Konfigurowanie interfejsu użytkownika

Na tej stronie samouczka wyszukiwarki Google Cloud znajdziesz informacje o tym, jak skonfigurować niestandardową aplikację wyszukiwania za pomocą widżetu wyszukiwarki. Aby rozpocząć samouczek od początku, zapoznaj się z samouczkiem wprowadzającym Cloud Search.

Instalowanie zależności

1. Jeśli łącznik nadal indeksuje repozytorium, otwórz nową powłokę i kontynuuj.

2. Z poziomu wiersza poleceń zmień katalog na cloud-search-samples/end-to-end/search-interface.

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

npm install

Tworzenie danych logowania do wyszukiwarki

Aby wywoływać interfejsy Cloud Search API, sprzęg wymaga danych logowania do konta usługi. Aby utworzyć dane logowania:

1. Wróć do konsoli Google Cloud.

2. W panelu nawigacyjnym po lewej stronie kliknij Dane logowania.

3. Na liście Utwórz dane logowania kliknij Identyfikator klienta OAuth. Pojawi się strona „Tworzenie identyfikatora klienta OAuth”.

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

   1. Kliknij Wewnętrzny, a potem UTWÓRZ. Pojawi się kolejny ekran „Zgody OAuth”.

   2. Wypełnij wymagane pola. Więcej instrukcji znajdziesz w sekcji dotyczącej zgody użytkownika w artykule o konfigurowaniu OAuth 2.0.

5. Kliknij listę Application type (Typ aplikacji) i wybierz Web application (Aplikacja internetowa).

6. W polu Nazwa wpisz „tutorial”.

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

8. W polu 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 podczas żądania autoryzacji użytkownika za pomocą OAuth 2. W przypadku tej implementacji nie jest wymagany tajny klucz klienta.

11. Kliknij OK.

Tworzenie wyszukiwarki

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

1. Wróć do konsoli administracyjnej Google.
2. Kliknij ikonę aplikacji. Pojawi się strona „Administracja aplikacjami”.
3. Kliknij Google Workspace. Pojawi się strona „Administracja Google Workspace”.
4. Przewiń w dół i kliknij Cloud Search (Wyszukiwanie w chmurze). Pojawi się strona „Ustawienia Google Workspace”.
5. Kliknij Wyszukiwarki. Pojawi się strona „Aplikacje wyszukiwania”.
6. Kliknij żółte kółko +. Pojawi się okno „Tworzenie nowej wyszukiwarki”.
7. W polu Wyświetlana nazwa wpisz „tutorial”.
8. Kliknij UTWÓRZ.
9. Kliknij ikonę ołówka obok utworzonej wyszukiwarki („Edytuj wyszukiwarkę”). Pojawi się strona „Szczegóły aplikacji wyszukiwania”.
10. Zapisz identyfikator aplikacji.
11. Po prawej stronie sekcji Ź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 z samouczka dla nowo utworzonej wyszukiwarki.
13. Po prawej stronie źródła danych „Samouczek” kliknij Opcje wyświetlania.
14. Sprawdź wszystkie kolumny.
15. Kliknij ZAPISZ.
16. Kliknij GOTOWE.

Konfigurowanie aplikacji internetowej

Po utworzeniu danych logowania i aplikacji wyszukiwania zaktualizuj konfigurację aplikacji, aby uwzględnić te wartości w ten 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 podanym w poprzedniej sekcji.
6. Zapisz plik.

Uruchamianie aplikacji

Uruchom aplikację, wykonując to polecenie:

npm run start

Wysyłanie zapytania do indeksu

Aby zapytać indeks za pomocą widżetu wyszukiwania:

1. Otwórz przeglądarkę i wejdź na stronę 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 wyświetlać się wyniki zapytania wraz z aspektami i elementami przewijania, które umożliwiają poruszanie się po wynikach.

Sprawdzanie kodu

Pozostałe sekcje opisują sposób tworzenia interfejsu użytkownika.

Ładowanie widżetu

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

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

Po drugie, gdy skrypt jest gotowy, wywoływana jest funkcja onLoad. Następnie wczytuje biblioteki klienta interfejsu Google API, logowania Google i widżetów wyszukiwarki Cloud.

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

Po załadowaniu wszystkich wymaganych bibliotek pozostałą część inicjalizacji aplikacji przejmuje initializeApp.

Obsługa autoryzacji

Użytkownicy muszą zezwolić aplikacji na wysyłanie zapytań w ich imieniu. Widget może wyświetlać użytkownikom prośbę o autoryzację, ale możesz też samodzielnie zadbać o autoryzację, aby zapewnić użytkownikom lepsze wrażenia.

W interfejsie wyszukiwania aplikacja wyświetla 2 widoki w zależności od stanu logowania 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 inicjalizacji włączana jest odpowiednia widok i konfigurowane są moduły obsługi zdarzeń logowania i wylogowywania:

/**
 * 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 wprowadzania zapytań i przechowywania wyników wyszukiwania:

<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 wiązany z elementami danych wejściowych oraz elementami kontenera 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();

Gratulacje! Samouczek został ukończony. Przejdź dalej, aby uzyskać instrukcje czyszczenia.

Wstecz Dalej