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 możesz napotkać, oraz sposoby ich naprawy.

Projektuj karty i wyświetl ich podgląd w kreatorze kart.

Otwórz kreator kart

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

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

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

Jeśli wystąpi ten błąd, oznacza to, że wystąpił błąd karty aplikacji.

W celach informacyjnych: działający, wolny od błędów komunikat i okno karty.

Przed przyjrzeniem się przykładom błędnych kart zapoznaj się najpierw z tym komunikatem i oknem działającej karty. Aby zilustrować każdy przykładowy błąd i jego rozwiązanie, plik JSON tej karty został zmodyfikowany przez wprowadzenie błędów.

Brak błędów dotyczących karty

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

Okno wolne od błędów

Oto działające, wolne od błędów okno, które tworzy kontakt dzięki zbieraniu informacji od użytkowników. Zawiera stopkę i widżety do edycji, takie jak wprowadzanie tekstu, przełączniki i przyciski:

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

Czasami karty renderują się, ale część karty, której oczekujesz, nie jest widoczna. Prawdopodobne przyczyny to:

  • Brak wymaganego pola JSON.
  • Tekst w polu JSON zawiera literówkę lub niewłaściwą wielkość liter.

Przyczyna: brak wymaganego pola JSON

W tym przykładowym błędzie brakuje wymaganego pola JSON (title). W efekcie karta jest renderowana, ale jej fragmenty, które powinny się pojawić, nie są. Gdy wymagane pola zostaną pominięte, może być trudno przewidzieć, jak będą renderowane karty.

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

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

Poniżej przedstawiamy dwa przykłady:

Przykład 1: określenie subtitle, ale pominięcie wymaganego title powoduje, że cały nagłówek wygląda na pusty:

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

Wyświetl błędny fragment kodu JSON karty

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

    . . .
    "header": {

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

Wyświetl prawidłowy fragment kodu JSON karty

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

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

Przykład 2. Jeśli określisz subtitle, imageUrl, imageType i imageAltText, a pominiesz wymagany parametr title, obraz będzie renderowany zgodnie z oczekiwaniami, ale bez podtytułu:

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

Wyświetl błędny fragment kodu JSON 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: wymagane pole, 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 nieprawidłowe użycie wielkich liter w pliku JSON

W tym przykładowym błędzie plik JSON karty zawiera wszystkie wymagane pola, ale jedno z nich imageUrl zostało nieprawidłowo napisane jako imageURL (wielka litera R wielka litera L), co powoduje błąd: obraz, który wskazuje, nie jest renderowany.

Aby naprawić ten i inne błędy, użyj prawidłowego formatowania JSON. W tym przypadku prawidłowa wartość to imageUrl. W razie wątpliwości sprawdź plik JSON karty z dokumentem referencyjnym card.

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

Wyświetl błędny fragment kodu JSON karty

Błąd: w polu imageURL została napisana nieprawidłowa wielkość liter. Powinna to 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

Stała: 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 pojawia się cała karta

Czasami karta nie wyświetla się. Prawdopodobne przyczyny to:

Przyczyna: nieprawidłowo określone pole buttonList lub cardFixedFooter

Jeśli komunikat na karcie lub okno zawiera nieprawidłowo określony widżet ButtonList lub CardFixedFooter z nieprawidłowo określonymi przyciskami, karta nie będzie się wyświetlać w całości i nic nie pojawi się w jej miejscu. Nieprawidłowe specyfikacje mogą obejmować brakujące pola, pola zawierające niewłaściwą pisownię lub wielkość liter albo nieprawidłową strukturę pliku JSON, na przykład brakującego przecinka, cudzysłowu czy nawiasu klamrowego.

Aby naprawić ten błąd, sprawdź plik JSON karty z dokumentem referencyjnym karty. 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łnej czynności onClick w pierwszym przycisku uniemożliwia renderowanie całej karty.

Wyświetl błędny fragment kodu JSON karty

Błąd: obiekt onClick nie ma określonych pól, więc karta nie jest wyświetlana w całości.

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


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

Wyświetl prawidłowy fragment kodu JSON karty

Poprawiono: obiekt onClick zawiera 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 się zamyka, zacina się lub nie otwiera się

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

Oto najczęstsze przyczyny:

Przyczyna: CardFixedFooter nie zawiera elementu primaryButton

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

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

Wyświetl błędny fragment kodu JSON karty

Błąd: w obiekcie fixedFooter nie określono pola primaryButton, przez co nie można wczytać lub otworzyć okna dialogowego.

    . . .
    "fixedFooter": {

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

Wyświetl prawidłowy fragment kodu JSON karty

Poprawiono: 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 dialogowych z widżetem CardFixedFooter nieprawidłowo określ ustawienie onClick dla dowolnego przycisku lub zostanie ono pominięte, co spowoduje zamknięcie, problemy z wczytaniem lub nieotwarcie okna.

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

Wyświetl błędny fragment kodu JSON karty

Błąd: obiekt primaryButton zawiera pole onClick z błędną tablicą „parameters”, przez co nie można wczytać lub otworzyć okna dialogowego.

    . . .
    "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 zapisaną 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 zawiera elementu name

Jeśli okno zawiera widżet TextInput, który wyklucza pole name, okno nie działa zgodnie z oczekiwaniami. Przeglądarka może się zamknąć, otworzyć, ale nie uda się wczytać lub się nie otworzyć.

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.

Wyświetl błędny fragment kodu JSON karty

Błąd: w obiekcie textInput nie określono pola name, co powoduje zamknięcie okna, wczytanie go lub nieudane otwarcie.

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

      }
    }
    . . .

Wyświetl prawidłowy fragment kodu JSON karty

Poprawiono: 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 otwarcia, przesyłania lub anulowania okna kończą się niepowodzeniem w przypadku asynchronicznej architektury aplikacji

Jeśli podczas pracy z oknami dialogowymi aplikacja do obsługi czatu zwraca komunikat o błędzie Could not load dialog. Invalid response returned by bot., może to być spowodowane korzystaniem przez nią z asynchronicznej architektury, takiej jak Cloud Pub/Sub lub metoda interfejsu API Create Message.

Otwarcie, przesłanie lub anulowanie okna wymaga odpowiedzi synchronicznej z aplikacji Google Chat za pomocą DialogEventType. W związku z tym okna nie są obsługiwane w aplikacjach z asynchroniczną architekturą.

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

Inne błędy dotyczące karty i okna

Jeśli poprawki opisane na tej stronie nie rozwiązują problemu związanego z kartą w aplikacji, wyślij zapytanie do dzienników błędów aplikacji. Wykonywanie zapytań dotyczących logów pomaga znaleźć błędy w kodzie aplikacji lub pliku JSON karty. Logi zawierają opisowe komunikaty o błędach, które pomogą Ci w ich naprawieniu.

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