สร้างหน้าแรกสำหรับแอป Google Chat

หน้านี้อธิบายวิธีสร้างหน้าแรกสำหรับ แอป Google Chat หน้าแรกของแอปเป็นอินเทอร์เฟซการ์ดที่ปรับแต่งได้ ที่แอปใน Chat ส่งให้ผู้ใช้เมื่อผู้ใช้เปิดแอปโดยตรง ด้วยแอป Chat

ตัวอย่างเช่น คุณสามารถ กำหนดค่าข้อความการ์ดหน้าแรกของแอปให้รวมเคล็ดลับในการโต้ตอบกับ แอป Chat ที่ใช้ คำสั่งเครื่องหมายทับ สำหรับผู้ใช้ปลายทาง หน้าแรกของแอปคือ ใช้ได้ในข้อความส่วนตัวของแอป Chat ก็ต่อเมื่อ จะเป็นการเปิดใช้ฟีเจอร์นี้

---

ใช้เครื่องมือสร้างการ์ดเพื่อออกแบบและแสดงตัวอย่างข้อความการ์ด JSON สำหรับแอป Chat ดังนี้

เปิดเครื่องมือสร้างการ์ด

---

ข้อกำหนดเบื้องต้น

Python

แอป Google Chat ที่เปิดใช้ฟีเจอร์แบบอินเทอร์แอกทีฟ วิธีสร้าง แอป Chat แบบอินเทอร์แอกทีฟที่ใช้บริการ HTTP ให้ทำการเริ่มต้นอย่างรวดเร็วนี้ให้เสร็จสมบูรณ์

Apps Script

แอป Google Chat ที่เปิดใช้ฟีเจอร์แบบอินเทอร์แอกทีฟ วิธีสร้าง แอป Chat แบบอินเทอร์แอกทีฟใน Apps Script โปรดกรอกข้อมูลในการเริ่มต้นอย่างรวดเร็วนี้

Node.js

แอป Google Chat ที่เปิดใช้ฟีเจอร์แบบอินเทอร์แอกทีฟ วิธีสร้าง แอป Chat แบบอินเทอร์แอกทีฟที่ใช้บริการ HTTP ให้ทำการเริ่มต้นอย่างรวดเร็วนี้ให้เสร็จสมบูรณ์

Java

แอป Google Chat ที่เปิดใช้ฟีเจอร์แบบอินเทอร์แอกทีฟ วิธีสร้าง แอป Chat แบบอินเทอร์แอกทีฟที่ใช้บริการ HTTP ให้ทำการเริ่มต้นอย่างรวดเร็วนี้ให้เสร็จสมบูรณ์

กำหนดค่า Chat API

หากต้องการรองรับหน้าแรกของแอป คุณต้องอัปเดตการกำหนดค่า Chat API ในคอนโซล Google Cloud

Python

1. ในคอนโซล Google Cloud ให้ไปที่เมนู > ผลิตภัณฑ์อื่นๆ > Google Workspace > คลังผลิตภัณฑ์ > Google Chat API

   ไปที่ Google Chat API

2. คลิก Manage แล้วคลิกแท็บ Configuration

3. เลือกช่องทำเครื่องหมายหน้าแรกของแอปการสนับสนุน

4. เพิ่ม URL ในช่อง URL หน้าแรกของแอป โดยปกติแล้วค่านี้เท่ากัน URL เป็น URL ของแอป URL นี้ใช้สำหรับ APP_HOME เหตุการณ์

5. คลิกบันทึก

Apps Script

1. ในคอนโซล Google Cloud ให้ไปที่เมนู > ผลิตภัณฑ์อื่นๆ > Google Workspace > คลังผลิตภัณฑ์ > Google Chat API

   ไปที่ Google Chat API

2. คลิก Manage แล้วคลิกแท็บ Configuration

3. เลือกช่องทำเครื่องหมายหน้าแรกของแอปการสนับสนุน

4. คลิกบันทึก

Node.js

1. ในคอนโซล Google Cloud ให้ไปที่เมนู > ผลิตภัณฑ์อื่นๆ > Google Workspace > คลังผลิตภัณฑ์ > Google Chat API

   ไปที่ Google Chat API

2. คลิก Manage แล้วคลิกแท็บ Configuration

3. เลือกช่องทำเครื่องหมายหน้าแรกของแอปการสนับสนุน

4. เพิ่ม URL ในช่อง URL หน้าแรกของแอป โดยปกติแล้วค่านี้เท่ากัน URL เป็น URL ของแอป URL นี้ใช้สำหรับ APP_HOME เหตุการณ์

5. คลิกบันทึก

Java

1. ในคอนโซล Google Cloud ให้ไปที่เมนู > ผลิตภัณฑ์อื่นๆ > Google Workspace > คลังผลิตภัณฑ์ > Google Chat API

   ไปที่ Google Chat API

2. คลิก Manage แล้วคลิกแท็บ Configuration

3. เลือกช่องทำเครื่องหมายหน้าแรกของแอปการสนับสนุน

4. เพิ่ม URL ในช่อง URL หน้าแรกของแอป โดยปกติแล้วค่านี้เท่ากัน URL เป็น URL ของแอป URL นี้ใช้สำหรับ APP_HOME เหตุการณ์

5. คลิกบันทึก

สร้างหน้าแรกของแอป

ดูตัวอย่างเพิ่มเติมได้ที่ตัวอย่างแอป Google Chat

การ์ดหน้าแรกของแอปจะเริ่มต้นเมื่อผู้ใช้เปิดข้อความส่วนตัวจาก แอป Chat และสามารถอัปเดตเป็นการตอบกลับของ เหตุการณ์แบบอินเทอร์แอกทีฟ เช่น การคลิกปุ่ม การส่งแบบฟอร์ม หรือการปิดกล่องโต้ตอบ

ในตัวอย่างต่อไปนี้ แอป Chat จะแสดง การ์ดหน้าแรกของแอปเริ่มต้นที่แสดงเวลาที่สร้างการ์ดและ ปุ่ม เมื่อผู้ใช้คลิกปุ่ม แอป Chat จะแสดงการ์ดที่อัปเดตแล้วซึ่งแสดงเวลาที่สร้างการ์ดที่อัปเดต

สร้างการ์ดเริ่มต้นสำหรับหน้าแรกของแอป

หากต้องการสร้างหน้าแรกของแอป แอป Chat จะต้องจัดการ APP_HOME เหตุการณ์การโต้ตอบและแสดงผลอินสแตนซ์ของ RenderActions ด้วยการนำทาง pushCard

Python

python/app-home/main.py

ดูใน GitHub

@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

ใช้ฟังก์ชัน onAppHome ที่เรียกหลังจากเหตุการณ์ APP_HOME ทั้งหมด ดังนี้

ตัวอย่างนี้ส่งข้อความการ์ดโดยการส่งคืน JSON ของการ์ด คุณยังสามารถใช้ บริการการ์ด Apps Script

apps-script/app-home/app-home.gs

ดูใน GitHub

/**
 * 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

ดูใน GitHub

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

java/app-home/src/main/java/com/google/chat/app/home/App.java

ดูใน GitHub

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

อัปเดตการ์ดหน้าแรกของแอป

หากการ์ดหน้าแรกของแอปเริ่มต้นมีวิดเจ็ตแบบอินเทอร์แอกทีฟ เช่น ปุ่ม หรืออินพุตที่เลือกไว้ แอป Chat จะต้องจัดการ เหตุการณ์การโต้ตอบที่เกี่ยวข้องด้วยการส่งคืนอินสแตนซ์ RenderActions ด้วยการนำทาง updateCard หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดการแบบอินเทอร์แอกทีฟ วิดเจ็ต, ดู ประมวลผลข้อมูลที่ผู้ใช้ป้อน

Python

python/app-home/main.py

ดูใน GitHub

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

ดูใน GitHub

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

Node.js

node/app-home/index.js

ดูใน GitHub

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

Java

java/app-home/src/main/java/com/google/chat/app/home/App.java

ดูใน GitHub

// 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 คือ ใช้ไม่ได้กับแอปใน Chat คุณไม่สามารถส่งคืนชุดการ์ดได้ มีเพียง pushCard (สำหรับคำตอบเบื้องต้น) และ updateCard (สำหรับการอัปเดต) เท่านั้นที่ ใช้ได้กับแอปใน Chat

หัวข้อที่เกี่ยวข้อง

• ดูตัวอย่างแอปใน Chat ที่ใช้หน้าแรกของแอป

• หากต้องการเปิดกล่องโต้ตอบ ให้ใช้การโต้ตอบ OPEN_DIALOG สำหรับข้อมูลเพิ่มเติม ดู เปิดกล่องโต้ตอบเพื่อตอบกลับการ์ดหน้าแรกของแอป

• หากต้องการปิดกล่องโต้ตอบ ให้ใช้การโต้ตอบ CLOSE_DIALOG เพื่อปิดกล่องโต้ตอบ แล้วกลับไปที่การ์ดหน้าแรกของแอปหรือใช้ CLOSE_DIALOG_EXECUTE เพื่อปิดกล่องโต้ตอบและรีเฟรชการ์ดหน้าแรกของแอป สำหรับ ข้อมูลเพิ่มเติม โปรดดู ตอบกลับกล่องโต้ตอบสำหรับการ์ดหน้าแรกของแอป

• สำหรับตัวอย่างวิธีใช้หน้าแรกของแอป โปรดดูที่ การจัดการปัญหาในแอป Chat ใน Codelab สร้างแอปสำหรับ Google Chat ด้วย Gemini