Univerza v Ljubljani
Fakulteta za raˇ cunalniˇ stvo in informatiko
Tadej Stanonik
Podpora interaktivnim lekcijam v izvajalnem okolju Node.js
DIPLOMSKO DELO
UNIVERZITETNI ˇSTUDIJSKI PROGRAM PRVE STOPNJE
RA ˇCUNALNIˇSTVO IN INFORMATIKA
Mentor : doc. dr. Dejan Lavbiˇ c
Ljubljana, 2021
Copyright. Rezultati diplomske naloge so intelektualna lastnina avtorja in matiˇcne fakultete Univerze v Ljubljani. Za objavo in koriˇsˇcenje rezul- tatov diplomske naloge je potrebno pisno privoljenje avtorja, fakultete ter mentorja.
Besedilo je oblikovano z urejevalnikom besedil LATEX.
Kandidat: Tadej Stanonik
Naslov: Podpora interaktivnim lekcijam v izvajalnem okolju Node.js Title: Support for Node.js runtime environment interactive lessons
Vrsta naloge: Diplomska naloga na univerzitetnem programu prve stopnje Raˇcunalniˇstvo in informatika
Mentor: doc. dr. Dejan Lavbiˇc
Opis:
V programskem jeziku R je na voljo podpora za interaktivne lekcije s pomoˇcjo paketa learnr. Omogoˇca izdelavo lekcije, z vkljuˇcitvijo navodil, video po- snetkov, vpraˇsanj in tudi moˇznostjo poganja R izvorne kode v zaˇsˇcitenem okolju peskovnika, kar zelo olajˇsa proces uˇcenja novega programskega je- zika. V okviru diplomskega dela dodajte podporo interaktivnim lekcijam v zaˇsˇcitenem okolju peskovnika za sklad tehnologij JavaScript (Node.js), HTML in CSS, ki bo omogoˇcal podobno uporabniˇsko izkuˇsnjo kot prej ome- njena reˇsitev s paketom learnr. Izvorno kodo razvite reˇsitve ponudite v odprtokodni obliki, samo reˇsitev pa kritiˇcno ovrednotite.
Zahvaljujem se mentorju, doc. dr. Dejanu Lavbiˇcu, za vse nasvete, strokovno pomoˇc in hitro odzivnost pri izdelavi diplomske naloge. Posebna zahvala gre tudi druˇzini za vso podporo in motivacijo v ˇcasu ˇstudija.
Kazalo
Povzetek Abstract
1 Uvod 1
2 Pregled podroˇcja 3
2.1 Platforme za uˇcenje programiranja . . . 3
2.2 Paket learnr . . . 5
2.3 Peskovnik . . . 5
2.4 Predlagana reˇsitev . . . 6
3 Pregled uporabljenih tehnologij 9 3.1 Docker . . . 9
3.2 MySQL . . . 9
3.3 PhpMyAdmin . . . 10
3.4 Apache . . . 10
3.5 API . . . 10
3.6 REST . . . 11
3.7 R . . . 11
3.8 RStudio . . . 11
3.9 R Markdown . . . 11
3.10 Shiny . . . 13
3.11 RAppArmor . . . 13
3.14 Swagger UI . . . 14 3.15 Node.js . . . 15
4 Podrobnosti implementacije 17
4.1 Arhitektura reˇsitve . . . 17 4.2 Postavitev razvojnega okolja . . . 20
5 Delovanje sistema 29
5.1 Paket learnr . . . 29 5.2 Streˇznik Jobe . . . 54
6 Testiranje in ovrednotenje 69
6.1 Analiza SWOT . . . 69
7 Zakljuˇcek 73
Literatura 75
Seznam uporabljenih kratic
kratica angleˇsko slovensko
API Application Programming In- terface
programski vmesnik
HTML Hyper Text Markup Language jezik za oznaˇcevanje nadbese- dila
REST Representational State Trans- fer
predstavitveni prenos stanja SQL Structured Query Language strukturiran povpraˇsevalni
jezik za delo s podatkovnimi bazami
PHP Hypertext Preprocessor streˇzniˇski skriptni jezik CSS Cascading Style Sheets prekrivni slogi
JSON JavaScript Object Notation objektna notacija JavaScript URI Uniform Resource Identifier enotni identifikator vira DoS Denial of Service ohromitev storitve SWOT Strengths, Weaknesses,
Opportunities, Threats
prednosti, slabosti, priloˇzno- sti, nevarnosti
DOM Document Object Model objektni model dokumenta LAMP Linux, Apache, MySQL, PHP spletni sklad tehnologij Li-
nux, Apache, MySQL, PHP
Povzetek
Naslov: Podpora interaktivnim lekcijam v izvajalnem okolju Node.js Avtor: Tadej Stanonik
Priljubljenost uporabe izvajalnega okolja Node.js je vedno veˇcja, hkrati pa se poveˇcuje tudi ˇstevilo programerjev, ki se z omenjenim okoljem sreˇcujejo prviˇc. Pred prvo uporabo je potrebno namestiti okolje in vse knjiˇznice, ki jih razvijalec pri razvoju potrebuje, pri tem pa je potrebno paziti, da so verzije knjiˇznic med seboj zdruˇzljive. Vse to zahteva ˇcas, hkrati pa je za neizkuˇsenega programerja izvajanje kode na lastni napravi lahko nevarno.
V diplomskem delu smo zasnovali in razvili prototip, ki uˇciteljem omogoˇca enostavno izdelavo interaktivnih lekcij, preko katerih se uˇcenci oz. progra- merji zaˇcetniki z reˇsevanjem razliˇcnih tipov nalog uˇcijo uporabe tehnologij JavaScript (Node.js), HTML in CSS v varnem okolju brez nameˇsˇcanja razvoj- nega okolja na lastne naprave. Za implementacijo prototipa smo nadgradili delovanje R paketa learnr za izdelavo interaktivnih lekcij v obliki spletnih aplikacij in streˇznika Jobe za izvajanje kode v peskovniku.
Rezultati testiranj so pokazali, da implementirani prototip ustreza za- stavljenim ciljem diplomske naloge in je lahko v veliko pomoˇc uˇciteljem in programerjem, ki so na podroˇcju tehnologij Javascript (Node.js), HTML in CSS zaˇcetniki, ob tem pa ponuja veliko moˇznosti za nadaljni razvoj.
Kljuˇcne besede: Node.js, HTML, CSS, R Markdown, interaktivna lekcija, peskovnik.
Abstract
Title: Support for Node.js runtime environment interactive lessons Author: Tadej Stanonik
The popularity of the Node.js runtime environment is increasing, at the same time the number of programmers, that are beginning to learn Node.js, is getting bigger. Before one can start using Node.js, they have to install the environment and libraries, that they will use in the process of development.
Versions of libraries have to be compatible with each other and the installed version of Node.js. This requires time and presents a threat of inexperienced developers harming their device.
In the thesis, we have designed and developed a prototype, which enables teachers to simply create interactive lessons for students or beginner pro- grammers to learn JavaScript (Node.js), HTML and CSS through different types of exercises in a safe environment without having to install anything.
The prototype consists of upgraded versions of R packagelearnrfor creating interactive lessons as web applications andJobeserver for execution of code in a sandbox.
The test results have shown that the implemented prototype corresponds to thesis goals, can be a great help to teachers and beginner Node.js pro- grammers and offers possibilities for further development.
Keywords: Node.js, HTML, CSS, R Markdown, interactive lesson, sandbox.
Poglavje 1 Uvod
Z vse hitrejˇso modernizacijo in digitalizacijo hkrati naraˇsˇca tudi zanimanje za raˇcunalniˇstvo in programiranje. Zelo priljubljen je razvoj spletnih aplikacij, kar med drugim omogoˇca tudi streˇzniˇsko izvajalno okolje Node.js z uporabo programskega jezika JavaScript. Pred zaˇcetkom programiranja v Node.js je potrebno okolje namestiti, ob tem pa je potrebno posebej namestiti tudi vse knjiˇznice, ki jih ˇzeli razvijalec uporabiti, in pri tem paziti, da so verzije nameˇsˇcenih knjiˇznic zdruˇzljive z verzijo Node.js. Vse to zahteva ˇcas, ob tem pa na neizkuˇsenega programerja pretijo tudi nevarnosti, da bi z napisano kodo ˇskodoval lastni napravi in morebiti z diska izbrisal pomembne datoteke.
Na trgu obstaja veliko implementacij peskovnikov [1, 2, 3], ki nudijo izvajanje kode v varnem okolju, vendar pa je razvijalec v procesu uˇcenja programiranja tu prepuˇsˇcen samemu sebi. Zato je za zaˇcetnike priporoˇcljiva uporaba platform, ki preko interaktivnih lekcij omogoˇcajo postopen uvod v svet programiranja.
Ker so platforme z interaktivnimi lekcijami veˇcinoma plaˇcljive, ob tem pa ne omogoˇcajo proste izdelave lastnih lekcij, smo se odloˇcili, da v okviru di- plomske naloge razvijemo brezplaˇcno odprtokodno reˇsitev, ki bo na eni strani uˇcencem omogoˇcala varno, enostavno in hitro uˇcenje uporabe tehnologij Ja- vaScript (Node.js), HTML in CSS brez nameˇsˇcanja orodij, na drugi strani pa bodo uˇcitelji lahko na preprost naˇcin, brez zahtevnega programiranja kreirali
1
lastne interaktivne lekcije, ki jih bodo lahko delili s svojimi uˇcenci v obliki spletnih aplikacij.
Diplomsko delo je razdeljeno na 7 poglavij. V 2. poglavju bomo pred- stavili pregled podroˇcja in sorodnih reˇsitev. V 3. poglavju bomo predstavili tehnologije uporabljene pri implementaciji reˇsitve, katere arhitekturo in na- vodila za postavitev razvojnega okolja vsebuje 4. poglavje, njeno delovanje pa bomo opisali v 5. poglavju. V 6. poglavju bomo reˇsitev analizirali in ovrednotili z uporabo analize SWOT, v zadnjem 7. poglavju pa bomo pov- zeli bistvo in uspeh diplomskega dela, ob tem pa predlagali moˇzne izboljˇsave za nadaljni razvoj.
Poglavje 2
Pregled podroˇ cja
V tem poglavju sledi pregled ˇze implementiranih reˇsitev, ki omogoˇcajo uˇcenje tehnologij JavaScript (Node.js), HTML in CSS.
2.1 Platforme za uˇ cenje programiranja
2.1.1 codedamn
Platformacodedamn[4] uporabnikom omogoˇca reˇsevanje ˇze pripravljenih in- teraktivnih lekcij, preko katerih se lahko uˇcijo razliˇcnih programskih jezikov in tehnologij, kot so Node.js, React.js, Python, HTML, CSS, Kotlin in Swift.
ˇStevilo teˇcajev, ki so na voljo, je ogromno, vendar pa je v brezplaˇcni razliˇcici dostopnen zelo omejen deleˇz. Omogoˇca tudi enostavno izdelavo lastnih in- teraktivnih lekcij preko uporabniˇskega vmesnika, ki ne zahteva poznavanja nobenega programskega jezika. Kreirana lekcija je nato dostopna vsem upo- rabnikom platforme codedamnin nam ni potrebno skrbeti za njeno postavi- tev. Slabost omenjene funkcionalnosti kreiranja lastnih interaktivnih lekcij je, da moramo za njeno uporabo pridobiti dovoljenje lastnikov pratforme in ni del nobenega izmed plaˇcljivih profilov.
Platforma uporabnikom ponuja tudi okolje za eksperimentiranje z vsemi prej omenjenimi tehnologijami, kar je na voljo tudi v brezplaˇcni razliˇcici.
Testno okolje za uˇcenje Node.js uporabnikom omogoˇca, da kreirajo nove da- 3
toteke, imajo dostop do konzole in predogleda kreiranega spletnega streˇznika.
Platforma omogoˇca 500 minut brezplaˇcne uporabe na mesec. Velika prednost codedamn je, da uporabniku omogoˇca, da preko konzole namesti tudi nove knjiˇznice, ki jih nato lahko uporablja pri uˇcenju.
2.1.2 freeCodeCamp
PlatformafreeCodeCamp [5] podobno kotcodedamn ponuja veliko ˇstevilo ˇze pripravljenih interaktivnih lekcij za uˇcenje, glavna prednost pa je, da je vsa vsebina na freeCodeCamp brezplaˇcna. Uporabniki se novih tehnologij uˇcijo preko videoposnetkov, kvizov in programerskih nalog. ˇCeprav je uporaba brezplaˇcna, pa je uporabniˇska izkuˇsnja slabˇsa, ˇstevilo funkcionalnosti, ki jih platforma ponuja, pa je bistveno manjˇse kot na codedamn. Ne omogoˇca izdelave lastnih interaktivnih lekcij, v okviru uˇcenja Node.js pa prav tako ne ponuja uporabe zunanjih knjiˇznic.
2.1.3 Udemy
Platforma Udemy [6] ponuja uˇcenje ˇstevilnih sodobnih in naprednih tehnolo- gij. Njena glavna slabost je, da uˇcenje veˇcinoma poteka preko videoposnetkov in ˇstevilne lekcije ne vsebujejo praktiˇcnih programerskih nalog, ki bi jih upo- rabnik lahko reˇseval na spletu. Zato mora uporabnik vse potrebna orodja za preizkus nauˇcenega namestiti na lastni napravi. Udemy ponuja tako brez- plaˇcne kot tudi plaˇcljive lekcije, vsebina je dostopna preko uporabniˇskega vmesnika, ki je sodoben in enostaven za uporabo.
Udemyomogoˇca tudi brezplaˇcno izdelavo lastnih interaktivnih lekcij, ki jih morajo pred objavo upravljalci platforme potrditi, da ustrezajo zahtevanim standardom.
Glede na ˇstevilo ponujenih lekcij je v ospredju Udemy, vendar pa pro- gramerske naloge, ki jih ponuja, ne omogoˇcajo tako naprednih funkcional- nosti kot codedamn (npr. izdelave preprostih spletnih streˇznikov s knjiˇznico Express).
Diplomska naloga 5
2.2 Paket learnr
learnr[7] je odprtokodni paket, namenjen za uporabo v programskem jeziku R. Z uporabo formata R Markdown ponuja enostavno izdelavo interaktivnih lekcij, ki preko videoposnetkov, kvizov in programerskih nalog omogoˇcajo hi- tro in preprosto uˇcenje programskega jezika R. Ogrodje za interaktivne lekcije zagotavlja paket shiny [8], ki omogoˇca pretvorbo datoteke R Markdown v spletno aplikacijo.
2.3 Peskovnik
Peskovnik (ang. sandbox) je izolirano okolje, ki omogoˇca varno izvajanje neznane kode ali programov. Tako se izognemo, da bi potencialno ˇskodljiva koda ˇskodovala naˇsi napravi [9].
2.3.1 CompileBox
CompileBox [3] je peskovnik za izvajanje neznane programske kode. Upo- rabnik preko API-ja poˇslje izvorno kodo in oznako programskega jezika na streˇznik, ki teˇce kot preprosta spletna aplikacija, narejena z ogrodjem Ex- press. Ta nato kodo z upoˇstevanjem omejitev raˇcunskih virov in nastavljene omejitve ˇcasa izvajanja izvede znotraj dodatnega vsebnika Docker. Po koncu izvajanja se vsebnik uniˇci, rezultati izvajanja pa se posredujejo uporabniku.
Ker se koda vsakiˇc izvede v novem izoliranem okolju znotraj vsebnika Docker, uporabniki ne morejo dostopati do datotek drugega uporabnika, pri tem pa ni potrebno skrbeti, da bi koda ˇskodovala napravi, kjer je nameˇsˇcen peskovnik.
2.3.2 INGInious
INGInious [2] je inteligentni ocenjevalnik, ki omogoˇca varno in avtomatsko testiranje ˇstudentove kode. Napisan je v Python-u, za izvajanje kode pa prav tako kot Compilebox uporablja Docker. Ko INGInious prejme kodo, jo v vsebniku izvede in nato v loˇcenem vsebniku z uporabo skripte, ki jo
pripravi profesor, oceni njeno pravilnost. Ponuja tudi uporabniˇski vmesnik, ki ˇstudentom omogoˇca izvajanje kode, profesorjem pa vpogled v statistiko in administracijo.
2.3.3 Jobe
Jobe[1] je PHP streˇznik, ki podpira izvajanje manjˇsih programov v razliˇcnih programskih jezikih, kot so JavaScript, C, C++, Python3, Python2, Octave, Java, Pascal in PHP, hkrati omogoˇca dodajanje podpore za druge jezike.
Razvit je bil kot oddaljen peskovnik za uporabo z vtiˇcnikom CodeRunner [10], vtiˇcnik za platformo Moodle, ki od ˇstudentov zahteva pisanje relativno preproste kode. Komunikacija poteka preko REST API-ja, preko katerega uporabnik poˇslje kodo, oznako programskega jezika in morebitne omejitve raˇcunskih virov ter ˇcasa izvajanja, ob koncu izvajanja pa streˇznik uporabniku posreduje informacije o izvajanju (standardni izhod, standardni izhod za napake). Za varno izvajanje kode Jobe uporablja program DOMjudge [11], ki z omejitvijo spomina, procesorske moˇci in ˇstevila procesov izvede kodo v novem procesu kot uporabnik z malo pravicami. Podpira tudi prepreˇcitev nepooblaˇsˇcenega dostopa z uporabo API kljuˇcev in beleˇzenje prejetih zahtev v podatkovno bazo MySQL.
2.4 Predlagana reˇ sitev
Ker je programer v procesu uˇcenja pri uporabi peskovnikov prepuˇsˇcen sa- memu sebi, interaktivne lekcije na platformah pa so veˇcinoma plaˇcljive, hkrati pa ne ponujajo proste izdelave lastnih lekcij, bomo implementirali prototip reˇsitve, ki na eni strani uˇciteljem omogoˇca preprosto in neomejeno izdelavo lastnih interaktivnih lekcij v obliki spletnih aplikacij, hkrati pa bo uˇcencem ponujal varno in hitro uˇcenje tehnologij JavaScript (Node.js), HTML in CSS brez nameˇsˇcanja orodij. Prototip bo brezplaˇcen in odprtokoden, s tem pa prost za izboljˇsave.
Reˇsitev smo si zamislili kot zdruˇzitev funkcionalnosti paketa learnr za
Diplomska naloga 7 izdelavo interaktivnih lekcij in izvajanje preproste kode ter streˇznika Jobe za izvajanje zahtevnejˇse kode v peskovniku. Paketlearnr bomo nadgradili do te mere, da bo omogoˇcal izdelavo interaktivnih lekcij za uˇcenje Node.js (programski jezik JavaScript), HTML in CSS, pri ˇcemer bomo ohranili vse ˇze implementirane funkcionalnosti, ki jih je mogoˇce vkljuˇciti v lekcijo (kvizi, videoposnetki, interaktivne komponente, programerske naloge za uˇcenje R).
Dodali bomo moˇznost izdelave dveh tipov programerskih nalog za uˇcenje Node.js. Izdelovalec lekcije bo lahko doloˇcil, ali naj se JavaScript koda izvede znotraj R okolja ali naj se za izvedbo uporabi streˇznikJobe, ki bo omogoˇcal tudi postavitev preprostih spletnih streˇznikov Express oziroma uporabo osta- lih knjiˇznic, ki jih bo ustvarjalec lekcije namestil na streˇzniku.
Streˇznik Jobe smo izbrali zaradi ˇze implementirane podpore za prepre- ˇcitev nepooblaˇsˇcenega dostopa z uporabo API kljuˇcev, s ˇcimer bomo lahko zagotovili, da bodo streˇznik uporabljale zgolj osebe, ki jih poznamo oziroma jim to dovolimo. Poleg tega Jobe podpira beleˇzenje prejetih zahtev, omeje- vanje ˇstevila hkratnih uporabnikov in omejevanje ˇstevila prejetih zahtev za posamezni API kljuˇc na uro, s ˇcimer prepreˇcuje preobremenitev streˇznika.
Z nadgradnjo in prilagoditvijo delovanja paketalearnrin streˇznika Jobe bomo profesorjem, uˇciteljem in inˇstruktorjem omogoˇcili enostavno izdelavo interaktivnih lekcij, hkrati pa bodo lekcije programerjem zaˇcetnikom omo- goˇcile hitrejˇse in brezskrbno uˇcenje tehnologij JavaScript (Node.js), HTML in CSS (poleg ˇze implementirane podpore za programski jezik R), saj jim ne bo potrebno na lastni napravi namestiti nobenih orodij in knjiˇznic, ampak se bodo novih znanj lahko uˇcili v varnem okolju preko spleta.
Poglavje 3
Pregled uporabljenih tehnologij
V tem poglavju sledi predstavitev tehnologij, ki smo jih uporabili pri izdelavi diplomske naloge.
3.1 Docker
Dockerje odprtokodno orodje za laˇzji razvoj, distribucijo in izvajanje aplika- cij s pomoˇcjo vsebnikov. Vsebniki predstavljajo virtualizirano izolirano oko- lje, ki vsebujejo vse potrebno za izvajanje aplikacije, kar razvijalcu omogoˇca, da aplikacijo lahko poˇzene na katerikoli napravi. Gre za virtualizacijo na nivoju operacijskega sistema, kar pripomore k uˇcinkovitosti, skalabilnosti in majhni velikosti vsebnikov [12]. Docker se lahko uporablja na operacijskih sistemih Linux, Windows in MacOS. Ker vsebniki ne zahtevajo veliko virov, se lahko brez teˇzav na isti napravi izvaja veˇc vsebnikov.
3.2 MySQL
MySQL je odprtokodni sistem za upravljanje relacijskih podatkovnih baz, ki hranijo podatke v tabelah. Za dostop do podatkov se uporablja eden izmed najbolj pogosto uporabljenih jezikov za upravljanje podatkovnih baz, ime- novan SQL. Struktura podatkovne baze je organizirana v fiziˇcne datoteke,
9
optimizirane za hitrost [13]. MySQL omogoˇca avtoriziranim uporabnikom nadzorovan, hiter in hkraten dostop do podatkovne baze [14]. Uporablja se kot del enega najbolj uporabljenih spletnih skladov LAMP (Linux, Apache, MySql, PHP).
3.3 PhpMyAdmin
PhpMyAdmin je brezplaˇcno orodje, napisano v PHP, ki je namenjeno upra- vljanju z MySQL in MariaDB podatkovnimi bazami preko uporabniˇskega vmesnika. Omogoˇca laˇzji pregled in nadzor nad vsebino podatkovne baze, upravljanje uporabnikov in njihovih pravic, uvoz in izvoz podatkov v razliˇcnih formatih itd. [15].
3.4 Apache
Apache je brezplaˇcni, odprtokodni spletni streˇznik, ki ga je razvil Robert McCool leta 1995, trenutno pa ga vzdrˇzuje Apache Software Foundation. V zaˇcetku 21. stoletja je Apache zagotavljal veˇc kot 50 % vsebine na internetu.
Kot spletni streˇznik sprejema HTTP poizvedbe internetnih uporabnikov in jim poˇsilja zahtevane informacije v obliki datotek in spletnih strani [16]. Apa- che se uporablja kot del enega najbolj uporabljenih spletnih skladov LAMP.
3.5 API
APIpredstavlja mnoˇzico standardiziranih poizvedb, ki omogoˇcajo komunika- cijo med programsko opremo. Razvijalcu omogoˇca enostaven naˇcin za dostop do funkcij programa, ki ima implementiran API. Predstavlja vmesnik med programsko opremo in razvijalcem, s ˇcimer onemogoˇcimo vpogled v samo de- lovanje programa, pridobimo na varnosti ter prepreˇcimo kopiranje aplikacij [17].
Diplomska naloga 11
3.6 REST
RESTje arhitekturni stil programske opreme, znaˇcilen za spletne storitve. Kot vsak arhitekturni stil ima tudi omejitve, pet obveznih in eno opcijsko. Spletne storitve, ki te omejitve upoˇstevajo, imenujemo Restful storitve, s sledenjem omejitvam REST stila pa sistem pridobi na uˇcinkovitosti, skalabilnosti, pre- prostosti in zanesljivosti [18]. Glavni gradniki REST arhitekture so viri, do katerih se lahko dostopa preko unikatnih identifikatorjev, imenovanih URI [19].
3.7 R
Rje odprtokodni jezik in okolje za sploˇsno uporabo, ki je v osnovi namenjeno za raˇcunanje in grafiˇcni prikaz statistik. S pomoˇcjo ˇstevilnih paketov se lahko doda nove funkcionalnosti in tako lahko v jeziku R razvijamo tudi aplikacije [20].
3.8 RStudio
RStudio je odprtokodno integrirano razvojno okolje (IDE - Integrated De- velopmen Environment) za programski jezik R. Dostopen je na operacijskih sistemih Linux, Windows in Mac OS X, s preglednim uporabniˇskim vmesni- kom pa omogoˇca enostaven razvoj projektov v R [21]. Ker moˇcno poenostavi izvajanje in testiranje napisane kode, smo ga uporabili tudi v okviru diplom- ske naloge.
3.9 R Markdown
R Markdownje format datoteke za kreiranje dokumentov s pomoˇcjo program- skega jezika R. Gre za dokument, napisan v ˇcistopisnem formatu markdown, ki vsebuje R programsko kodo [22].
R Markdown je uporaben, ker omogoˇca ponovno izdelavo dokumenta in pretvorbo v ˇstevilne izhodne formate. Zaradi moˇznosti ponovne izdelave je primeren za izdelavo poroˇcil, kjer se vhodni podatki lahko spreminjajo.
Ob spremembi podatkov je potrebno zgolj ponovno izvesti vse skupke R izvorne kode (glej izvorno kode 3.1), ki poskrbijo za kreiranje vsebine (grafi, tabele itd.). Za izvedbo skupkov poskrbi R paketknitr[23], ki se najveˇckrat uporablja v povezavi s programom pandoc [24]. Ta omogoˇca pretvorbo v ˇstevilne izhodne formate, kot so PDF, HTML ali Microsoft Word. Uporaba obeh orodij hkrati se imenuje upodabljanje (ang. render) dokumenta [22].
Proces upodabljanja je prikazan na sliki 3.1.
Slika 3.1: Proces upodabljanja R Markdown dokumenta [22].
1 ```{r oznaka, echo = FALSE}
2 print("Hello World")
3 ```
Izvorna koda 3.1: Primer skupka R izvorne kode znotraj R Markdown doku- menta.
Knitr omogoˇca tudi izvajanje kode v drugih programskih jezikih, kot so Python, JavaScript, SQL itd. [25]. Z nastavitvijo echo = FALSE doloˇcimo, da se v konˇcnem dokumentu prikaˇze samo rezultat izvajanja skupka kode R, ne pa tudi izvorna koda. Knitr skupkom izvorne kode lahko doloˇcimo ˇse ˇstevilne druge lastnosti [26], lahko pa definiramo tudi lastne parametre, kot smo to storili v okviru izdelave diplomske naloge.
Diplomska naloga 13
3.10 Shiny
Shinyje R paket, ki omogoˇca enostaven razvoj interaktivnih spletnih aplika- cij v okolju R. Omogoˇca izvajanje samostojnih aplikacij na spletni strani in razvoj aplikacij, vgrajenih v R Markdown dokumente. Poleg jezika R lahko v razvoj aplikacij vkljuˇcimo tudi HTML, CSS in JavaScript [8].
Shiny uporabniku omogoˇca hitro in preprosto izdelavo reaktivnega ogro- dja, ki omogoˇca samodejno posodabljanje objektov ob spremembi izvora.
Najlaˇzje to vidimo na primeru c = a + b, kjer je vrednost c odvisna od spremenljivkainb. Reaktivno programiranje omogoˇci, da se v primeru spre- membe vrednosti a ali b skoraj takoj spremeni tudi vrednost c in vse druge spremenljivke in izhodi povezani s c. Hkrati se spremenijo tudi vsi objekti odvisni od c [27]. Shiny to doseˇze s pomoˇcjo posebnih objektov, reaktivne vrednosti(ang. reactive values) in opazovalci(ang. observers). Opazova- lec predstavlja izraz R, katerega vrednost je odvisna od reaktivnih vrednosti.
Kadarkoli nek opazovalec uporabi reaktivno vrednost, si le ta to zapomni.
Ko se reaktivna vrednost spremeni, aplikacijskemu streˇzniku Shiny sporoˇci, kateri opazovalci so od nje odvisni. Tako streˇznik ob preverjanju, ki se zgodi vsakih nekaj mikrosekund, ugotovi, ali obstajajo opazovalci, katerih vredno- sti je potrebno posodobiti, in ponovno izvede izraˇcune [28].
Shiny temelji na podatkovno vodenem (ang. data-driven) programiranju, ki se od tradicionalnega dogodkovno vodenega programiranja razlikuje v tem, da potek delovanja programa doloˇcajo spremembe vrednosti podatkov in ne dogodki [29].
3.11 RAppArmor
RAppArmor je R paket, ki omogoˇca omejevanje porabe spomina, procesorske moˇci, diska, omejitev dostopa do datoteˇcnega sistema, nastavitev najveˇcjega ˇcasa izvajanja kode R procesom. Z uporabo funkcije eval.secure() lahko razliˇcne dele R kode izvajamo z razliˇcnimi omejitvami, kar imenujemo di- namiˇcno izvajanje kode v peskovniku (ang. dynamic sandboxing). Za ome-
jevanje dostopa do datoteˇcnega sistema RAppArmor uporablja varnostni sis- tem AppArmor[30], ki z razliˇcnimi profili doloˇca, do katerih datotek lahko R proces dostopa. AppArmor procesu ne more dodeliti dodatnih pravic, ampak jih lahko zgolj omejuje [31].
3.12 V8
V8 je R paket, ki predstavlja vmesnik za Googlovo odprtokodno, zmogljivo JavaScript izvajalno okolje, napisano v C++. Paket omogoˇca izvajanje Ja- vaScript kode znotraj R okolja brez dostopa do objektnega modela doku- menta (DOM), V/I in omreˇznih operacij. Omogoˇca tudi uporabo zuna- njih knjiˇznic, vendar v omejenem obsegu, saj ne podpira uporabe JavaScript ukaza require, zato omogoˇca zgolj uporabo knjiˇznic, ki za svoje delovanje ne potrebujejo dodatnih knjiˇznic [32].
3.13 PHP
PHPje odprtokodni skriptni jezik, namenjen predvsem za razvoj spletnih apli- kacij. Lahko ga vkljuˇcimo v HTML stran in ob vsakem obisku strani se PHP koda izvede na streˇzniku in uporabniku vrne odgovor. PHP ima podporo za ˇsirok spekter podatkovnih baz (MongoDB, MySQL, PostgreSQL itd.), s pro- tokoli LDAP, IMAP, SNMP, HTTP pa podpira tudi komunikacijo z drugimi storitvami [33, 34]. PHP se uporablja kot del enega najbolj uporabljenih spletnih skladov LAMP.
3.14 Swagger UI
Swagger UIje orodje za grafiˇcno predstavitev dokumentacije OpenAPI (prej poznano kot Swagger). Odjemalcem preko uporabniˇskega vmesnika omogoˇca laˇzje in hitrejˇse uˇcenje uporabe implementiranega API-ja brez pisanja kode in hkrati poenostavi in pospeˇsi razvoj storitev [35].
Diplomska naloga 15
3.15 Node.js
Node.js je odprtokodno, streˇzniˇsko JavaScript okolje za razvoj skalabilnih spletnih aplikacij, ki temelji na Googlovem izvajalnem okolju V8 [36]. Obe omenjeni okolji sta napisani veˇcinoma v C in C++ z osredotoˇcanjem na zmo- gljivosti in majhni porabi raˇcunskih virov. Za razliko od V8, ki se uporablja za izvajanje JavaScript kode v brskalniku Google Chrome, se izvajalno okolje Node osredotoˇca na izvajanje dolgo trajajoˇcih procesov na strani streˇznika.
Temelji na asinhronem dogodkovnem (ang. event-driven) modelu, ki vse V/I zahteve obravnava v isti niti [37].
Poglavje 4
Podrobnosti implementacije
4.1 Arhitektura reˇ sitve
Arhitekturo naˇse implementacijo reˇsitve za podporo interaktivnim lekcijam v izvajalnem okolju Node.js v osnovi sestavljajo streˇznik Jobe, interaktivna lekcija, narejena s paketom learnr, in streˇznik Nginx, kot to prikazuje slika 4.1.
Interaktivna lekcija, ki teˇce v vsebniku shiny, je pravzaprav spletna aplikacija, narejena z ogrodjemShiny, ki skrbi za streˇzniˇski in odjemalski del lekcije. Pomemben del paketalearnrje JavaScript datotekatutorial.js, ki se postreˇze odjemalcu in izvede ob nalaganju spletne strani. Omenjena datoteka poskrbi za ustrezen prikaz videoposnetkov in programerskih nalog, hkrati pa skrbi tudi za komunikacijo s streˇzniˇskim delom aplikacije pri uporabi programerskih nalog, ki za izvajanje kode uporabljajo streˇznik Shiny. Za sodoben uporabniˇski vmesnik skrbi front-end ogrodjeBootstrap.
Zeleli smo omogoˇˇ citi tudi uˇcenje izdelave preprostih spletnih streˇznikov in uporabo ostalih JavaScript knjiˇznic. Zato smo izbrali in nadgradili streˇznik Jobe, ki deluje kot peskovnik za izvajanje JavaScript kode in teˇce v vseb- niku jobe. Za svoje delovanje uporablja spletni sklad LAMP in svoje funkci- onalnosti izpostavlja preko REST API-ja. Interaktivna lekcija s streˇznikom Jobe komunicira preko ˇze omenjene JavaScript datoteketutorial.js, ki poˇsilja
17
Slika 4.1: Arhitektura implementirane reˇsitve.
HTTP zahteve, ki jih sprejme spletni streˇznik Apache. Ta jih posreduje v PHP interpreter, ki izvede postopek za zahtevano funkcionalnost, komunicira z MySQL podatkovno bazo in preko streˇznika Apache poˇsiljatelju posreduje odgovor.
Celotno komunikacijo med odjemalcem in streˇznikom Jobe oz. Shiny nadzira streˇznikNginx (vsebnik nginx), ki deluje kotreverse-proxy tako, da vhodni promet posreduje ustreznemu streˇzniku. Promet, ki ga prejme na vrata 4000 in 3000–3100, posreduje vsebniku jobe, promet na vratih 3838 pa je namenjen vsebniku shiny. Nginx smo uporabili, da streˇznikoma Jobe in Shiny onemogoˇcimo izhodni promet, kar uporabniku interaktivne lekcije prepreˇcuje izvajanje kode, ki bi na streˇznik namestila zlonamerne datoteke.
Nginx je edini, ki ima dostop do interneta, s ˇcimer smo izboljˇsali varnost
Diplomska naloga 19 naˇse implementacije. Pri tem je potrebno opozoriti, da vsebnika jobe in shiny med seboj ne komunicirata. Celotna komunikacija poteka zgolj v smeriodjemalec-nginx-shinyaliodjemalec-nginx-jobe, kot to prikazuje slika 4.1.
Primer uporabe
Slika 4.1 prikazuje primer uporabe naˇse implementacije. Uporabnik najprej odpre spletno stran (glej 1. korak), kjer je dostopna interaktivna lekcija, ki teˇce v vsebniku shiny.
Ob reˇsevanju interaktivne lekcije (vpraˇsanja, programerske naloge, ki se izvedejo na streˇzniku Shiny, uporaba interaktivnih Shiny komponent itd.) poteka komunikacija med odjemalcem in streˇznikom Shiny (glej 2. korak).
Pri nalogah, ki od uporabnika zahtevajo pisanje JavaScript kode z upo- rabo zunanjih knjiˇznic (npr. postavitev preprostega spletnega streˇznika), se uporablja streˇznik Jobe. Za uporabo streˇznika Jobe mora odjemalec najprej poslati zahtevo na /free ports za avtentikacijo (glej 3. korak), na ka- tero mu streˇznik Jobe odgovori z avtentikacijskimi podatki, ki jih uporabnik potrebuje za nadaljno uporabo streˇznika.
Nato poˇslje svojo kodo (glej 4. korak) na /file/:fileName, ki se shrani na streˇzniku Jobe. Ko je koda shranjena, uporabnik poˇslje zahtevo na/runs za njeno izvedbo (glej 5. korak), streˇznik Jobe kodo izvede v peskovniku in prejme informacije o izvajanju (glej 6. korak), uporabnik pa si nato lahko ogleda svoj preprost spletni streˇznik (glej 7. korak - ˇce ga je uporabnik s poslano JavaScript kodo seveda implementiral).
Ce se koda izvaja dlje, kot bi uporabnik priˇˇ cakoval, ali pa zgolj ˇzeli ustaviti preprost spletni streˇznik, lahko poˇslje zahtevo na/stopza ustavitev izvajanja (glej 8. korak).
4.2 Postavitev razvojnega okolja
4.2.1 Razvoj lastnih interaktivnih lekcij
Za razvoj in postavitev lastnih interaktivnih lekcij moramo najprej na na- mestiti R. Nato namestimo integrirano razvojno okolje RStudio, kjer bomo razvijali naˇso lekcijo. RStudio hkrati omogoˇca tudi lokalno izvajanje in te- stiranje aplikacij. Da bodo lekcije delovale pravilno moramo namestiti tudi R paketeshiny,rmarkdown in devtools (na operacijskem sistemu Linux je potrebno namestiti ˇse paket unix). Najlaˇzje to storimo tako, da odpremo RStudio in v razdelku Console izvedemo ukaz 4.1.
1 > install.packages(c('shiny', 'rmarkdown', 'devtools'), dependencies = TRUE)
,→
Izvorna koda 4.1: Ukaz za namestitev paketov shiny, rmarkdown in devtools.
Lahko pa to storimo tudi preko zavikha Tools - Install packages, kot to prikazuje slika 4.2.
Za namestitev nadgrajene razliˇcice paketa learnr, ki se nahaja na por- talu Github, je potrebno znotraj R seje izvesti ukaz, ki ga prikazuje izvorna koda 4.2. Ko je interaktivna lekcija implementirana, jo lahko poˇzenemo in
1 > devtools::install_github("tadson10/learnr", dependencies = TRUE)
,→
Izvorna koda 4.2: Ukaz za namestitev nadgrajene razliˇcice paketalearnr.
preizkusimo s klikom na gumb Run document, ki je viden na sliki 4.2.
Za postavitev implementirane interaktivne lekcije lahko uporabimo tudi vsebnike Docker, ki jih bomo predstavili v poglavju 4.2.2. Vse kar mo-
Diplomska naloga 21
Slika 4.2: Prikaz namestitve paketa z uporabo programa RStudio.
ramo narediti je, da v datoteko Dockerfile vsebnika shiny (shiny/Dock erfile) vstavimo ukaz za kopiranje datotek interaktivne lekcije v sliko vseb- nika (primer ukaza: COPY PrimerIzboljsav /srv/shiny-server/Primer- Izboljsav) in ponovno zgradimo sliko vsebnika. V vsebnik je potrebno kopirati tudi vse datoteke, ki nastanejo pri zagonu lekcije. Dobimo jih tako, da na lastni napravi zaˇzemo lekcijo z uporabo orodja RStudio.
4.2.2 Docker Compose
Za preizkus implementirane reˇsitve v okviru diplomske naloge smo pripravili dva primera interaktivnih lekcij, preko katerih lahko preizkusimo delovanje naˇse reˇsitve. Da je postavitev razvojnega okolja ˇcimbolj preprosta, smo upo- rabili orodje Docker Compose, s katerim lahko reˇsitev preizkusimo neodvisno od lastnosti naprave. Implementirali smo vsebnikeshiny,jobeinnginx, ka- terih uporabo in delovanje bomo predstavili v nadaljevanju.
Ko vsebino repozitorija https://github.com/tadson10/LearnBox prenesemo v poljuben direktorij, se s konzolo premaknemo v korensko mapo
in izvedemo ukaz “docker-compose up --build -d”, ki poˇzene vsebnike, definirane znotraj docker-compose.yml datoteke.
Nato v brskalniku odpremo http://localhost:3838/OsnovnoDelova nje (funkcionalnosti osnovne razliˇcice paketa) ali http://localhost:3838 /PrimerIzboljsav (izvedene izboljˇsave) in ˇze lahko preizkusimo delovanje implementirane reˇsitve na pripravljenih primerih interaktivnih lekcij.
Ce ˇˇ zelimo bolje spoznati delovanje REST API-ja na streˇzniku Jobe, lahko uporabimo orodje Swagger UI, ki se nahaja nahttp://localhost:4000/job e/application/documentation. Za testiranje delovanja uporabimo testni API kljuˇc dcc9a835-9750-4725-af5b-2c839908f71, ki se ob zagonu vseb- nika vstavi v podatkovno bazo MySQL.
Za zagon implementirane reˇsitve smo uporabili Docker Compose, ki omogoˇca izvajanje aplikacij, sestavljenih iz veˇc vsebnikov. Navodila za zagon vsebni- kov se nahajajo v datoteki docker-compose.yml (Izvorna koda 4.3), katere vsebino bomo predstavili v nadaljevanju.
Vsebnikoma jobe inshiny znotraj docker-compose.yml datoteke doloˇci- mo vrednosti spremenljivk, ki se uporabijo pri gradnji slike in zagonu vseb- nika (razdelka args in environment). Vrednosti se preberejo iz datoteke .env, kjer jih lahko enostavno spreminjamo. Pri tem je potrebno opozoriti, da je v primeru spreminjanja uporabniˇskega imena in gesla za novega upo- rabnika podatkovne baze MySQL (spremenljivki MYSQLUSER in MYSQLPASS), ki se kreira ob zagonu vsebnika jobe, potrebno to ustrezno popraviti tudi v izvorni kodi projekta Jobe (datoteka application/config/database.php).
Ce bomo vsebnike pognali na oddaljenem streˇˇ zniku, je potrebno spremeniti tudi vrednost spremenljivkeJOBEIP, ki predstavlja IPv4 naslov streˇznika sku- paj s ˇstevilko vrat, kjer je dostopen streˇznik Jobe.
V razdelku volumes vsebniku jobe omogoˇcimo ohranjanje vsebine po- datkovne baze MySQL tudi v primeru izbrisa vsebnika. Vsebina se shrani na gostiteljski napravi in izbriˇse ˇsele, ko to eksplicitno zahtevamo (npr. z ukazom “docker volume rm mysqlVolume”).
Diplomska naloga 23 V razdelku networks doloˇcimo lokalno omreˇzje, ki mu vsebnik pripada.
Vsi vsebniki pripadajo omreˇzjuinside, ki ga definiramo kotinternal. Gre torej za notranje omreˇzje, s ˇcimer vsebniku prepreˇcimo dostop do interneta.
Edini z internetno povezavo je vsebniknginx, ki hkrati pripada tudi omreˇzju outside.
V razdelku portsdoloˇcimo vrata, preko katerih je vsebnik dosegljiv nav- zven. ˇStevilke izpostavljenih vrat navedemo zgolj za vsebniknginx, ki deluje kot reverse-proxy in posreduje promet ustreznemu vsebniku.
V razdelku depends on doloˇcimo, od katerih vsebnikov je posamezen vsebnik odvisen. V naˇsem primeru je vsebnik nginx odvisen od preostalih dveh, kar pomeni, da morata za pravilno delovanje vsebnika nginx najprej biti pognana vsebnika jobe inshiny.
V razdelku context doloˇcimo mapo, kjer se nahaja datoteka Dockerfile, na podlagi katere bomo zgradili posamezen vsebnik.
V nadaljevanju bomo predstavili vsebino datotek Dockerfile in posebnosti posameznega vsebnika.
4.2.3 Vsebnik jobe
Dockerfile
Za gradnjo slike vsebnika jobe kot osnovno sliko uporabimo ubuntu:20.04 s portala Docker Hub, ki jo prilagodimo tako, da namestimo vse potrebne knjiˇznice za delovanje programerskih nalog za uˇcenje programskega jezika Ja- vaScript in streˇznika Jobe, izpostavimo vrata 80, kjer posluˇsa streˇznik Apa- che, nameˇsˇcen znotraj vsebnika, in vrata 3000–3100 za dostop do preprostih spletnih streˇznikov. Na koncu definiramo skripto, ki se izvede ob zagonu vsebnika in inicializira stanje podatkovne baze MySQL (kreira tabele, vstavi testni API kljuˇc).
1 services:
2 jobe:
3 build:
4 context: jobe
5 args:
6 - ROOTPASS=$ROOTPASS
7 - TZ=$TZ
8 env_file: .env
9 environment:
10 - MYSQLUSER=$MYSQLUSER
11 - MYSQLPASS=$MYSQLPASS
12 container_name: jobe
13 restart: unless-stopped
14 networks:
15 - inside
16 volumes:
17 - mysqlVolume:/var/lib/mysql
Izvorna koda 4.3: Izsek iz docker-compose.yml.
Posebnosti
V podatkovni bazi MySQL vsebnika jobe se nahaj zgolj en testni API kljuˇc, kar ne bo dovolj za veˇc uporabnikov, zato si poglejmo, kako lahko komu- niciramo s pognanim vsebnikom. S pomoˇcjo ukaza docker exec se lahko poveˇzemo na vsebnik in z njim upravljamo preko konzole (Izvorna koda 4.4).
Tako lahko novim uporabnikom streˇznika Jobe omogoˇcimo dostop z dodaja- njem novih API kljuˇcev ali pa le te odstranimo in tako nekomu prepreˇcimo uporabo streˇznika.
Na ta naˇcin bi lahko sicer v vsebnik namestili tudi nove knjiˇznice, ampak ker smo vsebnik postavili v interno omreˇzje brez dostopa do interneta, to ni mogoˇce. Knjiˇznice je zato potrebno vkljuˇciti ˇze v samo sliko (potrebno
Diplomska naloga 25 dodati ukaz v jobe/Dockerfile), iz katere se vsebniki poganjajo. Za to smo se odloˇcili zaradi varnosti, saj imamo tako boljˇsi nadzor nad poˇcetjem uporabnikov. V pripravljeni sliki streˇznika Jobe so nameˇsˇcene JavaScript knjiˇznice express, body-parser, path, kar zadoˇsˇca za izdelavo preprostih spletnih streˇznikov.
1 $ docker exec -it jobe /bin/bash
2 $ mysql -u jobe -p jobe
3 mysql> INSERT INTO jobe.keys (`key`) VALUES ('<NOVI API KLJUC>')
,→
Izvorna koda 4.4: Primer ukazov za vstavljanje novega API kljuˇca v vsebnik jobe.
4.2.4 Vsebnik shiny
Dockerfile
Za gradnjo slike vsebnika shiny kot osnovno sliko uporabimo rocker/- shiny:3.6.3, ki ˇze ima nameˇsˇcen Shiny Server, potreben za postavitev in- teraktivnih lekcij, narejenih s paketom learnr. Za delovanje pripravljenih primerov, ki jih skopiramo v sliko vsebnika, znotraj Dockerfile namestimo ˇse nadgrajeno razliˇcico paketa learnr in izpostavimo vrata 3838, kjer teˇce Shiny Server. Datoteka vsebuje tudi ukaz, ki vrednost ˇze prej omenjene spre- meljivke JOBEIP vstavi na ustrezno mesto v pripravljeni primer interaktivne lekcije z nadgrajenim delovanjem paketalearnr.
Posebnosti
Slabost postavitve interaktivne lekcije z vsebnikom Docker je, da ne omogoˇca uporabe paketa RAppArmor. Za njegovo uporabo bi morali vsebnik pognati z oznakoprivileged, kar pa je z varnostnega vidika lahko nevarno za naˇso
napravo, saj tako vsebnik dobi administratorske pravice, kar bi lahko izkori- stil morebitni napadalec.
Interaktivna lekcija izvede vneˇseno kodo kot uporabnik z malo pravicami, vendar ima uporabnik kljub temu dostop do zaˇcasnih datotek, pomembnih za delovanje lekcije, ki se ustvarijo ob njenem zagonu v mapi /tmp.
Ce ˇˇ zelimo zagotoviti veˇcjo varnost, je priporoˇcljivo interaktivno lekcijo po- staviti brez uporabe orodja Docker na oddaljenem streˇzniku, kjer namestimo tudi RAppArmor in tako uporabniku lekcije omejimo dostop do datoteˇcnega sistema.
4.2.5 Vsebnik nginx
Dockerfile
Za gradnjo slike vsebnikanginxkot osnovno sliko uporabimonginx:stable, ki ima ˇze nameˇsˇcen streˇznik Nginx. Za pravilno delovanje v sliko skopiramo ˇse konfiguracijsko datoteko nginx.conf in izpostavimo vrata 4000 (REST API streˇznika Jobe), 3838 (vsebnik shiny) in 3000–3100 (preprosti spletni streˇzniki Express), kjer bo streˇznik posluˇsal za zahteve.
1 server {
2 listen 3000-3100;
3 listen [::]:3000-3100;
4
5 server_name jobeApp;
6 location / {
7 proxy_pass http://jobe:$server_port;
8 }
9 }
Izvorna koda 4.5: Izsek iz konfiguracijske datoteke streˇznika Nginx.
Diplomska naloga 27 Posebnosti
Da vsebniknginxdeluje kotreverse-proxyposkrbi konfiguracijska datoteka nginx.conf, kjer z uporabo parametra proxy pass promet preusmerimo k ustreznemu vsebniku, kot to prikazuje izsek izvorne kode 4.5.
Poglavje 5
Delovanje sistema
5.1 Paket learnr
Learnr [7] je R paket, ki omogoˇca ustvarjanje interaktivnih lekcij, s pomoˇcjo katerih se uˇcenci preko razliˇcnih vrst nalog v osnovi lahko uˇcijo programskega jezika R. Najprej bomo predstavili sploˇsne lastnosti paketa, nato delovanje in uporabo paketa pred naˇsimi spremembami in nazadnje ˇse implementirane izboljˇsave.
5.1.1 Sploˇ sno
Paket omogoˇca, da R Markdown dokument spremenimo v interaktivno lek- cijo, ki jo v obliki spletne aplikacije lahko ponudimo uporabnikom za hitrejˇse in laˇzje uˇcenje programiranja.
5.1.2 Osnovno delovanje
Ker smo v nadgrajeni razliˇcici paketalearnr obdrˇzali vse ˇze obstojeˇce funk- cionalnosti, bomo najprej predstavili inicialno delovanje paketa.
Osnovno delovanje paketalearnr bomo prikazali na preprostem primeru (glej sliko 5.1), ki zajema vse funkcionalnosti osnovne razliˇcice paketa. Iz- vorna koda primera je dostopna na https://github.com/tadson10/Lear
29
nBox/tree/master/shiny/OsnovnoDelovanje/OsnovnoDelovanje.Rmd.
Slika 5.1: Zaˇcetna stran preprostega primera interaktivne lekcije.
Ker je potrebno interaktivno lekcijo najprej ustvariti, si poglejmo, kako je sestavljen R Markdown dokument iz preprostega primera.
V glavi (Izvorna koda 5.1) vsake interaktivne lekcije doloˇcimo nekaj o- snovnih lastnosti, ki jih podamo v formatu YAML. S parametrom output doloˇcimo format izhodnega dokumenta, v katerega ˇzelimo prevesti R Mark- down dokument. Format je lahko poljuben, paket learnr pa omogoˇca upo- rabo posebnega formata, namenjenega izdelavi interaktivnih lekcij. Z njegovo uporabo lekcija dobi standardni uporabniˇski vmesnik in ˇstevilne funkcional- nosti, kot sta shranjevanje napredka uporabnika in onemogoˇcanje preskako- vanja nereˇsenih poglavij lekcije, kar vkljuˇcimo s parametromaprogressive
Diplomska naloga 31 inallow skip. Hkrati poskrbi tudi za pretvorbo R Markdown dokumenta v spletno stran HTML.
Z oznako runtime: shiny prerendered lekcijo opredelimo kot vnaprej upodobljeno Shiny aplikacijo [7].
1 ---
2 title: "Learnr osnovno delovanje"
3 output:
4 learnr::tutorial:
5 progressive: true
6 allow_skip: true
7 runtime: shiny_prerendered
8 ---
Izvorna koda 5.1: Izvorna koda glave primera osnovnega delovanja paketa learnr v formatu YAML.
Obiˇcajno za uporabo Shiny komponent v R Markdown dokumentu na- stavimo “runtime: shiny”, ki zahteva, da se celoten dokument upodobi za vsako uporabniˇsko sejo posebej, kar lahko privede do slabe uporabniˇske izkuˇsnje pri dokumentih, ki za upodabljanje potrebujejo veliko ˇcasa [38]. V teh primerih je veliko bolj primerna uporaba “shiny prerendered”, ki po- skrbi, da se dokument upodobi ˇze pred postavitvijo v produkcijsko okolje, zaradi ˇcesar je nalaganje strani pri konˇcnem uporabniku bistveno hitrejˇse.
Vendar pa se vsi deli R Markdown dokumenta tudi v tem primeru ne upodobijo vnaprej. S parametrom context lahko skupkom kode doloˇcimo, kdaj naj se izvedejo [38]. Parametru lahko nastavimo veˇc vrednosti, katerih vpliv bomo prikazali v nadaljevanju.
Z uporabo context=“setup” lahko doloˇcimo lastnosti vsem skupkom kode, vkljuˇcimo razliˇcne knjiˇznjice in nastavimo vrednosti spremenljivkam, do katerih lahko dostopajo vsi skupki kode. Slednje smo uporabili tudi v preprostem primeru uporabe paketa learnr, da smo vkljuˇcili paket learnr
in vsem skupkom nastavili echo = FALSE, da se v konˇcnem dokumentu prikaˇzejo zgolj rezultati izvajanja skupkov, ne pa tudi koda. Skupkom z oznako “setup” se ob upodabljanju samodejno nastavi context=“setup”, zato v izvorni kodi iz pripravljenega primera osnovnega delovanja 5.2 para- metra nismo navedli [38].
1 ```{r setup, include=FALSE}
2 library(learnr)
3 knitr::opts_chunk$set(echo = FALSE)
4 ```
Izvorna koda 5.2: Primer uporabe context=“setup”.
Osnovna verzija paketa omogoˇca vkljuˇcitev naslednjih elementov [7]:
vpraˇsanja,
videoposnetki s platform Youtube in Vimeo,
slike,
interaktivne Shiny komponente,
programerske naloge za uˇcenje jezika R.
Vpraˇsanja
V interaktivne lekcije lahko vkljuˇcimo eno ali veˇc vpraˇsanj [39] z veˇc moˇznimi odgovori, s katerimi uporabniku pomagamo razumeti bistvo lekcije. Vpraˇsa- nja imajo lahko enega ali veˇc pravilnih odgovorov in so lahko tudi odprtega tipa. Vsebinsko povezana vpraˇsanja lahko zdruˇzimo v kviz, kot to prikazuje slika 5.1.
Funkcija quiz sprejme vpraˇsanja, ki jih ˇzelimo vkljuˇciti v skupino. S parametrom caption lahko kviz tudi preimenujemo. Skupki, ki vsebujejo kodo za generiranje kviza ali vpraˇsanja morajo imeti enoliˇcno oznako, ki jo
Diplomska naloga 33 lahko podamo zraven oznake programskega jezika, ki se uporablja v skupku [39].
Funkcija question je namenjena generiranju posameznega vpraˇsanja, ki mu doloˇcimo moˇzne odgovore s funkcijo answer, hkrati pa funkcija sprejme ˇse neobvezne parametre [39]:
incorrectpredstavlja sporoˇcilo, ki se prikaˇze ob nepravilnem odgovoru na vpraˇsanje.
correctpredstavlja sporoˇcilo, ki se prikaˇze ob pravilnem odgovoru na vpraˇsanje.
allow retry doloˇca, ali lahko uporabnik na vpraˇsanje odgovori veˇc- krat. Privzeta vrednost je FALSE, torej uporabnik lahko na vpraˇsanje odgovori le enkrat.
random answer order skrbi za nakljuˇcen vrstni red prikazanih odgo- vor. Privzeta vrednost je FALSE, torej so odgovori vedno prikazani v enakem vrstnem redu.
type omogoˇca izbiro tipa vpraˇsanja. Ce vrednost ni podana, paketˇ sam poskuˇsa prepoznati, za kateri tip vpraˇsanja gre glede na ˇstevilo pravilnih odgovorov.
Funkcijaanswerse uporablja za generiranje moˇznega odgovora, in sprej- me naslednje parametre [39]:
correct doloˇci, ali je odgovor pravilen ali ne. Privzeta vrednost je FALSE.
messagepredstavlja sporoˇcilo, ki je vezano na posamezen odgovor. Tu lahko na primer definiramo posebno sporoˇcilo, ki se uporabniku prikaˇze ob izbiri nepravilnega odgovora in mu povemo, zakaj ta odgovor ni pra- vilen.
V vpraˇsanja lahko vkljuˇcimo tudi matematiˇcne enaˇcbe in simbole (Iz- vorna koda 5.3). S simbolom “$” oznaˇcimo zaˇcetek in konec matematiˇcnega izraza v obliki Latex, v katerega lahko vkljuˇcimo matematiˇcne funkcije in
spremenljivke. Uporaba “\\”je potrebna, da R ne obravnava “\”kot pose- ben znak [39].
Ko uporabnik izbere odgovor, s klikom na gumb Submit Answer preveri njegovo pravilnost. Ob potrditvi odgovora se uporabniku izpiˇse obvestilo o pravilnosti odgovora, kot je to vidno na sliki 5.1. ˇCe uporabnik odgovori napaˇcno in smo omogoˇcili veˇckratno odgovarjanje na vpraˇsanje, lahko s kli- kom na gumb Try Again ponovno poskusi z reˇsevanjem.
Videoposnetki
Videoposnetke v interaktivne lekcije vkljuˇcimo enostavno, kot to prikazuje izvorna koda 5.4.
Paket podpira predvajanje posnetkov s platform Youtube in Vimeo, ki jim lahko priredimo tudi velikost. Ce uporabnik posnetka ne pogleda doˇ konca, si interaktivna lekcija to zapomni in uporabnik lahko z ogledom zaˇcne, kjer je prejˇsnjiˇc konˇcal. Uporabo videoposnetka znotraj interaktivne lekcije prikazuje slika 5.1.
Interaktivne Shiny komponente
Slika 5.2: Prikaz uporabe Shiny interaktivne komponente iz preprostega pri- mera osnovnega delovanja.
Diplomska naloga 35
1 ```{r simpleQuiz}
2 x <- 10
3 quiz(
4 caption="Kviz",
5 question("Kaj izmed nastetega ni povezano s programskim jezikom JavaScript?",
,→
6 answer("Learnr", correct = TRUE),
7 answer("Express", message = "Express je JavaScript knjiˇznica."),
,→
8 answer("Shiny", correct = TRUE),
9 answer("Angular"),
10 allow_retry = TRUE,
11 incorrect = "Odgovor ni pravilen.",
12 correct = "Odgovor je pravilen."
13 ),
14 question(sprintf("ˇCe je $x = %s$, katera trditev drzi?", x),
,→
15 answer(sprintf("$\\sqrt{x ^ 2} = 10$"), correct = TRUE, message = "Pravilen odgovor."),
,→
16 answer(sprintf("$x ^ 2 = %d$", x * 2)),
17 answer("$\\sin x = 1$"),
18 allow_retry = TRUE,
19 random_answer_order = TRUE,
20 type = "single"
21 )
22 )
23 ```
Izvorna koda 5.3: Primer vkljuˇcitve vpraˇsanj v interaktivno lekcijo.
1 {width="560" height="315"}
Izvorna koda 5.4: Primer vkljuˇcitve videoposnetka v interaktivno lekcijo.
Ker so interaktivne lekcije v osnovi Shiny aplikacije, jim to omogoˇca upo- rabo interaktivnih komponent paketa Shiny. Z uporabo ˇze omenjenega pa- rametra context lahko znotraj lekcije vkljuˇcimo interaktivne elemente, ki komunicirajo s streˇznikom Shiny. Primer interaktivne komponente, kjer upo- rabnik lahko izbira podatkovno zbirko, ki jo ˇzeli prikazati v obliki tabele, se nahaja na sliki 5.2.
V izvorni kodi 5.5 smo za skupke, za katere ˇzelimo, da se izvedejo vnaprej, uporabili context=“render”, ki je sicer tudi privzeta vrednost. Ti skupki navadno vsebujejo elemente uporabniˇskega vmesnika [38].
Skupkom, ki vsebujejo streˇzniˇski del Shiny aplikacije, nastavimo vrednost parametra na context=“server”. Tako se izvedejo vsakiˇc, ko je stran po- streˇzena konˇcnemu uporabniku [38].
Za ˇcasovno zahtevne operacije s podatki je primerna uporaba context=
“data”, ki povzroˇci, da se skupek upodobi vnaprej in vse nastale R objekte shrani v posebno datoteko, ki se nato naloˇzi ob zagonu Shiny streˇznika, kar bistveno pospeˇsi zagon aplikacije, saj so podatki ˇze obdelani in se zgolj po- streˇzejo uporabniku [38].
Programerske naloge za uˇcenje R
Uporabniki interaktivnih lekcij se lahko jezika R uˇcijo tudi preko programer- skih nalog.
Vsaka programerska naloga mora imeti lastnost “exercise=TRUE” in eno- liˇcno oznakolabel, ki jo lahko podamo tudi takoj za navedbo jezika skupka.
S pomoˇcjo parametrov [40] lahko programerskim nalogam doloˇcamo naslov, ˇstevilo vrstic v urejevalniku kode, ˇcasovna omejitev izvajanja, vkljuˇcimo ali izkljuˇcimo samodejno dopolnjevanje kode in preverjanje sintakse. Uporab-
Diplomska naloga 37
1 ```{r, context="data"}
2 carsData <- head(mtcars)
3 irisData <- head(iris)
4 arrestsData <- head(USArrests)
5 ```
6
7 ```{r}
8 selectInput("vhod", "Podatkovna zbirka:",
9 c("mtcars" = "mtcars",
10 "iris" = "iris",
11 "USArrests" = "USArrests"))
12
13 tableOutput("izhod")
14 ```
15
16 ```{r, context="server"}
17 output$izhod <- renderTable({
18 carsData
19 })
20
21 dataset <- reactive({
22 switch(input$vhod,
23 "mtcars" = carsData,
24 "iris" = irisData,
25 "USArrests" = arrestsData)
26 })
27
28 output$izhod <- renderTable({
29 dataset()
30 })
31 ```
Izvorna koda 5.5: Izvorna koda za uporabo interaktivnih Shiny komponent.
1 ```{r cars, exercise=TRUE, exercise.eval=TRUE, exercise.cap="Code", exercise.lines=3, exercise.timelimit=2}
,→
,→
2 mtcars
3 ```
4
5 ```{r cars-hint}
6 head(mtcars)
7 ```
Izvorna koda 5.6: Izvorna koda za vkljuˇcitev programerskih nalog v R z namigi.
nikom lahko vnaprej pripravimo tudi zaˇcetno izvorno kodo, ki jo vkljuˇcimo znotraj skupka, ki predstavlja programersko nalogo, koda pa je nato uporab- niku na voljo znotraj urejevalnika.
Uporabnikom lahko v pomoˇc pri reˇsevanju ponudimo tudi namige. Na- migi morajo imeti ustrezno oznako (label), da se v interaktivni lekciji prika- ˇzejo ob ˇzeljeni programerski nalogi (glej izvorno kodo 5.6).
Programerske naloge lahko prilagodimo s pomoˇcjo naslednjih parametrov [40]:
exercise.cap: Naslov naloge.
exercise.eval: Doloˇca, ali naj se naloga izvede vnaprej, da lahko upo- rabnik vidi privzeti izhod naloge (v primeru, da je nekaj kode napisane ˇze vnaprej). Privzeta vrednost FALSE.
exercise.lines Velikost urejevalnika kode v vrsticah.
exercise.timelimit: Najveˇcji ˇcas izvajanja kode v sekundah. Privzeto 3 sekunde, najveˇc 10 sekund.
exercise.completion Doloˇca, ali je omogoˇceno samodejno dopolnje- vanje kode v urejevalniku (privzeto TRUE).
exercise.diagnostics: Doloˇca, ali je omogoˇceno preverjanje sintakse
Diplomska naloga 39 kode v urejevalniku (privzeto TRUE).
Slika 5.3: Prikaz generiranega programerske naloge iz preprostega primera osnovnega delovanja.
Programerske naloge uporabljajo urejevalnik kode Ace, napisan v pro- gramskem jeziku JavaScript. Deluje podobno kot urejevalniki Sublime, Vim in TextMate in ga lahko enostavno vkljuˇcimo na spletne strani in JavaScript aplikacije. Ace se uporablja tudi kot privzeti urejevalnik v oblaˇcnem inte- griranem razvojnem okolju AWS Cloud9 [41, 42]. Omogoˇca tudi preverjanje sintakse in samodejno dopolnjevanje R kode (glej sliko 5.6).
Slika 5.3 prikazuje nalogo za uˇcenje jezika R. ˇCe uporabnik pri pisanju naredi sintaktiˇcno napako, ga urejevalnik o tem takoj obvesti. S klikom na gumbRun Code lahko uporabnik napisano kodo izvede. Ob kliku se vneˇsena R koda poˇslje na streˇznik Shiny, kjer se shrani v zaˇcasno datoteko .R, ki se nato pretvori v.Rmdz enim skupkom. Programski jezik skupka je R, skupek pa vsebuje poslano kodo. Skupek v datoteki .Rmd se nato izvede v procesu upodabljanja, v izhodno datoteko.html pa se izpiˇse rezultat izvajanja kode.
Uporabniku se vrne vsebina datoteke.html, nato pa se vse datoteke izbriˇsejo.
Kodo lahko na streˇzniku Shiny izvaja zgolj en uporabnik istoˇcasno, zato so tovrstne naloge primerne za preprosto kodo, ki se izvede v relativno kratkem ˇcasu.
Ce se interaktivna lekcija izvaja na streˇˇ zniku, kjer je nameˇsˇcen Linux, potem se opisani postopek izvede v novem procesu. V nasprotnem primeru izvajanje kode uporabnika poteka v istem procesu, kot teˇce interaktivna lek-
cija. Ce se koda izvaja dlje od doloˇˇ cenega najveˇcjega ˇcasa izvajanja, se uporabniku pod urejevalnikom kode prikaˇze obvestilo (glej sliko 5.4).
Slika 5.4: Obvestilo o poteku ˇcasa za izvedbo kode.
V nalogo smo vkljuˇcili tudi namige, ki uporabniku pomagajo pri reˇsevanju naloge. Namigi so na voljo s klikom na gumbHint, kot to prikazuje slika 5.5.
Ce ˇˇ zeli uporabnik z reˇsevanjem naloge zaˇceti znova in lahko to stori s klikom na gumb Start over, ki mu omogoˇca, da ponovno pridobi zaˇcetno izvorno kodo, ki jo je pripravil ustvarjalec interaktivne lekcije.
Slika 5.5: Prikaz namiga uporabniku.
Slike
Sliko v interaktivno lekcijo vkljuˇcimo s pomoˇcjo paketa knitr, kot to prika- zuje izvorna koda 5.7. Slikam lahko doloˇcimo velikost in opis.
Diplomska naloga 41
Slika 5.6: Prikaz samodejnega dopolnjevanja kode.
1 ```{r, out.width = "60%", out.height = "60%", fig.cap = "Opis slike."}
,→
2 knitr::include_graphics("images/image.jpg")
3 ```
Izvorna koda 5.7: Izvorna koda za vkljuˇcitev slike v interaktivno lekcijo.
Shranjevanje napredka
Paketlearnr poskrbi tudi za to, da uporabniku ni potrebno reˇsevati lekcije vedno znova od zaˇcetka. Lahko namreˇc reˇsi le del interaktivne lekcije in z reˇsevanjem nadaljuje kasneje, od tam kjer je konˇcal, saj se napredek uporab- nika shranjuje samodejno. Lekcije, ki se izvajajo lokalno, shranijo napredek v datoteˇcni sistem naprave. ˇCe pa se lekcije izvajajo na streˇzniku, se in- formacija o napredku shrani v NoSQL podatkovno bazo brskalnika [7]. Ob vsakokratnem izvajanju programerskih nalog v jeziku R se shrani tudi koda.
RAppArmor
Ker je izvajanje neznane kode nevarno, lahko ustvarjalec interaktivne lek- cije na napravi, kjer lekcija teˇce, poskrbi za boljˇso varnost z R paketom RAppArmor, ki je na voljo na operacijskem sistemu Linux. Paket z razliˇcnimi profili omogoˇca omejitev porabe spomina, procesorske moˇci, diska, omejitev dostopa do datoteˇcnega sistema, nastavitev najveˇcjega ˇcasa izvajanja kode.
Uporaba paketa RAppArmor ni samodejno vkljuˇcena v paketlearnr, ampak mora lastnik lekcije za njegovo namestitev slediti navodilom, ki so napisana na uradni Github strani paketa RAppArmor [43].
5.1.3 Izvedene izboljˇ save
Cilj diplomske naloge je bil nadgraditi, opisano zaˇcetno stanje paketalearnr (glej poglavje 5.1.2), da bo uporabniku omogoˇcal uˇcenje programiranja zno- traj izvajalnega okolja Node.js. Izvorna koda nadgrajene razliˇcice paketa je dostopna na https://github.com/tadson10/learnr. Ohranili smo osnovne komponente paketa, torej kvize, vpraˇsanja, slike, videoposnetke, shranjevanje napredka, programerske naloge za uˇcenje R, in dodali posebne vrste programerskih nalog za uˇcenje programskegega jezika JavaScript (izva- jalno okolje Node.js), HTML in CSS, hkrati pa smo izboljˇsali ˇse varnost iz- vajanja kode in uporabniˇsko izkuˇsnjo. Povzetek izvedenih izboljˇsav streˇznika Jobe:
1. Programerske naloge za uˇcenje Node.js
Prvi tip omogoˇca izvajanje enostavne JavaScript kode v R oko- lju z uporabo paketa V8 in omejeno uporabo zunanjih JavaScript knjiˇznic.
Drugi tip skupaj z uporabo streˇznika Jobe omogoˇca izvajanje kompleksnejˇse JavaScript kode (postavitev preprostega spletnega streˇznika), uporabo vseh zunanjih JavaScript knjiˇznic in vkljuˇcitev statiˇcnih HTML in CSS datotek.
2. Dodana moˇznost izbire med razliˇcnimi temami urejevalnika kode preko seznama na levi strani interaktivne lekcije (glej sliko 5.7).
3. Pri nalogah, ki se izvedejo znotraj R okolja na streˇzniku, kjer teˇce in- teraktivna lekcija, smo omejevanju raˇcunskih virov implementirali brez uporabe paketa RAppArmor, ki se sedaj uporablja zgolj za omejevanje dostopa do datoteˇcnega sistema.
Diplomska naloga 43 4. Dodano preverjanje sintakse in samodejno dopolnjevanje kode za Ja-
vaScript, HTML in CSS.
Za pomoˇc pri loˇcevanju med programerskimi nalogami za uˇcenje razliˇcnih jezikov in za dodatne nastavitve nalog za uˇcenje Node.js smo skupkom dodali naslednje parametre:
exercise.id - Enoliˇcna oznaka naloge, ki ji skupek pripada.
exercise.type - Tip programerske naloge, ki ji skupek pripada. Izbi- ramo lahko med “js”in “r”, ki je tudi privzeta vrednost.
exercise.serverIP - IP naslov streˇznika Jobe za izvajanje preproste JavaScript kode v peskovniku. Podamo tudi ˇstevilko vrat, kjer je streˇznik dostopen (npr. 10.10.10.10:4000).
exercise.libraryPath - Pot do direktorija z JavaScript knjiˇznjicami na streˇzniku, kjer teˇce interaktivna lekcija (npr. “/home/libraries”)).
Za nadgradnjo smo uporabili obstojeˇco implementacijo programerskih na- log, ki se pri nalogah z Node.js obravnavajo kot posamezne datoteke (v nadaljevanju bomo skupke z lastnostjo exercise.type=“js” navajali kot datoteke).
Datotekam moramo obvezno doloˇciti exercise.cap, ki predstavlja ime datoteke. Veˇc datotek se preko exercise.id zdruˇzuje v drugi tip progra- merske naloge tipa Node.js. Vsaka taka programerska naloga mora obvezno imeti datoteko z imenom “app.js”, imena pa se znotraj iste naloge ne smejo podvajati.
Vrsto naloge doloˇcimo preko parametraexercise.type, ki mu nastavimo vrednost “js”, ˇce gre za nalogo tipa Node.js.
V primeru, da ˇzelimo kodo izvajati na streˇzniku Jobe, je potrebno navesti exercise.serverIP, ki mu moramo dodati tudi ˇstevilko vrat, kjer posluˇsa streˇznik. ˇCe to polje ni izpolnjeno, se koda, ki jo vnese uporabnik, izvede na streˇzniku Shiny aplikacije znotraj R okolja s pomoˇcjo paketa V8, ki omogoˇca izvajanje JavaScript programske kode.
Rezultat nadgradnje paketa learnr si bomo pogledali na delujoˇcem pri- meru interaktivne lekcije, ki je dostopen na https://github.com/tadson1 0/LearnBox/blob/master/shiny/PrimerIzboljsav/PrimerIzboljsav.R md.
Nadgrajena razliˇcica paketalearnromogoˇca izdelavo dveh tipov Node.js programerskih nalog.
1. Prvi tip
Prvi tip(glej izvorno kodo 5.10 in sliko 5.7) predstavljajo naloge, ki od upo- rabnika zahtevajo zgolj reˇsevanje preprostih matematiˇcnih in algoritmiˇcnih problemov v jeziku JavaScript in se glede na lokacijo izvajanja ne razlikujejo od obiˇcajnih nalog za uˇcenje jezika R. Koda, ki jo vnese uporabnik, se v obeh primerih izvede na streˇzniku, kjer teˇce interaktivna lekcija. Da lahko v R izvajalnem okolju izvedemo JavaScript kodo, poskrbi ˇze prej omenjeni paket V8 [44], ki predstavlja vmesnik za Googlovo odprtokodno JavaScript izvajalno okolje, vendar brez dostopa do DOM.
Z uporabo novega parametra exercise.libraryPath uporabnikom in- teraktivne lekcije omogoˇcimo uporabo dodatnih JavaScript knjiˇznic. Para- meter predstavlja absolutno pot do direktorija, kjer se na streˇzniku z in- teraktivno lekcijo nahajajo JavaScript knjiˇznice. Ob vsakokratnem izvaja- nju programerske naloge V8 pridobi knjiˇznice iz navedenega direktorija in omogoˇci njihovo uporabo. Pri tem je potrebno omeniti, da se vedno prido- bijo vse knjiˇznice iz direktorija, zato je priporoˇcljivo v direktoriju imeti zgolj knjiˇznice, ki jih za doloˇceno nalogo uporabnik potrebuje, saj je v primeru velikega ˇstevila knjiˇznic izvajanje JavaScript kode obˇcutno poˇcasnejˇse. Ker V8 ne podpira uporabe ukaza requirev jeziku JavaScript, ki omogoˇca upo- rabo zunanjih knjiˇznic, je uporaba knjiˇznic zelo omejena. Zato knjiˇznic, ki za svoje delovanje uporabljajo ˇse kakˇsno drugo knjiˇznico, ne moremo upora- bljati. Uporaba prvega tipa nalog je zato bolj primerna za pisanje programov,
Diplomska naloga 45 ki za svoje delovanje ne potrebujejo zunanjih knjiˇznic (npr. reˇsevanje ma- tematiˇcnih problemov, pisanje algoritmov). Primer uporabe paketa V8 za izvedbo JavaScript kode skupaj z zunanjimi knjiˇznicami znotraj R okolja prikazuje izvorna koda 5.8
Koda znotraj skupka, ki predstavlja programersko nalogo, se v procesu upodabljanja dokumenta ne izvede, zato smo kot programski jezik skupka navedli JavaScript (beseda “js” takoj na zaˇcetku skupka), saj omenjena la- stnost ne vpliva na delovanje interaktivne lekcije.
1 library(V8)
2 ct <- v8()
3 ct$source('/home/ubuntu/Desktop/lib/math.js')
4 jsUkaz <- 'math.round(math.e, 3)'
5 ct$eval(jsUkaz)
Izvorna koda 5.8: Primer uporabe paketa V8 za izvedbo JavaScript kode in uporabo zunanjih knjiˇznic.
Varnost
Da bi postopek zagotavljanja varnosti poenostavilii, smo v paketu learnr za izvajanje neznane kode uporabili funkcijo unix::eval safe(glej izvorno kodo 5.9), ki omogoˇca omejevanje raˇcunskih virov uporabniku tudi brez upo- rabe paketa RAppArmor. Funkcija je dostopna le na Linux in Unix opera- cijskih sistemih, deluje pa tako, da ustvari nov razcep procesa (ang. fork) in kodo, podano v obliki izraza, izvede brez vpliva na osnovno R sejo [45].
Funkcijiunix::eval safekot vhodni parameter podamo klic funkcijeeval- uate exercise, ki poskrbi za izvedbo kode (glej poglavje 5.1.2), ta pa se nato izvede z upoˇstevanimi omejitvami raˇcunskih virov in ˇcasa.
Paket RAppArmor se sedaj uporablja zgolj za omejevanje dostopa do
1 unix::eval_safe(evaluate_exercise(code), profile = "r-user", timeout = 3, priority = 10, rlimits = c(nproc=1000, as = 50 * 1024 * 1024 * 1024))
,→
,→
Izvorna koda 5.9: Primer uporabe funkcijeunix::eval safe, ki z omejitvami pokliˇce funkcijo evaluate exercise za izvedbo kode.
datoteˇcnega sistema. Pri uporabi dodatnih JavaScript knjiˇznic je potrebno v RAppArmor profil “r-user” dodati dovoljenje za bralni dostop do direktorija s knjiˇznicami. To storimo tako, da v datoteko /etc/apparmor.d/rappar mor.d/r-user dodamo spodnjo vrstico, kjer {{libraryPath}} predstavlja absolutno pot do direktorija s knjiˇznicami:
{{libraryPath}}/*.js r,
Izvajanja uporabnikove kode na operacijskih sistemih Windows in MacOS nismo spreminjali, zato se koda v tem primeru ˇse vedno izvede v isti R seji z uporabo paketa V8 (glej izvorno kod 5.8). Potrebno je ˇse omeniti, da na ome- njenih operacijskih sistemih izvajanje programa lahko omejimo zgolj ˇcasovno s funkcijo setTimeLimit, vgrajeno v R, ki pa pri izvajanju JavaScript kode ne deluje vedno tako, kot bi priˇcakovali. ˇCas izvajanja se namreˇc preverja le takrat, ko bi lahko priˇslo do prekinitve izvajanja programa. V R so te situacije pogoste, v prevedeni JavaScript kodi pa se lahko zgodi, da se ˇcas izvajanja preveri ˇsele po izvedeni celotni kodi, kar lahko s pridom izkoriˇsˇcajo zlonamerni uporabniki [46].
Z varnostnega staliˇsˇca je za izvajanje interaktivnih lekcij zato boljˇsa izbira operacijskega sistema Linux.
Izvajanje kode
Izvorna koda 5.10 prikazuje R Markdown izvorno kodo za kreiranje pr- vega tipa programerskih nalog za uˇcenje jezika JavaScript, kjer ˇcas izvajanja
Diplomska naloga 47
1 ```{r simpleJS, exercise=TRUE, exercise.timelimit = 2, exercise.cap = "app.js", exercise.id="firstJSExercise", exercise.type = "js", exercise.libraryPath =
"/home/libraries"}
,→
,→
,→
2
3 function fib(int n) {}
4
5 ```
Izvorna koda 5.10: Izvorna koda za kreiranje prvega tipa programerskih na- loga za uˇcenje Node.js.
Slika 5.7: Uporabniˇski vmesnik naloge prvega tipa programerskih naloga za uˇcenje Node.js.
omejimo na 2 sekundi. Uporabniˇski vmesnik za kreirano nalogo je viden na sliki 5.7 in je enak kot pri programerskih nalogah za uˇcenje R. Ko uporab- nik kodo vnese v urejevalnik, jo s klikom na gumb Run code izvede. Takrat se koda poˇslje na streˇznik, kjer teˇce interaktivna lekcija in izvede znotraj R okolja s pomoˇcjo paketaV8, pod nalogo pa se nato prikaˇze rezultat izvajanja.
Posamezna programerska naloga prvega tipa lahko vsebuje zgolj eno da- toteko, katere ime mora biti “app.js”.
