ทำ LineBeacon + LineBot โดยใช้ node-red

ทำ LineBeacon + LineBot โดยใช้ node-red

สิ่งที่ต้องเตรียมใน EP นี้
1LineBeacon ที่ทำด้วย Esp32
2 node-red server และออก HTTPS แล้ว ถ้ายังไม่ทำกลับไปดูบทความเก่าๆ
[email protected] ที่ทำเป็น bot แล้ว (จะขอข้ามไปเพราะมีเต็ม google แล้วนะครับ)

ตอนแรกก็เข้าไปที่ node-red ที่เราได้สร้างไว้ใน ep ก่อนๆแล้วนะครับ

ลากบล็อก http ที่อยู่ในหมวดหมู่ input ออกมา 1 บล็อกก่อน
แล้วตั้งตามรูป

ก่อนที่จะทำ linebeacon ต่อ
ก็มาทำความเข้าใจกับ Line messaging api ในเว็ปข้างล่างก่อนนะครับ
https://developers.line.biz/en/reference/messaging-api
ถ้าอ่านมาแล้วจะเห็นในส่วนของLineBeconจะส่งอะไรมาบ้างดันนี้

{
“replyToken”: “nHuyWiB7yP5Zw52FIkcQobQuGDXCTA”,
“type”: “beacon”,
“timestamp”: 1462629479859,
“source”: {
“type”: “user”,
“userId”: “U4af4980629…”
},
“beacon”: {
“hwid”: “d41d8cd98f”,
“type”: “enter”
}
}

สิ่งที่เราต้องการคือส่วนของ beacon type นี่เอง

คราวนี้จะ ทำ เมื่อเราเดินเข้าไกล้ LineBeacon จะทำการส่ง Line กลับมาว่า Enter
ถ้าส่งข้อความมาจะสวัสดีตอบกลับไปอีกที
OK ทำต่อดีดว่า555

ลากบล็อก http response ในหมวดหมู่ output ออก มาแล้วตั้งค่าตามรูป แล้วสากสายจากปลาย บล็อกแรกทีสร้างไว้ไปบล็อกที่ 2

แล้วก็ลากบล็อก switch ที่อยู่ในหมวดหมู่ function ออกมา 1 บล็อกแล้วตั้งตามรูปข้างบน
แล้วก็ลากสายจากบล็อกแรกมาต่อที่ switch ได้เลยครับ
บล็อกนี้มีหน้าที่แยกว่า webhooks นี้มาจาก user หรือ group ไม่ก็ room

แล้วก็ลากบล็อก switch อันใหม่แล้วทำตามรูปข้างบน
แล้วลากสายจาก switch บล็อกที่แล้วมาเสียบที่บล็อกนี้
บล็อกนี้มีหน้าที่แยกว่า webhooks ที่มาจาก user เนียเป็น ข้อความ หรือ beacon

แล้วก็ลากบล็อก change อันใหม่แล้วทำตามรูปข้างบน
แล้วลากสายจาก switch บล็อกที่แล้วมาเสียบที่บล็อกนี้
แล้วทำเหมื่อนกันทั้ง 2 อัน
บล็อกนี้มีหน้าที่เปลียนตัวแปรเฉยๆครับ

คราวนี้ลาก function ออกมา 2 บล็อกแล้วต่อตามรูปให้เรียบร้อย
และลาก http request มา 1 บล็อก ตั้งค่าและสากสายตามรูป

คราวนี้มาตั้งค่าในfunction ทั้ง 2 อัน
อันด้านบนจะทำงานเมื่อมีคนส่งข้อความมา
อันด้านล่างจะเกียวกับ beacon ส่ง event มา

อันแรกใส่ token ยังไม่ได้ใส่ก่อนนะครับรอก่อน
ข้างล่างคือ code ที่ใส่ใน function ทั้ง 2 ตัว

var messages = “สวัสดีครับ”;
msg.headers = {‘content-type’:’application/json’,’Authorization’:’Bearer tokenของเรา’};
msg.payload = {“to”:msg.ID,”messages”:[{“type”:”text”,”text”:messages}]};
return msg;

var messages = “ente”;
msg.headers = {‘content-type’:’application/json’,’Authorization’:’Bearer tokenของเรา’};
msg.payload = {“to”:msg.ID,”messages”:[{“type”:”text”,”text”:messages}]};
return msg;

ฝั่ง node-red พักไว้แค่นี้ก่อนมาทำฝั่ง line ต่ออีกนิดหนึ่ง
ตอนนี้ url ที่ผมได้คือ 1714aa0e.ngrok.ioซึ่งแต่ละคนจะไม่เหมื่อนกัน
จับ urlมา+ /webhooks เช่นของผมคือ 1714aa0e.ngrok.io /webhooks

ไปที่ https://developers.line.biz
เอาurl นี้ไปใส่ที่ Webhook URL
และก็ copy Channel access token มาด้วย
คราวนี้ก็กลับมาฝั่ง node-red
เอา token ไปแทนที่ tokenของเรา ทั้ง 2 อันใน function

พอเสร็จอันนี้แล้ว ก็กด deploy แล้วก็เป็นอันเสร็จสิ้น

ใช้งาน LineBeacon ครั้งแรก ต้องไปตั้งที่ที่ appline ในมือถือเราก่อนตามรูปข้างล่างนี้

ถ้าลองเพิ่มเพื่อน [email protected] แล้วลองทักส่งข้อความอะไรก็ได้ไปดู จะมีการส่งข้อความกลับมาว่า สวัสดีครับ
ถ้าอยู๋ในเขต Beacon จะมีการส่งข้อความว่า Enter มาครับ ตามรูป

หากเกิดข้อสงสัยอะไร สามารถติดต่อมาที่ FB:ปูซาน ไฟฟ้า
บนความนี้ปั้นในเวลา 1 ชัวโมงจะดูมึนๆ รีปๆหน่อยนะครับ เดียวจะทำแบบละเอียดมาอีกทีครับ


ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องที่ต้องการถูกทำเครื่องหมาย *