ประกอบร่าง Blynk กับ Node-RED !!

เมื่อนำสุดยอดแอพ IoT มาเจอกับสุดยอด Back-end Serviceมาเจอกันอะไรจะเกิดขึ้น !

บทความนี้เกิดจากไอเดียของพี่เจียง(EDCO Chiang Mai) เสนอมาว่า ลองเอา Node-RED มาผสมกับ Blynk ดู จึงเกิดมาเป็นบทความนี้ นี่เอง !!

Blynk คืออะไร ??

Application สำหรับงานด้าน IoT โดยเจ้าแอพนี้เป็นการนำมือถือไปเชื่อมต่อกับ device เช่น esp8266 , arduino etc. โดยเพียงแค่ลากปุ่นที่ต้องการมาวางไว้ที่หน้าจอของแอพ ตั้ง pin กำหนดค่า output ก็เสร็จเรียบร้อย (Base on java) ตัวแอพอยู่บน IOS และ Android

Node-RED คืออะไร ??

Node-RED is a programming tool for wiring together hardware devices, APIs and online services in new and interesting ways.

เป็น tool ที่ช่วยในการติดต่อกันระหว่าง server และ device หรือ client ผ่าน API หรือ service ต่างๆ (Base on js)

บทความอื่นของ Node-RED ทางนี้เลยจ้า

ทำไมต้องเอา 2 อย่างมารวมกัน ??

หากใครกำลังสนใจ หรือทำงานเกี่ยวกับด้าน IoT แน่นอนว่าต้องเคยได้ยินเจ้าแอพ Blynk แน่นอนเพราะมันสดวกเอามากๆ แค่ลาก วาง กดรัน ก็พร้อมใช้งานแล้ว ไม่ต้อง Code สักตัว Node-RED ก็เช่นกัน แค่ลากบล็อกมาวาง ลากเส้น input/output ก็เสร็จเรียบร้อยเหมือนกัน แต่ทั้งคู่ก็มีข้อเสียต่างกัน

Blynk ข้อเสีย

1. ถ้าจะโยนค่าไป service อื่นยุ่งยากมาก
2. ถ้าอยากจะใช้ฟรีจะต้องมีเซิฟของตัวเอง
3. web dash board ยังมึนๆ ใช้งานยุ่งยาก(มีแบบbeta)

ข้อเสียข้อ 3 แก้ได้ด้วย node-red

Node-RED ข้อเสีย

1. ไม่มีแอพบนมือถือ ถ้าจะใช้บนมือถือต้องเข้าผ่านเว็บ
2. ต้องมีเซิฟเวอร์เป็นของตัวเอง (หรือคอมตัวเองเปิดรันไว้ตลอด)

ข้อเสียข้อ 1 ก็สามารถแก้ได้ด้วย blynk เช่นกัน ส่วนข้อเสียเรื่องเซิฟเวอร์ สามารถเปิดเซิฟเป็นของตัวเอง และสามารถรันทั้ง blynk และ node-red ไปพร้อมๆกันได้ด้วย

สิ่งที่ควรรู้ก่อนอ่านบทความนี้

หากได้อ่านบทความทั้ง 2 มาก่อนจะทำให้สามารถเข้าใจบล็อกนี้ได้รวดเร็ว

• วิธีการใช้งาน node-red เบื้องต้น
• วิธีการใช้งาน blynk เบื้องต้น

ติดตั้ง Node-Red (วิธีติดตั้ง+ใช้งาน)

สรุปโดยย่อดังนี้

1. ติดตั้ง NodeJS https://nodejs.org/en/download/

2. เปิดหน้า CMD แล้วพิมพ์ชุดคำสั่ง

สำหรับ MAC/Linuxsudo npm install -g --unsafe-perm node-red

สำหรับ Windows npm install -g --unsafe-perm node-red

3. รันคำสั่ง node-red ในหน้า CMD ได้เลยครับ

4. เข้าเว็บของเราพิมพ์ url : http://127.0.0.1:1880 คุณก็จะได้ Node-RED พร้อมใช้งานแล้ว !

ติดตั้ง Blynk

1. เข้า App store หรือ play store ทำการดาวโหลดแอพ Blynk แล้วเปิดแอพขึ้นมาครับ

2. ทำการ Create New Account แล้วทีนี้มันจะให้เลือก 2 อย่างครับ

ให้จิ้มที่ จุด 3 จุด มันจะขึ้นเหมือนรูปข้างล่างครับ ถ้าเรามีเซิฟเป็นของเราเอง หรือ จะใช้ของ Blynk (เสียเงิน)

3. จากนั้นทำการสร้างโปรเจ็ค แล้ว Token auth ก็จะเข้าไปที่อีเมลล์ของเรา แบบนี้

4. ลองลากปุ่มออกมา (ให้ระวังเรื่อง energy ด้วยสำหรับคนใช้ server ของ blynk ) แค่นี้ก็พร้อมที่ใช้งานแอพ blynk ร่วมกับ node-red แล้ว !

แล้วก็เอามาประกอบร่างกัน

ให้ติดตั้งตัวเสริมของ node-red เพื่อใช้ร่วมกับ blynk นั้นคือ node-red-contrib-blynk-api โดยการพิมพ์ลงในช่อง cmd ว่า

npm install node-red-contrib-blynk-api

โดยเจ้าตัวนี้จะสามารถใช้ Pin ที่เป็น Virtual หรือ Digital ได้เลย และมีตัวเสริมอีกตัวที่ลูกเล่นเยอะกว่า แต่สามารถใช้ได้แค่ Virtual Pin นั้นคือ node-red-contrib-blynk-ws แต่อันนี้มันจำแค่ Pin Virtual

โดยให้เราทำการติดตั้งตัวใดตัวหนึ่งก่อนนะครับ จากนั้นเปิด node-red ดูอีกรอบจะเห็นได้เวลามีตัวเสริมได้ถูกติดตั้งแล้วจากนั้นลองลาก node ที่ชื่อว่า write event แล้วมาต่อกับ debug ดูครับ (แนะนำให้อ่านวิธีการใช้ node-red มาก่อน)

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

ทีนี้ให้เราใส่ Url WS (เซิฟเวอร์ blynk ของเรา) ถ้าใครใช้ของ blynk อยู่แล้วให้ใส่

ws://blynk-cloud.com/websockets

แล้วก็ใส่ auth token ที่ได้จากอีเมลล์ของเรา

จากนั้นกด Done แล้วก็ให้ดูหน้าจอมุมบนขวาจะเจอหน้าต่างที่เขียนว่า debug ให้กดไปที่หน้าต่าง debug ก่อนจากนั้นกด Deploy โล้ด

จากนั้นมาที่แอพ blynk ให้กดเข้าไปในปุ่มเพื่อตั้งค่า ให้ตั้งเป็น virtual pin อะไรก็ได้

แล้วลองกดที่ปุ่ม button ในแอพ Blynk ที่เราลากมาดูครับ โดยปุ่ม button ซ้ายมือผม ถ้ากดปิด จะได้ค่า 0 / เปิด 1 ส่วน button ขวามือ ให้กดปิดเป็น 10 / เปิดเป็น 11

ข้อความก็จะขึ้นบน node-red ที่หน้าต่าง debug เมื่อไหร่ก็ตามที่ผมกดปุ่มนั้นเอง

แก้ไขข้อเสียของทั้ง Blynk และ Node-RED ด้วย Web Dashboard !

สำหรับคนที่ไม่เคยใช้/ยังไม่ได้ติดตั้ง Node-RED Web Dashboard ให้อ่านนี้ก่อนนะครับ

Node-RED DashBoard ทำเว็บด้วย Node-RED โดยไม่เขียนโค้ดสักตัว ฉบับปี 2018 !

ถ้าสั้นๆก็แค่ให้ติดตั้ง dashboard เพิ่มด้วยการพิมพ์คำสั่ง

npm install node-red-dashboard

ทีนี้เราก็สร้างหน้า Dashboard ให้เหมือนกันปุ่มที่เรามี อย่างผมมี 2 button(switch) 1 slide 1 text box ก็ลองลาก node ให้เหมือนๆกับในแอพเราได้เลย

Default ของมันคือ ลากอันไหนมาก่อนก็จะอยู่ข้างบน

แต่เราก็ต้องเข้าไปตั้งค่า node ของ web dashboard โดยเฉพาะค่าที่รับเข้ามา อย่างเช่น button ตัวซ้ายผม กดปิดเป็น 0 / เปิดเป็น 1

ถ้าไม่ตรง ปุ่มก็จะไม่ทำงาน

พอลากมาวางแล้วให้เข้าไปที่ http://127.0.0.1:1880/ui/#/0 หรือคลิกที่ dashboard ข้างๆ debug ได้เลย

คลิกที่ highlight ไว้ได้เลย

หน้า dashboard ก็จะขึ้นมาแล้ว

จากนั้นนำ node ของ blynk มาลากต่อกับ node ของ dashboard ได้เลย

แล้วก็เข้าไปตั้งค่า node ในส่วนของขาของ blynk ให้ตรงกับในแอพ อย่าง button ตัวขวาของผมมัน pin Virtual 3 ก็แค่ตั้งให้มันตรงๆกัน กด Done ก็พร้อมใช้งานแล้ว

ทีนี้ลองกดเปิดปุ่ม button ทั้ง 2 อันในแอพ Blynk

switch ของ node-red ก็จะเปลี่ยนตาม

ทีนี้ลองปรับ slider ดู (อย่าลืมตั้งค่า node web dashboard ให้ตรงกับใน blynk ด้วยนะครับ)

จะได้แบบนี้ สเกลอาจจะไม่เหมือน แต่ก็ใช้งานได้

ทีนี้ลองส่งค่าจาก Node-RED ไปหา Blynk ดู โดยการลาก node output ที่เป็น write ออกมา แล้วตั้งค่าขา pin ให้เหมือน input แล้วลองกดที่หน้า web dashboard ดู

กดเปิดปุ่มซ้าย

ปุ่มก็ถูกเปิดเหมือนใน dashboard เป๊ะๆ

สรุป

เมื่อเรานำแอพ Blynk มาต่อเข้ากับ node-red ทีนี้เราก็สามารถนำสถานะของปุ่ม/ค่าที่รับจากแอพ มาต่อยอดได้อีก เช่น เก็บค่าลง database แล้วนำมาประมวล (Analysis) มาแสดงบนเว็บได้อีกด้วย

บทความอื่นๆเกี่ยวกับ Node-RED : อ่านเพิ่มเติมได้ที่นี้

กลุ่ม Blynk Community Thailand : คลิกที่นี้

อ่านบทความอื่นๆได้ที่ mmp-li : https://medium.com/mmp-li

Life Style & IoT & Web App และ Data Sci(ML,NN) บทความเกี่ยวกับโปรแกรมเมอร์ ,Life Style , Data Science ,IoT(Node-RED) and Web App(C#)