universidad simón bolívar decanato de estudios profesionales coordinación de tecnología e ...

90 Pages·2015·1.96 MB·Spanish

by  Angel Depablos

UNIVERSIDAD SIMÓN BOLÍVAR
DECANATO DE ESTUDIOS PROFESIONALES
COORDINACIÓN DE TECNOLOGÍA E INGENIERÍA ELECTRÓNICA

ACTUALIZACIÓN TECNOLÓGICA Y DESARROLLO DE APLICACIÓN PARA
DISPOSITIVOS MÓVILES BASADOS EN ANDROID DEL LABORATORIO
REMOTO DE CONTROL

Por:
Ángel Augusto Depablos Zanchetta

PROYECTO DE GRADO
Presentado ante la Ilustre Universidad Simón Bolívar
Como Requisito Parcial para Optar por el Título de
Ingeniero Electrónico

Sartenejas, Noviembre de 2015
UNIVERSIDAD SIMÓN BOLÍVAR
DECANATO DE ESTUDIOS PROFESIONALES
COORDINACIÓN DE TECNOLOGÍA E INGENIERÍA ELECTRÓNICA

ACTUALIZACIÓN TECNOLÓGICA Y DESARROLLO DE APLICACIÓN PARA
DISPOSITIVOS MÓVILES BASADOS EN ANDROID DEL LABORATORIO
REMOTO DE CONTROL

Por:
Ángel Augusto Depablos Zanchetta

Realizado con la asesoría de:
Tutor Académico: Prof. Ernesto Granado

PROYECTO DE GRADO
Presentado ante la Ilustre Universidad Simón Bolívar
Como Requisito Parcial para Optar por el Título de
Ingeniero Electrónico

Sartenejas, Noviembre de 2015

ACTUALIZACIÓN TECNOLÓGICA Y DESARROLLO DE APLICACIÓN PARA
DISPOSITIVOS MÓVILES BASADOS EN ANDROID DEL LABORATORIO
REMOTO DE CONTROL

Por:
Ángel Augusto Depablos Zanchetta

RESUMEN

El Proyecto de Grado que se presenta a continuación tiene como objetivo la
actualización tecnológica y desarrollo de aplicación para dispositivos móviles basados
en Android del laboratorio remoto de Control de la Universidad Simón Bolívar. Se
realizó una investigación de la situación actual del entorno del laboratorio así como
las necesidades de actualización y un estudio de las plataformas y herramientas
tecnológicas más adecuadas para el desarrollo. Las actividades realizadas en el
proyecto de grado, concluyen en la actualización del programa servidor para las
prácticas del laboratorio de control, enfocada a trabajar con plataformas embebidas y
el nacimiento de una aplicación móvil que permite realizar las prácticas de
laboratorio desde un teléfono inteligente. El desarrollo e integración se lleva a cabo
siguiendo el patrón arquitectónico modelo-vista-controlador (MVC) y la metodología
ágil. Se hizo uso de la plataforma embebida Arduino UNO y los entornos de desarrollo
de LabVIEW, Ionic Framework, AngularJS, realizando los programas en códigos
HTML, CSS y JavaScript.

iv
AGRADECIMIENTOS

Me cuesta recordar la persona que un día me dijo que ¨la meta de esta universidad
no es graduar grandes calculadoras, sino formar grandes profesionales y aún más
grandes personas¨, pero viendo la situación del país no me hace falta pensarlo dos
veces para verle la lógica a esta afirmación.

Tan solo si más venezolanos hubieran tenido la oportunidad de compartir en su
camino con personas con tanta vocación y talento como lo fueron todos mis profesores
en la USB, estoy seguro de que nuestra realidad sería otra. Esta es la razón por la
que quiero dedicar estos agradecimientos y este libro principalmente a todos aquellos
amigos y profesores que compartieron conmigo en estos años, con mención especial
para mi tutor y profesor Ernesto Granado y mis amigos y compañeros Alejandro
Drago, Guillermo Suárez, Jesús Guerra, Mauro Ramírez, Miguel Vizcaíno, Tony
Narváez, Williams Mariño y Yonas Dhont.

También quiero agradecerle a mi madre Sheila Zanchetta, mi padre Alirio
Depablos, hermanas Angie Depablos y Aliángela Depablos, mi tía Elia Rosario, mi
abuela Oliva Rosario y mi compañera Yaridelis Romero por haber sido mi apoyo
incondicional a través de los años, saber cambiar el panorama cuando todo se veía
oscuro y representar mi inspiración en las situaciones adversas.

v
ÍNDICE GENERAL

RESUMEN .............................................................................................................................................. iv
AGRADECIMIENTOS ......................................................................................................................... v
ÍNDICE GENERAL ............................................................................................................................. vi
ÍNDICE DE FIGURAS ....................................................................................................................... ix
INTRODUCCIÓN ............................................................................................................................... 11
Antecedentes .....................................................................................................................................................12
Justificación e importancia .........................................................................................................................13
Planteamiento del problema .......................................................................................................................14
Objetivo general ...............................................................................................................................................15
Objetivos específicos .......................................................................................................................................16
CAPÍTULO 1 ........................................................................................................................................ 18
MARCO TEÓRICO ............................................................................................................................. 18
1.1 Adquisición de datos (DAQ) ..........................................................................................................18
1.2 Arquitectura cliente-servidor .......................................................................................................18
1.3 Application Programming Interface (API) ..............................................................................19
1.4 Aplicación móvil ................................................................................................................................19
1.5 Framework ..........................................................................................................................................20
1.6 Laboratorio Remoto .........................................................................................................................20
1.7 Patrón arquitectónico Modelo-Vista-Controlador (MVC) ..................................................20
1.8 Web Service .........................................................................................................................................21
CAPÍTULO 2 ........................................................................................................................................ 22
MARCO TECNOLÓGICO ............................................................................................................... 22
2.1 Tecnologías y Herramientas utilizadas ....................................................................................22
2.1.1 Android SDK .................................................................................................................................................22
2.1.2 Angular-chart.js ..........................................................................................................................................22
2.1.3 AngularJS .......................................................................................................................................................22
2.1.4 Apache Cordova...........................................................................................................................................23
vi
2.1.5 Arduino .............................................................................................................................................................23
2.1.6 Atom ...................................................................................................................................................................23
2.1.7 C# .........................................................................................................................................................................24
2.1.8 Cascading Style Sheets (CSS) .............................................................................................................24
2.1.9 Chart.js .............................................................................................................................................................24
2.1.10 HyperText Markup Language (HTML) ........................................................................................24
2.1.11 HyperText Transfer Protocol (HTTP) ............................................................................................25
2.1.12 Inter-Integrated Circuit (I²C) ..............................................................................................................25
2.1.13 Ionic Framework.........................................................................................................................................25
2.1.14 JavaScript .......................................................................................................................................................26
2.1.15 JSON .................................................................................................................................................................26
2.1.16 Laboratory Virtual Instrumentation Engineering Workbench (LabVIEW) ............26
2.1.17 LINX ..................................................................................................................................................................27
2.1.18 ngCordova .......................................................................................................................................................27
2.1.19 NI myRIO .......................................................................................................................................................27
2.1.20 Node.js ..............................................................................................................................................................27
2.1.21 Node Package Manager (NPM) ..........................................................................................................28
2.1.22 PhoneGap ........................................................................................................................................................28
2.1.23 Postman ...........................................................................................................................................................28
2.1.24 Pulse-Width Modulation (PWM) .......................................................................................................28
2.1.25 Serial Peripheral Interface (SPI) ......................................................................................................29
2.1.26 Tanques acoplados Quanser ................................................................................................................29
2.1.27 Virtual Instrument (VI) ..........................................................................................................................29
2.1.28 User Interface (UI) ....................................................................................................................................30
2.1.29 Xamarin ...........................................................................................................................................................30
2.1.30 Extensible Markup Language (XML) .............................................................................................30
CAPÍTULO 3 ........................................................................................................................................ 32
MARCO METODOLÓGICO ........................................................................................................... 32
3.1 Desarrollo ágil de software ...........................................................................................................32
CAPÍTULO 4 ........................................................................................................................................ 35
DESARROLLO DE LA SOLUCIÓN ............................................................................................ 35
vii
4.1 Fase 1: Migración del actual servidor de laboratorio hacia un dispositivo de altas
prestaciones .......................................................................................................................................................35
4.1.1 Estudio del programa de la actual aplicación servidor del laboratorio ......................35
4.1.2 Desarrollo e implementación de la nueva aplicación ............................................................38
4.2 Fase 2: Selección de herramientas de desarrollo ..................................................................41
4.2.1 Revisión de los principales entornos de desarrollo de aplicaciones (Cliente) .........42
4.2.2 Selección del entorno de desarrollo (Cliente) .............................................................................42
4.2.3 Revisión de las herramientas para implementar el servidor. ..........................................43
4.3 Fase 3: Diseño de interfaz .............................................................................................................44
4.3.1 Interfaz del cliente. ...................................................................................................................................44
4.3.2 Interfaz del servidor. ................................................................................................................................50
4.4 Fase 4: Desarrollo de código que permite la comunicación Cliente-Servidor ............50
4.4.1 Introducción al entorno de desarrollo de la aplicación cliente.........................................52
4.4.2 Implementación de interfaz gráfica.................................................................................................53
4.4.3 Implementación de servicios................................................................................................................54
4.4.4 Desarrollo del código del servidor en LabVIEW ......................................................................56
4.4.4.1 Conexión entre servidor y sistema ...................................................................................................56
4.4.4.2 Desarrollo del servidor ............................................................................................................................59
4.4.5 Visualización de los datos......................................................................................................................60
CONCLUSIONES ............................................................................................................................... 64
RECOMENDACIONES .................................................................................................................... 66
REFERENCIAS ................................................................................................................................... 68
APÉNDICE A. ...................................................................................................................................... 74
APÉNDICE B. ...................................................................................................................................... 83
APÉNDICE C. ...................................................................................................................................... 86

viii
ÍNDICE DE FIGURAS

Figura 3. 1 – Esquema general de desarrollo ágil de software. .................................. 33
Figura 4. 1 – Acceso al sistema actual. ........................................................................ 36
Figura 4. 2 – Ventana principal del Sistema actual. ................................................... 37
Figura 4. 3 – Arquitectura de la aplicación actual. ..................................................... 38
Figura 4. 4 – Integración planteada en el desarrollo del trabajo de grado. ............... 39
Figura 4. 5 – Uso de la interfaz LINX. ......................................................................... 39
Figura 4. 6 – Arquitectura de la comunicación basada en servicios Web. ................. 40
Figura 4. 7 – Arquitectura de la comunicación Cliente-Servidor usando un servicio
Web. ............................................................................................................................... 41
Figura 4. 8 – Maqueta de pantalla de acceso móvil. ................................................... 45
Figura 4. 9 – Maqueta de pantalla principal de la aplicación móvil. ......................... 46
Figura 4. 10 – Partes de la maqueta de pantalla principal de la aplicación móvil. ... 47
Figura 4. 11 – Maqueta de pantalla de ejecución de la aplicación móvil. .................. 48
Figura 4. 12 – Detalles de la maqueta de pantalla de ejecución de la aplicación
móvil. ............................................................................................................................. 49
Figura 4. 13 – Maqueta de pantalla de práctica completada de la aplicación móvil. 50
Figura 4. 14 – Diagrama de flujo del sistema. ............................................................. 51
Figura 4. 15 – Manejo de errores. Autenticación fallida móvil. .................................. 55
Figura 4. 16 – Inicio de la instalación del firmware. ................................................... 56
Figura 4. 17 – Sistema simulado de tanques. .............................................................. 57
Figura 4. 18 – Interfaz del simulador en LabVIEW. ................................................... 58
Figura 4. 19 – Diagrama del bloque del simulador. .................................................... 58
Figura 4. 20 – Inicio de la creación de un servicio Web. ............................................. 59
Figura 4. 21 – Propiedades del servicio web. ............................................................... 60
Figura 4. 22 – Arreglos generados al finalizar el experimento. .................................. 61
Figura 4. 23 – Interfaz del simulador en LabVIEW. ................................................... 61
Figura 4. 24 – Diagrama del bloque del simulador. .................................................... 62
Figura 4. 25 – Inicio de la creación de un servicio Web. ............................................. 63
Figura 4. 26 – Diagrama de almacenamiento de datos. .............................................. 63
ix
LISTA DE ABREVIATURAS

API Application Programming Interface
HTML HyperText Markup Language
HTTP HyperText Transfer Protocol
I2C Inter-Integrated Circuit
IP Internet Protocol
JSON JavaScript Object Notation
MVC Model View Controller
NI National Instruments
PWM Pulse-Width Modulation
SDK Software Development Kit
SMTP Simple Mail Transfer Protocol
SPI Serial Peripheral Interface
SQL Structured Query Language
TCP Transmission Control Protocol
TI Tecnologías de Información
URL Uniform Resource Locator
VI Virtual Instrument
WWW World Wide Web
XML Extensible Markup Language

x