Cloud application for sharing task lists

(1)

Univerza v Ljubljani

Fakulteta za raˇ

cunalniˇ

stvo in informatiko

Rok Knez

Oblaˇ

cna aplikacija za deljenje

veˇ

copravilnostnih seznamov z loˇ

cenim

zalednim delom

DIPLOMSKO DELO

VISOKOˇSOLSKI STROKOVNI ˇSTUDIJSKI PROGRAM PRVE

STOPNJE RA ˇCUNALNIˇSTVO IN INFORMATIKA

Mentor: prof. dr. Marko Bajec

(2)

(3)

(4)

(5)

Fakulteta za raˇcunalniˇstvo in informatiko izdaja naslednjo nalogo:

Oblaˇcna aplikacija za deljenje veˇcopravilnostnih seznamov z loˇcenim zalednim delom

Tematika naloge:

V okviru diplomske naloge razvijte aplikacijo za deljenje veˇcopravilnostnih seznamov s poljubnimi uporabniki. Za razvoj aplikacije uporabite tehnolo-gije, ki omogoˇcajo uˇcinkovit razvoj sodobnih spletnih aplikacij. Razvoj naj zajema dosledno izvedbo analize in naˇcrtovanja pred samim razvojem.

(6)

(7)

Izjava o avtorstvu diplomskega dela

Spodaj podpisani Rok Knez sem avtor diplomskega dela z naslovom:

Oblaˇcna aplikacija za deljenje veˇcopravilnostnih seznamov z loˇcenim za-lednim delom

S svojim podpisom zagotavljam, da:

• sem diplomsko delo izdelal samostojno pod mentorstvom prof. dr. Marko Bajec,

• so elektronska oblika diplomskega dela, naslov (slov., angl.), povzetek (slov., angl.) ter kljuˇcne besede (slov., angl.) identiˇcni s tiskano obliko diplomskega dela,

• soglaˇsam z javno objavo elektronske oblike diplomskega dela na svetov-nem spletu preko univerzitetnega spletnega arhiva.

(8)

(9)

Zahvaljujem se vsem svojim bliˇznjim. Posebej se zahvaljujem svojemu mentorju, prof. dr. Marko Bajecu, za nasvete in pomoˇc pri izdelavi diplom-skega dela.

(10)

(11)

Vsem, ki so me v ˇzivljenju usmerjali do trenutne poti. Implicitno ali eksplicitno.

(12)

(13)

Kazalo

Povzetek Abstract

1 Uvod 1

2 Raˇcunalniˇstvo v oblaku 3

2.1 Modeli storitve . . . 3

2.1.1 Programska oprema kot storitev . . . 3

2.1.2 Platforma kot storitev . . . 4

2.1.3 Infrastruktura kot storitev . . . 4

2.2 Modeli ponudbe . . . 4

2.2.1 Zasebni oblak . . . 4

2.2.2 Druˇzbeni oblak . . . 4

2.2.3 Javni oblaki . . . 5

3 Tehnologije in orodja 7 3.1 Razvoj uporabniˇskega vmesnika . . . 7

3.1.1 HTML in HTML5 . . . 7 3.1.2 CSS . . . 8 3.1.3 SASS . . . 8 3.1.4 Javascript . . . 8 3.1.5 Bootstrap . . . 9 3.1.6 AngularJS . . . 9

(14)

KAZALO 3.1.7 RestAngular . . . 9 3.1.8 ngDialog . . . 10 3.1.9 Yeoman . . . 10 3.1.10 Grunt . . . 10 3.1.11 Bower . . . 10

3.1.12 Sklad tehnologij uporabniˇskega vmesnika . . . 11

3.2 Zaledni sistem . . . 12

3.2.1 Python . . . 12

3.2.2 Django . . . 12

3.2.3 REST . . . 12

3.2.4 Django REST Framework . . . 13

3.2.5 Sklad tehnologij zalednega sistema . . . 13

3.3 nginx . . . 14

3.4 Virtualenv . . . 14

3.5 GIT . . . 14

3.6 Fabric . . . 15

3.7 PyCharm . . . 15

4 Naˇcrtovanje aplikacije 17 4.1 Ideja . . . 17

4.2 Zahteve in ˇzeljene funkcionalnosti aplikacije . . . 17

4.3 Specifikacije zahtev aplikacije . . . 18

4.4 Diagram poteka za primer uporabe aplikacije . . . 19

4.4.1 Scenarij primera uporabe: Ustvari seznam . . . 20

4.4.1.1 Pozitiven scenarij . . . 20

4.4.1.2 Alternative scenarija . . . 20

4.4.2 Scenarij primera uporabe: Posodobi seznam . . . 20

4.4.3 Scenarij primera uporabe: Izbriˇsi seznam . . . 21

(15)

KAZALO

4.4.4 Scenarij primera uporabe: Vˇseˇckaj seznam . . . 21

4.4.5 Scenarij primera uporabe: Kopiraj seznam . . . 22

5 Razvoj aplikacije 25 5.1 Zaledni sistem . . . 25

5.1.1 Naˇcrtovanje podatkovne baze . . . 25

5.1.1.1 Entitetno relacijski diagram . . . 26

5.1.1.2 Podatkovni modeli . . . 27

5.1.1.3 Post-procesiranje fotografij seznama . . . 30

5.1.1.4 Kreiranje QR HASHA . . . 31

5.1.1.5 API . . . 33

5.1.2 Posebni klici . . . 35

5.1.3 Dodatne informacije . . . 36

5.1.4 Iskanje seznamov po znaˇckah . . . 37

5.1.5 Nastavitve streˇznika zalednega sistema . . . 38

5.2 Uporabniˇski vmesnik . . . 40

5.2.1 Datoteke SASS . . . 40

5.2.2 Pogledi . . . 45

5.2.2.1 Priklapljanje nadzornika . . . 45

5.2.2.2 Delo z obrazci . . . 45

5.2.2.3 Pogled za avtomatsko predlaganje seznamov glede na vnos iskalnih parametrov . . . 48

5.2.3 Storitve . . . 49

5.2.3.1 Storitev REST[18] . . . 49

5.2.3.2 Storitev za delo s pojavnimi okni . . . 51

5.2.4 Nadzorniki . . . 52

(16)

KAZALO 5.2.4.2 Dodajanje novega predmeta posameznega

se-znama . . . 53 5.2.5 Nadzornik za avtomatsko predlaganje seznamov glede

na vnos iskalnih parametrov . . . 56 5.2.6 Nastavitve streˇznika uporabniˇskega vmesnika . . . 58

6 Sklepne ugotovitve 61

Literatura 63

(17)

Seznam uporabljenih kratic

kratica angleˇsko slovensko

HTML Hyper Text Markup Language oznaˇcevalni jezik

HTML5 Hyper Text Markup Language v5 nadgrajen HTML

CSS Cascading Style Sheets kaskadna slogovna predloga

DOM Document Object Model objektni model dokumenta

SASS Syntactically Awesome Style Sheets sintaktiˇcno super slogovne predloge REST Representational state transfer zastopani prenos stanja

URL Uniform Resource Locator enoliˇcni krajevnik vira

HTTP HyperText Transfer Protocol protokol za prenos hiperpovezav API Application Programming Interface vmesnik za programiranje aplikacij

(18)

(19)

Povzetek

Vsem se je ˇze zgodilo, da smo v doloˇcenem dnevu imeli ogromno oprav-kov. Preobremenjenost zaradi slabe organiziranosti nas je veˇckrat pripe-ljala do neproduktivnih dni, oziroma slabo izpeljanih postopkov. Tako se vsi posluˇzujemo pisanja veˇcopravilnostnih seznamov, s pomoˇcjo katerih si razdelamo naˇse naloge in na podlagi teh ustvarimo strukturirano reˇsevanje problemov.

Namen diplomskega dela je bilo razviti aplikacijo za deljenje veˇcopravilnostnih seznamov. Aplikacija omogoˇca pisanje veˇcopravilnostnih seznamov, iskanje seznamov po znaˇckah, vˇseˇckanje seznamov, kopiranje seznamov, komenti-ranje posameznih seznamov in pregled obstojeˇcih seznamov na strani upo-rabniˇskega profila.

Kljuˇcne besede: veˇcopravilnostni seznam, spletna aplikacija, AngularJS, Javascript, REST, Django, Python.

(20)

(21)

Abstract

We have all had days, where we wanted to finish multiple errands in a single day. Feeling overwhelmed from lack of organization, we have all experienced a lack of productivity and poorly finished errands. To help us better achieve and manage daily tasks, we have all, at least once, created a multitasking list to help us master our tasks.

The aim of this thesis was to develop an application to share multitasking lists. The application enables us to create, share, like, copy, comment and view existing lists.

Keywords: multitasking list, web application, AngularJS, Javascript, REST, Django, Python.

(22)

(23)

Poglavje 1

Uvod

Vsem se je ˇze zgodilo, da smo imeli v doloˇcenem dnevu ogromno opravkov. Preobremenjenost zaradi neorganizacije, ali slabe organizacije nas je veˇckrat pripeljala do neproduktivnih dni, oziroma slabo izpeljanih postopkov. Tako se vsi posluˇzujemo pisanja veˇcopravilnostnih seznamov, s pomoˇcjo katerih si razdelamo naˇse naloge in na podlagi teh ustvarimo strukturirano reˇsevanje problemov.

Pri izdelavi naˇse aplikacije smo si postavili naslednje vpraˇsanje:

Ali se doloˇcene naloge ponavljajo do takˇsne mere, da si lahko uporabniki veˇcopravilnostne sezname delijo?

V sklopu diplomske naloge je bila razvita oblaˇcna aplikacija z loˇcenim zalednim sistemom, kateri omogoˇca naknaden priklop mobilnih aplikacij na ˇze obstojeˇco podatkovno bazo. V aplikaciji uporabnikom ponujamo funkci-onalnosti, kot so pisanje veˇcopravilnostnih seznamov, iskanje seznamov po znaˇckah, vˇseˇckanje seznamov, kopiranje seznamov, komentiranje posameznih seznamov in pregled obstojeˇcih seznamov na strani uporabniˇskega profila. Uporabnik lahko posamezen veˇcopravilnostni seznam vˇseˇcka, ob vˇseˇckanju pa se mu seznam prikaˇze na njegovem profilu. Ob akciji vˇseˇckanja se

(24)

2 POGLAVJE 1. UVOD

rabniku na dotiˇcnem seznamu prikaˇzejo potrditvena polja, s pomoˇcjo katerih lahko nato zabeleˇzi, ali je posamezen predmet seznama konˇcal.

(25)

Poglavje 2

Raˇ

cunalniˇ

stvo v oblaku

Raˇcunalniˇstvo v oblaku je model za omogoˇcanje vseprisotnega, priroˇcnega dostopa do omreˇzja na zahtevo, ki pridobiva svoje zmoˇznosti iz bazena nasta-vljivih virov za raˇcunanje (npr. streˇznikov, naprav za shranjevanje, aplikacij, storitev, ipd.).[15]

Razvijalci z inovativnimi idejami za nove internetne storitve tako ne po-trebujejo veˇc velike koliˇcine kapitala za nakup strojne opreme, ki bi poganjala njihove storitve. Podjetja z veliko serijo raˇcunskih nalog lahko s pomoˇcjo raˇcunalniˇstva v oblaku pridobijo rezultate tako hitro, kot lahko se lahko nji-hovi programi ˇsirijo. Za primer, uporaba 1000 streˇznikov za eno uro stane pribliˇzno isto, kot 1 streˇznik 1000 ur. [16]

2.1 Modeli storitve

2.1.1 Programska oprema kot storitev

Programska oprema kot storitev, ali angleˇsko Software as a Service (SaaS) omogoˇca potroˇsniku uporabo ponudnikovih aplikacij, katere teˇcejo na oblaˇcni infrastrukturi. Te aplikacije so dostopne iz razliˇcnih klientov, kot je naprimer spletni brskalnik, razliˇcne mobilne naprave, ali programski klienti.

(26)

4 POGLAVJE 2. RA ˇCUNALNIˇSTVO V OBLAKU

2.1.2 Platforma kot storitev

Platforma kot storitev, ali angleˇsko Platform as a Service (PaaS) omogoˇca na streˇzniˇsko infrastrukturo potroˇsniku nalaganje in poganjanje lastno ustvar-jenih ali pridoblustvar-jenih aplikacij, kot so naprimer razliˇcni skupki programske kode, knjiˇznic, storitev in orodij, katere podpira ponudnik.

2.1.3 Infrastruktura kot storitev

Infrastruktura kot storitev, ali angleˇsko Infrastructure as a Service (IaaS) omogoˇca potroˇsniku nadzor, procesiranje, shranjevanje in ostale temeljne raˇcunalniˇske storitve. Potroˇsnik lahko s pomoˇcjo Infrastrukture kot storitev nalaga in poganja bistveno programsko opremo, kot je naprimer operacijski sistem.

2.2 Modeli ponudbe

2.2.1 Zasebni oblak

Dostop do oblaˇcne infrastrukture je omogoˇcen samo eni pravni ali fiziˇcni osebi. Seveda lahko pravno osebo razdelimo na veˇc porabnikov, ki si delijo dostop do oblaˇcne infrastrukture. Urejanje in lastniˇstvo so v celoti preneˇsene na lastnika, ki lahko upravlja osebno, torej upravljanje prevzame oseba zno-traj podjetja, ali pa najame skrbnika za upravljanje z infrastrukturo.

2.2.2 Druˇ

zbeni oblak

Dostop do oblaˇcne infrastrukture je omogoˇcen posebej doloˇceni skupini po-troˇsnikov iz razliˇcnih organizacij, ki imajo skupne cilje (npr. specifiˇcne zah-teve varnosti). Lastniˇstvo in urejanje oblaˇcne infrastrukture je lahko deljeno na razliˇcne ˇclane iz razliˇcnih organizacij.

(27)

2.2. MODELI PONUDBE 5

2.2.3 Javni oblaki

Dostop do oblaˇcne infrastrukture je namenjen ˇsirˇsi javnosti. Tako lahko z oblaˇcno infrastrukturo upravljajo podjetja, akademske ustanove, javne usta-nove, ali kombinacija veˇcih.

(28)

(29)

Poglavje 3

Tehnologije in orodja

3.1 Razvoj uporabniˇ

skega vmesnika

Ker ˇzelimo dobro orisati loˇcen razvoj uporabniˇskega vmesnika in razvoj zale-dnega sistema, bomo posebej opisali tehnologije uporabljene za razvoj upo-rabniˇskega vmesnika in tehnologije uporabljene za razvoj zalednega sistema.

3.1.1 HTML in HTML5

HTML[1] je oznaˇcevalni jezik, katerega zgodovina sega v konec leta 1990, ko je Tim Berners-Lee predlagal poenoten sistem za izmenjavo sporoˇcil preko spleta. Uporablja se za strukturiranje in predstavitev vsebine na svetov-nem spletu. S pomoˇcjo HTML znaˇck postavimo strukturo spletne strani, katero brskalnik interpretira in prikaˇze na zaslon. V veˇcini primerov se HTML znaˇcke uporabljajo v parih, ki prikaˇzejo zaˇcetek in konec vsebine med doloˇceno znaˇcko. Primer je znaˇcka za poglavje, katere zaˇcetek oznaˇcimo z<h1>, konec pa z </h1>.

HTML5[2] je nadgradnja tehnologije HTML, poudarek pa temelji pred-vsem na semantiˇcnih znaˇckah. Tako lahko zamenjamo HTML znaˇcke, kot so naprimer<div> </div>s semantiˇcno vrednejˇsimi znaˇckami, kot so naprimer <header> </header>, <nav> </nav>, <section> </section>, <article> </article>, <footer> </footer. Te znaˇcke pripomorejo k boljˇsemu

(30)

8 POGLAVJE 3. TEHNOLOGIJE IN ORODJA

ksiranju naˇse spletne strani, saj lahko zaradi poveˇcane semantiˇcne vredno-sti brskalniki laˇzje ugotovijo vsebino naˇse spletne strani. HTML5 nadgra-dnja vsebuje tudi elemente za predvajanje multimedije <audio>, <video>, razliˇcne grafiˇcne elemente, kot sta naprimer <svg> in<canvas>, katera nam omogoˇcata izris vektorskih grafik.

3.1.2 CSS

Iz potrebe po boljˇsi strukturiranosti, laˇzjem urejanju in moˇznosti reciklaˇze uporabljenih stilov za oblikovanje HTML spletnih strani se je razvil CSS[3]. S pomoˇcjo CSSja lahko uredimo izgled HTML kode z doloˇcanjem atributov class ali id HTML znaˇckam. Te atribute imenujemo tudi oznaˇcevalniki stilov. Z loˇcevanjem vsebine in oblikovanja strani je moˇzna ponovna uporaba CSS kode na razliˇcnih HTML straneh.

3.1.3 SASS

SASS[4] je skriptni jezik, ki se je razvil zaradi boljˇse organizacije jezika CSS[3]. Ker je pri kompleksnejˇsih spletnih straneh, kot so naprimer spletne oblaˇcne aplikacije kar nekaj kaskadnih slogov, nam pomaga pri organizirano-sti CSS kode SASS. SASS je predprocesor CSSja, ki nam omogoˇca uporabo spremenljivk, gnezdenih stilov, funkcij in ˇse mnogo drugih dodatkov, ki nam opazno pohitrijo razvoj. Deluje tako, da nam SASS prevajalnik prevede kodo v navaden CSS, katerega lahko potem brskalniki interpretirajo.

3.1.4 Javascript

Javascript[5] je skriptni programski jezik s podporo koncepta objektnega pro-gramiranja. Najveˇckrat se uporablja kot podpora HTML[1] kodi za manipu-lacijo z DOM drevesom. Javascript se izvaja lokalno na klientovem spletnem brskalniku. Struktura Javascripta nam omogoˇca asinhrono izvajanje funkcij na strani klienta v povezavi s streˇznikom. Javascript v projekt vkljuˇcimo kot zunanjo datoteko, ali pa ga vkljuˇcimo kar med HTML[1] kodo.

(31)

3.1. RAZVOJ UPORABNIˇSKEGA VMESNIKA 9

3.1.5 Bootstrap

Izdelava vizualno privlaˇcne spletne strani je lahko zamuden proces. Za laˇzji in hitrejˇsi razvoj uporabniˇskega vmesnika se je pojavilo kar nekaj ogrodij. Eno izmed teh ogrodij je ogrodje Bootstrap[6], katerega je razvil Twitter. Ogrodje Bootstrap je sestavljeno iz treh tehnologij, HTML[1], CSS[3] in Javascript[5]. S pomoˇcjo vseh treh tehnologij lahko dostopamo do skupka ˇze zgrajenih gradnikov, ki nam prihranijo kar nekaj ˇcasa. Tako lahko naprimer uporabimo ˇze vnaprej slogovno urejena vnosna polja, gumbe, tabele, navigacijo in ˇse mnogo drugih osnovnih gradnikov. Ena izmed funkcionalnosti, s katero se Bootstrap ponaˇsa, je uporaba t.i. odzivnih poizvedb, ki nam omogoˇcajo, da s preprosto sintakso doloˇcimo obnaˇsanje spletnih strani za razliˇcne ˇsirine zaslonov. S tem lahko naˇso spletno stran prilagodimo tako za raˇcunalniˇske zaslone, kot tudi za mobilne zaslone in tablice.

3.1.6 AngularJS

AngularJS[7] je strukturno ogrodje za razvoj asinhronih dinamiˇcnih spletnih aplikacij. Omogoˇca razˇsiritev sintakse HTML[1] jezika s svojimi gradniki. Ti gradniki omogoˇcajo dvosmerno vezavo spremenljivk, s katero lahko preprosto in uˇcinkovito sledimo uporabnikovim dogodkom znotraj spletne aplikacije. Zgrajen je na osnovi Javascripta[5], kar pomeni, da se AngularJS aplikacije prevajajo v celoti na strani klienta in s tem manj obremenjujejo streˇznik. S pomoˇcjo funkcij manipulira z DOM elementi. Izkoriˇsˇca asinhrone poizvedbe s t.i. obljubami (promises), katere se izpolnejo takrat, ko dobimo od streˇznika odgovor na naˇso poizvedbo.

3.1.7 RestAngular

Restangular[8] je zunanja knjiˇznica za AngularJS[7], ki nam olajˇsa delo z zah-tevami, kot so GET, POST, PUT, DELETE, ipd.. Knjiˇznica je v AngularJS implementirana v obliki storitve (Service), ki nam omogoˇca delo z minimalno koliˇcino dodatne kode.

(32)

3.1.8 ngDialog

Pri izdelavi dobre aplikacije je potrebno razmiˇsljati tudi na uporabniˇsko izkuˇsnjo. Za dobro uporabniˇsko izkuˇsnjo lahko uporabimo pojavna okna. Za delo s pojavnimi okni se v AngularJS[7] uporablja knjiˇznica ngDialog[9], ki nam olajˇsa in poenoti delo z odpiranjem in zapiranjem posameznih pojav-nih oken.

3.1.9 Yeoman

Vzpostavitev novega projekta je lahko ˇcasovno potratno opravilo. Zato se je za potrebe vzpostavitve osnovnih praznih projektov razvilo ogrodje Yeoman[10]. Ogrodje je na voljo za veliko razliˇcnih orodij in nam vzpo-stavi osnovno strukturo projekta za ˇzeljeno ogrodje. Tako lahko s prepro-stimi ukazi vzpostavljamo tako nov projekt, kot tudi nove gradnike znotraj naˇsega projekta. Nov AngularJS[7] projekt lahko tako ustvarimo z ukazom yo angular IME PROJEKTA, znotraj novega projekta pa lahko ustvarjamo gradnike z ukazi, kot je naprimer yo angular:view IME POGLEDA, ki nam znotraj naˇsega projekta ustvari nov pogled.

3.1.10 Grunt

Pri izgradnji veˇcjih Javascript[5] aplikacij se nam veˇckrat zgodi, da pona-vljamo doloˇcene akcije, kot so naprimer prevajanje razliˇcnih skupkov kode, pomanjˇsevanje Javascript kode in konkatenacija datotek. Grunt[11] nam te akcije avtomatizira s pomoˇcjo napisane Gruntfile datoteke.

3.1.11 Bower

Bower[12] je orodje za manipulacijo z ogrodji, knjiˇznicami, sredstvi in pri-pomoˇcki, katere vkljuˇcimo v naˇso spletno aplikacjo. Z njegovo pomoˇcjo lahko v naˇso spletno aplikacijo vkljuˇcujemo poljubne pakete, Bower pa nam bo po-skrbel za pravilno namestitev in vkljuˇcitev kode v naˇso spletno aplikacijo. S

(33)

3.1. RAZVOJ UPORABNIˇSKEGA VMESNIKA 11

pomoˇcjo datoteke bower.json povemo Bowerju katere pakete ˇzelimo imeti nameˇsˇcene, katere nato namestimo z ukazombower install

3.1.12 Sklad tehnologij uporabniˇ

skega vmesnika

Za laˇzjo predstavo povezovanja posameznih tehnologij prilagamo ˇse sklad tehnologij, uporabljenih pri razvoju uporabniˇskega vmesnika.

䨀愀瘀愀猀挀爀椀

瀀琀

夀攀漀洀愀渀Ⰰ

䜀爀

甀渀琀

Ⰰ

䈀漀眀攀爀

渀最椀

渀砀

䠀吀䴀䰀㔀

䌀匀匀Ⰰ

匀䄀匀匀

䈀漀漀琀

猀琀

爀

愀瀀

䄀渀最甀氀

愀爀

䨀匀

刀攀猀琀

䄀渀最甀氀

愀爀

渀最䐀椀

愀氀

漀最Ⰰ

⸀

(34)

3.2 Zaledni sistem

3.2.1 Python

Python[13] je objektno usmerjeni, visoko nivojski programski jezik z di-namiˇcno semantiko. Jasna in pregledna sintaksa nam omogoˇca hiter razvoj skalabilnih aplikacij. Glavni poudarek Python programskega jezika je berlji-vost kode. S pomoˇcjo Pythona lahko programiramo tako objektno usmerjeno, funkcijsko, kot tudi proceduralno. Python se drˇzi par preprostih filozofij za ohranjanje svoje sintakse:

• Lepo je bolje kot grdo,

• Eksplicitno je bolje kot implicitno, • Preprosto je bolje kot kompleksno, • Berljivost ˇsteje.

3.2.2 Django

Django[17] je visokonivojsko ogrodje za razvoj spletnih aplikacij, ki temelji na programskem jeziku Python[13]. Razvit je bil nekje jeseni leta 2003, ko so spletni programerji Lawrence Journal-World ˇcasopisnega uredniˇstva priˇceli z uporabo pythona za razvoj aplikacij. Glavni namen ogrodja Django je pospeˇsevanje razvoja tako preprostih, kot tudi kompleksnejˇsih spletnih aplikacij. Drˇzi se strukutre model-pogled-nadzornik in nam s tem omogoˇca strukturiran in jasen razvoj.

3.2.3 REST

REST[18] je predlagana arhitektura, kjer je vsak posamezen entitetni vir baze predstavljen z enovitim URL naslovom. Opredeljuje, kako uporabljati ˇze ob-stojeˇce standarde znotraj HTTP protokola s pomoˇcjo standardnih HTTP metod kot so GET, POST, PUT, DELETE, ipd.. Vsak vir REST storitve

(35)

3.2. ZALEDNI SISTEM 13

je samoopisen in brez stanja. Do virov lahko dostopamo preko URL naslo-vov, npr. http://spletnastran.com/seznami/, ali dostop do posameznega virahttp://spletnastran.com/seznami/ID SEZNAMA/. Deluje na podoben naˇcin, kot spletni brskalniki, ki s pomoˇcjo zahtev pridobivajo vire spletnih strani. REST protokol omogoˇca izdelavo skalabilnih aplikacij, saj zaradi brezstanjskih klicev streˇznikov ne prekomerno obremenjujemo.

3.2.4 Django REST Framework

Django REST Framework[19] je ogrodje, ki temelji na Djangu[17] in REST[18] arhitekturi. Je zmogljivo in fleksibilno ogrodje, ki omogoˇca preprosto izgra-dnjo spletnih APIjev s pomoˇcjo programskega jezika Python[13]. Moˇcno se osredotoˇca na razvoj aplikacij s pomoˇcjo koncepta model-pogled-nadzornik in nam zaradi tega omogoˇca izgradnjo preglednih, uˇcinkovitih in skalabilnih REST storitev.

3.2.5 Sklad tehnologij zalednega sistema

Za laˇzjo predstavo povezovanja posameznih tehnologij prilagamo ˇse sklad tehnologij, uporabljenih pri razvoju zalednega sistemaa.

渀最椀渀砀 倀礀琀栀漀渀

䐀樀愀渀最漀

䐀樀愀渀最漀刀攀猀琀䘀爀愀洀攀眀漀爀欀刀愀稀氀椀ഁ渀攀欀渀樀椀縁渀椀挀攀

(36)

3.3 nginx

Spletni streˇzniki so posebni raˇcunalniki, ki nam dostavljajo spletne strani. Vsak spletni streˇznik je predstavljen z doloˇcenim IP naslovom in verjetno tudi z domenskim imenom. Za streˇzniˇske storitve obstaja ˇze kar nekaj reˇsitev, za naˇse potrebe pa je najprimernejˇsi nginx[20] spletni streˇznik, saj nam omogoˇca visoko zmogljivost z nizko porabo spomina. Nginx se, za razliko od najveˇckrat uporabljenega streˇzniˇskega sistema Apache[21], uporablja pred-vsem za aplikacije, ki imajo veliko hkratnih povezav na streˇznik[22]. Apache za vsako povezavo ustvarja nove procese in niti. Tako lahko pri Apache streˇzniku nastavimo maksimalno ˇstevilo dovoljenih procesov. To lahko pri-pelje do izstradanja raˇcunalniˇskih sredstev, zato se pri veˇcjih sistemih Apache obnese slabo. Nginx, za razliko od Apacheja teˇce na nekaj, prednastavljenih delavskih procesih, ki jih dodeli upravljalec streˇznika.

3.4 Virtualenv

Pri razvoju aplikacije velikokrat potrebujemo knjiˇznice in orodja, ki so spe-cifiˇcna za projekt. Zaradi tega si ne ˇzelimo smetiti naˇsega globalnega ra-zvojnega okolja, saj bi lahko to prineslo neprijetne posledice, kot je naprimer razvoj enega projekta v Pythonu 3 (in inˇstalacija pripadajoˇcih knjiˇznic), dru-gega pa v Pythonu 2.7. Ta problem reˇsimo s posebnim orodjem, ki se mu reˇce Virtualenv[23]. Virtualenv je orodje, ki nam ustvari navidezno razvojno okolje za Python[13] projekte, kamor lahko prosto nalagamo ˇzeljene knjiˇznice in ogrodja specifiˇcna za projekt.

3.5 GIT

GIT[24] je orodje za porazdeljeno kontroliranje izvorne kode. Omogoˇca nam soˇcasen razvoj aplikacij na istih datotekah z veˇc razliˇcnimi razvijalci brez pre-pisovanja in izginjanja delov kode. Razvoj GITa se je priˇcel Aprila 2005, po tem, ko je veˇc razvijalev Linux jedra opustilo dostop do BitKeeprja, ki je tudi

(37)

3.6. FABRIC 15

orodje za kontroliranje izvorne kode. S pomoˇcjo ukazov, kot so git pull, git push, git add, git commitin ˇse drugimi nam omogoˇca kontroliranje izvorne kode in soˇcasen razvoj projektov.

3.6 Fabric

Fabric[25] je Python[13] knjiˇznica, s pomoˇcjo katere si pospeˇsimo in olajˇsamo prenos lokalnih datotek in razvojnih okolij na streˇznik. S pomoˇcjo vnaprej na-pisanih funkcij lahko veˇckrat ponovljive dogodke, kot so naprimer inˇstalacija navideznega okolja, konfiguracija nginx[20] streˇznika, inˇstalacija Djanga[17] in prenos celotnega lokalnega projekta napiˇsemo samo enkrat, za ponovitev pa kasneje poganjamo le funkcije.

3.7 PyCharm

PyCharm[26] je razvojno okolje, ki ima podporo za programiranje Python[13], Javascript[5], HTML[1], CSS[3],... PyCharm nam olajˇsa razvoj aplikacij s podporo za navidezna okolja, vgrajeno konzolo, predlagalnikom in za-kljuˇcevalnikom sintakse, barvanjem sintakse in ˇse ˇcim. Napisan je v pro-gramskem jeziku Java in Python.

(38)

(39)

Poglavje 4

Naˇ

crtovanje aplikacije

4.1 Ideja

Ideja o izdelavi aplikacije se je porodila na podlagi pregleda ˇze obstojeˇcih sple-tnih in mobilnih aplikacij za deljenje veˇcopravilnostnih seznamov. Vse ob-stojeˇce reˇsitve, kot so naprimer Wunderlist[32], Todoist[33] in ANY.DO[34], omogoˇcajo dodajanje, urejanje in pregled lastnih seznamov, nobena od naˇstetih aplikacij pa ne omogoˇca ˇzeljene fukncionalnosti iskanja po javnih sezna-mih. Tako smo se po krajˇsem premisleku odloˇcili za razvoj aplikacije, ki bo omogoˇcala deljenje veˇcopravilnostnih seznamov.

4.2 Zahteve in ˇ

zeljene funkcionalnosti

aplika-cije

Glavni cilj je razviti tako loˇcen zaledni sistem aplikacije, ki bo omogoˇcal pri-klop poljubnih odjemalcev, kot tudi spletni uporabniˇski vmesnik aplikacije. Cilj je omogoˇciti dodajanje, urejanje in brisanje seznamov. Znotraj posame-znega seznama ˇzelimo omogoˇciti osnovne naloge, kot so dodajanje, urejanje in brisanje predmetov, kot tudi nastavljanje fotografije posameznega seznama in dodajanje znaˇck seznama, po katerih bo omogoˇceno tudi iskanje.

(40)

18 POGLAVJE 4. NA ˇCRTOVANJE APLIKACIJE

4.3 Specifikacije zahtev aplikacije

Glede na opisane zahteve podajamo specifikacije funkcionalnosti aplikacije: • aplikacija naj ima loˇcen zaledni sistem, ki omogoˇca preprost priklop

poljubnih odjemalcev (spletnih, mobilnih, ...),

• za hrambo podatkov naj uporablja PostgreSQL bazo podatkov, • aplikacija naj uporabniku omogoˇca brezplaˇcno hrambo seznamov, • aplikacija naj omogoˇca osnovne akcije veˇcopravilnostnih seznamov, • aplikacija naj omogoˇca deljenje in iskanje seznamov,

• aplikacija naj omogoˇca iskanje po znaˇckah, pripete posameznemu se-znamu,

• aplikacija naj omogoˇca vˇseˇckanje in kopiranje javnih seznamov,

• aplikacija naj omogoˇca javni prikaz profila registriranega uporabnika in njegovih ustvarjenih seznamov

(41)

4.4. DIAGRAM POTEKA ZA PRIMER UPORABE APLIKACIJE 19

4.4 Diagram poteka za primer uporabe

apli-kacije

Za laˇzjo predstavo osnovnih zahtev prilagamo diagram primerov uporabe.

Sistem za upravljanje z večopravilnostnimi seznami

Uporabnik Ustvari seznam Posodobi seznam Izbriši seznam Avtentikacija Všečkaj seznam Kopiraj seznam « include » « include » « include » « include » « include »

(42)

20 POGLAVJE 4. NA ˇCRTOVANJE APLIKACIJE

4.4.1 Scenarij primera uporabe: Ustvari seznam

4.4.1.1 Pozitiven scenarij

• Uporabnik stisne gumb ”Ustvari seznam” • Sistem ugotovi, da uporabnik ni prijavljen

• Sistem zahteva vnos uporabniˇskega imena in gesla (uporabniˇsko ime in geslo sta pravilna)

• Odpre se vnosno okno za dodajanje novega seznama • Uporabnik izpolni polja in doda nov seznam

4.4.1.2 Alternative scenarija • Uporabnik se ne uspe avtenticirati • Odpre se vnosno okno za prijavo

• Uporabnik prekine akcijo s pritiskom na ustrezen gumb

4.4.2 Scenarij primera uporabe: Posodobi seznam

• Uporabnik poiˇsˇce seznam, katerega ˇzeli posodobiti

• Uporabnik izvede akcijo, katerega posledica je prikaz vnosnih polj za posodabljanje seznama

(43)

• Uporabnik prekine akcijo s pritiskom na ustrezen gumb ali pa se prijavi in nadaljuje urejanje seznama

4.4.3 Scenarij primera uporabe: Izbriˇ

si seznam

• Uporabnik poiˇsˇce seznam, katerega ˇzeli izbrisat

• Uporabnik izvede akcijo brisanja • Uporabnik izbriˇse seznam

• Sistem uporabnika preusmeri na spisek obstojeˇcih seznamov 4.4.3.2 Alternative scenarija

• Uporabnik se ne uspe avtenticirati • Odpre se vnosno okno za prijavo

• Uporabnik prekine akcijo s pritiskom na ustrezen gumb ali pa se prijavi in konˇca akcijo brisanja

4.4.4 Scenarij primera uporabe: Vˇ

seˇ

ckaj seznam

4.4.4.1 Pozitiven scenarij • Uporabnik poiˇsˇce seznam

(44)

22 POGLAVJE 4. NA ˇCRTOVANJE APLIKACIJE • Sistem zahteva vnos uporabniˇskega imena in gesla (uporabniˇsko ime in

geslo sta pravilna)

• Uporabnik izvede akcijo vˇseˇckanja

• Sistem mu zabeleˇzi akcijo vˇseˇckanja in prenese seznam med njegove obstojeˇce sezname

• Sistem obvesti uporabnika o uspeˇsno izvedeni akciji 4.4.4.2 Alternative scenarija

• Uporabnik se ne uspe avtenticirati • Odpre se vnosno okno za prijavo

• Uporabnik prekine akcijo s pritiskom na ustrezen gumb ali pa se prijavi in konˇca akcijo vˇseˇckanja

4.4.5 Scenarij primera uporabe: Kopiraj seznam

4.4.5.1 Pozitiven scenarij • Uporabnik poiˇsˇce seznam

• Uporabnik izvede akcijo kopiranja

• Sistem mu zabeleˇzi akcijo kopiranja in prenese seznam med njegove obstojeˇce sezname

(45)

• Uporabnik prekine akcijo s pritiskom na ustrezen gumb ali pa se prijavi in konˇca akcijo kopiranja

(46)

(47)

Poglavje 5

Razvoj aplikacije

Razvoj zalednega sistema aplikacije je potekal loˇceno od razvoja uporabniˇskega vmesnika. Za loˇcitev smo se odloˇcili tako zaradi organiziranosti kode, kot tudi zaradi dejstva, da lahko na podatkovni vir naknadno prikljuˇcimo ˇse druge od-jemalce, kot so naprimer mobilne naprave, brez da vplivamo na uporabniˇski vmesnik spletne aplikacije.

5.1 Zaledni sistem

5.1.1 Naˇ

crtovanje podatkovne baze

Struktura baze je bila v obliki entitetno relacijskega diagrama zasnovana pred samim priˇcetkom razvoja, saj smo s tem laˇzje planirali tako postavitev samega grafiˇcnega vmesnika, kot tudi same funkcionalnosti aplikacije.

(48)

26 POGLAVJE 5. RAZVOJ APLIKACIJE

5.1.1.1 Entitetno relacijski diagram

Strukturo baze smo predstavili s pomoˇcjo entitetno relacijskega diagrama. Zasnovana je s pomoˇcjo osnovnih relacij med objekti.

User ID INT username (16) email (255) password (32) description VARCHAR(255) image VARCHAR(100) Indexes List ID INT name VARCHAR(100) description VARCHAR(350) qr_hash VARCHAR(255) image VARCHAR(45) is_private BOOL is_invisible VARCHAR(45) owner INT Indexes ListItem ID INT name VARCHAR(100) description VARCHAR(255) order INT Category_ID INT color_type VARCHAR(15) Indexes user_has_List user_ID INT List_ID INT Indexes Tag ID INT name VARCHAR(100) Indexes List_has_Tag List_ID INT Tag_ID INT Indexes Category ID INT name VARCHAR(45) List_ID INT Indexes User_Has_List_Item User_ID INT ListItem_ID INT finish_date DATETIME completed BOOL Indexes Comment ID INT comment VARCHAR(255) date_published VARCHAR(45) User_ID INT List_ID INT Indexes

(49)

Iz diagrama so razvidne naslednje relacije:

• vsakemu seznamu (List) lahko pripada veˇc uporabnikov (User), vsak uporabnik (User) lahko pripada veˇcim seznamom (List),

• vsakemu seznam (List) pripada veˇc kategorij (Category), ena kategorija (Category) pripada samo enemu seznamu (List),

• vsak predmet (ListItem) lahko pripada samo eni kategoriji (Category), vsaki kategoriji pripada veˇc predmetov (ListItem),

• vsakemu seznamu pripada veˇc znaˇck (Tag),

• vsak uporabnik (User) lahko brez podvojevanja seznamov (List), ka-tegorij (Category) in predmetov (ListItem) oznaˇcuje predmete (ListI-tem) konˇcane in nedokonˇcane. To smo dosegli z izdelavo vmesne tabele User Has List Item

5.1.1.2 Podatkovni modeli

Razvoj APIja v Django Rest Frameworku[19] sledi konceptu model-pogled-nadzornik. Zato smo za vsako entiteto morali pripraviti lasten model, ki deduje iz razreda models.Model. Spodaj bomo prikazali uporabo na nekaj primerih.

Seznam (List)

Za podatkovni model seznama (List) smo glede na zastavljen entitetno rela-cijski diagram pripravili naslednjo kodo:

1 f r o m d j a n g o . db i m p o r t m o d e l s 2 f r o m d j a n g o . c o n t r i b . a u t h . m o d e l s i m p o r t U s e r 3 f r o m a p p s . Tag . m o d e l s i m p o r t Tag 4 5 c l a s s L i s t ( m o d e l s . M o d e l ) : 6 id = m o d e l s . A u t o F i e l d ( p r i m a r y _ k e y = True , b l a n k = F a l s e )

(50)

28 POGLAVJE 5. RAZVOJ APLIKACIJE 7 n a m e = m o d e l s . C h a r F i e l d ( m a x _ l e n g t h =1 0 0, b l a n k = False , d e f a u l t ='') 8 q r _ h a s h = m o d e l s . C h a r F i e l d ( m a x _ l e n g t h =2 5 5, b l a n k = False , d e f a u l t ='', u n i q u e = T r u e ) 9 d e s c r i p t i o n = m o d e l s . T e x t F i e l d () 10 h e a d e r _ i m g _ u r l = m o d e l s . I m a g e F i e l d ( b l a n k = True , n u l l = T r u e ) 11 i s _ p r i v a t e = m o d e l s . B o o l e a n F i e l d ( b l a n k = False , d e f a u l t = F a l s e ) 12 i s _ i n v i s i b l e = m o d e l s . B o o l e a n F i e l d ( b l a n k = False , d e f a u l t = F a l s e ) 13 o w n e r = m o d e l s . F o r e i g n K e y ( User , r e l a t e d _ n a m e =' l i s t _ o w n e r', d e f a u l t =1) 14 u s e r s = m o d e l s . M a n y T o M a n y F i e l d ( User , r e l a t e d _ n a m e =' l i s t _ u s e r s', b l a n k = T r u e ) 15 t a g s = m o d e l s . M a n y T o M a n y F i e l d ( Tag , r e l a t e d _ n a m e =' l i s t _ t a g s', b l a n k = T r u e )

Razvidno je, da smo vezali lastnika (owner) posameznega seznama (List) s tujim kljuˇcem na privzeti Django[17] model uporanika (User). Ker bo funkcionalnost uporabniˇskega vmesnika omogoˇcala uporabnikom vˇseˇckanje posameznih seznamov, smo ustvarili poljeusers, kateremu smo doloˇcili obo-jesmerno razmerje (ManyToMany). To pomeni, da lahko ima en uporabnik (User) veˇc seznamov (List) in en seznam veˇc uporabnikov. Isto smo storili ˇse s poljem tags.

Kategorija (Category) Za podatkovni model kategorije (Category) smo glede na zastavljen entitetno relacijski diagram pripravili naslednjo kodo:

1 f r o m d j a n g o . db i m p o r t m o d e l s 2 f r o m a p p s . L i s t . m o d e l s i m p o r t L i s t 3

4 c l a s s C a t e g o r y ( m o d e l s . M o d e l ) :

(51)

6 n a m e = m o d e l s . C h a r F i e l d ( m a x _ l e n g t h =1 0 0, b l a n k = False , d e f a u l t ='')

7 l i s t = m o d e l s . F o r e i g n K e y ( List , r e l a t e d _ n a m e =' l i s t _ c a t e g o r i e s', d e f a u l t =0)

Predmet (ListItem) Za podatkovni model predmeta (ListItem) smo glede na zastavljen entitetno relacijski diagram pripravili naslednjo kodo:

1 f r o m d a t e t i m e i m p o r t d a t e t i m e 2 f r o m d j a n g o . c o n t r i b . a u t h . m o d e l s i m p o r t U s e r 3 f r o m d j a n g o . db i m p o r t m o d e l s 4 f r o m a p p s . C a t e g o r y . m o d e l s i m p o r t C a t e g o r y 5 6 c l a s s L i s t I t e m ( m o d e l s . M o d e l ) : 7 id = m o d e l s . A u t o F i e l d ( p r i m a r y _ k e y = True , b l a n k = F a l s e ) 8 n a m e = m o d e l s . C h a r F i e l d ( m a x _ l e n g t h =1 0 0, b l a n k = False , d e f a u l t ='') 9 d e s c r i p t i o n = m o d e l s . T e x t F i e l d ( m a x _ l e n g t h =3 0 0, b l a n k = T r u e ) 10 o r d e r = m o d e l s . I n t e g e r F i e l d ( b l a n k = False , d e f a u l t =0) 11 c o l o r _ t y p e = m o d e l s . C h a r F i e l d ( c h o i c e s = C O L O R _ T Y P E S , d e f a u l t ='color - one ', m a x _ l e n g t h =1 1) 12 c a t e g o r y = m o d e l s . F o r e i g n K e y ( C a t e g o r y , r e l a t e d _ n a m e =' l i s t _ i t e m s', d e f a u l t =0) 13 u s e r s = m o d e l s . M a n y T o M a n y F i e l d ( User , r e l a t e d _ n a m e =' l i s t _ i t e m _ u s e r s', d e f a u l t =1, t h r o u g h =' U s e r H a s L i s t I t e m')

Pri polju users smo posebej doloˇcili znaˇcko through, ki nam pove skozi ka-tero dodatno tabelo spremljamo relacijo uporabnik-predmet. Ker smo ˇzeleli beleˇziti dodatna polja, torej datum predmeta in stanje (konˇcano/nedokonˇcano), smo pripravili ˇse dodatno vmesno tabelo.

(52)

Za pripravo vmesne tabele UserHasListItem smo uporabili sledeˇco kodo: 1 f r o m d j a n g o . db i m p o r t m o d e l s 2 f r o m a p p s . L i s t . m o d e l s i m p o r t L i s t 3 4 c l a s s U s e r H a s L i s t I t e m ( m o d e l s . M o d e l ) : 5 u s e r = m o d e l s . F o r e i g n K e y ( U s e r ) 6 l i s t _ i t e m = m o d e l s . F o r e i g n K e y ('ListItem ') 7 f i n i s h _ d a t e = m o d e l s . D a t e T i m e F i e l d ('finish date ', b l a n k = False , d e f a u l t = d a t e t i m e . now ) 8 c o m p l e t e d = m o d e l s . B o o l e a n F i e l d ( b l a n k = F a l s e )

5.1.1.3 Post-procesiranje fotografij seznama

Ker preko polja header img url omogoˇcamo nalaganje fotografij, je bilo potrebno zagotoviti uˇcinkovito hranjenje fotografij. Za to smo uporabili Python[13] knjiˇznico PIL[14], s pomoˇcjo katere bomo naloˇzenim fotografi-jam spremenili velikost in kvaliteto.

Django rest framework zaradi koncepta dedovanja omogoˇca prepisovanje privzetih metod. ˇCe ˇzelimo ujeti klic metode, kjer shranimo model, to sto-rimo s sledeˇco kodo:

1 f r o m PIL i m p o r t I m a g e 2 3 c l a s s L i s t ( m o d e l s . M o d e l ) : 4 5 ... 6 7 def s a v e ( self , s i z e =(1 2 8 0, 1 2 8 0) , ** k w a r g s ) : 8 s u p e r( List , s e l f ) . s a v e () 9 10 if not s e l f . h e a d e r _ i m g _ u r l : 11 r e t u r n 12 13 f i l e n a m e = s e l f . h e a d e r _ i m g _ u r l . p a t h 14 i m a g e = I m a g e .o p e n( f i l e n a m e )

(53)

15

16 i m a g e . s a v e ( f i l e n a m e , f o r m a t='JPEG ', q u a l i t y =8 0)

5.1.1.4 Kreiranje QR HASHA

Vsak seznam naslavljamo preko dodeljenega QR HASHA. Ker je bilo po-trebno ob dodajanju novega seznama ustvariti nakljuˇcen QR HASH, smo za to napisali posebno metodo.

Metoda za svoje delovanje potrebuje knjiˇznico get random string iz zbirkedjango.utils.crypto.

Koda nam prikaˇze prepis dedovane metode create(), kjer kliˇcemo naj-prej starˇsevsko metodo create(), s pomoˇcjo katere ustvarimo objekt, nato pa novemu objektu dodelimo nakljuˇcen QR HASH:

1 f r o m d j a n g o . u t i l s . c r y p t o i m p o r t g e t _ r a n d o m _ s t r i n g 2 3 c l a s s L i s t S e r i a l i z e r ( s e r i a l i z e r s . M o d e l S e r i a l i z e r ) : 4 ... 5 6 def c r e a t e ( self , v a l i d a t e d _ d a t a ) : 7 8 ... 9 10 l i s t = s u p e r( L i s t S e r i a l i z e r , s e l f ) . c r e a t e ( v a l i d a t e d _ d a t a ) 11 l i s t. q r _ h a s h = s e l f . r a n d o m _ h a s h () 12 13 ... 14 15 l i s t. s a v e () 16 17 r e t u r n l i s t 18 19 @ s t a t i c m e t h o d 20 def r a n d o m _ h a s h () :

(54)

32 POGLAVJE 5. RAZVOJ APLIKACIJE 21 22 r a n d o m _ s t r i n g = g e t _ r a n d o m _ s t r i n g ( l e n g t h =5) 23 24 # C h e c k if h a s h e x i s t s 25 n u m _ r e s u l t s = L i s t . o b j e c t s .f i l t e r( q r _ h a s h = r a n d o m _ s t r i n g ) . c o u n t () 26 27 if n u m _ r e s u l t s > 0: 28 r e t u r n L i s t S e r i a l i z e r . r a n d o m _ h a s h () 29 30 r e t u r n r a n d o m _ s t r i n g

Iz kode je razvidno, da ustvarjamo nakljuˇcen niz dolˇzine 5 znakov. V pri-meru, da QR HASH ˇze obstaja, s pomoˇcjo rekurzije niz ponovno ustvarimo. Knjiˇznica crypto vzame za osnovo angleˇsko abecedo. ˇCe ˇzelimo narediti izraˇcun ˇstevila moˇznih kombinacij, moramo upoˇstevati naslednje parametre:

• 26 velikih znakov (A-Z) • 26 majhnih znakov (a-z) • 10 ˇstevil (0-9)

Skupaj torej 56 moˇznih znakov. Za izraˇcun ˇstevila moˇznih kombinacij vzamemo formulo za variacije s ponavljanjem[27]:

Izrek 5.1 ˇStevilo variacij n elementov na r prostih mest je enako:

V = nr. (5.1)

V naˇso enaˇcbo vstavimo 56 moˇznih znakov, kateri se lahko poljubno po-navljajo na 5. prostih mestih:

V = 565 = 550.731.776 (5.2)

Z dolˇzino 5 nakljuˇcnih znakov lahko torej ustvarimo skoraj 551 milijonov kombinacij in poslediˇcno skoraj 551 milijonov unikatnih naslovov za posame-zne sezname.

(55)

5.1.1.5 API

Uporabniˇski vmesnik spletne aplikacije dostopa do storitev zalednega sis-tema. ˇCe ˇzelimo dostopati do posameznih entitet nam Django Rest Framework[19] to omogoˇca z interno knjiˇznico routers.

Uvozimo jo lahko s pomoˇcjo klica:

1 f r o m r e s t _ f r a m e w o r k i m p o r t r o u t e r s

Za pripravo posameznih vstopnih toˇck za dostop do entitet smo pripravili sledeˇco kodo:

1 router = r o u te r s . D e f a u l t R o u t e r () 2

3 router . r e g i s t e r (r'tags ', L i s t T a g V i e w S e t , b a s e _ n a m e ='tags ') 4

5 router . r e g i s t e r (r'lists ', L i s t V i e w S e t , b a s e _ n a m e ='lists ') 6 router . r e g i s t e r (r'p', P r i v a t e L i s t V i e w S e t ) 7 router . r e g i s t e r (r'i', I n v i s i b l e L i s t V i e w S e t ) 8 9 router . r e g i s t e r (r'mylists ', M y L i s t s V i e w S e t ) 10 router . r e g i s t e r (r' myprivatelists ', M y P r i v a t e L i s t s V i e w S e t ) 11 router . r e g i s t e r (r' myinvisiblelists ', M y I n v i s i b l e L i s t s V i e w S e t ) 12 router . r e g i s t e r (r' mylovedlists ', M y L o v e d L i s t s V i e w S e t ) 13 14 router . r e g i s t e r (r'u', P r o f i l e P u b l i c V i e w ) 15 16 router . r e g i s t e r (r'toplists ', T o p L i s t s V i e w S e t ) 17 router . r e g i s t e r (r'lists /(?P< qr_hash >[^/.]+) / tags ',

T a g V i e w S e t , b a s e _ n a m e ='tags ')

18 router . r e g i s t e r (r'lists /(?P< qr_hash >[^/.]+) / comments ', C o m m e n t V i e w S e t , b a s e _ n a m e ='comments ')

19 router . r e g i s t e r (r'lists /(?P< qr_hash >[^/.]+) / addcomment ', C r e a t e C o m m e n t V i e w S e t , b a s e _ n a m e =' comments_add ')

20 router . r e g i s t e r (r'lists /(?P< qr_hash >[^/.]+) / categories ', C a t e g o r y V i e w S e t , b a s e _ n a m e =' categories ')

(56)

21 router . r e g i s t e r (r'lists /(?P< qr_hash >[^/.]+) / categories /(?P< c a t e g o r y _ p k > [ 0 - 9 ] + ) / l i s t i t e m s', L i s t I t e m V i e w S e t ,

b a s e _ n a m e ='listitems ')

Kot je razvidno, lahko do posameznih entitet dostopamo s pomoˇcjo na-slovov. Primer dostopa bi bil http://api.XYZ.org/api/v1/lists/, kjer dostopamo do vseh entitet objekta seznam (List).

Primer klica posamezne entitete bi bilhttp://api.XYZ.org/api/v1/lists/QR HASH in nam vrne sledeˇci odgovor:

1 { 2 " id ": 2 , 3 " n a m e ": " The b u c k e t l i s t ", 4 " q r _ h a s h ": " i Z T 6 1 ", 5 " r e q u e s t _ u s e r _ l o v e d _ l i s t ": false , 6 " o w n e r ": { 7 " u s e r n a m e ": " K l e m e n ", 8 " id ": 4 9 } , 10 " i s _ o w n e r ": false , 11 " i s _ p r i v a t e ": false , 12 " i s _ i n v i s i b l e ": false , 13 " i s _ p u b l i c ": true , 14 " d e s c r i p t i o n ": " T h i s are the t h i n g s I w a n t to do b e f o r e I die ", 15 " l i s t _ i t e m _ c o u n t ": 1 , 16 " u s e r s _ l o v e d _ c o u n t ": 0 , 17 " l i s t _ c a t e g o r i e s ": [ 18 { 19 " id ": 1 , 20 " n a m e ": " to do ", 21 " l i s t ": 2 , 22 " l i s t _ i t e m s ": [ 23 { 24 " id ": 1 , 25 " n a m e ": " J u m p w i t h the p a r a c h u t e ", 26 " o r d e r ": 0 ,

(57)

5.1. ZALEDNI SISTEM 35 27 " c o l o r _ t y p e ": " color - two ", 28 " u s e r _ h a s _ i t e m _ c o m p l e t e ": false , 29 " d e s c r i p t i o n ": " ", 30 " c a t e g o r y ": 1 31 } 32 ] 33 } 34 ] , 35 " h e a d e r _ i m g _ u r l ": " h t t p : // a p i . X Y Z . o r g / api / v1 / l i s t s / i Z T 6 1 / m e d i a / b u c k e t L i s t . j p g ", 36 " t a g s ": [ 37 { 38 " id ": 1 , 39 " t e x t ": " b u c k e t " 40 } , 41 { 42 " id ": 2 , 43 " t e x t ": " l i s t " 44 } 45 ] 46 }

5.1.2 Posebni klici

Ker potrebujemo zaradi specifike spletne strani kar nekaj klicov, ki so vezani na zahtevke uporabnika, smo jih posebej pripravili znotraj posameznih po-gledovviews.py.

V Django Rest Frameworku[19] lahko to reˇsimo s pomoˇcjo interne knjiˇznice detail route.

Uvozimo jo lahko s pomoˇcjo klica:

(58)

Primer posebnega klica je naprimer vˇseˇckanje in odvˇseˇckanje posame-znega seznama.

Ti poizvedbi doloˇcimo znotraj datoteke views.pyin sicer s sledeˇco kodo: 1 @ d e t a i l _ r o u t e ( m e t h o d s =['POST '])

2 def l o v e ( self , request , q r _ h a s h = N o n e ) :

3 try: 4 q u e r y _ l i s t = L i s t . o b j e c t s . get ( q r _ h a s h = q r _ h a s h ) 5 q u e r y _ l i s t . u s e r s . add ( s e l f . r e q u e s t . u s e r ) 6 7 r e t u r n R e s p o n s e ( s t a t u s = s t a t u s . H T T P _2 0 0_OK ) 8 e x c e p t L i s t . D o e s N o t E x i s t : 9 r e t u r n R e s p o n s e ( s t a t u s = s t a t u s . H T T P _4 0 4_ N O T _ F O U N D ) 10 11 @ d e t a i l _ r o u t e ( m e t h o d s =['POST '])

12 def u n l o v e ( self , request , q r _ h a s h = N o n e ) :

13 try: 14 q u e r y _ l i s t = L i s t . o b j e c t s . get ( q r _ h a s h = q r _ h a s h ) 15 q u e r y _ l i s t . u s e r s . r e m o v e ( s e l f . r e q u e s t . u s e r ) 16 17 r e t u r n R e s p o n s e ( s t a t u s = s t a t u s . H T T P _2 0 0_OK ) 18 e x c e p t L i s t . D o e s N o t E x i s t : 19 r e t u r n R e s p o n s e ( s t a t u s = s t a t u s . H T T P _4 0 4_ N O T _ F O U N D )

5.1.3 Dodatne informacije

Kar nekaj serializiranih polj se ustvari tekom same poizvedbe in v bazi, ozi-roma modelih niso shranjena.

Primer takˇsnih polj so naprimer podatki o tem, ali je uporabnik seznam (List) ˇze vˇseˇckal, ali ˇse ne. Za to v Django Rest Frameworku[19] uporabimo poseben tip polja, ki se mu reˇce SerializerMethodField().

(59)

1 def g e t _ r e q u e s t _ u s e r _ l o v e d _ l i s t ( self , obj ) :

2 r e q u e s t _ u s e r = s e l f . c o n t e x t . get ('request ') . u s e r 3 4 if r e q u e s t _ u s e r . i s _ a u t h e n t i c a t e d () : 5 u s e r _ p r o f i l e = U s e r P r o f i l e . o b j e c t s . get ( u s e r = r e q u e s t _ u s e r ) 6 7 r e t u r n L i s t . o b j e c t s . get ( q r _ h a s h = obj . q r _ h a s h ) . u s e r s . f i l t e r( u s e r p r o f i l e = u s e r _ p r o f i l e ) . e x i s t s () 8 9 r e t u r n F a l s e

5.1.4 Iskanje seznamov po znaˇ

ckah

Aplikacija nam omogoˇca iskanje po znaˇckah (Tag), katere so dodane posame-znemu seznamu (List). To lahko v Django Rest Frameworku [19] omogoˇcimo s sledeˇco kodo: 1 def g e t _ q u e r y s e t ( s e l f ) : 2 3 s e a r c h _ p a r a m = s e l f . r e q u e s t . Q U E R Y _ P A R A M S . g e t l i s t (' s e a r c h', N o n e ) 4 5 if len( s e a r c h _ p a r a m ) > 0: 6 """ 7 I t e r a t e o v e r p a r a m s and get q u e r y s e t 8 """ 9 q u e r y s e t = [] 10 t a g _ i d _ s e t = [] 11 12 # get all t a g s by id 13 for p a r a m in s e a r c h _ p a r a m : 14 p a r a m = p a r a m . l o w e r () 15 tag , c r e a t e d = Tag . o b j e c t s . g e t _ o r _ c r e a t e ( t e x t = p a r a m ) 16 t a g _ i d _ s e t . a p p e n d ( tag .id)

(60)

38 POGLAVJE 5. RAZVOJ APLIKACIJE 17 18 q u e r y s e t . e x t e n d ( L i s t . o b j e c t s .f i l t e r( Q ( t a g s _ _ i d _ _ i n = t a g _ i d _ s e t , i s _ p r i v a t e = False , i s _ i n v i s i b l e = F a l s e ) ) 19 . d i s t i n c t () ) 20 21 # C h e c k by n a m e a l s o 22 for p a r a m in s e a r c h _ p a r a m : 23 q u e r y s e t . e x t e n d ( 24 L i s t . o b j e c t s .f i l t e r( Q ( n a m e _ _ c o n t a i n s = param , i s _ p r i v a t e = False , i s _ i n v i s i b l e = F a l s e ) ) 25 ) 26 27 r e t u r n l i s t(set( q u e r y s e t ) ) # R e m o v e d u p l i c a t e s -t u r n -to se-t and -to a r r a y a g a i n 28 29 r e t u r n L i s t . o b j e c t s .f i l t e r( i s _ p r i v a t e = False , i s _ i n v i s i b l e = F a l s e )

5.1.5 Nastavitve streˇ

znika zalednega sistema

Ker za serviranje datotek tako zalednega sistema, kot tudi uporabniˇskega vmesnika uporabljamo nginx[20], je bilo potrebno ustvariti posebno konfigu-racijsko datoteko znotraj poti /etc/nginx/sites-available. V konfigura-cijski datoteki nastavimo pot do zapisnikov, ime streˇznika in pot streˇznika.

Primer konfiguracijske datoteke zalednega sistema: 1 u p s t r e a m a p p _ s e r v e r _ d e v {

2 s e r v e r 1 2 7.0.0.1:8 0 0 0 f a i l _ t i m e o u t =0; 3 }

4

5 l o g _ f o r m a t f o r m a t t e d _ l o g ' $http_x_forwarded_for -$remote_user [ $time_local ] ' '" $request " $status

$body_bytes_sent " $http_referer " ' '" $http_user_agent "' ;

(61)

7 server {

8 l i s t e n 8 0;

9 c l i e n t _ m a x _ b o d y _ s i z e 4G ;

10 s e r v e r _ n a m e ['xx. xxx . xxx . xxx '] api . XYZ . org ; 11 12 k e e p a l i v e _ t i m e o u t 5; 13 14 a c c e s s _ l o g / h o m e / u s e r n a m e / z a l e d n i S i s t e m / l o g s / api . a c c e s s. log f o r m a t t e d _ l o g ; 15 16 r o o t / h o m e / u s e r n a m e / z a l e d n i S i s t e m ; 17 18 l o c a t i o n / { 19 t r y _ f i l e s $uri @proxy_to_app ; 20 21 g z i p on ; 22 g z i p _ m i n _ l e n g t h 1 0 0 0; 23 g z i p _ p r o x i e d e x p i r e d no - c a c h e no - s t o r e p r i v a t e a u t h ; 24 g z i p _ t y p e s t e x t / p l a i n t e x t / xml t e x t / css a p p l i c a t i o n / x h t m l + xml a p p l i c a t i o n / xml a p p l i c a t i o n / rss + xml a p p l i c a t i o n / j a v a s c r i p t a p p l i c a t i o n / x - j a v a s c r i p t ; 25 g z i p _ d i s a b l e " M S I E [1 -6]\. "; 26 } 27 28 l o c a t i o n @ p r o x y _ t o _ a p p { 29 p r o x y _ s e t _ h e a d e r X - F o r w a r d e d - For $proxy_add_x_forwarded_for ; 30 p r o x y _ s e t _ h e a d e r H o s t $http_host ; 31 p r o x y _ s e t _ h e a d e r X - Real - IP $remote_addr ; 32 p r o x y _ s e t _ h e a d e r R E M O T E _ H O S T $remote_addr ; 33 p r o x y _ s e t _ h e a d e r X - F O R W A R D E D - P R O T O C O L $scheme ; 34 p r o x y _ r e d i r e c t off ; 35 36 p r o x y _ p a s s h t t p :// a p p _ s e r v e r _ d e v ; 37 }

(62)

38 }

5.2 Uporabniˇ

ski vmesnik

Za izdelavo uporabniˇskega vmesnika smo uporabili strukturno ogrodje za razvoj asinhronih dinamiˇcnih spletnih aplikacij AngularJS[7]. AngularJS omogoˇca razvoj aplikacij s pomoˇcjo koncepta model-pogled-nadzornik, zato je bilo potrebno pripraviti kar nekaj razliˇcnih nadzornikov in pogledov. Za pomoˇc pri veˇckrat uporabljenih storitvah se pripravijo t.i. storitve (Services), ki nam pomagajo ˇcimbolj optimalno uporabiti in reciklirati veˇckrat napisano kodo. Pri izgledu posameznih pogledov smo si pomagali s predprocesorjem CSS[3] kode SASS[4].

Za laˇzjo predstavo izgleda uporabniˇskega vmesnika smo v dodatek A do-dali tudi izgled posameznih pogledov.

5.2.1 Datoteke SASS

Zaradi strukture in organiziranosti datotek s stili v formatu SASS[4], smo se odloˇcili za organizacijo kode, kjer v glavno datotekomainuvozimo vse ostale datoteke za podstrani. Na tem mestu je dobro omeniti ˇse, da smo za vse ob-stojeˇce datoteke, razen za datotekomainpred ime datoteke dodali znak " ". Ta znak v SASSu pomeni, da se datoteke s tem predznakom ne prevajajo, saj ˇzelimo, da se prevedejo samo enkrat, ob uvozu v glavno datoteko main. Ko ostale datoteke uvozimo v glavno datoteko, lahko ta preznak izpustimo, saj prevajalnik besedam ob uvozu predznak avtomatsko doda.

Primer datoteke s stili main: 1 // I m p o r t f o n t a w e s o m e

2 @ i m p o r t url ('// maxcdn . bootstrapcdn . com / font-awesome /4.3.0/ css / f o n t - a w e s o m e . min . css') ;

(63)

5.2. UPORABNIˇSKI VMESNIK 41 4 @ i m p o r t " m i x i n s "; 5 @ i m p o r t " v a r i a b l e s "; 6 @ i m p o r t " F i v e Z e r o Z e r o "; 7 @ i m p o r t " d i a l o g s "; 8 @ i m p o r t " t a g s "; 9 @ i m p o r t " s e a r c h b o x "; 10 @ i m p o r t " h e a d e r "; 11 @ i m p o r t " l o g i n "; 12 @ i m p o r t " r e g i s t e r "; 13 @ i m p o r t " p r o f i l e "; 14 @ i m p o r t " c o m m o n "; 15 @ i m p o r t " l a n d i n g "; 16 @ i m p o r t " s e a r c h r e s u l t s "; 17 @ i m p o r t " l i s t / l i s t "; 18 @ i m p o r t " l i s t / l i s t d e t a i l s "; 19 @ i m p o r t " l i s t / l i s t q r "; 20 @ i m p o r t " l i s t / l i s t c o n f i g u r e "; 21 @ i m p o r t " i n p u t D i a l o g "; 22 @ i m p o r t " a d d l i s t "; 23 @ i m p o r t " tos "; 24 @ i m p o r t " p r i v a c y p o l i c y "; 25 @ i m p o r t " f o o t e r ";

Kot je razvidno iz kode, najprej uvozimo dve posebni datotekimixins in variables. Ti dve datoteki vsebujeta naˇse globalne spremenljivke in funk-cije, ki nam olajˇsajo in skrajˇsajo delo s stili.

Primer datoteke variables:

1 @ i m p o r t url ('http :// fonts . googleapis . com / css ? family = Open + S a n s : 4 0 0 , 3 0 0 , 6 0 0 , 7 0 0') ;

2

3 $font-family: 'Open Sans ', s a n s - s e r i f ; 4

5 // B o r d e r r a d i u s 6 $border-radius: 2 px ; 7

(64)

42 POGLAVJE 5. RAZVOJ APLIKACIJE 9 $transition-time-normal: 0.5 s ; 10 11 // C o l o r s 12 $background-color: # f 0 f 2 f 5 ; 13 14 $brand-primary: #5 a c b e 8 ; 15 $brand-primary-hover: #3 F A E B 6 ; 16 17 $brand-dark: #4 B 4 B 4 B ; 18 19 $brand-success: # D 0 F 4 8 7 ; 20 21 $brand-light-pink: # f b 5 4 5 5 ; 22 $brand-light-pink-hover: # a 4 3 8 3 8 ; 23 24 $brand-gray: #99 a 3 b 1 ; 25 $brand-gray-hover: # 7 0 7 a88 ; 26 27 $box-shadow-color: # e 3 e 4 e 8 ; 28 29 $brand-facebook-color: #5 d 9 c e c ; 30 $brand-facebook-color-hover: #4 b 8 9 d c ; 31 32 $brand-twitter-color: #4 f c 0 e 8 ; 33 $brand-twitter-color-hover: #3 a a f d a ; 34 35 /* 36 L i s t i t e m c o l o r s 37 */ 38 39 $color-list-yellow: # f f c e 5 5 ; 40 $color-list-yellow-light: # f e e 3 9 f ; 41 $color-list-yellow-text: # a 6 7 f 1 f ; 42 43 $color-list-blue: #4 f c 0 e 8 ; 44 $color-list-blue-light: # c e e f f b ; 45 46 $color-list-green: # a 0 d 4 6 8 ;

(65)

5.2. UPORABNIˇSKI VMESNIK 43

47 $color-list-green-light: # d c e a c d ; 48

49 $color-list-lightpink-light: # f d d 4 d 5

Ker se lahko barvna shema tekom razvoja spremeni, je dobro imeti loˇcene globalno nastavljene spremenljivke, katere lahko spremenimo na enem me-stu. To nam olajˇsa delo z barvnimi shemami in drastiˇcno zmanjˇsa moˇznost napak pri vnosu barvnih kod.

Primer datoteke mixins: 1 /* 2 S a s s m i x i n s 3 */ 4 5 @ m i x i n b o r d e r - r a d i u s ($radius) { 6 - w e b k i t - b o r d e r - r a d i u s : $radius; 7 - m o z - b o r d e r - r a d i u s : $radius; 8 - m s - b o r d e r - r a d i u s : $radius; 9 b o r d e r - r a d i u s : $radius; 10 } 11 12 @ m i x i n b o r d e r - t o p - l e f t - r a d i u s ($radius) { 13 - w e b k i t - b o r d e r - t o p - l e f t - r a d i u s : $radius; 14 - m o z - b o r d e r - t o p - l e f t - r a d i u s : $radius; 15 - m s - b o r d e r - t o p - l e f t - r a d i u s s : $radius; 16 b o r d e r - t o p - l e f t - r a d i u s : $radius; 17 } 18 19 @ m i x i n b o r d e r - t o p - r i g h t - r a d i u s ($radius) { 20 - w e b k i t - b o r d e r - t o p - r i g h t - r a d i u s : $radius; 21 - m o z - b o r d e r - t o p - r i g h t - r a d i u s : $radius; 22 - m s - b o r d e r - t o p - r i g h t - r a d i u s : $radius; 23 b o r d e r - t o p - r i g h t - r a d i u s : $radius; 24 } 25 26 @ m i x i n b o x - s h a d o w ($params) { 27 - w e b k i t - b o x - s h a d o w : $params;

(66)

44 POGLAVJE 5. RAZVOJ APLIKACIJE 28 - m o z - b o x - s h a d o w : $params; 29 b o x - s h a d o w : $params; 30 } 31 32 @ m i x i n t r a n s f o r m ($property) { 33 - w e b k i t - t r a n s f o r m : $property; 34 - m o z - t r a n s f o r m : $property; 35 - m s - t r a n s f o r m : $property; 36 - o - t r a n s f o r m : $property; 37 t r a n s f o r m : $property; 38 } 39 40 @ m i x i n t r a n s i t i o n ($property, $time) { 41 - w e b k i t - t r a n s i t i o n : $property $time; 42 - m o z - t r a n s i t i o n : $property $time; 43 - m s - t r a n s i t i o n : $property $time; 44 - o - t r a n s i t i o n : $property $time; 45 t r a n s i t i o n : $property $time; 46 } 47 48 @ m i x i n a n i m a t i o n ($properties) { 49 - m o z - a n i m a t i o n : $properties; 50 - w e b k i t - a n i m a t i o n : $properties; 51 - o - a n i m a t i o n : $properties; 52 - m s - a n i m a t i o n : $properties; 53 a n i m a t i o n : $properties; 54 }

Zaradi dodatne podpore pravilnega prikazovanja stilov za razliˇcne br-skalnike je velikokrat potrebno vkljuˇciti kljuˇcne besede, katere pomenijo za vsak klic kar nekaj odveˇcnih vrstic kode. SASS[4] nam omogoˇca pripravo t.i. mixinov, s pomoˇcjo katerih lahko pogosto uporabljene kljuˇcne besede pre-tvorimo v funkcijo, katero lahko nato v ostalih datotekah kliˇcemo z ukazom @include IMEFUNKCIJE.

(67)

5.2. UPORABNIˇSKI VMESNIK 45 1 . w h i t e B o x { 2 3 ... 4 5 @ i n c l u d e b o r d e r - r a d i u s ($border-radius) ; 6 }

5.2.2 Pogledi

Pogledi v ogrodju AngularJS[7] nam omogoˇcajo preprosto delo s spremenljiv-kami in razliˇcnimi funkcijami. V podpoglavjih omenimo nekaj zanimivosti pri kreiranju razliˇcnih pogledov.

5.2.2.1 Priklapljanje nadzornika

Ko definiramo nov nadzornik, ga je potrebno priklopiti na posamezen po-gled. to lahko v ogrodju AngularJS[7] storimo s pomoˇcjo kljuˇcne besede ng-controller. Ko poveˇzemo pogled z nadzornikom, lahko znotraj posa-meznega pogleda dostopamo do vseh spremenljivk znotraj obsega (scope) prikljuˇcenega nadzornika.

Primer kode za priklapljanje nadzornika:

1 <div c l a s s =" a d d L i s t " ng - c o n t r o l l e r =" A d d l i s t C t r l ">

2 ...

3 </div >

5.2.2.2 Delo z obrazci

Ogrodje AngularJS[7] nam omogoˇca poenostavljeno delo z obrazci. Posa-mezen obrazec lahko priklopimo na funkcijo v nadzorniku s pomoˇcjo kljuˇcne besedeng-submit. Kljuˇcna beseda pomeni, da se bo ob sproˇzenju gumba tipa submit - (<button type=’submit’ ...>) sproˇzila funkcija, ki je doloˇcena

(68)

znotraj obsega kljuˇcnega nadzornika.

Primer kode za kljuˇcno besedo ng-submit:

1 < f o r m n a m e =" a d d L i s t F o r m " ng - s u b m i t =" a d d L i s t () "> 2 3 ... 4 5 < b u t t o n t y p e =" s u b m i t ">C r e a t e new list</ b u t t o n> 6 </ f o r m>

Ker moramo iz posameznega obrazca prebrati vnosna polja, ogrodje An-gularJS poskrbi za vezavo s pomoˇcjo kljuˇcne besedeng-model. Ko v posame-zno vnosno polje vnesemo znake, nam AngularJS shrani vrednost vnosnega polja v definirano ime modela.

Na spodnjem primeru je razvidno, da s pomoˇcjo vnosnega polja kreiramo objekt tipa: 1 l i s t = { 2 n a m e : " ", 3 4 ... 5 6 }

Primer kode za delo s kljuˇcno besedo ng-model: 1 < f o r m n a m e =" a d d L i s t F o r m " ng - s u b m i t =" a d d L i s t () "> 2 <div c l a s s =" form - g r o u p "> 3 < i n p u t t y p e =" t e x t " c l a s s =" form - c o n t r o l " id =" n a m e " n a m e =" n a m e " ng - m o d e l =" l i s t . n a m e " p l a c e h o l d e r =" L i s t t i t l e " a u t o f o c u s r e q u i r e d> 4 </div > 5 6 ... 7

(69)

5.2. UPORABNIˇSKI VMESNIK 47

8 </ f o r m>

V ogrodju AngularJS[7] je moˇzna preprosta validacija obrazcov. S pomoˇcjo kljuˇcne besedeng-showlahko skrijemo posamezen element, dokler ne zadoˇsˇca doloˇcenim pogojem. Ti pogoji so shranjeni v spremenljivko, katero Angu-larJS za obrazce kreira avtomatsko. Tako lahko preprosto dodamo nov bloˇcni element, kateremu dodamo kljuˇcno besedo ng-show, v njem pa definiramo pogoje.

Na spodnjem primeru je razvidno, da validacijo ustvarimo s tremi pre-prostimi koraki:

1. ˇzeljenemu vnosnemu polju dodamo kljuˇcno besedorequired

2. Dodamo nov bloˇcni element, kateremu dodamo kljuˇcno besedong-show 3. Znotraj bloˇcnega elementa ustvarimo pogoje, kdaj se naj opozorilno

sporoˇcilo prikaˇze.

Primer kode za validacijo forme s kljuˇcno besedo ng-show in kljuˇcno besedo required:

1 < f o r m n a m e =" a d d L i s t F o r m " ng - s u b m i t =" a d d L i s t () "> 2 3 ... 4 5 < i n p u t t y p e =" t e x t " c l a s s =" form - c o n t r o l " id =" n a m e " n a m e =" n a m e " ng - m o d e l =" l i s t . n a m e " p l a c e h o l d e r =" L i s t t i t l e " r e q u i r e d> 6 < s p a n ng - s h o w =" a d d L i s t F o r m .$dirty && a d d L i s t F o r m . n a m e .$error.required " c l a s s =" help - b l o c k ">We n e e d a l i s t name. </ s p a n> 7 8 ... 9 10 </ f o r m>

(70)

Pri zgornjem primeru opazimo, da pri kljuˇcni beseding-show konkateni-ramo dva pogoja v enega z logiˇcnim operaterjemIN (&&).

Prvi pogoj, addListForm.$dirty dobi vrednost resniˇcno (true) takrat, ko smo aktivirali katerokoli vnosno polje znotraj posameznega obrazca. To storimo zato, da se izognemo prikazu opozorilnih sporoˇcil pred tem, da upo-rabnik v obrazec zaˇcne vnaˇsati podatke.

Drugi pogoj,addListForm.name.$error.required, pa dobi vrednost

re-sniˇcno (true) takrat, ko ob sproˇzenju gumba tipasubmit((<button type=’submit’ ...>)) vnosno polje z definiranim imenom (v tem primeruname) ni

izpol-njeno.

5.2.2.3 Pogled za avtomatsko predlaganje seznamov glede na vnos iskalnih parametrov

Ker smo ˇzeleli uporabniku olajˇsati iskanje posameznih seznamov, smo mu omogoˇcili avtomatsko predlaganje seznamov glede na iskalne parametre zno-traj vnosnega polja.

Tako smo za potrebe predlaganja seznamov morali kreirati pogled, ki nam prikazuje rezultate glede na iskane parametre.

Primer kode za pogled avtoamtskega predlaganja seznamov: 1 <div c l a s s =" a u t o c o m p l e t e col - xs -12 a n i m a t i o n " ng - h i d e =" a u t o c o m p l e t e H i d d e n "> 2 <div c l a s s =" i t e m " ng - r e p e a t =" r e s u l t in a u t o c o m p l e t e Q u e r y "> 3 < a c l a s s =" row " ui - s r e f =" l i s t ({ 'listHash ': r e s u l t . q r _ h a s h }) "> 4 <div c l a s s =" col - xs -1 "> 5 < img ng - src =" {{ r e s u l t . h e a d e r _ i m g _ u r l }} " c l a s s =" img img - r e s p o n s i v e img - t h u m b n a i l "/>

6 </div >

(71)

5.2. UPORABNIˇSKI VMESNIK 49 8 <div c l a s s =" t i t l e ">{{ r e s u l t . n a m e }} < br> </div > 9 <div c l a s s =" d e s c r i p t i o n ">{{ r e s u l t . d e s c r i p t i o n | l i m i t T o : 7 0 } } . . .</div > 10 </div > 11 <div c l a s s =" col - xs -5 "> 12 < s p a n c l a s s =" btn btn - light - p i n k pull - r i g h t " ui -s r e f =" l i s t ({ 'listHash ': result.qr_hash })"> 13 V i e w l i s t 14 </ s p a n> 15 </div > 16 </ a> 17 </div > 18 19 <div c l a s s =" n o r e s u l t s " ng - s h o w =" a u t o c o m p l e t e Q u e r y . l e n g t h == 0 "> 20 No r e s u l t s 21 </div > 22 </div >

Na tem mestu lahko omenimo ˇse kljuˇcno besedo ng-repeat. Kljuˇcna be-seda nam v pogledih omogoˇca preprosto iteracijo ˇcez zbirke. Tako v zgorji kodi iteriramo ˇcez zbirko autocompleteQuery, katere vrednost posamezne iteracije pripnemo v spremenljivko result.

Razvidno je tudi, da v primeru, ko nam iskanje vrne zbirko dolˇzine 0, prikaˇzemo obvestilo ’No results’.

5.2.3 Storitve

5.2.3.1 Storitev REST[18]

Ker se nam klici na zaledni sistem ponavljajo, je bilo smiselno uporabiti stori-tev, ki nam olajˇsa delo s klici Restangular[8]. Ker smo ˇzeleli klice in uporabo te storitve poenotiti, smo pripravili ˇse eno storitev, ki upravlja z Restangular storitvijo.

(72)

Primer nekaj klicev na zaledni sistem s pomoˇcjo pripravljene storitve:

1 a n g u l a r . m o d u l e (' sharelyWebAppApp ') 2 . f a c t o r y (' RestService ', f u n c t i o n ($http , Restangular , Session , H e l p e r S e r v i c e ) { 3 var s e r v i c e = { 4 5 s e a r c h Q u e r y : f u n c t i o n ( s e a r c h _ p a r a m ) { 6 r e t u r n R e s t a n g u l a r . a l l ('lists /') . c u s t o m G E T ('', { s e a r c h : s e a r c h _ p a r a m } , s e r v i c e . _ g e t _ h e a d e r s () ) ; 7 } , 8 s e a r c h Q u e r y P a g e : f u n c t i o n ( s e a r c h _ p a r a m , p a g e N u m ) { 9 r e t u r n R e s t a n g u l a r . a l l ('lists /') . c u s t o m G E T ('? p a g e ='+ pageNum , { s e a r c h : s e a r c h _ p a r a m } , s e r v i c e . _ g e t _ h e a d e r s () ) ; 10 } , 11 a d d N e w L i s t : f u n c t i o n ( l i s t D a t a ) { 12 r e t u r n R e s t a n g u l a r . a l l ('lists /') . p o s t ( l i s t D a t a , {} , s e r v i c e . _ g e t _ h e a d e r s () ) ; 13 } , 14 g e t L i s t : f u n c t i o n ( l i s t H a s h ) { 15 r e t u r n R e s t a n g u l a r . a l l ('lists /') . c u s t o m G E T ( l i s t H a s h +'/', {} , s e r v i c e . _ g e t _ h e a d e r s () ) ; 16 } , 17 u p d a t e L i s t : f u n c t i o n ( l i s t D A T A ) { 18 19 var q r H a s h = l i s t D A T A . q r _ h a s h + '/'; 20 var e n d p o i n t = H e l p e r S e r v i c e . g e t L i s t T y p e U R L ( l i s t D A T A ) ; 21 22 r e t u r n R e s t a n g u l a r . o n e ( e n d p o i n t ) . c u s t o m P U T ( l i s t D A T A , qrHash , '', s e r v i c e . _ g e t _ h e a d e r s () ) ; 23 } , 24 d e l e t e L i s t : f u n c t i o n ( l i s t D A T A ) { 25 26 var q r H a s h = l i s t D A T A . q r _ h a s h + '/';

(73)

5.2. UPORABNIˇSKI VMESNIK 51 27 var e n d p o i n t = H e l p e r S e r v i c e . g e t L i s t T y p e U R L A l t e r n a t i v e ( l i s t D A T A ) ; 28 29 r e t u r n R e s t a n g u l a r . a l l ( e n d p o i n t ) . c u s t o m D E L E T E ( qrHash , {} , s e r v i c e . _ g e t _ h e a d e r s () ) ; 30 } , 31 32 ... 33 34 }; 35 36 r e t u r n s e r v i c e ; 37 }) ;

5.2.3.2 Storitev za delo s pojavnimi okni

Za delo s pojavnimi okni uporabljamo storitev ngDialog[9]. Ker se veˇc stori-tev ngDialog uporablja v razliˇcnih nadzornikih, smo pripravili dodatni stori-tev za delo z generiˇcnimi pojavnimi okni.

Primer kode, ki nam prikaˇze potrditveno pojavno okno, s pomoˇcjo kate-rega obvestimo uporabnika o moˇzni nevarni akciji (npr. brisanje seznama):

1 a n g u l a r . m o d u l e (' sharelyWebAppApp ') 2 . s e r v i c e (' DialogService ', f u n c t i o n ( n g D i a l o g ) { 3 4 var d i a l o g s = {}; 5 6 d i a l o g s . c l o s e A l l = f u n c t i o n () { 7 r e t u r n n g D i a l o g . c l o s e A l l () ; 8 }; 9 10 d i a l o g s . d e s t r o y A c t i o n D i a l o g = f u n c t i o n () { 11 r e t u r n n g D i a l o g . o p e n C o n f i r m ({ 12 t e m p l a t e : 'views / destroyDialog.html ' 13 }) ;