UNIVERZA V MARIBORU

FAKULTETA ZA ELEKTROTEHNIKO,

RAČUNALNIŠTVO IN INFORMATIKO

Mitja Čerpnjak

AVTOMATIZACIJA PRI SPLETNIH STORITVAH

Diplomsko delo

Visokošolskega strokovnega študijskega programa 1. stopnje

Računalništvo in informacijske tehnologije

Maribor, september 2017

Avtomatizacija pri spletnih storitvah

Diplomsko delo

Študent: Mitja ČERPNJAK

Študijski program: Visokošolski strokovni študijski program 1. stopnje

Računalništvo in informacijske tehnologije

Mentor FERI: red. prof. dr. PETER KOKOL, univ. dipl. inž. el.

I

II

III

Zahvala

''Največji problem programerjev je, da se ne sprašujejo o kompleksnosti svoje stvaritve.''

- E. W. Dijkstra

Zahvaljujem se mentorju red. prof. dr. Petru Kokolu za strokovno pomoč in nasvete pri

izdelavi diplomskega dela.

Posebna zahvala pa gre družini, ki mi je ves čas stala ob strani in mi nudila podporo.

IV

Avtomatizacija pri spletnih storitvah

Ključne besede: programska oprema, avtomatizacija, spletne storitve, implementacija,

tehnologija.

UDK: 004.4'2/'6:004.777(043.2)

Povzetek

Kljub temu da pojem avtomatizacija za veliko ljudi zveni zakomplicirano, povpraševanje po

avtomatizaciji tako strojne kot tudi programske opreme narašča. Zato smo se odločili ta pojem

predstaviti. Diplomska naloga opisuje razvoj avtomatiziranega okolja spletnih storitev. Pri tem

so našteti naši izbori orodij in tehnologij, ki smo jih uporabili v diplomskem delu. Dodani so še

predstavitev njihove uporabe, praktičen primer uporabe, namen uporabe, vzrok, zakaj smo se

zanje odločili, ter njihove prednosti in slabosti.

Predstavili smo še sam postopek razvoja avtomatizacije spletnih storitev, kjer je, s trenutno

sodobnimi tehnologijami, prikazano, kako to lahko implementiramo tudi sami.

V

Automatization in web design

Keywords: software, automation, web services, implementation, technology, tools.

UDK: 004.4'2/'6:004.777(043.2)

Abstract

Despite the fact that the concept of automation sounds complicated for the majority, the

demand for the automation of both hardware and software is increasing. That's why we

decided to present this concept. The Bachelor thesis describes the development of an

automated online service environment. Here we list our selection of tools and technologies

that were used. We added a presentation of their usability, practical examples of use and the

purpose of usage despite its disadvantages.

We also covered the process of developing an automated web service, where the current

technologies show how we can implement it ourselves.

VI

Kazalo

1 UVOD ........................................................................................................................ 1

2 RAZVOJNA ORODJA ................................................................................................... 3

2.1 Sublime Text ................................................................................................................... 4

2.2 CommandPrompt (CmdPrompt) .................................................................................... 5

2.3 Node.js ............................................................................................................................ 6

2.4 NPM ................................................................................................................................ 7

2.5 Bower ............................................................................................................................. 8

2.6 Gulp ................................................................................................................................ 9

3 RAZVOJNE TEHNOLOGIJE ......................................................................................... 10

3.1 Hyper Text Markup Language ...................................................................................... 10

3.2 Cascading Style Sheets ................................................................................................. 14

3.3 AngularJS ...................................................................................................................... 17

3.4 WebPack ....................................................................................................................... 19

3.5 JavaScript ...................................................................................................................... 21

4 KORAKI RAZVOJA SPLETNE APLIKACIJE .................................................................... 23

4.1 Boilerplate .................................................................................................................... 23

4.2 Avtomatizacija spletnih storitev ................................................................................... 24

4.3 Priprava okolja .............................................................................................................. 24

4.4 Razvoj projekta ............................................................................................................. 28

4.5 Koraki razvoja projekta ................................................................................................. 32

4.6 Koraki implementacije avtomatizacije ......................................................................... 41

5 REZULTATI ............................................................................................................... 45

6 ZAKLJUČEK .............................................................................................................. 48

7 VIRI ......................................................................................................................... 49

VII

Kazalo slik

Slika 1: Sublime Text ................................................................................................................... 4

Slika 2: Primer ukazne vrstice ..................................................................................................... 5

Slika 3: NodeJS ............................................................................................................................ 6

Slika 4: NPM................................................................................................................................ 7

Slika 5: Bower ............................................................................................................................. 8

Slika 6: Gulp ................................................................................................................................ 9

Slika 7: HTML ............................................................................................................................ 10

Slika 8: Primer začetka in zaključka značke za naslov .............................................................. 11

Slika 9: Primer navadnega teksta z značko <p> brez zaključka ................................................ 11

Slika 10: Tekstovno vnosno polje ............................................................................................. 11

Slika 11: Primer osnovnega HTML-dokumenta ........................................................................ 12

Slika 12: Prikaz spletnega dokumenta ...................................................................................... 12

Slika 13: CSS .............................................................................................................................. 14

Slika 14: Okrasitev HTML-elementov ....................................................................................... 14

Slika 15: Spletna stran pred (levo) in po (desno) uporabi CSS ................................................. 15

Slika 16: AngularJS .................................................................................................................... 17

Slika 17: Webpack .................................................................................................................... 19

Slika 18: JavaScript ikona .......................................................................................................... 21

Slika 19: Boilerplate .................................................................................................................. 23

Slika 20: NodeJS uradna stran .................................................................................................. 24

Slika 21: Prikaz bližnjice do Microsoft Windows Run komponente ......................................... 25

Slika 22: Microsoft Windows Run komponenta ....................................................................... 25

Slika 23: Prikaz CmdPrompt po vnosu ukaza ........................................................................... 26

Slika 24: Razlika med urejevalnikoma besedil Notepad in Sublime Text ................................. 27

Slika 25: Drevo zgradbe projekta ............................................................................................. 28

Slika 26: Vsebina ukazne vrstice po končanem vnosu podatkov ............................................. 31

Slika 27: Odsek kode za prikaz spletne strani .......................................................................... 33

Slika 28: Koda za izpis ............................................................................................................... 33

Slika 29: CSS-sintaksa za spremembe izgleda strani ................................................................ 34

VIII

Slika 30: Prva uspešna uporaba Webpacka za kreiranje datoteke bundle.js ........................... 34

Slika 31: Odsek kode v konfiguracijski datoteki ....................................................................... 35

Slika 32: Izvršitev poenostavljenega ukaza s pomočjo konfiguracijske datoteke .................... 35

Slika 33: Prikaz metode "watch" .............................................................................................. 36

Slika 34: Vzpostavitev webpack razvojnega serverja ............................................................... 37

Slika 35: Prikaz ustvarjene aplikacije ........................................................................................ 38

Slika 36: Skrajšan prikaz grajenja modulov in dokumentov v uporabi .................................... 39

Slika 37: Prikaz osnovne strani AngularJS 4 aplikacije ............................................................. 39

Slika 38: Zahteva o uporabi paketa Gulp.................................................................................. 40

Slika 39: Izpis preprostega niza z uporabo Gulp-a ................................................................... 41

Slika 40: Odsek kode za zahtevke o uporabi paketov .............................................................. 41

Slika 41: Odsek kode za vzpostavitev strežnika ....................................................................... 42

Slika 42: Odsek kode s funkcijo za nadzor datotek .................................................................. 43

Slika 43: Implementacija varnostnega kopiranja datotek ........................................................ 43

Slika 44: Implementacija izbrisa starejših datotek ................................................................... 44

Slika 45: Koda za zagon vseh ustvarjenih funkcij ..................................................................... 44

Slika 46: Vsebina "package.json" v našem projektu ................................................................ 45

Slika 47: Vsebina "package.json" datoteke v AngularJS 4 ........................................................ 46

IX

Seznam uporabljenih kratic

CmdPrompt/CMD Command Prompt ali Ukazna vrstica

CSS Cascading Style Sheets

SCSS Sassy Cascading Style Sheets

SASS Syntacticallyy Awesome Style Sheets

HTML Hyper Text Markup Language

XHTML Extensible HyperText Markup Language

XML Extension Markup Language

JS JavaScript

API Application Programming Interface

APV Aplikacijsko Programski Vmesnik

PDF Portable Document Format

NPM Node Package Manager

MkDir Make Directory

CD Change Directory

1

1 UVOD

Avtomatizacija je proces, kjer se eden ali več dogodkov ponavljajo znova in znova. Primer

bi bila industrija kakršnega koli izdelka. Recimo izdelovanje plastenk. Vsaka plastenka ima

določeno velikost, širino in obliko. Te podatke bi v preteklosti morali znova vnesti za vsako

plastenko posebej. V današnjem času pa je vse že avtomatizirano, tako da podatke

vnesemo le enkrat, nato pa naprava preko ustrezne programske opreme požene ukaz za

izdelavo plastenke s podanimi merili in tako si prikrajšamo čas ter trud pri samem delu.

Na spletu obstaja mnogo različnih orodij in tehnologij, ki delujejo na isti princip, le da so

dodane še kakšne posebne funkcije, kar veliko uporabnikov zmede pri samem izboru. V

diplomskem delu bomo predstavili vsakega od naštetih izborov, kjer spoznamo, za kaj se

uporabljajo, kaj je njihov namen in kakšen praktičen primer njihove uporabe. Pri razvojnih

tehnologijah pa smo dodali še njihove prednosti in slabosti ter zakaj smo se zanje odločili.

To zajema programsko opremo, s katero smo si olepšali izgled ter preglednost naše kode

med samo implementacijo. Upravljali smo z dvoje vrstami programske opreme. V prvo

spada Microsoftova že nameščena oprema CmdPrompt ali Ukazna vrstica, v drugo pa vse

ostalo, kar smo morali namestiti ročno. Uporabljali smo urejevalnik besedil Sublime Text,

upravljalca paketov NPM (Node Package Manager) in Bower, orodje za pomoč pri

avtomatizaciji Gulp in odprtokodno razvojno okolje Node.js. To so le naše osebne

preference, saj je na voljo še vrsta drugih orodij s podobnim delovanjem.

Uporabljali smo spletne tehnologije, ki so nam omogočile uspešen in preprost razvoj. Za

boljšo delovno prakso smo poskusili uporabiti tedaj najbolj popularne tehnologije, to so

bile HTML (Hyper Text Markup Language), uporabljen za zgradbo osnovnega izgleda

spletne strani; CSS (Cascading Style Sheets) za olepšavo izgleda; AngularJS za izboljšavo

delovanja HTML-kode; WebPack, monitoriranje in prikaz sprememb v dokumentih;

JavaScript, dodajanje funkcionalnosti.

2

V diplomskem delu smo obravnavali še nekaj ključnih elementov projekta, ki so v spletnem

razvoju v bistvu splošna znanost, a za tiste, ki se s tem prvič srečujejo morda ni tako.

Raziskali smo pojme, kot sta boilerplate in avtomatizacija spletnih storitev ter kakšen je

njun pomen v spletnem razvoju storitev.

Boilerplate imenujemo skupek datotek, ki skupno gradijo nek projekt. To velja tako za

spletne kot tudi namizne aplikacije oz. projekte. Pri zgradbi vsake aplikacije imamo v

začetnem direktoriju datoteke, ki omogočajo osnovno uporabo, ostale pa so postavljene v

podmape oz. pod-direktorije.

Spoznali smo pojem avtomatizacija, a je za naš projekt bilo potrebno vključiti še spletne

storitve, kar pomeni, da se mora aplikacija izvajati tudi preko spleta. To smo dosegli z

omenjenimi orodji in tehnologijami. Začeten cilj je bila vzpostavitev delujoče osnovne

strani, s katero smo lahko nadalje testirali delovanje. Za tem smo vključili WebPack, s

katerim smo imeli pregled nad spremembami med obdelavo projekta. Na tej točki smo

imeli večino stvari urejenih, a nas je motilo ročno osveževanje spletne strani za prikaz

WebPack-ove omenjene spremembe. Odločili smo se ustvariti lokalni server, s katerim smo

se rešili te težave, saj gre za dinamično spletno stran, ki sama prikazuje spremembe na

serverju. Ta rešitev je bila pika na i, ki nam je prihranila veliko truda in časa, zato smo lahko

preklopili na glavni del projekta, kar je implementacija avtomatizacije. Najprej smo

namestili spletne pakete, potrebne za delovanje projekta nato pa smo jih še morali vključiti.

Z uporabo orodja Gulp smo vse željene naloge projekta spisali kot metode, ki se bodo klicale

po vnosu določenega niza. Zaradi boljše preglednosti smo za vsak korak priredili svojo

metodo. Prva metoda je bila za samodejno vzpostavitev strežnika za dinamičnost dela. V

drugi metodi smo dokumente, s katerimi smo opravljali, želeli nadzorovati. V tretjem

koraku smo implementirali kopiranje datotek in nazadnje še metodo za izbris prekopiranih

datotek. Zajeli smo vse željene funkcionalnosti, a je še vedno bilo potrebno vsako metodo

klicati posebej. Temu je sledila še dodatna in zadnja metoda, s katero kličemo vse prej

naštete v željenem zaporedju. Naše zaporedje klica metod je na koncu prišlo do

naslednjega zaporedja. Najprej smo izbrisali prej obstoječe kopije datotek. Sledilo je

kopiranje datotek s shranjenimi spremembami, vzpostavitev strežnika in klic metode za

nadzorovanje sprememb v dokumentih.

3

2 RAZVOJNA ORODJA

Na spletu lahko najdemo mnogo orodij, ki so si med sabo podobna. Med njimi izberemo

takšnega, ki nam glede na naše želje in potrebe odgovarja. Tudi sami smo iskali, katera

orodja bi bila najboljša za ta projekt in sproti našli tista, ki so nam najbolj odgovarjala.

Na našem izbornem listu je bilo veliko orodij, ki bi delovala enako, zato smo za boljše

razumevanje podali razlog za naše odločitve.

Urejevalniki besedil: Sublime Text, Notepad++, Code::Blocks, Visual Studio, NetBeans.

Odločili smo se za Sublime Text. Izkazal se je s svojo preprostostjo in všečnim prikazom

drevesa datotek v projektu, saj omogoča prikaz več projektov hkrati in možnost

spreminjanja tipkovnih bližnjic glede na svoje potrebe. Prav tako sta bili njegovi prednosti

velikost in prenosljivost.

JavaScript okolja: DIY, Nodyn, RingoJS, NodeJS.

Odločili smo se za NodeJS, ker je dandanes med najbolj iskanimi JavaScript okolji.

Upravitelj paketov: Bower, NPM, pacman, aptitude, Yarn.

Odločili smo se za Bower in NPM, ker smo bili najbolj spoznani z obojim in smo se odločili

za nadaljevanje uporabe.

JavaScript izvrševalci nalog: Grunt, Feri, Broccoli, Gulp.

Odločili smo se za Gulp. Za cilj projekta je bil ta najbolj primeren, saj gre za orodje, ki je

specializirano za avtomatizacijo.

4

2.1 Sublime Text

Sublime Text je multi platformen urejevalnik izvorne kode s programskim vmesnikom

Python. Podpira mnogo različnih programskih in označevalnih jezikov, kot na primer: C++,

Java, Javascript, Swift itd.

Omogoča različno označevanje za vsak dokument posebej ali enako za vse hkrati. Orodje je

zelo prilagodljivo uporabniku in ima na voljo mnogo različnih vmesnikov, ki so jih poleg

glavnih razvijalcev ustvarili tudi drugi uporabniki.

Odločili smo se za uporabo prenosljive različice orodja Sublime Text (slika 1), ker smo

mnenja, da je razmerje med pomnilniško porabo orodja ter uporabnostjo zelo dobro.

Slika 1: Sublime Text

Orodje Sublime text ter vsa dokumentacija sta dostopni na njihovi uradni strani

(http://www.sublimetext.com/).

5

2.2 CommandPrompt (CmdPrompt)

CommandPrompt ali Ukazna vrstica je Microsoft Windows-ov tolmač, ki deluje kot okolje

MS-DOS, kjer ni uporabniškega vmesnika, temveč je pred nami samo okno s kodo, kjer z

različnimi ukazi lahko dostopamo do vseh datotek na računalniku, jih ustvarjamo,

spreminjamo, brišemo itd., med drugim pa tudi bolj zahtevne naloge, kot je reševanje

sistemskih in omrežnih problemov, ki jih s preprostimi rešitvami ni mogoče popraviti.

Do ukazne vrstice lahko dostopamo na več načinov. Po našem mnenju je najlažje dostopati

s pritiskom na gumba Windows + R, na kar vpišemo ukaz CmdPrompt. Omenjena metoda

deluje tako, da s pritiskom tipk Windows + R uporabimo Microsoft Windows-ovo bližnjico

za dostop do programskega orodja Run oz. Zaženi, to pa se uporablja za hiter dostop do

vseh datotek, dokumentov, programov in internetnih virov.

Z izvršitvijo ukaza CmdPrompt smo dostopali do izvršne datoteke CmdPrompt.exe, ki je

shranjena na sistemu in nam je odprla okno ukazne vrstice, kjer smo izvršili željene oz.

potrebne ukaze, kot je prikazano na sliki 2.

Slika 2: Primer ukazne vrstice

6

2.3 Node.js

Node.js je odprtokodno, multi platformno, realno-časovno JavaScript okolje, ki se uporablja

za izvrševanje JavaScript kode na serverjih, v preteklosti se je kot privzeto okolje uporabljalo

za kliente. Ustvaril ga je Ryan Dahl, in sicer leta 2009.

Omogoča ustvarjanje spletnih serverjev in omrežnih orodij s pomočjo JavaScript-a in raznih

modulov za dodatne funkcionalnosti, kot je delo z datotečnimi sistemi, kriptografija in

mnogo drugih. Moduli uporabljajo API (Application Programming Interface) oz. APV

(Aplikacijsko Programski vmesnik), ki pripomore k redukciji kompleksnosti pisanja

serverskih aplikacij.

Napisan je v treh jezikih: C, C++ ter JavaScript in podpira naslednje operacijske sisteme:

NonStop OS, Solaris, FreeBSD, OpenBSD, Linux, macOS, webOS, Microsoft Windows.

Slika 3: NodeJS

7

2.4 NPM

NPM je najbolj popularen upravitelj paketov za programski jezik JavaScript. Njegova glavna

prednost je v našem mnenju lokalna inštalacija paketov, saj to v primerjavi z drugim prihrani

prostor, ker jih ni treba inštalirati več kot enkrat. Je primarni upravitelj paketov za

programsko okolje Node.js in je v celoti spisan v jeziku JavaScript. Ustvaril ga je Isaac Z.

Schlueter, ker je menil, da je bilo tedaj modularno pakiranje (ang. modular packaging)

narejeno zelo slabo.

Slika 4: NPM

8

2.5 Bower

Bower je upravitelj paketov za spletne storitve, ki shranjuje reference do naloženih

paketov, katere uporabljamo v svojih projektih. Vsakič, ko ustvarjamo nov projekt, za tega

potrebujemo razno vrsto paketov za splet, ki nam bodo podpirali vse uporabljene knjižice,

pripomočke, frameworke in ostala sredstva. Bower nam ob prvi inštalaciji teh paketov

ustvari reference za vse te pakete in njihove verzije v datoteko bower.json. S tem ob

vsakem ustvarjanju novega projekta lahko prihranimo ogromno časa in truda, saj bomo v

korensko mapo projekta le dodali »bower.json«, v ukazni vrstici pa zagnali ustrezno

komando »bower install«. Sedaj nam bo orodje samo preverilo vse vsebovane pakete in jih

naložilo. Prerekvizita za to orodje sta prej omenjena Node.js in NPM.

Slika 5: Bower

9

2.6 Gulp

Gulp je orodje, ki se uporablja za avtomatizacijo naših nalog. V njem se uporabljajo

programski paketi oziroma knjižice, katere po potrebi sproti nalagamo ter podajamo

zahtevo za uporabo v dokumentu, kjer jih potrebujemo. Pomaga nam prihraniti čas in trud

z nalogami, katere bi drugače opravljali ročno vedno znova in znova. Tako se lahko

skoncentriramo na pomembnejše zadeve, kot so razvoj in nadgradnja.

Slika 6: Gulp

10

3 RAZVOJNE TEHNOLOGIJE

3.1 Hyper Text Markup Language

HTML (Hyper Text Markup Language) je najosnovnejši označevalni jezik za izdelavo spletnih

strani, saj predstavlja osnovo spletnega dokumenta.

Slika 7: HTML

Z njim ustvarimo osnoven prikaz spletne strani ter določimo, kako bodo posamični deli

spletnega dokumenta zgrajeni.

Določimo jim tudi semantični pomen, za lažji kasnejši pregled in razum elementov.

Uporabljamo ga lahko v katerem koli urejevalniku besedila, saj je pomemben le način

navedbe elementov. Ustrezno moramo navesti značke za vsak element, katerega želimo

uporabiti. Za vse elemente v HTML-jeziku je značilno, da se pišejo v posebnih t. i. špičastih

oklepajih, na primer <h1>., kar v HTML predstavlja primarni naslov v spletnem dokumentu.

S to značko se določi začetek naslova, nato pa je potrebno navesti še značko za konec

naslova. To pa se stori, tako da v značko dodamo še krivo črto, na primer </h1>. S tem smo

zaključili naslovni element (slika 8).

11

Slika 8: Primer začetka in zaključka značke za naslov

Dobra praksa je, da vse elemente, ki jih uporabimo v spletnem dokumentu tudi zaključimo

na prej naveden način, četudi nekaterih v osnovi ni potrebno. Ena izmed takšnih značk je

<p>. To je osnovna značka za navedbo navadnega teksta kot stavek. Zadeva bo delovala

brez napak ali opozoril, saj je to le navaden tekst in bi delovalo tudi, če sploh ne bi podali

značk.

Prikazano na sliki 9:

Slika 9: Primer navadnega teksta z značko <p> brez zaključka

Elemente lahko definiramo tudi tako, da podelimo začetek in konec obenem, kadar

vnašamo posebne objekte, na primer gumb ali vnosno polje (slika 10).

Slika 10: Tekstovno vnosno polje

12

Osnovni spletni dokument mora biti zgrajen po spletnih standardih. Vsebovati mora

začetno značko <html>, s tem določimo, da gre za navaden HTML, saj poleg tega poznamo

še druge značke, s katerimi se pogosto srečamo, ko brskamo po internetu. Še en primer

začetne značke pa je XHTML (Extensible HyperText Markup Language ), katerega namen je

enak kot navaden HTML, le da je usklajen s sintakso XML (Extension Markup Language).

Večina programske opreme, ki je specializirana za izdelavo spletnih strani ima osnovne

značke za izgled spletnega dokumenta že vnešene.

Primer osnovnega HTML-dokumenta je predstavljen na sliki 11:

Slika 11: Primer osnovnega HTML-dokumenta

Slika 12: Prikaz spletnega dokumenta

Izgled spletne strani je v zgornjem primeru (slika 12) le osnoven, brez dodanih olepšav. To

lahko nadgradimo s pomočjo spletnega jezika CSS/SCSS, ki je ustvarjen prav za to opravilo.

13

Prednosti:

enostaven za učenje in uporabo, v primerjavi z ostalimi;

uporaba ni plačljiva;

najbolj uporabljen med spletnimi tehnologijami;

podpira souporabo drugih programskih jezikov;

podprt na številnih platformah;

nudi širok spekter strukturnih in estetskih elementov za ponazoritev pomenov in

prezentacije;

transparentnost, Odprto standarden;

HTML-razčlenjevalniki so uporabniku prijazni, saj v primeru napake dokument ne

propade.

Slabosti:

za preverjanje delovanja potrebujemo brskalnik;

tehnični napredek je počasen;

HTML-leksikon je primarno nastavljen na ameriško angleščino, zato avtorji drugih

držav potrebujejo dodatne razlage;

omejena funkcionalnost v primerjavi s funkcionalnimi jeziki.

Za uporabo te tehnologije smo se odločili, ker gre za eno izmed najbolj uporabljenih

tehnologij v spletnem programiranju. Izdelava osnove za spletno stran pa je preprosta in

hitra.

14

3.2 Cascading Style Sheets

CSS (Cascading Style Sheets) je oblikovalski jezik, ki skrbi za olepšano prezentacijo spletne

strani. Združujemo ga s spletnem stilu HTML, tako da elementom, dodanim v HTML-

dokumentu, podamo razne okrasitve (stil, barva, velikost itd.).

Slika 13: CSS

Največja prednost CSS-a je, da lahko v enem samem dokumentu določimo oblikovanje za

vsa besedila in elemente na spletni strani. Omogoča tudi spremembe ob dogodkih, na

primer, besedilo se obarva, ko je označeno z miško ali v uporabi.

Določanje oblike besedila pa ni edina vrlina CSS-a, saj lahko z njim oblikujemo tudi razne

grafične elemente, kot so: tabele, ozadje, gumbi …

Datoteka CSS kot sama ni shranjena znotraj strani, ker gre za samostojno datoteko. Za

njeno uporabo je zato potrebno podati njeno povezavo. Tako smo namesto ponavljanja

kode v vsakem dokumentu dodali le eno vrstico s povezavo in prihranili s prostorom ter

ohranili dinamičnost.

Slika 14: Okrasitev HTML-elementov

15

Na sliki 14 smo naslovu z značko <h1> podelili naslednje lastnosti:

sprememba barve teksta na modro: color: #0000FF;

nastavitev ozadja na sivo: background-color: #D4D4D4;

odmik elementa od strani: margin: 0 auto; in margin-bottom: 10px;

postavitev teksta na sredino: text-align: center;

Tako, poleg olepšanja spletne strani, še ločimo njeno strukturo glede na vsebovane

elemente.

Na sliki 15 pa smo podali primer njegovega delovanja:

Slika 15: Spletna stran pred (levo) in po (desno) uporabi CSS

Razlika je očitna, vidno pa je tudi, da vsi elementi spadajo pod eno samo strukturo. Vseeno

pa se čez čas količina kode nakopiči in postaja kompleksnejša, vzdrževanje pa težje.

Pri tem smo si pomagali s predprocesorjem, ki ga omogoča SASS/SCSS, kar je močan

razširitveni jezik na profesionalni ravni.

16

Prednosti:

hitrost izdelave izgleda;

konsistentnost, s CSS-om lahko ustvarimo konsistenten okvir za splošno uporabo;

preprost za uporabo in učenje, na spletu imamo mnogo navodil za uporabo s

primeri;

podpira ga večina brskalnikov (Chrome, Explorer, Firefox …).

Slabosti:

hitrost odziva strani je počasnejši, če vsebuje veliko CSS-a;

sintaksa se močno razlikuje od HTML-a in ni pretirano prijazna za uporabnika;

ob uporabi programske opreme, kot sta Dreamweaver in Microsoft FrontPage,

lahko pride do zapletov, koda pa postane nekoliko neurejena.

Za to tehnologijo smo se odločili, ker je bilo v tem projektu bistveno delovanje in ni bilo

poudarka na izgledu, zato je bila količina CSS-kode zelo majhna. Prav tako smo uporabljali

preprosto programsko opremo, kjer nismo imeli kakršnih koli težav s samo uporabo te

tehnologije.

17

3.3 AngularJS

Spletne dokumente lahko zaženemo v željenem spletnem brskalniku, ampak bo ta prikaz

statičen, kar pomeni, da se ob spremembi kode v dokumentu vsebina na spletu ne bo

posodobila. V prikazanih slikah smo povezani na lokalni server http://localhost:4200/, kjer

se izvaja koda iz spletnega dokumenta. Ob vsaki potrditvi spremembe kode v projektu se

vsebina na serverju posodobi. To smo dosegli s svojo različico implementacije serverja.

Slika 16: AngularJS

Prednosti:

omogoča hitro prototipiranje in dostavo dinamičnih enostranskih-aplikacij (ang.

Single Page Applications);

preprosto testiranje;

idealen za aplikacije, kjer je enormna uporaba interaktivne kode na strani klienta;

omogoča dvosmerno vezanje podatkov;

zelo ekspresiven jezik, zato je količina kode manjša kot pri uporabi drugih knjižic;

razvoj hitrejši kot z uporabo tehnologij Knockout, Backbone, React;

razširja uporabnost HTML-a.

18

Slabosti:

osnove so lahke, a krivulja učenja hitro narašča;

dokumentacija ni preveč bleščeča;

direktive so zelo močne, uporaba pa zelo težka;

kompleksen;

uporaba elementov »Scope« je lahka, do komplikacij pa pride pri razhroščevanju;

element »Router« je zelo omejen.

Ta tehnologija je bila priporočena od sodelavcev na študentski praksi, ker gre za eno izmed

bolj iskanih tehnologij v današnjem času, zato smo se, kljub slabostim, odločili poizkusiti

naučiti delovanja te tehnologije, s časom pa smo spoznali, kaj vse je možno ustvariti in kako

preprosto je.

19

3.4 WebPack

Je močan združevalnik modulov, ki jemlje module z določenimi odvisnostmi ter generira

statična sredstva, ki jih predstavljajo. Združevalnik lahko uporabljamo s pomočjo Ukazne

vrstice ( CmdPrompt) ali pa jih konfiguriramo s konfiguracijsko datoteko webpack.config.js.

Pri delu z Webpack-om pa uporabljamo Snope, (ang. Bundles), ki predstavljajo sredstva, ki

spadajo skupaj. Vsebujejo pa lahko JavaScript, CSS, HTML in skoraj kateri koli drugi format

datoteke. Glavna naloga Webpack-a je sprehajanje po izvorni kodi, iskanje posebnih izjav,

imenovanih import, gradnja odvisnostnega grafa in oddaja enega ali več snopov. Za različne

dodatne funkcije, kot so vnaprejšnja obdelava (ang. Preprocess) in minimizacija datotek,

kot so TypeScript, SASS, LESS, pa potrebujemo primerne vtičnike in pravila. Webpack je del

tehnologije AngularJS, zato je sintaksa praktično ista, vsaj v primerjavi s starejšo različico

AngularJS-a.

Slika 17: Webpack

20

Prednosti:

najmočnejši med združevalniki;

preprosta konfiguracija;

mešanica Laravel-a, to pa je PHP vrsta jezika;

vsebuje že vgrajen razvojni server s funkcijo livereload, kar omogoča sprotno

osveževanje in prikaz dogajanja na serverju;

skrbi za vse vrste sredstev v JavaScript-u.

Slabosti:

pomanjkanje dokumentacije.

Webpack smo uporabljali, ker se nam je zdel dobra osnova za razumevanje delovanja

spletnih storitev. S to tehnologijo smo spoznali delovanje strežnika in kako si lahko

olajšamo delo s preprostimi metodami. Vse, kar smo potrebovali, pa je bilo že na voljo na

spletu.

21

3.5 JavaScript

Je programski jezik, ki ga je razvilo podjetje Netscape leta 1995, torej še istega leta, kot je

bil razvit programski jezik Java. Java in JavaScript sta si zelo različna, kljub podobnosti v

imenu. Java je na kratko programski jezik, ki je statičen, deluje na princip razrednih objektov

in se uporablja v zelo širokem spektru razvoja aplikacij (Android, omrežnih, strežniških …).

JavaScript pa je dinamičen objektno skriptni, interpretiran realno-časovni programski jezik,

katerega glavni spekter je razvoj spletne vsebine. Skupaj s HTML ter CSS spada med tri

jedrne tehnologije razvoja vsebine za svetovni splet. Poleg ustvarjanja spletne vsebine se

uporablja tudi pri PDF-dokumentih, namiznih pripomočkih in spletnih aplikacijah na strani

strežnikov.

Slika 18: JavaScript ikona

22

Prednosti:

izvajanje poteka na strani klienta, kar pomeni, da se izvaja na uporabniškem

procesorju na mestu serverja in tako prihrani na obremenitvi ter pasovni širini

serverja;

učenje tega jezika je relativno lahko z dobrim razumevanjem angleškega jezika;

izvajanje na uporabniškem računalniku JavaScript-u omogoča zelo hitro delovanje,

saj serverju ni potrebno procesirati kode in je nato pošiljati nazaj k uporabniku;

razširjena funkcionalnost, saj vsebuje mnogo dodatkov, kot je Greasemonkey, ki

omogoča razvijalcem ustvarjanje delčkov JavaScript kode, ki se lahko izvaja na

poljubnih straneh in tako razširi njegovo uporabnost.

Slabosti:

slaba varnost, saj se delčki (ang. Snippets) JavaScript-a takoj izvedejo na strežnikih

klientov, kar v določenih primerih povzroča izkoriščanje uporabniškega sistema;

JavaScript renderiranje (ang. Rendering) oz. upodabljanje se razlikuje glede na

uporabo različnih urejevalnih orodij (ang. layout engines).

JavaScript smo uporabljali, ker nam je postalo všeč njegovo delovanje in preprosta

uporaba. Pri tem projektu varnost ni problematična, saj ne gre za občutljive podatke, zato

slabosti niso imele vpliva na odločitev uporabe.

23

4 KORAKI RAZVOJA SPLETNE APLIKACIJE

4.1 Boilerplate

Boilerplate predstavlja datoteke s kodo, ki se bo uporabljala na več različnih mestih.

Prednost te je, da se po večini le-ta rahlo ali nič ne spreminja, saj je že implementirana tako,

da ustreza potrebnim specifikacijam razvoja. S tem ko si priredimo svoj boilerplate, tako

rekočo predlogo oziroma vzorec za svoje spletne strani, si prihranimo veliko časa, saj ni

potrebno vedno znova pisati celotne kode, da dosežemo osnovno delovanje projekta.

Boilerplate se uporablja za boljšo preglednost projekta ter shranjevanje odsekov kode iz

manj poznanih programskih jezikov, saj se jih tako razvijalcem ni treba vsakič ponovno učiti

in raziskovati sintakse za te funkcionalnosti. Na mestu tega pa to kodo spišejo le enkrat ter

jo shranijo pod vzorec za večkratno nadaljnjo uporabo. Pri izdelavi boilerplate-a v večjih

firmah uporabljajo tudi meta-programiranje. Meta-programiranje je programska tehnika,

pri kateri imajo računalniški programi sposobnost uporabljati programe kot podatke. To v

glavnem pomeni, da lahko te programe oblikujemo za branje, generiranje, analizo ali

transformacijo drugih programov. Najboljša dodelitev pri meta-programiranju pa je, da

program oblikujemo za samodejno modifikacijo med samim izvajanjem. S tem

programerjem podamo možnost minimalizacije števila vrstic kode in posledično pohitrimo

čas izdelave.

Slika 19: Boilerplate

24

4.2 Avtomatizacija spletnih storitev

Avtomatizacija spletnih storitev ima lahko več pomenov. Ideja avtomatizacije je bila

implementirati rešitev, ki bi nam prihranila čas pri izdelavi spletnih vzorcev za gradnjo

spletnih strani ali rešitev. Grajenje preprostega vzorca za spletne strani lahko traja tri ure

ali več. Za razvijalce to pomeni ponovno pripravo vsega potrebnega materiala, ki bo

omogočal zahtevane specifikacije. Za delodajalce/podjetja pa veliko časa potrošenega za

nekaj, kar bi lahko bilo avtomatizirano in s tem ta čas tudi porabljen za bolj pomembna dela

ter veliko prihranjenega denarja. Omenjena je specializirana za spletne storitve, zato smo

si za te pripravili okolje z vsemi potrebščinami.

4.3 Priprava okolja

Najprej smo potrebovali JS-okolje Node.js, s katerim smo omogočili uporabo nadaljnjih

orodij in programskega jezika AngularJS, saj vsi uporabljajo razširitev JS.

Do navodil, dokumentacije ter inštalacijske datoteke dostopamo preko njihove uradne

strani: https://nodejs.org/en/ (slika 20).

Slika 20: NodeJS uradna stran

Po uspešni inštalaciji NodeJS-a naložimo še upravitelja paketov NPM. To smo opravili z

navadno ukazno vrstico CmdPrompt. Do nje lahko dostopamo na več načinov, lahko

25

najdemo zagonsko datoteko s pomočjo Windows-ovega iskalnika ali pa, nam osebno

hitrejša metoda, s pritiskom na Windows + R tipki na tipkovnici (slika 21).

Slika 21: Prikaz bližnjice do Microsoft Windows Run komponente

Odprlo se nam je novo iskalno okence (slika 22), kamor smo vnesli »cmd« in potrdili s

pritiskom gumba OK.

Slika 22: Microsoft Windows Run komponenta

26

Odprlo se nam je okence CmdPrompt, kjer smo s preprostim vnosom ukaza npm install

npm@latest -g naložili upravitelja paketov NPM.

Razlaga navedenega ukaza:

npm, s tem povemo, da gre za ukaz, ki se mora izvesti s strani upravitelja paketov

NPM;

Install določa, kaj hočemo opraviti s tem ukazom, v tem primeru gre za inštalacijo;

npm@latest je NPM-jeva sintaksa, ki pravi, da naj v bazi NPM preveri za najnovejšo

različico opreme;

-g pa je dodatek, ki določa, da bo šlo za nekaj globalnega.

Po izvršitvi ukaza se upravitelj paketov NPM naloži in je na voljo za uporabo. Ukazna vrstica

nam je vrnila podoben izpis (slika 23).

Slika 23: Prikaz CmdPrompt po vnosu ukaza

Za upravitelja paketov NPM in NodeJS smo preverili, če sta morda že naložena na sistemu.

V primeru, da sta, pa samo za različico, ki je naložena.

V ukazni vrstici vnesemo ukaza:

Node –v nam bo vrnil različico NodeJS-a

Npm –v nam bo vrnil različico NPM-ja

27

Na zadnje pa še okolje Sublime Text, ki smo ga uporabljali za delo. Deluje s katerem koli

drugim urejevalnikom tekstov, kot je tudi Windowsov privzeti urejevalnik besedil Text

Editor, a smo zaradi dodatne funkcionalnosti in lažje ločitve sintakse uporabili Sublime Text.

Razlika je vidna na sliki 24.

Slika 24: Razlika med urejevalnikoma besedil Notepad in Sublime Text

28

4.4 Razvoj projekta

Spoznali smo orodja ter njihovo uporabo, zato lahko pričnemo z izvedbo projekta.

Ustvarili smo drevo zgradbe (ang. folder tree) našega projekta. Tako smo lažje preverjali,

kje smo, kaj potrebujemo in kako nadaljevati. Za vse, ki vam izraz drevo zgradbe ni poznan,

smo ga poskusili razložiti s primerom iz vsakdanjega življenja. Predstavljajte si navadno

drevo, to vsebuje korenine, deblo, veje in krošnjo. Drevo v našem primeru pa predstavlja

zgradbo projekta oz. zgradbo datotek in podmap, ki jih bo vseboval projekt (slika 25).

Slika 25: Drevo zgradbe projekta

Razlaga posameznih delov drevesa po korakih:

Koren predstavlja začeten direktorij, torej našo glavno mapo projekta, kjer se bodo tvorile

osnovne datoteke in mape. Na prej prikazani sliki bi koren predstavljala mapa »Projekt«,

saj je glavna mapa, kjer so nato tvorjene še vse ostale. Podobno je tudi deblo, ki predstavlja

datoteke v korenski mapi, kar je v našem primeru mapa Projekt, in vsebuje: assets, other,

bower.json, gulpfile.js, index.html in package.json.

29

Vsaka od datotek, ki predstavljajo deblo, pa ima svojo nalogo:

mapa assets bo vsebovala datoteke, ki bodo sproti uporabljene za delo in so

potrebne za naš projekt;

mapa other bo vsebovala ostale datoteke, na primer tiste, za katere mislimo, da

bodo še prišle prav, ampak jih za trenutno delovanje projekta ne potrebujemo;

Bower.json, kot že omenjeno, bo vseboval reference na knjižice, uporabljene za

olepšavo in boljše delovanje;

Gulpfile.js, kjer bodo tvorjene metode, ki bodo izvedene ob določenih ukazih in

bodo omogočale našo avtomatizacijo;

Index.html predstavlja začetno spletno stran projekta;

Package.json pa bo podobno kot bower.json vseboval reference na uporabljene

knjižice, razlikovali se boste v tem, da bodo tukaj le pomembnejše reference, ki so

potrebne za splošno delovanje projekta.

Veje so datoteke, ki sledijo deblu. Konkreten primer tukaj je vsebina map assets in other.

Ostane pa še krošnja, ki predstavlja vse, kar je na veji, torej vse, kar je pod temi mapami.

NodeJS bo skrbel, da se bodo datoteke kreirale in tudi pregledovale, nadomeščale ali

izbrisale. Omenjene naloge pa smo ukazovali mi, zato smo se morali naučiti nekaj osnovne

sintakse, katero smo uporabljali pri samem delu.

NPM

Ustvarjanje package.json: npm init,

inštalacija paketa z uporabo npm: npm install »ime paketa«,

shranjevanje referenc v package.json: --save-dev,

inštalacija vseh referenc navedenih v package.json: npm install.

30

BOWER

Ustvarjanje bower.json: bower init,

inštalacija paketa z uporabo bower: bower install »ime paketa«,

shranjevanje referenc v bower.json: --save-dev,

inštalacija vseh referenc navedenih v bower.json: bower install.

Najprej smo ustvarili direktorij za projekt ter ponovno zagnali CmdPrompt, v katerem sta

bila vnešena naslednja ukaza:

Mkdir Spletna_stran, to je ukaz za ustvarjanje datotečne mape z imenom

Spletna_stran, v trenutnem direktoriju. MkDir pa je krajšava za MakeDirectory.

Cd Spletna_stran, s tem se v ukazni vrstici pomaknemo v direktorij Spletna_stran.

CD pa je krajšava za ChangeDirectory.

Pridobili smo le prazen direktorij, kamor smo implementirali našo drevo s pomočjo ukaza

npm init.

S tem smo sprožili postopek inicializacije, kjer le sledimo navodilom in podajamo željene

vnose.

Potrebno je bilo poimenovati projekt. Tukaj nam je po privzetem predlagalo kar ime

trenutnega direktorija, v našem primeru »Spletna_stran«. To ime lahko spremenimo v

karkoli ali pa samo nadaljujemo s pritiskom na gumb »Enter« na tipkovnici. Orodje pa

zahteva, da je ime projekta zapisan brez velikih črk, zato smo ime spremenili kar v

spletna_stran.

Nato nas je vprašalo še za dodelitev: različice, opisa, vstopne točke, testnega ukaza, git

repozitorija, ključnih besed, avtorja in licence.

Večino smo izpustili, brez vnosa podatkov. Podali smo samo nekakšen opis in pa avtorja

našega projekta, v primeru, da bi hoteli projekt deliti na spletu. Git repozitorij je primer

spletne strani, kjer se delijo projekti za širšo uporabo, popravljanje in dodeljevanje kode.

Vse ostale pa smo preskočili s pritiskom na gumb Enter.

Na koncu nam je bil podan še prikaz podatkov datoteke, ki bo ustvarjena (slika 26).

31

Ti podatki so sestavljeni iz:

polne računalniške poti do projekta;

podatkov, katere smo podali med samim postopkom;

zahteva o potrditvi vseh podatkov za samo kreiranje datoteke.

Slika 26: Vsebina ukazne vrstice po končanem vnosu podatkov

Postopek smo zaključili s potrditvijo zahteve, torej ponoven pritisk gumba Enter. In tako se

nam je ustvarila datoteka package.json.

Vsebina datoteke pa bo vsebovala podatke, ki smo jih podali med postopkom vnosa

podatkov. V oknu ukazne vrstice je to zapisano v oglatih oklepajih »{ }«.

V to datoteko pa smo vnašali reference na »spletne pakete«, katere smo potrebovali med

delom.

Ker je trenuten projekt že nekako zastarel, pa smo poskušali čim bolje prikazati, kako smo

ga gradili mi in kako je že implementiran v novejši različici AngularJS 4.

32

4.5 Koraki razvoja projekta

V AngularJS 4 je celoten projekt že ustvarjen, reference za vse potrebne pakete pa vnešene

in pripravljene za uporabo.

V našem primeru je bilo to potrebno storiti ročno.

Vnesli smo reference in naložili pakete v datoteko package.json s pomočjo ukazne vrstice.

npm install webpack-dev-server -g --save-dev

npm install webpack --save-dev

npm install -g webpack babel-loader -babel-core --save-dev

npm install babel-preset-react --save-dev

npm install gulp –g --save-dev

npm install gulp-webpack --save-dev

npm install gulp --save-dev --save-dev

npm install gulp-ruby-sass gulp-autoprefixer --save-dev

npm install gulp-cssnano gulp-jshint gulp-concat --save-dev

npm install gulp-uglify gulp-imagemin gulp-notify --save-dev

npm install gulp-rename --save-dev

npm install gulp-livereload gulp-cache del --save-dev

npm install -g graceful-fs --save-dev

Po vnosu teh ukazov se nam na podanem mestu (lokacija kreiranih datotek) ustvari mapa

node_modules, v kateri so shranjeni vsi paketi, katere smo naložili z zgoraj omenjenimi

ukazi.

33

V direktoriju našega projekta smo nato ustvarili dve datoteki, s katerima smo testirali

delovanje Webpack-a.

Prva datoteka je »index.html«, ki predstavlja začetno stran naše spletne strani in vsebuje

vse elemente, ki se bodo prikazali na njej. V njo smo dodali naslednji odsek kode (slika 27).

Slika 27: Odsek kode za prikaz spletne strani

Druga datoteka pa je entry.js, ki je zaenkrat vsebovala izpis za potrjevanje delovanja (slika

28).

Slika 28: Koda za izpis

Delovanje preverimo, tako da se v ukazni vrstici najprej pomaknemo v direktorij, kjer

imamo ustvarjeni ti dve datoteki in v njem vnesemo ustrezen ukaz. Mi smo v ukazni vrstici

že v pravilnem direktoriju, zato je potreben le še vnos ukaza webpack ./entry.js bundle.js.

Ustvarila se je nova datoteka bundle.js, v kateri so shranjene vse lastnosti naše spletne

strani v jeziku JavaScript. To datoteko smo kasneje uporabljali za sprotni pregled sprememb

na naši spletni strani. V spletnem brskalniku odpremo datoteko index.html in prikazati bi

se moral tekst ''deluje''.

Začetni strani smo nato dodelili še stil, da malo popestrimo izgled. Za to smo ustvarili

datoteko style.css, kjer smo podali lastnosti za izgled strani.

Za boljši pregled in ločljivost datotek smo ustvarili mapo assets, kjer so dodane podmape

za vsako orodje, ki vsebujejo dokumente z dodatno kodo za dosego cilja. Tukaj smo ustvarili

še podmapo styles, ki bo vsebovala vse datoteke, ki so povezane s stilom strani.

34

Vnesli smo naslednjo sintakso (slika 29).

Slika 29: CSS-sintaksa za spremembe izgleda strani

V jeziku CSS zvezdica (*) predstavlja globalno lastnost, kar pomeni, da bo vse, kar je

navedeno v oglate oklepaje po njej, veljalo za celotno stran.

Za delovanje pa smo morali naložiti še dva paketa, css-loader in style-loader, ki omogočata

prikazovanje lastnosti z uporabo Webpack-a.

Uporabimo ukaz:

npm install css-loader style-loader

Za uporabo teh pa smo v datoteki entry.js dodali še ukaz require("!style-loader!css-

loader!./assets/css/style.css");.

S tem smo Webpack-u povedali, da hočemo ta dva paketa uporabiti za prikaz lastnosti v

naši CSS-datoteki.

V CmdPrompt smo ponovno vnesli ukaz webpack ./entry.js bundle.js, kar je osvežilo našo

spletno stran in prikazalo opravljene spremembe (slika 30).

Slika 30: Prva uspešna uporaba Webpacka za kreiranje datoteke bundle.js

35

Zadevo smo si še poenostavili, da ne bo vsakič potrebno vnesti celotnega ukaza za izvršitev

trenutne funkcije.

V korenskem direktoriju smo ustvarili konfiguracijsko datoteko za webpack. Imenovali smo

jo webpack.config.js.

V to datoteko pa smo vnesli odsek kode, ki bo opravil našo funkcijo (slika 31).

Slika 31: Odsek kode v konfiguracijski datoteki

Sedaj za izvršitev ukaza webpack ./entry.js bundle.js vnesemo le ukaz webpack (slika 32).

Slika 32: Izvršitev poenostavljenega ukaza s pomočjo konfiguracijske datoteke

36

Na začetku tega sklopa so bili navedeni številni paketi, katere smo tudi naložili s pomočjo

upravljalnika s paketom NPM. Med njimi je bil tudi npm install webpack-dev-server –g –

save-dev.

S tem ukazom smo pridobili paket, ki nam ustvari lokalni server, za katerega bo skrbel

Webpack. Ta isti paket bo sproti opazoval datoteke, če je kje prišlo do spremembe in nam

to sporočil v ukazni vrstici.

Poskusimo, kako to deluje!

V ukazni vrstici vnesimo ukaz webpack –w. Dodatek –w, je kratica za –watch. Watch je

metoda Webpacka, ki mu bo sporočila, da mora opazovati spremembe (slika 33).

Slika 33: Prikaz metode "watch"

Zaenkrat bo opazovalo le datoteko entry.js, zato bodo spremembe zaznane le v tej.

Preprost test bo, da modificiramo kodo za izpis.

Vrstico document.write("Deluje!"); smo spremenili, tako da smo ji dodali dva klicaja (!!) in

shranili spremembe v datoteki.

37

Omenili smo, da zadeva teče na lokalnem serverju, ampak kaj to pomeni?

Lokalni server je v bistvu lokalna spletna stran, ki teče kot server. To pomeni, da sam

opravlja določene naloge, kot je osvežitev strani po spremembi dokumenta. V prejšnjem

primeru smo po spremembi dokumenta to takoj opazili le v ukazni vrstici, a na strani se nič

ni spremenilo. Za prikaz spremembe na naši spletni strani pa moramo zaenkrat še ročno

osvežiti, da se le-te posodobijo.

Lokalni server nam torej prihrani dosti časa in dela, kar nam omogoča hitrejši razvoj

projekta.

Usposobili pa smo ga tako, da smo v ukazni vrstici vnesli ukaz webpack-dev-server in v

spletnem brskalniku v polje za vnos hiperpovezave navedli naslednji spletni naslov:

http://localhost:8080.

Rezultat je bil naslednji prikaz našega izpisa besedila deluje in izpis v ukazni vrstici (slika 34).

Slika 34: Vzpostavitev webpack razvojnega serverja

38

V prvi vrstici je vidno, da server teče na povezavi http://localhost:8080/. Localhost

predstavlja splošno ime serverja za računalnike, 8080 pa je port oz. vrata, na katera smo se

povezali.

V drugi vrstici piše, od kod se izvaja server. Podana je le kriva črta ''/'', ta predstavlja koren,

kar pomeni, da se izvaja v tistem direktoriju, kjer smo postavljeni v ukazni vrstici. Naprej pa

so našteti trenutno uporabljeni paketi in dokumenti, ter če je bila obdelava uspešna ali ne.

V projektu AngularJS 4 je to implementirano nekoliko drugače. Tukaj smo za inštalacijo

Angular-a v ukazni vrstici vnesli ukaz npm install @angular/cli -g. Po uspešni inštalaciji pa

še ukaz ng new myApp, kar nam je v trenutnem direktoriju ustvarilo delujočo aplikacijo

(slika 35).

Slika 35: Prikaz ustvarjene aplikacije

V direktoriju myApp pa smo zagnali aplikacijo z ukazom ng serve. Ukazna vrstica je zgradila

vse potrebne module za delovanje aplikacije in prikazala trenutno še uporabljene

dokumente (slika 36).

39

Slika 36: Skrajšan prikaz grajenja modulov in dokumentov v uporabi

Izgled aplikacije je viden tako, da se povežemo na stran http://localhost:4200. Opazili smo,

da zadeva isto teče na lokalnem serverju, le na drugih vratih. Prikazal se nam je naslednji

izgled začetne strani (slika 37).

Slika 37: Prikaz osnovne strani AngularJS 4 aplikacije

40

Isto kot pri našem projektu pa se pregledujejo dokumenti aplikacije, le da je tukaj

nadgrajeno že toliko, da so v pregledu vsi dokumenti. Na začetku je aplikacija sproti

preverjala dve datoteki, to smo nadgradili, tako da pregleduje še ostale, ki smo jih dodali v

projekt.

V datoteki entry.js smo pod oznako require dodali še poti do ostalih datotek. S tem smo v

bistvu podali ukaz, da naj strežnik nadzoruje še vse te datoteke. To bo delovalo, zato ker

smo v konfiguracijskem dokumentu webpack.config.js podali vstopno točko entry.js. Ta pa

je tako rekoč vmesnik, ki povezuje skupaj datoteke projekta. Strežnik pregleda vse

datoteke, katerih povezave imamo naštete v entry.js. Težava tega pristopa pa je, da je za

vsako tehnologijo potreben loader, da dokumenti vseh teh tehnologij prevedejo za

uporabo.

Problem smo rešili s pomočjo tehnologije Gulp, saj je specializirana za avtomatizacijo.

Na začetku tega sklopa smo že naložili pakete, ki so nam omogočili uporabo Gulp-a.

Potrebno se je bilo naučiti še nekaj sintakse, da smo to tehnologijo lahko še izkoristili za

naše namene. Ustvarili smo datoteko gulpfile.js, v katero smo najprej vnesli niz (slika 38):

Slika 38: Zahteva o uporabi paketa Gulp

V tej zahtevi je predstavljen način kreiranja spremenljivke. Pri programiranju so

spremenljivke nosilci vrednosti, katere moramo deklarirati, preden jih lahko uporabimo.

Prav tako jim moramo podati, kateri tip vrednosti lahko vsebujejo, ime spremenljivke,

vrednost pa ni nujna, a je priporočljiva. Uporabili smo tip spremenljivk var, ki je v spletnih

jezikih nekoliko univerzalen, saj lahko vsebuje vse vrste vrednosti. Ime si izmislimo glede na

to, kaj spremenljivka predstavlja in kaj bo njen namen, čemer sledi tudi vrednost.

S tem smo NodeJS-u povedali, da bomo uporabljali paket Gulp, ki se nahaja v mapi

node_modules.

41

Potreben je bil poizkus delovanja, zato smo poskusili kar preprost izpis besedila. To smo

dosegli z odsekom kode na sliki 39:

Slika 39: Izpis preprostega niza z uporabo Gulp-a

Tako zgleda osnovni primer uporabe. Mi pa smo ciljali višje. Implementirali smo množico

metod, ki se bodo izvedle ob določenem ukazu. Vsako metodo lahko izvedemo posamezno,

ker pa smo hoteli zadevo avtomatizirati, smo jo spisali, tako da se izvedejo vse metode

postopoma ena za drugo.

V naslednjih korakih bodo prikazani in razloženi implementirani primeri.

4.6 Koraki implementacije avtomatizacije

Prvi korak je bil dodajanje potreb po paketih (slika 40).

Slika 40: Odsek kode za zahtevke o uporabi paketov

42

V projektu je bilo uporabljenih več tehnologij, zato je bilo potrebno pridobiti več paketov,

ki vsebujejo zmogljivost za izvršitev nalog, ki smo si jih zadali.

Drugi korak je bila vzpostavitev strežnika (slika 41).

Slika 41: Odsek kode za vzpostavitev strežnika

Za vse metode je bil uporabljen Gulp. Pri vzpostavitvi strežnika smo s pomočjo Gulp metode

task podali njeno ime. Nato smo ustvarili funkcijo, ki s pomočjo spremenljivke browserSync

(ki kaže na programski paket) zažene strežnik, ki črpa podatke iz baseDir oziroma domačega

direktorija, ki smo ga podali. V našem primeru './', kar predstavlja trenutni direktorij.

43

V tretjem koraku smo spisali funkcijo za nadzor nad spremembami datotek (slika 42).

Slika 42: Odsek kode s funkcijo za nadzor datotek

Isto kot prej smo ustvarili funkcijo, le da tokrat gulp.watch, kar je Gulp-ova notranja

metoda, ki zažene nadzornika. Tej metodi smo morali podati direktorij ter končnico

datotek, da se vedno ve, kje in kaj naj nadzoruje.

S tem smo ustvarili avtomatizirano okolje za izdelavo spletnih storitev.

Dodali pa smo še dodatno funkcionalnost, ki nam omogoča varnostno kopiranje obstoječih

datotek v primeru nezgode. Implementacija zaenkrat sicer ni optimalna, ampak je za prvo

silo (slika 43).

Slika 43: Implementacija varnostnega kopiranja datotek

44

S tem smo ustvarili mapo backup, ki vsebuje podmape z varnostnimi kopijami slik in

dokumentov s končnico: .js, .css, .scss.

Pri tem pa se je pojavil problem, za katerega še nismo prepričani, kako ga rešiti. V tem

primeru se bodo ob vsakem zagonu teh metod ustvarile nove varnostne kopije, starejše pa

bodo ostale. Za to je bila dodana še metoda, ki bo pred vsakim varnostnim kopiranjem

izbrisala starejše dokumente in šele potem ustvarila varnostne kopije (slika 44).

Slika 44: Implementacija izbrisa starejših datotek

Za boljšo odločitev pa se lahko odločite vi.

Vse skupaj zaženemo z naslednjo kodo (slika 45):

Slika 45: Koda za zagon vseh ustvarjenih funkcij

V primeru, da katere koli od teh metod ne želimo uporabiti, jo samo izbrišemo iz zadnje

metode, kjer se kličejo.

45

5 REZULTATI

V rezultatih prikazujemo primerjavo med datoteko package.json iz našega projekta ter iz

projekta novejše različice AngularJS 4.

Vsebino naše datoteke package.json v Sublime Text-u prikazuje slika 46.

Slika 46: Vsebina "package.json" v našem projektu

46

V našem projektu smo imeli naložene pakete za orodja Gulp, Webpack ter Babel. Opravila,

katerih uporabe smo bili zmožni z naloženimi paketi, so v glavnem ustvarjanje metod za

uporabo Gulp-a, s katerimi omogočamo avtomatizacijo in še nekaj dodatkov za olepšave.

Vsebina package.json novejše različice AngularJS 4 (slika 47):

Slika 47: Vsebina "package.json" datoteke v AngularJS 4

47

Na sliki 47 je vidno, da paketov za uporabo orodij Gulp, Webpack ni v referencah, saj je

način delovanja drugačen. Poudarek je na uporabi samega Angular programskega jezika in

njegovih paketov. Zraven pa so še paketi za Jasmine in Karma, ki se v glavnem uporabljata

za testiranje delovanja spletne kode in pa Typescript, kar pa je v bistvu nadgrajena različica

Javascript kode, ki se kasneje kompilira v navadno JavaScript kodo. Prednost tega je, da

Integriranem razvojnem okolju (IRO) omogoča lažje iskanje napak. IRO je programski paket,

ki kombinira razvojna orodja za pisanje in testiranje programske opreme.

48

6 ZAKLJUČEK

Zasnovali in razvili smo projekt, ki nam omogoča avtomatizacijo z uporabo spletnih storitev.

V teku dela smo spoznali obstoječa orodja, ki se uporabljajo pri delu s spletnimi storitvami.

Hkrati pa smo spoznali še nekaj tehnologij s tega področja, za delo v spletnem

programiranju pa obstaja še množica drugih uporabnih tehnologij. Naučili smo se, kaj je

avtomatizacija spletnih storitev ter postopek razvoja. V tem primeru je sicer šlo za starejši

projekt, zato je prirejena še primerjava te in novejše različice, ki je dosegljiva na spletu.

Tekom dela pa se je pojavilo nekaj ovir, kot je nepravilna nastavitev programskih paketov,

zastarelost ali nekompatibilnost programskih paketov na določenih brskalnikih. Te

probleme smo v večini primerov rešili s posodobitvami uporabljenih programskih paketov

in kakšnim odsekom kode za izboljšavo. To pa ni vedno rešilo težav, saj je bilo takrat še

dokaj novo. Pri posodobitvi paketov so se pojavljale težave, ker je v direktoriju bila že

obstoječa različica paketa in jo je smatralo kot isto različico, a ni dovolilo prepisovanja čez

obstoječo. Zato smo velikokrat kar izbrisali programske pakete ter naredili svežo inštalacijo.

Projekt, kot smo ga predstavili v diplomskem delu, je sestavljen tako, da ob zagonu naloži

najnovejše različice vsake programske opreme.

Seveda to ni nujno končni izdelek, saj je vedno možna kakšna nadgraditev. Naslednji korak

bi bil na primer ustvaritev okolja za testiranje delovanja, da pa bi to ustrezno predstavili, bi

morali zasnovati novo diplomsko delo.

49

7 VIRI

[1] Sublime Text „Sublime Text is a sophisticated text editor for code, markup and

prose.“ [Elektronski]. Dostopno na: http://www.sublimetext.com/ [Poskus dostopa 01. 07.

2017]

[2] NodeJS „Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine“

[Elektronski]. Dostopno na: https://nodejs.org/en/ [Poskus dostopa 01. 07. 2017].

[3] Wikipedia „Node.js“ [Elektronski]. Dostopno na:

https://en.wikipedia.org/wiki/Node.js [Poskus dostopa 01. 07. 2017].

[4] npm „Building amazing things“ [Elektronski]. Dostopno na:

https://www.npmjs.com/ [Poskus dostopa 01. 07. 2017].

[5] Bower „A package manager fort he web“ [Elektronski]. Dostopno na:

https://bower.io/ [Poskus dostopa 02. 07. 2017].

[6] Gulp „Automate and enhance your workflow“ [Elektronski]. Dostopno na:

http://gulpjs.com/ [Poskus dostopa 02. 07. 2017].

[7] Github „Gulp Getting started“ [Elektronski]. Dostopno na:

https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md [Poskus dostopa 02.

07. 2017].

[8] W3Schools „HTML5 Tutorial“ [Elektronski]. Dostopno na:

https://www.w3schools.com/html/ [Poskus dostopa 02. 07. 2017]

[9] Wikipedia „HTML“ [Elektronski]. Dostopno na: https://sl.wikipedia.org/wiki/HTML

[Poskus dostopa 02. 07. 2017].

[10] asti.co „HTML-icon“ [Elektronski]. Dostopno na: http://www.asti.co.in/wp-

content/uploads/2017/01/html_icon.png [Poskus dostopa 02. 07. 2017].

[11] Quora „What are the pros and cons of HTML?“ [Elektronski]. Dostopno na:

https://www.quora.com/What-are-the-pros-and-cons-of-HTML [Poskus dostopa 03. 07.

2017].

50

[12] W3Schools „CSS Tutorial“ [Elektronski]. Dostopno na:

https://www.w3schools.com/css/ [Poskus dostopa 03. 07. 2017].

[13] Wikipedia „CSS“ [Elektronski]. Dostopno na: https://sl.wikipedia.org/wiki/CSS

[Poskus dostopa 03. 07. 2017].

[14] sololearn „CSS-icon“ [Elektronski]. Dostopno na:

https://www.sololearn.com/Icons/Courses/1023.png [Poskus dostopa 03. 07. 2017].

[15] Sanford-Brown „Sanford-Brown Blogs“ [Elektronski]. Dostopno na:

http://www.sanfordbrown.edu/Student-Life/blog/January-2015/Pros-and-Cons-

of-CSS [Poskus dostopa 03. 07. 2017]

[16] Angular „Webpack: An Introduction“ [Elektronski]. Dostopno na:

https://angular.io/docs/ts/latest/guide/webpack.html#!#what-is-webpack [Poskus

dostopa 07. 07. 2017].

[17] Backand Blog „Everything You Need to Know about Building Serverless Apps With

AWS Lambda and Backand“ [Elektronski]. Dostopno na: http://blog.backand.com/pros-

and-cons-of-angularjs/ [Poskus dostopa 07. 07. 2017].

[18] Wikipedia „Webpack“ [Elektronski]. Dostopno na:

https://en.wikipedia.org/wiki/Webpack [Poskus dostopa 07. 07. 2017].

[19] Webpack „Getting started“ [Elektronski]. Dostopno na:

http://webpack.github.io/docs/tutorials/getting-started/ [Poskus dostopa 07. 07. 2017].

[20] Webpack „CLI Documentation“ [Elektronski]. Dostopno na:

https://webpack.github.io/docs/cli.html [Poskus dostopa 07. 07. 2017].

[21] Wikipedia „JavaScript“ [Elektronski]. Dostopno na:

https://en.wikipedia.org/wiki/JavaScript [Poskus dostopa 07. 07. 2017].

[22] Unmetered „JavaScript-icon“ [Elektronski]. Dostopno na:

http://web.unmetered.co.id/wp-content/uploads/2014/09/Screenshot_217.png [Poskus

dostopa 07. 07. 2017].

51

[23] jscripters.com „JAVASCRIPT: ADVANTAGES AND DISADVANTAGES“ [Elektronski].

Dostopno na: http://www.jscripters.com/javascript-advantages-and-disadvantages/

[Poskus dostopa 07. 07. 2017].

[24] Wikipedia „boilerplate code“ [Elektronski]. Dostopno na:

https://en.wikipedia.org/wiki/Boilerplate_code [Poskus dostopa 17. 07. 2017].

[25] Wikipedia „Metaprogramming“ [Elektronski]. Dostopno na:

https://en.wikipedia.org/wiki/Metaprogramming [Poskus dostopa 17. 07. 2017].

[26] responsivedesign „Boilerplate-icon“ [Elektronski]. Dostopno na:

https://responsivedesign.is/wp-content/uploads/2016/11/html5-boilerplate1_eooig7.jpg

[Poskus dostopa 17. 07. 2017].

[27] searchsoftwarequality.techtarget „integrated development environment (IDE)“

[Elektronski]. Dostopno na:

http://searchsoftwarequality.techtarget.com/definition/integrated-development-

environment [Poskus dostopa 03. 08. 2017].

52

53

54