YT YouTube2Text

YouTube2Text → Transcripts → Protocolo MQTT + ESP32 Guía Completa Control en Tiempo Real con APP Inventor Iot

Protocolo MQTT + ESP32 Guía Completa Control en Tiempo Real con APP Inventor Iot — Transcript

by Torelec · 3,091 words · 470 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00[Música]
0:00quieres aprender a comunicarte por
0:01internet en una red externa a través del
0:03protocolo mqtt y una sp32 Quédate aquí
0:07en este video que te lo enseñaremos Hola
0:09electrónico cómo están Espero que estén
0:11muy bien en este video Vamos a aprender
0:12a cómo comunicarnos por internet
0:14mediante el protocolo mqtt y una sp32
0:17para eso vamos a estar utilizando una
0:19sp32 y un simple led la cual vamos a
0:21encender a través de internet para
0:23entender el protocolo mqtt Es importante
0:25saber qué es lo que significa el
0:27protocolo mqtt o message screening telem
0:30transport es un protocolo de
0:31comunicación basado en el modelo publish
0:33subcribe publicación o suscripción en
0:35español que se usa comúnmente en
0:37aplicaciones de internet de las cosas
0:38para transmitir mensajes de manera
0:40eficiente especialmente en entornos con
0:42recursos limitados como dispositivo con
0:44baja potencia o redes baja calidad acá
0:47tenemos dos ejemplos lo que es una ras
0:49pie y una sp32 las características
0:51principales de este modelo mqtt cumplen
0:54con tres tipos de componentes lo que es
0:55el publicador el suscriptor y el broker
0:57el publicador que es el que envía los
0:59mensajes al broker sin conocer a los
1:00destinatarios el suscriptor que es el
1:03que recibe los mensajes desde el broker
1:05para temas específicos y el broker que
1:08es el intermediario que recibe mensajes
1:10de los publicadores y lo distribuye a
1:12los suscriptores interesados en el tema
1:13o tópico correspondiente para entender
1:16la topología del protocolo mqtt acá
1:18tenemos un diagrama a cual tenemos tres
1:21clientes el primer cliente que es una SP
1:2432 que se comporta o está configurado
1:26como publicador o publisher Y tenemos
1:28otros dos clientes que es un un
1:30computador y un celular estos están
1:32configurados como suscriptores entonces
1:34básicamente en este ejemplo eh el sp32
1:38toma datos de un sensor y esto como es
1:41publicador envía esos datos a la nube o
1:43a la database que es el broker mqtt esto
1:46lo envía a través de un tema específico
1:48o llamado tópico con un nombre
1:50específico en este caso es sensor sl
1:52valor para que el suscriptor lea estos
1:55mensajes también tiene que estar
1:56suscrito al tópico donde el publicador
1:59envió los datos en ese caso haciendo la
2:01suscripción al tópico sensor Slash valor
2:04este recibe los datos publicados por el
2:07publicador y lo expresa visualmente en
2:09su interfaz acá tenemos un código como
2:12lo vemos a continuación donde tenemos
2:14incluido la librería wifi. que
2:17normalmente ya la tenemos instalada
2:18También tenemos la librería as mqtt
2:21client la cual se la dejaré en la
2:22descripción del video en el paquete de
2:24descargas y ya saben lo que tienen que
2:26hacer van a ir a sketch incluir librería
2:29nos vamos a Añadir biblioteca Z buscamos
2:32la ruta donde la descargamos y
2:35simplemente la
2:37instalan en ese caso yo no la voy a
2:39instalar porque ya la tengo instalada le
2:41voy a dar a que no como en este código
2:43obviamente vamos a estar conectados a
2:45internet a través de wi-fi vamos a
2:46necesitar una red wi-fi en este caso
2:49vamos a colocar el
2:50nombre y la contraseña de nuestra red
2:53wi-fi un tema muy importante es la
2:55configuración del servidor mqtt
2:57importante decirles que existen diversos
3:00eh broker mqtt uno de los más famosos es
3:03ibmq como lo vemos acá Entonces el
3:06servidor la dirección de servidores esa
3:09que vemos a continuación llama
3:11broker.emqx.io
3:29lo vamos a configurar como suscriptor es
3:32decir va a leer datos de un tema
3:34específico Mientras que el publicador va
3:35a ser una página web o una aplicación
3:37Android Entonces por ejemplo en este
3:40caso que estamos controlando un le eh en
3:42el tópico casa le como lo vemos acá se
3:46recibe la palabra on simplemente la sp32
3:49se interpreta esa palabra Y dice Bueno
3:51quiero que se encienda el le y si se
3:53recibe por ese tema específico la
3:54palabra off el le se va a pagar Dónde
3:58está conectado el le en el pin número
4:00cuatro de la sp32 Entonces por acá si
4:03bajamos vemos el estado de conexión
4:04wi-fi lo que toma los datos de csid y la
4:08password Y si existe una conexión
4:11simplemente va con esta función y si
4:13existe ya una conexión entonces va a
4:15decir conectado al servidor mqtt y se va
4:18a suscribir como habemos dicho que esto
4:20se va a comportar como suscriptor la
4:22función que vamos a utilizar es esta que
4:24vemos acá mqt Cent
4:28subscribe tópico específico que vamos a
4:31utilizar Entonces el tópico está cargado
4:33en esta variable llamada Le
4:35topic que básicamente es esta que vemos
4:39acá casa sl
4:41le muy importante esta parte porque acá
4:44se igualan los tópicos dice Bueno si el
4:46tópico es igual al tópico que estamos
4:48suscrito y se recibe la palabra on
4:50simplemente me anota un High como lo
4:53vemos acá en el pin que en este caso
4:56está conectado al pin número cu de la
4:58sp32 y en este caso se va a encender el
5:00LED si se recibe un off como lo vemos
5:03acá a continuación va a hacer lo
5:05contrario va a pagar el le Pin y en es
5:08caso apagar el le que tenamos conectado
5:10en la s32 bajamos un poco vamos al vo
5:13acá decimos que sería el bein va a ser
5:16115,200 para la depuración del monitor
5:18serie El leg pin que es el número cuatro
5:20se va a comportar como una salida porque
5:22obviamente es un di leg y listo señores
5:25simplemente vamos a herramienta vamos a
5:27placa elegimos la placas que estamos
5:30utilizando yo en este caso la sp32 W ron
5:33vamos a herramienta de nuevo vamos al
5:35puerto elegimos el puerto y cargamos el
5:38[Música]
5:41código una vez cargado el código yo me
5:44voy al navegador y bmq tiene un una
5:48demostración websocket client para poder
5:50depurar nosotros el envío o la recepción
5:52de mensajes eh
5:54creándole lo podemos llamar como sea
5:58este link se lo voy a dejar en la
5:59descripción de del video para que
6:00ustedes también puedan controlarlo
6:01Entonces el cliente lo llamamos como sea
6:03yo en este caso le he puesto cliente
6:04para sp32 eh simplemente le vamos a dar
6:09conectar listo simplemente tenemos un
6:12cliente duplex o bidireccional en este
6:14caso tenemos uno para publicación y otro
6:17para suscripción el tópico que vamos a
6:20estar suscritos y y vamos a publicar va
6:23a ser el mismo de la programación en
6:25este caso va a ser casal como lo vemos
6:28acá y es el que vemos acá Entonces por
6:31ejemplo acá tenemos ya nuestra sp32 con
6:34el diodo yo lo que voy a hacer también
6:36suscribirme a ese tópico a ver si
6:38realmente ya están llegando los mensajes
6:40acá lo tenemos tenemos la suscripción Y
6:43tenemos la publicación Entonces por
6:44ejemplo si yo envío un uno en el mensaje
6:47lo publico simplemente acá el suscriptor
6:50me va a leer el mensaje que se envió
6:53mediante este tópico mientras que la
6:55sp32 no me va a interpretar nada porque
6:57la interpretación de la sp3 videos es
7:00que el mensaje sea un on como lo vemos
7:02acá a continuación en es caso hemos
7:04recibido solamente un uno si voy a
7:06monitor serie voy a enviar de nuevo un
7:09mensaje a ver el uno listo se ha
7:13recibido un uno pero no me va a
7:15interpretar nada porque no no he dicho
7:17que si recibo un uno haga tal cosa sino
7:19que recibo un on Entonces voy de nuevo
7:22al mismo tópico voy a escribir un on voy
7:26a
7:27publicar y automáticamente se me
7:29enciende el le en el tópico que estoy
7:32suscrito en la misma página me llega un
7:34on y voy al monitor serie y me dice
7:36Bueno ahora sí hemos recibido un on y el
7:39le está
7:41encendido voy de nuevo al websocket y
7:45voy a escribir un
7:46off publico un
7:49off acá ya lo hemos publicado ya me está
7:52llegando el mensaje voy al monitor serie
7:54se ha recibido un off y el X está
7:57apagado automáticamente el X se apaga
7:59Entonces de esa manera estoy controlando
8:01a través de Internet puedo estar
8:03conectado en otra red incluso distinta a
8:06la que está sp32 y enviar estos mensaje
8:09a través de este websocket y el le se va
8:11a encender y
8:12Apagar hacemos de nuevo otra prueba
8:16on
8:17[Música]
8:18encendió y off para
8:22apagar se apagó listo entonces para
8:25hacer esto más interesante vamos a crear
8:28una aplicación Android donde tengamos a
8:31mano una herramienta para la publicación
8:34de estos dos mensajes que serían on off
8:36para encender y Apagar los le y vamos a
8:38estar utilizando mi inventor que ya lo
8:40hemos utilizado anteriormente entonces
8:43simplemente vamos a crear aplicación nos
8:45vamos a estar logando con una cuenta de
8:48Google nos vamos a un nuevo proyecto en
8:51este caso vamos a colocar lo que sea
8:53mqtt le se lo que sea vamos a dar
8:57aceptar y listo como saben ya yo le
9:00quito esto lo que es barra de estado y
9:01título visible para dejarlo totalmente
9:03en blanco entonces voy a asignar a ver
9:06una cuatro disposiciones realmente a
9:10ver voy a colocar centro
9:13centro color de fondo
9:16gris alto Un s un 10% por ejemplo y de
9:23ancho un
9:25100% bueno la altura no me la tomo en
9:28cuenta quise decir 10
9:30por que a usar el contenedor acá voy a
9:3510% y listo Ahora sí Entonces esto Esta
9:40disposición horizontal la voy a copiar
9:41con control c y la voy a
9:45copiar cuatro
9:47veces acá la tenemos necesitamos
9:50instalar una extensión que es esta que
9:52vemos acá Bueno no la tenemos todavía eh
9:55en el link de la descripción del video
9:57de nuevo también le voy a dejar esta
9:59esta extensión que vemos acá que vamos a
10:02tener que instalar está en punto ustedes
10:06lo van a descomprimir y van a dar donde
10:09dice importar
10:10extensión seleccionar el archivo la
10:13extensión se llama así como lo vemos a
10:15continuación ente la
10:17importamos esperamos a que se
10:20cargue y listo nos aparece con este logo
10:23y ese nombre listo esto lo vamos a
10:26arrastrar acá y lo vamos a ver
10:29componente no visible Igual vamos a
10:31hacer con un relo nos vamos a sensores y
10:33arrastramos un relo también también lo
10:36vemos acá en componentes no visibles y
10:39listo bueno el primer interfaz en la
10:42primera disposición vamos a agregar
10:44Ahora sí un botón acá como lo vemos acá
10:48y este le vamos a agregar no sé color de
10:52texto negrita vamos a color de fondo lo
10:55que sea realmente es un para efecto de
10:58prueba eh de alto V a colocarle un nuevo
11:02por cento porque la disposición tiene 10
11:04de ancho no sé un 40% puede ser está
11:08bienos pulsación la forma
11:10redondeada color de texto negro y el
11:15texto le vamos a colocar
11:18conectar de esta manera nos tiene que
11:20quedar en la segunda y tercera
11:22disposición también vamos a agregar dos
11:25botones es que sea para encender
11:28entonces vamos a ponerlo de color azul
11:31en este
11:32caso y este que sea para apagar lo
11:35colocamos de color rojo entonces a esto
11:38colocamos negrita también ponemos una
11:41forma redondeada y le colocamos
11:46on para encender nos tiene que quedar de
11:49esta manera Vamos a ponerle una anchura
11:51en este caso de un 40% también ahí lo
11:55tenemos Y en este le colocamos un off
11:59igual
12:01negrita forma
12:05redondeada en el texto le colocamos
12:09[Música]
12:11off y de ancho le colocamos
12:1640% l esto no tiene que quedar de esta
12:19manera en esta cuarta
12:22disposición Lo que vamos a hacer es
12:24darle altura a esto vamos a colocarle un
12:2780%
12:30bueno 80 es demasiado coloquemos 40% a
12:33ver así me quedaría muy bien y voy a
12:37estar añadiendo una imagen arrastro la
12:40imagen la vemos en el centro ponemos que
12:43la imagen sea como esto es de 40% que la
12:46imagen sea de un 30% por ejemplo
12:49simplemente le damos
12:5130% y de ancho le ponemos un 50% 70 le
12:56voy a colocar como lo a continuación
13:00entonces en los medios voy a subir dos
13:01archivos en este caso eh lo que vemos
13:04acá a ver estas dos imágenes de un led
13:07enido y un led apagado subo led apagado
13:12le doy
13:14aceptar le png se llama y el le
13:17encendido le 1 png
13:20listo acá lo tenemos una vez teniendo
13:23todo esto ya casi la interfaz está
13:25terminada obviamente esto lo pueden
13:27diseñar mejor más bonito con mucho más
13:29más tiempo ahora vamos a lo que son los
13:32bloques en los bloques el primer botón
13:34que representa el conectar o conexión
13:38vamos a decir que cuando este haga clic
13:40vamos a
13:41mq y bajamos a donde dice conectar Clear
13:44session este Clean section Clean section
13:48Okay acá
13:49conecta y le vamos a dar una condición
13:51lógica de verdadero como lo vemos acá
13:54ahora bajamos al reloj Cuando el reloj
13:58temporizador vemos acá ponemos una
14:01condición Sí entonces Si no vamos a la
14:07[Música]
14:09extensión ponemos el estado este
14:12conectado si la extensión está conectada
14:15Entonces vamos a decir bueno que ponga
14:16un texto el texto no lo hemos puesto acá
14:18en el diseñador
14:20eh Para eso este bloque lo vamos a
14:23colocar acá arriba lo más arriba posible
14:25arriba listo acá Entonces vamos a poner
14:28un lab
14:29voy a arrastrar una etiqueta y le voy a
14:32poner
14:33mqtt o desconectado por defecto diga des
14:39conectado de esta
14:42manera lo ponemos en
14:44[Música]
14:45negrita listo no va a decir desconectado
14:48por defecto Entonces el bloque no vamos
14:50a bloque de nuevo ponemos a es como
14:54conectado cuando obviamente ya est
14:55conectado acá tenemos la etiqueta
14:58decimos ponemos un texto
15:03texto que etiqueta uno sea como
15:08texto verdadero a ver como
15:12conectado entonces de esta manera cuando
15:15haya una conexión este Label de
15:17desconectado nos va a pasar a conectado
15:20de esa manera nos damos cuenta si
15:21estamos conectados o no el broker
15:24mqtt Si no vamos a duplicar esto que nos
15:28diga
15:29[Música]
15:32desconectado perfecto muy bien Ahora
15:36bajamos a lo siguiente botón lo que es
15:37el botón dos cuando este haga clic l
15:40vamos a publicar al tópico publicamos en
15:44el tópico publish acá nos va a pedir dos
15:47credenciales lo que es el tópico tema y
15:49el mensaje que queremos enviar sabemos
15:51que el
15:53tópico copiamos esto dos veces uno para
15:56el tópico otro para el mensaje sabemos
15:59el tópico del código es a ver subimos
16:02este caso es la sl como lo vemos acá a
16:04continuación copiamos
16:06esto nos vamos acá
16:11pegamos pegamos el tópico donde nos
16:14vamos a conectar y el mensaje que
16:16queremos que haga en este caso este
16:17botón es para on simplemente que nos
16:19Envía un
16:21on duplicamos esto ahora para el tercer
16:23botón que es para pagar en el mismo
16:26tópico le decimos que en vez de on off y
16:30listo Entonces como tenemos una imagen
16:32también esta imagen que tenemos acá a
16:35ver la foto
16:37como Vamos a darle acá de nuevo led pin
16:42png en este caso para encender es el uno
16:45copiamos esto también lo pegamos y ese
16:49va a ser el le png que el que está
16:51apagado entonces Listo ya con esto hemos
16:54terminado los bloques una vez teniendo
16:57esto nos vamos a diseñador y acá donde
16:59dice la extensión vamos a colocar el
17:01nombre del broker en la cual estamos
17:03conectados Entonces el nombre del broker
17:06es este vamos a copiar y con control V
17:10lo voy a pegar el puerto es 1883 Ya lo
17:13tenemos listo como le damos acá a
17:16continuación y en el relog simplemente
17:19le vamos a dar 2 segundos en este caso
17:21para que refresque cada do segundos
17:24listo simplemente teniendo esto lo que
17:26voy a dar es donde dice genera
17:29app de Android para tener la
17:32apk y esperamos a que se complete la
17:35barra de
17:37Progreso y listo una vez cargada la baj
17:40repr Progreso nos da dos opciones de
17:42descarga acá para descargarlo a través
17:45del computador o mediante un código QR
17:47ustedes lo descargan como quieran en
17:49este caso voy a utilizar el código QR a
17:52través de otro celular listo muchachos
17:54acá tenemos descargado ya la aplicación
17:56mqtt l.apk simplemente le vamos a dar
18:00donde dice instalar vamos a
18:01configuración para poder instalar
18:03archivos de terceros o fuentes externas
18:06y le doy a instalar Entonces me dice se
18:08recomienda analizar la aplicación si es
18:10necesario le dan
18:12analizar no todos los dispositivos piden
18:14eso pero bueno este sí lo
18:16pide listo me dice que la app Es segura
18:19le damos a instalar entonces listo se
18:21instaló mqtt Vamos a darle a abrir y ya
18:26tenemos la aplicación lista como lo
18:27vemos a continuar entonces simplemente
18:30le vamos a dar donde dice
18:32conectar esperamos un momento y listo
18:35dice conectado ahora encendemos el
18:38le Listo ya nos encendió el le como lo
18:41hemos a continuación Ahora me voy al
18:43monitor serie a ver si estoy recibiendo
18:44realmente los datos voy a borrar esto
18:47voy a apagar el le me cambia el símbolo
18:50Apaga el le y he recibido por monitor
18:52serie le apagado como lo vemos a
18:54continuación vamos a dar donde dice
18:57on como a continuación en el monitor
18:59serie me sale el mensaje on con le
19:02encendido si le damos off nos sale el
19:05mensaje off con le apagado le damos a
19:08encender le vamos a apagar acá estamos
19:10ya conectados con otro celular
19:12simplemente le vamos a dar donde dice on
19:14encendió el le recibimos por mqtt el le
19:17encendido o el mensaje on apagamos el le
19:21nos Apaga el le volvemos a
19:23encender vemos que cambia también la
19:26imagen como lo hemos puesto apagamos
19:28también se nos apaga la imagen y también
19:31tenemos que estar recibiendo esto
19:32mediante el websocket de ibmq como lo
19:36vemos a continuación encendemos
19:38recibimos el
19:40on apagamos y recibimos el L y eso
19:44estando conectado desde una red externa
19:46a la red local donde está conectado la
19:49sp32 hacemos la última prueba
19:52emos pagamos y bueno muchachos si les ha
19:56gustado es video les invito a que se
19:57suscriban me gusta para yo seguir
20:00subiendo videos interesantísimos sobre
20:02este tipo de protocolo en los próximos
20:04videos estaremos subiendo con más le más
20:06dispositivo o una interacción más bonita
20:09si tienen alguna duda algún proyecto que
20:11tengan en mente les invito a que lo
20:13dejen en la sección de comentarios que
20:14estoy seguro que lo pondremos a prueba
20:16nos vemos en la próxima muchachos Bye
20:18bye

About this transcript

This page contains the full transcript of Protocolo MQTT + ESP32 Guía Completa Control en Tiempo Real con APP Inventor Iot by Torelec, generated from the public captions YouTube serves with the video. The transcript has 3,091 words across 470 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.