קנייה של איסוף באינטרנט בחנות: ארוחת בוקר – חלק 1 – תחילת העבודה

1. מבוא

עדכון אחרון: 11 במאי 2022

אנחנו שמחים שהצטרפת אל Business Messages

ה-codelab הזה הוא מבוא לשילוב עם Business Messages, כדי לאפשר ללקוחות ליצור קשר עם עסקים שאתם מנהלים דרך חיפוש Google ומפות Google. ייתכן שיש לכם עסק שרוצה להשתלב ישירות עם Business Messages, או שאתם עובדים בספק תוכנה עצמאי שבונה פתרונות להעברת הודעות לעסקים שאתם עובדים איתו, או שאולי נתקלתם ב-Business Messages ואתם רוצים לנסות להשתמש בפלטפורמה.

לא משנה מה הביא אותך לכאן, ה-Codelab הזה הוא דרך נהדרת להתחיל. בסיום התהליך יהיה לכם נציג דיגיטלי ראשון שתוכלו להשתמש בו. כשתהיו מוכנים להשקה של Business Messages אחרי שדורשים שיפור קל, יש לכם פוטנציאל להגיע למיליוני לקוחות.

הערה: כדי להתחיל, צריך להירשם ל-Business Messages דרך Business Communications Developer Console.

הערה: אם מצטרפים ל-Codelab הזה מ-Google I/O, ברוכים הבאים! ב-Codelab הזה תלמדו איך לעבוד עם פלטפורמת Business Messages ותספק לכם הבנה מקצה לקצה איך לקבל ולשלוח הודעות דרך פלטפורמת השיחה של Business Messages.

למה צריך להיות נציג דיגיטלי מוצלח?

Business Messages היא פלטפורמת שיחה שמציעה חוויית שיחה דמוית אפליקציה בניידים, שמאפשרת לצרכנים ליצור קשר עם עסקים בלי להתקין אפליקציה נוספת. נציג דיגיטלי הוא לוגיקת האינטראקציה של הלקוחות. הלוגיקה מנוהלת על ידי אפליקציית אינטרנט שפרוסה בענן או בתשתית שלכם. אתם מחליטים איך להגיב למשתמש. הנציגים הכי טובים מספקים הקשר שמאפשר להם להגדיר ציפיות, לשמור על מעורבות הלקוחות ולספק פונקציונליות לתמיכה בצרכים של המשתמשים.

מה תפַתחו

בשיעור הזה תלמדו ליצור נציג דיגיטלי ב-Business Messages עבור חברה פיקטיבית שנקראת Bonjour Meal. הנציג הדיגיטלי הזה ישיב לכמה שאלות פשוטות כמו "באיזו שעה נסגרים?" או "אפשר לקנות באינטרנט?".

ב-Codelab הזה, המשתמשים שלך יוכלו לקנות פריטים באמצעות הסוכן הדיגיטלי, להפנות את המשתמש לעיבוד תשלומים כדי לגבות כסף ואז לקבוע מועד לאיסוף הפריטים הדמיוניים שלו בחנות.

ב-Codelab הזה, האפליקציה שלך

• מענה על שאלות באמצעות צ'יפ של הצעות
• מנחים את המשתמש לשאול שאלות שהנציג הדיגיטלי יכול לענות עליהן
• לספק תכונות שיחה עשירות כדי לשמור על מעורבות המשתמש בשיחה

הערה: כדי לפשט את ה-Codelab הזה ולהסביר את העקרונות הבסיסיים של יצירת חוויית משתמש מעולה ב-Business Messages, אנחנו משתמשים ב-Google Cloud Platform (GCP) לפריסת אפליקציית אינטרנט שתומכת בתשתית הנציגים. GCP הוא בחירה מצוינת לפריסה של אפליקציית אינטרנט, אבל השימוש בה לא מוגבל.

מה תלמדו

• הוראות לפריסה של אפליקציית אינטרנט ב-App Engine ב-Google Cloud Platform לחלופין, אפשר להשתמש ב-ngrok כדי לבדוק באופן ציבורי את האפליקציה המקומית שלכם.
• איך להגדיר את החשבון ב-Business Messages באמצעות webhook של אפליקציית אינטרנט כדי לקבל הודעות ממשתמשים
• איך שולחים תכונות עשירות כמו כרטיסים, קרוסלות והצעות לשיחות באמצעות Business Messages API
• איך התכונה Business Messages שולחת את ההודעות שלכם

Codelab זה מתמקד ביצירת הנציג הדיגיטלי הראשון שלך.

מה צריך?

• הרשמה לחשבון פיתוח בחינם ב-Business Communications
• בקר באתר שלנו למפתחים לקבלת הוראות
• מכשיר Android בגרסה 5 ואילך או מכשיר iOS עם אפליקציית מפות Google
• ניסיון בתכנות אפליקציות אינטרנט
• חיבור לאינטרנט!

2. תהליך ההגדרה

הערה: ניתן להשתמש ב-Business Communications API כדי להשלים את כל המשימות ב-Codelab הזה. עם זאת, נשתמש ב-Business Communications Developer Console כדי להפחית את המורכבות של המשימה שצריך לבצע. כשאפשרות השימוש ב-API תהיה זמינה, ניידע אתכם ונציג אותה במסמכים שלנו.

מפעילים את ממשקי ה-API.

ב-Codelab הזה, מאחר שנעבוד עם אפליקציית Django, נסתמך על Cloud Build API כדי לפרוס את האפליקציה ב-App Engine. לחלופין, אם אתם משתמשים ב-ngrok, אין צורך להפעיל את Cloud Build API.

כך מפעילים את Cloud Build API:

1. פותחים את Cloud Build API במסוף Google Cloud.
2. לוחצים על Enable.

יצירת חשבון שירות

עליך ליצור חשבון שירות כדי לגשת לממשק ה-API של 'הודעות עסקיות' ו-Business Messages. פועלים לפי השלבים במסמכי התיעוד כדי ליצור חשבון שירות ב-Business Communications Developer Console.

פריסה של קוד המתחילים של Django Python EchoBot

במסוף, משכפלים את Django Echo Bot Sample בספריית העבודה של הפרויקט באמצעות הפקודה הבאה:

$ git clone https://github.com/google-business-communications/bm-bonjour-meal-django-starter-code

מעתיקים את קובץ פרטי הכניסה מסוג JSON שנוצר עבור חשבון השירות אל תיקיית המשאבים של הדוגמה, ומשנים את השם של פרטי הכניסה ל-'bm-agent-service-account-credentials.json'.

bm-bonjour-meal-django-starter-code/bonjourmeal-codelab/step-1/resources/bm-agent-service-account-credentials.json

במסוף, עוברים לספריית שלב 1 של הדוגמה.

מריצים את הפקודות הבאות במסוף כדי לפרוס את הדוגמה:

$ gcloud config set project PROJECT_ID*
$ gcloud app create
$ gcloud app deploy

• PROJECT_ID הוא מזהה הפרויקט שבו השתמשתם כדי להירשם באמצעות ממשקי ה-API.

שימו לב לכתובת ה-URL של האפליקציה שנפרסה בפלט של הפקודה האחרונה:

Deployed service [default] to [https://PROJECT_ID.appspot.com]

הקוד לתחילת הדרך שפרססת מכיל אפליקציית אינטרנט עם תגובה לפעולה מאתר אחר (webhook) לקבלת הודעות מ-Business Messages. האפליקציה מחזירה את ההד של ההודעות למשתמשים, ויכולה להציג חלק מהתכונות העשירות שזמינות בממשק השיחה.

הגדרת הספר הדיגיטלי

עכשיו, כשהשירות שלך נפרס, צריך להשתמש בכתובת ה-URL של האפליקציה כדי להגדיר את ה-webhook URL בדף הגדרות החשבון ב-Business Communications Developer Console.

כתובת ה-webhook URL תהיה כתובת ה-URL של האפליקציה + '/callback/'. לדוגמה, השם יכול להיראות כך: https://PROJECT_ID.appspot.com/callback/

נכנסים לדף הגדרות החשבון ב-Business Communications Console. בפינה השמאלית העליונה, מתחת לסרגל הניווט, אמור להופיע שם הפרויקט ב-GCP. אם מופיע תפריט נפתח, בוחרים את הפרויקט הרלוונטי ב-GCP.

ממלאים את הפרטים של איש הקשר הטכני ואז מעדכנים את ה-webhook באמצעות כתובת ה-webhook URL של האפליקציה שנפרסה.

לוחצים על Save (שמירה) לצד קובץ העזר של פרויקט GCP.

3. יצירת הנציג הראשון

שימוש ב-Business Communications Developer Console

ב-Business Communications Console, לוחצים על הלוגו בפינה הימנית העליונה כדי לחזור למרכז הבקרה של המסוף, ואז לוחצים על Create נציג (יצירת נציג). אפשר ליצור מותג בזמן שיוצרים את הנציג. בשדה סוג הנציג, בוחרים באפשרות Business Messages ומוודאים שפרטי השותף נכונים.

בקטע מותג, מקלידים את שם המותג שרוצים ליצור.המותג הוא העסק שאיתו אתם עובדים, והצרכנים יכולים לתקשר עם הנציג. בשדה Agent name מציינים מה רוצים שהמשתמשים יראו בשיחה של Business Messages. במקרה של ארוחת בונג'ור הפיקטיבית, חברת הרכבת של בונז'ור היא חברת הרכבות שמנהלת את מסעדות בונז'ור ארוחות. לכן אציין את Bonjour Rail בתור המותג ואת Bonjour Meal בתור הנציג.

הנציג הוא הישות בשיחה שמייצגת את המותג.

לוחצים על יצירת נציג ונותנים למסוף לעשות כמה פעולות קסומות. תוך כמה שניות המערכת תשלח את הבקשה ל-Business Communications API ליצירת המותג והנציג. אפשר להשתמש ב-Business Communications API ישירות כדי ליצור נציג וליצור מותג. כדאי לעיין במסמכי התיעוד כדי לראות איך בקשת curl תיראה אם תבצע את אותם פעולות שהמסוף מבצע.

ניהול השיחה הראשונה

פותחים את הנציג שיצרתם כרגע. יופיע דף סקירה כללית שבו תוכלו להתחיל לבדוק את פרטי הנציג. כדאי לראות את כתובות ה-URL לבדיקת הנציג. כתובות ה-URL האלה משמשות להפעלת פלטפורמת השיחה במכשיר.

כדי להעתיק את כתובת ה-URL לבדיקה, אפשר ללחוץ על כל אחד מהצ'יפים. כמובן, צריך להעתיק את כתובת ה-URL לבדיקה של המכשיר שנמצא בהישג יד כדי לבדוק אותו. שולחים את ההודעה שהועתקה למכשיר בכל דרך שרוצים.

כשנמצאים בנייד, מקישים על הקישור כדי להפעיל את מרכז האפליקציות של Business Messages, כאשר כתובת ה-URL לבדיקה של הנציג מאוכלסת מראש.

מקישים על הפעלה כדי להפעיל את שטח השיחה של הנציג.

שוחחו עם הנציג כדי להבין למה הוא יכול. ברוב המקרים, תראו שפלטפורמת השיחה רק תשמיע בקול את ההודעות שלכם. שולחים לו משהו כמו "שלום עולם!" ותראו שהנציג ישלח לכם את אותה הודעה.

האפליקציה שנפרסה כוללת גם לוגיקה כלשהי שמאפשרת להציג את התכונות העשירות הזמינות ב-Business Messages.

• אם תשלח 'כרטיס', יופעל כרטיס עשיר
• אם שולחים "צ'יפים", המערכת מפעילה צ'יפים של הצעות
• אם שולחים את המילה 'קרוסלה', מפעילים קרוסלה של כרטיסים מתקדמים

כל הכבוד! זוהי שיחת הפתיחה של הנציג איתך!

כל אחת מהתכונות העשירות מאפשרת לספק הקשר טוב יותר לאדם שמתקשר עם הנציג. תוכלו לשלוח נכסים גרפיים בכרטיסים מתקדמים כדי להעביר רעיונות בצורה טובה יותר, או להשתמש בצ'יפים של הצעות כדי להנחות את השיחה.

עדכון הודעת הפתיחה ושימוש בצ'יפים של שיחות

נתאמן קצת ב-Play Console, נראה איך לערוך את הודעת הפתיחה של הנציג ולהשתמש בצ'יפים של הצעות כדי לעזור למשתמשים לתקשר.

נכנסים לדף סקירה כללית של הנציג ובוחרים באפשרות פרטי הנציג. גוללים למטה לקטע של הודעת הפתיחה והנושאים לשיחה.

מעדכנים את הודעת הפתיחה (שדה הקלט הצהוב) כך שיהיה כתוב:

אנחנו שמחים לראות אותך בסוכנות נושאת להתחלת ארוחות בונז'ור. אוכל לחזור להודעות שלך ולהראות לך חלק מהתכונות העשירות הנתמכות בפלטפורמה. מומלץ לנסות את ההצעות האלה!

לוחצים על + הוספת נושא לשיחה כפי שמוסבר בתיבה הסגולה שבתמונה למעלה כדי להוסיף רעיונות לפתיחת שיחה כדי להפעיל צ'יפים של הצעות, קרוסלה וכרטיס. הנושאים לשיחה שאתם מוסיפים צריכים לכלול רכיב טקסט ורכיב postbackData. הטקסט הוא מה שמוצג למשתמש, ונתוני ה-PostBack הם מה שנשלח ל-webhook של הנציג. התגובה לפעולה מאתר אחר (webhook) מנתחת את נתוני הדיווח החוזר על ההמרה (PostBack) ותשלח למשתמש את התגובה המתאימה.

פרטי הנציג במסוף נראים כך אחרי השינוי:

בצד שמאל של המסוף תופיע תצוגה מקדימה של הנציג. שמת לב איך הודעת הפתיחה משקפת את מה ששיניתם עכשיו ואת צ'יפים של ההצעות שמתחתיה?

זהו כלי נהדר שעוזר להבין איך תהיה חוויית המשתמש. תוכלו להשתמש בה בזמן בניית הסוכן שלכם ותכנון המסלולים להמרת הלקוח שבהם תרצו לתמוך.

לצערנו, לא נוכל לראות את השינויים האלה בשיחה מיידית, מכיוון שהנתונים הקודמים נשמרים במטמון בתשתית של Business Messages. המטמון מנוקה כל שעתיים בערך, לכן כדאי לנסות שוב מחר.

בינתיים, נראה כיצד הכל פועל במסגרת העבודה.

4. המערכת מנתחת את הקוד לתחילת הדרך

אופציונלי: הקטע הזה הוא מידע בלבד. במהלך הבדיקה של קוד המקור נלמד קצת על Django, ובנוסף תקבלו מושג על האופן שבו ההודעות מתקבלות ב-webhook ואיך התשובות נשלחות באמצעות ה-Python API.

תצוגה של קוד המקור בגובה 3,000 רגל

הקוד לתחילת הדרך שפרסתם מהדהד את ההודעות למשתמשים, ויכול להציג כרטיס מתקדם, קרוסלה או צ'יפים של הצעות. נבחן לעומק את קוד המקור כדי להבין איך הוא פועל. לאחר מכן נחשוב מה צריך לשנות.

הקוד לתחילת העבודה הוא פרויקט Django. בחלק מאוחר יותר בסדרה הזו של Codelab, נשתמש ב-Google Datastore כדי לשמור נתונים כמו עגלות קניות ושיחות משויכות. אם לא השתמשתם ב-Django בעבר, אל דאגה, הוא פשוט למדי ובסופו של ה-Codelab הזה תבין איך הוא עובד.

ברמה הכללית, Django מנתב כתובות URL לתצוגות, ולוגיקת התצוגה יוצרת תבנית שמעובדת בדפדפן. בואו נתבונן ב-urls.py של הפרויקט.

bm-django-echo-bot/bmcodelab/urls.py [שורות 31-37]

from django.urls import include, path
import bopis.views as bopis_views

urlpatterns = [
    path('', bopis_views.landing_placeholder),
    path('callback/', bopis_views.callback),
]

כאן מוגדרים שני נתיבים, ולכן Django יכול להפעיל לוגיקה אם שתי כתובות ה-URL האלה מזוהות. מכיוון שכתובת ה-URL של הפרויקט היא https://PROJECT_ID.appspot.com/, הנתיבים שהפרויקט מודע להם הם:

• https://PROJECT_ID.appspot.com/
• https://PROJECT_ID.appspot.com/callback/

שני נתיבי ה-URL מפנים אל bopis_views ממקור bopis/views.py. הבה נבחן מה קורה בקובץ הזה. כדי להתחיל, נבין קודם כל את bopis_views.landing_placeholder.

bm-django-echo-bot/bonjourmeal-codelab/step-1/bopis/views.py [שורות 302-309]

... 
def landing_placeholder(request):
    return HttpResponse("<h1>Welcome to the Bonjour Meal Codelab</h1>
    <br/><br/>
    To message your Bonjour Meal agent, go to the Developer Console and retrieve
    the Test URLs for the agent you have created as described in the codelab
    <a href='https://codelabs.developers.google.com/codelabs/'>here</a>.")
...

ההיגיון הזה מופעל על ידי שרת האינטרנט שלך כשהוא מקבל בקשת אינטרנט שמפנה לשורש של הפרויקט. לא קורה כאן שום דבר מיוחד: אנחנו פשוט מחזירים תגובת HTTP שמכילה מעט HTML בחזרה לדפדפן שהגדיר את הבקשה. כן, אפשר לפתוח את כתובת ה-URL הבסיסית של הפרויקט, אבל אין צורך לעשות הרבה מעבר ל-codelab הזה.

כתובת ה-URL האחרת מפנה לפונקציה בשם callback, גם היא ב-bopis/views.py. בואו נסתכל על הפונקציה הזו.

bm-django-echo-bot/bopis/views.py [שורות 60-101]

...
def callback(request):
    """
    Callback URL. Processes messages sent from user.
    """
    if request.method == "POST":
        request_data = request.body.decode('utf8').replace("'", '"')
        request_body = json.loads(request_data)

        print('request_body: %s', request_body)

        # Extract the conversation id and message text
        conversation_id = request_body.get('conversationId')
        print('conversation_id: %s', conversation_id)

        # Check that the message and text body exist

        if 'message' in request_body and 'text' in request_body['message']:
            message = request_body['message']['text']

            print('message: %s', message)
            route_message(message, conversation_id)
        elif 'suggestionResponse' in request_body:
            message = request_body['suggestionResponse']['postbackData']

            print('message: %s', message)
            route_message(message, conversation_id)
        elif 'userStatus' in request_body:
            if 'isTyping' in request_body['userStatus']:
                print('User is typing')
            elif 'requestedLiveAgent' in request_body['userStatus']:
                print('User requested transfer to live agent')

        return HttpResponse("Response.")

    elif request.method == "GET":
        return HttpResponse("This webhook expects a POST request.")
...

הלוגיקה כאן מנתחת את גוף הבקשה של הודעה או suggestionResponse, מעבירה את המידע הזה לפונקציה שנקראת route_message, ולאחר מכן מחזירה HttpResponse בחזרה לתשתית Business Messages כדי לאשר את קבלת ההודעה.

זוהי פונקציה חשובה. ההיגיון הזה הוא ה-webhook של אפליקציית האינטרנט, שמקבלת הודעות ממשתמשים שמקיימים אינטראקציה עם הנציג שלך. אפשר להרחיב את התגובה לפעולה מאתר אחר (webhook) כדי לשלוח הודעות לכלי אוטומציה כמו Dialogflow כדי להבין מה המשתמש אומר ולייצר תשובה על סמך ההסקה הזו. יש לך גם אפשרות להעביר את ההודעה כדי שהמשתמש יוכל ליצור קשר עם נציג תמיכה אנושי. בתרשים הבא:

מערכת Business Messages שולחת את תוכן ההודעה כמטען ייעודי (payload) של JSON אל ה-webhook שלכם, שבו היא מנותבת לנציג תמיכה או לוגיקה כלשהי לתגובה כבוט. מנגנון הניתוב הזה, במקרה שלנו, הוא route_message. בואו נראה.

bm-django-echo-bot/bopis/views.py [שורות 105-122]

...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    else:
        echo_message(message, conversation_id)
...

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

bm-django-echo-bot/bopis/views.py [שורות 40-42]

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
...

כלומר, הבוט מנתח הודעות שמכילות באופן ספציפי אחת מהמחרוזות שהצבנו ב-postback_data של רעיונות לפתיחת שיחה מהשלב הקודם ב-Codelab הזה. אם אף אחת מהמחרוזות האלה לא מופיעה, היא פשוט מעבירה את ההודעה לפונקציה בשם echo_message, שאתם יכולים לדמיין... היא תהווה את ההודעות.

שליחת הודעות

לכן, סביר להניח שבשלב הזה יהיה לכם מושג לגבי האופן שבו הודעות מתקבלות באפליקציית האינטרנט. כל התהליך מתבצע באמצעות תגובה לפעולה מאתר אחר (webhook).

אבל איך האפליקציה שולחת הודעה יוצאת למשתמש באמצעות Business Messages?

כשהתשתית שלכם מגיבה למשתמש, אתם שולחים את התגובה ל-Business Messages API, שמעביר את ההודעה למשתמש.

ב-Business Messages API יש ספריות ב-Python, ב-Node.js וב-Java. יש לנו גם ממשק API ל-REST שאפשר לשלוח אליו בקשות ישירות אם התשתית שלכם לא בשפה שיש לנו ספרייה. במאמר שליחת הודעות מוסבר איך cURL משמש לשליחת הודעה למזהה שיחה ספציפי.

לצורך ה-Codelab הזה, נתמקד בשימוש בספריית הלקוח של Python שכבר משולבת בקוד Bonjour Meal Starter שנפרס ב-App Engine בפרויקט GCP, או פועלת באופן מקומי באמצעות ngrok.

בואו נסתכל על הפונקציה echo_message ונראה איך אנחנו משתמשים ב-API כדי לשלוח את ההודעה ל-Business Messages.

bm-django-echo-bot/bopis/views.py [שורות 199-212]

...
def echo_message(message, conversation_id):
    '''
    Sends the message received from the user back to the user.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text=message)

    send_message(message_obj, conversation_id)
...

בפונקציה הזו, נוצר אובייקט BusinessMessagesMessage, ומשתנה ההודעה מועבר לפונקציה echo_message. לאחר יצירת האובייקט, האובייקט מועבר אל send_message יחד עם מזהה השיחה.

bm-django-echo-bot/bopis/views.py [שורות 214-236]

...
def send_message(message, conversation_id):
    '''
    Posts a message to the Business Messages API, first sending
    a typing indicator event and sending a stop typing event after
    the message has been sent.

    Args:
        message (obj): The message object payload to send to the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    credentials = ServiceAccountCredentials.from_json_keyfile_name(
        SERVICE_ACCOUNT_LOCATION,
        scopes=['https://www.googleapis.com/auth/businessmessages'])

    client = bm_client.BusinessmessagesV1(credentials=credentials)

    # Create the message request
    create_request = BusinessmessagesConversationsMessagesCreateRequest(
        businessMessagesMessage=message,
        parent='conversations/' + conversation_id)

    bm_client.BusinessmessagesV1.ConversationsMessagesService(
        client=client).Create(request=create_request)
...

כל מה שהפונקציה send_message עושה הוא להשתמש בפרטי הכניסה של חשבון השירות שלך כדי לאמת שיש לך אפשרות לשלוח הודעות בשיחה הזו, ליצור לקוח Business Messages וליצור בקשה לשלוח את ההודעה ל-conversation ID הנתון.

גם תכונות עשירות משתמשות בפונקציית send_message הזו, אבל ההודעות שהן יוצרות הן ספציפיות לכרטיסים מתקדמים, קרוסלות וצ'יפים של הצעות. כרטיסים מתקדמים וקרוסלות עשויים לכלול נכסים גרפיים, ואילו צ'יפים של הצעות כוללים postback_data, כך שלוגיקת הקריאה החוזרת יכולה לנתח אותה כראוי.

אחרי שראינו איך לשלוח הודעה, נראה איך הדוגמה שולחת כרטיסים מתקדמים, קרוסלות וצ'יפים של הצעות. בקטע הבא נשנה את קוד המקור כך שישלח הודעות עם חלק מהתכונות העשירות האלה.

כשיתאים לך, נתאים אישית את הנציג של ארוחה בונז'ור.

5. התאמה אישית של הנציג

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

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

בהמשך של ה-Codelab הזה, נוסיף את הסוכן לפרטים הבאים:

• להוסיף לוגו אמיתי
• הודעת פתיחה משופרת
• מספקים מידע על שעות הפעילות
• ליידע את המשתמש שבקרוב תהיה אפשרות לקנות פריטים באינטרנט
• שימוש בצ'יפים של הצעות לשיחות כדי לשפר את השיחה

נעזר ב-Business Communications Console כדי לעדכן את הלוגו ואת הודעת הפתיחה, אבל תמיד אפשר להשתמש בממשקי Business Communications API ישירות כדי לעשות את זה. לאחר מכן, נצטרך לעדכן את קוד המקור כדי לשלוח הודעות מתאימות לצורך מסירת מידע לגבי שעות הפעילות. בקרוב נוסיף ל-Bonjour Meal תכונת קנייה באינטרנט. לאחר מכן נחזור ל-Business Communications Console וניצור צ'יפים של הצעות לשיחות שיעזרו לכם להוביל את השיחה לחוויות נתיב מהנה שבהן הנציג הדיגיטלי תומך.

הוספת לוגו

ב-Business Communications Console, בוחרים את הנציג ועוברים לקטע פרטי הנציג. אנחנו רוצים לעדכן את הלוגו של העסק, כפי שמצוין בצהוב למטה.

לוחצים על העלאה כדי לבחור תמונה להעלאה או לייבוא מכתובת URL.

עיינו בהנחיות לעיצוב לוגו במסמכי התיעוד כדי ללמוד על השיטות המומלצות לשימוש בסמלי לוגו משלכם.

נעלה את הלוגו שנמצא בקוד המקור ששכפלתם בתחילת ה-Codelab הזה. אפשר למצוא אותו בספרייה ./assets/ של המאגר, והקובץ נקרא 'bonjour_meal-logo.png'. ניתן לגרור את הקובץ לתוך העזר בדפדפן האינטרנט, יוצג כלי לעריכת אור לשינוי איכות התמונה והחיתוך. כוונן את רזולוציית התמונה וחתוך כך שהתמונה תהיה קטנה מהמגבלה של 50KB או שווה לה. כשתהיו מרוצים מהתמונה, יש ללחוץ על סימן הווי שבעיגול הכחול כדי לאשר, ואז ללחוץ על בחירה בחלק התחתון של חלון העזר.

לסיום, לוחצים על שמירה בפינה השמאלית העליונה של הדף פרטי הנציג. זה ייקח זמן מה עד שהשינויים יבואו לידי ביטוי במכשיר שלך, כי פרטי הנציג נשמרים במטמון של השרתים שלנו והם אמורים להופיע תוך שעתיים ממועד השינוי.

עדכון הודעת הפתיחה

כבר עשינו בעבר ב-Codelab הזה עדכון של הודעת הפתיחה. נחזור על הפעולה, אבל הפעם נגדיר הודעת פתיחה שתהיה רלוונטית יותר לתהליך שעובר המשתמש בארוחת בונז'ור.

ב-Business Communications Console, בוחרים את הנציג ונכנסים לפרטי הנציג. גוללים למטה עד שמופיע שדה הקלט הודעת פתיחה, שבו אפשר לעדכן את ההודעה.

מתוך ידיעה שנוסיף רעיונות לפתיחת שיחה, נוכל להתייחס אליהם בהודעת הפתיחה שלנו. בשדה הקלט, נחליף אותו בטקסט הבא:

"Welcome to Bonjour Meal. אני העוזר הדיגיטלי שלך, אשמח לעזור לך עם שאלות לגבי ארוחת הבוקר הבהירה. אפשר לנסות כמה מהאפשרויות הבאות."

לסיום, לוחצים על שמירה בפינה השמאלית העליונה של הדף פרטי הנציג. שוב, ייקח זמן מה עד שהשינוי הזה ישתקף עקב מנגנון השמירה במטמון שלנו, שנועד לוודא שהכול מהיר!

מסירת מידע על שעות הפעילות

כדי לספק את המידע הזה למשתמשים, נשלח למשתמש הודעה מותאמת אישית באמצעות Business Messages API.

חשוב לזכור שהודעות מנותחות בפונקציה route_message של views.py. הפונקציה מנרמלת תחילה את המחרוזת ולאחר מכן מתחילה לבדוק אם ההודעה המנורמלת תואמת לאחד מהפרמטרים המקודדים בתוך הקוד. כדי לפשט את הדברים, נוסיף עוד תנאי שבו נבדוק אם ההודעה המנורמלת שווה לערך קבוע חדש שנקרא CMD_BUSINESS_HOURS_INQUIRY ותכיל את הערך "business-hours-inquiry". אם התנאי מקבל את הערך True, נפעיל פונקציה בשם send_message_with_business_hours.

הפונקציה route_message תיראה עכשיו כך:

bm-django-echo-bot/bopis/views.py

...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
        send_message_with_business_hours(conversation_id)
    else:
        echo_message(message, conversation_id)
...

כדי שהקוד יפעל, נצטרך לבצע שני שינויים נוספים. הראשון הוא להגדיר את CMD_BUSINESS_HOURS_INQUIRY לצד הקבועים האחרים, והשני הוא להגדיר בפועל את הפונקציה send_message_with_business_hours ולשלוח הודעה באמצעות Business Messages API.

נגדיר תחילה את הקבוע שבחלק העליון של הקובץ עם הצהרות קבועות אחרות:

bm-django-echo-bot/bopis/views.py

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
CMD_BUSINESS_HOURS_INQUIRY = 'business-hours-inquiry'
...

ועכשיו כדי להגדיר את send_message_with_business_hours. אפשר להגדיר את הפונקציה הזו בכל מקום בקובץ, בהתאם לתחביר המתאים של Python. הפונקציה הזו פשוט שולחת הודעה, בדומה ל-echo_message, אפשר להשתמש בה כתבנית כדי להגדיר את הפונקציה הזו.

bm-django-echo-bot/bopis/views.py

...
def send_message_with_business_hours(conversation_id):

    message = '''Thanks for contacting us! The hours for the store are:\n
    MON 8am - 8pm\n
    TUE 8am - 8pm\n
    WED 8am - 8pm\n
    THU 8am - 8pm\n
    FRI 8am - 8pm\n
    SAT 8am - 8pm\n
    SUN 8am - 8pm
    '''

    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text=message)

    send_message(message_obj, conversation_id)
...

לכן, הבוט שלנו צריך להיות מסוגל להשיב את שעות הפעילות האלה למשתמש כשהוא שולח את ההודעה הבאה: "business-hours-inquiry". אפשר לצפות למשהו כזה:

לאחר פריסת קוד המקור ב-GCP, השינויים יופיעו באופן מיידי. אנחנו לא שומרים במטמון את אפליקציית האינטרנט ב-Google Cloud Platform באותו אופן שבו פרטי הסוכן נשמרים במטמון, כך שתוכלו לבדוק את החוויה הזו מיד.

אמנם יש כאן מומנטום מסוים לביצוע שינויים במקור, אבל בואו נערוך שינוי אחד נוסף שיאפשר למשתמש לברר לגבי קנייה באינטרנט. הנציג הדיגיטלי יחזור אליכם ויגיד שהתכונה עדיין לא זמינה, אבל כדאי לחזור ולבדוק מאוחר יותר.

הודעה למשתמש שבקרוב תהיה אפשרות לקנות באינטרנט

נערוך שינוי דומה כפי שעשינו כדי ליידע את המשתמש לגבי שעות הפעילות. הפעם, נציב את המידע בכרטיס מתקדם יחד עם תמונה מעניינת.

מנתחים את ההודעה המנורמלת ובודקים תנאי של קבוע שנקרא CMD_ONLINE_SHOPPING_INQUIRY שהערך שלו מוגדר כ-"online-shopping-inquiry", שמפעיל את send_online_shopping_info_message אם התנאי מתקיים.

bm-django-echo-bot/bopis/views.py

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
CMD_BUSINESS_HOURS_INQUIRY = 'business-hours-inquiry'
CMD_ONLINE_SHOPPING_INQUIRY = 'online-shopping-inquiry'
...
...
...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
        send_message_with_business_hours(conversation_id)
    elif normalized_message == CMD_ONLINE_SHOPPING_INQUIRY:
        send_online_shopping_info_message(conversation_id)
    else:
        echo_message(message, conversation_id)
...

עכשיו צריך להגדיר את send_online_shopping_info_message. אנחנו רוצים שההודעה הזו תישלח בכרטיס מתקדם עם תמונה, לכן נעתיק את הפונקציה send_rich_card שתשמש כתבנית להגדרה של send_online_shopping_info_message.

קודם כל, צריך לעדכן את הטקסט החלופי כך שיכלול הודעה מתאימה. הטקסט החלופי משמש אם המכשיר לא יכול לקבל כרטיס מתקדם מסיבה כלשהי. בשלב הבא צריך לעדכן את השדה BusinessMessagesRichCard כך שיכלול כותרת, תיאור, הצעות ושדה מדיה רלוונטיים. הפונקציה שלנו אמורה להיראות כך:

bm-django-echo-bot/bopis/views.py

...
def send_online_shopping_info_message(conversation_id):
    fallback_text = ('Online shopping will be available soon!')

    rich_card = BusinessMessagesRichCard(
        standaloneCard=BusinessMessagesStandaloneCard(
            cardContent=BusinessMessagesCardContent(
                title='Online shopping info!',
                description='Thanks for your business, we are located in SF near the Golden Gate Bridge. Online shopping is not yet available, please check back with us in a few days.',
                suggestions=[],
                media=BusinessMessagesMedia(
                    height=BusinessMessagesMedia.HeightValueValuesEnum.MEDIUM,
                    contentInfo=BusinessMessagesContentInfo(
                        fileUrl=SAMPLE_IMAGES[4],
                        forceRefresh=False
                    ))
                )))

    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        richCard=rich_card,
        fallback=fallback_text)

    send_message(message_obj, conversation_id)
...

יש! עכשיו הסוכן הדיגיטלי שלנו יכול להשיב למשתמשים שמבררים לגבי קניות באינטרנט. נכון לעכשיו, הסוכן הדיגיטלי שלנו עדיין לא תומך בקניות אונליין, ולכן אנחנו מספקים הודעה למשתמש כדי להודיע לו שהתכונה תהיה זמינה בקרוב. כך נראה הסוכן הדיגיטלי שלנו כשמשתמש שואל לגבי קנייה באינטרנט.

בדיוק כמו השינוי הקודם שעשינו כדי לאפשר למשתמשים לברר לגבי שעות הפעילות של העסק, ניתן לראות את השינוי הזה באופן מיידי אם משתמשים ב-ngrok, או מיד לאחר פריסת הקוד ב-GCP App Engine.

בחלק הבא נשתמש בנקודות פתיחה לשיחה ובצ'יפים של הצעות כדי לכוון את השיחה אל הנתיב המאושר.

שימוש בצ'יפים לניהול השיחה

עשינו כמה שינויים בקוד המקור ופרסנו את הסוכן הדיגיטלי המעודכן, אבל אנחנו אף פעם לא מצפים ממשתמשים שיזינו פרטים כמו "business-hours-inquiry" או "online-shopping-info" כדי לברר על העסק. נעדכן את הנושאים לשיחה כך שכאשר השיחה תיפתח, המשתמש יקבל לא רק הודעת פתיחה נחמדה, אלא גם יוצגו בו רעיונות לפתיחת שיחה.

עוברים למסוף התקשורת העסקי ועוברים לדף פרטי הנציג של הנציג. בעבר הגדרנו רעיונות לפתיחת שיחה עבור 'צ'יפים', 'כרטיס' ו'קרוסלה'. הם עדיין פועלים, אבל הם כבר לא רלוונטיים לפונקציה העסקית שלנו. אפשר להשאיר אותן בקבוצה כדי להמשיך להציג את התכונות העשירות האלה, או להסיר אותן. כך הנציג הדיגיטלי יציג רעיונות לפתיחת שיחה ספציפית עבור העסק 'ארוחות בונז'ור'.

אנחנו ניצור שני נושאים חדשים לשיחה. בפעם הראשונה, מגדירים את text כ-"What are your business hours?" ומגדירים את נתוני דיווח חוזר כ-"business-hours-inquiry". בתחילת השיחה השנייה, מגדירים את text 'האם אוכל לבצע רכישות כאן?' ומגדירים את נתוני הדיווח החוזר על המרה כ-'online-shopping-info'.

התוצאה אמורה להיות ההגדרה כמו צילום המסך הבא:

בדומה לשינויים אחרים שבוצעו ב-Business Communications Console, צריך להמתין זמן מה עד שניתן יהיה לראות את השינויים שבוצעו במכשיר הנייד.

עכשיו, אחרי שסיימנו לדבר על רעיונות לפתיחת שיחה, נרצה גם דרך לכוון את המשתמש לנתיב חיובי אחרי שהשיחה התחילה. אחרי ששולחים הודעה, אפשר להשתמש בצ'יפים לפי הקשר כדי לכוון את המשתמשים לתכונות אחרות שהסוכן הדיגיטלי מסוגל לבצע. לכן, נשלח הודעה עם הצעה לעשות משהו אחר עם הנציג, בכל פעם שהמשתמש יבקש לברר לגבי שעות הפעילות או קניות באינטרנט.

בסוף הפונקציה, מוסיפים את הפקודה הבאה:

bm-django-echo-bot/bopis/views.py

...
def send_online_shopping_info_message(conversation_id):
...
    # at the end of the function, send a message with suggestions
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text='Let us know how else we can help you:',
        fallback='Please let us know how else we can help you.',
        suggestions=[
            BusinessMessagesSuggestion(
                reply=BusinessMessagesSuggestedReply(
                text='Business hours',
                postbackData='business-hours-inquiry')
            ),
        ])

    send_message(message_obj, conversation_id)
...

# Let's do the same with the business hours
def send_message_with_business_hours(conversation_id):
...
    # at the end of the function, send a message with suggestions
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text='Let us know how else we can help you:',
        fallback='Please let us know how else we can help you.',
        suggestions=[
            BusinessMessagesSuggestion(
                reply=BusinessMessagesSuggestedReply(
                text='Can I purchase online?',
                postbackData='online-shopping-inquiry')
            ),
        ])

    send_message(message_obj, conversation_id)
...

לידיעתך, שדה הטקסט ב-BusinessMessagesSuggestion מוגבל ל-25 תווים, כפי שמתואר במסמכי התיעוד.

ריכזנו כאן כמה צילומי מסך של חוויית המשתמש הצפויה, על בסיס נושאים חדשים לשיחה ועל שימוש אסטרטגי בצ'יפים של הצעות.

6. מזל טוב

מזל טוב, יצרת בהצלחה את הנציג הדיגיטלי הראשון שלך ב-Business Messages!

פרסתם אפליקציית אינטרנט כדי לתמוך בנציג הדיגיטלי שלכם ב-Business Messages, השתמשתם ב-Business Communications Console כדי לשנות את הנציג ועיצבתם את חוויית המשתמש מול נציג דיגיטלי על ידי ביצוע שינויים בקוד המקור.

עכשיו אתם יודעים מהם השלבים החשובים הנדרשים כדי ליצור חוויה אינטראקטיבית ב-Business Messages, והאפשרויות הזמינות מכאן ואילך מדהימות. אפשר לתת לנציג תמיכה כדי לתמוך בחיפוש מלאי או להציג עגלת קניות כדי לעקוב אחרי מה שהמשתמש עשוי להתעניין בו. אתם יכולים להשתמש בקרוסלה כדי להציג פריטים בתפריט, ולהשתמש בהצעות כדי לאפשר למשתמשים לבחור את הפריטים שמעניינים אותם.

הנה הקדמה שממחישה איך זה עשוי להיראות.

איך יוצרים חוויית שיחה מעולה?

הנציגים הטובים ביותר מספקים למשתמש מידע הקשרי ונותנים לו פונקציונליות לאורך השיחה, כדי שיוכלו להיות מעורבים וליצור אינטראקציה עם העסק כמו בדרך כלל בטלפון או אפילו פנים אל פנים. חשבו איך הנושאים הבאים עשויים להתאים לשיחה שהייתם רוצים לנהל עם עסק שאתם עובדים איתו.

מתן הקשר והגדרת ציפיות

הוספת הקשר יכולה להיות כל דבר, החל מהצהרה מפורשת על האופן שבו תוכלו לעזור למשתמש ועד להציג את הנציג הדיגיטלי עם פרסונה שהמשתמש יוכל להתחבר אליה. נציגים מצליחים ב-Business Messages משתמשים בדמות הייצוגית כדי להראות למשתמשים עם מי הם משוחחים.

הגדרת הציפיות תלויה בחוויית המשתמש שאתם יוצרים. לדוגמה: אם הנציג תומך בחיפוש מלאי, קודם צריך ליידע את המשתמש שהזמינות עשויה להיות נמוכה לפני שהוא נותן את התשובה.

מתן פונקציונליות למשתמש

צרכנים יוצרים קשר עם עסקים כל הזמן. בעזרת Business Messages אפשר לבצע אינטראקציות מורכבות של משתמשים, החל מבירורים כמו בדיקת סטטוס ההזמנה ועד בדיקה אם פריט מסוים קיים במלאי. משתמשים רבים ממשיכים להתקשר לעסקים בטלפון כדי לקבל תשובות לשאלות שלהם, גם אם התשובות זמינות באתר של העסק. כתוצאה מכך, עסקים צריכים להשקיע יותר משאבים כדי לטפל בנפח השיחות, במיוחד בתקופות החגים.

שומרים על העניין של המשתמש

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

בעזרת תכונות עשירות כמו אינדיקטורים להקלדה, צ'יפים של הצעות, כרטיסי תצוגה עשירה וקרוסלות, אתם יכולים להנחות את המשתמש בחוויות המשתמש של הנתיב המאושר כדי לעזור לו להשלים משימות מסוימות, כמו להזמין מתפריט של פריטים. המטרה היא לצמצם את תנועת השיחות לקו הטלפון של העסק.

חשוב מאוד שהמשתמשים יפיקו תועלת מהשיחה. משתמשים שפונים לעסק באמצעות הודעות מצפים לקבל תשובות לשאלות במהירות. במקרים לא אידיאליים, הנציג הדיגיטלי לא יכול לקדם את השיחה, וכתוצאה מכך חוויית המשתמש תהיה גרועה. למרבה המזל, יש דרכים לעקוף את הבעיה, כמו להעביר את השיחה לנציג תמיכה. את המידע הזה נלמד ב-Codelab בעתיד.

מה השלב הבא?

כשתהיו מוכנים, כדאי לעיין בכמה מהנושאים הבאים כדי לקבל מידע על אינטראקציות מורכבות יותר שאפשר להשיג ב-Business Messages

• חיי נציג: יצירה והפעלה
• דרישות והנחיות
• הנחיות לסמלי לוגו
• כל המדריכים

מסמכי עזר

• SuggestedReply
• מסמך עזר בנושא הודעות של Business Messages
• הגדרת JSON עבור RichCard