RSS

Разработчик Qlik Sense. Шаг 2b: Мое первое расширение

11 апреля 2019 gromych

Итерационный процесс разработки

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

Шаг 1: идея возникла из требования включить объект, который бы использовал Google-карты, чтобы показывать детали улиц и информацию о маршруте.

Шаг 2: я создал прототип, чтобы проверить техническую возможность добавления Google-карт в расширение Qlik Sense. Я немного ознакомился с API Google-карт и скопировал пример кода из этой документации в простое расширение Qlik Sense. Я протестировал его в демо-приложении Qlik Sense.

Шаг 3: Я получил доступ к разработке и тестированию расширения в реальном приложении Qlik Sense.  Была составлена схема визуализации.

Шаг 4: создание расширения (добавление вида улицы, общей карты, маршрута и расстояния из различных API Google-карт).

Шаг 5: окончательные корректировки в HTML и CSS. Перенос элементов карты и изменение размера и цвета шрифта.

Полученные технические уроки

Я не изучал разработку веб-сайтов или разработку расширений в Qlik Sense, пока не создал собственное расширение. Вот некоторые из тех вещей, которые я узнал на практике, и чего нет в книгах и учебниках.

Жесткое обновление

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

Библиотеки JavaScript и API

С учётом того, что я читал о базовом JavaScript, HTML и CSS, я, скорее всего, никогда не создам расширение Qlik Sense, не используя внешнюю библиотеку JavaScript, такую как D3.js, или API с некоторыми сторонними инструментами, такими как API Google-карт. Я пришел к выводу, что чем больше библиотек и API, которые я буду использовать, тем богаче мои расширения. Для моего первого расширения Qlik Sense я прочитал API Google-карт и использовал все, что я изучил до этого момента, чтобы расшифровать и настроить код примера. Следующим шагом в моем процессе стать разработчиком Qlik Sense – нужно найти онлайн ресурсы, которые рассказывают о последних и самых больших изменениях в веб-разработке, и я надеюсь найти новые библиотеки JavaScript для изучения.

API Google-карт и RequireJS

В своем предыдущем посте я объяснял, что у меня было с RequireJS, когда я следил за расширением Qlik Sense. У меня возникла еще одна проблема при попытке добавить API Google-карт в свое первое расширение через RequireJS. К счастью, Miller Medeiros разработал решение и задокументировал как оно работает в своем блоге. Я скопировал async.js в папку своего расширения и затем добавил следующую строку в массив модулей. (Создайте свой собственный код API Google и используйте его для замены myAPIKey.)

1

2

3

4

5

 define( [ …,

 

«./async!https://maps.googleapis.com/maps/api/js?key=myAPIKey&callback=initMap»

 

],…

Самый простой способ добавить HTML

Изучив использование jQuery для добавления тегов HTML в виде цепочки функций, я увлекся и попытался использовать этот метод для создания макета HTML для своего первого расширения. После нескольких неудачных попыток я обнаружил, что было бы проще сохранить простые вещи, выписав HTML в переменную, а затем использовать один jQuery append(), чтобы добавить все это одним махом.

1

2

3

4

5

6

7

8

9

10

11

12

13

 divs += «<div id=’left_column’>»;

divs += «<div class=’desc_wrapper’><div class=’desc’>» + originLabel +»</div></div>»;

divs += «<div id=’pano_origin’></div>»;

divs += «<div class=’desc_wrapper’><div class=’desc’>» + destinationLabel + «</div></div>»;

divs += «<div id=’pano_destination’></div>»;

divs += «</div>»;

 

divs += «<div id=’right_column’>»;

divs += «<div class=’desc_wrapper’><div class=’desc’ id=’distance_time’></div></div>»;

divs += «<div id=’map_route’></div>»;

divs += «</div>»;

 

$element.append(divs);

Опубликовано в рубрике Qlik Sense, Технологии
«
»
Вы можете оставить комментарий, или ссылку на Ваш сайт.

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

64 queries in 0,200 seconds