Smetanova ulica 172000 Maribor, Slovenija

Simon Grivc

Razvoj in implementacija hibridnih mobilnih aplikacij

Diplomsko delo

Sevnica, avgust 2016

Simon Grivc

Razvoj in implementacija hibridnih mobilnih aplikacij

Diplomsko delo

Študent: Simon Grivc

Študijski program: visokošolski, računalništvo in informacijske tehnologije

Mentor: doc. dr. Milan Ojsteršek, univ.dipl.inž. el.

i

ii

ZAHVALA

Zahvaljujem se mentorju doc. dr. Milanu Ojsteršku za pomoč pri ustvarjanju diplomske naloge, za njegovo strokovnost in napotke.

Posebej bi se rad zahvalil tudi svojima staršema, ki sta mi omogočila študij, ter vsem, ki some vseskozi spodbujali pri mojem delu in izobraževanju.

iii

RAZVOJ IN IMPLEMENTACIJA HIBRIDNIH MOBILNIH APLIKACIJ

Ključne besede: Hibridne aplikacije, Ionic, Cordova, AngularJS, mobilne naprave

UDK: 621.397.7-026.26(043.2)

Povzetek

Namen diplomske naloge je na konkretnih primerih predstaviti prednosti in slabostihibridnih mobilnih aplikacij. Osredotočili smo se predvsem na razvoj aplikacij s pomočjoogrodja Apache Cordova ter ogrodja Ionic. Implementirali smo poslovno hibridnoaplikacijo mobileCRM, ki uporablja povezavo z podatkovno bazo ter domorodnefunkcionalnosti naprave. Ugotovili smo, da se hibridne aplikacije v veliko primerih lahkokosajo, če ne celo prekosijo domorodne aplikacije v hitrosti izdelave, več-platformnosti teruporabniški izkušnji, vendar imajo, za zdaj, to slabost, da so zelo potratna pri sistemskihsredstvih, ki jih porabijo več kot domorodne aplikacije.

iv

DESIGN AND IMPLEMENTATION OF HYBRID MOBILE APPLICATION

Key words: Hybrid apps, Ionic, Cordova, AngularJS, mobile devices

UDK: 621.397.7-026.26(043.2)

Abstract

The aim of this thesis is to present on concrete examples the advantages and

disadvantages of hybrid mobile applications. We focused mainly on the development of

applications using Apache Cordova and Ionic framework. We implemented commercial

hybrid application mobileCRM that uses database connection and the native functionality

of the device. We have found that hybrid applications in many cases can match, if not

surpass native applications in production speed, multiplatform and user experience, but

they have (for now) the disadvantage that they are more wasteful in system resources

than native applications.

v

KAZALO

1 UVOD....................................................................................................................1

2 HIBRIDNE APLIKACIJE............................................................................................3

2.1 Zgodovina hibridnih aplikacij..............................................................................3

2.2 Primerjava funkcionalnosti hibridnih, domorodnih in spletnih aplikacij.................4

2.3 Obstoječa ogrodja za izdelavo hibridnih aplikacij.................................................5

3 UPORABLJENE TEHNOLOGIJE..................................................................................8

3.1 Node.js.............................................................................................................8

3.2 Apache Cordova................................................................................................9

3.3 Ionic...............................................................................................................11

3.4 Angular JS.......................................................................................................13

4 APLIKACIJA MOBILE CRM......................................................................................14

4.1 Načrtovanje aplikacije.....................................................................................14

4.2 Razvoj aplikacije..............................................................................................16

4.2.1 Struktura aplikacije.........................................................................................17

4.2.2 Prijavno okno in avtentifikacija........................................................................18

4.2.3 Modul MojCRM.................................................................................................20

4.2.4 Modul stranke.................................................................................................27

4.2.5 Modul stranka.................................................................................................30

4.2.6 Podatkovna baza.............................................................................................31

4.2.7 Razhroščevanje in izvoz aplikacije za sistem Android......................................32

4.3 Povzetek ugotovitev in ocena..........................................................................33

5 PRIHODNOST RAZVOJA HIBRIDNIH APLIKACIJ........................................................34

6 ZAKLJUČEK..........................................................................................................35

7 VIRI....................................................................................................................36

vi

KAZALO SLIK

SLIKA 1: LOGOTIP NODE.JS (VIR: [12]).......................................................................8

SLIKA 2: LOGOTIP OGRODJA APACHE CORDOVA (VIR: [5])...........................................9

SLIKA 3: LOGOTIP OGRODJA IONIC (VIR: [6])............................................................11

SLIKA 4: ANGULARJS LOGOTIP (VIR: [13])................................................................13

SLIKA 5: CRM HERMES D.O.O..................................................................................14

SLIKA 6: STRUKTURA IONIC PROJEKTA.....................................................................17

SLIKA 7: STRUKTURA MAPE "WWW"........................................................................17

SLIKA 8: PRIJAVNO OKNO APLIKACIJE......................................................................18

SLIKA 9: PRIMER POZITIVNEGA ODGOVORA STREŽNIKA...........................................19

SLIKA 10: POGLED MOJCRM (AKTIVNOSTI)...............................................................20

SLIKA 11: LEVI STRANSKI MENI POGLED MOJCRM (AKTIVNOSTI)...............................20

SLIKA 12: MODALNO OKNO ZA DODAJANJE AKTIVNOSTI...........................................21

SLIKA 13: MODALNO OKNO ZA PRIKAZ AKTIVNOSTI.................................................21

SLIKA 14: DESNI MENI POGLED MOJCRM..................................................................22

SLIKA 15: LEVI MENI POGLED MOJCRM (PRILOŽNOSTI/REKLAMACIJE)........................22

SLIKA 16: PRVI POGLED MODULA STRANKE.............................................................27

SLIKA 17: ISKANJE PO STRANKAH...........................................................................27

SLIKA 18: IZPIS NAJDENIH STRANK.........................................................................28

SLIKA 19: POTEG V LEVO NA STRANKI.....................................................................28

SLIKA 20: PRIKAZ ZEMLJEVID STRANKA...................................................................30

SLIKA 21: NAVODILA ZA POT DO STRANKE...............................................................30

SLIKA 22: MODUL STRANKA....................................................................................31

SLIKA 23: SEZNAM SESTANKOV STRANKE................................................................31

KAZALO TABEL

TABELA 1: PODPRTE FUNKCIONALNOSTI OGRODJA APACHE CORDOVA (VIR: [4])........10

TABELA 2: IONIC KOMPONENTE IN FUNKCIONALNOSTI (VIR: [7])...............................12

vii

Uporabljene kratice:

SDK Software Development Kit (množica programskih orodij za razvoj programske opreme)

API Application Programming Interface (aplikacijski programski vmesnik)

GPS Global Positioning System (globalni navigacijski satelitski sistem)

OS Operacijski sistem

HTML HyperText Markup Language (označevalni jezik za oblikovanje večpredstavnostnih dokumentov)

CSS Cascading Style Sheets (kaskadne stilske podloge)

JS JavaScript (objektni skriptni programski jezik)

SPA Single page application (aplikacija ki se izvaja znotraj ene spletne strani)

SQL Structured Query Language (strukturirani povpraševalni jezik za delo s

podatkovnimi bazami)

UI User interface (uporabniški vmesnik)

Sass Syntactically Awesome Style Sheets (nadgradnja CSS)

CRM Customer relationship management (sistem za upravljanje s strankami)

viii

1 UVOD

Trenutno so v svetu pametnih naprav štirje vodilni operacijski sistemi. Android OS1, Apple

iOS, RIM BlackBerry OS ter Microsoftov Windows Phone. Poleg omenjenih obstaja še

veliko drugih operacijskih sistemov. Za razvoj aplikacij, ki delujejo na teh sistemih smo še

ne dolgo nazaj potrebovali specifična znanja programskih jezikov. Na primer, za razvoj

Android aplikacije smo potrebovali znanje programskega jezika Java, za naprave z iOS

smo potrebovali znanje objective C, za Windows Phone naprave C#. Prav zaradi te

razdrobljenosti sistemov in standardov je postal zanimiv koncept hibridnega razvoja

aplikacij.

Hibridni razvoj aplikacije nam omogoča, da lahko z znanjem ožjega nabora tehnologij, v

našem primeru spletnih tehnologij (HTML2, CSS3, JS4, AngularJS) izdelamo aplikacijo, ki

jo nato lahko izvozimo za večino operacijskih sistemov na trgu. To nam omogoča hitrejši

razvoj, večjo produktivnost ter občutno zmanjšanje stroškov, saj ne potrebujemo več

razvijalcev za vsak operacijski sistem posebej.

V diplomskem delu bomo predstavili trenutno stanje na trgu hibridnih aplikacij. Predstavili

bomo trenutno vodilna ogrodja za izdelavo hibridnih aplikacij ter se še posebej poglobili v

ogrodje Ionic ter Angular. V ogrodju Ionic bomo izdelali aplikacijo mobileCRM5, s katero

bomo testirali tako hitrost izdelave, možnost prilagajanja uporabniškega vmesnika, dostop

do domorodnih funkcij naprav ter povezovanje s strežnikom. S tem želimo odkriti možne

prednosti oziroma zadržke pri izdelavi hibridnih aplikacij.

V prvem poglavju se bomo poglobili v ozadje hibridnih aplikacij, pogledali bomo zgodovino

in že obstoječe raziskave oziroma rešitve. Analizirali bomo njihove rezultate ter pogledali

zakaj so hibridne aplikacije v zadnjem času postale tako priljubljene. Pogledali bomo tudi

katera ogrodja se trenutno uporabljajo za izdelavo hibridnih aplikacij in na kratko

predstavili vodilna ogrodja.

1 OS - Operacijski sistem2 HTML - HyperText Markup Language (označevalni jezik za oblikovanje večpredstavnostnih dokumentov)3 CSS - Cascading Style Sheets (kaskadne stilske podloge)4 JS - JavaScript (objektni skriptni programski jezik)5 CRM - Customer relationship management (sistem za upravljanje s strankami)

1

V tretjem poglavju bomo bolj podrobno predstavili ogrodja oziroma tehnologije katere smo

uporabili za razvoj naše hibridne aplikacije. Torej predstavili bomo Node.js, Apache

Cordova, Ionic ter AngularJS.

V četrtem poglavju si bomo začrtali ter izdelali hibridno aplikacijo mobileCRM s pomočjo

ogrodja Ionic in Apache Cordova. Na koncu bomo povzeli ugotovitve iz naše izdelane

aplikacije, ter podali oceno.

V petem poglavju bomo pogledali prihodnost razvoja hibridnih aplikacij s prihodom

Angular2 ter Ionic2.

V zadnjem poglavju bomo podali splošno oceno hibridnemu načinu izdelave aplikacij

glede na ugotovitve ter testiranje.

2

2 HIBRIDNE APLIKACIJE

2.1 Zgodovina hibridnih aplikacij

Hibridne aplikacije so mešanica domorodnih in spletnih aplikacij, saj so napisana v

HTML5 kot spletne aplikacije vendar jih lahko tudi namestimo na napravo in lahko

dostopamo do strojnih komponent naprave kot domorodne aplikacije. Z drugimi besedami,

hibridne aplikacije so spletne aplikacije, ki gostujejo znotraj domorodne aplikacije, katera

uporablja spletni pogled (ang. Web View) za procesiranje kode v JavaScriptu. Spletni

pogled je brskalnik znotraj mobilne aplikacije. [1 6 ]

Za začetek modernega razvoja hibridnih aplikacij štejemo leto 2009 z razvojem ogrodja

PhoneGap. Ogrodje je bilo prvič razvito na dogodku iPhoneDevCamp v San Francisku. V

letu 2011 je Adobe zagnal nov projekt z naslovom Apache Cordova. Zgodnje verzije

PhoneGapa so potrebovale Applov računalnik za izdelavo iOS aplikacij in Windows

računalnik za izdelavo Windows aplikacij. Od Septembra 2012 PhoneGap omogoča

programerjem da svojo kodo naložijo v prevajalnik v oblaku, kateri generira aplikacije za

različne platforme. [4]

Podjetje Facebook je v oktobru 2011 izdalo tri nove verzije svoje aplikacije in sicer za

naprave iPhone, iPad in Android. Vse tri verzije so bile izdelane s takrat novim hibridnim

pristopom izdelave mobilnih aplikacij. David Fetterman je takrat pojasnil, da so se za

hibridni pristop odločili zato, ker imajo njihovi zaposleni veliko več znanja iz spletnih

tehnologij, kot pa iz domorodnih programskih jezikov mobilnih naprav (Java, objective-C).

Podobno kot Facebook se je tudi Netflix, Ameriško podjetje, ki se ukvarja s predvajanjem

vsebin na zahtevo odločilo, da bo svoje aplikacije za naprave kot so mobilne naprave,

pametna televizija, igralne naprave itd. izdelovalo s hibridnim pristopom. [ 1 ]

Čeprav je nato v septembru 2012 Mark Zuckerberg označil preveliko zanašanje na

HTML5 kot največjo napako podjetja saj se je aplikacija zaradi povečanja popularnosti

začela odzivati prepočasi in ni več ponujala optimalne uporabniške izkušnje. Facebook je

sprejel odločitev, da se bo vrnil na domorodne aplikacije in se osredotočil na hitrost. Toda

zavedati se moramo, da je Facebook podjetje s praktično neomejenimi sredstvi, ki si ne

more privoščiti par sekundnega zaostanka ob kliku na gumb osveži ter, da so od takrat

3

minila že dolga štiri leta, kar v programerski industriji pomeni veliko sprememb, novih

ogrodij, standardov. [ 8 ]

V letu 2015 je podjetje OutSystems v raziskavi ugotovilo, da tretjina (33%) podjetij daje

prednost razvoju hibridnih aplikacij, sledijo jim domorodne aplikacije z 29% ter z 22%

spletne aplikacije z odzivnim spletnim oblikovanjem. V večini anket sta si hibridni in

domorodni pristop k izdelavi aplikacij zelo blizu po procentih vprašanih. [ 2 ]

2.2 Primerjava funkcionalnosti hibridnih, domorodnih in spletnih

aplikacij

Zakaj so hibridne aplikacije postale tako priljubljene, čeprav v nekaterih primerih ne

ponujajo tako dovršene uporabniške izkušnje kot domorodne aplikacije? Verjetno zato, ker

ponujajo nekakšno mešanico domorodnih in spletnih aplikacij. Veliko je odvisno tudi od

dane situacije ter namena aplikacije.

Poglejmo si nekatere prednosti in slabosti uporabe posameznega tipa aplikacije:

Dostop do funkcionalnosti naprave:

Tako hibridni kot domorodni način omogočata dostop do funkcionalnosti naprave, vendar

se pri hibridnem pristopu lahko zgodi, da se do katere od specifičnih funkcionalnosti ne

more dostopati. Medtem spletne aplikacije ne omogočajo dostopa do funkcionalnosti

naprave. [ 3 ]

Hitrost aplikacije:

Hitrost je zagotovo na strani domorodnih aplikacij, saj porabijo v primerjavi s hibridnimi

aplikacijami ter spletnimi aplikacijami znatno manj sistemskih virov. [ 3 ]

Hitrost izdelave:

Hitrost izdelave hibridne aplikacije se lahko primerja z izdelavo spletne aplikacije. Ta je

veliko hitrejša od izdelave domorodnih aplikacij, saj je pri domorodnih aplikacijah potrebno

izdelati za vsak operacijski sistem svojo aplikacijo. [ 3 ]

4

Cena izdelave:

Tudi cena izdelave je na strani hibridnih ter spletnih aplikacij, saj je za njihovo izdelavo

potrebno manj različnih znanj in s tem posledično manjše število razvijalcev. V raziskavah

se je pokazalo, da imajo razvijalci za specifične operacijske sisteme višje plače od

spletnih razvijalcev. [ 3 ]

Uporabniški vmesnik:

Domorodne aplikacije ponujajo značilne uporabniške komponente v posameznem

sistemu, katere zagotovo pripomorejo k boljši uporabniški izkušnji. Hibridne aplikacije ter

spletne aplikacije s pomočjo ogrodij za uporabniški vmesnik dosegajo spoštljiv domoroden

občutek komponent. [ 3 ]

Prenosljivost:

Verjetno največja prednost hibridnih ter spletnih aplikacij je njihova prenosljivost. Medtem

ko domorodne aplikacije delujejo samo na enem sistemu se hibridne ter spletne aplikacije

lahko s pomočjo domorodnih ovojnic prenesejo na večino različnih platform na trgu. [ 3 ]

Vzdrževanje:

Pri vzdrževanju nastane problem pri domorodnih aplikacijah, saj če imamo več različnih

aplikacij na več platformah, je težje vzdrževati kodo in popravke. Pri hibridnih aplikacijah

vzdržujemo eno bazo kode, ki jo nato izvozimo na več različnih platform. Prav tako

delujejo na eni bazi kode spletne aplikacije. [ 3 ]

2.3 Obstoječa ogrodja za izdelavo hibridnih aplikacij

Še ne dolgo tega je bila izdelava hibridnih aplikacij z JavaScriptom zgolj eksperiment.

Ideja, da bi lahko razvijali aplikacije brez specifičnega znanja programskih jezikov kot so

Java in ObjectiveC. Trenutno je na trgu več ogrodij za izdelavo hibridnih aplikacij, katera

so nas pripeljala do tega, da lahko sedaj razvijamo aplikacije s pomočjo znanja spletnih

tehnologij. [10]

Predstavili bomo po našem mnenju trenutno najbolj znanih pet ogrodij med katerimi smo

namenoma izpustili ogrodje Ionic, katerega bomo predstavili v naslednjem poglavju saj ga

bomo uporabili pri izdelavi naših dveh aplikacij.

5

1. Onsen UI6

Onsen UI je relativno novo odprtokodno ogrodje, ki omogoča razvijalcem

programske opreme, da gradijo aplikacije s kombiniranjem domorodno oblikovanih

komponent. Je dosti enostavno za učenje in uporabo in postaja vse večja

konkurenca ogrodju Ionic. Deluje lahko tako z AngularJS kot brez njega in ima

dosti dokumentacije, ki vsebuje tudi nekaj primerov in predlog najbolj uporabljenih

struktur aplikacij. Slabost Onsen UI-ja je ta, da trenutno ponuja le iOS teme,

čeprav za naslednjo verzijo obljubljajo "Material Design" podporo. [10]

2. Framework 7

Zanimivo pri Framework 7 je to, da je 100% neodvisen od zunanjih knjižnic

oziroma ogrodij kot sta na primer Angular ali React in še vedno uspe dostaviti

naravni izgled oziroma občutek aplikacije z vsemi komponentami in animacijami.

Poznavalci spletnih tehnologij HTML, CSS in JavaScript se hitro naučijo uporabljati

ogrodje Framework7. Slabost Framework 7 je ta, da ne vsebuje nobenih orodij za

emulacijo ali pakiranje aplikacije, tako ga moramo kombinirati z Apache Cordovo

ali PhoneGap-om. [10]

3. IntelXDK

Intel XDK je novo orodje in malo drugačno od ostalih. Vključuje celoten spekter

orodij, ki podpirajo razvoj, emulacijo, testiranje, razhroščevanje ter objavo hibridnih

aplikacij. Intel XDK zapakira predlogo aplikacije s pomočjo "app framework". App

framework je odprtokodno JavaScript ogrodje z Intel podporo. App framework

podpira operacijske sisteme IOS, Tizen, Windows Phone, Blackberry in Android.

Intel XDK podpira tudi jQuery mobile, Bootstrap 3 in ogrodje Topcoat UI. [11]

4. Sencha Touch

Sencha Touch je komercialno ogrodje, primerno za podjetja. Sencha ima širok

nabor produktov, ki delujejo z roko v roki z ogrodjem Sencha Touch. Za

posamezne razvijalce je veliko bolj logična izbira ogrodja Ionic, za podjetja pa vodi

Sencha Touch. V središču delovanja platforme je ExtJS, ki je eno najbolj

popularnih JavaScript ogrodij. Sencha Touch vsebuje paket dodatkov in vtičnikov

6 UI - User interface (uporabniški vmesnik)

6

pripravljenih za uporabo, ki za uporabnika izgledajo kot domorodne komponente.

Vsebuje tudi "povleci-spusti" vizualni gradnik aplikacij, na katerem lahko izdelamo

aplikacije. [11]

5. React Native

Kot nam že samo ime ogrodja namigne, React Native gradi aplikacije, ki so

domorodne in ne hibridne, katere poganja spletni pogled. Razvoj kljub temu

poteka v celoti v JavaScript-u in ogrodju React. React Native ni namenjen čistim

začetnikom v spletnem programiranju, a ima to prednost, da je skupnost za

ogrodjem velika in pripravljena pomagati začetnikom pri spoznavanju ogrodja in

vas vodi skozi proces učenja. [10]

7

3 UPORABLJENE TEHNOLOGIJE

3.1 Node.js

Prenesete si ga lahko iz spletne strani: https://nodejs.org/en/

Node.js je originalno napisal Ryan Dahl v letu 2009. Sprva ga je bilo mogoče namestiti

samo na računalnike, ki so uporabljali Linux operacijski sistem. V letu 2011 je bil

predstavljen upravljalnik paketkov npm, ki programerjem poenostavi namestitev,

vzdrževanje in brisanje knjižnic. [12]

Node.js je strežniška rešitev, katero poganja Googlov V8 JavaScript pogon, libUV ter vrsta

vključenih knjižnic. Namenjen je pisanju razširljivih internetnih aplikacij. Samo izvajalno

okolje Node.js ni pisano v JavaScriptu temveč v programskem jeziku C. JavaScript koda,

ki jo to izvajalno okolje izvaja, zgolj pošilja navodila za upravljanje z API-jem7. Dejstvo je,

da je JavaScript današnjim spletnim programerjem precej bližje kot C. Klici funkcij v

Node.js so načeloma vedno asinhroni in vsebujejo funkcijo "callback", katera se izvede,

ko je klic končan. Zato je Node.js primeren za strežniške sisteme kjer potrebujemo hitrost,

razširljivost ter enostavnost pri uporabi. Poglejmo si primer "Živjo svet" v Nodu.js-u. [9]

7 API - Application Programming Interface (aplikacijski programski vmesnik)

8

Slika 1: Logotip Node.js (vir: [12])

var http = require('http');

http.createServer(function (req, res) {

res.writeHead(200, {'Content-Type': 'text/plain'});

res.end('Živjo svet\n');

}).listen(1337, "127.0.0.1");

console.log(Strežnik teče na http://127.0.0.1:1337/');

Psevdokod 1: Živjo svet v Node.js (vir: [ 9 ])

Korporacije, ki uporabljajo Node.js so Microsoft, LinkedIn, Netflix, Walmart, Yahoo,

PayPal, Groupon, GoDaddy in še veliko drugih večjih podjetij. [12]

3.2 Apache Cordova

Prenesete si ga lahko iz spletne strani: https://cordova.apache.org

Namestitev: $ npm install -g cordova

Slika 2: Logotip ogrodja Apache Cordova (vir: [ 5 ])

Apache Cordova (nastala iz PhoneGap), je ogrodje za razvoj mobilnih aplikacij. Prvotni

avtor je bilo podjetje Nitobi, katerega je kasneje v letu 2011 odkupilo podjetje Adobe

Systems. Apache Cordova je bil nato prestrukturiran v lastno podjetje in postal odprto

kodno ogrodje. [ 4 ]

Apache Cordova omogoča razvijalcem programske opreme da zgradijo aplikacije s

pomočjo HTML5, JavaScripta in CSS3 ter jih nato zapakirajo v domorodno ovojnico

oziroma "spletni pogled", kjer preko API-ja dostopajo do domorodnih funkcij naprave.

Apache Cordova vsebuje vtičnike, ki nam omogočajo direktno komunikacijo med strojno

plastjo in uporabnikovo interakcijo z aplikacijo. [ 4 ]

9

Trenutno podprte platforme: Apple iOS, BlackBerry, Google Android, LG webOS, Microsoft

Windows Phone 7&8, Nokia Symbian OS, Tizen, Bada, Firefox OS, Ubuntu Touch. [ 4 ]

Tabela 1: Podprte funkcionalnosti ogrodja Apache Cordova (vir: [ 4 ])

FunkcijaiPhone3GS innovejši

Android

1.0–4.4

Windows

phone

BlackBerry

OS 5.0-6.0+webOS

Ubuntu

Touch

Firefox

OS

Pospreškometer Da Da Da Da Da Da Da

Kamera Da Da Da Da Da Da Da

Kompas Da Da Da ne Da Da Da

Kontakti Da Da Da Da ne ne Da

Datoteke Da Da Da Da ne Da ne

Geolokacija Da Da Da Da Da Da Da

Omrežje Da Da Da Da Da Da Da

Obvestila (zvok,

vibriranje)Da Da Da Da Da Da Da

Shranjevanje Da Da Da Da Da Da Da

10

3.3 Ionic

Prenesete si ga lahko iz spletne strani: https://github.com/driftyco/ionic

Namestitev: $ npm install -g ionic

Ionic je odprto kodni SDK8 za izdelavo hibridnih aplikacij. Zgrajen je na ogrodjih Angular.js

ter Apache Cordova. Ionic zagotovi orodja in storitve, katere potrebujemo za izdelavo

hibridne aplikacije s pomočjo tehnologij HTML5, CSS3, Sass9. Ionic je osredotočen

predvsem na optimizacijo za naprave z zaslonom na dotik. Finalna verzija ogrodja Ionic

1.0 je izšla maja 2015. Trenutno je v beta stanju verzija 2. [ 6 ]

Struktura ogrodja Ionic je MVC (model, pogled, krmilnik), katera nam loči predstavitev

aplikacije od njene logike. Hkrati nam struktura MVC omogoča hitrejše vzdrževanje in

produkcijo ter hitrejše delovanje aplikacije. [16]

Slika 3: Logotip ogrodja Ionic (vir: [ 6 ])

Ionic nam poleg ogrodja za hibridne aplikacije ponuja tudi vrsto drugih orodij:

1. Ionic Lab (Omogoča kreiranje in testiranje iOS in Android verzij drugo ob drugi.).

2. LiveReload (V trenutku osveži aplikacijo, ko se spremeni koda aplikacije.).

3. IonicMarket (Vsebuje predloge in teme, ki pomagajo razvijalcu pri razvoju

aplikacije.).

4. ViewApp (Omogoča predogled aplikacije brez potrebne objave na trgovini za

določeno platformo.).

5. IonicCloud (Storitve in orodja za Ionic aplikacije.).

Ionic ni samo ogrodje CSS temveč tudi Javascript knjižnica. To pomeni, da imamo poleg

vizualnih komponent, ki nam jih ponuja Ionic tudi JavaScript funkcionalnosti, ki delujejo na

8 SDK - Software Development Kit (množica programskih orodij za razvoj programske opreme)9 Sass - Syntactically Awesome Style Sheets (nadgradnja CSS)

11

principu pogled – krmilnik. Naštejmo nekaj komponent CSS ter JavaScript funkcionalnosti.

[7]

Tabela 2: Ionic komponente in funkcionalnosti (vir: [ 7 ])

KOMPONENTE CSS:

1. Header (Glava)

2. Content (Vsebina)

3. Footer (Noga)

4. Buttons (Gumbi)

5. List (Seznam)

6. Cards (Kartice)

7. Forms (Forme)

8. Toggle (Preklop gumbi)

9. Checkbox (Potrditvena polja)

10. Radio Buttons (Radio gumbi)

11. Range (Območni drsniki)

12. Select (Izbirniki)

13. Tabs (Zavihki)

14. Grid (Polje)

15. Utility (Dodatki: Ikone, barve...)

JS:

1. Action Sheet (Akcijski meni)

2. Backdrop (Ozadje)

3. Content (Vsebina)

4. Form Inputs (Vhodi form)

5. Gestures and Events (Geste in

dogodki)

6. Headers/Footers (Glave, noge)

7. Keyboard (Tipkovnica)

8. Lists (Seznami)

9. Loading (Nalaganje)

10. Modal (Modal)

11. Navigation (Navigacija)

12. Platform (Platforma)

13. Popover (Pojavnik)

14. Popup (Pojavnik)

15. Scroll (Drsnik)

16. Side Menus (Stranski meniji)

17. Slide Box

18. Spinner (Nalagalnik)

19. Tabs (Zavihki)

20. Tap & Click (Dotik in klik)

12

3.4 Angular JS

Prenesete si ga lahko iz spletne strani: https://angularjs.org/

Namestitev: $ npm install angular (pri namestitvi Ionic je AngularJS že vključen)

AngularJS ali kot pogosto slišimo le Angular je odprtokodno JavaScript ogrodje za

sprednjo in zadnjo stran aplikacije. Namenjen je predvsem poenostavitvi izdelave aplikacij

SPA 10 ter testiranju le teh. [13]

Dvosmerna povezava podatkov je ena najbolj opaznih prednosti AngularJS. Storitev

$scope zazna spremembe v modelu ter prilagodi pogled HTML preko krmilnika, prav tako

se ob vsaki spremembi v pogledu spremeni model. [13]

10 SPA - Single page application (aplikacija ki se izvaja znotraj ene spletne strani)

13

Slika 4: AngularJs logotip (vir: [13])

4 APLIKACIJA MOBILE CRM

Aplikacija mobile CRM predstavlja mobilno aplikacijo, ki razširja možnosti uporabe

namizne aplikacije CRM podjetja Hermes d.o.o.. Rešitev CRM (Customer Relationship

Management) je namenjena upravljanju odnosov s strankami. V zadnjem obdobju postaja

ena najpomembnejših komponent poslovanja vsakega podjetja, ki se resno loteva

prodaje. [14]

4.1 Načrtovanje aplikacije

Prva stvar, ki jo je bilo potrebno narediti je bilo definiranje funkcionalnosti, katere bo

mobilna aplikacija vsebovala, saj je bilo jasno da vse funkcije CRM-ja ne bi bile logične

oziroma uporabne v mobilni verziji programa. Tako smo prišli do glavnih funkcij katere

mora vsebovati mobilna aplikacija.

1. Avtentifikacija.

2. Pregled aktivnosti:

• Filtriranje.

14

Slika 5: CRM Hermes d.o.o.

• Iskanje po aktivnostih.

• Razvrščanje.

• Prikaz zaključene/nezaključene.

3. Pregled priložnosti in reklamacij:

• Filtriranje.

• Iskanje po aktivnostih.

• Razvrščanje.

• Prikaz zaključene/nezaključene.

4. Pregled strank:

• Iskanje stranke.

• Seznam strank z osnovnimi podatki.

• Možnost direktnega klica stranke.

• Navodila za pot do stranke (google maps api).

5. Dodajanje aktivnosti:

• Dodajanje klica.

• Dodajanje sestanka.

• Dodajanje naloge.

6. Dodajanje priložnosti in reklamacij:

• Dodajanje priložnosti.

• Dodajanje reklamacije.

7. Pogled stranka:

• Osnovni podatki stranke.

• Kontakti.

• Skupine.

• Priložnosti.

• Reklamacije.

• Aktivnosti.

• Zadeve.

• Zapiski.

• Opombe.

8. Pogled aktivnosti.

9. Pogled reklamacije/priložnosti.

10. Dvojezičnost.

15

4.2 Razvoj aplikacije

Potrebne namestitve pred začetkom razvoja:

1. Node.js,

2. Apache Cordova,

3. Ionic.

Ko imamo nameščena vsa potrebna orodja za razvoj lahko začnemo z razvojem

aplikacije. V terminalu se pomaknemo v mapo v kateri bi želeli ustvariti naš projekt ter z

ukazom »ionic start« generiramo nov ionic projekt. Vzamimo primer ukaza:

$ ionic start myApp sidemenu

Zgornji ukaz kreira nov projekt z imenom myApp s predlogo sidemenu. Predloga

sidemenu je ena od treh začetnih predlog, ki jih ponuja Ionic. Te so blank, ki je prazna

predloga, tabs ki je predloga z zavihki ter sidemenu ki je predloga s stranskim menijem.

Sidemenu je dobra začetna predloga zaradi tega, ker že izdela osnovno usmerjanje (ang.

routing) aplikacije.

Ko pogledamo osnovno strukturo aplikacije vidimo, da je zelo podobna strukturi spletne

strani. V mapi www se nahaja celotna aplikacija (slika 7). Mapa www je razčlenjena na

podmape:

1. css (vsebuje css datoteke aplikacije),

2. img (vsebuje slike aplikacije),

3. js (vsebuje javascript datoteke),

obvezne so:

◦ app.js (vsebuje angular app),

◦ controllers.js (vsebuje krmilnike aplikacije),

◦ services.js (vsebuje servise aplikacije),

◦ (neobvezne) constants.js ter translations.js so datoteke, ki smo jih dodali v

našem projektu za konstante ter prevode, saj je aplikacije dvojezična.

16

4.2.1 Struktura aplikacije

17

Slika 6: Struktura ionic projekta

Slika 7: Struktura mape "www"

4.2.2 Prijavno okno in avtentifikacija

Prijavno okno vsebuje 4 vnosna polja, prvo je izbirnik jezika. Tu lahko uporabnik izbere

slovenski oziroma angleški jezik. Nato imamo vnosno polje za uporabniško ime in geslo

ter še vnosno polje za naslov strežnika z API-jem.

Za avtentifikacijo smo izbrali sistem s token-i. Aplikacija ob prijavi pošlje zahtevek http za

avtentifikacijo, ki je prikazan na psevdokodu 2:

$http({ method: 'POST', url: HTTP_CONSTANTS.url.substring(0, HTTP_CONSTANTS.url.length - 4) + 'Token', data: "username=" + name + "&password=" + pw + "&grant_type=password", headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })

Psevdokod 2: Zahtevek Http za avtentifikacijo

18

Slika 8: Prijavno okno aplikacije

Zahtevek je je poslan z metodo POST na naslov, ki ga definiramo v spremenljivki api

naslov. Podatki ki jih pošljemo so username ki je uporabniško ime, password, ki vsebuje

geslo ter grant_type, ki je »password«. V odgovoru nam strežnik vrne napako, če je

prijava nepravilna ali pa pozitiven odgovor, h kateremu je priložen žeton, s katerim bomo

podpisali tudi vsak nasledni zahtevek http.

19

Slika 9: Primer pozitivnega odgovora strežnika

4.2.3 Modul MojCRM

Modul MojCRM je prvi pogled, ki ga vidi uporabnik ob prijavi. Sestavljen je iz glavnega

pogleda, ki vsebuje seznam aktivnosti ali priložnosti/reklamacij. Levega stranskega

menija, ki vsebuje filtre, iskanje, razvrščanje, gumb za dodajanje in desnega stranskega

menija, ki vsebuje gumbe za preklop med aktivnostmi, priložnostmi/reklamacijami ter

odjavo.

Aktivnosti:

Seznam aktivnosti je sestavljen iz klicev, nalog in sestankov. Vsak je predstavljen z

nazivom, opisom, datumom/časom ter nazivom stranke na katero je vezana aktivnost. Ob

kliku na gumb s tremi pikami se nam odpre podaljšan opis aktivnosti. Ob kliku na aktivnost

20

Slika 10: Pogled MojCRM (Aktivnosti) Slika 11: Levi stranski meni pogled MojCRM

(Aktivnosti)

se le ta odpre v modalnem oknu za aktivnost (slika 13). V modalnem oknu lahko vidimo

vse podatke o aktivnosti. S filtri v levem stranskem meniju lahko spreminjamo naš seznam

aktivnosti, tako da vidimo le določene tipe aktivnosti, lahko jih razvrstimo po datumu

padajoče, naraščajoče, lahko pogledamo aktivnosti za zadnji teden, mesec ali od začetka.

Lahko pogledamo že zaključene aktivnosti ter lahko iščemo po filtriranih aktivnostih.

Imamo tudi gumb za dodajanje aktivnosti, ki nam odpre novo »modalno okno« za

dodajanje aktivnosti. V »modalnem oknu« za dodajanje aktivnosti (slika 12) se vnosna

polja generirajo sama. glede na izbrano vrsto aktivnosti.

Ob kliku na gumb Priložnosti/Reklamacije v desnem meniju (slika 14) se pogled nastavi

na priložnosti oz. reklamacije. Prilagodi se tudi levi meni s filtri in gumbi za dodajanje.

(slika 15)

21

Slika 12: Modalno okno za dodajanje

aktivnosti

Slika 13: Modalno okno za prikaz aktivnosti

V ozadju pogleda MojCRM sta tudi krmilnik in API, ki skrbita za nadzor in pridobitev

vsebine.

22

Slika 14: Desni meni pogled MojCRM Slika 15: Levi meni pogled MojCRM

(priložnosti/reklamacije)

Krmilnik MojCRM (klic podatkov):

$q.all([ $http.get(HTTP_CONSTANTS.url + 'crm_kliciview/' + USER_ROLES.userId),

$http.get(HTTP_CONSTANTS.url + 'crm_nalogeview/' + USER_ROLES.userId), $http.get(HTTP_CONSTANTS.url + 'crm_sestankiview/' + USER_ROLES.userId) ]).then(function (data) { $scope.podatki = data[0].data.concat(data[1].data).concat(data[2].data); $ionicLoading.hide(); }).catch(function (e) { $ionicLoading.hide(); var alertPopup = $ionicPopup.alert({ title: 'Povezava z bazo ni uspela', template: 'Povezava z bazo ni uspela, poskusite osveziti pogled.' }); });

Psevdokod 3: Zahtevki Http za seznam klicev, nalog, sestankov

V psevdokodu 3 vidimo, da odjemalec izvede tri zahtevke http. Zahtevek za vse klice,

naloge in sestanke vpisanega uporabnika oziroma komercialista. Ko dobimo vrnjene

podatke za vse tri http zahtevke sledi združevanje podatkov v spremenljivko podatki.

Nastavljeno imamo tudi funkcijo v primeru napake, ta vrne opozorilo o napaki. Poglejmo si

še strežniški del klica podatkov.

API (klic podatkov):

Public Function GetCRM_Klici(id As Integer) As IEnumerable(Of Db.CRM_KliciView)

Dim list As IEnumerable(Of Db.CRM_KliciView) = Nothing Try Dim komercialistId As Integer? = Core.FindUserKomercialistId(User) Using db As New Hermes.Db.HermesEntities(Hermes.CRM.Web.Core.HermesEntityConnectionString(ConfigurationManager.ConnectionStrings("defaultConnString").ConnectionString)) list = (From d In db.CRM_KliciView Where d.KomercialistID = komercialistId Select d).ToList End Using Catch ex As Exception logger.Error(ex) End Try Return list End Function

Psevdokod 4: Strežniška funkcija, ki vrne vse klice komercialista

Na strežniški strani imamo funkcijo, ki vrne vse klice, katerih komercialist je prijavljen

komercialist. Vsi klici se zapišejo na seznam, katerega vrnemo v odgovoru na zahtevek

http. Če pride do napake imamo nastavljen lovilec napak.

V spodnji kodi lahko vidimo primer dodajanja novega klica.

23

Krmilnik MojCRM (dodajanje klica):

if ($scope.stanjeDodajanjeAktivnost.value=="klic") { if($scope.preveriIzpoljenostKlica()==true) { $scope.novKlic.DatumKreirano = new Date(); $http.post(HTTP_CONSTANTS.url + 'AddCRM_KliciView/klic', $scope.novKlic) .success(function (data, status, headers, config) { $scope.modalDodajanjeAktivnosti.hide(); $scope.podatki.push($scope.novKlic); }) .error(function (data, status, header, config) { $ionicPopup.alert({ title: 'Klic ni bil dodan', template: 'Dodajanje klica ni bilo uspesno.' }); }); $scope.kontaktiKupca = []; $scope.aktivnostPriloznost = false; $scope.novKlic = { DatumKreirano: null, DatumKlicStart: null, DatumKlicEnd: null, DatumInCas: null, Opis: null, Zadeva:null, PriloznostID: null, KandKupciID: null, TipKlica: 0, KomercialistID: $scope.komercialistID, KomercialistOwnerID: null, Zakljucen: false, KandKupciID: null, MkuKID: null } } else $ionicPopup.alert({ title: 'Manjkajoci podatki', template: 'Za dodajanje morate vnesti vse potrebne podatke.' }); }

Psevdokod 5: Dodajanje klica v krmilniku (angular)

Najprej preverimo, če je aktivnost klic. Če je klic preverimo, če so vsa vnosna polja

izpolnjena. Nato kreiramo nov http zahtevek, v katerem pošljemo vrednost novo

ustvarjenega objekta (v našem primeru klica). Nato dobimo odgovor iz strežnika in če je

ta pozitiven zapremo modalno okno za dodajanje klica ter v polje podatkov dodamo nov

24

objekt. V nasprotnem primeru izpišemo napako. Na koncu še ponastavimo vse podatke

spremenljivke novKlic v katero se shranjujejo vnosi v modalnem oknu.

API (dodajanje novega klica):

Public Function AddCRM_KliciView(klic As Db.CRM_KliciView) As Integer Dim value As Integer = 0 Try If klic IsNot Nothing Then Dim komercialistId As Integer? = Core.FindUserKomercialistId(User) Using db As New Hermes.Db.HermesEntities(Hermes.CRM.Web.Core.HermesEntityConnectionString(ConfigurationManager.ConnectionStrings("defaultConnString").ConnectionString)) Dim itemCRM_Klici As New Db.CRM_Klici If (klic.DatumKreirano IsNot Nothing) Then itemCRM_Klici.DatumKreirano = klic.DatumKreirano.Value.ToLocalTime End If If (klic.DatumKlicStart IsNot Nothing) Then itemCRM_Klici.DatumKlicStart = klic.DatumKlicStart.Value.ToLocalTime End If If (klic.DatumKlicEnd IsNot Nothing) Then itemCRM_Klici.DatumKlicEnd = klic.DatumKlicEnd.Value.ToLocalTime End If If (klic.DatumInCas IsNot Nothing) Then itemCRM_Klici.DatumInCas = klic.DatumInCas.Value.ToLocalTime End If itemCRM_Klici.Opis = klic.Opis itemCRM_Klici.Zadeva = klic.Zadeva itemCRM_Klici.PriloznostID = klic.PriloznostID itemCRM_Klici.KandKupciID = klic.KandKupciID itemCRM_Klici.TipKlica = klic.TipKlica itemCRM_Klici.Zakljucen = klic.Zakljucen itemCRM_Klici.KomercialistID = klic.KomercialistID itemCRM_Klici.KomercialistOwnerID = komercialistId itemCRM_Klici.MkuKID = klic.MkuKID db.CRM_Klici.Add(itemCRM_Klici) db.SaveChanges() value = itemCRM_Klici.KlicID End Using Else value = 0 End If Catch ex As Exception logger.Error(ex) End Try Return value End Function

Psevdokod 6: Dodajanje klica na stežniku

25

Na strežniški strani ustvarimo nov objekt tipa CRM_KliciView kateremu nastavimo

lastnosti objekta klic, katerega dobimo preko zahtevka http. Na koncu nov objekt shranimo

v podatkovno bazo in vrnemo vrednost objekta oziroma 0 če je bila sprožena napaka. Isto

velja pri dodajanju ostalih aktivnosti (sestankov, nalog).

Prikaz aktivnosti (uporabniški del):

<ion-item ng-repeat="aktivnost in podatki | filterAktivnosti:filtriAktivnosti | filter:filtriAktivnosti.aktivnosti | orderBy: filtriAktivnosti.orderby=='DatumKreirano' ? '-DatumKreirano' : 'DatumKreirano' as filtriraneAktivnosti" class="item"> <div ng-click="toggleItem(aktivnost)" on-hold="openModalAktivnosti(aktivnost)" ng-class="isItemShown(aktivnost) ? 'item-expand active' : 'item-expand inactive'"> <h2 ng-click="openModalAktivnosti(aktivnost)" class="item-text-wrap"><b>{{ aktivnost.Zadeva }}</b><i ng-class="aktivnost.KlicID != null ? 'icon ion-ios-telephone' : (aktivnost.NalogaID != null ? 'icon ion-compose' : 'icon ion-coffee')" style="float:right"> {{ aktivnost.KlicID!=null ? aktivnost.DatumInCas : (aktivnost.NalogaID!=null ? aktivnost.Rok : aktivnost.DatumInCasOdPlan) | dateFilterKratki}}</i></h2> <div class="item-text-wrap" style="font-size:13px;">{{ aktivnost.SestanekID != null ? aktivnost.Namen : aktivnost.Opis }}</div> </div> <div ng-click="toggleItem(aktivnost)" class="row item-expand-footer"> <div class="col"> <i ng-class="isItemShown(aktivnost) ? '' : 'ion-more'"> {{ isItemShown(aktivnost) ? 'ZAPRI' : '' | translate }}</i> </div> <div class="col item-text-wrap" style="text-align: right;"> <i class="ime-stranke">{{ aktivnost.NazivPodjetja }}</i> </div> </div> </ion-item>

Psevdokod 7: Izpis aktivnosti z ng-repeat

Pri izpisu aktivnosti uporabimo angular direktivo ng-repeat. Ta deluje tako, da inicializira

predlogo za vsak objekt iz kolekcije. Vsaka predloga ima svoj doseg. V našem primeru se

sprehodimo čez aktivnosti v polju podatki ter jih filtriramo z filtri (priloga A) ter uredimo po

datumu kreiranja. Vsaki aktivnosti dodamo naslov, kateri ima nastavljene dogodke ob kliku

in ob držanju. Za lažjo orientacijo nastavimo vsaki aktivnosti tudi primerno ikono glede na

aktivnost. To dosežemo z direktivo ng-class v kateri lahko s pogojem preverimo za kakšen

tip aktivnosti gre (naloga, sestanek, klic). Nastavimo še odpirajoče se polje z opisom

aktivnosti ter nogo, v kateri je zapisan naziv stranke.

26

4.2.4 Modul stranke

Modul stranke je sestavljen iz pogleda, katerega sestavlja vnosno polje, gumb išči ter

seznam strank. Iskanje strank poteka na dva možna načina, prvi način je, da uporabnik

vnese v vnosno polje del naziva stranke, katero išče in klikne gumb išči. Drugi način je, da

uporabnik vnese v vnosno polje več kot 3 znake in počaka 1.5 sekunde, nato se mu

avtomatsko začne iskanje po strankah glede na vnesene znake. Da uporabnik vidi, kdaj

poteka iskanje mu izpišemo obvestilo o nalaganju podatkov.

27

Slika 16: Prvi pogled modula stranke Slika 17: Iskanje po strankah

Pri izpisu najdenih strank izpišemo naziv stranke, ki je poudarjen za boljšo uporabniško

izkušnjo. Nato pod nazivom izpišemo ikono za kontakt ter kontaktno številko stranke, na

katerega lahko ob kliku direktno pokličemo iz naprave. Pod kontaktom izpišemo polni

naslov stranke.

Vsaka stranka na seznamu ima dodatna dva gumba, ki se prikažeta ob potegu stranke v

levo. Gumb z nazivom »več« odpre modul za posamezno stranko ter gumb z ikono

zemljevida, kateri odpre zemljevid z naslovom stranke ter možnostjo izrisa poti od

trenutne lokacije do naslova stranke. Za izris poti mora imeti uporabnik na mobilnem

telefonu omogočeno lokacijsko storitev GPS11. Program dobi uporabnikovo lokacijo GPS

ter strankino lokacijo GPS. Strankino lokacijo GPS dobimo s pomočjo Googlove storitve

Geocoding. Geocoding API vsebuje metodo, ki pretvori besedilo (naslov) v geolokacijo

11 GPS - Global Positioning System (globalni navigacijski satelitski sistem)

28

Slika 18: Izpis najdenih strank Slika 19: Poteg v levo na stranki

(geometrijska dolžina in širina). V psevdokodu 8 je prikazan klic Googlove storitve iz

Geocoding API-ja.

$scope.cleanedURI = encodeURI($scope.podjetjePod.Ulica.split(' ').join('+') + '+' + $scope.podjetjePod.Posta.split(' ').join('+') + '+' + $scope.podjetjePod.Kraj.split(' ').join('+')); $scope.directionsDisplay = new google.maps.DirectionsRenderer(); $http.get('https://maps.googleapis.com/maps/api/geocode/json?address=' + $scope.cle anedURI, { header: { 'Content-Type': 'application/json; charset=UTF-8' } }).then(function (data) { $scope.podatkiNaslov = data.data; if ($scope.podatkiNaslov.results.length > 0) { $scope.Lat = $scope.podatkiNaslov.results[0].geometry.location.lat; $scope.Lng = $scope.podatkiNaslov.results[0].geometry.location.lng; } else { var alertPopup = $ionicPopup.alert({ title: 'Napaka pri iskanju naslova!', template: 'Preverite pravilnost naslova.' }); } })

Psevdokod 8: Klic Googlove storitve za pridobivanje lokacije stranke

Na začetku sestavimo počiščen naslov, ki je sestavljen iz ulice, kraja in pošte. Nato

ustvarimo nov zahtevek http, v katerem kličemo Googlovo storitev REST, v kateri podamo

naš počiščen naslov. API nam vrne geolokacijo naslova. Iz te geolokacije nato izberemo

geometrijsko dolžino in širino. Če API vrne napako le to ujamemo ter izpišemo opozorilo o

napaki.

29

4.2.5 Modul stranka

Modul stranka je modul, ki vsebuje vse podatke o stranki. Od osnovnih podatkov,

kontaktov stranke, skupin, priložnosti, reklamacij, aktivnosti, ter ostale zadeve vezane na

posamezno stranko. Pri priložnostih, reklamacijah in vseh aktivnostih imamo števce s

številkami (slika 22). Ti števci pomenijo sledeče:

• pri priložnostih: število odprtih priložnostih (nezaključenih),

• pri reklamacijah: število odprtih reklamacij (nezaključenih),

• klici, sestanki in naloge imamo 3 števce, zelen števec predstavlja število

zaključenih aktivnosti, oranžen števec predstavlja število nezaključenih aktivnosti,

ki še niso čez rok, rdeč števec pa predstavlja število nezaključenih aktivnosti, ki so

že čez rok. Da lažje najdemo posamezno aktivnost imamo pri izpisu le teh

obarvane krogce v desnem zgornjem kotu, ki se ujemajo s stanjem aktivnosti.

(slika 23)

30

Slika 20: Prikaz zemljevid strankaSlika 21: Navodila za pot do stranke

4.2.6 Podatkovna baza

Podatkovna baza je bila že predhodno izdelana za namizno aplikacijo. Uporabili smo

Microsoft SQL12 Server podatkovno bazo. V podatkovni bazi imamo tudi poglede, katere

uporabljamo pri mobilni aplikaciji. V prejšnjih poglavjih smo si pogledali izgled funkcij

krmilnikov API-ja. Programski jezik v katerem so napisani krmilniki je Visual basic.

12 SQL - Structured Query Language (strukturirani povpraševalni jezik za delo s podatkovnimibazami)

31

Slika 22: Modul stranka Slika 23: Seznam sestankov stranke

4.2.7 Razhroščevanje in izvoz aplikacije za sistem Android

Pri razvoju hibridnih aplikacij z ogrodjem Ionic lahko uporabimo za razhroščevanje več

načinov. Ionic nam ponuja razhroščevanje v brskalniku katerega sprožimo z ukazom

»ionic serve«. Drug način je s pomočjo emulatorja Ripple, katerega smo zaradi njegove

zmožnosti reševanja problema križanja domen uporabljali tudi pri izdelavi naše aplikacije.

Zadnji način je uporaba dejanske naprave za razhroščevanje. To storimo z ukazom »ionic

run android« za android naprave.

Aplikacijo izvozimo z ukazom »cordova build –release android« (sistem android). Ta ukaz

generira aplikacijo glede na datoteko config.xml, v kateri določimo vse privzete nastavitve

aplikacije. Nato lahko ustvarjeno datoteko APK (nepodpisano) najdemo v mapi

»platforms/android/build/outputs/apk«. Pred objavo aplikacije na Googlovi trgovini

moramo APK datoteko podpisati. Ključ za podpis ustvarimo z ukazom:

keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048

-validity 10000

Ko imamo ustvarjen ključ lahko podpišemo datoteko APK z naslednjim ukazom:

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore

HelloWorld-release-unsigned.apk alias_name

Za optimizacijo datoteke APK lahko izvedemo še sledeč ukaz:

zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk

Sedaj imamo datoteko APK, ki je pripravljena za objavo na Googlovi trgovini Play Store.

32

4.3 Povzetek ugotovitev in ocena

Pri izdelavi same aplikacije sem naletel na nekaj napak v samem ogrodju Ionic. Prva

napaka je bila, da se je ob odpiranju stranskega menija še vedno lahko premikalo glavno

vsebino. To napako smo odpravili z nekaj vrsticami kode. Druga zadeva je, da se

aplikacija na malo starejših napravah prikazuje z nižjo resolucijo kot je originalna, menim,

da je problem v upodabljanju (ang. rendering) pogledov.

Največji izziv pri izdelavi aplikacije je bil, kako ogromne količine podatkov, ki so v namizni

aplikaciji predstavljeni s pomočjo tabel, predstaviti v mobilni aplikaciji kjer tabele ne pridejo

v poštev zaradi premajhne resolucije ekrana. Večino problemov smo rešili s seznami.

Aplikacijo smo preizkusili na različnih napravah. Na zmogljivejših napravah ni opaznih

razlik v hitrosti delovanja v primerjavi z domorodnimi aplikacijami. Za izdelavo same

aplikacije, tako strežniškega kot uporabniškega dela nam je vzelo 150 ur, tako da

ocenjujem, da je bila poraba časa nižja kot če bi izdelovali domorodno aplikacijo. In če

vzamemo v obzir, da se sedaj lahko aplikacija izvozi za več operacijskih sistemov je bila

cena izdelave aplikacije dokaj cenejša, kot bi bila izdelava domorodnih aplikacij za vsak

sistem posebej.

Moja splošna ocena je, da se izdelava hibridnih aplikacij splača, saj ponuja dosti več

prednosti kot slabosti. Ob prihodu Angular 2 ter Ionic 2 pa bi se znala dvigniti tudi

učinkovitost delovanja aplikacij.

33

5 PRIHODNOST RAZVOJA HIBRIDNIH APLIKACIJ

V zadnjem času so spletne tehnologije doživele velik razvoj. Sam vidim prihodnost razvoja

hibridnih aplikacij predvsem v prihodu ogrodja Ionic 2, ki bo deloval na ogrodju Angular 2.

S prihodom Ionic 2, ki je sedaj še v beta verziji bomo dobili nekaj novih nujno potrebnih

komponent, ki so manjkale v verziji 1.3. Obljubljajo nam tudi boljšo izvedbo samega

ogrodja. Največja prednost pa je zagotovo kompatibilnost z Angular 2. Ta je dokazano še

učinkovitejši kot njegov predhodnik Angular.

Angular 2 bi lahko bil v produkciji celo do deset krat hitrejši. Prav tako dostavi kalkulacije

za gladke tranzicije in pomikanje po strani. Novost Angular 2 je tudi v TypeScript-u.

TypeScript je nadgradnja JavaScripta ki se prevede v ES5 JavaScript. Ima dve glavni

prednosti: [15]

• Najnovejše funkcije JavaScripta niso podprte v vsakem brskalniku. TypeScript

poskrbi za to, da se prevede v ES5, ki ga lahko razume vsak brskalnik [15].

• Nova prednost je predstavitev tipov, kar dovoljuje programerjem, da statično

opredelijo in tudi preverjajo tipe, kar omogoča odpravljanje napak še pred izvedbo

programa [15].

34

6 ZAKLJUČEK

V diplomskem delu smo si zadali nalogo, da preverimo, če je mogoč razvoj hibridne

mobilne aplikacije z znanjem spletnih tehnologij, ki bo zadovoljevala kriterijem dobre

mobilne aplikacije. Ugotovili smo, da lahko s pomočjo ogrodij Ionic in Apache Cordova

izdelamo v kratkem času precej kompleksno poslovno aplikacijo, ki je odzivna, cenovno

ugodna ter lahko dostopa do domorodnih funkcij telefona v našem primeru lokacije GPS.

Z aplikacijo mobile CRM smo dokazali, da kompleksnost same aplikacije nima vpliva na

učinkovitost in odzivnost same hibridne aplikacije. Dokazali smo tudi, da sta ogrodje Ionic

ter Cordova zelo učinkovita za izgradnjo hibridnih aplikacij. Tudi sama priprava okolja,

razvoj, razhroščevanje in testiranje je enostavno saj lahko z nekaj ukazi izvedemo prav

vse potrebne funkcije. Zelo dobra stvar za razvijalce je tudi npm, ki omogoča enostavno

dodajanje, odstranjevanje in posodabljanje dodatkov.

Hibridne aplikacije se mi zdijo logična izbira pri manjših podjetjih z omejenimi viri kot tudi

pri večjih podjetjih, kot orodje za izdelavo prototipov aplikacij ter za testiranje aplikacij.

V prihodnosti pričakujem vse več hibridnih aplikacij, ter nadaljevanje trenda razvoja

aplikacij s pomočjo spletnih tehnologij.

35

7 VIRI

[1] Whatcott, J., Brightcove, HTML5 and the Rise of Hybrid Apps. Dostopno na:

https://blog.brightcove.com/en/2011/11/html5-and-rise-hybrid-apps [10. 11. 2015].

[2] Ramel, D. ADT, Enterprise Computing Group: Mobile Report: Native Development

Trails Web, Hybrid. 2015 Dostopno na:

https://adtmag.com/articles/2015/04/27/mobility-survey.aspx [10. 11. 2015].

[3] Pronschinske, M. Dzone, Mobile Zone, The State of Native vs. Web vs. Hybrid. 2014

Dostopno na: https://dzone.com/articles/state-native-vs-web-vs-hybrid [10. 11.

2015].

[4] Wikipedia Foundation Inc, "PhoneGap", Dostopno na:

https://en.wikipedia.org/wiki/PhoneGap [10. 11. 2015].

[5] The Apache Software Foundation, Dostopno na: https://cordova.apache.org/ [10.

11. 2015].

[6] Wikipedia Foundation Inc, "Ionic", Dostopno na:

https://en.wikipedia.org/wiki/Ionic_(mobile_app_framework) [10. 11. 2015].

[7] Drifty Co, Ionic, Dostopno na: http://ionicframework.com/ [10. 11. 2015].

[8] Olanoff, D., AOL Inc., Dostopno na: https://techcrunch.com/2012/09/11/mark-

zuckerberg-our-biggest-mistake-with-mobile-was-betting-too-much-on-html5/ [5.

7. 2016].

[9] Bermež, R., X-blogs, Dostopno na: http://xblogs.kompas-xnet.si/post/Kaj-je-Nodejs

[5. 7. 2016].

[10] Markov, D., Zine EODD, Dostopno na: http://tutorialzine.com/2015/10/comparing-

the-top-frameworks-for-building-hybrid-mobile-apps/ [7. 7. 2016].

[11] Sunil, N., Noeticforce, Dostopno na: http://noeticforce.com/best-hybrid-mobile-

app-ui-frameworks-html5-js-css [7. 7. 2016].

[12] Wikipedia Foundation Inc, "NodeJS" , Dostopno na:

https://en.wikipedia.org/wiki/Node.js [7. 7. 2016].

[13] Wikipedia Foundation Inc, "AngularJs" , Dostopno na:

https://en.wikipedia.org/wiki/AngularJS [7. 7. 2016].

[14] HERMES d.o.o., Dostopno na: https://www.hermes2.net/crm.html [8. 7. 2016].

[15] Olah, A., Budacode, Dostopno na: https://blog.budacode.com/2016/05/02/ionic-2-

future-of-app-development/ [14. 7. 2016].

36

[16] Sanchez Blanco, A., Development of hybrid mobile apps, using ionic framework.

Dostopno na: http://www.theseus.fi/bitstream/handle/10024/114145/Thesis-

Andrea_Sanchez_Blanco.pdf?sequence=1 [19. 8. 2016].

37

Priloga A – psevdokod filtrov za razvrščanje aktivnosti

.filter('filterAktivnosti', function () {

return function (items, filtri) { var filtered = []; function preveriCasovnoObdobje(obdobje, aktivnost) { if (obdobje == 'teden') { var datetimeEnd = new Date(); datetimeEnd.setDate( datetimeEnd.getDate() - 7); } if (obdobje == 'mesec') { var datetimeEnd = new Date(); datetimeEnd.setDate( datetimeEnd.getDate() - 31); } if (Date.parse(aktivnost.DatumKreirano) > Date.parse(datetimeEnd)) { return true; } else { return false; } } angular.forEach(items, function (item) { if (item.SestanekID != null) { item.DatumKreirano = item.DatumKreiranja; } if (filtri.klici === true && item.KlicID != null) { if (filtri.casovnoObdobje == 'ZadnjiTeden') { if(preveriCasovnoObdobje('teden',item)===true) { if (filtri.nezakljuceni==item.Zakljucen) filtered.push(item); } } else if (filtri.casovnoObdobje == 'ZadnjiMesec') { if (preveriCasovnoObdobje('mesec', item) === true) { if (filtri.nezakljuceni == item.Zakljucen) filtered.push(item); } } else if (filtri.casovnoObdobje == 'OdZacetka') { if (filtri.nezakljuceni == item.Zakljucen) filtered.push(item); } } else if (filtri.naloge === true && item.NalogaID != null) { if (filtri.casovnoObdobje == 'ZadnjiTeden') {

if (preveriCasovnoObdobje('teden', item) === true) { if (filtri.nezakljuceni == item.Zakljucen) filtered.push(item); } } else if (filtri.casovnoObdobje == 'ZadnjiMesec') { if (preveriCasovnoObdobje('mesec', item) === true) { if (filtri.nezakljuceni == item.Zakljucen) filtered.push(item); } } else if (filtri.casovnoObdobje == 'OdZacetka') { if (filtri.nezakljuceni == item.Zakljucen) filtered.push(item); } } else if (filtri.sestanki === true && item.SestanekID != null) { if (filtri.casovnoObdobje == 'ZadnjiTeden') { if (preveriCasovnoObdobje('teden', item) === true) { if (filtri.nezakljuceni == item.Zakljucen) filtered.push(item); } } else if (filtri.casovnoObdobje == 'ZadnjiMesec') { if (preveriCasovnoObdobje('mesec', item) === true) { if (filtri.nezakljuceni == item.Zakljucen) if (filtri.nezakljuceni == item.Zakljucen) filtered.push(item); } } else if (filtri.casovnoObdobje == 'OdZacetka') { if (filtri.nezakljuceni == item.Zakljucen) filtered.push(item); } } }); return filtered; }; }) .filter('filterPriloznosti', function () { return function (items, filtri) { var filtered = []; function preveriCasovnoObdobje(obdobje, priloznost) { if (obdobje == 'teden') { var datetimeEnd = new Date(); datetimeEnd.setDate(datetimeEnd.getDate() - 7); } if (obdobje == 'mesec') { var datetimeEnd = new Date(); datetimeEnd.setDatedatetimeEnd.getDate() - 31); }

if (Date.parse(priloznost.DatumKreirano) > Date.parse(datetimeEnd)) { return true; } else { return false; } } angular.forEach(items, function (item) { if (item.ReklamacijaID == null) { item.DatumKreirano = item.Datum_Date; } if (filtri.priloznosti === true && item.ReklamacijaID == null) { if (filtri.casovnoObdobje == 'ZadnjiTeden') { if (preveriCasovnoObdobje('teden', item) === true) { if (filtri.nezakljuceni == item.Zakljuceno) filtered.push(item); } } else if (filtri.casovnoObdobje == 'ZadnjiMesec') { if (preveriCasovnoObdobje('mesec', item) === true) { if (filtri.nezakljuceni == item.Zakljuceno) filtered.push(item); } } else if (filtri.casovnoObdobje == 'OdZacetka') { if (filtri.nezakljuceni == item.Zakljuceno) filtered.push(item); } } else if (filtri.reklamacije === true && item.ReklamacijaID != null) { if (filtri.casovnoObdobje == 'ZadnjiTeden') { if (preveriCasovnoObdobje('teden', item) === true) { if (filtri.nezakljuceni == item.Zakljucen) filtered.push(item); } } else if (filtri.casovnoObdobje == 'ZadnjiMesec') { if (preveriCasovnoObdobje('mesec', item) === true) { if (filtri.nezakljuceni == item.Zakljucen) filtered.push(item); } } else if (filtri.casovnoObdobje == 'OdZacetka') { if (filtri.nezakljuceni == item.Zakljucen) filtered.push(item); } }

}); return filtered; }; }) .filter('dateFilterKratki', function ($filter) { var angularDateFilter = $filter('date'); return function (theDate) { var today = new Date(); var datumPrimerjava = new Date(theDate); if (today.getDate() == datumPrimerjava.getDate() && today.getMonth() == datumPrimerjava.getMonth() && today.getYear() == datumPrimerjava.getYear()) return angularDateFilter(theDate, 'HH:mm'); else return angularDateFilter(theDate, 'd.M. HH:mm'); } }) .filter('dateFilter', function ($filter) { var angularDateFilter = $filter('date'); return function (theDate) { return angularDateFilter(theDate, 'd.M. yyyy, HH:mm:ss'); } });