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 แนะนำทำตามบทความนี้เลยครับ
เริ่มกันด้วย
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 ได้ที่
จะได้ 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 ตอนนี้เขามีราคาโปรโมชั่น อยู่ถึงสิ้นปีนี้นะครับ เหลืออีกแค่ไม่กี่วัน ใครสนใจ รีบไปสอยกันได้เลยครับ
สำหรับบทความนี้ หวังว่าจะเป็นประโยชน์ไม่มากก็น้อยนะครับ ใครมี Use Case อื่นๆ ก็เอามาแชร์กันได้นะครับ
แล้วพบกันใหม่ Happy Holiday ครับ 🥳