สร้าง LINE BOT กันเถอะ (เริ่มต้น + reply message)

Nattapon Sirikamonnet
4 min readMar 28, 2018

--

ตอนนี้ต้องบอกได้เต็มปากว่า line เป็น platform ที่ใหญ่มากจริงๆ หลายๆธุรกิจให้ความสนใจกับ line เป็นพิเศษ เพราะอะไรน่ะหรอ เพราะ line เป็นแอปพลิเคชันที่คนไทยเข้าถึง และใช้งานกันอย่างแพร่หลายนั่นเอง

และถ้าจะให้ยกตัวอย่าง BOT คงไม่มีใครไม่รู้จัก BotNoi หรือยกตัวอย่างอีกก็คงเป็น SCB Connect Bot ของธนาคารแห่งหนึ่งที่หันมาใช้ line มาเป็นอีกช่องทางแจ้งเตือนการทำธุรกรรม

ส่วนตัวผมเองก็ใช้ line BOT มาช่วยให้การทำงานง่ายขึ้น ไม่ว่าจะส่ง notify ต่างๆ หรือสั่งให้ BOT ไปดึงค่าจาก database จากอุปกรณ์ มาแสดงเป็นรูปภาพ หรือ ข้อความกลับมาให้เรา

เกริ่นมาซะยาว คงจะเห็นภาพกันแล้วว่ามันน่าสนใจแค่ไหน งั้นมาสอนกันดีกว่า 555

เริ่มจากเข้าไปที่ https://developers.line.me/en/
เลือก Start using Messaging API

จากนั้น Login ด้วย email และ password ที่ได้ผูกไว้กับแอปพลิเคชัน line

หลังจาก Login แล้ว หน้าถัดไปให้ใส่ชื่อที่จะต้องแสดงบนหน้า console และใส่ email ที่ต้องการให้เป็น admin (แนะนำให้ใส่เป็น email ที่ login เข้ามาเมื่อสักครู่) จากนั้นติ๊กเครื่องหมายถูกเพื่อยอมรับข้อตกลง และกด confirm โลดด

จากนั้นกด Create Provider

ใส่ชื่อที่ต้องการและกด Confirm

จากนั้นเลือก Massaging API

ใส่รูปของ BOT และกรอกให้ครบทุกช่อง แล้วกด Confirm (แพลนเริ่มต้นจะเป็น Developer Trial สามารถเพิ่มเพื่อนได้สูงสุด 51 คน)

จากนั้นให้กดติิ๊กเครื่องหมายถูกทั้ง 2 ช่องเพื่อยอมรับข้อตกลง แล้วกด Create

หน้าเว็ปจะเปลี่ยนหน้า console ให้กดเข้าไปที่บอทที่เราเพิ่งสร้าง เพื่อจะทำการตั้งค่าต่อไป

บล็อกนี้จะใช้ webhooks เพื่อจัดการการโต้ตอบของบอทนะครับ

เลื่อนลงมาที่หัวข้อ Messaging settings
- ให้กด Issue ที่ช่อง Channel access token (long-lived) เพื่ออายุของ access token
- ที่ Use webhooks เลือกเป็น enable
- Webhook URL ใส่ URL ของ webhook ลงไป และกด verify ถ้าผ่านจะขึ้นว่า Success
- ถ้าหากจะให้บอทเข้ากลุ่มได้ก็ enable ที่ Allow bot to join group chats (แต่ผมขอปิดไว้ก่อนนะครับ)

ในส่วนของ code webhook ผมจะขอเขียนด้านล่างบล็อกครับ

ต่อมาที่หัวข้อ Using LINE@ features
หัวข้อนี้เป็นการตั้งค่าว่าจะให้บอทตอบอะไรกลับไปเมื่อเจอ keyword ไหน และถ้ามีคนมาเพิ่มบอทเป็นเพื่อนจะให้บอทส่งข้อความอะไรไปทักทาย เราสามรถทำง่ายๆผ่าน LINE@ Manager ลองเข้าไปเล่นกันดูนะครับมันง่ายจริงๆ (แต่ผมก็ขอปิดไว้ก่อนเช่นกัน เพื่อให้บล็อกยาวเกินไป)

แค่นี้บอทเราก็พร้อมใช้งานแล้วล่ะครับ เราเพิ่มบอทเป็นเพื่อนโดยการแสกน QR code ได้เลย

ส่วน code Webhook

เนื่องจาก Webhook URL ที่จะนำมากรอกนั้นจำเป็นต้องมี คือ
1. web hosting ของท่านต้องมี domain name
2. ต้องเป็น https

สำหรับท่านที่ไม่มี web hosting แนะนำให้ใช้ ngrok เพื่อทดสอบหรือเรียนรู้การสร้างบอทก่อนได้ครับ
https://goo.gl/yrBXvr

Message Type ที่ LINE ทำออกให้เราใช้ได้ ณ ตอนนี้

https://developers.line.me/en/docs/messaging-api/message-types/

ในบล็อกนี้ผมขอนำเสนอ 4 type ที่น่าจะเป็นพื้นฐานครับ คือ
Text , Sticker , Image , Location

สำหรับ code ขอเขียนด้วย php เหมือนเดิมครับ และเขียนตัวอย่างทั้ง 4 type รวมไปในไฟล์เดียวเลย

<?php
$accessToken = "";//copy Channel access token ตอนที่ตั้งค่ามาใส่

$content = file_get_contents('php://input');
$arrayJson = json_decode($content, true);

$arrayHeader = array();
$arrayHeader[] = "Content-Type: application/json";
$arrayHeader[] = "Authorization: Bearer {$accessToken}";

//รับข้อความจากผู้ใช้
$message = $arrayJson['events'][0]['message']['text'];
#ตัวอย่าง Message Type "Text"
if($message == "สวัสดี"){
$arrayPostData['replyToken'] = $arrayJson['events'][0]['replyToken'];
$arrayPostData['messages'][0]['type'] = "text";
$arrayPostData['messages'][0]['text'] = "สวัสดีจ้าาา";
replyMsg($arrayHeader,$arrayPostData);
}
#ตัวอย่าง Message Type "Sticker"
else if($message == "ฝันดี"){
$arrayPostData['replyToken'] = $arrayJson['events'][0]['replyToken'];
$arrayPostData['messages'][0]['type'] = "sticker";
$arrayPostData['messages'][0]['packageId'] = "2";
$arrayPostData['messages'][0]['stickerId'] = "46";
replyMsg($arrayHeader,$arrayPostData);
}
#ตัวอย่าง Message Type "Image"
else if($message == "รูปน้องแมว"){
$image_url = "https://i.pinimg.com/originals/cc/22/d1/cc22d10d9096e70fe3dbe3be2630182b.jpg";
$arrayPostData['replyToken'] = $arrayJson['events'][0]['replyToken'];
$arrayPostData['messages'][0]['type'] = "image";
$arrayPostData['messages'][0]['originalContentUrl'] = $image_url;
$arrayPostData['messages'][0]['previewImageUrl'] = $image_url;
replyMsg($arrayHeader,$arrayPostData);
}
#ตัวอย่าง Message Type "Location"
else if($message == "พิกัดสยามพารากอน"){
$arrayPostData['replyToken'] = $arrayJson['events'][0]['replyToken'];
$arrayPostData['messages'][0]['type'] = "location";
$arrayPostData['messages'][0]['title'] = "สยามพารากอน";
$arrayPostData['messages'][0]['address'] = "13.7465354,100.532752";
$arrayPostData['messages'][0]['latitude'] = "13.7465354";
$arrayPostData['messages'][0]['longitude'] = "100.532752";
replyMsg($arrayHeader,$arrayPostData);
}
#ตัวอย่าง Message Type "Text + Sticker ใน 1 ครั้ง"
else if($message == "ลาก่อน"){
$arrayPostData['replyToken'] = $arrayJson['events'][0]['replyToken'];
$arrayPostData['messages'][0]['type'] = "text";
$arrayPostData['messages'][0]['text'] = "อย่าทิ้งกันไป";
$arrayPostData['messages'][1]['type'] = "sticker";
$arrayPostData['messages'][1]['packageId'] = "1";
$arrayPostData['messages'][1]['stickerId'] = "131";
replyMsg($arrayHeader,$arrayPostData);
}
function replyMsg($arrayHeader,$arrayPostData){
$strUrl = "https://api.line.me/v2/bot/message/reply";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,$strUrl);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $arrayHeader);
curl_setopt($ch, CURLOPT_POSTFIELDS,json_encode($arrayPostData));
curl_setopt($ch, CURLOPT_RETURNTRANSFER,true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
$result = curl_exec($ch);
curl_close ($ch);
}
exit;
?>

บอทสามารถส่งทั้งข้อความ+ภาพ ภายใน 1 การ reply ได้นะ สูงสุด 5 Array message objects (1 type คือ 1 object)

บอทส่ง Sticker อะไรได้บ้าง
ส่งได้ตาม url นี้เลยครับ (หวังว่า line จะปล่อยตัวใหม่ๆออกมาอีก 55)
https://developers.line.me/media/messaging-api/sticker_list.pdf

เพิ่มเติม Message type “Video”

https://developers.line.me/en/docs/messaging-api/reference/#video-message
<?php
$accessToken = "";//copy Channel access token ตอนที่ตั้งค่ามาใส่

$content = file_get_contents('php://input');
$arrayJson = json_decode($content, true);

$arrayHeader = array();
$arrayHeader[] = "Content-Type: application/json";
$arrayHeader[] = "Authorization: Bearer {$accessToken}";

//รับข้อความจากผู้ใช้
$message = $arrayJson['events'][0]['message']['text'];
#ตัวอย่าง Message Type "Video"
if($message == "video"){
$arrayPostData['replyToken'] = $arrayJson['events'][0]['replyToken'];
$arrayPostData['messages'][0]['type'] = "video";
$arrayPostData['messages'][0]['originalContentUrl'] = "";//ใส่ url ของ video ที่ต้องการส่ง
$arrayPostData['messages'][0]['previewImageUrl'] = "";//ใส่รูป preview ของ video
replyMsg($arrayHeader,$arrayPostData);
}
function replyMsg($arrayHeader,$arrayPostData){
$strUrl = "https://api.line.me/v2/bot/message/reply";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,$strUrl);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $arrayHeader);
curl_setopt($ch, CURLOPT_POSTFIELDS,json_encode($arrayPostData));
curl_setopt($ch, CURLOPT_RETURNTRANSFER,true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
$result = curl_exec($ch);
curl_close ($ch);
}
exit;
?>

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

https://developers.line.me/en/docs/messaging-api/message-types/#template-messages

เจอกันบล็อกถัดไปครับ…

--

--