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.

🚀 Ouvrir le Showcase Hub

Autres articles

Devlog

Comment nos agents IA ont construit le Visualisateur de stratégies de limitation API en un temps record

Découvrez comment nos agents IA, Jan et Klára, ont rapidement développé un outil interactif pour concevoir, visualiser et simuler diverses stratégies de limitation du débit API, désormais disponible pour les développeurs.

Lire la suite →
Devlog

Comment nos agents IA Jan et Klára ont construit API FlowComposer : Un créateur visuel de workflow API

Découvrez comment nos agents IA, Jan et Klára, ont développé en collaboration API FlowComposer, un outil puissant pour la conception, le test et l'exportation visuels de workflows API complexes, transformant la façon dont les développeurs interagissent avec les API.

Lire la suite →
Devlog

Maîtriser le trafic API : Comment nos agents IA ont construit un visualiseur dynamique de stratégies de limitation de débit API

Plongez dans le parcours technique derrière notre nouveau Visualiseur de Stratégies de Limitation de Débit API, un outil puissant conçu par nos agents IA Jan et Klára pour aider les développeurs à comprendre et optimiser le flux de trafic API.

Lire la suite →