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

Z tego przewodnika dowiesz się, jakie typowe błędy związane z kartami mogą wystąpić i jak je naprawić.

Użyj narzędzia do tworzenia kart, aby projektować i wyświetlać podgląd wiadomości oraz interfejsów użytkownika w aplikacjach do obsługi czatu:

Otwórz narzędzie do tworzenia kart

Jak wyświetlane są 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 nieoczekiwany sposób.
  • Cała karta się nie wyświetla.
  • Okno dialogowe zamyka się, nie otwiera lub nie wczytuje.

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

Dla porównania: działający, bezbłędny komunikat na karcie i okno

Zanim przeanalizujesz przykłady błędnych kart, najpierw zapoznaj się z tym działającym komunikatem i oknem karty. Aby zilustrować każdy przykładowy błąd i sposób jego naprawienia, zmodyfikowaliśmy kod JSON tej karty, wprowadzając błędy.

Komunikat o karcie bez błędów

Oto działająca, bezbłędna wiadomość na karcie zawierająca informacje kontaktowe, która ma nagłówek, sekcje i widżety, takie jak ozdobny tekst i przyciski:

Dialog bez błędów

Oto działające, bezbłędne okno dialogowe, które tworzy kontakt, zbierając informacje od użytkowników, z stopką oraz edytowalnymi widżetami, takimi jak pole wpisywania tekstu, przełączniki i przyciski:

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

Czasami karty są renderowane, ale część karty, która powinna być widoczna, nie pojawia się. Przyczyny mogą być następujące:

  • Brak wymaganego pola JSON.
  • W polu JSON występuje błąd ortograficzny lub nieprawidłowe użycie wielkich liter.

Przyczyna: brak wymaganego pola JSON

W tym przykładzie błędu brakuje wymaganego pola JSON, title. W rezultacie karta jest renderowana, ale nie wyświetlają się jej oczekiwane części. Trudno jest przewidzieć, jak karty będą renderowane, gdy pominięte zostaną wymagane pola.

Aby usunąć 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ą dotyczącą 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. Określenie subtitle, ale pominięcie wymaganego title powoduje, że cały nagłówek jest pusty:

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

Wyświetlanie fragmentu kodu JSON karty z błędami

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

    . . .
    "header": {

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

Wyświetl prawidłowy fragment kodu JSON karty

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

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

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

Nagłówek tej karty nie jest wyświetlany, ponieważ brakuje wymaganego pola tytułu.
Ilustracja 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 karty z błędami

Błąd: w dokumencie 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

Naprawiono: 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 wielkie litery w pliku JSON

W tym przykładzie błędu plik JSON karty zawiera wszystkie wymagane pola, ale jedno z nich, imageUrl, jest nieprawidłowo zapisane wielkimi literami jako imageURL (wielka litera R wielka litera L), co powoduje błąd: obraz, do którego odwołuje się to pole, nie jest renderowany.

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

Nagłówek tej karty nie jest wyświetlany, ponieważ brakuje wymaganego pola tytułu.
Ilustracja 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 karty z błędami

Błąd: pole imageURL zawiera nieprawidłowe wielkie litery. Powinien mieć wartość 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

Naprawiono: pole imageUrl jest zapisane z właściwą wielkością liter.

    . . .
    "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: cała karta się nie wyświetla

Czasami karta może się nie pojawiać. Prawdopodobne przyczyny to:

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

Jeśli komunikat na karcie lub okno dialogowe zawiera nieprawidłowo określony widżet ButtonList lub widżet CardFixedFooter z nieprawidłowo określonymi przyciskami, cała karta nie jest wyświetlana i nic nie pojawia się na jej miejscu. Nieprawidłowe specyfikacje mogą obejmować brakujące pola, pola z błędną pisownią lub wielkością liter albo nieprawidłowo sformatowany plik JSON, np. brakujący przecinek, cudzysłów lub nawias klamrowy.

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

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

Wyświetlanie błędnego fragmentu kodu JSON karty

Błąd: w obiekcie onClick nie określono żadnych 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 prawidłowy fragment kodu JSON karty

Naprawiono: obiekt onClick ma teraz pole openLink, dzięki czemu 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 zamyka się, zawiesza lub nie otwiera

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

Oto najczęstsze przyczyny:

Przyczyna: CardFixedFooter nie ma primaryButton

W oknach z CardFixedFooter widżetem musisz określić primaryButton z tekstem i kolorem. Pominięcie wartości primaryButton lub jej 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 element primaryButton.

Wyświetlanie błędnego fragmentu kodu JSON karty

Błąd: w obiekcie fixedFooter nie określono pola primaryButton, co powoduje, że okno dialogowe nie może się wczytać ani otworzyć.

    . . .
    "fixedFooter": {

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

 Wyświetl prawidłowy fragment kodu JSON karty

Naprawiono: w fixedFooter określono teraz 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 CardFixedFooter widżetem nieprawidłowe określenie ustawienia onClick na dowolnym przycisku lub jego pominięcie powoduje zamknięcie okna dialogowego, brak możliwości jego wczytania lub otwarcia.

Aby naprawić ten błąd, upewnij się, że każdy przycisk zawiera prawidłowo określone ustawienie onClick.

Wyświetlanie błędnego fragmentu kodu JSON karty

Błąd: obiekt primaryButton zawiera pole onClick z błędnie napisaną tablicą „parameters”, co powoduje, że okno nie wczytuje się lub nie otwiera.

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

Naprawiono: obiekt primaryButton ma pole onClick z poprawnie napisaną tablicą „parameters”, dzięki czemu 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 name

Jeśli okno zawiera TextInputwidżet, który wyklucza pole name, okno nie działa zgodnie z oczekiwaniami. Może się zamknąć, otworzyć, ale nie wczytać lub w ogóle się nie otworzyć.

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świetlanie błędnego fragmentu kodu JSON karty

Błąd: w obiekcie textInput nie określono pola name, co powoduje zamknięcie okna, brak możliwości jego wczytania lub otwarcia.

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

      }
    }
    . . .

 Wyświetl prawidłowy fragment kodu JSON karty

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

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

Działania otwierania, przesyłania i anulowania okien dialogowych nie działają w przypadku asynchronicznej architektury aplikacji

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

Otwarcie, przesłanie lub anulowanie okna dialogowego wymaga synchronicznej odpowiedzi z aplikacji Google Chat z DialogEventType. Dlatego okna nie są obsługiwane przez aplikacje zbudowane z użyciem architektury asynchronicznej.

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

Inne błędy dotyczące kart i okien dialogowych

Jeśli opisane na tej stronie rozwiązania nie pomogą Ci usunąć błędu związanego z kartą, który występuje w Twojej aplikacji, sprawdź dzienniki błędów aplikacji. Wysyłanie zapytań do dzienników może pomóc w znalezieniu błędów w kodzie JSON karty lub w kodzie aplikacji. Dzienniki zawierają opisowe komunikaty o błędach, które ułatwiają ich naprawienie.

Pomoc dotyczącą naprawiania błędów aplikacji Google Chat znajdziesz w artykułach Rozwiązywanie problemów z aplikacją Google Chat i jej naprawianie i Debugowanie aplikacji Google Chat.