integracija dinamiČke web aplikacije sa...

45
VISOKA ŠKOLA STRUKOVNIH STUDIJA ZA INFORMACIONE I KOMUNIKACIONE TEHNOLOGIJE ELEKTRONSKO POSLOVANJE INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA ANDROID PLATFORMOM Z a v r š n i r a d Mentor: Kandidat: Dr Nenad Kojić Bojan Kopanja, 1097/12 Beograd, 2014

Upload: dotuyen

Post on 06-Feb-2018

220 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

VISOKA ŠKOLA STRUKOVNIH STUDIJA

ZA INFORMACIONE I KOMUNIKACIONE TEHNOLOGIJE

ELEKTRONSKO POSLOVANJE

INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA ANDROID PLATFORMOM

Z a v r š n i r a d

Mentor: Kandidat:

Dr Nenad Kojić Bojan Kopanja, 1097/12

Beograd, 2014

Page 2: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

2

VISOKA ŠKOLA STRUKOVNIH STUDIJA

ZA INFORMACIONE I KOMUNIKACIONE TEHNOLOGIJE

NAZIV SPECIJALISTIČKOG RADA:

Integracija dinamičke web aplikacije

sa Android platformom

(popunjava Komisija za odbranu specijalističkog rada)

Datum predaje rada: _______________

Datum i vreme odbrane rada: _______________

Članovi komisije:

1.Dr Ana Savić ______________________________________

2.Mr Milanko Kragović ______________________________________

3.Dr Nenad Kojić ______________________________________

Mentor: Kandidat:

Dr Nenad Kojić Bojan Kopanja, 1097/12

Beograd, 2014

Page 3: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

3

SADRŽAJ

SPISAK KORIŠĆENIH SKRAĆENICA ...................................................................... 4

SPISAK SLIKA ................................................................................................... 4

1. UVOD ...................................................................................................... 6

2. TEHNOLOGIJA .......................................................................................... 7

2.1. Zend Framework .................................................................................... 7

2.2. Android ................................................................................................. 7

3. Organizacija ............................................................................................. 9

3.1. Modul WEB Aplikacije .............................................................................. 9

3.2. Public deo WEB aplikacije ...................................................................... 12

3.3. Strukturna organizacija mobilne aplikacije ............................................... 15

4. REZULTATI ............................................................................................. 20

4.1. WEB Aplikacija ..................................................................................... 20

4.1.1. Korisnik – Prodavnica ...................................................................... 20

4.1.2. Administrator ................................................................................. 24

4.2. Mobilna aplikacija ................................................................................. 27

5. KODOVI ................................................................................................. 33

5.1. Kodovi WEB aplikacije ........................................................................... 33

5.1.1. Modeli ........................................................................................... 33

5.1.2. Kontroleri ............................................ Error! Bookmark not defined.

5.1.3. Pogledi ................................................ Error! Bookmark not defined.

5.1.4. Ostali fajlovi ................................................................................... 37

5.2. Kodovi mobilne aplikacije ...................................................................... 41

5.2.1. Java fajlovi .................................................................................... 41

5.2.2. Resursi ................................................ Error! Bookmark not defined.

5.2.3. Dodatni fajlovi ...................................... Error! Bookmark not defined.

6. DIZAJN BAZE PODATAKA ......................................................................... 43

7. ZAKLJUČAK ............................................................................................ 44

8. LITERATURA ........................................................................................... 45

Page 4: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

4

SPISAK KORIŠĆENIH SKRAĆENICA

Skraćenica Značenje skraćenice Objašnjenje

PHP Hypertext Prepocessor Programski jezik

CRON Command Run ON Označava komandu koja se automatski izvršava u tačno određeno vreme

API Application Programming

Interface

Interfejs koji omogućava aplikacijama da koriste stvari dostupne preko API-a

CSS Cascading Style Sheets Opis semantike dokumenata pisanog u markup jeziku

MVC ModelViewControler Šablon za kreiranje modularnih, slojevitih aplikacija

GNU GNU's Not Unix Operativni sistem sastavljen isključivo od slobodnog softvera

JIT Just In Time Kompajliranje u realnom vremenu

ART Android Runtime Zamena za Dalvik JIT kompajler

AOT Ahead Of Time Kompajliranje pre upotrebe aplikacije, tj. odmah po instalaciji aplikacije

SPISAK SLIKA

Br. Naziv Strana

Slika 1. Strukturna organizacija Modula aplikacije 9.

Slika 2. Strukturna organizacija Public dela aplikacije 13.

Slika 3. Assets i Java folder mobilne aplikacije 15.

Slika 4. Strikturna organizacija resursa mobilne aplikacije 17.

Slika 5. Login ekran WEB aplikacije 20.

Slika 6. Registracija korisnika – prodavnice 21.

Slika 7. Podsetnik za unos proizvoda 21.

Slika 8. Spisak proizvoda prodavnice 22.

Slika 9. Izmena artikla 22.

Page 5: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

5

Sliak 10. Dijalog za potvrdu brisanja artikla 23.

Slika 11. Unos novog artikla 23.

Slika 12. Izmena podataka prodavnice 24.

Slika 13. Početni ekran administratora sistema 25.

Slika 14. Spisak kategorija u sistemu 26.

Slika 15. Dijalog za potvrdu brisanja kategorije 26.

Slika 16. Dodavanje kategorije 27.

Slika 17. Izmena kategorije 27.

Slika 18. Spisak prodavnica 28.

Slika 19. Spisak proizvoda u prodavnici 28.

Slika 20. Detalji proizvoda 29.

Slika 21. Kontekstni meni za obaveštavanje o sniženju 29.

Slika 22. Meni mobilne aplikacije 30.

Slika 23. Spisak kategorija 30.

Slika 24. Podešavanja aplikacije 31.

Slika 25. Podešavanje radijusa za pretragu prodavnica 31.

Slika 26. Notifikacija o pristigloj push poruci 32.

Slika 27. Detalji proizvoda na sniženju 32.

Slika 28. Dizajn baze podataka 144.

Page 6: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

6

1. UVOD

Aplikacija za praćenje popusta će imati za cilj da svojim koriscnicima omogući brz i jednostavan uvid u trenutne popuste u svojoj okolini, kako bi mogli da uštede novac na proizvodima koji im trebaju.

Aplikacija će se sastojati od dva dela, WEB aplikacije za administratora izrađenoj pomoću PHP frameworka Zend, i API dela koji će omogućiti drugim programerima da se nakače na sistem i koriste podatke kojima aplikacija raspolaže.

Takođe, za primer korišćenja API dela aplikacije biće izrađena Android aplikacija koja neće imati direktan pristup bazi podataka aplikacije već će sve podatke dobijati isključivo preko API-a.

WEB aplikaciju će moći da koriste dva tipa korisnika, a to su Administrator i Prodavnica.

Administrator će imati mogućnost da vidi proizvode svih prodavnica, kao i da ih menja i briše kako bi se osiguralo da postoji neki vid moderacije podataka na sistemu, a takođe će biti u mogućnosti da dodaje i menja kategorije kojima pripadaju proizvodi.

Prodavnica će moći da vidi samo proizvode koji pripadaju toj prodavnici, kao i da dodaje nove proizvode, i menja i briše postojeće. Prodavnica će takođe moći da menja podatke prodavnice, kao što su adresa i lokacija u vidu geografske širine i dužine kako bi Android aplikacija koja koristi API bila u mogućnosti da filtrira prodavnice i po udaljenosti korisnika od prodavnice.

Android aplikacija će omogućiti korisniku aplikacije da vrši pregled svih prodavnica, kao i proizvoda neke prodavnice. Korisnik će takođe moći i da proizvode umesto po prodavnicama gleda raspoređene po kategorijama, tako da će imati mogućnost da pogleda sve proizvode iz neke kategorije bez obzira na to kojoj prodavnici pripadaju.

Korisnik aplikacije će takođe moći da konfiguriše radijus koji želi da pretražuje kako bi mu aplikacija prikazivala samo prodavnice udaljene od njega onoliko koliko on želi. Korisnik aplikacije će moći da izabere proizvode koji ga zanimaju i da čeka da ga Android aplikacija obavesti kada taj proizvod bude na sniženju.

Korisnik će biti obavešten o sniženju kada prodavnica promeni cenu za nadgledani artikal na nižu od trenutne, a to će biti omogućeno CRON job-om koji će se izvršavati na svaki minut i proveravati da li je neki proizvod dobio nižu cenu od one koju je imao i da li neki korisnik treba biti obavešten o tome.

Kada aplikacija jednom obavesti korisnika o sniženju ona ga više neće obaveštavati o sniženjima tog proizvoda dok korisnik ponovo ne izabere da nadgleda taj proizvod za nižom cenom, a ovo će biti implementirano na taj način da bi se izbeglo preopterećivanje sistema prevelikim brojen slanja notifikacija o sniženoj ceni korisnicima koji su možda već kupili neki proizvod posle prvog sniženja cene.

Page 7: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

7

2. TEHNOLOGIJA

2.1. Zend Framework

Zend framework je Open Source framework za izradu WEB aplikacija zasnovan na PHP-u 5 i u potpunosti je implementiran korišćenjem objektno orijentisane paradigme.

Svaka komponenta Zend frameworka je urađena tako da što manje zavisi od ostalih komponenti čime je postignuta nezavisnost delova frameworka, tj. slaba sprega među komponentama što programeru omogućava da koristi samo one delove frameworka koji su mu potrebni, tj. ne mora da uvuče ceo framework u svoj projekat da bi na kraju koristio samo mali deo frameworka.

Zend framework koristi MVC pattern, tj. Model-View-Controller organizaciju projekta čime je postignuto odvajanje podataka, tj. Modela (eng. Model) od logike za obradu podataka, tj. Kontrolera (eng. Controller) i prezentacionog sloja tj. Pogleda (eng. View). Na ovaj način je programeru ostavljena mogućnost da recimo vrlo jednostavno napravi kompletno drugačiju vizuelnu prezentaciju podataka sajta, bez potrebe da menja išta u samoj logici za obradu podataka ili u samim modelima.

Činjenica da je Zedn framework Open Source projekat doprinela je stvaranju ogromnog broja komponenti unutar samog frameworka pri čemu je svaka komponenta prošla detaljno testiranje pre nego što je bila uključena u sam framework. Programer naravno često ima potrebu da implementira neku svoju logiku u WEB aplikaciju, ali za dobar deo funkcionalnosti može da posegne za već gotovom komponentom, kao što su recimo komponente za validaciju korisnika, sprečavanje SQL Injection-a, filtriranje sadržaja itd.

Sa druge strane upravo veliki broj gotovih komponenti čini Zend framework prilično kompleksnim frameworkom koji je uz to potrebno konfigurisati na određeni način i sve to ga čini prilično teškim za savladavanje za programere početnike koji se često odluče za neke od frameworka koji imaju malo blažu krivu učenja kao što su recimo CodeIgniter ili CakePHP. Međutim ukoliko se uloži malo truda u izučavanje Zend frameworka programer dobija veoma moćan alat za izradu kako manjih i jednostavnih, tako i veoma kompleksnih i velikih WEB aplikacija uz podršku ogromne zajednice na internetu pomoću koje će moći prilično lako da reši bilo koju poteškoću na koju naiđe u toku razvoja WEB aplikacije.

2.2. Android

Android je po svim statistikama najpopularnija i najrasprostranjenija platforma u svetu mobilnih uređaja kao što su mobilni telefoni, tablet računari, i netbook-ovi, mada se sve češće pojavljuju uređaji kao što su foto aparati, frižideri pa i mnogi drugi uređaji koji koriste ovaj operativni sistem. Razvijen je od strane Google-a i baziran je na Linux kernelu i GNU softveru. Sam operativni sistem je inicijalno napravila kompanija Android Inc. koju je kasnije kupio Google posle čega je dodatno proširio operativni sistem.

Ove godine (2014.) je prvi put u istoriji operativnih sistema za mobilne uređaje Android se nalazi na više uređaja nego sve ostale mobilne platforme zajedno.

Page 8: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

8

Ovakva popularnost Androida dovodi iz dana u dan do sve većeg broja korisnika, što naravno privlači i programere jer je tržište za koje prave aplikacije jako veliko i jednostavno i dalje ima mesta za sve.

Distribucija Androida počela je 5. Novembra 2007. godine osnivanjem „Open Handset“ alijanse, konzorcijuma sastavljenog od 71 proizvođača hardvera i softvera, kao i telekomunikacionih kompanija posvećenih unapređenju otvorenih standarda za mobilne uređaje. Veći deo Androida je napisana pod Apache licencom.

Za pisanje Android aplikacija koristi se uglavnom Java, mada je moguće koristiti i C++. Kao i klasična Java aplikacija, ni android aplikacije se ne prevode u binarni kod već u takozvani semi-binarni kod koji se u toku izvršavanja aplikacija prevodi u izvršni kod zahvaljujući JIT kompajleru koji se zove Dalvik. Dalvik je dodat u Android od verzije 2.2 (Froyo) i do današnjeg dana je višestruko ubrzan, tako da se aplikacije na Androdi uređajima svakom novom verzijom Dalvika izvršavaju sve brže i brže.

U novijim verzijama Androida (od verzije 4.4 - KitKat) uveden je ART runtime koji će u poslednjoj verziji Androida, koja je trenutno u fazi beta testiranja, u potpunosti zameniti Dalvika. Glavna razlika u odnosu na Dalvika je što je ART AOT (ahead of time) kompajler što znači da će aplikacija prvi put kada se instalira na telefon biti kompajlirana umesto kasnijeg kompajliranja u realnom vremenu, što bi trebalo značajno poboljšati vreme pokretanja aplikacija kao i same performanse.

Sve ovo nam pokazuje da se Android sistem iz dana u dan usavršava i postaje sve bolji i bolji odnoseći svaki dan sve veći deo tržišta konkurenciji. Zahvaljujući tome kvalitetnih Android aplikacija je sve više i trenutno PlayStore broji oko 1,300,000 aplikacija. Povrh svega ovoga Google ima vrlo jasnu viziju Androida u budućnosti tako da nam on postaje dostupan i na naočarama, satovima, automobilima, radio uređajima itd. tako da velike vesti o Androidu možemo tek da očekujemo.

Page 9: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

9

3. ORGANIZACIJA

3.1. Modul WEB Aplikacije

Na slici 1. je prikazana strukturna organizacija modula WEB aplikacije:

Slika 1. – Strukturna organizacija Modula aplikacije

Modul WEB aplikacije je podeljen na sledeći način:

- config – Folder koji sadrži konfiguraciju modula aplikacije

o module.config.php – Fajl koji sadrži konfiguraciju ruta, šablona za poglede, kontrolera itd.

- language – Folder u koji je moguće postaviti dodatne resurs fajlove ukoliko je aplikaciju potrebno prevesti na neki jezik

- src/Application – Folder koji sadrži modele, kontrolere i dodatne klase

o Classes – Folder sa dodatnim klasama koje se koriste u aplikaciji

� JSONRequestObject.php – Klasa koja se koristi za API deo aplikacije. Sadrži sva polja koja se mogu poslati unutar jednog API zahteva

o Controller – Folder sa kontolerima modula

� IndexController.php – Kontroler koji je zadužen za inicijalni prikaz sajta sa login formom ili pak sa listom artikala ukoliko je korisnik ulogovan

Page 10: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

10

� LoginController.php – Kontroler koji je zadužen za prijavu korisnika na sistem, za odjavu korisnika sa sistema kao i za davanje informacije da li je trenutni korisnik već prijavljen na sistem

� ProductsController.php – Kontroler koji je zadužen za rad sa proizvodima, tj. njiohovo dohvatanje, brisanje, dodavanje i izmenu.

� PublicApiController.php – Kontroler koji predstavlja javni API preko kojeg aplikacije drugih programera mogu da komuniciraju sa ostatkom sistema. Komunikacija se vrši razmenom poruka u JSON formatu i ovaj kontroler je zadužen za validaciju ulaznih parametara i slanje rezultata zahteva korisničkoj aplikaciji

� PushController.php – Ovaj kontroler služi za proveru da li nekom korisniku mobilne aplikacije treba da se pošalje push notifikacija o nekom sniženju i ako treba to i čini.

� RegisterController.php – Kontroler zadužen za registraciju korisnika, tj. prodavnica na WEB aplikaciju

� SuperadminController.php – Kontroler koji omogućava super administratoru sistema da radi akcije brisanja i izmene nad svim proizvodima u sistemu bez obzira na to kojoj prodavnici pripadaju, kao i da dodaje, briše i menja kategorije proizvoda

o Model – Folder sa svim modelima koje aplikacija koristi

� Entity – Folder sa entitetima

• Category.php – Etitet koji predstavlja jednu kategoriju proizvoda u sistemu

• Product.php – Entitet koji predstavlja jedan proizvod u sistemu

• Store.php – Entitet koji predstavlja jednu prodavnicu u sistemu

• UserProduct – Entite koji predstavlja vezu između korisnika i proizvoda i koristi se za vezanje korisnika za proizvod koji se nadgleda za sniženje

� CategoriesTable.php – Model koji predstavlja tabelu „categories“ i ima metode za dohvatanje svih kategoprija iz tabele, samo jedne po ID-u, kao i brisanje i izmenu određene kategorije

� MyAuthStorage.php – Storage koji služi za postavljanje vremena u sesiju za koje sistem treba da pamti ulogovanog korisnika ili brisanje istog parametra ukoliko se korisnik odjavljuje sa sistema

Page 11: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

11

� ProductsTable.php – Model koji predstavlja „products“ tabelu i ima metode za dohvatanje svih proizvoda iz tabele, samo jedong po ID-u, kao i brisanje i izmenu određenog proizvoda

� StoresTable.php – Model koji predstavlja tabelu „stores“ i ima metode za dohvatanje svih radnji iz tabele, dohvatanje određenih prodavnica po nazivu, dohvatanje jedne prodavnice po ID-i, kao i brisanje i izmenu prodavnice

� UserProductsTable.php – Model koji predstavlja veznu tabelu „user_products“. Ima metode za dohvatanje svih zapisa po ID-u korisnika, kao izmenu i brisanje veza između korisnika i proizvoda

- view – Folder sa šablonima za poglede

o application – Folder sa šablonima WEB aplikacije

� index – Folder sa šablonima za index kontroler

• index.phtml – Šablon koji se pokazuje korisniku kada se uloguje na sistem

• index_superadmin.phtml – Šablon sa menijem koji se pokazuje administratoru kada se uloguje na sistem

• index_superadmin_categories.phtml – Šablon sa menijem koji se prikazuje administratoru dok uređuje kategorije

� login – Folder sa šablonima za login kontroler

• login.phtml – Šablon koji se prikazuje korisniku dok se prijavljuje na sistem

� products – Folder sa šablonima za products kontroler

• add.phtml – Šablon koji se prikazuje korisniku kada dodaje nove proizvode

• edit.phtml – Šablon koji se prikazuje korisniku kada menja postojeći artikal

� public-api – Folder sa šablonima za public api kontoler

• get-product-names.phtml – Šablon koji formatira podatke sa imenima postojećih proizvoda koji se prosleđuju formi za dodavanje novih proizvoda

• template.phtml – Šablon koji formatira podatke koji se serviraju aplikaciji koja koristi API

� push – Folder sa šablonima za push kontroler

• push.phtml – Šablon za prikaz poruke da je zahtev za slanje push notifikacija izvršen

Page 12: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

12

� register – Folder sa šablonima za register kontroler

• edit.phtml – Šablon koji se prikazuje korisniku prilikom izmene profila prodavnice

• register.phtml – Šablon koji se prikazuje korisniku prilikom registracije

� superadmin – Folder sa šablonima za superadmin kontroler

• catadd.phtml – Šablon koji se prikazuje administratoru kada dodaje novu kategoriju

• catedit.phtml – Šablon koji se prikazuje administratoru kada menja postojeću kategoriju

� navigation.phtml – Meni za običnog korisnika

� navigation_superadmin.phtml – Meni za administratora

o error – Folder sa šablonima za greške

� 404.phtml – Šablon za grešku 404 – stranica nije pronađena

� Index.phtml – Šablon za sve ostale greške

o layout – folder sa šablonima koji se koriste u svim delovima aplikacije (i application i error)

� layout.phtml – Šablon koji ima zaglavlje i footer svake stranice kako se ne bi isti kod morao ponavljati u svakom šablonu

- Module.php – Modul klasa koja predstavlja tačku preko koje ModuleManager klasa Zend frameworka komunicira sa celim modulom

3.2. Public deo WEB aplikacije

Na slici 2 se vidi struktura public dela WEB aplikacije:

Page 13: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

13

Slika 2. – Strukturna organizacija Public dela aplikacije

Public deo aplikacije je podeljen na sledeći način:

- css – Folder sa svim CSS fajlovima aplikacije

o images – Folder sa slikama koje se koriste unutar CSS fajlova

o bootstrap.min.css – CSS fajl twitter bootstrap-a

o bootstrap-datetimepicker.min.css – CSS fajl date/time picker-a

o bootstrap-theme.min.css – CSS fajl teme aplikacije

o datetimepicker.css – Dodatni CSS fajl za date/time picker

o jquery.dataTables.css – CSS fajl za tabele u aplikaciji

o style.css – Opšti CSS koji se koristi širom aplikacije

Page 14: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

14

- fonts – Folder sa fontovima koji se koriste unutar aplikacije

- img – Folder sa slikama koji se koriste unutar aplikacije

- js – Folder sa JavaScript fajlovima koji se koriste unutar aplikacije

o locales – Folder sa prevodima koji se koriste u okviru date/time picker-a

o bootstrap.min.js – JS fajl sa funkcijama koje se koriste unutar Twitter bootstrap-a

o bootstrap-datetimepicker.min.js – JS fajl sa funkcijama date/time picker-a

o html5shiv.js – JS fajl koji omogućava HTML5 za Internet Explorer

o jquery.dataTables.min.js – JS fajl sa funkcijama za tabele unutar aplikacije

o jquery.min.js – JS fajl sa jQuery-em

o respond.min.js – JS fajl koji omogućava responsive izgled aplikacije u pojedinim delovima

- uploads – Folder sa fajlovima koje postavljaju korisnici aplikacije, tj. prodavnice

o images – Folder u koji se vrši upload slika proizvoda

o logos – Folder u koji se vrši upload logoa prodavnica

- .htaccess – Fajl koji ima opisana pravila po kojima se vrši URL rewrite

- index.php – Početni fajl na koji dolaze korisnici aplikacije i koji učitava kompletnu aplikaciju

Page 15: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

15

3.3. Strukturna organizacija mobilne aplikacije

Na slici 3 je prikazana strukturna organizacija assets i java delova mobilne aplikacije:

Slika 3. – Assets i Java folderi mobilne aplikacije

Assets i Java folderi imaju sledeću strukturu:

- assets – Folder sa asetima aplikacije

o fonts - Folder sa fontovima koji se koriste unutar aplikacije

o json – Folder sa fajlovima koji predstavljaju JSON šablone za lakše pravljenje zahteva ka API delu web aplikacije

- java – Folder koji sadrži celokupan source aplikacije

Page 16: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

16

o rs.zeussoftware.pratipopuste.app – Folder koji predstavlja paket aplikacije

� adapters – Folder koji sadrži adaptere za liste unutar aplikacije

• CategoriesAdapter.java – Fajl koji predstavlja adapter za popunjavanje liste kategorija

• ProductsAdapter.java – Fajl koji predstavlja adapter za popunjavanje liste proizvoda

• StoresAdapter.java – Fajl koji predstavlja adapter za popunjavanje liste prodavnica

� async – Folder koji sadrži klase za asinhronu komunikaciju sa API delom WEB aplikacije

• GetCategories_Async.java – Klasa za iniciranje API poziva koji vraća listu kategorija

• GetProductsForCatOrCompany_Async.java – Klasa za iniciranje API poziva koji vraća listu proizvoda po nekom od kriterijuma

• GetStores_Async.java – Klasa za iniciranje API poziva koji vraća listu prodavnica

• SaveUserProduct_Async.java – Klasa za iniciranje API poziva koji snima neki proizvod za korisnika kako bi korisnik kasnije bio obavešten o sniženju

� fragments – Folder sa fragmentima

• CategoriesFragment.java – Fragment koji prikazuje kategorije

• StoresFragment.java – Fragment koji prikazuje prodavnice

� util – Folder sa klasama koje se koriste širom aplikacije kao helperi

• Constants.java – Klasa sa konstantama aplikacije

• Helper.java – Statička klasa koja predstavlja helper sa setom metoda koje se koriste širom aplikacije

• MyBroadcastReceiver.java – Klasa koja prihvata Push notifikacije

• MyHttpHelper.java – Helper klasa za komunikaciju sa API delom WEB aplikacije preko HTTP protokola

� MainActivity.java – Početna aktivnost aplikacije

� MyApplication.java – Application klasa koja inicira registraciju mobilnog uređaja sa prijem push notifikacija

Page 17: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

17

� NavigationDrawerFragment.java – Fragment koji predstavlja navigaciju aplikacije

� ProductsActivity.java – Aktivnost koja prikatuje proizvode

� PushNotificationActivity.java – Aktivnost koja prikazuje detalje nekog proizvoda kada uređaj primi push notifikaciju sa informacijom o sniženju

� SettingsActivity.java – Aktivnost preko koje korisnik aplikacije može da menja podešavanja aplikacije

Na slici 4 je prikazana strukturna organizacija resursa mobilne aplikacije:

Slika 4. – Strukturna organizacija resursa mobilne aplikacije

Resursi aplikacije su organizovani na sledeći način:

- res – Folder koji sadrži sve resurse aplikacije

o drawable – Folder koji sadrži sve slike koje se koriste u aplikaciji nezavisno od gustine pixela ekrana

o drawable-hdpi – Folder koji sadrži sve slike koje se koriste u aplikaciji za ekrane visoke gustine pixela

o drawable-mdpi – Folder koji sadrži sve slike koje se koriste u aplikaciji za ekrane srednje gustine pixela

Page 18: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

18

o drawable-xhdpi – Folder koji sadrži sve slike koje se koriste u aplikaciji za ekrane jako visoke gustine ekrana

o drawable-xxhdpi – Folder koji sadrži sve slike koje se koriste u aplikaciji za ekrane mobilnih uređaja visoke rezolucije i izuzetno velike gustine pixela

- layout – Folder koji sadrži definicije izgleda korisničkog interfejsa mobilne aplikacije

o activity_main.xml – Definicija korisničkog interfejsa glavne aktivnosti

o activity_products – Definicija korisničkog interfejsa aktivnosti za prikaz proizvoda

o activity_push_notification.xml – Definicija korisničkog interfejsa aktivnosti koja korisniku aplikacije pokazuje detalje proizvoda koji je na sniženju

o fragment_categories.xml – Definicija korisničkog interfejsa fragmenta za prikaz kategorija proizvoda

o fragment_main.xml – Definicija korisničkog interfejsa fragmenta glavne aktivnosti

o fragment_navigation_drawer.xml – Definicija korisničkog interfejsa navigacije aplikacije

o fragment_stores.xml – Definicija korisničkog interfejsa fragmenta za prikaz prodavnica

o list_item_categories.xml – Definicija korisničkog interfejsa pojedinačnog reda za listu kategorija proizvoda

o list_item_products.xml – Definicija korisničkog interfejsa pojedinačnog reda za listu proizvoda

o list_item_stores.xml – Definicija korisničkog interfejsa pojedinačnog reda za listu prodavnica

- menu – Folder sa definicijama opcija za menije u aplikaciji

o global.xml – Definicija globalnog menija vidljivog u svim delovima aplikacije

o products.xml – Definicija dodatnih meni opcija unutar opcije prikaza proizvoda

o push_notification.xml – Definicija dodatnih meni opcija unutar prikaza detalja proizvoda

o stores.xml – Definicija dodatnih opcija unutar prikaza prodavnica

o wait_for_discount.xml – Definicija kontekstnog menija koji se pojavi dugim klikom na proizvod iz liste prouzvoda

Page 19: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

19

- values – Folder sa raznim resursima

o dimens.xml – XML fajl sa definisanim veličinama (margine, pirina menija itd.) koje se mogu koristiti unutar cele aplikacije

o strings.xml – XML fajl sa spiskom svih stringova unutar aplikacije za podrazumevani jezik aplikacije. Ukoliko je aplikacija podrazumevano na engleskom, da bi se prevela na srpski potrebno bi bilo samo prevesti ovaj fajl na srpski i aplikacija bi autimatski imala prevod za srpski jezik.

o string_activity_settings.xml – XML sa stringovima koji se koriste u aktivnosti za podešavanje aplikacije

o styles.xml – XML fajl sa definisanim stilovima koji se mogu koristiti unutar bilo kog dela aplikacije (slično CSS fajlu kod WEB aplikacije)

- values-large – Folder sa raznim resursima za ekrane velikih rezolucija

- values-w820dp – Folder sa resursima za ekrane sirine 820dp

o dimens.xml – XML fajl sa definisanim veličinama koje se koriste za ekrane širine 820dp

- xml – Folder sa definicijama ekrana za podešavanja aplikacije

o pref_general.xml - XML fajl sa definicijom opcija unutar aktivnosti sa podešavanjima aplikacije

- AndroidManifest.xml – Manifest fajl sa definisanim svim dozvolama koje aplikacija koristi, spiskom svih aktivnosti, podacima o temi koju koristi aplikacija za prikaz itd.

Page 20: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

20

4. REZULTATI

Ovaj projekat je podeljen u dve celine. Prvu celinu čini WEB aplikacija kojoj pristupaju super administrator i korisnici WEB aplikacije, tj. vlasnici prodavnica koji pomoću te aplikacije postavljaju na sistem proizvide koje imaju u ponudi.

Drugu celinu čini mobilna aplikacija koju koriste korisnici koji žele da pronađu neki proizvod u svojoj blizini koji je na popustu.

4.1. WEB Aplikacija

WEB aplikaciji pristupaju dva nivoa korisnika, tj. korisnik sa osnovnim pravima pristupa – prodavnica i administrator koji nema ograničenja u sistemu. Ovde ćemo opisati sistem posmatran iz oba ugla, kao klasičan korisnik i kao administrator.

4.1.1. Korisnik – Prodavnica

Kada korisnik, tj. vlasnik prodavnice prvi put dođe na WEB aplikaciju ugledaće formu za login ispod koje stoji link ka opciji registracije korisnika za slučaj da vlasnik prodavnice koji je došao na sajt još uvek nema kreiran nalog. Ovo je prikazano na slici 5.

Slika 5. – Login ekran WEB aplikacije

Ukoliko korisnik želi da se registruje u sistem i klikne na link za registraciju, otvoriće mu se forma sa slike 6. na kojoj treba da unese najosnovnije podatke o prodavnici.

Za slučaj da je korisnik greškom otvorio ekran za registraciju ispod forme za unos podataka o prodavnici i registraciju će videti i link za povratak na login formu.

Page 21: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

21

Slika 6. – Registracija korisnika – prodavnice

Posle registracije korisnika sistem će ga redirektovati nazad na login formu, uz razliku da će ovaj put sistem da mu ispiše i poruku koja je podsetnik da prodavnica treba da doda neki proizvod kako bi korisnici mobilne aplikacije mogli da pronađu prodavnicu. Ovo je prikazano na slici 7.

Slika 7. – Podsetnik za unos proizvoda

Kada je korisnik kreirao svoj nalog ili ukoliko je već imao isti, konačno može da se uloguje preko forme sa slike 5. tj. 7.

Kada se korisnik ulogovao sačekaće ga ekran kao na slici 8.

Page 22: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

22

Slika 8. – Spisak proizvoda prodavnice

Ovaj ekran je podeljen u 2 celine. Gornji deo ekrana je rezervisan za zaglavlje WEB aplikacije koje sadrži meni, a donji deo ekrana je rezervisan za sadržaj trenutno aktivne opcije.

U glavnom meniju aplikacije vlasnik prodavnice ima mogućnost da promeni podatke prodavnice, da doda novi proizvod ili da se odjavi sa sistema.

Inicijalno kada se vlasnik prodavnice uloguje, sistem mu pokazuje spisak svih artikala koje je do sada uneo u tabeli koja mu daje mogućnost pretrage artikala, paginaciju kao i izbor koliko artikala po stranici treba da se prikaže. U ovoj tabeli korisnik takođe ima mogućnost da izmeni neki artikal ili da ga potpuno obriše.

Klikom na izmenu artikla korisnik dobija formu sa slike 9. koja mu prikazuje sve podatke tog artikla i ostavlja mogućnost da ih izmeni.

Slika 9. – Izmena artikla

Page 23: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

23

Kada je korisnik izmenio sve što želi potrebno je da klikne na dugme „Sačuvaj izmene“ i sistem će ga vratiti na ekran sa slike 8. tj. na početni ekran sa spiskom svih artikala.

Ukoliko korisnik pokuša da obriše neki artikal sistem će mu otvoriti dijalog za potvrdu akcije kao što je prikazano na slici 10.

Slika 10. – Dijalog za potvrdu brisanja artikla

Korisnik aplikacije dodaje nove proizvode izborom opcije „Dodaj proizvod“ iz glavnog menija, posle čega će mu sistem prikazati formu kao na slici 11 preko koje može da unese podatke novog proizvoda.

Slika 11. – Unos novog artikla

Kada kroisnik popuni sva polja i klikne na dugme „Dodaj“ sistem će ga redirektovati nazad na spisak svih artikala (Slika 8.) i korisnik će tu moći da vidi i artikal koji je upravo dodao.

Page 24: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

24

Ukoliko korisnik želi da promeni neke podatke svoje prodavnice ili da doda geografsku lokaciju kako bi mobilna aplikacija mogla da pronađe njegovu prodavnicu po lokaciji i prikaže je korisnicima mobilne aplikacije, potrebno je da klikne na opciju „Podaci prodavnice“ u glavnom meniju.

Ova opcija otvara formu kao na slici 12. gde korisnik može da izmeni podatke prodavnice kao i da doda geo-lokaciju prodavnice.

Kada korisnik završi izmenu podataka i klikne na dugme „Sačuvaj izmene“ sistem će ga ponovo redirektovati na početnu stranicu, tj. na spisak artikala.

Slika 12. – Izmena podataka prodavnice

Kada je vlasnik prodavnice završio sa radom, potrebno je da se odjavi sa sistema, i to čini klikom na opciju „Odjava“ u glavnom meniju

4.1.2. Administrator

Administrator pristupa WEB aplikaciji na isti način kao i vlasnik prodavnice, tj. preko forme prikazane na slici 5.

Razliku između vlasnika prodavnice i administratora pravi sam sistem za prijavu na WEB aplikaciju tako da posle same prijave na sistem administrator dobija drugačije stranice za administraciju od vlasnika prodavnice. Takođe je bitno napomenuti da se administrator ne može samostalno registrovati već se neko može „promovisati“ u administratora promenom flag-a u samoj bazi podataka.

Kada se administrator prijavi na sistem ugledaće ekran kao na slici 13. koji veoma liči na ekran sa slike 8. koji vidi vlasnik prodavnice kada se uloguje, tj. i administrator odmah po prijavi na sistem vidi spisak artikala. Jedina razlika u odnosu na vlasnika

Page 25: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

25

prodavnice je što administrator sistema vidi artikle svih prodavnica, dok vlasnik prodavnice vidi samo artikle koji pripadaju njegovoj prodavnici.

Slika 13. – Početni ekran administratora sistema

Kao i vlasnik prodavnice i administrator na ovom ekranu imo mogućnost da izmeni i obriše neki artikal, a te funkcije izgledaju i funkcionišu identično kao i za vlasnika prodavnice, tako da neće biti ponovo opisivane. Jedina razlika sa vlasnikom prodavnice je što administrator nema opciju dodavanja artikala iz prostog razloga što nema prodavnicu te se njegovi proizvodi ne bi prikazivali nigde u mobilnoj aplikaciji.

Administrator nema opciju promene podataka prodavnice iz zbog toga što administrator nije vezan ni za jednu prodavnicu već je tu isključivo da se brine o samoj WEB aplikaciji.

Page 26: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

26

Slika 14. – Lista kategorija u sistemu

U glavnom meniju administrator ima dodatnu opciju „Kategorije“ i klikom na tu opciju dobija ekran sa slike 14. koji u tabeli prikazuje sve trenutno dostupne kategorije u sistemu, a iznad tabele sa kategorijama sa desne strane ima dugme za dodavanje nove kategorije preko kojeg otvara novi ekran za unos nove kategorije u sistem.

Tabela sa spiskom kategorija funkcioniše na isti način kao tabela sa spiskom proizvoda, tj. omogućava administratoru da izbriše ili izmeni kategoriju. Klikom na brisanje kategorije administrator dobija potvrdni dijalog prikazan na slici 15. kako bi potvrdio sistemu da je siguran da želi da izvrši to brisanje.

Slika 15. – Dijalog za potvrdu brisanja kategorije

Klikom na dugme „Dodaj kategoriju“ administrator dobija ekran kao na slici 16. gde treba da unese naziv i opis kategorije i potom klikne na dugme „Dodaj“. Po kliku na ovo dugme sistem će ga redirektovati nazad na spisak kategorija gde će ovaj put videti i kategoriju koju je upravo dodao.

Page 27: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

27

Slika 16. – Dodavanje kategorije

Kada administrator klikne na link „Izmeni“ u tabeli sa spiskom kategorija sistem mu prikazuje ekran sličan onom za dodavanje kategorije sa razlikom da je forma ovaj put unapred popunjena podacima izabrane kategorije kao što je prikazano na slici 17.

Slika 17. – Izmena kategorije

Kada administrator klikne na dugme „Sačuvaj izmene“ sistem ga ponovo redirektuje na spisak svih kategorija gde može da vidi izmene koje je upravo napravio.

Kada je super administrator završio sa radom potrebno je da u glavnom meniju klikne na opciju „Odjava“ i sistem će ga odjaviti i redirektovati nazad na ekran sa slike 5. tj. na ekran za prijavu na sistem.

4.2. Mobilna aplikacija

Mobilnu aplikaciju koriste svi oni koji žele da pronađu artikle koji ih zanimaju a nalaze se u njihovoj blizini i trenutno su na sniženju.

Kada korisnik prvi put startuje aplikaciju, sačekaće ga početni ekran kao na slici 18. U gornjem desnom ugli ekrana korisnik ima i opciju za osvežavanje ekrana tako da uvek može lako da proveri da li se pojavila neka nova prodavnica u spisku prodavnica.

Page 28: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

28

Slika 18. – Spisak prodavnica

Klikom na neku od prodavnica korisnik aplikacije dobija spisak artikala te prodavnice kao što je prikazano na slici 19.

Slika 19. – Spisak proizvoda u prodavnici

Kada korisnik klikne na neki od proizvoda dobiće uvid u detalje tog proizvoda kao što se vidi na slici 20.

Page 29: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

29

Slika 20. – Detalji proizvoda

Ukoliko korisnik aplikacije na ekranu sa slike 19. umesto kratkog klika na neki artikal zadrži prst na artiklu 2s, aplikacija će mu ponuditi kontekstni meni za ubacivanje tog artikla u artikle koji se nadgledaju za sniženje. Kontekstni meni je prikazan na slici 21.

Slika 21. – Kontekstni meni za obaveštavanje o sniženju

Korisnik mobilne aplikacije pristupa meniju aplikacije kada na početnom ekranu prevuče prstom sa leve strane ekrana na desnu. Ovaj gest će otvoriti meni sa leve strane i korisnik dobija pristup dodatnim opcijama koje su prikazane na slici 22.

Page 30: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

30

Slika 22. – Meni mobilne aplikacije

Prva opcija menija „Proizvodi po radnjama“ je upravo opcija koja je prikazana odmah po startovanju aplikacije, tako da korisnik može lako da se vrati na početni ekran aplikacije iz bilo koje druge opcije.

Klikom na opciju „Proizvodi po kategorijama“ korisnik dobija ekran sa spiskom kategorija kao na slici 23.

Slika 23. – Spisak kategorija

Klikom na neku od kategorija korisnik ponovo dobija spisak proizvoda kao na slici 19. sa identičnim setom opcija, tj. sa tog ekrana ponovo može da pogleda detalje nekog proizvoda ili zatraži od sistema obaveštenja o sniženju izabranog proizvioda, tako da te opcije nema potrebe ponovo opisivati.

Page 31: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

31

Kada korisnik aplikacije u meniju izabere opciju „Podešavanja“ dobija ekran kao na slici 24.

Slika 24. – Podešavanja aplikacije

U podešavanjima aplikacije korisnik ima mogućnost da omogući ili onemogući prijem push notifikacije, kao i da podesi radijus po kom aplikacija pretražuje prodavnice u blizini. Izborom opcije za podešavanje radijusa korisnik dobija listu predefinisanih daljina, kao na slici 25 i tu može da promeni udaljenost do koje će se pretraživati prodavnice.

Slika 25. – Podešavanje radijusa za pretragu prodavnica

Page 32: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

32

Kada korisnik zatraži u aplikaciji prijem obaveštenja o sniženju nekog artikla i kada prodavnica snizi cenu tog artikla, sistem će automatski poslati push notifikaciju korisniku i on će biti obavešten o tom sniženju čak ako i nije trenutno u aplikaciji.

Push notifikacija će se pojaviti u delu za notifikacije telefona kao što je prikazano na slici 26. i klikon na notifikaciju korisnik će videti detalje artikla na sniženju, uz prikaz stare cene i nove cene kako bi znao o kolikom se sniženju radi. Ekran sa detaljima sniženja je prikazan na slici 27.

Slika 26. – Notifikacija o pristigloj push poruci

Slika 27. – Detalji proizvoda na sniženju

Page 33: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

33

5. KODOVI

Kod je podeljen u 2 aplikacije, WEB aplikaciju i mobilnu aplikaciju.

5.1. Kodovi WEB aplikacije

Kod WEB aplikacije podeljen u 3 celine zahvaljujući MVC paternu Zend frameworka i to na klase za rad sa bazom podataka, tj. modele, klase za obradu podataka, tj. kontrolere i konačno na fajlove koji predstavljaju šablone stranica koje prikazuju podatke.

5.1.1. Modeli

Modeli su podeljeni na klase koje predstavljaju entitete tj. pojedinačan zapis u bazi podataka i na klase koje predstavljaju same tabele unutar baze podataka.

Entitet – Category.php

<?php namespace Application\Model\Entity ; class Category { protected $_id ; protected $_categoryName ; protected $_categoryDescription ; public function __construct ( array $options = null ) { if ( is_array ( $options )) { $this -> setOptions ( $options ); } } public function __set ( $name, $value ) { $method = 'set' . $name; if (! method_exists ( $this , $method )) { throw new Exception ( 'Invalid Method' ); } $this -> $method ( $value ); } public function __get ( $name) { $method = 'get' . $name; if (! method_exists ( $this , $method )) { throw new Exception ( 'Invalid Method' ); } return $this -> $method (); } public function setOptions ( array $options ) { $methods = get_class_methods ( $this ); foreach ( $options as $key => $value )

Page 34: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

34

{ $method = 'set' . ucfirst ( $key ); if ( in_array ( $method , $methods )) { $this -> $method ( $value ); } } return $this ; } public function getId () { return $this -> _id ; } public function setId ( $id ) { $this -> _id = $id ; return $this ; } public function getCategoryName () { return $this -> _categoryName ; } public function setCategoryName ( $categoryName ) { $this -> _categoryName = $categoryName ; return $this ; } public function getCategoryDescription () { return $this -> _categoryDescription ; } public function setCategoryDescription ( $categoryDescription ) { $this -> _categoryDescription = $categoryDescription ; return $this ; } }

Entitet – Product.php

<?php namespace Application\Model\Entity ; use Application\Model\CategoriesTable ; class Product { protected $_id ; protected $_productName ; protected $_categoryId ; protected $_categoryName ; protected $_productDescription ; protected $_storeId ; protected $_image ; protected $_price ; protected $_storeName ; public function __construct ( array $options = null ) { if ( is_array ( $options )) { $this -> setOptions ( $options ); }

Page 35: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

35

} public function __set ( $name, $value ) { $method = 'set' . $name; if (! method_exists ( $this , $method )) { throw new Exception ( 'Invalid Method' ); } $this -> $method ( $value ); } public function __get ( $name) { $method = 'get' . $name; if (! method_exists ( $this , $method )) { throw new Exception ( 'Invalid Method' ); } return $this -> $method (); } public function setOptions ( array $options ) { $methods = get_class_methods ( $this ); foreach ( $options as $key => $value ) { $method = 'set' . ucfirst ( $key ); if ( in_array ( $method , $methods )) { $this -> $method ( $value ); } } return $this ; } public function getId () { return $this -> _id ; } public function setId ( $id ) { $this -> _id = $id ; return $this ; } public function getProductName () { return $this -> _productName ; } public function setProductName ( $productName ) { $this -> _productName = $productName ; return $this ; } public function getCategoryId () { return $this -> _categoryId ; } public function setCategoryId ( $categoryId ) { $this -> _categoryId = $categoryId ; return $this ; }

Page 36: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

36

public function getCategoryName () { return $this -> _categoryName ; } public function setCategoryName ( $categoryName ) { $this -> _categoryName = $categoryName ; return $this ; } public function getProductDescription () { return $this -> _productDescription ; } public function setProductDescription ( $productDescription ) { $this -> _productDescription = $productDescription ; return $this ; } public function getStoreId () { return $this -> _storeId ; } public function setStoreId ( $storeId ) { $this -> _storeId = $storeId ; return $this ; } public function getImage () { return $this -> _image ; } public function setImage ( $image ) { $this -> _image = $image ; return $this ; } /** * @param mixed $price */ public function setPrice ( $price ) { $this -> _price = $price ; } /** * @return mixed */ public function getPrice () { return $this -> _price ; } /** * @param mixed $storeName */ public function setStoreName ( $storeName ) { $this -> _storeName = $storeName ; } /** * @return mixed */ …

Page 37: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

37

5.1.2. Ostali fajlovi

Ovde ću navesti spisak ostalih fajlova bitnih za samu WEB aplikaciju, a koji ne upadaju ni u jednu grupu fajlova iz MVC patterna.

U grupu „Ostali fajlovi“ spada dosta CSS fajlova, JS fajlova i drugih tipova fajlova koji nisu standardni deo Zend frameworka, ali ću ovde navesti samo one za koje sam ja tvorac, pošto dosta gore pomenutih fajlova nisu moje delo jer su pri izradi aplikacije korišćeni i jQuery, Twitter Bootstrap, DataTables i DateTime Picker.

Konfiguracioni fajl – module.config.php

<?php /** * Zend Framework (http://framework.zend.com/) * * @link http://github.com/zendframework/ZendS keletonApplication for the canonical source repository * @copyright Copyright (c) 2005-2013 Zend Technolo gies USA Inc. (http://www.zend.com) * @license http://framework.zend.com/license/new -bsd New BSD License */ return array ( 'router' => array ( 'routes' => array ( 'home' => array ( 'type' => 'Zend\Mvc\Router\Http\Literal' , 'options' => array ( 'route' => '/' , 'defaults' => array ( 'controller' => 'Application\Controller\Index' , 'action' => 'index' , ), ), ), 'register' => array ( 'type' => 'Zend\Mvc\Router\Http\Literal' , 'options' => array ( 'route' => '/register' , 'defaults' => array ( 'controller' => 'Application\Controller\Register' , 'action' => 'index' , ), ), ), 'edit_store' => array ( 'type' => 'Zend\Mvc\Router\Http\Literal' , 'options' => array ( 'route' => '/register/edit' , 'defaults' => array ( 'controller' => 'Application\Controller\Register' , 'action' => 'edit' , ), ), ), 'superadmin' => array ( 'type' => 'Zend\Mvc\Router\Http\Literal' , 'options' => array ( 'route' => '/superadmin' , 'defaults' => array ( 'controller' => 'Application\Controller\Superadmin' ,

Page 38: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

38

'action' => 'index' , ), ), ), 'superadmin_categories' => array ( 'type' => 'Zend\Mvc\Router\Http\Literal' , 'options' => array ( 'route' => '/superadmin/categories' , 'defaults' => array ( 'controller' => 'Application\Controller\Superadmin' , 'action' => 'categories' , ), ), ), 'cat_delete' => array ( 'type' => 'Zend\Mvc\Router\Http\Literal' , 'options' => array ( 'route' => '/superadmin/catdelete' , 'defaults' => array ( 'controller' => 'Application\Controller\Superadmin' , 'action' => 'catdelete' , ), ), ), 'cat_edit' => array ( 'type' => 'Zend\Mvc\Router\Http\Literal' , 'options' => array ( 'route' => '/superadmin/catedit' , 'defaults' => array ( 'controller' => 'Application\Controller\Superadmin' , 'action' => 'catedit' , ), ), ), 'cat_add' => array ( 'type' => 'Zend\Mvc\Router\Http\Literal' , 'options' => array ( 'route' => '/superadmin/catadd' , 'defaults' => array ( 'controller' => 'Application\Controller\Superadmin' , 'action' => 'catadd' , ), ), ), 'add_product' => array ( 'type' => 'Zend\Mvc\Router\Http\Literal' , 'options' => array ( 'route' => '/products/add' , 'defaults' => array ( 'controller' => 'Application\Controller\Products' , 'action' => 'add' , ), ), ), 'edit_product' => array ( 'type' => 'Zend\Mvc\Router\Http\Literal' , 'options' => array ( 'route' => '/products/edit' , 'defaults' => array ( 'controller' => 'Application\Controller\Products' , 'action' => 'edit' , ), ), ), 'delete_product' => array (

Page 39: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

39

'type' => 'Zend\Mvc\Router\Http\Literal' , 'options' => array ( 'route' => '/products/delete' , 'defaults' => array ( 'controller' => 'Application\Controller\Products' , 'action' => 'delete' , ), ), ), 'login' => array ( 'type' => 'Zend\Mvc\Router\Http\Literal' , 'options' => array ( 'route' => '/login' , 'defaults' => array ( 'controller' => 'Application\Controller\Login' , 'action' => 'index' , ), ), ), 'logout' => array ( 'type' => 'Zend\Mvc\Router\Http\Literal' , 'options' => array ( 'route' => '/logout' , 'defaults' => array ( 'controller' => 'Application\Controller\Login' , 'action' => 'logout' , ), ), ), 'public_api' => array ( 'type' => 'Zend\Mvc\Router\Http\Literal' , 'options' => array ( 'route' => '/api' , 'defaults' => array ( 'controller' => 'Application\Controller\PublicApi' , 'action' => 'index' , ), ), ), 'push' => array ( 'type' => 'Zend\Mvc\Router\Http\Literal' , 'options' => array ( 'route' => '/push' , 'defaults' => array ( 'controller' => 'Application\Controller\Push' , 'action' => 'push' , ), ), ), 'application' => array ( 'type' => 'Literal' , 'options' => array ( 'route' => '/application' , 'defaults' => array ( '__NAMESPACE__' => 'Application\Controller' , 'controller' => 'Index' , 'action' => 'index' , ), ), 'may_terminate' => true , 'child_routes' => array ( 'default' => array ( 'type' => 'Segment' , 'options' => array ( 'route' => '/[:controller[/:action]]' ,

Page 40: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

40

'constraints' => array ( 'controller' => '[a-zA-Z][a-zA-Z0-9_-]*' , 'action' => '[a-zA-Z][a-zA-Z0-9_-]*' , ), 'defaults' => array ( ), ), ), ), ), ), ), 'service_manager' => array ( 'abstract_factories' => array ( 'Zend\Cache\Service\StorageCacheAbstractServiceFact ory' , 'Zend\Log\LoggerAbstractServiceFactory' , ), 'aliases' => array ( 'translator' => 'MvcTranslator' , ), ), 'translator' => array ( 'locale' => 'en_US' , 'translation_file_patterns' => array ( array ( 'type' => 'gettext' , 'base_dir' => __DIR__ . '/../language' , 'pattern' => '%s.mo' , ), ), ), 'controllers' => array ( 'invokables' => array ( 'Application\Controller\Index' => 'Application\Controller\IndexController' , 'Application\Controller\Register' => 'Application\Controller\RegisterController' , 'Application\Controller\Login' => 'Application\Controller\LoginController' , 'Application\Controller\Products' => 'Application\Controller\ProductsController' , 'Application\Controller\PublicApi' => 'Application\Controller\PublicApiController' , 'Application\Controller\Push' => 'Application\Controller\PushController' , 'Application\Controller\Superadmin' => 'Application\Controller\SuperadminController' , ), ), 'view_manager' => array ( 'display_not_found_reason' => true , 'display_exceptions' => true , 'doctype' => 'HTML5' , 'not_found_template' => 'error/404' , 'exception_template' => 'error/index' , 'template_map' => array ( 'layout/layout' => __DIR__ . '/../view/layout/layout.phtml' , 'application/navigation' => __DIR__ . '/../view/application/navigation.phtml' , 'application/index/index' => __DIR__ . '/../view/application/index/index.phtml' , 'application/register/index' => __DIR__ . '/../view/application/register/register.phtml' ,

Page 41: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

41

5.2. Kodovi mobilne aplikacije

Mobilna aplikacija je podeljena na nekoliko grupa i to su java fajlovi, resursi u vidu XML definicija korisničkog interfejsa i dodatni fajlovi koji se kroiste u resursima i java fajlovima.

5.2.1. Java fajlovi

Java fajlovi su podeljeni na adaptere, asinhrone pozive ka API delu WEB aplikacije, fragmente, pomoćne fajlove kao i aktivnosti.

Adapter – CategoriesAdapter.java

package rs . zeussoftware . pratipopuste . app . adapters ; import android . content . Context ; import android . graphics . Color ; import android . view . LayoutInflater ; import android . view . View ; import android . view . ViewGroup ; import android . widget . BaseAdapter ; import android . widget . ImageView ; import android . widget . TextView ; import com . squareup . picasso . Picasso ; import org . json . JSONArray ; import org . json . JSONObject ; import rs . zeussoftware . pratipopuste . app . R; import rs . zeussoftware . pratipopuste . app . fragments . CategoriesFragment ; import rs . zeussoftware . pratipopuste . app . fragments . StoresFragment ; import rs . zeussoftware . pratipopuste . app . util . Constants ; /** * Created by bkopanja on 6/13/2014. */ public class CategoriesAdapter extends BaseAdapter { JSONArray data = null ; CategoriesFragment fragment ; public CategoriesAdapter ( CategoriesFragment fragment , JSONObject data ) { this . fragment = fragment ; try { this . data = data . getJSONArray ( "categories" ); } catch ( Exception e ) { e . printStackTrace (); } } @Override public int getCount () { if ( data != null ) { return data . length (); } return 0; } @Override public Object getItem ( int i ) {

Page 42: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

42

JSONObject jo = null ; try { jo = data . getJSONObject ( i ); } catch ( Exception e ) { e . printStackTrace (); } return jo ; } @Override public long getItemId ( int i ) { JSONObject jo = null ; try { jo = data . getJSONObject ( i ); long id = jo . getLong ( "id" ); return id ; } catch ( Exception e ) { e . printStackTrace (); } return 0; } @Override public View getView ( int i , View view , ViewGroup viewGroup ) { View v = null ; try { LayoutInflater inflater = ( LayoutInflater ) fragment . getActivity (). getSystemService ( Context . LAYOUT_INFLATER_SERVICE); if ( view == null ) v = inflater . inflate ( R. layout . list_item_categories , null ); else v = view ; TextView tvName = ( TextView ) v . findViewById ( R. id . txtCategoryName ); TextView tvAddress = ( TextView ) v . findViewById ( R. id . txtCategoryDescription ); TextView tvId = ( TextView ) v . findViewById ( R. id . txtCategoryId ); tvName . setText ( data . getJSONObject ( i ). getString ( "categoryName" )); if (! data . getJSONObject ( i ). getString ( "categoryDescription" ). equals ( "null" )) tvAddress . setText ( data . getJSONObject ( i ). getString ( "categoryDescription" )); else tvAddress . setText ( fragment . getActivity (). getString ( R. string . category_bez_opisa )); tvId . setText ( data . getJSONObject ( i ). getString ( "id" )); if ( i % 2 == 0) v . setBackgroundColor ( Color . rgb ( 210 , 210 , 210 )); else v . setBackgroundColor ( Color . argb ( 0, 255 , 255 , 255 ));

Page 43: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

43

6. DIZAJN BAZE PODATAKA

Baza podataka celog sistema je prilično jednostavna ali dozvoljava veliku fleksibilnost prilikom povezivanja korisnika sa proizvodima, prodavnica sa proizvodima itd.

Dizanj baze podataka je prikazana na slici 28.

Slika 28. – Dizajn baze podataka

Page 44: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

44

7. ZAKLJUČAK

Aplikacija za praćenje popusta je realizovana sa ciljem da svojim koriscnicima omogući brz i jednostavan uvid u trenutne popuste u svojoj okolini, kako bi mogli da uštede novac na proizvodima koji im trebaju.

U 21. veku je veoma bitno da podaci korisnicima budu dostupni bilo kada i bilo gde i zato je u sklopu WEB aplikacije napravljen javni API koji omogućava drugim programerima upotrebu podataka iz sistema čime otvara praktično bezbroj mogućnosti za izradu aplikacija koje se oslanjaju na ovaj sistem.

Za primer ovog rada napravljena je Android mobilna aplikacija koja koristi podatke iz baze podataka, ali to ne ograničava programere da sutra napišu iOS aplikaciju, aplikaciju za Google naočare, smart televizor ili nešto potpuno novo i time omoguće korisnicima svojih aplikacija da u realnom vremenu na bilo kom uređaju budu obaveštavani o sniženjima u svojoj okolini.

Kroz izradu ove aplikacije pokušao sam da prikažem samo jednu mogućnost upotrebe ovakvog sistema, ali ovaj sistem svakako ima dosta potencijala da se dodatno razvija u budućnosti, kao i da postane profitabilan, a jedan od potencijalnih načina zarade bi bilo naplaćivanje mesečne pretplate prodavnicama što bi favorizovalo njihove proizvode u prikazu liste proizvoda. Ovakav sistem bi takođe mogao u budućnosti doneti zaradu i programerima koji bi pravili aplikacije koje koriste API tako što bi se recimo prikazivale reklame prodavnica u okviru spiska proizvoda na mobilnoj aplikaciji.

Page 45: INTEGRACIJA DINAMIČKE WEB APLIKACIJE SA …webdizajn.ict.edu.rs/sites/default/files/diplomski_primeri/spec... · Assets i Java folder ... to ga čini prilično teškim za savladavanje

45

8. LITERATURA

- „HTML5 unleashed“, Autor: Simon Sarris

- „Thinking in CSS“, Autor: Aravind Shenoy

- „jQuery: Novice to ninja“, Autori: Earle Castledine i Craig Sharkie

- „PHP and MySQL WEB Development, Developer’s Library“, Autori: Luke Welling i Laura Thompson

- „MySQL, Developer’s Library“, Autor: Paul DuBois

- „Zend Framework 2 Application Development“, Autor: Christopher Valles

- „Professional Android 4 Application Development“, Autor: Reto Meier

- „Android Design Patterns: Interaction Design Solution for Developers“, Autor: Greg Nudelman