הדרכה מעשית: יצירת מדריך לטלוויזיה ב-Google Chat באמצעות Google Workspace ו-Dialogflow

1. מבוא

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

מה תפַתחו

אנחנו ניצור צ'אטבוט של Dialogflow שיוכל להגיב בדומיין Google Workspace שלכם עם תשובות שניתנות להתאמה אישית.

2e16770ceed20cb2.png

מה תלמדו

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

הדרישות

  • משלימים את ה-codelab הראשון בסדרה הזו שכוללת 2 חלקים.
  • דפדפן אינטרנט וכתובת אימייל כדי להיכנס למסוף Dialogflow
  • ‫Chat מופעל בדומיין שלכם ב-Google Workspace

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

נתחיל עם סוכן Dialogflow שיצרתם ב-codelabs הקודמים.

  1. ב-Dialogflow console, לוחצים על d7d792687e597dd5.png.
  2. בכרטיסייה כללי, גוללים אל מזהה הפרויקט ולוחצים על Google Cloud f2bffd4fcdb84fa9.png.

cb893582402e4092.png

  1. במסוף Google Cloud, לוחצים על תפריט הניווט ☰ > APIs & Services (ממשקי API ושירותים) > Library (ספרייה).
  2. מחפשים את Google Chat API ולוחצים על הפעלה כדי להשתמש ב-API בפרויקט בענן של Google.
  3. עכשיו נגדיר את אפליקציית Google Chat. עוברים לדף Configuration (הגדרה) של ה-API. חשוב לזכור שבכל פרויקט ב-GCP יכולה להיות אפליקציית צ'אט אחת ל-Google Chat לכל היותר. 85794eaaaedc7eb5.png
  4. שדות Dialogflow אמורים להתמלא באפשרויות ההגדרה.
  5. משנים את השדה Avatar URL (כתובת ה-URL של האווטאר) לתמונה של הטלוויזיה: [https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png](https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png)
  6. הפעלת אפליקציית Google Chat בצ'אטים ישירים ובמרחבים 9d439f492c8b71bb.png

לוחצים על שמירה ויוצאים מ-Cloud Console.

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

63296523b678ff8d.png

3. בדיקה ב-Google Chat

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

f0dd1f5e205ef8e2.png

מחפשים את tvguide ומוסיפים את אפליקציית Google Chat למרחב.

e60fa78fdd020304.png

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

e8399e33185c63ec.png

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

4. כרטיסים מותאמים אישית ב-Google Chat

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

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

{
  "text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
}

e8399e33185c63ec.png

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

{
  "cards": [
    {
      "sections": [
        {
          "widgets": [
            {
              "image": { "imageUrl": "https://freesvg.org/img/fttv.png" }
            },
            {
              "buttons": [
                {
                  "textButton": {
                    "text": "Check Listings",
                    "onClick": {
                      "openLink": {
                        "url": "https://tvlistings.com/..."
                      }
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

c390a0cb75486fe0.png

5. מטענים ייעודיים (payloads) וכרטיסים ב-Chat

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

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

9624208f0d266afd.png

לוחצים על Google Chat, מבטלים את הסימון של Use responses from the DEFAULT tab as the first responses (שימוש בתשובות מהכרטיסייה DEFAULT כתשובות הראשונות), ואז לוחצים על ADD RESPONSES > Custom Payload (הוספת תשובות > מטען ייעודי (payload) בהתאמה אישית).

יוצג מבנה JSON.

bb064f7ec1237fd3.png

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

{
  "hangouts": {
    "header": {
      "title": "TV Guide App"
    },
    "sections": [
      {
        "widgets": [
          {
            "textParagraph": {
              "text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
            }
          }
        ]
      }
    ]
  }
}

לוחצים על שמירה ועוברים למרחב הצ'אט של הבדיקה כדי לראות את הכרטיס הזה. במרחב הצ'אט, מקלידים '‎@tvguide hello'

6941003ee06e4655.png

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

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

6. הוספת כרטיס בתהליך השלמת ההזמנה

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

מוסיפים את הפונקציה שבהמשך לקוד בקובץ index.js בחלק התחתון.

/**
*  Return a Google Chat Card in JSON
* @param {Object} JSON tv results
*/
var getGoogleCard = function(tvresults) {
   console.log('In Google Chat card, tv results: ' + JSON.stringify(tvresults));

   if(tvresults['Listings'][0]) {
       let channelName = tvresults['Name'];
       let currentlyPlayingTime = getShowTime(tvresults['Listings'][0]['Time']);
       let laterPlayingTime = getShowTime(tvresults['Listings'][1]['Time']);

       const cardHeader = {
           title: channelName + ' Shows',
       };

       const currentWidget = {
           keyValue: {
               content: `${tvresults['Listings'][0]['Title']}`,
               bottomLabel: `${currentlyPlayingTime}`,
           }
       };

       const laterWidget = {
           keyValue: {
               content: `${tvresults['Listings'][1]['Title']}`,
               bottomLabel: `${laterPlayingTime}`
           }
       };

       const buttonWidget = {
           buttons: [
             {
               textButton: {
                 text: 'View Full Listing',
                 onClick: {
                   openLink: {
                     url: TVGUIDE_WEBSERVICE + '/' + tvresults['ID'],
                   },
                 },
               },
             },
           ],
         };

       return {
           'hangouts': {
               header: cardHeader,
               sections: [{widgets: [currentWidget, laterWidget, buttonWidget]}],
           }
       };
   } else {
       const errorWidget = {
           keyValue: {
               content: 'No listings found',
               bottomLabel: 'Please try again.'
           }
       };
       return {
           'hangouts': {
               'sections': {widgets: [errorWidget]},
           }
       };
   }
}

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

function channelHandler(agent) {
   console.log('in channel handler');
   var jsonResponse = `{"ID":10,"Listings":[{"Title":"Catfish Marathon","Date":"2018-07-13","Time":"11:00:00"},{"Title":"Videoclips","Date":"2018-07-13","Time":"12:00:00"},{"Title":"Pimp my ride","Date":"2018-07-13","Time":"12:30:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:30:00"},{"Title":"Daria","Date":"2018-07-13","Time":"13:45:00"},{"Title":"The Real World","Date":"2018-07-13","Time":"14:00:00"},{"Title":"The Osbournes","Date":"2018-07-13","Time":"15:00:00"},{"Title":"Teenwolf","Date":"2018-07-13","Time":"16:00:00"},{"Title":"MTV Unplugged","Date":"2018-07-13","Time":"16:30:00"},{"Title":"Rupauls Drag Race","Date":"2018-07-13","Time":"17:30:00"},{"Title":"Ridiculousness","Date":"2018-07-13","Time":"18:00:00"},{"Title":"Punk'd","Date":"2018-07-13","Time":"19:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"20:00:00"},{"Title":"MTV Awards","Date":"2018-07-13","Time":"20:30:00"},{"Title":"Beavis & Butthead","Date":"2018-07-13","Time":"22:00:00"}],"Name":"MTV"}`;
   var results = JSON.parse(jsonResponse);
   var listItems = {};
   textResults = getListings(results);


   for (var i = 0; i < results['Listings'].length; i++) {
       listItems[`SELECT_${i}`] = {
           title: `${getShowTime(results['Listings'][i]['Time'])} - ${results['Listings'][i]['Title']}`,
           description: `Channel: ${results['Name']}`
       }
   }

   if (agent.requestSource === 'hangouts') {
        const cardJSON = getGoogleCard(results);
        const payload = new Payload(
           'hangouts',
           cardJSON,
           {rawPayload: true, sendAsMessage: true},
       );
       agent.add(payload);
   } else {
       agent.add(textResults);
   }
}

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

עכשיו אפשר לחזור למרחב הצ'אט ולבדוק את זה. מקלידים @tvguide What is on MTV?. אמורה להופיע תגובה דומה.

2e16770ceed20cb2.png

7. מזל טוב

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

מה השלב הבא?

נהניתם מה-Code Lab הזה? כדאי לבדוק את המעבדות הנהדרות האלה!