Использование современных инструментов веб-разработки для разработки крутых расширений

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

В Axis Group мы работали над собственным шаблоном разработки, который мы используем для создания расширений. Недавно мы решили упаковать его, чтобы каждый мог загрузить и развернуть среду разработки расширений за 3 простых шага (вот проект qExt на GitHub). Мы покажем вам, как легко создать новый проект расширения и даже автоматизировать процесс развертывания вашего проекта как в среде рабочего стола, так и в среде сервера.

Первая установка

Установить NodeJS

Если у вас еще нет NodeJS на вашем локальном компьютере, установите его, чтобы вы могли использовать npm для установки и запуска qExt.

Установить qExt

В командной строке или в окне терминала установите qExt глобально.

npm install -g qext

3 шага для создания нового проекта

1. Установите файлы шаблонов

Теперь, когда qExt установлен, вы можете начать использовать его для создания новых проектов. Измените рабочий каталог командной строки на место, в котором вы хотите создать расширение, и выполните следующую команду (заменив my-extension желаемым именем расширения):

qext --create-extension my-extension --install

После завершения установки всех зависимостей вы заметите, что ваш новый проект содержит каталог src с файлами шаблонов для начала работы. Эти файлы связаны вместе с помощью модулей ES6; qExt использует Babel и Webpack для компиляции вашего кода перед его развертыванием в Qlik Sense.

2. Определите место развертывания (QS Desktop)

Прежде чем вы начнете писать код, нам нужно указать qExt, где развернуть связанное расширение. Вы увидите файл deployment.config.json в папке сгенерированного проекта. Здесь мы обновим имя пользователя в свойстве desktop.destination (пока не беспокойтесь о конфигурации сервера, мы рассмотрим развертывание сервера позже).

3. Сборка, просмотр и развертывание

Последний шаг - запустить скрипт npm, который будет следить за нашим исходным кодом на предмет любых изменений, а также автоматически связывать и развертывать заархивированный файл расширения в папку Extension в наших документах Qlik Sense. Для этого запустите:

npm run watch-webpack-deploy-desktop

Каждый раз, когда вы вносите изменения в любой файл в вашем src каталоге, весь каталог будет объединен с помощью webpack, заархивирован, а затем скопирован в ваш Extensions каталог.

Окружение

Когда вы создаете новый проект qExt, сгенерированная среда будет включать каталог с именем src, в котором вы будете выполнять всю свою разработку. qExt использует Webpack и Babel, поэтому вы можете использовать ES6 и импорт файлов для модуляции кода.

В src вы найдете файл JavaScript с таким же именем, как у вашего проекта (например, my-extension.js). Это точка входа, куда мы импортируем все зависимости нашего модуля:

Таким образом, вы можете обрабатывать каждое из этих свойств / функций в отдельных файлах, и если вам не нужны все эти модули для вашего расширения, просто удалите ненужные из своего каталога.

Каталог проекта также содержит style.scss файл, который использует SASS для стилизации содержимого вашего расширения. Он включает имя класса контейнера расширения, поэтому, пока весь ваш css / sass написан в рамках этого класса, ваши стили не будут влиять на другие объекты Qlik.

Развертывание на Qlik Sense Server

Вышеупомянутое решение отлично подходит для локальной разработки QS Desktop, но если вы похожи на меня, вы хотите разработать и протестировать свои расширения Qlik Sense Extensions в серверной среде. Развертывание расширения на Sense Server вручную может оказаться утомительным занятием; Каждый раз, когда вы вносите изменения в свой код, вам необходимо заархивировать исходные файлы и импортировать их в QMC (о, и не забудьте удалить старое расширение 🙃).

При разработке qExt мы решили решить эту проблему с помощью API-интерфейсов Qlik Sense Repository Service, чтобы автоматизировать все эти действия для процесса развертывания сервера без помощи рук. Это позволило нам разрабатывать расширения локально на OSX при запуске Qlik Sense Server на VMware Fusion (если вас интересует, как я настраиваю Qlik Sense Server на моем Mac, дайте мне знать в комментариях, и я могу написать еще одну статью на эту тему). что).

Первоначальная настройка

qExt использует Qlik Sense QRS API для передачи расширений из среды разработки на сервер Sense. Чтобы развернуть расширения на сервере, нам нужно будет настроить виртуальный прокси, чтобы можно было использовать проверку подлинности заголовка, чтобы разрешить удаление и импорт расширений (мы рассмотрим базовую настройку, но для получения более подробной информации см. Qlik's Конфигурация аутентификации заголовка пошаговое руководство). Обратите внимание, что проверка подлинности заголовка действует как бэкдор на ваш сервер и должна использоваться только в следующих ситуациях:

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

1. Создайте виртуальный прокси

  1. Перейти в QMC
  2. Выберите Виртуальный прокси.
  3. Нажмите Создать.

2. Идентификация

  1. Введите header-authentication в Описание
  2. Введите hdr в префиксе
  3. Неактивность сеанса можно оставить по умолчанию 30
  4. Введите X-Qlik-Session-hdr в заголовке файла cookie сеанса.

3. Аутентификация

  1. Установите режим анонимного доступа на No anonymous user
  2. Установите метод аутентификации Header authentication dynamic user directory
  3. Введите hdr-usr в имя заголовка аутентификации заголовка.
  4. Введите $ud\\$id в динамический каталог пользователя аутентификации заголовка.

4. Балансировка нагрузки.

  1. Щелкните Add new server node и добавьте желаемый узел (я добавляю центральный узел)

2. Нажмите "Применить", чтобы сохранить настройки.

5. Связывание виртуального прокси с прокси

  1. В разделе Связанные элементы выберите Прокси.
  2. Нажмите кнопку Link внизу страницы.
  3. Выберите узел прокси-службы, на который вы хотите установить ссылку, и нажмите "Ссылка" (опять же, здесь я использую центральный узел).

Теперь вы можете развертывать расширения на своем сервере!

Помните 3 шага, которые мы предприняли выше, чтобы создать и развернуть расширение для рабочего стола? Выглядело это так:

  1. Запустите qext --create-extension [name] --install в любом месте, где хотите начать новый проект
  2. Обновить deployment.config.json файл
  3. В новом каталоге проекта запустите npm run watch-webpack-deploy-desktop и начните кодирование

Если вместо этого мы хотим выполнить развертывание на сервере, нам просто нужно обновить свойства server.host и server.headers.hdr-usr в нашем deployment.config.json файле, указав имя хоста нашего сервера и учетную запись администратора домена \ пользователя, которая будет использоваться для развертывания:

и вместо развертывания на рабочем столе, как мы делали ранее на шаге 3, запустите

npm run watch-webpack-deploy-server

Вышеупомянутое укажет qExt следить за любыми изменениями в каталоге src, связывать обновленные файлы с Webpack и Babel, заархивировать их, а затем удалить старое расширение на вашем сервере и импортировать новое.

Попробуй сам. Вы должны увидеть расширение на панели «Настраиваемые объекты» из любого приложения Qlik Sense. Добавьте console.log () в файл paint.js и сохраните его; Вы должны увидеть обновление в консоли разработчика, когда обновите страницу приложения Sense.

Создавайте крутые расширения

Используя указанные выше ресурсы, вы можете приступить к разработке расширений Qlik Sense за 3 простых шага. Просто помни:

  1. Запустите qext --create-extension [name] --install в любом месте, где хотите начать новый проект
  2. Обновите deployment.config.json, указав либо назначение расширения рабочего стола, либо имя хоста сервера и имя пользователя.
  3. В новом каталоге проекта запустите сценарий для просмотра и развертывания на рабочем столе или на сервере.

Рабочий стол:

npm run watch-webpack-deploy-desktop

или Сервер:

npm run watch-webpack-deploy-server