CURSO ESP 32 Parte 1

El ESP32 es un micro que integra CPU, memoria RAM volátil y no volátil (Para el
programa) y varios dispositivos de I/O (Entrada y salida) en un chip único, además
de dispositivos de comunicaciones variados, que podemos emplear para recibir y
enviar información al exterior.

Básicamente el ESP32 es capaz de:

 Recibir señales digitales (Digital Inputs)

 Enviar señales digitales (Digital Output)
 Recibir señales Analógicas en tensión (Analog Input ) mediante ADCs.
 Enviar señales analógicas al exterior, (Analog Output) como señales
moduladas en pulsos PWM y con 2 convertidores digital a analógico (DAC)
 Detectar variaciones de Capacidad en los pines adecuados.
 Medir la temperatura ambiente (Con sus más y con sus menos)
 Comunicarse con el exterior de forma cableada:
o Buses I2C integrados
o Buses SPI integrados
o Puertas UART o serie programables.
 Comunicarse con el exterior de forma inalámbrica
o Puerto WIFI integrado, con stack TCPIP.
o Puerto Bluetooth 5 integrado.

Fig. 1 Diagrama GPIO (Pines de entrada salida de propósito general) ESP32

1. Instalación del complemento ESP32 en Arduino IDE

Para instalar la placa ESP32 en su IDE de Arduino, siga las siguientes instrucciones:

1) Abra la ventana de preferencias desde el IDE de Arduino. Ir a Archivo > Preferencias

2) Ingrese https://dl.espressif.com/dl/package_esp32_index.json en el campo "URL adicionales de Board

Manager" como se muestra en la siguiente figura. Luego, haga clic en el botón "OK":

Nota: si ya tiene la URL de placas ESP8266, puede separar las URL con una coma de la siguiente manera:
https://dl.espressif.com/dl/package_esp32_index.json, http://arduino.esp8266.com/stable/package_esp8266com_index.json
3) Gestor de placas libres. Vaya a Herramientas > Placa > Gestor de placas ...

4) Busque ESP32 y presione el botón de instalación para " ESP32 by Espressif Systems ":

5) Eso es todo. Debe instalarse después de unos segundos.

1.1 Probando la instalación

Conecte la placa ESP32 a su computadora. Luego, sigue estos pasos:

1) Abra el IDE de Arduino

2) Seleccione su Placa en el menú Herramientas > Placas (es el DOIT ESP32 DEVKIT V1 )
3) Seleccione el puerto (si no ve el puerto COM en su IDE de Arduino, debe instalar los controladores ESP32
CP210x USB a UART Bridge VCP ):

4) Abra el siguiente ejemplo en Archivo > Ejemplos > WiFi (ESP32) > Exploración de WiFi
5) Se abre una nueva ventana:

6) Pulse el botón Subir en el IDE de Arduino. Espere unos segundos mientras el código se compila y

se carga en su placa.

7) Si todo salió como se esperaba, debería ver un mensaje de “Subido”

8) Abra el Monitor Serial IDE de Arduino a una velocidad de baudios de 115200:

9) Presione el botón de habilitación a bordo de ESP32 y debería ver las redes disponibles cerca de su
ESP32:
2. MODOS DE TRABAJO

El módulo ESP32 normalmente se utiliza en dos modos distintos, MODO WEB SERVER donde permite
establecer comunicación directa con la red de internet y dispositivos (clientes) a través de un Router, y el
modo ACCES POINT, donde se comporta como un ROUTER en una red local para su comunicación con otros
dispositivos.

Figura 2. Modo de Trabajo Web Server (servidor web)

Figura 3. Modo de Trabajo Acces Point (Punto de acceso)

2.1 WEB SERVER (Servidor WEB)
Un servidor web o servidor HTTP es un programa informático que procesa una aplicación del lado del servidor,
realizando conexiones bidireccionales o unidireccionales y síncronas o asíncronas con el cliente y generando o
cediendo una respuesta en cualquier lenguaje o aplicación del lado del cliente. El código recibido por el cliente
es renderizado por un navegador web. Para la transmisión de todos estos datos suele utilizarse algún protocolo.
Generalmente se usa el protocolo HTTP para estas comunicaciones, perteneciente a la capa de aplicación del
modelo OSI. El término también se emplea para referirse al ordenador.

 Para realizar este proceso se utilizará el siguiente material:

 Placa ESP32
 2 Leds
 2 resistencias de 330 Ohms ( O 2 de 220 Ohms)
 Protoboard
 Cables

La conexión se realizará de acuerdo al siguiente esquema:

El código para la realización de un web server queda de la siguiente manera (Archivo WEBSERVER.ino en la
carpeta de códigos):

// Load Wi-Fi library

#include <WiFi.h>

// Replace with your network credentials

const char* ssid = "REPLACE_WITH_YOUR_SSID";

const char* password = "REPLACE_WITH_YOUR_PASSWORD";

// Set web server port number to 80

WiFiServer server(80);

// Variable to store the HTTP request

String header;

// Auxiliar variables to store the current output state

String output26State = "off";

String output27State = "off";

// Assign output variables to GPIO pins

const int output26 = 26;

const int output27 = 27;

// Current time

unsigned long currentTime = millis();

// Previous time

unsigned long previousTime = 0;

// Define timeout time in milliseconds (example: 2000ms = 2s)

const long timeoutTime = 2000;

void setup() {

Serial.begin(115200);

// Initialize the output variables as outputs

pinMode(output26, OUTPUT);

pinMode(output27, OUTPUT);

// Set outputs to LOW

digitalWrite(output26, LOW);

digitalWrite(output27, LOW);

// Connect to Wi-Fi network with SSID and password

Serial.print("Connecting to ");

Serial.println(ssid);

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {

delay(500);

Serial.print(".");

// Print local IP address and start web server

Serial.println("");

Serial.println("WiFi connected.");

Serial.println("IP address: ");

Serial.println(WiFi.localIP());

server.begin();

}
void loop(){

WiFiClient client = server.available(); // Listen for incoming

clients

if (client) { // If a new client connects,

currentTime = millis();

previousTime = currentTime;

Serial.println("New Client."); // print a message out in the

serial port

String currentLine = ""; // make a String to hold

incoming data from the client

while (client.connected() && currentTime - previousTime <=

timeoutTime) { // loop while the client's connected

currentTime = millis();

if (client.available()) { // if there's bytes to read

from the client,

char c = client.read(); // read a byte, then

Serial.write(c); // print it out the serial

monitor

header += c;

if (c == '\n') { // if the byte is a newline

character

// if the current line is blank, you got two newline characters

in a row.

// that's the end of the client HTTP request, so send a

response:

if (currentLine.length() == 0) {

// HTTP headers always start with a response code (e.g.

HTTP/1.1 200 OK)

// and a content-type so the client knows what's coming, then

a blank line:
client.println("HTTP/1.1 200 OK");

client.println("Content-type:text/html");

client.println("Connection: close");

client.println();

// turns the GPIOs on and off

if (header.indexOf("GET /26/on") >= 0) {

Serial.println("GPIO 26 on");

output26State = "on";

digitalWrite(output26, HIGH);

} else if (header.indexOf("GET /26/off") >= 0) {

Serial.println("GPIO 26 off");

output26State = "off";

digitalWrite(output26, LOW);

} else if (header.indexOf("GET /27/on") >= 0) {

Serial.println("GPIO 27 on");

output27State = "on";

digitalWrite(output27, HIGH);

} else if (header.indexOf("GET /27/off") >= 0) {

Serial.println("GPIO 27 off");

output27State = "off";

digitalWrite(output27, LOW);

// Display the HTML web page

client.println("<!DOCTYPE html><html>");
 client.println("<head><meta name=\"viewport\"
content=\"width=device-width, initial-scale=1\">");

client.println("<link rel=\"icon\" href=\"data:,\">");

// CSS to style the on/off buttons

// Feel free to change the background-color and font-size

attributes to fit your preferences

client.println("<style>html { font-family: Helvetica;

display: inline-block; margin: 0px auto; text-align: center;}");

client.println(".button { background-color: #4CAF50; border:

none; color: white; padding: 16px 40px;");

client.println("text-decoration: none; font-size: 30px;

margin: 2px; cursor: pointer;}");

client.println(".button2 {background-color:
#555555;}</style></head>");

// Web Page Heading

client.println("<body><h1>ESP32 Web Server</h1>");

// Display current state, and ON/OFF buttons for GPIO 26

client.println("<p>GPIO 26 - State " + output26State +

"</p>");

// If the output26State is off, it displays the ON button

if (output26State=="off") {

client.println("<p><a href=\"/26/on\"><button
class=\"button\">ON</button></a></p>");

} else {

client.println("<p><a href=\"/26/off\"><button
class=\"button button2\">OFF</button></a></p>");

// Display current state, and ON/OFF buttons for GPIO 27

 client.println("<p>GPIO 27 - State " + output27State +
"</p>");

// If the output27State is off, it displays the ON button

if (output27State=="off") {

client.println("<p><a href=\"/27/on\"><button
class=\"button\">ON</button></a></p>");

} else {

client.println("<p><a href=\"/27/off\"><button
class=\"button button2\">OFF</button></a></p>");

client.println("</body></html>");

// The HTTP response ends with another blank line

client.println();

// Break out of the while loop

break;

} else { // if you got a newline, then clear currentLine

currentLine = "";

} else if (c != '\r') { // if you got anything else but a

carriage return character,

currentLine += c; // add it to the end of the currentLine

// Clear the header variable

header = "";

// Close the connection

 client.stop();

Serial.println("Client disconnected.");

Serial.println("");

Configuración de sus credenciales de red

Necesita modificar las siguientes líneas con sus credenciales de red: SSID y contraseña. El código está bien
comentado sobre dónde debe realizar los cambios.

// Replace with your network credentials

const char* ssid = "NOMBRE DE SU MODEM";

const char* password = "CONTRASEÑA DE SU MODEM";

Ahora, puede cargar el código y el servidor web funcionará de inmediato. Siga los siguientes pasos para
cargar el código al ESP32:

1) Conecte su placa ESP32 a su computadora;

2) En el IDE de Arduino, seleccione su placa en Herramientas > Placa (en nuestro caso estamos usando la
placa ESP32 DEVKIT DOIT);
3) Seleccione el puerto COM en Herramientas > Puerto .

4) Presione el botón Cargar en el IDE de Arduino y espere unos segundos mientras el código se compila y
carga en su placa.

5) Espere el mensaje " Carga finalizada ".

Encontrar la dirección IP de ESP

Después de cargar el código, abra Serial Monitor a una velocidad de 115200 baudios.

Presione el botón ESP32 EN (reiniciar). El ESP32 se conecta a Wi-Fi y emite la dirección IP de ESP en el
monitor en serie. Copie esa dirección IP, porque la necesita para acceder al servidor web ESP32.

Acceder al servidor web

Para acceder al servidor web, abra su navegador, pegue la dirección IP de ESP32 y verá la siguiente página.
En nuestro caso es 192.168.1.135 .

Si echas un vistazo al Serial Monitor, puedes ver lo que está sucediendo en segundo plano. El ESP recibe una
solicitud HTTP de un nuevo cliente (en este caso, su navegador).
También puede ver otra información sobre la solicitud HTTP.

Prueba del servidor web

Ahora puede probar si su servidor web funciona correctamente. Haga clic en los botones para controlar los
LED.

Al mismo tiempo, puede echar un vistazo al Monitor serial para ver qué sucede en segundo plano. Por
ejemplo, cuando hace clic en el botón para girarGPIO 26ENCENDIDO, ESP32 recibe una solicitud en / 26 / en
la URL.
Cuando el ESP32 recibe esa solicitud, enciende el LED adjunto a GPIO 26 ON y actualiza su estado en la
página web.

El botón para GPIO 27funciona de manera similar. Pruebe que esté funcionando correctamente.
2.2 ACCES POINT MODE (Modo de punto de Acceso)

Si configura el ESP32 como un punto de acceso (hotspot), puede conectarse al ESP32

utilizando cualquier dispositivo con capacidades de Wi-Fi sin la necesidad de conectarse a
su enrutador.
En palabras simples, cuando configura el ESP32 como un punto de acceso, crea su
propia red Wi-Fi y los dispositivos (estaciones) Wi-Fi cercanos pueden conectarse a él
(como su teléfono inteligente o su computadora).

Se iniciará la configuración del ESP32 como ACCESS PINT, el material y diagrama son
los mismos de la consgfiguración anterior.
Una vez realizado lo anterior el código a utilizar es el siguiente (Archivo
ACCESPOINT.INO en carpeta Códigos)

// Load Wi-Fi library

#include <WiFi.h>

// Replace with your network credentials

const char* ssid = "ESP32-Access-Point";

const char* password = "123456789";

// Set web server port number to 80

WiFiServer server(80);

// Variable to store the HTTP request

String header;

// Auxiliar variables to store the current output state

String output26State = "off";

String output27State = "off";

// Assign output variables to GPIO pins

const int output26 = 26;

const int output27 = 27;

void setup() {

Serial.begin(115200);

// Initialize the output variables as outputs

 pinMode(output26, OUTPUT);

pinMode(output27, OUTPUT);

// Set outputs to LOW

digitalWrite(output26, LOW);

digitalWrite(output27, LOW);

// Connect to Wi-Fi network with SSID and password

Serial.print("Setting AP (Access Point)…");

// Remove the password parameter, if you want the AP (Access Point) to

be open

WiFi.softAP(ssid, password);

IPAddress IP = WiFi.softAPIP();

Serial.print("AP IP address: ");

Serial.println(IP);

server.begin();

void loop(){

WiFiClient client = server.available(); // Listen for incoming

clients

if (client) { // If a new client connects,

Serial.println("New Client."); // print a message out in the

serial port

String currentLine = ""; // make a String to hold

incoming data from the client
 while (client.connected()) { // loop while the client's
connected

if (client.available()) { // if there's bytes to read

from the client,

char c = client.read(); // read a byte, then

Serial.write(c); // print it out the serial

monitor

header += c;

if (c == '\n') { // if the byte is a newline

character

// if the current line is blank, you got two newline characters

in a row.

// that's the end of the client HTTP request, so send a

response:

if (currentLine.length() == 0) {

// HTTP headers always start with a response code (e.g.

HTTP/1.1 200 OK)

// and a content-type so the client knows what's coming, then

a blank line:

client.println("HTTP/1.1 200 OK");

client.println("Content-type:text/html");

client.println("Connection: close");

client.println();

// turns the GPIOs on and off

if (header.indexOf("GET /26/on") >= 0) {

Serial.println("GPIO 26 on");

output26State = "on";

digitalWrite(output26, HIGH);

} else if (header.indexOf("GET /26/off") >= 0) {

 Serial.println("GPIO 26 off");

output26State = "off";

digitalWrite(output26, LOW);

} else if (header.indexOf("GET /27/on") >= 0) {

Serial.println("GPIO 27 on");

output27State = "on";

digitalWrite(output27, HIGH);

} else if (header.indexOf("GET /27/off") >= 0) {

Serial.println("GPIO 27 off");

output27State = "off";

digitalWrite(output27, LOW);

// Display the HTML web page

client.println("<!DOCTYPE html><html>");

client.println("<head><meta name=\"viewport\"
content=\"width=device-width, initial-scale=1\">");

client.println("<link rel=\"icon\" href=\"data:,\">");

// CSS to style the on/off buttons

// Feel free to change the background-color and font-size

attributes to fit your preferences

client.println("<style>html { font-family: Helvetica;

display: inline-block; margin: 0px auto; text-align: center;}");

client.println(".button { background-color: #4CAF50; border:

none; color: white; padding: 16px 40px;");

client.println("text-decoration: none; font-size: 30px;

margin: 2px; cursor: pointer;}");

client.println(".button2 {background-color:
#555555;}</style></head>");
 // Web Page Heading

client.println("<body><h1>ESP32 Web Server</h1>");

// Display current state, and ON/OFF buttons for GPIO 26

client.println("<p>GPIO 26 - State " + output26State +

"</p>");

// If the output26State is off, it displays the ON button

if (output26State=="off") {

client.println("<p><a href=\"/26/on\"><button
class=\"button\">ON</button></a></p>");

} else {

client.println("<p><a href=\"/26/off\"><button
class=\"button button2\">OFF</button></a></p>");

// Display current state, and ON/OFF buttons for GPIO 27

client.println("<p>GPIO 27 - State " + output27State +

"</p>");

// If the output27State is off, it displays the ON button

if (output27State=="off") {

client.println("<p><a href=\"/27/on\"><button
class=\"button\">ON</button></a></p>");

} else {

client.println("<p><a href=\"/27/off\"><button
class=\"button button2\">OFF</button></a></p>");

client.println("</body></html>");
 // The HTTP response ends with another blank line

client.println();

// Break out of the while loop

break;

} else { // if you got a newline, then clear currentLine

currentLine = "";

} else if (c != '\r') { // if you got anything else but a

carriage return character,

currentLine += c; // add it to the end of the currentLine

// Clear the header variable

header = "";

// Close the connection

client.stop();

Serial.println("Client disconnected.");

Serial.println("");

Personalice el SSID y la contraseña

Debe definir un nombre SSID y una contraseña para acceder al ESP32. En este ejemplo, configuramos el
nombre SSID ESP32 enPunto de acceso ESP32, pero puede modificar el nombre a lo que desee. La
contraseña es123456789, pero también puedes modificarlo.

// You can customize the SSID name and change the password
const char* ssid = "ESP32-Access-Point";
const char* password = "123456789";
Configuración del ESP32 como punto de acceso

Hay una sección en el configuración() para configurar el ESP32 como un punto de acceso usando el softAP ()
método:

WiFi.softAP(ssid, password);

También hay otros parámetros opcionales que puede pasar al softAP ()método. Aquí están todos los
parámetros:

.softAP(const char* ssid, const char* password, int channel, int ssid_hidden, int max_connection)

 SSID (definido anteriormente): máximo de 63 caracteres;

 contraseña(definido anteriormente): mínimo de 8 caracteres; establézcalo en NULL si desea que el
punto de acceso esté abierto
 canal: Número de canal Wi-Fi (1-13)
 ssid_hidden: (0 = difundir SSID, 1 = ocultar SSID)
 max_connection: número máximo de clientes conectados simultáneamente (1-4)

A continuación, necesitamos obtener la dirección IP del punto de acceso utilizando el softAPIP () e imprímalo
en Serial Monitor.

IPAddress IP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(IP);

Dirección IP ESP32

Sube el código a tu ESP32 (asegúrate de tener la placa correcta y el puerto COM seleccionados). Abra el
monitor serial a una velocidad en baudios de 115200. Presione el botón “Habilitar” ESP32.

Se imprimirá la dirección IP que necesita para acceder al punto ESP32. En este caso, es 192.168.4.1 .
Conexión al punto de acceso ESP32

Con el ESP32 ejecutando el nuevo boceto, en su teléfono inteligente abra la configuración de Wi-Fi y toque
la red ESP32-Access-Point :

Ingrese la contraseña que definió anteriormente en el código.

Abra su navegador web y escriba la dirección IP 192.168.4.1. La página del servidor web debería cargarse:

Para conectarse al punto de acceso en su computadora, vaya a la Configuración de red e Internet y

seleccione el “ Punto de acceso ESP32 ”.

Inserte la contraseña que definió anteriormente.

Ahora, para acceder a la página del servidor web ESP32, solo necesita escribir la dirección IP ESP32 en su
navegador.