Angular 2 technology based on Wordpress plugin example

Full text

(1)UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO, RAČUNALNIŠTVO IN INFORMATIKO. Mario Kenda. Tehnologija Angular 2 na primeru vtičnika Wordpress Diplomsko delo. Maribor, avgust 2017.

(2)

(3) TEHNOLOGIJA ANGULAR 2 NA PRIMERU VTIČNIKA WORDPRESS Diplomsko delo. Študent:. Mario Kenda. Študijski program:. Univerzitetni. študijski. program. računalništvo in informacijske tehnologije Mentor:. doc. dr. Tomaž Kosar. Lektorica:. Alenka Golež, prof.. i.

(4) ii.

(5) iii.

(6) iv.

(7) ZAHVALA Zahvaljujem se mentorju, doc. dr. Tomažu Kosarju za vodenje, nasvete in pomoč pri pisanju diplomskega dela.. Zahvaljujem se tudi družini in prijateljem za pomoč in podporo, ki sem je bil deležen v času študija.. v.

(8) vi.

(9) TEHNOLOGIJA ANGULAR 2 NA PRIMERU VTIČNIKA WORDPRESS. Ključne besede: Angular 2, TypeScript, Wordpress. UDK: 004.383.2:004.738.5(043.2). Povzetek V diplomskem delu je predstavljena implementacija vtičnika Wordpress, ki zagotavlja hitro in predvsem enostavno rezervacijo željenega turističnega aranžmaja. To dosežemo s tehnologijama Angular 2 in TypeScript ter vsemi drugimi povezanimi tehnologijami za razvoj spletnih aplikacij. Uporabniški vmesnik aplikacije je implementiran v jezikih HTML in CSS ter ogrodjem Bootstrap. Interakcija z uporabnikom ter logika aplikacije pa je implementirana s tehnologijama Angular 2 in jezikom TypeScript.. vii.

(10) ANGULAR 2 TECHNOLOGY BASED ON WORDPRESS PLUGIN EXAMPLE. Key words: Angular 2, TypeScript, Wordpress. UDK: 004.383.2:004.738.5(043.2). Abstract This diploma thesis presents the development of Wordpress plugin, which provides quick and simple reservation of the desired travel arrangement. This is done using Angular 2 and TypeScript along with all other related technologies used for the development of web applications. The application user interface is implemented using HTML and CSS languages with the help of the Bootstrap framework. User interaction and application logic is implemented in Angular 2 technology and TypeScript language.. viii.

(11) KAZALO 1 UVOD ........................................................................................................................ 1 2 TEHNOLOGIJE ............................................................................................................ 3 2.1 TYPESCRIPT ................................................................................................................ 3 2.1.1 ZNAČILNOSTI ..................................................................................................................... 3 2.1.2 PREDNOSTI PRED SORODNIMI JEZIKI ....................................................................................... 4 2.1.3 KOMPONENTE ................................................................................................................... 4 2.1.4 DEKLARACIJSKE DATOTEKE ................................................................................................... 5 2.1.5 VGRAJENI TIPI.................................................................................................................... 5 2.1.6 TYPESCRIPT IN OBJEKTNA ORIENTIRANOST ............................................................................... 6 2.2 ANGULAR 2 ................................................................................................................ 8 2.2.1 MODULI ........................................................................................................................... 9 2.2.2 KNJIŽNICE ......................................................................................................................... 9 2.2.3 KOMPONENTE ................................................................................................................. 10 2.2.4 PREDLOGE ...................................................................................................................... 11 2.2.4.1 Sintaksa predlog ...................................................................................................... 11 2.2.4.1.2 Deklaracija spremenljivk....................................................................................... 15 2.2.5 DIREKTIVE ...................................................................................................................... 15 2.2.5.1 Atributne direktive .................................................................................................. 15 2.2.5.2 Strukturne direktive................................................................................................. 16 2.2.6 METAPODATKI ................................................................................................................ 18 2.2.7 SERVISI .......................................................................................................................... 18 2.2.8 PRENOS ODVISNOSTI ......................................................................................................... 19 3 VTIČNIK WORDPRESS ............................................................................................... 20 3.1 RAZVOJNA IN IZVAJALNA OKOLJA.................................................................................... 20 3.2 IMPLEMENTACIJA ....................................................................................................... 20 3.2.1 UPORABNIŠKI VMESNIK ..................................................................................................... 20 3.2.3 RAZVIJANJE REŠITVE .......................................................................................................... 24. ix.

(12) 3.2.3.1 Trenutni korak rezervacije ...................................................................................... 25 3.2.3.2 Informacije o rezervaciji .......................................................................................... 27 3.2.3.3 Potek rezervacije ..................................................................................................... 28 3.2.3.4 Vključitev vtičnika v sistem Wordpress ................................................................... 30 4 SKLEP ....................................................................................................................... 34 5 VIRI IN LITERATURA ................................................................................................. 36. KAZALO SLIK SLIKA 1: ARHITEKTURA ANGULAR APLIKACIJE .............................................................................................................. 9 SLIKA 2: POVEZOVANJE PODATKOV IN DOGODKOV ..................................................................................................... 12 SLIKA 3: IZGLED UPORABNIŠKEGA VMESNIKA ............................................................................................................. 21 SLIKA 4: IZGLED KOMPONENTE ZA INFORMACIJE O TRENUTNEM KORAKU REZERVACIJE ....................................................... 22 SLIKA 5: IZGLED KOMPONENTE ZA INFORMACIJE O REZERVACIJI ..................................................................................... 22 SLIKA 6: PRVI KORAK REZERVACIJE........................................................................................................................... 23 SLIKA 7: DRUGI KORAK REZERVACIJE ........................................................................................................................ 23 SLIKA 8: TRETJI KORAK REZERVACIJE ........................................................................................................................ 24 SLIKA 9: STRUKTURA PROJEKTA .............................................................................................................................. 25 SLIKA 10: PRIKAZ OPOZORIL PRI VNOSIH ................................................................................................................... 29 SLIKA 11: ONEMOGOČEN GUMB ZA NAPREDOVANJE IN PRIKAZ OPOZORILA ..................................................................... 29 SLIKA 12: STRUKTURA DIREKTORIJA ZA VKLJUČITEV VTIČNIKA V SISTEM WORDPRESS ......................................................... 31 SLIKA 13: VSTAVITEV KRATKE KODE ......................................................................................................................... 33. KAZALO TABEL TABLE 1: VGRAJENI PRIMITIVNI TIPI JEZIKA TYPESCRIPT ................................................................................................... 6. x.

(13) KAZALO IZVORNE KODE IZVORNA KODA 1: PRIMER DODELJEVANJA TIPOV NULL IN UNDEFINED .......................................................................... 6 IZVORNA KODA 3: PREVEDENA KODA TYPESCRIPT .................................................................................................... 7 IZVORNA KODA 4: PRIMER VKLJUČITVE KNJIŽNICE ANGULAR .................................................................................... 10 IZVORNA KODA 5: PRIMER KOMPONENTE ANGULAR ............................................................................................... 10 IZVORNA KODA 6: PRIMER ANGULAR PREDLOGE .................................................................................................... 11 IZVORNA KODA 7: PRIMER INTERPOLACIJE ............................................................................................................ 13 IZVORNA KODA 9: SPLOŠNA SINTAKSA ZA POVEZOVANJE DOGODKOV.......................................................................... 13 IZVORNA KODA 10: PRIMER UPORABE OBJEKTA $EVENT .......................................................................................... 14 IZVORNA KODA 11: PREPREČITEV TIPIČNEGA OBNAŠANJA S POMOČJO $EVENT OBJEKTA ................................................. 14 IZVORNA KODA 12: PRIMER DODELITVE DOGODKA NA GUMBU ................................................................................. 14 IZVORNA KODA 13: PRIMER DEKLARACIJE SPREMENLJIVKE........................................................................................ 15 IZVORNA KODA 14: PRIMER ATRIBUTNE DIREKTIVE ................................................................................................. 16 IZVORNA KODA 15: PRIMER UPORABE STRUKTURNE DIREKTIVE NGIF.......................................................................... 16 IZVORNA KODA 16: KRAJŠI NAČIN UPORABE STRUKTURNE DIREKTIVE NGIF .................................................................. 17 IZVORNA KODA 17: PRIMER UPORABE STRUKTURNE DIREKTIVE NGFOR ....................................................................... 17 IZVORNA KODA 18: PRIMER UPORABE STRUKTURNE DIREKTIVE NGSWITCH .................................................................. 17 IZVORNA KODA 19: PRIMER UPORABE @COMPONENT DEKORATORJA........................................................................ 18 IZVORNA KODA 20: PRIMER PRENOSA ODVISNOSTI ................................................................................................. 19 IZVORNA KODA 21: FUNKCIJA ZA SPREMEMBO KORAKA ........................................................................................... 26 IZVORNA KODA 22: PRIMER UPORABE STRUKTURNIH IN ATRIBUTNIH DIREKTIV ............................................................. 26 IZVORNA KODA 23: PRIMER ASINHRONEGA SPREJEMANJA PODATKOV ........................................................................ 28 IZVORNA KODA 24: PRIMER UPORABE PRENOSA ODVISNOSTI.................................................................................... 28 IZVORNA KODA 25: PRIDOBIVANJE ŠTEVILA OSEB IZ URL PARAMETROV ...................................................................... 28 IZVORNA KODA 27: KODA ZA ONEMOGOČANJE GUMBA ........................................................................................... 30 IZVORNA KODA 28: PREUSMERITEV UPORABNIKA OB KONČANI REZERVACIJI................................................................. 30 IZVORNA KODA 29: REGISTRACIJA SKRIPTNIH IN STILSKIH DATOTEK ............................................................................ 32 IZVORNA KODA 30: FUNKCIJA ZA VKLJUČITEV VSEH SKRIPTNIH DATOTEK IN OZNAKO IMPLEMENTIRANEGA VTIČNIKA ............. 32 IZVORNA KODA 31: REGISTRACIJA KRATKE KODE WORDPRESS ZA VKLJUČITEV VTIČNIKA.................................................. 32. xi.

(14) SEZNAM UPORABLJENIH KRATIC HTML - jezik za strukturiranje elementov v spletnih aplikacijah (ang. HyperText Markup Language) CSS - stili za oblikovanje spletnih aplikacij (angl. Cascading Style Sheets) PHP - razširjen odprtokodni programski jezik, ki se uporablja za razvoj dinamičnih spletnih vsebin (angl. HyperText Preprocessor) SPA - enostranska spletna aplikacija (angl. Single Page App) NPM - paketni upravljalec za programski jezik JavaScript (angl. Node Package Manager). xii.

(15) 1 UVOD V svetu spletnih tehnologij se nenehno pojavljajo nove tehnologije, ki vsaka s svojimi značilnostmi spreminjajo smer razvijanja spletnih strani in aplikacij. Ker je hitrost nalaganja spletnih aplikacij ključnega pomena, je za njihovo implementacijo smotrno uporabljati tehnologije, ki na inovativen način omogočajo hitro delovanje, kar občutno izboljša uporabniško izkušnjo.. Pri implementaciji spletnih strani je zelo popularno odprto kodno okolje Wordpress. To je sistem za urejanje z vsebinami, ki temeljijo na jezikih PHP in MySQL [11]. Zaradi popularnosti okolja Wordpress so podjetja množično začela razvijati vtičnike, ki jih lahko precej enostavno vključimo v vsako spletno stran, implementirano v tem okolju. Večina vtičnikov za sistem za urejanje vsebin Wordpress je napisanih v jeziku PHP, ki je zastarel in ne omogoča uporabe nekaterih pristopov programiranja, kot jih omogočajo novejši programski jeziki.. Cilj diplomske naloge je implementirati vtičnik za sistem Wordpress s pomočjo tehnologije Angular 2 in jezika TypeScript. Končna različica implementiranega vtičnika bo omogočala hitro in predvsem enostavno rezervacijo željenega potovanja.. Spletno stran bomo razdelili na več komponent, vsaka bo izvajala svojo nalogo. Komponente bodo komunicirale s servisi znotraj vtičnika, servisi pa bodo pridobivali podatke s strežnika, ki jih bodo vračali komponentam. Komponente bodo nato podatke prikazovale uporabniku. Tukaj bo ključnega pomena hitrost, kar bomo dosegli z uporabo omenjenih tehnologij in njihovih modernih pristopov, predvsem pri komunikaciji s strežnikom. Vsi koraki uporabnika do končne rezervacije bodo potekali brez osveževanja celotne spletne strani, kar je cilj enostranskih spletnih aplikacij (SPA).. 1.

(16) Implementiran vtičnik bomo na koncu vključili v sistem Wordpress na enak način, kot bi to storili za ostale vtičnike, napisane v jeziku PHP.. Diplomsko delo je sestavljeno iz štirih poglavij. V drugem poglavju opišemo tehnologije, uporabljene pri implementaciji praktičnega dela naloge, v tretjem predstavimo reševanje problema in rezultate, v četrtem pa povzamemo diplomsko delo.. 2.

(17) 2 TEHNOLOGIJE 2.1 TypeScript Skriptni jezik JavaScript je bil predstavljen kot programski jezik, ki se izvaja na odjemalčevi strani. S hitrim razvojem jezika Node.js, JavaScript postaja del tehnologij, ki delujejo na strežniški strani. Pri večjih aplikacijah se običajno zgodi, da koda JavaScript postane težavna za vzdrževanje in ponovno uporabo. Hkrati je pri jeziku JavaScript problem, da ne omogoča tipiziranosti in preverjanja napak pred zagonom aplikacije. Vse omenjene napake programskemu jeziku JavaScript onemogočajo uspeh kot strežniški tehnologiji. Iz navedenih razlogov je bil predstavljen programski jezik TypeScript [5].. TypeScript je močno tipiziran in objektno orientiran programski jezik. Zasnoval ga je Anders Hejlsberg (snovalec jezika C#) pri podjetju Microsoft. TypeScript je tako jezik kot tudi zbirka orodij. Je tipizirana nadmnožica jezika JavaScript, ki se vanj prevaja. Z drugimi besedami, TypeScript je JavaScript z nekaj dodatnimi funkcijami [5].. 2.1.1 Značilnosti V nadaljevanju podajamo nekaj značilnosti jezika TypeScript [5]: •. TypeScript je samo Javascript. TypeScript prevzame osnovne bloke kode od jezika JavaScript. Zato je dovolj, če poznamo JavaScript, da lahko uporabljamo TypeScript. Vsa TypeScript koda je prevedena v ekvivalentno kodo JavaScript za potrebe izvajanja.. •. TypeScript podpira druge JavaScript knjižnice. Preveden TypeScript lahko dobimo iz kode JavaScript. Koda JavaScript, ki jo generiramo s kodo TypeScript, lahko ponovno uporabi vsa uporabljena JavaScript ogrodja, orodja in knjižnice.. •. JavaScript je TypeScript. To pomeni, da je vsaka veljavna datoteka JavaScript lahko preimenovana v datoteko TypeScript in prevedena z drugimi datotekami TypeScript.. •. TypeScript je prenosljiv. TypeScript jezik je prenosljiv med brskalniki, napravami in operacijskimi sistemi. Izvaja se lahko v vseh okoljih, v katerih se izvaja tudi JavaScript.. 3.

(18) 2.1.2 Prednosti pred sorodnimi jeziki TypeScript je boljši od sorodnih jezikov, kot sta CoffeScript in Dart, v tem pogledu, da je TypeScript razširjen JavaScript, za razliko od prej naštetih, ki sta nova jezika in zahtevata specifično izvajalno okolje [5].. Nekatere prednosti tehnologije TypeScript [5]: •. Prevajanje: JavaScript je interpretiran jezik, kar pomeni, da moramo aplikacijo zagnati, če želimo preveriti, ali deluje pravilno. Zato se lahko zgodi, da po pisanju kode, če je prišlo do kakšne napake, dobimo prazen izhod. To napako je seveda potrebno poiskati, kar je lahko dolgotrajen proces. Prevajalnik TypeScript (angl. transpiler) ponuja funkcijo za preverjanje napak. TypeScript tako prevede kodo in generira morebitne sintaktične napake. Tako lahko popravimo napake še preden zaženemo kodo.. •. Močno tipiziranje: JavaScript ni močno tipiziran jezik. TypeScript vsebuje opcijsko statično tipiziranje in sistem za sklepanje tipov preko TLS (angl. TypeScript Language Service). Tip spremenljivke, deklariran brez tipa, je lahko določen s pomočjo TLS glede na njeno vrednost.. •. Objektna orientiranost: TypeScript podpira koncepte objektno orientiranega programiranja kot so razredi, vmesniki, dedovanje.. •. TypeScript podpira definicije tipov za obstoječe JavaScript knjižnice: Definicijska datoteka TypeScript (s končnico .d.ts) ponuja definicije za zunanje knjižnice JavaScript.. 2.1.3 Komponente TypeScript sestavljajo 3 komponente [5]: •. Jezik: Sestavljen je iz sintakse, ključnih besed in tipov.. •. Prevajalnik: Prevajalnik TypeScript spremeni inštrukcije, napisane v jeziku TypeScript, v ekvivalenten zapis JavaScript.. •. Jezikovni servis TypeScript: Omogoča tipične funkcije tekstovnih urejevalnikov, kot so formatiranje in barvanje kode, pomoč, samodopolnjevanje stavkov, ipd.. 4.

(19) 2.1.4 Deklaracijske datoteke Ko se datoteka TypeScript prevede, imamo možnost, da se zraven zgenerira tudi deklaracijska datoteka (s končnico .d.ts), ki funkcionira kot vmesnik do komponent v prevedenem programskem jeziku JavaScript. Koncept deklaracijskih datotek je podoben konceptu zaglavnih datotek pri jezikih, kot sta C in C++. Deklaracijske datoteke zagotavljajo pametnemu tekstovnemu urejevalniku, da prepozna tipe spremenljivk, funkcijske klice in podporo spremenljivk za knjižnice JavaScript, kot so jQuery, MooTools itd [5].. 2.1.5 Vgrajeni tipi TypeScript ima 5 vgrajenih primitivnih tipov, dinamični tip any in tip za vračanje vrednosti void. Tipu any lahko dodelimo poljubno vrednost in jo lahko kadarkoli spremenimo. To pomeni, da lahko spremenljivko inicializiramo kot niz, kasneje pa jo lahko spremenimo v številčno vrednost. Tip void je lahko uporabljen le takrat, ko funkcija ne vrača nobene vrednosti [6].. Tabela 2 opisuje 5 vgrajenih primitivnih tipov.. Ime. Pomen. number. Tip. number. je. ekvivalenten. istoimenskemu tipu v jeziku JavaScript, ki predstavlja 64-bitno število s plavajočo vejico [6]. boolean. Tip boolean predstavlja vrednost, ki je lahko resnična (true) ali napačna (false).. string. Tip string predstavlja zaporedje UTF-16 znakov [6].. null. Tip null ima vedno vrednost literala null. To je poseben podtip, ki je lahko dodeljen. 5.

(20) spremenljivkam poljubnega tipa, razen tistim, ki so tipa undefined ali void [6]. undefined. Tip. undefined. ima. vedno. vrednost. nedoločenega literala. Kot tip null je tudi tip undefined poseben podtip, ampak je za razliko ta tip lahko dodeljen vsem tipom spremenljivk [6]. Table 1: Vgrajeni primitivni tipi jezika TypeScript. Izvorna koda 1 demonstrira, da lahko vrednost null ali undefined dodelimo spremenljivkam drugega tipa, vendar ne moremo deklarirati spremenljivke s tipom null ali undefined [6].. // dovoljeno var a: string = null; var b: number = undefined; // ni dovoljeno var c: null; var d: undefined; // ima vrednost undefined var e: string; IZVORNA KODA 1: Primer dodeljevanja tipov null in undefined. 2.1.6 TypeScript in objektna orientiranost. Objektna orientiranost je paradigma razvijanja programske opreme, ki sledi modeliranju resničnega sveta. Objektna orientiranost obravnava program kot seznam objektov, ki komunicirajo med seboj preko mehanizmov, ki jih imenujemo metode. TypeScript je jezik, ki podpira naslednje komponente [5]: •. Objekt: Objekt je realno časovna predstavitev neke entitete. Vsak objekt mora imeti naslednje tri funkcije: o Stanje: opisano je z atributi objekta; o Vedenje: opisuje, kako se bo objekt vedel;. 6.

(21) o Identiteto: unikatna vrednost, ki objekt loči od drugih podobnih objektov. •. Razred:To je načrt za kreiranje objekta. Razred enkapsulira podatke objekta.. •. Metoda: Metode omogočajo komunikacijo med objekti.. Izvorna koda 2 definira razred Pozdrav. Razred ima metodo pozdrav(), ki izpiše niz "Pozdravljen svet!" v terminalnem oknu. Rezervirana beseda new kreira objekt razreda. S kreiranim objektom obj nato pokličemo metodo razreda pozdrav().. class Pozdrav { pozdrav():void { console.log("Pozdravljen svet!") } } var obj= new Pozdrav(); obj.pozdrav(); IZVORNA KODA 2: Primer definicije razreda. Ko izvorno kodo 2 prevedemo, dobimo kodo JavaScript, ki jo prikazuje izvorna koda 3.. var Greeting = (function () { function Greeting() { } Greeting.prototype.greet = function () { console.log("Hello World!!!"); }; return Greeting; }()); var obj = new Greeting(); obj.greet() IZVORNA KODA 3: Prevedena koda TypeScript. 7.

(22) 2.2 Angular 2 Angular 2 je ogrodje za razvijanje aplikacij v jezikih HTML in JavaScript, oziroma v jeziku, ki se prevede v JavaScript. Primer takšnega jezika je TypeScript. Ogrodje sestavlja veliko knjižnic, nekatere od njih so ključnega pomena, nekatere pa opcijske [1].. Angular aplikacije pišemo tako, da sestavljamo razširjene predloge HTML, pišemo razrede komponent, ki upravljajo s temi predlogami, dodajamo aplikacijsko logiko v servise in zlagamo komponente in servise v module. Nato zaženemo aplikacijo z zlaganjem korenskega modula. V naslednjem koraku Angular prevzame delovanje in predstavi aplikacijsko vsebino v brskalniku ter se odziva na uporabniško interakcijo, glede na inštrukcije, ki smo jih navedli [1].. Arhitekturo Angular aplikacij sestavlja 8 gradnikov [12]: •. moduli,. •. komponente,. •. predloge,. •. metapodatki,. •. povezovanje lastnosti,. •. direktive,. •. servisi,. •. prenos odvisnosti.. Arhitekturo Angular aplikacije prikazuje slika 1.. 8.

(23) SLIKA 1: Arhitektura Angular aplikacije. 2.2.1 Moduli Angular ima svoj modularni sistem, imenovan AppModule, zaradi česar so aplikacije Angular modularne. Vsaka Angular aplikacija ima vsaj en razred NgModule, korenski modul, imenovan AppModule. Medtem ko je korenski modul morda edini modul v majhni aplikaciji, ima večina aplikacij veliko več funkcijskih modulov, od katerih je vsak koheziven blok kode namenjen domeni aplikacije, poteku delovanja in naboru zmogljivosti. Vsak Angular modul je razred z dekoratorjem @NgModule.. Dekoratorji so funkcije, ki. spremenijo razrede JavaScript. Angular vsebuje veliko dekoratorjev, katerih funkcija je dodajanje metapodatkov razredom, z namenom, da Angular ve, kaj razred pomeni in kako bi naj deloval [1].. 2.2.2 Knjižnice Angular je sestavljen iz kolekcije modulov JavaScript, ki so del knjižnice Angular. Vsako ime knjižnice se začne s predpono @angular. Namestimo jih lahko s paketnim upravljalcem npm in jih posamezno vključimo s stavkom import.. Izvorna koda 4 prikazuje način vključitve dekoratorja Component s knjižnico @angular/core.. 9.

(24) import { Component } from '@angular/core'; IZVORNA KODA 4: Primer vključitve knjižnice Angular. 2.2.3 Komponente Komponente so logični del kode aplikacije Angular. Sestavni elementi komponente so [9]: •. Predloga: Uporabljena je za prikaz pogleda aplikacije. Pogled vsebuje HTML, ki mora biti prikazan v aplikaciji.. •. Razred: Je definiran kot v vsakem drugem jeziku, ki vsebuje lastnosti in metode. Ta koda je uporabljena za podporo predlogi, definirana pa je v jeziku TypeScript.. •. Metapodatki: Vsebujejo dodatne podatke za razred Angular. Definirani so z dekoratorjem.. Angular kreira, posodablja in uničuje komponente, ko uporabnik navigira po aplikaciji. Aplikacija lahko v vsakem trenutku življenjskega kroga izvede akcije s pomočje posebnih funkcij za upravljanje z življenjskim krogom. Primer takšne funkcije je ngOnInit() [1]. Izvorna koda 5 prikazuje primer komponente Angular in uporabo funkcije življenjskega kroga ngOnInit.. export class HeroListComponent implements OnInit { heroes: Hero[]; selectedHero: Hero; constructor(private service: HeroService) { } ngOnInit() { this.heroes = this.service.getHeroes(); } selectHero(hero: Hero) { this.selectedHero = hero; } } IZVORNA KODA 5: Primer komponente Angular. 10.

(25) 2.2.4 Predloge Pogled komponente definiramo z njeno predlogo. Predloga je razširjen HTML, ki predstavlja izgled komponente. Izgleda kot tipična koda HTML, vendar ima nekaj dodatkov [1].. Čeprav predloga iz izvorne kode 6 uporablja tipične elemente HTML, kot sta h2 in p, pa vsebuje tudi nekaj dodatkov. Koda kot je *ngFor, {{uporabnik.ime}}, (click), [uporabnik] in <uporabnik-info> uporablja sintakso Angular za predloge. Zadnji primer od naštetih je poseben element, ki predstavlja novo komponento UporabnikInfoComponent [1].. <h2>Seznam uporabnikov</h2> <ul> <li *ngFor="let uporabnik of uporabniki" (click)="izberiUporabnika(uporabnik)"> {{uporabnik.ime}} </li> </ul> <uporabnik-info *ngIf="izbranUporabnik" [uporabnik]="izbranUporabnik"></uporabnikinfo> IZVORNA KODA 6: Primer Angular predloge. 2.2.4.1 Sintaksa predlog HTML je jezik, ki se uporablja pri pisanju predlog Angular. Skoraj vsaka sintaksa HTML je veljavna tudi za predloge. Ena izmed izjem je element script, ki je zaradi varnostnih razlogov prepovedan. V praksi brskalnik ta element ignorira in v konzoli prikaže opozorilo [1].. Preprosto povedano, predloge pomagajo prikazati podatke v HTML z nekaj dinamičnimi deli. Omogočajo nam izpis podatkov, povezovanje lastnosti, povezovanje dogodkov in dinamično preoblikovanje strukture DOM. Da lahko to dosežemo, nam Angular ponuja posebne simbole [10]:. 11.

(26) •. {{ }} - za interpolacijo,. •. [ ] - za povezovanje lastnosti,. •. () - za povezovanje dogodkov,. •. # - za deklaracijo spremenljivk,. •. * - za strukturne direktive.. Slika 2 prikazuje komunikacijo med predlogo in komponento. Predloga je seznanjena z vsako spremembo lastnosti komponente, komponenta pa s funkcijami obravnava vse dogodke, ki so se sprožili v predlogi.. SLIKA 2: Povezovanje podatkov in dogodkov. 2.2.4.1.1 Interpolacija Interpolacijo uporabimo, ko želimo vstaviti spremenljivko tipa string v tekst med elemente ali atribute HTML. Interpolacija nam omogoča, da v predlogi uporabimo lastnost komponente, ki jo vstavimo v dvojne zavite oklepaje. Angular zamenja ime lastnosti komponente z ustrezno vrednostjo. Bolj splošno, tekst med zavitimi oklepaji je izraz predloge, ki ga Angular ovrednoti in pretvori v niz. Kot izraz lahko vstavimo tudi metode, ki smo jih definirali v komponenti [1].. Izvorna koda 7 prikazuje primer uporabe interpolacije. V vrednost atributa za izvor slike vstavimo spremenljivko imgURL, ki po ovrednotenju predstavlja izvorno mesto slike.. 12.

(27) <h3> {{naslov}} <img src="{{imgURL}}" style="height:30px"> </h3> IZVORNA KODA 7: Primer interpolacije. 2.2.4.1.2 Povezovanje lastnosti Vsaka lastnost modela DOM je lahko zapisana preko posebnih atributov elementov HTML z uporabo oglatih oklepajov. Atribut HTML se lahko začne z vsakim znakom. Angular ohranja lastnosti in atribute sinhronizirane, ko jih uporabljamo [10].. Lastnosti lahko imajo tudi logične vrednosti, torej, če imamo atribut selected na elementu option, bo naša koda izgledala tako, kot v izvorni kodi 8. Avtomobil bo izbran, če bo vrednost isCarSelected enaka true, v nasprotnem primeru pa ne. Ko se bo vrednost spremenljivke isCarSelected spremenila, se bo spremenila spremenljivka selected, ker Angular ohranja lastnosti in atribute sinhronizirane [10].. <option [selected]="isCarSelected" value="BMW">BMW</option> IZVORNA KODA 8: Primer povezovanja lastnosti. 2.2.4.1.3 Povezovanje dogodkov Angular 2 omogoča, da lahko s povezovanjem dogodkov (angl. event binding) direktno poslušamo za dogodke DOM v naši aplikaciji. Za implementacijo povezovanja dogodkov, je sintaksa precej preprosta. Izvorna koda 9 predstavlja splošno sintakso [10].. ([Ime DOM dogodka]) =”[Izraz predloge]” IZVORNA KODA 9: Splošna sintaksa za povezovanje dogodkov. Če želimo pridobiti dodatne informacije o dogodku elementa, lahko vedno kot argument v metodo pošljemo objekt $event, ki hrani pomembne informacije o dogodku [10].. 13.

(28) Izvorna koda 10 kaže primer, kjer dobimo z objektom $event dostop do podatkov dogodka ob vsaki sprožitvi dogodka keyup.. import {Component} from 'angular2/core'; @Component({ selector: 'key-up', template: ` <div> <input (keyup)="onKey($event)" /> <div>{{values}}</div> </div> ` }); export class KeyUpComponent { onKey(event){ this.values += event.target.value + ' | ' } } IZVORNA KODA 10: Primer uporabe objekta $event. Objekt dogodka, ki ga kot parameter sprejmemo v metodi onKey(), lahko uporabimo za preprečitev tipičnega obnašanja in/ali preprečitev propagacije dogodka [10]. Primer takšne uporabe objekta dogodka prikazuje izvorna koda 11.. onKey(event){ event.preventDefault(); event.stopPropagation(); } IZVORNA KODA 11: Preprečitev tipičnega obnašanja s pomočjo $event objekta. Izvorna koda 12 prikazuje primer dodelitve dogodka gumbu.. <button (click)="onClick()">Click me!</button> IZVORNA KODA 12: Primer dodelitve dogodka na gumbu. 14.

(29) 2.2.4.1.2 Deklaracija spremenljivk Lokalne spremenljivke so spremenljivke, ki jih lahko dinamično deklariramo v naši predlogi z uporabo # sintakse [10]. Izvorna koda 13 prikazuje izpis vrednosti vnosnega elementa.. <input type="text" #name> {{ name.value }} IZVORNA KODA 13: Primer deklaracije spremenljivke. Z uporabo # sintakse kreiramo lokalno spremenljivko z imenom name, ki referencira objekt DOM, ki se imenuje HTMLInputElement. To lokalno spremenljivko lahko uporabljamo povsod v predlogi [10].. 2.2.5 Direktive Angular predloge so dinamične. Ko jih Angular obdela, jih transformira v ustrezne DOM elemente glede na inštrukcije direktiv, ki jih vsebujejo. Direktiva je razred z dekoratorjem @Directive. Komponente so v bistvu direktive s predlogo, saj je dekorator @Component razširjen dekorator @Directive z dodanimi funkcijami za predloge. Direktive se kot navadni atributi pojavljajo med HTML značkami. Angular pozna strukturne in atributne direktive, vsaka pa ima svoje značilnosti [13].. 2.2.5.1 Atributne direktive Atributne direktive spremenijo izgled ali vedenje že ustvarjenega elementa. V predlogah izgledajo kot tipični atributi HTML, zato jih imenujemo atributne direktive [1].. Primer atributne direktive je direktiva ngModel, ki implementira dvostransko povezovanje podatkov. Pri tem spremeni vedenje obstoječega elementa (običajno elementa input) z nastavljanjem prikazane vrednosti lastnosti in z odzivanjem na dogodke ob morebitnih spremembah [13].. 15.

(30) Izvorna koda 14 prikazuje primer uporabe atributne direktive.. <input [(ngModel)]="hero.name"> IZVORNA KODA 14: Primer atributne direktive. Angular podpira še nekaj drugih direktiv, ki spreminjajo strukturo postavitve ali lastnosti elementov DOM in komponent (primera takšnih atributnih direktiv sta ngStyle in ngClass) [1].. 2.2.5.2 Strukturne direktive Strukturne direktive so zadolžene za izgled kode HTML, saj oblikujejo oziroma preoblikujejo DOM strukturo, običajno z dodajanjem, odstanjevanjem ali manipuliranjem elementov. Podobno kot pri drugih direktivah dodamo strukturno direktivo na gostiteljski element. Direktiva potem vpliva na ta element in njegove potomce. Strukturne direktive prepoznamo po znaku * pred njenim imenom. Angular v praksi spremeni notacijo z zvezdico (*), tako da gostiteljski element in vse njegove potomce obda z elementom ngtemplate. Vsaka strukturna direktiva na drugačen način vpliva na ta element. Tri najpogostejše strukturne direktive so NgIf, NgFor in NgSwitch [1].. 2.2.5.2.1 NgIf Strukturna direktiva NgIf se uporablja za skrivanje in prikazovanje elementov glede na ovrednotenje izraza med dvojnimi narekovaji. Če je rezultat izraza napačen (false), potem bo ustrezen element odstranjen iz strukture DOM [10]. Predloga na primeru izvorne kode 15 bo prikazana le, če polje cars vsebuje vsaj en element. To kodo lahko zapišemo na veliko krajši, primernejši način:. <template [ngIf]=”cars.length > 0"> <div> <h2>Cars</h2> </div> </template> IZVORNA KODA 15: Primer uporabe strukturne direktive NgIf. 16.

(31) Izvorna koda 16 prikazuje krajši način uporabe strukturne direktive NgIf.. <div *ngIf="cars.length > 0"><h2>Races</h2></div> IZVORNA KODA 16: Krajši način uporabe strukturne direktive NgIf. 2.2.5.2.2 NgFor NgFor je ponavljajoča direktiva in jo lahko uporabimo za npr. izpis podatkov. Namen direktive NgFor je, da ponovi izpis elementa DOM, tako da iterira skozi polje elementov. Za vsaki element polja lahko izpišemo ustrezno vrednost [1].. <ul> <li *ngFor="#car of cars">{{car.name}}</li> </ul> IZVORNA KODA 17: Primer uporabe strukturne direktive ngFor. 2.2.5.2.3 NgSwitch Direktiva NgSwitch omogoča zamenjavo predlog glede na določen pogoj. Sestavljena je iz treh direktiv: NgSwitch, NgSwitchWhen, NgSwitchDefault [10].. Z uporabo directive NgSwitch definiramo izraz za ovrednotenje. Izračun se zgodi, ko uporabimo direktivo NgSwitchWhen in dodelimo vrednosti otrokom elementa [10].. <div [ngSwitch]="messageCount"> <p *ngSwitchWhen="0">You have no message</p> <p *ngSwitchWhen="1">You have a message</p> <p *ngSwitchDefault>You have some messages</p> </div> IZVORNA KODA 18: Primer uporabe strukturne direktive ngSwitch. Direktiva NgSwitch prejme pogoj, ngSwitchWhen pa prejme možne vrednosti. Element z direktivo ngSwitchDefault bo prikazan, če bodo vse ostale vrednosti napačne [10].. 17.

(32) 2.2.6 Metapodatki Angular potrebuje metapodatke, da razume, kako naj procesira razred. Ko razredu Angular dodamo metapodatke, mu povemo, da je ta razred komponenta. Metapodatke razredu dodamo s pomočjo dekoratorja [1]:. Na izvirni kodi 19 opazimo dekorator @Component, ki razred pod njim identificira kot komponento.. Omenjen. dekorator. prejme. obvezne. konfiguracijske. objekte. z. informacijami, ki jih Angular potrebuje za kreiranje in prikazovanje komponente in njenega pogleda [1].. @Component({ selector: 'hero-list', templateUrl: './hero-list.component.html', providers: [ HeroService ] }) export class HeroListComponent implements OnInit { /* . . . */ } IZVORNA KODA 19: Primer uporabe @Component dekoratorja. 2.2.7 Servisi Servise uporabimo, ko želimo skupno funkcionalnost dodeliti različnim modulom. Primer takšne funkcionalnosti sta dostop in manipulacija s podatkovno bazo, ki bi jo lahko uporabili v različnih modulih. Zato moramo ustvariti servis, ki bi omogočal takšno upravljanje [9].. Funkcija komponent je, da omogoča dobro uporabniško izkušnjo. Funkcionalnosti, kot so povezava s strežnikom, validacija uporabniških vnosov, izpis napak itn., morajo biti ločene od komponente. Vse podobne funkcionalosti komponente delegirajo servisom, ki so zadolženi za vračanje ustreznih rezultatov teh funkcionalnosti [1].. 18.

(33) 2.2.8 Prenos odvisnosti Prenos odvisnosti (angl. dependency injection) je način, da novo kreiranemu razredu dodelimo vse potrebne odvisnosti. Večino teh odvisnosti je servisov, ki komponentam servirajo vse potrebne funkcionalnosti, ki jih same ne podpirajo. Angular uporablja prenos odvisnosti, da novim komponentam nudi servise, ki jih potrebujejo [1].. Angular nam nudi preprost način, da mu povemo, katere servise komponenta potrebuje. Vse, kar moramo storiti, je, da kot parametre konstruktorja komponente deklariramo ustrezne objekte servisov, za prenos odvisnosti pa poskrbi Angular [13].. Izvorna koda 20 demonstrira prenos odvisnosti. V konstruktorju komponente smo povedali, da komponenta potrebuje servis AppService.. constructor(private service: AppService) { } IZVORNA KODA 20: Primer prenosa odvisnosti. 19.

(34) 3 VTIČNIK WORDPRESS Kot praktičen primer uporabe tehnologij Angular 2 in TypeScript smo implementirali vtičnik za sistem Wordpress. Vtičnik omogoča hitro in predvsem enostavno rezervacijo željenega turističnega aranžmaja. Implementiran vtičnik smo razdelili na več komponent, vsaka ima v delovanju svojo nalogo. Ena izmed nalog vseh komponent je komunikacija s servisi znotraj vtičnika, servisi pa pridobivajo podatke s strežnika, ki jih nato vračajo komponentam, te pa dobljene podatke prikazujejo uporabniku. Vsi koraki rezervacije potekajo brez osveževanja celotne spletne strani, kar je cilj enostranskih spletnih aplikacij (SPA). Implementiran vtičnik smo na koncu s pomočjo kratke kode vključili v sistem Wordpress na enak način, kot bi to storili za ostale vtičnike, napisane v jeziku PHP.. 3.1 Razvojna in izvajalna okolja Za razvijalno okolje smo uporabili orodje PhpStorm, ki na enostaven in uporabniku prijazen način omogoča izdelovanje spletnih aplikacij. Za lokalno strežniško okolje smo uporabili orodje MAMP, za razhroščevanje kode PHP pa smo si pomagali z orodjem Xdebug. Zgodovino razvojne kode smo beležili z orodjem GIT, hranili pa smo jo v oblaku preko sistema GitLab. Pri testiranju spletne aplikacije smo uporabili brskalnike Google Chrome, Safari in Mozilla Firefox.. 3.2 Implementacija 3.2.1 Uporabniški vmesnik Uporabniški vmesnik smo implementirali s pomočjo jezikov HTML in CSS ter ogrodja Bootstrap za razvijanje odzivnih spletnih aplikacij. Sestoji iz treh delov: •. trenutnega koraka rezervacije,. •. podatkov o sami rezervaciji in. 20.

(35) •. glavnega dela vmesnika, katerega vsebina se spreminja glede na trenutni korak rezervacije. Za uspešno rezervacijo aranžmaja je potrebno izpolniti tri korake: o izbiro termina, o podatke o potnikih, o povzetek in rezervacijo. Slika 3 prikazuje izgled celotnega uporabniškega vmesnika na 2. koraku rezervacije, kjer mora uporabnik vnesti podatke vseh gostov.. SLIKA 3: Izgled uporabniškega vmesnika. Slika 4 prikazuje izgled komponente, ki vsebuje informacije o trenutnem koraku rezervacije. Vsaka vrstica označuje enega od treh korakov. Uporabniku je v vsakem trenutku omogočen prehod na prejšnji korak, prehod na naslednjega pa mu je omogočen le, če je za ta korak izpolnil vse potrebne informacije.. 21.

(36) SLIKA 4: Izgled komponente za informacije o trenutnem koraku rezervacije. Slika 5 prikazuje izgled komponente za informacije o rezervaciji. Ta omogoča uporabniku, da je skozi celoten proces rezervacije seznanjen s ceno in vsemi ostalimi relevantnimi podatki izbrane rezervacije, kot so ime destinacije, število oseb, tip prevoza, datum.. SLIKA 5: Izgled komponente za informacije o rezervaciji. Slika 6 prikazuje prvi korak rezervacije, na katerem uporabnik izbere željeno ponudbo. Izbira lahko med različnimi datumi nastanitve in i različnimi vključenimi storitvami. Uporabnik po izbrani ponudbi napreduje na 2. korak rezervacije.. 22.

(37) SLIKA 6: Prvi korak rezervacije. Slika 7 prikazuje 2. korak rezervacije, v kateri uporabnik vnese podatke vseh gostov. Vnosna polja se dinamično generirajo glede na število izbranih gostov v 1. koraku rezervacije. Če uporabnik ni ustrezno izpolnil vseh zahtevanih podatkov, mu je onemogočeno napredovanje na zadnji korak rezervacije.. SLIKA 7: Drugi korak rezervacije. 23.

(38) Slika 8 prikazuje tretji korak rezervacije, ki predstavlja povzetek in njen zaključek. Uporabniku so prikazane vse informacije o rezervaciji, podane pa so tudi dodatne možnosti, ki jih lahko izbere. Vsaka izbira dodatne možnosti ustrezno poveča skupno ceno. Pred zaključkom celotne rezervacije se mora strinjati s splošnimi pogoji.. SLIKA 8: Tretji korak rezervacije. 3.2.3 Razvijanje rešitve Pri razvijanju rešitve smo na začetku vtičnik razdelili na komponente. Kot smo že omenili, je vtičnik razdeljen v 3 sekcije. Vsako izmed njih zaseda komponenta oziroma komponente, ki se dinamično spreminjajo glede na trenutni korak rezervacije.. Slika 9 prikazuje strukturo našega projekta. V mapi shared imamo servise, ki si jih komponente delijo, v mapi model pa definiramo modele, ki si jih prav tako delijo. Ostale mape pripadajo posameznim komponentam.. 24.

(39) Komponenta book-step predstavlja del aplikacije, kjer lahko spremljamo, na katerem koraku rezervacije se trenutno nahajamo, komponenta reservation-info pa skozi celoten proces rezerviranja nudi informacije o naši trenutni izbiri. Sledijo komponente za vse tri korake rezervacije. Prva izmed teh je offer-selector, ki omogoča izbiro željene ponudbe. Naslednja je users-info, ki sprejme podatke o uporabniku in jih posreduje zadnji komponenti, ki se imenuje reservation-summary, predstavlja pa povzetek rezervacije in njen zaključek.. SLIKA 9: Struktura projekta. 3.2.3.1 Trenutni korak rezervacije Del vtičnika za trenutnni korak aplikacije omogoča navigiranje med njenimi koraki. Uporabniku je onemogočen prehod na željen korak rezervacije, če za izbran korak še ni izpolnil vseh potrebnih zahtev.. Izvorna koda 21 predstavlja kodo funkcije, ki se sproži ob kliku na posamezni korak. V posebnem servisu hranimo podatke o trenutnem stanju rezervacije (koliko korakov. 25.

(40) rezervacije je uporabnik že opravil, podatke o gostih itd). Do vseh teh podatkov lahko dostopamo preko objekta appState.. selectMenu(index: number) { if ((index - 1) < this.appState.stepsCompleted) { this.menuSelected.emit(this.index); } } IZVORNA KODA 21: Funkcija za spremembo koraka. Izvorna koda 22 prikazuje primer uporabe strukturnih (ngIf) in atributnih (ngStyle) direktiv v. kodi predloge HTML. Med kodo HTML lahko z uporabo interpolacije izpisujemo. trenutno številko koraka in tudi nadziramo barvo ozadja vrstice, ki označuje, koliko korakov rezervacije smo že uspešno opravili.. <div class="row clickable" (click)="selectMenu(index)"> <div class="col-xs-12 nopadding step" [class.cursor-not-allowed]="appState.stepsCompleted < index"> <div class="col-xs-1 col-sm-1 col-md-2"> <div class="progress_bar"> <div class="progress" [style.background-color]="index <= appState.currentStepIndex ? '#f03139' : '#e4e4e4'"> </div> </div> </div> <div class="col-xs-10 col-sm-11 col-md-10"> <div class="step_text"> <div class="step_name" [style.color]="index == appState.currentStepIndex ? '#444444' : '#e4e4e4'"> <span>{{index+1}}.</span> {{title}} <div *ngIf="index < appState.currentStepIndex" class="checkTickSteps"> </div> </div> </div> </div> </div> </div>. IZVORNA KODA 22: Primer uporabe strukturnih in atributnih direktiv. 26.

(41) 3.2.3.2 Informacije o rezervaciji Komponenta, ki skrbi za prikaz informacij o rezervaciji, omogoča, da lahko uporabnik skozi celoten proces rezervacije osveži spomin o svoji izbiri. Podobno kot komponenta za trenutni korak rezervacije je tudi ta komponenta v aplikaciji prisotna skozi celoten proces rezervacije. Izvorna koda 23 prikazuje primer, kako lahko asinhrono spremljamo pritok podatkov s funkcije getOffersById(): s funkcijo subscribe se prijavimo na njo in v anonimni funkciji (vpeljane so bile z ES6 standardom) obdelamo podatke ter jih dodelimo ustreznim spremenljivkam komponente, njihove vrednosti pa kasneje prikažemo v predlogi.. this.pw_destination.getOffersById().subscribe((data: any) => { if(data.destinationM!=null) data = data.destinationM; else data = data.destinationO; if (!isUndefined(data)) { this.loaded = true; if (data.hotelName != null) this.HotelName = data.hotelName; else if (data.destinationName != null) this.HotelName = data.destinationName; if (data.regions) { let regNames = []; for (let i = 0; i < data.regions.length; i++) { if(data.regions[i].visible) regNames.push(data.regions[i].name); } this.Region = regNames.join(", "); } if (data.photos != null && data.photos.length > 0) this.picture = data.photos[0].c300x200; if (data.starRating % 1 != 0) { this.HalfStar = true; data.starRating = data.starRating - 0.5; } for (let i = 0; i < data.starRating; i++) { this.HotelStar.push(i);. 27.

(42) } this.destinationName = data.destinationName; this.rating = data.starRating; } }); IZVORNA KODA 23: Primer asinhronega sprejemanja podatkov. 3.2.3.3 Potek rezervacije Potek rezervacije sestoji iz treh korakov. Pri prvem smo implementirali prikaz seznama ponudb, iz katerega lahko uporabnik izbere ustrezno ponudbo in nadaljuje na naslednji korak rezervacije. Pri izpisu seznama ponudb smo potrebovali veliko funkcionalnosti različnih servisov, zato je bila uporaba prenosa odvisnosti razredov ključnega pomena, da smo izkoristili že definirane funkcionalnosti servisov. constructor(protected offers: OffersService, protected service: GetOffersService, protected searchSteps: SearchStepService, protected urlBuilder: UrlBuilderService, private t: TranslationsService, private appState: BookStepService) { if(this.urlBuilder.type) this.type=this.urlBuilder.type; else this.type="all"; } IZVORNA KODA 24: Primer uporabe prenosa odvisnosti. Število vnosnih polj gostov se dinamično spreminja glede na izbrano število oseb v prvem koraku rezervacije. Število oseb pridobimo tako, da iz parametrov trenutnega naslova spletne strani izluščimo parameter persons, njegova vrednost pa nam predstavlja iskano število. Izvorna koda 25 prikazuje postopek pridobivanja števila vseh oseb, tudi števila otrok (cena za otroka je seveda nižja kot cena za odraslega). Pri logiki pridobivanja parametrov si pomagamo z objektom url razreda UrlHelper, ki vsebuje vso potrebno logiko za delo z nizom trenutnega naslova spletne strani.. if (this.url.get['childAges'] != null) { this.numOfChilds = this.url.get['childAges'].split(',').length; this.childAges = this.url.get['childAges'].split(','); } IZVORNA KODA 25: Pridobivanje števila oseb iz URL parametrov. 28.

(43) Pri izpolnjevanju podatkov gostov so vsa vnosna polja obvezna. Zato smo implementirali sistem za opozorilo in onemogočitev nadaljevanja rezervacije, če podatki niso bili pravilno izpolnjeni. Opozorila se avtomatsko osvežijo ob vsaki spremembi vnosnih podatkov, kar smo dosegli s kodo iz izvorne kode 26. onValueChanged(data?: any) { if (!this.editForm) { return; } const form = this.editForm; for (const field in this.formErrors) { // clear previous error message (if any) this.formErrors[field] = ''; const control = form.get(field); if (control && control.dirty && !control.valid) { const messages = this.validationMessages[field]; for (const key in control.errors) { this.formErrors[field] += messages[key] + ' '; } } } } IZVORNA KODA 26: Koda za spremljanje pravilnosti vnosov. Na sliki 10 je prikazan primer opozorila uporabniku, če so vnosni podatki nepravilni oziroma manjkajoči. V tem primeru je gumb za nadaljevanje rezervacije onemogočen, hkrati pa je izpisano opozorilo in razlog za onemogočitev nadaljevanja rezervacije.. SLIKA 10: Prikaz opozoril pri vnosih. Slika 11 prikazuje izpis opozorila, ko so podatki nepopolno izpolnjeni.. SLIKA 11: Onemogočen gumb za napredovanje in prikaz opozorila. 29.

(44) Po pravilno izpolnjenih vseh vnosnih poljih napredovanje na zadnji korak rezervacije.. se uporabniku omogoči gumb za. Na zadnjem koraku rezervacije je uporabniku predstavljen povzetek celotne rezervacije, ponujena pa mu je tudi možnost za dodatno brezplačno odpoved aranžmaja. Če izbere to možnost, se ustrezno zviša cena rezervacije. Po strinjanju s splošnimi pogoji uporabe je uporabniku omogočen gumb za dokončanje rezervacije. Ob vsaki rezervaciji se za vsak slučaj še enkrat preveri njena razpoložljivost, saj je možnost, da je med postopkom aranžma rezerviral drugi uporabnik. Izvorna koda 27 prikazuje razširjeno kodo HTML za onemogočanje gumba. <button type="submit" [disabled]="!appState.bookingDetails.agreedToTerms || showSpinner" class="btn buttonConcludeReservations"> <i *ngIf="showSpinner" class="fa fa-spinner fa-spin" aria-hidden="true"></i> <span *ngIf="!showSpinner">{{t.__("ZAKLJUČI IN REZERVIRAJ")}}></span </button> IZVORNA KODA 27: Koda za onemogočanje gumba. Po končanju rezervacije se uporabniku prikaže ustrezno obvestilo, čez 5 sekund pa je preusmerjen na domačo stran spletne strani. Izvorna koda 28 prikazuje del funkcije, ki omogoča omenjeno funkcionalnost. } else if (this.currentStepIndex == 2) { this.currentStepIndex = 3; this.stepsCompleted = 3; window.scrollTo(0, 0); if (!this.urlBuilder.isDebugModeOn()) { //če smo v debug mode-u, nočemo redirecta. setTimeout(function () { window.location.href = window.location.origin; }, 5000); } } IZVORNA KODA 28: Preusmeritev uporabnika ob končani rezervaciji. 3.2.3.4 Vključitev vtičnika v sistem Wordpress Implementiran vtičnik je bilo potrebno vključiti v sistem Wordpress. To smo dosegli z uporabo vgrajenih funkcij kot so add_action, add_shortcode, wp_enqueue_script.. 30.

(45) Slika 12 prikazuje strukturo IBE-u Plugin for Wordpress direktorija za vključitev vtičnika v sistem Wordpress. Direktorij dists vsebuje vse potrebne skriptne in stilske datoteke za uporabo vtičnika, v datoteki index.php pa je implementirana logika za njihovo vključitev.. SLIKA 12: Struktura direktorija za vključitev vtičnika v sistem Wordpress. Izvorna koda 29 prikazuje registracijo vseh skriptnih in stilskih datotek. To izvedemo s pomočjo vgrajene funkcije Wordpress, ki se imenuje wp_register_script. Tako smo dosegli, da lahko kasneje vse funkcije vključimo v glavo oziroma nogo spletne strani, ko se med vsebino pojavi kratka koda, ki predstavlja naš vtičnik. To funkcionalnost bomo opisali v nadaljevanju.. function load_scripts_and_styles() { foreach($this->scripts as $i => $script){ if(empty($script)) continue; wp_register_script( __CLASS__+'_sc_'+$i, plugin_dir_url(__FILE__).$script, array(), $this->version, true); //skripte gredo v footer } foreach($this->css as $i => $css){ if(empty($css)) continue;. 31.

(46) wp_register_style( __CLASS__+'_css_'+$i, plugin_dir_url(__FILE__).$css, array(), $this->version); //style-i gredo v header } } IZVORNA KODA 29: Registracija skriptnih in stilskih datotek. V naslednjem koraku smo pri vključitvi vtičnika z vgrajeno funkcijo add_shortcode() registrirali kratko kodo. To zagotovi, da se bo ob pojavitvi med vsebino spletne strani izvedla funkcija insert_BM(), ki poskrbi za vključitev vseh potrebnih predhodno registriranih skript in oznako implementiranega vtičnika. Funkcijo prikazuje izvorna koda 30.. function insert_BM(){ $this->insert_scripts(); return "<uc-ibe-booking-module> <div id='bookingViewWrapper'> <div style='width: 100%; min-height: 300px; text-align: center; padding-top: 130px;' class='loading-spinner'> <i class='fa fa-circle-o-notch fa-5x fa-spin' aria-hidden='true'></i> </div> </div> </uc-ibe-booking-module><div class='clear'></div>"; } IZVORNA KODA 30: Funkcija za vključitev vseh skriptnih datotek in oznako implementiranega vtičnika. Izvorna koda 31 prikazuje uporabo vgrajene funkcije add_shortcode za registracijo kratke kode.. add_shortcode("uc-ibe-booking-module", array($this, 'insert_BM')); IZVORNA KODA 31: Registracija kratke kode Wordpress za vključitev vtičnika. Na koncu smo samo še vključili kratko kodo na spletno stran preko administracije Wordpress. To smo storili tako, da smo v administraciji poiskali stran "Rezerviraj" in v vsebino vnesli ime kratke kode (angl. shortcode) vtičnika za rezervacijo turističnih ponudb.. 32.

(47) V vsebini spletne strani se bo namesto vstavljene kratke kode prikazal vtičnik, s katerim je kratka koda povezana. Vstavitev kratke kode prikazuje slika 13.. SLIKA 13: Vstavitev kratke kode. 33.

(48) 4 SKLEP V diplomskem delu je predstavljena implementacija vtičnika Wordpress za hitro in predvsem enostavno rezervacijo željenega potovanja s pomočje tehnologije Angular 2 in programskega jezika TypeScript. Cilj je bil predstaviti tehnologijo Angular 2 in z njegovo pomočjo zgraditi modularno in skalabilno aplikacijo, ki bo omogočala preprosto vzdrževanje in nadgrajevanje.. Grafični vmesnik aplikacije smo implementirali s pomočjo jezikov HTML in CSS ter ogrodja Bootstrap. Te tehnologije smo nato povezali z jezikom TypeScript in tehnologijo Angular 2, ki omogoča enostavno implementacijo interakcije grafičnega vmesnika z uporabnikom in moderen pristop h komunikaciji s strežnikom, ki deluje kot sredstvo za dosego večje skalabilnosti in večje količine uporabnikov.. Angular tehnologijo je podprlo podjetje Google, zato ni bojazni, da v prihodnosti ne bo rednih posodobitev, torej je bila to za nas dolgoročno zelo dobra izbira. A omeniti moramo, da se veliko razvijalcev odloči za tehnologijo React.js, ki jo podpira podjetje Facebook. Eden izmed glavnih razlogov je ta, da se pri tehnologiji React.js ni potrebno toliko učiti kot pri tehnologiji Angular, kar se podjetju pri dragih programerskih urah dolgoročno izplača. Med drugim so številni razvijalci skeptični glede ekipe, ki razvija Angular, saj je med verzijo 1.6 in 2 prišlo do tako korenitih sprememb, da je prehod aplikacij na novo tehnologijo pomenilo ponovno pisanje celotne kode. Vendar nas minimalne razlike med verzijo 2 in 4 ter predvsem preprostejša sintaksa navdajajo z optimizmom za prihodnost tehnologije Angular.. Prišli smo do spoznanja, da je tehnologija Angular 2 zelo primerna za implementacijo enostranskih aplikacij, saj s svojimi naprednimi funkcionalnostmi programerju olajša implementacijo dinamičnih in interaktivnih funkcionalnosti. Modularen pristop k programiranju tudi omogoča delitev aplikacije na module, kar je ključnega pomena pri produkciji in vzdrževanju večjih projektov. Razvoj dodatno olajšajo prosto dostopne knjižnice.. 34.

(49) Tehnologija Angular 2 torej zadosti vsem pogojem, zastavljenim na začetku diplomske naloge, in tako predstavlja učinkovit in skalabilen način implementacije spletnih aplikacij.. 35.

(50) 5 VIRI IN LITERATURA [1] Angular, Dostopno na: https://angular.io/. [17.7.2017] [2] Matt West, HTML5 Foundations. Dostopno na: https://doc.lagout.org/HTML5 Foundations/HTML5 Foundations.pdf. [15.7.2017] [3] Louis Lazaris, JUMP START CSS. Dostopno na: http://smtebooks.com/view/1339/jump-start-css-pdf. [15.7.2017] [4] CSS selectors. Dostopno na: https://www.w3schools.com/cssref/css_selectors.asp. [15.7.2017] [5] TypeScript tutorial. Dostopno na: https://www.tutorialspoint.com/typescript/typescript_tutorial.pdf. [16.7.2017] [6] Steve Fenton, TypeScript Succinctly. Dostopno na: http://www.mondeil.fr/Documents/eBooks/Succintly/TypeScript_Succinctly.pdf. [16.7.2017] [7] TypeScript language. Dostopno na: https://www.typescriptlang.org/docs/. [16.7.2017] [8] Rangle's Angular 2 Training Book. Dostopno na: https://www.gitbook.com/book/rangle-io/ngcourse2/details, Rangle's Angular 2 Training Book. [16.7.2017] [9] Angular 2. Dostopno na: https://www.tutorialspoint.com/angular2/. [16.7.2017] [10] Angular 2 a quick intro about template syntax. Dostopno na: https://medium.com/front-end-hacking/angular-2-a-quick-intro-about-template-syntax121f9b160a64. [16.7.2017] [11] Wordpress. Dostopno na: https://wordpress.org/. [23.7.2017] [12] Basic Building Blocks of Angular 2 Architecture. Dostopno na: https://dzone.com/articles/components-of-angular2-architecture. [25.7.2017] [13] Learn Angular 2. Dostopno na: http://learnangular2.com/. [23.7.2017]. 36.

(51)

(52)

(53)

(54)

(55)

(56)

No results found