WEEK 11 – Networking and Communications

Assignment Documentation

Networking and Communications with ESP32-C3

For this assignment, I worked on the topic of Networking and Communications, using the ESP32-C3 microcontroller as the main device. The purpose of this practice was to understand how an embedded system can communicate through a network and how a computer or mobile device can interact with a microcontroller remotely.

The ESP32-C3 is a useful development board for this assignment because it includes integrated WiFi and Bluetooth Low Energy, which allows the board to communicate without the need for additional networking modules.

In this practice, I first connected the ESP32-C3 to my computer, configured the programming environment, uploaded a basic Blink example to verify that the board was working correctly, and then developed a simple network application to control an LED through a web interface.

ESP32-C3 connected to the computer for programming and testing.

1. Assignment Objective

Main Objective

The main objective of this assignment was to develop a basic networking communication system using an ESP32-C3 board.

Specific Objective	Description
Connect the ESP32-C3 board to the computer	Establish a physical connection using a USB-C cable to program and power the board.
Configure the programming environment	Prepare Arduino IDE with the required ESP32 board package and correct port selection.
Upload a basic Blink program	Verify that the board, LED pin, port, and programming environment are working correctly.
Use WiFi capabilities	Connect the ESP32-C3 to a local wireless network.
Create a simple web application	Host a web interface from the ESP32-C3 to control an LED.
Control an LED from a browser	Send commands from the computer to the ESP32-C3 through the local network.
Document the complete process	Record all the steps, tests, errors, solutions, and final results.

2. Materials and Components

For this practice, I used the following materials and components:

ESP32-C3 development board.
USB-C cable for programming and power.
Computer with Arduino IDE installed.
Internet connection.
Breadboard, if using an external LED.
LED.
Resistor, approximately 220 Ω or 330 Ω.
Jumper wires.
WiFi network.
Web browser.

Component	Function in the Practice
ESP32-C3	Main microcontroller used for WiFi communication and LED control.
USB-C Cable	Used to connect the board to the computer, upload code, and provide power.
LED	Physical output used to visualize the network command.
Resistor	Protects the LED from excessive current.
Computer	Used to program the ESP32-C3 and access the web application.
WiFi Network	Allows communication between the computer and the ESP32-C3.

Materials used for ESP32-C3 networking assignment

Materials and components used for the Networking and Communications assignment.

3. Software Used

Arduino IDE

The Arduino IDE was used to write, compile, and upload the code to the ESP32-C3. It also provided access to the Serial Monitor, which was used to verify the connection status and read the IP address assigned to the board.

ESP32 Board Package

The ESP32 board package was installed in Arduino IDE to allow programming of ESP32-based boards, including the ESP32-C3.

Serial Monitor

The Serial Monitor was used to observe messages printed by the ESP32-C3, including the WiFi connection process and the IP address assigned to the board.

Web Browser

A web browser such as Chrome, Edge, or Firefox was used to open the IP address of the ESP32-C3 and interact with the web server.

Arduino IDE configured for programming the ESP32-C3 board.

4. What is Networking and Communications?

Networking and communications in embedded systems refers to the ability of devices to exchange information with other devices, computers, servers, or users through a communication protocol.

In this assignment, the ESP32-C3 communicates using WiFi. This means that the microcontroller can connect to a local wireless network and exchange information through TCP/IP protocols.

Networking Role	Description
Client	The ESP32-C3 connects to another server and requests information.
Server	The ESP32-C3 hosts a service and other devices connect to it.
Access Point	The ESP32-C3 creates its own WiFi network for other devices to connect.

For this practice, I used the ESP32-C3 as a small web server. This allowed me to open a web page from my computer and send commands to the board.

5. Why Use the ESP32-C3?

The ESP32-C3 was selected because it is a compact and powerful microcontroller with integrated wireless communication. It allows the development of embedded applications that can interact with users or other devices through a network.

ESP32-C3 Feature	Advantage for This Assignment
Built-in WiFi	Allows wireless communication without external modules.
Bluetooth Low Energy	Provides another communication option for future developments.
Arduino IDE compatibility	Makes programming and testing easier.
Small size	Suitable for embedded systems and compact projects.
Web server capability	Allows hosting a simple interface to control outputs.
GPIO pins	Allows interaction with LEDs, sensors, motors, and other components.

6. Initial Board Connection

Step-by-Step Connection Process

Connect the ESP32-C3 to the computer using a USB-C cable.
Open Arduino IDE.
Go to Tools > Board.
Select the ESP32-C3 board.
Go to Tools > Port.
Select the port assigned to the board.
Open the Serial Monitor to verify communication.

7. Installing the ESP32 Board Package

Before programming the ESP32-C3, it was necessary to install the ESP32 board package in Arduino IDE. This package allows Arduino IDE to recognize and program ESP32-based boards.

Installation Process

Open Arduino IDE.
Go to File > Preferences.
In “Additional Boards Manager URLs”, add the ESP32 board URL.
Go to Tools > Board > Boards Manager.
Search for “ESP32”.
Install the ESP32 package.
Restart Arduino IDE if necessary.

After installation, the ESP32-C3 board appeared in the list of available boards.

ESP32 board package installation in Arduino IDE.

8. First Test: Blink Program

Before working with networking, I uploaded a simple Blink program. This step was important because it confirmed that the board was correctly connected, the USB cable worked, the correct port was selected, and the programming environment was ready.

The Blink program turns an LED on and off repeatedly. If the board has a built-in LED, I used the corresponding internal LED pin. If not, I connected an external LED to a GPIO pin.

External LED Connection	Description
LED positive leg	Connected to a GPIO pin.
LED negative leg	Connected to a resistor.
Resistor	Connected to GND.

Basic Blink circuit using the ESP32-C3 and an LED.

9. Blink Code

#define LED_PIN 8

void setup() {
  pinMode(LED_PIN, OUTPUT);
}

void loop() {
  digitalWrite(LED_PIN, HIGH);
  delay(1000);

  digitalWrite(LED_PIN, LOW);
  delay(1000);
}

In this code, the ESP32-C3 turns the LED on for one second and then turns it off for one second. This loop repeats continuously.

This first test was successful because the LED blinked correctly after uploading the code.

Result of the Blink test on the ESP32-C3.

10. Preparing the Networking Practice

After confirming that the board worked with Blink, I continued with the networking part of the assignment.

The idea was to use the ESP32-C3 as a web server. The board connects to a WiFi network and receives an IP address. Then, from the computer, I can open that IP address in a browser and interact with the board.

Computer browser → WiFi router → ESP32-C3 web server → LED output

This means that the computer sends a request through the network and the ESP32-C3 responds by turning the LED on or off.

Network diagram for ESP32-C3 communication

Network diagram showing the communication between the computer and the ESP32-C3.

11. WiFi Connection Code

The ESP32-C3 needs the WiFi name and password in order to connect to the local network.

#include <WiFi.h>

const char* ssid = "YOUR_WIFI_NAME";
const char* password = "YOUR_WIFI_PASSWORD";

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

  WiFi.begin(ssid, password);

  Serial.print("Connecting to WiFi");

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi connected");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
}

void loop() {
}

This code connects the ESP32-C3 to the WiFi network. When the connection is successful, the board prints its IP address in the Serial Monitor.

The IP address is very important because it is used to access the web application from the computer.

Serial monitor showing ESP32-C3 IP address

Serial Monitor showing the IP address assigned to the ESP32-C3.

12. Creating a Web Server

The next step was to create a simple web server inside the ESP32-C3. This server displays a basic web page with buttons to turn the LED on and off.

The ESP32-C3 waits for requests from a browser. When the user clicks a button, the browser sends a request to the board. Depending on the request, the board changes the LED state.

13. Web Server Code for LED Control

#include <WiFi.h>

const char* ssid = "YOUR_WIFI_NAME";
const char* password = "YOUR_WIFI_PASSWORD";

WiFiServer server(80);

#define LED_PIN 8

String header;

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

  pinMode(LED_PIN, OUTPUT);
  digitalWrite(LED_PIN, LOW);

  WiFi.begin(ssid, password);

  Serial.print("Connecting to WiFi");

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  server.begin();
}

void loop() {
  WiFiClient client = server.available();

  if (client) {
    Serial.println("New Client connected.");
    String currentLine = "";

    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        header += c;

        if (c == '\n') {
          if (currentLine.length() == 0) {

            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();

            if (header.indexOf("GET /LED_ON") >= 0) {
              Serial.println("LED ON");
              digitalWrite(LED_PIN, HIGH);
            } 
            else if (header.indexOf("GET /LED_OFF") >= 0) {
              Serial.println("LED OFF");
              digitalWrite(LED_PIN, LOW);
            }

            client.println("<!DOCTYPE html>");
            client.println("<html>");
            client.println("<head>");
            client.println("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<title>ESP32-C3 Networking</title>");
            client.println("</head>");
            client.println("<body>");
            client.println("<h1>ESP32-C3 Web Server</h1>");
            client.println("<p>Networking and Communications Assignment</p>");
            client.println("<p><a href=\"/LED_ON\"><button>Turn LED ON</button></a></p>");
            client.println("<p><a href=\"/LED_OFF\"><button>Turn LED OFF</button></a></p>");
            client.println("</body>");
            client.println("</html>");

            client.println();
            break;
          } 
          else {
            currentLine = "";
          }
        } 
        else if (c != '\r') {
          currentLine += c;
        }
      }
    }

    header = "";
    client.stop();
    Serial.println("Client disconnected.");
  }
}

14. Explanation of the Code

Code Section	Explanation
`#include <WiFi.h>`	This library allows the ESP32-C3 to connect to a wireless network.
`ssid` and `password`	These values must be replaced with the name and password of the local WiFi network.
`WiFiServer server(80);`	This creates a server on port 80, which is the standard port for HTTP communication.
`#define LED_PIN 8`	This defines the GPIO pin used to control the LED. This pin may change depending on the ESP32-C3 board used.
`setup()`	Starts serial communication, configures the LED pin, connects to WiFi, and starts the server.
`loop()`	Waits for a client, reads browser requests, and turns the LED on or off depending on the received command.

When the browser sends a request, the ESP32-C3 reads the request. If the request contains /LED_ON, the LED turns on. If the request contains /LED_OFF, the LED turns off.

Finally, the ESP32-C3 sends a simple HTML page to the browser with two buttons.

15. Uploading the Networking Code

Uploading Process

Open Arduino IDE.
Create a new sketch.
Copy the ESP32-C3 web server code.
Replace the WiFi name and password.
Select the correct ESP32-C3 board.
Select the correct port.
Click Upload.
Wait until the code is compiled and uploaded.
Open the Serial Monitor.
Set the baud rate to 115200.
Press the reset button on the board if necessary.
Copy the IP address displayed in the Serial Monitor.

16. Testing the Web Application

After uploading the code, I opened the Serial Monitor. The ESP32-C3 connected to the WiFi network and displayed an IP address.

Then, I opened a web browser on my computer and typed the IP address.

http://192.168.1.45

The web page loaded correctly and displayed two buttons:

Turn LED ON Turn LED OFF

When I clicked the ON button, the LED turned on. When I clicked the OFF button, the LED turned off.

This confirmed that the ESP32-C3 was working as a network device and that it could receive commands from the computer through WiFi.

LED turned off after receiving the command from the web interface.

17. Using Blink as a Networking Tool

The Blink example was used as an initial verification tool. Before creating the web server, Blink helped confirm that:

The board was recognized by the computer.
The selected port was correct.
The Arduino IDE was correctly configured.
The LED pin was working.
The board could receive uploaded programs.

After that, the Blink logic was integrated into the networking practice. Instead of blinking automatically using delay, the LED state was controlled by commands received through the network.

This means that the LED became a visual indicator of network communication.

18. Communication Diagram

Computer / Browser
↓ HTTP Request
WiFi Router
↓ Wireless Network
ESP32-C3 Web Server
↓ GPIO Output
LED

When the user presses a button on the web page, the browser sends an HTTP request to the ESP32-C3. The ESP32-C3 reads the request and activates or deactivates the LED.

Communication flow between browser, WiFi network, ESP32-C3, and LED output.

19. Problems Encountered and Solutions

Problem	Possible Cause	Solution Applied
The ESP32-C3 was not detected by the computer.	The USB cable may only support charging, or the driver may not be installed.	Check the USB cable, use a data cable, try another USB port, install the required USB serial driver, and restart Arduino IDE.
Error while uploading code.	Incorrect board or port selection.	Check that the correct board and port are selected. Press and hold the BOOT button while uploading if required. Disconnect and reconnect the board.
The LED did not blink.	Incorrect GPIO pin, LED polarity error, or wrong resistor connection.	Verify the correct GPIO pin, check LED polarity, check the resistor connection, test another GPIO pin, and confirm whether the board has an internal LED.
The ESP32-C3 did not connect to WiFi.	Incorrect WiFi credentials or unsupported network.	Check the WiFi name and password, verify that the network is 2.4 GHz, move the board closer to the router, restart the router or board, and check the Serial Monitor for messages.
The web page did not open.	The computer and ESP32-C3 may not be on the same network, or the IP address may be incorrect.	Verify that both devices are on the same network, check the IP address in the Serial Monitor, type the IP address correctly in the browser, disable VPN if necessary, restart the ESP32-C3, and try again.

20. Results

The final result was a functional networking communication system using the ESP32-C3.

The board was successfully connected to the computer and programmed using Arduino IDE. The Blink test confirmed that the board and LED output were working correctly.

Then, the ESP32-C3 connected to a WiFi network and started a web server. From the computer browser, I was able to access the IP address of the board and control the LED using a simple web application.

This demonstrated that the ESP32-C3 can communicate through a network and respond to user commands remotely.

21. Evidence to Include

Evidence	Suggested Image Path
Photo of the ESP32-C3 connected to the computer.	`images/w11/esp32c3_connected.jpg`
Screenshot of the Arduino IDE board configuration.	`images/w11/arduino_board_selection.jpg`
Screenshot of the selected port.	`images/w11/arduino_port_selection.jpg`
Photo or video of the Blink test.	`images/w11/blink_test.jpg`
Screenshot of the Serial Monitor showing the IP address.	`images/w11/serial_monitor_ip.jpg`
Screenshot of the web page hosted by the ESP32-C3.	`images/w11/web_server_interface.jpg`
Photo of the LED turned on.	`images/w11/led_on.jpg`
Photo of the LED turned off.	`images/w11/led_off.jpg`
Diagram of the network communication.	`images/w11/network_diagram.jpg`

22. Learning Outcomes

Through this assignment, I learned how to:

Configure and program an ESP32-C3 board.
Use Blink as a first validation test.
Connect an ESP32-C3 to a WiFi network.
Read the IP address from the Serial Monitor.
Create a simple web server.
Send commands from a browser to a microcontroller.
Control a physical output through a network.
Understand the basic structure of HTTP communication.
Document the process clearly for Fab Academy.

23. Possible Improvements

Improvement	Description
Improve the visual design of the web interface.	Add better layout, colors, and responsive design.
Add CSS styles to the buttons.	Make the interface more attractive and easier to use.
Show the current LED status on the web page.	Display whether the LED is ON or OFF.
Control more than one output.	Add more LEDs, relays, or actuators.
Add a sensor.	Display sensor values on the web page.
Use WebSockets.	Allow real-time communication between the browser and the ESP32-C3.
Create a mobile-friendly interface.	Make the application easier to use from a phone.
Connect two ESP32-C3 boards.	Make two microcontrollers communicate with each other.
Use MQTT.	Implement an IoT communication protocol.
Store network data.	Save sensor readings or events in a database.

24. Conclusion

This assignment allowed me to understand the basic principles of networking and communications in embedded systems. By using the ESP32-C3, I was able to connect a microcontroller to a WiFi network and control a physical output from a computer browser.

The Blink test was an important first step because it verified the correct configuration of the board and the programming environment. Later, this same idea was expanded into a network-controlled LED application.

The final result was a simple but functional web server hosted on the ESP32-C3. This practice demonstrates how embedded systems can interact with users and other devices through network communication.