Создание приложения

Wialon Apps, или приложения Wialon — одностраничные веб-приложения, работающие в браузере как обычные сайты. В данной статье мы рассмотрим, как создать приложение для Wialon с нуля.

Для взаимодействия с внешними приложениями Wialon предоставляет Remote API — набор HTTP запросов, с помощью которых можно полноценно взаимодействовать с Wialon. Для удобной работы с Remote API в браузере можно использовать специальную JavaScript библиотеку Wialon SDK JS — набор классов, методы которых оборачивают и выполняют запросы Remote API.

В данном примере мы создадим простейшее приложение, которое авторизуется на сервере Wialon и выводит на экран имя текущего пользователя и список доступных ему объектов.

Шаг 1: Создание пустой страницы

Для начала создадим папку для нашего проекта со следующей структурой и содержанием:

    app/               # корневая папка проекта
       js/
          script.js    # JavaScript-файл, содержащий логику работы приложения
       css/
          style.css    # css-стили
       index.html      # html-разметка

index.html — шаблон простой разметки

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

style.css — стили полноэкранного режима

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

script.js

(function() {
  alert('Привет, Wialon!');
})();

Важно! Чтобы изолировать логику и переменные приложения от глобального контекста, мы обернули код JavaScript в самовызывающуюся анонимную функцию.

Для проверки откройте приложение в браузере. Если всё сделано верно, на экране должна отобразиться страница с надписью Новый Wialon App, а также появиться всплывающее сообщение Привет, Wialon!

Важно! Просто открыть файл в браузере не правильно. Приложения, использующие Wialon SDK JS, корректно работают только по протоколу http(s). Для корректной работы можно воспользоваться любым удобным веб-сервером.

Шаг 2: Подключение к Wialon

Скрипт wialon.js

Для работы с сервером Wialon необходимо загрузить на страницу wialon.js, в котором содержится Wialon SDK JS.

<!-- index.html -->
...
    <p>Новый Wialon App</p>
    <script src="https://hst-api.wialon.com/wsdk/script/wialon.js"></script>    <script src="js/script.js"></script>
  </body>
</html>

Важно! Мы использовали wialon.js с сервера Wialon Hosting. Для корректной работы с Wialon Local укажите адрес своего сервера, например, http://local.wialon.com/wsdk/script/wialon.js.

wialon.js добавляет на страницу новое пространство имен wialon с набором классов. Чаще всего мы будем использовать wialon.core.Session — синглтон, в котором хранится вся информация об активной сессии и реализованы базовые методы авторизации, поиска и создания объектов и др.

После загрузки страницы необходимо инициализировать сессию.

// script.js
(function() { // самовызывающаяся анонимная функция
  alert ('Привет, Wialon!');
 
  // инициализации сессии  var session = wialon.core.Session.getInstance();  session.initSession('https://hst-api.wialon.com');})();

Авторизация

В Wialon cуществует несколько методов авторизации. В данном примере мы будем использовать авторизацию по токену — метод loginToken на js, который вызывает запрос token/login.

// script.js
...
  // инициализации сессии
  var session = wialon.core.Session.getInstance();
  session.initSession('https://hst-api.wialon.com');
 
  // отправка запроса авторизации token/login  var token = 'авторизационный токен';  session.loginToken(token, function(code) {    console.log(code);  });})();

Важно! Подробнее о новом способе авторизации и токенах можно прочитать в документации.

Объявим функцию loginCallback, которая будет вызвана после ответа на запрос авторизации и изменим вызов tokenLogin.

// script.js
...
  // обработчик ответа авторизации  function loginCallback(code) {    if (code) {      alert('Ошибка авторизации: ' + code);    } else {      alert('Авторизации прошла успешно');    }  }   // отправка запроса авторизации token/login
  var token = 'авторизационный токен';
  session.loginToken(token, loginCallback);
})();

Получение и отображение информации

После авторизации часть данных уже доступна в wialon.core.Session, например, текущий пользователь. Другие данные (например, список объектов) необходимо сначала запросить с сервера.

Чтобы вывести имя пользователя на экран, добавим новый элемент div, добавим для него CSS стили и выведем имя пользователя.

<!-- index.html -->
...
  <body>
    <div id="username" class="username"></div>    <script src="https://hst-api.wialon.com/wsdk/script/wialon.js"></script>
...
/* style.css */
.username {  border:1px solid #666;}
// script.js
...
  // обработчик ответа авторизации
  function loginCallback(code) {
    if (code) {
      alert('Ошибка авторизации: ' + code);
      } else {
      alert('Авторизации прошла успешно');
      var user = session.getCurrUser();      document.getElementById('username').innerHTML = user.getName();    }
  }

Для того чтобы вывести список доступных объектов, необходимо выполнить запрос поиска объектов. Для этого объявим новую функцию printItems(), которую вызовем после успешной авторизации в функции loginCallback(code). Она запросит у сервера список объектов с данными из последнего сообщения и выведет его в виде таблицы.

Важно! Полную информацию по методу searchItems можно найти на страницах документации Wialon SDK JS

// script.js
...
function printItems() {
    var searchSpec = {
      itemsType:"avl_unit", // тип искомых элементов системы Wialon
      propName: "sys_name", // имя свойства, по которому будет осуществляться поиск
      propValueMask: "*",   // значение свойства — могут быть использованы * | , > < =
      sortType: "sys_name"  // имя свойства, по которому будет осуществляться сортировка ответа
    };
    var dataFlags = wialon.item.Item.dataFlag.base |        // флаг базовых свойств
                    wialon.item.Unit.dataFlag.lastMessage;  // флаг данных последнего сообщения
 
    // запрос поиска объектов
    session.searchItems(searchSpec, true, dataFlags, 0, 0, function(code, data) {
      if (code) {
        alert(wialon.core.Errors.getErrorText(code));
        return;
      }
      // генерация таблицы данных
      var table = '<table><tr><td>Unit</td><td colspan="3">Last message</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('Ошибка авторизации: ' + code);
    } else {
      alert('Авторизации прошла успешно');
      var user = session.getCurrUser();
      document.querySelector("#username").innerHTML = user.getName();
      printItems();    }
  }
...

Для вывода таблицы добавим элемент на страницу

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

и немного изменим таблицы стилей.

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

Developed by

info@gurtam.com | Copyright © 2002-2024

Разработка

Справка