Bläddra igenom SaaS-communities på Twitter, LinkedIn, Reddit, Discord, you name it och du kommer att se ett gemensamt tema dyka upp i många av dem. Det temat kan gå under många namn: BI, analys, insikter och så vidare. Det är naturligt, vi gör affärer, samlar in data, vi lyckas eller misslyckas. Vi vill undersöka allt detta, få lite känsla för de data vi har och vidta åtgärder. Detta behov har producerat många projekt och verktyg som gör livet lite enklare för alla som vill titta på data. Men när människor har, vill människor ha mer. Och i en värld av BI och analys kommer "mer" ofta i form av inbäddning, varumärke, anpassad styling och åtkomst och så vidare. Vilket i slutändan innebär mer arbete för utvecklare och mer tid att redogöra för. Så naturligtvis har det funnits ett behov av BI-verktyg som låter dig ha allt.
Låt oss göra en lista över utmaningar som du kan möta som byggare och underhållare av dessa instrumentpaneler:
- Du vill göra instrumentpanelerna tillgängliga för slutanvändare eller tittare från din egen applikation eller plattform
- Du vill kunna hantera olika instrumentpanelsamlingar (dvs. "integrationer")
- Du vill kunna ge specifika användarrättigheter till en samling instrumentpaneler och datauppsättningar
- Du vill se till att användarna har tillgång till data som endast är relevanta för dem
Cumul.io ger ett verktyg vi kallar integrationer som hjälper till att lösa dessa utmaningar. I den här artikeln går jag igenom vad integrationer är och hur du konfigurerar en. Det häftiga är att för de flesta av punkterna ovan krävs minimal kod och för det mesta kan den ställas in inom Cumul.io UI.
Lite bakgrund — integrationer
An Integration i Cumul.io är en struktur som definierar en samling instrumentpaneler avsedda att användas tillsammans (t.ex. i samma applikation). Det är också vad vi brukar embed instrumentpaneler till en applikation. Med andra ord, för att bädda in instrumentpaneler i en applikation ger vi applikationen tillgång till den integration som de tillhör. Du kan associera instrumentpaneler till en integration och administrera vilken typ av åtkomsträttigheter slutanvändarna av integrationen kommer att ha på dessa instrumentpaneler och de datauppsättningar de använder. En instrumentpanel kan vara en del av flera integrationer, men den kan ha olika åtkomsträttigheter på olika integrationer. När det kommer till inbäddning finns det ett antal SDK:er tillgängliga för att göra livet enkelt oavsett hur din stack ser ut. 😊
När du har ett Cumul.io-konto och om du är en "ägare" av en organisation i Cumul.io, kommer du att kunna hantera och underhålla alla dina integrationer via fliken Integrationer. Låt oss ta en titt på ett exempel på ett Cumul.io-konto. Nedan kan du se instrumentpanelerna som en Cumul.io-användare kan ha skapat:
Även om det här är alla instrumentpaneler som den här användaren kan ha skapat, är det troligt att inte alla instrumentpaneler är avsedda för samma slutanvändare, eller applikation för den delen. Så ägaren till detta Cumul.io-konto skulle skapa och underhålla en integration (eller mer!) 💪 Låt oss ta en titt på hur det kan se ut för dem:
Så det ser ut som att ägaren till detta Cumul.io-konto har två separata applikationer.
Låt oss nu se hur processen att skapa en integration och bädda in dess instrumentpaneler i en applikation skulle se ut. Den goda nyheten är, som nämnts tidigare, många av stegen du måste ta kan göras inom Cumul.io UI.
Ansvarsfriskrivning: I den här artikelns syften kommer jag enbart att fokusera på integrationsdelen. Så jag hoppar över allt som har med att skapa och designa instrumentbrädor och vi börjar med en färdig uppsättning imaginära instrumentbrädor.
Vad vi kommer att göra:
Skapa en integration
För enkelhetens skull, låt oss bara skapa en integration för nu. Låt oss föreställa oss att vi har en analysplattform som vi underhåller för vårt företag. Det finns tre instrumentpaneler som vi vill tillhandahålla våra slutanvändare: Marketing Dashboard, Sales Dashboard och Leads Dashboard.
Låt oss säga att av alla instrumentpaneler som det här kontot har skapat eller har tillgång till, för detta specifika projekt vill de bara använda följande:
Ny integration
För att skapa integrationen går vi till fliken Integrationer och väljer Ny integration. Dialogen som dyker upp kommer redan att ge dig en uppfattning om vad dina nästa steg kommer att vara:
Välja instrumentpaneler
Nästa upp kommer du att kunna välja vilka av dina instrumentpaneler som ska inkluderas i denna integration. Du kommer också att kunna ge integrationen ett namn, som jag här har bestämt att det lämpligen ska vara "Mycket viktig integration":
När du har bekräftat ditt val kommer du att ha möjlighet att definiera en slug för varje instrumentpanel (rekommenderas starkt). Dessa kan senare användas när du bäddar in instrumentpanelerna i din applikation. Du kommer senare att se att slugs gör det enkelt att referera till instrumentpaneler i din front-end-kod och gör det lättare att byta ut instrumentpaneler om det behövs (eftersom du inte behöver oroa dig för instrumentbrädans ID i front-end-koden).
Åtkomsträttigheter
Du kommer sedan att få ställa in integrationens åtkomsträttigheter för de datauppsättningar som dess instrumentpaneler använder. Här ställer vi in detta på "Kan visa." För mer information om åtkomsträttigheter och vad de innebär, kolla in vår associera datamängder till integrationer:
Filter och parametrar (och åtkomst till flera hyresgäster)
Sidanteckning: För att hjälpa till med åtkomst till flera hyresgäster – vilket skulle vara vettigt i denna imaginära uppsättning – gör Cumul.io det möjligt att ställa in parametrar och filter på datauppsättningar som en instrumentpanel använder. Detta innebär att varje användare som loggar in på din analysplattform endast skulle se den data de personligen har tillgång till i instrumentpanelerna. Du kan föreställa dig att i detta scenario skulle åtkomsten baseras på vilken avdelning slutanvändaren arbetar för i företaget. För mer om hur du ställer in multi-tenancy med Cumul.io, kolla in vår artikel, "Multi-Tenancy på Cumul.io Dashboards med Auth0". Detta kan göras inom instrumentpanelens designprocess (som vi hoppar över), vilket gör det lättare att visualisera vad filtren gör. Men här kommer vi att ställa in dessa filter i processen för att skapa integration.
Här ställer vi in de filter som datauppsättningarna kan behöva ha. I det här scenariot, när vi filtrerar baserat på användarnas avdelningar, definierar vi en department
parameter och filter baserat på det:
Och voilà! När du är klar med att ställa in dem har du framgångsrikt skapat en integration. Nästa dialog kommer att ge dig instruktioner för vad som blir dina nästa steg för att bädda in din integration:
Nu kommer du att kunna se denna helt nya integration på fliken Integration. Det är också här du kommer att ha snabb åtkomst till Integration ID, som senare kommer att användas för att bädda in instrumentpanelerna.
Goda nyheter! När din integration har skapats kan du alltid redigera den. Du kan också ta bort eller lägga till instrumentpaneler, ändra slugs på instrumentpaneler eller åtkomsträttigheter. Så du behöver inte oroa dig för att skapa nya integrationer när din applikation förändras och utvecklas. Och eftersom redigering av en integration är allt inom användargränssnittet, behöver du inte oroa dig för att en utvecklare ska ställa in allt igen. Icke-tekniska användare kan anpassa dessa integrationer på språng.
Bädda in instrumentpaneler
Låt oss se vart vi vill komma. Vi vill tillhandahålla instrumentpanelerna i en anpassad app. Enkelt, användaren loggar in på en app, appen har instrumentpaneler, de ser instrumentpanelerna med den data de får se. Det kan till exempel se ut så här:
Någon hade en mycket specifik vision om hur de ville tillhandahålla instrumentpanelerna till slutanvändaren. De ville ha en sidofält där de kunde bläddra igenom var och en av instrumentpanelerna. Det kunde ha varit något helt annat också. Det vi kommer att fokusera på är hur vi kan bädda in dessa instrumentpaneler i vår applikation oavsett hur värdapplikationen ser ut.
Cumul.io kommer med en uppsättning offentligt tillgängliga SDK:er. Här ska jag visa dig vad du skulle göra om du skulle använda Nod SDK. Kolla in vår utvecklardokument för att se vilka andra SDK:er som finns tillgängliga och instruktioner om hur du använder dem.
Steg 1: Generera SSO-tokens för dina slutanvändare
Innan du kan generera SSO-tokens för dina slutanvändare måste du se till att du skapar en API-nyckel och token i Cumul.io. Du kan göra detta från din Cumul.io-profil. Det bör vara organisationens ägare med åtkomst till integrationen som skapar och använder denna API-nyckel och token för att göra SSO-auktoriseringsbegäran. När du har gjort detta, låt oss först skapa en Cumul.io-klient som skulle göras på serversidan av applikationen:
const Cumulio = require("cumulio"); const client = new Cumulio({ api_key: '<YOUR API KEY>', api_token: '<YOUR API TOKEN>',
});
Nu kan vi skapa SSO-token för slutanvändaren. För mer information om detta API-anrop och de obligatoriska fälten, kolla in vår utvecklardokumentation om generering 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: {}
});
Lägg märke till hur vi har lagt till det valfria metadata
fält. Det är här du kan ange de parametrar och värden som du vill filtrera instrumentpanelernas datauppsättningar på. I exemplet vi har gått igenom har vi filtrerat baserat på avdelning så vi skulle lägga till detta till metadata. Helst skulle du få denna information från den autentiseringsleverantör du använder. Se en detaljerad förklaring om hur vi har gjort detta med Auth0.
Denna begäran returnerar ett JSON-objekt som innehåller ett auktoriserings-id och token som senare används som nyckel/token-kombination för att bädda in instrumentpaneler på klientsidan.
Något annat du valfritt kan lägga till här som är ganska coolt är en CSS-egenskap. Detta skulle tillåta dig att definiera anpassat utseende och känsla för varje användare (eller användargrupp). För samma applikation, så här kan Marketing Dashboard se ut för Angelina vs Brad:
Steg 2: Bädda in
Vi hoppade fram en bit där. Vi skapade SSO-tokens för slutanvändare men vi har ännu inte faktiskt bäddat in instrumentpanelerna i applikationen. Låt oss ta en titt på det. Först bör du installera och importera Webbkomponent.
import '@cumul.io/cumulio-dashboard';
Efter att ha importerat komponenten kan du använda den som om den vore en HTML-tagg. Det är här du kommer att bädda in dina instrumentpaneler:
<cumulio-dashboard dashboardId="< a dashboard id >" dashboardSlug="< a dashboard slug >" authKey="< SSO key from step 1 >" authToken="< SSO token from step 1 >">
</cumulio-dashboard>
Här har du några alternativ. Du kan antingen ange instrumentbrädans ID för alla instrumentpaneler som du vill bädda in, eller så kan du tillhandahålla instrumentbrädans slug som vi definierade i integrationsinställningarna (vilket är anledningen till att jag starkt rekommenderar detta, det är mycket mer läsbart att göra det på det här sättet). För mer detaljerad information om hur man bäddar in instrumentpaneler kan du också kolla in vår utvecklarens dokumentation.
Ett bra sätt att göra det här steget är förstås att bara definiera skelettet för instrumentpanelskomponenten i din HTML-fil och fylla i resten av den från klientsidan av din applikation. Jag har gjort följande, även om det naturligtvis inte är det enda sättet:
Jag har lagt till instrumentpanelskomponenten med ID dashboard
:
<cumulio-dashboard id="dashboard"></cumulio-dashboard>
Sedan har jag hämtat den här komponenten i klientkoden enligt följande:
const dashboardElement = document.getElementById("dashboard");
Sedan begär jag SSO-token från serversidan av min applikation som returnerar den nödvändiga nyckeln och token för att lägga till instrumentpanelskomponenten. Låt oss anta att vi har en omslagsfunktion getDashboardAuthorizationToken()
som gör detta åt oss och returnerar svaret från begäran om SSO-token på serversidan. Därefter fyller vi helt enkelt i instrumentpanelskomponenten i enlighet med detta:
const authorizationToken = await getDashboardAuthorizationToken();
if (authorizationToken.id && authorizationToken.token) { dashboardElement.authToken = authorizationToken.token; dashboardElement.authKey = authorizationToken.id; dashboardElement.dashboardSlug = "marketing|sales|leads";
}
Lägg märke till hur jag i de föregående stegen valde att definiera slugs för mina instrumentpaneler som är en del av denna integration. Det betyder att jag kan undvika att leta upp instrumentpanels-ID:n och lägga till dashboardId
som en av mina parametrar för dashboardElement
. Istället kan jag bara tillhandahålla en av sniglarna marketing
, sales
or leads
och jag är klar! Naturligtvis måste du ställa in någon form av urvalsprocess för din ansökan för att bestämma var och när du bäddar in vilken instrumentpanel.
Det är det gott folk! Vi har framgångsrikt skapat en integration i Cumul.io och med några rader kod har vi kunnat bädda in dess instrumentpaneler i vår applikation 🎉 Föreställ dig nu ett scenario där du måste underhålla flera applikationer samtidigt, antingen inom samma företag eller separata. Oavsett ditt scenario, jag är säker på att du kan föreställa dig hur om du har ett antal instrumentpaneler där var och en av dem måste gå till olika ställen och var och en av dem måste ha olika åtkomsträttigheter beroende på var de är och vidare och vidare. .. Hur det snabbt kan gå över styr. Integrationer låter dig hantera detta på ett enkelt och snyggt sätt, allt på ett ställe, och som du kan se, mestadels inifrån Cumul.io UI.
Det finns mycket mer du kan göra här som vi inte har gått igenom i detalj. Som att lägga till användarspecifika anpassade teman och CSS. Vi gick inte heller igenom hur du skulle ställa in parametrar och filter i instrumentpaneler, eller hur du skulle använda dem inifrån din värdapplikation så att du har en multi-tenant setup. Nedan hittar du några länkar till användbara handledningar och dokumentation för dessa steg om du är intresserad.
Källa: https://css-tricks.com/embedded-analytics-made-simple-with-cumul-io-integrations/
- '
- "
- &
- 11
- 7
- 9
- 98
- tillgång
- Konto
- Handling
- Alla
- analytics
- api
- app
- Ansökan
- tillämpningar
- Artikeln
- Autentisering
- tillstånd
- Bit
- branding
- byggare
- företag
- Ring
- byta
- koda
- Gemensam
- samhällen
- företag
- komponent
- Skapa
- instrumentbräda
- datum
- Designa
- detalj
- Utvecklare
- utvecklare
- oenighet
- slutar
- Ansikte
- Fält
- filter
- Förnamn
- Fokus
- formen
- fungera
- god
- Grupp
- här.
- Hur ser din drömresa ut
- How To
- HTTPS
- Människa
- Tanken
- importera
- info
- informationen
- insikter
- integrering
- integrationer
- IT
- JavaScript
- Nyckel
- Lista
- Marknadsföring
- namn
- Propert
- nyheter
- Alternativet
- Tillbehör
- organisation
- Övriga
- ägaren
- plattform
- producerad
- Profil
- projektet
- projekt
- egenskapen
- respons
- REST
- återgår
- SaaS
- försäljning
- känsla
- in
- inställning
- Enkelt
- So
- LÖSA
- Sponsrade
- världen
- tema
- tid
- token
- tokens
- självstudiekurser
- ui
- us
- användare
- utsikt
- syn
- VEM
- inom
- ord
- Arbete
- fungerar
- världen