ORTHO-TEAM Gruppe vyvíja a vyrába ortopedické a rehabilitačné pomôcky na mieru a stará sa o pacientov cez sieť špecializovaných centier. Žiadali si aplikáciu: na ortho-team.ch/konfigurator si človek vyberie farbu a vzhľad pomôcky, posúdi konfiguráciu v 3D priamo v prehliadači a vyexportuje ju do PDF. Vpredu Angular a Three.js, vzadu Nest.js a PostgreSQL, k tomu administrácia katalógu — tri týždne vývoja.
V skratke
Východiskový stav
Ortéza je viditeľný predmet nosený na tele, často dlhodobo, a pre toho, kto ju nosí, záleží na tom, ako vyzerá. ORTHO-TEAM si vypýtal nástroj, ktorý túto voľbu dostane na obrazovku: vybrať farbu a vzhľad pomôcky, posúdiť konfiguráciu v 3D a odísť s dokumentom, ktorý ju zaznamená. Musel sedieť vo vnútri existujúceho webu ako samostatná mini-aplikácia.
Čo sme postavili
Manažér nahrá nový 3D model, spravuje jeho farebné varianty a aktualizuje katalóg, a nová položka sa na webe objaví automaticky, bez vývojára v procese. Za týmto rozhraním drží samotný katalóg Nest.js a PostgreSQL: produkty, 3D modely, farebné varianty a ich parametre.
Vizualizácia beží na Three.js, vďaka čomu sa 3D modely správajú plynulo priamo v bežnej stránke. Klient dodal 3D súbory produktov spolu s ich farebnými variantmi a my sme postavili dynamické načítavanie modelov a ich parametrov, takže produkt a jeho možnosti prídu vtedy, keď treba. Pozrieť si pomôcku v 3D aj prepnúť farbu sa deje v prehliadači, bez pluginu a bez sťahovania.
Konfigurácia má zmysel až vtedy, keď opustí obrazovku. Export uloží zvolené nastavenie ako PDF a s tým istým dokumentom potom pracuje klient, manažér aj výroba. Zjednodušiť túto komunikáciu ďalej v reťazci bolo dôvodom, prečo si klient export vypýtal.
Konfigurátor sme postavili ako samostatnú Angular aplikáciu s vlastným katalógom a vlastnou administráciou, vloženú do webu klienta na /konfigurator/. Hlavný web si drží štruktúru aj obsah; nástroj sa dá rozširovať podľa vlastných pravidiel.
Dizajn a zariadenia
Zadanie bolo úzke: vybrať vzhľad, posúdiť ho v 3D a odniesť si výsledok ako PDF. To presunulo prácu na zrozumiteľnosť namiesto štylizácie. Človek pri obrazovke posudzuje niečo, čo možno bude mesiace nosiť na verejnosti, a nemá žiadne návyky z CAD programov, o ktoré by sa oprel, takže model musí na prvý pohľad pôsobiť ako samotná pomôcka. Rozhranie je postavené okolo produktu, s katalógom a farebnými možnosťami usporiadanými okolo neho a s exportom na konci celého toku.
Čo z toho vzišlo
Každý údaj tu opisuje dodávku: čo sme odovzdali, ako dlho to trvalo a čo klient dnes zvládne bez nás. Ten druhý sa vypláca priebežne, pretože odstraňuje opakovaný interný náklad, nie jednorazovú úlohu. Dôkazy o výkone konfigurátora sa musia merať až po spustení — začaté konfigurácie, dokončené konfigurácie, exporty do PDF — a toto meranie je položka rozsahu, ktorú oceňujeme v čase ešte pred začiatkom vývoja.
Čas implementácie konfigurátoraFront end, API, databáza a administrácia v jednom projekte.
Potrebné na zverejnenie nového modelu či farbyManažér ho nahrá v administrácii a front end ho automaticky prevezme.
Kde zákazník vidí pomôcku v 3DThree.js vykreslí model v bežnej karte prehliadača, bez pluginu a bez sťahovania.
Zdieľané klientom, manažérom a výrobouKonfigurácia odchádza z prehliadača ako súbor, ktorý otvorí každý v reťazci.
Pri tejto realizácii sú asistenti prevažne bezvýznamní a čestné je povedať to nahlas. ChatGPT, Perplexity aj AI Overviews odpovedajú z textu, ktorý si vedia prečítať, a 3D scéna držiaca svoj stav v JavaScripte im nedá nič, čo by mohli citovať. Konfigurátor bol objednaný ako nástroj pre ľudí, ktorí už na ortho-team.ch sú, a rozsah sa tam skončil. Spraviť produkty vyhľadateľnými pre asistenta je samostatná práca a mení to, ako sa stavajú stránky okolo nástroja.
Ako sme na tom pracovali
Každý projekt beží podľa písomného plánu. Takto prebiehal tento.
Prejdeme 3D súbory, ktoré už výrobca má: geometriu, materiály, ako sú oddelené farebné varianty a čo naozaj musí byť interaktívne. ORTHO-TEAM dodal modely produktov spolu s farebnými možnosťami, takže táto etapa bola revíziou existujúcich podkladov.
Z katalógu sa stanú štruktúrované dáta v PostgreSQL: produkty, modely, farebné varianty, parametre. Nest.js ich sprístupní. Od tohto bodu konfigurátor nemá žiadny natvrdo zapísaný zoznam produktov, čo je podmienka na to, aby katalóg viedol klient bez nás.
Three.js prehliadač vnútri Angular aplikácie: dynamické načítavanie modelov a ich parametrov, nastavenie kamery a osvetlenia, živé prepínanie farieb na načítanej geometrii.
Nahrať model, spravovať jeho farebné varianty, aktualizovať katalóg. Nové položky sa na webe objavia automaticky, bez zapojenia vývojára.
Generovanie PDF pre hotovú konfiguráciu, vloženie aplikácie do živého webu na vlastnej URL a zaškolenie ľudí, ktorí budú katalóg spravovať.
Dôkazy o výkone konfigurátora sa musia merať až po spustení: začaté konfigurácie, dokončené konfigurácie, exporty do PDF. Toto meranie je položka rozsahu, ktorú oceňujeme v čase ešte pred začiatkom prác. Súčasťou tohto projektu nebolo, a preto na tejto stránke nie sú žiadne čísla o používaní.
Priame odpovede
Tá vaša bude pravdepodobne podobná niektorej z nich. Ak nie, opýtajte sa priamo.
Opýtajte sa na svoj projektRovnaký tím, rovnaký postup
Napíšte nám, čo predávate a kde to predávate. Dostanete plán ako ten vyššie, s ocenením a termínom prvého kroku ešte pred začiatkom.
