تدريب عملي: إنشاء دليل تلفزيون في 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 لتفعيلها.

63296523b678ff8d.png

3- الاختبار في Google Chat

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

f0dd1f5e205ef8e2.png

ابحث عن "tvguide" وأضِف تطبيق Google Chat إلى المساحة.

e60fa78fdd020304.png

يمكنك الآن التفاعل مع تطبيق Google Chat الذي سبق لك إنشاؤه في 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 رسائل الاستجابة المنسّقة الخاصة بالنظام الأساسي. هذا هو المكان الذي سنضيف فيه بطاقات Hangouts Chat JSON التي سيعرض فيها الوكيل للمستخدم مرة أخرى.

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

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 والزر لإنشاء استجابة البطاقة.

أضِف الدالة أدناه إلى رمزك في 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.

الخطوات التالية

هل استمتعت بهذا الدرس التطبيقي حول الترميز؟ ألقِ نظرة على هذه المختبرات الرائعة!