Membangun halaman beranda untuk aplikasi Google Chat

Halaman ini menjelaskan cara membuat beranda untuk Aplikasi Google Chat. Beranda aplikasi adalah antarmuka kartu yang dapat disesuaikan yang dikirim aplikasi Chat kepada pengguna saat mereka membuka dengan aplikasi Chat.

Sebagai contoh, Anda dapat mengkonfigurasi pesan kartu beranda aplikasi guna menyertakan kiat untuk berinteraksi dengan aplikasi Chat menggunakan perintah garis miring. Untuk pengguna akhir, beranda aplikasi adalah hanya tersedia di pesan langsung aplikasi Chat jika pengembang aplikasi mengaktifkan fitur tersebut.

Gunakan Card Builder untuk mendesain dan melihat pratinjau pesan kartu JSON untuk aplikasi Chat:

Prasyarat

Mengonfigurasi Chat API

Untuk mendukung app home, Anda harus memperbarui konfigurasi Chat API di Konsol Google Cloud.

Mem-build aplikasi utama

Kartu layar utama aplikasi dimulai saat pengguna membuka pesan langsung dari aplikasi Chat dan dapat diupdate sebagai respons dari peristiwa interaktif seperti klik tombol, pengiriman formulir, atau penutupan dialog.

Pada contoh berikut, aplikasi Chat menampilkan kartu beranda aplikasi awal yang menampilkan waktu kartu dibuat dan tombol. Saat pengguna mengklik tombol tersebut, aplikasi Chat menampilkan kartu yang diperbarui yang menunjukkan waktu pembuatan kartu yang diperbarui.

Membuat kartu awal untuk layar utama aplikasi

Untuk membangun beranda aplikasi, aplikasi Chat harus menangani APP_HOME peristiwa interaksi dan menampilkan instance RenderActions dengan navigasi pushCard.

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

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

Memperbarui kartu beranda aplikasi

Jika kartu beranda aplikasi awal Anda berisi widget interaktif, seperti tombol atau input pilihan, aplikasi Chat Anda harus menangani peristiwa interaksi terkait dengan menampilkan instance RenderActions dengan navigasi updateCard. Untuk mempelajari lebih lanjut cara menangani widget, lihat Memproses informasi yang dimasukkan oleh pengguna.

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

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

Batasan

Secara umum, navigation sama dengan tidak tersedia untuk aplikasi Chat. Anda tidak dapat menampilkan tumpukan kartu. Hanya pushCard (untuk respons awal) dan updateCard (untuk update) yang yang tersedia untuk aplikasi Chat.

Topik terkait

• Lihat contoh aplikasi Chat yang menggunakan layar utama aplikasi.

• Untuk membuka dialog, gunakan interaksi OPEN_DIALOG. Untuk informasi selengkapnya, lihat Buka dialog sebagai respons terhadap kartu layar utama aplikasi.

• Untuk menutup dialog, gunakan interaksi CLOSE_DIALOG untuk menutup dialog dan kembali ke kartu beranda aplikasi atau gunakan CLOSE_DIALOG_EXECUTE untuk menutup dialog dan memuat ulang kartu beranda aplikasi. Sebagai informasi selengkapnya, lihat Merespons dialog untuk kartu layar utama aplikasi.

• Untuk contoh cara menggunakan layar utama aplikasi, lihat aplikasi Chat pengelolaan masalah di codelab Membuat aplikasi untuk Google Chat dengan Gemini.