วันพฤหัสบดีที่ 22 กุมภาพันธ์ พ.ศ. 2561

mobile9-5

ลงชื่อเข้าใช้งานได้ที่ลิ้ง https://netpie.io/sign_up


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


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


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


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


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


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


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

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


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

ก่อนอื่นเลย ต้องติดตั้ง บอร์ด ESP8266 เข้ากับ Arduino ก่อน จากนั้นติดตั้งไลบารี่ microgear โดยมีขั้นตอนในการติดตั้งดังนี้
  • ดาว์นโหลดไลบารี่จาก https://github.com/netpieio/microgear-esp8266-arduino/archive/master.zip
  • คลายไฟล์แล้วนำไปวางที่โฟลเดอร์ libraries (เลือกวางไว้ที่ Documents\Arduino\libraries หรือ C:\Program Files[ (x86)]\Arduino\libraries)
จากนั้นให้ก๊อบโค้ดด้านล่างนี้ลงโปรแกรม Arduino แล้วแก้ไขดังนี้
  • บรรทัดที่ แก้ {YOUR_WIFI_NAME} เป็นชื่อ WiFi ที่ต้องการใช้ ESP8266ไปเชื่อมต่อด้วย
  • บรรทัดที่ แก้ {YOUR_WIFI_PASSWORD} เป็นรหัสผ่าน WiFi
  • บรรทัดที่ แก้ {NETPIE_APPNAME} เป็นชื่อ APPLICATIONS ตัวอย่างที่ผมตั้งไว้คือ NETPIE2LED
  • บรรทัดที่ แก้ {NETPIE_KEY} เป็น Device Key ตรงส่วน Key จากในNETPIE
  • บรรทัดที่ แก้ {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();
  }
}


แก้ไขในอาดูโน่

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


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


สร้างแอพพลิเคชั่นแอนดรอยด้วย App Inventor
App Inventor เป็นเว็บแอพพลิเคชั่นที่สร้างโดย Google ร่วมมือกับสถาบัน MIT แต่ภายหลัง Google ถอนตัว แล้วให้สถาบัน MIT เป็นผู้พัฒนาต่อเอง โดยเน้นไปในทางด้านการศึกษา ให้เด็ก ๆ สามารถเรียนรู้การเขียนแอพพลิเคชันแอนดรอยแบบง่าย ๆ โดยไม่ต้องเขียนโค้ด ไม่ต้องใช้ภาษา Java แต่ใช้การเขียนในรูปแบบBlock เพื่อให้เข้าใจง่าย ในขณะที่ทุก Block ที่นำมาวาง จะแฝงคำสั่ง / รูปแบบ โค้ดของโปรแกรมเข้าไปด้วย เพื่อให้สามารถนำไปต่อยอด ทำความเข้าใจการเขียนแอพพลิเคชั่นแอนดรอยด้วยภาษา Java ต่อไป
App Inventor เวอร์ชั่นที่ ยังอิงอยู่กับแอนดรอยเวอร์ชั่นเก่า ตั้งแต่แอนดรอยประมาณเวอร์ชั่น 2.0 ทำให้หน้าUI ของแอพพลิเคชั่นที่สร้างขึ้นมา ยังอิงอยู่กับรูปแบบเก่า ๆ การใช้งานจึงควรใช้เพื่อเรียนรู้ในขั้นต้น เตรียมพร้อมสำหรับการต่อยอดไปสร้างแอพพลิเคชั่นด้วยภาษา Java หรือภาษาอื่น ๆ ที่ Google Support ต่อไป
ด้วยความง่ายต่อเรียนรู้และใช้งาน ในบทความนี้จึงเลือก App Inventor มาให้ท่านผู้อ่านได้ลองใช้งานกันครับ
เริ่มต้น เข้าไปที่เว็บไซต์ http://appinventor.mit.edu/explore/ คลิกที่ปุ่ม Create apps ! ด้านมุมบนขวา


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


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


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


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


ในช่องด้านขวา ให้เปลี่ยนตามรูป


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


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


ในกล่อง Components เลือก HorizontalArragement แล้วกำหนดตามรูป

ในกล่อง 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



ไม่มีความคิดเห็น:

แสดงความคิดเห็น