عملی: یک راهنمای تلویزیونی Google Chat با Google Workspace و Dialogflow ایجاد کنید

1. مقدمه

اکنون که یک ربات گفتگوی Dialogflow برای یک راهنمای تلویزیون در لبه کد قبلی ایجاد کرده‌اید، به شما نشان می‌دهیم که چگونه آن را به چت Google گسترش دهید. شما یاد خواهید گرفت که چگونه کارت های پویا و تعاملی برای این پلتفرم بسازید و ادغام های متعدد داشته باشید.

آنچه خواهید ساخت

ما یک ربات گفتگوی Dialogflow می‌سازیم که می‌تواند در دامنه Google Workspace شما با پاسخ‌های قابل تنظیم پاسخ دهد.

2e16770ceed20cb2.png

چیزی که یاد خواهید گرفت

  • نحوه استقرار و پیکربندی یک برنامه Google Chat
  • نحوه ساخت کارت های نمایش در گوگل چت
  • نحوه ایجاد بارهای سفارشی در انجام Dialogflow

آنچه شما نیاز دارید

  • اولین کد لبه را در این مجموعه 2 قسمتی کامل کنید.
  • یک مرورگر وب و یک آدرس ایمیل برای ورود به کنسول Dialogflow
  • گپ در دامنه Google Workspace شما فعال شد

2. Google Chat را فعال و پیکربندی کنید

ما با Dialogflow Agent که در کدهای قبلی ایجاد کرده اید شروع می کنیم.

  1. در کنسول Dialogflow ، کلیک کنید d7d792687e597dd5.png .
  2. در برگه عمومی ، به شناسه پروژه بروید، سپس روی Google Cloud کلیک کنید f2bffd4fcdb84fa9.png .

cb893582402e4092.png

  1. در Google Cloud Console، روی منوی پیمایش ☰ > APIs & Services > Library کلیک کنید.
  2. «Google Chat API» را جستجو کنید، سپس روی «فعال» کلیک کنید تا از API در پروژه Google Cloud خود استفاده کنید.
  3. اکنون ما برنامه Google Chat شما را پیکربندی می کنیم، به صفحه پیکربندی برای API بروید. لطفاً توجه داشته باشید که هر پروژه GCP حداکثر می‌تواند یک برنامه Google Chat داشته باشد. 85794eaaaedc7eb5.png
  4. شما باید فیلدهای Dialogflow را ببینید که گزینه های پیکربندی را پر می کنند.
  5. فیلد 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

روی Save کلیک کنید و از Cloud Console خارج شوید.

علاوه بر این ادغام های Dialogflow. Google Chat به طور پیش‌فرض فعال است، اما اگر می‌خواهید چندین پلتفرم را ارائه دهید، می‌توانید به صفحه ادغام‌ها در Dialogflow Console بروید تا آنها را فعال کنید.

63296523b678ff8d.png

3. در چت گوگل تست کنید

اکنون که برنامه Google Chat شما پیکربندی شده است، بیایید آن را به فضای چت اضافه کنیم و آن را آزمایش کنیم. Google Chat را باز کنید و یک فضای چت آزمایشی ایجاد کنید. در گوشه سمت راست بالای فضا، روی منوی کشویی کلیک کنید و افزودن افراد و برنامه‌ها را انتخاب کنید.

f0dd1f5e205ef8e2.png

tvguide را جستجو کنید و برنامه Google Chat را به فضا اضافه کنید.

e60fa78fdd020304.png

اکنون می توانید با تایپ @tvguide در این فضا، با برنامه Google Chat که قبلاً در Google Chat ساخته اید تعامل داشته باشید. برای تست @tvguide hello تایپ کنید.

e8399e33185c63ec.png

سپس از سفارشی‌سازی‌های موجود در Google Chat برای افزودن پاسخ‌های غنی‌تر استفاده می‌کنیم.

4. کارت های چت سفارشی گوگل

با Google Chat، می‌توانید از برنامه‌تان بخواهید که یک پاسخ متنی اولیه یا یک پاسخ کارتی را به کاربر بازگرداند که به شما امکان می‌دهد یک رابط غنی‌تر ساخته شده توسط ویجت‌های مختلف از جمله تصاویر، دکمه‌ها و غیره. ، فقط باید JSON را با فرمت صحیح برگردانید تا در چت Google در کد تکمیل شما نمایش داده شود. بیایید به چند نمونه 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. بارهای سفارشی و کارت های چت

بارهای سفارشی در Dialogflow به پیام‌های پاسخ غنی مخصوص پلتفرم اجازه می‌دهند. اینجاست که ما کارت‌های JSON چت Hangout خود را اضافه می‌کنیم و در آنجا توسط نماینده به کاربر ارائه می‌شود.

بیایید با اضافه کردن یک کارت اصلی برای هدف خوش آمد گویی شروع کنیم. در کنسول Dialogflow، به پیش‌فرض پیش‌فرض خوش‌آمدگویی بروید و به بخش پاسخ‌ها بروید.

9624208f0d266afd.png

روی گپ Google کلیک کنید و گزینه Use Responses را از برگه DEFAULT به عنوان اولین پاسخ ها بردارید، سپس ADD RESPONSES > Custom 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

در مرحله بعد یک بار سفارشی به کد تکمیل اضافه می کنیم تا بتوانیم به صورت پویا محتوا را با کد خود تولید کنیم.

برای کسب اطلاعات بیشتر در مورد کارت لطفا به مستندات قالب پیام مراجعه کنید. در بخش بعدی کارت ها را اضافه می کنیم.

6. اضافه کردن یک کارت در حال تحقق

اکنون یک کارت با ویجت ها برای نمایش لیست های تلویزیونی ایجاد می کنیم. بیایید تابعی به نام getGoogleCard اضافه کنیم که در آن اطلاعات فهرست به دست آمده را ارائه خواهیم کرد. ما از ویجت های keyValue و دکمه برای ساخت پاسخ کارت استفاده خواهیم کرد.

تابع زیر را به کد خود در 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 ایجاد کرده اید!

بعدش چی؟

از این آزمایشگاه کد لذت بردید؟ نگاهی به این آزمایشگاه های عالی بیندازید!