Univerza v Ljubljani
Fakulteta za raˇ cunalniˇ stvo in informatiko
Jan Rat
Avtomatizacija delovnih procesov s pomoˇ cjo informacijskega sistema
DIPLOMSKO DELO
VISOKOˇSOLSKI STROKOVNI ˇSTUDIJSKI PROGRAM PRVE STOPNJE
RA ˇCUNALNIˇSTVO IN INFORMATIKA
Mentor : doc. dr. Rok Rupnik Somentor : dipl. inz. Nikolaj ˇ Coli´ c
Ljubljana, 2021
Copyright. Rezultati diplomske naloge so intelektualna lastnina avtorja in matiˇcne fakultete Univerze v Ljubljani. Za objavo in koriˇsˇcenje rezul- tatov diplomske naloge je potrebno pisno privoljenje avtorja, fakultete ter mentorja.
Besedilo je oblikovano z urejevalnikom besedil LATEX.
Kandidat: Jan Rat
Naslov: Avtomatizacija delovnih procesov s pomoˇcjo informacijskega sis- tema
Vrsta naloge: Diplomska naloga na visokoˇsolskem programu prve stopnje Raˇcunalniˇstvo in informatika
Mentor: doc. dr. Rok Rupnik Somentor: dipl. inz. Nikolaj ˇColi´c Opis:
Informacijski sistemi postajajo ˇcedalje veˇcji del naˇse druˇzbe. Prisotni so na vseh podroˇcjih. Poenostavljajo naˇcin dela in nadomeˇsˇcajo stare tehnologije.
Najdi primer, kjer informacijski sistem ni uporabljen in ga implemenetiraj v obliki spletne aplikacije.
Title: The automatisation of processes with information system Description:
Information systems are becoming great part of our society. They are present on every field and they are making our life easier with replacing old techno- logy. Find case where information system is not yet used and implement it as a web application.
Zahvaljujem se mentorju doc. dr. Roku Rupniku, ki mi je pomagal pri doloˇcitvi teme. V veliko pomoˇc so mi bili tudi njegovi nasveti. Zahvaljujem se tudi somentorju v podjetju Nikolaju ˇColi´cu za nasvete pri izdelavi informacijskega sistema. Nazadnje se zahvaljujem starˇsem in vsem, ki so mi skozi ˇcas ˇsolanja pomagali in stali ob strani.
Kazalo
Povzetek Abstract
1 Uvod 1
1.1 Predstavitev domene . . . 1
1.2 Cilji diplome . . . 1
1.3 Pregled sorodnih aplikacij . . . 2
1.4 Pregled sorodnih diplomskih del . . . 2
1.5 Struktura diplome . . . 2
2 Orodja in tehnologije 3 2.1 Visual Studio . . . 3
2.2 Microsoft .NET . . . 4
2.3 SQL Server Management Studio . . . 5
2.4 Microsoft SQL Server . . . 5
2.5 NuGet . . . 5
2.6 Programski jeziki . . . 6
2.7 C# . . . 8
2.8 Informacijski sistem . . . 8
2.9 Skupina Gorenje - opis gospodarske druˇzbe in produktov . . . 9
3 Aplikacija 11 3.1 Analiza . . . 11
3.2 Naˇcrtovanje . . . 15 3.3 Predstavitev aplikacije . . . 17
4 Zakljuˇcki 29
4.1 Ideje za nadaljnji razvoj . . . 30
Literatura 31
Seznam uporabljenih kratic
kratica angleˇsko slovensko IDE integrated development envi-
ronment
integrirano razvojno okolje CLI common language infrastruc-
ture
infrastruktura skupnega jezika CLR common language runtime izvajanje skupnega jezika GC garbage collection ˇciˇsˇcenje spomina
SQL structured query language strukturirani povpraˇsevalni je- zik za delo s podatkovnimi ba- zami
DBMS database management system sistem za upravljanje podat- kovnih baz
DB database podatkovna baza (PB)
DLL dynamic-link library dinamiˇcna knjiˇznica
AD active directory aktivni imenik
MVC model view controller model pogled krmilnik CSS cascading style sheets kaskadne stilske podloge
UI user interface uporabniˇski vmesnik
UX user experience uporabniˇska izkuˇsnja API application programming in-
terface
aplikacijski programski vme- snik
XML extensible markup language razˇsirljivi oznaˇcevalni jezik
CC creative commons ustvarjalna gmajna
Povzetek
Naslov: Avtomatizacija delovnih procesov s pomoˇcjo informacijskega sis- tema
Avtor: Jan Rat
Informacijski sistemi so danes prisotni vse okoli nas. Ker so postali pomem- ben del druˇzbe, si ˇzivljenje brez njih teˇzko predstavljamo. Dokaz za to je tudi podjetje Gorenje d.o.o., v katerem sem zaposlen. Problem je, da je proces iz- delave grafiˇcnih vmesnikov na pametnih gospodinjskih aparatih predolg. Za- nimalo nas je, kako implementirati informacijski sistem za izdelavo in nadzor tekstovnih elementov na grafiˇcnih uporabniˇskih vmesnikih za enega izmed pametnih gospodinjskih aparatov - peˇcico. Predstavili bomo, kako dogra- diti informacijski sistem in kje so nastopile teˇzave. Na koncu bomo skuˇsali upraviˇciti razvoj informacijskega sistema, ter primerjali s starim naˇcinom izvajanja procesa.
Kljuˇcne besede: raˇcunalnik, informacijski sistem, avtomatizacija.
Abstract
Title: The automatisation of processes with information system Author: Jan Rat
Information systems are all around us. They became so vital to our society, that we hardly imagine life without them. Proof for that is also company Gorenje d.o.o., where I am employed. Problem is that process of developing graphical user interface for smart home appliances takes too long. We were curious, how to implement information system for creating and controlling text elements on graphical user interface for one of the smart home appliances - oven. We will present how we upgraded information system and what problems we came across. At the end we will try to justify development of information system and compare it with old process.
Keywords: computer, information system, automation.
Poglavje 1 Uvod
1.1 Predstavitev domene
Problem s katerim se sreˇcuje podjetje Gorenje, v katerem sem zaposlen je, da je proces izdelave grafiˇcnih vmesnikov na pametnih gospodinjskih aparatih dolgotrajen. Zanimalo nas je ali bi lahko ta proces pohitrili oziroma opti- mizirali. Odkrili smo, da pride do veliko napak in poslediˇcno zakasnitev pri ustvarjanju tekstovnih elementov. Vsak tekstovni element mora imeti lastno- sti kot so pozicija, velikost in prevod v tuje jezike. Trenutno se te lastnosti vodijo preko datoteke v programu Excel. Problem pri tem je, da podatki niso aˇzurni, velikokrat pride do napak pri vnosu, ker nismo omejeni in ni varnostih mehanizmov. Informacijski sistem bi vse te pomanjkljivosti odpra- vil in s tem poslediˇcno pohitril proces ter na vse zadnje izboljˇsal uˇcinkovitost podjetja.
1.2 Cilji diplome
Rezultat diplomske naloge bo dodelava informacijskega sistema v obliki sple- tne aplikacije, ki bo omogoˇcala nastavljanje pozicije, velikosti, doloˇcevanje imen in prevodov tekstovnih elementov za grafiˇcne vmesnike na pametnih peˇcicah. Zaˇcetni podatki se bodo pridobili iz Excel datoteke. Ali je bila
1
2 Jan Rat dodelava informacijskega sistema smiselna, bo merljivo z zadovoljnostjo upo- rabnikov spletne aplikacije.
1.3 Pregled sorodnih aplikacij
Ker je aplikacija, ki jo bomo razvili zelo specifiˇcna za uporabo pri procesu izdelave grafiˇcnih vmesnikov na pametnih gospodinjskih aparatih, podobnih aplikacij na trgu ˇse ni razvitih in po vsej verjetnosti tudi nikoli ne bodo.
Zato je celoten proces izdelave aplikacije prilagojen potrebam in dosedanjim izkuˇsnjam zaposlenih v podjetju, ki so v preteklosti ˇze imeli opravka z izde- lavo grafiˇcnih vmesnikov.
1.4 Pregled sorodnih diplomskih del
Diplomska naloga, ki bi se dotikala toˇcno te tematike ˇse ne obstaja. Vendar obstaja diplomska naloga, ki govori o implementaciji informacijskega sistema za planiranje operacij v skladiˇsˇcu [1]. Skupna toˇcka te diplome je ta, da se avtor tudi tukaj loti razvoja informacijskega sistema z namenom optimizacije delovnega procesa. Problem, ki ga reˇsuje to diplomsko delo je, kako optimi- zirati plan pobiranja in vodenje pobiralcev v skladiˇsˇcu do ˇzelenega blaga.
1.5 Struktura diplome
Diplomsko delo je razdeljeno na dve veˇcji poglavji, Orodja in tehnologije in Aplikacija. V prvem poglavju je na kratko predstavljeno razvojno okolje, podatkovna baza, orodje in programski jezik. V drugem poglavju pa je pred- stavljen dograjen informacijski sistem v obliki spletne aplikacije.
Poglavje 2
Orodja in tehnologije
2.1 Visual Studio
Visual Studio je integrirano razvojno okolje (angl. kratica IDE) razvito iz strani podjetja Microsoft. Je eden izmed najpopularnejˇsih IDE-jev na svetu.
Namenjen je razvoju programov za operacijski sistem Windows ter spletnih reˇsitev na osnovi ogrodja Microsoft .NET. Njegovi popularnosti pripomore tudi podpora ˇstevilnih programskih jezikov [2].
3
4 Jan Rat
Slika 2.1: Integrirano razvojno okolje Visual Studio.
2.2 Microsoft .NET
Kot ˇze omenjeno je Microsoft .NET ogrodje za razvoj spletnih reˇsitev tj.
spletnih strani, spletnih aplikacij in spletnih storitev. Programi napisani za .NET se izvajajo v programskem okolju (v nasprotju s strojnim okoljem kot pri C ali C++) (CLR), vrsti aplikacijskega virtualnega raˇcunalnika, ki je definiran v specifikaciji CLI. Izvajalsko okolje CLR zagotavlja storitve kot so varnost, upravljanje s spominom (v obliki GC) in upravljanje z izjemami [3].
2.2.1 ASP.NET
ASP.NET je odprtokodno streˇzniˇsko ogrodje namenjeno spletnemu razvoju za izdelavo dinamiˇcnih spletnih strani in aplikacij. Ogrodje programerju po- enostavlja razvoj, razhroˇsˇcevanje in namestitev spletnih aplikacij. ASP.NET ima dostop do vseh razredov in lastnosti .NET ogrodja [4].
Diplomska naloga 5
2.3 SQL Server Management Studio
SQL Server Management Studio (SSMS) je aplikacija razvita s strani Micro- softa, ki omogoˇca konfiguracijo, upravljanje in administracijo vseh kompo- nent znotraj Microsoft SQL serverja [5].
Slika 2.2: Izgled SQL Server Management Studia.
2.4 Microsoft SQL Server
Microsoft SQL Server je DBMS. Njegova glavna vloga je shranjevanje in pridobivanje podatkov, ki jih zahtevajo druge aplikacije [6].
2.5 NuGet
Bistveno orodje za vsako sodobno razvojno platformo je mehanizem, s pomoˇcjo katerega lahko razvijalci ustvarjajo, delijo in uporabljajo uporabno kodo.
Takˇsna koda je pogosto zdruˇzena v pakete, ki vsebujejo prevedeno kodo kot
6 Jan Rat DLL, skupaj z drugo vsebino, potrebno za projekte, ki uporabljajo te pakete [7].
Za .NET (vkljuˇcno z .NET Core) je Microsoftov mehanizem za skupno rabo kode imenovan NuGet, ki doloˇca, kako se paketi za .NET ustvarijo, gostijo in uporabljajo [7].
Preprosto povedano, paket NuGet je ena datoteka ZIP s .nupkg pripono, ki vsebuje prevedeno kodo (DLL), druge datoteke, povezane s to kodo, in opis, ki vkljuˇcuje informacije, kot je ˇstevilka razliˇcice paketa. Razvijalci s kodo za skupno rabo ustvarijo pakete in jih objavijo javnemu ali zasebnemu gostitelju.
Uporabniki paketov pridobijo te pakete od ustreznih gostiteljev, jih dodajo svojim projektom in nato v svoji projektni kodi pokliˇcejo funkcionalnost paketa. Nato NuGet sam obdeluje vse vmesne podrobnosti [7].
Ker NuGet poleg javnega gostitelja nuget.org podpira tudi zasebne gosti- telje, lahko s paketi NuGet delite kodo, ki je ekskluzivna za organizacijo ali delovno skupino. Pakete NuGet lahko uporabite tudi kot priroˇcen naˇcin za razvrˇsˇcanje lastne kode v niˇc drugega kot za svoje projekte [7].
2.6 Programski jeziki
Trenutno obstaja veˇc kot 3.000 programskih jezikov in v prihodnosti lahko priˇcakujemo ˇse veˇcji razmah. Zato je nemogoˇce priˇcakovati, da bomo vedno uporabljali samo en programski jezik. Vsekakor pa nikoli ne bo obstajal en sam univerzalni jezik! Zato mora programer dobro poznati osnovne prin- cipe (koncepte) programskih jezikov. Tako se bo veliko hitreje nauˇcil novega, njemu ˇse neznanega programskega jezika. ˇCe dobro poznamo principe pro- gramskih jezikov, jih tudi laˇzje ocenjujemo. Izbira programskega jezika je ena izmed pomembnih odloˇcitev [8].
Posamezni programski jeziki imajo razliˇcne znaˇcilnosti in poglede na naˇcrtovanje in opis algoritmov, podatkovnih in krmilnih struktur. Z uˇcenjem novih programskih jezikov najdemo nove poti za izraˇzanje svojih idej. Pro- gramski jeziki so temelj raˇcunalniˇstva in brez njihovega podrobnega pozna-
Diplomska naloga 7 vanja ne moremo biti uspeˇsni [8].
Da je programski jezik uporaben, mora zadoˇsˇcati doloˇcenim zahtevam.
Programski jezik naj bo univerzalen, tako da omogoˇca zapis vsake reˇsljive naloge v izbrani domeni. Na prvi pogled je to zelo stroga zahteva, vendar je univerzalen ˇze vsak jezik, v katerem lahko definiramo rekurzivne funkcije.
Nadalje zahtevamo, naj programski jezik omogoˇca reˇsevanje naloge na na- raven naˇcin vsaj s podroˇcja njegove uporabe, kot so na primer: znanstvene aplikacije, poslovne aplikacije, umetna inteligenca, sistemsko programiranje itd. S programskim jezikom, katerega edini podatkovni tip so ˇstevila in polja, lahko na naraven naˇcin reˇsujemo naloge iz numeriˇcnega procesiranja. Manj primeren je za reˇsevanje nalog umetne inteligence. Programski jezik je upo- raben, ˇce ga je mogoˇce implementirati na raˇcunalniku na uˇcinkovit naˇcin [8].
2.6.1 Zgodovina programskih jezikov
Ceprav je od prvega digitalnega raˇˇ cunalniˇstva preteklo samo dobrih 50 let, je bilo v tem obdobju na podroˇcju programskih jezikov kar nekaj pomembnih mejnikov. Programski jeziki imajo tudi svojo predzgodovinsko obdobje, in sicer, ko raˇcunalniki ˇse sploh niso obstajali. Obstajali pa so formalni modeli raˇcunanja in ideje, kako bi zapisovali programe [8].
Danaˇsnje programske jezike naˇcrtujemo iz izkuˇsenj, ki smo jih dobili pri naˇcrtovanju predhodnih programskih jezikov. Programski jeziki se nepre- stano razvijajo in izboljˇsujejo, zato je skoraj nemogoˇce napovedati, kakˇsno bo stanje na tem podroˇcju ˇcez nekaj let. Prva visoka programska jezika sta bila fortan in cobol. Osnovni cilj, ki so ga imeli naˇcrtovalci fortana, je bilo uˇcinkovito izvajanje generirane objektne kode. Tako je prevajalnik za fortan tudi prvi prevajalnik s fazo optimizacije. Sam programski jezik je imel veliko pomanjkljivosti in neregularnosti. Samemu naˇcrtovanju jezika niso posveˇcali veliko pozornosti, saj so menili, da je to enostavno opravilo. Fortan je vpeljal simboliˇcne izraze in podprograme s parametri [8].
8 Jan Rat
2.7 C#
C# je programski jezik, ki ga je razvilo podjetje Microsoft v okviru razvoja ogrodja .NET. C# se pri zgradbi jezika zgleduje po ˇstevilnih drugih pro- gramskih jezikih, najbolj izrazito po C, C++ in Javi. Jezik je bil zelo skrbno naˇcrtovan z namenom uporabiti izkuˇsnje pri razvoju drugih programskih je- zikov, uporabiti najboljˇse znaˇcilnosti in popraviti nekatere pomanjkljivosti, ki so se pokazale v razvoju teh jezikov. Da je bilo to v veliki meri doseˇzeno dokazuje to, da je eden najbolj priljubljenih programskih jezikov [9].
2.8 Informacijski sistem
Informacijski sistem je tehnoloˇsko implementiran naˇcin zajemanja, shranje- vanja, posredovanja podatkov oziroma informacij in priprave na odloˇcanje na osnovi teh informacij. Tehnologija, ki jo potrebujemo za implementacijo informacijskega sistema, ni nujno raˇcunalniˇska tehnologija, ˇceprav danes brez raˇcunalnika praktiˇcno ne gre nikjer [10].
Informacijski sistem sestavljajo: ljudje, podatki, procesi, vmesniki, omreˇzje in tehnologija, ki vzajemno delujejo s ciljem izboljˇsanja vsakodnevnih po- slovnih operacij (obdelava podatkov) in podpore pri reˇsevanju problemov in odloˇcanja, ki je v pristojnosti vodstva (informacijska podpora) [10].
Raˇcunalniˇska aplikacija je raˇcunalniˇska reˇsitev za podporo pri reˇsitvi enega ali veˇc poslovnih problemov. Informacijski sistem je obiˇcajno pod- prt z eno ali veˇc raˇcunalniˇskih aplikacij (ni pa nujno). Glede na namembnost ali uporabnost delimo raˇcunalniˇske aplikacije na horizontalne in vertikalne.
Vertikalne aplikacije so povsem usmerjene v neko aplikacijsko podroˇcje (na primer banˇcniˇstvo, gradbeniˇstvo ipd.). Lahko jih tako uporabimo le na is- tem podroˇcju. V razliko od tega so horizontalne aplikacije. Torej takˇsne, da niso vezane na neko konkretno uporabno podroˇcje. Tipiˇcen primer vodo- ravnih aplikacij so tako razliˇcni pisarniˇski paketi, kot sta Microsoft Office ali OpenOffice [10].
Diplomska naloga 9
2.9 Skupina Gorenje - opis gospodarske druˇ zbe in produktov
Skupina Gorenje je eden izmed vodilnih evropskih proizvajalcev izdelkov za dom s 70-letno tradicijo. Svoji dve globalni blagovni znamki (Gorenje ter premijsko blagovno znamko Asko) ter ˇsest lokalnih blagovnih znamk so za- snovali tako, da njihovi tehnoloˇsko dovrˇseni, inovativni, energetsko uˇcinkoviti in vrhunsko oblikovani aparati za dom uporabnikom po vsem svetu ponujajo preprosto, intuitivno uporabniˇsko izkuˇsnjo in jim olajˇsujejo ˇzivljenje [11].
Imajo lastne proizvodne zmogljivosti v Evropi: v Sloveniji, Srbiji in na ˇCeˇskem ter razvojno-kompetenˇcne centre na ˇSvedskem, Nizozemskem, Ceˇskem in v Sloveniji. V okviru ostalih dejavnosti so prisotni tudi na po-ˇ droˇcjih ekologije, orodjarstva, industrijske opreme, inˇzeniringa, hotelirstva, gostinstva ter trgovine. Od leta 2018 je Skupina Gorenje del kitajske skupine Hisense, ki je s 13 milijardami evrov letnih prihodkov in 80.000 zaposlenimi eden vodilnih svetovnih proizvajalcev elektronike in gospodinjskih aparatov.
Tako so postali eden od redkih globalnih ponudnikov, ki ima v svojem portfe- lju popoln nabor izdelkov za dom - od velikih in malih gospodinjskih aparatov do zabavne elektronike in mobilnih telefonov [11].
Njihova vizija je postati najboljˇsi na svetu v inovacijah, ki temeljijo na dizajnu, s katerimi poenostavljajo ˇzivljenja njihovim potroˇsnikom. Na tem podroˇcju so si v panogi ˇze ustvarili status izzivalca in trendsetterja, ki ga po- trjujejo s ˇstevilnimi prestiˇznimi oblikovalskimi nagradami za njihove izdelke ter nadgrajujejo z odmevnimi sodelovanji s priznanimi svetovnimi oblikovalci:
Pininfarino, Karimom Rashidom, Ora ¨ıtom, Philippom Starckom itd. [11]
10 Jan Rat
Slika 2.3: Blagovne znamke Skupine Gorenje.
Poglavje 3 Aplikacija
3.1 Analiza
Z namenom, da bi izboljˇsali proces izdelave grafiˇcnih vmesnikov na pame- tnih peˇcicah, smo se odloˇcili dograditi informacijski sistem, ki bo ta postopek naredil hiter, enostaven in enoten. Najprej smo morali naˇcrtovati in dode- lati podatkovno bazo, nato pa smo izdelali samo spletno aplikacijo v Visual Studiju ter jo objavili na streˇzniku podjetja. Dostop do spletne aplikacije je omogoˇcen samo osebam, ki imajo tako imenovani AD raˇcun v podjetju.
3.1.1 Podatkovni model
Podatkovni model je bil zasnovan na ˇze obstojeˇci podatkovni bazi. Osnovni informacijski sistem je ˇze omogoˇcal avtentikacijo uporabnikov, urejanje pra- vic uporabnikov in dostop do drugih pod aplikacij. Da bi uspeˇsno dogradili podatkovno bazo, smo opisali problem v naravnem jeziku. Na zaˇcetku imamo oddelke podjetja kot so pralno-suˇsilni aparati (PSA), hladilno-zamrzovalni aparati (HZA) in kuhalni aparati (KA). Vsak od teh oddelkov ima veˇc mo- delov, ki so lahko razliˇcnih verzij. Nato vsak model vsebuje veˇc tekstov- nih elementov, ki imajo lokacije. Vsak tekstovni element je lahko tudi na razliˇcnih verzijah modela. Na koncu ima vsak tekstovni element prevod v toˇcno doloˇcen jezik.
11
12 Jan Rat
Oddelek
OddID (PK) Ima Model
ModID(PK) OddID(FK)
(1,n) (1,1)
Vsebuje
TekstovniElement TElemID(PK)
(1,n)
(1,n) (1,n)
Pozicionira (1,1) Lokacija LokID(PK) Telem(FK) (1,n)
Prevaja
(1,1) Prevod PrevID(PK) TElemID(FK)
JezID(FK) (1,1)
Pripada (1,n) Jezik JezID(PK)
Slika 3.1: Konceptualni podatkovni model
Diplomska naloga 13
3.1.2 Diagram primerov uporabe
Programer
Prevajalec
Kreiranje nove verzije Kreiranje novega modela
<<razširi>>
<<razširi>>
Kreiranje novega tekstovnega elementa
Potrjevanje verzije
Vnos lokacije tekstovnega elementa
<<vključi>>
<<vključi>>
Prevajanje tekstovnega elementa Izvoz prevodov v c kodo
Slika 3.2: Diagram primerov uporabe
14 Jan Rat
Primer uporabe Opis Kreiranje nove
verzije
Programer ustvari novo verzijo, kadar je prejˇsnja verzija potrjena in ˇzelimo dodati nove tekstovne elemente ali urediti stare. Po navadi v primeru dodajanja novih funkcio- nalnosti ali odpravljanja hroˇsˇcev.
Kreiranje novega modela
Programer ustvari nov model, kadar priˇcakuje, da bodo tekstovni elementi drugaˇcni od drugih modelov v isti verziji.
Potrjevanje verzije Programer potrdi verzijo, kadar je vnesel nove tekstovne elemente. Hkrati pa je pre- vajalec prevedel vse novo nastale tekstovne elemente.
Izvoz prevodov v c kodo
Ko je verzija potrjena s strani programerja, ta lahko izvozi prevode v c kodo, ki jo upo- rabi za ustvarjanje uporabniˇskega grafiˇcnega vmesnika.
Kreiranje novega tekstovnega elementa
Programer ustvari nov tekstovni element, ka- dar razvija novo funkcionalnost ali izboljˇsuje staro.
Vnos lokacije
tekstovnega elementa
Programer vnese lokacijo tekstovnega ele- menta, ko ve kje bo tekstovni element po- zicioniran na uporabniˇskem grafiˇcnem vme- sniku.
Prevajanje
tekstovnega elementa
Prevajalec prevede novo nastale tekstovne elemente ali pa popravi napaˇcen prevod ˇze obstojeˇcih tekstovnih elementov.
Tabela 3.1: Opis diagrama primerov uporabe
Diplomska naloga 15
3.2 Naˇ crtovanje
3.2.1 Arhitektura
Za izdelavo aplikacije smo uporabili MVC arhitekturni vzorec, ki je zadnje ˇcase najpogosteje uporabljeni vzorec za izdelavo vseh vrst aplikacij. To velja ˇse predvsem za razvoj spletnih aplikacij in tudi v ASP.NET je to prevzeti arhitekturni vzorec. Za avtentikacijo uporabnikov smo uporabili ˇze obstojeˇco storitev, ki omogoˇca prijavljanje na razliˇcna spletna mesta in aplikacije s pomoˇcjo dodeljenega AD raˇcuna. AD raˇcun se dodeli vsakemu zaposlenemu, ki ima delo z raˇcunalnikom ob zaposlitvi. Naˇsa aplikacija uporablja tudi podatkovno bazo, ki deluje na streˇzniku naˇsega oddelka.
Uporabnik
Strežnik Strežnik Spletni brskalnik
PB z AD računi
Lokalna PB
Slika 3.3: Arhitektura sistema
16 Jan Rat MVC
MVC (Model View Controller) je arhitekturni vzorec, ki razdeli aplikacijo na tri glavne komponente (model, pogled in krmilnik) ter s tem omogoˇci modu- larni in fleksibilni razvoj aplikacije, ob tem pa je tudi vzdrˇzevanje aplikacije veliko laˇzje. Model predstavlja stanje doloˇcenega vidika aplikacije. Krmilnik obdeluje interakcije z uporabnikom in ustrezno posodablja model, da ustreza spremembi stanja aplikacije, nato pa posreduje podatke pogledu. Pogled od krmilnika prejme potrebne informacije in zgradi uporabniˇski vmesnik ter ga prikaˇze uporabniku [12].
Slika 3.4: MVC arhitekturni vzorec
Diplomska naloga 17
3.2.2 Oblika
Oblikovanje naˇse spletne aplikacije smo dosegli s pomoˇcjo ogrodja Bootstrap.
Bootstrap je CSS ogrodje namenjeno oblikovanju in vizualizaciji odzivnih spletnih strani. Vsebuje CSS in JavaScript predloge, ki poenotijo UI in UX oblikovanje spletne strani.
3.3 Predstavitev aplikacije
Informacijski sistem, ki smo go dodelali se imenuje RivieraParadise. Rivie- raParadise je informacijski sistem, ki vsebuje veˇc manjˇsih spletnih aplikacij razvitih za potrebe naˇsega oddelka - razvoj elektronike. Njenim uporabni- kom omogoˇca bolj poenoten razvoj novih gospodinjskih aparatov, kjer je veˇc majnˇsih spletnih aplikacij, ki olajˇsajo delo zaposlenih, povezanih v celoto. S tem imamo veliko boljˇsi in preglednejˇsi pogled nad samimi fazami razvoja.
Spletno aplikacijo, ki smo jo razvili v okviru tega diplomskega dela, smo po- imenovali Recipe (recepti), ker je namenjena razvoju tekstovnih elementov pri pametni peˇcici, kjer je najveˇc teh elementov povezanih ravno z recepti.
3.3.1 Uporabniˇ ski vmesnik
Spletna aplikacija Recipe je razdeljena na veˇc podstrani. Vsaka podstran vsebuje navigacijsko vrstico, ki povezuje razliˇcne spletne aplikacije informa- cijskega sistema RivieraParadise. Navigacijski vrstica vsebuje tudi gumb za izpis uporabnika iz informacijskega sistema.
Na domaˇci podstrani se uporabniku prikaˇzejo vse verzije, ki so bile do sedaj ustvarjene. Za vsako verzijo lahko razberemo njeno verzijo in njen status. V primeru, ko je verzija potrjena, lahko vidimo tudi kdo jo je potrdil in kdaj je to bilo. Zadnji stolpec nam ponudi vse akcije, ki jih lahko izvajamo nad izbrano verzijo. Vse razen zadnje verzije morajo biti potrjene. Te nam sluˇzijo kot nekakˇsen arhiv za laˇzji in hitrejˇsi razvoj nove verzije. Vsako potrjeno verzijo lahko pogledamo in vidimo, kaj smo v tisti verziji naredili.
18 Jan Rat Zadnjo verzijo, ki ˇse ni potrjena lahko urejamo ali pa jo enostavno izbriˇsemo.
Vsaka verzija ima tudi bliˇznjico do izvaˇzanja c kode za posamezen model.
Tukaj lahko kreiramo in potrjujemo nove verzije.
Slika 3.5: Domaˇca podstran, kjer izberemo verzijo.
Slika 3.6: Moˇznost izvoza c kode na domaˇci podstrani.
Diplomska naloga 19 Ko izberemo poljubno verzijo, se nam odpre nova podstran, ki je sesta- vljena iz dveh zavihkov. Prvi zavihek poimenovan Recipes vsebuje razliˇcne tipe peˇcic, ki jih razlikujemo po imenu in vsebini. Kot ˇze omenjeno, ˇce je verzija potrjena jo lahko uporabljamo samo kot pomoˇc za razvoj nove verzije in potrjene verzije ne moremo veˇc spreminjati oziroma brisati. Drugi zavi- hek se imenuje Translations, ki vsebuje seznam vseh razliˇcnih modelov, ki jih uporabljajo razliˇcni tipi peˇcic. Na dnu podstrani imamo tudi moˇznosti za uvoz tipa peˇcice iz Excel datoteke, roˇcno dodajanje novega tipa, kopiranje tipa peˇcice iz zadnje potrjene verzije in uvaˇzanje prevodov za izbran model iz Excel datoteke.
Slika 3.7: Recipes podstran.
Ce v zavihkuˇ Recipes kliknemo gumb za urejanje, se nam prikaˇze nova podstran, ki prikaˇze podatke, ki so bili uvoˇzeni iz Excel datoteke. Na koncu te podstrani (povezava do tja je tudi na vrhu za hitrejˇsi dostop) imamo zavihke z vsemi razliˇcnimi modeli. Vsak model vsebuje menijsko strukturo, ki poveˇze ime recepta z nastavitvami peˇcice za izbrani recept. Ta imena posameznih receptov so tekstovni elementi, ki jih mora prevajalec prevesti
20 Jan Rat v izbrane jezike. Tukaj programer ustvari nove modele in nove tekstovne elemente znotraj modelov.
Slika 3.8: Podstran z uvoˇzenimi podatki iz Excel datoteke.
Slika 3.9: Podstran z modeli in tekstovnimi elementi.
Diplomska naloga 21 Kot ˇze omenjeno nam zavihekTranslations prikazuje seznam vseh razliˇcnih modelov v izbrani verziji, ki jih mora prevajalec prevesti. Vsak model je obar- van z eno izmed treh moˇznih barv. ˇCe je ozadje belo to pomeni, da so vsi tekstovni elementi v tem modelu prevedeni. Rumena barva ponazarja, da niso vsi tekstovni elementi prevedeni, rdeˇca pa pomeni, da model ne vsebuje nobenega prevoda.
Slika 3.10: Translations podstran.
V primeru, da kliknemo na gumb za urejanje prevodov za izbrani mo- del, se nam odpre nova podstran, ki vsebuje zavihka Dictionary in Recipes descriptions. Namen zavihkaDictionary je, da prevedemo imena tekstovnih elementov v izbrane jezike. Za laˇzji razvoj nam stran sama predlaga, katere tekstovne elemente ˇse moramo prevesti, da bo model v popolnosti preveden.
Vsak prevod za tekstovni element lahko tudi izbriˇsemo oziroma v primeru, da so bili prevodi uvoˇzeni iz Excel datoteke, uredimo. Na vrhu podstrani imamo tudi gumb za izvoz prevodov v c kodo. ZavihekRecipes descriptions pa vsebuje vse razliˇcne recepte, katerim moramo prevesti njihove opise. Tudi tukaj imamo gumb za izvoz prevodov v c kodo. Prevajalci torej uporabljajo to podstran za prevajanje tekstovnih elementov.
22 Jan Rat
Slika 3.11: Podstran, kjer prevajalci prevedejo tekstovne elemente.
Na koncu, ko prevajalci prevedejo vse tekstovne elemente za izbrani mo- del, mora programer vnesti ˇse lokacije za le te. To naredimo tako, da kli- knemo na gumb za vnos lokacij tekstovnih elementov. Pojavi se nam nova podstran, ki ima enako dva zavihkaDictionary inRecipes descriptions. Nato moramo vsakemu tekstovnemu elementu nastaviti zaˇcetno ter konˇcno x in y koordinato. Ko programer nastavi pozicije za vse tekstovne elemente za vsak model, ˇsele takrat je verzija pripravljena na potrditev in izvoz prevodov v c kodo.
Diplomska naloga 23
Slika 3.12: Podstran, kjer programer vnese lokacije tekstovnih elementov.
3.3.2 Poslovna logika
Kot smo ˇze opisali v poglavju 3.2.1, smo aplikacijo izdelali na podlagi arhi- tekturnega vzorca MVC. Pojavilo se je vpraˇsanje, kam pisati poslovno logiko aplikacije. Priˇsli smo do spoznanja, da poslovno logiko loˇcimo od MVC arhi- tekture, saj s tem pridobimo veliko na enostavnejˇsem vzdrˇzevanju program- ske kode. Loˇcena poslovna logika nam tudi omogoˇca, da jo lahko uporabimo za razliˇcne storitve, kot na primer izdelava API-ja. Tako kliˇce vsak model v naˇsi pod aplikaciji isto poslovno logiko, ki je vezana na oddelke in se imenuje DepartmentBusinessLogic. Vse operacije nad podatkovno bazo se kliˇcejo izkljuˇcno iz poslovne logike, kar tudi znatno izboljˇsa vzdrˇzevanje kode. Tako, da naˇsa poslovna logika vsebuje dva razliˇcna tipa metod. Prvi tip metod je namenjen operacijam nad podatkovno bazo. To je na primer brisanje ver- zije, kjer moramo poskrbeti, da se vsi podatki izbriˇsejo v pravilnem vrstnem redu. Ali pa po drugi strani dodajanje verzije, kjer morajo novonastali po- datki prestati izbrane kriterije, preden so vnesene v podatkovno bazo. Na drugi strani imamo drugi tip metod, ki je namenjen izkljuˇcno samo poizvedo- vanju obstojeˇcih podatkov, ki so ˇze v podatkovni bazi in jih ˇzelimo prikazati uporabniku.
24 Jan Rat
Slika 3.13: Prvi tip metod - dodajanje nove lokacije.
Slika 3.14: Drugi tip metod - pridobivanje modela.
Javljanje napak, ki se zgodijo v poslovni logiki je urejeno z vraˇcanjem nizov (angl. string), ki so s pomoˇcjo slovarja prevedeni v uporabniku ra- zumljiv jezik. V primerih, ko metode ne vrnejo niza ampak objekt, je to reˇseno tako, da ima vsak objekt konstruktor, ki sprejme samo niz imeno-
Diplomska naloga 25 van exceptionString. Kot smo omenili prevajamo napake v uporabniku razumljiv jezik s pomoˇcjo slovarja. Slovar je XML datoteka imenovana resources.xmlin vsebuje vse nize, ki se uporabniku lahko prikaˇzejo v spletni aplikaciji. Tako so vsa imena, naslovi, napake in vse, kar se izpiˇse uporab- niku zdruˇzena v eno datoteko. To nam znatno olajˇsa spreminjaje le teh, saj nam ni potrebno v vsaki datoteki iskati teh nizov in jih spreminjati oziroma popravljati. Ob tem pa v primeru prevoda celotnega informacijskega sistema v drug jezik traja to nekaj ur in ne nekaj dni, kot bi sicer.
Slika 3.15: XML datoteka resources.xml.
26 Jan Rat
3.3.3 Izgled
V poglavju 3.2.2 smo napisali, da smo za dizajn naˇse spletne aplikacije upo- rabili ogrodje Bootstrap. Ta poskrbi za enoten dizajn na vseh popularnejˇsih brskalnikih, skrbi pa tudi za fleksibilen prikaz, ˇce uporabljamo spletno aplika- cijo na pametnem telefonu ali tabliˇcnem raˇcunalniku. Ob tem smo ˇse vedno morali upoˇstevati smernice dizajna, ki jih narekuje naˇse podjetje. Zato je na- vigacijska vrstica v cian barvi (#00B9AD). Tekstovni elementi uporabljajo tipografijo iz druˇzine Segoe UI. Ikone, ki jih naˇsa spletna aplikacija uporablja so pod licenco CC in so namensko izrazito barvne za laˇzje razlikovanje med njimi.
3.3.4 Paketi
Naˇsa spletna aplikacija uporablja pakete, ki so na voljo v NuGet upravitelju paketov (angl. NuGet Package Manager). To orodje je bilo razvito iz strani Microsofta za potrebe Visual Studija. Njihova imena, uporabljene verzije in naˇcin uporabe so prikazani v tabeli 3.2.
Diplomska naloga 27
Paket Verzija Naˇcin uporabe
Antlr 3.5.0.2
Uporabniˇski vmesnik
Bootstrap 4.3.1
jQuery 3.3.1
jQuery.UI.Combined 1.12.1 jQuery.Validation 1.17.0
AspNet.Razor 3.2.4
AspNet.Web.Optimization 1.1.3 AspNet.WebPages 3.2.4
Modernizr 2.8.3
WebGrease 1.6.0
jQuery.Unobtrusive.Ajax 3.2.6
Prenos podatkov med odjemalcem in streˇznikom.
jQuery.Unobtrusive.Validation 3.2.4 Web.Infrastrucutre 1.0.0 Newtonsoft.Json 11.0.1 System.IO.Compression 4.3.0
Tabela 3.2: Uporabljeni paketi v NuGet upravitelju paketov.
28 Jan Rat
Poglavje 4 Zakljuˇ cki
Skozi izdelavo tega diplomskega dela, smo spoznali, kako se lotiti razvoja pod- pornega orodja, ki bo razvojni proces novih gospodinjskih aparatov olajˇsalo in pohitrilo v primerjavi s starim razvojnim procesom. Ta je bil predvsem neodporen na ˇcloveˇske napake, ki so del vseh procesov, kjer je ˇclovek priso- ten. Naˇsa spletna aplikacija je to odpornost znatno zviˇsala ter poslediˇcno pohitrila razvojni proces. Pred samo izdelavo je bilo potrebno naˇcrtovati njen razvoj, poskuˇsati predvideti, kje lahko pride do zapletov in kako le te reˇsiti. Za razvoj same spletne aplikacije smo uporabili ogrodje ASP.NET, za integrirano razvojno okolje pa je bil poslediˇcno izbran Visual Studio.
Pri razvoju spletne aplikacije Recipe ni priˇslo do veˇcjih zapletov, ker so bile komponente med seboj kompatibilne, dobro podprte ter dokumentirane.
Hitrejˇsi razvoj je bil omogoˇcen tudi zato, ker je priˇslo do dograditve informa- cijskega sistema, ki je zelo prijazen za dograjevanje, ker je pregleden, dobro napisan in optimiziran. Predvsem gre tu zahvala strukturnemu vzorci MVC, ki naredi aplikacijo veliko bolj modularno. Velikokrat se zgodi, da dogra- ditev vzame veˇc ˇcasa, kot izdelava od zaˇcetka. To pa predvsem zato, ker programska koda ni pregledna ali pa je bila arhitektura sistema v samem zaˇcetku razvoja slabo naˇcrtovana. S tem v mislih smo razvijali tudi to sple- tno aplikacijo, da bo morebitna dograditev ali sprememba ˇcim bolj enostavna in hitra.
29
30 Jan Rat Dosedanje povratne informacije glede spletne aplikacije Recipe so zelo pozitivne. Prevajalci so na eni strani z njo predvsem zadovoljni, ker je veliko preglednejˇsa od Excel datotek po drugi strani pa jih moti, da morajo za vsak tekstovni element prevode shraniti, kar je lahko moteˇce. Programerji so z aplikacijo zadovoljni, ker prevajalce opozarja na morebitne napake oziroma prepreˇcuje njihov nastanek, ob tem pa mora vsak tekstovni element vsebovat vse potrebne podatke, preden lahko verzijo potrdijo. Znatno jim olajˇsa delo tudi moˇznost generiranja c kode, kar je prej vzelo veliko veˇc ˇcasa in dodatno poveˇcalo ˇstevilo napak.
4.1 Ideje za nadaljnji razvoj
Kot ˇze omenjeno glede same spletne aplikacijeRecipe, prevajalce moti naˇcin shranjevanja prevodov tekstovnih elementov. Da bi to slabost odpravili, bi morali implementirati naˇcin tako imenovanega samodejnega shranjevanja. To bi omogoˇcilo, da se na novo vpisani prevodi shranjujejo samodejno ob pre- teku doloˇcenega ˇcasovnega intervala. Ob tem bi morali spremeniti poslovno logiko, da lahko shranimo veˇc prevodov za veˇc tekstovnih elementov hkrati.
Implementacija tega bi bila smiselna v primeru, da se izkaˇze, da je trenuten proces preveˇc ˇcasovno zahteven in preveˇc obremenjujoˇc za prevajalce, ker bi takˇsna dograditev in sprememba vzela nekaj ˇcasa za implementacijo.
Na sploˇsno pa je prihodnost te spletne aplikacije v tem, da se bodo po- dobne aplikacije razvile ˇse za razvoj drugih gospodinjskih aparatov. Razvoj le teh bo ˇse hitrejˇsi, saj ˇze imamo izdelano osnovo, razlike med njimi pa ne bi bile tako drastiˇcne.
Literatura
[1] Andreja Balon. Vizualizacija. Diplomska naloga, Fakulteta za elektro- tehniko in raˇcunalniˇstvo, Univerza v Ljubljani, 1990.
[2] Visual Studio. Dosegljivo: https://sl.wikipedia.org/wiki/Visual_
Studio. [Dostopano: 16. 11. 2020].
[3] Microsoft .NET. Dosegljivo: https://sl.wikipedia.org/wiki/
Microsoft_.NET. [Dostopano: 16. 11. 2020].
[4] ASP.NET. Dosegljivo: https://en.wikipedia.org/wiki/ASP.NET.
[Dostopano: 16. 11. 2020].
[5] SQL Server Management Studio. Dosegljivo: https://en.wikipedia.
org/wiki/SQL_Server_Management_Studio. [Dostopano: 16. 11.
2020].
[6] Microsoft SQL Server. Dosegljivo: https://en.wikipedia.org/wiki/
Microsoft_SQL_Server. [Dostopano: 16. 11. 2020].
[7] NuGet. Dosegljivo: https://docs.microsoft.com/en-us/nuget/
what-is-nuget. [Dostopano: 20. 01. 2021].
[8] ˇZumer V. Mernik M. Programski jeziki. Maribor: Fakulteta za elektro- tehniko, raˇcunalniˇstvo in informatiko, Inˇstitut za raˇcunalniˇstvo, 2003.
[9] C#. Dosegljivo: https://sl.wikipedia.org/wiki/Programski_
jezik_C_sharp. [Dostopano: 16. 11. 2020].
31
32 Jan Rat [10] Informacijske reˇsitve. Dosegljivo: http://colos.fri.uni- lj.si/eri/INFORMATIKA/Informacijske_resitve/informacijske_
resitve.htm. [Dostopano: 20. 01. 2021].
[11] Skupina gorenje. Dosegljivo: https://www.gorenjegroup.com/si/
gorenje-group/o-skupini-gorenje. [Dostopano: 20. 01. 2021].
[12] MVC arhitekurni vzorec. Dosegljivo: https://www.avera.si/
tehnologija/asp-net-mvc/. [Dostopano: 19. 01. 2021].
