Céges autók számontartására készített applikáció a Microsoft Magyarország részére Szerző neve
Konzulens
Zih Krisztián Informatika Kar Debreceni Egyetem, Debrecen, Magyarország
[email protected]
Erdei Timotei István Villamosmérnöki és Mechatronikai Tanszék Debreceni Egyetem, Műszaki Kar Debrecen, Magyarország
[email protected] deb.hu
Absztrakt— A Microsoft Magyarország a céges járműveket operatív lízing konstrukcióban „vásárolják” a cégektől, ezért a szerződések konkrét kilométer futásra köttetnek. Nagyon fontos látniuk azt, hogy ezt tartják-e vagy ha nem sikerült, akkor milyen irányban térnek el tőle, mert ennek a hibának jelentős költség vonzata lehet, ami egy időben történő szerződés módosítással csökkenthető. Ehhez egy egyszerűen működő Windows 10-en futtatható, PC-re optimalizált Universal Windows Platform applikáció fejlesztése lett kitűzve, ami segít majd ezt követni és szükség esetén módosíthatóak egyszerűen az alkalmazásból a szerződések. Kulcsszavak—C#; Universal Windows Platform, Microsoft; Microsoft Visual S tudio; MVVM Light; S QLite
I.
BEVEZETŐ
2015 a Windows 10 éve volt. Aki rendelkezett a megfelelő Windows 7, Windows 8 vagy Windows 8.1 verzióval, az ingyen frissíthetett a legújabb operációs rendszerre. Visszakerültek a Windows 8-ból hiányolt elemek, mint pl. a Start menü ezzel megtartva a csempés dizájnt. Kaptunk egy segédet is magunk mellé, Cortana „személyében”, aki a legjobb tudása szerint próbálja megkönnyíteni munkánkat, legfeljebb továbbadja kérésünket a Bingnek. A Windows 10 megjelenésével, létrehozták az Universal Windows Platformot, azaz az UWP-t [1].
Az UWP a Windows 10 egységesített magja. Ez azt jelenti, hogy minden olyan eszköz, amelyen a legújabb operációs rendszer fut, futtatni tudja az erre a platformra írt alkalmazásokat. Egy közös Áruház van, ahonnan minden eszköz el tudja érni az alkalmazásokat. Így egyszerűen lehet minden Windows 10-et futtató rendszerre (XBOX, tablet, telefon, laptop, HoloLens és mások) alkalmazásokat fejleszteni, nem kell külön minden platformra fejleszteni hanem egységesen működik mindenhol. Ezzel nagyon megkönnyítették, elősegítették a fejlesztők munkáját, akik ezekre az eszközökre fejlesztenének a közeljövőben. Az UWP nagyon rugalmas nem muszáj C# vagy XAML nyelvet használnod a kódoláshoz, hanem ha szeretnél JavaScript, Unity vagy bármelyik más magasszíntű programozási nyelvel is dolgozhat a fejlesztő [2]. A C# nyelv a Microsoft által a 2000-es évek elején kifejlesztett objektumorientált programozási nyelv. Ebben a nyelvben a C++ és a Java előnyeit, hátrányait próbálták összegyúrni a készítők. A C# a .Net keretrendszer nyelve, kényelmes és gyors lehetőséget biztosít ahhoz, hogy ezen keretrendszer alá megfelelő alkalmazásokat készítsünk. Az Extensible Application Markup Language vagy XAML (ejtsd: zammel) egy XML alapú jelölő nyelv, amelyet szintén a Microsoft fejlesztett ki. XAML-lel a felületét lehet fejleszteni egy alkalmazásnak. 2. ábra: Minden Windows 10-es platformon futtatható az UWP
1. ábra: A Windows 10 kialakulása
Forrás: www.microsoft.com
Forrás: www.microsoft.com
II.
TERVEZÉSI SZEMPONTOK
Mint már említettem a Microsoft Magyarország a céges autókat csak lízingelik és nem vásárolják, ezek a szerződések konkrét, meghatározott távra kötik meg. Így fontos látniuk, hogy hogy állnak minden egyes járművel mert egy előre módosított szerződéssel lényeges költséget takaríthatnak meg. Microsoft Student Partnerként [3] lehetőségem nyílik belelátni egy ilyen hatalmas multinacionális cég működésébe, mindennapjaiba. Valamint konkrét feladatokat is kapunk az önkéntes időtartamunk alatt, szerencsémre a fejlesztői csapatba kerültem, így egy a Microsoft Magyarország által később használt applikációt kellett készítenem. A tervezési szempontok között szerepelt, hogy a rendszer alapját a legújabb Windows 10-es technológia az egységesített Universal Windows Platform képezze, az alkalmazás PC-re lenne optimalizálva, más eszközcsaládon nem kell, hogy jól nézzen ki. Valamint Azure SQL adatbázisból importálhatóak és Excel-be exportálhatóak legyenek az adatok. Továbbá, hogy ezek az adatok szerkeszthetőek is legyenek az programban [4]. A tervezés egyik legfontosabb része az online és offline szinkroniáció volt amit a Microsoft által készített Azure Mobile Apps-szel készült el [5]. Ennek az egyik előnye, hogy így sosem vész kárba az offline módba szerkesztett adat, és nem kell manuálisan menteni, beölteni mindig az adatokat hanem ennek a service-nek a segítségével valósul meg minden automatikusan, így ezt csak egyszer a program megírásakor kell implementálni a forrásfájlba.
Nagyon fontos kérés volt, hogy a szerződött távolság (Contract Distance) módosítható legyen, így felkészülve arra az esetre, ha szeretné a cég módosítani a szerződést, illetve fontos volt még, hogy az adatok bővíthetőek legyenek, ha hozzászeretnénk adni új járműveket a már meglévő adatbázishoz. Ez manuálisan az alkalmazásban is hozzáadható legyen, valamint, ha új Excel munkafüzet fájlt töltünk be az szoftverünkbe akkor azzal is működjön, ne mindig ugyan annyi járművet tartson számon. A megadott adatbázis fájlban megtalált szerződött távolság oszlopból ki kellett szűrnie bizonyos a megrendelő által kért információkat, tudnia kell értelmezni, hogy ha a kolléga lustaságból benyom egy 0-t vagy 1-est, akkor az nem jó adat, ha valaki kisebb számot ad meg, mint egy korábbi tankolásnál, akkor jeleznie kell, hogy valami gond van a bevitt adattal. Ha valaki nem ad meg km-óra állást, azt is kellene, hogy jelezze valamilyen módon, ezt pedig meg kell tudja különböztetni attól, hogy azért nincs friss kilométer adat, mert nem is tankolt. 4.ábra: Az Excel munkafüzet az adatokkal
3.ábra: Az Azure Mobile Apps működésének ábrázolása
Forrás: www.microsoft.com
III.
A MEGRENDELŐ KÉRÉSEI
A Microsoft Magyarország eddig a saját járműveinek a nyilvántartását Excel munkafüzetbe oldotta meg de ez nem bizonyult korszerű, illetve gyors megoldásnak így szükségük volt egy egyszerű alkalmazásra, amely teljesíti az igényüket. Kéréseik között szerepelt, hogy az adatok Azure SQL adatbázisból importálhatóak és Excel munkafüzetbe exportálhatóak legyenek az adatok, ugyanis a számlákat, szerződéseket ők Excelbe kapják meg így könnyebb az adatok feltöltése, betöltése az alkalmazásba.
Forrás: tervező által létrehozott tartalom
IV.
ELKÉPZELÉS
Lennie kell egy Main oldalnak az alkalmazásomban, ahol ki kell listázni a megfelelő adatokat a járművökről, az alap adatok mellett (rendszám, forgalomba helyezés ideje, szerződött távolság) legyen ott a megtett út kilóméterekben, százalékban, a százalékos akár lehet egy ProgressBar is, és minél közelebb van a szerződött értékhez a megtett út, úgy változik a színe, (pl. 0-60% zöld, 60-80 sárga, 80-100 piros)
ha pedig túllépi akkor valami 4-edik szín. Legyen legfelül egy sor üres TextBoxokkal az új kocsi adatai számára, kiegészítve a kilométer óra jelenlegi állásával és mellette egy plusz gombbal, amellyel hozzá lehet adni egy új kocsit az adatbázishoz. A lista elemei mellett legyen egy szerkesztés gomb, amelyre, ha rákattint egy felhasználó, az adott listaelem helyén egy InLine editor jelenik meg az egyes Property -khez (ugyanaz, mint az új hozzáadásánál, viszont itt már ki lesznek töltve a meglévő adatokkal), a szerkesztés mellett legyen törlés gomb is ha már nincs szükség a járműre. Legyen egy import gomb, amellyel be lehet importálni az Azure SQL adatbázisból az adatokat. Ekkor végigmegy az adatbázisban levő kocsik listáján, és mindegyikhez megkeresi a legfrissebb kilóméter állást. Ha a legfrissebb kilóméter állás kisebb, mint az adatbázisban levő, akkor a listában az adott kocsi mellett vagy alatt jelenjen meg egy hibaüzenet, hogy ilyen gondba ütköztünk a betöltés folyamata alatt. Illetve, ha irreálisan nagy a szám, akkor is jelenjen meg itt egy hibaüzenet a megfelelő üzenettel. Illetve, ha nincs megadva kilóméter állás a legfrissebb sorban, akkor is hibaüzenet jelenjen. Valamint az adott járműnél, két féle lehet itt ez a hibaüzenet: nincs kilóméter adat, de nem is tankolt, illetve nincs km adat, pedig tankolt. Az import gomb mellett legyen egy export gomb, amely a lista adatait szerializálja ki egy XLS Excel munkafüzet fájlba. Tehát rendszám, forgalomba helyezés ideje, szerződött távolság, aktuális kilométer távolság, hány százalék teljesítették eddig a szerződött távolságot. Ha a felhasználó offline van akkor az adatokat a gépen tárolja, ha online lesz akkor Azure Mobile Apps -szal szinkronizálva feltölti az adatokat a Microsoft Azure felhőjébe. A Main oldal mellett lennie kell egy másik Settings oldalnak is ahová egy gomb megnyomásával lehet átnavigálni, ezen az oldalon ki lehet választani, hogy az adott adatbázisunkban melyik adat melyik oszlophoz tartozik így, ha másnál fognak tankolni később és másmilyen számlarészletezőt kapnak, akkor ahhoz tudja igazítani az alkalmazást. Szóval úgy kell megcsinálni, hogy az alkalmazás konfigolható legyen. Úgyhogy nem kell minden oszlop az adatbázis modelljének, csak, amit utána fel is használunk. Mivel Azure-ban lesz az adatbázisunk, így tehát akkor az import is mehet simán egy backend service-be, illetve minden más is, az UWP applikációnkat mint vékonyklienst használnánk csak. Így ezzel már az is bejönne, hogy be kell, hogy jelentkezzen a felhasználó, amellyel egy újabb komplexitás bejön. Szóval, egy ASP.NET Web Application 2 service-ünk lesz, ami mindent megcsinál, azaz kezeli az xls, csv vagy xlsx fájlokat, az adatbázisba is beviszi az adatokat, illetve egy végponton ezt szolgáltatja. Egy Azure SQL adatbázisban lesznek az adatok, illetve az UWP applikációnak is lesz egy SQLite adatbázisa, amelyet szinkronban tart az Azurban levővel.
Lesz egy Azure Mobile Apps backend service, ez kommunikál az Azure SQL adatbázissal. Emellett lesz egy vékonykliens, egy UWP applikáció formájában, amely megjeleníti az adatokat a saját SQLite adatbázisából, amelyet a backend service-től szinkronizál. Az Excel fájl feldolgozását is ez a service végzi. A legnagyobb feladat az UWP számára az xlsx-be való exportálás. Technológiák, amelyek szükségesek lesznek az alkalmazás fejlesztéséghez: 1.
2.
Universal Windows Platform 1.1. Az UWP képezi az egész alkalmazás alapját, egy új technológia, amelyről már írtam. C# nyelvvel lesz fejlesztve a backend valamint XAML nyelvvel a felhasználói felület. MVVM Light 2.1. A Model-View-ViewModel (az-az MVVM) mintát az idő múlásával készítették el a szakértők [6], hogy egy már bevált sémát alkalmazva minél kevesebb problémába ütközzünk, ne kelljen egy már több ezerszer kijárt ösvényt nekünk is végig járnunk. Az MVVM azonban sokkal többet tartogat számunkra annál, mint hogy szétválasztottuk a kódot részekre és minden felületi elemet összeköthetünk a háttér kódban található dolgokkal. Mint ahogy a nevében benne is 3 részre „osztjuk” az alkalmazásunkat egy Model-re, ahol az adatok találhatóak, egy View-ra ahol a dizájn elemek vannak és egy ViewModel-re, ami a ragasztót képezi a másik két elem között. Az MVVM Light Toolkit az egyike ennek a lehetőségnek. Célja, hogy felgyorsítsa számunkra az alkalmazások fejlesztését.
3.
Entity Framework 7 3.1. Az EF egy keretrendszer .NET-hez. A keretrendszer bizonyos tipikus feladatok elvégzését nagy mértékben segítő, komponenseket tartalmazó köteg. A gyakran használt elemeket egyetlen helyre gyűjti, így a fejlesztők készen kapják meg ezeket.
4.
SQLite 4.1. Mivel adatokkal foglalkozok szükségem van egy adatbázisra, adatbázis-kezelő rendszerre, illetve adatbázis motorra is. Az SQLite egy egyszerű és könnyen implementálható könyvtár és támogatja az Universal Windows Platformot is.
5.
Azure Mobile Apps 5.1. Az Azure Apps Service teljes körűen felügyelt, a fejlesztők számára készített platformszolgáltatás. A Mobile Apps segítségével percek alatt kialakíthat egy vállalati bejelentkezési felületet, és csatlakozhat a vállalat helyszíni vagy felhőalapú erőforrásaihoz. Egyik lehetősége a csatlakozás vállalati rendszerekhez, itt Mobile Apps segítségével rövid idő alatt kialakítható egy vállalati bejelentkezési felületet, amelyen keresztül lehet csatlakozhat a vállalat helyszíni vagy felhőalapú erőforrásaihoz.
Ezt a lehetőséget a későbbiekben fogom alkalmazni, a 10 hét alatt nem sikerült elkészíteni. Egy másik alternatíva amire még lehet használni és szintén szüksége lesz rá az alkalmazás fejlesztése során az, az offline használatra kész alkalmazások fejlesztése és adatszinkronizálása, itt a munkát sokkal hatékonyabbá lehet tenni olyan alkalmazás készítésével, amelyek offline is működnek, és internetkapcsolat esetén a Mobile Apps segítségével szinkronizálják az adatokat bármely vállalati adatforrással vagy SaaS API-val. Ezen service segítségével fogom megvalósítani a felhős bejelentkezést majd az adatok leltöltését a Microsoft Azure SQL felhőjéből. 6.
Visual Studio Team Service 6.1. Szükségem van egy verziókezelőre ha bármilyen baj történne. A Visual Studio Team Service (VSTS) egy felhő alapú csapatmunkát elősegítő szolgáltatás fejlesztőcsapatok részére, valamint hatékony támogatást tud nyújtani az egészen kicsi hobbi projektektől a nagyobb, több fejlesztői csapat együttműködését igénylő projektekig.
5.ábra: Az MVVM működésének ábrázolása
V.
M AIN OLDAL MEGVALÓSÍT ÁS
Létrehoztam az alap projektet Visual Studio 2015-ben, hozzáadtam azokat a könyvtárakat, amik biztosan kelleni fognak, létrehoztam a teszt projektet, illetve beállítottam a Build System-et Visual Studio Team Service-ben. Létrehoztam a task-okat Visual Studio Team Service-ben, hogy mindent időben meg tudjak csinálni és ne csússzak ki a határidőkből, taskok használatával számomra könnyebb, valamint betarthatóbbak az ütemezett feladatok. Ezek után pull-oltam a repositorie-t, így elkezdhettem a DataBaseContext-et írni, majd le Build-elni hogy migrálhassa a generált SQLite adatbázist. Nem kellett külön szerializálót írni, hanem a modelleknek az EntityData osztályt kell megvalósítaniuk, az kezeli, hogy hogyan legyenek szerializálva. Ezáltal 2 sorral már meg lesz oldva a kliens szerver kommunikáció. Ami kell még majd az a kontroller és ugye az adatbázissal való kommunikáció Entity Frameworkön keresztül. Hozzáadtam egy IsDefault Property-t a SerializationScheme-hez, és így egyszerű kideríteni, hogy melyik séma alapján mit kell csinálni. Csak egy LINQ-val le kell kérdezni, hogy melyiknek True ez a Property-je. Illetve ehhez is kell ugyanúgy egy táblát csinálni a Backend-ben, amihez majd egy offline szinkronizációt hozzáadni a kliensben. 7.ábra: Az alkalmazás Main oldala és XAML kódja
Forrás: tervező által létrehozott tartalom
Ezen adatok egyeztetése után elküldtem az elképzelésem minimalista változatát az alkalmazásról, amely az ügyfélnek is tetszett, így kezdődhetett az alkalmazás fejlesztése. 6.ábra: Az alkalmazás minimalista változata a Main oldalról
Forrás: tervező által létrehozott tartalom
Forrás: tervező által létrehozott tartalom
Rá, kellett jönnöm, hogy kicsit rosszul gondolkodtam az Excel Parsol-ásánál. Azt kifelejtettem, hogy a felhőben van egy adatbázis, és ott kell Updat-elni az új autókat az Excel munkafüzet alapján. Törölni vagy létrehozni ez alapján nem kell mert, ha van egy új kocsi, azt előbb mindig a kliensben hozza létre kézzel a felhasználó. Szóval a megoldás erre a problémára: a kliensből feltölti az Excel fájlt, ezután kell meghívni az Excel Parser-t, amely kiszedi az új sorokat az Excel-ből és Update-li az Azure SQL adatbázisban levő Rent-
eket. Itt elég addig a sorig elmenni az Excel munkafüzetben, amíg frissebb az infó, mint ami az adatbázisban van, erre jó a LastUpdate Property. Ezután a kliens majd csinál egy szinkronizálást és kész. Amikor a kliens exportálni akar, akkor először szinkronizál a szerverrel, majd meghívja a kontroller export függvényét, amely ekkor lekéri a adatbázisban levő Rent-eket, és ezekből hozza létre az Excel-t, majd visszaadja a kliensnek ennek az URL-jét. Majd a kliens egy meghatározott függvénnyel letölti a visszakapott URL-ről a fájlt. És ahhoz, hogy a Parsol-t értékeket Update-elni tudja az adatbázisban, a MobileServiceContext-et kell behúzni a kontrollerbe és annak a RentModels listájában levő Rent-eket kell módosítani. Kontrollerek Stateless-ek, tehát pl. abban a TempFile-ban nem tudsz tárolni értéket két kontroller hívás között, mivel minden kérés esetén újra inicializálódik a kontroller.
9.ábra: Az alkalmazás Settings oldala és XAML kódja
8.ábra: Az alkalmazás elkészült változata a Main oldalról
Forrás: tervező által létrehozott tartalom
Forrás: tervező által létrehozott tartalom
VI.
SET T INGS OLDAL MEGVALÓSÍT ÁSA
A Settings oldalt úgy kell megcsinálni, hogy létrehozhat a felhasználó több sémát, a SerializationScheme-en, lehet láthatni, hogy van neki neve, leírása, és a Dictionary, amiben tárolja kulcs érték párokként az oszlopot és a RentModel adott Property-jének a nevét. Tehát majd kell egy Drop-down, ahol választhat a már meglévőkből, vagy létrehozhat újat. A meglévő esetén pedig tudja szerkeszteni, hogy melyik oszlophoz mi tartozik. Szükség lesz egy ViewModel-re, amely a ViewModelBase-ből származik, ebben van egy ObservableCollection, amely tartalmazza a sémákat. Kell egy service, amelynek van egy sémákat tartalmazó táblája hasonlóan, mint a RentService, csak itt sima táblát kell használni a SyncTable helyett. Ez rendelkezik GetAll, Insert, Update és Delete metódusokkal, ahol egy hívást kell a táblának küldeni, illetve a hibákat lekezelni, majd ezt jelezni a ViewModel-nek a Messenger segítségével. A ViewModel-ben pedig fel kell iratkozni a Messengerrel első körben String üzenetekre, amely az új üzeneteket beállítja egy ErrorMessage Property-re, amelyet aztán megjelenít az oldalon Bindig-gal.
A ViewModel-ben ugyanúgy le kell implementálni az új séma hozzáadását, meglévő editálását, ezeket kb. át lehetet másolni egy az egyben a MainViewModel-ből, minimális változtatásra volt szükség csak. Szóval itt is kell egy Property az új sémának, a szerkesztett sémának, és még egy az aktuálisan kiválasztott sémának. A service-t és a ViewModel-t regisztrálni kellett a ViewModelLocator-ban, illetve a ViewModel-nek egy Property-t kellett ott létrehozni, mint ahogy a MainViewModel-nek is van. Ezután a XAML-ben a ViewModelLocator-tól el kell kérni a ViewModel-t és mehet is a Binding. Kell egy Drop-downList, amely rá van Bind-elve az ObservableCollection-re, illetve a SelectedItem rá van Bind-elve a ViewModel egy kiválasztott sémájára. Valamint, a sémát implementálni kellett ugyanúgy, mint ahogy a RentModel-lel kellett. Ennek a Dictionary-jébe kellett beállítani azokat a mezőket, amelyeket ki lehet nyerni az adatbázis fájlból. Tehát a kulcs a mező neve, pl. LicensePlate az értéke pedig az Excel Sheet adott oszlopának betűjele, tehát pl. a LicensePlate az „A” oszlopban van. Illetve itt még be kellett állítani, hogy melyik a Default az az alapértelmezett séma. Ha az egyiket Default-ra lett állítva, akkor értelemszerűen amelyik eddig Default volt, az át kell állítani nem Default-ra. Az oldal tetején akár jelezve lesz az is, hogy Default Scheme: <séma neve>, csak, hogy lássa a felhasználó. Ha mentve lett akkor a service-en keresztül fel kell töltenie a szerverre. Az Excel feltöltését úgy kell megcsinálni, hogy a kliens feltölti egy mappába a szerverre Temp-ként az Excel-t, Header-ben küldi a feltöltött fájl nevét, a szerver ezt fogja beolvasni és Parse-olni, majd törli a fájlt.
10.ábra: Az alkalmazás elkészült változata a Settings
segítségével lesz kialakíthatva egy vállalati bejelentkezés i felületet, amelyen keresztül csatlakozhat a vállalat helyszíni vagy felhőalapú erőforrásaihoz. VIII.
KÖSZÖNETNYILVÁNÍTÁS
A fejlesztési és a kutatási forrásokat a Microsoft Magyarország bocsátotta rendelkezésemre. IX. [1]
Forrás: tervező által létrehozott tartalom
VII.
ÖSSZEGZÉS
A Microsoft Magyarország számára a céges autóik számontartására készített applikáció megvalósult, megfelelve az ügyfél minden igényének. Ahol egy olyan PC-re optimalizált alkalmazást kellett létrehozni, amelyet később a Microsoft Magyarország használ napi szinten. Következtetésképp elmondhatjuk, hogy az alkalmazás megbízhatóan és biztonságosan működik. A jövőbeni fejlesztésnek készülni fog egy biztonságos bejelentkezési lehetőség, hogy a felhasználó csatlakozni tudjon a vállalati rendszerekhez, ahol Azure Mobile Apps
HIVATKOZÁSOK
Intro to the Universal Windows Platform, (2017, March 01). [Online]. Avaible: https://docs.microsoft.com/en-us/windows/uwp/getstarted/universal-application-platform-guide [2] Buddy James, Lori Lalonde, „What is XAML?”, 2015 [3] Microsoft Student Partner Program | MSDN, (2017, April 02). [Online]. Avaible: https://msdn.microsoft.com/huhu/microsoftstudentpartners.aspx [4] Paulo Jorge Passos da Costa, António Miguel Rosado da Cruz, „Migration to Windows Azure – Analysis and Comparison”, 4th Conference on ENTERprise Information Systems (CENT ERIS 2012), At Vilamoura, Algarve, Portugal, October 2012. Elsevier, 2012 [5] Offline Data Sync in Azure Mobile Apps, (2017, April 01), [Online]. Avaible: https://azure.microsoft.com/en-us/documentation/articles/appservice-mobile-offline-data-sync/ [6] Laurent Bugnion, (2017, April 12). Using #mvvmlight with Windows 10 universal applications [Online]. Avaible: http://blog.galasoft.ch/posts/2015/03/using-mvvmlight-with-windows10-universal-applications