Categories
Computer

เทคนิคสร้าง Node เพื่อใช้งานกับ Node-RED ให้ทำตามที่เราต้องการ

Node-RED เป็นเครื่องมือที่ช่วยให้เราทำงานแบบ Flow-based programming ซึ่งเป็นอุปกรณ์ที่ช่วยให้นักพัฒนาโปรแกรมสามารถทำงานให้เครื่องมือ IoT (Internet of Things) ทำงานได้ตามที่เราต้องการได้ง่ายโดยทำผ่านเว็บเบราวเซอร์ ตัวอย่างของอุปกรณ์ที่จะมาพัฒนาที่มีชื่อก็ได้แก่ Raspberry Pi ที่วางขายมานานแล้ว จนตอนนี้ออกเป็นรุ่น Raspberry Pi 4 Model B ออกมาครับ เรามาเข้าเรื่องกันดีกว่า

ข้อดีของการใช้งานเครื่องมืออย่าง Node-RED เครื่องมือนี้คืออะไร ข้อดีเท่าที่ใช้มาแล้วคือใช้ง่าย แค่ลากลงมาบนหน้าจอแล้วตั้งค่านิดหน่อยก็ใช้ได้แล้ว แต่ปัญหาที่เราเจอจากการใช้งานคือ ตัวแพคเกจบางอย่างมันเก่าไปแล้ว อัพเดทล่าสุดก็ประมาณ 6 เดือนขึ้นไป จนถึง 2-3 ปีมาแล้ว แถมอีกอย่างตัวไลบรารีที่ใช้ (ตัวอย่างที่ใช้ก็เช่น Apollo Client ที่เชื่อมต่อเซิร์ฟเวอร์ผ่าน GraphQL) ในนั้นก็ล้าสมัยจนเกิดไป จุดนี้แหละคือปัญหาที่ทำให้เราต้องสร้าง Node เพื่อให้เราใช้งานได้ตามที่เราต้องการ

วิธีการทำโดยละเอียดสามารถเข้าไปอ่านได้ในเว็บของผู้ผลิต Node-RED ครับแต่ของเราจะเป็นแบบคร่าว ๆ เพื่อให้เราใช้งานได้โดยง่าย เริ่มต้นโดยสร้างโฟลเดอร์ใหม่ก่อน จากนั้นเริ่มการทำงาน Node.js ได้โดยสั่งคำสั่ง

npm init

จากนั้นก็ตามคำถามตามที่โปรแกรมต้องการ แล้วเราลงมือเขียนโปรแกรมกัน เริ่มต้นได้โดยตั้งค่าใน package.json ก่อน โดยตั้งค่าให้เป็นตามนี้

package.json

ตัวอย่างการตั้งค่าสามารถเข้าไปดูได้ที่เว็บของ Node-RED ซึ่งในตัวอย่างจะทำ Node สำหรับการเปลี่ยนตัวอักษรตัวใหญ่เป็นตัวเล็ก และตัวอย่างด้านล่างก็เป็นตัวอย่างจากลิ้งค์ข้างในนั้นเช่นกัน แต่ก่อนที่จะลงมือเขียนโค้ด ใน Node แต่ละNode ที่เราต้องการสร้างขึ้นจะประกอบไปด้วย 2 ไฟล์ ได้แก่ ไฟล์ JavaScript ที่กำหนดการทำงานของตัว Node และไฟล์ HTML ที่กำหนดหน้าตาของการตั้งค่า Node เวลาสร้างขึ้นใน Flow ของ Node-RED

Flow คืออะไร ไปอ่านต่อได้ในเว็บของ Node-RED เองครับ เราจะไม่อธิบายในนี้เกรงว่ามันจะยาวไป แต่ถ้าสรุปสั้น ๆ ก็ประมาณว่าเป็นพื้นที่ที่เรากำหนดการทำงานของอุปกรณ์ตามที่เราต้องการ แค่ลาก ๆ Node ลงไปก็กำหนดได้ว่าจะให้มันทำงานอย่างไรครับ ต่อมาเรามาแนะนำการเขียนโค้ดลงในไฟล์แต่ละไฟล์ทั้งสองไฟล์กันดีกว่า

JavaScript

เมื่อตั้งค่าใน package.json เสร็จแล้ว หลังจากนั้นเรามาเริ่มต้นเขียนโปรแกรมกันเถอะ ในแต่ละ Node ของ Node-RED จะประกอบไปด้วยไฟล์ JavaScript เพื่อกำหนดการทำงานของ Node และไฟล์ HTML จะระบุหน้าตา และการทำงานของตัวแก้ไข Node เรามาเริ่มต้นตัว JavaScript ก่อนโดย

JavaScript

ข้างบนที่เห็นเป็นตัวอย่างโค้ดที่ใช้กำหนดการทำงานของตัว Node ที่เราสร้างขึ้น แต่อย่างไรก็ดี ผู้อ่านเห็นคำสั่งในนั้นแล้วอาจจะไม่เข้าใจนัก เดี๋ยวจะอธิบายบางส่วนให้นะครับ

คำสั่ง RED.nodes.createNode เป็นคำสั่งที่มีหน้าที่เริ่มต้นการทำงานของ Node ที่เราสร้างขึ้น หรือเรียกประมาณว่า Constructor โดยค่าที่ส่งเข้าไปจะเป็นค่าเกี่ยวกับการตั้งค่าของ Node ที่เราสร้างขึ้นนั้น ๆ

ส่วนต่อมาจะพูดถึง node.on(‘input’, function(msg) {…} ฟังก์ชันนี้เป็นฟังก์ชันที่ทำหน้าที่เวลาที่ได้รับข้อมูลจาก Node อื่น ๆ แล้วจะให้ตัว Node นี้ประมวลผลอย่างไร ในฟังก์ชันข้างในนั้นเราสามารถกำหนด argument ที่เกี่ยวข้องได้แก่ msg, send, done โดย

  • msg จะเป็นข้อมูลที่ได้รับเช่น msg.payload
  • send เป็นคำสั่งส่งค่าให้กับ node ต่อไป
  • done ใช้แจ้งให้กับตัว Node-RED เวลาที่ฟังก์ชันนี้เสร็จแล้ว

ส่วน RED.nodes.registerType ใช้กำหนดตั้งค่า Node ที่เราได้สร้างขึ้นเพิ่มเริ่มต้นการทำงานของ Node ชื่อเลียนแบบใน nodes ที่กล่าวถึงไปแล้วช่วง package.json และอีกช่องเป็นชื่อฟังก์ชันที่เรากำหนดขึ้นมา

ผู้อ่านสามารถอ่านเพิ่มเติมได้ที่หน้าของ Node-RED ได้เลย

HTML

เมื่อเขียนเสร็จแล้ว เรามาจัดการที่ไฟล์ HTML ก่อนที่จะติดตั้งเข้าไปใช้งานใน Node-RED เราสามารถเขียนส่วนแรกที่เป็นส่วน JavaScript ได้โดย

ส่วนแรกของไฟล์ HTML ครับ

คำสั่ง RED.nodes.registerType เป็นการกำหนดว่า node ที่เราสร้างขึ้นมีการตั้งค่าเป็นอย่างไร การตั้งค่าที่ปรากฏบนนั้นก็บอกรายละเอียดได้ตามด้านล่างนี้

  • category เป็นหมวดหมู่ของ node ที่เราสร้างขึ้นว่าอยู่ในหมวดไหน ตามที่เขียนไว้ข้างบนก็อยู่ในหมวด function
  • color ก็เป็นสีแบคกราวน์ที่จะให้ปรากฏในหน้าการใส่เข้าไปใน flow ใน Node-RED
  • defaults เป็นการตั้งค่าเริ่มต้นให้กับตัวแปรที่เราต้องการให้กรอกข้อมูลเข้าไปใน node ที่เราสร้างขึ้น ในที่นี่ค่าเริ่มต้นของตัวแปร name คือค่าว่าง ๆ ไม่มีข้อความอะไร
  • inputs บอกจำนวนข้อมูลที่ส่งเข้ามาใน node ที่เราสร้างขึ้น เรากำหนดข้อมูลที่เข้าได้ระหว่าง 0 ก็คือไม่มีข้อมูลที่เข้ามาใน node  นั้น และ 1 มีข้อมูลเข้ามาใน node เพียงอันเดียว
  • outputs บอกจำนวนข้อมูลที่ออกจาก node ที่สร้างขึ้น จะกำหนดตั้งแต่ 0 ไปจนถึงไม่จำกัด ขึ้นกับคนฮะ
  • icon เป็นไฟล์ภาพที่เราต้องการแสดงใน node ที่เราต้องการ
  • label เป็นข้อมูลที่เราต้องการให้แสดงบน node ใน flow ที่เราได้ใส่ขึ้นไป

สำหรับรายละเอียดเพิ่มเติมอ่านต่อได้ในเว็บของ Node-RED เอง

ต่อมาเป็นส่วน HTML ที่ต่อมาจากแท็ก <script> เขียนได้โดย

พาร์ทที่สอง

ตัวโค้ดข้างบนจะกำหนดที่เราต้องการในหน้าแก้ไขของ node ที่เราสร้างขึ้น ส่วนด้านล่างจะกำหนดข้อความที่เราต้องการแสดงในหน้าที่แสดงข้อมูลของ node นั้น ๆ ว่าทำงานอย่างไร

พาร์ทที่สาม

สำหรับรายละเอียดเพิ่มเติมอ่านต่อได้ในเว็บของ Node-RED เองเช่นเดียวกัน (หน้าเดียวกันกับลิ้งค์ก่อนหน้าครับ)

พอเขียนเสร็จทั้งหมดแล้ว เราติดตั้งตัวแพคเกจได้โดยพิมพ์คำสั่ง

การติดตั้งแพคเกจ

เมื่อติดตั้งเสร็จแล้ว เราสามารถใช้งานได้เลย หรือกรณีที่เราเปิด Node-RED ไว้อยู่ เราสามารถนำเข้าแพคเกจได้โดยไม่ต้องปิด Node-RED เพียงแค่พิมพ์คำสั่ง

การแพคแพคเกจเป็นไฟล์ tgz

ตัวโปรแกรมจะแพคไฟล์ที่เราพัฒนา node ขึ้นมาเป็นไฟล์ tgz แล้วเราเปิดหน้าเว็บไปยังหน้า Node-RED เพียงพิมพ์ที่อยู่

ที่อยู๋หน้าเว็บที่เราเปิดเข้าไปจัดการใน Node-RED

จะขึ้นหน้า Node-RED นำเข้าแพคเกจได้โดยเลือกที่ Manage palette แล้วเลือก Install กดปุ่ม Upload module tgz file บริเวณข้างปุ่ม sort จะขึ้นที่อยู่ไฟล์ เราเลือกไฟล์นั้น โปรแกรมจะอัพโหลดไฟล์เพื่อติดตั้ง หลังจากนั้นก็ใช้งานได้แล้ว (แต่ถ้าใช้ไม่ได้ ก็รีสตาร์ทตัว Node-RED จะพบความเปลี่ยนแปลงครับผม) สำหรับวิธีการติดตั้งอย่างละเอียด ไปตามได้ในลิ้งค์ของ Node-RED เองครับ

เอาล่ะครับ อันนี้เป็นตัวอย่างการสร้าง Node ขึ้นมาใช้เอง โค้ดในบทความเอามาจากเว็บ Node-RED เอง แต่สำหรับผู้อ่านที่ต้องการอ่านข้อมูลเพิ่มเติม เว็บของผู้ผลิตอย่าง Node-RED เองจะพูดถึงการเขียนอย่างละเอียด (ระดับนึง) เพื่อให้ผู้อ่านสร้าง Node ไปใช้งานต่อได้เองครับผม

By Kittisak Chotikkakamthorn

อดีตนักศึกษาฝึกงานทางด้าน AI ที่ภาควิชาวิศวกรรมไฟฟ้า มหาวิทยาลัย National Chung Cheng ที่ไต้หวัน ที่กำลังหางานทางด้าน Data Engineer ที่มีความสนใจทางด้าน Data, Coding และ Blogging / ติดต่อได้ที่: contact [at] nickuntitled.com

One reply on “เทคนิคสร้าง Node เพื่อใช้งานกับ Node-RED ให้ทำตามที่เราต้องการ”

[…] ต่อจากบทความก่อนหน้าที่พูดถึงการสร้าง Node ในโปรแกรม Node-RED ขึ้นมาใช้งา… ตอนนี้ได้เขียนขึ้นมาชิ้นแรกที่เปิดเป็น public บน GitHub แล้วฮะ คือตัวดาวน์โหลดไฟล์ […]