Przeglądaj społeczności SaaS na Twitterze, LinkedIn, Reddit, Discord, a zobaczysz, że w wielu z nich pojawia się wspólny motyw. Temat ten może mieć wiele nazw: BI, analityka, spostrzeżenia i tak dalej. To naturalne, robimy interesy, zbieramy dane, odnosimy sukcesy lub porażki. Chcemy się temu wszystkiemu przyjrzeć, nadać sens posiadanym danym i podjąć działania. Ta potrzeba zaowocowała wieloma projektami i narzędziami, które ułatwiają życie każdemu, kto chce zajrzeć do danych. Ale kiedy ludzie mają, ludzie chcą więcej. A w świecie BI i analityki „więcej” często ma postać osadzania, brandingu, dostosowanej stylizacji i dostępu itd. Co ostatecznie oznacza więcej pracy dla programistów i więcej czasu na rozliczenie. Naturalnie pojawiło się więc zapotrzebowanie na narzędzia BI, które pozwolą Ci mieć to wszystko.
Zróbmy listę wyzwań, przed którymi możesz stanąć jako twórca i opiekun tych pulpitów nawigacyjnych:
- Chcesz udostępnić pulpity nawigacyjne użytkownikom końcowym lub przeglądającym z poziomu własnej aplikacji lub platformy
- Chcesz mieć możliwość zarządzania różnymi kolekcjami dashboardów (tj. „integracjami”)
- Chcesz mieć możliwość nadawania określonych praw użytkownika do kolekcji pulpitów nawigacyjnych i zestawów danych
- Chcesz mieć pewność, że użytkownicy mają dostęp tylko do danych, które ich dotyczą
cumul.io zapewnia narzędzie, które nazywamy Integracje co pomaga rozwiązać te wyzwania. W tym artykule wyjaśnię, czym są integracje i jak je skonfigurować. Fajną rzeczą jest to, że w przypadku większości powyższych punktów wymagany jest minimalny kod i w większości można go ustawić w cumul.io UI.
Pewne tło — integracje
An Integracja w Cumul.io jest strukturą definiującą zbiór dashboardów przeznaczonych do wspólnego użytku (np. w tej samej aplikacji). Jest to również to, do czego przywykliśmy osadzać pulpity nawigacyjne w aplikacji. Innymi słowy, aby osadzić pulpity nawigacyjne w aplikacji, dajemy aplikacji dostęp do integracji, do której należą. Pulpity nawigacyjne można powiązać z integracją i administrować rodzajem praw dostępu, jakie użytkownicy końcowi integracji będą mieli do tych pulpitów nawigacyjnych i używanych przez nich zestawów danych. Pulpit nawigacyjny może być częścią wielu integracji, ale może mieć różne prawa dostępu do różnych integracji. Jeśli chodzi o osadzanie, dostępnych jest wiele zestawów SDK, które upraszczają życie niezależnie od tego, jak wygląda Twój stos. 😊
Gdy masz już konto Cumul.io i jesteś „właścicielem” organizacji w Cumul.io, będziesz mógł zarządzać i utrzymywać wszystkie swoje integracje za pośrednictwem zakładki Integracje. Rzućmy okiem na przykładowe konto Cumul.io. Poniżej możesz zobaczyć pulpity nawigacyjne, które mógł utworzyć jeden użytkownik Cumul.io:
Chociaż są to wszystkie pulpity nawigacyjne utworzone przez tego użytkownika, prawdopodobnie nie wszystkie pulpity nawigacyjne są przeznaczone dla tych samych użytkowników końcowych lub aplikacji. Tak więc właściciel tego konta Cumul.io stworzyłby i utrzymywał integrację (lub więcej!) 💪 Zobaczmy, jak może to wyglądać dla niego:
Wygląda więc na to, że właściciel tego konta Cumul.io obsługuje dwie oddzielne aplikacje.
Zobaczmy teraz, jak wyglądałby proces tworzenia integracji i osadzania jej dashboardów w aplikacji. Dobrą wiadomością jest to, jak wspomniano wcześniej, wiele kroków, które będziesz musiał wykonać, można wykonać w interfejsie użytkownika Cumul.io.
Zastrzeżenie: Na potrzeby tego artykułu skupię się wyłącznie na części dotyczącej integracji. Pominę więc wszystko, co ma związek z tworzeniem i projektowaniem pulpitów nawigacyjnych i zaczniemy od gotowego zestawu wyimaginowanych pulpitów nawigacyjnych.
Co będziemy robić:
Tworzenie integracji
Dla uproszczenia utwórzmy na razie tylko jedną integrację. Wyobraźmy sobie, że mamy platformę analityczną, którą utrzymujemy dla naszej firmy. Istnieją trzy dashboardy, które chcemy udostępnić naszym użytkownikom końcowym: Marketing Dashboard, Sales Dashboard i Leads Dashboard.
Załóżmy, że ze wszystkich pulpitów nawigacyjnych, które to konto utworzyło lub do których ma dostęp, w tym konkretnym projekcie chcą używać tylko następujących:
Nowa integracja
Aby utworzyć integrację przechodzimy do zakładki Integracje i wybieramy Nowa Integracja. Okno dialogowe, które się pojawi, da ci już pewne wyobrażenie o tym, jakie będą twoje następne kroki:
Wybieranie pulpitów nawigacyjnych
Następnie będziesz mógł wybrać, które z Twoich pulpitów nawigacyjnych zostaną uwzględnione w tej integracji. Będziesz także mógł nadać Integracji nazwę, która tutaj, jak zdecydowałem, będzie odpowiednio „Bardzo ważna integracja”:
Po potwierdzeniu wyboru będziesz mieć możliwość zdefiniowania ślimaka dla każdego pulpitu nawigacyjnego (wysoce zalecane). Można ich później użyć podczas osadzania pulpitów nawigacyjnych w aplikacji. Później przekonasz się, że ślimaki ułatwiają odwoływanie się do pulpitów nawigacyjnych w kodzie frontonu, a także ułatwiają wymianę pulpitów nawigacyjnych w razie potrzeby (ponieważ nie będziesz musiał martwić się o identyfikatory pulpitów nawigacyjnych w kodzie frontonu).
Prawa dostępu
Następnie będziesz mógł ustawić prawa dostępu integracji do zestawów danych, z których korzystają jej pulpity nawigacyjne. Tutaj ustawiamy to na „Może wyświetlać”. Aby uzyskać więcej informacji na temat praw dostępu i tego, co się z nimi wiąże, sprawdź nasze kojarzenie zbiorów danych z integracjami:
Filtry i parametry (oraz dostęp dla wielu dzierżawców)
Uwaga dodatkowa: aby pomóc w dostępie dla wielu najemców — co miałoby sens w tej wyimaginowanej konfiguracji — Cumul.io umożliwia ustawianie parametrów i filtrów w zestawach danych używanych przez pulpit nawigacyjny. Oznacza to, że każdy użytkownik logujący się do Twojej platformy analitycznej zobaczy w kokpitach tylko te dane, do których ma dostęp. Można sobie wyobrazić, że w tym scenariuszu dostęp byłby oparty na dziale, w którym pracuje użytkownik końcowy w firmie. Aby uzyskać więcej informacji na temat konfigurowania wielu najemców za pomocą Cumul.io, zapoznaj się z naszym artykułem, „Multi-Tenancy na pulpitach nawigacyjnych Cumul.io z Auth0”. Można to zrobić w ramach procesu projektowania pulpitu nawigacyjnego (który pomijamy), co ułatwia wizualizację działania filtrów. Ale tutaj będziemy ustawiać te filtry w procesie tworzenia integracji.
W tym miejscu ustawiamy filtry, które mogą wymagać zestawów danych. W tym scenariuszu, podczas filtrowania na podstawie działów użytkowników, definiujemy a department
parametr i filtr na podstawie tego:
I voila! Gdy skończysz je ustawiać, pomyślnie utworzyłeś integrację. W następnym oknie dialogowym znajdziesz instrukcje dotyczące kolejnych kroków związanych z osadzeniem integracji:
Teraz będziesz mógł zobaczyć tę zupełnie nową integrację na karcie Integracja. Tutaj również uzyskasz szybki dostęp do Identyfikatora integracji, który później posłuży do osadzania dashboardów.
Dobre wieści! Po utworzeniu Integracji zawsze możesz ją edytować. Możesz usuwać lub dodawać pulpity nawigacyjne, zmieniać ślimaki pulpitów nawigacyjnych lub prawa dostępu. Nie musisz się więc martwić o tworzenie nowych integracji w miarę zmian i ewolucji aplikacji. A ponieważ edycja integracji odbywa się w interfejsie użytkownika, nie musisz się martwić, że programista skonfiguruje to wszystko od nowa. Użytkownicy nietechniczni mogą dostosowywać te integracje w dowolnym miejscu.
Osadzanie pulpitów nawigacyjnych
Zobaczmy, dokąd chcemy dojść. Chcemy udostępnić pulpity nawigacyjne w ramach niestandardowej aplikacji. Proste, użytkownik loguje się do aplikacji, aplikacja ma pulpity nawigacyjne, widzą pulpity nawigacyjne z danymi, które mogą zobaczyć. Może to wyglądać na przykład tak:
Ktoś miał bardzo konkretną wizję, w jaki sposób chciał udostępnić pulpity nawigacyjne użytkownikowi końcowemu. Chcieli mieć pasek boczny, na którym mogliby przeglądać każdy z pulpitów nawigacyjnych. Mogło też być coś zupełnie innego. Skupimy się na tym, jak możemy osadzić te pulpity nawigacyjne w naszej aplikacji, niezależnie od tego, jak wygląda aplikacja hosta.
Cumul.io jest dostarczany z zestawem publicznie dostępnych SDK. Tutaj pokażę ci, co byś zrobił, gdybyś użył Zestaw SDK węzła, Sprawdź nasze dokumentacja programisty aby zobaczyć, jakie inne zestawy SDK są dostępne i instrukcje, jak z nich korzystać.
Krok 1: Wygeneruj tokeny SSO dla użytkowników końcowych
Zanim będziesz mógł wygenerować tokeny SSO dla swoich użytkowników końcowych, musisz upewnić się, że utworzyłeś klucz API i token w Cumul.io. Możesz to zrobić ze swojego profilu Cumul.io. Powinien to być właściciel organizacji z dostępem do integracji, który tworzy i używa tego klucza API i tokena, aby wysłać żądanie autoryzacji SSO. Gdy już to zrobisz, najpierw stwórzmy klienta Cumul.io, który zostanie wykonany po stronie serwera aplikacji:
const Cumulio = require("cumulio"); const client = new Cumulio({ api_key: '<YOUR API KEY>', api_token: '<YOUR API TOKEN>',
});
Teraz możemy utworzyć token SSO dla użytkownika końcowego. Aby uzyskać więcej informacji na temat tego wywołania API i wymaganych pól, sprawdź nasze dokumentacja deweloperska dotycząca generowania SSO tokeny.
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: {}
});
Tutaj zwróć uwagę, jak dodaliśmy opcję metadata
pole. W tym miejscu możesz podać parametry i wartości, według których chcesz filtrować zestawy danych pulpitów nawigacyjnych. W omawianym przykładzie filtrowaliśmy na podstawie działu, więc dodalibyśmy to do metadanych. Najlepiej byłoby uzyskać te informacje od dostawcy uwierzytelniania, z którego korzystasz. Zobacz szczegółowe wyjaśnienie, jak to zrobiliśmy z Auth0.
To żądanie zwróci obiekt JSON zawierający identyfikator autoryzacji i token, który jest później używany jako kombinacja klucz/token do osadzania pulpitów nawigacyjnych po stronie klienta.
Coś jeszcze, co możesz tutaj dodać, co jest całkiem fajne, to właściwość CSS. Umożliwiłoby to zdefiniowanie niestandardowego wyglądu i sposobu działania dla każdego użytkownika (lub grupy użytkowników). W przypadku tej samej aplikacji tak mógłby wyglądać Pulpit Marketingowy dla Angelina vs Brad:
Krok 2: Osadź
Tam skoczyliśmy trochę do przodu. Stworzyliśmy tokeny SSO dla użytkowników końcowych, ale nie osadziliśmy jeszcze pulpitów nawigacyjnych w aplikacji. Spójrzmy na to. Najpierw należy zainstalować i zaimportować plik Komponent sieciowy.
import '@cumul.io/cumulio-dashboard';
Po zaimportowaniu komponentu możesz go używać tak, jakby był tagiem HTML. Tutaj osadzasz swoje pulpity nawigacyjne:
<cumulio-dashboard dashboardId="< a dashboard id >" dashboardSlug="< a dashboard slug >" authKey="< SSO key from step 1 >" authToken="< SSO token from step 1 >">
</cumulio-dashboard>
Tutaj będziesz mieć kilka opcji. Możesz podać identyfikator pulpitu nawigacyjnego dla dowolnego pulpitu nawigacyjnego, który chcesz osadzić, lub możesz podać ślimak pulpitu nawigacyjnego, który zdefiniowaliśmy w konfiguracji integracji (dlatego bardzo to polecam, robienie tego w ten sposób jest o wiele bardziej czytelne). Aby uzyskać bardziej szczegółowe informacje na temat osadzania pulpitów nawigacyjnych, możesz również sprawdzić nasze dokumentacja programisty.
Dobrym sposobem na wykonanie tego kroku jest oczywiście zdefiniowanie szkieletu komponentu pulpitu nawigacyjnego w pliku HTML i wypełnienie reszty po stronie klienta aplikacji. Zrobiłem co następuje, chociaż oczywiście nie jest to jedyny sposób:
Dodałem komponent pulpitu nawigacyjnego z identyfikatorem dashboard
:
<cumulio-dashboard id="dashboard"></cumulio-dashboard>
Następnie pobrałem ten komponent w kodzie klienta w następujący sposób:
const dashboardElement = document.getElementById("dashboard");
Następnie żądam tokena SSO od strony serwera mojej aplikacji, która zwraca wymagany klucz i token do dodania do komponentu pulpitu nawigacyjnego. Załóżmy, że mamy funkcję opakowania getDashboardAuthorizationToken()
który robi to za nas i zwraca odpowiedź z żądania tokena SSO po stronie serwera. Następnie po prostu odpowiednio wypełniamy komponent deski rozdzielczej:
const authorizationToken = await getDashboardAuthorizationToken();
if (authorizationToken.id && authorizationToken.token) { dashboardElement.authToken = authorizationToken.token; dashboardElement.authKey = authorizationToken.id; dashboardElement.dashboardSlug = "marketing|sales|leads";
}
Zwróć uwagę, jak w poprzednich krokach zdecydowałem się zdefiniować slugi dla moich dashboardów, które są częścią tej integracji. Oznacza to, że mogę uniknąć wyszukiwania identyfikatorów pulpitu nawigacyjnego i dodawania dashboardId
jako jeden z moich parametrów dashboardElement
. Zamiast tego mogę po prostu dostarczyć jeden ze ślimaków marketing
, sales
or leads
i skończyłem! Oczywiście musiałbyś skonfigurować jakiś proces selekcji do swojej aplikacji, aby zdecydować, gdzie i kiedy osadzić który pulpit nawigacyjny.
To wszystko! Z powodzeniem stworzyliśmy Integrację w Cumul.io i w kilku liniach kodu mogliśmy osadzić jej pulpity nawigacyjne w naszej aplikacji 🎉 Teraz wyobraź sobie scenariusz, w którym musisz obsługiwać wiele aplikacji jednocześnie, albo w ramach tej samej firmy lub osobnych. Niezależnie od twojego scenariusza, jestem pewien, że możesz sobie wyobrazić, jak masz kilka pulpitów nawigacyjnych, z których każdy musi przejść do różnych miejsc i każdy z nich musi mieć różne prawa dostępu w zależności od tego, gdzie się znajduje i idziemy dalej .. Jak to szybko może wymknąć się spod kontroli. Integracje pozwalają zarządzać tym w prosty i schludny sposób, wszystko w jednym miejscu i jak widać, głównie z poziomu interfejsu użytkownika Cumul.io.
Jest o wiele więcej rzeczy, które możesz tutaj zrobić, a których nie omówiliśmy szczegółowo. Takie jak dodawanie niestandardowych motywów użytkownika i CSS. Nie omówiliśmy również sposobu ustawiania parametrów i filtrów w pulpitach nawigacyjnych ani sposobu ich używania z poziomu aplikacji hosta, aby mieć konfigurację z wieloma dzierżawcami. Poniżej znajdziesz kilka linków do przydatnych samouczków i dokumentacji dla tych kroków, jeśli jesteś zainteresowany.
Źródło: https://css-tricks.com/embedded-analytics-made-simple-with-cumul-io-integrations/
- '
- "
- &
- 11
- 7
- 9
- 98
- dostęp
- Konto
- Działania
- Wszystkie kategorie
- analityka
- api
- Aplikacja
- Zastosowanie
- aplikacje
- artykuł
- Uwierzytelnianie
- autoryzacja
- Bit
- branding
- budowniczy
- biznes
- wezwanie
- zmiana
- kod
- wspólny
- społeczności
- sukcesy firma
- składnik
- Tworzenie
- tablica rozdzielcza
- dane
- Wnętrze
- detal
- Deweloper
- deweloperzy
- niezgoda
- kończy się
- Twarz
- Łąka
- filtry
- i terminów, a
- Skupiać
- Nasz formularz
- funkcjonować
- dobry
- Zarządzanie
- tutaj
- W jaki sposób
- How To
- HTTPS
- Ludzie
- pomysł
- importowanie
- Informacje
- Informacja
- spostrzeżenia
- integracja
- integracje
- IT
- JAVASCRIPT
- Klawisz
- Lista
- Marketing
- Nazwy
- Schludny
- aktualności
- Option
- Opcje
- organizacja
- Inne
- właściciel
- Platforma
- Wytworzony
- Profil
- projekt
- projektowanie
- własność
- odpowiedź
- REST
- powraca
- SaaS
- sole
- rozsądek
- zestaw
- ustawienie
- Prosty
- So
- ROZWIĄZANIA
- Łącza
- świat
- motyw
- czas
- żeton
- Żetony
- tutoriale
- i twitterze
- ui
- us
- Użytkownicy
- Zobacz i wysłuchaj
- wizja
- KIM
- w ciągu
- słowa
- Praca
- działa
- świat