Tworzenie aplikacji internetowych

Tworzenie serwis ów
internetowych - metodyki
Dr inż. Marek MIŁOSZ
(c) M.Miłosz
1
Plan
l Metodyki
projektowania (i tworzenia)
serwisów internetowych:
UML
l WebML
l WSDM (ang. Web Site Design Method)
l
(c) M.Miłosz
2/999
Problemy tworzenia WebAplikacji
Obiektywne
l
l
l
l
l
l
Nawigacja
Doświadczenie
użytkowników
Różnorodność
użytkowników
Zmienność potrzeb
Interfejs użytkownika
Skalowalność
(c) M.Miłosz
Subiektywne
l
l
l
Metodyka tworzenia
Złożoność serwisów
i jej konsekwencje
Wielozawodo wy
zespół wykonawczy
3/999
Problemy metodyczne
l Brak
metodyk t worzenia aplikacji
internetowych (szczególnie
bazodanowych) wykorzystujących MDD
- ang. Model-Driven Developmnet
l Zapożyczenia z BD, IO, ni edostosowane
do specyfiki aplikacji internetowych
l Konsekwencj a: duża ilość kodu
tworzonego ręcznie, wysokie koszty
(nawet prototypów)
(c) M.Miłosz
4/999
Złożoność serwisów internetowych
l Wzrasta,
bo:
Coraz większe wymagania (e-biznes)
l Coraz większa różnorodność urządzeń
końcowych
l Wymagania indywidualizacji serwis ów
l
l Rosną
także koszty:
Budowy
l Utrzymania (szczególnie)
l
(c) M.Miłosz
5/999
Zespół wykonawczy
l Połączenie
projektantów:
Biznesowych (analitycy)
l Merytorycznych - właścicieli treści
(urzędnicy, pracownicy itd.)
l Graficznych (artyści)
l Informatycznych (informatycy)
l
l Konieczność
komunikacji i współpracy:
Wyższy poziom abstrakcji
l Pozbycie się kodowania (à generowanie)
i koncentracja działań na
wysokopoziomo wym projektowaniu
l
(c) M.Miłosz
6/999
Metodyki projektowani a i budowy
l Stare:
HDM (ang . Hypermedia Design
Method) i OOHDM (ang. Object-Oriented
Hypermedia Design Method)
l UML (ang. Unified Modeling Language)
l WebML
l WSDM (ang. Web Site Design Method)
(c) M.Miłosz
7/999
UML
funkcjonalności à Use Case
Diagram
l Projekt architektury (stron) à Class
Diagram (formularze, strony akt ywne i
nawigacja serwisu)
l Wykorzystanie profili (np. Web Modeler)
l Projekt
(c) M.Miłosz
8/999
WebML
l
l
l
l
l
WebML to język wysokopoziomowego projektowania
aplikacji internetowych korzystających z dużej ilości
danych
Opracowany w 1998 roku (Politechnika w Mediolanie),
rozwijany, obecnie obudowany nar zędziami CASE
WebML jest językiem typu DSLTools (ang. DomainSpecific Language Tools)
Stanowi spore ułatwienie w tworzeniu stron typu:
e-commerce, serwisy społecznościowe, serwisy
usługowe, itd.
Umożliwia komunikacj ę pomiędzy różnymi twórcami
serwisów
(c) M.Miłosz
9/999
Modele w WebML
l
l
Model struktury (de facto model danych) –
wykorzystuje koncepcję diagramu ERD lub
diagramu klas UML
Model hipertekstu:
l
l
l
l
Model kompozycji (opisuje zawartość każdej ze
stron)
Model nawigacji (opisuje połączenia między
stronami i ich elementami)
Model personalizacji – definiuje
użytkowników i ich grupy oraz indywidualne
właściwości serwisu dla poszczególnych grup
Model prezentacji – opisuje warstwę
graficzną serwisu
(c) M.Miłosz
10/999
Struktura serwisu internet owego
struktura dan ych +
encje, relacje
(c) M.Miłosz
kompoz ycja
i nawigacja
elementy,
strony, linki
+
personalizacja
widoki stron
+
prezentacja
style
11/999
Model struktury
l Struktura
dan ych prezentowan ych
w serwisie:
Struktura bazy danych przechowywanych w
serwisie (narzędzia: klasyczne ERD
rozszerzone o generalizację lub diagramy
klas w UML)
l Dane wyznaczane na podstawie zapytań
(model obliczeniowy, ang. Derivation Model)
– perspektywy z BD realizowane przez
język zapytań WebML OQL à unikanie
redundancji danych
l
(c) M.Miłosz
12/999
autor2ksiazka
Autor
0..N
Ksiazka
1..N tytuł: string
ksiazka2aut or
sprzedaz:
float
cena: float
Gatunek
BestSeller
BestSeller=Ksiazka where Ksiazka.sprzedaz > 100000
WebML OQL
Autor.iloscKsiazek=Count(Self.autor2ksiazk a)
Ksiazka.wartoscSprzedazy=Self.sprzedaz * Self.cena
Autor.sprzedazKsiazek=Sum(Self.autor2k siazka.sprzedaz)
Autor.wartoscSprzedazy=Sum(Self.autor 2ksiazka.wartosc Sprzedazy)
Wzorce projektowe model i danych
l
Hierarchiczny
l
Gwiazda
(c) M.Miłosz
l
Sieciowy
13/999
Wzorzec hierarchiczny
l Hierarchiczna
kategor yzacja (np.
kategoria, podkategoria, produkt),
powiązanie encji
l Użytkownik przemieszcza się góra-dół
i na odwrót
l Typowe dla sklepów internetowych
(c) M.Miłosz
14/999
Wzorzec gwiazda
l Wydzielenie
głównej
encji
l Związek głównej encji z wieloma innymi,
ja wyjaśniającymi, dodatkowo
informującymi itp.
l Użytkownik może nawigować od głównej
encji do dodatkowych i z powrotem
(c) M.Miłosz
15/999
Wzorzec sieciowy
l Kilka
równoważnych
(o tym samym po ziomie ważności)
encji, o dostatecznym stopni u
objaśnienia
l Nawigacja możliwa od jednej encji do
drugiej i z powrotem
(c) M.Miłosz
16/999
Serwis à wiele wzorców
(c) M.Miłosz
17/999
Projekt zawarto ści serwisu
l Co
ma być wysyłane do użytkownika?
l Jak pogrupowa ć wysyłane dane
w strony?
l Z czego (jakich danych) ma się składać
każda strona?
l Jak połaczyć linkami poszczególne
elementy stron i same strony?
(c) M.Miłosz
18/999
Model hipert ekstu
Określa model kompozycji:
l Informacje publikowane w węzłach
hipertekstu à elementy treści (ang. Units)
l Zbiór węzłów i linków hipertekstu
dostarczany j ako całość do użytkownika
(kontener) à strona (ang. Page)
i model nawigacji:
l Zbiór połączeń pomiedzy węzłami
hipertekstu à linki (ang. Links)
(c) M.Miłosz
19/999
Elementy (jednostki) tre ści
l Dataunit
- jednostki danych
l Indexunit – lista obiektów
l Multidataunit - zbiór jednostek danych
l Entryunit – jednostka nawigacyjna
l Scrollerunit – jednostka przewijający
l Multichoiceunit – element
wielokrotnego wyboru
l Hierarchical – lista hierarchiczna
(c) M.Miłosz
20/999
Szata graficzna i znaczenie
jednostek tre ści
(c) M.Miłosz
21/999
Jednostka tre ści - definicja
l Atomiczny
element interfejsu związany
zwykle z elementem struktury (encją)
IN
parameters
unitX
OUT
results
entity
[selector (par 1, .., parN )]
l Wyjście
może być użyte jako we innych
jednostek
(c) M.Miłosz
22/999
Jednostki treści - wyświetlanie
params
OID
Entity
[selector(params)]
params
selectedOID
Entity
[Selector(params)]
params
{OIDs}
Entity
[Selector(params)]
(c) M.Miłosz
23/999
Jednostki treści - wejścia
params
params
{selOIDs}
Entity
[Selector(params)]
[Preselector(params)]
params
{selOIDs}
{ Entity (Relationship)
[Selector]}
params
{selOIDs}
Entity
[Selector(params)]
(c) M.Miłosz
24/999
Strona serwisu
l Strona
jest kontenerem zawierającym
jedną lub wiele informacji pokazywanych
użytkownikowi (jednostek tre ści)
l WebML pozwala zagnieżdżać strony
i tworzyć podstrony
l Użytkownik porusza się po serwisie
składającym się ze stron
Indeks książek
(c) M.Miłosz
Login
Katalog
25/999
Model nawigacji
l Linki
bezkontekstowe (bez przenoszeni a
danych à kontekstu) – kotwice
H
Indeks książek
Strona główna
kontekstowe – przenoszą dane
(kontekst) pomi ędzy jednostkami
l Linki
(c) M.Miłosz
26/999
Linki kontekstowe
jednostka docelowa
jednostka bazowa
Author
Author
l Kotwica
lub przycisk Wyślij
l Pozwala na nawigację po serwisie
l Przenosi dane
l Różne typy: parametrowe, z domy ślnymi
parametrami, automatyczne,
transportujące
(c) M.Miłosz
27/999
Jednostki akcji
l Modelują
zewnętrzne lub wbudowane
operacje modyfikacji treści serwisu –
algorytmy
l Wejścia: linki z innych jednostek
l Wyjścia: linki OK lub KO (nie-OK)
l Poza operacj ami WebML można
wzbogacać model operacjami
zewnętrznymi (np. SendMail lub
SendSMS)
(c) M.Miłosz
28/999
Jednostki akcji - przykłady
CREATE
DELETE
MODIFY
Create Unit
Delete Unit
Modify Unit
Entity
Entity
CONNECT
DISCONNECT
Connect
Unit
Disconnect
Unit
relationship
(c) M.Miłosz
Entity
relationship
29/999
Jednostki akcji - konstrukcje
value1® attribute1
KO
Nothing
Create Unit
OK
OID of
the new object
value2 ® attribute2
Entity
(c) M.Miłosz
30/999
Model personalizacji
l Parametry
kontekstowe (sesj i): język,
szablony stylów, profil użytkownika
l Grupy użytkowników: poziom uprawnień,
wymagania, dostęp do treści
l Pojedynczy użytkownik: logowanie,
wygląd, treść, jednostki treści
kontekstowe (i ndywidualne)
(c) M.Miłosz
31/999
Model prezentacji
WebML nie definiuje narz ędzi
l Dwa sposoby definiowania:
l
1.
2.
l
Galerie predefiniowalnych stylów
Wykorzystanie standardów
(najlepszych narz ędzi ;-))
Przypisanie wyglądu do
użytkownika (grupy) i urz ądzenia
(c) M.Miłosz
32/999
Cykl życia serwisu wg. WebML
Business Requirements
REQUIREMENTS SPECIFICATION
DATA DESIGN
HYPERTEXT DESIGN
ARCHITECTURE DESIGN
TESTING & EVALUATION
IMPLEMENTATION
MAINTAINANCE
& EVOLUTION
Zdefiniowane w WebML
(c) M.Miłosz
33/999
WSDM
l WebSite
Designe Method
l Metodyka proj ektowania serwisów
ukierunkowana na u żytkowników
l Punkt startu: potencj alni użytkownicy
(tzw. widownia i jej struktura), a nie dane
l Efekt: lepsza strona, bardzi ej użyteczna
l Rozdzielenie implementacji od koncepcj i
l Dostępnośc projektu koncepcyj nego dla
użytkowników
(c) M.Miłosz
34/999
WSDM. Istota
l
Modelowanie użytkowników:
l
l
l
Projekt koncepcyjny:
l
l
l
l
l
Klasyfikacja użytkowników
Opis klas użytkowników
Modelowanie obiektów
Projekt nawigacyjny
Projekt implementacyjny
Implementacja
Podstawa wszystkiego:
określenie celu serwisu
(c) M.Miłosz
35/999
WSDM. Modelowanie u żytkowników
l
Klasyfikacja użytkowników:
l
l
l
l
l
Identyfikacja czynności zachodzących w organizacji
Identyfikacja uczestników powyższych czynności
Podział powyższych uczestników na niepodzielne
grupy (klasy)
Określenie wymagań informacyjnych dla klas
użytkowników i sposobów prezentacji danych
Wyodrębnienie perspektyw
(c) M.Miłosz
36/999
WSDM. Projekt koncepcyjny. Obiekty
l
l
l
Cel: formalne zamodelowanie wymagań
informacyjnych dla każdej grupy użytkowników
Sposób: budowanie modelu obiektów dla
różnych grup (klas) użytkowników (UOM, ang.
User Object Model)
De facto jest to model danych w postaci
modelu klas
(c) M.Miłosz
37/999
WSDM. Projekt koncepcyjny. Nawigacja
l
l
l
l
Koncepcyjny model nawigacji zawiera trasy
nawigacji dla klas użytkowników (lub
perpektyw)
Trasa nawigacyjna wyraża jak użytkownicy
konkretnej perspektywy poruszają się wśród
dostępnych informacji
Składa się z komponentów i linków
Wyróżniamy komponenty:
l
l
l
(c) M.Miłosz
Informacyjne
Nawigacyjne
Zewnętrzne
38/999
WSDM. Projekt nawigacj i - przykład
(c) M.Miłosz
39/999
WSDM. Projekt implementacyjny
l
l
l
l
W tym kroku projektuje się tzw. "look and feel"
Cel:
stworzenie spójnego, przyjemnego dla oka
i wydajnego "look and feel" dla modelu
koncepcyjnego
Rezultat: Model Implementacyjny
Projekt implementacyjny może zależeć od
wybranego środowiska implementacyjnego –
jego ograniczenia (np. HTML) mogą
ingerować w ten proces
(c) M.Miłosz
40/999
WSDM. Stosowalność, wady i zalety
l
l
WSDM służy głównie do projektowania stron
informacyjnych
Zalety:
l
l
l
l
l
Nie powoduje problemów z użytecznością
i utrzymaniem strony
Strukturyzacja informacji
Strukturyzacja procesu nawigacji
Rozdzielenie projektu koncepcyjnego od
implementacji
Wady:
l
l
(c) M.Miłosz
Brak narzędzi CASE
Nie zajmuje się projektem interfejsu użytkownika
ani implementacj ą
41/999
Dziękuję
(c) M.Miłosz
42