Konfigurowanie interfejsu użytkownika

Na tej stronie samouczka Google Cloud Search znajdziesz informacje o tym, jak skonfigurować niestandardowe za pomocą osadzonego widżetu wyszukiwania. Aby zacząć od początku tego samouczka, zapoznaj się z artykułem Samouczek dla początkujących dotyczący Cloud Search

Instalowanie zależności

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

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

3. Aby pobrać wymagane zależności dla uruchamiając serwer WWW, uruchom to polecenie:

npm install

Tworzenie danych logowania do wyszukiwarki

Oprogramowanie sprzęgające wymaga danych logowania konta usługi do wywoływania Cloud Search API. 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. Pole „Utwórz identyfikator klienta OAuth”

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

   1. Kliknij kolejno Wewnętrzny i UTWÓRZ. inna opcja „Zgoda OAuth”; Ekran

   2. Wypełnij wymagane pola. Dalsze instrukcje można znaleźć sekcji zgody dotyczącej Konfigurowanie protokołu OAuth 2.0.

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

6. W polu Name (Nazwa) wpisz „tutorial” (samouczek).

7. W polu Autoryzowane źródła JavaScript kliknij DODAJ URI. Puste „Identyfikatory URI” .

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

9. Kliknij UTWÓRZ. „Utworzono klienta OAuth” ekranu.

10. Zapisz identyfikator klienta. Ta wartość służy do identyfikowania aplikacji, gdy żądania autoryzacji użytkownika za pomocą protokołu OAuth2. Tajny klucz klienta nie jest wymagany na potrzeby tej implementacji.

11. Kliknij OK.

Tworzenie wyszukiwarki

Następnie utwórz wyszukiwarkę w konsoli administracyjnej. Wyszukiwarka to wirtualna reprezentacja interfejsu wyszukiwania konfiguracji.

1. Wróć do konsoli administracyjnej Google.
2. Kliknij ikonę Aplikacje. W sekcji „Administracja aplikacjami”
3. Kliknij Google Workspace. Sekcja „Administracja aplikacjami Google Workspace”
4. Przewiń w dół i kliknij Cloud Search. Ustawienia Google Workspace strona
5. Kliknij Wyszukiwarki. Wyszukiwarka
6. Kliknij okrągły żółty symbol +. Opcja „Utwórz nową wyszukiwarkę” które się wyświetla.
7. W polu Wyświetlana nazwa wpisz „tutorial”.
8. Kliknij UTWÓRZ.
9. Kliknij ikonę ołówka obok nowo utworzonej wyszukiwarki. („Edytuj wyszukiwarkę”). 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 umożliwia włączenie źródła danych samouczka dla nowo utworzonej wyszukiwarki.
13. Po prawej stronie „samouczka” źródła danych, kliknij Opcje wyświetlania.
14. Sprawdź wszystkie aspekty.
15. Kliknij ZAPISZ.
16. Kliknij GOTOWE.

Konfigurowanie aplikacji internetowej

Po utworzeniu danych logowania i wyszukiwarki zaktualizuj aplikację , tak aby zawierały 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 podanym w polu 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 sign in (Zaloguj się), aby autoryzować aplikację do wysyłania zapytań do Cloud Search. w Twoim imieniu.
3. W polu wyszukiwania wpisz zapytanie, np. „test”, i naciśnij Enter. Na stronie powinny wyświetlić się wyniki zapytania wraz z aspektami i elementy sterujące podziałem 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. Po pierwsze, skrypt został wczytany:

<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 się klient 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łą inicjalizacja 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. Gdy widżet możesz prosić użytkowników o autoryzację, możesz zapewnić użytkownikom lepsze wrażenia samodzielnie przeprowadzając autoryzację.

W interfejsie wyszukiwania aplikacja wyświetla 2 różne widoki w zależności od na temat 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 inicjowania włączony jest właściwy widok, a odpowiednie moduły obsługi są skonfigurowane zdarzenia zalogowania 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 użycia niewielkiej ilości znaczników HTML na potrzeby wyszukiwania wprowadzania i przytrzymywania 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 zostanie zainicjowany 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. Jedź dalej przez jak je wyczyścić.

Wstecz Dalej