1
Plataforma online para el
control remoto de
dispositivos domésticos
basado en servicios web
Trabajo Final - Ingeniería de Sistemas
Facultad de Ciencias Exactas
Universidad Nacional del Centro de la Provincia de Buenos Aires
Alumnos: Matías Cáceres – Emanuel Vicente
Director: Cristian García Bauza
2
Tabla de Contenidos
Resumen ... 6
1. Introducción ... 7
2. Motivación ... 12
3. Objetivo ... 13
4. Organización de la tesis ... 14
Capítulo 2: Marco teórico ... 16
1. Domótica ... 16
2. AAL ... 17
3. Intellihome ... 18
4. DomoAccess ... 20
5. Accesibilidad ... 20
6. Herramientas y tecnologías ... 21
6.1. HTTP/HTML ... 21
6.2. CSS ... 23
6.3. Javascript ... 25
6.4. AJAX... 26
6.5. Cliente - Servidor ... 28
6.6. Bases de datos / MySQL ... 30
6.7. Modelo Vista Controlador ... 32
6.8. Smarty ... 34
6.9. PHP ... 34
Capítulo 3 – Diseño e Implementación ... 36
1. Resumen ... 36
2. Descripción General del Sistema ... 36
3. Descripción General de los Componentes del Sistema ... 37
4. Intellihome ... 38
5. DomoAccess ... 40
5.1. Arquitectura ... 40
5.2. Descripción de los Componentes ... 41
3
5.4. Gráfica de los componentes del MVC ... 43
5.5. Modelo ... 44
5.5.1. Componente ... 47
5.5.2 Capabilities ... 48
5.5.3. Habitación ... 50
5.5.4. Usuario ... 51
5.6. Vista... 52
Capítulo 4: Instanciación ... 60
1. Resumen ... 60
2. Instanciación y agregado de un sistema domótico ... 60
3. Organización mediante Habitaciones ... 64
4. Registro y configuración de Componentes ... 67
5. Registro, logueo y deslogueo ... 71
6. Ubicación de los Componentes en un Plano ... 72
7. Pantalla principal y navegación. ... 74
8. Almacenamiento de Datos ... 75
8.1. Usuario ... 76
8.2. Habitación ... 76
8.3. Componente ... 78
Capítulo 5: Conclusiones y Trabajos Futuros ... 82
1. Conclusiones ... 82
2. Trabajos Futuros ... 84
4
Tabla de Figuras
Figura 1: Interfaz de HomeOS ... 8
Figura 2: Interfaz de iAble ... 9
Figura 3: Interfaz de DOGeye ... 10
Figura 4: Internet of Things y Sistemas domóticos ... 11
Figura 5: Casa Inteligente ... 13
Figura 6: Objetivo de interfaz pretendida ... 14
Figura 7: Intellihome ... 18
Figura 8: DomoAccess ... 20
Figura 9: Comunicación mediante HTTP ... 22
Figura 10: AJAX como integrador de las demás tecnologías ... 27
Figura 11: Acceso a bases de datos ... 30
Figura 12: Funcionamiento del MVC ... 33
Figura 13: Comunicación entre DomoAccess e Intellihome ... 36
Figura 14: Comunicación Cliente-Servidor en Intellihome ... 39
Figura 15: Detalle de DomoAccess ... 40
Figura 16: Detalle del servidor dentro de DomoAccess ... 42
Figura 17: Modelo Vista Controlador ... 43
Figura 18: Diagrama UML de las distintas clases del modelo ... 45
Figura 19: Diagrama de clases de la vista ... 52
Figura 20: Acceso a Intellihome ... 53
Figura 21: Pestañas de la página principal de DomoAccess ... 53
Figura 22 (compuesta): Vistas de capabilities ... 55
Figura 23: Vista de Habitación con componentes ... 57
Figura 24: Desplegable de tipos de habitación... 65
Figura 25: Diagrama de secuencia de Agregar Habitación ... 67
Figura 26: Formulario para agregar componente ... 67
Figura 27: Desplegable de tipos de componentes ... 68
Figura 28: Diagrama de secuencia de Agregar Componente ... 70
Figura 29: Diagrama de secuencia de Login ... 71
Figura 30: Plano de casa ejemplo ... 73
5
Figura 32: Barra de navegación de DomoAccess ... 74
Figura 33: Diagrama de entidades - relaciones ... 75
Figura 34: Fragmento de la tabla Usuario ... 76
Figura 35: Fragmento de la tabla Habitación ... 77
Figura 36: Tabla de Tipos de Habitación... 77
Figura 37: Fragmento de la tabla Componentes ... 78
Figura 38: Tabla de tipos de componentes ... 79
Figura 39: Tabla de coordenadas ... 80
Figura 40: Disposición de coordenadas en el plano ... 80
6
Resumen
En este trabajo final se desarrolló una plataforma online para controlar remotamente
dispositivos domóticos. Ante la problemática de la falta de un estándar y una interfaz
unificada para los distintos sistemas de casas inteligentes, se optó por crear una aplicación
web que mediante una capa de adaptación o API permita conectar estos dispositivos sin
mayor complejidad. La intención fue que esta capa sea común a los distintos fabricantes
que hay en el mercado, ofreciendo una interfaz única, sencilla e intuitiva, accesible desde
cualquier dispositivo que posea un navegador online.
Como caso de instanciación, se utilizó Intellihome, escrita por la Ingeniera Carolina Valdez
Gándara. Ésta comprende un sistema domótico autónomo controlado mediante gestos, sin
interfaz gráfica. De todas maneras y como ya se mencionó la solución provista es aplicable
a otros sistemas domóticos.
El trabajo fue desarrollado sobre una arquitectura cliente-servidor, con patrón arquitectónico
MVC (modelo-vista-controlador), utilizando todas las tecnologías modernas y óptimas a la
solución: HTML5, CSS3 y Javascript para el frontend, y PHP y MySQL para el backend,
entre otras.
Además de proveer una interfaz común, el valor agregado es dado por la organización de
componentes domóticos dentro del hogar (mediante habitaciones), y el reconocimiento de
los mismos según sus capabilities (o capacidades).
El resultado final es un sistema versátil que puede reconocer una gran variedad de sistemas
domóticos y componentes inteligentes, dando además al usuario las herramientas para
organizar y operar con los mismos de manera sencilla, desde una amplia gama de
7
Capítulo 1: Introducción
1. Introducción
Se conoce como domótica al conjunto de sistemas capaces de automatizar una vivienda,
ofreciendo facilidades a sus usuarios para interactuar con distintos objetos electrónicos. En
la actualidad, estos sistemas están en auge debido a la popularidad del Internet of Things
(IoT) [1], [2]. Los sistemas domóticos proponen diversas formas de interacción a través de
paneles de control, tablets, celulares y sistemas de interfaz natural como gestos o
comandos de voz. Sin embargo, no hay un estándar para la presentación de los datos ni
forma de interacción con los usuarios. Estas son definidas por cada fabricante y es el
usuario quien debe lidiar con los problemas de usabilidad al cambiar o actualizar su sistema
domótico actual.
Cabe destacar que ya existen algunos acercamientos para ofrecer soluciones al respecto,
pero estos también presentan carencias y/o deficiencias tanto en el diseño de la interfaz de
usuario como en el de la experiencia del mismo. Por ejemplo en [3] se desarrolló una
interfaz que, si bien cumple con la premisa de interconectar dispositivos domóticos
heterogéneos, no logra ser sencilla, llenando la pantalla de elementos que confunden al
usuario y degradan la experiencia de uso. Aunque la idea de ordenar dispositivos por
habitación es buena, la forma en que fue llevada a cabo dista de las interfaces modernas y
simples que se buscan en casos así. Algo similar sucede con [4] que falla a la hora de la
interacción del usuario con el sistema de domótica debido a malas decisiones de diseño y
navegación. Por otro lado también existen Home OS [5], iAble Domotics [6] y DOGeye [7],
propuestas de distintas agrupaciones que presentan interfaces de usuario de tipo grilla de
8
Figura 1: Interfaz de HomeOS
HomeOS es un sistema operativo prototipo para el hogar. Ha sido desarrollado por
Microsoft con la intención de centralizar el control de los dispositivos conectados del hogar.
Provee controles intuitivos para el usuario y abstracciones de alto nivel para los
desarrolladores que deseen programar nuevos dispositivos. Agrega además HomeStore,
una tienda mediante la cual los usuarios pueden obtener aplicaciones compatibles con sus
dispositivos. Como desventaja se puede mencionar que está en etapas muy tempranas de
desarrollo, siendo probado en sólo 12 hogares; cuenta con una gama reducida y limitada
de dispositivos compatibles y no ofrece conexión mediante servicios web, sino que es una
9
Figura 2: Interfaz de iAble
En segundo lugar nos encontramos con Srlabs iAble, un software desarrollado para
solucionar los problemas que suelen tener personas con discapacidad a la hora de
comunicarse con los componentes domóticos. iAble ofrece una interfaz dedicada diseñada
como alternativa a las convencionales como lo son el teclado y mouse. Esta se controla
mediante la visión, con un software que reconoce donde se está posando la mirada y
durante cuánto tiempo, separando además los botones de control de otras áreas más
neutrales. Si bien la solución es intuitiva y muy accesible, las opciones que ofrece son
reducidas y sin opción de agregar nuevas a futuro (al menos, no de manera sencilla). Es
una solución que se enfoca en casos muy particulares, por lo que no es satisfactoria para
10
Figura 3: Interfaz de DOGeye
Por último tenemos DOGeye, un sistema planeado para rellenar el hueco existente en los
sistemas domóticos con interacción multimodal mediante tecnologías de seguimiento
ocular. DOGeye funciona mediante una conexión XML-RPC, puede ser controlado con la
vista, así como también con métodos de entrada tradicionales (teclado, mouse, o pantallas
táctiles). El sistema funciona mediante DOG, un subsistema previamente desarrollado que
integra y abstrae funcionalidades de distintos sistemas domóticos, proveyendo acceso de
alto nivel a estas tecnologías. Si bien es una mejora con respecto a iAble, debido a la
incorporación de variados métodos de control, su interfaz aún es pobre, y poco intuitiva.
Ofrece un sistema organizativo mediante habitaciones, pero no es amigable para con el
usuario. Además, como iAble y HomeOS, operan con una gama reducida de componentes
11
Como se puede observar estas soluciones ofrecen funcionalidades básicas para resolver
la problemática pero resultan bastante incompletas cuando son comparadas con las
necesidades actuales. Además, son soluciones acotadas a unos pocos dispositivos y
apuntadas a ciertas minorías.
Por lo expuesto anteriormente, pretendemos en este trabajo desarrollar una capa de
presentación para los usuarios, permitiendo interactuar con diferentes sistemas domóticos
ya existentes de manera sencilla e intuitiva, desde cualquier dispositivo con acceso a
Internet. La intención es unificar la interfaz de usuario para facilitar el uso de sistemas
domóticos en plataformas online, proveyendo además la posibilidad de agregar a futuro
nuevos dispositivos compatibles sin un esfuerzo considerable.
12
2. Motivación
Como mencionamos anteriormente los dispositivos domóticos suelen controlarse con
mandos a distancia (controles remotos), interfaces táctiles, gestuales o incluso a través de
comandos de voz. Sin embargo, hoy en día gran parte de la población cuenta con un
smartphone, tablet, o computadora con acceso a Internet. Se pretende entonces, mejorar la usabilidad y unificar las interfaces de usuario de los sistemas de domótica, solucionando
el problema existente ya que no hay un estándar definido y cada fabricante presenta los
datos de diferentes maneras. Para ello, se aprovechó el potencial que brindan los
dispositivos como smartphones y tablets, decorando así la solución original provista en [9].
La experiencia de usuario suele ser crítica a la hora de elegir un sistema u otro. Esta debería
ser simple de usar e intuitiva. El desafío de este trabajo fue crear una interfaz común para
varios de los sistemas domóticos existentes e integrarlos dentro de una plataforma online
con manejo de usuarios y permisos.
Todos estos puntos son los que motivaron la realización de esta tesis. La misma se enfoca
en el desarrollo de una plataforma web/mobile para el uso de sistemas domóticos, basada
en servicios y protocolos estándar en el área del desarrollo web (como CSS3, HTML5,
Javascript y jQuery). En principio, la solución se piensa para usuarios desarrolladores que
tengan que comunicarse con este tipo de sistemas, como así también constituir una
herramienta para la creación sencilla de aplicaciones para usuarios finales de sistemas
13
Figura 5: Casa Inteligente
3. Objetivo
Como objetivo para este trabajo nos propusimos desarrollar un sistema que permitiese a
los usuarios comunicarse con sistemas de domótica para facilitar el control de dispositivos
electrónicos de su vivienda o ambiente inteligente. El sistema debe brindar una interfaz de
usuario intuitiva, para permitir que aquellos que no tengan amplios conocimientos en el área
informática, operen sin mayores inconvenientes. También deberá ser accesible desde
cualquier navegador, o desde una aplicación móvil multiplataforma, los cuales se
comunicarán mediante servicios web con un sistema de domótica que posea todos los
datos del usuario y sus dispositivos. Estos servicios tendrán que funcionar mediante el
envío de mensajes (utilizando un lenguaje estándar de comunicación “REST”) para
promover la escalabilidad y poder agregar nuevos dispositivos a futuro.
Se eligió que la interfaz de usuario generada junto a la plataforma online sea construida
sobre Intellihome, un proyecto de domótica ya existente presentado como tesis de grado
14
Figura 6: Objetivo de interfaz pretendida
4. Organización de la tesis
Para una mejor organización, la tesis se divide en capítulos, donde cada uno aborda una
perspectiva distinta del proyecto. A continuación, describiremos brevemente los capítulos
que se desarrollan en el presente documento.
El capítulo 1 es la introducción, donde hemos realizado una breve descripción de los temas
que se explicarán con mayor detalle en los capítulos siguientes, dando una visión de cuál
fue la motivación y los objetivos que deseamos alcanzar en esta tesis.
El segundo capítulo corresponde al marco teórico. Aquí se hace una descripción sobre los
temas que proveen un marco de conocimiento general, para luego comprender detalles de
la totalidad del proyecto. Entre ellos se mencionan el estado actual de los sistemas
domóticos, se describe Intellihome, sistema en el cual nos centramos para el desarrollo de
15
En el capítulo 3 se brindan detalles del diseño e implementación de nuestra propuesta. Es
el más complejo en cuanto a contenido y en él se abordan todos los detalles del proyecto,
desde cada decisión de diseño hasta cada módulo implementado, pasando por todas las
tecnologías que hacen a la tesis.
La implementación se detalla en el cuarto capítulo. Se muestran ejemplos instanciados de
nuestro proyecto abarcando diferentes casos. También se hace enfoque en las distintas
pruebas realizadas y consideraciones a tener en cuenta.
Por último en el capítulo 5 se abordan las conclusiones finales del proyecto y se hace
especial mención a posibles futuros trabajos que puedan extenderse o desprenderse de
16
Capítulo 2: Marco teórico
Como se mencionó en el Capítulo 1, haremos una descripción sobre los temas básicos y
necesarios para entender el trabajo de tesis realizado. Comenzaremos hablando sobre el
estado actual de la domótica y nos introduciremos de a poco a los temas más específicos.
Describiremos el sistema Intellihome, las herramientas clave para el desarrollo del sistema
(tecnologías utilizadas) y haremos hincapié en cómo la correcta combinación de los
elementos anteriormente citados, resulta en un sistema capaz de mejorar la accesibilidad
de las personas (AAL- Active and Assisted Living)
1. Domótica
El término "Domótica" [10] tiene una concepción análoga a la del término "Informática"
sustituyendo el prefijo que significa información por otro derivado de la palabra latina "domus", que significa casa. También reciben un trato similar en la lengua inglesa, en la que son más comunes otros términos cómo "computing" en lugar de "informática" o los de
"smart house" ó "intelligent building" en lugar de "Domótica". La Domótica tiene como
objetivo ofrecer una mejor calidad de vida en el lugar habitual de residencia o trabajo, dando
respuesta a necesidades tales como:
● Disponer de una temperatura interior confortable en todas las estaciones del año, mediante dispositivos regulables de climatización, teniendo en cuenta también el
ahorro de energía mediante automatización de eventos.
17
● Estar protegido frente a intrusos o accesos no autorizados de manera que se garantice la seguridad de bienes y personas.
● Asegurar las múltiples tareas domésticas: limpieza y conservación de los interiores, almacenamiento y cocinado de los alimentos, etc.
● Asegurar las necesidades corporales: comer, dormir, lavarse, mantener la forma.
● Proveer distintos medios de entretenimiento y diversión como video, audio, juegos, etc.
● Comunicarse, tanto con el interior como con el exterior de la casa.
● Cubrir las necesidades de confort ambiental, que implican la creación de un medio ambiente agradable: el confort higrotérmico, acústico, visual, olfativo y espacial.
Para asegurar los items anteriormente citados, la Domótica prevé la ejecución de ciertas
funciones, dependiendo de la información captada por los diferentes sensores y sistemas
de medición y transmitidas a través de redes de comunicación de acuerdo con ciertos
estándares.
2. AAL
Un sistema domótico en AAL [11], implica la resolución de la mayoría de los inconvenientes
con los que se encuentran personas en situación de riesgo (adultos mayores, personas con
discapacidad, etc.). Esta tesis apoya tal moción, siendo útil no sólo para tales individuos
sino también para todo aquel que desee simplemente automatizar su hogar por comodidad.
AAL se describe mejor mediante sus objetivos:
● Extender el tiempo en que la gente pueda vivir en su entorno preferido por aumento de su autonomía, confianza en sí mismo y movilidad propia.
18
● La posibilidad de un estilo de vida mejor y más saludable para las personas en situación de riesgo.
● Mejorar la seguridad, evitando el aislamiento social y el apoyo a la conservación de la red social alrededor del individuo.
● El apoyo a los cuidadores, las familias y las organizaciones de atención.
● El aumento de la eficiencia y la productividad de los recursos utilizados en las sociedades que envejecen.
En la actualidad existe un programa centrado en la creación de proyectos AAL. Este está
encargado de financiar aquellos proyectos que tengan como objetivo crear mejores
condiciones de vida para los adultos mayores y gente con discapacidad a través del uso de
tecnologías de información y comunicación (TIC).
3. Intellihome
Figura 7: Logo de Intellihome
Con las problemáticas anteriormente citadas es que surgió Intellihome. Durante el
desarrollo de esta tesis se nombrará varias veces esta plataforma. Intellihome es un
proyecto de tesis de grado en UNICEN. Los objetivos de este proyecto fueron la realización
19
● Automatizar tareas
Sistemas de riego,activación de alarmas,encendido de luces,etc.
● Facilidad de instalación
No hay necesidad de realizar modificaciones considerables en la vivienda.
● Usar un presupuesto bajo.
Debido a que existe una gran variedad de sensores disponibles en el
mercado el costo es bajo.
● Cuidar el medioambiente
Ahorra energía apagando luces y dispositivos si no se encuentra en el lugar.
● Ser autónomo y confortable
Asiste en las tareas cotidianas del hogar.
Este proyecto fue concretado en 2014, resultando en un sistema domótico, término el cual
ya hemos explicado anteriormente.
Intellihome carece de una interfaz amigable con el usuario lo cual dificulta la interacción con
el mismo. A lo largo de esta tesis mostraremos cómo se brinda una interfaz al sistema, la
cual también podrá ser utilizable en cualquier otro sistema domótico. Hemos llamada a esta
20
Figura 8: Logo de DomoAccess
4. DomoAccess
Decidimos llamar DomoAccess a nuestro sistema “decorador” de sistemas domóticos. El
nombre se debe a que, si bien este no es un sistema domótico por sí solo, brinda acceso
unificado e interfaz universal a cualquier sistema domótico sin importar si este último posee
GUI o no.
5. Accesibilidad
La accesibilidad es el grado en el que todas las personas pueden utilizar un objeto, visitar
un lugar o acceder a un servicio, independientemente de sus capacidades técnicas,
cognitivas o físicas. Es indispensable e imprescindible, ya que se trata de una condición
necesaria para la participación de todas las personas independientemente de las posibles
limitaciones funcionales que puedan tener.
Para promover la accesibilidad se hace uso de ciertas facilidades que ayudan a salvar los
obstáculos o barreras del entorno, consiguiendo que estas personas realicen la misma
acción que pudiera llevar a cabo una persona sin ningún tipo de discapacidad. Estas
facilidades son llamadas ayudas técnicas. Entre éstas se encuentran el alfabeto Braille, la
21
En esta tesis de domótica buscamos que cualquier persona con accesibilidad reducida
pueda tener acceso a los dispositivos domóticos. Esto de alguna manera acompaña al
núcleo de Intellihome, el cual fue pensado con ese enfoque. La motivación fueron las
dificultades existentes:
● La posibilidad de manejar o acceder a los elementos físicos que nos proporcionan las tecnologías digitales.
● La posibilidad de efectuar una interacción con las interfaces presentes en cada medio.
● La posibilidad de acceder a los contenidos que nos presentan los terminales, que cada vez van siendo mayores y más complejos.
6. Herramientas y tecnologías
A continuación, se realiza una descripción de varias tecnologías y términos asociados, para
comprender la totalidad del problema y la solución abordada. Desarrollaremos
generalidades, así como también detalles de cada una, aclarando el porqué de la decisión
de utilizar las mismas y no otras alternativas.
6.1. HTTP/HTML
El protocolo denominado Hypertext Transfer Protocol [12], es el método más usual con el cual se intercambia información en internet, transfiriendo las páginas o servicios web que
provienen de un servidor y se transfieren hacia un cliente. Este protocolo trabaja a nivel de
aplicación, para sistemas de información multimedia, lo que hace es trasladar ficheros de
tipo HTML entre dispositivos, HTML es un lenguaje que trabaja en el lado del cliente,
caracterizado por emplear etiquetas para identificar a los diferentes elementos que lo
22
En la figura 9 se muestra el papel que desempeña este protocolo.
Figura 9: Comunicación mediante HTTP
Entre las propiedades del protocolo HTTP se pueden destacar las siguientes:
Su esquema de direccionamiento es comprensible, utiliza el URL para localizar los sitios
web sobre los que hay que aplicar algún método. La forma general de un URL es:
servicio://host/fichero.ext, por ejemplo: http://www.gmail.com/index.html
• Implementa la arquitectura cliente-servidor, HTTP se basa en el paradigma
solicitud-respuesta, cuya comunicación se asienta sobre los protocolos TCP/IP. Por defecto, el
número de puerto empleado por HTTP es el 80.
• Es un protocolo que trabaja sin conexión y sin estado, luego de que el servidor ha
respondido una petición del cliente, la conexión se elimina entre ambos. Además, no se
guarda memoria del contexto de la conexión para siguientes conexiones.
Una vez definido claramente este protocolo, se requiere emplearlo de alguna manera en un
sistema informático. Para hacerlo, se han establecido varios lenguajes de programación
que ayudan a gestionar el manejo de HTTP; este, al ser implementado en una estructura
cliente-servidor, es evidente que se requieren dos tipos de lenguajes, los llamados
23
Como se indicó anteriormente, HTML es el lenguaje para el maquetado y estructura de un
sitio o aplicación web, pero no brinda personalización visual al mismo, para lo que se utiliza
el lenguaje de estilos CSS.
6.2. CSS
Hojas de Estilo en Cascada (Cascading Style Sheets) [13], es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, cómo se va a imprimir, o
incluso cómo va a ser pronunciada la información presente en ese documento a través de
un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores
el control total sobre estilo y formato de sus documentos.
CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la
presentación. Los estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web
al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS
afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.
El lenguaje funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más
elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas
a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su
vez la declaración está compuesta por una propiedad y el valor que se le asigne.
h2 {color: green;}
● h2 ---> es el selector
● {color: green;} ---> es la declaración
o color ---> es la propiedad o atributo
24
El Selector especifica los elementos HTML que van a estar afectados por esa declaración, de manera que hace de enlace entre la estructura del documento y la regla estilística en la
hoja de estilo.
La Declaración que va entre corchetes es la información de estilo que indica cómo se va a ver el selector. En caso de que haya más de una declaración se usa punto y coma para
separarlas.
Dentro de la declaración, la Propiedad o Atributo define la interpretación del elemento asignándole un cierto Valor, que puede ser color, alineación, tipo de fuente, tamaño, etc. Es decir, especifican qué aspecto del selector se va a cambiar.
Utilizamos CSS3 para esta tesis debido a que es la última iteración del lenguaje y aunque
actualmente sigue en desarrollo es la que ofrece una mayor cantidad de ventajas y
opciones.
● La principal ventaja de CSS sobre el lenguaje HTML o similar, es que el estilo se puede guardar completamente por separado del contenido siendo posible, por
ejemplo, almacenar todos los estilos de presentación para una web de 10.000
páginas en un sólo archivo de CSS.
● CSS permite un mejor control en la presentación de un sitio web que los elementos de HTML, agilizando su actualización.
● Aumento de la accesibilidad de los usuarios gracias a que pueden especificar su propia hoja de estilo, permitiéndoles modificar el formato de un sitio web según sus
necesidades, de manera que, por ejemplo, personas con deficiencias visuales
25
● El ahorro global en el ancho de banda es otra gran ventaja, ya que la hoja de estilo se almacena en caché después de la primera solicitud y se puede volver a usar para
cada página del sitio, no se tiene que descargar con cada página web. Por otro lado,
quitando todo lenguaje de marcado en la presentación en favor del uso de CSS
reduce su tamaño y ancho de banda hasta más del 50%, esto beneficia al dueño
del sitio web con menos ancho de banda y costes de almacenamiento, así como a
los visitantes a los cuales las páginas les van a cargar más rápido.
● Una página puede tener diferentes hojas de estilo para mostrarse en diferentes dispositivos, como pueden ser impresoras, lectores de voz, o móviles.
6.3. Javascript
Con HTML y CSS ya se puede crear un sitio bien estructurado con la visual deseada, pero
aún faltaría poder agregar dinamismo y funcionalidad al mismo.
Existen procesos dentro de la aplicación del lado del cliente, como por ejemplo validaciones
al momento de ingresar o actualizar datos. El lenguaje Javascript [14] es el empleado para
realizar estas validaciones de información y se podría describir como el complemento de
HTML, debido a que interactúa directamente con éste, tomando la responsabilidad de los
procesos que se desarrollarán en la aplicación a través del navegador.
La función principal de este lenguaje es presentar una página web dinámica, en la cual, los
cambios o modificaciones realizadas en la aplicación web, se vean reflejadas de inmediato
en el navegador.
Javascript, tiene muchas posibilidades, es orientado a objetos, maneja funciones y
estructuras de datos complejas. Sólo existe una característica básica de los lenguajes
orientados a objetos que Javascript no implementa: herencia; aunque permite la creación y
manipulación de objetos sencillos, además de la definición de métodos y propiedades para
26
La mayoría de los navegadores, en sus últimas versiones interpretan el código Javascript
integrado dentro de las páginas web. Un código escrito en Javascript no siempre va a
funcionar de la misma manera en dos navegadores distintos, esto se debe a que cada
navegador posee un intérprete diferente; lo cual suele ser un inconveniente. Una solución
suele ser comunicarle al usuario que actualice su navegador a las últimas versiones; otra
vía de salida sería desarrollar un archivo Javascript dedicado a cada navegador, es una
solución laboriosa pero útil. En nuestro caso en particular se desarrollaron todos los
archivos Javascript compatibles con los navegadores de última generación.
6.4. AJAX
Ya con un sitio web funcional y dinámico, constantemente se estarán enviando y recibiendo
datos entre los clientes y el servidor, información o datos que necesitan ser actualizados
automáticamente del lado del cliente.
Anteriormente, la única forma empleada para realizar esta función, era la de recargar
absolutamente toda la página Web, con los datos que se solicitaron desde el cliente. Esto
trae muchas dificultades, como por ejemplo el tiempo que se toma para realizar la petición
al servidor y consecuentemente la respuesta del mismo.
Ajax[15] permite que se actualicen únicamente los datos requeridos por el cliente, sin la
necesidad de recargar toda la página web, se trata de una técnica de desarrollo web para
crear aplicaciones interactivas, conocidas como RIA´s (Rich Internet Applications), las cuales han abarcado gran parte del mercado actual.
En la figura 10 se muestra la interacción de AJAX con los lenguajes de programación
27
Figura 10: AJAX como integrador de las demás tecnologías
El objetivo de Ajax, es mantener una comunicación asíncrona entre la aplicación presentada
al cliente y el servidor, esto significa que en cualquier momento se pueden realizar
peticiones al servidor, sin que éste se encuentre en sincronía con el cliente. De esta manera
se pueden comunicar indefinidamente estos dos elementos.
Al momento de requerirse datos adicionales, se solicitan al servidor, el acceso a los datos
se realiza a través del objeto denominado XMLHttpRequest. Esto se hace en segundo
plano, impidiendo el cambio de comportamiento de la aplicación web o su visualización; por
otra parte, el servidor, responde a este objeto de requerimiento mediante el estándar
28
6.5. Cliente - Servidor
La arquitectura cliente-servidor [16] es un modelo de aplicación distribuida en el que las
tareas se reparten entre los proveedores de recursos o servicios, llamados servidores, y los
demandantes, llamados clientes. Un cliente realiza peticiones a otro programa, el servidor,
quien le da respuesta. Esta idea también se puede aplicar a programas que se ejecutan
sobre una sola computadora, aunque es más ventajosa en un sistema operativo
multiusuario distribuido a través de una red de computadoras.
Desde el punto de vista funcional, se puede definir a la arquitectura Cliente/Servidor como
una arquitectura distribuida que permite a los usuarios finales obtener acceso a la
información de forma transparente aún en entornos multiplataforma. Se trata pues, de la
arquitectura más extendida en la realización de Sistemas Distribuidos.
Para entender en forma más ordenada y clara los conceptos y elementos involucrados en
esta tecnología pasaremos a detallar cada uno de estos.
El cliente: El proceso cliente es el que generalmente realiza la interacción con el usuario,
la mayor´ıa de veces en forma gráfica. Posee procesos auxiliares que se encargan del
establecimiento de conexión y de las comunicaciones con el servidor, así como tareas de
sincronización.
El servidor: El proceso servidor, como su nombre indica, proporciona un servicio al cliente,
del cual devuelve los resultados. Puede poseer, aunque no siempre, procesos auxiliares
que se encargan de las tareas de comunicación con el cliente. Dado que es el que
proporciona los resultados al cliente, la carga computacional asociada a estos es mayor
que la de los clientes.
La comunicación: Para que los clientes y los servidores puedan comunicarse se requiere
29
direccionamiento y transporte. Las comunicaciones se pueden realizar por medios tanto
orientados a la conexión (TCP) como no orientados a la conexión (UDP). La red debe tener
características adecuadas de rendimiento, confiabilidad, transparencia y administración.
Elegimos la arquitectura cliente - servidor gracias a todas las ventajas que ofrece:
● La gestión de recursos se centraliza en los procesos servidores, por lo que las aplicaciones son mucho más sencillas, modulares y fácilmente mantenidas. En caso
contrario, sería necesaria una gestión de recursos a nivel global del sistema, que
complicaría la lógica de la aplicación y que requeriría un mayor número de rondas
de mensajes para evitar condiciones de carrera, como, por ejemplo, que varios
procesos intentaran acceder a un mismo recurso en forma de escritura al mismo
tiempo.
● Se pueden utilizar componentes, tanto de hardware como de software, de varios fabricantes, lo cual contribuye considerablemente a la reducción de costos y
favorece la flexibilidad en la implantación y actualización de soluciones.
● Facilita la integración entre sistemas diferentes y compartir información.
● Si se utilizan interfaces gráficas para interactuar con el usuario, no siempre es necesario transmitir información gráfica por la red dado que esta puede residir en el
cliente, lo cual permite aprovechar mejor el ancho de banda de la red.
● Es más rápido el mantenimiento y el desarrollo de aplicaciones ya que se pueden emplear las herramientas existentes (APIs de todo tipo).
30
6.6. Bases de datos / MySQL
Una base de datos no es más que es un sistema de almacenamiento de información, el
cual maneja aspectos relacionados con la seguridad, tratamiento y consulta de datos. Dicha
información permanecerá almacenada para un posterior uso.
La estructura que usualmente se maneja en una aplicación web, es la que se muestra en
la siguiente figura:
Figura 11: Acceso a bases de datos
Hoy en día existen varias opciones en cuanto a las bases de datos que se disponen en el
mercado, tanto de software libre como de software comercial; vale la pena mencionar que
la mayor parte de bases de datos adaptan su estructura para aplicaciones web, así como
también para aplicaciones de escritorio; ejemplos de estas bases de datos son:
• Oracle
31 • MySQL
• SQL Server
• DB2
De entre este conjunto de bases de datos, en el desarrollo de la presente tesis, se ha
empleado MySQL [17], considerando factores como la experiencia con la misma, además
de ser una base de datos libre.
MySQL es un sistema de gestión de bases de datos relacional, multihilo y multiusuario que
se ofrece al mercado bajo la GNU GPL para cualquier uso compatible con esta licencia,
pero para aquellas empresas que quieran incorporarlo en productos privativos deben
comprar a la empresa una licencia específica que les permita este uso. Está desarrollado
en su mayor parte en ANSI C.
A continuación se citan las características más sobresalientes de MySQL que fueron
decisivas a la hora de elegir este sistema:
● Funciona en diferentes plataformas.
● Utiliza GNU Automake, Autoconfig y Libtool, para su portabilidad.
● Proporciona sistemas de almacenamiento transaccional y no transaccional.
● Emplea tablas en disco B-tree (MyISAM), muy rápidas con compresión de índice.
● Tablas hash en memoria, son utilizadas como tablas temporales.
● Privilegios y Contraseñas, permite la verificación basada en hosts.
● Los clientes pueden conectar con MySQL usando sockets TCP/IP.
32
6.7. Modelo Vista Controlador
Se trata de un patrón de arquitectura de las aplicaciones de software, su principal
característica es que separa completamente la lógica de negocio de la interfaz de usuario
y a su vez de la lógica de control empleada en el desarrollo. Este patrón de arquitectura,
fue descrito inicialmente en el año 1979 para la compañía Smalltalk y se ha empleado desde
entonces.
El patrón MVC [18] se suele ver en las aplicaciones web, se lo emplea ya que debido a los
constantes cambios que requiere la aplicación a lo largo del tiempo, es importante mantener
los bloques de trabajo bien definidos e independientes, de tal manera que los cambios
realizados en un bloque, se vean reflejados en otro bloque sin necesidad de grandes
modificaciones a nivel de código fuente.
Desarrollando las partes del patrón MVC, tenemos que:
El modelo: Es el responsable de acceder a la capa de almacenamiento de datos.
Idealmente el modelo debería ser independiente del sistema de almacenamiento.
Define las reglas de negocio (la funcionalidad del sistema) y lleva un registro de las vistas
y controladores del sistema.
Si estamos ante un modelo activo, notificará a las vistas los cambios que en los datos pueda
producir un agente externo.
El controlador: Se encarga de recibir los eventos de entrada (un click, un cambio en un
campo de texto, etc.).
Contiene reglas de gestión de eventos, del tipo “SI X, entonces Y”. Estas acciones pueden
33
La vista: Responsable de recibir datos del modelo mostrándolos al usuario. Tiene un
registro de su controlador asociado. Puede dar el servicio de “Actualización()”, para que sea
invocado por el controlador o por el modelo (cuando es un modelo activo que informa de
los cambios en los datos producidos por otros agentes).
Dentro del Modelo de dicho patrón, se establecen las reglas que se aplicarán para los datos
de la aplicación; estos datos deben estar lógica y físicamente alojados en algún sitio y con
las seguridades que se requieran, usualmente se trabaja con una base de datos, de la cual
ya se habló anteriormente.
En el capítulo 3 se profundizará sobre el concepto de Modelo Vista Controlador.
34
6.8. Smarty
Suele ser común que en grandes proyectos el rol de diseñador gráfico y el de programador
sean cubiertos por personas distintas, sin embargo la programación en PHP suele combinar
estas dos labores en una persona y dentro del mismo código, lo que trae consigo grandes
dificultades a la hora de cambiar alguna parte del diseño de la página, ya que se termina
haciendo necesario adentrarse entre los scripts para modificar la presentación del
contenido, Smarty [19] tiene como objetivo solucionar este problema.
Es un motor de plantillas para PHP, es decir, separa el código PHP, como lógica de
negocios, del código HTML, como lógica de presentación, y genera contenidos web
mediante la colocación de etiquetas Smarty en un documento. El resultado es un lenguaje sencillo compuesto por expresiones regulares, loops foreach y while, sentencias condicionales if, elseif, else, modificadores de variables, y funciones.
Si bien existen más sistemas de plantillas para PHP, éste parece ser el más avanzado y
con más frecuencia de desarrollo. También hay detractores de estas técnicas que alegan
que las mismas hacen en cierta medida un grado más complejo el desarrollo web, por la
necesidad de aprender un pseudo-lenguaje más, personalmente decidimos hacer uso del
mismo gracias a, como se mencionó anteriormente, los beneficios de separar la capa de
presentación de la lógica.
6.9. PHP
PHP [20] es un lenguaje de programación de uso general de código del lado del servidor
originalmente diseñado para el desarrollo web de contenido dinámico. Fue uno de los
primeros lenguajes de programación del lado del servidor que se podían incorporar
35
los datos. El código es interpretado por un servidor web con un módulo de procesador de
PHP que genera la página web resultante.
PHP puede ser desplegado en la mayoría de los servidores web y en casi todos los sistemas
operativos y plataformas sin costo alguno. El lenguaje PHP se encuentra instalado en más
de 20 millones de sitios web y en un millón de servidores.
Cuando el cliente hace una petición al servidor para que le envíe una página web, el servidor
ejecuta el intérprete de PHP. Éste procesa el script solicitado que generará el contenido de
manera dinámica (por ejemplo obteniendo información de una base de datos). El resultado
es enviado por el intérprete al servidor, quien a su vez se lo envía al cliente.
PHP permite la conexión a diferentes tipos de servidores de bases de datos tanto SQL
como NoSQL tales como MySQL, PostgreSQL, Oracle, ODBC, DB2, Microsoft SQL Server,
Firebird, SQLite o MongoDB.
PHP también tiene la capacidad de ser ejecutado en la mayoría de los sistemas operativos,
tales como Unix (y de ese tipo, como Linux o MacOS) y Microsoft Windows, y puede
interactuar con los servidores de web más populares ya que existe en versión CGI, módulo
para Apache, e ISAPI.
PHP es una alternativa a las tecnologías de Microsoft ASP y ASP.NET (que utiliza C# y
Visual Basic .NET como lenguajes), a ColdFusion de la empresa Adobe, aJSP/Java,
CGI/Perl y a Node.js/Javascript.
Para nuestra solución, elegimos PHP porque se ejecuta en casi cualquier plataforma
utilizando el mismo código fuente, es expandible, puede interactuar con muchos motores
de bases de datos, posee una gran variedad de módulos, es rápido (ya que está escrito en
36
Capítulo 3 – Diseño e Implementación
1. Resumen
En este capítulo procederemos a detallar el diseño y la arquitectura del sistema propuesto
en esta Tesis. Se explicará brevemente el propósito de la plataforma planteada, las distintas
partes que componen al sistema y los pasos que lleva a cabo cada componente para
procesar la información requerida.
2. Descripción General del Sistema
La estructura general del sistema se detalla en la figura 13. El objetivo de la plataforma
desarrollada es permitir a un usuario comunicarse con sistemas de domótica ya existentes
y así facilitarle el control de dispositivos electrónicos de su vivienda o ambiente inteligente.
El esquema general muestra una arquitectura cliente-servidor, donde DomoAccess es el
cliente e Intellihome, el servidor. Ambos componentes intercambian mensajes para recibir
información o enviar comandos.
37
3. Descripción General de los Componentes del Sistema
Los componentes mencionados anteriormente son:
● Cliente: DomoAccess, la plataforma desarrollada para esta tesis, la cual brinda al
usuario una interfaz de acceso universal a su propio sistema de domótica. Permite
administrar y obtener información sobre los dispositivos conectados.
● Servidor: Intellihome, el sistema domótico al cual están conectados los dispositivos
hogareños que recibe las consultas del cliente y devuelve la información respectiva.
Además puede recibir comandos.
El funcionamiento del sistema se describirá a continuación. El usuario ingresa al mismo
mediante un navegador web o aplicación y consulta el estado de sus dispositivos u opera
con ellos. Para esto el cliente, envía un mensaje REST [21] de consulta al servidor, este lo
recibe, lo procesa y retorna una respuesta, la cual se muestra por pantalla al usuario. Si es
un mensaje de comando REST, el servidor se encargará de traducirlo a una acción sobre
el dispositivo correspondiente.
REST es un estilo de arquitectura de software cuyo nombre proviene de Representational State Transfer (Transferencia de Estado
38
4. Intellihome
Intellihome es una plataforma de vida cotidiana asistida por computadora pensada,
principalmente, para ayudar a personas con discapacidad para brindarles mayor
independencia y confort en su propio hogar.
La plataforma implementada permite la conexión de distintos sensores (particularmente
instanciados en un sensor Kinect y un sensor LeapMotion) para detectar gestos corporales
o comandos de voz, ejecutando luego acciones en distintos dispositivos conectados al
sistema a través de un actuador, en este caso una placa Arduino. Esta conexión puede
establecerse de manera local, dentro de la misma habitación, o de manera remota,
permitiendo al usuario controlar dispositivos y luces de otras habitaciones sin necesidad de
trasladarse hasta ellas.
La aplicación a su vez se divide en dos módulos:
I. Servidor. Encargado de capturar gestos y comandos de voz, donde la información
provista por los sensores es procesada para obtener el dispositivo a controlar y
luego es enviada mediante protocolo TCP/IP al siguiente módulo.
II. Cliente. Encargado de la interacción con dispositivos que, a través de los datos
recibidos por medio del protocolo TCP/IP, le indica al microcontrolador Arduino la
función que debe ejecutar, siendo responsabilidad de cada uno de los dispositivos
reconocer y actuar ante la señal recibida.
La siguiente figura muestra el esquema del sistema con la funcionalidad de los módulos
mencionados. La interacción entre los mismos se basa en los eventos capturados por los
sensores. Con la información capturada, el módulo servidor crea un mensaje que es
39
Figura 14: Comunicación Cliente-Servidor en Intellihome
Cabe destacar que Intellihome fue utilizado para instanciar nuestra solución, pero el mismo
puede ser reemplazado por cualquier otro sistema de domótica, siempre y cuando éste
provea la misma interfaz de intercambio de mensajes utilizada. Si se quiere utilizar un
sistema de domótica distinto, sólamente hay que crear la API que enlace la capa de
mensajes del mismo con la que se implementó para DomoAccess. Esto consiste en la
creación de una clase que mapee los métodos del nuevo sistema con los métodos ya
40
5. DomoAccess
Desglosaremos el componente DomoAccess, para un análisis integral de sus partes.
Anteriormente se mencionó que DomoAccess es el cliente en la arquitectura
cliente-servidor, pero internamente también está compuesto por una arquitectura similar. En la
figura 15 se puede observar la estructura arquitectónica del componente en cuestión.
Figura 15: Detalle de DomoAccess
5.1. Arquitectura
Se diferencian dos arquitecturas de hardware. La primera es la del servidor, que se ejecuta
en un procesador x64 con sistema operativo Windows 8.1, compatible con las tecnologías
41
Con respecto al cliente, este se ejecuta en cualquier procesador a partir de 500 MHz o más
moderno, 128 MB de RAM, y pantalla con resolución mínima de 480 x 320 pixeles 24 bits
de profundidad.
El servidor trabaja con un módulo de procesador de PHP, montado sobre Apache, y una
base de datos MySQL.
El cliente es un sitio accesible con cualquier navegador que interprete HTML5, CSS3 y
Javascript , tecnologías imprescindibles para la creación de cualquier web moderna.
5.2. Descripción de los Componentes
Como se puede observar en la figura 15, anteriormente presentada, DomoAccess está
compuesto por dos partes principales: cliente y servidor.
● Cliente: el navegador web. Es el componente front-end, la capa de presentación del
sistema con la cual el usuario interactúa para acceder a administrar sus dispositivos.
● Servidor: la lógica del sistema. Es el componente back-end, la capa de acceso a
datos del sistema, la encargada de almacenar, procesar y enviar respuestas al
front-end.
La separación en cliente-servidor o front-end y back-end es una abstracción que permite
mantener las distintas partes del sistema separadas. La intención es que el front-end sea
el responsable de recolectar los datos de entrada del usuario, y los transforme según lo
requerido por el back-end, el cual procesará lo recibido, y reenviará al front-end nuevamente
por medio de un archivo HTML, de una forma entendible para el usuario.
Para recapitular, como se mencionó en el capítulo 2, HTML es un lenguaje de marcado para
la elaboración de páginas web. Se ha convertido en un estándar de referencia, siendo el
lenguaje web más importante debido a su rol crucial en la aparición, desarrollo y expansión
42
5.3. Patrón Arquitectónico y Componentes del Servidor
Figura 16: Detalle del servidor dentro de DomoAccess
Si nos adentramos en el componente Servidor podemos ver que está constituido con el
patrón de arquitectura de software llamado modelo-vista-controlador (MVC).
Este patrón se caracteriza por separar los datos y la lógica de negocio de una aplicación
por un lado, por otro la interfaz de usuario, y finalmente por otro lado, un mediador
encargado de gestionar la comunicación. Estas tres secciones se corresponden a tres
componentes distintos denominados modelo, vista y controlador. En resumen, se separa
43
5.4. Gráfica de los componentes del MVC
Figura 17: Modelo Vista Controlador
Como se puede ver en la figura de arriba, el MVC utilizado trata de una típica colaboración
entre los componentes de un MVC.
El flujo de control es el siguiente:
44
2. El controlador recibe (por parte de los objetos de la interfaz-vista) la notificación de
la acción solicitada por el usuario. El controlador gestiona el evento que llega, a
través del gestor de eventos (handler).
3. El controlador accede al modelo, actualizándolo, o modificándolo de forma
adecuada a la acción solicitada por el usuario (por ejemplo, el controlador actualiza
el el estado de un dispositivo).
4. El controlador delega a los objetos de la vista la tarea de desplegar la interfaz de
usuario. La vista obtiene sus datos del modelo para generar la interfaz apropiada
para el usuario donde se reflejan los cambios en el modelo (por ejemplo, muestra el
switch de una lámpara como encendido).
5. La interfaz de usuario espera nuevas interacciones del usuario, comenzando el ciclo
nuevamente.
En los próximos apartados detallaremos los tres módulos en cuestión.
5.5. Modelo
Todas las consultas, actualizaciones y privilegios de acceso toman lugar aquí. El modelo
es el encargado de representar y organizar toda la información con la cual opera el sistema.
Este envía a la vista lo que debe ser mostrado en cada momento que un usuario solicita
información. Estas peticiones o modificaciones del usuario llegan a través del componente
controlador.
En el caso de DomoAccess, la información es almacenada en una base de datos MySQL.
Particularmente, se guardan los datos del usuario, y sus configuraciones personales
asociadas a los dispositivos del sistema de domótica utilizado. Cabe destacar que no todo
se encuentra en la base de datos, sino que cierta información como lecturas, estados o
comandos de los dispositivos conectados, son obtenidas desde fuera de DomoAccess,
45
Para comenzar a explicar la solución propuesta cabe aclarar que se decidieron crear las
clases componente y habitación, con el objetivo de facilitar la administración al usuario. La
clase componente es la que se relaciona con cada dispositivo conectado al sistema
domótico, mientras que la habitación actúa de contenedor virtual de los componentes.
Figura 18: Diagrama UML de las distintas clases del modelo
SistemaDomótico es la clase que representa a cualquier sistema domótico sobre el que
esté ejecutándose DomoAccess, en el caso de esta tesis, se trata de Intellihome, pero
podría ser otro.
46
El método de la clase es getListaComponentes(), es un método abstracto que cada sistema domótico deberá tener implementado para obtener información sobre sus componentes
conectados.
Intellihome es la clase particular en la cual instanciamos la solución de DomoAccess.
Como dijimos anteriormente, en este nivel de abstracción se encuentran todos los sistemas
de domótica que podrían conectarse, Intellihome es uno de ellos.
Las variables que encontramos son $dir_API, que es la dirección de la API de Intellihome, se hace el llamado a esta dirección para obtener información sobre los componentes; y
$componentes, un arreglo donde se listan todos los dispositivos conectados a Intellihome (independientemente de si estos han sido registrados en DomoAccess, o no) con sus
respectivas capabilities.
47
instancia el objeto correspondiente, con sus características o capabilities mediante la
llamada a la API y la obtención de las mismas; y execute() que ejecuta la acción del componente dependiendo del sistema domótico.
Pseudo-código de la función getComponentes, necesaria para cargar todos los componentes.
5.5.1. Componente
La clase Componente sirve para realizar la correspondencia virtual de un dispositivo real
conectado a Intellihome. Provee al usuario las facilidades para diferenciarlo de otros,
mediante etiquetas como descripción e ícono asociado.
La variable más importante es $Propiedades, la cual es un arreglo que funciona como hash gracias a las particularidades de PHP. De él se pueden obtener datos tales como:
● $IDfísico: el identificador que enlaza el componente virtual con el real. ● $Vista: el código particular para representar ese tipo de componente.
● $Descripción: es un texto ingresado por el usuario para diferenciar al componente.
Puede ser un nombre.
● $Imagen: es el ícono asociado al componente. Hay 73 íconos distintos, cada uno
48
íconos personalizados, que se agregan al toolkit FontAwesome, estando este último disponible aún para ser usado, aunque con glifos más sencillos.
● $CoordenadaX/$CoordenadaY: son enteros que van del 0 al 100, son utilizados
internamente, por el administrador del sistema, para posicionar geográficamente en
un mapa de la casa, cada componente. El valor de cada coordenada representa el
porcentaje de alto o ancho con respecto a la imagen del plano, en el que se dibuja
el pin asociado.
Cabe destacar que los items $IDfísico y $Vista son cargados cuando se crea el componente en nuestro sistema, luego de obtener los datos desde la API. Los demás items, excepto por
las coordenadas, fueron ingresados por el usuario cuando registró el dispositivo en
DomoAccess. Las coordenadas, como ya se mencionó anteriormente fueron ingresadas
por el administrador del sistema.
En cuanto a los métodos, agregadoaBD() verifica si el componente que está conectado a Intellihome, ya fue registrado en DomoAccess, es decir, si el usuario lo ha agregado a
alguna habitación. Por otro lado ejecutar() lleva a cabo la acción asociada al componente, mediante un llamado a la API. Esta puede ser actualizar el valor, prender, apagar, subir
volumen, etc.
5.5.2 Capabilities
Las capabilities [22] son las capacidades que puede tener un componente conectado. Vienen identificadas por un número o ID, el cual DomoAccess reconoce gracias a un
diccionario de datos que comparte con Intellihome o el sistema domótico en cuestión. Este
diccionario de datos muestra por cada identificador de capability, qué funcionalidad y visual
49
Se implementaron cuatro capabilities distintas, pero es importante tomar en cuenta que se
pueden agregar más sin mayor complejidad de desarrollo, para extender el sistema.
La primera capability es la de switch, es la más sencilla de todas y simplemente consiste
en permitir que el dispositivo se prenda o apague mediante un interruptor binario.
Otra de las capabilities es la de medición, que dota al componente con la capacidad de
leer un valor numérico acompañado de una unidad de medición (ºC, hPa, %, etc.).
Las capabilities control volumen y control canal sirven para un componente que se
registra con capacidades de ser controlado remotamente, más específicamente su volumen
o canal, tal como lo indican sus nombres. Inicialmente cada capability provee la
funcionalidad de subir y bajar de canal, o de volumen, respectivamente.
La última capability que mencionaremos es la de termostato. Funciona de manera que el
componente pueda definir una temperatura ambiente, y el termostato pueda tomar las
acciones necesarias para alcanzar ese valor. Un componente que puede hacer uso de esta
capability es por ejemplo Nest, propiedad de Nest Labs.
Cabe destacar que un componente puede tener más de una capability, y cada capability a
su vez no es exclusiva de un solo componente. Por ejemplo, podemos encontrarnos con un
aire acondicionado Hitachi que provea las capabilities 1, 2, 3 y 4 por un lado, y por el otro,
un aire acondicionado Atma que provea las mismas capabilities agregando una quinta, que
50
Creación del componente con todas sus capabilities
5.5.3. Habitación
La clase Habitación es la representación lógica del equivalente en el mundo real. Sirve
como contenedor de componentes, y da la opción al usuario de diferenciarla mediante un
nombre, descripción e ícono asociado al tipo de habitación.
Las variables que encontramos son $Componentes, un arreglo de los dispositivos ya registrados y asociados a la habitación; $ID, el identificador de la habitación que es único para cada habitación de un usuario, aunque puede repetirse entre distintos usuarios (ya
que el sistema, para identificar cada habitación, pregunta antes por el ID de usuario);
$Nombre que es el nombre del tipo de habitación (dormitorio, baño, cocina, etc.);
$Descripción, que es el nombre que el usuario le da a la habitación; e $Info, un texto opcional que el usuario ingresa para diferenciar dos habitaciones similares o simplemente
51
Los métodos de la clase son agregarComponente(), una función encargada de agregar al objeto $habitación el componente creado y getDatos(), que obtiene desde la base de datos toda la información de las variables mencionadas anteriormente.
5.5.4. Usuario
En DomoAccess, las configuraciones realizadas, habitaciones creadas, y componentes
registrados, con su respectiva organización en la casa, están todas asociadas a un usuario.
Esto significa que si bien DomoAccess puede poseer varios usuarios, cada uno de ellos
está asociado con una sola casa.
Con la intención de almacenar todos los datos y configuraciones que se mencionaron en el
párrafo anterior, se creó la clase Usuario. Las variables que posee son $id, $email, $nombre
y $plano.
$id es una variable importante ya que es la que identifica a cada usuario/casa dentro de DomoAccess. Por lo tanto cuando se accede a la base de datos, se piden las habitaciones
y componentes y el plano de la casa de ese usuario en particular y no de otro, realizando
las comprobaciones pertinentes.
Si bien $email no es una variable que sirva para identificar al usuario, una vez dentro del sistema, es utilizada cuando este va a loguearse. Esta variable se carga cuando el usuario
se registra, y también forma parte del token de sesión o cookie, que no expira hasta que este se desloguee.
$nombre es una variable sin funcionalidad para el sistema, pero sirve a modo de identificación del usuario.
En cuanto a $plano, es una variable que contiene una imagen de la casa. En el capítulo 4 se ampliará sobre los detalles del mismo, su funcionalidad y un caso de instanciación donde
52
5.6. Vista
La vista es la encargada de dar al modelo un formato acorde para interactuar (en nuestro
caso se trata de una interfaz de usuario o UI).
En el caso de DomoAccess se utilizó a Smarty para consolidar la separación entre lógica
de negocios y lógica de presentación. Es un motor de plantillas para PHP que facilita la
tarea de realizar cambios en el diseño de la web sin inmiscuirnos en los detalles de cómo
se modelan los datos accedidos. DomoAccess utiliza seis vistas / clases que detallaremos
a continuación.
Figura 19: Diagrama de clases de la vista
53
Figura 20: Acceso a Intellihome
DomoAccess_View.php muestra todo el sistema en pantalla con sus respectivas pestañas de navegación, habitaciones y demás. Es la vista más completa y compleja ya que provee
toda la información de las habitaciones registradas, sus componentes y el estado de estos
últimos, entre otras secciones. Si bien es una sola clase, la misma es dinámica ya que
puede refrescar solo una porción de sus elementos, sin necesidad de recargar toda la
página, gracias a las bondades de AJAX, anteriormente descriptas.
54
Los componentes previamente cargados, tienen asociadas sus propias vistas según las
capabilities de cada uno. Las vistas de las capabilities son Switch.php, Medicion.php, Termostato.php, ControlCh.php y ControlVol.php, y cada una muestra por pantalla su interfaz. No se verá por pantalla de la misma manera un switch binario de
encendido/apagado, que un visor de valores de medición, o los botones de un control
remoto. Como ya se describió, cada componente puede tener varias capabilities, por lo
tanto esto se traduce en varias vistas asociadas al mismo.
A continuación se mostrará con ejemplos cuáles son las capabilities mencionadas, y cómo
se traducen a las distintas vistas.
ControlCh
Switch apagado Switch encendido
55
ControlVol
Termostato
Figura 22 (compuesta): Vistas de capabilities
Como mencionamos anteriormente separamos la lógica de negocios (PHP) de la lógica de
presentación (HTML) mediante Smarty. Es por eso que las seis vistas de las que hablamos,
internamente son archivos PHP con llamados a archivos template (TPL) con los cuales se
genera el HTML final. A modo de demostración veremos un ejemplo con la clase
56
Como se puede ver, el archivo DomoAccess_View.php es relativamente sencillo, y en el método refrescarPanel() se hace un llamado a un template de Smarty denominado ‘panel.tpl’ que es el que posee el código más complejo, compuesto por HTML y etiquetas
Smarty.
El código anterior da como resultado que en una sola página web, desde una de sus
pestañas, tengamos acceso a todas las habitaciones, con todos sus componentes
completamente cargados (nombre, ID, descripción, ícono y elementos de la vista asociada