Эта страница переведена с помощью Cloud Translation API.

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

На этой странице руководства по Google Cloud Search показано, как настроить пользовательское поисковое приложение с помощью встраиваемого виджета поиска. Чтобы начать с самого начала, обратитесь к руководству по началу работы с Cloud Search .

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

Если коннектор все еще индексирует репозиторий, откройте новую оболочку и продолжите работу в ней.
В командной строке измените каталог на cloud-search-samples/end-to-end/search-interface .
Чтобы загрузить необходимые зависимости для запуска веб-сервера, выполните следующую команду:

npm install

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

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

Вернитесь в консоль Google Cloud .
В левой навигационной панели нажмите Учетные данные .
В раскрывающемся списке «Создать учётные данные» выберите «Идентификатор клиента OAuth» . Откроется страница «Создать идентификатор клиента OAuth».
(Необязательно). Если вы ещё не настроили экран согласия, нажмите «НАСТРОЙКА ЭКРАНА СОГЛАСИЯ» . Откроется экран «Согласие OAuth».
1. Нажмите «Внутренний» и нажмите «СОЗДАТЬ» . Появится ещё один экран «Согласие на OAuth».
2. Заполните обязательные поля. Дополнительные инструкции см. в разделе «Согласие пользователя» документа «Настройка OAuth 2.0» .
Щелкните раскрывающийся список Тип приложения и выберите Веб-приложение .
В поле Имя введите «tutorial».
В поле «Авторизованные источники JavaScript» нажмите «ДОБАВИТЬ URI» . Появится пустое поле «URI».
В поле URI введите http://localhost:8080 .
Нажмите «СОЗДАТЬ» . Появится экран «Клиент OAuth создан».
Запишите идентификатор клиента. Это значение используется для идентификации приложения при запросе авторизации пользователя через OAuth2. Секретный ключ клиента для этой реализации не требуется.
Нажмите ОК .

Создать поисковое приложение

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

Вернитесь в консоль администратора Google .
Нажмите на значок «Приложения». Откроется страница «Управление приложениями».
Нажмите Google Workspace . Откроется страница «Приложения · Администрирование Google Workspace».
Прокрутите вниз и нажмите «Cloud Search» . Откроется страница «Настройки Google Workspace».
Нажмите «Поиск приложений» . Откроется страница «Поиск приложений».
Нажмите круглый жёлтый значок «+» . Откроется диалоговое окно «Создать новое поисковое приложение».
В поле Отображаемое имя введите «tutorial».
Нажмите СОЗДАТЬ .
Нажмите на значок карандаша рядом с созданным поисковым приложением («Изменить поисковое приложение»). Откроется страница «Сведения о поисковом приложении».
Запишите идентификатор приложения .
Справа от пункта «Источники данных» нажмите на значок карандаша.
Рядом с пунктом «tutorial» нажмите переключатель «Enable» (Включить ). Этот переключатель включает источник данных для обучающего материала для недавно созданного поискового приложения.
Справа от источника данных «tutorial» нажмите Параметры отображения .
Проверьте все аспекты.
Нажмите СОХРАНИТЬ .
Нажмите ГОТОВО .

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

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

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

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

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

npm run start

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

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

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

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

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

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

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

index.html

Посмотреть на GitHub

<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

Посмотреть на GitHub

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

Посмотреть на GitHub

<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

Посмотреть на GitHub

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

Посмотреть на GitHub

<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

Посмотреть на GitHub

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

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

Предыдущий Следующий

Настройте пользовательский интерфейс Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

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

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

Создать поисковое приложение

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

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

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

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

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

Разрешение на обработку

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

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