งานครั้งที่ 36 [iot#11 Anto ] เริ่มต้นการใช้งาน Anto (ควบคุม LED)
Anto เป็นเวปไซต์ที่สร้างขึ้นเพื่อให้บริการทางด้าน iot เช่นเดียวกับหลาย ๆ เวปไซต์ มีการออกแบบให้มีการใช้งานที่ง่ายซึ่งงานครั้งนี้เป็นการแนะนำการใช้งานเบื้องต้น
คอนเซ็ปต์หลักของงาน
เซิร์ฟเวอร์ส่งค่า 0,1 จากการคลิกหน้าเวปไซต์เข้ามายังบอร์ดเพื่อควบคุมการติดดับของ LED
[ขั้นตอนการดำเนินการ]
-ลงทะเบียนใช้งานเวปไซต์ Anto
-สร้าง Thing
-สร้าง Channel (Channel คือช่องทางการสื่อสารซึ่งอยู่ภายใน Thing)
-สร้าง Key รหัสลับของ Thing
-นำค่า Thing, Channel, Key มาเขียนโค้ดเพื่อส่งข้อมูลขึ้นเซิร์ฟเวอร์
-ออกแบบหน้าเวปสำหรับใช้สื่อสารกับบอร์ด
ซึ่งรายละเอียดเป็นดังนี้
1. วงจรที่ใช้ทดลอง ทั้งที่เป็นบอร์ด NodeMCU และ WeMOS D1 mini
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/1.png)
ส่วนจัดการเวปไซต์
2. เข้าเวปไซต์ https://www.anto.io คลิกที่ Sign IN สัหรับผู้ที่ลงทะเบียนแล้ว แต่ถ้าหากเคยล็อกอินเข้ามาแล้วปุ่มดังกล่าวจะเปลี่ยนเป็นชื่อ CONTROL PANEL
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/2.png)
3. หากผู้ใช้งานยังไม่ได้ลงทะเบียนใช้งานให้เลื่อนลงมาด้านล่างเวปไซต์คลิกที่ SIGN UP เพื่อทำการลงทะเบียน
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/3.png)
4. สร้าง Thing ดำเนินการดังนี้
(1) หากยังไม่เคยสร้างในช่องรายการจะไม่มีรายการ Thing
(2) คลิกที่ Thing
(3) คลิกสร้าง Thing ใหม่
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/4.png)
5. ใส่รายละเอียดของ Thing ที่ต้องการสร้าง
(1) รายละเอียดของ Thing (ชื่อ Thing ห้ามเว้นวรรค)
(2) คลิกสร้าง
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/5.png)
6. สร้าง Channel โดยคลิกที่แว่นขยาย
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/6.png)
7. หากยังไม่เคยสร้าง Channel ในช่องรายการจะไม่มี (1) ทำการคลิกที่ (2) เพื่อเริ่มสร้าง Channel
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/7.png)
8. คลิกสร้าง Channel ( Thing 1 ตัวสามารถมี Channel หลายตัวได้)
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/8.png)
9. ใส่รายละเอียดของ Channel
(1) ชื่อ Channel
(2) คำอธิบายของ Channel ที่สร้าง
(3) เลือกชนิดของข้อมูลที่ Channel ใช้งาน (งานนี้เป็นสวิตช์ควบคุม LED)
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/9.png)
10. จะได้ Channel ที่สามารถควบคุมได้ด้วยการคลิก ที่ทำงานเป็นแบบสวิตช์
หากต้องการควบคุม LED จำนวนหลายตัวให้สร้าง Channel ตามจำนวน LED ที่ต้องการควบคุม
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/10.png)
11. สร้าง Key ของ Thing (หน้าเวปไซต์ใช้คำว่า Key ส่วนในโค้ดโปรแกรมส่วนนี้ไปใช้ในคำว่า token)
(1) คลิกที่ Key
(2) คลิกสร้าง Key ใหม่
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/11.png)
12. ดำเนินการสร้าง Key ใหม่
(1) รายละเอียด Key (ค่านี้จะใช้แสดงหน้ารายการ Key)
(2) เลือก Thing ที่ต้องการสร้าง Key
(3) กำหนด Channel ที่ต้องการใช้งาน
(4) คลิกสร้าง Key ใหม่
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/12.png)
13. รายการ Key ที่ได้หลังจากการสร้าง
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/13.png)
ค่าที่เอาไปใช้ในการเขียนโค้ดโปรแกรม
ต้องต้องนำค่าจากเวปไซต์ไปใส่ในโค้ดจำนวน 4 อย่างได้แก่
-USERNAME
-Key (Token)
-Thing
-Channel
14. UserName ดูได้จากเมนู Account ดังรูป
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/14.png)
15. Key (Token) ต้องเลือกรายการ Key ที่สร้างให้เชื่อมโยงใน Thing ที่ต้องการใช้งาน
(1)เข้าไปที่เมนู Key
(2) คลิกคัดลอก แล้วนำไปวางในโค้ดโปรแกรม
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/15.png)
16. Thing คลิกที่เมนู Thing เลือกชื่อที่ต้องการนำไปเขียนโปรแกรม
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/16.png)
17 Channel สามารถเข้าไปดูรายการได้โดยคลิกที่แว่นขยายของ Thing
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/17.png)
ส่วนจัดการโค้ด
18. การใช้งาน Anto ต้องใช้ไลบรารี่โดยเฉพาะ ทำการเพิ่มไลบรารี่เริ่มจาก
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/18.png)
19. พิมพ์ช่องค้นหาว่า anto เลือกเวอร์ชั่นล่าสุดแล้วทำการติดตั้ง
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/19.png)
20. แก้ค่าต่าง ๆ ของโค้ดโปรแกรมดังนี้
(1) ใส่รายละเอียดของไวไฟที่บอร์ดควบคุมใช้เชื่อมต่อ
(2) ใส่ค่า user(UserName), token(key),thing(Thing) ที่คัดลอกมาจากเวปไซต์จากข้อ 14-16
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/20.png)
21. ใส่ค่า Channel ที่ต้องการควบคุม (เป็น Channel ที่ถูกสร้างไว้ในเวปไซต์ ดูได้จากข้อ 17) หากมีจำนวน Channel ที่ต้องการรับเพิ่มให้เพิ่มคำสั่ง anto.sub("..."); โดยใส่ชื่อ Channel ที่ต้องการ
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/21.png)
22. ในฟังก์ชั่นรับค่าจากเซิร์ฟเวอร์สามารถควบคุม LED ได้จากการตรวจสอบค่าที่ถูกส่งมาจาก Channel ในตัวอย่างนี้หากข้อความที่ส่งมาเป็นของ Channel "LED1" โดยค่าที่ส่งมาอยู่ในตัวแปรที่ชื่อว่า payload ทำการตรวจค่า payload เพื่อสั่งทำงาน LED
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/22.png)
23. อธิบายคำสั่ง if แบบย่อจากข้อ 22
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/23.png)
โค้ดโปรแกรม
#include <AntoIO.h>
const char *ssid = "wifi name";
const char *pass = "wifi password";
const char *user = "anto username";
const char *token = "key of thing";
const char *thing = "thing name";
AntoIO anto(user, token, thing); /* initialize AntoIO instance */
void setup(){
pinMode(D1,OUTPUT);
Serial.begin(115200);
delay(10);
Serial.println();
Serial.print("Anto library version: ");
Serial.println(anto.getVersion());
Serial.print("\nTrying to connect ");
Serial.print(ssid);
Serial.println("...");
anto.begin(ssid, pass, messageReceived);
Serial.println("\nConnected Anto done");
anto.sub("LED1"); /*Subscript Channels "LED1"*/
}
void loop(){
anto.mqtt.loop();
}
// a callback function for arriving data.
void messageReceived(String thing, String channel, String payload) {
Serial.print("Recieved: ");
Serial.print(thing);
Serial.print("/");
Serial.print(channel);
Serial.print("-> ");
Serial.println(payload);
if(channel.equals("LED1"))
digitalWrite(D1,(payload == "1")? 1:0);
}
24. หลังจากการ upload โค้ด เปิดหน้า Serial monitor ดูผลการเชื่อมต่อกับเซิร์ฟเวอร์หากเชื่อมต่อได้จะเป็นดังรูป
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/24.png)
25. ควบคุมการทำงานของบอร์ดได้จากการควบคุมจากหน้า Channel โดยเริ่มจากเข้าไปที่เมนู Thing ดังรูป
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/25.png)
*หมายเหตุ การเชื่อมต่อกับเซิร์ฟเวอร์ได้หรือไม่ สามารถดูได้จากตัวแจ้งเตือนดังรูป
(1) เชื่อมต่อได้ สามารถใช้งานได้ตามปกติ
(2) เชื่อมต่อไม่ได้ หากเกิดจากฝ้่งเซิร์ฟเวอร์ให้รอสักระยะจนกว่าจะเชื่อมต่อได้จึงจะสามารถใช้งานได้
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/connect.png)
ออกแบบหน้า DashBoard
26. ออกแบบหน้า DashBoard (สำหรับต้องการออกแบบหน้าต่างควบคุมตามต้องการ)
(1) เข้าไปที่เมนู Dashboard
(2) คลิกสร้างใหม่
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/26.png)
27. เลือกวิตเจ็ตที่ต้องการ ในงานนี้เลือกหลอดไฟและสวิตช์ดังรูป
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/27.png)
28. ตั้งค่าวิตเจ็ต
(1) ปรับขนาด
(2) ตั้งค่าเชื่อมต่อ
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/28.png)
29. เลือก Channel ที่ต้องการเชื่อมต่อ
-ตั้งค่าหลอดไฟ (สามารถกำหนดสีของหลอดไฟระหว่างติดและดับได้ตามต้องการ)
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/29.png)
-ตั้งค่าสวิตช์ (สามารถกำหนดสีของสวิตช์ระหว่างเปิดและปิดได้ตามต้องการ)
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/30.png)
27. หลังตั้งค่าเสร็จเมื่อคลิก Apply สามารถใช้งานได้ทันที
(http://www.praphas.com/PhotoForum/iot/Lab-36-AntoLED/31.png)
25. การเชื่อมต่อ
(http://www.praphas.com/PhotoForum/iot/Lab-27-Blynk4LED/18.jpg)