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

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

איך יוצרים כרטיסים לאפליקציות ל-Google Chat?

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

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

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

אפליקציה ל-Google 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 הוא תמונה עם סגנון מוגבל. ווידג'ט של ImageComponent מאפשר להחיל 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
הזמנה MAP_PIN
MEMBERSHIP MULTIPLE_PEOPLE
PERSON טלפון
RESTAURANT_ICON SHOPPING_CART
STAR STORE
TICKET TRAIN
VIDEO_CAMERA VIDEO_PLAY

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

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

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

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

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

  • כדי להציג טקסט מודגש, עם קו תחתון או נטוי, משתמשים בתגי HTML‏ <b>,‏ <u>,‏ <i>.
  • קישור לאתרים באמצעות <a href="https://www.google.com">hyperlinks</a> ב-HTML.
  • הוספת צבע באמצעות 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.