การนำ Dialogflow มาทำงานร่วมกับ Line นั้น จำเป็นต้องทำการตั้งค่าให้ทั้งคู่รู้จักและสนิทสนมกันก่อน ซึ่งขั้นตอนมันก็จะวุ่นวายนิดนึง เพราะงั้นผมเลยจะแบ่งบทความนี้ออกเป็น 4 ส่วน ได้แก่
- สร้าง LINE Chatbot
- สร้าง Agent ใน Dialogflow
- ตั้งการตอบกลับข้อความ ใน Dialogflow
- เชื่อมต่อ LINE Chatbot เข้ากับ Dialogflow
สำหรับเพื่อน ๆ ที่เคยสร้าง 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 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 ที่จะทำการสร้าง
คลิกที่ปุ่ม GO TO CONSOLE (มุมบนขวา) จากนั้นก็เข้าสู่ขั้นตอนการ Login หรือลงทะเบียน สำหรับผู้ที่ Login แล้วก็คลิก Create new agent เพื่อสร้าง Agent ใหม่ขึ้นมาเลย
ให้กรอกข้อมูลของ Agent ที่จะทำการสร้าง
- Agent name: ชื่อของ Agent
- Default Language: ภาษาตั้งต้นที่จะให้ Agent รองรับ
- Default Time Zone: โซนเวลา
จากนั้นให้คลิกปุ่ม CREATE เท่านี้ก็สร้าง Agent เสร็จแล้ว ง่ายม่ะ ฮา
ขั้นตอนต่อไปจะเป็นการตั้งข้อความตอบกลับ เพื่อให้รู้ว่าเราเชื่อมต่อ 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 ให้เรียบร้อยก่อน จากนั้นค่อยนำค่าของ 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 และข้อความตอบกลับได้ง่ายขึ้น .....เอาล่ะ สำหรับบทความนี้ ผมขอจบไว้เพียงแค่นี้ ไว้พบกันใหม่บทความถัดไปครับผม บ๊ายบาย ✋👦
ตั้งการตอบกลับข้อความ ใน 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 และข้อความตอบกลับได้ง่ายขึ้น .....เอาล่ะ สำหรับบทความนี้ ผมขอจบไว้เพียงแค่นี้ ไว้พบกันใหม่บทความถัดไปครับผม บ๊ายบาย ✋👦
บทความ
ขอบคุณสำหรับบทความดีๆครับ
ตอบลบเพิ่งเข้าใจเรื่อง dialogflow
ตอบลบเยี่ยมครับ/อธิบายได้ดีมาก/ขอบคุณครับ