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

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

ใน 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 นี้มุ่งเน้นที่การสร้าง Agent ดิจิทัลรายแรกของคุณ

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

  • ลงทะเบียนรับบัญชีนักพัฒนาแอป 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 Console
  2. คลิกเปิดใช้

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

คุณต้องสร้างบัญชีบริการเพื่อเข้าถึง Business Communications และ Business Messages API ทําตามขั้นตอนในเอกสารประกอบเพื่อสร้างบัญชีบริการภายในคอนโซลของนักพัฒนาซอฟต์แวร์ Business Communications

ใช้โค้ดเริ่มต้น 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]

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

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

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

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

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

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

ceb66c905ded40be.png

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

3. กำลังสร้าง Agent แรก

การใช้คอนโซลของนักพัฒนาซอฟต์แวร์ Business Communications

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

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

โดยตัวแทนคือเอนทิตีการสนทนาที่แสดงถึงแบรนด์

88a9798e6546eb4e.png

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

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

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

f6bd8ded561db36f.png

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

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

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

2bf9f282e09062de.png

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

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

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

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

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

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

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

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

4323f988216fa054.png

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

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

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

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

8e96b0a10edd20af.png

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

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

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

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

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

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

ถ้าคุณทำตาม Codelab ถึงตอนนี้ เราน่าจะได้พบกับตัวแทนคนสวยของเรา

906bc74668a1b215.png

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

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

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

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

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

eb6b8ac6b62387ee.png

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

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

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

1856081f59623ae2.png

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

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

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

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

6598fec47021136e.png

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

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

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

ให้ข้อมูลเกี่ยวกับเวลาทําการ

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

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

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

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

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

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

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

นี่คือทีเซอร์ของสิ่งที่อาจมีลักษณะอย่างไร

57d2bb7b0ec38c81.png

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

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

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

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

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

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

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

ทำให้ผู้ใช้มีส่วนร่วมอยู่เสมอ

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

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

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

ขั้นตอนถัดไปที่ควรทำ

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

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