Tworzenie kart do aplikacji Google Chat

Na tej stronie dowiesz się, jak tworzyć komponenty i strukturę karty. Karty to interfejsy użytkownika, których aplikacje Google Chat mogą używać do prezentowania i zbierania informacji od użytkowników Google Chat. Aplikacje do obsługi czatu 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 wiadomościach bezpośrednich z aplikacją Google Chat.
  • Okna dialogowe, 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ą część karty, w tym widżety i inne elementy interaktywne. W sekcji karty możesz dodać więcej elementów struktury karty, w tym kolumny i siatki.
  • Stałe stopki, które pojawiają się u dołu okien dialogowych i wyświetlają stałe elementy interfejsu, takie jak przyciski.

Wymagania wstępne

Aplikacja Google Chat skonfigurowana do odbierania zdarzeń interakcji i odpowiadania na nie. Aby utworzyć interaktywną aplikację do obsługi czatu, wykonaj jeden z tych przewodników Szybki start, w zależności od architektury aplikacji, której chcesz użyć:

Użyj narzędzia do tworzenia kart, aby projektować i wyświetlać podgląd wiadomości oraz interfejsów użytkownika aplikacji Google Chat:

Otwórz narzędzie do tworzenia 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 najwyższego poziomu w karcie. Sekcje kart służą do grupowania widżetów 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

dividerWidżet wyświetla poziomą linię na całej szerokości karty między widżetami ułożonymi pionowo. Linia jest wizualnym separatorem, który pomaga użytkownikom odróżniać od siebie poszczególne widżety, dzięki czemu karty są łatwiejsze do przejrzenia i zrozumienia.

Poniżej znajduje się karta składająca się z widżetu divider między innymi typami widżetów:

Dodaj kolumny

columnsWidżet wyświetla na karcie maksymalnie 2 kolumny. Do każdej kolumny możesz dodać widżety. Będą one wyświetlane 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 od drugiej, 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.

Przykład poniżej przedstawia 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 miejsca jest mało, 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 szerokość ekranu użytkownika jest zbyt mała, druga kolumna zostanie przeniesiona pod pierwszą:

  • W internecie druga kolumna zawija się, 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 punktów.
  • Na urządzeniach z Androidem druga kolumna jest zawijana, jeśli szerokość ekranu jest mniejsza lub równa 320 dp.

Poniższy przykład przedstawia kartę z widżetem columns, który zawiera 2 kolumny tekstu z 4 elementami w każdej z nich. Każdy element w kolumnach ma zastosowany znak horizontalSizeStyle, który wpływa na to, ile miejsca zajmuje tekst w każdej kolumnie:

  • Pierwszy akapit tekstu używa FILL_MINIMUM_SPACE, aby wypełnić nie więcej niż 30% szerokości karty.
  • W drugim akapicie tekstu użyto znaku FILL_AVAILABLE_SPACE, aby wypełnić dostępną przestrzeń na szerokość karty. W tym przykładzie zajmuje 70% szerokości karty.
  • Trzeci akapit tekstu nie definiuje horizontalSizeStyle, więc domyślnie wypełnia dostępną przestrzeń karty.
  • Czwarty akapit tekstu używa znaku FILL_MINIMUM_SPACE, aby wypełnić nie więcej niż 30% szerokości karty.

Określanie wyrównania kolumny w poziomie

Możesz wyrównać widżety w poziomie do lewej, prawej lub środkowej części kolumny, definiując pole horizontalAligment. Jeśli pole horizontalAlignment jest niezdefiniowane, widżety są wyrównywane do lewej strony w kolumnie.

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

W tym przykładzie tekst w kolumnie jest wyśrodkowany w poziomie:

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

Określanie wyrównania kolumny w pionie

Widżety możesz wyrównać pionowo do góry, dołu lub środka kolumny, definiując 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:

W tym przykładzie tekst w kolumnie jest wyśrodkowany w pionie:

Ten przykład pokazuje, jak wyrównać tekst w kolumnie do dołu:

Dodawanie siatki do wyświetlania kolekcji elementów

gridWidżet 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, które są Actions uruchamiane, gdy w polu wprowadzania tekstu 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 tekst ma się wyświetlać z obrazem w siatce, możesz podać gridItemLayout pole. To pole umożliwia określenie, czy tekst ma się pojawiać nad elementem w siatce czy pod nim. Jeśli wartość gridItemLayout jest niezdefiniowana, tekst domyślnie wyświetla się pod produktem w siatce.

Poniżej znajduje się przykład siatki z 3 kolumnami, w których znajdują się tekst i obraz. Pierwsza siatka określa tekst, który ma się pojawiać nad obrazem, druga siatka określa tekst, który ma się pojawiać pod obrazem, a trzecia siatka nie określa położenia 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świetlana żadna ramka. Możesz zdefiniować borderType, które będzie stosowane do wszystkich elementów w widżecie, lub zastosować styl do każdego elementu w widżecie.

Poniższy przykład to siatka z 2 kolumnami, w której w każdej komórce znajduje się obraz. Zdefiniowano typ, styl i kolor obramowania, które mają być stosowane do wszystkich elementów siatki.

Poniższy przykład to siatka z 3 kolumnami, w której w każdej komórce znajduje się obraz, a styl i typ obramowania są zdefiniowane osobno. Pierwszy obraz ma ramkę zdefiniowaną jako STROKE. Drugi obraz ma ramkę zdefiniowaną jako NO_BORDER. Trzeci obraz nie ma zdefiniowanego obramowania.

Dodawanie karuzeli

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

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

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

Oto przykład widżetu CardFixedFooter z 2 przyciskami:

Rozwiązywanie problemów

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

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