65
VELEUČILIŠTE VELIKA GORICA Dominik Ocvirek IZRADA ANDROID APLIKACIJE ZA UMAGINATION FESTIVAL ZAVRŠNI RAD

izrada android aplikacije

  • Upload
    mario

  • View
    40

  • Download
    6

Embed Size (px)

Citation preview

Page 1: izrada android aplikacije

VELEUČILIŠTE VELIKA GORICA

Dominik Ocvirek

IZRADA ANDROID APLIKACIJE ZA UMAGINATION FESTIVAL

ZAVRŠNI RAD

Velika Gorica, 2014

Page 2: izrada android aplikacije

VELEUČILIŠTE VELIKA GORICA

Održavanje računalnih sustava

IZRADA ANDROID APLIKACIJE ZA

UMAGINATION FESTIVAL

ZAVRŠNI RAD

Mentor: Student:

prof. dr.sc. Vladimir Mateljan Dominik Ocvirek, 77110403

Velika Gorica, 2014.

Page 3: izrada android aplikacije

STRANICA SA ZADATKOM

Page 4: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

Izrada Android aplikacije za Umagination festival

Sažetak

Cilj ovoga završnog rada je prikaz procesa izrade Android aplikacijeUmagination

Festival 2014. Aplikacija je namijenjena domaćim i stranim posjetiteljima Umagination

Festivala. Zamisao i razlog izrade aplikacije je korisniku skratiti vrijeme traženja informacija

vezanih uz festival.Aplikacija je izrađena pomoću besplatnog programskog alata Intel XDK.

Korištena su i pojedina rješenja i dodaci poput jQuery-a. Aplikacija sadrži informacije o

izvođačima koji nastupaju na festivalu, vrijeme održavanja koncerata,naputke kako najbrže

doći do mjesta održavanja koncerta te google mapu koja prikazuje navedeno mjesto. U radu

se također predstavlja sami Android operacijski sustav kao i sigurnost sustava i aplikacija

izgrađenih na Android platformi.

Ključne riječi: Android, aplikacija, Umagination, festival, Intel Xdk, jQuery, font, slider,

wrap-box, zaštita

Creating Android application for Umagination festival

Abstract

The aim of this study is to review the process of making an Android application called

Umagination Festival 2014. Application is intended for domestic and foreign visitors of

Umagination Festival. The meaning and the reason for making this application is for the

users to save time while searching for informations related to the festival. The application is

created using free software tool Intel XDK. There were also used different solutions and

accessories like jQuery. The application contains informations about the artists who will

perform at the festival, timetable of the festival , notes how to get to the festival and Google

map showing the Umagination venue. The securities of Android platform and applications are

also represented in project.

Keywords: Android, application, Umagination, festival, Intel XDK, jQuery, font, slider,

wrap-box, security

Page 5: izrada android aplikacije

SADRŽAJ

1. Uvod.....................................................................................................................................1

2.Umagination..............................................................................................................2

3. Android operacijski sustav....................................................................................3

3.1 Android verzije.....................................................................................................5

3.2. Arhitektura Android operacijskog sustava..........................................................6

3.2.1 Linux jezgra...................................................................................................7

3.2.2. Izvorne programske knjižnice.....................................................................8

3.2.3. Android okruženje.......................................................................................9

3.2.4. Sloj aplikacijskih okvira...............................................................................9

3.2.5. Aplikacijski sloj...........................................................................................10

4. Intel XDK................................................................................................................11

4.1. O programu.......................................................................................................11

4.2. Korištenje Intel XDK programa.....................................................................12

4.2.1.Testiranje aplikacije.....................................................................................13

4.2.2.Akcelerometar.............................................................................................13

4.2.4. Geolokacija................................................................................................14

4.2.5. Editor..........................................................................................................15

4.2.6. Demo aplikacije..........................................................................................16

5. Stvaranje aplikacije Umagination festival...........................................................18

5.1. HTML................................................................................................................18

5.2. CSS..................................................................................................................19

Page 6: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

5.3. Preduvjeti..........................................................................................................20

5.4. Datoteke i pohrana...........................................................................................21

5.5. Font...................................................................................................................21

6. Mobilna aplikacija Umagination festival 2014....................................................23

6.1. Početna stranica (eng. Home page).................................................................23

6.2 Info stranica.......................................................................................................27

6.3. Program 2014...................................................................................................28

6.4. Mjesto održavanja festivala..............................................................................28

6.5. Izvođači na festivalu.........................................................................................30

6.6. Kontakt..............................................................................................................30

7. Zaštita i sigurnost.................................................................................................32

7.1. Sigurnost Android platoforme...........................................................................32

7.2. Dm-verity..........................................................................................................32

7.3. Zaštita Android mobilnih uređaja......................................................................33

7.4. Zaštita mobilnih aplikacija.................................................................................35

8. Zaključak................................................................................................................38

9. Literatura................................................................................................................39

Page 7: izrada android aplikacije

1. Uvod

Tehnologije mobilnih uređaja se neprestano razvijaju i usavršavaju, što dovodi do sve

većeg približavanja mobilnih uređaja prijenosnim računalima. Operacijski sustav Android je

jedan od vodećih operacijskih sustava na tržištu mobilnih uređaja. Kako se u svijetu trenutno

koristi više od 400 milijuna uređaja pokretanih Android operativnim sustavom, Umagination

aplikacija je razvijena upravo za ovaj sustav.

U prvom dijelu završnog rada predstavljen je Android operacijski sustav, arhitektura

samog sustava te njegove osnovne karakteristike. U nastavku je predstavljena Android

aplikacija izrađena za potrebe i promociju Umagination festivala u Umagu, koji se ove

godine održava od 30. do 31. svibnja. Ovisno o vrsti aplikacije koja se stvara primjenjuje se i

odgovarajući način izrade. U ovom slučaju za izradu aplikacije odabran je besplatni

programski alat Intel XDK. Intel XDK pretvara HTML5 i CCS3 kod u Android aplikaciju.

Osnovni razlog korištenja programa Intel XDK je što ovaj programski alat ima mogućnost

pretvaranja koda za Android, u kod za iOS aplikaciju bez dodatnih komplikacija, što

omogućuje primjenu istog koda za razvoj aplikacije namijenjene iOS operativnom sustavu

također.

U posljednjem djelu rada prezentirana je sigurnost operacijskog sustava Android.

Android je izrađen s fokusom na programere te su ugrađene različite sigurnosne kontrole

kako bi smanjile teret prilikom razvoja softvera. No ovo nije unazadilo pristup naprednim

sigurnosnim kontrolama, nego je sustav osmišljen u smislu početno dodijeljenih sigurnosnih

kontrola tako da su svi programeri zaštićeni u određenom pogledu. Osim fokusa na

programere Android sustav sadrži ugrađene mehanizme za zaštitu korisnika, svakom

korisniku dano je na uvid kako radi instalirana aplikacija, odnosno kojim svojstvima i

funkcionalnostima uređaja aplikacija pristupa. Na ovaj način otežani su napadi uz pomoć

društvenog inženjeringa, instaliranja zloćudnih aplikacija, napade na aplikacije trećih strana i

sl.

1

Page 8: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

2. Umagination

Umagination je festival vrhunske elektronske glazbe koji se svake godine vraća i

privlači sve više posjetitelja. Od svog prvog izdanja 2010. godine više od 50.000 posjetitelja

zaplesalo je u ATP Dance Areni u Umagu. Ovaj jedinstveni festival privukao je ljude iz više

od 24 zemalja svijeta. Vrijednost festivala prepoznala je i Turistička zajednica Istarske

županije koja je 2011. godine Umaginationu dodijelila nagradu Zlatna koza – Capra d'oro

2011. u kategoriji evenata.

Smisao i razlog izrade Umagination aplikacije je korisniku skratiti vrijeme traženja

informacija vezanih uz festival te promociju istog. U ovom slučaju to je upoznavanje korisnika

sa samim festivalom, predstavljanje programa i rasporeda, prijedlozi korisnicima kako

najbrže doći do Umaga i mjesta održavanja te svi kontakt podaci. Aplikacija omogućuje i

direktan link na Sound Cloud stranice od svakog izvođača gdje se korisnici mogu upoznati

sa izvođačima i njihovim najpoznatijim i najnovijim uradcima. U aplikaciji su također

prikazane i slike sa prošlogodišnjeg festivala kako bi se predstavio mali dio atmosfere

budućim posjetiteljima a stare posjetitelje samo podsjetilo zašto su 30. svibnja ponovno u

Umagu.

2

Page 9: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

3. Android operacijski sustav

Tržište mobilnih aplikacija se svakodnevno povećava i najnovija marketinška

istraživanja pokazuju da je Android i dalje najpopularniji operacijski sustav u svijetu.

Android je mobilni operacijski sustav baziran na modificiranoj verziji Linux-a. Razvijen

je od strane male tvrtke istog imena, Android Inc. 2005. godine ovu tvrtku je kupio Google,

kao dio strategije ulaska na tržište mobilnih uređaja. Nakon kupnje, Google je zatražio

stvaranje Open Handset Alliance (OHA) udruženja, koje je sada angažirano u pružanju

podrške kao i daljnjeg razvoja sustava.

Google je htio da Android bude otvoren i besplatan, pa je tako veći dio Android koda

objavljen po open-source Apache licencom, što znači da svatko tko želi koristiti Android

može to učiniti skidanjem kompletnog Android source koda. Pored ovoga, mnogi proizvođači

mogu ugraditi svoje dodatke u Android i na taj način ga oblikovati, kako bi se njihovi

proizvodi razlikovali od proizvoda drugih proizvođača. Takav razvojni model je učinio Android

jako atraktivnim te je postao interesantan mnogim proizvođačima. Ovo se posebno odnosi na

tvrtke zahvaćene fenomenom Apple-ovog iPhonea, veoma uspješnog proizvoda koji je unio

revoluciju u industriju pametnih telefona. Primjeri tih tvrtki su Motorola i Sony Ericsson, koje

su godinama razvijale vlastite mobilne operacijske sustave. Kada je iPhone predstavljen na

tržište, mnoge od ovih tvrtki su morale pronaći način kako da svoje proizvode učine

konkurentnim te zanimljivim. Rješenje su pronašle u Androidu. Tvrtke su nastavile razvijati

svoj hardware koristeći Android kao operativni sustav na svojim uređajima.

Glavna prednost prihvaćanja Androida je što on pruža jedinstven pristup razvoju

aplikacija. Programeri samo trebaju razvijati aplikacije za Android, i njihove aplikacije će se

moći koristiti na velikom broju različitih Android uređaja. U svijetu pametnih mobitela,

aplikacije su najvažniji dio lanca uspjeha. Iz tog razloga proizvođači uređaja vide Android kao

svoju glavnu šansu u borbi sa iPhone-om.

Android ima veliku zajednicu programera za izradu aplikacijskih programa koji

proširuju funkcionalnost uređaja. U ovom trenutku ima preko milijun Android aplikacija, s

ukupno preko 20 bilijuna preuzimanja. U njih ubrajamo aplikacije koje se nalaze dostupne za

3

Page 10: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

preuzimanje preko Google Play Storea kao i aplikacije koje se nalaze na ostalim download

servisima. Zanimljivo je da je u samo osmom mjesecu ove godine napravljeno i izdano

ukupno 50.000 aplikacija.

Pri razvoju aplikacija potrebno je poštivati zakone vezane uz autorska prava u

određenim regijama. „Zaštitom prava intelektualnog vlasništva osim državnih tijela bave se i

organizacije nositelja tih prava, poput BSA (Business Software Alliance – Udruga

proizvođača poslovnog softvera) ili HDS ZAMP-a (Zaštita muzičkih autorskih prava

Hrvatskog društva skladatelja). Kroz svoje djelovanje ove organizacije promoviraju zaštitu

intelektualnog vlasništva, često naglašavajući korist od legalne eksploatacije ovih prava kao i

gubitak koji država bilježi njihovom nelegalnom upotrebom.“1

Shodno svojoj politici OHA (Open Handset Alliance) ističu se sljedeće karateristike

Android programskog okruženja:

Otvorenost - programeru je omogućena potpuna sloboda u

razvoju novih i već postojećih aplikacija, a prizvođaču uređaja slobodno

korištenje i prilagođavanje platforme bez plaćanja autorskih prava.

Sve aplikacije su ravnopravne – to znači da ne postoji razlika

između osnovnih jezgri aplikacija uređaja i dodatnih aplikacija. Svim

aplikacijama omogućen je ravnopravni pristup resursima uređaja što daje

mogućnost prilagođavanja uređaja specifičnim potrebama individualnog

korisnika.

Automatsko upravljanje životnim ciklusom aplikacije –

omogućuje nadzor pokretanja i izvršavanja aplikacija na sistemskom nivou

optimiziranim korištenjem memorije i snage uređaja. Krajnji korisnik više ne

brine o gašenju određenih aplikacija prije pokretanja drugih.

Uklanjanje granica ''klasičnih'' aplikacija – mogućnost razvoja

novih i inovativnih aplikacija osnovanih na međusobnoj kolaboraciji

tehnologija.

Brz i jednostavan razvoj aplikacija – omogućen je bogatom

bazom korisnih programskih knjižnica (eng. Libraries) i alata za izradu

aplikacija.

1 Tihomir Katulić: Uvod u zaštitu intelektualnog vlasništva u Republici Hrvatskoj, CARNet, Zagreb, 2006.

4

Page 11: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

Visoko kvalitetni grafički prikaz i zvuk – podržana 2D i 2D

OpenGL (engl. Open Graphics Library) grafika, te ugrađeni codeci svih često

korištenih audio i video formata.

Kompatibilnost sa većinom sadašnjeg i budućeg hardwarea – uključuje prenosivost

Android aplikacija na ARM, k86 i ostale arhitekture, te prilagodljivost sustava ulaznim

i izlaznim komponentama.

3.1. Android verzije

Krajem 2008. godine izrađena je prva verzija ApplePie (1.0) i pokrenuta na uređaju T-

Mobile G1 (proizveo poznati proizvođač smartphone uređaja - HTC). Zanimljivo je kako su

sve verzije Androida, od strane Googlea, nazvane po vrstama kolačića.

Sustav jako brzo napreduje, do kraja 2009. godine izlaze još 3 nove verzije, a radi se

o verzijama Cupcake (1.5), Donut (1.6) i Eclair (2.0 i 2.1). Razlika između prve i četvrte

verzije je ogromna (u samo godinu dana). Uz razvoj softwarea napreduje i hardware koji

zahtijeva sve bolju podršku sustava. Jednako tako i aplikacije koje nastaju zahtijevaju da se

hardware poboljšava, a samom sustavu da se dodaju nove mogućnosti čime naravno

postaje sve brži. Android se nastavio jednako brzo razvijati, te se i dalje razvija. U ovom

trenutku posljednja verzija je Android Kit Kat (4.4.x) koja je u osmom mjesecu postigla

prisutnost na skoro 25 % aktivnih Android uređaja. Bitne verzije koje je potrebno spomenuti

su verzija Jelly Bean (4.1.x), napravljena u srpnju 2012. godine, koja je po zadnjim podacima

instalirana na čak 54,2 % Android uređaja i verzija Gingerbread (2.3.x), napravljena krajem

2010. godine, koja je po zadnjim podacima instalirana na 13,6 % uređaja. U međuvremenu

nastaje verzija Honeycomb (3.x.x) koja je namijenjena isključivo za tablet uređaje. Ova

verzija nije doživjela veliki uspjeh, trenutna pokrivenost je samo 0,20% jer je izgubila smisao

dolaskom verzije Ice Cream Sandwich koja je stvorena kako bi radila podjednako na

mobitelima i tabletima.

Tablica 1. Prikaz dosadašnjih Android verzija

Android verzije Datum izlaska Naziv

1.1 9.veljače 2009. Banana bread

1.5 30.travnja 2009. Cupcake

5

Page 12: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

Android verzije Datum izlaska Naziv

1.6 15.rujna 2009. Donut

2.0/2.1 26.listopada 2009. Eclair

2.2 svibnja 2010 Froyo

2.3.x 6.prosinca 2010. Gingerbread

3.x 22.veljače 2011. Honeycomb

4.0.x 19.listopada 2011. Ice Cream

Sandwich

4.1/4.2 29.srpnja 2012,

27.studenoga

2012.

Jelly Bean

4.4.x 31.listopada 2013. KitKat

3.2. Arhitektura Android operacijskog sustava

Android OS je grubo podijeljen na pet glavnih dijelova, podijeljenih u 4 sloja:

Linux jezgra

knjižnice

Android okruženje

sloj aplikacijskih okvira

aplikacijski sloj.

6

Page 13: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

Slika 1. Arhitektura Android OS

3.2.1. Linux jezgra

Pri samom dnu Androidove okoline nalazi se jezgra operativnog sustava temeljena na

Security-Enhanced Linux operativnom sustavu koja je dodatno prilagođena od strane Google

za mobilne uređaje, tijekom razvoja novijih platformi Google je inkrementalno poboljšavao

vlastitu verziju jezgre Linuxa te je pridonio stvaranju raznih sigurnosnih mehanizama koji su

danas prihvaćeni te implementirani u glavnu verziju Linux jezgre verzije 3.3. Neka od

svojstava Androida implementiranih u Linux 3.3 verziju jezgre:

Binder – interprocesni komunikacijski mehanizam visoke

performanse koji služi za omogućavanje komunikacije između procesa.

Logger – dio sustava za logiranje određenih poruka nevezanih

za poruke jezgre.

7

Page 14: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

Shrinker – implementacija Androida u pogledu upravljanja

aplikacijama, na ovaj način aplikacije ostaju u memoriji dok ih jezgra ne odluči

uništiti.

Pmem – daje mogućnost lociranja fizički većeg neprekinutog

spremnika kada je potrebno.

Upravljanje napajanjem (eng. Power Managment) –

komponenta Androida utemeljena na standardnom Linuxovom sistemu

upravljanja napajanjem

Kada sagledamo Linux jezgru sa perspektive sigurnosti postoje mnogi mehanizmi koji

osiguravaju siguran rad sustava primjerice :

sustav dopuštenja temeljen na korisnicima

izolacija procesa

sigurni mehanizmi interprocesne komunikacije (IPC)

mogućnost uklanjanja nepotrebnih i nesigurnih dijelova jezgre.

3.2.2. Izvorne programske knjižnice

Knjižnice sadrže sav kod koji osigurava glavne funkcionalnosti Android OS-a.

Na primjer, SQLite knjižnica omogućuje podršku za baze podataka, koju aplikacija

može koristiti kao skladište podataka. WebKit knjižnica omogućuje web pretraživanje.

Izvorne programske knjižnice pisane su u programskim jezicima C i C++ te

čine sljedeći sloj u arhitekturi sustava. Neke od značajnijih su :

UI (eng. User interface) - program za upravljanje grafičkim

sučeljem (eng. Surface Manager) koji je odgovoran za pravilno iscrtavanje

različitih aplikacijskih komponenti u vremenu i prostoru.

OpenGL ES (eng. OpenGL for Embedded Sistems) – knjižnice

koje se koriste za hardversku 3D akceleraciju ili za 3D rasterizaciju.

SGL (eng. Scalable Graphics Library) – predstavlja 2D knjižnice

na kojima je programirana većina aplikacija. U Android OS-u 2D i 3D elementi

se mogu kombinirano prikazivati u jednom korisničkom sučelju.

Media Framework – grupa codeca za snimanje i reprodukciju

audio formata, video formata i nepomičnih slika. Omogućena je od strane

Packet Videa.

8

Page 15: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

Free Tipe – knjižnica koja služi za vektorsku rasteritaciju fonta.

SSL (eng. Secure Socket Layer) – omogućuje sigurnu

komunikaciju preko interneta.

SQLite – programska knjižnica koja implementira bazu

podataka.

Web Kit – jezgra pretraživača koji podržava Java Script i ostale

standarde na malom uređaju.

System C library – implementacija standardne C-ove sistemske

knjižnice izvedene iz operativnog sustava BSD.

3.2.3. Android okruženje

Android okruženje se nalazi na istom sloju kao i knjižnice i osigurava komplet

baznih knjižnica koje omogućuju pisanje Android aplikacija korištenjem Jave. Također

uključuje i Dalvik Virtual Machine (DVM) koji pokreće aplikacije kao zasebne procese

odnosno kao instance virtualnog stroja. DVM pretvara Java class datoteke u svoj

vlastiti format (.dex), kako bi bile optimizirane za minimalni utrošak memorije.

Umjesto upotrebe standardnog Java 2 Micro Edition (J2ME) kao alata za

pokretanje javinih aplikacija na mobilnim uređajima, Google je razvio vlastitu virtualnu

mašinu za Android. DVM je najvjerojatnije razvijen kako bi se izbjegao problem sa

dozvolama korištenja J2ME-a. Svaki pokretni uređaj koji u sebi sadrži J2ME mora

kod Sun-a dobiti dozvolu za bilo kakvu promjenu izvornog koda J2ME. Virtualna

mašina Dalvik je dobila ime po istoimenom Islandskom gradu u kojemu su živjeli preci

glavnog developera DVM-a Dana Bornsteina.

3.2.4. Sloj aplikacijskih okvira

Sloj aplikacijskih okvira (eng. Application Framework) napisan je u

programskom jeziku Java i sadrži proširiv skup programskih komponenti kojeg koriste

sve aplikacije uređaja. Ovaj sloj osigurava različite karakteristike OS-a. Framework

podržava mnogobrojne open source jezike kao što su OpenSSL, SQLite i Libc. Što se

tiče sigurnosti, framework se bazira na UNIX file system ovlastima koja osiguravaju

da aplikacije posjeduju samo one mogućnosti kojem im je vlasnik telefona dao

prilikom instalacije aplikacije.

9

Page 16: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

Neki od važnijih elemenata su :

Upravljanje aktivnostima (eng. Activity Manager) – upravljanje životnim

trajanjem same aplikacije.

Upravljanje programskim paketima (eng. Package Manager) – sadrži

informacije o aplikacijama instaliranim u sustavu.

Upravljanje prozorima (eng. Window Manager) – upravljanje aplikacijskim

prozorima.

Upravljanje pozivima (eng. Telephone Manager) – sadrži aplikacijsko

programsko sučelje koje se koristi tijekom izrade aplikacija za upravljanje

poziva.

Poslužitelji sadržaja (eng. Content Providers) – omogućuju zajedničko

korištenje podataka sa više aplikacija.

Upravljanje resursima (eng. Resource Manager) – služi za spremanje dijelova

aplikacije koji nisu kod (npr. slike).

Sustav grafičkog prikaza (eng. View Sistem) – sadrži bazu gotovih grafičkih

prikaza i alata.

Upravljanje lokacijski zavisnim servisima (eng. Location Manager).

Upravljanje notifikacijama (eng. Notification manager) – upravljanje

notifikacijama i događajima.

3.2.5. Aplikacijski sloj

Aplikacijski sloj je posljednji sloj u arhitekturi sustava Android i sastoji se od

korisničkih aplikacija uređaja. On predstavlja sloj vidljiv krajnjem korisniku. Ovaj sloj

obuhvaća sve aplikacije koje se isporučuju sa Android uređajima (Phone, Contacts,

Browser) kao i aplikacije koje se mogu skinuti sa Google Play Storea. Svaka

aplikacija koja se instalira će se nalaziti na ovom sloju.

10

Page 17: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

4. Intel XDK

4.1. O programu

Intel XDK je besplatni programski alat koji služi za razvijanje mobilnih aplikacija na

više platformi. Sam program ne prelazi 200MB-a nakon instalacije, no podaci potrebni za

stvaranje nove aplikacije mogu biti i mnogo veći. Nakon instalacije potrebno je preuzeti dva

dodatka koje program zahtijeva. Preuzimanje se obavlja pomoću čarobnjaka, nakon prvog

pokretanja. Developeri Intel XDK teama su također napravili i Intel XDK mobilnu aplikaciju

koja se može besplatno preuzeti sa Google Play servisa. Aplikacija omogućuje testiranje

izrađenih projekata na vlastitom uređaju. Postoje dva načina putem koji se može napraviti

testiranje aplikacije na testnom uređaju:

prebacivanje projekta na službeni cloud servis za pohranu

aplikacija koji se zatim mora preuzeti preko Intel XDK mobilne aplikacije.

preuzimanje aplikacije na mobilni uređaj putem matričnog

barkoda (eng. Quick response code).

Slika 2. Prikaz layout

11

Page 18: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

Dodatni materijali pronađeni su na stranicama W3schools vezanih uz HTML i CSS.

Službena stranica Android Developera služila je kao neiscrpan izvor informacija vezanih za

razvoj Android aplikacije. Također jQuery je poslužio kao izvor pojedinih ideja i načina

realizacije problema nastalih u stvaranju aplikacije.

4.2. Korištenje Intel XDK programa

Nakon pokretanja Intel XDK, korisnika odmah dočeka niz različitih kartica (eng. tab)

na vrhu programa. Taj niz kartica korisniku daju pristup cijelom nizu alata koji će pomoći

korisniku pri izradi, testiranju i plasiranju aplikacije na tržište.

Slika 3. Prikaz kartica

Pomoću kartice projekti korisnik može lako zamijeniti projekt nekim drugim, uvesti već

postojeću aplikaciju ili kreirati novi projekt. Prikazane su detaljne informacije o samome

projektu poput vremena nastanka aplikacije, tip aplikacije , adrese gdje se aplikacija sprema

na računalu i vremena zadnje promjene u izradi same aplikacije.

Kartica izrada nam pruža dvije vrste načina izrade same aplikacije preko code i

design kartica. Code kartica omogućuje korisniku izradu aplikacije u tekst editoru koristeći

HTML i CSS3 jezik. Design kartica omogućuje lakšu izradu pojedinih dijelova aplikacije

pomoću drag and drop opcija gdje korisnik vizualno odmah vidi promjene na aplikaciji koje se

pretvaraju u kod.

Emulate i test kartice služe za različite načine testiranja aplikacija. Pomoću kartice

emulate korisnik može provjeriti rad aplikacije unutar programa Intel XDK dok kartica test

služi za testiranje aplikacije na vlastitom uređaju.

Debug kartica je slična testiranju aplikacije. Služi za provjeru neispravnosti (eng. bug)

u samoj aplikaciji. Provjeru aplikacije izvršava Google Chrome-ov razvojni alat CDT, on

uključuje potpuno skeniranje Java Script koda tražeći pogreške. Za razliku od test kartice

gdje možete testirati aplikaciju na bilo kojem uređaju, debug provjera je moguća samo na

Android uređajima sa verzijom 4.x i više.

12

Page 19: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

Build kartica služi služi za izgradnju gotove aplikacije. Pomoću nje korisnik može lako

svoju aplikaciju izgraditi na različitim platformama poput Android, iOS, Windows 8, Nook,

Amazon i Tizen. Intel XDK priprema aplikaciju za upload na aplikacijske dućane koje

odaberemo.

4.2.1. Testiranje aplikacije

Intel XDK ima ugrađenu mogućnost testiranja novo napravljene aplikacije na raznim

uređajima: iPhone 4S, iPad, Samsung GalaxyTab 7, Samsung Galaxy S, Motorola XOOM,

HTC droid. Navedeni mobiteli i tableti različitih su veličina i kvaliteta ekrana, te različitih

operativnih sustava (iOS i Android). Emulator za testiranje aplikacije na uređaju se pokreće

na zaslonu PC-a direktno iz programa.

Slika 4. Mogućnost testiranja novo napravljene aplikacije na raznim uređajima (Apple iPad)

4.2.2. Akcelerometar

Akcelerometar je elektronička naprava koja mjeri zaustavljanja i pokrete. Također je u

mogućnosti odrediti rotaciju objekta te karakteristične pokrete poput njihanja ili trešnje. Ovu

napravu u sebi imaju svi mobiteli koji mogu mijenjati način prikaza na ekranu iz okomitog u

13

Page 20: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

vodoravni u ovisnosti od položaja mobitela. Dakle, kod pregledavanja fotografije na mobitelu,

akcelerometar je taj koji omogućava pregled fotografija u portret ili pejzaž orijentaciji, ovisno

o trenutnom položaju mobitela (pejzaž ili portret). Još jedna od praktičnih primjena ove

naprave je upravljanje glazbenim playerom na mobitelima pokretima ruke (Apple Shake

kontrola ili Samsung Motionplay tehnologija), te stišavanje dolaznog poziva jednostavnim

okretanjem mobitela ekranom prema dolje (Turn to mute opcija – HTC Sense).

Slika 5. Prikaz akcelerometra

4.2.3. Geolokacija

Postoji mogućnost izbora vrste internetske veze na koju je mobitel povezan.

Ponuđene mogućnosti su Wi-Fi, 2G, 3G, 4G i bez pristupa internetu. Potrebno je isprobati da

li određeni dijelovi aplikacije zahtijevaju povezanost na internet kako bi unaprijed upozorili

korisnika, da u suprotnom, određene opcije neće moći koristiti. Malim preinakama koda

moguće je dobiti u potpunosti offline aplikaciju. Ispod se nalazi emulator geolokacije, koji ima

mogućnost detaljnog prikaza ulica, prometnica, šetnica pa i znamenitosti. S obzirom da

emulator na PC-u nema GPS modul, emulacija je vrlo neprecizna. Iz tog razloga potrebno je

prilikom testiranja geolokacijskih usluga koristiti vlastiti smartphone uređaj.

14

Page 21: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

Slika 6. Prikaz geolokacije

4.2.4. Editor

U posljednjoj verziji programskog alata Intel XDK dodana je i nova opcija, mogućnost

prebacivanja između tekst editora i emulatora čime je autoru aplikacije puno lakše odmah

detektirati i ispravljati greške na aplikaciji. Zbog preglednijeg i naprednijeg sučelja autor se

služio i programom Kompozer kao tekst editorom za uređivanje HTML dijela aplikacije.

15

Page 22: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

Slika 7. Prikaz rada u tekst editoru

4.2.5. Demo aplikacije

U programu se mogu pronaći također i pojedine demo aplikacije izdane od strane

Intel XDK developer team-a. Pomoću demo aplikacija lakše je shvatiti postupak na koji način

program pretvara kod u aplikaciju, a ujedno i preuzeti rješenja koja procijenimo kao korisna.

Radi se o primjeru geolokacije, izmjeni fontova, akcelerometra emuliranim sa limenkom koja

se nalazi na ekranu, vibracije, orijentacije ekrana i sl.

16

Page 23: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

Slika 8. Prikaz demo aplikacije

17

Page 24: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

5. Stvaranje aplikacije Umagination festival

5.1. HTML

HTML je kratica za Hyper Text Markup Language, što znači prezentacijski jezik za

izradu web stranica. Hipertekst dokument stvara se pomoću HTML jezika. HTML jezikom

oblikuje se sadržaj i stvaraju se hiperveze hipertext dokumenta. HTML je jednostavan za

uporabu i lako se uči, što je jedan od razloga njegove opće prihvaćenosti i popularnosti.

Svoju raširenost zahvaljuje jednostavnosti i tome što je od početka bio zamišljen kao

besplatan i tako dostupan svima. Prvi javno dostupan opis HTML-a je dokument zvan HTML

tags (oznake), prvi put se spominje na internetu od strane Tim Berners Leea krajem 1991.

Taj opis se sastoji od 20 elemenata početnog, relativno jednostavnog dizajna HTML-a.

Trinaest tih elemenata još uvijek postoji u HTML4

Prikaz hipertekst dokumenta omogućuje web preglednik. Temeljna zadaća HTML

jezika jest uputiti web preglednik kako prikazati hipertext dokument. Pri tome se nastoji da taj

dokument izgleda jednako bez obzira o kojemu je web pregledniku, računalu i operacijskom

sustavu riječ. HTML nije programski jezik niti su ljudi koji ga koriste programeri. Njime ne

možemo izvršiti nikakvu zadaću, pa čak ni najjednostavniju operaciju zbrajanja ili oduzimanja

dvaju cijelih brojeva. On služi samo za opis naših hipertekstualnih dokumenata. HTML

datoteke su zapravo obične tekstualne datoteke, ekstenzija im je .html ili .htm. Osnovni

elementi svake stranice su znakovi (eng. tags) koji opisuju kako će se nešto prikazati u web

pregledniku. Povezice unutar HTML dokumenata povezuju dokumente u uređenu

hijerarhijsku strukturu i time određuju način na koji posjetitelj doživljava sadržaj stranica.

Primjer jednostavnog HTML dokumenta :

18

<!DOCTYPE html><html><head><title>Naziv stranice</title></head><body><p>Ovdje se unosi sam sadržaj stranice.</p></body></html>

Page 25: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

5.2. CSS

CSS je kratica za Cascading Style Sheets i u „nespretnom“ hrvatskom prijevodu bi

značilo: stilske liste u kaskadi što nam ne znači ništa. CSS je tzv. „stilski jezik“ koji

omogućuje dodavanje različitih stilova  HTML elementima kao što su: veličina i vrsta pisma,

pozadinske boje, okviri, položaj elemenata, margine, itd. Svrha CSS jezika je zapravo

odvajanje stila prezentacije od samog sadržaja web stranice.

CSS dokument je najobičniji tekstualni dokument koji sadrži instrukcije, naredbe za

web preglednike, a koje definiraju stilove za određene HTML elemente na web stranici.

Primjer CSS dokumenta izgleda ovako:

Značenje ovih stilova i instrukcija je slijedeće :

Selektor body govori web pregledniku slijedeće: sve margine na

stranici trebaju biti 0px- pismo treba biti napisano u Trebuchet MS fontu,

veličina pisma treba biti 12px.

19

body {margin:0;font-family:"Trebuchet MS";font-size:12px;

}a {

text-decoration:none;background-color:red;color:white;

}

h1{margin:0;font-weight:bold;font-size:20px;

}

p {color:#666666;font-size:11px;

}

Page 26: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

Selektor a  govori web pregledniku slijedeće: linkovi ne smiju

biti podcrtani (nemaju underline)- boja pozadine linka treba biti crvena, boja

teksta linka treba biti bijela.

Selektor h1 govori web pregledniku slijedeće: sve margine oko

h1 elementa trebaju biti 0px- debljina slova treba biti podebljana, veličina

pisma treba biti 20px.

Selektor p govori web pregledniku slijedeće: boja teksta cijelog

odlomka treba biti siva, veličina pisma treba biti 11px.

5.3. Preduvjeti

Stvaranjem novog projekta (aplikacije) u programu Intel XDK dobiva se template koji

je potrebno koristiti kako bi autorov dio koda bio vidljiv u aplikaciji. Prethodno je potrebno u

čarobnjaku odabrati koje će mogućnosti aplikacija sadržavati, poput geolokacije,

akcelerometra, live updatea, igra/program i sl. te se po tome stvara kod koji je potreban. Pri

izradi aplikacije Umagination festival odabrana je samo geolokacija kao dodatna

mogućnost.Template kod sa time izgleda ovako:

<!DOCTYPE html><!--HTML5 doctype--><html><head><title>Your New Application</title><meta http-equiv="Content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" /><style type="text/css">/* Prevent copy paste for all elements except text fields */* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }input, textarea { -webkit-user-select:text; }body { background-color:white; color:black }</style><script src='intelxdk.js'></script><script type="text/javascript">/* Intel native bridge is available */var onDeviceReady=function(){//hide splash screenintel.xdk.device.hideSplashScreen();};document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);</script></head>

20

Page 27: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

<body><!-- content goes here--></body></html>

Svaka HTML stranica mora sadržavati navedeni dio koda. Moguće je u njega dodati

JavaScript kod, CSS3 i HTML5 kod, no osnovni dio koda napisan od strane Intel XDK mora

ostati nepromijenjen. Najviše izmjena odvijalo se u dijelu CSS-a označenog <style

type="text/css"> karticom, i naravno unutar <body> kartice. Kroz cijelu aplikaciju korišten je

unutarnji CSS.

Kroz cijeli program zabranjena je mogućnost kopiranja teksta iz aplikacije kako bi se

izbjegavalo nepotrebno označavanje teksta prilikom klika na isti.

5.4. Datoteke i pohrana

Sve datoteke koje sadrži aplikacija, prilikom izrade nalaze se na lokalnom disku (u

navedenom slučaju) na adresi C:\programi\appMOBI XDK\hue.umagination\3.4.0 . Kako se

svi podaci ne nalaze online, preporuka je da se isti spremaju na online servise za pohranu

podataka kako bi se smanjila mogućnost gubitka istih. Intel XDK ima vlastiti online servis za

pohranu pod nazivom AppHub. Pri izradi aplikacije korišten je Dropbox servis.

5.5. Font

U cijeloj aplikaciji korišten je font pod nazivom Bender lights za naslove stranica, dok

je u ostalim dijelovima teksta korišten font pod nazivom Droid Sans. Od kada je izašla verzija

Ice Cream Sandwich, Droid Sans font koristi se kao službeni font u Android aplikacijama.

Font nije bio podržavan od strane Intel XDK aplikacije te ga je bilo potrebno implementirati u

nju. To je riješeno pomoću servisa Google web fonts.

Bilo je potrebno dodati redove koda u <head> dio stranice:

DroidSans <linkhref='http://fonts.googleapis.com/css?

family=Droid+Sans' rel='stylesheet' type='text/css'>

I pozvati font u CSS dijelu naredbom:

21

Page 28: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

font-family: 'DroidSans', sans-serif;

22

Page 29: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

6. Mobilna aplikacija Umagination festival 2014

6.1. Početna stranica (eng. Home page)

Početna stranica sastoji se od navigacije na ostalih šest dijelova aplikacije : Info,

program 2014, Venue, Gallery, Lineup i Contact. Na vrhu svake od navedenih stranica se

nalazi logo Umagination festivala. Pritiskom na logo aplikacija vraća korisnika automatski na

početnu stranicu aplikacije.

Logo je implementiran na sljedeći način:

<div class="header"><div class="header_top"><div class="wrap><divclass"logo"><ahref="index.html"><imgstyle="width:800px; heightht:80px;" src="images/1.jpg" alt=""></a></div>

Kod za navigaciju po stranicama izgleda ovako :

<listyle="color:rgb(0,0,238);"><ahref="info.html">Info</a></li><li><ahref="program.html"><spanstyle="color: rgb(0,0,238);">Program 2014</span></a></li)<li><ahref="venue.html"><spanstyle="color: rgb(0,0,238);">Venue</span></a></li)<li><a href="gallery.html"><span style="color: rgb(0,0,238);">Gallery</span></a></li)<li><a href="lineup.html"><span style="color: rgb(0,0,238);">Lineup</span></a></li)<li class="active"><a href="contact.html><span style="color: rgb(0,0,238);">Contact</span></a></li><div style="height:34px;" class="clear"></div>

23

Page 30: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

Podno navigacije je smiješten slider na kojemu se naizmjenično prikazuju slike

Umagination festivala. Slider je preuzet sa jQuery stranica gdje je uz par preinaka uspješno

implementiran u aplikaciju. Izgled i veličina slidera je definirana u CSS dijelu koda. Pritiskom

na slider su vidljive strelice pomoću kojih korisnik sam može pregledavati slike.

Kod slidera izgleda ovako:

<link href=“css/style.css“rel=“stylesheet“type=“text/css“media=“all“><linkhref= “css/slider.css“rel= “stylesheet“= “text/css“media= “all“><scriptsrc= “jquery.js“></script><script src=“jq.appframework.js“ ></script><script src =“appframework.ui.js“></script><script type= “text/javascript“src=“js/jquery-1.9.0.min.js“></script><script type= “text/javascript“src=“js/jquery.nivo.slider.js“></script><script type= “text/javascript“>$(window).load(function(){$( '#slider').nivoSlider() ;{);

</div><!------Slider------------><div class=“wrap“><div class=“slider“><div class=“slider-wrapper theme-default“><div id=“slider“ class=“nivoSlider“><imgsrc=“images/slajd1.jpg“data-thumb=“images/slajd1.jpg“alt=“/><imgsrc=“images/slajd2.jpg“data-thumb=“images/slajd2.jpg“alt=““ /><imgsrc=“images/slajd3.jpg“data-thumb=“images/slajd3.jpg“alt=““ /><imgsrc=“images/slajd4.jpg“data-thumb=“images/slajd4.jpg“alt=““ /></div></div></div></div></div><!------ End Slider ------------>

CSS postavke slidera su namještene da se slike naizmjenično mijenjaju bez

ponavljanja. Postavljene su strelice na slider da se omogući korisniku da sam mijenja slike

ukoliko to želi.

24

Page 31: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

.theme-default .nivoSlider {poition:relative;background:#fff url(../images/loading.gid) no-repeat 50% 50%

}.theme-default .nivoSlider img {

position:absolute;top:0px;left:0px;display:none;

}.theme-default .nivoSlider a {

border:0;display:block;

}

.theme-default .nivocontrolNav a {text-align: center;padding-top:10px;

}

.theme-default .nivocontrolNav a {display:inline-block;width:22px;height:22px;background:url(../images/bullets/.png) no-repeat;text-indent:-9999px;border:o;margin:o 2px;

}.theme-default .nivo-controlNav a.active {

background-position: 0 -22px;}

.theme-default .nivo.directionNav a {display:block;width:25px;height:40px;background:url(../images/arrows.png) no-repeat;text-indent:-9999px;border:0;opacity:0;-webkit-transition: all 200ms ease-in-out;-moz-transition: all 200ms ease-in-out;-o-transition: all 200ms ease-in-out;transition: all 200ms ease-in-out;

}

U drugom dijelu početne stranice su napravljena dva wrap-boxa unutar kojih su

postavljeni slike izvođača koji će nastupati na festivalu kao i datum izvođenja. U kodu je

25

Page 32: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

definirana veličina boxa te izvor slike spremljene na našem tvrdom disku (eng.hard disk).

Pritiskom na jednu od slika aplikacija nas prebacuje na Lineup stranicu gdje možemo

preslušati pjesme od izvođača putem SoundCloud stranice.

<divclass=“main“><divclass=wrap><divclass=“section group“><div class=“listview_1of_3 images_1_of_3 event_grid><a href=“lineup.html“><div style=“height:271px;“

class=“listinglisting_1of_2“><ahref=“lineup.html“><imgstyle=“border:opx solid;width 644px;height 187px;“ alt=““src=“images/slajd3.jpg“></a><br></div><div class=“text list1_of_2“><div class=“date“><figure><span>30</span>May</figure></div></div><divclass=“listview_1of_3 images_1_of_3 event_grid“><ahref=“lineup.html“><divclass=“listinglisting_1of_2“><ahref=“lineup.html“><imgstyle=“border: 0px solid ; width:648px; height: 151px;“ alt““ src=“images/vannilla.jpg></a><br></div><divclass=“text list_1_of_2“><divclass=“date“><figure><span>31</span>May</figure></div></div>

26

Page 33: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

Slika 9. Prikaz slidera i wrap-box-a

6.2 Info stranica

Na info stranici aplikacije je ukratko opisan sami Umagionation festival. Za opis

festivala se koristio font Bender-Lights i DroidSans. Na kraju stranice je sa Youtube servisa

postavljen kratki video uvod u Umagination festival. Youtube stranica nam sama ispiše već

cijeli HTML kod ukoliko želimo video postaviti na našu stranicu. Kod je potrebno kopirati te

samo namjestiti veličinu videa po našem vlastitom izboru.

<divitemscope=“itemscope“itemtype=http://schema.org/videoObjectclass=“video“><div class=“videoWrapper“><!—Copy and Pasted from Youtube --><iframesrc=“http//www.youtube.com/embed/My-qJNgGnVc? Autohide“1&amp;color=white&amp;controls=2&amp;fs=1&amp;iv_load_policy=3&amp;rel=0&amp;showinfo=0&amp;theme=light“ allowFull screen=““ frameborder=“0“ height=“200“ width=“300“></iframe></div></div></body></html>

27

Page 34: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

6.3. Program 2014

Stranica kao i svaka u aplikaciji se sastoji od početnog logo festivala te ostalih

navigacijskih tipki. Na stranici su navedeni izvođači po danu festivala kao i službene slike

festivala ovisno o danu izvođenja. Slike su prikazane putem koda koji je napisan u html

dijelu aplikacije.

<imgsrc="http://www.umagination.info/wp-content/uploads/home3_03.jpg" alt="avilla"><br>

Svaka slika ima drugačiju izvornu stranicu sa koje ju pozivamo. Slike su preuzete sa

službene stranice Umagination festivala.

Slika 10. Prikaz rasporeda

28

Page 35: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

6.4. Mjesto održavanja festivala

Bitna stavka ove aplikacije je također pomoći korisnicima kako najbrže i

najjednostavnije mogu doći do Umaga. Ovaj dio aplikacije svakako pomaže korisnicima koji

dolaze izvan Hrvatske ali isto tako jednako pomaže i korisnicima koji dolaze iz drugih dijelova

Hrvatske. Korisnicima su ponuđene četiri opcije kako najbrže doći a to su : autom, avionom,

autobusom i vlakom. Autom su prikazane rute i gradovi od sjevera, istoka i juga. Navedeni su

najbliži aerodromi kao i udaljenost od aerodroma do Umaga izražena u kilometrima. Za

korisnike aplikacije koji odluče putovati vlakom su napisane dvije postaje (Pazin i Buzet) gdje

mogu sići i nastaviti put do Umaga. Ukoliko se netko odluči uputiti autobusom za svaki slučaj

mu piše adresa gdje mora sići.

Na kraju stranice je ugrađena Google mapa radi lakšeg snalaženja po Umagu.

Mapa je centrirana na mjestu održavanja festivala.

Kod mape sada izgleda ovako:

<h2style=“ font-size: 20px ! important ;“><spanstyle =“color: rgb“ 240,20,230); font-family:'Bender-Light';“>YOU CAN FIND US HERE</span></h2><p><iframestyle=“ border : 0pt none ;“ src=“https://www.google.com/maps/embed?Pb=%211m14%211m8%211m3%211d2799.0972854014967%212d13.518398%213d45.447694%213m2%211i1024%212i768%214f13.1%213m3%211m2%211s0x477b7ce3f62fb9ed%3A0x7440b2081572bbf%212sUmagination%215e1%213m2%211sen%212s%214v1396875517843“Frameborder=“0“ height=“350“ width=“80%“<>/iframe></p>

29

Page 36: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

Slika 11. Prikaz mape gdje se održava festival

6.5. Izvođači na festivalu

Na stranici izvođača su prikazana najzvučnija imena festivala. Uz svako navedeno

ime izvođača je postavljena njegova slika te tipka play napravljena pomoću HTML-a.

Pritiskom na tipku play aplikacija nas automatski prebacuje na SoundCloud stranicu

pojednog izvođača gdje se mogu čuti njihovi najnoviji uradci. Spajanje na SoundCloud

stranicu i preslušavanje pjesama je moguće samo ukoliko je korisnik povezan na internet.

<divitemscope=“itemscope“ itemtype=“ http://schema.org//MusicGroup“ class=“span3 artist-card“>

<divclass=“music-player“><imgitemprop=“image“ src=“//darw0tdisu865.cloudfront.net/media/artists/Thomas_Gold.jpg“ class=“artist-picture“ alt=“ Thomas Gold“ height=“195“ width=“195“>

<divitemprop=“track“itemscope=“itemscope“itemtype=“ http://schema.org/MusicRecording“ class=“sc-player“ data-soundcloud-id=“146878317“data-url=“ https://soundcloud.com/thomas-gold/sets/thomas-gold-borgeus-beast-out“>

<divstyle=“height:38px;font-size:20px;color: rgb(255,204,255);“ class=“sc-controls“><aHref=“https://soundcloud.com/thomas-gold/sets/thomas-

30

Page 37: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

gold-borgeus-beast-out“ target =“_blank“ class=“ sc-play“ title=“ play“>Play</a>

</div

6.6. Kontakt

Posljednja stranica Umagination aplikacije je svakako Contact dio gdje se svaki

korisnik može dodatno informirati o svim pojedinostima samog festivala. Na stranici je

objavljena E-mail adresa organizatora kao i Facebook stranica samog festivala. Ukoliko je

korisnik zainteresiran za festival i na istom želi prisustvovati potrebno je samo stisnuti link

postavljen za kupnju ulaznica koji će korisnika prebaciti na web adresu samog Umagination

festivala putem kojeg si može rezervirati mjesto na festivalu.

Slika 12. Prikaz Contact stranice

31

Page 38: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

7. Zaštita i sigurnost

7.1. Sigurnost Android platoforme

U svrhu ostvarivanja zaštite korisničkih podataka, zaštite sistemskih resursa o

izolacije aplikacija. Android sustav pruža sljedeće sigurnosne mehanizme:

robusna sigurnost na razini operacijskog sustava kroz Linux

kernel

obavezno izvršavanje aplikacija u sandbox 2 okruženju

potpisivanje aplikacija

dopuštenja definirana aplikacijom i dopuštena od strane

korisnika.

7.2. Dm-verity

Android verzija 4.4 podržava verificirani proces podizanja (engl. Boot) kroz koji

provjerava valjanost uređaja (eng. device-mapper-verity - dm-verity), odnosno jezgra

provjerava na razini blokova da pojedine funkcionalnosti nisu bile mijenjane. Na ovaj način

spriječava se pokretanje rootkit 3zlonamjernog softvera koji se može sakriti prilikom

pokretanja samog uređaja bez dm-verity funkcionalnosti. Valjanost (istintost) blokova se

provjerava uz pomoć sažetka (eng. hash) SHA256. Svaki izračunati sažetak bloka se

uspoređuje sa stablom sažetaka, gdje korijenski sažetak mora biti pouzdan, na ovaj način

cijelo stablo i njegova pouzdanost tj. istinitost je povezana kroz sažetke svih blokova, te ako

postoje i najmanja odstupanja sa stablom sažetaka došlo je do promjene na sustavu te

dolazi do greške u čitanju i poruke o izmijenjenosti datotečnog sustava (Slika 14. ). Kako ne

bi došlo do pada performansi prilikom učitavanja uređaja, provjera blokova radi se po

principu prvog pristupa, odnosno kada sustav pristupa određenom bloku sustava, paralelno

2 Sandbox- sigurnosni mehanizam zatvaranja aplikacije u kontrolirano okruženje u kojemu ima ograničene resurse, dopuštenja i sl. [Goldberg, Wagner, Thomas, i Brewer, 1996, str. 4]

3 Zlonamjeran softver koji se skriva od sustava te omogućuje privilegirani pristup uređaju od strane napadača

32

Page 39: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

se izvršava provjera bloka naspram stabla sažetaka te se verificira traženi blok i ponaša se u

skladu s prethodno navedenim pravilima.

Slika 13. Princip rada dm-verity funkcionalnosti

7.3. Zaštita Android mobilnih uređaja

Android kao operativni sustav je vrlo siguran. Korisnicima nudi više razina zaštite

kako bi se spriječila moguća šteta putem malware-a. Malware (skraćenica od malicious

software, "zlonamjeran softver") je softverski program napravljen tako da se neprimjetno

ubaci u sistem programera  i načini neku vrstu štete. Malware može biti virus, crv, trojanski

konj, spyware, adware ili neki drugi štetni program. Prilikom instalacije aplikacija na mobilni

uređaj Android operativni sustav traži dopuštenje od korisnika gdje su prikazani točno svi

dijelovi sustava koje će aplikacija koristiti. Važno je prepoznati prije instalacije da li je

skinuta Android aplikacija zlonamjerna ili ne, zapitati se da li aplikacija traži previše pristupa

za mogućnosti koje pruža. Preporuča se i instalacija zaštitnih aplikacija koje će provjeravati

druge aplikacije prije same instalacije.

33

Page 40: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

Slika 14. Prikaz dozvola za aplikaciju

Sigurnost pri izradi je najvažniji segment kod današnjih aplikacija jer bez toga sve

pada u vodu. Svi danas traže od korisnika putem interneta podatke o karticama, datum

rođenja, OIB, adresu, telefonske brojeve i slično. Samim time se ljudi izlažu opasnosti od

napada, no jednostavno žive u takvom okruženju koje ih na to praktički „prisiljava“.

U najnovijem testiranju napravljenom od strane FireEye Mobile Security Teama

analizirano je oko 1.000 top Android aplikacija i ustanovljeno je kako je čak 68% njih

osjetljivo na Man-In-The-middle (MITM) napade. MITM napadi svode se na ubacivanje

neovlaštenog korisnika između klijenta i poslužitelja, što neovlaštenom korisniku pruža

gotovo neograničene mogućnosti.

Jedna od tri aplikacije bila je SSL ranjiva, to je ozbiljan problem i zato programeri i

sigurnosni stručnjaci moraju uporno raditi na tome da se uklone eventualne prijetnje. Velika

većina te ranjivosti dolazi preko pojma „advertising libraries“ koji koriste programeri a radi se

o reklamama koje naprave ''pop-up'' u aplikaciji.

34

Page 41: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

Good Technology dao je statističke podatke o tome kako poduzeća u prvom kvartalu

ove godine najviše preuzimaju poslovne custom aplikacije te se najviše brinu oko sigurnosti.

Sigurnosne aplikacije su jedne od najviše traženih i one drže prva mjesta na top listama

najviše traženih i skidanih aplikacija

7.4. Zaštita mobilnih aplikacija

Preporučuje se zaštita svake aplikacije koju se misli predstaviti na tržištu. Neke

aplikacije su sklonije napadu od drugih. Ukoliko je programirana aplikacija koja traži

korisničku lokaciju, skuplja osobne podatke od korisnika (slike,imena,adrese) ili se oslanja

na udaljene servere za pohranu i upravljanje korisničkih podataka onda je zaštita

preporučljiva jer su upravo takve aplikacije najviše napadnute. Aplikacije poput budilica,

lokalnih bilješki ili offline aplikacije koje nisu povezane sa internetom su rijetko napadnute jer

ne mogu napraviti veliku štetu ili ukrasti vrijedne informacije.

Aplikacija Umagination festival nije napravljena u svrhu predstavljanja drugim

korisnicima putem app Storea poput Google Play-a te samim time nisu poduzete nikakve

zaštitne mjere od strane autora kako bi aplikacija bila sigurna. Umagination festival je

informativna te offline aplikacija kojoj nije potreban internet kako bi se koristila. Samim time

ne može biti predmet teškog napada jer korisnici nigdje ne ostavljaju svoje vlastite podatke

niti ih to aplikacija traži.

35

Page 42: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

8. Zaključak

Povećanjem broja korisnika smartphone uređaja, očekuje se od festivala poput

Umaginationa da posjeduje aplikaciju koja će olakšati korisnicima snalaženje na festivalu, te

im pružati sve informacije na jednom mjestu. Za izradu aplikacije u programskom alatu Intel

XDK potrebno je jako dobro poznavati HTML i CSS, te Android platformu u potpunosti. Uz

Intel XDK korišteni su i dodatni sadržaji poput jQuerya i Google Map-a. Sadržaj aplikacije,

poput vremena održavanja koncerta te lokacija u potpunosti je preuzet sa web stranice

festivala kako bi podaci bili što točniji. Nakon izrade aplikacija je testirana pomoću emulatora

na nekoliko uređaja među kojima su bili tableti i Android uređaji različitih operativnih sustava i

veličina ekrana kako bi se provjerilo ponašanje aplikacije. Povećanjem broja korisnika

povećava se i broj prijetnji na tržištu aplikacija. U slučaju instalacije aplikacija koje su

nesigurne te sadržavaju sigurnosne propuste, a posjeduju prava pristupa osjetljivim

podacima, dovodi se do nesigurnosti cijelog sustava. Ove probleme i rizike sustav pokušava

umanjiti prikazom sigurnosnih zahtjeva, odnosno prava pristupa aplikacije prije njene

instalacije, na ovaj način korisnik ima veliku kontrolu nad aplikacijama koje instalira. Osim

prikaza traženih dopuštenja aplikacije, Google Play sadrži i komentare zajednice na

određenu aplikaciju te korisnik iz komentara drugih korisnika može uvidjeti kvalitetu,

probleme i nesigurnost određenih aplikacija koje želi instalirati. Ovisno o verziji Android

sustava sigurnost se inkrementalno poboljšavala te uz pravilne postavke korisnik može imati

visoku razinu zaštite, no razni proizvođači pametnih telefona ne prate trend nadogradnje

softvera dovoljno brzo te na taj način izlažu vlastite korisnike sigurnosnim rupama koje

napadači mogu iskoristiti. Iz ovih razloga obični korisnici imaju nižu razinu zaštite od

naprednijih korisnika koji samostalno nadograđuju sustave.

38

Page 43: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

Literatura

[1] Tihomir Katulić: Uvod u zaštitu intelektualnog vlasništva u Republici Hrvatskoj,

CARNet, Zagreb, 2006.

[2] Goldberg, Wagner, Thomas, i Brewer, 1996, str. 4

[3] URLhttp://en.wikipedia.org/wiki/Rootkit , 20.9.2014

[4] URL http://en.wikipedia.org/wiki/Android_(operating_system) , 5.8.2014.

[5] URL http://en.wikipedia.org/wiki/Google_Play , 6.8.2014.

[6] URL https://software.intel.com/en-us/html5/tools, 6.8.2014.

[7] URL http://www.umagination.info/, 15.8.2014.

[8] URL https://soundcloud.com/explore , 19.8.2014.

[9] URLhttps://maps.google.com/maps/ms?

msid=212312697436754809783.0004c60d3824ebf78d30a&msa=0&ll=43.704759,15.

920018&spn=0.006942,0.016512&dg=feature , 10.8.2014.

[10] URL http://www.novimobiteli.com/akcelerometar/ , 28.8.2014.

[11] URL http://fonts.googleapis.com/css?family=Droid+Sans,24.8.2014.

[12] URL http://developer.android.com/index.html , 23.8.2014.

[13] URL https://developer.android.com/training/articles/security-tips.html , 23.8.2014.

[14] URL http://query.com , 20.8.2012.

[15] URL http://www.w3schools.com/ , 18.8.2014.

[16] URL http://autosend.io/mobile-app-security-guide/ , 7.9.2014

[17] URL http://bs.wikipedia.org/wiki/Malware ,7.9.2014

39

Page 44: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

[18] URLhttp://www.web-upotrebljivost.com/savjeti/web-dizajn/uvod-u-

css.php#.VCO_kGd_t2J , 22.9.2014

[19] URL http://hr.wikipedia.org/wiki/HTML, 23.9.2014

[20] URLhttp://en.wikipedia.org/wiki/Man-in-the-

middle_attack#Defenses_against_the_attack,10.9.2014

40

Page 45: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

P O T V R D A

kojom se potvrđuje da je student Dominik Ocvirek izradio završni rad pod naslovom

IZRADA ANDROID APLIKACIJE ZA UMAGINATION FESTIVAL

u skladu s zadanim zadatkom, tezama i pravilima struke.

Mentor:

prof. dr.sc. Vladimir Mateljan

Velika Gorica, _______________

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

41

Page 46: izrada android aplikacije

Izrada Android aplikacije za Umagination festival 2014

IZJAVA

Izjavljujem s punom materijalnom i moralnom odgovornošću da sam ovaj rad

samostalno napravio, te da u njemu nema kopiranih ili prepisanih dijelova teksta

tuđih radova, a da nisu označeni kao citati s napisanim izvorom odakle su preneseni.

Svojim vlastoručnim potpisom potvrđujem da sam suglasan da se ovaj moj rad

javno objavi na Internetu.

U Velikoj Gorici, datum

Dominik Ocvirek

42