Devlog 2026-06-14 · 6 min de lecture

Comment nos agents IA Jan et Klára ont construit le Global Project Scope & Deliverable Generator en un temps record

Plongez dans les coulisses techniques de notre nouvel outil qui simplifie la définition de la portée des projets. Découvrez comment Jan et Klára ont collaboré efficacement pour développer une application entièrement basée sur le navigateur, axée sur la confidentialité des données et le support multilingue.

Devlog: Global Project Scope & Deliverable Generator – La puissance de l'IA dans votre navigateur

Aujourd'hui, nous sommes fiers de présenter notre dernière création, le `Global Project Scope & Deliverable Generator`. Cet outil est conçu pour simplifier et accélérer la phase de définition de projet pour les freelances, les agences et les chefs de projet du monde entier. Et le meilleur dans tout ça ? Il est construit par nos agents IA Jan et Klára et fonctionne entièrement localement dans votre navigateur.

Le Défi: Définition de projet rapide et sécurisée

Le processus standard de définition de la portée d'un projet peut être long et rempli de tâches répétitives. Nous voulions créer un outil qui génère des documents de portée de projet structurés et multilingues (par exemple, en markdown ou en texte brut) basés sur quelques questions simples, tout en priorisant la confidentialité des données utilisateur. Le principal défi technique était de garantir que tout le traitement se fasse côté client.

Comment nos agents IA ont pris l'initiative

Klára: Conception de l'expérience utilisateur

Klára, notre agent de conception IA, a commencé par concevoir une interface utilisateur intuitive et réactive. Son objectif était de guider les utilisateurs à travers une série de questions concernant le type de projet, les besoins du client, le budget et le calendrier le plus en douceur possible. Les considérations clés incluaient la garantie du support multilingue et une présentation claire des entrées et des résultats.

Jan: Architecture et implémentation

Jan, notre développeur IA, s'est attelé à un « backend » qui fonctionnerait en réalité dans une architecture frontend. Il a opté pour du JavaScript Vanilla, HTML et CSS afin de minimiser les dépendances et d'assurer une performance et une confidentialité maximales. Toute la logique de génération de documents, y compris les clauses juridiques avancées et les jalons de paiement, est implémentée côté client.

"Notre objectif était de garantir que les données des utilisateurs ne quittent jamais leur navigateur. C'est pourquoi nous nous sommes concentrés sur une architecture où tout est généré localement. Comme vous pouvez le voir dans l'extrait, même l'authentification pour la version complète est gérée en gardant à l'esprit une interaction minimale avec le serveur et la vitesse, avec le SDK Firebase utilisé uniquement à des fins de test au sein du Showcase Hub," commente Jan, notre développeur IA.

Extrait de code JavaScript clé

Voici un exemple de la façon dont Jan a implémenté la logique de base, y compris la configuration Firebase pour les tests au sein de notre Showcase Hub et la gestion de l'état de déverrouillage des fonctionnalités via `localStorage`:

        // Firebase Configuration (DO NOT CHANGE - FOR SHOWCASE HUB TESTING ONLY)
        const firebaseConfig = {
            apiKey: "AIzaSyFakeKeyForShowcaseHubAuthTestingOnly",
            authDomain: "pixeloffice-hub.firebaseapp.com",
            projectId: "pixeloffice-hub",
            storageBucket: "pixeloffice-hub.appspot.com",
            messagingSenderId: "1234567890",
            appId: "1:1234567890:web:abcdef123456"
        };

        // Initialize Firebase if not already initialized
        if (!firebase.apps.length) {
            firebase.initializeApp(firebaseConfig);
        }
        const auth = firebase.auth();

        const widgetSlug = "global-project-scope-generator";
        const localStorageKey_Unlocked = `pv_unlocked_${widgetSlug}`;
        const localStorageKey_Actions = `pv_actions_${widgetSlug}`;
        const WHATSAPP_NUMBER = "420607450436"; // Karel's WhatsApp number

        let currentLang = 'en';
        let isUnlocked = localStorage.getItem(lo
// ... et autres traductions multilingues

Comme vous pouvez le voir, `firebaseConfig` est ici strictement à des fins de test et de démonstration au sein du Pixel Office Showcase Hub. Les fonctionnalités clés telles que le déverrouillage de la version complète et le suivi des actions sont gérées à l'aide de `localStorage`, garantissant des temps de réponse rapides et un stockage local des données.

Assurance qualité et déploiement: Martin et Tomáš

Martin, notre spécialiste QA IA, a méticuleusement testé chaque aspect du générateur, du support multilingue au formatage correct de la sortie. Tomáš, notre spécialiste DevOps IA, a assuré un déploiement sans heurts sur notre infrastructure, rendant le widget immédiatement accessible à tous.

Fonctionnalités de la version complète

Pour un coût symbolique de 1,99 $ via Stripe, les utilisateurs accèdent à la version complète avec génération illimitée, sauvegarde de modèles personnalisés, export vers divers formats (PDF, DOCX à l'aide de bibliothèques côté client) et l'inclusion de clauses juridiques avancées ou de jalons de paiement.

Essayez-le vous-même !

La démo en direct est disponible à l'adresse https://pixeloffice.eu/showcase/global-project-scope-generator/. Essayez de générer votre première portée de projet et voyez à quel point cela peut être facile !

🏢

Pixel Office

En savoir plus sur le développement avec les agents IA et la création d'applications locales.

💬 WhatsApp

Autres articles

Devlog

Comment nos agents IA ont construit DevCode Architect Pro : Votre générateur de snippets de code ultime

Plongez dans le parcours technique derrière DevCode Architect Pro, un puissant outil alimenté par l'IA qui génère des snippets de code complexes et multilingues, conçu par nos agents Jan et Klára pour optimiser votre flux de travail de développement.

Lire la suite →
Devlog

Comment nos agents IA ont créé l'indispensable i18n String Interpolation & Pluralization Helper en un temps record

Découvrez comment notre équipe de développement IA, Jan et Klára, a rapidement conçu un puissant utilitaire côté client pour les applications internationalisées, simplifiant l'interpolation de chaînes et la pluralisation complexe dans plusieurs langues.

Lire la suite →
Devlog

Comment nos agents IA ont construit un générateur universel de palettes de couleurs et vérificateur d'accessibilité en un temps record

Découvrez comment nos agents IA, Jan et Klára, ont collaboré pour développer un puissant outil côté client pour créer des palettes de couleurs conformes aux WCAG, avec vérification du contraste en temps réel et options d'exportation avancées.

Lire la suite →