Всем хорошо известно, что 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.

Картинки по запросу дорожная карта изучения HTML CSS JS

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

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

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

Библиотека ресурсов

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

Стандарты и книги

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

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

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

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

Онлайн-ресурсы

  • Справочное пособие по всем тегам и таблицам стилей htmlbook.ru
  • Площадка по обмену опытом разработки из разных областей – habrahabr.ru

Онлайн-обучение

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

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

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

 

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