В этом руководстве показано, как создать приложение Google Chat, которое помогает пользователям Google Chat управлять своими личными и деловыми контактами. Для сбора информации приложение «Чат» предлагает пользователям заполнить контактную форму в карточных сообщениях и диалогах.
Посмотрите приложение Чат в действии:
Рисунок 2. Приложение «Чат» открывает диалоговое окно, в котором пользователи могут ввести информацию о контакте. Рисунок 3. Приложение Chat возвращает диалоговое окно подтверждения, чтобы пользователи могли просмотреть и подтвердить информацию перед отправкой. Рисунок 4. После того, как пользователь отправит форму, приложение Chat отправляет личное текстовое сообщение для подтверждения отправки. Рисунок 5. Приложение «Чат» также предлагает пользователям добавить контакт из карточки в сообщении.
Предварительные условия
- Аккаунт Google Workspace для бизнеса или предприятия с доступом к Google Chat .
Цели
- Проектируйте и создавайте пользовательские интерфейсы (UI) в виде объектов
card
и отображайте их в сообщениях и диалогах. - Получайте и обрабатывайте информацию, которую пользователи отправляют с помощью виджетов ввода форм .
- Отвечайте на команды с косой чертой , отправляя сообщения, содержащие текст, карточки и дополнительные виджеты.
Архитектура
Приложение Chat создано на основе Google Apps Script и использует события взаимодействия для обработки пользователей чата и ответа на них.
Ниже показано, как обычно пользователь может взаимодействовать с приложением Chat:
Пользователь открывает прямое сообщение с помощью приложения Chat или добавляет приложение Chat в существующее пространство.
Приложение «Чат» предлагает пользователю добавить контакт, создав и отобразив контактную форму в виде объекта
card
. Чтобы представить контактную форму, приложение Chat отвечает пользователям следующим образом:- Отвечает на @упоминания и прямые сообщения сообщением-карточкой, содержащей контактную форму.
- Отвечает на команду
/addContact
, открывая диалог с контактной формой. - Отвечает на команду косой черты
/about
текстовым сообщением с кнопкой «Добавить контакт» , которую пользователи могут нажать, чтобы открыть диалоговое окно с контактной формой.
При отображении контактной формы пользователь вводит контактную информацию в следующие поля и виджеты:
- Имя и фамилия : виджет
textInput
, который принимает строки. - Birthdate : виджет
dateTimePicker
, который принимает только даты. - Тип контакта : виджет
selectionInput
с переключателями, который позволяет пользователям выбирать и отправлять одно строковое значение (Personal
илиWork
). - Кнопка «Просмотреть и отправить» : массив
buttonList
с виджетомbutton
, который пользователь нажимает, чтобы отправить введенные значения.
- Имя и фамилия : виджет
Приложение Google Chat обрабатывает событие взаимодействия
CARD_CLICKED
для обработки значений, которые вводит пользователь, и отображает значения в карточке подтверждения.Пользователь просматривает карточку подтверждения и нажимает кнопку «Отправить», чтобы завершить ввод контактной информации.
Приложение Google Chat отправляет личное текстовое сообщение, подтверждающее отправку.
Подготовьте окружающую среду
В этом разделе показано, как создать и настроить проект Google Cloud для приложения Chat.
Создайте проект Google Cloud
Консоль Google Cloud
- В консоли Google Cloud выберите > IAM и администрирование > Создать проект .
- В поле «Имя проекта » введите описательное имя вашего проекта.
Необязательно: Чтобы изменить идентификатор проекта , нажмите «Изменить» . Идентификатор проекта нельзя изменить после его создания, поэтому выберите идентификатор, который соответствует вашим потребностям на протяжении всего срока существования проекта.
- В поле «Местоположение » нажмите «Обзор» , чтобы отобразить возможные местоположения для вашего проекта. Затем нажмите «Выбрать» .
- Нажмите Создать . Консоль Google Cloud перейдет на страницу панели инструментов, и ваш проект будет создан в течение нескольких минут.
интерфейс командной строки gcloud
В одной из следующих сред разработки получите доступ к Google Cloud CLI ( gcloud
):
- Cloud Shell : чтобы использовать онлайн-терминал с уже настроенным интерфейсом командной строки gcloud, активируйте Cloud Shell.
Активировать Cloud Shell - Локальная оболочка : чтобы использовать локальную среду разработки, установите и инициализируйте интерфейс командной строки gcloud.
Чтобы создать облачный проект, используйте командуgcloud projects create
:gcloud projects create PROJECT_ID
Настройте аутентификацию и авторизацию
Приложения Google Chat требуют настройки экрана согласия OAuth , чтобы пользователи могли авторизовать ваше приложение в приложениях Google Workspace, включая Google Chat.
В этом руководстве вы развернете приложение чата, предназначенное только для тестирования и внутреннего использования, поэтому можно использовать информацию-заполнитель для экрана согласия. Прежде чем публиковать приложение Chat, замените все заполнители реальной информацией.
API и службы > Экран согласия OAuth .
>В разделе «Тип пользователя» выберите «Внутренний» , затем нажмите «Создать» .
В поле «Имя приложения» введите
Contact Manager
.В разделе «Электронная почта поддержки пользователей» выберите свой адрес электронной почты или соответствующую группу Google.
В разделе «Контактная информация разработчика» введите свой адрес электронной почты.
Нажмите «Сохранить и продолжить» .
На странице «Области» нажмите «Сохранить и продолжить» . (Приложению Chat не требуются области OAuth.)
Просмотрите сводку и нажмите «Вернуться на панель мониторинга» .
Создание и развертывание приложения чата
В следующем разделе вы скопируете и обновите весь проект Apps Script, содержащий весь необходимый код приложения для вашего приложения Chat, поэтому нет необходимости копировать и вставлять каждый файл.
При желании вы можете просмотреть весь проект на GitHub.
Вот обзор каждого файла:
-
main.gs
Обрабатывает всю логику приложения, включая события взаимодействия, когда пользователи отправляют сообщения в приложение Chat, нажимают кнопки в сообщении приложения Chat или открывают и закрывают диалоговые окна.
Посмотреть код
main.gs
-
contactForm.gs
Содержит виджеты, которые получают данные формы от пользователей. Эти виджеты ввода формы отображаются в карточках, которые появляются в сообщениях и диалоговых окнах.
Посмотреть код
contactForm.gs
-
appsscript.json
Манифест Apps Script , который определяет и настраивает проект Apps Script для приложения Chat.
Посмотреть код
appsscript.json
Найдите номер и идентификатор своего облачного проекта
В консоли Google Cloud перейдите к своему облачному проекту.
Нажмите «Настройки и утилиты» > «Настройки проекта» .
Обратите внимание на значения в полях Номер проекта и Идентификатор проекта . Вы будете использовать их в следующих разделах.
Создайте проект скрипта приложений.
Чтобы создать проект Apps Script и связать его с проектом Cloud:
- Нажмите следующую кнопку, чтобы открыть проект сценария «Управление контактами в приложениях Google Chat» .
Открыть проект - Нажмите Обзор .
- На странице обзора нажмите Сделайте копию .
Назовите свою копию проекта Apps Script:
Нажмите «Копия управления контактами в Google Chat» .
В названии проекта введите
Contact Manager - Google Chat app
Нажмите «Переименовать» .
Установите облачный проект проекта Apps Script.
- В проекте Apps Script нажмите Настройки проекта .
- В разделе «Проект Google Cloud Platform (GCP)» нажмите «Изменить проект» .
- В поле «Номер проекта GCP» вставьте номер вашего облачного проекта.
- Нажмите Установить проект . Проект Cloud и проект Apps Script теперь связаны.
Создание развертывания скрипта приложений
Теперь, когда весь код готов, разверните проект Apps Script. Идентификатор развертывания используется при настройке приложения Chat в Google Cloud.
В Apps Script откройте проект приложения Chat.
Нажмите «Развертывание» > «Новое развертывание» .
Если надстройка еще не выбрана, рядом с пунктом «Выбрать тип» щелкните «Типы развертывания». и выберите «Дополнение» .
В поле «Описание» введите описание этой версии, например
Test of Contact Manager
.Нажмите «Развернуть» . Apps Script сообщает об успешном развертывании и предоставляет идентификатор развертывания.
Нажмите
Копировать », чтобы скопировать идентификатор развертывания, а затем нажмите «Готово» .
Настройте приложение Chat в консоли Google Cloud.
В этом разделе показано, как настроить API Google Chat в консоли Google Cloud, используя информацию о вашем приложении Chat, включая идентификатор развертывания, которое вы только что создали из проекта Apps Script.
В консоли Google Cloud нажмите Меню > продукты > Google Workspace > Библиотека продуктов > Google Chat API > Управление > Конфигурация .
В поле «Имя приложения» введите
Contact Manager
.В URL-адресе аватара введите
https://developers.google.com/chat/images/contact-icon.png
.В поле «Описание» введите
Manage your personal and business contacts
.Установите переключатель «Включить интерактивные функции» во включенное положение.
В разделе «Функциональность» установите флажки « Получать сообщения 1:1» и «Присоединяться к группам и групповым беседам» .
В разделе «Настройки подключения » выберите «Скрипт приложений» .
В поле «Идентификатор развертывания » вставьте идентификатор развертывания Apps Script, который вы скопировали в предыдущем разделе при создании развертывания Apps Script.
В разделе «Команды косой черты » настройте команды косой черты
/about
и/addContact
:- Нажмите «Добавить команду косой черты» , чтобы настроить первую команду косой черты.
- В поле Имя введите
/about
. - В поле «Идентификатор команды» введите
1
. - В поле «Описание » введите
Learn how to use this Chat app to manage your contacts
. - Выбрать Открывает диалоговое окно .
- Нажмите Готово .
- Нажмите «Добавить команду косой черты» , чтобы настроить другую команду косой черты.
- В поле Имя введите
/addContact
- В поле «Идентификатор команды» введите
2
. - В поле «Описание» введите
Submit information about a contact
. - Выбрать Открывает диалоговое окно .
- Нажмите Готово .
В разделе «Видимость » установите флажок «Сделать этот чат доступным для определенных людей и групп в YOUR DOMAIN и введите свой адрес электронной почты.
В разделе «Журналы» выберите «Записывать ошибки в журнал» .
Нажмите Сохранить . Появится сообщение о сохранении конфигурации.
Приложение Chat готово к установке и тестированию в Chat.
Протестируйте приложение Чат
Чтобы протестировать приложение Chat, откройте пространство для прямых сообщений в приложении Chat и отправьте сообщение:
Откройте Google Chat, используя учетную запись Google Workspace, которую вы указали при добавлении себя в качестве доверенного тестировщика.
- Нажмите новый чат» .
- В поле «Добавить 1 или несколько человек» введите название вашего приложения чата.
Выберите приложение чата из результатов. Откроется прямое сообщение.
В новом прямом сообщении в приложении Chat введите
/addContact
и нажмите Enter .В открывшемся диалоге введите контактную информацию:
- В текстовом поле Имя и фамилия введите имя.
- В поле выбора даты рождения выберите дату.
- В разделе «Тип контакта» выберите переключатель « Рабочий» или «Личный» .
Нажмите «Просмотреть» и «Отправить» .
В диалоговом окне подтверждения проверьте предоставленную вами информацию и нажмите «Отправить» . Приложение чата отвечает текстовым сообщением с надписью
✅ CONTACT NAME has been added to your contacts.
.При желании вы также можете протестировать и отправить контактную форму следующими способами:
- Используйте косую черту
/about
. Приложение чата отвечает текстовым сообщением и кнопкой дополнительного виджета с надписьюAdd a contact
. Вы можете нажать кнопку, чтобы открыть диалоговое окно с контактной формой. - Отправьте в приложение «Чат» прямое сообщение без косой черты, например
Hello
. Приложение «Чат» отвечает текстовым сообщением и карточкой с контактной формой.
- Используйте косую черту
Очистить
Чтобы избежать списания средств с вашей учетной записи Google Cloud за ресурсы, используемые в этом руководстве, мы рекомендуем вам удалить проект Cloud.
- В консоли Google Cloud перейдите на страницу «Управление ресурсами» . Нажмите Меню > IAM и администрирование > ресурсами .
- В списке проектов выберите проект, который хотите удалить, и нажмите «Удалить .
- В диалоговом окне введите идентификатор проекта и нажмите «Завершить работу», чтобы удалить проект.
Связанные темы
- Реагировать на команды слэша
- Собирайте и обрабатывайте информацию от пользователей Google Chat.
- Открытие интерактивных диалогов
- Ознакомьтесь с другими примерами приложений Google Chat