Разработчик Qlik Sense. Шаг №2a: Основы расширений Qlik Sense

После первого раунда изучения Web Dev Fundamentals было много вещей, связанных с JavaScript, которые все еще смущали меня. Тем не менее, я хотел наконец применить эти знания в Qlik Sense, и был уверен, что JavaScript станет менее запутанным, поскольку я продолжал изучать его. (Это оказалось правдой, когда я позже нашел отличный онлайн-курс в Udemy, который называется «JavaScript: Understanding the Weird Parts», он прояснил смысл многих особенностей JavaScript).

Веб-разработка в Qlik Sense

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

AngularJS

В учебном курсе есть раздел об AngularJS, но я решил все упростить и пропустил эту часть учебника. Я послушал совета Александра Карлсона о том, что знание AngularJS не является необходимым навыком для создания расширения, и он был прав. Если вы еще не знаете AngularJS, я бы порекомендовал вам не втягиваться в его обучение, прежде чем создавать свое первое расширение.

RequireJS

В отличие от AngularJS, вам понадобится базовое понимание RequireJS для создания расширения. RequireJS позволяет включать внешние JavaScript, CSS или HTML-файлы (или модули) в код расширения. Это поможет вам включить библиотеки, такие как D3.js, и сохранить свой собственный код в порядке. Он также является эффективным способом обработки зависимостей кода.

В книгах и на занятиях для веб-разработчиков изучается следующий способ включения внешних файлов сценариев и файлов CSS.

<script type=»text/javascript» src=»script.js»>

<link rel=»stylesheet» type=»text/css» href=»css/layout.css»>

Когда мы пишем расширение, то включаем внешние файлы с использованием RequireJS, и используем следующий синтаксис определения асинхронного модуля (AMD).

define( [«./script»,

«css!./css/layout.css»

],

function( object1 ) {

}

);

Первый параметр функции define() – это массив внешних зависимостей, которые ваше расширение Qlik Sense должно выполнить правильно, а второй параметр – анонимная функция, в которой вы собираетесь писать код своего расширения. Часть этого кода, которая была неясна для меня, когда я проходил ее в учебнике, была связана с отношениями между файлами в массиве и параметрами анонимной функции.

Если внешний файл скрипта возвращает что-то, то это передается как аргумент анонимной функции. Например, в предыдущем коде, если файл script.js (обозначенный как «./script» в массиве) возвращает объект, тогда этот объект передается в анонимную функцию в качестве параметра object1. Затем мы можем использовать этот параметр для ссылки на этот объект в коде расширения.

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

define( [«./script»,

«css!./css/layout.css»,

«./props»

],

function( object1, props ) {

}

);

После часа отладки я обнаружил, что упустил из виду. Проблема с предыдущим кодом заключается в том, что параметры анонимной функции должны совпадать с файлами в массиве. Первый параметр соответствует первому внешнему файлу, второй параметр – второму внешнему файлу и т. д. Я непреднамеренно передал объект CSS в параметр (props), который, как я предполагал, будет определением панели свойств.

Чтобы исправить проблему, я мог бы определить новый параметр css и поместить его между object1 и props. Однако я решил не создавать параметры, которые я не собирался использовать и изменил порядок внешних файлов в массиве. Поэтому я исправил панель исчезающих свойств, используя следующий код.

define( [«./script»,

«./props»,

«css!./css/layout.css»

],

function( object1, props ) {

}

);

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

Уроки выучены

Помимо этой проблемы, остальная часть учебника по расширениям Qlik Sense прошла гладко. Я не могу сказать, что уже все понял, но я получил достаточно знаний, чтобы сделать собственное расширение. Я закончил, ответив на следующие вопросы.

  • Как мне написать код чего-то, что появляется в Qlik Sense?
  • Как создать свойства расширения и затем ссылаться на значения, присвоенные этим свойствам?
  • Как интегрировать расширение с помощью модели данных приложения Qlik Sense?

В этом уроке я также подумал, что узнал, как делать интерактивное расширение и фильтровать модель данных приложения. Однако, понимание того, как это сделать, не пришло до тех пор, пока я не разработал свое первое расширение, используя D3.js.

Другие ресурсы для начинающих

Есть не так много учебников для новичков в Qlik Sense. Следующий список – это те, которые я на данный момент сумел найти.

Учебник: как построить расширение Qlik Sense с помощью D3 от Спероса Кокенеса

Этот учебник выходит за рамки «Hello World» и расширения таблиц, которые мы создаем в официальном учебном пособии по расширениям Qlik Sense, и, следовательно, это отличное продолжение.

Серия видеороликов о создании расширений в Qlik Sense от Спероса Кокенеса

Эта серия видеороликов включает в себя пару тем, которые вам не обязательно изучать, чтобы создать первое расширение (например, D3.js, функция изменения размера), но я бы не рекомендовал смотреть его на ранней стадии, а вернуться к нему после, когда ваши навыки улучшились. Также полезно прислушаться к мыслительному процессу Спероса, когда он создает свое расширение.

Начало разработки расширений для визуализации – Qlik Sense от Qlik

Это видео показывает другой способ создания расширений через Qlik Dev Hub.

Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий

64 queries in 0,186 seconds