Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

Introducción

Para desarrollar una aplicación cliente en Javascript, debes tener previamente los siguientes archivos JS en el directorio de la aplicación:

  • jQuery

  • Stomp

  • Sockjs

  • op_ws_client

Las imágenes que se muestran en el tutorial utilizan un archivo adicional llamado JsonEditor.js para mostrar la respuesta de forma más visual, pero no es estrictamente necesario.

...

A continuación, debes crear un objeto donde almacenar los parámetros de configuración (en este caso, los del ejemplo seleccionado):

var config = {};

  • config['url'] = "http://www.onesaitplatform.online/iot-broker/message";

  • config['deviceTemplate'] = 'Ticketing App'; (Debe ser igual que la template que definiste en IoTClient)

  • config['token'] = 'e7ef0742d09d4de5a3687f0cfdf7f626'; (token de deviceTemplate )

  • config['device'] = 'Web'; (Nombre que le darás al dispositivo)

Esta variable se pasará como parámetro al objeto cliente previamente definido usando el método configure():

...

Por último, debes conectarte con la plataforma usando el método connect:

client.connect();Image Removed


...

Una vez realizado este paso, podrás invocar todos los métodos implementados en el objeto OPClient:

  • Join

  • Query

  • Insert

  • Update

  • UpdateById

  • Remove

  • RemoveById

  • Subscriptions

JOIN

La operación Join será la primera acción que se haga, porque permite conectarse al IoTClient definido. Si todo está bien, devolverá la sessionKey, identificando la sesión actual.

Image Removed

...


...


...


QUERY

La operación Query permite obtener los datos que se almacenaron y asociaron a una ontología determinada. Debes especificar la ontología asociada a la plantilla IoTClient/deviceTemplate en el ControlPanel.

Se aceptan tanto consultas nativas como SQL. También puedes realizar consultas SQL que incluyan SELECT/UPDATE/DELETE.

Image Removed

...


...


NativoImage Removed

...


SQLImage Removed

...

Image Removed

...


TO-DO (EJEMPLO UPDATE/DELETE)

...

La operación Insert permite insertar nuevos datos en la ontología. Asegúrate de que los datos tienen la estructura definida en el Esquema JSON de la ontología. De lo contrario no pasará la validación del Esquema. Para asegurarse de que el formato es correcto, la mejor opción es copiarlo directamente del Esquema de la Ontología (Ontology Schema), que devuelve el id de la instancia insertada.

Image Removed

...


Ten en cuenta que puedes pasar a la función un conjunto de instancias de Ontología como datos, por ejemplo:Image Removed

...


Esta operación devolverá el ID (o los IDs en caso de que los datos sean un array), que podrás utilizar más tarde para realizar operaciones 'por id'.

...

En el primer caso, puede que quieras usar updateById. Funciona de forma similar a la función Insert.

Image Removed

Image Removed

...


...


En el segundo caso, puedes usar la función 'update'. Esta función sólo acepta consultas nativas. Si quieres hacer actualizaciones SQL, usa la función query.

Image Removed

Image Removed

Image Removed

...


DELETE

Si quieres borrar una sola instancia, puedes usar 'removeById'.

Image Removed

Image Removed

...


...


Por otro lado, si quieres eliminar todas las instancias que coincidan con un filtro en particular, usa la función 'remove'. Esta función, al igual que la de update, sólo acepta queries nativas.Image Removed

...

Image Removed

...

Image Removed

SUBSCRIPTIONS

Este API te permite suscribirte a una Ontología. Al suscribirte, cualquier inserción/actualización relacionada con la ontología suscrita, se notificará a tu cliente, causando una ejecución de tu función de callback definidapasada para manejar las notificaciones de suscripción.

...

Echa un vistazo a la función de suscripción:Image Removed

...

La primera función de callback devolverá como respuesta el mensaje con el ID de suscripción asociado.

La segunda función de callback se ejecutará cada vez que llegue una notificación/mensaje de suscripción.Image Removed


...


Si haces clic en el ejemplo de 'subscribe', y luego realizas una inserción, cuando vuelvas a la pestaña de suscripción, verás que has recibido la instancia que acabas de insertar.Image Removed

...





Por último, puedes descargar los archivos mencionados al principio en el siguiente enlace, incluyendo también una página html de ejemplo para realizar pruebas: Prueba ClientJS.zip

...