Настройте пользовательский интерфейс

This page of the Google Cloud Search tutorial shows how to set up a custom search application using the embeddable search widget. To start from the beginning of this tutorial, refer to Cloud Search getting started tutorial .

Установите зависимости

  1. Если коннектор все еще индексирует репозиторий, откройте новую оболочку и продолжите там.

  2. В командной строке перейдите в каталог cloud-search-samples/end-to-end/search-interface .

  3. Для загрузки необходимых зависимостей для работы веб-сервера выполните следующую команду: 

npm install

Создайте учетные данные для поискового приложения.

Для вызова API Cloud Search коннектору требуются учетные данные сервисной учетной записи. Чтобы создать учетные данные:

  1. Вернуться в консоль Google Cloud .

  2. В левой панели навигации нажмите «Учетные данные» .

  3. В раскрывающемся списке «Создать учетные данные» выберите «Идентификатор клиента OAuth ». Откроется страница «Создать идентификатор клиента OAuth».

  4. (Необязательно). Если вы еще не настроили экран согласия, нажмите «НАСТРОИТЬ ЭКРАН СОГЛАСИЯ» . Появится экран «Согласие OAuth».

    1. Нажмите «Внутренний» и затем «СОЗДАТЬ» . Появится еще один экран «Согласие OAuth».

    2. Заполните обязательные поля. Дополнительные инструкции см. в разделе согласия пользователя в руководстве по настройке OAuth 2.0 .

  5. Щелкните раскрывающийся список «Тип приложения» и выберите «Веб-приложение» .

  6. В поле «Имя» введите «учебное пособие».

  7. В поле «Авторизованные источники JavaScript» нажмите «ДОБАВИТЬ URI» . Появится пустое поле «URIs».

  8. В поле URI введите http://localhost:8080 .

  9. Нажмите кнопку СОЗДАТЬ . Появится экран «Клиент OAuth создан».

  10. Обратите внимание на идентификатор клиента. Это значение используется для идентификации приложения при запросе авторизации пользователя с помощью OAuth2. Секретный ключ клиента для данной реализации не требуется.

  11. Нажмите ОК .

Создайте приложение для поиска.

Далее создайте приложение поиска в консоли администратора. Приложение поиска представляет собой виртуальное отображение интерфейса поиска и его конфигурации по умолчанию.

  1. Вернитесь в консоль администратора Google .
  2. Нажмите на значок «Приложения». Откроется страница «Администрирование приложений».
  3. Нажмите «Google Workspace» . Откроется страница «Администрирование приложений Google Workspace».
  4. Прокрутите вниз и нажмите «Облачный поиск ». Откроется страница «Настройки Google Workspace».
  5. Нажмите «Поиск приложений» . Откроется страница «Поиск приложений».
  6. Нажмите на круглую желтую кнопку «+» . Откроется диалоговое окно «Создать новое приложение для поиска».
  7. В поле «Отображаемое имя » введите «tutorial».
  8. Нажмите СОЗДАТЬ .
  9. Нажмите на значок карандаша рядом с только что созданным приложением поиска («Редактировать приложение поиска»). Откроется страница «Подробности о приложении поиска».
  10. Обратите внимание на идентификатор приложения .
  11. Справа от раздела «Источники данных» нажмите на значок карандаша.
  12. Рядом с пунктом «Учебное пособие» нажмите переключатель «Включить ». Этот переключатель активирует источник данных учебного пособия для только что созданного поискового приложения.
  13. Справа от источника данных «учебное пособие» нажмите «Параметры отображения» .
  14. Проверьте все аспекты.
  15. Нажмите СОХРАНИТЬ .
  16. Нажмите «ГОТОВО» .

Настройте веб-приложение

После создания учетных данных и приложения поиска обновите конфигурацию приложения, добавив следующие значения:

  1. В командной строке перейдите в каталог `cloud-search-samples/end-to-end/search-interface/public`.
  2. Откройте файл app.js в текстовом редакторе.
  3. Найдите переменную searchConfig в верхней части файла.
  4. Замените [client-id] на ранее созданный идентификатор клиента OAuth.
  5. Замените [application-id] на идентификатор поискового приложения, указанный в предыдущем разделе.
  6. Сохраните файл.

Запустите приложение

Запустите приложение, выполнив следующую команду:

npm run start

Запрос к индексу

Для выполнения запроса к индексу с помощью виджета поиска:

  1. Откройте браузер и перейдите по адресу http://localhost:8080 .
  2. Нажмите «Войти» , чтобы разрешить приложению отправлять запросы в Cloud Search от вашего имени.
  3. В поле поиска введите запрос, например, слово «тест», и нажмите Enter . На странице должны отобразиться результаты запроса, а также фильтры и элементы управления пагинацией для навигации по результатам.

Проверка кода

В оставшихся разделах рассматривается, как создается пользовательский интерфейс.

Загрузка виджета

Виджет и связанные с ним библиотеки загружаются в два этапа. Сначала загружается скрипт начальной загрузки:

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

Во-вторых, функция обратного вызова onLoad вызывается, как только скрипт готов. Затем загружаются клиент Google API, Google Sign-in и библиотеки виджетов 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)
}

Завершающая инициализация приложения выполняется функцией initializeApp после загрузки всех необходимых библиотек.

Обработка авторизации

Пользователи должны авторизовать приложение для выполнения запросов от их имени. Хотя виджет может запрашивать у пользователей подтверждение, вы можете улучшить пользовательский опыт, самостоятельно обрабатывая авторизацию.

В зависимости от состояния авторизации пользователя, приложение отображает два разных варианта интерфейса поиска.

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>

В процессе инициализации включается корректный интерфейс, и настраиваются обработчики событий входа и выхода из системы:

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

  // ...

}

Создание интерфейса поиска

Для работы виджета поиска требуется небольшой HTML-код для поля ввода и отображения результатов поиска:

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>

Виджет инициализируется и привязывается к элементам ввода и контейнера во время инициализации:

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

Поздравляем, вы успешно завершили обучение! Далее следуют инструкции по очистке.

Предыдущая Следующая