Статьи

Материалы по разработке Javascript (JS) для Qlik Sense

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

Итак, что нужно освоить для наиболее эффективной разработки в Qlik Sense? Это три кита для успешной разработки в Qlik Sense: HTML, CSS и JavaScript (в части AngularJS, jQuery). В этой статье расскажу об особенностях освоения этого пути, а также, какими должны быть ваши первые шаги в изучении HTML, CSS и JS для Qlik Sense.

ВСТУПЛЕНИЕ

Как обычно начинается работа с QlikView? Мы учим ключевые функции и выражения скрипта. Далее, в основном, функции изучаются по мере потребности и необходимости в процессе работы на проектах. Так, создается первое приложение, а далее уже прокачиваются навыки через общение с коллегами и изучение фундаментальных книг по QlikView-разработке, например QlikView 11 for Developers.

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

HTML ДЛЯ QLIK SENSE

HTML задает структуру для расширений визуализации Qlik Sense. Так, благодаря HTML, создается текст, таблицы, страницы, рисунки и SVG. Синтаксис выучить достаточно просто. Например, для определения заголовка в тексте, мы используем тег.

<h1>ВАШ ТЕКСТ </h1>

CSS ДЛЯ QLIK SENSE

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

h1 { color: red; }

НА ЗАМЕТКУ! При работе с кодом HTML и CSS стоит пользоваться справочником w3schools.com. У ресурса удобный формат – можно не только посмотреть примеры кода, но и научиться писать собственный код, на основе встроенных интерактивных уроков.

JAVASCRIPT ДЛЯ QLIK SENSE

И, наконец, мы используем JavaScript для динамического определения HTML и CSS. Например, мы можем добавить заголовок в расширение, используя такой код JavaScript.

$element.append( “<h1>Web Development Fundamentals</h1>” );

В плане освоения языка JavaScript, он более сложен, чем HTML и CSS.

На картинке ниже представлена карта развития навыков веб-разработки. Нас интересует в работе с Qlik Sense (конечно, только для начала) именно часть фронт-эндовой разработки. Так, путь начинается от изучения основ HTML, CSS, затем уже фреймворки и jQuery с AngularJS.

НА ЗАМЕТКУ! Для изучения основ веб-программирования стоит обратить внимание на платные и бесплатные курсы: CodeSchool (платные) и Codecademy (бесплатные).

После изучения основ стоит перейти к освоению DOM и jQuery. DOM – важная часть в работе расширений Qlik Sense.

НА ЗАМЕТКУ! DOM (от англ. Document Object Model — «объектная модель документа») — это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов. Изучение jQuery будет хороший дополнением к знаниям DOM.

БИБЛИОТЕКА РЕСУРСОВ

В моих первых шагах изучения HTML, CSS и JavaScript я нашел книги для новичков, а также онлайн-ресурсы, которые дают отличный фундамент для создания расширений Qlik Sense.

СТАНДАРТЫ И КНИГИ

Лучшая литература — это спецификация. Я лично считаю, что спецификация — это последняя инстанция и главный авторитет, который описывает поведение и логику всех свойств, методов или элементов в зависимости от технологии. Но, тем не менее, есть и некоторые помощники из несколько книг для начинающего веб-разработчика, которые очень полезно прочитать. Книги являются отличным и, главное, очень важным дополнением к спецификации:

HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Николай Прохоренок, Владимир Дронов.

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

Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 / Робин Никсон.

Удобное пособие для быстрого нахождения информации об HTML5, его новых элементов и атрибутов. Рассмотрены ключевые темы фронт-энда.

Новая большая книга CSS / Дэвид Макфарланд.

Эта книга предполагает, что вы уже знакомы с языком HTML. Она написана так, чтобы помочь читателям любого уровня. Для извлечения максимальной пользы из материала вы обязательно должны учиться на приведенных примерах HTML и CSS.

ОНЛАЙН-РЕСУРСЫ

Справочное пособие по всем тегам и таблицам стилей htmlbook.ru

Площадка по обмену опытом разработки из разных областей – habrahabr.ru

ОНЛАЙН-ОБУЧЕНИЕ

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

Codecademy – JavaScript

Udacity – JavaScript

Code School – JavaScript

Google Developers Training – HTML, CSS, and JavaScript

Это те ресурсы, которых хватит с избытком для первых шагов освоения CSS, HTML и JavaScript.

Курс по JS

https://www.udemy.com/understand-javascript/

Mastering D3.js Extensions in Qlik Sense

https://www.udemy.com/mastering-d3js-extensions-in-qlik-sense/

Mastering D3.js Extensions in Qlik Sense

https://www.udemy.com/mastering-d3js-extensions-in-qlik-sense/

Javascript-разработчик

https://geekbrains.ru/professions/Fullstack_JS_dev

Курсы Javascript (frontend разработка)

https://brunoyam.com/obuchenie/kursy-programmirovaniya-i-veb/kurs- javascript

Профессия веб-разработчик

https://netology.ru/programs/web-developer

Видео-курс по JavaScript на русском языке

https://habr.com/company/hexlet/blog/205902/

И еще:

https://learn.javascript.ru/courses

https://habr.com/post/331530/

https://vc.ru/5159-online-courses

И напоследок: для начала, все-таки, основные вещи, которые нужно понять – это как ведут себя div и span, позиционирование, поток и слои. Всё остальное будет усваиваться по мере развития навыков создания расширений Qlik Sense.

На этом все на сегодня! Отличных вам разработок с Qlik Sense.

Вам может быть интересно

Курсы:

Разработчик Qlik Sense (авторский курс BI Consult)

Материалы для скачивания:

• Sozdaem_dinamicheskie_site.pdf
• HTML_JavaScript_PHP_MySQL_Dronov_Prokhorenko-2015.pdf
• DavidSawyerMcFarlandCSStheMissingManual.pdf

« Предыдущий материал     Следующий материал »