RAZVOJ MOBILNE HIBRIDNE APLIKACIJE NA ...Magistrsko delo Organizacija in management informacijskih sistemov RAZVOJ MOBILNE HIBRIDNE APLIKACIJE NA PLATFORMI APACHE CORDOVA/IONIC ZA

Magistrsko delo Organizacija in management informacijskih sistemov

RAZVOJ MOBILNE HIBRIDNE APLIKACIJE NA PLATFORMI APACHE

CORDOVA/IONIC ZA PRIKAZ VREMENA

Mentor: izr. prof. dr. Uroš Rajkovič Kandidat: Klemen Žnidar

Kranj, junij 2016

ZAHVALA Zahvaljujem se mentorju izr. prof. dr. Urošu Rajkoviču za strokovno vodenje in strokovno podporo. Zahvaljujem se tudi lektorju Martinu Medvedu, dipl. univ. ang. in univ. dipl. nem., ki je lektoriral moje delo. Za vso podporo pri pisanju magistrskega dela se zahvaljujem družini in prijateljem.

POVZETEK

V tem delu želimo raziskati in predstaviti razvoj prototipa mobilne hibridne aplikacije za prikaz vremena. Osredotočeni smo na razvoj in potek razvoja mobilne hibridne aplikacije od snovanja do zaključka. Mobilna hibridna aplikacija je zgrajena na platformi Apache Cordova in ogrodju Ionic, ki združuje mobilnemu svetu prirojene tehnologije, kot so CSS3, HTML5, SaaS, AngularJS in druge aktualne tehnologije v svetu mobilnih aplikacij. Za mobilno hibridno aplikacijo smo se odločili zato, da jo lahko poganjamo na različnih platformah in nismo omejeni le na določen operacijski sistem. Prototip mobilne hibridne aplikacije lahko razvijemo hitreje kot primerljiv prototip izvorne aplikacije. Cordova nam ponuja vtičnike, s katerimi dodelujemo aplikacije. S tem dosežemo manjše stroške, kar je v trenutnih časih pomembno. AngularJS nam omogoča dobro sprotno testiranje in posledično odkrivanje potencialnih napak že zgodaj v razvoju. Zaradi uspešnosti prinašanja rezultatov in skrajšanja časa razvoja smo izbrali agilne metodologije razvoja programske opreme.

KLJUČNE BESEDE:

- hibridna aplikacija - ogrodje Ionic - orodje AngularJS - Cordova - OpenWeatherMap

ABSTRACT This thesis is an attempt in research and development of a mobile hybrid application for weather forecasting. The focus in on the development itself and the course of development of this application using the Apache Cordova platform and the Ionic framework, combining technologies native to the mobile environment, such as CSS3, Html5, SaaS, AngularJS and others. We chose a mobile hybrid application because it can be run on a variety of platforms and we are not limited to only one operational system. The prototype of a hybrid mobile application can be developed faster than a native application prototype. Cordova provides us with additional add-ons for easy customization of applications, thus lowering costs, which is one of priorities in the current environment. AngularJS enables proper ongoing testing that can reveal potential errors early in development. Agile methods of software development were chosen because they bring results and have a shorter development time.

KEYWORDS:

- hybrid application - Ionic framework - Angular JS framework - Cordova - OpenWeatherMap

KAZALO

1. Uvod ...................................................................................................... 1 1.1. Predstavitev problema ............................................................................. 1 1.2. Predstavitev okolja .................................................................................. 2 1.3. Predpostavke in omejitve ......................................................................... 3 1.4. Metode dela ........................................................................................... 4 2. Arhitektura hibridnih aplikacij ................................................................... 5 2.1. Apache Cordova, Ionic ............................................................................. 5 2.2. HTML5, CSS3 .......................................................................................... 7 2.3. Gradniki Ionic ......................................................................................... 8 2.4. AngularJS, ionic ..................................................................................... 10 3. Priprava okolja na delo ........................................................................... 13 3.1. Priprava na delo ..................................................................................... 13 3.2. Kritična analiza ponudnikov vremenskih storitev ....................................... 20 4. Izdelava programa ................................................................................. 27 4.1. Izdelava aplikacije .................................................................................. 27 4.2. Končni izgled aplikacije ........................................................................... 41 4.2.2. Izgled aplikacije s posnemovalnikoma ................................................... 45 5. Zaključki ................................................................................................ 46 5.1. Ocena učinkov ....................................................................................... 46 5.2. Možnosti nadaljnjega razvoja .................................................................. 47 Literatura in viri ............................................................................................... 48 Kazalo slik ....................................................................................................... 49 Kratice in akronimi ........................................................................................... 51

Univerza v Mariboru – Fakulteta za organizacijske vede Magistrsko delo

Klemen Žnidar: Razvoj mobilne hibridne aplikacije na platformi Apache Cordova/Ionic za prikaz vremena stran 1

1. UVOD

1.1. PREDSTAVITEV PROBLEMA V trenutnem svetu je potreba po mobilnih aplikacijah vedno večja. Vse več uporabnikov ima več različnih mobilnih naprav. Med mobilne naprave sodijo pametni telefoni, tablični računalniki in pametne ure. Programsko ogrodje Ionic se uporablja za razvoj aplikacij na platformah Android in iOS. "Aplikacije razvite z Ionicom so hibridi, to pomeni, da spadajo med manjše spletne strani, ki se izvajajo v brskalniku in so sposobne dostopati izvorno plast platforme" (Bohner, 2015). Ogrodje omogoča spletnim razvijalcem, da razvijajo aplikacije, ne da bi jim bilo treba znati izvorne programske jezike, ki so vezani na izvorne platforme. "Razvoj hibridov je hitrejši v primerjavi z izvornimi aplikacijami. Aplikacija, katera ne potrebuje najmočnejše grafike in močnega procesorja pridobi veliko, če bo razvita kot hibrid" (Phan, 2015).

Mobilne hibridne aplikacije so odgovor na izvorne aplikacije. Lastne aplikacije delujejo najbolje na svoji, to je izvorni platformi oziroma na platformi, za katero so bile mišljene v začetku snovanja. S tem imajo doseženo največjo podprtost in razširjenost v svojem tehnološkem in tržnem segmentu. Narejene so v programskih jezikih, kot so Java, C#, Objective C in Swift. Med trenutno najmočnejšima in najbolj zastopanima platformama v mobilnem svetu sta Android in iOS. Platforma Android deluje najbolje s programskim jezikom Java, medtem ko platforma iOS deluje na Objektnem C-ju (objective-C) oziroma s Swiftom. Na ti dve platformi lahko gledamo kot rivalstvo med Applom in Googlom oziroma kot na boj med dvema velikanoma za mobilni trg. Zavedati se moramo, da se izvorne aplikacije vedno izvajajo hitreje od hibridnih aplikacij. To je posledica boljše optimizacije programskega jezika na določeni platformi in s tem hitrejšega izvajanja procesov izdelka ter boljše izrabe virov opreme, na kateri ga izvajamo. Vedeti moramo, da potrebujemo za vzporeden razvoj več ekip osebja in opreme za pokritje celotnega tržnega segmenta. To pomeni več končnih stroškov in usklajeno vodenje razvoja za podoben oziroma hkraten čas izida. Malo nam pomaga, če imamo izdelek za eno platformo, medtem ko ga za drugo še razvijamo. Trenutni trg ne dovoljuje prevelikega zamujanja zaradi neuspešnega in počasnega razvoja.

Hibridna mobilna aplikacija je aplikacija, ki vsebuje izolirani spletni brskalnik. Izolirani spletni brskalnik imenujemo tudi spletni pogled. S spletnim pogledom nam je omogočeno izvajanje spletne aplikacije znotraj izvorne aplikacije. Uporablja ovoj izvorne aplikacije, ki komunicira z nepravilno izvorno platformo in s spletnim pogledom. To pomeni, da spletne aplikacije delujejo na različnih platformah in imajo dostop do GPS-ja in kamere. Orodja, ki to omogočajo, niso v osnovnem naboru platform iOS ali Android. To so neodvisna orodja Apache Cordova. Po prevajanju mobilne hibridne aplikacije na strojnem nivoju se le-ta prevede v izvorno aplikacijo naprave in platforme, ki jo uporabnik trenutno uporablja (Wilken, 2016).



1.2. PREDSTAVITEV OKOLJA Platforma za mobilne hibridne aplikacije je bila ustvarjena zaradi hitrejšega razvoja. Hibridne aplikacije niso namenjene težkim in hitrim izračunom ter operacijam s hitrim grafičnem izvajanjem. Namenjene so vsem ostalim izdelkom, ki so trenutno priljubljeni. Med te sodijo: mobilne trgovine, aplikacije za vreme, aplikacije za pogovarjanje, prikaz podatkov, predstavitve podjetij, agencije za turizem, Google navigacijo itd. Hitrejši razvoj dosežemo, ker z razvojem ene aplikacije pokrijemo širši tržni delež. S platformo Ionic na ta način razvijemo izdelek za Google in Apple Store obenem oziroma za platformi Android in iOS. Tako se nam ni treba bati, da bo izdelek zamujal za en trg, medtem ko bo na drugem že propadal zaradi zasičenosti in nezainteresiranosti trenutnega povpraševanja trga. V primeru, da razvijalski studio izda identično aplikacijo za eno platformo in kasneje še za drugo, uporabnikom mogoče ne bo všeč zaradi kritik, ki pa na drugi platformi morebiti niso zadevne. S tem se izognemo napakam prvega vtisa in negativnim kritikam ljudi, ki prisegajo na določeno platformo nad drugo zaradi svojih stališč in prepričanj. Slika 1 nam prikazuje osnovni potek ogrodij Cordova in Ionic na primeru odpiranja kamere. Prikazan je potek od strojnega nivoja do izrisa slike za končnega uporabnika skozi več korakov.

Slika 1: Potek izvajanja ogrodij Cordova in Ionic

vir: Wilken, 2016)



Predstavimo korake, oštevilčene na sliki 1: - 1. Pritisnemo gumb. - 2. S pritisnjenim gumbom pokličemo krmilnik Angular, s čimer pokličemo

Cordovo skozi knjižnico JavaScript . - 3. Cordova komunicira z napravo preko paketa za razvoj programske opreme,

s čimer zahtevamo kamero. - 4. Naprava nam odpre kamero ali nas vpraša za dovoljenje v primeru, da je

to potrebno. Posnamemo lahko sliko. - 5. Ko potrdimo sliko, se nam kamera zapre in pošlje podatke slike Cordovi. - 6. Cordova pošlje podatke slike krmilniku Angular. - 7. Slika je posodobljena znotraj komponent Ionic (Wilken, 2016).

1.3. PREDPOSTAVKE IN OMEJITVE Za mobilno hibridno aplikacijo smo se odločili zaradi cenejšega in hitrejšega razvoja. Vedeti moramo tudi, da mojstrstvo dveh različnih programskih jezikov vzame veliko časa za priučitev, pravilne nastavitve, uporabo, izvedbo, končno optimizacijo in pravilno delovanje. Popravki so dolgotrajnejši in predvsem napornejši. Razvoj dveh podobnih izdelkov v dveh različnih programskih jezikih nam vzame dvakrat več časa za razvoj kot izdelek, ki pokrije obe platformi hkrati. Testiranje dveh različnih aplikacij bo vzelo več časa kot testiranje enega izdelka. Malo je ljudi, ki so izkušeni, znajo dobro delati v različnih programskih jezikih hkrati in obenem predvidevati obseg napak, delovanje in končno hitrost izdelka.

Za mobilno aplikacijo smo se odločili zaradi naslednjih dejstev:

- številu uporabljanih pametnih telefonov je za leto 2016 napovedana rast na 2,16 milijarde,

- "uporaba pametnih telefonov se povečuje iz dneva v dan",

- "mobilne naprave so edine naprave, katere imamo vseskozi s seboj in se z njimi ukvarjamo",

- "otroci stari med 2 in 5 let, vedo več o uporabi pametnega telefona kot pa o zavezovanju vezalk",

- "čas uporabe mobilnih telefonov se povečuje 14-krat hitreje kot čas uporabe namiznih naprav oziroma namiznega računalnika",

- "ljudje se zjutraj naprej ukvarjajo s svojim telefonom kot pa z družino ali partnerji"

(Khanna, 2016).



Predstavimo nekatere izmed prednosti pri hibridnih mobilnih aplikacijah:

- Medplatformska podprtost: razvijemo enkrat in postavimo na različne platforme z malo truda in vložka.

- Omogočajo razvoj in izgradnjo mobilnih aplikacij z enakimi spretnostmi, ki jih potrebujemo za razvoj spletnih strani in spletnih aplikacij.

- Dostop do naprave; spletni pogled je ovit v izvorno aplikacijo, zato ima aplikacija dostop do vseh značilnosti, ki so na voljo izvorni aplikaciji.

- Lahkotnost razvoja; so hitre in preproste za razvoj, brez potrebe po stalnih ponovnih zgraditvah za predogled trenutne verzije. Imamo tudi dostop do vseh orodij za razvoj kot pri razvoju spletnih strani (Wilken, 2016).

Predstavimo nekatere izmed omejitev pri hibridnih mobilnih aplikacijah:

- Omejitve glede izvornih vtičnikov.

- Brez dostopa do izvornih gradnikov za krmiljenje aplikacije.

- Poganjamo jih kot primer spletnega pogleda, kar pomeni, da je zmogljivost vezana na kvaliteto brskalnika, ki ga uporablja naprava, na kateri se program izvaja (Wilken, 2016).

1.4. METODE DELA Problem, ki smo si ga zadali, je razvoj mobilne hibridne aplikacije, ki je na voljo za različne trenutne mobilne operacijske sisteme. Platforma je na voljo brez dodatnih stroškov. Osnovna koda je na voljo brez dodatnih vplačil, kar je pomemben faktor v trenutnem času, ki mu vladata svetovna kriza in recesija. Pomembno je, da končni izdelek deluje na različnih platformah. Razvijali smo po metodološkem pristopu razvoja programske opreme. Cilj našega raziskovanja je predstaviti hibridno aplikacijo ter nekatere prednosti in slabosti glede na aplikacije, ki so ekskluzivne eni platformi. Rešitev je podana v obliki končnega izdelka in predstavitve poteka razvoja od začetka do konca. Naredili smo kritično analizo končnega izdelka in njegove zmogljivosti.



2. ARHITEKTURA HIBRIDNIH APLIKACIJ

2.1. APACHE CORDOVA, IONIC Apache Cordova je programska oprema, ki povezuje spletni pogled in mobilni operacijski sistem, "Kombinacija izvornih in spletnih tehnologij" (Wargo, 2013). "Programska koda Cordova se izvaja nemodificirano v izvorni lupini" (Wargo, 2013), torej se izvede kot spletni pogled znotraj izvorne ovojnice, ki jo distribuiramo v spletne trgovine (Cordova, 2016). Spada med odprtokodno programsko opremo. Ponuja nam lastne knjižnice za uporabo vtičnikov v aplikacijah. Uporaba se razširi na vmesnike JavaScript, s katerimi dostopamo do kamere, naredimo slike, pošljemo elektronsko pošto, se pogovarjamo in se povezujemo z ostalimi napravami preko vmesnika Bluetooth, uporabljamo merilnike pospeška itd. (Ravulavaru, 2015). Podpira naslednje operacijske sisteme: Amazon FireOS, Android, Blackberry10, Firefox OS, iOS, Ubuntu, Windows Phone 8, Windows (8.0, 8.1, 10, Phone 8.1) (Cordova, 2016). Uporabljamo jo preko vmesnika z ukazno vrstico (CLI), za delovanje preko terminala in/ali ukazne kazalke. "Karkoli lahko razvijalec naredi kot spletno aplikacijo lahko naredi kot Cordova aplikacijo" (Wargo, 2013). Vsak razvijalec lahko naredi lasten vtičnik, ki še dodatno razširi ponudbo vtičnikov za platformo Cordova. Nekateri vtičniki so potrebni za nemoteno izvajanje aplikacije pri uporabi dodatnih prilagojenih komponent, ki v osnovi niso privzete. Od verzije 3.0 obstajata dva različna osnovna načina poteka razvoja: navzkrižni razvoj se izvaja z uporabo vmesnika z ukazno vrstico za pokritje večjega tržnega segmenta, drugi razvoj pa je osredotočen le na eno platformo in ga lahko spreminjamo na nižjem nivoju (Cordova, 2016).

Platforma Ionic spada med odprtokodno programsko opremo. Ustvarjena je z mobilno optimizirani tehnologijami HTML5, CSS3, knjižnica JavaScript /AngularJS in ostalimi orodji. HTML-ogrodje Ionic je narejeno podobno kot ogrodje Bootstrap za izdelovanje spletnih strani. Ogrodje Ionic učinkovito deluje zaradi minimalne manipulacije modela za predstavitev objektov dokumenta (DOM - Document Object Model) in strojno pospešenih prehodov glede na ostala ogrodja (Ravulavaru, 2015). Dodana je tudi podpora Cordovine naprave (Cordova’s Device) programskega vmesnika (API). Ionic ima tudi svoj vmesnik z ukazno vrstico (CLI) za delo v terminalu in/ali ukazni kazalki. Na uradni spletni strani imamo (Ionic, 2016a, Ionic, 2016b), predstavljene gradnike, njihovo uporabo, kaj lahko z njimi naredimo, kako dostopati do njihovega upravljanja, osnovno vizualno predstavitev izgleda v aplikaciji itd. Osnovno zgradbo in dizajn naredimo na podoben način kot spletne strani. AngularJS je v platformi Ionic uporabljen kot vezivo med gradniki, ki so vidni uporabniku, in kodo, ki se izvaja v notranjosti programa oziroma kodo, ki ni vidna uporabniku. Z uporabo AngularJS naredimo aplikacijo dinamično in ji dodamo uporabnost za trg. Statična aplikacija na današnjem trgu ne bo prišla daleč oziroma je ne bomo mogli prodati. Statična aplikacija, na kateri so le gumbi, ki ne delajo ničesar oziroma imamo občutek, da z njo ne moremo narediti ničesar uporabnega, naj ostane v glavi razvijalca kot zamisel ali prototip zasnove za kasnejšo dodelavo v tržno bolj dodelan izdelek. Uporabnost statične aplikacije v trenutnem mobilnem svetu je kot vaja za dopolnitev znanja in razširjanja obzorij določene teme. Dodatne vtičnike (plug-ine) za Ionic dobimo preko



Apache Cordove. Preko vmesnika z ukazno vrstico dodamo dodatke, ki so smiselni in koristijo trenutnim namenom aplikacije.

Arhitekture mobilnih aplikacij so tu predstavljene druga ob drugi. S slike 2 razberemo, kako poteka pretok informacij v izvorni aplikaciji, na mobilni spletni strani in v hibridni aplikaciji. Razberemo lahko tudi dostop do baze s podatki. S slike 2 vidimo razlike dostopanja, opazimo pa tudi, da mobilna spletna stran potrebuje strežnik, medtem ko ga hibridna in izvorna aplikacija ne potrebujeta.

Slika 2: Mobilne arhitekture ena ob drugi

vir: (Wilken, 2016)



2.2. HTML5, CSS3

"Jezik svetovnega spleta je vedno bil HTML" (HTML5, 2016). Jezik HTML5 uporabljamo za izgradnjo spletnih strani. Trenutno aktualna različica je 5. Dobesedni prevod je označevalni jezik za oblikovanje večpredstavnostnih dokumentov, ki omogoča povezave znotraj dokumenta ali med dokumenti. Z jezikom HTML naredimo ogrodje spletnih strani, ki ga kasneje preuredimo z jezikom CSS za oblikovanje. Slika 3 nam prikazuje osnovni izgled kode in osnovno ogrodje spletne strani.

Slika 3: Osnovni izgled kode HTML5

CSS3 se uporablja za oblikovanje spletnih strani. Trenutno aktualna je verzija 3, ki je prinesla številne posodobitve glede na verzijo 2.1, denimo animacije, aktualne razporeditve gradnikov, izbirnike itd. (CSS3, 2016). Dobesedni prevod je stilna predloga na spletni strani, v kateri je zapisana oblika spletne strani. Povezava v realni svet so barvanje sten zgradb oziroma notranjih površin. S CSS-jem dodajamo spletnim stranem dizajn, obliko, barvitost in razpoznavnost glede na konkurenco. CSS napišemo v spletno stran ali v svojo datoteko. Napisan v svoji datoteki ima boljšo preglednost, kot če je napisan v kodi skupaj z ogrodjem spletne strani. Za profesionalno rabo ga vedno pišemo v svoji datoteki. Slika 4 nam prikazuje osnovni izgled kode CSS3.

Slika 4: Osnovni izgled kode CSS3



2.3. GRADNIKI IONIC

Med Ionicovimi HTML/CSS-gradniki imamo naslednje elemente, ki so nam na voljo privzeto (Ionic, 2016c). Aplikacija zgrajena samo z njimi deluje statično in prikazuje izgled, podan s fiksnimi podatki. Predstavili smo nabor privzetih elementov, zgrajenih z Ionicovim HTML-jem in CSS-jem:

- Glava v različnih barvah: služi naslovu, navigaciji.

- Podglava: služi dodatnemu podnaslovu.

- Noga: služi navigaciji oziroma za prikaz pomembnih informacij.

- Vsebinski element: služi za prikaz vsebine, ima prednastavljene možnosti za dodelavo izdelka.

- Gumbi različnih barv, velikosti in dizajna: služijo potrditvam uporabnika, premikanju med različnimi stranmi/pogledi.

- Gumbi z ikonami: ti so dodatno okrepljeni z ikonami, kar pomeni, da si jih lažje zapomnimo oziroma lahko sklepamo, kaj je njihova funkcionalnost že glede na ikono.

- Element za seznam, z različnimi lastnostmi: za prikaz večjega števila informacij.

- Predogledne sličice: za prikaz informacij z dodano sliko.

- Kartice: za prikaz informacij s slikami, ikonami; za vsebino, ki jo želimo poudariti.

- Obrazci za vnos: narejeni za vnos podatkov, za prijavo, odjavo, potrditev itd.

- Potrditveni gumb: za potrditev ukaza, ki ga želimo izvršiti, in za izbor med več različnimi vrednostmi, pri katerih je lahko izbranih več naenkrat.

- Preklopno potrditveno polje: gumb, ki izbira med dvema različnima vrednostma, prirejen za zaslon na dotik, ker deluje bolj naravno zaradi zmožnosti upravljanja s prstom.

- Radijski gumb: za potrditve ukaza, ki ga želimo narediti, in za izbor med več različnimi vrednostmi, med katerimi je izbrana le ena.

- Polje/gumb za dinamičen razpon: za dinamičen izbor vrednosti.

- Polje/gumb za izbor: polje ki ima dodan seznam za izbor oziroma možnosti, med katerimi izbiramo vertikalno.

- Zavihek z različnimi dizajni in ikonami: za prehod med pogledi in/ali meniji za uporabo pri navigaciji izdelka.

- Mreža, sestavljena iz različnih velikosti vrstic in stolpcev, ki jo poljubno prilagajamo potrebam aplikacije in preglednosti izdelka, spreminjamo jo lahko vertikalno in horizontalno.

- Osnovne barve platforme Ionic so: light, stable, positive, calm, balanced, energized, assertive, royal, dark (Ionic, 2016c).

- Izbiramo lahko med 500 različnimi ikonami.

- Odmik (padding): za dodajanje odmika oziroma za dodajanje prostora komponentam, s tem dosežemo, da gradniki lažje "dihajo" in izdelek vizualno ni prenasičen oziroma nepregleden.



Slika 5 nam prikazuje osnovne statične gradnike ogrodja Ionic in maksimalne zmožnosti prikaza gradnikov na eni strani. Na obeh slikah opazimo tudi osnovni nabor barv ogrodja Ionic. Predstavljene so tudi grafične razlike med platformama iOS in Android. Opazimo drugačen izgled in obliko gradnikov. Razlike vidimo že pri radijskih gumbih, robovih na gumbih, pisavi, močnejših odtenkih nekaterih barv. Razlike nastanejo med izvajanjem in prevajanjem kode za določeno platformo, na kar nimamo vpliva. Vseeno pa nam to omogoča vpogled v to, na kaj moramo paziti, da nam kakšen gradnik ne izstopa preveč in s tem uniči prvi vtis ljudi, ki so zagovorniki izvornih platform.

Slika 5: Osnovni prikaza ogrodja Ionic pri delovanju

S slike 6 lahko razberemo izgled osnovne kode Ionic. Ogrodje Ionic je zgrajeno z gradniki HTML5. Vidimo predpone ion, ki nam povedo, da uporabljamo gradnike ogrodja Ionic. Naredili smo osnovno predstavitev, v kateri vidimo radijske gumbe, potrditvene gumbe, sezname, razpon in glavo številka 1, ki se uporablja za označitev



najpomembnejših naslovov. Število gumbov smo v kodi zmanjšali na enega zaradi prostora, ki bi ga slika s kodo zavzela. Predstavili smo glavo in nogo z različnima barvama, gumbe z različnimi barvami, radijska gumba, potrditvene gumbe, seznam in vsebinski gradnik.

Slika 6: Osnovni izgled Ionicove HTML5-kode

2.4. ANGULARJS, IONIC Predstavili bomo knjižnico AngularJS in njene podaljške ogrodja Ionic (Ionic, 2016č). Aplikacija deluje dinamično, vsebina se dodaja, ni občutka fiksiranih podatkov. Poglejmo, katere gradnike imamo na voljo privzeto:

- Akcijska datoteka (ionicActionSheet): odpre podokno, ki se pojavi vertikalno in ima na voljo različne izbire; uporablja se ga preko krmilnika.

- Vsebinski element (content): za prikaz različnih pogledov in nastavitev pogledov, potrebuje krmilnik za uporabo in pravilno delovanje.



- Element za osveževanje (ion-refresh): naredimo osveževanje aplikacije ali posameznega dela, potrebuje krmilnik za uporabo.

- Podokno (ion-pane): osnovno vstavljanje vsebine, ki ne potrebuje krmilnika za uporabo.

- Obrazci za vnos (form-input): preko krmilnika uredimo delovanje potrditvenih, radijskih in preklopnih gumbov.

- Geste in dogodki (gesture and event): različne opcije vlečenja, držanja, enodotičnosti, dvodotičnosti zaslona na dotik.

- Tipkovnica: najava in uporaba tipkovnice, različne nastavitve za platforme, deluje bolje z dodatkom.

- Seznami: dinamično dodajanje vsebine preko krmilnikov in različne nastavite, ki jih preuredimo glede na trenutne potrebe in zahteve.

- Nalaganje (ionic loading): komponenta, ki daje vtis nalaganja podatkov aplikacije, delovanje uredimo preko krmilnikov.

- Modalno okno (modal window): prikaz vsebine v svojem oknu, dokler je odprto ne dovoljuje ogleda ostale vsebine, delovanje je urejeno preko krmilnikov.

- Navigacija (navigation): veliko prednastavljenih nastavitev, naredimo dinamično navigacijo za lepši prehod med pogledi in urejanje zgodovine, uredimo jo preko krmilnikov.

- Pojavno okno (popover window): za prikaz podrobnejše vsebine, ki "lebdi" nad ostalo vsebino, natančno obnašanje določimo s krmilniki.

- Pojavno okno (popup window): narejeni za potrditev odgovora uporabnika, delovanje uredimo v krmilniku.

- Pomikalna komponenta: za urejanje vsebine, ki jo približujemo, oddaljujemo, pomikamo navzgor in/ali navzdol, delovanje je urejeno preko krmilnika.

- Stranski meni: naredimo izdelek, ki ima narejen stranski meni, ki se odpira levo ali desno, dodatne nastavitve uredimo preko krmilnikov.

- Drsna komponenta: vsaka stran je drsna enota, med katerima lahko prestavljamo, trenutno v fazi prenove.

- Vrtilni element (spinner): animirani element, uporabimo ga, da z njim pridobimo občutek nalaganja aplikacije oziroma posameznega dela aplikacije.

- Tabs (zavihki): preko krmilnikov nastavimo natančno obnašanje za premikanje med pogledi in dodatne funkcionalnosti.

- Pripomočki/koristnost (utility): za natančne nastavitve platforme (pozicije, dogodkovnih krmilnikov, modela za predstavitev objektov dokumenta) in za medplatformsko podprtost, nastavi se preko konfiguracije aplikacije.

- vmesnik z ukazno vrstico (CLI): za izgradnjo, nastavitve, emulacijo preko terminala in/ali ukazne kazalke.



AngularJS je v grobem sestavljen iz naslednjih osnovnih gradnikov, ki definirajo spletno aplikacijo, narejeno s tem ogrodjem:

- Modulov: vsebinski element za organizacijo kode v aplikaciji.

- Konfiguracije: vsebuje nastavitve, ki so urejene, preden aplikacijo zaženemo.

- Poti: za navigacijo v aplikaciji, za dodeljevanje konfiguracije ostalih elementov.

- Pogledov: kar vidi uporabnik, kar je bilo prevedeno s strani AngularJS-ja.

- $scope: povezava med krmilnikom in pogledom.

- Krmilnikov: uporabljamo jih za definiranje metod.

- Direktiv: so podaljški pogledov, naredimo si prilagojene, kjer so potrebne

- Storitev: v primeru, da več krmilnikov potrebuje iste podatke, začnemo uporabljati storitve (Ruebbelke, 2015).

Osnovni izgled kode AngularJS je prikazan s sliko 7, prikaz na spletni strani pa ponazarja slika 8. Uporabili smo osnovne gradnike za vzorčni prikaz kode. Najprej moramo dodati skripto AngularJS za pravilno delovanje strani, ki bo uporabljala AngularJS. Na sliki vidimo osnovno sintakso AngularJS. Opazimo, da se nam vse, kar vpisujemo v tekstovna polja, izpisuje v Angularjevih izrazih, ki jih označujemo s {{poljubnimi spremenljivkami, ki jih uporabljamo}}.

Slika 7: Osnovna koda ogrodja AngularJS

Slika 8: Osnovni prikaz kode ogrodja AngularJS



3. PRIPRAVA OKOLJA NA DELO 3.1. PRIPRAVA NA DELO V tej fazi, v kateri smo že odločeni, kaj želimo razviti v ogrodju Ionic, moramo osebni računalnik in razvojno okolje za delo najprej pripraviti na delo. To zajema konfiguracijo okolja in namestitev programov, programskih ogrodij, internetnih brskalnikov in različnih paketov za razvoj programske opreme, ki jih potrebujemo za nemoteno delo. Izberemo si tudi urejevalnik besedila. V tem delu za razvoj uporabljamo urejevalnik besedila Sublime (Sublime, 2016). Sublime ima odlične možnosti razširjanja z različnimi paketi in veliko dodatnih funkcionalnosti. Potek dela in konfiguracije okolja v tem delu so navedeni za operacijski sistem Mac OS X El Capitan in z vmesnikom z ukazno vrstico. Operacijski sistem je zadnja delujoča verzija z vsemi nameščenimi trenutnimi posodobitvami.

Konfiguracija okolja in namestitve programov:

1. XCode: najprej v uradni Applovi spletni trgovini poiščemo programsko opremo XCode in izberemo gumb za prenos (download). Počakamo glede na hitrost internetne povezave in program namestimo, ko imamo datoteko na trdem disku. Po uspešni namestitvi namestimo še programske posodobitve razvojnega okolja XCode. Pozorni moramo biti, da smo posneli simulatorje za iOS. Z naslednjimi ukazi preverimo, ali je namestitev XCoda in njegove ukazne vrstice bila uspešno izvedena, kar nam prikazuje slika 9.

Slika 9: Preverjanje namestitve XCode programske opreme v lupini



2. Java: na Oraclovi uradni spletni strani http://www.oracle.com/technetwork/java/javase/downloads/index.html (Java, 2016) poiščemo najnovejši paket Java za razvoj programske opreme (JDK) in ga prenesemo. Z naslednjim ukazom preverimo uspešno namestitev in trenutno verzijo posnetega JDK-ja, ki je naveden na sliki 10.

Slika 10: Preverjanje namestitve verzije Jave

http://www.oracle.com/technetwork/java/javase/downloads/index.html



3. Android: na uradni strani http://developer.Android.com/sdk/index.html (Android, 2016) poiščemo gumb za prenos Android Studia in izberemo možnost za prenos na trdi disk. Namestimo Android Studio. S prvim zagonom nam Studio ponudi priporočene opcije, ki jih moramo shraniti za nemoten razvoj programske opreme. V tem koraku namestimo Androidov paket za razvoj programske opreme kot tudi ostalo programsko opremo.

3a: Upravitelj programske opreme Android (SDK Manager): poiščemo gumb za konfiguracijo in izberemo Upravitelja programske opreme. Odpre se nam novo okno, v katerem imamo prikazane trenutne namestitve in katere dodatne platforme so na voljo ter orodja in strani z ažuriranimi paketi za razvoj programske opreme. Ker želimo podpreti čim večje število naprav na trgu, izberemo verzije Androida, ki so še smiselne. S slike 11 je razvidno, katere verzije programske opreme Android imamo trenutno posnete in obenem podprte za razvoj.

Slika 11: Izgled upravitelja programske opreme Android

http://developer.android.com/sdk/index.html



Imamo tudi dodaten gumb, ki odpre samostojno okno upravitelja programske opreme Android, ki je bolj pregledno in v katerem so napisane različne verzije programske opreme – kaj imamo nameščeno in česa nimamo. Na sliki 12 imamo navedeno, kaj od programske opreme Android imamo nameščeno. S slike 12 je razvidno, da imamo nameščena orodja Android SDK, platformska orodja in orodja za izgradnjo v različnih verzijah.

Slika 12: Možnosti upravitelja programske opreme Android



Na sliki 13 je prikazan potek nameščanja dodatne programske opreme za Android. Izberemo, kar želimo namestiti. Za izvedbo uspešne namestitve se moramo strinjati s pogoji licence.

Slika 13: Nameščanje dodatne programske opreme Android

Zadnji korak na sistemih OS X ali UNIX je naslednji: za delovanje programske opreme Android moramo urediti datotečno pot. Najprej ustvarimo datoteko .bash_profile, v kateri shranjujemo poti. V datoteko napišemo pot oziroma poti, ki jih bomo uporabljali. Za pravilno delovanje razvojne programske opreme Android potrebujemo tri poti, ki so tudi navedene na sliki. Te poti so za pakete za razvoj programske opreme, platformska orodja in orodja. Kasneje moramo datoteko .bash_profile tudi t. i. sourceati v ukazni vrstici. Po tem dejanju začne delovno okolje Android dejansko delovati. S slike 14 lahko razberemo datotečne poti.

Slika 14: Datotečne poti



Z ukazom echo $ANDROID_HOME v ukazni vrstici vidimo, kje je osnovna mapa Androida na našem sistemu. To nam prikazuje slika 15. S tem smo uredili Androidovo platformo za razvoj in lahko začnemo z delom. Če nimamo izpisane poti, to pomeni, da pot ni pravilno nastavljena in okolja ne moremo začeti uporabljati za delo.

Slika 15: Preverjanje Androida

4. Git je odprtokodna programska oprema za porazdeljeno dokumentiranje sprememb in izdajanje različic datotek. Deluje kot časovni stroj za shranjevanje kode, ki nam kaže spremembe kode glede na prejšnjo shranjeno verzijo. V primeru, da nam gre nekaj hudo narobe, izberemo prejšnjo verzijo programa in nadaljujemo od najbolj smiselnega dela, ko je izdelek deloval. Ionicova ukazna vrstica uporablja Git za snemanje projektnih predlog (template) (Ravulavaru, 2015). Brez Gita nam Ionic ne bo deloval. Namestimo ga preko uradne strani http://git-scm.com/downloads (Git, 2016) ali preko ukazne vrstice s programom Homebrew. Gitu dodelimo pot, kar nam prikazuje slika 14. Pravilno in ustrezno namestitev preverimo preko ukazne vrstice z ukazom git --version, kar vidimo na sliki 16.

Slika 16: Preverjanje trenutne različice Gita

5. Genymotionov posnemovalnik (emulator) Androida. Na uradni spletni strani https://www.genymotion.com/pricing-and-licensing/ (Genymotion, 2016) poiščemo brezplačno verzijo za domačo uporabo. Naredimo uporabniški račun s poljubnim imenom in geslom. Po narejenem računu prenesemo tako posnemovalnik kot lupino Genymotion. V posnemovalniku naredimo konfiguracijo virtualne naprave za kasnejše testiranje aplikacije. Slika 17 nam prikazuje napravo Samsung Galaxy S5, ki je podprta do Androida verzije 4.4.4, s programskim vmesnikom 19, z ločljivostjo zaslona 1080 x 1920 slikovnih pik in s 480 slikovnih pik na palec (dpi). Naprava ima nastavljen pomnilnik na 2048 MB in 4 procesorje. S slike 17 je razvidno tudi, da uporabljamo programsko opremo Genymotion za osebno uporabo.

http://git-scm.com/downloads

https://www.genymotion.com/pricing-and-licensing/



Slika 17: Posnemovalnik Genymotion v akciji

6. Node.js poganja aplikacije JavaScript zunaj brskalnika. Razvijalcem omogoča razvoj aplikacij v JavaScriptu, ki jih lahko poganjajo kjerkoli. Tako Ionic kot Cordova sta napisana na vrhu Node.js. Brez nameščenega Node.js na sistemu ne moremo izvajati aplikacij (Wilken, 2016).

Poiščemo uradno stran Node.js https://nodejs.org/en/ (Nodejs, 2016), izberemo zanesljivo verzijo in jo presnamemo ter namestimo. Z namestitvijo Node.js dobimo dostop do upravitelja paketov vozlišč (NPM; Node Package Manager). Z naslednjima ukazoma v ukazni vrstici preverimo, ali sta posneti pravilni verziji. Slika 18 nam prikazuje verziji Node.js in NPM-ja na sistemu. Z NPM-jem posnamemo različne pakete, ki se navezujejo na odvisnosti trenutnega izdelka, ki ga razvijamo.

Slika 18: Preverjanje verzij Node.js in NPM-ja

7. Cordova in Ionic sta glavni komponenti izdelka, ki ga razvijamo. Namestimo ju v ukazni vrstici z ukazom sudo NPM install -g cordova ionic. Pri čemer g pomeni globalno in se navezuje na uporabo za celoten sistem in ne le za trenutni, lokalni izdelek. Predpona sudo mora biti uporabljena, saj nam sistem sicer ne bo dopustil namestitve. Po namestitvi preverimo z ukazom cordova -v && ionic -v trenutni verziji programske

https://nodejs.org/en/



opreme, ki sta nameščeni. To nam prikazuje slika 19. Po preverjanju verzij namestimo še najnovejše popravke z ukazom sudo NPM update -g ionic za ionic in sudo NPM update -g cordova. Še enkrat preverimo s cordova -v && ionic -v, ali imamo ažurni verziji za uporabo.

Slika 19: Preverjanje verzij programske opreme Cordova in Ionic

3.2. KRITIČNA ANALIZA PONUDNIKOV VREMENSKIH STORITEV Za vremenske podatke smo se odločali med tremi različnimi ponudniki vremenskih storitev: The Dark Sky Forecast, Open Weather Map in Weather Underground. Vsi našteti ponudniki za uporabo svojih storitev zahtevajo registracijo z uporabniškim imenom in geslom. Z opravljeno registracijo imamo na voljo njihove storitve in dostop do podatkov v različnih formatih.

Ponudnik storitev Weather Underground:

Navedeni ponudnik ima na voljo več različnih načinov in kombinacij zakupitve storitev v 80 različnih jezikih in globalno podporo. Poleg registracije moramo podati pisno prošnjo in obrazložitev uporabe, se strinjati s pogoji uporabe in pravilno navajati knjižnico. Možnost za razvijalce je vedno brezplačna do omejenega števila klicev: 500 na dan in največ 10 na minuto. Med opcijami podatkov, ki so nam voljo, predstavljamo naslednje, ki so zanimive za izdelavo naše vremenske aplikacije:

- Alarmi za hude vremenske razmere - na voljo le za ZDA in Evropo.

- Almanah - zgodovinske temperature za do 30 let nazaj, na voljo le za ZDA.

- Astronomski podatki - vračajo lunine faze, sončni vzhod in zahod.

- Trenutne razmere - vračajo trenutno vreme, vremenska stanja, stopnjo vlažnosti, hitrost vetra, trenutni občutek temperature, pritisk in vidljivost.

- Orkan - trenutna stanja orkanov in tropskih neviht.

- Vremensko napoved za do tri dni vnaprej, ki vsebuje nizko in visoko temperaturo, tekstovno napoved in razmere.

- Vremensko napoved za do 10 dni vnaprej, ki vsebuje nizko in visoko temperaturo, tekstovno napoved in razmere.

- Geolokacijski podatki - vračajo imena mest, poštne številke, geografsko širino in dolžino ter bližnje vremenske postaje.



- Zgodovinski podatki - vračajo povzetke podatkov iskane lokacije.

- Urna napoved z urni podatki, razdeljenimi po urah.

- Urna napoved za 10 dni vnaprej - povzetki visokih in nizkih temperatur, tekstovnih napovedi in razmer.

- Satelitska napoved, ki vrača vizualizacijo v obliki datoteke GIF in infrardeče satelitske slike (Weather Underground, 2016a).

S slike 20 lahko razberemo trenutno vreme za lokacijo Vodice in vremensko napoved ob času nastanka slike (15 .3. 2016). Opazimo bogate možnosti napovedi in različnih spremenljivk vremena. Na spletni strani imamo izrisan graf z 10-dnevno napovedjo, tabelaričnim izpisom in opisnimi možnostmi. Vse navedene opcije prilagajamo trenutnim potrebam in zahtevam informacij, ki jih želimo prejeti.

Slika 20: Prikaz vremena ponudnika Weather Underground

vir: Weather Underground, 2016b

Primer klica za Ljubljano: http://api.wunderground.com/api/key/geolookup/q/Slovenia/Ljubljana.json, s katerim dobimo vremenske podatke za iskano lokacijo (Weather Underground, 2016c).

Pri uporabi knjižnice Wunderground v produkcijske namene moramo nujno prikazati logotip zaradi pogojev uporabe storitev.

http://api.wunderground.com/api/key/geolookup/q/Slovenia/Ljubljana.json



Ponudnik storitev The Dark Sky Forecast:

Knjižnica tega ponudnika je na voljo brezplačno do 1000 klicev na dan. Ko presežemo dnevno količino, se dotok podatkov zaključi oziroma postanejo plačljivi. Z registracijo na njihovi strani pridobimo unikatno številko, s katero lahko dostopamo do njihove knjižnice. Oblika zapisa podatkov je na voljo v obliki JSON. Omogoča nam dotok podatkov iz večine svetovnih lokacij in nam vrne:

- trenutne razmere,

- do minute natančno vremensko napoved, ki je na voljo za eno uro vnaprej,

- napoved v urah do 48 ur vnaprej in

- dnevno napoved do sedem dni vnaprej (The Dark Sky Forecast, 2016a).

Na voljo imamo dva glavna klica knjižnice:

- https://api.forecast.io/forecast/APIKEY/LATITUDE,LONGITUDE. S tem klicem lahko dostopamo do podatkov do enega tedna v naprej; ta način klica smo uporabili za dostop do podatkov (The Dark Sky Forecast, 2016a).

- https://api.forecast.io/forecast/APIKEY/LATITUDE,LONGITUDE,TIME. S tem klicem dostopamo do specifičnega časa, ki je na voljo za veliko lokacij. Podatki so za nekatere lokacije na voljo od 60 let nazaj pa do 10 let v prihodnost (The Dark Sky Forecast, 2016a).

Klic knjižnice omogoča naslednje lastnosti objekta JSON:

- zahtevana geografska dolžina,

- zahtevana geografska širina,

- trenutni časovni pas,

- trenutne vrednosti vremenskih razmer,

- trenutne vrednosti vremenskih razmer v minutah za naslednjo uro,

- trenutne vrednosti v urah vremenskih razmer za naslednja dva dneva in

- dnevne vrednosti vremenskih razmer za naslednji teden.

Podatkovne točke so objekti, ki predstavljajo različne vremenske vrednosti v točno določenem času in imajo različne spremenljive vrednosti.

Med vrednosti najdemo naslednje možnosti, ki sem nam zdijo uporabne:

- Čas, ki je zapisan v formatu UNIX.

- Ikone, ki so strojno berljive in jih lahko uporabimo za prikaz, denimo ikone za veter, meglo, jasno vreme, dež, sneg itd. Ikone za točo, nevihto in tornado so napovedi za prihodnost.

- Čas za sončni vzhod in zahod.

- Vrednosti minimalnih in maksimalnih vrednosti temperatur.

https://api.forecast.io/forecast/APIKEY/LATITUDE,LONGITUDE

https://api.forecast.io/forecast/APIKEY/LATITUDE,LONGITUDE,TIME



- Odklon v temperaturi.

- Temperatura, ki jo občuti človek, na voljo v minimalnih kot tudi maksimalnih vrednostih.

- Hitrost vetra.

- Pritisk.

- Stopnja vlage.

- Vidnost.

- Možnost padavin, na voljo v minimalnih kot tudi maksimalnih vrednostih.

- Možnost nevihte, trenutno na voljo le kot številski zapis v miljah do najbližje možne nevihte.

Slika 21 nam prikazuje osnovni izgled spletne strani Dark Sky s podatki (številka knjižnice je bila pobrisana zaradi varovanja podatkov), kjer tudi vidimo, koliko brezplačnih klicev imamo še na voljo v dnevu, koliko klicev smo porabili v zadnjem mesecu ali več mesecih ter osnovno uporabo klica knjižnice.

Slika 21: Prikaza števila klicev in porabljenih klicev ponudnika The Dark Sky Forecast vir: The Dark Sky Forecast, 2016b



Ponudnik storitev OpenWeatherMap:

Za uporabo ponudnika vremenskih storitev OpenWeatherMap smo se najprej registrirali na njihovi spletni strani. Z registracijo smo pridobili dostop do uporabe njihove knjižnice in storitev. Na voljo imamo različne pakete uporabe knjižnice, ki segajo od brezplačnega paketa do plačljivih paketov. V paketih ni skritih možnosti za dodatna plačila. Uporabljamo ga pod licenco CC BY-SA 4.0. Za paket se odločimo glede na potrebe aplikacije, ki jo želimo izdelati. Odločili smo se za paket, ki ni plačljiv. Nudi nam:

- do 60 klicev na minuto,

- dostop do knjižnice s trenutnim vremenom,

- dostop do knjižnice za vremensko napoved za pet dni vnaprej s podatki, ki so osveženi na tri ure,

- dostop do knjižnice z vremenskimi zemljevidi,

- 95-odstotno razpoložljivost,

- ažuriranje vremenskih podatkov na dve uri,

- center za pomoč uporabnikom in

- doživljenjsko podporo knjižnice.

S slike 22 je razviden prikaz uvodne strani spletne strani OpenWeatherMap s trenutnimi podatki vremena. Podatki so prikazani grafično in s številkami. Vreme je vidno z natančnostjo na tri ure. Podatke imamo za veter, stopnjo oblačnosti, višino pritiska, stopnjo vlažnosti, možnosti dežja, čas sončnega vzhoda in zahoda, koordinati geografske širine in dolžine. Na voljo so nam grafični prikazi po dnevnih, urah, z grafom, z zemljevidom in s satelitsko karto.

Slika 22: Prikaz vremena ponudnika OpenWeatherMap

vir: OpenWeatherMap, 2016



V knjižnici za uporabo trenutnega vremena nam je na voljo veliko število različnih lokacij z več kot 200.000 mesti. Vremenski podatki so redno ažurirani na globalnih modelih in s podatki več kot 40.000 vremenskih postaj. Vremenski podatki so na voljo v računalniških zapisih HTML, JSON in XML. Do podatkov za eno lokacijo dostopamo z imenom mesta, z identifikacijsko številko mesta, z geografskima koordinatama ali s poštno številko. Uporabimo lahko tudi klic za več mest hkrati. Odločili smo se za prikaz vremena za eno lokacijo in v obliki JSON. Med vremenskimi parametri v odzivu knjižnice v JSON obliki imamo naslednje:

- koordinati za geografsko širino in dolžino,

- vremensko ikono, skupinske vremenske parametre,

- temperaturo (osnovno na voljo v kelvinih), minimalno in maksimalno temperaturo,

- pritisk, vlažnost

- hitrost in smer vetra,

- oblačnost,

- količino dežja,

- količino snega,

- kodo države,

- identifikacijsko številko mesta,

- ime mesta in

- čas v formatu UNIX.

Osnovni klic knjižnice za trenutno vreme v Ljubljani je naslednji (številko knjižnice smo nadomestili s kodo zaradi varovanja podatkov): http://api.openweathermap.org/data/2.5/weather?q=Ljubljana&appid=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

http://api.openweathermap.org/data/2.5/forecast?q=Ljubljana&appid=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

http://api.openweathermap.org/data/2.5/forecast?q=Ljubljana&appid=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx



Slika 23 nam prikazuje vrnjen klic podatkov v obliki JSON, zaradi berljivosti olepšan s programom Postman. Iz slike razberemo podrobnosti klica in vrnjenih podatkov.

Slika 23: Prikaz vrnjenih podatkov knjižnice ponudnika OpenWeatherMap

S ponudnikom The Dark Sky smo pridobili natančne meritve vremena. Knjižnica dobro deluje pri lokalnem razvoju. Pri uporabi s posnemovalnikoma smo naleteli na napako, ki se imenuje CORS in nam onemogoča uporabo knjižnice za nadaljnjo uporabo, saj ne dobimo podatkov s strežnika knjižnice oziroma so podatki avtomatsko zavrnjeni. Mogoča nadaljnja razširitev je uporaba knjižnice forecast.io zaradi njene natančnosti podatkov in lahkotnosti uporabe. Trenutno to ni mogoče zaradi nezmožnosti uporabe njihovih storitev za namene produkcije. Imamo pa možnosti, ki bi teoretično lahko delovale, čeprav jih v teku raziskave nismo uspeli pripraviti do delovanja.

Ponudnik Weather Underground zahteva veliko avtentikacije za aplikacijo, ki se ne uporablja v nekomercialne namene. Zavedamo se, da ima na voljo natančno vremensko napoved z veliko različnimi opcijami, ki pa hitro postanejo plačljive in nam nudijo velike svobode. Možen namen bi bil v komercialni aplikaciji razvojnega studia. V tem delu smo se odločili za ponudnika Open Weather Map zaradi visokega števila klicev, ki so nam na voljo brez plačila, bogatih raznoterih opcij in enostavnosti uporabe.



4. IZDELAVA PROGRAMA 4.1. IZDELAVA APLIKACIJE Začnemo z ukazom Ionic start vremenskaAplikacija sidemenu v CLI-ju. S tem ukazom naredimo osnovno aplikacijo s stranskim menijem. Slika 24 nam prikazuje potek uspešne namestitve preko vmesnika z ukazno vrstico. Z ukazom cd vremenskaAplikacija se premaknemo v imenik vremenske aplikacije in z ukazom ls vremenskaAplikacija preverimo uspešno namestitev. Ogrodje nam naredi okvir aplikacije. Dobimo predogled, kakšen bo izgled aplikacije.

Slika 24: Uspešna namestitev nove aplikacije v terminalu



Slika 25 nam prikazuje izgled kode aplikacije v jeziku HTML. Prikazujemo glavno stran aplikacije. V izseku kode vidimo glavni del aplikacije z imenom telo. Opazimo, da telo vsebuje ng-app="weatherApp", kar pomeni, da je HTML-koda povezana s kodo AngularJS in omogoča pravilno delovanje aplikacije. V kodi imamo naslednje elemente:

- Navigacijska vsebina stranskega menija - glava je obarvana z barvo balanced, ki vsebuje gumb z zmožnostjo odpiranja stranskega menija z dodatno vsebino, in vizualno označena z navigacijsko ikono ogrodja Ionic.

- Stranski del menija, ki se desno odpira in je naslovljen z imenom My Weather - glava je obarvana z barvo energized.

- Stranski del vsebine vsebuje seznam z dvema elementoma.

- Element, ki išče mesta ali kraje katerih vreme želimo prikazati - označili smo ga z Ionicovo ikono palica, nanaša pa se na krmilnik seek, ki nam vrača podatke mest s pomočjo Googlove geolokacijske knjižnice.

- Element, ki nam prikaže graf s knjižnicami vremenskih ponudnikov in koliko zastonjskega prometa nam nudi določena knjižnica v dnevu - označili smo ga z Ionicovo ikono krožni diagram, nanaša pa se na krmilnik ploxdata, ki nam vrača podatke, prikazane s pomočjo tortnega diagrama.



Razvidna je uporaba različnih komponent za predstavitev enostavnega, a obenem funkcionalnega vmesnika. Vse komponente imajo predpono ion, kar pomeni, da uporabljamo ogrodje Ionic (Wilken, 2016).

Slika 25: Glavna HTML5-koda vremenske aplikacije



Slika 26 nam prikazuje osnovni izgled kode privzete funkcije ogrodja Ionic. Koda nam sporoča, da je platforma Ionic na voljo za uporabo ob zagonu aplikacije. Prvi if stavek nam sporoča, da je Cordovina tipkovnica privzeto skrita in ni na voljo za pomikanje po zaslonu. Statusna vrstica ima privzeto črno barvo. To opazimo v drugem if stavku, kjer je definiran stil z imenom privzeti stil. Stile lahko po potrebi spreminjamo in jih dodajamo ali odstranjujemo glede na trenutne želje in potrebe razvoja.

Slika 26: Privzeta funkcija ogrodja Ionic

S slike 27 je razvidna koda lastnega filtra AngularJS. Uporabljamo lahko filtre AngularJS, ki so privzeti že v osnovnem ogrodju, ali napišemo svoje. Naredili smo filter, ki spreminja dobljeno temperaturo iz stopinj Celzija v stopinje Fahrenheita. Rezultat smo zaokrožili na štiri decimalna mesta zaradi večje preglednosti izdelka in izpisa na omejenem prostoru mobilne naprave.

Slika 27: AngularJS filter za Fahrenheit

S sliko 28 prikazujemo kodo krmilnika ploxdata, ki je namenjen prikazu grafa v lastnem oknu. Naredili smo tortni diagram s tremi različnimi ponudniki vremena, ki prikazuje, koliko klicev dnevno teoretično lahko naredimo brezplačno. Opazimo, da izrazito izstopa ponudnik OpenWeatherMap. Na osi x grafa imamo prikazane imena in na osi y število klicev knjižnice. Vidne so tudi oznake, višina je nastavljena na 500



in širina na 320 slikovnih točk. Graf je narejen v obliki krofa in ima votlo notranjost, v kateri je ime grafa. Poimenovali smo ga z imenom "Število klicev knjižnice na dan". Krmilnik ima osnovno funkcijo s spremenljivko $scope, s katero dostopamo do notranjih podatkov funkcije krmilnika. Legenda grafa je oblikovana z robom prostora zgoraj 5, desno 0, spodaj 5 in levo 0 slikovnih točk. Podatki so shranjeni v tabelah JavaScript z imenskimi vrednostmi in s številom dovoljenih klicev dnevno. Podatke smo predstavili in zajeli na 0,001 natančno, saj se drugače ne izpišejo zaradi prevelike vrednosti knjižnice OpenWeatherMap (Angular, 2016).

Slika 28: Krmilnik za graf



S sliko 29 prikazujemo kodo krmilnika, poimenovanega seek oziroma išči. Krmilnik je narejen tako, da nam vsakič, ko vnesemo poljubno lokacijo, le-to vrne preko Googlove geolokacijske knjižnice. Klic metode seek se zgodi vsakič, ko se dotaknemo gumba. Rezultat HTTP-klica se shrani na $scope.results. Z uspešnim rezultatom klica se osveži del aplikacije, ki nam prikazuje trenutno iskane lokacije. Podatke Googlove geolokacijske knjižnice dobimo v obliki JSON (Wilken, 2016).

Slika 29: Krmilnik seek

S sliko 30 prikazujemo kodo krmilnika za prikaz vremena v razvijani aplikaciji. Krmilnik ima naslednje spremenljivke: $scope, $http, $stateParams, $ionicActionSheet, $ionicModal. Vremenske podatke dobimo s HTTP-klicem knjižnice OpenWeatherMap. Uporabili smo klic knjižnice z dodatkom forecast, kar pomeni, da dobimo vrnjene podatke za do pet dni vnaprej. Dodali smo parametre za geografsko dolžino in širino ter metrične enote. Podatke pridobimo v metričnih enotah in za lokacijo, ki smo jo definirali v krmilniku seek. Podatke klica knjižnice dobimo v zapisu JSON (Wilken, 2016). Funkcija za vreme ima dodano funkcijo, da vsakokrat, ko pomaknemo zaslon, osvežimo podatke za izbrano lokacijo. Funkcijo za vreme kličemo preko $scope.getWeather(), ki je na voljo v pogledih. Krmilnik vsebuje funkcijo za pridobitev ikone s HTTP-klicem OpenWeatherMap knjižnice. Ikono dobimo v grafičnem zapisu PNG. V tabeli koti smo definirali tudi kote pihanja vetra oziroma smeri neba. Smeri neba smo uredili v 16 različnih korakih - sever, zahod, jug, vzhod itd. S funkcijo smer smo pridobili smer pihanja vetra za določeno smer. Funkcija išče kote preko formule, ki razdeli smeri neba na približno 22 enakih delov oziroma stopinj kroga. Iz tabele se nato določi, v katero smer piha veter. Identifikacijsko številko smo odstranili zaradi varovanja podatkov.



Slika 30: Krmilnik za vreme

Spremenljivki $ioniActionSheet in $ionicModal se uporabljata za prikaz modalnih oken in preglednic. Najprej smo naredili funkcijo za prikaz modalne preglednice. Slika 31 prikazuje kodo z definirano modalno preglednico z modalnimi okni, ki jih vsebuje, in z gumbom za zaprtje preglednice. Definirali smo pet gumbov. Prvi gumb prikaže dnevno vremensko napoved za en dan vnaprej. Drugi gumb prikaže vremensko napoved za pet dni vnaprej v 12-urnih razmakih prikaza podatkov. Tretji gumb prikaže trenutne vremenske podatke v stopinjah Fahrenheita. Četrti gumb prikazuje vremenske podatke za en dan vnaprej v stopinjah Fahrenheita. Peti gumb nam prikaže vreme v 12-urnih korakih, za pet dni vnaprej v stopinjah Fahrenheita. Vsak od različnih gumbov je zadolžen za svoje modalno okno. Funkcija s parametrom id je zadolžena za odpiranje pravega modalnega okna ob pritisku le-tega.



Slika 31: Modalna preglednica z modalnimi okni

S slike 32 je razviden prikaz kode za odprtje modalnega okna. Modalno okno najprej definiramo. Pokažemo ga s funkcijo, ki je namenjena prikazu modalnega okna. Modalno okno dostopamo iz mape views/modal-chart1.html. Ob pritisku gumba, ki je določen modalnemu oknu, se le-to odpre. Za zaprtje imamo definirani dve funkciji. Prva ob dotiku gumba za zaprtje zapre modalno okno. Gumb za zaprtje je definiran v HTML-datoteki modalnega okna. Druga ga sprosti iz trenutnega pomnilnika. V primeru, da ne sprostimo pomnilnika, se aplikacija upočasni zaradi delovanja modalnega okna oziroma modalnih oken, ki tečejo v ozadju, a so nevidni uporabniku. Prikazano imamo le kodo enega modalnega okna za odpiranje, zapiranje in sproščanje iz pomnilnika. Koda se ponovi za ostala modalna okna, zato ni smiselno opisovati ponovljene kode.



Slika 32: Modalno okno s funkcijami za prikaz, odprtje in zaprtje

Na sliki 33 prikazujemo kodo za klic trenutnega vremena knjižnice OpenWeatherMap. Okno je poimenovano s trenutne razmere in obarvano z Ionicovo barvo energized. Div razreda je poimenovan z mainWeather. Trenutno vreme prikažemo z Angularjevo dvosmerno vezavo podatkov. Za trenutno vreme uporabimo forecast.list[0].main.temp. Za trenutno najvišjo temperaturo uporabimo forecast.list[0].main.temp_max. Dostop do podatkov deluje na sledeči način: klic funkcije forecast, dostopaj do tabele list z indeksom 0, dostopaj do main in do temperature. Za trenutno najnižjo temperaturo uporabimo forecast.list[0].main.temp_min. Za trenutni pritisk uporabimo forecast.list[0].main.pressure. Za trenutno vlažnost uporabimo forecast.list[0].main.humidity. Za hitrost vetra uporabimo forecast.list[0].wind.speed. Za smer vetra uporabimo klic funkcije getDirection s forecast.list[0].wind.deg. Za prikaz vremenske ikone uporabimo klic funkcije getIconUrl s forecast.list[0].weather[0].icon, za čas in datum pa forecast.list[0].dt. Vse temperature imamo navedene v temperaturah Celzija. Hitrost vetra je izražena v metrih na sekundo. Pritisk je podan v hPa (hektopaskalih). Vlažnost imamo podano v odstotkih. Čas imamo preveden iz UNIX-ovega časovnega žiga, ki je nastavljen na leto 1970. Za trenutni čas in datum uporabljamo filter, ki nastavi čas in datum v obliki dd/mm/llll, uu:mm - sekund nismo upoštevali, ker vreme knjižnice ni natančno na sekunde. Časovni žig moramo množiti s 1000, sicer ne dobimo realnega rezultata, to pomeni z milisekundami.



Slika 33: Vreme trenutnih razmer

S sliko 34 prikazujemo izgled kode zgornjega dela strani, ki prikazuje trenutno vreme. Opazimo dvosmerno vezavo podatkov za izpis imena mesta. Imamo tudi gumb, ki se odpira na desno stran za dostopanje menija z grafom in za iskanje druge lokacije. Ikona, ki označuje gumb za odpiranje okna, je Ionicova navigacijska ikona. Gumb za odpiranje opcijskega okna je označen z Ionicovo ikono več. Gumb je postavljen na levo stran. Vse imamo ovito v element za označevanje vsebine ion-content. Naredili smo osveževanje vremena na poteg po zaslonu.

Slika 34: Zgornji del strani za trenutno vreme

S sliko 35 prikazujemo kodo modalnega okna za prikaz vremenske napovedi do vključno en dan vnaprej. Naslov je označen s HTML-naslovom h1 za predstavitev pomembnosti in velikosti naslova. Glava je obarvana z barvo balanced. Gumb za zapiranje modalnega okna je poimenovan s Close. Okno zapremo s klicem funkcije hideModal(). V začetku vsebinskega elementa imamo definirano osveževanje vremena na poteg.



Slika 35: Del modalnega okna, zadolžen za osveževanje in naslov

Glava vsebinskega dela je obarvana z barvo balanced. Vsebino modalnega okna smo definirali z gradnikom seznam. Del zgradbe gradnika seznam in njegove notranjosti nam prikazuje slika 36. V gradniku imamo več različnih razredov, vsak od njih pa je zadolžen za izpis vremena na tri ure. Seznam je sestavljen iz devetih razredov Ionic thumbnail. Za vizualni način prikaza in izpis podatkov smo se odločili zaradi dobre preglednosti in učinkovite zasedenosti zaslona mobilne naprave. Gradniki posameznega razreda so označeni z naslovom h2. Slika 36 prikazuje dva razreda zaradi večje preglednosti, manjšega zasedanja prostora in ker so si razredi med seboj izredno podobni. Razlika med njimi je le dostop do podatkov. Prikazujemo ikono vremenske napovedi, trenutno vreme, datum in čas vremenske napovedi, hitrost vetra in smer vetra s pomočjo funkcije. Dostop do vremenskih podatkov je enak kot pri pogledu s trenutnim vremenom. Temperature imamo podane v stopinjah Celzija, hitrost vetra pa v metrih na sekundo.

Slika 36: Vremenska napoved za en dan vnaprej

Drugo modalno okno je definirano in prikazano na sliki 37. Naslov je označen s HTML-naslovom h1 zaradi velikosti in pomembnosti. Glavna vrstica je obarvana z Ionicovo barvo balanced. Vsebuje gumb, ki je zadolžen za zapiranje modalnega okna. V vsebinskem elementu vidimo osveževanje vremena na potisk. Glavna vrstica je obarvana z Ionicovo barvo energized. Naslov mesta oziroma lokacije je podan z dvosmerno vezavo podatkov in označen z naslovom h2.



Slika 37: Del modalnega okna, zadolženega za osveževanje in naslov

Vsebina modalnega okna za 12-urno vremensko napoved je sestavljena z gradnikom seznam, ki vsebuje komponente Ionic thumbnail, in prikazan s sliko 38. Uporabili smo 10 razredov gradnika thumbnail. Vsebina gradnika thumbnail je sestavljena iz ikone za prikaz vremena, HTML-izpisa vremenskih podatkov v obliki h2, hitrosti vetra in smeri vetra. Opazimo, da je vreme nastavljeno za prikazovanje za pet dni vnaprej z 12-urnimi razmaki. Temperature so podane v stopinjah Celzija in hitrost vetra v metrih na sekundo. Dostop do vremenskih podatkov je enak kot pri pogledu s trenutnim vremenom.

Slika 38: Vsebina modalnega okna z vremensko napovedjo za pet dni vnaprej z 12-urnimi razmaki

V aplikaciji smo naredili tudi tri dodatna modalna okna. Modalno okno 3 je zadolženo za prikaz trenutnega vremena v stopinjah Fahrenheita. Modalno okno 4 imamo narejeno za prikaz vremenske napovedi za en dan vnaprej v stopinjah Fahrenheita. Modalno okno 5 je zadolženo za prikaz vremena v stopinjah Fahrenheita za 5 dni vnaprej v 12-urnih razmikih. Koda za prikaza vremena v stopinjah Fahrenheita je enaka kot pri prikazu vremena s stopinjami Celzija, edina razlika je, da imamo pri stopinjah Fahrenheita dodani Angularjev filter, ki spreminja temperaturo iz stopinj Celzija v stopinje Fahrenheita. Odločili smo se, da ne bomo dodajali slik z identično kodo zaradi ponavljanja vsebin in enakih opisov.



S sliko 39 prikazujemo osnovna stanja premikanja po aplikaciji. Ogrodje Ionic uporablja AngularJS za premikanje po različnih stanjih. Vidimo, da moramo za uporabo najprej dodati konfiguracijsko funkcijo, ki nam omogoča premikanje po različnih pogledih. Vsako stanje je definirano: - s svojim imenom, - z URL-naslovom, kjer se nahaja pogled, - s krmilnikom, ki upravlja pogled, in - s predlogo URL-ja, kjer se nahaja predloga pogleda.

Slika 39: Stanja aplikacije

Za primer vzemimo zgradbo stanja graf. Graf je poimenovan s stanjem ploxdata, URL-naslov je /ploxdata, krmilnik, ki ga uporablja, se imenuje PloxdataController, predloga za videz pa se nahaja v mapi views/ploxdata.html. Osnovno in privzeto stanje aplikacije je nastavljeno z URL-naslovom /seek. S slike lahko 40 razberemo, da aplikacija uporablja Ionicove komponente in komponente NVD3, ki jih ima dodane kot odvisnosti. Komponente NVD3 uporabljamo za prikaz grafov (Angular, 2016). V glavi imamo predstavljeno zgradbo glavo aplikacije v formatu HTML. S slike 40 razberemo, da je širina vsebine nastavljena na širino naprave, ki bo uporabljala



aplikacijo. Uporabljamo stilne predloge iz dveh map. Osnovna Ionicova knjižnica je definirana v imeniku ionic.bundle.js, Cordova se nahaja v imeniku cordova.js, D3 pa v d3.js. Graditev D3 se nahaja v nv.d3.min.js. Angular-nvd3 se nahaja v Angular-nvd3.min.js. Aplikacija in nekaj krmilnikov se nahaja v app.js. Krmilnik za vreme se nahaja v imeniku weather.js. Krmilnik za iskanje se nahaja v seek.js.

Slika 40: Glava aplikacije

S slike 41 razberemo HTML-kodo za prikaz grafa v aplikaciji. Uporabili smo gradnik za naslov in vsebinski element za prikaz grafa. Graf se prikaže s pomočjo opcij in podatkov (Angular, 2016).

Slika 41: Koda za graf



4.2. KONČNI IZGLED APLIKACIJE S slike 42 je razviden potek delovanja aplikacije na platformah iOS in Android. Videz je različen glede na platformo, na kateri se izvaja. Razlike, ki jih opazimo, so različne velikosti fontov, platforma iOS ima predstavljeno poštno številko lokacije, medtem ko je Android ne prikazuje. Razlika je vidna tudi v prikazu opcij za modalna okna med platformama, na platformi iOS imamo lepo obliko, medtem ko Androidova ni med najlepšimi. S slike 42 razberemo trenutni temperaturi za mesti Koper in Ljubljana ob času pisanja naloge. Razberemo tudi dnevni maksimalni in minimalni temperaturi. Glavna stran prikazuje še trenutni zračni pritisk lokacij, stopnjo vlažnosti, hitrost in smer vetra. Opazimo datum in trenutni čas vremenske napovedi za lokaciji ter ikono, ki ponazarja stanje vremena. Na desni strani imamo gumb za odpiranje opcij, na levi pa gumb za odpiranje modalnih oken.

Slika 42: Primerjava izgleda trenutnega vremena na dveh različnih platformah



Dnevna vremenska napoved je prikazana s sliko 43. Opazimo trenutno vremensko napoved dveh različnih lokacij za en dan vnaprej v razmakih po tri ure. Vremenska napoved nam prikazuje trenutno temperaturo, čas in datum, hitrost vetra in smer pihanja vetra. Pri ikonah z vremenom opazimo menjavanje dneva in noči. Vrstica z naslovom vsebuje gumb za zapiranje okna.

Slika 43: Primerjava izgleda vremena za en dan vnaprej na dveh različnih platformah



Petdnevno vremensko napoved vnaprej z 12-urnimi koraki prikazujemo na sliki 44. Razvidne so različne ikone grafičnega napovedovanja vremenske napovedi. Temperatura na sliki 45 je podana v stopinjah Fahrenheita. Lokaciji sta enaki kot na ostalih slikah, ki jih prikazujemo z vremenom v tem delu. Opazimo hitrost vetra, čas in datum vremenske napovedi za določen čas. Razvidno je tudi prehajanje dneva in noči. V vrstici z naslovom imamo gumb za zapiranje okna.

Slika 44: Primerjava izgleda vremena za pet dni vnaprej na dveh različnih platformah



Grafično predstavitev grafa predstavljamo s sliko 45, iz katere je razvidno, koliko dnevnih klicev knjižnice nudi posamezen ponudnik le-te. Z različnimi barvami so predstavljeni različni ponudniki vremenskih storitev. Graf je oblikovan z obliko krofa, kar pomeni, da ima votlo notranjost, v kateri je prikazan naslov. Na strani iOS smo predstavili razliki med ponudnikoma Wunderground in Forecastio, medtem ko imamo na levi predstavljeni razliki med ponudnikoma vremenskih knjižnic OpenWeatherMap in Weather Underground. Opazimo tudi, da ima tisti ponudnik, ki trenutno ni izbran, zraven svojega napisa drugačno obliko ikone. S tem opazimo, da se zaradi boljše berljivosti in končnega vtisa izdelka ne spreminja dinamično le graf, ampak tudi trenutna vsebina, ki je ne uporabljamo,. V naslovni vrstici imamo gumb za zapiranje okna.

Slika 45: Grafična predstavitev knjižnic



4.2.2. Izgled aplikacije s posnemovalnikoma Na sliki 46 predstavljamo potek aplikacije s posnemovalnikom Genymotion za osebno uporabo. Razberemo lahko vreme za lokacijo Ljubljana. Pri delovanju posnemovalnika je razviden osnovni videz platforme Android z njenimi značilnostmi.

Slika 46: Posnemovalnik Genymotion pri delovanju

S sliko 47 predstavljamo aplikacijo v teku s posnemovalnikom iOS. Predstavljamo trenutno temperaturo lokacije Koper. Vidimo, da je izpis vremena enak kot z brskalnikom na računalniku. Posnemovalnik deluje kot prava Applova mobilna naprava z njenimi značilnostmi.

Slika 47: Posnemovalnik iOS v teku



5. ZAKLJUČKI 5.1. OCENA UČINKOV

V tem delu smo predstavili potek razvoja prototipa aplikacije od začetka snovanja do delovanja v brskalnikih in posnemovalnikih. Delo smo začeli s prebiranjem in pregledovanjem aktualne literature in trenutnih smernic razvoja. Zavedati se moramo, da se mobilni trg aplikacij dnevno razširja, dopolnjuje in inovira. To pomeni, da izdelek, na katerem delamo, lahko v primeru podaljšanega razvoja zaradi neobvladovanja programskega jezika, ogrodij in ostalih tehnologij razvoja ob izidu ni več zadovoljiv. Rešitev smo sprotno dodelovali in izboljševali z branjem literature, internetnih virov in sledenju aktualnim informacijam na spletu. S teoretično podprtimi smernicami in ob spremljanju trenutnih razvojnih tehnik izdelave programske opreme smo začeli s snovanjem in razvojem prototipa mobilne hibridne aplikacije za prikaz vremenske napovedi. Pri našem razvoju prototipa mobilne hibridne aplikacije je potek razvoja hitrejši v primerjavi z razvojem izvorne aplikacije zaradi pokritja večjega segmenta trenutnega trga in tržnega deleža. Rešitev je narejena z jeziki HTML5, CSS3 in AngularJS, ki so vsi mobilno izboljšani in nadgrajeni za hitrejše izvajanje v aplikaciji. Vse to povezuje ogrodje Ionic, ki sloni na platformi Apache Cordova. Za videz aplikacije smo izbrali dizajn s stranskim menijem zaradi boljše preglednosti in učinkovite zasedenosti zaslonskega prostora mobilne naprave. Aplikacija je narejena z osnovnega pogleda, ki služi iskanju lokacije po poštni številki, imenu kraja ali imenu lokacije. Naredili smo desnostranski meni z gumbom za odprtje dveh različnih opcij. Prva nas napoti nazaj na osnovno stran, kjer iščemo lokacijo ali mesto. Z drugo se premaknemo na grafično predstavitev ponudnikov knjižnic za vremensko napoved. Na pogledu, s katerim imamo prikazano vreme za trenutno lokacijo, opazimo v levem zgornjem kotu gumb za odprtje modalne preglednice z dodatnimi definiranimi modalnimi okni. Vsako modalno okno nam predstavi vreme z različno vremensko napovedjo. Prvo in četrto modalno okno sta zadolženi za prikaz vremenske napovedi za en dan vnaprej. Prvo modalno okno ima zapis v stopinjah Celzija, medtem ko četrto okno prikazuje vreme v stopinjah Fahrenheita. Drugo in peto okno sta zadolženi za vremensko napoved za pet dni vnaprej z 12-urnimi razmaki. Tudi pri teh dveh oknih je enaka porazdelitev stopinj, prvo s stopinjami Celzija in drugo s stopinjami Fahrenheita. Tretje modalno okno izpisuje trenutne vremenske podatke v stopinjah Fahrenheita. Program smo povezali s knjižnico za dostop do aktualnih vremenskih podatkov. Podatki so ažurni in hitri z dovolj širokim dnevnim razponom brezplačnih klicev knjižnice ponudnika OpenWeatherMap. Program je odziven in ažurno prikaže želene podatke, brez ustavljanja in zamikov. Osveževanje vremena je narejeno na poteg po zaslonu navzdol, s čimer pridobimo najnovejšo vremensko napoved.



5.2. MOŽNOSTI NADALJNJEGA RAZVOJA Ena izmed možnih dopolnitev rešitve bi bila dodajanje različnih knjižnic za prikaz in izpis slike trenutne lokacije ali mesta v obliki ozadja zaslona. Lahko bi naredili možnost shranjevanja različnih lokacij, ki bi jih imeli shranjene ali prednastavljene za hitro spremljanje vremenskih napovedi nam priljubljenih krajev. Moramo se zavedati, da dodajanje vsebine in več različnih knjižnic pomeni večjo porabo sistemskih virov in višjo obremenitev zaradi večjega števila sistemskih procesov, ki se izvajajo. Pri mobilni napravi pa pomeni večja obremenitev in obširnejša aplikacija z lepimi slikami krajši čas baterije. Kar pomeni, da barvita, lepa, kičasta in z veliko slikami podprta aplikacija ne bo prinesla velikega tržnega uspeha zaradi prehitre izpraznitve baterije mobilne naprave in tudi počasnejšega izvajanja. Možna dodelava je mogoča z uporabo druge knjižnice, ki nam nudi bolj natančne podatke o vremenu. Knjižnica Forecast trenutno ne deluje zaradi nekaterih omejitev v ogrodju Ionic, ki nam jih ni uspelo urediti in zaobiti. Zavedati se moramo, da za večkratno uporabo knjižnice Forecast hitro začnemo plačevati. Pri knjižnici Wunderground moramo začeti plačevati še hitreje od Forecasta. Na trgu imamo še druge ponudnike vremena, ki za svojo uporabo zahtevajo denarna sredstva. Razviti prototip nam pokaže zmožnosti ogrodij Ionic in Cordova. Menimo, da je idealno orodje za izdelavo dobrih, hitrih in zanesljivih prototipov. Mobilne hibridne aplikacije so novi trend razvoja, s katerimi se spletni razvijalci dotaknejo tržnega deleža izvornih aplikacij in lahko konkurirajo z mobilnimi aplikacijami v mobilnih trgovinah.



LITERATURA IN VIRI

- Android, https://developer.Android.com/sdk/index.html, 29. 2. 2016

- Angular, http://krispo.github.io/angular-nvd3/#/, 10. 3. 2016

- Bohner M (2015), Building mobile apps with Ionic Framework

- Cordova, https://cordova.apache.org/docs/en/latest/guide/overview/, 16. 2. 2016

- CSS3, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3, 16. 2. 2016

- Genymotion, https://www.genymotion.com/pricing-and-licensing/, 2. 3. 2016

- Git, https://git-scm.com/downloads, 1. 3. 2016

- HTML5, https://www.w3.org/TR/html5/introduction.html#background, 16. 2. 2016

- Ionic, http://ionicframework.com/docs/api/, 16. 2. 2016 a

- Ionic, http://ionicframework.com/docs/components/#utility, 16. 2. 2016 b

- Ionic, http://ionicframework.com/docs/components/, 16. 2. 2016 c

- Ionic, http://ionicframework.com/docs/api/, 16. 2. 2016 č

- Java, http://www.oracle.com/technetwork/java/javase/downloads/index.html, 28. 2. 2016

- Khanna R (2016), Getting Started with Ionic, Birmingham: Packt Publishing

- NodeJs, https://nodejs.org/en/ 10. 3. 2016

- Open Weather Map, http://openweathermap.org/city, 1. 3. 2016

- Phan H (2015), Ionic Cookbbok, Birmingham: Packt Publishing

- Ravulavaru A (2015), Learning Ionic, Birmingham: Packt Publishing

- Ruebbelke L (2015), AngularJS in Action, Shelter Island: Manning Publication Co.

- Sublime, https://www.sublimetext.com/, 28. 2. 2016

- The Dark Sky Forecast, https://developer.forecast.io/docs/v2, 15. 3. 2016 a

- The Dark Sky Forecast, https://developer.forecast.io/, 3. 3. 2016 b

- Wargo MJ (2013), Apache Cordova 3 Programming, New Yersey: Pearson

Education, Inc

- Weather Underground, https://www.wunderground.com/weather/api/d/docs?d=data/index, 15. 3. 2016 a

- Weather Underground, http://www.wunderground.com/q/zmw:00000.15.13014 , 15. 3. 2016 b

- Weather Underground, http://api.wunderground.com/api/key/geolookup/q/Slovenia/Ljubljana.json, 15. 3. 2016 c

- Wilken J (2016), Ionic in Action, Shelter Island: Manning Publication Co.

https://developer.android.com/sdk/index.html

http://krispo.github.io/angular-nvd3/#/

https://cordova.apache.org/docs/en/latest/guide/overview/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3

https://www.genymotion.com/pricing-and-licensing/

https://git-scm.com/downloads

https://www.w3.org/TR/html5/introduction.html#background

http://ionicframework.com/docs/api/

http://ionicframework.com/docs/components/#utility

http://ionicframework.com/docs/components/

http://ionicframework.com/docs/api/

http://www.oracle.com/technetwork/java/javase/downloads/index.html

https://nodejs.org/en/

http://openweathermap.org/city

https://www.sublimetext.com/

https://developer.forecast.io/docs/v2

https://developer.forecast.io/

http://bookdl.com/authors/john-m-wargo/

https://www.wunderground.com/weather/api/d/docs?d=data/index

http://www.wunderground.com/q/zmw:00000.15.13014

http://api.wunderground.com/api/key/geolookup/q/Slovenia/Ljubljana.json



KAZALO SLIK Slika 1: Potek izvajanja ogrodij Cordova in Ionic (Wilken, 2016) .............................. 2

Slika 2: Mobilne arhitekture ena ob drugi (Wilken, 2016) ......................................... 6

Slika 3: Osnovni izgled kode HTML5 ......................................................................... 7

Slika 4: Osnovni izgled kode CSS3 ............................................................................ 7

Slika 5: Osnovni prikaza ogrodja Ionic pri delovanju ................................................. 9

Slika 6: Osnovni izgled Ionicove HTML5-kode ......................................................... 10

Slika 7: Osnovna koda ogrodja AngularJS ............................................................... 12

Slika 8: Osnovni prikaz kode ogrodja AngularJS ..................................................... 12

Slika 9: Preverjanje namestitve XCode programske opreme v lupini ....................... 13

Slika 10: Preverjanje namestitve verzije Jave ......................................................... 14

Slika 11: Izgled upravitelja programske opreme Android ........................................ 15

Slika 12: Možnosti upravitelja programske opreme Android .................................... 16

Slika 13: Nameščanje dodatne programske opreme Android .................................. 17

Slika 14: Datotečne poti ......................................................................................... 17

Slika 15: Preverjanje Androida ................................................................................ 18

Slika 16: Preverjanje trenutne različice Gita ............................................................ 18

Slika 17: Posnemovalnik Genymotion v akciji .......................................................... 19

Slika 18: Preverjanje verzij Node.js in NPM-ja ........................................................ 19

Slika 19: Preverjanje verzij programske opreme Cordova in Ionic .......................... 20

Slika 20: Prikaz vremena ponudnika Weather Underground (Weather Underground, 2016b) .................................................................................................................... 21

Slika 21: Prikaza števila klicev in porabljenih klicev ponudnika The Dark Sky Forecast ............................................................................................................................... 23

Slika 22: Prikaz vremena ponudnika OpenWeatherMap (OpenWeatherMap, 2016) . 24

Slika 23: Prikaz vrnjenih podatkov knjižnice ponudnika OpenWeatherMap ............. 26

Slika 24: Uspešna namestitev nove aplikacije v terminalu ...................................... 27

Slika 25: Glavna HTML5-koda vremenske aplikacije ................................................ 29

Slika 26: Privzeta funkcija ogrodja Ionic ................................................................. 30

Slika 27: AngularJS filter za Fahrenheit ................................................................... 30

Slika 28: Krmilnik za graf ........................................................................................ 31

Slika 29: Krmilnik seek ............................................................................................ 32

Slika 30: Krmilnik za vreme .................................................................................... 33

Slika 31: Modalna preglednica z modalnimi okni ..................................................... 34

Slika 32: Modalno okno s funkcijami za prikaz, odprtje in zaprtje ........................... 35

Slika 33: Vreme trenutnih razmer ........................................................................... 36

Slika 34: Zgornji del strani za trenutno vreme ........................................................ 36

Slika 35: Del modalnega okna, zadolžen za osveževanje in naslov ......................... 37

Slika 36: Vremenska napoved za en dan vnaprej .................................................... 37

Slika 37: Del modalnega okna, zadolženega za osveževanje in naslov .................... 38

Slika 38: Vsebina modalnega okna z vremensko napovedjo za pet dni vnaprej z 12-urnimi razmaki ................................................................................................... 38

Slika 39: Stanja aplikacije ....................................................................................... 39

Slika 40: Glava aplikacije ........................................................................................ 40

Slika 41: Koda za graf ............................................................................................. 40

Slika 42: Primerjava izgleda trenutnega vremena na dveh različnih platformah ...... 41



Slika 43: Primerjava izgleda vremena za en dan vnaprej na dveh različnih platformah ............................................................................................................................... 42

Slika 44: Primerjava izgleda vremena za pet dni vnaprej na dveh različnih platformah ............................................................................................................................... 43

Slika 45: Grafična predstavitev knjižnic ................................................................... 44

Slika 46: Posnemovalnik Genymotion pri delovanju ................................................ 45

Slika 47: Posnemovalnik iOS v teku ........................................................................ 45



KRATICE IN AKRONIMI AngularJS: optimizirano ogrodje programskega jezika JavaScript API: knjižnica, vmesnik, ki zagotavlja, da ima računalniški program

na razpolago funkcije operacijskega sistema ali drugega računalniškega programa

Aplikacija: računalniški program, namenjen uporabniku za opravljanje

določenih nalog CLI: vmesnik z ukazno vrstico, uporabniški vmesnik, pri katerem se

ukaze vtipkava v ukazni vrstici Command prompt: ukazna kazalka, kazalka v vrstici ukazne lupine, ki nakazuje

pričakovani vnos podatkov, npr. ukaza Content: vsebina, podatki, ki so na voljo uporabniku aplikacije Controller: krmilnik, del programa, ki uravnava prenos podatkov med

računalnikom in zunanjimi napravami, v primeru aplikacije med pogledom in modelom

Cordova: nižje nivojske ogrodje za razvoj hibridnih aplikacij CORS: Cross-Origin Resource Sharing - pravila brskalnika, ki aplikaciji

omogočajo dostop in nalaganje podatkov druge domene. Privzeto brskalniki blokirajo dostop. Če knjižnica podpira CORS in zaupamo izvoru podatkov, lahko nalagamo podatke.

CSS3: Cascading Style Sheet - stilna predloga na spletni strani, v kateri

je zapisana oblika spletne strani C#: splošno uporaben objektno usmerjen psevdokodni programski

jezik, ki temelji na C++, Javi in Delphiju Dependency: odvisnost, neposredna ali posredna odvisnost enega procesa ali

dejavnosti od druge DOM: Document Object Model - objektni model dokumenta, dogovor

o predstavitvi in programskem dostopu do elementov HTML, XHTML in XML

Emulator: posnemovalnik, program ali naprava, ki omogoča računalniku

posnemati delovanje druge naprave, v našem primeru sta to to pametna telefona z operacijskima sistemoma iOS in Android



Framework: programsko ogrodje, opis vseh gradnikov programskega sistema ter medsebojnih povezav med gradniki, nabor osnovnih gradnikov, na primer programje, programske knjižnice, razredi, procesi, koncepti

Gumb: aktivno območje na zaslonu, ki ob posredovanju z miško ali ob

dotiku s prstom sproži želeno dejanje Header: glava, enota podatkov pred podatkovnim poljem v protokolni

podatkovni enoti Hibridna aplikacija: aplikacija, ki deluje na različnih platformah, dostopa do funkcij izvornih aplikacij HTML: HyperText Markup Language - označevalni jezik za oblikovanje

večpredstavnostnih dokumentov, ki omogoča povezave znotraj dokumenta ali med dokumenti

Icon: ikona, gradnik, ki s simbolom, sličico na zaslonu ponazarja

datoteko, imenik, program Ionic: ogrodje za razvoj hibridnih aplikacij ionicActionSheet: akcijska preglednica, podrejeno okno, ki ne dovoli uporabe

glavnega okna in njemu podrejenih oken, dokler je odprto ionicModal: modalno okno, podrejeno okno, ki ne dovoli uporabe glavnega

okna in njemu podrejenih oken, dokler je odprto Java: splošno uporaben, objektno usmerjen psevdokodni programski

jezik JavaScript: splošno uporaben skriptni programski jezik, sintaktično

podoben Javi JSON: JavaScript Object Notation - zapis podatkov v objektnem načinu

programskega jezika JavaScript List: seznam, v zaporedje urejena končna množica elementov Native aplikacija: izvorna aplikacija, aplikacija, ki je narejena in se izvaja le za

določen programski jezik in platformo NPM: Node Package Manager - upravitelj vozliščnih paketov,

uporablja se za namestitev novih paketov za razvoj aplikacij, ki so vezane na Node.js



Plug-in: vtičnik, program, ki razširja funkcionalnost osnovnega programa

Service: storitev, naloga, ki jo izvede naprava, programska komponenta na zahtevo druge naprave, programske komponente, uporabnika

SDK: paket za razvoj programske opreme, nabor razvojnih orodij,

knjižnic in dokumentacije, ki omogoča ustvarjanje aplikacij za določen programski paket, računalniški ali programski sistem

Subheader: podglava, enota podatkov pod podatkovnim poljem v protokolni

podatkovni enoti Swift: Applov splošno uporaben, objektno usmerjen psevdokodni

programski jezik Thumbnail: predogledna sličica, pomanjšana slika, del slike, ki se uporablja

pri iskanju slik URL: enolični krajevnik vira, naslovni sistem za določanje lokacije

elektronskega vira v računalniškem omrežju, sestavljen iz navedbe protokola in identifikatorja servisa

WebView: spletni pogled, kar je vidno uporabniku spletne aplikacije WWW: World Wide Web - svetovni splet, internetna storitev, ki

omogoča dostop do spletnih strani, spletnih dokumentov, povezanih s hiperpovezavami v porazdeljeni informacijski sistem

XML: Extensible Markup Language - razširljivi označevalni jezik,

format podatkov za izmenjavo strukturiranih dokumentov v spletu

Documents

RAZVOJ MOBILNE HIBRIDNE APLIKACIJE NA ...Magistrsko delo Organizacija in management informacijskih sistemov RAZVOJ MOBILNE HIBRIDNE APLIKACIJE NA PLATFORMI APACHE CORDOVA/IONIC ZA