งานครั้งที่ 36 [iot#11 Anto] เริ่มต้นการใช้งาน Anto (ควบคุม LED)

[admin]

งานครั้งที่ 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


ส่วนจัดการเวปไซต์
2. เข้าเวปไซต์ https://www.anto.io คลิกที่ Sign IN สัหรับผู้ที่ลงทะเบียนแล้ว แต่ถ้าหากเคยล็อกอินเข้ามาแล้วปุ่มดังกล่าวจะเปลี่ยนเป็นชื่อ CONTROL PANEL


3. หากผู้ใช้งานยังไม่ได้ลงทะเบียนใช้งานให้เลื่อนลงมาด้านล่างเวปไซต์คลิกที่ SIGN UP เพื่อทำการลงทะเบียน


4. สร้าง Thing ดำเนินการดังนี้
   (1) หากยังไม่เคยสร้างในช่องรายการจะไม่มีรายการ Thing
   (2) คลิกที่ Thing
   (3) คลิกสร้าง Thing ใหม่


5. ใส่รายละเอียดของ Thing ที่ต้องการสร้าง
   (1) รายละเอียดของ Thing (ชื่อ Thing ห้ามเว้นวรรค)
   (2) คลิกสร้าง


6. สร้าง Channel โดยคลิกที่แว่นขยาย


7. หากยังไม่เคยสร้าง Channel ในช่องรายการจะไม่มี (1) ทำการคลิกที่ (2) เพื่อเริ่มสร้าง Channel


8. คลิกสร้าง Channel ( Thing 1 ตัวสามารถมี Channel หลายตัวได้)


9. ใส่รายละเอียดของ Channel
   (1) ชื่อ Channel
   (2) คำอธิบายของ Channel ที่สร้าง
   (3) เลือกชนิดของข้อมูลที่ Channel ใช้งาน (งานนี้เป็นสวิตช์ควบคุม LED)


10. จะได้ Channel ที่สามารถควบคุมได้ด้วยการคลิก ที่ทำงานเป็นแบบสวิตช์
    หากต้องการควบคุม LED จำนวนหลายตัวให้สร้าง Channel ตามจำนวน LED ที่ต้องการควบคุม


11. สร้าง Key ของ Thing (หน้าเวปไซต์ใช้คำว่า Key ส่วนในโค้ดโปรแกรมส่วนนี้ไปใช้ในคำว่า token)
   (1) คลิกที่ Key
   (2) คลิกสร้าง Key ใหม่


12. ดำเนินการสร้าง Key ใหม่
   (1) รายละเอียด Key (ค่านี้จะใช้แสดงหน้ารายการ Key)
   (2) เลือก Thing ที่ต้องการสร้าง Key
   (3) กำหนด Channel ที่ต้องการใช้งาน
   (4) คลิกสร้าง Key ใหม่


13. รายการ Key ที่ได้หลังจากการสร้าง


ค่าที่เอาไปใช้ในการเขียนโค้ดโปรแกรม
ต้องต้องนำค่าจากเวปไซต์ไปใส่ในโค้ดจำนวน 4 อย่างได้แก่
-USERNAME
-Key (Token)
-Thing
-Channel

14. UserName ดูได้จากเมนู Account ดังรูป


15. Key (Token) ต้องเลือกรายการ Key ที่สร้างให้เชื่อมโยงใน Thing ที่ต้องการใช้งาน
   (1)เข้าไปที่เมนู Key
   (2) คลิกคัดลอก แล้วนำไปวางในโค้ดโปรแกรม


16. Thing คลิกที่เมนู Thing เลือกชื่อที่ต้องการนำไปเขียนโปรแกรม


17 Channel สามารถเข้าไปดูรายการได้โดยคลิกที่แว่นขยายของ Thing


ส่วนจัดการโค้ด
18. การใช้งาน Anto ต้องใช้ไลบรารี่โดยเฉพาะ ทำการเพิ่มไลบรารี่เริ่มจาก


19. พิมพ์ช่องค้นหาว่า anto เลือกเวอร์ชั่นล่าสุดแล้วทำการติดตั้ง


20. แก้ค่าต่าง ๆ ของโค้ดโปรแกรมดังนี้
    (1) ใส่รายละเอียดของไวไฟที่บอร์ดควบคุมใช้เชื่อมต่อ
    (2) ใส่ค่า user(UserName), token(key),thing(Thing) ที่คัดลอกมาจากเวปไซต์จากข้อ 14-16


21. ใส่ค่า Channel ที่ต้องการควบคุม (เป็น Channel ที่ถูกสร้างไว้ในเวปไซต์ ดูได้จากข้อ 17)  หากมีจำนวน Channel ที่ต้องการรับเพิ่มให้เพิ่มคำสั่ง anto.sub("..."); โดยใส่ชื่อ Channel ที่ต้องการ


22. ในฟังก์ชั่นรับค่าจากเซิร์ฟเวอร์สามารถควบคุม LED ได้จากการตรวจสอบค่าที่ถูกส่งมาจาก Channel ในตัวอย่างนี้หากข้อความที่ส่งมาเป็นของ Channel "LED1" โดยค่าที่ส่งมาอยู่ในตัวแปรที่ชื่อว่า payload ทำการตรวจค่า payload เพื่อสั่งทำงาน LED


23. อธิบายคำสั่ง if แบบย่อจากข้อ 22


โค้ดโปรแกรม

โค๊ด: [Select]

#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 ดูผลการเชื่อมต่อกับเซิร์ฟเวอร์หากเชื่อมต่อได้จะเป็นดังรูป


25. ควบคุมการทำงานของบอร์ดได้จากการควบคุมจากหน้า Channel โดยเริ่มจากเข้าไปที่เมนู Thing ดังรูป


*หมายเหตุ การเชื่อมต่อกับเซิร์ฟเวอร์ได้หรือไม่ สามารถดูได้จากตัวแจ้งเตือนดังรูป
  (1) เชื่อมต่อได้ สามารถใช้งานได้ตามปกติ
  (2) เชื่อมต่อไม่ได้ หากเกิดจากฝ้่งเซิร์ฟเวอร์ให้รอสักระยะจนกว่าจะเชื่อมต่อได้จึงจะสามารถใช้งานได้


ออกแบบหน้า DashBoard
26. ออกแบบหน้า DashBoard (สำหรับต้องการออกแบบหน้าต่างควบคุมตามต้องการ)
   (1) เข้าไปที่เมนู Dashboard
   (2) คลิกสร้างใหม่


27. เลือกวิตเจ็ตที่ต้องการ ในงานนี้เลือกหลอดไฟและสวิตช์ดังรูป


28. ตั้งค่าวิตเจ็ต
   (1) ปรับขนาด
   (2) ตั้งค่าเชื่อมต่อ


29. เลือก Channel ที่ต้องการเชื่อมต่อ
   -ตั้งค่าหลอดไฟ (สามารถกำหนดสีของหลอดไฟระหว่างติดและดับได้ตามต้องการ)


   -ตั้งค่าสวิตช์ (สามารถกำหนดสีของสวิตช์ระหว่างเปิดและปิดได้ตามต้องการ)


27. หลังตั้งค่าเสร็จเมื่อคลิก Apply สามารถใช้งานได้ทันที



25. การเชื่อมต่อ