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

이 페이지에서는 나만의 홈페이지를 만드는 방법을 Google Chat 앱 앱 홈은 맞춤설정이 가능한 카드 인터페이스입니다. 사용자가 채팅 앱을 열 때 채팅 앱에서 사용자에게 보내는 채팅 앱으로 메시지를 주고받을 수 있습니다.

위젯 2개가 있는 앱 홈 카드

예를 들어 다음을 사용하는 채팅 앱 슬래시 명령어 최종 사용자의 경우 앱 홈은 다음과 같은 경우 채팅 앱의 채팅 메시지에서만 사용할 수 있습니다. 앱 개발자가 기능을 사용 설정해야 합니다.


카드 빌더를 사용하여 채팅 앱용 JSON 카드 메시지를 디자인하고 미리 봅니다.

카드 빌더 열기 <ph type="x-smartling-placeholder">
</ph>

기본 요건

Python

양방향 기능이 사용 설정된 Google Chat 앱 대화형 채팅 앱을 사용하려면 이 빠른 시작을 완료하세요.

Apps Script

양방향 기능이 사용 설정된 Google Chat 앱 Apps Script에서 대화형 채팅 앱을 사용하려면 이 빠른 시작을 완료하세요.

Node.js

양방향 기능이 사용 설정된 Google Chat 앱 대화형 채팅 앱을 사용하려면 이 빠른 시작을 완료하세요.

자바

양방향 기능이 사용 설정된 Google Chat 앱 대화형 채팅 앱을 사용하려면 이 빠른 시작을 완료하세요.

Chat API 구성

앱 홈을 지원하려면 Chat API 구성을 업데이트해야 합니다. Google Cloud 콘솔에서 확인할 수 있습니다

Python

  1. Google Cloud 콘솔에서 메뉴로 이동합니다. <ph type="x-smartling-placeholder"></ph> &gt; 제품 더보기 &gt; Google Workspace &gt; 제품 라이브러리 &gt; Google Chat API.

    Google Chat API로 이동

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

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

  4. App Home URL(앱 홈 URL) 입력란에 URL을 추가합니다. 이 값은 일반적으로 동일합니다. URL을 앱 URL로 사용합니다. 이 URL은 APP_HOME 이벤트.

  5. 저장을 클릭합니다.

Apps Script

  1. Google Cloud 콘솔에서 메뉴로 이동합니다. <ph type="x-smartling-placeholder"></ph> &gt; 제품 더보기 &gt; Google Workspace &gt; 제품 라이브러리 &gt; Google Chat API.

    Google Chat API로 이동

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

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

  4. 저장을 클릭합니다.

Node.js

  1. Google Cloud 콘솔에서 메뉴로 이동합니다. <ph type="x-smartling-placeholder"></ph> &gt; 제품 더보기 &gt; Google Workspace &gt; 제품 라이브러리 &gt; Google Chat API.

    Google Chat API로 이동

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

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

  4. App Home URL(앱 홈 URL) 입력란에 URL을 추가합니다. 이 값은 일반적으로 동일합니다. URL을 앱 URL로 사용합니다. 이 URL은 APP_HOME 이벤트.

  5. 저장을 클릭합니다.

자바

  1. Google Cloud 콘솔에서 메뉴로 이동합니다. <ph type="x-smartling-placeholder"></ph> &gt; 제품 더보기 &gt; Google Workspace &gt; 제품 라이브러리 &gt; Google Chat API.

    Google Chat API로 이동

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

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

  4. App Home URL(앱 홈 URL) 입력란에 URL을 추가합니다. 이 값은 일반적으로 동일합니다. URL을 앱 URL로 사용합니다. 이 URL은 APP_HOME 이벤트.

  5. 저장을 클릭합니다.

앱 홈 빌드

<ph type="x-smartling-placeholder">

앱 홈 카드는 사용자가 채팅 앱이며 다음에 대한 응답으로 업데이트될 수 있음 버튼 클릭, 양식 제출 또는 대화상자 닫기와 같은 대화형 이벤트

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

앱 홈의 첫 카드 만들기

앱 홈을 빌드하려면 채팅 앱에서 APP_HOME 상호작용 이벤트를 수신 대기하고 RenderActions pushCard 탐색이 추가되었습니다.

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"
      }}
    }]}}
  ]}]}

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"
      }}
    }]}}
  ]}]};
}

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"
      }}
    }]}}
  ]}]};
}

자바

java/app-home/src/main/java/com/google/chat/app/home/App.java
/**
 * Process Google Chat events
 *
 * @param event Event from chat.
 * @return GenericJson
 * @throws Exception
 */
@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() {
  GoogleAppsCardV1TextParagraph textParagraph = new GoogleAppsCardV1TextParagraph();
  textParagraph.setText("Here is the app home 🏠 It's " + new Date());

  GoogleAppsCardV1Widget textParagraphWidget = new GoogleAppsCardV1Widget();
  textParagraphWidget.setTextParagraph(textParagraph);

  GoogleAppsCardV1Action action = new GoogleAppsCardV1Action();
  action.setFunction("updateAppHome");

  GoogleAppsCardV1OnClick onClick = new GoogleAppsCardV1OnClick();
  onClick.setAction(action);

  GoogleAppsCardV1Button button = new GoogleAppsCardV1Button();
  button.setText("Update app home");
  button.setOnClick(onClick);

  GoogleAppsCardV1ButtonList buttonList = new GoogleAppsCardV1ButtonList();
  buttonList.setButtons(List.of(button));

  GoogleAppsCardV1Widget buttonListWidget = new GoogleAppsCardV1Widget();
  buttonListWidget.setButtonList(buttonList);

  GoogleAppsCardV1Section section = new GoogleAppsCardV1Section();
  section.setWidgets(List.of(textParagraphWidget, buttonListWidget));

  GoogleAppsCardV1Card card = new GoogleAppsCardV1Card();
  card.setSections(List.of(section));

  return card;
}

앱 홈 카드 업데이트

초기 앱 홈 카드에 버튼과 같은 대화형 위젯이 포함된 경우 또는 선택 입력을 기반으로 하는 경우 채팅 앱은 인스턴스를 반환하여 관련 상호작용 이벤트를 RenderActions 드림 updateCard 탐색으로 시작 상호작용 처리 방법에 대해 자세히 알아보려면 위젯에 대한 자세한 내용은 다음을 참조하세요. 사용자가 입력한 정보를 처리합니다.

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()
  }]}}}

Apps Script

이 예시에서는 카드 JSON과 함께 사용합니다. 또한 Apps Script 카드 서비스.

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

Node.js

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

자바

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;
}

제한사항

일반적으로 navigation: 채팅 앱에서는 사용할 수 없습니다. 여러 장의 카드를 반환할 수 없습니다. pushCard (초기 응답용) 및 updateCard (업데이트용)만 채팅 앱에서 사용할 수 있습니다.