Tworzenie kart do aplikacji Google Chat

Na tej stronie opisano, jak tworzyć komponenty i strukturę karty. Karty to interfejsy, których aplikacje Google Chat mogą używać do prezentowania i zbierania informacji od użytkowników Google Chat. Aplikacje do Google Chat mogą tworzyć i wyświetlać karty w tych interfejsach:

  • Wiadomości zawierające co najmniej 1 kartę.
  • Strony główne, czyli karty wyświetlane na karcie Strona główna w czatach z aplikacją Google Chat.
  • okna, czyli karty, które otwierają się w nowym oknie z wiadomości i stron głównych;

Na tej stronie dowiesz się więcej o tych komponentach karty:

  • Nagłówki, które zwykle zawierają tytuł karty lub sekcji karty.
  • Sekcje, które tworzą główną treść karty, w tym widżety i inne elementy interaktywne. W sekcji karty możesz dodać do karty więcej elementów strukturalnych, takich jak kolumny i siatki.
  • Stałe stopki, które pojawiają się u dołu okien, aby wyświetlać stałe elementy interfejsu, takie jak przyciski.

Wymagania wstępne

Aplikacja Google Chat skonfigurowana do odbierania interakcji użytkowników i odpowiadania na nie. Aby utworzyć interaktywną aplikację do Google Chat, wykonaj czynności opisane w jednym z tych krótkich przewodników, w zależności od architektury aplikacji, której chcesz użyć:

Za pomocą Kreatora kart możesz projektować i wyświetlać podgląd wiadomości oraz interfejsów aplikacji do Google Chat:

Otwieranie Kreatora kart

Dodaj nagłówek

Widżet CardHeader reprezentuje nagłówek karty. Nagłówki mogą zawierać tytuł, podtytuł i obraz awatara karty.

Oto przykład CardHeader:

Dodawanie co najmniej 1 sekcji karty

Widżet CardSection to kontener wysokiego poziomu na karcie. Sekcje karty służą do grupowania widżetów na karcie. Każda sekcja karty może zawierać nagłówek i co najmniej 1 widżet.

Poniżej znajdziesz przykład elementu CardSection, który zawiera 2 widżety textParagraph:

Dodawanie poziomego separatora między widżetami

Widżet divider wyświetla poziomą linię na szerokość karty między widżetami ułożonymi pionowo. Linia jest wizualnym separatorem, który pomaga użytkownikom odróżnić jeden widżet od drugiego, co ułatwia skanowanie i zrozumienie kart.

Poniżej znajduje się karta zawierająca widżet divider między innymi typami widżetów:

Dodaj kolumny

Widżet columns wyświetla na karcie maksymalnie 2 kolumny. Do każdej kolumny możesz dodać widżety. Będą się one wyświetlać w określonej kolejności. Aby uwzględnić więcej niż 2 kolumny lub użyć wierszy, użyj widżetu grid.

Wysokość każdej kolumny jest określana przez wyższą kolumnę. Jeśli na przykład pierwsza kolumna jest wyższa niż druga, obie kolumny będą miały wysokość pierwszej kolumny. Każda kolumna może zawierać inną liczbę widżetów, więc nie można definiować wierszy ani wyrównywać widżetów między kolumnami.

Poniższy przykład pokazuje kartę z widżetem columns, który zawiera 2 kolumny tekstu. Aby wyświetlić tylko układ kolumn i zwinąć przykładowy kod, kliknij  Zwiń. Gdy ilość miejsca jest ograniczona, jak w poniższym przykładzie, druga kolumna jest zawijana pod pierwszą.

Określanie szerokości kolumny

Kolumny są wyświetlane obok siebie. Szerokość każdej kolumny możesz dostosować za pomocą pola horizontalSizeStyle. Jeśli ekran użytkownika jest zbyt wąski, druga kolumna zawija się pod pierwszą:

  • W przeglądarce druga kolumna jest zawijana, jeśli szerokość ekranu jest mniejsza lub równa 480 pikseli.
  • Na urządzeniach z iOS druga kolumna jest zawijana, jeśli szerokość ekranu jest mniejsza lub równa 300 pt.
  • Na urządzeniach z Androidem druga kolumna jest zawijana, jeśli szerokość ekranu jest mniejsza lub równa 320 dp.

Poniższy przykład pokazuje kartę z widżetem columns, który zawiera 2 kolumny tekstu z 4 elementami. Do każdego elementu w kolumnach zastosowano właściwość horizontalSizeStyle, aby określić, ile miejsca w każdej kolumnie zajmuje tekst:

  • Pierwszy akapit tekstu używa FILL_MINIMUM_SPACE, aby wypełnić nie więcej niż 30% szerokości karty.
  • Drugi akapit tekstu używa FILL_AVAILABLE_SPACE, aby wypełnić dostępne miejsce na szerokość karty. W tym przykładzie wypełnia on 70% szerokości karty.
  • Trzeci akapit tekstu nie definiuje parametru horizontalSizeStyle, więc domyślnie wypełnia dostępne miejsce na karcie.
  • Czwarty akapit tekstu używa FILL_MINIMUM_SPACE, aby wypełnić nie więcej niż 30% szerokości karty.

Określ wyrównanie kolumny w poziomie

Widżety możesz wyrównywać w poziomie do lewej, do prawej lub do środka kolumny, definiując pole horizontalAlignment. Jeśli pole horizontalAlignment nie jest zdefiniowane, widżety są wyrównane do lewej w kolumnie.

W tym przykładzie tekst w kolumnie jest wyrównany do lewej:

Ten przykład pokazuje, jak wyśrodkować tekst w kolumnie w poziomie:

W tym przykładzie tekst w kolumnie jest wyrównany do prawej:

Określ wyrównanie kolumny w pionie

Możesz wyrównać widżety w pionie do góry, do dołu lub do środka kolumny, definiując pole verticalAlignment. Jeśli pole verticalAlignment jest niezdefiniowane, widżety w kolumnie są wyrównane do góry.

W tym przykładzie tekst w kolumnie jest wyrównany do góry:

Ten przykład pokazuje, jak wyśrodkować tekst w kolumnie w pionie:

W tym przykładzie tekst w kolumnie jest wyrównany do dołu:

Dodawanie siatki do wyświetlania kolekcji elementów

Widżet grid wyświetla siatkę z kolekcją elementów. Siatka obsługuje dowolną liczbę kolumn i elementów. Liczba wierszy jest określana przez liczbę elementów podzieloną przez liczbę kolumn. Siatka z 10 elementami i 2 kolumnami ma 5 wierszy. Siatka z 11 elementami i 2 kolumnami ma 6 wierszy.

Widżet obsługuje sugestie, które pomagają użytkownikom wprowadzać jednolite dane, oraz działania po zmianie, czyli Actions, które są uruchamiane, gdy w polu do wprowadzania danych tekstowych nastąpi zmiana, np. gdy użytkownik doda lub usunie tekst.

Poniższy przykład przedstawia siatkę z 2 kolumnami i 1 elementem:

Aby określić, gdzie w siatce ma się pojawiać tekst z obrazem, możesz użyć pola gridItemLayout. To pole pozwala określić, czy tekst ma się wyświetlać nad elementem w siatce czy pod nim. Jeśli parametr gridItemLayout jest niezdefiniowany, tekst domyślnie pojawia się pod elementem w siatce.

Poniższy przykład to siatka z 3 kolumnami, w której każda komórka zawiera tekst i obraz. Pierwsza siatka definiuje tekst, który ma się pojawiać nad obrazem, druga – tekst, który ma się pojawiać pod obrazem, a trzecia nie definiuje pozycji tekstu.

Dodawanie obramowania do siatki lub kolumny

W przypadku elementów, które pojawiają się w widżecie column lub grid, możesz dodać obramowanie do tych elementów interfejsu, definiując pole borderType i pole borderStyle. Jeśli nie zdefiniowano pola borderStyle, domyślnie nie jest wyświetlane obramowanie. Możesz zdefiniować borderType, który będzie stosowany do wszystkich elementów w widżecie, lub zastosować styl do każdego elementu w widżecie osobno.

Poniższy przykład przedstawia siatkę z 2 kolumnami i obrazem w każdej z nich, w której typ, styl i kolor obramowania zostały zdefiniowane tak, aby miały zastosowanie do wszystkich elementów w siatce.

Poniższy przykład to siatka z 3 kolumnami, w której każda komórka zawiera obraz, a styl i typ obramowania są zdefiniowane osobno. Pierwszy obraz ma obramowanie zdefiniowane jako STROKE. Drugi obraz ma obramowanie zdefiniowane jako NO_BORDER. Trzeci obraz nie ma zdefiniowanej krawędzi.

Dodawanie karuzeli

Widżet Carousel wyświetla kolekcję obiektów CarouselCard, które można przewijać na ekranie. Do każdego CarouselCard możesz dodać wiele widżetów.

Widżet CardFixedFooter reprezentuje stopkę wiadomości w oknie wysłanej przez aplikację Google Chat. Stopki mogą zawierać przycisk główny i przycisk dodatkowy.

Widżet CardFixedFooter jest dostępny tylko w przypadku okien.

Poniżej znajdziesz przykład widżetu CardFixedFooter z 2 przyciskami:

Rozwiązywanie problemów

Gdy aplikacja Google Chat lub karta zwraca błąd, interfejs Google Chat wyświetla komunikat „Coś poszło nie tak”. lub „Nie udało się przetworzyć żądania”. Czasami interfejs Google Chat nie wyświetla żadnego komunikatu o błędzie, ale aplikacja lub karta Google Chat generuje nieoczekiwany wynik, np. wiadomość na karcie może się nie pojawić.

Chociaż komunikat o błędzie może nie wyświetlać się w interfejsie Google Chat, opisowe komunikaty o błędach i dane dziennika są dostępne, aby pomóc Ci naprawić błędy, gdy włączone jest rejestrowanie błędów w aplikacjach Google Chat. Pomoc dotyczącą wyświetlania, debugowania i naprawiania błędów znajdziesz w artykule Rozwiązywanie problemów z Google Chat.