Un résumé du processus de « Vibe Coding » pour générer un dashboard interactif à partir d’une simple conversation avec une IA.
L’Objectif
L’objectif est de construire une page web (un tableau de bord) qui affiche des données provenant d’une feuille Google Sheets. Ce tableau de bord doit être dynamique, interactif et visuellement moderne, le tout en minimisant l’écriture de code manuelle grâce à l’IA.
Étape 1 : Le Prompt Initial (La Demande à l’IA)
La première étape consiste à formuler une demande claire et détaillée à l’IA. Cette demande inclut la structure des données et les spécifications de l’interface utilisateur souhaitée.
1. Structure des données (Google Sheets)
- Nom de l’onglet :
data - Colonnes : Client Name, Sales Rep, Sector, Amount.
2. Interface Utilisateur (UI)
- Design Général : Un thème « dark mode » moderne et épuré.
- Filtres : Des filtres pour la période (7 derniers jours, mois en cours, etc.), les commerciaux (Sales Rep) et les secteurs (Sector).
- Scorecards : Des cartes en haut de la page pour afficher les indicateurs clés (ex: total des ventes).
3. Section des Graphiques
- Titre : « Sales ».
- Interactivité : Un menu déroulant pour basculer la vue entre les ventes par Commercial et par Secteur.
- Type de graphique : Un diagramme à barres empilées (stacked bar chart).
- Détails : Afficher le montant total au-dessus de chaque barre et les détails au survol de la souris.
4. Tableau de Données
Sous le graphique, un tableau doit afficher les données brutes correspondant à la vue actuelle du graphique.
Étape 2 : Mise en Place Technique
Une fois que l’IA a généré le code, il faut le mettre en place dans l’environnement Google.
- Google Apps Script : Ouvrir le projet Google Sheets, aller dans `Extensions > Apps Script`.
- Création des fichiers : Créer deux fichiers principaux :
Code.gs: Pour le code côté serveur qui va chercher les données dans le Google Sheet.index.html: Pour la structure, le style (CSS) et l’interactivité (JavaScript) du tableau de bord.
- Déploiement : Déployer le script en tant qu’Application Web (`Deploy > New deployment`). Il est crucial de configurer l’accès à « Anyone » pour que la page soit visible.
- Intégration Google Sites : Copier l’URL de l’application web déployée et l’intégrer dans une page Google Sites via l’option « Intégrer » (Embed). Cela permet de partager le tableau de bord sans donner accès au Google Sheet sous-jacent.
Étape 3 : Itérations et Améliorations
Le premier résultat n’est souvent pas parfait. La phase d’itération consiste à tester le tableau de bord et à demander des ajustements à l’IA pour affiner le résultat.
### Exemples d'ajustements demandés à l'IA :
// Demande 1: Améliorer les filtres
"Transforme les filtres pour les commerciaux et les secteurs en véritables menus déroulants avec des cases à cocher pour sélectionner plusieurs options."
// Demande 2: Corriger le format des dates
"Sur le graphique, change le format des dates pour afficher 'Mois Année' (ex: Jan 2025) pour la vue mensuelle et 'Mois-Jour' pour la vue journalière."
// Demande 3: Réorganiser le graphique
"Rends le graphique plus grand en hauteur et déplace la légende en bas du graphique pour plus de clarté."
// Demande 4: Rendre le graphique redimensionnable
"Permets à l'utilisateur de redimensionner la hauteur du graphique en attrapant sa bordure inférieure avec la souris."
// Demande 5: Compacter les scorecards
"Rends les scorecards en haut de la page plus compactes."
L’IA fournit alors des morceaux de code mis à jour (HTML, CSS ou JavaScript) qu’il suffit de copier-coller dans les fichiers correspondants dans Apps Script. Le mode « Test deployment » est très utile pour voir les changements en temps réel sans avoir à redéployer complètement à chaque modification.
Le Résultat Final
Après plusieurs itérations, on obtient un tableau de bord HTML fonctionnel, responsive et visuellement agréable. Il est directement connecté aux données du Google Sheet et se met à jour automatiquement. Le tout est hébergé sur une page Google Sites, facile à partager et à consulter.
