Sofia2 IoT Platform vs ThingWorx IoT Platform. Primeros pasos (IV. Crear aplicaciones)

sofia2vsThingWorx

 

Este es el cuarto y último post de la serie Sofia2 IoT Platform vs ThingWorx IoT Platform. Primeros pasos. El objetivo es realizar una comparativa de uso de dos plataformas IoT como son Sofia2 y ThingWorx. Para ello, realizaremos un hands on siguiendo un flujo sencillo IoT en el que simularemos un edificio que dispone de dispositivos para la lectura de consumo energético y temperatura. Para terminar, crearemos un cuadro de mando para visualizar esta información.

 

Con el fin de conseguir una mejor comprensión de esta comparativa, hemos estructurado los pasos a seguir, comunes a las dos plataformas, en 4 posts:

  1. Registro y Login. Modelado de datos
  2. Conecta tu dispositivo
  3. Simular datos de entrada
  4. Crear Aplicaciones

 

Hoy veremos el último punto.

 

Crear Aplicaciones

 

Sofia2 IoT Platform

 

Una vez que existen datos en la plataforma y a medida que los dispositivos u otras aplicaciones se conectan con Sofia2 es posible crear aplicaciones que interoperen entre sí y exploten la información existente. Las Herramientas de Visualización de Sofia2 me permiten explotar de forma sencilla y gráfica la información almacenada dentro de la Plataforma (Ontologías). Puedo crear elementos de visualización unitaria (Gadgets), unirlos en una página web (Dashboard) o incluso crear complejos sinópticos al estilo SCADA representando la evolución de las señales (Instances).

 

El siguiente paso es crear un cuadro de mando usando las capacidades de presentación gráfica de la plataforma.

 

Creando Gadgets

 

  1. Accedemos a Visualización > Mis Gadgets

MisGadgets

2. Pulsamos en Crear Gadget

3. Usaremos el Wizard para crear nuestro primer Gadget. Lo nombramos GaugeWattsVVC (GaugeWatts + Nuestras Iniciales). Pulsamos sobre Siguiente

4. Seleccionamos nuestra Ontología. Pulsamos sobre Siguiente

5. Seleccionamos Query y pulsamos sobre Siguiente

6. Seleccionamos BDTR y pulsamos sobre Siguiente

7. En el campo consulta ponemos select c.SmartBuildingVVC.watts from SmartBuildingVVC as c limit 1 (cambiando VVC por tus iniciales). Pulsamos sobre Preview

8. Bajamos y seleccionamos la pestaña del Gadget Gauge, arrastramos el atributo value a la caja de medidas, cambiamos el Nombre a Watts y obtendremos un Gadget similar a este:

gauge2

9. Volvemos a Mis Gadgets > Crear Gadget. Ahora haremos otro Gadget, esta vez de tipo área. Lo denominaremos AreaTemperatureVVC (AreaTemperature + Nuestras Iniciales). Haremos los mismos pasos que para el gadget anterior, pero cambiando la Consulta por select * from SmartBuildingVVC as c (cambiando VVC por tus iniciales). Pulsamos sobre preview. Bajamos y seleccionamos la pestaña del Gadget Área, arrastramos los atributos timestamp (que cambiaremos el nombre a Temperature) y temperature a la caja de medidas, y obtendremos un Gadget similar a este:

GadgetAreaDos

10. Por último, crearemos un tercer Gadget de tipo Mapa, que llamaremos MapaVVC (Mapa + Nuestras Iniciales). Realizaremos los mismos pasos que para el gadget anterior, usando la Consulta select * from SmartBuildingVVC as c (cambiando VVC por tus iniciales). Pulsamos sobre preview. Bajamos y seleccionamos la pestaña del Gadget Maps, arrastramos los atributos geometry.coordinates.0 y geometry.coordinates.1.

En Medidas cambiaremos el nombre a Localización. Marcaremos los atributos address, city, state y zip y obtendremos un Gadget similar a este:

crearMapaDos

 

 

Creando Mi Dashboard

 

Llamamos Dashboard al cuadro de mandos que recoge una cantidad determinada de elementos (Gadgets). Para crear un Dashboard seguiremos los siguientes pasos:

 

  1. Accedemos mediante el menú a Visualización > Mis Dashboards
  2. Pulsamos sobre Crear Dashboard
  3. Le ponemos como nombre SmartBuildingVVC (SmartBuilding + Nuestras Iniciales)
  4. Tenemos diferentes opciones de estilado, podemos elegir un tema determinado o customizarlo con los colores que elijamos de la paleta. Elegiremos el tema Dark Blue por ejemplo.

estiloDashboard

5. Bajaremos y pulsaremos sobre Nueva Página

6. Pulsaremos sobre + y añadiremos nuestros 3 Gadgets, obteniendo un Dashboard similar a:

DashboardBienn

 

 

ThingWorx

 

ThingWorx denomina Mashup Builder al lugar donde se crean las visualizaciones, siendo los widgets los componentes que se colocan en el mashup. Por lo tanto, podríamos establecer la siguiente similitud de conceptos: lo que llamábamos Gadget en Sofia2, en ThingWorx es un widget y lo que llamábamos Dashboard, ahora es un Mashup.

 

Construyendo un Mashup

 

  1. Nos situamos encima de la pestaña Mashups, en el panel de la izquierda y pulsamos en +

Mashup

 

2. Para Mashup Type seleccionamos Page

3. Para Layout Options seleccionamos Static y pulsamos Done

4. En la pestaña Widgets de la izquierda, hacemos click y arrastramos el widget Gauge en el lienzo del centro. Este widget mostrará los watios simulados en uso.

5. Seleccionamos el objeto Gauge en el lienzo. La parte inferior izquierda de la pantalla contiene las propiedades del widget. Nos desplazamos hacia abajo y cambiamos el valor de la propiedad Legend a Watts. Observe que la etiqueta del lienzo se ha actualizado para mostrar la palabra “Watts”

6. Si el widget OpenStreetMap no está disponible, descargue e instale la Extensión de Mapa de Open Street desde ThingWorx IoT Marketplace https://marketplace.thingworx.com/

7. Hacemos click y arrastramos el widget OpenStreetMap en el lienzo del centro

8. Hacemos click y arrastramos el widget Time Series Chart en el lienzo del centro

9. Movemos los widgets y los cambiamos de tamaño para que quepan en el lienzo

10. Pulsamos en Save y nombramos el Mashup, por ejemplo MyHomeMash

mashupAMedias

 

 

Suministrando datos a un Mashup

 

  1. Si no estamos en modo edición, hacemos click en el botón de edición naranja.

edicionMashup

2. En la ficha Datos en la parte superior derecha de Mashup Builder, hacemos click en el botón verde +

3. Buscamos el Thing MyHouse en la barra de búsqueda Select Entity.

4. En la barra Select Services, buscamos QueryPropertyHistory y hacemos click en la flecha derecha azul para seleccionar este servicio. Este servicio recuperará todas las propiedades registradas del Thing MyHome

5. Marcamos la casilla Mashup Loaded y hacemos click en Done. Esto ejecutará el servicio y recuperará los datos cuando se cargue el Mashup.

addData

6. Seleccionamos y expandimos la pestaña All Data en la parte superior derecha de Mashup Builder. Se mostrarán todas las salidas de la llamada de servicio.

7. Arrastramos la propiedad watts al widget Gauge en el lienzo. Seleccionamos # Data para el destino de enlace.

MashupDesarrollado

 

8. Hacemos lo mismo para el widget OpenStreetMap vinculando house_lat_long a la SelectedLocation en el mapa.

9. Con el widget OpenStreetMap seleccionado, hacemos click en la propiedad ShowSelectionMarker en la ventana de propiedades del widget en la parte inferior izquierda del Generador de Mashup.

10. Para el Time Series Chart, arrastramos el contenedor All Data en el widget y seleccionamos Data como el destino de enlace

11. Con el widget Time Series Chart seleccionado, establecemos las siguientes propiedades mediante la ventana de propiedades del widget en la parte inferior izquierda del Mashup Builder:

Property Value
XAxisField  timestamp
DataField1 temperature

12. Pulsamos sobre Save para guardar los cambios

 

Lanzando la Aplicación

 

  1. Iniciamos la aplicación seleccionando el botón View Mashup en la parte superior. Es posible que debamos habilitar el cuadro emergente en su navegador para ver el mashup.
  2. Obtendremos un Mashup similar a este:

MashupFinal

Sofia2 IoT Platform vs ThingWorx IoT Platform. Primeros pasos (IV. Crear aplicaciones)

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s