Qlik Extensions Camp
День 1. Подготовка к разработке расширений
Сегодня будет вводный день – мы познакомимся с программой интенсива, поймем как соотносятся стандарты визуализации и разработка собственных расширений, подготовим необходимое ПО и потренируемся с технологиями веб-разработки
Добрый день, участник Qlik Extensions Camp!

Спасибо за интерес к разработке расширений для Qlik Sense – в ближайшие шесть дней интенсива мы вместе разработаем 3 экстеншена, которые вы в дальнейшем сможете использовать в своих приложениях как есть или кастомизировать под свои задачи. Кроме того, вы получите необходимую теоретическую базу для создания собственных расширений.
Сегодня будет вводный день – мы познакомимся с программой интенсива, поймем как соотносятся стандарты визуализации и разработка собственных расширений, подготовим необходимое ПО и разберем необходимые языки для построения расширений Qlik Sense. Для участников мало знакомых с HTML, JS и CSS сегодняшний день будет особенно насыщенным.

P.s. Да, котики нам будут помогать. Разработка без котиков = никакого веселья.

Поехали!

Авторы интенсива и контакты
Материалы интенсива подготовили сотрудники Консультационной Группы АТК, активные участники Qlik-сообщества qRUG, а также DataYoga. Эксперты будут на связи на протяжении интенсива и на заключительном вебинаре 6 июля ответят на все вопросы участников
Андрей
Руководитель направления аналитических систем, Консультационная Группа АТК, Qlik Luminary 2020
Екатерина
Ведущий разработчик Qlik Extensions, Консультационная Группа АТК
Ирина
Эксперт по визуализации данных в Qlik Sense, Консультационная Группа АТК
Андрей
Основатель комьюнити экспертов по визуализации данных ДАТАЙОГА
В первые 5 дней интенсива создадим 3 расширения для Qlik Sense (рейтинг, кнопка и календарь), а 6 июля - пообщаемся вживую на вебинаре и ответим на все вопросы
Структура интенсива

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

Первые 5 дней, с 29 июня (понедельник) по 3 июля (пятница), вы будете получать материалы для самостоятельной работы - письмом и/или в Telegram-боте. В каждом уроке вас ждет:
  • теория и практика разработки расширений для Qlik Sense, с инструкциями, скринкастами, разбором кода и полезными ссылками (все теоретические аспекты разбираем на реальных примерах, в процессе создания трех расширений)
  • домашние задания (по их выполнению мы отберем самых активных участников интенсива, которым вручим подарки, а также дадим общую обратную связь по домашним заданиям на вебинаре)
  • самостоятельная проверка освоения материала в тестах в Telegram-боте

Ежедневная работа с подготовленными материалами, инструкциями будет занимать 30-90 минут (в зависимости от конкретного урока и вашего знакомства с веб-разработкой).

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

Последний, 6-ой день: заключительный вебинар для живого общения, ответов на вопросы, советов от Qlik Luminary, Андрея Терехова, по разработке экстеншенов (и не только), а также награждение самых активных участников интенсива.
Личные цели и результаты интенсива
Мы хотим, чтобы на эту неделю все участники интенсива поставили себе измеримые цели и их достигли. Отмечайте галочками важное именно для вас:
Узнать/структурировать знания по Java Script, CSS, HTML и визуализации данных
и понять, как все это связано с Qlik Sense
Создать 2 простых расширения для Qlik Sense самостоятельно, с нуля
Расширения «рейтинг» и «кнопка»
Кастомизировать 1 расширение на основе D3 для Qlik Sense
Расширение «календарь»
Создание и управление параметрами extensions и работа с API
Разобраться, как создавать параметры extensions и соединять их с данными (API)
Управление стилем при помощи CSS
Научиться гибко настраивать стили объектов при помощи CSS
Ответы на ваши вопросы по extensions
Получить ответы от экспертов на вопросы по разработке расширений, которые давно интересовали
Техническая подготовка к интенсиву
Для участия в интенсиве вам нужно:

1. Qlik Sense Desktop


2. Visual Studio Code: https://code.visualstudio.com/
Альтернативы: Sublime Text, Atom

3. Браузер Google Chrome. При разработке в Qlik Sense Desktop удобно просматривать, что получается в браузере (наше предпочтение - Google Chrome. Ваш Qlik Sense Hub будет доступен по ссылке: https://localhost:4848/hub/my/work)


4. Приложение "АТК_course_extensions.qvf"
В приложении есть ссылки на основные материалы интенсива, а также тренировочные данные и отдельная страница под разработку каждого расширения, с описанием инструкциями функционала.
Чтобы приложение было доступно для работы при открытии Qlik Sense Desktop, положите файл в директорию с приложениями Qlik Sense: C:\Users\ИМЯ_ПОЛЬЗОВАТЕЛЯ\Documents\Qlik\Sense\Apps
    Зачем вам Visual Studio Code: Разрабатывать экстеншены можно хоть в Блокноте, но удобней всего для этого использовать текстовые редакторы (см.выше). Они удобны тем, что обладают дополнительным функционалом для работы с кодом, таким как подсвечивание синтаксиса, автодополнение, загрузка расширений и прочее. В интенсиве мы будем использовать Visual Studio Code, но если у вас другой любимый редактор, можете использовать его.
    Визуальные стандарты для BI и...
    когда и для чего вам нужно создать extension
    Стандартизация в области визуализации призвана улучшить визуальную коммуникацию на основе данных:
    - для разработчиков и аналитиков BI – упростить процесс выбора эффективных визуальных решений для типовых аналитических задач (например, план-фактный анализ или P&L)
    - для пользователей – сократить время на принятие решений за счет максимально удобного визуального считывания информации.

    Но базовые визуализации предоставляют лишь ограниченный набор настроек шрифтов, цвета и композиционных решений, поэтому для более сложных задач по визуализации данных нужны экстеншены. При помощи программируемых расширений можно гибко настраивать визуализацию и интерактивное взаимодействие с данными, но первый вопрос, который нужно себе задавать при разработке экстеншена: "Поможет ли этот экстеншен мне более эффективно организовать коммуникацию при помощи данных?"
    Что нужно знать о визуализации данных, чтобы перейти к использованию и созданию экстеншенов
    Андрей Демидов, основатель комьюнити экспертов по визуализации данных DataYoga
    Почему стандартизация в визуализации важна?
    При условии, что хорошо информированные менеджеры принимают лучшие решения, деловое общение должно стремиться к прозрачности. Обеспечение прозрачности означает предоставление правильной, полной и понятной информации в нужное время из надежного источника.
    Внедрение стандартов для бизнеса повышает прозрачность двумя способами: понимание и доверие.

    Понимание: Эти стандарты облегчают понимание отчетов и презентаций, устанавливая правила их концептуального и визуального дизайна. Отчеты и презентации легче понять с помощью четкого сообщения, хорошо структурированной сюжетной линии, одинакового вида похожих объектов и более высокой плотности информации.

    Доверие: Эти стандарты обозначений помогают повысить достоверность отчетов и презентаций. Решения принимаются легче, когда им не мешают намеренно неполная информация и вводящие в заблуждение визуализации.
    Ключевой вопрос
    Поможет ли мне новое расширение более эффективно организовать коммуникацию при помощи данных?
    Главный герой нашего интенсива, Extension для Qlik Sense, един в трех названиях: extension = экстеншен = расширение
    Что такое extension?

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

    Расширения используют тот же набор технологий, что и стандартные визуализации Qlik Sense, и при правильной разработке их работа идентична стандартной визуализации. Стандартными технологиями диаграмм являются:
    · Добавление на лист с помощью перетаскивания ("drag-and-drop"),
    · Настройка элементов диаграммы на панели свойств,
    · Изменение размера, копирование, вставка и позиционирование области диаграммы,
    · Добавление и использование в «Stories» (должно учитываться при разработке экстеншена),
    · Работа на различных устройствах (должно учитываться при разработке экстеншена).
    Языковой набор для создания extension
    Для разработки экстеншенов для Qlik Sense вам понадобятся знания языков HTML, Java Script и CSS. Если вы пока слабо с ними знакомы, это нормально - не нужно быть экспертом, чтобы создать ваши первые расширения на интенсиве и понять, хотите ли вы развиваться в этом направлении дальше.

    Минимально необходимый уровень владения этими языками для комфортного прохождения интенсива по разработке экстеншенов:
    Js: 2,5 из 5
    CSS: 2 из 5
    HTML: 1 из 5

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

    Что почитать по HTML:
    CSS
    CSS (Cascading Style Sheets, каскадные таблицы стилей) - это язык разметки для описания стиля документа. Он выглядит как каскадные таблицы стилей и позволяет менять размеры, расположение элементов на странице, цвета, шрифты. CSS также позволяет анимировать элементы и адаптировать их под размер страницы.

    CSS-блок имеет следующую структуру (пример - на скриншоте):
    селектор {
    свойство: значение;
    }

    Селектор определяет, каким элементам будут заданы свойства в блоке.
    Свойство - параметр, который будет меняться (например, цвет, размер, позиционирование).
    Значение определяет, каким образом изменится параметр.

    Вездесущий CSS: CSS может быть определен не только в отдельном CSS-файле, но и в HTML, и через JS.

    Что почитать по CSS:
    JavaScript, или JS
    JavaScript - это скриптовый язык программирования с динамической типизацией. Чаще всего используется для "оживления" веб-страниц. Программа на нем называется скриптом, исполняется сразу при загрузке на страницу и не нуждается в компиляции (ее на себя берет движок выполнения).
    В браузере JS используется для взаимодействия с сервером, модифицирования HTML-страницы, реакции на действия пользователя, "запоминания" информации переданной пользователем.

    Что почитать по JS:
    Как связаны между собой JS, CSS, HTML и зачем все это Qlik'у?
    Визуальная часть Qlik Sense строится на связке HTML+CSS+JS.
    Сама страница Qlik Sense - это HTML-документ, к которому подключаются JS-скрипты для динамики и взаимодействия и CSS-файлы для стилизации. Соответственно, и экстеншены мы разрабатываем при помощи этих языков.

    Важно помнить: Кроме этих инструментов Qlik использует множество других библиотек, с которыми можно ознакомиться в Qlik Help или в Qlik Sense Desktop > Информация о программе. Их тоже может быть полезно использовать для создания расширений, но пока они нас не интересуют - в этом интенсиве мы будем использовать базовую связку из HTML+CSS+JS.
    Создание "my first extension" и его анатомия
    Расширения для Qlik Sense разрабатываются и хранятся в DevHub. Зайдем в DevHub Qlik Sense:
    А теперь создадим расширение с названием "my_first_extension" и посмотрим, из чего оно состоит:
    Процесс создания расширения одинаков на сервере и на рабочем ПК.
    Подробнее о типах шаблонов при создании extension можно почитать здесь
    Состав extension
    Когда мы создали экстеншен с названием "my_first_extension", в DevHub создались следующие файлы:
    - my_first_extension.js,
    - my_first_extension.qext,
    - wbfolder.wbl.
    Разберем, какую функцию выполняет каждый из них:
    js – корневой скрипт с подключенным к нему Qlik. Этот скрипт возвращает объект, включающий в себя:
    - функцию paint(), которая вызывается при появлении экстеншена на листе, обновлении страницы, изменении размера экстеншена,
    - объект со свойствами (условно назовем его properties), описывающий блок настроек экстеншена:
    qext – описание экстеншена, в котором задаются название экстеншена, описание, автор, версия, лицензия и другая информация;
    wbfolder.wbl – перечень файлов экстеншена.

    Этих файлов достаточно для корректной работы экстеншена, но Вы также можете добавлять все, что Вам необходимо для разработки. Это могут быть другие JS-файлы, в том числе и библиотеки сторонних разработчиков, HTML-документы, CSS-файлы, картинки в различных расширениях.
    Как хранятся extension в Qlik Sense Desktop и Qlik Sense Enterprise
    Чтобы Ваши собственные или сторонние расширения работали в приложении Qlik Sense Desktop, необходимо их загрузить в папку с экстеншенами, которая находится по адресу: C:\Users\Пользователь\ Documents\Qlik\Sense\Extensions:
    Каждый extension находится в соответствующей ему папке. В папке находятся «внутренности» расширения – файлы js, css, qext.
    Там же создаются и новые extensions.

    Загрузить расширения на сервер (Qlik Sense Enterprise) можно только через QMC по ссылке:
    https://ваш_сервер/qmc/extensions
    ! На сервер можно загрузить ТОЛЬКО АРХИВ С EXTENSION.

    Где найти расширения в приложении Qlik Sense?

    Extensions отображаются в приложении Qlik Sense в сайдбаре слева, раздел "Пользовательские объекты → Расширения":
    Домашнее задание. Урок 1.
    К разработке экстеншенов мы приступим завтра, а сегодня:

    1. Стратегия: Продумайте, для каких аналитических задач вам не хватает стандартной визуализации Qlik Sense. Опишите эту задачу или задачи, и также целевой функционал визуализации.

    2. Тактика: Поработайте на он-лайн тренажерах HTML, JS и CSS:
    - Если не знакомы или очень слабо знакомы с веб-разработкой, воспользуйтесь https://www.freecodecamp.org/learn/ (хороший тренажер для последовательного изучения HTML, CSS и JS)
    - Если уже есть опыт веб-разработки, потренируйтесь на https://jsbin.com/?html,output ("песочница", в которой можно писать на html/js/css и сразу видеть результат)

    Итоги дня
    Сегодня мы узнали подробнее об интенсиве и технологиях для разработки расширений для Qlik Sense, оценили свои навыки по HTML, JS и CSS и поняли, что нужно прокачать, а также разобрались с составляющими экстеншена.

    Завтра разработаем наш первый экстеншен, "рейтинг"!
    Консультационная Группа АТК и Qlik-сообщество qRUG

    2020

    atkcg.ru
    qrug.atkcg.ru