uporaba spletnih tehnologij za izdelavo realno … · i uporaba spletnih tehnologij za izdelavo...

UNIVERZA V MARIBORU

FAKULTETA ZA ELEKTROTEHNIKO,

RAČUNALNIŠTVO IN INFORMATIKO

Matej Lubej

UPORABA SPLETNIH TEHNOLOGIJ ZA IZDELAVO REALNO-ČASOVNE SPLETNE

APLIKACIJE

Diplomsko delo

Maribor, september 2016

UPORABA SPLETNIH TEHNOLOGIJ ZA IZDELAVO

REALNO-ČASOVNE SPLETNE APLIKACIJE

Diplomsko delo

Študent: Matej Lubej

Študijski program: Univerzitetni študijski program

Računalništvo in informacijske tehnologije

Mentor: doc. dr. Milan Ojsteršek, univ. dipl. inž. el.

Somentor: asist. Marko Ferme, univ. dipl. inž. rač. in inf.

Lektor: Andraž Gradišnik, univ. dipl. slov. in angl.

Zahvala

Zahvaljujem se mentorju dr. Milanu Ojsteršku in somentorju asist. Marku

Fermetu za pomoč in vodenje pri pripravljanju diplomskega dela.

Posebej se zahvaljujem tudi staršem, ki so mi omogočili študij in nudili

podporo skozi celoten študij.

i

Uporaba spletnih tehnologij za izdelavo realno-časovne spletne aplikacije

Ključne besede: spletna aplikacija, spletne tehnologije, večigralska spletna igra Sudoku,

Node.js, Three.js, WebGL

UDK: 004.777.031.43(043.2)

Povzetek

V diplomskem delu smo predstavili kako izdelati spletno aplikacijo, ki omogoča realno-

časovno komunikacijo preko spleta. Primer uporabe realno-časovne komunikacije smo

demonstrirali pri izdelavi aplikacije večigralske igre Sudoku. Sočasno z ustvarjanjem

aplikacije smo hoteli raziskati spletno grafično knjižico WebGL z uporabo knjižice Three.js.

Node.js in njegove module smo uporabili na strežniški strani, na odjemalčevi strani pa

standardne tehnologije HTML, CSS3 in JS z uporabo ogrodja Bootstrap.

ii

Use of web technologies for real-time web application

Key words: web application, web technologies, Sudoku multiplayer web game, Node.js,

Three.js, WebGL

UDK: 004.777.031.43(043.2)

Abstract

The thesis presents the development of a real-time communication web application. In the

practical part we demonstrate the real-time communication in a multiplayer Sudoku game.

We also present the graphic library WebGL using the Three.js library. The Node.js

environment and its modules were used for the server-side. Standard web technologies

such as HTML, CSS3, Javascript and Bootstrap framework were used for the client-side.

iii

Kazalo vsebine

1 UVOD ........................................................................................................................................ 1

2 REALNO-ČASOVNE SPLETNE APLIKACIJE .................................................................... 2

2.1 Tehnologije in pristopi.................................................................................................................... 2

2.1.1 AJAX polling ...................................................................................................................................... 2

2.1.2 Vtičniki ............................................................................................................................................. 2

2.1.3 Comet ............................................................................................................................................... 3

2.1.4 Websocket ....................................................................................................................................... 3

3 SPECIFIKACIJE PROJEKTA................................................................................................. 4

3.1 Izbira tehnologije ........................................................................................................................... 4

3.2 Uporabljene tehnologije................................................................................................................. 4

3.2.1 Node.js ............................................................................................................................................. 6

3.2.2 MongoDB ......................................................................................................................................... 8

3.2.3 Mongoose ........................................................................................................................................ 9

3.2.4 Ogrodje za predloge ....................................................................................................................... 10

3.2.5 Socket.io ......................................................................................................................................... 11

3.2.6 PleaseWait.js .................................................................................................................................. 13

3.2.7 Bootstrap ....................................................................................................................................... 14

3.2.8 Bootstrap »material design«.......................................................................................................... 15

3.2.9 Three.js .......................................................................................................................................... 16

3.3 Izbira spletnega strežnika ............................................................................................................. 18

3.3.1 Heroku ........................................................................................................................................... 18

3.4 Izdelava aplikacije ........................................................................................................................ 20

3.4.1 Generiranje Sudoku igre ................................................................................................................ 21

3.4.2 Reševanje igre Sudoku ................................................................................................................... 23

3.4.3 Večigralski Sudoku ......................................................................................................................... 25

4 ZAKLJUČEK .......................................................................................................................... 31

5 VIRI ........................................................................................................................................ 32

iv

Kazalo tabel TABELA 1: UPORABLJENE TEHNOLOGIJE ........................................................................................................... 5

TABELA 2: SEZNAM ODVISNOSTI ....................................................................................................................... 7

Kazalo slik SLIKA 1: OSNOVNA STRUKTURA GENERATORJA EXPRESS ................................................................................. 6

SLIKA 2: PONUDBA MLABA ................................................................................................................................ 9

SLIKA 3 JADE V PRIMERJAVI S HTML................................................................................................................ 11

SLIKA 4: ANIMACIJA NALAGANJA .................................................................................................................... 14

SLIKA 5: ENOSTAVEN OBRAZEC, NAREJEN Z BOOTSTRAPOM ......................................................................... 14

SLIKA 6: ENOSTAVEN OBRAZEC, NAREJEN SAMO Z UPORABO HTML ............................................................. 14

SLIKA 7: BOOTSTRAP ZAPRTO MODALNO OKNO ............................................................................................ 15

SLIKA 8: BOOTSTRAP ODPRTO MODALNO OKNO ........................................................................................... 15

SLIKA 9: BOOTSTRAP-MATERIAL-DESIGN PRAZNO VNOSNO POLJE ................................................................ 16

SLIKA 10: BOOTSTRAP-MATERIAL-DESIGN NEPRAZNO VNOSNO POLJE ......................................................... 16

SLIKA 11: BOOTSTRAP-MATERIAL-DESIGN GUMB........................................................................................... 16

SLIKA 12: BOOTSTRAP-MATERIAL-DESIGN STISNJEN GUMB ........................................................................... 16

SLIKA 13: ROTACIJA SUDOKUJA ....................................................................................................................... 17

SLIKA 14: IDEJA SPLETNEGA PONUDNIKA STREŽNIŠKIH STORITEV HEROKU ................................................... 18

SLIKA 15: REZULTAT INICIALIZACIJE HEROKU PROJEKTA ................................................................................. 19

SLIKA 16: USPEŠEN PRENOS NA STREŽNIK ...................................................................................................... 19

SLIKA 17: HEROKU DEMO PROJEKT ................................................................................................................. 20

SLIKA 18: GENERIRAN SUDOKU IZ WIKIPEDIJE ................................................................................................ 21

SLIKA 19: PRISTOP WEBGL ............................................................................................................................... 25

SLIKA 20: PRISTOP CSS3 ................................................................................................................................... 26

SLIKA 21: SUDOKU: POVABI PRIJATELJA .......................................................................................................... 26

SLIKA 22: SUDOKU: POTRDITEV ZAČETKA IGRE ............................................................................................... 27

SLIKA 23: SUDOKU: ZAKLJUČEK IGRE ............................................................................................................... 27

SLIKA 24: ENONITNO ASINHRONO DELOVANJE NODE.JS ................................................................................ 28

Kazalo izvornih kod KODA 1: UPORABA GENERATORJA EXPRESS ..................................................................................................... 6

KODA 2: JSON VSEBINA 'PACKAGE.JSON' DATOTEKE ........................................................................................ 7

KODA 3: NAMESTITEV VSEH ODVISNOSTI ......................................................................................................... 8

KODA 4: POGANJANJE LOKALNE MONGODB INSTANCE ................................................................................... 8

KODA 5: POVEZOVALNI NIZ DO PODATKOVNE BAZE ........................................................................................ 8

v

KODA 6: POVEZOVALNI NIZ DO MLAB-OVE PODATKOVNE BAZE ...................................................................... 9

KODA 8: MODEL UPORABNIKA ........................................................................................................................ 10

KODA 9: USTVARJANJE NOVEGA UPORABNIKA .............................................................................................. 10

KODA 10: NAMESTITEV SOCKET.IO ................................................................................................................. 11

KODA 11: VKLJUČITEV SOCKET.IO NA ODJEMALČEVI STRANI ......................................................................... 12

KODA 12: IZSEK KODE SOCKET.IO NA ODJEMALČEVI STRANI.......................................................................... 12

KODA 13: METODA 'LOAD' NA STREŽNIŠKI STRANI ......................................................................................... 13

KODA 14: PLEASEWAIT.JS ANIMACIJA ............................................................................................................. 13

KODA 15: PREKINITEV ANIMACIJE ................................................................................................................... 13

KODA 16: THREE.JS KOCKA V PROSTORU ........................................................................................................ 17

KODA 17: INICIALIZACIJA GIT ........................................................................................................................... 18

KODA 18: DODAJANJE KODE V LOKALNI REPOZITORIJ .................................................................................... 19

KODA 19: INICIALIZACIJA HEROKU PROJEKTA ................................................................................................. 19

KODA 20: SHRANJEVANJE V LOKALNI REPOZITORIJ IN PRENOS NA STREŽNIK HEROKU ................................. 19

KODA 21: ODPRTJE HEROKU APLIKACIJE ......................................................................................................... 20

KODA 22: METODA 1 ZA GENERIRANJE SUDOKUJA ........................................................................................ 21



KODA 25: GENERIRANJE SUDOKUJA ................................................................................................................ 23

KODA 26: ISKANJE PRAZNEGA POLJA .............................................................................................................. 24

KODA 27: REŠEVANJE KVADRATA Z DIMENZIJAMI 3 X 3 ................................................................................. 24

KODA 28: REŠEVANJE STOLPCA Z DIMENZIJAMI 1 X 9 .................................................................................... 24

KODA 29: PREVERITEV, ALI OBSTAJA REŠITEV ZA PRAZNO POLJE ................................................................... 25

KODA 30: ZAKLENI POLJE ................................................................................................................................. 29

KODA 31: ZAKLENI POLJE NA STREŽNIŠKI STRANI ........................................................................................... 29

KODA 32: ZAKLENI PRIDOBLJENO POLJE ......................................................................................................... 29

KODA 33: POŠLJI SPOROČILO .......................................................................................................................... 30

vi

SEZNAM UPORABLJENIH KRATIC AJAX - Asynchronous JavaScript and XML

NPM – Node package manager

3D – Three-Dimensional

I/O – Input/output

MIT – Massachusetts Institute of Technology

MVC – Model–view–controller

JSON – JavaScript Object Notation

SQL – Structured Query Language

NoSQL – Non SQL

MS – Microsoft

ORM – Object-relational mapping

DOM – Document Object Model

HTML – Hyper Text Markup Language

CSS – Cascading Style Sheets

JS – JavaScript

FOV - Field of view

IoT - Internet of things

IaaS – Infrastructure as a Service

OS – Operating system

SSH – Secure Shell

URL – Uniform Resource Locator

px – Pixel


1

1 UVOD

Spletne tehnologije so ena izmed najpomembnejših in najbolj razvijajočih se področij v

računalništvu, saj nam omogočajo da lažje razvijamo spletne in hibridne aplikacije, ki se

izvajajo na različnih napravah in operacijskih sistemih. Razvoj je od statičnih spletnih strani

prešel na dinamične spletne strani, ki ponujajo interakcijo uporabnikov s spletnim

strežnikom. Da bi bila uporabniška izkušnja tekoča, se je pojavila potreba po tehnologijah,

ki omogočajo komunikacijo med uporabniki v realnem času. V osnovi spletne tehnologije

niso bile grajene za sinhrono komunikacijo med brskalnikom in strežnikom. Šele s prihodom

HTML5 se je uveljavila tehnologija Websocket, ki je ena izmed tehnologij, ki omogoča

asinhrono komunikacijo. Strežniška tehnologija Node.js se s tehnologijo Websocket dobro

ujame, saj omogoča razširljivost in stroškovno učinkovitost.

S prihodom HTML5 se je uveljavila grafična spletna knjižica WebGL, ki omogoča

kompleksen izris 3D grafičnih elementov s strojnim pospeševanjem. Deluje brez

nameščanja vtičnikov, kar je hkrati njena velika prednost.

Za demonstracijo delovanja zgoraj omenjenih tehnologij smo se odločili, da v praktičnem

delu diplomske naloge izdelamo spletno aplikacijo, ki bi vsaj delno vsebovala WebGL.

Sklenili smo, da v aplikacijo vključimo realno-časovne storitve. Kot primer takšne aplikacije

smo izdelali večigralsko igro Sudoku, v kateri igralca med sabo komunicirata v realnem

času. Za uporabniški vmesnik aplikacije smo uporabili tehnologijo WebGL.

V drugem poglavju diplomskega dela smo opisali nekaj tehnologij oz. pristopov, ki se

uporabljajo za načrtovanje realno-časovnih aplikacij. V naslednjem poglavju smo opisali,

katere tehnologije smo izbrali za razvijanje aplikacije, in kako smo aplikacijo postavili na

spletni strežnik. V zadnjem delu tega poglavja smo predstavili celoten razvoj aplikacije,

hkrati pa opisali glavne težave, ki smo jih imeli med razvojem.


2

2 REALNO-ČASOVNE SPLETNE APLIKACIJE

Realno-časovne spletne aplikacije omogočajo realno-časovno komunikacijo med spletnim

strežnikom in njegovimi odjemalci. Enostaven primer realno-časovne spletne aplikacije je

npr. klepet. V klepetu sodelujeta vsaj dva uporabnika, ki si med seboj izmenjujeta sporočila.

V realno-časovni aplikaciji prejemnik dobi sporočilo takoj, ko ga pošiljatelj pošlje. Pri

standardni spletni aplikaciji bi morala aplikacija vsake toliko časa poslati zahtevo na strežnik

oz. vir in preveriti, ali je prišlo novo sporočilo. Bolj kompleksen primer realno-časovne

spletne aplikacije je večuporabniško realno-časovno urejanje dokumentov. Problem

spletnih realno-časovnih aplikacij je v tem, da protokol HTTP temelji na načinu delovanja

zahteva/odziv, zato strežnik nima načina, da bi informacijo kadarkoli poslal odjemalcu.

Odjemalec je tako načeloma obveščen le ob pošiljanju zahteve. Nastalo je nekaj pristopov,

ki so to omejitev protokola HTTP hoteli zaobiti (AJAX pooling, vtičniki, Comet), in pa nov

protokol Websocket, ki učinkovito rešuje težavo realno-časovnih aplikacij.

2.1 Tehnologije in pristopi

Poznamo več tehnologij in pristopov za aplikacije, ki omogočajo realno-časovno

komunikacijo odjemalcev s spletnim strežnikom. V nadaljevanju bomo našteli nekaj najbolj

znanih, izpostavili pa bomo tudi tistega, ki smo ga izbrali za načrtovanje naše aplikacije.

2.1.1 AJAX polling

Ajax polling [16] ni pravi realno-časovni pristop. Ta pristop se uporablja tako, da se na

časovni interval, npr. 20 sekund, pošiljajo klici AJAX, kjer strežnik v odgovoru pošlje

spremembe. Ta pristop za načrtovanje naše aplikacije ni idealen, saj bi posodobitve lahko

prejemali samo na časovni interval – zato ga nismo uporabili.

2.1.2 Vtičniki

Vtičnika Java in Flash prav tako omogočata realno-časovno komunikacijo odjemalca s

spletnim strežnikom, vendar se zaradi varnostnih lukenj veliko manj uporabljata. Spletni

brskalniki ukinjajo podporo dodatnih vtičnikov in dajejo prednost standardu HTML5.


3

2.1.3 Comet

Comet je spletni model za realno-časovne spletne aplikacije [1, 16]. Za svoje delovanje

uporablja standardni JavaScript in protokol HTTP, zato ga je lažje omogočiti v spletni

aplikaciji. Obstaja več različnih implementacij glede na zahteve aplikacije. V primerjavi z

Websocketi ima slabo lastnost, da se povezava med strežnikom in brskalnikom prekine, ko

se dodatki prenesejo, ob naslednji povezavi pa se more znova vzpostaviti. Comet je

zasnovan preko protokola HTTP in s tem ustvarja nepotreben mrežni promet.

2.1.4 Websocket

Websocket specifikacija definira API [6, 18], ki temelji na »socket« povezavi, med

brskalnikom in strežnikom. Povezava je persistentna, kar pomeni, da lahko brskalnik in

strežnik svoje sporočilo pošljeta ter se nanj odzoveta kadarkoli.

Protokol Websocket je primeren za zahtevne realno-časovne aplikacije, kot so recimo

večigralske igre. Protokol je namreč hitrejši v primerjavi z drugimi rešitvami, pri katerih

povezava poteka preko protokola HTTP. Pri Websocketih se povezava začne preko

protokola HTTP, nato pa, če strežnik omogoča tehnologijo Websocket, na tega tudi

preklopi. Protokol je zaradi tega, ker ne temelji na protokolu HTTP, težje implementirati.

Izpostavimo lahko tudi težave s starejšimi različicami brskalnikov, ki tega protokola ne

podpirajo. Zaradi protokola, ki ne temelji na protokolu HTTP, se pojavijo težave s požarnimi

zidovi in posredniškimi strežniki.


4

3 SPECIFIKACIJE PROJEKTA

3.1 Izbira tehnologije

V tej diplomski nalogi smo hoteli raziskati nove oz. novejše tehnologije, hkrati pa smo želeli

poiskati ustrezno arhitekturo za uporabo tehnologije Websocket. Tekom raziskovanja smo

naleteli na Node.js, strežniško spletno tehnologijo, napisano v JavaScriptu. Na spletu smo

našli veliko primerov klepetalnic, ki so v Node.js [12] zapisane samo v nekaj vrsticah

programske kode. Zaradi tega smo se odločili, da celotno aplikacijo napišemo v

programskem jeziku Node.js. Ena izmed velikih prednosti Node.js je ta, da lahko JavaScript

uporabljamo na odjemalčevi in na strežnikovi strani. Obenem je tehnologija brezplačna in

omogoča dobro razširljivost.

Tekom dela na projektu smo ugotovili, da Node.js ni idealna rešitev za vse probleme.

Node.js ima bistveno prednost za delo z vhodno/izhodnimi enotami enotami, kot je delo z

datotekami in delo s podatkovno bazo. Ker Node.js teče v samo enem procesu, ni

priporočljivo, da proces obremenimo s težko računsko logiko. V našem primeru je bilo

delovanje procesa na strani strežnika prepočasno, zato smo se odločili, da vso računsko

logiko preselimo na odjemalčevo stran.

3.2 Uporabljene tehnologije

V spodnji tabeli (Tabela 1) so vse pomembne tehnologije, ki smo jih uporabili pri izvedbi

projekta. V tabeli so najprej tehnologije na strežnikovi strani, nato pa uporabljene

tehnologije na odjemalčevi strani. V nadaljevanju je vsaka tehnologija na kratko opisana.

Večina tehnologij je pod licenco MIT, kar pomeni, da lahko knjižnici prosto prispevamo in jo

brezplačno uporabljamo.


5

Tabela 1: Uporabljene tehnologije

Tehnologija/ knjižnica Tip Verzija Licenca

Strežniška stran

Node.js JavaScript ogrodje 4.4.3 MIT

Express Ogrodje nad Node.js 4.13.1 MIT

Express-generator Ogrodje za ustvarjanje

MVC Node.js strukture

2.10.0 MIT

Socket.io Web sockets 1.4.5 MIT

MongoDB Podatkovna baza 3.2 GNU

Mongoose ORM za MongoDB 4.4.13 MIT

Client-sessions Seje na odjemalčevi strani 0.7.0 MIT

Cookie-parser Seje na strežniški strani 1.3.5 MIT

Morgan Pisanje dnevnikov na

strežniški strani

1.6.1 MIT

Jade/Pug Ogrodje za pisanje predlog 2.0.0-alpha6 MIT

Odjemalčeva stran

Material-icons Googlova pisava za ikone CC-BY

PleaseWait.js Knjižnica za simuliranje

nalaganja

MIT

Bootstrap HTML/JavaScript/CSS

ogrodje za odzivno

oblikovanje

3.3.6 MIT

Bootstrap material design Razširjeno ogrodje za

Bootstrap

0.5.9 MIT

prefixfree.js JavaScript ogrodje 1.0.3/1.0.7 MIT

JQuery JavaScript ogrodje v2.2.2 MIT

Tween.js JavaScript tweening

ogrodje

v16.3.4 MIT

Three.js JavaScript 3D ogrodje v76 MIT


6

3.2.1 Node.js

Node.js je strežniško okolje, napisano v programskem jeziku JavaScript [12, 13], ki temelji

na Chromovem V8 JavaScript ogrodju. Node.js za svoje delovanje uporablja eno nit in

dogodkovno proženje, kar omogoča visoko razširljivost. Je jedro, v katerega se dodajajo

knjižice oz. moduli, ki omogočajo delovanje naše aplikacije. Edina protokola, ki jih Node.js

že podpira, sta HTTP in HTTPS. Prav tako podpira osnovno delo z datotekami, kot je

dostavljanje datotek html. Osnovna uporaba knjižice je zelo enostavna. Razvijalcem

omogoča tudi več kontrole nad aplikacijo – v tem primeru je delovanje aplikacije težje

razumeti.

3.2.1.1 Express in Express Generator

Kot smo že omenili, Node.js ne ponuja veliko privzetih funkcionalnosti. Ima pa eno zelo

dobro lastnost – zraven Node.js se namesti tudi NPM. NPM je upravljalnik paketov za

Node.js in je trenutno eden izmed bolj popularnih upravljalnikov za pakete. Uporabili ga

bomo zato, da si namestimo Express Generator, s katerim lahko ustvarimo osnovno

strukturo programa. Da inicializiramo osnovno strukturo (Slika 1), zaženemo ukaz, kot je

prikazano v Koda 1.

$ express demo

Koda 1: Uporaba generatorja Express

Slika 1: Osnovna struktura generatorja Express


7

Z generatorjem Express lahko ustvarimo aplikacijo po programskem vzorcu MVC [4].

Vidimo lahko, da so bili ustvarjeni novi imeniki. Imenik 'public' je namenjen vsem javno

dostopnim datotekam, kot so slike, JavaScript datoteke, CSS datoteke itd. V ta imenik ne

smemo dajati strežniških datotek, kot je recimo datoteka 'app.js'. Imenik 'routes' je

namenjen usmerjanju tokov in nudi modularen pristop, saj lahko vsako usmerjanje pošljemo

v novo datoteko oz. nov imenik. Imamo še imenik 'views', ki je namenjen predlogam. Na

koncu imamo imenik 'bin', v katerem je začetna datoteka za zagon projekta.

Generator Express ustvari pomembno datoteko, imenovano 'package.json'. Vsebina je

vidna spodaj (Koda 2).

"name": "demo",

"version": "0.0.0",

"private": true,

"scripts": {

"start": "node ./bin/www"

},

"dependencies": {

"body-parser": "~1.13.2",

"cookie-parser": "~1.3.5",

"debug": "~2.2.0",

"express": "~4.13.1",

"jade": "~1.11.0",

"morgan": "~1.6.1",

"serve-favicon": "~2.3.0"

}

}

Koda 2: JSON vsebina 'package.json' datoteke

Ta datoteka ima zapisane vse odvisnosti, ki jih program potrebuje, da ga lahko sploh

zaženemo. V Tabela 2 so naštete vse knjižnice z opisi svojih namenov.

Tabela 2: Seznam Odvisnosti

Odvisnost Namen

Body-parser pridobivanje podatkov iz zahtev POST,

GET

Cookie-parser ustvarjanje sej s piškotki za uporabnike

Debug razhroščevalnik

Express ogrodje nad Node.js

Morgan Uporabljen za beleženje, npr. izjem ipd.

Serve-favicon prikazovanje faviconov na spletni strani


8

Če bi hoteli v danem trenutku projekt zagnati, bi nam program sporočil izjemo, saj nima

nameščenih odvisnosti. Da namestimo odvisnosti, zaženemo ukaz, viden spodaj (Koda 3).

$ npm install

Koda 3: Namestitev vseh odvisnosti

Ta ukaz poišče vse odvisnosti, ki smo jih definirali v datoteki 'package.json', in jih namesti

v imenik 'node_modules' v korensko kazalo projekta.

3.2.2 MongoDB

Podatkovne baze se uporabljajo za trajno shranjevanje podatkov. MongoDB je [14]

podatkovna baza NoSQL. Namestimo ga na naslednji spletni strani [10]. V MongoDB ni

tabel kot pri podatkovnih bazah SQL. Podatki so shranjeni v objektih JSON. Uporaba z

Node.js je idealna izbira za nas, saj ni pretvorbe podatkov, ker Node.js prav tako uporablja

objekte JSON. Glavna prednost podatkovnih baz NoSQL je v hitrosti in razširljivosti. Dokler

so poizvedbe enostavne, lahko procesira zelo veliko število poizvedb. V MongoDB ni

potrebe po ustvarjanju podatkovne baze in ustvarjanju tabel in struktur, saj z njimi upravlja

sam.

3.2.2.1 Poganjanje lokalne MongoDB instance

MongoDB poženemo lokalno z ukazom opisanim v Koda 4. Ukaz zažene proces, ki se

izvaja v ozadju.

$ .\mongod.exe –dbpath <pot do projekta>

Koda 4: Poganjanje lokalne MongoDB instance

Najboljše je, da ustvarimo nov imenik 'data' v korenu projekta in tam zaženemo proces, ki

se izvaja v ozadju.

V našem projektu Node.js moramo dodati modul, imenovan 'mongo'. Mongo je prilagodilnik

do podatkovne baze MongoDB in omogoča, da z njo manipuliramo. Za povezavo do

podatkovne baze uporabimo povezovalni niz, prikazan v kodi 5.

mongo.connect('mongodb://localhost/test

Koda 5: Povezovalni niz do podatkovne baze


9

S tem ukazom se povežemo na lokalno podatkovno bazo z imenom 'test'. Če baza še ni

bila ustvarjena, jo MongoDB ustvari avtomatsko. Ko je to urejeno, lahko nad bazo že

izvajamo poizvedbe.

3.2.2.2 mLab MongoDB

Med raziskovanjem smo naleteli na platformo mLab [9]. mLab, kot se platforma imenuje,

ponuja 500 MB podatkovnega prostora na oddaljenem strežniku brezplačno, kot je

prikazano na Slika 2. Ko ustvarimo novo podatkovno bazo, lahko izbiramo med 3 ponudniki:

AWS, Azure ali Google. Izberemo lahko tudi lokacijo strežnika. S tem dosežemo čim manjše

odzivne čase. Za projekt, ki smo si ga izbrali, je 500 MB podatkovnega prostora več kot

dovolj.

Slika 2: Ponudba mLaba

Potem ko se registriramo, moramo ustvariti uporabnika, ki lahko v instanco podatkovne

baze bere in piše. Za dostop do podatkovne baze zamenjamo povezovalni niz pri Koda 5 z

naslednjo kodo Koda 6).

mongodb://<dbuser>:<dbpassword>@ds032579.mlab.com:32579/sudokudb

Koda 6: Povezovalni niz do mLab-ove podatkovne baze

Baza že deluje na oddaljenem strežniku. Seveda ima brezplačna opcija nekaj

pomanjkljivosti. Pomanjkljivost je odzivni čas podatkovne baze, in če želimo narediti

varnostno kopijo podatkovne baze, moramo to žal storiti ročno.

3.2.3 Mongoose

Mongoose je jezik za podporo objektno relacijskim preslikavam za MongoDB [15].

MongoDB privzeto ne omogoča ustvarjanja kakršnihkoli modelov ali struktur. Brez strukture


10

lahko po nepotrebnem hitro naredimo kakšno napako, kot je vstavljanje nepotrebnih

podatkov v podatkovno bazo. Mongoose omogoča ustvarjanje modelov, kot na primer

model za uporabnika (Koda 7).

module.exports.User = mongoose.model('User', new Schema({

id: ObjectId,

username: {type: String, unique: true},

password: String,

color: String,

image: String,

gamesPlayed: {type: Number},

isGuest: {type: Boolean, default: false},

dateCreated: { type: Date, default: Date.now }

}));

Koda 7: Model uporabnika

Primer, kako napolnimo objekt uporabnika, je viden spodaj (Koda 8). Programska koda je

lažje berljiva; S tem naredimo manj napak.

var user = new models.User({

username: req.body.input_username,

password: hash,

color: req.body.profile_color_hex,

image: req.body.img_profile_picture_src,

gamesPlayed: 0,

isGuest: false

});

Koda 8: Ustvarjanje novega uporabnika

3.2.4 Ogrodje za predloge

Obstaja kar nekaj ogrodij za predloge v Node.js. Tukaj je nekaj izmed najbolj uporabljenih:

Jade/Pug.

Express-handlebars.

Express-react-views.

Mustache.js.

…

Privzeto ogrodje za predloge, ki je vključeno v generator Express, je Jade. Sprva

omenjenega ogrodja nismo marali, vendar smo, ko smo s tem ogrodjem projekt končali,

dojeli, da je Jade zelo uporaben. Primerjava z navadnim jezikom HTML je vidna na Slika 3.


11

Slika 3 Jade v primerjavi s HTML

Na začetku projekta smo potrebovali nekaj časa, da smo se ogrodje naučili uporabljati. Z

ogrodjem pridobimo nekaj časa, saj težje naredimo napako. Uveljavi se šele, ko ga

uporabljamo z ogrodjem Bootstrap. Edini problem, ki se pojavi pri tem ogrodju za predloge,

je ta, da se celotna spletna stran generira iz JavaScripta. Generiranje otežuje iskalnikom

iskanje relevantnih podatkov na spletni strani. Ogrodje za predloge z imenom Exspress-

react-views odpravi ta problem. Odločili smo se, da nas problem z iskalniki ne moti. V ta

namen smo se odločili za Jade. Jade so žal opustili. Ogrodje se je preimenovalo v Pug. Ko

govorimo o ogrodju Jade ali ogrodju Pug, mislimo isto stvar [7].

3.2.5 Socket.io

Web Socketi omogočajo obojestransko izmenjavanje informacij med odjemalčevo in

strežniško stranjo. Za Node.js se knjižnica imenuje socket.io. Socket.io [17] je knjižica, v

kateri je implementiran spletni protokol Websocket. Če brskalnik ne podpira Websocketa,

knjižica avtomatsko deluje s starejšim pristopom, v tem primeru je to Flash Socket.

Integracija z Node.js je enostavna. Socket. io namestimo tako, da zaženemo naslednji ukaz

(Koda 9).

$ npm install socket.io

Koda 9: Namestitev Socket.io

Na odjemalčevi strani socket.io vključimo z naslednjo vrstico kode Koda 10).


12

script(type='text/javascript', src='/socket.io/socket.io.js')

Koda 10: Vključitev socket.io na odjemalčevi strani

Enostavnost uporabe socket.io je vidna spodaj (koda 12). Ko se na odjemalčevi strani

socket.io vzpostavi, se kliče metoda 'connect'. Ta metoda je privzeta in je ne moremo

poimenovati drugače. Metoda pošlje unikatno številko na strežniško stran.

// on connection to server send my roomId

socket.on('connect', function(){

socket.emit('load', id);

});

Koda 11: Izsek kode socket.io na odjemalčevi strani

Poglejmo ustrezen izsek kode (Koda 12), ki se izvede, ko odjemalec pošlje unikatno številko

na strežniško stran. Glede na število uporabnikov v t.i. sobi, ki je določena z unikatno

številko, strežnik naredi tri odločitve. V primeru, da v sobi še ni uporabnika, strežnik

uporabnika obvesti, naj počaka soigralca. V drugem primeru, ko je en igralec že v sobi, mu

strežnik pošlje obvestilo, da se je pridružil drugi igralec. Drugemu igralcu se pošljejo podatki

o igralcu, ki je že v sobi. Tako se lahko uporabnik, ki se je ravnokar pridružil, odloči, ali sploh

želi igrati s tem igralcem. Zadnji primer se sproži, kadar sta v sobi več kot 2 igralca. V tem

primeru uporabnika, ki se je hotel pridružiti, obvesti o polni sobi. Uporabnik se v tem primeru

ne more pridružiti igri.

socket.on('load',function(data){

var room = getClientsInRoom(data);

//If no one but you is in the room you are the server

if(room.length === 0 ) {

socket.emit('peopleInRoom', {number: 0});

}

//One person

else if(room.length === 1) {

sudokuio.in(data).emit('notifyServerPlayerJoined', {

boolean: true

});

socket.emit('peopleInRoom', {

number: 1,

username: room[0].username,

image : room[0].image,

color : room[0].color,

id: data

});

}

//More than one

else if(room.length >= 2) {

sudokuio.broadcast.to(data).emit('tooMany', {boolean: true});


13

}

});

Koda 12: Metoda 'load' na strežniški strani

3.2.6 PleaseWait.js

Veliko je datotek, ki jih je treba naložiti na odjemalčevo stran. Knjižnica PleaseWait.js [8]

omogoča uporabljanje animacije, medtem ko se DOM nalaga. V izseku kode (Koda 13)

vidimo primer uporabe knjižnice PleaseWait.js. Da lahko knjižnico uporabimo, moramo skriti

element »body« in čimprej klicati metodo pleaseWait, ki je del knjižnice.

function StartAnimation(){

loading_screen = pleaseWait({

logo: "",

backgroundColor: '#eaeae9',

loadingHtml: "<div class='loader_cubewrap loader'><div

class='loader_cube'><div class='cube_front'><p>S</p></div><div

class='cube_back'><p>D</p></div><div class='cube_left'><p>O</p></div><div

class='cube_right'><p>U</p></div></div></div>"

});

cubeAnimationCounter = 0;

animationStop = false;

var elements = [$('.cube_front > p'),$('.cube_right >

p'),$('.cube_back > p'),$('.cube_left > p')];

elements[0].text('S');

elements[1].text('U');

elements[2].text('D');

elements[3].text('O');

animateCube();

}

StartAnimation();

Koda 13: PleaseWait.js animacija

Ko se DOM naloži, animacijo prekinemo z naslednjim ukazom (Koda 14). Na referenco

pleaseWait, v tem primeru loading_screen, kličemo metodo 'finish'.

loading_screen.finish();

Koda 14: Prekinitev animacije

Animacija, ki smo jo uporabili za našo aplikacijo, je vidna na sliki 4. Animacija v končnemu

uporabniku vzbudi občutek, da se z aplikacijo nekaj dogaja. Naša filozofija je uporabniku

raje animirati animacijo, dolgo tri sekunde, kot pa da strmi v prazen zaslon eno sekundo.


14

PleaseWait.js je enostavna, ampak uporabna knjižnica. Uporabniku poda bolj tekočo

spletno uporabniško izkušnjo.

Slika 4: Animacija nalaganja

3.2.7 Bootstrap

Bootstrap je HTML, CSS in JS ogrodje za razvoj odzivnih spletnih aplikacij na odjemalčevi

strani [2]. Za programerje je Bootstrap zelo uporabno ogrodje, če niso v ekipi z

oblikovalcem, kot je bilo v našem primeru. Spletna stran je privlačnejša na prvi pogled in

pritegne več uporabnikov. Poglejmo primerjavo med obrazcem, narejenim s pomočjo

Bootstrapa na Slika 5 in privzetoim obrazcem HTMLna sliki 6. Izgled strani tako z malo

vloženega truda približamo smernicam razvoja uporabniških vmesnikov.

Slika 5: Enostaven obrazec, narejen z Bootstrapom

Slika 6: Enostaven obrazec, narejen samo z uporabo HTML


15

Ponuja še eno uporabno funkcijo, imenovano modalna okna. Primer zaprtega modalnega

okna je viden na Slika 7, Primer odprtega modalnega okna pa na Slika 8. Modalna okna

naredijo spletno stran veliko bolj organizirano. Končni uporabnik lažje navigira po spletni

strani. Le-ta ima tako več funkcionalnosti, saj modalna okna preprosto pokažemo ali

skrijemo. Spletna stran izgleda dobro oblikovana.

Slika 7: Bootstrap zaprto modalno okno

Slika 8: Bootstrap odprto modalno okno

3.2.8 Bootstrap »material design«

Google je zbral skupino strokovnjakov na področju spletnega oblikovanja. Ti oblikovalci so

imeli en cilj. Ta je bil ustvariti oblikovno podobo spletnih in mobilnih aplikacij, ki bi bila bolj

intuitivna za ljudi. Inspiracijo so našli v papirju formata A4. Specifikacija se imenuje

»Material Design«.


16

Eno izmed ogrodij, ki temelji na »Material Designu«, je ogrodje z imenom bootstrap-

material-design [3]. Kot že ime pove, ogrodje temelji na Bootstrapu in je zato idealno za

uporabo v našem projektu, saj smo Bootstrap že vključili. Ena izmed funkcionalnosti je

sprememba vnosnih polj. Vnosno polje se spremeni z animacijo (Slika 9, Slika 10), ki

premakne 'Username' na vrh vnosnega polja, ko podatke vpišemo.

Slika 9: Bootstrap-material-design prazno vnosno polje

Slika 10: Bootstrap-material-design neprazno vnosno polje

Naslednji primer na slikah Slika 11 in Slika 12 prikazuje, kako se gumb spremeni, ko nanj

kliknemo. Gumb se optično dvigne s tem, ko se okoli gumba doda senca.

Slika 11: bootstrap-material-design gumb

Slika 12: bootstrap-material-design stisnjen gumb

3.2.9 Three.js

Three.js je 3D-knjižnica [11]. Cilj te knjižnice je poenostavljanje dela z WebGL. V našem

primeru smo videli, da je res tako. Ustvarjanje knjižnice WebGL je časovno potratno, zato

smo se odločili, da uporabimo Three.js. Poglejmo programsko kodo spodaj (Koda 15). Z

nekaj vrsticami lahko ustvarimo 3D-svet, v katerem je kocka. V čisti aplikaciji WebGL bi

potrebovali za isti rezultat več programske kode.

function init() {

scene = new THREE.Scene();


17

camera = new THREE.PerspectiveCamera( 75, window.innerWidth /

window.innerHeight, 1, 10000 );

camera.position.z = 1000;

geometry = new THREE.BoxGeometry( 200, 200, 200 );

material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe:

true } );

mesh = new THREE.Mesh( geometry, material );

scene.add( mesh );

renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

}

Koda 15: Three.js kocka v prostoru

V kombinaciji s Three.js smo uporabili tudi Tween.js, ki je knjižnica za animirane akcije. V

naši aplikaciji jo uporabljamo za animiranje kamere in začetno animacijo, ko se kocke

obrnejo za 90° .

Na kratko opišimo proces Three.js, ki smo ga uporabili. Najprej v polju z dimenzijami 9 x 9

ustvarimo prav toliko kock in jih postavimo na sceno. Naložimo pisavo iz datoteke. V ozadju

generiramo veljaven Sudoku, zatem pa vnesemo številke iz generiranega Sudokuja na 3D-

sceno. Three.js nam ponuja, da lahko Sudoku poljubno rotiramo in približujemo, kot vidimo

na Slika 13.

Slika 13: Rotacija Sudokuja


18

3.3 Izbira spletnega strežnika

Node.js potrebuje za svoje delovanje malo procesorske moči, zato imamo veliko izbiro, kje

bi lahko naš spletni strežnik postavili. Potencialno bi lahko deloval tudi na kakšni napravi

IoT. Node.js uporablja za svoje delovanje samo eno nit, zato so časovno potratne operacije

potratne za delovanje spletnega strežnika. Glede na to, da Node.js za svoje delovanje ne

potrebuje veliko računalniških virov, smo hoteli najti najcenejšo verzijo spletnega strežnika.

3.3.1 Heroku

Heroku je spletni ponudnik [5] strežniških storitev. Namenjen je manjšim start-up podjetjem

in samostojnim razvijalcem, ki nimajo primerne strežniške infrastrukture. Ko hočemo

spletno aplikacijo postaviti na spletni strežnik, moramo upoštevati več stvari. Najprej

moramo izbrati ponudnika IaaS, potem je treba izbrati še OS. Naslednja zadeva je

konfiguriranje OS, da aplikacijo sploh lahko zaženemo. Heroku ta proces s svojo storitvijo

bistveno poenostavi (Slika 14).

Slika 14: Ideja spletnega ponudnika strežniških storitev Heroku

Heroku uporablja git za prenos programske kode na spletni strežnik. Prva zadeva, ki jo

moramo narediti, je inicializirati git, da ustvarimo prazen lokalni repozitorij z ukazom, vidnim

spodaj (Koda 16).

$ git init

Koda 16: Inicializacija git


19

Z naslednjim ukazom (Koda 17) indeksiramo vse spremembe. Nato inicializiramo Heroku

projekt z ukazom, prikazenem v Koda 18. Heroku projektu dodeli naključno ime. Naključno

ime je v tem primeru 'cryptic-ravine-23433', kot vidimo na Slika 15.

$ git add .

Koda 17: Dodajanje kode v lokalni repozitorij

$ heroku create

Koda 18: Inicializacija Heroku projekta

Slika 15: Rezultat inicializacije Heroku projekta

Ko smo Heroku projekt uspešno inicializirali, indeksirane spremembe shranimo v lokalni

repozitorij. Nato ga prenesemo na Heroku strežnik z ukazoma, vidnima spodaj (Koda 19).

Če se je prenos zaključil uspešno, dobimo obvestilo, vidno na Slika 16.

$ git commit –m »initial commit«

$ git push heroku master

Koda 19: Shranjevanje v lokalni repozitorij in prenos na strežnik Heroku

Slika 16: Uspešen prenos na strežnik


20

Po zaključenem prenosu na spletni strežnik odpremo aplikacijo v privzetem spletnem

brskalniku z naslednjim ukazom (Koda 20). Rezultat je viden na Slika 17.

$ heroku open

Koda 20: Odprtje Heroku aplikacije

Slika 17: Heroku demo projekt

Tako smo samo z nekaj ukazi postavili našo spletno stran na oddaljeni spletni strežnik.

Velika prednost je brezplačna verzija, ki jo ponuja Heroku. Seveda ima brezplačna verzija

svoje slabosti, vendar je ta opcija še zmeraj zelo uporabna za demo projekte.

3.4 Izdelava aplikacije

Aplikacijo smo razvijali v več fazah razvoja. Najprej smo smiselno načrtali in postavili

podatkovno bazo. Sledila je postavitev strežniške strani z Node.js. Nato smo sočasno

razvijali odjemalčevo in strežniško stran, saj so se funkcionalnosti dopolnjevale. V tem

poglavju bomo opisali nekaj glavnih problemov, na katere smo pri izdelavi aplikacije naleteli.

Opisali bomo tudi rešitve, ki se nanašajo na te probleme.


21

3.4.1 Generiranje Sudoku igre

Prvi problem, ki se nam je pojavil pri načrtovanju

aplikacije, je bil potreba po generiranju unikatne

Sudoku igre. Enostavno »metanje« števil od 1 do 9

očitno ne gre, saj hitro ustvarimo neveljaven Sudoku.

Če torej ne znamo generirati Sudoku igre iz nič,

ustvarimo Sudoku igro iz že generiranega Sudokuja.

Uporabili smo Sudoku iz Wikipedije (Slika 18) [19]. Če

odstranimo vsa rdeča števila na sliki, dobimo veljaven

Sudoku, ampak tak Sudoku ni unikaten, zato ga ne

moremo uporabiti. Če bi odstranili 30 polj, bi dobili

veljaven Sudoku, ampak bi vsaka igra imela isto

rešitev. Igralec bi se lahko rešitev naučil na pamet in

bi lahko tako rešil vse igre.

Rešitev, ki smo jo uporabili, je enostavna. Našli smo pet metod, ki jih lahko uporabimo nad

veljavnim Sudokujem in ohranimo njegovo veljavnost. Programska koda prve metode Koda

21) najprej generira dve števili in v jih v primeru, da nista enaki, zamenja (na primer vsa

polja z vrednostjo 2 s 4 in obratno).

//Method1 replaces the number like 2 with 4

this.randomizeMethod1 = function() {

var number1 = getRandomNumber(9);

var number2 = getRandomNumber(9);

if (number1 == number2) return;

for (var i = 0; i < 9; i++) {

for (var j = 0; j < 9; j++) {

if (this.game[i][j].value == number1)

this.game[i][j].value = number2;

else if (this.game[i][j].value == number2)

this.game[i][j].value = number1;

}

}

}

Koda 21: Metoda 1 za generiranje Sudokuja

Programska koda druge metode (Koda 22) zamenja pravokotnik dimenzij 3 x 9 z drugim

pravokotnikom. Metoda najprej generira dva indeksa med 0 in 2. Če indeksa nista enaka,

zamenja pravokotnika. Igra ostane veljavna po zamenjavi. Metoda 3 prav tako zamenja

pravokotnik, vendar tistega z dimenzijami 9 x 3, ki leži vodoravno. Metoda 3 je zelo podobna

metodi 2 in je zato ne bomo posebej omenjali.

Slika 18: Generiran Sudoku iz

Wikipedije


22

//Method2 replaces 3x9 with another 3x9 horizontal

this.randomizeMethod2 = function () {

var index1 = getRandomIndex(3);


if (index1 == index2) return;

for (var i = 0; i < 3; i++) {

for (var j = 0; j < 9; j++) {

var tmp = this.game[(index1 * 3) + i][j].value;

this.game[(index1 * 3) + i][j].value = this.game[(index2 * 3)

+ i][j].value;

this.game[(index2 * 3) + i][j].value = tmp;

}

}

}


Programska koda četrte metode (Koda 23) zamenja dva stolpca z dimenzijami 1 x 9 znotraj

stolpca z dimenzijami 3 x 9. Metoda najprej generira indeks stolpca z dimenzijami 3 x 9,

nato pa 2 indeksa od 0 do 2. V primeru, da sta indeksa različna, stolpca zamenja. Metoda

5 je podobna metodi 4, le da se pri tej zamenja dve vrstici z dimenzijami 9 x 1 znotraj

pravokotnika z dimenzijami 9 x 3.

//Method4 a line inside the 3x9 horizontal

this.randomizeMethod4 = function () {

//Choose a 3x9

var index = getRandomIndex(3);



if (index1 == index2) return;

for (var j = 0; j < 9; j++) {

var tmp = this.game[(index * 3) + index1][j].value;

this.game[(index * 3) + index1][j].value = this.game[(index * 3)

+ index2][j].value;

this.game[(index * 3) + index2][j].value = tmp;

}

}


Za generiranje igre Sudoku uporabimo kombinacijo teh 5 metod Koda 24). Imamo zanko,

ki se ponovi od 4- do 13-krat. V vsaki iteraciji se generira naključno število od 1 do 5. Nato

se kliče ustrezna metoda za generiranje.

this.Randomize = function () {

if (this.validType() == false) return;

//repeat random times, max 13, min 4


23

for (var i = 0; i < getRandomNumber(10) + 3; i++)

switch (getRandomNumber(5)) {

case 1:

this.randomizeMethod1();

break;

case 2:


break;

case 3:


break;

case 4:


break;

case 5:


break;

default:

break;

}

}

Koda 24: Generiranje Sudokuja

Po generiranju odstranimo določeno število polj iz igre Sudoku. Število polj se razlikuje

glede na izbrano težavnost igre. Tako vsakič dobimo unikaten Sudoku za naše igralce.

Rešitev je tudi procesorsko nezahtevna.

3.4.2 Reševanje igre Sudoku

Obstaja kar nekaj metod za reševanje igre Sudoku – vse od zelo preprostih do

najzahtevnejših. Mi smo se lotili dveh enostavnejših, saj cilj te diplomske naloge ni bil

implementirati kompleksni reševalni algoritem.

V algoritmu za reševanje najprej iščemo prazna polja. Če smo v vsaj eni iteraciji skozi

prazna polja našli rešitev, algoritem ponavljamo. Del algoritma za reševanje vidimo na

programski kodi spodaj (Koda 25).

this.solveSudoku = function(){

if (typeof (this.game[8][8]) === 'undefined') return;

var foundSolution = true;

while(foundSolution == true){

foundSolution = false;

for(var i=0; i < 9; i++){

for(var j=0; j < 9; j++){

if(this.game[i][j].value == 0)

foundSolution = this.tryToSolveField(i, j);

}

}


24

}

return this.game;

}

Koda 25: Iskanje praznega polja

Za vsako prazno polje se izvede del kode, viden spodaj Koda 26), ki najprej predpostavi,

da ima prazno polje devet možnih rešitev. Cilj algoritma je eliminacija rešitev za polje. Kadar

ostane samo ena rešitev, je ta prava. Algoritem naprej eliminira polja v kvadratu z

dimenzijami 3 x 3, v katerem se prazno polje nahaja.

this.tryToSolveField = function(x, y) {

var possibleFieldEntries = [1, 2, 3, 4, 5, 6, 7, 8, 9];

//Check all the numbers in 3x3

var boundingRect = returnFieldPosQuad(x, y);

for(var i = boundingRect.rowMin; i <= boundingRect.rowMax; i++){

for(var j = boundingRect.colMin; j <= boundingRect.colMax; j++){

if(i != x || j != y){ // If not the field which was passed

if(this.game[i][j].value != 0){

possibleFieldEntries =

removeFromArray(possibleFieldEntries, this.game[i][j].value);

}

}

}

}

Koda 26: Reševanje kvadrata z dimenzijami 3 x 3

Algoritem eliminira polja v stolpcu z dimenzijami 1 x 9 (Koda 27). Prav tako v nadaljevanju

eliminira polja v vrstici z dimenzijami 1 x 9. Koda je podobna.

//Check all the numbers in 1x9

var j = y;

for (var i = 0; i < 9; i++) {

if(i != x || j != y){ // If not the field which was passed as

argument

if(this.game[i][j].value != 0){

possibleFieldEntries = removeFromArray(possibleFieldEntries,

this.game[i][j].value);

}

}

}

Koda 27: Reševanje stolpca z dimenzijami 1 x 9

V primeru, da nam v polju možnih rešitev ostane samo eno polje, je to le-to rešitev za dano

prazno polje (Koda 28).

//Check if method solved the case

if(possibleFieldEntries.length == 1){

this.game[x][y].value = possibleFieldEntries[0];

return true;


25

}

Koda 28: Preveritev, ali obstaja rešitev za prazno polje

3.4.3 Večigralski Sudoku

Za implementacijo smo uporabili knjižnico socket.io. Knjižica Socket.io nam omogoča

dvosmerno povezavo med strežniško in odjemalčevo stranjo.

Na kratko povzemimo, kako večigralski Sudoku deluje. Ko igralec ustvari večigralsko igro,

se generira naključna številka t.i. privatne sobe. Igralec, ki ustvari igro, ima vlogo strežnika,

kar pomeni, da bo igro generiral in poslal drugemu uporabniku, ko se mu ta pridruži. Prvi

igralec pošlje soigralcu URL. Ko se soigralec poveže na igro, se le-ta začne in traja, dokler

niso izpolnjena vsa polja. Na koncu se izračuna število točk in določi zmagovalec.

3.4.3.1 Odjemalčeva stran večigralskega Sudokuja

Dandanes je število naprav, ki se lahko povežejo na splet, zelo visoko. Hoteli smo

implementirati rešitev, ki bi delovala na večini naprav. WebGL žal ni podprt na vseh

napravah, ali pa je podprt samo delno. Odločili smo se, da izdelamo dva različna pristopa

za igranje. Prvi pristop je bil narejen s standardnimi tehnologijami, vidnimi na Slika 20, drugi

pa z WebGL (Slika 19). S tem je zagotovljeno delovanje na skoraj vseh napravah.

Slika 19: Pristop WebGL


26

Slika 20: Pristop CSS3

Pristopa smo tudi združili. Tako lahko z pristopom WebGL igramo proti pristopu CSS3.

Implementacija je relativno preprosta. Pri implementaciji moramo upoštevati, da se

implementirajo iste socket.io metode. Opišimo tok igre bolj podrobno.

Kot smo že omenili, je vsaka večigralska igra t.i. privatna soba. Soba ima naključno celo

število. Ko igralec ustvari igro, se mu pokaže zaslon, viden na Slika 21, kjer je URL do

trenutne igre. Vidimo lahko, da ima soba identifikator 857550.

Slika 21: Sudoku: povabi prijatelja


27

Ko se drugi igralec pridruži igri, se mu pokaže zaslon, viden na sliki 22. Na sliki vidimo

igralca, ki je že v sobi. Tisti, ki se je pridružil, se lahko odloči, ali bo z igralcem igral ali ne.

Slika 22: Sudoku: potrditev začetka igre

Po potrditvi drugega igralca se igra prične. Cilj igre je rešiti čim več praznih polj na sliki

(Slika 19 in Slika 20). Igralca zbirata točke, ki so med igranjem skrite. Začetna prazna polja

so vredna več kot tista na koncu igre. Igra se konča, ko so zapolnjena vsa polja. Ob

zaključku igre se pokaže zaslon, viden na Slika 23. Na zaslonu se prikaže zmagovalec in

število točk, ki sta jih igralca dosegla. Še zmeraj je omogočen klepet.

Slika 23: Sudoku: zaključek igre


28

3.4.3.2 Večigralski Sudoku: strežniška stran

V nadaljevanju bomo opisali potek komunikacije brskalnika s spletnim strežnikom.

Websocket dogodki se asinhrono prožijo na spletnem strežniku (Slika 24), kar omogoča

visoko število vzporednih povezav na spletni strežnik. Strežnik tako spremlja vse sobe in

število igralcev v vsaki izmed njih. Odgovoren je tudi za posredovanje informacij med

igralcema. Odločili smo se za implementacijo brez podatkovne baze, zato se v primeru, da

pride do prekinitve, podatki izgubijo. Igra traja okoli petnajst minut, zato se nam ni zdelo

smiselno vlagati čas v implementacijo.

Slika 24: Enonitno asinhrono delovanje Node.js

Strežnik najprej čaka na dogodek povezave 'connect', kjer igralec pošlje svojo unikatno

številko t.i. sobe. Strežnik preveri prisotnost igralcev v trenutni sobi. Kadar sta v sobi 2 ali

več igralcev, strežnik odgovori, da je soba že polna. Če je v sobi en igralec, se mu dodeli

vloga strežnika (strežnika v tem smislu, da bo igralec generiral Sudoku in ga poslal drugemu

uporabniku). Strežnik registrira uporabnika v sobo z njegovimi podatki. V tretjem primeru,

ko se drugi igralec pridruži sobi, strežnik pošlje podatke o prvem igralcu. Ko drugi igralec

igro potrdi, ga strežnik registrira v sobo. Soba je tako polna; strežnik zavrne vse nove

zahteve za priključitev igralcev v sobo. Po prijavi dveh igralcev v sobo strežnik začne igro

tako, da sproži dogodek 'start'. Strežnik pošlje vsakemu igralcu podatke o soigralcu.

Vzpostavi se tudi klepet. Med igro obstajajo trije dogodki, na katere strežnik čaka. To so:


29

zakleni polje, odkleni polje in pošlji vrednost. Kadar uporabnik pošlje dogodek 'lockField' oz.

zakleni polje, se izvede naslednji odsek kode Koda 29), kjer se indeks stolpca in vrstice

pošlje na strežnik.

//Emit lock to server

socket.emit('lockField', {col: Sudoku.X, row: Sudoku.Y});

Koda 29: Zakleni polje

Strežnik čaka na dogodek 'lockField' in ga enostavno posreduje drugemu igralcu s podatki

o igralcu, ki je sprožil to metodo, in indeksom vrstice in stolpca. Programska koda je vidna

spodaj (Koda 30).

socket.on('lockField', function(data){

sudokuio.in(socket.room).emit('receiveLockField', {

boolean: true,

col: data.col,

row: data.row,

playerName: socket.username,

playerColor: socket.color

});

});

Koda 30: Zakleni polje na strežniški strani

Strežnik proži dogodek 'receiveLockField', ki ga prestreže odjemalčeva stran (Koda 31).

Odjemalčeva stran najprej zaklene polje v knjižnici Sudoku, nato pa še na izbranem

pristopu, ki smo ga uporabili. V tem primeru Three.js obarva polje.

socket.on('receiveLockField', function(data){

if(data.boolean){

Sudoku.lockField(data.row, data.col);

threejsLockField(data.row, data.col, data.playerColor);

}

});

Koda 31: Zakleni pridobljeno polje

'Odkleni polje' in 'pošlji vrednost' sta dva dogodka, ki se na strežniku odvijata podobno. V

obeh primerih strežnik samo posreduje poslane informacije drugemu uporabniku.

Strežnik čaka na dogodek 'end'. Proži ga katerikoli igralec, ki zazna, da je število praznih

polj enako nič. V dogodku 'end' strežnik proži dogodek 'onEnd' obema igralcema in zahteva,

da pošljeta svoje število točk na spletni strežnik, ki jih strežnik nato samo posreduje.


30

Glede na dobljene točke se določi zmagovalec, kot vidimo na Slika 23. Igralca lahko še

zmeraj komunicirata preko klepeta. Klepet je enostavno implementiran. Uporabnik pošlje

sporočilo s programsko kodo (Koda 32) in tako proži dogodek 'msg'. Strežnik čaka na

dogodek 'msg' in posreduje podatke vsem uporabnikom v sobi. To je hitra rešitev, kadar

strežnik ni odziven in pošiljatelj takoj zazna, da njegovo sporočilo ni prispelo.

$('#chatSend').on('submit', function(e){

e.preventDefault();

var textarea = $('#textArea_message');

if(textarea.val().trim().length) {

// Send the message to the other person in the chat

socket.emit('msg', {msg: textarea.val(), playerName:

playerMeUsername, playerImage: playerMeImagePath});

}

textarea.val("");

});

Koda 32: Pošlji sporočilo


31

4 ZAKLJUČEK

V diplomskem delu smo z uspešno realizacijo večigralske igre pokazali možnost realno-

časovne komunikacije v spletnih aplikacijah. Implementiranje Websocketa z Node.js je

primerna kombinacija, saj smo ugotovili, da povezava med strežnikom in brskalnikom v

našem primeru poteka zanesljivo. Knjižnica, ki smo jo uporabili za implementiranje

tehnologije Websocket, je enostavna za implementacijo, saj je v našem primeru strežniška

in odjemalčeva programska koda napisana v istem programskem jeziku, kar naredi

programsko kodo lažje berljivo. Iz naših ugotovitev se je izkazalo, da uporabljena

tehnologija realno-časovne komunikacije deluje na vseh testiranih modernih spletnih

brskalnikih hitro in zanesljivo.

Uspešno smo realizirali implementacijo z WebGL. Naleteli smo na težavo, ko smo WebGL

hoteli implementirati na mobilnih spletnih brskalnikih. Odločili smo se za dva alternativna

pristopa, ker mobilni telefoni v celoti ali sploh niso podpirali funkcionalnosti WebGL. Z

uporabo Bootstrapa smo zagotovili, da je aplikacija odzivna tudi na mobilnih napravah.

Spekter uporabe aplikacije smo razširili na večino naprav, vendar smo s tem povečali

stroške razvoja.

Zastavljene specifikacije projekta smo z aplikacijo uspešno realizirali, zato smo zadovoljni

s končnim produktom. Dobra ideja, kar se tiče nadaljnjega razvoja produkta, je

implementacija skrbniške strani, s pomočjo katere bi lahko skrbnik spremljal vse igrane igre.

Prav tako bi lahko za vsakega uporabnika beležili zgodovino igranih iger. Aplikacijo bi lahko

bolj tesno povezali s socialnimi omrežji.


32

5 VIRI

[1] Delovanje AJAX Push. 2016. Dostopno na:

http://www.icesoft.org/java/projects/ICEfaces/ajax-push.jsf [27. 8. 2016]

[2] Knjižica Bootstrap. 2016. Dostopno na: https://getbootstrap.com/ [1. 5. 2016]

[3] Knjižica Bootstrap “Material Design”. 2016. Dostopno na:

https://github.com/FezVrasta/bootstrap-material-design [1. 5. 2016]

[4] Arhitektura MVC. 2016. Dostopno na:

https://developer.chrome.com/apps/app_frameworks [27. 8. 2016]

[5] Gostovanje Heroku. 2016. Dostopno na: https://www.heroku.com/pricing [15. 5. 2016]

[6] HTML5 Websockets. 2016. Dostopno na:

https://www.websocket.org/aboutwebsocket.html [27. 8. 2016]

[7] Ogrodje za predloge Jade. 2016. Dostopno na: http://jade-lang.com/ [1. 5. 2016]

[8] Knjižica PleaseWait. 2016. Dostopno na: https://pathgather.github.io/please-wait/ [24. 5.

2016]

[9] Gostovanje podatkovne baze; mLab. 2016. Dostopno na: https://mlab.com/ [14. 5. 2016]

[10] MongoDB. 2016. Dostopno na: https://www.mongodb.com/download-center [28. 4.

2016]

[11] Three.js – WebGL knjižica. 2016. Dostopno na: https://github.com/mrdoob/three.js/ [5.

5. 2016]

[12] Node.js strežniška arhitektura. 2016. Dostopno na: http://maxprog.net.pl/node-js/node-

js-server-architecture/ [28. 8. 2016]

[13] NodeJS. 2016. Dostopno na: https://nodejs.org/en/download/ [29. 4. 2016]

[14] NoSQL teorija. 2016. Dostopno na: https://www.mongodb.com/nosql-explained [27. 8.

2016]

[15] NPM mongoose. 2016. Dostopno na: https://www.npmjs.com/package/mongoose [28.

4. 2016]

http://www.icesoft.org/java/projects/ICEfaces/ajax-push.jsf

https://getbootstrap.com/

https://github.com/FezVrasta/bootstrap-material-design

https://developer.chrome.com/apps/app_frameworks

https://www.heroku.com/pricing

https://www.websocket.org/aboutwebsocket.html

http://jade-lang.com/

https://pathgather.github.io/please-wait/

https://mlab.com/

https://www.mongodb.com/download-center

https://github.com/mrdoob/three.js/

http://maxprog.net.pl/node-js/node-js-server-architecture/

http://maxprog.net.pl/node-js/node-js-server-architecture/

https://nodejs.org/en/download/

https://www.mongodb.com/nosql-explained

https://www.npmjs.com/package/mongoose


33

[16] Reverse AJAX. 2016. Dostopno na:

http://directwebremoting.org/dwr/documentation/reverse-ajax/index.html [27. 8.

2016]

[17] Knjižica socket.io. 2016. Dostopno na: http://socket.io/ [9. 5. 2016]

[18] Websockets. Ubl, M., & Kitamura, E. 2016. Dostopno na:

http://www.html5rocks.com/en/tutorials/websockets/basics/ [27. 8. 2016]

[19] Sudoku igra. 2016. Dostopno na:

https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Sudoku-by-L2G-

20050714_solution.svg/250px-Sudoku-by-L2G-20050714_solution.svg.png [1. 5.

2016]

http://directwebremoting.org/dwr/documentation/reverse-ajax/index.html

http://socket.io/

http://www.html5rocks.com/en/tutorials/websockets/basics/

https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Sudoku-by-L2G-20050714_solution.svg/250px-Sudoku-by-L2G-20050714_solution.svg.png

https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Sudoku-by-L2G-20050714_solution.svg/250px-Sudoku-by-L2G-20050714_solution.svg.png

uporaba spletnih tehnologij za izdelavo realno … · i uporaba spletnih tehnologij za izdelavo...

Documents