DEVIO Beacon In party 🥳

วันนี้จะพาแกะกล่อง DEVIO, ลองเล่น DEVIO ConNEXT แล้วจบด้วยการทำ Use Case สนุกๆ มาเล่นกันในช่วงหยุดเทศกาลนี้ครับ

หลังจากมีการเปิดตัว DEVIO Beacon ในงาน LINE Thailand Developer Conference 2021 ที่จัดไปตั้งแต่เดือนตุลาคมที่ผ่านมา ผมก็เพิ่งมีเวลาได้หยิบเอาตัว Beacon ที่ไปสอยจาก AIS Store มาลองเล่น

เดี๋ยวมาลองดูไปพร้อมๆกันครับ ว่าหน้าตามันเป็นยังไง

แกะกล่อง

หลังจากแกะกล่องออกมา ก็จะพบอุปกรณ์ต่างๆตามภาพเลยครับ

ไม่ต้องตกใจไป เขามีคู่มือการประกอบมาให้ด้วย

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

ตัว Beacon จะมี HWID พร้อม Passcode ที่เราต้องเอาไปใช้ต่อไป อยู่ด้านหลังครับ

ขั้นตอนต่อไป เดี๋ยวเรามาลองเชื่อมต่อ LINE OA กับ Beacon ตัวนี้กันครับ

เชื่อมต่อ Beacon กับ LINE OA

ก่อนเริ่มใช้งาน Beacon เราต้องผูกอุปกรณ์เข้ากับ OA ที่จะใช้งานก่อน โดยเริ่มจากการลงทะเบียนอุปกรณ์ได้ที่ https://manager.line.biz/beacon/register

เลือก Link beacons with bot account

จากนั้นเลือก OA ที่ต้องการผูกกับ Beacon

Remark: หากยังไม่เคยสร้าง LINE OA มาก่อนให้ทำตามข้อ 1–3 ของ บทความนี้ ครับ

กรอก HWID และ Passcode ที่อยู่ด้านหลังอุปกรณ์ แล้วกดปุ่ม Link

หากข้อมูลถูกต้อง จะปรากฏข้อความ “Link successful!” มุมบนขวาของหน้าจอ

แต่หากไม่สำเร็จอาจเป็นไปได้ว่ารหัสของ HWID และ Passcode ไม่ถูกต้อง หรือ HWID ตัวนี้ได้ผูกกับ LINE OA ตัวอื่นไปแล้ว ให้ไป Unlink ออกก่อนนะครับ

เมื่อผูกอุปกรณ์ เรียบร้อยแล้ว สามารถตรวจสอบได้ที่ OA Manager (https://manager.line.biz/)

ที่เมนู Home => Outreach จะปรากฏเมนู LINE Beacon เพิ่มขึ้นมา

เป็นอันว่าผูก Beacon ตัวนี้ กับ LINE OA เรียบร้อย

หากต้องการนำ Beacon ไปใช้งานกับ OA อื่นๆ ต้องมากด Unlink ที่หน้านี้ก่อน

ทีนี้ลองมาดูกันสิว่า Beacon ของเรา เริ่มทำงานหรือยัง

DEVIO ConNEXT

DEVIO Beacon มีระบบให้เราสามารถทดสอบการทำงานของ Beacon ได้ง่ายๆ โดยยังไม่ต้องเขียนโปรแกรมเลย นั่นก็คือ DEVIO ConNEXT ซึ่งสามารถเข้าใช้งานได้จาก LINE OA Store ตอนนี้เขาเปิดให้ใช้งานฟรี เข้าไปลองใช้งานกันได้เลย
https://lineforbusiness.com/th/line-oa-store/apps/devio-connext

ให้เริ่มเชื่อมต่อ LINE OA (ที่ผูกกับ Beacon) ของเรา โดยการกดปุ่ม Get it now ด้านขวามือ จากนั้นจะเจอหน้าจอแบบนี้ครับ

ให้เลือก DEVIO BEACON for Developer

Note: ถ้าใครอยากรู้ว่า Beacon เอาไปทำอะไรในเชิงธุรกิจได้บ้าง ลองเข้าไปอ่านตรง DEVIO Beacon Solution ดูก็ได้ครับ

จากนั้นกดปุ่ม DEVIO ConNEXT มุมบนขวาของหน้าจอ จะเจอหน้าจอต้อนรับแบบนี้

ให้ Login ด้วย LINE Account (Account เดียวกันกับที่สร้าง LINE OA)
จะเจอหน้าจอ Add Extension (ชื่อเดิม Linked Services) ให้เลือกเชื่อมต่อกับ LINE OA ของเรา

กดเลือก Select account ด้านล่าง แล้วเลือก OA ที่ต้องการ แล้วกด Add extension

จากนั้น กดปุ่ม Add Extension เพื่อยืนยันอีกครั้ง

จะเจอหน้าจอ ข้อตกลงและเงื่อนไข

เมื่ออ่านเงื่อนไขจบแล้ว (อ่านกันจริงๆเหรอ) ก็กดยอมรับไปแต่โดยดี

ระบบจะพาไปหน้า DEVIO ConNEXT แบบนี้

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

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

หากยังไม่ปรากฏ Beacon ของเราตรงนี้ แปลว่า Beacon ของเรายังทำงานไม่ถูกต้อง ให้ลองตรวจสอบ LINE ของตัวเองดังนี้

• Add Friend LINE OA ที่ผูกกับ Beacon
• เปิด Bluetooth

• เปิดใช้งาน Beacon ได้ที่เมนู Privacy (https://line.me/R/nv/settings/privacy)

=> Provide Usage Data

=> Enable LINE Beacon

จากนั้นรอสักครู่ เมื่อระบบจับสัญญาณ Beacon ได้ จะแสดง Beacon ของเราขึ้นมา

เราสามารถคลิกเลือก Beacon เพื่อแก้ไข Location Name ได้ (เพื่อเป็นข้อมูลว่า Beacon ตัวนี้ ติดตั้งไว้ตำแหน่งไหน เราสามารถใช้ Location Name ในการระบุตำแหน่งของ Beacon ตอนสร้างแคมเปญได้)

ทีนี้ลองมาตั้งแคมเปญส่งข้อความกันดูครับ กลับไปที่เมนู Campaign

กด + NEW CAMPAIGN
แล้วลองใส่ข้อความที่ต้องการส่ง ซึ่งสามารถกำหนดได้ทั้งข้อความที่เป็น Text, รูปภาพ, Rich Message, VDO และ Card Message

กำหนดช่วงเวลาของแคมเปญได้

สุดท้ายคือตัวเลือก Location ว่าจะส่งออกจาก Beacon จาก Location ไหนบ้าง

จากนั้นกด CONTINUE เป็นอันเรียบร้อย

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

Note : หากของใคร ไม่ได้รับข้อความ ลอง ปิด/เปิด Bluetooth เพื่อให้ LINE App ส่งสัญญาณไปใหม่นะครับ

เป็นอันว่า Beacon ของเราใช้งานได้แล้วนะครับ

Application Idea

ขั้นตอนถัดไป เราจะมาเริ่มเขียน project กัน ว่าแต่จะทำ project อะไรดี

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

ในงานปาร์ตี้ เราจะติดตั้ง Beacon ไว้สัก 1–2 ตัว แล้วแต่ขนาดพื้นที่ (Beacon มีรัศมีทำการ 25 เมตร)

เมื่อมีผู้ร่วมงานเข้ามาในรัศมีของ Beacon ระบบก็จะแสดง Richmenu ให้สามารถร่วมสนุกกับกิจกรรมต่างๆในงานได้ พร้อมทั้งเก็บข้อมูลผู้ใช้ไปพร้อมๆกัน

โดยผมจะมี Richmenu ให้ผู้ใช้ สามารถกดเข้ามาดูผู้ร่วมกิจกรรมทั้งหมดได้ ประมาณนี้

ปุ่ม Connect เพื่อเปิด LIFF app แสดงคนมาร่วมงาน

ปุ่ม Exit เอาไว้กรณี ต้องการออกจากการร่วมกิจกรรม

เมื่อกดปุ่ม Connect ก็จะแสดงรายการผู้ร่วมงานทั้งหมด ประมาณนี้

โดยได้ไอเดียการแสดงผลมาจากเวบ https://bubbleui.blakesanie.com แต่จะเปลี่ยนเป็นรูป profile ของผู้ร่วมงานแทน และสามารถที่จะคลิกเลือก เพื่อปฏิสัมพันธ์กันได้ เช่น กดดู Profile และทักทายกันได้ เป็นต้น

อ่ะ พอได้ไอเดีย ก็ไปเริ่มลงมือกันเลย

สร้าง Firebase project

เริ่มต้นจากการสร้าง Firebase Project ตามถนัดกันเลย

ใครยังไม่คุ้นเคยกับ Firebase แนะนำทำตามบทความนี้เลยครับ

สร้าง LINE Bot ด้วย Messaging API และ Cloud Functions for Firebase

เริ่มกันด้วย

firebase init

วันนี้เราจะใช้

• Functions : สำหรับคอย Handle Webhook Event
• Hosting : สำหรับ Host เวบที่เป็น LIFF App
• Firestore : เก็บข้อมูล
• Emulators : สำหรับทดสอบในเครื่องก่อน deploy จริง

Project Setup

Firestore Setup

Functions Setup

วันนี้เรามาลองใช้ Typescript กัน

Hosting Setup

เดี๋ยวเราจะสร้าง LIFF app ด้วย React (single-page app)
ซึ่งจะ build ไปที่ LIFF/build
ดังนั้นให้ระบุ public direcoty ที่จะอัพโหลดไปที่ Hosting เป็น LIFF/build

Emulators Setup

ใช้แค่ Functions กับ Firestore เพื่อทดสอบ ก็เพียงพอครับ

หลังจาก Setup Project เรียบร้อยแล้ว จะได้โครงสร้าง Project ประมาณนี้ครับ

เราเริ่มที่ functions เพื่อรับ webhook กันก่อน

Functions Appplication

cd functions
npm install
npm install @line/bot-sdk express cors --save

เริ่มที่ src/index.ts

สร้าง firebase functions ไว้ที่ region asia-northeast1 (Tokyo) แล้วส่ง request ให้ app.ts (Express Application) ทำงานต่อ

สร้างไฟล์ src/app.ts

สร้าง Express Application เพื่อรับ request โดยจะทำการ handle path ‘/webhook’ แล้วส่งไปให้ line.ts จัดการต่อ

สร้างไฟล์ src/line.ts

เพื่อรับจัดการ webhook event โดยจะรองรับ event 2 ประเภทคือ beacon event เพื่อเก็บข้อมูลผู้ใช้ (ผู้ร่วมกิจกรรม) และ message (text) event สำหรับการยกเลิกการร่วมกิจกรรม

สร้างไฟล์ src/firestore.ts

เพื่อเชื่อมต่อและจัดการข้อมูลผู้ร่วมกิจกรรมบน Firestore Database

จากนั้น ทำการ set ค่า environment ดังนี้

firebase functions:config:set line.channel_access_token="xxxxx"
firebase functions:config:set line.channel_secret="xxxxx"

ตามด้วยการ deploy

firebase deploy --only functions

เรียบร้อยแล้ว จากนั้นก็เอา function URL ที่ได้ ไป set ที่ webhook โดยอย่าลืมต่อท้าย url ด้วย /webhook แบบนี้

Remark: หากเคยผูก LINE OA กับ DEVIO ConNEXT (รวมถึง Extension อื่นๆ ของ LINE) webhook ที่ส่งมา จะไม่มี replyToken มาด้วยให้ทำการ remove ออกจาก LINE OA Manager ก่อนด้วยครับ ระบบของเรา จึงจะทำงานได้ถูกต้อง

จากนั้น เมื่อลองเปิด Bluetooth เพื่อให้ Beacon ทำงาน ก็จะได้รับข้อความจาก OA แบบนี้ครับ

เมื่อตรวจสอบจาก Firestore ก็จะพบว่า มีข้อมูลผู้ใช้เข้ามาแล้ว

มาได้ครึ่งทางแล้ววววววว ต่อไป เราไปจัดการทาง LIFF app กันบ้างครับ

LIFF App สำหรับแสดงผลผู้ร่วมกิจกรรม

เริ่มต้นสร้าง React App ง่ายๆกันครับ

cd ../LIFF

สร้าง package.json

ติดตั้ง dependencies ต่างๆ ก่อนเริ่มงาน

npm install

สร้าง src/index.js

เพื่อเป็น entry point ของเวบ โดยพัฒนาเป็น React Application

สร้าง src/App.js

เป็นส่วนที่ใช้ดึงข้อมูลจาก firestore และแสดงผล

สร้าง src/Bubble.js

เป็นการแสดงผล Bubble ของผู้ใช้แต่ละคน

สร้าง src/styles.css

สร้าง public/index.html

เนื่องจาก เวบเราพัฒนาเป็น React Application เราจึงต้องทำการ build เพื่อแปลงเป็น static file ก่อน ดังนี้

npm run build

เมื่อ build แล้ว เราจะได้ โครงสร้าง Project แบบนี้

จากนั้น ก็ทำการ deploy ได้เลย

firebase deploy --only hosting

เมื่อ deploy เสร็จเรียบร้อยแล้ว

ให้เอา URL ที่ได้ ไปสร้าง LIFF app มาอันนึงครับ สำหรับให้ผู้ใช้กดได้จาก Richmenu เลย

จากนั้น เดี๋ยวเราเอา LIFF Url ที่ได้ ไปสร้าง Richmenu กัน

Richmenu สำหรับร่วมกิจกรรม

ผมสร้าง Richmenu ง่ายๆ สำหรับคนที่เข้ามาอยู่ในรัศมีของ Beacon ถึงจะเห็นเมนูนี้

ให้ทุกคนสร้าง Richmenu โดยใช้ json นี้ได้เลยครับ

อย่างลืมแก้ไข LIFF Url เป็นของตัวเอง ที่ได้มาจากการสร้าง LIFF App เมื่อสักครู่นี้

ดูวิธีการสร้าง Richmenu ได้ที่

เก่ง Rich Menu ใน LINE ให้ครบสูตร

จะได้ Richmenu หน้าตาแบบนี้มาครับ

ซึ่งเมนูนี้ จะแสดงต่อผู้ใช้ที่เข้ามาอยู่ในรัศมีของ Beacon เท่านั้น ดังนั้น เราจึงต้อง Link Richmenu นี้ให้กับผู้ใช้เมื่อได้รับ event Beacon ((Enter) ตามโค้ดนี้ครับ

await this.client.linkRichMenuToUser(profile.userId, functions.config().line.richmenu_id)

ดังนั้น เราต้องกำหนดค่า richmenu_id ใน environment ของ firebase ด้วยคำสั่งนี้ครับ

firebase functions:config:set line.richmenu_id="richmenu-xxxxx"

แล้วทำการ deploy functions อีกครั้งหนึ่ง

firebase deploy --only functions

เป็นอันเรียบร้อย โดยที่เมื่อผู้ใช้กด Connect ก็จะเห็นหน้าเวบที่เราทำ ประมาณนี้ครับ

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

เรียบร้อยแล้ว หลังจากนี้ ก็อยู่ที่ว่าอยากให้มีกิจกรรมอะไรต่อ ก็สามารถ implement กันเพิ่มตามต้องการได้เลยครับ

อ่ะ ทีนี้มาดูภาคทฤษฎีกันหน่อย ว่าตอนที่ระบบของเราได้รับ webhook event มา มันหน้าตาเป็นอย่างไรบ้าง

Beacon Event Webhook Object

หากดูตาม API Reference จะเห็นว่า beacon จะส่งข้อมูลมา 3 อย่าง ได้แก่

hwid คือ Hardware ID หรือ รหัสประจำตัว Beacon แต่ละตัว ซึ่งทำให้เราสามารถรู้ได้ว่า ข้อมูลส่งมาจาก Beacon ตัวไหน หากเรามีการติดตั้ง Beacon ไว้หลายตำแหน่ง

dm คือ Device Message ที่สามารถระบุติดกับตัว beacon แต่ละตัวได้ แต่ Devio Beacon ยังไม่รองรับ Device Message จึงยังไม่มี dm ส่งมาด้วย

type คือ ชนิดของ Event ซึ่ง มี 3 type ได้แก่

• enter : เมื่อผู้ใช้เข้ามาในรัศมีของ beacon
• banner : เมื่อผู้ใช้คลิกที่ banner ซึ่งปรากฏขึ้น เมื่อผู้ใช้เข้าใกล้รัศมีของ beacon

• stay : สัญญาณที่ระบุว่าผู้ใช้ยังอยู่ในรัศมีของ beacon (ส่งมาเป็นระยะ ทุกๆ 10 วินาที)

Remark: สัญญาณ banner และ stay จะเปิดให้ใช้งานเฉพาะ Certified Provider เท่านั้น ใครที่สนใจอยากใช้ banner และ stay สามารถติดต่อทาง LINE โดยส่งรายละเอียดของบริษัท และ Use case ที่จะนำไปใช้งานมาที่ dl_api_th@linecorp.com

เมื่อเปิด Bluetooth ระบบจะได้รับ webhook หน้าตาแบบนี้

{
    type: 'beacon',
    beacon: { hwid: '00000692e7', type: 'enter' },
    timestamp: 1640213469448,
    source: { type: 'user', userId: 'U7c023bc2322beb705874xxx' },
    replyToken: '712d58b963634a25b06876be478xxxxx',
    mode: 'active'
  }

เมื่อได้รับ event มา ระบบเราก็สั่งให้ทำงานตามขั้นตอน ดังนี้ครับ

handler จะทำหน้านี้รับ event มา แล้วแยกไป process ตาม type ของ event

สำหรับ Beacon Event ก็จะมีขั้นตอนการทำงาน ดังนี้

น่าจะพอเข้าใจการทำงานของ Beacon กันแล้วนะครับ

ทีนี้ลองมาคิดกันต่อสิครับ ว่าแล้วเราเอา Beacon ไปทำอะไรต่อได้บ้าง

หากใครสนใจ ดู Use Case อื่นๆ สามารถดูเพิ่มเติมได้ที่ https://www.aisdevio.com/Business

บทส่งท้าย

สำหรับ DEVIO Beacon ตอนนี้เขามีราคาโปรโมชั่น อยู่ถึงสิ้นปีนี้นะครับ เหลืออีกแค่ไม่กี่วัน ใครสนใจ รีบไปสอยกันได้เลยครับ

https://store.ais.co.th/th/iot-devices/devio-beacon.html

DEVIO BEACON

สำหรับบทความนี้ หวังว่าจะเป็นประโยชน์ไม่มากก็น้อยนะครับ ใครมี Use Case อื่นๆ ก็เอามาแชร์กันได้นะครับ

แล้วพบกันใหม่ Happy Holiday ครับ 🥳