Tworzenie kart do aplikacji Google Chat

Na tej stronie opisujemy, 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 Google Chat mogą tworzyć i wyświetlać karty w tych interfejsach:

  • Wiadomości zawierające co najmniej 1 kartę.
  • Strony główne, czyli karty, które pojawiają się na karcie Strona główna w wiadomościach bezpośrednich 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ą 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 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ę Google Chat, wykonaj jeden z tych przewodników Szybki start na podstawie architektury aplikacji, której chcesz użyć:

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

Otwórz narzędzie do tworzenia kart

Dodawanie nagłówka

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 na karcie. Sekcji karty używasz do grupowania widżetów na karcie. Do każdej sekcji karty możesz dodać nagłówek i co najmniej 1 widżet.

Oto przykład CardSection zawierającej 2 widżety textParagraph:

Dodawanie poziomego separatora między widżetami

Widżet divider wyświetla poziomą linię rozciągającą się na szerokość karty między widżetami ułożonymi pionowo. Linia jest wizualnym separatorem, który pomaga użytkownikom odróżniać poszczególne widżety, dzięki czemu karty są łatwiejsze do skanowania i zrozumienia.

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

Dodawanie kolumn

Widżet columns wyświetla na karcie maksymalnie 2 kolumny. Do każdej kolumny możesz dodawać widżety. Będą one wyświetlane w kolejności, w jakiej zostały określone. Aby dodać 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 np. pierwsza kolumna jest wyższa niż druga, obie kolumny mają wysokość pierwszej kolumny. Każda kolumna może zawierać inną liczbę widżetów, dlatego nie możesz definiować wierszy ani wyrównywać widżetów między kolumnami.

Poniższy przykład 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 tym przykładzie, druga kolumna zawija się pod pierwszą.

Określanie szerokości kolumny

Kolumny są wyświetlane obok siebie. Szerokość każdej kolumny możesz dostosować za pomocą horizontalSizeStyle pola. Jeśli szerokość ekranu użytkownika jest zbyt mała, druga kolumna zawija się 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 zawija się, jeśli szerokość ekranu jest mniejsza lub równa 300 punktów.
  • Na urządzeniach z Androidem druga kolumna zawija się, 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 kolumnach. Do każdego elementu w kolumnach zastosowano horizontalSizeStyle, aby określić, ile miejsca tekst zajmuje w każdej kolumnie:

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

Określanie 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 jest niezdefiniowane, widżety są wyrównywane do lewej strony kolumny.

Poniższy przykład wyrównuje tekst w kolumnie do lewej strony:

Poniższy przykład wyrównuje tekst w kolumnie do środka:

Poniższy przykład wyrównuje tekst w kolumnie do prawej strony:

Określanie wyrównania pionowego kolumny

Możesz wyrównać widżety pionowo do góry, dołu lub środka kolumny, przez zdefiniowanie verticalAlignment pola. Jeśli pole verticalAlignment jest niezdefiniowane, widżety w kolumnie są wyrównywane do góry.

Poniższy przykład wyrównuje tekst w kolumnie do góry:

Poniższy przykład wyrównuje tekst w kolumnie do środka:

Poniższy przykład wyrównuje tekst w kolumnie do dołu:

Dodawanie siatki do wyświetlania kolekcji elementów

Widżet gridwidget 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ą wykonywane, gdy w polu do wprowadzania danych nastąpi zmiana, np. 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ę pojawiać z obrazem w siatce, możesz określić pole gridItemLayout field. To pole pozwala określić, czy tekst ma się pojawiać nad czy pod elementem w siatce. Jeśli gridItemLayout jest niezdefiniowane, tekst domyślnie pojawia się pod elementem w siatce.

Poniższy przykład przedstawia siatkę z 3 kolumnami, w której w każdej siatce znajduje się tekst i obraz. Pierwsza siatka określa, że tekst ma się pojawiać nad obrazem, druga – że tekst ma się pojawiać pod obrazem, a trzecia nie określa 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 zdefiniujesz pola borderStyle, domyślnie nie będzie wyświetlane żadne obramowanie. Możesz zdefiniować borderType, aby zastosować je do wszystkich elementów w widżecie, lub zastosować styl do każdego elementu w widżecie.

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

Poniższy przykład przedstawia siatkę z 3 kolumnami, w której w każdej siatce znajduje się obraz. 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 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żdej CarouselCard możesz dodać kilka 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.

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

Rozwiązywanie problemów

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

Chociaż komunikat o błędzie może się nie wyświetlać w interfejsie Google Chat, dostępne są opisowe komunikaty o błędach i dane logów, które pomagają naprawiać błędy gdy włączone jest logowanie błędów w aplikacjach Google Chat. Aby uzyskać pomoc w wyświetlaniu, debugowaniu i naprawianiu błędów, zapoznaj się z artykułem Rozwiązywanie problemów i naprawianie błędów w Google Chat.