การโอนตัวแทนแบบเรียลไทม์

1. บทนำ

53003251caaf2be5.png 6717b85f57d859d3.png

อัปเดตล่าสุด: 23-08-2021

การโอนกับตัวแทนแบบเรียลไทม์ด้วย Business Messages

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

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

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

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

49aca3df6b196c50.png

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

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

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

สิ่งที่ต้องมี

  • ตัวแทน Business Messages รวมถึงคีย์บัญชีบริการ คุณสร้างตัวแทนได้โดยทำตามคู่มือสร้างตัวแทน
  • การกําหนดค่า Cloud Datastore ที่ใช้งานได้ซึ่งลิงก์กับโปรเจ็กต์ GCP ของตัวแทน คุณใช้การเริ่มต้นใช้งาน Cloud Datastore อย่างรวดเร็วเพื่อตั้งค่านี้ได้ คุณไม่จำเป็นต้องทราบวิธีใช้ Cloud Datastore
  • คอมพิวเตอร์ที่ติดตั้ง Google Cloud SDK และ Node.js (เวอร์ชัน 10 ขึ้นไป)
  • อุปกรณ์ Android (เวอร์ชัน 5 ขึ้นไป) หรืออุปกรณ์ iOS เพื่อทดสอบประสบการณ์ของผู้ใช้
  • มีประสบการณ์ด้านการเขียนโปรแกรมเว็บแอป คุณจะต้องเขียนโค้ด JavaScript เพียงเล็กน้อยและอาจต้องแก้ไขข้อบกพร่องของสิ่งที่เขียน

2. สร้างบ็อต Echo

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

รับรหัสเริ่มต้น

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

git clone https://github.com/google-business-communications/bm-nodejs-live-agent-transfer

ทําความเข้าใจโค้ดเริ่มต้น

มาดูโครงสร้างโค้ดเริ่มต้นที่คุณจะใช้ตลอดทั้ง Codelab

ไปที่ไดเรกทอรี step-1 แล้วดูเนื้อหา โดยไฟล์ดังกล่าวจะมีองค์ประกอบต่อไปนี้

  • bin: ไดเรกทอรีนี้มีสคริปต์เริ่มต้น www ซึ่งจะตั้งค่าและกำหนดค่าเซิร์ฟเวอร์
  • libs: ไดเรกทอรีนี้มี datastore_util.js ซึ่งมีเมธอดที่สะดวกสำหรับการอ่านและเขียนจาก Cloud Datastore คุณไม่จำเป็นต้องเข้าใจวิธีการทำงานของไฟล์นี้ เพียงจดบันทึกวิธีการที่ใช้ได้และสิ่งที่วิธีการเหล่านั้นทำ
  • resources: ไฟล์นี้มีคีย์บัญชีบริการเป็นไฟล์ชื่อ credentials.json
  • routes: ไฟล์ index.js มี Webhook และเมธอดตัวช่วยทั้งหมด ไฟล์นี้เป็นไฟล์หลักที่คุณจะใช้และเพิ่มข้อมูล
  • views: ไดเรกทอรีนี้มีไฟล์เทมเพลต EJS สําหรับองค์ประกอบ UI โดยจะมีไฟล์อื่นๆ เพิ่มเติมในขั้นตอนต่อๆ ไป
  • app.js, app.yaml, package.json: ไฟล์เหล่านี้จะกําหนดค่าแอปพลิเคชันและทรัพยากร Dependency ของแอป

ก่อนทำให้ใช้งานได้ ให้ดาวน์โหลดคีย์บัญชีบริการ GCP และคัดลอกไฟล์ข้อมูลเข้าสู่ระบบ JSON ไปยังไดเรกทอรีทรัพยากรแต่ละรายการในโค้ดตัวอย่าง ทําเช่นนี้กับทุกขั้นตอนของโค้ดแล็บ

cp credentials.json bm-nodejs-live-agent-transfer/step-<step number>/resources/credentials.json

การทําให้โค้ดเริ่มต้นใช้งานได้

ในเทอร์มินัล ให้ไปที่ไดเรกทอรี step-1 ของตัวอย่าง จากนั้นตั้งค่าเครื่องมือ gcloud ให้ใช้โปรเจ็กต์ Google Cloud โดยตั้งค่ารหัสโปรเจ็กต์ที่คุณใช้ลงทะเบียนกับ API

gcloud config set project <PROJECT_ID>

หากต้องการทำให้แอปพลิเคชันใช้งานได้ ให้เรียกใช้คำสั่งต่อไปนี้

gcloud app deploy

จด URL ของแอปพลิเคชันที่ติดตั้งใช้งานไว้ในเอาต์พุตของคําสั่งสุดท้าย

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

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

กำหนดค่าตัวแทนของคุณ

ไปที่หน้าการตั้งค่าบัญชีใน Business Communications Developer Console และตั้งค่า Webhook เป็น URL ของแอปพลิเคชันที่ติดตั้งใช้งาน เช่น https://PROJECT_ID.appspot.com/callback/

จากนั้นในหน้าข้อมูลตัวแทน ให้กําหนดค่าประเภทการโต้ตอบหลักและรองเป็น "บ็อต" และ "เจ้าหน้าที่" ตามลําดับ

db0cca5b74f999ad.png

การสนทนากับบ็อต Echo

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

536313929e5c0b3e.png

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

3. การเข้าร่วมการสนทนา

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

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

ไปที่ไดเรกทอรี step-2 และติดตั้งใช้งานแอปอีกครั้งตามที่ทําในขั้นตอนก่อนหน้า

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

8f624e9befb8e827.png

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

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

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

step-2/routes/index.js

/**
 * The webhook callback method.
 */
router.post('/callback', async function(req, res, next) {
  ...
    } else if (requestBody.userStatus !== undefined) {
      if (requestBody.userStatus.requestedLiveAgent !== undefined) {
  ...
        // TODO: Update the thread state to QUEUED_THREAD_STATE.
      }
    }
  });
...
});

คุณต้องใช้เมธอดใน libs/datastore_utils.js เพื่อโหลดชุดข้อความการสนทนาปัจจุบันและอัปเดตสถานะเป็น QUEUED_THREAD_STATE

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

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

e58d2b77e9c64492.png

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

ค้นหาความคิดเห็น TODO อื่นๆ ในเมธอดการจำลองสําหรับ /joinConversation

step-2/routes/index.js

/**
 * Updates the thread state and sends a representative join signal to the user.
 */
router.post('/joinConversation', async function(req, res, next) {
  let conversationId = req.body.conversationId;

  // TODO: Update the thread state to LIVE_AGENT_THREAD_STATE and post a REPRESENTATIVE_JOINED event.

  res.json({
    'result': 'ok',
  });
});

คุณต้องอัปเดตสถานะชุดข้อความอีกครั้ง โดยเปลี่ยนเป็น LIVE_AGENT_THREAD_STATE นอกจากนี้ คุณต้องใช้เมธอด conversations.events.create ของ Business Messages API เพื่อโพสต์เหตุการณ์ REPRESENTATIVE_JOINED

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

ชื่อฟิลด์

คำแนะนำ

parent

ตั้งค่าเป็น "conversations/{conversationId}"

eventId

สร้างรหัสแบบสุ่มของคุณเองสำหรับกิจกรรม

auth

ใช้เมธอด initCredentials ที่ระบุ

resource

นี่คือเนื้อหาของเหตุการณ์ คุณควรตั้งค่า eventType และตัวแทน

ดูความช่วยเหลือได้ที่หน้าอ้างอิงสำหรับเมธอด create หรือหน้าอ้างอิงเหตุการณ์

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

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

4. การรับส่งข้อความในฐานะเจ้าหน้าที่บริการลูกค้า

เมื่อเข้าร่วมการสนทนาแล้ว ก็ถึงเวลาส่งข้อความในฐานะตัวแทนแบบเรียลไทม์

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

46dd083f08f43961.png

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

เปิดไฟล์ routes/index.js แล้วดูที่ปลายทางที่เพิ่มใหม่ 3 รายการต่อไปนี้

  • /messages: รับไฟล์มุมมอง messages.ejs และแสดงผลในเบราว์เซอร์ เมื่อคลิกชุดข้อความการสนทนาจากดัชนี ระบบจะนําคุณไปยังหน้าใดหน้าหนึ่งต่อไปนี้
  • /retrieveMessages: รับเนื้อหาข้อความของชุดข้อความและแสดงผลรายการข้อความทั้งหมดในการสนทนาที่มีการจัดรูปแบบ หน้าข้อความจะเรียกใช้ปลายทางนี้เป็นระยะๆ เพื่อแสดงข้อความล่าสุด
  • /sendMessage: ส่งข้อความจากตัวแทนเจ้าหน้าที่บริการลูกค้าถึงผู้ใช้ หน้าข้อความจะเรียกใช้เหตุการณ์นี้เมื่อคุณคลิก "ส่ง" ขณะนี้ยังไม่ได้ติดตั้งใช้งาน

มาดูวิธีการ storeAndSendResponse ที่มีอยู่กัน

step-3/routes/index.js

/**
 * Updates the thread, adds a new message and sends a response to the user.
 *
 * @param {string} message The message content that was received.
 * @param {string} conversationId The unique id for this user and agent.
 * @param {string} threadState Represents who is managing the conversation for the CRM.
 * @param {string} representativeType The representative sending the message, BOT or HUMAN.
 */
async function storeAndSendResponse(message, conversationId, threadState, representativeType) {
...
}

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

ตอนนี้ให้ติดตั้งใช้งานปลายทาง /sendMessage ด้วยตนเอง คุณสามารถใช้เมธอด storeAndSendResponse ที่มีอยู่ที่นี่เพื่อทํางานส่วนใหญ่ได้ สิ่งสำคัญคืออย่าลืมตั้งค่าตัวแทนที่ถูกต้อง

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

49aca3df6b196c50.png

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

5. ออกจากการสนทนา

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

ไปที่ไดเรกทอรี step-4 ติดตั้งใช้งานแอปอีกครั้ง แล้วกลับไปที่ชุดข้อความการสนทนา ตอนนี้มีลิงก์ปิดและออกจากการสนทนาที่ด้านล่างของชุดข้อความ ลิงก์นี้ยังไม่ทํางานเนื่องจากยังไม่ได้ติดตั้งใช้งานปลายทาง leaveConversation

ef4ad8107c3fff2.png

ดูไฟล์ index.js มีความคิดเห็น TODO ที่บอกให้คุณสร้างปลายทาง leaveConversation ใหม่

step-4/routes/index.js

/* 
 * TODO: Create a '/leaveConversation' endpoint that does the following:
 * - Updates the thread to BOT_THREAD_STATE.
 * - Sends a REPRESENTATIVE_LEFT event.
 * - Sends a message to the thread informing the user that they are speaking to the echo bot again.
 * 
 * Hint: You can use the same methods that '/joinConversation' uses.
 */

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

  • อัปเดตชุดข้อความเป็น BOT_THREAD_STATE
  • ส่งเหตุการณ์ REPRESENTATIVE_LEFT
  • ส่งข้อความในการสนทนาเพื่อแจ้งให้ผู้ใช้ทราบว่ากำลังพูดกับ Echo Bot ใช้เมธอด storeAndSendResponse โปรดทราบว่าตัวแทนได้เปลี่ยนกลับไปเป็น BOT แล้ว

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

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

6. สรุป

ขอแสดงความยินดีที่ผ่าน Codelab การโอนกับตัวแทนแบบเรียลไทม์

คุณได้สร้างตัวแทนที่จัดการการโอนไปยังตัวแทนแบบเรียลไทม์ได้ตั้งแต่ต้นจนจบ นอกจากนี้ คุณยังได้เรียนรู้วิธีติดตามสถานะการสนทนาด้วย Cloud Datastore

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

ขั้นตอนถัดไป

ลองดู Codelab ต่อไปนี้

อ่านเพิ่มเติม

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