LINE Bot 101 — จับมือทำบอท

เมื่อวานมีน้องมาถามเรื่องการทำบอท ก็อธิบายๆไป พออธิบายเสร็จ น้องตอบกลับมาว่า

“ก็ยุ่งยากเหมือนกันนะเนี่ย”

เอิบ ผมอธิบายได้ไม่ดีใช่มั้ย ทำบอทมันง่ายจะตาย งั้นเอางี้ จับมือทำเลยละกัน

นี่เป็นที่มาของ Blog นี้ครับ เดี๋ยวจะสอนว่าเราจะเริ่มต้น ทำ LINE Bot ได้ยังไง จับมือทำจนเสร็จเลย ภายใน 10 นาที ไปเริ่มกันเลย

Overview

1. สร้าง Channel ใน LINE developer console (3 นาที)
2. เริ่มต้นการเขียน Bot จาก Starter Kit (5 นาที)
3. เชื่อมต่อ Bot กับ Channel (2 นาที)

ขั้นตอนที่ 1 — สร้าง LINE Channel

บอทแต่ละตัวจะต้องถูกสร้างจาก Channel ที่อยู่ใน LINE Developer Console ก่อน สำหรับคนที่เคยสร้าง Channel ไว้แล้ว ก็ข้ามไปขั้นตอนที่ 2 ได้เลยครับ

สำหรับคนที่ยังไม่เคยสร้าง Channel ก็ทำตามเลยครับ เข้าไปที่ https://developers.line.me/ จะเจอเวบหน้าตาแบบนี้

กด Login เลยครับ ใช้ User เดียวกับ LINE ของตัวเองนี่แหละ

เมื่อ Login สำเร็จแล้ว จะเจอหน้าจอ Provider List แบบนี้

ก่อนจะสร้าง Channel ได้ เราต้องมี Provider ก่อน (มอง Provider เป็นเหมือนชื่อผู้สร้างบอท ส่วน Channel ก็คือ บอทแต่ละตัว)

กด Create New Provider เลยครับ

กด Confirm

เช็คชื่อ Provider ให้ถูกต้อง แล้วกด Create เลยครับ

สร้าง Provider เสร็จละ ขั้นตอนต่อไป เดี๋ยวเราจะมาสร้าง Bot Channel กัน

กด Create Channel ตรง Messaging API เลยครับ จะเจอหน้าจอแบบนี้

กรอกรายละเอียดในครบ ดังนี้ App icon : คือรูปของ Bot เป็น JPEG/PNG/GIF/BMP ขนาดไม่เกิน 3 MB App name : ชื่อ Bot ความยาวไม่เกิน 20 ตัวอักษร App description : ความยาวไม่เกิน 500 ตัวอักษร Plan : ตอนนี้เลือกได้แค่ Developer Trial Category / SubCategory : เลือกประเภทของ Bot ที่ต้องการ Email Address : ใส่อีเมล์ของผู้พัฒนา ตามตัวอย่าง

เสร็จแล้วกด Confirm

กดยอมรับ Terms of use ทั้งสองอัน แล้วกด Create เลยครับ

บางคนอาจจะเห็นข้อความ แบบนี้

อันนี้แปลว่า ชื่อบอทของคุณไม่ถูกต้องนะครับ จากตัวอย่าง ชื่อบอทมีคำว่า LINE จะใช้ไม่ได้นะครับ ให้ย้อนไป Edit แล้วลบคำว่า LINE ออกจาก App name จากนั้น confirm และกด create ใหม่อีกครั้ง จะเจอหน้าจอแบบนี้ครับ

เกือบเสร็จละ ให้กดเข้าไปดูที่ Bot ของเรา จะเจอหน้าจอแบบนี้ครับ

ให้เลื่อนลงไปหา หัวข้อที่ชื่อว่า Channel secret แล้ว copy ค่าไว้ ไปใช้ในขั้นตอนต่อไป

จากนั้น หาหัวข้อที่ชื่อว่า Channel access token

กด Issue เพื่อสร้าง token

ตรงนี้สามารถกำหนดอายุของ Token ได้ แต่ตอนนี้ ทุก token ที่สร้างจาก developers console จะเป็น Long live token ทั้งหมด คือใช้ได้ตลอดไป ดังนั้น ตรงนี้ก็กด Issue ได้เลยครับ

จะได้ค่า token มาแบบนี้ ให้ copy ค่า access token ไว้ เพื่อใช้ในขั้นตอนต่อไป

ต่ออีกนิดนึง ให้หาหัวข้อ Auto-reply messages

กด Edit แล้วเลือก disabled เพื่อปิดการตอบกลับอัตโนมัติ

จากนั้นเลื่อนลงไปล่างสุด จะเจอ QR Code หน้าตาแบบนี้

อันนี้ก็คือ QRCode ของ Bot ของเรา ให้ใช้แอพ LINE สแกนเพื่อเพิ่ม Bot เป็นเพื่อนได้เลย

ขั้นตอนแรกเสร็จละ ต่อไปเราจะเริ่มในส่วน coding ละนะ

ขั้นตอนที่ 2 — เริ่ม code ตัว Bot จาก Starter Kit

LINE ได้ provide SDK และ example code ไว้ให้มากมายแล้ว ลองเข้าไปดูได้ที่ https://github.com/line

วันนี้เราจะมาลองเล่น ตัวนี้ครับ LINE-bot-SDK-nodejs https://github.com/line/line-bot-sdk-nodejs

เริ่มต้นจาก clone project มาก่อนเลยครับ

git clone https://github.com/line/line-bot-sdk-nodejs.git

เราจะลองเล่น project example ซึ่ง LINE เตรียมไว้ให้เราแล้ว ซึ่งอยู่ที่ /examples/kitchensink

cd line-bot-sdk-nodejs/examples/kitchensink/

จะได้โปรเจคหน้าตาแบบนี้

เราได้โปรเจคที่พร้อมรันใน localhost แล้วนะ แต่จะยังไม่สามารถเชื่อมต่อกับ LINE ได้ เนื่องจาก LINE ต้องการ public url และต้องเป็น https ด้วย

เราจะใช้ **ngrok** เพื่อ expose localhost ของเรา ออก public เพื่อให้สามารถเชื่อมต่อกับ LINE ได้

ใครยังไม่มี ไปดาวน์โหลด ngrok ได้ที่ https://ngrok.com/download แล้วทำตามขั้นตอน 1–2–3 ในหน้า download นั้นเลย

จากนั้น เริ่มรัน ngrok เพื่อ expose port ที่ต้องการ เช่น ถ้าเราต้องการรัน Bot ของเราที่ port 9999 ให้ใช้คำสั่ง ดังนี้

./ngrok http 9999

จะได้หน้าตาแบบนี้

ให้ copy https url ไว้ เพื่อใช้เป็น base url ของ bot

ต่อไปเราจะเริ่มรัน Bot ของเรา โดยให้กำหนด Environment ดังนี้

YOUR_CHANNEL_SECRET : Channel Secret ที่ได้จาก LINE console YOUR_CHANNEL_ACCESS_TOKEN : Access Token ที่ได้จาก LINE console BASE_URL : Url ที่ได้จาก ngrok PORT : Port ที่ต้องการ ในตัวอย่างนี้คือ 9999

export CHANNEL_SECRET=YOUR_CHANNEL_SECRET
export CHANNEL_ACCESS_TOKEN=YOUR_CHANNEL_ACCESS_TOKEN
export BASE_URL=https://your.base.url
export PORT=9999

เสร็จละ มารัน Bot กันเลย

npm install
npm start

เสร็จละครับ ตอนนี้บอทของเรารันขึ้นมาแล้ว ไปจัดการขั้นตอนสุดท้ายกัน

ขั้นตอนที่ 3 — เชื่อมต่อ Bot กับ Channel

ให้ย้อนกลับไปที่ LINE developer console ในหน้า Channel Settings ของเรา ในหัวข้อ Messaging settings ให้ปรับดังนี้

Use webhooks : ให้เลือก enabled Webhook URL : ให้ระบุเป็น https url ที่ได้จาก ngrok ตามด้วย /callback ดังตัวอย่างในรูป

เสร็จละครับ บอทเราพร้อมใช้งานละ อ่ะ ไม่เชื่อไปลองดูกัน

ไปที่หน้าจอ Chat ของ Bot ที่เราทำไว้ แล้วลองพิมพ์ทักทายกับ Bot ดูครับ

จะเห็นว่า Bot จะตอบกลับมา ตามข้อความที่เราพิมพ์ไป

นอกจากนี้ Bot ยังรับคำสั่งเพื่อแสดงข้อความในรูปแบบต่างๆ ลองพิมพ์ข้อความเหล่านี้ดูทีละคำ เพื่อดูว่า Bot จะตอบกลับมาอย่างไร

profile
buttons
confirm
carousel
image carousel
datetime
imagemap

เริ่มสนุกแล้วหล่ะสิ แค่นี้ก็น่าจะพอทำให้เห็นภาพกันมากขึ้นแล้ว ว่า LINE Bot ทำงานยังไง ต่อไป เราจะลองมาดู code กันสักหน่อย

Code code code

ถ้าลองเปิดไฟล์ index.js ดู ก็จะเห็น code หน้าตาแบบนี้

const line = require('@line/bot-sdk');
const express = require('express');
const fs = require('fs');
const path = require('path');
const cp = require('child_process');

// create LINE SDK config from env variables
const config = {
     channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN,
     channelSecret: process.env.CHANNEL_SECRET,
};

// base URL for webhook server
const baseURL = process.env.BASE_URL;

// create LINE SDK client
const client = new line.Client(config);

// create Express app
const app = express();

line คือ LINE SDK express คือ ตัวที่เราใช้ทำ server client คือ ตัวที่ใช้ ส่งข้อความกลับไปยัง LINE ของ user

// webhook callback
app.post('/callback', line.middleware(config), (req, res) => {

   // req.body.events should be an array of events
   if (!Array.isArray(req.body.events)) {
      return res.status(500).end();
   }

   // handle events separately
   Promise.all(req.body.events.map(handleEvent))
      .then(() => res.end())
      .catch((err) => {
         console.error(err);
         res.status(500).end();
      });
});

line.middleware เป็น middleware ที่ใช้ในการตรวจสอบว่า request นี้ ถูกส่งมาจาก LINE จริงหรือไม่ (ดูเพิ่มเติม https://developers.line.me/en/reference/messaging-api/#request-headers) req.body.events เป็น payload ที่ส่งมาจาก LINE ซึ่งเป็น array ของเหตุการณ์ที่เกิดขึ้นกับ Bot เช่น มีการส่งข้อความ มีคนเพิ่มเพื่อน หรือมีการส่ง postback data เข้ามา เป็นต้น handleEvent เป็น function ที่ใช้ในการจัดการ event แต่ละ event ที่เข้ามา

ตรงนี้คือหัวใจของ LINE Bot คือการรับ webhook request ที่จะส่งมาจาก LINE ซึ่งเราระบุ endpoint นี้ โดยการกำหนด webhook ที่ developer console นั่นเอง โดยเมื่อมีข้อความส่งถึง Bot LINE จะส่ง POST request หน้าตา คล้ายๆแบบนี้มา

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

replyToken เป็น token ที่ใช้เพื่อส่งข้อความกลับไปหา User type เป็นประเภทของ event เช่น message, postback, follow เป็นต้น source คือ ผู้ส่ง ว่าส่งมาจาก user หรือ group หรือ room message คือ payload ของข้อความ ซึ่งจะแตกต่างกันไปตามประเภทของข้อความ

Ref : API ของการรับข้อความ(web hooks events) https://developers.line.me/en/reference/messaging-api/#webhook-event-objects

สิ่งที่เราต้องทำ ในการพัฒนา LINE Bot ก็คือการ implement handleEvent ใน code ตัวอย่างนี้ นั่นคือการจัดการ events ต่างๆที่ LINE ส่งมา และทำการตอบสนอง ในแนวทางที่ต้องการ

โดยการส่งข้อความกลับไปหา user นั้น ทำได้โดยการเรียก client.replyMessage หรือ client.pushMessage แล้วแต่กรณี

โดย replyMessage จะใช้ในกรณีที่ Bot ทำการตอบสนองผู้ใช้ในทันทีที่ผู้ใช้ส่งข้อความมา

ส่วน pushMessage จะใช้ในกรณีที่ Bot ต้องการส่งข้อความถึงผู้ใช้เอง เช่นการส่งข้อความแบบตั้งเวลา หรือตามเงื่อนไขที่กำหนดไว้ โดยที่ผู้ใช้ ไม่ต้องส่งข้อความอะไรมาก่อนก็ได้

Ref : API การส่งข้อความ https://developers.line.me/en/reference/messaging-api/#send-reply-message

แค่นี่แหละ หัวใจของ LINE Bot มีแค่นี้เลย นอกนั้นก็เป็นลูกเล่นต่างๆ ว่าเราจะส่งข้อความออกไปในรูปแบบไหนเพื่อให้เหมาะสมกับ Content และการ Interact กับผู้ใช้ ซึ่งรูปแบบข้อความที่เราทำส่งได้ ก็หลากหลาย เช่น Text, Image, Video, Audio, Location, Sticker, Imagemap, Template หรือ Flex Message ขึ้นอยู่กับว่าเราจะเอาไปประยุกต์ใช้อย่างไร

นอกจากนี้ LINE Messaging API ยังสามารถ Integrated ทำงานร่วมกับ Service อื่นๆของ LINE ได้อีก เช่น LINE Login, LINE PAY API, LINE Frontend Framework (LIFF), LINE Notify เป็นต้น อยู่ที่ว่า เราจะออกแบบ product/service ของเราอย่างไร

ผมจึงอยากชวนให้ทุกคน มาลองเล่นกันดูครับ บางคนก็เคยทำมาแล้ว บางคนก็เพิ่งลองศึกษา บางคนอาจจะเพิ่งเคยรู้จักว่ามันมีแบบนี้ด้วยเหรอ

สุดท้ายนี้ ถ้าใครอยากเรียนรู้ LINE Messaging API รวมถึง API อื่นๆของ LINE Ecosystem และได้ทดลองทำ product เจ๋งๆไปพร้อมๆกัน

มาลงแข่ง **LINE HACK** กันสิครับ :P

สนใจสมัครเลย https://docs.google.com/spreadsheets/d/1GqWcYW1Al-6jHCZ6SfKA7xl9bHbT8Uv5yQHntNULG8g/edit

Resources

Developer console https://developers.line.me/en/

Messaging API Document https://developers.line.me/en/docs/messaging-api/

Messaging API Reference https://developers.line.me/en/reference/messaging-api/

LINE Bot Designer https://developers.line.me/en/services/bot-designer/

LINE Hack 2018 https://hackth.line.me/