Na tomto míst bude ociální zadání va²í práce

Na tomto míst¥ bude ociální zadání va²í práce •

Toto zadání je podepsané d¥kanem a vedoucím katedry,

•

musíte si ho vyzvednout na studiijním odd¥lení Katedry po£íta£· na Karlov¥ nám¥stí,

•

v jedné odevzdané práci bude originál tohoto zadání (originál z·stává po obhajob¥ na kated°e),

•

ve druhé bude na stejném míst¥ neov¥°ená kopie tohoto dokumentu (tato se vám vrátí po obhajob¥).

i

ii

ƒeské vysoké u£ení technické v Praze Fakulta elektrotechnická Katedra po£íta£·

Bakalá°ská práce

E-chef server a webový klient Josef Linha

Vedoucí práce:

Ing. Tomá² Kadlec

Studijní program: Softwarové technologie a management, Bakalá°ský

Obor: Web a multimedia

20. prosince 2010

iv

v

Pod¥kování Na tomto míst¥ bych rád pod¥koval v²em, kte°í mne podporovali p°i psaní této práce. P°edev²ím bych cht¥l pod¥kovat vedoucímu bakalá°ské práce Ing. Tomá²i Kadlecovi za jeho rady a p°ipomínky. Dále d¥kuji za zda°ilou spolupráci Ladislavu Zárubovi (dále jen kolegovi) na spole£né £ásti této práce. Pod¥kování také pat°í mým rodi£·m, kte°í mne po dobu studia podporovali.

vi

vii

Prohlá²ení Prohla²uji, ºe jsem práci vypracoval samostatn¥ a pouºil jsem pouze podklady uvedené v p°iloºeném seznamu. Nemám závaºný d·vod proti uºití tohoto ²kolního díla ve smyslu Ÿ60 Zákona £. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o zm¥n¥ n¥kterých zákon· (autorský zákon).

V Praze dne 20. 12. 2010

.............................................................

viii

Abstract This bachelor thesis undertakes analysis and subsequent implementation of an electronic cookbook

E-chef

written in Java programming language as a client-server web application.

The cookbook allows users an easy way to organize recipes by assigning them to various categories and by assigning ingredients to recipes. These associations make it easy to search by selected criteria. The application oers other features for logged on users. The result of this thesis is common server and web client, which is accessible to all internet users. The work also includes installation guide and user manual for created web application.

Abstrakt Tato bakalá°ská práce se zabývá analýzou a následnou implementací elektronické kucha°ky

E-chef

v jazyce Java, webové aplikace typu klient-server. Tato kucha°ka má uºivatel·m

umoºnit snadnou organizaci recept· p°i°azením do r·zných kategorií a p°i°azením ingrediencí k recept·m. Díky správnému za°azení a volb¥ ingrediencí umoº¬uje snadné vyhledávání podle vybraných kritérií. Aplikace nabízí dal²í zajímavé moºnosti pro p°ihlá²ené uºivatele. Výsledkem této práce je spole£ný server a p°edev²ím webový klient, který je p°ístupný v²em uºivatel·m internetu. Sou£ástí práce je také instala£ní p°íru£ka a uºivatelský manuál pro vytvo°enou webovou aplikaci.

ix

x

Obsah 1 Úvod

1

2 Specikace cíle, katalog poºadavk·

3

2.1

Cíl projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.2

Cílová skupina

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.3

Poºadavky na systém . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.3.1

Funk£ní poºadavky . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

2.3.2

Nefunk£ní poºadavky . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

3 Analýza a návrh °e²ení 3.1

3.2

3.3

7

Výb¥r technologií . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

3.1.1

Programovací jazyk . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

3.1.2

Úloºi²t¥ dat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

3.1.3

Webové prohlíºe£e

7

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Uºivatelské role . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

3.2.1

8

Akté°i systému

P°ípady uºití 3.3.1

3.3.2

3.3.3

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Náv²t¥vník

9

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

3.3.1.1

P°ihlásit se . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

3.3.1.2

Vybrat recepty . . . . . . . . . . . . . . . . . . . . . . . . . .

11

3.3.1.3

Otev°ít recept

. . . . . . . . . . . . . . . . . . . . . . . . . .

11

3.3.1.4

Zav°ít recept . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

3.3.1.5

Zobrazit pro tisk . . . . . . . . . . . . . . . . . . . . . . . . .

11

Uºivatel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

3.3.2.1

Odhlásit se . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

3.3.2.2

P°idat recept . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

3.3.2.3

Upravit recept

13

3.3.2.4

. . . . . . . . . . . . . . . . . . . . . . . . . .

Komentovat recept . . . . . . . . . . . . . . . . . . . . . . . .

13

Administrátor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14

3.3.3.1

Spravovat uºivatele

. . . . . . . . . . . . . . . . . . . . . . .

14

3.3.3.2

Spravovat recepty

. . . . . . . . . . . . . . . . . . . . . . . .

15

3.3.3.3

Spravovat kategorie

3.3.3.4

Spravovat ingredience

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3.4

Gracké uºivatelské rozhraní webové aplikace

3.5

Fyzický datový model

15 15

. . . . . . . . . . . . . . . . . .

15

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

18

xi

xii

OBSAH

3.6

Diagram nasazení . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4 Realizace 4.1

21

Pouºité technologie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

21

4.1.2

Hibernate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22

4.1.3

Java RMI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22

4.1.4

Spring framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22

4.1.5

Google Web Toolkit

23

4.1.6

SmartGWT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

4.1.7

AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

Dal²í knihovny

23

. . . . . . . . . . . . . . . . . . . . . .

24

4.1.8.2

FlexJSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

24

4.1.8.3

Commons FileUpload

. . . . . . . . . . . . . . . . . . . . . .

24

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

24

4.3

Implementace serveru

4.3.2

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

MySQL JDBC Driver

Struktura aplikace 4.3.1

. . . . . . . . . . . . . . . . . . . . . . . . . . . .

4.1.8.1

4.2

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Databáze a rámec Hibernate

25

. . . . . . . . . . . . . . . . . . . . . . .

25

4.3.1.1

Kongurace . . . . . . . . . . . . . . . . . . . . . . . . . . . .

25

4.3.1.2

Entity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

26

4.3.1.3

Lazy loading

27

4.3.1.4

Eager loading . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

4.3.1.5

Batch loading . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

. . . . . . . . . . . . . . . . . . . . . . . . . . .

Java RMI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

28

4.3.2.1

Distribuce bean jako sluºeb . . . . . . . . . . . . . . . . . . .

28

Implementace klienta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

29

4.4.1

Stránka základem aplikace . . . . . . . . . . . . . . . . . . . . . . . . .

29

4.4.2

Denice GWT modulu . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

4.4.3

Entry Point . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

31

4.4.4

Tvorba grackého uºivatelského rozhraní . . . . . . . . . . . . . . . . .

31

4.4.5

Komunikace klienta se serverem . . . . . . . . . . . . . . . . . . . . . .

32

4.4.5.1

GWT RPC - vzdálené volání procedur . . . . . . . . . . . . .

33

4.4.5.2

Vyuºití controlleru . . . . . . . . . . . . . . . . . . . . . . . .

35

4.4.6

P°ihla²ování uºivatel· v GWT

4.4.7

Internacionalizace (I18N)

. . . . . . . . . . . . . . . . . . . . . .

36

. . . . . . . . . . . . . . . . . . . . . . . . .

36

5 Testování 5.1

21

4.1.1

4.1.8

4.4

20

39

Testování z pohledu náv²t¥vníka

. . . . . . . . . . . . . . . . . . . . . . . . .

39

5.1.1

Spu²t¥ní aplikace E-chef . . . . . . . . . . . . . . . . . . . . . . . . . .

39

5.1.2

Zm¥na jazyka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

39

5.1.3

P°ihlá²ení do systému

39

5.1.4

Registrace nového uºivatele

5.1.5

Vyhledávání recept·

5.1.6

Vybírání recept·

5.1.7

Zvolení kategorie nebo ingredience

5.1.8

Otev°ení receptu

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

40

. . . . . . . . . . . . . . . . . . . . . . . . . . . .

40

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

40

. . . . . . . . . . . . . . . . . . . .

40

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

40

xiii

OBSAH

5.1.9

5.2

5.3

Zobrazení komentá°· otev°eného receptu . . . . . . . . . . . . . . . . .

41

5.1.10 Zobrazení receptu pro tisk . . . . . . . . . . . . . . . . . . . . . . . . .

41

5.1.11 Zav°ení receptu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

41

Testování z pohledu uºivatele

. . . . . . . . . . . . . . . . . . . . . . . . . . .

41

5.2.1

P°idání nového receptu . . . . . . . . . . . . . . . . . . . . . . . . . . .

41

5.2.2

Zobrazení svých a oblíbených recept·

. . . . . . . . . . . . . . . . . .

42

5.2.3

Úprava prolu uºivatele

. . . . . . . . . . . . . . . . . . . . . . . . . .

42

5.2.4

Práce s otev°eným receptem . . . . . . . . . . . . . . . . . . . . . . . .

42

Testování z pohledu administrátora . . . . . . . . . . . . . . . . . . . . . . . .

42

5.3.1

Správa uºivatel·

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

42

5.3.2

Správa recept·

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

43

5.3.3

Správa kategorií . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

43

5.3.4

Správa ingrediencí

43

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6 Záv¥r

45

A Seznam pouºitých zkratek

49

B Instala£ní a uºivatelská p°íru£ka

51

B.1

Instala£ní p°íru£ka

B.2

Uºivatelská p°íru£ka

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

51

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

52

C Obsah p°iloºeného CD

55

xiv

OBSAH

Seznam obrázk· 2.1

Seznam funk£ních a nefunk£ních poºadavk· systému

3.1

Znázorn¥ní d¥di£nosti jednotlivých aktér·

3.2

Seznam p°ípad· uºití . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9

3.3

Diagram p°ípad· uºití pro náv²t¥vníka . . . . . . . . . . . . . . . . . . . . . .

10

3.4

Diagram p°ípad· uºití pro uºivatele . . . . . . . . . . . . . . . . . . . . . . . .

12

3.5

Diagram p°ípad· uºití pro administrátora

. . . . . . . . . . . . . . . . . . . .

14

3.6

Wireframe webové aplikace

. . . . . . . . . . . . . . . . . . . . . . . . . . . .

16

3.7

Diagram fyzického datového modelu

. . . . . . . . . . . . . . . . . . . . . . .

18

3.8

Diagram nasazení . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

20

4.1

Stromová struktura aplikace (z vývojového prost°edí NetBeans) . . . . . . . .

25

4.2

Ukázka aplikace E-chef s otev°eným receptem

32

4.3

Schéma vzdáleného volání procedur v GWT [19]

B.1

Ukázka aplikace E-chef s otev°eným receptem

xv

. . . . . . . . . . . . . .

4

. . . . . . . . . . . . . . . . . . . .

8

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

33

. . . . . . . . . . . . . . . . . .

52

xvi

SEZNAM OBRÁZK—

Seznam tabulek 4.1

Rozdíl mezi klasickým a asynchronním rozhraním . . . . . . . . . . . . . . . .

xvii

34

xviii

SEZNAM TABULEK

Kapitola 1

Úvod Fenoménem sou£asné doby je jednozna£n¥ internet, který v¥t²ina znás vyuºívá denn¥ jako hlavní zdroj informací. B¥hem n¥kolika vte°in na internetu najdeme práv¥ to, co hledáme a u²et°íme tak spoustu £asu, který bychom museli vynaloºit nap°íklad p°i procházení obsahu knihy. Z tohoto d·vodu jsou data p°episována do elektronické podoby, coº nám umoº¬uje snaº²í a zárove¬ rychlej²í zp·sob vyhledávání informací. Práv¥ proto jsme byli s kolegou motivováni vytvo°it aplikaci elektronické kucha°ky, která si dává za cíl pomoci ostatním kuchtík·m s organizací jejich recept·. Má práce je webová aplikace, která bude dostupná v²em uºivatel·m internetu a kolega si dává za úkol p°esv¥d£it uºivatele desktopovou aplikací. V²ichni to dob°e známe, recepty psané v rychlosti na kousek papíru se £asem stávají £ím dál tím více ne£itelné nebo se jednodu²e poztrácí. A to je úkolem této kucha°ky, která umoºní organizaci jednotlivých recept· pomocí kategorií a ingrediencí v nich obsaºených. Výhodou takové organizace je, ºe recept bude vºdy dostupný na stejném míst¥ a zárove¬ se zviditelní ostatním náv²t¥vník·m. Uº nebude t°eba opisovat nebo kopírovat kaºdý recept, o který si známí poºádají, posta£í jeden jediný odkaz. Tato elektronická kucaha°ka práv¥ díky kategoriím a ingrediencím vyhledá p°esn¥ takové recepty, které si budou uºivatelé p°át. Dále jim umoºní spoustu dal²ích moºností, jak s recepty nakládat. Je moºné je dopl¬ovat, ptát se a nebo nap°íklad chválit prost°ednictvím komentá°·, p°idávat do seznamu oblíbených a nebo je hodnotit. Náv²t¥vník tak získává moºnost prohlíºet recepty v r·zných kategoriích, zobrazit nejlépe hodnocené nebo práv¥ p°idané recepty a ohromit tak ostatní svým pravým kucha°ským um¥ním. A to v²e díky této elektronické kucha°ce

1

E-chef.

2

KAPITOLA 1.

ÚVOD

Kapitola 2

Specikace cíle, katalog poºadavk· 2.1 Cíl projektu Cílem této bakalá°ské práce je vytvo°it snadno pouºitelnou elektronickou kucha°ku v podob¥ webové aplikace typu klient-server, která umoºní uºivatel·m organizaci recept·, snadné vyhledávání v nich a sdílení s dal²ími náv²t¥vníky. Výsledkem bude systém pod správou administrátora, který by m¥l být dostupný kaºdému uºivateli internetu. Nedílnou sou£ástí celé aplikace je také desktopový klient, jehoº autorem je kolega, se kterým jsme spolupracovali na spole£né serverové £ásti. Kone£ný uºivatel má tak moºnost otev°ít si aplikaci kdykoli a kdekoli z internetu a nebo z po£íta£e, kde bude nainstalována desktopová aplikace.

2.2 Cílová skupina Cílovou skupinou navrhovaného systému budou lidé, kte°í se cht¥jí inspirovat ve va°ení nebo se naopak pod¥lit se svými recepty ostatním. Jejich v¥k není nijak omezen a proto je d·leºité zam¥°it se p°edev²ím na nezku²ené uºivatele a celý systém navrhnout tak, aby byl co nejjednodu²²í a uºivatel se zorientoval v aplikaci hned po jejím spu²t¥ní.

2.3 Poºadavky na systém V této sekci se zam¥°ím na funk£ní i nefunk£ní poºadavky, které jsou na systém kladeny.

3

4

KAPITOLA 2.

SPECIFIKACE CÍLE, KATALOG POšADAVK—

Funkční požadavky

Nefunkční požadavky

+ Kategorie dvou typů

+ Databáze MySQL

+ Recept ve více kategoriích

+ Moderní webový prohlížeč

+ Registrace uživatelů

+ Server s podporou Javy

+ Snadné vyhledávání

+ Servlet kontejner TomCat 5+

+ Správa ingrediencí + Správa kategorií + Správa receptů + Správa uživatelů + Více otevřených receptů najednou + Výběr receptů

Obrázek 2.1: Seznam funk£ních a nefunk£ních poºadavk· systému

2.3.1 Funk£ní poºadavky •

Kategorie dvou typ· V aplikaci rozli²ujeme dva typy kategorií, do kterých m·ºeme zano°ovat libovolné mnoºství dal²ích podkategorií. Prvním typem jsou klasické kategorie, jejichº £len¥ní záleºí na administrátorovi systému. Tím druhým jsou ingredience, které si vytvá°í sami uºivatelé b¥hem vkládání nového nebo úpravy jiº existujícího receptu. Ingredience, které se vytvo°í b¥hem vloºení receptu do systému nazveme osamocené, ty pak musí administrátor za°adit do správných skupin ingrediencí.

•

Výb¥r recept· Vhodným výb¥°em kategorií a ingrediencí se zobrazí odpovídající recepty. Zobrazit v²echny recepty pouze z dané kategorie je také moºné pouhým kliknutím na vybranou kategorii nebo ingredienci.

•

Recept ve více kategoriích Kaºdý recept m·ºe být obsaºen ve více kategoriích najednou. Tato moºnost bude jak p°i vytvá°ení receptu, tak i p°i jeho editování.

•

Registrace uºivatel· Kaºdý náv²t¥vník aplikace se m·ºe zaregistrovat (pokud jiº není registrován). E-mailová adresa v systému je unikátní.

•

Snadné vyhledávání Vyhledávání receptu podle zadaného klí£ového slova.

•

Správa kategorií Administrátor systému m·ºe spravovat kategorie. Správou se rozumí jejich vytvá°ení, editace a p°ípadné odstran¥ní.

2.3.

•

POšADAVKY NA SYSTÉM

5

Správa recept· Administrátor systému m·ºe spravovat recepty. Správou se rozumí jejich vytvá°ení, editace a p°ípadné odstran¥ní.

•

Správa uºivatel· Administrátor systému m·ºe spravovat uºivatele. Správou se rozumí jejich vytvá°ení, editace a p°ípadné odstran¥ní.

2.3.2 Nefunk£ní poºadavky •

Servlet kontejner Apache TomCat 5+ Protoºe aplikace bude implementována v jazyku Java, je nutné ji spustit v n¥kterém aplika£ním serveru nebo servletovém kontejneru. Po dohod¥ s vedoucím práce jsme zvolili práv¥ Apache TomCat, který není tak náro£ný na pam¥´, jako nap°íklad aplika£ní server GlassFish.

•

Databáze MySQL Jako úloºi²t¥ pro data byla zvolena nejpouºívan¥j²í databáze MySQL, která nám pln¥ posta£uje.

•

Moderní webové prohlíºe£e Aplikace webového klienta by m¥la být pouºitelná na dne²ních moderních prohlíºe£ích.

•

Server s podporou Javy Serverem se rozumí po£íta£, na kterém bude aplikace nahrána do aplika£ního serveru a odkud bude dostupná z internetu jejím náv²t¥vník·m.

6

KAPITOLA 2.

SPECIFIKACE CÍLE, KATALOG POšADAVK—

Kapitola 3

Analýza a návrh °e²ení P°ed samotnou implementací systému je d·leºité nejprve provést jeho analýzu. Protoºe se jedná o aplikaci typu klient-server, je pot°eba zvolit vhodné technologie k jejímu vytvo°ení. Abychom umoºnili pouºívání aplikace v²em uºivatel·m, je pot°eba zvolit multiplatformní programovací jazyk.

3.1 Výb¥r technologií 3.1.1 Programovací jazyk V sou£asné dob¥ se nabízí platformy Java a .NET a jiné, se kterými ale nemám p°íli² zku²eností. Díky své jednoduché syntaxi, velmi kvalitnímu vývojovému prost°edí NetBeans a také na²im znalostem získaných po dobu studia jsme zvolili práv¥ jazyk Java. Technologie Java RMI nám usnadní vývoj aplikace typu klient-server.

3.1.2 Úloºi²t¥ dat Pro uloºení dat systému jsme zvolili rela£ní databázi MySQL, která pro tento systém pln¥ dosta£uje. Díky úloºi²ti InnoDB máme zaru£enou referen£ní integritu mezi tabulkami.

3.1.3 Webové prohlíºe£e Aby byla aplikace p°izp·sobená opravdu co nejvíce uºivatel·m, je t°eba vzít v potaz i webové

Mozilla Firefox 3.6+, Internet Explorer 7+, Chrome, Safari 4 a Opera 10. Za°a¤me aplikaci do skupiny web· tzv. Web 2.0. Takto ozna£ené weby nemají sice ºádnou

prohlíºe£e. V sou£asné dob¥ mezi moderní prohlíºe£e °adíme

1

striktní denici, nicmén¥ jejich síla je také ve vyuºití technologie AJAX a proto je nutná podpora JavaScriptu ve webovém prohlíºe£i. V p°ípad¥, ºe by n¥kdo z náv²t¥vník· m¥l JavaScript vypnutý, upozorníme ho chybovým hlá²ením. 1

http://www.w3schools.com/>

Vý£et je vypsán podle aktuálních m¥sí£ních statistik W3Schools - <

7

8

KAPITOLA 3.

ANALÝZA A NÁVRH E’ENÍ

3.2 Uºivatelské role Dále je pot°eba zamyslet se nad tím, jaké uºivatelské role budou v systému zastoupeny a jaké budou jejich moºnosti. Stanovili jsme t°i uºivatelské role a po£ítali jsme také s p°ípadným roz²í°ením do budoucna, proto jsme navrhli fyzický datový model tak, ºe je moºné dal²í uºivatelské role p°idat. P°estoºe v aplikaci rozli²ujeme role t°i, v databázi budou jen dv¥ administrátor a uºivatel. Náv²t¥vníka není t°eba rozli²ovat na úrovni databáze, sta£í nám v aplikaci v¥d¥t, ºe uºivatel je nep°ihlá²ený.

3.2.1 Akté°i systému V projektu jsou následující akté°i, nebo-li uºivatelé, kte°í budou systém vyuºívat. ’ipka znázor¬ující d¥di£nost °íká, ºe uºivatelem s nejv¥t²ím oprávn¥ním je administrátor, který d¥dí v²echny vlastnosti ostatních uºivatel·.

Diagram:Aktéři

Author:Pepa L

•

Náv²t¥vník - nep°ihlá²ený uºivatel

•

Uºivatel - p°ihlá²ený uºivatel

•

Administrátor - administrátor systému

Návštěvník

Nepřihlášený uživatel (návštěvník) systému

Uživatel

Přihlášený uživatel v systému

Administrátor

Spravuje systém pomocí jednoduché administrace

Obrázek 3.1: Znázorn¥ní d¥di£nosti jednotlivých aktér·

3.3.

9

PÍPADY UšITÍ

3.3 P°ípady uºití

Diagram p°ípad· uºití popisuje systém z pohledu jednotlivých aktér·. P°itom kaºdý p°ípad uºití popisuje posloupnost událostí, kterou spou²tí aktér.

Návštěvník

Uživatel

Administrátor

+ Otevřít recept

+ Komentovat recept

+ Spravovat ingredience

+ Přihlásit se

+ Odebrat recept z oblíbených

+ Spravovat kategorie

+ Registrovat se

+ Odhlásit se

+ Spravovat recepty

+ Vybrat recepty

+ Odstranit recept

+ Spravovat uživatele

+ Vyhledat recepty

+ Ohodnotit recept

+ Zařadit osamocené ingredience

+ Zavřít recept

+ Přidat recept

+ Zobrazit komentáře

+ Přidat/odebrat ingredienci

+ Zobrazit pro tisk

+ Upravit profil

+ Zvolit jazyk

+ Upravit recept

+ Zvolit kategorii / ingredienci

+ Vložit recept do oblíbených + Zobrazit oblíbené recepty + Zobrazit své recepty

Obrázek 3.2: Seznam p°ípad· uºití

Dále budou popsány jednotlivé diagramy uºití pro jednotlivé aktéry systému.

10

KAPITOLA 3.

ANALÝZA A NÁVRH E’ENÍ

3.3.1 Náv²t¥vník

Zvolit jazyk Přihlásit se

Registrovat se

Vyhledat recepty

Návštěvník (from Aktéři)

Vybrat recepty

Zvolit kategorii / ingredienci

Zobrazit komentáře «extend» Otevřít recept

Zavřít recept

«extend»

Zobrazit pro tisk

Obrázek 3.3: Diagram p°ípad· uºití pro náv²t¥vníka

Popis vybraných p°ípad· uºití tohoto aktéra:

3.3.1.1 P°ihlásit se •

Vstupní podmínky šádné.

•

Hlavní scéná° Po kliknutí na tla£ítko pro p°ihlá²ení bude náv²t¥vník vyzván k zadání p°ihla²ovacích údaj·. Po potvrzení dojde ke kontrole t¥chto údaj· a dojde k p°ihlá²ení uºivatele. V p°ípad¥ chybných údaj· bude náv²t¥vník upozorn¥n chybovou hlá²kou.

3.3.

PÍPADY UšITÍ

11

3.3.1.2 Vybrat recepty •

Vstupní podmínky V aplikaci se nachází kategorie a ingredience ozna£ené ²ipkou, podle kterých je moºné recepty vybírat.

•

Hlavní scéná° Náv²t¥vník ze stromu kategorií a ingrediencí p°esune ty vybrané, které jsou ozna£eny ²ipkou, do seznamu výb¥ru. Po kliknutí na tla£ítko pro výb¥r recept· dojde k zobrazení recept·, které vyhovují výb¥ru.

3.3.1.3 Otev°ít recept •

Vstupní podmínky Zobrazené recepty.

•

Hlavní scéná° Kliknutím na vybraný recept dojde k jeho otev°ení ve spodní £ásti aplikace, odkud je moºné s receptem provád¥t dal²í akce.

3.3.1.4 Zav°ít recept •

Vstupní podmínky Mít otev°eno n¥kolik recept·.

•

Hlavní scéná° Recepty je moºné zavírat kliknutím na k°íºek v jednotlivých záloºkách s otev°enými recepty.

3.3.1.5 Zobrazit pro tisk •

Vstupní podmínky Mít otev°ený vybraný recept.

•

Hlavní scéná° Kliknutím na tla£ítko pro zobrazení k tisku dojde k otev°ení nového okna, které je lépe navrºeno pro tisk, který se provede aº novým kliknutím na tla£ítko v tomto okn¥. Tla£ítka na stránce nebudou vytisknuta.

12

KAPITOLA 3.

ANALÝZA A NÁVRH E’ENÍ

3.3.2 Uºivatel

Odebráním ingredience se rozumí odebrání jen od receptu, nikoli z celěho systému.

Přidat recept

Zobrazit své recepty

«extend» Zobrazit oblíbené recepty

Odebrat recept z oblíbených

«include»

Přidat/odebrat ingredienci Upravit profil Uživatel (from Aktéři) Odhlásit se Vložit recept do oblíbených

Komentovat recept

«extend» Ohodnotit recept

«extend»

«extend» Otevřít recept «extend» (from Návštěvník)

Zobrazit komentáře

«extend» (from Návštěvník)

«extend»

Odstranit recept

Upravit recept

Uživatel smí upravit případně odstranit pouze svůj vlastní recept.

Obrázek 3.4: Diagram p°ípad· uºití pro uºivatele

Popis vybraných p°ípad· uºití tohoto aktéra:

«include»

3.3.

PÍPADY UšITÍ

13

3.3.2.1 Odhlásit se •

Vstupní podmínky Uºivatel je p°ihlá²en v systému.

•

Hlavní scéná° Kliknutím na tla£ítko pro odhlá²ení dojde k odhlá²ení uºivatele. V tuto dobu jiº nebude moci upravovat vlastní recepty, a to ani v p°ípad¥, ºe tla£ítko pro úpravu bude stále zobrazené. Akce od uºivatele jsou kontrolovány a v p°ípad¥ spu²t¥ní akce jen pro p°ihlá²ené uºivatele jiº nep°ihlá²eným uºivatelem dojde k zobrazení chybové zprávy.

3.3.2.2 P°idat recept •

Vstupní podmínky šádné.

•

Hlavní scéná° Uºivatel smí p°idávat nové recepty do systému. Po kliknutí na tla£ítko pro p°idání nového receptu se otev°e okno, kde uºivatel vyplní poloºky jako je název receptu, popis, doba p°ípravy, atd. Uºivatel p°i vytvá°ení receptu p°idává do systému nové ingredience. K receptu v²ak m·ºe a také by m¥l p°idat takové ingredience, které jiº v systému existují a ukazují se v nabídce b¥hem psaní názvu té konkrétní p°ísady. Dále vybere kategorie, do kterých recept spadá a potvrdí tla£ítkem pro vytvo°ení receptu. Bude upozorn¥n výsledným stavem v podob¥ zobrazené zprávy.

3.3.2.3 Upravit recept •

Vstupní podmínky Mít otev°ený sv·j vlastní recept.

•

Hlavní scéná° Uºivatel má moºnost upravovat pouze ty recepty, které do systému vloºil sám. V takovém p°ípad¥ je mu povolena moºnost úpravy receptu, kde m·ºe jednotlivé poloºky opravit nebo doplnit. P°ed uloºením zm¥ny receptu dochází ke kontrole, zda jsou v²echna povinná pole vypln¥na.

3.3.2.4 Komentovat recept •

Vstupní podmínky Mít otev°ený recept.

14

KAPITOLA 3.

•

ANALÝZA A NÁVRH E’ENÍ

Hlavní scéná° Zobrazením komentá°· otev°eného receptu získává uºivatel moºnost napsat sv·j vlastní komentá° nebo reagovat na n¥které dal²í komentá°e. Po vypln¥ní textu komentá°e a po stisknutí tla£ítka pro jeho odeslání bude uºivatel upozorn¥n zprávou o výsledku vloºení komentá°e k receptu. Prázdný komentá° není moºné odeslat, text je p°ed samotným odesláním kontrolován a v p°ípad¥ chyby je uºivatel op¥t upozorn¥n.

3.3.3 Administrátor

Spravovat uživatele Možnost úpravy a odstranění.

Spravovat recepty

Administrátor Spravovat kategorie

(from Aktéři)

Správou se rozumí přidávání skupin, úprava a odstranění.

Spravovat ingredience «extend» Zařadit osamocené ingredience

Obrázek 3.5: Diagram p°ípad· uºití pro administrátora

3.3.3.1 Spravovat uºivatele •

Vstupní podmínky Otev°ené okno s administrací.

•

Hlavní scéná° Na panelu s uºivateli je zobrazen seznam uºivatel· v systému. Kliknutím na vybraného uºivatele se vedle seznamu aktualizují detaily práv¥ zvoleného uºivatele, kde je moºné je zm¥nit a ihned uloºit.

3.4.

GRAFICKÉ UšIVATELSKÉ ROZHRANÍ WEBOVÉ APLIKACE

15

3.3.3.2 Spravovat recepty •

Vstupní podmínky Otev°ené okno s administrací.

•

Hlavní scéná° Na panelu s recepty je zobrazen seznam recept·, odkud je moºné je následn¥ upravovat (kliknutím na tla£ítko pro úpravu) a nebo odstranit (kliknutím na tla£ítko pro odstran¥ní). V p°ípad¥ úpravy receptu dojde k otev°ení okna s p°edvypln¥nými údaji, kde je moºné recept zm¥nit a následn¥ uloºit. Okno administrace v²ak z·stává stále otev°ené, jen umíst¥né v pozadí.

3.3.3.3 Spravovat kategorie •

Vstupní podmínky Otev°ené okno s administrací.

•

Hlavní scéná° Administrátor má moºnost spravovat kategorie systému tak, ºe nejprve vytvo°í skupiny kategorií, do kterých je pak moºné zano°ovat dal²í kategorie v libovolném po£tu. Tyto kategorie pak uºivatel volí p°i vytvá°ení nového receptu.

3.3.3.4 Spravovat ingredience •

Vstupní podmínky Otev°ené okno s administrací.

•

Hlavní scéná° Na panelu s ingrediencemi m·ºe administrátor jednotlivé ingredience upravovat nebo je za°azovat do skupin ingrediencí. Je také dostupný seznam osamocených ingrediencí, které je²t¥ nejsou za°azeny a m¥ly by být p°esunuty do jednotlivých kategorií ingrediencí. Za°azené ingredience uvidí náv²t¥vník ve stromové struktu°e ingrediencí a má tak moºnost zobrazit recepty, které tyto ingredience obsahují.

3.4 Gracké uºivatelské rozhraní webové aplikace Tato aplikace není jen fádní webovou stránkou, jedná se skute£n¥ o webovou aplikaci, jejíº gracké uºivatelské rozhraní (GUI) bude napsáno v jazyce Java. Existuje n¥kolik r·zných framework·, které usnad¬ují vytvá°ení uºivatelského rozhraní. Vybral jsem GWT od spole£nosti Google, která je v sou£asné dob¥ ²pi£kou, konkrétn¥ ale jeho nadstavbu SmartGWT. Je podporována moderními prohlíºe£i a navíc nabízí velmi p°íjemný výsledek.

16

KAPITOLA 3.

ANALÝZA A NÁVRH E’ENÍ

2

Wireframe aplikace byl vytvo°en pomocí online nástroje iPlotz .

Obrázek 3.6: Wireframe webové aplikace

2

<

http://www.iplotz.com>

3.4.

GRAFICKÉ UšIVATELSKÉ ROZHRANÍ WEBOVÉ APLIKACE

17

«column» *PK id comment parent recipe user created

comment

«column» *PK id created email password

user

1

0..*

0..*

0..1

1

1

child

owner

0..*

1

0..*

1

Obrázek 3.7: Diagram fyzického datového modelu 1..*

«column» *PK recipe_id *PK category_id

recipe_category

1

1

1

1..*

0..1

0..*

«column» *PK recipe_id *PK user_id rate

0..*

category

1

0..*

0..*

0..1

1

1..*

child

«column» *PK id recipe blobdata description

image

«column» *PK id description 1 name category_group parent

«column» *PK recipe_id image_id

recipe_main_image

0..*

recipe_raiting

1..*

1

«column» 1 *PK id description name

category_group

«column» *PK ingredient_id *PK recipe_id quantity

recipe_ingredient

«column» *PK id name

ingredient

1

0..*

«column» *PK id description name parent

ingredient_group

1

0..*

«column» *PK ingredient_group_id *PK ingredient_id

ingredient_group_ingredient

0..*

0..1

child

KAPITOLA 3.

1

«column» 0..* *PK id cook_time directions 1 name prepare_time user created last_edited

recipe

«column» *PK recipe_id *PK user_id comment

recipe_favourite

rater

18 ANALÝZA A NÁVRH E’ENÍ

3.5 Fyzický datový model

3.5.

•

FYZICKÝ DATOVÝ MODEL

Tabulka

category

Kategorie, do kterých je moºné umístit recepty.

•

Tabulka

category_group

Skupiny kategorií, ve kterých se nacházejí kategorie.

•

Tabulka

comment

Komentá°e k recept·m.

•

Tabulka

image

Obrázky recept·.

•

Tabulka

ingredient

Ingredience, které do systému vloºili sami uºivatelé.

•

Tabulka

ingredient_group

Skupiny ingrediencí, kam jsou umíst¥ny ingredience administrátorem.

•

Tabulka

ingredient_group_ingredient

Vazební tabulka pro ingredience a skupiny ingrediencí.

•

Tabulka

recipe

V²echny vytvo°ené recepty.

•

Tabulka

recipe_category

Vazební tabulka pro ur£ení kategorií jednotlivých recept·.

•

Tabulka

recipe_favourite

Vazební tabulka pro oblíbené recepty uºivatel·.

•

Tabulka

recipe_ingredient

Vazební tabulka pro ingredience umíst¥né v receptech.

•

Tabulka

recipe_rating

Vazební tabulka s hodnocením recept· uºivateli.

•

Tabulka

user

Tabulka s uºivateli systému.

19

20

KAPITOLA 3.

ANALÝZA A NÁVRH E’ENÍ

3.6 Diagram nasazení Diagram nasazení ukazuje systém z pohledu hardwarového vybavení. Následující diagram zobrazuje dva klienty p°ipojené na server. Jeden z pohledu webového klienta, který se serverem komunikuje prost°ednictvým vzdáleného volání GWT RPC (asynchronní komunikace) a druhý z desktopové aplikace prost°ednictvím technologie Java RMI.

«device» Server

«device» Klient

«executionEnvironment» Aplikační server

TCP/IP

«executionEnvironment» Prohlížeč «executionEnvironment» E-chef web

«http»

ServiceImpl (servlet)

«use»

DAO

«Object»

Vzdálené volání požadavku prostřednictvím GWT RPC

«use» Hibernate

«http»

JSONController

«JSON»

«device» Klient

«RMI»

«executionEnvironment» E-chef aplikace

«executionEnvironment» Databáze

TCP/IP MySQL

Obrázek 3.8: Diagram nasazení

Aplikační server Apache Tomcat

Kapitola 4

Realizace Cílem této kapitoly je nejprve blíºe specikovat pouºité technologie p°i vývoji aplikace a dále popsat strukturu aplikace a její implementaci se zam¥°ením na jednotlivé £ásti. Protoºe se jedná o aplikaci typu klient-server, bude implementace t¥chto £ástí popsána odd¥len¥.

4.1 Pouºité technologie Ná² projekt je implementován v objektovém programovacím jazyku Java za pomoci dále zmín¥ných technologií. Je rozd¥len na serverovou a klientskou £ást. Serverová £ást, kterou jsme vytvá°eli spole£n¥ s kolegou, vyuºívá technologie Hibernate, RMI a rámec Spring, který je pouºit pro distribuci sluºeb, díky kterým je moºné volat metody vzdálen¥ (tedy z desktopové aplikace) a pro vytvo°ení kontrolér· namapovaných na r·zné URL adresy. Má práce webového klienta je spojená se serverem, jehoº metody volá p°ímo. Dále vyuºívá technologie GWT - hlavn¥ jeho nadstavbu SmartGWT pro tvorbu grackého uºivatelského rozhraní a asynchronní poºadavky (AJAX) pro obsluhu událostí v uºivatelském rozhraní. Díky komponentám ve SmartGWT dostáváme nální webovou aplikaci, která díky svému vzhledu p°ipomíná klasické aplikace tak, jak je známe. Uºivateli tak p°iná²í pohodlí a nenutí ho p°emý²let nad ovládáním stránky.

4.1.1 Java Java je objektov¥ orientovaný programovací jazyk vyvinutý rmou Sun Microsystems. Jedná se o multiplatformní jazyk, tzn. ºe aplikace vytvo°ené v tomto jazyce je moºné spustit na r·zných opera£ních systémech, jako jsou Microsoft Windows, GNU/Linux, Mac OS £i dal²í.

21

22

KAPITOLA 4.

REALIZACE

Mezi hlavní výhody jazyka Java pat°í:

•

jednoduchá syntaxe,

•

objektový p°ístup,

•

platformov¥ nezávislý jazyk,

•

bezpe£nost,

•

multithreading (vícevláknový výpo£et).

4.1.2 Hibernate Rámec Hibernate poskytuje objektov¥ rela£ní mapování (ORM) t°íd na tabulky rela£ní databáze. V praxi to znamená, ºe tabulka v databázi je reprezentována t°ídou (entitou). Entitami jsou vyjád°eny i vazební tabulky. Vyuºívá základních t°íd POJO

1 s anotacemi,

které jsou vhodn¥j²í spí²e pro jednodu²²í konguraci. Mimo to umoº¬uje konguraci i p°es soubory XML, které se naopak hodí pro konguraci sloºit¥j²í. Hibernate pouºívá vlastní dotazovací jazyk HQL, který je velmi podobný SQL, jen v objektové podob¥. Umoº¬uje nám tak dotazovat se na databázi a obdrºet výsledek v podob¥ kolekce objekt· nebo objektu samotného.

4.1.3 Java RMI Java RMI je technologie jazyka Java, která umoº¬uje volat z jednoho virtuálního stroje metody jiného virtuálního stroje. Pouºitím této technologie je moºné vytvá°et aplikace typu klient-server tím, ºe klient volá vzdálené metody serveru. Klient i server musí v¥d¥t, jaké metody mohou volat, to ur£uje rozhraní implementované na obou stranách, které nazýváme Stub na stran¥ klienta a Skeleton na stran¥ serveru. Java RMI nám dovoluje p°ená²et pouze jednoduché datové typy a objekty, které je moºné serializovat, tj. implementující rozhraní

Serializable.

Pro funk£ní provoz je nutné, aby bylo moºné otev°ít port vy²²í neº 1023.

4.1.4 Spring framework Spring je jedním z nejpopulárn¥j²ích framework· usnad¬ující vývoj J2EE aplikací a je alternativou a také nadstavbou k Enterprise Java Bean (EJB) aplikacím. Jedná se o tzv. light-weight J2EE kontejner, to znamená, ºe nevyºaduje aplika£ní server (nap°íklad GlassFish), ale je moºné ho pouºívat v servletových kontejnerech, jako je nap°íklad Apache Tomcat, který bude pro tuto aplikaci pouºit. Hlavní funkcionalitou je kongurace objekt· a závislost mezi nimi (dependency injenction). Díky jednoduchému denování závislostí v aplikaci je moºné vym¥nit implementaci jedné komponenty za druhou. 1

Plain Old Java Object

4.1.

23

POUšITÉ TECHNOLOGIE

4.1.5 Google Web Toolkit Google Web Toolkit (GWT) je nástroj pro tvorbu AJAX aplikací v Jav¥. Narozdíl od ostatních nástroj· se vyzna£uje tím, ºe server i klient jsou programovány v jazyce Java, coº p°iná²í °adu výhod (nap°íklad vyuºití oblíbeného vývojového prost°edí, moºnost lad¥ní kódu apod.). Hlavním úkolem GWT je kompilace Javy do JavaScriptu. GWT v²ak není pouze kompilátor, ale °e²ení v²e v jednom. Obsahuje komponenty pro tvorbu uºivatelského rozhraní a zahrnuje asynchronní implementaci vzdáleného volání. Kompilátor GWT dokáºe p°evést do JavaScriptu kód vyuºívající pouze základní Java API z balík·

java.lang

a

java.util.

GWT aplikaci je moºné spustit ve dvou módech. V tzv.

hosted a web

módu. V

hosted

nebo-li vývojovém módu, nedochází ke zkompilování kódu do JavaScriptu, aplikace se spou²tí v podporovaném webovém prohlíºe£i (Chrome, Mozila Firefox, Internet Explorer) s p°edem nainstalovaným pluginem. V tomto módu lze vyuºít lad¥ní, jako p°i spu²t¥ní klasické Java aplikace z vývojového prost°edí. Naopak ve

web módu dochází ke zkompilování kódu do JavaScriptu a aplikace se spou²tí

jako klasická webová aplikace.

4.1.6 SmartGWT SmartGWT je framework postavený na GWT a knihovn¥ SmartClient. Nenabízí pouze nové a vylep²ené komponenty pro tvorbu grackých uºivatelských rozhraní oproti samotnému GWT, ale také °e²í správu dat na stran¥ serveru. Bohatou ukázku moºných komponent SmartGWT a dal²ích p°íklad· v£etn¥ zdrojových

2

kód· je moºné zobrazit v showcase .

4.1.7 AJAX AJAX, nebo-li

Asynchronous JavaScript and XML je ozna£ení pro technologii, která umoº¬uje

m¥nit obsah stránky bez nutnosti jejího nového na£tení. Díky této vlastnosti m·ºeme práci se stránkou jejím náv²t¥vník·m zp°íjemnit. Zp·sob, kterým AJAX funguje, je v praxi velmi jednoduchý. Díky rozhraní

XMLHttpRequest vytvo°í klient nový poºadavek a ode²le na server.

Ten ode²le zp¥t odpov¥¤, kterou klient dále zpracovává. Odpov¥¤ serveru m·ºe být v r·zném formátu. Pouºití XML jak z názvu vyplývá není podmínkou, odesílat m·ºeme také prostý text, HTML nebo nap°íklad data ve formátu JSON, atd.

4.1.8 Dal²í knihovny Tak jako tém¥° v kaºdé aplikaci vytvo°ené v Jav¥, tak i v této jsou vyuºity dal²í knihovny. Krom¥ t¥ch hlavních, které jiº byly zmín¥ny jsou to i tyto následující: 2

http://www.smartclient.com/smartgwt/showcase> http://www.smartclient.com/smartgwtee/showcase>

Showcase SmartGWT - <

Showcase SmartGWT EE - <

24

KAPITOLA 4.

REALIZACE

4.1.8.1 MySQL JDBC Driver Ovlada£ pro p°ipojení k databázi MySQL prost°ednictvím JDBC API. Rozpoznání databáze se ur£uje URL adresou. Pro p°ipojení k MySQL databázi vypadá adresa takto:

jdbc:mysql://server/database?characterEncoding=UTF-8 kde server je adresa serveru a database je název databáze. Hodnota characterEncoding ur£uje kódování znak·.

4.1.8.2 FlexJSON FlexJSON je malá, ale velmi uºite£ná knihovna, která umo¬uje serializovat Java objekt do formátu JSON

3.

P°íklad ukazující serializaci objektu:

public String serializePerson() { Person person = new Person(); JSONSerializer serializer = new JSONSerializer(); return serializer.serialize(person); } Výsledkem této metody budou data ve formátu JSON:

{

"class": "Person", "name": "John Doe", "birthday": -12802392000000, "nickname": "John"

}

4.1.8.3 Commons FileUpload Základní knihovna pro usnadn¥ní nahrávání soubor· na server. FileUpload parsuje HTTP poºadavek, pokud jsou data odeslaná z HTML formulá°e s nastaveným na hodnotu

multipart/form-data.

enctype

atributem

4.2 Struktura aplikace Pro p°ehlednost bylo nutné aplikaci rozd¥lit na £ásti, které jsou uspo°ádané ve stromové struktu°e. Zdrojové kódy jsou umíst¥ny v balíku Klí£ové slovo

web

cz.cvut.fel.echef a balíkách niº²í úrovn¥.

v názvu balík· °íká, ºe se jedná o £ást webového klienta, ostatní obsahují

serverovou £ást. Popis obsahu jednotlivých balík· klientské £ásti se nachází v dal²ích sekcích. 3

JavaScript Object Notation je jednoduchý formát pro vým¥nu dat. Jedná se o textový zápis nezávislý

na jazyku. JSON je zaloºen na dvou strukturách, bu¤ kolekci tvo°ící pár vlastnost a hodnota. Nebo jako t°íd¥ný seznam hodnot, £astokrát realizovaný jako pole.

4.3.

IMPLEMENTACE SERVERU

25

Obrázek 4.1: Stromová struktura aplikace (z vývojového prost°edí NetBeans)

4.3 Implementace serveru Serverová £ást má jednoduchý úkol. Zajistit spojení s databází, moºnost provedení dotazu a vrátit p°íslu²ný výsledek. To v²e s podporou vzdáleného volání, tedy s pouºitím technologie Java RMI.

4.3.1 Databáze a rámec Hibernate Pro komunikaci s databází je v aplikaci pouºitý rámec Hibernate, který se nastavuje pomocí souboru

hibernate.cfg.xml,

který se umis´uje do výchozího balíku (default package).

4.3.1.1 Kongurace V tomto XML souboru se nastavuje URL adresa JDBC [4.1.8.1], uºivatelské jméno a heslo pro p°ipojení k databázi. Kongura£ní soubor pak dále obsahuje mapování tabulek na jednotlivé entity. Dal²í nastavení nám umoº¬uje m¥nit chování Hibernate.

26

KAPITOLA 4.

REALIZACE

Pro jednodu²²í nastavení celé aplikace je v²ak vyuºitý jiný kongura£ní soubor, kde jsou mimo jiné i údaje pro p°ipojení k databázi. V kongura£ním souboru Hibernate tak z·stává jen jeho nastavení a mapování entit. Ukázka klasického kongura£ního souboru Hibernate:

<session-factory> <property name="hibernate.dialect"> org.hibernate.dialect.MySQLInnoDBDialect <property name="hibernate.connection.driver_class"> com.mysql.jdbc.Driver <property name="hibernate.connection.url"> jdbc:mysql://127.0.0.1/echef?useUnicode=true&characterEncoding=utf8 <property name="hibernate.connection.username">root <property name="hibernate.connection.password">heslo <property name="hibernate.current_session_context_class">thread <property name="hibernate.show_sql">true <property name="hibernate.use_sql_comments">true <property name="hibernate.default_batch_fetch_size">50 <mapping class="cz.cvut.fel.echef.model.Recipe"/> ... Pro lad¥ní aplikace je vhodné aktivovat vlastnost

hibernate.show_sql, díky které budou

do výstupu vypisovány jednotlivé dotazy posílané databázi. Aktivováním vlastnosti

hibernate.use_sql_comments

budou jednotlivé dotazy navíc

okomentovány. Vlastnost

hibernate.default_batch_fetch_size

ur£uje velikost, kolik objekt· m·ºe

Hibernate na£íst najednou p°i pouºití tzv. batch loadingu [4.3.1.5].

4.3.1.2 Entity Entity jsou persistentní doménové objekty reprezentující tabulky v databázi. Ty jsou v aplikaci umíst¥né ve spole£né knihovn¥, kterou pouºívá server i desktopová aplikace. Entity byly vytvo°eny pomocí procesu zvaným reverse engineering. Tuto moºnost nabízí vývojové prost°edí NetBeans a ze zvolené databáze vygeneruje entity podle nastavení.

4

Zápis pomocí anotací je od JEE 6 preferovaný v JPA , proto je moºné ho vyuºít i v Hibernate entitách. 4

Java Persistence API

4.3.

27

IMPLEMENTACE SERVERU

V této aplikaci jsme vyuºili práv¥ entity s anotacemi, jejichº zápis se nám zdá p°ehledn¥j²í a pln¥ dosta£ující pro ná² systém, který neobsahuje nijak sloºité vazby mezi tabulkami. T°ída, která p°edstavuje entitu musí být uvozena anotací které ur£ují, ºe se jedná o entitu tabulky

recipe v databázi.

@Entity a @Table(name="recipe"),

5

Dal²í anotace lze dohledat v dokumentaci Hibernate .

4.3.1.3 Lazy loading Opoºd¥né na£ítání znamená na£tení objekt· aº ve chvíli, kdy k nim p°istupujeme. Zabra¬uje se tím tak zbyte£nému na£tení v²ech dat, které nemusí být vyuºity. Nevýhodou je nutnost provedení více dotaz·.

4.3.1.4 Eager loading V£asné na£ítání je opakem lazy loadingu. Na£teme to, co práv¥ pot°ebujeme pomocí sepsaných dotaz·, podobných jako v SQL. Moºnosti u Hibernate jsou:

•

select - klasické dotázání se na objekt (nap°íklad podle id)

•

join - na£tení dat spole£n¥ s p·vodním objektem

•

subselect - provedení poddotazu p°i na£ítání p·vodního objektu. Platí zde omezení, ºe objekt smí být v relaci 1:1 nebo N:1.

4.3.1.5 Batch loading Dávkové na£ítání je velmi uºite£ná vlastnost Hibernate, která ²et°í po£et dotaz·, které se odesílají databázi. Funguje pouze na kolekce. Jak je to v praxi ukazuje tento jednoduchý p°íklad:

List recipes = (List) session.createQuery("from Recipe").list(); for(Recipe recipe : recipes) { recipe.getIngredients(); } Na místo o£ekávaného po£tu dotaz·

1 + po£et recept·, budou vytvo°eny dotazy jen dva:

select * from recipe; select * from ingredient where recipe in (1, 2, 3, 4, 5); Po£et £ísel v klauzuli 5

<

in

práv¥ ur£uje vlastnost

http://www.hibernate.org/docs>

hibernate.default_batch_fetch_size.

28

KAPITOLA 4.

REALIZACE

4.3.2 Java RMI Jak bylo jiº napsáno u popisu této technologie [4.1.3], server i klient sdílí £ást zdrojového kódu. Proto jsme se rozhodli vytvo°it knihovnu, ve které bude tato spole£ná £ást jak pro server, tak pro klienta (my²leno desktopovou aplikaci). Na základ¥ p°ípad· uºití je t°eba si uv¥domit, jaké v²echny metody jsou pot°eba. Pro p°ehlednost byly rozd¥leny na recepty, uºivatele, kategorie, ingredience a dal²í. Pro kaºdou takovou skupinu metod je vytvo°eno rozhraní, které je na serveru implementováno. ƒást kódu jako ukázka, jak denice rozhraní pro RMI m·ºe vypadat:

public interface RecipeDaoInterface extends Remote { public Recipe addRecipe(Recipe r) throws RemoteException; public void saveRecipe(Recipe r) throws RemoteException; public void removeRecipe(Recipe r) throws RemoteException; public Recipe getRecipe(int id) throws RemoteException; ... } Jsou tu i jistá pravidla, která musí být dodrºena:

Remote,

•

Kaºdé rozhraní musí d¥dit od rozhraní

•

kaºdá metoda musí propou²t¥t vyjímku

•

pouºité smí být jen jednoduché datové typy nebo objekty, které je moºné serializovat, tj. implementují rozhraní

RemoteException,

Serializable.

4.3.2.1 Distribuce bean jako sluºeb 6 objekt· provádí rámec Spring a samotná kongurace je v souboru

Distribuci DAO

applicationContext.xml,

který je umíst¥n v adresá°i

WEB-INF.

Nejd°íve je vytvo°en registr, pro který jsou vytvá°eny sokety t°ídy

cz.cvut.fel.echef.config.RegistrySocketFactory naslouchající na portu uvedeném v kongura£ním souboru aplikace.

<property name="serverSocketFactory" ref="registrySocketFactory"/> <property name="clientSocketFactory" ref="registrySocketFactory"/> 6

Data Object Access je návrhový vzor, který stanovuje abstraktní rozhraní pro p°ístup k datovému zdroji.

4.4.

29

IMPLEMENTACE KLIENTA

Dále následují beany, které budou dostupné jako sluºby. Jak taková distribuce jedné beany jako sluºby vypadá znázor¬uje tato ukázka kódu:

<property name="serviceName" value="UserService"/> <property name="service" ref="userBean"/> <property name="serviceInterface" value="cz.cvut.fel.echef.dao.UserDaoInterface"/> <property name="registry" ref="registry"/> K této sluºb¥ je pak moºné p°istoupit p°es RMI na URL adrese:

rmi://ip_server_address:server_port/serviceName

4.4 Implementace klienta Klientská £ást implementovaná technologií SmartGWT se nachází v balíku

cz.cvut.fel.echef.web,

kde je umíst¥na také jedna denice GWT modulu. Takových

denic m·ºe být i více, ale v této aplikaci to není nutné. V balíku

cz.cvut.fel.echef.web.client

a dal²ích balíkách niº²í úrovn¥ se nachází

t°ídy, které se kompilují do JavaScriptu. V t¥chto t°ídách není moºné vyuºívat v²echny moºnosti Javy, ale jen ty, které je moºné vyuºít i v JavaScriptu. V p°ípad¥ vyuºití nestandardních knihoven se kompilace neprovede a kon£í chybou.

4.4.1 Stránka základem aplikace Základem GWT aplikace je jednoduchá HTML stránka, ve které se na£ítá zkompilovaný JavaScript aplikace. Je

velmi d·leºité pouºít správný typ HTML dokumentu,

tzv. DOCTYPE pro p°epnutí prohlíºe£· do správných vykreslovacích reºim·. Nebo je²t¥ lépe, nepouºívat ºádný. V opa£ném p°ípad¥ nemusí dojít ke správnému zobrazení aplikace (v n¥kterých p°ípadech v·bec k ºádnému zobrazení bez indikace jakékoli chyby). V této aplikaci je jediný hlavní soubor v souboru

web.xml.

Zjednodu²ený soubor

index.jsp

index.jsp,

který je nastaven jako

welcome-file

vypadá následovn¥:

<meta name="gwt:property" content="locale=cs"> <meta name="gwt:module" content="cz.cvut.fel.echef.Echef=cz.cvut.fel.echef.Echef"> <script type="text/javascript"> var isomorphicDir = "cz.cvut.fel.echef.web.Echef/sc/";

30

KAPITOLA 4.

REALIZACE

<script type="text/javascript" src="cz.cvut.fel.echef.web.Echef/ cz.cvut.fel.echef.web.Echef.nocache.js"> <noscript> This application requires Javascript. Please enable. P°ed samotným na£tením je neprve nutné nastavit cestu k obrázk·m SmartGWT:

var isomorphicDir = "[MODULE_NAME]/sc/"; Zkompilovaný JavaScript kód GWT kompilátorem se nachází v ko°enovém adresá°i v souboru umíst¥ném na této cest¥:

[MODULE_NAME]/[MODULE_NAME].nocache.js

4.4.2 Denice GWT modulu Denice GWT modulu se nej£ast¥ji ukládá do souboru nazvaného jako projekt s p°íponou

.gwt.xml. V tomto p°ípad¥ Echef.gwt.xml. Jedná se o klasický XML soubor. Denice GWT modulu pro tuto aplikaci:

<module>

4.4.

31

IMPLEMENTACE KLIENTA

<entry-point class="cz.cvut.fel.echef.web.client.Echef"/> <extend-property name="locale" values="cs"/>

Nejprve jsou zd¥d¥ny £ásti, které se budou v aplikaci vyuºívat,

com.google.gwt.user.User

je základ GWT, který je nutné d¥dit vºdy. Dále následuje denice vstupního bodu, tzv.

entry-point

a nastavení výchozího locale v p°ípad¥ pouºití jazykových mutací.

Dále se v tomto souboru mohou nacházet dal²í parametry nebo nap°íklad volba jiného vzhledu pro Smart GWT.

4.4.3 Entry Point EntryPoint. onModuleLoad(), která se volá p°i spou²t¥ní

Entry Point nebo-li vstupní bod aplikace je t°ída, která implementuje rozhraní Vyºaduje implementovat pouze jedinou metodu

aplikace. T¥lem této metody se tak stává vytvo°ení celé aplikace. Tato t°ída také obsahuje ve°ejné statické atributy, pro snaº²í p°ístup k t¥m hlavním £ástem aplikace. Mimo prvk· uºivatelského rozhraní to je také atribut pro internacionalizaci. Jedná se o instanci

EchefMessages

(t°ída, která d¥dí od

Messages

a je jedním typem,

jak umoºnit p°eklad GWT webových aplikací). A dále atribut instance t°ídy

GWTUser

pro

uchování p°ihlá²eného uºivatele. Ukázka nejjednodu²²í implementace metody

onModuleLoad():

public void onModuleLoad() { RootPanel.get().add(new Label("Hello world!")); } RootPanel je ko°enový panel, kam jsou umíst¥ny v²echny widgety v po°adí, jako bychom je vkládali do HTML stránky.

4.4.4 Tvorba grackého uºivatelského rozhraní Uºivatelské rozhraní je navrºeno s rozmyslem a s vhodným vyuºitím místa pro kaºdou komponentu. Cílem bylo, aby se náv²t¥vník hned po prvním kontaktu s aplikací rychle zorientoval. Aplikaci E-chef je moºné vid¥t na následujícím snímku obrazovky:

32

KAPITOLA 4.

REALIZACE

Obrázek 4.2: Ukázka aplikace E-chef s otev°eným receptem

Mezi základní komponenty SmartGWT pat°í a

VLayout

Layout

a jeho dal²í roz²í°ení

HLayout

pro vodorovné a svislé uspo°ádání. V aplikaci jsou tyto layouty hojn¥ vyuºívány

pro zobrazení dal²ích komponent. Komponenty a ostatní £ásti grackého rozhraní jsou rozd¥leny do t¥chto balík·:

• cz.cvut.fel.echef.web.client.ui

- komponenty a jednotlivé £ásti aplikace

• cz.cvut.fel.echef.web.client.ui.window • cz.cvut.fel.echef.web.client.ui.i18n

- dialogová okna

- p°eklad aplikace

Ex jsou roz²í°ením komponent ze SmartGWT. Jedním oby£ejné obrázkové tla£ítko IButtonEx, kde se jako druhý

Komponenty £i dialogy s p°íponou takovým p°íkladem roz²í°ení je

parametr konstruktoru uvádí obrázek na tla£ítku. Obrázek samoz°ejm¥ m·ºe být i jiný, neº nabízí tato t°ída, ale v p°ípad¥ zm¥ny názvu obrázku není nutné procházet v²echny zdrojové kódy, ale zm¥nit jen jednu hodnotu v této t°íd¥.

4.4.5 Komunikace klienta se serverem Komunikace se serverem probíhá asynchronn¥. Taková komunikace má své výhody i nevýhody. Nejv¥t²í výhodou je, ºe m·ºeme m¥nit jednotlivé £ásti stránky (jednotlivý obsah r·zných

4.4.

33

IMPLEMENTACE KLIENTA

komponent) bez nového na£tení aplikace. Tou nevýhodou je, ºe m·ºe dojít k vytvo°ení více po£tu poºadavk·, neº je skute£n¥ pot°eba. Pro vypln¥ní komponent daty m·ºeme vyuºít dva zp·soby. V aplikaci jsou vyuºity oba, protoºe kaºdý je vhodný k n¥£emu jinému. Zmín¥né dva zp·soby jsou:

4.4.5.1 GWT RPC - vzdálené volání procedur

ServiceDefTarget (interface)

ServiceAsync (interface)

related

RemoteService (interface)

RemoteServiceServlet (class)

extends

extends

Service (interface)

implements

ServiceImpl (class)

related

Imported framework classes implements

ServiceProxy (class)

Written by you Generated automatically

Translatable Java code (runs as JavaScript on client)

Standard Java code (runs as bytecode on server)

Obrázek 4.3: Schéma vzdáleného volání procedur v GWT [19]

Ze schématu jsou vid¥t t°i bloky, které je nutné v aplikaci vytvo°it. Jedná se o asynchronní rozhraní (ServiceAsync), klasické rozhraní (Service) a t°ídu (ServiceImpl), která rozhraní implementuje. Rozhraní jsou z d·vodu asynchronního volání dv¥. Jejich rozdíl je znázorn¥ný v této tabulce:

34

KAPITOLA 4.

název extends návratový typ

Klasické rozhraní Service RemoteService

Poºadovaný objekt (nap°.

GWTRecipe)

REALIZACE

Asynchronní rozhraní ServiceAsync -

void

hlavi£ka metody public abstract GWTRecipe public abstract void findRecipe findRecipe(int recipeId)

(int recipeId, EchefAsyncCallback asyncCallback)

Tabulka 4.1: Rozdíl mezi klasickým a asynchronním rozhraním

Klasické rozhraní je pak implementováno na serveru, kde uº m·ºeme komunikovat s databází díky DAO objekt·m. V praxi se pouºívá b¥ºn¥ více sluºeb, které rozd¥lují a zp°ehled¬ují kód. V této aplikaci je vyuºita sluºba jen jedna. Následující p°íklad ukazuje tla£ítko ve stránce, které reaguje na stisknutí vysláním poºadavku, konkrétn¥ hledání receptu s id rovno jedné. Díky callback funkci obdrºí klient odpov¥¤ a v parametru

result

dostane výsledek. Pokud není

null,

zobrazí jméno receptu jinak

zobrazí chybu.

IButtonEx button = new IButtonEx("Test", IButtonEx.Icon.ARROW_RIGHT); button.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { ServiceAsync service = Service.Instance.get(); service.findRecipe(1, new EchefAsyncCallback() { @Override public void onSuccess(GWTRecipe result) { if(result != null) { SC.say(result.getName()); } else { SC.warn("Error while RPC"); } } } }); RootPanel.get().add(button); EchefAsyncCallback