Konfigurator produktu. Wycena i wizualizacja wiaty w jednym narzędziu

01. Punkt wyjścia

Klient produkuje wiaty garażowe i ogrodowe na indywidualne zamówienie. Każda konstrukcja różni się wymiarami, liczbą i rozmieszczeniem ścianek, rodzajem pokrycia dachu oraz kolorystyką. Nie istnieje katalog gotowych produktów, który wystarczyłoby przekartkować.

Wycena powstawała ręcznie. Osoba przygotowująca ofertę przeliczała zapotrzebowanie na materiał osobno dla każdego zamówienia: długości profili, powierzchnię pokrycia, liczbę elementów mocujących. Wynik zależał od doświadczenia i uwagi liczącego, a przy nietypowych wymiarach łatwo było przeszacować zamówienie materiału albo, co gorsze, zaniżyć je i wykryć braki dopiero na etapie produkcji.

Osobnym problemem była kolorystyka. Klient oglądał barwy na fizycznym wzorniku, czyli na próbce wielkości kilku centymetrów, i na tej podstawie próbował wyobrazić sobie efekt na konstrukcji o powierzchni kilkudziesięciu metrów kwadratowych. Rozbieżność między wyobrażeniem a gotową realizacją była źródłem rozczarowań, a czasem także reklamacji.

02. Rozwiązanie

Zbudowaliśmy konfigurator, w którym jedno wprowadzenie parametrów daje jednocześnie wizualizację, zestawienie materiału i wycenę.

Producent określa wymiary konstrukcji, dodaje elementy opcjonalne takie jak ścianki, wybiera materiał pokrycia dachu oraz kolory poszczególnych części. Model wiaty przebudowuje się na bieżąco wraz z każdą zmianą parametru, więc klient widzi konkretną konstrukcję w konkretnych barwach, a nie próbkę koloru oderwaną od kontekstu.

Równolegle z wizualizacją przeliczane jest zapotrzebowanie na materiał i koszt zamówienia. Na końcu procesu system generuje ofertę w formacie PDF, gotową do przekazania klientowi.

03. Przebieg procesu

1. Wprowadzenie wymiarów konstrukcji.
2. Dobór elementów dodatkowych, w tym ścianek i ich rozmieszczenia.
3. Wybór materiału pokrycia dachu oraz kolorystyki poszczególnych elementów.
4. Weryfikacja zestawienia materiałowego i kosztu.
5. Wygenerowanie oferty PDF dla klienta.

Wizualizacja aktualizowana na bieżąco

Konstrukcja prezentowana jest jako przestrzenny model, który można obracać i oglądać z dowolnej strony. Zmiana wymiaru, dodanie ścianki czy wybór innego koloru przebudowuje model natychmiast, bez przeładowania strony i bez oczekiwania na render.

Barwy odwzorowane są w warunkach zbliżonych do rzeczywistych, z uwzględnieniem połysku i faktury materiału. Rozmowa o kolorze przestaje opierać się na wyobraźni klienta, a decyzja zapada przed uruchomieniem produkcji, nie po jej zakończeniu.

Zestawienie materiału zamiast szacunku

Za wyliczeniami stoi model konstrukcji opisany regułami: z podanych wymiarów i wybranych opcji system wyprowadza pełną listę elementów wraz z długościami i powierzchniami. Zestawienie uwzględnia rozkrój materiału, czyli sposób podziału profili i arkuszy na potrzebne odcinki, tak aby ograniczyć ilość odpadu.

Efektem jest zamówienie materiałowe oparte na wyliczeniu, a nie na zapasie doliczanym z ostrożności. Ta sama lista stanowi podstawę wyceny, dzięki czemu koszt oferty i koszt produkcji wynikają z jednego źródła.

Oferta na końcu procesu

Dokument dla klienta powstaje z tej samej konfiguracji, która została zwizualizowana na ekranie. Zawiera specyfikację konstrukcji, wybrane materiały i kolory, wizualizację oraz cenę. Nie wymaga przepisywania danych do osobnego dokumentu, więc znika ryzyko, że oferta rozminie się z ustaleniami.

Wykorzystane technologie

Poniższy zestaw odpowiada charakterowi tego rozwiązania:

• Frontend: React, TypeScript, Vite, Tailwind CSS
• Wizualizacja 3D: Three.js z react-three-fiber, model parametryczny generowany z wprowadzonych wymiarów
• Stan konfiguracji: Zustand, walidacja parametrów przez Zod
• Backend: Node.js, Fastify, TypeScript
• Baza danych: PostgreSQL, Prisma ORM
• Logika wyceny: silnik reguł materiałowych z algorytmem rozkroju
• Generowanie oferty: React i Puppeteer, dokument PDF z wizualizacją
• Wdrożenie: Docker, nginx, certyfikat Let’s Encrypt

Dlaczego dedykowana aplikacja

Rozwiązanie tej klasy trudno oprzeć na gotowej wtyczce sklepowej, ponieważ produkt nie ma skończonej liczby wariantów. Kombinacji wymiarów, dodatków i kolorów są tysiące, a każda z nich musi przełożyć się na poprawne zestawienie materiału. Wymaga to własnego modelu konstrukcji i własnych reguł wyceny, utrzymywanych po stronie producenta.

04. Rezultaty

Wycena przestała być osobnym zadaniem wykonywanym po rozmowie z klientem. Powstaje w trakcie konfiguracji, razem z wizualizacją, i opiera się na tym samym zestawieniu materiałowym, które trafia później na produkcję.

Zamówienie materiału wynika z wyliczenia, nie z zapasu. Ograniczenie odpadu przekłada się bezpośrednio na koszt jednostkowy konstrukcji, a przy produkcji na indywidualne zamówienie ten koszt decyduje o marży.

Klient podejmuje decyzję o kolorystyce, widząc gotową konstrukcję, a nie próbkę na wzorniku. Rozmowa handlowa przenosi się z opisywania na pokazywanie, a liczba nieporozumień co do efektu końcowego spada.

Oferta przekazywana jest podczas spotkania lub bezpośrednio po nim, w formie dokumentu zgodnego z tym, co klient widział na ekranie.