คู่มือ ESP8266_Web_Server_with_Arduino_IDE แปลโดยจำรัส เจริญเขตต์เพื่อใช้งานเอง

ESP8266เวบ็ เซิร์ฟเวอร์กบั ArduinoIDE แปลโดยจำรัส เจริญเขตต์ สำนักงำนพฒั นำฝี มือแรงงำน สุโขทยั กรมพฒั นำฝี มือแรงงำน

สวสั ดีและขอขอบคุณท่ีดาวนโ์ หลด eBook โครงการน้ี!
eBook ฉบบั ยอ่ น้ีเป็นคาแนะนาทีละข้นั ตอนของฉนั ท่ีออกแบบมาเพือ่ ช่วยคุณสร้างเวบ็ เซิร์ฟเวอร์ดว้ ยโมดูล WiFi
ท่ีเรียกวา่ ESP8266
AbouttheESP8266

ESP8266 เป็นโมดูล Wi-Fi มูลคา่ $ 4 (สูงสุด $ 10) ช่วยใหค้ ุณสามารถควบคุมอินพุตและเอาตพ์ ตุ ไดเ้ ช่นเดียวกบั Arduino แตม่ า
พร้อมกบั Wi-Fi ดงั น้นั จึงเหมาะอยา่ งยงิ่ สาหรับการใชง้ านระบบอตั โนมตั ิในบา้ น / อินเทอร์เน็ตของส่ิงตา่ งๆ
คุณสามารถทาอะไรกบั โมดูลตน้ ทุนต่าน้ีไดบ้ า้ ง?

คุณสามารถสร้างเวบ็ เซิร์ฟเวอร์ส่งคาขอ HTTP ควบคุมเอาตพ์ ุตอ่านอินพุตและขดั จงั หวะส่งอีเมลโพสตท์ วตี สร้างอุปกรณ์ IoT
และอื่น ๆ อีกมากมาย
ESP8266specifications

802.11 b/g/n protocol
Wi-Fi Direct (P2P), soft-AP
Integrated TCP/IP protocol stack
Built-in low-power 32-bit CPU
SDIO 2.0, SPI, UART

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 2

FindingYourESP8266
ESP8266 มีใหเ้ ลือกมากมายหลายรุ่น ESP-12E หรือที่มกั เรียกกนั วา่ ESP-12E NodeMCU Kit เป็นรุ่นที่ใชง้ านไดจ้ ริงที่สุดและนนั่
คือโมดูลที่เราจะใชม้ ากท่ีสุดตลอดโครงการน้ี คุณสามารถคน้ หาบอร์ด ESP8266 น้ีไดจ้ ากลิงคต์ ่อไปน้ี:
https://makeradvisor.com/tools/esp8266-esp-12e-nodemcu-wi-fi- development-board/
โครงการน้ีไดร้ ับการทดสอบดว้ ย ESP-01, ESP-07, ESP-12 และ ESP-12E ดงั น้นั คุณสามารถทาตามคาแนะนาโครงการน้ีกบั
บอร์ดใดก็ได้
ฉนั ขอแนะนาใหใ้ ช้ ESP8266-12E NodeMCU Kit ซ่ึงเป็นชุดท่ีมีโปรแกรมเมอร์ในตวั โปรแกรมเมอร์ในตวั ทาใหง้ ่ายต่อการสร้าง
ตน้ แบบและอปั โหลดโปรแกรมของคุณ
คุณอาจพบวา่ มีประโยชนใ์ นการดูบทความต่อไปน้ี:
Best ESP8266 Wi-Fi Development Board – Buying Guide

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 3

ESP-12ENodeMCUKitPinout
นี่คือภาพรวมโดยยอ่ ของพินเอาต์ ESP-12E NodeMCU Kit:

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 4

ESP8266withArduinoIDE

ในส่วนน้ีคุณจะตอ้ งดาวน์โหลดติดต้งั และเตรียม Arduino IDE ของคุณใหท้ างานกบั ESP8266 คุณสามารถต้งั โปรแกรม
ESP8266 ของคุณโดยใชภ้ าษาโปรแกรม Arduino ท่ีเป็นมิตร
What’stheArduinoIDE?
Arduino IDE เป็นซอฟตแ์ วร์โอเพน่ ซอร์สที่ช่วยใหเ้ ขียนโคด้ และอปั โหลดไปยงั บอร์ด Arduino ไดง้ ่าย ที่เก็บ GitHub น้ีเพมิ่ การ
รองรับบอร์ด ESP8266 เพ่อื รวมเขา้ กบั Arduino IDE
Arduino IDE เป็นซอฟตแ์ วร์หลายแพลตฟอร์มซ่ึงหมายความวา่ ทางานบน Windows, MacOS X หรือ Linux (สร้างข้ึนใน JAVA)
Requirements
คุณตอ้ งติดต้งั JAVA ในคอมพิวเตอร์ของคุณ หากคุณยงั ไม่มีใหไ้ ปที่เวบ็ ไซตน์ ้ี: http://java.com/download ดาวน์โหลดและติดต้งั
เวอร์ชนั ล่าสุด
Downloading Arduino IDE
ในการดาวนโ์ หลด Arduino IDE ไปที่ URL ต่อไปน้ี:
https://www.arduino.cc/en/Main/Software.
จากน้นั เลือกระบบปฏิบตั ิการของคุณและดาวน์โหลดซอฟตแ์ วร์ (ดงั แสดงดา้ นล่าง)

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 5

InstallingArduinoIDE
หยบิ ไฟลท์ ่ีคุณเพง่ิ ดาวนโ์ หลดช่ือ“ arduino - (... ). zip” เรียกใชไ้ ฟลน์ ้นั และทาตามวซิ าร์ดการติดต้งั ท่ีแสดงบนหนา้ จอของคุณ เปิ ด
ไฟลแ์ อปพลิเคชนั Arduino IDE (ดูรูปดา้ นล่าง)

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 6

เมื่อ Arduino IDE เปิ ดข้ึนคร้ังแรกน่ีคือส่ิงท่ีคุณควรเห็น:

InstalingESP8266Board
ในการติดต้งั บอร์ด ESP8266 ใน Arduino IDE ของคุณใหท้ าตามคาแนะนาต่อไปน้ี:
เปิ ดหนา้ ต่างการต้งั ค่าจาก Arduino IDE ไปที่ไฟล์
คา่ กาหนด
ป้อน http://arduino.esp8266.com/stable/package_esp8266com_in dex.json ลงในช่อง URL ของผจู้ ดั การคณะกรรมการเพ่มิ เติม
แลว้ กดป่ ุม "ตกลง"

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 7

กดไปท่ี เคร่ืองมือ toots Board Boards Manager…

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 8

เลื่อนลงเลือกเมนูบอร์ด ESP8266 และติดต้งั “ esp8266 by ESP8266 Community”
กดไปท่ี เคร่ืองมือ toots Board NodeMCU 1.0 (ESP-12E Module)

ในที่สุดใหเ้ ปิ ด Arduino IDE ของคุณอีกคร้ังเพ่ือใหแ้ น่ใจวา่ จะเปิ ดตวั พร้อมกบั บอร์ดใหม่ที่ติดต้งั

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 9

BlinkinganLEDwithArduinoIDE

ในส่วนน้ีคุณจะตอ้ งออกแบบวงจรอยา่ งง่ายเพ่อื กะพริบ LED ดว้ ย ESP8266 โดยใช้ Arduino IDE

ทาไมเราถึงกะพริบ LED ก่อนเสมอ? นน่ั เป็นคาถามท่ีดีมาก! หากคุณสามารถกะพริบไฟ LED คุณสามารถพดู ไดว้ า่ คุณสามารถ
เปิ ดหรือปิ ดอุปกรณ์อิเล็กทรอนิกส์ใดกไ็ ด้
WritingYourArduinoSketch

ภาพร่างสาหรับการกะพริบของ LED น้นั ง่ายมาก คุณสามารถคน้ หาไดจ้ ากลิงค์ ดา้ นล่าง:

SOURCE CODE

https://gist.github.com/RuiSantosdotme/789861277da9680e9cfb

int pin = 2;

void setup() {
// initialize GPIO 2 as an output
pinMode(pin, OUTPUT);

}

// the loop function runs over and over again forever

void loop() {

digitalWrite(pin, HIGH); // turn the LED on (HIGH is the voltage level)

delay(1000); // wait for a second

digitalWrite(pin, LOW); // turn the LED off by making the voltage LOW

delay(1000); // wait for a second

}

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 10

UploadingCodetoESP8266
อปั โหลดรหสั ไปยงั ESP-12E NodeMCU Kit ของคุณน้นั ง่ายมากเน่ืองจากมีโปรแกรมเมอร์ในตวั คุณเสียบบอร์ดเขา้ กบั
คอมพวิ เตอร์และไมจ่ าเป็นตอ้ งทาการเช่ือมต่อเพิ่มเติม
ดูท่ีเมนูเคร่ืองมือเลือกบอร์ด“ NodeMCU 1.0 (โมดูล ESP-12E)” และการกาหนดค่าท้งั หมดโดยคา่ เร่ิมตน้ ควรมีลกั ษณะดงั น้ี:

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 11

สาคญั : พอร์ต COM ของคุณมีแนวโนม้ ที่จะแตกตา่ งจากภาพหนา้ จอก่อนหนา้ น้ีมาก (พอร์ต:“ COM6”) ไมเ่ ป็นไรเพราะมนั ไม่
รบกวนอะไรเลย ในทางกลบั กนั การกาหนดค่าอ่ืน ๆ ท้งั หมดควรมีลกั ษณะเหมือนของฉนั ทุกประการ
หลงั จากตรวจสอบการกาหนดค่าแลว้ ใหค้ ลิก "ป่ ุมอปั โหลด" ใน Arduino IDE และรอสกั ครู่จนกวา่ คุณจะเห็นขอ้ ความ "เสร็จสิ้น
การอปั โหลด" ท่ีมมุ ล่างซา้ ย

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 12

FinalESP-12Ecircuit
เชื่อมตอ่ LED และตวั ตา้ นทาน 220 โอห์มเขา้ กบั ESP8266 D4 (GPIO 2) ของคุณ

รีสตาร์ท ESP8266 ของคุณ ขอแสดงความยนิ ดีคุณทาสาเร็จแลว้ ! LED ของคุณควรกะพริบทุกๆ 1 วนิ าที!

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 13

ESP8266WebServer

บทช่วยสอนน้ีเป็ นคาแนะนาทีละข้นั ตอนท่ีแสดงวธิ ีสร้างเวบ็ เซิร์ฟเวอร์ ESP8266 แบบสแตนด์อโลนท่ีควบคุมเอาตพ์ ุตสอง
เอาตพ์ ุต (LED สองดวง) จากน้นั คุณสามารถเปล่ียน LED เหล่าน้นั ดว้ ยอุปกรณ์อิเล็กทรอนิกส์อ่ืน ๆ.

ESP8266 เวบ็ เซิร์ฟเวอร์น้ีตอบสนองต่ออุปกรณ์เคล่ือนท่ีและสามารถเขา้ ถึงไดด้ ว้ ยอุปกรณ์ใด ๆ ท่ีเป็นเบราวเ์ ซอร์ในเครือข่าย
ทอ้ งถ่ินของคุณ รหสั สาหรับโครงการน้ีทาไดโ้ ดยใช้ Arduino IDE
Watchthevideotutorial
โครงการน้ีมีใหบ้ ริการในรูปแบบวดิ ีโอบน YouTube เพียงคลิกท่ีลิงคด์ า้ นล่าง:
https://youtu.be/dWM4p_KaTHY

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 14

PreparetheArduinoIDE
ดาวน์โหลดและติดต้งั Arduino IDE บนระบบปฏิบตั ิการของคุณ (เวอร์ชนั เก่าบางรุ่นใชง้ านไมไ่ ด)้
จากน้นั คุณตอ้ งติดต้งั ส่วนเสริม ESP8266 สาหรับ Arduino IDE สาหรับสิ่งน้นั ไปท่ี
File Preferences.
ป้อน URL ตอ่ ไปน้ีในฟิลดต์ วั จดั การบอร์ดเพิ่มเติม:

http://arduino.esp8266.com/stable/package_esp8266com_index.json

จากน้นั คลิกป่ ุม OK

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 15

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 16

กดไปที่ เคร่ืองมือ toots Board Boards Manager…

เล่ือนลงเลือกเมนูบอร์ด ESP8266 และติดต้งั “ esp8266 platform” ดงั แสดงในรูปดา้ นล่าง

กดไปท่ี เครื่องมือ Tools Board และเลือกบอร์ด ESP8266 ของคุณ จากน้นั เปิ ด Arduino IDE ของคุณอีกคร้ัง

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 17

Code
คดั ลอกโคด้ ดา้ นล่างไปยงั Arduino IDE ของคุณ แต่ยงั ไมไ่ ดอ้ ปั โหลด คุณตอ้ งทาการเปล่ียนแปลงบางอยา่ งเพ่อื ให้ใชง้ านได้

SOURCE CODE

https://github.com/RuiSantosdotme/Random-Nerd-
Tutorials/blob/master/Projects/ESP8266_Web_Server_Arduino_IDE_updated.ino

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 18

/*********
Rui Santos
Complete project details at http://randomnerdtutorials.com

*********/

// Load Wi-Fi library
#include <ESP8266WiFi.h>

// Replace with your network credentials

const char* ssid = "REPLACE_WITH_YOUR_SSID";

const char* password = "REPLACE_WITH_YOUR_PASSWORD";

// Set web server port number to 80
WiFiServer server(80);

// Variable to store the HTTP request
String header;

// Auxiliar variables to store the current output state
String output5State = "off";
String output4State = "off";

// Assign output variables to GPIO pins
const int output5 = 5;
const int output4 = 4;

void setup() {

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 19

Serial.begin(115200);
// Initialize the output variables as outputs pinMode(output5, OUTPUT);
pinMode(output4, OUTPUT);
// Set outputs to LOW digitalWrite(output5, LOW); digitalWrite(output4, LOW);

// Connect to Wi-Fi network with SSID and password Serial.print("Connecting to "); Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) { delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println(""); Serial.println("WiFi connected."); Serial.println("IP address: "); Serial.println(WiFi.localIP());
server.begin();
}

void loop(){
WiFiClient client = server.available(); // Listen for incoming clients

if (client) { // If a new client connects, Serial.println("New Client."); // print a message out in the serial port String
currentLine = "";// make a String to hold incoming data while (client.connected()) { // loop while the client's connected
if (client.available()) { // if there's bytes to read char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor header += c;
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response: if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 20

// and content-type so the client knows what's coming, then a blank line: client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html"); client.println("Connection: close"); client.println();

// turns the GPIOs on and off
if (header.indexOf("GET /5/on") >= 0) { Serial.println("GPIO 5 on"); output5State = "on"; digitalWrite(output5, HIGH);
} else if (header.indexOf("GET /5/off") >= 0) {
Serial.println("GPIO 5 off"); output5State = "off"; digitalWrite(output5, LOW);
} else if (header.indexOf("GET /4/on") >= 0) {
Serial.println("GPIO 4 on"); output4State = "on"; digitalWrite(output4, HIGH);
} else if (header.indexOf("GET /4/off") >= 0) {
Serial.println("GPIO 4 off"); output4State = "off"; digitalWrite(output4, LOW);
}

// Display the HTML web page client.println("<!DOCTYPE html><html>"); client.println("<head><meta name=\"viewport\"
content=\"width=device-width, initial-scale=1\">"); client.println("<link rel=\"icon\" href=\"data:,\">");
// CSS to style the on/off buttons
// Feel free to change the background-color and font-size attributes client.println("<style>html { font-family: Helvetica; display:
inline-block; margin: 0px auto; text-align: center;}"); client.println(".button { background-color: #195B6A; border:
none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color:
#77878A;}</style></head>");

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 21

// Web Page Heading client.println("<body><h1>ESP8266 Web Server</h1>");

// Display current state, and ON/OFF buttons for GPIO 5 client.println("<p>GPIO 5 - State " + output5State + "</p>");
// If the output5State is off, it displays the ON button if (output5State=="off") {
client.println("<p><a href=\"/5/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/5/off\"><button class=\"button button2\">OFF</button></a></p>");
}

// Display current state, and ON/OFF buttons for GPIO 4 client.println("<p>GPIO 4 - State " + output4State + "</p>");
// If the output4State is off, it displays the ON button if (output4State=="off") {
client.println("<p><a href=\"/4/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/4/off\"><button class=\"button button2\">OFF</button></a></p>");
}
client.println("</body></html>");

// The HTTP response ends with another blank line client.println();
// Break out of the while loop break;
} else { // if you got a newline, then clear currentLine currentLine = "";
}
} else if (c != '\r') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 22

}
}

// Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}

คุณตอ้ งแกไ้ ขตวั แปรสองตวั ตอ่ ไปน้ีดว้ ยขอ้ มูลรับรองเครือขา่ ยของคุณเพอื่ ให้ ESP8266 ของคุณสร้างการเชื่อมต่อกบั เราเตอร์ของ
คุณได้

// Replace with your network credentials

const char* ssid = "REPLACE_WITH_YOUR_SSID";

const char* password = "REPLACE_WITH_YOUR_PASSWORD";

UploadingtheSketch

การอปั โหลด Sketch ไปยงั ESP-12E

หากคุณใช้ ESP-12E NodeMCU Kit การอปั โหลดภาพร่างน้นั ทาไดง้ ่ายมากเนื่องจากมีโปรแกรมเมอร์ในตวั เสียบบอร์ดเขา้ กบั
คอมพวิ เตอร์ ตรวจสอบใหแ้ น่ใจวา่ คุณไดเ้ ลือกบอร์ดและพอร์ต COM ที่ถูกตอ้ งแลว้

จากน้นั คลิก“ ป่ ุมอปั โหลด” ใน Arduino IDE และรอสกั ครู่จนกวา่ คุณจะเห็นขอ้ ความ“ เสร็จสิ้นการอปั โหลด” ท่ีมุมลา่ งซา้ ย

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 23

การอปั โหลด Sketch ไปยงั ESP-01
การอปั โหลดโคด้ ไปยงั ESP-01 จาเป็นตอ้ งสร้างการสื่อสารแบบอนุกรมระหวา่ ง ESP8266 และโปรแกรมเมอร์ FTDI ดงั แสดงใน
แผนผงั ดา้ นลา่ ง

ตารางต่อไปน้ีแสดงการเช่ือมตอ่ ที่คุณตอ้ งทาระหวา่ ง ESP8266 และโปรแกรมเมอร์ FTDI

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 24

ESP8266 FTDI programmer
RX TX
TX RX
CH_PD 3.3V
GPIO 0 GND
VCC 3.3V
GND GND

หากคุณมีโปรแกรมเมอร์ FTDI ใหม่เอี่ยมและคุณตอ้ งการติดต้งั ไดรเวอร์ FTDI บนพซี ี Windows โปรดไปที่เวบ็ ไซตน์ ้ีเพอื่ ดูไดร
เวอร์อยา่ งเป็ นทางการ หรือคุณสามารถติดต่อผขู้ ายที่ขาย FTDI Programmer ใหค้ ุณ

จากน้นั คุณตอ้ งเชื่อมต่อโปรแกรมเมอร์ FTDI กบั คอมพวิ เตอร์ของคุณและอปั โหลดรหสั ไปยงั ESP8266

Schematics

ในการสร้างวงจรคุณตอ้ งมีส่วนต่อไปน้ี:
ESP8266 12-E – read Best ESP8266 Wi-Fi Development Boards
2x LEDs
2x Resistors (220 หรือ 330 โอห์มควรใชง้ านไดด้ ี)
Breadboard
Jumper wires
หากคุณใช้ ESP-01 คุณตอ้ งมีโปรแกรมเมอร์ FTDI ดว้ ย

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 25

เชื่อมต่อ LED สองดวงเขา้ กบั ESP8266 ของคุณตามท่ีแสดงในแผนภาพต่อไปน้ี - โดย LED หน่ึงดวงเชื่อมตอ่ กบั GPIO 4 และอีก
ดวงหน่ึงเขา้ กบั GPIO 5

หากคุณใช้ ESP-01 ...
หากคุณใช้ ESP8266-01 ใหใ้ ชแ้ ผนผงั ต่อไปน้ีเป็นขอ้ มูลอา้ งอิง แต่คุณตอ้ งเปล่ียนการกาหนด GPIO ในโคด้ (เป็น GPIO 2 และ
GPIO 0)

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 26

TestingtheWebServer
ตอนน้ีคุณสามารถอปั โหลดรหสั และจะใชง้ านไดท้ นั ที อยา่ ลืมตรวจสอบวา่ คุณไดเ้ ลือกบอร์ดและพอร์ต COM ที่ถูกตอ้ งหรือไม่
มิฉะน้นั คุณจะไดร้ ับขอ้ ผิดพลาดเมื่อพยายามอปั โหลด เปิ ด Serial Monitor ท่ีอตั ราการส่งขอ้ มูล 115200
FindingtheESP8266IPAddress
กดป่ ุมรีเซ็ต ESP8266 และจะส่งออกที่อยู่ IP ESP บน Serial Monitor

คดั ลอกที่อยู่ IP น้นั เนื่องจากคุณตอ้ งการเพื่อเขา้ ถึงเวบ็ เซิร์ฟเวอร์
AccessingtheWebServer
เปิ ดเบราวเ์ ซอร์ของคุณพิมพท์ ี่อยู่ IP ของ ESP และคุณจะเห็นหนา้ ต่อไปน้ี เพจน้ีถูกส่งโดย ESP8266 เม่ือคุณร้องขอบนท่ีอยู่ IP
ของ ESP

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 27

หากคุณดู Serial Monitor คุณจะเห็นวา่ เกิดอะไรข้ึนในเบ้ืองหลงั ESP ไดร้ ับคาขอ HTTP จากไคลเอนตใ์ หม่ - ในกรณีน้ีคือ
เบราวเ์ ซอร์ของคุณ คุณยงั สามารถดูขอ้ มูลอื่น ๆ เก่ียวกบั คาร้องขอ HTTP ซ่ึงฟิ ลดเ์ หล่าน้ีเรียกวา่ ฟิ ลดส์ ่วนหวั HTTP และกาหนด
พารามิเตอร์การทางานของธุรกรรม HTTP

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 28

TestingtheWebServer
มาทดสอบเวบ็ เซิร์ฟเวอร์กนั คลิกป่ ุมเพือ่ เปิ ด GPIO 5 ESP ไดร้ ับคาขอเก่ียวกบั / 5 / บน URL และเปิ ด LED 5

สถานะ LED ยงั ไดร้ ับการอปั เดตบนหนา้ เวบ็

ทดสอบป่ ุม GPIO 4 และตรวจสอบวา่ ทางานในลกั ษณะเดียวกนั

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 29

HowtheCodeWorks
ตอนน้ีเรามาดูโคด้ ใหล้ ะเอียดยง่ิ ข้ึนเพื่อดูวา่ มนั ทางานอยา่ งไรเพอ่ื ท่ีคุณจะไดแ้ กไ้ ขโคด้ เพือ่ ตอบสนองความตอ้ งการของคุณ
สิ่งแรกท่ีคุณตอ้ งทาคือรวมไลบรารี ESP8266WiFi

// Load Wi-Fi library
#include <ESP8266WiFi.h>

ดงั ท่ีไดก้ ล่าวไวก้ ่อนหนา้ น้ีคุณตอ้ งใส่ SSID และรหสั ผา่ นของคุณในบรรทดั ต่อไปน้ีภายในเคร่ืองหมายคาพดู คู่

// Replace with your network credentials

const char* ssid = "REPLACE_WITH_YOUR_SSID";

const char* password = "REPLACE_WITH_YOUR_PASSWORD";

จากน้นั คุณต้งั ค่าเวบ็ เซิร์ฟเวอร์ของคุณเป็นพอร์ต 80

// Set web server port number to 80
WiFiServer server(80);

บรรทดั ต่อไปน้ีสร้างตวั แปรเพ่ือเก็บส่วนหวั ของคาร้องขอ HTTP:

// Variable to store the HTTP request
String header;

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 30

จากน้นั คุณสร้างตวั แปรเสริมเพ่อื เก็บสถานะปัจจุบนั ของผลลพั ธ์ของคุณ หากคุณตอ้ งการเพ่ิมเอาตพ์ ุตเพมิ่ เติมและบนั ทึกสถานะ
คุณตอ้ งสร้างตวั แปรเพม่ิ เติม

String output5State = "off";
String output4State = "off";

คุณตอ้ งกาหนด GPIO ใหก้ บั แต่ละเอาตพ์ ุตของคุณดว้ ย เรากาลงั ใช้ GPIO 5 และ GPIO 4 คุณสามารถใช้ GPIO อ่ืน ๆ
ท่ีเหมาะสมได้

const int output5 = 5;
const int output4 = 4;

setup()

ตอนน้ีไปท่ีการต้งั คา่ () ฟังกช์ น่ั การต้งั ค่า () จะทางานเพยี งคร้ังเดียวเมื่อ ESP ของคุณบูตคร้ังแรก ข้นั แรกเราเริ่มตน้ การสื่อสาร
แบบอนุกรมท่ีอตั ราการส่งขอ้ มูล 115200 เพอื่ วตั ถุประสงคใ์ นการดีบกั
.

Serial.begin(115200);

คุณยงั กาหนด GPIO ของคุณเป็น OUTPUT และต้งั คา่ เป็น LOW

pinMode(output5, OUTPUT);
pinMode(output4, OUTPUT);
// Set outputs to LOW
digitalWrite(output5, LOW);
digitalWrite(output4, LOW);

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 31

บรรทดั ต่อไปน้ีเริ่มตน้ การเช่ือมต่อ Wi-Fi ดว้ ย WiFi.begin (ssid, รหสั ผา่ น) รอใหก้ ารเชื่อมต่อสาเร็จและพิมพท์ ี่อยู่
IP ESP ใน Serial Monitor

// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {

delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 32

server.begin();

loop()
ในลูป () เราต้งั โปรแกรมวา่ จะเกิดอะไรข้ึนเม่ือไคลเอนตใ์ หมส่ ร้างการเชื่อมต่อกบั เวบ็ เซิร์ฟเวอร์
ESP มกั จะรับฟังลูกคา้ ท่ีเขา้ มาดว้ ยบรรทดั น้ี:

WiFiClient client = server.available(); // Listen for incoming clients

เม่ือไดร้ ับคาขอจากลูกคา้ เราจะบนั ทึกขอ้ มูลท่ีเขา้ มา ลูป while ที่ตามมาจะทางานตราบเทา่ ที่ไคลเอนตย์ งั คงเชื่อมตอ่ อยู่ เราไม่
แนะนาใหเ้ ปล่ียนส่วนต่อไปน้ีของโคด้ เวน้ แต่คุณจะทราบแน่ชดั วา่ กาลงั ทาอะไรอยู่

if (client) { // If a new client connects,

Serial.println("New Client."); // print a message out in the serial port

String currentLine = ""; // make a String to hold incoming data

while (client.connected()) { // loop while the client's connected

if (client.available()) { // if there's bytes to read

char c = client.read(); // read a byte, then

Serial.write(c); // print it out the serial monitor

header += c;

if (c == '\n') { // if the byte is a newline character

// if the current line is blank, you got two newline characters in a row.

// that's the end of the client HTTP request, so send a response:

if (currentLine.length() == 0) {

// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)

// and content-type so the client knows what's coming, then a blank line:

client.println("HTTP/1.1 200 OK");

client.println("Content-type:text/html");

client.println("Connection: close");

client.println();

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 33

ส่วนถดั ไปของคาสงั่ if และ else จะตรวจสอบวา่ ป่ ุมใดถูกกดในหนา้ เวบ็ ของคุณและควบคุมผลลพั ธ์ตามน้นั
อยา่ งที่เราเห็นก่อนหนา้ น้ีเราขอ URL ที่แตกตา่ งกนั ข้ึนอยกู่ บั ป่ ุมท่ีเรากด

// turns the GPIOs on and off
if (header.indexOf("GET /5/on") >= 0) {

Serial.println("GPIO 5 on");
output5State = "on";
digitalWrite(output5, HIGH);
} else if (header.indexOf("GET /5/off") >= 0) {
Serial.println("GPIO 5 off");
output5State = "off";
digitalWrite(output5, LOW);
} else if (header.indexOf("GET /4/on") >= 0) {
Serial.println("GPIO 4 on");
output4State = "on";
digitalWrite(output4, HIGH);
} else if (header.indexOf("GET /4/off") >= 0) {
Serial.println("GPIO 4 off");
output4State = "off";
digitalWrite(output4, LOW);
}

ตวั อยา่ งเช่นหากคุณกดป่ ุม GPIO 5 ON URL จะเปล่ียนเป็ นที่อยู่ IP ESP ตามดว้ ย / 5 / ON และเราจะไดร้ ับขอ้ มูลดงั กล่าวในส่วน
หวั HTTP ดงั น้นั เราสามารถตรวจสอบไดว้ า่ ส่วนหวั มีนิพจน์ GET / 5 / on หรือไม่

หากมีอยรู่ หสั จะพมิ พข์ อ้ ความบนมอนิเตอร์แบบอนุกรมเปล่ียนตวั แปร output5State เป็นเปิ ดและเปิ ดไฟ LED

ซ่ึงใชง้ านไดใ้ นทานองเดียวกนั กบั ป่ ุมอ่ืน ๆ ดงั น้นั หากคุณตอ้ งการเพมิ่ ผลลพั ธ์เพมิ่ เติมคุณควรแกไ้ ขส่วนน้ีของโคด้ เพือ่ รวมเอาไว้

DisplayingtheHTMLWebPage

สิ่งตอ่ ไปที่คุณตอ้ งทาคือสร้างหนา้ เวบ็ ESP8266 จะส่งการตอบกลบั ไปยงั เบราวเ์ ซอร์ของคุณพร้อมกบั ขอ้ ความ HTML เพอ่ื แสดง
หนา้ เวบ็

หนา้ เวบ็ ถูกส่งไปยงั ไคลเอนตโ์ ดยใชฟ้ ังกช์ นั client.println () คุณควรป้อนส่ิงที่คุณตอ้ งการส่งใหก้ บั ลูกคา้ เป็นอาร์กิวเมนต์

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 34

ขอ้ ความแรกที่คุณควรส่งคือบรรทดั ต่อไปน้ีที่บ่งบอกวา่ เรากาลงั ส่ง HTML

<!DOCTYPE html><html>

จากน้นั บรรทดั ต่อไปน้ีจะทาใหห้ นา้ เวบ็ ตอบสนองในเวบ็ เบราวเ์ ซอร์ใดก็ได้

client.println("<head><meta name=\"viewport\" content=\"width=device-width,
initial-scale=1\">");

รายการถดั ไปใชเ้ พื่อป้องกนั คาขอที่เก่ียวขอ้ งกบั ไอคอน Fav – คุณไมจ่ าเป็นตอ้ งกงั วลเกี่ยวกบั บรรทดั น้ี

client.println("<link rel=\"icon\" href=\"data:,\">");

Styling the Web Page
ตอ่ ไปเรามี CSS เพอื่ จดั รูปแบบป่ ุมและลกั ษณะของหนา้ เวบ็ เราเลือกแบบอกั ษร Helvetica กาหนดเน้ือหาที่จะแสดงเป็นบล็อกและ
จดั ตาแหน่งท่ีก่ึงกลาง

client.println("<style>html { font-family: Helvetica; display: inline-block;
margin: 0px auto; text-align: center;}");

เราจดั รูปแบบป่ ุมของเราดว้ ยคุณสมบตั ิบางอยา่ งเพื่อกาหนดสีขนาดเส้นขอบ ...

client.println(".button { background-color: #195B6A; border: none; color:
white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor:
pointer;}");

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 35

จากน้นั เราจะกาหนดรูปแบบสาหรับป่ ุมท่ีสองโดยมีคุณสมบตั ิท้งั หมดของป่ ุมที่เราไดก้ าหนดไวก้ ่อนหนา้ น้ี แตใ่ ชส้ ีท่ีตา่ งออกไป
นี่จะเป็นรูปแบบของป่ ุมปิ ด

client.println(".button2 {background-color: #77878A;}</style></head>");

SettingtheWebPageFirstHeading
ในบรรทดั ถดั ไปคุณต้งั ค่าส่วนหวั แรกของหนา้ เวบ็ คุณสามารถเปล่ียนขอ้ ความน้ีเป็นอะไรก็ไดท้ ี่คุณตอ้ งการ

client.println("<body><h1>ESP8266 Web Server</h1>");

DisplayingtheButtonsandCorrespondingState
จากน้นั คุณเขียนยอ่ หนา้ เพื่อแสดงสถานะปัจจุบนั ของ GPIO 5 อยา่ งที่คุณเห็นเราใชต้ วั แปร output5State เพอื่ ใหส้ ถานะอปั เดต
ทนั ทีเมื่อตวั แปรน้ีเปลี่ยนแปลง

client.println("<p>GPIO 5 - State " + output5State + "</p>");

จากน้นั เราจะแสดงป่ ุมเปิ ดหรือปิ ดข้ึนอยกู่ บั สถานะปัจจุบนั ของ GPIO

if (output5State=="off") {
client.println("<p><a href=\"/5/on\"><button class=\"button\">ON</button></a></p>");

} else {
client.println("<p><a href=\"/5/off\"><button class=\"button

button2\">OFF</button></a></p>");
}

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 36

เราใชข้ ้นั ตอนเดียวกนั สาหรับ GPIO 4

// Display current state, and ON/OFF buttons for GPIO 4
client.println("<p>GPIO 4 - State " + output4State + "</p>");
// If the output4State is off, it displays the ON button
if (output4State=="off") {

client.println("<p><a href=\"/4/on\"><button class=\"button\">ON</button></a></p>");
} else {

client.println("<p><a href=\"/4/off\"><button class=\"button button2\">OFF</button></a></p>");

}

Closingthe Connection

สุดทา้ ยเมื่อการตอบกลบั สิ้นสุดลงเราจะลา้ งตวั แปรส่วนหวั และหยดุ การเชื่อมตอ่ กบั ไคลเอนตด์ ว้ ย client.stop ()

// Clear the header variable
header = "";
// Close the connection
client.stop();

TakingitFurther

เมื่อคุณทราบวธิ ีการทางานของโคด้ แลว้ คุณสามารถแกไ้ ขโคด้ เพ่ือเพิ่มผลลพั ธ์เพ่มิ เติมหรือแกไ้ ขหนา้ เวบ็ ของคุณได้ ในการแกไ้ ข
หนา้ เวบ็ ของคุณคุณอาจตอ้ งรู้พ้นื ฐาน HTML และ CSS แทนท่ีจะควบคุม LED สองดวงคุณสามารถควบคุมรีเลยเ์ พื่อควบคุม
อุปกรณ์อิเลก็ ทรอนิกส์ใด ๆ

ถา้ คุณชอบ ESP8266 อยา่ ลืมตรวจสอบหลกั สูตรของเราเก่ียวกบั ระบบอตั โนมตั ิในบา้ นดว้ ย ESP8266

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 37

DownloadOtherRNTProducts

Random Nerd Tutorials เป็นแหล่งขอ้ มูลออนไลน์ท่ีมีโครงการอิเล็กทรอนิกส์บทแนะนาและบทวจิ ารณ์ การสร้างและโพสต์
โปรเจก็ ตใ์ หม่ตอ้ งใชเ้ วลามาก ในขณะน้ี Random Nerd Tutorials มีบลอ็ กโพสตฟ์ รีมากกวา่ 200 รายการพร้อมบทช่วยสอนท่ี
สมบูรณ์โดยใชฮ้ าร์ดแวร์โอเพนซอร์สท่ีทุกคนสามารถอ่านเรียบเรียงและนาไปใชก้ บั โครงการของตนเองได้ นอกจากน้ียงั มี
"เน้ือหาระดบั พรีเมียม" เพ่ือใหม้ ีบทแนะนาฟรี เพือ่ สนบั สนุน Random Nerd Tutorials คุณสามารถดาวน์โหลดเน้ือหาพรีเมียมได้
ท่ีนี่ download premium content here.
Home Automation Using ESP8266
(3rdEdition)
หลกั สูตรน้ีเป็ นคาแนะนาทีละข้นั ตอนที่ออกแบบมาเพื่อช่วยคุณเร่ิมตน้ กบั ESP8266 หากคุณยงั ใหมก่ บั โลกของ ESP8266 eBook
เล่มน้ีเหมาะสาหรับคุณ หากคุณเคยใช้ ESP8266 มาก่อนฉนั มนั่ ใจวา่ คุณจะไดเ้ รียนรู้สิ่งใหม่ ๆ. Read product description.

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 38

LearnESP32withArduinoIDE
หลกั สูตรน้ีเป็ นหลกั สูตรเชิงปฏิบตั ิที่คุณจะไดเ้ รียนรู้วธิ ีใชป้ ระโยชน์สูงสุดจาก ESP32 โดยใช้ Arduino IDE น่ีคือคาแนะนาฉบบั
สมบูรณ์ของเราในการต้งั โปรแกรม ESP32 ดว้ ย Arduino IDE รวมถึงโปรเจก็ ตค์ าแนะนาและเคล็ดลบั !Read product description.

BuildaHomeAutomationSystemfor$100
เรียนรู้ Raspberry Pi, ESP8266, Arduino และ Node-RED น่ีเป็นหลกั สูตรระดบั พรีเม่ียมทีละข้นั ตอนเพอ่ื ใหค้ ุณสร้างระบบ
อตั โนมตั ิในบา้ นในโลกแห่งความเป็นจริงโดยใชฮ้ าร์ดแวร์และซอฟตแ์ วร์โอเพนซอร์ส Read product description.

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 39

20EasyRaspberryPiProjects
หนงั สือ Easy Raspberry Pi Projects 20 เล่มเป็นคอลเลกชนั ที่เป็นมิตรกบั ผเู้ ร่ิมตน้ ของโครงการอิเลก็ ทรอนิกส์โดยใช้ Raspberry
Pi หนงั สือเล่มน้ีเป็นความร่วมมือกบั NoStarch Press Publisher และมีจาหน่ายในรูปแบบปกออ่ น. Read productdescription.

Arduino Step-by-step Projects
หลกั สูตร Arduino น้ีเป็นการรวบรวมโครงการ 25 โครงการที่แบ่งออกเป็น 5 โมดูลที่คุณสามารถสร้างไดโ้ ดยทาตามคาแนะนาที
ละข้นั ตอนท่ีชดั เจนพร้อมแผนผงั และรหสั ที่ดาวน์โหลดได้ . Read product description.

ขอบคุณท่ีสละเวลาอ่านงานของฉนั ! ขอใหโ้ ชคดีกบั ทุกโครงการของคุณ
- รุยซานโตส Rui Santos

P.S. Click here for more courses and eBooks like this one.

Click here to Download other Courses and eBooks

http://randomnerdtutorials.com/products

LATEST PROJECTS – DOWNLOAD MORE RNT PRODUCTS – HOME AUTOMATION USING ESP8266 40