Если вы все еще не знаете, что такое enigma.js, то это прекрасная возможность познакомиться с этой открытой библиотекой кодов по работе со службами Qlik Sense. Из статьи вы узнаете, что можно делать с ее помощью. Но уже сразу хочу сказать, enigma.js дает доступ через API к движку QIX, позволяя создавать приложения на основе Qlik.

В рамках данной статьи я буду использовать не только эту библиотеку, но и поработаю с Vega – непроцедурный язык создания визуализаций. Вы описываете поведение визуализации и внешний вид, а остальное Vega сделает за вас. Она также может работать на основе макета, что значительно сокращает временные затраты.

Итак, мы рассмотрим, как работают enigma.js и Vega для создания простой гистограммы. Для этого будем использовать модуль qApp.js и класс qSessionObject.

НА ЗАМЕТКУ! Enigma.js – фреймворк, который обеспечивает связь с Qlik Sense в бэкэнде. Службы Rest позволяют работать с Qlik REST API, а службы Qix Service позволяют работать с QiX Engine. Enigma.js – очень удобный инструмент для тех, кто владеет JS.

 

Настройки

Для начала работы с enigma.js нам нужно пройти путь настроек работы библиотеки, подключения к приложению, а затем создания сессии объектов. Также для работы вам понадобится установка jQuery и Vega (https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-beta.25/vega.min.js).

 

  1. Создайте новую директорию для вашего проекта или создайте новый файл package.json. npm install babel-loader babel-core babel-preset-es2015 webpack —save-dev. Это задаст ключевые зависимости и сохранит их в файл package.json. Затем запустите npm install enigma.js --save. Это установит enigma.js, сохранив ее в файл package.json.

 

Теперь наш файл примет следующий вид package.json:


  1.  

Затем создаем файл конфигурации webpack.config.js, который выглядит следующим образом:


  1.  

И, наконец, мы создаем main.js, который будет нашей точкой входа, а также файл index.html, который загружает bundle.js.

 

Подключение к приложению

Для этого мы создаем файл qApp.js, который выглядит таким образом:


  1.  

Создание сессий объектов

Мне нравится создавать отдельные классы для создания сессий объектов. Итак, я создаю файл, который выглядит следующим образом qSessionObject.js:


  1.  

 

Для ускорения процесса работы, вы можете скачать архив getting-started.zip в конце статьи. Он включает getting-started.zip файлы package.json и webpack.config.js, файлы qApp.js и qSessionObject.js, а также страницу index.html и файл main.js. В пакет также включен файл.qext file, в случае если вы будете использовать серверную версию Qlik Sense.

 

НА ЗАМЕТКУ! Для этого пример я использую приложение Helpdesk Management app, поэтому убедитесь, что ваш файл qApp.js подключен к приложению Helpdesk Management.

 

Проект

После всех установок, мы создаем наш проект. Основной файл, с которым мы будем работать – main.js, поэтому откроем его. Импортируем объект qSessionObject.js и создадим нашу сессию объекта.


  1.  

 

После того как мы создали qSessionObject, определим настройки Vega для нашей диаграммы:


  1.  

 

После выполнения предыдущих шагов, мы можем идти дальше. Теперь мы можем запустить работу через API. Для этого откроем объект qSessionObject, получим макет qSessionObject, переформатируем матрицу для работы с Vega, вставим значения в Vega:


  1.  

Вот и все! Не забудьте запустить webpack, проверив результаты. В итоге у вас должен получиться такой график – Vega bar chart.

По ссылкам ниже вы сможете сразу скачать весь проект, если захотите сразу протестировать, как это работает, без необходимости выполнения всех операций по установке.

Диаграмма с помощью enigms.js

Enigma.js на GitHub

Принять участие в развитии проекта Enigma.js

На этом все на сегодня! Удачных вам разработок!