Sfoglia le community SaaS su Twitter, LinkedIn, Reddit, Discord, dai un nome e vedrai un tema comune apparire in molti di essi. Questo tema può avere molti nomi: BI, analisi, approfondimenti e così via. È naturale, facciamo affari, raccogliamo dati, abbiamo successo o falliamo. Vogliamo esaminare tutto questo, dare un senso ai dati che abbiamo e agire. Questa esigenza ha prodotto molti progetti e strumenti che rendono la vita di chiunque voglia esaminare i dati un po’ più semplice. Ma quando gli umani hanno, vogliono di più. E nel mondo della BI e dell’analisi, il “di più” spesso si presenta sotto forma di incorporamento, branding, stile e accesso personalizzati e così via. Il che finisce per significare più lavoro per gli sviluppatori e più tempo per renderne conto. Quindi, naturalmente, c'è stata la necessità di strumenti di BI che ti consentissero di avere tutto.
Facciamo un elenco delle sfide che potresti dover affrontare come costruttore e manutentore di questi dashboard:
- Desideri rendere i dashboard disponibili agli utenti finali o ai visualizzatori dalla tua applicazione o piattaforma
- Vuoi essere in grado di gestire diverse raccolte di dashboard (ad esempio "integrazioni")
- Vuoi essere in grado di concedere diritti utente specifici a una raccolta di dashboard e set di dati
- Vuoi assicurarti che gli utenti abbiano accesso solo ai dati rilevanti per loro
cumul.io fornisce uno strumento che chiamiamo Integrazioni che aiuta a risolvere queste sfide. In questo articolo ti spiegherò cosa sono le integrazioni e come configurarne una. La cosa interessante è che per la maggior parte dei punti precedenti è richiesto un codice minimo e per la maggior parte può essere impostato all'interno del file cumul.io UI.
Alcuni retroscena — Integrazioni
An integrazione in Cumul.io è una struttura che definisce una raccolta di dashboard destinati ad essere utilizzati insieme (ad esempio nella stessa applicazione). È anche ciò a cui siamo abituati incastrare dashboard in un'applicazione. In altre parole, per incorporare dashboard in un'applicazione, diamo all'applicazione l'accesso all'integrazione a cui appartiene. È possibile associare dashboard a un'integrazione e amministrare il tipo di diritti di accesso che gli utenti finali dell'integrazione avranno su tali dashboard e sui set di dati che utilizzano. Una dashboard può far parte di più integrazioni, ma può avere diritti di accesso diversi su diverse integrazioni. Quando si tratta di incorporamento, sono disponibili numerosi SDK per semplificarti la vita indipendentemente dall'aspetto del tuo stack. 😊
Una volta che hai un account Cumul.io e se sei un "proprietario" di un'organizzazione in Cumul.io, sarai in grado di gestire e mantenere tutte le tue integrazioni tramite la scheda Integrazioni. Diamo un'occhiata ad un esempio di account Cumul.io. Di seguito puoi vedere le dashboard che un utente Cumul.io potrebbe aver creato:
Sebbene queste siano tutte le dashboard che questo utente potrebbe aver creato, è probabile che non tutte le dashboard siano destinate agli stessi utenti finali o alla stessa applicazione. Quindi, il proprietario di questo account Cumul.io creerebbe e manterrebbe un'integrazione (o più!) 💪 Diamo un'occhiata a come potrebbe apparire per lui:
Quindi, sembra che il proprietario di questo account Cumul.io mantenga due applicazioni separate.
Ora vediamo come sarebbe il processo di creazione di un'integrazione e di incorporamento dei suoi dashboard in un'applicazione. La buona notizia è che, come accennato in precedenza, molti dei passaggi che dovrai eseguire possono essere eseguiti all'interno dell'interfaccia utente di Cumul.io.
Dichiarazione di non responsabilità: ai fini di questo articolo, mi concentrerò esclusivamente sulla parte di integrazione. Quindi tralascerò tutto ciò che ha a che fare con la creazione e la progettazione della dashboard e inizieremo con una serie predefinita di dashboard immaginarie.
Cosa faremo:
Creare un'integrazione
Per semplicità, creiamo per ora solo un'integrazione. Immaginiamo di avere una piattaforma di analisi che manteniamo per la nostra azienda. Vogliamo fornire ai nostri utenti finali tre dashboard: Marketing Dashboard, Sales Dashboard e Leads Dashboard.
Diciamo che tra tutte le dashboard che questo account ha creato o a cui ha accesso, per questo particolare progetto vogliono utilizzare solo le seguenti:
nuova integrazione
Per creare l'integrazione, andiamo alla scheda Integrazioni e selezioniamo Nuova integrazione. La finestra di dialogo che si apre ti darà già un'idea di quali saranno i tuoi prossimi passi:
Selezione di dashboard
Successivamente, potrai selezionare quale delle tue dashboard sarà inclusa in questa integrazione. Potrai anche dare un nome all'integrazione, che qui ho deciso sarà opportunamente "Integrazione molto importante":
Una volta confermata la selezione, avrai la possibilità di definire uno slug per ciascuna dashboard (altamente consigliato). Questi possono essere utilizzati successivamente durante l'incorporamento dei dashboard nell'applicazione. In seguito vedrai che gli slug semplificano il riferimento ai dashboard nel codice front-end e semplificano anche la sostituzione dei dashboard, se necessario (poiché non dovrai preoccuparti degli ID dei dashboard nel codice front-end).
Diritti di accesso
Potrai quindi impostare i diritti di accesso dell'integrazione per i set di dati utilizzati dai suoi dashboard. Qui lo impostiamo su "Può visualizzare". Per maggiori informazioni sui diritti di accesso e cosa comportano, consulta il nostro associare i set di dati alle integrazioni:
Filtri e parametri (e accesso multi-tenant)
Nota a margine: per facilitare l'accesso multi-tenant — che avrebbe senso in questa configurazione immaginaria — Cumul.io consente di impostare parametri e filtri sui set di dati utilizzati da una dashboard. Ciò significa che ogni utente che accede alla tua piattaforma di analisi vedrà solo i dati a cui ha accesso personalmente nei dashboard. Si può immaginare che in questo scenario l'accesso sarebbe basato sul reparto per cui lavora l'utente finale in azienda. Per ulteriori informazioni su come impostare la multi-tenancy con Cumul.io, consulta il nostro articolo, "Multi-tenancy su dashboard Cumul.io con Auth0". Questo può essere fatto all'interno del processo di progettazione del dashboard (che stiamo saltando), il che rende più semplice visualizzare cosa stanno facendo i filtri. Ma qui imposteremo questi filtri nel processo di creazione dell'integrazione.
Qui impostiamo i filtri che i set di dati potrebbero dover avere. In questo scenario, mentre filtriamo in base ai dipartimenti degli utenti, definiamo a department
parametro e filtro in base a quello:
E voilà! Una volta terminata l'impostazione, hai creato con successo un'integrazione. La finestra di dialogo successiva ti fornirà istruzioni su quali saranno i passaggi successivi per incorporare la tua integrazione:
Ora potrai vedere questa nuovissima integrazione nella scheda Integrazione. Da qui avrai anche accesso rapido all'ID di integrazione, che verrà successivamente utilizzato per incorporare i dashboard.
Buone notizie! Dopo aver creato l'integrazione, puoi sempre modificarla. Puoi rimuovere o aggiungere dashboard, modificare gli slug dei dashboard o anche i diritti di accesso. Quindi non devi preoccuparti di creare nuove integrazioni man mano che la tua applicazione cambia e si evolve. E poiché la modifica di un'integrazione avviene interamente all'interno dell'interfaccia utente, non dovrai preoccuparti di chiedere a uno sviluppatore di riconfigurare il tutto. Gli utenti non tecnici possono adattare queste integrazioni mentre sono in movimento.
Incorporamento di dashboard
Vediamo dove vogliamo arrivare. Vogliamo fornire i dashboard all'interno di un'app personalizzata. Semplice, l'utente accede a un'app, l'app ha dashboard, vede i dashboard con i dati che può vedere. Potrebbe essere simile al seguente, ad esempio:
Qualcuno aveva una visione molto specifica su come fornire i dashboard all'utente finale. Volevano una barra laterale in cui poter sfogliare ciascuna dashboard. Avrebbe potuto essere anche qualcosa di completamente diverso. Ciò su cui ci concentreremo è come incorporare questi dashboard nella nostra applicazione indipendentemente dall'aspetto dell'applicazione host.
Cumul.io viene fornito con una serie di SDK disponibili pubblicamente. Qui ti mostrerò cosa faresti se utilizzassi il file SDK del nodo. Scopri la nostra documenti per sviluppatori per vedere quali altri SDK sono disponibili e istruzioni su come utilizzarli.
Passaggio 1: genera token SSO per i tuoi utenti finali
Prima di poter generare token SSO per i tuoi utenti finali, dovrai assicurarti di creare una chiave API e un token in Cumul.io. Puoi farlo dal tuo profilo Cumul.io. Dovrebbe essere il proprietario dell'organizzazione con accesso all'integrazione a creare e utilizzare questa chiave API e token per effettuare la richiesta di autorizzazione SSO. Una volta fatto ciò, creiamo prima un client Cumul.io che verrà eseguito sul lato server dell'applicazione:
const Cumulio = require("cumulio"); const client = new Cumulio({ api_key: '<YOUR API KEY>', api_token: '<YOUR API TOKEN>',
});
Ora possiamo creare il token SSO per l'utente finale. Per ulteriori informazioni su questa chiamata API e sui campi obbligatori, consulta il nostro documentazione per sviluppatori sulla generazione 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: {}
});
Qui, nota come abbiamo aggiunto l'opzionale metadata
campo. Qui è dove puoi fornire i parametri e i valori con cui vuoi filtrare i set di dati delle dashboard. Nell'esempio che abbiamo seguito abbiamo filtrato in base al dipartimento, quindi lo aggiungeremmo ai metadati. Idealmente, dovresti ottenere queste informazioni dal provider di autenticazione che utilizzi. Vedere un spiegazione dettagliata su come abbiamo fatto questo con Auth0.
Questa richiesta restituirà un oggetto JSON che contiene un ID di autorizzazione e un token che verrà successivamente utilizzato come combinazione chiave/token per incorporare i dashboard sul lato client.
Qualcos'altro che puoi aggiungere facoltativamente qui, che è piuttosto interessante, è una proprietà CSS. Ciò ti consentirebbe di definire un aspetto personalizzato per ciascun utente (o gruppo di utenti). Per la stessa applicazione, ecco come potrebbe apparire la dashboard marketing per Angelina vs Brad:
Passaggio 2: incorpora
Lì abbiamo fatto un salto in avanti. Abbiamo creato token SSO per gli utenti finali ma non abbiamo ancora incorporato i dashboard nell'applicazione. Diamo un'occhiata a questo. Per prima cosa, dovresti installare e importare il file Componente Web.
import '@cumul.io/cumulio-dashboard';
Dopo aver importato il componente puoi utilizzarlo come se fosse un tag HTML. Qui è dove incorporerai le tue dashboard:
<cumulio-dashboard dashboardId="< a dashboard id >" dashboardSlug="< a dashboard slug >" authKey="< SSO key from step 1 >" authToken="< SSO token from step 1 >">
</cumulio-dashboard>
Qui avrai alcune opzioni. Puoi fornire l'ID del dashboard per qualsiasi dashboard che desideri incorporare oppure puoi fornire lo slug del dashboard che abbiamo definito nella configurazione dell'integrazione (motivo per cui lo consiglio vivamente, è molto più leggibile farlo in questo modo). Per informazioni più dettagliate su come incorporare i dashboard puoi anche consultare il nostro documentazione per sviluppatori.
Un buon modo per eseguire questo passaggio è ovviamente semplicemente definire lo scheletro del componente dashboard nel file HTML e compilarne il resto dal lato client dell'applicazione. Ho fatto quanto segue, anche se ovviamente non è l'unico modo:
Ho aggiunto il componente dashboard con l'ID dashboard
:
<cumulio-dashboard id="dashboard"></cumulio-dashboard>
Quindi, ho recuperato questo componente nel codice client come segue:
const dashboardElement = document.getElementById("dashboard");
Quindi richiedo il token SSO dal lato server della mia applicazione che restituisce la chiave e il token richiesti da aggiungere al componente dashboard. Supponiamo di avere una funzione wrapper getDashboardAuthorizationToken()
questo fa questo per noi e restituisce la risposta dalla richiesta del token SSO lato server. Successivamente, compiliamo semplicemente il componente dashboard di conseguenza:
const authorizationToken = await getDashboardAuthorizationToken();
if (authorizationToken.id && authorizationToken.token) { dashboardElement.authToken = authorizationToken.token; dashboardElement.authKey = authorizationToken.id; dashboardElement.dashboardSlug = "marketing|sales|leads";
}
Nota come nei passaggi precedenti ho scelto di definire gli slug per le mie dashboard che fanno parte di questa integrazione. Ciò significa che posso evitare di cercare gli ID del dashboard e di aggiungerli dashboardId
come uno dei miei parametri del dashboardElement
. Invece posso semplicemente fornire uno degli slug marketing
, sales
or leads
e ho finito! Ovviamente dovresti impostare una sorta di processo di selezione per la tua applicazione per decidere dove e quando incorporare quale dashboard.
Questo è tutto, gente! Abbiamo creato con successo un'integrazione in Cumul.io e in poche righe di codice siamo stati in grado di incorporare i suoi dashboard nella nostra applicazione 🎉 Ora immagina uno scenario in cui devi mantenere più applicazioni contemporaneamente, sia all'interno stessa azienda o separate. Qualunque sia il tuo scenario, sono sicuro che puoi immaginare come se avessi una serie di dashboard in cui ognuna di esse deve andare in posti diversi e ognuna di esse deve avere diritti di accesso diversi a seconda di dove si trovano e così via. .. Come può sfuggire rapidamente di mano. Le integrazioni ti consentono di gestirlo in modo semplice e ordinato, tutto in un unico posto e, come puoi vedere, principalmente dall'interfaccia utente di Cumul.io.
C'è molto altro che puoi fare qui che non abbiamo esaminato in dettaglio. Come l'aggiunta di temi personalizzati e CSS specifici dell'utente. Inoltre, non abbiamo spiegato come impostare parametri e filtri nei dashboard o come utilizzarli dall'interno dell'applicazione host in modo da avere una configurazione multi-tenant. Di seguito puoi trovare alcuni collegamenti a tutorial e documentazione utili per questi passaggi, se sei interessato.
Fonte: https://css-tricks.com/embedded-analytics-made-simple-with-cumul-io-integrations/
- '
- "
- &
- 11
- 7
- 9
- 98
- accesso
- Il mio account
- Action
- Tutti
- analitica
- api
- App
- Applicazioni
- applicazioni
- articolo
- Autenticazione
- autorizzazione
- Po
- marchio
- costruttore
- affari
- chiamata
- il cambiamento
- codice
- Uncommon
- Comunità
- azienda
- componente
- Creazione
- cruscotto
- dati
- Design
- dettaglio
- Costruttori
- sviluppatori
- discordia
- finisce
- Faccia
- campi
- filtri
- Nome
- Focus
- modulo
- function
- buono
- Gruppo
- qui
- Come
- Tutorial
- HTTPS
- Gli esseri umani
- idea
- importazione
- info
- informazioni
- intuizioni
- integrazione
- integrazioni
- IT
- JavaScript
- Le
- Lista
- Marketing
- nomi
- pulito
- notizie
- Opzione
- Opzioni
- organizzazione
- Altro
- proprietario
- piattaforma
- Prodotto
- Profilo
- progetto
- progetti
- proprietà
- risposta
- REST
- problemi
- SaaS
- vendite
- senso
- set
- regolazione
- Un'espansione
- So
- RISOLVERE
- Sponsored
- il mondo
- tema
- tempo
- token
- Tokens
- esercitazioni
- ui
- us
- utenti
- Visualizza
- visione
- OMS
- entro
- parole
- Lavora
- lavori
- mondo