คู่มือการพัฒนา IOT application ด้วย NETPIE¶
PieSketch¶
PieSketch เป็นเครื่องมือช่วยพัฒนา application แบบ web-based ที่ทีมพัฒนา NETPIE ตั้งใจออกแบบขึ้นมา สำหรับผู้ใช้มือใหม่ และมือสมัครเล่น ที่เพิ่งหัดเขียนโปรแกรม ใช้เป็นสนามในการสร้างสรรและแบ่งปันผลงาน Pie Sketch ได้รวมโมดูลต่างๆ ที่รองรับการทำงานกับ ภาพ, เสียง, กราฟฟิคเคลื่อนไหว รวมไปถึงความสามารถในการเชื่อมต่อ NETPIE platform สำหรับออกแบบ IOT application ที่สื่อสารกันบนหน้าจอได้อย่างรวดเร็วและสนุกสนาน
การใช้งาน¶
บริการของ PieSketch เข้าถึงได้ทาง https://sketch.netpie.io
เริ่มต้นกับ sketch แรก¶
โค้ดของ PieSketch มีพื้นฐานอยู่บน p5js. โครงสร้างประกอบด้วย 2 ฟังก์ชั่นหลัก ได้แก่ setup() ซึ่งจะถูกเรียกครั้งเดียวตอนแรกที่โปรแกรมถูกรัน และ draw() ที่จะถูกเรียกซ้ำๆไปตลอด โค้ดตัวอย่าง จะเป็นการวาดรูปวงกลม เส้นผ่านศูนย์กลาง 80 จุดศูนย์กลางที่ตำแหน่ง (50,50)
ชุดคำสั่งใน PieSketch¶
- p5js เป็นเครื่องมือช่วยพัฒนาโปรแกรมบน HTML5 ในรูปแบบที่ไม่ซับซ้อน ประกอบด้วย ฟังก์ชั่นเกี่ยวกับ การแสดงผลแสงสีบนจอภาพ การควบคุมอุปกรณ์อย่างเมาส์และคีย์บอร์ด รวมไปถึงฟังก์ชั่นช่วยเหลือด้านการคำนวณทางคณิตศาสตร์ รวมไปถึงฟังก์ชั่นเสริม ที่ช่วยให้เราสื่อสารกับ HTML5 object ที่อยู่นอกเหนือจาก canvas เช่น ปุ่มกด, วิดีโอ, เว็บแคม
- NETPIE เป็นชุดคำสั่ง สำหรับพัฒนาโปรแกรมที่เชื่อมต่อกับ NETPIE platform เราสามารถสร้าง sketch ที่สื่อสารกับส่วนประกอบอื่นของ NETPIE เช่น device, dashboard, data feed, mobile push notification หรือแม่แต่ sketch สื่อสารกันเองเป็นกลุ่ม
p5js¶
NETPIE¶
NETPIE เป็นบริการคลาวด์สำหรับการพัฒนา IOT application บนหลากหลาย platform ไม่ว่าจะเป็น hardware, software, หรือ web application สำหรับ PieSketch ก็จัดเป็นอีกหนึ่ง platform ที่ NETPIE ให้บริการด้วยเช่นกัน การเริ่มต้นใช้งาน PieSketch กับ NETPIE ท่านต้องเริ่มต้นจากการสมัครสมาชิก และสร้าง App ID, Key, Secret [ตามขั้นตอนนี้] ในส่วนของการพัฒนา hardware IOT ท่านสามารถศึกษาได้ด้วยตัวเองจาก [คู่มือ NETPIE] แต่ในที่นี้ เราจะกล่าวถึงเฉพาะการพัฒนาบน PieSketch เท่านั้น ซึ่ง PieSketch แต่ละ project ที่เชื่อมต่อเข้ากับ NETPIE รวมถึง hardware ที่ต่อ NETPIE อยู่แล้ว สามารถทำงานร่วมกันได้ทั้งหมด
Note
PieSketch จะรองรับเฉพาะ NETPIE 2015 ท่านต้องทำการสร้าง account ที่ https://2015.netpie.io และ activate account ให้เรียบร้อย และทำการสร้าง App ID, Key, Secret แนะนำให้สร้าง Key ชนิด session key สำหรับใช้กับ PieSketch
Message¶
การใช้งาน NETPIE จะไม่มีความหมายเลย หากไม่มีการสื่อสารระหว่าง microgear เกิดขึ้น การสื่อสารภายในกลุ่มของ microgear บนแต่ละ sketch นั้นเป็นการรับส่ง message ไปมาหากัน message คือข้อความอะไรก็ได้ ขึ้นอยู่กับผู้พัฒนาจะออกแบบ แต่จะต้องเป็นที่เข้าใจกันระหว่าง microgear ด้วยกันเอง เช่น message คำว่า ON ห ลักษณะการส่ง message แบ่งตามจุดหมายปลายทางยของ message แบ่งได้สองแบบ คือ
- message ที่ส่งแบบเจาะจงผู้รับ การส่งลักษณะนี้จะใช้ฟังก์ชั่น microgear.chat()
- message ที่ส่งแบบไม่เจาะจง่ผู้รับ แต่ส่งเข้าหาสิ่งที่เรียกว่า topic การส่งลักษณะนี้จะใช้ฟังก์ชั่น microgear.publish()
การส่ง message ด้วย chat()¶
ผู้ส่งจะระบุ alias ของผู้รับ message จะไปถึงเฉพาะ sketch ที่ได้ตั้ง alias ตัวเองเป็นชื่อดังกล่าว
หากมี sketch หลายตัวใช้ alias ชื่อเดียวกัน messae ที่ส่งหา alias ชื่อนั้นจะเข้าทั้งสอง sketch ดังภาพ
ในการณีที่เราต้องการส่งข้อมูลชุดเดียว ไปยังหลาย alias พร้อมกัน ก็สามารถ loop ส่งตาม alias ของผู้รับแต่ละรายได้ แต่หากผู้รับมีจำนวนมาก หรือเราไม่ทราบ alias ของผู้รับ ก็อาจจะไม่สะดวกที่จะใ้วิธีนี้ เรามีอีกวิธีในการส่ง message คือการใช้ฟังก์ชั่น publish()
การส่ง message ด้วย publish()¶
ในขณะที่ปลายทางของ chat คือ sketch ที่ตั้ง alias ชื่อนั้น จุดหมายปลายทาง publish คือสิ่งที่เรียกว่า topic ในที่นี้ topic คือ string ที่ระบุกลุ่มของความสนใจ โดยมีลักษณะเป็น path เริ่มต้นและคั่นด้วยเครื่องหมาย / เช่น /home/bedroom/temp ผู้ที่จะได้รับ message จะต้องเป็นผู้ที่ได้ทำการ subscribe topic นั้นๆไว้อยู่ก่อนแล้ว แต่ถ้าหากไม่มีใคร subscribe เลย topic นั้นก็จะหายไปเฉยๆ
แต่ถ้าหากมีผู้ subscribe ดังภาพ
message ที่ publish หลังจากนั้นก็จะถูกส่งไปถึงผู้ subscribe ทั้งหมด
Topic¶
การใช้ publish กับ subscribe ช่วยลดความเกี่ยวพัันของ component สองฝั่ง กล่าวคือ ผู้ส่งที่มีข้อมูล ก็ทำหน้าที่ส่งอย่างเดียว โดยไม่ต้องสนใจว่าใครรอรับอยู่บ้าง ส่วนฝั่งผู้รับ ก็ต้องดูแลตัวเองด้วยการ subscribe topic ที่สนใจ หากเราออกแบบ topic ดีๆ การจัดการเส้นทางของ message ก็จะทำได้ง่าย โดยปกติแล้วเรามักใช้ topic ที่สื่อความหมายถึงตัว message เช่น ให้ sensor ทำการ publish ข้อมูลอของตัวเอง ซึ่งเป็นุณหภูมิของห้องครัวเข้าไปที่ topic ชื่อ /home/kitchen/temp และ publish ข้อมูลอุณหภูมิของห้องนอนเข้าไปที่ /home/bedroom/temp
หากผู้รับ ต้องการรับ message จากหลายๆ topic การที่จะ subscribe ทั้งหมดทีละ topic และต้องคอยเพิ่ม topic ใหม่อยู่ตลอด ก็อาจจะเป็นความยุ่งยาก วิธีการที่ดีกว่า คือการ subscribe topic เป็นกลุ่มโดยใช้ wildcard
Wildcard¶
wildcard เป็นเครื่องหมายแทนคำ หรือประโยค มีอยู่ 2 ชนิด ได้แก่
- เครื่องหมาย + ใช้แทนคำหนึ่งคำ
- เครื่องหมาย # ใช้แทนประโยค
จากตัวอย่างที่แล้ว เราสามารถ subscribe /home/# เพียง topic เดียว ก็จะได้ message ทั้งหมดที่ publish เข้า /home/kitchen/temp , /home/toilet/temp และ /home/bedroom/temp ทั้งนี้เพราะ # ทำหน้าที่แทนได้ทุกคำทุกความยาวที่อยู่หลัง /home
Attention
การใช้ wildcard # ต้องวางที่ท้ายประโยคเท่านั้น
ตัวอย่างเพิ่มเติมการใช้ # หากเรา subscribe topic ชื่อ /home/ground/# เราจะได้รับ message ที่ publish เข้า topic ต่อไปนี้
✔ /home/ground/kitchen/humid
✔ /home/ground/toilet/temp
✔ /home/ground/kitchen
✔ /home/ground
✕ /home/upstairs/bedroom/temp
ในทำนองเดียวกัน เราสามารถ subscribe /home/+/temp เพื่อรับ message ทั้งหมดที่ publish เข้า /home/kitchen/temp , /home/toilet/temp และ /home/bedroom/temp ได้เหมือนกัน ทั้งนี้เพราะ + ทำหน้าที่แทนได้ทุกคำ
ตัวอย่างเพิ่มเติมการใช้ # หากเรา subscribe topic ชื่อ /home/ground/+/temp เราจะได้รับ message ที่ publish เข้า topic ต่อไปนี้
✔ /home/ground/kitchen/temp
✔ /home/ground/toilet/temp
✕ /home/ground/bedroom
✕ /home/ground/kitchen/temp/oven
✕ /home/upstairs/bedroom/temp
Microgear¶
การเชื่อมต่อกับ NETPIE จะทำผ่านฟังก์ชั่นของ Microgear library หรือพูดอีกนัยหนึ่งก็คือ การใช้งาน NETPIE ก็คือการออกแบบสร้าง microgear ขึ้นมาทำงานร่วมกันนั่นเอง NETPIE มี microgear library หลายชนิด บนหลากหลาย hardware และหลายภาษา สำหรับ PieSketch ก็ถือเป็นอีกหนึ่ง platform ที่ NETPIE รองรับ โดย PieSketch จะมีตัวแปรชนิด Microgear ให้เรียกใช้ ซึ่งจะมาพร้อมคำสั่ง create() ดังนี้
create()¶
เป็นการสร้างตัวแปร microgear โดยใช้คำสั่ง create ดังนี้
Microgear.create ( key, secret, [alias] )
key
String: เป็นค่า key ที่ได้มาจากการเว็บ netpie.iosecret
String: เป็น secret ของ key ซึ่งจะใช้ประกอบในกระบวนการยืนยันตัวตนalias
String: ชื่อเล่นของ microgear ตัวนี้ สำหรับให้ microgear อื่นอ้างอิงถึง สามารถตั้งทีหลังในโค้ดได้
ค่าที่ส่งออกมา
- microgear : ตัวแปรชนิด microgear
var microgear = Microgear.create({
key: 'M5AT1tW3oEgilr7',
secret: 'SenjBILrRd4a4coNX8mb9exMT',
alias:'p5js'
});
Microgear จะส่งตัวแปร microgear ออกมา ซึ่งจะเป็น object ที่เราจะทำงานด้วย ซึ่งจะมาพร้อมฟังก์ชั่นหลักๆต่อไปนี้
connect()¶
การเชื่อมต่อ NETPIE จะเกิดขึ้นก็ต่อเมื่อเราสั่งให้ microgear ทำการเชื่อมต่อ โดยใช้คำสั่ง
microgear.connect ( appid )
appid
String: เป็นค่า App ID เป้าหมายที่จะเชื่อมต่อเข้าไป
microgear.connect("happyfarm");
Attention
การเชื่อมต่อ จะใช้ port 8081 และ 8084 กรุณาตรวจสอบว่าเครือข่ายของท่านอนุญาตให้ใช้งานได้
setAlias()¶
หากไม่ได้ตั้งชื่อไว้ตอนที่สร้าง เราก็ยังสามารถเปลี่ยนชื่อตัวเองได้ตลอดเวลา
microgear.connect ( alias )
alias
String: ชื่อของ microgear อันนี้
microgear.setAlias("plant");
Note
ใน App ID เดียวกัน เราสามารถตั้งชื่อ alias เดียวกันให้กับหลาย microgear พร้อมๆกันได้ และใน App ID ที่ต่างกัน ชือ alias ถึงแม้จะซ้ำกันก็จะไม่มีผลถึงกัน
chat()¶
ส่งข้อความไปยัง microgear ที่มีชื่อตามที่ระบุ
microgear.chat ( alias , message)
alias
String: ชื่อของ microgear อันนี้message
String|Number|Object: ข้อความที่จะส่งไป
microgear.chat("valve","I need water");
publish()¶
ในการณีที่ต้องการส่งข้อความแบบไม่เจาะจงผู้รับ สามารถใช้ฟังชั่น publish ไปยัง topic ที่กำหนดได้ ซึ่งจะมีแต่ microgear ที่ subscribe topoic นี้เท่านั้น ที่จะได้รับข้อความ
ส่งข้อความไปยัง microgear ที่มีชื่อตามที่ระบุ
microgear.publish ( topic , message )
alias
String: ชื่อของ topic ที่ต้องการจะส่งข้อความไปถึงmessage
String|Number|Object: ข้อความที่จะส่งไป
microgear.publish("/outdoor/temp","28.5");
subscribe()¶
microgear อาจจะมีความสนใจใน topic ใดเป็นการเฉพาะ เราสามารถใช้ฟังก์ชั่น subscribe() ในการบอกรับ message ของ topic นั้นได้
microgear.subscribe ( topic )
alias
String: ชื่อของ topic ที่สนใจต้องการรับข้อความ
microgear.subscribe("/outdoor/temp");
Note
นอกจากการระบุ topic เป็น string แบบชัดเจนแล้ว เรายังสามารถใช้สัญลักษณ์ wildcard เครื่องหมาย # และ * ได้ด้วย ศึกษาเพิ่มเติมได้ที่นี่ [wildcard]
unsubscribe()¶
ยกเลิกการ subscribe
microgear.subscribe ( topic )
alias
String: ชื่อของ topic ที่สนใจต้องการยกเลิกการรับข้อความ
microgear.unsubscribe("/outdoor/temp");
writeFeed()¶
เขียนข้อมูลลง feed storage
microgear.subscribe ( topic )
feedid
String: ชื่อของ feed ที่ต้องการจะเขียนข้อมูลdatajson
String: ข้อมูลที่จะบันทึก ในรูปแบบ jsonapikey
String: apikey สำหรับตรวจสอบสิทธิ์ หากไม่กำหนด จะใช้ default apikey ของ feed ที่ให้สิทธิ์ไว้กับ AppID
microgear.writeFeed("homesensor",{temp:25.7,humid:62.8,light:8.5});
Event¶
application ที่รันบน microgear จะมีการทำงานในแบบ event-driven คือ การเขียนโปรแกรมเชื่อมต่อ NETPIE จะเป็นการเขียน callback function ขึ้นมาตอบสนองต่อ event ต่างๆ ในลักษณะนี้
microgear.on (*event*, *callback*)
event
String: ชื่อ eventcallback
Function: callback function ที่จะถูกเรียก บาง event อาจจะส่ง parameter มาให้ด้วย
event ที่เกิดจาก microgear มีดังนี้
Event: 'connected'¶
เกืดขึ้นเมื่อ microgear library เชื่อมต่อกับ platform สำเร็จ
microgear.on("connected", function() {
console.log("connected");
});
Event: 'disconnected'¶
เกืดขึ้นเมื่อ microgear library ตัดการเชื่อมต่อกับ platform
microgear.on("closed", function() {
console.log("closed");
});
Event: 'info'¶
เป็น event แจ้งข่าวออกมาจาก microgear
microgear.on("info", function(err) {
console.log("Info: "+err);
});
Event: 'error'¶
เป็น event ที่เกิดมี error ขึ้นภายใน microgear
microgear.on("error", function(err) {
console.log("Error: "+err);
});
Event: 'message'¶
เมื่อมี message เข้ามา จะเกิด event นี้ขึ้น พร้อมกับส่งผ่านข้อมูลเกี่ยวกับ message นั้นมาทาง argument ของ callback function
microgear.on("message", function(topic,msg) {
console.log("Incoming message: "+msg);
});
Event: 'present'¶
event นี้จะเกิดขึ้นเมื่อมี microgear ใน appid เดียวกัน online เข้ามาเชื่อมต่อ netpie
microgear.on("present", function(event) {
console.log("New friend found: "+event.gearkey);
});
ตัวอย่างโค้ด PieSketch¶
p5js และ NETPIE¶
- การวาดภาพกราฟฟิก
- การควบคุมเปลี่ยนแปลงสี
- ภาพเคลี่อนไหว 2D
- ภาพเคลี่อนไหว 3D
- การสื่อสารระหว่าง p5.js ผ่าน NETPIE
การวาดภาพกราฟฟิก¶
การวาดภาพกราฟฟิกด้วย p5.js และเคลื่อนที่ตามตำแหน่งลูกศรของเมาส์ที่ลากไปมาบนบริเวณของพื้นที่กรอบสีเหลี่ยม
อ้างอิง: https://p5js.org/examples/structure-create-graphics.html
การควบคุมเปลี่ยนแปลงสี¶
การแปลี่ยนแปลงสีพื้นหลังตามค่าสี RGB ที่กำหนด โดยการปรับค่าบน Slider
อ้างอิง: https://p5js.org/examples/dom-slider.html
ภาพเคลี่อนไหว 2D¶
การสร้างภาพเคลื่อนไหว 2D ด้วย p5.js
อ้างอิง: https://p5js.org/examples/math-sine-cosine.html
ภาพเคลี่อนไหว 3D¶
การสร้างภาพเคลื่อนไหว 3D ด้วย p5.js
อ้างอิง: https://p5js.org/examples/3d-sine-cosine-in-3d.html
การสื่อสารระหว่าง p5.js ผ่าน NETPIE¶
เป็นการประยุกต์การใช้งานร่วมกันระหว่าง p5.js กับ Microgear library ทำให้สามารถที่จะสื่อสารถึงกันได้ทุกที่ผ่าน NETPIE platform ตัวอย่างเช่น การสื่อสารพูดคุยกันระหว่าง Area1 กับ Area2
Area 1
Area 2