Konfigurowanie interfejsu użytkownika

Ta strona samouczka Google Cloud Search pokazuje, jak skonfigurować niestandardową aplikację wyszukiwania za pomocą widżetu wyszukiwania, który można umieścić na stronie. Aby rozpocząć ten samouczek od początku, 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 kontynuuj w niej.

2. Z wiersza 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 do wyszukiwarki

Aby wywoływać interfejsy 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. 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. Wyświetli się ekran „Zgoda OAuth”.

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

   2. Wypełnij wymagane pola. Więcej instrukcji znajdziesz w sekcji zgody użytkownika w artykule Konfigurowanie 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 JavaScript kliknij DODAJ URI. Pojawi się puste pole „Identyfikatory URI”.

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

11. Kliknij OK.

Tworzenie wyszukiwarki

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

Uwaga: te czynności musi wykonać administrator domeny.

1. Wróć do konsoli administracyjnej Google.
2. Kliknij ikonę Aplikacje. Wyświetli się strona „Administracja aplikacjami”.
3. Kliknij Google Workspace. Wyświetli się strona „Aplikacje – administracja Google Workspace”.
4. Przewiń w dół i kliknij Cloud Search. Wyświetli się strona „Ustawienia Google Workspace”.
5. Kliknij Wyszukiwarki. Wyświetli 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 zgłoszenia”.
10. Zapisz identyfikator aplikacji.
11. Po prawej stronie Ź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 w przypadku nowo utworzonej wyszukiwarki.
13. Po prawej stronie źródła danych „tutorial” kliknij Opcje wyświetlania.
14. Sprawdź 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 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 zapytań do indeksu

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 zaloguj się, aby autoryzować aplikację do wykonywania zapytań w Cloud Search w Twoim imieniu.
3. W polu wyszukiwania wpisz zapytanie, np. słowo „test”, i naciśnij Enter. Na stronie powinny być wyświetlane wyniki zapytania wraz z aspektami i elementami sterującymi paginacji, które umożliwiają poruszanie się po wynikach.

Sprawdzanie kodu

W pozostałych sekcjach omówimy, jak jest zbudowany interfejs.

Wczytuję widżet

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

index.html

Wyświetl w GitHubie

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

Po drugie, wywołanie zwrotne onLoad jest wywoływane, gdy skrypt jest gotowy. Następnie wczytuje biblioteki klienta interfejsu API Google, logowania przez Google i widżetu Cloud Search.

app.js

Wyświetl w GitHubie

/**
 * 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 initializeApppo załadowaniu wszystkich wymaganych bibliotek.

Obsługa autoryzacji

Użytkownicy muszą autoryzować aplikację, aby mogła wysyłać zapytania w ich imieniu. Chociaż widżet może prosić użytkowników o autoryzację, możesz zapewnić im lepsze wrażenia, samodzielnie obsługując autoryzację.

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

index.html

Wyświetl w GitHubie

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

app.js

Wyświetl w GitHubie

/**
 * 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 dla pola wyszukiwania i wyników wyszukiwania:

index.html

Wyświetl w GitHubie

<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 kontenera podczas inicjowania:

app.js

Wyświetl w GitHubie

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. Dalsze instrukcje dotyczące czyszczenia znajdziesz poniżej.

Wstecz Dalej