הוספת טקסט ותמונות לכרטיסים

בדף הזה מוסבר איך להוסיף כרטיסים לטקסט ולתמונות ולעצב אותם.

למידע נוסף על יצירת כרטיסים, ראו יצירת כרטיסים לאפליקציות של Google Chat.

בעזרת הכלי ליצירת כרטיסים תוכלו לעצב ממשקי משתמש ותכונות שליחת הודעות לאפליקציות Chat ולראות תצוגה מקדימה שלהן:

פתיחת הכלי ליצירת כרטיסים

דרישות מוקדמות

אפליקציית Google Chat שמופעלות בה תכונות אינטראקטיביות. כדי ליצור אפליקציית Chat אינטראקטיבית, צריך להשלים את אחד מהמדריכים למתחילים הבאים, בהתאם לארכיטקטורת האפליקציה שבה רוצים להשתמש:

הוספת תמונות או סמלים

בקטע הזה מוסבר איך להוסיף כרטיסים רכיבים חזותיים כמו תמונות, רכיבי תמונה וסמלים.

הוספת תמונה

בווידג'ט Image מוצגת תמונה בפורמט PNG או JPG שמתארחת בכתובת URL מסוג HTTPS. רוחב התמונה המוצגת ממלא את כל רוחב הכרטיס המוצג, והגובה שלה משתנה כדי לשמור על יחס הגובה-רוחב של התמונה. הווידג'ט Image תומך בפעולות onclick שמתרחשות כשמשתמשים לוחצים על התמונה. דוגמאות לפעולות של onclick:

  • פותחים היפר-קישור באמצעות OpenLink, למשל היפר-קישור למסמכי התיעוד למפתחים של Google Chat, https://developers.google.com/chat.
  • להפעיל פעולה שמפעילה פונקציה בהתאמה אישית, כמו קריאה ל-API.

לווידג'ט Image יש את המגבלות הבאות:

  • יש תמיכה רק בתמונות בפורמט PNG ו-JPG.
  • כתובת ה-URL של המארח חייבת להיות HTTPS.
  • כדי להבטיח ביצועים טובים של הכרטיסים, מומלץ להשתמש בתמונות בגודל של עד 2MB.

זהו כרטיס שמכיל ווידג'ט של Image. מוצגת בו התמונה של דף הנחיתה של מסמכי התיעוד למפתחים של Google Chat. כשמשתמשים לוחצים על התמונה, התיעוד למפתחים של Google Chat נפתח בכרטיסייה חדשה.

הוספת רכיב תמונה

הווידג'ט Image הוא תמונה עם עיצוב מוגבל. ווידג'ט imageCompent מאפשר לכם להחיל את cropStyle ו-borderStyle על תמונה.

בדוגמה הבאה מוצגות שתי תמונות בחלונית שבה אחת מהתמונות חתוכה:

כדי לשנות את הצורה של רכיב תמונה, אפשר להחיל עליו cropStyle. יש כמה צורות שאפשר להחיל על תמונה:

  • כדי לבצע חיתוך ריבוע, לוחצים על SQUARE.
  • משתמשים ב-CIRCLE כדי לבצע חיתוך עגול.
  • משתמשים ב-RECTANGLE_CUSTOM כדי להחיל חיתוך מלבני ביחס גובה-רוחב בהתאמה אישית. לדוגמה, אפשר להשתמש ב-RECTANGLE_4_3 כדי להחיל חיתוך מלבני ביחס גובה-רוחב של 4:3.

בדוגמה הבאה מוצגות חמש תמונות בחלונית עם ערך cropStyle שונה לכל תמונה:

הוסף סמל

ווידג'ט Icon מייצג סמל מוטמע או סמל מותאם אישית. אפשר להוסיף סמלים לכרטיסים כדי לבצע את הפעולות הבאות:

  • הצגת סמל עצמאי.
  • להציג סמל לפני טקסט קשור, כחלק מווידג'ט DecoratedText.
  • הצגת סמל כלחצן אינטראקטיבי, כחלק מווידג'ט של ButtonList.

זו דוגמה לכרטיס שמורכב מרכיב Icon עם סמל מובנה:

בטבלה הבאה מפורטים הסמלים המובנים שזמינים להודעות בכרטיסים:

AIRPLANE BOOKMARK
BUS CAR
שעון CONFIRMATION_NUMBER_ICON
תיאור DOLLAR
EMAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
INVITE MAP_PIN
מינוי MULTIPLE_PEOPLE
PERSON PHONE
RESTAURANT_ICON SHOPPING_CART
STAR STORE
TICKET TRAIN
VIDEO_CAMERA VIDEO_PLAY

הוספת טקסט לכרטיס

בקטע הזה נסביר איך להוסיף טקסט לכרטיס ולעצב אותו.

הוספת פסקה של טקסט מעוצב

בווידג'ט TextParagraph מוצגת פסקה של טקסט עם עיצוב HTML אופציונלי. כשמגדירים את תוכן הטקסט של הווידג'טים האלה, פשוט כוללים את תגי ה-HTML המתאימים. מידע נוסף על תגי ה-HTML הנתמכים זמין במאמר עיצוב טקסט שמופיע בכרטיסים.

לדוגמה, אפשר להשתמש בעיצובים הבאים לטקסט של פסקאות:

  • להציג טקסט מודגש, עם קו תחתון או נטוי באמצעות תגי HTML‏ <b>,‏ <u>,‏ <i>.
  • קישור לאתרים באמצעות HTML <a href="https://www.google.com">hyperlinks</a>.
  • מוסיפים צבע באמצעות HTML <font color="#ea9999">font tags</font>.

כל ווידג'ט TextParagraph מוצג כפסקה חדשה, וניתן להתייחס אליו כאל תג HTML‏ <p>.

זהו כרטיס שמורכב משני ווידג'טים מסוג TextParagraph שמשמשים להצגת שני פסקאות עם עיצוב HTML פשוט:

הוספת פסקה של טקסט שניתן לכווץ

קטעי הטקסט שניתן לכווץ מאפשרים למשתמשים לחשוף מידע נוסף על פי דרישה. הווידג'ט הזה מושלם להצגת תוכן ארוך או פרטים נוספים שאפשר להציג כשבוחרים בהם, וכך ליצור חוויית משתמש דינמית ואינטראקטיבית.

הצגת טקסט עם רכיבים דקורטיביים

בווידג'ט DecoratedText מוצג טקסט עם פריסה ויכולות אופציונליות. לדוגמה:

  • להציג icon לפני הטקסט באמצעות startIcon.
  • להציג כותרת לפני הטקסט באמצעות topLabel.
  • מוסיפים לחצן שניתן ללחוץ עליו באמצעות button או מתג החלפת מצב באמצעות switchControl.

מומלץ להשתמש בווידג'ט DecoratedText כשרוצים להציג מידע בצורה אינטראקטיבית וקלה לקריאה. הווידג'ט מתאים לתרחישים לדוגמה כמו כרטיסי אנשי קשר, עדכונים לגבי סטטוס ההזמנה והתראות על כרטיסי עבודה.

הווידג'ט DecoratedText תומך בפורמט HTML פשוט של טקסט. כשמגדירים את תוכן הטקסט של הווידג'טים האלה, פשוט כוללים את תגי ה-HTML המתאימים. למידע נוסף על תגי ה-HTML הנתמכים, ראו עיצוב טקסט בכרטיס.

הכרטיס הבא מורכב מווידג'ט DecoratedText שמשמש להצגת פרטים ליצירת קשר, כמו כתובת אימייל, סטטוס באינטרנט, מספר טלפון ואתר:

פתרון בעיות

כשכרטיס או אפליקציית Google Chat מחזירים שגיאה, בממשק Chat מופיעה ההודעה "משהו השתבש". או "לא ניתן לעבד את הבקשה שלך". לפעמים בממשק המשתמש של Chat לא מוצגת הודעת שגיאה, אבל באפליקציה או בכרטיס של Chat מתקבלת תוצאה לא צפויה. לדוגמה, יכול להיות שלא תוצג הודעה בכרטיס.

יכול להיות שהודעת שגיאה לא תוצג בממשק המשתמש של Chat, אבל כשיומני השגיאות של אפליקציות Chat מופעלים, יהיו זמינות הודעות שגיאה תיאוריות ונתוני יומנים שיעזרו לכם לתקן שגיאות. במאמר פתרון בעיות ושגיאות ב-Google Chat מוסבר איך מציגים, מאתרים באגים ומתקנים שגיאות.