После первого раунда изучения 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.
- Учебный центр по технологиям анализа данных и BI: расписание/запись на учебные курсы, тестирование разработчиков — https://education.biconsult.ru/
- Присоединяйтесь к QUBIC – сообщество профессионалов в области BI! Наши страницы в соц.сетях – расписание учебных курсов, бесплатные учебные материалы, анонсы мероприятий: https://vk.com/club165575964 и https://www.facebook.com/qubicspb
- Неофициальный форум разработчиков QlikView & Qlik Sense Russian forum
- Канал на Youtube – много обучающих видео и записи вебинаров
- Готовые решения “Конструктор финансовой отчетности” и “Анализ продаж”