NWT usmeni

Question 1

Razlike u mogućnostima (front-end vs. back-end)

Answer 1

● Back-end tehnologije se izvršavaju na serveru
○ obrađuju pristigle zahteve (HTTP request)
○ omogućavaju perzistenciju podataka (database)
○ putem šablona generišu odgovore (HTTP response)

● Front-end tehnologije se izvršavaju na klijentu (web browser-u)
○ učestvuju u prikazu veb stranice
○ vrše interakciju sa korisnikom
○ (samostalno) upućuju zahteve i obrađuju odgovore

Question 2

Multi-page vs. single page aplikacije

Answer 2

Prednosti tradicionalne (multi-page) aplikacije
● brži odziv na početku
● manja zavisnost od JavaScript podrške
● lakša kontrola pristupa
● jednostavnije postići SEO

Prednosti single-page aplikacije:
● brži odziv tokom rada
● manje opterećenje servera
● funkcionisanje i pri gubitku konekcije
● odvojen GUI od podataka, pa isti back-end može opslužiti različite platforme (web, Android, iOS)

Question 3

Angular

Answer 3

● Open-source framework za razvoj front-end komponente web aplikacija.
● Angular je započet kao Google projekat 2010. godine pod nazivom AngularJS.
● Omogućava implementaciju single page aplikacija, ali se može koristiti i u multi-page
aplikacijama.
● Uz Angular, jednom učitana veb stranica, može vršiti interakciju s korisnikom bez nužnog
učitavanja nove veb stranice.
● Za implementaciju koristi TypeScript jezik koji se potom prevodi u JavaScript.
● Omogućava modularan razvoj što olakšava organizaciju programskog koda i pogoduje
timskom radu.
● Moguća su proširenja funkcionalnosti uključivanjem dodatnih biblioteka.

2016. godine AngularJS projekat nastavlja razvoj kao Angular 2:
      ● izvorni kod je napisan ispočetka
      ● arhitektura je značajno izmenjena
      ● omogućena je modularizacija (grupisanje programskih komponenti)
      ● poboljšana podrška za SEO

Question 4

AngularJS i Angular

Answer 4

● AngularJS za implementaciju koristi JavaScript jezik.
● Razvoj AngularJS radnog okvira je dostigao verziju 1.8.x.
● AngularJS je u stanju dugoročne podrške (Long Term Support - LTS).
● Angular za implementaciju koristi TypeScript jezik.
● Pored veb aplikacija, Angular podržava i razvoj mobilnih aplikacija (uz pomoć Apache Cordova projekta).
● Angular aplikacije se baziraju na komponentama (tipskim elementima veb stranice).
● Performanse Angular aplikacija su značajno napredovale u odnosu na AngularJS.

Question 5

TypeScript sintaksa

Answer 5

● TypeScript sintaksom Angular omogućava:
○ statičko tipiziranje (static typing) - varijablama se deklaracijom pridružuje tip čime se
izbegavaju potencijalne greške (varijabli je tada moguće dodeliti isključivo vrednosti
koje odgovaraju deklarisanom tipu)
○ objektno orijentisan koncept - programski kod organizovan u klase
○ reaktivno programiranje - rad sa asinhronim tokovima podataka

● Osim toga, TypeScript rešava nedostatak podrške za neke od mogućnosti predviđene ECMAScript standardom.
● TypeScript nije zamena za JavaScript već njegova nadgradnja.
● JavaScript se može smatrati ‘mašinskim jezikom’ za web browser-e.

Question 6

TypeScript - statičko tipiziranje

Answer 6

Varijable u JavaScript-u nisu tipizirane (ne dodeljuje im se tip).

Question 7

TypeScript

Answer 7

omogućava tipiziranje varijabli čime obezbeđuje njihovu doslednu primenu u skladu sa konkretnim tipom.

Question 8

TypeScript - reaktivno programiranje

Answer 8

● Hronološki sled sinhronih i asinhronih poziva je različit:
○ sinhronim pozivom se ujedno i “čeka” na odgovor
○ asinhronim pozivom se u međuvremenu obavljaju druge aktivnosti (odgovor će biti obrađen kada bude primljen)

● Asinhroni pozivi su pogodni za izvršavanje dugotrajnih operacija tokom kojih izvršavanje ostalih funkcionalnosti ne treba biti “zakočeno” (npr. odziv korisničkog interfejsa)
● Uporednim asinhronim pozivima se može optimizovati ukupno trajanje izvršavanja pojedinačnih operacija

Question 9

Izvršavanje TypeScript programskog koda

Answer 9

● Izvorni kod napisan TypeScript sintaksom i sačuvan u .ts fajlovima se prevodi u JavaScript kod i smešta u .js fajlove.
● Tek nakon prevođenja se programski kod može izvršavati u veb pregledaču.

Question 10

Arhitektura Angular projekta

Answer 10

● Angular projekat sadrži barem jedan korenski modul.
● Moduli objedinjuju komponente i servise.
● Komponente definišu poglede (view) odn. elemente veb stranice.
*
Komponente omogućavaju povezivanje podataka, logike i HTML šablona.
● Moduli mogu sadržati i servise koji su zaduženi za podatke i logiku, a na
raspolaganju su komponentama.

Question 11

Prednosti razvoja aplikacije putem komponenti

Answer 11

● Između komponenti se može uspostaviti hijerarhijski odnos tako što se unutar jedne komponente može koristiti druga komponenta (selektor jedne komponente se navede u šablonu druge komponente).

● Ovakvo raščlanjavanje prikaza podataka olakšava razvoj što posebno dolazi do izražaja kod složenijih aplikacija.

● Komponentama se olakšava i timski rad na razvoju aplikacije jer se podela posla unutar tima može vršiti po komponentama.

Question 12

Angular šabloni

Answer 12

● Angular komponente koriste šablone za formatiranje prikaza i za određivanje načina interakcije sa korisnikom.
● Jezik za pisanje šablona je zasnovan na HTML-u.
● Komponente su povezane sa šablonima pomoću @Component dekoratora na jedan od dva načina:
○ svojstvom template čija vrednost sadrži šablon
○ svojstvom templateUrl čija vrednost je putanja do spoljašnjeg fajla u kome je šablon

Question 13

Sintaksa Angular šablona

Answer 13

● U osnovi Angular šablona je HTML.
● Komponente u svojim šablonima definišu odgovarajuće segmente veb stranice tako da u celini čine validnu HTML stranicu.
● Da bi se kroz šablon ugradila vrednost nekog podatka u veb stranicu koristi se interpolacija. Interpolacija odn. umetanje se postiže navođenjem izraza unutar duplih vitičastih
zagrada: {{ i }}

● Na primer: <h1>{{naslov}}</h1>

Question 14

Preuzimanje zavisnosti

Answer 14

● Preuzimanje paketa koji su u Angular projekat dodati kao zavisnosti (dependencies) vrši alat npm (Node Package Manager).
● Na sajtu npmjs.com je dostupan pregled raspoloživih paketa koje je moguće koristiti kao zavisnosti.
● Ovaj sajt omogućava pretragu i rangiranje što može biti korisno u pronalaženju i odabiru željenih paketa.
● npmjs.com sadrži pakete namenjene, ne samo razvoju Angular aplikacija, već i mnogih drugih koje za izvršavanje koriste JavaScript jezik.
● npmjs.com poseduje više od milion paketa.

Question 15

Ispis poruka u konzoli / prikaz alert dijaloga

Answer 15

● Radi lakšeg testiranja i debug-ovanja korisno je služiti se ispisom pomoćnih poruka o toku izvršavanja programa.
● Ove poruke ostvaljaju trag o stanju programa u konkretnom trenutku izvršavanja.

● Jedna varijanta je ispis poruka u konzoli. Naredba bi, na primer, glasila:
○ console.log(‘Hello World’);
● Drugi način prikaza poruka je putem alert dijaloga:
○ alert(‘Hello World’);

● Ispis poruka u konzoli je suptilniji način za praćenje rada programa.

Question 16

Metode u Angular komponentama

Answer 16

● Do sada smo u komponentama koristili varijable i pomoću šablona ugrađivali njihove vrednosti u veb stranicu.
● Pored varijabli, komponente mogu sadržati i metode koje, kada su pozvane, izvršavaju neki deo programskog koda
● Metode imaju naziv, parametre i telo.
● Parametri su opcioni.
● Pozivi metoda se dešavaju nastupanjem određenih događaja.
Neki od tih događaja nastaju prilikom učitavanja komponente, a neki tokom interakcije sa korisnikom.

Question 17

Životni ciklus Angular komponente

Answer 17

● Životni ciklus komponente obuhvata sve događaje od njenog instanciranja (zauzimanja memorije) do njenog uništenja (oslobađanje iz memorije).
● Prvi događaj u životnom ciklusu komponente je njeno instanciranje.
● Angular vrši instanciranje komponente kada u HTML-u veb stranice naiđe na tagove koji odgovaraju selektoru te komponente (definisano svojstvom selector u @Component dekoratoru).
● Prilikom instanciranja će se izvršiti metoda constructor() ukoliko je definisana unutar komponente. ● Ovom metodom se najčešće omogućava tzv. injektiranje zavisnosti (povezivanje s drugim elementima aplikacije). Više o tome kasnije…

Question 18

Pristup varijablama iz metoda

Answer 18

● Metode, u svom telu, mogu pristupati vrednostima varijabli.
● Pri tome se ove varijable koriste uz navođenje reference this koja označava tekuću instancu komponente.

Question 19

Pregled tipova povezivanja

Answer 19

U zavisnosti od željenih rezultata, potrebno je izabrati način povezivanja između komponente i šablona. Sledeći dijagram ilustruje nekoliko slučaja povezivanja i njihove smerove sa jednostavnim primerima:
○ interpolacija (jednosmerno od komponente ka šablonu)
○ povezivanje svojstava (property binding) (jednosmerno od komponente ka šablonu)
○ povezivanje događaja (event binding) (jednosmerno od šablona ka komponenti)
○ dvosmerno povezivanje

Question 20

Binding od komponente ka šablonu: interpolacija

Answer 20

Interpolaciju smo već koristili i ona je tipičan primer za ovaj smer povezivanja. Vrednosti kojima raspolaže šablon su vezane za vrednosti koje postoje u komponenti. Bilo kakva promena ovih vrednosti u komponenti će se istovremeno odraziti na prikaz tih vrednosti putem šablona.

Question 21

Binding od komponente ka šablonu: povezivanje svojstava

Answer 21

● Osim interpolacije, povezivanje svojstava (property binding) takođe ima smer od komponente ka šablonu.
● Ovaj način se koristi kada neki atribut HTML elementa treba povezati sa nekom vrednošću iz komponente.
● Povezivanje se vrši tako što se u šablonu odgovarajući atribut navodi unutar uglastih zagrada [ ].
● I kod ovog načina će se bilo kakva promena ove vrednosti u komponenti istovremeno odraziti na prikaz

Question 22

Razlika između interpolacije i povezivanja svojstava

Answer 22

● Tekstualne podatke je u većini slučajeva moguće ugraditi u šablon interpolacijom.
● Ipak, ako bi vrednost bila logičkog tipa, interpolacija ne bi funkcionisala.
● Interpolacijom logičke vrednosti true odn. false postaju stringovi ‘true’ i ‘false’.
● Pošto se u HTML-u logički atributi zapisuju drugačije (na primer: disabled, selected, checked) preporučljivo je da se za svojstva uvek koristi property binding. Tada Angular vodi računa o ispravnom nazivu atributa.

Question 23

Povezivanje svojstava primenjeno na CSS stilove

Answer 23

● Povezivanjem svojstava je moguće kontrolisati pridruživanje stilova nekom HTML elementu.
● Kao uslov za pridruživanje može poslužiti izraz čija istinitost određuje da li će stil biti pridružen ili ne.
● Tako se, na primer, postojeća CSS klasa može primeniti na neki element ako se u njega ugradi atribut [class.naziv_klase] pa mu se kao vrednost dodeli izraz koji određuje da li će stil biti primenjen.

Question 24

Binding od šablona ka komponenti: povezivanje događaja

Answer 24

Sa povezivanjem događaja (event binding) smo se već upoznali i koristili ga za obradu događaja koji se dešavaju na veb stranici. Nastupanjem konkretnog događaja se poziva zadata funkcija unutar komponente.

Question 25

Dvosmerni binding

Answer 25

● Povezivanje u oba smera je korisno kada korisniku treba prikazati neki podatak i istovremeno mu omogućiti da ga menja.
● Dvosmerni binding predstavlja neku vrstu kombinacije povezivanja svojstava i povezivanja događaja, pa se rezervisana reč ngModel navodi kao [(ngModel)]
● Ovaj tip povezivanja se obično koristi kod <input></input> elemenata.

Question 26

Instanciranje

Answer 26

● Instanciranje predstavlja kreiranje jednog primerka neke klase.
● Ovi primerci se nazivaju instance odn. objekti.
● Instancama se pridružuju vrednosti za polja definisana klasom.
● Ako u modelu imamo klasu Knjiga, onda jedna instanca može predstavljati knjigu “Blago cara Radovana”. Toj instanci ćemo za polje naslov pridružiti vrednost “Blago cara Radovana”, polju autor vrednost “Jovan Dučić”, a polju godinaIzdanja vrednost 2018.
● Može se reći da apstraktan opis podataka putem klasa i njhovih polja, pri instanciranju koristimo kao uzor (model) za opisivanje primeraka iz realnog sveta.

Question 27

Strukturna direktiva - *ngFor

Answer 27

● Direktiva *ngFor omogućava višestruko ponavljanje onog HTML elementa u koji je ugradimo, kao i njegovih podelemenata.
● Ova direktiva je pogodna kada za neku listu podataka treba u iteracijama omogućiti prikaz pojedinačnih elemenata.
● U HTML element se ugrađuje kao atribut čija vrednost predstavlja deklaraciju lokalne varijable koja će vrednosti uzimati iz zadate liste:

Question 28

Servisi

Answer 28

● Svrha komponenti je da se bave prikazom podataka.
● Operacije nad podacima se zbog toga izdvajaju i implementiraju putem servisa.
● Servis se implementira u zasebnom fajlu i objedinjuje svu funkcionalnost vezanu za operacije nad podacima (učitavanje, pretraga, izmena, brisanje, …).
● Servis se s komponentom povezuje tzv. injektiranjem zavisnosti (dependency injection).
● Kada povežemo komponentu sa servisom (dependency injection), šablon će i dalje moći da se poveže (binding) sa podacima i svi podaci kojima raspolaže servis će biti ažurno prikazani na veb stranici.

Question 29

Implementacija Angular servisa

Answer 29

● Angular servisi pružaju komponentama tražene podatke.
● Servis je predstavljen dekoratorom i klasom (slično kao i komponenta).
● Dekorator @Injectable omogućava komponentama da zatraže injektiranje zavisnosti ka ovom servisu.
● U servisu omogućimo pristup podacima, za šta ćemo i ovaj put koristiti listu objekata.

Question 30

Dependency Injection

Answer 30

● Injektiranje zavisnosti (dependency injection) je koncept kojim se olakšava modularizacija aplikacije.
● Injektiranjem zavisnosti su češće korišćeni elementi stavljeni na raspolaganje komponentama aplikacije.
● Da bi komponenta koristila te druge elemente (npr. servise) potrebno je u njenom konstruktoru upotrebiti tipove tih elemenata za definisanje referenci.
● Na taj način će, prilikom instanciranja, komponenta zatražiti ove zavisnosti i potom sačuvati njihove reference za kasnije korišćenje.

Question 31

JSON format

Answer 31

● JavaScript Object Notation (JSON) je jezik za predstavljanje strukturiranih podataka korišćenjem notacije koja je čitljiva za čoveka.
● Za JavaScript je to prirodan format podataka.
● Back-end aplikacije najčešće pružaju podatke u JSON formatu.
● Podaci o nekom objektu se u JSON formatu predstavljaju unutar vitičastih zagrada { } u obliku parova ime : vrednost. Nizovi se predstavljaju pomoću uglastih zagrada [ ].
● Primer jednog JSON niza objekata:

Question 32

Servis i HTTP protokol

Answer 32

● Kada front-end aplikacija preuzima podatke sa back-end aplikacije ona to postiže HTTP protokolom (HyperText Transfer Protocol) odn. istim protokolom kojim i web browser učitava web stranice.

● Zbog toga Angular aplikacija mora biti u stanju da generiše zahtev (HTTP request), pošalje ga na određenu adresu (URL) i zatim preuzme odgovor (HTTP response).

● Da bi se naša aplikacija mogla služiti HTTP protokolom, Angular nudi već implementiranu podršku za ovaj način komunikacije. Za to je potrebno koristiti modul HttpClientModule u kome se nalazi klasa HttpClient. Ova klasa poseduje sve što je neophodno za komunikaciju putem HTTP protokola.

Question 33

● Da bi koristili pomenuti modul i njegovu klasu najpre je potrebno:

Answer 33

○ importovati modul HttpClientModule u naš modul
○ importovani klasu HttpClient i injektovati zavisnost u naš servis

Question 34

Servis i HttpClient - get() i subscribe()

Answer 34

● Za slanje HTTP zahteva, nad referencom HttpClient-a, pozivamo metodu get(‘http://…’) pri čemu kao parametar navodimo URL na koji šaljemo zahtev.
● Preuzimanje podataka putem HTTP protokola se odvija asinhrono tj. naredba za preuzimanje neće ‘čekati’ da podaci stignu, već program nastavlja sa izvršavanjem ostalih naredbi.
● Da bi aplikacija obradila tražene podatke po njihovom prispeću, implementiramo blok naredbi koji će izvršiti prihvat ovih podataka.
● To se postiže tako što funkciju za obradu odgovora prijavimo tj. pretplatimo (eng. subscribe) na odgovor.
● U pozivu metode subscribe kao parametar navodimo naredbe kojima će dobijeni HTTP odgovor biti transformisan u oblik pogodan za našu aplikaciju.
● Za ovaj vid transformacije podataka veoma su korisne tzv. arrow funkcije.

Question 35

Korišćenje servisa iz komponente i šablona

Answer 35

● Pozivanje metode za preuzimanje podataka, koja se nalazi u servisu, bi trebalo izvršiti čim komponenta bude kreirana.
● Zato ćemo u komponenti implementirati ngOnInit() metodu.
● Ova metoda će putem reference na servis pozvati metodu getKnjige().
● Šablon može vršiti prikaz podataka putem reference na servis, slično kao što smo i ranije pristupali podacima iz servisa.

Question 36

Master view - detail view

Answer 36

○ master view odn. prikaz svih postojećih zapisa sa osnovnim podacima,
○ detail view odn. prikaz detalja gde će se navesti svi podaci o jednom zapisu

Question 37

API key

Answer 37

API (Application Programming Interface) = interfejs za programiranje aplikacija; Key = ključ (identifikator korisnika)
● Javno dostupni servisi na vebu, koji nude svoje usluge besplatno, ipak nemaju neograničene resurse kojima bi odgovorili na sve pristigle zahteve.
● Da bi se zaštitili od zlonamernih i prekomernih korišćenja resursa koje pružaju, ovi servisi se obično oslanjaju na kontrolu pristupa.
● Kontrola pristupa omogućava da registrovani korisnici u nekom razumnom obimu mogu koristiti usluge servisa.
● API ključ je jedinstven identifikator koji služi za autentifikaciju korisnika kada pristupaju nekom javnom servisu.
● Ovaj ključ ima sličnu funkciju kao i username i password.