Chat Bot ง่ายๆ ด้วย Line Messaging API !! [PHP, NodeJS, Heroku] แบบ Step by step

อันนี้เป็น Blog แรกของผมในการมาช่วยแนะนำ ในการสร้าง Chat Bot ผ่าน Line แชทยอดฮิตในประเทศไทยที่มีผู้ใช้งานจำนวนมากและ มีแนวโน้มในการใช้งานเพิ่มขึ้นอย่างต่อเนื่อง นอกเรื่องกันมามากแล้วเรามาเริ่มทำ Chat Bot ผ่าน Messageing API กันเลยดีกว่า อันดับแรก สำหรับคนที่ไม่เคย สมัคร Line Developer คลิ๊กที่นี่

เข้ามาจะเจอหน้าตาให้ Login

หน้า Login เข้า Line Developer

หลังจากนั้นเราจะต้องสร้าง Provider ก่อนเพื่อให้สามารถจัดการได้ว่าใครคือผู้จัดการของงานนั้น ไม่พูดมากละ ดูภาพเลยง่ายกว่าเยอะ

กดสร้าง Provider ตามภาพ

หลังจากสร้าง Provider แล้วจะเจอให้เราสร้าง Channel ต่อเลยทันที กด create new channel ตามรูปด้านล่าง

กด Create Channel เพื่อสร้าง

หลังจากที่กดเราจะเจอ Popup เด่งมาบอกเราว่าเราจะสร้าง Channel นี้ด้วยอะไรได้บ้าง ตอนนี้ทาง Line ได้ทำการให้บริการ มี 3 อย่างที่ให้ Developer อย่างเราสามารถให้ทดลองใช้งานก่อน คือ 1. Line Login 2. Messageing API 3. Clova Skill ซึ่งวันนี้เราจะมาสอนทำ Chat Bot ด้วย Messaging API แต่ถ้าสนในว่า Line Login และ Clova คืออะไร สามารถ อ่านเพิ่มเติมตามนี้เลยนะครับ Line Login , Clova

ปล. แต่ Clova ยังไม่รองรับภาษาอื่นนอกจาก ภาษาญี่ปุ่นก็คงต้องรอกันต่อไปก่อนนะครับ [すみません、Clova はタイ語 わからないです。]

กด Messaging API ตรงรูปหัวใจนะ

หลังจากกดแล้วเราก็มาทำการใส่ข้อมูลส่วนตัวของเราที่เราจะเอามาใช้งาน App name, App Description และเลือก Category -> Subcategory , Email address หลังจากใส่ข้อมูลทั้งหมดแล้วก็กด Confirm เพื่อให้ระบบเข้าไปสร้าง Channel ให้

กรอกข้อมูลตามที่ลูกศรชี้นะครับ

หลังจากสร้าง Channel Messaging API เสร็จจะได้หน้าตาออกมาตามนี้ และเช็คดูว่า ได้ข้อมูลครบไหม โดยต้องดู ทั้ง 4 อย่างนี้

1. Channel ID
2. Channel Secret
3. Channel access token (long-lived)
4. Use webhooks

ลำดับ 1–3 สำคัญ ต้องใช้ต่อในการเขียน Code

โดย Channel access token (long-lived) ให้กด Issue เพื่อให้ได้ Token มา

** Use webhooks ต้องเป็น Disabled ไว้ก่อน เดียวเราจะไปดูส่วนนี้กันต่อ

อย่าลืมนะ **

ลองเช็คดูนะครับว่าได้ข้อมูลตามนี้ไหม

ถ้าทำถูกต้องแล้วต้องมีข้อมูลตามที่ ชี้ลูกศรไว้นะครับ

เรามาพักดื่มชากันแปปนึงก่อนให้ใจเย็น (โดนตบ) ไปกันต่อเราจะไปดูในส่วนของ Codeing กันว่าเราจะเชื่อมต่อไปยัง Channel ของเราได้อย่างไร ในตัวอย่างนี้เราจะขอใช้ ภาษา PHP เป็นตัวอย่างในการเขียน Blog แต่ผมมีตัวที่เป็น NodeJS ให้เหมือนกันเดียวจะแปะลิงค์ไว้ให้ใต้บทความนี้นะครับ

มาเริ่ม Codeing กันเลยครับ

มาเริ่ม Code กันเลย อันดับแรก สร้างไฟล์​ bot.php มาก่อน ส่วนแรกเป็นการ Set ตัวแปรเพื่อข้อมูลส่วนตัวที่เราได้รับจาก Line ตาม Code ด้านล่าง

// URL API LINE
$API_URL = 'https://api.line.me/v2/bot/message';
// ใส่ Channel access token (long-lived)
$ACCESS_TOKEN = '##########################';
// ใส่ Channel Secret
$CHANNEL_SECRET = '##########################';

ส่วนต่อไปเป็นการ Set Header สำหรับการ Post Data เข้าสู่ API ของ Line

// Set HEADER
$POST_HEADER = array('Content-Type: application/json', 'Authorization: Bearer ' . $ACCESS_TOKEN);
// Get request content
$request = file_get_contents('php://input');
// Decode JSON to Array
$request_array = json_decode($request, true);

สร้าง Function สำหรับ CURL ใช้ในการ Post Data ไปยัง API ของ Line จะได้ง่ายๆ

ปล. ตรงนี้แล้วแต่ความสะดวกของแต่ละคนเลยขอให้ request ไปถึง Line API

function send_reply_message($url, $post_header, $post_body)
{
    $ch = curl_init($url);
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $post_header);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $post_body);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
    $result = curl_exec($ch);
    curl_close($ch);

    return $result;
}

ส่วนต่อไปเป็นการ Get ข้อมูลที่ได้จากการที่ User ที่มีการกระทำใน Channel ตัวอย่างเช่น การพิมพ์ข้อความ การส่งสติกเกอร์

if ( sizeof($request_array['events']) > 0 ) {
      foreach ($request_array['events'] as $event) {
      
      $reply_message = '';
      $reply_token = $event['replyToken'];
      $data = [
         'replyToken' => $reply_token,
         'messages' => [
            ['type' => 'text', 
             'text' => json_encode($request_array)]
         ]
      ];
      $post_body = json_encode($data, JSON_UNESCAPED_UNICODE);
      $send_result = send_reply_message($API_URL.'/reply', $POST_HEADER, $post_body);
      echo "Result: ".$send_result."\r\n";
   }
}
echo "OK";

ปล. เนื่องจาก Heroku ต้องการ composer ให้สร้างไฟล์ composer.json ตามด้านล่าง

{
   "require": {
       "php": "^7.1.0"
   }
}

และทำการ composer install

หลังจากนั้นทำการ push Code ของเราทั้งหมด เข้า Github ทั้งหมด

เตรียม Server สำหรับ Deploy งานของเรา

จากที่เราเตรียม Code เสร็จแล้วแต่ยังไม่สามารถเอาขึ้นได้เนื่องจากการที่จะทำให้เชื่อมต่อไปยัง Messaging API ได้นั้นเราจะต้องมี Server ที่มี SSL จึงจะสามารถ hook ผ่านตัว webhook ที่ได้กล่าวไว้ข้างต้นถ้ายังจำได้ การที่จะมี Server + SSL ได้ก็มีได้ 2 อย่าง

1. เช่า ซื้อ Server + SSL
2. Server ฟรี + SSL ฟรี

วันนี้เราขอใช้ Heroku ในการ Deploy นะครับ ทำไมต้องใช้ Heroku

• ง่ายต่อการ Deploy และ มี Auto Deploy หลังจากที่เรา Push เข้า Github
• สามารถเชื่อมต่อไป Github เพื่อการ Deploy งานได้ง่ายขึ้น
• Server ฟรี พร้อมมี SSL

ทำให้การใช้ Heroku งานค่อนข้างครบมากๆ และประเด็นสำคัญ คือ ฟรี [ FREE ]

ตัวอย่าง Code

https://github.com/benzintel/linebot/blob/master/bot-checktoken.php

มาเริ่ม Deploy PHP ด้วย Heroku กันเลย

เริ่มจากการสมัครใช้งาน Heroku กรอกข้อมูลเสร็จ กด New -> Create new app

ทำการตั้งชื่อ App name และ Create app

เชื่อมต่อ Github เข้า Heroku โดยการเลือก Github และ ใส่ชื่อ Repo ของเราลงไปและทำการ Connect

หลังจาก Connect เรียบร้อยแล้ว ทำการเลือก Branch ที่ต้องการ Deploy

เราจะรู้ URL ของเราได้ยังไง

ไปยัง Tab Settings และเลื่อนลงมาจะเจอ Domain อันนี้คือ Domain ของเรา

จะ Webhook ยังไง

กลับมายังหน้าของ Line Developer เราจะต้องมาปรับ Use Webhooks ให้เป็น Enabled และ ทำการใส่ Webhook URL ตามที่ได้ Copy มา แล้วต่อด้วย {heroku domain}/bot.php เพราะเรารันผ่านไฟล์ bot.php เลยต้องรันตามนี้

สำเสร็จการ hook

มาทดสอบกันดีกว่า

ผมได้พิมพ์คำว่า “Hi” เข้าไปในแชทและ Bot ของเราได้ทำการตอบ Json กลับมา ตัว Json นี้เป็น detail ของคนที่ทำการพิมพ์เข้าไปใน Channel ส่วนประกอบหลัก Json นี้คือ

• userId [คือ uuid ของ User]
• replyToken [คือ เอาไว้ให้ Bot สามารถตอบกลับได้ถูกคน]

ทำไม userId, replyToken มีความสำคัญยังไง userId จะไปใช้ตอน Push messaging ส่วน replyToken จะใช้ในส่วนของ การตอบกลับแบบ Send reply message อ่านรายละดอียดเพิ่มเติมได้ ที่นี่

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

if ( sizeof($request_array['events']) > 0 ) {
   foreach ($request_array['events'] as $event) {
      
      $reply_message = '';
      $reply_token = $event['replyToken'];
      $text = $event['message']['text'];
      $data = [
         'replyToken' => $reply_token,
         'messages' => [['type' => 'text', 'text' => $text ]]
      ];
      $post_body = json_encode($data, JSON_UNESCAPED_UNICODE);
      $send_result = send_reply_message($API_URL.'/reply',      $POST_HEADER, $post_body);
      echo "Result: ".$send_result."\r\n";
    }
}

การทำ Chat Bot ไม่ยากอย่างที่คิด คนที่คิดอยากจะเริ่มต้นในการพัฒนาด้วย Line Messaging API ลองทำตามได้นะครับ ซึ้งอันนี้ ผมได้ Guild แบบง่ายๆเพื่อให้คนที่อยากจะทดลองทำเข้าใจง่ายขึ้น ถ้ามีขอสงสัย หรืออยากติชมใดๆ สามารถ คอมเม้นเพิ่มเติมได้นะครับ ขอบคุณทุกคนที่ อดทนอ่านแล้วทำไปพร้อมๆกัน

สุดท้ายแต่ไม่ท้ายสุด

ผมได้แนบ github ของการทำไว้ให้ด้วยสำหรับ ภาษา PHP , NodeJS เพื่อให้เป็นตัวอย่างในการพัฒนาต่อไปครับ

สำหรับหัวข้อหน้า จะมาทอลองทำ Flex Message กัน

สำหรับคนที่ ไม่เข้าใจและ งง สามารถส่ง Email มาถามได้นะครับ หรือจะ Line ก็ได้

LineID: benzintel , Email: benz20003@gmail.com

Ref.

สำหรับชาว PHP

benzintel/linebot

สำหรับชาว NodeJS

benzintel/demo-line

ขอบคุณข้อมูลจาก

LINE Developers