APLIKA IJA ZA UČENJE OSNOV PROGRAMIRANJAtheir common features. Then, during the design, we created...
Transcript of APLIKA IJA ZA UČENJE OSNOV PROGRAMIRANJAtheir common features. Then, during the design, we created...
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.
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.
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].