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

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

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

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

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

לפני שממשיכים, צריך להשלים את ה-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 detectIntent API כדי לקבוע פגישה לתאריך ולשעה המבוקשים. לאחר מכן, תכונת ה-fulfillment ב-Dialogflow תשלח בקשה ליומן כדי להגדיר את הפגישה הרלוונטית ותחזיר אישור למשתמש דרך 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. הגדרת הסביבה המקומית

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

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

התקנת Cloud SQL Proxy

מורידים ומתקינים את Cloud SQL Proxy. משתמשים ב-Cloud SQL Proxy כדי להתחבר למכונה של 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 מהדור השני. נותנים למכונה את השם 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 Proxy פועל בזמן שבודקים את האפליקציה באופן מקומי.

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

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

  1. יוצרים מסד נתונים חדש באמצעות Google Cloud Console עבור מופע 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. במסוף של Dialogflow, לוחצים על e8a0a7d752849e01.png. בכרטיסייה כללי, לצד מזהה הפרויקט, לוחצים על Google Cloud a9c6ff6374afe489.png.
  2. לוחצים על תפריט הניווט ☰ > APIs & Services > Credentials.
  3. לוחצים על Create Credentials (יצירת אמצעי אימות) > Service account (חשבון שירות). 86f51af0e7886fdd.png
  4. בקטע פרטי חשבון השירות, מזינים appointment-scheduler בתור שם חשבון השירות ולוחצים על יצירה.

845d25f3e07ff770.png

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

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

a424cec60144d707.png

6. הגדרת נקודת הקצה (endpoint) של Dialogflow detectIntent להפעלה מהאפליקציה

  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 appointment for vehicle registration at 3 PM tomorrow".
  2. התשובה של הצ'אטבוט:

3b0abfec8f4ba279.png

  1. התשובה נרשמת ביומן.

eb49089765b84fc6.png

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

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

מחיקת סוכן Dialogflow

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

14. מזל טוב

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

מידע נוסף

כדאי לעיין במקורות המידע הבאים: