UNIVERZA V MARIBORU

FAKULTETA ZA ELEKTROTEHNIKO,

RAČUNALNIŠTVO IN INFORMATIKO

Matic Verčko

APLIKACIJA ZA UČENJE OSNOV PROGRAMIRANJA

Diplomsko delo

Maribor, avgust 2018

MOBILNA APLIKACIJA ZA UČENJE OSNOV PROGRAMIRANJA

Diplomsko delo

Študent: Matic Verčko

Študijski program: univerzitetni študijski program

Informatika in tehnologije komuniciranja

Smer: /

Mentor: doc. dr. Domen Verber

Somentor: /

Lektorica: Ksenija Pečnik, prof. slov. jezika

i

ZAHVALA

Zahvaljujem se mentorju doc. dr. Domnu Verberju za pomoč med pisanjem diplomskega

dela. Zahvalil bi se tudi družini in punci Katji za podporo.

ii

Mobilna aplikacija za učenje osnov programiranja

Ključne besede: Android, Android mobilna aplikacija, učenje osnov programiranja,

izobraževalna tehnologija

UDK: 004.4'23:004.42(043.2)

Povzetek

Med izdelavo diplomskega dela smo se podrobneje seznanili z izobraževalno tehnologijo in

izdelavo aplikacij na operacijskem sistemu Android. Namen dela je bila izdelava mobilne

aplikacije za učenje osnov programiranja. Pri izdelavi aplikacije smo se omejili na mobilno

aplikacijo za učenje programskega jezika Java na operacijskem sistemu Android. Najprej

smo predstavili izobraževalno tehnologijo, nato pa nadaljevali z opisom najboljših aplikacij

za učenje programiranja in s predstavitvijo njihovih skupnih značilnosti. Nato smo pri

načrtovanju izdelali diagram primera uporabe in diagram zaslonskih slik. Na koncu smo

predstavili še razvoj aplikacije, kjer smo opisali uporabljena orodja, njene funkcionalnosti in

navedli možne prihodnje izboljšave.

iii

Mobile application for learning programming basics

Key words: Android, Android mobile application, learning programming basics,

educational technology

UDK: 004.4'23:004.42(043.2)

Abstract

While working on this paper we were acquainted with educational technology and

application development on the Android operating system. The purpose of the work was to

create a mobile application for learning the basics of programming, where we limited

ourselves to the mobile application for learning programming language Java on the Android

operating system. We first introduced educational technology. We continued with a

description of the best applications for learning programming languages and we presented

their common features. Then, during the design, we created a use case diagram and a

mockup. In the end of our paper we presented our application development where we

described the tools used, its functionalities and stated possible future improvements to the

application.

iv

KAZALO VSEBINE

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

2 IZOBRAŽEVALNA TEHNOLOGIJA ..................................................................................2

2.1 Avdio- in videotehnologija ...................................................................................3

2.2 Sistemi upravljanja učenja in sistemi za upravljanje izdelave vsebine ...................4

2.3 Mobilno učenje ....................................................................................................6

3 PREDSTAVITEV OBSTOJEČIH MOBILNIH APLIKACIJ ZA UČENJE PROGRAMIRANJA ........8

3.1 Solo Learn ............................................................................................................8

3.2 Programming Hub ..............................................................................................10

3.3 Druge pomembnejše aplikacije za učenje programiranja ...................................12

3.3.1 Java Programming ......................................................................................12

3.3.2 Udacity .......................................................................................................14

3.3.3 Treehouse ...................................................................................................16

3.4 Skupne značilnosti predstavljenih rešitev ...........................................................17

3.4.1 Igrifikacija ...................................................................................................19

3.4.2 Oblačne storitve .........................................................................................19

3.4.3 Povezovanje uporabnikov z drugimi uporabniki ..........................................20

3.4.4 Monetizacija ...............................................................................................21

4 NAČRTOVANJE APLIKACIJE ........................................................................................23

4.1 Namen in zahteve za končni izdelek ...................................................................23

4.2 Diagram primera uporabe (angl. »Use case diagram«) .......................................24

4.3 Načrt zaslonskih slik (angl. »Mockup«) ...............................................................25

5 IMPLEMENTACIJA APLIKACIJE ...................................................................................29

5.1 Uporabljena tehnologija ....................................................................................29

5.1.1 Android Studio ............................................................................................29

5.1.2 Firebase ......................................................................................................32

5.1.3 Knjižnica Picasso .........................................................................................39

5.1.4 Knjižnica YouTube Android Player API .........................................................39

5.2 Ključne funkcionalnosti ......................................................................................41

5.2.1 Predstavitev učne vsebine ..........................................................................41

5.2.2 Kviz na koncu vsake učne vsebine in igra Kviz..............................................44

v

5.2.3 Lestvica .......................................................................................................51

5.3 Možne izboljšave aplikacije ................................................................................55

5.3.1 Forum .........................................................................................................55

5.3.2 Kvizi uporabnikov ........................................................................................57

5.3.3 Dodatne funkcionalnosti kvizov ..................................................................58

6 SKLEP ........................................................................................................................60

VIRI IN LITERATURA ..........................................................................................................61

KAZALO SLIK

Slika 3.1: Tečaj programskega jezika Java ...........................................................................9

Slika 3.2: Izzivi ....................................................................................................................9

Slika 3.3: Forum, »Code Playground« in profil ..................................................................10

Slika 3.4: Tečaj Jave in primer kviza ..................................................................................11

Slika 3.5: »Compiler« in rešeni primeri .............................................................................12

Slika 3.6: Prikaz teorije .....................................................................................................13

Slika 3.7: Primeri rešenih programov ................................................................................13

Slika 3.8: Kviz z lestvico in dosežki ....................................................................................14

Slika 3.9: »Nanodegree« plačniški paketi .........................................................................15

Slika 3.10: Zaslonska slika uporabniške izkušnje v aplikaciji Udacity .................................16

Slika 3.11: Knjižnica ..........................................................................................................17

Slika 4.1: Diagram primera uporabe .................................................................................25

Slika 4.2: Načrt zaslonskih slik ..........................................................................................28

Slika 5.1: Struktura projekta .............................................................................................30

Slika 5.2: Gradle na aplikacijskem nivoju ..........................................................................32

Slika 5.3: Konzola Firebase Authentication .......................................................................33

Slika 5.4: Delovanje prijave ..............................................................................................34

Slika 5.5: Metoda ustvariRacun ........................................................................................35

Slika 5.6: Prijava uporabnika in zapis v bazo ob prvi prijavi ...............................................36

Slika 5.7: Razred PoglavjaClass .........................................................................................37

Slika 5.8: Vozlišča in elementi podatkovne baze ...............................................................38

Slika 5.9: Uporaba knjižnice Picasso .................................................................................39

Slika 5.10: Deklaracija API ključa in ostalih spremenljivk...................................................40

Slika 5.11: Implementiranje YouTube videoposnetka .......................................................40

Slika 5.12: Ustrezni niz za nalaganje videoposnetka .........................................................41

Slika 5.13: Postavitev aktivnosti Poglavje .........................................................................42

Slika 5.14: Dodajanje fragmentov in pomikanje po bazi....................................................42

vi

Slika 5.15: Adapter za dodajanje fragmentov ...................................................................43

Slika 5.16: Delovanje predstavitve učnih vsebin ...............................................................44

Slika 5.17: OnCreate metoda aktivnosti Kviz.....................................................................45

Slika 5.18: Prvi del metode sestaviKviz .............................................................................46

Slika 5.19: Postavitev aktivnosti Kviz ................................................................................47

Slika 5.20: Drugi del metode sestaviKviz ...........................................................................48

Slika 5.21: Delovanje aktivnosti Kviz .................................................................................49

Slika 5.22: Metoda timer ..................................................................................................50

Slika 5.23: Delovanje igre Kviz ..........................................................................................50

Slika 5.24: CardView v lestvici ..........................................................................................51

Slika 5.25: Dekleracija RecyclerView-a in LinearLayoutManager-ja ...................................52

Slika 5.26: Izsek kode, kjer napolnimo ArrayList in kličemo adapter .................................53

Slika 5.27: Izsek kode lestvicaAdapter ..............................................................................54

Slika 5.28: Metoda onBindViewHolder v razredu lestvicaAdapter ....................................54

Slika 5.29: Delovanje lestvice ...........................................................................................55

Slika 5.30: Primer načrta za forum....................................................................................56

Slika 5.31: Primer načrta za uporabniški kviz ....................................................................58

Slika 5.32: Primer načrta izboljšanja kviza ........................................................................59

KAZALO TABEL

Tabela 2.1: Osnovne funkcionalnosti sistemov za upravljanje učenja .................................5

Tabela 3.1: Značilnosti aplikacij ........................................................................................18

Tabela 3.2: Prednosti in slabosti SaaS ...............................................................................20

vii

SEZNAM UPORABLJENIH KRATIC

APK – paket za Android aplikacije

IaaS – arhitektura kot storitev

LCMS – sistemi za upravljanje izdelave vsebine

LMS – sistemi upravljanja učenja

PaaS – platforma kot storitev

SaaS – programska oprema kot storitev

SDK – komplet za razvoj programske opreme

VOIP – orodje za pogovor prek internetnega protokola

1

1 UVOD

Učenje novih predmetov je vedno naporno. Nova snov prinaša nove izzive in probleme, ki

jih učenec kljub sodelovanju pri pouku ali samostojnem delu za knjigami včasih ne more

rešiti. Učenje iz zvezkov in knjig brez dodatne razlage pa je kar velik zalogaj za začetnike.

Da bi olajšali začetne stopnje učenja programiranja, smo izdelali mobilno aplikacijo, ki je

osrednji predmet diplomskega dela. Naša aplikacija bo torej reševala probleme začetnikov

pri učenju programskega jezika Java prek predstavitve teorije s pomočjo besedila,

videoposnetka in slik z izseki kode programov, uporabnik pa se ima možnost preizkusiti tudi

v kvizu. Pri izdelavi aplikacije smo se omejili na mobilno aplikacijo za učenje programskega

jezika Java na operacijskem sistemu Android.

Poleg aplikacije smo v sklopu diplomskega dela najprej predstavili izobraževalno

tehnologijo in njene glavne predstavnike. Nadaljevali smo s predstavitvijo že izdelanih

aplikacij za pomoč pri učenju programiranja. Ker je na spletu v tem trenutku na voljo veliko

različic aplikacij na to temo, smo se pri analizi aplikacij omejili na aplikacije Solo Learn,

Programming Hub, Java Programming, Udacity in TreeHouse, saj imajo v uradni trgovini z

aplikacijami Google Play Store največ prenosov in najboljše ocene. Zato smo sklepali, da

bodo dobro predstavljale mobilne aplikacije na to temo. Pri analizi smo bili pozorni na

skupne značilnosti naštetih aplikacij, te skupne značilnosti smo tudi podrobno predstavili.

Nadaljevali smo z načrtovanjem aplikacije, kjer smo najprej podrobneje opisali namen in

zahteve aplikacije ter izdelali in opisali diagram primera uporabe in primere zaslonskih slik.

Nato smo opisali razvoj aplikacije, pri čemer smo najprej opisali uporabljeno tehnologijo.

Na koncu smo se osredotočili še na ključne funkcionalnosti in možnosti razširitve aplikacije

ter podali sklep.

2

2 IZOBRAŽEVALNA TEHNOLOGIJA

V moderni dobi človek uporablja tehnologijo, s katero si lajša življenje na vsakem koraku.

Uporaba tehnologije se je v različnih oblikah začela pojavljati tudi kot pomoč pri

izobraževanju, z razvojem interneta pa se je vedno bolj razširila. Tako imamo zdaj možnost

vedno in povsod dostopati do gradiva, ki smo ga zajeli oz. prenesli ali do njega kar direktno

dostopali prek internetne povezave. Gradivo nam je na voljo v obliki zvočnih in

videoposnetkov, elektronskih knjig, strokovnih člankov, raznih spletnih strani, pa tudi

mobilnih aplikacij, namenjenih lažjemu učenju.

Takšni tehnologiji pravimo izobraževalna tehnologija in jo uporabljamo v procesu učenja.

Uporabljajo jo učenci in učitelji za učenje in poučevanje na daljavo, saj je enostavna za

uporabo in zelo koristna za prenašanje znanja na nov, zanimiv in privlačen način. Aplikacije,

ki so namenjene učenju jezikov, inštrumentov, raznih šolskih predmetov, in sistemi, kot je

Moodle, so del izobraževalne tehnologije. Poleg takšnih aplikacij pa lahko med

izobraževalno tehnologijo smatramo tudi platforme, kot je YouTube, in bloge, saj med

drugim ponujajo poučevalne videoposnetke in besedilo.

Uporabniki za uporabo izobraževalne tehnologije pri učenju potrebujejo napravo, ki

tehnologijo podpira, ter povezavo s spletom, vendar to predstavlja začetni vložek, ki si ga

nekateri ne morejo ali nočejo privoščiti. Kljub temu pa so podatki glede uporabe naprav in

spleta v zadnjih letih vse bolj obetavni.

Podatki za leto 2018 namreč kažejo, da več kot 4 bilijone ljudi po vsem svetu uporablja

internet. To pomeni, da ima nekaj več kot polovica svetovne populacije dostop do spleta.

V letu 2017 se je številka povišala za kar četrt bilijona novih uporabnikov. Večino porasta

lahko pripišemo cenovno dostopnejšim pametnim telefonom in mobilnim paketom, saj ima

dve tretjini vseh ljudi mobilne telefone in več kot polovica teh telefonov je t. i. pametnih

telefonov [13].

3

Dostop do spleta in dostop do naprav pa učencem in učiteljem nudi novo okolje za izvajanje

pouka. Takšno učenje imenujemo spletno učenje, izvajamo pa ga na daljavo zunaj šolskih

učilnic. Obstajata dva pristopa do učenja prek spleta, in sicer sinhrono in asinhrono učenje.

Sinhrono učenje je učenje in sodelovanje v realnem času prek interneta. Običajno vključuje

orodja, kot so: klepet v živo, avdio- in videokonference, deljenje podatkov in aplikacij,

skupna tabla, skupno gledanje multimedije in razne predstavitve oz. diaprojekcije. Medtem

pa asinhrono učenje uporablja časovno zakasnjene zmožnosti interneta: e-pošto,

navzkrižne razprave, oglasne deske in priloge datotek. Asinhrone tečaje izvajajo

usposobljeni profesorji, vendar se ti za razliko od sinhronih ne izvajajo v realnem času, kar

pomeni, da imajo študentje in učitelji odprte roke, kdaj bodo opravljali posamezne študijske

obveznosti. To pa učencem in profesorjem omogoča vodenje pouka kjerkoli in kadarkoli

želijo. Poučevanje prek spleta je najučinkovitejše, če ga izvajajo učitelji, ki so v predmetu,

ki ga učijo, izkušeni. To, da znanje prenašajo profesorji, ki imajo vse potrebne kvalifikacije,

pa je tudi najboljši način za ohranjanje povezave med učenjem prek spleta in vrednotami

tradicionalnega učenja [18].

V nadaljevanju bomo opisali pomembnejše vrste izobraževalne tehnologije, ki se vedno bolj

uporablja tudi v šolah.

2.1 Avdio- in videotehnologija

Od kaset iz 70. let do digitalno shranjene glasbe, shranjene v oblaku, je avdiotehnologija

postala ena izmed boljših izobraževalnih tehnologij in metod zajemanja in predstavitve

informacij. Avdio zagotavlja hitro in poceni alternativo besedilu za povezovanje s študenti,

poleg tega pa zagotavlja svežo vsebino, intervjuje, diskusije ali druge poučne materiale.

Avdiotehnologijo lahko preprosto ustvarimo z mnogimi namiznimi orodji na naših

računalnikih in z majhnimi napravami za digitalno snemanje, kot so pametni telefoni.

Oddaje, intervjuji s strokovnjaki, posnetki javnih predavanj in pogovori v živo prek orodij

VOIP predstavljajo le nekaj načinov, kako se lahko znanje prenaša prek avdiotehnologije

[9].

4

Tudi videotehnologija je priljubljeno orodje, ki se uporablja za poučevanje študentov in

izboljševanje učne izkušnje. Vsakdo z digitalno kamero, spletno kamero, tablico ali

pametnim telefonom lahko ustvari in uredi videoposnetek. Videoposnetki so odlično

orodje za predstavitev in pojasnilo konceptov, prikaz postopkov ali pridobivanje

razumevanja učenja v praksi. Obstaja veliko načinov za izkoriščanje videoposnetkov, ustvari

se lahko motivacijsko, nepozabno in vključujočo učno izkušnjo. Profesorji po navadi

uporabljajo videoposnetke tudi za prikaz eksperimentov, abstraktnih principov in modelov,

predstavitev principov prek 3D-prostora, prikaz animiranih, počasnih ali pospešenih

posnetkov, različnih perspektiv, predstavitev primerov iz okolja itd. Z objavo avdio- in

videomaterialov za namene izobraževanja pa profesor naredi svoje vsebine dostopnejše

širšemu obsegu študentov [9].

V izobraževalnem kontekstu pa so postali posebej pomembni programi, kot je PowerPoint.

PowerPoint je postal široko uporabljen program za predstavitev, ki je seznanil novo

občinstvo profesorjev z možnostjo uporabe multimedijske produkcije, kjer sta lahko slika

in zvok vgrajena v predstavitvene drsnice. Skupaj s takšnimi programi so številne inštitucije

nadgradile svoje predavalnice in so s tem omogočile predvajanje takšne multimedije.

Istočasno so tudi omogočile virtualna okolja, namenjena učenju, t. i. spletne učilnice, kot

so WebCT, Blackboard in Moodle [6].

2.2 Sistemi upravljanja učenja in sistemi za upravljanje izdelave vsebine

Sistemi upravljanja učenja (angl. »Learning managment system« oz. »LMS«) so programske

aplikacije, namenjene administraciji, dokumentaciji, sledenju, poročanju in izvajanju

izobraževalnih programov e-učenja (spletnega učenja) [14].

Najprej je bila uporaba LMS-ja opazna v izobraževalnih inštitucijah. Sistemi za upravljanje z

učenjem so bili uporabljeni za dostavo učnega gradiva v šolah in širjenje spletnega učenja.

V zadnjih desetletjih pa organizacije vseh velikosti uporabljajo LMS za možnost dodatnega

usposabljanja notranje zaposlenim, strankam in drugim partnerjem. Na trgu je trenutno na

voljo približno 600 različnih LMS-sistemov za prodajo. Vsak izmed njih je unikaten in

5

vsebuje funkcije, ki zadovoljujejo potrebe različnih učencev in profesorjev. Nekaj pogostih

komponent ali funkcij, ki jih najdemo na številnih takšnih platformah, smo predstavili v

tabeli 2.1 [27].

Tabela 2.1: Osnovne funkcionalnosti sistemov za upravljanje učenja

Naslov funkcije Pojasnilo funkcije

Spremljanje udeležencev Digitalni seznam klicev za spremljanje prisotnosti in

pošiljanje povabil udeležencem v razredu

Nadzor registracije Možnost spremljanja in prilagajanja registracijskih

procesov učnega načrta

Upravljanje dokumentov Prenos in upravljanje dokumentov

Dostop z več napravami Dostava vsebine predmeta prek spletnih vmesnikov, npr.

prek računalnikov, telefonov in tablic

Porazdeljena baza profesorja

in študenta

Oddaljena udeležba profesorja ali učenca omogoča, da

tečaji vključujejo več profesorjev in strokovnjakov z vsega

sveta

Koledar predmetov Ustvarjanje in objava urnikov, rokov in izpitov

Angažiranje učenca Interakcija med študenti, npr. pogovor v realnem času,

e-pošta in forumi

Ocenjevanje Ustvarjanje raznolikih vaj, kvizov ali izpitov

Točkovanje Napredno sledenje študentovemu napredku in delu v

daljšem časovnem obdobju

Platforma za upravljanje z izdelavo vsebine (angl. »Learning Content Management System«

oz. »LCMS«) je orodje oz. programska oprema, ki omogoča univerzam in organizacijam

ustvarjanje in objavo učne vsebine [26].

Obe navedeni tehnologiji ljudje med seboj mešajo, saj sta si precej podobni oz. mislijo, da

sta si enaki. Glavna razlika med LMS in LCMS je v tem, da medtem ko LMS daje velik

poudarek na vodenje tečajev in na uporabniško izkušnjo med izvajanjem tečajev, pa ne nudi

možnosti ustvarjanja učne vsebine.

6

2.3 Mobilno učenje

Mobilno učenje predstavlja učenje prek mobilnih naprav. To so naprave, kot so pametni

telefoni, tablice in prenosniki. Zaradi možnosti prenosa teh naprav nam je mobilno učenje

na voljo kjerkoli in kadarkoli. Skupaj s povezavo na internet pa ima učenje prek mobilnih

naprav dostop do vseh zgoraj naštetih tehnologij in še več. Ima možnost prenosa in deljenja

datotek, iskanja spletnih virov, branja forumov in blogov, na telefonu in tablicah pa je

možna uporaba mobilnih aplikacij.

Uporaba mobilnih naprav za učenje predstavlja za uporabnike prednosti in slabosti. Glavne

prednosti mobilnega učenju so:

• učenje ni vezano na učilnico ali domačo sobo. Učencu je vsebina dosegljiva,

kadarkoli jo želi odpreti,

• učenje je učencem bolj privlačno, zanimivo in novejše, npr. možnost učenja prek

igranja,

• večina aplikacij in gradiva je na voljo zastonj. Iskanje gradiva pa je hitro in

enostavno,

• povezanost z drugimi. To omogoča deljenje in prenos gradiva, pa tudi sodelovanje

z drugimi in možnost pomoči drug drugemu.

Poleg prednosti pa so opazne tudi slabosti:

• uporabnik se na mobilnih napravah lahko hitro zamoti, kar mu odvrne pozornost od

učenja,

• učenje je odvisno od naprave in povezave na internet. Naprava mora biti

napolnjena, povezava na internet pa dovolj dobra, da lahko uporabnik nemoteno

izvaja učni proces,

• prekomerno sedenje za mobilnimi napravami pa lahko negativno vpliva na zdravje

uporabnika, še posebej na njegovo držo.

Zaradi vedno bolj dostopnih cen mobilnih paketov in pametnih telefonov so vedno bolj

priljubljene tudi mobilne aplikacije. Mobilne aplikacije so programi, ki se izvajajo na

mobilnih napravah, kot sta telefon in tablica. Za vsak operacijski sistem so posebej

7

dostopne v uradnih spletnih trgovinah. Za Android naprave jih lahko uporabniki najdejo v

trgovini Google Play, za iOS naprave v trgovini Apple App, za Windows naprave pa v trgovini

Windows. Aplikacije so lahko brezplačne ali plačljive. V naslednjem poglavju bomo opisali

pet večjih izobraževalnih mobilnih aplikacij za učenje programskega jezika Java.

8

3 PREDSTAVITEV OBSTOJEČIH MOBILNIH APLIKACIJ ZA

UČENJE PROGRAMIRANJA

V tem poglavju bomo opisali in prek zaslonskih slik predstavili delovanje petih aplikacij za

učenje programiranja. Aplikacije uporabnikom na različne načine predstavljajo

programiranje, zato bomo najprej vsako posebej opisali, v nadaljevanju pa bomo opisali

tudi skupne elemente, ki jih vsebujejo omenjene aplikacije. Začeli bomo z aplikacijama Solo

Learn in Programming Hub, saj sta od vseh najbolj popularni. Prav tako imata v trgovini

Google Play največ ocen.

3.1 Solo Learn

Solo Learn je aplikacija, ki omogoča učenje programskih jezikov C++, Java, Pyhton 3,

JavaScript, C#, PHP, Swift, Ruby, Jquery, HTML, CSS in SQL prek spleta ter Android in IOS

aplikacije. Za dostop do aplikacije je zahtevana prijava prek Facebooka ali Googla, možna

pa je tudi registracija naravnost na njihovi strani.

Kot prijavljen uporabnik ima uporabnik možnost začeti s tečajem želenega programskega

jezika. Začeti mora z osnovami, saj so mu, dokler osnov ne opravi, ostala poglavja zaprta,

kot je razvidno na zadnji zaslonski sliki na sliki 3.1. V sklopih poglavij so podpoglavja, ki

vsebujejo najprej teorijo in primere kode ter na koncu še nalogo za uporabnika, ki

uporabnika po pravilni rešitvi nagradi z dostopom do naslednje snovi. Na koncu vsakega

podpoglavja pa ga čaka kviz, ki je sestavljen iz vse predelane snovi tega podpoglavja. Po

uspešno končanih poglavjih je uporabnik nagrajen še s certifikatom o opravljenem tečaju.

9

Slika 3.1: Tečaj programskega jezika Java

Izzivi (angl. Challenges) so funkcija, ki omogoča, da uporabnik izzove druge uporabnike na

dvoboj v znanju določene snovi, ki si jo lahko sam izbere. Oba odgovarjata na vprašanja,

tisti, ki pravilno odgovori na več vprašanj, pa dobi nagrado v vrednosti 30 »exp« točk. Na

sliki 3.2 sta prikazani dve zaslonski sliki, ki prikazujeta delovanje izziva.

Slika 3.2: Izzivi

Uporabnikov račun se skozi uporabljanje aplikacije izboljšuje, za vsak uspešno opravljen

tečaj, poglavje, izziv itd. je uporabnik namreč nagrajen z »Exp-jem«, »Levelom« in

značkami. Tečaji se spremljajo tudi v odstotkih, in sicer koliko odstotkov tečaja je uporabnik

10

uspel rešiti. Vse to lahko uporabnik in ostali uporabniki vidijo, ko pogledajo uporabnikov

profil.

Aplikacija ima implementirano funkcijo, ki so jo poimenovali »Code Playground«. Funkcija

omogoča okolje za pisanje kode v izbranem jeziku uporabnika. To kodo pa aplikacija tudi

prevede in prikaže njen izpis. Uporabnik ima poleg tega možnost zapisano kodo deliti tudi

z drugimi uporabniki.

V aplikaciji imajo razvit tudi forum, kjer lahko uporabniki postavljajo različna vprašanja o

problemih, na katere so naleteli med učenjem. Ostali uporabniki pa lahko na ta vprašanja

odgovarjajo. Posamezne odgovore lahko uporabniki ocenjujejo. Če se jim zdi odgovor

koristen, mu lahko dajo točko, drugače pa točko odbijejo.

Forum, »Code Playground« in uporabniški profil je prikazan na sliki 3.3.

Slika 3.3: Forum, »Code Playground« in profil

3.2 Programming Hub

Programming Hub je aplikacija, ki je na voljo le na mobilni napravi Android. Za uporabo

aplikacije se mora uporabnik najprej registrirati. To lahko stori prek Googla, Facebooka ali

e-pošte. Ko je registriran, se lahko uporabnik vpiše, v nadaljevanju pa si lahko izbere tečaj

11

programskega jezika, ki ga želi opravljati. Izbira lahko med C++, C, HTML, JavaScript, Python

2 in 3, C#, PHP, CSS, VB 6, Assembly 8086, Shell Script, VB.Net, JQuery, R, Ruby, Swift in

SQL.

Uporabniku je snov predstavljena v obliki teorije, slik in vprašanj, ki jih mora uporabnik

pravilno rešiti za nadaljevanje. Vprašanja so sestavljena v obliki kviza, kot je razvidno na

sliki 3.4. Aplikacija sledi uporabnikovemu napredku in ga o njem tudi obvešča.

Slika 3.4: Tečaj Jave in primer kviza

Aplikacija ponuja tudi vgrajeni »Compiler«, ki ga lahko uporabnik uporablja za pisanje kode

in njen zagon. Izpis kode se prikaže v zavihku »Output«. Poleg tega pa aplikacija nudi zbirko

vnaprej rešenih primerov, ki jih lahko uporabnik pregleda, testira in spreminja. Oboje je

razvidno s slike 3.5.

12

Slika 3.5: »Compiler« in rešeni primeri

Aplikacija ima tudi možnost posodobitve iz »Free« v »Pro« različico, ki pa je plačljiva. »Pro«

različica ponuja možnost delovanja brez povezave s spletom, »premium« vsebino,

neomejeno uporabo »Compilerja«, poleg tega pa ne vsebuje oglasov.

3.3 Druge pomembnejše aplikacije za učenje programiranja

3.3.1 Java Programming

Java Programming je mobilna aplikacija, ki uporabniku predstavi programiranje v

programskem jeziku Java prek teorije, rešenih primerov in kvizov. Teorijo razvijalci

predstavijo tako, da jo razdelijo na več poglavij in podpoglavij, kjer vsako poglavje opišejo

in dodajo primer uporabe v praksi. Vse to se nahaja v razdelku »Tutorial«. Aplikacija pa

vsebuje še razdelek »Important Questions«, kjer so vprašanja napisana v obliki seznama,

klik na posamezno vprašanje pa prikaže odgovor. Vseh vprašanj je 99 in obsegajo snov, ki

je bila predstavljena v razdelku »Tutorial«. Slika 3.6 prikazuje uporabniški vmesnik

aplikacije in prikaz teorije.

13

Slika 3.6: Prikaz teorije

Aplikacija predstavlja tudi primere rešenih programov (slika 3.7). Uporabniku najprej

pokaže seznam vseh primerov programov, ki jih ima na voljo. Na spodnji sliki je prikazan

primer za program, ki izpiše »Hello World«. Aplikacija uporabniku prikaže primer delujoče

kode in pod njo prikaže izhod kode, v tem primeru besedi »Hello World«. Omogočeno pa

je tudi deljenje primera programa prek sporočil in družbenih omrežij.

Slika 3.7: Primeri rešenih programov

14

Za dostop do kviza je zahtevana prijava prek Google računa, kot je razvidno iz slike 3.8. Ko

se uporabnik prijavi, lahko začne z reševanjem kviza, ki je zgrajen na način igre. Vsako

vprašanje, na katero pravilno odgovori, uporabniku prinese 1 točko, več zaporednih

pravilnih odgovorov pa mu prinese bonus točke. Za vsak nepravilni odgovor se uporabniku

zbije 1 poizkus od 5 možnih. Ko uporabnik izgubi vseh 5 poizkusov, se igra zaključi in rezultat

se prikaže na lestvici, kjer se lahko primerja z rezultati drugih uporabnikov. Z igranjem pa si

lahko pridobiva tudi dosežke.

Slika 3.8: Kviz z lestvico in dosežki

3.3.2 Udacity

Udacity je spletna in mobilna aplikacija, ki uporabnikom omogoča učenje tehnoloških

vsebin prek tečajev, npr. učenje Androida, umetne inteligence, analize podatkov,

podatkovne znanosti, iOS-a in virtualne resničnosti. Aplikacija omogoča tudi učenje

netehnoloških vsebin prek tečajev, kot sta tečaja psihologije in fizike. Vsak uporabnik se

mora najprej v aplikacijo prijaviti. Tečaji so na voljo v obliki dveh tipov. Prvi tip je t. i.

»Nanodegree«, ki predstavlja spletni certifikat, ki si ga lahko uporabniki prislužijo v 6–12

mesecih z delom po 10–20 ur na teden. Za tečaj pa morajo odšteti 200 $ na mesec. Njegov

namen je naučiti osnove programerskih veščin, ki naj bi uporabniku omogočile vse

potrebne kvalifikacije za začetno programiranje. Podobno kot na fakultetah ima vsak tečaj

15

predpogoje, osnovne predmete in izbirne predmete. Obstaja tudi zahteva, kjer mora

uporabnik delati s profesorjem z namenom, da pokaže spretnosti, ki se jih je naučil skozi

tečaj. Narediti mora 6–8 uporabnih projektov, ki se ujemajo z izbranim tečajem [17]. Primer

»Nanodegree« paketov na Udacity prikazuje slika 3.9.

Slika 3.9: »Nanodegree« plačniški paketi

Drugi tip je brezplačen in je na voljo vsem uporabnikom. Ko si uporabnik izbere želeni tečaj,

mu najprej predstavijo opis, predpogoje in učni načrt tečaja. Uporabnik lahko nato začne s

tečajem, ki mu ga predstavijo v obliki videoposnetkov, kjer mu je snov razložena na

preprost način. Videoposnetkom sledijo tekstovni zapisi teorije ali vprašanja v obliki kvizov.

Uporabnik ima možnost kvize rešiti sam, lahko pa si pomaga z videorazlago pravilnega

odgovora, ki mu je na voljo pod vprašanjem.

Slika 3.10 prikazuje zaslonsko sliko uporabniške izkušnje v aplikaciji Udacity.

16

Slika 3.10: Zaslonska slika uporabniške izkušnje v aplikaciji Udacity

3.3.3 Treehouse

Za razliko od prejšnjih aplikacij je Treehouse spletna aplikacija, ki je popolnoma plačljiva.

Ponuja le brezplačno preizkušnjo dobo, ki traja en teden. V preteklosti so imeli na voljo tudi

Android aplikacijo, vendar so jo umaknili s tržišča.

Da lahko uporabniki začnejo uporabljati Treehouse, potrebujejo spletni brskalnik in

internetno povezavo, prijavljeni pa morajo biti tudi na njihovo naročnino. Nato se lahko

prijavijo v aplikacijo, kjer imajo prek razdelka »knjižnica« (angl. »Library«) dostop do

celotne vsebine, ki jo aplikacija ponuja [25]. Knjižnica je prikazana na sliki 3.11.

17

Slika 3.11: Knjižnica

Implementiran imajo spletni urejevalnik besedil in razvojno okolje z naslovom

»Workspace«. Učitelji na Treehouse predstavljajo koncepte tako, da uporabljajo

»Workspace« v svojih videoposnetkih. S tem je tudi študentom lažje, saj uporabljajo enako

orodje in tako lažje sledijo tečajem. »Workspace« pa lahko študenti uporabljajo tudi tako,

da ustvarjajo svoje lastne projekte ali samo vadijo programiranje [25].

Ko se študent loti tečaja, se njegov napredek sproti beleži in shranjuje na nadzorni plošči

(angl. »Dashboard«), ki je namenjena sledenju študentovemu napredku in zagotavljanju

pregleda nad njegovimi tečaji. Ker verjamejo, da bi moralo biti učenje privlačno in zabavno,

je igrifikacija velik del njihove aplikacije. Njihovi projekti so razdeljeni na ravni, dodane

imajo kvize in izzive. Študenti lahko zbirajo tudi točke in značke, ki se skupaj z napredkom

vidijo na študentovem profilu. Implementirana lestvica pa dodaja tekmovalnost in dodatno

motivira študente, da nadaljujejo z učenjem [25].

3.4 Skupne značilnosti predstavljenih rešitev

Glede na zgornje aplikacije, ki smo jih podrobno opisali in predstavili, smo ugotovili, da

obstajajo značilnosti oz. elementi, ki se v večini ponavljajo. To so igrifikacija, oblačne

storitve, povezovanje z drugimi in monetizacija.

18

Najprej bomo predstavili tabelo, ki prikazuje uporabo elementov v opisanih aplikacijah, v

nadaljevanju pa bomo te elemente tudi podrobneje predstavili.

V tabeli 3.1 smo predstavili, v katerih aplikacijah se zgoraj omenjeni pogosti elementi

pojavljajo. Ugotovili smo naslednje:

• Igrifikacija se pojavi v vseh aplikacijah.

• Oblačnih storitev nima implementiranih le aplikacija Java Programming. Ostale pa

imajo kot oblačno storitev na voljo urejevalnik kode.

• Povezovanje z drugimi v vseh aplikacijah poteka prek prijave s socialnimi omrežji.

Solo Learn in Treehouse pa imata implementirana še forum. Poleg foruma pa na

Treehouseu nudijo tudi blog.

• Pri monetizaciji se aplikacije najbolj razlikujejo. Treehouse uporablja mesečno

naročnino. Solo Learn in Java Programming uporabnikom na določen čas prikazujeta

oglase. Udacity prek funkcionalnosti »Nanodegree« nudi plačljive tečaje.

Programming Hub pa svojim uporabnikom nudi plačljivo nadgradnjo računa v »Pro«

različico.

Tabela 3.1: Značilnosti aplikacij

Solo Learn Programming

Hub

Java

Programming

Udacity Treehouse

Igrifikacija DA DA DA DA DA

Oblačne

storitve

DA DA NE DA DA

Povezovanje

z drugimi

DA DA DA DA DA

Monetizacija DA DA DA DA DA

19

3.4.1 Igrifikacija

Igrifikacija (angl. »Gamification«) je pojem, ki opisuje proces vstavljanja tehnik in funkcij

igre v drugače resne aplikacije. Študije so dokazale, da igre privlačijo vse več mladostnikov,

saj temeljijo na teorijah o obnašanju ljudi in njihovi motivaciji, s tem pa priskrbijo občutke

zadovoljstva, ki naredijo igre zasvojljive [5]. Zato lahko opazimo, da je na spletu vse več

takšnih aplikacij, ki vsebujejo vsaj eno izmed naslednjih tehnik igrifikacije:

• Tečaji za začetnike so v igrah prva možnost, ki jo uporabnik najde. Predstavijo mu

bistvo in ključne funkcije igre od navigacije po uporabniškem vmesniku do glavnih

ukazov za igranje (hoja lika, upravljanje kamere, interakcija z okolico in drugo). V

resnih aplikacijah pa to tehniko uporabljajo za komunikacijo z uporabnikom, tako

mu podajo navodila in direktive o uporabi aplikacije in njenih pravilih [15].

• Misije oz. izzivi so kombinirani s pravili in cilji za igralce, ki jih morajo po svoje

premagati. Izzivi imajo po navadi na koncu tudi nagrado za uporabnika [15].

• Uporabniška ikona na aplikaciji virtualno predstavlja uporabnika [15].

• Ravni so standardi, ki merijo uporabnikov napredek, namenjene so tudi preverjanju

uporabnikovih spretnosti in doseženih veščin [15].

• Značke, točke in dosežki so nagrade, ki jih uporabnik dosega skozi igranje.

• Lestvica pa je seznam najboljših igralcev, ki so v igri dosegli najvišje število točk. Z

lestvico lahko uporabniki primerjajo rezultate in na tak način med seboj tekmujejo.

3.4.2 Oblačne storitve

Programska oprema kot storitev (angl. »Software as a Service«) je model distribucije

programske opreme, v katerem ponudnik gosti aplikacije prek interneta in tako strankam

omogoča dostop do aplikacij. SaaS je ena izmed treh glavnih kategorij računalništva v

oblaku skupaj z arhitekturo kot storitvijo (IaaS) in platformo kot storitvijo (PaaS). SaaS

odpravlja potrebo, da organizacije namestijo in izvajajo aplikacije na svojih računalnikih ali

20

podatkovnih centrih [20]. Ker se IaaS in PaaS v teh aplikacijah ne uporabljata, ju ne bomo

podrobneje predstavili.

Izobraževalne inštitucije ponujajo tečaje, kjer je potrebno tudi praktično znanje. Več kot

učenci vadijo, bolj se veča obseg njihovega znanja. Veliko predmetov, ki jih izobraževalne

inštitucije ponujajo, potrebuje različne aplikacije in programsko opremo. Namestitev in

upravljanje takšne programske opreme pa lahko prinese veliko nevšečnosti, truda in

stroškov. SaaS aplikacije so lahko v takšnih primerih zelo koristne, saj so lahko dostopne in

ponujajo storitve po relativno nizki ceni naročnine [16].

Tabela 3.2 prikazuje prednosti in slabosti pri uporabi programske opreme kot storitve

[20][1].

Tabela 3.2: Prednosti in slabosti SaaS

Prednosti Slabosti

Prilagodljiva plačila, saj stranke namesto

nakupa programske opreme plačujejo

mesečno najemnino za ponudbo SaaS.

Podjetje se mora zanašati na zunanje

prodajalce, da zagotovijo programsko

opremo.

Razširljiva uporaba Stranka nima nadzora nad sistemom, ki

obdeluje podatke.

Samodejne posodobitve Trenutno je le omejeno število

programskih rešitev na voljo v obliki SaaS.

Dostopnost in obstojnost, uporabniki

lahko prek internetne povezave dostopajo

kjerkoli.

Ponudnik ima popoln dostop do podatkov

o strankah.

Za pravilno delovanje aplikacije skrbi

ponudnik.

3.4.3 Povezovanje uporabnikov z drugimi uporabniki

Povezovanje z ostalimi uporabniki se v aplikacijah za izobraževanje uporablja v obliki

forumov, blogov in socialnih omrežij, kot so Facebook, Google+ in Twitter.

21

Socialna omrežja so namenjena sodelovanju z drugimi in izmenjavi različnih pogledov,

podatkov in idej. Po navadi so del vsake novejše aplikacije, saj večina aplikacij poleg

registracije ponuja vstop prek uporabnikovega Facebook ali Google računa. Uporabnikom

pa omogočajo tudi deljenje vsebine na teh socialnih omrežjih.

V aplikaciji Treehouse so implementirali povezovanje na dva načina. Prek foruma, kjer lahko

vsi uporabniki sprašujejo in odgovarjajo na vprašanja, glasujejo za najboljši odgovor in s

tem zbirajo točke. Na vprašanja odgovarjajo tudi moderatorji in učitelji ter tako pomagajo

svojim uporabnikom. Za vse, ki jih zanimajo najnovejše spletne novice, trendi, nasveti in

tehnike, pa imajo na voljo tudi blog [25]. Blog je stran, ki je zapisana v obratnem

kronološkega vrstnem redu, se pravi, da so novejše objave objavljene čisto na vrhu. Na vsaki

objavi so poleg vsebine zapisani tudi ime avtorja in čas ter kraj objave, pod zapisano vsebino

pa lahko drugi uporabniki zapišejo svoje komentarje.

3.4.4 Monetizacija

Monetizacija aplikacij omogoča razvijalcem aplikacij trženje na račun izdelane aplikacije.

Implementiramo jo lahko na več načinov [24]:

• Plačljive aplikacije: preden uporabnik prenese aplikacijo, jo mora plačati. Slabost

tega načina monetizacije je v tem, da je na trgu ogromno podobnih aplikacij, ki so

zastonj in omenjenim izdelkom delajo konkurenco. S tem pa imajo povprečno

plačljive aplikacije manjši prenos kot tiste, ki so zastonj.

• Nakupovanje znotraj aplikacije: uporabnikom se poleg brezplačne vsebine ponudi

tudi plačljiva nadgradnja, npr. plačljivi tečaj. Ta način monetizacije je tvegan, saj

večina uporabnikov aplikacije ne bo nadgradila.

• Naročnina: plačevanje naročnine uporabniku omogoča uporabo aplikacije oz.

plačljivih delov aplikacije.

• Oglaševanje: uporabnikom med izvajanjem aplikacije prikazujemo oglase. To je

način monetizacije, ki ga uporablja večina aplikacij. Oglaševanje omogoča

22

razvijalcem razviti aplikacije, ki so uporabnikom na voljo zastonj. S tem dobijo veliko

klikov in prenosov. Takšno oglaševanje se lahko zalomi, če uporabljamo neprimerne

ali nezanimive oglase, če je na zaslonu preveč oglasov in če uporabniku z oglasi

uničimo uporabniško izkušnjo.

23

4 NAČRTOVANJE APLIKACIJE

4.1 Namen in zahteve za končni izdelek

Namen je ustvariti aplikacijo za učenje osnov programiranja v programskem jeziku Java, ki

pomaga študentom, ki se s programiranjem prvič srečajo, pa tudi tistim bolj veščim, ki pa

jim osnove še delajo probleme. Zaradi tega bomo razvili mobilno Android aplikacijo, ki bo

uporabnikom dostopna povsod, snov pa bo predstavljena na čim bolj enostaven in zanimiv

način. To bomo dosegli tako, da bomo poleg učenja teorije prek besedila vključili še učenje

prek videoposnetkov, dodali pa bomo konkretne primere programov v obliki slik, na koncu

pa uporabniku zastavili kviz na izbrano temo, ki jo obdeluje. Vključili bomo tudi elemente

programiranja, ki smo jih spoznali v poglavju 3.4, in sicer socialna omrežja in igrifikacijo, s

slednjo bomo poskušali ohraniti uporabnikovo pozornost. Oblačnih storitev in monetizacije

nismo vključili v aplikacijo, saj za oblačne storitve nimamo ustrezne tehnologije, njihova

implementacija pa bi lahko predstavljala ločen projekt. O monetizaciji pa nismo razmišljali,

saj smo najprej želeli izdelati ključne funkcionalnosti aplikacije in videti končni izdelek.

Glavne zahteve za našo aplikacijo so naslednje:

• vključitev socialnih omrežij prek prijave z Google in Facebook računom in možnost

registracije in prijave z e-poštnim računom,

• meni, kjer so teme, ki jih uporabnik lahko izbere za učenje, naštete v obliki seznama,

• predstavitev vsake teme s pomočjo besedila, videoposnetka, slike in kviza,

• vključitev elementov igrifikacije, kot so točkovanje kvizov, lestvica najboljših in

napredovanje po temah,

• izdelava igre Kviz, kjer ima uporabnik omejen čas, da reši čim več vprašanj, ki se

točkujejo, zaključene točke pa se prikažejo na lestvici,

• izdelava lestvice najboljših igralcev igre Kviz.

24

4.2 Diagram primera uporabe (angl. »Use case diagram«)

Z zastavljenimi ključnimi zahtevami lahko začnemo modelirati in načrtovati našo aplikacijo.

Najprej bomo izdelali diagram primera uporabe. To je enostaven diagram, ki se ga izdela v

začetnih stopnjah in omogoča izdelavo modela sistema iz perspektive končnega uporabnika

[28]. Sestavljen je iz akterjev, primerov uporabe (funkcionalnosti), povezav in sistemskih

mej. Pove nam, kdo nastopa v sistemu in kako sodeluje s tem sistemom ter katere

funkcionalnosti sistem omogoča svojim akterjem.

V našem sistemu, ki je viden na sliki 4.1, imamo dva akterja. To sta uporabnik in prijavljen

uporabnik. Predstavljena sta s figuro. Med sabo sta povezana, saj ta povezava pomeni, da

vse, kar lahko v sistemu naredi uporabnik, lahko naredi tudi prijavljeni uporabnik. Se pravi,

oba akterja se lahko prijavita v aplikacijo z Google ali Facebook računom ali prek e-pošte,

pri čemer se morata najprej registrirati, če pozabita geslo, pa lahko pošljeta tudi zahtevo za

pozabljeno geslo.

V aplikacijo pa lahko dostopa le prijavljen uporabnik. Od tu lahko izbira teme tečaja in (če

želi) pregleda teorijo, videoposnetke, konkreten primer za določeno temo ali reši kviz, ki se

ob pravilni rešitvi zabeleži v bazo. Poleg tega lahko igra igro Kviz, kjer se najboljši rezultat

zapiše v bazo in prikaže na lestvici. Lahko tudi pregleda lestvico, na koncu pa ima možnost

izpisa iz aplikacije.

25

Slika 4.1: Diagram primera uporabe

4.3 Načrt zaslonskih slik (angl. »Mockup«)

Načrt zaslonskih slik je model, ki razvijalcem in strankam pokaže, kako bo okvirno videti

končna različica aplikacije. Predstavi jim stil aplikacije, postavitev in uporabo elementov,

uporabo slik, barv in pisave. Sestavljen je iz zaslonskih slik, ki prikazujejo posamezne

aktivnosti v programu, in puščic z besedilom, ki predstavljajo povezavo med posameznimi

aktivnostmi. Slike si sledijo v vrstnem redu tako, kot se bodo odvijale v aplikaciji.

Za našo aplikacijo smo izdelali načrt zaslonskih slik, saj zelo pospeši kasnejše izdelovanje

aplikacije. Pri izdelavi zaslonskih slik smo si pomagali z diagramom primera uporabe iz slike

4.1, saj nam prikazuje, katere funkcionalnosti v aplikaciji želimo, tako smo lahko

26

funkcionalnosti ustrezno vnašali v posamezne zaslonske slike. Za izdelavo smo uporabili

spletno orodje Figma. Načrt, ki smo ga uporabljali pri razvijanju naše aplikacije, je razviden

iz slike 4.2.

Aplikacija se začne v zaslonski sliki »Začetni zaslon«, kjer ima uporabnik tri možnosti za

prijavo. Če klikne na gumb »Google« ali gumb »Facebook«, ga bo aplikacija vpisala z

ustreznim računom socialnih omrežij in poslala v zaslonsko sliko »Domači zaslon«. V

primeru, da uporabnik noče uporabiti računa s socialnih omrežij ali tega nima, pa lahko

klikne na gumb »e-mail«, ki ga bo poslal na zaslonsko sliko »Prijava z e-mailom«. Tu se lahko

uporabnik prijavi v aplikacijo s klikom na gumb »Potrdi«, če je pozabil geslo, lahko klikne na

besedilo »Pozabljeno geslo«, če še nima računa, pa lahko nadaljuje na zaslonsko sliko

»Registracija« tako, da klikne na besedilo »Nisi uporabnik? Registrirajte se!«.

Ko je uporabnik uspešno prijavljen, je prva stvar, ki jo vidi, »Domači zaslon«. Od tu si lahko

izbere: opravljanje tečaja osnov Jave, reševanje igre Kviz ali pregled lestvice najboljših

igralcev. Vse to stori s klikom na ustrezni gumb. Možnost pa ima tudi s prstom podrsati od

leve proti desni strani zaslona in tako odpreti navigacijski meni, kjer se lahko poleg hitre

navigacije po aplikaciji tudi izpiše.

V primeru, da uporabnik na »Domačem zaslonu« klikne gumb »Tečaj osnov Jave«, ga

aplikacija pošlje na zaslonsko sliko »Izbira tečaja«, kjer si lahko s seznama izbere ustrezno

temo, ki jo želi pregledati in ki mu je odprta. Vsaka tema ima namreč levo od naslova teme

tudi sliko, ki prikazuje, ali je tema uporabniku odprta ali ne. To, ali je tema uporabniku

odprta ali zaprta, pa določi kviz na koncu vsake teme. Odprte teme slike nimajo ali pa so

označene s svetlo zelenim krogcem s kljukico, ki ponazarja uspešno dokončan kviz teme.

Zaprte teme pa so označene s sliko ključavnice na temnejši podlagi. S klikom na odprto

temo je uporabnik poslan na ustrezno zaslonsko sliko tiste teme. V našem modelu na sliki

4.1 je to tema z naslovom »Spremenljivke«. Od tu vidimo, da ima zaslonska slika »Tečaj

osnov Jave – teorija« na vrhu tri zavihke, ki ponazarjajo različne poglede. Prvi pogled je

»TEORIJA«, ki predstavlja pogled, ki uporabniku prikazuje besedilo za izbrano temo.

Uporabnik ima možnost klika na določen zavihek oz. možnost kretnje drsa s prstom po

zaslonu v smer zavihka. S tem pa uporabnik pridobi pogled nad zavihkom »VIDEO«, ki

27

prikazuje posnetek s spletne strani YouTube, in pogled nad zavihkom »PRIMER«, ki

uporabniku predstavi konkreten primer programa v obliki slike in možnost zaključitve teme

v obliki kviza s klikom na gumb »Kviz«.

S klikom na gumb »Kviz« v zaslonski sliki »Tečaj osnov Jave – primeri« se uporabniku odpre

kviz teme, ki ga mora v večini pravilno rešiti, da uspešno dokonča temo. Obstajata dva

pogleda kviza, prvi je odprti tip, ki je razviden iz zaslonske slike »Kviz odprta vprašanja« in

je sestavljen iz vprašanja, elementa za uporabniški vnos in gumba, ki potrdi odgovor. Drugi

tip kviza pa je zaprti tip, razviden na zaslonski sliki »Kviz zaprti tip«, ki pa je sestavljen iz

vprašanja in štirih gumbov z odgovori, med katerimi je samo eden pravilen. Po končanem

kvizu aplikacija uporabnika pošlje nazaj na zaslonsko sliko »Izbira tečaja«, kjer se, če je bil

kviz uspešno dokončan, tisti temi spremeni slika, ki ponazarja, da je tema dokončana,

naslednja tema po vrsti pa se odpre in je pripravljena za reševanje.

28

Slika 4.2: Načrt zaslonskih slik

29

5 IMPLEMENTACIJA APLIKACIJE

Za implementiranje načrtovane aplikacije smo uporabili več programov, knjižnic in orodij.

Predstavitev implementacije smo si zastavili tako, da bralcu v tem poglavju predstavimo

uporabljeno tehnologijo, v nadaljevanju predstavimo delovanje in izseke pomembnejše

kode, dodamo pa tudi, kje se prej opisana tehnologija pojavi.

5.1 Uporabljena tehnologija

5.1.1 Android Studio

Android Studio je uradno integrirano razvojno okolje (angl. »Integrated Development

Environment«) za razvoj Android aplikacij. Razvilo ga je podjetje Google, temelji pa na

JetBrainsovem razvojnem okolju IntelliJ. Na uradni strani Google Developers je

uporabnikom na voljo brezplačno za operacijske sisteme Windows, Mac in Linux [10].

Predogled programa je bil objavljen leta 2013, leto kasneje, decembra 2014, pa so objavili

prvo stabilno različico Android Studio 1.0. Trenutno je na voljo najnovejša različica 3.1.4, ki

je bila objavljena avgusta 2018.

Program vključuje orodja za vse faze razvijanja aplikacij. Vsebuje urejevalnik besedila, v

katerega lahko razvijalec piše kodo. Urejevalnik nudi hitro in učinkovito pisanje kode prek

vgrajenega samodejnega dokončanja stavkov za programske jezike Java, C/C++ in Kotlin. Za

urejanje videza aplikacije vsebuje vizualni urejevalnik postavitve aplikacije (angl. »Visual

layout editor«), kamor lahko razvijalec vizualno s funkcijo povleci in spusti (angl. »drag and

drop«) v postavitve vnaša elemente in jih pri tem poljubno razporeja, ob tem pa se

samodejno generira XML-koda. XML-kodo postavitve pa lahko razvijalec tudi piše sam oz.

spreminja samodejno generirano kodo iz vizualnega urejanja [2].

Ko ima razvijalec kodo enkrat napisano, jo lahko požene. S tem ima možnost kodo izvesti

na Android Emulatorju, ki je orodje, ki simulira Android naprave na računalniku [21], lahko

pa kodo izvede prek priključene Android naprave. Na izbrano napravo oz. emulator se pri

30

zaganjanju kode naloži APK (angl. »Android Package Kit«), ki je format, ki ga Android

uporablja za distribucijo in nalaganje aplikacij in vsebuje vse elemente, ki jih aplikacija

zahteva za pravilno nalaganje na naše Android naprave [22]. Če pri zaganjanju kode pride

do napake, lahko razvijalec uporabi orodje, imenovano razhroščevalnik (angl. »Debugger«).

Razhroščevalnik razvijalcu požene aplikacijo, pri čemer gre skozi program zelo počasi in se

zaustavi pri vsaki mejni vrednosti (angl. »breakpoint«), ki jo razvijalec nastavi. Za vsako

mejno vrednost pa sporoči tudi, kaj se na tisti vrstici kode dogaja.

Druga pomembnejša orodja, ki jih nudi Android Studio, so [2]:

• testiranja aplikacije prek JUnit testov,

• profiliranja uspešnosti aplikacije,

• publikacija aplikacije na Google Play.

Ko smo seznanjeni z delovanjem Android Studia, ustvarimo projekt. Ta nam sam ustvari več

pomembnejših datotek, ključnih za delovanje aplikacije. Med njimi so datoteke, kot so

Gradle, manifests, res, java. Druge datoteke, kot so javanske datoteke, slike, zvok, XML-

datoteke, pa uporabnik ustvari sam. Skupaj sestavljajo strukturo projekta. Na sliki 5.1 je

razvidna struktura projekta naše aplikacije.

Slika 5.1: Struktura projekta

31

V našem projektu smo javanske datoteke shranili v datoteko java. Da smo dosegli boljšo

preglednost, smo jih razdelili v več paketov. Ustvarili smo pakete, ki posebej hranijo

aktivnosti, adapterje, fragmente in razrede. V datoteko res pa smo shranili ostale vire

(datoteke in ostala vsebina), ki jih potrebuje koda za delovanje, kot so bitmap slike, XML-

postavitve, nizi, stili, meniji itd. [4].

V datoteki manifests imamo shranjeno datoteko AndroidManifest.xml. Datoteko

AndroidManifest.xml s točno tem imenom potrebuje vsaka aplikacija, ta datoteka namreč

opisuje vse potrebne informacije o aplikaciji. Med drugim pove naslov paketa aplikacije,

njene komponente, dovoljenja, ki jih uporablja in poda zahteve strojne in programske

opreme za izvajanje aplikacije [3].

V poglavju 5.1.1 smo že navedli, da Android sistem prevede in zgradi aplikacijske vire in

kodo ter jih združi v APK, ki ga lahko testiramo, podpišemo in distribuiramo. Android studio

za grajenje aplikacij uporablja Gradle, ki je napredno orodje za izgradnjo. Gradle torej

upravlja procese grajenja aplikacij [8].

Ko ustvarimo projekt, že imamo ustvarjene Gradle dokumente. Poznamo »top-level«

Gradle oz. Gradle na ravni projekta in Gradle datoteko na aplikacijski ravni. Gradle na ravni

projekta nam definira konfiguracije izgradnje, ki veljajo za vse module v projektu [8].

Build Gradle datoteka na aplikacijski ravni je razvidna s slike 5.2. Ta build.gradle nam

omogoča konfiguracijo gradnje za specifični modul [8]. Prva vrstica nam pove, da za ta

modul velja enak vtičnik, kot smo ga definirali v Gradle datoteki najvišje ravni. V blok

Android pa smo nastavili vse specifične možnosti gradnje, kot so applicationId,

midSdkVersion itd. V bloku dependencies pa so navedene vse knjižnice, uporabljene v tej

aplikaciji [7].

32

Slika 5.2: Gradle na aplikacijskem nivoju

5.1.2 Firebase

Firebase je platforma, ki se je leta 2014 priključila podjetju Google. Razvijalcem ponuja BaaS

(angl. »Backend – as – a – service«). Podpira iOS, Android, Unity, C++ in spletne aplikacije

[23]. Navedenim pa nudi vrsto orodij, ki pomagajo pri gradnji in upravljanju aplikacij.

33

Koristna orodja, kot so preverjanje pristnosti, baza v realnem času, skladišče, spremljanje

uspešnosti in druge, so razvijalcem za začetne aplikacije na voljo zastonj, ko aplikacija zraste

in postane bolj zahtevna, pa imajo na voljo nadgraditev v plačljivo različico.

V naši aplikaciji smo uporabili preverjanje pristnosti in bazo v realnem času, zato ju bomo

tudi podrobneje opisali.

Preverjanje pristnosti (Firebase Authentication)

Firebase Authentication zagotavlja »back-end« storitve, SKD-je in ostalo potrebno

tehnologijo, ki razvijalcem omogoča preverjanje pristnosti uporabnikov, ki se registrirajo v

aplikacijo. Ponuja preverjanje pristnosti prek gesel, telefonskih številk, Google računa,

Facebook računa in Twitter računa. Omogočena je enostavna povezava na druge Firebase

storitve, temelji pa na industrijskih standardih, kot sta OAuth 2.0 in OpenID Connect [11].

Spletna konzola Firebase Authenticationa je vidna na sliki 5.3.

Slika 5.3: Konzola Firebase Authentication

Authentication deluje tako, da ko se uporabnik prijavi v aplikacijo, najprej pridobimo

njegove poverilnice (angl. »credentials«). Te poverilnice so lahko uporabnikov e-poštni

račun in geslo ali OAuth token od drugih ponudnikov identitet, kot sta Google in Facebook.

Poverilnice se nato prenesejo v Firebase Authentication SDK, kjer se v ozadju preverijo,

odjemalcu pa vrnejo odgovor. Po uspešni prijavi imamo dostop do uporabnikovih osnovnih

informacij [11].

34

Aplikacijo smo najprej povezali s Firebaseom, tako da smo na Firebase spletni konzoli dodali

naš projekt. Ko je bil projekt prijavljen, smo mu lahko dodali Firebase Authentication. Nato

smo vključili potrebne knjižnice v Gradle aplikacijske ravni. Nato smo na konzoli izbrali

želene načine vpisa. Za našo aplikacijo se nam je zdel dovolj vpis prek Facebook računa,

prek Googla ter e-pošte in gesla.

Delovanje registracije in prijave lahko vidimo na sliki 5.4.

Slika 5.4: Delovanje prijave

Registracijo smo implemetirali tako, da najprej deklariramo FirebaseAuth spremenljivko

mAuth. Nato v onClickListenerju za gumb potrdi, ki uporabnika registrira ustvarimo vmesne

nize, vanje zabeležimo vpisana polja in jih validiramo. Če je validacija uspešna, na koncu

kličemo metodo »ustvariRacun« in ji pošljemo parametra »email« in »geslo«. Metoda

»ustvariRacun« kliče funkcijo spremenljivke FirebaseAuth, ki s funkcijo

createUserWithEmailAndPassword ustvari novi račun v aplikaciji. To je vidno na sliki 5.5.

35

Slika 5.5: Metoda ustvariRacun

Po končani registraciji se lahko uporabnik v aplikacijo prijavi. To stori tako, da vpiše e-pošto

in geslo ter klikne na gumb »Potrdi«. Ko uporabnik potrdi prijavo, najprej izvedemo

validacijo, ki preveri, ali so vsa polja izpolnjena. Če je validacija uspešna, kličemo metodo

prijava in ji pošljemo »email« in »geslo« kot parametra. Metodo prijava lahko vidimo na

sliki 5.6, kjer na začetku opazimo, da spet uporabljamo spremenljivko »mAuth«, ki kliče

posebno funkcijo signInWithEmailAndPassword, ki izvede prijavo.

Ker želimo uporabnike hraniti v bazo, dodamo kodo, ki se izvede, če se uporabnik v

aplikacijo prijavlja prvič. Najprej pridobimo informacije o uporabniku prek spremenljivke

FirebaseUser. Nato izdelamo vmesne nize, ki hranijo informacije o e-pošti, ID-ju in

ponudniku trenutnega uporabnika (to so Google, Facebook ali Firebase). Za vpis v bazo

potrebujemo referenco baze, ki jo shranimo v spremenljivki »referencaBaze« tipa

DatabaseReference. Za sprehod po bazi uporabimo funkcijo .child(). V tem primeru

moramo .child() uporabiti dvakrat, saj prvič z njo skočimo v vozlišče »Uporabniki«, nato pa

jo kličemo še enkrat, da pridemo do vozlišča, ki je enako ID-ju trenutnega uporabnika. Na

koncu dodamo addListenerForSingleValueEvent, ki izvede povpraševanje referenceBaze.

Za rezultat dobimo dataSnapshot, ki hrani vrednosti, ki smo jih pravkar pridobili iz baze. Ker

se ta uporabnik vpisuje prvič, svojega zapisa v bazi še nima in zato ta dataSnapshot ne

obstaja. Zato se izvede »else« stavek, ki v razred »Uporabnik« zabeleži osnovne informacije

o uporabniku. Na koncu kličemo spremenljivko referencaBaze in ji na vozlišču »Uporabniki«

36

ustvarimo novo vozlišče, ki ima naslov vozlišča enak ID-ju uporabnika, vsebuje pa vse

informacije, ki smo jih nastavili v razredu »Uporabnik«. To pa smo storili s funkcijo

.setValue(user).

Slika 5.6: Prijava uporabnika in zapis v bazo ob prvi prijavi

Prijavo z Google in Facebook računom implementiramo na podoben način, le da tam

namesto e-naslova in gesla v funkcije FirebaseAutha vpišemo poverilnico, t. i. token. Token

najprej pridobimo in ga pozneje podamo v funkcijo signInWithCredential.

V aplikacijo pa smo dodali tudi možnost prošnje za spremembo gesla, kjer uporabimo

FirebaseAuth funkcijo sendPasswordResetEmail, ki na uporabnikov e-pošto pošlje formo za

spremembo gesla.

37

Podatkovna baza v realnem času

Za bazo aplikacije smo izbrali Firebaseovo podatkovno bazo v realnem času, ki je shranjena

v oblaku [12]. To je baza, ki ima vrednosti shranjene v obliki datoteke JSON, dostopna pa je

prek spletne konzole Firebase. Za to bazo smo se odločili, ker je novejša, podprta s strani

Android Studia, je enostavna za uporabo in deluje v realnem času. Delovanje v realnem

času pa omogoči, da se podatki vedno, ko se spremenijo, posodobijo tudi na vseh povezanih

napravah [12]. Slabost baze pa je v omejenem povpraševanju po elementih. Baza namreč

spada med NoSQL (angl. »Not only SQL«) podatkovne baze, za njih pa je značilno, da za

razliko od SQL podatkovnih baz ne temeljijo na relacijah med elementi. Posledično

povpraševanje ne podpira klicev, kot je JOIN v SQL podatkovnih bazah, zato pa razvijalce

prisili v izdelavo bolj ravne in poenostavljene baze.

Bazo smo implementirali tako, da smo aplikacijo najprej povezali s podatkovno bazo v

realnem času na Firebase konzoli. Želeli smo ustvariti tri glavna vozlišča, in sicer Uporabniki,

Kviz in Poglavja. Za vsako izmed vozlišč smo v projektu ustvarili svoj javanski razred z

ustreznimi podatki. Na sliki 5.7 je primer razreda PoglavjaClass, ki ima deklarirana samo dva

niza, ki sta teorija in yt.

Slika 5.7: Razred PoglavjaClass

38

S pomočjo funkcij pisanja in branja iz baze smo kasneje podatke prenašali med aplikacijo in

podatkovno bazo. Določene podatke, kot sta vozlišči »Kviz« in »Poglavja«, pa smo prek

konzole naravnost vnesli v bazo. To smo storili zato, ker so podatki statični in prikazujejo le

vsebino, ki se ne spreminja.

V bazi imamo tudi vozlišče »Uporabniki«, ki pa predstavljajo registrirane uporabnike na naši

aplikaciji. Uporabnike zapišemo v bazo takoj, ko se prvič prijavijo v aplikacijo prek Google,

Facebook ali e-poštnega računa. Podatki se v bazo vpišejo pod vozliščem »Uporabniki«

tako, da se kot otrok vozlišča »Uporabnik« shrani ID uporabnika, ki ga dobimo prek Firebase

Authenticationa, pod njim pa se shranijo vsi ostali podatki. Podrobneje smo potek zapisa v

bazo že opisali v predstavitvi preverjanja pristnosti.

Na sliki 5.8 imamo odprta vsa tri glavna vozlišča iz naše podatkovne baze. Vidimo pa tudi

vse podatke, ki jih posamezno vozlišče hrani.

Slika 5.8: Vozlišča in elementi podatkovne baze

39

5.1.3 Knjižnica Picasso

Picasso je knjižnica, ki smo jo uporabili, da smo v elemente ImageView naložili slike. Ta

knjižnica nam namreč omogoča, da enostavno prek ene vrstice kode pridobimo pot do slike

in jo naložimo v ustrezen element. V naši aplikaciji smo Picasso uporabili za prikaz slike v

aktivnosti »Lestvica« in v navigacijskem predalu za prikaz prijavljenega uporabnika. Primer

kode knjižnice lahko vidimo na sliki 5.9, kjer smo najprej v IF-stavku pregledali, če je

uporabnik prijavljen, če je vpisan prek Google, Facebook ali e-poštnega računa, nato pa

smo mu glede na tip prijave naložili ustrezno sliko.

Slika 5.9: Uporaba knjižnice Picasso

5.1.4 Knjižnica YouTube Android Player API

Ta knjižnica nam omogoča vpeljavo YouTube posnetkov v našo aplikacijo.

40

Najprej smo v Gradle na aplikacijski ravni dodali povezavo do knjižnice. Nato smo prek

Google Credentials ustvarili poverilnico, ki nam je generirala API ključ. Pridobljen ključ smo

deklarirali znotraj razreda (slika 5.10).

Slika 5.10: Deklaracija API ključa in ostalih spremenljivk

Sledila pa je še implementacija kode (slika 5.11), ki najprej ustvari novo instanco fragmenta

YouTubePlayerSupportFragment in ga zamenja z elementom FrameLayout v postavitvi

aktivnosti. Ko se YouTubePlayerSupportFragment uspešno ustvari, se naloži video, ki ga

pridobimo iz baze in ga prenesemo v niz ytStr. Niz ytStr pa mora vsebovati zadnji niz znakov

povezave do YouTube posnetka, kot je vidno na sliki 5.12.

Slika 5.11: Implementiranje YouTube videoposnetka

41

Slika 5.12: Ustrezni niz za nalaganje videoposnetka

5.2 Ključne funkcionalnosti

Z izdelanimi diagrami ter modeli, ustvarjenim projektom, pripravljeno podatkovno bazo in

avtorizacijo vpisa smo začeli s pisanjem kode. Glavne funkcionalnosti, ki smo jih razvili, so

enake tistim, ki smo jih navedli v diagramu primera uporabe v poglavju 4.2, in sicer:

• Predstavitev teme osnov programiranja prek besedila, videoposnetka in slike,

• kviz za napredovanje po temah,

• igra Kviz, kjer ima uporabnik omejen čas reševanja, točke pa se seštevajo,

• lestvica igre Kviz.

V tem podpoglavju bomo predstavili in opisali pomembne izseke kode iz aplikacij in dodali

zaslonske slike delovanja aplikacije.

5.2.1 Predstavitev učne vsebine

Za prikaz učne vsebine smo uporabili TabLayout s tremi zavihki. Zavihki prikazujejo besedilo

teorije, YouTube videoposnetek in sliko primera. Da dobimo podatke za želeno poglavje

učne vsebine, smo iz prejšnje aktivnosti prek Intenta prenesli niz z naslovom poglavja.

Podatke o besedilu, videoposnetku pridobimo iz baze tako, kot smo to storili pri prijavi, le

da se v referenci baze premaknemo na prvo vozlišče z naslovom »Poglavja« in nato na

naslednje vozlišče, ki je enako nizu naslova poglavja, pridobljenega prek Intenta. Sliko

primera pa pridobimo iz mape drawable, od koder se slika izbere glede na naslov poglavja.

Vsak zavihek prikazuje svojo postavitev, premikanje med postavitvami pa smo dosegli z

42

implementacijo ViewPagerja. ViewPager nam omogoča dejansko drsenje po postavitvah.

Postavitev (angl. »layout«) je vidna na sliki 5.13.

Slika 5.13: Postavitev aktivnosti Poglavje

Za prikazovanje različnih pogledov smo uporabili fragmente in adapter, ki vsebuje metodo,

ki dodaja fragmente. Koda je vidna na slikah 5.14 in 5.15.

Slika 5.14: Dodajanje fragmentov in pomikanje po bazi

43

Slika 5.15: Adapter za dodajanje fragmentov

Na spodnji sliki lahko vidimo delovanje predstavitve učnih vsebin v delujoči aplikaciji. Prva

zaslonska slika predstavlja seznam vseh poglavij. Na sliki ima uporabnik dokončani dve

poglavji, naslednje poglavje na vrsti je »Uporabniški vnos«, ostala poglavja pa so za zdaj še

zaklenjena. Na drugo zaslonsko sliko je uporabnik prišel s klikom na »Spremenljivke v

seznamu«. Najprej mu je prikazana teorija spremenljivk. S kretnjo od leve proti desni ima

možnost navigacije do YouTube videoposnetka. Na koncu pa imamo še primer programa,

predstavljenega v obliki slike. Pod njim je gumb, ki uporabnika pelje na kviz poglavja.

44

Slika 5.16: Delovanje predstavitve učnih vsebin

5.2.2 Kviz na koncu vsake učne vsebine in igra Kviz

V naši aplikaciji smo veliko pozornosti namenili izdelavi kviza, saj je ključen del vsake

izobraževalne aplikacije. Kviz smo razdelili na dva dela, na kviz, ki je uporabniku zastavljen

na koncu vsake učne vsebine, in na igro Kviz. Prvi uporabniku omogoča nadaljevanje po

učni vsebini, saj je pogoj za dostop do nadaljnjih vsebin. Oba smo implementirali na

podoben način, tako da bomo najprej podrobno opisali prvi kviz, pri igri Kviz pa bomo le

opisali izseke kode, kjer se razlikujeta.

V kvizu v onCreate metodi (slika 5.17) prek intenta pridobimo spremenljivko z naslovom

učne vsebine, deklariramo število i, ki je enako 0, in kličemo metodo sestaviKviz().

45

Slika 5.17: OnCreate metoda aktivnosti Kviz

V metodi »sestavi kviz« (slika 5.18) najprej deklariramo referenco baze in s funkcijo .child()

skočimo v vozlišče Kviz, nato še enkrat v vozlišče, ki je enako spremenljivki z naslovom

»učne vsebine«, in nazadnje v vozlišče, ki je enako številu spremenljivke i. S tem imamo

referenco baze, zato lahko zdaj kličemo addListenerForSingleValueEvent, ki vrača

DataSnapshot z vsebino baze. Prva stvar, ki jo naredimo, je to, da povečamo število i za 1,

saj želimo, da se naslednjič, ko kličemo metodo sestaviKviz(), v bazi pomaknemo na

naslednje vozlišče. Nato preverimo, ali je vsebina baze prazna, če ni, v razred KvizClass

vstavimo vrednosti iz spremenljivke tipa DataSnapshot. Nato ustvarimo vmesne nize, ki

hranijo vrednosti, ki jih dobimo iz get metod razreda KvizClass. Ena izmed vmesnih

spremenljivk hrani podatek, kakšen je tip kviza, ki smo ga prebrali iz baze. Tip kviza ima

lahko le dve vrednosti: zaprti ali odprti. Glede na tip kviza pa s pomočjo

FragmentManagerja izvedemo transakcijo, ki zamenja element v postavitvi R.id.layout_Vec

s fragmentom, ki je narejen za določen tip kviza. Ta koda nam pomaga, da na eni aktivnosti

prikažemo različne poglede.

46

Slika 5.18: Prvi del metode sestaviKviz

Postavitev aktivnosti je sestavljena iz dveh delov (slika 5.19). V zgornjem delu shranimo

vprašanje kviza, spodnji del z ID-jem R.id.layout_Vec pa je prostor za odgovore. Ker lahko

imamo odprti in zaprti tip odgovorov, pa pogleda ločimo prek fragmentov. Oba fragmenta

iz aktivnosti Kviz pridobita podatke o odgovorih, ki so bili prenešeni iz baze, in jih shranita

v ustrezne nize v svoji kodi. Razlika med njima pa je v tem, da fragment z odprtim tipom

vprašanj uporabniku nudi polje »EditText«, kamor lahko vpiše odgovor. Odgovor se preveri

tako, da vzamemo uporabnikov odgovor in ga primerjamo s tistim, ki smo ga dobili iz

aktivnosti Kviz. Pri zaprtem tipu kviza pa fragment prikaže štiri gumbe. Vsak gumb ima svoje

besedilo in le en odgovor je pravilen. Klik na posamezen gumb preveri, če je besedilo gumba

enako pravilnemu odgovoru iz baze. Pri obeh fragmentih pa v primeru pravilnega odgovora

uporabniku izpišemo AlertView z besedilom »Pravilno«, zraven pa s pomočjo MediaPlayer-

ja in glasovne datoteke, shranjene v mapi raw, zaigramo zvok. Ob nepravilnem odgovoru

pa uporabimo funkcijo »Vibrator«, ki sproži vibracije telefona, obenem pa besedilo

obarvamo z rdečo barvo in s tem nakažemo napako.

47

Slika 5.19: Postavitev aktivnosti Kviz

V drugem delu metode, ki sestavi kviz (slika 5.20), pa se izvede drugi del IF-stavka. Prek IF-

stavka ugotovimo, da je bil DataSnapshot v metodi »sestaviKviz«, ki smo ga pridobili iz baze,

prazen (kar se zgodi, ko uporabnik odgovori na vseh pet vprašanj kviza), kviz se zaključi in

sproži se AlertDialog, ki uporabniku pove, na koliko izmed vprašanj je pravilno odgovoril in

ali lahko s tem rezultatom zaključi učno vsebino. Točke, ki jih je uporabnik dosegel, so se

skozi delovanje kviza seštevale s pomočjo metode tockovanje() v aktivnosti Kviz, ki sprejme

niz, ki v primeru, da je enak nizu »Pravilen«, zviša spremenljivko »tocka« za 1. Ta

spremenljivka pa predstavlja rezultat, ki se uporabniku izpiše na zaslonu. V primeru, da

uporabnik zbere štiri točke ali več, nastavimo referenco baze, ki se nahaja na vozlišču

»Uporabniki« in vozlišču z ID-jem trenutnega uporabnika. Temu uporabniku s funkcijo

setValue() nastavimo tečaj, ki smo ga opravili, na vrednost »true«. To pa nam omogoči, da

v aktivnosti SeznamPoglavij, ki je namenjena izbiri učne vsebine, odpremo naslednjo

poglavje, opravljenemu pa spremenimo slikico, ki ponazarja, da je kviz uspešno zaključen.

48

Slika 5.20: Drugi del metode sestaviKviz

Na spodnji sliki je prikazano delovanje kviza na koncu poglavij učnih vsebin.

49

Slika 5.21: Delovanje aktivnosti Kviz

Igra Kviz se od aktivnosti Kviz razlikuje v tem, da ni povezana z drugimi aktivnostmi, do nje

lahko dostopamo naravnost iz navigacijskega predala, uporabnik ima za reševanje na voljo

60 sekund, vprašanja pa pridobivamo iz celotne baze – torej, igra Kviz ni vezana na

posamezno poglavje.

V aktivnosti deklariramo število »casInt«, ki je enako 60. To nam v kodi ponazarja 60

sekund. Ustvarimo metodo timer() (slika 5.22) in vanjo vključimo novo funkcijo Timer.

Znotraj Timerja nastavimo, da se pri vsakem izvajanju kode »casInt« zmanjša za 1. Nato

Timer nastavimo tako, da se koda izvede vsako sekundo, s tem pa dosežemo, da se vsako

sekundo število »casInt« zniža za 1. Ko pride »casInt« do 0, se koda zaključi in na zaslonu

se uporabniku izpiše AlertDialog, ki sporoči dosežene točke. Poleg dialoga pa se kliče tudi

metoda konecKviza(), ki pridobi informacije o trenutnem uporabniku, nastavi referenco

baze na »Uporabniki« in ID trenutnega uporabnika ter zažene povpraševanje. Iz

DataSnapshota pridobimo vrednosti iz baze in jih shranimo v razred »Uporabnik«. Nato iz

razreda s pomočjo metode get pridobimo število točk in preverimo, ali so trenutno

dosežene točke višje kot tiste v bazi. Če je odgovor da, v bazo k temu uporabniku nastavimo

vrednost novih točk.

50

Slika 5.22: Metoda timer

Na spodnji sliki je prikazano delovanje igre Kviz.

Slika 5.23: Delovanje igre Kviz

51

5.2.3 Lestvica

Za implementacijo lestvice smo uporabili RecyclerView, ki je sestavljen iz seznama, ki smo

ga prek adapterja polnili z ustreznimi podatki. Tega smo se lotili tako, da smo najprej

ustvarili postavitev aktivnosti, kamor smo postavili element RecyclerView, nato pa smo še

ustvarili ločeno postavitev z elementom CardView, ki nam predstavlja vsak posamezen

element seznama. V drevesu komponent na sliki 5.24 opazimo, da imamo v LinearLayout-

u postavljen CardView, znotraj njega pa imamo prostor za uporabnikovo sliko (ImageView),

polje za e-naslov ter prikaz števila točk.

Slika 5.24: CardView v lestvici

S pripravljenimi postavitvami smo nato v metodi onCreate aktivnosti »Lestvica« deklarirali

spremenljivki RecyclerView in LinearLayoutManager (slika 5.25), ki nam postavi elemente

seznama v enodimenzionalen seznam [ 31].

52

Slika 5.25: Dekleracija RecyclerView-a in LinearLayoutManager-ja

Še vedno smo ostali v metodi onCreate, izsek kode je viden na sliki 5.26. Ustvarimo

ArrayList, kamor bomo shranjevali uporabnike. Naša naslednja zahteva je, da iz baze

pridobimo vse uporabnike. To spet storimo prek spremenljivke DatabaseReference in se s

funkcijo .child() pomaknemo v vozlišče baze z naslovom »Uporabniki«. Povpraševanje

zaženemo s pomočjo funkcije addListenerForSingleValueEvent in če imamo v bazi

registrirane uporabnike, se nam ti zapišejo v spremenljivko DataSnapshot. Nato v zanki for

ustvarimo objekt razreda »Uporabnik« in v njega shranimo podatke iz spremenljivke

DataSnapshot. Na koncu zanke v ustvarjeni ArrayList dodamo ustvarjeni objekt s podatki.

Za konec pa prek funkcije Collections.sort in Comparator sortiramo ArrayList z uporabniki

po točkah v padajočem vrstnem redu. Poleg tega pa ustvarimo novi adapter, poimenovan

LestvicaAdapter, in mu kot parameter pošljemo kontekst aktivnosti »Lestvica« in ArrayList

z uporabniki.

53

Slika 5.26: Izsek kode, kjer napolnimo ArrayList in kličemo adapter

Adapter uporabljamo, da prek njega napolnimo RecyclerView z ustreznimi podatki. Najprej

v ViewHolderju, ki opisuje element pogleda in podatke o njegovem mestu znotraj

RecyclerViewa [19], deklariramo elemente postavitve. V adapterju nato pridobimo

kontekst aktivnosti »Lestvica« in ArrayList z uporabniki. Nato v metodi

onCreateViewHolder s pomočjo LayoutInflaterja ustvarimo novi View. Nato z metodo

onBindViewHolder združimo ViewHolder z ustreznimi podatki o uporabnikih glede na

pozicijo ViewHolderja znotraj RecyclerViewa. Podatki, ki se shranijo v ViewHolder, so e-

naslov uporabnika, število točk, ki jih je dosegel, zaporedna številka na lestvici in njegova

profilna slika. Vsi ti podatki se shranijo v elemente, ki jih vidimo na sliki 5.24. CardView z

vsemi elementi pa se shrani v posamezen zaporeden element seznama RecyclerView v

aktivnosti Lestvica. Izsek kode adapterja je viden na sliki 5.27 in 5.28.

54

Slika 5.27: Izsek kode lestvicaAdapter

Slika 5.28: Metoda onBindViewHolder v razredu lestvicaAdapter

55

Delovanje lestvice v aplikaciji je prikazano na naslednji sliki.

Slika 5.29: Delovanje lestvice

5.3 Možne izboljšave aplikacije

Kljub temu da je aplikacija dokončana in delujoča, vedno obstaja možnost izboljšave. Glavni

problem aplikacije je v tem, da ko uporabnik obdela vse učne vsebine, poleg igre Kviz nima

motivacije za obisk aplikacije. Zato bi bilo treba implementirati funkcionalnosti, ki so trajne,

uporabniku prinašajo novo vsebino in nove izzive. To bi lahko dosegli z vključitvijo foruma,

uporabniško sestavljenih kvizov, prav tako pa bi lahko še izboljšali ključne funkcionalnosti

kviza. Za zaslužek pa bi lahko vključili objavo oglasov.

5.3.1 Forum

Tako kot večina obstoječih aplikacij, ki smo jih predstavili v tretjem poglavju, bi lahko tudi

v našo aplikacijo vključili forum. Forum bi uporabnikom omogočil dialog z drugimi

56

uporabniki, postavljanje vprašanj, iskanje pomoči in reševanje različnih problemov, na

katere bi uporabniki naleteli.

Implementirali bi ga tako, da bi v TabLayout dodali dva zavihka. V prvem bi bili prispevki

trenutno vpisanega uporabnika. Ta bi lahko svoje prispevke urejal in jih izbrisal. V drugem

pa bi imeli shranjene prispevke vseh uporabnikov. Vsak posamezen prispevek bi prikazali

kot element seznama RecyclerView. Znotraj elementa bi imeli CardView s poljem za naslov,

datum in e-naslov uporabnika. Na levi strani CardViewa pa bi imeli dva gumba za

ocenjevanje, med njima pa bi bilo polje s seštetimi ocenami.

Ko bi uporabnik kliknil na prispevek, bi se mu prikazalo vprašanje, pod njim pa bi bili v

seznamu prikazani vsi odgovori. Tudi odgovori bi imeli vključeno ocenjevanje, saj bi tako

uporabnikom najlažje prikazali dober in slab odgovor. Zamisel foruma je prikazana na

zaslonskih slikah na sliki 5.30.

Slika 5.30: Primer načrta za forum

57

5.3.2 Kvizi uporabnikov

Z možnostjo uporabniško sestavljenih kvizov bi uporabnike dlje časa zadržali na aplikaciji,

saj bi imeli možnost sami ustvariti kvize ali reševati kvize, ki bi jih ustvarili drugi uporabniki.

To bi pomenilo, da bi bila vsebina v aplikaciji vedno sveža. Uporabnik bi imel z vsakim

kvizom nove izzive in nove možnosti učenja.

Funkcionalnost bi lahko implementirali tako, da bi ustvarili aktivnost s postavitvijo, ki nam

prikazuje seznam vseh sestavljenih kvizov. Vsak uporabnik, ki konča tečaj Jave znotraj naše

aplikacije, bi imel možnost ustvarjanja kviza. Najprej bi kviz moral poimenovati in mu

določiti stopnjo težavnosti. Izbiral bi lahko med naslednjimi težavnostmi: »Začetnik«,

»Poznavalec«, »Strokovnjak«. Nato bi vključil poljubna vprašanja iz programiranja v Javi.

Uporabniki bi lahko kvize reševali in jih ocenjevali. Ocene se nam zdijo pomembne, saj kljub

temu da bi omejili ustvarjanje kvizov na uporabnike, ki so uspešno končali naš tečaj, ne

moremo trditi, da v kvizih ne bo prišlo do napak. Z ocenjevanjem pa bi lahko ostali

uporabniki sami filtrirali med dobrimi in slabimi kvizi. Lahko bi dodali funkcionalnost, kjer

bi aplikacija kviz, ki je bil slabo sestavljen in ki ima 10 negativnih ocen od ostalih

uporabnikov, avtomatsko izbrisala. S tem pa bi dosegli, da so kvizi, ki so na voljo

uporabnikom, brez napak in da so dobro sestavljeni. Zamisel načrta je prikazana na sliki

5.31.

58

Slika 5.31: Primer načrta za uporabniški kviz

5.3.3 Dodatne funkcionalnosti kvizov

Trenutni kviz deluje tako, da uporabnikom postavlja vprašanja, na katera morajo

odgovoriti. Če odgovorijo pravilno, se sproži potrdilni zvok in AlertDialog ter se postavi

naslednje vprašanje. Za nepravilne odgovore pa se sprožijo vibracije telefona, odgovor pa

se obarva rdeče. Poleg tega bi lahko za nepravilni odgovor implementirali »življenja«.

Predstavljena bi bila s slikami srčkov na zaslonu. Z implementacijo življenj bi prekinili kviz,

ki ga uporabnik zelo slabo rešuje, in uporabniku omogočili, da pred nadaljevanjem še enkrat

prebere vso učno vsebino. Na začetku kviza bi nastavili tri življenja. Vsak nepravilni odgovor

pa bi odbil eno življenje, kar bi prikazali na zaslonu tako, da bi en srček obarvali s sivo barvo.

Ko bi uporabnik izgubil vsa tri življenja, bi se kviz avtomatsko zaključil.

Da kviz vseeno malo olajšamo, pa bi dodali še funkcionalnost »Namig«. Prek gumba z

metodo onClick bi uporabnik lahko s klikom na gumb prejel namig, ki bi ga napeljal na

pravilni odgovor. Za vsak sklop kvizov bi omejili funkcijo namig na eno uporabo. S tem pa

bi onemogočili izkoriščanje namiga za vsako vprašanje. Zamisel načrta je vidna na sliki 5.32.

59

Slika 5.32: Primer načrta izboljšanja kviza

60

6 SKLEP

Skozi izdelavo naloge smo se podrobneje seznanili z izobraževalno tehnologijo, Android

mobilnimi aplikacijami in izdelovanjem Android aplikacij.

Najprej smo predstavili izobraževalne tehnologije, nato pa smo raziskali in predstavili

aplikacije za učenje programiranja, ki so že na trgu. Namen raziskave je bil ugotoviti, kako

so takšne aplikacije sestavljene in kaj so glavne značilnosti, ki se ponavljajo v vseh

aplikacijah. Ugotovili smo, da je takšnih aplikacij veliko, zato smo se odločili analizirati le

pet najbolj priljubljenih. Opazili smo, da obstajajo skupne značilnosti, ki se ponavljajo v teh

aplikacijah, to so: uporaba igrifikacije, oblačnih storitev, monetizacije in možnosti

povezovanja uporabnikov z drugimi uporabniki.

Problem predstavitve učenja osnov programiranja začetnikom smo rešili z implementacijo

aplikacije za učenje osnov programiranja, ki je bila osrednja tema diplomskega dela.

Zastavili smo si, da mora biti aplikacija enostavna za uporabo, snov pa prikazana na

poenostavljen način, kar smo v aplikaciji tudi implementirali.

Za razvoj in načrtovanje aplikacije smo uporabili tako orodja, ki smo jih spoznali v času

študija, kot tudi orodja, ki jih sami do sedaj še nismo uporabljali. Preden smo se lotili

implementacije, smo izdelali diagram primera uporabe in diagram zaslonskih slik. Za

diagram primera uporabe smo uporabili spletno orodje draw.io, za zaslonske slike pa smo

našli novejšo rešitev Figma. Med izdelovanjem aplikacije smo uporabili nam že znano

razvijalno okolje Android Studio, kjer smo pisali javansko in xml-kodo, nato pa smo se

preizkusili še z delom z elementi, kot sta RecyclerView in TabLayout, ki jih v prejšnjih

projektih nismo uporabili. Spoznali smo tudi platformo Firebase, na kateri smo delali prvič.

Tu smo izdelali bazo in omogočili vpis v aplikacijo. Pri poročilu razvoja aplikacije pa smo za

konec navedli možne izboljšave in jih tudi predstavili s pomočjo zaslonskih slik, izdelanih v

prej omenjenem orodju Figma.

Poleg izdelave aplikacije nam je bilo v izziv tudi pisanje teorije in poročila, saj smo prvič

pisali izdelek v takšnem obsegu.

61

VIRI IN LITERATURA

[1] Advantages and Disadvantages of SaaS, PaaS and IaaS. Dostopno na:

http://aiasecurity.com/2015/09/10/advantages-and-disadvantages-of-saaspaas-

and-iaas/ [21. 7. 2018].

[2] Android Studio. Dostopno na: https://developer.android.com/studio/ [20. 8.

2018].

[3] App Manifest Overview. Dostopno na:

https://developer.android.com/guide/topics/manifest/manifest-intro [20. 8.

2018].

[4] App resources overview. Dostopno na:

https://developer.android.com/guide/topics/resources/providing-resources [20.

8. 2018].

[5] Araújo, I., Carvalho, A. Empowering teachers to apply gamification. 2017

International Symposium on Computers in Education (SIIE), (2017), str. 1–5.

[6] Bijnens, M., Vanbuel, M., Verstegen, S., Young, C. (ur.). Handbook on digital video

and audio in education: Creating and using audio and video material for

educational purposes. The VideoAktiv Project.

[7] Building Android Apps. Dostopno na: https://guides.gradle.org/building-android-

apps/?_ga=2.103541440.1723201750.1534009659-1541782533.1534009659 [20.

8. 2018].

[8] Configure your build. Dostopno na: https://developer.android.com/studio/build/

[20. 8. 2018].

[9] DLF Teaching Development Team. Using audio and video for educational

purposes. Deakin University, 2014. Dostopno na:

http://www.deakin.edu.au/__data/assets/pdf_file/0003/179013/Modules_1-

62

4_Using_audio_and_video_for_educational_purposes-2014-02-28.pdf [21. 7.

2018].

[10] Eason, J. Android Studio 1.0. Dostopno na: https://android-

developers.googleblog.com/2014/12/android-studio-10.html [20. 8. 2018].

[11] Firebase Authentication. Dostopno na: https://firebase.google.com/docs/auth/

[20. 8. 2018].

[12] Firebase Realtime Database. Dostopno na:

https://firebase.google.com/docs/database/ [20. 8. 2018].

[13] Kemp, S. Digital in 2018: world's internet users pass the 4 billion mark. Dostopno

na: https://wearesocial.com/blog/2018/01/global-digital-report-2018 [21. 7.

2018].

[14] Kumar, J. Managing Pharmaceutical Regulatory Compliance through Smart

Knowledge Management Systems. International Journal of Scientific and Research

Publications, 4, (2014), 8, str. 1–5.

[15] Kuo, M., Chuang, T., Yang, J., Tao, S. Designing a Digital Gamification Platform to

Support Classroom Management. 6th IIAI International Congress on Advanced

Applied Informatics, (2017), str. 548–551.

[16] Mane, D., Sawant, P. SaaS in Education System. Imperial Journal of

Interdisciplinary Research (IJIR), Vol–2, (2016), 8, str. 889–891.

[17] Morell, C. Udacity Nanodegree Reviews: Your Questions Answered. Dostopno na:

https://blog.udacity.com/2015/03/udacity-nanodegree-reviews-your-questions-

answered.html [21. 7. 2018].

[18] Poe, M., Stassen, M. (ur.). Teaching and learning online: Communication,

community and Assessment: a handbook for UMass faculty. Massachusetts:

Amherst, Mass: University of Massachusetts, S.D.

63

[19] RecyclerView.ViewHolder. Dostopno na:

https://developer.android.com/reference/android/support/v7/widget/RecyclerVi

ew.ViewHolder [20. 8. 2018].

[20] Rouse, M. Software as a Service (SaaS). Dostopno na:

https://searchcloudcomputing.techtarget.com/definition/Software-as-a-Service

[21. 7. 2018].

[21] Run apps on the Android Emulator. Dostopno na:

https://developer.android.com/studio/run/emulator [20. 8. 2018].

[22] Stegner, B. What Is an APK File and What Does It Do. Dostopno na:

https://www.makeuseof.com/tag/what-is-apk-file/ [20. 8. 2018].

[23] Tamplin, J. Firebase expands to become a unified app platform. Dostopno na:

https://firebase.googleblog.com/2016/05/firebase-expands-to-become-unified-

app-platform.html [20. 8. 2018].

[24] The Complete Guide to Mobile App Monetization. Dostopno na:

https://www.mobiloud.com/blog/app-monetization/ [20. 8. 2018].

[25] Treehouse: 2016 Press Kit. Dostopno na: http://treehouse-

marketing.s3.amazonaws.com/press-kit/Treehouse-PressKit.pdf [21. 7. 2018].

[26] What is a Learning Content Management System (LCMS). Dostopno na:

https://www.xyleme.com/what-is-a-learning-content-management-system-lcms/

[20. 8. 2018].

[27] What is an LMS?. Dostopno na: https://www.mindflash.com/learning-

management-systems/what-is-an-lms [21. 7. 2018].

[28] What is Use Case Diagram. Dostopno na: https://www.visual-

paradigm.com/guide/uml-unified-modeling-language/what-is-use-case-diagram/

[20. 8. 2018].