Перегляньте 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». Це можна зробити в процесі проектування інформаційної панелі (який ми пропускаємо), що полегшує візуалізацію роботи фільтрів. Але тут ми будемо встановлювати ці фільтри в процесі створення інтеграції.
Тут ми встановлюємо фільтри, які можуть знадобитися для наборів даних. У цьому сценарії, коли ми фільтруємо на основі відділів користувачів, ми визначаємо a department
параметр і фільтр на основі цього:
І вуаля! Після того, як ви завершите їх налаштування, ви успішно створили інтеграцію. Наступне діалогове вікно надасть вам інструкції щодо наступних кроків для вбудовування вашої інтеграції:
Тепер ви зможете побачити цю абсолютно нову інтеграцію на вкладці «Інтеграція». Тут ви також матимете швидкий доступ до ідентифікатора інтеграції, який пізніше використовуватиметься для вбудовування інформаційних панелей.
Гарні новини! Після створення інтеграції ви завжди можете редагувати її. Ви можете видалити або додати інформаційні панелі, змінити слаги інформаційних панелей або права доступу. Тож вам не доведеться турбуватися про створення нових інтеграцій, коли ваша програма змінюється та розвивається. А оскільки все редагування інтеграції відбувається в інтерфейсі користувача, вам не потрібно буде турбуватися про те, щоб розробник все налаштував заново. Нетехнічні користувачі можуть адаптувати ці інтеграції на ходу.
Вбудовування інформаційних панелей
Давайте подивимося, куди ми хочемо потрапити. Ми хочемо надати інформаційні панелі в спеціальному додатку. Просто, користувач входить у програму, програма має інформаційні панелі, вони бачать інформаційні панелі з даними, які їм дозволено переглядати. Це може виглядати, наприклад, так:
У когось було дуже конкретне бачення того, як вони хочуть надати інформаційні панелі кінцевому користувачеві. Їм потрібна була бічна панель, на якій можна було б гортати кожну з інформаційних панелей. Це теж могло бути щось зовсім інше. Ми зосередимося на тому, як ми можемо вставити ці інформаційні панелі в нашу програму незалежно від того, як виглядає хост-програма.
Cumul.io поставляється з набором загальнодоступних SDK. Тут я покажу вам, що б ви зробили, якби використовували Node SDK, Ознайомтеся з нашою Документи розробника щоб побачити, які інші SDK доступні, і вказівки щодо їх використання.
Крок 1: Створіть маркери SSO для кінцевих користувачів
Перш ніж ви зможете генерувати токени SSO для своїх кінцевих користувачів, вам потрібно буде переконатися, що ви створили ключ API та токен у Cumul.io. Ви можете зробити це зі свого профілю Cumul.io. Це має бути власник організації, який має доступ до інтеграції, який створює та використовує цей ключ і маркер API для надсилання запиту на авторизацію SSO. Коли ви це зробите, давайте спочатку створимо клієнт Cumul.io, який буде зроблено на серверній стороні програми:
const Cumulio = require("cumulio"); const client = new Cumulio({ api_key: '<YOUR API KEY>', api_token: '<YOUR API TOKEN>',
});
Тепер ми можемо створити маркер SSO для кінцевого користувача. Щоб дізнатися більше про цей виклик 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
поле. Тут ви можете вказати параметри та значення, за якими ви хочете фільтрувати набори даних інформаційних панелей. У прикладі, який ми розглядали, ми фільтрували на основі відділу, тож додаємо це до метаданих. В ідеалі цю інформацію можна отримати від постачальника послуг автентифікації, яким ви користуєтеся. Дивіться a детальне пояснення того, як ми зробили це за допомогою Auth0.
Цей запит поверне об’єкт JSON, який містить ідентифікатор авторизації та маркер, який пізніше використовується як комбінація ключ/токен для вбудовування інформаційних панелей на стороні клієнта.
Щось ще, що ви можете додатково додати сюди, що дуже круто, це властивість CSS. Це дозволить вам визначити індивідуальний вигляд для кожного користувача (або групи користувачів). Для тієї самої програми ось як могла б виглядати маркетингова інформаційна панель для Анджеліни проти Бреда:
Крок 2: Вставити
Там ми трохи заскочили вперед. Ми створили маркери SSO для кінцевих користувачів, але ще не вбудували інформаційні панелі в додаток. Давайте подивимося на це. Спочатку вам слід встановити та імпортувати Веб-компонент.
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()
який робить це за нас і повертає відповідь із серверного запиту маркера SSO. Далі ми просто заповнюємо компонент інформаційної панелі відповідно:
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
- додаток
- додаток
- застосування
- стаття
- Authentication
- авторизації
- Біт
- брендинг
- будівельник
- бізнес
- call
- зміна
- код
- загальний
- спільноти
- компанія
- компонент
- створення
- приладова панель
- дані
- дизайн
- деталь
- Розробник
- розробників
- розбрат
- закінчується
- Особа
- Поля
- Фільтри
- Перший
- Сфокусувати
- форма
- функція
- добре
- Group
- тут
- Як
- How To
- HTTPS
- Людей
- ідея
- імпорт
- інформація
- інформація
- розуміння
- інтеграція
- інтеграцій
- IT
- JavaScript
- ключ
- список
- Маркетинг
- Імена
- нерозбавлений
- новини
- варіант
- Опції
- організація
- Інше
- власник
- платформа
- Вироблений
- профіль
- проект
- проектів
- власність
- відповідь
- REST
- Умови повернення
- SaaS
- продажів
- сенс
- комплект
- установка
- простий
- So
- ВИРІШИТИ
- Рекламні
- світ
- тема
- час
- знак
- Жетони
- навчальні посібники
- ui
- us
- користувачі
- вид
- бачення
- ВООЗ
- в
- слова
- Work
- працює
- світ