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 antarmuka pengguna dan pesan untuk aplikasi Chat:

Buka Pembuat Kartu

Cara error kartu muncul

Error kartu muncul dalam beberapa cara:

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

Jika Anda mengalami perilaku seperti ini, berarti ada error pada kartu aplikasi Anda.

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

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

Pesan kartu bebas error

Berikut adalah pesan kartu yang berfungsi dan bebas error yang menjelaskan informasi kontak yang menampilkan header, bagian, dan widget seperti teks dan tombol yang dihias:

Dialog bebas error

Berikut adalah dialog yang berfungsi dan bebas error yang membuat kontak dengan mengumpulkan informasi dari pengguna, menampilkan footer, dan widget yang dapat diedit seperti input teks dan tombol, serta tombol:

Error: Bagian kartu tidak muncul

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

  • Kolom JSON wajib diisi tidak ada.
  • Kolom JSON salah eja atau salah menggunakan huruf kapital.

Penyebab: Kolom JSON wajib diisi tidak ada

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

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

Untuk mempelajari 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 menyebabkan seluruh header tampak kosong:

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

Melihat cuplikan JSON kartu yang salah

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

    . . .
    "header": {

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

Melihat cuplikan JSON kartu yang benar

Perbaikan: Kolom 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 menyebabkan gambar dirender seperti yang diharapkan, tetapi tidak untuk subtitel:

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

Melihat 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",
          }
    . . .

Melihat cuplikan JSON kartu yang benar

Perbaikan: Kolom 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: JSON yang salah ejaan atau huruf kapitalnya

Dalam contoh error ini, JSON kartu menyertakan semua kolom yang diperlukan, tetapi satu kolom, imageUrl, salah menggunakan huruf besar sebagai imageURL (huruf besar R huruf besar L), yang menyebabkan error: gambar yang ditunjuk tidak dirender.

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

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

Melihat cuplikan JSON kartu yang salah

Error: Kolom imageURL tidak menggunakan huruf kapital dengan benar. 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",
    }
    . . .

Melihat cuplikan JSON kartu yang benar

Perbaikan: Kolom imageUrl menggunakan huruf kapital 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:

Penyebab: buttonList atau cardFixedFooter ditentukan dengan salah

Jika pesan atau dialog kartu menyertakan widget ButtonList atau widget CardFixedFooter yang salah ditentukan dengan tombol yang salah ditentukan, seluruh kartu tidak akan ditampilkan, dan tidak ada yang muncul sebagai gantinya. Spesifikasi yang salah dapat mencakup kolom yang tidak ada, kolom yang salah ejaan atau huruf besar, atau JSON yang tidak terstruktur dengan benar, seperti koma, tanda petik, atau kurung kurawal yang tidak ada.

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

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

Melihat 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",
                  }
                ],
              }
            }
          },
        ],
      },
    }
    . . .

Melihat cuplikan JSON kartu yang benar

Diperbaikan: Objek onClick kini 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 ditutup, terhenti, atau tidak terbuka

Jika dialog ditutup secara tidak terduga, gagal dimuat, atau tidak terbuka, kemungkinan penyebabnya adalah masalah pada antarmuka kartunya.

Berikut adalah alasan yang paling umum:

Penyebab: CardFixedFooter tidak memiliki primaryButton

Dalam dialog dengan widget CardFixedFooter, Anda harus menentukan 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.

Melihat cuplikan JSON kartu yang salah

Error: Objek fixedFooter tidak memiliki kolom primaryButton yang ditentukan, sehingga dialog gagal dimuat atau dibuka.

    . . .
    "fixedFooter": {

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

Melihat cuplikan JSON kartu yang benar

Diperbaikan: 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 apa pun dengan tidak benar, atau menghilangkannya, menyebabkan dialog ditutup, gagal dimuat, atau tidak terbuka.

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

Melihat cuplikan JSON kartu yang salah

Error: Objek primaryButton memiliki kolom onClick dengan array `parameters` yang salah eja, sehingga 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"
          }
        }
      }
    }
    . . .

Melihat cuplikan JSON kartu yang benar

Diperbaikan: 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 ditutup, terbuka tetapi gagal dimuat, atau tidak terbuka.

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

Melihat cuplikan JSON kartu yang salah

Error: Objek textInput tidak memiliki kolom name yang ditentukan, sehingga dialog ditutup, gagal dimuat, atau gagal dibuka.

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

      }
    }
    . . .

Melihat cuplikan JSON kartu yang benar

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

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

Tindakan buka, kirim, atau batalkan dialog gagal dengan arsitektur aplikasi asinkron

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

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

Sebagai solusi, 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.

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