Hub Academy : prototype de formation gamifiée

Contexte du projet

Ce projet prolonge un travail de formation des collaborateurs aux outils Google Workspace. Le constat de départ : les astuces utiles existent, mais personne ne va les chercher dans une documentation. L’idée a donc été de créer un lieu où l’on a envie de revenir : un hub qui présente les astuces méconnues et les nouveautés sous forme de cartes, avec une mécanique de jeu qui récompense la curiosité.

Objectifs :

• rendre la découverte des outils ludique et régulière ;
• permettre à des non-développeurs d’ajouter et de modifier le contenu sans toucher au code ;
• n’utiliser que les outils déjà disponibles dans l’entreprise, donc aucun serveur ni budget supplémentaire.

Environnement Technologique

• Hébergement et back-end : Google Apps Script (web app servie par doGet)
• Base de données : Google Sheets (onglets Joueurs, Astuces, Formations, Admin)
• Front-end : HTML, CSS et JavaScript dans une page unique
• Illustrations des cartes : une Gem Gemini dédiée, avec une charte de style et des planches de référence
• Authentification : le compte Google Workspace de l’utilisateur

Actions réalisées

1. Une architecture sans serveur

La web app est entièrement hébergée sur Google Apps Script : une fonction doGet sert la page, et les fonctions côté serveur lisent et écrivent dans la Google Sheet, qui fait office de base de données. Ce choix évite tout serveur à administrer et s’appuie sur l’authentification Google déjà en place.

Navigateur ──▶ Apps Script (doGet) ──▶ Page HTML / CSS / JS
     │                                        │
     └──── appels serveur (google.script.run) ┘
                        │
                        ▼
                  Google Sheet
     Joueurs · Astuces · Formations · Admin

Chaque joueur occupe une ligne de l’onglet Joueurs :

2. Un contenu piloté sans code

Le contenu n’est pas écrit en dur dans le code : chaque carte est une ligne de la Sheet. Une carte se compose de champs fixes (titre, catégorie, rareté…) et de zones empilables : texte, image, ou bloc de code HTML/CSS/JS pour les démonstrations interactives. Un éditeur intégré au site écrit directement dans la Sheet : on n’a jamais besoin de rouvrir Apps Script ni la feuille de calcul pour gérer le contenu.

3. Une gestion des droits côté serveur

Quatre rôles ont été définis, et chaque droit est vérifié côté serveur, jamais seulement dans l’interface :

La zone de code est réservée aux admins pour une raison de sécurité : autoriser n’importe qui à publier du JavaScript reviendrait à ouvrir la porte à l’injection de code dans la page des autres utilisateurs (XSS).

4. La gamification : la « Hub Academy »

• XP et niveaux (un niveau tous les 100 XP), séries de jours consécutifs ;
• cartes à collectionner avec quatre raretés (Commune, Rare, Épique, Légendaire) ;
• un univers de cartes inspiré de l’histoire de l’entreprise, avec un « Le saviez-vous ? » au verso de chaque carte ;
• les cadres des cartes sont dessinés en code ; l’IA ne produit que l’illustration, selon une charte de style fixe ;
• les cartes Épiques et Légendaires sont « vivantes » : inclinaison 3D et reflet qui suit la souris.

5. Une direction artistique choisie, pas subie

Une dizaine de pistes graphiques ont été comparées avant de retenir une direction « Arcade » : thème sombre indigo, or pour tout ce qui touche au jeu, et couleurs des applications Google pour l’information.

6. Prochaine étape : la présentation à ma hiérarchie

Le Hub n’est pas encore ouvert aux collaborateurs. Une fois la V1 terminée, je la présenterai à mes responsables : c’est à eux de décider s’il est déployé, et s’il doit continuer d’évoluer. L’architecture a été pensée pour cette décision : rien à installer, aucun coût, et un contenu que l’équipe peut reprendre sans moi.

7. Gestion de projet : planification et suivi

Note de cadrage

Le projet a d’abord avancé sans planning formel, tâche après tâche. Pour préparer la présentation à ma hiérarchie, je l’ai découpé en tâches avec leurs dépendances à partir des dates réelles de fin, puis planifié la suite jusqu’à l’échéance.

Suivi prévu / réalisé

Ce que j’en retiens : le chemin critique montre que l’univers des cartes et les illustrations ont pesé plus lourd que le développement lui-même (rôles et administration terminés dès le 19/08). Pour la suite, chaque tâche a une date prévue : l’écart se mesurera à chaque étape, et la semaine de marge avant l’échéance absorbe un retard sur les tests.

8. Un prototype, pas un produit : ce qu’il faudrait pour aller plus loin

J’ai mené ce projet seul, avec les moyens disponibles. Le résultat est un prototype avancé, fonctionnel de bout en bout, mais loin de ce que livrerait une équipe de développement. Le présenter honnêtement fait partie du travail :

C’est précisément l’objet de la présentation à ma hiérarchie : montrer ce que le prototype prouve, et ce qu’il coûterait d’en faire un outil officiel.

Difficultés rencontrées & Solutions