이 페이지에서는 Google Chat 앱으로 채팅 메시지의 홈페이지를 빌드하는 방법을 설명합니다. Google Chat API에서 앱 홈이라고 하는 홈페이지는 사용자와 Chat 앱 간의 채팅 메시지 스페이스의 홈 탭에 표시되는 맞춤설정 가능한 카드 인터페이스입니다.
<ph type="x-smartling-placeholder">앱 홈을 사용하여 사용자에게 채팅 앱 액세스를 허용하여 외부 서비스나 도구를 채팅
카드 작성 도구를 사용하여 Chat 앱의 메시지 및 사용자 인터페이스를 디자인하고 미리 볼 수 있습니다.
카드 작성 도구 열기기본 요건
Node.js
양방향 기능이 사용 설정된 Google Chat 앱 HTTP 서비스를 사용하여 대화형 Chat 앱을 만들려면 이 빠른 시작을 완료하세요.
Python
대화형 기능이 사용 설정된 Google Chat 앱 HTTP 서비스를 사용하여 대화형 Chat 앱을 만들려면 이 빠른 시작을 완료하세요.
자바
대화형 기능이 사용 설정된 Google Chat 앱 대화형 채팅 앱을 사용하려면 이 빠른 시작을 완료하세요.
Apps Script
양방향 기능이 사용 설정된 Google Chat 앱 Apps Script에서 양방향 Chat 앱을 만들려면 이 빠른 시작을 완료하세요.
Chat 앱의 앱 홈 구성
앱 홈을 지원하려면 채팅 앱을 구성해야 합니다.
받기
APP_HOME
상호작용 이벤트
채팅 앱은 사용자가
채팅 메시지에서 홈 탭을 클릭합니다.
채팅 앱
Google Cloud 콘솔에서 구성 설정을 업데이트하려면 다음을 수행합니다.
Google Cloud 콘솔에서 메뉴로 이동합니다. > 제품 더보기 > Google Workspace > 제품 라이브러리 > Google Chat API.
관리를 클릭한 다음 구성 탭을 클릭합니다.
양방향 기능에서 기능 섹션으로 이동하여 다음을 수행합니다. 앱 홈 구성:
- 1:1 메시지 수신 체크박스를 선택합니다.
- 지원 앱 홈 체크박스를 선택합니다.
채팅 앱에서 HTTP 서비스를 사용하는 경우 다음으로 이동하세요. 연결 설정을 클릭하고 다음에 대한 엔드포인트를 지정합니다. App Home URL(앱 홈 URL) 입력란에 붙여넣습니다. HTTP 엔드포인트 URL 필드에 지정한 것과 동일한 URL을 사용할 수 있습니다.
저장을 클릭합니다.
앱 홈 카드 만들기
<ph type="x-smartling-placeholder">
사용자가 앱 홈을 열면 Chat 앱은 pushCard
탐색 및 Card
와 함께 RenderActions
의 인스턴스를 반환하여 APP_HOME
상호작용 이벤트를 처리해야 합니다. 양방향 환경을 만들기 위해 카드에는 Chat 앱에서 추가 카드 또는 대화상자를 사용하여 처리하고 응답할 수 있는 버튼이나 텍스트 입력과 같은 양방향 위젯이 포함될 수 있습니다.
다음 예에서 Chat 앱은 카드가 만들어진 시간을 표시하는 초기 앱 홈 카드 버튼을 클릭합니다. 사용자가 버튼을 클릭하면 채팅 앱이 는 업데이트된 카드가 생성된 시간을 표시하는 업데이트된 카드를 반환합니다.
Node.js
Python
자바
Apps Script
모든 APP_HOME
상호작용 이벤트 후에 호출되는 onAppHome
함수를 구현합니다.
이 예시에서는 카드 JSON과 함께 사용합니다. 또한 Apps Script 카드 서비스.
앱 홈 상호작용에 응답
초기 앱 홈 카드에 버튼이나 선택 입력과 같은 대화형 위젯이 포함된 경우 채팅 앱은 updateCard
탐색을 사용하여 RenderActions
인스턴스를 반환하여 관련 상호작용 이벤트를 처리해야 합니다. 상호작용 처리 방법에 대해 자세히 알아보려면
위젯에 대한 자세한 내용은 다음을 참조하세요.
사용자가 입력한 정보를 처리합니다.
이전 예에서 초기 앱 홈 카드에는 버튼이 포함되었습니다. 사용자가 버튼을 클릭할 때마다 CARD_CLICKED
상호작용 이벤트가 updateAppHome
함수를 트리거하여 다음 코드와 같이 앱 홈 카드를 새로고침합니다.
대화상자 열기
채팅 앱에서도 상호작용에 응답할 수 있습니다 앱 홈에서 대화상자를 열어서 할 수 있습니다.
앱 홈에서 대화상자를 열려면 Card
객체가 포함된 updateCard
탐색으로 renderActions
를 반환하여 관련 상호작용 이벤트를 처리합니다. 다음 예에서는 채팅 앱이
CARD_CLICKED
를 처리하여 앱 홈 카드의 버튼 클릭에
대화상자를 열어야 하는지 확인합니다.
{ renderActions: { action: { navigations: [{ updateCard: { sections: [{
header: "Add new contact",
widgets: [{ "textInput": {
label: "Name",
type: "SINGLE_LINE",
name: "contactName"
}}, { textInput: {
label: "Address",
type: "MULTIPLE_LINE",
name: "address"
}}, { decoratedText: {
text: "Add to favorites",
switchControl: {
controlType: "SWITCH",
name: "saveFavorite"
}
}}, { decoratedText: {
text: "Merge with existing contacts",
switchControl: {
controlType: "SWITCH",
name: "mergeContact",
selected: true
}
}}, { buttonList: { buttons: [{
text: "Next",
onClick: { action: { function: "openSequentialDialog" }}
}]}}]
}]}}]}}}
대화상자를 닫으려면 다음 상호작용 이벤트를 처리합니다.
CLOSE_DIALOG
: 대화상자를 닫고 채팅 앱의 초기 앱 홈 카드로 돌아갑니다.CLOSE_DIALOG_AND_EXECUTE
: 대화상자를 닫고 앱 홈 카드를 새로고침합니다.
다음 코드 샘플은 CLOSE_DIALOG
를 사용하여 대화상자를 닫고
앱 홈 카드:
{ renderActions: { action: {
navigations: [{ endNavigation: { action: "CLOSE_DIALOG" }}]
}}}
사용자로부터 정보를 수집하기 위해 순차 대화상자를 빌드할 수도 있습니다. 받는사람 순차 대화상자를 빌드하는 방법을 알아보려면 대화상자 열기 및 응답하기
관련 주제
- 앱 홈을 사용하는 채팅 앱 샘플 보기
- 대화상자 열기 및 응답하기