В этом руководстве описывается, как приложения Google Chat могут собирать и обрабатывать информацию от пользователей, создавая поля ввода форм в интерфейсах на основе карточек.
В Google Chat дополнения отображаются пользователям как приложения Google Chat. Дополнительную информацию см. в обзоре расширения Google Chat .
Приложения чата запрашивают у пользователей информацию для выполнения действий в чате или за его пределами, в том числе следующими способами:
- Настройте параметры. Например, чтобы позволить пользователям настраивать параметры уведомлений или настраивать и добавлять приложение Chat в одно или несколько пространств.
- Создавайте или обновляйте информацию в других приложениях Google Workspace. Например, разрешите пользователям создавать события Календаря Google.
- Разрешите пользователям получать доступ и обновлять ресурсы в других приложениях или веб-службах. Например, приложение чата может помочь пользователям обновить статус заявки в службу поддержки непосредственно из пространства чата.
Предварительные условия
Node.js
Надстройка Google Workspace, работающая в Google Chat. Чтобы создать его, выполните краткое руководство по HTTP .
Скрипт приложений
Надстройка Google Workspace, работающая в Google Chat. Чтобы создать его, выполните краткое руководство по Apps Script .
Создавайте формы с помощью карточек
Для сбора информации приложения чата разрабатывают формы и входные данные, а затем встраивают их в карточки. Для отображения карточек пользователям приложения чата могут использовать следующие интерфейсы чата:
- Сообщения чата, содержащие одну или несколько карточек.
- Диалоги — карточки, открывающиеся в новом окне из сообщений и домашних страниц.
Приложения чата могут создавать карточки с помощью следующих виджетов:
Формируйте виджеты ввода, которые запрашивают информацию у пользователей. При желании вы можете добавить проверку формы виджетов ввода, чтобы гарантировать, что пользователи правильно вводят и форматируют информацию. Приложения чата могут использовать следующие виджеты ввода форм:
- Текстовые входы (
textInput
) для произвольного или предлагаемого текста. - Входные данные выбора (
selectionInput
) — это выбираемые элементы пользовательского интерфейса, такие как флажки, переключатели и раскрывающиеся меню. Виджеты ввода выбора также могут заполнять элементы из статических или динамических источников данных. Например, пользователи могут выбирать из списка чат-групп, участниками которых они являются.
- Средства выбора даты и времени (
dateTimePicker
) для записей даты и времени.
- Текстовые входы (
Виджет кнопки , позволяющий пользователям отправлять значения, которые они ввели в карточку. После того, как пользователь нажмет кнопку, приложение Chat сможет обработать полученную информацию .
В следующем примере карточка собирает контактную информацию с помощью текстового ввода, средства выбора даты и времени и ввода выбора:
Дополнительные примеры интерактивных виджетов, которые можно использовать для сбора информации, см. в разделе «Разработка интерактивной карточки или диалогового окна» документации API Google Chat.
Получайте данные от интерактивных виджетов
Каждый раз, когда пользователи нажимают кнопку, ее действие в приложении чата запускается с информацией о взаимодействии. В commonEventObject
полезных данных события объект formInputs
содержит любые значения, которые вводит пользователь.
Вы можете получить значения из объекта commonEventObject.formInputs. WIDGET_NAME
, где WIDGET_NAME — это поле name
, указанное вами для виджета. Значения возвращаются как определенный тип данных для виджета.
Ниже показана часть объекта события, в которой пользователь ввел значения для каждого виджета:
{
"commonEventObject": { "formInputs": {
"contactName": { "stringInputs": {
"value": ["Kai 0"]
}},
"contactBirthdate": { "dateInput": {
"msSinceEpoch": 1000425600000
}},
"contactType": { "stringInputs": {
"value": ["Personal"]
}}
}}
}
Чтобы получить данные, ваше приложение чата обрабатывает объект события, чтобы получить значения, которые пользователи вводят в виджеты. В следующей таблице показано, как получить значение для данного виджета ввода формы. Для каждого виджета в таблице показан тип данных, который принимает виджет, где значение хранится в объекте события, а также пример значения.
Виджет ввода формы | Тип входных данных | Входное значение из объекта события | Пример значения |
---|---|---|---|
textInput | stringInputs | event.commonEventObject.formInputs.contactName.stringInputs.value[0] | Kai O |
selectionInput | stringInputs | Чтобы получить первое или единственное значение, event.commonEventObject.formInputs.contactType.stringInputs.value[0] | Personal |
dateTimePicker , который принимает только даты. | dateInput | event.commonEventObject.formInputs.contactBirthdate.dateInput.msSinceEpoch . | 1000425600000 |
Перенос данных на другую карту
После того как пользователь отправит информацию с карты, вам может потребоваться вернуть дополнительные карты, чтобы выполнить одно из следующих действий:
- Помогите пользователям заполнять более длинные формы, создавая отдельные разделы.
- Разрешите пользователям просматривать и подтверждать информацию из исходной карточки, чтобы они могли просмотреть свои ответы перед отправкой.
- Динамически заполняйте остальные части формы. Например, чтобы предложить пользователям создать встречу, приложение чата может отображать начальную карточку, в которой запрашивается причина встречи, а затем заполняется другая карточка, указывающая доступное время в зависимости от типа встречи.
Чтобы перенести ввод данных из исходной карты, вы можете создать виджет button
с actionParameters
, которые содержат name
виджета и значение, введенное пользователем, как показано в следующем примере:
{
"buttonList": { "buttons": [{
"text": "Submit",
"onClick": { "action": {
"function": "submitForm",
"parameters": [
{
"key": "WIDGET_NAME",
"value": "USER_INPUT_VALUE"
},
// Can specify multiple parameters
]
}}
}]}
}
Где WIDGET_NAME — это name
виджета, а USER_INPUT_VALUE — это то, что вводит пользователь. Например, для ввода текста, который собирает имя человека, имя виджета — contactName
, а значение примера — Kai O
Когда пользователь нажимает кнопку, ваше приложение Chat получает объект события, из которого вы можете получать данные .
Ответ на отправку формы
После получения данных из карточного сообщения или диалога приложение Chat отвечает либо подтверждением получения, либо возвратом ошибки.
В следующем примере приложение Chat отправляет текстовое сообщение, чтобы подтвердить, что оно успешно получило форму, отправленную из сообщения карты.
Node.js
/**
* Google Cloud Function that handles all Google Workspace Add On events for
* the contact manager app.
*
* @param {Object} req Request sent from Google Chat space
* @param {Object} res Response to send back
*/
exports.contactManager = function contactManager(req, res) {
const chatEvent = req.body.chat;
const chatMessage = chatEvent.messagePayload.message;
// Handle MESSAGE events
if(chatEvent.messagePayload) {
return res.send(handleMessage(chatMessage, chatEvent.user));
// Handle CARD_CLICKED events
} else if(chatEvent.buttonClickedPayload) {
switch(req.body.commonEventObject.parameters.actionName) {
case "openDialog":
return res.send(openDialog());
case "openNextCard":
return res.send(openNextCard(req.body));
case "submitForm":
return res.send(submitForm(req.body));
}
}
};
/**
* Submits information from a dialog or card message.
*
* @param {Object} event the interactive event with form inputs.
* @return {Object} a message response that posts a private message.
*/
function submitForm(event) {
const chatUser = event.chat.user;
const contactName = event.commonEventObject.parameters["contactName"];
return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
privateMessageViewer: chatUser,
text: "✅ " + contactName + " has been added to your contacts."
}}}}};
}
Скрипт приложений
/**
* Sends private text message that confirms submission.
*
* @param {Object} event the interactive event with form inputs.
* @return {Object} a message response that posts a private message.
*/
function submitForm(event) {
const chatUser = event.chat.user;
const contactName = event.commonEventObject.parameters["contactName"];
return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
privateMessageViewer: chatUser,
text: "✅ " + contactName + " has been added to your contacts."
}}}}};
}
Чтобы обработать и закрыть диалоговое окно, вы возвращаете объект RenderActions
, который указывает, хотите ли вы отправить подтверждающее сообщение, обновить исходное сообщение или карточку или просто закрыть диалоговое окно. Инструкции см. в разделе Закрытие диалогового окна .
Устранение неполадок
Когда приложение или карточка Google Chat возвращает ошибку, в интерфейсе Chat отображается сообщение «Что-то пошло не так». или «Невозможно обработать ваш запрос». Иногда в пользовательском интерфейсе чата не отображается сообщение об ошибке, но приложение или карточка чата выдает неожиданный результат; например, сообщение с карточкой может не появиться.
Хотя сообщение об ошибке может не отображаться в пользовательском интерфейсе чата, доступны описательные сообщения об ошибках и данные журнала, которые помогут вам исправить ошибки, если включено ведение журнала ошибок для приложений чата. Информацию о просмотре, отладке и исправлении ошибок см. в разделе «Устранение неполадок и исправление ошибок Google Chat» .