T development of a simple hybrid mobile application for education for the Android operating system

Full text

(1)UNIVERZA V MARIBORU FAKULTETA ZA NARAVOSLOVJE IN MATEMATIKO Oddelek za matematiko in računalništvo. DIPLOMSKO DELO. Marko Merčnik. Maribor, 2016.

(2)

(3) UNIVERZA V MARIBORU FAKULTETA ZA NARAVOSLOVJE IN MATEMATIKO Oddelek za matematiko in računalništvo. Diplomsko delo. RAZVOJ PREPROSTE HIBRIDNE MOBILNE APLIKACIJE ZA IZOBRAŽEVANJE ZA OPERACIJSKI SISTEM ANDROID.. Mentor:. Kandidat:. izr. prof. dr. Krista Rizman-Žalik. Marko Merčnik. Maribor, 2016.

(4) ZAHVALA. Zahvaljujem se svoji mentorici izr. prof. dr. Kristi Rizman Žalik za strokovno svetovanje in usmerjanje ter spodbudo pri nastajanju moje diplomske naloge. Zahvaljujem se tudi vsem ostalim, ki so me med študijem podpirali in verjeli vame.. Vsem iskreno hvala..

(5) UNIVERZA V MARIBORU FAKULTETA ZA NARAVOSLOVJE IN MATEMATIKO. IZJAVA. Podpisani Marko Merčnik, rojen 13.aprila. 1983, študent Fakultete za naravoslovje in matematiko Univerze v Mariboru, študijskega programa Računalništvo in Proizvodno tehnična vzgoja, izjavljam, da je diplomsko delo z naslovom RAZVOJ PREPROSTE HIBRIDNE MOBILNE APLIKACIJE ZA IZOBRAŽEVANJE ZA OPERACIJSKI SISTEM ANDROID pri mentorici izr. prof. dr. Kristi Rizman Žalik avtorsko delo. V diplomskem delu so uporabljeni viri in literatura korektno navedeni; teksti in druge oblike zapisov niso uporabljeni brez navedbe avtorjev.. _________________________ (podpis študenta). Maribor, 20. junij 2016.

(6) MERČNIK, M.: Razvoj preproste hibridne mobilne aplikacije za izobraževanje za operacijski sistem Android. Diplomska delo, Univerza v Mariboru, Fakulteta za naravoslovje in matematiko, Oddelek za matematiko in računalništvo, 2016. IZVLEČEK Mobilne aplikacije so nepogrešljivi del današnjih mobilnih naprav, saj razširijo uporabnost izvorno nameščenega mobilnega operacijskega sistema. Namenske mobilne aplikacije najdemo na področju izobraževanja, dela in zabave. Pri izdelavi mobilnih aplikacij imamo na voljo več pristopov in tehnologij, ki jih izberemo glede na kompleksnost in zahtevnost razvoja ter želeni doseg aplikacije. V diplomskem delu smo preučili možnost uporabe mobilnih aplikacij in mobilnih naprav za izobraževanje Izdelali smo hibridno mobilno aplikacijo za izvedbo izobraževalnega tečaja. Pri izdelavi smo uporabili uveljavljene spletne tehnologije in programska ogrodja. Cilj diplomskega dela je izdelati izobraževalno aplikacijo z odlično uporabniško izkušnjo. Končne ugotovitve potrjujejo, da so hibridne mobilne aplikacije primerne za uporabo na področju izobraževanja. Izdelava preprostih aplikacij je relativno preprosta, pri tem mora imeti razvijalec aplikacij dobro znanje spletnega programiranja. Izdelana aplikacija potrjuje, da je uporabniška izkušnja pri uporabi hibridne mobilne aplikacije zadovoljiva.. Ključne besede:. mobilna aplikacija, JavaScript, mobilni operacijski sistemi, spletni brskalnik, uporabniška izkušnja, Ionic, Node.js, mobilne naprave, Android.

(7) MERČNIK, M.: The development of a simple hybrid mobile application for education for the Android operating system Graduation Thesis, University of Maribor, Faculty of Natural Sciences and Mathematics Maribor, Department of Mathematics and Computer Science, 2016. ABSTRACT Mobile apps are an indispensable part of today's mobile devices, as they extend the applicability of originally installed mobile operating system. A dedicated mobile applications can be found in the broad field of education, work and entertainment. When creating mobile applications, we have several approaches and technologies that can be selected, depending on the complexity of the development and the desired reach of applications.. In this thesis, we consider the use of mobile applications and mobile devices for educational purposes. We have produced a hybrid mobile app for the implementation of the training course. In the development we have used established Internet technologies and software frameworks. The objective of the thesis was to develop an educational app with a great user experience.. Final findings indicate that the hybrid mobile applications are suitable for use in the field of education. Making simple application is relatively simple, if the application developer has a good knowledge of web programming. The findings also show that the user experience when using hybrid mobile applications is satisfactory.. Keywords: mobile application, JavaScript, mobile operating systems, web browser, user experience, Ionic, Node.js, mobile devices, Android.

(8) SEZNAM UPORABLJENIH KRATIC IN SIMBOLOV API – (angl.) Application programming interface; Vmesnik uporabniškega programa SDK – (angl.) Software development kit; Komplet programskih orodij za razvoj programske opreme URI - (angl.) Uniform Resource Identifier; enoten identifikator vira HTML - (angl.) Hyper Text Markup Language; označevalni jezik za hiperbesedilo CSS - (angl.) Cascading Style Sheets; kaskadne stilske podloge HTTP – (angl.) Hypertext Transfer Protocol JSON – (angl.) JavaScript Object Notation BSON – (angl.) Binary JavaScript Object Notation DOM – (angl.) Document Object Model; Dokumentni objekti model ECMA – (angl.) European Computer Manufacturers Association AJAX - (angl.) Asynchronous JavaScript and XML PDF - (angl.) Portable Document Format; Prenosni dokumentni zapis XML - (angl.) Extensible Markup Language; Razširljiv označevalni jezik NPM – (angl.) Node Pachage Manager; Upravljalec paketov za okolje Node.js DNS – (angl.) Domain Name System REST – (angl.) Representational state transfer IDE – (angl.) Integrated development enviroment; Integrirano programsko okolje PDA – (angl.) Personal data assistant.

(9) KAZALO VSEBINE. 1.. UVOD ......................................................................................................................... 1. 2.. MOBILNE APLIKACIJE ................................................................................................. 2 2.1 Mobilne naprave ...................................................................................................... 2 2.2 Mobilni operacijski sistemi ..................................................................................... 3 2.2.1 Operacijski sistem Android .............................................................................. 4 2.2.2 Operacijski sistem iOS ..................................................................................... 6 2.2.3 Ostali mobilni operacijski sistemi .................................................................... 6 2.3 Tipi mobilnih aplikacij: ........................................................................................... 7 2.3.1 Nativne mobilne aplikacije ............................................................................... 7 2.3.2 Spletne mobilne aplikacije – mobilne spletne strani ........................................ 8 2.3.3 Hibridne mobilne aplikacije ............................................................................. 9 2.4 Uporabniška izkušnja ............................................................................................ 11 2.5 Primeri izobraževalnih mobilnih aplikacij ............................................................ 12. 3.. OSNOVNE TEHNOLOGIJE ZA RAZVOJ HIBRIDNIH MOBILNIH APLIKACIJ ................... 14 3.1 Spletni brskalniki ................................................................................................... 14 3.1.1 Pregled spletnih brskalnikov .......................................................................... 14 3.1.2 WebView in WebKit ...................................................................................... 16 3.2 HTML in CSS........................................................................................................ 17 3.3 JavaScript .............................................................................................................. 19 3.4 Node.js ................................................................................................................... 20 3.5 Orodje Ionic Framework ....................................................................................... 22 3.5.1 Gradniki .......................................................................................................... 23 3.5.2 AngularJS ....................................................................................................... 24 3.6 Apache Cordova .................................................................................................... 25. 4.. RAZVOJNO OKOLJE ............................................................................................ 26 4.1 Urejevalnik kode.................................................................................................... 26 4.2 Nadzor kode........................................................................................................... 26 4.3 Vagrant .................................................................................................................. 27. 5.. RAZVOJ HIBRIDNE MOBILNE APLIKACIJE ................................................... 27.

(10) 5.1 Načrtovanje aplikacije za izvedbo izobraževalnega tečaja.................................... 27 5.1.1 Osnovne zahteve in struktura aplikacije ......................................................... 27 5.1.2 Uporabniški vmesnik ...................................................................................... 28 5.1.3 Podatkovna baza ............................................................................................. 28 5.2 Kodiranje ............................................................................................................... 29 5.2.1 Priprava razvojnega okolja z Vagrantom ....................................................... 30 5.2.2 Razvoj strežniške programske kode z Node.js in MongoDB ......................... 31 5.2.3 Razvoj hibridne mobilne aplikacije s programskima ogrodjema. Ionic in. Apache Cordova ...................................................................................................... 35 5.2.4 Avtentifikacija in avtorizacija uporabnikov: .................................................. 36 5.2.5 Preverjanje znanja .......................................................................................... 37 5.3 Testiranje aplikacije............................................................................................... 40 5.4 Prenosljivost hibridne mobilne aplikacije ............................................................. 40 6.. ZAKLJUČEK .......................................................................................................... 41. 7.. LITERATURA IN VIRI ................................................................................................. 42.

(11) KAZALO SLIK SLIKA 1: MOBILNI TELEFON IPHONE IN TABLIČNI RAČUNALNIK IPAD .................................... 3 SLIKA 2: SISTEMSKA ARHITEKTURA OPERACIJSKEGA SISTEMA ANDROID .............................. 5 SLIKA 3: KLJUČNE LASTNOSTI TIPOV MOBILNIH APLIKACIJ .................................................... 7 SLIKA 4: MOBILNA APLIKACIJA ALGODOO .......................................................................... 12 SLIKA 5: UPORABNIŠKI VMESNIK MOBILNE APLIKACIJE COURSERA ..................................... 13 SLIKA 6: APLIKACIJA ZA UČENJE TUJIH JEZIKOV DUOLINGO ................................................ 13 SLIKA 7: PRIKAZ OSNOVNE FUNKCIONALNOSTI SPLETNEGA BRSKALNIKA. ........................... 14 SLIKA 8:OSNOVNI POTEK UPODABLJANJA SPLETNE STRANI V POGONU WEBKIT .................. 16 SLIKA 9: PRIKAZ ZGORNJEGA PRIMERA V BRSKALNIKU ........................................................ 18 SLIKA 10: PRIMER CSS KOMPONENTE GUMBA V PROGRAMSKEM OGRODJU IONIC................ 23 SLIKA 11: ARHITEKTURA PROGRAMSKEGA OGRODJA APACHE CORDOVA ........................... 25 SLIKA 12: PRIMER MODELA UPORABNIŠKEGA VMESNIKA ZA NAŠO APLIKACIJO.................... 28 SLIKA 13: ARHITEKTURNI DIAGRAM RAZVOJNEGA OKOLJA, POVZETO PO ............................ 30 SLIKA 14: ZAPIS IZOBRAŽEVALNIH TEČAJEV V MONGODB PODATKOVNI ZBIRKI ................. 32 SLIKA 15: ZAKLJUČNI TEST PRI POSAMEZNEM TEČAJU ......................................................... 33 SLIKA 16: GLAVNI MENI APLIKACIJE .................................................................................... 35 SLIKA 17: UPORABA FOTOAPARATA PRI INDIVIDUALNI NALOGI ........................................... 38.

(12) 1. UVOD Množična uporaba pametnih telefonov z operacijskima sistemoma Android in iOS predstavlja danes velik tržni potencial na področju mobilnih aplikacij. Razvoj mobilnih aplikacij danes ni več omejen samo na nativne aplikacije, temveč imajo razvijalci možnost razvijati tudi hibridne mobilne aplikacije in mobilne spletne aplikacije – mobilne spletne strani. Za spletne razvijalce to v praksi pomeni, da lahko z uporabo obstoječega znanja spletnih jezikov in tehnologij izdelajo aplikacije, ki delujejo na mobilnih napravah, pri tem pa jim ni treba obvladati izdelave izvornih aplikacij. Primer teh aplikacij so hibridne mobilne aplikacije. Te so vmesna stopnja med izvornimi in spletnimi mobilnimi aplikacijami in omogočajo uporabniku dostop do nekaterih funkcionalnosti naprave (kamera, različni senzorji), do katerih mobilna spletna aplikacija nima dostopa. Vlogo komunikacije med aplikacijo in operacijskim sistem prevzame vmesni sloj programske opreme s svojimi vtičniki. V prvem delu diplomske naloge predstavimo mobilne operacijske sisteme in ključne razlike med posameznimi vrstami mobilnih aplikacij. V tem delu tudi preučimo osnovne smernice za dobro uporabniško izkušnjo pri uporabi aplikacij. Uporabniško izkušnjo opazujemo na primerih obstoječih izobraževalnih mobilnih aplikacij. Nato sledi pregled tehnologij, ki nam omogočajo izdelavo hibridnih mobilnih aplikacij. Drugi del diplomske naloge je namenjen načrtovanju in razvoju preproste hibridne mobilne aplikacije, ki učiteljem in mentorjem omogočala izvedbo in preverjanje krajših učnih lekcij. Pri razvoju uporabimo odprtokodne tehnologije in orodja. Za izdelavo hibridne mobilne aplikacije smo se odločili z namenom, da preverimo zahtevnost izdelave in uporabnost znanj, ki jih kot spletni razvijalci vsakodnevno uporabljamo. Pri razvoju aplikacije bo naš glavni cilj izvrstna uporabniška izkušnja pri vseh uporabnikih.. 1.

(13) 2. MOBILNE APLIKACIJE 2.1 Mobilne naprave Tehnološki razvoj, ki je omogočil izdelavo prvega elektronskega računalnika za splošne namene ENIAC-A leta 1946, je v naslednjih desetletjih prinesel integriranja vezja, obenem se je tudi zmanjševala velikost računalnikov. S pojavom osebnega računalnika je informacijska tehnologija postajala vedno dostopnejša in zmogljivejša. Nadaljnji razvoj je prinesel prenosne osebne računalnike, ki so uporabnikom omogočili večjo in hitrejšo mobilnost. Sredi devetdesetih let dvajsetega stoletja so se pojavili «osebni digitalni asistenti« ali PDA. Te naprave so že omogočale vnos besedila z rokopisom. S pojavom mobilnih telefonov in z množičnim pozitivnim odzivom ljudi je postajalo jasno, da bo priljubljenost teh naprav v prihodnosti le še naraščala. Podjetje IBM je leta 1992 prestavilo prvi pametni telefon. V mobilni telefon so vgradili računalnik, ki je poganjal preprosto programsko opremo. Revolucija na področju mobilnih naprav se je začela leta 2007, ko je podjetje Apple izdalo svoj pametni telefon iPhone. Serije iPhonov, ki so sledile, so zaradi svojega uspeha v razvoj na tem področju prisilile še druge izdelovalce in razvijalce. Medtem je Applu uspel še en velik dosežek na področju mobilnih naprav. S svojim tabličnim računalnikom iPad so sprožili revolucijo tabličnih računalnikov in spet prehiteli konkurente. Apple je na področju operacijskega sistema kmalu dobil tekmeca v Googlu, ki danes bdi nad razvojem operacijskega sistema Android. Tega nameščajo različni izdelovalci pametnih telefonom in tabličnih računalnikov, medtem ko Apple uporablja svoj operacijski sistem iOS. Danes med mobilnimi napravami najdemo tudi pametne ura in naprave, ki jih nosimo na sebi kot del oblačil. [1] [2]. Mobilne naprave so bile sprva razvite in tudi uporabljane kot dodatek osebnim računalnikom. Današnje naprave so za nezahtevna dela že popolnoma sposobne nadomestiti namizne računalnike. To je po eni strani zasluga velikega nabora aplikacij, ki jih lahko namestimo, po drugi strani pa je to zasluga izboljšanih strojnih zmogljivost in povezljivosti današnjih modernih mobilnih naprav.. 2.

(14) Slika 1: Mobilni telefon iPhone in tablični računalnik iPad [20]. 2.2 Mobilni operacijski sistemi Za mobilne naprave je bilo potrebno razviti prilagojene operacijske sisteme, saj se strojna oprema razlikuje od tiste na osebnih računalnikih. Večina mobilnih naprav ima zaradi zahteve po majhni porabi energije vgrajene procesorje ARM, medtem ko v namiznih in prenosnih računalniki procesorji temeljijo na Intelovi x86 arhitekturi. Zaradi drugačnega načina upravljanja, ki temelji na dotikih in kretnjah, je bilo treba prilagoditi tudi uporabniški vmesnik. Prav tako je bila prilagojena povezljivost, kar je mobilnim napravam omogočilo povezovanje po več standardih, kot so GPRS, EDGE, LTE, ki so z vsako generacijo dopuščali večje pasovne širine. Na mobilnih napravah je tudi omogočena povezljivost preko Buetootha, IR, RFID in 802.11. Mobilni operacijski sistemi uporabnikom omogočajo nameščanje novih aplikacij, te aplikacije s skupnim imenom imenujemo mobilne aplikacije. [3] Mobilne operacijske sisteme lahko v splošnem razdelimo v tri skupine: Lastniški operacijski sistemi proizvajalca naprave: Proizvajalec naprave razvije za napravo svoj lasten operacijski sistem. S tem lahko proizvajalec optimalno izkoristi strojno opremo in uporabniku ponudi najboljšo možno uporabniško izkušnjo. Lastniška operacijskega sistema ni možno namestiti na naprave drugih proizvajalcev, prav tako je otežen vpogled v ključne dele operacijskega sistema. Primera teh operacijskih sistemov sta iOS in BlackBerry OS. [4] 3.

(15) Lastniški operacijski sistemi drugih proizvajalcev: Za to skupino mobilni operacijskih sistemov je značilno, da operacijski sistem razvije podjetje, ki samo ne proizvaja mobilnih naprav. To podjetje z licencami ponudi svoj operacijski sistem proizvajalcem mobilnih naprav. Predstavnik teh operacijskih sistemov je Microsoft Windows Phone. Slabost teh sistemov je nezdružljivost z različnimi napravami in počasen razvoj. [4]. Brezplačni in odprtokodni operacijski sistemi: Zadnja skupina operacijskih sistemov ima na trgu mobilnih naprav največji delež. Za to skupino je značilno, da so operacijski sistemi na voljo zastonj, omogočen je tudi vpogled v izvorno kodo sistema. Razvija in razširja jih lahko kdorkoli z ustreznim znanjem programiranja. Najpomembnejši predstavnik te skupine je operacijski sistem Android. Zaradi velikega števila uporabnikov in velike skupnosti razvijalcev razvoj poteka hitro, prav tako tudi odprava hroščev. [4] Danes sta najbolj razširjena operacijska sistema Android in iOS, ki zagovarjata dva različna pristopa k razvoju programske opreme. Android je s svojo odprtostjo in z brezplačnostjo dosegel v letu 2015 dosegel že približno 80-odstotni tržni delež, medtem ko je iOS dosegel okrog 15 odstotni tržni delež. Preostali delež si razdelijo Windows Phone, BlackBerry OS in ostali operacijski sistemi. [5]. 2.2.1 Operacijski sistem Android Android je mobilni operacijski za katerega razvoj skrbi podjetje Google. Sistem je bil predstavljen leta 2007 s strani konzorcija Open Handset Alliance. V tem konzorciju je Google zbral proizvajalce mobilnih naprav in strojne opreme ter omrežne operaterje z namenom, da ustvarijo produkte, ki bi lahko na trgu mobilnih naprav konkurirali Applovim napravam.. 4.

(16) Jedro sistema bazira na jedru operacijskega sistema Linux. S tem je tudi Android ena od številnih distribucij Linuxa. Pri tem so Googlovi razvijalci iz Linuxovega jedra odstranili nekatere komponente, ki onemogočajo poganjanje tipičnih Linuxovih aplikacij.. Slika 2: Sistemska arhitektura operacijskega sistema Android [21]. V aplikacijsko ogrodje (angl. application framework) je Google vključil velik nabor naprednih funkcionalnosti. S tem je razvijalcem omogočil izgradnjo aplikacij z bogato uporabniško izkušnjo in s kompleksno logiko. S tem ogrodjem se bomo srečali tudi pri razvoju hibridne aplikacije v drugem delu diplomske naloge. V sistemski arhitekturi sistema Android so vključene tudi številne knjižnice (and. libraries), ki razvijalcem olajšajo delo. Za razvijalce je Google pripravil tudi orodja za načrtovanje, razvoj in testiranje aplikacij. Trenutno so ta orodja dosegljiva pod skupnim imenom Android Studio. [6] Googlova strategija, da Android ponudi brezplačno in po odprtokodno licenco se je izkazala za uspešno. Danes ima vsak že skoraj vsak večji proizvajalec mobilnih naprav svojo spremenjeno verzijo Androida. Proizvajalci, kot so Samsung, HTC , Huawei in delno Amazon so na trgu mobilnih naprav uspeli ravno po zaslugi Androida. Po drugi strani pa je takšno prilagajanje Androida povzročilo fragmentacijo med različnimi verzijami in predelavami sistema.. 5.

(17) Na naprave z nameščenim operacijskim sistemom Android lahko uporabniki nameščajo različne aplikacije, ki razširjajo osnoven nabor aplikacij, ki jih ponuja sam sistem. Google je v ta namen razvil storitev Google Play, kjer lahko uporabniki poiščejo in namestijo aplikacije na svojo napravo. Storitev ponuja tudi plačljive aplikacije. Google je v mobilne aplikacije uvedel tudi svoj poslovni model z oglasi, ki se prikazujejo med uporabo aplikacij in med brskanjem po Internetu. Razvoj aplikacij za Android je tudi vir zaslužka za mnoge razvijalce. Primarno je bil za razvoj aplikacij v Androidu predviden programski jezik Java, danes jih lahko razvijamo še v programskih jezikih C, C++, Pythonu, Rubyu in JavaScriptu.. 2.2.2 Operacijski sistem iOS Podjetje Apple je operacijski sistem iOS sprva razvilo za svoj prvi pametni telefon iPhone. Kasneje je Apple operacijski sistem uporabil še na predvajalniku glasbe iPod Touch ter na tabličnem računalniku iPad. Apple je pri razvoju sistema iOS sledil svoji dolgoletni tradiciji razvoja naprav in programske opreme, kjer je na prvem mestu vedno uporabniška izkušnja. Izvorno nameščen sistem vsebuje vse potrebne aplikacije za vsakdanje delo, dodatne aplikacije si lahko uporabniki namestijo preko storitve App Store. Razvijalci imajo za razvoj nativnih aplikacij za iOS na voljo orodje Xcode, kodo lahko pišejo v programskih jeziki Objective C ali Swift. [7]. Veliko zaslug za uspeh podjetja Apple gre pripisati tudi izjemno kvalitetnim napravam, ki z zmogljivo strojno opremo in kvaliteto izdelave ter dizajnom predstavljajo zelo dobro osnovo za Applovo programsko opremo.. 2.2.3 Ostali mobilni operacijski sistemi Med ostalimi operacijskih sistemi, ki imajo vsi skupaj približno 5-odstotni tržni delež, je nekoliko v prednosti Windows Phone. S tem sistemom poskuša podjetje Microsoft prodreti na trg mobilnih naprav, v ta namen tudi oglašujejo univerzalne aplikacije. Te aplikacije lahko z enako izvorno kodo poganjamo na osebnih računalnikih, na mobilnih napravah, na igralni konzoli Xbox itd.. Minimalni tržni delež ima še sistem BlackBeryOS, ki je namenjen predvsem poslovnim uporabnikom. Ostali sistemi, ki jih danes najdemo na mobilnih napravah so še Symbian, Bada, Palm OS, Firefox OS itd. 6.

(18) 2.3 Tipi mobilnih aplikacij: Moderne mobilne aplikacije lahko razdelimo v tri tipe aplikacij. Ti tipi so nativne mobilne aplikacije, hibridne mobilne aplikacije in mobilne spletne strani. Vsak tip ima določene prednosti in slabosti, pri izbiri tipa aplikacije moramo upoštevati več dejavnikov. Nekateri izmed glavnih dejavnikov so hitrost razvoja, hitrost in odzivnost aplikacije, uporabnikov izkušnja, doseg uporabnikov na različnih napravah in dostop aplikacije do strojnih sredstev mobilne naprave.. Slika 3: Ključne lastnosti tipov mobilnih aplikacij [10]. 2.3.1 Nativne mobilne aplikacije Pri omembi mobilnih aplikacij imamo v večini primerov v mislih nativne mobilne aplikacije. Te aplikacije so tudi ključni del programske opreme pri nameščenih mobilnih operacijskih sistemih. Proizvajalci mobilnih operacijskih sistemov so za razvijalce nativnih aplikacij pripravili različna orodja, ki jih imenujemo SDK. Del teh orodij so tudi vmesniki API, ki razvijalcem omogočajo preprost dostop do strojnih sredstev naprav, npr. dostop do kamere, kompasa, žiroskopa. Še pred kratkim je tudi veljalo, da so bile nativne aplikacije edine zmožne delovanja brez internetne povezave, pri tem pa so lahko ohranile kompleksno logiko v aplikaciji in dostop do mehanizmov shranjevanja podatkov v mobilni napravi. V praksi velja, da so nativne aplikacije bolj zmogljive od ostalih tipov, saj se aplikacije razvijajo za točno določen operacijski sistem in pri tem optimalno izkoristijo vse možnosti, ki jim jih ponujajo orodja SDK. Ta orodja so tudi zelo dobro dokumentirana, na voljo je 7.

(19) veliko vzorčne programske kode. Razvoj nativnih aplikacij pa ima tudi nekatere slabe lastnosti. Te se pokažejo predvsem takrat, ko želimo doseči največje možno število uporabnikov in moramo zato poseči še na druge mobilne platforme. Pri tem moramo aplikacijo kodirati od začetka, prilagoditi moramo tudi uporabniške vmesnike. V primeru dveh različnih platform potrebujemo tudi dodatne razvijalce, saj se npr. Android in iOS v veliki meri razlikujeta glede razvoja aplikacij. S tem se podaljša čas razvoja in tudi kompleksnost, saj moramo vzdrževati dve različni bazi programske kode. Nativne aplikacije se distribuirajo s pomočjo servisov, ki jih ponujajo razvijalci operacijskih sistemov. V primeru Googla je to Google Play, Apple ponuja svojo storitev App Store. V vsakem od omenjenih servisov najdemo več kot dva milijona različnih aplikacij. [8] [9] [10]. 2.3.2 Spletne mobilne aplikacije – mobilne spletne strani Razvoj brskalnikov in ostalih spletnih tehnologij je omogočil prilagajanje klasičnih spletnih strani glede na napravo, s katero si spletne strani ogledujemo. Spletne mobilne aplikacije so v praksi spletne strani, ki jih razvijalci prilagodijo za ogled na mobilnih napravah. Ostale značilnosti spletnih strani ostajajo enake. Spletne mobilne strani niso nameščene na mobilni napravi in za delovanje v večini primerov potrebujejo povezavo z internetom. Obstajajo tudi možnosti, da takšne aplikacije uporabljamo v nepovezanem načinu, vendar se ta funkcionalnost uporablja večinoma za vmesno shranjevanje podatkov in ni primerna za aplikacije s kompleksno programsko logiko. Primeri brezpovezavnih tehnologij za shranjevanje podatkov so IndexedDb, AppCache in Web Storage. Spletne aplikacije poganjamo v spletnem brskalniku, kjer z vpisom URL pokličemo strežnik, ki nam kot odgovor na klic vrne programsko kodo, ki se izvede v klientu – brskalniku. Mobilni brskalniki morajo podpirati najnovejše tehnologije za prikaz uporabniškega vmesnika in programske funkcionalnost, ki omogočajo izvajanje klientove programske logike. V ta namen je v brskalnike integriran skriptni jezik JavaScript. Največja prednost spletnih mobilnih strani je relativno majhna zahtevnost razvoja in velik doseg uporabnikov. Spletna mobilna stran se bo namreč v večini brskalnikov na različnih mobilnih operacijskih sistemih prikazala enako in z enakimi funkcionalnostmi. S tem dosežemo enotnost kodne baze in si olajšamo nadaljnje delo na aplikaciji. Spremembe v 8.

(20) aplikaciji preprosto naložimo na spletni strežnik, pri uporabnikih se bodo te spremembe pojavile pri naslednjem obisku spletnega naslova. Med pomanjkljivostmi mobilnih spletnih strani najdemo slabšo uporabniško izkušnjo, onemogočen dostop do strojnih naprav in datotečnega sistema na mobilni napravi ter vse varnostne težave, ki doletijo klasične spletne strani.. 2.3.3 Hibridne mobilne aplikacije Tretji tip aplikacij združuje napredne tehnologije spletnih strani in nativnih aplikacij. Od spletnih strani so hibridne mobilne aplikacije prevzele tehnologije, ki omogočajo izgradnjo uporabniškega vmesnika, interakcijo uporabnika z aplikacijo in komunikacijo aplikacije s strežnikom. Posebni vmesni sloj programske opreme pa jim omogoča tudi nekatere funkcionalnosti nativnih aplikacij, kot je dostop do API vmesnika na mobilnem operacijskem sistemu. Ta sloj imenujemo »premostitvena platforma med spletnimi in nativnimi aplikacijami«. Pri hibridnih mobilnih aplikacijah ločimo dva pristopa za izgradnjo aplikacij.. Izgradnja aplikacij z uporabo pogona brskalnika: Po tem pristopu aplikacije izrabijo pogon mobilnega brskalnika in vsebino prikažejo brez uporabniškega vmesnika brskalnika, ki ga običajno uporabljamo za navigacijo po spletnih straneh. Do API vmesnika operacijskega sistema dostopamo s klici funkcij v skriptnem jeziku JavaScript. Te funkcije kličejo nato v premostitveni platformi funkcije vmesnika API. Izdelava funkcionalnosti v klientu je pri tem pristopu identična izdelavi funkcionalnosti na spletnih straneh. Izvajanje aplikacij v tem primeru poteka enako kot izvajanje spletne strani v brskalniku. [11]. 9.

(21) Izgradnja aplikacij, ki se prevedejo v nativno programsko kodo: Programsko kodo napišemo v enem izmed programskih jezikov, ki jih premostitvena platforma dovoljuje, npr. C# ali pa JavaScript. Ta koda se nato sestavi v kodo nativnih aplikacij in se tako tudi izvaja. [11]. Hibridne mobilne aplikacije povzemajo vse prednosti in slabosti mobilnih spletnih strani, dodatna prednost je še dostop do funkcionalnosti vgrajenih naprav. Z vidika uporabniške izkušnje še vedno ne dosegajo učinkovitosti nativnih aplikacij. Pri tem je glavna omejitev zmogljivost brskalnika, zato so hibridne aplikacije manj odzivne od nativnih. Težave se pojavijo tudi pri nezadostni podpori vmesnika API v premostitveni platformi. Tabela 1: Primerjava različnih tipov mobilnih aplikacij [12] Ključne lastnosti Razvojne tehnologije. Nativna aplikacija Objective C, Java. Dostop do naprave. Večji kot pri hibridnih, veliki stroški pri razvoju za več platform Omogočen dostop do vseh funkcij vmesnika API. Združljivost kode. Koda je vezana na platformo, ni prenosljiva. Stroški razvoja. Težavnost razvoja. Namestitev Nujnost povezave. Razvoj je zahteven, zahtevana je večja izkušenost razvijalcev Nalaganje iz servisov kot sta Google Play in App Store, nameščeno na napravi Delujejo v offline in online načinu. Mobilna spletna stran HTML5, CSS, JavaScript. Hibridna spletna aplikacija HTML, CSS, JavaScript. Nizki stroški. Primerljivi s tistimi pri spletnih straneh. Dosegljivih je le nekaj funkcij vmesnika API Koda je z malenkostnimi popravki prenosljiva na večino brskalnikov. Dosegljivih je veliko funkcij vmesnika API. Razvoj in vzdrževanje sta preprosta. Razvoj je manj zahteven kot pri nativnih aplikacijah. Nameščeno na napravi, enako kot pri nativnih aplikacijah. Delujejo v offline in online načinu. Namestitev na spletnem strežniku V večini primerov je povezava nujna. Koda je prenosljiva na ostale platforme. V diplomski nalogi si bomo v drugem delu podrobneje ogledali premostitveno platformo in programsko ogrodje Apache Cordova.. 10.

(22) 2.4 Uporabniška izkušnja Mednarodna organizacija za standardizacijo ISO definira uporabniško izkušnjo kot »osebno dojemanje in odziv, ki izhaja iz uporabe predvidenega izdelka, sistema ali storitve«. [13] Po tej definiciji uporabniška izkušnja vključuje uporabnikova čustva, prepričanja, zaznavanje, fizične in psihološke odzive ter obnašanje uporabnika. V primeru mobilnih aplikacij to v praksi pomeni izpolnjevanje zgornjih kriterijev pri interakciji uporabnika z mobilno napravo. Pri zagotavljanju dobre uporabniške izkušnje se torej osredotočamo predvsem na psihološki vidik uporabe aplikacije. Uporabnikom na mobilnih napravah pa moramo zagotoviti še eno pomembno lastnost, ki pomembno vpliva na uporabniško izkušnjo. To je uporabnost ali »usability« (angl.). Ta pojem se nanaša na sam postopek interakcije uporabnika, naš cilj je optimizirati uporabniški vmesnik mobilne aplikacije. To lahko naredimo npr. z zmanjšanjem števila potrebnih korakov pri posameznih opravilih. Pri zagotavljanju uporabnosti so nam v pomoč različne metrike, ki jih uporabimo pri merjenju uporabnosti pri uporabnikih. Nekatere od teh so stopnja dokončanja opravil, trajanje opravil, napake pri opravilih. [14] [15] Pomembno vlogo pri zagotavljanju uporabniške izkušnje na mobilnih napravah imajo tudi prilagojeni načini upravljanja uporabniških vmesnikov. Ker mobilne naprave upravljajmo z dotikom, so se uveljavile določene geste, kjer kombiniramo pritisk in gibanje s prsti. [16]. Najpogosteje uporabljane in tudi podprte geste so: . Enojni dotik (angl. tap): nadomesti klik z miškinim levim gumbom,. . dvojni dotik (angl. double tap): nadomesti dvoklik, različne funkcije,. . povleci (angl. drag): s prsti povlečemo po površini zaslona,. . razširi/stisni (angl. pinch/spread): dva prsta na površini zaslona razširimo oz. stisnemo skupaj,. . pritisk (angl. press): s prstom se dotaknemo zaslona za daljši čas,. . hiter povlek (angl. flick): s prstom se hip dotaknemo zaslona in prst hitro povlečemo v poljubno smer. [17]. 11.

(23) 2.5 Primeri izobraževalnih mobilnih aplikacij V primeru izobraževalnih aplikacij se bomo omejili na aplikacije, s katerimi lahko učencem podajamo izobraževalne vsebine. Aplikacija, ki jo bomo izdelali bo preprosta, zato ne v tem okviru ne bomo obravnavali kompleksnejših aplikacij in orodij za podporo pri učnem procesu. Aplikacija Algodoo: Aplikacija je dvodimenzionalna simulacija, namenjena spoznavanju fizikalnih pojavov in zakonitosti. Razvijalci aplikacije so uporabnikom omogočili izdelavo interaktivnih prizorov, ki uporabnike pritegnejo s svojo grafično podobo, ki spominja na risanke. Aplikacija uporabnikom omogoča brezskrbno eksperimentiranje in spodbuja njihovo kreativnost, saj ja vseskozi prisoten element zabave. Algodoo je tudi odličen primer interakcije med uporabnikom in napravo. Aplikacijo lahko namestimo na Applovo mobilno napravo iPad ter na namizne računalnike s sistemoma Windows in Mac OS. Posebnost aplikacije je tudi podpora za interaktivne table. [16]. Slika 4: Mobilna aplikacija Algodoo [16]. Coursera App: Aplikacija, ki jo je razvilo podjetje Coursera, je izobraževalne vsebine iz spletne strani prenesla v nativno mobilno aplikacijo. Coursera na svojih spletnih straneh ponuja različne izobraževalne tečaje iz različnih področij, pri tem uporabljajo bogate multimedijske vsebine. Aplikacija je nadomestila uporabo spletne strani na osebnem računalniku, s tem je 12.

(24) uporabnikom omogočila učenje, ki ni več vezano na določen prostor in čas. Uporabniška izkušnja pri aplikaciji ni tako dobra kot pri uporabi spletne strani na računalniku. Aplikacija je na voljo za iOS in za Android operacijske sisteme.. Slika 5: Uporabniški vmesnik mobilne aplikacije Coursera [22]. Duolingo: Še en primer prepletanja spletne strani in mobilne aplikacije je Duolingo, aplikacija za učenje tujih jezikov. Aplikacija je primer prakse, ki jo v zadnjem času izvajajo izobraževalne ustanove in organizacije. Na svojih spletnih straneh imajo namreč že pripravljene vsebine in te vsebine poskušajo z minimalnim naporom prenesti tudi na mobilne aplikacije. Uporabniška izkušnja je na mobilni aplikaciji nekoliko boljša kot na osebnih računalnikih.. Slika 6: Aplikacija za učenje tujih jezikov Duolingo [23]. 13.

(25) 3. OSNOVNE TEHNOLOGIJE ZA RAZVOJ HIBRIDNIH MOBILNIH APLIKACIJ 3.1 Spletni brskalniki 3.1.1 Pregled spletnih brskalnikov Spletni brskalnik je program, ki nam omogoči pridobivanje in prikazovanje ter prihajanje informacijskih virov na svetovnem spletu. Ti informacijski viri so lahko spletne strani, slike, videoposnetki, zvok itd.. Prvi spletni brskalnik je leta 1990 izdelal Sir Tim Berners-Lee. Prvi popularen brskalnik poimenovan Mosaic pa je leta 1993 razvil Marc Adreessen. Ta brskalnik je bil tudi eden prvih brskalnikov z grafičnim vmesnikom. Andreesen je nato razvil še brskalnik Netscape Navigator, ki je bilo ob Microsftovem brskalniku Internet Explorerju iz leta 1995 tudi glavni krivec za popularizacijo interneta med uporabniki. V letih, ki so sledila se je na trgu pojavilo veliko brskalnikov, ki so prinašali izboljšave in vedno boljše implementacije spletnih tehnologij. [17]. Slika 7: Prikaz osnovne funkcionalnosti spletnega brskalnika, povzeto po [25].. Osnovna funkcija brskalnika je ostala skozi leta nespremenjena, pri komunikaciji s strežnikom se uporablja protokol HTTP. Tipično zaporedje dogodkov pri obisku spletne strani je opisano na naslednji strani.. 14.

(26) Zaporedje dogodkov pri obisku spletne strani: 1. V naslovno vrstico spletnega brskalnika vtipkamo spletni naslov – URL. Ta naslov vsebuje informacije, kateri dokument želimo prikazati. 2. Brskalnik pošlje HTTP zahtevek na strežnik, lokacijo strežnika in zahtevani dokument razbere iz URL naslova. 3. Strežnik po sprejemu zahtevka poišče zahtevani dokument. V primeru, da dokumenta ne najde, vrne sporočilo napako s statusom 404. V primeru, da je dokument najden, strežnik pridobi ta dokument in ga vrne brskalniku. 4. Brskalnik odgovor v primeru, da je gre za html dokument ustrezno razčleni in od strežnika dodatno zahteva še vse preostale vire, ki jih najde pri razčlembi HTML dokumenta. HTML dokument je opisan z jezikom HTML.. 5. Brskalnik sestavi vse elemente v HTML dokumentu in kot rezultat v oknu brskalnika prikaže spletno stran.. HTTP zahtevki so lahko sinhroni ali pa asinhroni. Pri sinhronih zahtevkih je brskalnik med čakanjem na odgovor iz strežnika blokiran, pri asinhronih pa brskalnik med čakanjem nemoteno deluje brez prekinitev. Vsi današnji brskalniki podpirajo asinhrone HTTP zahtevke, tehnologija, ki je danes najbolj razširjena se imenuje AJAX. S to tehnologijo lahko podatke izmenjujemo ločeno od predstavitvenega sloja v brskalniku, posledično nam ni več treba pri vsaki podatkovni spremembi osveževati celotnih spletnih strani. Skoraj vsi brskalniki uporabnikom omogočajo tudi izdelavo lastnih razširitev za brskalnik in brskalnik postaja vse bolj izpopolnjeno večnamensko orodje. Zelo uporabna funkcionalnost v modernih spletnih brskalniki so orodja za razvijalce. Ta orodja nam omogočajo npr. pregled strukture spletne strani, opazovanje HTTP komunikacije med brskalnikom in strežnikom in testiranje zmogljivosti aplikacije.. 15.

(27) Med modernimi brskalniki, ki imajo tudi svoje mobilne verzije danes najdemo: . Chrome. . Firefox. . Microsoft Edge ( in Internet Explorer). . Opera. . Safari. 3.1.2 WebView in WebKit Hibridne mobilne aplikacije za prikaz uporabljajo nativno komponento operacijskega sistema imenovano WebView. Ta komponenta je bila razvita z namenom, da omogoči prikaz spletne vsebine v nativnih aplikacijah. Z uporabo WebViewa pri hibridnih aplikacijah povzročimo nalaganje spletnega brskalnika, pri katerem je odstranjen uporabniški vmesnik, medtem ko ostale funkcionalnosti brskalnika ostanejo nedotaknjene. V primeru, da imamo vse sestavne dele spletne strani shranjene na mobilni napravi, za prikazovanje te strani ni potrebna povezava z internetom. Primer uporabe Webview-a so oglasi, ki nam jih proizvajalci mobilnih operacijskih sistemov prikazujejo med uporabo aplikacij na napravi.. Mobilna brskalnika Safari (Apple) in Chrome (Google) oba uporabljata odprtokodni pogon za brskalnike WebKit, ki pa je v vsakem brskalniku nekoliko spremenjen. Google v brskalniku Chrome uporablja spremenjeno različico poimenovano Blink. WebKit je zadolžen za prikazovanje vsebine, osnovni postopek je prikazan na spodnji sliki.. Slika 8:Osnovni potek upodabljanja spletne strani v pogonu WebKit [20]. 16.

(28) Upodabljanje spletne strani se prične takoj po prejemu prvih delov dokumenta iz strežnika. Najprej se opravi razčlenjevanje HTML dokumenta na posamezne elemente. Temu postopku sledi sestavljanje elementov v drevo dokumentnega objektnega modela - DOM drevo. V naslednji fazi se na elemente drevesa pripnejo pravila, ki smo jih definirali v CSS jeziku. Tako dobljeno drevo upodobitve pošljemo skozi proces postavitve. Pri tem postopku vsak element dobi točne koordinate in mere. Zadnji proces je risanje, kjer se pokliče metoda brskalnika paint() in element se prikaže na zaslonu. Pogon brskalnika ta postopek opravlja postopno in vse faze izvrši takoj, ko ima na voljo dovolj podatkov. Zaradi tega se vsebina strani začne prikazovati že takoj po uspešni obdelavi prvih elementov v HTML dokumentu. [18]. 3.2 HTML in CSS Osnovni namen spletnih brskalnikov je prikaz vsebine, ki jo je zahteval uporabnik. To vsebino v HTML dokumentih opišemo z označevalnim jezikom HTML. Pri tem postopku uporabimo značke, ki so na voljo kot del HTML jezika. Z značkami v HTML elementih opisujemo besedilo, vstavljamo slike, vključujemo CSS datoteke in JavaScript kodo. Danes se pri izdelavi spletnih dokumentov držimo standarda HTML5, ki v primerjavi s predhodnikoma, standardoma HTML 4.01 in XHTML 1.0 prinaša številne nove elemente in njihove atribute ter nove funkcionalnosti v HTML dokumentih.. Primer HTML dokumenta in CSS dokumenta: <article class="okvir"> <!DOCTYPE. <h1>Naslov odstavka</h1>. html>. <p>Vsebina obstavka ...</p> </article>. <html> <head>. </body> </html>. <title>HTML Test</title> <link rel="stylesheet" href="slog.css"> </head> <body>. CSS sintaksa: .okvir { width: 230px;. 17.

(29) border-radius: 8px;. color: #686868;. padding: 10px;. font-size: 2em;. border: 1px solid #ccc;. margin-top: 10px;. }. }. .okvir h1 {. Slika 9: Prikaz zgornjega primera v brskalniku. Osnovna struktura HTML elementov je sestavljena iz glave in noge dokumenta ter iz telesa dokumenta. Telo dokumenta je opisano med značkama <body> in </body>, takšna sintaksa z odpiranjem in zapiranjem značk se tudi uporablja pri skoraj vseh značkah jezika HTML. Pri oblikovanje HTML dokumentov se moramo držati pravila, da s HTML jezikom ne določamo oblikovnih lastnosti elementov. S tem ločimo vsebino od oblike in naredimo HTML dokumente krajše in preglednejše. Obliko HTML dokumentov danes določamo z oblikovnim jezikom CSS. Pri tem s selektorji izberemo izbrani element, ki ga bomo oblikovali. Pri zgornjem primeru smo značko <article>, ki smo ji določili atribut »class« oblikovali z jezikom CSS. Za atribut »class« moramo v CSS jeziku pred vrednostjo atributa postaviti piko in ker ima v našem primeru atribut »class« vrednost »okvir, je CSS sintaksa sledeča: .okvir { width: 230px; …}. Za oblikovanje spletnih strani z jezikom CSS obstaja poleg pravil tudi veliko praks za strukturiranje kode, saj se posamezne definicije lastnosti na elementih v jeziku CSS med seboj pokrivajo in s tem prepišejo pred tem definirane lastnosti elementov. Pozorni moramo biti tudi na podprtost jezika CSS v različnih brskalnikih, saj so danes na trgu še vedno prisotni starejši brskalniku, ki ne podpirajo vseh funkcionalnosti CSS. Danes aktualen standard za je CSS 3, ki ga bomo uporabljali tudi pri izdelavi aplikacije. 18.

(30) 3.3 JavaScript JavaScript je leta 1995 razvil Brendan Eich z namenom, da se v brskalnik Netscape vnese interaktivnost, ki je HTML ni omogočal. Originalen namen, uporaba v brskalniku, se je kasneje razširil tudi na uporabo na strežniku, na uporabo v PDF dokumentih itd.. Podpora JavaScriptu v različnih brskalnikih je bila sprva slaba. JavaScript je bil v večini primerov uporabljen le za validacijo vnosov HTML obrazcih in je imel oznako jezika – igračke. Težava so bile tudi zaradi majhne hitrosti in pasovne širine pri internetnih povezavah. Dodatna JavaScript datoteka je lahko npr. pomenila dodatno zakasnitev nalaganja spletnih strani in s tem slabšo uporabniško izkušnjo. Leta 2005 je bila opisana nova funkcionalnost v brskalniku, imenovana AJAX. Ta funkcionalnost je opisala asinhrono delo v brskalniku in s tem odpravila nalaganja celotnih strani. Pri tem je glavno vlogo odigral JavaScript, ki je omogočil manipuliranje elementov in vključitev programske logike pri spremembah. S tem je prevzel tudi del bremena, s katerim se je pred tem moral ukvarjati spletni strežnik. Osnovni princip delovanja AJAX-a so asinhroni http zahtevki na strežnik, ki nato vrne podatke v ustreznem zapisu. Sprva je bil uporabljan zapis XML, danes je razširjen JSON zapis podatkov. [20] [21] JavaScript je objektno orientirani šibko tipizirani skriptni jezik, ki ga bomo v naši aplikaciji uporabili za implementacijo programske logike tako v klientu (brskalniku) kot kut tudi na strežniku. Jezik je implementacija jezika ECMA Script. JavaScript spada med objektno orientirane jezike zato, ker so elementi jezika objekti in ker tudi omogoča objektni način zapisa programske kode. Pri tem se nekoliko razlikuje od ostalih jezikov, ker temelji na »prototipih.« Prototipi so objekti, ki imajo poleg para ključ – vrednost še dodaten kazalec na prototip objekta, s katerim je izvedeno dedovanje. Skriptni jeziki se pri izvajanju ne zbirajo (angl. compile), ampak se interpretirajo. Morebitne napake v kodi lahko zlahka in hitro odpravimo. Spremembe preprosto shranimo in osvežimo spletno stran. Slabost pri interpretiranih jezikih je počasnejše izvajanje programske kode in odkrivanje napak šele pri izvajanju programa. [20] [21] Z razvojem jezika JavaScript in z izboljšano podporo v brskalnikih so se pojavila tudi različna ogrodja, ki so razvijalcem olajšala razvoj in omilila nekonsistentnosti pri delovanju JavaScripta v različnih brskalnikih. Pri izdelavi aplikacije se bomo srečali z ogrodjem 19.

(31) AngularJS, ki omogoča razvoj kompleksne logike pri klientu, v našem primeru v delu aplikacije, ki bo prevzela delovanje uporabniškega vmesnika.. Primer JavaScript kode:. function init() { if (document && document.getElementById) { var loginForm = document.getElementById(‘loginForm’); loginForm.onsubmit = validateForm; } }. Opis kode: funkcija init() v DOM-u poišče element - obrazec z ID-jem loginForm in pri pošiljanju obrazca pri dogodku onSubmit pokliče funkcijo validateForm().. 3.4 Node.js Platforma Node.js omogočila uporabo jezika JavaScript pri delu s strežnikom. S tem korakom se JavaScript razvijalcem ni bilo treba učiti novega programskega jezika, še naprej so lahko uporabljali vse funkcionalnosti in obstoječa ogrodja v JavaScriptu. 3.4.1 Zgodovina in razvoj Node.js je razvil Ryan Dahl, ki je skušal leta 2005 s takrat obstoječo tehnologijo implementirati funkcionalnosti, ki bi prikazala napredek nalaganja datotek na strežnik. Funkcionalnost je poskusil implementirati v jezikih Ruby, C in Haskell, vendar je pri vsakem jeziku našel pomanjkljivosti in omejitve. Leta 2009 uporabil JavaScript in pogon V8, ki je omogočal interpretacijo programske kode. Dahl je tako napisal prvi spletni strežnik, ki je baziral na jeziku JavaScript. Danes je Node.js široko uporabljana tehnologija, ki je z upravljalcem paketov NPM postala tudi dokaj preprosta za uporabo. [22] 3.4.2 Prednosti in področje uporabe Platforma Node.js je odprtokodna in brezplačna platforma, ki ima številčno skupnost razvijalcev in uporabnikov. Ker uporablja JavaScript kot primarni programski jezik, so v njej dostopne tudi vse funkcionalnosti, ki jih najdemo v brskalnikih. To je zasluga 20.

(32) integriranega JavaScript pogona V8, ki ga je v svojem brskalniku Chrome uporabljal tudi Google. Platforma Node.js ponuja veliko število že obstoječih programskih knjižnic, ki so tudi osnova za delovanje platforme. Osnovne knjižnice Node.js . Zanka dogodkov (angl. Eventloop),. . vhod in izhod,. . podporna knjižnica za asinhrono delovanje (Libuv),. . DNS knjižnica,. . knjižnica za šifriranje (Crypto),. . knjižnica za stiskanje (Zlib),. . knjižnica za HTTP razčlenjevanje.. Node.js platforme ni omejena na posamezna področja, je pa na nekaterih področjih bolj primerna in učinkovitejša. V praksi se uporablja predvsem za izdelavo REST vmesnikov in za komunikacijo z zunanjimi spletnimi servisi. Mogoča je tudi uporaba platforme v brezpovezavnem načinu, kjer npr. v aplikacijo integriramo pogon Webkit in s tem dobimo vse funkcionalnosti brskalnika. [22]. Pri izdelavi aplikacije bomo platformo Node.js uporabili za delo s podatkovno bazo in za delo z datotekami, vzpostavili bomo tudi preprost spletni strežnik. 3.4.5 Asinhrono programiranje v Node.js Node.js je že v osnovi zgrajena in namenjena tudi za uporabo asinhronega programiranje. Programi se v Node.js izvajajo enonitnem načinu, v glavni niti programa. Pri računsko zahtevnejših operacijah in pri operacijah, kjer program čaka na podatke, se zato pojavi težava, ker je v tem časi izvajanje programa blokirano. V Node.js je rešitev izvedena v obliki modulov, ki računsko zahtevne operacije prenesejo iz glavne niti programa in tako sprostijo izvajanje programa. [23]. 21.

(33) Primer asinhronega branja vsebine datoteke:. var fs = require('fs'); fs.readFile('tmp/input.txt', 'utf-8', function(err, data) { console.log(data); });. Opis kode: Najprej vključimo modul za delo z datotekami fs – (angl. FileSystem). Nato na objektu fs pokličemo metodo readFile(), ki ji kot parameter dodamo pot do datoteke, ki jo želimo prebrati. Drugi parameter funkcije je tako imenovani povratni klic funkcije (angl. callback), ki se izvede ko je izvajanje kode v funkciji readFile() končano. V zgornjem primeru se pri uspešnem branju datoteke v konzoli izpiše vsebina datoteke.. V zgornjem primeru se branje datoteke prenese izven glavne niti, vanjo se zopet prenese po povratnem klicu. Medtem je glavna nit prosta za ostale dele programa.. 3.5 Orodje Ionic Framework Spletni razvijalci so dobili v programskem ogrodju Ionic nabor funkcionalnosti, ki izkorišča obstoječe spletne tehnologije in jih s pomočjo platforme Apache Cordova prenaša tudi na področje mobilnih aplikacij. Ogrodju so priložene komponente, ki že pri osnovni namestitvi omogočajo odlično uporabniško izkušnjo, saj so prilagojene za mobilne naprave. Ogrodje se osredotoča na uporabnika in njegove občutke pri uporabi uporabniškega vmesnika, priloženi gradniki omogočajo implementacijo različnih funkcionalnosti v klientu – brskalniku.. 22.

(34) 3.5.1 Gradniki CSS komponente: Najpomembnejši gradniki ogrodja Ionic so CSS komponente. Avtor ogrodja, podjetje Drifty Co., je za razvijalce pripravilo obsežen nabor CSS komponent, katerih osnovo tvori že izdelan dizajn. Naloga uporabnikov ogrodja je, da v HTML dokumentih ustrezno uporabijo pripravljene CSS razrede in aplikacija tako dobi ustrezen izgled. Osnovni nabor CSS lastnosti in HTML struktura v ogrodju sta primerna za izdelavo prototipov in preprostih aplikacij, za zahtevnejše izglede pa lahko ogrodje tudi razširimo. Pri tem veljajo splošna pravila glede HTML in CSS sintakse ter priporočene prakse za strukturo dokumentov in datotek.. Slika 10: Primer CSS komponente gumba v programskem ogrodju Ionic [32]. JavaScript komponente: Ogrodje Ionic poleg CSS komponent vsebuje tudi JavaScript komponente, ki omogočajo interaktivnost uporabniškega vmesnika. Pri tem se Ionic osredotoča na arhitekturni vzorec pogled-upravljalec (angl. view-controller). Večina JavaScript komponent je implementirana s pomočjo programskega ogrodja Angular.js. [24]. 23.

(35) 3.5.2 AngularJS S programskim ogrodjem AngularJS bomo v naši aplikaciji implementirali logiko, ki se bo izvajala v brskalniku. AngularJS je programsko ogrodje, ki je v celoti zgrajeno z jezikom JavaScript in nam omogoča dvosmerno povezanost podatkov. V uporabi je arhitekturni vzorec model-pogled-model pogleda (angl. model-view-viewmodell). V tem arhitekturnem vzorcu vlogo upravljalca prevzame pogled modela, ki si s pogledom deli dvosmerno povezane podatke. Ti podatki se posodobijo ob vsaki spremembi, ji jo povzročita pogled ali pogled modela. AngularJS nam tako omogoča manipulacijo elementov v DOM-u in ločeno delo s programsko logiko aplikacije. Osnovno manipulacijo z elementi v HTML dokumentu v ogrodju AngularJS omogočajo direktive. Direktive na obstoječe DOM elemente pripnejo nove funkcije, ki omogočajo interaktivnost. Primer direktive v programskem ogrodju AngularJS: <script> angular.module('bindExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.name = 'Whirled'; }]); </script> <div ng-controller="ExampleController"> <label>Enter name: <input type="text" ng-model="name"></label><br> Hello <span ng-bind="name"></span>! </div> [25]. Opis kode: Na HTML elementa <input> in <span> vežemo direktivi ng-model in ng-bind. Obe direktivi uporabljamo na spremenljivki name. Privzeto vrednost spremenljivke name določimo v funkciji controller(), vsaka kasnejša sprememba z direktivo ng-model pa bo spremenila vrednost te spremenljivke.. 24.

(36) 3.6 Apache Cordova Apache Cordova je odprtokodno programsko ogrodje za razvoj mobilnih aplikacij, ki omogoča razvoj mobilnih aplikacij za različne mobilne operacijske sisteme. Pri tem se zanaša na uveljavljene tehnologije, kot so HTML5, CSS, JavaScript. [26]. V programskem ogrodju Apache Cordova do sistemskega API-ja dostopamo preko vtičnikov programskega ogrodja. Te uporabimo v primeru, da želimo dostopati do datotečnega sistema, kamere in različnih senzorjev. Do vtičnikov v programskem ogrodju dostopamo preko klicev v JavaScript jeziku. Programsko ogrodje pri zagonu aplikacije aktivira preprosto mobilno aplikacijo, ki aktivira prikaz vsebine v spletnem pogledu (angl. Webview-u.). Slika 11: Arhitektura programskega ogrodja Apache Cordova [37]. Primer preverjanja pripravljenosti kamere s poslušalcem pri vtičniku za kamero: document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { console.log(navigator.camera); }. 25.

(37) 4. RAZVOJNO OKOLJE Pri razvoju programske opreme potrebujemo poleg tehnologij, v katerih izdelujemo aplikacije, še dodatna orodja. V ta namen so se razvila splošna in namenska orodja. Pri splošnih orodjih gre v večini primerov za delo z osnovnimi podpornimi postopki pri razvoju programske opreme, kot sta npr. nadzor različic kode in virtualna razvojna okolja, ki nista vezana na posamezno tehnologijo. Pri namenskih orodjih pa so proizvajalcih orodja izdelali za določeno tehnologijo, tak primer je razvojno okolje Visual Studio, ki je namenjeno za delo z Microsoftovimi tehnologijami.. 4.1 Urejevalnik kode Za vnos in urejanje programske kode bomo uporabili integrirano programsko okolje (angl. IDE) Android Studio, ki ga je Google pripravil za razvijalce mobilnih aplikacij in je tudi uradno programsko okolje za razvoj aplikacij v operacijskem sistemu Android. V okolju najdemo urejevalnik kode, razhroščevalnik, orodje na izdelavo grafičnega vmesnika aplikacij, različna orodja za povezavo s podatkovnimi bazami ter orodja za nadzor različic kode. Na voljo je tudi večje število vtičnikov, ki razširijo nabor funkcionalnosti in s tem uporabnost IDE-ja. Pri izbiri urejevalnika kode nismo omejeni le na Android Studio, uporabimo lahko skoraj vsak urejevalnik kode.. 4.2 Nadzor kode Pri razvoju programske opreme je pomembno, da beležimo vse spremembe v programski kodi in da imamo te spremembe shranjene na varnem. Projekti, na katerih dela več razvijalcev namreč hitro postanejo problematični zaradi nezdružljivosti kode in zaradi napak. Pri izdelavi aplikacije si bomo pomagali s sistemom za nadzor različic kode Git. Programsko kodo bomo gostili na ponudniku gostovanja za Git datoteke, odlagališču Bitbucket. Osnovni delo z Gitom zajema pošiljanje kode na odlagališče z ukazoma commit in push ter kasnejše primerjanje različnih verzij enake datoteke. Namen uporabe sistema Git pri razvoju naše aplikacije je preprečiti izgubo podatkov na lokalnem sistemu. 26.

(38) 4.3 Vagrant Vagrant je orodje, ki nam v virtualnem okolju omogoča nameščanje distribucij operacijskega sistema Linux. Poglavitna prednost tega orodja je možnost, da kasneje preprosto spreminjamo nastavitve nameščenih operacijskih sistemov, poljubno lahko tudi dodajamo in odvzemamo nameščene pakete itd.. S tem dosežemo enotno razvojno okolje pri vseh razvijalcih na določenem projektu, prav tako lahko poenotimo testno in produkcijsko okolje aplikacije. Vagrant izkorišča tudi prednost virtualnih okolij, kjer na enem računalniku poganjamo več računalniških sistemov, tako lahko za vsak projekt pripravimo ločen sistem z ustreznimi nastavitvami. Za delovanje orodja Vagrant potrebujemo tudi nameščeno orodje za poganjanje virtualnih okolij, kot sta npr. VirtualBox in WmWare.. Za razvoj bomo uporabili sliko virtualnega operacijskega sistema Ubuntu, ki jo je za razvijalce v ogrodju Ionic pripravilo podjetje Drifty Co... 5. RAZVOJ HIBRIDNE MOBILNE APLIKACIJE 5.1 Načrtovanje aplikacije za izvedbo izobraževalnega tečaja 5.1.1 Osnovne zahteve in struktura aplikacije Aplikacija bo namenjena tako učiteljem kot tudi učencem. Učitelji bodo z njeno pomočjo izdelali krajši izobraževalni tečaj, ki ga bodo razdelili na posamezne lekcije. Pri vsaki lekciji bo na voljo tudi možnost preverjanja znanja. Ta preverjanja bodo izvedena v obliki kviza. Učenec bo tečaj uspešno opravil z dokončanjem končnega testa pri vsakem tečaju. Posamezne lekcije bodo ponujale delo z različnimi oblikami vsebinami. Na voljo bodo besedilne vsebine, video iz zvočni zapisi ter slikovno gradivo. Učitelji bodo lekcije sestavljali z uporabo obstoječih vsebin ali pa bodo z mobilno napravo ustvarili nove vsebine, npr. video posnetke in zvočne posnetke. Aplikacija mora tudi omogočati avtentifikacijo in avtorizacijo učencev in učiteljev.. 27.

(39) 5.1.2 Uporabniški vmesnik Za načrtovanje uporabniškega vmesnika lahko pri prvih korakih uporabimo eno izmed številnih orodij za modeliranje uporabniških vmesnikov. Pri tem procesu je pomembno, da so prvi modeli namenjeni le za osnovni vtis o možnostih postavitve grafičnih elementov. Podrobnejše modeliranje sledi kasneje, ko so definirani skoraj vsi koraki v uporabniškem vmesniku.. Slika 12: Primer modela uporabniškega vmesnika za našo aplikacijo. V naši aplikaciji bomo uporabili meni z zavihki, preko katerih bodo uporabniki dostopali do posameznih lekcij. Možna izvedba je tudi z vstopnimi točkami za posamezne tečaje, ki pa je pri naši aplikaciji ne bomo implementirali. Posamezne lekcije bodo poleg izobraževalnih vsebin vsebovale tudi preverjanje znanja.. 5.1.3 Podatkovna baza Za shranjevanje podatkov bomo uporabili podatkovno bazo MongoDB, ki je predstavnica NoSQL dokumentnih podatkovnih baz. MongoDB je v zadnjih letih postal zelo razširjen, podpirajo ga tudi vse vodilne programske tehnologije, kot npr. .NET, JAVA, PHP in Ruby. Glavna lastnost NoSQL podatkovni baz je ta, da podatki niso organizirani v tabele temveč v zbirke dokumentov. 28.

(40) Tabela 2: Primerjava pojmov v relacijskih in MongoDB podatkovnih bazah [27]. Relacijska podatkovna baza – SQL. MongoDB podatkovna baza – NoSQL. Podatkovna baza. Podatkovna baza. Tabela. Zbirka. Vrstica. Dokument. Stolpec. Polje. Indeks. Indeks. Join na tabelah – pridružene tabele. Vgrajeni poddokumenti. Primarni ključ. Primarni ključ. Razlog da smo izbrali podatkovno bazo MongoDB je tudi ta, da je zapis podatkov v tabelah v obliki BSON, kar pomeni da v programski kodi uporabljamo zapis JSON, tudi komunikacija z bazo je izvedena v JavaScript sintaksi.. 5.2 Kodiranje Kodiranje aplikacije izvedemo v treh fazah, pri razvoju se druga in tretja faza med seboj izmenjujeta.. Faze kodiranja mobilne hibridne aplikacije . Priprava razvojnega okolja z Vagrantom,. . razvoj strežniške programske kode z Node.js in MongoDB. . razvoj hibridne mobilne aplikacije s programskima ogrodjema Ionic in Apache Cordova. V naslednjih podpoglavjih so prikazani samo ključni deli odjemalčeve programske kode ter programske kode na strežniku.. 29.

(41) 5.2.1 Priprava razvojnega okolja z Vagrantom Pred pričetkom kodiranja najprej poženemo Vagrant in na njem Node.js strežnik, ki spremlja vse spremembe v datotekah in pri shranjevanju sprememb osveži aplikacijo v brskalniku na strežniku. V sistemu Windows uporabljamo samo urejevalnik kode, orodje za administracijo podatkovne baze in SSH program za povezovanje na Vagrant. Sistema Windows 7 in Linuxova distribucija Ubuntu 10.04 si delita samo skupno mapo, v kateri je nameščena programska koda naše aplikacije.. Slika 13: Arhitekturni diagram razvojnega okolja, povzeto po [38]. Pri programiranju aplikacije večino kodiranja in testiranja opravimo v spletnem brskalniku na osebnem računalniku, zato moramo tudi omogočiti posredovanje vrat za dostop do strežnika. Vsa strežniška koda je zbrana v datoteki server.js, kjer najdemo naslednje dele kode: . funkcijo za vzpostavitev Node.js spletnega strežnika,. . funkcije za obravnavo zahtevkov glede na parametre v zahtevku,. . funkcije za pošiljanje odgovorov k odjemalcu,. . funkcije za delo s podatkovno bazo,. . ostale pomožne funkcije 30.

(42) Odjemalčeva programska koda . HTML in CSS predloge za izgradnjo uporabniškega vmesnika (glavni meni, seznami, podrobni pogledi, pojavno okno za prijavo v aplikacijo),. . JavaScript datoteka app.js z definiranimi stanji aplikacije in funkcijami za aktivacijo posameznih vtičnikov ogrodja Apache Cordova,. . JavaScript datoteka controllers.js z definiranimi funkcijami za komunikacijo s strežnikom in funkcijami za prikaz elementov pri odjemalcu.. Strežniška programska koda se nahaja v mapi backend, odjemalčeva programska koda se nahaja v mapi www. Pri razvoju aplikacije uporabljamo dva različna strežnika. Prvi strežnik je namenjen platformama Ionic in Cordova in ga poženemo z ukazom sudo ionic serve --address 0.0.0.0 –p 8100. Drugi strežnik je namenjen funkcionalnostim v ozadju (angl. backend) in po sprejemu zahtevkov iz aplikacije izvaja operacije na podatkovni bazi ter vrača zahtevane podatke. Poženemo ga z ukazom sudo node server.js, zahtevke prejema na vratih 3000. Ker imamo razvojno okolje pripravljeno v virtualnem sistemu, moramo v programu VirtualBox omogočiti posredovanje zahtevkov na izbranih vratih, drugače komunikacija ne bo delovala.. 5.2.2 Razvoj strežniške programske kode z Node.js in MongoDB Prikaz tečajev in lekcij z vsebino Tečaje in njim pripadajoče lekcije smo shranili v podatkovno bazo v zbirko dokumentov z imenom courses. Vsak dokument v tej zbirki predstavlja posamezen tečaj, lekcije so predstavljene v obliki vgrajenih poddokumentov. V Node.js si delo s podatkovno bazo MongoDB olajšamo z orodjem za objektno modeliranje Mongoose, s katerim v izvorni kodi aplikacije izdelamo podatkovne sheme in objekte, ki jih nato shranjujemo v podatkovno bazo.. Izdelava podatkovne sheme in podatkovnega modela z orodjem Mongoose: var Schema = mongoose.Schema, ObjectId = Schema.ObjectId; var Tecaj = new Schema({. 31.

(43) title: { type: String}, content: { type: String}, lessons: [Lekcija] }) var ModelTecaj = mongoose.model('Course', Tecaj); var tecaj = new ModelTecaj();. Slika 14: Zapis izobraževalnih tečajev v MongoDB podatkovni zbirki. Ker so podatki v podatkovni bazi MongoDB prikazani v zapisu JSON, jih pred vračanjem k odjemalcu ni potrebno prilagajati in je zato funkcija v strežniški kodi preprosta. Odgovor strežnika na zahtevek po vseh tečajih: app.get('/courses', function (req, res) { var ModelTecaj = mongoose.model('Course', Tecaj); ModelTecaj.find({}, function (err, docs) { if (!err && docs) { res.send(docs); } else { res.send('NOTOK'); } }); });. 32.

(44) Opis kode: Po zahtevku iz brskalnika, ki v naslovu vsebuje niz /courses, s klicem funkcije .find() v podatkovni zbirki »courses« poiščemo vse dokumente in jih pošljemo brskalniku, kjer delo prevzame odjemalčeva programska koda z ogrodjem AngularJS. Povezave do posameznih tečajev se nato pojavijo v glavnem meniju, po kliku na te povezave se prikaže seznam z lekcijami tečaja ter povezava na preverjanje znanja. Po kliku (dotiku) na posamezno lekcijo se uporabniku prikaže vsebina lekcije. Vsebina lekcije je v podatkovni zbirki zapisana kot niz s HTML kodo, ki jo v brskalniku prikažemo z direktivo ng-bindhtml="lekcija.content". Ta direktiva ustrezno obravnava HTML značke in se izogne npr. enojnim in dvojnim narekovajem. Vsebina lekcije je lahko v vsakršni obliki, ki jo je spletni brskalnik zmožen prikazati.. Zaključni test Zaključni test ima enako obliko kot preverjanje znanja, le da je časovno omejen. Učenec mora pred pretekom dovoljenega časa odgovore poslati na strežnik, pri tem ni nujno, da je odgovoril na vsa vprašanja. Vrednotenje rezultatov je možno avtomatizirati le pri vprašanjih izbirnega tipa, pri ostalih tipih mora odgovore pregledati učitelj.. Slika 15: Zaključni test pri posameznem tečaju. 33.

(45) Odgovore, ki jih pošlje učenec po končanem testu, shranimo v podatkovno zbirko »answers«, iz katere kasneje beremo podatke za prikaz v učiteljevem pogledu. Pri pošiljanju odgovor nazaj na strežnik v objekt dodamo še id uporabnika in id tečaja. Zapis učenčevih odgovorov v podatkovno zbirko »answers«: app.put('/setanswers', function (req, res) { var ModelAnswer = mongoose.model('Answer', Odgovor); var answer = new ModelAnswer(req.body.answers) answer.save( function (err) { if (err) { console.log('napaka pri shranjevanju'); res.send('NOTOK'); } }); });. Opis kode: Iz odjemalca pošljemo odgovore in ostale podatke v JSON obliki, ki že ustreza shemi v podatkovni zbirki. Zatem na strežniku ustvarimo objekte in jih v podatkovno zbirko shranjujemo direktno brez kakršnegakoli pretvarjanja in prilagajanja.. Upravljanje vsebin in uporabnikov Upravljanje uporabnikov in urejanje in vnašanje vsebin se na mobilni napravi izkaže za zelo zamudno. Največja pomanjkljivost je hitrost tipkanja na mobilni tipkovnici, ki je manjša kot pri tipkanju s tipkovnico na osebnih računalnikih. Ta težava se z večanjem baze vsebin sicer zmanjša, možna rešitev bi bil uvoz pripravljenih vsebin v podatkovno bazo MongoDB. Druga rešitev bi bila uporaba aplikacije v razvojni obliki na spletnem strežniku, do katerega bi dostopali z brskalnikom na osebnem računalniku. V tem primeru pa bi morali prilagoditi uporabniški vmesnik za prikaz na večjih zaslonih. Pri razvoju aplikacije smo vsebine urejali direktno v podatkovni bazi, za komunikacijo učitelj-učenec smo implementirali pošiljanje sporočil ter obvestilo o doseženem rezultatu na zaključnem testu.. 34.

(46) 5.2.3 Razvoj hibridne mobilne aplikacije s programskima ogrodjema Ionic in Apache Cordova Izdelava osnovnega uporabniškega vmesnika S pomočjo gradnikov, ki jih ogrodje Ionic ponuja za gradnjo uporabniškega vmesnika, zgradimo preprost uporabniški vmesnik. Glavna elementa v uporabniškem vmesniku sta glavni meni in področje za prikaz vsebine. Videz elementov v aplikaciji določimo z razredi, ki jih pripnemo na HTML elemente. Vsakemu stanju uporabniškega vmesnika namreč pripada tudi HTML predloga, ki jo ustrezno oblikujemo.. Slika 16: Glavni meni aplikacije. HTML koda glavnega menija aplikacije, prikazanega na sliki 13: <ion-content> <ion-list> <ion-item menu-close ng-click="login()"> <i class="ion-log-in"></i> Prijava/Odjava </ion-item> <ion-item menu-close ng-repeat="tecaj in tecaji" href="#/app/tecaj/{{tecaj._id}}" ngshow="loggedin"> <i class="ion-easel"></i> Tečaj {{tecaj.title}} </ion-item> <ion-item menu-close href="#/app/test">. 35.

(47) <i class="ion-alert"></i> Test mobilne naprave </ion-item> <ion-item menu-close href="#/app/admin" ng-show="admin"> <i class="ion-gear-b"></i> Administracija </ion-item> </ion-list> </ion-content>. Opis kode: HTML koda je dopolnjena z direktivami, ki jih v ogrodju Ionic omogoča JavaScript ogrodje AngularJS. Direktiva <ion-content> je namenjena prikazu vsebine in omogoča npr. prilagojeno drsenje vsebine in dodatne posebne učinke. Zapis v kodi oblike {{tecaj.title}} je standardna sintaksa ogrodja AngularJS, z njo dostopamo do lastnosti objektov, ki smo jih določili za trenuten pogled. V klientovi programski kodi vrednosti objektov nastavljano s sintakso $scope.tecaj = { title: »Računalništvo«, content: …};. V zgornji HTML kodi so uporabljene tudi poti (angl. route), kjer po kliku na povezavo spremenimo stanje aplikacije. Primer poti iz zgornje kode: »#/app/tecaj/{{tecaj._id}}«.. 5.2.4 Avtentifikacija in avtorizacija uporabnikov: Aplikacija je namenjena učencem in učiteljem, zato moramo razlikovati med tema dvema skupinama uporabnikov. V ta namen izdelavo preprosto prijavo v aplikacijo in preprečimo uporabo aplikacije neprijavljenim uporabnikom.. Prijava uporabnika z AngularJS: $scope.doLogin = function() { var req = { method: 'POST', url: 'http://localhost:3000/login', data: $scope.loginData } $http(req).then(function(response){ if ( response.data == 'OK') { $scope.loggedin = true;. 36.

(48) $scope.user = response.data; $timeout(function() { $scope.closeLogin(); }, 500); } }, function(){ console.log('error'); }); };. Opis kode: S pomočjo asinhronega zahtevka $http pošljemo na strežnik http://localhost z vrati 3000 podatke, ki jih je v prijavni obrazec vpisal uporabnik. Če so bili vpisani podatki pravilni in je odgovor strežnika ustrezen, nastavimo spremenljivko $scope.loggedin na vrednost true in uporabniku pokažemo skrite dele aplikacije. Skrite dele smo predhodno skrili z direktivo ngshow="loggedin". Vlogo uporabnika dobimo iz podatkovne baze uporabnikov v polju vloga. V tem koraku tudi shranimo podatke o uporabniku v spremenljivo $scope.user.. 5.2.5 Preverjanje znanja Preverjanje znanja je namenjeno učencem in učiteljem, oboji pri tem dobijo povratne informacije o osvojeni učni snovi. Učenci dobijo povratno informacijo takoj, saj se pri dotiku na ponujene odgovore pravilni odgovori obarvajo v zeleni barvi, napačni pa v rdeči barvi. Učitelji dobijo vpogled v znanje učencem z rezultati zaključnega testa, ki se prikažejo v obliki lestvice.. Preverjanje Pri preverjanju znanja učencem prikažemo vprašanja, ko smi jih določili vsakemu tečaju posebej. V podatkovni zbirki »courses« ustvarimo novo polje poddokumentov z imenom »preverjanje«. Elementi tega polja so posamezna vprašanja z možnimi odgovori, pravilen odgovor ima v polju »pravilen« vrednost true. V aplikaciji kasneje ob dotiku na posamezen odgovor preverjamo ravno vrednost polja »pravilen« in ga ustrezno obarvamo. Preverjanje je namenjeno le učencem, učitelj pri tej točki nima vpogleda v učenčevo statistiko.. 37.

(49) Individualne naloge Pri individualni nalogi za vsakega učenca posebej določimo tip naloge in vsebino z navodili. Naloga od učencev zahteva, da uporabijo mobilno napravo za zajem fotografij, video posnetkov in zvočnih posnetkov. Datoteke učenci nato pošljejo na strežnik, kjer jih učitelj pregleda in posreduje povratno informacijo učencem v obliki komentarja .. Slika 17: Uporaba fotoaparata pri individualni nalogi. Za hitrejše in preprostejše delo uporabimo AgularJS vtičnik ngCordova, ki že vsebuje funktionalnosti za delo z ogrodjem Apache Cordova. Aktivacija in uporaba kamere mobilne naprave: $scope.fotografiraj = function() { var options = { quality: 80, destinationType: Camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.CAMERA, allowEdit: true, encodingType: Camera.EncodingType.JPEG, targetWidth: 250,. 38.

(50) targetHeight: 250, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false };. $cordovaCamera.getPicture(options).then(function(imageData) { $scope.srcImage = "data:image/jpeg;base64," + imageData; }, function(err) { }); };. Opis kode: V kodi smo definirali funkcijo $scope.fotografiraj, ki sproži privzeti program za uporabo kamere na mobilni napravi. S funkcijo cordovaCamera.getPicture smo poklicali vtičnik ogrodja Cordova »cordova-plugin-camera«, ki omogoča dostop do kamere. Tej funkciji smo podali tudi parametre, kot je npr. destinationType, kjer smo za mesto shranjevanja slike določili privzeto pot shranjevanja slik na mobilnem operacijskem sistemu. Pri postopku nalaganja slike na strežnik se vedno uporabi zadnja ustvarjena fotografija, katere ime in pot shranimo v odjemalčevi programski kodi.. 39.

(51) 5.3 Testiranje aplikacije Aplikacijo je bila v celoti razvita na osebnem računalniku, kjer smo za delo uporabili brskalnik Chrome. Z delu z ogrodjem AngularJS in sprotno odpravo napak smo uporabili razvojna orodja, ki so vgrajena v Chrome. Od teh orodij smo uporabili konzolo za pregled sporočil o napakah, orodje za opazovanje prometa na omrežju in razhroščevalnik za JavaScript. Opazili smo veliko pomanjkljivost, saj vtičniki ogrodja Cordova niso delovali v namiznih brskalnikih. Testiranje v emulatorju operacijskega sistema Android smo namerno izpustili, ker se je delovanje izkazalo za prepočasno za učinkovito delo. Druga velika pomanjkljivost je bila nezmožnost poganjanja aplikacije iz virtualnega sistema, v katerem smo aplikacijo razvijali. Zato smo morali aplikacijo s pomočjo Git-a zgraditi na sistemu Windows, od koder smo jo lahko prenesli na mobilne naprave. Aplikacijo smo na koncu testirali na dveh različnih mobilnih napravah. Prva naprava je bil mobilni telefon Samsung A5, druga naprava pa je bil tablični računalnik Asus ZenPad 8. Osnovne funkcionalnosti so pravilno delovale na obeh napravah, na tabličnem računalniku ni delovala aktivacija kamere. Delovanje uporabniškega vmesnika je bilo na obeh napravah tekoče, v primerjavi z uporabo v namiznem spletnem brskalniku je bila uporaba aplikacije na mobilni napravi intuitivna. Tudi elementi grafičnega vmesnika so bili že privzeto dovolj veliki za upravljanje z dotikom.. 5.4 Prenosljivost hibridne mobilne aplikacije V programske ogrodju Ionic sta trenutno podprti platformi Android in iOS. Pri testiranju aplikacije smo aplikacijo testirali na dveh napravah z različnima verzijama operacijskih sistemov Android in v emulatorju za Androidin za obe je bila aplikacija prenosljiva brez popravkov programske kode. Za poganjanje aplikacije v iOS pa moramo aplikacijo nujno zgraditi na Applovem namiznem operacijskem sistemu OSX, kar pomeni, da poleg iPhona ali iPada nujno potrebujemo tudi Applov osebni računalnik. Tega postopka pri izdelavi aplikacije nismo preizkusili.. 40.

No results found