ลองเล่น LINE Beacon แบบไม่ต้องใช้ Device จริง

วันนี้จะมาแนะนำการพัฒนา LINE Chatbot ที่สามารถโต้ตอบกับผู้ใช้ได้ทันที
เมื่อผู้ใช้เดินเข้าใกล้รัศมีของ LINE Beacon นะครับ

ก่อนอื่นมาทำความรู้จักกับ LINE Beacon กันก่อน ว่ามันคืออะไร

LINE Beacon คืออะไร

LINE Beacon (บีคอน) เป็นเทคโนโลยีที่ใช้สำหรับการส่งข้อมูลระยะสั้นผ่าน Bluetooth Low Energy หรือการเชื่อมต่อบลูทูธที่ใช้พลังงานต่ำ โดยเมื่อเราเดินเข้าไปในรัศมีที่มี LINE Beacon ส่งสัญญาณถึง เราจะได้รับข้อมูลที่น่าสนใจ ผ่านทาง Application LINE ไม่ว่าจะเป็นคูปอง รายละเอียดโปรโมชั่น หรือเมนูแนะนำในร้านอาหาร เพื่อเชิญให้เราเข้าไปใช้งาน (ที่มา : https://today.line.me)

เพื่อให้เห็นภาพชัดขึ้น ลองไปดูกรณีศึกษา การใช้งาน LINE Beacon จริงๆ กันได้ตาม link ข้างล่างนี้เลยครับ

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

หลักการทำงานของ LINE Beacon กับ Messaging API

  1. ผู้ใช้ต้องเปิดใช้งาน LINE Beacon บน Application LINE
  2. ผู้พัฒนาผูก LINE Beacon Hardware ID ไว้กับ Bot Channel ที่ต้องการ
  3. เมื่อผู้ใช้ เข้าใกล้รัศมีการส่งสัญญาณของ LINE Beacon จะมี Webhooks Events ส่งไปที่ LINE Bot ซึ่งได้ลงทะเบียนเอาไว้
  4. ผู้พัฒนาตอบสนองต่อผู้ใช้ตามต้องการ เช่นส่งข้อความคูปองส่วนลด หรือแจ้งข้อมูลข่าวสารต่อผู้ใช้ เป็นต้น

วิธีการเปิดใช้งาน Beacon บนมือถือ

  • เปิด Application LINE
  • เข้าไปที่ “ตั้งค่า” (ไอคอนรูปเกียร์) -> “ความเป็นส่วนตัว
  • เลือกที่ “ให้ข้อมูลการใช้งาน” > เปิดการตั้งค่าที่ “LINE Beacon

เริ่มต้นสร้าง Bot Channel

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

เสร็จแล้วค่อยกลับมาลุยกันต่อตรงนี้

วิธีผูก Beacon Hardware ID กับ Bot Channel

ก่อนใช้งาน LINE Beacon จำเป็นจะต้องเอา LINE Beacon มาลงทะเบียนกับ Bot Channel ก่อนว่า Bot ของเราจะทำงานร่วมกับ Beacon ตัวไหนบ้าง ให้เข้าไปที่ https://admin-official.line.me/beacon/register

การผูก Beacon กับ Channel ทำได้ 2 วิธี (บทความนี้ จะใช้กรณีที่ 2)

  1. กรณีมีอุปกรณ์ LINE Beacon ที่มี hwid (Hardware ID) อยู่แล้ว

ให้นำเลข hwid มาลงทะเบียนได้เลย โดยการกดปุ่ม Beacon Device and Bot Link จะพบหน้าจอให้เลือก Bot ที่ต้องการผูกกับ Beacon

จากนั้นจะพบหน้าจอ Account Link ให้นำ Hardware Id และ Passcode ซึ่งติดอยู่ที่อุปกรณ์มาลงทะเบียนได้เลย

2. กรณีใช้อุปกรณ์ที่ยังไม่มีการระบุ hwid มาก่อน

จะต้องทำการออกเลข hwid จากระบบของ LINE แล้วค่อยนำ hwid ที่ได้ ไป set ค่าให้กับอุปกรณ์ โดยการไปที่ Issue LINE Simple Beacon Hardware ID จะพบหน้าจอให้เลือก Bot ที่ต้องการผูกกับ Beacon

จากนั้นจะพบหน้าจอ Issue Hardware ID ให้กดปุ่ม Issue Hardware ID จะได้เลข hwid เป็นเลขฐาน 16 จำนวน 10 digit ออกมา ซึ่งเราสามารถสร้าง hwid ได้สูงสุด ไม่เกิน 10 hwid ให้จดเลข hwid นี้ไว้ เดี๋ยวเราจะทำการสร้าง Beacon จำลองจาก hwid ตัวนี้กัน

วิธีการทำคอมพิวเตอร์ให้เป็น LINE Beacon จำลอง

LINE ได้เตรียม Application ตัวหนึ่ง ชื่อว่า line-simplebeacon-nodejs-sample พัฒนาด้วย nodejs เพื่อควบคุมการทำงานของ Bluetooth ให้เสมือนการทำงานของ LINE Beacon จริงๆ

โดยสามารถรันได้บน 2 platform คือ

  • macOS Sierra on Apple’s Computer with Bluetooth LE
  • Raspbian Jessie on Raspberry PI 3

ในบทความนี้ จะใช้ macOS นะครับ เริ่มกันเลย

  1. ถ้ายังไม่มี Xcode และ nodejs v6.x.x ให้ติดตั้งสองตัวนี้ก่อน
  2. เมื่อพร้อมแล้วก็ clone line-simplebeacon-nodejs-sample มาเลยครับ จากนั้นทำการ npm install ให้เรียบร้อย
git clone git@github.com:line/line-simple-beacon.git beacon
cd beacon/tools/line-simplebeacon-nodejs-sample/
npm install

3. การใช้งาน simple beacon นั้น สามารถ start beacon ได้ง่ายๆ แค่คำสั่งเดียว ดังนี้

sudo ./simplebeacon.js
--hwid=a1b2c3d4e5

โดยที่ a1b2c3d4e5 คือ hwid ที่เราได้จากการ Issue Hardware Id มาก่อนหน้านี้ อย่าลืมเปลี่ยน hwid ให้ตรงกับที่ได้มานะครับ

นอกจากนี้ยังสามารถระบุ Device Message (Optional) ซึ่งเป็นข้อความสั้นๆ ไม่เกิน 13 ตัวอักษร เพื่อใช้ในการ identify Beacon ได้ง่ายขึ้นเช่น อาจใส่เป็นรหัสสาขาของร้าน เป็นต้น โดยต้องแปลงข้อความที่ต้องการเป็น Hex String เสียก่อน เช่น คำว่า “ABC-01” เมื่อแปลงเป็น hex string (ตัวช่วยแปลงข้อความเป็น Hex String) จะได้เป็น “4142432d3031”

หากต้องการระบุ Device Message ให้ใช้คำสั่งนี้แทน

sudo ./simplebeacon.js
--hwid=a1b2c3d4e5
--device-message=4142432d3031

หลังจากรันคำสั่งข้างบนนี้แล้ว ก็เท่ากับว่า Beacon ของเรา พร้อมทำงานแล้ว ขั้นตอนต่อไป เราจะเขียนคำสั่ง เพื่อให้ LINE Bot รับ Webhook จาก Beacon นี้กัน

สร้าง LINE Bot เพื่อรับ Beacon Webhook

ผมมี starter project สำหรับเริ่มต้นทำ LINE Bot ง่ายๆ ไป clone มาดูกันได้เลยครับ

git clone https://github.com/kamnan43/line-bot-nodejs-starter
cd line-bot-nodejs-starter
npm install

ทำการแก้ไข config.json โดยระบุ

  • CHANNEL_ACCESS_TOKEN และ
  • CHANNEL_SECRET

ที่ได้มาจาก developer console

{
"port" : "3000",
"channelAccessToken": "YOUR_CHANNEL_ACCESS_TOKEN",
"channelSecret": "YOUR_CHANNEL_SECRET"
}

ทำการ start bot server ด้วยคำสั่ง

npm start

ตอนนี้ bot ของคุณ ก็พร้อมทำงานแล้วที่ http://localhost:3000

จากนั้นใช้ ngrok เพื่อ expose url ของคุณ ให้เป็น public url
ดูวิธีการใช้ ngrok ได้จาก Blog ข้างล่างนี้เลยครับ

หลังจากได้ https url มาจาก ngrok แล้ว ก็เอาไปกำหนดเป็น webhook url ที่ developer console ตามรูป

เมื่อกำหนด webhook url เรียบร้อยแล้ว ก็ลองกด Verify ดู ถ้าขึ้นว่า Success แบบในรูป ก็แปลว่า บอทของเราพร้อมใช้งานแล้วครับ

ทดสอบการใช้งาน

  • ตรวจสอบให้แน่ใจว่า มือถือของคุณ เปิดใช้งาน Location Service และ LINE Beacon แล้ว
    (วิธีเปิด Beacon อยู่ข้างบนนี้ ตรงหัวข้อ วิธีการเปิดใช้งาน Beacon บนมือถือ)
  • ตรวจสอบว่า simple beacon เปิดใช้งานอยู่
  • หากทุกอย่างพร้อม Bot ของเราจะได้ webhook จาก LINE หน้าตาแบบนี้

โดยที่

  • event.type จะเป็น “beacon” และ
  • event.beacon จะมี hwid (Hardware ID) และ dm (Device Message) ที่เราระบุตอนรัน simple beacon

ส่วน event.beacon.type คือชนิดของ Beacon Event ซึ่งมี 3 ประเภทคือ

  • enter : เกิดขึ้นเมื่อเราเข้าใกล้ระยะทำการของ Beacon
  • leave : เกิดขึ้นเมื่อเราออกจากระยะทำการของ Beacon (ทดสอบได้ โดยการปิด simple beacon)
  • banner : เมื่อผู้ใช้กด banner (Feature นี้ มีใช้เฉพาะ Enterprise เท่านั้น)

(ดูรายละเอียด beacon webhook event ได้ที่ API Reference)

จากนั้น Bot ของเรา ก็จะส่งข้อความไปให้ผู้ใช้ ดังรูป

เป็นอันว่าเรียบร้อย Bot ของเราสามารถโต้ตอบกับ Beacon ได้แล้ว เย้….

แล้วไงต่อ …

การประยุกต์ใช้

บทความนี้ เป็นเพียงการแนะนำวิธีการทำให้ Messaging API ทำงานร่วมกับ Beacon ได้เท่านั้น เมื่อทำการรับ webhook จาก Beacon ได้แล้ว ขั้นตอนต่อไป ก็อยู่ที่การประยุกต์ใช้ของแต่ละคน ว่าต้องการให้ผู้ใช้ มีประสบการณ์อย่างไร เช่น

  • ส่ง Message / Flex เพื่อแจ้งข่าวสาร
  • ส่งรูปคูปองหรือโปรโมชั่น
  • ส่ง Link เพื่อกดเข้าใช้งาน LIFF

ใครที่ทำเสร็จแล้ว ก็เอา Usecase มาแชร์กันบ้างนะครับ ว่าเอา Beacon ไปใช้ทำอะไรกันบ้าง

ส่วนถ้าใครอยากอ่าน Document ของ Beacon อย่างละเอียด ก็ลองดูได้ที่นี่เลยครับ

ตอนต่อไป

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

บทความหน้า ผมจะมาแนะนำการทำอุปกรณ์ Beacon จริงๆ ขึ้นมาใช้งานกันดู แบบที่ว่าพกพาไปไหนก็ได้ กดติดตามกันไว้นะครับ แล้วเจอกันใหม่

ขอบคุณครับ :)