[IOT] สอนสร้าง "Smart Home" ด้วย NodeMCU V2 [Part 5]

สวัสดีครับ ในที่สุดก็มาถึง Part 5 กันแล้วนะครับ ^_^

ขอโทษที่ Part นี้ออกช้านิดนึงนะครับ เพราะพอดีผมมีธุระนิดหน่อย
แล้วก็พอดีผมแก้หน้าบล๊อกใหม่นิดนึงครับ 555+ เลยไม่มีเวลาเขียนครับ
สำหรับ Part นี้ก็ เราก็จะมาการใช้ NETPIE กันจริงๆจังๆแล้วครับ จบ Part นี้ไป
อุปกรณ์ของเราก็จะสามารถสั่งงานผ่านเว็บได้แล้วครับ ที่เหลือก็แค่เอาไปประกอบ
เข้ากับตัวถังสวิชต์และเดินระบบสายไฟกันนิดหน่อยครับ ^_^ ถ้าพร้อมแล้วก็ ลุยกันเลยครับ
หลังจากที่เราได้ทำความรู้จักกับ NETPIE ตามที่ผมเกริ่นนำไปใน Part 1 ไปแล้วนะครับ
ทีนี้เราก็จะมาเริ่มใช้งานกันเลย ถ้าพร้อมแล้วก็ เข้าไปที่เว็บนี้เลยครับ

https://netpie.io/

STEP 1: สมัครสมาชิคเว็บ NETPIE

พอเราเข้าไปที่เว็บ NETPIE ก็จะเจอหน้าแรกของเว็บครับ ให้กดที่ปุ่ม SIGN UP FREE ด้านบนเลยครับ

จากนั้นจะมาที่หน้าการสมัครครับ ก็ให้กรอกข้อมูลของเราลงไปครับ

หลังจากใส่ข้อมูลเรียบร้อยและกด SIGN UP แล้ว จะขึ้นแบบนี้ที่ด้านบนครับ

เพียงเท่านี้การสมัครสมาชิคก็เสร็จสิ้นแล้วครับ สามารถไปล๊อกอินเข้าระบบกันได้เลย

รหัสผ่าน จะถูกส่งมาทาง SMS เข้าโทรศัพท์เรา

ตามเบอร์โทรที่เรากรอกไปตอนสมัครนะครับ

ต่อไปก็ กดที่ LOG IN ข้างบนครับ

กรอก Username และ Password (ที่เราได้รับทาง SMS) เข้าไปแล้วกด LOGIN ครับผม

เท่านี้ก็ล๊อกอินเข้ามาในระบบแล้วครับ ^_^ พร้อมสำหรับขั้นตอนต่อไป

STEP 2: แอพพลิเคชั่น เกียร์ และคีย์

ที่นี้ก็จะมาถึง การสร้าง Application (แอพพลิเคชั่น) กันนะครับ Application ที่เราจะสร้างในตอนนี้

ไม่ใช่ App แบบในโทรศัพท์แบบพวก Facebook, Camera 360, B612 อะไรแบบนี้นะครับแต่เป็น 

สิ่งที่เหมือนเป็นตัวแทนของระบบของเรา ครับ (เช่น "ระบบสมาร์ทโฮมในบ้านของเซเรฟ")

ในระบบของเราก็จะสามารถ เพิ่มอุปกรณ์เข้าไปได้ โดยอุปกรณ์ของเรานั้นจะถูกเรียกว่า 

"Gear" (ปัจจุบันใช้คำว่า Things) ซึ่งอุปกรณ์ที่ว่านั้นก็อย่างเช่น ตัว NodeMCU 

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

สำหรับส่งข้อมูลค่าต่างๆ เช่นอุณหภูมิและความชื้น เป็นต้นครับ

 ใน  Application หนึ่งอาจจะมีหลายๆ อุปกรณ์ (หลายๆ Gear ก็ได้) และแต่ละ Gear ภายในระบบเดียวกัน

(ภายใน Application เดียวกัน) ก็จะสามารถสื่อสารกันเองระหว่างอุปกรณ์ได้ครับผม

ซึ่ง NETPIE เปิดให้เราสามารถใช้งานฟรีได้ถึง 100 อุปกรณ์เลยครับ!!!
 (ขอขอบคุณ NECTEC และ สวทช. อีกครั้งครับสำหรับโอกาสดีๆแบบนี้)

และแต่ละอุปกรณ์ (แต่ละ Gear) ก็จะมี Key เป็นของตัวเองครับ ซึ่ง Key นี้ก็จะเป็นเหมือน

สิ่งที่ใช้ระบุตัวตนของอุปกรณ์เราครับ (คล้ายๆกับเลขบัตรประจำตัวประชาชน) ครับ

แต่ละ Gear ก็จะมี Key เป็นของตัวเอง และก็จะไม่เหมือนกับของ Gear อื่นๆครับ

สรุปคำศัพท์สำคัญ:

APPLICATION = ตัวแทนของระบบที่มีอุปกรณ์ซึ่งติดต่อกันแบบ IoT ของเราครับ

GEAR = อุปกรณ์ที่อยู่ในระบบของเราครับ เช่นอุปกรณ์ NodeMCU V2 ตัวที่เรากำลังทำอยู่

KEY = รหัสที่ใช้ในการระบุตัวตน(คล้ายๆรหัสประจำตัว) ของอุปกรณ์ (ของ Gear แต่ละตัว) 

อธิบายแบบนี้ไปก็คงอาจจะไม่เข้าใจมาก TT เอาเป็นว่า มาสร้างกันเลยแล้วกันนะครับ

ขั้นแรกก็ กดที่ APPLICATION ตรงนี้เลยครับ

ต่อไปเราก็จะมาที่หน้า APPLICATION MANAGEMENT (การจัดการแอพพลิเคชัน) ครับ

ก็จะแสดงข้อมูลจำนวน Application ที่เราสร้างไว้ และจำนวนอุปกรณ์ (Gear หรือ Things) 

ในระบบของเราครับ (ตอนนี้ยังไม่มีอะไรซักอย่างครับ 555+) 

ก็ให้เริ่มสร้าง Application โดยกดตรงปุ่ม [+] ตามในภาพครับ

ใส่ชื่อ Application ของเราครับ เช่นในที่นี้ของผมตั้งเป็น ZerefSmartHome ครับ

จากนั้นเราก็จะได้ Application ของเราแล้วครับ โดยที่ชื่อที่เราตั้งเข้าไป จะเป็น APP ID

ของ Application เรานะครับ (จะได้นำไปใส่ในโค้ดครับ) ทีนี้ต่อไปเราก็จะมาสร้าง Key กันครับ

กดที่ปุ่ม [+] ตามในรูปเลยครับ

จากนั้นก็จะปรากฏหน้าต่างสำหรับการสร้าง Key ขึ้นมาครับ ก็ให้ทำการตั้งชื่อให้อุปกรณ์ของเราครับ

เช่นของผม ตั้งชื่อเป็น SmartNode1 (ประมาณว่ากล่องสวิชต์เปิดปิดไฟของเราชื่อ SmartNode ตัวที่ 1)

แล้วก็ทำการเลือก Type ให้เป็น Session Key จากนั้นก็กด CREATE เลยครับ

จากนั้นเราก็จะได้ Key สำหรับไว้ให้อุปกรณ์ของเราเอาไปใช้ในการสื่อสารแล้วครับ

ทีนี้ก็ให้กดที่ Key ที่สร้างไว้นะครับ ก็จะปรากฏข้อมูล Key ขึ้นมาครับ

หากจะเปลี่ยนชื่อของอุปกรณ์ ก็พิพม์ชื่อใหม่ด้านบน แล้วก็กดปุ่ม RENAME ครับ

ข้อมูลที่เราจะนำไปใช้ก็จะมี Key กับ Secret นะครับ ก็อบไปไว้ในไฟล์ Notepad 

แล้วเซฟไว้ก่อนเลยก็ได้ครับ เวลาจะนำมาใช้จะได้ง่าย

ทีนี้ต่อไปก็จะมาว่ากันเรื่องของโค้ดแล้วครับ ^_^

Key และ Secret เป็นสิ่งที่ไม่ควรเปิดเผยให้บุคคลอื่นนำไปใช้นะครับ 

เนื่องจากมันสามารถนำไปทำอะไรก็ได้ อาจมีผู้ไม่หวังดี หรือผู้ประสงค์ร้าย

นำไปใช้ในทางที่ผิดได้ครับ ซึ่งจะเป็นผลเสียกับเราครับผม 

ให้ระมัดระวังเรื่องการเปิดเผย Key ด้วยนะครับ

(Key ที่ผมสร้างเป็นตัวอย่างนี้จะผมถูกลบทิ้งด้วยนะครับ เพื่อไม่ผู้ใดให้นำไปใช้งานได้อีก)

STEP 3: การเตรียมโค้ด ฝั่ง Arduino

ทีนี้ก็จะกลับมาว่ากันที่เรื่องของโค้ด และ Arduino กันนะครับ โดยโค้ดทั้งหมดของเรานั้น

จะมีความคล้ายคลึงกับโปรเจค IoT ที่ NETPIE ได้ทำไว้แล้ว นั่นคือ SMART PLUG PROJECT ครับ

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

NETPIE SMART PLUG

ซึ่งจะเห็นได้ว่า มีโค้ดอยู่ 2 ชุดครับ โดยจะมี โค้ดฝั่ง Arduino และ โค้ดฝั่ง HTML5 ครับ

โค้ดฝั่ง Arduino: เป็นโค้ดที่จะถูกโหลดลงไปในอุปกรณ์ครับ จะเป็นโค้ดที่ทำหน้าที่ส่ง/รับ คำสั่งและสั่งให้อุปกรณ์ทำงานครับ (จะมีการใช้คำสั่งจาก Part 4 ในโค้ดนี้ครับ)

โค้ดฝั่ง HTML5: สำหรับโค้ดนี้ จะเป็นโค้ดที่ใช้ในการสร้างไฟล์เว็บเพจ เพื่อใช้เป็นส่วนติดต่อ (อินเตอร์เฟส) กับเราครับ คือจะเป็นโค้ดสำหรับหน้าเว็บที่จะมีสวิชต์ให้เราเอานิ้วจิ้มบนจอมือถือเพื่อส่งคำสั่งไปหา NodeMCU แล้วให้โค้ดฝั่ง Arduino รับไปสั่งการรีเลย์นั่นเองครับ

Microgear Library (สำหรับ Arduino)

ในโค้ดของ NETPIE นั้นจะมีการ Include Library ซึ่งจะเป็นการเพิ่มคำสั่งพิเศษเฉพาะของ NETPIE

เข้าไปเพื่อให้ Arduio สามารถใช้คำสั่งพิเศษเฉพาะของ NETPIE ได้ครับ

ดังนั้นเราจึงต้องทำการติดตั้ง Library ของ Microgear ก่อนครับ

ดาวน์โหลด Microgear Library (สำหรับ Arduino)

เข้าไปแล้วกดที่ Download ZIP ตรงนี้นะครับ

เมื่อดาวน์โหลดเสร็จแล้วก็ทำการเปิดไฟล์ แล้วทำการแตกเอาโฟลเดอร์ 

microgear-esp8266-arduino-master ไปวางไว้ในโฟล์เดอร์ Libraries ของ Arduino เลยครับ

เพียงเท่านี้ก็เสร็จสิ้นแล้วนะครับ กับการติดตั้ง Microgear Library ของ Arduino ครับ

โค้ด NETPIE Smart Plug

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

Source Code (โค้ดต้นฉบับ) จากในลิ้งค์ข้างล่างนี้มาก่อนครับ

ไฟล์โค้ดต้นฉบับ NETPIE SMART PLUG

จากนั้นก็แตกไฟล์ออกมานะครับ จะมี 2 โฟลเดอร์นะครับ ก็จะมีโค้ดฝั่ง Arduino กับ 

โค้ดฝั่ง HTML5 ครับ โดยเราจะมาเริ่มแก้โค้ดฝั่ง Arduino กันก่อนนะครับ 

ก็ทำการเปิดไฟล์ NETPIE_SmartPlug.ino ที่อยู่ในโฟล์เดอร์โค้ดฝั่ง Arduino ได้เลย

เมื่อเปิดไฟล์โค้ดขึ้นมาแล้วก็ต้องมาทำการแก้ไขกันนิดหน่อยครับ

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

ก็ให้ใส่ข้อมูลต่างๆ ตามที่บอกไว้ในรูปข้างบนครับ เช่นของผมใส่แล้วได้แบบนี้ครับ

แล้วทีนี้ต่อไป เราก็จะไปแก้ไขชุดคำสั่งกันนะครับ ก็ให้เลื่อนลงไป ประมาณบรรทัดที่ 37 ก็จะพบกับชุดคำสั่งที่ควบคุมรีเลย์ให้เปิด,ปิด ดังนี้ครับผม (คล้ายๆกับใน Part 4 เลย)

เนื่องจากเราต่อ Relay ที่ขา D6 ก็ให้ทำการเปลี่ยนตรงคำว่า relayPin ให้เป็น D6 ครับ

และเนื่องจากผมใส่ลำโพงเปียโซเข้าไปด้วย ผมจึงจะเพิ่มคำสั่งให้เปียโซดังเป็นเวลา 0.5 วินาทีด้วย

โดยอาศัยความรู้เรื่องคำสั่งจาก Part 4 ซึ่งโค้ดที่แก้เสร็จแล้วก็จะมีหน้าตาแบบนี้ครับผม

(ผมขอตีบรรทัดของพวกวงเล็บปีกกาใหม่ให้ดูง่ายขึ้นนะครับ)

ทีนี้ให้เราเลื่อนลงมาอีก จนเจอ void setup() ครับ เราจะเจอคำสั่ง pinMode ของรีเลย์อยู่ในนั้น

ก็ให้ทำการเปลี่ยนตรง relayPin ให้เป็น D6 ตามที่เราได้ต่อวงจรไว้ครับผม และตรงนี้ผมก็จะเพิ่มคำสั่งสำหรับลำโพงเปียโซที่เราต่อไว้ที่ D5 ลงไปด้วยพร้อมกับเพิ่มคำสั่งให้ลำโพงเปียโซดับไว้ก่อนครับ (ไม่งั้นพอเปิดบอร์ดมาเปียโซจะร้องทันทีครับ)พอแก้แล้วผมก็ได้คำสั่งทั้งหมดเป็นแบบนี้ครับผม ^_^

ทีนี้ก็ให้ทำการกด Compile เพื่อตรวจสอบดูว่าโค้ดของเรามีปัญหาที่จุดไหนหรือเปล่า

ก็ให้ทำการตรวจสอบว่าเราพิมพ์ถูกไหม มีปีกกาตัวไหนหายหรือเปล่า หากไม่มีปัญหาอะไร

ก็ กด Upload (กด Ctrl+U) ได้เลยครับ (อย่าลืม Save ไฟล์ไว้ด้วยนะครับ  เผื่อแก้ 555+)

เท่านี้ก็เรียบร้อยแล้วครับ สำหรับการเตรียมโค้ดฝั่ง Arduino ของ NodeMCU V2 ต่อไปก็จะเป็นการเตรียมโค้ดฝั่งสั่งการควบคุมที่เป็น HTML 5 กันแล้วครับ ^_^

STEP4: การเตรียมโค้ด ฝั่ง HTML5

ครับ ทีนี้ก็จะมาถึงการเตรียมโค้ดฝั่ง HTML5 กันนะครับ สำหรับโค้ดฝั่งนี้จะเป็น

โค้ดสำหรับไฟล์หน้าเว็บที่เราจะใช้สำหรับกดปุ่มเพื่อส่งคำสั่งเปิดปิดผ่านอินเตอร์เน็ต ไปหาอุปกรณ์ของเรานะครับ ก็ให้ทำการเปิดไฟล์ index.html ที่อยู่ในโฟล์เดอร์ โค้ดฝั่ง HTML5

โดยให้ทำการเปิดด้วยโปรแกรมพวก Text-Editor เช่นโปรแกรม Notepad ครับแล้วเลื่อนหาโค้ดส่วนนี้ครับ หรือจะกด Ctrl+F ค้นหาคำว่า APPKEY ก็ได้ครับ 

แล้วก็ทำการเอา KEY กับ SECRET และ APP ID ที่เราไปสร้างไว้ใน NETPIE มาใส่ลงไปครับ

เสร็จแล้วก็กด File > Save เลยครับ

ยังไม่เสร็จนะครับ ยังขาดไปอย่างนึง นั่นคือ Microgear Library (ของฝั่ง HTML 5) ครับผม

ซึ่งไฟล์นี้จะต้องแยกมาดาวน์โหลดในภายหลัง (แยกกับเพื่อน)

เนื่องจากทาง NECTEC จะมีการพัฒนาและแก้ไขปรับปรุง Library นี้อยู่เรื่อยๆครับผม

ก็ให้ทำการ Download ไฟล์ Microgear Library สำหรับ HTML5

จากลิ้งค์ด้านล่างนี้ มาลงไว้ในโฟล์เดอร์ที่มีไฟล์ HTML ของเราครับ

ดาวน์โหลด Microgear Library สำหรับ HTML5

กดที่ Download ZIP ด้านบนตรงนี้เลยะครับ

เมื่อได้ไฟล์มาแล้วก็ทำการเปิดไฟล์ แล้วเข้าไปแตกเอาไฟล์ microgear.js ไปวางไว้ในโฟล์เดอร์ โค้ดฝั่ง HTML 5 (โฟล์เดอร์ที่มีไฟล์ index.html ของเราอยู่) ครับ

เพียงเท่านี้ก็เสร็จแล้วครับ สามารถดับเบิ้ลคลิกเพื่อเปิดไฟล์ index.html ของเราเข้าไปได้เลย เมื่อเปิดไฟล์แล้วก็จะพบกับหน้าเว็บหน้าตาแบบนี้ครับ 

หมายเหตุ: ต้องเปิดบอร์ด NodeMCU V2 ของเรา และรอให้มันเชื่อมต่อกับ WiFi ให้เรียบร้อยก่อนนะครับถึงจะมีสวิชต์ขึ้นมา ถ้าไม่มีสวิชต์ขึ้นมาก็แสดงว่า NodeMCU V2 ต่อไวไฟของเราไม่ได้ครับให้กลับไปเช็คใน Code ฝั่ง Arduino ว่าเราใส่ชื่อ WiFi กับรหัส WiFi ถูกต้องหรือเปล่า

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

นี่คือผลลัพธ์ของบอร์ดผมครับ ^_^

ก็จบแล้วนะครับสำหรับ Part 5 กับการใช้ NETPIE และตอนนี้อุปกรณ์ของเราก็สามารถ

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

เข้ากับชุดสวิชต์ไฟ และนำไปติดตั้งกับหลอดไฟแล้วครับผม จากนี้ไปก็จะไม่มีอะไรยากไปกว่านี้แล้วครับ55555+ เพราะเรื่องราวเกี่ยวกับโค้ดอันแสนวุ่นวายได้ผ่านไปแล้วครับ

ทีนี้ก็เหลือแค่การประกอบ และการต่อวงจรแล้วครับ เฮ!!!!! พบกันใหม่ใน Part ต่อไปนะครับ ต่อไปนี่ก็เหลือแค่การเดินระบบไฟแล้วครับ ซึ่งขั้นตอนต่อไปจะเป็นการทำงานกับไฟบ้าน จะมีความอันตรายนะครับ ต้องทำด้วยความระมัดระวังกันหน่อยนึงสำหรับ Part นี้ก็จบไว้เพียงเท่านี้นะครับ สวัสดีครับ ^_^

อ่านต่อ PART 6 (END)