SVEUČILIŠTE U SPLITU

FAKULTET ELEKTROTEHNIKE, STROJARSTVA I BRODOGRADNJE

DIPLOMSKI RAD

MODELIRANJE I IZRADA APLIKACIJE

ZA ANDROID TABLET I WEB

SUČELJA ZA UPRAVLJANJE

APLIKACIJOM NA DALJINU

Marijana Mateljan

Split, rujan 2014.

S V E U Č I L I Š T E U S P L I T U

FAKULTET ELEKTROTEHNIKE, STROJARSTVA I

BRODOGRADNJE

Diplomski studij: Računarstvo

Smjer/Usmjerenje:

Oznaka programa: 250

Akademska godina: 2013./2014.

Ime i prezime: MARIJANA MATELJAN

Broj indeksa: 852-2012

ZADATAK DIPLOMSKOG RADA

Naslov: MODELIRANJE I IZRADA APLIKACIJE ZA ANDROID TABLET I

WEB SUČELJA ZA UPRAVLJANJE APLIKACIJOM NA DALJINU

Zadatak: Opisati i modelirati aplikaciju koja sadrži kalendar, preglednik vremenske

prognoze, album slika, listu zadataka, listu termina. Aplikacija treba raditi na

android platformi za tablet. Aplikacijom se upravlja s udaljenog uređaja pomoću

web sučelja koje također treba modelirati i izraditi. Koristiti tehnologije

HTML/CSS, JavaScript/jQuery, mySQL, Groovy/Grails, Java.

Prijava rada: 28.02.2014.

Rok za predaju rada: 19.09.2014.

Rad predan: 16.09.2014.

Predsjednik

Odbora za diplomski rad: Mentor:

Prof. Dr. sc. Sven Gotovac Doc. dr. sc. Stipo Čelar

1

SADRŽAJ

1 UVOD ................................................................................................................................. 3

2 OPIS KORIŠTENIH TEHNOLIGIJA ................................................................................ 4

2.1 Grails ........................................................................................................................... 4

2.1.1 Groovy .................................................................................................................. 6

2.1.2 MVC model .......................................................................................................... 8

2.2 MySQL ...................................................................................................................... 10

2.2.1 Relacijske baze podataka ................................................................................... 10

2.2.2 Entity ‐ Relationship (ER) dijagram ................................................................... 12 2.3 Groovy Server Pages (GSP) ...................................................................................... 15

2.4 Android platforma ..................................................................................................... 17

2.4.1 Arhitektura Android sustava .............................................................................. 17 2.4.2 Razvoj Android aplikacije .................................................................................. 20

3 WEB APLIKACIJA (WEB SUČELJE) ........................................................................... 21

3.1 Instalacija Groovy/Grails ........................................................................................... 21

3.2 Spajanje na MySQL i izrada baze podataka .............................................................. 25

3.3 Prijava korisnika ........................................................................................................ 29

3.3.1 Postavljanje ........................................................................................................ 29 3.3.2. Izgled procesa registracije ....................................................................................... 31

4 ANDROID APLIKACIJA ................................................................................................ 33

4.1 Izrada Android aplikacije .......................................................................................... 33

4.2 PhoneGap................................................................................................................... 37

4.2.1 Postavljanje okruženja ........................................................................................ 40 4.2.2 „Pakiranje“ u Android aplikaciju- „PhoneGap Build“ ....................................... 43

5 API .................................................................................................................................... 45

6 TESTIRANJE APLIKACIJE ............................................................................................ 49

6.1 Poruke ........................................................................................................................ 50

6.2 Kalendar i zadatci ...................................................................................................... 51

6.3 Tablete ....................................................................................................................... 52

6.4 Kontakti ..................................................................................................................... 54

6.5 Foto album ................................................................................................................. 55

6.6 Novine ....................................................................................................................... 58

6.7 Mogućnost prikaza .................................................................................................... 59

6.8 Vremenska prognoza ................................................................................................. 60

2

7 ZAKLJUČAK ................................................................................................................... 61

8 LITERATURA ................................................................................................................. 62

9 PRILOZI ........................................................................................................................... 64

9.1 Kazalo slika i tablica .................................................................................................. 64

9.1.1 Kazalo slika ........................................................................................................ 64

9.1.2 Kazalo tablica ..................................................................................................... 66 9.1.3 Popis kodova ...................................................................................................... 66

9.2 Popis oznaka i kratica ................................................................................................ 66

9.3 Upravljanje verzijama ................................................................................................ 68

10 SAŽETAK/ABSTRACT I KLJUČNE RIJEČI/ KEYWORDS ....................................... 70

3

1 UVOD

Ovaj rad pojašnjava postupak izrade Android aplikacije i web sučelja za upravljanje

aplikacijom na daljinu za čiju su izradu korišteni: Groovy/Grails, HyperText Markup

Language (HTML), Cascading Style Sheets (CSS), Groovy Server Pages (GSP), Phonegap,

MySQL.

Članovi Odbora za diplomski rad, dr.sc. Sven Gotovac i dr.sc. Vladan Papić omogućili su

studentima (koji su za to bili zainteresirani) da izrade diplomski u suradnji sa jednom od

sljedećih tvrtki: Simens, Manas i Trovicor. Izabrala sam tvrtku Manas i dobila par ponuđenih

tema od kojih sam izabrala „Tablet aplikacija za starije“. Ideja je bila izraditi aplikaciju za

pomoć starijim i nemoćnima kako bi uz njenu pomoć članovi obitelji iz daljine pomagali

svojim roditeljima, djedovima ili ostalim članovima obitelji. Na tabletu bi se trebalo nalaziti:

vremenska prognoza, uputa za uzimanje lijekova (kada i koji lijek uzeti), kalendar( posjet

doktoru, rođendan…), lista važnih telefonskih brojeva, albumi slika itd.

Diplomski rad „Modeliranje i izrada aplikacije za android tablet i web sučelja za upravljanje

aplikacijom na daljinu“ analizira proces izrade baze podataka za web aplikaciju te izradu

tablet aplikacije u Android operativnom sustavu. U svrhu ovog diplomskog rada napravljena

je (u suradnji s kolegicom Ursom Špikom i mentorstvo djelatnika tvrtke Manas: Iliju Veselicu

i Igora Roglića) web aplikacija „RemoteAssistance“ i tablet aplikacija „RAMobile“.

Rad je podijeljen na sedam cjelina. U drugom poglavlju su ukratko opisane sve korištene

tehnologije. Treće poglavlje objašnjava proces spajanja web aplikacije s bazom podataka i

funkcionalnost login sučelja, a četvrto poglavlje proces izrade Android aplikacije.

Komunikacije između tableta i web-a (API) razrađena je u petom poglavlju, a zatim kroz

testiranje aplikacije u šestom poglavlju su razrađene glavne funkcionalnosti koje te dvije

aplikacije imaju. Zaključne misli donesene su u istoimenom, završnom poglavlju.

4

2 OPIS KORIŠTENIH TEHNOLIGIJA

Prilikom izrade korištene su sljedeće tehnologije: Groovy/Grails, HyperText Markup

Language (HTML), Cascading Style Sheets (CSS), Groovy Server Pages (GSP), Phonegap,

MySQL.

2.1 Grails

Grails je „open source okolina“(Slika 2.1), baziran na Java platformi, koji koristi Groovy

programski jezik i njegova dinamička svojstva. Inspiriran je razvojem dinamičkih jezika kao

Rails, Django i TurboGears… To je modularni okolina koji pokušava kroz jezgrene (eng.

core) tehnologije i pripadne module riješiti i ubrzati što više dijelova web razvoja. Grails

smanjuje složenost izgradnje Web aplikacija na Java platformi, gradnjom na već

uspostavljenim Java tehnologijama kao što su „Spring“ i „Hibernate“. Kroz temeljne

tehnologije i povezane dodatke, pokušava riješiti probleme izrade web aplikacija. Razvijen je

za rješavanje nekoliko ciljeva:

osigurava web okvir za Java platformu

ponovno koristi postojeće Java tehnologije kao što su Hibernate i Spring pod jednim

sučeljem

nudi okvir dosljedan razvoja

nudi dokumentaciju za ključne dijelove u okviru:

o „persistence okolina“

o predloške koji koriste GSP

o dinamičke oznake za stvaranje komponenti web stranice

o prilagodljiva i proširiva podrška za Ajax

osigurava potpuni način razvoja, uključujući i web-poslužitelja te automatsko ponovno

učitavanje resursa

Za razliku od tradicionalnih Java web okvira, Grails:

nema EXtensible Markup Language (XML) konfiguraciju

sadrži web server

ima dinamičke metode koje omogućuju obavljanje operacija bez potrebe za

implementacijom sučelja ili proširenja baze klasa. Daje dinamičke metode temeljene

na vrsti klase. [12]

5

Slika 2.1 Grails okolina [11]

2010. godine ispitano je 1800 programera o izboru razvojnog okruženje za Java Virtual

Machine (JVM). Rezultati ispitivanja prikazani su na Slika 2.2. S obzirom da je pušten u

veljači 2008.godine i da je relativno mlado okruženje, njegove prednosti su prepoznate kod

nekih programera. Na Tablica 2.1 prikazane su ocjene korisnika iz 2014 godine pri čemu

vidimo značajan pomak u donosu na 2010. godinu.[21]

Slika 2.2 Popularnost razvojnih okruženja 2010.godine

6

Tablica 2.1 Ocjene okolina JVM

Brzi razvoj

aplikacija

Kompleksnost

okruženja

Jednostavnost

korištenja

Dokumentacija Testiranje Sigurnost Ukupno

Spring

MVC

2,5 3,5 3 4 4 5 22

Grails 5 3 4,5 5 5 2,5 25

Vaadin 4 4 4 5 3 4 24

GWT 4 4 4 4,5 2,5 1 20

Wicket 3,5 2,5 3 3 4 5 21

Play 5 2 3,5 4 5 4,5 24

Strust 2 4 3 2,5 4 2,5 18

JSF 3 3,5 4 4,5 2 2 19

2.1.1 Groovy

Groovy je agilni dinamični jezik za Java platformu čiji je tvorac James Strachan. Inspiriran je

jezicima poput Pythona, Ruby i Smalltalka. Napredne opcije tih jezika približene su Java

programerima kroz sintaksu jako sličnoj Java sintaksi. Na taj način Java programeri mogu

koristiti neke programske konstrukte o kojima se tek priča da će se dodati u Javu, npr.

„closures“. Groovy se često naziva i skriptnim jezikom, što ne znači da je dobar samo za

pisanje skripti.[10] Osnovne informacije o Groovy-u:

skripte/klase se obično nalaze u .groovy datotekama

skripte se mogu interpretirati ili se mogu kompajlirati u Java .class biblioteke

iz Groovy-a možemo zvati Java kod (i obrnuto)

većina Java ključnih riječi ima isto značenje i u Groovy-u

redoslijed package, import i class deklaracija je isti kao i u Javi

Groovy već unaprijed uvozi pakete groovy.lang, groovy.util, java.lang, java.util,

java.net i java.io

7

u Groovy-u sve je objekt (nema primitivnih tipova)

Groovy ima ugrađenu podršku za kolekcije (def praznaLista = [])

Groovy olakšava rad sa stringovima, datumima…

dolazi s podrškom za rad s Java-based data access technology (JDBC), XML-om.

[22]

Valjane Java datoteke su također valjane Groovy datoteke. Iako su ta dva jezika slična,

Groovy kod može biti kompaktniji, jer ne zahtijeva sve elemente koje zahtijeva Java. To

omogućuje Java programerima da postupno nauče Groovy počevši s poznatom Java

sintaksom. [3]

Neke osnovne značajke Groovya:

1. Znak točka-zarez (;)

U C, C++, C#, Javi učestalo se koristi ; . Iako je Groovy-eva sintaksa 99% slična Javinoj,

znak ; može se izostaviti.

2. Ključna riječ „return“

U Groovy-u, posljednji izraz evaluiran u tijelu metode može se vratiti bez potrebe za "return"

ključnom riječi. To je bolje koristiti kod kratkih metoda.

3. „Def“ i „type“

Koristi se ili jedno ili drugo. Odnosno, umjesto def String name = "Marijana", koristi se

String name = ˝Marijana˝

Kada koristimo „def“ u Groovy-u stvarni nositelj tipa (eng.type) je objekt da bi se mogao

dodijeliti bilo koji objekt varijabli definiranoj u „def“ i vratiti bilo koja vrsta objekta.

4. Klase i metode „Public“

Po defaultu, Groovy smatra klasa i metode „Public“ pa to nije potrebno isticati u kodu.

5. Zagrade

Groovy, u nekim slučajevima, omogućuje izostavljanje zagrada.

6. „Get“ i „set“

8

Kompajler dohvaća i postavlja vrijednosti. Umjesto :

class Person {

private String name

String getName() { return name }

void setName(String name) { this.name = name }

}

Može se napisati:

class Person {

String name

}

7. Imenovani parametri sa zadanim konstruktorom

Groovy koristi with() metodu koju dodaje na sve objekte bilo koje vrste kako bi izbjegli

ponavljanje prefiksa prilikom ažuriranja instanci

8. Groovy-ev switch

Groovy-ev switch može obraditi bilo koju switch vrijednost i mogu biti izvedene različite

vrste podudaranja.

9. Groovy istina

Svim objektima može se „prisvojiti“ boolean vrijednost, odnosno sve što je null, void ili

prazno je false ili u suprotnom slučaju true. Tako umjesto if (name != null && name.length >

0) {} može se napisati if (name) {}. [3]

2.1.2 MVC model

Model-View-Controller (MVC) model je softverska arhitektura koja potiče odvajanje

problema, tako da:

model rukuje zastupljenošću podataka i operacija

view upravlja kako se podaci promatraju od strane korisnika

9

controller nositi kod koji povezuje korisnika sa sustavom. On prima zahtjev ili

događaj od korisnika, priprema podatke i poziva pravilnu poslovnu logiku, a zatim se

vraća view koji predstavlja rezultat akcije korisnika. [5]

Model se u Grails terminologiji naziva Domain i radi na Grails object relational mapping

(GORM) arhitekturi, što znači da okolina (eng.framework) vodi računa o komunikaciji sa

bazom i pretvara upite u potrebne query upite. Izbor baze (MySQL, PostgreSQL ili neka

druga) ovisi o samom korisniku i prilikom promjene baze ne vrše se nikakve promjene u

samoj aplikaciji već se promjeni „driver“ za komunikacijom sa bazom. Dovoljno je sastaviti

upite o željenim podacima iz baze ili pak prosljeđivanje podataka iz Controllera, a Model

vodi računa kako pretvoriti tu sintaksu u query upite ovisno o izabranoj bazi podataka.

Također, brine da li unos može ili ne smije biti null, jedinstveni unos, format e-maila, datuma,

broj itd. Ovim se ubrzava mogućnost izrade osnovnih funkcionalnosti aplikacije.

Grailsov MVC model građen je na Springovom MVC modelu. Koristi Uniform Resource

Locator (URL) za identifikaciju akcije i view-a i procesira CRUD (create, read, update i

delete) operacije korištenjem domene.

Grails Dispatcher Servlet proširuje Spring Dispatcher Servlet koji upravlja okruženjem

korištenjem Grails konfiguracijskih datoteka koje se nalaze u conf folderu aplikacije. Grails

Dispatcher Servlet primi zahtjev kao URL i prelazi na SimpleGrailsController klasu.

SimpleGrailsController radi kao primarni Controller koji upravlja zahtjevima te vraća

odgovor Dispatcheru. SimpleGrailsController delegati traže da

SimpleGrailsControllerHelper koji analizira zahtjev, identificira aktivnost. On izvršava

radnju i vraća ModelAndView koji je natrag u Grails Dispatcher.

Controller akcija poziva Domain za izvršavanje poslovnih funkcionalnost. GORM omogućuje

mapiranje mehanizma između domene i tablica baze podataka. View koristi SiteMesh

dekorativni okvir za dosljedan izgled aplikacije. (Slika 2.3) [6]

10

Slika 2.3 MVC

2.2 MySQL

MySQL je besplatan, „open source“ sustav za upravljanje bazom podataka. Uz PostgreSQL

MySQL je čest izbor baze za projekte otvorenog koda, te se distribuira kao sastavni dio

serverskih Linux distribucija. Također postoje inačice i za ostale operacijske sustave poput

Mac OS-a, Windowse itd.

MySQL baza je optimizirana kako bi bila brza na štetu funkcionalnosti. Nasuprot tome, vrlo

je stabilna i ima dobro dokumentirane module i ekstenzije te podršku od brojnih programskih

jezika: PHP, Java , Perl, Python... Pripada bazama relacijskog tipa. [15]

2.2.1 Relacijske baze podataka

Relacijska baza podataka sastoji se od skupa povezanih tablica odnosno relacija. Definicija

jedne relacije naziva se relacijska shema i sastoji se od naziva relacije i popisa atributa

11

(obilježja) koji su u sastavu te relacije. Definicija čitave baze podataka naziva se relacijska

shema baze podataka, a sastoji se od relacijskih shema svih relacija koje ulaze u sastav baze

podataka. Relacijska struktura u velikoj je mjeri podudarna s predodžbom događaja stvarnog

svijeta i podataka koje ti događaji generiraju. Zbog svoje jednostavnosti i prilagođenosti

ljudskom shvaćanju podataka i odnosa među njima relacijski model ima prednost pred ostalim

modelima podataka. Relacijska baza podataka danas je najčešće korišteni model baza

podataka. [13]

Upravljanje bazom podataka vrši Sustav za upravljanje bazom podataka (SUBP), eng.

Database Management System (DBMS), odnosno RDBMS za relacijske baze.

RDBMS je program, zapravo programski sustav, koji pohranjuje podatke u obliku međusobno

povezanih tablica, odnosno to je sustav za organiziranje baze podataka i rad s podatcima u

njoj. Ovaj sustav u osnovi obavlja dvije grupe poslova:

definiranje baze podataka(Database Definition)

rad s podatcima(Database Management).

U sklopu ovoga obuhvaćeno je uz ostalo:

definiranje tablica i relacija

unošenje, uređivanje, prikazivanje, pretraživanje, sortiranje i filtriranje podataka

dohvat podataka

zaštita integriteta podataka

kontrola istovremenog pristupa podatcima

zaštita od neovlaštenog korištenja

stvaranje izvještaja

kontrola baze podataka

obnova baze u slučaju "pada".

Tablica je osnovni objekt relacijske baze podataka i u njoj su pohranjeni podatci. Redak

tablice naziva se Relacija i pojmovno je podudaran sa slogom podataka i predstavlja

informaciju o jednom subjektu (učenik, zaposlenik, škola...), dakle relacije su pohranjene kao

tablice. Tablica (relacija) sastoji se od redaka (slogova) i stupaca koji se nazivaju atributi i

pojmovno odgovaraju polju podataka. Istovrsni objekti (recimo učenici) prikazani su u tablici

redcima koji su opisani stupcima ili poljima(Ime, Prezime...). Osnovne karakteristike tablice

(relacije) su:

12

ne postoje dva jednaka retka

ne postoje dva stupca jednakih imena

redoslijed redaka nije bitan

redoslijed stupaca nije bitan.

Polje ili više polja (Atributa) kojima se može jednoznačno definirati redak (slog) tablice

naziva se primarni ključ. Primarni ključ upotrebljava se za povezivanje tablica i ima

dvostruku ulogu: jednoznačno definira retke tablice, a preko njega se ostvaruje i veza s

drugim tablicama. Primarni ključ mora zadovoljavati:

vrijednost primarnog ključa mora biti jednoznačna

primarni ključ ne može imati vrijednost NULL (ne može biti prazno polje)

primarni ključ mora postojati kod kreiranja i spremanja sloga.

Njegova uloga je da onemogućavaju ponavljanje podataka u tim poljima i njima osiguravamo

jedinstvenost svih podataka u poljima na koja smo ih postavili. [14]

2.2.2 Entity ‐ Relationship (ER) dijagram

Izrada ER modela predstavlja stvaranje konceptualne sheme, koja predstavlja apstrakciju

realnog svijeta. Ne postoji formalni način pretvorbe korisničkih zahtjeva u ER model. [14]

Modeliranje entiteta i veza zahtijeva da se svijet promatra preko tri kategorije:

entiteti: objekti ili događaji koji su nam od interesa

veze: odnosi medu entitetima koji su nam od interesa

atributi: svojstva entiteta i veza koja su nam od interesa.

Entitet je svaki objekt koji se može razlikovati od svih ostalih objekata što znači da se može

jednoznačno identificirati. Entitet može biti čovjek, predmet/objekt, ali i događaj ili pojava

(nogometna utakmica, praznik, servisiranje auta i sl.). Grupa entiteta istog tipa naziva se skup

entiteta. Atributi su svojstva entiteta i njihovih skupova. Svaki skup entiteta je u potpunosti

opisan i određen skupom atributa. Za svaki atribut postoji skup dozvoljenih vrijednosti koji se

naziva domenom atributa.

13

Veza (odnos) je neka vrsta asocijacije između dva ili više entiteta pri čemu entiteti ne moraju

pripadati različitim skupovima entiteta. Putem ER modela najlakše se izražavaju binarni

odnosi, dok se proizvoljni n-arni odnosi teže izražavaju. Kao i skupovi entiteta tako i skupovi

odnosa mogu imati svoje atribute.

Razlikujemo 3 osnovna tipa veza (odnosa) između entiteta:

jedan : jedan (1 : 1)

o jedan primjerak prvog tipa (skupa) entiteta može biti u vezi s najviše jednim

primjerkom drugog tipa entiteta, i obrnuto

jedan : mnogo (1 : n)

o jedan primjerak prvog tipa entiteta može biti u vezi s 0, 1 ili više primjeraka

drugog tipa entiteta, no jedan primjerak drugog tipa može biti u vezi s najviše

jednim primjerkom prvog tipa

mnogo : mnogo (m : n)

o jedan primjerak prvog tipa entiteta može biti u vezi s 0, 1 ili više primjeraka

drugog tipa entiteta, i obrnuto.

Kod nekih skupova atributa ne postoji dovoljan broj atributa koji bi mogli da sačinjavaju

primarni ključ. Takvi skupovi se nazivaju slabi skupovi entiteta. Za razliku od njih jaki

skupovi entiteta su oni koji imaju primarni ključ. Vrlo često se zbog toga u slabim skupovima

entiteta dodaju neki fiktivni atributi putem kojih će se jednoznačno odrediti entiteti u tom

slabom skupu. Skupovi odnosa također imaju svoje primarne ključeve. Po definiciji primarni

ključ skupa odnosa jeste unija primarnih ključeva svih skupova entiteta koji ulaze u taj odnos,

tj.:

PK(R) = PK(Ei), gdje je EiR. (1)

14

Slika 2.4 ER dijagram aplikacije

Ovaj ER dijagram ima zvjezdastu strukturu. Tablica User je povezana sa tablicama Medicine,

Album, Message, News, Task, Contact, User_Role vezom 1:N što označava da svaki korisnik

može imati više albuma, lijekova, zadataka itd. Vezom 1:1 su povezane tablice User i Setting

što označava da svaki korisnik ima svoje postavke kojima može upravljati. Tablica Album je

povezana s tablicom Photo vezom 1:N jer u svakom albumu može biti više slika. Svaka

tablica ima svoj primarni ključ (ID) i određena je pripadajućim atributima (Slika 2.4).

15

2.3 Groovy Server Pages (GSP)

GSP je prezentacijski jezik za web aplikacije koji dozvoljava miješanje statičkog i

dinamičkog sadržaja u istom dokumentu i kao rezultat dobiva se dinamički HTML, XML ili

drugi tip dokumenta. Taj Grailsov alat za generiranje View-a dizajniran je da bude sličan

tehnologijama poput Active Server Pages (ASP) i Java Server Pages (JSP), ali i da bude

intuitivniji i fleksibilniji. Smješteni su u View-u i obično su izvedeni automatski ili

pozivanjem metode : render (view: "index"). GSP uključuje predefinirane varijable kao što

su:

application - javax.servlet.ServletContext instanca

applicationContext - Spring ApplicationContext instanca

flash - flash objekt

grailsApplication - The GrailsApplication instanca

out – Odgovor za pisanje u nom toku

params - Params objekt za ponovno vraćanje zahtjeva parametara

request - HttpServletRequest instanca

response - HttpServletResponse instanca

session - HttpSession instanca

webRequest - GrailsWebRequest instanca. [16]

GSP je dosta sličan HTML jeziku. Razlika je u „g“ oznakama (eng.tags). Sve GSP oznake

počinju sa prefiksom „g:“. Mogu u sebi imati i tijelo (eng.body) i atribute čije vrijednosti

moraju sadržavat „$“. U Grailsu se oznake mogu same kreirati, a postoje i defaultni:

<g:set var> služi za definiranje varijabli unutar GSP. Varijable mogu biti smještene u

jedno od ponuđenih polja:

o page – Pristup trenutnoj stranici (default)

o request – Pristup trenutnom zahtjevu

o flash – Smješten unutar flash pristupa kako bi bio dostupan za sljedeći

zahtjev

o session – Pristup korisničkoj sesiji

o application – Pristup širom aplikacije

Pristup se može specificirati koristeći scope atribut: <g:set var="now" value="${new

Date()}" scope="request" />.

16

<g:if>, <g:else> GSP podržava i logičke oznake koji se koriste za grananje

<g:each> i <g:while> oznake za iteraciju

<g:findAll> i <g:grep> koriste se za dohvat i sortiranje

<g:link> oznaka se koristi za pomoć pri povezivanju s kontrolerima i akcijama.

Omogućuje da se odabere Controller i akcija koja automatski radi link na temelju

URL mapiranja

<g:form> služi za rad sa HTML formama i poljima. Url atribut omogućuje da se

specificira koji Controler ili akciju mapirati

o <textField> za polje unosa tipa tekst

o <passwordField> za polje unosa tipa lozinka

o <checkBox> za unos okvira za izbor

o <radio> za polje unosa tipa radio

o <hiddenField> za skriveni unos

o <select> za HTML okvire za odabir

<g:actionSubmit> uz funkcionalnost klasičnog „submit“ botuna posjeduje

funkcionalnost izbora akcije za pohranu.

Glavna razlika između GSP i drugih tehnologija koji koriste okvire je u tome što GSP oznake

mogu biti pozvane kao redovne oznake ili kao metoda poziva od Controller-a, knjižnica

oznaka ili GSP view-a.

Grails iskorištava Sitemesh (alat za dekoriranje) za podršku „Layout-a View-a“. Layouts su

smješteni unutar View/Layouts datoteke. Postoji:

layoutTitle – je naslov glavne stranice

layoutHead – je sadržaj head oznake stranice

layoutBody – je sadržaj body oznake stranice.

Koriste se i „r“ oznake za uključivanje resursa. Tako prilikom upotrebe <r:require

module="jquery"/> uključujemo sve potrebne resurse za jQuery. Kada su postavljeni resursi

koje GSP stranica zahtijeva, okolina treba pružiti linkove na tim resursima u pravo vrijeme.

Da bi se to postiglo, potrebno je uključiti </r: layoutResources> oznaku dva puta na stranici i

to na kraju head i body oznaka.

Za dodavanje JavaScript-a koristi se <r:script> oznaka. [5]

17

2.4 Android platforma

Android je nova platforma koja se na tržištu prvi put pojavila 21. listopada 2008. godine,

te je u samo dvije godine stekla veliku popularnost. Za takav rast zaslužni su Google i

„Open Handset Alliance“ (udruženje proizvođača koji nemaju svoj vlastiti operativni

sustav). Poznatiji proizvođači koji podržavaju Android su HTC, Samsung Electronics,

LG, Motorola i Sony Ericsson. Na Slika 2.5 prikazan je prvi uređaj na Androidu.

Slika 2.5 HTC Dreams- prvi uređaj na Android operativnom sustavu

Android se zasniva na Linux kernelu jer su se mogle iskoristi postojeće dobro testirane

komponente koje dokazano dobro obavljaju svoj posao. Zadnja inačica Androida, 2.2 koristi

kernel 2.6.32. [17]

2.4.1 Arhitektura Android sustava

Svaka Android aplikacija izvršava se u svom vlastitom procesu na vlastitoj instanci Dalvik

virtualnog stroja (eng. virtual machine). Dalvik je napisan tako da uređaj može učinkovito

izvodit više virtualnih strojeva u isto vrijeme. Dalvik virtualni stroj izvršava datoteke u Dalvik

Executable (.dex) formatu koji je optimiziran za minimalno zauzeće memorije. Zasnovan je

na spremničkom procesoru (eng. register machine) i izvodi klase prevedene pomoću Java

18

prevoditelja. Prevedena java klase transformiraju se u .dex format pomoću ugrađenog “dx”

alata. Na Slika 2.6 prikazana je arhitektura Android sustava.

Slika 2.6 Arhitektura Android sustava

Sustav koristi Linux kernel za osnovne funkcionalnosti kao što su rad s navojima (eng.

threading), upravljanje memorijom na osnovnoj razini, sloj apstrakcije hardvera (eng.

hardware abstraction layer) i umrežavanje.

Biblioteke koje Android koristi su:

• surface manager – prikaz prozora za pojedine aplikacije

• Open Graphics Library (OpenGL) – biblioteka koja služi za grafički2D i 3D prikaz

• Scene GraphLlibrary (SGL) – biblioteka na vrhu OpenGL biblioteke koja služi za

2D i 3D prikaz

• Media Framework – odgovoran za reproduciranje i rad sa multimedijalnim

datotekama

• Free Type – fontovi

19

•. Secure Socket Laye (SSL) – omogućuje sigurnosnu komunikaciju preko Interneta

• SQLite – implementira bazu podataka (eng. database engine)

• WebKit – jezgra web preglednika koji podržava Javascript i ostale standarde na

mobilnom uređaju

• System C library (Libc) – implementacija standardne C-ove sistemske biblioteke

(libc) izvedene iz operativnog sustava Berkeley Software Distribution (BSD).

Idući sloj u arhitekturi Android operativnog sustava je radno okruženje (eng.Android runtime)

kojeg čine virtualni stroj Dalvik i jezgrene biblioteke (eng. corelibraries). Jezgrene biblioteke

pisane su u programskom jeziku Java i predstavljaju sve osnovne klase poput klasa za

manipulaciju kolekcijama, klasa za komunikaciju s okolinom i sl. Androidove jezgrene

biblioteke razlikuju se od standardnih biblioteka u Java Standard Edition (J2SE) i Java 2

Micro Edition (J2ME). Sloj aplikacijskog okvira (eng. Application Framwork) napisan je u

Java programskom jeziku i sadrži programske komponente koje koriste sve aplikacije

uređaja. Neki od važnijih elemenata ovog sloja su:

• activitiy manager – upravljanje životnim ciklusom aplikacije

• package manager – drži informacije o aplikacijama koje su instalirane na sustav

• window manager – upravljanje aplikacijskim prozorima

• telephony manager – application programming interface (API) koji se koristi pri

izradi aplikacija za upravljanje pozivima

• content provider – odgovoran za zajedničko korištenje podataka od strane više

aplikacija

• resource manager – služi za pohranu dijelova aplikacije koji nisu kod (npr. slike)

• view system – sadrži bazu gotovih grafičkih prikaza i alata (eng. widget)

• location manager – upravljanje lokacijski temeljenim uslugama

• notification manager – upravljanje obavijestima i događanjima (npr. dospijeće

poruke, nadolazeći sastanak).

Aplikacijski sloj je zadnji sloj u arhitekturi sustava Android i čine ga korisničke

aplikacije. Ovaj sloj je jedini koji je vidljiv krajnjem korisniku. U tom sloju standardno su

uključene neke od osnovnih aplikacija poput web preglednika, liste kontakata, telefonskog

imenika, sustava za nabavku Android aplikacija (Android Market), itd. [18]

20

2.4.2 Razvoj Android aplikacije

Za razvoj aplikacija na Android sustavu potrebno je imati Android Software Development Kit

(SDK). Android SDK obuhvaća osnovnu kolekcija razvojnih alata. Osobina tih alata je da ih

je moguće koristiti na velikom broju različitih operativnih sustava, točnije na svim

operativnim sustavima koji imaju mogućnost rada s Java aplikacijama. Pored razvojnih alata

SDK sadrži emulator koji omogućuje testiranje izvođenja Android aplikacija tijekom razvoja,

emulator, sustav za otkrivanje grešaka u programskom kodu (eng. Dalvik Debug Monitor

Server – DDMS) i Android virtualni stroj koji omogućuje izvođenje aplikacija.[17]

Eclipse je dobro razvojno okruženje koje se može iskoristiti za razvoj Android aplikacija.

Okruženje se može koristiti na većini platforma na kojima se mogu izvesti Java aplikacije.

Kako bi se olakšao razvoj aplikacija postoji dodatak za Eclipse razvojno okruženje (eng. ADT

Eclipse plugin) u koje je integriran sustav za otkrivanje grešaka te prikaz gotovih aplikacija.

Glavna prednost Androida u odnosu na konkurentske operativne sustave je otvorenost koja uz

kvalitetan SDK i Javu programski jezik omogućuje vrlo brzo učenje i razvoj aplikacija. Za

procesorski i vremenski zahtjevne aplikacije postoji mogućnost korištenja Native

Development Kit (NDK). Na taj način imamo mogućnost zaobići Android virtualni stroj i

izvršavati aplikacije izravno na platformi određenog mobilnog uređaja. Na takav način se

izvođenje aplikacija višestruko povećava, ali se gubi na prenosivosti aplikacije između

različitih uređaja. Android aplikacije omogućuju komunikaciju korisnika pomoću stvarne

tipkovnice, virtualne tipkovnice ili direktnom manipulacijom ikonama na ekranu. Osnovni

problem Android platforme je taj što je još uvijek relativno nova. Nove verzije okruženja e

velikom brzinom (od nekoliko verzija do nekoliko desetaka verzija godišnje) tako da je

razvojnim timovima ponekad teško pratiti taj užurbani razvoj.[18]

21

3 WEB APLIKACIJA (WEB SUČELJE)

Za aplikaciju je bilo potrebno instalirati Grails 2.2.x, MySql, Java Development Kit (JDK)

(minimalno 1.6 verzija). Sve potrebne aplikacije su dohvaćene sa službenih stranica i

instalirane po defaultnim postavkama. Grails je samo mapa sa bibliotekama pa je bilo

potrebno dohvatiti i „Groovy/Grails Tool Suite“ (GGTS) za razvoj aplikacije.

3.1 Instalacija Groovy/Grails

Zbog funkcionalnosti, trebalo je postaviti i naredbeno okruženje (eng. command line

environment). Potrebno je odabrati stavku Properties desnim klikom miša na My Computer u

Start izborniku (Slika 3.1).

Slika 3.1 Properties

Nakon toga se otvori prozor „System“ u kojem biramo opciju „Advanced System Settings“ pa

„Environment Variables“ (Slika 3.2).

22

Slika 3.2 Environment Variables

Koristeći naredbu „new“ potrebno je dodati nove varijable JAVA_HOME i GRAILS_HOME

koje će sadržavati putanju do odredišnih datoteka JDK i Grailsa. Te varijable je potrebno

dodati uz naredbu „Edit“ u već postojeći Path upisujući : %JAVA_HOME%\bin\;

%GRAILS_HOME%\bin\; (Slika 3.3).

Slika 3.3 Namještanje varijabli

23

Kako bi izbjegli izradu aplikacije korištenjem „Command Prompt“ prozora, instalira se GGTS

koji je građen na „Eclipse“ platformi koja je izvorno namijenjena za Java programere. Eclipse

je „open source“ platforma pa dozvoljava drugim programerima da koriste dodatke i za druge

jezike među kojima je i Groovy/Grails. Dohvatom GGTS-a dohvaćamo zapravo Eclipse sa

dodatcima za Groovy/Grails. GGTS (Slika 3.4) može se pronaći na službenoj stranici Grailsa

u kartici „Products & Services“.

Slika 3.4 Izgled GGTS-a

Odabirom File New Grails Project ili preko konzole upisivanjem naredbe: grails

create-app name kreira se projekt koji sadrži strukturu koja je prikazana na Slici 3.5. Domain

je Model u MVC strukturi i sadrži lokaciju domain klasa. Controllers i Views sadrže

controllere, odnosno view-ove. U config-u su smješteni konfiguracijski file-ovi. On sadrži i

dva opcionalna file-a: spring i hibernate. Svaki konfiguracijski file ima svoju svrhu:

ApplicationResources.groovy – jezgra Grailsovih resursa, mjesto gdje se definiraju

statički resursi (css, js…) kako bi Grails definirao njihov poredak učitavanja

BootStrap.groovy - groovy klasa koja sadrži metode init() i destroy() koje će se

izvoditi svaki put kad aplikacija se pokreće ili se zaustavlja

BuildConfig.groovy – konfiguracija izgradnje projekta

Config.groovy – za postavljanje Grailsovih unutarnjih opcija koje nisu potrebne za

gradnju. Često se koristi za mijenjanje defaultnih postavki za dodatke

24

DataSource.groovy – za konfiguraciju baze podataka

UrlMappings.groovy - Omogućuje mapiranje URL obrazaca Controllerima i akcijama.

U test se generiraju testne klase, a web-app sadrži sve datoteke koje su potrebne za view kao

npr. css file, slike, skriptni file-ovi itd. Sadržaj Grails projekta prikazan je na Slika 3.5

Slika 3.5 Sadržaj Grails projekta

25

3.2 Spajanje na MySQL i izrada baze podataka

Prvo je potrebno kreirati bazu na MySQL Workbench-u (Slika 3.6 i Slika 3.7.)

Slika 3.6 MySQL Workbench Slika 3.7 Kreiranje baze

Potom ju je potrebno konfigurirati u GGTS. Izaberemo DataSource u Config folderu i tu

nadopunjujemo kod svojim podatcima:

dataSource {

pooled = true

driverClassName = "com.mysql.jdbc.Driver"

dialect = "org.hibernate.dialect.MySQL5InnoDBDialect"

username = "root"

password = "root"

}

Ispis koda 3.1Konfiguracija DataSource.groovy

pri čemu je:

driverClassName-ime MySQL drivera

dialect- vrsta Structured Query Language (SQL) dijalekta (InnoDBD bolji zbog

stranih ključeva)

username i password – korisničko ime i lozinka postavljeni u MySQL bazi prilikom

instalacije.

Na mjesto url dodajemo poveznicu s MySQL bazom

jdbc:mysql://localhost/dipl?useUnicode=yes&characterEncoding=UTF-8 gdje je dipl ime

baze napravljene u MySQL-u. dbCreate može se postaviti na :

26

create - ruši postojeću bazu i stvara novu bazu na početku, ispuštajući postojeće

tablice

update - stvara one tablice koje su nanovo kreirane, i ažurira trenutnu bazu, bez

rušenja tablice ili podataka

create-drop – isto kao i „create“ samo što ruši tablice prilikom gašenja aplikacije

validate – ne radi nikakve promjene na bazi.

Koristeći entitete i veze ER dijagrama, u Grails-u kreiramo bazu podataka. Kreiramo Domain

klase (Slika 3.8 i Slika 3.9.) po entitetima ER dijagrama. Entiteti su nazivi tablica.

Slika 3.8 Kreiranje Domain klase Slika 3.9 Domain klase

Potom se unose atributi i veze. Atributi su svojstva i odgovaraju retku tablice. Primjer tablice

setting:

class Setting {

Boolean message

Boolean task

Boolean album

Boolean medicine

27

Boolean number

Boolean news

Boolean weather

}

Ispis koda 3.2 Domain klasa Setting

Kreiranjem Domain klase Setting, kreira se tablica Setting u MySQL koja sadrži retke:

message, task, album, medicine, number, news, weather.

static constraints = {

message nullable: true

task nullable: true

album nullable: true

medicine nullable: true

number nullable: true

news nullable: true

weather nullable: true

}

Ispis koda 3.3 Omogućavanje NULL vrijednosti

Dodavanjem Ispis koda 3.3 omogućujemo da te vrijednosti mogu biti NULL, odnosno da ih

korisnik može i ne mora označiti u aplikaciji. Nakon što se kreiraju sve Domain klase u

Grails-u (Slika 4.9.), automatski se sve to generira u MySQL (Slika 3.10).

28

Slika 3.10 Generirana baza u MySQL-u

Nakon postavljanja entiteta (tablica) i atributa (redaka tablice) još je potrebno kreirati veze,

odnosno odnose među tablicama. U ovoj aplikaciji koriste se veza 1:1 i 1:N. 1:1 veže tablicu

Setting sa tablicom User pa je potrebno u Domain klasama User i Setting dodati : static

belongsTo = [ user: User ] odnosno static belongsTo = [ setting: Setting ]. Kod veze 1:N

potrebno je dodati, uz onu tablicu koja ima N, static hasMany, a uz tablicu koja ima 1 static

belongsTo. Tako u tablici User : static hasMany = [albums: Album, contacts: Contact,

medicines: Medicine, messages: Message, news: News, tasks: Task] i npr. u tablici Message:

static belongsTo = [user: User]. Slika 3.11 prikazuje tablicu u MySQL-u.

29

Slika 3.11 MySQL tablica

Svaka promjena u Domain klasama zahtjeva postavljanje DataSources na create. Nakon

kreiranja izmjena, vraća se na update.

3.3 Prijava korisnika

Za prijavu i registraciju korisnika koristio se Spring Security Core dodatak. To je moćna

biblioteka koja osigurava aplikaciju i sadrži mnogo opcija. Temelji se na Spring-u pa se lako

može integrirat u Grails projekt. On pruža osnove potrebne za kontrolu pristupa u paketu koji

je jednostavan za korištenje na temelju korisnika (User) i uloga (Role).

3.3.1 Postavljanje

U konzoli (Ctrl + Shift + G) upiše se sljedeća naredba: install-plugin spring-security-core

(Slika 3.12) kojom se dohvaća i instalira dodatak.

Slika 3.12 Instaliranje Spring Security Core dodatka

30

Nakon toga se upisuje nova naredba u konzolu s2-quickstart test101111 User Role pri čemu

je test101111 ime projekta, a User i Role nazivi Domain klasa. Ova naredba generira User i

Role Domain klase te Login i Logout Controllere.[1] Ovo služi samo prijavu i odjavu

korisnika. Spring Security sadrži i druge dodatke, među kojima je Spring Security User

Interface (Spring Security UI) koji se nadovezuje na Spring Security Core i osigurava CRUD

funkcije i ostale korisničke tijekove rada. Uz Spring Security UI, dodaje i mail, jquery, jquery

UI i famfamfam dodatke. Zbog mogućnosti registracije novih korisnika dodan je i taj dodatak

naredbom u konzoli: install-plugin spring-security-UI. Sve akcije su defaultno zabranjene i

potrebno ih je dozvoliti ili omogućiti u config.groovy: [4]

grails.plugin.springsecurity.ui.forgotPassword.postResetUrl = false

grails.plugin.springsecurity.logout.postOnly = false

grails.plugin.springsecurity.userLookup.userDomainClassName = 'test101111.User'

grails.plugin.springsecurity.userLookup.authorityJoinClassName =

'test101111.UserRole'

grails.plugin.springsecurity.authority.className = 'test101111.Role'

grails.plugin.springsecurity.controllerAnnotations.staticRules = [

'/': ['permitAll'],

'/**/favicon.ico': ['permitAll'],

'/register/index': ['permitAll'],

'/register/forgotPassword': ['permitAll'],

'/register/register': ['permitAll'],

'/register/verifyRegistration': ['permitAll'],

'/register/resetPassword': ['permitAll'],

]

Ispis koda 3.4 Omogućavanje akcija za Login i Logout

Za registraciju napravljen je korisnički račun na gmail-u i dodane sljedeće postavke u

config.groovy:

grails {

mail {

31

host = "smtp.gmail.com"

port = 465

username = "remote.assistance85@gmail.com"

password = "manas1234"

props = ["mail.smtp.auth":"true",

"mail.smtp.socketFactory.port":"465",

"mail.smtp.socketFactory.class":"javax.net.ssl.SSLSocketFactory",

"mail.smtp.socketFactory.fallback":"false"]

}}

Ispis koda 3.5 Registracija

3.3.2. Izgled procesa registracije

Izgled i proces registracije opisan je kroz slike:Slika 3.13, Slika 3.14, Slika 3.15.

Slika 3.13 Prijava i registracija korisnika

Slika 3.14 Unos korisničkih podataka potrebnih za registraciju

32

Slika 3.15 Uspješno kreiran korisnik i poslana potvrda na mail

Dodatci se spremaju u datoteci „plugins“ i svako dodatak ima svoje Controllere, Domain,

config itd. (Slika 3.16) u kojima se vrše promjene i generira funkcionalan kod.

Slika 3.16 Plugins

33

4 ANDROID APLIKACIJA

Za izradu Android aplikacije odlučeno je korištenje Phonegap-a zbog brojnih prednosti koje

ima i zbog jednostavnijeg korištenja. S obzirom da je Android aplikacija zamišljena da bude

samo za čitanje te ne zahtjeva pristup kameri, Global Position Sytem-u (GPS) itd. može se

koristiti PhoneGap.

4.1 Izrada Android aplikacije

Zbog korištenja PhoneGap-a bilo je potrebno kreirati HTML, CSS i JavaScript datoteke sa

funkcionalnostima koje bi aplikacija trebala imati. JavaScript je korišten za Ajax pozive

kojima se, uz pomoć API-ja, dohvaćaju podatci. HTML i CSS su korišteni za sami izgled

aplikacije. Izgled aplikacije prikazan je na slikama: Slika 4.1, Slika 4.2 i Slika 4.3.

Slika 4.1Početna stranica

34

Slika 4.2 Kontakti

Slika 4.3 Vremenska prognoza

Za dohvat podataka potrebno je kreirati Ajax pozive sa URL-ovima od API funkcija. Prikaz

pojedinih poziva prikazan je na: Ispis koda 4.1 i Ispis koda 4.2.

35

$(document).ready(function(){

$.ajax({

url: "

http://cloud7.extensionengine.com:8080/remoteAssistance/API/getContactsList?userId

=2",

success: function(data){

$.each(data.contacts, function(index, value){

$(".contact_text").append("<div>" + value.name + "<hr>" +

"</div>");

$(".contact_text1").append("<div>"+ value.number + "<hr>"+

"<div>");

});

}

});

});

Ispis koda 4.1 Dohvat liste kontakata

function getUrlParameter(sParam)

{

var sPageURL = window.location.search.substring(1);

var sURLVariables = sPageURL.split('&');

for (var i = 0; i < sURLVariables.length; i++)

{

var sParameterName = sURLVariables[i].split('=');

36

if (sParameterName[0] == sParam)

{

return sParameterName[1];

}

}

}

var albumId = getUrlParameter('albumId');

//var albumId = 5;

$(document).ready(function(){

$.ajax({

url: "

http://cloud7.extensionengine.com:8080/remoteAssistance/API/getAlbumPhotosList?u

serId=2&albumId="+albumId,

success: function(data){

$.each(data.photos, function(index, value){

var img = '<img

src="http://localhost:8080/test101111/static/' + value + '" height="100"/>';

$(".photo").append(img);

});

}

});

});

Ispis koda 4.2 Dohvat slika za pojedini album

37

4.2 PhoneGap

PhoneGap je mobilna razvojna okolina koju je proizveo Nobit, a kupio Adobe Systems

2011.godine. On omogućuje softverskim programerima izradu aplikacija za mobilne uređaje

koristeći JavaScript, HTML5 i CSS3, umjesto na uređajima specifičnim jezicima, kao što su

objektivni C, C# ili Java. On pakira HTML, CSS i JavaScript kod u kod koji zahtjeva

platforma na kojoj se gradi aplikacija (Slika 4.4). To je glavna prednost PhoneGap-a. [7]

Slika 4.4 Način rada PhoneGap-a

PhoneGap proteže značajke HTML i JavaScript za rad s uređajem. Nastale aplikacije su

hibridne, što znači da nisu ni mobilne izvorne aplikacije (jer se renderiranje izgleda vrši

putem web pregleda, umjesto na platformi izvornog korisničkog okvira), niti isključivo

bazirane na web-u (jer nisu samo web aplikacije, ali su pakirani kao aplikacija za distribuciju,

te imaju pristup izvornim API-uređajima) (Slika 4.5).

38

Slika 4.5 Razlika između hibridne i izvorne aplikacije

Softverska podloga PhoneGap-u je Apache Cordova. PhoneGap podržava razne platforme:

Androd, iPhone Operating System (iOS), BlackBerry, Google Android, LG webOS,

Microsoft Windows Phone (7 i 8), Nokia Symbian OS, Tizen (SDK 2.x), Bada, Firefox OS i

Ubuntu Touch. Tablica 4.1 prikazuje koje značajke i u kojem OS-u podržava. [19]

Na Slika 4.6 prikazana je struktura PhoneGap arhitekture. Na desnoj slici je prikazana

slojevita struktura.

Slika 4.6 Arhitektura PhoneGap aplikacije

39

Tablica 4.1 Značajke koje PhoneGap podržava

iPhone iPhone 3G

i noviji

Android Blackberry

OS 60+

Blackberry

10

Windows

Phone

Ubunt Firefox OS

Brzinomjer

Kamera

Kompas

Kontakti

Datoteke

Lokacija

Mediji

Mreža

Dojava

Zvuk

Vibracija

Pohrana

Za izgradnju (Slika 4.7) Android aplikacije potrebno je:

izgraditi aplikaciju s web standardima (HTML, CSS, JavaScript)

zapakirati je uz pomoć PhoneGap-a kako bi dobili pristup izvornom API-ju

rasporediti aplikaciju na više platformi. [8]

40

Slika 4.7 Izgradnja aplikacije pomoću PhoneGap-a

4.2.1 Postavljanje okruženja

Prvo je potrebno instalirati Node.js. Zatim uz pomoće Node.js Command Prompt izvršava se

ostala instalacija. Upisivanjem npm install –g cordova (Slika 4.8) dohvaća se softwerska

podrška Apache Cordova. Zatim je potrebno dohvatiti JDK i postaviti u Path u Environment

Variables. S obzirom da je JDK bio potreban za Groovy/Grails, ovaj korak se preskače. Na

Android SDK stranici potrebno je dohvatiti pripadajući izgradnju za OS koji se koristi.

Dohvaćena datoteka u sebi sadrže Eclipse koji je potrebno pokrenuti. Također, platform-tools

i tools koji se nalaze u sdk folderu treba dodati u Environment Variables. U Eclipse-u je

potrebno kliknuti na Help Install New Software ADD i dodati ADT dodatak (Slika 4.9).

Zatim je potrebno dohvatiti Apache Ant kako bi Cordova mogla kompajlirat aplikaciju.

Također treba dodati bin folder u Path Environment Variable-a.

Slika 4.8 Instaliranje Cordove

41

Slika 4.9 ADT dodatak

Preko node.js kreira se projekt koristeći naredbu : cordova create hello com.example.hello

HelloWorld (Slika 4.10) u Eclipse radnom okruženju. Postavi se u taj projekt (cd hello) i

dodaje Android platforma uz pomoć naredbe: cordova platform add android (Slika 4.11)

Slika 4.10 Kreiranje novog projekta

Slika 4.11 Dodana Android platforma na Hello projekt

42

Na kraju je potrebno izgradit projekt koristeći naredbu: cordova build.

Nakon dodavanja Hello projekta u Eclipse, može se graditi aplikacija u „www“ datoteci

(Slika 4.12). [9]

Slika 4.12 Projekt u Eclipsu

43

4.2.2 „Pakiranje“ u Android aplikaciju- „PhoneGap Build“

PhoneGap Build omogućava kreiranje mobilnih aplikacija korištenjem Web alata HTML,

CSS i JavaScript koje lako kompajlira za različite platforme. Cilj je bio dobiti .apk datoteku,

odnosno Android datoteku. Ukoliko se želi stvoriti aplikaciju koja se distribuira kao Android

APK datoteka, mora se sastaviti pomoću Android SDK. PhoneGap ima dva načina za

pakiranje u Android aplikaciju: PhoneGapBuild i PhoneGap CLI. Zbog jednostavnije uporabe

i lakšeg korištenja, koristio se PhoneGap Build.

Prvo se potrebno logirati na Adobe stranici. Zatim se učita projekt u zip formatu (Slika 4.13).

Slika 4.13 PhoneGap Build

Nakon učitavanja počinje proces pakiranja. RemoteAssistanceMobile.zip je pakirana u

Android (.apk) i WindowsPhone7 (.xap) aplikaciju (Slika 4.14).

44

Slika 4.14 Dobivene mobilne aplikacije

Ostali OS-ovi imaju pogreške u izradi. PhoneGap Build sadrži određene zahtjeve za pakiranje

u pojedini operativni sustav. Jedan od njih je da paket sadrži index datoteku. Svaka greška je

objašnjena i sadrži link na rješenje (Slika 4.15).

Slika 4.15 Opis grešaka

Nakon dohvata aplikacije potrebno ju je dodati na uređaj i instalirati (Slika 4.16).

Slika 4.16 Dodana i instalirana aplikacija na tablet

45

5 API

API specificira softverske komponente u smislu svojih operacija, njihovih ulaza i izlaza.

Njegova glavna svrha je definirati skup funkcionalnosti koji su neovisni o svojoj provedbi,

dopušta i definiciju i provedbu mijenjati bez međusobnog narušavanja. [20] Na Slika 5.1 je

prikazan pregled arhitekture API-ja.

Slika 5.1 Pregled arhitekture API-ja

API je podatkovni sloj koji se spaja na bazu podataka od weba aplikacije i ispisuje podatke u

JavaScript Object Notation (JSON) formatu. JSON format je danas standard jer ga podržava

svaka tehnologija (iOS, .NET, PHP, Java...). Kako bi dohvatili na tablet aplikaciji podatke iz

baze podataka, koristi se API. Napravljen je kao skup funkcija koje omogućavaju pristup

podatcima koje treba Android aplikacija. U API Controlleru su napravljene sljedeće API

funkcije:

getLastMessage (int userId) – izlaz je jedan string, na tabletu se prikazuje samo zadnja

poruka

getSettings (int userId) – izlaz su boolean polja, koriste se za prikaz pojedinih stavki

46

getTasksList (int userId) – izlaz je lista zadataka

getNewsList (int userId) – izlaz je lista svih vijesti

getContactsList (int userId) – izlaz je lista svih kontakata

getMedicinesList (int userId) – izlaz je lista svih lijekova

getAlbumsList (int userId) – izlaz je lista svih albuma i url zadnje slike iz svakog

albuma

getAlbumPhotosList (int userId, int albumId)- izlaz je lista url-ova svih slika iz

albuma.

Svaka funkcija, osim GetAlbumPhotosList, prima po jedan parametar. Svi pozivi primaju http

GET zahtjev i vraćaju JSON u navedenoj strukturi za pojedini poziv (Ispis koda 5.1). Url za

svaku funkciju je:

http://cloud7.extensionengine.com:8080/remoteAssistance/API/<ime_funkcije>

Ispis koda 5.1 JSON za poziv GetContactsList

def getContactsList(){ def resultJSON = [:] try{

47

int userId try{ userId = params.int('userId') } catch(Exception e){} def conn = sessionFactory.currentSession.connection() def sql = new Sql(conn) resultJSON = [msg: 1, contacts: sql.rows("SELECT * FROM contact WHERE user_id = ?", userId) ] sql.close() } catch(Exception e){ resultJSON = [msg: 0, ex: e.getMessage() + " " + e.getCause() ] } render resultJSON as JSON }

Ispis koda 5.2 API za dohvat liste kontakata

Ispis koda 5.2 prikazuje API za poziv GetContactsList. Svi pozivi su slični ovome, osim

poziva GetAlbumList i GetAlbumPhotosList koji su prikazani na Ispis koda 5.3 i Ispis koda

5.4.

def getAlbumsList(){ def resultJSON = [:] try{ int userId def user try{ userId = params.int('userId') user = User.get(userId) } catch(Exception e){} def albumList = user.albums def albums = [] for(a in albumList){ def lastPhoto = a.photos ? a.photos.last() : null def lastPhotoUrl = lastPhoto ? "album/" + user?.username + "/" + lastPhoto?.p_name + ".jpg" : null albums << [id: a.id, albumName: a.a_name, lastPhoto: lastPhotoUrl] } resultJSON = [msg: 1, albums: albums] } catch(Exception e){

48

resultJSON = [msg: 0, ex: e.getMessage() + " " + e?.getCause() ] } render resultJSON as JSON

}

Ispis koda 5.3 API za dohvat liste albuma

def getAlbumPhotosList(){ def resultJSON try{ int userId int albumId def user def album try{ userId = params.int('userId') albumId = params.int('albumId') println albumId user = User.get(userId) album = Album.get(albumId) } catch(Exception e){} def conn = sessionFactory.currentSession.connection() def sql = new Sql(conn) def photosList = sql.rows("SELECT p.p_name FROM album ab INNER JOIN photo p ON ab.id = p.album_id WHERE ab.user_id = ? AND p.album_id = ?", [userId, albumId]) def photos = [] for(photo in photosList){ photos << "album/" + user.username + "/" + photo?.p_name + ".jpg" } resultJSON = [msg: 1, photos: photos] sql.close() } catch(Exception e){ resultJSON = [msg: 0, ex: e.getMessage() + " " + e.getCause() ] } render resultJSON as JSON } }

Ispis koda 5.4 API za dohvat liste fotografija iz pojedinog albuma

49

6 TESTIRANJE APLIKACIJE

U ovom poglavlju prikazano je testiranje podataka odnosno njihov prikaz na obje aplikacije.

Prilikom dodavanja podataka u bazu podataka oni se trebaju prikazati na web aplikaciji i na

Android tabletu. Slika 6.1 prikazuje cjelokupni koncept i sadržaj pojedine aplikacije.

Slika 6.1 Koncept aplikacije

50

6.1 Poruke

Korisnik unosi poruku na web sučelje. Ta poruka se sprema u bazu podataka i ispisuje na web

aplikaciji. Poruke se mogu brisati. Na tabletu se prikazuje zadnja poruka. Ona je animirana i

vrti se ukrug u traci za poruke. Slika 6.2 prikazuje prikaz poruke na web aplikaciji, Slika 6.3

zadnju poruku na Android aplikaciji, a Slika 6.4 spremljene poruke u bazi podataka.

Slika 6.2 Poruke na web aplikaciji

Slika 6.3 Poruka na Android aplikaciji

51

Slika 6.4 Poruke u bazi podataka

6.2 Kalendar i zadatci

Korisnik unosi zadatke ili nekakve obveze i datum izvršavanja na web aplikaciji. Ti podatci se

spremaju u bazu podataka i ispisuju u android i web aplikaciji. Zadatci se mogu brisati. Na

tabletu se, uz popis zadataka i datume, u traci poruka vrti zadnja poruka. Izgled je prikazan na

slikama: Slika 6.5, Slika 6.6 i Slika 6.7.

Slika 6.5 Zadatci na web aplikaciji

52

Slika 6.6 Zadatci na Android aplikaciji

Slika 6.7 Zadatci u bazi podataka

6.3 Tablete

Korisnik unosi naziv tablete, opis (može i ne mora), trajanje, frekvenciju trajanja, količinu te

je li tableta obvezna za piti. Ti podatci se spremaju u bazu podataka i prikazuju korisniku

Android aplikacije. To je prikazano na slikama: Slika 6.8, Slika 6.9, Slika 6.10.

53

Slika 6.8 Tablete na web aplikaciji

Slika 6.9 Tablete na Android aplikaciji

54

Slika 6.10 Tablete u bazi podataka

6.4 Kontakti

Korisnik web aplikacije unosi ime i broj telefona ili mobitela osobe za koje želi da budu

prikazane korisniku Android aplikacije. Ti podatci se spremaju u bazu podataka i prikazuju na

tabletu. To se vidi na slikama: Slika 6.11, Slika 6.12, Slika 6.13.

Slika 6.11 Kontakti na web aplikaciji

55

Slika 6.12 Kontakti na Android aplikaciji

Slika 6.13 Kontakti u bazi podataka

6.5 Foto album

Korisnik kreira album koji se sprema u bazu podataka. Nakon toga učitava slike u album

kojem te slike pripadaju. Albumi se prikazuju na web-u i klikom na njega se prikazuju

fotografije. Na tabletu se prikazuje lista albuma sa zadnjom učitanom fotografijom kao

naslovnom stranom. Dodirom željenog albuma otvaraju se slike koje mu pripadaju. Prikaz

fotografija i albuma predstavljen je na slikama: Slika 6.14, Slika 6.15, Slika 6.16, Slika 6.17 i

Slika 6.18.

56

Slika 6.14 Foto album na web aplikaciji

Slika 6.15 Fotografije na web aplikaciji

57

Slika 6.16 Foto album na Android aplikaciji

Slika 6.17 Foto album u bazi podataka

58

Slika 6.18 Fotografije u bazi podataka

6.6 Novine

Korisnik web aplikacije unosi novosti koje bi mogle zanimati korisnika Android aplikacije.

Unosi mu naslov i opis novosti. Podatci se spremaju u bazu podataka i mogu se brisati. Na

slikama: Slika 6.19, Slika 6.20 i Slika 6.21 je prikazan izgled novosti na obje aplikacije i

pohrana u bazi podataka.

Slika 6.19 Novine na web aplikaciji

59

Slika 6.20 Novine na Android aplikaciji

Slika 6.21 Novine u bazi podataka

6.7 Mogućnost prikaza

Izvorno je bilo zamišljeno da postoji tzv. mogućnost prikaza na web aplikaciji koja

manipulira prikazom kartica na Android aplikaciji. Odnosno, korisnik web aplikacije

označava što želi i gdje da mu se prikažu željene kartice. Mogućnost prikaza je napravljena na

web aplikaciji, napravljen je API ali nije napravljen dohvat i ne radi na Android aplikaciji.

Izgled kartice mogućnost prikaza prikazana je na Slika 6.22.

60

Slika 6.22 Mogućnost prikaza

6.8 Vremenska prognoza

Vremenska prognoza postoji samo na Android aplikaciji. Ona kupi podatke s interneta o

vremenu za sljedećih sedam dana. Ispis koda 6.1 prikazuje kod za vremensku prognozu. Slika

4.3 prikazuje izgled vremenske prognoze na Android aplikaciji.

<iframe id="forecast_embed" type="text/html" frameborder="0" height="245"

width="100%"

src="http://forecast.io/embed/#lat=43.508132&lon=16.440193&name=Split&color=#00a

aff&font=Georgia&units=uk""> </iframe>

Ispis koda 6.1 Vremenska prognoza

61

7 ZAKLJUČAK

Aplikacije su postale neizostavan dio poslovnog i privatnog života i koriste se svakodnevno.

Tržište mobilnih aplikacija trenutno vrijedi preko 3 milijarde dolara, a godišnje ima rast od

preko 50% te su najviše pridonijele popularnosti pametnih uređaja i otvorile nove kanale

komunikacije i dobivanja informacija u bilo kojem trenutku.

Aplikacija RemoteAssistance omogućuje korisniku da pomogne starijim članovima svoje

obitelji. Pomoć je zamišljena u smislu podsjetnika na nekakve obveze (posjet liječniku,

rođendani…), organizacije vremena konzumiranja lijekova, popis najvažnijih brojeva,

novosti, fotografija itd. Korisnik unosi preko weba promjene koje se ažuriraju na tablet

aplikaciji RAMobile. Tamo se ispisuje sve što korisnik unese na web aplikaciji. Tablet

aplikacija je samo za čitanje, dakle ne mogu se vršiti nikakve promjene.

Za doradu aplikacije otvorene su brojne mogućnosti. U sljedećim verzijama aplikacije

RAMobile može se dodati mogućnost ostavljanja nekakvih povratnih informacija u vidu

popijene tablete ili odlaska u doktora koji će se prikazati korisniku web aplikacije

RemoteAssistance. Također, može se izraditi i tablet aplikacija za druge OS. Može se dodati

alarm koji obavještava o promjenama na tabletu ili o terminu nekakvog događaja. Obje

aplikacije bi trebale imati takozvani Responsive dizajn odnosno da se prilagode platformi,

veličini te orijentaciji korisničkog zaslona u svrhu boljeg korisničkog iskustva.

RemoteAssistance i RAMobile aplikacije rezultirali su uspješnim učenjem novih tehnologija.

PhoneGap je zanimljiv alat za izradu mobilnih aplikacija jer ima mogućnost da HTML, CSS i

JavaScript kod zapakira u bilo koji mobilni OS. Grails je okolina koja je jednostavna za rad, a

Groovy jezik temeljen na Javi te je prilagođen programerima.

Poznavanje programske okoline je jedan od bitnijih čimbenika koji utječe na razvoj jer

omogućava: lakše snalaženje, brže rješavanje problema i brži razvoj sustava.

62

8 LITERATURA

[1] Peter Ledbrook (2010). s interneta Simplified Spring Security with Grails,

http://spring.io/blog/2010/08/11/simplified-spring-security-with-grails/, 21.08.2014.

[2] Rajeshkumar I.P, Grails web framework, s interneta

http://www.sapient.com/content/dam/sapient/sapientglobalmarkets/pdf/thought-

leadership/MarProg_Grails_WP_Web.pdf, 25.08.2014.

[3] Glen Smith, Peter Ledbrook (2013) Grails in Action, Second Edition, 9781617290961

[4] Burt Beckwith, s interneta, Spring Security UI Plugin - Reference Documentation,

http://grails-plugins.github.io/grails-spring-security-ui/, 24.08.2014

[5] Scott Davis, Jason Rudolph (2010) Getting started with Grails Second Edition, 978-0-

557-18321-0, USA

[6] Jeff Scott Brown, Graeme Rocher Definite Guide to Grails 2, apress

[7] Phonegap, s interneta http://en.wikipedia.org/wiki/PhoneGap, 01.09.2014.

[8] PhoneGapDocumentation, s interneta, http://docs.phonegap.com/en/3.5.0/index.html,

27.08.2014.

[9] (2012), How to install phonegap for Android, s interneta: http://cleancodedevelopment-

qualityseal.blogspot.nl/2012/11/how-to-install-phonegap-for-android.html, 10.09.2014.

[10] Groovy (programming language), s interneta:

http://en.wikipedia.org/wiki/Groovy_%28programming_language%29, 05.09.2014.

[11] (2013), Grails, s interneta: https://grails.org/, 03.09.2014.

[12] Grails, s interneta http://en.wikipedia.org/wiki/Grails_%28framework%29,

03.09.2014.

[13] Margaret Rouse, Relational Database, s interneta

http://searchsqlserver.techtarget.com/definition/relational-database, 20.08.2014.

[14] Cory Janssen, Relational Database (RDB), s interneta

http://www.techopedia.com/definition/1234/relational-database-rdb, 22.08.2014.

[15] MySQL, s interneta http://hr.wikipedia.org/wiki/MySQL, 08.09.2014.

[16] Groovy Server Pages, s interneta

http://grails.org/doc/latest/guide/theWebLayer.html#gsp, 30.08.2014.

[17] Android operating system, s interneta

http://en.wikipedia.org/wiki/Android_%28operating_system%29, 09.09.2014.

63

[18] Matt Smith, The Complete Android Guide for Everyone, s interneta

http://www.makeuseof.com/pages/download-these-are-the-droids-youre-looking-for-an-

android-guide, 10.09.2014.

[19] Victor Kotov (2013) Appcelerator Titanium Review: No-Hassle Cross-Platform

Mobile Development, s interneta http://blog.azoft.com/titanium-appcelerator-review/,

10.09.2014.

[20] Aplication programming interface, s interneta

http://en.wikipedia.org/wiki/Application_programming_interface, 11.09.2014.

[21] Simon Maple (2013) The 2004 decision Marker's Guide to Java Web Frameworks, s

interneta, http://zeroturnaround.com/rebellabs/the-2014-decision-makers-guide-to-java-

web-frameworks/, 11.09.2014.

[22] Sebastien (2013) Top 5 reasons why you should consider Groovy and Grails for your

enterprise software architecture right now, s interneta,

http://www.epseelon.com/2013/02/14/top-5-reasons-why-you-should-consider-groovy-

and-grails-for-your-enterprise-software-architecture-right-now/, 12.09.2014.

64

9 PRILOZI

9.1 Kazalo slika i tablica

9.1.1 Kazalo slika

Slika 2.1 Grails okolina [11] ...................................................................................................... 5

Slika 2.2 Popularnost razvojnih okruženja 2010.godine ............................................................ 5

Slika 2.3 MVC .......................................................................................................................... 10

Slika 2.4 ER dijagram aplikacije .............................................................................................. 14

Slika 2.5 HTC Dreams- prvi uređaj na Android operativnom sustavu .................................... 17

Slika 2.6 Arhitektura Android sustava ..................................................................................... 18

Slika 3.1 Properties .................................................................................................................. 21

Slika 3.2 Environment Variables ............................................................................................. 22

Slika 3.3 Namještanje varijabli ................................................................................................ 22

Slika 3.4 Izgled GGTS-a .......................................................................................................... 23

Slika 3.5 Sadržaj Grails projekta .............................................................................................. 24

Slika 3.6 MySQL Workbench Slika 3.7 Kreiranje baze ...................................................... 25

Slika 3.8 Kreiranje Domain klase Slika 3.9 Domain klase ................................................. 26

Slika 3.10 Generirana baza u MySQL-u .................................................................................. 28

Slika 3.11 MySQL tablica ........................................................................................................ 29

Slika 3.12 Instaliranje Spring Security Core dodatka .............................................................. 29

Slika 3.13 Prijava i registracija korisnika ................................................................................. 31

Slika 3.14 Unos korisničkih podataka potrebnih za registraciju .............................................. 31

Slika 3.15 Uspješno kreiran korisnik i poslana potvrda na mail .............................................. 32

Slika 3.16 Plugins ..................................................................................................................... 32

Slika 4.1Početna stranica .......................................................................................................... 33

Slika 4.2 Kontakti ..................................................................................................................... 34

Slika 4.3 Vremenska prognoza ................................................................................................. 34

Slika 4.4 Način rada PhoneGap-a ............................................................................................ 37

Slika 4.5 Razlika između hibridne i izvorne aplikacije ............................................................ 38

Slika 4.6 Arhitektura PhoneGap aplikacije .............................................................................. 38

Slika 4.7 Izgradnja aplikacije pomoću PhoneGap-a ................................................................ 40

Slika 4.8 Instaliranje Cordove .................................................................................................. 40

65

Slika 4.9 ADT dodatak ............................................................................................................. 41

Slika 4.10 Kreiranje novog projekta ........................................................................................ 41

Slika 4.11 Dodana Android platforma na Hello projekt .......................................................... 41

Slika 4.12 Projekt u Eclipsu ..................................................................................................... 42

Slika 4.13 PhoneGap Build ...................................................................................................... 43

Slika 4.14 Dobivene mobilne aplikacije .................................................................................. 44

Slika 4.15 Opis grešaka ............................................................................................................ 44

Slika 4.16 Dodana i instalirana aplikacija na tablet ................................................................. 44

Slika 5.1 Pregled arhitekture API-ja ........................................................................................ 45

Slika 6.1 Koncept aplikacije ..................................................................................................... 49

Slika 6.2 Poruke na web aplikaciji ........................................................................................... 50

Slika 6.3 Poruka na Android aplikaciji .................................................................................... 50

Slika 6.4 Poruke u bazi podataka ............................................................................................. 51

Slika 6.5 Zadatci na web aplikaciji .......................................................................................... 51

Slika 6.6 Zadatci na Android aplikaciji .................................................................................... 52

Slika 6.7 Zadatci u bazi podataka ............................................................................................. 52

Slika 6.8 Tablete na web aplikaciji .......................................................................................... 53

Slika 6.9 Tablete na Android aplikaciji .................................................................................... 53

Slika 6.10 Tablete u bazi podataka ........................................................................................... 54

Slika 6.11 Kontakti na web aplikaciji ...................................................................................... 54

Slika 6.12 Kontakti na Android aplikaciji ................................................................................ 55

Slika 6.13 Kontakti u bazi podataka ......................................................................................... 55

Slika 6.14 Foto album na web aplikaciji .................................................................................. 56

Slika 6.15 Fotografije na web aplikaciji ................................................................................... 56

Slika 6.16 Foto album na Android aplikaciji ........................................................................... 57

Slika 6.17 Foto album u bazi podataka .................................................................................... 57

Slika 6.18 Fotografije u bazi podataka ..................................................................................... 58

Slika 6.19 Novine na web aplikaciji ......................................................................................... 58

Slika 6.20 Novine na Android aplikaciji .................................................................................. 59

Slika 6.21 Novine u bazi podataka ........................................................................................... 59

Slika 6.22 Mogućnost prikaza .................................................................................................. 60

66

9.1.2 Kazalo tablica

Tablica 2.1 Ocjene okolina JVM ................................................................................................ 6

Tablica 4.1 Značajke koje PhoneGap podržava ....................................................................... 39

9.1.3 Popis kodova

Ispis koda 3.1Konfiguracija DataSource.groovy ..................................................................... 25

Ispis koda 3.2 Domain klasa Setting ........................................................................................ 27

Ispis koda 3.3 Omogućavanje NULL vrijednosti ..................................................................... 27

Ispis koda 3.4 Omogućavanje akcija za Login i Logout .......................................................... 30

Ispis koda 3.5 Registracija ....................................................................................................... 31

Ispis koda 4.1 Dohvat liste kontakata ....................................................................................... 35

Ispis koda 4.2 Dohvat slika za pojedini album ......................................................................... 36

Ispis koda 5.1 JSON za poziv GetContactsList ........................................................................ 46

Ispis koda 5.2 API za dohvat liste kontakata ........................................................................... 47

Ispis koda 5.3 API za dohvat liste albuma ............................................................................... 48

Ispis koda 5.4 API za dohvat liste fotografija iz pojedinog albuma ........................................ 48

Ispis koda 6.1 Vremenska prognoza ........................................................................................ 60

9.2 Popis oznaka i kratica

API Application Programming Interface

ASP Active Server Pages

BSD Berkeley Software Distribution

CRUD Create, Read, Update, Delete

CSS Cascading Style Sheets

DBMS Database Management System

DDMS Dalvik Debug Monitor Server

ER Entity Relationship

67

GGTS Groovy Grails Tool Suite

GORM Grails Object-Relational Mapping

GPS Global Positioning System

GSP Groovy Server Page

HTML HyperText Markup Language

iOS iPhone Operating System

JDBC Java-based data access technology

JDK Java Developer Kit

J2ME Java 2 Micro Edition

J2SE Java 2 Server Edition

JSON JavaScript Object Notation

JVM Java Virtual Machine

MVC Model-View-Controller

NDK Native Development Kit

Open GL Open Graphics Library

OS Operativni Sustav

RDBMS Relation Database Management System

SDK Software Development Kit

SGL Scene graph library

SQL Structured Query Language

SSL Secure Socket Laye

68

URL Uniform Resource Locator

XML EXtensible Markup Language

9.3 Upravljanje verzijama

OZNAKA

VERZIJE

DATUM PRIPREMIO ODOBRIO

KRATKI OPIS IZMJENA

1. 07.05.2014 Marijana Mateljan Početak pisanja

2. 05.08.2014 Marijana Mateljan Dopuna 3.1, dovršeno 3.1

3. 06.08.2014 Marijana Mateljan Dovršeno 3.2

4. 10.08.2014 Marijana Mateljan Napisano 3.3 i 3.4

5. 11.08.2014 Marijana Mateljan Dodano 3.4.2 i izmijenjen

3.1.2

6. 13.08.2014 Marijana Mateljan Pisanje 4-og poglavlja

7. 15.08.2014 Marijana Mateljan Izmjena 4.1

8. 16.08.2014 Marijana Mateljan Dovršeno 4. poglavlje

9. 20.08.2014 Marijana Mateljan Dodano 4.2.1

10. 21.08.2014 Marijana Mateljan Sređivanje dokumenta

11. 22.08.2014 Marijana Mateljan Pisanje 5-og poglavlja

12. 23.08.2014 Marijana Mateljan Ispisane kratice

13. 24.08.2014 Marijana Mateljan Dodan Uvod

14. 27.08.2014 Marijana Mateljan Ispravljene pogreške

69

15. 28.08.2014 Marijana Mateljan Sređena literatura i

reference

16. 29.08.2014 Marijana Mateljan API

17. 30.08.2014 Marijana Mateljan Promjena 3.1

18. 31.08.2014 Marijana Mateljan Izmijenjen API i napisan

zaključak

19. 03.09.2014 Marijana Mateljan Sažetak i ključne riječi

20. 05.09.2014 Marijana Mateljan Abstract and key words

21. 09.09.2014 Marijana Mateljan Pakiranje

22. 10.09.2014 Marijana Mateljan Sažetak (ispravak) i

testiranje

23. 11.09.2014 Marijana Mateljan Izmjena 6-og poglavlja i

izgled tablice upravljanja

verzijama

24. 12.09.2014 Marijana Mateljan Ispravak po mentorovim

sugestijama

25. 12.09.2014 Marijana Mateljan Dodana slika 6.1 i u

literature datum zadnjeg

pregleda

26. 15.09.2014 Marijana Mateljan Mentor:

Stipe Čelar

Izmijenjen sažetak

70

10 SAŽETAK/ABSTRACT I KLJUČNE RIJEČI/ KEYWORDS

Sažetak

U ovom radu je objašnjen proces izrade Android aplikacije i web sučelja za upravljanje tom

aplikacijom na daljinu. Izrađene su dvije aplikacije: RemoteAssistance i RAMobile i njihova

međusobna komunikacija uz pomoć API-ja. RemoteAssistance je web sučelje izrađeno uz

pomoć Groovy/Grails, GSP i MySql-a, a RAMobile je tablet aplikacija za Android OS za koju

je korišten PhoneGap koji konvertira HTML, CSS i JavaScript u željeno okruženje za mobilne

aplikacije. RemoteAssistance omogućuje unos i ažuriranje podataka o prognozi, zadatke,

novine, fotografije i sl. dok RAMobile tablet aplikacija služi isključivo za pregled tako

unesenih podataka. U radnji su opisane korištene tehnologije: Groovy/Grails, MySql, GSP,

PhoneGap, Android. Predložene su i moguće dorade za sljedeće verzije.

Ključne riječi

Groovy/Grails, Android, API, JSON, MVC arhitektura, PhoneGap.

71

Abstract

This work explains the process of developing Android applications and web interfaces for

managing this application remotely. There are two applications: RemoteAssistance and

RAMobile and their mutual communication with the help of the API. RemoteAssistance is a

website created by Groovy / Grails, GSP and MySql, and RAMobile is a tablet application for

Android OS. It is used PhoneGap which converts HTML, CSS and JavaScript in the desired

environment for mobile applications. RemoteAssistance allows user to enter and update

information about prognosis, assignments, papers, photos and so on. RAMobile tablet

application is for the overview of the entered data. In this work are used these technologies:

Groovy / Grails, MySQL, GSP, PhoneGap, Android. The possible revisions are proposed for

the next versions.

Key words

Groovy/Grails, Android, API, JSON, MVC architecture, PhoneGap