Kartlara metin ve resim ekleme

Bu sayfada, kartlara metin ve resim ekleme ve biçimlendirme işlemleri 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üzlerini tasarlamak ve önizlemek üzere Kart Oluşturucu'yu kullanın:

Kart Oluşturucu'yu açma

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

Resim veya simge ekleme

Bu bölümde, kartlara resim, resim bileşenleri ve simgeler 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örüntülenen resmin genişliği, görüntülenen kartın tüm genişliğini doldurur ve yüksekliği, resmin en boy oranını korumak için ayarlanır. Image widget'ı, kullanıcılar resmi tıkladığında gerçekleşen onclick işlemlerini destekler. onclick işlemlerine örnek olarak şunlar verilebilir:

  • OpenLink ile bir köprü açın (ör. Google Chat geliştirici dokümanları 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 resimleri desteklenir.
  • Ana makine URL'si HTTPS olmalıdır.
  • Kartların performanslı olması 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 dokümanları açılış sayfası resmini gösterir. Kullanıcılar resmi tıkladığında Google Chat geliştirici dokümanları yeni bir sekmede açılır.

Resim bileşeni ekleme

Image widget'ı, sınırlı stil içeren bir resimdir. imageCompent widget'ı, cropStyle ve borderStyle'ı bir resme uygulamanıza olanak tanır.

Aşağıdaki örnekte, ızgaradaki iki resimden birinin kırpıldığı gösterilmektedir:

Bir resim bileşeninin şeklini cropStyle uygulayarak ayarlayabilirsiniz. Bir resme uygulanabilecek ç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 simgesini kullanabilirsiniz.

Aşağıdaki örnekte, her bir resme farklı bir cropStyle uygulanmış beş resim gösterilmektedir:

Simge ekle

Icon widget'ı, yerleşik veya özel bir simgeyi temsil eder. Kartlara aşağıdakilerden herhangi birini yapmak için simgeler eklersiniz:

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

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

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

UÇAK BOOKMARK
BUS CAR
SAAT CONFIRMATION_NUMBER_ICON
AÇIKLAMA DOLLAR
EMAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
DAVET MAP_PIN
ÜYELİK MULTIPLE_PEOPLE
PERSON TELEFON
RESTAURANT_ICON SHOPPING_CART
STAR MAĞAZA
TICKET TRAIN
VIDEO_CAMERA VIDEO_PLAY

Karta metin ekleme

Bu bölümde, kartlara nasıl metin ekleneceği ve metinlerin nasıl biçimlendirileceği açıklanmaktadır.

Biçimlendirilmiş metin paragrafı ekleme

TextParagraph widget'ı, isteğe bağlı HTML biçimlendirmesine sahip bir metin paragrafı gösterir. Bu widget'ların metin içeriğini ayarlarken karşılık gelen 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çimlendirmeler kullanılabilir:

  • HTML <b>, <u>, <i> etiketleriyle kalın, altı çizili veya italik metin gösterin.
  • Web sitelerine HTML ile bağlantı verin <a href="https://www.google.com">hyperlinks</a>.
  • 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çimlendirmesine sahip iki paragrafı görüntülemek için kullanılan iki TextParagraph widget'tan oluşan bir kart gösterilmektedir:

Daraltılabilir metin paragrafı ekleme

Daraltılabilir metin paragrafları, kullanıcıların gerektiğinde daha fazla bilgi göstermesine olanak tanır. Bu widget, uzun içerikler veya seçildiğinde keşfedilebilecek ek ayrıntılar sunmak için idealdir. Böylece dinamik ve etkileşimli bir kullanıcı deneyimi oluşturulur.

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

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

  • Metnin önüne startIcon ile icon gösterin.
  • Metinden önce topLabel ile bir başlık gösterin.
  • button ile tıklanabilir bir düğme veya switchControl ile anahtar düğme ekleyin.

Bilgileri kolayca tüketilebilecek ve etkileşimli bir şekilde sunmanız gerektiğinde DecoratedText widget'ını kullanın. Widget, iletişim kartları, sipariş durumu güncellemeleri ve iş kaydı bildirimleri gibi kullanım alanları için mükemmeldir.

DecoratedText widget'ı, basit metin HTML biçimlendirmesini destekler. Bu widget'ların metin içeriğini ayarlarken karşılık gelen HTML etiketlerini eklemeniz yeterlidir. Hangi HTML etiketlerinin desteklendiği hakkında daha fazla bilgi için Kart metni biçimlendirme bölümüne bakın.

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

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.