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 ke pengguna saat mereka membuka dengan aplikasi Chat.

Kartu layar utama aplikasi dengan dua widget.

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:

Membuka Card Builder

Prasyarat

Python

Apps Script

Melakukan konfigurasi di Konsol Google Cloud

Python

  1. Di Konsol Google Cloud, buka Menu > Produk lainnya > Google Workspace > Library Produk > Google Chat API.

    Buka Google Chat API

  2. Klik Manage, lalu klik tab Configuration.

  3. Aktifkan Support App Home.

  4. Pilih kotak centang Support App Home.

  5. Di kolom URL Beranda Aplikasi, tambahkan URL. Nilai ini biasanya sama URL sebagai URL Aplikasi. URL ini dipanggil untuk Peristiwa APP_HOME.

  6. Klik Simpan.

Apps Script

  1. Di Konsol Google Cloud, buka Menu > Produk lainnya > Google Workspace > Library Produk > Google Chat API.

    Buka Google Chat API

  2. Klik Manage, lalu klik tab Configuration.

  3. Pilih kotak centang Support App Home.

  4. Klik Simpan.

Mengonfigurasi aplikasi Chat Anda

Konfigurasi aplikasi Chat Anda untuk layar utama aplikasi.

Python

Saat pengguna membuka pesan langsung dari aplikasi Chat, Peristiwa APP_HOME dikirim ke aplikasi Chat Anda. Jika Aplikasi Chat menerima peristiwa ini, instance JSON dari RenderActions ditampilkan dengan navigasi pushCard.

@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 {
    "action": {
      "navigations": [
        {
          "pushCard": {
            "sections": [
              {
                "widgets": [
                  {
                    "buttonList": {
                      "buttons": [
                        {
                          "text": "Open documentation",
                          "onClick": {
                            "openLink": {
                              "url": "https://developers.google.com/chat"
                            }
                          }
                        }
                      ]
                    }
                  }
                ]
              }
            ]
          }
        }
      ]
    }
  }

Apps Script

Contoh ini mengirimkan pesan kartu dengan mengembalikan JSON kartu. Anda juga dapat menggunakan Layanan kartu Apps Script.

Implementasikan fungsi onAppHome untuk menampilkan instance JSON RenderActions dengan navigasi pushCard:

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

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

Memperbarui kartu beranda aplikasi

Kartu layar utama aplikasi dapat diperbarui saat pengguna mengirimkan informasi atau menutup dialog. Misalnya, kartu beranda aplikasi awal berisi pesan selamat datang yang meminta pengguna untuk mengisi formulir dengan informasi. Setelah pengguna menyelesaikan , kartu layar utama aplikasi akan diperbarui. Update harus ditampilkan dengan instance dari RenderActions yang berisi navigasi updateCard.

Python

Untuk aplikasi HTTP, memperbarui kartu beranda aplikasi mirip dengan Memproses informasi yang dimasukkan oleh pengguna, tetapi Anda harus menampilkan RenderActions. invokedFunction mewakili nama fungsi yang dipanggil yang terkait dengan widget Card. Untuk informasi selengkapnya, lihat CommonEventObject Dalam contoh berikut, submitForm menunjukkan bahwa pengguna telah mengirimkan formulir data:

@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': [{
                'updateCard': get_update_card()
              }]
            }
          }
        }

def get_update_card():
  return {
      "action": {
          "navigations": [{
              "pushCard": {
                  "sections": [{
                      "widgets": [{
                          "buttonList": {
                              "buttons": [{
                                  "text": "Open documentation",
                                  "onClick": {
                                      "openLink": {
                                          "url": "https://developers.google.com/chat"
                                      }
                                  },
                              }]
                          }
                      }]
                  }]
              }
          }]
      }
  }

Apps Script

Contoh ini mengirimkan pesan kartu dengan mengembalikan JSON kartu. Anda juga dapat menggunakan Layanan kartu Apps Script. 

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

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

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.