Kartlara metin ve resim ekleme

Bu sayfada, kartlara nasıl metin ve resim ekleyip biçimlendireceğiniz açıklanmaktadır.

Kart oluşturma hakkında daha fazla bilgi edinmek için Google Chat uygulamaları için kart oluşturma başlıklı makaleyi inceleyin.

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

Ö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:

Resim veya simge ekleme

Bu bölümde, kartlara resim, resim bileşeni ve simge gibi görsel öğelerin nasıl ekleneceği açıklanmaktadır.

Resim ekleme

Image widget'ı, HTTPS URL'sinde barındırılan bir PNG veya JPG resmi gösterir. Gösterilen resmin genişliği, gösterilen kartın tüm genişliğini doldurur ve yüksekliği, resmin en boy oranını koruyacak şekilde ayarlanır. Image widget'ı, kullanıcılar resmi tıkladığında gerçekleşen onclick işlemleri destekler. onclick işlemlerine örnek olarak şunlar verilebilir:

  • OpenLink ile bir köprü açın. Örneğin, Google Chat geliştirici belgelerinin köprüsü: https://developers.google.com/chat.
  • API çağırma gibi özel bir işlevi çalıştıran bir işlem çalıştırın.

Image widget'ında aşağıdaki sınırlamalar vardır:

  • Yalnızca PNG ve JPG resimler desteklenir.
  • Ana makine URL'si HTTPS olmalıdır.
  • Kartların performansını artırmak için önerilen maksimum resim boyutu 2 MB'tır.

Aşağıda, Image widget'ından oluşan bir kart gösterilmektedir. Google Chat geliştirici belgeleri açılış sayfası görselini gösterir. Kullanıcılar resmi tıkladığında Google Chat geliştirici belgeleri yeni bir sekmede açılır.

Resim bileşeni ekleme

Image widget'ı, sınırlı stil seçenekleri olan bir resimdir. ImageComponent widget'ı, bir resme cropStyle ve borderStyle uygulamanıza olanak tanır.

Aşağıdaki örnekte, bir ızgarada iki resim gösterilmektedir. Resimlerden biri kırpılmıştır:

cropStyle uygulayarak bir resim bileşeninin şeklini ayarlayabilirsiniz. Resme uygulayabileceğiniz çeşitli şekiller vardır:

  • Kare kırpma uygulamak için SQUARE simgesini kullanın.
  • Dairesel kırpma uygulamak için CIRCLE simgesini kullanın.
  • Özel en boy oranına sahip dikdörtgen bir kırpma uygulamak için RECTANGLE_CUSTOM simgesini kullanın. Örneğin, 4:3 en boy oranına sahip dikdörtgen bir kırpma uygulamak için RECTANGLE_4_3 kullanabilirsiniz.

Aşağıdaki örnekte, her bir resme farklı bir cropStyle uygulanmış beş resimden oluşan bir tablo gösterilmektedir:

Simge ekle

Icon widget'ı, yerleşik veya özel bir simgeyi temsil eder. Aşağıdakilerden herhangi birini yapmak için kartlara simge ekleyebilirsiniz:

  • Bağımsız bir simge gösterin.
  • DecoratedText widget'ının bir parçası olarak ilgili metnin önünde bir simge gösterir.
  • Bir simgeyi, ButtonList widget'ının parçası olan etkileşimli bir düğme olarak gösterme

Aşağıda, yerleşik simge içeren bir Icon bileşeninden oluşan bir kart gösterilmektedir:

Aşağıdaki tabloda, kart mesajları için kullanılabilen yerleşik simgeler listelenmiştir:

AIRPLANE BOOKMARK
BUS CAR
SAAT CONFIRMATION_NUMBER_ICON
AÇIKLAMA DOLLAR
E-POSTA EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
DAVET ET MAP_PIN
ÜYELİK MULTIPLE_PEOPLE
KİŞİ TELEFON
RESTAURANT_ICON SHOPPING_CART
STAR STORE
BİLET EĞİT
VIDEO_CAMERA VIDEO_PLAY

Karta metin ekleme

Bu bölümde, karta nasıl metin ekleyeceğiniz ve metni nasıl biçimlendireceğiniz açıklanmaktadır.

Biçimlendirilmiş metin paragrafı ekleme

TextParagraph widget'ı, isteğe bağlı HTML biçimlendirmesi içeren bir metin paragrafı gösterir. Bu widget'ların metin içeriğini ayarlarken ilgili HTML etiketlerini eklemeniz yeterlidir. Hangi HTML etiketlerinin desteklendiği hakkında daha fazla bilgi için Kartlarda görünen metni biçimlendirme başlıklı makaleyi inceleyin.

Örneğin, paragraf metni için aşağıdaki biçimlendirme kullanılabilir:

  • HTML <b>, <u>, <i> etiketleriyle kalın, altı çizili veya italik metinler gösterin.
  • HTML <a href="https://www.google.com">hyperlinks</a> ile web sitelerine bağlantı oluşturun.
  • HTML <font color="#ea9999">font tags</font> ile biraz renk ekleyin.

Her TextParagraph widget'ı yeni bir paragraf olarak oluşturulur ve HTML <p> etiketine benzer şekilde düşünülebilir.

Aşağıda, basit HTML biçimlendirmesiyle iki paragraf görüntülemek için kullanılan iki TextParagraph widget'ından oluşan bir kart gösterilmektedir:

Daraltılabilir metin paragrafı ekleme

Daraltılabilir metin paragrafları, kullanıcıların istedikleri zaman daha fazla bilgiye ulaşmalarını sağlar. Bu widget, uzun içerikleri veya seçildiğinde keşfedilebilecek ek ayrıntıları sunmak için idealdir. Dinamik ve etkileşimli bir kullanıcı deneyimi sunar.

Süsleme öğeleri içeren metinleri gösterme

DecoratedText widget'ı, isteğe bağlı düzen ve özelliklerle metin gösterir. Örneğin:

  • startIcon ile metnin önünde icon gösterin.
  • topLabel ile metinden önce bir başlık gösterin.
  • button ile tıklanabilir bir düğme veya switchControl ile açma/kapatma düğmesi ekleyin.

Bilgileri kolay anlaşılır ve etkileşimli bir şekilde sunmanız gerektiğinde DecoratedText widget'ını kullanın. Bu widget; kişi kartları, sipariş durumu güncellemeleri ve iş kaydı bildirimleri gibi kullanım alanları için idealdir.

DecoratedText widget'ı basit metin HTML biçimlendirmesini destekler. Bu widget'ların metin içeriğini ayarlarken ilgili HTML etiketlerini eklemeniz yeterlidir. Hangi HTML etiketlerinin desteklendiği hakkında daha fazla bilgi için Kart metni biçimlendirme başlıklı makaleyi inceleyin.

Aşağıda, e-posta adresi, çevrimiçi durum, telefon numarası ve web sitesi gibi kişi ayrıntılarını görüntülemek için kullanılan bir DecoratedText widget'ından oluşan kart gösterilmektedir:

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.