[IoT] NETPIE Freeboard [Part1]

NETPIE Freeboard สำหรับผู้เริ่มต้น
How-to Guide for NETPIE Freeboard's beginners 

PART1: การติดตั้ง NETPIE Freeboard 

(และเรื่องราวของ Datasource)

เกริ่นนำ

สำหรับบางคนที่เคยทำโปรเจกต์ IoT ด้วย NETPIE มาแล้ว ก็จะพบว่าการควบคุม 

หรือดูข้อมูลจากอุปกรณ์ผ่านอินเตอร์เน็ตนั้นทำได้หลายวิธีเลย และวิธีที่สำคัญและอาจจะเคยใช้กัน 

คือการใช้ HTML5 Microgear Library ในการเขียนหน้าเว็บขึ้นมา เพื่อใช้เป็นหน้าเว็บที่ไว้ดูข้อมูล 

หรือส่งคำสั่งควบคุมอุปกรณ์ต่างๆ แต่ในวันนี้ ผมมีวิธีการใหม่ที่ง่ายกว่านั้นมาให้ลองศึกษาดูครับ 

นั่นคือ การใช้ NETPIE Freeboard!!! ครับ ซึ่งบอกไว้ก่อนเลยว่าทำได้ง่ายมากๆ นอกจากนี้ยังสวยงาม 

และปรับแต่งได้ตามต้องการเลยด้วย ^_^

Freeboard คืออะไร???
ครับ Freeboard นั้นเป็น Web Application ที่ทำให้เราสามารถสร้าง Dashboard (แดชบอร์ด) 
สำหรับระบบ IoT ของเราขึ้นมาได้ครับ ถ้าจะให้พูดง่ายๆ ก็คือคล้ายๆกับการสร้าง กระดาน IoT ส่วนตัว
ที่เราสามารถวางปุ่มกด,สวิชต์ ไว้ใช้สำหรับควบคุมอุปกรณ์ หรือวางหน้าปัดไว้สำหรับแสดงผลข้อมูลต่างๆที่ได้จากอุปกรณ์ในระบบ IoT ของเรา นอกจากนี้ยังสามารถนำข้อมูลที่ได้มาไปแสดงผลเป็นกราฟ
และสามารถปรับแต่งได้ตามใจชอบได้ง่ายๆ เพียงแค่ คลิ๊ก-ลาก-วาง และมีการป้อนข้อมูลหรือคำสั่งอีกนิดหน่อย ก็สามารถทำงานได้แล้วครับคือง่ายมากๆ ไม่ต้องเสียเวลานั่งงมเขียนเป็น HTML Webpage
ให้วุ่นวาย ที่สำคัญคือข้อมูลนั้นมีการอัพเดทแบบ real-time มีความเสถียรและเชื่อถือได้ และเป็น
Open-Source ซึ่งทำให้นักพัฒนาสามารถต่อยอดให้ดียิ่งขึ้นได้อีกด้วยครับ

ภาพตัวอย่าง NETPIE Freeboard ครับ จะเห็นได้ว่าสวยและดูเรียบง่าย (Simple) มากๆ เลยครับ

 

สรุปง่ายๆสั้นๆ

ก็คือ Freeboard จะทำให้เราสามารถสร้าง และปรับแต่ง IoT Dashboard 

ส่วนตัวได้ง่ายขึ้น โดยไม่ต้องไปนั่งเขียนเว็บเองครับ แค่คลิ๊ก-ลาก-วาง แล้วก็ใส่ข้อมูลและคำสั่ง

 ก็สามารถมีหน้า Dashboard ที่ใช้ควบคุมและดูข้อมูลอุปกรณ์ IoT ต่าง ได้ง่ายๆเลยครับ

ซึ่งทีมงาน NETPIE ของเราก็ได้พัฒนา 

"NETPIE Freeboard"

ขึ้นมาเพื่อให้เหล่า Maker และนักพัฒานาชาวไทย 

ได้นำไปใช้กันฟรีๆแบบไม่เสียตังค์เลยครับ ^_^

ถ้าพร้อมแล้วก็ มาเริ่มเรียนรู้การใช้งาน 

NETPIE Freeboard กันเลยครับ...

STEP1: ดาวน์โหลดและติดตั้ง NETPIE Freeboard

สำหรับตัว NETPIE Freeboard (และ Freeboard อื่นๆ) นั้นจะมีระบบไฟล์แบบเดียวกับเว็บเพจต่างๆ

คือจะมีไฟล์ค่อนข้างเยอะหน่อย แต่ถูกจัดเก็บไว้อย่างเป็นระบบในโฟล์เดอร์ต่างๆครับ 

ซึ่งไฟล์ส่วนใหญ่นั้นก็จะประกอบด้วยไฟล์เว็บเพจที่เป็น html และไฟล์โค้ด Javascript ต่างๆ 

โดยไฟล์ทั้งหมดทีมงาน NETPIE ได้อัพขึ้นไว้ที่ Github ครับ 

สามารถเข้าไปดาวน์โหลดได้ตามลิ้งค์ด้านล่างนี้เลยครับ

https://github.com/netpieio/netpie-freeboard

กดที่ปุ่ม Clone or download ตรงนี้ ตามด้วย Download ZIP เลยครับ

(สำหรับคนที่ใช้ Github เป็นอยู่แล้วก็อาจจะทำการ Clone ไปใช้งานได้เลยนะครับ)

หลังจากนั้นเราจะได้ไฟล์ ZIP ของ NETPIE Freeboard ทั้งหมดมาครับ 

ทีนี้ก็ให้สร้างโฟล์เดอร์สำหรับเก็บไฟล์เหล่านี้ขึ้นมา เช่นของผมก็จะสร้างโฟล์เดอร์ชื่อ 

NETPIE Freeboard ขึ้นมาในไดรว์ D:\ นะครับ (จะสร้างไว้ตรงไหน/ชื่ออะไรก็ได้ตามสะดวก) 

จากนั้นก็ให้ทำการแตกไฟล์ทั้งหมดจากในโฟลเดอร์ netpie-freeboard-master 

จากในไฟล์ ZIP ลงไปวางในโฟล์เดอร์ที่เราสร้างไว้ได้เลย โดยเราจะสามารถเข้าใช้งาน 

NETPIE Freeboard ได้จากโฟลเดอร์นี้

ของผมเมื่อแตกไฟล์ต่างๆเสร็จเรียบร้อยแล้วก็จะเป็นแบบนี้ครับ 

คือมีไฟล์ต่างๆจาก ZIP ที่ดาวน์โหลดมา อยู่ในโฟลเดอร์ที่ผมสร้างไว้ก่อนหน้านี้อย่างเรียบร้อย

(ส่วนสำหรับใครที่มีเว็บไซต์เป็นของตัวเอง ก็ให้อัพโหลดไฟล์ต่างๆใน ZIP ขึ้นที่ Web Server ได้เลยครับ)

เท่านี้การติดตั้ง NETPIE Freeboard ก็เสร็จสิ้นแล้วครับ ^_^

สำหรับการเปิดใช้งาน ก่อนอื่นต้องเข้าใจก่อนครับว่า NETPIE Freeboard นั้นไม่ใช่โปรแกรม 

แต่เป็นลักษณะของ Web Application นั่นคือเราจะต้องเปิดด้วย Web Browser

(เช่น Google Chrome, Firefox, Safari) นั่นเองครับ (ยังไม่รองรับการใช้งานบน Internet Explorer)
ซึ่งการเปิดเข้าใช้งานก็สามารถทำได้โดยการเปิดไฟล์ index.html 
ที่อยู่ในโฟลเดอร์ของเราครับ ตามภาพนี้เลยครับ

(ส่วนใครที่อัพขึ้น web server ก็สามารถเข้าผ่าน url ตามที่อัพไว้ได้เลยครับ

เช่นถ้าผมอัพไว้ใน directory ชื่อ netpie-freeboard ก็จะเข้าผ่าน url ได้แบบนี้ครับ

http://www.ชื่อเว็บไซต์-โดเมน.com/netpie-freeboard/index.html)

เมื่อเปิดไฟล์เข้ามาแล้วเราก็จะพบกับ Dashboard ซึ่งยังว่างเปล่าอยู่

และรอคอยการเติมเต็มจากเราแล้วครับ เท่านี้การดาวน์โหลดและติดตั้งก็เสร็จแล้วครับ ^_^

STEP2: ทำความเข้าใจกับ Freeboard Datasource

     เนื่องจาก NETPIE Freeboard นั้นจะเป็นหน้าเพจที่แสดงข้อมูลต่างๆ ซึ่งตัวอุปกรณ์ (Things)
ของเราภายใน AppID เดียวกันนั้นจะมีการ chat เพื่อส่งข้อมูล (เช่นค่าอุณหภูมิ/ค่าต่างๆจากเซนเซอร์)
หรือส่งคำสั่ง (เปิด/ปิด) หากันและกัน ซึ่งตัว Freeboard เองก็ต้องทำตัวให้เปรียบเสมือนว่าเป็น Things
ตัวหนึ่ง ที่ Things อื่นๆ สามารถ chat ส่งข้อมูลมาหาได้เช่นกัน เพื่อที่จะได้นำข้อมูลเหล่านั้นมาแสดงผล
บน Dashboard ของเราตามที่เราต้องการได้ ซึ่งเราจะต้องสร้าง Datasource ขึ้นมา เพื่อเป็นตัวกลางของ
การสื่อสารรับส่งข้อมูล (เป็นตัวแทนของ Freeboard) ซึ่งสำหรับคนที่ใช้ NETPIE อยู่แล้ว 

ก็สามารถสร้าง Datasource แบบ NETPIE Microgear ได้เลยครับ (โดยใช้ Key จาก NETPIE)
หรือสำหรับใครที่ใช้งาน Datasource แบบอื่นก็สามารถเพิ่มได้เช่นกับครับ โดย NETPIE Freeboard
นั้นรองรับ Datasource หลากหลายรูปแบบเลย ทั้ง JSON, Open Weather Map, Dweet.io, Playback, Clock และ Octoblue ครับ แต่ในที่นี้ผมจะขอพูดถึง Datasource แบบของ NETPIE Microgear ครับ

สรุปง่ายๆสั้นๆก็จะเป็นไปตามภาพนี้ครับ

     ซึ่งในการเพิ่ม Datasource แบบ NETPIE Microgear นั้น ให้ทำการสร้าง Key
ใหม่ขึ้นมาใหม่ใน AppID ที่เราต้องการให้ Freeboard แสดงผลและรับส่งข้อมูล 
(AppID ที่มี Things อื่นๆอยู่ด้วย) เพื่อนำ Key และ Secret ไปใส่ใน Freeboard ครับ

สำหรับใครที่ยังไม่มี Account ของ NETPIE และยังไม่ได้สร้าง Application ไว้
หรือยังไม่รู้เรื่องอะไรเกี่ยวกับ AppID Key และ Secret เลย ตามไปที่ Link นี้เลยครับ

(ผมอธิบายไว้ในส่วนของ Step 1-2 นะครับ)
Smart Home Part 5 : การสมัครเข้าใช้งาน NETPIE

เมื่อสร้าง Key เสร็จแล้ว ขั้นตอนต่อไป จะเป็นการสร้าง Datasource นะครับ

STEP3: การสร้าง Datasource บน Freeboard

ทีนี้ก็มาถึงการสร้าง Datasource ใน NETPIE Freeboard นะครับ โดยผมจะโฟกัสไปที่การสร้าง Datasource แบบ NETPIE Microgear นะครับ โดยขั้นตอนแรกก็ ให้ทำการเปิด NETPIE Freeboard ขึ้นมาก่อนครับ แล้วดูตรงส่วนบนขวา จะเห็นส่วนของ Datasource อยู่ครับผม
ให้ทำการกดที่ปุ่ม ADD ครับ

ทำการเลือก Type เป็นแบบ NETPIE Microgear ครับ

จะปรากฏหน้าสำหรับการกำหนดค่าให้ Datasource ที่เราจะสร้างนะครับ 

ก็จะต้องใส่ข้อมูลต่างๆดังนี้ครับ

ก็ให้นำข้อมูลจาก Key สำหรับ Datasource ที่เราสร้างไว้ใน NETPIE มากรอกลงไป

และทำการตั้งชื่อ Device Alias และ Microgear Reference ไว้ใช้กับคำสั่งต่างๆด้วยครับ

(Device Alias จะใช้เป็นเหมือนชื่อเรียกเวลาเราต้องการ chat ไปหา Datasource ผ่านคำสั่งต่างๆ

ส่วน Microgear Reference เป็นชื่ออ้างอิง Microgear ครับ เพราะ Datasource จะทำตัวเหมือนกับว่า

เป็น Things หนึ่งๆ (ทำตัวเป็น Microgear ตัวหนึ่งแต่ไม่ได้มีตัวตนจับต้องได้จริงๆ)

ซึ่งเป็นชื่อที่ Freeboard จะใช้อ้างถึงตัวเอง เวลาจะคำสั่งส่งข้อความหนึ่งๆ โดยจะมีรูปแบบนี้ครับ

microgear["ชื่อ Microgear Reference"].chat("ชื่อผู้รับ(Alias)","ข้อความ")

เช่น ผมต้องการใช้ Freeboard ของผม ซึ่งกรอกข้อมูลทุกอย่างดังรูปที่ผ่านมา

ไปสั่งเปิดไฟหน้าบ้านของผม โดยที่ชุดเปิดปิดไฟของผมมี Alias เป็น smartnode1

ก็จะใช้คำสั่งนี้บน Freeboard ครับ

microgear["freeboard_mg1"].chat("smartnode1","ON")

(ในเรื่องของการใช้งาน และการสร้าง/ใส่คำสั่ง จะเขียนใน Part ต่อไปนะครับ)

และเมื่อกรอกข้อมูลเรียบร้อยแล้ว ก็ให้กด Save ด้านล่างเลยครับ

หลังจากนั้นเราก็จะเห็น Datasource ที่เราสร้างขึ้นปรากฏในรายชื่อ Datasource ครับผม

ใน Freeboard หนึ่งจะใช้หลายๆ Datasource ก็ได้นะครับ ไม่ได้จำกัดว่าต้องใช้แค่ Datasource เดียว

โดยหลังชื่อ Datasource จะแสดงข้อมูล Last Updated ซึ่งจะแสดงเวลาที่มีการอัพเดทข้อมูลล่าสุด

(ในตอนนี้ Datasource ของเรายังไม่มีการรับส่ง chat ครับเลยยังเป็น never อยู่)

และจะมีปุ่ม Refresh ไว้สำหรับรีข้อมูลใหม่ และปุ่มถังขยะไว้สำหรับลบ Datasource นี้ทิ้งไปครับผม

สำหรับใน Part 1 นี้ผมก็ขอจบไว้เพียงเท่านี้ก่อนนะครับ และใน Part ต่อไป

จะเป็นการทดลองเปิดปิดหลอดไฟ LED ผ่าน NETPIE Freeboard ด้วยปุ่มกด 
และทำหลอดไฟแสดงสถานะบน Freeboard ด้วยครับผม 

อ่านต่อ PART 2: Test LED