कार्ड और डायलॉग से जुड़ी समस्याएं हल करना और उन्हें ठीक करना

इस गाइड में, कार्ड से जुड़ी उन सामान्य गड़बड़ियों के बारे में बताया गया है जो आपको दिख सकती हैं. साथ ही, उन्हें ठीक करने का तरीका भी बताया गया है.

Chat ऐप्लिकेशन के लिए मैसेजिंग और यूज़र इंटरफ़ेस डिज़ाइन करने और उनकी झलक देखने के लिए, कार्ड बिल्डर का इस्तेमाल करें:

कार्ड से जुड़ी गड़बड़ियां कैसे दिखती हैं

कार्ड से जुड़ी गड़बड़ियां कई तरह से दिख सकती हैं:

• कार्ड का कोई हिस्सा, जैसे कि विजेट या कॉम्पोनेंट नहीं दिखता या उम्मीद के मुताबिक नहीं दिखता.
• पूरा कार्ड नहीं दिखता.
• कोई डायलॉग बॉक्स बंद हो जाता है, खुलता नहीं है या लोड नहीं होता.

अगर आपको इस तरह की समस्या आ रही है, तो इसका मतलब है कि आपके ऐप्लिकेशन के कार्ड में कोई गड़बड़ी है.

रेफ़रंस के लिए: गड़बड़ी से मुक्त कार्ड मैसेज और डायलॉग

गड़बड़ी वाले कार्ड के उदाहरणों की जांच करने से पहले, गड़बड़ी से मुक्त इस कार्ड मैसेज और डायलॉग को देखें. हर उदाहरण में मौजूद गड़बड़ी और उसे ठीक करने का तरीका दिखाने के लिए, इस कार्ड के JSON में गड़बड़ियां जोड़ी गई हैं.

गड़बड़ी से मुक्त कार्ड मैसेज

यहां गड़बड़ी से मुक्त कार्ड मैसेज दिया गया है. इसमें संपर्क की जानकारी दी गई है. इसमें हेडर, सेक्शन, और सजाए गए टेक्स्ट और बटन जैसे विजेट शामिल हैं:

गड़बड़ी से मुक्त डायलॉग

यहां गड़बड़ी से मुक्त डायलॉग दिया गया है. यह उपयोगकर्ताओं से जानकारी इकट्ठा करके, संपर्क बनाता है. इसमें फ़ुटर और टेक्स्ट इनपुट, स्विच, और बटन जैसे ऐसे विजेट शामिल हैं जिनमें बदलाव किया जा सकता है:

गड़बड़ी: कार्ड का कोई हिस्सा नहीं दिखता

कभी-कभी कार्ड दिखते हैं, लेकिन कार्ड का वह हिस्सा नहीं दिखता जो आपको दिखना चाहिए. इसकी ये वजहें हो सकती हैं:

• ज़रूरी JSON फ़ील्ड मौजूद नहीं है.
• JSON फ़ील्ड की स्पेलिंग गलत है या उसमें गलत तरीके से कैपिटल लेटर का इस्तेमाल किया गया है.

वजह: ज़रूरी JSON फ़ील्ड मौजूद नहीं है

गड़बड़ी के इस उदाहरण में, ज़रूरी JSON फ़ील्ड, title मौजूद नहीं है. इस वजह से, कार्ड दिखता है, लेकिन कार्ड के वे हिस्से नहीं दिखते जो दिखने चाहिए. ज़रूरी फ़ील्ड मौजूद न होने पर, यह अनुमान लगाना मुश्किल हो सकता है कि कार्ड कैसे दिखेंगे.

इस गड़बड़ी को ठीक करने के लिए, ज़रूरी JSON फ़ील्ड जोड़ें. इस उदाहरण में, title जोड़ें.

यह जानने के लिए कि कोई JSON फ़ील्ड ज़रूरी है या नहीं, Cards v2 का रेफ़रंस दस्तावेज़ देखें. इस उदाहरण में, title फ़ील्ड का ब्यौरा CardHeader पर देखें.

यहां दो उदाहरण दिए गए हैं:

पहला उदाहरण: subtitle की जानकारी देने पर, लेकिन ज़रूरी title की जानकारी न देने पर, पूरा हेडर खाली दिखता है:

    . . .
    "header": {

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

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

दूसरा उदाहरण: subtitle, imageUrl, imageType, और imageAltText की जानकारी देने पर, लेकिन ज़रूरी title की जानकारी न देने पर, इमेज उम्मीद के मुताबिक दिखती है, लेकिन सबटाइटल नहीं:

    . . .
    "header": {

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

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

वजह: JSON की स्पेलिंग गलत है या उसमें गलत तरीके से कैपिटल लेटर का इस्तेमाल किया गया है

गड़बड़ी के इस उदाहरण में, कार्ड के JSON में सभी ज़रूरी फ़ील्ड शामिल हैं. हालांकि, एक फ़ील्ड, imageUrl में गलत तरीके से कैपिटल लेटर का इस्तेमाल किया गया है. इसे imageURL (कैपिटल R कैपिटल L) लिखा गया है. इस वजह से, गड़बड़ी होती है: यह जिस इमेज की ओर इशारा करता है वह नहीं दिखती.

इस गड़बड़ी और इसी तरह की अन्य गड़बड़ियों को ठीक करने के लिए, JSON के सही फ़ॉर्मैट का इस्तेमाल करें. इस मामले में, imageUrl सही है. अगर आपको कोई संदेह है, तो कार्ड के रेफ़रंस दस्तावेज़ के हिसाब से, कार्ड के JSON की जांच करें.

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

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

गड़बड़ी: पूरा कार्ड नहीं दिखता

कभी-कभी कार्ड नहीं दिखता. इसकी ये वजहें हो सकती हैं:

• एक ButtonList विजेट की जानकारी गलत तरीके से दी गई है.
• एक CardFixedFooter विजेट में बटन की जानकारी गलत तरीके से दी गई है.

वजह: buttonList या cardFixedFooter की जानकारी गलत तरीके से दी गई है

अगर किसी कार्ड मैसेज या डायलॉग में ButtonList विजेट की जानकारी गलत तरीके से दी गई है या CardFixedFooter विजेट में बटन की जानकारी गलत तरीके से दी गई है, तो पूरा कार्ड नहीं दिखता. साथ ही, उसकी जगह कुछ नहीं दिखता. गलत तरीके से दी गई जानकारी में, ये गड़बड़ियां हो सकती हैं: फ़ील्ड मौजूद नहीं हैं, फ़ील्ड की स्पेलिंग गलत है या उसमें गलत तरीके से कैपिटल लेटर का इस्तेमाल किया गया है या JSON का स्ट्रक्चर गलत है. जैसे, कॉमा, कोट या कर्ली ब्रेस मौजूद नहीं है.

इस गड़बड़ी को ठीक करने के लिए, कार्ड के रेफ़रंस दस्तावेज़ के हिसाब से, कार्ड के JSON की जांच करें. खास तौर पर, किसी भी ButtonList विजेट की तुलना, ButtonList विजेट की गाइड से करें.

उदाहरण: ButtonList विजेट की गाइड में, पहले बटन में onClick कार्रवाई की अधूरी जानकारी देने पर, पूरा कार्ड नहीं दिखता.

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


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

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

गड़बड़ी: कोई डायलॉग बॉक्स बंद हो जाता है, अटक जाता है या खुलता नहीं है

अगर कोई डायलॉग बॉक्स अचानक बंद हो जाता है, लोड नहीं होता या खुलता नहीं है, तो इसकी वजह, उसके कार्ड इंटरफ़ेस में कोई समस्या हो सकती है.

इसकी सबसे आम वजहें ये हैं:

• CardFixedFooter विजेट में primaryButton मौजूद नहीं है.
• CardFixedFooter विजेट में मौजूद किसी बटन में onClick कार्रवाई मौजूद नहीं है या उसकी onClick कार्रवाई की जानकारी गलत तरीके से दी गई है.
• एक TextInput विजेट में एक name फ़ील्ड मौजूद नहीं है.

वजह: CardFixedFooter में primaryButton मौजूद नहीं है

डायलॉग में, CardFixedFooter विजेट के साथ, टेक्स्ट और रंग, दोनों के साथ primaryButton की जानकारी देना ज़रूरी है. primaryButton की जानकारी न देने या उसकी जानकारी गलत तरीके से देने पर, पूरा डायलॉग नहीं दिखता.

इस गड़बड़ी को ठीक करने के लिए, पक्का करें कि CardFixedFooter विजेट में primaryButton की जानकारी सही तरीके से दी गई हो.

    . . .
    "fixedFooter": {

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

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

वजह: FixedFooter में onClick सेटिंग गलत है

डायलॉग में, CardFixedFooter विजेट के साथ, किसी भी बटन पर onClick सेटिंग की जानकारी गलत तरीके से देने या उसकी जानकारी न देने पर, डायलॉग बंद हो जाता है, लोड नहीं होता या खुलता नहीं है.

इस गड़बड़ी को ठीक करने के लिए, पक्का करें कि हर बटन में onClick सेटिंग की जानकारी सही तरीके से दी गई हो.

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

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

वजह: TextInput में name मौजूद नहीं है

अगर किसी डायलॉग में TextInput विजेट शामिल है और उसमें name फ़ील्ड मौजूद नहीं है, तो डायलॉग उम्मीद के मुताबिक काम नहीं करता. यह बंद हो सकता है, खुल सकता है, लेकिन लोड नहीं हो सकता या खुल ही नहीं सकता.

इस गड़बड़ी को ठीक करने के लिए, पक्का करें कि हर TextInput विजेट में सही name फ़ील्ड शामिल हो. पक्का करें कि कार्ड में मौजूद हर name फ़ील्ड यूनीक हो.

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

      }
    }
    . . .
    

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

एसिंक्रोनस ऐप्लिकेशन आर्किटेक्चर के साथ, डायलॉग खोलने, सबमिट करने या रद्द करने की कार्रवाइयां काम नहीं करती हैं

अगर डायलॉग के साथ काम करते समय, आपके Chat ऐप्लिकेशन में गड़बड़ी का मैसेज Could not load dialog. Invalid response returned by bot. दिखता है, तो इसकी वजह यह हो सकती है कि आपका ऐप्लिकेशन एसिंक्रोनस आर्किटेक्चरका इस्तेमाल करता है. जैसे, Cloud Pub/Sub या Create Message API का तरीका.

डायलॉग खोलने, सबमिट करने या रद्द करने के लिए, डायलॉग के लिए Chat ऐप्लिकेशन से सिंक्रोनस रिस्पॉन्स की ज़रूरत होती है DialogEventType. इसलिए, एसिंक्रोनस आर्किटेक्चर से बनाए गए ऐप्लिकेशन , डायलॉग के साथ काम नहीं करते.

इसके बजाय, डायलॉग के बजाय a कार्ड मैसेज का इस्तेमाल करें.

कार्ड और डायलॉग से जुड़ी अन्य गड़बड़ियां

अगर इस पेज पर बताए गए तरीके से, आपके ऐप्लिकेशन में कार्ड से जुड़ी गड़बड़ी ठीक नहीं होती है, तो ऐप्लिकेशन के गड़बड़ी वाले लॉग की क्वेरी करें. लॉग की क्वेरी करने से, कार्ड के JSON या ऐप्लिकेशन के कोड में मौजूद गड़बड़ियों को ढूंढने में मदद मिल सकती है. साथ ही, लॉग में गड़बड़ियों को ठीक करने में मदद करने के लिए, गड़बड़ी की जानकारी देने वाले मैसेज शामिल होते हैं.

मिलते-जुलते विषय

Google Chat ऐप्लिकेशन की गड़बड़ियों को ठीक करने में मदद पाने के लिए, Google Chat ऐप्लिकेशन की गड़बड़ियां ठीक करना और डीबग करना लेख पढ़ें.