View
6
Download
0
Category
Preview:
Citation preview
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
Recommended