คู่มือการพัฒนา IOT application ด้วย NETPIE

PieSketch

PieSketch เป็นเครื่องมือช่วยพัฒนา application แบบ web-based ที่ทีมพัฒนา NETPIE ตั้งใจออกแบบขึ้นมา สำหรับผู้ใช้มือใหม่ และมือสมัครเล่น ที่เพิ่งหัดเขียนโปรแกรม ใช้เป็นสนามในการสร้างสรรและแบ่งปันผลงาน Pie Sketch ได้รวมโมดูลต่างๆ ที่รองรับการทำงานกับ ภาพ, เสียง, กราฟฟิคเคลื่อนไหว รวมไปถึงความสามารถในการเชื่อมต่อ NETPIE platform สำหรับออกแบบ IOT application ที่สื่อสารกันบนหน้าจอได้อย่างรวดเร็วและสนุกสนาน

การใช้งาน

บริการของ PieSketch เข้าถึงได้ทาง https://sketch.netpie.io

_images/screenshot-01.png

เริ่มต้นกับ 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 ตัวเองเป็นชื่อดังกล่าว

_images/chat-01.png

รูปแสดงการส่ง chat message

หากมี sketch หลายตัวใช้ alias ชื่อเดียวกัน messae ที่ส่งหา alias ชื่อนั้นจะเข้าทั้งสอง sketch ดังภาพ

_images/chat-02.png

รูปแสดงการส่ง chat message ไปยังหลายๆ alias

ในการณีที่เราต้องการส่งข้อมูลชุดเดียว ไปยังหลาย alias พร้อมกัน ก็สามารถ loop ส่งตาม alias ของผู้รับแต่ละรายได้ แต่หากผู้รับมีจำนวนมาก หรือเราไม่ทราบ alias ของผู้รับ ก็อาจจะไม่สะดวกที่จะใ้วิธีนี้ เรามีอีกวิธีในการส่ง message คือการใช้ฟังก์ชั่น publish()

การส่ง message ด้วย publish()

ในขณะที่ปลายทางของ chat คือ sketch ที่ตั้ง alias ชื่อนั้น จุดหมายปลายทาง publish คือสิ่งที่เรียกว่า topic ในที่นี้ topic คือ string ที่ระบุกลุ่มของความสนใจ โดยมีลักษณะเป็น path เริ่มต้นและคั่นด้วยเครื่องหมาย / เช่น /home/bedroom/temp ผู้ที่จะได้รับ message จะต้องเป็นผู้ที่ได้ทำการ subscribe topic นั้นๆไว้อยู่ก่อนแล้ว แต่ถ้าหากไม่มีใคร subscribe เลย topic นั้นก็จะหายไปเฉยๆ

_images/publish-01.png

รูปแสดงการ publish ไปยัง topic ที่ไม่มีผู้รับ

แต่ถ้าหากมีผู้ subscribe ดังภาพ

_images/publish-02.png

รูปแสดงการ subsribe topic

message ที่ publish หลังจากนั้นก็จะถูกส่งไปถึงผู้ subscribe ทั้งหมด

_images/publish-03.png

รูปแสดงการ publish ไปยัง topic ที่มีผู้ subscribe อยู่

Topic

การใช้ publish กับ subscribe ช่วยลดความเกี่ยวพัันของ component สองฝั่ง กล่าวคือ ผู้ส่งที่มีข้อมูล ก็ทำหน้าที่ส่งอย่างเดียว โดยไม่ต้องสนใจว่าใครรอรับอยู่บ้าง ส่วนฝั่งผู้รับ ก็ต้องดูแลตัวเองด้วยการ subscribe topic ที่สนใจ หากเราออกแบบ topic ดีๆ การจัดการเส้นทางของ message ก็จะทำได้ง่าย โดยปกติแล้วเรามักใช้ topic ที่สื่อความหมายถึงตัว message เช่น ให้ sensor ทำการ publish ข้อมูลอของตัวเอง ซึ่งเป็นุณหภูมิของห้องครัวเข้าไปที่ topic ชื่อ /home/kitchen/temp และ publish ข้อมูลอุณหภูมิของห้องนอนเข้าไปที่ /home/bedroom/temp

_images/topic-01.png

หากผู้รับ ต้องการรับ 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

_images/wildcard-01.png

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 ได้เหมือนกัน ทั้งนี้เพราะ + ทำหน้าที่แทนได้ทุกคำ

_images/wildcard-02.png

ตัวอย่างเพิ่มเติมการใช้ # หากเรา 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.io
  • secret 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: ข้อมูลที่จะบันทึก ในรูปแบบ json
  • apikey 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: ชื่อ event
  • callback 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

การวาดภาพกราฟฟิก

การวาดภาพกราฟฟิกด้วย 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