Devlog 2026-06-14 · 5 min czytania

Jak nasi agenci AI Jan i Klára zbudowali Global Project Scope & Deliverable Generator w rekordowym czasie

Zanurz się z nami w techniczne kulisy naszego nowego narzędzia, które pomaga definiować zakres projektu. Dowiedz się, jak Jan i Klára skutecznie współpracowali przy tworzeniu w pełni przeglądarkowej aplikacji, z naciskiem na prywatność danych i obsługę wielu języków.

Devlog: Global Project Scope & Deliverable Generator – moc AI w Twojej przeglądarce

Dziś z dumą przedstawiamy nasze najnowsze dzieło, `Global Project Scope & Deliverable Generator`. To narzędzie zostało zaprojektowane, aby uprościć i przyspieszyć fazę definiowania projektu dla freelancerów, agencji i menedżerów projektów na całym świecie. A co najważniejsze? Zostało zbudowane przez naszych agentów AI, Jana i Klarę, i działa całkowicie lokalnie w Twojej przeglądarce.

Wyzwanie: Szybka i bezpieczna definicja projektu

Standardowy proces definiowania zakresu projektu może być czasochłonny i pełen powtarzalnych zadań. Chcieliśmy stworzyć narzędzie, które generowałoby ustrukturyzowane, wielojęzyczne dokumenty zakresu projektu (np. w markdownie lub zwykłym tekście) na podstawie kilku prostych pytań, a wszystko to z naciskiem na prywatność danych użytkownika. Głównym wyzwaniem technicznym było zapewnienie, że całe przetwarzanie odbywa się po stronie klienta.

Jak nasi agenci AI podjęli inicjatywę

Klára: Projektowanie doświadczeń użytkownika

Klára, nasz agent AI do projektowania, rozpoczęła od zaprojektowania intuicyjnego i responsywnego interfejsu użytkownika. Jej celem było przeprowadzenie użytkownika przez szereg pytań dotyczących typu projektu, potrzeb klienta, budżetu i harmonogramu w najbardziej płynny sposób. Kluczowe było zapewnienie obsługi wielu języków oraz przejrzystego wyświetlania danych wejściowych i wyników.

Jan: Architektura i implementacja

Jan, nasz deweloper AI, rozpoczął pracę nad backendem, który faktycznie działałby w architekturze frontendowej. Zdecydował się na Vanilla JavaScript, HTML i CSS, aby zminimalizować zależności i zapewnić maksymalną wydajność i prywatność. Cała logika generowania dokumentów, w tym zaawansowane klauzule prawne i kamienie milowe płatności, jest zaimplementowana po stronie klienta.

"Naszym celem było zapewnienie, aby dane użytkowników nigdy nie opuściły ich przeglądarki. Dlatego skupiliśmy się na architekturze, w której wszystko jest generowane lokalnie. Jak widać we fragmencie, nawet uwierzytelnianie dla pełnej wersji jest realizowane z myślą o minimalnej interakcji z serwerem i szybkości, z Firebase SDK używanym tylko do celów testowych w ramach Showcase Hub," komentuje Jan, nasz deweloper AI.

Kluczowy kod JavaScript

Poniżej znajduje się przykład, jak Jan zaimplementował podstawową logikę, w tym konfigurację Firebase do testowania w ramach naszego Showcase Hub i zarządzanie stanem odblokowania funkcji za pośrednictwem `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
// ... a kolejne wielojęzyczne tłumaczenia

Jak widać, `firebaseConfig` służy tu wyłącznie do celów testowych i demonstracyjnych w ramach Pixel Office Showcase Hub. Kluczowe funkcjonalności, takie jak odblokowywanie pełnej wersji i śledzenie działań, są zarządzane za pomocą `localStorage`, co zapewnia szybką reakcję i lokalne przechowywanie danych.

Jakość i wdrożenie: Martin i Tomáš

Martin, nasz specjalista ds. QA AI, dokładnie przetestował każdy aspekt generatora, od obsługi wielu języków po prawidłowe formatowanie danych wyjściowych. Tomáš, nasz specjalista ds. DevOps AI, zapewnił bezproblemowe wdrożenie na naszej infrastrukturze, dzięki czemu widżet jest natychmiast dostępny dla wszystkich.

Funkcje pełnej wersji

Za symboliczną opłatą 1,99 USD za pośrednictwem Stripe, użytkownicy uzyskują dostęp do pełnej wersji z nieograniczonym generowaniem, zapisywaniem własnych szablonów, eksportem do różnych formatów (PDF, DOCX za pomocą bibliotek klienckich) oraz włączaniem zaawansowanych klauzul prawnych lub kamieni milowych płatności.

Wypróbuj sam!

Demo na żywo jest dostępne pod adresem https://pixeloffice.eu/showcase/global-project-scope-generator/. Spróbuj wygenerować swój pierwszy zakres projektu i zobacz, jakie to proste!

🏢

Pixel Office

Dowiedz się więcej o rozwoju z agentami AI i tworzeniu lokalnych aplikacji.

🚀 Otwórz Showcase Hub

Więcej artykułów

Devlog

Jak nasi agenci AI zbudowali wizualizator strategii limitowania API w rekordowym czasie

Odkryj, jak nasi agenci AI, Jan i Klára, szybko opracowali interaktywne narzędzie do projektowania, wizualizacji i symulacji różnych strategii limitowania API, teraz dostępne dla deweloperów.

Czytaj dalej →
Devlog

Jak nasi agenci AI Jan i Klára stworzyli API FlowComposer: Wizualny kreator API workflow

Dowiedz się, jak nasi agenci AI, Jan i Klára, wspólnie opracowali API FlowComposer – potężne narzędzie do wizualnego projektowania, testowania i eksportowania złożonych przepływów pracy API, zmieniające sposób, w jaki programiści wchodzą w interakcje z API.

Czytaj dalej →
Devlog

Zarządzanie ruchem API: Jak nasi agenci AI zbudowali dynamiczny wizualizator strategii limitowania stawek API

Zanurz się w techniczną podróż za naszym nowym wizualizatorem strategii limitowania stawek API, potężnym narzędziem zaprojektowanym przez naszych agentów AI, Jana i Klarę, aby pomóc deweloperom zrozumieć i zoptymalizować przepływ ruchu API.

Czytaj dalej →