Introduction

In this tutorial, we will learn how to connect an ESP32 to Wi-Fi and set up a simple web server using the AsyncWebServer library. This will allow us to monitor temperature data in real-time. We’ll be using a DHT11 or DHT22 temperature and humidity sensor for data collection.

Prerequisites

• Basic knowledge of Arduino IDE and programming concepts.
• ESP32 development board.
• DHT11 or DHT22 temperature and humidity sensor.
• Jumper wires for connections.
• Arduino IDE installed on your computer.
• AsyncWebServer library installed in the Arduino IDE.
• DHT sensor library installed in the Arduino IDE.

Parts/Tools

• ESP32 development board
• DHT11 or DHT22 sensor
• Jumper wires
• Computer with Arduino IDE

Steps

1. Setup the Hardware
   1. Connect the DHT sensor to the ESP32 as follows:
   • VCC (Sensor) to 3.3V (ESP32)
   • GND (Sensor) to GND (ESP32)
   • Data (Sensor) to GPIO Pin (e.g., GPIO 23)
2. Install Required Libraries
   1. Open the Arduino IDE.
   2. Go to Sketch > Include Library > Manage Libraries.
   3. Search for “AsyncWebServer” and “DHT sensor library”. Install both.
3. Write the Code

   Open a new sketch in Arduino IDE and use the following code:

   #include <WiFi.h>
   #include <AsyncTCP.h>
   #include <ESPAsyncWebServer.h>
   #include <DHT.h>
   
   #define DHTPIN 23
   #define DHTTYPE DHT22
   
   DHT dht(DHTPIN, DHTTYPE);
   const char* ssid = "your_SSID";
   const char* password = "your_PASSWORD";
   
   AsyncWebServer server(80);
   
   void setup() {
       Serial.begin(115200);
       dht.begin();
   
       WiFi.begin(ssid, password);
       while (WiFi.status() != WL_CONNECTED) {
           delay(1000);
           Serial.println("Connecting to WiFi...");
       }
       Serial.println("Connected to WiFi");
   
       server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
           request->send(200, "text/html", "
   ESP32 Temperature Monitor
   Temperature: " + String(dht.readTemperature()) + " ℃
   ");
       });
   
       server.begin();
   }
   
   void loop() {
       // Nothing here
   }
   

   Replace your_SSID and your_PASSWORD with your actual Wi-Fi credentials.

4. Upload the Code to ESP32
   1. Select the correct board from Tools > Board (ESP32 Dev Module).
   2. Select the correct port from Tools > Port.
   3. Click on the upload button in the Arduino IDE.
5. Access the Web Server
   1. Open the Serial Monitor in Arduino IDE.
   2. Note down the IP address displayed after successful Wi-Fi connection.
   3. Open a web browser and enter the IP address.

Troubleshooting

• Wi-Fi Connection Issues:

  If the ESP32 doesn’t connect to Wi-Fi, double-check your SSID and password. Make sure the ESP32 is within range of the Wi-Fi network.

• Sensor Not Working:

  If you are not seeing temperature readings, ensure that the sensor is wired correctly and is powered properly.

• Web Server Not Responding:

  Make sure the ESP32 has successfully connected to Wi-Fi and check the IP address in the Serial Monitor.

Conclusion

In this tutorial, we successfully connected the ESP32 to Wi-Fi and set up a simple web server using the AsyncWebServer library to monitor temperature data in real-time. You can extend this project by adding more features, such as humidity monitoring or logging data to a cloud service.