Rozwiązywanie problemów z kartami i oknami oraz rozwiązywanie problemów

W tym przewodniku opisaliśmy typowe błędy związane z kartami, które mogą wystąpić, oraz sposoby ich naprawienia.

Za pomocą Kreatora kart możesz projektować i przeglądać podglądy wiadomości oraz interfejsów aplikacji czatu:

Jak wyświetlają się błędy kart

Błędy kart mogą się objawiać na kilka sposobów:

• Część karty, np. widżet lub komponent, nie wyświetla się lub renderuje w nieoczekiwanym sposób.
• Nie wyświetla się cała karta.
• Okno dialogowe się zamyka, nie otwiera lub nie wczytuje.

Jeśli zauważysz takie zachowanie, oznacza to, że na karcie Twojej aplikacji występuje błąd.

Informacje: działający, wolny od błędów komunikat i dialog karty

Zanim przyjrzysz się przykładom błędnych kart, zapoznaj się z wiadomością i dialogiem na działającej karcie. Aby zilustrować każdy przykład błędu i jego naprawę, wprowadziliśmy w pliku JSON tej karty błędy.

komunikat o karcie bez błędów,

Oto działająca, pozbawiona błędów wiadomość na karcie z informacjami kontaktowymi, która zawiera nagłówek, sekcje i widżety, takie jak tekst i przyciski:

Okno bez błędów

Oto działający, wolny od błędów dialog, który tworzy kontakt, zbierając informacje od użytkowników. Zawiera on stopkę i edytowalne widżety, takie jak pola tekstowe, przełączniki i przyciski:

Błąd: część karty nie wyświetla się

Czasami karty są renderowane, ale część karty, którą chcesz zobaczyć, nie pojawia się. Prawdopodobne przyczyny to:

• Brak wymaganego pola JSON.
• W polu JSON występują błędy ortograficzne lub nieprawidłowe użycie wielkich liter.

Przyczyna: brak wymaganego pola JSON

W tym przykładzie brakuje wymaganego pola JSON title. W efekcie karta jest renderowana, ale nie pojawiają się części, które powinny być widoczne. Gdy pominiesz wymagane pola, może być trudno przewidzieć, jak będą wyglądać karty.

Aby naprawić ten błąd, dodaj wymagane pole JSON. W tym przykładzie jest to title.

Aby dowiedzieć się, czy pole JSON jest wymagane, zapoznaj się z dokumentacją referencyjną kart v2. W tym przykładzie zapoznaj się z opisem pola title na stronie CardHeader.

Poniżej przedstawiamy dwa przykłady:

Przykład 1. Podanie wartości subtitle, ale pominięcie wymaganej wartości title powoduje, że cały nagłówek jest pusty:

    . . .
    "header": {

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

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

Przykład 2. Podanie wartości subtitle, imageUrl, imageType i imageAltText, ale pominięcie wymaganej wartości title powoduje, że obraz jest renderowany zgodnie z oczekiwaniami, ale nie ma napisów:

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

Przyczyna: nieprawidłowo zapisany lub zapisany z użyciem wielkich liter plik JSON

W tym przykładzie błędu plik JSON karty zawiera wszystkie wymagane pola, ale jedno z nich, imageUrl, ma nieprawidłowo wielkość liter (imageURL z dużymi literami R i L), co powoduje błąd: obraz, na który wskazuje, nie jest renderowany.

Aby naprawić ten błąd i inne podobne, użyj prawidłowego formatu JSON. W tym przypadku imageUrl jest prawidłowy. W razie wątpliwości sprawdź kod JSON karty w dokumentacji karty.

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

Błąd: nie wyświetla się cała karta

Czasami sama karta się nie wyświetla. Prawdopodobnymi przyczynami są:

• Widget ButtonList jest nieprawidłowo określony.
• CardFixedFooterWidget ma nieprawidłowo określony przycisk.

Przyczyna: nieprawidłowo określony parametr buttonList lub cardFixedFooter

Jeśli wiadomość na karcie lub okno dialogowe zawiera nieprawidłowo określony widget ButtonList lub widget CardFixedFooter z nieprawidłowo określonymi przyciskami, cała karta nie jest wyświetlana, a na jej miejscu nie pojawia się nic. Nieprawidłowe specyfikacje mogą zawierać brakujące pola, pola z nieprawidłową pisownią lub pola z wielkimi literami albo nieprawidłowo sformatowany plik JSON, np. z brakującym przecinkiem, cudzysłowem lub nawiasem klamrowym.

Aby naprawić ten błąd, porównaj plik JSON karty z dokumentem referencyjnym karty. W szczególności porównaj widżety ButtonList z przewodnikiem po widżetach ButtonList.

Przykład: w ButtonListprzewodniku po widżetach przekazanie niepełnego działania onClick w pierwszym przycisku uniemożliwia renderowanie całej karty.

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

Błąd: okno dialogowe zamyka się, zawiesza się lub nie otwiera

Jeśli okno zamyka się nieoczekiwanie, nie wczytuje się lub nie otwiera, prawdopodobnie przyczyną jest problem z interfejsem karty.

Oto najczęstsze przyczyny:

• Widżet CardFixedFooter nie ma elementu primaryButton.
• Przycisk w widżecie CardFixedFooter nie ma działania onClick lub działanie onClick jest nieprawidłowo określone.
• W widżecie TextInput brakuje pola name.

Przyczyna: CardFixedFooter nie ma primaryButton

W oknach z widżetem CardFixedFooter należy określić primaryButton z tekstem i kolorami. Pominięcie wartości primaryButton lub jej nieprawidłowe ustawienie uniemożliwi wyświetlenie całego okna.

Aby naprawić ten błąd, sprawdź, czy widżet CardFixedFooter zawiera poprawnie określony parametr primaryButton.

    . . .
    "fixedFooter": {

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

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

Przyczyna: nieprawidłowe ustawienie onClick w FixedFooter

W oknach dialogowych z widżetem CardFixedFooter nieprawidłowe określenie ustawienia onClick w dowolnym przycisku lub jego pominięcie powoduje zamknięcie okna dialogowego, niezaładowanie go lub brak możliwości otwarcia.

Aby naprawić ten błąd, sprawdź, czy każdy przycisk ma prawidłowo ustawione ustawienie 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"
          }
        }
      }
    }
    . . .
    

Przyczyna: TextInput nie ma name

Jeśli okno zawiera widget TextInput, który wyklucza pole name, nie działa ono prawidłowo. Może się zamknąć, otworzyć się, ale nie wczytać lub nie otworzyć wcale.

Aby naprawić ten błąd, sprawdź, czy każdy widżet TextInput zawiera odpowiednie pole name. Upewnij się, że każde pole name na karcie jest unikalne.

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

      }
    }
    . . .
    

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

W przypadku asynchronicznej architektury aplikacji nie działają działania otwierania, przesyłania ani anulowania okna

Jeśli podczas pracy z dialogami aplikacja Google Chat zwraca komunikat o błędzie Could not load dialog. Invalid response returned by bot., może to być spowodowane tym, że używa ona architektury asynchronicznej, takiej jak Cloud Pub/Sub lub metoda interfejsu API CreateMessage.

Otworzenie, przesłanie lub anulowanie dialogu wymaga synchronicznej odpowiedzi aplikacji Google Chat z DialogEventType. Dlatego dialogi nie są obsługiwane w aplikacjach opartych na architekturze asynchronicznej.

Aby obejść ten problem, zamiast dialogu użyj wiadomości na karcie.

Inne błędy kart i dialogów

Jeśli poprawki opisane na tej stronie nie rozwiążą problemu z kartą, z którym boryka się Twoja aplikacja, sprawdź dzienniki błędów aplikacji. Wysyłanie zapytań do dzienników może pomóc w znalezieniu błędów w pliku JSON karty lub kodzie aplikacji. Dzienniki zawierają opisowe komunikaty o błędach, które ułatwiają ich poprawianie.

Powiązane artykuły

Pomoc dotyczącą rozwiązywania problemów z aplikacją Google Chat znajdziesz w artykułach Rozwiązywanie problemów z aplikacją Google Chat i Debugowanie aplikacji Google Chat.