בדף הזה מוסבר איך לבנות דף בית לצ'אטים ישירים עם אפליקציית Google Chat. דף הבית, שנקרא דף הבית של האפליקציה ב-Google Chat API, הוא ממשק כרטיסים שאפשר להתאים אישית ומופיע בכרטיסייה דף הבית של מרחבים לצ'אטים ישירים בין משתמש לבין אפליקציית Chat.
בדף הבית של האפליקציה אפשר לשתף טיפים לאינטראקציה עם אפליקציית Chat, או לאפשר למשתמשים לגשת לשירות או כלי חיצוני ולהשתמש בהם מ-Chat.
אתם יכולים להשתמש בכלי ליצירת כרטיסים כדי לעצב ולראות תצוגה מקדימה של הודעות וממשקי משתמש לאפליקציות ל-Chat:
פתיחת הכלי ליצירת כרטיסיםדרישות מוקדמות
Node.js
אפליקציית Google Chat שמקבלת אירועי אינטראקציה ומגיבה להם. כדי ליצור אפליקציה אינטראקטיבית ל-Chat באמצעות שירות HTTP, אפשר לעיין במדריך להתחלה מהירה.
Python
אפליקציית Google Chat שמקבלת אירועי אינטראקציה ומגיבה להם. כדי ליצור אפליקציה אינטראקטיבית ל-Chat באמצעות שירות HTTP, אפשר לעיין במדריך להתחלה מהירה.
Java
אפליקציית Google Chat שמקבלת אירועי אינטראקציה ומגיבה להם. כדי ליצור אפליקציה אינטראקטיבית ל-Chat באמצעות שירות HTTP, אפשר לעיין במדריך להתחלה מהירה.
Apps Script
אפליקציית Google Chat שמקבלת אירועי אינטראקציה ומגיבה להם. כדי ליצור אפליקציה אינטראקטיבית ל-Chat ב-Apps Script, צריך להשלים את המדריך להתחלה מהירה.
הגדרת דף הבית של האפליקציה ב-Chat
כדי לתמוך במסך הבית של האפליקציה, צריך להגדיר את אפליקציית Chat כך שתקבל אירועי אינטראקציה מסוג APP_HOME. אפליקציית Chat מקבלת את האירוע הזה בכל פעם שמשתמש לוחץ על הכרטיסייה מסך הבית בצ'אט ישיר עם אפליקציית Chat.
כדי לעדכן את הגדרות התצורה במסוף Google Cloud:
- ב-מסוף Google Cloud, לוחצים על Menu (תפריט) > APIs & Services (ממשקי API ושירותים) > Enabled APIs & Services (ממשקי API ושירותים מופעלים) > Google Chat API (ממשק Google Chat API) > Configuration (הגדרה). כניסה להגדרות של Chat API
- בקטע תכונות אינטראקטיביות, עוברים לקטע פונקציונליות ובוחרים באפשרות תמיכה בדף הבית של האפליקציה.
- אם אפליקציית Chat שלכם משתמשת בשירות HTTP, עוברים אל הגדרות החיבור ומציינים נקודת קצה בשדה כתובת דף הבית של האפליקציה. אפשר להשתמש באותה כתובת URL שציינתם בשדה כתובת URL של נקודת קצה HTTP.
- לוחצים על שמירה.
יצירת כרטיס לדף הבית של האפליקציה
כשמשתמש פותח את מסך הבית של האפליקציה, אפליקציית Chat צריכה לטפל באירוע האינטראקציה APP_HOME על ידי החזרת מופע של RenderActions עם ניווט pushCard ו-Card. כדי ליצור חוויה אינטראקטיבית, הכרטיס יכול להכיל ווידג'טים אינטראקטיביים כמו לחצנים או שדות להזנת טקסט, שאפליקציית Chat יכולה לעבד ולהגיב להם באמצעות כרטיסים נוספים או תיבת דו-שיח.
בדוגמה הבאה, אפליקציית Chat מציגה כרטיס ראשוני בדף הבית של האפליקציה, שבו מוצגת השעה שבה הכרטיס נוצר ולחצן. כשמשתמש לוחץ על הכפתור, אפליקציית Chat מחזירה כרטיס מעודכן שבו מוצגת השעה שבה הכרטיס המעודכן נוצר.
Node.js
Python
Java
Apps Script
מטמיעים את הפונקציה onAppHome שמופעלת אחרי כל אירועי האינטראקציה APP_HOME:
בדוגמה הזו נשלחת הודעת כרטיס על ידי החזרת JSON של כרטיס. אפשר גם להשתמש בשירות הכרטיסים של Apps Script.
תגובה לאינטראקציות במסך הבית של האפליקציה
אם הכרטיס הראשי של האפליקציה מכיל ווידג'טים אינטראקטיביים, כמו לחצנים או קלט לבחירה, אפליקציית Chat צריכה לטפל באירועי האינטראקציה שקשורים אליהם על ידי החזרת מופע של RenderActions עם ניווט updateCard. מידע נוסף על טיפול בווידג'טים אינטראקטיביים זמין במאמר עיבוד מידע שהוזן על ידי משתמשים.
בדוגמה הקודמת, הכרטיס הראשוני של מסך הבית של האפליקציה כלל לחצן. בכל פעם שמשתמש לוחץ על הלחצן, CARD_CLICKED אירוע אינטראקציה updateAppHome מפעיל את הפונקציה לרענון הכרטיס של מסך הבית באפליקציה, כמו שמוצג בקוד הבא:
Node.js
Python
Java
Apps Script
בדוגמה הזו נשלחת הודעת כרטיס על ידי החזרת JSON של כרטיס. אפשר גם להשתמש בשירות הכרטיסים של Apps Script.
פתיחת תיבות דו-שיח
אפליקציית Chat יכולה גם להגיב לאינטראקציות בדף הבית של האפליקציה על ידי פתיחת תיבות דו-שיח.
כדי לפתוח תיבת דו-שיח ממסך הבית של האפליקציה, מעבדים את אירוע האינטראקציה שקשור אליה על ידי החזרת renderActions עם ניווט updateCard שמכיל אובייקט Card. בדוגמה הבאה, אפליקציית Chat מגיבה ללחיצה על לחצן בכרטיס של מסך הבית של האפליקציה על ידי עיבוד של אירוע האינטראקציה CARD_CLICKED ופתיחה של תיבת דו-שיח:
{ renderActions: { action: { navigations: [{ updateCard: { sections: [{
header: "Add new contact",
widgets: [{ "textInput": {
label: "Name",
type: "SINGLE_LINE",
name: "contactName"
}}, { textInput: {
label: "Address",
type: "MULTIPLE_LINE",
name: "address"
}}, { decoratedText: {
text: "Add to favorites",
switchControl: {
controlType: "SWITCH",
name: "saveFavorite"
}
}}, { decoratedText: {
text: "Merge with existing contacts",
switchControl: {
controlType: "SWITCH",
name: "mergeContact",
selected: true
}
}}, { buttonList: { buttons: [{
text: "Next",
onClick: { action: { function: "openSequentialDialog" }}
}]}}]
}]}}]}}}
כדי לסגור תיבת דו-שיח, מעבדים את אירועי האינטראקציה הבאים:
-
CLOSE_DIALOG: סוגר את תיבת הדו-שיח וחוזר לכרטיס הבית של האפליקציה ב-Chat. -
CLOSE_DIALOG_AND_EXECUTE: סוגר את תיבת הדו-שיח ומרענן את כרטיס הבית של האפליקציה.
בדוגמת הקוד הבאה נעשה שימוש ב-CLOSE_DIALOG כדי לסגור תיבת דו-שיח ולחזור לכרטיס הבית של האפליקציה:
{ renderActions: { action: {
navigations: [{ endNavigation: { action: "CLOSE_DIALOG" }}]
}}}
כדי לאסוף מידע מהמשתמשים, אפשר גם ליצור דיאלוגים רציפים. כדי ללמוד איך ליצור דיאלוגים רציפים, אפשר לעיין במאמר בנושא פתיחה של דיאלוגים ומענה להם.
נושאים קשורים
- דוגמאות לאפליקציות ל-Chat שמשתמשות בדף הבית של האפליקציה.
- פתיחה של תיבות דו-שיח ומענה להן.