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

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

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

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

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

מטוס סימנייה
אוטובוס מכונית
שעון CONFIRMATION_NUMBER_ICON
תיאור דולר ארה"ב
אימייל EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
קידום מלונות HOTEL_ROOM_TYPE
הזמנה MAP_PIN
מועדון החברים MULTIPLE_PEOPLE
אדם טלפון
RESTAURANT_ICON SHOPPING_CART
STAR חנות
כרטיס אימון
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 או אפליקציית Google Chat הפונקציה card מחזירה שגיאה, בממשק של Chat מוצגת ההודעה "משהו השתבש". או "לא ניתן לעבד את הבקשה שלך". לפעמים בממשק המשתמש של Chat לא מציגה הודעות שגיאה, אבל אפליקציית Chat או והכרטיס מפיק תוצאה לא צפויה: לדוגמה, הודעה בכרטיס יופיעו.

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