Просмотрите сообщества SaaS в Twitter, LinkedIn, Reddit, Discord, что угодно, и вы увидите, что во многих из них появляется общая тема. У этой темы может быть много названий: BI, аналитика, инсайты и так далее. Это естественно, мы ведем бизнес, собираем данные, добьемся мы успеха или потерпим неудачу. Мы хотим разобраться во всем этом, осмыслить имеющиеся у нас данные и принять меры. Эта потребность породила множество проектов и инструментов, которые немного облегчают жизнь всем, кто хочет изучать данные. Но когда люди имеют, люди хотят большего. А в мире BI и аналитики «больше» часто проявляется в форме встраивания, брендинга, индивидуального стиля и доступа и так далее. Что в конечном итоге означает больше работы для разработчиков и больше времени для учета. Поэтому, естественно, возникла потребность в инструментах BI, которые позволят вам иметь все это.
Давайте составим список проблем, с которыми вы можете столкнуться как создатель и сопровождающий этих информационных панелей:
- Вы хотите сделать информационные панели доступными для конечных пользователей или зрителей из вашего собственного приложения или платформы.
- Вы хотите иметь возможность управлять различными коллекциями информационных панелей (например, «интеграциями»)
- Вы хотите иметь возможность предоставлять определенные права пользователя на набор информационных панелей и наборов данных.
- Вы хотите, чтобы пользователи имели доступ только к данным, относящимся к ним
Cumul.io предоставляет инструмент, который мы называем Интеграции который помогает решить эти задачи. В этой статье я расскажу вам, что такое интеграции и как их настроить. Круто то, что для большинства из вышеперечисленных пунктов требуется минимальный код, и по большей части их можно установить в пределах Cumul.io UI.
Немного предыстории — интеграции
An интеграцию в Cumul.io — это структура, определяющая набор информационных панелей, предназначенных для совместного использования (например, в одном приложении). Это также то, что мы используем для вставлять панели в приложение. Другими словами, для встраивания дашбордов в приложение мы даем приложению доступ к той интеграции, которой они принадлежат. Вы можете связать информационные панели с интеграцией и управлять тем, какие права доступа будут у конечных пользователей интеграции к этим информационным панелям и наборам данных, которые они используют. Панель мониторинга может быть частью нескольких интеграций, но у нее могут быть разные права доступа в разных интеграциях. Когда дело доходит до встраивания, существует ряд доступных SDK, которые упрощают жизнь независимо от того, как выглядит ваш стек. 😊
Если у вас есть учетная запись Cumul.io и если вы являетесь «владельцем» организации в Cumul.io, вы сможете управлять и поддерживать все свои интеграции через вкладку «Интеграции». Давайте посмотрим на пример учетной записи Cumul.io. Ниже вы можете увидеть панели мониторинга, которые мог создать один пользователь Cumul.io:
Хотя это все панели мониторинга, которые мог создать этот пользователь, вполне вероятно, что не все панели предназначены для одних и тех же конечных пользователей или приложений, если уж на то пошло. Итак, владелец этой учетной записи Cumul.io будет создавать и поддерживать интеграцию (или больше!) 💪 Давайте посмотрим, как это может выглядеть для них:
Итак, похоже, что владелец этой учетной записи Cumul.io поддерживает два отдельных приложения.
Теперь посмотрим, как будет выглядеть процесс создания интеграции и встраивания ее дашбордов в приложение. Хорошая новость заключается в том, что, как упоминалось ранее, многие шаги, которые вам придется предпринять, можно выполнить в пользовательском интерфейсе Cumul.io.
Отказ от ответственности: для целей этой статьи я сосредоточусь исключительно на части интеграции. Итак, я пропущу все, что связано с созданием и дизайном информационных панелей, и мы начнем с предварительно созданного набора воображаемых информационных панелей.
Что мы будем делать:
Создание интеграции
Для простоты давайте пока создадим только одну интеграцию. Давайте представим, что у нас есть аналитическая платформа, которую мы поддерживаем для нашей компании. Мы хотим предоставить нашим конечным пользователям три инструментальные панели: маркетинговую панель, панель продаж и панель потенциальных клиентов.
Предположим, что из всех панелей мониторинга, которые эта учетная запись создала или к которым имеет доступ, для этого конкретного проекта они хотят использовать только следующие:
Новая интеграция
Чтобы создать интеграцию, мы переходим на вкладку «Интеграции» и выбираем «Новая интеграция». Появившийся диалог уже даст вам некоторое представление о ваших следующих шагах:
Выбор информационных панелей
Далее вы сможете выбрать, какие из ваших информационных панелей будут включены в эту интеграцию. Вы также сможете дать интеграции имя, которое, как я решил, будет «Очень важная интеграция»:
После того, как вы подтвердите свой выбор, у вас будет возможность определить ярлык для каждой панели инструментов (настоятельно рекомендуется). Позже их можно будет использовать при встраивании панелей мониторинга в ваше приложение. Позже вы увидите, что слаги облегчают обращение к информационным панелям в коде внешнего интерфейса, а также упрощают замену информационных панелей при необходимости (поскольку вам не нужно беспокоиться об идентификаторах информационных панелей во внешнем коде).
Права доступа
Затем вы сможете установить права доступа интеграции к наборам данных, которые используют ее информационные панели. Здесь мы устанавливаем значение «Может просматривать». Для получения дополнительной информации о правах доступа и о том, что они влекут за собой, ознакомьтесь с нашим связывание наборов данных с интеграциями:
Фильтры и параметры (и многопользовательский доступ)
Боковое примечание: чтобы помочь с многопользовательским доступом — что имело бы смысл в этой воображаемой настройке — Cumul.io позволяет устанавливать параметры и фильтры для наборов данных, которые использует панель управления. Это означает, что каждый пользователь, который входит в вашу аналитическую платформу, будет видеть на информационных панелях только те данные, к которым у него есть личный доступ. Вы можете себе представить, что в этом сценарии доступ будет зависеть от того, в каком отделе компании работает конечный пользователь. Чтобы узнать больше о том, как настроить мультиарендность с помощью Cumul.io, ознакомьтесь с нашей статьей. «Мультиарендность на панелях управления Cumul.io с Auth0». Это можно сделать в процессе проектирования информационной панели (который мы пропускаем), что упрощает визуализацию того, что делают фильтры. Но здесь мы будем устанавливать эти фильтры в процессе создания интеграции.
Здесь мы устанавливаем фильтры, которые могут потребоваться наборам данных. В этом сценарии, поскольку мы фильтруем на основе отделов пользователей, мы определяем department
параметр и фильтр на основе этого:
И вуаля! Как только вы закончите с их настройкой, вы успешно создали интеграцию. Следующий диалог даст вам инструкции о том, какие будут ваши следующие шаги для внедрения вашей интеграции:
Теперь вы сможете увидеть эту совершенно новую интеграцию на вкладке «Интеграция». Здесь же у вас будет быстрый доступ к идентификатору интеграции, который позже будет использоваться для встраивания панелей мониторинга.
Хорошие новости! После того, как ваша интеграция создана, вы всегда можете ее отредактировать. Вы можете удалять или добавлять информационные панели, изменять ярлыки информационных панелей или права доступа. Таким образом, вам не нужно беспокоиться о создании новых интеграций по мере изменения и развития вашего приложения. А поскольку редактирование интеграции выполняется в пользовательском интерфейсе, вам не нужно беспокоиться о том, чтобы разработчик снова все настроил. Пользователи, не являющиеся техническими специалистами, могут адаптировать эти интеграции на ходу.
Встраивание информационных панелей
Давайте посмотрим, куда мы хотим попасть. Мы хотим предоставить информационные панели в пользовательском приложении. Все просто: пользователь входит в приложение, в приложении есть информационные панели, они видят информационные панели с данными, которые им разрешено просматривать. Например, это может выглядеть следующим образом:
У кого-то было очень конкретное видение того, как они хотели предоставить панели мониторинга конечному пользователю. Им нужна была боковая панель, на которой они могли бы пролистать каждую из информационных панелей. Могло быть и совсем другое. На чем мы сосредоточимся, так это на том, как мы можем встроить эти информационные панели в наше приложение независимо от того, как выглядит основное приложение.
Cumul.io поставляется с набором общедоступных SDK. Здесь я покажу вам, что бы вы сделали, если бы использовали SDK узла. Проверьте наш документы разработчика чтобы узнать, какие другие SDK доступны, и инструкции по их использованию.
Шаг 1. Сгенерируйте токены единого входа для ваших конечных пользователей
Прежде чем вы сможете генерировать токены SSO для своих конечных пользователей, вам необходимо убедиться, что вы создали ключ API и токен в Cumul.io. Вы можете сделать это в своем профиле Cumul.io. Это должен быть владелец организации с доступом к интеграции, которая создает и использует этот ключ API и токен для отправки запроса на авторизацию единого входа. После того, как вы это сделали, давайте сначала создадим клиент Cumul.io, который будет выполняться на стороне сервера приложения:
const Cumulio = require("cumulio"); const client = new Cumulio({ api_key: '<YOUR API KEY>', api_token: '<YOUR API TOKEN>',
});
Теперь мы можем создать токен единого входа для конечного пользователя. Для получения дополнительной информации об этом вызове API и необходимых полях ознакомьтесь с нашим документация разработчика по созданию SSO лексемы.
let promise = client.create('authorization', { integration_id: '<THE INTEGRATION ID>', type: 'sso', expiry: '24 hours', inactivity_interval: '10 minutes', username: '< A unique identifier for your end user >', name: '< end-user name >', email: '< end-user email >', suborganization: '< end-user suborganization >', role: 'viewer', metadata: {}
});
Здесь обратите внимание, как мы добавили необязательный metadata
поле. Здесь вы можете указать параметры и значения, по которым вы хотите фильтровать наборы данных панелей мониторинга. В примере, который мы рассматривали, мы фильтровали на основе отдела, поэтому мы должны добавить это в метаданные. В идеале вы должны получить эту информацию от используемого вами поставщика аутентификации. См подробное объяснение того, как мы сделали это с Auth0.
Этот запрос вернет объект JSON, содержащий идентификатор авторизации и токен, который позже используется в качестве комбинации ключ/токен для встраивания информационных панелей на стороне клиента.
Что-то еще, что вы можете добавить сюда, что довольно круто, — это свойство CSS. Это позволит вам определить индивидуальный внешний вид для каждого пользователя (или группы пользователей). Для того же приложения вот как может выглядеть маркетинговая панель для Анджелины и Брэда:
Шаг 2: Встроить
Там мы немного забежали вперед. Мы создали токены единого входа для конечных пользователей, но еще не встроили информационные панели в приложение. Давайте посмотрим на это. Во-первых, вы должны установить и импортировать Веб-компонент.
import '@cumul.io/cumulio-dashboard';
После импорта компонента вы можете использовать его, как если бы это был HTML-тег. Здесь вы будете встраивать свои информационные панели:
<cumulio-dashboard dashboardId="< a dashboard id >" dashboardSlug="< a dashboard slug >" authKey="< SSO key from step 1 >" authToken="< SSO token from step 1 >">
</cumulio-dashboard>
Здесь у вас будет несколько вариантов. Вы можете указать идентификатор панели мониторинга для любой панели мониторинга, которую вы хотите внедрить, или вы можете указать слаг панели мониторинга, который мы определили в настройках интеграции (именно поэтому я настоятельно рекомендую это сделать, так гораздо удобнее читать). Для получения более подробной информации о том, как встраивать информационные панели, вы также можете ознакомиться с нашим документация для разработчиков.
Хороший способ сделать этот шаг, конечно, просто определить скелет компонента информационной панели в вашем файле HTML и заполнить остальную его часть с клиентской стороны вашего приложения. Я сделал следующее, хотя это, конечно, не единственный способ:
Я добавил компонент панели инструментов с идентификатором dashboard
:
<cumulio-dashboard id="dashboard"></cumulio-dashboard>
Затем я получил этот компонент в клиентском коде следующим образом:
const dashboardElement = document.getElementById("dashboard");
Затем я запрашиваю токен SSO со стороны сервера моего приложения, которое возвращает требуемый ключ и токен для добавления в компонент панели мониторинга. Предположим, у нас есть функция-оболочка getDashboardAuthorizationToken()
который делает это за нас и возвращает ответ на запрос маркера единого входа на стороне сервера. Далее мы просто соответствующим образом заполняем компонент панели мониторинга:
const authorizationToken = await getDashboardAuthorizationToken();
if (authorizationToken.id && authorizationToken.token) { dashboardElement.authToken = authorizationToken.token; dashboardElement.authKey = authorizationToken.id; dashboardElement.dashboardSlug = "marketing|sales|leads";
}
Обратите внимание, как на предыдущих шагах я решил определить слаги для своих информационных панелей, которые являются частью этой интеграции. Это означает, что я могу избежать поиска идентификаторов панели мониторинга и добавления dashboardId
как один из моих параметров dashboardElement
. Вместо этого я могу просто предоставить один из слагов marketing
, sales
or leads
и я сделал! Конечно, вам придется настроить какой-то процесс выбора для вашего приложения, чтобы решить, где и когда вы встраиваете какую панель инструментов.
Вот и все! Мы успешно создали интеграцию в Cumul.io, и с помощью нескольких строк кода мы смогли встроить ее информационные панели в наше приложение 🎉 Теперь представьте себе сценарий, в котором вам нужно поддерживать несколько приложений одновременно, либо для той же компании или отдельных. Каким бы ни был ваш сценарий, я уверен, вы можете себе представить, как, если у вас есть несколько панелей мониторинга, где каждая из них должна находиться в разных местах, и каждая из них должна иметь разные права доступа в зависимости от того, где они находятся, и так далее, и так далее. .. Как это может быстро выйти из-под контроля. Интеграция позволяет вам управлять этим простым и аккуратным способом, все в одном месте и, как вы можете видеть, в основном из пользовательского интерфейса Cumul.io.
Здесь вы можете сделать гораздо больше, что мы не рассмотрели подробно. Например, добавление пользовательских пользовательских тем и CSS. Мы также не рассмотрели, как вы будете задавать параметры и фильтры на информационных панелях или как вы будете использовать их из вашего хост-приложения, чтобы у вас была многопользовательская настройка. Ниже вы можете найти несколько ссылок на полезные руководства и документацию по этим шагам, если вы заинтересованы.
Источник: https://css-tricks.com/embedded-analytics-made-simple-with-cumul-io-integrations/
- '
- "
- &
- 11
- 7
- 9
- 98
- доступ
- Учетная запись
- Действие
- Все
- аналитика
- API
- приложение
- Применение
- Приложения
- гайд
- Аутентификация
- разрешение
- Немного
- брендинг
- строитель
- бизнес
- призывают
- изменение
- код
- Общий
- Сообщества
- Компания
- компонент
- Создающий
- приборная панель
- данным
- Проект
- подробность
- Застройщик
- застройщиков
- раздор
- окончания поездки
- Лицо
- Поля
- фильтры
- First
- Фокус
- форма
- функция
- хорошо
- группы
- здесь
- Как
- How To
- HTTPS
- Людей
- идея
- импортирующий
- info
- информация
- размышления
- интеграции.
- интеграций
- IT
- JavaScript
- Основные
- Список
- Маркетинг
- имена
- неразбавленный
- Новости
- Опция
- Опции
- организация
- Другие контрактные услуги
- владелец
- Платформа
- Произведенный
- Профиль
- Проект
- проектов
- собственность
- Reddit.
- ответ
- ОТДЫХ
- Возвращает
- SaaS
- главная
- смысл
- набор
- установка
- просто
- So
- РЕШАТЬ
- Спонсоров
- мир
- тема
- время
- знак
- Лексемы
- учебные пособия
- ui
- us
- пользователей
- Вид
- видение
- КТО
- в
- слова
- Работа
- работает
- Мир