Tworzenie kart do aplikacji Google Chat

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

  • Wiadomości zawierające co najmniej 1 kartę.
  • Strony główne – karta, która pojawia się na karcie Strona główna w wiadomościach bezpośrednich w aplikacji Google Chat.
  • Dialogi, czyli karty otwierane w nowym oknie z wiadomości i stron głównych.

Na tej stronie znajdziesz informacje o tych elementach karty:

  • Nagłówki, które zwykle zawierają tytuł karty lub jej sekcji.
  • sekcje, które stanowią główną część karty, w tym widżety i inne elementy interaktywne; W sekcji karty możesz dodać do niej więcej struktury, np. kolumny i siatki.
  • Stały stopka, które pojawiają się u dołu dialogów i wyświetlają trwałe elementy interfejsu, takie jak przyciski.

Wymagania wstępne

Aplikacja Google Chat, w której włączono funkcje interaktywne. Aby utworzyć interaktywną aplikację czatu, wykonaj jeden z tych samouczków w zależności od architektury aplikacji, której chcesz użyć:

Za pomocą Kreatora kart możesz projektować i przeglądać podglądy wiadomości oraz interfejsów aplikacji czatu:

Otwórz kreatora kart

Dodaj nagłówek

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

Oto przykład CardHeader:

Dodaj co najmniej 1 sekcję karty

Widżet CardSection to kontener wysokiego poziomu na karcie. Używasz sekcji karty, aby grupować widżety na karcie. W każdej sekcji karty możesz umieścić nagłówek i co najmniej 1 widżet.

Poniżej znajdziesz przykład CardSection zawierającego 2 widżety textParagraph:

Dodawanie poziomego separatora między widżetami

Widget divider wyświetla poziomą linię na całej szerokości karty między ułożonymi pionowo widżetami. Linia jest wizualnym elementem, który pomaga użytkownikom odróżnić jeden widżet od drugiego, dzięki czemu karty są łatwiejsze do odczytania i zrozumienia.

Poniżej znajduje się karta z widżetem divider umieszczonym między innymi widżetami:

Dodaj kolumny

columnswidżetwyświetla na karcie maksymalnie 2 kolumny. Do każdej kolumny możesz dodać widżety, które będą się wyświetlać w kolejności, w jakiej zostały określone. 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 mają wysokość pierwszej kolumny. Każda kolumna może zawierać inną liczbę widżetów, więc nie możesz definiować wierszy ani wyrównywać widżetów między kolumnami.

Na przykładzie poniżej widać kartę z widżetem columns zawierającym 2 kolumny tekstu. Aby wyświetlić tylko układ kolumn i zwinąć kod przykładowy, kliknij  Zwiń. Gdy miejsca jest mało, jak w przypadku tego przykładu, druga kolumna jest przenoszona pod pierwszą.

Definiowanie szerokości kolumny

Kolumny są wyświetlane obok siebie. Szerokość każdej kolumny możesz dostosować za pomocą pola horizontalSizeStyle. Jeśli szerokość ekranu użytkownika jest zbyt mała, druga kolumna jest przenoszona pod pierwszą:

  • W wersji internetowej druga kolumna jest przenoszona, jeśli szerokość ekranu jest mniejsza lub równa 480 pikselom.
  • Na urządzeniach z iOS druga kolumna jest przenoszona, jeśli szerokość ekranu jest mniejsza lub równa 300 punktom.
  • Na urządzeniach z Androidem druga kolumna jest przenoszona, jeśli szerokość ekranu jest mniejsza lub równa 320 dp.

Ten przykład pokazuje kartę z widżetem columns, który zawiera 2 kolumny tekstu z 4 elementami w każdej z nich. Do każdego elementu w kolumnach zastosowano styl horizontalSizeStyle, aby zmienić ilość miejsca zajmowanego przez tekst w każdej kolumnie:

  • Pierwszy akapit tekstu używa FILL_MINIMUM_SPACE, aby wypełnić nie więcej niż 30% szerokości karty.
  • Drugi akapit tekstu używa znaku FILL_AVAILABLE_SPACE, aby wypełnić dostępną przestrzeń na karcie. W tym przykładzie zajmuje 70% szerokości karty.
  • Trzeci akapit tekstu nie definiuje wartości horizontalSizeStyle, więc domyślnie wypełnia dostępne miejsce na karcie.
  • Czwarty akapit tekstu używa elementu FILL_MINIMUM_SPACE, który zajmuje nie więcej niż 30% szerokości karty.

Definiowanie wyrównania poziomego kolumny

Możesz wyrównać widżety poziomo do lewej, prawej lub środka kolumny, definiując pole horizontalAligment. 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:

W tym przykładzie tekst jest wyrównany w poziomie w środku kolumny:

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

Definiowanie wyrównania pionowego kolumny

Możesz wyrównać widżety pionowo u góry, u dołu lub na środku kolumny, definiując pole verticalAlignment. Jeśli pole verticalAlignment nie jest zdefiniowane, widżety w kolumnie są wyrównane do góry.

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

W tym przykładzie tekst jest wyrównany pionowo w środku kolumny:

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

Dodawanie siatki do wyświetlania kolekcji elementów

Widget gridwyświetla siatkę z kolekcją elementów. Siatka obsługuje dowolną liczbę kolumn i elementów. Liczba wierszy jest określana przez elementy podzielone przez kolumny. Siatka z 10 elementami i 2 kolumnami ma 5 wierszy. Siatka z 11 elementami i 2 kolumnami ma 6 wierszy.

Widget obsługuje sugestie, które pomagają użytkownikom wprowadzać jednolite dane, oraz działania wykonywane po zmianie, które sąActionsuruchamiane po wprowadzeniu zmiany w polu tekstowym, np. po dodaniu lub usunięciu tekstu przez użytkownika.

Ten przykład przedstawia siatkę 2-kolumnową z 1 elementem:

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

Przykład poniżej to siatka z 3 kolumnami z tekstem i obrazem w każdej z nich. Pierwsza siatka określa tekst, który ma się wyświetlać nad obrazem, druga – tekst, który ma się wyświetlać pod obrazem, a trzecia – pozycję tekstu.

Dodawanie obramowania do siatki lub kolumny

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

Ten przykład to siatka z 2 kolumnami, w której w każdej z nich znajduje się obraz. W przypadku wszystkich elementów w siatkowanej kratce zdefiniowano typ, styl i kolor obramowania.

W tym przykładzie mamy siatkę z 3 kolumnami, w której każda komórka zawiera obraz, a styl i typ obramowania są zdefiniowane oddzielnie. Pierwszy obraz ma obramowanie zdefiniowane jako STROKE. Drugi obraz ma obramowanie zdefiniowane jako NO_BORDER. Trzeci obraz nie ma zdefiniowanego obramowania.

Widget CardFixedFooterreprezentuje stopkę wiadomości dialogowej wysłanej przez aplikację Google Chat. Stopki mogą zawierać przycisk główny i dodatkowy.

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

Oto 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ć Twojej prośby”. Czasami interfejs czatu nie wyświetla żadnego komunikatu o błędzie, ale aplikacja lub karta czatu powoduje nieoczekiwany wynik, na przykład wiadomość na karcie może się nie wyświetlić.

Komunikat o błędzie może się nie wyświetlać w interfejsie czatu, ale gdy włączone jest rejestrowanie błędów w przypadku aplikacji czatu, dostępne są opisowe komunikaty o błędach i dane dziennika, które pomogą Ci je naprawić. Aby dowiedzieć się, jak wyświetlać, debugować i naprawiać błędy, przeczytaj artykuł Rozwiązywanie problemów z błędami Google Chat.