โปรเจกต์ Easy IOT – การควบคุม ESP32 จากระยะไกลด้วย Android App

สามารถดูได้ที่นี่เช่นกัน:

https://www.instructables.com/id/Easy-IOT-Remotely-Controlling-ESP32-Using-an-Andro/

ในบทช่วยสอนนี้ เราจะเขียนแอป DroidScript เพื่อควบคุม Relay module โดยใช้บอร์ด ESP32 ผ่าน WiFi

สิ่งที่คุณต้องมี:

· บอร์ด ESP32 (เราใช้ ESP32_core_board_v2)

· อุปกรณ์ Android

· แอป DroidScript

· Arduino IDE

· Relay module

· สาย Micro USB

· สายจัมเปอร์ (Dupont) แบบ Female to Female จำนวน 3 เส้น

· WiFi

Step 1: Setting Up the Arduino IDE

สิ่งแรกที่เราต้องทำคือเพิ่มบอร์ด ESP32 เข้าไปใน Arduino IDE โดยให้ทำตามคู่มือนี้:

https://randomnerdtutorials.com/installing-the-esp...

จากนั้นเราต้องเพิ่ม Library ที่จะใช้สำหรับรัน Webserver เพื่อสื่อสารกับ ESP32

วิธีการเพิ่ม Library ESPAsyncWebServer ให้ไปที่: https://github.com/me-no-dev/ESPAsyncWebServer

และดาวน์โหลด Library เป็นไฟล์ zip จากนั้นกลับไปที่ Arduino IDE ไปที่ Sketch, Include Library, Add.ZIP Library แล้วหาไฟล์ zip ที่เพิ่งดาวน์โหลดมาและคลิก Open

Library นี้จะเริ่มการทำงานของ Asynchronous Web Server บน Arduino ซึ่งเราสามารถเชื่อมต่อผ่านเครือข่าย WiFi เพื่อสั่งให้ ESP32 ทำงานหรืออ่านข้อมูลกลับจากอุปกรณ์ได้

Step 2: Arduino Webserver Code

ใส่ Code ต่อไปนี้ใน Arduino IDE แล้วกรอก WiFi SSID และ Password ของคุณเอง เมื่อเสร็จแล้ว ให้ไปที่ Tools, Board และเลือก ESP32 Dev Module (หรือบอร์ดที่คุณใช้งานอยู่) ตอนนี้คุณสามารถเสียบบอร์ดเข้ากับ PC ด้วยสาย Micro USB และคุณควรจะเห็นบอร์ดปรากฏในเมนู Tools, Port ให้เลือกบอร์ดและพอร์ตที่นี่แล้วจึง Upload code

#include "WiFi.h"
#include "ESPAsyncWebServer.h"
const char* ssid = "myRouter";  //replace
const char* password =  "myPassword"; //replace
AsyncWebServer server(80);
int relayPin = 23;
void setup()
{
 pinMode(relayPin, OUTPUT);
 digitalWrite(relayPin, HIGH);
 Serial.begin(115200);
 WiFi.begin(ssid, password);
 while (WiFi.status() != WL_CONNECTED) 
 {
   delay(1000);
   Serial.println("Connecting to WiFi..");
 }
 Serial.println(WiFi.localIP());
 server.on("/hello", HTTP_GET, [](AsyncWebServerRequest *request){
   request->send(200, "text/plain", "Hello World");
 });
 server.on("/relay/off", HTTP_GET   , [](AsyncWebServerRequest *request){
   request->send(200, "text/plain", "ok");
   digitalWrite(relayPin, HIGH);
 });
  server.on("/relay/on", HTTP_GET, [](AsyncWebServerRequest *request){
   request->send(200, "text/plain","ok");
   digitalWrite(relayPin, LOW);
 });
 server.on("/relay/toggle", HTTP_GET, [](AsyncWebServerRequest *request){
   request->send(200, "text/plain","ok");
   digitalWrite(relayPin, !digitalRead(relayPin));
 });
 server.on("/relay", HTTP_GET, [](AsyncWebServerRequest *request){
   request->send(200, "text/plain", String(digitalRead(relayPin)));
 });
 server.begin();
}
void loop(){}

Step 3: Find the ESP32 IP Address

ใน Arduino IDE ให้เปิด Serial Monitor และคุณควรจะเห็นข้อความลักษณะนี้:

จดบันทึก IP Address ที่ด้านล่างไว้ เพราะคุณต้องใช้ในภายหลัง หากคุณไม่เห็นข้อความใดๆ ใน Serial Monitor ให้ลองกดปุ่ม Reset บน ESP32

Step 4: The DroidScript App

เปิด Droidscript บนอุปกรณ์มือถือของคุณและสร้างแอปใหม่ คัดลอก Code ต่อไปนี้ลงในแอปและกรอก IP Address จากขั้นตอนก่อนหน้า

วิธีที่ง่ายที่สุดคือการเปิด Web Editor โดยกดสัญลักษณ์ WiFi ในแอป แล้วพิมพ์ IP Address ที่ได้ลงใน Browser ของคุณ สำหรับการสร้างแอปใหม่:

จากในแอป - ไปที่ปุ่มจุดสามจุดแล้วคลิก New ตั้งชื่อแอปของคุณ และปล่อยประเภทไว้เป็น Native และ Simple

จาก Web Editor: คลิกสัญลักษณ์ตาราง (ปุ่ม Apps) จากนั้นเลือก 'New JavaScript App' ตั้งชื่อและปล่อยประเภทไว้เป็น Simple คลิก Ok แอปจะเปิดขึ้นมา และคุณสามารถแทนที่ Code ตัวอย่าง Hello World ด้วย Code ด้านล่างนี้ อย่าลืมเปลี่ยน IP Address ให้เป็น IP ของ ESP32 ที่พบในขั้นตอนก่อนหน้า

var url = "http://192.168.1.154";
//Called when application is started.
function OnStart()
{
 //Create a layout with objects vertically centered.
 lay = app.CreateLayout( "linear", "VCenter,FillXY" );   
 app.AddLayout( lay );
     //Create a button to send request.
 btn = app.CreateButton( "State", 0.3, 0.1 ); 
 btn.SetMargins( 0, 0.05, 0, 0 ); 
     btn.SetOnTouch( btn_OnTouch ); 
 lay.AddChild( btn ); 
 //Create a button to send request.
 btnON = app.CreateButton( "Relay ON", 0.3, 0.1 ); 
 btnON.SetMargins( 0, 0.05, 0, 0 ); 
     btnON.SetOnTouch( btnON_OnTouch ); 
 lay.AddChild( btnON ); 
 //Create a button to send request.
 btnOFF = app.CreateButton( "Relay OFF", 0.3, 0.1 ); 
 btnOFF.SetMargins( 0, 0.05, 0, 0 ); 
     btnOFF.SetOnTouch( btnOFF_OnTouch ); 
 lay.AddChild( btnOFF ); 
}
function btn_OnTouch()
{
       //Send request to remote server.
       var path = "/relay";
       //var params = "data=" + data.replace("\\r","");
       app.HttpRequest( "get", url, path, "", HandleReply );
}
function btnON_OnTouch()
{
       //Send request to remote server.
       var path = "/relay/on";
       //var params = "data=" + data.replace("\\r","");
       app.HttpRequest( "get", url, path, "", HandleReply );
}
function btnOFF_OnTouch()
{
       //Send request to remote server.
       var path = "/relay/off";
       //var params = "data=" + data.replace("\\r","");
       app.HttpRequest( "get", url, path, "", HandleReply );
}
//Handle the servers reply.
function HandleReply( error, response )
{
     console.log(error);
     app.ShowPopup(response);
}

Step 5: Connect the Relay Module

เชื่อมต่อ Relay module เข้ากับ ESP32 ดังนี้:

GND---GND

VCC---5V

IN1---IO23

คุณสามารถถอดปลั๊ก ESP32 ออกจากคอมพิวเตอร์และจ่ายไฟจากแบตเตอรี่แทนได้หากต้องการ

Step 6: Test!

รันแอปโดยกดปุ่ม Play และทดสอบโดยการกดปุ่มต่างๆ หากทุกอย่างทำถูกต้อง คุณจะสามารถเปิดและปิด Relay ได้โดยใช้ปุ่ม และตรวจสอบสถานะ (State) ของ Relay ได้โดยการกดปุ่ม State หากการสื่อสารสำเร็จ แอปจะแสดง Popup ว่า “ok” หรือแสดงสถานะของ Relay (ตัวเลขที่ส่งกลับมาคือ 1 สำหรับสถานะ Pin High และ 0 สำหรับสถานะ Pin Low โดย Relay จะเปิดทำงานเมื่อ Pin ควบคุมถูกดึงให้เป็น Low)