Using the programming language TypeScript for the development of modern web solutions

Full text

(1)UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO, RAČUNALNIŠTVO IN INFORMATIKO. Nejc Korošec. UPORABA PROGRAMSKEGA JEZIKA TYPESCRIPT ZA RAZVOJ SODOBNIH SPLETNIH REŠITEV. Diplomsko delo. Maribor, september 2018.

(2)

(3) UPORABA PROGRAMSKEGA JEZIKA TYPESCRIPT ZA RAZVOJ SODOBNIH SPLETNIH REŠITEV Diplomsko delo. Študent:. Nejc Korošec. Študijski program:. Visokošolski študijski program Informatika in tehnologije komuniciranja. Smer:. Razvoj informacijskih sistemov. Mentor:. doc. dr. Domen Verber, univ. dipl. inž. rač. in inf. i.

(4) ZAHVALA. Zahvaljujem se mentorju doc. dr. Domnu Verberu za vodenje in pomoč pri opravljanju diplomskega dela. Posebna zahvala gre moji družini, ki mi je omogočila študij, in vsem prijateljem za podporo in pomoč tekom študija.. ii.

(5) Uporaba programskega jezika TypeScript za razvoj sodobnih spletnih rešitev. Ključne besede: Spletne aplikacije, skriptni jezik, TypeScript, Angular. UDK: 004.43:004.774(043.2). Povzetek V diplomskem delu je predstavljen skriptni programski jezik TypeScript, ki ga uporabljamo za ustvarjanje sodobnih spletnih aplikacij. Na začetku naloge je razložen namen in pomen skriptnih jezikov. V drugem delu sledi podrobna predstavitev programskega jezika TypeScript, opisane so najpomembnejše lastnosti in funkcionalnosti jezika. Sledi primerjava s skriptnim jezikom JavaScript, kjer na primerih ugotovimo, kateri je primernejši za uporabo. V zadnjem delu s pomočjo tehnologije Angular, ki za izgradnjo uporablja jezik TypeScript, ustvarimo aplikacijo.. iii.

(6) Using the programming language TypeScript fort he development of modern web solutions. Key Words: Web applications, scripting language, TypeScript, Angular. UDK: 004.43:004.774(043.2). Abstract This diploma thesis presents scripting programming language TypeScript, which is used for the development of modern web applications. At the beginning, we explain the purpose and meaning of scripting languages. In the second part we take a closer look at programming language TypeScript and describe its most important features and functionalities. In the next part we compare the suitability for certain applications of programming languages JavaScript and its superset TypeScript. In the last part we examine the development process of a simple application we've developed of which the user interaction and application logic are implemented in Angular technology and TypeScript language.. iv.

(7) KAZALO 1. UVOD ............................................................................................................................. 1. 2. SKRIPTNI JEZIKI ZA RAZVOJ SODOBNIH SPLETNIH STRANI ............................................ 3. 3. TYPESCRIPT .................................................................................................................... 8. 4. 3.1. TypeScript in JavaScript .................................................................................................... 12. 3.2. Posebnosti programskega jezika TypeScript .................................................................... 15. 3.3. Transformacija kode TypeScript v kodo JavaScript .......................................................... 25. IZDELAVA PRAKTIČNEGA IZDELKA ............................................................................... 30 4.1. Razvojna okolja................................................................................................................. 30. 4.2. Angular ............................................................................................................................. 31. 4.3. Izdelava izdelka ................................................................................................................ 32. 4.3.1. Implementacija poti ..................................................................................................... 33. 4.3.2. Dodajanje modela, servisa in pregled predmetov ....................................................... 36. 4.3.3. Dodajanje predmetov .................................................................................................. 38. 4.3.4. Posodabljanje predmetov ............................................................................................ 41. 4.3.5. Brisanje predmeta ........................................................................................................ 43. 4. SKLEP............................................................................................................................ 46. 5. VIRI IN LITERATURA ..................................................................................................... 47. KAZALO SLIK Slika 1: Prikaz razvoja na odjemalčevem delu [15] ............................................................... 6 Slika 2: Popularnost programskih jezikov med februarjem 2017 in februarjem 2018 [16] . 7 Slika 3: Primerjava skriptnih jezikov TypeScript, CoffeeScript in Dart [17] ........................ 10 Slika 4: Komponente TypeScript-a [12] .............................................................................. 12 Slika 5: TypeScript in JavaScript [12] .................................................................................. 12 v.

(8) Slika 6: Delitev podatkovnih tipov TypeScript ..................................................................... 16 Slika 7: Arhitektura ogrodja Angular [14] ........................................................................... 32 Slika 8: Prikaz v brskalniku ................................................................................................... 33 Slika 9: Prikaz predmetov .................................................................................................... 38 Slika 10: Kreiranje novega predmeta .................................................................................. 40 Slika 11: Posodabljanje predmeta ....................................................................................... 43 Slika 12: Dodan gumb izbriši ................................................................................................ 45. KAZALO TABEL Tabela 1: Razlike med drugimi programskimi jeziki in skriptnim jezikom............................. 4 Tabela 2: Tabela podatkovnih tipov .................................................................................... 17. KAZALO PROGRAMSKIH KOD Programska koda 1: Razlika med JavaScript in TypeScript funkcijo .................................... 13 Programska koda 2: Razlika med var in let spremenljivkama ............................................. 15 Programska koda 3: Spremenljivka const ........................................................................... 16 Programska koda 4: Implementacija vmesnika ................................................................... 20 Programska koda 5: Implementacija razreda ...................................................................... 21 Programska koda 6: Dedovanje ........................................................................................... 23 Programska koda 7: Dedovanje ‒ nadaljevanje .................................................................. 24 vi.

(9) Programska koda 8: Gumb z napisom – TypeScript ............................................................ 26 Programska koda 9: Gumb z napisom – JavaScript ............................................................. 26 Programska koda 10: Prehojena razdalja živali – TypeScript .............................................. 27 Programska koda 11: Prehojena razdalja živali ‒ Javascript ............................................... 28 Programska koda 12: Nastavitve v modulu app .................................................................. 34 Programska koda 13: Dodajanje poti v app-routing. module.ts ......................................... 35 Programska koda 14: Prikaz kode HTML domače strani ..................................................... 35 Programska koda 15: Model Predmet................................................................................. 36 Programska koda 16: Servis predmeti s funkcijo branja podatkov ..................................... 36 Programska koda 17: Komponenta Predmeti ..................................................................... 37 Programska koda 18: *ngFor in izpis predmetov na zaslon ................................................ 38 Programska koda 19: Izdelava obrazca HTML za dodajanje predmetov ............................ 39 Programska koda 20: Dodajanje predmetov ‒ komponenta in onSubmit.......................... 40 Programska koda 21: Funkcija za dodajanje novih predmetov .......................................... 40 Programska koda 22: Posodabljanje predmetov ‒ koda HTML .......................................... 41 Programska koda 23: Funkciji za pridobitev predmeta in posodabljanje ........................... 42 Programska koda 24: Posodobitev predmeta – komponenta ............................................ 42 Programska koda 25: Dodajanje gumba za izbris predmeta ‒ koda HTML........................ 44 Programska koda 26: Metoda za izbris – komponenta ....................................................... 44 Programska koda 27: Funkcija za izbris – servis .................................................................. 44. vii.

(10) SEZNAM UPORABLJENIH KRATIC HTML – označevalni jezik za izdelavo spletnih strani (ang. HyperText Markup Language) CSS – jezik, ki skrbi za prezentacijo spletnih strani (ang. Cascading Style Sheets) PHP – jezik, ki se uporablja za strežniške namene oziroma razvoj dinamičnih spletnih vsebin (ang. Hypertext Preprocessor) TLS – jezikovni servis TypeScript-a (ang. TypeScript Language Service) SOLID načela – v objektno orientiranem programiranju izraz SOLID predstavlja pet oblikovalskih principov (vsaka črka ima svoj pomen), katerih namen je, da naredijo programsko kodo bolj razumevajočo, prilagodljivo in vzdržljivo (ang. SOLID principles) OOP – objektno orientirano programiranje (ang. Object-oriented programming) VS code – razvijalno okolje Visual Studio Code Angular CLI – orodje za inicializacijo, razvoj in vzdrževanje Angular aplikacij. viii.

(11) 1. UVOD. Svet sodobnih spletnih tehnologij se zelo hitro razvija. Iz dneva v dan se pojavljajo boljše, hitrejše in enostavnejše rešitve, ki jih je dobro vključiti v spletne strani, saj nam omogočajo hitrejše delovanje in s tem izboljšajo uporabniško izkušnjo. Da pa je uporabniška izkušnja čim boljša, pa v veliki meri skrbi sprednji del spletnih strani oziroma del odjemalca. Na strani odjemalca je zraven programskega jezika HTML in CSS zelo pomemben tudi jezik JavaScript. Brez JavaScript-a trenutno ne moremo ustvariti sodobne spletne strani. Kljub temu da je eden izmed najbolj pomembnih spletnih jezikov, pa je tudi težek za razumevanje in učenje. Največji problemi nastanejo, ker uporabniki ne morejo določiti podatkovnega tipa, problemi pri objektnem programiranju, saj ni mogoče direktno definirati razreda, kar pomeni, da koda zelo hitro postane nepregledna. To so najpomembnejši razlogi, zakaj je razumevanje in učenje težje kot pri drugih programskih jezikih [1]. Zaradi teh in drugih slabosti so se skozi leta začele uporabljati alternative. Nekatere izmed teh so bile le nadgradnja JavaScript-a, druge popolnoma nov programski jezik. Med njimi najdemo tudi programski jezik TypeScript, ki je bil le nadgradnja JavaScripta. TypeScript je tipizirana nadmnožica JavaScript-a, ki je bil izdelan z namenom izdelovanja sodobnih spletnih strani. Kot lahko že z imena vidimo, gre za jezik, ki nam ponuja izbiro podatkovnega tipa, kar je velika prednost proti drugim spletnim skriptnim jezikom.. Namen diplomske naloge je raziskati in preučiti programski jezik TypeScript ter ugotoviti, ali je TypeScript primeren programski jezik za razvoj sodobnih spletnih strani. Ugotoviti, kdaj in zakaj se odločiti za uporabo TypeScript-a, za kakšne spletne aplikacije ga je primerno uporabiti ter katere so največje razlike med drugimi programskimi jeziki in TypeScript-om.. 1.

(12) Diplomsko delo je sestavljeno iz štirih poglavij. V naslednjem poglavju bomo spoznali, kaj skriptni jeziki sploh so. Osredotočili se bomo na spletne skriptne jezike, ugotovili, zakaj in kje se uporabljajo ter opisali enega izmed najbolj popularnih. V tretjem poglavju bomo spoznali programski jezik TypeScript in njegove najpomembnejše lastnosti ter naredili nekaj primerjav s programskim jezikom JavaScript. Na koncu bomo izdelali preprosto aplikacijo, ki bo temeljila na programskem jeziku TypeScript.. 2.

(13) 2. SKRIPTNI JEZIKI ZA RAZVOJ SODOBNIH SPLETNIH STRANI. V začetku internetne revolucije so spletne strani temeljile samo na programskem jeziku HTML. Spletne strani so bile takrat po izgledu dokaj izpopolnjene, vendar niso imele tako bogate funkcionalnosti, kot smo je vajeni danes. Z razvojem spletnih strani se je začel razvijati tudi spletni skriptni jezik in z njim dinamičnost spletnih strani. Sedaj si verjetno ne moremo predstavljati sodobne spletne strani, v kateri ne bi bil vključen vsaj del skriptnega jezika. Vendar pa se skriptni jezik ni razvil z internetno revolucijo, uporabljali so ga že kakšnih 30 let pred tem, bil je namreč sestavni del skoraj vsakega operacijskega sistema [2]. Takrat je bil sicer zelo pomemben del v računalništvu, kljub temu pa ni bil tako popularen, kot je zadnjih 10‒15 let. Sedaj skriptne jezike uporabljamo na več področjih: • za izdelavo grafičnih uporabniških vmesnikov, • za izdelavo spletnih strani, • za povezovanje komponent. Med naštetimi se skriptni jeziki trenutno najbolj uporabljajo pri izdelavi sodobnih spletnih strani, kjer so nepogrešljiv člen. Z njimi naredimo spletne strani veliko bolj privlačne za uporabnike, saj nam omogočajo ustvarjanje dinamičnih ter vsebinsko in funkcionalno bogatejših strani. To pa seveda ni edina prednost skriptnih jezikov. Druge prednosti skriptnih jezikov [3]: • Odprta koda nam omogoča, da po potrebi vidimo in urejamo skripto. • Ne potrebujemo prevajalnika. • Zlahka jih uporabljamo/prenašamo na vseh operacijskih sistemih. • Veliko hitreje jih razvijemo kot dejanske programe. 3.

(14) Slabosti skriptnih jezikov: • V nekaterih situacijah so počasnejši kot programi s prevajalnikom. • Zahteva, da pred izvajanjem namestite interpreter (tolmač) ali drug program. • Odprta koda omogoča drugim uporabnikom, da vidijo vašo skripto. Da pa ne pozabimo omeniti, skriptni jezik ni svoje vrste jezik, je prav tako običajen programski jezik z nekaj posebnostmi. Ena izmed teh, po čem se drugi programski jeziki najbolj razlikujejo od skriptnih [3]: • drugi jeziki uporabljajo prevajalnik, da pred izvedbo prevede programsko kodo, • skriptni jeziki ne potrebujejo prevajalnika, saj njihovo kodo ob izvedbi prevede drug program. Za boljšo predstavo lahko vzamemo primer skriptnega jezika JavaScript. in. »neskriptnega« jezika C. Pred izvedbo programa C se mora koda s prevajalnikom najprej prevesti, da dobimo rezultat, med tem ko pri JavaScript-u to ni potrebno. Glavne razlike med programskim in skriptnim jezikom [4]. Tabela 1: Razlike med drugimi programskimi jeziki in skriptnim jezikom. Programski jezik Uporaba. Izdelava nečesa novega. Skriptni jezik Za združevanje obstoječih komponent. Izvedba. Ni odvisen od izvajanja drugih. Izvede se v drugem programu. programov Namen. Prevajanje. Narejen za polno uporabo v. Narejen za hitrejše in. programiranju. enostavnejše programiranje. Pred začetkom izvajanja se mora. Ni potrebe po prevajanju. prevesti. 4.

(15) Sedaj, ko smo spoznali nekaj glavnih lastnosti skriptnih jezikov, se lahko osredotočimo na tiste, ki jih uporabljamo za izdelavo spletnih strani. Kot smo že omenili, se skriptni jeziki zadnjih nekaj let najbolj uporabljajo na tem področju. Pri izdelavi sodobnih spletnih strani, kjer je stran povezana s podatkovno bazo, se delo deli na dva dela. Prvi del smo že omenili v uvodu, in sicer odjemalčev del. Drugi del pa imenujemo strežniški del. V obeh primerih skriptni jeziki pridejo do izraza. Strežniški del ali server-side, kot je največkrat poimenovan, je del, ki ga uporabnik ne more videti v brskalniku. Gre za del, ki nam pove, kako stran deluje, se posodablja in spreminja. Programerji strežniškega dela se največkrat ukvarjajo s podatkovnimi bazami in serverji, kjer skrbijo za varnost, strukturo in upravljanje vsebine strani. V veliki meri uporabljajo skriptne jezike. Najbolj popularni so: PHP, PYTHON in RUBY [5]. Odjemalčev del ali client-side je tisti del, ki ga uporabnik lahko vidi in z njim komunicira. Je zelo pomemben, saj je od njega odvisna uporabniška izkušnja. Ta del pa lahko razdelimo še na dva dela. Na del, kjer ga z različnimi slikarskimi programi načrtujemo, in na del, kjer ga s skriptnim jezikom ter pomočjo HTML-ja in CSS-a izdelamo. Osredotočili se bomo na del, kjer ga izdelamo. Izdelava spletne strani v glavnem poteka tako, da si s pomočjo jezika HTML izdelamo ogrodje strani, kasneje z jezikom CSS oblikujemo stran in nato s pomočjo skriptnega jezika vse skupaj povežemo in poživimo stran z dinamičnostjo. Najbolj uporabljen skriptni jezik v odjemalčevem delu je že dolga leta JavaScript, iz katerega izhaja tudi TypeScript, o katerem bomo več izvedeli v naslednjem poglavju. Za zelo uporabljene skriptne jezike sta se izkazala tudi CoffeScript in Dart, vendar nista kos TypeScript-u in JavaScript-u.. 5.

(16) Slika 1: Prikaz razvoja na odjemalčevem delu [15]. Slika 1 prikazuje, kako se skriptni jeziki izvedejo in komunicirajo s strežniškim delom. Za lažjo predstavo v naslednjem poglavju bomo na kratko opisali JavaScript. JavaScript je objektni programski jezik, ki ga je 1995 razvila družba Netscape. Trenutno je eden najpopularnejših programskih jezikov, ki ga podpirajo vsi brskalniki. Omogoča nam, da izdelamo kompleksne spletne strani. Vsakič, ko vidimo spletno stran, ki ne prikazuje samo statičnih podatkov, smo lahko prepričani, da je bila izdelana s pomočjo JavaScript-a. Kot primer lahko naštejemo nekaj takšnih lastnosti strani, ki vključujejo delo JavaScript-a: pravočasne posodobitve vsebine, napredni zemljevidi, animirana 2D/3D grafika in podobno [6].. 6.

(17) Slika 2: Popularnost programskih jezikov med februarjem 2017 in februarjem 2018 [16]. Da so skriptni jeziki zelo popularni, prikazuje tudi slika 2. Slika prikazuje popularnost programskih jezikov med februarjem 2017 in februarjem 2018. Vidimo lahko kar šest skriptnih jezikov, med katerimi so Python, PHP, JavaScript na prvih mestih. Med njimi je tudi Ruby, ki zaseda 11 mesto, takoj za njim pa TypeScript, ki se mu, kot lahko razberemo s slike, popularnost zelo dviguje. Na zadnjem mestu pa zasledimo še nekoliko manj znani skriptni jezik Scala.. 7.

(18) 3. TYPESCRIPT. TypeScript je tako programski jezik, kot nabor orodij za generiranje JavaScript-a. Z drugimi besedami lahko rečemo, da je TypeScript JavaScript z dodanimi funkcijami. Zasnovan je bil pri podjetju Microsoft s strani Andersa Hejlsberga ‒ znan tudi kot snovalec programskega jezika C# [8]. Kot smo že videli v drugem poglavju na sliki 2, TypeScript zelo hitro pridobiva na popularnosti. To lahko potrdimo s podatkom, da se jezik JavaScript počasi pomika tudi na strežniški del razvoja. Z učinkovitim razvojem jezika Node.js je JavaScript postal zelo uporaben in učinkovit na strežniški strani, čeprav je bil prvotno namenjen izvajanju na odjemalčevi strani. Ko govorimo o večjih aplikacijah, ki vključujejo JavaScript, velikokrat pride do težav, saj je koda JavaScript težka za vzdrževanje ter ponovno uporabo, kar je bil tudi eden izmed povodov za izdelavo jezika TypeScript [7]. Sedaj bomo spoznali glavne razloge izdelave jezika TypeScript ter arhitekturno odločitev, ki je naredila jezik takšen, kot ga poznamo danes [9]: • Dinamičnost tipov JavaScript, ki je velikokrat vodila do napak. Microsoftovi inženirji so se odločili, da je najboljši način za prepoznavanje in preprečevanje morebitnih težav v času izvajanja, da ustvarijo močno tipizirani programski jezik in opravijo pregled tipa v času prevajanja. Izdelali so tudi storitev, ki programerjem omogoča uporabo boljših in sodobnejših orodij. • Močno kompatibilen z obstoječo kodo JavaScript. TypeScript je superset JavaScripta, kar pomeni, da je vsak veljaven program JavaScript tudi veljaven program TypeScript (z nekaj majhnimi izjemami). • Zagotoviti strukturiran mehanizem za aplikacije z veliko vrsticami kode. TypeScript je objektno orientiran jezik, kar pomeni, da lahko dodajamo razrede, vmesnike in module. Te lastnosti nam zelo pomagajo pri strukturiranju kode.. 8.

(19) Microsoftovi inženirji so in bodo kodo z uporabo najboljših objektno orientiranih načel in praks še v prihodnje delali veliko lažjo za vzdrževanje in ponovno uporabo. • Hiter čas izvajanja. Pri delu z TypeScript-om je moč razlikovati čas načrtovanja in čas izvajanja. Čas načrtovanja ‒ koda, ki jo napišemo, med tem ko načrtujemo in izdelujemo aplikacijo. Čas izvajanja ‒ se nanaša na kodo JavaScript, ki je izvedena po transformaciji iz kode TypeScript. TypeScript doda funkcije JavaScript-u, vendar so te lahko vidne samo pri načrtovanju oz. pisanju kode. Primer: lahko dodamo vmesnik v TypeScript, ampak ker JavaScript ne podpira vmesnikov jih TypeScript prevajalnik ne bo deklariral pri transformaciji v kodo JavaScript. O tem bomo več izvedeli v poglavju 3.3. • Zagotoviti dober prevajalnik. Microsoftovi inženirji so prevajalniku TypeScript zagotovili mehanizem, ki transformira kodo in izbriše podatkovne tipe, tako da ustvari čisto kodo JavaScript. Izbris tipa odstrani tudi ostale dodatne funkcije, ki jih ima jezik TypeScript, npr.: vmesniki, razredi in podobno. • TypeScript podpira ECMAScript, kar pomeni da ni združljiv samo z obstoječo kodo JavaScript, ampak bo tudi v prihodnje združljiv z naslednjimi verzijami JavaScript-a. Dodatne funkcije TypeScripta so v veliki meri odvisne od ECMAScript-a. • Biti razvojno orodje na vseh platformah. Miscrosoft je izdal TypeScript pod odprto izvorno licenco podjetja Apache in ga je mogoče namestiti in izvajati na vseh večjih operacijskih sistemih.. 9.

(20) Z zgoraj naštetimi razlogi se je že vnaprej vedelo, da bo TypeScript zelo velika konkurenca sebi podobnim jezikom, kot sta Dart in CoffeScript. S svojimi prednostmi je TypeScript tako postal eden najpopularnejših skriptnih jezikov.. Slika 3: Primerjava skriptnih jezikov TypeScript, CoffeeScript in Dart [17]. Slika 3 prikazuje primerjavo TypeScripta, CoffeeScript in Darta. Časovni razmik je približno pet let (3. 3. 2013–1. 3. 2018), nekje od ustanovitve TypeScripta (uradno 1. 10. 2012). Iz slike lahko razberemo, da je TypeScript hitro prevzel glavno vlogo jezika na odjemalčevi strani. Prednosti TypeScript-a [8] [7]: • Prevajanje – ena izmed največjih težav JavaScript-a je manjkajoč prevajalnik, kar pomeni, da moramo aplikacijo zagnati, če želimo izvedeti, ali deluje pravilno. Vsak razvijalec JavaScript-a ima s tem zagotovo slabe izkušnje, saj lahko zapravi ure in ure z iskanjem napake, na koncu pa se izkaže, da mu je manjkala samo vejica, zaprti oklepaj, ali pa bi morda moral uporabiti enojne narekovaje tam, kjer je uporabil dvojne. Zaradi takšnih in drugačnih slabih izkušenj so se pri TypeScript-u odločili, da dodajo prevajalnik. TypeScript prevajalnik nam tako prevede kodo in generira sintaktične napake v primeru, da so prisotne. To nam lahko prihrani veliko časa, saj takoj najdemo napake, ki jih lahko popravimo, še preden zaženemo aplikacijo. • Močno tipiziran jezik – omogoča nam opcijsko izbiro tipa, ter nam ponuja sistem za sklepanje tipov z jezikovnim servisom TLS-om, o katerem bomo povedali več pri 10.

(21) komponentah TypeScript. Torej servis TLS lahko spremenljivki brez tipa določi tip glede na njeno vrednost. • Podpira obstoječe knjižnice JavaScript – definicijska datoteka TypeScript s končnico .d.ts omogoča definicije za povezavo z drugimi zunanjimi knjižnicami JavaScript. • Je objektno orientirani – omogoča nam uporabo razredov, vmesnikov in drugih prednosti objektnih jezikov. • Podpira zasebne in javne spremenljivke – nadaljnjo objektno orientirano načelo, ki se uporablja, je koncept skrivanja podatkov. Sposobnost, da lahko spravljivkam določimo dostopnost/vidnost, nam pri večjih projektih lahko zelo pomaga. • Prenosljivost – je prenosljiv med operacijskimi sistemi, napravami in brskalniki.. Za uporabo TypeScripta pa je dobro vedeti, kako je jezik sestavljen. TypeScript je sestavljen iz treh komponent [9] [7]: • Jezik – vsebuje vse elemente jezika TypeScript. • Prevajalnik – izvaja analizo, kjer preverja podatkovne tipe ter transformira TypeScript v JavaScript. • Jezikovni servis (ang. TLS) – generira informacije, ki pomagajo urejevalnikom ali drugim. orodjem. boljšo. asistenco. (avtomatsko. prefakturiranje,. uporaba. IntelliSense ipd.).. 11.

(22) Slika 4: Komponente TypeScript-a [12]. Na sliki 4 vidimo, kako so komponente TypeScripta med seboj povezane.. 3.1. TypeScript in JavaScript. Kot smo že omenili, je TypeScript samo JavaScript. TypeScript se začne in konča z JavaScript-om. Prevzame vse osnovne stavke in bloke kode JavaScript. Če dovolj dobro poznamo jezik JavaScript, lahko brez težav uporabljamo TypeScript. JavaScript pa je tudi samo TypeScript. Vsaka veljavna datoteka s končnico .js (JavaScript datoteka) se lahko preimenuje v datoteko s končnico .ts (TypeScript datoteka) in se prevede kot datoteka TypeScript [7].. Slika 5: TypeScript in JavaScript [12]. Slika 5 prikazuje, da je TypeScript samo nadmnožica jezika JavaScript.. 12.

(23) Vendar pa je med jezikoma tudi nekaj razlik. Vsak jezik ima svoje prednosti in slabosti, dobro je vedeti, kdaj je dobro katerega izmed njiju uporabiti. Največja razlika med jezikoma TypeScript in JavaScript so podatkovni tipi. Na enostavnem primeru bomo pokazali, kako je določanje tipov lahko zelo koristno. Napisali bomo funkcijo za seštevanje dveh števil.. Programska koda 1: Razlika med JavaScript in TypeScript funkcijo. Programska koda 1 prikazuje primerjavo jezika TypeScript in JavaScript. Funkciji sta napisani v orodju WebStorm, ki že vključuje prevajalnik TypeScript. Na levi strani lahko vidimo funkcijo JavaScript, ki nam ne dopušča uporabe podatkovnih tipov. Na desni strani vidimo funkcijo TypeScript, ki smo ji določili tip number in spremenljivki, ki sta prav tako tipa number – o TypeScript podatkovnih tipih bomo povedali več v naslednjem podpoglavju. Že na sliki lahko vidimo, da klic funkcije ni pravilen, saj v prvem parametru nimamo števila. V primeru, da zaženemo JavaScript kodo, bomo kot rezultat dobili niz znakov: asd, kar pa seveda ni pravilno. Kode TypeScript pa za razliko od kode JavaScript ne moremo zagnati, saj nam prevajalnik to prepoveduje – dobimo samo informacijo, da prvi parameter asd ni tipa number, kar nam tudi preprečuje zagon kode. V tem primeru lahko napako pri obeh funkcijah najdemo takoj, brez kakršne koli pomoči prevajalnika, saj so samo štiri vrstice kode. Ko pa govorimo o več sto vrsticah kode, je pa veliko težje poiskati napako, to še posebej velja za JavaScript. Na sliki lahko vidimo, da nam je prevajalnik pri TypeScript obarval napako, in s tem takoj najdemo napako. Med tem ko pri primeru JavaScript izgleda vse pravilno, lahko smatramo, da je koda pravilno napisana, dokler je ne zaženemo in vidimo, da ne deluje tako, kot smo pričakovali. S tem nam prevajalnik TypeScript velikokrat olajša in skrajša delo. Podatkovni tipi pa niso edina boljša lastnost TypeScript-a pred JavaScript-om. 13.

(24) Zakaj in kdaj uporabiti TypeScript [10]: • Zaradi objektne orientiranosti – razvijalci lahko uporabljajo razrede, vmesnike, dedovanja, kar lahko v veliki meri olajša delo in pomaga k boljšemu pregledu kode. • Preverjanje pred zagonom aplikacije – ker TypeScript uporablja prevajalnik, nam napake javi že pred zagonom aplikacije, to še posebej pomaga pri veliki količini kode. • Delo z novejšimi knjižnicami ali ogrodji – zaradi svoje popularnosti se veliko uporablja v sodobnejših ogrodjih. Uporablja ga tudi Angluar, ki je trenutno eno izmed najbolj popularnih ogrodjih za razvoj enostranskih spletnih aplikacij. • Za velike projekte – s svojo objektno orientiranostjo ter dobro strukturo ima TypeScript veliko bolj pregledno kodo kot JavaScript, zato ga je zelo dobro uporabiti pri večjih projektih. Seveda pa ima JavaScript tudi nekatere prednosti pred TypeScript-om. Veliko razvijalcev še vedno raje uporabi JavaScript, saj je v določenih primerih veliko boljši. Zakaj in kdaj uporabiti JavaScript: • za manjše projekte – za razliko od TypeScript-a je JavaScript zelo dobro uporabiti v manjših projektih, • kadar je potreben precizen postopek testiranja – če imamo ekipo JavaScript razvijalcev, ki že ima dober postopek testiranja, potem preklop na TypeScript ni dobra ideja, • uporabo klasičnih ogrodij – velikokrat pride tudi do tega, da ogrodje ne podpira jezika TypeScript (še posebej pri starejših ogrodjih) in tedaj je dobro, da uporabimo JavaScript.. 14.

(25) 3.2. Posebnosti programskega jezika TypeScript. Kot smo že v nalogi omenili, pod posebnosti oziroma prednosti TypeScript-a štejemo čas izvajanja, objektno orientiranost ter prevajalnik, ki ga bomo spoznali v naslednjem podpoglavju. V tem podpoglavju se bomo osredotočili na objektno orientiranost. Podrobneje bomo spoznali razrede, vmesnike in dedovanje. Da pa bomo lažje razumeli te pojme, bomo pred tem predstavili osnove. Pokazali bomo, kako deklariramo spremenljivke ter kakšne podatkovne tipe poznamo. Spremenljivke v TypeScript-u lahko deklariramo na tri načine. Z uvedbo ECMAScripta6 smo zraven spremenljivke var dobili še spremenljivki let in const, ki sta bili namenjeni za zamenjavo spremenljivke var. Const ali konstanta je spremenljivka, ki ji ob deklaraciji ne moremo spreminjati vrednost. Let je spremenljivka, ki ji lahko poljubno spreminjamo vrednost. Spremenljivka let se nanaša samo na tisti funkcijski blok, v katerem je definirana. Spremenljivki var lahko enako kot spremenljivki let spreminjamo vrednosti, vendar je razlika v tem, da se let nanaša na funkcijski blok, med tem ko se spremenljivka var ne. Sedaj bomo še na primerih pokazali razlike med spremenljivkami.. Programska koda 2: Razlika med var in let spremenljivkama. Programska koda 2 prikazuje razliko med spremenljivkama let in var. Kot lahko vidimo na sliki se spremenljivka let nanaša samo na funkcijski blok (desna stran slike), med tem ko se spremenljivka var ne (leva stran slike).. 15.

(26) Programska koda 3: Spremenljivka const. Programska koda 3 prikazuje tri različne primere deklaracije spremenljivke const. V prvem primeru lahko vidimo, da smo deklarirali konstanto i, ki ji kasneje ne moremo spreminjati vrednosti. Drugi primer nam prikazuje, da ne moremo deklarirati konstante brez vrednosti. V tretjem primeru nam programska koda prikazuje, da se konstanta, prav tako kot spremenljivka let, nanaša samo na en funkcijski blok. Sedaj, ko smo boljše spoznali deklaracijo spremenljivk, bomo opisali še podatkovne tipe. Skozi nalogo smo že lahko videli, da nam podatkovni tipi velikokrat pridejo v pomoč ter nam prihranijo veliko časa pri iskanju napak. Podatkovne tipe TypeScript delimo na dva dela, in sicer na vgrajene tipe in uporabniško definirane tipe. Vsi ti tipi so podmnožica super tipa any [7].. Slika 6: Delitev podatkovnih tipov TypeScript. 16.

(27) Slika 6 prikazuje delitev podatkovnih tipov v jeziku TypeScript. Tabela 2: Tabela podatkovnih tipov. Podatkovni tip. Opis. String. Za prikaz besedila v TypeScript-u uporabimo tip string. Uporabimo ga tako, da ga zapremo v enojne ali dvojne narekovaje. Dvojni narekovaji lahko vsebujejo znake z enojnimi narekovaji in obratno. var ime: string = "janez"; ime = 'nejc';. Number. Enako kot v JavaScript-u so vsa števila vrednosti s plavajočo vejico. Ta števila dobijo tip number. var steviloGolov: number = 8;. Boolean. Med tem ko lahko imata string in number neomejeno število različnih vrednosti, ima boolean samo dve. Gre za logični operator, ki ima vrednosti true (resnična) in false (napačna). var pravilno: boolean = true;. Null. Tip null je poseben podatkoven tip TypeScript-a, uporabimo ga takrat, ko je spremenljivka znana, vendar nima nobene vrednosti. var besedilo: string = null;. Undefined. Prav tako je tip undefined posebnost v TypeScript-u. Je lastnost, ki je dodeljena kot vrednost spremenljivkam, ki so bile deklarirane, vendar še niso bile inicializirane. var stevilo: number = undefined;. Array. Tako kot nam JavaScript omogoča delo z vrstami (array-i), nam to 17.

(28) omogoča tudi TypeScript. Lahko jih zapišemo na dva možna načina. var list: number[] = [1, 2, 3]; var list: Array<number> = [1, 2, 3]; Any. Tip any se uporablja za predstavljanje katerekoli JavaScript vrednosti. Tipu any lahko dodelimo katerokoli vrednost, ki jo lahko spremenimo kadarkoli. Se pravi, lahko sprva dodelimo spremenljivki vrednost string in jo nato spremenimo v number ali kateri drugi poljuben TypeScript tip. var dinamcnaSpre: any = 4; dinamicnaSpre = true; dinamicnaSpre = 'iz števila se lahko spremenim v logični operator, nato pa še v besedilo'; Je zelo učinkovit način za delo z obstoječimi datotekami JavaScript-a. Dobro ga je uporabiti tudi, kadar poznamo nekaj tipov, vendar ne vseh. Kot na primer array z različnimi tipi. var list: any[] = [1, 'besedilo', false]; list[1] = 200; // besedilo spremenimo v število. Void. Na nek način nasprotno od tipa any je void, saj ne vključuje podatkovnega tipa. Uporabimo jo za vračanje funkcij, ki ne vračajo nobenih vrednosti.. function opozorilo(): void {. 18.

(29) alert ('To je opozorilo za uporabnika'); } Enum. Lahko bi rekli, da gre za tip, ki nam omogoča uporabiti bolj prijazna imena za vrednosti z numeričnim nizom. Privzeto se enum-i začnejo šteti s številom 0, vendar lahko to ročno spremenimo. enum Barva {Rjava, Modra, Zelena}; var c: Barva = Barva.Modra;. V tabeli 2 lahko vidimo nekaj najpogosteje uporabljenih podatkovnih tipov. V tabeli so vključeni vsi vgrajeni tipi jezika TypeScript ter nekaj uporabniško definiranih tipov [7] [9]. Sedaj, ko smo boljše spoznali osnovne stvari TypeScript-a, se lahko osredotočimo na objektno orientiranost jezika. Sprva bomo spoznali vmesnike, za njimi razrede, na koncu pa še dedovanje. Dodatek, ki ga verjetno najbolj pogrešamo pri razvoju obsežnih spletnih aplikacij z jezikom JavaScript, je vmesnik (ang. Interface), saj lahko z njim. naredimo kodo veliko bolj. pregledno in lažjo za vzdrževanje. Velikokrat nam lahko načela SOLID pomagajo izboljšati kakovost naše kode in pisanje dobre ter učinkovite kode je nujno pri delu na velikih projektih. Težava nastane, če poskušamo slediti SOLID načelom z jezikom JavaScript, takrat bomo hitro ugotovili, da brez vmesnikov nikakor ne moremo zapisati kode SOLID OOP. Na srečo pa to lahko naredimo z jezikom TypeScript, saj vključuje vmesnike [9]. Implementiranje vmesnika lahko razumemo kot podpis pogodbe. Vmesnik je pogodba, in ko jo podpišemo (implementiramo), moramo slediti navodilom. Pravila vmesnika so izvajanje metod in atributov, ki jih moramo implementirati [9].. 19.

(30) Programska koda 4: Implementacija vmesnika. Programska koda 4 prikazuje implementacijo vmesnika IOseba in objekta programer s tipom IOseba. Kot lahko vidimo, se vmesnik implementira s pomočjo besede interface, nato mu sledi ime, ki je načeloma lahko poljubno, vendar po navadi pred ime postavimo črko I. Vmesnik IOseba ima tri lastnosti, in sicer atributa ime, priimek ter metodo pozdrav. Ko ga implementiramo, lahko iz njega naredimo poljubno število objektov, na primeru vidimo objekt programer z imenom Janez, priimkom Novak ter metodo, ki vrne besedilo Pozdravljeni!.. Še ena zelo pomembna lastnost TypeScripta so razredi. Razred je definicija objekta, opisuje, katere podatke vsebuje in katere operacije lahko izvaja. Razredi in vmesniki so temeljni elementi objektno orientiranega programiranja in pogosto delujejo skupaj. Sestavljeni so iz treh komponent [8]: • imena – ki je lahko načeloma poljubno, • atributov – ki se uporabljajo za opis lastnosti objekta, • metod – ki se uporabljajo za opis vedenja objekta.. 20.

(31) S tem ko lahko v TypeScriptu definiramo razrede, pridobimo tudi veliko prednost, atributom in metodam v razredu lahko dodelimo dodatno lastnost. Lahko jim dodelimo dostopnost, ki se prav tako deli na tri dele: • javne (ang. public) – do teh atributov in metod lahko dostopajo vsi (če vnaprej ne dodelimo lastnosti atributom in metodam, so privzeto nastavljeni na javne), • zasebne (ang. private) – ko je atribut ali metoda zasebna, ni mogoče dostopati do nje zunaj deklariranega razreda, • zaščitene (ang. protected) – se obnašajo podobno kot zasebne spremenljivke, vendar imajo do zaščitenih atributov ali metod dostop iz njih izpeljani razredi.. Programska koda 5: Implementacija razreda. Programska koda 5 prikazuje implementacijo razreda Avto in njegovega objekta z imenom audi. Razred avto ima tri atribute: motor, steviloVrat ter mocMotorja. Vsi ti trije atributi so javno dostopni, saj jim nismo prej definirali dostopnosti. V razredu vidimo tudi dve metodi: constructor ter izpis. Izpis metoda nam izpiše besedilo: Vaš avto ima (ime atributa motor, npr.: ER2321) motor, ter (ime atributa steviloVrat, npr.: 3) vrat in (ime atributa 21.

(32) mocMotorja, npr.: 200) kW močen motor. Med tem ko je konstruktor (ang. constructor) posebna metoda, kreirana za ustvarjanje instanc našega razreda – obvezno jo moramo poimenovati constructor. V našem primeru lahko vidimo konstruktor, ki ima vse instance (atribute) našega razreda – ni nujno, da vsebuje vse, v enem razredu lahko deklariramo več različnih konstruktorjev. Pod razredom lahko vidimo še deklarirani objekt audi. Objektu smo dodelili motor EA827, 5 vrat in 110kW moč motor. Pod deklariranim objektom pa smo s pomočjo console.log izpisali podatke na konzolo. V obeh primerih se podatki izpišejo pravilno. S posamičnim klicem atributov objekta audi ali pa s klicem metode izpis.. Razredi in vmesniki pa imajo tudi možnost dedovanja. Dedovanje je še ena zelo pomembna lastnost objektnega programiranja. Dedovanje pomeni, da objekt uporablja drug objekt kot njegov osnovni tip, s čimer podeduje vse karakteristike drugega objekta. Z drugimi besedami bi lahko povedali, da dobi objekt, ki deduje, od osnovnega objekta vse njegove lastnosti in funkcije (atribute in metode) – razen če ima osnovni objekt kakšne zasebne atribute ali metode [8]. Da pa med sabo lažje ločimo objekte, imamo za to vnaprej dogovorjena imena. Vmesnik ali razred, od katerega dedujejo drugi, je poimenovan kot osnovni ali starš (ang. base ali parent interface/class). Med tem ko je razred ali vmesnik, ki podeduje lastnosti in funkcije, poimenovan kot izpeljan ali otrok (ang. derived ali child interface/class) [8]. V TypeScriptu se dedovanje izvaja s pomočjo naprej določene besede extends. Več bomo lahko videli na spodnjih primerih. Dedovanje v TypeScript pa ima malo drugačna pravila kot nekateri drugi jeziki [12]: • razred lahko deduje le od enega razreda, • razred je lahko podedovan od več razredov, • razred lahko podeduje več vmesnikov, • vmesnik lahko podeduje več vmesnikov, 22.

(33) • vmesnik je lahko podedovan od več vmesnikov, • vmesnik lahko deduje le od enega razreda.. Programska koda 6: Dedovanje. Programska koda 6 prikazuje dedovanje razreda Profesor od razreda Dijak. Vidimo lahko dva običajna razreda. Prvi deklariran razred Dijak ima atribute ime, priimek in starost. Sledi mu konstruktor ter metoda pozdravIme, ki izpiše pozdravni govor in ime. V drugem razredu Profesor pa vidimo besedo extends, kar pomeni, da razred Profesor deduje od razreda Dijak. V konstruktorju razreda Profesor lahko vidimo tudi eno posebnost, ki je še 23.

(34) nismo omenili, to je beseda super. To je posebna že vnaprej rezervirana beseda, ki jo lahko uporabimo za dve stvari: • kadar želimo uporabiti/razširiti obstoječo metodo (npr.: da bi želeli na novo uporabiti metodo pozdrav s spremenjenim jedrom), • kadar se v izpeljanem razredu sklicujemo na konstruktor osnovnega razreda (v našem primeru na ime, priimek in starost). Razredu Profesor smo dodali še atribut predmeti ter metodo pozdravPredmeti. Deklarirali smo dva objekta, dijaka janeza in profesorja marka, ki mu lahko, za razliko od janeza, dodelimo še predmete (saj je v razredu Profesor). Pri klicu metode pozdrav se bo v obeh primerih metoda izvedla in izpisala ime objekta. Čeprav razred Profesor nima deklarirane metode, se bo ta izvedla, ker deduje od razreda Dijak, kar pomeni, da prevzame vse njegove atribute in metode. V primeru, da kličemo metodo pozdravPredmeti, pa se bo izvedla samo pri objektu razreda Profesor, saj razred Dijak nima pravice uporabljati metod izpeljanega razreda. V tem primeru bomo dobili le napako, v kateri bo pisalo, da pozdravPredmeti ni funkcija ali da lastnost pozdravPredmeti ne obstaja v razredu Dijak.. Programska koda 7: Dedovanje ‒ nadaljevanje. Programska koda 7 prikazuje dedovanje razreda, ki je že dedoval drugemu razredu. Tukaj vidimo nadaljevanje programske kode 6. Ustvarili smo nov razred Ravnatelj, ki deduje od 24.

(35) razreda Profesor, kar pomeni, da prevzame vse atribute in metode razreda Profesor (ker pa razred Profesor deduje od razreda Dijak, prevzame tudi vse njegove atribute in metode). Novega konstruktorja ne rabimo deklarirati, saj nismo dodali nobenega atributa, tako da inicializacija ni potrebna. Razredu Ravnatelj smo dodali le novo metodo govor, ki izpiše del besedila in ime. Deklarirali smo objekt matic, ki pripada razredu Ravnatelj. Pri klicu metod razreda Profesor in Dijak – metodi pozdrav in pozdravPredmeti, se bosta obe izvršili, saj, kot smo že povedali, je podedoval vse njihove atribute in metode. V primeru, da pa z objektom matic ali janez kličemo metodo razreda Ravnatelj, se ta ne bo izvedla, saj nimata pravice uporabljati njegovih metod. Spet bomo dobili enako napako kot v prejšnjem primeru. Čeprav se je v tem primeru izkazalo za dobro, da smo povezali razrede med seboj, se mogoče v drugih primerih ne bo. Tedaj lahko namesto kakšnega razreda poskusimo uporabiti vmesnik ali se lotiti projekta/naloge na drugačen način. Nepisano pravilo pravi, da je povezovanje pametno, kadar povezujemo od enega do štirih razredov. V primeru povezovanja več razredov se lahko stvari hitro zapletejo, še posebej pri testiranju, razvoju in vzdrževanju večvrstične kode.. 3.3. Transformacija kode TypeScript v kodo JavaScript. TypeScript je JavaScript in JavaScript je TypeScript. Vsako veljavno kodo TypeScripta lahko zamenjamo z veljavno kodo JavaScripta. Na primerih bomo pokazali, kako se koda TypeScript prevede v JavaScript ter obratno. Videli bomo, zakaj in kdaj je boljše uporabiti katerega izmed jezikov.. 25.

(36) Primer 1: Naredili bomo preprost gumb, na katerem se nam ob kliku na njega izpiše: To sta skriptna jezika! (s tem da bomo drugi del napisa dodali s pomočjo kreiranja objekta).. Programska koda 8: Gumb z napisom – TypeScript. Programska koda 8 prikazuje deklaracijo gumba v jeziku TypeScript.. Programska koda 9: Gumb z napisom – JavaScript. Programska koda 9 prikazuje deklaracijo gumba v jeziku JavaScript. 26.

(37) Če pogledamo programski kodi 8 in 9, lahko s slike vidimo, da nam razredi pomagajo pri branju in strukturi kode ter lažjemu zapisu. V tem primeru se kodi TypeScript in JavaScript v veliki meri ne razlikujeta, zato lahko za manjše naloge uporabimo tako JavaScript kot TypeScript.. Primer 2: Naredili bomo preprosto aplikacijo, v kateri bomo lahko izvedeli, koliko metrov je določena žival pretekla.. Programska koda 10: Prehojena razdalja živali – TypeScript. 27.

(38) Programska koda 10 prikazuje deklaracijo aplikacije za izpis prehojene razdalje živali v jeziku TypeScript.. Programska koda 11: Prehojena razdalja živali ‒ Javascript. 28.

(39) Programska koda 11 prikazuje deklaracijo aplikacije za izpis prehojene razdalje živali v jeziku TypeScript. Na primeru programskih kod 10 in 11 vidimo, kako zelo nam lahko OOP pomaga. Vidimo lahko, da je koda TypeScript veliko bolj berljiva kot JavaScript, kar lahko v veliki meri pomaga razvijalcem, zato je tudi TypeScript veliko bolj primernejši za uporabo v večjih projektih.. 29.

(40) 4. IZDELAVA PRAKTIČNEGA IZDELKA. Izdelali bomo aplikacijo, v kateri bomo pokazali, kako lahko z uporabo tehnologije Angular in jezika TypeScript kreiramo, preberemo, posodabljamo in izbrišemo podatke. Aplikacija bo namenjena vsem učencem, ki želijo imeti izpisan seznam vseh predmetov na enem mestu. Iz aplikacije (v nadaljevanju izdelek) bodo lahko učenci pogledali, katere predmete imajo v aktualnem šolskem letu, na seznam dodajali nove predmete, jih po želji urejali in brisali. Implementacija celotnega izdelka bo sestavljena iz petih različnih delov: • določanje poti, • kreiranje predmeta, • branje predmeta, • posodabljanje predmeta, • izbris predmeta.. 4.1. Razvojna okolja. Kot razvijalno okolje bomo uporabili Visual Studio Code. VS code štejemo med novejša razvijalna okolja, saj je bil izdelan leta 2015. Je brezplačno razvijalno okolje, ki nam nudi vse potrebno za ravoj Angular oziroma aplikacij TypeScript. [13] Kot strežniško okolje smo uporabili Node.js in pa npm, ki ga uporabljamo kot upravljalca paketov Node.js-a. Za testiranje in prikaz aplikacije smo uporabili Google Chrome brskalnik.. 30.

(41) 4.2. Angular. Angular je platforma oziroma ogrodje, ki nam omogoča lažje in hitrejše ustvarjanje spletnih aplikacij. Je odprtokodno ogrodje, ki ga uporabljamo na odjemalčevi strani in ga je razvila ekipa Googla. Ne smemo ga zamenjevati za njegova predhodnika AngularJS, saj je Angular popolnoma drugačen. [14] Z drugimi besedami lahko rečemo, da je Angular platforma in ogrodje za izdelavo spletnih aplikacij z jezikom HTML in TypeScript. Med drugim je Angular sam po sebi napisan v jeziku TypeScript. Sestavlja ga veliko število različnih knjižnic. Osnovni gradniki izdelave aplikacije ogrodja Angular so tako imenovani NgModules, ki nam zagotovaljajo kompilacijo komponent. Zraven osnovnih gradnikov pa mora aplikacija imeti vsaj en korenski modul, ki omogoča nalaganje aplikacije ter med drugim izvaja veliko funkcijskih modulov. To so osnovni gradniki, ki sestavljajo platformo, ne smemo pa pozabiti še na ostale. Angular arhitekturo sestavlja 5 komponent: [14] • Moduli – Angular definira NgModule, ki se razlikujejo in dopolnjujejo module JavaScript (ES2015). NgModule deklarira kompilacijo za komponente, ki so povezani z domeno aplikacije, delovnim tokom ali so testno povezana množnica zmogljivosti. Modul lahko povezuje svoje komponente s podobno kodo, kot so servisi za oblikovanje funkcijskih enot. Vsaka Angular aplikacija ima korenski modul, ki je običajno poimenovan AppModule, ki zagotovalja zagon aplikacije. • Komponente – vsako aplikacijo Angular sestavlja vsaj ena komponenta, ki jo imenujemo korenska komponenta, ki povezuje hierarhijo komponent s stranjo. Vsaka komponenta ima definiran razred, ki vsebuje podatke. Podatki so povezani s HTML-jem, ki definira pogled, ki se prikaže na strani. Dekorator @Component takoj indentificira razred, ki nam poda predlogo in metapodatke za le-to. • Predloge, direktivi in povezovanje podatkov – predlogo uporabljamo za prikaz podatkov HTML. Je koda HTML, ki ima določene dodatke za prikaz. Predloge zagotavljajo povezavo podatkov aplikacije in modela dokumenta (ang. DOM). 31.

(42) • Servisi in prenos odvisnosti – za podatke ali logiko, ki ni povezana z določenim pogledom in jih želimo deliti z drugimi komponenti moramo uporabiti servise. Uporabimo jih z dekoratorjem @Injectable. • Poti – usmerjevalnik Angular NgModule omogoča določitev navigacijske poti med različnimi komponenti. Omogoča nam tudi ogled hierarhije naše aplikacije. Modeliran je na običajnih navigacijskih konvencijah.. Slika 7: Arhitektura ogrodja Angular [14]. Slika 7 prikazuje zgoraj opisano arhitekturo ogrodja oziroma platforme Angular. Na sliki lahko vidimo, kako se komponenti med seboj povezujejo.. 4.3. Izdelava izdelka. Kot smo že povedali, bomo s pomočjo tehnologije Angular (verzija 6) in TypeScript ustvarili spletno aplikacijo. Sprva si bomo s pomočjo Angular CLI ustvarili projekt. To naredimo tako, da v terminal vpišemo naslednje ukaze: • npm install -g @angular/cli (ukaz, ki nam namesti Angular CLI), 32.

(43) • ng new ime_vasega_projekta (vam ustvari projekt v mapi, kjer se nahajate), • cd ime_vasega_projekta, • ng serve (vam zažene aplikacijo). Ko smo to naredili, se nam v brskalniku na naslovu http://localhost:4200 prikaže privzeta prva stran.. Slika 8: Prikaz v brskalniku. Slika 8 prikazuje, kako se nam prikaže začetna stran na brskalniku po vpisu ukazov v terminal. Naslednji korak je, da si naredimo komponente, ki jih bomo uporabljali v naši aplikaciji. To bomo prav tako naredili s pomočjo terminala in Angular CLI: ng g component ime_komponente (ukaz, s katerim nam Angular avtomatsko ustvari komponento in vse potrebno – v našem primeru smo naredili dve komponenti: predmeti in contact).. 4.3.1 Implementacija poti V modulu app.module.ts so se nam generirale komponente, uvoziti moramo še knjižnico za inicializacijo poti ter za izgradnjo obrazcev (za kasnejšo rabo). Sledi ustvarjanje dodatne datoteke v mapi app. Dodali bomo mapo za implementacijo poti app-routing.module.ts, v kateri bomo določili naslove do različnih komponent. 33.

(44) Programska koda 12: Nastavitve v modulu app. Programska koda 12 prikazuje modul app.module.ts. Vidimo lahko deklarirane komponente, ki se nam s pomočjo Angular CLI avtomatsko ustvarijo, med tem ko moramo knjižnici AppRoutingModule, ki je namenjana določanju poti, in pa BrowserModule, ki je namenjena obrazcem, vstaviti ročno.. 34.

(45) Programska koda 13: Dodajanje poti v app-routing. module.ts. Programska koda 13 nam prikazuje dodajanje poti v datoteko app-routing.module.ts. Uvoziti moramo vse kreirane komponente, ki jim nato s pomočjo ukaza routes: Routes nastavimo poljubno pot, na kateri želimo, da bo prikazan. V app.component.html dodamo še <router-outlet></router-outlet>, tako nam usmerjevalnik prikaže pravilno pot do komponent. Zraven bomo dodali še navigacijski bar, ki bo imel vse gumbe povezane do komponent. Gumbe bomo povezali s pomočjo ukaza routerLink.. Programska koda 14: Prikaz kode HTML domače strani. 35.

(46) Na sliki 14 lahko vidimo, da smo na domačo stran dodali navigacijski bar in povezali vse gumbe.. 4.3.2 Dodajanje modela, servisa in pregled predmetov Ko smo uspešno naredili navigacijo, lahko začnemo z izdelavo modela. V mapi app bomo naredili novo datoteko (model) predmet.model.ts, ki bo predstavljal naš model.. Programska koda 15: Model Predmet. Programska koda 15 prikazuje novo narejen model, v katerega smo vstavili 5 atributov. Iz slike lahko tudi razberemo, kako pride TypeScript do izraza s poimenovanji tipa. Naslednji korak je, da ročno vstavimo nekaj predmetov. To bomo naredili tako, da bomo ustvarili servis, ki bo povezan z modelom. V servisu bomo kasneje kreirali vse metode, ki bodo potrebne za ustvarjanje, branje, posodabljanje in brisanje predmetov.. Programska koda 16: Servis predmeti s funkcijo branja podatkov. 36.

(47) Programska koda 16 nam prikazuje servis, v katerega smo ročno dodali nekaj predmetov. Spodaj pa lahko vidimo funkcijo getPredmeti(), ki nam vrne vse vpisane predmete.. Programska koda 17: Komponenta Predmeti. Programska koda 17 prikazuje komponento TypeScript predmeti. Vidimo lahko, da smo uvozili tako servis kot model. Nato smo v konstruktorju inicializirali servis, iz katerega v metodi ngOnInit() preberemo predmete. Sedaj moramo te predmete prikazati v HTML komponenti. To bomo naredili s pomočjo tabele in Angular ukaza *ngFor. Zanka *ngFor nam bo s polja prebrala vse predmete in jih izpisala v tabelo.. 37.

(48) Programska koda 18: *ngFor in izpis predmetov na zaslon. Programska koda 18 prikazuje kodo HTML, kjer na zaslon izpišemo vse aktualne predmete.. Slika 9: Prikaz predmetov. Slika 9 prikazuje prikaz predmetov v aplikaciji, ki smo jih ročno vstavili.. 4.3.3 Dodajanje predmetov Za dodajanje novih predmetov v aplikacijo si bomo sprva pripravili obrazec, v katerega bomo vstavljali podatke. Pri ustvarjanju obrazca bomo uporabili tri Angular ukaze, ki nam 38.

(49) bodo pomagali povezati našo aplikacijo s komponento in servisom. Ukaz [formGroup] bomo uporabili za inicializacijo forme, ukaz (ngSubmit) za pošiljanje obrazca ter formControlName za povezovanje atributov.. Programska koda 19: Izdelava obrazca HTML za dodajanje predmetov. Programska koda 19 prikazuje izdelavo obrazca HTML za dodajanje predmetov. Naslednji korak je, da v komponenti inicializiramo obrazec in mu dodamo vrednosti ter jih shranimo. Nato se bo s klikom na gumb Dodaj in s pomočjo Angular onSubmit() ter funkcije, ki smo jo napisali v servisu, vrednost predmeta dodala k ostalim.. 39.

(50) Programska koda 20: Dodajanje predmetov ‒ komponenta in onSubmit. Programska koda 20 prikazuje komponento Predmeti, ki se s kodo HTML povezuje s spremenljivko predmetiForm, ki smo jo videli v obrazcu (Angular ukazu [formGroup]). Pod njo pa vidimo onSubmit(), ki kliče funkcijo, ki smo jo predhodno deklarirali v servisu. Ob kliku na gumb, se funkcija izvrši.. Programska koda 21: Funkcija za dodajanje novih predmetov. Programska koda 21 prikazuje funkcijo za dodajanje novega predmeta, ki smo jo dodali v servisu.. Slika 10: Kreiranje novega predmeta. Na sliki 10 lahko vidimo obrazec, kjer kreiramo nov predmet. 40.

(51) 4.3.4 Posodabljanje predmetov Pri posodabljanju podatkov bomo spremenili logiko tabele. Ob premiku miške na katerikoli stolpec se nam bo ta obarval v sivo, v primeru klika na stolpec pa se nam bodo podatki iz stolpca izpisali v zgoraj narejen obrazec. Ta obrazec bomo lahko poljubno urejali. Nato bomo stolpcu dodali nov gumb Uredi in s klikom na ta gumb se nam bo stolpec posodobil. Da pa bomo vedeli, da se je stolpec res posodobil, pa bomo dodali še okno, v katerem se nam bo izpisalo, da je bila posodobitev uspešna. Začeli bomo pri urejanju kode HTML.. Programska koda 22: Posodabljanje predmetov ‒ koda HTML. Programska koda 22 nam prikazuje posodobljeno tabelo. *ngFor zanki smo dodali štetje predmetov, da bomo vedeli, katerega urediti. Tr elementu smo dodali hover sive barve ter ob kliku klicanje onEditPredmet(i). Stolpcu smo dodali še gumb Uredi, ki se prav tako kliče ob kliku (onUpdatePredmet(i)).. 41.

(52) Nato smo morali v servisu kreirati dve novi funkciji. Prva (getPredmet(index: number)) ob kliku na stolpec pridobi določen predmet in ga izpiše v obrazec, da ga lahko uredimo. Druga (updatePredmet(index:number, predmet: Predmet)) ob kliku na gumb Uredi posodobi naše podatke, ki smo jih na novo zapisali v obrazec.. Programska koda 23: Funkciji za pridobitev predmeta in posodabljanje. Programska koda 23 nam prikazuje funkciji za posodabljanje predmeta. Sedaj moramo funkciji med sabo povezati še v komponenti. Sprva bomo s pomočjo klika na stolpec izpisali podatke v obrazec. Z getPredmet(index:number) bomo pridobili aktualne podatke. Nato bomo s klikom na gumb Uredi in funkcijo updatePredmet(index: number, predmet: Predmet) posodobili na novo vpisane podatke v obrazcu.. Programska koda 24: Posodobitev predmeta – komponenta. Programska koda 24 prikazuje metodo onEditPredmet, ki se kliče ob kliku na stolpec in onUpdatePredmet, ki se kliče ob kliku na gumb Uredi.. 42.

(53) Slika 11: Posodabljanje predmeta. Slika 11 prikazuje nov izgled tabele ter posodobitev predmeta geografija.. 4.3.5 Brisanje predmeta Za konec pa bomo implementirali še brisanje predmetov. Gumbu Uredi bomo dodali gumb Izbriši. Tako se bo ob kliku na gumb izvršila metoda, ki nam bo izbrisala predmet. S pomočjo prej deklarirane for zanke bomo kodi HTML dodali funkcijo, ki se bo izvršila ob kliku.. 43.

(54) Programska koda 25: Dodajanje gumba za izbris predmeta ‒ koda HTML. Programska koda 25 prikazuje dokončano celotno telo tabele, v kateri vidimo na novo dodan stolpec z metodo onDeletePredmet(i). Metodo onDeletePredmet(i) moramo povezati še s komponento. Komponenti bomo dodali metodo, ki bo klicala servis, ki bo dokončno izbrisal predmet. To bomo naredili s pomočjo naprej deklariranega TypeScript ukaza splice.. Programska koda 26: Metoda za izbris – komponenta. Programska koda 26 prikazuje metodo za izbris. Ko smo komponenti dodali metodo, ki je povezana s kodo HTML, jo še moramo povezati s servisom, v katerem bomo uporabili ukaz splice.. Programska koda 27: Funkcija za izbris – servis. Programska koda 27 prikazuje funkcijo za izbris v servisu. Sedaj smo s pomočjo ukaza splice izbrisali izbrani predmet. Ukaz ima dva parametra, prvi parameter nam poda izbrani predmet, drugi parameter pa koliko objektov želimo izbrisati.. 44.

(55) Slika 12: Dodan gumb izbriši. Slika 12 prikazuje dodan gumb izbriši. Vidimo tudi celotno aplikacijo, v kateri lahko kreiramo, preberemo, uredimo in izbrišemo predmete.. 45.

(56) 4 SKLEP Cilj diplomske naloge je bil raziskati programski jezik TypeScript ter ugotoviti, ali je jezik primeren za razvoj sodobnih spletnih aplikacij. Želeli smo preučiti, kdaj se je primerno odločiti za uporabo TypeScript-a ter kakšne so razlike oziroma podobnosti med TypeScript-om in JavaScript-om. Pridobljeno znanje smo prikazali z ustvarjanjem projekta. Skozi nalogo smo ugotovili, da je TypeScript jezik, ki vedno bolj narašča. To lahko potrdimo tudi z nenehnimi posodobitvami jezika, ki se iz meseca v mesec izpopolnjujejo. Pred kratkim je bila objavljena TypeScript verzija 3.0, ki nam je znova prinesla še lažjo in hitrejšo uporabo tako jezika kot samih spletnih aplikacij in s tem boljšo uporabniško izkušnjo, kar je glavni cilj TypeScript razvijalcev. Čeprav moramo vedeti, da trenutno približno trikrat več razvijalcev uporablja jezik JavaScript, TypeScript s svojimi inovacijami in lažjimi rešitvami zmanjšuje število JavaScript razvijalcev in povečuje število TypeScript razvijalcev. Še posebej s povezavo ogrodja Angular, ki je trenutno med tremi najbolj uporabljenimi tehnologijami za razvoj enostranskih spletnih aplikacij. Na spletu je veliko popularnih spletnih aplikacij, ki so zgrajene z jezikom TypeScript in ogrodjem Angular – Google Play, Google Cloud Blog, Copa Airlines, PayPal Community, Microsoft Office Support, Google Express, ABC News, San Disk in še veliko drugih strani, ki jih dnevno obišče na milijone uporabnikov. To nam lahko pove, da se jezik TypeScript (z ogrodjem Angular) razvija v pravo smer. Spoznali smo, da je TypeScript primeren za razvoj večjih sodobnih aplikacij oziroma ga je najbolje uporabiti pri večjih projektih, med tem ko je jezik JavaScript bolj primeren za manjše. TypeScript je nasproti JavaScript-u zelo veliko pridobil s podatkovnimi tipi in objektno orientiranostjo, kar nam zelo pomaga pri razvoju dinamičnih sodobnih spletnih aplikacij. Jezik TypeScript tako izpolnjuje vse cilje, ki smo si jih zastavili. Je jezik, ki se in se bo v naslednjih letih veliko uporabljal pri razvoju spletnih aplikacij.. 46.

(57) 5 VIRI IN LITERATURA. [1] P. Shan, „Pros & cons of beginning with JavaScript as your first programming language,“ Void Canvas, 2. 9. 2017. [Elektronski]. Dostopno na: http://voidcanvas.com/pros-cons-beginning-javascript-first-programming-language/. [19. 2. 2018]. [2] „Script,“ ntc, [Elektronski]. Dostopno na: https://www.ntchosting.com/encyclopedia/scripting-and-programming/script/. [20. 2. 2018]. [3] C. Hope, „Script,“ Computer Hope, 29. 12. 2017. [Elektronski]. Dostopno na: https://www.computerhope.com/jargon/s/script.htm. [20. 2. 2018]. [4] „Difference between Programming Language and Scripting Language,“ Diffrence Between, [Elektronski]. Dostopno na: http://www.differencebetween.info/difference-between-programming-languageand-scripting-language. [20. 2. 2018]. [5] Pluarlsight, „What's the Difference Between the Front-End and Back-End?,“ Pluarsight, 28. 1. 2015. [Elektronski]. Dostopno na: https://www.pluralsight.com/blog/film-games/whats-difference-front-end-back-end. [22. 2. 2018]. [6] championshuttler, „What is JavaScript?,“ MDN, 20. 2. 2018. [Elektronski]. Dostopno na: https://developer.mozilla.org/enUS/docs/Learn/JavaScript/First_steps/What_is_JavaScript. [20. 2. 2018]. [7] „TypeScript,“ TutorialsPoint, [Elektronski]. Dostopno na: https://www.tutorialspoint.com/typescript/typescript_tutorial.pdf. [26. 2. 2018]. [8] N. Rozentals, Mastering TypeScript - Second Edition, Packt Publishing, 2017. 47.

(58) [9] V. V. I. G. d. W. Remo H. Jansen, TypeScript: Modern JavaScript Development, Packt Publising, 2016. [10] J. Nance, „TypeScript vs. JavaScript: Should You Migrate Your Project to TypeScript?,“ Stackify, 20. 9. 2017. [Elektronski]. Dostopno na: https://stackify.com/typescript-vsjavascript-migrate/. [5. 3. 2018]. [11] „Statements and delcarations by category,“ MDN, 6. 12. 2017. [Elektronski]. Dostopno na: https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Statements. [6. 3. 2018]. [12] TypeScript, „Documentation,“ TypeScriptLang, 31. 1. 2018. [Elektronski]. Dostopno na: https://www.typescriptlang.org/docs/home.html. [8. 3. 2018]. [13] Microsoft, „Visual Studio Code,“ Microsoft, [Elektronski]. Dostopno na: https://code.visualstudio.com/docs. [27. 7. 2018]. [14] Angular, „Angular,“ Angular, [Elektronski]. Dostopno na: https://angular.io/docs. [27. 7. 2018]. [15] C. Wodehouse, „Front-End Web Development: Client-Side Scripting & User Experience,“ Upwork, [Elektronski]. Dostopno na: https://www.upwork.com/hiring/development/how-scripting-languages-work/. [20. 2. 2018]. [16] P. Carbonelle, „PYPL PopularitY of Programming Language,“ PYPL, 2018. [Elektronski]. Dostopno na: http://pypl.github.io/PYPL.html. [20. 2. 2018]. [17] „Google Trends,“ Google, 1. 9. 2018. [Elektronski]. Dostopno na: https://trends.google.com/trends/explore?geo=US&q=%2Fm%2F0n50hxv,%2Fm%2F 0hjc5m0,%2Fm%2F0h52xr1. [1. 9. 2018].. 48.

(59)

No results found