ซื้อของออนไลน์แบบรับสินค้าที่ร้าน: อาหารบงชูร์ - ตอนที่ 1 - เริ่มต้นใช้งาน

1. บทนำ

637766505206e0a1.png c604dca3ca211399.png

อัปเดตล่าสุด: 2022-05-11

ยินดีต้อนรับสู่ Business Messages

Codelab นี้เป็นการแนะนำการผสานรวมกับ Business Messages ซึ่งช่วยให้ลูกค้าติดต่อกับธุรกิจที่คุณจัดการผ่าน Google Search และ Maps ได้ คุณอาจเป็นธุรกิจที่ต้องการผสานรวมกับ Business Messages โดยตรง หรืออาจทำงานที่ผู้ให้บริการซอฟต์แวร์อิสระที่สร้างโซลูชันการรับส่งข้อความสำหรับธุรกิจที่คุณทำงานด้วย หรืออาจเพิ่งพบ Business Messages และต้องการทดลองใช้แพลตฟอร์มนี้

ไม่ว่าคุณจะมาที่นี่ด้วยเหตุผลใดก็ตาม Codelab นี้เป็นวิธีที่ยอดเยี่ยมในการเริ่มต้นใช้งาน เมื่อสิ้นสุดการฝึก คุณจะมีเอเจนต์ดิจิทัลตัวแรกที่ผู้ใช้โต้ตอบด้วยได้ เมื่อพร้อมที่จะเปิดตัวในข้อความธุรกิจหลังจากปรับปรุงอีกเล็กน้อย คุณก็จะมีโอกาสเข้าถึงลูกค้าหลายล้านคน

อะไรคือคุณสมบัติของเอเจนต์ดิจิทัลที่ดี

ข้อความธุรกิจคือแพลตฟอร์มการสนทนาที่มอบประสบการณ์คล้ายแอปบนอุปกรณ์เคลื่อนที่ ซึ่งช่วยให้ผู้บริโภคเชื่อมต่อกับธุรกิจได้โดยไม่ต้องติดตั้งแอปเพิ่มเติม เอเจนต์ดิจิทัลคือตรรกะที่ลูกค้าโต้ตอบด้วย โดยตรรกะจะได้รับการจัดการโดยเว็บแอปพลิเคชันที่ติดตั้งใช้งานในระบบคลาวด์หรือในโครงสร้างพื้นฐานของคุณ คุณจะตอบกลับผู้ใช้อย่างไรนั้นขึ้นอยู่กับคุณทั้งหมด ตัวแทนที่ดีที่สุดจะให้บริบทเพื่อกำหนดความคาดหวัง รักษาการมีส่วนร่วมของลูกค้า และมอบฟังก์ชันการทำงานเพื่อรองรับความต้องการของผู้ใช้

สิ่งที่คุณจะสร้าง

ในโค้ดแล็บนี้ คุณจะได้สร้างตัวแทนดิจิทัลใน Business Messages สำหรับบริษัทสมมติชื่อ Bonjour Meal ตัวแทนดิจิทัลนี้จะตอบคำถามง่ายๆ 2-3 ข้อ เช่น "คุณปิดทำการกี่โมง" หรือ "ฉันซื้อทางออนไลน์ได้ไหม"

ในโค้ดแล็บนี้ ผู้ใช้จะซื้อสินค้าผ่านตัวแทนดิจิทัลได้ โดยตัวแทนจะนำผู้ใช้ไปยังผู้ประมวลผลการชำระเงินเพื่อเก็บเงิน จากนั้นจะกำหนดเวลารับสินค้าสมมติในร้านค้า

ใน Codelab นี้ แอปของคุณจะทำสิ่งต่อไปนี้

  • ตอบคำถามผ่านชิปคำแนะนำ
  • แนะนําให้ผู้ใช้ถามคําถามที่เอเจนต์ดิจิทัลของคุณตอบได้
  • มอบฟีเจอร์การสนทนาที่สมบูรณ์เพื่อดึงดูดให้ผู้ใช้มีส่วนร่วมในการสนทนา

883b5a7f9f266276.png

สิ่งที่คุณจะได้เรียนรู้

  • วิธีนำเว็บแอปพลิเคชันไปใช้งานใน App Engine บน Google Cloud Platform หรือจะใช้ ngrok เพื่อทดสอบแอปพลิเคชันในเครื่องแบบสาธารณะก็ได้
  • วิธีกำหนดค่าบัญชี Business Messages ด้วยเว็บฮุคของเว็บแอปพลิเคชันเพื่อรับข้อความจากผู้ใช้
  • วิธีส่งฟีเจอร์สื่อสมบูรณ์ เช่น การ์ด ภาพสไลด์ และคำแนะนำในการสนทนาด้วย Business Messages API
  • วิธีที่ข้อความธุรกิจส่งข้อความของคุณ

Codelab นี้มุ่งเน้นการสร้างเอเจนต์ดิจิทัลตัวแรก

สิ่งที่คุณต้องมี

  • ลงทะเบียนบัญชีนักพัฒนาแอป Business Communications ฟรี
  • ดูวิธีการได้ที่เว็บไซต์ของนักพัฒนาซอฟต์แวร์
  • อุปกรณ์ Android ที่ใช้เวอร์ชัน 5 ขึ้นไป หรืออุปกรณ์ iOS ที่มีแอป Google Maps
  • ประสบการณ์ด้านการเขียนโปรแกรมเว็บแอปพลิเคชัน
  • การเชื่อมต่ออินเทอร์เน็ต

2. การเริ่มตั้งค่า

เปิดใช้ API

สำหรับโค้ดแล็บนี้ เราจะใช้ Cloud Build API เพื่อทำให้แอปพลิเคชันใช้งานได้ใน App Engine เนื่องจากเราจะทำงานกับแอปพลิเคชัน Django หรือหากใช้ ngrok คุณก็ไม่จำเป็นต้องเปิดใช้ Cloud Build API

วิธีเปิดใช้ Cloud Build API

  1. เปิด Cloud Build API ใน Google Cloud Console
  2. คลิกเปิดใช้

สร้างบัญชีบริการ

คุณต้องสร้างบัญชีบริการเพื่อเข้าถึง Business Communications API และ Business Messages API ทำตามขั้นตอนในเอกสารประกอบเพื่อสร้างบัญชีบริการภายใน Business Communications Developer Console

ติดตั้งใช้งานโค้ดเริ่มต้นของ Django Python EchoBot

ในเทอร์มินัล ให้โคลนตัวอย่างบ็อต Echo ของ Django ไปยังไดเรกทอรีการทำงานของโปรเจ็กต์ด้วยคำสั่งต่อไปนี้

$ 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

ในเทอร์มินัล ให้ไปที่ไดเรกทอรี step-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 ของแอปพลิเคชันเพื่อตั้งค่า URL ของ Webhook ในหน้าการตั้งค่าบัญชีใน Business Communications Developer Console

URL ของเว็บฮุกจะเป็น URL ของแอปพลิเคชัน + "/callback/" เช่น https://PROJECT_ID.appspot.com/callback/

ไปที่หน้าการตั้งค่าบัญชีใน Business Communications Console คุณควรเห็นชื่อโปรเจ็กต์ GCP ที่มุมขวาบนใต้แถบนำทาง หากเห็นเมนูแบบเลื่อนลง ให้เลือกโปรเจ็กต์ GCP

กรอกรายละเอียดผู้ติดต่อด้านเทคนิค แล้วอัปเดต Webhook ด้วย URL ของ Webhook สำหรับแอปพลิเคชันที่ติดตั้งใช้งาน

ceb66c905ded40be.png

คลิกบันทึกข้างการอ้างอิงของโปรเจ็กต์ GCP

3. การสร้าง Agent รายการแรก

การใช้ Business Communications Developer Console

ใน Business Communications Console ให้คลิกโลโก้ที่ด้านซ้ายบนเพื่อกลับไปที่แดชบอร์ดของคอนโซล จากนั้นคลิกสร้างตัวแทน คุณสร้างแบรนด์ไปพร้อมๆ กับการสร้างเอเจนต์ เลือกข้อความธุรกิจสำหรับประเภทตัวแทน และตรวจสอบว่าข้อมูลพาร์ทเนอร์ถูกต้อง

ในแบรนด์ ให้พิมพ์ชื่อแบรนด์ที่คุณกำลังสร้าง แบรนด์คือธุรกิจที่คุณทำงานด้วย และผู้บริโภคสามารถโต้ตอบกับตัวแทนในลักษณะการสนทนาได้ ในชื่อตัวแทน ให้ระบุสิ่งที่ต้องการให้ผู้ใช้เห็นในการสนทนา Business Messages ในกรณีของ Bonjour Meal ที่สมมติขึ้น Bonjour Rail คือบริษัทรถไฟที่จัดการร้านอาหาร Bonjour Meal ดังนั้นฉันจะระบุ Bonjour Rail เป็นแบรนด์และ Bonjour Meal เป็นเอเจนต์

ตัวแทนคือเอนทิตีการสนทนาที่เป็นตัวแทนของแบรนด์

88a9798e6546eb4e.png

คลิกสร้างเอเจนต์ แล้วปล่อยให้คอนโซลสร้างสิ่งอัศจรรย์ คำขอนี้ใช้เวลาไม่กี่วินาทีในการส่งคำขอหลายรายการไปยัง Business Communications API เพื่อสร้างแบรนด์และตัวแทน คุณสามารถใช้ Business Communications API โดยตรงเพื่อสร้างตัวแทนและสร้างแบรนด์ ดูเอกสารประกอบเพื่อดูว่าคำขอ curl จะมีลักษณะอย่างไรในการทำสิ่งเดียวกันกับที่คอนโซลทำ

เริ่มการสนทนาครั้งแรก

เปิดเอเจนต์ที่คุณเพิ่งสร้างขึ้น คุณจะเห็นหน้าภาพรวมที่ช่วยให้คุณเริ่มตรวจสอบรายละเอียดของเอเจนต์ได้ ดูURL ทดสอบของตัวแทน URL เหล่านี้ใช้เพื่อเรียกใช้พื้นผิวการสนทนาในอุปกรณ์

f6bd8ded561db36f.png

คุณคัดลอก URL ของการทดสอบได้โดยคลิกชิปใดชิปหนึ่ง แน่นอนว่าให้คัดลอก URL ทดสอบสำหรับอุปกรณ์ที่คุณมีเพื่อใช้ทดสอบ ส่งข้อความที่คัดลอกนี้ไปยังอุปกรณ์ด้วยวิธีใดก็ได้

เมื่ออยู่ในอุปกรณ์เคลื่อนที่ การแตะลิงก์จะเรียกใช้ตัวเรียกใช้ตัวแทน Business Messages โดยมี URL การทดสอบตัวแทนที่ป้อนไว้ล่วงหน้า

แตะเปิดเพื่อเรียกใช้แพลตฟอร์มการสนทนาของเอเจนต์

2bf9f282e09062de.png

โต้ตอบกับเอเจนต์และดูว่าเอเจนต์ทำอะไรได้บ้าง โดยส่วนใหญ่แล้ว คุณจะเห็นว่าแพลตฟอร์มการสนทนาจะตอบกลับเฉพาะข้อความของคุณเท่านั้น ลองส่งข้อความ เช่น "Hello, World!" แล้วคุณจะเห็นว่าเอเจนต์จะส่งข้อความเดียวกันนั้นกลับมาให้คุณ

แอปพลิเคชันที่ติดตั้งใช้งานยังมีตรรกะบางอย่างเพื่อแสดงฟีเจอร์ที่หลากหลายซึ่งพร้อมใช้งานใน Business Messages

  • หากส่ง "card" คุณจะเรียกใช้ Rich Card
  • หากส่ง "ชิป" คุณจะเรียกใช้ชิปคำแนะนำ
  • หากส่ง "ภาพสไลด์" คุณจะเรียกใช้ภาพสไลด์ของ Rich Card

ยินดีด้วย นี่คือการสนทนาครั้งแรกของเอเจนต์กับคุณ

คุณสามารถใช้ฟีเจอร์สื่อสมบูรณ์แต่ละอย่างเพื่อให้บริบทที่ดีขึ้นแก่ผู้ที่สื่อสารกับตัวแทน ส่งชิ้นงานกราฟิกในการ์ดที่สมบูรณ์เพื่อสื่อสารไอเดียได้ดียิ่งขึ้น หรือใช้ชิปคำแนะนำเพื่อเป็นแนวทางในการสนทนา

การอัปเดตข้อความต้อนรับและการใช้ชิปการสนทนา

มาฝึกใช้ Developer Console กัน ดูวิธีแก้ไขข้อความต้อนรับของเอเจนต์ และใช้ประโยชน์จากชิปคำแนะนำเพื่อช่วยให้ผู้ใช้สื่อสารได้

ไปที่หน้าภาพรวมของเอเจนต์ แล้วเลือกข้อมูลเอเจนต์ เลื่อนลงไปที่ส่วนข้อความต้อนรับและหัวข้อเริ่มการสนทนา

4323f988216fa054.png

อัปเดตข้อความต้อนรับ (ช่องป้อนข้อมูลสีเหลือง) ให้มีข้อความดังนี้

ยินดีต้อนรับสู่เอเจนต์เริ่มต้นมื้ออาหารของ Bonjour ฉันสามารถพูดตามข้อความของคุณและแสดงฟีเจอร์ที่หลากหลายบางอย่างที่แพลตฟอร์มรองรับได้ ลองใช้คำแนะนำเหล่านี้ดู

คลิก + เพิ่มข้อความเริ่มสนทนาตามที่อ้างอิงในกรอบสีม่วงในรูปภาพด้านบนเพื่อเพิ่มข้อความเริ่มสนทนาเพื่อเรียกใช้ชิปคำแนะนำ, ภาพสไลด์ และการ์ด ข้อความเริ่มการสนทนาที่คุณเพิ่มต้องมีคอมโพเนนต์ข้อความและคอมโพเนนต์ postbackData ข้อความคือสิ่งที่แสดงต่อผู้ใช้ ส่วนข้อมูลการรายงานผล Conversion คือสิ่งที่ส่งไปยังเว็บฮุกของตัวแทน เว็บฮุคจะแยกวิเคราะห์ข้อมูลการรายงานผล Conversion และส่งการตอบกลับที่เหมาะสมไปยังผู้ใช้ 906bc74668a1b215.png

ข้อมูลตัวแทนในคอนโซลจะมีลักษณะดังนี้หลังจากแก้ไข

8e96b0a10edd20af.png

ทางด้านขวาของคอนโซล คุณจะเห็นตัวอย่างลักษณะของเอเจนต์ สังเกตไหมว่าข้อความต้อนรับแสดงถึงสิ่งที่คุณเพิ่งเปลี่ยนไป และชิปคำแนะนำที่อยู่ด้านล่าง

ซึ่งเป็นเครื่องมือที่ยอดเยี่ยมในการทำความเข้าใจเกี่ยวกับประสบการณ์ของผู้ใช้ คุณสามารถใช้เครื่องมือนี้ในขณะที่สร้างเอเจนต์และวางแผนเส้นทางของผู้ใช้ที่คุณต้องการรองรับ

ขออภัย เราจะไม่เห็นการเปลี่ยนแปลงเหล่านี้ในการสนทนาทันที เนื่องจากระบบจะแคชข้อมูลก่อนหน้าไว้ในโครงสร้างพื้นฐานของ Business Messages ระบบจะล้างแคชทุกๆ 2 ชั่วโมงโดยประมาณ คุณจึงลองใช้ฟีเจอร์นี้ได้ในวันพรุ่งนี้

ในระหว่างนี้ เรามาดูวิธีการทำงานทั้งหมดเบื้องหลังกัน

4. การวิเคราะห์โค้ดเริ่มต้น

ภาพรวมของซอร์สโค้ด

โค้ดเริ่มต้นที่คุณติดตั้งใช้งานจะส่งข้อความกลับไปยังผู้ใช้และแสดงการ์ดที่สมบูรณ์ แคร์รอสเซล หรือชิปคำแนะนำได้ มาดูซอร์สโค้ดแบบเจาะลึกเพื่อให้เข้าใจวิธีการทำงานกัน จากนั้นเราจะพิจารณาว่าต้องเปลี่ยนแปลงอะไรบ้าง

โค้ดเริ่มต้นเป็นโปรเจ็กต์ Django ในส่วนถัดไปของชุดโค้ดแล็บนี้ เราจะใช้ Google Datastore เพื่อบันทึกข้อมูล เช่น รถเข็นช็อปปิ้งและการสนทนาที่เกี่ยวข้อง ไม่ต้องกังวลหากคุณยังไม่เคยใช้ Django มาก่อน เพราะใช้งานง่ายมาก และเมื่อสิ้นสุด Codelab นี้ คุณจะได้เรียนรู้วิธีการทำงานของ Django

ในระดับสูง 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),
]

เรากำหนดเส้นทาง 2 เส้นทางไว้ที่นี่ Django จึงสามารถเรียกใช้ตรรกะได้หากระบบรู้จัก URL ทั้ง 2 รายการ หาก URL ของโปรเจ็กต์คือ https://PROJECT_ID.appspot.com/ เส้นทางที่โปรเจ็กต์รู้จักคือ

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

เส้นทาง URL ทั้ง 2 รายการอ้างอิงถึง 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>.")
...

เซิร์ฟเวอร์เว็บจะดำเนินการตามตรรกะนี้เมื่อได้รับคำขอเว็บที่ชี้ไปยังรูทของโปรเจ็กต์ ไม่มีอะไรซับซ้อนที่นี่ เราเพียงแค่ส่งกลับ HTTPResponse ที่มี 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.")
...

ตรรกะในที่นี้จะแยกวิเคราะห์เนื้อหาคำขอสำหรับ message หรือ suggestionResponse และส่งข้อมูลนั้นไปยังฟังก์ชันที่ชื่อ route_message จากนั้นจะส่ง HttpResponse กลับไปยังโครงสร้างพื้นฐานของ Business Messages เพื่อรับทราบการรับข้อความ

ซึ่งเป็นฟังก์ชันที่สำคัญ ตรรกะนี้คือเว็บฮุคของเว็บแอปพลิเคชัน ซึ่งจะรับข้อความจากผู้ใช้ที่โต้ตอบกับเอเจนต์ คุณสามารถขยาย Webhook เพื่อส่งข้อความไปยังเครื่องมืออัตโนมัติ เช่น Dialogflow เพื่อทำความเข้าใจสิ่งที่ผู้ใช้อาจพูดและสร้างการตอบกลับจากการอนุมานนั้น นอกจากนี้ คุณยังส่งต่อข้อความเพื่อให้ผู้ใช้ติดต่อกับตัวแทนแบบเรียลไทม์ได้ด้วย ดูแผนภาพต่อไปนี้

b10113f9d037e6a5.png

Business Messages จะส่งเนื้อหาข้อความเป็นเพย์โหลด JSON ไปยังเว็บฮุคของคุณ ซึ่งจะกำหนดเส้นทางไปยังตัวแทนแบบเรียลไทม์หรือไปยังตรรกะบางอย่างเพื่อตอบกลับในฐานะบ็อต กลไกการกำหนดเส้นทางดังกล่าวในกรณีนี้คือ 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 ของประโยคเริ่มการสนทนาจากขั้นตอนก่อนหน้าในโค้ดแล็บนี้โดยเฉพาะ หากไม่มีสตริงใดปรากฏขึ้น ระบบจะส่งต่อข้อความไปยังฟังก์ชันที่ชื่อ echo_message ซึ่งคุณอาจนึกออกว่า... จะส่งต่อข้อความ

การส่งข้อความ

ดังนั้นตอนนี้คุณควรมีแนวคิดเกี่ยวกับวิธีที่เว็บแอปพลิเคชันได้รับข้อความ โดยดำเนินการผ่านเว็บบุ๊ก

แต่แอปพลิเคชันจะส่งข้อความขาออกไปยังผู้ใช้โดยใช้ Business Messages ได้อย่างไร

a9475b1da93a83e8.png

เมื่อโครงสร้างพื้นฐานตอบกลับผู้ใช้ คุณจะส่งคำตอบไปยัง Business Messages API ซึ่งจะส่งข้อความไปยังผู้ใช้

Business Messages API มีไลบรารีใน Python, Node.js และ Java นอกจากนี้ เรายังมี REST API ที่คุณสามารถส่งคำขอได้โดยตรงหากโครงสร้างพื้นฐานไม่ได้อยู่ในภาษาที่เรามีไลบรารี ดูวิธีใช้ cURL เพื่อส่งข้อความไปยังรหัสการสนทนาที่เฉพาะเจาะจงได้ที่การส่งข้อความ

สำหรับวัตถุประสงค์ของโค้ดแล็บนี้ เราจะมุ่งเน้นที่การใช้ไลบรารีของไคลเอ็นต์ Python ที่ผสานรวมไว้แล้วในโค้ดเริ่มต้นของ Bonjour Meal ซึ่งได้ติดตั้งใช้งานใน 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 เพื่อให้ตรรกะการเรียกกลับแยกวิเคราะห์ได้อย่างเหมาะสม

ตอนนี้เราได้เห็นวิธีส่งข้อความแล้ว มาดูวิธีที่ตัวอย่างส่ง Rich Card, ภาพสไลด์ และชิปคำแนะนำกัน ในส่วนต่อไปนี้ เราจะแก้ไขซอร์สโค้ดเพื่อส่งข้อความที่มีฟีเจอร์สื่อสมบูรณ์บางอย่างเหล่านี้

เมื่อพร้อมแล้ว มาปรับแต่งเอเจนต์ Bonjour Meal กัน

5. การปรับแต่งเอเจนต์

หากคุณทำตาม Codelab มาจนถึงตอนนี้ เราควรจะเห็นเอเจนต์ที่สวยงามของเรา

906bc74668a1b215.png

โอเค ไม่สวยเท่าไหร่ จริงๆ แล้วมันดูค่อนข้างโล่งและไม่ได้แสดงถึงธุรกิจของเราได้ดีนัก โชคดีที่เรามีความรู้พื้นฐานเกี่ยวกับโค้ดที่รองรับเอเจนต์ และมีเครื่องมือที่จำเป็นในการปรับแต่งเอเจนต์ในแบบที่เราต้องการ

ในส่วนที่เหลือของ Codelab นี้ เราจะขยายเอเจนต์ด้วยสิ่งต่อไปนี้

  • ใส่โลโก้จริง
  • ข้อความต้อนรับที่ได้รับการปรับปรุง
  • ระบุข้อมูลเกี่ยวกับเวลาทําการ
  • แจ้งให้ผู้ใช้ทราบว่าการซื้อไอเทมทางออนไลน์จะพร้อมให้บริการเร็วๆ นี้
  • ใช้ชิปคำแนะนำแบบสนทนาเพื่ออำนวยความสะดวกในการสนทนา

เราจะใช้ประโยชน์จาก Business Communications Console เพื่อช่วยในการอัปเดตโลโก้และข้อความต้อนรับ แต่คุณก็มีตัวเลือกในการใช้ Business Communications API โดยตรงเพื่อดำเนินการเดียวกันนี้ได้เสมอ จากนั้นเราจะต้องอัปเดตซอร์สโค้ดเพื่อส่งข้อความที่เหมาะสมสำหรับการให้ข้อมูลเกี่ยวกับเวลาทำการ และ Bonjour Meal จะมีฟีเจอร์ช็อปปิ้งออนไลน์ในเร็วๆ นี้ เมื่อดำเนินการเสร็จแล้ว เราจะกลับไปที่ Business Communications Console และสร้างชิปคำแนะนำแบบสนทนาเพื่อช่วยนำการสนทนาไปสู่ประสบการณ์เส้นทางที่ราบรื่นซึ่งตัวแทนดิจิทัลรองรับ

จาก Business Communications Console ให้เลือกตัวแทนแล้วไปที่ข้อมูลตัวแทน เราจะอัปเดตโลโก้ธุรกิจตามที่อ้างอิงเป็นสีเหลืองด้านล่าง

eb6b8ac6b62387ee.png

คลิกอัปโหลด แล้วคุณจะเลือกรูปภาพเพื่ออัปโหลดหรือนำเข้าจาก URL ได้

ดูหลักเกณฑ์การออกแบบโลโก้ในเอกสารประกอบเพื่อดูแนวทางปฏิบัติแนะนำที่เราแนะนำให้ใช้โลโก้ของคุณเอง

มาอัปโหลดโลโก้ที่อยู่ในซอร์สโค้ดที่คุณโคลนไว้ตอนต้นของโค้ดแล็บนี้กัน คุณจะเห็นไฟล์นี้ในไดเรกทอรี ./assets/ ของที่เก็บ และไฟล์นี้มีชื่อว่า "bonjour_meal-logo.png" คุณสามารถลากไฟล์ไปยังโมดอลในเว็บเบราว์เซอร์ จากนั้นเครื่องมือแก้ไขแบบง่ายจะปรากฏขึ้นเพื่อปรับคุณภาพของรูปภาพและครอบตัด ปรับความละเอียดของรูปภาพและครอบตัดเพื่อให้รูปภาพมีขนาดไม่เกินข้อจำกัด 50 KB เมื่อพอใจกับรูปภาพแล้ว ให้คลิกเครื่องหมายถูกในวงกลมสีน้ำเงินเพื่อยืนยัน แล้วคลิกเลือกที่ด้านล่างของโมดอล

1856081f59623ae2.png

สุดท้าย ให้คลิกบันทึกที่ด้านขวาบนของหน้าข้อมูลตัวแทน การเปลี่ยนแปลงนี้อาจต้องใช้เวลาสักระยะจึงจะแสดงในอุปกรณ์ เนื่องจากระบบจะแคชข้อมูลตัวแทนไว้ในเซิร์ฟเวอร์ของเรา และควรแสดงภายใน 2 ชั่วโมงหลังจากการเปลี่ยนแปลง

อัปเดตข้อความต้อนรับ

เราได้อัปเดตข้อความต้อนรับไปแล้วก่อนหน้านี้ในโค้ดแล็บนี้ มาทำอีกครั้ง แต่คราวนี้ให้กำหนดค่าข้อความต้อนรับที่เกี่ยวข้องกับเส้นทางของผู้ใช้ Bonjour Meal มากขึ้น

ใน Business Communications Console ให้เลือกตัวแทนแล้วไปที่ข้อมูลตัวแทน เลื่อนลงไปจนกว่าจะเห็นช่องป้อนข้อความต้อนรับที่คุณอัปเดตข้อความได้

6598fec47021136e.png

เมื่อทราบว่าเราจะเพิ่มหัวข้อเริ่มการสนทนา เราก็สามารถอ้างอิงหัวข้อเหล่านั้นในข้อความต้อนรับได้ ในช่องป้อนข้อมูล ให้แทนที่ด้วยข้อความต่อไปนี้

"ยินดีต้อนรับสู่ Bonjour Meal ฉันเป็นผู้ช่วยที่จะตอบคำถามเกี่ยวกับ Bonjour Meal ลองใช้ตัวเลือกต่อไปนี้"

สุดท้าย ให้คลิกบันทึกที่ด้านขวาบนของหน้าข้อมูลตัวแทน ขอย้ำอีกครั้งว่าการเปลี่ยนแปลงนี้อาจใช้เวลาสักครู่จึงจะมีผลเนื่องจากกลไกการแคชของเราจะช่วยให้ทุกอย่างทำงานได้อย่างรวดเร็ว

การระบุข้อมูลเกี่ยวกับเวลาทำการ

เราจะส่งข้อความที่กำหนดเองให้ผู้ใช้โดยใช้ Business Messages API เพื่อให้ข้อมูลนี้แก่ผู้ใช้

คุณอาจจำได้ว่าข้อความจะได้รับการแยกวิเคราะห์ในฟังก์ชัน route_message ของ views.py ฟังก์ชันจะแปลงสตริงให้เป็นรูปแบบมาตรฐานก่อน จากนั้นจึงเริ่มตรวจสอบว่าข้อความที่แปลงเป็นรูปแบบมาตรฐานตรงกับพารามิเตอร์ที่ฮาร์ดโค้ดไว้หรือไม่ เพื่อความสะดวก เรามาเพิ่มเงื่อนไขอีกข้อหนึ่งเพื่อตรวจสอบว่าข้อความที่ทำให้เป็นมาตรฐานเท่ากับค่าคงที่ใหม่หรือไม่ ซึ่งเราจะเรียกว่า CMD_BUSINESS_HOURS_INQUIRY และจะมีค่า "business-hours-inquiry" หากเงื่อนไขประเมินค่าเป็นจริง เราจะเรียกใช้ฟังก์ชันที่ชื่อ 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)
...

เราจะต้องทำการเปลี่ยนแปลงอีก 2 อย่างเพื่อให้โค้ดทำงานได้ อย่างแรกคือการกำหนด CMD_BUSINESS_HOURS_INQUIRY พร้อมกับค่าคงที่อื่นๆ อย่างที่ 2 คือการกำหนดฟังก์ชัน 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" คุณจะเห็นข้อความคล้ายกับตัวอย่างต่อไปนี้

125802166995afd5.png

เมื่อคุณติดตั้งใช้งานซอร์สโค้ดใน 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)
...

ไชโย ตอนนี้เอเจนต์ดิจิทัลของเราสามารถตอบคำถามของผู้ใช้ที่สอบถามเกี่ยวกับการช็อปปิ้งออนไลน์ได้แล้ว ในตอนนี้ เอเจนต์ดิจิทัลของเรายังไม่รองรับการช็อปปิ้งออนไลน์ เราจึงแสดงข้อความแก่ผู้ใช้เพื่อแจ้งให้ทราบว่าฟีเจอร์นี้จะพร้อมให้บริการในเร็วๆ นี้ นี่คือลักษณะของตัวแทนดิจิทัลเมื่อผู้ใช้สอบถามเกี่ยวกับการช็อปปิ้งออนไลน์

5cd63c57c1b84f9a.png

การเปลี่ยนแปลงนี้จะแสดงให้เห็นทันทีหากคุณใช้ ngrok หรือทันทีที่คุณติดตั้งใช้งานโค้ดใน App Engine ของ GCP เช่นเดียวกับการเปลี่ยนแปลงก่อนหน้านี้ที่เราอนุญาตให้ผู้ใช้สอบถามเกี่ยวกับเวลาทำการ

ในส่วนถัดไป เราจะใช้ข้อความเริ่มการสนทนาและชิปคำแนะนำเพื่อนำการสนทนาไปสู่เส้นทางที่ราบรื่น

ใช้ชิปเพื่อเป็นแนวทางในการสนทนา

เราได้ทำการเปลี่ยนแปลงซอร์สโค้ดบางส่วนและได้ติดตั้งใช้งานเอเจนต์ดิจิทัลที่อัปเดตแล้ว แต่เราไม่คาดหวังให้ผู้ใช้พิมพ์ "business-hours-inquiry" หรือ "online-shopping-info" เพื่อสอบถามเกี่ยวกับธุรกิจ มาอัปเดตข้อความเริ่มต้นการสนทนากัน เพื่อให้เมื่อเปิดการสนทนา ผู้ใช้ไม่เพียงแต่จะได้รับข้อความต้อนรับที่น่าพอใจ แต่ยังได้รับข้อความเริ่มต้นการสนทนาด้วย

ไปที่คอนโซล Business Communications แล้วเข้าถึงหน้าข้อมูลตัวแทนของตัวแทน ก่อนหน้านี้เราได้กำหนดหัวข้อสนทนาสำหรับ "ชิป" "การ์ด" และ "ภาพสไลด์" แม้ว่าฟีเจอร์เหล่านั้นจะยังใช้งานได้ แต่ก็ไม่เกี่ยวข้องกับฟังก์ชันทางธุรกิจของเราอีกต่อไป คุณจะปล่อยให้ข้อความเหล่านั้นอยู่ต่อไปเพื่อแสดงฟีเจอร์ที่สมบูรณ์เหล่านี้ต่อไป หรือจะนำออกเพื่อให้เอเจนต์ดิจิทัลแสดงข้อความเริ่มการสนทนาสำหรับธุรกิจ Bonjour Meal โดยเฉพาะก็ได้

เราจะสร้างหัวข้อสนทนาใหม่ 2 รายการ สำหรับข้อความแรก ให้ตั้งค่าข้อความเป็น "เวลาทำการของคุณคือเวลาใด" และตั้งค่าข้อมูลการรายงานผล Conversion เป็น "business-hours-inquiry" สำหรับข้อความเริ่มการสนทนาที่ 2 ให้ตั้งค่าข้อความเป็น "ฉันซื้อของที่นี่ได้ไหม" และตั้งค่าข้อมูลระบบรายงานผล Conversion เป็น "online-shopping-info"

ผลลัพธ์ควรเป็นการกำหนดค่าตามภาพหน้าจอด้านล่าง

ef6e6888acea93e3.png

เช่นเดียวกับการเปลี่ยนแปลงอื่นๆ ที่ทำใน 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 อักขระตามที่อธิบายไว้ในเอกสารประกอบ

ภาพหน้าจอต่อไปนี้แสดงประสบการณ์ของผู้ใช้ที่คาดหวังพร้อมคำถามที่จะช่วยเริ่มประเด็นการสนทนาที่อัปเดตแล้วและการใช้ชิปคำแนะนำอย่างมีกลยุทธ์

ef57695e2bacdd20.png

6. ขอแสดงความยินดี

ยินดีด้วย คุณสร้างตัวแทนดิจิทัล Business Messages ตัวแรกสำเร็จแล้ว

คุณได้ติดตั้งใช้งานเว็บแอปพลิเคชันเพื่อรองรับเอเจนต์ดิจิทัลใน Business Messages ใช้ Business Communications Console เพื่อแก้ไขเอเจนต์ และปรับแต่งประสบการณ์ของผู้ใช้ด้วยเอเจนต์ดิจิทัลโดยทำการเปลี่ยนแปลงซอร์สโค้ด

ตอนนี้คุณทราบขั้นตอนสำคัญที่จำเป็นในการสร้างประสบการณ์การใช้งาน Business Messages แบบอินเทอร์แอกทีฟแล้ว และความเป็นไปได้นับจากนี้ไปก็น่าตื่นเต้น คุณขยายเอเจนต์เพื่อรองรับการค้นหาสินค้าคงคลังหรือเปิดตัวรถเข็นช็อปปิ้งเพื่อติดตามสิ่งที่ผู้ใช้อาจสนใจได้ คุณสามารถใช้ภาพหมุนเพื่อแสดงรายการในเมนู และใช้คำแนะนำเพื่อให้ผู้ใช้เลือกรายการที่สนใจได้

ลองดูตัวอย่างของฟีเจอร์นี้

57d2bb7b0ec38c81.png

ฉันจะสร้างประสบการณ์การสนทนาที่ยอดเยี่ยมได้อย่างไร

เอเจนต์ที่ดีที่สุดจะให้ข้อมูลตามบริบทแก่ผู้ใช้พร้อมทั้งมอบฟังก์ชันการทำงานผ่านการสนทนาเพื่อให้ผู้ใช้มีส่วนร่วมและโต้ตอบกับธุรกิจได้เหมือนกับการโต้ตอบทางโทรศัพท์หรือแม้แต่การโต้ตอบแบบต่อหน้า ลองพิจารณาว่าหัวข้อต่อไปนี้อาจเกี่ยวข้องกับการสนทนาที่คุณต้องการพูดคุยกับธุรกิจที่คุณทำงานด้วยอย่างไร

ให้บริบทและกำหนดความคาดหวัง

การให้บริบทอาจเป็นการระบุอย่างชัดเจนว่าคุณจะช่วยผู้ใช้ได้อย่างไร ไปจนถึงการแนะนำตัวแทนดิจิทัลด้วยลักษณะตัวตนที่ผู้ใช้เชื่อมโยงได้ ตัวแทนที่ประสบความสำเร็จใน Business Messages ใช้รูปโปรไฟล์ที่เป็นตัวแทนเพื่อแสดงให้ผู้ใช้เห็นว่ากำลังพูดคุยกับใคร

การตั้งค่าความคาดหวังขึ้นอยู่กับประสบการณ์ของผู้ใช้ที่คุณกำลังสร้าง เช่น หากเอเจนต์รองรับการค้นหาสินค้าคงคลัง ให้แจ้งให้ผู้ใช้ทราบก่อนว่าสินค้าอาจมีจำนวนน้อยก่อนที่จะให้คำตอบ

มอบฟังก์ชันการทำงานแก่ผู้ใช้

ผู้บริโภคเชื่อมต่อกับธุรกิจอยู่ตลอดเวลา ตั้งแต่การสอบถาม เช่น การตรวจสอบสถานะคำสั่งซื้อ ไปจนถึงการตรวจสอบว่าสินค้ามีในสต็อกหรือไม่ Business Messages รองรับการโต้ตอบที่ซับซ้อนของผู้ใช้ ผู้ใช้จำนวนมากยังคงโทรหาธุรกิจเพื่อรับคำตอบสำหรับคำถาม แม้ว่าคำตอบจะอยู่ในเว็บไซต์ของธุรกิจก็ตาม ด้วยเหตุนี้ ธุรกิจจึงต้องลงทุนทรัพยากรมากขึ้นเพื่อรองรับปริมาณการโทร โดยเฉพาะในช่วงวันหยุด

ดึงดูดผู้ใช้

จัดหาทัชพอยต์เชิงสนทนาเพื่อให้ผู้ใช้มีส่วนร่วมในการสนทนา ระหว่างข้อความ คุณสามารถเรียกตัวบ่งชี้การพิมพ์เพื่อแจ้งให้ผู้ใช้ทราบว่าคุณกำลังประมวลผลคำตอบสำหรับผู้ใช้

ฟีเจอร์ที่หลากหลาย เช่น ตัวบ่งชี้การพิมพ์ ชิปคำแนะนำ การ์ดที่สมบูรณ์ และภาพสไลด์ จะช่วยให้คุณแนะนำผู้ใช้ตลอดเส้นทางที่ราบรื่นเพื่อช่วยให้ผู้ใช้ทำบางอย่างได้สำเร็จ เช่น การสั่งซื้อจากเมนูรายการต่างๆ เป้าหมายคือการลดการเข้าชมการโทรไปยังสายโทรศัพท์ของธุรกิจ

การสนทนาต้องมีฟังก์ชันการทำงานสำหรับผู้ใช้ ผู้ใช้ที่ติดต่อกับธุรกิจผ่านการรับส่งข้อความคาดหวังว่าจะได้รับคำตอบสำหรับคำถามของตนอย่างรวดเร็ว ในสถานการณ์ที่ไม่เหมาะสม ตัวแทนดิจิทัลจะไม่สามารถอำนวยความสะดวกในการสนทนา ซึ่งอาจส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี โชคดีที่ยังมีวิธีแก้ไขปัญหานี้ เช่น การโอนการสนทนาไปยังตัวแทนที่เป็นมนุษย์ ซึ่งเราจะกล่าวถึงใน Codelab ในอนาคต

สิ่งต่อไปที่ควรทำ

เมื่อพร้อมแล้ว โปรดดูหัวข้อต่อไปนี้เพื่อเรียนรู้เกี่ยวกับการโต้ตอบที่ซับซ้อนมากขึ้นซึ่งคุณทำได้ใน Business Messages

เอกสารอ้างอิง