Ügyfelünk sok egyében túl különböző gazdasági kimutatások és összefoglalók készítésével foglalkozik, amiket partnerei számára elérhetővé tesznek. Felmerült bennük az igény, hogy egy interaktív webes 3D riportot jelenítsenek meg a honlapjukról elérhetően, ami egy jól elérhető és áttekinthető, magas színvonalú értéket képvisel ahhoz, hogy széles körben is promótálják.
Kihívás:
Egy nagyon látványos marketingesek és designerek által tervezett videót kaptunk, ami felölelte az alap funkcionalitásokat és megmutatta azt a szín- és formavilágot a funkcionalitáson túl, amit meg kell valósítani. Ezen kívül egyéb specifikációt nem kaptunk és főként a vállalat business-oldali szakértőivel tudtunk egyeztetni.
A feladat az volt, hogy a kapott videónak teljesen megfelelő javascript design-t valósítsunk meg, ami telefonokon is jól működik, és az interaktív felületek és vezérlés modern UX megoldásokkal történjen.
Ezen túl 3D-s, körbejárható, módosításokra azonnal és gyorsan reagáló, árnyékokkal és látványos designelemekkel tűzdelt riportot kellett összerakni.
Kihívást jelentett az is, hogy a megjelenítendő adatok mind paraméterből jöttek, amiknek számossága bizonyos esetekben igencsak megnőtt. Az adatreprezentáció során a grafikonok kezelése és láthatóságának javítása is a feladat részét képezte.
Megoldás:
A munka a videók kielemzésével és az üzelti oldallal való megbeszélésekkel kezdődött, majd egy vázat raktunk össze, ami megmutatta, mi hogyan fog működni és előhozta a megbeszélendő illetve megoldandó feladatok széles körét.
Bevezettünk a felületre egy az oldalak közötti haladást elősegítő navigációs eszközt, a breadcrumb-ot, ami jó döntésnek bizonyult és bármely oldal könnyen elérhető let ezáltal.A UX megoldásokhoz saját tapasztalatainkra, hasonló alkalmazások megoldásaira valamint a megrendelővel közös ötletelésekre hagyatkoztunk. Egy-egy megvalósítást tesztalanyokon próbáltunk ki. A 3D megoldásokat házon belüli szakértőnk segítségével valósítottuk meg, sikerült a kezdeti szakadozó renderelést is felgyorsítani úgy, hogy élvezhető legyen a működés.
Már a kezdetektől paraméterezhetőre építettük fel a rendszert, azon pontokon, ahol kritikus volt, meghatároztunk minimum- és maximum megjeleníthető elemszámot, szükség esetén megjeleníthető szélsőértékeket is. Külön design megoldásokat dolgoztunk ki a szövegmegjelenítésre, hogy a megadott specifikációs videóhoz teljes mértékben igazodjon. Igy használtunk különféle hajlításokban és ütemekben megjelenő szövegeket, amihez már létező javascript megoldásokat is igénybevettünk.
A fejlesztést agilisen, heti sprintekben végeztük, mert fontos volt a gyakori visszajelzés.
A tesztelést manuálisan végeztük, a tesztelés alapja a video-specifikáció, valamint az ebből készült user story-k voltak.
ITware feladatai
- Projektvezetés, stratégiai projektirányítás
- Üzleti elemzési munka
- UX design
- 3D programozás
- Design
- Architektúra közös kialakítása a megrendelővel
- Technológiai döntések
- Webes felhasználói felület fejlesztés
- Integráció háttérrendszerekkel
Technikai leírás
A riportoló rendszer egy főként Javascript nyelven írt webes alkalmazás, melynek alapját a következő technológiák és szofverek szolgálják:
- Javascript
- REST – JSON
- Liferay framework
Végeredmény
Az elkészült rendszerrel sikerült egy interaktív reszponzív gyorsan és könnyen használható paraméterezhető webes riport-megjelenítőt kidolgoznunk, ami jól teljesít a különféle böngészőkön.
Egyéb fontos vívmányok
- Újrafelhasználható szövegmegjelenítés
- Újrafelhasználható grafikon megjelenítés
- Újrafelhasználható 3D riport megoldások
Jövőbeli tervek
- Tervben van a reporting rendszer további bővítése újabb megoldásokkal
- Elképzelhetőnek tartja az ügyfél – a látványos megjelenés miatt – hogy a riport nemcsak egy intaraktív riport lesz a jövőben, hanem egy interaktív kommunikációs felület az ügyfeleivel
Tech Stack: Javascript, REST, JSON, Agile, SCRUM, 3D, Graph
