Chat uygulamaları, kısa mesajlara ek olarak alanlarda ve kullanıcılara kart mesajları gönderebilir. Kartlar tanımlı bir düzeni, düğmeler gibi etkileşimli kullanıcı arayüzü öğelerini ve resimler gibi rich media'yı destekler.
Kart mesajlarını kullanarak:
- Ayrıntılı bilgi verin
- Kullanıcılardan bilgi toplama
- Kullanıcıları bir sonraki adıma geçmeye yönlendirin
Bu kılavuzda, kart mesajlarının eşzamanlı olarak (bir Chat etkinliğine gerçek zamanlı yanıt verme (ör. kullanıcıdan mesaj alma veya alana eklenme)) ve eşzamansız olarak (Chat REST API kullanılarak istem olmadan uygulamadan alana veya kullanıcıya mesaj gönderilmesi) nasıl gönderileceği açıklanmaktadır.
Ön koşullar
Bu kılavuzdaki kart mesajlarını göndermek için aşağıdakilere ihtiyacınız vardır:
Node.js
- Google Chat'e erişimi olan bir Google Workspace hesabı.
- Bir Chat uygulaması. Chat uygulaması oluşturmak için bu hızlı başlangıç kılavuzunu takip edin.
Not: Bu kılavuzdaki Node.js kod örnekleri Google Cloud Functions işlevi olarak çalışacak şekilde yazılmıştır.
Python
- Google Chat'e erişimi olan bir Google Workspace hesabı.
- Bir Chat uygulaması. Chat uygulaması oluşturmak için bu hızlı başlangıç kılavuzunu takip edin.
Not: Bu kılavuzdaki Python kod örnekleri, Python 3.9 kullanılarak Google Cloud Functions işlevi olarak çalışacak şekilde yazılmıştır.
Apps Komut Dosyası
- Google Chat'e erişimi olan bir Google Workspace hesabı.
- Bir Chat uygulaması. Chat uygulaması oluşturmak için bu hızlı başlangıç kılavuzunu takip edin.
Bir kart mesajının anatomisi
İster kart ister mesaj olsun, her kart Chat API'deki spaces.messages
kaynağında bir JSON nesnesidir.
Kart JSON nesnesi aşağıdakilerden oluşur:
- Bir veya daha fazla
CardWithId
nesnesi içerencardsV2[]
adlı bir dizi. - Kartı tanımlamak için kullanılan ve belirli bir mesaj kapsamındaki kapsam
cardId
. (Farklı mesajlardaki kartlar aynı kimliğe sahip olabilir.) Aşağıdakilerden oluşan bir
card
nesnesi:- Başlık, alt başlık ve avatar stili resim gibi öğeleri belirten bir
header
nesnesi. - Her biri en az bir widget içeren bir veya daha fazla
section
nesnesi. Bir veya daha fazla
widget
nesnesi. Her widget; metin, resim, düğme ve diğer nesne türlerini temsil edebilen birleşik bir nesnedir.Kart widget'larında ve iletişim kutularında aşağıdaki widget'lar desteklenir:
TextParagraph
: İsteğe bağlı basit HTML biçimlendirmesiyle bir metin paragrafı görüntüler.Image
: HTTPS URL'sinde barındırılan tıklanabilir veya statik.PNG
veya.JPG
resmi gösterir.DecoratedText
: Simgeler ve düğmeler gibi isteğe bağlı düzen ve işlev özelliklerine sahip metinleri görüntüler.ButtonList
: Bir dizi düğmeyi görüntüler.
Aşağıdaki widget'lar iletişim kutularında desteklenir (yakında kart mesajları için destek sunulacaktır):
TextInput
: Kullanıcıların metin girebileceği alan.SelectionInput
: Onay kutuları, radyo düğmeleri, anahtarlar veya açılır menü gibi bir dizi seçilebilir öğe sağlar.Divider
: Yığılmış widget'lar arasında, kart genişliğini yatay ayırıcı olarak gören yatay bir çizgi görüntüler.Grid
: Bir öğe grubunu basit bir ızgaraya yerleştirir.
Aşağıdaki widget yakında desteklenecektir:
DateTimePicker
: Kullanıcıların bir tarih, saat veya her ikisini birden belirtmesine olanak tanır.
- Başlık, alt başlık ve avatar stili resim gibi öğeleri belirten bir
Örneğin, aşağıdaki kart mesajında header
, section
ve widget
nesnelerini inceleyin:
Aşağıdaki kod, kart mesajının JSON'unu temsil eder:
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",
}
],
}
}
},
],
}
},
],
},
],
},
}
],
}
Eşzamanlı kart mesajı gönderme
Bu örnekte, kullanıcı Chat uygulamasına Google Chat'te bir mesaj gönderir. Uygulama da gönderenin adını ve avatar resmini gösteren basit bir eşzamanlı kart mesajı göndererek yanıt verir:
Aşağıdaki kod örneklerinde Node.js ve Python uygulamaları Google Cloud Functions'da barındırılır. Apps Komut Dosyası örneği Google Apps Komut Dosyası'nda barındırılır.
Chat uygulaması oluşturma ve dağıtmayla ilgili tüm talimatlar için Chat uygulaması oluşturma başlıklı makaleyi inceleyin.
Node.js
Python
Apps Komut Dosyası
Chat API ile eşzamansız bir kart mesajı gönderin
Bu örnek, eşzamansız olarak Chat API ile mesaj oluşturur ve bu mesajı, Chat uygulamasının eklendiği bir alana gönderir (ör. aşağıda gösterilen):

Python
- Çalışma dizininizde
chat_create_card_message.py
adlı bir dosya oluşturun. chat_create_card_message.py
uygulamasına aşağıdaki kodu ekleyin: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)
Koddaki
SPACE
yerine Chat API'sindekispaces.list()
yöntemini veya bir alanın URL'sini kullanarak bir alan adı girin.Çalışma dizininizde örneği oluşturun ve çalıştırın:
python3 chat_create_card_message.py
Chat REST API'de mesajlarla çalışma hakkında daha fazla bilgi edinmek için Mesaj oluşturma, okuma, güncelleme, silme başlıklı makaleyi inceleyin.
İletişim kutusu açma
İletişim kutuları, Chat uygulamalarının kullanıcılarla etkileşimde bulunmak için açtığı pencereli, kart tabanlı arayüzlerdir. Kullanıcıların çok adımlı işlemleri tamamlamasına yardımcı olmak için uygulamalar sıralı iletişim kutuları açabilir. Uygulamalar, bir kart mesajına yapılan düğmeye veya bir eğiklik komutuna yanıt olarak iletişim kutularını açabilir.
İletişim kutuları, aşağıdakiler de dahil olmak üzere birçok kullanıcı etkileşimi türü için yararlıdır:
- Kullanıcılardan bilgi toplama
- Web hizmetleriyle kullanıcı kimliklerini doğrulama
- Chat uygulaması ayarlarını yapılandırma
Bu örnekte Chat uygulaması, kullanıcının adres defteri için yeni bir kişi oluşturmasına yardımcı olmak amacıyla bir iletişim kutusu açmaktadır:
İletişim kutularını uygulamak için İletişim kutularını açma konusuna bakın.
Kart biçimlendirmesi
Kart metni biçimlendirmesi
Kartların içindeki çoğu metin alanı, HTML etiketlerinin küçük bir alt kümesi üzerinden temel metin biçimlendirmesini destekler. Desteklenen etiketler ve amaçları aşağıdaki tabloda gösterilir:
Kalın | <b> | İtalik | <i> | |
Altını çiz | <> | Üstü Çizili | <ihtar> | |
Yazı Tipi Rengi | <font color=""> | Köprü | <a href=""> | |
Satır Sonu | <br> |
Temel mesajın metin gövdesi, insan kullanıcılar için optimize edilmiş farklı bir işaretleme söz dizimi kullanılarak ayrıştırılır. Ayrıntılar için Kısa mesaj gönderme başlıklı makaleyi inceleyin.
Yerleşik simgeler
DecoratedText
ve ButtonList
widget'ları, Google Chat'te bulunan yerleşik simgelerden birini belirtmek için kullanılan icon
öğesini destekler:
{ . . . "knownIcon": "EĞİTİM", . . . }
Aşağıdaki tabloda, kart mesajlarıyla kullanılabilen yerleşik simgeler listelenmiştir:
UÇAK | YER İŞARETİ | ||
OTOBÜS | ARA | ||
SAAT | ONAY_NUMBER_SİMGESİ | ||
AÇIKLAMA | LİSANS | ||
E-POSTA GÖNDERİN | ETKİNLİK_SEAT | ||
UÇUŞ_SAYISI | UÇ_KATILIMCI | ||
OTEL | OTEL_ODA_TÜRÜ | ||
DAVET ET | MAP_PIN | ||
ÜYELİK | ÇOKTAN_KİŞİLER | ||
KİŞİ | TELEFON | ||
RESTAURANT_SİMGE | ALIŞVERİŞ_KART | ||
Yıldız | MAĞAZA | ||
BİLET | TREN | ||
VİDEO_KAMERA | VİDEO_OYNATMA |
Özel simgeler
DecoratedText
ve ButtonList
widget'ları, yukarıda listelenen yerleşik simgeleri kullanmanıza veya kendi özel simgelerinizi tanımlamanıza olanak tanır. Özel bir simge belirtmek için burada gösterildiği gibi iconUrl
öğesini kullanın:
{ . . . "iconUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png". . . }
Sınırlar ve dikkat edilmesi gereken noktalar
Kart mesajı göndermeye hazırlanırken bu sınırları ve dikkat edilmesi gereken noktaları göz önünde bulundurun.
Aşağıdaki widget'lar kart mesajları tarafından desteklenmez ancak yakında desteklenecektir:
- Kullanıcıların metin girebileceği bir alan olan
TextInput
. - Onay kutuları, radyo düğmeleri, anahtarlar veya açılır menü gibi bir dizi seçilebilir öğe sağlayan
SelectionInput
. DateTimePicker
(kullanıcıların tarih, saat veya her ikisini birden belirtmesini sağlar).Grid
, bir öğe grubunu basit bir ızgarada yerleştirir.
- Kullanıcıların metin girebileceği bir alan olan