Memecahkan masalah serta memperbaiki kartu dan dialog

Panduan ini menjelaskan error umum terkait kartu yang mungkin Anda alami, dan cara memperbaikinya.

---

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

Membuka Card Builder

---

Cara error kartu muncul

Error kartu ditunjukkan dalam beberapa cara:

• Bagian kartu, seperti widget atau komponen, tidak muncul atau dirender dengan cara yang tidak diharapkan.
• Seluruh kartu tidak muncul.
• Dialog tertutup, tidak terbuka, atau tidak dimuat.

Jika Anda melihat perilaku seperti ini, artinya terjadi error pada kartu aplikasi Anda.

Untuk referensi: dialog dan pesan kartu yang berfungsi dan bebas error

Sebelum memeriksa contoh kartu yang salah, pertimbangkan terlebih dahulu pesan dan dialog kartu yang berfungsi ini. Untuk menggambarkan setiap contoh error dan perbaikannya, JSON kartu ini dimodifikasi dengan memasukkan error.

Pesan kartu bebas error

Ini adalah pesan kartu bebas error yang berfungsi dan merinci informasi kontak yang menampilkan {i>header<i}, bagian, dan {i>widget<i} seperti teks dan tombol yang dihias:

Dialog bebas error

Ini adalah dialog bebas {i>error<i} yang berfungsi dan membuat kontak dengan mengumpulkan informasi dari pengguna, yang menampilkan footer, dan widget yang dapat diedit seperti input teks {i>switch<i}, dan tombol:

Error: Bagian kartu tidak muncul

Terkadang kartu dirender, tetapi bagian kartu yang Anda harapkan tidak muncul; kemungkinan penyebabnya adalah:

• Bidang JSON yang diperlukan tidak ada.
• Bidang JSON salah eja atau salah huruf besar.

Penyebab: Kolom JSON yang diperlukan tidak ada

Dalam contoh error ini, kolom JSON yang diperlukan, title, tidak ada. Akibatnya, kartu dirender, tetapi bagian kartu yang diharapkan muncul tidak. Mungkin sulit untuk memprediksi cara kartu dirender jika kolom yang wajib diisi dihilangkan.

Untuk memperbaiki error ini, tambahkan kolom JSON yang diperlukan; dalam contoh ini, title.

Untuk mengetahui apakah kolom JSON diperlukan atau tidak, lihat dokumentasi referensi Kartu v2. Dalam contoh ini, lihat deskripsi kolom title di CardHeader.

Berikut ini dua contoh:

Contoh 1: Menentukan subtitle tetapi menghilangkan title yang diperlukan akan menyebabkan seluruh header tampak kosong:

Gambar 1: Header kartu ini tidak ditampilkan karena kolom wajib diisi, title, tidak ada.

Lihat cuplikan JSON kartu yang salah

Error: Kolom wajib diisi, title, tidak ada di header.

    . . .
    "header": {

            "subtitle": "Software Engineer"
          }
    . . .
    

Lihat cuplikan JSON kartu yang benar

Perbaikan: Kolom yang wajib diisi, title, adalah bagian dari spesifikasi header.

    . . .
    "header": {
            "title": "Sasha",
            "subtitle": "Software Engineer"
          }
    . . .
    

Contoh 2: Menentukan subtitle, imageUrl, imageType, dan imageAltText, tetapi menghilangkan title yang diperlukan akan menyebabkan gambar dirender seperti yang diharapkan, tetapi tidak subjudul:

Gambar 2: Header kartu ini tidak menampilkan subtitel karena kolom wajib diisi, title, tidak ada, tetapi gambar dirender seperti yang diharapkan.

Lihat cuplikan JSON kartu yang salah

Error: Kolom wajib diisi, title, tidak ada di header.

    . . .
    "header": {

            "subtitle": "Software Engineer",
            "imageUrl":
            "https://developers.google.com/chat/images/quickstart-app-avatar.png",
            "imageType": "CIRCLE",
            "imageAltText": "Avatar for Sasha",
          }
    . . .
    

Lihat cuplikan JSON kartu yang benar

Perbaikan: Kolom yang wajib diisi, title, adalah bagian dari spesifikasi header.

    . . .
    "header": {
            "title": "Sasha",
            "subtitle": "Software Engineer",
            "imageUrl":
            "https://developers.google.com/chat/images/quickstart-app-avatar.png",
            "imageType": "CIRCLE",
            "imageAltText": "Avatar for Sasha",
          }
    . . .
    

Penyebab: Ejaan salah atau huruf besar JSON

Dalam contoh error ini, JSON kartu menyertakan semua kolom yang diperlukan, tetapi satu kolom, imageUrl tidak ditulis dengan benar sebagai imageURL (huruf kapital R huruf besar L), yang menyebabkan error: gambar yang ditunjuknya tidak dirender.

Untuk memperbaiki error ini, dan masalah lain yang serupa, gunakan format JSON yang benar. Dalam hal ini, imageUrl benar. Jika ragu, periksa JSON kartu terhadap dokumen referensi kartu.

Gambar 3: Header kartu ini tidak menampilkan subtitel karena kolom wajib diisi, title, tidak ada, tetapi gambar dirender seperti yang diharapkan.

Lihat cuplikan JSON kartu yang salah

Error: Kolom imageURL tidak boleh ditulis dengan huruf besar. Seharusnya imageUrl.

    . . .
    "header": {
      "title": "Sasha",
      "subtitle": "Software Engineer",
      "imageURL":
      "https://developers.google.com/chat/images/quickstart-app-avatar.png",
      "imageType": "CIRCLE",
      "imageAltText": "Avatar for Sasha",
    }
    . . .
    

Lihat cuplikan JSON kartu yang benar

Tetap: Kolom imageUrl menggunakan huruf besar dengan benar.

    . . .
    "header": {
            "title": "Sasha",
            "subtitle": "Software Engineer",
            "imageUrl":
            "https://developers.google.com/chat/images/quickstart-app-avatar.png",
            "imageType": "CIRCLE",
            "imageAltText": "Avatar for Sasha",
          }
    . . .
    

Error: Seluruh kartu tidak muncul

Terkadang kartu itu sendiri tidak muncul; kemungkinan penyebabnya adalah:

• Widget ButtonList tidak ditetapkan dengan benar.
• Widget CardFixedFooter salah menentukan tombol.

Penyebab: buttonList atau cardFixedFooter salah ditentukan

Jika pesan atau dialog kartu menyertakan widget ButtonList yang ditentukan dengan salah atau widget CardFixedFooter dengan tombol yang ditentukan dengan salah, seluruh kartu tidak akan ditampilkan, dan tidak ada yang muncul pada tempatnya. Spesifikasi yang salah dapat mencakup kolom yang tidak ada, kolom yang salah eja atau kapitalisasinya, atau JSON yang tidak terstruktur dengan benar, seperti tidak adanya koma, tanda petik, atau kurung kurawal.

Untuk memperbaiki error ini, periksa JSON kartu terhadap dokumen referensi kartu. Secara khusus, bandingkan widget ButtonList apa pun dengan panduan widget ButtonList.

Contoh: Dalam panduan widget ButtonList, meneruskan tindakan onClick yang belum selesai di tombol pertama akan mencegah seluruh kartu dirender.

Lihat cuplikan JSON kartu yang salah

Error: Objek onClick tidak memiliki kolom yang ditentukan, sehingga seluruh kartu tidak muncul.

    . . .
    {
      "buttonList": {
        "buttons": [
          {
            "text": "Share",
            "onClick": {


              }
            }
          },
          {
            "text": "Edit",
            "onClick": {
              "action": {
                "function": "goToView",
                "parameters": [
                  {
                    "key": "viewType",
                    "value": "EDIT",
                  }
                ],
              }
            }
          },
        ],
      },
    }
    . . .
    

Lihat cuplikan JSON kartu yang benar

Perbaikan: Objek onClick sekarang memiliki kolom openLink, sehingga kartu muncul seperti yang diharapkan.

    . . .
    {
      "buttonList": {
        "buttons": [
          {
            "text": "Share",
            "onClick": {
              "openLink": {
                "url": "https://example.com/share",
              }
            }
          },
          {
            "text": "Edit",
            "onClick": {
              "action": {
                "function": "goToView",
                "parameters": [
                  {
                    "key": "viewType",
                    "value": "EDIT",
                  }
                ],
              }
            }
          },
        ],
      },
    }
    . . .
    

Error: Dialog tertutup, terhenti, atau tidak terbuka

Jika dialog tertutup secara tiba-tiba, gagal dimuat, atau tidak terbuka, kemungkinan penyebabnya adalah masalah pada antarmuka kartunya.

Berikut adalah alasan yang paling umum:

• Widget CardFixedFooter tidak memiliki primaryButton.
• Tombol di widget CardFixedFooter tidak memiliki tindakan onClick, atau tindakan onClick-nya tidak ditentukan dengan benar.
• Widget TextInput tidak memiliki kolom name.

Penyebab: CardFixedFooter tidak memiliki primaryButton

Dalam dialog dengan widget CardFixedFooter, diperlukan primaryButton dengan teks dan warna. Menghapus primaryButton atau menyetelnya dengan salah akan mencegah seluruh dialog muncul.

Untuk memperbaiki error ini, pastikan widget CardFixedFooter menyertakan primaryButton yang ditentukan dengan benar.

Lihat cuplikan JSON kartu yang salah

Error: Objek fixedFooter belum menetapkan kolom primaryButton, sehingga menyebabkan dialog gagal dimuat atau dibuka.

    . . .
    "fixedFooter": {

        "onClick": {
          . . .
      },
      "secondaryButton": {
        . . .
        }
      }
    }
    . . .
    

Lihat cuplikan JSON kartu yang benar

Perbaikan: fixedFooter kini memiliki kolom primaryButton yang ditentukan, sehingga dialog berfungsi seperti yang diharapkan.

    . . .
    "fixedFooter": {
      "primaryButton": {
        "text": "Submit",
        "color": {
          "red": 0,
          "blue": 1,
          "green": 0
        },
        "onClick": {
          . . .
      },
      "secondaryButton": {
        . . .
        }
      }
    }
    . . .
    

Penyebab: Setelan onClick salah di FixedFooter

Dalam dialog dengan widget CardFixedFooter, menentukan setelan onClick pada tombol mana pun dengan tidak benar, atau mengabaikannya, menyebabkan dialog ditutup, gagal dimuat, atau tidak terbuka.

Untuk memperbaiki error ini, pastikan setiap tombol menyertakan setelan onClick yang ditentukan dengan benar.

Lihat cuplikan JSON kartu yang salah

Error: Objek primaryButton memiliki kolom onClick dengan array `parameters` yang salah eja, yang menyebabkan dialog gagal dimuat atau dibuka.

    . . .
    "fixedFooter": {
      "primaryButton": {
        "text": "Submit",
        "color": {
          "red": 0,
          "blue": 1,
          "green": 0
        },
        "onClick": {
          "action": {
            "function": "setLanguageType",
            "parrammetters": [
              {
                "key": "languageType",
                "value": "C++"
              }
            ]
          }
        }
      },
      "secondaryButton": {
        "text": "Cancel",
        "onClick": {
          "action": {
            "function": "reset"
          }
        }
      }
    }
    . . .
    

Lihat cuplikan JSON kartu yang benar

Perbaikan: Objek primaryButton memiliki kolom onClick dengan array `parameters` yang dieja dengan benar, sehingga dialog berfungsi seperti yang diharapkan.

    . . .
    "fixedFooter": {
      "primaryButton": {
        "text": "Submit",
        "color": {
          "red": 0,
          "blue": 1,
          "green": 0
        },
        "onClick": {
          "action": {
            "function": "setLanguageType",
            "parameters": [
              {
                "key": "languageType",
                "value": "C++"
              }
            ]
          }
        }
      },
      "secondaryButton": {
        "text": "Cancel",
        "onClick": {
          "action": {
            "function": "reset"
          }
        }
      }
    }
    . . .
    

Penyebab: TextInput tidak memiliki name

Jika dialog menyertakan widget TextInput yang mengecualikan kolom name, dialog tidak akan berperilaku seperti yang diharapkan. Aplikasi mungkin tertutup, terbuka, tetapi gagal dimuat, atau tidak terbuka.

Untuk memperbaiki error ini, pastikan setiap widget TextInput menyertakan kolom name yang sesuai. Pastikan setiap kolom name di kartu bersifat unik.

Lihat cuplikan JSON kartu yang salah

Error: Objek textInput belum menetapkan kolom name, sehingga menyebabkan dialog tertutup, gagal dimuat, atau gagal dibuka.

    . . .
    {
      "textInput": {
        "label": "Name",
        "type": "SINGLE_LINE",

      }
    }
    . . .
    

Lihat cuplikan JSON kartu yang benar

Perbaikan: textInput kini memiliki kolom name yang ditentukan, sehingga dialog berfungsi seperti yang diharapkan.

    . . .
    {
      "textInput": {
        "label": "Name",
        "type": "SINGLE_LINE",
        "name": "contactName"
      }
    }
    . . .
    

Tindakan membuka, mengirim, atau membatalkan dialog gagal dengan arsitektur aplikasi asinkron

Jika aplikasi Chat Anda menampilkan pesan error Could not load dialog. Invalid response returned by bot. saat bekerja dengan dialog, mungkin karena aplikasi Anda menggunakan arsitektur asinkron, seperti Cloud Pub/Sub atau Create Message API method.

Membuka, mengirimkan, atau membatalkan dialog memerlukan respons sinkron dari aplikasi Chat dengan DialogEventType Oleh karena itu, dialog tidak didukung oleh aplikasi dibangun dengan arsitektur asinkron.

Sebagai solusinya, pertimbangkan untuk menggunakan pesan kartu, bukan dialog.

Error kartu dan dialog lainnya

Jika perbaikan yang dijelaskan di halaman ini tidak menyelesaikan error terkait kartu yang dialami aplikasi Anda, buat kueri log error aplikasi. Membuat kueri log dapat membantu menemukan error dalam JSON kartu atau kode aplikasi, dan log menyertakan pesan error deskriptif untuk membantu Anda memperbaikinya.

Topik terkait

Untuk mendapatkan bantuan dalam memperbaiki error aplikasi Google Chat, lihat Memecahkan masalah dan memperbaiki aplikasi Google Chat dan Men-debug aplikasi Chat.