이 가이드에서는 Google Chat 앱이 카드 기반 인터페이스에서 양식 입력을 빌드하여 사용자로부터 정보를 수집하고 처리하는 방법을 설명합니다.
<ph type="x-smartling-placeholder">
채팅 앱은 Google 계정에서 작업을 수행하기 위해 사용자에게 다음과 같은 방법을 사용합니다.
- 설정을 구성합니다. 예를 들어 사용자가 알림 설정을 맞춤설정하거나 하나 이상의 스페이스에 Chat 앱을 구성하고 추가할 수 있도록 허용할 수 있습니다.
- 다른 Google Workspace 애플리케이션에서 정보를 만들거나 업데이트합니다. 대상 예를 들어 사용자가 Google Calendar 일정을 만들도록 허용합니다.
- 사용자가 다른 앱 또는 웹 서비스의 리소스에 액세스하고 업데이트할 수 있도록 허용합니다. 예를 들어 Chat 앱을 사용하면 사용자가 Chat 스페이스에서 직접 지원 티켓의 상태를 업데이트할 수 있습니다.
기본 요건
양방향 기능이 사용 설정된 Google Chat 앱 대화형 Chat 앱을 만들려면 사용하려는 앱 아키텍처에 따라 다음 빠른 시작 중 하나를 완료하세요.- Google Cloud Functions를 사용하는 HTTP 서비스
- Google Apps Script
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
카드를 사용하여 양식 작성
정보를 수집하기 위해 Chat 앱은 양식과 입력란을 설계하고 카드에 빌드합니다. 사용자에게 카드를 표시하려면 채팅 앱은 다음과 같은 채팅 인터페이스를 사용할 수 있습니다.
Chat 앱은 다음 위젯을 사용하여 카드를 빌드할 수 있습니다.
사용자에게 정보를 요청하는 입력 위젯을 작성합니다. 원하는 경우 양식 입력 위젯에 유효성 검사를 추가하여 사용자가 정보를 올바르게 입력하고 형식을 지정하도록 할 수 있습니다. 채팅 앱은 다음과 같은 양식 입력 위젯을 사용할 수 있습니다.
버튼 위젯 사용자가 카드에 입력한 값을 제출할 수 있습니다. 사용자가 버튼을 클릭하면 채팅 앱에서 수신한 정보를 처리할 수 있습니다.
다음은 세 가지 유형의 날짜 및 시간 입력으로 구성된 카드를 보여줍니다.
수집하는 데 사용할 수 있는 양방향 위젯의 예를 더 보려면 자세한 내용은 양방향 카드 또는 대화상자를 디자인합니다.
양방향 위젯에서 데이터 수신
사용자가 버튼을 클릭할 때마다 채팅 앱에서
CARD_CLICKED 상호작용 이벤트
상호작용 정보를 포함합니다. 페이로드는
CARD_CLICKED 상호작용 이벤트에 common.formInputs가 포함되어 있습니다.
객체를 사용자가 입력한 값으로 대체합니다.
객체에서 값을 가져올 수 있으며
common.formInputs.WIDGET_NAME, 각 항목의 의미는 다음과 같습니다.
WIDGET_NAME는 위젯에 지정한 name 필드입니다.
값은 위젯의 특정 데이터 유형(Inputs 객체로 표시됨)으로 반환됩니다.
다음 예에서 카드는 텍스트를 사용하여 연락처 정보를 수집합니다.
입력, 날짜 시간 선택 도구, 선택 입력 위젯:
{
"textInput": {
"name": "contactName",
"label": "First and last name",
"type": "SINGLE_LINE"
}
}, {
"dateTimePicker": {
"name": "contactBirthdate",
"label": "Birthdate",
"type": "DATE_ONLY"
}
}, {
"selectionInput": {
"name": "contactType",
"label": "Contact type",
"type": "RADIO_BUTTON",
"items": [
{
"text": "Work",
"value": "Work",
"selected": false
},
{
"text": "Personal",
"value": "Personal",
"selected": false
}
]
}
}
상호작용 이벤트 처리
사용자가 카드나 대화상자에 데이터를 입력하면
채팅 앱이 채팅 앱을 수신함
사용자가 입력한 값이 포함된 CARD_CLICKED 상호작용 이벤트입니다.
다음은 CARD_CLICKED 상호작용 이벤트의 일부를 보여줍니다.
사용자가 각 위젯에 입력한 값
HTTP
{
"type": "CARD_CLICKED",
"common": { "formInputs": {
"contactName": { "stringInputs": {
"value": ["Kai 0"]
}},
"contactBirthdate": { "dateInput": {
"msSinceEpoch": 1000425600000
}},
"contactType": { "stringInputs": {
"value": ["Personal"]
}}
}}
}
Apps Script
{
"type": "CARD_CLICKED",
"common": { "formInputs": {
"contactName": { "": { "stringInputs": {
"value": ["Kai 0"]
}}},
"contactBirthdate": { "": { "dateInput": {
"msSinceEpoch": 1000425600000
}}},
"contactType": { "": { "stringInputs": {
"value": ["Personal"]
}}}
}}
}
데이터를 수신하기 위해 Chat 앱은 상호작용 이벤트를 처리하여 사용자가 위젯에 입력한 값을 가져옵니다. 다음 표는 지정된 양식 입력 위젯의 값을 가져오는 방법을 보여줍니다. 각 위젯에 대해 테이블에 위젯이 허용하는 데이터 유형이 표시되며, 여기에 값이 저장됩니다. 상호작용 이벤트 및 예시 값 등이 있습니다.
| 양식 입력 위젯 | 입력 데이터 유형 | 상호작용 이벤트의 입력 값 | 예시 값 |
|---|---|---|---|
textInput |
stringInputs |
events.common.formInputs.contactName.stringInputs.value[0] |
Kai O |
selectionInput |
stringInputs |
첫 번째 또는 유일한 값을 가져오려면 events.common.formInputs.contactType.stringInputs.value[0]를 사용합니다. |
Personal |
날짜만 허용하는 dateTimePicker입니다. |
dateInput |
events.common.formInputs.contactBirthdate.dateInput.msSinceEpoch. |
1000425600000 |
다른 카드로 데이터 이전
사용자가 카드 정보를 제출한 후 다음 작업을 수행하려면 추가 카드를 반품해야 할 수 있습니다.
- 별도의 섹션을 만들어 사용자가 긴 양식을 작성할 수 있도록 지원합니다.
- 사용자가 초기 카드의 정보를 미리 보고 확인할 수 있도록 하여 답변을 검토할 수 있습니다.
- 양식의 나머지 부분을 동적으로 채웁니다. 예를 들어 사용자에게 약속을 만들라는 메시지를 표시하기 위해 Chat 앱은 약속 이유를 요청하는 첫 번째 카드를 표시한 다음 약속 유형에 따라 사용 가능한 시간을 제공하는 다른 카드를 채울 수 있습니다.
초기 카드에서 데이터 입력을 전송하려면 button를 빌드하면 됩니다.
actionParameters 위젯
다음과 같이 위젯의 name 및 사용자가 입력한 값이 포함된
예를 들면 다음과 같습니다.
{
"buttonList": {
"buttons": [{
"text": "Submit",
"onClick": {
"action": {
"function": "openNextCard",
"parameters": [{
"key": "WIDGET_NAME",
"value": "USER_INPUT_VALUE"
}]
}
}
}]
}
}
여기서 WIDGET_NAME는 위젯의 name이고 USER_INPUT_VALUE는 사용자가 입력한 내용입니다. 예를 들어 사용자 이름을 수집하는 텍스트 입력의 경우 위젯 이름은 contactName이고 예시 값은 Kai O입니다.
사용자가 버튼을 클릭하면 채팅 앱이
CARD_CLICKED 상호작용 이벤트 값을 검색하려면
event.common.parameters 드림
객체를 지정합니다.
다음은 사용자 입력 데이터가 포함된 매개변수를 다음 카드를 여는 함수에 전달하는 방법의 예를 보여줍니다.
Node.js
// Respond to button clicks on cards or dialogs
if (event.type === "CARD_CLICKED") {
// Open another card.
if (event.common.invokedFunction === "openNextCard") {
const parameters = event.common.parameters;
openNextCard(event);
}
}
Python
# Respond to button clicks on cards or dialogs
if request.get('type') == 'CARD_CLICKED':
if invoked_function := request.get('common', dict()).get('invokedFunction'):
if invoked_function == 'open_next_card':
parameters = request.get('common', dict()).get('parameters'),
return open_next_card(parameters)
Apps Script
// Respond to button clicks on cards or dialogs
function onCardClick(event) {
if (event.common.invokedFunction === "openNextCard") {
const parameters = event.common.parameters;
return openNextCard(parameters);
}
}
양식 제출에 응답하기
카드 메시지 또는 대화상자에서 데이터를 수신하면 채팅 앱이 수신 확인 또는 오류를 반환합니다.
다음 예에서는 채팅 앱이 확인 메시지가 표시됩니다. 있습니다.
Apps Script
function submitCardForm(contactName, contactBirthdate, contactType) {
return {
"text": "You entered the following contact information:\n\n" +
"*Name:* " + contactName + "\n" +
"*Birthdate:* " + contactBirthdate + "\n" +
"*Type:* " + contactType
}
}
대화상자를 처리하고 닫으려면
ActionResponse 드림
이 객체를 통해 확인 메시지 전송, 업데이트 가능 여부 또는
원본 메시지 또는 카드를 삭제하거나 대화상자를 닫을 수 있습니다. 단계는 다음을 참조하세요.
대화상자 닫기
문제 해결
Google Chat 앱 또는 카드가 오류를 반환하면 Chat 인터페이스에 '문제가 발생했습니다'라는 메시지가 표시됩니다. 또는 '요청을 처리할 수 없습니다'와 같은 메시지가 표시됩니다. 채팅 UI가 오류 메시지가 표시되지 않지만 채팅 앱 또는 카드에서 예기치 않은 결과가 발생합니다. 예를 들어 카드 메시지가 나타납니다.
Chat UI에 오류 메시지가 표시되지 않을 수 있지만 Chat 앱의 오류 로깅이 사용 설정된 경우 오류를 수정하는 데 도움이 되는 설명 오류 메시지와 로그 데이터를 사용할 수 있습니다. 보는 데 도움이 필요한 경우 오류를 수정하는 방법에 대한 자세한 내용은 Google Chat 오류 문제 해결하기
관련 주제
- 연락처 관리자 샘플 보기 이 앱은 사용자에게 대화를 완료하라는 메시지를 표시하는 채팅 앱입니다 문의 양식을 생성할 수 있습니다.
- 양방향 대화상자 열기