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

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

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

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

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

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

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

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

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

הוספת כותרת

ווידג'ט CardHeader מייצג את הכותרת של כרטיס. הכותרות יכולות לכלול כותרת, כותרת משנה ותמונת אווטאר לכרטיס.

דוגמה ל-CardHeader:

הוספה של קטע כרטיס אחד או יותר

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

הנה דוגמה ל-CardSection שמכיל שני ווידג'טים של textParagraph:

הוספת קו מפריד אופקי בין הווידג'טים

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

הכרטיס הבא מורכב מווידג'ט divider בין סוגים אחרים של ווידג'טים:

הוספת עמודות

בווידג'ט columns מוצגות עד 2 עמודות בכרטיס. אפשר להוסיף ווידג'טים לכל עמודה. הווידג'טים מופיעים בסדר שבו הם צוינו. כדי לכלול יותר מ-2 עמודות או להשתמש בשורות, צריך להשתמש בווידג'ט grid.

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

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

הגדרת רוחב העמודה

העמודות מוצגות זו לצד זו. אפשר להתאים אישית את הרוחב של כל עמודה באמצעות השדה horizontalSizeStyle. אם רוחב המסך של המשתמש צר מדי, העמודה השנייה מוצגת מתחת לעמודה הראשונה:

  • באינטרנט, העמודה השנייה עוברת לשורה חדשה אם רוחב המסך קטן מ-480 פיקסלים או שווה לו.
  • במכשירי iOS, העמודה השנייה עוברת לשורה חדשה אם רוחב המסך קטן מ-300pt או שווה לו.
  • במכשירי Android, העמודה השנייה עוברת לשורה חדשה אם רוחב המסך קטן מ-320‎ dp או שווה לו.

בדוגמה הבאה מוצג כרטיס עם ווידג'ט columns שמציג 2 עמודות של טקסט עם 4 פריטים בעמודות. לכל פריט בעמודות מוחל התג horizontalSizeStyle כדי לשנות את כמות המקום שהטקסט תופס בכל עמודה:

  • בפסקה הראשונה של הטקסט נעשה שימוש ב-FILL_MINIMUM_SPACE כדי למלא עד 30% מרוחב הכרטיס.
  • בפסקה השנייה של הטקסט נעשה שימוש ב-FILL_AVAILABLE_SPACE כדי למלא את הרווח הזמין ברוחב הכרטיס. בדוגמה הזו, הוא ממלא 70% מהרוחב של הכרטיס.
  • בפסקה השלישית של הטקסט לא מוגדר horizontalSizeStyle ולכן ברירת המחדל היא מילוי השטח הפנוי של הכרטיס.
  • בפסקה הרביעית של הטקסט נעשה שימוש ב-FILL_MINIMUM_SPACE כדי למלא עד 30% מרוחב הכרטיס.

הגדרת היישור האופקי של עמודה

כדי ליישר ווידג'טים אופקית לשמאל, לימין או למרכז של עמודה, צריך להגדיר את השדה horizontalAligment. אם השדה horizontalAlignment לא מוגדר, הווידג'טים מיושרים לימין בעמודה.

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

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

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

הגדרת היישור האנכי של עמודה

אתם יכולים ליישר ווידג'טים אנכית לחלק העליון, התחתון או המרכז של עמודה על ידי הגדרת השדה verticalAlignment. אם השדה verticalAlignment לא מוגדר, הווידג'טים בעמודה מיושרים לחלק העליון.

בדוגמה הבאה, הטקסט בעמודה מיושר אנכית לחלק העליון:

בדוגמה הבאה מוצג יישור אנכי של טקסט בעמודה במרכז:

בדוגמה הבאה, הטקסט בעמודה מיושר אנכית למטה:

הוספת רשת להצגת אוסף פריטים

בווידג'ט grid מוצגת רשת עם אוסף של פריטים. תצוגת משבצות תומכת בכל מספר של עמודות ופריטים. מספר השורות נקבע על ידי חלוקת מספר הפריטים במספר העמודות. רשת עם 10 פריטים ו-2 עמודות כוללת 5 שורות. רשת עם 11 פריטים ו-2 עמודות כוללת 6 שורות.

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

הדוגמה הבאה היא של רשת עם 2 עמודות ופריט אחד:

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

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

הוספת גבול לרשת או לעמודה

לפריטים שמופיעים בווידג'ט column או grid, אפשר להוסיף גבול לרכיבי ממשק המשתמש האלה על ידי הגדרה של שדה borderType ושל שדה borderStyle. אם לא מוגדר שדה borderStyle, ברירת המחדל היא שלא יוצג גבול. אפשר להגדיר borderType כדי להחיל אותו על כל הפריטים בווידג'ט, או להחיל את הסגנון על כל פריט בנפרד בווידג'ט.

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

בדוגמה הבאה מוצגת רשת עם 3 עמודות, תמונה בכל משבצת וסגנון וסוג הגבול מוגדרים בנפרד. התמונה הראשונה כוללת גבול שמוגדר כ-STROKE. בתמונה השנייה יש גבול שמוגדר כ-NO_BORDER. בתמונה השלישית לא הוגדר גבול.

הוספת קרוסלה

בווידג'ט Carousel מוצג אוסף של CarouselCard אובייקטים שאפשר לגלול אותם במסך ומחוצה לו. אפשר להוסיף כמה ווידג'טים לכל CarouselCard.

ווידג'ט CardFixedFooter מייצג את הכותרת התחתונה של הודעת דו-שיח שנשלחת על ידי אפליקציית Chat. הכותרות התחתונות יכולות לכלול לחצן ראשי ולחצן משני.

הווידג'ט CardFixedFooter זמין רק עבור תיבות דו-שיח.

הנה דוגמה לווידג'ט CardFixedFooter עם שני לחצנים:

פתרון בעיות

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

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