2020-Desarrollo Plataforma Web

DESARROLLO DE UNA PLATAFORMA WEB PARA UN SISTEMA DE
CONTROL IoT SOBRE ARDUINO Y MQTT
IVAN SANTIAGO JAIMES MONTAÑA

WILMAR YECID CENDALES CABEZA
UNIVERSIDAD COOPERATIVA DE COLOMBIA

FACULTAD DE INGENIERÍA
BOGOTÁ
2020
DESARROLLO DE UNA PLATAFORMA WEB PARA UN SISTEMA DE
CONTROL IoT SOBRE ARDUINO Y MQTT
IVAN SANTIAGO JAIMES MONTAÑA

WILMAR YECID CENDALES CABEZA
SEMINARIO DE PROFUNDIZACIÓN PARA OPTAR AL TÍTULO

DE INGENIERO ELECTRÓNICO
Asesor: IVONNE MARITZA DURAN PRADA

Profesión: [ Ingeniera de Sistemas]
UNIVERSIDAD COOPERATIVA DE COLOMBIA

FACULTAD DE INGENIERÍA
BOGOTÁ
2020
2
Este documento está dedicado a cada persona que quiera incursionar,
desarrollar y gestionar tecnología IoT, se espera que, para innovaciones futuras
en la Universidad Cooperativa de Colombia, sea tomado en cuenta como un
boceto, tanto para laboratorios virtuales de electrónica, como proyectos
complejos investigativos de desarrollo para las distintas ramas de la ingeniería
de la UCC.
Para ellos… los estudiantes.
3
CONTENIDO
Capitulo I. PLANTEAMIENTO DEL PROBLEMA ......................................... 12

1. Planteamiento general............................................................................ 12
2. Justificación ............................................................................................ 14
3. Objetivos ................................................................................................ 15
3.1 Objetivo General..................................................................................... 15
3.2 Objetivos Específicos ............................................................................. 15
Capitulo II. DISEÑO INGENIERIL .............................................................. 16
Capitulo III. ANÁLISIS Y DISCUSIÓN......................................................... 17
Capitulo IV. CONCLUSIONES .................................................................... 51
REFERENCIAS BIBLIOGRÁFICAS................................................................ 52
ANEXOS ......................................................................................................... 54
4
LISTA DE ILUSTRACIONES
Ilustración 1. Descripción Linux usado. ........................................................... 24

Ilustración 2. Puertos abiertos Linux 1. ........................................................... 24
Ilustración 3. Puertos abiertos Linux 2. ........................................................... 25
Ilustración 4. Versión Nginx. ........................................................................... 25
Ilustración 5. Versión MySQL.......................................................................... 26
Ilustración 6. BD. mqtt_acl. ............................................................................ 26
Ilustración 7. BD. mqtt_user. ........................................................................... 27
Ilustración 8. Versión PHP. ............................................................................. 27
Ilustración 9. Panel de ingreso VESTA. .......................................................... 28
Ilustración 10. Info. DNS VESTA. ................................................................... 28
Ilustración 11. Info Base de datos desde VESTA. .......................................... 29
Ilustración 12. Tecnologías usadas en el servidor. ......................................... 30
Ilustración 13. Visualización de puertos abiertos en el panel VESTA. ............ 31
Ilustración 14. IP LAN y WAN. ........................................................................ 31
Ilustración 15. Panel ingreso EMQ-X .............................................................. 32
Ilustración 16. Habilitación de autenticación por base de datos MySQL......... 32
Ilustración 17. Puertos que usa EMQ-X. ......................................................... 33
Ilustración 19. Control de acceso phpMyAdmin. ............................................. 33
Ilustración 20. Base de datos creada. ............................................................. 34
Ilustración 21. Aplicación WEB. ...................................................................... 47
Ilustración 22. Aplicación WEB responsiva No. 1. .......................................... 47
Ilustración 23. Aplicación WEB responsiva No. 2. .......................................... 48
Ilustración 24. Conexión Serial ESP WROOM - 32......................................... 49
Ilustración 25. Servo motor a 0°. ..................................................................... 49
Ilustración 26. Servo motor a 45°. ................................................................... 50
Ilustración 27. Servo motor a 90°. ................................................................... 50
Ilustración 28. Servo motor a 180°. ................................................................. 50
5
LISTA DE TABLAS
Tabla 1. Cuadro Comparativo protocolos o tecnologías. ................................ 19
6
LISTA DE ANEXOS
Anexo 1. Datasheet Servo motor MG90S ....................................................... 54

Anexo 2. Esquemático ESP WROOM – 32 .................................................... 54
Anexo 3. Memoria RAM. ................................................................................. 55
Anexo 4. Uso de tarjeta de red. ...................................................................... 55
Anexo 5. Rendimiento de consultas MySQL y peticiones en NGINX. ............. 56
7
RESUMEN
La consolidación de sistemas manipulados y automatizados a distancia se

vuelve de mayor importancia en la vida diaria de los humanos, encontramos
que en la industria, se implementan soluciones a altos costos y muy limitada
su comercialización; por esta razón se plantea este caso de estudio, donde se
realiza la implementación de un sistema de control, con bajos costos de
desarrollo, y da pie para la base de varios sistemas que se pueden implementar
para un recambio o una competencia potencial a varias tecnologías, ya usadas
tanto en la industria como la vida cotidiana; se presentan varias comparativas
en las cuales se podrá demostrar y elegir el broker más adecuado para
desarrollar sistemas de lazo abierto y cerrado en un ámbito de control de
hardware por una red LAN. Este documento proporciona conclusiones en las
que podemos destacar que, es posible implementar a bajos costos la tecnología
de Internet de las cosas (IoT), y dar avance a problemáticas de usos en
economías que no poseen la capacidad monetaria para automatizar sus
procesos. Se diseña un sistema electrónico basado en tecnología Arduino
como DAQ (Data Adquisition) para la toma de datos y ejecuciones; se usará la
placa ESP WROOM - 32, la cual es una potente herramienta para transmisión
de dicha información captada por el mismo ya que se presenta con un módulo
wifi integrado para su conexión con la aplicación WEB. En este documento se
plantea el lograr hacer un sistema de lazo abierto, al mover un servo motor
(MG90S), a través de la ya mencionada aplicación WEB conectado como
suscriptor a un determinado tópico por medio del protocolo que se elegirá, el
cual será montado en una red por medio de un servidor Ubuntu Server para
montaje de aplicaciones finales, tanto para desarrollos como PHP, HTML, y
bases de datos MYSQL.
8
Palabras clave
Protocolo
Servidor
Broker
Arduino
IoT
9
ABSTRACT
The consolidation of automated systems and manipulated remotely acquires

greater importance in the daily life of humans, we find that in the industry,
solutions are implemented at high costs and their commercialization is very
limited; For this reason, this case study is proposed, where the implementation
of a control system is carried out, with low development costs, and gives rise to
the basis of several systems that can be implemented for a replacement or
potential competition to various technologies, it is already used both in industry
and in everyday life; Several comparisons are presented in which it will be
possible to demonstrate and choose the most suitable broker to develop open
and closed circuit systems in a field of hardware control over a red LAN. This
document provides conclusions in which we can highlight that, it is possible to
implement the Internet of Things (IoT) technology at low costs, and advance in
problems of uses in economies that do not have the monetary capacity to
automate their processes. An electronic system based on Arduino technology
is designed as DAQ (Data Acquisition) for data collection and execution; The
ESP WROOM – 32 board will be used, which is a powerful tool to transmit said
information captured by it since it is presented with an integrated Wi-Fi module
for its connection with the WEB application. In this document it is proposed to
achieve an open loop system, moving a servomotor (MG90S), through the
aforementioned WEB application connected as a subscriber to a specific topic
through the protocol to choose, which will be mounted on a network through an
Ubuntu server for the assembly of final applications, both for developments such
as PHP, HTML and MYSQL databases.
10
Keywords
Protocol
Server
Broker
Arduino
IoT
11
Capitulo I. PLANTEAMIENTO DEL PROBLEMA
1. Planteamiento general
En el mercado se presentan varias soluciones para la industria de la

comunicación de información. En el año 1999 IBM presentaba varios contratos
de comunicaciones de diferentes oleoductos en los cuales, en uno de estos, le
solicita investigar sobre como implementar tecnología simple, con calidad de
servicio de entrega de datos, ligero y ancho de banda eficiente, agnóstico de
datos, y se comuniquen por medio satelital, con lo cual crean MQTT (Message
Queing Telemetry Transport), un protocolo basado en la pila TCP/IP y basado
en M2M (Machine to Machine), pero con la diferencia que está pensado en una
publicación y un suscriptor, con lo cual la creación de control de hardware tomo
costos elevados que corresponden a diseños y desarrollos exclusivos de las
empresas propietarias de esta tecnología, hasta que IBM lo lanza como como
un proyecto por regalías, en el año 2013 por medio de la organización OASIS
y empezó a dar rienda suelta un mayor desarrollo y un estándar aprobado por
ISO (ISO/IEC20922); aun así se plantean varias tecnologías con lo que era el
estándar o librería MQTT, y no se daba gran importancia en la vida cotidiana
pero si en la industria, hoy en día toma un rumbo distinto ya que es la base
fundamental del IoT, encontrándonos en un punto clave, ya que al haber tenido
poco desarrollo frente a otras industrias no se promueve su enseñanza, por
esto el desarrollo de este documento trata de incentivar el uso de IoT, a bajos
costos y con herramientas de licencia GPU (General Public License) , con lo
cual esta tecnología se puede usar en varios ambientes investigativos de
diseño e implementación en las carreras ingenieriles de la Universidad
Cooperativa de Colombia y así desarrollar innovaciones tecnologías. Se
plantea este caso de estudio como una base de tecnología, con el propósito de
desarrollar IoT, pero también de poder llevar a sus orígenes el MQTT y así
poder sacarle el máximo provecho en sistemas SCADA (Supervisory Control
And Data Acquisition).
12
El internet es una herramienta indispensable en el trabajo de hoy en día; se
pretende en una finalidad de este caso de estudio, llegar a una aplicación
controlable desde cualquier dispositivo conectado a una red LAN, con lo cual
facilitaría procesos y el incentivo a generar más empleos, que, a distancias
lejanas del operador, pueden ser desarrollados y así evitar factores como alto
riesgo o por optimización de tiempos, como lo pueden ser:
- Industrias petrolíferas
- Industrias manufactureras
- Industria aeroespacial
- Industrias de telecomunicaciones
- Laboratorios para la educación a distancia.
- Desarrollo e implementaciones de tecnologías para la empresa o el
hogar.
¿Se puede hacer un montaje de control transmitido en una red a bajos costos,
que pueda aplicar alto estándares de tecnologías eficientes de comunicación,
al controlar hardware?
13
2. Justificación
El caso de estudio plantea el desarrollo de una solución, al implementar

controles automatizados y capaces de ser monitorizados o dirigidos de manera
remota a bajos costos; en el mercado ya existen comercialmente estos
controles a costos muy elevados y muchos de estos no son programables para
cada tipo de control, con lo cual este documento resultante del caso de estudio
logra satisfacer estas necesidades, al implementar software con licencia GPU
y un hardware accesible a un público en general.
14
3. Objetivos
3.1 Objetivo General
Desarrollar una plataforma web para un sistema de control IOT sobre Arduino
y MQTT, a bajos costos, con un caso de estudio de un servo motor en lazo
abierto.
3.2 Objetivos Específicos
Seleccionar el broker a utilizar para el desarrollar una plataforma web para un

sistema de control IoT.
Implementar el bróker seleccionado en una red LAN, para sistemas de control.
Integrar tecnología Arduino y el bróker seleccionado para el desarrollo de la

aplicación para un control en lazo abierto.
Verificar que la aplicación si envía y recibe información, con lo cual el hardware

deberá accionar las opciones pertinentes.
15
Capitulo II. DISEÑO INGENIERIL
Como primera medida se plantea un cuadro comparativo con las diferentes

tecnologías de protocolos de transmisión de datos para dar razón y elegir
nuestro broker, donde debe elegirse como muy competente y mucho más
económico.
Continuando con el desarrollo encontramos la instalación y puesta en marcha

de servidor pila LEMP (Linux, Nginx, MySQL, PHP), Linux Ubuntu Server como
servidor, donde tendrá la tarea de poder publicar la aplicación y mantener la
base de datos.
Así mismo el montaje de los programas para controlar dichas plataformas se

usan sus versiones GPU donde son suficientes para esta implementación, los
cuales son:
VESTA (Panel de control de publicación de WEB)
EMQ-X (Panel de control y administrador de la librería y protocolo MQTT)
phpMyAdmin (Panel de control de las bases de datos)
Posterior a esto, se da el desarrollo una página o aplicación boceto WEB, la

cual estará montada en PHP, HTML y JAVASCRIPT; en la cual tendrá las
cuatro opciones preconfiguradas del motor para elegir sus ángulos, tendrá
comunicación a la base de datos para la verificación de usuarios inscritos al
tópico especifico “ángulo”; y así hacer el desarrollo de firmware de uso en
Arduino para la tarjeta ESP WROOM - 32 e implementación física como última
medida.
Se hacen pruebas y se toman evidencias de uso.
16
Capitulo III. ANÁLISIS Y DISCUSIÓN
Para seleccionar el broker se realizó la comparación de los siguientes

protocolos:
MQTT: Es un protocolo de mensajería estándar de OASIS para Internet de las

cosas (IoT). Está diseñado como un transporte de mensajería de publicación /
suscripción extremadamente liviana que es ideal para conectar dispositivos
remotos con una huella de código pequeña y un ancho de banda de red mínimo.
Hoy en día, MQTT se utiliza en una amplia variedad de industrias, como la
automotriz, la fabricación, las telecomunicaciones, el petróleo y el gas, etc.1
HTTP: Hypertext Transfer Protocol (HTTP) (o Protocolo de Transferencia de

Hipertexto en español) es un protocolo de la capa de aplicación para la
transmisión de documentos hipermedia, como HTML. Fue diseñado para la
comunicación entre los navegadores y servidores web, aunque puede ser
utilizado para otros propósitos también. Sigue el clásico modelo cliente-
servidor, en el que un cliente establece una conexión, realizando una petición
a un servidor y espera una respuesta de este. Se trata de un protocolo sin
estado, lo que significa que el servidor no guarda ningún dato (estado) entre
dos peticiones. Aunque en la mayoría de los casos se basa en una conexión
del tipo TCP/IP, puede ser usado sobre cualquier capa de transporte segura o
de confianza, es decir, sobre cualquier protocolo que no pierda mensajes
silenciosamente, tal como UDP.2
DEVICENET: DeviceNet es un protocolo de comunicación usado en la industria

de la automatización para interconectar dispositivos de control para intercambio
de datos. Éste usa Bus CAN como tecnología backbone y define una capa de
1 https://mqtt.org/
2 https://developer.mozilla.org/es/docs/Web/HTTP
17
aplicación para cubrir un rango de perfiles de dispositivos. Las aplicaciones
típicas incluyen dispositivos de intercambio, dispositivos de seguridad grandes
redes de control con E/S.3
ETHERNET/IP: EtherNet / IP (IP = Protocolo industrial) es un protocolo de red

industrial que adapta el Protocolo industrial común a Ethernet estándar.
EtherNet / IP es uno de los protocolos industriales líderes en los Estados Unidos
y se usa ampliamente en una variedad de industrias, incluidas las de fábrica,
híbridas y de procesos. Las tecnologías EtherNet / IP y CIP son administradas
por ODVA Inc., una organización global de desarrollo de estándares y comercio
fundada en 1995 con más de 300 miembros corporativos.4
CONTROLNET: ControlNet es un protocolo de red abierto para aplicaciones de

automatismos industriales, también es conocido como bus de campo.
ControlNet fue mantenido en un principio por ControlNet Internacional, pero en
2008 el soporte y administración de ControlNet fue transferido a ODVA, que
administra actualmente todos los protocolos de la familia Common Industrial
Protocol (CIP).5
ETHERCAT: Es una tecnología de Ethernet industrial en tiempo real

desarrollada originalmente por Beckhoff Automation. El protocolo EtherCAT
que se da a conocer en el estándar IEC61158 es adecuado para requisitos en
tiempo real duros y blandos en la tecnología de automatización, en pruebas y
mediciones y en muchas otras aplicaciones.6
3 https://es.wikipedia.org/wiki/DeviceNet
4 https://en.wikipedia.org/wiki/EtherNet/IP
5 https://es.wikipedia.org/wiki/Controlnet
6 https://www.ethercat.org/es/technology.html
18
Tabla 1. Cuadro Comparativo protocolos o tecnologías.7
TECNOL. VELOCIDAD IMPLEMENTACION LICENCIA SEGURIDAD HARDWARE TECNOLOGIA ARQUTECTURA
En MQTT la autenticación
se puede realizar
En redes 3G es mediante identificador de
93 veces más cliente,
rápido, usa 8 usuario/contraseña o
veces menos Está enfocado al envío certificados x509.
tráfico y gasta de datos en aplicaciones
170 veces menos donde se requiere muy MQTT como HTTP La tecnología MQTT se
energía en los poco ancho de banda. pueden operar sobre TLS define a sí misma como
receptores. Además, sus o SSL, ya que esto forma La cabecera más un modelo de MQTT básicamente está
MQTT
características le parte del protocolo pequeña de comunicaciones basado en un protocolo

Open
permiten presumir de TCP/IP. MQTT sólo tiene basadas en de mensajería
tener un consumo El broker MQTT puede 2 Bytes publicación/suscripción, publicación/suscripción
MQTT ES al realmente bajo, así controlar quién se extremadamente simple
menos 20 veces como precisar de muy suscribe y quién publica y liviana.
más rápido, usa pocos recursos para su en qué tópicos.
50 veces menos funcionamiento.
Al igual que los servidores
tráfico y
web, los broker y bridges
energéticamente
MQTT soportan
un 22% más
autorización mediante
eficiente.
JWT (JSON Web Token).
7 Autoría propia
19
HTTP es un
protocolo basado en el
El protocolo HTTP es un principio de cliente-
La implementación de servido, petición -
protocolo ampliable y
HTTP es 20 este nodo es Adquirir respuesta
fácil de usar. Su
veces más lento relativamente simple certificados
estructura cliente-
que MQTT, entre sus puede ser HTTP puede operar sobre La cabecera más
servidor, junto con la
HTTP
necesita más características consta gratuito o TLS o SSL, ya que esto pequeña de
capacidad para usar
tráfico y de dos interfaces de red, costar forma parte del protocolo HTTP es de 26
cabeceras, permite a
energéticamente servidor DNS, servidor entre US$13. TCP/IP. Bytes.
este protocolo
consume mucho HTTP y 5 y US$15
evolucionar con las
más. FTP, ruteador (iptables), por año.
nuevas y futuras
servidor de voip.
aplicaciones en Internet.
DeviceNet es mejor para

Permite el uso de paquetes muy pequeños
repetidores, (una sola trama solo
bridges, ruteadores y ga puede manejar 8 bytes
teways. de carga útil),
DEVICENET
Velocidad de Necesita una microcontroladores

Mayor seguridad de Comunicación basada en
comunicación interfaz de pequeños (CAN es muy
datos, chequeo de errores conexiones de E/S y
seleccionable: de Open Hardware popular en aplicaciones
eficiente y gran modelo de pregunta y
125,250 y 500 Suporta hasta 64 nodos, específica para el automotrices) y
flexibilidad. respuesta.
kbps. incluyendo el maestro, desarrollador dispositivos
direccionados de 0 a 63 pequeños. Relés de
(MAC ID). sobrecarga del motor,
bloques pequeños de E
/ S, fotocélulas,
colectores de válvulas
20
Originalmente, el
protocolo Ethernet/IP no
implementaba ningún
mecanismo de seguridad, Es un protocolo de
ETHERNET/IP
pero actualmente la representación de datos,

Velocidades en seguridad a nivel de gestión de conexiones y
El controlador establece Diseñado para grandes
dispositivos Open transporte de Ethernet/IP Económico mensajería bien definido
el límite de dispositivos TX de datos
hasta 100 MB/s cuenta con las siguientes que opera sobre
características: muchas capas de
Autenticación de los transporte y físicas.
equipos, autenticación e
integridad del mensaje,
cifrado de mensaje.
Control Net es un nivel

superior, con hasta 99
dispositivos en una red. Los productos El ControlNet permite una
Los controladores se
tienen una arquitectura de control
comunican usando la
interfaz flexible que puede trabajar
tecnología maestro-
CONTROLNET
ControlNet con procesadores

esclavo (Máster-Slave),
incorporada o se múltiples y hasta 99
ControlNet en las cuales solamente
conectan a la red nodos vía taps) en la
funciona a 5 MB / Open Seguridad intrínseca un dispositivo (máster)
ControlNet a parte troncal del cable de
s Generalmente utiliza puede iniciar la
través de un red. No hay un mínimo de
cable coaxial con alto transacción (queries).
módulo de separación entre taps y
nivel de blindaje o fibra Los otros dispositivos
interfaz de puede ser acceder la red
óptica. (slaves) responde a
comunicación ControlNet desde cada
solicitud del máster.
opcional. nodo
21
Obtiene un
El protocolo es adecuado
No existe un límite No necesita un funcionamiento
para aplicaciones de
práctico para el número hardware completamente
Los telegramas seguridad con un nivel de
de nodos esclavos en especial. redundante con un
en un mensaje integridad de seguridad
una red EtherCAT Cualquier MAC cambio extremadamente
EtherCAT de hasta SIL 3 Los dispositivos maestros
rápido.
ETHERCAT
Ethernet servirá.
pueden tener simplemente emiten el
Dado que
hasta 60 KB, lo mensaje y reciben la
Open EtherCAT tiene
que significa que respuesta. Mensaje único
muy pocos
puede mover una entrante - mensaje único
La tecnología de recursos, Los mensajes EtherCAT
gran cantidad de saliente.
datos de un nodo los dispositivos esclavos seguridad EtherCAT ha tampoco necesita se pasan al siguiente
al maestro. necesitan incrustar un sido desarrollada según el un procesador de nodo del anillo antes de
ASIC de hardware estándar IEC 61508, comunicaciones ser procesados por ese
específico para cuenta con la certificación dedicado. nodo, lo que
implementar EtherCAT TÜV y está estandarizada proporciona a la red una
en IEC 61784-3 velocidad y eficiencia.
22
Se concluye del cuadro comparativo (Tabla 1. Cuadro Comparativo Protocolos o
tecnologías), y por ende la decisión como broker el protocolo MQTT:
MQTT aporta una serie de características sobre otros protocolos. La principal

es su sencillez y ligereza. Esto lo hace adecuado para aplicaciones IoT, donde
frecuentemente se emplean dispositivos de escasa potencia.
Necesita menor cantidad de recursos lo cual se traduce en un menor consumo

de energía, es interesante en dispositivos que funcionan 24/7 y muy
especialmente en dispositivos alimentados por batería.
Por la ligereza del protocolo MQTT requiere un ancho de banda mínimo, lo cual
es importante en redes inalámbricas, o conexiones con posibles problemas de
calidad.
El protocolo MQTT es uno de los estándares para aplicaciones IoT tanto

comerciales como de ámbito maker. Se ha destacado por funciones avanzadas
de seguridad, permanencia de los mensajes en el broker, configuración de
varios broker.
Por un lado, tenemos todas las ventajas de la arquitectura publicador/suscriptor

como son escalabilidad, asincronismo, desacoplamiento entre clientes.
Montaje y puesta en marcha de aplicación IOT con Arduino y MQTT
Al montar el servidor LEMP e instalar las herramientas adecuadas se dejan

configuradas las siguientes características.
Linux Ubuntu Server
Usuarios: root / iot

Contraseña: 10uccpruebaelectro.bogota
23
Ilustración 1. Descripción Linux usado.8
Ilustración 2. Puertos abiertos Linux 1.9
8,9 Autoría propia
24
Ilustración 3. Puertos abiertos Linux 2.10
Nginx
Ilustración 4. Versión Nginx.11
10,11 Autoría propia
25
MySQL
Ilustración 5. Versión MySQL.12
Se crean dos tablas y dos consultas respectivamente, en la base de datos que

lleva con nombre de admin_pruebasiot, para poder hacer el login de un usuario,
suscripción y publicación; mqtt_acl para el acceso a determinados tópicos de
conexión, y mqtt_user para control de cada usuario con su respectiva
contraseña.
Ilustración 6. BD. mqtt_acl. 13
26
Ilustración 7. BD. mqtt_user.14
PHP
Ilustración 8. Versión PHP.15
Paneles de control montados, para una manipulación más intuitiva del servidor,
VESPA para control de tecnologías y permisos al servidor, y EMQ-X, para
MQTT.
VESTA
Usuario: admin
Contraseña: opPkSmQ5GK
27
Ilustración 9. Panel de ingreso VESTA.16
Ilustración 10. Info. DNS VESTA.17
28
Ilustración 11. Info Base de datos desde VESTA.18
18 Autoría propia
29
Ilustración 12. Tecnologías usadas en el servidor.19
19 Autoría propia
30
Ilustración 13. Visualización de puertos abiertos en el panel VESTA.20
Ilustración 14. IP LAN y WAN.21
31
EMQ-X
Usuario: admin
Contraseña: public
Ilustración 155. Panel ingreso EMQ-X22
Ilustración 166. Habilitación de autenticación por base de datos MySQL.23
32
Ilustración 17. Puertos que usa EMQ-X.24
phpMyAdmin
Usuario: admin_iot
Ilustración 18. Control de acceso phpMyAdmin.25
33
Ilustración 19. Base de datos creada.26
Programación WEB
Consiste en un archivo desarrollado con tecnología HTML, PHP y JavaScript,

para la aplicación Web responsiva e implementada en una red LAN.
- Encabezado, declaración de librerías y archivos a usar.
<!DOCTYPE html>
<html lang="es">
<head>
<title>UCC IOT</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Admin, Dashboard, Bootstrap, Bootstrap 4, Angular, AngularJS" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-barstyle" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="UCC IOT">
<meta name="mobile-web-app-capable" content="yes">
<script src="https://unpkg.com/mqtt@4.1.0/dist/mqtt.min.js"></script>
<script src="libs/jquery/jquery/dist/jquery.js"></script>
<link rel="apple-touch-icon" href="../assets/images/logo.png">
<link rel="shortcut icon" sizes="196x196" href="../assets/images/logo.png">
<link rel="stylesheet" href="../assets/animate.css/animate.min.css" type="text/css" />
26 Autoría propia
34
<link rel="stylesheet" href="../assets/glyphicons/glyphicons.css" type="text/css" />
<link rel="stylesheet" href="../assets/font-awesome/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="../assets/material-design-icons/material-design-icons.css" type="text/css" />
<link rel="stylesheet" href="../assets/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="../assets/styles/app.css" type="text/css" />
<link rel="stylesheet" href="../assets/styles/font.css" type="text/css" />
<link rel="stylesheet" href="../assets/styles/prop.css" type="text/css" />
</head>
- Cuerpo, barra lateral.
<body>
<div class="app" id="app">
<div id="aside" class="app-aside modal fade folded md nav-expand">
<div class="left navside indigo-900 dk" layout="column">
<div class="navbar navbar-md no-radius">
<a class="navbar-brand">
<a href="https://www.ucc.edu.co/formacion-continua/Paginas/seminario-de-profundizacion-en-
redes-de-telecomunicaciones-.aspx">
<span class="hidden-folded inline">Seminario UCC</span>
</a>
</a>
</div>
<div flex class="hide-scroll">
<nav class="scroll nav-active-primary">
<ul class="nav" ui-nav>
<li class="nav-header hidden-folded">
<small class="text-muted">Laboratorios</small>
</li>
<li>
<a href="index.php" >
<span class="nav-icon">
<i class="material-icons md-24">speaker</i>
</span>
<span class="nav-text">ServoMotor LA</span>
35
</a>
</li>
<li>
<a href="/views/page/blank.html">
<span class="nav-icon">
<i class="material-icons md-24">speaker</i>
</span>
<span class="nav-text">ServoMotor LC pronto!</span>
</a>
</li>
</ul>
</nav>
</div>
<div flex-no-shrink>
<div ui-include="'../views/blocks/aside.bottom.0.html'"></div>
</div>
</div>
</div>
- Footer, nombres de los desarrolladores.
<div id="content" class="app-content box-shadow-z0" role="main">
<div class="app-footer">
<div class="p-2 text-xs">
<div class="pull-right text-muted py-1">
<strong>Ivan Jaimes - Wilmar Cendales</strong>
</div>
<div class="nav">
<a class="nav-link" href="../">Realizado por:</a>
</div>
</div>
</div>
36
- Cuerpo, recuadro central (Opciones principales de la aplicación).
<div ui-view class="app-body" id="view">
<div class="padding">
<div class="margin">
<h5 class="mb-0 _300">Servo motor en lazo abierto de cuatro angulos predeterminados</h5>
</div>
<div class="row">
<div class="col-sm-12 col-md-5 col-lg-4">
<div class="row">
<div class="col-sm-6">
<div class="box p-a">
<div class="pull-left m-r">
<i class="fa fa-ban text-2x text-danger m-y-sm"></i>
</div>
<div class="clear">
<div class="text-muted">Angulo</div>
<h4 class="m-0 text-md _600"><a onclick="process_angulo_0()"

id="angulo_0">0°</a></h4>
</div>
</div>
</div>
<i class="fa fa-expand text-2x text-info m-y-sm"></i>
</div>
<div class="clear">

id="angulo_45">45°</a></h4>
</div>
</div>
</div>
37
<i class="fa fa-long-arrow-up text-2x text-accent m-y-sm"></i>
</div>
<div class="clear">

id="angulo_90">90°</a></h4>
</div>
</div>
</div>
<i class="fa fa-history text-2x text-success m-y-sm"></i>
</div>
<div class="clear">

id="angulo_180">180°</a></h4>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-7 col-lg-8">
<div class="row no-gutter box dark bg">
<div class="box-header">
<h3>Visualizacion Real</h3>
<center>
<video display:block margin:auto height=200 width=400 autoplay controls/>
<script>
38
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia;
navigator.getUserMedia({audio:false, video:true},function(vid){
document.querySelector('video').src = window.URL.createObjectURL(vid);
});
</script>
</center>
</div>
<div class="box-body">
<div ui-jp="plot" ui-refresh="app.setting.color" ui-options="
data: [[1, 6.1], [2, 6.3], [3, 6.4], [4, 6.6], [5, 7.0], [6, 7.7], [7, 8.3]],
points: { show: true, radius: 0},
splines: { show: true, tension: 0.45, lineWidth: 2, fill: 0 }
},
data: [[1, 5.5], [2, 5.7], [3, 6.4], [4, 7.0], [5, 7.2], [6, 7.3], [7, 7.5]],
points: { show: true, radius: 0},
splines: { show: true, tension: 0.45, lineWidth: 2, fill: 0 }
],
colors: ['#0cc2aa','#fcc100'],
series: { shadowSize: 3 },
xaxis: { show: true, font: { color: '#ccc' }, position: 'bottom' },
yaxis:{ show: true, font: { color: '#ccc' }},
grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' },
tooltip: true,
tooltipOpts: { content: '%x.0 is %y.4', defaultTheme: false, shifts: { x: 0, y: -40 } }
" style="height:162px" >
</div>
39
</div>
</div>
<div class="col-sm-4 dker">
<div class="box-header">
<h3>Angulo Actual</h3>
</div>
<div class="box-body">
<center class="display-3 _700 l-s-n-3x m-t-lg m-b-md"><a id="angulo_actual"></a>°</center>
</div>
</div>
</div>
<div>
<a href="https://www.ucc.edu.co/Paginas/inicio.aspx"><center><img id="imagenucc"

src="../assets/images/ucc.png" alt="imagen" /></center></a>
</div>
</div>
</div>
</div>
- Conexión, suscripción y ejecución de envió de data a MQTT por medio

de Sockets y JavaScript.
<script type="text/javascript">
// connect options
const options = {
connectTimeout: 4000,
// Authentication
clientId: 'iotucc',
// username: 'emqx',
// password: 'emqx',
keepalive: 60,
clean: true,
const WebSocket_URL = 'ws://192.168.1.156:8093/mqtt'
40
// TCP/TLS connect url
//const TCP_URL = 'mqtt://192.168.1.156:1883'
//const TCP_TLS_URL = 'mqtts://192.168.1.156:8883'
const client = mqtt.connect(WebSocket_URL, options)
client.on('connect', () => {
//console.log('Conectado')
client.subscribe('angulo',{qos:0},(error)=>{
if(!error){
//console.log('Suscripcion exitosa')
else{
//console.log('Suscripcion errada')
})
})
client.on('message',(topico, message)=>{
//console.log('Recibiendo dato', topico, ':', message.toString())
process_msg(message);
})
client.on('reconnect', (error) => {
//console.log('Error al reconectar', error)
})
client.on('error', (error) => {
//console.log('Error de conexion:', error)
})
function update_values(angulo){
$("#angulo_actual").html(angulo);
function process_msg(message){
var msg = message.toString();
var sp = msg.split(",");
var angulo_actual = sp[0];
update_values(angulo_actual);
41
}
function process_angulo_0(){
client.publish('angulo','0',(error)=>{
//console.log(error || 'Mensaje enviado')
})
})
})
})
//process_msg("90")
</script>
</body>
</html>
Programación Arduino (Firmware ESP WROOM - 32)
Firmware de la ESP32 desarrollado en lenguaje Arduino, de alto nivel

Processing, similar a C++.27
27 https://www.bejob.com/que-es-la-programacion-con-arduino-y-para-que-sirve/
42
- Declaración de librerías.
#include <Arduino.h>
#include <WiFi.h>
#include <PubSubClient.h>
#include <esp32-hal-ledc.h>
- Declaración de variables globales.
#define TIMER_WIDTH 16
const char *ssid = "IOT";
const char *password = "iot123456*";
const char *mqtt_server = "192.168.1.156";
const char *mqtt_user = "web_client";
const char *mqtt_pass = "wc123456*";
const int mqtt_port = 1883;
char msg[2];
int posm=0;
int contconexion =0;
int angulo=0;
long lastMsg=0;
- Iniciación de modulo ESP WROOM – 32.
WiFiClient espClient;
PubSubClient client(espClient);
- Función Setup, para configuración de la ESP WROOM - 32.
//**** funcion setup wifi ****
43
void setup_wifi(){
WiFi.begin(ssid, password);
IPAddress ip(192,168,1,250);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);
WiFi.config(ip, gateway, subnet);
//Serial.println("Conectado Wifi");
//Serial.println(WiFi.localIP());
while (WiFi.status()!=WL_CONNECTED and contconexion < 50){
++contconexion;
delay(300);
//Serial.print(".");
- Función reconectar, si la ESP WROOM - 32 pierde conexión intentara

reconectarse en 5 segundos.
//**** funcion reconectar ****
void reconnect(){
while(!client.connected()){
//Serial.println("");
//Serial.println("Intentando conexion MQTT");
String clientId="iotucc_";
clientId+= String(random(0xffff), HEX);
if (client.connect(clientId.c_str(),mqtt_user,mqtt_pass)){
// Serial.println("Conectado");
client.subscribe("angulo");
else{
//Serial.print("Fallo de conexion");
//Serial.print(client.state());
//Serial.println("Intentamos de nuevo en 5 segundos");
delay(5000);
44
}
- Función callback, para llenar el array de la información separada por

comas desde la aplicación web, y determina el movimiento del servo
motor, dependiendo de la información que llegue.
//**** funcion Callback ****
void callback(char* topic, byte* payload, unsigned int length){
String incoming="";
//Serial.print("Mensaje recibido desde ");
//Serial.print(topic);
//Serial.println("");
for(int i = 0; i < length; i++){
incoming+= (char)payload[i];
incoming.trim();
//Serial.println("y aqui llega " + incoming);
if(incoming.equals("0")){
// Serial.println("mueve motor 0");
ledcWrite(1,2222);
ledcWrite(1,3333);
ledcWrite(1,4700);
ledcWrite(1,7777);
45
}
/////////////////////////////////////////////////////////////////
- Iniciación de programa “main”.
void setup() {
Serial.begin(115200);
setup_wifi();
ledcSetup(1, 50, TIMER_WIDTH);
ledcAttachPin(2, 1);
client.setServer(mqtt_server, mqtt_port);
client.setCallback(callback);
////////////////////////////////////////////////////////////////
- Ciclo repetitivo de tareas, desde donde también se puede enviar

información desde la ESP WROOM – 32 a la aplicación WEB, en este
caso no implementada ni necesaria.
void loop() {
if(!client.connected()){
reconnect();
client.loop();
long now=millis();
if(now-lastMsg > 500){
lastMsg=now;
// angulo=90;
// String to_send= String(angulo);
// to_send.toCharArray(msg, 25);
// Serial.print("Publicamos mensaje");
// Serial.println(msg);
46
// client.publish("angulo",msg);
Evidencias de funcionamiento
Como resultante la aplicación funciona en perfectas condiciones.
Ilustración 20. Aplicación WEB.28
Ilustración 21. Aplicación WEB responsiva No. 1.29
47
Ilustración 22. Aplicación WEB responsiva No. 2.30
30 Autoría propia
48
Ilustración 23. Conexión Serial ESP WROOM - 32.31
Ilustración 24. Servo motor a 0°.32
49
33,34,35 Autoría propia
50
Capitulo IV. CONCLUSIONES
Al elegir MQTT se elige el broker o protocolo más adecuado para poder enviar
eficientemente ordenes e información por medio de arreglos, en una trama muy
eficiente.
El caso de estudio realizado da como resultados positivos en la implementación

de una plataforma WEB, por medio de un broker MQTT, montado en una red
LAN, con una ESP WROOM - 32 programada con lenguaje Arduino; totalmente
funcional, basado en tecnologías de licencias libres, bajos recursos económicos
y eficiente para su desarrollo.
Como evidencia se dejan dos videos del funcionamiento de la plataforma y del

servo motor, así mismo el servidor completo en un archivo comprimido zip con
la misma contraseña de la cuenta de correo, en el servidor de Gmail, y Google
Drive creados para el proyecto.
Usuario: itpruebasiot@gmail.com
51
REFERENCIAS BIBLIOGRÁFICAS
Ángel Hita Albarracín, (Marzo de 2020), MQTT vs HTTP: ¿Qué protocolo es

mejor para IoT?, BBits Tecnología y Opinión, Recuperado de:
https://borrowbits.com/2020/04/mqtt-vs-http-que-protocolo-es-mejor-para-
iot/?cn-reloaded=1
Jan Bartnitsky, (23 enero de 2018), HTTP vs MQTT performance tes, Flespi,
Recuperado de: https://flespi.com/blog/http-vs-mqtt-performance-tests
Aspl Hosting, (2 abril de 2019), MQTT para conectar una WEB online con un
backoffice remoto, Open expo europe, Recuperado de
https://openexpoeurope.com/es/mqtt-para-conectar-una-web-online-con-un-
backoffice-remoto-aspl/
Carlos A. Hervas Parra, (Junio 2018), La Plata – Argentina, Análisis de

rendimiento de protocolos de Publicación/Subscripción en comunicación con
una Red de Sensores Inalámbricos Zigbee, Recuperado de:
http://sedici.unlp.edu.ar/bitstream/handle/10915/69435/Documento_completo.
pdf-PDFA.pdf?sequence=1&isAllowed=y
Ing. Martin Castro, Sistemas embebidos Avanzados, Recuperado de:

https://www.dsi.fceia.unr.edu.ar/images/Sistemas_Embebidos/INTERNET_DE
_LAS_COSAS_IoT_V3.pdf
52
Beckhoff EtherCAT components, Beckhoff, Recuperado de:
https://www.beckhoff.com/english.asp?highlights/ethercat/default.htm?id=3557
204338120?pk_campaign=AdWords-AdWordsSearch-
EtherCatEN_DynAd&pk_kwd=ethercat
Revista Automática e Instrumentación.com, (marzo de 2020), Madrid – España,

Numero 518 pagina 52-54, Recuperado de:
http://www.automaticaeinstrumentacion.com/es/notices/2020/04/mqtt-el-
nuevo-modelo-de-comunicacion-para-la-industria-4.0-
46436.php#.X57WJ4hKjIV
José Carlos Villajulca, (agosto 17 de 2010), Redes ControlNet y MODBUS

PLUS y resumen de redes, Lima – Perú, Recuperado de:
https://instrumentacionycontrol.net/redes-controlnet-y-modbus-plus-y-
resumen-de-redes/
53
ANEXOS
Datasheet servo motor MG90S
Anexo 1. Datasheet Servo motor MG90S36
36 https://www.electronicoscaldas.com/datasheet/MG90S_Tower-Pro.pdf
54
Esquemático ESP WROOM - 32.
Anexo 2. Esquemático ESP WROOM – 3237
Para más características se recomienda consultar los datasheet ya sea en la página referenciada, o el documento se encuentra
en el Google Drive del proyecto.
37 https://www.espressif.com/sites/default/files/documentation/esp32-wroom-32_datasheet_en.pdf
54
Rendimiento y comportamiento el servidor.
Anexo 3. Memoria RAM.38
Anexo 4. Uso de tarjeta de red.39
55
Anexo 5. Rendimiento de consultas MySQL y peticiones en NGINX.40
40 Autoría propia
56

2020-Desarrollo Plataforma Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

2020-Desarrollo Plataforma Web

Cargado por

Copyright:

Formatos disponibles

DESARROLLO DE UNA PLATAFORMA WEB PARA UN SISTEMA DE

CONTROL IoT SOBRE ARDUINO Y MQTT

IVAN SANTIAGO JAIMES MONTAÑA

UNIVERSIDAD COOPERATIVA DE COLOMBIA

IVAN SANTIAGO JAIMES MONTAÑA

SEMINARIO DE PROFUNDIZACIÓN PARA OPTAR AL TÍTULO

Asesor: IVONNE MARITZA DURAN PRADA

UNIVERSIDAD COOPERATIVA DE COLOMBIA

Para ellos… los estudiantes.

Capitulo I. PLANTEAMIENTO DEL PROBLEMA ......................................... 12

Ilustración 1. Descripción Linux usado. ........................................................... 24

Tabla 1. Cuadro Comparativo protocolos o tecnologías. ................................ 19

Anexo 1. Datasheet Servo motor MG90S ....................................................... 54

La consolidación de sistemas manipulados y automatizados a distancia se

The consolidation of automated systems and manipulated remotely acquires

En el mercado se presentan varias soluciones para la industria de la

El caso de estudio plantea el desarrollo de una solución, al implementar

3.1 Objetivo General

3.2 Objetivos Específicos

Seleccionar el broker a utilizar para el desarrollar una plataforma web para un

Implementar el bróker seleccionado en una red LAN, para sistemas de control.

Integrar tecnología Arduino y el bróker seleccionado para el desarrollo de la

Verificar que la aplicación si envía y recibe información, con lo cual el hardware

Como primera medida se plantea un cuadro comparativo con las diferentes

Continuando con el desarrollo encontramos la instalación y puesta en marcha

Así mismo el montaje de los programas para controlar dichas plataformas se

VESTA (Panel de control de publicación de WEB)

EMQ-X (Panel de control y administrador de la librería y protocolo MQTT)

phpMyAdmin (Panel de control de las bases de datos)

Posterior a esto, se da el desarrollo una página o aplicación boceto WEB, la

Se hacen pruebas y se toman evidencias de uso.

Para seleccionar el broker se realizó la comparación de los siguientes

MQTT: Es un protocolo de mensajería estándar de OASIS para Internet de las

HTTP: Hypertext Transfer Protocol (HTTP) (o Protocolo de Transferencia de

DEVICENET: DeviceNet es un protocolo de comunicación usado en la industria

ETHERNET/IP: EtherNet / IP (IP = Protocolo industrial) es un protocolo de red

CONTROLNET: ControlNet es un protocolo de red abierto para aplicaciones de

ETHERCAT: Es una tecnología de Ethernet industrial en tiempo real

TECNOL. VELOCIDAD IMPLEMENTACION LICENCIA SEGURIDAD HARDWARE TECNOLOGIA ARQUTECTURA

características le parte del protocolo pequeña de comunicaciones basado en un protocolo

DeviceNet es mejor para

Velocidad de Necesita una microcontroladores

pero actualmente la representación de datos,

Control Net es un nivel

ControlNet con procesadores

MQTT aporta una serie de características sobre otros protocolos. La principal

Necesita menor cantidad de recursos lo cual se traduce en un menor consumo

El protocolo MQTT es uno de los estándares para aplicaciones IoT tanto

Por un lado, tenemos todas las ventajas de la arquitectura publicador/suscriptor

Montaje y puesta en marcha de aplicación IOT con Arduino y MQTT

Al montar el servidor LEMP e instalar las herramientas adecuadas se dejan

Linux Ubuntu Server

Usuarios: root / iot

Ilustración 2. Puertos abiertos Linux 1.9

8,9 Autoría propia

Ilustración 4. Versión Nginx.11

10,11 Autoría propia

Ilustración 5. Versión MySQL.12

Se crean dos tablas y dos consultas respectivamente, en la base de datos que

Ilustración 6. BD. mqtt_acl. 13

12,13 Autoría propia

Ilustración 8. Versión PHP.15

14,15 Autoría propia