✨ Making Wi-Fi Setup Seamless on ESP32 with WiFiManager | ✨ 在 ESP32 專案中使用 WiFiManager，讓連網不再是麻煩事

No more hardcode your WiFi SSID and Password in your Arduino Sketch.... | 再也不用硬編碼 WiFi 密碼了，ESP32 自動連線、隨插即用！

Oct 01, 2025

Have you ever had to hardcode your SSID and password directly into your ESP32 sketches — re-uploading code every time you change networks? This quickly becomes frustrating, especially when building scalable, portable, or classroom-friendly projects.

That’s exactly what I solved in my latest ESP32 workshop — by integrating a powerful tool called WiFiManager into our IoT web server projects.

你是否曾在每次更換 WiFi 時，都需要重新打開 Arduino IDE，把 SSID 和密碼寫入 ESP32，再重新上傳一次程式？

這在教學、產品測試或專案部署時，變得非常麻煩。

這週我帶學生使用了一個超實用的工具 —— WiFiManager，只要設定一次，ESP32 以後就會自動連線。萬一找不到 WiFi，還能自動開啟一個設定畫面，用手機即可設定新 WiFi。

🔧 What is WiFiManager?

WiFiManager is a library that enables your ESP32 or ESP8266 to:

Automatically reconnect to saved WiFi credentials
Launch a captive portal if it fails to connect — allowing you to enter new credentials from any smartphone/laptop
Avoid the need to hardcode WiFi passwords into your sketches

It’s perfect for makers, educators, and anyone shipping ESP32 projects to friends, customers, or classrooms.

🔧 什麼是 WiFiManager？

WiFiManager 是一個 ESP32 的 Wi-Fi 管理程式庫，它能夠：

自動連線上次使用的 WiFi
若無法連線，則開啟「設定熱點」，你可以用手機輸入新的 WiFi 名稱與密碼
設定完成後自動重連，並儲存資訊

對於教學現場、外包專案、產品開發來說，WiFiManager 大大簡化了流程。

🚀 Try This Demo Yourself

Here’s a working example we used in class.
It connects to WiFi using WiFiManager, reads temperature/humidity from a DHT11 sensor, displays the data on an OLED screen, and serves a live-updating web page via AJAX.

🧠 Bonus: No page reloads! Data is refreshed every 2 seconds via JSON API.

✅ Required Hardware

ESP32 board
DHT11 sensor (connected to pin D25)
SSD1306 128x64 OLED (I2C)
WiFiManager library installed

🚀 我們的實作案例

這是一個課堂上實作的範例。
ESP32 會使用 WiFiManager 自動連網，從 DHT11 感測器讀取溫溼度，在 OLED 顯示，並透過網頁伺服器 (AJAX) 即時顯示資料。

🧠 附加功能：每 2 秒自動更新數據，不需重新整理頁面。

✅ 所需元件

ESP32 開發板
DHT11 溫溼度感測器（接在 GPIO25）
128x64 SSD1306 OLED（使用 I2C）
安裝好 WiFiManager 函式庫

🧪 Complete Arduino Code

#include <WiFi.h>
#include <WiFiManager.h>
#include <WebServer.h>
#include <DHT.h>
#include <Adafruit_SSD1306.h>
#include <Adafruit_GFX.h>
#include <Wire.h>

#define DHTPIN 25
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);

#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);

WebServer server(80);
float temperature, humidity;
String ipAddress;

const char index_html[] PROGMEM = R”rawliteral(
<!DOCTYPE html><html><head>
  <meta name=’viewport’ content=’width=device-width, initial-scale=1’>
  <title>ESP32 AJAX Sensor</title>
  <style>
    body { font-family: Arial; text-align: center; margin-top: 40px; }
    .card { border: 1px solid #ccc; padding: 16px; border-radius: 8px; display: inline-block; }
  </style></head><body>
  <h2>🌡️ ESP32 Sensor Dashboard</h2>
  <div class=’card’>
    <p><b>Temp:</b> <span id=’temp’>--</span> °C</p>
    <p><b>Humidity:</b> <span id=’hum’>--</span> %</p>
    <p><b>WiFi:</b> %WIFI%</p>
    <p><b>IP:</b> %IP%</p>
  </div>
  <script>
    setInterval(() => {
      fetch(’/json’)
        .then(res => res.json())
        .then(data => {
          document.getElementById(’temp’).textContent = data.temp.toFixed(1);
          document.getElementById(’hum’).textContent = data.hum.toFixed(1);
        });
    }, 2000);
  </script></body></html>
)rawliteral”;

String processor(const String& var) {
  if (var == “WIFI”) return WiFi.SSID();
  if (var == “IP”) return ipAddress;
  return “”;
}

void handleJson() {
  String json = “{”;
  json += “\”temp\”:” + String(temperature, 1) + “,”;
  json += “\”hum\”:” + String(humidity, 1);
  json += “}”;
  server.send(200, “application/json”, json);
}

void updateOLED() {
  display.clearDisplay();
  display.setTextSize(1);
  display.setTextColor(WHITE);
  display.setCursor(0, 0);
  display.println(”Temp: “ + String(temperature, 1) + “ C”);
  display.println(”Hum : “ + String(humidity, 1) + “ %”);
  display.println(”--------------------”);
  display.println(”WiFi: “ + WiFi.SSID());
  display.println(”IP  : “ + ipAddress);
  display.display();
}

void setup() {
  Serial.begin(115200);
  dht.begin();

  if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    Serial.println(”OLED failed”); for (;;);
  }
  display.clearDisplay();

  WiFiManager wm;
  bool res = wm.autoConnect(”ESP32-Setup”);
  if (!res) {
    Serial.println(”Failed to connect. Rebooting...”);
    ESP.restart();
  }

  ipAddress = WiFi.localIP().toString();
  Serial.println(”Connected: “ + ipAddress);

  server.on(”/”, HTTP_GET, []() {
    String html = index_html;
    html.replace(”%WIFI%”, WiFi.SSID());
    html.replace(”%IP%”, ipAddress);
    server.send(200, “text/html”, html);
  });

  server.on(”/json”, handleJson);
  server.begin();
}

void loop() {
  server.handleClient();
  temperature = dht.readTemperature();
  humidity = dht.readHumidity();
  if (!isnan(temperature) && !isnan(humidity)) updateOLED();
  delay(5000);
}

💡 What You Just Learned

How to use WiFiManager to configure ESP32 WiFi without editing code
Serve sensor data via JSON endpoint for AJAX or mobile apps
Display live data on OLED and webpage
Great entry to RESTful IoT concepts for students or workshops

💡 這堂課學生學會了什麼？

使用 WiFiManager 讓 ESP32 自動連網、彈出設定頁
使用 AJAX 定時抓取 /json API 資料
同時在 OLED 與瀏覽器上顯示資料
實作 IoT 中常見的 即時資料展示 與 REST API 概念

🛠️ Project Breakdown

We upgraded a DHT11 sensor + OLED + Web Server project with WiFiManager. Here’s what the improved version does:

✅ Step 1: Smart Wi-Fi Setup

When powered on:

If ESP32 already knows a WiFi network, it connects automatically.
If it doesn’t, it creates a WiFi hotspot (e.g., ESP32-Setup).
You connect using your phone, and a portal opens where you input WiFi details.

No code change needed. Just enter credentials once!

✅ Step 2: Auto-Connecting Web Server

Once connected:

ESP32 starts a web server (/) showing live temperature and humidity from the DHT11 sensor using AJAX auto-refresh.
The OLED screen displays sensor readings and current IP address.
We added a /json API endpoint to expose sensor data in JSON format (machine-readable).

✅ Step 3: Classroom Integration

In our classroom setting:

Each student configured their ESP32 with their own smartphone.
No need to flash WiFi credentials via code.
Students used the API endpoint from each other’s devices to simulate RESTful data exchange between IoT nodes.

💡 Why It Matters

This approach eliminates WiFi friction — making your ESP32 projects more:

User-friendly: No more recompiling code to change WiFi.
Deployable: Ship a project to someone, and they can set it up themselves.
Scalable: In a classroom or commercial setting, managing credentials across 10–100 devices becomes easy.

For IoT, usability is just as important as sensors and displays.

💬 Ready to Try It?

If you’re interested in building this step-by-step:

✅ Start from a basic web server with DHT11 + OLED
✅ Add WiFiManager to handle smart WiFi setup
✅ Add /json endpoint and use AJAX to update the webpage without reloading
✅ Use IP + OLED to show current status

Let me know if you’d like me to share the full code or classroom worksheets — happy to help!

📩 Subscribe for More

I’ll be sharing more on:

ESP32 + Firebase
Mobile-friendly dashboards for IoT
Classroom-friendly STEM projects with real-world impact

👉 Subscribe to follow the full ESP32 Web Server series and get all templates + code updates!

Would you like this article exported as a Markdown .md file or Substack-ready HTML for direct use? I can also include:

Screenshots of the dashboard or OLED display
Diagrams of the hardware setup
Suggested hashtags or titles for discovery

Let me know how you’d like to post it.

📬 喜歡這種教學內容嗎？

我會繼續分享：

Firebase 連接教學
更進階的 IoT 儀表板設計
AI 與 ESP32 的整合應用
專為學生與教師設計的模組化課程

👉 點我訂閱電子報，每週都能學到新的技能！

Maker Kluang | 居鑾創客邦

Discussion about this post

Ready for more?