פיתוח לקוח Django בחזית לאפליקציית Dialogflow

1. לפני שמתחילים

ב-Codelab הזה תלמדו לפתח לקוח Django בחזית כדי ליצור חוויית שיחה לאפליקציית Dialogflow. באופן ספציפי, תבצעו את הפעולות הבאות:

  • הורדה, הגדרה והפעלה של לקוח הקצה של Django.
  • הגדרת קריאה לנקודת הקצה (endpoint) של Dialogflow הסטרימינג מלקוח הקצה של Django.
  • פריסת האפליקציה ל-Google Cloud ב-App Engine.
  • לבדוק אם הזמנות מיומן Google מוגדרות לכל בקשה של המשתמש.

דרישות מוקדמות

כדי להמשיך, עליכם להשלים את ה-Codelabs הבאים:

  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.

המשתמש ישלח בקשה לפגישה דרך הקצה הקדמי, שיתקשר ל-Dialogflow pathIntent API כדי לקבוע פגישה לתאריך ולשעה המבוקשים. אחרי שממלאים את הפרטים ב-Dialogflow, נשלחת בקשה ליומן Google לקביעת הפגישה שנקבעה ותחזיר אישור למשתמש דרך Dialogflow.

84515171be610d4.png

התוצאה הסופית תיראה כך:

7146cd729c50f7c1.png

3. הורדה והפעלה של אפליקציית Frontend

  1. משכפלים את המאגר למכונה המקומית על ידי הקלדת הפקודה הבאה במסוף המקומי של המחשב:
git clone https://github.com/priyankavergadia/Django-Dialogflow-Appointment-Scheduler.git
  1. עוברים לספרייה שמכילה את הקוד. לחלופין, אפשר להוריד את הדוגמה כקובץ ZIP ולחלץ אותה.
cd Django-Dialogflow-Appointment-Scheduler

4. הגדרת הסביבה המקומית

במהלך הפריסה, האפליקציה משתמשת בשרת proxy ל-Cloud SQL Proxy המובנה בסביבה הסטנדרטית של App Engine כדי לתקשר עם המכונה של Cloud SQL. עם זאת, כדי לבדוק את האפליקציה שלכם באופן מקומי, עליכם להתקין עותק מקומי של שרת ה-proxy של Cloud SQL ולהשתמש בו בסביבת הפיתוח. מידע נוסף זמין במאמר מידע על Cloud SQL Proxy.

כדי לבצע משימות ניהול בסיסיות במכונה של Cloud SQL, אפשר להשתמש בלקוח Cloud SQL ל-MySQL.

התקנת ה-Proxy של Cloud SQL

מורידים ומתקינים את ה-Proxy ל-Cloud SQL. שרת ה-proxy של Cloud SQL משמש להתחברות למכונה של Cloud SQL בזמן הרצה מקומית.

מורידים את שרת ה-Proxy.

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

יוצרים את קובץ ההפעלה של ה-Proxy.

chmod +x cloud_sql_proxy

יצירת מכונה של Cloud SQL

  1. איך יוצרים Cloud SQL ל-MySQL Second Generation. נותנים למכונה את השם 'polls-instance'. או משהו דומה. יכול להיות שיעברו כמה דקות עד שהמכונה תהיה מוכנה. כשהוא מוכן, הוא אמור להופיע ברשימת המכונות.
  2. משתמשים בכלי של gcloud כדי להריץ את הפקודה הבאה שבה [YOUR_INSTANCE_NAME] מייצג את שם המכונה. חשוב לשים לב לערך שמוצג, למשל, שם החיבור עבור השלב הבא, שמוצג בפורמט [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]..
gcloud sql instances describe [YOUR_INSTANCE_NAME]

לחלופין, אפשר ללחוץ על המופע כדי לראות את שם החיבור של המכונה.

c11e94464bf4fcf8.png

אתחול המכונה של Cloud SQL

מפעילים את ה-Proxy ל-Cloud SQL באמצעות שם החיבור של המכונה מהשלב הקודם. מחליפים את [YOUR_INSTANCE_CONNECTION_NAME] בערך שתיעדתם בשלב הקודם. היא יוצרת חיבור בין המחשב המקומי למכונה למטרות בדיקה מקומית. משאירים את שרת ה-proxy של Cloud SQL לפעול בזמן שבודקים את האפליקציה באופן מקומי.

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

לאחר מכן, יוצרים משתמש ומסד נתונים חדשים ב-Cloud SQL.

  1. ליצור מסד נתונים חדש באמצעות מסוף Google Cloud למכונה של Cloud SQL בשם polls-instance. לדוגמה, אפשר להזין 'סקרים'. בתור השם. a3707ec9bc38d412.png
  2. ליצור חשבון משתמש חדש באמצעות מסוף Cloud למכונה של 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. לוחצים על e8a0a7d752849e01.png במסוף של Dialogflow. בכרטיסייה General (כללי) לצד Project ID, לוחצים על Google Cloud a9c6ff6374afe489.png.
  2. לוחצים על תפריט הניווט myactivity > ממשקי API שירותים > פרטי כניסה.
  3. לוחצים על Create Credentials > חשבון שירות. 86f51af0e7886fdd.png
  4. בקטע Service account details (פרטי חשבון השירות), מזינים 'appointment-Scheduler' בתור Service account name, ולאחר מכן לוחצים על Create.

845d25f3e07ff770.png

  1. בקטע Grant this service account access to project (הענקת גישה לפרויקט הזה לחשבון השירות הזה), לוחצים על Continue (המשך) כדי לדלג עליה.
  2. בקטע הענקת גישה למשתמשים לחשבון שירות זה (אופציונלי), יש ללחוץ על יצירת מפתח > JSON > יצירה.

תתבצע הורדה של קובץ JSON למחשב שלכם, שאותו תצטרכו בקטעי ההגדרה הבאים.

a424cec60144d707.png

6. הגדרה של קריאה לנקודת הקצה של ה-Intent של 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. משתמש: "Set an meeting for an רכב registration at 3 PM tomorrow".
  2. תגובת הצ'אט בוט:

3b0abfec8f4ba279.png

  1. היומן יזמין את התשובה.

eb49089765b84fc6.png

13. הסרת המשאבים

אם אתם מתכננים להשלים בדיקות קוד Lab אחרות של Dialogflow, אפשר לדלג על החלק הזה בינתיים ולחזור אליו מאוחר יותר.

מחיקת הנציג של Dialogflow

  1. לוחצים על e8a0a7d752849e01.png ליד הנציג הקיים.
  2. 520c1c6bb9f46ea6.png
  3. בכרטיסייה כללי, גוללים לחלק התחתון ולוחצים על מחיקת הנציג.
  4. מקלידים Delete בחלון שמופיע ולוחצים על מחיקה.

14. מזל טוב

יצרתם צ'אט בוט ב-Dialogflow ושילבת אותו יחד עם יומן Google. הפכת למפתחי צ'אט בוט!

מידע נוסף

מידע נוסף זמין במקורות המידע הבאים: