Lesson 16 : ก้าวเข้าสู่ IOT – ตอนที่ 6 Hello World และการส่ง Email จาก Node-RED

ใน Siries ของ Node-RED ผมจะแนะนำการใช้งานทั้งหมด 3 บทความโดยจะเริ่มต้นจาก
1. ทำความเข้าใจและการติดตั้ง Node-RED
2. เริ่มเขียนโปรแกรมบน Node-RED รวมถึงการทำ Email Alert
3. การเชื่อมต่อระหว่าง Node-RED และ MQTT Broker

บทความนี้เป็นตอนที่ 2 นะครับ เราจะเริ่มวาด Flow และเริ่ม Coding ครับ ท้ายที่สุดของบทความเราจะส่ง Email ไปที่ gmail กันครับ

เมื่อทำได้แล้วบทความต่อไปจะต่อยอด ด้วยการรับค่าจาก Sensor และส่งผ่าน MQTT Broker ไปยัง Email ของเรา รับรองว่าได้ประโยชน์แน่นอนครับ

ระดับความยาก :  

สิ่งที่จะได้จากบทเรียนนี้

อุปกรณ์

ลำดับชิ้นส่วนจำนวน
1Notebook หรือ Computer ติดตั้ง
– Android Studio สำหรับในบทความนี้ใช้ Version 2.3
– MQTT Broker
– Node-RED Server
1 เครื่อง

ก่อนจะเริ่มเขียน Node-RED ขั้นแรกและสำคัญที่สุดคือ ตรวจสอบก่อนว่า Server Node-RED Run อยู่หรือไม่ครับ ลองเปิด Web browser เข้าไปที่ URL : http://127.0.0.1:1880 ดูครับ
หากไม่ได้ Run หรือรันไม่ขึ้นลอง Restart เครื่องแล้วพิมพ์คำสั่งดังนี้ครับ ‘node-red’
*หากยังไม่ได้ลองปิด Firewall ดูนะครับ
** หากทำติดต่อกันมาจากตอนที่แล้วสามารถทำต่อได้เลยนะครับ Server ควรจะ Run อยู่แล้วครับ

หลังจากเปิด URL http://127.0.0.1:1880 ขึ้นมาแล้ว ควรจะได้หน้าจอแบบด้านล่างนี้ครับ เรามาเริ่มทำความเข้าใจ Component ของ Node-RED ก่อนคร่าว ๆ ดังนี้ครับ

A.ด้านซ้ายของจอจะเป็น Panel ของ Node ต่าง ๆ ให้เราหยิบใช้งานได้ครับ(Drag-Drop ที่ Flow) ได้เลยครับ สังเกตุที่ highlight สีน้ำเงินครับ ลักษณะของกล่องที่เป็น Input และ Output จะต่างกัน เวลาเราลากมาวางสังเกตุให้ดีนะครับ

B.ตรงกลางของจอภาพจะเป็น Flow ครับ อย่างที่ผมเล่าไปในบทความที่แล้ว Node-RED จะทำงานแบบ Flow-Base ครับ ทุกอย่างที่วางจะโดนลากเส้นเชื่อมโยงเป็น Flow ครับ ซึ่งเราสามารถวาดได้มากกว่า 1 Flow และวาด Sub-Flow ได้ด้วยครับ นอกจากนี้เราสามารถ Zoom Flow ได้นะครับ จากลูกศรด้านล่าง

C.สำหรับ Panel ทางด้านขวา จะเป็นส่วนในการแสดงข้อมูลต่าง ๆ ของระบบครับ เช่น หน้าจอ Debug, หน้าจอ Config สำหรับดู Node ทั้งหมดใน Flow และ Dashboard สำหรับกำค่า Theme ต่าง ๆ เป็นต้น

D.มุมบนขวาสุด จะเป็น Menu หลักของระบบ

E.สำคัญที่สุดคือปุ่มนี้ครับ เป็นปุ่มสำหรับกด Deploy โปรแกรม เมื่อ Deploy แล้วจะไปแสดงที่ URL http://localhost:1880/ui/ ซึ่งการ Deploy จะมี 3 ประเภท คือ Deploy ทุก Flow ทุก Node, Deploy เฉพาะ Flow ที่แก้ไข และ Deploy เฉพาะ Node ที่แก้ไข

เริ่ม Coding กันเลย!!!
1. Click เลือกที่ Tab Input และเลือก inject มาวางที่ Flow1 และเลือกที่ Tab Output เลือก debug มาวางไว้เช่นกัน จะได้ดังภาพนี้ครับ

*Inject เป็น Node สำหรับส่งคำสั่งโดยตรงไปออกไปใน Node ที่เราต้องการ
*Debug เป็น Node สำหรับแสดงข้อมูลใน Tab Debug ซึ่ง Tab นี้จะอยู่ทางด้านขวาของจอภาพ

2. จากนั้นลากเส้นเชื่อมจาก Node Timestamp มาที่ Node msg.payload ดังภาพนี้ครับ จากนั้น Click Deploy ครับ

3. คลิกที่ปุ่มใน Node Timestamp (ลูกศรสีแดงดังภาพด้านล่าง) จะเห็นข้อมูล Timestamp ขึ้นที่ Tab Debug ดังภาพนี้ครับ

4. ทดลองแก้ไขการส่งข้อความไปโดยกำหนดเป็นคำว่า Hello ดูครับ วิธีการคือคลิกซ้ายที่ Node Timestamp และกำหนด Payload เป็นคำว่า Hello (เลือกเป็น String) และกดปุ่ม Deploy และทดลองกดปุ่มดูอีกครั้งครับ จะเห็นข้อความ Hello ขึ้นที่ Tab Debug ครับ

5. สร้าง UI ตัวแรกกันครับขอเริ่มที่ Button ละกันนะครับ เลือก Node ที่ชื่อButton และลากมาวางที่ Flow 1 ของเราครับ

6. จากนั้นกำหนด Property ของ Button โดยกำหนด Group เป็น HOME และกำหนด Payload เป็น {‘hello’:’2′} ดังภาพนี้ครับ จากนั้นกดปุ่ม Done ครับ

*การสร้าง Group เราสามารถ Click ที่ Default ให้ระบบสร้างให้ได้เลยครับ

7. ลากเส้นจาก Node Button ไปที่ Node msg.payload ดังภาพนี้และกดปุ่ม Deploy ได้เลยครับ

8. ไปที่หน้า http://localhost:1880/ui/ จะเห็น ปุ่มของเราปรากฏขึ้นมาทดลองคลิกดู และกลับมาที่หน้า http://127.0.0.1:1880/ จะเห็น Messge ของเราปรากฏขึ้นมาที่ Tab Debug ครับ

9. เพิ่ม UI ตัวที่สองเป็น Text สำหรับแสดง Output เราจะได้ไม่ต้องย้อนมาดูที่ Tab Debug ครับ โดยให้ลาก Node ที่ชื่อ Text ลงมาวางที่ Flow 1 และลากเส้นเชื่อมจาก Node button และ Node Text ดังภาพนี้ครับ

10. กำหนด Property ให้ Node Text ดังภาพนี้จากนั้นกดปุ่ม Done และ Deploy ครับ

11. ลองไปดูที่หน้าจอ http://localhost:1880/ui/ จะพบ Text ปรากฏขึ้นมาใต้ปุ่มครับ

12. ทดลองกดปุ่มดูครับ จะเห็นข้อความ {‘hello’:’2′} แสดงขั้นที่ text ดังภาพนี้ครับ

13. เพิ่มการทำงานให้ซับซ้อนขึ้นโดยเมื่อกดปุ่มแล้วให้ส่ง ข้อความไปที่ Email ครับโดยให้ลาก Node Email ลงมาใน Flow 1 จากนั้นลากเส้นเชื่อมโยงดังภาพนี้ครับ

14. กำหนด Property ของ Node Email ดังภาพนี้ครับ (ใช้ข้อมูล Email ของเราเองนะครับ) และกดปุ่ม Deploy ได้เลยครับ

15. ทดลองกดปุ่มที่หน้า http://localhost:1880/ui/ จะมี Email ส่งไปที่ Mail ที่กำหนดไว้ครับ

16. ขณะนี้ Node-RED เราพร้อมใช้งานในระดับหนึ่งแล้ว ตอนต่อไปจะนำเสนอการเชื่อมโยงกับ MQTT ครับ

หลังจากผ่านบทความนี้แล้ว บทความต่อไปจะเป็นการเชื่อมโยง Sensor ผ่าน MQTT เข้ามาที่ Node-RED และแสดงผลเป็นลักษณะนี้ครับ

Share ผลงาน
เมื่อน้อง ๆ ทำสำเร็จแล้วอย่าลืมแชร์ให้เพื่อนๆ ดูได้ที่ Facebook MrMakerThailand
และหากน้อง ๆ ทำไม่ได้ ให้ติดต่อมาได้ตลอดเวลาที่ Inbox นะครับ