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 rozwiązać.

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:

Jak wyświetlane są błędy dotyczące kart

Błędy karty 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.

Przykładowa prawidłowa wiadomość na karcie i okno dialogowe

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 jego rozwiązanie, zmodyfikowaliśmy kod JSON tej karty, wprowadzając błędy.

komunikat na karcie bez błędów.

Oto działający, bezbłędny komunikat karty zawierający szczegółowe informacje kontaktowe, w którym znajdują się nagłówek, sekcje i widżety, takie jak tekst dekoracyjny i przyciski:

Dialog bez błędów

Oto działające, bezbłędne okno, które tworzy kontakt, zbierając informacje od użytkowników. Zawiera stopkę oraz edytowalne widżety, takie jak pole wprowadzania 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:

• Brakuje wymaganego pola JSON.
• Pole JSON jest błędnie napisane lub ma nieprawidłową wielkość 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 elementy, które powinny być widoczne. 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:

    . . .
    "header": {

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

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

    . . .
    "header": {

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

    . . .
    "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 wielkość liter w pliku JSON

W tym przykładzie błędu kod 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 odpowiedź to imageUrl. W razie wątpliwości porównaj plik JSON karty z dokumentem referencyjnym karty.

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

    . . .
    "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 w ogóle się nie wyświetla. Prawdopodobne przyczyny to:

• ButtonListWidżet jest nieprawidłowo określony.
• CardFixedFooterWidżet ma nieprawidłowo określony przycisk.

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

Jeśli komunikat lub okno karty zawiera nieprawidłowo określony ButtonListwidżet lub CardFixedFooterwidżet 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 kod JSON, np. brakujący przecinek, cudzysłów lub nawias klamrowy.

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

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

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


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

    . . .
    {
      "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, przyczyną jest prawdopodobnie problem z interfejsem karty.

Oto najczęstsze przyczyny:

• CardFixedFooterWidżet nie ma primaryButton.
• Przycisk w CardFixedFooter widżecie nie ma działania onClick lub jego działanie onClick jest nieprawidłowo określone.
• W TextInputwidżecie brakuje pola name.

Przyczyna: CardFixedFooter nie ma primaryButton

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

Aby naprawić ten błąd, sprawdź, czy widżet CardFixedFooter zawiera prawidłowo określony element primaryButton.

    . . .
    "fixedFooter": {

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

    . . .
    "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, niepowodzenie wczytywania lub brak możliwości otwarcia.

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

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

    . . .
    "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 TextInput widżet, który wyklucza pole name, okno nie działa zgodnie z oczekiwaniami. Może się zamknąć, otworzyć, ale nie wczytać lub 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.

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

      }
    }
    . . .
    

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

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

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 do obsługi czatu z obiektem RenderActions (np. action.navigations z pushCard lub endNavigation). W związku z tym okna dialogowe nie są obsługiwane przez aplikacje zbudowane z asynchroniczną architekturą.

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

Inne błędy dotyczące kart i okien

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.

Powiązane artykuły

Pomoc dotyczącą rozwiązywania problemów z aplikacjami Google Chat znajdziesz w artykułach Rozwiązywanie problemów z aplikacjami Google Chat i Debugowanie aplikacji Google Chat.