Google Chat 앱의 홈페이지 빌드하기

이 페이지에서는 Google Chat 앱으로 채팅 메시지의 홈페이지를 빌드하는 방법을 설명합니다. Google Chat API에서 앱 홈이라고 하는 홈페이지는 사용자와 Chat 앱 간의 채팅 메시지 스페이스의 홈 탭에 표시되는 맞춤설정 가능한 카드 인터페이스입니다.

위젯이 두 개 있는 앱 홈 카드
그림 1: Chat 앱과의 채팅 메시지에 표시되는 홈페이지의 예

앱 홈을 사용하여 Chat 앱과 상호작용하는 팁을 공유하거나 사용자가 Chat에서 외부 서비스 또는 도구에 액세스하고 사용할 수 있도록 할 수 있습니다.

카드 빌더를 사용하여 Chat 앱의 메시지 및 사용자 인터페이스를 디자인하고 미리 봅니다.

카드 빌더 열기

기본 요건

Node.js

상호작용 이벤트를 수신하고 이에 응답하는 Google Chat 앱입니다. HTTP 서비스를 사용하여 대화형 Chat 앱을 만들려면 이 빠른 시작을 완료하세요.

Python

상호작용 이벤트를 수신하고 이에 응답하는 Google Chat 앱입니다. HTTP 서비스를 사용하여 대화형 Chat 앱을 만들려면 이 빠른 시작을 완료하세요.

자바

상호작용 이벤트를 수신하고 이에 응답하는 Google Chat 앱입니다. HTTP 서비스를 사용하여 대화형 Chat 앱을 만들려면 이 빠른 시작을 완료하세요.

Apps Script

상호작용 이벤트를 수신하고 이에 응답하는 Google Chat 앱입니다. Apps Script에서 대화형 Chat 앱을 만들려면 이 빠른 시작을 완료하세요.

Chat 앱의 앱 홈 구성

앱 홈을 지원하려면 Chat 앱 이 APP_HOME 상호작용 이벤트를 수신하도록 구성해야 합니다. 사용자가 Chat 앱과의 채팅 메시지에서 홈 탭을 클릭할 때마다 Chat 앱이 이 이벤트를 수신합니다.

Google Cloud 콘솔에서 구성 설정을 업데이트하려면 다음 단계를 따르세요.

  1. Google Cloud 콘솔에서 메뉴 > API 및 서비스 > 사용 설정된 API 및 서비스 > Google Chat API > 구성을 클릭합니다. Chat API 구성으로 이동
  2. 양방향 기능에서 기능 섹션으로 이동하여 앱 홈 지원을 선택합니다.
  3. Chat 앱에서 HTTP 서비스를 사용하는 경우 연결 설정 으로 이동하여 앱 홈 URL 필드의 엔드포인트를 지정합니다. HTTP 엔드포인트 URL 필드에 지정한 것과 동일한 URL을 사용할 수 있습니다.
  4. 저장 을 클릭합니다.

앱 홈 카드 빌드

사용자가 앱 홈을 열면 Chat 앱은 APP_HOME 상호작용 이벤트를 처리해야 합니다. RenderActions 탐색 및 Card가 포함된 인스턴스를 반환하여pushCard 대화형 환경을 만들려면 카드에 Chat 앱이 추가 카드 또는 대화상자로 처리하고 응답할 수 있는 버튼 또는 텍스트 입력과 같은 대화형 위젯이 포함될 수 있습니다.

다음 예에서 Chat 앱은 카드가 생성된 시간과 버튼을 표시하는 초기 앱 홈 카드를 표시합니다. 사용자가 버튼을 클릭하면 Chat 앱은 업데이트된 카드가 생성된 시간을 표시하는 업데이트된 카드를 반환합니다.

Node.js

node/app-home/index.js
app.post('/', async (req, res) => {
  let event = req.body.chat;

  let body = {};
  if (event.type === 'APP_HOME') {
    // App home is requested
    body = { action: { navigations: [{
      pushCard: getHomeCard()
    }]}}
  } else if (event.type === 'SUBMIT_FORM') {
    // The update button from app home is clicked
    commonEvent = req.body.commonEventObject;
    if (commonEvent && commonEvent.invokedFunction === 'updateAppHome') {
      body = updateAppHome()
    }
  }

  return res.json(body);
});

// Create the app home card
function getHomeCard() {
  return { sections: [{ widgets: [
    { textParagraph: {
      text: "Here is the app home 🏠 It's " + new Date().toTimeString()
    }},
    { buttonList: { buttons: [{
      text: "Update app home",
      onClick: { action: {
        function: "updateAppHome"
      }}
    }]}}
  ]}]};
}

Python

python/app-home/main.py
@app.route('/', methods=['POST'])
def post() -> Mapping[str, Any]:
  """Handle requests from Google Chat

  Returns:
      Mapping[str, Any]: the response
  """
  event = request.get_json()
  match event['chat'].get('type'):

    case 'APP_HOME':
      # App home is requested
      body = { "action": { "navigations": [{
        "pushCard": get_home_card()
      }]}}

    case 'SUBMIT_FORM':
      # The update button from app home is clicked
      event_object = event.get('commonEventObject')
      if event_object is not None:
        if 'update_app_home' == event_object.get('invokedFunction'):
          body = update_app_home()

    case _:
      # Other response types are not supported
      body = {}

  return json.jsonify(body)


def get_home_card() -> Mapping[str, Any]:
  """Create the app home card

  Returns:
      Mapping[str, Any]: the card
  """
  return { "sections": [{ "widgets": [
    { "textParagraph": {
      "text": "Here is the app home 🏠 It's " +
        datetime.datetime.now().isoformat()
    }},
    { "buttonList": { "buttons": [{
      "text": "Update app home",
      "onClick": { "action": {
        "function": "update_app_home"
      }}
    }]}}
  ]}]}

자바

java/app-home/src/main/java/com/google/chat/app/home/App.java
// Process Google Chat events
@PostMapping("/")
@ResponseBody
public GenericJson onEvent(@RequestBody JsonNode event) throws Exception {
  switch (event.at("/chat/type").asText()) {
    case "APP_HOME":
      // App home is requested
      GenericJson navigation = new GenericJson();
      navigation.set("pushCard", getHomeCard());

      GenericJson action = new GenericJson();
      action.set("navigations", List.of(navigation));

      GenericJson response = new GenericJson();
      response.set("action", action);
      return response;
    case "SUBMIT_FORM":
      // The update button from app home is clicked
      if (event.at("/commonEventObject/invokedFunction").asText().equals("updateAppHome")) {
        return updateAppHome();
      }
  }

  return new GenericJson();
}

// Create the app home card
GoogleAppsCardV1Card getHomeCard() {
  return new GoogleAppsCardV1Card()
    .setSections(List.of(new GoogleAppsCardV1Section()
      .setWidgets(List.of(
        new GoogleAppsCardV1Widget()
          .setTextParagraph(new GoogleAppsCardV1TextParagraph()
            .setText("Here is the app home 🏠 It's " + new Date())),
        new GoogleAppsCardV1Widget()
          .setButtonList(new GoogleAppsCardV1ButtonList().setButtons(List.of(new GoogleAppsCardV1Button()
            .setText("Update app home")
            .setOnClick(new GoogleAppsCardV1OnClick()
              .setAction(new GoogleAppsCardV1Action()
                .setFunction("updateAppHome"))))))))));
}

Apps Script

모든 APP_HOME 상호작용 이벤트 후에 호출되는 onAppHome 함수를 구현합니다.

이 예에서는 카드 JSON을 반환하여 카드 메시지를 보냅니다. Apps Script 카드 서비스를 사용할 수도 있습니다.

apps-script/app-home/app-home.gs
/**
 * Responds to a APP_HOME event in Google Chat.
 */
function onAppHome() {
  return { action: { navigations: [{
    pushCard: getHomeCard()
  }]}};
}

/**
 * Returns the app home card.
 */
function getHomeCard() {
  return { sections: [{ widgets: [
    { textParagraph: {
      text: "Here is the app home 🏠 It's " + new Date().toTimeString()
    }},
    { buttonList: { buttons: [{
      text: "Update app home",
      onClick: { action: {
        function: "updateAppHome"
      }}
    }]}}
  ]}]};
}

앱 홈 상호작용에 응답

초기 앱 홈 카드에 버튼 또는 선택 입력과 같은 대화형 위젯이 포함되어 있는 경우 Chat 앱은 관련 상호작용 이벤트를 처리해야 합니다. 관련 상호작용 이벤트는 RenderActions 인스턴스를 반환하여 처리하며, updateCard 탐색이 포함됩니다. 대화형 위젯 처리에 관해 자세히 알아보려면 사용자가 입력한 정보 처리를 참고하세요.

이전 예에서 초기 앱 홈 카드에는 버튼이 포함되어 있습니다. 사용자가 버튼을 클릭할 때마다 CARD_CLICKED 상호작용 이벤트가 다음 코드와 같이 updateAppHome 함수를 트리거하여 앱 홈 카드를 새로고침합니다.

Node.js

node/app-home/index.js
// Update the app home
function updateAppHome() {
  return { renderActions: { action: { navigations: [{
    updateCard: getHomeCard()
  }]}}}
};

Python

python/app-home/main.py
def update_app_home() -> Mapping[str, Any]:
  """Update the app home

  Returns:
      Mapping[str, Any]: the update card render action
  """
  return { "renderActions": { "action": { "navigations": [{
    "updateCard": get_home_card()
  }]}}}

자바

java/app-home/src/main/java/com/google/chat/app/home/App.java
// Update the app home
GenericJson updateAppHome() {
  GenericJson navigation = new GenericJson();
  navigation.set("updateCard", getHomeCard());

  GenericJson action = new GenericJson();
  action.set("navigations", List.of(navigation));

  GenericJson renderActions = new GenericJson();
  renderActions.set("action", action);

  GenericJson response = new GenericJson();
  response.set("renderActions", renderActions);
  return response;
}

Apps Script

이 예에서는 카드 JSON을 반환하여 카드 메시지를 보냅니다. Apps Script 카드 서비스를 사용할 수도 있습니다.

apps-script/app-home/app-home.gs
/**
 * Updates the home app.
 */
function updateAppHome() {
  return { renderActions: { action: { navigations: [{
    updateCard: getHomeCard()
  }]}}};
}

대화상자 열기

Chat 앱은 대화상자를 열어 앱 홈의 상호작용 에 응답할 수도 있습니다.

다양한 위젯이 포함된 대화상자
그림 3: 사용자에게 연락처를 추가하라는 메시지를 표시하는 대화상자

앱 홈에서 대화상자를 열려면 관련 상호작용 이벤트를 renderActions를 updateCard 탐색으로 반환하여 처리합니다. 여기에는 Card 객체가 포함됩니다. 다음 예에서 Chat 앱은 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: 대화상자를 닫고 Chat 앱의 초기 앱 홈 카드로 돌아갑니다.
  • CLOSE_DIALOG_AND_EXECUTE: 대화상자를 닫고 앱 홈 카드를 새로고침합니다.

다음 코드 샘플에서는 CLOSE_DIALOG를 사용하여 대화상자를 닫고 앱 홈 카드로 돌아갑니다.

{ renderActions: { action: {
  navigations: [{ endNavigation: { action: "CLOSE_DIALOG" }}]
}}}

사용자로부터 정보를 수집하기 위해 순차적 대화상자를 빌드할 수도 있습니다. 순차적 대화상자를 빌드하는 방법을 알아보려면 대화상자 열기 및 응답을 참고하세요.