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

1. บทนำ

637766505206e0a1.png c604dca3ca211399.png

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

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

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

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

อะไรที่ทำให้ตัวแทนดิจิทัลที่ดี

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

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

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

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

ใน Codelab นี้ แอปของคุณจะ

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

883b5a7f9f266276.png

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

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

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

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

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

2. การตั้งค่า

เปิดใช้ API

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

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

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

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

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

ทำให้โค้ดเริ่มต้นใช้งาน Django Python EchoBot ใช้งานได้

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

$ 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]

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

กำหนดค่า eBook ของคุณ

เมื่อติดตั้งใช้งานบริการแล้ว คุณจะใช้ URL ของแอปพลิเคชันเพื่อตั้งค่า URL ของเว็บฮุคในหน้าการตั้งค่าบัญชีในคอนโซลของนักพัฒนาซอฟต์แวร์ Business Communications

URL ของเว็บฮุคจะเป็น URL ของแอปพลิเคชัน + "/callback/" ตัวอย่างเช่น https://PROJECT_ID.appspot.com/callback/ จะมีลักษณะดังนี้

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

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

ceb66c905ded40be.png

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

3. กำลังสร้างตัวแทนรายแรก

การใช้ Business Communications Developer Console

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

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

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

88a9798e6546eb4e.png

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

การสนทนาครั้งแรก

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

f6bd8ded561db36f.png

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

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

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

2bf9f282e09062de.png

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

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

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

ยินดีด้วย นี่เป็นการพูดคุยครั้งแรกของตัวแทนกับคุณ

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

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

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

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

4323f988216fa054

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

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

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

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

8e96b0a10edd20af.png

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

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

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

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

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

มุมมอง 10,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),
]

มีการกำหนดเส้นทาง 2 เส้นทางที่นี่ และ Django จึงสามารถดำเนินการตรรกะหากระบบจดจำ URL ทั้งสองได้ เนื่องจาก 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.")
...

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

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

b10113f9d037e6a5.png

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

กำลังส่งข้อความ

ดังนั้น คุณน่าจะพอรู้แล้วว่าเว็บแอปพลิเคชันได้รับข้อความได้อย่างไร เว็บฮุคทำได้ทุกอย่าง

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

a9475b1da93a83e8.png

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

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

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

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

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

5. กำลังปรับแต่งตัวแทน

หากคุณได้ติดตาม Codelab ไปแล้ว เราน่าจะเห็นตัวแทนคนสวยของเรา

906bc74668a1b215.png

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

ในส่วนที่เหลือของ Codelab นี้ เราจะขยายการทำงานของ Agent ด้วยข้อมูลต่อไปนี้

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

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

เลือกตัวแทนของคุณและไปที่ข้อมูลตัวแทนจากคอนโซลการสื่อสารทางธุรกิจ เราจะต้องอัปเดตโลโก้ธุรกิจตามที่อ้างอิงสีเหลืองด้านล่าง

eb6b8ac6b62387ee.png

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

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

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

1856081f59623ae2.png

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

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

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

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

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)
...

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

125802166995afd5.png

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

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

แจ้งให้ผู้ใช้ทราบว่าการช็อปปิ้งออนไลน์จะพร้อมให้บริการในเร็วๆ นี้

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

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

ก่อนอื่น เราควรอัปเดตข้อความสำรองให้มีข้อความที่เหมาะสม ระบบจะใช้ข้อความสำรองในกรณีที่อุปกรณ์ไม่สามารถรับ Rich Card ได้ด้วยเหตุผลบางประการ ต่อไปเราควรอัปเดต 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 หรือทันทีที่คุณทำโค้ดใน GCP App Engine ได้

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

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

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

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

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

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

ef6e6888acea93e3.png

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

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

จากนั้นเพิ่มคำสั่งต่อไปนี้ที่ส่วนท้ายของฟังก์ชัน

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

นี่คือตัวอย่างสิ่งที่เป็นไปได้จริงๆ

57d2bb7b0ec38c81.png

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

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

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

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

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

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

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

ดึงดูดความสนใจของผู้ใช้

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

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

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

สิ่งที่ต้องทำต่อไป

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

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