Sledenjeproizvodnjivina MatevˇzKuˇsar

(1)

Univerza v Ljubljani

Fakulteta za raˇ cunalniˇ stvo in informatiko

Matevˇ z Kuˇ sar

Sledenje proizvodnji vina

DIPLOMSKO DELO

VISOKOˇSOLSKI STROKOVNI ˇSTUDIJSKI PROGRAM PRVE STOPNJE

RA ˇCUNALNIˇSTVO IN INFORMATIKA

Mentor : doc. dr. Andrej Brodnik

Ljubljana, 2021

(2)

(3)

Kandidat: Matevˇz Kuˇsar

Naslov: Sledenje proizvodnji vina

Vrsta naloge: Diplomsko delo na univerzitetnem programu prve stopnje Raˇcunalniˇstvo in informatika

Mentor: dr. Andrej Brodnik Opis:

Konjiˇcki so obiˇcajno precej pomemben element dela posameznikov, ki pa vseeno zahtevajo predano in natanˇcno delo. Eden pogostih konjiˇckov je pride- lava vina. Seveda si ˇzelimo, da pridelano vino le dosega doloˇceno kakovostno raven, kar pa zahteva precej pravoˇcasnih operacij.

Preverite kakˇsna informacijska podpora obstaja na trˇziˇsˇcu za ^≫popoldan- ske vinogradnike^≪. Pri tem naj bo cena eden od kriterijev. Na podlagi ugotovitev zasnujte in razvijte spletno aplikacijo, ki bo primerna. Razvito aplikacijo ovrednotite.

Title: Tracking wine production Description:

Hobbies are usually quite an important element of people’s work, but they require dedication and precision. One common hobby is wine production.

Of course, we want the wine produced to be of a certain quality, but this requires a lot of timely operations.

Check what IT support is available on the market for the^≫afternoon viticulturists^≪. Price should be one of the criteria. Based on the ﬁndings, design and develop a suitable web application. Evaluate the developed application.

(4)

(5)

Rad bi se zahvalil fakulteti, ki mi je omogoˇcila ˇstudij podroˇcja, ki me zanima in v katerem uˇzivam. Prav tako bi se rad zahvalil vsem profesorjem, ki sem jih spoznal, ˇse posebaj mentorju, ki mi je pomagal pri diplomski nalogi. Ne bi mi uspelo niti brez soˇsolcev, ki so mi pomagali z nasveti in me spodbujali v ˇcasu ˇstudija.

(6)

(7)

Druˇzini, ki mi je stala ob strani in me spodbujala.

(8)

(9)

Kazalo

Povzetek Abstract

1 Uvod 1

1.1 Opis problema . . . 1

1.2 Motivacija . . . 2

1.3 Cilji diplomskega dela . . . 2

2 Pregled podroˇcja 5 2.1 eVineyard . . . 5

2.2 Vintrace . . . 6

2.3 Funkcionalne zahteve . . . 7

2.4 Sklep primerjave . . . 8

3 Uporabljena orodja in tehnologije 9 3.1 Spletna aplikacija . . . 9

3.2 Zaledje aplikacije . . . 11

3.3 Orodja . . . 16

4 Analiza aplikacije 19 4.1 Arhitektura . . . 19

4.2 Predstavitev spletne aplikacije . . . 25

4.3 Ovrednotenje reˇsitve . . . 33

(10)

5 Zakljuˇcek 35

Viri in literatura 37

(11)

Seznam uporabljenih kratic

kratica angleˇsko slovensko API Application programming in-

terface

Vmesnik za namensko progra- miranje

DB Database Podatkovna baza

JS JavaScript JavaScript

TS TypeScript TypeScript

DOM Document object model Dokumentni objektni model JSON JavaScript Object Notation Notacija objekta JavaScript CSS Cascading style sheets Kaskadne slogovne podloge HTML Hyper Text Markup Langu-

age

Jezik za oznaˇcevanje nadbese- dila

XML eXtensible Markup Language Razˇsirljiv oznaˇcevalni jezik SPA Single-page application Enostranska aplikacija

SQL Structured Query Language Strukturirani poizvedovalni jezik

(12)

(13)

Povzetek

Naslov: Sledenje proizvodnji vina Avtor: Matevˇz Kuˇsar

V diplomskem delu poskuˇsamo reˇsiti problem zapisovanja dela in skladiˇsˇcnih enot pri manjˇsih do srednjih vinogradnikih. ˇCeprav se je tehnologija razvila in obstajajo reˇsitve za ta problem, je ovir ˇse vedno preveˇc. Sistemi so obˇcutno predragi za rekreativne ali manjˇse vinogradnike, ne ustrezajo vsem zahtevam ali najpomembnejˇsim in niso dovolj prilagodljivi v smislu funkcionalnosti, ki bi jih uporabniki zares potrebovali. Pri izdelovanju reˇsitve so sodelovali strokovnjaki s podroˇcja vinogradniˇstva. Z njihovo pomoˇcjo smo ustvarili spletno aplikacijo, ki vsebuje najbolj nujno funkcionalnost za podporo iz uporabniˇskih zgodb. Najprej bomo opisali obstojeˇce reˇsitve ter naˇsteli dobre in slabe lastnosti, nato razloˇzili tehnologijo, ki smo jo uporabili in zakaj smo jo ter na koncu opisali dejansko reˇsitev.

Kljuˇcne besede: vino, proizvodnja, nadzorna ploˇsˇca, spletna aplikacija.

(14)

(15)

Abstract

Title: Tracking wine production Author: Matevˇz Kuˇsar

Thesis attempts to solve the problem of data management and workflow of smaller viticulturists. Advancements in technology provide some solutions to this problem, but they may be too complicated, not adaptable enough to the needs of their users, or purely too expensive. Experts in the field of viticulture participated in the development of this solution. With their help, we created a simple application that encapsulates the most important features for users to aid productivity. In this thesis, we firstly described existing solutions, their pros and cons, the technology we used and, at the end, explain our application.

Keywords: wine, production, dashboard, web application.

(16)

(17)

Poglavje 1 Uvod

1.1 Opis problema

V 21. stoletju se je praktiˇcno nemogoˇce izogniti tehnologiji. Imamo jo v telefonih, televizorjih, avtomobilih in ˇse marsikje, za kar bi lahko rekli, da je povsem normalno, da jo tam sreˇcamo. V zadnjih nekaj letih se je tehnologija zaˇcela pojavljati celo v stvareh, kjer je ne bi nikoli priˇcakovali. To so recimo pametni hladilniki, pametni okvirji za slike, pametne svetilke, koledarji in ˇse bi lahko naˇstevali. Najdemo jo v vsaki stroki, na vseh podroˇcjih in v vseh druˇzbah. Zato ni ˇcudno, da se je zahteva po implementaciji doloˇcenih reˇsitev v vseh industrijah poveˇcala. Vsaka trgovina ima svojo spletno stran ali mobilno aplikacijo, mnogokrat oboje, javna prevozna sredstva, kot so taksiji in avtobusi, uporabljajo mobilne aplikacije, banke uporabljajo NFC (angl.

Near-Field Communication) za brezstiˇcna plaˇcevanja preko telefonov ...

Potrebe po digitalnih reˇsitvah so vse veˇcje tudi zaradi poveˇcane koliˇcine podatkov in uporabnikov. Teˇzava nastane, ko si manjˇsi podjetniki ne morejo privoˇsˇciti takih reˇsitev, kot jih ponujajo podjetja. Po navadi gre za veliko in kompleksno aplikacijo, s funkcionalnostjo, ki jo nekateri uporabniki ne bodo nikoli koristili, medtem ko cena ostaja enaka – previsoka.

Trenutna reˇsitev za zapisovanje podatkov in beleˇzenje skladiˇsˇcnih enot za vinogradnike je ... Papirnati zvezek. To je morda zadostno pri tistih

1

(18)

2 Matevˇz Kuˇsar res najmanjˇsih vinogradnikih in ˇse takrat je precej zamudno. Vsi tisti, ki spadajo v skupino^≫prevelik za zvezek^≪ali^≫premajhen za plaˇcljivo reˇsitev^≪, nimajo zaresne alternative. To veliko ljudi odvrne od agrokulture, kar je precej ˇzalostno, ko pomislimo, kako veliko vlogo ima vinogradniˇstvo v naˇsi kulturi in sedanji druˇzbi.

1.2 Motivacija

Zelimo, da bi tudi rekreativni in manjˇsi vinogradniki dobili priloˇznost opti-ˇ mizacije dela in poveˇcali produktivnost pri svojem hobiju oziroma delu. Z uspeˇsno aplikacijo bi vinogradniˇstvo pribliˇzali veˇcjemu obˇcinstvu in s tem pripomogli k porasti manjˇsih vinogradov v Sloveniji, ki so v zadnjih letih v zatonu. [29] Hkrati bi s tem pomagali pri ˇsirjenju znanja o stroki in spodbudili mlajˇse vinogradnike.

1.3 Cilji diplomskega dela

Glavni cilj diplomskega dela je spletna aplikacija, ki jo bomo gradili po naˇcelu

≫web ﬁrst^≪. To pomeni, da bomo celotno aplikacijo razvili za postavitev in loˇcljivost spletnih brskalnikov, veˇcinoma na namiznih raˇcunalnikih, in se ˇsele nato posvetili videzu aplikacije na mobilniku.

Poteza je primernejˇsa, saj je ciljna skupina uporabnikov bolj navajena na raˇcunalniˇske zaslone kot na mobilne. Prav tako bo aplikacija dokaj zahtevna v smislu funkcionalnosti in koliˇcine podatkov, zato jo bo laˇzje uporabljati na raˇcunalniku.

Diplomsko delo sestoji iz treh poglavij: pregled podroˇcja, uporabljena orodja in tehnologije ter analiza aplikacije, ki vkljuˇcuje tudi predstavitev spletne aplikacije.

V prvem poglavju bomo primerjali dve obstojeˇci in priljubljeni reˇsitvi na trgu, njune lastnosti ter ceno. V naslednjem poglavju bomo opisali orodja in tehnologije, ki smo jih uporabili, da smo priˇsli do konˇcne reˇsitve. Razdeljeno

(19)

Diplomska naloga 3 je na tri manjˇse dele – spletna aplikacija, zaledje aplikacije in orodja. V zadnjem poglavju smo opisali potek in razvoj aplikacije ter prikazali konˇcni izdelek.

(20)

4 Matevˇz Kuˇsar

(21)

Poglavje 2

Pregled podroˇ cja

2.1 eVineyard

Po hitrem brskanju po spletu lahko najdemo vinogradniˇsko aplikacijo eVine- yard [6]. Najdemo jo tudi v veˇcih primerjavah [7] in recenzijah [11]. Apli- kacijo je izdelala skupina slovenskih inˇzenirjev, informatikov, podjetnikov in agronomov. To je velika prednost, saj podpira slovenski jezik, kar je ena izmed glavnih zahtev slovenskih vinogradnikov.

Podpira ˇstiri razliˇcne konﬁguracije aplikacije odvisne od velikosti vinogradov. Najcenejˇsa moˇznost, imenovana ^≫Lite^≪ se zaˇcne pri 17 e na mesec oziroma 15ena mesec, ˇce izberemo moˇznost plaˇcila enkrat na leto. Uporab- nikom nudi vinogradniˇski koledar, napoved pojava bolezni, podporo uporabnikom preko spleta, evidenco opravil, GPS-sledenje in povezavo senzorskih naprav.

Ponudba pri najcenejˇsem paketu je precej pestra, vendar ni smiselna za manjˇse vinogradnike. Ciljna skupina naj bi bila ^≫... za druˇzine in butiˇcne vinogradnike.^≪[2] Vendar nudi lastnosti, ki bi jih teˇzko uporabil rekreativni vinogradnik. GPS-sledenje in priklop senzorskih naprav nista lastnosti majh- nih vinogradnikov. Kljub temu je cena ena izmed boljˇsih na trgu in podpora za slovenski jezik odloˇcitev ˇse olajˇsa.

Naslednji paket je^≫Professional^≪, ki prejˇsnjemu paketu doda KOPOP in 5

(22)

6 Matevˇz Kuˇsar EKO-evidence, vodenje delavcev ter pregled in naˇcrtovanje proraˇcuna. Zaˇcne se pri 49 ena mesec oziroma 37,5e na mesec pri enkratnem letnem plaˇcilu.

≫Estate^≪dodatno nadgradi paket^≫Professional^≪ s sledenjem dela za ve- like ekipe, pregledom strojev, z vinogradniˇskim izvidnikom, s pametnim na- ˇcrtovanjem dela in kartiranjem. Cena pove, da je paket namenjen veˇcjim gospodarskim vinogradnikom, ki se s tem ukvarjajo z veˇcjimi ekipami in stroji. Zanj bi odˇsteli 495 ena mesec ali 413 e pri enkratnem plaˇcilu.

Zadnji paket je ^≫Enterprise^≪ za katerega cena ni navedena, dodane ima funkcionalnosti za izraˇcun plaˇcil, sledenje trgatvi in prilagoditve. Glede na reˇsitve na trgu in njihove cenike, lahko priˇcakujemo ceno okoli 1000 e na mesec ali veˇc, kar je odvisno tudi od velikosti naˇse posesti in kompleksa.

Paketa ^≫Enterprise^≪ in ^≫Professional^≪ ne spadata veˇc v okvir naˇse re- ˇsitve. Kljub temu da so paketi razumljivo loˇceni s funkcionalnostmi glede na velikost posesti, tisti manjˇsi obrtniki potegnejo krajˇso slamico. Ker je aplikacija namenjena veˇcjim vinogradnikom, se lastnosti, ki bi bile primerne tudi za manjˇse, izgubijo v astronomski ceni paketov. Prilagodljivost in sledenje trgatvi sta lastnosti, ki bi ju lahko uporabili manjˇsi vinogradniki, namesto denimo GPS-sledenja in povezave senzorskih naprav.

Aplikacija ima kljub tem slabostim veliko podporo tudi zunaj Slovenije in celo Evrope. [8]

2.2 Vintrace

Alternativa eVineyardu je Vintrace [31]. Ta ima ˇsirˇso ponudbo paketov, zato se bomo osredotoˇcili zgolj na najcenejˇsa dva, saj je to tudi naˇsa ciljna skupina uporabnikov. Na njihovi spletni strani lahko preverimo pakete [30], in sicer bomo primerjali^≫Boutique^≪in^≫Small Estate^≪. Cena ni nikjer zapisana, zato o njej sklepamo na temelju lastnosti.

Oba sta namenjena enemu uporabniku za eno vinsko klet. Pri obeh dobimo funkcionalnosti sledenja trgatvi in stiskanju, sledenja stekleniˇcenja in pre- voza, podrobnega poroˇcanja, dostop do podpornega centra in njihove skup-

(23)

Diplomska naloga 7 nosti ter Android in iOS-aplikacijo. Prva velika razlika je ta, da naˇcrt ^≫Bou- tique^≪omogoˇca preizkuˇsevalno dobo za obdobje 30 dni, medtem ko je^≫Small Estate^≪ ne. Naslednja razlika je pri koliˇcini grozdja, ki ga vinogradnik lahko beleˇzi v paketih. Tu ima^≫Small Estate^≪za kar trikrat veˇcjo kapaciteto, torej 300 ton na leto v primerjavi s 100 – ^≫Boutiqua^≪.

Naslednje razlike so ˇse pri funkcionalnosti aplikacije, ki jo dobimo, in sicer draˇzja dobi ˇse razveljavljanje vnosov v primeru napake, sledenje prodaji in nakupom, sledenje stroˇskom in moˇznost dostopa do podpornega centra s telefonskim klicem.

Omenili smo zgolj dva najcenejˇsa paketa in takoj opazimo, da je aplikacija ˇze od zaˇcetka namenjena vinogradnikom, ki se strokovno ukvarjajo s pridelavo grozdja in vina.

2.3 Funkcionalne zahteve

Pred naˇcrtovanjem aplikacije smo izbrali funkcionalnosti, ki jih bo naˇsa aplikacija podpirala. Pri izboru nam je pomagala stroka, ki je s svojimi zahtevami vodila in usmerjala razvoj.

Aplikacija bo imela naslednje zmoˇznosti:

• dodajanje in brisanje nove posesti, vinograda na posesti ter trte v vinogradu,

• pregled obstojeˇcih trt in podrobnosti o njih,

• izpis cistern in zapolnjenosti,

• koledar z opomniki za dogodke in delo,

• spremljanje vsebnosti sladkorja v vinu in

• pregled nad botelkami.

(24)

8 Matevˇz Kuˇsar

2.4 Sklep primerjave

Aplikacija eVineyard ima podporo za manjˇse vinogradnike, vendar ima veliko lastnosti, ki se jih ne bi uporabniki niti dotaknili, medtem ko jim manjka podpora tistih veˇcjih paketov. V primerjavi s to aplikacijo je Vintrace povsem neprimerna za manjˇse vinogradnike, saj ˇze po opisu na njihovi spletni strani in predstavitvijo paketov lahko ugotovimo, da so zasnovani za veˇcjo proizvodnjo.

Obema aplikacijama manjkajo nekatere funkcionalnosti, ki smo si jih zadali mi. Koledar z opomniki je na voljo zgolj pri eVineyard, medtem ko ima samo Vintrace zmoˇznost pregleda nad trtami in cisternami. Nobena izmed aplikacij ne nudi spremljanja vsebnosti sladkorja in samo Vintrace nudi pregled nad botelkami. Aplikaciji na trgu sicer nudita funkcionalnosti, ki jih naˇsa ne, vendar veˇcino teh stroka ni niti omenila.

Na trgu je ˇse veliko aplikacij, ampak kaj kmalu ugotovimo, da niso nareje- ne za rekreativne vinogradnike. Z vidika podjetjij in razvijalcev je to povsem jasno, saj po navadi ti niso pripravljeni odˇsteti toliko, kot njihovi veˇcji kolegi.

A ˇse vseeno je to trg, ki nima resnega izdelka in prav tukaj se nadejamo, da vstopimo z naˇsim izdelkom.

(25)

Poglavje 3

Uporabljena orodja in tehnologije

3.1 Spletna aplikacija

3.1.1 Javascript

Javascript je programski jezik, narejen po speciﬁkaciji ECMAScript [5]. Raz- vilo ga je podjetje Netscape leta 1995 [15], danes skupaj s HTML-jem in CSS- om sestavlja veˇcino svetovnega spleta. [28] Je visokonivojski,^≫just-in-time^≪ preveden jezik.

Navdihnjen s strani Jave, tudi po imenu, Javascript z njo nima veliko podobnosti. Narejen za pisanje dinamiˇcnih strani lahko vgradi ali vkljuˇci HTML za funkcije, ki niso moˇzne s statiˇcno stranjo. Ni moˇcno tipiziran, je dinamiˇcen jezik in podpira tudi funkcije, strukture ter razrede. Na spletnih straneh se uporablja za dodajanje slik, iskalnikov, videov, animacij in ˇstevilne druge stvari, ki na statiˇcnih straneh ne bi bile moˇzne.

Prednosti in pomankljivosti JS pa so spodbudile razvoj drugih jezikov, kot so TypeScript [14], CoﬀeeScript [3], Objective-J [18] itd. Veˇcinoma so ti jeziki nadgradnja Javascripta ali sluˇzijo podobnemu namenu.

9

(26)

10 Matevˇz Kuˇsar

3.1.2 React

React [22] je odprtokodna brezplaˇcna JS-knjiˇznica za razvijanje uporabniˇskih vmesnikov. Napisali so jo v podjetju Facebook leta 2013 in vse od takrat naraˇsˇca v priljubljenosti. Ker je odprtokodna, jo lahko urejajo vsi, prispevajo predloge in povpravke ter piˇsejo svoje dodatke h knjiˇznici. Njena najveˇcja konkurenta sta Angular [1] in VueJs [33], ki pa sta samostojni ogrodji in ne le knjiˇznici. To pomeni, da moraˇs imeti celotno ogrodje za delo z njima, medtem ko React lahko dodaˇs vsakemu JS projektu.

Glavna znaˇcilnost Reacta in tudi razlog, zakaj je tako priljubljen, je, da so konˇcne reˇsitve lahko zelo preproste, razˇsirljive in hitre. Poleg tega je pomembno poudariti, da ˇse vedno sledi speciﬁkaciji Javascripta za vse me- tode, funkcije in razrede. To precej zniˇza krivuljo uˇcenja in pospeˇsi izdelavo spletnih aplikacij.

JSX

Druga znaˇcilnost je ta, da uporablja posebno sintakso za pisanje komponent.

Imenuje se JSX in spominja na XML-sintakso. Omogoˇca pisanje HTML- znaˇcilnih komponent v JS-kodi in olajˇsa povezavo med pisanjem logiˇcnega ter vizualnega dela spletne strani. Skupaj s HTML-jem olajˇsa tudi oblikovanje z jezikom CSS. Ko uporabnik napiˇse kodo z uporabo te sintakse, React poskrbi, da se vse preslika v DOM - hierarhijo komponent, ki jo uporabljajo brskalniki.

Razvijalci niso prisiljeni uporabljati te sintakse, vendar s tem lahko naredijo kodo preprostejˇso in berljivejˇso.

Primer JSX-sintakse je videti takole:

class App extends React.Component { render() {

return (

<div>

<p>Header</p>

<p>Content</p>

(27)

Diplomska naloga 11

<p>Footer</p>

</div>

);

} }

Za shranjevanje uporabniˇskega vnosa, preden se vse prenese na streˇznik oziroma podatkovno bazo, React uporablja t. i. state (slov. stanje). To je navaden objekt zapisan v JSON naˇcinu in do njega dostopamo z React hooks – posebnimi funkcijami, ki so na voljo izven razredov. S tem se lahko znebimo kompleksnih komponent iz razredov ter prihranimo pri delovnem pomnilniku in hitrosti delovanja.

3.1.3 Figma

Figma je urejevalnik vektorskih graﬁk in prototipiziranj, narejen leta 2016, in je primarno spletna aplikacija z dodatno namizno aplikacijo za Windows in macOS ter mobilno za Android in iOS [12]. Omogoˇca oblikovanje upo- rabniˇskih vmesnikov (angl. user interface – UI) in uporabniˇske izkuˇsnje (angl. user experience – UX), glavna prednost aplikacije je hkratno sodelo- vanje razvijalcev na istem projektu.

Figma omogoˇca zelo preprosto in natanˇcno naˇcrtovanje mobilnih in spletnih aplikacij (slika 3.1) in ponuja ˇstevilne razˇsiritve, kot so uporaba Googlo- vega dizajnerskega jezika MaterialUI in prav tako Applovega Cupertino ter lastne oblike ali elemente, ki so jih naredili samostojni uporabniki.

3.2 Zaledje aplikacije

3.2.1 Node.js

Node.js je odprtokodno zaledno izvajalno okolje s podporo na veˇcih platformah, ki izvaja JavaScript-kodo izven brskalnika [16, 19]. Uporablja se za

(28)

(29)

Diplomska naloga 13 Primer preprostega GET-klica na zaˇcetno pot ^≫/^≪ s streˇznikom Express:

app.get(’/’, (req, res) => {

res.send(’Prejeli smo vaˇs GET klic.’) })

Nodemon

Nodemon je ena izmed knjiˇznic napisanih za Node.js-okolje.[17] Posebnost te knjiˇznice je, da ob vsaki spremembi datotek ponovno poˇzene streˇznik. ki nam v najkrajˇsem moˇznem ˇcasu zaˇcne prikazovati spremembe.

Je sila preprost za uporabo, dovoli nam konﬁguracijo datotek, ki jih opa- zuje ter je v celoti zastonjski in odprtokoden. Njegova prednost v primerjavi z normalnim zagonom streˇznika v razvojni fazi s kljuˇcno besedo^≫node^≪ je, da razvijalcem pohitri zagon s spremembami v datoteki. Za zagon konˇcnega streˇznika, ko je v celoti razvit in pripravljen na produkcijo, se ˇse vedno uporablja primaren naˇcin zagona t.j. s kljuˇcno besedo^≫node^≪.

3.2.2 TypeScript

TypeScript je programski jezik, ki ga je razvil in ga vzdrˇzuje podjetje Micro- soft [26]. Sintaktiˇcno gledano je nadmnoˇzica JavaScripta, ki mu doda opcijsko statiˇcno pisanje. To pomeni, da moramo pri pisanju kode nujno napisati tip spremenljivke, sicer nam lahko prevajalnik vrne napako [24]. Namenjen je razvoju veˇcjih aplikacij in njegova koda se pred izvajanjem prevede v JS, da izboljˇsa kompatibilnost v spletnih brskalnikih. Vsak program, napisan v JS, je povsem veljaven TS-program.

Nekatere izmed lastnosti, ki jih TS doda JavaScriptu, so:

• sklepanje o tipu,

• preverjanje tipov ob prevajanju in

• vmesniki.

(30)

14 Matevˇz Kuˇsar Za uporabo TypeScripta zgolj v zaledju smo se odloˇcili, ker sta pomemb- na robustnost in prepreˇcevanje napak ob programiranju. Programski jezik nam omogoˇca, da prepreˇcimo napake med izvajanjem programa, kot so zapisovanje v nepravilne tipe spremenljivk, natanˇcnejˇsa primerjava spremenljivk in pravilna raba argumentov v funkcijah. Za uporabniˇski vmesnik bomo uporabil JavaScript in ne TS, ker ne zahteva robustnosti in tipiziranih spremenljivk.

3.2.3 SQL

Strukturiran poizvedovalni jezik (angl. Structured Query Language) je namenjen dostopu in manipulaciji podatkov v podatkovni bazi [25]. Doloˇcen je s standardom ANSI/ISO in je med najbolj priljubljenimi in razˇsirjenimi jeziki za poizvedovanje. Ameriˇski nacionalni inˇstitut (ANSI) ga je standardiziral leta 1986, leto kasneje ga je tudi Mednarodna organizacija za standardizacijo (ISO).

Ukaze za delo s podatki delimo v ˇstiri glavne skupine [25]:

• DDL – deﬁnicija podatkov: ustvarjanje in spreminjanje tabel v podatkovni bazi (CREATE, ALTER in DROP).

• DML – manipulacija podatkov: iskanje, shranjevanje, brisanje, poso- dabljanje in spreminjanje podatkov v podatkovni bazi (SELECT, IN- SERT, UPDATE in DELETE).

• DCL – nadzor podatkov: nadzor dostopa do podatkovne baze in ustvarjanje vlog uporabnikom (GRANT in REVOKE).

• TCL – nadzor nad transakcijami: upravljanje transakcij znotraj podatkovne baze (COMMIT, ROLLBACK in SAVE TRANSACTION).

PostgreSQL

PostgreSQL je brezplaˇcen odprtokodni sistem za vodenje relacijskih podatkovnih baz [20]. To je en izmed ˇstevilnih sistemov za vodenje podatkovnih

(31)

Diplomska naloga 15 baz, ki so skladni s pravili SQL-a.

3.2.4 TypeORM

TypeORM je objektno-relacijski preslikovalnik, narejen za jezika TypeScript in JavaScript [27]. Uporabljamo ga lahko v NodeJs, brskalniku in ˇstevilnih drugih.

ORM nam olajˇsa delo s podatkovnimi bazami na naˇcin, da preslika vrstico iz podatkovne tabele v objekt v izbranem programskem jeziku. S tem se izognemo pisanju SQL-ukazov, kar zmanjˇsa zahtevnost aplikacije oziroma programa. Poleg tega je ORM povsem neodvisen od tipa relacijske baze, kar pomeni, da lahko med razvojem spremenimo podatkovno bazo (recimo s PostgreSQL na MySQL) brez sprememb v napisani kodi. TypeORM podpira MySQL, MariaDB, Postgres, CockroachDB, SQLite, Microsoft SQL Server, Oracle, SAP Hana, sql.js in celo MongoDB, ki je NoSQL-podatkovna baza.

Primer modela z uporabo TypeORM:

import {Entity, PrimaryGeneratedColumn, Column} from "typeorm";

@Entity()

export class User {

@PrimaryGeneratedColumn() id: number;

@Column()

firstName: string;

@Column()

lastName: string;

@Column() age: number;

}

Domenska logika za shranjevanje in iskanje objektov je videti tako:

const repository = connection.getRepository(User);

(32)

16 Matevˇz Kuˇsar const user = new User();

user.firstName = "Timber";

user.lastName = "Saw";

user.age = 25;

await repository.save(user);

const allUsers = await repository.find();

const firstUser = await repository.findOne(1);

const timber = await repository

.findOne({ firstName: "Timber", lastName: "Saw" });

await repository.remove(timber);

3.3 Orodja

3.3.1 Razvojno okolje IntelliJ IDEA

IntelliJ IDEA je integrirano razvojno okolje (angl. integrated development environment), ki ga je razvilo podjetje JetBrains leta 2001. Na voljo je za Microsoft Windows 8 in dalje, na macOS od 10.13 naprej ter na Linuxovih distribucijah, ki podpirajo namizna okolja Gnome, KDE ali Unity. Napisano je v Javi in na voljo sta^≫community edition^≪in^≫commercial edition^≪. Prva je brezplaˇcna za vsakogar, drugo pa lahko brezplaˇcno dobijo vsi, ki obiskujejo izobraˇzevalne ustanove.

IDEA je zelo priljubljeno orodje za delo tako mobilnih kot spletnih in namiznih aplikacij, zato ima tudi veliko podporo samostojnih razvijalcev, ki lahko napiˇsejo vtiˇcnike, ki so tako na voljo tudi drugim. Vgrajeno ima podporo za jezike, kot so Java (primarno je bilo okolje razvito zgolj za ta jezik), Groovy, Kotlin, JavaScript, TypeScript itd. Podporo za druge jezike jezike, kot so npr. Dart, Python, Rust, R, GO in PHP, lahko dodamo s prej omenjenimi vtiˇcniki [13].

Okolje ponuja pomoˇc pri programiranju z dokonˇcanjem (predlaganjem)

(33)

Diplomska naloga 17 kode, navigacijo po kodi s skoki do deklaracij razredov in funkcij, refakto- riranjem kode, razhroˇsˇcevanjem itd. Prav tako podpira verzioniranje kode s sistemi, kot so Git, Mercurial, Perforce in SVN, ter integracijo z orodji za grajenje, kot so grunt, bower, gradle in SBT. Razliˇcica ^≫Ultimate edition^≪ ima vgrajeno razliˇcico DataGripa s katero lahko dostopamo do podatkovnih baz, kot so Microsoft SQL Server, Oracle, PostgreSQL, SQLite in MySQL.

Poleg tega ima vgrajeno ukazno okno, vnaprej deﬁnirane bliˇznjice, ki jih lahko uporabnik spremeni, izvajalec testov in pokritost kode, orodje za upravljanje z Docker zabojniki ter aplikacijski streˇznik. Za ohranjanje ˇciste in pregledne kode zaznava dvojnike, veriˇzno dopolnjevanje kode, analizo po- datkovnega toka in nudi hitre popravke v kodi.

3.3.2 VSCodium

VSCodium je zastonjska binarna distribucija [32] Microsoftovega urejevalnika kode VSCode. Izvirna koda VSCode je odprtokodna, vendar izdelek sam po sebi ni, saj vsebuje telemetrijo in sledenje, vendar v funkcionalnosti in razˇsiritvah ni razlike.

Okolje omogoˇca oznaˇcevanje sintakse, samodejno dokonˇcanje kode, ra- zhroˇsˇcevanje in ima vgrajene ukaze za verzioniranje kode s sistemom Git. Ta omogoˇca prikaz razlik v razliˇcicah in dostop do repozitorija kar v programu.

Kot IntelliJ IDEA ima tudi ta na voljo zelo veliko vtiˇcnikov, ki poma- gajo pri urejanju kode, spreminjanju teme, konﬁguraciji razhroˇsˇcevalnika in povezovanju dodatnih storitev. Na zaˇcetku je to okolje hitrejˇse od IntelliJa, vendar ima veliko manj moˇznosti in sposobnosti. To se lahko (skoraj) povsem nadoknadi z vtiˇcniki, ˇce uporabik ˇzeli.

3.3.3 DBeaver

DBeaver je zastonjsko in odprtokodno orodje, na voljo na veˇc platformah, za razvijalce in administratorje podatkovnih baz [4]. Za povezovanje na bazo in delovanje potrebuje gonilnik JDBC (Java Database Connectivity), zato deluje

(34)

18 Matevˇz Kuˇsar z vsemi tipi relacijskih baz, ki ga imajo na voljo. Prav tako kot ˇstevilna druga orodja uporablja vtiˇcnike za poveˇcanje zmogljivosti in funkcionalnosti.

3.3.4 Docker

Docker je skupek produktov po naˇcelu platforma kot storitev (angl.platform as a service – PaaS), ki nudijo virtualizacijo na ravni operacijskega sistema.

Ti produkti so omejeni na vsebnike (angl. containers), ki so povsem loˇceni drug od drugega in imajo svojo programsko opremo, knjiˇznice, konﬁguracijske datoteke ter se pogovarjajo med sabo po natanˇcno doloˇcenih kanalih.

Omogoˇcajo izvajanje programske opreme brez virtualne naprave, kar iz- jemno zmanjˇsa zahtevnost in obremenitev operacijskega sistema na napravi.

Izvaja se lahko v javnem in zasebnem oblaku ali na lokalni napravi.

3.3.5 Postman

Postman je platforma za razvoj, dokumentiranje, uporabo in testiranje API- jev [21]. Z njim lahko poˇsiljamo zahteve po pravilih REST-a, SOAP-a ali GraphQL-a na kateri koli streˇznik, v primeru razvijalcev z njim preverjamo lasten razvoj streˇznika. Omogoˇca avtomatizirane teste, ki jih lahko integrira- mo v CI/CD (Continuous Integration in Continuous Deployment) in s tem prepreˇcimo, da bi objavili kodo, ki bi pokvarila aplikacijo.

Na voljo je kot namizna aplikacija za Windows, Linux in macOS, spletna aplikacija ali razˇsiritev za brskalnik.

(35)

Poglavje 4

Analiza aplikacije

V tem poglavju bomo predstavili arhitekturo zaledja in spletne aplikacije ter predstavili in ovrednotili reˇsitev.

4.1 Arhitektura

Pri naˇcrtovanju izdelka smo delovanje razˇclenili na zaledje, ki se deli na podatkovni model in API, ter spletno aplikacijo. To nam omogoˇca, da poe- notimo delovanje v primeru, da dodamo ˇse mobilno aplikacijo.

Delovanje je na preprost naˇcin opisano tako: uporabnik preko raˇcunalnika uporablja aplikacijo, ta poˇsilja zahtevke na API, ki jih sprejme, in na podlagi le-teh iz podatkovne baze izbere primerne podatke. Nato jih vmesnik vrne spletni aplikaciji, ki jih prikaˇze uporabniku.

4.1.1 Zaledje

Podatkovni model

Pri izdelavi izdelka smo uporabljali ogrodje TypeORM, ki nam je na podlagi deﬁniranih razredov generiralo entitetno-relacijski (ER) diagram. Ta diagram vidimo na sliki 4.1.

19

(36)

20 Matevˇz Kuˇsar Entitete imajo razliˇcne vloge, zato tudi razliˇcne atribute, ki jih bomo na kratko opisali spodaj.

• Vinogradnik - osnovni podatki o uporabniku.

• Posest – kdo je lastnik in kje se nahaja.

• Meritev posesti – tu zabeleˇzimo velikost posesti in ˇcas meritve.

• Trta – vsaka posest ima niˇc ali veˇc trt, ki beleˇzi meritev trte, delo na trti, sorto in grozdje.

• Delo – vkljuˇcuje opis dela, npr. ˇskropljenje, spodbiranje, trgatev in saditev.

• ˇSkropljenje – zelo pomembno delo, ki ima svojo tabelo s podatki o datumu, ˇskropivu, kadenci in koliˇcini ˇskropiva.

• Grozdje – trta nam da koliˇcino grozdja in tip.

• Letina – rodovitnost trte v enem letu.

• Vino – vsako leto pridelamo doloˇceno koliˇcino vina, ki ima svojo raven maceracije, se pretaka in hrani v cisternah.

• Maceracija – ob vsakem merjenju si zapomnimo koliˇcino sladkorja, da- tum in posebnosti.

• Cisterna – vsebuje podatke o vrstah in koliˇcini vina, ki ga hrani.

• Botelka – konˇcni izdelek vinogradniˇskega dela je vino, ki ga lahko pro- damo ali spijemo. To shranimo v tej tabeli s podatki o tipu vina, koliˇcini, datumu izdelave in velikosti botelke.

• Merska enota – uporabnik lahko s pomoˇcjo tega sam izbere, katere merske enote ˇzeli uporabljati v aplikaciji.

(37)

(38)

22 Matevˇz Kuˇsar }

in primer objekta Posest:

@Entity()

export class Posest extends BaseEntity {

@PrimaryGeneratedColumn() idPosest!: number;

@Column()

naslov!: string;

@ManyToOne(() => Vinogradnik,

vinogradnik => vinogradnik.posesti) vinogradnik!: Vinogradnik;

}.

Entiteti vinogradnik in posest sta povezani z notacijo povezave mnogo proti ena – vsak vinogradnik ima lahko veˇc posesti, vendar vsaka posest pripada zgolj enemu vinogradniku. Oba razreda razˇsirita BaseEntity, ki je objekt ogrodja TypeORM, ki v ozadju ustvari pravilno povezavo za izbrano podatkovno bazo. Vsak objekt potrebuje primarni kljuˇc, ki je v tem primeru nakljuˇcno generiran ob vstavljanju v tabelo.

API

API je namenjen pogovoru spletne aplikacije z zaledjem. V primerjavi z mobilno aplikacijo, kjer je vmesna raven med podatkovno bazo in aplikacijo nujno potrebna, pri spletnih aplikacijah ni obvezna, vendar je zelo velik korak k izboljˇsanju varnosti sistema, zato smo ga, kot primer dobre prakse, uporabili tudi mi.

Pri APIju smo uporabil standardne HTTP-zahtevke, kot so GET, POST, DELETE in PUT. GET se uporablja za pridobitev podatkov z zaledja, POST za poˇsiljanje podatkov v JSON-obliki, DELETE za brisanje doloˇcenih podatkov na zaledju in PUT za spreminjanje podatkov ali dodajanje k obstojeˇcim zapisom.

(39)

Diplomska naloga 23

• Pridobitev vseh vinogradnikov v bazi:

const getAllVinogradnik = () => { const conn = getConnection();

const repo = conn.getRepository(Vinogradnik);

return repo.find();

}.

• Iskanje vinogradnika po njegovem identiﬁkacijskem kljuˇcu:

const getVinogradnikById = (id: number) => { const conn = getConnection();

return repo.findOne(id);

}.

• Kreiranje novega vinogradnika:

const createNewVinogradnik = () => {

const repo = getRepository(Vinogradnik);

const newVinogradnik = {ime: "Janez Novak"};

return repo.save(newVinogradnik);

}.

• Brisanje vinogradnika:

const deleteVinogradnikById = (id: number) =>{

const conn = getConnection();

return repo.delete(id);

}.

(40)

(41)

Diplomska naloga 25 SPA

Aplikacija je enostranska, kar pomeni, da uporabnik v resnici upravlja z eno stranjo, vendar se obnaˇsa, kot da vedno naloˇzi novo stran – to vidimo tudi po spreminjanju spletnega naslova URL. Ta pristop je v primerjavi s tradi- cionalno veˇcstransko spletno aplikacijo preprostejˇsi za razvoj in raˇcunalniˇske vire, ki jih potrebuje za nemoteno delovanje. Ker SPA vedno spreminja le en del strani (po navadi se spreminja vsebina, medtem ko zgornja vrstica in stranski meni ostajata enaka), je hitrejˇsa, porabi manj internetne pasovne ˇsirine in nalaga slikovne vire le po potrebi. V Reactu, Vueju in Angularju se primarno razvijajo enostranske aplikacije, zato se tudi drugi pomikajo k uporabi tega.

4.2 Predstavitev spletne aplikacije

Razvoj aplikacije je potekal na lokalnem streˇzniku in koda je na osebnem repozitoriju, zato nista javno dostopni. Za primer te diplomske naloge so podatki izmiˇsljeni in nekateri nakljuˇcni. Do spletne aplikacije lahko dostopamo preko brskalnikov, kot so Google Chrome, Microsoft Edge in Mozilla Firefox.

4.2.1 Nadzorna ploˇ sˇ ca

Najpomembnejˇsi del aplikacije je domaˇca stran oziroma nadzorna ploˇsˇca (slika 4.3). Tu uporabnik izve najpomembnejˇse podatke, ki jih potrebuje za opravljanje dela v vinogradu, prav tako tu preˇzivi najveˇc ˇcasa, zato je zelo pomembno, kaj je prikazano na njej.

(42)

(43)

(44)

(45)

(46)

(47)

(48)

(49)

Diplomska naloga 33

4.3 Ovrednotenje reˇ sitve

Spletno aplikacijo lahko ovrednotimo tako, da pogledamo, katere funkcionalnosti smo dosegli in katerih ne. Konˇcna reˇsitev podpira dodajanje posesti, vinograda na posest in trte v vinograd, vendar ne podpira brisanja. Po- razdeljenost in zapolnjenost cistern prikazujemo v obliki kroˇznega diagrama, podpiramo dodajanje dogodkov in dela, ki se prikazuje na koledarju, ter spremljanje vsebnosti sladkorja v vinu. Med razvojem smo dodali tabelo za pregled zadnjih ˇskropljenj.

Glede na funkcionalne zahteve postavljenje pred razvojem aplikacije, nam manjka zmoˇznost brisanja posesti, trt in vinogradov, pregled obstojeˇcih trt ter pregled nad botelkami.

4.3.1 Nadaljnji razvoj

Aplikacija je pripravljenja za uporabo in ima najpomembnejˇse lastnosti, ki jih potrebuje. Kljub temu se razvoj lahko nadaljuje z implementacijami novih sposobnosti, prilagoditvami glede na ˇzelje uporabnika ali drugimi idejami, ki se pojavijo med razvojem.

Prva izboljˇsava je zmoˇznost brisanja elementov – posesti, vinograda in trte. Naslednja je implementacija strani za pomoˇc novejˇsim vinogradnikom v smislu uporabnih povezav do spletnih strani z navodili za ˇskropljenje, vzdrˇzevanje in trganje trt. Prav tako bi lahko implementirali vremensko napoved na posebno stran ali v koledar, da bi olajˇsali odloˇcitve uporabnikom.

Navdih lahko vzamemo tudi iz funkcionalnosti, ki jih nudijo druge aplikacije ter tako razˇsirimo lasten nabor zmoˇznosti.

Cilj diplomskega dela je bil ustvariti ^≫web ﬁrst^≪ aplikacijo. Naslednji korak bi lahko bil, da aplikacijo prilagodimo za manjˇse zaslone in mobilne naprave. S tem bi zagotovili veˇcjo dostopnost aplikacije uporabnikom tudi na poti.

(50)

34 Matevˇz Kuˇsar

(51)

Poglavje 5 Zakljuˇ cek

V diplomskem delu smo opisali in prikazali spletno aplikacijo za pregled nad vinogradom. Najprej smo primerjali dve obstojeˇci reˇsitvi, ki sta ˇze na trgu in ugotovili, da zaradi posploˇsitev ne ustrezata naˇsim merilom. Imata previsoko ceno in posveˇcata se vinogradnikom, ki se preˇzivljajo s to obrtjo. V nadalje- vanju smo opisali orodja in tehnologije za spletno aplikacijo ter zaledje.

Aplikacijo smo naˇcrtovali in izdelali na naˇcin, ki uporabniku omogoˇca ˇcim hitrejˇsi in preprostejˇsi preskok s trenutne reˇsitve na naˇso. Z uporabo priljubljenih orodij in predlog, smo zagotovili hiter razvoj in prilagoditev projekta tudi morebitnim novim razvijalcem.

Pred zaˇcetkom pisanja diplomskega dela smo si zadali cilj, da razvijemo spletno aplikacijo z zaledjem. Ta cilj smo dosegli in uspeli napisati intuitivno aplikacijo za vse vrste uporabnikov.

35

(52)

36 Matevˇz Kuˇsar

(53)

Viri in literatura

[1] Angular. 2021. url: https://angular.io/ (pridobljeno 22. 6. 2021).

[2] Cene in paketi eVineyard. 2021. url: https://www.evineyardapp.

com/sl/pricing_and_plans (pridobljeno 21. 6. 2021).

[3] CoﬀeeScript. 2021. url: http://coffeescript.org/#introduction (pridobljeno 9. 9. 2021).

[4] DBeaver. 2021.url:https://dbeaver.io/about(pridobljeno 30. 7. 2021).

[5] ECMAScript®2020 internationalization API speciﬁcation. 2021.url: https : / / www . ecma - international . org / publications - and - standards/standards/ecma-402/ (pridobljeno 22. 6. 2021).

[6] eVineyard - Sistem za pomoˇc pri upravljanju vinogradov. 2021. url: https://www.evineyardapp.com/sl/ (pridobljeno 21. 6. 2021).

[7] eVineyard Alternatives. 2021. url: https://www.capterra.com/p/

155862/eVineyard/alternatives/(pridobljeno 21. 6. 2021).

[8] eVineyard about. 2021. url: https://www.evineyardapp.com/sl/

#about (pridobljeno 11. 8. 2021).

[9] Express.js. 2021.url:http://expressjs.com/(pridobljeno 30. 7. 2021).

[10] Figma. 2021.url: https://www.figma.com/ (pridobljeno 3. 8. 2021).

[11] G2. 2021. url: https://www.g2.com/products/evineyard/reviews (pridobljeno 21. 6. 2021).

37

(54)

38 Matevˇz Kuˇsar [12] Robbie Gonzalez. Figma Wants Designers to Collaborate Google-Docs Style. 2017. url: https://www.wired.com/story/figma-updates/

(pridobljeno 13. 9. 2021).

[13] IntelliJ IDEA. 2021. url: https : / / www . jetbrains . com / idea / features/ (pridobljeno 30. 7. 2021).

[14] Microsoft TypeScript: the JavaScript we need, or a solution looking for a problem? 2012. url: https : / / arstechnica . com / information - technology / 2012 / 10 / microsoft - typescript - the - javascript - we - need - or - a - solution - looking - for - a - problem (pridobljeno 9. 9. 2021).

[15] Netscape and Sun announce JavaScript, the open, cross-platform object scripting language for enterprise networks and the internet. 1995.url: https : / / web . archive . org / web / 20070916144913 / http : / / wp . netscape.com/newsref/pr/newsrelease67.html(pridobljeno 20. 8. 2021).

[16] Node.js. 2021. url: https : / / nodejs . org / en / about/ (pridobljeno 30. 7. 2021).

[17] Nodemon. 2021. url: https : / / www . npmjs . com / package / nodemon (pridobljeno 30. 7. 2021).

[18] Objective-J. 2021.url:https://codedocs.org/what-is/objective- j (pridobljeno 9. 9. 2021).

[19] Lauren Orsini. What You Need To Know About Node.js. 2013. url: https://readwrite.com/2013/11/07/what- you- need- to- know- about-nodejs/(pridobljeno 13. 9. 2021).

[20] PostgreSQL. 2021. url: https://www.postgresql.org/about/ (pridobljeno 30. 7. 2021).

[21] Postman. 2021.url:https://www.postman.com/(pridobljeno 30. 7. 2021).

[22] React. 2021.url: https://reactjs.org/(pridobljeno 22. 6. 2021).

(55)

Diplomska naloga 39 [23] Trygve Reenskaug in James O. Coplien.The DCI Architecture: A New Vision of Object-Oriented Programming. 2009. url: https : / / web . archive . org / web / 20090323032904 / https : / / www . artima . com / articles/dci_vision.html (pridobljeno 13. 9. 2021).

[24] Static Typing. 2021.url:https://www.webopedia.com/definitions/

static-typing/(pridobljeno 9. 9. 2021).

[25] Structured Query Language. 2021.url: https://en.wikibooks.org/

wiki/Structured_Query_Language(pridobljeno 13. 9. 2021).

[26] The TypeScript Handbook. 2021.url:https://www.typescriptlang.

org/docs/handbook/intro.html (pridobljeno 13. 9. 2021).

[27] TypeORM. 2021.url:https://typeorm.io/#/(pridobljeno 30. 7. 2021).

[28] Usage statistics of JavaScript as client-side programming language on websites. 2021. url:https://w3techs.com/technologies/details/

cp-javascript/(pridobljeno 9. 9. 2021).

[29] Vinogradniˇstvo in vinarstvo. 2021. url: https://www.gov.si/teme/

vinogradnistvo-in-vinarstvo/(pridobljeno 12. 9. 2021).

[30] Vintrace Pricing and plans. 2021. url: https://www.vintrace.com/

tgl/pricing-and-plans/ (pridobljeno 22. 6. 2021).

[31] Vintrace Winery Software — A better way to make wine. 2021. url: https://www.vintrace.com/tgl/(pridobljeno 22. 6. 2021).

[32] VSCodium. 2021.url:https://vscodium.com/(pridobljeno 30. 7. 2021).

[33] VueJs. 2021. url:https://vuejs.org/ (pridobljeno 22. 6. 2021).