TEHNI?KO tvrtke. Ukoliko je nekome od menadžera potrebna statistika

TEHNI?KO VELEU?ILIŠTE U ZAGREBU

POLITEHNI?KI SPECIJALISTI?KI DIPLOMSKI STRU?NI STUDIJ

We Will Write a Custom Essay Specifically
For You For Only $13.90/page!


order now

Specijalizacija ra?unarstvo

 

 

 

 

 

 

Ivan Rusan

ANGULAR
APLIKACIJA ZA CorvusPay STATISTIKE

Seminar iz kolegija: Metodologija stru?nog i istraživa?kog rada

 

 

 

 

 

 

 

 

 

 

Zagreb, 6. sije?nja 2018.

SAŽETAK

Angular aplikacija za CorvusPay statistike
namijenjena je isklju?ivo zaposlenicima te tvrtke. Preciznije, namijenjena je
menadžmentu i prodaji te tvrtke. Ukoliko je nekome od menadžera potrebna statistika
mora tražiti programera da napravi upit na bazi i da kreira statistiku. Ukoliko
programeri imaju zadatke ve?eg prioriteta menadžer statistiku može ?ekati
satima, a u nekim slu?ajevima i danima. Aplikacija bi menadžmentu omogu?ila
trenutno kreiranje statistika i pomogla bi im da kvalitetnije obavljaju svoj
posao. Tako?er bi rasteretila programere koji više ne bi trebali raditi
ponavljaju?e poslove i mogli bi više vremena posvetiti implementaciji novih
funkcionalnosti i održavanju postoje?eg sustava.

 

 

SADRŽAJ

SAŽETAK……………………………………………………………………………………………………. 2

SADRŽAJ……………………………………………………………………………………………………. 3

POPIS SLIKA………………………………………………………………………………………………. 4

POPIS PRIMJERA KODA…………………………………………………………………………… 4

POPIS KRATICA…………………………………………………………………………………………. 4

1.      Uvod…………………………………………………………………………………………………….. 5

2.      Što je CorvusPay?……………………………………………………………………………… 6

3.      Angular………………………………………………………………………………………………… 7

3.1.      Komponente…………………………………………………………………………………. 7

3.2.      Direktive………………………………………………………………………………………… 8

3.3.      Forme……………………………………………………………………………………………. 9

4.      JavaScript…………………………………………………………………………………………. 10

5.      TypeScript…………………………………………………………………………………………. 10

6.      Spring programski okvir…………………………………………………………………… 11

6.1.      JavaBeans………………………………………………………………………………….. 12

6.2.      Dependency Injection………………………………………………………………… 12

6.3.      Spring container…………………………………………………………………………. 12

7.      Prakti?ni dio………………………………………………………………………………………. 14

7.4.      Baza podataka……………………………………………………………………………. 14

7.5.      Mapiranje objekata na tablice u bazi…………………………………………. 16

8.      ZAKLJU?AK…………………………………………………………………………………….. 18

9.      Literatura…………………………………………………………………………………………… 19

 

 

 

 

POPIS SLIKA

Slika 1. Angular logo. 7

Slika 2. TypeScript funkcionalnosti 10

Slika 3. Moduli Spring Frameworka. 11

Slika 4. Model baze podataka. 16

 

POPIS
PRIMJERA KODA

Kod 1. Kreiranje komponente. 7

Kod 2. Dodavanje kreirane komponente u Angular Modul 8

Kod 3. Kreiranje tablice COMPANIES.. 15

Kod 4. Primjer mapiranja POJO objekata. 17

 

POPIS KRATICA

DOM                        Document Object Mode

HTML          HyperText Markup Language

IPG              Internet
Payment Gateway

JS                JavaScript

PCI DSS     Payment Card Industry Data Security Standard

POJO          Plain Old Java Object

XML             EXtensible Markup Language

1.  Uvod

Cilj ovog seminarskog rada je pružanje
informacija o tehnologijama koje ?e se koristiti u implementaciji klijentskog i
serverskog dijela aplikacije. Nakon kratkog upoznavanja s CorvusPay uslugom,
opisani su osnovni gra?evni blokovi Angular programskog okvira koji ?e se
koristiti na klijentskoj strani aplikacije. Zatim ?emo se malo osvrnuti na
JavaScript i TypeScript koji se koriste za razvoj Angular aplikacija. Slijedi
pružanje informacija o Spring programskom okviru koji ?e se koristiti na
serverskoj strani aplikacije. U završnom dijelu aplikacije prikazan je
relacijski model baze podataka te mapiranje objekata iz aplikacije na retke u
tablicama.

 

 

 

2.   Što je CorvusPay?

CorvusPay je napredni sustav za procesiranje
karti?nih transakcija. Usluga postoji od 2012. godine,
a danas je jedno od najve?ih IPG rješenja u regiji. Svaka tre?a transakcija
koja se napravi preko hrvatskih WEB trgovina pro?e kroz ovaj sustav. Usluga je
namijenjena svim malim i velikim trgovcima koji svojim kupcima žele osigurati
pogodnost pla?anja platnim karticama. Mogu?e je ugovoriti jednokratno pla?anje,
obro?na pla?anja, pretplate ili pak pla?anje uz pohranu karti?nih podataka. Sustav
po?iva na inovativnoj i proširivoj infrastrukturi te je implementiran prema
najvišim sigurnosnim standardima, a usluga svake godine prolazi i PCI DSS Level
1 certifikaciju. PCI DSS standard je standard sigurnosti definiran od strane
Payment Card Industry Security Standard Council-a, a namijenjen je svim
procesorima karti?nih podataka.

3.  Angular

 1 2 Angular
je programski okvir (eng. framework)
koji je baziran na TypeScript (poglavlje 3.) programskom jeziku, a koristi se
na klijentskoj strani web aplikacija. Njegov prethodnik bio je AngularJS (?esto
nazivan i „Angular.js” ili „Angular.js 1.X”), a inicijalna verzija puštena je
20. listopada 2010. godine. AngularJS bio je baziran na JavaScript programskom
jeziku pa se zbog toga u imenu okvira nalazi sufiks „JS”. Kod razvoja AngularJS
okvira glavna ideja je bila olakšati posao Web dizajnerima koji ne znaju programirati.
Inicijalna verzija Angular programskog okvira puštena je 14. studenog 2014.
godine, a nastala je kompletnim redizajnom njegovog prethodnika od strane istog
razvojnog tima unutar Google-a. Iako je razvojni tim odlu?io da ?e se novi
programski okvir zvati „Angular 2″ brzo su odustali od tog imena jer je to
stvaralo zbrku me?u programerima. Nedugo nakon toga objavili su da ?e se naziv
„AngularJS” odnositi na verziju 1.X, a naziv „Angular”, bez sufiksa „JS” za
verziju 2 i više verzije.

3.1. Komponente

Komponenta se isti?e kao
najbitnije svojstvo Angulara. Sama Angular aplikacija gra?ena je od mnoštva HTML
oznaka koje me?usobno sura?uju. Koriste?i komponente u Angularu mogu?e je
prilago?avanje HTML-a tako da se kreiraju vlastite HTML oznake sa specifi?nim
izgledom i ponašanjem. Te oznake nazivaju se komponente.

@Component({

selector: ‘joke’,

template: `

What did the cheese say
when it looked in the mirror?

Halloumi (hello
me)

`

})

Kod 1. Kreiranje komponente

U primjeru „Kod 1″ prikazano je kreiranje prilago?ene HTML oznake. Nova
oznaka kreira se pomo?u @Component anotacije
koja kodu automatski dodaje neki predloženi kod (engl. boilerplate code). Anotacije se konfiguriraju tako što im se
proslje?uje objekt s raznim parametrima. U kodu iz primjera, @Component anotaciji dodani su „selector” i
„template” parametri. Parametar selektor govori Angularu da sve oznake mora zamijeniti s HTML kodom
koji se nalazi unutar template parametra. Ostala svojstva kod kreiranja
komponente su animations, changeDetection, encapsulation, entryComponents, exportAs, host, inputs, interpolation, moduleId, outputs, providers, queries, styleUrls, styles, templateurl i viewProviders.

@NgModule({

imports: BrowserModule,

declarations: JokeComponent,

bootstrap: JokeComponent

})

export class AppModule {

}

Kod 2. Dodavanje kreirane komponente u
Angular Modul

U Angular aplikaciji se kod iz primjera „Kod 1″ nalazi u paketima koji se
nazivaju Angular Moduli ili skra?eno NgModules. Kako bi komponente koje se
kreiraju bile iskoristive i unutar ostalih aplikacija moraju se navesti unutar
„declarations” polja unutar NgModula „Kod 2″.

 

3.2. Direktive

Direktive su instrukcije s kojima
se mijenja ponašanje, izgled ili struktura DOM-a. Postoje tri vrste direktiva,
a jedna od njih je opisana u prethodnom poglavlju. Komponente se od preostalih
direktiva razlikuju po tome što jedine imaju definiran predložak sadržaja koji
?e biti prikazan. Ostale dvije su:

·        
Strukturalne direktive – direktive koje služe za
dodavanje, micanje i manipulaciju HTML elemenata. Neke od naj?eš?e korištenih
su NgFor i NgIf direktive.

·        
Atributne direktive – Direktive koje mijenjaju
izgled HTML elemenata. Jedna od takvih direktiva je NgStyle koja služi za
dinami?ko dodavanje stilova ovisno o stanju komponente.

 

3.3. Forme

Kod rukovanja s formama Angular
okvir je puno fleksibilniji od AngularJS okvira. Ne oslanja se isklju?ivo na ngModel, ve?
nudi razine jednostavnosti  i mo?i,
ovisno o svrsi same forme.

Forme temeljene na predlošku (engl. Template-Driven Forms) – ve?ina
logike za tu formu stavlja se unutar predloška same forme. Najjednostavniji
pristup za izradu formi u Angularu je da se iskoriste postoje?e direktive. Za
takve jednostavne forme koristi se form direktiva, a za implementaciju je dovoljno dodati par
atributa. Ako je u formu potrebno smjestiti ugnijež?ena stabla podataka,
poželjno je koristiti ngModelGroup kako bi implementacija bila ?iš?a, a Angular ?e
se pobrinuti za pretvorbu podataka. Za validaciju forme koriste se HTML
atributi required,
pattern,
maxLength
i puno drugih.

Reaktivne forme/Forme temeljene
na modelu (engl. Reactive/Model-Driven
Forms) – Reaktivne forme kreiraju se kao zasebne komponente koriste?i @Component
anotaciju. Krajnji ishod ?e biti jednak, ali reaktivne forme daju puno ve?u
fleksibilnost te kontrolu nad validacijom podataka. Kako bi se koristio takav
na?in kreiranja forme, potrebno je uklju?iti ReactiveFormsModule. Nakon što je on
uklju?en, dostupne su direktive FormBuilder, FormGroup i FormControl pomo?u kojih ?e se
graditi komponenta za željenu formu.

 

4.      JavaScript

4 JavaScript kreiran je 1995. godine i
još uvijek je uspješan. Formalno je poznat kao EcmaScript, a njegova najnovija
verzija je je „ES6″ koja nudi veliki broj novih zna?ajki. ES6 još uvijek nije
dovoljno rasprostranjen u današnjim browserima pa se prevodi u ES5.  Neke od novih zna?ajki su klase, predlošci teksta,
naslje?ivanje, delegacije i podrška za module.

 

5.      TypeScript

5 U 2. poglavlju spomenuto je da
se za razvoj Angular aplikacija koristi TypeScript programski jezik. Razvijen
je od strane Microsofta 1. listopada 2012. godine. TypeScript je nad skup ES6
jezika što zna?i da su sve ES6 zna?ajke dio TypeScripta, ali sve zna?ajke
TypeScripta nisu dio ES6 jezika. Pošto je TypeScript nad skup JavaScripta, postoje?i
JavaScript programi su tako?er validni TypeScript programi. Jedna od primarnih
zna?ajki TypeScripta je mogu?nost tipiziranja podataka. Informacije o tipu
podataka omogu?uju da JavaScript programi budu predvidljiviji i lakši za
razumijevanje. Dizajniran je za razvoj velikih aplikacija i prevodi  se u JavaScript.

6.      Spring programski okvir

6,7 Spring je moderan framework za razvoj aplikacija u Javi.
Osnovna mu je namjena definiranje potrebne funkcionalnosti nadja?avanjem ve?
gotovih komponenata koje su sadržane unutar programskog okvira. Mogu?e ga je
integrirati s raznovrsnim tehnologijama, što omogu?uje pojednostavljenje
razvoja. Spring je open source framework
kojeg je osmislio Rod Johnson. Temeljen je na JavaBeansima. Pomo?u Spring
anotacija, programu je mogu?e jednostavno dodati mnoga svojstva. Jedna od
najbitnijih karakteristika Spring okvira je njegova modularnost, koja omogu?ava
da se prilikom projektiranja aplikacije ne koristi cjelokupni okvir, ve? samo
oni moduli koji su potrebni.

 (http://docs.spring.io/spring/docs/current/spring-framework-reference/html/overview.html)

6.1. JavaBeans

JavaBeansi definiraju komponente programskog jezika Java
koje se mogu ponovno iskorištavati. Implementiraju su?elje Serializable,
imaju konstruktor bez parametara, te omogu?uju pristup varijablama objekta  pomo?u „getter” i „setter” metoda. Drugi
naziv za JavaBeanse je POJOs (engl. Plain
Old Java Objects).

 

6.2. Dependency
Injection

Izraz je osmislio Martin Fowler. Drugi naziv je „Inversion of control”. Primjenom „Dependency Injectiona” kod postaje
zna?ajno jednostavniji, lakši za razumijevanje i testiranje. Svaka kompleksnija
aplikacija sastoji se od dvije ili više klasa koje me?usobno sura?uju kako bi
obavile neku poslovnu logiku. Tradicionalno, svaki objekt je odgovoran za
stjecanje vlastitih referenci. To može dovesti do vrlo kompliciranog koda,
kojeg ?e biti teško testirati (engl. hard
to test). S druge strane, korištenjem „Dependency
Injectiona” objektima su pridružene njihove ovisnosti u vrijeme kreiranja,
od neke tre?e strane koja koordinira svaki objekt u sustavu. Ne treba voditi
brigu o stvaranju ili pribavljanju ovisnosti, ve? se ovisnosti ubrizgavaju u
objekte koji ih trebaju. Spring podržava više na?ina za povezivanje komponenti,
ali uobi?ajeni je pristup preko XML-a. Tako i princip „Dependency Injectiona” podrazumijeva povezivanje dva objekta putem
XML konfiguracije, bez pisanja Java programskog koda.

6.3. Spring
container

U aplikacijama baziranim na Springu, objekti žive unutar
Spring kontejnera. Spring kontejner kreira, povezuje i konfigurira objekte
te  upravlja njihovim životnim ciklusom.
Spring kontejner je jezgra Spring frameworka.
On koristi „Dependency Injection” za upravljanje komponentama koje ?ine
aplikaciju. To uklju?uje stvaranje asocijacija izme?u komponenti koje sura?uju.
Objekti su tako „?iš?i”, lakši za razumijevanje, pogodni za ponovnu upotrebu i
lakše ih se testira. Spring dolazi s nekoliko implementacija kontejnera, koje
se mogu svrstati u sljede?e dvije skupine:

·        
Bean factories – definiran je od
strane org.springframework.beans.factory.BeanFactory
su?elja. To su najjednostavniji kontejneri koji pružaju osnovnu podršku
za „Dependency Injection”.

·        
Application contexts – definiran je
od strane org.springframework.context.ApplicationContext
su?elja. Gra?en je na ideji bean factorya
pružaju?i aplikacijskom okviru usluge, kao što je sposobnost u?itavanja
datote?nih resursa na generi?ki na?in, sposobnost objavljivanja doga?aja
registriranim korisnicima te podržava internacionalizaciju.

 

7.      Prakti?ni dio

7.4. Baza
podataka

Za ovu web aplikaciju koristi se Oracle baza podataka.
Konfigurirana je unutar „application.yml” konfiguracijske datoteke. Arhitektura baze
podataka ra?ena je za potrebe razvoja frontend
dijela CorvusPay produkta. Sastoji se od X tablica, a neke od njih koje ?e se
koristiti za razvoj aplikacije su:

·        
CARD_TYPES – tablica s konfiguriranim platnim
karticama. U njoj se me?u ostalim definira koja banka ?e provjeriti identitet
kupca kod procesuiranja transakcije.

·        
COMPANIES – tablica u kojoj se nalazi popis tvrtki.

·        
ORDERS –  tablica u kojoj se zapisuje posljednji status
svake transakcije.

·        
ORDER_VERSIONS – tablica koja sadrži sve
prethodne verzije transakcija iz ORDER tablice.

·        
SECURE_MESSAGES – tablica koja sadrži zapise o
uspješnosti provjere identiteta vlasnika kartice.

·        
STORES – tablica u kojoj se nalazi konfiguracija
prodajnih mjesta.

 

Primjer koda u nastavku prikazuje kreiranje
tablice u bazi:

CREATE TABLE “TEST”.”COMPANIES”

   (  “ID” NUMBER(38,0) NOT NULL ENABLE,

      “NAME” VARCHAR2(40
CHAR) NOT NULL ENABLE,

      “ADDRESS”
VARCHAR2(40 CHAR) NOT NULL ENABLE,

      “ZIP” VARCHAR2(40
CHAR) NOT NULL ENABLE,

      “CITY” VARCHAR2(40
CHAR) NOT NULL ENABLE,

      “COUNTRY”
VARCHAR2(40 CHAR) NOT NULL ENABLE,

      “PHONE” VARCHAR2(40
CHAR) NOT NULL ENABLE,

      “MOBILE” VARCHAR2(40
CHAR) NOT NULL ENABLE,

      “EMAIL” VARCHAR2(40
CHAR) NOT NULL ENABLE,

      “URL” VARCHAR2(40
CHAR),

      “FIRST_NAME”
VARCHAR2(40 CHAR) NOT NULL ENABLE,

      “LAST_NAME”
VARCHAR2(40 CHAR) NOT NULL ENABLE,

      “MB” VARCHAR2(40
CHAR) NOT NULL ENABLE,

      “ADDRESS_BILL”
VARCHAR2(40 CHAR),

      “ZIP_BILL”
VARCHAR2(40 CHAR),

      “CITY_BILL”
VARCHAR2(40 CHAR),

      “COUNTRY_BILL”
VARCHAR2(40 CHAR),

      “SYSTAN”
NUMBER(38,0) DEFAULT 110,

      “CREATED_AT”
TIMESTAMP (6),

      “UPDATED_AT”
TIMESTAMP (6),

       PRIMARY KEY (“ID”)

);

Kod 3. Kreiranje tablice COMPANIES

 

Na slici (Slika 4) prikazan je model tablica iz
CorvusPay baze koje ?e se koristiti u aplikaciji. Pošto ve?ina tablica ima jako
velik broj kolona u modelu su prikazane samo neke, a naglasak je stavljen na
relacije me?u tablicama. Veze me?u tablicama prikazuju koje su tablice
me?usobno povezane. Spajanje tablica vrši se preko sekundarnog klju?a na
primarni klju?. Tipovi veza me?u tablicama mogu biti:

·        
1:1 – jedan redak iz prve tablice vezan je na
samo jedan redak iz druge tablice.

·        
1:N – jedan redak iz prve tablice vezan je na
više redaka iz druge tablice.

·        
N:1 – više redaka iz prve tablice vezano je na
jedan redak u drugoj tablici.

·        
N:N – više redaka iz prve tablice vezano je na
više redaka iz druge tablice.

Tipovi veza me?u
tablicama koji se koriste u aplikaciji su N:1 i 1:N.

Slika 4. Model baze podataka

7.5. Mapiranje
objekata na tablice u bazi

Za mapiranje POJO objekata na
retke u tablici koristi se  Hibernate
implementacija JPA specifikacije. Primjer mapiranja POJO objekata na retke u
tablici dan je na Order klasi (Kod 4)

@Entity

@Table(name=”orders”)

public class Order {

    @Id

    @GeneratedValue(strategy =
GenerationType.SEQUENCE, generator = “sequenceGenerator”)

    @SequenceGenerator(name =
“sequenceGenerator”)

    private Long id;

 

    @ManyToOne

   
@JoinColumn(name=”store_id”)

    private Store store;

 

    @ManyToOne

    @JoinColumn(name =
“company_id”)

    private Company company;

 

    @NotNull

    @Column(name = “transaction_amount”)

    private Long transactionAmount;

 

    @NotNull

    @Column(name =
“response_code”)

    private Long responseCode;

 

    @NotNull

    @Column(name =
“require_complete”)

    private Boolean
requireComplete;

 

    @NotNull

    @Column

    private Boolean subscription;

 

    …

 

    // Setter and Getter methods

Kod 4. Primjer mapiranja POJO objekata

Mapirane na retke u tablici vrši
se pomo?u anotacija. Niže su ukratko objašnjene anotacije iz primjera (Kod 4).

·        
@Entity
– deklarira klasu kao entitet

·        
@Table
– definira se ime tablice u bazi na koju ?e se mapirati objekti te klase

·        
@Id
– deklarira primarni klju? entiteta

·        
@GeneratedValue
– automatsko generiranje primarnog klju?a

·        
@SequenceGenerator
– generiranje primarnog klju?a preko sekvenci

·        
@ManyToOne  – Objekt klase „Order” povezan je samo
s jednim objektom „Store” i „Company” klase

8.      ZAKLJU?AK

Ideja ovog
seminarskog rada bila je opisati tehnologije koje ?e se koristiti u razvoju
serverskog i klijentskog dijela aplikacije za prikaz statistika. Implementirano
je mapiranje POJO objekata na tablice u bazi kao podloga za daljnji razvoj
aplikacije. Ovaj seminarski rad olakšat ?e pisanje aplikacije jer donosi
osnovnu teorijsku podlogu, a neke od funkcionalnosti koje ?e biti podržane  u aplikaciji su:

·        
Broj i postotak uspješnih/neuspješnih
transakcija po svim tipovima transakcija na razini tvrtke i po prodajnim
mjestima

·        
Top trgovci

·        
Ukupni promet prema bankama prihvatiteljima po
brandovima platnih kartica

·        
Ugovorene vrste usluga po tvrtkama i prodajnim
mjestima

·        
Prosje?na mjese?na obra?unata naknada po
tvrtkama

 

9.      Literatura

1)   
Asim Hussain, ANGULAR From Theory To Practice, Version
1.2.0, 2017-11-24

2)   
Angular 5 complete guide, https://www.udemy.com/the-complete-guide-to-angular-2,
01.12.2017.

3)   
Angular – službena dokumentacija, https://angular.io/, 03.12.2017.

4)   
JavaScript skriptni jezik, https://en.wikipedia.org/wiki/JavaScript,
04.12.2017.

5)   
TypeScript, https://en.wikipedia.org/wiki/TypeScript,
04.12.2017.

6)   
Spring – video predavanja, https://javabrains.io/courses/spring_core/,
05.12.2017.

7)   
Spring Framework – službena dokumentacija, https://docs.spring.io/spring/docs/4.3.6.RELEASE/spring-framework-reference/htmlsingle/,
07.12.2017.