Dashboardin toteuttaminen Moodle-lisäosaan hyödyntäen Gridstack.js-kirjastoa
Siuruainen, Rosa (2022)
2022
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-202202252881
https://urn.fi/URN:NBN:fi:amk-202202252881
Tiivistelmä
Tämän opinnäytetyön tarkoituksena on luoda modulaarinen ja dynaamisesti muokattava dashboard-näkymä Moodlen lisäosaan hyödyntäen kolmannen osapuolen Javascript-kirjastoa. Opinnäytetyössä esitellään Moodle ohjelmointiteknisestä näkökulmasta sekä kehitystyössä käytetyt tekniikat.
Moodle on avoimen lähdekoodin ohjelmisto, jolla voidaan luoda digitaalisia oppimisympäristöjä. Moodlen toimintoja voidaan laajentaa lisäosien avulla. Dashboard-näkymän kehittämiseen käytettiin PHP- ja Javascript-ohjelmointikieliä. Näistä esitellään erityisesti Moodle-ohjelmointiin liittyviä erityispiirteitä. Käytettäväksi kirjastoksi valikoitui Gridstack.js, joka on luotu helpottamaan dynaamisten drag and drop -tyyppisten näkymien luomista. Näkymän toteuttamisessa hyödynnettiin Mustache-templatea, jonka avulla voidaan renderöidä dataa HTML-muotoon.
Dashboard-näkymä kehitettiin olemassa olevaan Moodlen lisäosaan. Dashboardin muokkaamiseen luotiin erillinen näkymä, jossa käyttäjä voi muokata näkymää poistamalla tai lisäämällä elementtejä sekä muuttamalla niiden kokoa. Kaikki nämä toiminnot tapahtuvat drag and drop -periaatteella, eli raahaamalla. Käyttäjän luoma dashboardin asettelu tallennetaan tietokantaan, jotta käyttäjän ei tarvitse jatkuvasti luoda samaa näkymää uudelleen. Toimeksi-antaja haluaa esittää dashboardilla dataa visuaalisessa muodossa hyödyntäen Moodlen Charts API:a. Tämän toiminta dashboardilla testattiin luomalla muutamia testielementtejä.
Opinnäytetyön lopputuloksena syntyi toimeksiantajan toiveiden mukainen, dynaamisesti muokattava dashboard-näkymä. Näkymän kehittämistä jatketaan tämän opinnäytetyön ulkopuolella ja lopulta se on tarkoitus liittää mukaan kaupalliseen tuotteeseen.
Moodle on avoimen lähdekoodin ohjelmisto, jolla voidaan luoda digitaalisia oppimisympäristöjä. Moodlen toimintoja voidaan laajentaa lisäosien avulla. Dashboard-näkymän kehittämiseen käytettiin PHP- ja Javascript-ohjelmointikieliä. Näistä esitellään erityisesti Moodle-ohjelmointiin liittyviä erityispiirteitä. Käytettäväksi kirjastoksi valikoitui Gridstack.js, joka on luotu helpottamaan dynaamisten drag and drop -tyyppisten näkymien luomista. Näkymän toteuttamisessa hyödynnettiin Mustache-templatea, jonka avulla voidaan renderöidä dataa HTML-muotoon.
Dashboard-näkymä kehitettiin olemassa olevaan Moodlen lisäosaan. Dashboardin muokkaamiseen luotiin erillinen näkymä, jossa käyttäjä voi muokata näkymää poistamalla tai lisäämällä elementtejä sekä muuttamalla niiden kokoa. Kaikki nämä toiminnot tapahtuvat drag and drop -periaatteella, eli raahaamalla. Käyttäjän luoma dashboardin asettelu tallennetaan tietokantaan, jotta käyttäjän ei tarvitse jatkuvasti luoda samaa näkymää uudelleen. Toimeksi-antaja haluaa esittää dashboardilla dataa visuaalisessa muodossa hyödyntäen Moodlen Charts API:a. Tämän toiminta dashboardilla testattiin luomalla muutamia testielementtejä.
Opinnäytetyön lopputuloksena syntyi toimeksiantajan toiveiden mukainen, dynaamisesti muokattava dashboard-näkymä. Näkymän kehittämistä jatketaan tämän opinnäytetyön ulkopuolella ja lopulta se on tarkoitus liittää mukaan kaupalliseen tuotteeseen.