"ใจเค้าซื้อกันด้วย 'ใจ'"
LINE Bot 101 มาเริ่มต้นเขียน LINE Bot ด้วย Messaging API กัน !
12 Oct 2016 05:39   [67289 views]

ต่อจากบล็อกที่แล้ว สรุปงาน LINE Developer Day 2016 ฉบับนักพัฒนา เมื่อ LINE กลายเป็น "แพลตฟอร์มเปิด" ใครยังไม่ได้อ่านอยากให้อ่านก่อนนะครับ จะได้เห็นภาพรวมก่อนเพราะบล็อกนี้เราจะพามาลงมือทำบอทกันแล้ว

และเพื่อให้เข้าใจง่าย บอทที่จะเราทำกันจะเป็นบอทเบสิคๆที่ชื่อว่า EchoBot ทำงานง่ายๆ ผู้ใช้พิมพ์ข้อความอะไรมาก็จะตอบกลับแบบนั้น อย่างไรก็ตามไม่ต้องกังวลว่ามันจะง่ายเกินไป เพราะ Core ของ Messaging API ก็อยู่แค่ตรงนี้แหละ "การเชื่อม LINE เข้ากับ Server เรา" ถ้าเริ่มต้นทำอะไรง่ายๆแบบนี้ได้ก็จะต่อยอดทำอะไรยากๆตามแนวทางของตัวเองหลังจากนี้ได้เอง

บล็อกนี้เราจะจับมือทำตั้งแต่ 0 ยันเสร็จเลยนะ อ่ะ เริ่ม !

สร้างแอคเค้าท์ใน LINE Business Center

เนื่องจากเราต้องทำงานกับ [email protected] ซึ่งเป็น Business Account ดังนั้นเราเลยต้องจัดการแอคเค้าท์ตัวนี้ผ่าน LINE Business Center กัน เข้าไปเลยที่ https://business.line.me/en/ แล้วกด Log in ด้วย Personal Account ที่เราใช้แชทบนมือถือได้เลย (ใช้อีเมลและ Password หากใครยังไม่ได้กำหนดอีเมลและ Password ให้ไปกำหนดในมือถือก่อนด้วย)

หากคุณยังไม่เคยใช้แอคเค้าท์นี้ใน LINE Business Center มาก่อน ระบบจะให้เราสร้างแอคเค้าท์ใหม่ซึ่งจะเริ่มต้นจากการยืนยันตัวเลข 4 ตัวผ่านแอป LINE บนมือถือที่ล็อคอินแอคเค้าท์นั้นๆไว้เพื่อเป็น 2-Step Verification ตรงนี้ก็น่าจะทำกันได้ทุกคน แค่เอารหัส 4 ตัวที่ปรากฎบนหน้าเว็บไปใส่ไว้ในแอป LINE เท่านั้นเอง (จะมีหน้าจอเด้งขึ้นมาให้กรอก) ก็เป็นอันเสร็จพิธีครับ

จากนั้นเว็บจะพาเข้าสู่หน้าสร้างแอคเค้าท์ กรอกอีเมลที่ต้องการใช้งาน LINE Business Center ลงไป ซึ่งโดย Default ก็จะเป็นอีเมลที่เราใช้ใน Personal Account นั่นแหละ กด Agree and Continue ก็เป็นอันเรียบร้อย

จากนั้นเมลสำหรับการลงทะเบียนจะถูกส่งไปยังอีเมลของท่าน ทำยังไง? ... ก็เช็คเมลเซ่ ! พอเจอเมลก็คลิกลิงก์สำหรับลงทะเบียนได้เลย

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

บู้มมมม ยินดีต้อนรับสู่ LINE Business Center !!!

จริงๆทุกคนคงทำกันได้แหละ ไม่รู้จะเขียนทำไม 555 ถ้าสมัครสมาชิกยังทำไม่ได้ก็เห็นอนาคตลางๆละ แต่ก็เอาน่า เราบอกว่าจะสอนจาก 0 ก็ต้องทำตามสัญญาาาา

ยังไงก็ Bookmark URL นี้ไว้เลย ได้ใช้กันบ่อยแน่ๆครับ

สร้างแอคเค้าท์ [email protected] ที่มาพร้อม Messaging API

ในหน้าจอ Accounts -> Your accounts ให้กดที่ Messaging API เพื่อเริ่มสร้าง [email protected] Account

กดที่ Start using Developer Trial

กรอกชื่อแอคเค้าท์และรูปโปรไฟล์ที่ต้องการสร้าง พร้อมระบุ Category / Subcategory ให้เรียบร้อย จากนั้นกด OK

ในหน้าต่อไปรีวิวข้อมูลต่างๆให้เรียบร้อย หากทุกอย่างถูกต้องก็กด Apply โลดดด ... เรียบร้อย ได้ [email protected] Account ของ EchoBot มาแล้ว !

กดที่ [email protected] Manager เว็บจะพาเข้าสู่หน้าสำหรับจัดการแอคเค้าท์ [email protected] EchoBot ที่เพิ่งสร้างตะกี้ ซึ่งก็จะเป็น [email protected] Account ธรรมดาตัวนึง สามารถใช้ผ่านแอป [email protected] บนมือถือ รวมถึงสามารถส่งข้อความหาคนที่ Add แอคเค้าท์นี้ตามที่ได้อธิบายไว้ในบล็อกก่อนหน้านี้ได้ทันที (อยู่ในส่วนของ Messages)

แต่ตรงนี้เราขอไม่พูดถึงมากนะเพราะไม่ใช่สิ่งที่เราจะทำ ใครอยากลองเล่นก็จิ้มเล่นเองได้เลย แต่เป้าหมายของเราคือจะใช้ Messaging API หนิ ดังนั้น ... กด Enable API เลยจ่ะ ไม่ต้องคิดอะไรมาก (ย้ำอีกที การ Enable Messaging API จะทำให้ใช้ 1-on-1 Chat และใช้ผ่านแอป [email protected] ไม่ได้อีก ตามที่มันเตือนไว้ในบับเบิ้ลแดงๆ)

พอ Enable เสร็จก็จะได้หน้าตาแบบนี้

ตอนนี้ได้ [email protected] Account พร้อมเปิด Messaging API เรียบร้อยแล้ว ทิ้งไว้แค่นี้ก่อนก๊ะ มาลองเล่นกับแอคเค้าท์ที่เพิ่งสร้างเสร็จตะกี้กันก่อนนิดนึง

ลองแอด EchoBot เป็นเฟรนด์

มีอยู่สองวิธีในการ Add Friend

1) Add โดยใช้ LINE ID - สามารถหา LINE ID ได้จากหน้า [email protected] Manager ด้านใต้ชื่อแอคเค้าท์ EchoBot โดยแอคเค้าท์จำเป็นต้องรวมเครื่องหมาย @ เข้าไปด้วยเน้อ

อันนี้ของใครของมันนะครับ อย่าลอก ID ตัวในภาพนี้เพราะจะกลายเป็นได้แอคเค้าท์ของเนยแทน ไม่ใช่ที่ท่านสร้างขึ้นมา

2) Add โดยใช้ QR Code - กดดู QR Code ได้จากหน้า [email protected] Manager เช่นกัน โดยกดไปที่ Settings -> Basic Account Settings จะมี QR Code อยู่ในนั้นครับ สแกนโลดดดด

ในกรณีที่ต้องการทำปุ่ม Add Friend แปะบนเว็บก็สามารถคัดลอก HTML Code ตรง "Add Friend Button" ไปแปะลงเว็บได้เลยทันทีครับ สะดวกมากมาย

ต่างคนต่างแอดได้เลย (ไม่ต้องสอนเนอะ) หลังจาก Add Friend เรียบร้อยแล้วก็จะปรากฎแอคเค้าท์ EchoBot ใน Friend List ของเรา เย้ !

และทันทีที่ Add Friend เสร็จก็จะมีข้อความส่งมาหาเราทันทีผ่าน EchoBot

ถามว่าตรงนี้คืออะไร? มันคือ Greeting Message หรือข้อความต้อนรับที่จะส่งอัตโนมัติเมื่อมีคนมา Add Friend ครับ หากต้องการปรับเปลี่ยนข้อความตรงนี้สามารถแก้ไขได้ที่ Messages -> Greeting Message

เห็นมะ ยังไม่ต้องเขียนโปรแกรมอะไรเลยก็ใช้งานบางส่วนได้ละ

คราวนี้ ลองพิมพ์ข้อความอะไรก็ได้ไปหา EchoBot ดู ผลคือ ...

ทันทีที่พิมพ์ข้อความไปก็จะมีข้อความส่งกลับมาทันทีตามด้านบน ซึ่งตรงนี้คือ Auto Reply Message ครับ สามารถแก้ไขได้ที่ Messages -> Auto Reply Message

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

โดยรวมก็ประมาณนี้ครับสำหรับความสามารถพื้นฐานของ [email protected] =)

ต่อไปมาเริ่มต้นทำ Server ของเราเพื่อทำระบบตอบกลับด้วยโปรแกรมกันครับ

ตั้ง Server บน Heroku

เดี๋ยวเราจะทำ Webhook จาก Messaging API เพื่อสร้าง HTTPS Request มายัง Server ของเราเมื่อมีคนส่งข้อความมาหา EchoBot กัน

และเงื่อนไขของ Server ที่จะทำ Webhook ได้มีสองข้อคือ

1) ต้องสามารถติดต่อเข้าไปทาง HTTPS ที่มี SSL Certificate ที่ Valid ได้

2) ต้องมี Static IP

ถ้าคุณมี Server ที่สามารถใช้ https ได้อยู่แล้วก็สามารถใช้ Server ของท่านได้เลย แต่ถ้าไม่มี ... จะมาสอน Setup Server ก็ใช่เรื่อง ดูจะผิดจุดประสงค์ ดังนั้นเพื่อความง่ายเราเลยขอไปวางบน Heroku ซึ่งสามารถใช้งานได้ฟรีและมี https ที่ใช้งานได้สมบูรณ์กันครับ ส่วน Static IP อาจจะเป็นปัญหาของ Heroku นิดหน่อย แต่ในบล็อกนี้เรามีทางแก้อยู่ๆ

ขั้นตอนตามเน้

1) ก่อนอื่นเลยก็ไป สมัครสมาชิก (Sign up) ในเว็บ https://www.heroku.com/ ก่อนเลย อันนี้ไม่สอนนะ ต่างคนต่างทำ เสร็จแล้วก็ Login ให้เรียบร้อยครับ

2) พอ Login เสร็จ เว็บจะพาเข้าสู่หน้า Dashboard ก็กด Create New App เพื่อเริ่มสร้าง Server (ซึ่งในที่นี้เรียกว่า App) ได้เลย

ในหน้าถัดไปไม่ต้องแก้ไขอะไร ช่องแรกปล่อยว่าง ช่องสองปล่อยให้เป็น United State เหมือนเดิมแล้วกด Create App ครับ

เป็นอันเรียบร้อย ได้มาแล้ว =)

โดยสิ่งที่สำคัญในหน้านี้คือ "ชื่อของ App" ครับ อย่างในภาพตัวอย่าง App ตัวนี้มีชื่อว่า fast-spire-96176 ซึ่งของท่านก็จะต่างกันออกไป ขอให้ดูชื่อของ App ท่านเป็นหลัก อย่าสนใจในภาพตัวอย่าง

3) ทดสอบเข้าถึง App ของเราด้วยการไปที่ URL ตามนี้ https://<YOUR_APP_NAME>.herokuapp.com อย่างเช่นในกรณีนี้คือ https://fast-spire-96176.herokuapp.com หากถูกต้องจะได้เว็บหน้าตาแบบนี้

สังเกตดูว่ามีกุญแจล็อคสีเขียวเรียบร้อย นั่นแปลว่าใช้ https ได้อย่างสมบูรณ์แบบนั่นเองครับ =)

Deploy โค้ดลง Heroku

ถึงตัว Server จะเข้าถึงได้แล้ว แต่มันก็ยังไม่มีโค้ดอะไรอยู่ในนั้น ดังนั้นเรามา Deploy โค้ดลง App ที่เราสร้างขึ้นมากันดีกว่าครับ โดยในตัวอย่างนี้เราขอทำในโค้ดที่อ่านง่ายๆอย่าง PHP ละกันนะ

สำหรับการ Deploy โค้ดลง Heroku นั้นหลักๆจะมีอยู่ 3 วิธีด้วยกันได้แก่

1) Heroku CLI - เป็น Client สำหรับการ Deploy โค้ดขึ้น Heroku โดยตรง ซึ่งจริงๆเบื้องหลังมันก็เป็น Git ตัวนึงที่เชื่อมต่อกับ App Server ของเราอยู่

2) GitHub - Push โค้ดขึ้น GitHub แล้วมันจะ Deploy ลงเว็บให้อัตโนมัติ

3) Dropbox - ใส่โค้ดไว้ใน Dropbox โฟลเดอร์ที่กำหนดและกด Deploy ในเว็บหลังบ้านเมื่อต้องการ Deploy โค้ดล่าสุดลงเว็บ

จริงๆก็โอเคทั้งสามวิธี แล้วแต่คนจะถนัดหรือสะดวก แต่เพื่อให้สอนง่ายที่สุด เนยขอใช้ GitHub ละกันนะครับ น่าจะเป็น Standard ของนักพัฒนายุคนี้ละ

สำหรับคนที่ใช้ Git ไม่เป็น จริงๆอยากจะบอกว่า ... "บาป!!! ไปศึกษา Git มาก่อน!!!" แต่ก็เกรงใจ กลัวจะใจร้ายเกินไป ยังไงถ้าใช้ Git ไม่เป็นจริงๆก็ลอง Sync กับ Dropbox ดูก่อนก็ได้ครับ แต่ไม่สอนนะ งมเองดูๆ ยังไงขอลุยกับ GitHub ต่อก่อนหละ (แต่ส่วนตัวใช้ Heroku CLI กับ Dropbox นะ เพราะโค้ดมันมีคีย์บางอย่างอยู่ ไม่อยากเอาโค้ดขึ้น GitHub ยังไงก็ลองพิจารณาดู)

และเพื่อความสะดวกขึ้นไปอีกขั้น เราเลยแอบทำ Git Repository ไว้ให้ตัวนึง สามารถ Fork ไปใช้ได้เลย ซึ่งไฟล์ค่อนข้างซับซ้อนมาก ....... มีไฟล์เดียว -_- ก็เอาน่า เผื่อคนขี้เกียจสร้างโปรเจคสร้างไฟล์ ประหยัดเวลาไปได้อีก 32 วินาที อ่ะ เชิญไป Forkkkk >>> LINE-BOT-PHP-Starter

หลังจาก Fork เสร็จแล้วก็กลับมาที่หน้า Heroku Dashboard ของแอปเราอีกครั้งหนึ่ง แล้วจิ้มที่ GitHub เบาๆ

จากนั้นกด Connect to GitHub

Login GitHub และ Authorize Access ให้เรียบร้อย สุดท้ายหน้า Dashboard จะเปลี่ยนไปเป็นแบบนี้

ใส่ Repo Name ไปตามชื่อ Repo ของท่าน ซึ่งหาก Fork ของเรามามันก็น่าจะชื่อว่า LINE-BOT-PHP-Starter ขอรับกระผม ใส่เสร็จกด Search แล้วมันจะขึ้น Repo มาให้เลือกตามนี้

กด Connect สิ รออะไรอยู่!

และพอเชื่อมต่อเสร็จแล้วก็กด Enable Automatic Deploys ได้เลยเพื่อให้เวลาที่เรา Push โค้ดใหม่เข้า master โค้ดนั้นจะได้ Deploy ลง Heroku App โดยอัตโนมัติ

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

อ่ะ ตอนนี้เซตเรียบร้อยละ แต่โค้ดปัจจุบันก็ยังไม่ขึ้นไปอยู่บน Heroku นะ เพราะครั้งแรกเราต้อง Deploy ด้วยมือก่อน จิ้ม Deploy Branch ตรงส่วนของ Manual deploy ได้เลย จึก !

รอจนมัน Deploy เสร็จ คราวนี้เปิด URL เดิมที่เคยเปิดก่อนหน้านี้ก็จะเห็นว่าหน้าเว็บเปลี่ยนไปแล้ว

เย้ ! จากนี้ถ้าต้องการจะเปลี่ยนแปลงโค้ดอะไรก็แก้ไขและ Push ขึ้น Git Repo ตัวนี้ได้เลย ดังนั้น ... อย่าลืม Clone Repo ตัวนี้ลงคอมพ์ของท่านด้วย จะได้เขียนโค้ดกันง่ายๆ จะ Deploy เมื่อไหร่ค่อย Push ปายยย (Clone กันเองนะ ตัวใครตัวมัน ไม่ควรต้องสอน)

เพิ่มไฟล์ bot.php

ไฟล์ที่เราจะทำงานมีชื่อว่า bot.php ซึ่งยังไม่มีใน Repo ดังนั้นให้ทุกคนสร้างไฟล์ชื่อว่า bot.php ใส่ไว้ใน Root ของ Repo พร้อมเนื้อหาในไฟล์เริ่มต้นว่า

<?php
echo "I am a bot";

จากนั้นก็ Push ขึ้น GitHub ได้เลย

หลังจาก Push เสร็จแล้วราวๆ 1 นาที ให้กดเข้า URL ว่า https://<YOUR_APP_NAME>.herokuapp.com/bot.php ก็จะเห็นว่าไฟล์นั้นโผล่ขึ้นไปบน Heroku แล้ว

เรียบร้อย จากนี้เราจะทำงานกับไฟล์ bot.php กันครับ

เชื่อมต่อ Webhook กับ Messaging API

ตอนนี้ Server ก็พร้อมแล้ว เรามาเปิดการเชื่อมต่อ Webhook เข้ากับ Server ของเรากัน

วิธีคือให้เข้าไปที่เว็บหลังบ้าน [email protected] Manager ในส่วนของแอคเค้าท์ที่เราสร้างมาในขั้นตอนต้นๆ แล้วกดไปที่ Settings -> Bot Settings

ตรงส่วนของ Use webhooks ให้เปลี่ยนเป็น Allow แล้วกด Save

หลังจากบันทึกเสร็จแล้วให้กดตรงลิงก์ที่เขียนว่า LINE Developers ที่อยู่ใต้ Status: Valid

กด Agree Terms and Conditions ที่เราไม่เคยอ่านให้เรียบร้อย

และนี่ก็จะเป็นอีกหน้านึงที่เราใช้บ่อยเหมือนกันครับ หลักๆก็เอาไว้เซตการใช้งาน Messaging API พวกคีย์ต่างๆก็จะอยู่ในนี้ ส่วนหน้า [email protected] Manager จะเอาไว้จัดการ [email protected] Account ครับ ไม่เกี่ยวกับ API เท่าไหร่

คราวนี้เรามากำหนด URL สำหรับการทำ Webhook กัน เลื่อนมาด้านล่างๆของหน้า Basic information แล้วกด Edit จากนั้นใส่ URL ของ bot.php ตามที่เคยกดเข้าผ่าน Browser ในหัวข้อที่แล้วได้เลย

จากนั้นกด Save ... เรียบร้อย ! แค่นี้แหละ คราวนี้หากมี Event อะไร เช่น มีคนส่งข้อความมาหาบอทเรา ตัว URL ที่เราระบุก็จะถูกเรียกทันทีครับ

สร้าง Channel Token สำหรับการ Authorize Request

ตอนนี้เราเปิดการเชื่อมต่อการยิงจาก Messaging API มาที่ Server เราเรียบร้อย แต่เรายังไม่สามารถใช้งาน Messaging API ได้ เพราะการจะทำให้ Messaging API ใช้งานได้ เราจะต้องโยน Token ไปทาง HTTP Request Header ด้วยตามรูปแบบนี้

curl -X POST \
-H 'Content-Type:application/json' \
-H 'Authorization: Bearer {ENTER_ACCESS_TOKEN}' \
...

แล้วคราวนี้เราจะเอาเจ้า ACCESS_TOKEN มาจากไหน? นี่แหละครับ เราจะเอามาจากหน้านี้ โดย Token ที่ว่านี้คือสิ่งที่เรียกว่า Channel Access Token สามารถกด Issue ได้ทันที

จะได้เป็นรหัสยาวๆยาวมากๆมา นี่แหละที่เราจะใช้กันครับ

ให้ก็อปปี้ตัวนี้เก็บไว้ เดี๋ยวได้ใช้แน่นอนๆ

ทดสอบการตั้งค่าด้วยการ Validate Token

ก่อนอื่นมาทดสอบว่าที่เราเซตมาทั้งหมดใช้งานได้มั้ย ติดต่อไปยัง Messaging API ได้รึเปล่า ด้วยการเขียนโค้ดง่ายๆขึ้นมาก่อนตัวนึงสำหรับ Validate Token โดยทำตาม Document ที่ให้มา >> Validating the access token

รูปแบบการส่ง Request จะเป็นตามนี้

curl -X GET \
-H 'Authorization: Bearer {ENTER_ACCESS_TOKEN}' \
https://api.line.me/v1/oauth/verify

และผลลัพธ์ที่คาดหวังหน้าตาจะเป็นประมาณนี้

{
  "channelId":1350031035,
  "mid":"ub00b9ac609e51f4707cd86d8e797491b"
}

เราจะมาเขียนโค้ด PHP ให้เรียก Request ตามด้านบนนี้กัน

เริ่มเลยละกันนะ สร้างไฟล์ verify.php แล้วใส่โค้ดตามนี้ครับ

<?php
$access_token = 'XXXXXXXXXXXXXXXXXXXXXXX';

$url = 'https://api.line.me/v1/oauth/verify';

$headers = array('Authorization: Bearer ' . $access_token);

$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
$result = curl_exec($ch);
curl_close($ch);

echo $result;

โดยเปลี่ยน $access_token ให้ตรงกับข้อมูลของแต่ละคนด้วย

เมื่อเสร็จแล้วก็ Push โค้ดและสั่งรันผ่าน Browser ได้เล้ยยย หากถูกต้องจะได้ผลลัพธ์ออกมาแบบนี้

แต่ถ้าหากทำงานไม่ได้มันก็จะพ่นออกมาบอกว่ามีปัญหาตรงไหน ก็แก้ไปตามที่มันแจ้งมาก็เป็นอันเรียบร้อยครับ

ถ้ารันผ่านแล้วก็แปลว่าตอนนี้เราเซตทุกอย่างถูกต้องแล้วครับผม พร้อมจะเล่นในขั้นตอนต่อไปละ =)

ทำโค้ดสำหรับตอบกลับอัตโนมัติ

คราวนี้มาทำโค้ดสำหรับการตอบข้อความกลับเมื่อมีคนส่งข้อความมากันบ้าง

มาดูกันก่อนว่าเวลามีคนส่งข้อความมา Webhook จะส่งข้อมูลมาในรูปแบบไหน ... มันจะเป็น JSON หน้าตาแบบนี้ครับ

{
  "events": [
      {
        "replyToken": "nHuyWiB7yP5Zw52FIkcQobQuGDXCTA",
        "type": "message",
        "timestamp": 1462629479859,
        "source": {
             "type": "user",
             "userId": "U206d25c2ea6bd87c17655609a1c37cb8"
         },
         "message": {
             "id": "325708",
             "type": "text",
             "text": "Hello, world"
          }
      }
  ]
}

สิ่งที่สำคัญที่ต้องใช้ในการตอบกลับคือ replyToken ที่แนบมากับ JSON ตัวนี้นี่เอง

ส่วนการตอบกลับผ่าน Reply Message API เราจะสร้าง Request ไปยัง Messaging API ด้วยรูปแบบดังนี้ครับ

curl -X POST \
-H 'Content-Type:application/json' \
-H 'Authorization: Bearer {ENTER_ACCESS_TOKEN}' \
-d '{
    "replyToken":"nHuyWiB7yP5Zw52FIkcQobQuGDXCTA",
    "messages":[
        {
            "type":"text",
            "text":"Hello, user"
        },
        {
            "type":"text",
            "text":"May I help you?"
        }
    ]
}' https://api.line.me/v2/bot/message/reply

ก็ตรงไปตรงมามาก ไม่มีอะไรซับซ้อน และสังเกตดูว่าเราสามารถ Reply กลับไปได้มากกว่า 1 ข้อความด้วยนะ (มากสุด 5 ข้อความ)

ถ้าเข้าใจโครงสร้างข้อมูลแล้วเรามาเขียนโค้ดกัน! เปิดไฟล์ bot.php ขึ้นมาแล้วแปะโค้ดไปตามเน้ !

<?php
$access_token = 'XXXXXXXXXXXXXXXXXXXXXXX';

// Get POST body content
$content = file_get_contents('php://input');
// Parse JSON
$events = json_decode($content, true);
// Validate parsed JSON data
if (!is_null($events['events'])) {
	// Loop through each event
	foreach ($events['events'] as $event) {
		// Reply only when message sent is in 'text' format
		if ($event['type'] == 'message' && $event['message']['type'] == 'text') {
			// Get text sent
			$text = $event['message']['text'];
			// Get replyToken
			$replyToken = $event['replyToken'];

			// Build message to reply back
			$messages = [
				'type' => 'text',
				'text' => $text
			];

			// Make a POST Request to Messaging API to reply to sender
			$url = 'https://api.line.me/v2/bot/message/reply';
			$data = [
				'replyToken' => $replyToken,
				'messages' => [$messages],
			];
			$post = json_encode($data);
			$headers = array('Content-Type: application/json', 'Authorization: Bearer ' . $access_token);

			$ch = curl_init($url);
			curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
			curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
			curl_setopt($ch, CURLOPT_POSTFIELDS, $post);
			curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
			curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
			$result = curl_exec($ch);
			curl_close($ch);

			echo $result . "\r\n";
		}
	}
}
echo "OK";

ซึ่งโค้ดก็ตรงไปตรงมา น่าจะอธิบายตัวมันเองได้เลย หลักๆก็แค่

1) Parse JSON Data ที่ส่งมา

2) วนลูปหา Event ทีละอันและตอบกลับเฉพาะข้อความที่ส่งมาในรูปแบบ Text เท่านั้น

3) ตอบกลับด้วยการสร้าง HTTPS Request ผ่าน curl เหมือนตัวอย่างด้านบน

เพียงเท่านี้ก็ใช้งานได้แล้วววว

และเช่นเคย อย่าลืมแก้ไข $access_token ให้ตรงกับข้อมูลของท่านด้วย มิฉะนั้นจะใช้งานไม่ได้น้าาา

ยังไงลองอ่านโค้ดดูครับ ถ้าเข้าใจแล้วก็ Push โค้ดขึ้น GitHub รอจน Deploy เสร็จแล้วมาทดสอบกัน !

ทดสอบ EchoBot

ทดสอบด้วยการพิมพ์ข้อความไปหา EchoBot และผลคือ ...

และถ้าส่งอย่างอื่นไปจะไม่มีอะไรตอบกลับมา

ใช้งานได้สมบูรณ์แบบแล้ว เย้ !! ง่ายป่ะล่าาาา ^0^

ง่ายกว่าเร็วกว่าด้วย SDK

สังเกตดูว่าที่เราสอนในบล็อกนี้จะเป็นวิธีดิบหมดเลย JSON ก็ Parse เอง ตอนติดต่อก็ยิง curl เอง ทั้งนี้เราตั้งใจเขียนบล็อกให้เป็นแบบนี้เพราะมันคือพื้นฐาน ไม่อยากให้ยึดติดกับภาษา (เพราะแต่ละคนถนัดไม่เหมือนกัน) หากเข้าใจแล้วว่าเบื้องหลังมันติดต่อแบบนี้ๆนะ การใช้ SDK ก็จะง่ายขึ้นมากๆเช่นกันไม่ว่าจะเป็นภาษาอะไร

ตอนนี้รู้สึกป่ะหละว่าเข้าใจมันถึงแก่นแล้ว จะต่อยอดทำโน่นทำนี่ก็บ่ยั่นแล้ว ตามนั้นคร้าบบบ =D

จริงๆการติดต่อแบบดิบๆก็ง่ายนะไม่ได้ยากอะไร แต่วิธีที่ง่ายกว่าก็มีเพราะ LINE เตรียม SDK เอาไว้ให้นักพัฒนาอย่างเพียบพร้อมครบทุกภาษายอดนิยม Java, PHP, Go, Perl และ Ruby

การใช้งานก็ง่ายมาก ยกตัวอย่างเช่น PHP ก็สามารถติดตั้ง SDK ผ่าน composer ได้เลย

$ composer require linecorp/line-bot-sdk

เวลาจะ Initialize Instance ของบอทก็สั่งแค่นี้

$httpClient = new \LINE\LINEBot\HTTPClient\CurlHTTPClient('<channel access token>');
$bot = new \LINE\LINEBot($httpClient, ['channelSecret' => '<channel secret>']);

อยากจะ Reply Message ก็สั่งแค่นี้ ...

$response = $bot->replyText('<reply token>', 'hello!');

ซึ่งทั้งหมดทั้งมวลมันก็คือการติดต่อไปยัง REST ด้านหลังนั่นแหละ แต่ทำให้คำสั่งมันเรียกง่ายขึ้น ซับซ้อนน้อยลง กับภาษาอื่นๆก็เช่นกัน ยังไงลองเช็คภาษาที่ตัวเองถนัดได้เลยคร้าบผม ^__^

แถม: กำหนด Server IP Whitelist

ขั้นตอนนี้เป็นขั้นตอนที่ไม่บังคับว่าต้องทำ แต่อย่างไรก็ตาม เราแนะนำให้ทำเพราะว่ามันจะช่วยป้องกันเรื่อง Security ได้ดีกว่าไม่ทำมาก

สิ่งที่น่ากลัวอย่างนึงคือ ถ้า Channel Access Token หลุดไป คนจะทำอะไรก็ได้กับบอท [email protected] ของเรา แล้วจะทำยังไงให้มันปลอดภัยขึ้นหละ? คำตอบคือ เราสามารถกำหนด IP Whitelist เพื่อบอกว่าเราอนุญาตให้ติดต่อจาก Server IP นี้ๆเท่านั้นนะ หาก IP ไม่ตรงก็จะ Reject Request นั้นๆทิ้งทันที

งั้นมาลองทำกัน ... อย่างแรกที่ต้องทำคือ ไปหา IP ของ Heroku App ที่เราทำขึ้นมาก่อนเลยจ้าาา ซึ่งเผอิ๊ญเผอิญโดยเริ่มต้นแล้ว Heroku ดั๊นนนนไม่มี Static IP ... ก็คือ IP อาจจะเปลี่ยนไปเรื่อยๆตามเวลา เราเลยไม่สามารถ Whitelist เจ้าแอปบน Heroku ได้

แต่ไม่ต้องห่วง Heroku มี Add On บางตัวที่ทำให้เราสามารถติดต่อไปยัง Server อื่นผ่าน Static IP ได้ (จริงๆมันก็คือการติดต่อผ่าน Proxy นั่นแหละ) ซึ่งก็มีให้เลือกหลายตัวไม่ว่าจะเป็น Proximo, QuotaGuard Static หรือ Fixie

ซึ่งเผอิญเรางก ... ขอใช้ตัวฟรีละกันนะ Fixie เราเลือกนายยยย กดเข้าไปที่ Fixie และกด Login to Install ให้เรียบร้อย

จากนั้นกด Install Fixie

เลือกแอปที่ต้องการและกด Continue

เลือกแพลน Tricycle - FREE แล้วกด Provision

เป็นอันเรียบร้อยยยยย Fixie โผล่มาแล้น

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

จากนั้นให้คลิกตรงคำว่า Fixie แล้วมันจะเข้าสู่หน้า Welcome to Fixie ให้เรากดไปที่ Account ตรงมุมขวาบน

ในหน้านี้จะมีค่าอยู่สองชุดที่เราจำเป็นต้องใช้ ได้แก่

Outbound IPs ปรากฎอยู่ตรง Account Details ตรงนี้แหละที่จะเป็น IP ที่ Messaging IP จะได้รับเมื่อเราติดต่อเข้าไป ดังนั้นเราเลยต้องเอา IP เหล่านี้ใส่เข้าไปใน Whitelist ของเราให้เรียบร้อยครับ

- Proxy URL อันนี้ต้องใช้เซตเป็น Proxy ตอนเราสั่ง curl เพื่อให้ Request ที่ติดต่อไปยัง LINE Server เป็น IP เดิมเสมอ

มาใช้กันทีละตัว เริ่มจาก Outbound IPs ก่อน วิธีการใส่ IP เข้าไปใน Whitelist คือให้กดไปที่ Server IP Whitelist ในหน้า LINE Developers (น่าจะยังเปิดกันไว้อยู่) แล้วใส่ IP ทั้งหมดเข้าไปพร้อมกำหนด Network Mask ไว้ที่ 24 ครับ อย่างในกรณีนี้มี 2 IPs ก็ใส่ทั้งสองอัน /24

ก็เป็นอันเรียบร้อยจ้าาา ตอนนี้เราเซตให้ Server ของเราทำงานร่วมกับ Messaging API ได้อย่างสมบูรณ์แบบแล้นน

ต่อไปเราต้องแก้โค้ด PHP ของเราเพื่อระบุ Proxy Server ให้กับ curl Request โดย Proxy URL จะอยู่ในรูปแบบนี้

http://username:[email protected]:port

และแก้โค้ด PHP ทั้งไฟล์ verify.php และ bot.php ใส่สองบรรทัดนี้เข้าไปตรงต้นไฟล์

$proxy = 'proxyurl:port';
$proxyauth = 'username:password';

โดนแทนค่า proxyurl:port และ username:password ให้ตรงกับ Proxy URL ของท่าน

จากนั้นเพิ่มสองบรรทัดนี้ในชุดคำสั่ง curl โดยแปะไว้ก่อนบรรทัด curl_exec

curl_setopt($ch, CURLOPT_PROXY, $proxy);
curl_setopt($ch, CURLOPT_PROXYUSERPWD, $proxyauth);

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

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

คราวนี้ถ้าอยากลองว่ากรณีที่ใช้งานไม่ได้เป็นยังไง ให้ลองไปกำหนด Server IP Whitelist มั่วๆดู จากนั้นตอนเปิด verify.php จะขึ้นเป็นแบบนี้แทน

ก็น่าจะเห็นประโยชน์และการใช้งานของ IP Whitelist แล้วนะครับ =)

ย้ำอีกทีว่ามันเป็นสิ่งที่ไม่จำเป็นต้องกำหนด หากไม่ได้ใส่อะไรไว้ใน IP Whitelist เลยนั่นแปลว่าใครก็ตามที่มี Channel Access Token จะติดต่อใช้งานได้หมด ซึ่งเป็นอะไรที่น่ากลัวทีเดียว เราเลยแนะนำให้เซต IP Whitelist ไว้เสมอสำหรับงาน Production ครับ

อย่างไรก็ตาม สิ่งที่ท่านต้องมีคือ IP จริง ซึ่ง Heroku ไม่มีให้ หากต้องการใช้บน Heroku จริงๆก็คงต้องจ่ายเงินให้กับ Fixie หรือบริการคล้ายๆกัน เพราะตัวฟรีจำกัด Requests per Month ไว้แค่ 500 Request เท่านั้น ใช้งานจริงไม่ได้หรอก หรือถ้าไปใช้บริการ Cloud ที่มี IP ชัดเจน เช่น AWS หรือ DigitalOcean ก็จะโอเคกว่า ไม่ต้องมาเซต Proxy อะไรให้ยุ่งยาก แค่ใส่ IP ของเครื่องนั้นเข้าไปก็จบ แต่สิ่งที่ต้องทำเพิ่มคือเราต้องตั้ง Server Stack และดูแลเอง มี Trade Off กันไปครับ ลองตัดสินใจดูๆ

สรุป

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

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

ยังไงไปลองศึกษาเพิ่มเติมกันได้ที่ https://devdocs.line.me/ ครับ เขียน Doc มาได้ดีทีเดียว =)

ก็หวังว่าบล็อกนี้จะทำให้เห็นแนวทางในการพัฒนา Chatbot บน LINE กันนะครับ และก็หวังเล็กๆว่าจะมีประโยชน์ต่อวงการเน้อ รอดูผลงานแชทบอทเท่ๆจากทุกท่านอยู่น้าาา =)

แถมอีก: ตัวอย่าง Chatbot ที่เขียน(เล่น)เสร็จแล้ว

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

ช่วงนี้เขียนแต่บล็อกยาวๆ ไปหละ สวัสดี บัยยย

ปล. ถ้าไม่ได้ใช้แอปบน Heroku แล้วก็อย่าลืมทำลายทิ้งด้วยหละ

บทความที่เกี่ยวข้อง

Oct 11, 2016, 15:30
15018 views
สรุปงาน LINE Developer Day 2016 ฉบับนักพัฒนา เมื่อ LINE กลายเป็น "แพลตฟอร์มเปิด"
Jun 6, 2016, 14:08
27127 views
บันทึกการพัฒนาระบบ Online Learning Platform ตอนที่ 3: วาง Server Stack ด้วย Docker
0 Comment(s)
Loading