Bla gjennom SaaS-fellesskap på Twitter, LinkedIn, Reddit, Discord, you name it, og du vil se et felles tema vises i mange av dem. Det temaet kan gå under mange navn: BI, analyser, innsikt og så videre. Det er naturlig, vi driver forretninger, samler inn data, vi lykkes eller mislykkes. Vi ønsker å se nærmere på alt dette, forstå dataene vi har og iverksette tiltak. Dette behovet har produsert mange prosjekter og verktøy som gjør livet til alle som ønsker å se på dataene litt enklere. Men når mennesker har det, vil mennesker ha mer. Og i BI- og analyseverdenen kommer «mer» ofte i form av embedding, merkevarebygging, tilpasset styling og tilgang og så videre. Noe som ender opp med å bety mer arbeid for utviklere og mer tid å gjøre rede for. Så naturlig nok har det vært behov for BI-verktøy som lar deg ha alt.
La oss lage en liste over utfordringer du kan møte som bygger og vedlikeholder av disse instrumentbordene:
- Du ønsker å gjøre dashbordene tilgjengelige for sluttbrukere eller seere fra din egen applikasjon eller plattform
- Du ønsker å kunne administrere ulike dashbordsamlinger (dvs. "integrasjoner")
- Du ønsker å kunne gi spesifikke brukerrettigheter til en samling av dashboards og datasett
- Du vil sørge for at brukerne har tilgang til data som kun er relevante for dem
cumul.io gir et verktøy vi kaller integrasjoner som bidrar til å løse disse utfordringene. I denne artikkelen vil jeg lede deg gjennom hva integrasjoner er, og hvordan du setter opp en. Det kule er at for de fleste punktene ovenfor er det minimalt med kode som kreves og for det meste kan settes innenfor cumul.io UI.
Litt bakgrunn — integrasjoner
An Integrasjon i Cumul.io er en struktur som definerer en samling dashboards beregnet på å brukes sammen (f.eks. i samme applikasjon). Det er også det vi bruker embed dashboards inn i en applikasjon. Med andre ord, for å bygge inn dashboards i en applikasjon, gir vi applikasjonen tilgang til integrasjonen de tilhører. Du kan knytte dashboards til en integrasjon og administrere hvilken type tilgangsrettigheter sluttbrukerne av integrasjonen skal ha på disse dashboardene og datasettene de bruker. Et dashbord kan være en del av flere integrasjoner, men det kan ha forskjellige tilgangsrettigheter på forskjellige integrasjoner. Når det kommer til innebygging, er det en rekke SDK-er tilgjengelig for å gjøre livet enkelt uavhengig av hvordan stabelen din ser ut. 😊
Når du har en Cumul.io-konto og hvis du er "eier" av en organisasjon i Cumul.io, vil du kunne administrere og vedlikeholde alle integrasjonene dine via Integrasjoner-fanen. La oss ta en titt på et eksempel på en Cumul.io-konto. Nedenfor kan du se dashbordene som en Cumul.io-bruker kan ha opprettet:
Selv om dette er alle dashbordene denne brukeren kan ha opprettet, er det sannsynlig at ikke alle dashbordene er ment for de samme sluttbrukerne, eller applikasjonen for den saks skyld. Så eieren av denne Cumul.io-kontoen vil opprette og vedlikeholde en integrasjon (eller mer!) 💪 La oss ta en titt på hvordan det kan se ut for dem:
Så det ser ut som eieren av denne Cumul.io-kontoen har to separate applikasjoner.
La oss nå se hvordan prosessen med å lage en integrasjon og bygge dashboardene inn i en applikasjon vil se ut. Den gode nyheten er, som nevnt før, mange av trinnene du må ta kan gjøres i Cumul.io UI.
Ansvarsfraskrivelse: For denne artikkelens formål vil jeg kun fokusere på integreringsdelen. Så jeg hopper over alt som har med dashbordoppretting og design å gjøre, og vi starter med et forhåndslaget sett med imaginære dashbord.
Hva vi skal gjøre:
Opprette en integrasjon
For enkelhets skyld, la oss bare lage én integrasjon for nå. La oss forestille oss at vi har en analyseplattform som vi vedlikeholder for selskapet vårt. Det er tre dashboards vi ønsker å gi til sluttbrukerne våre: Marketing Dashboard, Sales Dashboard og Leads Dashboard.
La oss si at av alle dashbordene denne kontoen har opprettet eller har tilgang til, for dette bestemte prosjektet vil de bare bruke følgende:
Ny integrasjon
For å lage integrasjonen går vi til fanen Integrasjoner og velger Ny integrasjon. Dialogen som dukker opp vil allerede gi deg en ide om hva de neste trinnene dine vil være:
Velge Dashboards
Deretter vil du kunne velge hvilke av dashbordene dine som skal inkluderes i denne integrasjonen. Du vil også kunne gi integreringen et navn, som jeg her har bestemt at skal være "Veldig viktig integrasjon":
Når du har bekreftet valget ditt, vil du ha muligheten til å definere en slug for hvert dashbord (anbefales på det sterkeste). Disse kan senere brukes mens du bygger inn dashbordene i applikasjonen din. Du vil senere se at slugs gjør det enkelt å referere til dashboards i front-end-koden din, og gjør det lettere å erstatte dashboards om nødvendig også (da du ikke trenger å bekymre deg for dashboard-ID-er i front-end-koden).
Tilgangsrettigheter
Du vil da få angi integreringens tilgangsrettigheter for datasettene dashboardene bruker. Her har vi satt dette til "Kan se." For mer informasjon om tilgangsrettigheter og hva de innebærer, sjekk ut vår knytte datasett til integrasjoner:
Filtre og parametere (og tilgang for flere leietakere)
Sidemerknad: For å hjelpe med tilgang til flere leietakere – noe som ville være fornuftig i dette imaginære oppsettet – gjør Cumul.io det mulig å angi parametere og filtre på datasett som et dashbord bruker. Dette betyr at hver bruker som logger på analyseplattformen din, bare vil se dataene de personlig har tilgang til i dashbordene. Du kan tenke deg at i dette scenariet vil tilgang være basert på hvilken avdeling sluttbrukeren jobber for i selskapet. For mer om hvordan du setter opp multi-tenancy med Cumul.io, sjekk ut artikkelen vår, "Multi-Tenancy på Cumul.io Dashboards med Auth0". Dette kan gjøres innenfor designprosessen for dashbord (som vi hopper over), noe som gjør det lettere å visualisere hva filtrene gjør. Men her vil vi sette disse filtrene i integrasjonsopprettingsprosessen.
Her setter vi filtrene datasettene kan trenge å ha. I dette scenariet, når vi filtrerer basert på brukernes avdelinger, definerer vi en department
parameter og filter basert på det:
Og voilà! Når du er ferdig med å angi disse, har du opprettet en integrasjon. Den neste dialogen vil gi deg instruksjoner for hva som vil være de neste trinnene dine for å bygge integrasjonen din:
Nå vil du kunne se denne splitter nye integrasjonen i kategorien Integration. Det er også her du vil ha rask tilgang til integrasjons-IDen, som senere vil bli brukt til å bygge inn dashbordene.
Gode nyheter! Etter at integrasjonen er opprettet, kan du alltid redigere den. Du kan også fjerne eller legge til dashboards, endre slugs på dashboards eller tilgangsrettigheter. Så du trenger ikke å bekymre deg for å lage nye integrasjoner ettersom applikasjonen din endres og utvikler seg. Og siden redigering av en integrasjon er alt innenfor brukergrensesnittet, trenger du ikke å bekymre deg for at en utvikler skal sette det opp igjen. Ikke-tekniske brukere kan tilpasse disse integrasjonene mens de er på farten.
Innbygging av dashbord
La oss se hvor vi vil komme. Vi ønsker å tilby dashbordene i en tilpasset app. Enkelt, brukeren logger på en app, appen har dashbord, de ser dashbordene med dataene de har lov til å se. Det kan for eksempel se slik ut:
Noen hadde en veldig spesifikk visjon om hvordan de ønsket å gi dashboardene til sluttbrukeren. De ønsket et sidefelt der de kunne bla gjennom hvert av dashbordene. Det kunne vært noe helt annet også. Det vi vil fokusere på er hvordan vi kan bygge inn disse dashboardene i applikasjonen vår uavhengig av hvordan vertsapplikasjonen ser ut.
Cumul.io kommer med et sett med offentlig tilgjengelige SDK-er. Her skal jeg vise deg hva du ville gjort hvis du skulle bruke Node SDK. Sjekk ut vår utviklerdokumenter for å se hvilke andre SDK-er som er tilgjengelige og instruksjoner om hvordan du bruker dem.
Trinn 1: Generer SSO-tokens for sluttbrukerne dine
Før du kan generere SSO-tokens for sluttbrukerne dine, må du sørge for at du oppretter en API-nøkkel og token i Cumul.io. Du kan gjøre dette fra Cumul.io-profilen din. Det bør være organisasjonseieren med tilgang til integrasjonen som oppretter og bruker denne API-nøkkelen og -tokenet for å sende SSO-autorisasjonsforespørselen. Når du har gjort dette, la oss først lage en Cumul.io-klient som vil bli gjort på serversiden av applikasjonen:
const Cumulio = require("cumulio"); const client = new Cumulio({ api_key: '<YOUR API KEY>', api_token: '<YOUR API TOKEN>',
});
Nå kan vi opprette SSO-tokenet for sluttbrukeren. For mer informasjon om dette API-kallet og de obligatoriske feltene, sjekk ut vår utviklerdokumentasjon om generering SSO poletter.
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: {}
});
Her, legg merke til hvordan vi har lagt til det valgfrie metadata
felt. Det er her du kan oppgi parameterne og verdiene du vil filtrere dashbordenes datasett på. I eksemplet vi har gått gjennom har vi filtrert basert på avdeling, så vi legger dette til metadataene. Ideelt sett vil du få denne informasjonen fra autentiseringsleverandøren du bruker. Se en detaljert forklaring på hvordan vi har gjort dette med Auth0.
Denne forespørselen vil returnere et JSON-objekt som inneholder en autorisasjons-ID og token som senere brukes som nøkkel/token-kombinasjon for å bygge inn dashbord på klientsiden.
Noe annet du eventuelt kan legge til her, som er ganske kult, er en CSS-egenskap. Dette vil tillate deg å definere tilpasset utseende og følelse for hver bruker (eller brukergruppe). For den samme applikasjonen er dette hvordan markedsføringsdashbordet kan se ut for Angelina vs Brad:
Trinn 2: Bygg inn
Vi hoppet litt frem der. Vi opprettet SSO-tokens for sluttbrukere, men vi har ennå ikke faktisk innebygd dashbordene i applikasjonen. La oss ta en titt på det. Først bør du installere og importere Web-komponent.
import '@cumul.io/cumulio-dashboard';
Etter å ha importert komponenten kan du bruke den som om den var en HTML-tag. Det er her du vil bygge inn dashbordene dine:
<cumulio-dashboard dashboardId="< a dashboard id >" dashboardSlug="< a dashboard slug >" authKey="< SSO key from step 1 >" authToken="< SSO token from step 1 >">
</cumulio-dashboard>
Her vil du ha noen få alternativer. Du kan enten gi dashbord-ID-en for ethvert dashbord du vil bygge inn, eller du kan gi dashbord-sluggen som vi definerte i integreringsoppsettet (det er derfor jeg anbefaler dette på det sterkeste, det er mye mer lesbart å gjøre det på denne måten). For mer detaljert informasjon om hvordan du bygger inn dashboards, kan du også sjekke ut vår utvikler dokumentasjon.
En fin måte å gjøre dette trinnet på er selvfølgelig bare å definere skjelettet til dashbordkomponenten i HTML-filen din og fylle ut resten av den fra klientsiden av applikasjonen. Jeg har gjort følgende, selv om det selvfølgelig ikke er den eneste måten:
Jeg har lagt til dashbordkomponenten med ID dashboard
:
<cumulio-dashboard id="dashboard"></cumulio-dashboard>
Deretter har jeg hentet denne komponenten i klientkoden som følger:
const dashboardElement = document.getElementById("dashboard");
Deretter ber jeg om SSO-tokenet fra serversiden av applikasjonen min som returnerer den nødvendige nøkkelen og tokenet for å legge til dashbordkomponenten. La oss anta at vi har en innpakningsfunksjon getDashboardAuthorizationToken()
som gjør dette for oss og returnerer svaret fra SSO-token-forespørselen på serversiden. Deretter fyller vi ganske enkelt ut dashbordkomponenten tilsvarende:
const authorizationToken = await getDashboardAuthorizationToken();
if (authorizationToken.id && authorizationToken.token) { dashboardElement.authToken = authorizationToken.token; dashboardElement.authKey = authorizationToken.id; dashboardElement.dashboardSlug = "marketing|sales|leads";
}
Legg merke til hvordan jeg i de forrige trinnene valgte å definere slugs for dashbordene mine som er en del av denne integrasjonen. Dette betyr at jeg kan unngå å slå opp dashboard-ID-er og legge til dashboardId
som en av mine parametere for dashboardElement
. I stedet kan jeg bare gi en av sneglene marketing
, sales
or leads
og jeg er ferdig! Selvfølgelig må du sette opp en slags utvelgelsesprosess til søknaden din for å bestemme hvor og når du bygger inn hvilket dashbord.
Det er det folkens! Vi har lykkes med å opprette en integrasjon i Cumul.io, og på noen få linjer med kode har vi vært i stand til å bygge inn dashboardene i applikasjonen vår 🎉 Tenk deg nå et scenario der du må vedlikeholde flere applikasjoner samtidig, enten innenfor samme selskap eller separate. Uansett scenario, er jeg sikker på at du kan forestille deg hvordan hvis du har en rekke dashboards der hver av dem må gå til forskjellige steder og hver av dem må ha forskjellige tilgangsrettigheter avhengig av hvor de er og videre og videre. .. Hvordan det fort kan gå ut av hånden. Integrasjoner lar deg administrere dette på en enkel og ryddig måte, alt på ett sted, og som du kan se, for det meste fra Cumul.io UI.
Det er mye mer du kan gjøre her som vi ikke har gått gjennom i detalj. Slik som å legge til brukerspesifikke tilpassede temaer og CSS. Vi gikk heller ikke gjennom hvordan du ville angi parametere og filtre i dashboards, eller hvordan du ville bruke dem fra vertsapplikasjonen din slik at du har et multi-tenant-oppsett. Nedenfor finner du noen lenker til nyttige veiledninger og dokumentasjon for disse trinnene hvis du er interessert.
Kilde: https://css-tricks.com/embedded-analytics-made-simple-with-cumul-io-integrations/
- '
- "
- &
- 11
- 7
- 9
- 98
- adgang
- Logg inn
- Handling
- Alle
- analytics
- api
- app
- Søknad
- søknader
- Artikkel
- Autentisering
- autorisasjon
- Bit
- branding
- bygger
- virksomhet
- ring
- endring
- kode
- Felles
- Communities
- Selskapet
- komponent
- Opprette
- dashbord
- dato
- utforming
- detalj
- Utvikler
- utviklere
- disharmoni
- emalje
- slutter
- Face
- Felt
- filtre
- Først
- Fokus
- skjema
- funksjon
- god
- Gruppe
- her.
- Hvordan
- Hvordan
- HTTPS
- Mennesker
- Tanken
- importere
- info
- informasjon
- innsikt
- integrering
- integrasjoner
- IT
- Javascript
- nøkkel
- Liste
- Marketing
- navn
- Ryddig
- nyheter
- Alternativ
- alternativer
- organisasjon
- Annen
- eieren
- plattform
- produsert
- Profil
- prosjekt
- prosjekter
- eiendom
- svar
- REST
- avkastning
- SaaS
- salg
- forstand
- sett
- innstilling
- Enkelt
- So
- LØSE
- Sponset
- verden
- tema
- tid
- token
- tokens
- tutorials
- ui
- us
- Brukere
- Se
- syn
- HVEM
- innenfor
- ord
- Arbeid
- virker
- verden