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 aplikacjach 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 aplikacji wystąpił błąd.

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

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 sposób jego naprawienia, wprowadziliśmy w pliku JSON tej karty błędy.

komunikat o karcie bez błędów,

Oto działająca, pozbawiona błędów karta 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ę jej części, które powinny być widoczne. Trudno przewidzieć, jak będą renderowane karty, jeśli pominie się wymagane pola.

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

Wyświetlanie fragmentu kodu JSON nieprawidłowej karty

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

    . . .
    "header": {

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

Wyświetlanie prawidłowego fragmentu kodu JSON karty

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.

Wyświetlanie fragmentu kodu JSON nieprawidłowej karty

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

Wyświetlanie prawidłowego fragmentu kodu JSON karty

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 nieprawidłową wielkością 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żych liter, R z dużych liter i L z dużych liter), 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.

Wyświetlanie fragmentu kodu JSON nieprawidłowej karty

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

Wyświetlanie prawidłowego fragmentu kodu JSON karty

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 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 o nieprawidłowej pisowni lub 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 wyrenderowanie całej karty.

Wyświetlanie fragmentu kodu JSON nieprawidłowej 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",
                  }
                ],
              }
            }
          },
        ],
      },
    }
    . . .

Wyświetl poprawny fragment kodu karty w formacie JSON

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 skonfigurowany element primaryButton.

Wyświetlanie fragmentu kodu JSON nieprawidłowej karty

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

    . . .
    "fixedFooter": {

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

Wyświetl poprawny fragment kodu karty w formacie JSON

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.

Wyświetlanie fragmentu kodu JSON nieprawidłowej karty

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

Wyświetlanie prawidłowego fragmentu kodu JSON karty

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 widżet TextInput, który wyklucza pole name, nie działa ono prawidłowo. Może się zamknąć, otworzyć, ale nie wczytać się lub 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świetlanie fragmentu kodu JSON nieprawidłowej karty

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

      }
    }
    . . .

Wyświetl poprawny fragment kodu karty w formacie JSON

Rozwiązanie: w komponencie textInput 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 asynchronicznej aplikacji 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ążą błędu związanego z kartą, który występuje w aplikacji, 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.