SVEUCILISTE U RIJECI

TEHNICKI FAKULTETDiplomski studij racunarstva

Diplomski rad

Web aplikacija za simulaciju ASK, FSK iPSK modulacije

Rijeka, svibanj 2017. Kristian Suljic

0069054424

SVEUCILISTE U RIJECI

TEHNICKI FAKULTETDiplomski studij racunarstva

Diplomski rad

Web aplikacija za simulaciju ASK, FSK iPSK modulacije

Mentor: izv.prof.dr.sc. Miroslav Joler

Rijeka, svibanj 2017. Kristian Suljic

0069054424

Izjava o samostalnoj izradi rada

Izjavljujem da sam samostalno izradio ovaj rad.

Rijeka, svibanj 2017. _______________

Ime Prezime

iii

Zahvala

Zahvaljujem mentoru izv.prof.dr.sc. Miroslavu Joleru na podrsci tijekom pisanjaovoga rada i korisnim raspravama i savjetima. Zahvaljujem obitelji i Martini nabezuvjetnoj podrsci i strpljenju tijekom studiranja. Svima od srca, hvala.

iv

Sadrzaj

Popis slika viii

1 Uvod 1

2 Aspekti bezicnog prijenosa podataka 3

2.1 Interferencija . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.2 Signali . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.3 Antene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.4 Sirenje signala . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.5 Multipleksiranje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

2.6 Modulacija . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.6.1 Amplitudna modulacija . . . . . . . . . . . . . . . . . . . . . 20

2.6.2 Frekvencijska modulacija . . . . . . . . . . . . . . . . . . . . . 22

2.6.3 Fazna modulacija . . . . . . . . . . . . . . . . . . . . . . . . . 23

3 Razvoj web aplikacija 24

3.1 Arhitektura klijent - posluzitelj . . . . . . . . . . . . . . . . . . . . . 24

3.2 Programski jezici . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

3.3 Moderne web tehnologije . . . . . . . . . . . . . . . . . . . . . . . . . 30

v

Sadrzaj

4 Programsko rjesenje 33

4.1 Odabir tehnologija . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

4.1.1 Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

4.1.2 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

4.2 Rasclamba zadatka i realizacija . . . . . . . . . . . . . . . . . . . . . 35

4.2.1 Ulazni podaci . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

4.2.2 Validacija ulaznih podataka . . . . . . . . . . . . . . . . . . . 37

4.2.3 Obrada podataka . . . . . . . . . . . . . . . . . . . . . . . . . 40

4.2.4 Prikaz izlaznih podataka . . . . . . . . . . . . . . . . . . . . . 43

4.2.5 Pohrana/ucitavanje u/iz datoteke . . . . . . . . . . . . . . . . 44

5 Zakljucak 45

Bibliografija 46

Pojmovnik 49

Sazetak 50

vi

Popis slika

2.1 Spektar ferkvencija [1, Frequencies for radio transmission] . . . . . . 4

2.2 Sinusni val i njegovi parametri [5] . . . . . . . . . . . . . . . . . . . 6

2.3 Sinusni signal bez i s pomakom u fazi [1, Signals] . . . . . . . . . . . 7

2.4 Signal u frekvencijskoj domeni [1, Signals] . . . . . . . . . . . . . . . 8

2.5 Signal u faznoj domeni [1, Signals] . . . . . . . . . . . . . . . . . . . 8

2.6 Antena kao sklop s cetiri kanala [1, Antennas] . . . . . . . . . . . . . 9

2.7 Uzorak zracenja antene u stvarnosti [6] . . . . . . . . . . . . . . . . 10

2.8 Hertzov dipol s prikazom otvora za prolaz energije [7] . . . . . . . . 10

2.9 Marconijeva antena [7] . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.10 Pojednostavljena shema pametne antene [8] . . . . . . . . . . . . . . 12

2.11 Domet i stanje signala kroz prostor [1, Propagation] . . . . . . . . . 12

2.12 Atenuacija signala [9] . . . . . . . . . . . . . . . . . . . . . . . . . . 14

2.13 Multipleksiranje, prijenos i demultipleksiranje signala [10] . . . . . . 15

2.14 Prostorno multipleksiranje [1, Multiplexing] . . . . . . . . . . . . . . 16

2.15 Frekvencijsko multipleksiranje [1, Multiplexing] . . . . . . . . . . . . 17

2.16 Vremensko multipleksiranje [1, Multiplexing] . . . . . . . . . . . . . 17

2.17 Kodno multipleksiranje [1, Multiplexing] . . . . . . . . . . . . . . . 18

2.18 Modulacija na strani posiljatelja [1, Modulation] . . . . . . . . . . . 20

2.19 Demodulacija na strani primatelja [1, Modulation] . . . . . . . . . . 21

vii

Popis slika

2.20 Amplitudna modulacija signala [1, Modulation] . . . . . . . . . . . . 21

2.21 Frekvencijska modulacija signala [1, Modulation] . . . . . . . . . . . 22

2.22 Fazna modulacija [1, Modulation] . . . . . . . . . . . . . . . . . . . 23

3.1 Primjer arhitekture klijent-posluzitelj [14] . . . . . . . . . . . . . . . 25

3.2 Uloge HTML, CSS i JavaScript-a u web aplikaciji [17] . . . . . . . . 26

3.3 Primjer HTML koda [18] . . . . . . . . . . . . . . . . . . . . . . . . 27

3.4 Primjer CSS koda [20] . . . . . . . . . . . . . . . . . . . . . . . . . . 28

3.5 Primjer JavaScript koda . . . . . . . . . . . . . . . . . . . . . . . . . 29

3.6 Slikovni prikaz cloud computing-a [23] . . . . . . . . . . . . . . . . . 30

3.7 Amazon Web Services [24] . . . . . . . . . . . . . . . . . . . . . . . 31

4.1 Prikaz sucelja za unos podataka . . . . . . . . . . . . . . . . . . . . 36

4.2 Prikaz rjesenja validacije . . . . . . . . . . . . . . . . . . . . . . . . 37

4.3 Provjera validacijskog pravila . . . . . . . . . . . . . . . . . . . . . . 38

4.4 Petlja provjere svih validacijskih pravila . . . . . . . . . . . . . . . . 39

4.5 Prikaz ASK modulacije s pozitivnom logikom kodiranja . . . . . . . 41

4.6 Prikaz FSK modulacije s pozitivnom logikom kodiranja . . . . . . . 42

4.7 Prikaz PSK modulacije s pozitivnom logikom kodiranja . . . . . . . 42

4.8 Prikaz pozicije canvas elemenata . . . . . . . . . . . . . . . . . . . . 43

4.9 Prikaz opcije za ucitavanje/pohranu podataka u datoteku . . . . . . 44

viii

Poglavlje 1

Uvod

U danasnje doba sve je rasireniji pojam komunikacije. Ako njemu dodamo i pojam

“mobilna” dobivamo vrlo mocnu kombinaciju. U svakom smo trenutku povezani

i dostupni te to cesto uzimamo zdravo za gotovo, a da pritom ni ne pomisljamo

o stvarima i procesima koji se dogadaju u pozadini i koji nam sve to omogucuju.

Pojam mobilna komunikacija obuhvaca tehnologije od osobnih komunikacija te od-

govarajucih sustava (celijski sustavi) do bezicnih podataka i bezicnih mreza.

Jedan od temeljnih aspekata svih nacina bezicne komunikacije je modulacija sig-

nala tj. proces sazimanja podataka da bi se mogli poslati na odredenom nositelju.

Vecina danasnjih bezicnih prijenosa podataka digitalne je vrste i mozemo reci da je

tip modulacije kriticni dio obrade signala, uzimajuci u obzir ogranicenu sirinu dos-

tupnog spektra. Glavni zadatak modulacije signala je prenijeti sto vise podataka,

a da se pritom zauzme sto je manje moguce spektra, te se to naziva spektralnom

efikasnoscu. Postoji vise tehnika koje poboljsavaju spektralnu efikasnost i samim

time bolje utiliziraju spektar.

1

Poglavlje 1. Uvod

U ovom ce se radu obraditi podrucje bezicne komunikacije te nesto detaljnije

opisati vrste modulacija signala gdje ce fokus biti na digitalnoj modulaciji. Digitalna

modulacija je moguca na tri nacina, te se postize modifikacijom:

1. Amplitude

2. Frekvencije

3. Faze

Sofisticiranije metode kombiniraju dvije ili vise varijacija u jednu kako bi poboljsali

spektralnu efikasnost. Ovakvi, temeljni nacini modulacije se jos uvijek koriste za

modulaciju digitalnih signala. Osim digitalne, tu su analogne modulacije te prijenos

signala sirokog spektra.

Kako je prakticni dio ovog rada bio napraviti web aplikaciju za digitalnu modula-

ciju signala, osim teorijske pozadine, biti ce opisane i tehnologije u kojem je program-

sko rjesenje relizirano poput JavaScript-a Hypertext Markup Language (HTML)-a

i Cascading style sheets (CSS)-a. Isto tako, valja naglasiti kako ce se osim teh-

nologija zasluznih za klijentsku stranu aplikacije, rad osvrnuti i na posluziteljsku

stranu i dotaknuti se tema poput Amazon Web Services (AWS) te “serverless” nacina

izvrsavanja aplikacije. Detaljnije u trecem poglavlju.

2

Poglavlje 2

Aspekti bezicnog prijenosa

podataka

Sama modulacija signala nije zasluzna za prijenos podataka te bi steceni dojam u tom

slucaju bio krivi. Kako bi se dobila potpuna slika te uvidjela razina kompleksnosti

bezicnog prijenosa podataka, potrebno je zakoraciti jedan korak unatrag. Upravo se

to u ovom poglavlju dogada te se rad osvrce na temeljne aspekte bezicnog prijenosa

koji su navedeni u nastavku, a potrebni su za razumijevanje problema na visim

slojevima procesa:

• Interferencija - dok kod prijenosa preko zicanog medija ne moramo brinuti o

interferenciji, ona je vrlo bitan faktor u bezicnom prijenosu

• Signal - fizicka prezentacija podataka, “alat” koji nam daje mogucnost opisi-

vanja i prijenosa podataka

• Antena - uredaj koji omogucuje odasiljanje energije, odnosno, elektromagnet-

skih valova koje predaje odasiljac, ali i sazimanje iste iz medija prema prijam-

niku

• Propagacija - nacin na koji se signal siri te posljedice tog procesa. Javlja se

problem udaljenosti prijemnika i odasiljaca

3

Poglavlje 2. Aspekti bezicnog prijenosa podataka

• Multipleksiranje - od velikog znacaja iz razloga sto je medij koji se koristi za

prijenos uvijek isti, te se mora osigurati sto je manja moguca interferencija u

slucaju vise posiljatelja/primatelja

• Modulacija - omogucuje prijenos digitalnih podataka preko komunikacije ana-

lognog tipa (valovi)

2.1 Interferencija

S ciljem izbjegavanja interferencije signala koristimo razlicite frekvencije u razlicite

svrhe, tj. namjene. Iako je interferencija jedan od jacih argumenata za koristenje

razlicitih frekvencija, podrucje i svrha primjene je uvelike utjecala u stvaranju ko-

nvencije koristenja frekvencija. Primjerice, u slucajevima poput prenosenja glasovne

informacije treba paziti na razinu gubitka informacije, jer ako je ona prevelika, stra-

nama koje sudjeluju u komunikaciji ta informacija nece biti korisna. Slika 2.1 prika-

zuje spektar frekvencija koji se koristi za prijenos podataka [1, Frequencies for radio

transmission].

Slika 2.1 Spektar ferkvencija [1, Frequencies for radio transmission]

Iz gore prikazane slike mozemo zakljuciti kako je bezicni prijenos podataka moguc

na velikom broju frekvencija od kojih svaka ima svoje prednosti i mane, na teme-

lju kojih nalazi svoje mjesto u primjeni. Slika prikazuje spektar elektromagnetskog

zracenja te njihovu klasifikaciju po valnoj duljini. Koncentracija ce biti na radio i

mikrovalnom spektru iz razloga sto se te klase koriste za bezicnu komunikaciju [2].

Radio valovi su valovi fekvencije od 3 kHz do 300 MHz ciji je domet 1 mm,

4

Poglavlje 2. Aspekti bezicnog prijenosa podataka

odnosno 100 km. Generirani se radio valovi koriste za fiksnu i mobilnu radio komu-

nikaciju, navigacijske sustave, komunikacijske satelite i brojne druge primjene. Nas-

taju kao rezultat rada radio odasiljaca, a primaju se pomocu prijemnika podesenog

na odredenu frekvenciju, te se na odredenim frekvencijama valovi mogu odbijati od

okoline i Zemljine ionosfere pa nije nuzno da se primatelj i posiljatelj nalaze u vid-

nom polju kako bi komunikacija bila uspjesna [3]. Frekvencijski pojasevi koji se

klasificiraju kao radio valovi su:

• Very Low Frequency (VLF)

• Low Frequency (LF)

• Medium Frequency (MF)

• High Frequency (HF)

• Very High Frequency (VHF)

Mikrovalovi imaju kracu valnu duljinu te im se za donju granicu frekvencije uzima

300 MHz, dok je gornja 300 GHz. Naziv sugerira kako je valna duljina u odnosu na

radio valove malena, te je raspon od 100 cm do 1 mm. Vazna karakteristika mikro-

valova jest da se prenose unutar vidnog polja sto ogranicava uspjesnost komunikacije

na vecim udaljenostima, ali su bez obzira na to siroko upotrebljavani za komunika-

ciju od tocke do tocke, radarske tehnologije, komunikaciju u svemiru, kod sustava

za izbjegavanje kolizija i drugih [4]. Frekvencijski pojasevi koji se klasificiraju kao

mikrovalovi jesu:

• Ultra High Frequency (UHF)

• Extremely High Frequency (EHF)

• Super High Frequency (SHF)

2.2 Signali

Kao sto je vec istaknuto u poglavlju 2, signali su fizicka prezentacija podataka te

korisnici nekog komunikacijskog sustava mogu razmjenjivati podatke jedino pomocu

signala, tj. pretvorbe podataka u signale i obrnuto. Osim toga, signali su isto tako

5

Poglavlje 2. Aspekti bezicnog prijenosa podataka

funkcije opisane vremenom i lokacijom, te je pomocu tih parametara moguce opisati

podatke koji se salju. Signali pogodni za bezicnu komunikaciju su periodicni signali

poput sinusnih valova koji ujedno sluze kao nositelji [1, Signals].

Slika 2.2 Sinusni val i njegovi parametri [5]

Na slici 2.2 prikazan je sinusni val i njegovi parametri te iz nje mozemo zakljuciti

kako signal mozemo prikazati u obliku funkcije na sljedeci nacin:

y(t) = At sin(ωt+ ϕt)

Ako pritom znamo da je ω = 2πf dobivamo konacni izraz:

y(t) = At sin(2πftt+ ϕt)

Parametri signala su amplituda A, frekvencija f i faza, odnosno fazni pomak.

At i ft su u formuli prikazani na taj nacin jer su to faktori koji se mogu mijenjati

kroz vrijeme. Frekvencija ft opisuje periodicnost signala kojemu je perioda T = 1/f .

Preostao je samo parametar faznog pomaka koji odreduje pomak u fazi u odnosu na

isti signal bez pomaka [1, Signals].

6

Poglavlje 2. Aspekti bezicnog prijenosa podataka

Slika 2.3 Sinusni signal bez i s pomakom u fazi [1, Signals]

Slika 2.3 prikazuje sinusni signal bez pomaka (puna linija) i s pomakom (ispre-

kidana linija) u fazi, sto znaci da se razlikuju u fazi dok su amplituda i frekvencija

ostali isti. U poglavlju 2.6.3 ce se detalnije opisati na koji je nacin moguce opisati po-

datke koristeci fazni pomak. Dakle, sinusni valovi su vrlo pogodni jer je pomocu njih

moguce konstruirati svaki periodicni val koristeci se njihovim funkcijama, a upravo

to nam govori osnovna Fourier-ova jednadzba koja glasi:

y(t) =1

2c+

∞∑n=1

an sin(2πnft) +∞∑n=1

bn cos(2πnft)

Kako u jednadzbi suma ide od 1 do ∞ mozeme se zakljuciti da je potreban be-

skonacan broj sinusnih funkcija kako bi se konstruirala proizvoljna periodicka funkcija

gdje se pri konstruiranju iste, frekvencije povecavaju proporcionalno povecanju broja

n. U stvarnosti, svaki je medij okarakterziran svojom propusnoscu, sto znaci da u

svakom mediju postoji gornja granica frekvencije. Stoga je dovoljno znati da se zbog

tih ogranicenja periodicki signali stvaraju iz ogranicenog broja sinusnih funkcija te

da se odasiljani signal moze shvatiti kao signal konstruiran od jedne ili vise sinusnih

funkcija [1, Signals].

7

Poglavlje 2. Aspekti bezicnog prijenosa podataka

Signal mozemo prikazivati na vise nacina, odnosno u vise domena. Domene su

vremenska, frekvencijska i fazna te su nacini detaljnije objasnjeni u nastavku [1,

Signals]:

• Vremenska - pogledom na sliku 2.3 vidi se kako je amplituda A prikazana na

grafu u odnosu na vrijeme t. Prikazivanje u vremenskoj domeni nailazi na

probleme u slucaju kada se signal sastoji od puno razlicitih frekvencija te je u

tom slucaju bolji prikaz u frekvencijskoj domeni

• Frekvencijska - na slici ispod prikazana je amplituda signala u odnosu na frek-

venciju. Na grafu postoji samo jedan graficki prikaz sto nam govori da je signal

opisan jednom frekvencijom.

Slika 2.4 Signal u frekvencijskoj domeni [1, Signals]

• Fazna - prikaz stanja faze, pokazuje amplitudu M signala i njezin kut u odnosu

na x-os koji predstavlja pomak u fazi.

Slika 2.5 Signal u faznoj domeni [1, Signals]

8

Poglavlje 2. Aspekti bezicnog prijenosa podataka

2.3 Antene

Kako je glavni cilj bezicne komunikacije eliminacija glavnog medija zicane komunika-

cije - zice, potrebno je rjesenje koje ce odaslati signal kroz prostor koji dijeli krajnje

tocke komunikacijskog kanala. Upravo tome sluze antene, uredaji koji pretvaraju

valove koji se sire zicom u valove koji se odasilju prostorom te su zasluzni za oba

smjera komunikacije. Naime, antene primaju signal u obliku elektromagnetskih va-

lova te ih prosljeduju prijemniku, ali isto tako odasilju elektromagnetske valove koje

je proizveo odasiljac sto znaci da se sve karakteristike antene mogu koristiti za prijem

i odasiljanje signala [1, Antennas].

Slika 2.6 Antena kao sklop s cetiri kanala [1, Antennas]

Kada se pak spominju u kontekstu povezanosti, antene se cine kao sklopovi s

dvostrukim kanalom iako u stvarnosti imaju cetiri kanala, sto je prikazano na slici

2.6 . Naime, kanal koji nije povezan na prijemnik/odasiljac, ipak je spojen na prostor,

odnosno okolinu koja uvelike utjece na elektricna svojstva antene, a time i na sam

rad iste.

9

Poglavlje 2. Aspekti bezicnog prijenosa podataka

U teoriji je antena izotropni radijator tj. tocka u prostoru koja zraci energiju

jednako u svim smjerovima (x, y i z os). Medutim kako to inace biva, praksa donosi

odredene anomalije u odnosu na teorijsku pozadinu, pa se tako zna da u stvarnosti

sve antene odasilju energiju usmjereno sto znaci da zracenje nije jednako u svim

smjerovima [1, Antennas].

Slika 2.7 Uzorak zracenja antene u stvarnosti [6]

Najjednostavniji oblik antene je elektricni dipol poznat kao Hertzov dipol koji se

sastoji od dva linearna vodica jednakih duljina, razdvojenih malim prostorom koji

sluzi kao otvor za ulaz energije [7].

Slika 2.8 Hertzov dipol s prikazom otvora za prolaz energije [7]

10

Poglavlje 2. Aspekti bezicnog prijenosa podataka

Antena je, gledajuci sa stajalista elektrotehnicke znanosti, uredaj s kompleksnom

RLC mrezom. Iz tog ce se razloga tokom rada na razlicitim ferkvencijama stvarati

razliciti induktivni ili kapacitivni otpori, dok ce se na specificnim frekvencijama mag-

nitude dvaju otpora ponistiti i rezultirati rezonantnom antenom. To daje pozadinu

zakljucku kako duljina antene ne moze biti proizvoljna. Najcesce se uzima duljina

koja je jednaka polovini valne duljine, λ/2 ili pak cetvrtini, λ/4 kako je prikazano na

slici ispod (Marconijeva antena) [7].

Slika 2.9 Marconijeva antena [7]

Naprednije rjesenje u odnosu na konvencionalne antene je postignuto s takozva-

nim pametnim antenama, koje kombiniraju polje antena s algoritmima za obradu

signala kako bi optimizirale uzorak zracenja i prijema u odnosu na karakteristike

signala i okruzja u kojem se isti propagira. Pametne se antene mogu prilagodavati

promjenama kao sto su anomalije u jakosti prijema i uvjeta u kojem se odasiljanje

odvija te se isto tako mogu koristiti za formiranje prijenosnih zraka. Usmjerene an-

tene mogu pratiti korisnike pojedinacno, ali isto tako i usmjeravati zracenje prema

baznim stanicama (kod celijskih sutava) i na taj nacin smanjuju apsorpciju zracenja

kod ljudi. Rjesenje pametnih antena je danas realizirano u podrucjima poput obrade

zvucnog signala, radara te celijskim sustavima poput Wide Code Division Multiple

Access (W-CDMA), Universal Mobile Telecommunications System (UMTS) i Long

Term Evolution (LTE) [8].

11

Poglavlje 2. Aspekti bezicnog prijenosa podataka

Slika 2.10 Pojednostavljena shema pametne antene [8]

2.4 Sirenje signala

Propagacija, odnosno sirenje signala kod bezicnih mreza se uvelike razlikuje od pro-

pagacije kod mreza povezanih zicom. Zica pomaze u odredivanju smjera sirenja

signala, te dok god ona nije fizicki ostecena ili prekinuta, opisana je istim karakte-

ristikama u svakoj tocki. Moguce je deterministicki odrediti ponasanje signala koji

putuje zicom, primjerice jakost prijema u odnosu na duljinu zice, dok je kod bezicnog

prijenosa takva prediktivnost moguca samo kod prijenosa podataka u vakuumu [1,

Propagation].

Slika 2.11 Domet i stanje signala kroz prostor [1, Propagation]

12

Poglavlje 2. Aspekti bezicnog prijenosa podataka

Na slici 2.11 je prikazano stanje signala u prostoru koji je prikazan u obliku

vektora. Ako gledamo izvana prema unutra, najmanja kruznica predstavlja podrucje

pouzdanog prijenosa, dok ona najveca predstavlja prostor najmanje pouzdanosti sto

je detaljnije opisano u nastavku:

• Domet prijenosa - unutar odredenog radijusa posiljatelja, moguc je prijenos

podataka s dovoljno malom razinom pogreske da bi se komunikacija uspostavila

u oba smjera

• Domet detekcije - unutar sljedeceg veceg raspona radijusa, detekcija prijenosa

te sam prijenos su moguci, ali je razina pogreske prevelika kako bi se uspostavila

uspjesna komunikacija

• Domet inteferencije - u trecem rasponu radijusa postoji mogucnost da se odas-

lani signal stopi s pozadinskim sumom, te ga primatelj nece moci detektirati

Medutim, poznato je kako se bezicni prijenos u svakodnevnom zivotu ne odvija

u vakuumu pa na njega utjecu atmosfera, prepreke(planine, zgrade), pokretne mete

itd. Iz tog ce se razloga ranije opisani dijagram stanja signala u prostoru, iz pravilno

opisanih kruznica pretvoriti u najmanju ruku cudne poligone oblikovane vremenom

i frekvencijom. Opisani utjecaji su zasluzni za slabljenje signala poznato pod poj-

mom atenuacije ili prigusenja koje raste s udaljenoscu posiljatelja od primatelja, a

pospjesuju ga razne prepreke na tom putu. Postoji vise vrsta prigusenja signala [1,

Propagation]:

• Blokiranje signala - sto je prepreka veca, prigusenje prerasta u blokiranje ili

zasjenjivanje signala, a efekt je naglaseniji sto je frekvencija visa sto znaci da

je signal slicniji svjetlu pa cak i mala prepreka moze u potpunosti blokirati

signal

• Odbijanje (refleksija) signala - ako je prepreka na koju signal nailazi veca u

odnosu na valnu duljinu signala, isti ce se reflektirati od prepreke na koju je

naisao. Radi apsorpcije dijela energije od strane prepreke, reflektirani signal

nece biti istoga intenziteta u odnosu na signal prije refleksije

• Lom (refrakcija) signala - pojava koja se javlja radi ovisnosti brzine signala o

gustoci medija kroz koji putuje. Naime, kada signal naide na gusci mediji, lomi

13

Poglavlje 2. Aspekti bezicnog prijenosa podataka

se u smjeru istoga.

• Rasprsivanje signala - pojava kada se val istodobno reflektira u vise valova s

manjom amplitudom u vise smjerova nakon udara u male i neravne povrsine

• Difrakcija signala - pojava vrlo slicna refrakciji signala gdje se za razliku od

refrakcije signal savija kroz medij, dok kod difrakcije dolazi do savijanja oko

neke prepreke

Slika 2.12 Atenuacija signala [9]

14

Poglavlje 2. Aspekti bezicnog prijenosa podataka

2.5 Multipleksiranje

Multipleksiranje je jedno od temeljnih mehanizama u svim komunikacijskim susta-

vima, bilo onima koji kao mediji koriste zicu ili onima koji kao mediji koriste prostor

(bezicne mreze). Svrha multipleksiranja je omoguciti komunikaciju vise korisnika

preko istog medija bez ili s minimalnom inteferencijom, a to postize na nacin da

se vise signala kombinira u jedan signal koji se salje zajednickim medijem. Multi-

pleksiranjem se jedan fizicki kanal dijeli u nekoliko logickih kanala gdje svaki nosi

odredenu informaciju namjenjenu odredenom primatelju, na cijoj strani onda dolazi

do demultipleksiranja, odnosno procesa izvlacenja informacije namjenjene primatelju

[10].

Slika 2.13 Multipleksiranje, prijenos i demultipleksiranje signala [10]

Kada se radi o bezicnim sustavima, multipleksiranje se odvija u cetiri domene:

prostorna, vremenska, frekvencijska i kodna. Zadatak multipleksiranja u svakoj od

domena jest dodijeliti onoliko resursa svakom komunikacijskom kanalu, na nacin da se

postigne minimalna interferencija i maksimalna iskoristivost medija [1, Multiplexing].

U nastavku su opisane metode multipleksiranja signala:

15

Poglavlje 2. Aspekti bezicnog prijenosa podataka

• Prostorno multipleksiranje - Space Division Multiplexing (SDM) je metoda

multipleksiranja u kojoj komunikacijski kanali koriste prostore koji su medusobno

fizicki odvojeni. Vazno je napomenuti kako se dometi interferencije (slika 2.11)

prostora svakog od komunikacijskih kanala ne smiju preklapati. SDM je najjed-

nostavniji oblik multipleksiranja, te kao takav nije optimalan u slucaju velikog

broja komunikacijskih kanala zbog potrebe za velikim prostorom [1, Multi-

plexing]

Slika 2.14 Prostorno multipleksiranje [1, Multiplexing]

• Frekvencijsko multipleksiranje - Frequency Division Multiplexing (FDM) radi

na nacin da frekvencijsku domenu dijeli na manje frekvencijske pojaseve koji

se ne preklapaju, te svakom komunikacijskom kanalu dodjeljuje jednu od frek-

vencija. Ova vrsta multipleksiranja je pogodna za odasiljanje vise radio stanica

na malom prostoru, gdje svaka od radio stanica odasilje na zasebnoj frekven-

ciji. Primatelj, ukoliko zeli primati signal odredene radio stanice mora po-

desiti prijemnik na odredenu frekvenciju. Medutim, ovakav nacin modulacije

takoder ima nedostataka. U primjeru s radio stanicama koji je naveden ranije,

odasiljanje signala se odvija kroz dugacak period vremena, dok se primjerice,

kod mobilnih (celijskih sustava) odasiljanje vrsi u kracim vremenskim peri-

odima. Dodjeljivanje zasebnih frekvencija svakom komunikacijskom scenariju

u tom slucaju nije optimalno [1, Multiplexing]

16

Poglavlje 2. Aspekti bezicnog prijenosa podataka

Slika 2.15 Frekvencijsko multipleksiranje [1, Multiplexing]

• Vremensko multipleksiranje -Time Division Multiplexing (TDM) djeluje na

nacin da svakom kanalu dodijeli cijeli frekvencijski pojas na odredeno vri-

jeme, te na taj nacin svi kanali koriste isti frekvencijski pojas, ali u razlicitim

vremenskim tockama. Prednost ovakvog nacina multipleksiranja je ta sto se

posiljateljima s vecom kolicinom informacija za prijenos, moze dodijeliti vise

vremena za koristenje frekvencijskog pojasa u odnosu na posiljatelje s malom

kolicinom informacija koji dobivaju manje vremena. Medutim, nedostatak ove

metode je taj sto je potrebna precizna sinkronizacija svih posiljatelja kako ne

bi doslo do interferencije u komunikacijskom kanalu, dok na strani primatelja

nije dovoljno podesiti frekvenciju na kojoj ce primati podatke vec za to treba

primati u tocno odredenom vremenskom periodu [1, Multiplexing]

Slika 2.16 Vremensko multipleksiranje [1, Multiplexing]

17

Poglavlje 2. Aspekti bezicnog prijenosa podataka

• Kodno multipleksiranje - Code Division Multiplexing (CDM) koristi identifika-

cijske kodove kako bi se signali razlikovali unutar zajednickog medija. Svakom

je signalu dodijeljena jedinstvena sekvenca bitova, koji zajedno s originalnim

signalom cine novi oblik podataka. Primatelj koji zna kod koji je odredenom

signalu dodijeljen, moci ce rekonstruirati originalni signal oduzimanjem bi-

tovne sekvence. Najveca prednost ovakvog nacina multipleksiranja jest inhe-

rentna sigurnosna karakteristika koja dolazi upotrebom kodova, te koja isto

tako rjesava problem interferencije signala u zajednickom mediju. Kodna do-

mena je ogromna u odnosu na ostale, te dodjeljivanje bitovne sekvence svakom

kanalu ne bi trebalo stvarati probleme. Glavni nedostatak naime, jest komplek-

snost demultipleksora, sinkronizacija s posiljateljem i kontrola jacine signala [1,

Multiplexing]

Slika 2.17 Kodno multipleksiranje [1, Multiplexing]

18

Poglavlje 2. Aspekti bezicnog prijenosa podataka

2.6 Modulacija

U poglavlju 2.2 vec je napravljen osvrt na karakteristike signala i kako su sinusni

valovi (funkcije) pogodni za bezicni prijenos podataka. Sinusna funkcija ima tri pa-

rametra po kojima se moze modulirati signal u odnosu na podatke koje je potrebno

prenijeti, a to su: amplituda At, frekvencija ft i faza (fazni pomak) ϕt. Digitalna mo-

dulacija sluzi kako bi digitalne podatke (bitove, odnosno 0 i 1) pretvorili u analogni

signal, te ih poslali preko medija koji podrzava iskljucivo analogni prijenos podataka,

sto je slucaj kod bezicne komunikacije. Tri osnovne metode kojima se digitalni po-

daci pretvaraju u analogni oblik su amplitudna modulacija (Amplitude Shift Keying

(ASK)), frekvencijska modulacija (Frequency Shift Keying (FSK)) i fazna modulacija

(Phase Shift Keying (PSK)) [1, Modulation].

Osim digitalne modulacije, da bi bezicni prijenos bio moguc, signal je potrebno

dodatno modulirati analognom modulacijom kako bi se sredisnja frekvencija sig-

nala u osnovnom frekvencijskom pojasu prilagodila valu nosiocu. Prilagodavanje

je potrebno, jer propusnost direktno korelira s frekvencijom signala u osnovnom

frekvencijskom pojasu, primjerice ako imamo propusnost od 1 Mbit/s, digitalnom

modulacijom dobiva se analogni signal frekvencije 1 MHz[1, Modulation]. Osvrcuci

se na ranije dijelove rada 2.3, 2.4 i 2.5 proizlazi zakljucak kako postoji vise razloga

zbog kojih bezicni prijenos signala koji je rezultat samo digitalne modulacije, nije

moguc:

• Antena - mora biti odredene velicine u odnosu na valnu duljinu signala koji

se odasilje/prima kako bi bila efektivna. U slucaju signala s frekvencijom od

1 MHz antena bi morala biti nekoliko stotina metara visoka kako bi taj signal

mogla primiti te ga tocno proslijediti prijemniku.

• Medij - sve navedene karakteristike u sekciji 2.4 - prigusenje, blokiranje, refrak-

cija, rasprsivanje i ostale, direktno ovise o valnoj duljini signala te se u odnosu

na primjenu odabire optimalna valna duljina, odnosno frekvencijski pojas

• Multipleksiranje - frekvencijsko multipleksiranje ne bi bilo moguce u slucaju

koristenja frekvencije osnovnog frekvencijskog pojasa. Zbog toga, analogna mo-

dulacija digitalno moduliranog signala, ujednacava frekvenciju s frekvencijom

19

Poglavlje 2. Aspekti bezicnog prijenosa podataka

vala nosioca, te sto je frekvencija veca to je veca iskoristiva sirina frekvencijskog

pojasa

U nastavku je prikazan pojednostavljeni dijagram odasiljanja digitalnih podataka

pri cemu je prvi korak digitalna modulacija signala koristeci jednu od metoda koje ce

biti opisane u nastavku. Nakon toga, analogna se modulacija pobrine da rezultiranom

signalu digitalne modulacije ujednaci frekvenciju u odnosu na signal nosioc te se na

posljetku takav signal odasilje preko antene [1, Modulation].

Slika 2.18 Modulacija na strani posiljatelja [1, Modulation]

Primatelj, s druge strane, dobiva analogni signal preko antene, te ga demodulira u

signal osnovnog frekvencijskog pojasa pomocu informacije o frekvenciji vala nosioca.

Kako bi primatelj uspjesno detektirao o kakvoj se bitovnoj informaciji radi (0 ili

1), mora se sinkronizirati s posiljateljem na nacin koji odredena vrsta modulacije

iziskuje. Nakon toga primatelj moze razlikovati logicke informacije 1 i 0, te dolazi

do rekonstrukcije originalnih podataka [1, Modulation].

2.6.1 Amplitudna modulacija

Amplitudna modulacija je najjednostavniji oblik digitalne modulacije signala, koja

opisuje binarne podatke razlicitim razinama amplitude. Primjerice, ako je vrijednost

amplitude razlicita od 0, znaci da je primljena informacija 1 dok je u suprotnom

0. Prednost je ta sto takva vrsta modulacije zahtjeva malu propusnost, medutim

nedostaci su naglaseniji iz razloga sto su utjecaji na signal poput suma, prigusenja,

20

Poglavlje 2. Aspekti bezicnog prijenosa podataka

Slika 2.19 Demodulacija na strani primatelja [1, Modulation]

refleksije i ostalih, koji su vrlo ucestali u bezicnoj komunikaciji, prenaglaseni i nije

moguce garantirati stabilnu i konstantnu razinu amplitude [11]. Stoga, nije tipicno

koristiti amplitudnu modulaciju u bezicnoj komunikaciji, sto ne znaci da se ona ne

koristi. Primjerice, u optickom prijenosu podataka se koristi amplitudna modulacija,

gdje nedostatak svjetlosnog vala predstavlja 0, dok svjetlosni impuls predstavlja 1

[1, Modulation].

Slika 2.20 Amplitudna modulacija signala [1, Modulation]

21

Poglavlje 2. Aspekti bezicnog prijenosa podataka

2.6.2 Frekvencijska modulacija

Frekvencijska modulacija je metoda modulacije signala koja se cesto koristi u bezicnom

prijenosu podataka te je isto tako poznata kao binarna frekvencijska modulacija (Bi-

nary Frequency Shift Keying (BFSK)). Radi na nacin da logicku 1 predstavlja jedna

ferkvencija f1, dok 0 predstavlja druga frekvencija f2. Nezeljena pojava pri koristenju

te vrste modulacije jest skok(ovi) u fazi koji uzrokuje diskontinuitet i pospjesuje in-

terferenciju, pa se kao protumjera koristi varijacija frekvencijske modulacije, poznata

kao modulacija s kontinuiranom fazom (Continuous Phase Modulation (CPM)) [1,

Modulation]. Naime, za razliku od obicne frekvencijske modulacije, pri CPM modu-

laciji se faza ne resetira na svakom segmentu informacije, vec se pazi da faza bude

kontinuirana. Prednost u slucaju koristenja ove modulacije jest u jednostavnosti pri-

jemnika, odnosno demodulatora koji pomocu dva filtera - jedan za svaku ferkvenciju,

moze na jednostavan nacin rekonstruirati poslanu informaciju [12]. Poznata varija-

cija frekvencijske modulacije je modulacija s najmanjim pomakom (Minimmum Shift

Keying (MSK)) kojoj je jedan od glavnih zadataka rijesavanje problema skokova u

fazi.

Slika 2.21 Frekvencijska modulacija signala [1, Modulation]

22

Poglavlje 2. Aspekti bezicnog prijenosa podataka

2.6.3 Fazna modulacija

Fazna modulacija je vrsta modulacije signala kojom se opisuju digitalni podaci na

nacin da se mijenja fazni pomak referentnoga signala. Naime, svaki puta kada dode

do promjene logicke vrijednosti, referentnom se signalu desava fazni pomak od 180◦

ili π. Na strani primatelja, demodulator odreduje fazu primljenog signala te pomocu

te informacije radi rekonstrukciju originalnog podatka [13].

Kako osnovna fazna modulacija opisana iznad koristi samo jednu varijantu faznog

pomaka kako bi se opisala informacija, ista se na prilicno jednostavan nacin moze

unaprijediti i to pomocu kvadratne fazne modulacije (Quadrature Phase Shift Keying

(QPSK)). Ono u cemu dolazi do poboljsanja jest brzina prijenosa, a da je pritom

propusnost kanala ostala ista, a to se postize na nacin da se dvije logicke informacije

(dva bita) kodiraju u jednom faznom pomaku [1, Modulation].

Slika 2.22 Fazna modulacija [1, Modulation]

Ovime je zakljuceno poglavlje o bezicnom prijenosu koje je pruzilo solidan temelj

za razumijevanje razine kompleksnosti i logike konacnog programskog rjesenja.

23

Poglavlje 3

Razvoj web aplikacija

Kako je izrada web aplikacije sastavni dio ovog rada, nakon teorijske pozadine o

bezicnoj komunikaciji, u nastavku ce se pokusati postaviti temelji za razumijevanje

rada i koraka izrade web aplikacije te se koncentrirati na tehnologije koristene pri

izradi programskog rjesenja i njihove temeljne znacajke.

3.1 Arhitektura klijent - posluzitelj

Klijentsko-posluziteljska arhitektura je struktura koju prati neka aplikacija i zasluzna

je za odredivanje poslova izmedu pruzatelja usluga - posluzitelja i korisnika usluga

- klijenata [14]. Klijent i posluzitelj se razlikuju u nekoliko aspekata, primjerice na

posluzitelju se moze izvrsavati vise posluziteljskih programa koji dijele svoje resurse

s klijentima, dok klijenti ne dijele svoje resurse nego samo potrazuju uslugu. Pojed-

nostavljeno, dva programa se izvrsavaju u isto vrijeme na relaciji klijent-posluzitelj,

a to su [15]

• Program koji se izvrsava na posluzitelju i odgovara na upite klijenta

• Program koji se izvrsava u web pregledniku (klijent) i odgovara na akcije ko-

risnika

Postoje razne konvencije kada se govori o web aplikacijama, a jedna od njih

savjetuje kakva bi raspodjela tereta trebala biti izmedu posluzitelja i klijenta, pa iz

24

Poglavlje 3. Razvoj web aplikacija

toga slijedi [15]:

Posluzitelj:

• Izvrsava bilo koji program koji se moze pokrenuti na racunalu i odgovarati na

zahtjeve klijenta

• Sprema podatke

• Ne odgovara na proizvoljne zahtjeve vec samo na unaprijed odredene

Klijent:

• Izvrsavanje HTML, CSS ili JavaScript koda

• Odgovara na akciju korisnika

• Stvara web stranicu ili aplikaciju kao finalni proizvod

Slika 3.1 Primjer arhitekture klijent-posluzitelj [14]

Web aplikacija je dakle, programsko rjesenje koje koristi klijentsko-posluziteljsku

arhitekturu te se izvrsava u web pregledniku, a sve u svrhu pruzanja odredene

funkcionalnosti/usluge potencijalnom korisniku. Koriste web datoteke napisane u

standardiziranom formatu poput HTML-a i JavaScript-a, koje u danasnje vrijeme

podrzavaju svi web preglednici.

25

Poglavlje 3. Razvoj web aplikacija

Iako postoji puno vrsta web aplikacija i stranica, detaljnije ce se opisati jed-

nostranicne aplikacije (Single Page Application (SPA)), jer se upravo o takvoj vrsti

aplikacije radi u sklopu ovog rada. To su web aplikacije koje, kako naziv sugerira,

imaju jednu stranicu s ciljem pruzanja korisnickog iskustva slicnog desktop apli-

kacijama. Jos jedna karakteristika im je da se sav potreban kod “povuce” s jednim

ucitavanjem stranice, te se tokom koristenja vise ne ucitava. Isto tako, takvu je vrstu

web aplikacije moguce pokrenuti na lokalnom racunalu koristeci URI koji pokazuje

na lokaciju datoteke u datotecnom sustavu. Zbog te je funkcionalnosti moguce s

posluzitelja povuci potrebnu datoteku te je koristiti lokalno, a da pritom ne ovisi o

mogucnosti povezivanja s posluziteljem [16].

3.2 Programski jezici

Web aplikacija koja je ce biti detaljnije opisana u poglavlju 4 koristi HTML jezik

za oznacavanje i CSS stilski jezik za izgled, dok se funkcionalnost aplikacije i samih

grafickih elemenata postigla JavaScript skriptnim programskim jezikom koji je veoma

rasprostranjen i koristi se uglavnom za programiranje aplikacija na klijentskoj strani.

Slika 3.2 Uloge HTML, CSS i JavaScript-a u web aplikaciji [17]

26

Poglavlje 3. Razvoj web aplikacija

HTML

HTML je standardizirani jezik za oznacavanje koji sluzi za izradu web stranica i

aplikacija te zajedno s CSS i JavaScript jezicima koji se spominju u nastavku cini

trozubac tehnologija za razvoj web programskih rjesenja. Nakon sto je objavljen

1995. godine kao standard prema kojemu se buduce implementacije trebaju ravnati,

i dan danas sluzi kao standard, sa zadnjom verzijom 5.1 objavljenom krajem 2016.

godine. Osim sto web preglednici primaju HTML dokumente od strane posluzitelja

ili lokalne pohrane i prikazuju u obliku interaktivnih web stranica, HTML opisuje

web stranicu pomocu semantickih znakova koji odreduju njenu strukturu [18].

Pruza mogucnost za stvaranje strukturiranih dokumenata koristenjem strukturne

semantike za tekst poput zaglavlja, paragrafa, lista, poveznica itd. Osim toga, pruza

mogucnost ugradnje programa pisanih skriptnim jezicima koji utjecu na funkcional-

nost i sadrzaj web stranica, a kompatibilnost s opisnim jezikom CSS omogucuje

definiranje izgleda [18].

Slika 3.3 Primjer HTML koda [18]

27

Poglavlje 3. Razvoj web aplikacija

CSS

CSS je opisni programski jezik pomocu kojeg se opisuje graficki prikaz dokumenta

napisanog u nekom programskom jeziku za oznacavanje. Iako se uglavnom koristi za

postavljanje stilskih karakteristika sucelja napisanih u HTML-u, moze se koristiti i u

drugim jezicima za oznacavanje (XML, SVG, XUL) te za stiliziranje web i mobilnih

aplikacija. Pocetke je vidio 1996. godine kada je objavljena prva specifikacija, a

zadnja verzija je na snazi od 2012. godine kada je objavljena specifikacija za CSS 3

[19].

CSS je primarno zamisljen da cini razliku izmedu prikaza i sadrzaja ukljucujuci

aspekte poput boja i fontova. Ta razlika moze unaprijediti sadrzaj na nacin da bude

pristupacniji i pruza vecu fleksibilnost i kontrolu sadrzaja. Prednost CSS-a je ta sto

radi razdvajanja stilskih karakteristika od sadrzaja, promjene na stilu i grafickom

dizajnu se mogu raditi na jednom mjestu, a da svejedno utjece na n broj HTML

dokumenata [19].

Slika 3.4 Primjer CSS koda [20]

28

Poglavlje 3. Razvoj web aplikacija

JavaScript

JavaScript je standardizirani skriptni programski jezik kojeg velika vecina web stra-

nica koristi, te ga svi moderni web preglednici podrzavaju bez dodatnog podesavanja.

Podrzava objektno orijentirani, proceduralni i funkcijski nacin programiranja te ima

dostupan Aplication Programming Interface (API) za manipulaciju textom, po-

ljima, datumima itd. Medutim, ne ukljucuje/podrzava ulazno-izlazne operacije po-

put mreznih operacija, pohrane, graficke operacije za koje se oslanja na okruzenje u

kojem se izvrsava [21].

Takoder, koristi se u okruzenjima koji nisu bazirani na web-u kao sto su PDF

dokumenti, specificni preglednici i desktop alati. Zbog novijih i brzih virtualnih

masina i platformi izgradenih na njima sve je veca popularnost JavaScript-a kao jezika

za programiranje aplikacija na strani posluzitelja. Ostale primjene su u industriji

video igrica, razvoju mobilnih aplikacija itd [21].

Slika 3.5 Primjer JavaScript koda

29

Poglavlje 3. Razvoj web aplikacija

3.3 Moderne web tehnologije

Kako je receno u uvodu rad ce se osvrnuti i na moderne web tehnologije i servise

poput AWS-a, odnosno web usluga koje pruza kompanija Amazon iz razloga sto se

u danasnje vrijeme sve vise naginje prema Internet of Things (IoT) rjesenjima koje

je svojim alatima AWS ucinio pristupacnijima. Glavna znacajka AWS servisa je

pruzanje usluge procesiranja podataka u oblaku (Cloud Computing). Kao sto sam

naziv sugerira, procesiranje ne odvija na lokalnom racunalu te se stoga ne koriste

njegovi resursi, vec se pruzatelju te usluge uputi zahtjev za odredenom kolicinom

resursa (memorije, procesora, pohrane itd.) koji se onda koriste.

Procesiranje podataka u oblaku ima nekoliko prednosti. Omogucuje izbjegava-

nje troskova potrebnih za infrastruktiru (posluzitelji), te posljedicno daje odredenu

bezbriznost organizacijama da se koncentriraju na srz njihovog poslovanja. Ukoliko

dode do naglog porasta poslovnih zahtjeva, moguce je minimalnim naporom povecati

obim resursa kako bi se zahtjevi ispunili, a kada bi nakon toga poslovanje stagniralo,

jednako lako je smanjiti potrebne resurse i na taj se nacin stedi novac. Medutim,

pruzatelji takvih usluga najcesce koriste “plati koliko potrosis” model, koji u slucaju

nedovoljno dobrog pracenja potrosenih resursa moze rezultirati velikim troskovima

[22].

Slika 3.6 Slikovni prikaz cloud computing-a [23]

30

Poglavlje 3. Razvoj web aplikacija

Iako AWS pruza brojne usluge, tocnije njih preko 70, poput procesiranja, pohrane,

mreznih operacija, baza podataka, analize podataka, razvoja, upravljanja i drugih,

detaljnije ce se opisati usluga pohrane poznata pod nazivom “S3” iz razloga sto je ona

koristena u implementaciji web aplikacije koja ce biti opisana u sljedecem poglavlju

[?].

Amazon S3 (Amazon Simple Storage Service) pruza skalabilnu pohranu koja sluzi

za cuvanje ili koristenje podataka. Koristi se u mnoge svrhe a neke od njih su:

• Cuvanje i arhiviranje podataka

• Pohrana i distribucija podataka

• Analiza podataka (Big Data)

• Posluzivanje statickih web stranica

• Zastita podataka

Slika 3.7 Amazon Web Services [24]

Posebno je zanimljiva usluga posluzivanja statickih web stranica, jer to omogucuje

korisnicima da svoje web aplikacije ucine dostupnima u vrlo kratkom vremenu, bez

trazenja nekog javno dostupnog posluzitelja s upitnom sigurnoscu ili pak dezigniranje

lokalnog racunala da bude posluzitelj koji je javno dostupan, sto isto tako dovodi u

pitanje sigurnost i komociju. Koristi se na nacin da se na Amazon S3 servis spremi

31

Poglavlje 3. Razvoj web aplikacija

datoteka koja sadrzi izvorni kod zeljene web aplikacije. Nakon toga se ta datoteka

jednostavnim klikom na gumb ucini javnom tako da joj se dodijeli javna adresa na

kojoj se izvrsava i kojoj moze pristupiti bilo tko s tom adresom.

32

Poglavlje 4

Programsko rjesenje

U ovom ce se poglavlju opisati metodologija rada od odabira tehnologije, rasclambe

zadatka do konacne realizacije. U tom opisu, rad ce se koncentrirati na logiku i opis

problema te realiziranog rjesenja, dok se od ciljane publike ocekuje da ima usvojeno

osnovno znanje programiranja.

4.1 Odabir tehnologija

Pitanje koje se namece i na koje bi se trebalo obratiti najvise pozornosti jest: ”Sto je

cilj zadatka?”. Ako postoji vrlo jasan odgovor na to pitanje, eventualna podpitanja

koja ce se pojaviti tijekom razvoja nece predstavljati problem. Osim cilja zadatka,

koji je u ovom slucaju web aplikacija, potrebno je znati i razumijeti njen sadrzaj,

sto ce nam odrediti u kojem pravcu ici u pogledu tehnologija. Kako se radi o web

sadrzaju, HTML i CSS se namecu kao prirodni odabir jer su to danasnji standardi

za bilo kakav razvoj koji je povezan s pregledavanjem na webu. U nastavku slijedi

opis odabranih tehnologija te razlozi njihovog odabira.

33

Poglavlje 4. Programsko rjesenje

4.1.1 Bootstrap

Zna se, sto smo i opisali u proslom poglavlju, da su HTML i CSS tehnologije kojima

definiramo strukturu i izgled nekog web sadrzaja, a Bootstrap upravo kombinira te

dvije tehnologije u jednu. Naime, koristi HTML i CSS okvire kako bi se definirali sti-

lovi raznih elemenata poput gumbova, formi, navigacije i drugih [25]. Slijedi nekoliko

prednosti koristenja Bootstrap razvojnog okvira [26]:

• Jednostavnost - pomnim pracenjem popratne dokumentacije pri radu cini koristenje

Boostrap-a jednostavnim. Jedna od znacajki jest ta sto prethodno obraduje

unaprijed definirane CSS datoteke koje se kasnije koriste u razvoju, te zbog

mogucnosti koristenja vise CSS stilova na vise mjesta pomocu jedne datoteke,

rezultira u manjem ukupnom broju datoteka i brzem razvoju rjesenja

• Siroka paleta komponenti - dolazi sa velikim brojem predefiniranih stilova za

razne elemente kao sto su padajuci izbornici, grupe gumbova, upozorenja, trake

za napredak i mnoge ostale

• Konzistentnost - jednostavno receno, pruza konzistentnost u smislu pisanja

koda bez obzira na to tko taj kod generira. Nadalje, krajnji proizvod je uni-

forman, odnosno isti na svim platformama na kojima se izvrsava

• Prilagodljivost - moze se prilagodavati potrebama projekta u smislu da ukoliko

neki unaprijed odredeni stilovi nisu potrebni ili se nece koristiti pri razvoju,

datoteke koje sadrze te stilove se mogu odbaciti bez utjecaja na funkcionalnost

konacnog proizvoda

• Podrska - ogromna zajednica korisnika je od velike pomoci ukoliko dode do

poteskoca u procesu razvoja. Povrh toga, detaljna dokumentacija i kontinu-

irana azuriranja su velika prednost i pomoc

4.1.2 JavaScript

Nakon strukture i izgleda ostaje samo odabrati koja ce se tehnologija brinuti o funk-

cionalnosti i interakciji sa sadrzajem. Funkcionalnost se u ovoj aplikaciji postize

programskim jezikom JavaScript opisan u poglavlju 3, a neki od razloga koji podu-

34

Poglavlje 4. Programsko rjesenje

piru taj odabir jesu [27]:

• Otvorenost - jedan od najotvorenijih programskih jezika uopce cija je specifi-

kacija ISO standard koju prate mnogi projekti u svojim implementacijama od

kojih su mnoge otvorenog koda. Nadalje, o razvoju jezika se brine posebno

vijece sastavljeno od vise kompanija, ukljucujuci sve one koje razvijaju web

preglednike poput Google Chrome, Opera, Mozzila Firefox i slicnih pregled-

nika.

• Fleksibilnost - Iako nije najelegantniji jezik, ima svoje cari zbog kojih je je-

dan od najcesce koristenih i najrasprostranjenijih programskih jezika. Jedna

od njih je da pruza mogucnost koristenja mjesavine objektno orijentiranog,

proceduralnog i funkcijskog nacina programiranja

• Integracija - JavaScript moze biti dio HTML koda te je njihovo medusobno

koristenje stopljeno u jedno rjesenje, iako su to dva razlicita pojma koji se

brinu o razlicitim stvarima. Jednostavnom HTML oznakom “¡script¿” mozemo

integrirati bilo koji JavaScript kod

• Siroka upotreba - postoji nekoliko prednosti koristenja programskog jezika koji

je siroko upotrebljavan. Detaljna dokumentacija i podrska su vrlo bitni za

sve koji se upustaju u razvoj programskih rjesenja tim jezikom te to uvelike

olaksava sam proces

4.2 Rasclamba zadatka i realizacija

Zadatak se moze podijeliti na nekoliko manjih podzadataka, te u kontekstu koristenja

od strane korisnika aplikacija mora:

• Omoguciti unos ulaznih podataka

• Validirati ulazne podatke

• Obraditi ulazne podatake u izlazne

• Prikazati izlazne podatke

• Omoguciti pohranu/ucitavanje ulaznih podataka u/iz datoteke

35

Poglavlje 4. Programsko rjesenje

4.2.1 Ulazni podaci

Prema specifikaciji zahtjeva zadatka definirano je kako su ulazni podaci aplikacije:

• Vrsta modulacije (ASK, FSK ili PSK)

• Binarna informacija, duljine do 10 bitova

• Logika kodiranja (pozitivna ili negativna)

• Razina amplitude

• Frekvencija signala

• Napomena

Slika 4.1 Prikaz sucelja za unos podataka

Na slici 4.1 prikazano je sucelje koje sluzi korisniku za unos ulaznih podataka.

Odabir modulacije realiziran je pomocu padajuceg izbornika koji sadrzi elemente

ASK, FSK i PSK i svaki, kao sto nomenklatura sugerira, predstavlja vrstu modula-

cije. Binarna se informacija unosi u formu za unos teksta u kojoj se nalazi privremeni

tekst koji korisniku daje do znanja koji je maksimalni broj znakova koji se moze uni-

jeti.

36

Poglavlje 4. Programsko rjesenje

Amplituda i frekvencija se takoder odabiru pomocu padajuceg izbornika gdje

vrijednosti koje se mogu odabrati za amplitudu idu od 1 do 4, dok za frekvenciju

moguce vrijednosti idu od 0.5 Hz do 2 Hz. Na posljetku, napomena se unosi u

tekstualno polje te unos nije obavezan.

4.2.2 Validacija ulaznih podataka

Prije nego li se ulazni podaci obrade na nacin da se mogu dobiti izlazni, potrebno je

podatke validirati i osigurati da u proces obrade ulaze podaci u ocekivanom obliku.

Prvo validacijsko pravilo jest da niti jedan ulazni podatak ne smije biti neodreden,

osim napomene. Postoji i dodatno pravilo koje se tice unosa binarne informacije,

a to je da se binarna informacija moze sastojati samo od znakova (brojeva) 0 i 1

te duljina informacije ne smije prelaziti 10 znakova. Nepostivanje pravila validacije

se manifestira na nacin da se obrub elementa promjeni u crvenu boju s tockastim

uzorkom.

Slika 4.2 Prikaz rjesenja validacije

37

Poglavlje 4. Programsko rjesenje

U nastavku je opisano programsko rjesenje validacije. Konstruirana je varija-

bla tipa dictionary u kojoj je svaki par (kljuc:vrijednost) tipa string: boolean. String

predstavlja HTML identifikator elementa kojega smo definirali pri konstrukciji struk-

ture, a boolean predstavlja logicki operator tocno ili netocno (true ili false). Isprva

se u varijabli nalazi onoliko parova koliko ima elemenata, gdje je logicka vrijednost

svakog od parova false. Nakon sto je varijabla inicijalizirana potrebno je izvrsiti niz

provjera za svaki od elemenata i prvi korak jest dohvatiti vrijednost koja se trenutno

nalazi u elementu, sto se radi na sljedeci nacin:

var binaryInfo = document.getElementById("binaryInfo");

Kada se vrijednost dohvati i spremi u varijablu, njezinu vrijednost treba uspore-

diti s validacijskim pravilom tog ulaznog podatka. U slucaju na slici ?? u varijabli

binaryInfo ce se nalaziti vrijednost tekstualnog polja predodredenog za unos binarne

informacije. Validacijsko je pravilo u ovom slucaju, kao sto je prije napomenuto, da

vrijednost moze sadrzavati samo znakove 0 i 1 te da duzina ne smije biti veca od 10

znakova. Ukoliko vrijednost unutar varijable postuje to validacijsko pravilo, logicka

se vrijednost tog odgovarajuceg kljuca mijenja u true, u suprotnom vrijednost ostaje

false.

Slika 4.3 Provjera validacijskog pravila

38

Poglavlje 4. Programsko rjesenje

Nakon sto se postupak opisan ranije i prikazan na slici ?? primjeni na svim ele-

mentima za unos podataka, nad cijelim dictionary-em se vrsi provjera koristeci for

petlju. Naime, petlja iterira kroz sve kljuceve te provjerava njihovu logicku vrijed-

nost. Ukoliko je logicka vrijednost jednaka false HTML elementu s tim identifikato-

rom se mijenja boja okvira u crvenu boju, cime se naznacuje pogreska u validaciji

koju korisnik mora ispraviti da bi uspjesno mogao koristiti aplikaciju. Petlja je pri-

kazana na slici 4.5.

Slika 4.4 Petlja provjere svih validacijskih pravila

39

Poglavlje 4. Programsko rjesenje

4.2.3 Obrada podataka

Nakon uspjesne validacije ulaznih podataka potrebno je te podatke obraditi na nacin

da dobijemo garnituru podataka formatirane za graficki prikaz. Prvi korak je izracun

vrijednosti vala nositelja, koji je u ovom slucaju definiran sinus funkcijom, pa se

shodno tome racunaju sinusne vrijednosti za svaku od tocaka u vremenu. Informacija

o amplitudi i frekvenciji se dobiva na isti nacin kao i binarna informacija u sekciji

4.2.2, a to je programatski citajuci vrijednosti HTML elemenata koje je korisnik

unio.

Isto tako vrlo je vazna informacija o kojoj se vrsti modulacije radi, jer ukoliko

se radi o faznoj modulaciji potrebno je znati vrijednost frekvencije drugog vala no-

sitelja pa i njemu izgenerirati vrijednosti na gore opisani nacin s odgovarajucim

parametrima. Zakljucno, slijedi sazeti popis koraka koji se izvrsavaju pri generiranju

vrijednosti vala nositelja:

1. Dohvacanje podataka o amplitudi i frekvenciji

2. Izracun sinusne vrijednosti formulom y(t) = At sin(ωt + ϕt) koristeci pritom

parametre iz 1. koraka

Nakon generiranja podataka za val ili, u slucaju fazne modulacije, valova nosi-

oca, potrebno je konstruirati modulirani signal. Modulirani signal i podaci koji ga

odreduju ovise o vrsti modulacije signala i odabranoj logici kodiranja. Takoder, pret-

postavka radi lakseg razumijevanja je da jedan bit traje tocno jednu sekundu. Ako

se radi o amplitudnoj modulaciji i pozitivnoj logici kodiranja, 1 u binarnoj infor-

maciji znaci da ce modulirani signal za period trajanja jednog bita, imati identicne

vrijednosti kao i val nosioc u vremenskom periodu u kojem se nalazi spomenuti bit s

vrijednoscu 1. Nadalje, u slucaju da je binarna informacija 0, za odgovarajuci period

vrijednosti signala iznosit ce 0. Ukoliko je logika kodiranja negativna efekt je obrnut,

a primjer slijedi na slici 4.5.

40

Poglavlje 4. Programsko rjesenje

Slika 4.5 Prikaz ASK modulacije s pozitivnom logikom kodiranja

Kada se radi o frekvencijskoj modulaciji u cijelu se pricu ukljucuje jos jedna

komponenta, dodatan val nosioc s visom frekvencijom. Obris logike je isti kao kod

amplitudne modulacije. Ukoliko se u binarnoj informaciji pojavi 1, moduliranom

signalu pridodjeljujemo identicne vrijednosti onima vala nosioca s nizom frekvencijom

dok u slucaju 0 pridodajemo vrijednosti vala nosioca s visom frekvencijom. Ukoliko

je preferencija logike kodiranja negativna efekt je obrnut.

U slucaju fazne modulacije, logika je slicna amplitudnoj modulaciji te se razli-

kuje u konacnom rjesenju zbog prirode fazne modulacije. Naime, za 1 u binarnoj

informaciji se vrijednosti moduliranog signala u tom vremenskom periodu dobivaju

tako da se vrijednosti vala nosioca u istom periodu mnoze s 1, dok se u slucaju 0

u binarnoj informaciji vrijednosti mnoze s -1. Mnozenje s -1 rezultira vrijednostima

koje kada graficki prikazemo opisuju pomak faze za 180◦. U slucaju negativne logike

kodiranja, kao i kod amplitudne modulacije, efekt je obrnut.

41

Poglavlje 4. Programsko rjesenje

Slika 4.6 Prikaz FSK modulacije s pozitivnom logikom kodiranja

Slika 4.7 Prikaz PSK modulacije s pozitivnom logikom kodiranja

42

Poglavlje 4. Programsko rjesenje

4.2.4 Prikaz izlaznih podataka

Za prikaz izlaznih podataka, u ovom slucaju - grafova, koristi se JavaScript knjiznica

Charts.js. Knjiznica omogucuje jednostavno generiranje grafova na nacin da se kao

ulaz prirede dvije garniture podataka, od kojih jedna populira podatke na x osi, dok

druga predstavlja vrijednosti na y osi. Vazno je napomenuti da obje garniture moraju

imati jednaki broj podataka kako bi se graf ispravno prikazao. U ovom slucaju se

koristi linijska vrsta grafa iako knjiznica podrzava mnoge druge vrste.

Osim knjiznice potrebno je objasniti na koji se nacin izgenerirani grafovi prika-

zuju u odnosu na odabranu modulaciju. Naime, prostor koji sluzi za prikaz grafova

se sastoji od tri HTML elementa poznatih pod oznakom canvas, koji omogucuju di-

namicko renderiranje 2D oblika i slika. Ukoliko su odabrane modulacije ASK i PSK,

kao rezultat vidimo dva canvas elementa, od kojih prvi sadrzi graf vala nosioca,

drugi graf moduliranog signala dok je treci skriven. Ako se pak odabere FSK modu-

lacija, jednostavnom provjerom pri generiranju podataka za grafove, cinimo skriveni

element vidljivim te se u njemu prikazuje val nosioc s visom frekvencijom.

Slika 4.8 Prikaz pozicije canvas elemenata

43

Poglavlje 4. Programsko rjesenje

Prednosti koristenja gotove knjiznice je jednostavnost integracije u zeljeno pro-

gramsko rjesenje. Nadalje Charts.js knjiznicu podupire detaljna dokumentacija te je

jedno od najcesce upotrebljavanih rjesenja u toj domeni.

4.2.5 Pohrana/ucitavanje u/iz datoteke

Bitna funkcionalnost za aplikaciju je mogucnost pohrane ulaznih podataka u dato-

teku te ucitavanje podataka iz datoteke. Odabirom opcije za pohranu podataka u

datoteku iz padajuceg izbornika navigacijske trake, citaju se podaci iz HTML ele-

menata koji te podatke sadrze te se isti zapisuju u tekstualnu datoteku.

Slika 4.9 Prikaz opcije za ucitavanje/pohranu podataka u datoteku

Format u kojem se podaci zapisuju je sljedeci:

Modulacija:ASK, Informacija:1010110,

Logika:Pozitivna, Amplituda:2,

Frekvencija_1:1, Frekvencija_2:Frekvencija,

Napomena:Ovo je napomena

Isto tako je moguce ucitati datoteku koja je na prethodno opisani nacin pohra-

njena, ali i ucitati rucno generiranu datoteku sve dok se pazi na ocuvanje formata.

44

Poglavlje 5

Zakljucak

Kako je u uvodu receno, ljudima kao svakodnevnim korisnicima raznih oblika bezicnog

prijenosa, bilo govora celijskim sustavima ili podataka u arhitekturi posluzitelj-

klijent, nije u potpunosti jasna razina kompleksnosti takve vrste komunikacije. Upravo

je iz tog razloga ovaj rad pred sebe postavio nekoliko ciljeva od kojih je prvi izrada

web aplikacije za simulaciju modulacije signala te olaksavanje razumijevanja tog as-

pekta bezicne komunikacije. Medutim, pojam “izrada aplikacije” ima nekoliko razina

koji odreduju kvalitetu konacnog proizvoda te se moze reci da su i to svojevrsni ci-

ljevi. Jedan od njih je svakako izgled aplikacije koja je od velike vaznosti, jer odreduje

razinu intuitivnosti koristenja, te je koncipiran na nacin da korisniku na prvi pogled

pruzi informaciju o nacinu interakcije i zeljenim podacima. Sljedece na sto je tre-

balo obratiti pozornost je funkcionalnost, cija je definicija u pogledu ovog zadatka

omoguciti unos, obradu i prikaz zeljenih podataka, a upravo je obrada podataka

okosnica logike koja kornisniku omogucava koristenje.

Takoder, jedan od ciljeva je da aplikacija bude javno dostupna, iako se moze

izvrsavati na lokalnom racunalu neovisno o povezanosti s nekim posluziteljem putem

interneta. Uzimajuci u obzir sve navedene, manje ciljeve, postignut je glavni, a to je

priblizavanje pojma modulacije korisnicima te na taj nacin pospjesiti razumijevanje

samog procesa.

45

Bibliografija

[1] Schiller, J. (2003). Frequencies for radio transmission. U Mobile communications,Second Edition

[2] Electromagnetic spectrum, s Interneta, https://en.wikipedia.org/wiki/

Electromagnetic_spectrum

[3] Radio wave, s Interneta, https://en.wikipedia.org/wiki/Radio_wave

[4] Microwave, s Interneta, https://en.wikipedia.org/wiki/Microwave

[5] Generation of Sinusoidal Waveforms, s Interneta,http://mathprojectgrade11aths.weebly.com/task-3/

-generation-of-sinusoidal-waveforms-inverse-trig-functions

[6] Vertical and horizontal antenna radiation patterns,s Interneta, http://blog.commscopetraining.com/

increase-antenna-signal-strength-with-design/

[7] Understanding Antenna Specifications and Operation, s Inter-neta, https://www.digikey.com/en/articles/techzone/2017/apr/

understanding-antenna-specifications-and-operation

[8] Smart antennas, s Interneta, http://www.eetimes.com/document.asp?doc_

id=1275711

[9] Reflection, diffraction and scattering, s Inter-neta, http://blog.taitradio.com/2015/09/23/

9-channel-concepts-every-system-designer-needs-to-understand/

[10] Multiplexing, s Interneta, https://en.wikipedia.org/wiki/Multiplexing

[11] Modulation, s Interneta, https://en.wikipedia.org/wiki/Modulation

46

Bibliografija

[12] Continuous phase modulation, s Interneta, https://en.wikipedia.org/wiki/Continuous_phase_modulation

[13] Phase shift keying, s Interneta, https://en.wikipedia.org/wiki/

Phase-shift_keying

[14] Client-server model, s Interneta, https://en.wikipedia.org/wiki/

Client-server_model

[15] Web Application Architecture from 10,000 Feet, Part 1 – Client-Sidevs. Server-Side, s Interneta, https://spin.atomicobject.com/2015/04/06/

web-app-client-side-server-side/

[16] Single page application, s Interneta, https://en.wikipedia.org/wiki/

Single-page_application

[17] Progressive Enhancement: Past, Present, and Fu-ture, s Interneta, http://blog.teamtreehouse.com/

progressive-enhancement-past-present-future

[18] HTML, s Interneta, https://en.wikipedia.org/wiki/HTML

[19] Cascading Style Sheets, s Interneta, https://en.wikipedia.org/wiki/

Cascading_Style_Sheets

[20] CSS basics, s Interneta, https://developer.mozilla.org/en-US/docs/

Learn/Getting_started_with_the_web/CSS_basics

[21] JavaScript, s Interneta, https://en.wikipedia.org/wiki/JavaScript

[22] Cloud Computing, s Interneta, https://en.wikipedia.org/wiki/Cloud_

computing

[23] History and evolution of cloud computing, s Interneta, https://www.linkedin.com/pulse/history-evolution-cloud-computing-kanika-khera

[24] Amazon Web Hosting Review, s Interneta, https://www.linkedin.com/pulse/amazon-web-hosting-review-mak-pul

[25] Bootstrap (front-end framework), s Interneta, https://en.wikipedia.org/

wiki/Bootstrap_(front-end_framework)

[26] Top 5 Reasons to use Bootstrap, s Interneta, https://bootstrapbay.com/

blog/reasons-to-use-bootstrap/

[27] Why JavaScript?, s Interneta, http://speakingjs.com/es5/ch02.html

47

Pojmovnik

API Aplication Programming Interface. 32

ASK Amplitude Shift Keying. 20

AWS Amazon Web Services. 2, 33, 34, 48

BFSK Binary Frequency Shift Keying. 22

CDM Code Division Multiplexing. 19

CPM Continuous Phase Modulation. 23

CSS Cascading style sheets. 2, 28, 29

EHF Extremely High Frequency. 6

FDM Frequency Division Multiplexing. 17

FSK Frequency Shift Keying. 20

gHz gigahertz. 4, 6

GPS Global Positioning System. 5

HF High Frequency. 5

HTML Hypertext Markup Language. 2, 28, 29

IoT Internet of Things. 33

IR Infra Red. 6

48

IrDA Infra red Data Association. 6

kHz kilohertz. 4, 5

LF Low Frequency. 5

LTE Long Term Evolution. 12

MF Medium Frequency. 5

mHz megahertz. 4–6

MSK Minimmum Shift Keying. 23, 24

PSK Phase Shift Keying. 20

QPSK Quadrature Phase Shift Keying. 25

SDM Space Division Multiplexing. 17

SHF Super High Frequency. 6

SPA Single Page Application. 29

TDM Time Division Multiplexing. 18

UHF Ultra High Frequency. 5

UMTS Universal Mobile Telecommunications System. 12

VHF Very High Frequency. 5

VLF Very Low Frequency. 5

W-CDMA Wide Code Division Multiple Access. 12

Wi-Fi Wireless Fidelity. 5

49

Sazetak

Zadatak ovog rada bio je izrada web aplikacije za modulaciju signala za kojeg su

princip i metodologija rada opisani u poglavlju 4. Programskim se rjesenjem posti-

gla softverska vizualizacija modulacije signala pomocu interaktivnih grafova, a sve

koristeci web tehnologije HTML, CSS i JavaScript. Dodatno, aplikacija sadrzi kratku

teorijsku pozadinu posvecenu svakoj od vrsta modulacije te na taj nacin pojednos-

tavljuje i olasava razumijevanje istih.

Kljucne rijeci — bezicni prijenos, modulacija, web tehnologije

Abstract

This paper’s purpose was to build a web aplication which would serve as a simulator

for signal modulation. Chapter 4 explains main principles and work methodology

on that matter. The end result provides a visualisation of signal modulation using

interactive graphs, along with other elements of the application which were built

using HTML, CSS and JavaScript. Additionally, the web applications includes a

brief theoretical background on each of the modulation types, thus providing a better

understanding of the process.

Keywords — wireless transmission, modulation, web technology

50