Parcourez les communautés SaaS sur Twitter, LinkedIn, Reddit, Discord, peu importe et vous verrez un thème commun apparaître dans beaucoup d'entre elles. Ce thème peut porter plusieurs noms : BI, analytique, insights, etc. C’est naturel, nous faisons des affaires, collectons des données, nous réussissons ou échouons. Nous voulons examiner tout cela, donner un sens aux données dont nous disposons et agir. Ce besoin a donné naissance à de nombreux projets et outils qui facilitent un peu la vie de quiconque souhaite examiner les données. Mais quand les humains l’ont fait, ils en veulent plus. Et dans le monde de la BI et de l'analyse, le « plus » se présente souvent sous la forme d'intégration, de stratégie de marque, de style et d'accès personnalisés, etc. Ce qui finit par signifier plus de travail pour les développeurs et plus de temps à prendre en compte. Il est donc naturel qu’il y ait un besoin d’outils BI qui vous permettront de tout avoir.
Faisons une liste des défis auxquels vous pourriez être confronté en tant que constructeur et responsable de ces tableaux de bord :
- Vous souhaitez mettre les tableaux de bord à la disposition des utilisateurs finaux ou des visualiseurs depuis votre propre application ou plateforme.
- Vous souhaitez pouvoir gérer différentes collections de tableaux de bord (c'est-à-dire les « intégrations »)
- Vous souhaitez pouvoir accorder des droits d'utilisateur spécifiques à un ensemble de tableaux de bord et d'ensembles de données
- Vous voulez vous assurer que les utilisateurs ont accès aux données qui les concernent uniquement
Cumul.io fournit un outil que nous appelons Intégration ce qui aide à résoudre ces défis. Dans cet article, je vais vous expliquer ce que sont les intégrations et comment en configurer une. Ce qui est intéressant, c'est que pour la plupart des points ci-dessus, un minimum de code est requis et la plupart peuvent être définis dans le Cumul.io UI.
Un peu de contexte — Intégrations
An Intégration dans Cumul.io est une structure qui définit un ensemble de tableaux de bord destinés à être utilisés ensemble (par exemple dans la même application). C'est aussi ce que nous utilisons pour enchâsser tableaux de bord dans une application. En d’autres termes, pour intégrer des tableaux de bord dans une application, nous donnons à l’application l’accès à l’intégration à laquelle elle appartient. Vous pouvez associer des tableaux de bord à une intégration et administrer le type de droits d'accès dont disposeront les utilisateurs finaux de l'intégration sur ces tableaux de bord et les ensembles de données qu'ils utilisent. Un tableau de bord peut faire partie de plusieurs intégrations, mais il peut avoir des droits d'accès différents sur différentes intégrations. En matière d'intégration, il existe un certain nombre de SDK disponibles pour vous simplifier la vie, quelle que soit l'apparence de votre pile. 😊
Une fois que vous avez un compte Cumul.io et si vous êtes « propriétaire » d'une organisation dans Cumul.io, vous pourrez gérer et maintenir toutes vos intégrations via l'onglet Intégrations. Jetons un coup d'œil à un exemple de compte Cumul.io. Ci-dessous vous pouvez voir les tableaux de bord qu'un utilisateur Cumul.io a pu créer :
Bien qu'il s'agisse de tous les tableaux de bord que cet utilisateur a pu créer, il est probable que tous les tableaux de bord ne soient pas destinés aux mêmes utilisateurs finaux, ou aux mêmes applications. Ainsi, le propriétaire de ce compte Cumul.io créerait et maintiendrait une intégration (ou plus !) 💪 Voyons à quoi cela pourrait ressembler pour lui :
Il semble donc que le propriétaire de ce compte Cumul.io gère deux applications distinctes.
Voyons maintenant à quoi ressemblerait le processus de création d’une intégration et d’intégration de ses tableaux de bord dans une application. La bonne nouvelle est que, comme mentionné précédemment, la plupart des étapes que vous devrez suivre peuvent être effectuées dans l'interface utilisateur de Cumul.io.
Avertissement : pour les besoins de cet article, je me concentrerai uniquement sur la partie intégration. Je vais donc sauter tout ce qui concerne la création et la conception de tableaux de bord et nous commencerons par un ensemble prédéfini de tableaux de bord imaginaires.
Ce que nous ferons :
Créer une intégration
Par souci de simplicité, créons une seule intégration pour l’instant. Imaginons que nous ayons une plateforme d'analyse que nous maintenons pour notre entreprise. Nous souhaitons fournir trois tableaux de bord à nos utilisateurs finaux : le tableau de bord marketing, le tableau de bord des ventes et le tableau de bord des prospects.
Disons que parmi tous les tableaux de bord que ce compte a créés ou auxquels il a accès, pour ce projet particulier, il souhaite utiliser uniquement les éléments suivants :
Nouvelle intégration
Pour créer l'intégration, nous allons dans l'onglet Intégrations et sélectionnons Nouvelle intégration. Le dialogue qui apparaît vous donnera déjà une idée de vos prochaines étapes :
Sélection de tableaux de bord
Ensuite, vous pourrez sélectionner lequel de vos tableaux de bord sera inclus dans cette intégration. Vous pourrez également donner un nom à l’intégration, qui ici, j’ai décidé qu’il serait « Intégration très importante » :
Une fois votre sélection confirmée, vous aurez la possibilité de définir un slug pour chaque tableau de bord (fortement recommandé). Ceux-ci pourront ensuite être utilisés lors de l’intégration des tableaux de bord dans votre application. Vous verrez plus tard que les slugs facilitent le référencement des tableaux de bord dans votre code front-end et facilitent également le remplacement des tableaux de bord si nécessaire (car vous n'aurez pas à vous soucier des identifiants des tableaux de bord dans le code front-end).
Des droits d'accès
Vous pourrez ensuite définir les droits d’accès de l’intégration pour les ensembles de données utilisés par ses tableaux de bord. Ici, nous définissons ceci sur « Peut afficher ». Pour plus d'informations sur les droits d'accès et ce qu'ils impliquent, consultez notre associer des ensembles de données aux intégrations:
Filtres et paramètres (et accès multi-locataires)
Note latérale : Pour faciliter l'accès multi-tenant — ce qui aurait du sens dans cette configuration imaginaire — Cumul.io permet de définir des paramètres et des filtres sur les ensembles de données qu'un tableau de bord utilise. Cela signifie que chaque utilisateur qui se connecte à votre plateforme d'analyse ne verra que les données auxquelles il a personnellement accès dans les tableaux de bord. Vous pouvez imaginer que dans ce scénario, l'accès serait basé sur le service pour lequel l'utilisateur final travaille dans l'entreprise. Pour en savoir plus sur la configuration de la multi-location avec Cumul.io, consultez notre article, « Multilocation sur les tableaux de bord Cumul.io avec Auth0 ». Cela peut être fait dans le cadre du processus de conception du tableau de bord (que nous ignorons), ce qui facilite la visualisation de ce que font les filtres. Mais ici, nous définirons ces filtres dans le processus de création d'intégration.
Ici, nous définissons les filtres dont les ensembles de données pourraient avoir besoin. Dans ce scénario, lorsque nous filtrons en fonction des services des utilisateurs, nous définissons un department
paramètre et filtre basé sur cela :
Et voilà ! Une fois que vous avez terminé de les définir, vous avez créé avec succès une intégration. La boîte de dialogue suivante vous donnera des instructions sur les prochaines étapes d'intégration de votre intégration :
Vous pourrez désormais voir cette toute nouvelle intégration dans votre onglet Intégration. C'est également ici que vous aurez un accès rapide à l'ID d'intégration, qui sera ensuite utilisé pour intégrer les tableaux de bord.
Bonnes nouvelles! Une fois votre intégration créée, vous pouvez toujours la modifier. Vous pouvez également supprimer ou ajouter des tableaux de bord, modifier les slugs des tableaux de bord ou les droits d'accès. Vous n’avez donc pas à vous soucier de créer de nouvelles intégrations à mesure que votre application change et évolue. Et comme la modification d’une intégration se fait entièrement dans l’interface utilisateur, vous n’aurez pas à vous soucier de tout reconfigurer par un développeur. Les utilisateurs non techniques peuvent adapter ces intégrations en déplacement.
Intégration de tableaux de bord
Voyons où nous voulons en arriver. Nous souhaitons fournir les tableaux de bord dans une application personnalisée. Simple, l'utilisateur se connecte à une application, l'application dispose de tableaux de bord, ils voient les tableaux de bord avec les données qu'ils sont autorisés à voir. Cela pourrait ressembler par exemple à ceci :
Quelqu’un avait une vision très précise de la manière dont il souhaitait fournir les tableaux de bord à l’utilisateur final. Ils voulaient une barre latérale où ils pourraient parcourir chacun des tableaux de bord. Cela aurait pu être quelque chose de complètement différent aussi. Nous allons nous concentrer sur la manière dont nous pouvons intégrer ces tableaux de bord dans notre application, quelle que soit l'apparence de l'application hôte.
Cumul.io est livré avec un ensemble de SDK accessibles au public. Ici, je vais vous montrer ce que vous feriez si vous deviez utiliser le SDK de nœud. Découvrez notre documents de développeur pour voir quels autres SDK sont disponibles et des instructions sur la façon de les utiliser.
Étape 1 : Générez des jetons SSO pour vos utilisateurs finaux
Avant de pouvoir générer des tokens SSO pour vos utilisateurs finaux, vous devrez vous assurer de créer une clé API et un token dans Cumul.io. Vous pouvez le faire depuis votre profil Cumul.io. Ce doit être le propriétaire de l'organisation ayant accès à l'intégration qui crée et utilise cette clé API et ce jeton pour effectuer la demande d'autorisation SSO. Une fois que vous avez fait cela, créons d’abord un client Cumul.io qui serait réalisé côté serveur de l’application :
const Cumulio = require("cumulio"); const client = new Cumulio({ api_key: '<YOUR API KEY>', api_token: '<YOUR API TOKEN>',
});
Nous pouvons maintenant créer le jeton SSO pour l'utilisateur final. Pour plus d'informations sur cet appel API et les champs obligatoires, consultez notre documentation du développeur sur la génération SSO tokens.
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: {}
});
Ici, remarquez comment nous avons ajouté l'option metadata
champ. C'est ici que vous pouvez fournir les paramètres et les valeurs avec lesquels vous souhaitez filtrer les ensembles de données des tableaux de bord. Dans l’exemple que nous avons parcouru, nous avons filtré en fonction du département afin de l’ajouter aux métadonnées. Idéalement, vous obtiendriez ces informations auprès du fournisseur d’authentification que vous utilisez. Voir un explication détaillée sur la façon dont nous avons fait cela avec Auth0.
Cette requête renverra un objet JSON contenant un identifiant d'autorisation et un jeton qui seront ensuite utilisés comme combinaison clé/jeton pour intégrer des tableaux de bord côté client.
Quelque chose d'autre que vous pouvez éventuellement ajouter ici et qui est plutôt cool est une propriété CSS. Cela vous permettrait de définir une apparence personnalisée pour chaque utilisateur (ou groupe d'utilisateurs). Pour la même application, voici à quoi pourrait ressembler le tableau de bord marketing pour Angelina vs Brad :
Étape 2 : Intégrer
Là, on a pris un peu d'avance. Nous avons créé des jetons SSO pour les utilisateurs finaux, mais nous n'avons pas encore intégré les tableaux de bord dans l'application. Jetons un coup d'œil à cela. Tout d'abord, vous devez installer et importer le Composant Web.
import '@cumul.io/cumulio-dashboard';
Après avoir importé le composant, vous pouvez l'utiliser comme s'il s'agissait d'une balise HTML. C’est ici que vous intégrerez vos tableaux de bord :
<cumulio-dashboard dashboardId="< a dashboard id >" dashboardSlug="< a dashboard slug >" authKey="< SSO key from step 1 >" authToken="< SSO token from step 1 >">
</cumulio-dashboard>
Ici, vous aurez quelques options. Vous pouvez soit fournir l'ID du tableau de bord pour tout tableau de bord que vous souhaitez intégrer, soit fournir le slug du tableau de bord que nous avons défini dans la configuration de l'intégration (c'est pourquoi je le recommande vivement, c'est beaucoup plus lisible de cette façon). Pour des informations plus détaillées sur la façon d'intégrer des tableaux de bord, vous pouvez également consulter notre documentation développeur.
Une bonne façon de réaliser cette étape consiste bien sûr simplement à définir le squelette du composant du tableau de bord dans votre fichier HTML et à remplir le reste depuis le côté client de votre application. J'ai fait ce qui suit, même si ce n'est bien sûr pas le seul :
J'ai ajouté le composant de tableau de bord avec l'ID dashboard
:
<cumulio-dashboard id="dashboard"></cumulio-dashboard>
Ensuite, j'ai récupéré ce composant dans le code client comme suit :
const dashboardElement = document.getElementById("dashboard");
Ensuite, je demande le jeton SSO du côté serveur de mon application qui renvoie la clé et le jeton requis à ajouter au composant du tableau de bord. Supposons que nous ayons une fonction wrapper getDashboardAuthorizationToken()
cela fait cela pour nous et renvoie la réponse de la demande de jeton SSO côté serveur. Ensuite, nous remplissons simplement le composant du tableau de bord en conséquence :
const authorizationToken = await getDashboardAuthorizationToken();
if (authorizationToken.id && authorizationToken.token) { dashboardElement.authToken = authorizationToken.token; dashboardElement.authKey = authorizationToken.id; dashboardElement.dashboardSlug = "marketing|sales|leads";
}
Remarquez comment, dans les étapes précédentes, j'ai choisi de définir des slugs pour mes tableaux de bord qui font partie de cette intégration. Cela signifie que je peux éviter de rechercher les identifiants du tableau de bord et d'ajouter dashboardId
comme l'un de mes paramètres du dashboardElement
. Au lieu de cela, je peux simplement fournir une des limaces marketing
, sales
or leads
et j'ai fini ! Bien sûr, vous devrez mettre en place une sorte de processus de sélection pour votre candidature afin de décider où et quand intégrer quel tableau de bord.
C'est ça les amis ! Nous avons réussi à créer une intégration dans Cumul.io et en quelques lignes de code, nous avons pu intégrer ses tableaux de bord dans notre application 🎉 Imaginez maintenant un scénario où vous devez maintenir plusieurs applications à la fois, que ce soit au sein du même entreprise ou des entreprises distinctes. Quel que soit votre scénario, je suis sûr que vous pouvez imaginer comment si vous disposez d'un certain nombre de tableaux de bord où chacun d'eux doit se rendre à des endroits différents et chacun d'eux doit avoir des droits d'accès différents en fonction de l'endroit où ils se trouvent et ainsi de suite. .. Comment cela peut vite devenir incontrôlable. Les intégrations vous permettent de gérer cela de manière simple et soignée, le tout en un seul endroit et, comme vous pouvez le constater, principalement depuis l'interface utilisateur de Cumul.io.
Vous pouvez faire beaucoup plus ici que nous n’avons pas abordé en détail. Comme l'ajout de thèmes personnalisés et de CSS spécifiques à l'utilisateur. Nous n'avons pas non plus expliqué comment définir les paramètres et les filtres dans les tableaux de bord, ni comment les utiliser à partir de votre application hôte afin d'avoir une configuration multi-tenant. Vous trouverez ci-dessous quelques liens vers des didacticiels et de la documentation utiles sur ces étapes si vous êtes intéressé.
Source : https://css-tricks.com/embedded-analytics-made-simple-with-cumul-io-integrations/
- '
- "
- &
- 11
- 7
- 9
- 98
- accès
- Compte
- Action
- Tous
- analytique
- api
- appli
- Candidature
- applications
- article
- Authentification
- autorisation
- Bit
- l'image de marque
- constructeur
- la performance des entreprises
- Appelez-nous
- Change
- code
- Commun
- Communautés
- Société
- composant
- La création
- tableau de bord
- données
- Conception
- détail
- Développeur
- mobiles
- discorde
- se termine
- Visage
- Des champs
- filtres
- Prénom
- Focus
- formulaire
- fonction
- Bien
- Réservation de groupe
- ici
- Comment
- How To
- HTTPS
- Les êtres humains
- idée
- l'importation
- info
- d'information
- idées.
- l'intégration
- intégrations
- IT
- JavaScript
- clés / KEY :
- Liste
- Stratégie
- noms
- Soigné
- nouvelles
- Option
- Options
- organisation
- Autre
- propriétaire
- plateforme
- Produit
- Profil
- Projet
- projets
- propriété
- réponse
- REST
- Retours
- SaaS.
- vente
- sens
- set
- mise
- étapes
- So
- RÉSOUDRE
- Sponsorisé
- le monde
- thème
- fiable
- jeton
- Tokens
- tutoriels
- ui
- us
- utilisateurs
- Voir
- vision
- WHO
- dans les
- des mots
- Activités:
- vos contrats
- world