Prispevek s konference OTS 2015 z naslovom “Ogrodje AngularJS za portal COBISS/SciMet”

Na letošnji 20. konferenci OTS 2015, ki se je odvijala na Fakulteti za elektrotehniko, računalništvo in informatiko v Mariboru, smo imeli predstavnike med predavatelji tudi IZUM-ovci. Luka Juršnik - OTS 2015 - IZUM V nadaljevanju si lahko preberete povzetek prispevka.

V zadnjih dvajsetih letih je internet doživljal ogromno rast, v povprečju kar za 2 % svetovne populacije na leto. Vse se je začelo s statičnimi spletnimi stranmi, kasneje so se začeli uvajati tudi interaktivni elementi, ki jih je omogočil JavaScript, kar hitro za tem pa so se na široko odprla vrata spletnim aplikacijam, ki uporabljajo povezovanje s strežniki in omogočajo asinhrono nalaganje vsebin (AJAX). Takšne spletne aplikacije so predstavljale veliko konkurenco klasičnim namiznim aplikacijam. Intenziven tehnološki razvoj v zadnjih letih je omogočil boljši izkoristek potenciala odjemalcev pri razvoju spletnih aplikacij. S tem se je povečala tudi ponudba ogrodij, kar sicer najprej oteži izbiro ogrodja za razvoj, kasneje pa olajša razvoj aplikacije v modelu MVW (Model-View-Whatever) na strani odjemalca. Večina razvijalcev se je verjetno že srečala z zahtevo, da je treba obstoječe spletne strani ali aplikacije približati sodobnim zahtevam in jih prilagoditi tudi mobilnim napravam. Tudi v IZUM-u se srečujemo s podobnimi zahtevami, zato smo se odločili za razvoj novega portala COBISS/SciMet, ki je namenjen slovenski raziskovalni skupnosti za spremljanje raziskovalne uspešnosti s pomočjo scientometričnih metod. Pri tem je bilo glavno vodilo razviti aplikacijo z enotnim večjezičnim grafičnim vmesnikom za spletne in mobilne odjemalce z odzivnim dizajnom (RWD – Responsive web design) in ob upoštevanju novih tehnologij in smernic spletnega razvoja.

V portal COBISS/SciMet smo v prvi fazi vključili vse funkcionalnosti iz obstoječe aplikacije Naši v WoS in Scopus, ki pa je bolj dokumentno naravnana in vsebuje manj podatkov, pripravljenih v realnem času. Glede na uporabniške zahteve smo portal prototipno začeli dopolnjevati z zahtevnejšimi funkcionalnostmi, ki podpirajo pošiljanje in spreminjanje podatkov na strežniku in obdelovanje ter prikazovanje dobljenih podatkov (tudi grafično) s strani strežnika na zahtevo odjemalca v realnem času. Podatki se zdaj obdelujejo in (večinoma) pripravijo za prikaz HTML na strežniku, v spletni aplikaciji pa se pripravljen dokument HTML prikaže v pojavnem oknu. Ker pa za zajemanje podatkov o slovenski raziskovalni produkciji že imamo razvite spletne storitve, ki za različne vhodne kriterije pripravijo podatke v formatih TXT, XML in JSON, je bil naš cilj, da jih v portalu COBISS/SciMet uporabimo v čim večji meri. Z izbiro pravega ogrodja, ki bi nam omogočilo razvoj spletne aplikacije za enostavno in bogato prikazovanje teh podatkov, bi portal dobil dodatno vrednost pri spremljanju slovenske raziskovalne uspešnosti. Ker so segmenti sistema COBISS tradicionalno večjezični (predvsem zaradi mednarodne mreže COBISS.Net, ki povezuje bibliografske sisteme na širšem področju zahodnega Balkana), je bil poudarek pri načrtovanju in izbiri ogrodja tudi na možnosti globalizacije. Še pomembnejši pa je bil problem vzdrževanja in upravljanja vsebine spletnih strani, saj v IZUM-u v ta namen nimamo vzpostavljenega sistema za upravljanje z vsebinami CMS (Content Management System). Za pripravo vsebine spletnih strani se uporabljajo standardna pisarniška orodja (npr. beležnica). V določenih primerih se vsebina vnaša v vnaprej pripravljene datoteke HTML, vendar njihovo ažuriranje zahteva določeno programersko in oblikovalsko znanje urejevalcev vsebine, največkrat pa pripravljeno vsebino v spletno aplikacijo vnašajo kar razvijalci. Zato smo pri razvoju portala COBISS/SciMet poskusili v okviru ogrodja najti rešitev tudi za ta problem in omogočiti urejevalcem vsebine vzdrževanje le-te s spletnim administracijskim vmesnikom za upravljanje s vsebino po načelu WYSIWYG (kar vidiš, to dobiš).

Danes obstaja že veliko ogrodij, ki poslovno logiko spletne aplikacije izvajajo na odjemalčevi strani in strežnik uporabljajo le še kot dostopno točko za API, ki ponuja podatke v različnih formatih. Eno takšnih ogrodij je AngularJS, ki je glede na statistike spletnih portalov GitHub in Stackoverflow trenutno daleč najbolj priljubljeno in največkrat uporabljeno. V fazi načrtovanja portala COBISS/SciMet smo, razen tega ogrodja, pregledali še druga najbolj razširjena ogrodja za razvoj spletnih aplikacij ene same strani (SPA – Single Page Application) Backbone, Ember.js in Knockout ter najpogosteje uporabljene knjižnice za razvoj spletnih strani in aplikacij, kot so Bootstrap, jQuery in Modernizr.

Glede na te analize ter strukturo, funkcionalnost in namembnost portala COBISS/SciMet smo se odločili za razvoj aplikacije z ogrodjem AngularJS v kombinaciji s pomožnimi moduli (knjižnicami in ogrodji), ki so nam omogočili ustrezno implementacijo postavljenih zahtev (v vsebinskem in tudi v tehničnem smislu), pri tem pa smo obdržali uporabniško izkušnjo na visokem nivoju na vseh vrstah odjemalcev. Pri izbiri dodatnih modulov smo bili zelo pozorni na hitrost in obremenitev odjemalca pri nalaganju teh modulov v aplikacijo, glede na to, da se zavedamo, kako pomemben je za uporabnike prenos podatkov na mobilnih napravah. Zato smo se pri razvoju trudili uporabljati predvsem module iz AngularJS oz. čim manjše dodatne knjižnice in tako uspeli razviti aplikacijo brez dodatne uporabe knjižnice jQuery. V prispevku so opisani koncepti ogrodja AngularJS in pridruženih modulov, ki smo jih uporabili pri razvoju portala COBISS/SciMet, ter specifike in rešitve, ki smo jih uporabili za dobro uporabniško izkušnjo in izpolnitev postavljenih vsebinskih in tehničnih zahtev, kot so večjezičnost, grafična predstavitev podatkov, dinamično nalaganje, modul za upravljanje z vsebino strani ter enoten uporabniški vmesnik za spletne in mobilne odjemalce z odzivnim dizajnom. Celotni članek je na voljo na povezavi. Ogledate pa si lahko tudi predstavitev.

Dodaj odgovor

Vaš e-naslov ne bo objavljen.

Lahko uporabite te oznake HTML in atribute: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>