ESP32 Web Servers, Configuration Portals and OTA Updates

10 Lektionen in dieser Stufe

1. Serving a Web Page from the ESP32
   Start an HTTP server and return an HTML page to a browser. · Lab: Serve a page that shows uptime and refreshes on reload.
2. Routes, Query Parameters and HTML Forms
   Handle several URLs and read values submitted by the user. · Lab: Switch an LED and set a brightness value from a form.
3. A JSON REST API for Sensors and Outputs
   Expose readings and controls as clean endpoints usable by scripts and apps. · Lab: Implement GET for sensor data and POST for the relay and test both from the command line.
4. Storing Web Assets in LittleFS
   Upload HTML, CSS and script files to flash and serve them from the filesystem. · Lab: Move the page out of the sketch into files and add a stylesheet.
5. An Asynchronous Web Server and Non-Blocking Handlers
   Serve multiple clients without stalling the main loop. · Lab: Convert the server to an asynchronous library and verify sensor timing stays steady under load.
6. Live Updates with WebSockets
   Push values to the browser instantly instead of polling. · Lab: Stream temperature to a live chart and send switch commands back over the same socket.
7. Persistent Settings in NVS with Preferences
   Store configuration in the ESP32's key-value flash storage with defaults and a reset option. · Lab: Save setpoint and device name from the web page and restore them after reboot.
8. First-Time Setup: Access-Point Mode and a Captive Portal
   Let users enter Wi-Fi credentials through a setup page instead of source code. · Lab: Start an access point when no credentials exist, collect them in a portal and reboot into station mode.
9. Local Names with mDNS
   Reach the device by name on the local network instead of by address. · Lab: Make the thermostat available as a .local name and test it from two devices.
10. Over-the-Air Firmware Updates on the Local Network
    Upload new firmware wirelessly with password protection and progress feedback. · Lab: Update the running device over Wi-Fi and confirm settings are kept.

Abschlussprojekt

A web-controlled thermostat relay with live browser dashboard, first-time setup portal, stored settings and over-the-air firmware updates.

Teile für diese Stufe

• 1 × ESP32 development board
• 1 × USB cable matching the board
• 1 × Solderless breadboard 830 points
• 1 × Jumper wire set male-male and male-female
• 1 × Relay module 3.3 V compatible single channel
• 1 × BME280 pressure, humidity and temperature module
• 3 × LED 5 mm assorted
• 3 × Resistor 220 ohm
• 1 × Tactile push button
• 1 × OLED display 0.96 inch I2C 128x64
• 1 × Low-voltage lamp or fan 5–12 V
• 1 × External 5 V power supply 3 A

In jeder Lektion legst du die passenden Teile direkt in den Warenkorb. Arduino-kompatibel →