Configurer Supabase Realtime
Supabase Realtime diffuse les changements de base de données (INSERT, UPDATE, DELETE) aux clients abonnés via une connexion WebSocket. Pour l'activer :
1. Dans votre tableau de bord Supabase, allez dans Database → Replication 2. Activez la réplication pour les tables que vous souhaitez observer (ex : `metrics`, `events`, `orders`) 3. Définissez des politiques RLS sur ces tables — Supabase Realtime respecte RLS, donc les utilisateurs ne reçoivent que les changements des lignes qu'ils sont autorisés à voir
Cela prend 2 minutes. La vraie complexité est côté frontend — gérer le flux de changements et mettre à jour l'interface.
Note importante pour la conformité RGPD : Supabase Realtime étant hébergé dans la région UE (Frankfurt), le flux de données ne quitte pas l'Europe. Pour les tableaux de bord affichant des données personnelles ou sensibles, documentez ce point dans votre registre des traitements RGPD.
Connecter WeWeb à Supabase Realtime
Le plugin Supabase de WeWeb supporte les abonnements temps réel nativement. Dans WeWeb :
1. Allez dans Plugins → Supabase → votre source de données 2. Activez "Realtime" sur la collection que vous souhaitez surveiller 3. WeWeb s'abonne automatiquement aux changements et met à jour les éléments liés quand un changement arrive
Pour un tableau de bord de métriques lié à une table `metrics` : ajoutez une Collection liée à la table, activez Realtime, et liez les éléments graphiques/numériques à la collection. Quand une nouvelle ligne métrique est insérée dans Supabase, le tableau de bord se met à jour en moins de 500 ms sans aucune action de l'utilisateur.
Ce comportement temps réel est particulièrement précieux pour les équipes opérationnelles qui monitent des KPIs en temps réel — centres de contacts, équipes e-commerce pendant une promotion, salles de trading.
Construire la mise en page du tableau de bord
Un tableau de bord temps réel typique a trois zones :
**Bande KPI** : 3 à 4 grandes cartes numériques en haut. Chacune liée à un agrégat (SOMME, COMPTE, MOYENNE) depuis une vue Supabase. Dans WeWeb, créez une vue dans Supabase qui pré-calcule les agrégats et liez les cartes KPI à la collection temps réel de cette vue.
**Graphiques** : graphique en courbes pour les données de série temporelle, graphique en barres pour les comparaisons, camembert pour la distribution. WeWeb dispose d'un composant Chart intégré propulsé par Chart.js. Liez la propriété `data` à une collection Supabase ordonnée par `created_at`.
**Table de données** : une table triable et filtrable pour les événements bruts. Le composant DataGrid de WeWeb avec recherche, tri et pagination. Activez Realtime pour que les nouvelles lignes apparaissent en haut au fur et à mesure de leur arrivée.
Pour le marché français, pensez à localiser les formats : dates en JJ/MM/AAAA, nombres avec virgule décimale, montants en € avec séparateur de milliers.
Filtrage par plage de dates
Chaque tableau de bord a besoin de contrôles de plage de dates. Pattern :
1. Ajoutez une barre de filtres avec des boutons de préréglage : 24 dernières heures, 7 derniers jours, 30 derniers jours, plage personnalisée 2. Créez une variable de page `dateRange` avec les timestamps de début et de fin 3. Passez `dateRange` comme filtre à chaque collection Supabase : `.gte("created_at", dateRange.start).lte("created_at", dateRange.end)` 4. Quand l'utilisateur sélectionne une plage différente, mettez à jour `dateRange` — toutes les collections se rechargent automatiquement
Pour les plages de dates personnalisées, utilisez le composant Date Picker de WeWeb et liez les deux inputs à `dateRange.start` et `dateRange.end`.
Considérez également l'ajout d'un indicateur de fuseau horaire dans l'interface. Pour les SaaS avec des clients dans plusieurs régions (courant pour les entreprises françaises avec des filiales en Europe), la gestion des fuseaux horaires est source de confusion fréquente dans les dashboards.
Row-Level Security pour les tableaux de bord multi-tenants
Pour les tableaux de bord SaaS où chaque client ne voit que ses propres données :
Créez une politique RLS sur votre table de métriques qui autorise la lecture uniquement si l'org_id de la ligne appartient aux organisations dont l'utilisateur connecté est membre. La politique vérifie que l'org_id est dans la liste des org_ids de la table memberships pour l'utilisateur authentifié.
Cette politique signifie que la même URL de tableau de bord fonctionne pour tous les clients — chacun ne voit que les données de son organisation. Aucun filtrage nécessaire dans WeWeb. Supabase l'applique au niveau de la base de données.
Critique : testez cela en vous connectant en tant qu'utilisateurs de deux organisations différentes et en confirmant que les données sont bien isolées. Un bug RLS dans un tableau de bord est une grave fuite de données — potentiellement une violation RGPD notifiable à la CNIL dans les 72 heures si des données personnelles sont exposées.
Optimisation des performances pour les grands jeux de données
Les tableaux de bord avec des millions de lignes ralentissent rapidement si vous exécutez des agrégats sur des données brutes.
**Créez des vues Supabase pour les agrégats** : créez une vue matérialisée `daily_metrics` qui agrège les events par jour (date, count, sum). Rafraîchissez la vue matérialisée toutes les heures via un job cron Supabase Edge Function.
**Utilisez des indexes** : ajoutez un index sur `(org_id, created_at)` pour chaque table filtrée par organisation et par temps. Cela transforme une requête de 5 secondes en une requête de 50 ms.
**Paginez la table brute** : ne chargez jamais toutes les lignes dans le tableau de bord. Utilisez `.range(0, 99)` de Supabase pour la table de données et laissez les utilisateurs paginer. Cela maintient le chargement initial rapide quel que soit le nombre total de lignes.
Pour les tableaux de bord métier critiques (suivi des ventes, monitoring opérationnel), définissez des SLAs de performance dès le début : temps de chargement initial < 2 secondes, actualisation temps réel < 500 ms. Ces objectifs guideront vos décisions d'architecture d'indexation et d'agrégation.