Créer des tableaux de bord pour Supabase

Découvrez comment créer des tableaux de bord à partir de données Supabase, en commençant par un tableau de bord KPI qui suit les inscriptions d’utilisateurs, le nombre total d’utilisateurs, et les applications ajoutées à la plateforme. Il montre ensuite comment créer des graphiques de classement pour les meilleures applications et utilisateurs, personnaliser les types et mises en page de graphiques, et utiliser des variables pour une analyse temporelle flexible. Tom construit aussi un tableau de bord « Détails de l’application » qui utilise un sélecteur de variable pour explorer des applications individuelles, montrant des métriques spécifiques comme le nombre d’utilisations, les utilisateurs associés, et les icônes. Il souligne la prise en charge par Basedash des requêtes en langage naturel, de l’édition SQL, et de l’intégration de plusieurs sources de données comme Stripe, Google Analytics, et Sentry pour construire une vue complète et interactive de vos données produit ou métier.

Transcription

Salut, c’est Tom. Je vais vous montrer comment configurer un tableau de bord dans Basedash pour Supabase, l’un de nos produits préférés. Nous l’utilisons pour toutes nos données de démo ici chez Basedash.

Je vais vous guider à travers :

• La connexion de Supabase à Basedash
• La configuration d’un tableau de bord pour suivre les KPI et les statistiques d’adoption
• La création d’un tableau de bord pour inspecter un utilisateur spécifique dans votre application

Étape 1 : Connecter la base de données

J’ai déjà connecté la base de données Supabase.

Vous verrez un indicateur montrant qu’elle est connectée.

Nous utilisons un schéma appelé Doc Hunt, qui est assez simple :

• users
• docs
• apps

Cette application permet de partager des éléments dans votre doc, un peu comme un mini réseau social que nous avons créé.

Étape 2 : Créer un tableau de bord KPI

Cliquez sur Nouveau tableau de bord, et nommez-le KPI.

Ajoutons maintenant quelques graphiques :

Métriques clés

• Inscriptions d’utilisateurs dans le temps
• Nombre total d’utilisateurs
• Nombre d’applications ajoutées

Cela nous donne un bon aperçu :

• Qui s’inscrit
• Combien d’utilisateurs nous avons
• Ce qui est ajouté à la plateforme

Étape 3 : Métriques de classement

Allons plus loin en classant les données.

• « Montre-moi les applications les plus ajoutées dans un doc. »
• « Montre-moi les utilisateurs ayant le plus d’abonnés. »

Cela nous donne un joli classement :

• Google Chrome est l’application la plus ajoutée, suivie de Visual Studio Code.
• Nous pouvons aussi voir les meilleurs utilisateurs par usage ou popularité des applications.

Étape 4 : Personnalisation du tableau de bord

Vous pouvez réorganiser les composants du tableau de bord comme vous le souhaitez :

• Réduire la taille des métriques principales
• Déplacer les graphiques
• Changer les types de graphiques (par exemple, graphique en ligne -> barre temporelle)

Basedash ajoute aussi des variables en haut du tableau de bord pour que vous puissiez :

• Changer les plages de dates
• Choisir comment les données sont regroupées (par exemple, quotidien, hebdomadaire)

Vous pouvez également :

• Agrandir les graphiques en plein écran
• Voir l’historique complet des conversations
• Revenir à des versions précédentes
• Modifier les requêtes directement dans l’éditeur SQL

Le navigateur de schéma sur le côté vous aide à explorer et copier des valeurs dans vos requêtes.

Étape 5 : Tableau de bord des détails de l’application

Créons un autre tableau de bord appelé Détails de l’application.

Ce tableau de bord nous permettra d’inspecter des applications spécifiques :

« Montre-moi les détails d’une application. »

Basedash interprète cela et recherche :

• Une table correspondant à votre demande
• Une variable pouvant alimenter un sélecteur (menu déroulant) pour l’application

Il en a choisi une (par ordre alphabétique), mais je vais définir la valeur par défaut sur Basedash.

Étape 6 : Vue du profil de l’application

Ajoutons maintenant plus de détails :

• « Montre-moi l’icône de l’application. »
• « Montre-moi les personnes qui ont cette application dans leur doc. »
• « Montre-moi le nombre de fois où cette application a été ajoutée. »

Cela crée une vue de profil de l’application :

• Icône en haut
• Liste des utilisateurs ayant ajouté l’application (vous m’y verrez, par exemple)
• Nombre total comme KPI principal

Vous pouvez aussi changer d’application (par exemple, sélectionner Figma) et voir :

• Figma a été ajoutée 98 fois
• La liste des personnes qui l’utilisent

Étape 7 : Intégrer des données supplémentaires

L’un des meilleurs aspects de Basedash est que vous pouvez intégrer n’importe quelle donnée connectée.

En ce moment, nous utilisons uniquement Supabase, mais vous pourriez aussi connecter :

• Stripe (pour afficher les factures, les ventes dans le temps)
• Sentry (pour afficher les erreurs dans le temps)
• Google Analytics
• Google Ads
• LinkedIn Ads
• Des outils de suivi d’événements comme PostHog
• Des outils de marketing par e-mail comme ActiveCampaign

Il y a plus de 750 sources de données que vous pouvez connecter à Basedash.

Allez simplement dans Sources de données > Ajouter une source et choisissez ce dont vous avez besoin.

Réflexions finales

En utilisant le langage naturel, vous pouvez construire des tableaux de bord puissants à partir de plusieurs services, tout cela au sein de Basedash.

J’ai hâte de voir ce que vous allez créer. Faites-nous savoir si vous avez des questions.

C’est tout pour aujourd’hui. À bientôt !