UPOZNAVANJE SA

RUTINAMA RAZVOJA
I PLANIRANJA
APLIKACIJA

Đorđević Stefan, Clever D.O.O

RETROSPEKTIVA KURSA SOVA

• Osnove interneta(pisanje eMail-a, internet pretraživači)

• HTML, CSS , JavaScript
• Upotreba terminala
• Moduli ( chart.js, nmp, minixhr )
• Programi za editovanje koda - Atom

2
CSS/HTML/JS

• Veza između CSS/HTML/JS

• Razlika između Internet prezentacije i internet aplikacije
• Koraci izrade internet prezentacije
- prepoznavanje namene prezentacije, specifikacija
- napraviti i implementirati dizajn
- testiranje i postavljanje internet prezentacije
Šta spada u statični a šta u dinamični deo aplikacije
3
INTERNET PREZENTACIJE – WEB
SITES
• Sadrže tekstualne i slikovne informacije o nekoj temi
• Bazirane su na CSS/HTML tehnologijama
• Navigacija je definisana preko linkova
• Korisnik sam bira kretanje kroz aplikaciju

4
MAPA SAJTA
• Mapa internet prezenacije
(sitemap) je lista svih strana
koja je dostupna
pretraživačima ili korisnicima.
• Obično je hijerarhijski
struktuirana kao i svaka
druga internet strana ili
poseban dokument.

5
INTERNET APLIKACIJE
• Bazirane su na CSS/HTML/JS uz podršku naprednijih
tehnologija (PHP, .NET, Java, MySQL ...)
• Internet aplikacije su interaktivne
• Sadrže tekstualne podatke, interaktivne forme za
unos, pregled, izmenu podataka, forme za pretragu,
proračune...

6
APSTRAKCIJA ZAHTEVA
(PROBLEMA)
• Osnovni problem u programiranju
je složenost korisničkog zahteva

• Uprošćavanje problema vrši se

apstrakcijom
• Apstrakcija podrazumeva postupak
definisanja karakterisika problema,
delova problema kao i njihove
međusobne veze

7
APSTRAKCIJA POBLEMA

• Za jedan problem moguće je

definisati više različitih apstrakcija
- Apstrakcija logičkih procesa
- Apstrakcija korisničkog interfejsa
- Apstrakcija skalabilnih ( proširivih procesa )

Nakon definisanja apstrakcije piše se dokument koji sadrži

prethodno navedene tipove. Taj dokument naziva se
specifikacija aplikacije.

8
APSTRAKCIJA ZAHTEVA
PORTFOLIO/KVIZ

9
 APSTRAKCIJA ZAHTEVA
PORTFOLIO/KVIZ
- Zahtev:Napraviti internet prezentaciju Portfolio/Kviz
- I faza: sadržaj portfolio prezentacije
- prikaz reprezentativnih osobina pojedinca
- detalji o obrazovanju
- detalji o radnom iskustvu
- kontakt
- II faza: definisanje teme kviza
- odabir pitanja kviza i tip odgovora
- koraci realizacije
- sumiranje rezultata i prikaz
10
APSTRAKCIJA ZAHTEVA
„PRODAVNICA AUTOMOBILA“

11
APSTRAKCIJA ZAHTEVA
„PRODAVNICA AUTOMOBILA“
Zahtev: Napraviti aplikaciju Prodavnica automobila
-I faza: procesi prodavnice
- artikli i grupe artikala
- rezervacija i način plaćanja artikala
- korisnička podrška
- servis automobila i rezervni delovi
-II faza: detalji po procesu
- artikli (modeli automobila, proizvođač, kubikaža, dodatna
oprema, cena, godina proizvodnje, broj vrata, potrošnja...)
- rezervacija ( broj dostupnih vozila, načini naručivanja (telefon,
forma aplikacije))
12
 APSTRAKCIJA ZAHTEVA
„PRODAVNICA AUTOMOBILA“
- način plaćanja (keš, leasing, kredit)
- korisnička podrška (call centar, odgovor putem emaila)
- servis automobila ( mapa lokacija, radno
vreme, kontakt telefoni)
- rezervni delovi (lista rezervnih delova,
spisak stanja dostupnosti, cena)
-III faza: procesi korisničkog interfejsa
- pretraga i pregled artikala i rezervnih delova
- kalkulator kursa (pretpostavimo da su cene artikala
izražene u EUR) 13
 APSTRAKCIJA ZAHTEVA
„PRODAVNICA AUTOMOBILA“
- integracija sa sistemom plaćanja (sinhronizacija upita
sa bankom direktno**)
- forma rezervacije
- grupisanje artikala po ceni, ekonomičnosti,
popularnosti vozila prema broju prodatih vozila
- linkovi ka proizvođaču

14
RAZVOJ APLIKACIJE
1. odabir tehnološke arhitekture aplikacije
2. odabir dodatnih komponenti
3. odabir organizacione arhitekture aplikacije

Tehnološka arhitektura aplikacije

podrazumeva programski jezik-e
kojima će se aplikacija pisati
Prilikom izrade internet aplikacija dominantna
je klijent/server arhitektura 15
TEHNOLOŠKA ARHITEKTURA
APLIKACIJE
• Internet prezentacije – HTML, CSS, JS
- Kao dodatak na navedene tehnologije potrebni su
internet server (web server) i internet klijenti
( poznavanje različitih pretraživača kako bi aplikacija
imala unifikovan izgled)

• Internet aplikacije – HTML, CSS, JS + PHP*

- Kao dodatak na navedene potrebni su internet
server, internet klijenti kao i aplikacioni server
Aplikacioni server predstavlja deo aplikacije (back
end) koji se izvršava na internet serveru na kom je
aplikacija smeštena. U našem slučaju posmatraćemo
razvijanje aplikacije u PHP programskom jeziku

16
TEHNOLOŠKA ARHITEKTURA
APLIKACIJE
INTERNET APLIKACIJE
• Internet klijenti služe za upravljanje interaktivnim korisničkim
interfejsom, i predstavlja deo aplikacije koji se naziva front end,
najčešće pisan u script jezicima (npr JavaScript)

• Internet aplikacije – HTML, CSS, JS + PHP*, baza podataka

- Kao dodatak na navedene potrebni su internet server, internet
klijenti kao i aplikacioni server

Aplikacioni server predstavlja deo aplikacije (back end) koji se

izvršava na internet serveru na kom je aplikacija smeštena. U
našem slučaju razvijena je u PHP programskom jeziku

Nakon odabira pogodne arhitekture kreće se u realizaciju

aplikacije po pisanoj specifikaciji

17
 ALATI U PROCESU ODRŽAVANJA
APLIKACIJE
• Jedan od izazova koji nastaje nakon implementacije rešenja
jeste dorada aplikacije.
• Nije moguće predvideti sve korisničke zahteve u datom
trenutku pisanja specifikacije tako da je potrebno napraviti
novu verziju aplikacije
• Zbog lakše organizacije uvode se alati za verzioniranje
aplikacije (version control).
• Poznati alati iz te grupe su:
- GIT
- SVN
- Mercurial

18
PRIMER KORIŠĆENJA GIT ALATA

Korisniku damo na testiranje verziju aplikacije 1.0, on će

istestirati aplikaciju i naći će nekoliko stvari koje treba ispraviti.
Mi ćemo otići u kancelariju, napraviti izmene i postaviti novu
verziju aplikacije na 1.1 Nekoliko dana kasnije, korisnik, uz
malo više iskustva o aplikaciji, zaključuje da ima bolju idejukako
je trebalo ispraviti početnu verziju tako da je potrebno vratiti kod
na početnu verziju, a zatim napraviti novu verziju 1.11

19
INTERFEJSI U PROGRAMIRANJU

• Interfejs predstalja programski kod koji logičko razdvaja

komponente aplikacije ili sistema preko kojih se vrši
razmena poruka
• Postoji nekoliko grupa interfejsa, mi ćemo se fokusirati
na dve:
- Hardverski interfejs
- Aplikacioni interfejs

20
HARDVERSKI INTERFEJS

• Implementiran je na velikom broju mašina, ulazni/izlaznim uređajima,

vozilima...
• Sastoji se od niza mehaničkih, električnih i logičkih signala koji su, u
većoj ili manjoj meri, povezani u celinu
• Prednost hardverskog interfejsa ogleda se u većoj fleksibilnosti
pisanja koda i modularnosti izrade aplijacija
Primer:
- Zvučna kartica
- Grafička kartica
21
APLIKACIONI INTERFEJS
• Odnosi se na različite delove operativnog sistema koji upravljaju
računarskim komponentama. Interfejsima se ograničava pristup resursima
računara (memorija, procesor...)
• Sastoji se od niza definisanih metoda (funkcija), konstanti, potpisa
izuzetaka (exceptions)
• Prednost aplikacionih interfejsa ogleda se u većoj preglednosti i raspodeli
raspoloživih resursa računara
Primer:
- lokacija u memoriji
- konkurentno programiranje

22
APLIKACIONI PROGRAMERSKI
INTERFEJSI - API
• API predstavljaju posebnu grupu interfejsa koji direktno koriste
prilikom rahvoja
• API sadrže niz rutina, protokola i alata koji su već razvijeni od
strane kompanije, tima ili individualnog programera
• Prednost korišćenja API-ja ogleda se u bržem razvoju aplikacija. U
zavisnosti od vrste API-ja zavisi i način njihove integracije u
aplikaciju
• Svaki API ima detaljnu specifikaciju po kojoj
integriše i koristi u aplijkaciji

23
WEB API

• Web API predstavljaju grupu API-ja koji koji se

koriste pri razvoju internet aplikacija
• Mogu biti u obliku alata (plugin-a) ili
zasebnog servisa koji je smešten na web
server
• Pri razvoju aplikacije Portfolio/Kviz na kursu
eSova koristili ste Chart.js, minixhr, Yo...

24
CHART.JS API – DEO
DOKUMENTACIJE

25
CHART.JS API – DEO IMPLEMENTACIJE
KODA

26
CHART.JS API – REZULTAT PORTFOLIO
KVIZA

27
NASTAVAK EDUKACIJE
Edukacija će se obaviti u tri faze, u trajanju od po mesec dana
1.Vizualizacija aplikacije
- Stručni termini u programiranju, definisanje razvojnog okruženja
- Kreiranje i implementacija dizajna, usavršavanje znanja u oblasti HTML
programiranja i stilizovanja strana u CSS-u
2.Implementacija dinamičnih elemenata aplikacije
- utvrđivanje znanja o JavaScript jeziku
- implementacija interaktivnih delova aplikacije korišćenjem Jquery
JavaScript biblioteke
- primena JavaScript apija

28
NASTAVAK EDUKACIJE

Edukacija će se obaviti u tri faze, u trajanju od

po mesec dana
3. Implementacija serverskog dela aplikacije
- Uvod u PHP programski jezik
- Koričćenje PHP API-ja
- Ovnove baza podataka
- Postavljanje aplikacije na internet server

29
 Pitanja i
odgovori?
30