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

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

מידע נוסף על יצירת כרטיסים זמין במאמר יצירת כרטיסים לאפליקציות ל-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 widget מייצג סמל מוטמע או סמל בהתאמה אישית. אתם יכולים להוסיף סמלים לכרטיסים כדי לבצע כל אחת מהפעולות הבאות:

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

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

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

AIRPLANE BOOKMARK
BUS CAR
CLOCK CONFIRMATION_NUMBER_ICON
תיאור DOLLAR
EMAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
INVITE MAP_PIN
MEMBERSHIP 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 מוצג כפסקה חדשה, ואפשר לחשוב עליו כדומה לתג <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.