تدريب عملي: إنشاء دليل تلفزيون في Google Chat باستخدام Google Workspace وDialogflow

1. مقدمة

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

ما ستنشئه

سننشئ برنامج دردشة آليًا في Dialogflow يمكنه الردّ في نطاق Google Workspace باستخدام ردود قابلة للتخصيص.

2e16770ceed20cb2.png

ما ستتعلمه

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

المتطلبات

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

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

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

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

cb893582402e4092.png

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

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

بالإضافة إلى عمليات دمج Dialogflow يكون Google Chat مفعّلاً تلقائيًا، ولكن إذا أردت عرض إعلانات على منصات متعددة، يمكنك الانتقال إلى صفحة عمليات الدمج في 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- الحمولات المخصّصة وبطاقات المحادثة

تتيح الحمولات المخصّصة في Dialogflow إمكانية إرسال رسائل ردّ غنية خاصة بمنصة معيّنة. هذا هو المكان الذي سنضيف فيه بطاقات JSON في Hangouts Chat، حيث سيعرضها الوكيل للمستخدم.

لنبدأ بإضافة بطاقة أساسية لغرض الترحيب. في Dialogflow Console، انتقِل إلى "رسالة الترحيب التلقائية" (Default Welcome Intent) وانتقِل للأسفل إلى قسم الردود.

9624208f0d266afd.png

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

سيظهر لك هيكل 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 و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.

ما هي الخطوات التالية؟

هل أعجبك هذا الدرس العملي؟ ننصحك بالاطّلاع على هذه المختبرات الرائعة.