יצירת כרטיסים לאפליקציות ב-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, העמודה השנייה עוברת לשורה חדשה אם רוחב המסך קטן מ-320dp או שווה לו.

בדוגמה הבאה מוצג כרטיס עם ווידג'ט 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.