ادغام Dialogflow با Google Chat

۱. قبل از شروع

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

اگر هنوز تنظیمات مربوط به codelab های قبلی را ندارید یا با Dialogflow و تکمیل فرآیندها احساس راحتی نمی‌کنید، می‌توانید کد اولیه و پیکربندی agent را از اینجا دانلود کنید.

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

پیش‌نیازها

قبل از ادامه، باید codelab های زیر را تکمیل کنید:

1. ساخت برنامه زمانبندی قرار ملاقات با Dialogflow
2. ادغام Dialogflow با Actions در گوگل
3. آشنایی با موجودیت‌ها در Dialogflow
4. با ادغام Dialogflow با Calendar، تحقق اهداف را درک کنید

شما همچنین باید مفاهیم و ساختارهای اساسی Dialogflow را درک کنید، که می‌توانید از ویدیوهای زیر که در مسیر ساخت چت‌بات با Dialogflow یافت می‌شوند، آنها را فرا بگیرید.

آنچه یاد خواهید گرفت

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

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

• ادغام بین Dialogflow، Google Chat و Calendar
• (اختیاری) برای کارت‌های غنی‌تر، نقشه‌های گوگل را ادغام کنید

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

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

هشدار : برای تکمیل این آزمایشگاه کدنویسی باید از یک حساب Google Workspace استفاده کنید. استفاده از حساب @gmail.com هنگام تلاش برای فعال کردن API منجر به خطا خواهد شد.

۲. فعال‌سازی و پیکربندی گوگل چت

ما با Dialogflow Agent که در codelabs قبلی ایجاد کرده‌اید، شروع خواهیم کرد.

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

3. در کنسول گوگل کلود، روی منوی ناوبری ☰ > APIها و خدمات > کتابخانه کلیک کنید.
4. عبارت «Google Chat API» را جستجو کنید، سپس برای استفاده از API در پروژه Google Cloud خود، روی فعال‌سازی کلیک کنید.
5. حالا برنامه چت شما را پیکربندی می‌کنیم، به صفحه پیکربندی API بروید. لطفاً توجه داشته باشید که هر پروژه GCP می‌تواند حداکثر یک برنامه چت داشته باشد.

6. شما باید فیلدهای Dialogflow را که گزینه‌های پیکربندی را پر می‌کنند، ببینید.
7. فیلد آدرس آواتار را به تصویر این ماشین تغییر دهید: **https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png**
8. برای فعال کردن برنامه چت خود برای پیام‌های مستقیم و فضاهای خالی، گزینه «برنامه می‌تواند مستقیماً پیام‌رسانی شود» و «برنامه در فضاهای خالی با چندین کاربر کار می‌کند» را انتخاب کنید.

روی ذخیره کلیک کنید و از کنسول ابری خارج شوید.

۳. ادغام‌های اضافی در Dialogflow

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

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

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

1. در گوشه سمت راست بالای فضا، روی منوی کشویی کلیک کنید و گزینه «افزودن افراد و برنامه‌ها» را انتخاب کنید.
2. عبارت AppointmentScheduler را جستجو کنید و برنامه را به فضای مورد نظر اضافه کنید.
3. اکنون می‌توانید با تایپ کردن @AppointmentScheduler در فضای خالی، با برنامه‌ای که از قبل در گوگل ساخته‌اید، تعامل داشته باشید.

آن را روی این پلتفرم با همان ورودی از آزمایشگاه‌های کد قبلی آزمایش کنید:

1. کاربر: "@AppointmentScheduler برای ثبت نام خودرو، فردا ساعت ۲ بعد از ظهر وقت بگیرید."
2. برنامه چت: «باشه، بذار ببینم می‌تونیم جاتون بدیم یا نه. ۲۴ آوریل، ساعت ۲ بعد از ظهر خوبه!»

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

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

با استفاده از گوگل چت، می‌توانید از برنامه خود بخواهید که یک پاسخ متنی ساده یا یک پاسخ کارتی به کاربر برگرداند که به شما امکان می‌دهد رابط کاربری غنی‌تری با ویجت‌های مختلف از جمله تصاویر، دکمه‌ها و غیره ایجاد کنید. اکنون که عامل Dialogflow خود را به یک برنامه گوگل چت متصل کرده‌ایم، کافیست JSON را با فرمت صحیح برگردانید تا در گوگل در کد تکمیل سفارش شما نمایش داده شود. بیایید به چند نمونه JSON نگاهی بیندازیم.

پاسخ متنی اولیه به این شکل است:

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

یک نمونه پاسخ کارت با ابزارک‌ها به شکل زیر است:

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

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

۶. بارهای سفارشی و کارت‌های چت

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

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

روی Google Chat کلیک کنید و از تب DEFAULT، گزینه‌ی «استفاده از پاسخ‌ها به عنوان اولین پاسخ‌ها» را غیرفعال کنید، سپس به مسیر ADD RESPONSES > Custom 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."
           }
         }
       ]
     }
   ]
 }
}

روی ذخیره کلیک کنید، سپس به فضای چت آزمایشی خود بروید تا ببینید این کارت رندر شده است. در فضای چت، عبارت '@AppointmentScheduler hello' را تایپ کنید.

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

۷. افزودن کارت در بخش تکمیل سفارش

حالا یک کارت با چندین ویجت برای نمایش یک قرار ملاقات برنامه‌ریزی‌شده ایجاد خواهیم کرد. بیایید تابعی به نام 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}.`);
 });
}

وقتی اپراتور در گوگل چت پاسخ می‌دهد، اپراتور می‌داند که باید کارت ساخته شده در بالا را برگرداند. آن را با یک درخواست زمان‌بندی امتحان کنید.

۸. (اختیاری) یک ابزارک تصویر نقشه گوگل اضافه کنید

اگر می‌خواهید کارت پاسخ خود را بصری‌تر کنید، می‌توانید یک نقشه استاتیک از محل قرار ملاقات که توسط Maps Static API ایجاد شده است، اضافه کنید. این API به شما امکان می‌دهد با استفاده از پارامترهای URL، یک تصویر Maps بسازید. سپس می‌توانیم از تصویر در یک ویجت تصویر در کارت خود استفاده کنیم.

1. API استاتیک نقشه‌ها را در کنسول ابری گوگل فعال کنید، همانطور که APIهای تقویم و چت گوگل را فعال کردید.
2. یک کلید API برای پروژه خود در صفحه APIها و خدمات در کنسول ایجاد و ذخیره کنید. برای اطلاعات بیشتر در مورد بازیابی و بهترین شیوه‌های استفاده از کلیدهای API با Maps، لطفاً اینجا را ببینید.
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. برنامه چت خود را در فضای چت خود امتحان کنید و باید بر اساس کدی که امروز اضافه کردید، یک پاسخ غنی داشته باشید!

۹. تمیز کردن

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

عامل Dialogflow را حذف کنید

1. کلیک در کنار نماینده فعلی شما.

2. در برگه عمومی ، به پایین بروید و روی حذف این عامل کلیک کنید.
3. در کادر محاوره‌ای، عبارت Delete را تایپ کرده و روی Delete کلیک کنید.

۱۰. تبریک

شما یک چت‌بات در Dialogflow ساختید و آن را با Calendar و حالا Google Chat ادغام کردید، شما یک Google Workspace Pro هستید!

بیشتر بدانید

برای کسب اطلاعات بیشتر، نمونه‌های کد را در صفحه گیت‌هاب Dialogflow بررسی کنید.