• โฮมเพจ
  • บทความ
  • ทั่วไป
  • การเขียนโปรแกรมด้วยสายตาด้วย Node-RED: การเดินสายอินเทอร์เน็ตของสิ่งต่าง ๆ อย่างง่ายดาย

การเขียนโปรแกรมด้วยสายตาด้วย Node-RED: การเดินสายอินเทอร์เน็ตของสิ่งต่าง ๆ อย่างง่ายดาย

เผยแพร่แล้ว: 2022-03-11

ผ่านการเขียนโปรแกรม เราทำให้เครื่องเลียนแบบพฤติกรรมที่ซับซ้อนโดยทำตามขั้นตอนของคำสั่งง่ายๆ การใช้ภาษาเขียนโปรแกรมแบบข้อความ เช่น Assembly, C, Python และ JavaScript เป็นหนึ่งในวิธีหลักในการทำเช่นนี้ นักออกแบบของภาษาโปรแกรมเหล่านี้ได้ใช้เวลานับไม่ถ้วนในการพยายามทำให้ประสบการณ์ในการเขียนโปรแกรมเป็นไปอย่างง่ายดายผ่านรูปแบบการแสดงออก โครงสร้างการเขียนโปรแกรมที่แข็งแกร่ง และชุดเครื่องมือที่มีประสิทธิภาพ อย่างไรก็ตาม ภาษาโปรแกรมทั้งหมดเหล่านี้มีลักษณะร่วมกัน: ซอร์สโค้ดแบบข้อความ

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

เชื่อมต่ออุปกรณ์ฮาร์ดแวร์ด้วย API โดยใช้ Node-RED

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

ใน Node-RED ทุกโหนดเป็นหนึ่งในสองประเภทต่อไปนี้: inject node หรือ a function node Inject nodes สร้างข้อความโดยไม่ต้องมีการป้อนข้อมูลใดๆ และผลักข้อความไปยังโหนดถัดไปที่เชื่อมต่ออยู่ ในทางกลับกัน โหนดฟังก์ชัน รับอินพุตและดำเนินการบางอย่างกับมัน ด้วยโหนดที่มีให้เลือกมากมาย Node-RED ทำให้การเดินสายอุปกรณ์ฮาร์ดแวร์ API และบริการออนไลน์เป็นเรื่องง่ายกว่าที่เคย

เริ่มต้นใช้งาน Node-RED

Node-RED สร้างขึ้นบน Node.js ในการติดตั้ง Node-RED คุณจะต้องติดตั้งทั้ง Node.js และ NPM ด้วย NPM การติดตั้ง Node-RED ทำได้ง่ายมาก:

 npm install -g node-red

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

 node-red

&hellip และไปที่ http://localhost:1880

สวัสดีชาวโลก!

บทช่วยสอนการเขียนโปรแกรมสำหรับผู้เริ่มต้นฉบับใดที่เสร็จสมบูรณ์โดยไม่ต้องเรียนรู้ที่จะพูดว่า "สวัสดีชาวโลก" ให้เราเริ่มต้นด้วยการทดลองว่า:

  1. ลากและวาง โหนดการฉีด บนตัวแก้ไขโฟลว์ จากนั้นดับเบิลคลิกและตั้งค่าเพย์โหลดเป็นสตริงและเขียนว่า “สวัสดีชาวโลก”
  2. ลากและวาง debug node แบบเดียวกับที่คุณทำกับโหนด inject
  3. วางสายเข้าด้วยกัน
  4. คลิกที่ปุ่ม "ปรับใช้" ที่มุมขวา
  5. คลิกที่ปุ่มสีน้ำเงินทางด้านซ้ายของ inject node

ลองมัน. คุณจะเห็นสิ่งนี้:

แค่จาวาสคริปต์

ด้วย Node-RED คุณไม่ จำกัด เฉพาะโหนดและฟังก์ชันง่ายๆ เนื่องจาก Node-RED สร้างขึ้นบน Node.js จึงขับเคลื่อนโดย JavaScript ทั้งหมด โหนดคือโมดูล Node.js สามารถพบได้ใน http://flows.nodered.org/ ดังนั้นหากต้องการเพิ่มลงในแผงด้านซ้าย คุณสามารถ "ติดตั้ง npm" ได้ ที่จริงแล้ว คุณสามารถพัฒนาโฟลว์ของคุณเองและอัปโหลดไปยังที่เก็บโฟลว์ได้ แอปพลิเคชันอาจซับซ้อนเท่าที่คุณต้องการ เนื่องจากคุณสามารถพิมพ์ JavaScript ในโหนดฟังก์ชันภายในตัวแก้ไขโค้ดที่ Node-RED จัดเตรียมให้

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

Now Let's Go Pro: เวลาสำหรับระบบอัตโนมัติในบ้าน

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

พบกับ Netbeast เป็นแพลตฟอร์มโอเพ่นซอร์สสำหรับการพัฒนาแอปพลิเคชันสำหรับอุปกรณ์และอุปกรณ์ Internet of Things โดยไม่ต้องกังวลเกี่ยวกับรายละเอียด เช่น โปรโตคอลไร้สาย ความเข้ากันได้ของแบรนด์ หรือไม่จำเป็นต้องรู้วิธีจัดการกับ API เฉพาะแต่ละรายการ ช่วยให้เราใช้อุปกรณ์เสมือนที่ทำหน้าที่เป็นอุปกรณ์จริง! ดังนั้นแม้ว่าคุณจะไม่มีหลอดไฟอัจฉริยะ คุณก็ยังมีหลอดเสมือนที่พร้อมใช้งาน

เราสามารถติดตั้งแพ็คเกจ Netbeast สำหรับ Node-RED npm ได้ทั่วโลกดังนี้:

 npm install -g node-red-contrib-netbeast

โหนด netbeast-red จะแสดง Netbeast Dashboard ซึ่งจะแปล API ดั้งเดิมไปยังอุปกรณ์อัจฉริยะทั้งหมดของคุณที่คุณมีที่บ้าน โชคดีที่ยังมีให้ใช้งานเป็นโมดูลด้วย!

เริ่ม Netbeast:

 npm install -g netbeast-cli netbeast start

ซึ่งจะทำให้แดชบอร์ดพร้อมใช้งานบนพอร์ต 8000 และ SSL บน 8443 จากนั้นเปิดเบราว์เซอร์ของคุณไปที่ http://localhost:8000 และไปที่ Explore เราจะสามารถค้นหาแอพและปลั๊กอินมากมายที่นั่น มองหาแบรนด์หลอดไฟอัจฉริยะของคุณ (Philips Hue, LIFX, WeMo) หรือหากคุณยังไม่มี ลองดาวน์โหลด bulb-plugin ตรวจสอบว่าปลั๊กอิน Dashboard ของคุณมีสิ่งเหล่านี้!

ป้ายสีเหลืองแสดงว่าปลั๊กอินกำลังทำงาน แต่ไม่พบอุปกรณ์ใดๆ คลิกที่ bulb-plugin เพื่อสร้างหลอดไฟเสมือน อุปกรณ์อื่นๆ ที่ค้นพบควรปรากฏภายใต้เครือข่าย

เมื่อทุกอย่างพร้อมแล้ว กลับไปทำงานกันเถอะ เราจะสร้างกระแสอย่างง่าย:

  1. ลากและวางโหนดการฉีด
  2. ลากและวางโหนด Netbeast
  3. ลากและวางโหนดดีบัก
  4. วางสายทั้งหมดดังแสดงด้านล่าง:

ตอนนี้ มาส่งคำขอ HTTP ไปยังแดชบอร์ดกัน การใช้ Netbeast API เราจะต้องส่ง JSON ผ่านโหนดการฉีดที่มีค่าที่เราต้องการให้ทริกเกอร์บนหลอดไฟของเรา

กดปุ่มเพื่อเติมสีและพลังให้กับหลอดไฟอัจฉริยะทั้งหมดของคุณ!

แต่ละหัวข้อแสดงถึงอุปกรณ์ประเภทต่างๆ ดังนั้นจึงมีหัวข้อเกี่ยวกับแสงไฟแต่สำหรับเพลง การทำความร้อน และวิดีโอด้วย เช่นเดียวกับเซ็นเซอร์ความชื้น การมีอยู่ อุณหภูมิ และรายการต่อไป คุณสามารถดูรายการหัวข้อและโครงสร้างที่แนะนำให้แปลในอุปกรณ์ทุกประเภทได้ในเอกสารประกอบ เอ็นจิ้น IoT นี้ยังไม่บรรลุนิติภาวะ แต่ทรงพลัง โอเพ่นซอร์สที่ช่วยให้นักพัฒนาสามารถนำข้อมูลกลับมาใช้ใหม่เพื่อสร้างสถานการณ์ที่เชื่อมต่อกันอย่างแท้จริง จึงเป็นสมาร์ท

ไปกันเลยดีกว่า

ต่อไป เราจะสร้างโฟลว์ที่สองโดยใช้ปลั๊กอินอื่น ซึ่งเป็นตัวตรวจจับเสียงรบกวนรอบข้าง เพื่อใช้เป็นทริกเกอร์ในการเปลี่ยนสีของหลอดไฟเป็นสัญญาณรบกวน ในบทช่วยสอนนี้ เราจะใช้เสมือน ดังนั้นจึงไม่จำเป็นต้องซื้อฮาร์ดแวร์ใหม่ เริ่มต้นด้วยการคลิกปุ่ม "บวก" ในตัวแก้ไข Node-RED

ไปที่ Dashboard อีกครั้ง http://localhost:8000/explore ไปที่ส่วน Explore แล้วมองหา Volume-Plugin เป็นเว็บแอปพื้นฐานที่ใช้ประโยชน์จาก getUserMedia() ภายในเบราว์เซอร์เพื่อจับภาพสื่อจากแอป HTML ธรรมดา ดังนั้นมันอาจจะใช้ได้เฉพาะกับเบราว์เซอร์รุ่นใหม่ๆ เท่านั้น!

คลิกเพื่อเปิด เช่นเดียวกับหลอดไฟเสมือน มันจะขออนุญาตบันทึกจากไมโครโฟนของคุณ จากนั้นจะส่งข้อความไปยังโบรกเกอร์ MQTT ของ Netbeast ซึ่งจะแชร์กับแดชบอร์ดทั้งหมด ดังนั้นเราจะสามารถสมัครรับข้อมูลได้ ในการทำสิ่งนี้ เราจะต้องลากและวางโหนด ทริกเกอร์ netbeast ลงในโปรแกรมแก้ไขของ node-red จากนั้นเราจะแทรกฟังก์ชันระหว่างทริกเกอร์และโหนด Netbeast เพื่อให้เราตัดสินใจว่าจะดังเกินไปหรือไม่ นอกจากนี้ เราควรใช้โหนดดีบักเพื่อตรวจสอบว่าทุกอย่างเรียบร้อยดีหรือไม่ โครงการตอนนี้จะมีลักษณะดังนี้:

ตอนนี้ มาใส่โค้ดลงในโหนดฟังก์ชัน tooLoud ใช่ ฉันรู้ว่าฉันสัญญาว่าคุณจะสามารถเขียนโปรแกรมได้โดยไม่ต้องเขียนโค้ด แต่ฉันได้แสดงให้คุณเห็นแล้วว่าทำได้! และคุณสามารถลองรวมองค์ประกอบต่างๆ ที่มีอยู่หรือโหนดอื่นๆ จากรีจิสทรีเพื่อทำสิ่งต่อไปนี้ให้สำเร็จ

 var volume = msg.payload.volume node.log(volume) if (volume < 50) { return { topic: 'lights', payload: { power: 1, color: '#00CC00'}} } else if (volume < 75) { return { topic: 'lights', payload: { power: 1, color: '#CCCC00'}} } else { return { topic: 'lights', payload: { power: 1, color: '#FF0000'}} }

ตัวอย่างโค้ดที่ค่อนข้างง่ายนี้ส่งคืนหนึ่งในสามเพย์โหลดสำหรับโหนดถัดไปด้วยรหัสสีเฉพาะ ขึ้นอยู่กับระดับเสียงที่รายงานโดยโหนดก่อนหน้า

ตอนนี้เราพร้อมที่จะไป! มากดปุ่ม Deploy กันอีกครั้งแล้วส่งเสียงหน่อย เรามาดูกันว่าหลอดไฟเปลี่ยนสีจากสีหนึ่งเป็นสีอื่นได้อย่างไร!

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

การสร้างปลั๊กอินของคุณเอง

หลอดไฟใน CSS ล้วนๆ นี้ได้รับแรงบันดาลใจจาก cssdeck นี้

อย่างที่คุณอาจสังเกตเห็น หลอดไฟเสมือนจากเมื่อก่อนเป็นพื้นฐานมาก ดังนั้นคุณอาจต้องการปรับแต่ง หรือดีกว่านั้น คุณสามารถสร้างตัวควบคุมบ้านอัจฉริยะของคุณเองได้ ดังนั้น เราจะเข้าสู่กระบวนการสร้างปลั๊กอินเสมือนสำหรับ Netbeast ซึ่งจะทำให้คุณสามารถสร้างตัวควบคุมสำหรับอุปกรณ์อัจฉริยะของคุณเองได้

คุณสามารถใช้ netbeast-cli เพื่อสร้างโค้ดบางส่วนโดยอัตโนมัติ ด้วยการรัน netbeast create myplugin --plugin เราจะจบลงด้วยโปรเจ็กต์พื้นฐานดังนี้:

 myplugin ├── README.md ├── index.js ├── package.json └── test.js

เดอะฟรอนท์เอนด์

ตอนนี้ เรามาเริ่มเลียนแบบหลอดไฟด้วยฟรอนท์เอนด์กัน ตัวควบคุมอุปกรณ์มักจะไม่มี ดังนั้นจึงยังไม่มีโฟลเดอร์ สาธารณะ รวมอยู่ในคำสั่ง scaffold มาสร้าง dir public ภายในโปรเจ็กต์และใส่ไฟล์ HTML, CSS และ JS ต่อไปนี้

index.html

 <head> <title>Netbeast Bulb Plugin</title> <link rel="stylesheet" href="bulb.css" media="screen" charset="utf-8"> </head> <body> <div class="top-decoration"></div> <div> </div> <div class="bulb-container small"> <div class="bulb light"> <div> <div class="bulb top"></div> <div class="bulb middle-1"></div> <div class="bulb middle-2"></div> <div class="bulb middle-3"></div> <div class="bulb bottom"></div> </div> <div> <div class="screw-top"></div> <div class="screw a"></div> <div class="screw b"></div> <div class="screw a"></div> <div class="screw b"></div> <div class="screw a"></div> <div class="screw b"></div> <div class="screw c"></div> <div class="screw d"></div> </div> </div> </div> <div class="code-container"> <pre><i class="txt-red">beast</i>(<i class="txt-green">'lights'</i>).<i class="txt-blue">set</i>({ <i class="txt-green">color</i>: <i class="txt-green">"<input type="text" class="color" name="color" value="00fea5">"</i>, <i class="txt-green">power</i>: <i class="txt-green">"<input type="text" class="power" name="power" value="on">"</i> })</pre> <button> RUN </button> </div><!-- wrapper --> <!-- declares bulb features and methods --> <script type="text/javascript" src="bulb.js"></script> <!-- real time comms library --> <script type="text/javascript" src="socketio.js"></script> <!-- simulates hardware communication --> <script type="text/javascript" src="hw-api.js"></script> </body>

bulb.css

 section { float: left; padding: 20px 50px 20px 50px; } .bulb-light { border: 0; background: transparent; margin: 0 auto !important; padding: 0 !important; display: block; z-index: 1; } #bulb { opacity: 1; z-index: 3; display: block;} .bulb.top { border: 0; width: 300px; height: 300px; margin: 0 auto; padding: 0; border-radius: 999px; background: #E7E7E7; } .bulb.middle-1 { margin: -75px auto 0 auto; width: 190px; border-left: 35px solid transparent; border-right: 35px solid transparent; border-top: 55px solid #E7E7E7; } .bulb.middle-2 { margin: -22px auto 0 auto; width: 178px; border-left: 19px solid transparent; border-right: 19px solid transparent; border-top: 50px solid #E7E7E7; } .bulb.middle-3 { margin: -20px auto 0 auto; width: 182px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 30px solid #E7E7E7; } .bulb.bottom { width: 184px; height: 65px; margin: -8px auto 0 auto; padding: 0; border-radius: 0 0 999px 999px; background: #E7E7E7; } #base { position:relative; z-index: 2; } .screw { transform: rotate(-3deg); -ms-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); padding: 0; } .screw-top { margin: -18px auto -4px auto; padding: 0; width: 132px; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 21px solid #D3D3D3; border-radius: 999px; } .screw.a { background: #DDD; width: 150px; height: 15px; border-radius: 999px; margin: -1px auto 0px; } .screw.b { background: #D9D9D9; width: 135px; height: 15px; margin: -1px auto 0px; } .screw.c { margin: -1px auto 0px; width: 78px; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 20px solid #DDD; border-radius: 8px; } .screw.d { margin: 0 auto; width: 15px; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 15px solid #444; } .on #light { -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .bulb.top, .bulb.bottom { transition: all 0.5s ease-in-out; } .bulb.middle-1, .bulb.middle-2, .bulb.middle-3 { transition: all 0.5s ease-in-out; }

ด้วยไฟล์ HTML และ CSS เหล่านี้ คุณน่าจะสามารถเห็นรูปทรงหลอดไฟในเบราว์เซอร์ของคุณได้แล้ว ไปข้างหน้าและเปิดไฟล์ HTML ของคุณเพื่อดูแบบสด! มันใช้ได้ไหม? เยี่ยมมาก ตอนนี้ให้ฟังก์ชันบางอย่างแก่มัน

bulb.js

ไฟล์นี้จะเลียนแบบพฤติกรรมของหลอดไฟด้วยการคลิกง่ายๆ คลิกปิด และจะตั้งค่าฟังก์ชันสองสามอย่างที่จะใช้เล็กน้อยเพื่อเปลี่ยนสีผ่าน Netbeast

 var color = document.getElementById('color') var power = document.getElementById('power') var bulb = document.getElementById('bulb') var button = document.getElementById('run-btn') var light = document.getElementById('light') button.onclick = function toggleBulbState () { changeBulbParams({ color: color.value, power: power.value }) } function setBulbParams (params) { if (params.power === 'off') { params = { color: 'E7E7E7' } } console.log('set params', params) var bulb_parts = ['.bulb.middle-1', '.bulb.middle-2', '.bulb.middle-3'] document.querySelector('.bulb.top').style.boxShadow = '0px 0px 98px #' + params.color document.querySelector('.bulb.top').style.backgroundColor = params.color document.querySelector('.bulb.bottom').style.backgroundColor = params.color bulb_parts.forEach(function (className) { document.querySelector(className).style.borderTopColor = params.color }) } function changeBulbParams (params) { console.log('change params', params) /* Overwrite html fields if necessary */ color.value = params.color || color.value power.value = params.power || power.value setBulbParams({color: color.value, power: power.value}) }

หลังจากนี้ ฟิลด์และปุ่มเรียกใช้ทั้งหมดควรสมเหตุสมผล คุณสามารถเริ่มลองใช้สีต่างๆ บนหลอดไฟเสมือนใหม่เอี่ยมของคุณได้ อย่างไรก็ตาม เหตุผลที่เรามาด้วยวิธีนี้ก็คือการทำให้เป็นอีกอุปกรณ์หนึ่งของระบบนิเวศ Internet of Things ของเรา

hw-api.js

JS ส่วนหน้าสุดท้ายที่เราสร้างขึ้นเอง มันจำลองการเชื่อมต่อไร้สายกับเซิร์ฟเวอร์ เช่น WiFi หรือหลอดไฟ Bluetooth ที่ทำกับรีโมทคอนโทรล เช่น โทรศัพท์ เซิร์ฟเวอร์ หรือฮับ เป็นอินเทอร์เฟซที่โค้ดปลั๊กอินจริงใช้เพื่อควบคุม!

 var socket = io.connect() socket.on('connect', function () { console.log('ws:// bulb is online') }) socket.on('disconnect', function () { console.log('ws:// connection with bulb lost') }) socket.on('set', function (params) { changeBulbParams(params) // uses functions from bulb.js! }) socket.on('get', function () { const params = { power: power.value, color: color.value } socket.emit('params', params) })

สุดท้าย เราจำเป็นต้องรวมไลบรารี WebSocket จาก HTML ของเรา ดังนั้นฟรอนท์เอนด์จึงพร้อม คุณสามารถคัดลอกแหล่งที่มาจาก https://raw.githubusercontent.com/netbeast/bulb-plugin/master/public/socketio.js และวางลงในไฟล์ชื่อ socketio.js จากเทอร์มินัลที่มี curl หรือ wget คุณสามารถทำได้ง่ายๆ:

 curl https://raw.githubusercontent.com/netbeast/bulb-plugin/master/public/socketio.js > public/socketio.js

ตอนนี้เราจะมีโครงสร้างไฟล์ที่มีลักษณะดังนี้:

 myplugin ├── README.md ├── index.js ├── package.json ├── public │ ├── bulb.css │ ├── bulb.js │ ├── hw-api.js │ ├── index.html │ └── socketio.js └── test.js

แบ็กเอนด์

ตอนนี้เรากำลังจะใช้อินเทอร์เฟซกับอุปกรณ์และลงทะเบียนในเอ็นจิน Netbeast มันจะฟัง websockets เพื่อตรวจจับว่ามีการติดตั้ง bulb บนเครือข่าย จากนั้นจะทำการ POST ไปยัง Dashboard API เพื่อให้ทรัพยากรใหม่พร้อมใช้งาน

สำหรับเรื่องนั้น มาดูไฟล์ที่เราสร้างขึ้นก่อนหน้านี้กัน:

package.json

ไฟล์นี้มีการอ้างอิงและข้อมูลทั้งหมดที่จำเป็นในการเรียกใช้แอปของคุณ Netbeast ใช้ package.json ปกติเพื่อดึงข้อมูลบางอย่าง เช่น ชื่อหรือประเภท สิ่งสำคัญคือต้องระบุว่าแพ็คเกจนี้เป็นปลั๊กอิน!

 { "name": "myplugin", "version": "0.0.0", "description": "Netbeast plugin for... <your description>", "main": "index.js", "netbeast": { "bootOnLoad": true, "type": "plugin" }, "dependencies": { "bluebird": "^3.3.5", "body-parser": "^1.15.0", "express": "^4.13.4", "minimist": "^1.2.0", "mocha": "^2.3.2", "morgan": "^1.6.1", "netbeast": "^1.0.6", "socket.io": "^1.4.5", "superagent": "^1.8.3" }, "devDependencies": {}, "scripts": { "test": "node test.js", "start": "node index.js" }, "repository": { "type": "git", "url": "GITHUB_REPOSITORY" }, "keywords": [ "iot", "netbeast", "plugin" ], "author": "YOUR_EMAIL", "license": "GPL 3", "bugs": { "url": "ISSUES_CHANNEL" }, "homepage": "HOMEPAGE" }

index.js

นี่คือรหัสที่เรียกใช้จากแดชบอร์ด Netbeast เพื่อเปิดใช้ปลั๊กอิน! จะต้องยอมรับพอร์ตด้วยอาร์กิวเมนต์บรรทัดคำสั่งเพื่อทราบว่าจะรับคำขอขาเข้าได้ที่ไหน จะเปิดตัวราวกับว่าเราพิมพ์ node myplugin.js --port <a free port number> โปรดทราบ hashbang ในตอนเริ่มต้นเช่นกัน! #!/usr/bin/env node

 #!/usr/bin/env node var io = require('socket.io')() var express = require('express') var bodyParser = require('body-parser') var app = express() // Netbeast apps need to accept the port to be launched by parameters var argv = require('minimist')(process.argv.slice(2)) app.use(express.static('public')) // will serve our app in an HTTP server app.use(bodyParser.json()) // will parse JSON API calls app.use('/api', require('./plugin')(io)) var server = app.listen(argv.port || 31416, function () { console.log('Bulb plugin listening at http://%s:%s', server.address().address, server.address().port) }) // we need websockets to push updates to browser view io.listen(server)

อย่างที่คุณเห็นเราไม่มีไฟล์ที่จะเปิดใช้งาน ซึ่งเป็นไฟล์ที่ใช้คอนโทรลเลอร์ socket.io จริงๆ ไม่มีอะไรแฟนซี!

plugin.js

 var express = require('express') var netbeast = require('netbeast') var router = express.Router() var bulbParams // auxiliar variable, nasty way to transmit changes, but works module.exports = function (io) { io = io // Create resource that works on lights topic and listens on /api route netbeast('lights').create({ app: 'myplugin', hook: '/api' }) io.on('connection', function () { console.log('ws:// bulb has connected to plugin') }) io.on('disconnection', function () { console.log('ws:// bulb has disconnected from plugin') }) io.on('connect_failure', function (err) { console.trace(err) }) router.post('/', function (req, res) { io.emit('set', { power: req.body.power, color: req.body.color, }) res.status(200).json(req.body) }) router.get('/', function (req, res) { io.emit('get') var timerReference = setTimeout(function () { if (bulbParams) { res.json(bulbParams) } else { res.status(200).json({ error: 'No bulb available' }) } }, 3000) }) return router }

เปิดแอปของคุณ

ถึงเวลาทดสอบแอปของคุณแล้ว คุณสามารถทำได้โดยจัดแพ็กเกจให้อยู่ในรูปแบบ tar.gz แล้วอัปโหลดไปยังแดชบอร์ดในส่วนลากและวาง http://localhost:8000/install

 beast package # Compresses your app when ran in myplugin dir

โว้ว! ตอนนี้คุณสามารถไปที่ปลั๊กอินของคุณและทดสอบได้ ไปที่ส่วนเครือข่าย (http://localhost:8000/devices) เพื่อดูการทำงานและเปลี่ยนสีจากที่นั่น

หากมีข้อผิดพลาดหรือคุณคิดว่าคุณอาจพลาดรายละเอียด ให้ลองเรียกใช้ในเครื่องด้วย node index.js และอาจแก้ปัญหาได้ง่ายกว่าภายในบันทึกการ netbeast start

เผยแพร่ผลงานของคุณ

หากคุณต้องการให้แอปของคุณแสดงบนส่วนสำรวจแดชบอร์ด Netbeast คุณต้องสร้างที่เก็บใน GitHub ด้วยแอป Netbeast หรือปลั๊กอิน Netbeast ซึ่งรวมอยู่ในคำอธิบายและ README.md

ในการค้นหาแอป เราใช้ API การค้นหาของ GitHub เราเห็นผลลัพธ์เดียวกันที่ปรากฏขึ้นเมื่อคุณส่งคำขอ GET ไปที่: https://api.github.com/search/repositories?q=netbeast+language:javascript

คุณจะรู้ว่าแอปของคุณจะปรากฏขึ้นหากปรากฏที่นั่น!

อะไรต่อไป?

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

ในทางกลับกัน หากคุณต้องการดำดิ่งใน Netbeast คุณสามารถทำตามเอกสารของพวกเขาได้เช่นกัน หรือดูที่ที่เก็บแดชบอร์ด การใช้ Netbeast API ทำให้คุณไม่ต้องมุ่งเน้นไปที่อุปกรณ์ แบรนด์ หรือเทคโนโลยีแต่ละรายการอีกต่อไป ลองใช้เลย คุณสามารถเรียนรู้เพิ่มเติมได้ที่นี่ หรือเข้าร่วมช่องทาง Slack และพูดคุยเกี่ยวกับ Node-RED, IoT หรือ Node.js

หากคุณต้องการติดตั้งสิ่งนี้บน Raspberry Pi, Beagle Bone หรือเซิร์ฟเวอร์เก่า คุณจะต้องเปลี่ยนมันให้เป็น Smart Hub ที่แฮ็กได้ โดยไม่ต้องใช้โค้ด! มีบิลด์ที่สร้างไว้ล่วงหน้าสำหรับทั้งสองไซต์

แฮ็คอย่างมีความสุข

ที่เกี่ยวข้อง: เรากำลังสร้าง Internet of Things (IoT) ที่ไม่ปลอดภัยหรือไม่