Oprócz SMS-ów aplikacje do obsługi czatu mogą też wysyłać wiadomości z kart w pokojach i użytkownikom. Karty obsługują zdefiniowany układ, interaktywne elementy interfejsu (np. przyciski) i multimedialne (np. obrazy).
Używaj wiadomości na karcie do:
- Prezentowanie szczegółowych informacji
- Zbieranie informacji od użytkowników
- Pokazywanie użytkownikom, co zrobić dalej
Ten przewodnik zawiera informacje na temat synchronicznego wysyłania wiadomości z karty (odpowiedzi w czasie rzeczywistym na zdarzenie Google Chat, np. odbierania wiadomości od użytkownika lub dodawania go do pokoju) oraz asynchronicznego (wysyłania wiadomości z aplikacji do pokoju lub użytkownika bez pytania przy użyciu interfejsu Chat REST API).
Wymagania wstępne
Aby wysyłać wiadomości z karty w tym przewodniku, musisz mieć:
Node.js
- konto Google Workspace z dostępem do Google Chat;
- Aplikacja Google Chat. Aby utworzyć aplikację do obsługi czatu, skorzystaj z tego krótkiego wprowadzenia.
Uwaga: przykładowe fragmenty kodu Node.js w tym przewodniku są uruchamiane w ramach funkcji Google Cloud.
Python
- konto Google Workspace z dostępem do Google Chat;
- Aplikacja Google Chat. Aby utworzyć aplikację do obsługi czatu, skorzystaj z tego krótkiego wprowadzenia.
Uwaga: przykłady kodu w Pythonie z tego przewodnika zostały napisane do działania jako funkcje Google Cloud w języku Python 3.9.
Google Apps Script
- konto Google Workspace z dostępem do Google Chat;
- Aplikacja Google Chat. Aby utworzyć aplikację do obsługi czatu, skorzystaj z tego krótkiego wprowadzenia.
Anatomia wiadomości na karcie
Każda karta (czy to okno, czy wiadomość) jest obiektem JSON w zasobie spaces.messages
w Google Chat API.
Obiekt JSON karty składa się z tych elementów:
- Tablica
cardsV2[]
o co najmniej jednym obiekcieCardWithId
. cardId
, który służy do identyfikowania karty i zakresu w danej wiadomości. (Karty w różnych wiadomościach mogą mieć ten sam identyfikator).Obiekt
card
, który składa się z tych elementów:- Obiekt
header
, który określa tytuł, podtytuł lub obraz w stylu awatara. - Jeden lub więcej obiektów
section
, które zawierają co najmniej jeden widżet. Co najmniej 1 obiekt
widget
. Każdy widżet to obiekt złożony, który może reprezentować tekst, obrazy, przyciski lub inne typy obiektów.Te widżety i okna obsługują te widżety:
TextParagraph
– wyświetla akapit tekstu z opcjonalnym prostym formatowaniem HTML.Image
– wyświetla klikalny lub statyczny obraz.PNG
lub.JPG
hostowany pod adresem URL HTTPS.DecoratedText
– wyświetla tekst z opcjonalnymi układami i funkcjami, takimi jak ikony i przyciski.ButtonList
– wyświetla zestaw przycisków.
W dialogach obsługiwane są te widżety (wkrótce będą też obsługiwane wiadomości z kart):
TextInput
– pole, w którym użytkownicy mogą wpisywać tekstSelectionInput
– zawiera zestaw elementów, które można wybrać, na przykład listę pól wyboru, opcji, przełączników lub menu.Divider
– wyświetla poziomą linię rozciągającą się po szerokość karty między skumulowanymi widżetami, pełniąc funkcję wizualnego separatora.Grid
– umieszcza zestaw elementów w prostej siatce.
Wkrótce wprowadzimy obsługę tego widżetu:
DateTimePicker
– pozwala użytkownikom określić datę, godzinę lub obie te wartości.
- Obiekt
Przykładem mogą być obiekty header
, section
i widget
w tym komunikacie na karcie:
Ten kod przedstawia kod JSON komunikatu karty:
JSON
{
"cardsV2": [
{
"cardId": "unique-card-id",
"card": {
"header": {
"title": "Sasha",
"subtitle": "Software Engineer",
"imageUrl":
"https://developers.google.com/chat/images/quickstart-app-avatar.png",
"imageType": "CIRCLE",
"imageAltText": "Avatar for Sasha",
},
"sections": [
{
"header": "Contact Info",
"collapsible": true,
"uncollapsibleWidgetsCount": 1,
"widgets": [
{
"decoratedText": {
"startIcon": {
"knownIcon": "EMAIL",
},
"text": "sasha@example.com",
}
},
{
"decoratedText": {
"startIcon": {
"knownIcon": "PERSON",
},
"text": "<font color=\"#80e27e\">Online</font>",
},
},
{
"decoratedText": {
"startIcon": {
"knownIcon": "PHONE",
},
"text": "+1 (555) 555-1234",
}
},
{
"buttonList": {
"buttons": [
{
"text": "Share",
"onClick": {
"openLink": {
"url": "https://example.com/share",
}
}
},
{
"text": "Edit",
"onClick": {
"action": {
"function": "goToView",
"parameters": [
{
"key": "viewType",
"value": "EDIT",
}
],
}
}
},
],
}
},
],
},
],
},
}
],
}
Wyślij synchroniczną wiadomość z karty
W tym przykładzie użytkownik wysyła wiadomość w Google Chat, a aplikacja odpowiada, wysyłając prostą synchroniczną kartę z nazwą i awatarem nadawcy:
W poniższych przykładach kodu aplikacje Node.js i Python są hostowane w Google Cloud Functions. Przykład Apps Script znajduje się w Google Apps Script.
Pełne instrukcje tworzenia i wdrażania aplikacji do obsługi czatu znajdziesz w artykule Tworzenie aplikacji Google Chat.
Node.js
Python
Google Apps Script
Wysyłanie asynchronicznej karty karty za pomocą interfejsu Chat API
Ten przykład asynchronicznie tworzy wiadomość za pomocą interfejsu Chat API i wysyła ją do pokoju, do którego aplikacja Google Chat jest dodana, jak w poniższym przykładzie:

Python
- W katalogu roboczym utwórz plik o nazwie
chat_create_card_message.py
. Umieść w kodzie
chat_create_card_message.py
ten kod:from httplib2 import Http from oauth2client.service_account import ServiceAccountCredentials from apiclient.discovery import build # Specify required scopes. SCOPES = ['https://www.googleapis.com/auth/chat.bot'] # Specify service account details. CREDENTIALS = ServiceAccountCredentials.from_json_keyfile_name( 'service_account.json', SCOPES) # Build the URI and authenticate with the service account. chat = build('chat', 'v1', http=CREDENTIALS.authorize(Http())) # Create a Chat message. result = chat.spaces().messages().create( # The space to create the message in. # # Replace SPACE with a space name. # Obtain the space name from the spaces resource of Chat API, # or from a space's URL. parent='spaces/SPACE', # The message to create. body= { 'cardsV2': [{ 'cardId': 'createCardMessage', 'card': { 'header': { 'title': 'A Card Message!', 'subtitle': 'Created with Chat REST API', 'imageUrl': 'https://developers.google.com/chat/images/chat-product-icon.png', 'imageType': 'CIRCLE' }, 'sections': [ { 'widgets': [ { 'buttonList': { 'buttons': [ { 'text': 'Read the docs!', 'onClick': { 'openLink': { 'url': 'https://developers.google.com/chat' } } } ] } } ] } ] } }] } ).execute() print(result)
W kodzie zastąp
SPACE
nazwą pokoju, który możesz uzyskać za pomocą metodyspaces.list()
w interfejsie Chat API lub z adresu URL pokoju.W katalogu roboczym utwórz i uruchom przykład:
python3 chat_create_card_message.py
Więcej informacji o pracy z wiadomościami w interfejsie API REST Chat znajdziesz w artykule Tworzenie, odczytywanie, aktualizowanie i usuwanie wiadomości.
Otwórz okno
Okna to opracowane w aplikacji Google Chat interfejsy oparte na kartach, które umożliwiają interakcję z użytkownikami. Aby ułatwić użytkownikom wykonywanie wieloetapowych procesów, aplikacje mogą otwierać kolejne okna dialogowe. Aplikacje mogą otwierać okna dialogowe w odpowiedzi na kliknięcie przycisku na karcie lub polecenie po ukośniku.
Okna są przydatne w przypadku wielu rodzajów interakcji użytkownika, np.:
- Zbieranie informacji od użytkowników
- Uwierzytelnianie użytkowników za pomocą usług internetowych
- Konfigurowanie ustawień aplikacji Google Chat
W tym przykładzie aplikacja do obsługi czatu otworzy okno, aby pomóc użytkownikowi utworzyć nowy kontakt do jego książki adresowej:
Implementację okien znajdziesz w artykule Otwieranie okien.
Formatowanie karty
Formatowanie tekstu karty
Większość kart tekstowych w kartach na stronie obsługuje podstawowe formatowanie tekstu za pomocą niewielkiego podzbioru tagów HTML. Obsługiwane tagi i ich przeznaczenie znajdziesz w tabeli poniżej:
pogrubienia, | <b> | kursywy, | <i> | |
Podkreślenie | <> | Przekreślenie | <ostrzeżenie> | |
Kolor czcionki | <font color=""> | Hiperlink | <a href=""> | |
Podział wiersza | <br> |
Pamiętaj, że treść wiadomości podstawowej jest analizowana przy użyciu innej składni znaczników, która jest zoptymalizowana dla użytkowników. Szczegółowe informacje znajdziesz w artykule Wysyłanie SMS-ów.
Wbudowane ikony
Widżety DecoratedText
i ButtonList
obsługują element icon
używany do określania jednej z wbudowanych ikon dostępnych w Google Chat:
{ . . . "knownIcon": "TRAIN", . . . }
Poniższa tabela zawiera wbudowane ikony dostępne dla wiadomości na karcie:
samolot | ZAKŁADKA | ||
Autobus | CAR | ||
ZEGAR | CONFIRMATION_NUMBER_ICON | ||
DESCRIPTION | KWOTA | ||
ZDARZENIE_ZDARZENIA | |||
Przylot | WYPRZEDZENIE_lotu | ||
HOTEL | TYP_ROOM_ROOM | ||
ZAPROŚ | MAP_PIN | ||
CZŁONKOSTWO | WIELE OSÓB | ||
OSOBA | TELEFON | ||
ICON_RESTAURANT | KARTA_PRODUKTOWA | ||
GWIAZDKA | SKLEP | ||
BILET | Pociąg | ||
KAMERA_WIDEO | WIDEO PLAY |
Ikony niestandardowe
Widżety DecoratedText
i ButtonList
umożliwiają korzystanie z wbudowanych ikon wymienionych powyżej lub definiowanie własnych ikon niestandardowych. Aby określić ikonę niestandardową, użyj elementu iconUrl
w ten sposób:
{. . . "iconUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png" . . }
Ograniczenia i uwagi
Podczas przygotowywania się do wysyłania wiadomości dotyczących kart pamiętaj o tych ograniczeniach i uwagach.
Te widżety nie są obsługiwane przez wiadomości na karcie, ale wkrótce będą dostępne:
TextInput
– pole, w którym użytkownicy mogą wpisywać tekstSelectionInput
, który zawiera zestaw możliwych do wybrania elementów, takich jak lista pól wyboru, opcji, przełączników lub menu.DateTimePicker
, który umożliwia użytkownikom określenie daty, godziny lub obu tych opcji.Grid
, który zawiera zestaw elementów w prostej siatce.