Optimizacijaprototipiranjaprirazvojuspletnihaplikacij LukaAndrejak

(1)

Univerza v Ljubljani

Fakulteta za raˇ cunalniˇ stvo in informatiko

Luka Andrejak

Optimizacija prototipiranja pri razvoju spletnih aplikacij

DIPLOMSKO DELO

NA UNIVERZITETNEM ˇSTUDIJU

Mentor : doc. dr. Dejan Lavbiˇ c

Ljubljana, 2016

(2)

(3)

Fakulteta za raˇcunalniˇstvo in informatiko podpira javno dostopnost znan- stvenih, strokovnih in razvojnih rezultatov. Zato priporoˇca objavo dela pod katero od licenc, ki omogoˇcajo prosto razˇsirjanje diplomskega dela in/ali moˇznost nadaljne proste uporabe dela. Ena izmed moˇznosti je izdaja diplomskega dela pod katero od Creative Commons licenc http://creativecommons.si

Morebitno pripadajoˇco programsko kodo praviloma objavite pod, denimo, licenco GNU General Public License, razliˇcica 3. Podrobnosti licence so dostopne na spletni strani http://www.gnu.org/licenses/.

Besedilo je oblikovano z urejevalnikom besedil L^ATEX.

(4)

(5)

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

Tematika naloge:

Pri procesu razvoja programske opreme je prototipiranje pogosto prisotno, vendar ga kljub temu veˇcina razvojnih metodologij obravnava kot opcijski korak, ki se ga razvijalcem informacijskih sistemov zgolj priporoˇca. ˇStevilna podjetja pa pri svojem procesu razvoja vseeno prototipiranje uporabljajo, vendar v omejeni obliki - veˇcinoma gre za enostavne prototipe zaslonskih mask. V okviru diplomske naloge zato raziˇsˇcite podroˇcje prototipiranja informacijskih sistemov s poudarkom na naprednem prototipiranju spletnih aplikacij. Na podlagi izsledkov pregleda obstojeˇcih pristopov predlagajte izboljˇsan pristop, za katerega pripravite prototip orodja, ki ga podpira. Pre- dlagan pristop, ki naj vkljuˇcuje tudi simulacijo zalednega dela in generiranje smiselnih nakljuˇcnih podatkov, kritiˇcno ovrednotite na konkretnem primeru in izpostavite prednosti ter slabosti.

(6)

(7)

Za usmerjanje pri izdelavi diplomske naloge se zahvaljujem mentorju doc.

dr. Dejanu Lavbiˇcu. Posebna zahvala pa gre druˇzini za vso vzpodbudo in potpljenje.

(8)

(9)

Kazalo

Povzetek Abstract

1 Uvod 1

2 Vloga prototipiranja pri razvoju programske opreme 3

2.1 Razvojno prototipiranje . . . 4

2.2 Zivljenjski cikel razvojnih prototipov . . . .ˇ 5 2.3 Prednosti in nevarnosti . . . 6

2.4 Kdaj uporabiti prototipiranje . . . 8

3 Prototipiranje pri razvoju spletnih aplikacij 9 3.1 Tipi prototipov . . . 9

3.2 Pomanjkljivosti v zaˇcetnih fazah prototipiranja . . . 11

3.3 Predlog za boljˇse prototipiranje . . . 12

4 Mehanizem za hitrejˇso izdelavo boljˇsih prototipov 13 4.1 Uporabljene tehnologije . . . 14

4.2 Modul pType . . . 25

4.3 Generiranje nakljuˇcnih podatkov . . . 26

4.4 Prikaz podatkov, pridobljenih s poizvedbami . . . 30

4.5 Mehanizem za sporoˇcanje napak . . . 32

4.6 Primeri uporabe . . . 33

(10)

5 Testiranje reˇsitve in ugotovitve 41 5.1 Potek razvoja . . . 42 5.2 Analiza . . . 46 5.3 Ugotovitve . . . 48

6 Zakljuˇcek 49

6.1 Nadaljnji razvoj . . . 50

Seznam slik 50

Literatura 53

(11)

Seznam uporabljenih kratic

kratica angleˇsko slovensko AJAX Asynchronus JavaScript

and XML

Asinhroni JavaScript in XML

API Application Programming interface

Aplikacijski programski vmesnik

CSS Cascading Style Sheet Kaskadne slogovne predloge HTML Hyper Text Markup Langu-

age

Oznaˇcevalni jezik za obliko- vanje spletnih dokumentov JSON JavaScript Object Notation Objektna notacija Java-

Script

PHP Hypertext Preprocessor Sploˇsno uporaben skriptni programski jezik, ki ga tolmaˇci streˇznik

SDLC Systems development life cycle

Zivljenjska doba razvojnegaˇ procesa

(12)

(13)

Povzetek

Pri razvoju spletnih aplikacij pogosto uporabljamo prototipiranje. S prototipi se uporabnike v razvojni proces vkljuˇci ˇze zelo zgodaj, kar ima lahko pozitivne uˇcinke na sam proces. S pravilno interpretacijo uporabnikovih povratnih informacij se lahko razvojna ekipa izogne morebitnim teˇzavam in razvoju nepotrebnih segmentov aplikacije.Problem, ki se pogosto pojavlja v praksi, so preveˇc enostavni prototipi, ki tako uporabnikom kot razvijalcem ne nudijo dovolj dobre ponazoritve konˇcne aplikacije. Eno glavnih naˇcel izdelo- vanja prototipov je v hitri izvedbi, zato se razvijalci, vsaj v zaˇcetnih verzijah, ne odloˇcajo za izdelavo kompleksnejˇsih prototipov. Namen diplomske naloge je predstaviti reˇsitev za izdelovanje boljˇsih prototipov spletnih aplikacij tako, da za njihovo izdelavo ni potrebno veliko ˇcasa. Reˇsitev je izdelana kot Ja- vaScript modul, ki z uporabo razˇsirjenih atributov HTML elementov upra- vlja z mehanizmi za generiranje nakljuˇcnih podatkov in simulacijo zalednega sistema. Razvijalcem omogoˇca hitrejˇso izdelavo kompleksnejˇsih prototipov, uporabnikom pa enostavno poroˇcanje napak in podajanje povratnih informacij razvojni ekipi. V diplomski nalogi najprej predstavimo prototipiranje kot primerno metodologijo razvojnega procesa za razvoj spletnih aplikacij.

Osrednji del naloge sta predstavitev reˇsitve za izdelovanje boljˇsih prototipov in testiranje reˇsitve na praktiˇcnem projektu. Testiranje se izvede kot primer- java procesa razvoja dveh aplikacij, pri ˇcemer smo pri eni od njih uporabili omenjeno reˇsitev. Izkaˇze se, da imajo koncepti reˇsitve pozitiven uˇcinek na razvojni proces, same funkcionalnosti pa bi lahko ˇse dodatno razˇsirili in s tem razvijalcem ˇse bolj pomagali pri izdelavi prototipov.

(14)

Kljuˇcne besede: prototipiranje, dinamiˇcni prototipi, simulacija zalednega sistema, generiranje nakljuˇcnih podatkov, JavaScript.

(15)

Abstract

When developing web applications we often use prototyping. Prototyping allows us to involve end users of an application in early stages of development process, which can have positive effects on process itself. The correct interpretation of user feedback can avoid potential problems during development. The problem that often occurs in practice, are too simple prototypes that do not provide good simulation of the final application. One of the main principles of prototyping is rapid implementation, so developers, at least in the initial versions do not decide to develop complex prototypes. The aim of this diploma thesis is to present a solution to make better prototypes of web applications, so that their development does not take much time. The solution is implemented as a JavaScript module that uses extended attributes of HTML elements for generating random data and simulation of backend system. It enables developers to accelerate the development of complex prototypes. The module also simplifies error reporting and giving feedback to the development team. In the first part of the thesis, we introduce prototyping as an appropriate method for the development of web applications.

Next, we present the solution to make better prototypes and test the solution in practice. The test is conducted as a comparison of the development of two applications – one with the use of the aforementioned solution, the other without. We conclude with the presentation of the findings – namely that the proposed solution has a positive effect on the development process. We also present possibilities for further development that would improve prototyping even further.

(16)

Keywords: prototyping, dynamic prototypes, backend simulation, generating random data, JavaScript.

(17)

Poglavje 1 Uvod

Prototip je poenostavljen model oziroma prezentacija izdelka, ki ga ˇzelimo izdelati. Uporablja se za testiranje konceptov in procesov. Preko prototipa izdelek bolje spoznamo in ga zato uspeˇsneje naˇcrtujemo. Je tudi izvrstno orodje za boljˇso komunikacijo med konˇcnimi uporabniki izdelka ter razvojno ekipo [8].

Na podroˇcju razvoja spletnih aplikacij so ti poenostavljeni modeli pogosto preveˇc enostavi. Posledica so preskromni prototipi, ki konˇcni izdelek ne simulirajo dovolj dobro. Podatki, nad katerimi operirajo, so pogosto pre- sploˇsni ali pa jih je premalo. Uporabniki se tako ne morejo vˇziveti v realno situacijo uporabe konˇcne aplikacije, zato so velikokrat njihove povratne informacije preskope za optimalen razvoj[11]. Z operativno verzijo aplikacije se uporabniki sreˇcajo ˇsele v kasnejˇsih fazah razvojnega procesa. V primeru veˇcjih teˇzav ali pomankljivosti je lahko sanacija le-teh draga in pogosto pomeni podaljˇsanje izdelave projekta[5, 3].

Cilj te diplomske naloge je poiskati reˇsitev, da bi se omenjenim situaci- jam izognili brez poveˇcevanja stroˇska izdelave prototipov. Predstavil bom reˇsitev, s katero lahko nadgradimo statiˇcne prototipe in tako bolj realno simuliramo konˇcni produkt. Prototipe napolnimo s testnimi ali nakljuˇcno generiranimi podatki ter simuliramo poizvedbe na zaledni sistem. Na drugi strani pa uporabnikom olajˇsa komunikacijo z razvijalci v smislu enostavnega

1

(18)

2 POGLAVJE 1. UVOD

poroˇcanja teˇzav ob testiranju. Ti mehanizmi nam lahko pomagajo pri de- tekciji morebitnih teˇzav in pomanjkljivosti zasnove sistema dovolj zgodaj, da se izognemo neprijetnemu procesu prilagajanja ali celo menjavi ˇze razvitega segmenta aplikacije. Obenem pa prihranijo ˇcas pri izdelavi prototipov, saj razvijalcem olajˇsajo razvoj.

V poglavju 2 bomo spoznali prototipiranje programske opreme. Osre- dotoˇcili se bomo na razvojno prototipiranje, ker je pri razvoju spletnih aplikacij bolj uporabo od prototipiranja za enkratno uporabo. Predstavili bomo prednosti in nevarnosti prototipiranja ter v katerih situacijah se je smiselno odloˇciti za uporabo te metodologije razvoja. V poglavju 3 bomo predstavili prototipiranje pri razvoju splethin aplikacij. Opisani bojo tipi prototipov, ki se uporabljajo za prototipiranje aplikacij. Izpostavili bomo pomankljivosti prototipov ter predlagali reˇsitev za boljˇse prototipiranje. Poglavje 4 bo opisovalo reˇsitev za boljˇse prototipiranje. Spoznali bomo mehanizme, ki razvijalcem, z malo truda, omogoˇcijo izdelavo bolj realistiˇcnih prototipov.

Uporabnost reˇsitve bomo preverili tako, da bomo primerjali razvoj dveh projektov. Predlagana reˇsitev je bila na enem projektu uporabljena tudi v praksi.

(19)

Poglavje 2

Vloga prototipiranja pri

razvoju programske opreme

Prototipiranje ima lahko pri metodologiji razvoja programske opreme osre- dnjo vlogo. V tem primeru poteka razvoj z uporabo prototipov. Prototip programske opreme je pribliˇzek sistema, ki ga ˇzelimo razviti in vsebuje za- metke njegovih glavnih funkcionalnosti. Uporaba prototipov poveˇcuje sode- lovanje uporabnikov in razvijalcev v razvojnem procesu [1, 2]. Morebitne pomanjkljivosti in napake lahko s prototipiranjem detektiramo dovolj zgodaj in se izognemo velikim stroˇskom ter teˇzavam njihove sanacije v kasnejˇsih fazah razvojnega procesa [3].

Tehnika je ˇse posebej uporabna ko:

• funkcionalnosti sistema niso dovolj definirane

• komunikacija med uporabniki in razvilajci ni dovolj dobra

• je veliko interakcije z uporabniki

• je zagotovitev uporabniˇskih potreb bistvenega pomena

3

(20)

4

POGLAVJE 2. VLOGA PROTOTIPIRANJA PRI RAZVOJU PROGRAMSKE OPREME

Da se prototipiranje izplaˇca, mora biti prototip [4]:

• dovolj nujen za izvedbo

• enostaven za izdelavo

• vpliven in prepriˇcljiv za uporabnike

Poznamo dva tipa metodologije prototipiranja: prototipiranje za enkratno uporabo (angl. throwaway prototyping) in razvojno prototipiranje (angl.

evolutionary prototyping). Glavni cilj prvega tipa prototipiranja je testiranje hipotez in, kot namiguje ˇze ime samo, jih po uporabi zavrˇzemo. Ravno nasprotno se razvojni prototipi s ˇcasom nadgrajujejo, izpopolnjujejo in se uporabijo kot osnovo, na kateri je zgrajena konˇcna reˇsitev.

2.1 Razvojno prototipiranje

Metodologija razvojnega prototipiranja temelji na procesu nadgrajevanja prototipa. Iz zaˇcetnega prototipa se navadno v veˇc vmesnih verzijah (iteraci- jah) razvije konˇcno reˇsitev. Poznamo dva podtipa razvojnega prototipiranja, ki se pri razvoju spletnih aplikacij pogosto uporabljata vzporedno. Gre za inkrementalno in ekstremno prorotipiranje [5].

Pri inkrementalnem prototipiranju gre za izdelavo veˇc manjˇsih prototipov, ki se na koncu zdruˇzijo v eno celoto. Problem, ki ga reˇsujemo, razbijemo na manjˇse, bolj obvladljive podprobleme. Na ta naˇcin lahko konˇcno reˇsitev gradimo po korakih.

Ekstremno prototipiranje je metodologija razvojnega procesa, primerna pred- vsem za razvoj spletnih aplikacij [6]. Razvoj razbijemo na tri faze:

• statiˇcni prototipi

(21)

2.2. ˇZIVLJENJSKI CIKEL RAZVOJNIH PROTOTIPOV 5

• funkcionalni uporabniˇski vmesnik

• zaledni sistem

Povdarek procesa je na drugi fazi, v kateri izdelamo popolnoma funckio- nalen uporabniˇski vmesnik brez delujoˇcega zaledja.

Gre za obliko iterativnega pristopa razvoja prototipov. Prototip kon- stantno nadgrajujemo in izboljˇsujemo, dokler ne pridemo do konˇcne reˇsitve.

Verzije prototipa se spreminajo hitro, na tedenski ali pa celo dnevni ravni.

Razvojna ekipa mora biti dovolj majhna in agilna, da lahko operira s povra- tnimi informacijami uporabnikov in jih upoˇsteva v novih verzijah prototipa.

Cilj prve faze je postavitev grobega ogrodja sistema in motivacija konˇcnih uporabikov k sodelovanju pri razvoju [4, 7]. V tej fazi se ne ukvarjamo z upo- rabniˇsko interakcijo, ampak ˇzelimo izdelati prototip, ki vsebuje vse glavne sklope aplikacije. Na ta naˇcin pridobimo okvirno sliko funkcionalnosti, ki jih bo aplikacija vsebovala. Sledita izdelava uporabniˇskega vmesnika in zalednega sistema. Razvoj teh faz lahko, vsaj v teoriji, poteka vzporedno. Proces iterativne izdelave uporabniˇskega vmesnika zagotavlja konstanten dotok povratnih informacij s strani uporabnikov. Te informacije so kljuˇcnega pomena pri zgodnjem odkrivanju in odpravljanju morebitnih teˇzav.

2.2 Zivljenjski cikel razvojnih prototipov ˇ

Pri razvoju informacijskih sistemov poznamo veˇc ˇzivljenjskih ciklov razvoja (angl. Software Developement Life Cycle - SDLC). ˇZivljenjski cikel razvojnega procesa po metodologiji razvojnega prototipiranja lahko predstavimo z diagramom na sliki 2.1 [8]

Proces se zaˇcne z zajemom zahtev. V tej fazi skuˇsamo pridobiti ˇcim veˇc informacij o aplikaciji, ki jo razvijamo. Sledi faza analize in naˇcrtovanja.

Pri modelu prototipiranja je ta faza, v primeru s fazo analize pri ostalih

(22)

6

Slika 2.1: ˇZivljenski cikel prototipiranja.

razvojnih modelih¹, krajˇsa. Naslednja faza je implementacija prototipa, ki ji sledi testiranje. Testiranje se izvaja v tesni povezavi z uporabniki aplikacije. Glede na povratne informacije v fazi evalvacije prototipa pre- verimo ustreznost prototipa. Lahko se vrnemo v fazo naˇcrtovanja ali pa zakljuˇcimo s prototipiranjem in prototip oznaˇcimo za konˇcno reˇsitev. Ci- kleNaˇcrtovanje→Implementacija→Testiranje →Evalvacija (NITE) pona- vljamo tako dolgo, da je prototip dovolj dober za nadgradnjo v konˇcno reˇsitev.

2.3 Prednosti in nevarnosti

Glavna prednost prototipiranja je v optimizaciji komunikacije med razvijalci in uporabniki. Steve McConnell [9] je ˇze leta 1996 po izvedeni raziskavi ugotovil, da so glavni razlogi za slab razvoj programske opreme²pomanjkanje komunikacije z uporabniki, nepopolne zahteve in spreminjanje zahtev v ˇcasu razvoja. Razlogi za slab razvoj ostajajo enaki tudi danes. Vzrok omenjenih teˇzav, pa je v preslabi komunikaciji med razvijalci in uporabniki. Poleg izboljˇsane komunikacije so prednosti prototipiranja tudi [7, 3, 2]:

• hitro vkljuˇcevanje uporabnikov v razvojni proces

• izboljˇsan naˇcin za podajanje ter ugotavljanje zahtev novega sistema

• zgodnja detekcija morebitnih teˇzav, ki zmanjˇsuje tveganje neuspeha

1Poleg prototipiranja poznamo zaporedni, iterativni, inkrementalni in kombinirani model.

2Predolg, predrag ali nepopoln razvoj.

(23)

2.3. PREDNOSTI IN NEVARNOSTI 7

• uporabnik je hitro v stiku z delujoˇco aplikacijo

• poveˇcanje navduˇsenja za produkt tako razvijalcev kot uporabnikov

• preizkuˇsanje razliˇcnih moˇznosti

• lahko se uporabi tudi kot orodje za uˇcenje uporabnikov

Neustrezna uporaba prototipiranja lahko v razvojnem procesu povzroˇci ne- gativne uˇcinke. Posledice neustrezne uporabe so:

• nezadostna analiza, ki lahko pripelje do neustreznega konˇcnega pro- dukta

• prekomeren ˇcas razvoja prototipa

• preveliko ˇstevilo verzij prototipa, ki lahko povzroˇci zmedo pri razvijal- cih

• zamenjava prototipa za konˇcni sistem

(24)

8

2.4 Kdaj uporabiti prototipiranje

Kot smo ˇze ugotovili, je prototipiranje najbolj efektivno v tistih primerih, ko priˇcakujemo veliko interakcije z uporabniki. To potrjuje tudi sama narava prototipov, saj so v konˇcni fazi namenjeni testiranju s strani uporabnikov.

Uporaba prototipov je zelo priporoˇcljiva tudi tedaj, ko uporabniki ˇse ne vedo popolnoma, kaj naj bi nov sistem omogoˇcal ali ko se zahteve pogosto spreminjajo [14]. Priporoˇcljiva uporaba pa je tudi v naslednjih primerih, ko:

• imajo uporabniki teˇzave s podajanjem zahtev sistema

• nov sistem spremeni osnove poslovnih operacij

• se pojavi potreba po prilagodivi uporabniˇskega vmesnika

• potreba po preverjanju razliˇcnih alternativnih reˇsitev

• uporabniki ne razumejo novih pridobitev

• nove poslovne funkcije so bolj jasne uporabnikom kot analitikom

(25)

Poglavje 3

Prototipiranje pri razvoju spletnih aplikacij

Pri razvoju spletnih aplikacij je obiˇcajno velik povdarek na interakciji z uporabniki. Pogosto se pojavijo problemi pri definiciji zahtev s strani uporabnikov, hkrati pa se zahteve tekom razvoja spreminjajo. Ker ˇzivimo v dobi inter- neta in spletnih tehnologij, se razvoj programske opreme na tak ali drugaˇcen naˇcin seli na splet. Spekter uporabnikov spletnih aplikacij je zelo ˇsirok in zajema tako napredne uporabnike kot tudi laike. Slednji imajo pogosto teˇzave z razumevanjem in uporabo tehnologije. Poslediˇcno imajo teˇzave tudi pri uporabi spletnih aplikacij. Vse od naˇstetega so pri razvoju spletnih aplikacij moˇcni argumenti za uporabo prototipiranja kot metodologije razvojnega procesa [10, 15].

3.1 Tipi prototipov

Zgodnje pridobivanje dobrih povratnih informacij uporabnikov je pri procesu prototipiranja kljuˇcnega pomena. Naˇcinov izdelave prototipov je veliko, glede na dinamiko pa jih lahko razdelomo na dva tipa: statiˇcne in dinamiˇcne prototipe [6, 13].

9

(26)

10

POGLAVJE 3. PROTOTIPIRANJE PRI RAZVOJU SPLETNIH APLIKACIJ

3.1.1 Statiˇ cni prototipi

Pri tem tipu gre za izdelavo prototipov glavnih segmentov aplikacije. Uporab- nikom ˇzelimo prikazati, kako bo aplikacija izgledala v grobem. Ne spuˇsˇcamo se v podrobnosti, ampak skuˇsamo zajeti glavne znaˇcilnosti. Statiˇcni prototipi so lahko ekranske slike ali statiˇcne HTML strani, ki sluˇzijo kot ˇziˇcni diagrami (angl. wireframes) aplikacije. Slednji so za uporabnike bolj pri- vlaˇcni, saj zagotavljajo boljˇso uporabniˇsko izkuˇsnjo in s tem boljˇse povratne informacije.

Ekranske slike so lahko izdelane z oblikovalskimi orodji kot sta Gimp[17]

in Photoshop[18] ali z enim izmed spletnih orodij za izdelavo prototipnih skic aplikacij in spletnih strani. Ta orodja vsebujejo osnovne gradnike upo- rabniˇskih vmesnikov in delujejo po principu povleci-in-spusti (angl. drag&drop), tako da je izdelava prototipov hitra in enostavna. Statiˇcne HTML strani lahko kreiramo z namenskimi orodji za izdelavo ˇziˇcnih modelov (Axure[19]

in ProtoShare[20]) ali pa z uporabo CSS frameworkov. V zadnjih letih se je pojavila pestra izbira orodij za izdelavo ˇziˇcnih modelov spletnih aplikacij in spletnih strani. Njihova osnovna funkcija je izdelava prototipa z nekaj kliki in enostaven izvoz HTML kode. Izdelava prototipov s CSS frameworki zahteva veˇc znanja in je ponavadi ˇcasovno potratnejˇsa.

3.1.2 Dinamiˇ cni prototipi

Pri razvojnem prototipiranju se obiˇcajno najprej izdela statiˇcne prototipe, kasneje pa se jih nadgradi v dinamiˇcne. Vse segmente aplikacije, proto- tipirane s statiˇcno metodo, predstavimo bolj detajlno. Dinamiˇcni prototipi vsebujejo ˇze ˇcisto prave elemente grafiˇcnega vmesnika z implementirano upo- rabniˇsko interakcijo. Tak prototip ni samo izdelan grafiˇcni vmesnik, temveˇc tudi sistem za komunikacijo z zaledjem in logiko za prikazovanje podatkov [13]. Tudi, ˇce zaledni sistem ni razvit, daje dinamiˇcni prototip obˇcutek popolnoma delujoˇce aplikacije.

Izdelava dinamiˇcnih prototipov je v primerjavi s statiˇcnimi veliko bolj

(27)

3.2. POMANJKLJIVOSTI V ZA ˇCETNIH FAZAH PROTOTIPIRANJA11

kompleksna in zato ˇcasovno potratnejˇsa.

3.2 Pomanjkljivosti v zaˇ cetnih fazah prototi- piranja

V zaˇcetnih verzijah prototipov ˇzelimo uporabnikom prikazati grobo strukturo sistema, glede na informacije, ki smo jih pridobili v fazi analize. Zaradi eno- stavnejˇse in cenejˇse izdelave se razvijalci takrat pogosto posluˇzujejo statiˇcnih prototipov. Prototipe izdelajo z orodji za generiranje statiˇcnih HTML strani ali pa so prototipi celo v obliki skic. Do bolj funkcionalne verzije prototipa pridemo ˇsele po nekaj verzijah prototipa¹. Zaradi preslabe analize ali preveˇc enostavnega prototipa je lahko ta proces dolgotrajen. Velikokrat se zgodi, da uporabniki ugotovijo, kaj res ˇzelijo ˇsele ob interakciji s funkcionalnim (di- namiˇcnim) prototipom. Kot posledica se proces prototipiranja podaljˇsa, kar moˇcno vpliva na zaˇcrtane ˇcasovne in stroˇskovne plane razvoja aplikacije.

Slika 3.1: Razˇsirjen ˇzivljenjski cikel prototipiranja. Po n ciklih NITE (naˇcrtovanje→implementacija→testiranje→evalvacija) je prototip dovolj dober za nadgradnjo v konˇcno reˇsitev.

Poleg preskromnih prototipov v zaˇcetnih fazah prototipiranja lahko ˇcas razvoja podaljˇsujeo tudi slaba odzivnost ali nejasne povratne informacije uporabnikov, ki prototipe testirajo. Ko uporabniki ugotovijo pomankljivost prototipa, se velikokrat ne zavedajo, da je odgovor ”Ne deluje” veliko premalo

1Razvoj prototipa iz zaˇcetne verzije v konˇcno reˇsitev ponazarja slika 3.1.

(28)

12

POGLAVJE 3. PROTOTIPIRANJE PRI RAZVOJU SPLETNIH APLIKACIJ

za sanacijo.

3.3 Predlog za boljˇ se prototipiranje

Zelo pomembni lastnosti prototipov sta prepriˇcljivost za uporabnike in enostavnost za izdelavo. Uporabniki, ki se sreˇcajo z neprepriˇcljivimi prototipi, ne morejo dati dovolj dobrih povratnih informacij, saj jim prototip ne zagotavlja dobre izkuˇsnje s konˇcnim izdelkom. Po drugi strani se lahko stroˇski za izdelavo prototipov moˇcno poveˇcajo, ˇce se poveˇca kompleksnost in s tem ˇcas izdelave prototipa. Omenjena izziva bi lahko premagali z mehanizmom, ki bi omogoˇcal enostavno nadgrajevanje cenejˇsih statiˇcnih prototipov v dinamiˇcne.

(29)

Poglavje 4

Mehanizem za hitrejˇ so izdelavo boljˇ sih prototipov

V prejˇsnjem poglavju smo predstavili pozitivne efekte prototipiranja in nevarnosti, ki se lahko pojavijo. Da bi se izognili dodatnim stroˇskom pri izdelavi boljˇsih prototipov in s tem optimizirali proces izdelave, predlagam mehanizem za hitro nadgrajevanje statiˇcnih prototipov. Glavna izziva, ki jih mehanizem reˇsuje, sta zmoˇznost hitrega nadgrajevanja statiˇcnih prototipov v dinamiˇcne ter enostavnost za uporabo, kar omogoˇca hitrejˇso implementacijo.

Predlagani mehanizem sestavljajo ˇstirje veˇcji segmenti:

• generiranje nakljuˇcnih podatkov

• simulacija zalednega sistema

• enostavna populacija podatkov v statiˇcni prototip

• mehanizem za sporoˇcanje napak razvijalcem

Mehanizem je implementiran kot skupek JavaScript knjiˇznic in modulov [16].

Reˇsitev vsebuje ˇze razvit jQuery[21] modul Mockajax[23] za simulacijo zalednega sistema in knjiˇznico Chance[22] za generiranje nakljuˇcnih podatkov.

Moj prispevek je modul pType, ki skrbi za populacijo podatkov v HTML 13

(30)

14

POGLAVJE 4. MEHANIZEM ZA HITREJˇSO IZDELAVO BOLJˇSIH PROTOTIPOV ter krmili omenjeni reˇsitvi. Poleg modula pType sem prilagodil knjiˇznico Chance za slovenski jezik in jo razˇsiril z dodatnimi funkcionalnostmi.

4.1 Uporabljene tehnologije

Svojo reˇsitev sem implementiral s tehnologijo JavaScript, ki se v sodob- nem razvoju spletnih aplikacij uporablja za bogatenje uporabniˇske interakcije. Sodobne spletne aplikacije so grajene kot enostranske aplikacije (angl.

single-page applications), ki za komunikacijo z zalednim sistemom uporabljajo AJAX poizvedbe. Zaradi njene razˇsirjenosti sem za izkoriˇsˇcanje te tehnologije uporabil odprtokodno knjiˇznico jQuery.

Vseh modulov in knjiˇznic, ki sem jih uporabil v svoji reˇsitvi, nisem implementiral sam. jQuery modul Mockajax in knjiˇznico Chance bom podrobneje predstavil v nadaljevanju poglavja. Gre za odprtokodni reˇsitvi, ki sem ju uporabil v svoji reˇsitvi. Predstavitev mojega modula pa sledi v poglavju 4.2.

4.1.1 MockAjax

Pri izdelovanju dinamiˇcnih prototipov je funkcionalnost grafiˇcnega vmesnika velikokrat pogojena z delujoˇcim zalednim sistemom. To pomeni, da njun razvoj ne more biti popolnoma vzporeden. ˇCe izdelujemo spletno aplikacijo, ki za komunikacijo med grafiˇcnim vmesnikom in zalednim sistemom uporablja ajax poizvedbe, lahko ta problem premostimo z uporabo Mockajax modula za odprtokodno JavaScript knjiˇznjico jQuery. Mockajax omogoˇca razvijalcem grafiˇcnega vmesnika simuliranje ajax poizvedb, kar pomeni, da za izdelavo popolnoma delujoˇcega grafiˇcnega vmesnika, zalednega sistema ne potrebujemo. Seveda bo delovanje takega grafiˇcnega vmesnika odvisno od kreativnosti simuliranih odgovorov poizvedb in nikakor ne pomeni delujoˇce aplikacije.

(31)

4.1. UPORABLJENE TEHNOLOGIJE 15

Delovanje

MockAjax razˇsiri osnovno delovanje jQuery metode $.ajax(). Modul prepozna v naprej oznaˇcene poizvedbe na zaledni sistem, jih prestreˇze in ustvari simuliran XMLHttpRequest objekt pred dejanskim izvajanjemjQuery.ajax() metode. ˇCe poizvedba ni oznaˇcena za simulacijo, se izvede privzeta $.ajax() metoda za proˇzenje ajax poizvedbe. Prednost takega pristopa je v tem, da s simuliranjem XMLHttpRequest objekta ne prepiˇsemo privzetega delovanja jQuery knjiˇznjice, zato lahko implementiramo poljuben potek ajax komunikacije z vsemi privzetimi funkcionalnostmi.

Da lahko poizvedbo prestreˇzemo, jo moramo najprej oznaˇciti in ji doloˇciti odgovor. Odgovor je lahko poljubnega tipa in velikosti, tako kot odgovor pra- vega zalednega sistema. Simulirani poizvedbi lahko nastavimo tudi ˇcasovno latenco, s katero je simulacija ˇse bolj pristna. V nadaljevanju sledi podrob- nejˇsa predstavitev delovanja modula Mockjax.

Oznaˇcevanje poizvedb za simulacijo

Poizvedbe, ki jih ˇzelimo simulirati, moramo predhodno oznaˇciti. To naredimo tako, da z metodo $.mockajax() debifiramo URL naslov poizvedbe.

Najpreprostejˇsi naˇcin je definicija celotnega naslova:

$ . m o c k j a x ({

url : " / u p o r a b n i k i / s e z n a m "

}) ;

Primer 4.1: Poizvedbo smo oznaˇcili s fiksnim URL naslovom /uporabniki/seznam.

Za veˇcjo fleksibilnost lahko URL naslovi vsebujejo znak *, ki oznaˇcuje poljuben znakovni niz.

(32)

16

POGLAVJE 4. MEHANIZEM ZA HITREJˇSO IZDELAVO BOLJˇSIH PROTOTIPOV

$ . m o c k j a x ({

url : " / u p o r a b n i k i /* "

}) ;

Primer 4.2: Simulirane bodo vse poizvedbe katerih URL naslovi se bodo zaˇceli z/uporabniki/.

URL naslove lahko definiramo tudi kot regularne izraze.

$ . m o c k j a x ({

url : / ^ \ / u p o r a b n i k i \/( s e z n a m | l i s t ) $ / }) ;

Primer 4.3: Simulirani bosta poizvedbi z URL naslovoma /uporabniki/seznamin /uporabniki/list.

Poizvedbo lahko oznaˇcimo tudi kot kombinacijo URL naslova in podatkov.

$ . m o c k j a x ({

url : " / u p o r a b n i k i / s e z n a m ", d a t a : { g r o u p : " a d m i n " } }) ;

Primer 4.4: Poizvedba bo simulirana samo, ˇce bo poleg posredovan ˇse podatek groupz vrednostjo admin.

Doloˇcanje odgovora

Drugi korak pri simulaciji poizvedb z modulom Mockajax je definicija odgovora, ki ga bo poizvedba vrnila. Odgovor lahko podamo kotresponseText ali responseXML. Obe opciji simulirata odgovor XMLHttpRequest objekta ob obiˇcajni izvedbi ajax poizvedbe. Odgovor lahko definiramo na tri naˇcine:

• v naprej pripravljen odgovor

• datoteka

• klic funkcije

(33)

Primer v naprej pripravljenega odgovora je JSON objekt

$ . m o c k j a x ({

url : " / u p o r a b n i k i / p r i j a v l j e n ", r e s p o n s e T e x t : {

" ime ": " L u k a ",

" p r i i m e k ": " A n d r e j a k "

} }) ;

Primer 4.5: V naprej pripravljen JSON odgovor.

Kadar je kot odgovor definirana datoteka, bo Mocjakax modul prestregel poizvedbo in kot odgovor vrnil datoteko. Tehnika je uporabna takrat, ko nam stranka zagotovi ustrezne testne podatke ali pa si jih pripravimo sami.

$ . m o c k j a x ({

url : " / u p o r a b n i k i / s e z n a m ",

p r o x y : " / p o d a t k i / u p o r a b n i k i . j s o n "

}) ;

Primer 4.6: Odgovor poizvedbe bo vsebina datoteke /podatki/uporabniki.json.

Odgovor poizvedbe lahko simuliramo tudi s funkcijo, tako da definiramo parameter response ki dinamiˇcno generira responseText ali responseXML.

$ . m o c k j a x ({

url : " / p r e v e r i E m a i l ",

r e s p o n s e : f u n c t i o n( s e t t i n g s ) {

var rgx = /[ A - Z0 -9. _ %+ -]+ @ [ A - Z0 - 9 . - ] + . [ A - Z ]{2 ,4}/ igm ; t h i s. r e s p o n s e T e x t = ( rgx . t e s t ( s e t t i n g s . d a t a . e m a i l ) ?

" E m a i l OK " : " E m a i l ni v e l j a v e n ! ") ; }

}) ;

Primer 4.7: Odgovor poizvedbe je funkcija, ki preveri pravilnost elektronskega naslova, ki je bil poslan s poizvedbo.

(34)

18

Casovna zakasnitevˇ

Pri simuliranju zalednega sistema je pomemben faktor tudi ˇcas, ki bi ga pravi zaledni sistem potreboval za generiranje odgovora. ˇCasovno zakasnitev lahko definiramo kot fiksno ali nakljuˇcno v izbranem intervalu.

$ . m o c k j a x ({

url : " / z a h t e v n a O p e a c i j a ", r e s p o n s e T i m e : 2000 ,

r e s p o n s e T e x t : { o d g o v o r : " D a n e s je lep dan " } }) ;

$ . m o c k j a x ({

url : " / s e B o l j Z a h t e v n a O p e a c i j a ", r e s p o n s e T i m e : [ 1 0 0 0 , 3 0 0 0 ] ,

r e s p o n s e T e x t : { o d g o v o r : " D a n e s je lep dan " } }) ;

Primer 4.8: V prvem primeru se bo poizvedba izvedla v dveh sekundah, v drugem pa nakljuˇcno med eno in tremi sekundami.

4.1.2 Chance

Pri dinamiˇcnih prototipih je, poleg uporabniˇske interakcije, velik povdarek tudi na podatkih, prikazanih uporabniku. V primeru, da od naroˇcnika nismo pridobili kvalitetnih testnih podatkov, si lahko pomagamo z generiranjem nakljuˇcnih. Pri generiranju nakljuˇcnih podatkov je pomembno, da imamo na voljo ˇcim veˇc tipov podatkov in da smo sposobni generirati smiselne podatke.

Tabela, ki predstavlja seznam uporabnikov, je veliko bolj pristna, ˇce vsebuje prava imena in priimke, kot pa ˇce bi vsebovala nakljuˇcno generirane znakovne nize.

Chance JS je odprtokodna JavaScript knjiˇznica za generiranje nakljuˇcnih podatkov. Je enostavna za uporabo in ponuja dovolj pester nabor podatkovnih tipov za generiranje tudi zelo kompleksnih entitet z medsebojno odvisnimi podatki.

(35)

V osnovi knjiˇznica nima podpore za generiranje podatkov v slovenskem jeziku, zato sem jo nadgradil. V knjiˇznico sem dodal ˇsifrante slovenskih imen, priimkov, imen krajev, poˇstnih ˇstevilk ipd. Dodal sem tudi zmoˇznost generiranja EMˇSO in davˇcne ˇstevilke.

Podatkovni tipi

Poleg osnovnih podatkovnih tipov (boolean, character, floating, integer, niz) lahko s Chance generiramo kompleksne tipe, ki so sestavljeni iz veˇc osnovnih ali kompleksnih tipov. Primer kompleksnega tipa je oseba. Oseba je sestavljena iz veˇc osnovnih tipov: ime, priimek, starost, spol, rojstni datum, davˇcna ˇstevilka ipd. Podatek generiramo s klicem ustrezne metode objekta chance:

c h a n c e . n a m e ()

Primer 4.9: Generiranje nakljuˇcnega osebnega imena.

Osnovni tipi

Knjiˇznica omogoˇce generiranje naslednjih osnovnih tipov:

• boolean:

Privzeta verjetnost rezultata true je 50 % in false prav tako 50 %.

Verjetnost rezultata true lahko spremenimo s podajanjem parametra likelihood

c h a n c e . b o o l ({ l i k e l i h o o d : 3 0 } )

Verjetnost rezultatatrue je v tem primeru 30 %, false pa 70 %.

• character:

Metoda vrne nakljuˇcen znak. Mnoˇzico potencialnih znakov lahko omejimo s parametrompool.

(36)

20

c h a n c e . c h a r a c t e r ()

c h a n c e . c h a r a c t e r ({ p o o l : ’ a b c d e ’}) c h a n c e . c h a r a c t e r ({ a l p h a : t r u e}) c h a n c e . c h a r a c t e r ({ s y m b o l s : t r u e}) c h a n c e . c h a r a c t e r ({ c a s i n g : ’ l o w e r ’})

= > ’ d ’

• integer:

Generiranje celih ˇstevil lahko omejimo na interval.

c h a n c e . i n t e g e r ()

c h a n c e . i n t e g e r ({ min : -20 , max : 2 0 } )

= > 18

• floating:

Decimalnim ˇstevilom lahko omejimo ˇstevilo mest za decimalno vejico.

Generiranje lahko omejimo na interval.

c h a n c e . f l o a t i n g ()

c h a n c e . f l o a t i n g ({ f i x e d : 7})

c h a n c e . f l o a t i n g ({ min : 0 , max : 1 0 0 } )

= > 3 3 , 4 5 7 2 9 4 7

• string:

Generiranje znakovnih nizov lahko omejimo po dolˇzini in z mnoˇzico moˇznih znakov.

c h a n c e . s t r i n g ()

c h a n c e . s t r i n g ({ l e n g t h : 5}) c h a n c e . s t r i n g ({ p o o l : ’ a b c d e ’})

= > " h s k i t "

(37)

Oseba

• spol:

c h a n c e . g e n d e r ()

= > ’ m a l e ’

• ime:

c h a n c e . n a m e ()

c h a n c e . n a m e ({ p r e f i x : t r u e})

= > ’ dr . M i h a ’

• priimek:

c h a n c e . l a s t ()

= > ’ N o v a k ’

• datum rojstva:

Generiranje datuma rojstva lahko omejimo s parametrom type. Vre- dnost parametra je starostno obdobje osebe. Moˇzne vrednosti: child, teen, adult, senior.

c h a n c e . b i r t h d a y ()

c h a n c e . b i r t h d a y ({ t y p e : ’ c h i l d ’})

= > 2011 -11 -05

(38)

22

• davˇcna ˇstevilka:

Generiranje slovenske davˇcne ˇstevilke. ˇStevilka se generira z upoˇstevanjem pravila za preverjanje ustreznosti davˇcne ˇstevilke.

c h a n c e . s i D S ()

= > 7 8 7 2 4 2 3 0

// f u n k c i j a za g e n e r i r a n j e f u n c t i o n s i D S () {

var b a s e = c h a n c e . i n t e g e r ({ min : 1 0 0 0 0 0 0 , max : 9 9 9 9 9 9 9 }) . t o S t r i n g () ,

b a s e A r r a y = b a s e . s p l i t (" ") . r e v e r s e () , sum = 0;

for (var i = 0; i < b a s e A r r a y . l e n g t h ; i ++) { sum += N u m b e r ( b a s e A r r a y [ i ]) * ( i +2) ; }

r e t u r n b a s e A r r a y . r e v e r s e () . j o i n (" ") + ( sum % 11) ; }

• EMˇSO:

ˇStevilka se generira glede na datum rojstva ter spol osebe. Generirana ˇstevilka upoˇsteva zakonitosti EMˇSO ˇstevilk za prebivalce Slovenije.

c h a n c e . E M S O ({ b i r t h d a y : ’ 1996 -05 -03 ’, g e n d e r : ’ m a l e ’ })

= > 0 3 0 5 9 9 6 5 0 0 2 5 6

// f u n k c i j a za g e n e r i r a n j e

f u n c t i o n E M S O ( b i r t h d a y , g e n d e r ) { var f a c t o r _ m a p = [7 , 6 , 5 , 4 , 3 ,

2 , 7 , 6 , 5 , 4 , 3 , 2] , b i r t h = b i r t h a y . s p l i t (’ - ’) , nth = 0 ,

r e s u l t = " ", sum = 0 ,

(39)

c o n t r o l l = 10;

if( g e n d e r == ’ m a l e ’) {

nth = c h a n c e . pad ( c h a n c e . i n t e g e r ({

min : 0 , max : 499 }) ,

3) ; } e l s e {

nth = c h a n c e . pad ( c h a n c e . i n t e g e r ({

min : 500 , max : 999 }) ,

3) ; }

w h i l e( c o n t r o l l == 10) {

r e s u l t = b i r t h [2] + b i r t h [1] + s u b s t r ( b i r t h [0] ,1) +

’ 50 ’ + nth . t o S t r i n g () ;

var f a c t o r s = r e s u l t . s p l i t (" ") ;

for (var i = 0; i < f a c t o r s . l e n g t h ; i ++) { sum += f a c t o r s [ i ] * f a c t o r _ m a p [ i ];

}

c o n t r o l l = 11 - sum % 11;

if( c o n t r o l l = 11) { c o n t r o l l = 0;

}

nth ++;

}

r e t u r n r e s u l t + c o n t r o l ; }

• Telefonska ˇstevilka:

Prvi dve ˇstevilki sta iz seznama 01, 02, 03, ... 07, ostalih sedem pa je

(40)

24

nakljuˇcnih.

c h a n c e . p h o n e ()

= > 01 230 40 02

• Mobilna ˇstevilka:

Prve tri ˇstevilke so iz seznama 031, 041, 051, 040, ostalih ˇsest pa je doloˇcenih nakljuˇcno.

c h a n c e . m o b i l e ()

= > 031 123 123

Splet

• avatar:

Nakljuˇcna profilna slika z uporabo Gravatar API-ja.

c h a n c e . a v a t a r ()

c h a n c e . a v a t a r ({ f i l e E x t e n s i o n : ’ jpg ’}) c h a n c e . a v a t a r ({ e m a i l : ’ m a i l @ g m a i l . com ’})

= > ’ // www . g r a v a t a r . com / a v a t a r / 7 6 6 9 7 d f 5 8 7 4 c 8 5 4 e 3 c c 8 f d e 1 2 0 0 b 4 2 9 8 . jpg ’

• email:

c h a n c e . e m a i l ()

c h a n c e . e m a i l ({ d o m a i n : " e x a m p l e . com "})

= > s o m e o n e @ e x a m p l e . com

• ip:

c h a n c e . ip ()

= > ’ 1 5 3 . 2 0 8 . 1 0 2 . 2 3 4 ’

(41)

4.2. MODUL PTYPE 25

Lokacija

• naslov:

c h a n c e . a d d r e s s () ;

= > ’ S t r i t a r j e v a c e s t a 10 ’

• ulica:

c h a n c e . s t r e e t () ;

= > ’ S l o v e n s k a c e s t a ’

• mesto:

c h a n c e . c i t y () ;

= > ’ L j u b l j a n a ’

• poˇsta:

c h a n c e . p o s t () ;

= > ’ L j u b l j a n a ’

• poˇstna ˇstevilka:

c h a n c e . zip () ;

= > ’ 1 0 0 0 ’

4.2 Modul pType

Kot predlog mehanizma za optimizacijo izdelave dinamiˇcnega prototipa sem implementiral JavaScript modul pType. Glavni cilj modula je razvijalcem omogoˇciti enostavno nadgradnjo statiˇcnega prototipa v dinamiˇcnega. Z uporabo modula je moˇzno nadgraditi kakrˇsen koli statiˇcen HTML prototip.

(42)

26

Lahko je generiran z namenskimi orodji (npr.: Axure in ProtoShare) ali pa je zgrajen z uporabo CSS frameworkov (npr.: Bootstrap, Foundation, Seman- tic). Modul omogoˇca avtomatiˇcen vnos podatkov v HTML in preverjanje ustreznosti podatkov brez potrebe po programiranju. HTML elemente je potrebno razˇsiriti z dodatnimi podatkovnimi atributi (angl. data attributes), s katerimi doloˇcimo ˇzeleno obnaˇsanje, za vse ostalo poskrbi modul sam.

Modul je uporaben tudi v fazi potrjevanja prototipa s strani uporabnikov. Ko uporabnik pride do situacije, pri kateri je priˇslo do napaˇcnega ali pomanjkljivega delovanja, lahko na enostaven naˇcin naredi ’posnetek’ stanja in ga doda na seznam pomanjkljivosti.

4.3 Generiranje nakljuˇ cnih podatkov

Glavni izziv pri generiranju nakljuˇcnih podatkov je v zmoˇznosti generiranja ˇcim bolj realnih podatkov. Hitro lahko ugotovimo, da tabela, ki prikazuje seznam uporabnikov z nakljuˇcnimi nizi, ki predstavljajo imena, priimke in email naslove, ni dovolj dober prototip. Modul pType za generiranje podatkov uporablja knjiˇznico Chance, ki zna poleg osnovnih tipov generirati nakljuˇcne entitete kot so osebe, naslovi, mobilne naprave, spletni profili oseb ipd. Da poenostavimo uporabo knjiˇznice, moramo HTML elemente, ki jih ˇzelimo napolniti z nakljuˇcnimi podatki, opremiti z dodatnimi podatkovnimi atributi. Ti atributi modulu zagotovijo potrebne podatke za ustrezne klice Chance knjiˇznice.

< i n p u t t y p e =" t e x t " data - pt - r a n d o m i z e =" t r u e "

data - pt - t y p e =" i n t e g e r " / >

Primer 4.10: Generiranje nakljuˇcnega celega ˇstevila v vnosnem polju.

Z atributom data-pt-randomize doloˇcimo element, ki bo vseboval na- kljuˇcne podatke. V primeru 4.10 ˇzelimo v vnosno polje vnesti nakljuˇcno celo ˇstevilo. Tip podatka definiramo z atributom data-pt-type. Seznam podprtih tipov je podan v poglavju 4.1.2. ˇCe ˇzelimo biti bolj natanˇcni in generiran podatek podrobneje definirati, mu dodamo atribut data-pt-options. Vrednost

(43)

4.3. GENERIRANJE NAKLJU ˇCNIH PODATKOV 27

atributa je poenostavljen zapis JSON objekta, s katerim se kliˇce izbrano Chance metodo za generiranje podatka.

< i n p u t t y p e =" t e x t "

data - pt - r a n d o m i z e =" t r u e "

data - pt - t y p e =" i n t e g e r "

data - pt - o p t i o n s =" { min : 100 , max : 1 0 0 0 } " / >

Primer 4.11: Generiranja nakljuˇcnega integerja na intervalu [100, 1000].

Ko ˇzelimo prikazati eno izmed vrednosti v konˇcni mnoˇzici, uporabimo atribut data-pt-choices. Vrednost atributa je z znakom ”,” loˇcen seznam vseh moˇznih vrednosti:

< i n p u t t y p e =" t e x t " data - pt - r a n d o m i z e =" t r u e "

data - pt - c h o i c e s =" modra , zelena , bela , r u m e n a " / >

Primer 4.12: Konˇcna mnoˇzica vrednosti.

(44)

28

4.3.1 Generiranje podatkov za sestavljene HTML ele- mente

Ko generiramo nakljuˇcne podatke za kompleksnejˇse HTML elemente ali sestavljene strukture, moramo atribut data-pt-randomize doloˇciti hierarhiˇcno najviˇsjemu elementu v strukturi. Za primer lahko vzamemo tabelo:

< t a b l e data - pt - r a n d o m i z e =" 100 ">

< thead >

< tr >

< th data - pt - t y p e =" f i r s t "> Ime </ th >

< th data - pt - t y p e =" l a s t "> Priimek </ th >

< th data - pt - t y p e =" g e n d e r "> Spol </ th >

< th data - pt - t y p e =" p h o n e "> Telefon </ th >

</ tr >

</ thead >

< tbody >

</ tbody >

</ table >

Primer 4.13: HTML tabela s podatkovnimi atributi za generiranje nakljuˇcnih podatkov.

Vrednost atributa data-pt-randomize je v tem primeru ˇstevilo vrstic. Ge- neriranje podatkov v primeru 4.13 se izvede nekako takole:

var d a t a = [];

for (var i = 0; i < 1 0 0 ; i ++) { d a t a . p u s h ([

c h a n c e . f i r s t () , c h a n c e . l a s t () , c h a n c e . g e n d e r () , c h a n c e . p h o n e () ]) ;

}

Primer 4.14: Spremenljivkadata po izvedbifor zanke vsebuje 100 nakljuˇcnih podatkov o uporabnikih.

(45)

4.3. GENERIRANJE NAKLJU ˇCNIH PODATKOV 29

Pozoren bralec bo opazil, da ima primer 4.14 pomanjkljivost. Generira- nje podatkov posamezne osebe ne upoˇsteva medsebojno odvisnih podatkov.

Klica metod chance.first() in chance.gender() lahko vrneta nasprotujoˇca si podatka. Osebi z imenom Janez bi lahko doloˇcili ˇzenski spol. Modul pType take situacije avtomatiˇcno prepozna in zagotovi usklajenost podatkov. Po- dobno se modul obnaˇsa pri generiranju email naslovov in EMˇSO ˇstevilk.

Pravilnejˇsi prikaz generiranja podatkov za primer 4.13:

d a t a = [];

for (var i = 0; i < n ; i ++) { var s p o l = c h a n c e . g e n d e r () ; d a t a . p u s h ([

c h a n c e . f i r s t ({ g e n d e r : s p o l }) , s p o l

]) ; }

Primer 4.15: Generiranje imena osebe glede na spol.

(46)

30

4.4 Prikaz podatkov, pridobljenih s poizved- bami

Podatke, ki jih ˇzelimo prikazati v uporabniˇskem vmesniku, vedno pridobimo v neki v naprej doloˇceni strukturi. Navadno gre za XML dokument ali pa JSON objekt. Zaradi enostavnosti se bomo osredotoˇcili na JSON obliko zapisa podatkov. Enostaven primer JSON objekta je seznam uporabnikov:

[{

" f i r s t N a m e ": " L u k a ",

" l a s t N a m e ": " A n d r e j a k ",

" e m a i l ": " l u k a . a n d r e j a k @ g m a i l . com ",

" s t a t u s ": 1 } ,{

" f i r s t N a m e ": " J a n e z ",

" e m a i l ": " j . n o v a k @ g m a i l . com ",

" l a s t N a m e ": " N o v a k ",

" s t a t u s ": 1 } ,{

" e m a i l ": " doe . j o h n @ y a h o o . com ",

" f i r s t N a m e ": " J o h n ",

" l a s t N a m e ": " Doe ",

" s t a t u s ": 0 }]

Primer 4.16: JSON objekt treh uporabnikov.

Ce hoˇˇ cemo podatke iz take strukture pravilno prikazati, moramo vedeti, v katerem HTML elementu naj doloˇceni podatek prikaˇzemo. HTML elemente enoliˇcno oznaˇcimo z atributomdata-pt-name. Za tabelariˇcen prikaz podatkov iz primera 4.16 bi pripravili HTML tabelo s ˇstirimi stolpci:

(47)

4.4. PRIKAZ PODATKOV, PRIDOBLJENIH S POIZVEDBAMI 31

< t a b l e c l a s s=" u s e r s ">

< thead >

< th data - pt - n a m e =" f i r s t N a m e "> Ime </ th >

< th data - pt - n a m e =" l a s t N a m e "> Priimek </ th >

< th data - pt - n a m e =" e m a i l "> Email </ th >

< th data - pt - n a m e =" s t a t u s "

data - pt - c h o i c e s =" 1: aktiven ,0: n e a k t i v e n "> Status </ th >

</ thead >

< tbody >

</ tbody >

</ table >

Primer 4.17: HTML tabela z oznaˇcenimi stolpci.

Imena stolpcev tabele se ujemajo s podatkovno strukturo JSON objekta, zato lahko vsako vrstico tabele ustrezno napolnimo s pravimi podatki. Po- sebnost je stolpec za prikaz statusa. V podatkovni strukturi je vrednost statusa lahko 0 ali 1. Iz vidika uporabniˇske izkuˇsnje je predstavitev statusa uporabnika veliko boljˇsa, ˇce v polju piˇseaktiven alineaktiven, kot 1 ali 0. Ta stolpec dodatno opremimo z atributomdata-pt-choices, ki definira preslikavo podatka.

Podatke prikaˇzemo s klicem metodepType.loadData():

$ . a j a x ({

url : " / u p o r a b n i k i / s e z n a m ", s u c c e s s : f u n c t i o n ( d a t a ) {

p T y p e . l o a d D a t a ( $ (’ t a b l e . u s e r s ’) , d a t a ) ; }

}) ;

Primer 4.18: Nalaganje podatkov, pridobljenih s poizvedbo, v tabelo uporabnikov.

ali pa HTML element, ki ga ˇzelimo napolniti s podatki, opremimo z atributom data-pt-source. Vrednost atributa je URL naslov poizvedbe, ki bo priskrbela ˇzelene podatke. V tem primeru se bo metoda pType.loadData()

(48)

32

izvedla avtomatiˇcno.

< t a b l e data - pt - s o u r c e =" / u p o r a b n i k i / s e z n a m ">

...

</ table >

Primer 4.19: HTML tabela z definiranim izvorom podatkov.

4.5 Mehanizem za sporoˇ canje napak

Ko je prototip izdelan, ga je potrebno s strani uporabnikov pretestirati in ugotovitve posredovati nazaj razvijalcem. V idealnem svetu bi se testiranje izvajalo tako, da bi razvijalec sedel poleg uporabnika, ko bi prototip testiral in si beleˇzil ugotovitve. V praksi tak naˇcin testiranja ni vedno mogoˇc - ˇse posebej takrat, ko je uporabnikov veliko in niso vedno dosegljivi. Uporabniki imajo velikokrat teˇzavo opisati problem, na katerega so naleteli pri testiranju. Poleg tega ne vedo, kaj vse je lahko vzrok teˇzave, zato njihove povratne informacije pogosto ne vsebujejo dovolj informacij za identifikacijo napake.

Za premostitev omenjenih problemov lahko uporabniki povratne informacije sporoˇcajo preko vmesnika, ki ga zagotavlja modul pType. Gre za enostaven obrazec preko, katerega uporabnik sporoˇci teˇzavo in njen vzrok. Ob posredo- vanju ugotovitev uporabnika se poleg vpisanih podatkov poˇsljejo ˇse dodatne informacije o stanju aplikacije ob pojavitvi napake.

Slika 4.1: Informacije o napaki se poˇsljejo na razvojni streˇznik. Podatki se shranijo v podatkovno bazo ter posredujejo razvijalcu na email.

(49)

4.6. PRIMERI UPORABE 33

Koraki delovanja:

• Na uporabnikovo zahtevo se prikaˇze obrazec za sporoˇcanje napak.

• Uporabnik vnese opis teˇzave.

• Uporabnikovim informacijam se dodajo ˇse podatek o operacijskem sistemu, vrsta in verzija brskalnika, toˇcen URL naslov ter vsi podatki, ki so bili prikazani v grafiˇcnem vmesniku.

• Izvede se POST poizvedba na razvojni streˇznik.

• Podatki o napaki se shranijo v podatkovno bazo za nadaljnjo obdelavo.

• O napaki se obvesti tudi razvojno ekipo preko elektronske poˇste.

4.6 Primeri uporabe

4.6.1 Simulacija zalednega sistema

Pri nadgrajevanju statiˇcnih prototipov v dinamiˇcne ponavadi ˇse nimamo iz- delanega zalednega sistema. Denimo, da si, za namen testiranja prototipa, pripravimo nekaj testnih podatkov v obliki JSON datotek.

Slika 4.2: Datoteke s testnimi podatki.

Za zajem podatkov simuliramo klic poizvedbe na zaledni sistem z uporabo modula Mockajax:

(50)

34

$ . m o c k j a x ({

url : " / v r n i / u p o r a b n i k e /* ", p r o x y : " / u p o r a b n i k i 1 . j s o n "

}) ;

Primer 4.20: Odgovor poizvedbe za statistiko oglasa, bo vsebina datoteke uporabniki1.json.

Ker je prikaz podatkov v uporabniˇskem vmesniku odvisen od koliˇcine za- jetih podatkov, smo pripravili veˇc datotek z razliˇcnimi koliˇcinami podatkov.

Veˇcja kot je datoteka, veˇc podatkov vsebuje. Simulacijo zalednega sistema lahko nadgradimo tako, da datoteko s podatki izberemo nakljuˇcno:

$ . m o c k j a x ({

url : " / v r n i / u p o r a b n i k e /* ",

p r o x y : c h a n c e . p i c k ([" u p o r a b n i k i 1 . j s o n ",

" u p o r a b n i k i 2 . j s o n "," u p o r a b n i k i 3 . j s o n "]) }) ;

Primer 4.21: Nakljuˇcna izbira datoteke za odgovor poizvedbe.

Simulacijo naredimo bolj realno tako, da ji doloˇcimo ˇcasovno zakasnitev.

Ker so datoteke razliˇcnih velikosti, morajo biti tudi zakasnitve razliˇcne. Z dodajanjem ustrezne zakasnitve primer 4.21 nadgradimo:

var m o c k D a t a = c h a n c e . p i c k o n e [

{ f i l e : " u p o r a b n i k i . j s o n ", t i m e : 1 5 0 0 } , { f i l e : " u p o r a b n i k i 2 . j s o n ", t i m e : 200 } , { f i l e : " u p o r a b n i k i 3 . j s o n ", t i m e : 800 } ];

$ . m o c k j a x ({

url : " / v r n i / u p o r a b n i k e /* ", p r o x y : m o c k D a t a . file ,

r e s p o n s e T i m e : m o c k D a t a . t i m e }) ;

Primer 4.22: Odgovor simulirane poizvedbe bo ustrezno zakasnjen.

(51)

V praksi se vˇcasih zgodi, da iz kakˇsnega razloga, zaledni sistem ne deluje ali ta ni dostopen. V takih primerih bi se poizvedba zakljuˇcila kot neobde- lana, s statusom 500. Pri simulaciji zalednega sistema lahko obravnavamo tudi take situacije:

$ . m o c k j a x ({

url : " / v r n i / u p o r a b n i k e /* ", p r o x y : m o c k D a t a . file ,

r e s p o n s e T i m e : m o c k D a t a . time ,

s t a t u s : c h a n c e . b o o l ({ l i k e l y h o o d : 5}) ? 500 : 200 }) ;

Primer 4.23: Poizvedba se bo z verjetnostjo 5 % zakljuˇcila s statusom 500.

4.6.2 Vstavljanje podatkov v HTML

Struktura JSON zapisa je v vseh datotekah (slika 4.2) enaka.

[{

" ime ": " L u k a ",

" p r i i m e k ": " A n d r e j a k ",

" s t a t u s ": 1 ,

" s m e r ": " r a c u n a l n i s k i s i s t e m i ",

" s t a r o s t ": 29 } , . . . ]

Primer 4.24: Primer zapisa datotekeuporabniki1.json

Podatke pridobimo z AJAX poizvedbo, za prikaz podatkov pa pripravimo HTML tabelo z razˇsirjenimi podatkovnimi atributi:

(52)

36

< t a b l e id =" u p o r a b n i k i ">

< thead >

< tr >

< th data - pt - n a m e =" ime "> Ime </ th >

< th data - pt - n a m e =" p r i i m e k "> Priimek </ th >

< th data - pt - n a m e =" s t a t u s "

data - pt - c h o i c e s =" 0: p a v z e r ;1: d o d i p l o m s k i ;2: p o d i p l o m s k i ">

Status </ th >

< th data - pt - n a m e =" s m e r "> Smer </ th >

< th data - pt - n a m e =" s t a r o s t "> Starost </ th >

</ tr >

</ thead >

</ table >

$ . a j a x ({

url : " / v r n i / u p o r a b n i k e / ", s u c c e s s : f u n c t i o n ( d a t a ) {

p T y p e . l o a d D a t a (

$ (’ # u s e r s ’) , d a t a

) ; } }) ;

Primer 4.25: HTML tabela z razˇsirjenimi podatkovnimi atributi ter klic AJAX poizvedbe za pridobitev podatkov. Pri uspeˇsnem odgovoru poizvedbe, podatke prikaˇzemo v tabeli s klicem metode pType.loadData() z ustreznimi parametri.

(53)

Slika 4.3: Napolnjena HTML tabela s testnimi podatki primera 4.25.

(54)

38

4.6.3 Nakljuˇ cni podatki

Za testiranje prototipa, lahko testne podatke generiramo nakljuˇcno. Tabelo uporabnikov s primera 4.25 opremimo s podatkovnimi atributi, ki doloˇcajo tip podatka, ki ga ˇzelimo generirati:

< t a b l e id =" u p o r a b n i k i " data - pt - r a n d o m i z e =" 100 ">

< thead >

< tr >

< th data - pt - t y p e =" f i r s t "> Ime </ th >

< th data - pt - t y p e =" l a s t "> Priimek </ th >

< th data - pt - c h o i c e s =" pavzer , d o d i p l o m s k i , p o d i p l o m s k i ">

Status </ th >

< th data - pt - c h o i c e s =" r a c u n a l n i s k i sistemi , i n f o r m a t i k a , p r o g r a m s k a o p r e m a "> Smer </ th >

< th data - pt - n a m e =" i n t e g e r "

data - pt - o p t i o n s =" { min : 18 , max : 30} "> Starost </ th >

</ tr >

</ thead >

</ table >

Primer 4.26: HTML tabela z razˇsirjenimi podatkovnimi atributi za generiranje nakljuˇcnih podatkov.

(55)

Slika 4.4: Napolnjena HTML tabela z nakljuˇcno generiranimi testnimi podatki primera 4.26.

4.6.4 Sporoˇ canje napak

Ko med testiranjem prototipa uporabniki naletijo na nepravilnosti, lahko o tem razvijalce obvestijo s poˇsiljanjem podatkov o nastali situaciji. Uporaba modula pType omogoˇca uporabnikom enostavno poˇsiljanje podatkov preko obrazca, katerega lahko prikliˇcejo kadarkoli med procesom testiranja.

Zmoˇznost sporoˇcanja napak razvijalcem takoj, ko se te pojavijo, je zelo priroˇcna funkcionalnost. Na ta naˇcin zmanjˇsamo verjetnost, da bi uporabniki pozabili sporoˇciti kakˇsno nepravilnost, hkrati pa jim sporoˇcanje olajˇsamo.

Poleg informacij, ki jih uporabniki vnesejo v obrazec, se razvijalcem sa- modejno poˇsljejo ˇse dodatni podatki, katere bi lahko uporabniki pozabili sporoˇciti. To so podatki o uporabnikovem brskalniku, operacijskem sistemu ter napravi (namizni raˇcunalnik, mobilni telefon, raˇcunalniˇska tablica).

(56)

40

Slika 4.5: Uporabnik zazna napako (1) in s klikom na gumb (2) prikliˇce obrazec za poˇsiljanje sporoˇcil.

Slika 4.6: Uporabnik vnese podatke o napaki (3) in jih s potrditvijo obrazca (4) poˇslje razvojni ekipi.

(57)

Poglavje 5

Testiranje reˇ sitve in ugotovitve

V podjetju, s katerim poslovno sodelujem, sem imel moˇznost testirati reˇsitev za boljˇse prototipiranje na realnem projektu. V nadaljevanju bom opisal faze prototipiranja pri razvoju dveh projektov. Projekt A je bil razvit s klasiˇcno metodologijo razvojnega prototipiranja, pri projektu B pa smo uporabili teh- nike naprednejˇsega prototipiranja, ki jih implementira modul pType. Primer- jal bom ˇcasovno zahtevnost in ˇstevilo iteracij prototipiranja.

Projekt A: Spletna aplikacija za spremljanje in optimizacijo oglaˇsevalskih kampanj. Aplikacija zajema statistiˇcne podatke o aktivnostih oglasov na razliˇcnih oglaˇsevalskih kanalih in jih prikazuje uporabniku. Sestavlja jo veˇc interaktivnih uporabniˇskih vmesnikov, s pomoˇcjo katerih se uporabniki laˇzje odloˇcajo za upravljanje z oglasi ter vmesnik za kreiranje poroˇcil. Osredotoˇcili se bomo na segment za pregled statistik in kreiranje poroˇcil.

Projekt B:Spletna aplikacija za izvajanje farmacevtskih kliniˇcnih raziskav.

Gre za aplikacijo, s katero farmacevtsko podjetje zbira podatke o vplivih po- tencialnega zdravila na bolnike. Podatke v sistem vnaˇsajo zdravniki ob pe- riodiˇcnih obiskih bolnikov, ustreznost pa preverjajo neodvisni strokovnjaki.

Ob koncu raziskave je potrebno generirati razliˇcna poroˇcila o poteku. Predho- dno so se raziskave izvajale na papirju. Ob koncu raziskave je bilo potrebno

41

(58)

42 POGLAVJE 5. TESTIRANJE REˇSITVE IN UGOTOVITVE

rezultate (v fiziˇcni obliki) pridobiti od vseh sodelujoˇcih zdravnikov in jih pretvoriti v elektronsko obliko. Osredotoˇcili se bomo na segment za pregled vneˇsenih podatkov.

Kljub razliˇcni problemski domeni projektov gre pri izbranih segmentih za podobno problematiko ter podoben obseg. Oba projekta je razvijala ista razvojna ekipa, sestavljena iz vodje projekta, specialista za uporabniˇske vme- snike in dveh programerjev.

5.1 Potek razvoja

Pri obeh primerih je bila uporabljena metodologija razvojnega prototipiranja. Prototipiranje se je zaˇcelo z izdelavo statiˇcnih pritotipov, ki so se kasneje nadgradili v dinamiˇcne in na koncu v delujoˇco aplikacijo. Za hitrejˇse generiranje statiˇcnih prototipov smo v podjetju razvili PHP knjiˇznico. Knjiˇznica zna generirati osnovne HTML gradnike, kot so: tabele, seznami, menuji, grafi, gumbi in vnosni obrazci. HTML gradniki so generirani v skladu s CSS frameworkom Bootstrap, tako da so ˇze avtomatiˇcno prilagodljivi za razliˇcne velikosti zaslonov in razliˇcne naprave, hkrati pa imajo tudi sodoben izgled.

5.1.1 Projekt A

Problemska domena

Pregled statistik oglasov omogoˇca uporabnikom podrobno analizo obnaˇsanja oglaˇsevalske kampanje v ˇcasu. Dobra analiza pa je predpogoj za optimizacijo.

Statistike oglasov predstavljajo metrike, kot so prikazi, kliki, ˇcas izpostavlje- nosti, cena ipd. Problem pri optimizaciji oglaˇsevalskih kampanj je v veliki koliˇcini podatkov, ki jih je potrebno spremljati. Glavni cilj segmenta je bil poiskati najbolj ustrezen naˇcin za prikaz podatkov.

(59)

5.1. POTEK RAZVOJA 43

Opis procesa

Razvoj smo zaˇceli z izdelavo statiˇcnega prototipa. Za doloˇcitev osnovnega okvira uporabniˇskega vmesnika smo potrebovali tri verzije prototipa. Prvo veˇcje testiranje s strani uporabnikov se je zgodilo po izdelani ˇcetrti verziji prototipa. Prototip je vseboval ˇze dobro izdelan interaktiven grafiˇcni vmesnik s testnimi podatki. Sledilo je prilagajanje tako vmesnika kot zaledne logike.

Za doloˇcitev konˇcne reˇsitve smo potrebovali ˇstiri verzije prototipa (skupno sedem). V osmi verziji smo reˇsitev dodelali v konˇcno reˇsitev. Deveta verzija pa je bila namenjena piljenju uporabniˇskega vmesnika.

Verzije 1, 2 in 3:

Z uporabo statiˇcnega prototipa smo priˇsli do grobega okvira uporabniˇskega vmesnika.

Verzija 4:

Nadgrajevanje v dinamiˇcni prototip z interaktivnim uporabniˇskim vmesnikom in testnimi podatki.

Verzija 5:

Zaˇcetek izdelave zalednega sistema.

Verziji 6 in 7:

Prilagajanje vmesnika in zalednega sistema glede na povratne informacije uporabnikov.

Verzija 8:

Nadgradnja prototipa v konˇcno reˇsitev.

Verzija 9:

Prilagajanje uporabniˇskega vmesnika za razliˇcne tipe uporabnikov ter za- kljuˇcne izboljˇsave uporabniˇskega vmesnika.

(60)

44 POGLAVJE 5. TESTIRANJE REˇSITVE IN UGOTOVITVE

Slika 5.1: Diagram poteka razvoja projekta A.

Za razvoj segmenta je bilo potrebnih devet verzij prototipa. Segment je zahteval skupno 191 razvojnih ˇclovek-ur in bil razvit v 37 dneh.

5.1.2 Projekt B

Problemska domena

Pregled stanja raziskave omogoˇca spremljanje napredka vsakega izmed pa- cientov. Omogoˇca tudi statistiˇcni prikaz odgovorov na doloˇceno vpraˇsanje ter izpostavlja nepriˇcakovana odstopanja. Raziskovalec z izbiro ustreznih nastavitev generira poroˇcila, ki se mu prikaˇzejo na zaslonu.

Opis procesa

Razvoj smo, prav tako kot pri projektu A, zaˇceli z izdelavo statiˇcnega prototipa. Prototip smo ˇze takoj po prvem usklajevanju s stranko nadgradili v dinamiˇcnega. S tretjo verzijo prototipa smo doloˇcili vse glavne funkcionalnosti ter konˇcni izgled uporabniˇskega vmesnika. Sledil je razvoj prototipa glede na bogate povratne informacije uporabnikov. S sedmo verzijo smo prototip