Post on 09-Jul-2020
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'); } });