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

في هذا الدرس التطبيقي حول الترميز، ستتعلّم كيفية إنشاء برنامج 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

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

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

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

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

عند نشر تطبيقك، يستخدم الخادم الوكيل 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]

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

إعداد مثيل 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. على سبيل المثال، يمكنك إدخال "استطلاعات" كاسم.
  2. أنشئ حساب مستخدم جديدًا باستخدام Cloud Console لمثيل Cloud SQL باسم polls-instance.

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

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

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

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

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

لتشغيل تطبيق 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/. من المفترض أن تظهر لك صفحة ويب بسيطة كما هو موضّح في لقطة الشاشة التالية:

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

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

python3 manage.py collectstatic

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

gcloud app deploy

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

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

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

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

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

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

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

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

حذف وكيل Dialogflow

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

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

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

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