ادغام Dialogflow با Google Chat

1. قبل از شروع

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

اگر هنوز تنظیمات مربوط به کدهای قبلی را ندارید یا از Dialogflow و تکمیل شدن اطمینان دارید، می توانید کد شروع و پیکربندی عامل را از اینجا دانلود کنید.

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

پیش نیازها

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

1. با Dialogflow یک برنامه زمانبندی قرار ملاقات بسازید
2. Dialogflow را با Actions در Google یکپارچه کنید
3. درک موجودیت ها در Dialogflow
4. با ادغام Dialogflow با Calendar، تحقق را درک کنید

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

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

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

چیزی که خواهی ساخت

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

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

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

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

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

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

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

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

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

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

3. ادغام های اضافی Dialogflow

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

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

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

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

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

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

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

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

با 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://..."
                      }
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

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

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

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

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

روی گپ Google کلیک کنید و گزینه Use Responses را از برگه 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» را تایپ کنید.

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

7. افزودن کارت در Fulfillment

اکنون یک کارت با چندین ویجت برای نمایش قرار ملاقات برنامه ریزی شده ایجاد می کنیم. بیایید تابعی به نام 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 پاسخ می‌دهد، نماینده می‌داند که کارت ساخته شده در بالا را برگرداند. آن را با یک درخواست زمان بندی آزمایش کنید.

8. (اختیاری) ویجت تصویر Google Maps را اضافه کنید

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

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

9. پاکسازی کنید

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

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

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

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

10. تبریک می گویم

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

بیشتر بدانید

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