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

1. قبل البدء

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

  • يمكنك تنزيل برنامج الواجهة الأمامية Django وإعداده وتشغيله.
  • يُرجى إعداد نقطة نهاية Dialogflow ExploreIntent ليتم طلبها من برنامج الواجهة الأمامية 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 من تلك الواجهة الأمامية المخصّصة.

المتطلبات

  • فهم أساسيات لغة بايثون
  • فهم أساسيات Dialogflow

2. نظرة عامة على الهندسة المعمارية

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

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

84515171be610d4.png

ستبدو النتيجة النهائية على النحو التالي:

7146cd729c50f7c1.png

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

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

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

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

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

تثبيت خادم Cloud SQL الوكيل

نزِّل خادم Cloud SQL الوكيل وثبِّته. يتم استخدام خادم وكيل Cloud SQL للاتصال بمثيل 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 لمثيل الجيل الثاني من 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 باستخدام اسم الاتصال بالمثيل من الخطوة السابقة. استبدِل [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. في تفاصيل حساب الخدمة، أدخِل "أداة جدولة المواعيد". باعتباره اسم حساب الخدمة، ثم انقر على إنشاء.

845d25f3e07ff770.png

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

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

a424cec60144d707.png

6- إعداد نقطة نهاية Dialogflow ExploreIntent ليتم طلبها من التطبيق

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

7. إنشاء التطبيق وتشغيله على الجهاز

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

  1. أنشئ بيئة بايثون معزولة وثبِّت التبعيات:
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. يحجز التقويم الرد.

eb49089765b84fc6.png

13. تَنظيم

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

حذف وكيل Dialogflow

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

14. تهانينا

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

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

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