Petch Kruapanich
readmoreth
Published in
4 min readApr 20, 2018

--

Dialogflow : Deploy แชทบอทใส่ LINE กับ Facebook

หลังจากลองพัฒนาแชทบอทเบื้องต้นในตอนที่แล้ว ก็ถึงขั้นตอนสำคัญขั้นหนึ่ง นั้นก็คือการติดตั้งบอทของเราขึ้นไปยัง Channel ที่ต้องการ โดยในปัจจุบัน Dialogflow ก็รองรับการเชื่อมต่อกับ Channel หลายตัวมากอาทิเช่น Facebook Messenger, Slack, Twitter, Skype, Line, Telegram หรือเว็บไซท์ เป็นต้น

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

อย่างไรก็ตามสำหรับในบทความนี้ เราจะขอเน้นไปที่ Facebook Messenger และ Line ก่อนเนาะ เพราะเป็น 2 ตัวที่น่าจะมีคนใช้ค่อนข้างเยอะสุดละ

Deploy บอทใส่ Facebook Messenger

การติดตั้งเข้า Facebook Messenger สิ่งที่เราจำเป็นต้องมีเป็นอย่างแรก นั้นก็คือ Facebook App, Facebook Page และ Access Token ของ Page ที่เราต้องการติดตั้งแชทบอทเข้าไป โดยมีขั้นตอนง่ายๆแค่ 4 ขั้นตอนคือ

Step 1: สร้าง Facebook App
Step 2: ตั้งค่ากับ Dialogflow
Step 3: ตั้งค่ากับ Webhooks
Step 4: ลองทดสอบคุย

Step 1: สร้าง Facebook App
1. Login เข้า Facebook Developer Console
2. เลือก My Apps ที่มุมขวาบน
3. เลือก Add a New App จากนั้นระบุชื่อ App ที่ต้องการ และอีเมลของคุณ

4. จากนั้นเราจะต้องมาตั้งค่า Messenger กัน โดยกดที่ปุ่ม Setup ตามภาพเลย

5. ไปที่ Section Token Generation จากนั้นเราต้องเลือก Facebook Page ที่เราต้องการจะติดตั้งแชทบอทไป จากนั้น Facebook ก็จะขอ Permission ในการเข้าถึงข้อมูลต่างๆ เมื่อเรากด Accept ทั้งหมดไปก็จะได้ Page Access Token มา ซึ่งค่านี้เดียวเราต้องนำไปใช้ตอนตั้งค่าที่ Dialogflow

Step 2: ตั้งค่ากับ Dialogflow
หลายจากที่เราได้ข้อมูลที่จำเป็นอย่าง Page Access Token จาก Facebook App มาแล้ว สิ่งที่เราต้องทำต่อไปนั้นก็คือการตั้งค่า Dialogflow เพื่อให้มันคุยกันรู้เรื่องแล้ว โดยสามารถทำได้ตามขั้นตอนนี้
1. ไปที่ Integrations และเลือก Facebook Messenger เมื่อกด Setting จะพบกับ Popup ซึ่งต้องการข้อมูลดังนี้

  • Verify Token : อันนี้เป็นค่าอะไรก็ได้ ตั้งได้ตามใจ
  • Page Access Token: หรือ Token ที่เราได้จาก Facebook Developer Console โดยเราต้องเอา Page Access Token มาใส่ (ถ้ายังไม่มี ย้อนกลับไปทำข้อก่อนหน้านะ)

และเมื่อกรอกข้อมูลทั้งหมดเสร็จแล้ว ก็อย่าลืมกดปุ่ม Start ด้วย

Step 3: ตั้งค่ากับ Webhooks
1. ไปที่ Section Webhooks ที่ Facebook Developer Console และกด Setup Webhooks เพื่อเริ่มต้นการตั้งค่า

2. เราจะพบกับ Popup New Page Subscription ดังรูป ซึ่งเราต้องระบุข้อมูล

  • Callback URL: ซึ่งเอาได้ที่หน้า Integrations ในขั้นตอน่อนหน้า
  • Verify Token: กรอกข้อความที่ระบุไปที่หน้า Integrations ตามขั้นตอนก่อนหน้า
  • เลือก Subscriptions Fields messages และ messaging_postbacks

จากนั้นกด Verify and Save เป็นอันเสร็จสิ้นพิธี

Step 4: ลองทดสอบคุย
หลังจากตั้งค่าเสร็จแล้ว ก็ลองคุยดู เป็นอันจบวิธีการ Deploy แชทบอทเข้า Facebook

Deploy บอทใส่ LINE

การสร้างติดตั้งเข้า LINE สิ่งที่จำเป็นต้องมีนั้นก็คือ Messaging API ซึ่งสามารถสร้างได้ที่หน้าเว็บไซท์ของ Line Developer ซึ่งขั้นตอนการทำสามารถทำได้ง่ายๆเพียง 4 ขั้นตอนเช่นกันคือ

Step 1: สร้าง LINE Messaging API
Step 2: ตั้งค่า กับ Dialogflow
Step 3: ลองทดสอบคุย

Step 1: สร้าง LINEMessaging API
1. Login เข้า Facebook Developer Console
2. ในกรณีที่ไม่เคยสร้าง Provider ไว้ก็ต้องจัดการสร้างก่อนเลย
3. จากนั้นเลือกที่ Messaging API จากนั้นกรอกข้อมูลที่เกี่ยวข้องเพื่อลงทะเบียน

การทำ Messaging API ในปัจจุบันมันก็ยังมีข้อจำกัดเหมือนกัน เพราะมี Package แค่แบบเดียวก็คือ Developer Trial ซึ่งเราจะไม่สามารถคุยกับผู้ใช้อื่นแบบ 1-on-1 ได้, ส่งข้อความแบบ Broadcast หาเพื่อนได้ไม่เกิน 50 คน, ทำ Premium ID ไม่ได้

Step 2: ตั้งค่า กับ Dialogflow
การตั้งค่า Dialogflow เพื่อให้แชทบอทสามารถคุยกับ LINE ได้รู้เรื่อง ซึ่งสามารถทำได้ตามขั้นตอนนี้
1. ไปที่ Integrations และเลือก LINE เมื่อกด Setting จะพบกับ Popup ซึ่งต้องการข้อมูลดังนี้

  • Channel ID : หรือ ID ของ Messaging API ซึ่งสามารถเอามาได้จาก Line Developer ในขั้นตอนก่อนหน้า
  • Channel Secret : หรือ Secret ของ Messaging API ซึ่งสามารถเอามาได้จาก Line Developer ในขั้นตอนก่อนหน้าเช่นกัน
  • Channel Access Token : Access Key ที่สามารถเชื่อมต่อกันได้ โดยไป Section Messaging Setting ที่ Line Developer และกดปุ่ม Issue เพื่อสร้าง Channel access-token

จากนั้นอย่าลืมกด Start ด้วย

2. เอา Webhook Url จาก Popup ใน Dialogflow ไปใส่ใน Section Messaging Setting ที่ Line Developer ภายใต้ Webhook URL

3. นอกจากนี้เรายังสามารถตั้งค่าพวก Auto-reply messages และ Greeting Messages ตรง Using LINE@ features ได้ด้วย ซึ่งกรณีนี้จะปิด Auto-reply messages ทิ้งไป เพราะให้ Default Fallback Intent ใน Dialogflow จัดการให้ไปแล้ว

Step 3: ลองทดสอบคุย
ลองเริ่มคุยได้ โดยการ Add Friends พอเราคุยกับมันจะพบว่า แชทบอทของเราสามารถตอบกลับมาได้ตามที่ตั้งค่าไว้แล้ว :)

--

--

Petch Kruapanich
readmoreth

Full time Developer, Part time writer, Vinyl lover