Эта страница переведена с помощью 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» .
Щелкните раскрывающийся список Тип приложения и выберите Веб-приложение .
В поле Имя введите «учебник».
В поле «Авторизованные источники JavaScript» нажмите «ДОБАВИТЬ URI» . Появится пустое поле «URI».
В поле URI введите http://localhost:8080 .
Нажмите СОЗДАТЬ . Появится экран «Клиент OAuth создан».
Обратите внимание на идентификатор клиента. Это значение используется для идентификации приложения при запросе авторизации пользователя с помощью OAuth2. Для этой реализации секрет клиента не требуется.
Нажмите ОК .

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

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

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

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

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

В командной строке измените каталог на «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 и библиотеки виджетов Cloud Search.

приложение.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>

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

приложение.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>

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

приложение.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();

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

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