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

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

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

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

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

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

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

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

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

הוספת כותרת

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

דוגמה ל-CardHeader:

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

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

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

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

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

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

הוספת עמודות

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

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

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

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

העמודות מוצגות זו לצד זו. אפשר להתאים אישית את הרוחב של כל עמודה באמצעות השדה 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 שורות.

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

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

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

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

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

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

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

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

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

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

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

פתרון בעיות

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

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