สารบัญ:
- เสบียง
- ขั้นตอนที่ 1: สร้างวงจร
- ขั้นตอนที่ 2: ภาพรวมโดยย่อของระบบไฟล์ SPIFFS
- ขั้นตอนที่ 3: การติดตั้ง SPIFFS Bootloader บน Mac OS
- ขั้นตอนที่ 4: การติดตั้งไลบรารี
- ขั้นตอนที่ 5: สร้างไฟล์ Index.html และ Style.css ด้วยเนื้อหาต่อไปนี้
- ขั้นตอนที่ 6: รหัส Arduino
- ขั้นตอนที่ 7: อัปโหลดโค้ด Arduino และไฟล์โดยใช้ SPIFFS Loader
- ขั้นตอนที่ 8: กำหนดที่อยู่ IP ของเว็บเซิร์ฟเวอร์ ESP32
- ขั้นตอนที่ 9: ทดสอบ Local Web Server
- ขั้นตอนที่ 10: เข้าถึงเว็บเซิร์ฟเวอร์ภายในเครื่องได้จากทุกที่ในโลกโดยใช้ Ngrok
วีดีโอ: LED ที่ควบคุมโดยอินเทอร์เน็ตโดยใช้เว็บเซิร์ฟเวอร์ที่ใช้ ESP32: 10 ขั้นตอน
2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:04
ภาพรวมโครงการ
ในตัวอย่างนี้ เราจะหาวิธีสร้างเว็บเซิร์ฟเวอร์ที่ใช้ ESP32 เพื่อควบคุมสถานะ LED ซึ่งสามารถเข้าถึงได้จากทุกที่ในโลก คุณจะต้องใช้คอมพิวเตอร์ Mac สำหรับโครงการนี้ แต่คุณสามารถเรียกใช้ซอฟต์แวร์นี้ได้แม้ในคอมพิวเตอร์ราคาถูกและใช้พลังงานต่ำ เช่น Raspberry Pi
การเตรียม ESP32 ด้วย Arduino IDE
ในการเริ่มโปรแกรม ESP32 โดยใช้ Arduino IDE และภาษาการเขียนโปรแกรม Arduino คุณจะต้องมีโปรแกรมเสริมพิเศษ อ่านเกี่ยวกับวิธีการเตรียม Arduino IDE สำหรับ ESP32 บน Mac OS ตามลิงค์ต่อไปนี้
เสบียง
สำหรับบทช่วยสอนนี้ คุณจะต้องมีสิ่งต่อไปนี้:
- บอร์ดพัฒนา ESP325mm
- LEDResistor 220ohm
- จอ LCD 16x2 พร้อมโมดูล I2C
- เขียงหั่นขนม
- สายจัมเปอร์
- สายไมโคร USB
ขั้นตอนที่ 1: สร้างวงจร
ดำเนินการเชื่อมต่อตามที่แสดงในแผนผังต่อไปนี้ด้านล่าง
เริ่มต้นด้วยการเชื่อมต่อเอาท์พุตแรงดันไฟ 3V3 บนบอร์ดบอร์ด ESP32 และ GNDto เชื่อมต่อ LED ผ่านตัวต้านทานกับ ESP32 โดยใช้ GPIO พิน 23 เป็นพินเอาต์พุตดิจิตอล หลังจากนั้น ต่อขา SDA ของจอ LCD ขนาด 16x2 เข้ากับขา GPIO ขา 21 และ SCL กับขา GPIO 22
ขั้นตอนที่ 2: ภาพรวมโดยย่อของระบบไฟล์ SPIFFS
SPIFFS ย่อมาจาก “Serial Peripheral Interface Flash File System” นั่นคือระบบไฟล์สำหรับหน่วยความจำแฟลชที่ถ่ายโอนข้อมูลผ่าน SPI ดังนั้น SPIFFS จึงเป็นระบบไฟล์ที่เรียบง่ายซึ่งออกแบบมาสำหรับไมโครคอนโทรลเลอร์พร้อมชิปแฟลชที่ส่งข้อมูลผ่านบัส SPI (เช่น หน่วยความจำแฟลช ESP32)
SPIFFS มีประโยชน์มากที่สุดสำหรับใช้กับ ESP32 ในสถานการณ์ต่อไปนี้:
- การสร้างไฟล์สำหรับจัดเก็บการตั้งค่า
- การจัดเก็บข้อมูลถาวร
- การสร้างไฟล์เพื่อเก็บข้อมูลจำนวนเล็กน้อย (แทนที่จะใช้การ์ด microSD สำหรับสิ่งนี้)
- การจัดเก็บไฟล์ HTML และ CSS สำหรับสร้างเว็บเซิร์ฟเวอร์
ขั้นตอนที่ 3: การติดตั้ง SPIFFS Bootloader บน Mac OS
คุณสามารถสร้าง บันทึก และเขียนข้อมูลไปยังไฟล์ที่จัดเก็บไว้ในระบบไฟล์ ESP32 ได้โดยตรงโดยใช้ปลั๊กอินบน Arduino IDE
ก่อนอื่น ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Arduino IDE เวอร์ชันล่าสุดแล้ว จากนั้นทำดังต่อไปนี้:
- เปิดลิงก์ต่อไปนี้และดาวน์โหลดไฟล์เก็บถาวร “ESP32FS-1.0.zip”
- ไปที่ไดเร็กทอรี Arduino IDE ซึ่งอยู่ในโฟลเดอร์เอกสาร
- สร้างโฟลเดอร์เครื่องมือหากไม่มีอยู่ ภายในไดเร็กทอรี tools ให้สร้างโฟลเดอร์อื่น ESP32FS ภายใน ESP32FS สร้างอีกอันหนึ่งซึ่งเรียกว่าเครื่องมือ
- เปิดเครื่องรูดไฟล์ ZIP ที่ดาวน์โหลดในขั้นตอนที่ 1 ไปยังโฟลเดอร์เครื่องมือ
- รีสตาร์ท Arduino IDE ของคุณ
- ในการตรวจสอบว่าติดตั้งปลั๊กอินสำเร็จหรือไม่ ให้เปิด Arduino IDE และคลิกที่ "เครื่องมือ" และตรวจสอบว่ามีรายการ "ESP32 Sketch Data Upload" ในเมนูนี้หรือไม่
ขั้นตอนที่ 4: การติดตั้งไลบรารี
ไลบรารี ESPAsyncWebServer และ AsyncTCP ช่วยให้คุณสร้างเว็บเซิร์ฟเวอร์โดยใช้ไฟล์จากระบบไฟล์ของ ESP32 สำหรับข้อมูลเพิ่มเติมเกี่ยวกับไลบรารีเหล่านี้ ตรวจสอบลิงค์ต่อไปนี้
ติดตั้งไลบรารี ESPAsyncWebServer
- คลิกที่นี่เพื่อดาวน์โหลดไฟล์ ZIP ของไลบรารี
- เปิดเครื่องรูดไฟล์เก็บถาวรนี้ คุณควรได้รับโฟลเดอร์ ESPAsyncWebServer-master
- เปลี่ยนชื่อเป็น "ESPAsyncWebServer"
ติดตั้งไลบรารี AsyncTCP
- คลิกที่นี่เพื่อดาวน์โหลดไฟล์ ZIP ของไลบรารี
- เปิดเครื่องรูดไฟล์เก็บถาวรนี้ คุณควรได้รับโฟลเดอร์ AsyncTCP-master
- เปลี่ยนชื่อเป็น AsyncTCP
ย้ายโฟลเดอร์ ESPAsyncWebServer และ AsyncTCP ไปยังโฟลเดอร์ไลบรารี ซึ่งอยู่ภายในไดเร็กทอรี Documents
สุดท้าย ให้รีสตาร์ท Arduino IDE
ขั้นตอนที่ 5: สร้างไฟล์ Index.html และ Style.css ด้วยเนื้อหาต่อไปนี้
เทมเพลต HTML/CSS สำหรับปุ่มสลับถูกนำมาจากแหล่งที่มาต่อไปนี้
ขั้นตอนที่ 6: รหัส Arduino
โดยหลักแล้ว รหัสจะขึ้นอยู่กับรหัส Arduino ที่นำมาจากเว็บเซิร์ฟเวอร์ ESP32 โดยใช้ SPIFFS และวิธีใช้ I2C LCD กับ ESP32 บน Arduino IDE
ขั้นตอนที่ 7: อัปโหลดโค้ด Arduino และไฟล์โดยใช้ SPIFFS Loader
- เปิดโฟลเดอร์สเก็ตช์ของรหัส Arduino
- ภายในโฟลเดอร์นี้ ให้สร้างโฟลเดอร์ใหม่ชื่อ “data”
- ภายในโฟลเดอร์ data คุณต้องใส่ index.html และ style.css
- อัพโหลดโค้ด Arduino
- จากนั้นหากต้องการอัปโหลดไฟล์ ให้คลิกที่ Arduino IDE บนเครื่องมือ > ESP32 Sketch Data Upload
ขั้นตอนที่ 8: กำหนดที่อยู่ IP ของเว็บเซิร์ฟเวอร์ ESP32
สามารถพบได้ในสองวิธี
- มอนิเตอร์แบบอนุกรมบน Arduino IDE (เครื่องมือ> มอนิเตอร์แบบอนุกรม)
- บนจอ LCD
ขั้นตอนที่ 9: ทดสอบ Local Web Server
ถัดไป เปิดเว็บเบราว์เซอร์ที่คุณเลือกและวางที่อยู่ IP ต่อไปนี้ในแถบที่อยู่ คุณควรได้ผลลัพธ์ที่คล้ายกับภาพหน้าจอด้านล่าง
ขั้นตอนที่ 10: เข้าถึงเว็บเซิร์ฟเวอร์ภายในเครื่องได้จากทุกที่ในโลกโดยใช้ Ngrok
Ngrok เป็นแพลตฟอร์มที่ให้คุณจัดระเบียบการเข้าถึงระยะไกลไปยังเว็บเซิร์ฟเวอร์หรือบริการอื่นๆ ที่ทำงานบนพีซีของคุณจากอินเทอร์เน็ตภายนอก การเข้าถึงถูกจัดระเบียบผ่านอุโมงค์ที่ปลอดภัยซึ่งสร้างขึ้นเมื่อเริ่มต้น ngrok
- ตามลิงค์นี้และลงทะเบียน
- หลังจากสร้างบัญชีแล้ว ให้เข้าสู่ระบบและไปที่แท็บ "รับรองความถูกต้อง" คัดลอกบรรทัดจากช่อง "Your Tunnel Authtoken"
- คลิกที่แท็บ "ดาวน์โหลด" ในแถบนำทาง เลือกเวอร์ชันของ ngrok ที่ตรงกับระบบปฏิบัติการของคุณและดาวน์โหลด
- เปิดเครื่องรูดโฟลเดอร์ที่ดาวน์โหลดและเรียกใช้บรรทัดคำสั่ง
- เชื่อมต่อบัญชีของคุณโดยป้อนคำสั่งต่อไปนี้
./ngrok authtoken
เริ่มอุโมงค์ HTTP บนพอร์ต 80
./ngrok http Your_IP_Address:80
หากทำทุกอย่างถูกต้องแล้ว สถานะอุโมงค์ข้อมูลควรเปลี่ยนเป็น "ออนไลน์" และลิงก์เปลี่ยนเส้นทางควรปรากฏในคอลัมน์ "การส่งต่อ" เมื่อป้อนลิงก์นี้ในเบราว์เซอร์ คุณจะสามารถเข้าถึงเว็บเซิร์ฟเวอร์ได้จากทุกที่ในโลก
แนะนำ:
M5StickC ESP32 & NeoPixels LED Ring สีสุ่ม: 7 ขั้นตอน
M5StickC ESP32 & NeoPixels LED Ring Random Color: ในโครงการนี้ เราจะเรียนรู้วิธีแสดงสีแบบสุ่มบน NeoPixels LED Ring โดยใช้บอร์ด M5StickC ESP32 ชมวิดีโอ
WebApp Puzzle LED Lamp พร้อม ESP32: 5 ขั้นตอน (พร้อมรูปภาพ)
โคมไฟ LED ปริศนาของ WebApp พร้อม ESP32: ฉันเคยเล่นแถบ LED มาหลายปีแล้ว และเพิ่งย้ายมาอยู่ที่บ้านของเพื่อน ซึ่งฉันไม่สามารถทำการเปลี่ยนแปลงครั้งใหญ่ได้ เช่น ติดแถบไฟบนผนัง ดังนั้นฉันจึงรวมโคมไฟที่มี สายไฟเส้นเดียวออกมาเพื่อจ่ายไฟและสามารถวาง
ESP32 Bluetooth Tutorial - วิธีใช้ Bluetooth ในตัวของ ESP32: 5 ขั้นตอน
ESP32 Bluetooth Tutorial | วิธีใช้ Bluetooth ในตัวของ ESP32: สวัสดีทุกคน เนื่องจากบอร์ด ESP32 มาพร้อมกับ WiFi & บลูทูธทั้งคู่ แต่สำหรับโปรเจ็กต์ส่วนใหญ่ เรามักจะใช้แค่ Wifi เราไม่ได้ใช้บลูทูธ ดังนั้นในคำแนะนำนี้ ฉันจะแสดงให้เห็นว่าการใช้บลูทูธของ ESP32 & สำหรับโครงการพื้นฐานของคุณ
เริ่มต้นใช้งาน ESP32 CAM - สตรีมวิดีโอโดยใช้ ESP CAM ผ่าน Wifi - โครงการกล้องรักษาความปลอดภัย ESP32: 8 ขั้นตอน
เริ่มต้นใช้งาน ESP32 CAM | สตรีมวิดีโอโดยใช้ ESP CAM ผ่าน Wifi | โครงการกล้องรักษาความปลอดภัย ESP32: วันนี้เราจะเรียนรู้วิธีใช้บอร์ด ESP32 CAM ใหม่นี้ และวิธีที่เราสามารถเข้ารหัสและใช้เป็นกล้องรักษาความปลอดภัยและรับการสตรีมวิดีโอผ่าน wifi
เริ่มต้นใช้งาน ESP32 - การติดตั้งบอร์ด ESP32 ใน Arduino IDE - ESP32 Blink Code: 3 ขั้นตอน
เริ่มต้นใช้งาน ESP32 | การติดตั้งบอร์ด ESP32 ใน Arduino IDE | รหัสการกะพริบของ ESP32: ในคำแนะนำนี้ เราจะดูวิธีการเริ่มทำงานกับ esp32 และวิธีการติดตั้งบอร์ด esp32 ลงใน Arduino IDE และเราจะตั้งโปรแกรม esp 32 เพื่อเรียกใช้โค้ดกะพริบโดยใช้ arduino ide