SVEUČILIŠTE U RIJECI

TEHNIČKI FAKULTET

Sveučilišni diplomski studij računarstva

Diplomski rad

RAZVOJ MOBILNIH APLIKACIJA UPORABOM

TEHNOLOGIJA ZA RAZVOJ WEB APLIKACIJA

Rijeka, svibanj 2016. Juraj Zorić

0069051555

SVEUČILIŠTE U RIJECI

TEHNIČKI FAKULTET

Sveučilišni diplomski studij računarstva

Diplomski rad

RAZVOJ MOBILNIH APLIKACIJA UPORABOM

TEHNOLOGIJA ZA RAZVOJ WEB APLIKACIJA

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

Rijeka, svibanj 2016. Juraj Zorić

0069051555

Ova uvezana stranica mora biti izvornik (original) diplomskog zadatka. Ubaciti kad bude išlo u tisak...

SVEUČILIŠTE U RIJECI

TEHNIČKI FAKULTET

Diplomski sveučilišni studij računarstva

IZJAVA

U skladu sa stavkom 1. članka 13. PRAVILNIKA O DIPLOMSKOM

RADU, DIPLOMSKOM ISPITU i ZAVRŠETKU DIPLOMSKIH

SVEUČILIŠNIH STUDIJA Tehničkog fakulteta u Rijeci, izjavljujem da sam

samostalno izradio diplomski rad prema zadatku klase. 602-04/15-08/14, Ur. broj

2170-15-14-15-1 za svibanj 2016. godine.

______________

Juraj Zorić

v

vi

SADRŽAJ

1. UVOD .................................................................................................................................................... 8

2. NATIVNE, HIBRIDNE i WEB MOBILNE APLIKACIJE ................................................................................ 9

2.1. Nativne mobilne aplikacije ......................................................................................................... 10

2.1.1. Prednosti nativnih mobilnih aplikacija ............................................................................... 11

2.1.2. Nedostatci nativnih mobilnih aplikacija ............................................................................. 11

2.2. Mobilne Web aplikacije .............................................................................................................. 12

2.2.1. Prednosti Web baziranih mobilnih aplikacija ..................................................................... 12

2.2.2. Nedostatci Web baziranih mobilnih aplikacija ................................................................... 12

2.3. Hibridne mobilne aplikacije ........................................................................................................ 12

2.3.1. Prednosti razvoja hibridnih mobilnih aplikacija ................................................................. 13

2.3.2. Nedostatci razvoja hibridnih mobilnih aplikacija ............................................................... 14

2.4. Vrijeme potrebno za razvoj mobilnih aplikacija ......................................................................... 14

3. ALATI ZA IZRADU HIBRIDNIH APLIKACIJA POMOĆU WEB TEHNOLOGIJA .......................................... 17

3.1. Apache Cordova ......................................................................................................................... 17

3.1.1. Prednosti ............................................................................................................................ 18

3.1.2. Nedostatci .......................................................................................................................... 19

3.2. Appcelerator Titanium ............................................................................................................... 19

3.2.1. Prednosti ............................................................................................................................ 20

3.2.2. Nedostatci .......................................................................................................................... 21

3.3. Adobe AIR ................................................................................................................................... 21

3.3.1. Prednosti ............................................................................................................................ 21

3.3.2. Nedostatci .......................................................................................................................... 21

3.4. Sencha Touch ............................................................................................................................. 22

3.4.1. Prednosti ............................................................................................................................ 22

3.4.2. Nedostatci .......................................................................................................................... 22

3.5. React Native ............................................................................................................................... 22

3.5.1. Prednosti ............................................................................................................................ 23

3.5.2. Nedostatci .......................................................................................................................... 24

4. DETALJNIJI PRIKAZ APACHE CORDOVA ALATA ................................................................................... 25

4.1. Platforme i priključci ................................................................................................................... 25

4.2. Razvoj alata kroz povijest ........................................................................................................... 27

4.3. Arhitektura i princip rada ........................................................................................................... 28

4.4. Komunikacija između WebView preglednika i nativne platforme ............................................. 28

4.5. Instalacija Apache Cordova alata na računalu............................................................................ 31

vii

4.5.1. Podržani operacijski sustavi za razvoj ................................................................................ 31

4.5.2. Postupak instalacije ............................................................................................................ 32

4.6. Preporučena arhitektura Apache Cordova JavaScript aplikacije ................................................ 36

5. UPORABA APACHE CORDOVA ALATA ZA IZRADU HIBRIDNE APLIKACIJE TENNIS CENTER FINDER .... 37

5.1. Korisničko sučelje aplikacije ....................................................................................................... 37

5.2. Konfiguracija postavki izvršavanja .............................................................................................. 40

5.3. Arhitektura klijentske aplikacije ................................................................................................. 42

5.4. Arhitektura poslužiteljskog dijela aplikacije ............................................................................... 46

5.5. Kontrola uspješnosti i ispravljanje pogrešaka ............................................................................ 48

6. ZAKLJUČAK .......................................................................................................................................... 50

7. LITERATURA ........................................................................................................................................ 51

SAŽETAK I KLJUČNE RIJEČI .......................................................................................................................... 53

8

1. UVOD

Razvoj mobilnih uređaja, sve jači procesori i veći memorijski kapaciteti uvjetovali su takav

napredak da je danas na njima moguće izvršavati većinu operacija kakve smo ranije nalazili samo

na osobnim računalima. Značajnu ulogu odigrala je uspješna migracija modernih internetskih

preglednike na mobilne uređaje. To je potaknulo velik broj korisnika da pregledava internetske

sadržaje i dovelo do potrebe za prilagodljivim dizajnom koji se prilagođava različitim veličinama

ekrana. Tako primjerice tablet uređaj, mobilni telefon i stolno računalo mogu pregledavati istu

Web stranicu s različitim dizajnom korisničkog sučelja prilagođenim upravo za taj uređaj odnosno

ekran, ovisno o njegovim dimenzijama.

Evolucijom HTML tehnologije, uz nativne mobilne aplikacije, u velikom su se broju počele

pojavljivati i Web aplikacije na mobilnim uređajima koje se mogu pregledavati putem internetskih

preglednika svih uređaja. Razlog njihove pojave je univerzalnost što znači da se Web aplikacija

može prikazivati na svim uređajima svih proizvođača koji imaju internetski preglednik, bilo da se

radi o osobnom, tablet računalu, mobilnom uređaju pametnom televizoru ili nekom drugom.

Velika prednost nativnih aplikacija je to što za razliku od Web aplikacija imaju pristup

programskim sučeljima samog uređaja te značajkama kao što su akcelerometar i žiroskop,

geolokacijska komponenta, imenik s kontaktima korisnika, pristup datotečnom sustavu uređaja i

sličnim. Internetskim preglednicima odnosno Web stranicama taj je pristup ograničen iz

sigurnosnih razloga.

Obzirom da je u nativnim mobilnim aplikacijama u ugniježđenom internetskom pregledniku bilo

moguće izvršavati Web aplikacije, razvijene su hibridne aplikacije koje uključuju elemente

nativnog i Web koda. Takve aplikacije imaju prednosti nativnih i Web aplikacija jer se aplikacije

izgrađuju kao nativne i preuzimaju se iz trgovina aplikacijama te omogućuju korištenje istog koda

za aplikacije koje se izvršavaju na više različitih platformi.

U ovom radu bit će uspoređene postojeće tehnologije za izradu hibridnih aplikacija korištenjem

Web tehnologija te poseban naglasak stavljen na Apache Cordova alat [1] otvorenog koda i

demonstracija na primjeru implementacije aplikacije Tennis Center Finder [2].

9

2. NATIVNE, HIBRIDNE i WEB MOBILNE APLIKACIJE

Nativne aplikacije pišu se specifično za određenu platformu ili određeni skup platformi. Za to

postoje specifični alati koji koriste određene programske jezike i za čije se održavanje brinu

najčešće kompanije koje razvijaju hardver i softver za tu određenu platformu. U tablici 2.1. dani

su primjeri razvojnih okolina, razvojnih programskih jezika i operacijskih sustava koji se koriste

za razvoj aplikacija za iOS, Android i Windows Phone 8 operacijski sustav.

Tablica 2.1. Prikaz razvojnih okolina, jezika i operacijskih sustava na kojima se mogu razvijati

nativne aplikacije za operacijske sustave iOS, Android i Windows [1]

Operacijski sustav na

kojem se izvršava

aplikacija

Razvojna okolina (IDE)

Jezik u kojem

se pišu

aplikacije

Operacijski sustav

za razvoj

iOS Xcode ObjectiveC

Appleovo računalo s

Mac operativnim

sustavom

Android

Android Studio ili bilo

koji IDE za

programiranje u Javi

(Eclipse, NetBeans) +

Android SDK

Java Windows/Mac/Linux

WindowsPhone 8 VisualStudio C#/XAML Windows

Za razliku od nativnih aplikacija poput Cardboard [3], Vine [4], Snapchat [5], Web aplikacije

izvršavaju se u internetskom pregledniku uređaja i nisu pohranjene na lokalnom uređaju, nego se

preuzimaju sa internetskih poslužitelja i drže se privremeno u memoriji za vrijeme njihovog

izvršavanja. Primjer web aplikacija su Gmail [6] i Google Analytics [7]. Hibridne aplikacije

poput Facebook Ads Manager [8], Facebook Groups[9], eBay [10], PayPal [11] i HealthTap [12]

koriste svojstva nativnih i Web aplikacija na način da se izvršavaju u okolini nativne aplikacije

koja koristi Web preglednik uređaja za izvršavanje internetskog koda koji je smješten u samoj

aplikaciji i pohranjuje se zajedno s aplikacijom. Ovakva arhitektura omogućuje izravnu

komunikaciju internetskog koda s nativnim čime se hibridnoj aplikaciji omogućuje pristup

programskim sučeljima uređaja i operacijskog sustava, potencijalno osjetljivog karaktera kao što

su kamera, lokacijske usluge i datotečni sustav. Aplikacijama koje se izvršavaju u Web

preglednicima i preuzimaju s interneta nije dozvoljen ovaj pristup što je ujedno i njihov najveći

nedostatak. Komunikacija nativnih, hibridnih i Web aplikacija s uređajem i operacijskim

sustavom prikazana je na slici 2.1. gdje je vidljivo da nativne aplikacije s uređajem komuniciraju

izravno putem određenih protokola, hibridne aplikacije koriste integrirani Web preglednik u

10

samoj arhitekturi nativne aplikacije koja komunicira s uređajem, a Web aplikacije komuniciraju

posredno preko Web preglednika.

Slika 2.1. Prikaz komunikacije nativnih, hibridnih i Web aplikacija s uređajem i operacijskim

sustavom [13]

2.1. Nativne mobilne aplikacije

Nativne mobilne aplikacije napravljene su specifično za određenu mobilnu platformu korištenjem

jezika i alata koji su nativni za tu platformu. Aplikacija radi na način da direktno komunicira s

operacijskim sustavom i hardverom uređaja. Obzirom da se radi o direktnoj vezi komunikacije,

radi se najčešće od najbržem tipu aplikacija po pitanju performansi. Ova je činjenica sve više

diskutabilna obzirom da se snaga hardvera mobilnih uređaja značajno povećava u posljednjih

nekoliko godina te je često nemoguće razlučiti nativne aplikacije od ostala dva tipa temeljem

korisničkih iskustava i zapažanja.

Određeni tipovi aplikacija koji zahtijevaju veću procesorsku snagu su definitivno kandidati za

nativni razvoj. Takvi primjeri uključuju 3D igre ili aplikacije koje pružaju značajke kamere u

stvarnom vremenu kao što su na primjer manipulacija slike u realnom vremenu ili izmijenjena

stvarnost u aplikaciji Cardboard [3]. Također, bolje je koristiti nativne programske alate za razvoj

aplikacija koje imaju sisteme plaćanja unutar samih sebe.

Appleovi uređaji poput iPhonea i iPada pokreću operacijski sustav iOS. Aplikacije za taj sustav

pisane su u jeziku Objective-C. Tvrtka Apple je jedini izvor koji proizvodi iOS hardver. Android

11

aplikacije su tipično pisane u Java programskom jeziku i pokreću se na verziji Linux operacijskog

sustava koji je otvorenog koda. Hardver za Android proizvode mnoge poznate kompanije kao što

su primjerice Samsung, Sony i HTC. Windows Phone aplikacije pisane su u jezicima C#, C++ ili

Visual BASIC i pokreću se na mobilnoj varijanti Windows operacijskog sustava. Hardver

proizvodi Nokia, Samsung, HTC i ostali.

2.1.1. Prednosti nativnih mobilnih aplikacija

Nativne aplikacije imaju izravnu vezu s operacijskim sustavom i hardverom. To omogućuje veliku

brzinu, vrhunsku grafiku i najbolju moguću snagu računanja. Aplikacija se jednostavno spaja na

značajke uređaja kao što su žiroskop, kompas, akcelerator i kamera. Hibridne aplikacije također

imaju sličan pristup. Alati za ispravljanje pogrešaka standardan su dio opreme razvojnih alata

nativnih aplikacija i ti su alati robusni i usko povezani s procesom razvoja. Standardne komponente

korisničkog sučelja kao što su gumbovi, liste, polja za unos teksta i slično su ugrađeni u alate za

dizajn što omogućuje programerima koji su upoznati s platformom jednostavno snalaženje i

jednostavnost u korištenju. Dostava proizvoda korisnicima i osvježavanje verzija radi se kroz

trgovine aplikacijama gdje postoji određeno povjerenje u aplikacije koje se prije puštanja u javnost

iza vrijeme korištenja nadziru. Programerska podrška je široka i pouzdana te pružena od strane

renomiranih tvrtki kao što su Apple, Google, Microsoft i drugi.

2.1.2. Nedostatci nativnih mobilnih aplikacija

Programeri moraju poznavati alate i jezike platforme ili više njih kako bi mogli izgraditi aplikacije

za odgovarajuću platformu ili uređaj. Kod koji je napisan za određenu platformu nije moguće

prenamijeniti niti iskoristiti za razvoj aplikacije na drugoj platformi. Vrijeme dizajna, razvoja i

osiguranja kvalitete proizvoda umnoženo je onoliko puta za koliko platformi proizvođač želi

namijeniti aplikaciju. Ukoliko se želi uštediti na vremenu, u ovakvom je pristupu nužno zaposliti

više dizajnera i programera, odnosno trošiti više resursa.

12

2.2. Mobilne Web aplikacije

Mobilne aplikacije koje su bazirane na Web tehnologijama su Web sjedišta optimizirana za

mobilne telefone ili stranice koje su pokrenute u pregledniku na mobilnom uređaju. Pisane su u

standardnim Web tehnologijama poput HTML5, CSS i JavaScript jezika ili knjižnicama i alatima

izvedenim iz navedenih.

2.2.1. Prednosti Web baziranih mobilnih aplikacija

Alati za dizajn i razvoj identični su onima koji se koriste u standardnom razvoju Web aplikacija.

Vrijeme potrebno za izradu ne razlikuje se mnogo od vremena razvoja uobičajenih Web aplikacija.

HTML i povezane tehnologije su univerzalne, standardi nisu u ničijem posjedu. Plaćanje u

aplikacijama ne vrši se preko trgovina aplikacijama već je za to odgovoran subjekt koji distribuira

aplikaciju.

2.2.2. Nedostatci Web baziranih mobilnih aplikacija

Ovakve aplikacije imaju ograničen pristup uređaju i njegovom hardveru jer se izvršavaju unutar

mobilnog Web preglednika. Ove aplikacije zbog svoje prirode zahtijevaju aktivnu internetsku

vezu, iako se mogu modificirati u internetskom pregledniku da se izvršavaju bez internetske veze,

što potencijalno ograničava njihovu namjenu. Obzirom da se aplikacije ne nalaze u provjerenim

trgovinama, moguće je da je teže zadobiti povjerenje korisnika iz sigurnosnih razloga. Proces

ispravljanja pogrešaka nije jednostavno izvediv niti robustan kao kod razvojnih alata nativnih

aplikacija.

2.3. Hibridne mobilne aplikacije

Hibridna mobilna aplikacija slična je nativnoj, međutim jezgra aplikacije je napravljena

korištenjem standardnih Web tehnologija. Ta jezgra je zatim pohranjena i pokrenuta iz omotača

nativne aplikacije. Aplikacija je na kraju izgrađena korištenjem istih alata kao i nativna aplikacija.

Na slici 2.2 prikazano je kako Web dio hibridne aplikacije sam po sebi nema dozvolu za pristup

svim nativnim sučeljima značajki uređaja, već alat poput Apache Cordova [1] igra ulogu

13

posrednika u komunikaciji nativnog koda sa Web kodom aplikacije jer koristi priključke pisane u

nativnom kodu kojima JavaScript kod može pristupati i upravljati.

Slika 2.2. Shema komunikacije nativnog i Web koda te Web koda sa priključcima mobilnog

uređaja kod hibridnih aplikacija [1]

2.3.1. Prednosti razvoja hibridnih mobilnih aplikacija

Mnogi ovu metodu smatraju financijski najefektivnijim rješenjem u odnosu na nativnu zbog

skraćenog vremena razvoja i ponovno iskoristivim kodom. Resursi vezani uz dizajn koriste se

samo jednom obzirom da isto korisničko sučelje može biti iskorišteno za više platformi po potrebi.

U odnosu na Web aplikacije, prednost im je što imaju pristup nativnim funkcionalnostima uređaja

te se mogu pronaći u trgovinama aplikacija.

14

2.3.2. Nedostatci razvoja hibridnih mobilnih aplikacija

Korisničko iskustvo nije uvijek glatko po pitanju animacija primjerice kod igara ili aplikacija

izmijenjene stvarnosti zbog vremenskog kašnjenja koje uzrokuje komponenta preglednika.

Platformske posebnosti koje utječu na korisničko iskustvo iziskuju dodatno vrijeme za prilagodbu,

primjerice iOS ima jednu home tipku, a Android ima dodatnu tipku za povratak na prethodnu

aktivnost. Pristup alatima uređaja je više ograničen nego nativni bez kodiranja u jeziku i alatima

specifičnima za tu platformu, iako neka rješenja koriste i nativne komponente.

2.4. Vrijeme potrebno za razvoj mobilnih aplikacija

Tri su glavne faze izrade većine softverskih proizvoda u koje spadaju dizajn, razvoj i osiguranje

kvalitete, odnosno testiranje i ispravljanje pogrešaka prije puštanja u rad. Slika 2.3. opisuje grubu

usporedbu tih faza na primjeru mobilne aplikacije rađene nativnom, Web ili hibridnom metodom.

Također, prikazano je da se aplikacija razvija za tri različite platforme; iOS, Android i Windows i

Web. Ovo je samo primjer koji ne uključuje stvarne vrijednosti sati rada jer one variraju u ovisnosti

o opsegu projekta već je cilj prikazati omjere i faktore koji utječu na razvoj samih aplikacija u sva

tri prikazana načina. Zamišljena nativna aplikacija ima tri razvojne faze za svaku platformu, što je

ukupno 750 sati razvoja u ovom primjeru. Za hibridnu aplikaciju na istom primjeru potrebno je

oko 550 sati jer se Web kod mora prilagoditi specifičnim platformama, a za Web aplikaciju nije

važno o kojim se platformama radi i za nju je potrebno oko 250 sati.

15

Slika 2.3. Usporedba vremena potrebnog za razvoj nativne, hibridne i Web aplikacije na

fiktivnom primjeru koji ilustrira faze procesa izrade svakog od navedenih [14]

Razvoj mobilnih aplikacija sam po sebi nije jednostavan proces. Faktori raznih uređaja kao što su

ograničena snaga procesora, veličina ekrana, memorijska ograničenja i trošenje baterije igraju

veliku ulogu u izazovu s kojim se programeri moraju suočavati. Često je potrebno gledati koje

vještine osoba posjeduje kada je potrebno razvijati za određeni uređaj. Svaki proizvođač uglavnom

pruža vlastiti software development kit (SDK) kako bi omogućio razvojnim programerima ciljanje

na taj uređaj. Problem je što je svaki SDK ograničen u smislu u kojem se jeziku mora pisati kod i

u kojem okruženju se razvija. SDK pruža funkcionalnosti na nivou uređaja te definira koje su

funkcionalnosti dostupne putem njegovih application protocol interface-a - aplikacijskih

protokolarnih sučelja (API-ja).

Problematika nije ograničena samo na to o kojem se jeziku radi, već ide mnogo dublje. Za svaki

uređaj potrebno je da se programer upozna s jezikom, razvojnim okruženjem (Tablica 2.1) i

njegovim komandama kako bi izrađivao i korigirao aplikacije. Također potrebno je naučiti API-je

korisničkog sučelja te pravila konstruiranja aplikacije, zatim API-je na nivou samog uređaja te

njihovo individualno korištenje. U slučaju kada se koristi Apache Cordova, ovaj složeni proces je

pojednostavljen. Jedini dio koji se mijenja u ovisnosti o uređaju jest upravljanje alatima. Jezik u

kojem se piše je uvijek JavaScript, stoga korisnici koji poznaju taj jezik mogu odmah prijeći na

korištenje alata. API-ji korisničkog sučelja su opet JavaScript zajedno sa HTML i CSS jezicima

kako bi se dizajnirao izgled i raspored komponenata koji će stvoriti optimalno korisničko iskustvo.

16

Također, API-ji za pristup značajkama uređaja su svi isti u smislu da programer radi na identičan

način bez obzira o kojem se uređaju radi ako se koristi Apache Cordova, stoga je aplikacije vrlo

lako migrirati između različitih uređaja.

17

3. ALATI ZA IZRADU HIBRIDNIH APLIKACIJA POMOĆU WEB TEHNOLOGIJA

U ovom će poglavlju biti razmotreno pet vodećih alata u svijetu za razvoj hibridnih aplikacija,

osnovni podaci o njima te njihove prednosti i nedostatci u primjeni. Ti su alati Apache

Cordova/PhoneGap [1, 15], Appcelerator Titanium [16], Adobe AIR [17], Sencha Touch [18] i

React Native [19].

3.1. Apache Cordova

Ova platforma na samom je vrhu po broju razvojnih programera koji ju koriste i razvijaju.

Omogućuje izradu mobilnih aplikacija korištenjem HTML, JavaScript i CSS programskih jezika.

U mobilnoj aplikaciji taj se kod izvršava unutar Webview-a odnosno kontejnera za ugnježđivanje

Web aplikacija koji koristi internetski preglednik da bi prikazao sadržaj unutar aplikacije. Dakle,

u praksi je to Web aplikacija ugniježđena u nativnu pri čemu za razliku od mobilne Web aplikacije

JavaScript kod ima pristup značajkama uređaja i API-jima za upravljanje informacijama poput

nativne aplikacije, što je prikazano u slojevitom prikazu na slici 3.1.

Slika 3.1. Slojeviti prikaz od nativnih priključaka preko Apache Cordova alata do Web koda

aplikacije i korisničkog sučelja [20]

18

PhoneGap [15] je izvorno ime za ovaj sustav te je razvijen od kompanije Nitobi [21]. Nakon što

je Adobe kompanija kupila Nitobi, alat je dobio naziv Apache Cordova [1] te je doniran zakladi

Apache Softvare Foundation i postao alat otvorenog koda.

3.1.1. Prednosti

Bez obzira o kojoj se tehnologiji radi sa strane poslužitelja i o iskustvu programera s programskim

jezicima, velika većina razvojnih programera ima iskustvo s jezicima HTML, JavaScript i CSS.

Apache Cordova omogućuje razvojnim programerima da odmah upotrijebe i iskoriste svoje

postojeće vještine. Vrijednost ovoga može biti izuzetno značajna, obzirom da smanjuje vrijeme

učenja i omogućuje kompanijama da brzo dostave aplikacije na tržište. Kod nativnih aplikacija

često se događa da dio koda zastarijeva sa svakim ažuriranjem platforme te je taj kod potrebno

mijenjati, a kod aplikacija koje se ne ažuriraju redovito može se raditi o velikoj količini koda.

Prilikom osvježavanja Apache Cordova aplikacije, sami kod velikog broja aplikacija nije potrebno

mijenjati već se u config.xml datoteci promijeni postavka podržanih verzija platforme, što je

detaljnije razrađeno u poglavlju 5.2. Apache Cordova aplikacija instalira se poput nativne te

također omogućuje da aplikacija bude lakše pronađena od strane korisnika prilikom pretraživanja

u trgovini.

Apache Cordova je bazirana na arhitekturi priključaka (plugins), što znači da se pristup nativnim

API-jima uređaja može proširiti na modularan način. Ovo omogućuje razvojnom programeru da

se usredotoči na već postojeće vještine, odnosno da ne mora istraživati kako pristupati uređaju već

se orijentirati na samu funkcionalnost aplikacije koju programira.

Tvrtka Adobe u PhoneGap [15] distribuciji Apache Cordova alata dodala je mogućnost razvoja

aplikacija i u oblaku. PhoneGap Build je komercijalni alat koji omogućuje programerima koji

nemaju Mac računalo da naprave aplikaciju za iOS pri čemu ne trebaju lokalno imati instaliran

SDK za iOS. Također, Brackets intergrirano razvojno okruženje za Web aplikacije te Adobe

Dreamweaver, kao dva veoma rasprostranjena okruženja, imaju u sebi ugrađenu podršku za

Apache Cordova alat te se unutar njih kod može prevesti i izgraditi odnosno pripremiti za

testiranje na uređaju ili emulatoru.

19

3.1.2. Nedostatci

Sama činjenica da je Apache Cordova alat otvorenog koda nije samo prednost, već i nedostatak

jer za pristupati nativnim sučeljima uređaja koristi JavaScript priključke čiji su autori razni

korisnici. Ukoliko programer treba neki priključak i odluči se za njegovo korištenje, postoji

mogućnost da je on zastario. Primjerice, Android operativni sustav se često nadograđuje i mijenja

se pristup podacima uređaja, stoga je potrebno određeno vrijeme da se priključci nadograde i

ažuriraju za nove platforme. Također, postoji rizik da određeni priključak kasnije prestane biti

ažuriran odnosno nitko ga više ne nadograđuje.

Također, osim postojećih priključaka može se javiti potreba da određena kompanija treba razviti

posebne prilagođene priključke ili modificirati postojeće. Za takve zahvate poznavanje samo Web

programskih jezika i Apache Cordova alata nije dovoljna i potrebno je imati specijalizirane

vještine za nativni pristup određenoj platformi.

Performanse Apache Cordova aplikacija u odnosu na nativne često su predmet kritika. Nativno

korisničko sučelje će uvijek nadjačati hibridno, ali poboljšanja u hardveru modernih uređaja te

optimizirane implementacije značajki za prikazivanje grafike i animacija Webview komponenti u

mobilnim Internet preglednicima su umanjile razliku. Web razvojni programeri koji razvijaju

Apache Cordova aplikacije morat će posebnu pozornost posvetiti izvedbi u smislu potrošnje

resursa, što znači da će poznavanje specijaliziranih alata za izradu grafičkog sučelja biti presudno,

primjerice kod odabira radnog okruženja (eng. framework) za izradu korisničkog sučelja.

3.2. Appcelerator Titanium

Titanium tvrtke Appcelerator [16] pruža unificirano JavaScript aplikacijsko protokolarno sučelje

za razne vrste uređaja, upareno sa specifičnim nativnim značajkama za određenu platformu.

Razvojni programeri pišu JavaScript kod te iskorištavaju apstrakciju korisničkog sučelja što

rezultira korištenjem nativnih komponenti sučelja. Da bi se to ostvarilo koristi se Alloy MVC

Framework. Ovo daje Titanium alatu prednost u performansama, odnosno brzini izvođenja samih

aplikacija u odnosu na druge hibridne opcije. Primjer pokrenute Titanium hibridne aplikacije

vidljiv je na slici 3.2. gdje se aplikacija za iOS izvršava u simulatoru, za Android u emulatoru te

za web aplikacija u internetskom pregledniku. Ovaj alat, između ostalih, omogućuje pristup API-

jima za plaćanje unutar aplikacije te su u njemu izrađene aplikacije eBay [10] i PayPal [11].

20

Slika 3.2. Korištenje alata Titanium za razvoj iOS aplikacije pokrenute u simulatoru, Android

aplikacije pokrenute u emulatoru te Web aplikacije pokrenute u Internet pregledniku [16]

3.2.1. Prednosti

Od prednosti ovog alata važno je naglasiti korištenje nativnih UI komponenti koje ubrzava

izvođenje. Alloy framework teži tome da normalizira korisničko sučelje bez obzira na platformu.

Također, korištenje JavaScripta kako bi se normalizirao kod na raznim platformama omogućuje

programeru da iskoristi postojeće vještine na raznim platformama. Appcelerator pruža mogućnost

Backend-as-a-service, analizu aplikacije te trgovinu komponenata treće strane. Backend-as-a-

service je usluga koja dozvoljava programeru da se posveti samo klijentskoj strani, a sa

poslužiteljske strane mu pruža već napravljene usluge za pohranu podataka, slanje push

notifikacija, e-poruka i sms poruka, pri čemu programer klijentske strane treba samo ostvariti

komunikacijsku vezu sa poslužiteljem. Analitika korištenja aplikacije pod nazivom Dashboard

omogućuje vlasniku da prati broj aktivnih korisnika, njihovu lokaciju, podatke o porastu i dinamici

porasta broja korisnika odnosno instalacija, prosječno trajanje korištenja aplikacije s korisničke

strane, kontrolira potrošnju prometa u realnom vremenu, nadzire pogreške pri izvođenju, te pruža

još niz korisnih alata korisnih za uspješnije poslovanje. Od aplikacija treće strane, valja istaknuti

module za ugrađivanje funkcionalnosti proširene stvarnosti, module za Dropbox, Instagram,

Google Maps integraciju i veliki broj drugih korisnih značajki pomoću kojih se može dograditi

aplikacija.

21

3.2.2. Nedostatci

Razvojni programeri moraju upravljati programskom razvojnom opremom platformi lokalno što

može stvarati probleme u timskom radu zbog sinkronizacije verzija, kompajliranja i izgradnje

aplikacije. Normalizacija korisničkog sučelja na svim platformama je ujedno i prednost, ali i mana

jer programeri moraju učiti ovu tehnologiju i stjecati vještine koje im izvan ovog sustava neće biti

korisne. Dodatne usluge kao što su Backend-as-a-service, analiza aplikacije te trgovina nisu

besplatne.

3.3. Adobe AIR

Adobe AIR [17] je platforma dostupna na raznim operativnim sustavima koja omogućuje

razvojnim programerima da kombinacijom programiranja u HTML, JavaScript, AdobeFlash i

Flex tehnologijama te ActionScript razvijaju bogate internetske aplikacije -

rich Internet applications (RIAs). Aplikacije je moguće razvijati za veliku paletu uređaja, od

stolnih računala i prijenosnika, do pametnih telefona, televizora i tablet računala. Adobe AIR

mobilna trgovina aplikacija za Android [22] sadrži aplikacije rađene u ovoj tehnologiji, kao na

primjer The Hobbit: Kingdoms [23].

3.3.1. Prednosti

Sama činjenica da je uz pomoć Adobe AIR moguće razvijati toliko širok spektar aplikacija, velika

je prednost ove tehnologije. Također, korištenje Flash animacija može pridonijeti izradi

dinamičnijih aplikacija u kojima korisnici više uživaju. Velika prednost za Flash/ActionScript

razvojne programere koji su iskusni u ovom području je u tome što mogu svoje aplikacije razvijati

za razne platforme.

3.3.2. Nedostatci

Sama činjenica da je nedavno Adobe kupio Nitobi i da je pokrenut projekt Apache Cordova, može

upućivati na to da Adobe AIR ipak nema cilj biti dugoročan projekt za razvoj mobilnih aplikacija.

Također, sama tehnologija Flash je u velikom padu i sve se manje koristi, stoga ne privlači velik

broj novih razvojnih programera.

22

3.4. Sencha Touch

Sencha Touch [18] je HTML5 framework za izradu Web aplikacija koje izgledaju poput nativnih

mobilnih. Aplikacije napravljene u Sencha Touch tehnologiji mogu se prilagoditi za mobilne

platforme ili preko Apache Cordove ili Sencha nativnog pakiratelja koji će upakirati aplikaciju u

nativni kontejner kako bi mogla pristupati API-ima na nivou uređaja.

3.4.1. Prednosti

Značajna prednost leži u tome što je kompanija Sencha proizvela velik broj interoperabilnih

proizvoda kao što su „Sencha Architect“ vizualni graditelj HTML5 aplikacija, zatim „Sencha

Touch Charts“ za vizualizaciju podataka, te primjerice Sencha priključak za Eclipse IDE, ili

„Sencha Space“ centralizirani sustav upravljanja za izradu cross-platform aplikacija dizajniran za

poduzeća. Sencha Touch nudi tzv. Model-view-controller (MVC) arhitekturu komunikacije u

kodu, knjižnicu komponenti za izradu grafičkog sučelja, proširiv API te teme korisničkih sučelja

i razne druge značajke. Nativno pakiranje moguće je i putem Apache Cordova ili Sencha SDK.

3.4.2. Nedostatci

Mobilne aplikacije pisane u Sencha Touch tehnologiji mogu imati iste probleme kao i Apache

Cordova aplikacije po pitanju performansi te programeri moraju pažljivo pisati efikasan kod u

JavaScript i Document Object Model (DOM) strukturama. Mnogi razvojni programeri već imaju

definirana mišljenja i iskustvo s preferiranim framework alatima za izradu

HTML5/JavaScript/CSS aplikacija, stoga još jedan framework često nije poželjna opcija za

programere koji žele što kraći postupak prilagodbe. Proširivanje postojećih Sencha Touch

aplikacija kako bi se pristupilo nativnim API-ima najčešće mora uključivati pisanje vlastitih

specijaliziranih Apache Cordova proširenja. Za ovakav poduhvat potrebno je imati dodatne

vještine ili izdvojiti dodatno vrijeme kako bi se one stekle.

3.5. React Native

React Native [19] proizvod je tvrtke Facebook i omogućuje razvojnim programerima izradu

aplikacija za upotrebu na nativnim platformama korištenjem JavaScript i React tehnologija.

Naglasak je na efikasnosti programiranja na različitim platformama zbog korištenja istih

23

tehnologija i uporabe na različitim okruženjima. Kompanija Facebook razvija i ulaže sredstva u

platformu te koristi React Native u više svojih aplikacija u produkciji, primjerice Facebook Ads

Manager [8] i Facebook Groups [9]. . Uz ovu tehnologiju moguće je koristiti standardne

komponente samih nativnih platformi. To omogućuje aplikacijama vizualno uklapanje u ekosistem

platforme za koju su programirane te pospješuje samu kvalitetu aplikacija. Takve komponente

imaju svoje zamjenske React module.

3.5.1. Prednosti

Sve operacije između nativne platforme i JavaScript koda izvršavaju se asinkrono. Također,

nativne komponente koriste prednosti višedretvenog pristupa izvršavanju. To je značajno

primjerice kada se na jednoj glavnoj dretvi vrši dekodiranje slika, promjene se u pozadini mogu

spremati u memoriju te se paralelno može mjeriti tekst i računati parametre za prikaz sučelja, bez

da se u korisničko sučelje zablokira. Rezultat toga su fluidne aplikacije dizajna prilagodljivog

različitim dimenzijama ekrana.

Serijalizirana komunikacija omogućuje iskorištavanje prednosti ispravljanja pogrešaka JavaScript

koda u Programerskim Alatima preglednika Google Chrome za vrijeme izvršavanja same

aplikacije na uređaju ili simulatoru. React Native podržava tehnologiju dodirnih gesti na ekranu te

pruža specijalizirane komponente koje se ispravno integriraju s postojećim nativnim elementima

bez posebne potrebe za konfiguracijom.

Sama izrada grafičkog sučelja pojednostavljena je za programera. Koristi se flexbox model sučelja

koji je ugrađen u React Native i olakšava izradu često korištenih komponenti i njihovog

razmještaja kao što su ugniježđeni okviri s marginama i razmacima. Alat podržava i česte stilove

tekstualnih fontova te apstrakcija mehanizma za određivanje stilova i međusobne odnose grafičkih

komponenti na prikazu ekrana. React Native je usmjeren ka promjeni načina pisanja i organizacije

samog koda.

Za ostale primjene, mogu se koristiti ostali standardni alati Web tehnologija, primjerice JavaScript

knjižnice koje se mogu instalirati kako bi se pristupilo nativnim funkcionalnostima uređaja. Osim

postojećih, razvijaju se i novi API-ji otvorenog koda kojem pridonosi šira zajednica. Moguće je

napraviti vrhunske aplikacije koristeći isključivo React Native bez korištenja nativnog koda

pojedine platforme, ali je isto tako moguće proširiti sam alat sa specijalno namijenjenim modulima

i komponentama. Ukoliko postoji razvijen dio aplikacije u nativnom kodu, taj kod se može

iskoristiti kada se aplikacija migrira na React Native platformu.

24

3.5.2. Nedostatci

Iako moćan alat, React Native zahtijeva prilagodbu novih korisnika React tehnologiji i

savladavanje novih principa izrade aplikacija. Također, ukoliko se jedna aplikacija koristi na više

platformi te na svakoj treba dodati nativne komponente i koristiti nativni kod, javlja se potreba za

poznavanjem više jezika i principa raznih platformi. Miješanje JavaScript priključaka i jezika sa

React paradigmom i nativnim modulima može biti zbunjujuće i teško za ispravljati pogreške.

25

4. DETALJNIJI PRIKAZ APACHE CORDOVA ALATA

4.1. Platforme i priključci

Velika prednost nativnih i hibridnih nad mobilnim Web aplikacijama je i to što se aplikacije mogu

izvršavati i offline, ukoliko nema potrebe za dohvaćanjem sadržaja iz baze podataka ili s Interneta.

Mobilne Web aplikacije mogu se primjerice spojiti na kameru i zatražiti od korisnika da

fotografira, ali nikako ne mogu pristupiti svim fotografijama koje je korisnik prethodno snimio.

Internetski preglednici u nekim slučajevima mogu ograničavati programera jer su neke tipke ili

neki dodirni pokreti na ekranu mobilnog uređaja rezervirani za funkcionalnosti preglednika.

Apache Cordova uključuje priključke koji omogućuju pristup API-jima uređaja. Tako razvojni

programeri imaju pristup podacima putem sučelja kamere, lokacijskih i ostalih hardverskih

svojstava uređaja, pisanih u jezicima koje već znaju. Ovi priključci su u velikoj većini pisani na

način da se isto koriste za bilo koji platformu, što znači da je Web kod identičan za Android, iOS

ili Windows Phone platformu. Apache Cordova besplatan je alat otvorenog koda, te nema troškova

licenciranja.

Značajan broj razvojnih programera ima iskustva s jezicima HTML, JavaScript i CSS u pisanju

klijentske strane aplikacija, bez obzira o kojoj se platformi i jezicima razvija sa strane poslužitelja.

Apache Cordova alat omogućuje programerima da iskoriste te postojeće vještine i bez učenja

novih jezika pišu aplikacije za mobilne platforme što smanjuje vrijeme prilagodbe novim

okruženjima. Zbog svoga svojstva prilagodljivosti, odnosno mogućnosti da se jednom

isprogramirana aplikacija može prilagoditi za više mobilnih operacijskih sustava, više-platformski

alati i hibridne aplikacije danas su sve više prisutne na tržištu. Hibridne aplikacije nastale

upotrebom Apache Cordova alata preuzimaju se i instaliraju poput nativnih te se mogu putem

trgovine aplikacijama jednostavnije naplaćivati. Apache Cordova je skup aplikacijskih

protokolarnih sučelja uređaja koji omogućuju razvojnom programeru mobilnih aplikacija pristup

nativnim funkcijama uređaja kao što su kamera ili akcelerometar, koristeći JavaScript programski

jezik. Principi komunikacije i korišteni protokoli mogu se vidjeti na slici 2.2. Apache Cordova

može se kombinirati s raznim drugim JavaScript framework alatima kao što su jQuery Mobile,

Sencha Touch ili Dojo Mobile te omogućuje aplikaciji da bude razvijena korištenjem samo HTML,

CSS i JavaScript jezika. Platforme koje Apache Cordova podržava i za koje se mogu razvijati

aplikacije su sljedeće: Android, Blackberry10, iOS, Ubuntu, Windows i Windows Phone.

JavaScript proširenja i priključci koje je moguće koristiti unutar Apache Cordova aplikacije za

komunikaciju s uređajima su navedeni u tablici 4.1.

26

Tablica 4.1. Nativni priključci i njihova dostupnost na različitim platformama putem Apache

Cordova alata [1]

Android Blackberry10 iOS Ubuntu Windows

Phone 8

Windows (8.1,

10,

Phone 8.1)

Akcelerometar + + + + + +

Status baterije + + + - + Samo Windows

Phone 8.1

Kamera + + + + + +

Audio, video i

fotografsko

snimanje

+ + + + + +

Kompas + + + + + +

Informacije o

internetskoj vezi + + + + + +

Kontakti + + + + + Djelomično

Informacije o

uređaju + + + + + +

Datoteke + + + + + +

Prijenos Datoteka + + + - + +

Geolokacija + + + + + +

Globalizacija -

operacije

specifične za

vremensku zonu i

jezik korisnika

+ + + + + +

Audio snimanje i

pokretanje snimki + + + + + +

Notifikacije + + + + + +

Statusna traka + - + - + +

Pohrana podataka + + + + + +

Vibracija + + + - + +

27

Kada se koriste Apache Cordova API-ji, aplikacija može biti razvijena bez upotrebe nativnog koda

određene mobilne platforme kao što su Java za Android, Objective C za iOS i slično. Umjesto toga

se koriste Web tehnologije i one su pohranjene u samoj aplikaciji ili, rijetko, na udaljenom http

poslužitelju. Činjenica da su ti JavaScript API-ji konzistentni na mnogim raznim uređajima i

izgrađeni na Web standardima, čini da bi aplikacija trebala biti portabilna na druge platforme

uređaja s minimalnim izmjenama ili uopće bez izmjena. Aplikacije izrađene Apache Cordova

alatom su još uvijek upakirane kao aplikacije koje koriste SDK za pojedine platforme i mogu biti

dostupne za instalaciju putem trgovine za aplikacije bilo kojeg uređaja. Apache Cordova pruža set

uniformnih JavaScript knjižnica koje mogu biti pozvane, u pozadini napisane u specifičnom

nativnom jeziku.

Za vrijeme izvršavanja, Apache Cordova radi na način da instancira komponentu Web preglednika

na mobilnom uređaju. Takav se preglednik zove chrome-less jer nema adresnu traku niti gumbove

za navigaciju između stranica. Sama aplikacija sastoji se od HTML, JavaScript i CSS sadržaja koji

je učitan u tu komponentu. Apache Cordova pruža JavaScript API koji omogućuju navedenom

kodu pristup funkcionalnostima samog uređaja, što trenutno nije dostupno Web stranicama koje

se učitavaju na standardnom pregledniku.

4.2. Razvoj alata kroz povijest

Kada je prvi puta objavljen iPhone SDK, u Nitobi [21] kompaniji odlučili su početi stvarati

aplikacije [1] za tu platformu. Navedena tvrtka je u to vrijeme bila primarno orijentirana na Web

tehnologije i prodavala JavaScript komponente te pružala usluge savjetovanja kompanijama koje

su bile u tom području i nisu bili iskusni s Objective-C programiranjem. Ubrzo su zamijetili kako

SDK ima mogućnost izvršavanja JavaScript koda i komponentni internetskog preglednika koja

omogućuje pozivanje nativnog koda i pristup funkcionalnostima uređaja. Nakon toga isto se

dogodilo i s Android platformom pa nisu morali obučavati radnike za programiranje u Javi i

Android SDK-u već je za iste funkcionalnosti na drugoj platformi bio zadužen samo jedan razvojni

programer.

Tvrtka je u kratkom vremenu uvela automatizaciju ponavljajućih koraka tog procesa i nastao je

PhoneGap [15] framework koji je od svojih početaka bio otvorenog koda. Zajednica programera

se brzo počela širiti, a Nitobi je početkom 2011. godine imao 4 razvojna programera koji su na

puno radno vrijeme bili zaposleni da rade na PhoneGapu. Tvrtka je usto i zarađivala, pružajući

dodatne funkcionalnosti individualnim klijentima, koji su mogli dobiti i popust ukoliko dozvole

da funkcionalnost postane dio projekta otvorenog koda. Krajem 2011. godine, Nitobi je kupila

28

tvrtka Adobe te su se zaposlenici u potpunosti mogli posvetiti PhoneGap frameworku. PhoneGap

je kupljen kao ime brenda, ali nije se moglo kupiti izvorni kod jer je on bio otvorenog tipa.

PhoneGap [15] je danas proizvod tvrtke Adobe, međutim, obzirom da je projekt pušten pod

Apache licencom i preimenovan u Apache Cordova, valja pojasniti razliku između ova dva alata.

Kod za Apache Cordova platformu u potpunosti je doniran i otvorenog koda te ga sada razvija

Apache zajednica. PhoneGap je trenutno samo jedna distribucija Apache Cordova alata (analogno

tome što je Ubuntu distribucija Linuxa). PhoneGap dodaje još neke specifične alate vezane uz

svoje cloud usluge koje omogućuju izgradnju aplikacije bez lokalno instaliranih SDK paketa.

Također, postoje minimalne razlike u korištenju komandne linije, ali valja napomenuti da

PhoneGap, bez obzira na različitost, u pozadini koristi Cordovu.

Apache Cordova u listopadu 2012. napredovala je u projekt najvišeg prioriteta Apache Software

Foundation (ASF) organizacije. Kroz ASF, budući razvoj Apache Cordova alata osigurat će nadzor

nad projektom te će on ostati otvorenog koda i besplatan pod licencom Apache Licence, Version

2.0.

4.3. Arhitektura i princip rada

Za razvoj Apache Cordova alata bilo je potrebno mnogo napora da se razvije konzistentno

JavaScript sučelje sa klijentske strane, ali ispod tog sloja postoji velika razlika između

individualnih platformi. Kao dvije dominantne nameću se Android i iOS zbog svoje

rasprostranjenosti, stoga ćemo ovdje razmotriti razlike u njihovoj arhitekturi iz perspektive Apache

Cordova alata.

Svaka Apache Cordova aplikacija ima sljedeće komponente: Chrome-less preglednik koji nema

navigacijske gumbe niti adresnu traku. Na Android i iOS operacijskim sustavima (OSima) se zove

WebKit, odnosno specifičnije za Android WebView i za iOS UIWebView. Sljedeća komponenta

je most između JavaScripta zajedno s HTML-om koji predstavljaju aplikaciju i same nativne

platforme. Sljedeći je važan most u drugom smjeru od nativne platforme prema JavaScriptu koji

omogućuje nativnoj platformi da komunicira s HTML aplikacijom.

4.4. Komunikacija između WebView preglednika i nativne platforme

JavaScript funkcije koje Apache Cordova alat nudi programerima za pristup nativnim API-jima

jednake su za sve platforme, ali ispod te površine alat je prilagođen za svaku platformu drukčije te

29

se uspostavljaju takozvani komunikacijski mostovi između JavaScript i nativnih jezika kojima se

razmjenjuju podaci putem različitih protokola.

U Android uređajima, kada se Web komponenta hibridne aplikacije pokuša spojiti na programska

sučelja nativne platforme (slika 2.2.), standardne su postavke namještene da izbace Prompt prozor

koji primjerice u JavaScript funkcijama za kameru, kontakte i slično pita korisnika želi li dozvoliti

aplikaciji pristup toj funkcionalnosti. Te Prompt naredbe presreće WebView onJsPrompt događaj,

te bazirano na specifičnom potpisu poziva odgovarajući nativni priključak, što je na slici 4.1.

prikazano strelicama. Također je moguće koristiti drugi most u smjeru od JavaScripta prema

nativnoj platformi na način da se komunikacija uspostavi putem JS_Object mosta. Kada je

WebView učitan i JS_Object most postavljen, WebView dodaje JavaScript sučelje koje poziva

Java objekt odnosno poziva odgovarajući nativni priključak na bazi argumenata sučelja. U drugom

smjeru komunikacije, od nativne platforme prema WebView komponenti po standardnim

vrijednostima, most je postavljen na način da se koristi tehnika prozivanja koja radi na način da

JavaScript proziva nativnu stranu i traži odgovor svakih 50 milisekundi. Ovaj most također može

biti promijenjen u XMLHttpRequest (XHR) most koji ima dugotrajnu vezu asinkronih poziva koja

pokreće callback poslužitelj lokalno i odgovara na asinkrone zahtjeve.

Slika 4.1. Protokoli komunikacije WebView i Nativne komponente u Android operacijskom

sustavu [24]

30

U usporedbi s Android OS-om, iOS ima manje mostova, što je vidljivo na slici 4.2. Na verzijama

operacijskog sustava 4.2 i nižim, JavaScript i Nativna platforma komuniciraju preko iframe okvira

u koji se može ugraditi drugu vizualnu gotovu komponentu ili čitavu Web stranicu. JavaScript

pozivi su pohranjeni u JavaScript redu, koji se čita i izvršava od strane nativne komponente. Drugi

je most XHR koji izvršava pozive prema lažnim Uniform Resource Locator-ima (URL-ima) sa

komandama u zaglavlju. Te su komande presretane, serijalizirane te zatim izvršavane. Za

komunikaciju od nativne platforme prema JavaScriptu Apache Cordova na iOS-u ima samo jedan

most koji vrši razmjenu informacija preko UIWebView metode pod imenom

stringByEvaluatingJavaScriptFromString.

Slika 4.2. Protokoli komunikacije WebView i Nativne komponente u iOS operacijskom sustavu

[24]

31

4.5. Instalacija Apache Cordova alata na računalu

4.5.1. Podržani operacijski sustavi za razvoj

Apache Cordova omogućuje kreiranje novih projekata i njihovu izgradnju za različite platforme.

Nastale se aplikacije mogu izvršavati na uređajima ili emulatorima. Sučelje komandne linije je

glavni alat koji se koristi za više-platformski tijek rada te se može koristiti samo za inicijalizaciju

projektnog koda i strukturu datoteka i direktorija te se može nastaviti razvijati i putem nativnog

koda.

Prije samog pokretanja potrebno je instalirati na računalo sve alate za softverski razvoj određenih

platformi za koje želimo razvijati. Ovaj alat podržava razvoj aplikacija za najznačajnije platforme

na Linux, Windows i Mac operacijskim sustavima. Kako je prikazano u Tablici 4.2., aplikacije za

iOS moguće je razvijati isključivo na Mac računalima zbog specifičnog softvera koji je u

vlasništvu tvrtke Apple. Također isto vrijedi za Windows Phone 8 i Windows platformu zbog

softvera tvrtke Microsoft. Ovaj problem riješen je u distribuciji PhoneGap putem PhoneGap build

alata za komercijalnu upotrebu, što je navedeno u poglavlju 3.1.1. Aplikacije za platforme Amazon

Fire OS, Android, Blackberry 10 i Firefox OS putem Apache Cordova alata moguće je razvijati

na Mac, Linux i Windows računalima. Na Mac i Linux računalima sučelje komandne linije

dostupno je u aplikaciji Terminal, a na operacijskim sustavima Windows u Command Prompt

aplikaciji.

Tablica 4.2. Operacijski sustavi na kojima je moguće razvijati hibridne aplikacije putem Apache

Cordova alata po pojedinim platformama [1]

Mac Linux Windows

iOS (Mac) + - -

Amazon Fire OS + + +

Android + + +

BlackBerry 10 + + +

Windows Phone 8 - - +

Windows - - +

Firefox OS + + +

32

4.5.2. Postupak instalacije

Apache Cordova sučelje komandne linije distribuirano je putem node package manager (npm)

paketnog upravitelja i to je preporučeni način instalacije. Da bi se npm instalirao potrebno je na

računalo instalirati Node.js te se po instalaciji npm može koristiti. Također je potrebno imati

instaliranu klijentsku aplikaciju sustava git [25] za verzioniranje koda jer ga Apache Cordova alat

koristi u pozadini za preuzimanje određenih modula pri kreiranju i osvježavanju projekata. Nakon

što pokrenemo instalaciju Apache Cordova alata putem npm sučelja, Apache Cordova modul će

biti preuzet s interneta. To se na Linux i Mac operacijskim sustavima postiže korištenjem naredbe

u primjeru koda 4.1. gdje $ označava naredbu izvršenu u linux komandnoj liniji, sudo označava

da naredbu izvršava korisnik sa administratorskim pristupom te –g zastavica označava instalaciju

Apache Cordova alata globalno na razini operacijskog sustava.

Primjer koda 4.1. Naredba za instalaciju Apache Cordova alata na Linux OS-u [1]

$ sudo npm install -g Apache Cordova

Na Windows sustavu naredba za instalaciju je dana u primjeru koda 4.2 gdje C:\> označava da je

mjesto pokretanja naredbe na disku particiji C.

Primjer koda 4.2. Naredba za instalaciju Apache Cordova alata na windows OS-u [1]

C:\> npm install -g Apache Cordova

Apache Cordova uključuje alate i knjižnice za pakiranje razvojnog koda u aplikaciju koja se može

izvršavati na uređaju. Proces pakiranja će ovisiti o platformi jer svaka platforma ima različite

načine pakiranja. Po uspješnoj instalaciji možemo pristupiti željenom direktoriju u kojem želimo

napraviti projekt i učiniti to naredbom iz primjera koda 4.3 gdje je tcf-cordova ime direktorija u

kojem će se napraviti Apache Cordova projekt, com.tennis.center.finder jedinstveni

identifikator paketa u obrnutom redoslijedu odnosu na imenovanje internetskih domena, Tennis

Center Finder naziv aplikacije i naslov koji će se pokazivati na korisničkom sučelju.

Primjer koda 4.3. Naredba za kreiranje Apache Cordova projekta za Tennis Center Finder

aplikaciju

$ cordova create tcf-cordova com.tennis.center.finder Tennis Center Finder

33

Apache Cordova projekt ima datotečnu strukturu prikazanu na slici 4.3. Unutar nastalog direktorija

tcf-cordova biti će kreiran direktorij www u kojem se nalazi početna stranica Web koda i resursi

u direktorijima css, js i img koji su automatski kreirani i u njih se po konvenciji pohranjuje kod za

dizajn, JavaScript kod i fotografije i ikone. Ove će se datoteke po instalaciji pohraniti u memoriju

uređaja u lokalni datotečni sustav. Također, kreira se config.xml datoteka koja sadrži meta-podatke

za kreiranje i distribuciju aplikacije i specifične parametre i module koje aplikacija koristi na

različitim platformama. Informacija iz naredbe primjera koda 4.3. pohranjuju se u “config.xml“

datoteci te se kasnije može izmijeniti. Ovaj postupak detaljnije je objašnjen na primjeru aplikacije

Tennis Center Finder poglavlju 5.2.

Slika 4.3. Datotečna struktura Apache Cordova projekta za aplikaciju Tennis Center Finder

Verziju instaliranog Apache Cordova alata moguće je provjeriti naredbom iz primjera koda 4.4.

Primjer koda 4.4.Naredba za provjeru verzije instaliranog Apache Cordova alata [1]

$ npm info cordova version

34

Ažurirati trenutnu verziju Apache Cordova alata može se naredbom iz primjera koda 4.5.

Primjer koda 4.5. Ažuriranje trenutne verzije Apache Cordova alata [1]

$ sudo npm update -g cordova

Dodavanje željenih plaftormi moguće je korištenjem naredbi u komandnoj liniji. Android

platformu dodaje se naredbom primjera koda 4.6, gdje --save opcija služi za automatsku pohranu

konfiguracijskih informacija o platformi u config.xml datoteku.

Primjer koda 4.6. Dodavanje Android platforme u Apache Cordova projekt [1]

$ cordova platform add android –save

Posebno strukturirane datoteke svake dodane platforme će biti spremljene u direktoriju platforms

kao posebni poddirektoriji (slika 4.3) unutar kojih se na posebno mjesto za svaku platformu kopira

i sadržaj www direktorija. Te datoteke nije preporučljivo mijenjati jer se datoteke ažuriraju

prilikom instalacije novih priključaka ili prilikom izgradnje koda aplikacije prije samog

pokretanja.

Za ispis trenutno konfiguriranih platformi u projektu koristi se naredba iz primjera koda 4.7, gdje

je ls skraćenica od eng. list što znači ispis. Može se koristiti i list.

Primjer koda 4.7. Ispis svih konfiguriranih platformi u projektu [1]

$ cordova platform ls

Aplikaciju je moguće izgraditi za pokretanje na android platformi naredbom iz primjera koda 4.8.

Također, ukoliko ne specificiramo za koju platformu želimo izvršiti build naredbu, naredba će se

izvršiti za sve instalirane platforme.

Primjer koda 4.8. Izgrađivanje aplikacije za Android platformu [1]

$ cordova build android

35

Ukoliko postoje određena ažuriranja, moguće ih je instalirati naredbom naredba iz primjera koda

4.9. Datoteke unutar direktorija android u ovom slučaju ponovno se ažuriraju te ukoliko je korisnik

ručno unosio promjene, one će biti izgubljene.

Primjer koda 4.9. Ažuriranje Android platforme u projektu Apache Cordova alata [1]

$ cordova platform update android –save

Za pokretanje aplikacije u emulatoru koristi se naredba iz primjera koda 4.10.

Primjer koda 4.10. Pokretanje Android aplikacije Apache Cordova projekta u emulatoru [1]

$ cordova emulate android

Pokretanje aplikacije na uređaju koji je spojen na računalo vrši se naredbom iz primjera koda 4.11.

Primjer koda 4.11. Pokretanje Android aplikacije Apache Cordova projekta na uređaju [1]

$ cordova run

Instalacija proširenja koja se mogu koristiti u web kodu aplikacije izvršava se naredbom iz

primjera koda 4.12, gdje je cordova-plugin-camera naziv proširenja koje omogućuje pristup

nativnim značajkama i funkcionalnostima kamere uređaja.

Primjer koda 4.12. Instalacija Apache Cordova proširenja cordova-plugin-camera za pristup

API-jima kamere [1]

$ cordova plugin add cordova-plugin-camera

Popis svih proširenja koje alat nudi može se naći u službenoj dokumentaciji [1], a dio

funkcionalnosti koje pružaju prikan je u tablici 4.1. Za pregled instaliranih priključaka koristi se

naredba iz primjera koda 4.13.

Primjer koda 4.13. . Ispis svih konfiguriranih priključaka u projektu [1]

$ cordova plugin ls

36

4.6. Preporučena arhitektura Apache Cordova JavaScript aplikacije

Za Web projekte, većinom je svaka stranica učitana promjenom URL-a. Svaka stranica djeuje kao

zasebna samostojeća aplikacija. Može se reći da Web projekt ima više JavaScript aplikacija. Na

svakoj je stranici potrebno učitati sve nužne podatke proširenja što na osobnim računalima nije

značajan problem koliko je to slučaj na mobilnim uređajima.

S druge strane, za Apache Cordova projekte cijeli taj projekt mora biti jedna aplikacija, baš kao

kod desktop aplikacija. Stoga bi trebao postojati samo jedan glavni prozor koji sadrži sve resurse,

kontrole, podatke i slično. Zbilja nije potrebno ponovno učitavati sve bazne JavaScript ili CSS

datoteke prilikom promjene URL adrese.

Preporuča se da u korijenskom direktoriju aplikacije bude index.html datoteka koja će uključivati

sve potrebne resurse i biti početna stranica Apache Cordova aplikacije. Apache Cordova servis za

pokretanje i izgradnju aplikacije po standardu uzima index.html datoteku kao prvu stranicu

aplikacije. Ta bi datoteka trebala sadržavati samo osnovne JavaScript i css datoteke koje se koriste

u cijeloj aplikaciji. Ova datoteka ne bi trebala sadržavati druge osim body oznake unutar koje se

dinamički učitavaju podaci trenutnih stranica. Pravilo je da zapravo osim body oznake unutar nje

uvijek bude div kontejner kojem je pridodan identifikator body i zatim se u njega kao u temeljni

predložak može dodavati drugi sadržaj.

Jedna glavna JavaScript datoteka najčešće se zove “app.js” ili “application.js”. Unutar te datoteke

trebala bi postojati jedna instanca objekta, primjerice nazvana “app”. Neke globalne varijable

predstavljaju svojstva ove instance, naprimjer app.settings može sadržavati postavke. Treba

postaviti i određene metode za pristup funkcionalnostima, kao što su app.start() i app.exit(). Jako

je važno da postoji samo jedna instanca aplikacije, upravo zbog gore navedenih principa na kojima

se Apache Cordova temelji.

Sav sadržaj aplikacije učitan je u div kontejner identifikatora body putem XHR poziva. Nema

potrebe za promjenom adrese URL-a jer aplikacija nije pokrenuta u klasičnom Web pregledniku

koji pokazuje adresu. Preporučeno je da se putem metoda na app objektu vrši navigacija. Tada je

moguće imati potpunu kontrolu nad stranicama i neće biti efekta bljeska prilikom promjene

stranica.

37

5. UPORABA APACHE CORDOVA ALATA ZA IZRADU HIBRIDNE APLIKACIJE

TENNIS CENTER FINDER

5.1. Korisničko sučelje aplikacije

Aplikacija Tennis Center Finder [2] je sustav u kojem korisnici putem Web ili mobilne aplikacije

mogu pristupati podacima o teniskim terenima, pretraživati ih po različitim ključevima i

informirati se o njihovim lokacijama, tipovima podloga i sličnim podacima. Svim korisnicima

omogućeno je pregledavanje teniskih terena, a samo oni koji se registriraju i prijave u sustav mogu

dodavati prijedloge za izmjenu određenih podataka o teniskim centrima i prijavljivati zamijećene

pogreške u sustavu. U aplikaciji postoji i uloga administrator koja omogućuje aktivaciju i

deaktivaciju ostalih članova aplikacije, pregledavanje prijavljenih pogrešaka i unos novih centara

u sustav. Aplikacija je početno na hrvatskom jeziku, ali u meniju se može odabrati opcija za

promjenu jezika i cijelo je sučelje dostupno i na engleskom jeziku.

Administrator može pregledavati korisnike koji su registrirani u sustavu, njihova korisnička i

stvarna imena, kontakt brojeve i status koji određuje jesu li korisnici aktivni. Može aktivirati ili

deaktivirati svakog korisnika, obrisati ga iz sustava ili poslati određenom korisniku email. Osim

korisnika, administrator vidi i prijavljene pogreške u sustavu, može ih pregledavati i brisati ili

poslati korisnicima autorima prijava email za detaljnije informacije. Svaki registrirani korisnik

ima pristup svom profilu na aplikaciji. Na profilu pregledava svoje podatke, može ih mijenjati te

ima posebnu opciju za izmjenu email adrese, lozinke i korisničkog računa. Baza podataka u koju

su centri pohranjeni, koristi se i za aplikaciju Tennis Partner Search [26] koja služi za pretragu

teniskih partnera prema vremenu, lokaciji, vještinama i tipu terena. Podaci koji su izmijenjeni u

jednoj aplikaciji, odmah su dostupni u drugoj. Aplikacija Tennis Center Finder u budućnosti može

biti poopćena i razgranata i na ostale sportske centre, uz dodatne mogućnosti i opcije.

Prilikom prvog korištenja aplikacije korisnici se moraju registrirati putem obrasca na slici 5.1.a.

Nakon uspješne registracije podaci o korisniku se šalju u bazu podataka i korisniku se šalje mail

sa poveznicom koja vodi na adresu verifikacije korisničkog računa. Po uspješnoj verifikaciji mail

adrese, korisniku je odobren pristup u aplikaciju te se on prijavljuje putem sučelja prikazanog na

slici 5.1.b. Ukoliko korisnik zaboravi lozinku, postoji opcija promjene lozinke te ukoliko korisnik

unese email adresu, na nju mu se šalje privremena lozinka. Sučelje je vidljivo na slici 5.1.c.

38

(a) registracija (b) zaboravljena lozinka (c) prijava

Slika 5.1. Ekran aplikacije Tennis Center Finder za: (a) prijavu; (b) promjenu lozinke; (c)

registraciju

Nakon same prijave u aplikaciju korisnik ima pristup pretraživanju teniskih terena. Pretraživanje

se vrši po lokacijskim informacijama ili nazivu terena kao što je prikazano na slici 5.2.a. Nakon

pritiska na gumb za pretragu, izlistavaju se podaci o terenima koji odgovaraju kriterijima

pretraživanja, kao na slici 5.2.b. Pretraživanje terena u aplikaciji vrši se na način da korisnik u

formu upiše bilo koju od sljedećih vrijednosti: država, ime centra, vrsta podloge, ulica i broj, grad

ili okrug željenog centra. Teren je moguće pronaći po bilo kojem od navedenih kriterija. Po pritisku

na tipku traži, korisniku se ispod forme prikažu slike s koordinatama pronađenih odgovarajućih

centara, zajedno s potpunim informacijama o njihovoj lokaciji i nazivu prema kojima korisnik

može zaključiti je li ih ispravno unio. Za svaki teren koji se pronađe, registrirani korisnici mogu

prijaviti ukoliko vide grešku, što ih dovodi na formu za prijavu bugova gdje za određeni centar

prijavljuju opis problema i eventualni prijedlog rješenja. Administrator osim gumba za prijavu

pogreške vidi i opciju za uređivanje i brisanje svakog pojedinog terena. Ukoliko odabere opciju

uređivanja terena, otvara se obrazac popunjen trenutnim podacima iz baze podataka i, ukoliko

korisnik nešto promijeni, klikom na gumb "Upiši u bazu" potvrđuje se promjena za navedeni

centar, što je prikazano na slici 5.2.c.

39

(a) pretraživanje terena (b) prikaz pronađenih centara (c) unos podataka o centru

Slika 5.2. Ekran aplikacije Tennis Center Finder za: (a) pretraživanje terena; (b) prikaz

pronađenih centara; (c) unos i ispravak podataka o centru

Korisnici koji pregledavaju terene imaju mogućnost prijave pogreške ukoliko uoče da neki podaci

nisu ispravni i to se može učiniti na formi koja je vidljiva na slici 5.3.a. Administrator aplikacije

na ekranu s pogreškama može vidjeti sve pogreške koje su korisnici prijavili i dodatno ih

kontaktirati u vezi problema ukoliko nije jednostavno rješiv. Kako je prikazano na slici 5.3.b.,

svaki korisnik ima mogućnost ispravljanja podataka o svome korisničkom računu kao što su ime i

prezime, broj fiksnog i mobilnog telefona, te može promijeniti svoju email adresu i lozinku.

Administrator također ima pravo pregleda ostalih korisnika u bazi aplikacije te osnovnih podataka

o njima te komunicirati sa pojedinima putem e-pošte ukoliko je to potrebno. Taj prikaz je vidljiv

na slici 5.3.c zajedno sa prikazom opcija u meniju koje su dostupne korisniku koji je administrator.

40

(a) prijava pogreške (b) unos podataka o korisniku (c) prikaz korisnika u bazi

Slika 5.3. Ekran aplikacije Tennis Center Finder za: (a) prijavu pogreške u informacijama o

centru; (b) unos i ispravak podataka o korisniku; (c) prikaz korisnika u bazi

5.2. Konfiguracija postavki izvršavanja

U config.xml datoteci prikazanoj na slici 5.4. osim jedinstvenog identifikatora aplikacije, njezinog

naslova, broja verzije i opisa definirani su i neki sigurnosni parametri te postavljene

konfiguracijske vrijednosti koje vrijede za sve ili samo neke specifične platforme. U ovom slučaju

za primjer aplikacije Tennis Center Finder jedina platforma na kojoj se izvršava je Android. Unutar

content oznake određeno je početno mjesto i naziv datoteke koja se prva poziva prilikom

izvršavanja, odnosno korijenska datoteka projekta index.html. Pod allow-intent oznakom

određeno je koji sve protokoli smiju komunicirati s aplikacijom, a to su http i https za mrežni

pristup, telefonski pozivi i sms poruke, geolokacijski protokol te protokol za slanje e-pošte.

Preference oznake mogu se nalaziti unutar platform oznaka što znači da vrijede isključivo za

određenu platformu ili samostalno što znači da se primjenjuju na svim platformama na kojima se

aplikacija izvršava i na kojima je to moguće. Opcija StatusBarBackgroundColor određuje boju

statusne trake iznad aplikacije dok je aplikacija upaljena. Na slikama 5.1. na prikazima ekrana

iznad aplikacije vidljiva je statusna traka plave boje što je namješteno u confg.xml datoteci. Opcije

koje u sebi sadrže riječ SplashScreen određuju kako će izgledati ekran dok se podaci o aplikaciji

učitavaju pri pokretanju. Za ovaj ekran koristi se slika koja se prikazuje preko cijelog zaslona te

41

se mogu definirati parametri o vremenskom trajanju, kašnjenju, sakrivanju samog početnog

ekrana. LoadUrlTimeoutValue je opcija postavljena samo za izvršavanje na Android operacijskom

sustavu te određuje maksimalno dozvoljeno vrijeme učitavanja svih linkova nakon kojeg javlja

pogrešku. Orientation parametar postavlja standardnu orijentaciju aplikacije na Android

operativnom sustavu u portretnu. minSdkVersion i targetSdkVersion parametri definiraju raspon

verzija sustava Android koji podržavaju izvođenje ove aplikacije te je definirano da se aplikacija

Tennis Center Finder izvršava na uređajima s verzijama 4.1 Jelly Bean do najviše 6.0 Marsmallow.

Slika 5.4. Datoteka config.xml sadrži konfiguracijske parametre Apache Cordova aplikacije za

izvršavanje na nativnim platformama.

42

5.3. Arhitektura klijentske aplikacije

Za pisanje klijentske strane aplikacije korišten je JavaScript framework AngularJS [27]. To je

framework otvorenog koda razvijen od strane kompanije Google i zajednice individualnih

programera i tvrtki. Framework omogućuje i olakšava izradu Jednostraničnih aplikacija, što znači

da jedna glavna korijenska Web stranica može učitati više različitih pogleda unutar sebe. Za razliku

od tradicionalnih aplikacija Single Page aplikacije ne učitavaju ponovno cijelo korisničko sučelje,

te ne šalju velik broj zahtjeva prema poslužitelju. Inicijalni sadržaj se učitava prije, te se različiti

dinamični pogledi mogu učitavati za vrijeme izvršavanja i ugraditi u ljusku glavnog sučelja.

AngularJS [27] olakšava postupke manipulacije DOM objektima te njihovom poviješću te na

specifičan način adresira navigaciju unutar aplikacije, odnosno izradu ruta koje određuju gdje se

Single Page aplikacija trenutno nalazi. Također olakšava korištenje asinkronih poziva i dinamičko

učitavanje raznih modula.

Svaka HTML datoteka u projektu pokazuje se prilikom promjene određenog URL-a, odnosno

ovisi o mjestu na kojem se korisnik trenutno nalazi unutar aplikacije. Sadržaj koji se korisniku

prikazuje na grafičkom sučelju kombinacija je HTML elemenata koji se formiraju od podataka

postavljenih u JavaScript funkcijama koje se zove kontroleri. Kontroleri služe za dvosmjernu

komunikaciju sa grafičkim dijelom aplikacije, što znači da se svaka promjena varijable na

grafičkom sučelju propagira u kontroler funkciju i obratno. Kada se varijabla u kontroler funkciji

promijeni, ukoliko je povezana s varijablom u grafičkom sučelju poziva se automatska metoda za

osvježenje njezine vrijednosti na ekranu. Ove promjene su standardno svojstvo AngularJS [27]

aplikacija.

Osim kontroler funkcija, korištene su i takozvane “factory“ funkcije koje imaju namjenu

komunikacije sa udaljenim, poslužiteljskim dijelom aplikacije. Kada je potrebno dohvatiti podatke

sa poslužitelja primjerice o prijavljenom korisniku ili poslati poslužitelju izmjene podataka o

određenom centru ili naredbu za slanje e-pošte, tada kontroler funkcija samo proslijedi informacije

“factory“ funkciji koja izvršava tu komunikaciju i prima od poslužiteljeve stane JSON objekt s

povratnom informacijom o uspjehu operacije. Time se postiže da se iz različitih kontroler funkcija

mogu pozivati iste “factory“ funkcije bez dupliciranja koda i dobiva se na preglednosti i

jednostavnosti skaliranja aplikacije.

Datoteka Courts.html prikazana je na slici 5.5. Sastoji se od HTML koda koji služi za upisivanje

parametara po kojima se pretražuju teniski centri te tablice u kojoj se prikazuju pronađeni teniski

tereni. Ovaj kod ima funkciju prikazivanja parametara na ekranu. Sadrži vrijednosti varijabli

koje se prosljeđuju kontroleru u kojem se nalaze funkcije koje dohvaćaju parametre pretraživanja

43

i na temelju rezultata šalju ovoj datoteci podatke o pronađenim centrima. U div kontejneru

koristi se ng-repeat direktiva koja vrši iteraciju kroz objekt s podacima o centrima te pokazuje

svaki centar zasebno. Tablica unutar tog kontejnera sadrži sliku dohvaćenu direktno s Google

Maps usluge za svaki teren, te njegovo ime, adresu, grad, državu i gumbe za prijavu greške,

uređivanje i brisanje terena. Klikom na te gumbe aktiviraju se funkcije u kontroleru koje vrše

operaciju za točno određeni centar, ovisno o id parametru terena za koji je vezan gumb.

Slika 5.5. HTML kod za prikaz pronađenih teniskih terena

GetCourt() je JavaScript funkcija sa slike 5.6. koja se nalazi unutar kontroler funkcije i služi za

dohvaćanje određenog terena. Funkcija se koristi za prikaz podataka o određenom terenu. Na

temelju id parametra terena koji se dohvaća iz trenutne URL lokacije aplikacije, šalje upit

takozvanoj “factory“ fukciji courtFactory.getCourt() koja šalje upit poslužitelju i vraća rezultat.

Ukoliko je poslužitelj vratio poruku o uspješnosti, to znači da je teren dohvaćen i u varijable se

spremaju parametri o terenu. Ovisno o tome je li tip terena u bazi određen vrijednošću 0,1 ili 2 u

44

grafičkom sučelju mu se prikazuje vrijednost zemlja, tvrda podloga ili trava. Također se spremaju

podaci o nazivu i adresi. U trenutnu kada se ovim varijablama promijene vrijednosti, odnosno po

uspješnom učitavanju, pokreće se automatska naredba za osvježenje na grafičkom prikazu, stoga

čim su podaci dohvaćeni sa poslužitelja i spremljeni u varijable, korisnik može vidjeti podatke o

terenu na ekranu.

Slika 5.6. Javascript funkcija u kontroleru koja temeljem dohvaćenih podataka o teniskom centru

postavlja vrijednosti varijabli koje se prikazuju na sučelju

SearchCourts() i GetCourts() su JavaScript funkcije unutar kontroler funkcije koje služe

dohvaćanju podataka o centrima, a prikazane su na slici 5.7. Pozivaju se prilikom pritiska na

odgovarajući gumb čiji je kod vidljiv na slici 5.5. te pozivaju “factory“ funkcije za pretraživanje

terena po odgovarajućim parametrima ili za dohvaćanje svih teniskih centara u bazi. Nakon

uspješnog odgovora poslužitelja, provjerava se je li i poruka o uspjehu istinita te se u slučaju

pozitivnog ishoda postavljaju podaci u objekt koji sadrži terene što pobuđuje automatsko

osvježavanje povezanih vrijednosti na korisničkom sučelju.

45

Slika 5.7. Funckija searchCourts() za pretraživanje terena prema zadanim parametrima i

getCourts() za dohvaćanje svih terena iz baze

CourtFactory() je JavaScript funkcija koja u sebi sadrži funkcije za slanje HTTP upita udaljenom

poslužitelju. Prikazana je na slici 5.8. Vrijednost config.ServerURL() dohvaća lokaciju

udaljenog poslužitelja iz konfiguracijske datoteke. Metode koje pruža ova funkcija služe za

dohvaćanje, pretraživanje, dodavanje, uređivanje i brisanje teniskih terena iz baze podataka.

Ovdje su ove funkcije samo deklarirane te se pozivaju isključivo po potrebi, iz kontroler

funkcija. Funkcije šalju POST zahtjev određenoj PHP skripti na poslužitelju te pripadajuće

informacije u obliku JSON objekata. Poslužitelj prima podatke, učitava ih, izvršava zadanu

funkciju te vraća informaciju o uspješnosti te druge potrebne informacije, primjerice popis

pronađenih terena. “factory“ funkcije ne provjeravaju povratnu vrijednost poslužitelja već

prosljeđuju taj JSON objekt funkciji iz kontrolera koja je zatražila ovaj poziv.

46

Slika 5.8. Funkcija courtFactory poziva funkcije na poslužitelju za dohvaćanje, pretraživanje,

dodavanje, uređivanje i brisanje teniskih centara

5.4. Arhitektura poslužiteljskog dijela aplikacije

Na strani poslužitelja koristi se PHP tehnologija i baza podataka pisana u MySQL jeziku. PHP

poslužiteljski kod zadužen je za otvaranje sjednice pojedinog korisnika dok on aktivno koristi

aplikaciju. To je važno za autentikaciju samog korisnika odnosno njegov pristup aktivnostima koje

se obavljaju na poslužitelju kao što su unos i izmjena podataka te slanje e-pošte sa njegove e-mail

adrese. Klijentska strana aplikacije šalje poslužitelju XHR zahtjeve tipa POST, sadržavajući JSON

a poslužitelj nakon obavljenog zadatka vraća aplikaciji informacije u obliku JSON objekta. Na

slici 5.9. prikazan je kod za prijavu korisnika u aplikaciju s poslužiteljske strane. Skripta uključuje

drugu PHP datoteku za spajanje na bazu podataka i čini dostupnom varijablu $connection u kojoj

su sadržani podaci o vezi. U JSON datoteci primaju se korisničko ime i lozinka te se oni spremaju

u PHP polje json_decode() naredbom. Nakon toga podaci se pročišćavaju jer može doći do

dodavanja dodatnih znakova od strane internet preglednika prilikom samog slanja s klijentske

aplikacije. Lozinka se md5 protokolom dekriptira da bi se usporedila s vrijednošću u bazi podataka

jer se u bazi ne pohranjuju lozinke u izvornom, već u md5 kodiranom obliku. Zatim se šalje upit

bazi podataka koji provjerava postoji li korisnik sa zadanim korisničkim imenom i kodiranom

lozinkom, koji je uspješno verificirao svoj račun putem adrese e-pošte. Funkcija mysqli_query()

47

izvršava upit prema bazi podataka, a mysqli_num_rows() vraća broj redaka pronađenih korisnika

te ukoliko je broj redaka jednak jedan, tada je korisnik uspješno pronađen i njegovi podaci stavljaju

se u polje koje se na kraju pretvara u JSON objekt i naredbom echo šalje zajedno s porukom o

uspjehu klijentskom dijelu aplikacije koji je pozvao skriptu.

Slika 5.9. PHP datoteka za prijavu korisnika u aplikaciju

Metoda getCourt() funkcije courtsFactory() sa slike 5.8. šalje POST zahtjev skripti get.php koja

se nalazu i courts direktoriju na poslužitelju. Slika 5.10. Pokazuje navedenu PHP datoteku za

učitavanje centra po id parametru. Header naredbe određuju s kojih se mjesta izvan lokalnog

poslužitelja i kojim protokolima mogu slati zahtjevi ovoj skripti. Skripta od klijentske aplikacije

prima JSON datoteku u kojoj se nalazi parametar id za željeni centar te se prema tom parametru

šalje upit bazi podataka. Ukoliko broj dohvaćenih terena jednak jedan, podaci o terenu se

naredbom mysqli_fetch_assoc() spremaju u varijablu koju program prosljeđuje klijentskoj

aplikaciji u obliku JSON objekta.

48

Slika 5.10. PHP datoteka za učitavanje centra po id parametru

5.5. Kontrola uspješnosti i ispravljanje pogrešaka

JavaScript jezik omogućuje ispisivanje naredbi u takozvanu konzolu koja može služiti za

ispisivanje bilo kakvih poruka. Najznačajniji internetski preglednici imaju integriranje alate za

razvojne programere Web aplikacija u koji u sebi obavezno sadrže konzolu za ispisivanje poruka.

U slučaju nastanka bilo kakvih pogrešaka u kodu prilikom izvršavanja, odgovarajuće poruke s

detaljima o pogreškama moguće je pronaći u konzoli. Osim automatskog ispisivanja u konzolu

programeri mogu i samostalno u JavaScript kodu odrediti u kojim će se situacijama ispisivati

poruke u konzoli. Poruke mogu sadržavati informacije o uspješnom izvršavanju određene petlje,

funkcije i slično ili ispisivati vrijednosti određenih varijabli u različitim vremenskim trenutcima te

ukazivati na redoslijed izvršavanja operacija što je u JavaScript jeziku posebno korisno obzirom

da se kod izvršava asinkrono, odnosno ne čeka se završetak izvršavanja jedne programske

operacije prije nego li se krene na druge, osim ako programer to eksplicitno ne odredi. U praksi se

poruke ispisuju u konzolu samo za vrijeme razvoja aplikacije te se prije isporuke produkcijske

verzije koju koriste ciljani korisnici preporuča da se ispisivanje poruka u konzolu onemogući.

49

Prilikom korištenja Apache Cordova aplikacija, također je moguće koristiti konzolu kao i kod

drugih Web aplikacija, što kod nativnih aplikacija nije slučaj. Razlog tome leži u korištenju

WebView okruženja što znači da se aplikacija izvršava u internetskom pregledniku mobilnog

uređaja. Korištenje na primjeru Tennis Center Finder aplikacije prikazano je na slici 5.11.

Neovisno o tome izvršava li se aplikacija u emulatoru ili na fizičkom uređaju poruke u konzoli

mogu se vidjeti na računalu. Fizički uređaj potrebno je spojiti odgovarajućim podatkovnim kablom

i u postavkama omogućiti programerski pristup kako bi računalu bile vidljive informacije koje se

ispisuju u internetskim preglednicima uređaja. U Tennis Center Finder aplikaciji ispisivanje

poruka u konzoli je korišteno prilikom promjene URL adrese kako bi se provjerilo koje se datoteke

izvršavaju. Također, prilikom izvršavanja komunikacije s PHP kodom na poslužitelju prilikom

dohvaćanja informacija ili slanja bilo kakvih zahtjeva ispisuju se poruke koje poslužitelj vraća

zajedno s podacima. Sve poruke koje ne bi trebale biti prikazane na korisničkom sučelju, a važne

su programeru za provjeru uspješnosti i tijeka izvedbe programa.

Slika 5.11. Ispravljanje pogrešaka. S desne strane ekrana aplikacija se izvršava u emulatoru, dok

se na lijevoj strani u Chrome Developer Tools alatu može vidjeti ispis u konzoli.

50

6. ZAKLJUČAK

Nativne aplikacije izvršavaju se najbrže i imaju pristup svim programskim sučeljima određene

vrste uređaja. Web aplikacije za razliku od nativnih nisu ograničene na pojedine platforme i

prikazuju se na svim uređajima sa ugrađenim internetskim preglednikom, iako nemaju pristup

svim nativnim funkcijama. Hibridne aplikacije kombinacija su nativnih i Web aplikacija te

uzimaju najbolje karakteristike obaju navedenih. Valja napomenuti da hibridne aplikacije nisu

idealno rješenje u svim situacijama, poglavito kada se radi o igrama, aplikacijama izmijenjene

stvarnosti ili drugim aplikacijama s puno grafičkih animacija bolje je koristiti nativne, a ukoliko

nema potrebe za pristupom nativnim značajkama uređaja tada je potrebno razmotriti ima li potrebe

za hibridnom aplikacijom koju će korisnici morati instalirati na svoje uređaje odnosno pohraniti u

memoriju telefona.

Prikazana implementacija Tennis Center Finder aplikacije pokazuje kako se korištenjem Web

tehnologija u kombinaciji s Apache Cordova alatom može napraviti hibridna aplikacija za

operacijski sustav Android. U mobilnoj aplikaciji se Web kod izvršava unutar Webview-a odnosno

kontejnera za ugnježđivanje Web aplikacija koji koristi internetski preglednik da bi prikazao

sadržaj unutar aplikacije, ali obzirom da se nalazi unutar kontejnera zajedno sa nativnim dijelom

aplikacije, razvijeni su protokoli za komunikaciju koji omogućuju komunikaciju sa sučeljima za

pristup nativnim značajkama kojima klasične Web aplikacije nemaju pristup.

Osobno sam mišljenja da će i u budućnosti hibridne aplikacije imati veliku primjenu jer velika

grupa programera posjeduje vještine korištenja Web alata te mogu lakše započeti sa stvaranjem

mobilnih aplikacija na hibridni način i otkrivanjem posebnosti različitih platformi. Vjerujem da će

se Apache Cordova nastaviti razvijati i primjenjivati, ali se isto tako nadam da će u daljoj

budućnosti sve platforme i uređaji koristiti jedinstvene tehnologije te da neće biti velikih razlika u

nativnim tehnologijama.

51

7. LITERATURA

[1] The Apache Software Foundation, “Documentation – Apache Cordova“, s Interneta,

https://cordova.apache.org/docs/en/latest/, 16.svibnja 2016

[2] Mentor: Miroslav Joler. “Tennis Center Finder“, Laboratorij za komunikacije i mrežne

sustave, Tehnički fakultet u Rijeci, 2012.

[3] Google Inc, “Cardboard“, s Interneta,

https://play.google.com/store/apps/details?id=com.google.samples.apps.cardboarddemo,

16.svibnja 2016

[4] Vine Labs Inc, “Vine“, s Interneta, https://vine.co/, 16.svibnja 2016

[5] Snapchat Inc, “Snapchat“, s Interneta, https://www.snapchat.com/, 16.svibnja 2016

[6] Google Inc, “Gmail“, s Interneta, http://gmail.com/, 16.svibnja 2016

[7] Google Inc, “Google Analytics“, s Interneta, http://www.google.com/analytics/, 16.svibnja

2016

[8] Facebook Inc, “Facebook Ads Manager“, s Interneta,

https://play.google.com/store/apps/details?id=com.facebook.adsmanager, 16.svibnja 2016

[9] ] Facebook Inc, “Facebook Groups“, s Interneta, http://www.facebookgroups.com/,

16.svibnja 2016

[10] eBay Inc,“Get the eBay app for Android“, s Interneta,

http://anywhere.ebay.com/mobile/android/ebay/, 16.svibnja 2016

[11] Pay Pal Pte. Ltd, “PayPal mobile app“, s Interneta,

https://www.paypal.com/webapps/mpp/mobile-apps, 16.svibnja 2016

[12] HealthTap, “HealthTap“, s Interneta, https://www.healthtap.com/ , 16.svibnja 2016

[13] Andy Frey, “There’s More Than One Way to Build Mobile Apps (Part 1)“, s Interneta,

http://blog.meltmedia.com/2013/05/theres-more-than-one-way-to-build-mobile-apps/, 8. svibnja

2015.

[14] Andy Frey, “There’s More Than One Way to Build Mobile Apps (Part 2)“, s Interneta,

http://blog.meltmedia.com/2013/05/theres-more-than-one-way-to-build-mobile-apps-part-2/, 22.

svibnja 2015.

52

[15] Adobe Systems Inc., “PhoneGap“, s Interneta, http://phonegap.com/, 16.svibnja 2016

[16] Appcelerator Inc., “Mobile App Development and MBaaS Products“, s Interneta,

http://www.appcelerator.com/mobile-app-development-products/, 16.svibnja 2016

[17] Adobe Systems Software Ireland Ltd., “Adobe AIR“, s Interneta,

http://www.adobe.com/hr/products/air.html, 16.svibnja 2016

[18] Sencha Inc., “Sencha Touch“, s Interneta, https://www.sencha.com/products/touch/,

16.svibnja 2016

[19] Facebook Inc., “ React Native -A FRAMEWORK FOR BUILDING NATIVE APPS

USING REACT“, s Interneta, https://facebook.github.io/react-native/, 16.svibnja 2016

[20] Saif Mohammad, “Building mobile app with Cordova and AngularJS“, s Interneta,

http://saifikram.com/2014/02/building-mobile-app-with-cordova-and-angularjs, 25. veljače 2014

[21] CruchBase Inc., “Nitobi Software“, s Interneta,

https://www.crunchbase.com/organization/nitobi-software, 16.svibnja 2016

[22] Adobe Systems Inc, “Adobe AIR“

https://play.google.com/store/apps/details?id=com.adobe.air, 16.svibnja 2016

[23] Gaea Mobile Ltd., “The Hobbit: Kingdoms“, s Interneta,

https://play.google.com/store/apps/details?id=com.kabam.fortress, 16.svibnja 2016

[24] Thejaswi Puthraya, “Dissecting Phonegap's architecture“, s Interneta,

http://agiliq.com/blog/2012/09/dissecting-phonegaps-architecture/, 6.rujna 2012.

[25] Software Freedom Conservancy, “Git“, s Interneta, https://git-scm.com/, 16.svibnja 2016

[26] Joler Apps, “Tennis Partner Search“, s Interneta,

https://play.google.com/store/apps/details?id=droid.tps, 16.svibnja 2016

[27] Google Inc., "AngularJS: Developer Guide", s Interneta, https://docs.angularjs.org/guide,

16.svibnja 2016

53

SAŽETAK I KLJUČNE RIJEČI

U radu je opisano kako svaka platforma za razvoj nativnih aplikacija ima posebne alate i principe

razvoja. Njihova najveća prednost je optimalna brzina animacija i moduli za mobilno plaćanje.

Web aplikacije mogu se pokretati na svim mobilnim platformama koje imaju preglednike i imaju

najkraće vrijeme razvoja. Nemaju pristup većini nativnih priključaka. Hibridne aplikacija

programirane su u Web tehnologijama i integrirane u nativnom kontejneru. Najznačajni alati koji

omogućuju programiranje aplikacija za više platformi istovremeno su Apache Cordova,

Appcelerator Titanium, Adobe AIR, Sencha Touch te React Native. Za razliku od ostalih, Apache

Cordova je u potpunosti besplatan alat koji ne -ograničava izbor Web tehnologije za izradu

aplikacija. Podržava Android, Blackberry10, iOS, Ubuntu, Windows i Windows Phone platforme.

Na primjeru Tennis Center Finder aplikacije pokazano je korištenje Apache Cordova alata za

izradu Android aplikacije pisane u AngularJS frameworku, HTML i CSS jezicima s klijentske

strane, te u PHP-u na poslužitelju.

Ključne riječi: Apache Cordova, PhoneGap, Razvoj hibridnih aplikacija, nativne hibridne i web

mobilne aplikacije.

Each platform for native applications development has its own special tools and development

principles. Their greatest advantage is optimal animations speed and mobile payments modules.

Web applications can be run on all mobile platforms with Web browsers and they have shortest

development cycle, but do not have access to majority of native APIs. Hybrid applications are

developed in Web technologies and integrated in native container. Most significant tools for

developing applications for multiple platforms at the same time are Apache Cordova, Appcelerator

Titanium, Adobe AIR, Sencha Touch and React Native. Apache Cordova is the only one among

them that is free and does not limit the choice of Web technology for building applications. It

supports Android, Blackberry10, iOS, Ubuntu, Windows and Windows Phone platforms. Using

Apache Cordova for building hybrid application is demonstrated on Tennis Center Finder

application that is built using AngularJS framework, HTML and CSS languages on the client-side

and PHP on server-side.

Keywords: Apache Cordova, PhoneGap, Hybrid application development, native hybrid and web

mobile applications.