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

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

מידע נוסף על יצירת כרטיסים זמין במאמר יצירת כרטיסים לאפליקציות ל-Google Chat.

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

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

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

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

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

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

להוסיף תמונה

‫Image widget מציג תמונה בפורמט 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 סימון בדף
BUS CAR
CLOCK CONFIRMATION_NUMBER_ICON
DESCRIPTION DOLLAR
אימייל EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
INVITE MAP_PIN
MEMBERSHIP MULTIPLE_PEOPLE
PERSON PHONE
RESTAURANT_ICON SHOPPING_CART
STAR שמירה
TICKET רכבת
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 מוצג כפסקה חדשה, ואפשר לחשוב עליו כדומה לתג <p> ב-HTML.

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

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

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

הצגת טקסט עם אלמנטים דקורטיביים

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

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

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

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

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

פתרון בעיות

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

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