A Webapix egy kisebb budapesti cég, ami egyedi weboldalakat és szoftvereket fejleszt ügyfeleknek, és mivel már korábban is náluk voltam gyakorlaton, most nem kellett újra bemutatkoznom vagy megismerkednem a csapattal, gyakorlatilag ugyanoda tértem vissza, ahol pár évvel ezelőtt elkezdtem. Az irodában végig laza volt a hangulat, bárkihez oda lehetett fordulni kérdéssel, és rögtön valódi munkába vontak be, nem apró, jelentéktelen feladatokat kaptam. A napjaim általában úgy néztek ki, hogy reggel bementem az irodába, röviden átbeszéltük, mi a terv aznapra, aztán a nap nagy részét kódolással töltöttem, délután pedig gyakran leültünk Balázzsal megnézni, mi készült el.
A gyakorlat alatt a legtöbb időt egy saját projektemmel töltöttem, amit Furniveau-nak neveztem el. Ez egy weboldal, amivel egyedi bútorokat lehet megtervezni 3D-ben, konyhabútortól a gardróbon át a különféle szekrényekig, és közben automatikusan kiszámolja azt is, mennyi anyagra és vasalatra lesz szükség, és mennyibe fog kerülni az egész. Az ötlet onnan indult, hogy az egyetemi éveim alatt apukámmal négy lakást is felújítottunk, és mindent mi magunk csináltunk meg: én raktam le a parkettát, bontottam falat, vakoltam, én kötöttem be a villanyvezetékeket, és a bútort is mi terveztük meg, eddig papíron. Csakhogy papíron nagyon sokszor volt elmérés vagy rossz arány, mert egyáltalán nem olyan életszerű, mint amikor az ember tényleg ott áll a szobában, és néha egy-egy számolási hiba is becsúszott, ami elég sokba került, amikor emiatt újra kellett vágatni az anyagot. Ezért gondoltam arra, hogy csinálok egy olyan alkalmazást, amivel ez elkerülhető, és amiből később akár egy üzleti ötlet is lehetne. A Webapixnél gyakorlatilag szabad kezet kaptam, hogy ezt a saját ötletemet végigvigyem az elejétől a kész, működő állapotig.
Laravellel (PHP) építettem fel a háttérrendszert, Vue.js-sel és Inertia.js-sel a felhasználói felületet, a 3D-s tervezőt pedig Three.js segítségével csináltam meg. A Three.js-hez korábban nem nagyon értettem, úgyhogy az elején sokat kellett tanulnom arról, hogyan működik a 3D-s térben a kamera, a fény vagy egy tárgy forgatása, mire eljutottam odáig, hogy ténylegesen bútort tudjak vele megjeleníteni. A tervezőben lehet mozgatni, méretezni és csoportosan is szerkeszteni a bútorelemeket, ha pedig közel kerülnek egymáshoz vagy egy fal széléhez, mágnesesen is összeillenek, hogy ne kelljen milliméter pontossággal kattintgatni. Mozgatás közben folyamatosan kiírja a képernyőre, mekkora a távolság a szomszédos elemekhez és a szoba faitól is, úgyhogy mindig látszik, ha valami túl közel kerülne valamihez. Van benne visszavonás és mégis funkció is, méghozzá nemcsak a bútorra, hanem a szoba szerkesztésére is, tehát egy elrontott lépést mindig vissza lehet csinálni.
A bútorok nagy részét nem kézzel kell összerakni darabonként, hanem vannak hozzá automatikus generátorok, amihez groq ai-t implementáltam, meg lehet adni egy konyhabútor-sor vagy egy gardrób teljes méretét, hány modulból álljon, és a program legenerálja hozzá az összes panelt, ajtót, fiókot a megfelelő méretekkel. A gardróbszekrényeknél külön kidolgoztam, hogy egy modulon belül lehessen polcos, fiókos vagy akasztós rész, akár keverve is egy modulban, méghozzá úgy, hogy a két rész közötti arányt utólag húzogatva is át lehet állítani, és eldönthető az is, hogy a két résznek külön ajtaja legyen, vagy csak egy közös, nagyobb ajtó fedje mindkettőt. Az ajtóknál lengő és tolóajtós kivitel közül is lehet választani, a modulok szélességét pedig szintén lehet egyenként húzogatva állítani, nem csak egyenlően elosztva a teljes szélességen, és eközben minden modul mérete folyamatosan ki van írva, hogy lásd, mekkora lesz a végeredmény.
Emellett bekerült egy verziózó rendszer is, amivel egy korábban mentett tervet vissza lehet állítani, vagy külön, önállóan tovább szerkeszthető projektként meg lehet nyitni, ha valaki egy régebbi állapotból szeretne új irányba elindulni. Csináltam egy sablonrendszert is, amivel egy elkészült tervet el lehet menteni újrafelhasználható mintaként, hogy legközelebb ne kelljen nulláról kezdeni egy hasonló bútort. Belekerült egy 2D-s alaprajz-szerkesztő is, amiben a szoba falait, ajtóit és ablakait lehet megtervezni, ez pedig a 3D-s nézetben is megjelenik a bútorok körül, úgyhogy nemcsak a bútort, hanem azt is látni lehet, hogyan fog kinézni az egész a valódi szobában, felülnézetből is. Van benne automatikus vasalat- és anyagszükséglet-számítás, valamint a kész terv szabásjegyzékét egy kattintással Excel-fájlba is ki lehet exportálni, hogy rögtön oda lehessen adni a gyártáshoz. A felületet hat nyelvre is lefordítottam: magyarra, angolra, németre, spanyolra, románra és kínaira, hogy ne csak magyar ügyfelek tudják használni.
Nem volt mindig egyszerű, és néhány részhez elég komoly matekra volt szükség. Az egyik legnagyobb fejtörést az ütközésvizsgálat okozta, vagyis, hogy a program felismerje, ha két bútordarab egymásba lógna. Ehhez minden elemet egy egyenes tengelyekhez igazított téglatesttel írtam le, aminek a pozíció és a méret alapján kiszámolható a minimum és maximum koordinátája mindhárom tengelyen. Két ilyen téglatest akkor ütközik, ha mindhárom tengelyen átfedésben van egymással, ha akár csak egy tengelyen sincs átfedés, a két elem nem ér egymáshoz. Amikor valaki húz egy bútort az egérrel, ezt minden mozdulatnál újra ki kell számolni az összes többi elemhez képest, és ha ütközést találna, a programnak addig a pontig kell engednie a mozgást, ameddig még nem ütközik, ehhez a mozgást apró lépésekre bontva számoltam végig, nem csak a végpontot vizsgáltam, mert egy gyors húzás egyébként könnyen átcsúszhatott volna egy másik bútoron anélkül, hogy a program észrevette volna.
A mágneses illesztéshez minden mozgatott elem szélét összehasonlítottam a közelben lévő elemek széleivel, és kiszámoltam a köztük lévő távolságot mindkét vízszintes tengelyen. Ha ez a távolság egy bizonyos érték, körülbelül két-három centiméter alá esett, a program automatikusan pontosan odaigazította az elemet, mintha nulla lenne a rés, hogy a bútorok szépen összeérjenek egymással vagy a fallal, anélkül, hogy pixelre pontosan kellene célozni az egérrel. Ugyanezt a logikát használtam ahhoz is, hogy mozgatás közben folyamatosan kiírja a képernyőre a legközelebbi szomszédhoz vagy a szoba faihoz mért távolságot, ehhez a szoba falainak belső élét kellett kiszámolnom a fal vastagsága alapján, és azt hasonlítottam a bútor dobozának széléhez minden egyes irányban.
A vegyes belső kialakítású gardróbmoduloknál, ahol például egy fiókos és egy akasztós rész van egymás alatt vagy mellett, külön matekot igényelt, hogy a két rész aránya utólag is állítható legyen. Ehhez egy nulla és egy közötti számmal fejeztem ki, mekkora hányadot kapjon az első rész a rendelkezésre álló helyből, a köztük lévő elválasztó lap vastagságát pedig előre levontam a teljes méretből, mielőtt szétosztottam a két rész között, hogy a végén pontosan kiadja a modul teljes méretét, hézag vagy átfedés nélkül. Sok időbe telt az is, mire a kamera mozgatása kényelmesen működött: eleinte könnyű volt túl közel zoomolni egy bútorhoz, vagy éppen a padló alá kerülni forgatás közben, és onnantól alig lehetett visszatalálni, ezt végül azzal oldottam meg, hogy korlátoztam, milyen közel mehet a kamera, és lekorlátoztam azt is, hogy a nézőpont sose kerülhessen a padlószint alá. Ezeket a problémákat úgy oldottam meg, hogy sokat teszteltem, kipróbáltam különböző elrendezéseket és beállításokat, és amikor teljesen elakadtam, megbeszéltem Balázzsal, aki a Webapixtől segített.
Balázs egész nyáron figyelemmel kísérte, amit csináltam. Hetente átbeszéltük, hol tartok, mi legyen a következő lépés, és sokszor adott olyan ötleteket, amik alapjaiban meghatározták, hogy egy-egy funkció végül hogyan nézzen ki. Ez alatt tanultam meg igazán jól használni a Laravelt és a Vue-t, és azt is, hogyan érdemes egy nagyobb projektet lépésről lépésre felépíteni, ahelyett, hogy mindent egyszerre akarnék megcsinálni. Azt hiszem, ez utóbbi volt a legfontosabb tanulság: elsőre mindig sokkal egyszerűbbnek tűnt egy funkció, mint amilyen a végén lett, úgyhogy meg kellett tanulnom kisebb darabokra bontani a munkát. Néhányszor bepillanthattam a cég többi, ügyfeleknek készülő projektjébe is, ami szintén sokat segített abban, hogy lássam, hogyan zajlik ez élesben, egy valódi cégnél.
Tatum fotósként, Péter pedig festőként dolgozik a műteremben, úgyhogy esténként, munka után sokszor beleláttam abba is, hogyan alkotnak. Jó volt látni, hogy valaki egészen más területen dolgozik kreatívan, mint amit én csinálok a laptop előtt. Rajtuk keresztül eljutottam pár kiállításra is, ahol az egyiken még a képek kirakásában is segítettem, sőt Péter biztatására én magam is festettem néhányszor, pedig ezelőtt sosem csináltam ilyet. Furcsa volt eleinte ecsetet fogni számítógépes munka után, de nagyon jó élmény volt, és teljesen más volt, mint egész nap kódot írni. Nagyon jó volt ez az időszak, jó társaságban, és ez is hozzátett ahhoz, hogy jól érezzem magam Budapesten, ne csak a munka és a szállás között teljen az idő.
Összességében nagyon hasznos volt ez a pár hónap. A Furniveau projekt miatt sokat fejlődtem szakmailag, Balázs segítségével pedig olyan dolgokat tanultam meg, amiket egyedül nehezebben sikerült volna, legyen szó akár konkrét technológiákról, akár arról, hogyan érdemes egy nagyobb feladathoz hozzáállni. A budapesti élet és a barátaim pedig azt adták hozzá, hogy ez ne csak egy munka legyen, hanem egy jó nyár is. Ha most visszagondolok az egészre, azt hiszem, ez volt eddig a legtöbbet érő szakmai tapasztalatom, és szívesen mennék vissza akár egy hasonló lehetőségért is.
Sapientia - Erdélyi Magyar Tudományegyetem
A Sapientia Erdélyi Magyar Tudományegyetem a romániai magyarság önálló egyeteme Európában, melynek célja nemzeti közösségünk oktatásának és tudományos életének elismert szakmai színvonalon való művelése.
Marosvásárhelyi Kar
Marosvásárhely/Koronka, Calea Sighișoarei nr. 2.
Postacím: 540485 Târgu-Mureş, O.p. 9, C.p. 4
Tel: +40 265 206 210, fax: +40 265 206 211
E-mail: office@ms.sapientia.ro
