สร้างแอพแอนดรอยด้วย App Inventor รับ-ส่งข้อมูลผ่าน NETPIE

Share
Share


Share
powered by social2s

สวัสดีครับ Laughing กลับมาพบกันอีกแล้วครับ ในบทความนี้ เราจะมาลองใช้ ESP8266 (ใช้บอร์ด NodeMCU) ไปเชื่อมต่อกับ NETPIE แล้วใช้แอพแอนดรอยที่สร้างโดย App Inventor เป็นตัวควบคุม - รับส่งข้อมูล ช่วยให้ท่านผู้อ่านสามารถนำไปประยุกต์สร้างแอพพลิเคชั่น / อุปกรณ์ IoT ที่มีความสามารถสูงขึ้นได้

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

หัวเรื่องที่จะศึกษา

  • รู้จักกับ NETPIE เบื้องต้น สมัครสมาชิก เข้าสู่ระบบ สร้างแอพพลิเคชั่น
  • การใช้งาน ESP8266 / ESP8285 ร่วมกับ NETPIE
  • การใช้งาน REST API ของ NETPIE
  • การเขียนแอพพลิเคชั่นแอนดรอยด้วย App Inventor

NETPIE

NETPIE เป็นบริการตัวกลางในการรับ-ส่งข้อมูลระหว่างอุปกรณ์ผ่านอินเตอร์เน็ตจากทาง NECTEC สามารถใช้งานได้ฟรี ตัวแกนหลักของบริการเป็น MQTT Broker ทำให้ไลบารี่ของ MQTT สามารถนำมาใช้งานกับ NETPIE ได้ด้วย

์NETPIE มีไลบารี่ที่ใช้ในการเชื่อมต่อในหลากหลายอุปกรณ์ หลายภาษา เช่น HTML5 (Websocket) Arduino+ESP8266 NodeJS Python และหากเป็นภาษาอื่น ๆ สามารถใช้งานผ่าน REST API

ข้อจำกัด REST API ของ NETPIE สามารถร้องขอข้อมูลได้ถี่มากที่สุด 1 วินาที หากน้อยกว่านั้น จะมี Error แจ้งเตือนออกมา

เรียนรู้การใช้งาน NETPIE เบื่องต้น

ก่อนที่เราจะไปเริ่มใช้งานกัน เราต้องมารู้ก่อนว่า NETPIE ทำงานอย่างไร

NETPIE จะเหมือนกับตัวช่วยสร้างห้องแชทขึ้นมา สามารถเปรียบเทียบได้กับ LINE เมื่อเราสร้างสิ่งที่เรียกว่า APPLICATIONS ขึ้นมาใหม่ ก็จะเหมือนกับเราสร้างแอคเค้า LINE ขึ้นมาใหม่อีกแอคเค้าหนึ่ง

ในแอคเค้า 1 แอคเค้าของ NETPIE สามารถสร้าง APPLICATIONS ได้ไม่จำกัด

1 APPLICATIONS จะมี Key ที่เปรียบเสมือนรหัสผ่านเข้า LINE ได้ไม่จำกัด (สร้างได้เอง) แบ่งออกเป็น 2 ชนิด

  • Device Key - สำหรับใช้กับอุปกรณ์ที่ไม่สามารถแก้ไข Key ได้ง่าย เช่น ใช้กับ ESP8266 ที่นำไปติดตั้งเพียงครั้งเดียว ไม่นำมาแก้ไขโค้ดได้อีก ควรใช้ 1 อุปกรณ์ ต่อ 1 Device Key เพราะจะไม่สามารถนำ Key เดียวกัน มาเชื่อมต่อกับ NETPIE พร้อมกันได้
  • Session Key - เปรียบเสมือนรหัสผ่านสาธาณะ สามารถใช้ซ้ำได้ไม่จำกัด ทางผู้พัฒนาแนะนำให้นำไปใช้งานกับ HTML5 เพราะ Key ถูกเปิดเผยเป็นสาธาณะ สามารถใช้ Key เดียวกัน เชื่อมต่อเข้ามายัง NETPIE พร้อมกันได้

ใน 1 APPLICATIONS หรือเทียบได้กับแอคเค้า LINE จะสามารถสร้างห้องแชทได้ไม่จำกัด โดยมีสิ่งที่เรียกว่า Topic เป็นตัวกำหนดชื่อห้องแชท จะอยู่ในรูปพาท (Path) เช่น /myhome/lamp1 หรือ /lamp1

สิทธิ์ในการรับรู้ และส่งข้อมูลเข้าไปใน Topic ทุก Key สามารถส่งเข้าไปได้ แต่สิทธิ์ในการรับรู้ (รับข้อมูลที่ผู้อื่นส่ง) ขึ้นอยู่กับการ subscribe ไปที่ topic ที่ต้องการ

การ subscribe จะสามารถทำได้ทั้งการขอการรับรู้เฉพาะ Topic เช่น subscribe ไปที่ /lamp1 ซึ่งจะได้รับข้อความที่มีการส่งมาที่ Topic /lamp1 ทั้งหมด นอกจากนี้ยังไมีการใช้สัญลักษณ์พิเศษช่วย เช่น /+/lamp1 ในเครื่องหมาย + จะหมายถึง อะไรก็ได้ เช่น /myhome/lamp1 หรือ /home2/lamp2 หากมีการส่งข้อความไปที่ topic นี้ จะได้รับข้อความทั้งหมด (ในการรับข้อความ จะมี 2 ส่งที่ส่งมา คือ Topic ของข้อความ และตัวข้อความ) นอกจากนี้ยังมี # เช่น /# จะหมายถึงรับข้อความทุก Topic ที่มีการส่งเข้ามา หรือ /myhome/# จะหมายถึงรับทุกข้อความที่ topic มีคำว่า /myhome นำหน้า เช่น /myhome/lamp1 , /myhome/led , /myhome/temp1 เป็นต้น

สมัครสมาชิกกับ NETPIE

สมัครสมาชิกได้ที่ลิ้ง https://netpie.io/sign_up

ในหน้านี้จะให้คุณกรอกข้อมูลส่วนตัวต่าง ๆ เช่น ชื่อ อีเมล์ บริษัท (เป็นบุคคลทั่วไป กรอก N/A) โดยรหัสผ่านจะส่งมาทาง SMS ในเบอร์มือถือที่ท่านได้กรอกไว้ ในรูปแบบ

Your one-time password for NETPIE is 25590620XXXX

หลังได้รับ SMS แจ้งรหัสผ่านแล้ว ให้คลิกที่ปุ่ม Login แล้วกรอก Email ที่ได้กรอกไว้ตอนสมัครสมาชิกลงในช่อง USERNAME IR EMAIL ADDRESS จากนั้นกรอกรหัสผ่านที่รับใน SMS ลงในช่อง PASSWORD

จากนั้น เลื่อนเมาส์ไปด้านมุมบนขวา และจะมีเมนูขึ้นมา เลือก CHANGE PASSWORD

กรอกรหัสผ่านปัจจุบัน (รหัสผ่านที่ได้รับจาก SMS) ลงในช่อง CURRENT PASSWORD แล้วตั้งรหัสผ่านใหม่ลงในช่อง NEW PASSWORD และ CONFIRM PASSWORD จากนั้นกด SAVE

การสร้าง APPLICATIONS

นำเม้าส์เลื่อนไปที่ RESOURCES เลือก APPLICATIONS

กดที่เครื่องหมาย + ทางด้านขวา

ตั้งชื่อ ตัวอย่างผมตั้งเป็น NETPIE2LED จากนั้นกด CREATE

จากนั้นสร้าง Key โดยกดที่เครื่องหมาย + ทางด้านขวา

ตั้งชื่อ Key ตัวอย่างผมตั้งว่า ESP8266 แล้วเลือก Device Key ในช่องที่ 2 จากนั้นกด CREATE

กดเครื่องหมาย + อีกครั้ง แต่ครั้งนี้สร้าง Session Key

รวม ๆ แล้ว เราก็จะมีอยู่ 2 Key สำหรับใส่ใน ESP8266 กับใส่ในแอพพลิเคชั่น

กดที่ Device Key (ตัวอย่างของผม ESP8266) เก็บตรง Key และ Secret (กดรูปดวงตาในด้านขวาก่อน) ไว้ ข้อความ 2 ตัวนี้ จะถูกนำไปกรอกในโปรแกรม Arduino ตอนเขียนโปรแกรมลง ESP8266

แล้วกด CANCEL

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

รู้หรือไม่ ? หากดูดี ๆ จะพบว่า REST API auth เกิดจากการนำ Key มารวมกับ Secret โดยคั่นด้วยเครื่องหมาย : นั่นเอง

การใช้งาน ESP8266 ร่วมกับ NETPIE

ผมเลือกใช้ NodeMCU เพราะบนบอร์ด NodeMCU มีหลอด LED ต่อแบบ Active LOW อยู่ที่ขา D0

ในโค้ดโปรแกรม ได้มีการเขียนให้รับข้อมูลมาจาก NETPIE ใน Topic /led หากมีการส่งข้อความมาว่า ON หลอด LED บนบอร์ด NodeMCU จะติดขึ้นมา หากมีข้อความส่งมาว่า OFF หลอด LED จะดับ และหากมีการส่งมาว่า GET จะมีการตอบกลับสถานะปัจจุบันของหลอด LED เป็น ON หรือ OFF

ก่อนอื่นเลย ต้องติดตั้ง บอร์ด ESP8266 เข้ากับ Arduino ก่อน จากนั้นติดตั้งไลบารี่ microgear โดยมีขั้นตอนในการติดตั้งดังนี้

  • ดาว์นโหลดไลบารี่จาก https://github.com/netpieio/microgear-esp8266-arduino/archive/master.zip
  • คลายไฟล์แล้วนำไปวางที่โฟลเดอร์ libraries (เลือกวางไว้ที่ Documents\Arduino\libraries หรือ C:\Program Files[ (x86)]\Arduino\libraries)

จากนั้นให้ก๊อบโค้ดด้านล่างนี้ลงโปรแกรม Arduino แล้วแก้ไขดังนี้

  • บรรทัดที่ 4 แก้ {YOUR_WIFI_NAME} เป็นชื่อ WiFi ที่ต้องการใช้ ESP8266 ไปเชื่อมต่อด้วย
  • บรรทัดที่ 5 แก้ {YOUR_WIFI_PASSWORD} เป็นรหัสผ่าน WiFi
  • บรรทัดที่ 7 แก้ {NETPIE_APPNAME} เป็นชื่อ APPLICATIONS ตัวอย่างที่ผมตั้งไว้คือ NETPIE2LED
  • บรรทัดที่ 8 แก้ {NETPIE_KEY} เป็น Device Key ตรงส่วน Key จากใน NETPIE
  • บรรทัดที่ 9 แก้ {NETPIE_SECRET} เป็น Device Key ตรงส่วน Secret จากใน NETPIE
  #include <ESP8266WiFi.h>
  #include <MicroGear.h>
   
  const char* ssid = "{YOUR_WIFI_NAME}";
  const char* password = "{YOUR_WIFI_PASSWORD}";
   
  #define APPID "{NETPIE_APPNAME}"
  #define KEY "{NETPIE_KEY}"
  #define SECRET "{NETPIE_SECRET}"
  #define ALIAS "esp8266"
   
  #define LED_PIN D0
   
  WiFiClient client;
  MicroGear microgear(client);
   
  long timer = 0;
  bool reconnect = false;
   
  void onMsghandler(char *topic, uint8_t* msg, unsigned int msglen) {
  String iMsg = "";
  for (int i=0;i<msglen;i++) iMsg += (char)msg[i];
   
  Serial.println(topic);
  Serial.println(iMsg);
   
  if (iMsg == "GET") {
  microgear.chat("/led", digitalRead(LED_PIN) == HIGH ? "ON" : "LOW");
  } else if (iMsg == "ON") {
  digitalWrite(LED_PIN, LOW);
  } else {
  digitalWrite(LED_PIN, HIGH);
  }
  }
   
  void onConnected(char *attribute, uint8_t* msg, unsigned int msglen) {
  Serial.println("Connected to NETPIE...");
  microgear.setName("led");
  }
   
   
  void setup() {
  pinMode(LED_PIN, OUTPUT);
   
  Serial.begin(115200);
  delay(10);
   
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);
   
  WiFi.begin(ssid, password);
   
  while (WiFi.status() != WL_CONNECTED) {
  delay(500);
  Serial.print(".");
  }
   
  Serial.println("");
  Serial.println("WiFi connected");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
   
  /* Event listener */
  microgear.on(MESSAGE,onMsghandler);
  microgear.on(CONNECTED,onConnected);
   
  microgear.init(KEY,SECRET,ALIAS);
   
  }
   
  void loop() {
  if (microgear.connected()) microgear.loop();
   
  if (microgear.connected() && !reconnect) {
  reconnect = true;
  Serial.println("\nConnected");
  } else if (!microgear.connected() && reconnect) {
  if ((millis()-timer)%500 == 0) Serial.print(".");
  if ((millis()-timer)>5000) reconnect = false;
  } else if (!microgear.connected() && !reconnect) {
  Serial.println("connection lost, reconnect...");
  microgear.connect(APPID);
  timer = millis();
  }
  }
view rawNETPIE_LED.ino hosted with ❤ by GitHub

เลือกบอร์ด เลือกพอร์ต จากนั้นกดอัพโหลดโปรแกรมได้เลย

เมื่ออัพโหลดเสร็จแล้ว กด Serial Moniter ขึ้นมา ปรับเป็น 115200 หากขึ้นประมาณดังรูป แสดงว่าสามารถเชื่อมต่อกับ NETPIE แล้วพร้อมรับ - ส่งข้อมูลแล้ว

ทดสอบใช้งาน REST API ส่งข้อความเข้า NETPIE

ทำไมต้อง REST API ? เพราะ App Inventor ที่ในบทความนี้ เราจะมาใช้เขียนแอพพลิเคชั่นแอนดรอย ไม่รองรับ NETPIE โดยตรง จึงต้องใช้งานผ่าน REST API แทนครับ

เข้าไปที่เว็บไซต์ http://requestmaker.com/

ในมุมด้านขวาบน เลือก PUT ในช่อง Request URL ให้กรอกในรูปแบบ https://api.netpie.io/topic/{NETPIE_APPNAME}/gearname/led?auth={REST API auth}  โดยแก้ {NETPIE_APPNAME} เป็นชื่อ APPLICATIONS แก้ {REST API auth} เป็น REST API auth ของ Session Key กรอก Request Data เป็น ON OFF หรือ GET แล้วกด Submit

รอซักครู่

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

สร้างแอพพลิเคชั่นแอนดรอยด้วย App Inventor

App Inventor เป็นเว็บแอพพลิเคชั่นที่สร้างโดย Google ร่วมมือกับสถาบัน MIT แต่ภายหลัง Google ถอนตัว แล้วให้สถาบัน MIT เป็นผู้พัฒนาต่อเอง โดยเน้นไปในทางด้านการศึกษา ให้เด็ก ๆ สามารถเรียนรู้การเขียนแอพพลิเคชันแอนดรอยแบบง่าย ๆ โดยไม่ต้องเขียนโค้ด ไม่ต้องใช้ภาษา Java แต่ใช้การเขียนในรูปแบบ Block เพื่อให้เข้าใจง่าย ในขณะที่ทุก Block ที่นำมาวาง จะแฝงคำสั่ง / รูปแบบ โค้ดของโปรแกรมเข้าไปด้วย เพื่อให้สามารถนำไปต่อยอด ทำความเข้าใจการเขียนแอพพลิเคชั่นแอนดรอยด้วยภาษา Java ต่อไป

App Inventor เวอร์ชั่นที่ 2 ยังอิงอยู่กับแอนดรอยเวอร์ชั่นเก่า ตั้งแต่แอนดรอยประมาณเวอร์ชั่น 2.0 ทำให้หน้า UI ของแอพพลิเคชั่นที่สร้างขึ้นมา ยังอิงอยู่กับรูปแบบเก่า ๆ การใช้งานจึงควรใช้เพื่อเรียนรู้ในขั้นต้น เตรียมพร้อมสำหรับการต่อยอดไปสร้างแอพพลิเคชั่นด้วยภาษา Java หรือภาษาอื่น ๆ ที่ Google Support ต่อไป

ด้วยความง่ายต่อเรียนรู้และใช้งาน ในบทความนี้จึงเลือก App Inventor มาให้ท่านผู้อ่านได้ลองใช้งานกันครับ

เริ่มต้น เข้าไปที่เว็บไซต์ http://appinventor.mit.edu/explore/ คลิกที่ปุ่ม Create apps ! ด้านมุมบนขวา

จากนั้นระบบจะให้คุณล็อกอินบัญชี Google และกดยอมรับข้อตกลงต่าง ๆ และระบบจะพาคุณเข้ามาหน้าดังรูป กดที่ปุ่ม Start new project

ตั้งชื่อโปรเจคใหม่ โดยชื่อที่ตั้งนี้ จะถูกนำไปตั้งเป็นชื่อแอพพลิเคชั่นด้วย จากนั้นกดปุ่ม OK

จะแสดงหน้าจอออกแบบมาดังรูป

ในช่องด้านซ้าย คลิกเม้าส์ค้างที่ Label แล้วลากมาไว้ในจอออกแบบ จากนั้นปล่อยเม้าส์

ในช่องด้านขวา เราสามารถปรับขนาดตัวอักษรได้ ตัวอย่างผมปรับเป็นขนาด 42

ถัดมา ให้กำหนด Width เป็น 100 percent

กำหนด TextAlignment เป็น Center

เปลี่ยน Text เป็นคำอื่น ตัวอย่างผมเปลี่ยนเป็น Control LED

ภาพรวมปัจจุบันเป็นดังรูป

ในช่องด้านซ้าย กดไปที่ Layout นำ HorizontalArragement ออกมาวาง

กดกลับมาที่ User Interface เอา Button มาวางใน HorizontalArragement 2 อัน

ในกล่อง Components เลือก HorizontalArragement แล้วกำหนด Width เป็น 100 percent

ปรับ AlignHorizontal เป็น Center

ในกล่อง Components เลือก Button1 ปรับ Text เป็น ON และเลือก Button2 ปรับ Text เป็น OFF ผลที่ได้เป็นไปดังรูปด้านล่าง

ในกล่อง Palette เลือก Connectivity ลากมาวางในหน้าจอออกแบบ

ในกล่อง Properties ให้กรอก Url ให้เป็นแบบเดียวกับตอนที่ทดสอบในขั้นตอน ทดสอบใช้งาน REST API คือรูปแบบ https://api.netpie.io/topic/{NETPIE_APPNAME}/gearname/led?auth={REST API auth}

ด้านมุมขวาบน กดที่ปุ่ม Blocks

ในช่อง Blocks ด้านซ้าย กดที่ Button1 เลือก when Button.Click ลากมาวางในหน้ากล่อง Viewer ทำแบบเดียวกันนี้กับ Button2

ได้ผลลัพธ์ดังรูป

ในช่อง Blocks เลือก Web1 เลื่อนหา call Web1.PutText นำไปวางใน when Button.Click ทั้ง Button1 และ Button2

ที่ช่อง Blocks เลือก Text เลือก " " นำไปต่อที่ด้านหลังของ all Web1.PutText ทั้ง Button1 และ Button2

พิมพ์ ON ลงใน Button1 และ OFF ลงใน Button2

ผลลัพธ์ที่ได้ เป็นไปดังรูป

กดที่ Build แล้วเลือก App (provide QR code for .apk)

จากนั้นรอซักครู่

 

QC Code จะขึ้นมา ให้ใช้ LINE หรือแอพสแกน QR Code อื่น ๆ สแกน แล้วจะมีให้โหลดเป็น APK

เมื่อติดตั้งแล้ว จะได้แอพพลิเคชั่นใช้งานจริงดังรูปด้านล่าง

เมื่อลองกดปุ่ม ON หรือ OFF แล้วกลับมาดูที่หน้า Serial Moniter จะเห็นว่าสามารถรับ - ส่งข้อมูลกันได้แล้ว และหลอด LED ที่อยู่บนบอร์ด NodeMCU ก็ติด - ดับตามที่กด (อย่าลืมเปิดเน็ต หรือต่อ WiFi ก่อน)

คลิปวิดีโอทดสอบ

ในบทความอาจจะไม่ละเอียดเหมือนบทความที่ผ่าน ๆ มา เนื่องจากบทความนี้เป็นการนำความรู้ 3 อย่าง คือ การเขียนโปรแกรมบน ESP8266 การใช้งาน NETPIE และการใช้งาน App Inventor มารวมกัน ทำให้บทความอาจจะยาวเกินไป ไว้เจาะลึกในแต่ละหัวเรื่องในบทความถัด ๆ ไปนะครับ

หวังว่าบทความนี้น่าจะเป็นประโยชน์กับท่านผู้อ่านไม่มากก็น้อย

~ สวัสดีครับ ~