Bu sayfada, kart bileşenlerinin ve yapısının nasıl oluşturulacağı açıklanmaktadır. Kartlar, Google Chat uygulamalarının Chat kullanıcılarına bilgi sunmak ve onlardan bilgi toplamak için kullanabileceği kullanıcı arayüzleridir. Chat uygulamaları aşağıdaki arayüzlerde kart oluşturabilir ve gösterebilir:
- Bir veya daha fazla kart içeren mesajlar
- Chat uygulamasındaki doğrudan mesajlarda Ana Sayfa sekmesinde görünen bir kart olan Ana sayfalar.
- Mesajlardan ve ana sayfalardan yeni bir pencerede açılan kartlar olan iletişim kutuları.
Bu sayfada, kartın aşağıdaki bileşenleri hakkında bilgi edineceksiniz:
- Genellikle bir kartın veya kart bölümünün başlığını içeren başlıklar.
- Widget'lar ve diğer etkileşimli öğeler de dahil olmak üzere kartın ana gövdesini oluşturan bölümler. Kart bölümünde sütunlar ve ızgaralar da dahil olmak üzere karta daha fazla yapı ekleyebilirsiniz.
- Düğmeler gibi kalıcı kullanıcı arayüzü öğelerini görüntülemek için iletişim kutularının alt kısmında görünen sabit altbilgiler.
Ön koşullar
Etkileşimli özellikler için etkinleştirilmiş bir Google Chat uygulaması. Etkileşimli bir Chat uygulaması oluşturmak için kullanmak istediğiniz uygulama mimarisine göre aşağıdaki hızlı başlangıç kılavuzlarından birini tamamlayın:
- Google Cloud Functions ile HTTP hizmeti
- Google Apps Komut Dosyası
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
Chat uygulamaları için mesajlaşma ve kullanıcı arayüzlerini tasarlamak ve önizlemek üzere Kart Oluşturucu'yu kullanın:
Kart Oluşturucu'yu açmaBaşlık ekleme
CardHeader widget'ı, kartın başlığını temsil eder. Başlıklarda kartınız için başlık, altyazı ve avatar resmi bulunabilir.
Aşağıda, CardHeader örneği verilmiştir:
Bir veya daha fazla kart bölümü ekleme
CardSection widget'ı, bir kart içindeki üst düzey bir kapsayıcıdır. Kart bölümlerini, bir karttaki widget'ları gruplandırmak için kullanırsınız. Her kart bölümüne bir başlık ve bir veya daha fazla widget ekleyebilirsiniz.
Aşağıda, iki textParagraph widget'ı içeren bir CardSection örneği verilmiştir:
Widget'lar arasına yatay ayırıcı ekleme
divider widget'ı, dikey olarak yığılmış widget'lar arasında bir kartın genişliğini kaplayan yatay bir çizgi gösterir. Çizgi, kullanıcıların bir widget'ı diğerinden ayırt etmesine yardımcı olan görsel bir ayırıcıdır. Bu sayede kartların taranması ve anlaşılması kolaylaşır.
Aşağıda, diğer widget türleri arasında divider widget'ından oluşan bir kart gösterilmektedir:
Sütun ekleyin
columns widget'ı, bir kartta en fazla 2 sütun gösterir. Her sütuna widget ekleyebilirsiniz. Widget'lar, belirtildikleri sırayla görünür.
2'den fazla sütun eklemek veya satır kullanmak için grid widget'ını kullanın.
Her sütunun yüksekliği, en uzun sütuna göre belirlenir. Örneğin, ilk sütun ikinci sütundan daha yüksekse her iki sütun da ilk sütunun yüksekliğine sahip olur. Her sütun farklı sayıda widget içerebileceğinden, satır tanımlayamaz veya sütunlar arasında widget'ları hizalayamazsınız.
Aşağıdaki örnekte, 2 sütun metin içeren bir columns widget'ı bulunan bir kart gösterilmektedir. Yalnızca sütun düzenini görüntülemek ve kod örneğini daraltmak için Daralt'ı tıklayın.
Aşağıdaki örnekte olduğu gibi alan kısıtlı olduğunda ikinci sütun ilk sütunun altına sarmalanır.
Sütun genişliğini tanımlama
Sütunlar yan yana gösterilir. horizontalSizeStyle alanını kullanarak her sütunun genişliğini özelleştirebilirsiniz.
Kullanıcının ekran genişliği çok darsa ikinci sütun birinci sütunun altına sarmalanır:
- Web'de, ekran genişliği 480 pikselden az veya eşitse ikinci sütun kaydırılır.
- iOS cihazlarda, ekran genişliği 300 puntodan az veya 300 puntoya eşitse ikinci sütun kaydırılır.
- Android cihazlarda, ekran genişliği 320 dp'den azsa veya bu değere eşitse ikinci sütun kaydırılır.
Aşağıdaki örnekte, sütunlarda 4 öğe bulunan 2 metin sütunu içeren bir columns widget'ı bulunan bir kart gösterilmektedir. Sütunlardaki her öğeye, metnin her sütunu ne kadar alanda dolduracağını değiştirmek için horizontalSizeStyle uygulanmıştır:
- İlk metin paragrafında, kartın genişliğinin en fazla %30'unu doldurmak için
FILL_MINIMUM_SPACEkullanılır. - İkinci metin paragrafında, kartın genişliğindeki kullanılabilir alanı doldurmak için
FILL_AVAILABLE_SPACEkullanılır. Bu örnekte, kartın genişliğinin% 70'ini doldurur. - Üçüncü metin paragrafı
horizontalSizeStyledeğerini tanımlamadığı için varsayılan olarak kartın kullanılabilir alanını doldurur. - Dördüncü metin paragrafında, kartın genişliğinin en fazla %30'unu doldurmak için
FILL_MINIMUM_SPACEkullanılır.
Bir sütunun yatay hizalamasını tanımlama
horizontalAligment alanını tanımlayarak widget'ları yatay olarak bir sütunun soluna, sağına veya ortasına hizalayabilirsiniz.
horizontalAlignment alanı tanımlanmamışsa widget'lar bir sütunda sola hizalanır.
Aşağıdaki örnekte, sütundaki metin yatay olarak sola hizalanmıştır:
Aşağıdaki örnekte, sütundaki metin yatay olarak ortada hizalanmıştır:
Aşağıdaki örnekte, sütundaki metin yatay olarak sağa hizalanmıştır:
Bir sütunun dikey hizalamasını tanımlama
verticalAlignment alanını tanımlayarak widget'ları dikey olarak bir sütunun üst, alt veya ortasına hizalayabilirsiniz.
verticalAlignment alanı tanımlanmamışsa sütundaki widget'lar üste hizalanır.
Aşağıdaki örnekte, sütundaki metin dikey olarak üste hizalanmıştır:
Aşağıdaki örnekte, sütundaki metin dikey olarak ortada hizalanmıştır:
Aşağıdaki örnekte, metin sütunun alt kısmında dikey olarak hizalanmıştır:
Öğe koleksiyonunu görüntülemek için ızgara ekleme
grid widget'ı, öğe koleksiyonunun yer aldığı bir ızgara görüntüler. Izgara, istediğiniz sayıda sütun ve öğeyi destekler. Satır sayısı, öğelerin sütunlara bölünmesiyle belirlenir.
10 öğe ve 2 sütun içeren bir tabloda 5 satır vardır. 11 öğe ve 2 sütun içeren bir tabloda 6 satır bulunur.
Widget, kullanıcıların tek tip veriler girmesine yardımcı olan önerileri ve metin giriş alanında bir değişiklik yapıldığında (ör. kullanıcı metin eklediğinde veya sildiğinde) çalışan değişiklikle ilgili işlemleri Actions destekler.
Aşağıdaki örnekte, tek bir öğe içeren 2 sütunlu bir ızgara gösterilmektedir:
Metnin, bir ızgaradaki resimle birlikte nerede gösterileceğini tanımlamak için gridItemLayout alanını belirtebilirsiniz.
Bu alan, metnin ızgaradaki öğenin üstünde mi yoksa altında mı görüneceğini belirlemenize olanak tanır. gridItemLayout tanımlanmamışsa metin varsayılan olarak ızgaradaki öğenin altında görünür.
Aşağıdaki örnekte, her birinde metin ve resim bulunan üç sütunlu bir ızgara gösterilmektedir. İlk ızgara, resmin üzerinde görünecek metni, ikinci ızgara resmin altında görünecek metni, üçüncü ızgara ise metnin konumunu tanımlar.
Izgaraya veya sütuna kenarlık ekleme
column veya grid widget'ında görünen öğeler için bir borderType alanı ve bir borderStyle alanı tanımlayarak bu kullanıcı arayüzü öğelerine kenarlık ekleyebilirsiniz.
borderStyle alanı tanımlanmazsa varsayılan olarak kenarlık gösterilmez. Bir widget'taki tüm öğelere uygulanacak bir borderType tanımlayabilir veya stili widget'taki her bir öğeye ayrı ayrı uygulayabilirsiniz.
Aşağıdaki örnekte, her birinde bir resim bulunan 2 sütunlu bir ızgara gösterilmektedir. Bu ızgaradaki kenar türü, stil ve renk, ızgaradaki tüm öğeler için geçerli olacak şekilde tanımlanmıştır.
Aşağıdaki örnekte, her birinde bir resim bulunan ve kenar stili ile türü ayrı ayrı tanımlanmış 3 sütunlu bir ızgara gösterilmektedir. İlk resimde STROKE olarak tanımlanmış bir kenarlık vardır. İkinci resimde NO_BORDER olarak tanımlanmış bir kenarlık vardır. Üçüncü resimde kenarlık tanımlanmamış.
Kalıcı bir altbilgi ekleme
CardFixedFooter widget'ı, bir Chat uygulaması tarafından gönderilen bir iletişim mesajının altbilgisini temsil eder. Altbilgilerde birincil ve ikincil düğmeler bulunabilir.
CardFixedFooter widget'ı yalnızca iletişim kutuları için kullanılabilir.
Aşağıda, iki düğmeli bir CardFixedFooter widget'ı örneği verilmiştir:
Sorun giderme
Bir Google Chat uygulaması veya kartı hata döndürdüğünde Chat arayüzünde "Bir hata oluştu" mesajı gösterilir. veya "İsteğiniz işlenemiyor." Bazen Chat kullanıcı arayüzünde hata mesajı gösterilmez ancak Chat uygulaması veya kartı beklenmedik bir sonuç verir. Örneğin, kart mesajı görünmeyebilir.
Chat kullanıcı arayüzünde hata mesajı gösterilmeyebilir ancak Chat uygulamaları için hata günlüğü etkinleştirildiğinde hataları düzeltmenize yardımcı olacak açıklayıcı hata mesajları ve günlük verileri kullanılabilir. Hataları görüntüleme, hata ayıklama ve düzeltme hakkında yardım için Google Chat hatalarını giderme başlıklı makaleyi inceleyin.