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

W tym przewodniku opisujemy typowe błędy związane z kartami, które mogą wystąpić, oraz sposoby ich rozwiązywania.

Za pomocą kreatora kart możesz zaprojektować i wyświetlić podgląd wiadomości kart JSON przeznaczonych do aplikacji Google Chat:

Otwórz kreator kart

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

Błędy karty są rejestrowane na kilka sposobów:

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

Jeśli zauważysz takie zachowanie, oznacza to, że wystąpił błąd karty aplikacji.

Dla porównania: działający, wolny od błędów komunikat i okno

Zanim przyjrzysz się przykładom błędnych kart, zwróć uwagę na komunikat i okno karty roboczej. Aby zilustrować każdy przykładowy błąd i jego poprawkę, plik JSON tej karty jest modyfikowany przez wprowadzenie błędów.

komunikat karty bez błędów.

Oto działający, pozbawiony błędów komunikat z kartą z informacjami kontaktowymi, zawiera nagłówek, sekcje i widżety, np. ozdobiony tekst i przyciski.

Okno bez błędów

Oto działające, pozbawione błędów okno, które tworzy kontakt przez informacje od użytkowników (ze stopką) i edytowalne widżety, np. do wprowadzania tekstu i przełączniki, i przyciski:

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

Czasami karty są renderowane, ale część, która powinna być widoczna, nie jest wyświetlana. prawdopodobne przyczyny to:

  • Brak wymaganego pola JSON.
  • W polu JSON zapisano literówkę lub wielkość liter.

Przyczyna: brak wymaganego pola JSON

W tym przykładowym błędzie brakuje wymaganego pola JSON title. W efekcie karta jest renderowana, ale te części karty, które powinny się wyświetlić, nie. Jeśli pominiesz wymagane pola, trudno przewidzieć, jak będą renderowane karty.

Aby naprawić ten błąd, dodaj wymagane pole JSON. w tym przykładzie: title.

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

Poniżej przedstawiamy dwa przykłady:

Przykład 1. Podanie atrybutu subtitle, ale pominięcie wymaganego elementu title spowoduje, że cały nagłówek będzie wyglądał pusty:

Nagłówek tej karty się nie wyświetla, ponieważ brakuje wymaganego pola, tytułu.
Rysunek 1. Nagłówek tej karty się nie wyświetla, ponieważ brakuje wymaganego pola title.

Wyświetl fragment kodu JSON z błędnym traktowaniem karty

Błąd: w polu header brakuje wymaganego pola title.

    . . .
    "header": {

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

Wyświetl prawidłowy fragment kodu JSON karty

Poprawiono: pole wymagane (title) jest częścią specyfikacji header.

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

Przykład 2: określenie właściwości subtitle, imageUrl, imageType i imageAltText, ale pominięcie wymaganej wartości title spowoduje, że obraz zostanie wyrenderowany zgodnie z oczekiwaniami, ale nie będzie wyświetlany podtytuł:

Nagłówek tej karty się nie wyświetla, ponieważ brakuje wymaganego pola, tytułu.
Rysunek 2. W nagłówku tej karty nie ma napisu, ponieważ brakuje wymaganego pola title, ale obraz jest renderowany zgodnie z oczekiwaniami.

Wyświetl fragment kodu JSON z błędnym traktowaniem karty

Błąd: w polu header brakuje wymaganego pola title.

    . . .
    "header": {

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

Wyświetl prawidłowy fragment kodu JSON karty

Poprawiono: pole wymagane (title) jest częścią specyfikacji header.

    . . .
    "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łowa pisownia lub użycie wielkich liter w pliku JSON

W tym przykładzie błąd JSON karty zawiera wszystkie wymagane pola, ale w jednym z pól imageUrl nie jest poprawnie wyrenderowana litera imageURL (wielkie litery Rwielkości L), co powoduje błąd: obraz, do którego kieruje, nie jest renderowany.

Aby naprawić ten i inne podobne błędy, użyj prawidłowego formatowania JSON. W tym przypadku wartość imageUrl jest poprawna. W razie wątpliwości porównaj kod JSON karty z dokumentem referencyjnym card.

Nagłówek tej karty się nie wyświetla, ponieważ brakuje wymaganego pola, tytułu.
Rysunek 3. W nagłówku tej karty nie ma napisu, ponieważ brakuje wymaganego pola title, ale obraz jest renderowany zgodnie z oczekiwaniami.

Wyświetl fragment kodu JSON z błędnym traktowaniem karty

Błąd: wielkość liter w polu imageURL jest nieprawidłowa. Powinna być imageUrl.

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

Wyświetl prawidłowy fragment kodu JSON karty

Poprawiono: wielkość liter w polu imageUrl jest prawidłowa.

    . . .
    "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 karta się nie wyświetla. prawdopodobne przyczyny to:

Przyczyna: nieprawidłowo określono atrybut buttonList lub cardFixedFooter

Jeśli komunikat lub okno na karcie zawiera nieprawidłowo określony widżet ButtonList lub widżet CardFixedFooter z nieprawidłowo określonymi przyciskami, karta się nie wyświetli, a zamiast niej nic nie pojawi. Nieprawidłowe specyfikacje mogą obejmować brakujące pola, pola z niewłaściwą pisownią lub wielkimi literami albo niewłaściwą strukturę kodu JSON – np. brak przecinka, cudzysłowu lub nawiasów klamrowych.

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

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

Wyświetl błędny fragment kodu JSON karty

Błąd: obiekt onClick nie ma określonych pól, więc karta się nie pojawi.

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


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

Wyświetl prawidłowy fragment kodu JSON karty

Rozwiązany problem: obiekt onClick ma teraz pole openLink, więc karta jest wyświetlana zgodnie z oczekiwaniami.

    . . .
    {
      "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 zamyka się, zacina lub nie otwiera się

Jeśli okno dialogowe nieoczekiwanie się zamyka, nie ładuje się lub nie otwiera, najprawdopodobniej jest to problem z interfejsem karty.

Oto najczęstsze przyczyny:

Przyczyna: CardFixedFooter nie ma wartości primaryButton

W oknach z widżetem CardFixedFooter wymagane jest określenie primaryButton zarówno z tekstem, jak i kolorem. Pominięcie elementu primaryButton lub jego nieprawidłowe ustawienie uniemożliwia wyświetlenie całego okna.

Aby naprawić ten błąd, upewnij się, że widżet CardFixedFooter zawiera prawidłowo określony primaryButton.

Wyświetl błędny fragment kodu JSON karty

Błąd: obiekt fixedFooter nie ma określonego pola primaryButton, przez co okno nie może się załadować lub otworzyć.

    . . .
    "fixedFooter": {

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

Wyświetl prawidłowy fragment kodu JSON karty

Naprawiono: okno fixedFooter ma teraz określone pole primaryButton, więc okno działa zgodnie z oczekiwaniami.

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

Przyczyna: nieprawidłowe ustawienie onClick w FixedFooter

w oknach z widżetem CardFixedFooter z nieprawidłowym określeniem ustawienia onClick dla dowolnego przycisku lub pominięciem go, przez co okno może się zamknąć, załadować lub nie otworzyć.

Aby naprawić ten błąd, sprawdź, czy każdy przycisk zawiera poprawnie określone ustawienie onClick.

Wyświetl błędny fragment kodu JSON karty

Błąd: obiekt primaryButton zawiera pole onClick z błędną tablicą „parameters” (parametry), co powoduje, że nie można załadować lub otworzyć okna.

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

Wyświetl prawidłowy fragment kodu JSON karty

Poprawiono: obiekt primaryButton ma pole onClick z prawidłowo napisaną tablicą „parameters”, więc okno działa zgodnie z oczekiwaniami.

    . . .
    "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 wartości name

Jeśli okno zawiera widżet TextInput, który wyklucza pole name, nie działa ono zgodnie z oczekiwaniami. Oprogramowanie może się zamknąć lub otworzyć, ale nie można go załadować lub się nie otwiera.

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

Wyświetl błędny fragment kodu JSON karty

Błąd: obiekt textInput nie ma określonego pola name, przez co okno się zamyka, nie wczytuje się lub nie otwiera.

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

      }
    }
    . . .

Wyświetl prawidłowy fragment kodu JSON karty

Naprawiono: okno textInput ma teraz określone pole name, więc okno działa zgodnie z oczekiwaniami.

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

Działania związane z otwarciem, przesłaniem i anulowaniem okna kończą się niepowodzeniem w przypadku asynchronicznej architektury aplikacji

Jeśli aplikacja Google Chat zwraca komunikat o błędzie Could not load dialog. Invalid response returned by bot. podczas pracy z: okna dialogowe, może to być spowodowane tym, że Twoja aplikacja korzysta z architektury asynchronicznej, takiej jak Cloud Pub/Sub lub Utwórz metodę interfejsu API wiadomości.

Otwarcie, przesłanie lub anulowanie okna wymaga odpowiedź synchroniczną z aplikacji Google Chat z parametrem DialogEventType. Aplikacje nie obsługują okien dialogowych oparte na architekturze asynchronicznej.

Aby obejść ten problem, użyj komunikat na karcie zamiast okna.

Inne błędy kart i błędów okien

Jeśli poprawki opisane na tej stronie nie rozwiązują problemu z kartami w aplikacji, wyślij zapytanie w dzienniki błędów aplikacji. Wysyłanie zapytań dotyczących logów może ułatwić znajdowanie błędów w formacie JSON karty lub kodzie aplikacji. Dzienniki zawierają opisowe komunikaty o błędach, które ułatwiają ich naprawienie.

Jeśli potrzebujesz pomocy w naprawianiu błędów w aplikacji Google Chat, zapoznaj się z artykułami Rozwiązywanie problemów z aplikacją Google Chat i rozwiązywanie problemów z nią oraz Debugowanie aplikacji Google Chat.