دمج Dialogflow مع Google Chat

1. قبل البدء

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية ربط Dialogflow بواجهات برمجة تطبيقات Google Workspace لإنشاء "أداة جدولة مواعيد" تعمل بشكل كامل باستخدام "تقويم Google" مع الردود الديناميكية في Google Chat.

إذا لم تكن قد أكملت عملية الإعداد من الدروس التطبيقية السابقة حول الترميز أو إذا كنت تثق في Dialogflow وتنفيذ المهام، يمكنك تنزيل رمز إجراء التفعيل وإعدادات الوكيل من هنا.

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

المتطلبات الأساسية

قبل المتابعة، عليك إكمال الدروس التطبيقية التالية حول الترميز:

1. إنشاء جدول مواعيد باستخدام Dialogflow
2. دمج Dialogflow مع "المهام مع مساعد Google"
3. فهم الكيانات في Dialogflow
4. فهم تنفيذ العملية من خلال دمج Dialogflow مع "تقويم Google"

عليك أيضًا فهم المفاهيم الأساسية والتركيبات الخاصة بأداة Dialogflow، والتي يمكنك الاطّلاع عليها من خلال الفيديوهات التالية المتوفرة في مسار إنشاء روبوت دردشة باستخدام Dialogflow.

ما ستتعرَّف عليه

• كيفية نشر تطبيق Google Chat وضبطه
• طريقة إنشاء بطاقات عرض في Google Chat
• طريقة إنشاء حمولات بيانات مخصَّصة في تنفيذ Dialogflow

ما الذي ستقوم ببنائه

• الدمج بين Dialogflow وGoogle Chat و"تقويم Google"
• (اختياري) دمج "خرائط Google" للحصول على بطاقات أكثر ثراءً

المتطلبات

• متصفّح ويب وعنوان بريد إلكتروني لتسجيل الدخول إلى وحدة تحكّم Dialogflow
• تم تفعيل "تقويم Google" وGoogle Chat في نطاق Google Workspace

تحذير: عليك استخدام حساب Google Workspace لإكمال هذا الدرس التطبيقي حول الترميز. سيؤدي استخدام حساب @gmail.com إلى حدوث خطأ عند محاولة تفعيل واجهة برمجة التطبيقات.

2. تفعيل Google Chat وضبطه

سنبدأ بوكيل Dialogflow الذي أنشأته في الدروس التطبيقية السابقة حول الترميز.

1. في وحدة تحكُّم Dialogflow، انقر على .
2. في علامة التبويب الإعدادات العامة، انتقِل إلى رقم تعريف المشروع، ثم انقر على رمز Google Cloud .

3. في Google Cloud Console، انقر على قائمة التنقل ⇧ > واجهات برمجة التطبيقات الخدمات > المكتبة:
4. ابحث عن "Google Chat API". ثم انقر على تفعيل لاستخدام واجهة برمجة التطبيقات في مشروعك على Google Cloud.
5. سيتم الآن ضبط تطبيقك في Chat، ويمكنك الانتقال إلى صفحة الإعدادات لواجهة برمجة التطبيقات. يُرجى ملاحظة أنّ كل مشروع Google Cloud Platform يمكن أن يحتوي على تطبيق 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 لكل من الرسائل المباشرة والمساحات، اختَر يمكن إرسال رسائل إلى التطبيق مباشرةً ويعمل التطبيق في المساحات مع عدة مستخدمين.

انقر على حفظ واخرج من Cloud Console.

3- عمليات دمج إضافية مع Dialogflow

يتم تفعيل Google Chat تلقائيًا، ولكن إذا أردت أن يعرض برنامج تتبُّع منصات متعدّدة، يمكنك الانتقال إلى صفحة عمليات الدمج في وحدة التحكّم في Dialogflow لتفعيلها.

4. الاختبار في Google Chat

الآن بعد إعداد تطبيق Chat، سنضيفه إلى "مساحة Chat" ونختبره. افتح Google Chat وأنشِئ مساحة تجريبية.

1. في أعلى يسار المساحة، انقر على القائمة المنسدلة واختَر إضافة أشخاص التطبيقات.
2. ابحث عن "AppointmentScheduler" وأضِفه إلى المساحة.
3. يمكنك الآن التفاعل مع التطبيق الذي أنشأته في Google من خلال كتابة @AppointmentScheduler في المساحة.

يمكنك اختبار هذه الأداة على هذا النظام الأساسي باستخدام البيانات نفسها الواردة من الدروس التطبيقية السابقة حول الترميز:

1. المستخدم: " @Appointmentscheduler ، يُرجى تحديد موعد لتسجيل المركبات عند الساعة 2 بعد الظهر غدًا".
2. تطبيق Chat: "حسنًا، سأرى ما إذا كان يمكننا مساعدتك. لا بأس في يوم 24 نيسان (أبريل)، الساعة 2 بعد الظهر".

بعد ذلك، سنستخدم إعدادات التخصيص في Google Chat لإضافة ردود أكثر فائدة.

5- بطاقات Google Chat المخصّصة

من خلال Google Chat، يمكنك أن تطلب من تطبيقك عرض "ردّ نصي" أساسي أو "استجابة بطاقة" للمستخدم، ما يتيح لك استخدام واجهة أكثر فائدة تم تصميمها باستخدام تطبيقات مصغّرة مختلفة تشمل الصور والأزرار وغيرها. والآن بعد أن ربطنا وكيل Dialogflow بتطبيق 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- الحمولات المخصّصة وبطاقات الدردشة

تتيح الحمولات الأساسية المخصّصة في Dialogflow رسائل الاستجابة المنسّقة الخاصة بالنظام الأساسي. هذا هو المكان الذي سنضيف فيه بطاقات Hangouts Chat JSON التي سيعرض فيها الوكيل للمستخدم مرة أخرى.

لنبدأ بإضافة بطاقة أساسية للقصد الترحيبي. في وحدة التحكّم في Dialogflow، انتقِل إلى نيّة الترحيب التلقائية وانتقِل للأسفل إلى قسم الردود.

النقر على Google Chat وإلغاء اختيار استخدام الردود من علامة التبويب DEFAULT كأول ردود، ثم إضافة ردود > الحمولة المخصّصة

سيظهر لك هيكل 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، اكتب " @Appointment Scheduler hello".

سنضيف بعد ذلك حمولة مخصّصة في رمز التنفيذ حتى نتمكّن من إنشاء المحتوى ديناميكيًا باستخدام الرمز الخاص بنا.

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"

إذا كنت تريد جعل بطاقة الردّ أكثر وضوحًا، يمكنك إضافة خريطة ثابتة لموقع الموعد الذي تم إنشاؤه من خلال Maps Static API. تسمح لك واجهة برمجة التطبيقات بإنشاء صورة "خرائط Google" باستخدام مَعلمات عناوين URL. يمكننا بعد ذلك استخدام الصورة في أداة الصورة في بطاقتنا.

1. يمكنك تفعيل Maps Static API في Google Cloud Console، بالطريقة نفسها التي تم بها تفعيل واجهات برمجة تطبيقات "تقويم Google" وGoogle Chat.
2. يمكنك إنشاء مفتاح واجهة برمجة تطبيقات لمشروعك وحفظه في واجهات برمجة التطبيقات الخدمات في وحدة التحكم. للحصول على مزيد من المعلومات حول الاسترداد وأفضل ممارسات الاسترجاع على مفاتيح واجهة برمجة التطبيقات باستخدام "خرائط Google"، يُرجى الاطّلاع على هذه الصفحة.
3. انسخ مفتاح واجهة برمجة التطبيقات والثوابت التالية إلى أعلى ملفك في 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. تَنظيم

إذا كنت تخطّط لإكمال دروس تطبيقية أخرى حول الترميز في Dialogflow، يمكنك تخطّي هذا القسم في الوقت الحالي والرجوع إليه لاحقًا.

حذف وكيل Dialogflow

1. انقر على بجانب وكيلك الحالي.

2. في علامة التبويب الإعدادات العامة، انتقِل إلى أسفل الصفحة وانقر على حذف هذا الوكيل.
3. اكتب حذف في مربع الحوار وانقر على حذف.

10. تهانينا

لقد أنشأت روبوت دردشة في Dialogflow ودمجته مع "تقويم Google" والآن Google Chat، أصبحت الآن Google Workspace Pro.

مزيد من المعلومات

لمزيد من المعلومات، يمكنك الاطّلاع على نماذج الرموز في صفحة Dialogflow GitHub.