SVEUČILIŠTE U ZAGREBU FAKULTET ELEKTROTEHNIKE I RAČUNARSTVA

DIPLOMSKI RAD br. 1262

Programska biblioteka za izradu grafova na Android operacijskom sustavu koristeći

tehnologiju React Native

Martin Skec

Zagreb, lipanj 2016.

Zahvaljujem svima koji su bili uz mene tokom studija, a posebno Andrei

Veliko hvala mojoj obitelji i Ivici na podršci

Hvala mentoru doc. dr. sc. Igoru Mekteroviću

na prihvaćanju teme, savjetima i strpljenju

Sadržaj Uvod ............................................................................................................................ 1

1. Pregled tehnologija za razvoj mobilnih aplikacija ................................................ 21.1 Xamarin ........................................................................................................................ 2

1.1.1 Kako Xamarin radi? ................................................................................................. 31.1.2 Mogućnosti i performanse ....................................................................................... 3

1.2 Hibridne mobilne aplikacije .......................................................................................... 41.2.1 Apache Cordova ...................................................................................................... 4

2. React i React Native tehnologija ......................................................................... 72.1 React ............................................................................................................................ 7

2.1.1 Posebnosti Reacta ................................................................................................... 82.1.2 Razvoj i održavanje ............................................................................................... 10

2.2 React Native .............................................................................................................. 112.2.1 React Native aplikacija .......................................................................................... 122.2.2 Posebnosti React Nativea ..................................................................................... 142.2.3 Struktura projekta .................................................................................................. 162.2.4 Proširivost .............................................................................................................. 182.2.5 Razvoj i održavanje ............................................................................................... 22

3. Android biblioteke za prikaz i izradu grafova .................................................... 233.1 Telerik UI .................................................................................................................... 23

3.1.1 Podržani grafovi i mogućnosti ................................................................................ 243.1.2 Način korištenja ..................................................................................................... 24

3.2 MPAndroidChart biblioteka ........................................................................................ 253.2.1 Podržani grafovi i mogućnosti ................................................................................ 253.2.2 Način korištenja ..................................................................................................... 26

4. Razvijena biblioteka .......................................................................................... 274.1 Mogućnosti biblioteke ................................................................................................ 274.2 Arhitektura .................................................................................................................. 28

4.2.1 Struktura projekta .................................................................................................. 284.2.2 Android React Native paket ................................................................................... 294.2.3 React Native sučelje .............................................................................................. 31

4.3 Objavljivanje biblioteke .............................................................................................. 324.3.1 Licenca .................................................................................................................. 334.3.2 NPM ....................................................................................................................... 33

5. Mobilna aplikacija koja demonstrira upotrebu biblioteke ................................... 355.1 Dodavanje i korištenje razvijene biblioteke ................................................................ 355.2 Opis ekrana ................................................................................................................ 365.3 Izgradnja aplikacije (.apk) .......................................................................................... 41

Zaključak ................................................................................................................... 44

Literatura ................................................................................................................... 45

Sažetak ..................................................................................................................... 46

Summary ................................................................................................................... 47

Skraćenice ................................................................................................................. 48

1

Uvod

Mobilne aplikacije, kako bi bile konkurentne, trebaju biti dostupne na svim

glavnim platformama. Razvoj za svaku pojedinu platformu je relativno skup zato jer

platforme koriste potpuno različite tehnologije što predstavlja vremenski i financijski

trošak.

Rješenje tog problema je korištenje tehnologija s kojima je moguće razvijati

aplikacije za više platformi. Postoje tehnologije koje omogućuju razvoj jedne aplikacije

koja se potom prevodi u aplikacijske pakete za različite platforme. Takav pristup često

dovodi do osjećaja korištenja koji odudara od nativnog i nezadovoljstva korisnika.

React Native je tehnologija koja omogućava razvoj mobilnih aplikacija za više

platformi. React Native, za razliku od drugih sličnih tehnologija, ne promovira razvoj

jedne aplikacije, već promovira koncepte koji se mogu primijeniti u razvoju za svaku

pojedinu platformu. React je JavaScript biblioteka za izradu korisničkog sučelja za web

aplikacije, čiji se koncepti primjenjuju u nativnom razvoju.

Da bi neka tehnologija bila konkurentna, ona mora imati rješenja za većinu

funkcijskih zahtjeva koje neka aplikacija treba omogućiti. Jedan od zahtjeva je i

mogućnost prikaza grafova. React Native do sada nije imao kvalitetne biblioteke koje

to pružaju, te je zato razvijena biblioteka koja to omogućuje.

Kvalitetna biblioteka za prikaz grafova je kompleksna i njezin razvoj zahtjeva

puno vremena. Zahvaljujući mogućnostima proširenja React Nativea nativnim

paketima, nije bilo potrebe razvijati novu biblioteku, već je korištena popularna

biblioteke za nativne Android aplikacije MPAndroidChart. Razvijena biblioteka je

sučelje između nativne MPAndroidChart biblioteke i React Nativea.

Kako bi zainteresirani programeri mogli isprobati mogućnosti biblioteke i imati

primjere njezinog korištenja, razvijena je Android mobilna aplikacija koja to

demonstrira.

2

1. Pregled tehnologija za razvoj mobilnih aplikacija

Razvoj mobilnih aplikacija za više platformi predstavlja vremenski I financijski

trošak. Razlog tome je što svaka platforma ima svoj nativni programski jezik, nativne

komponente korisničkog sučelja i razlike u mogućnostima platforme.

Programski jezici koji se koristi za pisanje aplikacija ovise o platformi. Za iOS se

koristi Objective C ili Swift, za Android Java ili bilo koji JVM (Java Virtual Machine)

jezik, a za Windows phone C#.

Postoje tehnologije i radni okviri koji objedinjuju razvoj mobilnih aplikacija na

način da se piše samo jedna mobilna aplikacija. Aplikacija se potom može automatski

prevesti i zapakirati za svaku pojedinačnu platformu koju tehnologija podržava. Ovaj

način razvoja samo jedne mobilne aplikacija ima prednosti u smislu manje potrebnog

znanja i bržeg razvoja za sve platforme. Također ima i mana, a to su ponajprije lošije

performanse i nemogućnost potpune prilagodbe nativnom sučelju, što šteti nativnom

osjećaju korištenja.

1.1 Xamarin

Xamarin [1] je radni okvir za izradu višeplatformske nativne mobilne aplikacije.

Programski kod se piše u C# programskom jeziku. Mobilne platforme koje radni okvir

podržava su Android, iOS i Windows phone.

Xamarin dolazi kao dodatak uz Visual Studio za Windows operacijski sustav, te

kao Xamarin Studio za OS X operacijski sustav koji je samostalno razvojno okruženje.

Xamarin kao platforma nudi dodatne mogućnosti kao što su testiranje

performansi, monitoring aplikacije i mogućnost testiranja na više od 1000 virtualnih

uređaja.

Microsoft je kupio tvrtku Xamarin 2016. godine. Nakon što su ih preuzeli,

Microsoft je odlučio objaviti Xamarin SDK (engl. software development kit) pod MIT

licencom i tako omogućiti svima da besplatno koriste radni okvir.

3

Danas Xamarin koristi preko 1.400.000 programera iz preko 120 država i preko

15.000 kompanija. Svjetski poznate kompanije koja ga koriste su između ostalih:

Bosch, GitHub, Slack, Kimberly-Clark i drugi.

1.1.1 Kako Xamarin radi?

Xamarin nudi dva proizvoda: Xamarin.iOS i Xamarin.Android. Oba proizvoda su

izgrađena nad Mono radnim okvirom. Mono je verzija .NET radnog okvira

namijenjenog izvršavanju na *NIX operacijskim sustavima, te je otvorenog koda.

Xamarin koristi C# programski jezik zato što je izgrađen nad Mono radnim okvirom koji

ga isto koristi.

Za iOS Xamarin koristi "Ahead-of-Time” (AOT) prevoditelj koji prevodi

Xamarin.iOS aplikaciju direktno u ARM strojni kod. Xamarin kao rezultat prevođenja

stvara .app datoteku koja je zapravo obična iOS aplikacija.

Za Android, Xamarinov prevoditelj prevodi aplikaciju u međujezik (engl.

Intermediate language) koji se potom “Just-in-Time” prevodi u nativni strojni kod

prilikom pokretanja aplikacije. Xamarin kao rezultat prevođenja stvara .apk datoteku

koja je obična Android aplikacija.

1.1.2 Mogućnosti i performanse

Mobilna aplikacija koja se razvija pomoću Xamarin radnog okvira ima na

raspolaganiju standardne nativne kontrole za korisničko sučelje. Tako aplikacija ne

samo da izgleda nativno, nego se tako i ponaša. Također preko Xamarin API-ja

aplikacija ima pristup svim specifičnim funkcijama platforme na kojoj će se izvodi (npr.

iBeacons, te Android Fragments).

Xamarin aplikacije koriste platformski specifična hardverska ubrzanja, te su

prevedene na način da imaju nativne performanse što se ne može postići kod rješenja

koje interpretiraju kod pri izvršavanju.

Programeri kao manu Xamarinu navode brojne bugove i ponekad nepredviđena

ponašanja.

4

1.2 Hibridne mobilne aplikacije

Postoji i porodica radnih okvira koji su bazirani na web tehnologijama, odnosno

hibridne mobilne aplikacije. Ti radni okviri omogućuju programerima izradu aplikacija

pomoću HTML-a, CSS-a i JavaScripta. Aplikacija koje su tako razvijene nisu potpuno

nativne zato jer se sav prikaz ekrana odvija unutar web pogleda (engl. web view),

umjesto da koriste platformski specifično korisničko sučelje. S druge strane nisu ni

potpuno web bazirane zato jer imaju pristup nativnim mogućnostima uređaja (razni

senzori, kontakti, kamera i sl.).

Ovakav pristup razvoju mobilnih aplikacija uklanjaju kompleksnost pisanja u

više jezika koja se pojavljuje u čisto nativnim mobilnim aplikacijama. Programeri ne

moraju znati nativne programske jezike, te će, ukoliko su upoznati s klasičnim web

aplikacijama, s lakoćom moći razvijati i mobilne aplikacije.

Također se omogućava brži razvoj zato jer se razvija samo jedna hibridna

aplikacija koja se može zapakirati za više platformi u platformski specifične aplikacijske

pakete.

Razvoj mobilne aplikacije koja se izvršava u web pogledu dolazi s manama.

Prije svega aplikacije će imati slabije performanse zato jer se izvode u web pregledniku

i ne mogu biti optimizirane za specifičnu platformu. Aplikacije neće biti stilizirane za

pojedinu platformu kao što bi bile da koriste nativno korisničko sučelje. Također osjećaj

korištenja s korisnikove strane neće biti kao kod nativne aplikacije, te to dovodi do

osjećaja da aplikacija ne odgovara platformi na kojoj se izvršava. Sve to može dovesti

i do toga da aplikacija bude odbijena od strane Applea za iOS, Googlea za Android ili

Microsofta za Windows phone zato jer je prespora ili nema nativni osjećaj.

U nastavku će biti opisan najpopularniji radni okviri za izradu hibridne mobilne

aplikacije Apache Cordova i neke njegove distribucije.

1.2.1 Apache Cordova

Apache Cordova [2] je popularan radni okvir otvorenog koda za izradu hibridnih

mobilnih aplikacija. Omogućuje programerima izradu mobilnih aplikacija korištenjem

web tehnologija.

5

Radni okvir proširuje HTML i JavaScript i omogućuje programerima pristup

nativnim mogućnostima mobilne platforme. Također omogućuje proširivost putem

nativnih dodataka (engl. plugins). Ako postoji potreba za nekom funkcionalnošću koja

nije dostupna iz HTML5 ili se želi razviti nova nativna funkcionalnost, programer može

napisati nativni dodatak koji će omogućiti komunikaciju između HTML5 aplikacije i

nativne platforme.

Apache Cordova je prvotno razvijen 2008. godine pod nazivom PhoneGap na

iPhoneDevCamp događaju. Tvrtka koja ga je razvila se zove Nitobi Software i

naknadno je kupljena od Adobea 2011. godine. U isto vrijeme Adobe je odlučio

doprinijeti Apache Software fondaciji tako što su započeli novi projekt Apache Cordova

na temelju PhoneGap koda.

Danas Apache Cordova podržava sve veće mobilne platforme, te sve glavne

operacijske sustave. Mobilne platforme koje podržava su: Android, Blackberry 10, iOS,

WP8. Operacijski sustavi koje podržava su Ubuntu, OS X i Windows.

Radni okvir se koristi u puno drugih alata i radnih okvira za izradu hibridnih

mobilnih aplikacija. U nastavku će biti kratko navedene 2 najpopularnije distribucije

Apache Cordove: Adobe PhoneGap i Ionic.

1.2.1.1 PhoneGap

PhoneGap [3] je originalna i najpopularnija distribucija Apache Cordove. Sadrži

moćno i fleksibilno komandno sučelje za što jednostavnije korištenje. Omogućuje

programeru da stvori, servira, prevede i pokrene aplikacije iz komadne linije. Radni

okvir je izdan uz Apache 2 licencu.

PhoneGap je više od radnog okvira, osim komadne linije nudi još neke

proizvode: Desktop app, Developer Mobile App, PhoneGap Build.

Desktop app nudi istu funkcionalnost kao komandno sučelje, ali kroz klasičnu

desktop aplikaciju.

Developer Mobile app je mobilna aplikacija koja služi kao kostur za testiranje

aplikacije koja se razvija. Pomoću nje programer samo napravi upload HTML, CSS i

JavaScript datoteka preko komadne linije ili Desktop app. Ovime se izbjegava potreba

da se ponovno prevodi ili ponovno instalira aplikacija na uređaj za testiranje.

6

PhoneGap Build omogućuje pakiranje aplikacija u platformski specifične pakete

koji su odmah spremni za objavu u mobilnim dućanima. Proizvod je u «oblaku» i time

se smanjuje kompliciranost prevođenja i pakiranja aplikacija za pojedine platforme.

1.2.1.2 Ionic

Ionic [4] je radni okvir izgrađen kao distribucija Apache Cordove koja ima

dodatni sloj u obliku AngularJSa. Radni okvir je otvorenog koda, izdan pod MIT

licencom. Ionic također nudi dodate usluge na svojoj platformi: dostavljanje obavijesti

(engl. push notifications), autentifikacija korisnika, izgradnja nativnih paketa u oblaku i

automatska ažuriranja (engl. live updates) aplikacije.

Dostavljanje obavijesti je usluga s kojom je moguće slanje dinamičkih i

usmjerenih (engl. targeted) obavijesti svim ili samo dijelu korisnika.

Usluga autentifikacije omogućuje vrlo jednostavan način autentificiranja

korisnika pomoću socijalnih prijava (facebook, google i dr.) ili najobičnije prijave putem

lozinke i korisničkog imena. Platforma također nudi administracijsko sučelje za

praćenje i uređivanje korisnika.

Slično kao i kod PhoneGapa, Ionic omogućuje izgradnju platformski specifičnih

paketa aplikacije u oblaku za što jednostavniju objavu u mobilnim dućanima.

Live updates je usluga pomoću koje je moguće instalirati novu verziju aplikacije

bez da ju korisnik mora preko mobilnog dućana preuzeti i instalirati. Ova usluga

ubrzava objavu novih verzija zato jer nije potrebno čekati odobrenje od mobilnog

dućana. Također je moguće parcijalna objava u svrhu testiranja novih funkcionalnosti

na manjem broju korisnika i vrlo lagan način da se vrati na stariju verziju aplikacije u

slučaju da nova ima grešaka (engl. bugs).

7

2. React i React Native tehnologija

React i React Native su relativno nove tehnologije otvorenog koda. Još su u

aktivnom razvoju kojeg predvodi Facebook, a sudjeluje i zajednica. React je primarno

tehnologija za izradu korisničkog sučelja u web aplikacijama, dok se njegovi koncepti

koriste i u React Nativeu. React je inicijalno izdan prije 3 godine i popularnost mu

svakodnevno raste. Dokaz tome je svakodnevno povećanje broja preuzimanja

biblioteke. U trenutku pisanja ovog rada, biblioteka je preuzeta 17.035 puta u zadnjem

danu, 380.767 u zadnjem tjednu i 1.538.828 puta zadnji mjesec. Što je React i koje su

mu posebnosti će biti opisane u 2.1. React Native je radni okvir za izradu nativnih

mobilnih aplikacija korištenjem Reacta. React Native podržava izradu nativnih iOS i

Android aplikacija korištenjem JavaScripta. Radni okvir je izdan 2015 i u vrlo je

aktivnom razvoju. U 2.2 će biti opširnije opisan.

2.1 React

React (React.js ili ReactJS) [5] je JavaScript biblioteka otvorenog koda. Koristi

se za izradu korisničkog sučelja i pokušava riješiti probleme koji se pojavljuju u izradi

interaktivnih jednostraničnih web aplikacija.

React je namijenjen da pomogne programerima u izradi velikih aplikacija koje

koriste podatke koji se s vremenom mijenjaju i koje imaju složeno unutarnje

aplikacijsko stanje. React je deklarativan i modularan što znači da ga je s lakoćom

moguće integrirati u postojeću aplikaciju. Programiranje u Reactu je izgradnja

komponenti. Komponente enkapsuliraju manji dio aplikacije i tako omogućuju

odvajanje zaduženja (engl. separation of concerns), omogućuju lagano testiranje i

ponovno korištenje komponenti na drugim mjestima.

Ako se React gleda u smislu MVC paradigme, React je 'V' (pogled). Međutim,

to nikako ne otežava izradu aplikacije zbog toga što React razbija aplikaciju na manje

komponente. Svaka komponenta se može promatrati kao jedan objekt koji zna kako

se treba iscrtati (pogled) i koji sadrži logiku vezanu uz taj pogled (kontroler).

Komponente se povezuju u roditelj-dijete odnos. S tom vezom komponenta roditelj

prosljeđuje potrebne podatke (model) komponenti dijete.

8

2.1.1 Posebnosti Reacta

2.1.1.1 Jednosmjerni tok podataka

React ima jednosmjerni tok podataka (engl. one-way data flow). Tok podataka

ide iz komponente roditelja u komponente djece. Kada se podaci promijene putem

asinkronih zahtjeva ili putem interakcije s korisnikom, React ponovno iscrtava

komponentu, kao da je korisnik stisnuo osvježi (engl. refresh). Na taj način se

pojednostavlja implementacija aplikacije zato što nije potrebno razmišljati i programirati

logiku koja naknadno mijenja izgled aplikacije kako bi sve bilo ažurirano prikazano.

Kada se neka komponenta prvi put inicijalizira, render funkcija je pozvana koja

generira komponentu uzimajući u obzir trenutno stanje podataka. Kada se podatak

promijeni, render funkcija je ponovno pozvana, kao da nije bilo prvog poziva.

Budući da React ima isključivo jednosmjeran tok podataka, problem nastaje

kada se treba proslijediti neki podatak ili obavijest o nekom događaju iz komponente

dijete u komponentu roditelj ili neku komponentu iznad roditelja. Postoje dva način

rješavanja ovo problema.

Prvi način se obično koristi kada se treba proslijediti podatak u direktnog

roditelja. U tom slučaju komponenta roditelj definira povratnu funkciju (engl. callback)

i proslijedi ju komponenti dijete. Komponenta dijete poziva tu funkciju kako bi

obavijestila roditelja o nekom događaju ili kako bi proslijedila podatak.

Drugi način se koristi kada želimo doseći komponente koje nisu direktan roditelj

nego su negdje drugdje u komponentnoj hijerarhiji. Tada je sustav pretplati/objavi

fleksibilnije i lakše održivo rješenje. Može se izvesti koristeći standardne funkcije za

događaje ili se može koristiti neka JavaScript biblioteka.

2.1.1.2 Manipulacija DOM-om

React drugačije pristupa DOM-u (document object model) od ostalih radnih

okvira. Ne dopušta programeru da radi direktno s njim, nego uvodi jedan sloj između.

To je virtualni DOM, Reactov sloj između logike u JavaScriptu i pravog DOM-a. Taj

koncept poboljšava performanse. Kada se aplikacija uspješno renderira u virtualni

DOM, React radi razliku (engl. differential, skraćeno diff) između virtualnog i stvarnog

DOM-a i ažurira stvarni DOM samo s tom razlikom. Uz to što ažurira DOM samo s

9

potrebnim razlikama, sve promijene radi odjednom te se koristi grupno ažuriranje

(engl. batch update). S pogleda performansi, takvo ažuriranje je puno isplativije nego

klasični način kojeg koriste ostali radni okviri.

2.1.1.3 HTML predlošci u JavaScriptu

Tradicionalna korisnička sučelja u web aplikacijama su građena s nekim

predlošcima (engl. templates) ili HTML direktivama. React drugačije pristupa izgradnji

sučelja, razbija ga u komponente koje se pišu u potpunosti s JavaScriptom. Kako bi

komponente bile čitljivije u JavaScript-u, razvijen je JSX (JavaScript syntax extension).

On omogućava da se unutar JavaScript-a pišu XML oznake. Naravno, JSX se ne može

izvoditi u preglednicima i potrebno ga je pretvoriti u čisti JavaScript. Prevođenje za

vrijeme izrade aplikacije se može odvijati i u pregledniku, a za produkciju se preporuča

da se prevede, te da se poslužuju prevedene datoteke. Primjer JavaScript koda s JSX

sintaksom i s čistom JavaScript sintaksom dan je na Slika 1 i Slika 2.

Slika 1 Prikaz definiranja React <div> elementa s JSX sintaksom.

Slika 2 Prikaz definiranja <div> elementa s čistom JavaScript sintaksom.

U nastavku na Slika 3 je prikazano kako JSX predlošci izgledaju u sklopu React

komponente. Prikazane su dvije komponente CommentList koji predstavlja listu

komentara i Comment koja predstavlja jedan komentar. Komponente imaju

implementiranu samo render funkciju koja se poziva kada se komponenta treba

iscrtati. Na ovom primjeru se vidi kako JSX sintaksa nije uvijek čitka i odmah

razumljiva. U komponenti CommentList se to vidi kod načina generiranja Comment

komponenti. JSX za sada ne podržava ponavljanje elementa ili umjetna grananja, te

je stoga potrebno koristiti JavaScript petlje i funkcije kako bi se generirale komponente.

10

Slika 3 JSX sintaksa u sklopu React komponenti

2.1.2 Razvoj i održavanje

Biblioteka je prvotno razvijena u Facebook-u koji ju je počeo koristiti u svojim

aplikacijama. Kada je Facebook kupio Instagram, cijela Instagram web aplikacija je

napisana u potpunosti s Reactom i Backboneovim ruterom. Facebook je 2013. React

pustio u javnost i omogućio da ga koriste i ostali. Za vrijeme pisanja ovog rada, trenutna

stabilna verzija je 15.1.0 izdana 20.05.2016. Prošla verzija je bila 0.14.8 izdana

29.03.2016. Prelaskom s minor verzije na major, Facebook želi dati do znanja se

biblioteka koristi stabilno u produkciji već nekoliko godina.

Osim Facebook-a i Instagrama, neke od poznatijih kompanija koje koriste React

u svojim aplikacijama su: Netflix, Yahoo, Airbnb, Sony, Atlassian i drugi.

11

2.2 React Native

React Native [6] je JavaScript radni okvir otvorenog koda koji omogućuje izradu

nativnih mobilnih aplikacija koristeći React biblioteku. Radni okvir, kao i React, razvija

Facebook. Prvotno je objavljena verzija za iOS, a potom 6 mjeseci poslije i za Android.

U početku je radni okvir imao imao više razvijenih mogućnosti za iOS, ali sada je i

Android dostigao tu razinu.

React Native omogućuje izradu nativnih mobilnih aplikacije za više platformi,

slično kao Xamarin, ali s bitnom razlikom. Xamarin je radni okvir s kojim se piše jedna

aplikacija koja se potom prevodi za svaku platformu. Taj način dovodi do ne nativnog

osjećaja korištenja. Moto React Nativea je naučiti koncepte izrade aplikacija koji se

potom primjenjuju za svaku pojedinu platformu kako bi osjećaj korištenja bio identičan

kao da je cijela aplikacija pisana u nativnom jeziku (engl. learn once, write anywhere).

Kako se ne bi za svaku platformu baš sve moralo pisati ispočetka, moguće je dijeliti

kod i koristiti ga za više platformi. Tako se npr. poslovna logika napiše samo jednom i

onda koristi i u Android i u iOS aplikaciji.

Aplikacije pisane u React Nativeu se tijekom razvoja ne moraju stalno prevoditi

u izvršni kod pojedine platforme. Obično se prevode u izvršni nativni kod samo prije

nego se aplikacija prvi put pokreće na simulatoru ili uređaju ili kada postoje promjene

unutar nativnog paketa. U većini slučajeva programer će pisati JavaScript kod u React

Native aplikaciji koji se ne mora prevoditi kako bi se prikazale promijene na simulatoru.

U tome se razlikuje od nekih drugih tehnologija koje omogućavaju izradu jedne

aplikacije za sve platforme. Time dobivamo puno dobrih stvari kod razvoja. Najbitnija

je brzina razvoja jer ne moramo čekati da se promijenjeni kod ponovno prevede u

izvršni kod. JavaScript kod se samo zapakira u paket (engl. bundle) i prebaci na

simulator ili uređaj u već prevedenu aplikaciju za izvođenje. Promjene su na taj način

trenutne i uvelike se ubrzava razvoj zato jer prevođenje nativnih aplikacija obično traje

dosta dugo.

React Native nativne aplikacije koriste iste koncepte kao web aplikacije pisane

u Reactu. Na taj način radni okvir dolazi u veliku prednost u odnosu na druge slične

tehnologije jer web developeri već upoznati s React konceptima mogu s lakoćom

početi pisati i nativne mobilne aplikacije. Za razliku od drugih tehnologija koje koriste

12

JavaScript koji usporava aplikaciju, animaciju i interakciju, React Native koristi

posebnu dretvu za sve UI (engl. user interface) izračune i tako oslobađa glavnu dretvu

da je stalno dostupna za obradu interakcije s korisnikom.

2.2.1 React Native aplikacija

React Native aplikacija se sastoji od dvije komponente. Jedna je nativna

mobilna aplikacija koja se prevodi u izvršni kod, a druga je JavaScript aplikacija u kojoj

je zapravo definirana aplikacija koja se razvija. JavaScript aplikacija se samo pakira

(engl. bundling) uz nativnu aplikaciju.

Nativnu aplikaciju možemo promatrati kao izvršilaca (engl. engine) JavaScript

aplikacije. Nativna aplikacija pokreće JavaScript virtualnu mašinu koja izvršava

JavaScript aplikaciju. iOS platforma ima ugrađenu virtualnu mašinu, dok na Android

platformi ona nije ugrađena i mora se zapakirati s aplikacijom.

Prilikom razvoja, prevođenje se odvija na računalu, te se aplikacijski paket

prenese na simulator ili uređaj. Aplikacijski paket, APK za Android, nastaje

prevođenjem Android projekta unutar android direktorija. U APK se dodatno zapakira

React Native JavaScript kod i virtualna mašina za pokretanje JavaScripta. Slično je i

kod prevođenja iOS aplikacije, uz razliku što iOS ima JavaScript virtualnu mašinu i nije

ju potrebno pakirati. Na Slika 4 je prikazan dijagram koji to ilustrira.

Slika 4 Kompozicija aplikacijskih paketa

13

Aplikacija se sastoji od 3 glavne dretve. To su:

• «shadow queue» - dretva koja izračunava raspored komponenti

• glavna dretva – glavna dretva nativne aplikacije

• JavaScript dretva – izvodi JavaScript kod unutar virtualne mašine

Glavna prednost takve podijele je povećanje performansi i omogućavanje da je

korisničko sučelje uvijek responzivno na događaje. To znači da nativni paketi mogu

jednostavno stvarati nove dretve iz glavne dretve u kojima se mogu obavljati resursno

zahtjevni poslovi, npr. dekodiranje slike, spremanje u memoriju uređaja u pozadini i sl.

Nativna aplikacija je zadužena za iscrtavanje ekrana, izvršavanje nativnih API

poziva i registriranje raznih događaja na uređaju (npr. dodir, network status, itd.).

JavaScript aplikacija je glavna i ona određuje što će biti prikazano na ekranu I poziva

nativni API (GPS, kamera, obavijesti, itd.).

Nativna aplikacija i JavaScript virtualna mašina ne mogu direktno komunicirati.

Kako bi komunikacija bila moguća razvijen je protokol preko kojeg se ona odvija. Sva

komunikacija se odvija asinkrono preko komunikacijskog kanala (engl. bridge) u JSON

formatu. Preko kanala se šalje minimalna količina podataka o promjenama i

događajima u aplikaciji. Primjer kako se komunikacija odvije je opisan u sljedećem

poglavlju 3.2.5.1. Dodatna prednost komunikacijskog kanala je mogućnost korištenja

kanala za više stvari. Nativna aplikacija nije nužno jedina koja sluša na kanalu. Na

primjer, kanal nam omogućuje korištenja Chrome Developer Tools alata kako bi lakše

otklanjali neispravnosti (engl. debugging) slično kao kod klasičnih web aplikacija.

2.2.1.1 Primjer komunikacije između nativnog i JavaScripta

Na Slika 5 prikazan je dijagram toka komunikacije. Kao primjer uzeti ćemo

događaj dodira koji se događa kada korisnik stavi prst na ekran. Taj događaj se

registrira u nativnoj aplikaciji (korak 1). Kada se događaj dogodi, nativna aplikacija

prikupi podatke o njemu (npr. koordinate dodira, vrijeme, itd.) (korak 2) i obavijesti

JavaScript aplikaciju. Za obavještavanje se prvo događaj serijalizira u JSON format i

šalje se kroz protokol (korak 3). JavaScript aplikacija sluša komunikacijski kanal i kada

registrira novi unos, deserijalizira ga i procesira (korak 4). Rezultat procesiranja

događaja može biti potreba za iscrtavanjem novog elementa na ekranu. JS aplikacija

14

poziva nativne metode koje će to izvršiti (korak 5). Ti pozivi se serijaliziraju i šalju u

komunikacijski kanal (korak 6). Nativna aplikacija također sluša komunikacijski kanal i

registrira novi unos od JS aplikacije. Deserijalizira poruku i izvršava naredbe (korak 7).

Naredbe mogu biti prikaz novog elementa zbog kojeg se ponovno renderira UI (korak

8) ili neki nativni API poziv.

Slika 5 Primjer komunikacije preko komunikacijskog kanala

2.2.2 Posebnosti React Nativea

2.2.2.1 Nativne komponente

Kada je riječ o radnim okvirima s kojima je moguće raditi više platformske

aplikacije, glavni je problem kako integrirati neku platformski specifičnu funkcionalnost.

Za React Nativeu to nije problem zato jer on omogućuje na jednostavan način

dodavanje nativnih mogućnosti. Sve glavne platformski specifične funkcionalnosti već

su implementirane i omogućene putem radnog okvira. To je npr. AlertIOS koji

prikazuje iOS specifične obavijesti ili zahtjeva od korisnika da unese nešto. Primjer

obavijesti je prikazan na Slika 6.

15

Slika 6 AlertIOS iOS nativna mogućnost

ToastAndroid je specifična mogućnost koja prikazuje nativne Android

obavijesti. Primjer kako ona izgleda je prikazan na Slika 7.

Slika 7 ToastAndroid Android nativna mogućnost

Programer će ovisno o platformi za koju razvija koristit jednu, odnosno drugu

mogućnost. Neke mogućnosti imaju smisla samo na jednoj platformi zato jer ne postoji

ekvivalent na drugoj. To je npr. UITabBar za iOS koji predstavlja traku na vrhu ili dnu

s ikonama, te se klikom na ikonu otvara određeni pogled. Primjer za Android je Drawer

koji predstavlja bočni navigacijski izbornik koji je specifičan za Android platformu.

2.2.2.2 Stiliziranje

Izgled ekrana i komponenti je vjerojatno najbitniji dio aplikacije. iOS i Android

imaju svoj specifičan način konfiguriranja izgleda komponente. React Native nudi

jedinstven način konfiguriranja za obje platforme po uzoru na CSS (Cascading Style

Sheets) koji se koristi u web aplikacijama. Za raspored komponenti na ekranu se koristi

flexbox koji je novitet u CSS3 specifikaciji.

Flexbox je način raspoređivanja (engl. layout) komponenti na stranici tako da se

komponente na predvidljiv način prikazuju na različitim veličinama ekrana. To se

postiže tako da je prostor na ekranu podijeljen u retke ili stupce i elementi zauzimaju

određenu poziciju unutar retka ili stupca. Nije potrebno apsolutno pozicionirati

16

elemente i ručno računati točan piksel gdje se element treba prikazati kao što se to

radi kod nativnih aplikacija.

Budući da se komponente stiliziraju po uzoru na CSS, moguće je koristiti većinu

klasičnih CSS atributa koji se koriste kod web aplikacija. Na Slika 8 je prikazano kako

se stilizira gumb korištenjem poznatih atributa za boju teksta, veličinu ili stil fonta.

Moguće je postaviti radijus granica komponente ili marginu i ispunjavanje (engl.

padding). Iz primjera je također vidljivo da se stilovi dodaju na komponente «inline»,

praksa koja nije poželjna u web aplikacijama. Ovdje to nije toliki problem zato jer je

stilove moguće postaviti preko varijabli.

Slika 8 Stiliziranje komponente Button u React Nativeu

2.2.3 Struktura projekta

Za generiranje standardnog projekta postoji razvijeno React Native CLI

(command line interface). Ako je CLI već instaliran na računalo, samo je potrebno

pokrenuti generiranje projekta s naredbom iz konzole:

react-native init <project_name>

17

Naredba će generirati standardnu strukturu projekta i dodati sve potrebne

ovisnosti u package.json datoteku. Ta datoteka je standardna datoteka za

opisivanje projekta i navođenja ovisnosti u NPM (node package manager) razvojnom

okruženju.

Standardna struktura se obično sastoji od 3 podprojekta. Primjer kako to može

izgledati je prikazan na Slika 9. Pod projekti od kojih se projekt sastoji se nalaze u

direktorijima android, ios i app. Dodatno u korijenskom direktoriju se nalaze

index.android.js i index.ios.js koji predstavljaju ulaz u React Native

aplikaciju za pojedinu platformu. U njima se definira korijenska aplikacijska

komponenta koja se prikazuje i inicijalizira aplikacija.

Slika 9 Standardna struktura React Native projekta

2.2.3.1 Android projekt

Direktorij android sadrži projekt s nativnom Android aplikacijom. Programski

jezik u njemu je Java i projekt sadrži sve potrebno za razvoj Android nativne mobilne

aplikacije. Projekt također sadrži gradle alat za automatiziranu izgradnju projekta i

uključivanja Java ovisnosti. Ulaz u nativnu Android aplikaciju je u standardnoj

MainActiviy.java datoteci u kojoj se nalazi glavna aktivnost koja pokreće

aplikaciju. U ovom slučaju u kojem se pokreće React Native aplikacija,

MainActivity nasljeđuje ReactActivity koji poziva i inicijalizira React Native

aplikaciju. Pokrenuta aplikacija dalje komunicira s JavaScript kodom koji određuje što

se prikazuje na ekranu i sluša na zahtjeve za korištenje nativnog API-ja.

18

2.2.3.2 iOS projekt

Direktorij ios sadrži iOS projekt s nativnom iOS aplikacijom. Programski jezik

u njemu je Objective C i projekt sadrži sve potrebno za razvoj nativne iOS aplikacije.

Ulaz u aplikaciju se nalazi u AppDelegate.m datoteci u kojoj se isto kao i u Android

projektu poziva React Native aplikacija koja potom komunicira s JavaScriptom.

2.2.3.3 React Native projekt

Nalazi se u app direktoriju i sadrži React Nativu aplikaciju koju razvijamo. Nije

nužno koristiti poseban direktorij, može se sve staviti i u korijenski. Za projekt se koristi

JavaScript skriptni jezik. U projektu su definirani ekrani, pomoćne UI komponente,

pomoćne komponente za pohranu podataka i ostale pomoćne datoteke koje sadrže

pomoćne funkcije i sl.

2.2.4 Proširivost

Radni okvir sam po sebi nije uvijek dovoljan i razni slučajevi korištenja (engl.

use cases) zahtijevaju određene posebnosti koje nisu njegov sastavni dio. Tu je važno

da radni okvir nudi lagan način dodavanja novih proširenja sa strane programera koji

razvija proširenje i lagan način korištenja samog proširenja u aplikaciji. React Nativu

nudi takva proširenja.

Proširenja se obično razvijaju kao NPM paketi što znači da se mogu vrlo lagano

uključiti u projekt. Programeri upoznati s JavaScript razvojem ili Node.jsom su već

upoznati s tim procesom. To također znači da bilo koji NPM paket razvijen za Node.js

može biti korišten i u React Native aplikaciji.

Proširenja se mogu podijeliti u dvije kategorije. Prva kategorija su proširenja

koja ne zahtijevaju nativan kod. To su proširenja koja se sastoje samo od JavaScript

koda. Takva proširenja mogu biti React komponente koje ubrzavaju razvoj aplikacije

jer programer ne mora sve sam razvijati (npr. razni gumbi, iskočni prozori i sl.) ili

nekakve pomoćne funkcije i biblioteke koje omogućuju lakši razvoj (npr. biblioteka za

RESTful API pozive). Druga kategorija proširenja su ona koja sadrže i nativan kod i

ona će detaljnije biti opisana u sljedećem 2.2.4.1.

19

2.2.4.1 Nativna proširenja

S React Nativeom je moguće pisati nativne mobilne aplikacije bez da napišemo

ijednu liniju nativnog koda. Također je moguće lagano nadograditi aplikaciju s nativnim

pogledima i modulima. To znači da se bilo koja nativna biblioteka ili nativan kod, koji

je pisan samo za nativni razvoj, s lakoćom može koristiti u React Native aplikaciji. To

mu daje veliku prednost u odnosu na druge slične radne okvire.

U nastavku će biti opisan proces izrade nativnog Android pogleda i njegovog

korištenja u React Nativeu.

Izrada je poprilično jednostavna. Potrebno je napraviti novi Java razred koji

predstavlja menadžera pogleda i smjestiti ga unutar android direktorija s ostalim Java

datotekama. Razred treba naslijediti SimpleViewManager i implementirati getName

i createViewInstance metode. Prva metoda služi tome da pogled ima ime preko

kojeg će ga se moći referencirati u JavaScriptu. Druga metoda je konstruktor koji stvara

instancu pogleda kojeg ovaj pogled menadžer predstavlja. Na Slika 10 je prikazana

implementacija nativnog pogled menadžera koji prikazuje tekst.

Slika 10 Nativan Android pogled menadžer - MyTextManager.java

20

Nativni pogledi sami po sebi nemaju previše smisla ako ih ne možemo

konfigurirati po potrebi. Konfiguracija nativnih pogleda se radi preko metoda koje se

anotiraju s @ReactProp. Ta anotacija daje do znanja Reactu da se ta metoda treba

pozvati kada se promijeni vrijednost svojstva navedenog u anotaciji. U ovom slučaju

to su svojstva text i color. Prvi argument metode je uvijek instanca pogleda, a drugi

argument ovisi o tipu atributa koji se postavlja. Atribut može biti sljedećeg tipa:

boolean, int, float, double, String, Boolean, Integer, ReadableMap,

ReadableArray i dr. Atributi ReadableMap i ReadableArray predstavljaju

JavaScript objekt, odnosno JavaScript polje.

Posljednji korak u nativnom kodu je registracija implementiranog pogled

menadžera u nativnom paketu. Sva nativna proširenja moraju biti dio nekog nativnog

paketa. Nativni paket je Java razred koji implementira ReactPackage sučelje. Sučelje

se sastoji od metoda u kojima se registriraju nativni pogledi createViewManagers i

nativni moduli createNativeModules. Registracija se obavlja na način da se u listu

koje metode vraćaju doda instanca pogled menadžera ili nativnog modula. Na Slika 11

je prikazana implementacija MyNativePackage.

Slika 11 Nativan React paket - MyNativePackage.java

Drugi dio izrade nativnog pogleda je JavaScript sučelje u kojem će se definirati

izgled React komponente i povezati ju s nativnim pogledom. Datoteka se treba nalaziti

u korijenskom direktoriju projekta ili app direktoriju, ovisno o odabranoj strukturi. Na

21

Slika 12 je prikazana implementacija React komponente koja predstavlja nativan

pogled. Referenca na nativni pogled se dobiva preko funkcije

requireNativeComponent kojoj se kao prvi argument predaje ime nativne

komponente (isto kao u implementaciji getName metode), a drugi argument je sučelje

u kojem su definirani tipovi atributa.

Slika 12 React komponenta - MyText.js

Jednom kada imamo uključeno nativno proširenje iz paketa

MyNativePackage u kojem smo napravili nativan pogled menadžer

MyTextManager i za njega napravili JavaScript sučelje koje predstavlja tu nativnu

komponentu MyText, možemo koristiti našu komponentnu na sljedeći način:

<MyText text={'MyText native component'} color={'red'} />

Sva nativna proširenje moraju biti registrirana u MainActivity.java razredu

Android aplikacije u kojoj se koriste. Registracija se obavlja na način da se metodi

getPackages doda u listu implementirani nativni paket, u ovom slučaju

MyNativePackage. Na Slika 13 je prikazan rezultat prikazivanja gore navedene

komponente u React Native Android aplikaciji.

22

Slika 13 Izgled MyText React komponente u simulatoru

2.2.5 Razvoj i održavanje

React Native, kao i React, je razvio i održava ga Facebook. Radni okvir je

prvotno izdan javnosti početkom 2015 godine pod BSD licencom (Berkeley Software

Distribution) otvorenog koda. Zadnja izdana verzija je 0.28.0 objavljena 22.06.2016

i trenutno se priprema 0.29.0. Facebook prakticirao vrlo kratak razvojni ciklus od

svega dva tjedna. To znači da svaka dva tjedna objave novu minor verziju radnog

okvira. Repozitorij projekta se nalazi na GitHubu i ima 34.044 zvjezdica (engl. stars),

preko 6.800 git commitova i preko 2.400 razvojnih inženjera je obaviješteno o

promjenama u repozitoriju. Budućnost radnog okvira ne bi trebala biti upitna i

Facebook će ga nastaviti održavati zbog toga što ga aktivno koriste u svojim

aplikacijama. Facebookove mobilne aplikacije ga koriste, neke djelom, a neke su u

potpunosti napisane u njemu. Neke od aplikacija su: glavna Facebook aplikacija,

Facebook Groups, Facebook Ads Manager, F8 i dr.

23

3. Android biblioteke za prikaz i izradu grafova

Android je mobilni operacijski sustav koji je dostupan dugi niz godina. Od

početaka razvoja aplikacija za njega postoji potreba za prikazivanjem grafova. Tokom

godina je postojalo na desetke biblioteka koje su to omogućavale, neke su bile

jednostavne sa svega nekoliko grafova i malo mogućnosti za prilagodbu, a neke su

bilo i složenije sa više grafova i više mogućnosti. Postoji podjela na biblioteke

otvorenog koda i komercijalne biblioteke za koje je potrebno kupiti licencu kako bi se

mogla koristiti.

Najpopularnije biblioteke otvorenog koda su:

• MPAndroidChart https://github.com/PhilJay/MPAndroidChart

• HelloCharts-Android https://github.com/lecho/hellocharts-android

Najpopularnije komercijalne biblioteke su:

• shinobicharts https://www.shinobicontrols.com/shinobicharts

• Telerik UI grafovi http://www.telerik.com/android-ui/chart

U nastavku će biti ukratko opisane mogućnosti MPAndroidChart i Telerik UI

grafova.

3.1 Telerik UI

Telerik UI [7] je komercijalna biblioteka za izradu korisničkog sučelja u Android

aplikacijama. Biblioteku razvija kompanija Progress Software Corporation koja uz nju

nudi i široki spektar biblioteka za web, iOS i Windows phone platforme. Za korištenje

biblioteke potrebno je kupiti licence koje nisu jeftine, te su zbog toga više namijenjene

za korištenje u komercijalnim projektima.

Biblioteka u sklopu kontrola koje nudi ima grafove. Osim grafova biblioteka nudi

i još neke kontrole koje se koriste pri razvoju Android aplikacija. Ostale kontrole su:

prikaz liste, forme, kalendar, bočni izbornik (engl. side drawer), komponenta za

praćenje korisničkih povratnih informacija i dr.

24

3.1.1 Podržani grafovi i mogućnosti

Biblioteka navodi da podržava preko 10 različitih tipova grafova. Osnovni tipovi

grafova su: linijski (engl. line), stupčasti (engl. bar), tortni (engl. pie), mjehurićasti (engl.

bubble), raspršeni (engl. scatter) i graf sa svijećama (engl. candlestick). Osim osnovnih

tipova, moguće je raditi površinske grafove, «savitljive» (engl. spline) i prstenaste

(engl. doughnut) grafove. Savitljivi grafovi su zapravo linijski, ali sa zaobljenim

segmentima između točaka. Krafna grafovi su tortni grafovi sa prazninom u sredini.

Grafove je također moguće kombinirati i na jednom grafu prikazati više setova

podataka. Na primjer, moguće je napraviti graf koji pokazuje cijene dionice pomoću

jednog seta podataka koji se prikazuje svijećama, i drugog seta podataka koji prikazuje

prosječnu cijenu u zadnjih x dana pomoću savitljivog grafa.

Biblioteka podržava više osi što omogućuje da se na istom grafu prikažu grafovi

različito skalirani. Na primjer, na lijevoj y osi skala može biti od 0 do 100 i prikazivati

stupčasti graf, a desna y os može biti od 0 do 2000 i prikazivati površinski graf.

Moguće je vizualizirati određenu točku u grafu pomoću iskočnih površina (engl.

tooltip) koja se pojavi neposredno iznad točke i male kuglice koja se pojavi na samoj

točci i time se omogućuje precizno čitanje podataka.

Biblioteka omogućuje uvećavanje grafa što omogućuje bolju preglednost i

čitanje gušćih podataka.

3.1.2 Način korištenja

Biblioteka je komercijalna i zbog toga nije dostupna putem javnih poveznica

pomoću kojih bi se automatski preuzela u alatima za automatsku izgradnju projekta.

Biblioteku je potrebno instalirati na računalo pomoći instalacijskog paketa koji se

preuzima sa službenih stranica. U paketu se nalaze dvije redistribucije biblioteke,

jedna za Eclipse, a druga za Android Studio razvojno okruženje. Nakon što je

instalacijski paket preuzet i instaliran, može se uključiti u projekt na način da se kopiraju

datoteke biblioteke u libs direktorij u Android projektu.

25

3.2 MPAndroidChart biblioteka

MPAndroidChart [8] biblioteka je najpopularnija biblioteka za izradu i prikaz

grafova na Android operacijskom sustavu. Biblioteka je u potpunosti otvorenog koda,

potpuno je besplatna za korištenje, te se sav kod nalazi na GitHubu. Repozitorij ima

preko 9.500 zvjezdica, preko 1.500 git commitova, te je preko 600 razvojnih inženjera

obaviješteno o svakoj promijeni u repozitoriju. Biblioteka je i dalje u aktivnom razvoju i

neprestano se dodaju nove mogućnosti i popravljaju greške. Zadnja verzija biblioteke

je 2.2.5 i objavljena je 27.05.2016. Biblioteka radi na Android operacijskim sustavima

od Android verzije 2.2.x na dalje.

3.2.1 Podržani grafovi i mogućnosti

Podržano je 8 različitih grafova. To su: linijski, stupčasti , tortni, radar,

mjehurićasti, raspršeni i graf sa svijećama (engl. candlestick). Također je moguće

napraviti kombinirani graf od linijskog, stupčastog, svijeća i raspršenog. Uz klasični

linijski graf, moguće je napraviti površinske i «savitljive» grafove uz minimalne

promijene u konfiguraciji.

Osim što biblioteka podržava sve osnovne grafove, omogućuje i veliku slobodu

u konfiguraciji grafa. Moguće je skalirati graf na obje osi gestama dodira (engl. touch-

gesture), također pomicanje po grafu ukoliko je uvećan (engl. zoomed in).

Ovisno o tipu grafa, kod nekih je moguća konfiguracija x osi i kod nekih je

također moguća konfiguracija jedne ili dvije y osi. Omogućeno je podešavanje legende

grafa u smislu pozicije, fonta, veličine slova, boje i dr.

Grafovi kod iscrtavanja podržavanju animacije samog iscrtavanja po x, y ili obje

osi. Moguće je odrediti trajanje animacije, te je dostupno desetak funkcija za

ublažavanje animacije (engl. easing), te se također može definirati i vlastita funkcija

ublažavanja.

Grafovi podržavaju interakciju što znači da se može vizualno označiti točka koju

korisnik dodiruje, ispisati dodatni podatci ili izvršiti neka akciju ovisna o podatku koji je

označen.

26

3.2.2 Način korištenja

Biblioteku je moguće uključiti u Android projekt na nekoliko načina. Prvi i najlakši

je dodavanjem gradle ovisnosti. Gradle je alat otvorenog koda za automatiziranu

izgradnju projekta i projektnih zadataka. Drugi način je putem maven ovisnosti. Maven

je također alat za automatiziranu izgradnju projekta. Treći način je da se preuzme .jar

datoteka zadnje objavljene verzije i da se potom ručno doda kao ovisnost u Android

projekt.

Nakon što je biblioteka uključena u projekt, može se početi koristiti. Na stranici

repozitorija na GitHubu je dostupna detaljna dokumentacija i način korištenja razreda

i metoda biblioteke. Također je dostupan i pokazni projekt u kojem se biblioteka koristi.

Pokazni projekt je dostupan za preuzimanje preko Play Storea, Googleovog dućana

za mobilne aplikacije na Android operacijskom sustavu. Naziv aplikacije je

MPAndroidChart Example i ima preko 10.000 preuzimanja.

27

4. Razvijena biblioteka

React Native je relativno novi i vrlo obećavajući radi okvir za izradu nativnih

mobilnih aplikacija. Radni okviri sami po sebi nisu dovoljni, oni nude samo osnovne

funkcionalnosti koje u većini slučajeva nisu dovoljne zato jer razne aplikacije imaju

razne nestandardne funkcijske zahtjeve. Prikaz raznih grafova u aplikacijama je jedan

od funkcijskih zahtjeva koji se može pojaviti i React Native mora imati mogućnost

ispuniti taj zahtjev kako bi bio odabran kao projektna tehnologija.

U trenutku pisanja ovog rada React Native još nije imao kvalitetnu biblioteku

koja bi omogućila prikaz grafova. Postoje nekoliko manjih biblioteka koje imaju jako

ograničene mogućnosti i pokrivaju svega jedan ili dva tipa grafa, u svakom slučaju

nedovoljno za bilo kakvu ozbiljniju aplikaciju.

U sklopu ovog diplomskog rada razvijena je React Native biblioteka za prikaz

grafova. Razvijena biblioteka se može koristiti samo za Android mobilne aplikacije.

Zbog kompleksnosti i veličine projekta koji predstavlja biblioteka za izradu grafova, nije

samostalno razvijena nova, nego je u pozadini korištena popularna biblioteka za

nativne Android aplikacije MPAndroidChart.

U tom smislu, razvijena biblioteka predstavlja sučelje između React Native

aplikacije i nativne Android biblioteke za prikaz grafova. To znači da razvijena

biblioteka kroz svoje React komponente omogućuje pristupnu nativnoj biblioteci

namijenjenoj za čisto nativne Android aplikacije. Na taj način je moguć prikaz i

konfiguracija grafova bez da programer mora pisati nativan kod za Android aplikacije.

Iz perspektive programera, komponente biblioteke se koriste kao bilo koje druge React

komponente i nema nikakve razlike.

4.1 Mogućnosti biblioteke

Biblioteka podržava 7 različitih grafova s velikom mogućnosti konfiguracije u

obliku React komponenti. To su stupčasti, linijski, tortni, radar, mjehurićasti, raspršeni

i graf sa svijećama. Mogućnosti opisane u 3.2.1 koje bazna Android biblioteka

podržava su dostupne i u ovoj razvijenoj React Native biblioteci.

28

4.2 Arhitektura

4.2.1 Struktura projekta

Razvijena biblioteka je strukturirana po uzoru na druge React Native biblioteke

koje sadrže nativne komponente. Ta struktura je prikazana na Slika 14.

Slika 14 Struktura direktorija razvijene biblioteke

Iz strukture je vidljivo da projekt ima android direktorij. On sadrži projekt za

nativni Android React Native paket koji će detaljnije biti opisan u 4.2.2. Budući da je

biblioteka namijenjena samo za Android aplikacije, ne postoji ios direktorij u kojem bi

se nalazio kod za nativni iOS paket. U lib direktoriju se nalazi sučelje vidljivo iz

JavaScripta i ono će biti opisano u 4.2.3. Glavni ulaz u biblioteku, sučelje koje je

dostupno kada se uključi biblioteka u neki projekt, je datoteka index.android.js.

Biblioteka je također strukturirana na način da se koristi NPM za upravljanje

paketima i objavljivanje biblioteke. U datoteci package.json se nalazi sva

konfiguracija o ovoj biblioteci kao i konfiguracija o drugim bibliotekama koje su

potrebne kako bi se razvijena biblioteka mogla instalirati.

Za opis projekta, koji je prikazan na GitHub repozitoriju, koristi se datoteka

README.md. Datoteka sadrži «markdown» sintaksu. Markdown sintaksa je

jednostavan način da se formatira tekst, dodaju slike, naprave liste i sl. Sintaksa se

sastoji od običnog teksta sa pokojim «#», «*» ili nekim drugim predefiniranim

oznakama koje pojedine web stranice znaju parsirati i čitljivo prikazati.

29

4.2.2 Android React Native paket

Android React Native paket je poveznica između React JavaScript komponenti

definiranih u lib direktoriju i nativne Android biblioteke za grafove MPAndroidChart.

Paket se nalazi u android direktoriju i sadrži nativan Java kod biblioteke.

Projekt je strukturiran kao klasičan Java projekt s Gradle alatom za

automatiziranu izgradnju projekta. U gradle postavkama je definiran naziv projekta,

verzija i sve biblioteke o kojima projekt ovisi i koje su potrebne kako bi se projekt mogao

prevesti i izgraditi. Da bi se ovaj projekt mogao izgraditi u gradle postavkama su

uključeni projekti: Android, ReactNative i MPAndroidChart.

U nastavku je opisana struktura Java koda nativnog paketa koja je prikazana

na Slika 15.

Slika 15 Hijerarhijska struktura React Native paketa

Paket com.github.reactNativeMPAndroidChart enkapsulira sav Java

kod od kojeg se ova biblioteka sastoji. Svaki nativan React Native paket mora imati

razred koji nasljeđuje ReactPackage i koji se koristi kako bi se paket mogao

registrirati u aplikaciji koja ga koristi. Razred MPAndroidChartPackage nasljeđuje

30

taj razred i u njemu su registrirani svi nativni menadžeri pogleda koje biblioteka

implementira.

4.2.2.1 Java paket charts

Paket charts enkapsulira sve menadžere nativnog pogleda koji predstavljaju

jednu React komponentu, odnosno jedan graf. Na primjer, <LineChart /> je jedna

od 7 React komponenti koje biblioteka omogućuje i menadžer pogleda koji predstavlja

tu komponentu na nativnoj strani je LineChartManager. Menadžer pogleda ima

metode s kojima se povezuju atributi komponente iz JavaScripta s nativnim pogledom.

Preko atributa se nativnoj komponenti prenosi konfiguracija komponente, razni podaci

i informacije o tome što komponenta treba raditi. Kako se povezuju atributi iz

JavaScripta i metode menadžera pogleda opisano je u 2.2.4.1.

Grafovi dijele neke zajedničke konfiguracije koje se mogu primijeniti na sve ili

na dio grafova. Kako se metode povezivanja konfiguracije ne bi ponavljale i kopirale u

svaki menadžer pogleda, napravljena je hijerarhijska struktura razreda i zajedničke

metode su implementirane u nadrazredima, dok su u krajnjim razredima

implementirane samo specifične metode za pojedini graf.

Razred ChartBaseManager je menadžer pogleda zajednički svim grafovima i

on implementira zajedničke metode kao što su: animacija, legenda, opis, pozadinska

boja i dr. Slično BarLineChartManager je zajednički za linijski, stupčasti, raspršeni

i graf sa svijećama. Kompletna hijerarhija je prikazana na prethodnom dijagramu.

Krajnji menadžeri pogleda koji predstavljaju React komponente su obojani tamno

plavom bojom, dok su svijetlo plavom obojani zajednički apstraktni razredi i oni nemaju

React komponente koje bi ih predstavljale.

4.2.2.2 Java paket utils

Paket utils sadrži pomoćne razrede koji se koriste u drugim razredima kako

bi se odvojila logika koja ne spada u menadžere pogleda, a koja se treba koristiti na

više mjesta.

31

Razred BridgeUtils je pomoćni razred sa statičnim metodama koji služi kako

bi se podaci lakše pretvorili iz podataka koji dolaze iz React komponenti u podatke koji

su korisni u nativnom kodu za postavljanje konfiguracije. Neke od metoda su:

• validate - provjerava da li je određeni atribut pravog tipa

• convertToStringArray – pretvara iz ReadableArray u obično polje

• parseTypeface – parsira ime fonta i stil u Java Typeface razred

Razred ChartDataSetConfigUtils je pomoćni razred koji služi kako bi se

objedinilo parsiranje i postavljanje zajedničke konfiguracije vezane uz skupove

podataka.

4.2.3 React Native sučelje

React Native sučelje definira atribute i tipove atributa koji su dostupni kroz React

komponente. Atributi u sučelju moraju odgovarati svim @ReactProp anotacijama

metoda u nativnim menadžerima pogleda. Na primjer, ako je u sučelju definirano da

komponenta ima atribut animation, onda nativni menadžer pogleda te komponente

mora imati metodu koja se poziva kada se atribut animation promijeni. U sučelju,

prikazanom na Slika 16, je definirano da je atribut animation objekt koji se sastoji od

4 druga atributa tipa number i string.

Slika 16 Definiranje atributa animation u lib/ChartBase.js datoteci

U package.json je kao glavna datoteka navedena index.android.js

datoteka. To znači da kada programeri uvedu biblioteku u svoj kod, dobivaju ono što

ta datoteka izvozi (engl. exports). Iz tog razloga glavna datoteka daje reference na sve

React komponente grafova koje biblioteka implementira.

U lib direktoriju se nalazi JavaScript kod ove biblioteke. Tamo se nalaze React

komponente grafova i pomoćne datoteke za definiciju sučelja. Hijerarhija sučelja je

32

slična kao i u nativnom paketu kako bi se izbjeglo definiranje istih atributa u svakom

sučelju. Za razliku od Jave, ovdje nije bilo načina da se pomoću nasljeđivanja definira

sučelje. Razlog tome je što se atributi komponente definiraju u propTypes objektu

unutar objekta sučelja. Da se izbjegne definiranje istih atributa u svakom sučelju,

korišten je spread operator koji je novitet u ES7 (ECMAScript 7) specifikaciji. Na liniji

14 na Slika 17 je prikazano kako se atributi baznog sučelja ChartBase dodaju u

sučelje RadarChart komponente pomoću spread operatora. Operator će svaki

atribut u ChartBase.propTypes objektu učiniti dostupnim ovom sučelju.

Slika 17 Korištenje spread operatora u RadarChart komponenti

4.3 Objavljivanje biblioteke

Biblioteku je potrebno objaviti kako bi mogla biti korištena u drugim projektima.

Izvorni kod biblioteke je objavljen na GitHubu na sljedećoj stranici:

https://github.com/mskec/react-native-mp-android-chart

GitHub je web bazirana usluga koja nudi udomljavanje git repozitorija. Osim što

omogućuje prikaz javnih Git repozitorija svima putem web korisničkog sučelja,

omogućuje i mogućnost upravljanja repozitorijima njihovim vlasnicima. Također nudi

mogućnosti kolaboracije s drugim korisnicima na projektima putem mogućnosti kao što

su: praćenje bugova, upravljanje zadacima, upravljanje zahtjevima za novim

mogućnostima i wiki sustavom za dokumentiranje projekta.

GitHub je najpopularniji i najveći servis za udomljavanje repozitorija otvorenog

koda. U travnju 2016. godine su imali preko 14 milijuna korisnika i preko 35 milijuna git

repozitorija od kojih je većina otvorenog koda i javno dostupna.

33

4.3.1 Licenca

Pod kojom licencom je biblioteka napravljena direktno utječe na to hoće li se

koristiti u nekom projektu ili ne. Ako biblioteka nije objavljena pod licencom otvorenog

koda, nego pod licencom pod kojom autor zadržava sva prava, vjerojatno neće biti

poželjna za korištenje u projektima.

Licence otvorenog koda [9] su licence koje se pridržavaju definicija otvorenog

koda. Ukratko, one omogućuju softveru da se besplatno koristi, modificira i dijeli.

Postoji puno licenci otvorenog koda, najpopularnije su:

• Apache License 2.0

• MIT license

• GNU General Public License (GPL)

• BSD 3-Clause license

• Mozilla Public License 2.0

Ova biblioteka je objavljena pod MIT licencom kako bi se svima omogućilo

besplatno korištenje i nadograđivanje biblioteke.

MIT licenca je licenca otvorenog koda nastala na Massachusetts Institute of

Technology. Licenca stavlja vrlo limitirane restrikcije na korištenje softvera i stoga je

odlična za korištenje u projektima koji imaju drugačije licence. Provedeno je

istraživanje repozitorija na GitHubu 2015. godine i MIT licenca je najčešće korištena

licenca u javnim repozitorijima.

4.3.2 NPM

Samo objavljivanje biblioteke na GitHubu nije dovoljno kako bi ju netko počeo

koristiti. Potrebno je omogućiti što lakšu integraciju u React Native projekte. React

Native projekti koriste NPM za upravljanje ovisnostima o drugim bibliotekama, te je

stoga i ova biblioteka objavljena putem NPM-a.

NPM [10] (node package manager) je menadžer paketa primarno za Node.js

okruženje, ali se koristiti i za druga JavaScript okruženja. Nezamjenjiv je alat u razvoju

JavaScript projekata. Omogućuje automatski dohvat, instaliranje i lako upravljanje

34

paketima i njihovim verzijama. NPM udomljava preko 300.000 paketa i mjesečno ima

u prosjeku preko 4,751 milijarde preuzimanja raznih paketa.

Na NPM-u se može objaviti bilo koji direktorij koji sadrži package.json

datoteku. Datoteka sadrži informacije o paketu, njegovim ovisnostima, glavnoj datoteci

paketa i ostalim datotekama koje projekt sadrži. Najvažnije i jedine informacije koje su

obavezne su atributi: ime paketa (name) i verzija (version). Ti atributi zajedno tvore

jedinstveni identifikator paketa. Ime paketa je ime koje će se koristiti pri instalaciji. Ime

ove biblioteke je:

react-native-mp-android-chart

Verzija je drugi bitan atribut. Svako novo objavljivanje biblioteke dolazi s

podizanjem verzije. Verzija slijedi semver specifikaciju MAJOR.MINOR.PATCH. Major

verzija se podiže kada se uvedu API promijene koje nisu kompatibilne s prethodnom

verzijom. Minor je verzija koja se podiže kada se dodaju nove funkcionalnosti koje su

kompatibilne, a patch se podiže kada se popravljaju bugovi koji su kompatibilni sa

starim verzijama. Trenutna verzija biblioteke, objavljena 04.07.2016, je 0.0.4.

Objavljivanje paketa na NPM-u sastoji se od 2 koraka. Prvi korak je registracija

na službenoj stranici https://www.npmjs.com/ i prijava u NPM CLI na lokalnom

računalu. Drugi korak je pokretanje naredbe za objavljivanje:

npm publish

Naredba će sve u trenutnom direktoriju smatrati dijelom paketa ukoliko datoteke

ili direktoriji nisu navedeni u .gitignore ili .npmignore datotekama. Sve navedeno

u tim datotekama neće biti objavljeno. Svaki objavljeni paket ima svoju stranicu,

stranica ovog paketa je:

https://www.npmjs.com/package/react-native-mp-android-chart

35

5. Mobilna aplikacija koja demonstrira upotrebu biblioteke

Razvijena je mobilna aplikacija koja demonstrira upotrebu biblioteke. Aplikacija

je u potpunosti napisana u React Nativeu. Cilj aplikacije je omogućiti zainteresiranim

programerima da vide kako se biblioteke uključuje u projekt i da vide kako se grafovi

koriste u praksi. Također aplikacija demonstrira mogućnosti biblioteke i vizualizira

kakvi grafovi se mogu napraviti.

5.1 Dodavanje i korištenje razvijene biblioteke

GitHub repozitorij aplikacije s izvornim kodom i poveznica za preuzimanje APK-

a se nalazi na adresi:

https://github.com/mskec/react-native-mp-android-chart-example

Razvijena biblioteka se uključuje u projekt kao NPM ovisnost naredbom:

npm install react-native-mp-android-chart –save

Naredba će preuzeti datoteke biblioteke i omogućiti korištenje paketa unutar

JavaScripta. Budući da biblioteka sadrži nativan kod za Android, potrebno je napraviti

dodatne koraka kako bi Java kod bio dostupan nativnoj aplikaciji pri prevođenju.

Prevođenje aplikacije se odvija putem gradle automatskih zadataka. U gradle

datotekama se definiraju nativne ovisnosti potrebne za prevođenje.

U android/settings.gradle datoteci je potrebno dodati informaciju o

lokaciji nativnog koda biblioteke, a u android/app/build.gradle datoteci je

potrebno dodati informaciju da se nativni paket koristi pri prevođenju.

Zadnji korak prije nego se razvijena biblioteka može koristit je dodati nativan

paket biblioteke naziva MPAndroidChartPackage u MainActivity.java ove

aplikacije. Paket se dodaj u metodu getPackages koja vraća polje svih nativnih

paketa koje ova aplikacija koristi.

Jednom kada su svi prethodni koraci napravljeni, React komponente razvijene

biblioteke se mogu koristiti. Reference na React komponente grafova se dobivaju na

36

način da se uvedu (engl. import) u svaku datoteku u kojoj se koriste. Sljedeća linija

koda na Slika 18 uvodi CandleStickChart komponentu:

Slika 18 Linija koda koja uvodi CandleStickChart komponentu

Na Slika 19 je prikazano kako se CandleStickChart komponenta koristi, na

isti način se i komponente ostalih grafova koriste. U primjeru se samo predaju podaci

preko data atributa, moguće je podesiti još puno drugih postavki preko drugih atributa.

Neki od atributa koji su dostupni su: animation, xAxis, yAxis, legend i dr.

Slika 19 Primjer korištenja CandleStickChart komponente

5.2 Opis ekrana

Početni ekran aplikacije je jednostavna lista ostalih ekrana. Pritiskom na jednu

od stavki liste, otvara se ekran s primjerom. Izgled ekrana je prikazan na Slika 20.

Na Slika 21 je prikazan primjer izgleda linijskog površinskog grafa. Iz primjera

je vidljivo da se linije mogu imati različitu debljinu, boju, a mogu biti i isprekidane. Točke

grafa mogu biti dodatno označene kružićima raznih boja i veličina.

37

Slika 20 Ekran s listom primjera

Slika 21 Primjer linijskog grafa

Primjer izgleda jednostavnog stupčastog grafa je prikazan na Slika 22. Tamno

označen stupac je onaj kojeg korisnik odabere dodirom kako bi ga istaknuo.

Na Slika 23 je prikazan primjer naslaganog stupčastog grafa. To je graf koji u

jednom stupcu može imati više vrijednosti naslagane jedna na drugu. Ovaj primjer

pokazuje kako se može vizualizirati zarada određenih odjela neke tvrtke. Svaki odjel

ima jedan segment u stupcu, a cijeli stupac predstavlja zaradu tvrtke u tom tromjesečju.

38

Slika 22 Primjer stupčastog grafa

Slika 23 StackedBarChart primjer

Na Slika 24 je prikazan tortni graf koji je u ovom slučaju i prstenasti graf zbog

praznine u sredini. Veličina praznine je u potpunosti konfigurabilna. U sredini se može

postaviti unijeti tekst. Graf ne mora predstavljati cijeli krug, već je veličina kuta kojeg

vrijednosti predstavljaju konfigurabilan, na primjeru je krug od 350 stupnjeva. Također

se može vidjeti da je font legende i opisa drugačiji nego na drugim do sada prikazanim

grafovima.

Mjehurićasti graf je prikazan na Slika 25. Unutar mjehurića je prikazana njihova

veličina i različiti skupovi podataka su različite boje. Na inicijalno iscrtavanje grafa

postoji animacija u kojoj mjehurići iz pozicije (0, 0) dolaze do svoje konačne pozicije

ovisne o njihovim vrijednostima.

39

Slika 24 Primjer tortnog grafa

Slika 25 Primjer mjehuričastog grafa

Primjer raspršenog grafa je prikazan na Slika 26. Prikazana su 3 skupa

podataka, svaki sa svojom oznakom. Na primjeru je pokazan: krug, kvadratić i X.

Ostale dostupne oznake su: trokut, križ, kapica gore i kapica dolje. Boja oznake je

konfigurabilna, na primjeru je rub kruga tamnije plave boje od sredine.

Na Slika 27 je prikazan primjer radar grafa. Prikazana su 3 skupa podatak, svaki

označen posebnom bojom. Površina koju svaki skup zatvara je popunjena istom

bojom. Gustoća linija se također može prilagođavati po potrebi.

40

Slika 26 Primjer raspršenog grafa

Slika 27 Primjer radar grafa

Graf sa svijećama je prikazan na Slika 28. Taj graf se obično koristi kod

prikazivanja financijskih podatak. Iz jedne svijeće se može iščitati 5 podataka: početna,

završna, maksimalna i minimalna. Boja svijeće ovisi o tome da li je početna cijena veća

od završne. Ako je cijena veća Ovaj primjer prikazuje kretanje cijene dionice Applea

kroz jedan period od 10 tjedana, svaka svijeća je jedan dan. Na primjeru su također

prikazane horizontalne i vertikalne limit lines. Horizontalne označavaju najvišu i najnižu

cijenu u prikazanom periodu, označene su crvenom bojom. Vertikalne linije, označene

tamno sivom bojom, pojavljuju se nakon 5 svijeća i predstavljaju jedan tjedan.

41

Slika 28 Primjer grafa sa svijećama

5.3 Izgradnja aplikacije (.apk)

Zahvaljujući već definiranim gradle zadacima koji dolaze uz radni okvir,

izgradnja aplikacija i pakiranje u APK (Android application package) je jednostavna i

obavlja se kroz nekoliko naredbi.

Android zahtjeva da sve aplikaciju budu digitalno potpisane s certifikatom prije

nego mogu biti instalirane i distribuirane preko Google Play Storea. Proces

potpisivanje se sastoji od generiranje certifikata i podešavanja nekoliko postavki kako

bi Android paket bio svjestan certifikata s kojim će biti potpisan. Certifikat je jedinstven

po aplikaciji i svaka nadogradnja aplikacija mora biti potpisana s istim certifikatom.

Naredba za generiranje certifikata je:

keytool -genkey -v -keystore my-release-key.keystore

-alias my-key-alias -keyalg RSA -keysize 2048 -

validity 10000

Generirani certifikat je potrebno staviti u android/app direktorij. Potom je

potrebno dodati gradle varijable o imenu certifikata, aliasu i lozinki u

android/gradle.properties datoteku. Primjer je prikazan na Slika 29.

42

Slika 29 Gradle varijable s podacima o certifikatu

Nakon toga je potrebno dodati postavke o potpisivanju aplikacije u gradle

postavke vezane uz izgradnju aplikacije. Postavke se nalaze u

android/app/build.gradle datoteci. S tim postavkama se procesu izgradnje

daje do znanja da se koristi digitalno potpisivanje aplikacije kada se izgrađuje verzija

za produkcija. Na Slika 30 je prikazano kako treba urediti datoteku s postavkama.

Slika 30 Postavke o potpisivanju produkcijskog paketa

Na kraju ostaje zadnji korak sama izgradnja aplikacije i paketa za distribuiranje.

Izgradnja je jednostavna s već predefiniranim gradle zadatkom:

./gradlew assembleRelease

Taj gradle zadatak će prevesti sam nativan Java kod u izvršni kod i zapakirati

sav JavaScript potreban za rad aplikacija u generirani APK. Generirani APK se nalazi

na sljedećoj lokaciji android/app/build/outputs/apk/app-release.apk.

43

Dodatni korak kojeg je potrebno napraviti kada se ručno distribuira APK

aplikacije je odobriti instaliranje aplikacija iz nepoznatih izvora. Postavka za to se

nalazi u standardnim Android postavkama: Settings -> Security -> Unknown

sources.

44

Zaključak

Razvoj aplikacija za više platformi će i dalje biti jedan od problema s kojim se

programeri suočavaju. React Native je vrlo dobro i obećavajuće rješenje tog problema.

Možda zvuči kompliciran na prvi pogled, ali jednom kada se usvoje njegovi koncepti,

razvoj postaje brz i lak. Mogućnost primjenjivanja istih koncepata za iOS i Android

razvoj aplikacije i dijeljenje komponenata i poslovne logike, ga čini vrlo poželjnom

tehnologijom za korištenje. Za razliku od ostalih tehnologija koje omogućavaju razvoj

aplikacija za više platformi, React Native je po performansama daleko najbolji i ne

zaostaje za čisto nativnim aplikacijama.

Kvalitetna biblioteka za izradu grafova, koja nudi veliku konfigurabilnost, je

kompleksna i njezin razvoj je dugotrajan proces. Zato je razvijena React Native

biblioteka koja koristi već razvijenu Android biblioteku. Najveći izazov pri proučavanju

MPAndroidChart nativne biblioteke bila je njezina veličina i velika konfigurabilnost

svakog dijela grafa. Biblioteku je bilo potrebno dobro proučiti na početku kako bi se

razvijena biblioteka dobro strukturirala i pojednostavila upotreba i održavanje.

Jednostavno dodavanje biblioteke putem NPM-a će zasigurno potaknuti njeno

korištenje u React Native aplikacijama. Jedna mana biblioteke je mogućnost korištenja

samo u Android React Native aplikacijama zbog toga što je pozadinska biblioteka

napravljena za njega.

Objavljivanje biblioteke na GitHubu će zasigurno privući zainteresirane

suradnike (engl. contributers) koji će sudjelovati u njezinom daljnjem razvoju. Daljnji

razvoj uključuje održavanje funkcionalnosti u skladu s MPAndroidChart bibliotekom,

kako se ona i dalje razvija, tako će se razvijati i React Nativea biblioteka. Također je

moguće da će se naći zainteresirani suradnici koji će omogućiti korištenje biblioteke u

iOS aplikacijama, čime će razvijena biblioteka još više dobiti na značaju.

45

Literatura

[1] Xamarin, https://xamarin.com, 09.06.2016.

[2] Cordova, https://cordova.apache.org, 12.06.2016.

[3] PhoneGap, http://phonegap.com, 12.06.2016.

[4] Ionic, http://ionicframework.com, 12.06.2016.

[5] React, https://facebook.github.io/react, 23.06.2016.

[6] React Native, https://facebook.github.io/react-native, 24.06.2016.

[7] Telerik UI charts, http://www.telerik.com/android-ui/chart, 15.06.2016.

[8] MPAndroidChart, https://github.com/PhilJay/MPAndroidChart, 14.06.2016.

[9] Open Source Initiative, https://opensource.org, 03.07.2016.

[10] NPM, https://docs.npmjs.com, 02.07.2016.

46

Sažetak

Mobilne platforme koriste različite tehnologije u kojima se razvijaju aplikacije za

njih što predstavlja financijski i vremenski trošak. Rješenje tog problema je korištenje

tehnologija s kojima je moguće razvijati aplikacije za više platformi. React Native je

jedna takva tehnologija. Jedan od funkcijskih zahtjeva koji se mogu pojaviti je prikaz

grafova i tehnologija to mora omogućavati. Kvalitetna biblioteka za prikaz grafova je

kompleksna i njezin razvoj zahtjeva puno vremena. Zahvaljujući mogućnostima

proširenja React Nativea, nije bilo potrebe razvijati novu biblioteku, već je korištena

popularna biblioteka za nativne Android aplikacije MPAndroidChart. Razvijena

biblioteka je sučelje između nativne MPAndroidChart biblioteke i React Nativea. Da bi

se demonstrirale mogućnosti biblioteke i način korištenja, razvijena je Android

aplikacija.

47

Summary

Mobile platforms use different technologies for development of applications

which represents financial and time expense. Solution to the problem is using

technologies which allow development of cross platform applications. React Native is

one such technology. One of feature request could be ability to display graphs and

technology must enable that. Quality library for displaying graphs is complex and time

consuming to develop. Thanks to extensibility of React Native, it was possible to reuse

native Android chart library MPAndroidChart. Developed library is interface between

native library MPAndroidChart and React Native. To demonstrate features of library

and the way it is used, Android application was developed.

48

Skraćenice

• JSX JavaScript syntax extension

• XML Extensible Markup Language

• HTML HyperText Markup Language

• DOM Document Object Model

• JVM Java Virtual Machine

• NPM Node Package Manager

• CSS Cascading Style Sheets

• APK Android Application Package

• ES7 ECMAScript 2016