إنشاء برنامج Django لواجهة أمامية لتطبيق Dialogflow

1. قبل البدء

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

  • نزِّل عميل واجهة Django الأمامية وأعدّ إعداداته وشغِّله.
  • اضبط نقطة نهاية detectIntent في Dialogflow ليتم استدعاؤها من واجهة مستخدم Django الأمامية.
  • نشر التطبيق على Google Cloud في App Engine
  • اختبِر ما إذا كان يتم إعداد دعوات "تقويم Google" لكل طلب مستخدم.

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

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

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

أهداف الدورة التعليمية

  • كيفية إعداد وتشغيل برنامج Django أمامي لعميل Dialogflow
  • كيفية نشر تطبيق Django للواجهة الأمامية على Google Cloud في App Engine
  • كيفية اختبار تطبيق Dialogflow من واجهة أمامية مخصّصة

ما ستنشئه

  • ستعمل على إعداد وتشغيل عميل الواجهة الأمامية Django لخدمة Dialogflow.
  • ستنشر تطبيق Django للواجهة الأمامية على Google Cloud في App Engine.
  • ستختبر تطبيق Dialogflow من واجهة المستخدم المخصّصة هذه.

المتطلبات

  • فهم أساسي للغة Python
  • فهم أساسي لخدمة Dialogflow

2. نظرة عامة على البنية

ستستخدم تجربة المحادثة أداة جدولة المواعيد التي أنشأتها سابقًا، وستنشئ واجهة أمامية مخصّصة للتطبيق. وستنشئ الواجهة الأمامية باستخدام Django، وستشغّلها وتختبرها محليًا، ثم ستنشرها على App Engine.

سيرسل المستخدم طلب موعد من خلال الواجهة الأمامية، ما سيؤدي إلى استدعاء واجهة برمجة التطبيقات detectIntent في Dialogflow لتحديد موعد في التاريخ والوقت المطلوبَين. بعد ذلك، سترسل عملية تنفيذ Dialogflow طلبًا إلى "تقويم Google" لضبط الموعد المعنيّ وإرسال تأكيد إلى المستخدم من خلال Dialogflow.

84515171be610d4.png

ستظهر النتيجة النهائية على النحو التالي:

7146cd729c50f7c1.png

3- تنزيل تطبيق الواجهة الأمامية وتشغيله

  1. استنسِخ المستودع إلى جهازك المحلي عن طريق كتابة هذا الأمر في وحدة التحكّم المحلية على جهاز الكمبيوتر:
git clone https://github.com/priyankavergadia/Django-Dialogflow-Appointment-Scheduler.git
  1. انتقِل إلى الدليل الذي يحتوي على الرمز. يمكنك بدلاً من ذلك تنزيل العيّنة كملف مضغوط واستخراجها.
cd Django-Dialogflow-Appointment-Scheduler

4. إعداد البيئة المحلية

عند نشر تطبيقك، يستخدم التطبيق Cloud SQL Proxy المضمّن في بيئة App Engine العادية للتواصل مع مثيل Cloud SQL. ومع ذلك، لاختبار تطبيقك محليًا، يجب تثبيت نسخة محلية من Cloud SQL Proxy واستخدامها في بيئة التطوير. لمزيد من المعلومات، اطّلِع على لمحة عن خادم Cloud SQL الوكيل.

لتنفيذ مهام المشرف الأساسية على مثيل Cloud SQL، يمكنك استخدام عميل Cloud SQL لـ MySQL.

تثبيت Cloud SQL Proxy

نزِّل خادم Cloud SQL الوكيل وثبِّته. يتم استخدام Cloud SQL Proxy للاتصال بمثيل Cloud SQL عند التشغيل محليًا.

نزِّل الخادم الوكيل.

curl -o cloud_sql_proxy https://dl.google.com/cloudsql/cloud_sql_proxy.darwin.amd64

اجعل الخادم الوكيل قابلاً للتنفيذ.

chmod +x cloud_sql_proxy

إنشاء مثيل Cloud SQL

  1. أنشئ مثيلاً من الجيل الثاني من Cloud SQL for MySQL. أطلِق على الجهاز اسم "polls-instance" أو اسم مشابه. قد يستغرق تجهيز الجهاز الافتراضي بضع دقائق. بعد أن يصبح جاهزًا، من المفترض أن يظهر في قائمة الآلات الافتراضية.
  2. استخدِم أداة gcloud لتنفيذ الأمر التالي حيث يمثّل [YOUR_INSTANCE_NAME] اسم مثيلك. دوِّن القيمة المعروضة لاسم اتصال المثيل من أجل الخطوة التالية، والتي تظهر بالتنسيق [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME].
gcloud sql instances describe [YOUR_INSTANCE_NAME]

بدلاً من ذلك، يمكنك النقر على المثيل للاطّلاع على اسم اتصال المثيل.

c11e94464bf4fcf8.png

إعداد مثيل Cloud SQL

ابدأ Cloud SQL Proxy باستخدام اسم الاتصال بالمثيل من الخطوة السابقة. استبدِل [YOUR_INSTANCE_CONNECTION_NAME] بالقيمة التي سجّلتها في الخطوة السابقة. يؤدي ذلك إلى إنشاء اتصال من جهاز الكمبيوتر إلى الجهاز الافتراضي لأغراض الاختبار المحلي. أبقِ خادم Cloud SQL الوكيل قيد التشغيل أثناء اختبار تطبيقك على جهازك.

./cloud_sql_proxy -instances="[YOUR_INSTANCE_CONNECTION_NAME]"=tcp:3306

بعد ذلك، أنشئ مستخدمًا وقاعدة بيانات جديدَين في Cloud SQL.

  1. أنشئ قاعدة بيانات جديدة باستخدام Google Cloud Console لمثيل Cloud SQL باسم polls-instance. على سبيل المثال، يمكنك إدخال "استطلاعات" كاسم. a3707ec9bc38d412.png
  2. أنشئ حساب مستخدم جديدًا باستخدام Cloud Console لمثيل Cloud SQL باسم polls-instance. f4d098fca49cccff.png

ضبط إعدادات قاعدة البيانات

  1. افتح mysite/settings.py للتعديل.
  2. في موضعَين، استبدِل [YOUR-USERNAME] و[YOUR-PASSWORD] باسم المستخدم وكلمة المرور لقاعدة البيانات اللذين أنشأتهما في القسم السابق. يساعد ذلك في إعداد الاتصال بقاعدة البيانات من أجل نشر App Engine والاختبار المحلي.
  3. في السطر الذي يظهر فيه ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]،' استبدِل [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] بالقيمة التي سجّلتها في القسم السابق.
  4. نفِّذ الأمر التالي وانسخ قيمة اسم اتصال المثيل التي تم إخراجها للخطوة التالية.
gcloud sql instances describe [YOUR_INSTANCE_NAME]
  1. استبدِل [YOUR-CONNECTION-NAME] بالقيمة التي سجّلتها في القسم السابق.
  2. استبدِل [YOUR-DATABASE] بالاسم الذي اخترته في القسم السابق.
# [START db_setup]
if os.getenv('GAE_APPLICATION', None):
    # Running on production App Engine, so connect to Google Cloud SQL using
    # the unix socket at /cloudsql/<your-cloudsql-connection string>
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'HOST': '/cloudsql/[PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]',
            'USER': '[YOUR-USERNAME]',
            'PASSWORD': '[YOUR-PASSWORD]',
            'NAME': '[YOUR-DATABASE]',
        }
    }
else:
    # Running locally so connect to either a local MySQL instance or connect to
    # Cloud SQL via the proxy. To start the proxy via command line:
    #     $ cloud_sql_proxy -instances=[INSTANCE_CONNECTION_NAME]=tcp:3306
    # See https://cloud.google.com/sql/docs/mysql-connect-proxy
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'HOST': '127.0.0.1',
            'PORT': '3306',
            'NAME': '[YOUR-DATABASE]',
            'USER': '[YOUR-USERNAME]',
            'PASSWORD': '[YOUR-PASSWORD]'
        }
    }
# [END db_setup]
  1. أغلِق النافذة واحفظ التغييرات ووفِّر ‎settings.py.

5- إعداد حساب الخدمة

  1. في وحدة تحكّم Dialogflow، انقر على e8a0a7d752849e01.png. في علامة التبويب عام بجانب رقم تعريف المشروع، انقر على Google Cloud a9c6ff6374afe489.png.
  2. انقر على قائمة التنقّل ☰ > واجهات برمجة التطبيقات والخدمات > بيانات الاعتماد.
  3. انقر على إنشاء بيانات اعتماد > حساب الخدمة. 86f51af0e7886fdd.png
  4. في تفاصيل حساب الخدمة، أدخِل "appointment-scheduler" في اسم حساب الخدمة، ثم انقر على إنشاء.

845d25f3e07ff770.png

  1. في قسم منح حساب الخدمة هذا إذن الوصول إلى المشروع، انقر على متابعة لتخطّيه.
  2. في القسم منح المستخدمين صلاحية الوصول إلى حساب الخدمة هذا (اختياري)، انقر على إنشاء مفتاح > JSON > إنشاء.

سيتم تنزيل ملف JSON على جهاز الكمبيوتر، وستحتاج إليه في أقسام الإعداد التالية.

a424cec60144d707.png

6. إعداد نقطة نهاية detectIntent في Dialogflow ليتم استدعاؤها من التطبيق

  1. في مجلد المحادثة، استبدِل AppointmentScheduler.json بملف JSON لبيانات الاعتماد.
  2. في views.py في مجلد المحادثة، غيِّر GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" إلى رقم تعريف مشروعك.

7. إنشاء التطبيق وتشغيله محليًا

لتشغيل تطبيق Django على الكمبيوتر المحلي، عليك إعداد بيئة تطوير Python، بما في ذلك Python وpip وvirtualenv. للحصول على التعليمات، يُرجى الاطّلاع على إعداد بيئة تطوير Python.

  1. أنشئ بيئة Python معزولة وثبِّت التبعيات:
virtualenv env
source env/bin/activate
pip install -r requirements.txt
  1. نفِّذ عمليات نقل بيانات Django لإعداد النماذج.
python3 manage.py makemigrations
python3 manage.py makemigrations polls
python3 manage.py migrate
  1. ابدأ تشغيل خادم ويب محلي.
python3 manage.py runserver
  1. في متصفّح الويب، أدخِل http://localhost:8000/. من المفترض أن تظهر لك صفحة ويب بسيطة كما هو موضّح في لقطة الشاشة التالية:

d40910969aa71020.png

يتم عرض صفحات نموذج التطبيق من خلال خادم الويب Django الذي يعمل على جهاز الكمبيوتر. عندما تكون مستعدًا للمتابعة، اضغط على Control+S (Command+S على جهاز Macintosh) لإيقاف خادم الويب المحلي.

8. نشر التطبيق في بيئة App Engine العادية

نفِّذ الأمر التالي لنقل جميع الملفات الثابتة للتطبيق إلى المجلد المحدّد بواسطة STATIC_ROOT في settings.py:

python3 manage.py collectstatic

حمِّل التطبيق عن طريق تنفيذ الأمر التالي في دليل التطبيق الذي يتضمّن ملف app.yaml:

gcloud app deploy

انتظِر إلى أن تتلقّى الرسالة التي تُعلمك باكتمال التحديث.

9- اختبار تطبيق العميل

في متصفّح الويب، أدخِل https://‎<your_project_id>.appspot.com.

في هذه المرة، سيتم عرض طلبك من خلال خادم ويب يعمل في بيئة App Engine العادية.

ينشر الأمر app deploy التطبيق كما هو موضّح في app.yaml ويضبط الإصدار الذي تم نشره حديثًا كإصدار تلقائي، ما يؤدي إلى عرضه لجميع الزيارات الجديدة.

10. الإنتاج

11. عندما تكون مستعدًا لعرض المحتوى في مرحلة الإنتاج، غيِّر قيمة المتغيّر DEBUG إلى False في mysite/settings.py.

12. اختبار روبوت الدردشة

انتقِل إلى https://<your_project_id>.appspot.com وأدخِل ما يلي:

  1. المستخدم: "أريد تحديد موعد لتسجيل المركبة غدًا الساعة 3 بعد الظهر".
  2. يردّ برنامج الدردشة الآلي على النحو التالي:

3b0abfec8f4ba279.png

  1. يسجّل "تقويم Google" الرد.

eb49089765b84fc6.png

13. تَنظيم

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

حذف وكيل Dialogflow

  1. انقر على الرمز e8a0a7d752849e01.png بجانب وكيلك الحالي.
  2. 520c1c6bb9f46ea6.png
  3. في علامة التبويب الإعدادات العامة، انتقِل إلى أسفل الصفحة وانقر على حذف هذا الوكيل.
  4. اكتب حذف في النافذة التي تظهر وانقر على حذف.

14. تهانينا

أنشأت برنامج دردشة آليًا في Dialogflow ودمجته مع "تقويم Google". أصبحت الآن مطوّر برامج محادثة مبرمَجة.

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

يمكنك الاطّلاع على المراجع التالية لمعرفة المزيد: