Durchsuchen Sie die SaaS-Communitys auf Twitter, LinkedIn, Reddit, Discord und vielem mehr und Sie werden feststellen, dass in vielen von ihnen ein gemeinsames Thema auftaucht. Dieses Thema kann viele Namen haben: BI, Analytics, Insights und so weiter. Es ist ganz natürlich, wir machen Geschäfte, sammeln Daten, wir haben Erfolg oder Misserfolg. Wir wollen das alles untersuchen, die Daten, die wir haben, sinnvoll nutzen und Maßnahmen ergreifen. Dieser Bedarf hat viele Projekte und Tools hervorgebracht, die das Leben von jedem, der sich mit den Daten befassen möchte, ein wenig einfacher machen. Aber wenn Menschen es haben, wollen Menschen mehr. Und in der Welt von BI und Analytics kommt „mehr“ oft in Form von Einbettung, Branding, individuellem Design und Zugriff usw. zustande. Das bedeutet letztendlich mehr Arbeit für die Entwickler und mehr Zeit für die Abrechnung. Daher besteht natürlich ein Bedarf an BI-Tools, mit denen Sie alles haben.
Lassen Sie uns eine Liste der Herausforderungen erstellen, denen Sie als Entwickler und Betreuer dieser Dashboards gegenüberstehen könnten:
- Sie möchten die Dashboards Endbenutzern oder Betrachtern innerhalb Ihrer eigenen Anwendung oder Plattform zur Verfügung stellen
- Sie möchten in der Lage sein, verschiedene Dashboard-Sammlungen (d. h. „Integrationen“) zu verwalten.
- Sie möchten einer Sammlung von Dashboards und Datensätzen bestimmte Benutzerrechte gewähren können
- Sie möchten sicherstellen, dass Benutzer nur Zugriff auf die für sie relevanten Daten haben
cumul.io stellt ein Tool bereit, das wir nennen Integration das hilft, diese Herausforderungen zu lösen. In diesem Artikel erkläre ich Ihnen, was Integrationen sind und wie Sie sie einrichten. Das Coole daran ist, dass für die meisten der oben genannten Punkte nur minimaler Code erforderlich ist und der größte Teil innerhalb des festgelegt werden kann cumul.io UI
Einige Hintergrundinformationen: Integrationen
An Integration In Cumul.io handelt es sich um eine Struktur, die eine Sammlung von Dashboards definiert, die zusammen verwendet werden sollen (z. B. in derselben Anwendung). Es ist auch das, was wir gewohnt sind einbetten Dashboards in eine Anwendung. Mit anderen Worten: Um Dashboards in eine Anwendung einzubetten, gewähren wir der Anwendung Zugriff auf die Integration, zu der sie gehören. Sie können einer Integration Dashboards zuordnen und verwalten, welche Art von Zugriffsrechten die Endbenutzer der Integration auf diese Dashboards und die von ihnen verwendeten Datensätze haben. Ein Dashboard kann Teil mehrerer Integrationen sein, es kann jedoch unterschiedliche Zugriffsrechte für verschiedene Integrationen haben. Wenn es um die Einbettung geht, stehen eine Reihe von SDKs zur Verfügung, die Ihnen das Leben einfacher machen, unabhängig davon, wie Ihr Stack aussieht. 😊
Sobald Sie ein Cumul.io-Konto haben und „Eigentümer“ einer Organisation in Cumul.io sind, können Sie alle Ihre Integrationen über die Registerkarte „Integrationen“ verwalten und pflegen. Schauen wir uns ein Beispielkonto für Cumul.io an. Unten sehen Sie die Dashboards, die ein Cumul.io-Benutzer möglicherweise erstellt hat:
Obwohl dies alle Dashboards sind, die dieser Benutzer möglicherweise erstellt hat, ist es wahrscheinlich, dass nicht alle Dashboards für dieselben Endbenutzer oder Anwendungen gedacht sind. Der Besitzer dieses Cumul.io-Kontos würde also eine Integration (oder mehrere!) erstellen und verwalten. 💪 Schauen wir uns an, wie das für ihn aussehen könnte:
Es sieht also so aus, als ob der Besitzer dieses Cumul.io-Kontos zwei separate Anwendungen verwaltet.
Sehen wir uns nun an, wie der Prozess der Erstellung einer Integration und der Einbettung ihrer Dashboards in eine Anwendung aussehen würde. Die gute Nachricht ist, wie bereits erwähnt, dass viele der Schritte, die Sie unternehmen müssen, innerhalb der Cumul.io-Benutzeroberfläche ausgeführt werden können.
Haftungsausschluss: In diesem Artikel werde ich mich ausschließlich auf den Integrationsteil konzentrieren. Deshalb überspringe ich alles, was mit der Erstellung und Gestaltung von Dashboards zu tun hat, und wir beginnen mit einem vorgefertigten Satz imaginärer Dashboards.
Was wir tun werden:
Erstellen einer Integration
Der Einfachheit halber erstellen wir vorerst nur eine Integration. Stellen wir uns vor, wir hätten eine Analyseplattform, die wir für unser Unternehmen pflegen. Wir möchten unseren Endbenutzern drei Dashboards zur Verfügung stellen: das Marketing-Dashboard, das Vertriebs-Dashboard und das Leads-Dashboard.
Nehmen wir an, dass von allen Dashboards, die dieses Konto erstellt hat oder auf die es Zugriff hat, für dieses bestimmte Projekt nur Folgendes verwendet werden soll:
neue Integration
Um die Integration zu erstellen, gehen wir zur Registerkarte „Integrationen“ und wählen „Neue Integration“. Der daraufhin angezeigte Dialog gibt Ihnen bereits eine Vorstellung davon, was Ihre nächsten Schritte sein werden:
Auswählen von Dashboards
Als Nächstes können Sie auswählen, welche Ihrer Dashboards in diese Integration einbezogen werden sollen. Sie können der Integration auch einen Namen geben, der meiner Meinung nach passenderweise „Very Important Integration“ lautet:
Sobald Sie Ihre Auswahl bestätigt haben, haben Sie die Möglichkeit, für jedes Dashboard einen Slug zu definieren (sehr empfehlenswert). Diese können später beim Einbetten der Dashboards in Ihre Anwendung verwendet werden. Später werden Sie sehen, dass Slugs es einfacher machen, Dashboards in Ihrem Front-End-Code zu referenzieren, und dass es bei Bedarf auch einfacher ist, Dashboards zu ersetzen (da Sie sich nicht um Dashboard-IDs im Front-End-Code kümmern müssen).
Zugangsrechte
Anschließend können Sie die Zugriffsrechte der Integration für die Datensätze festlegen, die ihre Dashboards verwenden. Hier setzen wir dies auf „Darf anzeigen“. Weitere Informationen zu Zugriffsrechten und deren Bedeutung finden Sie in unserem Zuordnen von Datensätzen zu Integrationen:
Filter und Parameter (und mandantenfähiger Zugriff)
Randbemerkung: Um den Multi-Tenant-Zugriff zu unterstützen – „was in dieser imaginären Konfiguration sinnvoll wäre“ –, ermöglicht Cumul.io das Festlegen von Parametern und Filtern für Datensätze, die ein Dashboard verwendet. Das bedeutet, dass jeder Benutzer, der sich bei Ihrer Analyseplattform anmeldet, in den Dashboards nur die Daten sieht, auf die er persönlich Zugriff hat. Sie können sich vorstellen, dass der Zugriff in diesem Szenario davon abhängt, für welche Abteilung der Endbenutzer im Unternehmen arbeitet. Weitere Informationen zum Einrichten der Mandantenfähigkeit mit Cumul.io finden Sie in unserem Artikel: „Multi-Tenancy auf Cumul.io-Dashboards mit Auth0“. Dies kann innerhalb des Dashboard-Designprozesses erfolgen (den wir überspringen), wodurch es einfacher ist, zu visualisieren, was die Filter tun. Aber hier werden wir diese Filter im Integrationserstellungsprozess festlegen.
Hier legen wir die Filter fest, die die Datensätze möglicherweise haben müssen. In diesem Szenario definieren wir beim Filtern nach den Abteilungen der Benutzer eine department
Parameter und Filter basierend darauf:
Und voilà! Sobald Sie mit dem Festlegen dieser Einstellungen fertig sind, haben Sie erfolgreich eine Integration erstellt. Im nächsten Dialog erhalten Sie Anweisungen zu Ihren nächsten Schritten zur Einbettung Ihrer Integration:
Jetzt können Sie diese brandneue Integration auf der Registerkarte „Integration“ sehen. Dort haben Sie auch schnellen Zugriff auf die Integrations-ID, die später für die Einbettung der Dashboards verwendet wird.
Gute Nachrichten! Nachdem Ihre Integration erstellt wurde, können Sie sie jederzeit bearbeiten. Sie können Dashboards entfernen oder hinzufügen, die Slugs von Dashboards oder Zugriffsrechte ändern. Sie müssen sich also keine Gedanken über die Erstellung neuer Integrationen machen, wenn sich Ihre Anwendung ändert und weiterentwickelt. Und da die Bearbeitung einer Integration vollständig über die Benutzeroberfläche erfolgt, müssen Sie sich keine Sorgen machen, dass ein Entwickler alles erneut einrichten muss. Auch technisch nicht versierte Benutzer können diese Integrationen unterwegs anpassen.
Einbetten von Dashboards
Mal sehen, wo wir hinwollen. Wir möchten die Dashboards innerhalb einer benutzerdefinierten App bereitstellen. Ganz einfach: Benutzer melden sich bei einer App an, die App verfügt über Dashboards, sie sehen die Dashboards mit den Daten, die sie sehen dürfen. Es könnte zum Beispiel so aussehen:
Jemand hatte eine ganz bestimmte Vorstellung davon, wie er die Dashboards dem Endbenutzer bereitstellen wollte. Sie wollten eine Seitenleiste, in der sie durch jedes der Dashboards blättern konnten. Es hätte auch etwas ganz anderes sein können. Wir werden uns darauf konzentrieren, wie wir diese Dashboards in unsere Anwendung einbetten können, unabhängig davon, wie die Hostanwendung aussieht.
Cumul.io wird mit einer Reihe öffentlich verfügbarer SDKs geliefert. Hier zeige ich Ihnen, was Sie tun würden, wenn Sie das verwenden würden Knoten-SDK. Schauen Sie sich unsere Entwicklerdokumentation um zu sehen, welche anderen SDKs verfügbar sind und Anweisungen zu deren Verwendung.
Schritt 1: Generieren Sie SSO-Tokens für Ihre Endbenutzer
Bevor Sie SSO-Tokens für Ihre Endbenutzer generieren können, müssen Sie sicherstellen, dass Sie in Cumul.io einen API-Schlüssel und ein Token erstellen. Sie können dies über Ihr Cumul.io-Profil tun. Es sollte der Organisationseigentümer mit Zugriff auf die Integration sein, der diesen API-Schlüssel und das Token erstellt und verwendet, um die SSO-Autorisierungsanfrage zu stellen. Sobald Sie dies getan haben, erstellen wir zunächst einen Cumul.io-Client, der auf der Serverseite der Anwendung erfolgen würde:
const Cumulio = require("cumulio"); const client = new Cumulio({ api_key: '<YOUR API KEY>', api_token: '<YOUR API TOKEN>',
});
Jetzt können wir das SSO-Token für den Endbenutzer erstellen. Weitere Informationen zu diesem API-Aufruf und den erforderlichen Feldern finden Sie in unserem Entwicklerdokumentation zum Generieren SSO Token.
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: {}
});
Beachten Sie hier, wie wir das optionale hinzugefügt haben metadata
Feld. Hier können Sie die Parameter und Werte angeben, nach denen Sie die Datensätze der Dashboards filtern möchten. In dem Beispiel, das wir durchgegangen sind, haben wir nach Abteilung gefiltert, sodass wir diese den Metadaten hinzufügen würden. Idealerweise erhalten Sie diese Informationen von dem von Ihnen verwendeten Authentifizierungsanbieter. Ein ... sehen Ausführliche Erklärung, wie wir dies mit Auth0 gemacht haben.
Diese Anfrage gibt ein JSON-Objekt zurück, das eine Autorisierungs-ID und ein Token enthält, die später als Schlüssel/Token-Kombination zum Einbetten von Dashboards auf der Clientseite verwendet werden.
Etwas anderes, das Sie hier optional hinzufügen können, was ziemlich cool ist, ist eine CSS-Eigenschaft. Dies würde es Ihnen ermöglichen, für jeden Benutzer (oder jede Benutzergruppe) ein individuelles Erscheinungsbild zu definieren. Für die gleiche Anwendung könnte das Marketing-Dashboard für Angelina vs. Brad so aussehen:
Schritt 2: Einbetten
Da haben wir einen kleinen Vorsprung. Wir haben SSO-Tokens für Endbenutzer erstellt, die Dashboards jedoch noch nicht tatsächlich in die Anwendung eingebettet. Werfen wir einen Blick darauf. Zuerst sollten Sie das installieren und importieren Webkomponente.
import '@cumul.io/cumulio-dashboard';
Nach dem Importieren der Komponente können Sie diese wie ein HTML-Tag verwenden. Hier betten Sie Ihre Dashboards ein:
<cumulio-dashboard dashboardId="< a dashboard id >" dashboardSlug="< a dashboard slug >" authKey="< SSO key from step 1 >" authToken="< SSO token from step 1 >">
</cumulio-dashboard>
Hier haben Sie einige Möglichkeiten. Sie können entweder die Dashboard-ID für jedes Dashboard angeben, das Sie einbetten möchten, oder Sie können den Dashboard-Slug bereitstellen, den wir im Integrations-Setup definiert haben (weshalb ich dies wärmstens empfehle, da es auf diese Weise viel besser lesbar ist). Ausführlichere Informationen zum Einbetten von Dashboards finden Sie auch in unserer Entwicklerdokumentation.
Eine gute Möglichkeit, diesen Schritt durchzuführen, besteht natürlich darin, einfach das Grundgerüst der Dashboard-Komponente in Ihrer HTML-Datei zu definieren und den Rest von der Clientseite Ihrer Anwendung aus auszufüllen. Ich habe Folgendes getan, obwohl es natürlich nicht die einzige Möglichkeit ist:
Ich habe die Dashboard-Komponente mit der ID hinzugefügt dashboard
:
<cumulio-dashboard id="dashboard"></cumulio-dashboard>
Dann habe ich diese Komponente im Client-Code wie folgt abgerufen:
const dashboardElement = document.getElementById("dashboard");
Dann fordere ich das SSO-Token von der Serverseite meiner Anwendung an, die den erforderlichen Schlüssel und das Token zum Hinzufügen zur Dashboard-Komponente zurückgibt. Nehmen wir an, wir haben eine Wrapper-Funktion getDashboardAuthorizationToken()
Das erledigt dies für uns und gibt die Antwort der serverseitigen SSO-Token-Anfrage zurück. Als nächstes füllen wir einfach die Dashboard-Komponente entsprechend aus:
const authorizationToken = await getDashboardAuthorizationToken();
if (authorizationToken.id && authorizationToken.token) { dashboardElement.authToken = authorizationToken.token; dashboardElement.authKey = authorizationToken.id; dashboardElement.dashboardSlug = "marketing|sales|leads";
}
Beachten Sie, dass ich mich in den vorherigen Schritten dafür entschieden habe, Slugs für meine Dashboards zu definieren, die Teil dieser Integration sind. Dadurch kann ich mir das Nachschlagen und Hinzufügen von Dashboard-IDs ersparen dashboardId
als einer meiner Parameter des dashboardElement
. Stattdessen kann ich einfach eine der Schnecken bereitstellen marketing
, sales
or leads
und ich bin fertig! Natürlich müssten Sie für Ihre Anwendung eine Art Auswahlprozess einrichten, um zu entscheiden, wo und wann Sie welches Dashboard einbetten.
Das ist es, Leute! Wir haben erfolgreich eine Integration in Cumul.io erstellt und konnten mit wenigen Codezeilen deren Dashboards in unsere Anwendung einbetten. 🎉 Stellen Sie sich nun ein Szenario vor, in dem Sie mehrere Anwendungen gleichzeitig verwalten müssen, entweder für oder innerhalb der dasselbe Unternehmen oder getrennte Unternehmen. Was auch immer Ihr Szenario sein mag, Sie können sich sicher vorstellen, dass Sie mehrere Dashboards haben, bei denen jedes an einen anderen Ort gehen muss und jeder von ihnen unterschiedliche Zugriffsrechte haben muss, je nachdem, wo er sich befindet, und so weiter und so weiter .. Wie es schnell außer Kontrolle geraten kann. Mithilfe von Integrationen können Sie dies auf einfache und übersichtliche Weise verwalten, alles an einem Ort und, wie Sie sehen, größtenteils über die Benutzeroberfläche von Cumul.io.
Hier können Sie noch viel mehr tun, auf das wir nicht im Detail eingegangen sind. Zum Beispiel das Hinzufügen benutzerspezifischer benutzerdefinierter Designs und CSS. Wir sind auch nicht darauf eingegangen, wie Sie Parameter und Filter in Dashboards festlegen oder wie Sie diese in Ihrer Host-Anwendung verwenden, damit Sie über eine mandantenfähige Einrichtung verfügen. Nachfolgend finden Sie bei Interesse einige Links zu nützlichen Tutorials und Dokumentationen für diese Schritte.
Quelle: https://css-tricks.com/embedded-analytics-made-simple-with-cumul-io-integrations/
- '
- "
- &
- 11
- 7
- 9
- 98
- Zugang
- Konto
- Action
- Alle
- Analytik
- Bienen
- App
- Anwendung
- Anwendungen
- Artikel
- Authentifizierung
- Genehmigung
- Bit
- Branding
- Baumeister
- Geschäft
- rufen Sie uns an!
- Übernehmen
- Code
- gemeinsam
- Communities
- Unternehmen
- Komponente
- Erstellen
- Armaturenbrett
- technische Daten
- Design
- Detail
- Entwickler:in / Unternehmen
- Entwickler
- Zwietracht
- endet
- Gesicht
- Felder
- Filter
- Vorname
- Setzen Sie mit Achtsamkeit
- unten stehende Formular
- Funktion
- gut
- Gruppe an
- hier
- Ultraschall
- Hilfe
- HTTPS
- Humans
- Idee
- Einfuhr
- Info
- Information
- Einblicke
- Integration
- Integrationen
- IT
- JavaScript
- Wesentliche
- Liste
- Marketing
- Namen
- Ordentlich
- News
- Option
- Optionen
- Organisation
- Andere
- Eigentümer
- Plattform
- Produziert
- Profil
- Projekt
- Projekte
- Resorts
- Antwort
- REST
- Rückgabe
- SaaS
- Vertrieb
- Sinn
- kompensieren
- Einstellung
- Einfacher
- So
- LÖSEN
- Sponsored
- die Welt
- Thema
- Zeit
- Zeichen
- Tokens
- Tutorials
- ui
- us
- Nutzer
- Anzeigen
- Seh-
- WHO
- .
- Worte
- Arbeiten
- Werk
- weltweit wie ausgehandelt und gekauft ausgeführt wird.