วันพฤหัสบดีที่ 20 กันยายน พ.ศ. 2561

สร้าง LINE Chatbot อย่างง่าย ๆ ด้วย Dialogflow

Posted on  

2


          ในบทความก่อนหน้านี้ (ที่นานมากแล้ว) ผมเขียนถึงวิธีสร้าง LINE Chatbot ด้วย Messaging API ซึ่งเป็นวิธีที่เราต้องจัดการกับข้อความที่ได้รับมาจากผู้ใช้งานทั้งหมดเองเลย มันก็อาจจะลำบากเอาการอยู่ ดังนั้นผมเลยมีอีกวิธีหนึ่งมาช่วยในการสร้าง Chatbot นั่นคือการผนวก Dialogflow ร่วมเข้ามาด้วยนั่นเอง โดย Dialogflow จะช่วยในการทำ Natural Language Understanding (NLU) ในการตรวจจับข้อความของผู้ใช้งาน และสามารถเลือก Intent ที่เข้ากับข้อความนั้น ๆ ได้โดยที่เราไม่ต้องเขียนโปรแกรมเพิ่ม นอกจากนี้เรายังจับเจ้า Dialogflow ไปใช้งานร่วมกับ Chat Platform อื่น ๆ (เช่น LINE, Google Assistant, Facebook Messenger เป็นต้น) เพื่อสร้าง Chatbot ได้อีกด้วย

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


สร้าง LINE Chatbot

          อันดับแรกให้เราเข้าไปที่ LINE Developers console เพื่อสร้าง channel หรือช่องทางที่จะเชื่อมต่อโปรแกรมของเราเข้ากับแพลตฟอร์มของ LINE


          ใส่ username และ password บัญชีของ LINE เพื่อ Log in เข้าสู่ระบบ


          ในกรณีที่เข้า LINE Developers console เป็นครั้งแรก ก็จะมีให้กรอกชื่อและ Email ของนักพัฒนาก่อน ใส่ข้อมูลแล้วกดสมัครโล้ด


          คลิกที่ปุ่ม Create New Provider


          ตั้งชื่อ Provider จะใช้เป็นชื่อบริษัทก็ได้ ซึ่งชื่อ Provider จะใช้เป็นชื่อผู้ผลิตบอท จากนั้นก็คลิกปุ่ม Confirm แล้วคลิกปุ่ม Create เพื่อสร้าง Provider


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


          เมื่อเข้ามาแล้วจะมีบริการให้เราเลือกสร้าง แน่นอนว่าต้องเลือกอันกลาง Message API อยู่แล้ว คลิกปุ่ม Create Channel ได้เลย


          ให้กรอกข้อมูลสำหรับบอท เริ่มจาก App icon ซึ่งก็คือรูปโปรไฟล์ของบอทในไลน์นั่นเอง โดยไฟล์รูปที่ใช้ต้องเป็นไฟล์นามสกุล JPEG/PNG/GIF/BMP และมีขนาดไม่เกิน 3mb


          ถัดไปจะต้องกรอก
  • App name: เป็นชื่อของบอท ซึ่งจำกัดได้ไม่เกิน 20 ตัวอักษร
  • App description: เป็นคำอธิบายของบอทว่าบอทตัวนี้ใช้ทำอะไรได้บ้าง จำกัดไม่เกิน 500 ตัวอักษร


  • Plan: สำหรับนักพัฒนาชาวไทย ตอนนี้ยังมีให้เลือกแค่ Developer Trial ซึ่งสามารถส่งข้อความให้ผู้ใช้งานบอทได้ แต่จะจำกัดให้บอทมีเพื่อนได้แค่ 50 คน
  • Category และ Subcategory: คือประเภทของบอท
  • Email address: email ของนักพัฒนา เอาไว้สำหรับส่งแจ้งเตือนต่าง ๆ
จากนั้นก็คลิกปุ่ม Confirm คลิกยอมรับเงื่อนไขการใช้งาน แล้วคลิกปุ่ม Create เพื่อสร้าง Channel ได้เลย


          เรียบร้อย! เท่านี้ก็จบขั้นตอนการสร้าง LINE Chatbot แล้ว ส่วนวิธีการเพิ่มบอทเป็นเพื่อนก็ง่าย ๆ แค่คลิกเข้าไปยังบอทที่ต้องการ


          เลื่อนลงมาในส่วนของ QR code of your bot เอามือถือมาสแกน QR code แล้วก็กดเพิ่มเพื่อนได้เลย


สร้าง Agent ใน Dialogflow

          ถัดไปจะเป็นการสร้าง Agent ใน Dialogflow ให้เข้าไปที่ https://dialogflow.com/


          คลิกที่ปุ่ม GO TO CONSOLE (มุมบนขวา) จากนั้นก็เข้าสู่ขั้นตอนการ Login หรือลงทะเบียน สำหรับผู้ที่ Login แล้วก็คลิก Create new agent เพื่อสร้าง Agent ใหม่ขึ้นมาเลย


          ให้กรอกข้อมูลของ Agent ที่จะทำการสร้าง
  • Agent name: ชื่อของ Agent
  • Default Language: ภาษาตั้งต้นที่จะให้ Agent รองรับ
  • Default Time Zone: โซนเวลา
จากนั้นให้คลิกปุ่ม CREATE เท่านี้ก็สร้าง Agent เสร็จแล้ว ง่ายม่ะ ฮา


ตั้งการตอบกลับข้อความ ใน Dialogflow

          ขั้นตอนต่อไปจะเป็นการตั้งข้อความตอบกลับ เพื่อให้รู้ว่าเราเชื่อมต่อ LINE Chatbot เข้ากับ Dialogflow ได้แล้ว โดยเราจะสร้างบทสนทนา (.....จะเรียกว่าบทสนทนาได้ป่าวหว่า แค่พูดมาก็ตอบกลับสั้น ๆ) เมื่อผู้ใช้งานพิมพ์คำว่า "สวัสดี" เข้ามาแล้ว บอทก็จะทำการตอบข้อความกลับไปหาผู้ใช้งานอย่างง่าย ๆ ว่า "สวัสดี นี่คือคำทักทายจาก Dialogflow"


          เมื่อสร้าง Agent เสร็จแล้ว ก็จะพบกับ Default Intents ที่ Dialogflow สร้างขึ้นมาให้ 2 ตัว ให้คลิกไปที่ "Default Welcome Intent"


          ตรงส่วน Training phrases เป็นการกำหนดข้อความที่จะเป็นตัวเรียกใช้งาน Intent หรือพูดง่าย ๆ ว่าถ้าผู้ใช้งานส่งข้อความที่อยู่ในส่วนของ Training phrases เข้ามา Intent นั้นก็จะทำงาน


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

เชื่อมต่อ LINE Chatbot เข้ากับ Dialogflow

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


          คลิกปุ่ม Integrations ที่แถบเมนูด้านซ้าย


          คลิกเปิดการใช้งานตรง LINE จะมีป๊อปอัพแสดงขึ้นมา


          จะเห็นได้ว่าเราไม่สามารถคลิกปุ่ม START ได้ เนื่องจากยังไม่ได้กรอกข้อมูลสำคัญลงไป ได้แก่ Channel ID, Channel Secret และ Channel Access Token ซึ่งข้อมูลเหล่านี้ เราต้องไปเอามาจาก LINE Chatbot ที่เพิ่งสร้างตอนต้นบทความ ให้กลับไปที่ LINE Developers console แล้วคลิกเข้าไปที่บอท


          เลื่อนลงมาข้างใต้ App description จะเจอ Channel ID กับ Channel Secret ให้ก๊อปปี้ค่าทั้งสองออกมาใส่ในป๊อปอัพของ Dialogflow Console


          ต่อไปก็เลื่อนลงไปอีกจนถึงส่วนของ Messaging settings ก็จะเจอกับ Channel access token ที่เราตามหา แต่เอ๊ะ! ค่าของ Channel access token เป็น - นี่นา แล้วจะทำยังไงดี ไม่เป็นไร ให้คลิกปุ่ม Issue ข้าง ๆ เพื่อทำการสร้าง token ขึ้นมา


เมื่อคลิกแล้วจะขึ้นป๊อปอัพให้เราตั้งเวลาหมดอายุของ token ถ้าเราเลือก 0 ก็จะเป็นการกำหนดให้ token ไม่มีวันหมดอายุ จากนั้นก็คลิกปุ่ม Issue เพื่อทำการสร้าง token ขึ้นมา แล้วก๊อปปี้ค่ากลับไปใส่ในป๊อปอัพของ Dialogflow Console เหมือนเมื่อกี้


          เท่านี้ก็ตั้งค่าในฝั่ง Dialogflow เสร็จแล้ว คลิกปุ่ม START โลด แต่ก่อนจะปิดป๊อปอัพอันนี้ไป ให้คลิกก๊อปปี้ Webhook URL ที่อยู่บรรทัดล่างก่อน

          ขั้นตอนต่อไปให้กลับไปที่ LINE Developers console เพื่อนำ Webhook URL ที่ก๊อปปี้ไว้ไปกรอก ก็จะเสร็จสิ้นการตั้งค่าแล้ว


          ใน LINE Developers console ให้เลื่อนลงมาถึงส่วนของ Messaging settings ก็จะเจอ Use webhooks และ Webhook URL ที่อยู่ข้างล่าง Channel access token

          ให้เราคลิกปุ่ม Edit ตรง Use webhooks คลิก Enabled แล้วคลิกปุ่ม Update จากนั้นค่อยคลิกปุ่ม Edit ตรง Webhook URL เพื่อใส่ URL ที่เราก๊อปปี้มา โดยตัด https:// ออก แล้วคลิกปุ่ม Update


          สุดท้ายก็คลิกปุ่ม Verify เพื่อให้ระบบทำการตรวจสอบ URL ถ้า URL ของเราสามารถใช้งานได้จริง ก็จะขึ้นข้อความว่า Success .....อ้อ เกือบลืมไป เราต้องไปปิดฟีเจอร์ Auto-reply messages ด้วย มิฉะนั้นบอทจะตอบข้อความกลับไปให้ผู้ใช้โดยอัตโนมัติ และจะไม่ส่งข้อความมาที่ Dialogflow ของเรา


          วิธีปิดก็ง่าย ๆ แค่เลื่อนลงมาที่ Using LINE@ features ก็จะเห็น Auto-reply messages ให้คลิกปุ่ม Edit เลือก Disabled แล้วคลิกปุ่ม Update ก็จะเป็นการปิดฟีเจอร์ Auto-reply messages แล้ว ส่วนฟีเจอร์ Greeting messages ที่อยู่ข้างล่างนั้นเป็นฟีเจอร์ที่จะส่งข้อความทักทายผู้ใช้งานเมื่อมีคนกดเพิ่มบอทเป็นเพื่อน โดยข้อความทักทายที่ LINE ตั้งไว้ให้ตั้งแต่ต้นคือ

"ขอบคุณที่เพิ่มฉันเป็นเพื่อน!(happy)

 ถ้าคุณคิดว่าคุณไดัรับข้อความเเจ้งเตือนมากเกินไป คุณสามารถปิดการไดัรับข้อความเเจ้งเตือนได้โดยไปยังหน้าต่างตั้งค่าในห้องเเชทนี้เเละปิดการส่งข้อความเเจ้งเตือน(ok)"

และเราสามารถแก้ไขข้อความทักทายได้โดยคลิกที่ Set message


          เมื่อคลิก Set message แล้ว เบราว์เซอร์ก็จะเปิดเว็บ LINE @ Manager ขึ้นมาให้เราแก้ไขข้อความทักทาย ซึ่งสามารถใส่ข้อความทักทายได้ไม่เกิน 500 ตัวอักษร หลังจากนั้นก็คลิกปุ่ม Save เพื่อบันทึกการแก้ไข จากนั้นก็.....เอ๊ะ นั่นอะไร สังเกตเห็นข้อความใต้ชื่อบอทที่อยู่ตรงแถบด้านซ้ายกันหรือเปล่าเอ่ย นั่นก็คือ LINE ID ที่ใช้ในสำหรับเพิ่มเพื่อนนั่นเอง ถ้าใครไม่อยากสแกน QR code เพื่อเพิ่มเพื่อนก็ใช้ LINE ID ตรงนี้แทนก็ได้

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


          หลังจากเพิ่มบอทเป็นเพื่อนแล้ว บอทก็จะส่งคำทักทายมาตามที่ตั้งค่าไว้ พอพิมพ์ข้อความที่กำหนดไว้ใน Training phrases (ในที่นี้คือคำว่า "สวัสดี") "Default Welcome Intent" ก็จะทำงานและตอบข้อความที่กำหนดไว้ใน Responses กลับคืนมา

          เท่านี้ Dialogflow ก็เชื่อมต่อกับ LINE Chatbot เรียบร้อย ทำให้เราสามารถจัดการกับข้อความของผู้ใช้งาน เลือก Intent และข้อความตอบกลับได้ง่ายขึ้น .....เอาล่ะ สำหรับบทความนี้ ผมขอจบไว้เพียงแค่นี้ ไว้พบกันใหม่บทความถัดไปครับผม บ๊ายบาย ✋👦


วันพฤหัสบดีที่ 6 กันยายน พ.ศ. 2561

จัดการ Surface Capabilities ใน Actions on Google

Posted on  

0


          ปัจจุบันนี้ก็มีอุปกรณ์มากมายที่สามารถใช้งาน Google Assistant ได้ ไม่ว่าจะเป็น Google Home, Smart Display, Smart Watch, โทรศัพท์มือถือ ฯลฯ ซึ่งหมายความว่าอุปกรณ์เหล่านี้ก็สามารถเข้าถึง Actions ที่เราสร้างได้นั่นเอง อุปกรณ์เหล่านี้ต่างก็มีส่วนติดต่อผู้ใช้งานที่แตกต่างกันไป เช่น Google Home ที่มีแต่ลำโพงกับปุ่มอีกนิดหน่อยเป็นส่วนติดต่อผู้ใช้ ก็จะไม่สามารถแสดงผลภาพได้ หรือ Smart Watch ที่แม้จะมีหน้าจอแสดงผล แต่ก็ไม่สามารถเปิดเข้าเว็บไซต์ได้ เป็นต้น

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

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

Surface Capabilities

          Surface Capabilities เป็นการระบุฟีเจอร์ที่อุปกรณ์จำเป็นต้องมีลงไปในรายละเอียดของ Actions ส่งผลให้อุปกรณ์ที่มีสเปคไม่ตรงตามที่กำหนดไว้จะไม่สามารถเรียกใช้งาน Actions นั้น ๆ ได้ ส่วนวิธีระบุก็ทำได้ง่าย ๆ โดยอันดับแรกให้ทำการสร้าง Actions ขึ้นมา (วิธีสร้าง Actions บน Google Assistant)


          ตรงแถบเมนูด้านซ้าย ให้เลื่อนลงมาจนถึงส่วน DEPLOY จากนั้นก็คลิกที่เมนู Surface capabilities


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

          นอกจากการตั้งค่าที่รายละเอียดของ Actions แล้ว เรายังสามารถจัดการ Surface Capabilities ในขณะที่กำลังใช้งาน Actions อยู่ได้โดยการเขียนโค้ดควบคุมไว้

Runtime Surface Capabilities

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

          การเขียนโค้ดจัดการ Runtime Surface Capabilities แบ่งออกได้เป็น 3 วิธี ดังนี้
  • Response branching: ปรับเปลี่ยนการตอบสนองให้แตกต่างกันไปขึ้นอยู่กับอุปกรณ์ของผู้ใช้งาน โดยยังคงโครงสร้างของการสนทนาไว้อยู่
  • Conversation branching: เปลี่ยนการตอบสนองให้แตกต่างกันโดยสิ้นเชิงตามแต่ละอุปกรณ์ของผู้ใช้งาน
  • Multi-surface conversations: ปรับให้การตอบสนองบนอุปกรณ์หนึ่งสามารถย้ายไปแสดงผลและสนทนาต่อบนอุปกรณ์อีกเครื่องหนึ่งได้
          เพื่อให้เพื่อน ๆ เข้าใจมากขึ้น ผมจะทำการสร้าง Actions ขึ้นมาเพื่อแสดงวิธีเขียนโค้ดจัดการ Runtime Surface Capabilities ทั้ง 3 วิธี โดยหลังจากทักทายผู้ใช้เสร็จแล้ว
  • เมื่อผู้ใช้งานพูดว่า "วิธีแรก" Actions จะตอบสนองด้วยวิธี Response branching
  • เมื่อผู้ใช้งานพูดว่า "วิธีสอง" Actions จะตอบสนองด้วยวิธี Conversation branching
  • เมื่อผู้ใช้งานพูดว่า "วิธีสอง" Actions จะตอบสนองด้วยวิธี Multi-surface conversations

.........................

1. Response branching

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

          ลองจินตนาการถึง Actions พยากรณ์อากาศ ถ้าเราสั่งใช้งาน Actions นี้บนโทรศัพท์มือถือก็จะแสดงรูปสภาพอากาศ แต่ถ้าเราสั่งใช้งานบน Google Home ด้วยคำสั่งเดียวกัน Google Home ก็จะเล่นไฟล์เสียงในการสื่อถึงสภาพอากาศ (เช่น เสียงฝนตก เสียงนกร้อง) แทน

          ในตอนที่ Actions กำลังทำงานอยู่ และ fulfillment ได้รับ request มาจาก Google Assistant เราสามารถเขียนโค้ดตรวจสอบฟีเจอร์ของอุปกรณ์ได้ ซึ่ง Actions library ได้เตรียมชุดคำสั่งสำหรับตรวจสอบเอาไว้ให้แล้ว โดยเราจะเข้าถึงคุณสมบัติของอุปกรณ์ผ่านอินเตอร์เฟซการสนทนา "conv" และเรียกใช้งานฟังก์ชันของ class "surface" ด้วยคำสั่ง  surface.capabilities.has 

const hasScreen = conv.surface.capabilities.has('actions.capability.SCREEN_OUTPUT');
const hasAudio = conv.surface.capabilities.has('actions.capability.AUDIO_OUTPUT');
const hasMediaPlayback = conv.surface.capabilities.has('actions.capability.MEDIA_RESPONSE_AUDIO');
const hasWebBrowser = conv.surface.capabilities.has('actions.capability.WEB_BROWSER');
          ขั้นตอนถัดไป ผมจะนำโค้ดพวกนี้ไปใช้ใน Actions ที่สร้างไว้เมื่อสักครู่ ให้เข้าไปสร้าง Intent ใหม่ใน Dialogflow Console แล้วก็ตั้งชื่อว่า handle_method_one


          ตามที่แผนที่กำหนดไว้ เราจะให้เรียกใช้งาน Intent นี้ในกรณีที่ผู้ใช้งานพูดคำว่า "วิธีแรก" เพราะงั้นให้เราไปตั้งค่าในส่วนของ Training phrases โดยเพิ่มคำว่า "วิธีแรก" ลงไป


          เลื่อนลงมาข้างล่างในส่วนของ Fulfillment คลิกเปิดให้มีการเรียกใช้งาน Webhook เนื่องจากเราจะต้องเขียนโค้ดร้องขอสิทธิ์ที่ Intent นี้ จากนั้นก็คลิกปุ่ม SAVE โลด

          อันดับถัดเป็นโค้ดที่ใช้ควบคุม handle_method_one Intent (โค้ดการทำงานทั้งหมดจะอยู่ข้างล่างของบทความ)

app.intent('handle_method_one', (conv) => {
    var deviceSupport = '';
    
    if( conv.surface.capabilities.has('actions.capability.SCREEN_OUTPUT') ) {
        deviceSupport+= 'หน้าจอแสดงผล .';
    }
    if( conv.surface.capabilities.has('actions.capability.AUDIO_OUTPUT') ) {
        deviceSupport+= 'ลำโพงเสียง .';
    }
    if( conv.surface.capabilities.has('actions.capability.MEDIA_RESPONSE_AUDIO') ) {
        deviceSupport+= 'การเล่นเสียงมีเดีย .';
    }
    if( conv.surface.capabilities.has('actions.capability.WEB_BROWSER') ) {
        deviceSupport+= 'การแสดงเว็บไซต์ .';
    }
    conv.ask('อุปกรณ์นี้รองรับ'+deviceSupport);
      
});
          เมื่อมีการเรียกใช้งาน Intent นี้แล้ว จะทำการเช็คว่าอุปกรณ์ที่ใช้งานอยู่รองรับการตอบกลับแบบไหนบ้าง .....ว่าแล้วเราก็มาลองทดสอบกันเลยดีกว่า


          ในเมนู Simulator ของ Actions Console จะมีตัวเลือกสำหรับการจำลองอุปกรณ์อยู่ โดยเราสามารถจำลองอุปกรณ์ได้ 3 ประเภท ได้แก่ โทรศัพท์มือถือ, ลำโพงอัจฉริยะ และ Smart Display ให้เพื่อน ๆ ลองเลือกจำลองอุปกรณ์แล้วสังเกตการตอบกลับ

รูปซ้าย: ทดสอบด้วยการจำลองอุปกรณ์เป็นโทรศัพท์มือถือ
รูปขวา: ทดสอบด้วยการจำลองอุปกรณ์เป็นลำโพงอัจฉริยะ

          จากการใช้งานในอุปกรณ์ที่แตกต่างกัน เห็นได้ว่าแม้จะใช้บทสนทนาเดียวใน แต่การตอบกลับจะไม่เหมือนกัน ขึ้นอยู่กับอุปกรณ์ที่ใช้งาน Actions ตามตัวอย่าง โทรศัพท์มือถือ (รูปฝั่งซ้าย) จะตอบกลับมาว่า "อุปกรณ์นี้รองรับหน้าจอแสดงผล .ลำโพงเสียง .การเล่นเสียงมีเดีย .การแสดงเว็บไซต์ ." ส่วนลำโพงอัจฉริยะ (รูปฝั่งขวา) จะตอบกลับมาว่า "อุปกรณ์นี้รองรับลำโพงเสียง .การเล่นเสียงมีเดีย ."

.........................

2. Conversation branching

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

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

          เราสามารถตั้งค่าให้ Intent ถูกเรียกใช้งานเมื่อได้รับ Request จากอุปกรณ์ที่รองรับฟีเจอร์บางอย่างตามที่กำหนดไว้ได้ เช่น กำหนดให้ Intent หนึ่งถูกเรียกใช้งานเมื่อมี Request มาจากอุปกรณ์ที่มีหน้าจอแสดงผล แล้วกำหนดให้ Intent สองถูกเรียกใช้งานเมื่อมี Request มาจากอุปกรณ์ที่มีลำโพง เป็นต้น ซึ่งเราจะระบุประเภทของอุปกรณ์ไว้ในส่วน Contexts ของ Intent โดยมีค่าของ Contexts ที่สามารถกำหนดได้ดังต่อไปนี้
  • actions_capability_audio_output : อุปกรณ์ที่มีลำโพง
  • actions_capability_screen_output : อุปกรณ์ที่มีหน้าจอแสดงผล
  • actions_capability_media_response_audio : อุปกรณ์ที่รองรับการเล่นไฟล์มีเดีย
  • actions_capability_web_browser : อุปกรณ์ที่รองรับเว็บบราวเซอร์
          อันดับถัดไป ให้เราสร้าง Intent ใหม่ 2 Intent ใน Actions โดยตั้งชื่อว่า handle_method_two_with_screen ซึ่งจะถูกเรียกใช้งานเมื่อมี Request มาจากอุปกรณ์ที่มีหน้าจอแสดงผล และตั้งชื่ออีก Intent หนึ่งว่า handle_method_two_with_audio ซึ่งจะถูกเรียกใช้งานเมื่อมี Request มาจากอุปกรณ์ที่มีลำโพง

          เริ่มจากสร้าง Intent ที่ชื่อ handle_method_two_with_screen กันเลยดีกว่า


          ในส่วน Contexts ให้ระบุค่าเป็น  actions_capability_screen_output  เพื่อเป็นการกำหนดให้ Intent นี้ถูกเรียกโดยอุปกรณ์ที่มีหน้าจอ


          กำหนดคำพูดที่เป็น Keyword ในการเรียกใช้งาน Intent นี้ในส่วนของ Training phrases ว่า "วิธีสอง"  (จากรูปตัวอย่างจะเห็นได้ว่า Dialogflow ฉลาดพอที่จะเข้าใจคำว่า "สอง" คือตัวเลข จึงไปกำหนดเป็น Parameter ให้เองโดยอัตโนมัติ แต่เราไม่จำเป็นต้องใช้ Parameter ก็ให้ลบออกไป)


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

          เมื่อเราสร้าง Intent ที่ชื่อ handle_method_two_with_screen เสร็จแล้ว ต่อไปก็สร้าง handle_method_two_with_audio ต่อกันเลย


          ในส่วน Contexts ให้ระบุค่าเป็น  actions_capability_audio_output  เพื่อเป็นการกำหนดให้ Intent นี้ถูกเรียกโดยอุปกรณ์ที่มีลำโพง


          กำหนดคำพูดที่เป็น Keyword ในการเรียกใช้งาน Intent นี้ในส่วนของ Training phrases ว่า "วิธีสอง" เหมือนของ handle_method_two_with_screen


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

          เมื่อสร้าง Intent ครบทั้ง 2 Intent เสร็จแล้ว เราก็ไปทดสอบกันได้เล้ย

รูปซ้าย: ทดสอบด้วยการจำลองอุปกรณ์เป็นโทรศัพท์มือถือ
รูปขวา: ทดสอบด้วยการจำลองอุปกรณ์เป็นลำโพงอัจฉริยะ

          จากการใช้งานในอุปกรณ์ที่แตกต่างกัน จะเห็นได้ว่าการตอบกลับจะไม่เหมือนกัน ตามตัวอย่าง โทรศัพท์มือถือ (รูปฝั่งซ้าย) จะตอบกลับมาว่า "ตอบกลับจากอุปกรณ์ที่มีหน้าจอ" ที่มาจาก handle_method_two_with_screen ส่วนลำโพงอัจฉริยะ (รูปฝั่งขวา) จะตอบกลับมาว่า "ตอบกลับจากอุปกรณ์ที่มีลำโพง" ที่มาจาก handle_method_two_with_audio

.........................

3. Multi-surface Conversations

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

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

          เนื่องจากวิธีนี้จะมีการย้ายบทสนทนาไปยังอุปกรณ์อื่น เพราะฉะนั้นจะต้องมี Intent สองตัว หนึ่งคือ Intent ที่ทำหน้าที่ส่งบทสนทนาไปยังอุปกรณ์อื่น และอีกหนึ่งคือ Intent ที่รับบทสนทนาต่อมาจากอุปกรณ์ต้นทาง

          ขั้นตอนในการย้ายบทสนทนาไปยังอุปกรณ์อื่นนั้น เริ่มจากการ
  1. ตรวจสอบว่าผู้ใช้มีอุปกรณ์ที่พร้อมใช้งานหรือเปล่า ซึ่งมีข้อแม้ว่าเจ้าอุปกรณ์นั้นจะต้องเชื่อมต่อกับบัญชี Google เดียวกันกับอุปกรณ์ต้นทางด้วย โดยวิธีการตรวจสอบให้ใช้คำสั่ง  conv.available.surfaces.capabilities.has() 
  2. ถ้าพบอุปกรณ์ตามที่ต้องการแล้ว ให้ทำการส่ง Request เพื่อขอย้ายบทสนทนาไปยังอุปกรณ์นั้น ด้วยคำสั่ง  NewSurface()  โดยข้อมูลการสนทนาจะถูกโอนไปยังอุปกรณ์ใหม่ทั้งหมด รวมไปถึงค่าที่บันทึกลงในการสนทนาด้วย
  3. จัดการ Request ที่ได้รับมา โดยให้ Intent ที่ดักจับเหตุการณ์ actions_intent_NEW_SURFACE ทำการตรวจสอบว่าการโอนบทสนทนาสำเร็จหรือไม่
          เอาล่ะ ขั้นตอนต่อไปเราก็มาสร้าง Intent ทั้งสอง ซึ่งได้แก่ handle_method_three_request สำหรับสร้าง Request ไปยังอุปกรณ์ใหม่ และ handle_method_three_response สำหรับรับ Request .....เริ่มจากสร้าง handle_method_three_request กันก่อนเลย


          ในส่วนของ Training phrases ให้กำหนดคำพูดที่เป็น Keyword ในการเรียกใช้งาน Intent ว่า "วิธีสาม"  จากนั้นก็ให้ลบ Parameter ออกไป


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

app.intent('handle_method_three_request', (conv) => {
    const screenAvailable = conv.available.surfaces.capabilities.has('actions.capability.SCREEN_OUTPUT');
    
    if( screenAvailable ) {
        const context = 'มีภาพอยากจะอวดคุณด้วย.';
        const notification = 'ภาพเด็ดต้องดู!';
        const capabilities = ['actions.capability.SCREEN_OUTPUT'];

        conv.ask(new NewSurface({context, notification, capabilities}));
    } else {
        conv.close('ขอโทษด้วย. ไม่สามารถแสดงรูปได้');
    }

});
          Intent นี้จะเช็คดูว่าเรามีอุปกรณ์อะไรที่มีหน้าจอแสดงผลหรือไม่ ด้วยการใช้คำสั่ง  conv.available.surfaces.capabilities.has()  ที่เราเคยใช้ในช่วงกลาง ๆ ของบทความ ถ้าไม่มีก็จะตอบกลับว่า "ขอโทษด้วย. ไม่สามารถแสดงรูปได้" จากนั้นก็จบการสนทนา แต่ถ้ามีก็จะทำการส่ง Request ไปยังอุปกรณ์นั้นด้วย class  NewSurface  ซึ่งจะรับ Parameter เข้ามาสามค่า ได้แก่
  • Context: ข้อความที่ Actions จะถามผู้ใช้ เพื่อขอสิทธิ์ในการโอนบทสนทนาไปยังอุปกรณ์ใหม่
  • Notification: หัวเรื่องที่จะปรากฏตรงแถบแจ้งเตือนบนอุปกรณ์
  • Capabilities: ประเภทของอุปกรณ์ที่ต้องการจะโอนบทสนทนา ในที่นี้คือ อุปกรณ์ที่มีหน้าจอแสดงผล (actions.capability.SCREEN_OUTPUT)
          เท่านี้ก็สร้าง Intent เสร็จไปตัวนึงแล้ว ต่อไปก็มาสร้าง handle_method_three_response สำหรับจัดการ Request กันเลยดีกว่า


          ให้กำหนด Events เป็น  actions_intent_NEW_SURFACE  เพื่อให้ Intent นี้ดักจับ Event ร้องขอการโอนบทสนทนาจากอุปกรณ์อื่น


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

app.intent('handle_method_three_response', (conv, input, newSurface) => {
    
    if (newSurface.status === 'OK') {
        conv.close('แบร่! ชั้นโกหกคุณต่างหาก. บ๊ายบาย');
    } else {
        conv.close('เสียใจที่คุณไม่อยากดูภาพของชั้น. ไว้ค่อยคุยกันใหม่ทีหลังละกัน');
    }

});
          Intent นี้จะเช็คดูว่าโอนบทสนทนาได้หรือไม่ ถ้าโอนได้ก็จะพูดว่า "แบร่! ชั้นโกหกคุณต่างหาก. บ๊ายบาย" แต่ถ้าโอนไม่ได้ก็จะพูดว่า "เสียใจที่คุณไม่อยากดูภาพของชั้น. ไว้ค่อยคุยกันใหม่ทีหลังละกัน" แล้วจบการสนทนา .....ชักจะตื่นเต้นแล้ว มาทดสอบกันเลย


          เมื่อ handle_method_three_request เริ่มทำงานก็จะเช็คดูว่าเรามีอุปกรณ์อะไรที่มีหน้าจอแสดงผลหรือไม่ เมื่อพบแล้วก็ทำการขออนุญาตผู้ใช้งานว่า "{ข้อความเพิ่มเติม} ฉันส่งไปที่โทรศัพท์ได้ไหมคะ" ถ้าเราอนุญาต Actions ก็จะตอบกลับมาว่า "ได้สิคะ ดูในนั้นได้เลย เราไปคุยกันที่นั่นนะคะ" แล้วก็โอนบทสนทนาไปยังโทรศัพท์มือถือ ที่โทรศัพท์มือถือก็จะมีข้อความแจ้งเตือนเด้งขึ้นมา พอเรากดที่การแจ้งเตือน ก็จะเป็นการเปิด Google Assistant ในสภาพที่พร้อมจะสนทนาต่อได้เลย
***** อุปกรณ์ที่จะรับบทสนทนาต้องเชื่อมต่อกับบัญชี Google เดียวกันกับอุปกรณ์ที่โอนบทสนทนามาให้ *****

'use strict';

// Import Dialogflow และ NewSurface module จาก Actions on Google library.
const {dialogflow, NewSurface} = require('actions-on-google');
// Import firebase-functions package
const functions = require('firebase-functions');
// Instantiate the Dialogflow client.
const app = dialogflow({debug: true});


app.intent('handle_method_one', (conv) => {
    var deviceSupport = '';
    
    if( conv.surface.capabilities.has('actions.capability.SCREEN_OUTPUT') ) {
        deviceSupport+= 'หน้าจอแสดงผล .';
    }
    if( conv.surface.capabilities.has('actions.capability.AUDIO_OUTPUT') ) {
        deviceSupport+= 'ลำโพงเสียง .';
    }
    if( conv.surface.capabilities.has('actions.capability.MEDIA_RESPONSE_AUDIO') ) {
        deviceSupport+= 'การเล่นเสียงมีเดีย .';
    }
    if( conv.surface.capabilities.has('actions.capability.WEB_BROWSER') ) {
        deviceSupport+= 'การแสดงเว็บไซต์ .';
    }
    conv.ask('อุปกรณ์นี้รองรับ'+deviceSupport);
      
});

app.intent('handle_method_three_request', (conv) => {
    const screenAvailable = conv.available.surfaces.capabilities.has('actions.capability.SCREEN_OUTPUT');
    
    if( screenAvailable ) {
        const context = 'มีภาพอยากจะอวดคุณด้วย.';
        const notification = 'ภาพเด็ดต้องดู!';
        const capabilities = ['actions.capability.SCREEN_OUTPUT'];

        conv.ask(new NewSurface({context, notification, capabilities}));
    } else {
        conv.close('ขอโทษด้วย. ไม่สามารถแสดงรูปได้');
    }

});

app.intent('handle_method_three_response', (conv, input, newSurface) => {
    
    if (newSurface.status === 'OK') {
        conv.close('แบร่! ชั้นโกหกคุณต่างหาก. บ๊ายบาย');
    } else {
        conv.close('เสียใจที่คุณไม่อยากดูภาพของชั้น. ไว้ค่อยคุยกันใหม่ทีหลังละกัน');
    }

});

// Set ให้ DialogflowApp object จัดการ HTTPS POST request.
exports.dialogflowFirebaseFulfillment = functions.https.onRequest(app);
          โค้ดทั้งหมดที่ใช้ในบทความครั้งนี้ หวังว่าเพื่อน ๆ จะเข้าใจวิธีจัดการ Surface Capabilities เพื่อลดการเกิด Error และเพิ่มประสิทธิ์ภาพใน Chatbot มากขึ้นนะครับ 😉


สมัครสมาชิก: บทความ (Atom)