27
1.5 Etapa 3: Manejo IOT de señales digitales
En la Etapa 3, los estudiantes desarrollarán un sistema IoT utilizando la ESP32 y la plataforma
MIT App Inventor para el control de señales digitales desde un ordenador o dispositivo móvil.
Comenzarán con un ejercicio básico para familiarizarse con la ESP32, seguido de la conexión
de ocho LEDs a las salidas digitales del microcontrolador. Estos LEDs serán controlados
inicialmente mediante código. Luego, se introducirá el desarrollo de la aplicación móvil para
controlar los LEDs a través de conexión WiFi. Durante este proceso, se familiarizarán con el uso
de puntos de acceso remotos, librerías de programación, claves de comunicación, y widgets de
interfaz gráfica.
1.5.1 Hola mundo ESP32
Lo primero que se debe hacer al trabajar con aplicaciones de sistemas embebidos o mi-
crocontroladores es verificar la comunicación entre el computador y el dispositivo. Para ello,
conectamos el microcontrolador al computador mediante un cable USB y comprobamos que
el dispositivo sea reconocido correctamente. Para verificar esto, abrimos el Administrador de
dispositivos, como se muestra en el rectángulo rojo de la Figura 1.21. En esta ventana, identi-
ficamos el puerto al que está conectado el microcontrolador, lo cual es crucial para configurar
correctamente las herramientas de desarrollo y asegurarnos de que la comunicación se establece
sin problemas.
Figura 1.21: Administrador de dispositivos. Puerto al que esta conectado el microcontrolador.
Después de identificar el puerto al que está conectado el microcontrolador, abrimos el IDE
de Arduino para programar un parpadeo de LED (Led interno de la ESP32), conocido como
el hola mundo en la programación de microcontroladores. En la Figura 1.22, se muestra cómo
configurar el ESP32 dentro del entorno de desarrollo para asegurar una correcta compilación y
carga del código.
@Talleres
Capítulo 1. Modulo Generación Solar Fotovoltaica IoT
Figura 1.22: Configuración ESP32. Arduino IDE
1 /*
2 Ejemplo super sencillo de parpadeo de LED con ESP32
3 */
5 const int ledPin = 2; // Pin donde esta conectado el LED ( GPIO 2)
7 void setup () {
8 // Configurar el pin del LED como salida
9 pinMode ( ledPin , OUTPUT ) ;
10 }
12 void loop () {
13 // Encender el LED
14 digitalWrite ( ledPin , HIGH ) ;
15 // Esperar un segundo
16 delay (1000) ;
17 // Apagar el LED
18 digitalWrite ( ledPin , LOW ) ;
19 // Esperar un segundo
20 delay (1000) ;
21 }
Programamos el microcontrolador con el código presentado anteriormente o que se puede
acceder desde el archivo [Link], para subir o programar el dispositivo, damos clic en la flecha
que apunta a la derecha.
Ejercicio para resolver 1.27 Graba una fracción de vídeo donde se evidencie la primera
prueba de parpadeo de led al microcontrolador ESP32. ∎
@Talleres
29
1.5.2 Manejo Salidas digitales
Figura 1.23: Diagrama de conexión salidas digitales
En la Figura 1.23 se presenta la conexión de 8 leds con su respectiva resistencia a las salidas
digitales del microcontrolador, para manipular estas salidas, se tiene el siguiente código:
1 // Definir el numero del pin de cada LED
2 # define PinDigital1 13 // D13
3 # define PinDigital2 12 // D12
4 # define PinDigital3 14 // D14
5 # define PinDigital4 27 // D27
6 # define PinDigital5 26 // D26
7 # define PinDigital6 25 // D25
8 # define PinDigital7 33 // D33
9 # define PinDigital8 32 // D32
11 void setup () {
12 // Inicializar los pines de los LEDs como salida
13 pinMode ( PinDigital1 , OUTPUT ) ;
14 pinMode ( PinDigital2 , OUTPUT ) ;
15 pinMode ( PinDigital3 , OUTPUT ) ;
16 pinMode ( PinDigital4 , OUTPUT ) ;
17 pinMode ( PinDigital5 , OUTPUT ) ;
18 pinMode ( PinDigital6 , OUTPUT ) ;
19 pinMode ( PinDigital7 , OUTPUT ) ;
20 pinMode ( PinDigital8 , OUTPUT ) ;
21 }
@Talleres
Capítulo 1. Modulo Generación Solar Fotovoltaica IoT
23 void loop () {
24 // Encender los LEDs
25 digitalWrite ( PinDigital1 , HIGH ) ;
26 digitalWrite ( PinDigital2 , HIGH ) ;
27 digitalWrite ( PinDigital3 , HIGH ) ;
28 digitalWrite ( PinDigital4 , HIGH ) ;
29 digitalWrite ( PinDigital5 , HIGH ) ;
30 digitalWrite ( PinDigital6 , HIGH ) ;
31 digitalWrite ( PinDigital7 , HIGH ) ;
32 digitalWrite ( PinDigital8 , HIGH ) ;
34 delay (1000) ; // Esperar 1 segundo
36 // Apagar los LEDs
37 digitalWrite ( PinDigital1 , LOW ) ;
38 digitalWrite ( PinDigital2 , LOW ) ;
39 digitalWrite ( PinDigital3 , LOW ) ;
40 digitalWrite ( PinDigital4 , LOW ) ;
41 digitalWrite ( PinDigital5 , LOW ) ;
42 digitalWrite ( PinDigital6 , LOW ) ;
43 digitalWrite ( PinDigital7 , LOW ) ;
44 digitalWrite ( PinDigital8 , LOW ) ;
46 delay (1000) ; // Esperar 1 segundo
47 }
El cual prende y apaga los leds al mismo tiempo, los pines digitales usados del microcontro-
lador son: D13, D12, D14, D27, D26, D25, D33, D32. El estudiante puede utilizar las salidas
que guste. El código también se puede encontrar en el archivo [Link].
Ejercicio para resolver 1.28 Realiza el cableado de los 8 leds. Y prueba el código suminis-
trado. Graba una fracción de vídeo con el resultado. Nota: No se pueden usar jumpers, el
cableado debe estar a la medida de las conexiones en protoboard
∎
Ejercicio para resolver 1.29 Realiza cambios de tiempos en los leds y prende consecu-
tivamente cada led, del primero al ultimo. Graba una fracción de vídeo con este resultado.
∎
1.5.3 Conexión WIFI ESP32
Recordemos que la ESP32 tiene un modulo WiFi en su construcción interna, en esta sección
se realizara la conexión de la ESP32 con el celular via WiFi, en una red local (Para esta aplicación
no tendrá acceso a internet el microcontrolador).
@Talleres
31
Figura 1.24: Conexión ESP32 vía WiFi, con punto de acceso desde el celular.
El archivo [Link] contiene el codigo presentado a continuación:
1 # include < WiFi .h >
2 # include < WebServer .h >
4 // Configuracion de la red WiFi
5 const char * ssid = " JULIAN ONTIBON " ;
6 const char * password = " Julian123 " ;
8 // Crear un objeto de servidor en el puerto 80
9 WebServer server (80) ;
11 // Definir el pin del LED
12 const int ledPin = 2;
14 // Funcion para manejar la raiz del servidor
15 void handleRoot () {
16 server . send (200 , " text / plain " , " Hola desde ESP32 ! " ) ;
17 }
19 // Funcion para encender el LED
20 void handleLedOn () {
21 digitalWrite ( ledPin , HIGH ) ;
22 server . send (200 , " text / plain " , " LED encendido " ) ;
23 Serial . println ( " LED encendido " ) ;
24 }
26 // Funcion para apagar el LED
27 void handleLedOff () {
28 digitalWrite ( ledPin , LOW ) ;
29 server . send (200 , " text / plain " , " LED apagado " ) ;
30 Serial . println ( " LED apagado " ) ;
31 }
33 // Configuracion de las rutas del servidor
34 void setupServer () {
35 server . on ( " / " , handleRoot ) ;
36 server . on ( " / ledOn " , handleLedOn ) ;
37 server . on ( " / ledOff " , handleLedOff ) ;
38 server . begin () ;
39 Serial . println ( " Servidor iniciado . " ) ;
@Talleres
Capítulo 1. Modulo Generación Solar Fotovoltaica IoT
40 }
42 void setup () {
43 Serial . begin (115200) ;
44 delay (10) ;
46 // Configurar el pin del LED como salida
47 pinMode ( ledPin , OUTPUT ) ;
48 digitalWrite ( ledPin , LOW ) ;
50 // Conexion a la red WiFi
51 Serial . println () ;
52 Serial . print ( " Conectando a " ) ;
53 Serial . println ( ssid ) ;
55 WiFi . begin ( ssid , password ) ;
57 while ( WiFi . status () != WL_CONNECTED ) {
58 delay (500) ;
59 Serial . print ( " . " ) ;
60 }
62 Serial . println ( " " ) ;
63 Serial . println ( " WiFi conectado . " ) ;
64 Serial . print ( " Direccion IP : " ) ;
65 Serial . println ( WiFi . localIP () ) ;
67 // Configuracion del servidor web
68 setupServer () ;
69 }
71 void loop () {
72 server . handleClient () ;
73 }
Esta aplicación no funciona con un punto WiFi con firewall limitado, como el de la Uni-
versidad de los Andes, debido a las restricciones en la red. Los firewalls universitarios suelen
bloquear ciertos tipos de tráfico y puertos, impidiendo que la ESP32 y el dispositivo móvil se
comuniquen correctamente. Estos firewalls están diseñados para proteger la red y limitar el
acceso a recursos externos, lo que puede interferir con la capacidad de la ESP32 para establecer y
mantener conexiones HTTP necesarias para controlar el LED desde App Inventor o directamente
con un URL de enlace.
Ejercicio para resolver 1.30 Crea un punto WiFi desde tu celular (Comparte internet) y
camba el ssid y password del código suministrado. Programa tu ESP32 y visualiza con el
monitor serial de Arduino IDE, la dirección IP de tu ESP32 conectada a tu red WiFi.
@Talleres
33
Figura 1.25: Conexión WiFi ESP32
Si no te aparece nada en el monitor serial puedes oprimir el botón de reset en tu ESP32
para reiniciar la conexión y ver los datos.
∎
Ejercicio para resolver 1.31 Al conocer la IP de acceso, puedes colocar esta en el navegador
de tu celular y ver el mensaje que emite la ESP32, posteriormente activas o desactivas el led
como se ve en la Figura 1.26.
@Talleres
Capítulo 1. Modulo Generación Solar Fotovoltaica IoT
Figura 1.26: Manejo del led via acceso IP
Ejercicio para resolver 1.32 Realiza un fragemento de video, aplicando los dos ejercicios
anteriores. ∎
1.5.4 Creación Aplicativo de control
Para finalizar esta sección, se realizara el aplicativo que controlara el led que acabas de
programar en la ESP32, de manera sencilla este aplicativo tendrá una interfaz gráfica que sera
capaz de acceder a un enlace cuando se oprima un botón. Lo primero que realizamos es ir a
[Link] y damos clic en create apps (Figura 1.27, allí nos podemos
registrar o si ya estamos registrados, iniciar sesión, fácilmente puedes acceder con una cuenta
Google.
@Talleres
35
Figura 1.27: Pagina de registro App Inventor
Abre App Inventor y crea un nuevo proyecto, como se observa en la Figura 1.28, coloca el
nombre que gustes.
Figura 1.28: App Inventor, Crear Proyecto.
Inicialmente tendrás dos menús principales para realizar tu aplicativo, el de diseñador, donde
tendrás un celular en blanco y podrás colocar todos los elementos visuales de tu programa, como
se observa en la Figura 1.29 y tendrás el menú de bloques, en el cual se realizara todo lo que
manipula el programa.
@Talleres
Capítulo 1. Modulo Generación Solar Fotovoltaica IoT
Figura 1.29: Pantalla Principal de App Inventor, parte visual.
En la Figura 1.30 se observa de que menú puedes obtener un botón, donde queda organizado
y como puedes cambiar el texto del mismo.
Figura 1.30: App Inventor, Ajuste boton.
Al tener un botón ya nombrado, las acciones de control estarán disponibles en el menú de
bloques o menú de programador, este menú tiene la apariencia de la Figura 1.31.
@Talleres
37
Figura 1.31: Pantalla Principal de desarrollador en App Inventor
Para cada elemento que tengas en el aplicativo, tienes asociadas diferentes acciones, en el
caso del botón la acción de clic en el se denota con when como se señala en rojo en la Figura
1.32.
Figura 1.32: Pantalla desarrollador, Acciones del botón
Para tener la comunicación WiFi entre el aplicativo móvil y la ESP32, se debe colocar el
elemento Web en el aplicativo. Para tener acceso a Url como se presenta en la figura 1.33.
@Talleres
Capítulo 1. Modulo Generación Solar Fotovoltaica IoT
Figura 1.33: Pantalla desarrollador, Acciones de internet. Url
En App Inventor, el bloque call [Link] (Figura 1.34)se usa para hacer una solicitud HTTP
GET a la URL especificada en el componente Web. Este tipo de solicitud se utiliza para recuperar
datos de un servidor. Cuando utilizas este bloque, la aplicación envía una petición al servidor
web en la URL proporcionada, y el servidor responde con los datos solicitados. Por ejemplo, si
tienes un componente Web configurado con la URL de un servicio web que proporciona datos
meteorológicos, al llamar al bloque call [Link], tu aplicación enviará una solicitud a ese
servicio, y podrás recibir y procesar la respuesta con los bloques adecuados.
Figura 1.34: Pantalla desarrollador, Acciones de internet. Http
Finalmente se introduce el ip y la acción de prender o apagar led con un bloque de texto,
como se presenta en la Figura 1.35
@Talleres
39
Figura 1.35: Pantalla desarrollador, Acciones de escritura
Ejercicio para resolver 1.33 Realiza el aplicativo con dos botones, en app inventor, que
prendan y apaguen el led predeterminado de la ESP32, realiza un vídeo del proceso. ∎
, No te quedes solo con un led, ¡puedes hacer una aplicación de domótica!
@Talleres