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

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

Korzystając z Kreatora kart, możesz projektować i przeglądać interfejsy użytkownika oraz wiadomości w aplikacji Google Chat:

Otwórz kreatora kart

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 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 jest widoczna

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 wyświetlają 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 title.

Aby dowiedzieć się, czy pole JSON jest wymagane, zapoznaj się z dokumentacją referencyjną kart v2. W tym przykładzie odsyłamy do opisu 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:

Nagłówek tej karty nie jest wyświetlany, ponieważ brakuje wymaganego pola, czyli tytułu.
Ilustracja 1. Nagłówek tej karty nie jest wyświetlany, ponieważ brakuje wymaganego pola title.

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

    . . .
    "header": {

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

Rozwiązanie: wymagane pole title jest częścią specyfikacji header.

    . . .
    "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 ścieżki audio:

Nagłówek tej karty nie jest wyświetlany, ponieważ brakuje wymaganego pola, czyli tytułu.
Rysunek 2.: nagłówek tej karty nie wyświetla podtytułu, ponieważ brakuje wymaganego pola title, ale obraz jest renderowany zgodnie z oczekiwaniami.

Błąd: w dokumentach 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",
          }
    . . .

Rozwiązanie: 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ł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żej litery, R z dużej litery i L z dużej litery), 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.

Nagłówek tej karty nie jest wyświetlany, ponieważ brakuje wymaganego pola, czyli tytułu.
Rysunek 3. Nagłówek tej karty nie wyświetla podtytułu, ponieważ brakuje wymaganego pola title, ale obraz jest renderowany zgodnie z oczekiwaniami.

Błąd: pole imageURL zawiera nieprawidłowe wielkość liter. Powinien wynosić imageUrl.

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

Rozwiązanie: 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 sama karta się nie wyświetla. Prawdopodobnymi przyczynami są:

Przyczyna: nieprawidłowo określony atrybut 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 poradnikiem dotyczącym widżetów ButtonList.

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

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

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


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

Rozwiązanie: obiekt onClick ma teraz pole openLink, więc karta wyświetla się 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 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.

Błąd: obiekt fixedFooter nie ma określonego pola primaryButton, przez co nie można załadować ani otworzyć okna.

    . . .
    "fixedFooter": {

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

Rozwiązanie: w komponentach fixedFooter i primaryButton zostało teraz określone pole primaryButton, dzięki czemu dialog 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łowe określenie ustawienia onClick w dowolnym przycisku lub jego pominięcie powoduje zamknięcie okna, 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.

Błąd: obiekt primaryButton zawiera pole onClick z nieprawidłowo zapisaną tablicą „parameters”, co powoduje, że nie można otworzyć ani załadować 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"
          }
        }
      }
    }
    . . .

Rozwiązanie: obiekt primaryButton ma pole onClick z prawidłowo zapisanym tablicą „parameters”, więc okno dialogowe 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 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.

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

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

      }
    }
    . . .

Rozwiązanie: w komponentach textInput i name zostało teraz określone pole name, dzięki czemu dialog działa zgodnie z oczekiwaniami.

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

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

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, wyświetl 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.

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.