Google Chat 앱의 앱 홈 카드 메시지 보내기

이 페이지에서는 채팅 앱을 위한 앱 홈 카드 메시지를 만들고 보내는 방법을 설명합니다. 앱 홈은 사용자가 채팅 앱으로 채팅 메시지를 열 때 채팅 앱이 사용자에게 보내는 맞춤설정 가능한 카드 메시지입니다. 예를 들어 앱 홈 카드 메시지를 구성하여 슬래시 명령어를 사용하여 채팅 앱과 상호작용하는 방법에 대한 도움말을 포함할 수 있습니다.

최종 사용자의 경우 앱 홈은 앱 개발자가 이 기능을 사용 설정한 경우에만 채팅 앱의 채팅 메시지에서 사용할 수 있습니다.


카드 빌더로 카드를 디자인하고 미리 봅니다.

카드 빌더 열기

기본 요건

Python

Apps Script

Google Cloud 콘솔에서 구성

Python

  1. Google Cloud 콘솔에서 메뉴 > 제품 더보기 > Google Workspace > 제품 라이브러리 > Google Chat API로 이동합니다.

    Google Chat API로 이동

  2. 관리를 클릭한 다음 구성 탭을 클릭합니다.

  3. Support App Home을 사용 설정합니다.

  4. Support App Home 체크박스를 선택합니다.

  5. App Home URL(앱 홈 URL) 입력란에 URL을 추가합니다. 이 값은 일반적으로 앱 URL과 동일한 URL입니다. 이 URL은 APP_HOME 이벤트에 호출됩니다.

  6. 저장을 클릭합니다.

Apps Script

  1. Google Cloud 콘솔에서 메뉴 > 제품 더보기 > Google Workspace > 제품 라이브러리 > Google Chat API로 이동합니다.

    Google Chat API로 이동

  2. 관리를 클릭한 다음 구성 탭을 클릭합니다.

  3. Support App Home 체크박스를 선택합니다.

  4. 저장을 클릭합니다.

Chat 앱 구성

앱 홈에 대한 새 카드 메시지를 보내도록 채팅 앱을 구성합니다.

Python

사용자가 채팅 앱에서 채팅 메시지를 열면 APP_HOME 이벤트가 채팅 앱으로 전송됩니다. 앱에서 이 이벤트를 수신하면 push_card 탐색과 함께 RenderActions의 JSON 인스턴스가 반환됩니다.

다음 예는 이벤트를 보여줍니다.

@app.route('/', methods=['POST'])
def on_event():
  event = request.get_json()
  chat = event.get('chat')
  if chat is not None:
    return handle_chat_event(event)

def handle_chat_event(event):
  if event['chat'].get('type') == 'APP_HOME':
    return get_app_home_card()

def get_app_home_card:
  // Return "Card v2" representing App Home.

다음 예시는 문서로 연결되는 버튼 링크를 포함하도록 구성된 카드를 보여줍니다.

{
  action: {
    navigations: [
      {
        push_card: {
          sections: [
            {
              widgets: [
                {
                  buttonList: {
                    buttons: [
                      {
                        text: "Open documentation",
                        onClick: {
                          openLink: {
                            url: "https://developers.google.com/chat"
                          }
                        }
                      }
                    ]
                  }
                }
              ]
            }
          ]
        }
      }
    ]
  }
}

Apps Script

onAppHome 함수를 구현하여 push_card 탐색으로 RenderActions의 JSON 인스턴스를 반환합니다.

// "onAppHome" is the pre-defined name of the callback that the Chat servers
// execute.
function onAppHome() {
  return {
    action: {
      navigations: [
        {
          push_card: getCard()
        }
      ]
    }
  };
}

function getCard() {
  return {
    sections: [
      {
        widgets: [
          {
            buttonList: {
              buttons: [
                {
                  text: "Open documentation",
                  onClick: {
                    openLink: {
                      url: "https://developers.google.com/chat"
                    }
                  }
                }
              ]
            }
          }
        ]
      }
    ]
  };
}

앱 홈 카드 메시지 업데이트

앱 홈 카드 메시지는 사용자가 카드 메시지에 정보를 제출하거나 대화상자를 닫을 때 업데이트할 수 있습니다. 예를 들어 초기 앱 홈 카드 메시지는 사용자에게 정보를 포함하여 양식을 작성하도록 요청하는 환영 메시지입니다. 사용자가 양식을 작성하면 업데이트된 앱 홈 카드 메시지가 전송됩니다. 업데이트는 update_card 탐색이 포함된 RenderActions의 인스턴스와 함께 반환되어야 합니다.

Python

HTTP 앱의 경우 앱 홈 카드 메시지를 업데이트하는 것은 사용자가 입력한 정보 처리와 비슷하지만 RenderActions을 반환해야 합니다. invokedFunctionCard 위젯과 연결된 호출된 함수의 이름을 나타냅니다. 자세한 내용은 CommonEventObject를 참조하세요. 다음 예에서 submitForm는 사용자가 양식 데이터를 제출했음을 보여줍니다.

@app.route('/', methods=['POST'])
def on_event():
  event = request.get_json()
  chat = event.get('chat')
  if chat is not None:
    return handle_chat_event(event)

def handle_chat_event(event):
  if event['chat'].get('type') == 'SUBMIT_FORM':
    event_object = event.get('commonEventObject')
    if event_object is not None:
      // Forms
      if 'submitForm' == event_object.get('invokedFunction'):
        return {
          'render_actions': {
            'action': {
              'navigations': [{
                'update_card': get_update_card
              }]
            }
          }
        }

def get_update_card:
  // Return "Card v2" representing App Home.
  ...

Apps Script

// Called from elsewhere (i.e. on button press).
function updateAppHomeCard(event) {
  return {
    render_actions: {
      action: {
        navigations: [
          {
            update_card: getCard()
          }
        ]
      }
    }
  }
}

function getCard() {
  // Return "Card v2" representing App Home.
  ...
}