Руководство по встраиванию Tableau # 3: площадка для встраивания
Tableau разработала инструмент, который сделает процесс встраивания доступным абсолютно для всех. Речь идет об Embedding Playground, предоставляющий собой простой и понятный интерфейс для создания кода встраивания. Инструмент был выпущен 1 августа и сегодня он доступен абсолютно каждому. В этой статье я расскажу о нем подробнее, а также покажу Вам основы его использования. Мы применим его к трем примерам, которые я приводил ранее, и я покажу Вам, как можно расширить возможности использования данного инструмента.
Почему именно встроенная аналитика?
В первой статье я вкратце рассказал Вам о том, что и зачем нужно встраивать в аналитику; сейчас, оглядываясь назад, я боюсь, что был не так основателен, как следовало бы… Встраивание - это мощный инструмент аналитики, поэтому я хотел бы немного подробнее остановиться на причинах его важности и привести несколько примеров использования.
Встроенная аналитика позволяет нам предоставлять мощные инструменты аналитики нашим пользователям. Во многих случаях это реализовано таким образом, что пользователи не знают (или даже не обращают внимания), что они работают с Tableau, поскольку в рабочих книгах используются стандартные элементы брендинга и дизайна, персонализация, интегрированная безопасность, а также эффективные механизмы взаимодействия между приложением и визуализациями. В итоге встроенная аналитика выглядит, ощущается и работает так же, как и все остальное в приложении.
Используя Tableau для предоставления встроенной аналитики, Вы сможете максимально эффективно реализовать свои инвестиции в корпоративную аналитическую платформу Tableau. Это означает, что Вы сможете использовать все имеющиеся у Вас возможности, что неизбежно приведет к ускорению вывода продукта на рынок и появлению способности более оперативно реагировать на требования Заказчика. Вы также станете счастливым обладателем всей мощи платформы Tableau, включая аналитику в режиме реального времени, безопасность корпоративного уровня и многое другое.
Варианты использования
Варианты использования встроенной аналитики обычно делятся на две большие категории - внешние и внутренние.
Внешняя встроенная аналитика предназначена для предоставления аналитического контента клиентам (существующим и потенциальным), партнерам и другим заинтересованным лицам. Такой тип встраивания осуществляется через приложение или веб-портал, который Вы им предоставляете. В таких случаях число пользователей может быть невелико, но эффект от внедрения невероятно высок, поскольку инструменты для принятия решений находятся у пользователей под рукой. Организации также могут встраивать публичную аналитику в свой сайт с целью привлечь потенциальных клиентов. Приведем несколько примеров внешнего встраивания:
1) Банк, который стремиться предоставлять аналитику по расходам каждого клиента в режиме реального времени в своем приложении и/или платформе;
2) Платформа "программное обеспечение как услуга" (SaaS), которая хочет предоставлять аналитику пользователям всей платформы;
3) Университет, желающий предоставить потенциальным студентам информацию о количестве выпускников;
4) Государственная организация, предоставляющая гражданам информацию о состоянии здоровья населения (например, данные о случаях заражения COVID).
Внутренняя встроенная аналитика обычно ориентирована на сотрудников организации. Как и внешняя, она предназначена для предоставления пользователям критически важных инструментов принятия решений в процессе работы. Пользователям не нужно выходить из одной системы и входить в BI-платформу, чтобы получить доступ к этой информации - она находится там, где им удобно. Это способствует повышению уровня грамотности в области данных и формированию культуры работы с данными во всей организации. Примерами внутреннего внедрения являются:
1) Компания, которая хочет внедрить аналитику в свою внутреннюю ERP-систему.
2) HR-портал, предоставляющий сотрудникам полезную аналитическую информацию.
Обзор Embedding Playground
Итак, теперь, когда у Вас есть более полное представление о том, что такое встроенная аналитика и как она используется, давайте внимательнее посмотрим на Embedding Playground. Этот инструмент позволяет быстро сгенерировать код, необходимый для создания встраиваемого контента. Как я уже говорил ранее, написание этого кода - занятие не для слабонервных. Для этого требуется знание HTML и JavaScript, а также владение Tableau и Tableau Embedding API v3.
К сожалению, таких специалистов не так уж и много. Embedding Playground призван облегчить нам, непрограммистам, встраивание нашего контента, а также упростить жизнь и самим программистам, предоставив им отличную стартовую площадку.
Итак, когда Вы впервые открываете инструмент, первое, что Вы видите - это стартовый экран, который призван помочь освоить основные принципы его работы. Можно выбрать быстрый запуск, который использует пример рабочей книги и позволяет изучить все имеющиеся возможности. Можно также использовать собственный URL-адрес.
Давайте выберем опцию использование собственного URL-адреса. Инструмент работает с публичными, облачными и серверными версиями, поэтому откройте рабочую книгу, нажмите кнопку Share и скопируйте ссылку. Вставьте эту ссылку в инструмент и нажмите кнопку Next.
Если Вы использовали рабочую книгу из Cloud, Вам будет предложено настроить Connected App.
Начиная с января 2022 года, Connected Apps позволяет настроить безопасную интегрированную аутентификацию между Вашим приложением и Tableau Cloud. Это достигается путем установления доверительных отношений между Cloud и Вашим приложением, что позволяет использовать такую функцию, как единая авторизация. Доверительные отношения устанавливаются и проверяются с помощью маркера аутентификации, который использует стандарт JSON Web Token (JWT).
Подробнее о подключенных приложениях и их настройке Вы можете узнать, посетив раздел Конфигурация подключенных приложений с Direct Trust.
После того, как Вы настроите подключаемое приложение, программа Embedding Playground запустит процесс его добавления к встраиваемому приложению.
Важно! При настройке Connected App Вы получаете три ключа - Client ID, Secret ID и Secret Value. Их комбинация, по сути, является Вашим паролем. Очень важно, чтобы токен всегда создавался на сервере. Если токен генерируется на сервере, то он недолговечен и предназначен только для одной сессии. Это означает, что хакеры не смогут ничего с ним сделать. Токены, созданные на стороне клиента, не являются безопасными. На GitHub-аккаунте Tableau есть примеры создания таких токенов с использованием нескольких языков, включая C#, Python, Java и JavaScript (через Node.js).
Итак, вернемся к Embedding Playground… После ввода URL-адреса должно получиться что-то вроде этого:
Слева отображается введенный URL-адрес и некоторые другие параметры. При желании можно выбрать различные устройства просмотра или просто нажать "По умолчанию". Можно также задать ширину и высоту. Если оставить поля пустыми, то по умолчанию будут заданы размеры самой визуализации. Обратите внимание на небольшой значок помощи справа от всех этих параметров - щелкнув на него, Вы получите полезные рекомендации, которые помогут сделать правильный выбор.
Нажав кнопку Customize Display, можно включить отображение вкладок или изменить расположение панели инструментов.
Примечание: при использовании Tableau Public нельзя полностью скрыть панель инструментов, но опция "Скрытая" позволит скрыть некоторые кнопки.
Под панелью Customize Display расположены элементы взаимодействия. Пока пропустим их и вернемся к ним чуть позже.
В верхней части имеется несколько различных опций. При нажатии кнопки Run предварительный просмотр будет обновлен с учетом всех внесенных изменений. Кнопки в центре позволяют отобразить только код (Code), только окно предварительного просмотра (Preview) или оба окна (Grid). Справа расположены кнопка загрузки кода и кнопка доступа к справке. При нажатии на кнопку загрузки появляются две опции - Загрузить код (Download Code) и Скопировать код вставки (Copy Embed Code). В обоих случаях Вы получите один и тот же код, но при копировании он будет скопирован в буфер обмена, а при загрузке - загружен в виде HTML-файла. Примеры, которыми я поделюсь с Вами в ближайшее время, были загружены с использованием этих опций.
Примечание: Как было сказано ранее, существует разница между созданием необработанного HTML файла со встроенным содержимым и встраиванием этого содержимого в веб-платформу, например WordPress, Drupal или Wix. Код, предоставляемый Embedding Playground, представляет собой полный HTML. Если Вы встраиваете это содержимое в веб-платформу, то все это Вам не нужно.
Внизу находится код. Он состоит из двух компонентов - JavaScript-кода слева, который вызывает Embedding API, и HTML-кода справа. JavaScript полностью редактируемый, поэтому, если Вы хорошо разбираетесь в коде, Вы можете использовать сгенерированный код в качестве отправной точки и добавлять свои собственные изменения. Или, если хотите, можете загрузить код и открыть его в своем любимом редакторе. Я предпочитаю сохранять код в Embedding Playground, поскольку это позволяет легко просматривать изменения в процессе работы. Если Вы внесли изменения и хотите вернуться назад, то в силу того, что кнопка Undo отсутствует, Вы можете использовать комбинацию CTRL+Z (или другие команды) для того, чтобы отменить внесенные изменения.
Примеры
В прошлом блоге я привел примеры трех распространенных сценариев, показав, как использовать iFrames, JavaScript Embedding API v2 и JavaScript Embedding API v3 для каждого из них. Сегодня я покажу, как сделать каждый из этих сценариев с помощью Embedding Playground. Я создал готовые рабочие HTML-примеры, которые разместил на GitHub. Я также загрузил их на сайт flerlageapps.com. Наконец, я создал фрагменты кода на codepen.io. По мере рассмотрения каждого примера я буду давать ссылки на код на Github, рабочую HTML-страницу на flerlageapps.com и на codepen.io.
Я рассмотрю следующие три сценария:
1) Фиксированный размер - приборная панель, использующая фиксированный размер, т.е. статические высоту и ширину;
2) Device Layouts - приборная панель, построенная с использованием конструктора Tableau;
3) Автоматический или изменяемый размер - приборные панели, построенные с использованием автоматического или изменяемого размера, что позволяет им автоматически изменять размер в соответствии со страницей.
Встраивание с фиксированным размером
Как и в предыдущем блоге, я буду использовать The Widening Divide, который имеет ширину 1500 пикселей и высоту 2000 пикселей. Моя цель состоит в том, чтобы вставка выглядела именно так, как это показано на рисунке ниже (рабочая книга расположена по центру страницы). Мы выравниваем именно по центру, потому что, по моему опыту, это имеет больше смысла, чем выравнивание влево или вправо.
Создать эту вставку довольно просто: нужно лишь получить URL Share из рабочей книги и вставить его в Embedding Playground. В качестве устройства просмотра можно использовать либо "рабочий стол", либо "по умолчанию". Выполнив эти простые действия, Вы получите работающий код встраивания!
В прошлом блоге я обнаружил несколько вещей, которые пока все еще недоступны в Playground, а именно: изменение заголовка HTML-файла и центрирование вставки. Чтобы изменить заголовок, я изменил текст в тегах заголовка в верхней части. Для центрирования я добавил div вокруг HTML-части вставки, как показано ниже. Вам же просто нужно изменить значение max-width на ширину Вашего дашборда.
<!-- Add this div to center the content -->
<div style="max-width:1500px; margin: auto;">
<tableau-viz
src="https://public.tableau.com/views/TheWideningDivide/01"
device="desktop"
hide-tabs
toolbar="bottom"
>
</tableau-viz>
</div>
<!-- End of the div for centering the content -->
Примечание: В веб-дизайне существует множество способов выравнивания элементов, так что это лишь один из многих подходов к центрированию содержимого. И, если быть до конца честным, я не уверен, что это самый лучший или наиболее эффективный вариант, но он 100 % работает!
Embedding Playground также создает несколько строк кода для установки активного листа и получения рабочего листа, который Вы хотите использовать.
let dashboard;
let worksheet;
if (viz.workbook.activeSheet.sheetType === SheetType.Dashboard) {
dashboard = viz.workbook.activeSheet;
// Provide the name of the worksheet you want to use from the dashboard
worksheet = dashboard.worksheets.find((ws) => ws.name === 'Replace-Name-of-Worksheet');
} else {
// Active sheet is already a worksheet
worksheet = viz.workbook.activeSheet;
}Для таких простых встраиваний, как это, код не нужен (хотя и не помешает). Яудалил его. Если бы мы добавили дополнительные взаимодействия, то этот код понадобился бы. Если Вы так и поступили, просто не забудьте обновить названия дашборда/таблицы.
Device Layouts
В данном случае я использую Fleetwood Mac: The Members and the Albums. Дашборд имеет две схемы устройств - "Рабочий стол" и "Телефон". Рабочий стол имеет ширину 1100 пикселей и высоту 1600 пикселей, Телефон - минимальную ширину 375 пикселей и высоту 845 пикселей. Наша цель состоит в том, чтобы при отображении на больших экранах наше встраивание имело вид рабочего стола, а на маленьких экранах - вид телефона.
Мы вставляем URL-адрес Share в Embedding Playground, затем выбираем опцию "по умолчанию" для "устройства просмотра". Это позволит Tableau запустить макеты для различных устройств.
Как и в предыдущем примере, я изменил заголовок и удалил ненужный код в самом конце. Для центрирования вставки я использовал ту же технику, что и для вставки с фиксированным размером. Только сначала убедитесь, что значение max-width установлено на максимально возможную ширину встраивания (обычно это ширина макета для рабочего стола).
Изменяемое встраивание
В данном случае я буду использовать версию регионального акселератора Tableau. В частности, я буду использовать панель Global Temperatures, которая основана на оригинальной работе Naledi Hollbruegge для Makeover Monday. Дашборд настроен на автоматическое изменение размера. Наша цель состоит в том, чтобы содержимое вписывалось в окно браузера, автоматически обновляясь при изменении размера окна. Вот несколько примеров того, как оно должно выглядеть при различных размерах окна.
Опять же, с помощью Embedding Playground сделать это очень просто. Мы вставляем URL-адрес Share в Embedding Playground и выбираем опцию "по умолчанию" для "устройства просмотра".
К сожалению, я обнаружил, что если ширина автоматически подстраивается под изменения размера окна, то высота - нет. Чтобы решить эту проблему, скорее всего, придется внести в код некоторые усовершенствования, не похожие на те, о которых я рассказывал в предыдущем блоге. Важно отметить, что в каких-то случаях Embedding Playgrou будет полностью соответствовать Вашим потребностям, а в других, возможно, потребуются определенные доработки.
Взаимодействия
Теперь давайте поговорим о взаимодействиях. В примерах, которые я привел выше, рассматриваются некоторые базовые варианты использования. Однако Embedding API версии 3 предоставляет гораздо больше функциональных возможностей. Именно здесь и появляется функция "Добавить взаимодействие". Если открыть этот «ящик Пандоры», то Вы увидите такие опции, как "Рабочий лист", "Дашборд" и "Рабочая книга". При более детальном рассмотрении можно найти опции добавления контекстных меню, фильтрации, выбора меток и параметров.
Например, давайте встроим карту, отражающую уровень бедности.
Возможно, Вы захотите предоставить пользователям Вашего приложения возможность фильтрации по штатам. Для этого, используя Embedding Playground, прокрутите окно JavaScript-кода в самый низ, туда, где написано "// *** Insert your code below!! ***". На левой панели выберите тип взаимодействия Dashboard, затем перетащите взаимодействие Apply Filter. В результате будет создан код шаблона для применения фильтра.
try {
// applyFilterAsync (Dashboard)
// For more information, see
// https://help.tableau.com/current/api/embedding_api/en-us/docs/embedding_api_filter.html
// Apply the filter on State to the Overview dashboard
await dashboard.applyFilterAsync(
'Field', // Replace 'Field' with the name of the filter
['Value1', 'Value2'], // array of filter values
FilterUpdateType.Replace // other options Add, Remove or All
);
} catch (e) {
console.error(e.toString());
}
Давайте сделаем так, чтобы можно было видеть только Пенсильванию, для этого изменим код следующим образом:
await dashboard.applyFilterAsync( 'State Name', ['Pennsylvania'], FilterUpdateType.Replace );
Примечание: показан только тот фрагмент кода, который был изменен.
Теперь, когда мы нажмем кнопку Run, будет отфильтрована Пенсильвания.
Но Вы, наверное, зададитесь вопросом, зачем это делать в коде? Отвечаю: мы используем JavaScript-код и переменную, содержащую выбранный штат, для автоматической фильтрации внутри вставки - это создает мощное взаимодействие между приложением и встраиваемым контентом, что помогает создать ощущение, что это часть самого приложения, а не отдельный компонент.
Выполним еще одно взаимодействие, рассмотрим параметр "Регион". При выборе региона остальная часть страны закрашивается серым цветом, что позволяет нам сосредоточиться только на выбранном регионе. Например, если мы выберем регион "Юг", то увидим следующее:
Если мы хотим запустить это действие в коде вставки, то выделим взаимодействие с рабочей книгой и выберем пункт Change Parameter Values. Далее необходимо обновить код. Изменим строку const paramName =, установив в ней значение, которое мы хотим выбрать в параметре - в нашем случае "South". Затем в строке const newVal = await viz.workbook.changeParameterValueAsync изменим первый параметр на название самого параметра - "Region".
const paramName = 'South';
try {
const newVal = await viz.workbook.changeParameterValueAsync('Region', paramName);
console.log(`Updated parameter: ${newVal.name}, ${newVal.currentValue.value}`); // show change in console
} catch (e) {
console.error(e);
}
Это создаст эффект выделения внутри вставки.
Примечание: Понять, что именно нужно изменить, может быть совсем непросто. Если Вы «застряли», щелкните на ссылку "API Reference" на левой панели, чтобы перейти к документации и получить больше полезной информации.
Рассмотрим еще один пример взаимодействия. В разделе Worksheet есть взаимодействие под названием Context Menu. Если мы добавим его в наш код, это позволит нам добавить действие к всплывающей подсказке.
Код шаблона создает очень простое меню "Запустить мое приложение", при нажатии на которое запускается экранное оповещение. Но только представьте, что еще можно с этим сделать! Можно запускать бизнес-процессы непосредственно из встроенного содержимого Tableau, отправлять электронные письма, да все, что только можно себе представить. И все это в контексте встроенного содержимого. Это еще один момент, который позволяет ощутить встраивание как полностью интегрированную часть приложения.
Примечание: Взаимодействия, доступные через Embedding Playground, не охватывают всех возможностей Embedding API. С помощью API можно сделать гораздо больше того, что пока недоступно в этом инструменте. Только Вам придется писать код самостоятельно =)
Заключение
Когда я писал код для предыдущего блога, это заняло у меня целую вечность - и потому, что пришлось писать код практически с нуля, и потому, что я не являюсь опытным программистом JavaScript. С Embedding Playground все стало намного проще. Он позволяет генерировать мощный код для встраивания, включающий несколько различных типов взаимодействия, который затем можно модифицировать в соответствии с Вашими требованиями. В результате встраиваемый контент выглядит, действует и ощущается как полностью интегрированная часть приложения. Пользователи не знают и не обращают внимания на то, что это отдельный компонент - вот что такое встроенная аналитика!
Я надеюсь, что данная статья сформировала у Вас хорошее представление о новой площадке Embedding Playground. Используйте ее для создания базового кода, добавляйте все необходимые взаимодействия, создавайте бесшовную аутентификацию через Connected App, а затем загружайте код. Скорее всего, потребуется некоторые доработки, но в любом случае инструмент поможет Вам пройти большую часть пути, сэкономив при этом массу времени!
