Учебное пособие по мэшап Qlik Sense Mashup – 9 шагов для создания мэшапа

Давайте начнем новый урок по очень интересной функции Qlik Sense – мэшап-приложения в Qlik Sense Mashup. В этом уроке мы сначала изучаем основы мэшап-приложений, а затем узнаем о компонентах, создании мэшап-приложений и соответствующих API-интерфейсах для мэшап-приложений.

Итак, приступим к изучению мэшапов в Qlik Sense.

Учебное пособие по мэшапам Qlik Sense – преимущества и компоненты

1. Введение в мэшап Qlik Sense Mashup

Мэшап Qlik Sense – это веб-страница, веб-сайт или веб-приложение, в котором используются объекты Qlik Sense из одного или нескольких приложений Qlik Sense чтобы создать уникальную веб-службу с одним графическим интерфейсом. Другими словами, мэшап – это комбинация веб-API Qlik Sense с веб-платформой, обеспечивающей веб-интеграцию с Qlik Sense. Вы можете создавать адаптивные веб-страницы или веб-сайты, используя данные и визуализации из приложений Qlik Sense.

2. Компоненты мэшапа Qlik Sense

Давайте теперь поговорим о компонентах мэшапа Qlik Sense.

i. Приложение Qlik Sense

Это приложение, созданное в Qlik Sense, которое является основным источником данных или объектов, которые будут использоваться в мэшап-приложении. Вы можете использовать данные или объекты из нескольких приложений Qlik Sense в одном мэшап-приложении.

ii. Компоненты веб-разработки (скрипты)

Существуют различные сценарии веб-разработки, которые позволяют создавать мэшапы.

HTML: код сценария HTML похож на самую простую форму веб-страницы, на которой есть все необходимые инструкции. Он определяет структуру или макет веб-страницы.

JavaScript: код JavaScript обеспечивает логику и определяет поведение веб-страницы. Это делает веб-страницу отзывчивой и интерактивной.

CSS: сценарий CSS определяет представление и форму веб-страницы. Он отвечает за всю графику и дизайн мэшапа.

Файлы Qext и wbl: файл .qext хранит все детали (параметры) расширения Qlik. Также файл .wbl содержит список манифестов файлов, включенных в текущий проект мэшап-приложения.

3. Преимущества мэшапа в Qlik Sense Mashup

Мэшап-приложения Qlik Sense полезны для пользователей во многих отношениях.
Мэшап-приложения позволяют легко интегрировать приложения Qlik Sense и их объекты в Интернет.
Предлагает большую гибкость пользовательского интерфейса с точки зрения дизайна (цвет фона и т. д.) и функций.
Мэшап-приложения позволяют интегрировать Qlik Sense в веб-платформу с использованием HTML, CSS, JavaScript и т. д.

4. API-интерфейсы Qlik Sense мэшапа (Qlik Sense Mashup APIs)

Для создания гибридного приложения Qlik Sense существуют интерфейсы прикладного программирования (API), доступные для различных целей и задач. Вам просто нужно скопировать и вставить фрагмент кода для API-метода и соответствующим образом изменить его, чтобы добавить объекты приложения на свой выбор в мэшап. Это позволяет легко встраивать различные элементы и максимально гибко разрабатывать мэшап.

Ниже представлены несколько API-интерфейсов, относящихся к разработке мэшап-приложений. Вы можете получить коды для вставки различных элементов, таких как движок, серверная часть, интерфейс (приложение), корень, закладка, переменные и т. д. Вы также можете изменить эти коды в соответствии с вашими требованиями для создания веб-страницы. Коды API обычно берутся из библиотек JavaScript или JSON.

Engine API
Backend API
Root API
App API
Bookmark API
Field API
Global API
Table API
Selection API
Variable API
Visualization API
App Integration API
Single Integration API
Qlik-visual (web component)
Enigma.js
Leonardo-ui (web component)

5. Как создать мэшап Qlik Sense Mashup?

Давайте научимся создавать мэшап Qlik Sense с помощью Qlik Sense Desktop.

Шаг 1. Откройте Qlik Sense Desktop, а затем перейдите в Центр разработки (Qlik Sense Development Hub), показанный на изображении ниже.

Шаг 2: Вас перенаправят в веб-браузер. Здесь откроется центр разработки Qlik (Qlik Dev Hub).

Шаг 3: Нажмите на создание нового мэшап-приложения в Dev Hub. Введите имя мэшапа и выберите шаблон для него.

Вы можете выбрать один из четырех доступных шаблонов мэшап-приложений.

Шаг 4: Мы продвигаемся к нашему объяснению, выбирая «Базовый одностраничный гибридный веб-сайт». Откроется редактор мэшапов.

Шаг 5: Затем мы выберем приложение, объекты которого мы можем использовать в нашем мэшапе, из опции «Выбрать приложение».

Мы выбрали пример приложения под названием «Helpdesk management». Все содержимое или объекты приложения загружаются в редактор мэшап-приложений, как только вы выбираете приложение.

Шаг 6: В типичном окне редактора мэшап-приложений есть отдельные вкладки для разных наборов кода, то есть для qext, HTML, JavaScript, CSS, и одно окно для изображений (jpg или png). Каждый сценарий вносит свой вклад в создание полного и интерактивного мэшап веб-сайта.

Скрипт Qext

Скрипт HTML

Код JavaScript

Код CSS

Окно изображения.

Шаг 7. На панели предварительного просмотра вы можете перетаскивать объекты из выбранного приложения, как показано на скриншоте ниже.

Шаг 8: Вы можете просмотреть созданный мэшап веб-сайт на новой вкладке в браузере, нажав на опцию «Просмотр», расположенную внизу.

Шаг 9: Он показывает мэшап, созданный в Qlik Dev Hub, в виде веб-страницы.

Графики и диаграммы, показанные на веб-странице, являются адаптивными и меняются в зависимости от сделанного выбора.

В верхней части веб-страницы находится панель навигации, с помощью которой вы можете очистить выбор, перейти назад и вперед, создать закладки и заблокировать/разблокировать состояния выбора. Такие операции аналогичные тем, которые есть на информационной панели приложения Qlik Sense.

Вы можете изменять приложения по своему усмотрению, добавляя новые фрагменты кода в скрипт HTML, JavaScript или CSS. Вы можете добавить объекты, не относящиеся к Qlik. Обычно для добавления объектов, не относящихся к Qlik, в мэшап используются два типа объектов: список и гиперкуб.

Список состоит из значений данных из измерений, мер и полей. Вы можете создавать собственные фильтры или раскрывающиеся списки, используя опцию списка. Как только вы добавляете список, код будет добавлен в HTML-скрипт. В списках есть возможность выбора.

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

Таблица, показанная на изображении ниже, создана построителем гиперкуба. Это адаптивная таблица, содержимое которой изменяется при любом выборе, сделанном на веб-странице.