Japán partnerünk az Asial Monaca rendszeréhez illesztett CI dashboardjának fejlesztési projektjében olyan új modulokat kellett elkészíteni. A fejlesztés célja, hogy az Asial ügyfeleinek – a Monaca IDE felhasználóinak – a CI pipeline-jainak eredményeit tudja megjeleníteni érthető és áttekinthető formában.
A Monaca-ide webes fejlesztőkörnyezet build szerver és CI/CD rendszer keresztplatformos (Android és iOS) mobil- valamint desktop (Electron) alkalmazások fejlesztéséhez.
A rendszerhez fejlesztett CI dashboard felület lehetővé teszi a fejlesztési metrikák (tesztek, teszteredmények, kódsorok mennyisége, bugok száma, stb) táblázatos illetve diagramos formában történő megjelenítését, így átfogó képet mutatva a fejlesztés állapotáról, amely nagyobb projektek esetén bizonyul hasznosnak.
Kihívás:
Az Asial ügyfelei nem csak webes alapú mobilfejlesztő – Cordova – eszközként használják a Monaca-t, hanem nagyobb cégeknek önálló eszközként is telepített. Egy ügyfelük COBOL – Java migráció során használja, mely támogatására szüksége volt olyan eszközre, amely a 40-50 év alatt lefejlesztett – főként banki – COBOL alkalmazások alapján elkészített tesztesetek eredményeit meg tudja jeleníteni könnyen áttekinthető formában.
Megoldás:
A fenti feladatra készült a CI dashboard, mely külön frontend illetve backend részből álló alkalmazás, a Monaca ökoszisztémához a session-ök adatait tároló Redis NoSQL adatbázison keresztül kapcsolódik. Az alkalmazás önálló adatbázissal rendelkezik, amely a GitHub-ról illetve az ügyfél által használt GitHub Enterprise-ról tölti át az alkalmazások forráskódjait illetve a szoftverek szerkezetét. A rendszerhez kapcsolódó build szerverek REST API-n keresztül rögzítik a CI pipeline-ok valamint a tesztek – integrációs és unit-tesztek – eredményét, a dashboard ezeket jeleníti meg kereshető táblázatos illetve diagramos formában. A rendszer része még egy felhasználói menedzsment felület, mellyel a jogosultsági rendszer finomhangolható illetve a megjelenített eredmények szabhatóak testre.
A feladat során továbbá az elkészült alkalmazásokat a meglévő Monaca ökoszisztémába kellett integrálni.
ITware feladatai
- Projektvezetés, stratégiai projektirányítás
- Architektúra kialakítása
- Technológiai döntések
- Backend és frontend fejlesztés
- Integráció háttérrendszerekkel és a Monaca ökoszisztémával
Technikai leírás
A CI dashboard TypeScript nyelven írt backendű illetve frontendű alkalmazás, a fejlesztés során az alábbi technológiákat alkalmaztuk:
- NodeJS, NestJS – a backend alkalmazás futtatókörnyezete illetve keretrendszere
- PostgreSQL adatbázis – a tesztek illetve metrikák tárolására
- MongoDB adatbázis – a Monaca rendszer adatbázisa
- Redis – NoSQL adatbázis munkamenet illetve cache adatok tárolására
- TypeORM – ORM réteg a backenden, adatbázis verziókövetés migrációs szkriptek segítségével
- REST API – frontend – backend, backend – GitHub illetve build szerver – backend kommunikáció
- JS – frontend keretrendszer (Vue.js, TypeScript)
- Ant design – a frontend dizájnjának alapja, Japánban elterjedt GUI keretrendszer
- js – diagramok készítéséhez használt JvaScript library
- Az alkalmazás korlátozottan (desktop, laptop, tablet) responsive design-t kapott amely a legnépszerűbb böngészőkön lett teszteve
- Docker – konténerizációs technológia, a Monaca ökoszisztéma minden eleme konténerizáltan fut
- nginx – proxy illetve reverse proxy kiszolgáló az alkalmazások előtétjeként
- Front és backend Rest API-kon keresztül kommunikál
- GitHub integráció – Szoftverek forráskódjának és struktúrájának áttöltéséhez
- A fejlesztés a SCRUM agilis keretrendszer használatával történt egy hetes sprintekre osztva, ügyfélbemutatókkal
Egyéb fontos vívmányok
- Az ITware technológiai stackjéhez adtuk a NestJS-t illetve a Nuxt.JS-t, melyek könnyedén használható backend illetve frontend keretrendszerek
Jövőbeli fejlesztési lehetőségek, tervek
- Önálllóan használható alkalmazás, mely nem csak az Asial adott, hanem bármely ügyfelénél használható
Tech Stack: : NodeJS, NestJS, PostgreSQL, Redis, MongoDB, TypeScript, TypeORM, Nuxt.JS, Vue.js, Docker, nginx, Ant design, REST API, GitHub, GitHub Enterprise
