สร้าง LINE Bot ด้วย Messaging API

          สวัสดีปีใหม่ย้อนหลังครับผม!!! หลังจากเงียบหายไปประมาณเดือนนึงจากบทความล่าสุด วันนี้ถือเป็นฤกษ์งามยามดี (ตรงไหน?) ที่ทางลุงบันไดเปิดให้จอง Digimon Pendulum ver.20th ไปแล้ว เจ้าเครื่องนี้จะรวมสัตว์เลี้ยงดิจิตอลรุ่น Digimon Pendulum ทุกเวอร์ชันซึ่งบันไดทำออกมาฉลองครบรอบ 20 ปีของดิจิมอน และถ้ามีโอกาส ผมก็อาจจะเขียนบทความรีวิวเหมือนอย่างบทความ Digital Monster Ver.20th (Original)..... แต่นั่นก็เป็นเรื่องของอนาคต ไม่ใช่เรื่องที่ต้องสนใจตอนนี้ เพราะจริง ๆ แล้วบทความนี้เป็นบทความเกี่ยวกับการเขียนบอทต่างหาก (ฮา)

          หากพูดถึงบอทในภาษานักเล่นเกม เพื่อน ๆ ก็คงจะนึกถึงตัวละครในเกมที่สามารถเคลื่อนไหวได้เองโดยไม่ต้องมีผู้เล่นบังคับ แต่บอทในบทความนี้หมายถึง LINE Bot ซึ่งเป็น Line@ Account ที่ใช้ API ที่เรียกว่า Message API ร่วมกับโปรแกรมที่เราเขียนไว้เบื้องหลังเพื่อให้ LINE@ Account สามารถทำตามคำสั่งหรือตอบโต้การสนทนาได้โดยอัตโนมัติ โดยเจ้า Message API ก็คือ API ที่ทาง LINE สร้างขึ้นเพื่ออนุญาตให้ส่งข้อมูลจากโปรแกรมบน Server ของนักพัฒนาไปยังแพลตฟอร์มของ LINE .....ว่าแล้วเราก็มาเริ่มสร้าง LINE Bot กันเล้ยยยยย

สร้าง channel สำหรับ LINE Bot

---

          ในการจะใช้ Message API เพื่อสร้างบอทนั้น อันดับแรกให้เราเข้าไปที่ LINE Developers console เพื่อสร้าง channel หรือช่องทางที่จะเชื่อมต่อโปรแกรมของเรากับแพลตฟอร์มของ LINE

ใส่ username และ password บัญชีของ LINE เพื่อ Log in เข้าสู่ระบบ

คลิกที่ปุ่ม "Create provider"

ตั้งชื่อ Provider ใช้เป็นชื่อบริษัทก็ได้

เมื่อสร้าง Provider เสร็จแล้วให้คลิกที่ปุ่ม "Message API" เพื่อสร้าง channel

กรอกข้อมูลต่าง ๆ จากนั้นก็คลิกปุ่ม Create

แค่นี้ก็เป็นอันเสร็จสิ้นการสร้าง channel

          หลังจากทำการสร้าง channel เสร็จ ตอนนี้เราสามารถแอดเพื่อนกับบอทที่เราสร้างได้ไว้แล้ว แต่เนื่องจากเรายังไม่ได้สร้างโปรแกรมสำหรับประมวลผล บอทของเราจึงทำได้แค่ตอบกลับข้อความตามที่เราตั้งค่าไว้เท่านั้น

เพิ่มบอทเป็นเพื่อน

---

          วิธีเพิ่มบอทเป็นเพื่อนก็เหมือนกับการเพิ่มเพื่อนแบบปกตินั่นคือการเพิ่มจาก LINE ID หรือเพิ่มจาก QR Code

          วิธีดู QR Code ก็ให้คลิกตรงที่ channel bot นั้น ๆ เพื่อเข้าไปหน้า Configuration จากนั้นก็เลื่อนลงมาที่หัวข้อ "QR code of your bot" จากนั้นก็สแกน QR Code เพื่อเพิ่มเพื่อนโล้ดดดดด (ส่วนวิธีการเพิ่มเพื่อนด้วย LINE ID จะพูดถึงในลำดับถัดไป)

หลังจากทำการเพิ่มบอทเป็นเพื่อนแล้ว เราก็จะได้รับข้อความต้อนรับ (Greeting message)

และเมื่อพิมพ์อะไรไป เราก็จะได้รับข้อความตอบกลับอัตโนมัติ (Auto-reply messages)



          จะเห็นได้ว่า ถึงเรายังไม่ได้เขียนโปรแกรมอะไร ระบบก็มีการเซ็ตค่าตั้งต้นเพื่อให้ตอบกลับข้อความของเราอยู่แล้ว ซึ่งเราสามารถแก้ไขข้อความได้ทั้ง Greeting message และ Auto-reply messages ในหน้า Configuration ตรงหัวข้อ "Using LINE@ features"

เมื่อเราคลิกที่ Set message ของ Greeting message ก็จะแสดงหน้าให้แก้ไขข้อความต้อนรับ

เมื่อเราคลิกที่ Set message ของ Auto-reply messages ก็จะแสดงหน้าข้อความตอบกลับอัตโนมัติ

*แนะนำให้ลบข้อความ Auto-reply messages เนื่องจากเราจะเขียนโปรแกรมตอบกลับข้อความเอง*

หมายเหตุ: สังเกตตรงเมนูทางซ้ายจะมี LINE ID อยู่

เตรียม Server สำหรับเชื่อมต่อกับ LINE

---

          Server ที่จะทำ Webhook เชื่อมต่อกับ LINE นั้นจะต้องเป็น Server ที่สามารถใช้ https ได้ ซึ่งถ้าเรามีอยู่แล้วก็สามารถเอามาใช้ได้เลย แต่ถ้าเราไม่อยากเสียเงินเช่า Server ที่มี SSL (ซึ่งจะแพงกว่า Server ปกติ) เราก็สามารถไปใช้งาน Server แบบ SSL บน Heroku.com แทนได้โดยไม่เสียค่าใช้จ่าย ซึ่งแน่นอนว่าเราต้องสมัครสมาชิกก่อน

เข้าเว็บ Heroku.com เสร็จแล้วคลิก Sign up โลด

กรอกข้อมูลสมัครสมาชิกให้ครบถ้วน จากนั้นจะมีอีเมลส่งมาให้ตั้งพาสเวิร์ด

พอ Login เสร็จ ก็คลิก Create New App เพื่อทำการสร้าง Server (ในที่นี้จะเรียกว่า App) ได้เลย

ตั้งชื่อ App แล้วคลิก Create app โล้ดดดดด

เมื่อสร้างเสร็จแล้วจะได้ตามรูป สิ่งสำคัญคือชื่อ App ที่เราตั้งไว้ (ในกรอบสีแดง)

เราสามารถทดสอบ App ที่เพิ่งสร้างเมื่อสักครู่ได้โดยการเข้าไปที่ URL https://<ชื่อ app>.herokuapp.com

ตามตัวอย่างคือ https://javeb-app.herokuapp.com/ ซึ่งจะได้หน้าเว็บตามรูป



วิธี Deploy โค้ดไปยัง Heroku

---

          ในขั้นตอนที่แล้ว เราได้สร้าง App ที่ถือเป็นตัว Server เสร็จเรียบร้อยแล้ว สิ่งที่ต้องทำถัดไปคือการเขียนโค้ดแล้วส่งไปยัง App ที่เราได้สร้างขึ้น ส่วนโค้ดที่เราจะเขียนนั้นคือโค้ดภาษา PHP ซึ่งเป็นโค้ดที่สามารถอ่านทำความเข้าใจได้ง่าย โดยวิธีการส่งโค้ดขึ้นไปยัง App บน Heroku.com มีหลายวิธีดังต่อไปนี้

1. Heroku CLI: เป็นเครื่องมือที่ใช้คำสั่งของ Git (บทความที่เกี่ยวกับ Git) ในการ Deploy โค้ดขึ้นไปยัง Heroku.com โดยตรง
2. GitHub: เชื่อมต่อกับ GitHub เมื่อ Push โค้ดขึ้น GitHub แล้วก็จะ Deploy ไปยัง Heroku.com ให้อัตโนมัติ
3. Dropbox: เชื่อมต่อกับ Dropbox และสั่ง Deploy ในเมนู Heroku Dashboard

          อันนี้แล้วแต่ว่าเพื่อน ๆ จะเลือกใช้เครื่องมือตัวไหนตามที่ตนเองถนัด อันที่จริงใช้ Dropbox ก็ง่ายดีนะ แต่ในบทความนี้จะขอใช้ Heroku CLI ในการ Deploy โค้ดไปยัง Heroku.com ละกัน ถ้าใครยังไม่รู้จักหรือใช้ Git ไม่เป็นก็กลับไปอ่านบทความที่เกี่ยวกับ Git ก่อน เอาล่ะเรามาติดตั้ง Heroku CLI กันเถอะ เริ่มจากเข้าไปยังลิงค์ Download Heroku CLI แล้วเลือกตัวติดตั้งตามระบบปฏิบัติการณ์ของเพื่อน ๆ

หลังจากคลิกตัวติดตั้งแล้วก็คลิก Next > ได้เลย

เลือก path ที่จะติดตั้งแล้วคลิก Install โลด

รอคอยสักนิดให้ระบบติดตั้งจนเสร็จ แล้วคลิก Close ปิดหน้าต่างนี้ไปได้เลย



          หลังจากติดตั้ง Heroku CLI เสร็จแล้ว เราก็สามารถเรียกใช้งานคำสั่งผ่าน Command Prompt ได้เลย ขั้นตอนต่อไปให้เราทำการทดสอบดูว่าสามารถ Deploy โค้ดไปยัง Heroku.com ได้หรือเปล่า เริ่มจากการสร้างไฟล์ index.php ที่มีโค้ดดังต่อไปนี้

<?php
echo "Hello LINE bot World!";
?>

กดปุ่ม Window + R แล้วพิมพ์ cmd จากนั้นก็คลิก OK เพื่อเปิด Command Prompt



          ใน Command Prompt ให้พิมพ์คำสั่ง  heroku login  แล้วให้เราพิมพ์ Email และ Password ที่ได้สมัครไว้ใน Heroku.com (**ต่อไปจะแยกวิธีใช้งานออกเป็น 2 วิธี สำหรับเพื่อน ๆ ที่ติดตั้ง Git ลงใน Command Prompt ก็สามารถใช้งานต่อได้เลย ส่วนเพื่อน ๆ ที่ติดตั้ง Git ตามในบทความนี้ให้เปิด Git Bash ขึ้นมาแทน**) จากนั้นให้ใช้คำสั่ง  cd <โฟลเดอร์ที่เก็บไฟล์ index.php> เพื่อย้าย path ไปยังโฟลเดอร์ของไฟล์ index.php

$ cd /C/Line_bot/

          ให้เราทำการสร้าง Git Repository ขึ้นมาด้วยคำสั่ง  git init 

$ git init
Initialized empty Git repository in C:/Line_bot/.git/

          จากนั้นให้ใช้คำสั่ง  heroku git:remote -a <ชื่อ App>  เพื่อกำหนดค่าให้ Git Repository เชื่อมต่อไปยัง Server ของ Heroku.com

$ heroku git:remote -a javeb-app
set git remote heroku to https://git.heroku.com/javeb-app.git

          ถัดไปให้ใช้คำสั่ง git add ตามด้วย git commit แล้วจึงใช้คำสั่ง  git push heroku master  เพื่อส่งไฟล์ไปยัง Heroku.com

$ git add .

$ git commit -m "Create index.php"
[master (root-commit) e38b346] Create index.php
 1 file changed, 5 insertions(+)
 create mode 100644 index.php

$ git push heroku master
Counting objects: 3, done.
Writing objects: 100% (3/3), 259 bytes | 259.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> PHP app detected
remote:
remote:  !     WARNING: No 'composer.json' found.
remote:        Using 'index.php' to declare app type as PHP is considered legacy
remote:        functionality and may lead to unexpected behavior.
remote:
remote: -----> Bootstrapping...
remote: -----> Installing platform packages...
remote:        NOTICE: No runtime required in composer.lock; using PHP ^5.5.17
remote:        - apache (2.4.29)
remote:        - nginx (1.8.1)
remote:        - php (5.6.33)
remote: -----> Installing dependencies...
remote:        Composer version 1.6.2 2018-01-05 15:28:41
remote: -----> Preparing runtime environment...
remote:        NOTICE: No Procfile, using 'web: heroku-php-apache2'.
remote: -----> Checking for additional extensions to install...
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote:
remote: -----> Compressing...
remote:        Done: 13.8M
remote: -----> Launching...
remote:        Released v3
remote:        https://javeb-app.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy.... done.
To https://git.heroku.com/javeb-app.git
 * [new branch]      master -> master

          หลังจาก Deploy เสร็จแล้ว ให้ลองเข้าไปยัง URL เดิม (ตามตัวอย่างคือ https://javeb-app.herokuapp.com/) ก็จะพบว่าหน้าเว็บได้เปลี่ยนไปแล้ว อันดับถัดไปเราจะต้องเขียนโปรแกรมบอทจากนั้นก็ Deploy โค้ดขึ้นไปยัง Heroku.com ซึ่งโค้ดตัวนี้จะเป็นตัวที่รับข้อความมาจาก LINE แล้วทำการประมวลผล ดังนั้นเราจำเป็นต้องเอา URL ที่เก็บโค้ดดังกล่าวไปตั้งค่าใน LINE งั้นเราก็มาสร้างโค้ดบอทที่ว่าแบบคร่าว ๆ เพื่อเอา URL ไปตั้งค่ากันเถอะ

          ปล. ที่ผลลัพธ์จากการ push ยาว ๆ แบบนั้นเป็นเพราะไฟล์ที่เรา Deploy ยังขาดไฟล์บางไฟล์ไป ระบบเลยแจ้งเตือนขึ้นมา แต่เราไม่ต้องสนใจก็ได้ เพราะเราไม่ได้ต้องการสร้างเว็บขนาดใหญ่

สร้างไฟล์ javeb_bot.php

---

          ตามที่เกริ่นไว้แล้ว เราจะมาสร้างไฟล์บอทที่ชื่อว่า javeb_bot.php กัน แต่ว่าเราจะยังไม่เขียนให้ไฟล์นี้ทำการประมวลผลอะไรมากนัก เพราะเราต้องการนำไฟล์นี้ไป Deploy เพื่อให้ได้ URL สำหรับรับข้อความจาก LINE เท่านั้น ซึ่งเราจะกลับมาแก้ไขไฟล์นี้ภายหลัง .....งั้นเรามาสร้างไฟล์ javeb_bot.php กันเลย

<?php

echo "Hi! I'm your bot.";

?>

          ให้ก็อปปี้โค้ดข้างบนแล้วเซฟไฟล์ในชื่อ javeb_bot.php จากนั้นก็ add ไฟล์ commit แล้ว push ขึ้น Heroku.com ได้เลย

$ git add javeb_bot.php

$ git commit -m "Add file javeb_bot.php"
[master 8e26fa7] Add file javeb_bot.php
 1 file changed, 5 insertions(+)
 create mode 100644 javeb_bot.php

$ git push heroku master
Counting objects: 3, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 323 bytes | 161.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> PHP app detected
remote:
remote:  !     WARNING: No 'composer.json' found.
remote:        Using 'index.php' to declare app type as PHP is considered legacy
remote:        functionality and may lead to unexpected behavior.
remote:
remote: -----> Bootstrapping...
remote: -----> Installing platform packages...
remote:        NOTICE: No runtime required in composer.lock; using PHP ^5.5.17
remote:        - apache (2.4.29)
remote:        - nginx (1.8.1)
remote:        - php (5.6.33)
remote: -----> Installing dependencies...
remote:        Composer version 1.6.2 2018-01-05 15:28:41
remote: -----> Preparing runtime environment...
remote:        NOTICE: No Procfile, using 'web: heroku-php-apache2'.
remote: -----> Checking for additional extensions to install...
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote:
remote: -----> Compressing...
remote:        Done: 13.8M
remote: -----> Launching...
remote:        Released v4
remote:        https://javeb-app.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/javeb-app.git
   e38b346..8e26fa7  master -> master

          ทดสอบผลลัพธ์ด้วยการเข้าไปที่ https://<ชื่อ App>.herokuapp.com/javeb_bot.php (ตามตัวอย่างคือ https://javeb-app.herokuapp.com/javeb_bot.php) เมื่อได้ผลลัพธ์ถูกต้องตามที่ต้องการแล้ว ต่อไปเราไปตั้งค่าใน LINE Developers console กันต่อ

ตั้งค่าเชื่อมต่อ Message API กับ Server

---

          ขั้นตอนนี้เราจะต้องเข้าไปที่ LINE Developers console เพื่อตั้งค่าให้ LINE Bot ส่งข้อความที่ได้รับจากผู้ใช้งานไปยัง URL โปรแกรมบอทของเรา

คลิกเลือก channel บอทที่เราสร้าง

เลื่อนลงมาล่าง ๆ ตรง Messaging settings

ตรง Channel access token (long-lived) ให้คลิกปุ่ม Issue จะแสดงดั่งรูปข้างบน

เลือกจำนวนชั่วโมงหรือ 0 เพื่อไม่กำหนดอายุของ Access Token แล้วคลิก Issue เพื่อสร้าง Access Token

(Access Token จะนำไปใช้ตอนส่งข้อความตอบกลับ ให้จดเอาไว้ด้วย)

ตรง Use webhooks ให้เลือกเป็น Enabled

ตรง Webhook URL ให้ใส่ URL ที่เราได้สร้างไว้เมื่อสักครู่

ส่วน Allow bot to join group chats เป็นตัวเลือกว่าจะยอมให้บอทเข้ากลุ่มแชทหรือเปล่า

ถ้ายอมให้เข้ากลุ่มได้ ให้เลือก Enabled



          หลังจากที่เราตั้งค่าใน LINE Developers console เสร็จเรียบร้อยแล้ว ถัดไปเราจะมาเขียนโค้ดเพื่อตอบกลับข้อความที่ได้รับจากผู้ใช้งานกัน

เขียนโค้ดบอทตอบข้อความกลับอัตโนมัติ

---

          เมื่อสักครู่เราได้ตั้งค่าให้ LINE Bot ส่งข้อความไปยัง URL ของเราเรียบร้อยแล้ว ทีนี้เราก็มาแก้ไขไฟล์ javeb_bot.php เพื่อให้ตอบข้อความกลับโดยอัตโนมัติ แต่ก่อนอื่นเรามาดูกันก่อนว่า LINE ส่งอะไรมาที่ไฟล์ javeb_bot.php บ้าง สิ่งที่ LINE ส่งมาคือ JSON ที่มีหน้าตาประมาณนี้

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

          เมื่อเราได้รับ JSON แล้ว ก็ให้ประมวลผลสิ่งที่ได้รับก่อนจากนั้นค่อยส่งข้อความตอบกลับ โดยการสร้าง Request JSON ที่มีหน้าตาตามข้างล่างนี้และแนบค่า replyToken (ที่ได้รับมา) ส่งไปที่ Message API https://api.line.me/v2/bot/message/reply

{
  "replyToken": "nHuyWiB7yP5Zw52FIkcQobQuGDXCTA",
  "messages": [
    {
      "type": "text",
      "text": "Hi! This is auto reply message."
    }
  ]
}

          ถึงตรงนี้ เราก็พอจะรู้คร่าว ๆ แล้วว่าต้องส่งข้อมูลอะไรบ้าง ถัดไปให้เปิดไฟล์ javeb_bot.php แล้วแก้ไขไฟล์ตามโค้ดข้างล่าง เพื่อให้บอทตอบกลับข้อความโดยอัตโนมัติ

<?php

$API_URL = 'https://api.line.me/v2/bot/message/reply';
$ACCESS_TOKEN = 'xxxxxxxxxx'; // Access Token ค่าที่เราสร้างขึ้น
$POST_HEADER = array('Content-Type: application/json', 'Authorization: Bearer ' . $ACCESS_TOKEN);

$request = file_get_contents('php://input');   // Get request content
$request_array = json_decode($request, true);   // Decode JSON to Array

if ( sizeof($request_array['events']) > 0 )
{

 foreach ($request_array['events'] as $event)
 {
  $reply_message = '';
  $reply_token = $event['replyToken'];

  if ( $event['type'] == 'message' ) 
  {
   if( $event['message']['type'] == 'text' )
   {
    $text = $event['message']['text'];
    $reply_message = 'ระบบได้รับข้อความ ('.$text.') ของคุณแล้ว';
   }
   else
    $reply_message = 'ระบบได้รับ '.ucfirst($event['message']['type']).' ของคุณแล้ว';
  
  }
  else
   $reply_message = 'ระบบได้รับ Event '.ucfirst($event['type']).' ของคุณแล้ว';
 
  if( strlen($reply_message) > 0 )
  {
   //$reply_message = iconv("tis-620","utf-8",$reply_message);
   $data = [
    'replyToken' => $reply_token,
    'messages' => [['type' => 'text', 'text' => $reply_message]]
   ];
   $post_body = json_encode($data, JSON_UNESCAPED_UNICODE);

   $send_result = send_reply_message($API_URL, $POST_HEADER, $post_body);
   echo "Result: ".$send_result."\r\n";
  }
 }
}

echo "OK";

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;
}

?>

          ผลลัพธ์ที่ได้ก็คือ เมื่อเราพิมพ์อะไรไป บอทก็จะตอบกลับมาว่า "ระบบได้รับข้อความ (xxx) ของคุณแล้ว" ก็เป็นอันเสร็จเรียบร้อย หวังว่าบทความนี้จะช่วยให้เพื่อน ๆ เข้าใจวิธีเขียน LINE Bot อย่างคร่าว ๆ ซึ่งเป็นพื้นฐานที่จะนำไปต่อยอดพัฒนาเป็นบอทที่เก่ง ๆ ได้ สำหรับบทความนี้ก็ขอจบลงเท่านี้ ไว้พบกันใหม่บทความหน้า บ๊ายบายจ้า 😆