UNIVERZA V MARIBORU

FAKULTETA ZA ELEKTROTEHNIKO,

RAČUNALNIŠTVO IN INFORMATIKO

Blaž Udovč

RAZVOJ MOBILNE APLIKACIJE ZA UČENJE ABECEDE

Diplomsko delo

Maribor, september 2017

UNIVERZA V MARIBORU

FAKULTETA ZA ELEKTROTEHNIKO,

RAČUNALNIŠTVO IN INFORMATIKO

Blaž Udovč

RAZVOJ MOBILNE APLIKACIJE ZA UČENJE ABECEDE

Diplomsko delo

Maribor, september 2017

I

RAZVOJ MOBILNE APLIKACIJE ZA UČENJE ABECEDE

Diplomsko delo

Študent: Blaž Udovč

Študijski program: Visokošolski strokovni študijski program

Informatika in tehnologije komuniciranja

Smer: Sistemska podpora informatiki in tehnologijam komuniciranja

Mentor: doc. dr. Domen Verber

Somentor: /

Lektorica: Magda Kastelic Hočevar, prof. RP

II

Razvoj mobilne aplikacije za učenje abecede

Ključne besede: Android, aplikacija, mobilno učenje, abeceda

UDK: 621.397.7-026.26:003(043.2)

Povzetek

V tem diplomskem delu smo predstavili izobraževalne aplikacije in postopek razvoja

tovrstne aplikacije za mobilne naprave, in sicer za operacijski sistem Android ob uporabi

priljubljenih tehnologij in orodij kot so SQLite in razvojno okolje Android Studio. V prvem

delu so predstavljeni ideja za aplikacijo, teoretično ozadje ter podobni izdelki na tržišču.

Nato je na primeru prikazan proces razvoja tovrstne aplikacije. V zadnjem delu smo

predstavili ugotovitve in spoznanja ob delu in možnosti za nadaljevanje projekta. Rezultat

diplomskega dela je delujoča aplikacija za učenje abecede.

III

Development of mobile app for learning the alphabet

Key words: Android, Application, Mobile learning, Alphabet

UDK: 621.397.7-026.26:003(043.2)

Abstract

In this thesis we presented educational apps and the development of such application for

mobile devices, more specifically for operating system Android, using popular tools and

technologies like SQLite and Android Studio IDE. In the first part of the thesis we presented

the idea for aplication, theoretical background and few similar products on the current

market. Next part showcases the development process using our example. We concluded

the thesis with observations we made while working on the thesis and options for further

development. The result of this thesis is a functional application for learning the alphabet.

IV

KAZALO VSEBINE

1 Uvod ............................................................................................................................... 1

2 Teoretično področje ....................................................................................................... 2

2.1 Mobilno učenje in izobraževalne aplikacije ............................................................ 3

2.2 Primeri izobraževalnih aplikacij .............................................................................. 5

3 Analiza in načrtovanje .................................................................................................. 13

3.1 Perspektiva ............................................................................................................ 13

3.2 Uporabniki............................................................................................................. 13

3.3 Funkcionalnosti ..................................................................................................... 13

3.4 Načrtovanje ključnih funkcionalnosti ................................................................... 15

3.5 Načrtovanje podatkovnega modela ..................................................................... 17

3.6 Načrtovanje uporabniškega vmesnika .................................................................. 18

4 Implementacija ............................................................................................................. 23

4.1 Podatkovna baza ................................................................................................... 24

4.2 Multimedijske vsebine v aplikaciji ........................................................................ 26

4.3 Uporabniški vmesnik ............................................................................................. 27

4.4 Glavne funkcionalnosti ......................................................................................... 32

4.5 Testiranje .............................................................................................................. 37

5 Sklep ............................................................................................................................. 38

5.1 Možnosti za nadgradnjo in nadaljevanje projekta ............................................... 38

5.2 Zaključek ............................................................................................................... 40

Bibliografija .......................................................................................................................... 42

V

KAZALO SLIK

Slika 1: Duolingo vmesnik ................................................................................................................... 5

Slika 2: Duolingo vmesnik ................................................................................................................... 6

Slika 3: Duolingo – nadzorna plošča ................................................................................................... 6

Slika 4: Ježkove dogodivščine za otroke – vmesnik ............................................................................ 8

Slika 5: Varuh morij – vmesnik ........................................................................................................... 9

Slika 6: Uporabniški vmesnik aplikacije Abecedko ........................................................................... 10

Slika 7: Vodič za črke ........................................................................................................................ 11

Slika 8: Uporabniški vmesnik aplikacije Endless Aplhabet ............................................................... 11

Slika 9: Diagram primerov uporabe ................................................................................................. 16

Slika 10: Entitetno-relacijski model .................................................................................................. 18

Slika 11: Navigation Drawer ............................................................................................................. 20

Slika 12: Prototip domače strani aplikacije ..................................................................................... 21

Slika 13: Prototip vmesnika za kviz................................................................................................... 22

Slika 14: Primer ustvarjanja tabele ................................................................................................... 25

Slika 15: Reaper – zvočni posnetek .................................................................................................. 26

Slika 16: Projektna struktura – mape za vire .................................................................................... 27

Slika 17: Primer uporabniško definiranih značk ............................................................................... 27

Slika 18: Layout Editor ...................................................................................................................... 28

Slika 19: Preklop Fragmenta ............................................................................................................. 29

Slika 20: Component tree ................................................................................................................. 29

Slika 21: Viri ...................................................................................................................................... 30

Slika 22: XML – kazalec na vir ........................................................................................................... 30

Slika 23: Layout editor – kazalec na vir ............................................................................................ 31

Slika 24: Menjava vira ...................................................................................................................... 32

Slika 25: Uporabniški vmesnik funkcionalnosti kviz ......................................................................... 32

Slika 26: Kviz – Izberi prvo črko besede............................................................................................ 33

Slika 27: Igra Spomin ........................................................................................................................ 34

Slika 28: Spomin – logika .................................................................................................................. 35

Slika 29: Profil, Nastavitve, dialog za datum .................................................................................... 36

VI

SEZNAM UPORABLJENIH KRATIC

GUI – Grafični uporabniški vmesnik

IDE – Integrirano razvojno okolje

APK – Namestitveni paket za aplikacijo

SDK – Komplet orodij za razvijanje programske opreme

OS – Operacijski sistem

1

1 UVOD

S hitrim razvojem mobilnih tehnologij in mobilnih naprav so te postale del našega vsakdana.

Že skoraj vsak izmed nas ima vsaj eno izmed takih naprav zaradi njihove dostopnosti,

priročnosti in zmogljivosti, ki se kosa z osebnim računalnikom. Poleg osnovnih

funkcionalnosti, ki jih omogoča operacijski sistem mobilne naprave, lahko uporabniki

izbiramo med nešteto brezplačnimi ali plačljivimi namenskimi aplikacijami.

Prav zaradi dostopnosti in priljubljenosti mobilnih aplikacij med uporabniki mobilnih naprav

in želje po spoznavanju tehnologij za izdelavo tovrstnih aplikacij smo se odločili za razvoj

mobilne aplikacije za operacijski sistem Android, ki bi omogočila otrokom učenje abecede

na bolj sodoben način. Aplikacija bi vključevala nekaj preverjenih metod, ki jih starši in

učitelji uporabljajo že vrsto let. Cilj je bil združiti in prirediti nekaj izmed teh metod za

uporabo na mobilnih napravah, kar bi rešilo problem uporabe več različnih učnih

pripomočkov ter tako olajšalo staršem in otrokom učenje abecede.

V tem diplomskem delu smo raziskali področje izobraževalnih aplikacij in podrobneje

predstavili izobraževalne aplikacije, idejo za aplikacijo ter proces razvoja aplikacije in

predstavili nekaj tehnologij za razvoj aplikacij, ki smo jih uporabili. Predstavili smo tudi

ključne funkcionalnosti naše aplikacije, načrtovanje podatkovnega modela ter prototipa

uporabniškega vmesnika, implementacijo uporabniškega vmesnika, podatkovne baze ter

glavnih funkcionalnosti.

2

2 TEORETIČNO PODROČJE

Pismenost je sposobnost branja in pisanja in po terminologiji UNESC-a, zmožnost

razumevanja vsakdanjih sporočil. [1] Med prvimi koraki na poti k opismenjevanju je učenje

črk abecede ter števk. Otroci so neprestano izpostavljeni črkam in zato začnejo hitro kazati

zanimanje zanje. [2] Vsak dan opazujejo starše, starejše brate in sestre pri branju knjig,

časopisov in revij, kar v njih vzbudi radovednost. [3] Ko pride ta čas, je pomembno, da se

otroku ponudi za igro igrače in zabavne dejavnosti, ki mu pomagajo pri spoznavanju imena

črk, glasov in njihovega zaporedja. [2].

Že dolgo časa prav v ta namen obstajajo raznovrstni pripomočki, kot so na primer

sestavljanke, kocke, spominske igre, knjige, tombola s črkami, pesmice. Otrok tako vsako

črko posebej prime v roko, vidi sličico, ki predstavlja njen pomen, in črke sestavi v celoto –

abecedo. Prav tako je v teh primerih omogočeno staršem, da se vključijo v otrokovo učenje.

Ob igri mu ponavljajo glasove črk, ki jih otrok odkriva. Ob tem čuti veliko zadovoljstvo, saj

je lahko pri igri samostojen in ponosen na svoj končni izdelek. [2] Skrajno neprimerno bi

bilo, če bi otroka skušali na silo naučiti pisati in brati, zato vse dejavnosti potekajo v obliki

igre, zabavnega in koristnega druženja z otrokom. [3]

Živimo v modernem času oz. času sodobne tehnologije, ko ima vsako gospodinjstvo doma

na dosegu otrok več tehnologije, kot so jo včasih imele šole. Povprečna družina ima na voljo

doma računalnik, prenosnik, tablico ali pametni telefon – veliko celo vse našteto. S tem

raste tudi zanimanje za tehnološke naprave pri otrocih. To zanimanje lahko izkoristimo in

otroke usmerimo v aktivnosti za pridobivanje znanja, saj so zanj izredno dovzetni. Hitrost

učenja majhnih otrok je neverjetna in prav je, da jim starši v tem obdobju, ko kar vpijajo

znanje, dajo čim več dolgoročno uporabnega znanja z uporabo sodobne tehnologije. [4]

Učenje je z uporabo različnih sodobnih naprav lažje. Kombinacija naprave, glasbe slike ter

poučne vsebine vpliva na to, da otrok hitro osvoji nova znanja. [4]

3

2. 1 Mobilno učenje in izobraževalne aplikacije

Definicija mobilnega učenja se še razvija zato obstaja več možnih definicij. Pomembne

točke v definicijah so, da je to učenje, ki poteka na različnih lokacijah in izkorišča prednosti,

ki jih ponujajo prenosne mobilne tehnologije. Gre tudi za podporo oz. nadgradnjo za

klasičen način učenja, poučevanja in e-učenje. Vse skupaj se je začelo z razvojem mobilnih

tehnologij, ki ponujajo veliko funkcionalnosti in s tem spreminjajo učenje. [5]

Nekaj teh funkcionalnosti:

Prenosljivost – Mobilne naprave so lahko prenosljive, kar pomeni, da omogočijo

aktivnosti učenja izven tradicionalnega učnega okolja.

Povezljivost – Uporabniki z lahkoto dostopajo do najrazličnejših vsebin in se hkrati

povezujejo med sabo v danem omrežju

Interaktivnost – Prej je bilo mobilno učenje pojmovano kot izolirana aktivnost, zdaj

pa mobilne naprave, ki so socialne naprave, promovirajo povezovanje

uporabnikov.

Individualnost – Različne aktivnosti na mobilnih napravah so lahko prilagojene

glede na uporabnika. Tako lahko uporabnik sam na primer oblikuje, kako bo

uporabljal podan učni material.

Mobilno učenje se lahko izvaja s hrambo informacij, zvokom, slikami/ilustracijami,

animacijami, sodelovanjem z drugimi uporabniki, preko iger, z iskanjem informacij,

branjem, reševanjem kvizov, anketiranjem z uporabo mnogih aplikacij, ki jih ponujajo

mobilne naprave. Aplikacije lahko tako na nek način predstavljajo digitalne nahrbtnike

orodij, ki so jih prej okrog uporabniki nosili fizično. [5]

Otroci in mobilno učenje

Pogosto se poudarjajo negativni učinki digitalnih medijev na otroke. Osnovala se je ideja,

da bi morali otroke pred novimi tehnologijami zaščititi, vendar so se napredki v tehnologiji

dogajali vedno. Dejstvo je da se pred spremembami v tehnologiji ne moremo izolirati.

Pomembno je, da smo pri uporabi previdni. Aplikacije pri otrocih spodbujajo domišljijo,

veliko jih pomaga pri razvoju mišljenja in tudi v šolstvu se izkažejo kot uporaben

4

pripomoček. Ključna je vloga staršev oz. pedagoških delavcev, da preverijo aplikacijo in

ocenijo, ali je primerna za otroka. [6]

Aplikacija naj

pri otroku spodbuja razmišljanje, da se ob uporabi zgolj ne kratkočasi.

bo smiselna. Pri učenju abecede na primer je pomembno, da otrok ugotovi, da se

zvoki povezujejo s črkami in nam omogočajo sporazumevanje. Novo pridobljeno

znanje morajo videti v uporabi.

vključuje učenje s podporo socialne interakcije. Znano je, da so ljudje najboljši pri

učenju ljudi. Zato naj aplikacija spodbuja otroke, da se igrajo skupaj s starši in

ostalimi prijatelji. Tudi uporaba slavnih likov, kot so Miki miška in podobni,

pomagajo otrokom, da se počutijo povezani, kar izboljša proces učenja. [7]

Negativni učinki tehnologije

Ne smemo zanemariti negativnih učinkov uporabe tehnologije pri otrocih. Pri pretirani

uporabi tehnologije lahko pri otrocih opazimo slabši fizični, osebni in socialni razvoj, saj se

otroci manj gibljejo in družijo z drugimi ljudmi. Pretirana uporaba lahko vodi tudi v

odvisnost od tehnologije. Odvisni otroci se ob neuporabi naprav počutijo osamljene,

vznemirjene, razdražene in nesrečne. [8] Starši so odgovorni, da njihovi otroci s tehnologijo

ravnajo primerno in jo uporabljajo v namene, ki so zanje koristni.

5

2.2 Primeri izobraževalnih aplikacij

Duolingo

Duolingo je aplikacija za učenje jezikov, ki je primerna za otroke in odrasle. Uporabniki se

lahko v obliki mini kvizov in iger učijo več kot 12 različnih jezikov. Razvijalci aplikacije trdijo,

da uporabniki v 34-ih urah osvojijo enako znanje kot v enem semestru šole. Duolingo

uspešno implementira tehnike igrifikacije. Ko uporabnik napačno odgovori na vprašanje, ga

aplikacija v obliki vodiča vodi do pravilnega odgovora. Aplikacija v obliki točk dodatno

motivira uporabnike, da jo uporabljajo vsak dan. Pri nepravilnih odgovorih uporabniki

izgubljajo »življenja« ter se tako borijo, da »preživijo« vsak test, kar je vidno z Slike 1 desno

zgoraj. Če izgubijo vsa »življenja« morajo ponoviti reševanje naloge od začetka. [9]

Na Slikah 1 in 2 so zaslonske slike uporabniškega vmesnika aplikacije.

Slika 1: Duolingo vmesnik

6

Slika 2: Duolingo vmesnik

Aplikacija je primerna tudi za uporabo v šolah, saj vsebuje funkcionalnosti za pedagoške

delavce. Aplikacija se prilagaja vsakemu uporabniku posebej v obliki individualnih lekcij.

Učitelji lahko sledijo napredku vsakega izmed učencev preko posebne nadzorne plošče. Del

vmesnika nadzorne plošče je prikazan na Sliki 3. Tako lahko učitelji združujejo učence v

skupine in lažje identificirajo področja, ki učencem delajo težave ter se bolj osredotočijo

nanje tekom pouka. [9]

Slika 3: Duolingo – nadzorna plošča

7

Ježkove dogodivščine za otroke

Aplikacija razvijalca Iana Robertsona ponuja interaktivno zgodbo o ježku in njegovih

prijateljih v slovenskem jeziku. Aplikacija ob pripovedovanju zgodbe otroku predstavi veliko

izobraževalnih nalog in mini iger, ki so bile načrtovane ob pomoči otroškega psihologa. Med

igranjem si otrok razvija pozornost, delovni spomin, logično mišljenje in prostorsko

inteligenco. Primerna je za otroke v starostni skupini od 4 do 6 let.

Ko uporabnik zaključi zgodbo, so mu na voljo še dodatne mini igre, ki jih lahko rešuje v

različnih težavnostnih stopnjah:

Lahko – 4 leta (majhni otroci),

Normalno – 5 let (otroci, ki se pripravljajo na šolo),

Težko - 6 let (osnovna šola),

Zelo težko – težavnostna stopnja za nadarjene otroke.

Nekaj nalog, ki jih vsebuje, so iskanje razlik med slikami, sestavljanke, iskanje napak na

slikah, labirinti, razvrščanje števil v zaporedja, križanke s predmeti in geometrijskimi

oblikami, spomin. Primeri uporabniškega vmesnika teh nalog so vidni s Slike 4. [10]

8

Slika 4: Ježkove dogodivščine za otroke – vmesnik

Aplikacija po namestitvah spada v kategorijo nad 1 milijon namestitev. Na voljo je

brezplačna različica, v kateri se prikazujejo oglasi, in plačljiva različica brez teh. [10]

Varuh morij

Dvojezična mobilna aplikacija za zgodnje učenje jezikov otroke zbliža tudi z vsebino o

varovanju morij in morskih živali. Njen namen je s pomočjo pravljice ozaveščati otroke o

nevarnostih, ki ogrožajo morske sesalce, kako se jim lahko pomaga in zvišanje zavedanja o

pomenu varovanje narave. Aplikacija je trenutno na voljo le v slovenščini in angleščini, v

prihodnje načrtujejo prevesti vsebino tudi v druge svetovne jezike. Poleg izobraževanja

predšolskih otrok je aplikacija namenjena tudi otrokom prve triade osnovnih šol. Na Sliki 5

je nekaj zaslonskih slik aplikacije. [11]

9

Slika 5: Varuh morij – vmesnik

Avtorica projekta je doktorica okolijskih znanost Mojca Stubelj Ars, ki je del doktorata

opravljala na Havajih. Projekt je delno finančno podprlo tudi Ameriško veleposlaništvo v

Sloveniji v sklopu programa NGO Small Grants. Aplikacija je brezplačna in je trenutno na

voljo samo za operacijski sistem Android. [11]

10

Abecedko – slovenska abeceda

Abecedko je aplikacija ponudnika Funstrict. Na Google Play ima nekje med 5000 in 10.000

namestitev. Aplikacija omogoča otroku, da se na zabaven način nauči izgovorjave črk, števil

in besed, izpeljanih iz slovenske abecede. [12] Za učenje uporablja zvočne efekte, animacije

in otrokom prijazne sličice in lepo oblikovan uporabniški vmesnik. Del uporabniškega

vmesnika je viden na Sliki 6. Aplikacija ne podpira večjezičnosti, prilagoditve uporabniške

izkušnje. V celoti je brezplačna in ne vsebuje oglasov ali plačljivih vsebin. Kljub temu da

aplikacija vsebuje minimalno količino funkcionalnosti za tovrstno aplikacijo, prejema

podporo ter visoke ocene uporabnikov.

Prednosti: preprostost, enostavnost uporabe, aplikacija deluje brez nakupov dodatkov

Slabosti: razmeroma malo funkcionalnosti

Slika 6: Uporabniški vmesnik aplikacije Abecedko

Alphabet

Alphabet je aplikacija ponudnika GoKids! Spada v kategorijo aplikacij z prenosi med 1

milijon in 5 milijoni prenosov. Aplikacija sicer ne omogoča učenja slovenske abecede,

ampak ponuja učenje abecede v angleščini, španščini in ruščini. [13] Omogoča postopno

učenje abecede, saj uporabnik najprej spozna vsako črko posebej v obliki sličic, s katerimi

povezuje črko, nato s pisanjem črke. Znanje nato utrjuje v obliki zabavnih kvizov, ob katerih

zbira točke. Dodatna vsebina se odklepa postopoma. Ponujena je tudi možnost plačila za

takojšen dostop do nje. S plačilom se uporabniki znebijo oglasov v aplikaciji. Na Sliki 7 je

11

viden uporabniški vmesnik za učenje pisanja črk. Otrok s pomočjo te funkcionalnosti spozna

zaporedje potez, ki so potrebne za zapis posamezne črke. Za vsako pravilno napisano črko

uporabnik dobi bombonček, ki predstavlja točke.

Slika 7: Vodič za črke

Prednosti: vodič za učenje črk, večjezičnost.

Slabosti: včasih slaba prepoznava uporabniškega vnosa.

Endless Alphabet

Aplikacija ponudnika Originator Inc. preskoči postopno učenje angleške abecede in se kar

takoj spusti v učenje besedišča ter sestavljanja besed. Uporabnik ob uporabi čudovito

razvitega uporabniškega vmesnika (Slika 8), ki je poln animacij, spoznava črke in iz njih

sestavlja besede. Po uspešnem zaključku naloge aplikacija še razloži pomen besede.

Brezplačna različica aplikacije ponuja samo 7 brezplačnih besed, za polno različico morajo

uporabniki odšteti 9,99 €. [14]

Slika 8: Uporabniški vmesnik aplikacije Endless Aplhabet

12

Prednosti: učenje besedišča ob učenju črk, prijazen uporabniški vmesnik za mlajše

uporabnike.

Slabosti: aplikacija je brez nakupa dodatne vsebine oz. polne različice aplikacije skoraj

neuporabna.

To so samo trije primeri podobnih aplikacij na tržišču. Mislimo, da še vedno obstaja

možnost za konkurenčne izdelke s tega področja. Najbolj smo pri raziskovanju pogrešali

aplikacije, ki imajo funkcionalnosti za starše oz. pedagoške delavce, in izdelke, ki beležijo

natančno statistiko ob uporabi. Vsi predstavljeni izdelki so močno v prednosti pred našo

aplikacijo v smislu uporabniškega vmesnika, ki je bolj interaktiven, prijazen in prilagojen za

mlajše uporabnike, prvotne uporabnike tovrstnih aplikacij. Vsi so oblikovani na principu

otroških risank, ki so v tem starostnem obdobju priljubljena aktivnost pri uporabnikih.

13

3 ANALIZA IN NAČRTOVANJE

3.1 Perspektiva

Cilj razvoja aplikacije za učenje abecede je bil združenje preverjenih metod učenja abecede

za uporabo na mobilnih napravah. Ob uporabi zvoka, slik interaktivnega vmesnika bi bilo

učenje abecede lažje, hkrati bi rešili problem množice različnih učnih pripomočkov.

Uporabnikom bi omogočili pregled napredka, prilagojeno uporabniško izkušnjo in učenje

ob igri. Aplikacija bi bila primerna za uporabo tako doma kot tudi v šolah in vrtcih.

3.2 Uporabniki

Uporabniki aplikacije bi bili v prvi vrsti otroci, vendar bi bila aplikacija primerna za

uporabnike vseh starostnih skupin. Tako bi aplikacijo na mobilno napravo namestili starši

teh otrok oziroma pedagoški delavci za potrebe izobraževanja. Uporabniki znotraj aplikacije

bi se delili na goste in uporabnike oz. na registrirane in neregistrirane uporabnike. Ti bi

lahko glede na status dostopali do različnih funkcionalnosti aplikacije. Aplikacijo bi se lahko

nadgradilo še z dodatno skupino uporabnikov, npr. pedagoški delavci, ki bi imeli možnost

združevanja več uporabnikov v skupine in pregled nad njihovim napredkom. Tako bi

aplikacija lahko postala še bolj atraktivna za uporabo v vzgojno-izobraževalnih zavodih.

3.3Funkcionalnosti

Registracija/prijava

Registracija uporabniškega računa uporabniku omogoča prijavo v aplikacijo ter s tem izbiro

različnih metod učenja črk. Uporabniški račun služi za pregled nad podatki uporabnika ter

napredkom pri učenju ter na podlagi uporabnikovih nastavitev prilagodi delovanje

aplikacije.

14

Vodič za učenje črk

Vodič za učenje črk služi v aplikaciji, ki smo jo razvili, kot temelj, na katerem smo nato

razvijali druge funkcionalnosti. V tem delu aplikacije ima uporabnik pregled nad črkami

abecede in se z njimi spoznava.

Kvizi

Uporabnik z različnimi kvizi utrjuje znanje abecede. Uporabnik s pravilnimi odgovori zbira

točke. Točke so indikator števila pravilnih odgovorov pri uporabi aplikacije. Želja

uporabnikov je, da dosežejo čim več točk, kar pomeni čim več pravilnih odgovorov in s tem

znanje. Uporaba tega elementa igre lahko poveča zadovoljstvo uporabnikov aplikacije. Tej

tehniki načrtovanja se reče igrifikacija (gamefication).

Spomin

Otroci se najlažje učijo skozi igro, zato aplikacija ponuja igro spomin, pri kateri uporabnik

nehote utrjuje znanje. Z rešitvijo igre uporabnik pridobi točke.

Nastavitve

Uporabnik si lahko izbere, katere črke želi vaditi pri kvizu oziroma pri spominu. Tovrstna

funkcionalnost se nam je zdela pomembna, saj učenje poteka postopoma. Težje bi se bilo

naučiti, če bi se od začetka učili z vsemi črkami. Tako smo ponudili uporabnikom možnost,

da začnejo z manj črkami in jih nato postopoma dodajajo. Zaradi tega se uporabnik počuti

uspešnega pri reševanju nalog že od začetka, kar še zviša motivacijo za nadaljevanje

uporabe izdelka.

15

3.4 Načrtovanje ključnih funkcionalnosti

Diagram primerov uporabe

Za načrtovanje diagrama smo uporabili GenMyModel, ki je spletna platforma za

modeliranje poslovnih procesov in IT modeliranje. Uporaba osnovnih funkcionalnosti je

brezplačna, vendar je na voljo plačljiva nadgradnja. [15]

Diagrami primerov uporabe so pri načrtovanju uporabljeni za opis akcij oz. primerov

uporabe, ki jih sistemi lahko izvedejo. Te »aktivnosti« lahko sistem izvaja samostojno ali v

sodelovanju z uporabnikom sistema, ki jih poimenujemo akterji. Povezava med primerom

uporabe in akterjem je predstavljena s polno črto. Dva primera uporabe sta lahko med sabo

povezana s povezavo extend oz. razširi ali include oz. vključi. [16]

Z uporabo nekaj preprostih pravil smo izdelali diagram primerov uporabe za našo aplikacijo.

Najprej smo identificirali obe vrsti uporabnikov (Gost, Uporabnik) in vse pomembne

funkcionalnosti, ki jih lahko uporabljata. Kot vidimo na Sliki 9 lahko Gost v aplikaciji

uporablja samo »Učenje črk«. Za uporabo ostalih funkcionalnosti aplikacije se mora prijaviti

oz. registrirati. Zanimiva je povezava med Uporabnikom in Gostom s Slike 9. Ta povezava

se imenuje generalizacija/generalization, pomeni pa, da »Uporabnik« lahko poleg tega, da

uporablja vse primere, s katerimi je povezan, dostopa tudi do primerov uporabe »Gosta«.

Ta povezava deluje v eno smer. Vsi primeri uporabe so obdani z okvirjem, kar predstavlja

zaključen sistem.

16

Slika 9: Diagram primerov uporabe

Najpomembnejše oz. ključne funkcionalnosti so reševanje kviza, igra Spomin ter učenje črk,

saj z njimi uporabnik doseže željene rezultate. Odločili smo se, da zaenkrat razvijemo dve

različici kviza, ki sta najpomembnejši. V prvi različici se uporabniku predvaja glas, nato mora

izmed treh možnih odgovorov izbrati črko oz. znak za glas, ki jo je slišal. V drugi različici

uporabnik ob poslušanju besede ter s pomočjo slike ugotavlja črko, s katero se beseda

začne. Pri obeh ima uporabnik možnost izbrati nabor črk za vprašanja. Tudi pri drugi različici

uporabnik izbira med tremi možnimi odgovori. Za reševanje kvizov mora imeti uporabnik

izbrane najmanj tri črke.

17

V razdelku za učenje črk ima uporabnik omogočen pregled nad vsemi črkami abecede. Tu

si lahko uporabnik izbere posamezno črko, si predvaja njen glas ter si ogleda sličico, s katero

lahko poveže posamezno črko.

Pri igri Spomin poizkuša uporabnik z odkrivanjem sličic najti par enakih. Za sličice pri igri

smo tokrat izbrali črke. Ob vsakem poizkusu se uporabniku predvaja glas črke, ki jo odkrije.

Tako se uporabniku podzavestno ustvarjajo povezave med črko in zvokom črke. Tako lahko

ob rednem ponavljanju igre hitro in brez napora osvoji črke abecede.

3.5 Načrtovanje podatkovnega modela

Modeliranje podatkov je oblikovanje modela podatkov. Model podatkov je abstraktna,

vendar lahko razumljiva predstavitev potrebnih podatkov celotne organizacije oziroma

njenega dela, kar pomeni predstavitev same organizacije oz. njenega dela z vidika

potrebnih podatkov. [17]

Zbiranje in analiza zahtev

Pri načrtovanju podatkovnega modela smo se morali najprej vprašati, kakšne podatke je za

delovanje aplikacije potrebno hraniti. Ugotovili smo, da moramo hraniti podatke o

uporabnikih aplikacije ter o vsebini. Za uporabnike smo se odločili, da shranjujemo podatke

o njihovih uporabniških imenih, geslih, osebnih podatkih (imena, priimki, datumi rojstva),

njihovimi točkami, ki jih pridobijo z reševanjem kvizov, ter igro Spomin. Med te podatke

smo vključili tudi podatke o nastavitvah v aplikaciji. Za vsebino aplikacije moramo hraniti

podatke o črkah in besedah. Vsaka izmed njih mora vsebovati vrednost, pot do slikovne ali

zvočne datoteke, ki črko oz. besedo predstavljata.

Podatki o črkah in besedah so povezani, saj lahko črka deluje samostojno ali predstavlja

prvo črko besede. Podatki o črkah in besedah so statični, kar pomeni, da se redko

spreminjajo, medtem ko se podatki o uporabnikih spreminjajo pogosto. Tudi sam

uporabnik mora imeti možnost, da posodobi svoje osebne podatke. Poleg urejanja

podatkov smo morali načrtovati, da uporabnik spreminja osebne nastavitve in redno

preverja napredek v številu točk.

18

Konceptualno načrtovanje

Konceptualno načrtovanje je faza, pri kateri se izdela konceptualni načrt, ki zajema tudi

omejitve, ki se nanašajo na podatke. Za predstavitev konceptualnega načrta smo za naš

projekt uporabili entitetno-relacijski diagram.

Slika 10: Entitetno-relacijski model

Na Sliki 10 je prikazan E-R model, ki smo ga ustvarili iz zahtev, pridobljenih z analizo.

Aplikacija za svoje osnovno delovanje pravzaprav ne potrebuje veliko podatkov. V primeru

nadaljevanja oz. nadgradnje projekta bi bilo potrebno bolje zastaviti podatkovni model. Na

primer razširjeno statistiko, ki bi vključevala točke ter nastavitve, bi lahko ločili v lastni

entiteti.

3.6 Načrtovanje uporabniškega vmesnika

Uporabniški vmesnik

Uporabniški vmesnik predstavlja vmesnik med uporabnikom in napravo oz. programsko

opremo. Na kratko: Uporabniški vmesnik je vse, kar uporabnik vidi in lahko uporabi pri delu

z aplikacijo. Grafični uporabniški vmesniki na zaslonu naprave prikazujejo elemente, kot so

ikone, okna, gumbe in druge pripomočke.

Smernice za razvoj uporabniških vmesnikov za Android

Android ekipa za uporabniško izkušnjo skrbi in razvija smernice za razvoj uporabniških

vmesnikov za sistem Android. Te smernice so namenjene oblikovalcem in vsebujejo

19

enostavne napotke, kako lahko oblikovalci čim bolj izboljšajo uporabniško izkušnjo za

uporabnike aplikacij.

Nekaj primerov:

Razvijalci pustijo uporabnikom, da premikajo in manipulirajo z objekti zaradi

lastnega zadovoljstva.

Razvijalci omogočijo prilagoditev uporabniškega vmesnika v smislu zaporedja

elementov, barv.

Uporaba slik namesto besed.

Skrivanje elementov vmesnika, ki jih uporabnik ne potrebuje pri določeni nalogi.

Hiter dostop do funkcionalnosti, ki so bolj pomembne v aplikaciji.

Uporabnik vedno ve, kje v aplikaciji se nahaja (Navigacija).

Uporabniška izkušnja za otroke

Uporabniki aplikacij za učenje abecede so v veliki meri otroci. Ustvarjanje lepe grafike in

animacij je izredno pomembno. Prav tako je uporaba navigacije, ki je dovolj preprosta, da

jo otrok uporablja sam. Pomembno je, da uporabniškega vmesnika ne nasičimo z elementi,

ki direktno ne vplivajo na potek izobraževalnih aktivnosti, saj otroci običajno klikajo povsod

po zaslonu. Pametno je, da se pri tovrstnih aplikacijah razvije elemente, ki so namenjeni

izključno odraslim uporabnikom z uporabo specialnih gest, kot so dvoklik, ščipanje, ki jih

otroci še ne razumejo.

Izdelava prototipa uporabniškega vmesnika

S smernicami za razvoj GUI smo tako izdelali prototip uporabniškega vmesnika. Za

navigacijo v aplikaciji smo se odločili uporabiti Navigation Drawer (Navigacijski predal). Gre

za navigacijski element v obliki menija, ki je dostopen uporabnikom kadarkoli, pri delu z

aplikacijo pa je skrit. Primer takega menija v Android aplikaciji vidimo na Sliki 11.

20

Slika 11: Navigation Drawer

Uporabili smo hierarhično navigacijsko strukturo, kar pomeni, da so strani organizirane kot

drevesne strukture. Do vsake strani lahko dostopamo preko menija, vendar imajo nekatere

strani med sabo povezave v obliki starš – otrok. Na primer z domače strani (Slika 12) lahko

s klikom na gumb »Reši kviz« dostopamo do strani za izbiro različice kviza. Obstajajo še

strukture vsak-z-vsakim (peer-to-peer), kjer je vsaka stran povezana z vsako v obliki na

primer zavihkov ali kombinacije obeh struktur.

21

Slika 12: Prototip domače strani aplikacije

Nato smo oblikovali še izgled preostalih strani aplikacije. Uporabljali smo elemente

grafičnih vmesnikov, kot so gumbi, tekst, vnosna polja, slike, ikone itd. Na Sliki 13 je viden

prototip vmesnika za kviz, in sicer različico, kjer uporabnik ugotavlja prvo črko besede. Na

vrhu imamo podatke o statusu trenutnega reševanja kviza s številko vprašanja in številom

doseženih točk. Nato sledi sličica, ki predstavlja besedo, gumb za predvajanje zvočne

datoteke in gumbe za podajanje odgovora. Že v fazi načrtovanja vmesnika smo obarvali

gumbe s pravilnim in nepravilnimi odgovori, kar je pomemben del funkcionalnosti, saj mora

uporabnik hitro identificirati pravilnost podanega odgovora. Ob strani vidimo možnosti za

navigacijo.

22

Slika 13: Prototip vmesnika za kviz

Pri implementaciji uporabniškega vmesnika se nismo striktno držali prototipa, saj smo med

izdelavo dobivali nove ideje za obliko, barve, postavitve elementov itd.

Za izdelavo prototipa uporabniškega vmesnika smo uporabili spletno aplikacijo Moqups, ki

omogoča oblikovanje, načrtovanje, izdelavo prototipov ter njihovo testiranje. Med

uporabnike tega orodja spadajo tudi večja podjetja kot so Mozilla, Intel, Microsoft, Amazon.

Brezplačna različica je primerna za zelo majhne projekte, saj se kmalu pokaže potreba po

nakupu razširjene različice. Prototip uporabniškega vmesnika bi lahko izdelali tudi ročno na

papir, vendar uporaba tovrstnega orodja zmanjša čas načrtovanja, omogoča možnost

sprememb, testiranja ter ponuja boljšo vizualizacijo posameznih vmesnikov.

23

4 IMPLEMENTACIJA

Razvoj mobilnih aplikacij hitro postaja prihodnost razvoja programskih rešitev, saj mobilne

naprave postajajo vse večji del našega življenja. Dandanes obstaja že nešteto ogrodij,

orodij, platform za razvoj mobilnih aplikacij. Razvoj tovrstnih rešitev omogoča unikatno

priložnost, da tudi en sam programer razvije dejansko uporabno aplikacijo v zelo hitrem

času. Na razvoj mobilnih aplikacij ljudje pogosto gledajo kot na razvoj programske opreme

za mobilne telefone, a temu ni tako. Mobilne aplikacije lahko delujejo tudi na drugih

prenosnih napravah, ki uporabljajo operacijski sistem, kot so na primer tablice, ure,

navigacijske naprave. Razvijalci so postavljeni pred problem velike količine naprav z

različnimi specifikacijami, velikostmi ter operacijskimi sistemi. Največji problem

predstavljajo različni operacijski sistemi.

Mobilni operacijski sistemi so posebej oblikovani za uporabo na mobilnih napravah. Ti

sistemi so drugačni od klasičnih operacijskih sistemov za osebne računalnike zaradi

omejenih virov, ki jih imajo mobilne naprave, kot so velikost zaslona, pomnilnik,

procesorska moč in omejena količina energije. Omejena je tudi interakcija z uporabnikom,

saj večino današnjih mobilnih naprav uporablja zaslone na dotik za razliko od osebnih

računalnikov, ki uporabljajo miško in tipkovnico.

Danes na trgu mobilnih naprav prevladujeta dva operacijska sistema, in sicer Android in

iOS. Android vsebujejo naprave proizvajalcev kot so Samsung, HTC, Huawei. iOS deluje na

napravah proizvajalca Apple.

Razvijali smo aplikacijo za Android, ki je odprtokodni operacijski sistem za mobilne naprave.

Sistem baziran na Linux-ovem jedru razvija podjetje Google, zasnovan je predvsem za

uporabo na napravah z zaslonom na dotik, vendar Google razširja sistem tudi za uporabo

na televizijah (Android TV), v avtomobilih (Android Auto) ter pametnih urah (Android

Wear). Različice sistema se uporabljajo tudi za igralne konzole, digitalne kamere,

računalnike itd. Android je najbolj prodajan operacijski sistem na tabličnih računalnikih od

leta 2013, prav tako je nameščen na veliki večini pametnih telefonov. [18] Ravno zaradi

tega dejstva smo se odločili za razvoj aplikacije prav za ta sistem.

24

Android namenske aplikacije, ki razširjajo osnovne funkcionalnosti sistema, so najpogosteje

razvite v programskem jeziku Java z uporabo Android SDK. [18] SDK ali komplet

programskih orodij za razvijanje programske opreme je zbirka orodij, ki programerjem

olajša pisanje aplikacij za posamezno napravo, operacijski sistem ali uporabniški vmesnik,

v tem primeru za sistem Android. [19] Razvijalci lahko svoje aplikacije nato objavijo v

»Google Play« digitalni trgovini, kjer lahko uporabniki izbirajo med več kot 2,7 milijona

plačljivih ali brezplačnih aplikacij. [20] Aplikacijo se namesti na napravo z uporabo

namestitvenega paketa – APK (Android Application Package).

Aplikacijo smo implementirali v Android Studiu, ki je uradno integrirano razvojno okolje

(IDE) za razvoj Android aplikacij, ki je bazirajo na IntelliJ IDEA. Poleg funkcionalnosti, ki jih

ponuja IntelliJ IDEA, ponuja še mnogo funkcionalnosti, ki omogočajo enostaven in hiter

razvoj aplikacij, kot so na primer emulator za vse Android naprave, integracija z GitHubom,

orodja za testiranje, podporo za uporabo Googlovih oblačnih storitev ter še mnogo drugih.

[21]

4.1 Podatkovna baza

Podatkovna bazo smo implementirali s pomočjo SQLite programsko knjižnico, ki zagotavlja

SUPB za relacijske podatkovne baze. Običajno tovrstni sistemi delujejo na principu

odjemalec-strežnik vendar to za SQLite ne drži. Za razliko od drugih sistemov SQLite bere

in zapisuje podatke v datoteke na disku naprave, kjer je aplikacija nameščena. Tako je

celotna SQL podatkovna baza, vključno z vsemi tabelami, indeksi, pogledi,

prožilci,vsebovana v eni datoteki, ki je neodvisna od operacijskega sistema. [22]

Vsi API-ji, ki smo jih potrebovali, da smo začeli z implementacijo podatkovne baze, se

nahajajo v programskem paketu android.database.sqlite.

Definiranje sheme podatkovne baze

Eden izmed glavnih principov SQL podatkovnih baz je shema. Shema je deklaracija, kako je

podatkovna baza urejena in je razvidna iz SQL ukazov, s katerimi jo ustvarimo. [23] Ustvarili

smo tabele, ki bodo shranjevale podatke, potrbne za delovanje aplikacije. Android vsebuje

funkcionalnost za upravljanje podatkovnih baz SQLite v razredu SQLiteOpenHelper. Ta

25

razred olajša ustvarjanje in posodabljanje podatkovne baze. Pri implementaciji podatkovne

baze smo razvili razred, ki deduje od tega razreda.

Database helper – pomožni razred za upravljane s podatkovno bazo

Razred mora vsebovati najmanj naslednje 3 metode:

konstruktor, ki kot parameter prejme kontekst (Aktivnost), ime podatkovne baze in

število, ki predstavlja verzijo sheme podatkovne baze;

onCreate(), ki kot parameter prejme SQLite podatkovno bazo in se proži, ko

aplikacija potrebuje podatkovno bazo in ugotovi, da baza ne obstaja;v tej metodi

smo ustvarili in napolnili tabele, ki smo jih potrebovali; na Sliki 14 vidimo izsek iz

kode, ki prikazuje ustvarjanje tabele »Uporabnik« za našo aplikacijo;

Slika 14: Primer ustvarjanja tabele

onUpgrade() sprejme kot parametere podatkovno bazo, staro verzijo sheme ter

novo verzijo sheme; proži se, ko verziji nista enaki.

Razred poleg teh osnovnih metod vsebuje tudi uporabniško definirane metode, ki se

uporabljajo za izvajanje operacij nad podatki v bazi. V primeru naše aplikacije smo

implementirali samo metode, ki smo jih za izvajanje trenutnih funkcionalnosti aplikacije

potrebovali. Uporabljali smo jih za izvedbo osnovnih oz. CRUD(create, read, update, delete)

operacij, ki ustvarjajo, berejo, posodabljajo in brišejo podatke. Primeri takih metod so na

primer dodajanje novega uporabnika, branje podatkov o uporabniku, posodabljanje

nastavitev, posodabljanje števila točk. Primerek takega razreda smo ustvarili in uporabljali

v željeni aktivnosti Android aplikacije.

26

4.2Multimedijske vsebine v aplikaciji

Vse zvočne vsebine v aplikaciji smo posneli kar z uporabo aplikacije Snemalnik na naši

mobilni napravi. V en posnetek smo združili izgovorjavo vseh črk abecede, v drugega pa

vseh besed, ki smo jih v aplikaciji potrebovali. Nato smo izgovorjavo vsake črke in

besede razdelili v več različnih datotek, jih ustrezno poimenovali in obdelali s

programom Reaper. Na Sliki 15 vidimo primer izrezanega zvočnega posnetka za črko C.

Slika 15: Reaper – zvočni posnetek

Slikovne datoteke za črke smo izdelali s programom Inkscape, za besede smo optično

prebrali sličice iz stavnice. Stavnica je otroški didaktični pripomoček za prvi razred

osnovnih šol. Otroci s pomočjo teh sličic in pripadajočih črk sestavljajo besede. Tudi te

datoteke smo ustrezno poimenovali.

Zvočne datoteke in slike smo ustrezno poimenovane nato dodali v Android projekt v

mapo res/raw na Sliki 16.

27

Slika 16: Projektna struktura – mape za vire

4.3 Uporabniški vmesnik

XML ali razširljivi označevalni jezik (eXtensible Markup Language) je preprost računalniški

jezik, ki je podoben HTML-ju, ki omogoča format za opisovanje strukturiranih podatkov.

Glavna razlika med HTML in XML je da si uporabniki lahko določijo svoja imena značk, kar

je razvidno iz slike 17 na kateri je primer sintakse XML. Uporablja se tudi kot format za

prenos podatkov in komunikacijo med dvema napravama ali aplikacijama.

Slika 17: Primer uporabniško definiranih značk

Uporabniški vmesnik v Android aplikacijah je definiran v obliki XML datotek za vsak zaslon

posebej. Postavitev elementov lahko definiramo direktno v teh datotekah v obliki urejanja

XML dokumentov in ob uporabi vgrajenega oblikovalca vmesnikov ali pa jih definiramo

tekom delovanja aplikacije z uporabo programske kode. Prednost definiranja vmesnika v

XML je, da ločimo izgled, elemente aplikacije in kodo, ki kontrolira njeno delovanje. V kodi

se na objekte vmesnika sklicujemo z uporabo enoličnih identifikatorjev za vsak objekt.

28

Android Studio Layout Editor

Android studio vsebuje orodje Layout Editor, s katerim lahko hitro razvijamo uporabniške

vmesnike. Namesto da sami pišemo XML definicije za posamezne elemente, jih lahko kar

na način Drag&Drop (povleci in spusti) prenesemo na delovno površino, ki predstavlja naš

uporabniški vmesnik. Orodje vsebuje paleto možnih elementov uporabniškega vmesnika,

ki jih po želji dodajamo, okno za lastnosti teh elementov, predogled vmesnika oz. delovno

površino ter okno s strukturo elementov za posamezni pogled. Med razvojem lahko prosto

preklapljamo med standardnim načinom razvoja in razvojem z Layout Editorjem. Pri razvoju

vmesnika za aplikacijo smo uporabljali oba načina oblikovanja vmesnika. Elemente smo

najprej iz palete dodali na delovno površino v Layout Editor-ju, nato smo njihove lastnosti

urejali preko XML atributov ter seznama lastnosti.

Slika 18: Layout Editor

Na Sliki 18 vidimo uporabniški vmesnik Layout Editorja ter del uporabniškega vmesnika iz

naše aplikacije, in sicer gre za pregled črk.

29

Deli uporabniškega vmesnika so definirani v večih različnih delih oz. pogledih, imenovanih

fragmenti, ki so med seboj neodvisni. Uporabnik pri navigaciji menjuje med različnimi

fragmenti vmesnika, ki mu omogočajo izvajanje željenih nalog.

Poleg osnovnih pogledov smo z uporabo fragmentov implementirali tudi delovanje

dialogov v aplikaciji. Dialoge smo nato prikazovali z uporabo razreda FragmentTransaction.

Na Sliki 19 je izsek kode, v katerem je prikazano ustvarjanje ter prikaz fragmenta

»NastavitveCrke«, ki predstavlja dialog za nastavitev črk. Tovrsten dialog smo uporabili, če

uporabnik ni imel izbranih dovolj črk za reševanje kviza ali igranje Spomina.

Slika 19: Preklop fragmenta

Uporabniški vmesnik – učenje črk

Uporabnik pri učenju črk klikne na gumb z željeno črko. Ob kliku se mu predvaja glas te

črke. Prav tako se zamenjata sliki, ki predstavljata znak črke ter besedo, ki črko predstavlja.

Uporabnik si nato lahko izbere novo črko ali si glas črke in zvočno datoteko za izgovorjavo

besede predvaja ponovno.

Uporabniški vmesnik za učenje ter pregled črk vsebuje naslednje elemente vidne na Sliki

20.

Slika 20: Component tree

30

Vsi elementi se nahajajo znotraj osnovnega LinearLayout elementa, nevidnega elementa,

ki skrbi samo za ustrezno postavitev vsebovanih elementov. Najprej smo dodali nov

horizontalni LinearLayout, v katerega smo postavili 2 ImageView-a, ki sta elementa za

prikaz slik. Pod njima smo dodali ImageButton – gumb. Za njegovo predstavitev smo

uporabili ikono za zvok iz Googlovih ikon za Material Design. Pod njim smo dodali gumbe

za vsako črko posebej. Te smo združili v GridLayout zaradi enostavnejšega oblikovanja

postavitve. ImageView-a in ImageButton uporabljata slike, ki se nahajajo v mapi za vire

aplikacije – Slika 21. Ikone smo shranili v mapo »drawable«, saj predstavljajo vektorske

slike, ki jih je možno modificirati. Vse ostale slike in zvočne datoteke smo shranili v mapo

»raw«. Vsakemu viru Android studio določi ID.

Slika 21: Viri

Elementom vmesnika smo nato dodelili vir, ki jim pripada z vrstico obarvane XML kode s

Slike 22. Ta atribut elementa ImageView pove elementu, kateri vir naj prikazuje. Ta atribut

bi lahko nastavili tudi z uporabo grafičnega vmesnika v Layout Editorju – Slika 23.

Slika 22: XML - Kazalec na vir

31

Slika 23: Layout editor – kazalec na vir

Vsak element grafičnega vmesnika dobi svoj enolični identifikator. Tako se lahko na vsak

element sklicujemo v programski kodi ter ga po potrebi spreminjamo tekom delovanja

aplikacije ter obravnavamo dogodke interakcije uporabnika s posameznim elementom.

ImageView-u, ki prikazuje besedo za asociacijo na črko, smo tako dodelili id »iwBeseda«

kar je vidno s Slike 22.

Definicija delovanja posameznih elementov je, kot smo že prej omenili, ločeno od njihovega

izgleda v datoteki, ki je povezana s tem pogledom. Te datoteke so napisane v programskem

jeziku Java.

Java

Java je objektno orientiran programski jezik. Ustvarjen je bil z namenom, da bi imel čim

manj odvisnosti od platforme, na kateri se izvaja. Prevedeno Java programsko kodo lahko

tako zaženemo na vseh platformah, ki podpirajo Javo ne glede na arhitekturo sistemov.

Java je tudi eden izmed najpopularnejših programskih jezikov.

Programiranje dogodkov

Vsakemu elementu vmesnika lahko določimo akcije, ki jih izvedejo med uporabniško

interakcijo z njimi. V našem primeru smo dodali ter uporabili metodo, ki se odzove na

uporabnikov klik na gumb.

Vsem gumbom smo določili isto metodo, ki najprej ugotovi, kateri gumb je bil pritisnjen. Če

je gumb s seznama črk, potem se zamenjajo kazalci na vire, ki pripadajo izbrani črki. To so

32

kazalci na slike za znak črke ter sliko, ki predstavlja besede ter zvočne datoteke. Prav tako

se izbrani gumb obarva z drugačno barvo kot ostali. Uporabnik to takoj opazi kot

spremembo vsebine elementov ImageView. Vkolikor je izbrani gumb za predvajanje

zvočnih datotek, se le-te predvajajo ponovno.

Za menjavo vira elementa najprej pridobimo njegov ID z uporabo metode, ki kot parameter

prejme ime vira ter njegovo lokacijo v projektni strukturi, nato priredimo željenemu

elementu, kot je vidno iz izseka kode na Sliki 24.

Slika 24: Menjava vira

4.4 Glavne funkcionalnosti

Kviz: Izberi pravilno črko

Slika 25: Uporabniški vmesnik funkcionalnosti kviz

33

Na Sliki 25 je prikazan uporabniški vmesnik funkcionalnosti kviz. Na vrhu zaslona se nahaja

orodna vrstica oz. toolbar, ki vsebuje ime aktivnosti, izvajane v danem trenutku, in gumb

za odpiranje predala z navigacijo. Pod njim se nahaja element, ki grafično prikazuje, na

katerem vprašanju pri kvizu se nahajamo. Na sredini zaslona je gumb za predvajanje

zvočnega posnetka, pod njim gumbi za podajanje odgovora.

Skrajno levo vidimo primer, ko je uporabnik odgovoril napačno, na sredini pa primer, ko je

podal pravilni odgovor. Uporabnik mora hitro identificirati pravilnost svojega odgovora,

zato smo uporabili barve ter različna zvoka ob pravilnem in nepravilnem odgovoru. Skrajno

levo (na Sliki 25) je prikazan dialog, ki se uporabniku prikaže ob končanem kvizu.

Za reševanje kviza mora imeti uporabnik izbrane najmanj 3 črke. Vkolikor temu pogoju ni

zadoščeno, se mu pokaže dialog, prikazan na Sliki 26, skrajno levo. Uporabnik mora za

nadaljevanje izbrati najmanj 3 črke ter potrditi izbiro.

Slika 26: Kviz – Izberi prvo črko besede

34

Kviz – Izberi prvo črko besede

Na Sliki 26 (desno) vidimo, da se uporabniški vmesnik za drugo različico kviza ne razlikuje

veliko od prve. Dodana je le slika, ki se nanaša na besedo. Tudi v tej različici se uporabniku

predvaja zvočna datoteka s pravilno izgovorjavo besede.

Igra Spomin

Kartice pri igri spomin so implementirane kot gumbi. Ko uporabnik klikne kartico, se le-ta

»obrne«. Pravzaprav se samo zamenja ozadje gumba. Logika igre je implementirana enako

kot pri klasični igri. Uporabnik obrača kartice in išče pare. Vkolikor 2 izbiri nista enaki, se

kartice ponovno obrnejo, v nasprotnem primeru se odstranijo z igralne površine in

uporabnik nadaljuje z igro. Igra se konča, ko najde vse pare. Za igro Spomin mora imeti

uporabnik izbranih najmanj 8 črk. Vmesnik igre lahko vidimo na Sliki 27.

Slika 27: Igra Spomin

Edina razlika med klasično igro in našo implementacijo je ta, da se uporabniku pri

odkrivanju kartice predvaja glas odkrite črke. Tako uporabnik nezavedno ustvarja povezavo

med znakom črke ter njej pripadajočim glasom. Igra je narejena brez časovne omejitve, da

ni pritiska na uporabnika. Nevarnost uporabe te funkcionalnosti je, da lahko uporabniki

pridejo do rešitve tudi z brezglavim klikanjem po zaslonu, zato bi bilo potrebno dodati še

35

eno preverjanje, na primer, da otrok potrdi ujemanje dveh črk. Tu se ponudi še ena

možnost, da otrok ponovno sliši ter vidi oba znaka za črki.

Razred SpominButton

Kot že rečeno, smo za implementacijo kartic igre Spomin razširili element oz. razred gumb.

Ta razširjeni razred vsebuje podatke o poziciji kartice na igralni površini v obliki koordinat,

kazalce na sliki v virih, ki predstavljata obe strani kartice ter kazalec na zvočno datoteko, ki

se predvaja, ko uporabnik med igro obrne določeno kartico. Prav tako smo v razredu dodali

metodo, ki »obrne sličico« oziroma spremeni sliko ozadja našega gumba/kartice.

Implementacija igre spomin

Fragment igre Spomin pripravi igralno površino za začetek igre. Najprej aplikacija iz

podatkovne baze pridobi uporabniške nastavitve črk. Nato izmed njih naključno izbere 8

črk. Na podlagi teh črk nato ustvari 16 igralnih ploščic, ki jih premeša in razporedi na igralno

površino (element GridView 4x4). Logika igre je implementirana v metodi, ki se proži, ko

uporabnik klikne na gumb oz. kartico. Najprej počaka, da sta obrnjeni dve kartici, nato

preverja, ali imata gumba za ozadje nastavljen isti vir – kar pomeni, da sta enaki. Na Sliki 28

je predstavljen izsek kode, ki predstavlja, kaj se zgodi, če sta sličici enaki. Predvaja se zvok,

ki uporabniku pove, da je našel par, nato obema gumboma onemogočimo možnost, da sta

ponovno aktivirana. Kartici »odstranimo« z igralne površine tako, da jima določimo oz.

nastavimo parameter vidljivosti na »INVISIBLE«.

Slika 28: Spomin – logika

36

Na koncu še povečamo število točk pri igri. Ko je doseženo maksimalno število točk, se igra

zaključi.

Predvajanje zvočnih vsebin

Predvajanje zvoka smo implementirali z uporabo MediaPlayer razreda, ki ga implementira

android.media.MediaPlayer. Ta razred se uporablja za upravljanje z avdio/video vsebinami.

Profil in nastavitve

Na Sliki 29 lahko vidimo uporabniški vmesnik za primere uporabe »poglej profil« ter

nastavitve. Uporabnik ima na profilu izpisane svoje osebne podatke, trenutne nastavitve za

igre ter prikaz skupnega števila točk, ki jih je ob dosedanji uporabi pridobil.

Slika 29: Profil, Nastavitve, dialog za datum

V nastavitvah smo za izbiro črk uporabili kar checkbox-e. Zdelo se nam je, da to predstavlja

najlažji način izbire. Da uporabniku ni treba označiti vseh polj posebej, je na voljo gumb, ki

označi oz. pobriše vse izbire naenkrat. Za urejanje datuma pri nastavitvah osebnih podatkov

smo uporabili DatePickerDialog iz razreda AlertDialog v Androidu. Primer dialoga v uporabi

lahko vidimo na Sliki 29.

37

4.5 Testiranje

Aplikacijo se testira ob podpori orodij, ki jih ponuja Android Studio. Testne zmogljivosti se

lahko razširi z integracijo testnih ogrodij kot so Mockito za testiranje API-jev v testih enot

in Espresso ali UI Automator za testiranje uporabniškega vmesnika. [24] Testna koda se

implementira ločeno od programske kode aplikacije.

Testiranje enot

Testiranje enot se uporablja za testiranje najmanjših individualnih enot programske kode,

kot so programski vmesniki, metode. Za vsako enoto ustvarimo testne primere, ki so med

seboj neodvisni in preverjajo, da del programske kode deluje kot predvideno. Testi enot so

po navadi izvedeni avtomatsko, kar nam prihrani veliko časa. Android Studio ponuja hitro

implementacijo JUnit testov, ki je različica xUnit arhitekture za testiranje enot. [25]

Instrumentirani testi

So testi, ki se izvajajo na fizični napravi ali emulatorjev ob uporabi Instrumentation API-ja.

Take teste se lahko uporablja za testiranje integriranosti ter uporabniškega vmesnika z

avtomatizacijo uporabniškega vnosa.

Testiranje uporabniškega vmesnika

Avtomatizirani testi uporabniškega vmesnika lahko vsebujejo testiranje znotraj aplikacije,

ki preverja, ali aplikacija nudi pravilni vmesnik pri uporabnikovi interakciji z njim ali

testiranje, ki obsega več aplikacij. Ta vrsta ponuja testiranje pravilne interakcije med

različnimi uporabniškimi ali sistemskimi aplikacijami in uporabnikom. Ogrodje Espresso

omogoča simuliranje testnih uporabniških interakcij znotraj aplikacije, za testiranje med

več aplikacijami se lahko uporablja UI Automator.

38

5 SKLEP

5.1 Možnosti za nadgradnjo in nadaljevanje projekta

Tako kot pri vsakem produktu, ne samo pri programski opremi, je vedno na voljo prostor

za izboljšave ali popravke. S tem bodisi povečamo vrednost produkta ali pa samo izboljšamo

uporabniško izkušnjo. Predstavili smo samo nekaj smeri, v katere bi se projekt lahko še

naprej razvijal.

Nadgradnja uporabniškega vmesnika

Uporabniški vmesnik aplikacije bi bil lahko bolj privlačen predvsem zato, ker je večina

uporabnikov otrok. Uporaba barvnih motivov, vzorcev ter animacij z možnostjo

personalizacije vmesnika bi zelo povečala zanimanje za vsebino aplikacije.

Dodatne funkcionalnosti

To področje je za nadgradnje najbolj obširno. Med pomembnejše spadajo vključitev učenja

malih tiskanih črk, pisanih črk in učenje številk.

Nov uporabnik/uporabniško vlogo – Pedagoški delavec, ki bi lahko uporabnike

povezoval v skupine in spremljal njihov napredek posamezno ali na nivoju skupine.

Razširjena statistika – Aplikacija bi lahko bolj podrobno beležila statistiko kvizov,

iger tako, da bi uporabniki lažje identificirali težave, ki se jim pojavljajo.

Nove različice kvizov – Aplikacija bi lahko z novimi različicami kvizov omogočila

prepoznavanje govora. Uporabnik bi lahko na primer v novi različici izgovarjal

glasove črk, ki mu jih ponudi aplikacija.

Več metod učenja – Aplikacija bi lahko ponujala sestavljanje sestavljank,

predvajanje pesmic/videoposnetkov za učenje, igranje drugih iger itd.

Forum za starše oz. učitelje – V obliki foruma bi lahko učitelji oz. starši delili mnenja

in koristne napotke ob učenju.

Vadnica za pisanje – Implementacija metode, ki bi otroke naučila pravilnih potez za

pisanje črk.

39

Večjezična podpora – Z nadgradnjo aplikacije za uporabo z več jeziki bi jo lahko

uporabili kot pripomoček za učenje tujega jezika ali samo povečali krog možnih

uporabnikov.

Povezava s spletom

Dandanes že vsak izmed nas dostopa do interneta preko več različnih naprav. Zanimivo bi

bilo prenesti podatkovno bazo aplikacije na oddaljeni strežnik, da bi lahko uporabniki do

svojega računa dostopali kjerkoli iz katerekoli naprave.

Uporaba spletnih storitev – na primer dodajanje možnosti prijave v aplikacijo z

Google ali Facebook računom.

Uvedba tekmovalnih lestvic.

Prenos dodatne vsebine – uporabniki bi lahko prenašali nove vsebine v obliki

drugačnih slik, zvokov.

40

5.2 Zaključek

Razvoj mobilnih aplikacij že sam po sebi predstavlja velik izziv, saj je potrebno znanje več

tehnologij, pri razvoju aplikacij za izobraževanje moramo upoštevati še njihove posebnosti.

Ob razvoju moramo upoštevati tudi veliko število možnih platform, različnih naprav ter

dobro poznati zahteve uporabnikov, za katere aplikacije razvijamo.

Tekom izdelave diplomskega dela smo ugotovili, da je področje razvoja aplikacij za mobilne

naprave področje nenehnih spremembe in iz ugotovitev lahko sklepamo, da se bo področje

še bolj širilo. Prav tako se bo v prihodnosti še bolj razširil razvoj programskih rešitev za

potrebe izobraževanja, saj predstavljajo odlične učne pripomočke. Kljub nevarnostim ob

uporabni tehnologije bi bilo nespametno spregledati številne prednosti, ki jih učenje ob

uporabi mobilnih rešitev ponuja. Težje bo ob količini tovrstnih rešitev identificirati

kakovostne, ki uporabnika izobražujejo in ne le kratkočasijo.

Pri delu smo se naučili veliko tehnik, ki nam bodo brez dvoma koristile na naši poklicni poti.

Diplomsko delo je v nas vzpodbudilo še dodatno zanimanje za to področje.

41

ZAHVALA

Rad bi se zahvalil družini ter punci Naji za podporo tekom študija, lektorici in mentorju za

pomoč pri izdelavi diplomskega dela.

42

BIBLIOGRAFIJA

[1] „Wikipedija,“ [Elektronski]. Available: https://sl.wikipedia.org/wiki/Pismenost.

[Poskus dostopa 11 3 2017].

[2] M. H, 3 2017. [Elektronski]. Available:

https://www.maligalago.com/index.php/note/display/152/.

[3] B. J. Katarina Kesič, 3 2017. [Elektronski]. Available: http://www.viva.si/Psihologija-

in-odnosi/422/Zgodnje-opismenjevanje-otrok.

[4] 3 2017. [Elektronski]. Available: http://otroski-kino.si/zabavno-ucenje-abecede-za-

otroke/.

[5] T. W. E. T. Carina Paine Schofield, „Going mobile in executive education,“ 2011.

[6] A. Renko, Interviewee, Mislimo, da morajo biti stvari za otroke kričečih barv in

pretirano ljubke. Pa ni nujno tako.. [Intervju]. 31 1 2015.

[7] „Safe.si,“ [Elektronski]. Available: https://safe.si/novice/ugotovite-ali-

izobrazevalne-aplikacije-vasemu-otroku-resnicno-koristijo-pri-ucenju. [Poskus

dostopa 5 9 2017].

[8] Y. Alghamdi, Negative effects of technology on children of today, 2017.

[9] „Duolingo,“ [Elektronski]. Available: https://www.duolingo.com/. [Poskus dostopa

17 9 2017].

[10] „Google Play - Ježkove dogodivščine za otroke,“ [Elektronski]. Available:

https://play.google.com/store/apps/details?id=com.hedgehogacademy.hedgehogs

adventureslite&hl=sl. [Poskus dostopa 22 9 2017].

43

[11] „Morigenos,“ [Elektronski]. Available: http://www.morigenos.org/brezplacna-

dvojezicna-mobilna-aplikacija-za-otroke-varuh-morij-spodbujamo-okoljsko-vzgojo-

zgodnje-ucenje-jezikov/. [Poskus dostopa 22 9 2017].

[12] „Google Play - Abecedko,“ [Elektronski]. Available:

https://play.google.com/store/apps/details?id=com.goranhorvat.abecedko.

[Poskus dostopa 4 9 2017].

[13] „Google Play - Alphabet,“ [Elektronski]. Available:

https://play.google.com/store/apps/details?id=com.oki.alphabetnew. [Poskus

dostopa 6 9 2017].

[14] „Google Play - Endless Alphabet,“ [Elektronski]. Available:

https://play.google.com/store/apps/details?id=com.originatorkids.EndlessAlphabe

t. [Poskus dostopa 6 9 2017].

[15] „GenMyModel,“ [Elektronski]. Available: https://www.genmymodel.com/. [Poskus

dostopa 2 9 2017].

[16] „Use Case Diagrams,“ [Elektronski]. Available: http://www.uml-diagrams.org/use-

case-diagrams.html. [Poskus dostopa 3 9 2017].

[17] „Podatkovni modeli,“ [Elektronski]. Available:

http://drenovec.tsckr.si/model/uvod.htm. [Poskus dostopa 3 9 2017].

[18] „Android(operating system),“ [Elektronski]. Available:

https://en.wikipedia.org/wiki/Android_(operating_system). [Poskus dostopa 31 8

2017].

[19] D. M. Pahor David, Leksikon računalništva in informatike, Ljubljana: Pasadena,

2002.

[20] „Google Play,“ [Elektronski]. Available: https://en.wikipedia.org/wiki/Google_Play.

[Poskus dostopa 31 8 2017].

44

[21] „Android,“ [Elektronski]. Available:

https://developer.android.com/studio/intro/index.html. [Poskus dostopa 2 9

2017].

[22] „SQLite,“ [Elektronski]. Available: https://www.sqlite.org/about.html. [Poskus

dostopa 2 9 2017].

[23] „Saving data in SQL Databases,“ [Elektronski]. Available:

https://developer.android.com/training/basics/data-

storage/databases.html#DefineContract. [Poskus dostopa 5 9 2017].

[24] „Test Your App,“ [Elektronski]. Available:

https://developer.android.com/studio/test/index.html. [Poskus dostopa 6 9 2017].

[25] „JUnit,“ [Elektronski]. Available: http://junit.org/junit4/. [Poskus dostopa 6 9 2017].

[26] „Introduction to activities,“ [Elektronski]. Available:

https://developer.android.com/guide/components/activities/intro-activities.html.

[Poskus dostopa 3 9 2017].

[27] „The Activity Lifecycle,“ [Elektronski]. Available:

https://developer.android.com/guide/components/activities/activity-

lifecycle.html#asem. [Poskus dostopa 3 9 2017].