NETPIE Freeboard [Part2]

NETPIE Freeboard [Part2]

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

PART2: การทดลองเปิดปิดไฟผ่าน NETPIE Freeboard

เกริ่นนำ...

     เอาหละครับ ที่ผมเขียนอธิบายไว้อย่างยาวเหยียดใน PART1 นั้นอาจจะทำให้พอเข้าใจได้บ้างแล้ว

แต่สำหรับคนที่ยังไม่เข้าใจ ผมเชื่อว่าหลังการทดลองนี้ จะทำให้เข้าใจได้มากขึ้นแน่นอนครับ 555+

ในการทดลองนี้ เราจะสร้างชุดจำลอง Smart Home ที่ใช้เปิดปิดหลอดไฟในบ้านขึ้นมานะครับ

โดยใช้หลอด LED เป็นตัวแทนของหลอดไฟที่จะไปควบคุมจริงๆ ถ้าพร้อมแล้วก็เริ่มเลยนะครับ...

STEP1: เตรียมอุปกรณ์กันก่อน (สร้าง Things และอัพโหลดโค้ด)

1.บอร์ดไมโครคอนโทรลเลอร์ NodeMCU V2 (ESP-12E)

เป็นหนึ่งบอร์ดที่ผมเชื่อว่ามือใหม่ทุกคนน่าจะมีติดมือกันอยู่แล้วนะครับ

เพราะโดยส่วนตัวผมคิดว่าเป็นบอร์ดที่่ใช้งานง่ายที่สุด และราคาก็ไม่แพงมากครับผม

2.โปรโตบอร์ด ครับ หนึ่งในอุปกรณ์สุดคลาสสิคที่น่าจะมีติดมือกันทุกคน

3.และสุดท้ายคือ หลอด LED ครับ ในที่นี้ผมใช้เป็นหลอดเล็ก สีขาวนะครับ

โดยอุปกรณ์ทั้งหมด ผมจะต่อเข้าด้วยกันตามภาพนี้นะครับ

หลังจากนั้นก็ทำการสร้าง KEY ชื่อ TestLED ไว้ใน NETPIE 

และทำการนำมาใส่ค่าในส่วนที่ผมคอมเมนต์ไว้ (7 บรรทัดนั้น) ให้ถูกต้อง

จากนั้นก็โหลดโค้ดลงบนบอร์ดได้เลยครับ

โค้ด Freeboard_TestLED

	// NETPIE FREEBOARD's TEST LED CODE BY NECTEC/NARIN BANNASAN
	#include
	#include
	#include
	#include
	#include
	#include
	#include
	const char* ssid = "NarinGroup_Hotspot"; //== 1 == ใส่ชื่อเครือข่าย WiFi ที่จะให้ NodeMCU V2 เชื่อมต่อ
	const char* password = "123456789xxx"; //== 2 == ใส่รหัสผ่านของเครือข่าย WiFi ที่จะให้ NodeMCU V2 เชื่อมต่อ
	#define LEDPin D2 //== 3 == หากต่อหลอด LED ที่ขาอื่นที่ไม่ใช่ D2 ให้ทำการเปลี่ยนชื่อขาตรงนี้ด้วย
	#define APPID "ZerefSmartHome" //== 4 == ใส่ Application ID (ชื่อ Application) ที่สร้างบน NETPIE
	#define GEARKEY "Y6vrxHs9JIyhPMJ" //== 5 == ใส่ Key ของอุปกรณ์ ที่ได้จากการสร้างบน NETPIE
	#define GEARSECRET "uxRUVw6TX7nbLHLRj24i4FwMp" //== 6 == ใส่ Secret ของอุปกรณ์ ที่ได้จากการสร้างบน NETPIE
	#define ALIAS "testled" //== 7 == ตั้งชื่อ Alias ให้กับ Things นี้ (เป็นชื่อเรียกเวลา chat มาหา)
	#define SCOPE ""
	WiFiClient client;
	AuthClient *authclient;
	MicroGear microgear(client);
	void onConnected(char *attribute, uint8_t* msg, unsigned int msglen)
	{
	Serial.println("Connected to NETPIE...");
	microgear.setAlias(ALIAS);
	}
	void onMsghandler(char *topic, uint8_t* msg, unsigned int msglen)
	{
	Serial.print("Incoming message --> ");
	Serial.print(topic);
	Serial.print(" : ");
	char strState[msglen];
	for (int i = 0; i < msglen; i++)
	{
	strState[i] = (char)msg[i];
	Serial.print((char)msg[i]);
	}
	Serial.println();
	String stateStr = String(strState).substring(0, msglen);
	//=========== ช่วงประมวลผลคำสั่ง =============
	if (stateStr == "ON")
	{
	digitalWrite(LEDPin, HIGH);
	microgear.chat("testledstatus", "ON"); //==== คำสั่ง chat เพื่อบอกส่งค่าสถานะไปยังหลอด LED บน NETPIE Freeboard
	}
	else if (stateStr == "OFF")
	{
	digitalWrite(LEDPin, LOW);
	microgear.chat("testledstatus", "OFF"); //==== คำสั่ง chat เพื่อบอกส่งค่าสถานะไปยังหลอด LED บน NETPIE Freeboard
	}
	//=========== ช่วงประมวลผลคำสั่ง =============
	}
	void setup()
	{
	Serial.begin(115200);
	Serial.println("Starting...");
	pinMode(LEDPin, OUTPUT);
	microgear.on(MESSAGE,onMsghandler);
	microgear.on(CONNECTED,onConnected);
	if (WiFi.begin(ssid, password))
	{
	while (WiFi.status() != WL_CONNECTED)
	{
	delay(500);
	Serial.print(".");
	}
	Serial.println("WiFi connected");
	Serial.println("IP address: ");
	Serial.println(WiFi.localIP());
	//uncomment the line below if you want to reset token -->
	microgear.resetToken();
	microgear.init(GEARKEY, GEARSECRET, SCOPE);
	microgear.connect(APPID);
	}
	}
	void loop()
	{
	if (microgear.connected())
	{
	microgear.loop();
	Serial.println("connect...");
	}
	else
	{
	Serial.println("connection lost, reconnect...");
	microgear.connect(APPID);
	}
	delay(1000);
	}

view rawNETPIEFreeboard_TestLED hosted with ❤ by GitHub

สำหรับใครที่ยังไม่ได้เตรียม Software สำหรับการใช้งาน Arduino และ NodeMCU V2

ตามไปดูขั้นตอนและวิธีการเซ็ทอัพโปรแกรมต่างๆที่ลิงค์นี้นะครับที่ลิ้งค์นี้นะครับ 

Smart Home Part 2: การเตรียม Software สำหรับ NodeMCU V2

เมื่ออัพโหลดลงแล้ว ก็ให้ลองเปิด Serial Monitor (เลือก Baud Rate เป็น 115200)

ดูครับว่าบอร์ดของเรานั้นเชื่อมต่อเรียบร้อยหรือไม่ ตามรูปด้านล่างนี้ครับ 

ถ้าหากไม่มีปัญหาอะไรแล้วก็เป็นอันว่าเรียบร้อยครับ เพียงเท่านี้เราก็จะได้ Thing 

ที่มีหลอด LED หนึ่งหลอด และพร้อมที่จะทดลองการเปิดปิดผ่าน NETPIE Freeboard แล้วครับ

STEP2: ทีนี้มาดูบน Freeboard กันบ้าง

ให้ทำการเปิด Freeboard ที่เราสร้าง Datasource ไว้ใน Part แรกขึ้นมาครับผม

จากนั้นก็ให้กดปุ่ม ADD PANE ตามภาพนี้ครับ

จากนั้นก็จะได้แผง (Pane) มาหนึ่งแผงครับ ซึ่งเราสามารถเพิ่ม Widgets 

(สำหรับแสดงผล/ควบคุมต่างๆ) ลงบนแผงที่สร้างขึ้นมานี้ครับ

เมื่อกดแล้วก็จะขึ้นหน้ามาให้เลือกครับว่าเราจะเพิ่มอะไรลงไป ในที่นี้ผมจะสร้างปุ่มขึ้นมา

เพื่อทำการเปิดปิดหลอดไฟ LED ก่อนนะครับ ก็จะทำการเลือกเป็น Button ครับผม

จากนั้นก็จะมาถึงจุดไคล์แมกซ์ละครับ ก็คือการใส่ข้อมูล และคำสั่งให้กับปุ่มๆนี้ 

โดยข้อมูลที่ต้องใส่แต่ละช่องก็มีรายละเอียดดังนี้ครับผม 

โดยปุ่มแรกที่ผมจะทำคือ ปุ่มเปิดไฟครับ โดยผมจะมีการใส่ข้อมูลต่างๆดังนี้ครับ

ขออธิบายในส่วนของคำสั่ง Javascript นิดนึงนะครับ อย่างที่บอกไปก่อนหน้านี้

ใน Part ที่แล้วครับว่าจะมีการใช้คำสั่ง JavaScript ซึ่งมีรูปแบบคำสั่งเป็นแบบนี้นะครับ

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

โดยในที่นี้ เรากดเปิดไฟจาก Freeboard ฉะนั้น คนที่สั่งก็คือ Freeboard ครับ

ดังนั้น ชื่อ Microgear Reference ที่ใส่ในคำสั่ง จึงเป็นชื่อเดียวกับ

Microgear Reference ที่เราตั้งตอนสร้าง Datasource ครับผม

ส่วน ชื่อผู้รับ(Alias) นั้นจะเป็นไปตามที่เราตั้งไว้ใน Code ตอนเขียนโปรแกรมใน Arduino ครับ

และ ข้อความ ก็จะแล้วแต่เงื่อนไขครับ เช่นในที่นี้ในโค้ดมีการรอฟังคำสั่งคือ ON กับ OFF ครับ

และนี่คือที่มาทั้งหมดของคำสั่ง Javascript ที่อยู่ในรูปครับ

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

ทีนี้พอเข้าใจรูปแบบคำสั่งแล้วก็ให้ทำการกด SAVE เพื่อบันทึกค่าครับผม

จากนั้นก็จะได้ปุ่มเปิดไฟสีเขียวสวยงามอร่ามตาครับ เมื่อลองกดดูไฟ LED ที่บอร์ดของเรา

ก็จะติดขึ้นมาครับ (สำหรับบางคนหลังสร้างปุ่มก็อาจจะติดเองเลย เป็นอาการปกตินะครับ)

และเมื่อกดปุ่มจะเห็นว่ามีการอัพเดทของข้อมูลบน Datasource ด้วยครับผม 

(ถ้าไม่เป็นไปตามนี้แสดงว่ามีขั้นตอนบางอย่างผิดไป ให้ลองย้อนทำใหม่และค่อยๆแก้ปัญหานะครับ)

ทีนี้ก็ให้ทำการกดที่ปุ่ม [+] ของแผงนี้เหมือนเดิม เพื่อสร้างปุ่มขึ้นมาอีกปุ่มนึงครับผม

ทีนี้ก็ทำตามขั้นตอนเดิมครับ เลือก Type เป็น Button 

แล้วกรอกข้อมูลให้เป็นปุ่มปิดครับ โดยของผมจะสร้างเป็นสีแดงนะครับ

ตรงส่วน Javascript ก็กรอกเหมือนเดิมเลยครับ 

แต่เปลี่ยนส่วนสุดท้ายจาก .chat("testled","ON") ให้เป็น .chat("testled","OFF") ครับ

หลังจากกด SAVE เราก็จะได้ปุ่มปิดไฟเพิ่มมาอีกปุ่มครับ 

ทีนี้เราก็จะสามารถเปิดปิดไฟผ่าน NETPIE Freeboard ได้แล้วครับ

ทีนี้เพื่อความสมบูรณ์แบบนะครับ เราจะมาสร้าง หลอดไฟแสดงสถานะ (Indicator Light)

เพื่อให้รู้ว่า LED ของเรานั้นเปิดปิดตามที่สั่งไปหรือยังนะครับ โดยจากโค้ดใน Arduino

ในส่วนของช่วงประมวลผลคำสั่ง จะมีคำสั่งชุดนี้อยู่ 

สำหรับการทำงานของคำสั่งนี้ก็คือ เมื่อบอร์ดได้รับข้อความว่า ON หรือ OFF มาแล้ว

ก็จะทำการเปิดหรือปิด LED ตามคำสั่งที่ได้รับมา และหลังจากเปิดหรือปิดเรียบร้อยแล้ว

ก็จะมีการ chat ไปบอกบน Freeboard ด้วยว่าสถานะปัจจุบันเป็น ON หรือ OFF อยู่ครับ

โดยจะมีการส่งคำสั่งไปยัง Alias ที่มีชื่อว่า testledstatus ครับผม 

ซึ่งจะเป็นชื่อของหลอด Indicator ที่เรากำลังจะไปสร้างบน NETPIE Freeboard นั่นเองครับ

สำหรับการาสร้างหลอดไฟแสดงสถานะบน Freeboard ก็ให้ทำตามนี้นะครับ

เริ่มจากกดปุ่ม [+] บนแผงที่มีปุ่มของเราเหมือนเดิมครับผม

ทีนี้ก็ให้เลือก Type เป็น Indicator Light (ไฟแสดงสถานะ) ครับผม

แล้วทำการกรอกรายละเอียดต่างๆ โดยแต่ละช่องมีรายละเอียดดังนี้ครับ

ช่อง VALUE นั้นจะเป็นเงื่อนไขนะครับ โดยหลอดไฟจะติดเมื่อเงื่อนไขในช่อง VALUE 

มีค่าเป็นจริงสำหรับการใส่ค่าในช่อง VALUE เพื่อสร้างเงื่อนไขก็จะมีขั้นตอนดังนี้ครับ 

(โดยผมจะเริ่มตั้งแต่ตอนที่ช่องนี้ยังว่างอยู่เลยนะครับ)

1. คลิ๊กที่ปุ่ม + Datasource ข้างหลังช่อง VALUE ครับ

2. จากนั้นจะมีข้อมูลปรากฏขึ้นมาในช่องโดยอัตโนมัติครับ แล้วจะมีรายชื่อ Datasource 

ให้เราเลือกที่ด้านล่าง ก็ให้ทำการเลือก Datasource ที่เราสร้างไว้ครับผม

3.หลังจากคลิ๊กเลือก Datasource ในขั้นตอนที่แล้ว ก็จะมีไดเรกทอรี่ของข้อมูลให้เลือกครับ

โดยในตอนนี้เราจะเห็น Alias ทั้งสองอันของเรา โดย testled นั้นเป็นชื่อ Alias ของบอร์ดเราที่ต่อ

LED ของจริงอยู่ในตอนนี้ ซึ่งข้อมูลจะถูกส่งไปมาด้วยปุ่มเปิดปิดที่เราสร้างไปก่อนหน้านี้ครับ

ส่วน testledstatus เป็นชื่อ Alias ลอยๆที่เราให้บอร์ดเรา chat กลับมาบอกครับ โดยในที่นี้

เราเหมือนกำลังจะมอบ Alias นี้ให้เป็นของหลอด Indicator Light นี้นั่นเองครับ

ก็ให้ทำการคลิ๊กเลือกอันที่เป็น testledstatus ครับผม

4.ทีนี้ก็จะมีคำสั่งข้อมูลขึ้นมาจนเต็มกรอบช่องนี้เลยครับ 

เราก็จะทำการกดเพื่อเข้าแก้ไขข้อมูล ด้วย .JS EDITOR โดยการคลิ๊กที่ปุ่มนี้ครับ

เมื่อกดแล้ว NETPIE Freeboard ก็จะนำพาเรามาสู่หน้า JS Editor ครับ 

ซึ่งเราจะเห็น ข้อมูลของเราในช่อง VALUE แบบเต็มๆแบบนี้ครับ 

ซึ่งข้อมูลที่เห็นทั้งบรรทัดนี้คือตัวแปรตัวหนึ่ง

ที่จะมีค่าเป็น ON หรือเป็น OFF ก็ตามที่บอร์ด chat กลับมาครับ

(คือค่าของ testledstatus นั่นเองครับ)

5. แล้วอย่างที่บอกไปว่า ข้อมูลที่เราจะกรอกในช่อง VALUE นั้นเป็นเงื่อนไข 

และหลอด Indicator Light นี้จะติดขึ้้นเมื่อเงื่อนไขในช่องเป็นจริง ดังนั้น

ผมก็จะทำการทำให้อยู่ในรูปแบบเงื่อนไข โดยการใส่ == "ON" เข้าไปครับผม

อธิบายก็คือ เมื่อเรากดปุ่มเปิดไฟ ปุ่มจะ chat ไปหาบอร์ดว่า ON 

แล้วบอร์ดก็จะเปิดไฟให้เราครับ (testled จะมีค่าเป็น "ON") แล้วทีนี้พอบอร์ดเปิดไฟ

เสร็จแล้ว ก็จะมีการ chat กลับมาในตัวแปร testledstatus ว่า ON แล้ว 

(จะทำให้ testledstatus มีค่าเป็น "ON")

ซึ่งเมื่อ testledstatus มีค่าเป็น "ON" นั้นจะทำให้เงื่อนไขที่เรากรอกนี้เป็นจริง 

(อย่าลืมนะครับว่าที่เราแก้ไขอยู่นี่คือข้อมูลในช่อง VALUE ของ Indicator Light)

เมื่อเงื่อนไขในช่อง VALUE เป็นจริง ก็จะทำให้ลอด Indicator Light ติดครับผม

กลับกัน เมื่อเป็นเท็จ (เราสั่งปิดไฟ ค่ากลายเป็น "OFF") 

หลอด Indicatior Light ก็จะดับครับผม

เมื่อเพิ่มข้อมูลเสร็จเรียบร้อยแล้วก็กด CLOSE เลยครับ

พอลองเลื่อนดูจะเห็นว่าข้อมูลในช่อง VALUE นั้นถูกเพิ่ม == "ON" ครับ

คราวหลังจะเลื่อนมาเติม == "ON" ตรงนี้เลยไม่ต้องเข้า .JS Editor ก็ได้นะครับ

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

อาจจะต้องใส่ข้อมูลมากกว่า 1 บรรทัด การกดเข้า .JS Editor 

จะทำให้เรากรอกข้อมูลได้ง่ายกว่าครับ ก็ให้ทำการกด SAVE เลยครับผม 

เป็นอันเสร็จสิ้นกับการสร้าง หลอดไฟแสดงสถานะ (Indicator Light) ครับผม

ลองกดเปิดปิดหลอดไฟผ่านปุ่มแล้วดูผลลัพธ์ที่เกิดขึ้นได้เลยครับ 

NETPIE Freeboard [Part1]

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 ซึ่งทำให้นักพัฒนาสามารถต่อยอดให้ดียิ่งขึ้นได้อีกด้วยครับ

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

ก็คือ 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 ด้วยครับผม