На этой странице руководства Google Cloud Search показано, как настроить приложение пользовательского поиска с помощью встроенного виджета поиска. Чтобы начать работу с этим руководством, обратитесь к руководству по началу работы с Cloud Search .
Установить зависимости
Если соединитель все еще индексирует репозиторий, откройте новую оболочку и продолжайте там.
В командной строке измените каталог на
cloud-search-samples/end-to-end/search-interface
.Чтобы загрузить необходимые зависимости для запуска веб-сервера, выполните следующую команду:
npm install
Создайте учетные данные приложения поиска.
Соединителю требуются учетные данные учетной записи службы для вызова API Cloud Search. Чтобы создать учетные данные:
Вернитесь в консоль Google Cloud .
На панели навигации слева нажмите «Учетные данные» .
В раскрывающемся списке Создать учетные данные выберите Идентификатор клиента OAuth . Откроется страница «Создать идентификатор клиента OAuth».
(Необязательный). Если вы не настроили экран согласия, нажмите НАСТРОИТЬ ЭКРАН СОГЛАСИЯ . Появится экран «Согласие OAuth».
Нажмите «Внутренний» и нажмите «СОЗДАТЬ» . Появится еще один экран «Согласие OAuth».
Заполните обязательные поля. Дополнительные инструкции см. в разделе «Согласие пользователя» статьи «Настройка 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 . На странице должны отображаться результаты запроса вместе с аспектами и элементами управления нумерацией страниц для навигации по результатам.
Проверка кода
В остальных разделах рассматривается, как построен пользовательский интерфейс.
Загрузка виджета
Виджет и связанные библиотеки загружаются в два этапа. Сначала загружается скрипт начальной загрузки:
Во-вторых, обратный вызов onLoad
вызывается, как только скрипт готов. Затем он загружает клиент Google API, средства входа в Google и библиотеки виджетов Cloud Search.
Оставшаяся инициализация приложения выполняется initializeApp
после загрузки всех необходимых библиотек.
Обработка авторизации
Пользователи должны разрешить приложению выполнять запросы от их имени. Хотя виджет может предлагать пользователям пройти авторизацию, вы можете добиться лучшего пользовательского опыта, выполнив авторизацию самостоятельно.
Для интерфейса поиска приложение предоставляет два разных представления в зависимости от состояния входа пользователя.
Во время инициализации включается правильное представление и настраиваются обработчики событий входа и выхода:
Создание интерфейса поиска
Виджет поиска требует небольшого количества HTML-разметки для ввода результатов поиска и хранения результатов поиска:
Виджет инициализируется и привязывается к элементам ввода и контейнеру во время инициализации:
Поздравляем, вы успешно завершили урок! Продолжайте читать инструкции по очистке.