Creación de Wialon App

Wialon Apps son las aplicaciones web de una página que funcionan en un navegador como sitios simples. En este artículo vamos a describir cómo se crea una aplicación para Wialon desde el principio.

Para trabajar con aplicaciones externas, Wialon ofrece API remotas, que es un conjunto de solicitudes HTTP que le permiten a usted interactuar plenamente con Wialon. Para el uso cómodo de API remotas usted puede utilizar en el navegador una biblioteca de JavaScript especial Wialon SDK JS, que es un conjunto de clases y métodos que envuelven y ejecutan las solicitudes de API remotas.

En el ejemplo que sigue vamos a crear una sencilla aplicación que se autorice al servidor Wialon y muestre el nombre del usuario actual y la lista de unidades disponibles para él.

Paso 1: Creación de una página vacía

Primeramente, vamos a crear para nuestro proyecto una carpeta con la estructura y el contenido siguientes:

    app/               # carpeta raíz del proyecto
       js/
          script.js    # archivo JavaScript que contiene la lógica del funcionamiento de la aplicación
       css/
          style.css    # estilos css
       index.html      # marcado html

index.html — plantilla de diseño simple

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nueva Wialon App</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
  </head>
  <body>
    <p>Nueva Wialon App</p>
    <script src="js/script.js"></script>
  </body>
</html>

style.css — estilos de pantalla completa

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: #333;
  font-family:Arial;
}

script.js

(function() {
  alert('¡Hola, Wialon!');
})();

¡Atención! Para aislar la lógica y las variables de la aplicación del contexto global, hemos envuelto el código JavaScript en una función anónima auto-invocada.

Para comprobar la aplicación, ábrala en un navegador. Si todo está correcto, en la pantalla aparecerá el aviso Nueva Wialon App y el mensaje emergente ¡Hola, Wialon!

¡Atención! No es correcto, que solo abra el archivo en un navegador. Las aplicaciones que utilizan Wialon SDK JS, solo funcionan correctamente con el protocolo http (s) . Para el funcionamiento adecuado puede utilizarse cualquier servidor web.

Paso 2: Conexión a Wialon

Script wialon.js

Para trabajar con el servidor Wialon es necesario que usted cargue a la página wialon.js, que contiene Wialon SDK JS.

<!-- index.html -->
...
    <p>Nueva Wialon App</p>
    <script src="https://hst-api.wialon.host/wsdk/script/wialon.js"></script>    <script src="js/script.js"></script>
  </body>
</html>

¡Atención! Hemos utilizado wialon.js desde el servidor Wialon Hosting. Para el trabajo correcto con Wialon, indique la dirección de su servidor, por ejemplo, http://local.wialon.host/wsdk/script/wialon.js.

wialon.js agrega a la página un espacio de nombres nuevo wialon con el conjunto de clases. Utilizamos principalmente wialon.core.Session — un singleton que contiene toda la información sobre la sesión activa donde están realizados los métodos básicos de autorización, búsqueda, creación, etc.

Una vez cargada la página hay que inicializar la sesión. 

// script.js
(function() { // función anónima auto-invocada
  alert ('¡Hola, Wialon!');
 
  // inicialización de sesión  var session = wialon.core.Session.getInstance();  session.initSession('https://hst-api.wialon.host');})();

Autorización

En Wialon hay varios métodos de autorización. En este ejemplo utilizaremos la autorización por token, el método loginToken en js que se llama por la solicitud token/login.

// script.js
...
  // inicialización de sesión
  var session = wialon.core.Session.getInstance();
  session.initSession('https://hst-api.wialon.host');
 
  // envío de una solicitud de autorización token/login  var token = 'token de autorización';  session.loginToken(token, function(code) {    console.log(code);  });})();

¡Atención! Puede leer más sobre el nuevo método de autorización y tokens en la documentación.

Ahora vamos a declarar la función loginCallback, que se llamará después de la respuesta a la solicitud de autorización y vamos a cambiar la llamada tokenLogin.

// script.js
...
  // controlador de respuestas de autorización  function loginCallback(code) {    if (code) {      alert('Error de autorización: ' + code);    } else {      alert('Autorización exitosa');    }  }   // envío de una solicitud de autorización token/login
  var token = 'token de autorización';
  session.loginToken(token, loginCallback);
})();

Recibo y visualización de información

Después de la autorización una parte de los datos como, por ejemplo, el usuario actual ya está disponible en wialon.core.Session. Otros datos (como la lista de unidades) tienen que solicitarse primeramente desde el servidor.

Para que el nombre del usuario se muestre en la pantalla, vamos a agregar un elemento nuevo div, después agregaremos estilos CSS para éste y mostraremos el nombre del usuario.

<!-- index.html -->
...
  <body>
    <div id="username" class="username"></div>    <script src="https://hst-api.wialon.host/wsdk/script/wialon.js"></script>
...
/* style.css */
.username {  border:1px solid #666;}
// script.js
...
  // controlador de respuestas de autorización
  function loginCallback(code) {
    if (code) {
      alert('Error de autorización: ' + code);
      } else {
      alert('Autorización exitosa');
      var user = session.getCurrUser();      document.getElementById('username').innerHTML = user.getName();    }
  }

Para que se muestre la lista de unidades disponibles hay que ejecutar la solicitud de búsqueda de unidades. Para hacerlo, declararemos una nueva función printItems() que llamaremos después de una autorización exitosa en la función loginCallback(code). Solicitará del servidor la lista de unidades con los datos del último mensaje y los mostrará en forma de una tabla.

¡Atención! Puede encontrar la información completa sobre el método searchItems en las páginas de la documentación Wialon SDK JS

// script.js
...
function printItems() {
    var searchSpec = {
      itemsType:"avl_unit", // el tipo de elementos requeridos del sistema Wialon
      propName: "sys_name", // el nombre de la propiedad que se utilizará como base para la búsqueda
      propValueMask: "*",   // el valor de la propiedad — pueden utilizarse * | , > < =
      sortType: "sys_name"  // el nombre de la propiedad que se utilizará para clasificar la respuesta
    };
    var dataFlags = wialon.item.Item.dataFlag.base |        // el visto de propiedades básicas
                    wialon.item.Unit.dataFlag.lastMessage;  // el visto de datos del último mensaje
 
    // solicitud de búsqueda de mensajes
    session.searchItems(searchSpec, true, dataFlags, 0, 0, function(code, data) {
      if (code) {
        alert(wialon.core.Errors.getErrorText(code));
        return;
      }
      // generación de una tabla de datos
      var table = '<table><tr><td>Unit</td><td colspan="3">Último mensaje</td></tr>';
      var pos;
      for (var i = 0; i < data.totalItemsCount; i++){
        pos = data.items[i].getPosition();
        table += '<tr><td>' + data.items[i].getName() + '</td>';
        if (pos) {
          table += '<td>' + pos.y + '</td><td>' + pos.x + '</td><td>' +
                   wialon.util.DateTime.formatTime(pos.t);
        } else {
          table += '<td colspan="3">';
        }
        table += '</td></tr>';
      }
      table += '</table>';
      document.querySelector("#units").innerHTML = table;
    });
  }
...
...
  // script.js
  function loginCallback(code) {
    if (code) {
      alert('Error de autorización: ' + code);
    } else {
      alert('Autorización exitosa');
      var user = session.getCurrUser();
      document.querySelector("#username").innerHTML = user.getName();
      printItems();    }
  }
...

Para que se muestre la tabla, agregaremos el elemento a la página

<!-- index.html -->
...
  <body>
    <div id="username" class="username"></div>
    <div id="units"></div>    <script src="https://hst-api.wialon.host/wsdk/script/wialon.js"></script>

y cambiaremos un poco las hojas de estilos.

/* style.css */
.username, td {  border:1px solid #666;
}

Developed by

info@gurtam.com | Copyright © 2002-2024

Desarrolladores

Información