Blader door SaaS-communities op Twitter, LinkedIn, Reddit, Discord, noem maar op en je zult in veel van hen een gemeenschappelijk thema zien verschijnen. Dat thema kan vele namen hebben: BI, analyse, inzichten enzovoort. Het is natuurlijk, we doen zaken, verzamelen gegevens, we slagen of falen. We willen dat allemaal onderzoeken, een idee krijgen van de gegevens die we hebben en actie ondernemen. Deze behoefte heeft geleid tot vele projecten en tools die het leven van iedereen die in de data wil kijken net wat makkelijker maken. Maar als mensen hebben, willen mensen meer. En in de wereld van BI en analyse komt 'meer' vaak in de vorm van inbedding, branding, aangepaste styling en toegang enzovoort. Wat uiteindelijk meer werk betekent voor ontwikkelaars en meer tijd om rekening mee te houden. Er was dus natuurlijk behoefte aan BI-tools waarmee u alles kunt hebben.
Laten we een lijst maken met uitdagingen waarmee u als bouwer en onderhouder van deze dashboards te maken kunt krijgen:
- U wilt de dashboards vanuit uw eigen applicatie of platform beschikbaar maken voor eindgebruikers of kijkers
- U wilt verschillende dashboardcollecties (dwz "integraties") kunnen beheren
- U wilt specifieke gebruikersrechten kunnen toekennen aan een verzameling dashboards en datasets
- U wilt ervoor zorgen dat gebruikers toegang hebben tot gegevens die alleen voor hen relevant zijn
cumul.io biedt een tool die we noemen Integraties die helpt bij het oplossen van deze uitdagingen. In dit artikel laat ik je zien wat integraties zijn en hoe je er een opzet. Het leuke is dat voor de meeste van de bovenstaande punten minimale code vereist is en voor het grootste deel kan worden ingesteld binnen de cumul.io UI.
Wat achtergrond โ Integraties
An Integratie in Cumul.io is een structuur die een verzameling dashboards definieert die bedoeld zijn om samen te worden gebruikt (bijvoorbeeld in dezelfde applicatie). Het is ook wat we gewend zijn insluiten dashboards in een applicatie. Met andere woorden, om dashboards in een applicatie in te bedden, geven we de applicatie toegang tot de integratie waartoe ze behoren. U kunt dashboards koppelen aan een integratie en beheren welk type toegangsrechten de eindgebruikers van de integratie zullen hebben op deze dashboards en de datasets die zij gebruiken. Een dashboard kan deel uitmaken van meerdere integraties, maar het kan verschillende toegangsrechten hebben voor verschillende integraties. Als het gaat om insluiten, zijn er een aantal SDK's beschikbaar om het leven eenvoudig te maken, ongeacht hoe uw stapel eruitziet. ๐
Als u eenmaal een Cumul.io-account hebt en als u een "eigenaar" bent van een organisatie in Cumul.io, kunt u al uw integraties beheren en onderhouden via het tabblad Integraties. Laten we eens kijken naar een voorbeeld van een Cumul.io-account. Hieronder ziet u de dashboards die een gebruiker van Cumul.io mogelijk heeft gemaakt:
Hoewel dit alle dashboards zijn die deze gebruiker mogelijk heeft gemaakt, is het waarschijnlijk dat niet alle dashboards bedoeld zijn voor dezelfde eindgebruikers of dezelfde toepassing. De eigenaar van dit Cumul.io-account zou dus een integratie (of meer!) maken en onderhouden. ๐ช Laten we eens kijken hoe dat er voor hen uit zou kunnen zien:
Het lijkt er dus op dat de eigenaar van dit Cumul.io-account twee afzonderlijke applicaties onderhoudt.
Laten we nu eens kijken hoe het proces van het maken van een integratie en het inbedden van de dashboards in een applicatie eruit zou zien. Het goede nieuws is dat, zoals eerder vermeld, veel van de stappen die u moet nemen, kunnen worden gedaan binnen de gebruikersinterface van Cumul.io.
Disclaimer: voor de doeleinden van dit artikel zal ik me uitsluitend concentreren op het integratiegedeelte. Dus ik sla alles over dat te maken heeft met het maken en ontwerpen van dashboards en we beginnen met een vooraf gemaakte set denkbeeldige dashboards.
Wat gaan we doen:
Een integratie maken
Laten we voor het gemak voorlopig slechts รฉรฉn integratie maken. Laten we ons voorstellen dat we een analyseplatform hebben dat we onderhouden voor ons bedrijf. Er zijn drie dashboards die we onze eindgebruikers willen bieden: het Marketing Dashboard, het Sales Dashboard en het Leads Dashboard.
Laten we zeggen dat van alle dashboards die dit account heeft gemaakt of waartoe hij toegang heeft, voor dit specifieke project alleen het volgende wil gebruiken:
Nieuwe integratie
Om de integratie te maken, gaan we naar het tabblad Integraties en selecteren Nieuwe integratie. De dialoog die verschijnt, geeft je al een idee van wat je volgende stappen zullen zijn:
Dashboards selecteren
Vervolgens kunt u selecteren welke van uw dashboards in deze integratie worden opgenomen. U kunt de integratie ook een naam geven, die ik hier heb besloten om "Very Important Integration" te zijn:
Nadat u uw selectie heeft bevestigd, heeft u de mogelijkheid om voor elk dashboard een slug te definiรซren (sterk aanbevolen). Deze kunnen later worden gebruikt bij het inbedden van de dashboards in uw applicatie. U zult later zien dat slugs het gemakkelijk maken om naar dashboards in uw front-endcode te verwijzen, en het ook gemakkelijker maken om dashboards te vervangen indien nodig (aangezien u zich geen zorgen hoeft te maken over dashboard-ID's in de front-endcode).
Toegangsrechten
Vervolgens kunt u de toegangsrechten van de integratie instellen voor de datasets die door de dashboards worden gebruikt. Hier stellen we dit in op 'Kan bekijken'. Voor meer informatie over toegangsrechten en wat deze inhouden, bekijk onze datasets koppelen aan integraties:
Filters en parameters (en toegang voor meerdere huurders)
Kanttekening: Om te helpen met toegang voor meerdere gebruikers - wat logisch zou zijn in deze denkbeeldige opzet - maakt Cumul.io het mogelijk om parameters en filters in te stellen op datasets die een dashboard gebruikt. Dit betekent dat elke gebruiker die inlogt op uw analyseplatform alleen de gegevens ziet waartoe hij persoonlijk toegang heeft in de dashboards. U kunt zich voorstellen dat in dit scenario de toegang gebaseerd zou zijn op de afdeling waarvoor de eindgebruiker in het bedrijf werkt. Voor meer informatie over het opzetten van multi-tenancy met Cumul.io, bekijk ons โโartikel, "Multi-tenancy op Cumul.io-dashboards met Auth0". Dit kan worden gedaan binnen het ontwerpproces van het dashboard (dat we overslaan), waardoor het gemakkelijker wordt om te visualiseren wat de filters doen. Maar hier zullen we deze filters instellen in het integratieproces.
Hier stellen we de filters in die de datasets mogelijk nodig hebben. In dit scenario, terwijl we filteren op basis van de afdelingen van de gebruikers, definiรซren we een department
parameter en filter op basis daarvan:
En voila! Als je klaar bent met het instellen ervan, heb je met succes een integratie gemaakt. Het volgende dialoogvenster geeft u instructies voor wat uw volgende stappen zullen zijn om uw integratie in te bedden:
Nu kun je deze gloednieuwe integratie zien op je tabblad Integratie. Hier heeft u ook snel toegang tot de integratie-ID, die later zal worden gebruikt voor het insluiten van de dashboards.
Goed nieuws! Nadat uw integratie is gemaakt, kunt u deze altijd bewerken. U kunt dashboards verwijderen of toevoegen, ook de slugs van dashboards of toegangsrechten wijzigen. U hoeft zich dus geen zorgen te maken over het creรซren van nieuwe integraties terwijl uw applicatie verandert en evolueert. En aangezien het bewerken van een integratie allemaal binnen de gebruikersinterface gebeurt, hoeft u zich geen zorgen te maken dat een ontwikkelaar alles opnieuw moet instellen. Niet-technische gebruikers kunnen deze integraties onderweg aanpassen.
Dashboards insluiten
Laten we eens kijken waar we naartoe willen. De dashboards willen we aanbieden binnen een app op maat. Eenvoudig, gebruiker logt in op een app, de app heeft dashboards, ze zien de dashboards met de gegevens die ze mogen zien. Het kan er bijvoorbeeld als volgt uitzien:
Iemand had een heel specifieke visie over hoe ze de dashboards wilden aanleveren aan de eindgebruiker. Ze wilden een zijbalk waar ze door elk van de dashboards konden bladeren. Het had ook iets heel anders kunnen zijn. Waar we ons op zullen concentreren, is hoe we deze dashboards in onze applicatie kunnen integreren, ongeacht hoe de hostapplicatie eruit ziet.
Cumul.io wordt geleverd met een set openbaar beschikbare SDK's. Hier laat ik je zien wat je zou doen als je de Knooppunt-SDK. Bekijk onze ontwikkelaarsdocumenten om te zien welke andere SDK's beschikbaar zijn en instructies voor het gebruik ervan.
Stap 1: Genereer SSO-tokens voor uw eindgebruikers
Voordat u SSO-tokens voor uw eindgebruikers kunt genereren, moet u ervoor zorgen dat u een API-sleutel en token maakt in Cumul.io. U kunt dit doen vanuit uw Cumul.io-profiel. Het moet de eigenaar van de organisatie zijn met toegang tot de integratie die deze API-sleutel en token maakt en gebruikt om het SSO-autorisatieverzoek in te dienen. Zodra je dit hebt gedaan, gaan we eerst een Cumul.io-client maken die aan de serverkant van de applicatie wordt gedaan:
const Cumulio = require("cumulio"); const client = new Cumulio({ api_key: '<YOUR API KEY>', api_token: '<YOUR API TOKEN>',
});
Nu kunnen we het SSO-token voor de eindgebruiker maken. Voor meer informatie over deze API-aanroep en de verplichte velden, ga naar onze ontwikkelaarsdocumentatie over het genereren SSO penningen.
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: {}
});
Zie hier hoe we de optionele hebben toegevoegd metadata
veld. Hier kunt u de parameters en waarden opgeven waarop u de datasets van de dashboards wilt filteren. In het voorbeeld dat we hebben doorgenomen, hebben we gefilterd op afdeling, dus we zouden dit toevoegen aan de metadata. Idealiter krijgt u deze informatie van de authenticatieprovider die u gebruikt. Zie een gedetailleerde uitleg over hoe we dit hebben gedaan met Auth0.
Dit verzoek retourneert een JSON-object dat een autorisatie-ID en token bevat dat later wordt gebruikt als sleutel/token-combinatie om dashboards in de clientzijde in te sluiten.
Iets anders dat je hier optioneel kunt toevoegen, wat best cool is, is een CSS-eigenschap. Hiermee kunt u voor elke gebruiker (of gebruikersgroep) een aangepaste look en feel definiรซren. Voor dezelfde applicatie zou het Marketing Dashboard er zo uit kunnen zien voor Angelina vs Brad:
Stap 2: Insluiten
Daar liepen we een beetje vooruit. We hebben SSO-tokens gemaakt voor eindgebruikers, maar we hebben de dashboards nog niet daadwerkelijk in de applicatie geรฏntegreerd. Laten we daar eens naar kijken. Eerst moet u het Webcomponent.
import '@cumul.io/cumulio-dashboard';
Na het importeren van de component kunt u deze gebruiken alsof het een HTML-tag is. Dit is waar u uw dashboards insluit:
<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 heb je een paar opties. U kunt de dashboard-ID opgeven voor elk dashboard dat u wilt insluiten, of u kunt de dashboard-slug opgeven die we hebben gedefinieerd in de integratieconfiguratie (daarom raad ik dit ten zeerste aan, het is veel leesbaarder om het op deze manier te doen). Voor meer gedetailleerde informatie over het insluiten van dashboards kunt u ook onze documentatie voor ontwikkelaars.
Een leuke manier om deze stap uit te voeren is natuurlijk gewoon het skelet van de dashboardcomponent in uw HTML-bestand te definiรซren en de rest in te vullen vanaf de clientzijde van uw applicatie. Ik heb het volgende gedaan, hoewel het natuurlijk niet de enige manier is:
Ik heb de dashboardcomponent met de ID toegevoegd dashboard
:
<cumulio-dashboard id="dashboard"></cumulio-dashboard>
Vervolgens heb ik dit onderdeel als volgt in de clientcode opgehaald:
const dashboardElement = document.getElementById("dashboard");
Vervolgens vraag ik het SSO-token op aan de serverkant van mijn applicatie, dat de vereiste sleutel en het token retourneert om toe te voegen aan de dashboardcomponent. Laten we aannemen dat we een wikkelfunctie hebben getDashboardAuthorizationToken()
die dit voor ons doet en het antwoord retourneert van het SSO-tokenverzoek aan de serverzijde. Vervolgens vullen we eenvoudig de dashboardcomponent dienovereenkomstig in:
const authorizationToken = await getDashboardAuthorizationToken();
if (authorizationToken.id && authorizationToken.token) { dashboardElement.authToken = authorizationToken.token; dashboardElement.authKey = authorizationToken.id; dashboardElement.dashboardSlug = "marketing|sales|leads";
}
Merk op hoe ik er in de vorige stappen voor heb gekozen om slugs te definiรซren voor mijn dashboards die deel uitmaken van deze integratie. Dit betekent dat ik kan voorkomen dat ik dashboard-ID's opzoek en toevoeg dashboardId
als een van mijn parameters van de dashboardElement
. In plaats daarvan kan ik gewoon een van de slakken leveren marketing
, sales
or leads
en ik ben klaar! Natuurlijk zou u een soort selectieproces voor uw applicatie moeten opzetten om te beslissen waar en wanneer u welk dashboard insluit.
Dat is het mensen! We hebben met succes een integratie in Cumul.io gemaakt en in een paar regels code hebben we de dashboards ervan in onze applicatie kunnen integreren ๐ Stel je nu een scenario voor waarin je meerdere applicaties tegelijk moet onderhouden, hetzij voor binnen de hetzelfde bedrijf of aparte bedrijven. Wat uw scenario ook is, ik weet zeker dat u zich kunt voorstellen hoe als u een aantal dashboards heeft waar ze allemaal naar verschillende plaatsen moeten gaan en elk verschillende toegangsrechten hebben, afhankelijk van waar ze zijn en zo maar door. .. Hoe het snel uit de hand kan lopen. Met integraties kunt u dit op een eenvoudige en nette manier beheren, allemaal op รฉรฉn plek, en zoals u kunt zien, meestal vanuit de gebruikersinterface van Cumul.io.
U kunt hier nog veel meer doen dat we niet in detail hebben besproken. Zoals het toevoegen van gebruikersspecifieke aangepaste thema's en CSS. We hebben ook niet doorgenomen hoe je parameters en filters in dashboards zou instellen, of hoe je ze zou gebruiken vanuit je hostapplicatie zodat je een multi-tenant setup hebt. Hieronder vindt u enkele links naar handige tutorials en documentatie voor deze stappen als u geรฏnteresseerd bent.
Bron: https://css-tricks.com/embedded-analytics-made-simple-with-cumul-io-integrations/
- '
- "
- &
- 11
- 7
- 9
- 98
- toegang
- Account
- Actie
- Alles
- analytics
- api
- gebruiken
- Aanvraag
- toepassingen
- dit artikel
- authenticatie
- machtiging
- Beetje
- branding
- bouwer
- bedrijfsdeskundigen
- Bellen
- verandering
- code
- Gemeen
- Gemeenschappen
- afstand
- bestanddeel
- Wij creรซren
- dashboards
- gegevens
- Design
- detail
- Ontwikkelaar
- ontwikkelaars
- onenigheid
- eindigt
- Gezicht
- Velden
- filters
- Voornaam*
- Focus
- formulier
- functie
- goed
- Groep
- hier
- Hoe
- How To
- HTTPS
- Mensen
- idee
- importeren
- info
- informatie
- inzichten
- integratie
- integraties
- IT
- JavaScript
- sleutel
- Lijst
- Marketing
- namen
- Netjes
- nieuws
- Keuze
- Opties
- organisatie
- Overige
- eigenaar
- platform
- geproduceerd
- Profiel
- project
- projecten
- eigendom
- antwoord
- REST
- Retourneren
- SaaS
- verkoop
- zin
- reeks
- het instellen van
- Eenvoudig
- So
- OPLOSSEN
- Gesponsorde
- de wereld
- thema
- niet de tijd of
- teken
- tokens
- tutorials
- X
- ui
- us
- gebruikers
- Bekijk
- visie
- WIE
- binnen
- woorden
- Mijn werk
- Bedrijven
- wereld