Google Chat uygulamaları için kartlar oluşturma

Bu sayfada, kartın bileşenlerinin ve yapısının nasıl oluşturulacağı açıklanmaktadır. Kartlar, Google Chat uygulamalarının Chat kullanıcılarından bilgi sunmak ve toplamak için kullanabileceği kullanıcı arayüzleridir. Chat uygulamaları aşağıdaki arayüzlerde kart oluşturup gösterebilir:

  • Bir veya daha fazla kart içeren mesajlar.
  • Chat uygulamasıyla doğrudan mesajlarda Ana Sayfa sekmesinden görünen bir kart olan ana sayfalar.
  • İletişim kutuları: İletilerden ve ana sayfalardan yeni bir pencerede açılan kartlardır.

Bu sayfada, kartın aşağıdaki bileşenleri hakkında bilgi edineceksiniz:

  • Genellikle kartın veya kart bölümünün başlığını içeren üstbilgiler.
  • 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, kartınıza sütunlar ve ızgaralar da dahil olmak üzere daha fazla yapı ekleyebilirsiniz.
  • Düğmeler gibi kalıcı kullanıcı arayüzü öğelerini göstermek için iletişim kutularının alt kısmında görünen sabit altbilgiler.

Ön koşullar

Etkileşim etkinliklerini alıp bunlara yanıt verecek şekilde yapılandırılmış 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ıçlardan birini tamamlayın:

Chat uygulamaları için mesajlaşma ve kullanıcı arayüzlerini tasarlayıp önizlemek üzere Kart Oluşturucu'yu kullanın:

Kart Oluşturucu'yu açın

Başlık ekleme

CardHeader widget'ı, kartın başlığını temsil eder. Başlıklar; kartınız için başlık, alt başlık ve avatar resmi içerebilir.

Aşağıda, CardHeader örneği verilmiştir:

Bir veya daha fazla kart bölümü ekleme

CardSection widget'ı, kart içindeki üst düzey bir kapsayıcıdır. Kart bölümlerini kullanarak karttaki widget'ları gruplandırabilirsiniz. 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 yerleştirilmiş widget'lar arasında kartın genişliğini kaplayan yatay bir çizgi gösterir. Çizgi, kullanıcıların bir widget ile diğerini ayırt etmesine yardımcı olan görsel bir ayraçtı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, daha uzun olan sütun tarafından belirlenir. Örneğin, ilk sütun ikinci sütundan daha uzunsa 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 sınırlı olduğunda ikinci sütun, birinci sütunun altına kaydırılır.

Sütun genişliğini tanımlama

Sütunlar yan yana gösterilir. horizontalSizeStyle alanı ile 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 kaydırılır:

  • Web'de, ekran genişliği 480 pikselden az veya bu değere eşitse ikinci sütun kaydırılır.
  • iOS cihazlarda, ekran genişliği 300 pt'den az veya bu değere eşitse ikinci sütun kaydırılır.
  • Android cihazlarda, ekran genişliği 320 dp'den küçükse 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'ı olan bir kart gösterilmektedir. Sütunlardaki her öğede, metnin her sütunu ne kadar alan dolduracağını değiştirmek için horizontalSizeStyle uygulanır:

  • İlk metin paragrafı, kartın genişliğinin en fazla %30'unu doldurmak için FILL_MINIMUM_SPACE kullanır.
  • İkinci metin paragrafı, kartın genişliğindeki boş alanı doldurmak için FILL_AVAILABLE_SPACE kullanıyor. Bu örnekte, kartın genişliğinin% 70'ini doldurur.
  • Üçüncü metin paragrafı horizontalSizeStyle değerini tanımlamadığı için kartın kullanılabilir alanını dolduracak şekilde varsayılan olarak ayarlanır.
  • Dördüncü metin paragrafı, kartın genişliğinin en fazla %30'unu doldurmak için FILL_MINIMUM_SPACE kullanır.

Sütunun yatay hizalamasını tanımlama

horizontalAligment alanını tanımlayarak widget'ları bir sütunun soluna, sağına veya ortasına yatay olarak hizalayabilirsiniz. horizontalAlignment alanı tanımlanmamışsa widget'lar bir sütunda sola hizalanır.

Aşağıdaki örnekte, bir sütundaki metin yatay olarak sola hizalanır:

Aşağıdaki örnekte, bir sütundaki metin yatay olarak ortada hizalanır:

Aşağıdaki örnekte, bir sütundaki metin yatay olarak sağa hizalanır:

Sütunun dikey hizalamasını tanımlama

verticalAlignment alanını tanımlayarak widget'ları dikey olarak bir sütunun üst, alt veya orta kısmına hizalayabilirsiniz. verticalAlignment alanı tanımlanmamışsa bir sütundaki widget'lar en üste hizalanır.

Aşağıdaki örnekte, bir sütundaki metin dikey olarak üste hizalanır:

Aşağıdaki örnekte, bir sütundaki metin dikey olarak ortada hizalanır:

Aşağıdaki örnekte, bir sütundaki metin dikey olarak en altta hizalanır:

Öğe koleksiyonunu görüntülemek için ızgara ekleme

grid widget'ı, öğe koleksiyonunun bulunduğu bir ızgara gösterir. Bir ızgara, istenen sayıda sütunu ve öğeyi destekler. Satır sayısı, öğe sayısının sütun sayısına bölünmesiyle belirlenir. 10 öğe ve 2 sütun içeren bir ızgarada 5 satır bulunur. 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 değişiklik olduğunda (ör. kullanıcı metin eklediğinde veya sildiğinde) çalışan Actions olan değişiklik üzerine işlemleri destekler.

Aşağıdaki örnek, tek öğeli 2 sütunlu bir ızgaradır:

Metnin bir ızgaradaki resimle birlikte nerede görüneceğ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 tanımlamanıza olanak tanır. gridItemLayout tanımlanmamışsa metin varsayılan olarak ızgaradaki öğenin altında görünür.

Aşağıdaki örnekte, her ızgarada metin ve resim bulunan üç sütunlu bir ızgara gösterilmektedir. Birinci ızgara, resmin üzerinde görünecek metni, ikinci ızgara resmin altında görünecek metni tanımlar. Üçüncü ızgara ise metnin konumunu tanımlamaz.

Izgaraya veya sütuna kenarlık ekleme

column veya grid widget'ında görünen öğeler için borderType alanı ve borderStyle alanı tanımlayarak bu kullanıcı arayüzü öğelerine kenarlık ekleyebilirsiniz. borderStyle alanı tanımlanmamışsa 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 örnek, her birinde bir resim bulunan 2 sütunlu bir ızgaradır. Kenarlık türü, stili ve rengi, ızgaradaki tüm öğelere uygulanacak şekilde tanımlanmıştır.

Aşağıdaki örnekte, her birinde resim bulunan 3 sütunlu bir ızgara yer almaktadır. Kenarlık stili ve türü ayrı ayrı tanımlanmıştır. İlk resimde STROKE olarak tanımlanmış bir kenarlık var. İkinci resimde, NO_BORDER olarak tanımlanmış bir kenarlık var. Üçüncü resimde kenarlık tanımlanmamış.

Bant ekleme

Carousel widget'ı, ekranda kaydırılabilen CarouselCard nesnelerden oluşan bir koleksiyon gösterir. Her CarouselCard'ya birden fazla widget ekleyebilirsiniz.

CardFixedFooter widget'ı, bir Chat uygulaması tarafından gönderilen iletişim kutusu iletisinin altbilgisini temsil eder. Altbilgilerde birincil ve ikincil düğme bulunabilir.

CardFixedFooter widget'ı yalnızca iletişim kutularında 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ç üretir. Örneğin, kart mesajı görünmeyebilir.

Chat kullanıcı arayüzünde hata mesajı gösterilmese de Chat uygulamaları için hata günlüğü kaydı 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, hataları ayıklama ve düzeltme konusunda yardım için Google Chat hatalarını giderme ve düzeltme başlıklı makaleyi inceleyin.