שילוב של Dialogflow עם Google Chat

1. לפני שמתחילים

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

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

https://github.com/googleworkspace/appointment-scheduler-codelab

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

כדי להמשיך, עליכם להשלים את ה-Codelabs הבאים:

1. יצירת לוח זמנים לפגישות באמצעות Dialogflow
2. שילוב בין Dialogflow לבין Actions on Google
3. הסבר על ישויות ב-Dialogflow
4. שילוב של Dialogflow עם יומן Google כדי להבין את מילוי ההזמנות

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

מה תלמדו

• איך פורסים ומגדירים אפליקציות ב-Google Chat
• איך יוצרים כרטיסים לרשת המדיה ב-Google Chat
• איך יוצרים מטענים ייעודיים (payloads) בהתאמה אישית במילוי הזמנות ב-Dialogflow

מה תפַתחו

• שילוב בין Dialogflow, Google Chat ויומן Google
• (אופציונלי) שילוב של מפות Google כדי להעשיר יותר את הכרטיסים

למה תזדקק?

• דפדפן אינטרנט וכתובת אימייל להתחברות למסוף Dialogflow
• היומן ו-Google Chat מופעלים בדומיין שלך ב-Google Workspace

אזהרה: כדי להשלים את ה-Codelab הזה צריך להשתמש בחשבון Google Workspace. שימוש בחשבון @gmail.com יגרום לשגיאה כאשר תנסו להפעיל את ה-API.

2. הפעלה והגדרה של Google Chat

נתחיל עם נציג Dialogflow שיצרתם ב-Codelabs הקודם.

1. במסוף של Dialogflow, לוחצים על .
2. בכרטיסייה General, גוללים אל Project ID ולוחצים על Google Cloud .

3. במסוף Google Cloud, לוחצים על תפריט הניווט TODO > ממשקי API שירותים > ספרייה.
4. מחפשים את Google Chat API, לוחצים על Enable כדי להשתמש ב-API בפרויקט ב-Google Cloud.
5. עכשיו נגדיר את אפליקציית Chat. נכנסים לדף Configuration של ה-API. לתשומת ליבך, לכל פרויקט ב-GCP יכולה להיות אפליקציית Chat אחת לכל היותר.

6. השדות של Dialogflow אמורים לאכלס את אפשרויות ההגדרה.
7. שינוי השדה של כתובת ה-URL של הדמות לתמונת הרכב הזו: **https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png**
8. כדי להפעיל את אפליקציית Chat גם לצ'אטים אישיים וגם למרחבים משותפים, בוחרים באפשרות אפשר לשלוח הודעות ישירות לאפליקציה והאפליקציה פועלת במרחבים משותפים עם כמה משתמשים.

לוחצים על Save (שמירה) ויוצאים ממסוף Cloud.

3. שילובים נוספים של Dialogflow

Google Chat מופעל כברירת מחדל, אבל אם אתם רוצים שהבוט יוכל לפעול בכמה פלטפורמות, תוכלו להיכנס לדף שילובים ב-Dialogflow Console ולהפעיל אותו.

4. בדיקה ב-Google Chat

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

1. בפינה השמאלית העליונה של המרחב, לוחצים על התפריט הנפתח ובוחרים באפשרות הוספת אנשים & של Google.
2. צריך לחפש את AppointmentScheduler ולצרף את האפליקציה למרחב המשותף.
3. כדי לבצע פעולות באפליקציה שכבר יצרתם ב-Google, אתם יכולים פשוט להקליד @AppointmentScheduler במרחב.

אפשר לנסות את זה בפלטפורמה הזו עם אותו קלט מה-Codelabs הקודמים:

1. משתמש: " @AppointmentScheduler קביעת פגישה לרישום רכב בשעה 2:00 מחר בשעה 14:00".
2. אפליקציית Chat: "אוקיי, אבדוק אם נוכל להתאים לך. זה בסדר, 24 באפריל, 14:00!"

בשלב הבא נשתמש בהתאמות האישיות ב-Google Chat כדי להוסיף תשובות עשירות יותר.

5. כרטיסי Google Chat בהתאמה אישית

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

תגובת הטקסט הבסיסית נראית כך:

 {
  "text": "Your pizza delivery is here!"
}

תגובת כרטיס לדוגמה עם ווידג'טים נראית כך:

{
  "cards": [
    {
      "sections": [
        {
          "widgets": [
            {
              "image": { "imageUrl": "https://..." }
            },
            {
              "buttons": [
                {
                  "textButton": {
                    "text": "OPEN IN GOOGLE MAPS",
                    "onClick": {
                      "openLink": {
                        "url": "https://..."
                      }
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

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

6. מטענים ייעודיים (payloads) וכרטיסים של צ'אטים בהתאמה אישית

מטענים ייעודיים (payloads) בהתאמה אישית ב-Dialogflow מאפשרים להציג הודעות עם תגובות מתקדמות ספציפיות לפלטפורמה. כאן נוסיף את כרטיסי ה-JSON של Hangouts Chat, שם הם יוצגו למשתמש חזרה מהנציג.

נתחיל בהוספה של כרטיס בסיסי לכוונת ההצטרפות. במסוף Dialogflow, עוברים ל-Default Default Intent וגוללים למטה לקטע 'תשובות'.

לוחצים על Google Chat ומבטלים את הבחירה באפשרות שימוש בתשובות מהכרטיסייה 'ברירת מחדל' כתשובות הראשונות, ואז לוחצים על הוספת תשובות > מטען ייעודי (payload) בהתאמה אישית.

יוצג לכם שלד של JSON.

צריך להעתיק ולהדביק את הקוד הבא. הגדרנו כרטיס עם ווידג'ט TextParagraph.

{
 "hangouts": {
   "header": {
     "title": "Appointment Scheduler"
   },
   "sections": [
     {
       "widgets": [
         {
           "textParagraph": {
             "text": "Welcome, I am the scheduler agent. Please request an appointment type and time."
           }
         }
       ]
     }
   ]
 }
}

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

בשלב הבא נוסיף מטען ייעודי (payload) מותאם אישית בקוד מילוי ההזמנה, כדי שנוכל ליצור באופן דינמי את התוכן באמצעות הקוד שלנו.

7. הוספת כרטיס ב'מילוי הזמנה'

עכשיו ניצור כרטיס עם כמה ווידג'טים להצגת פגישה שנקבעה. נוסיף פונקציה בשם getGoogleChatCard שבה נעבד את הקלט: appointmentType, date ו-time.

מוסיפים את הפונקציה שלמטה לקוד ב-index.js שלמטה.

function getGoogleChatCard(appointmentType, date, time) {
   const cardHeader = {
     title: 'Appointment Confirmation',
     subtitle: appointmentType,
     imageUrl: ICON_IMAGE_URL,
     imageStyle: 'IMAGE',
   };
    const dateWidget = {
     keyValue: {
       content: 'Date',
       bottomLabel: date,
     },
   };
    const timeWidget = {
     keyValue: {
       content: 'Time',
       bottomLabel: time,
     },
   };

    const buttonWidget = {
     buttons: [
       {
         textButton: {
           text: 'View Appointment',
           onClick: {
             openLink: {
               url: CALENDAR_URL,
             },
           },
         },
       },
     ],
   };
    const infoSection = {widgets: [dateWidget, timeWidget,
     buttonWidget]};
    return {
     'hangouts': {
       'name': 'Confirmation Card',
       'header': cardHeader,
       'sections': [infoSection],
     },
   };
 }

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

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

return createCalendarEvent(dateTimeStart, dateTimeEnd, appointmentType).then(() => {
   agent.add(`Ok, let me see if we can fit you in. ${appointmentTimeString} is fine!.`);

   const dateString = dateTimeStart.toLocaleString(
     'en-US',
       {month: 'long', day: 'numeric'},
   );
   const dateParts = appointmentTimeString.split(',');
   const json = getGoogleChatCard(appointmentType, dateParts[0], dateParts[1]);
   const payload = new Payload(
       'hangouts',
       json,
       {rawPayload: true, sendAsMessage: true},
   );
   agent.add(payload);

 }).catch(() => {
   agent.add(`I'm sorry, there are no slots available for ${appointmentTimeString}.`);
 });
}

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

8. (אופציונלי) מוסיפים ווידג'ט של תמונה במפות Google

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

1. מפעילים את Maps Static API במסוף Google Cloud, בדיוק כמו שהפעלתם את ממשקי ה-API של יומן Google ו-Google Chat.
2. ליצור ולשמור מפתח API לפרויקט שלך בממשקי API שירותים במסוף. מידע נוסף על אחזור ושיטות מומלצות לגבי מפתחות API באמצעות מפות Google זמין כאן.
3. מעתיקים את מפתח ה-API ואת הקבועים הבאים לחלק העליון של הקובץ ב-index.js

const API_KEY = 'YOUR_API_KEY';
const MAP_IMAGE_URL = 'https://maps.googleapis.com/maps/api/staticmap?center=Googleplex&zoom=14&size=200x200&key=' + API_KEY;
const ICON_IMAGE_URL = 'https://fonts.gstatic.com/s/i/googlematerialicons/calendar_today/v5/black-48dp/1x/gm_calendar_today_black_48dp.png';
const CALENDAR_URL = 'YOUR_CALENDAR_URL';

4. בשלב הבא, מוסיפים ווידג'ט של תמונה לפונקציה getGoogleChatCard

  const mapImageWidget = {
    'image': {
      'imageUrl': MAP_IMAGE_URL,
      'onClick': {
        'openLink': {
          'url': MAP_IMAGE_URL,
        },
      },
    },
  };

5. מוסיפים את mapImageWidget לרשימת הווידג'טים במשתנה infoSection, שומרים ופורסים.
6. כדאי לבדוק את אפליקציית Chat במרחב ה-Chat כדי לקבל תשובה עשירה על סמך הקוד שהוספת היום.

9. הסרת המשאבים

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

מחיקת הנציג של Dialogflow

1. לוחצים על הסמל ליד הנציג הקיים.

2. בכרטיסייה כללי, גוללים לחלק התחתון ולוחצים על מחיקת הנציג.
3. מקלידים Delete בתיבת הדו-שיח ולוחצים על מחיקה.

10. מזל טוב

יצרת צ'אט בוט ב-Dialogflow ושילבת אותו עם יומן Google, ועכשיו Google Chat Pro!

מידע נוסף

מידע נוסף זמין בדוגמאות בדף Dialogflow GitHub.