Google Chat uygulamaları için kartlar oluşturma

Bu sayfada, bir 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ı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örüntüleyebilir:

  • Bir veya daha fazla kart içeren mesajlar.
  • Ana sayfalar: Chat uygulamasıyla doğrudan mesajlarda Ana Sayfa sekmesinden görüntülenen bir karttır.
  • 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 dahil olmak üzere karta 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

Kullanıcı etkileşimlerini alacak ve 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ıç kılavuzlarından birini tamamlayın:

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

Kart Oluşturucu'yu açın

Başlık ekleme

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

Aşağıda bir 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, kart içindeki 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 kapsayan yatay bir çizgi gösterir. Çizgi, kullanıcıların widget'ları birbirinden ayırt etmesine yardımcı olan görsel bir bölücüdür. Bu sayede kartlar daha kolay taranabilir ve anlaşılabilir.

Aşağıda, diğer widget türleri arasında divider widget'tan 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 belirtilen sırada 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ütuna göre 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ırları tanımlayamaz veya widget'ları sütunlar arasında hizalayamazsınız.

Aşağıdaki örnekte, 2 sütun metin içeren columns widget'ına sahip bir kart gösterilmektedir. Yalnızca sütun düzenini salt 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 kaydırılı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, birincinin altına kayar:

  • Web'de, ekran genişliği 480 pikselden az veya buna eşitse ikinci sütun kaydırılır.
  • iOS cihazlarda, ekran genişliği 300 pt'ye eşit veya daha azsa ikinci sütun kaydırılır.
  • Android cihazlarda, ekran genişliği 320 dp'ye eşit veya daha azsa ikinci sütun kaydırılır.

Aşağıdaki örnekte, sütunlarda 4 öğe bulunan 2 sütunlu metin içeren columns widget'ına sahip bir kart gösterilmektedir. Sütunlardaki her öğeye, metnin her sütunda ne kadar yer kaplayacağını belirlemek için horizontalSizeStyle uygulanır:

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

Sütunun yatay hizalamasını tanımlama

horizontalAlignment 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 hizalanmaktadır:

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

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

Bir sütunun dikey hizalamasını tanımlama

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

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

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

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

Öğe koleksiyonu göstermek için ızgara ekleme

grid widget'ı, öğe koleksiyonu içeren bir tablo gösterir. Izgaralar, dilediğiniz sayıda sütun ve öğe içerebilir. Satır sayısı, öğelerin sütunlara bölünmesiyle belirlenir. 10 öğe ve 2 sütun içeren bir ızgarada 5 satır bulunur. 11 öğe ve 2 sütundan oluşan bir ızgarada 6 satır vardır.

Widget, kullanıcıların tek tip veri girmesine yardımcı olan önerileri ve metin girişi alanında değişiklik olduğunda (ör. kullanıcının metin eklemesi veya silmesi) çalışan, Actions olan değişiklik işlemlerini 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 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 bir ızgarada metin ve resim bulunan üç sütunlu bir ızgara gösterilmektedir. İlk ızgara, resmin üstünde görünecek metni tanımlar, ikinci ızgara, resmin altında görünecek metni tanımlar ve üçüncü ızgara, 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 bir widget'taki her bir öğeye uygulayabilirsiniz.

Aşağıdaki örnek, her bir ızgarada bir resim bulunan 2 sütunlu bir ızgaradır. Burada kenarlık türü, stili ve rengi, ızgaradaki tüm öğelere uygulanacak şekilde tanımlanmıştır.

Aşağıdaki örnek, her bir ızgarada bir resim bulunan ve kenarlık stili ile türü ayrı ayrı tanımlanmış 3 sütunlu bir ızgaradır. İlk resmin kenarlığı STROKE olarak tanımlanmış. İkinci resmin kenarlığı NO_BORDER olarak tanımlanmış. Üçüncü resimde kenarlık tanımlanmamış.

Dönen öğeler ekleme

Carousel widget'ı, ekranda kaydırılabilen CarouselCard nesnelerinden oluşan bir koleksiyon gösterir. Her CarouselCard için birden fazla widget ekleyebilirsiniz.

CardFixedFooter widget'ı, bir Chat uygulaması tarafından gönderilen iletişim kutusu mesajının altbilgisini temsil eder. Altbilgilerde birincil ve ikincil düğme 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" veya "İsteğiniz işlenemiyor" mesajı gösterilir. 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ö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 konusunda yardım için Google Chat hatalarını giderme ve düzeltme başlıklı makaleyi inceleyin.