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

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

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

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

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

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

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

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

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

הוספת כותרת

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

הנה דוגמה ל-CardHeader:

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

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

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

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

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

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

הוספת עמודות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הווידג'ט תומך בהצעות, שעוזרות למשתמשים להזין נתונים אחידים, ובפעולות לשינוי, שהן 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.