Web Engineering-Seminar

Modellierung von Web

11

Yu GanYihui He

Modellierung von Web Anwendungen mit UML

Gliederung

1. UML Grundlagen

1.1 Einführung

1.2 UML-Bausteine

1.3 Darstellung in Diagrammen

2. Modellierung von Web Anwendung mit UML

2.1 Besonderheiten der Modellierung von Web Anwendung

2.2 Requirementsmodellierung

22

2.2 Requirementsmodellierung

2.3 Prozessmodellierung

2.4 Contentmodellierung

2.5 Hypertextmodellierung?

2.6 Präsentationsmodellierung?

2.7 Zusammenfassung

3. Fazit

Einführung

Letzer Vortrag:

• Warum Modellieren?

• Probleme beim Modellieren

Heute :

• UML (Unified Modeling Language)

� Modellierung von Web Anwendung ?

Evolution von UML

Einführung

• 1995 Zusammenschluss der Methoden Booch (Booch), OMT (Rumbaugh) und OOSE (Jacobson)

• 1995 Entwicklung von UML 0.8

• 1996 UML 0.9

• Jan 1997 UML 1.0 durch OMG• Jan 1997 UML 1.0 durch OMG

• Sept 1997 UML 1.1

• 1998 UML 1.3

• 2001 UML 1.4

• 2003 UML 2.0

Einführung

Die UML – Entwicklungsziele

• verschiedenen existierenden objektorienten Modellierungs-methoden zu vereinheitlichen

• Ermöglichung der Modellierung großer Systeme (nicht nur im

Software-Bereich) unter Verwendung objektorientierter Technologien

• Unterstützung großer, komplexer und für den Unternehmenserfolg kritischer System

• Schaffung einer Modellierungssprache, die sowohl von Menschen als auch Maschinen verstanden wird

• Es ist nicht zur Modellierung von “kontinuelischen” Systemen wie z. B VSLI, GUI Layout, gedacht.

Einführung

Was kann UML?

• Spezifikation

• Visualisierung

• Entwurf der Architektur

• Erstellung• Erstellung

• Simulation und Test

• Dokumentation

Einführung

Was ist UML nicht ?

• kein Vorgehensmodell

• kein Modellierungswerkzeug

• keine Modellierungsrichtlinien

• keine Programmiersprache

UML-Bausteine

UML besteht aus 3 Hauptelementen:

1. Grundbestandteile

• Dinge

• Beziehungen

• Diagramme

8

2. Regeln, nach denen diese Bestandteile zusammengesetzt

werden können.

• Modell muss semantisch in sich konsistent sein.

3. Mechanismen, die in der UML gelten.

• Spezifikationen

• Details

• Durchgängige Unterscheidungen

• Erweiterungsmechanismen

UML-Bausteine

Grundbestandteile

• Dinge

� Strukturelemente(Klassen, Schnittstellen, Komponenten etc.)

• Beziehungen

� Abhängigkeit

9

� Assoziation

� Generalisierung

� Realisierung

• Diagramme

�Klassendiagramme, Diagramme etc,

Darstellung in Diagrammen

Diagrammtypen

• 6 Strukturdiagramme ���� statische Systemstruktur- Klassendiagramm

- Paketdiagramm

- Komponentendiagramm

- Kompositionsstrukturdiagramm

- Objektdiagramm

10

- Objektdiagramm

- Verteilungsdiagramm

• 7 Verhaltensdiagramme���� dynamisches Laufzeitverhalten- Use-Case-Diagramm

- Aktivitätsdiagramm

- Zustandsautomat

- Interaktionsdiagramme

- Sequenzdiagramm

- Kommunikationsdiagramm

- Interaktionsübersichtsdiagramm

- Timing-Diagramm

Darstellung in Diagrammen

1. Anwendungsfalldiagramm ( Use-Case-Diagramm)

• Beziehungen zwischen Akteuren und Anwendungsfällen

• Externe Sicht auf das System

• Hilfsmittel zur Anforderungsermittlung

Bibliothek

Buch suchen

(Anwendungsfall 1 )

Benutzer

(Akteur )

(System )

Bibliothek

Buch ausleihen

(Anwendungsfall 2 )

Darstellung in Diagrammen

2. Klassendiagramm (class diagram)

Stundent

Name: String

Alter: Integer

Computer

Name: String

Cpu: Stringverwendet

0..* 1..*

• zeigt Klassen und ihre Beziehungen untereinander

• Visualisierung und Modellierung der statischen Struktur eines Systems

0..* 1..*

( Klasse 1 ) ( Klasse 2 )( Beziehung )

3. Objektdiagramm

Mike : Stundent

Name = „ Marc. L“

Alter = 24

PC 1: Computer

Name = „ IBM “

Cpu = „ Centrino “

( Objekt 1 ) ( Objekt 2 )( Beziehung )

verwendet

• zeigt die Objekte und ihre Beziehungen zu einem bestimmten Zeitpunkt

• Instanzen von Klassen zu modellieren.

Darstellung in Diagrammen

4. Aktivitätsdiagramm (activity diagram)

• beschreibt Ablaufmöglichkeiten, die aus einzelnen Aktivitäten bestehen.

• spezielle Form eines Zustandsdiagrammes

Tasse nehmen Kaffe trinken

(Start) (Ende)

Tasse abstellen

(Aktivität 1) (Aktivität 2) (Aktivität 3)

5. Zustandsdiagramm (statechart diagram)

• beschreibt die Veränderung des Zustandes eines Objekts während seiner Lebensdauer

Tasse voll Tasse leer

( Anfangszustand ) ( Endzustand )( Zustand 1 ) ( Zustand 2 )

Darstellung in Diagrammen

6. Sequenzdiagramm (sequence diagram)

• Zeigt den Nachrichtenaustausch (Methodenaufrufen) zwischen verschiedenen

Objekten unter Betonung der zeitlichen Abfolge

• Wichtig hierbei ist die vertikale Zeitachse

: Browser : Server( Objekt1 ) ( Objekt2 )einloggen

einloggen

ausloggen

ausloggen

: Browser : Server

Zeit

( Objekt1 ) ( Objekt2 )

<<component>>

MailEingang

<<component>>

EmailManagement

Email empfangen

Email vesenden

Email

abholen

( genutzte Schnittstelle )

Darstellung in Diagrammen

7. Komponentendiagramm (component diagram)

• zeitgt physische oder logische Aufbau eines Systems

• ist in der Implementierungsphase besonders wichtig

<<component>>

MailAusgang

EmailManagement

(Komponent )

Email vesenden

( Bereitgestellte Schnittstelle )

8. Verteilungs/Knoten/Einsatzdiagramm (deployment diagram)

• zeitgt Verteilung der physischen Systemresourcen

Datenbank-Server

Pc1

Pc2

<<Internet>>

<<LAN >>

Drucker

Darstellung in Diagrammen

9. Kompositionsstrukturdiagramm (composite Structure Diagram)

Auto

vorn: Rad

hinten: Radm: Motorantrieb

• zeigt die interne Struktur von Klassen und Kollaborationen.

Fabrik

Fabrik Produkt

10. Kommunikationsdiagramm (Communication Diagram )

• zeigt eine Menge von Interaktionen zwischen Objekten in einem bestimmten

Kontext unter besonderer Beachtung der Beziehung der Objekte untereinander.

• Es ist dem Sequenzdiagramm ähnlich

:Koch :Herd

1: einschaten()

2: ausschaten()

Darstellung in Diagrammen

11. Paketdiagramm (Package Diagramm)

Bankt

• Pakete dienen als „Container“ für beliebige UML Modellelemente

• Das Paketdiagramm zeigt (abstrakte) Beziehungen zwischen einzelnen Paketen

Bankt

Produkt

Konto

Kredit

Kunde

Darstellung in Diagrammen

12. Zeitverlaufsdiagramm ( Timingdiagramm )

• Darstellung von Zustandsänderungen von Interaktionspartnern

• Sinvoll bei der Modellierung von zeitkritischem Verhalten, z.B. Echzeitsysteme

grün

rot

betriebsbereit

laufen

stehen

:Am

pel

:F

uß

gän

ger aktivieren

gehen stehen bleiben

0 20 40 60 80 100 Sekunde

Darstellung in Diagrammen

13. Interaktionsübersichtsdiagramm

• Fügt verschiedene Interaktionsdiagramme wie Sequenz-, Timing- und

Kommunikations-diagramm) zusammen.

• ist ein spezielles Aktivitätsdiagramm, das Interaktionen repräsentiert

:Benutzer :Zutrittskontroll

(Start)

:Benutzer :Zutrittskontroll

System

Code eingeben

Code prüfen

Drehtür für einen

Durchgang freigeben

Code Ok Code nicht OK

(Ende)

Gliederung

1. UML Grundlagen

1.1 Einführung

1.2 UML-Bausteine

1.3 Darstellung in Diagrammen

2. Modellierung von Web Anwendung mit UML

2.1 Besonderheiten der Modellierung von Web Anwendung

2.2 Requirementsmodellierung

2020

2.2 Requirementsmodellierung

2.3 Prozessmodellierung

2.4 Contentmodellierung

2.5 Hypertextmodellierung?

2.6 Präsentationsmodellierung?

2.7 Zusammenfassung

3. Fazit

Besonderheiten der Modellierung von Web Anwendung

21

Ausgangssituation

Doni betreibt eine Pizzeria in Trier und ist unzufrieden mit demUmsatz. Er bittet unsere Firma eine „Online Pizzeria“ zuentwickeln.

• Kunden können online Pizza bestellen.

• Der Koch backt Pizza nach Kundenwu nsch.

•

22

• Pizza wird ins Haus geliefert nach der Adresseeingabe vonKunden.

• Kunden bezahlen Bargeld nachdem

Lieferung kommt.

• Doni kann Informationen auf der Webseite

verwalten (Pizza auswahl, Rezepte, Preise,

Lieferzeit, usw.).

Requirementsmodellierung mit

Anwendungsfalldiagramm

• Akteure identifizieren

• Anwendungsfälle identifizieren

Chef Koch Fahrer Kunde

23

• Anwendungsfälle identifizieren

Grundinformationen

verwalten

Bestellung

bestätigen

Bestellung lesen

und Pizza backen

Bestellung

kontrollieren

Adresse lesen

Pizza ausliefernPizza auswählen

Adresse eingebenBezahlen Zahlung bestätigen

Requirementsmodellierung mit

Anwendungsfalldiagramm

Grundinformationen

verwalten

Bestellung lesen

und Pizza backen

Bestellung

Pizza auswählen

Adresse eingeben

Online-Pizzeria-System

Bestellschein

ausdrucken

«include»

24

Bestellung

bestätigen

Bestellung

kontrollieren

Adresse lesen

Pizza ausliefern

Adresse eingeben

Bezahlen

Chef

Koch

Fahrer

Kunde

Zahlung bestätigen

Lieferschein

ausdrucken

«include»

Prozessmodellierung mit Aktivitätsdiagramm

Doni fordert zusätzliche Funktionalitäten von der Webanwendungan:

• Kundendaten (Name, Adresse, Telefonnummer, usw)werdennach der ersten Eingabe gespeichert werden.

• Pizza kann nur innerhalb des Liefergebiets angeliefert werden.Adresse kann überprüft werden.

25

Adresse kann überprüft werden.

• Ein Mindestbestellwert liegt bei 10 EUR.

Prozessmodellierung mit Aktivitätsdiagramm

Pizza auswählen und

Menge eingeben

Niedriger als

Mindestbestell-

wert?

Bestellungseingang

ins System

Bestellschein

ausdrucken

Pizza backen

Pizzabestellung:

ja

26

Addresse eingeben

Bestellvorgang

aufhebenPLZ außer dem

Liefergebiet?

Bestellung bestätigen

Pizza backen

Lieferschein (Quittung)

ausdrucken

Pizza ausliefern

Bar bezahlen

Zahlung bestätigen

nein

ja

nein

Contentmodellierung mit Klassendiagramm

Bestellung

Bestellnummer: Integer

Bestelltermin: Date

Ausliefertermin: Date

Bestellung: String

Gesamtpreis: Float

bestellscheinAusdrucken()

lieferscheinAusdrucken()

0....*0....*

27

Kunde

Kundennummer: Integer

Name: String

Adresse: String

PLZ: Integer

Telefonnummer: Integer

Pizza

ID: Integer

Name: String

Rezept: String

Größe: String

Preis: Float

Extra_Käse: Boolean

Mit_Knoblauch: Boolean

lieferscheinAusdrucken()

pizzaAuswählen()

adresseEingeben()

1....*

1....* 0....*

1....1

Contentmodellierung mit Klassendiagramm

28

Hypertextmodellierung mit UML?

Merkmale von Hypertextmodellierung:

• Spezifikation der Navigation

• Beschreibt wie Knoten durch Navigation erreicht werdenkönnen

• Navigation wird sehr selten explizit repräsentiert und nichtlinear

• Content-Modell als Ausgangspunkt

29

• Content-Modell als Ausgangspunkt

• Spezialisierte Notationen benötig, wie z.B:

• Intra-Seiten-Verweise und Inter-Seiten-Verweise

• Navigationsverweise und Prozessverweise

«navigational class»

Pizza

«navigational class»

Bestellung

navigation link

Hypertextmodellierung mit UML?

Notationsübersicht von UML2.0

30

Hypertextmodellierung mit UML?

Antwort: Nein!

31

Merkmale von Präsentationsmodellierung

• Abstrakte Festlegung des konkreten Aussehens

• Gestaltung der Struktur und des Verhaltens vonBenutzerschnittstelle

• Zusammensetzung der Präsentationselementen wie Seitenund darin enthaltenden Kontextinformationen wie Felder,Texte, Bilder, Flash, usw

Präsentationsmodellierung mit UML?

32

Texte, Bilder, Flash, usw

• Man kann mit Kompositionsdiagramm undSequenzdiagramm Präsentation einer Webseite modellieren

Präsentationsmodellierung mit UML?

<presentation unit>

Pizzaliste

<picture>

Pizza i

<Textfield>

Addresse

<anchor> Pizza 1

<anchor> Pizza 2

<anchor> Pizza 3

<anchor> Pizza 4

.

.

<Page>

PizzaSeite

33

<Text>

Einkaufs-

wagen und

Gesamtpreis

.

.

.

. <text>

Beschreibung von Pizza i

<Button>

Bestellen

<Textfield>

Menge

<Button>

Bestätigen

Aber

• Visualisierung graphischer Elemente nicht möglich

• Kunden wollen immer prototypische Seiten

• Webseitenprototyping wird modelltechnisch nicht unterstützt

• UML ist nicht optimal für Präsentationsmodellierung

Präsentationsmodellierung mit UML?

34

Zusammenfassung

Implementierung modelliert in UML

teilweise in UML

35

Analyse

Entwurf

Content Hypertext Präsentation

teilweise in UML

nicht in UML

Gliederung

1. UML Grundlagen

1.1 Einführung

1.2 UML-Bausteine

1.3 Darstellung in Diagrammen

2. Modellierung von Web Anwendung mit UML

2.1 Besonderheiten der Modellierung von Web Anwendung

2.2 Requirementsmodellierung

3636

2.2 Requirementsmodellierung

2.3 Prozessmodellierung

2.4 Contentmodellierung

2.5 Hypertextmodellierung?

2.6 Präsentationsmodellierung?

2.7 Zusammenfassung

3. Fazit

Fazit

• Der Kunde kann die modellierten Abläufe seines Internet- oder Intranet-

Projektes durch die "gemeinsame" Sprache wesentlich besser

nachvollziehen.

• Das gemeinsame Verständnis vom Projekt hilft, Missverständnisse zu

vermeiden und Misstrauen abzubauen.

• Die genaueren Kalkulationsmöglichkeiten bei den Web-Agenturen

ergeben gleichzeitig Planungssicherheit beim Kundenbudget.

• Effizienzsteigerung durch standardisierte Beschreibung der • Effizienzsteigerung durch standardisierte Beschreibung der

Anwendung.

• Das Projekt kann sicherer kalkuliert werden, da die einzelnen

Teilschritte kleiner und überschaubarer sind.

• UML wird der Anforderung nicht ganz gerecht, eine Sprache für alles

zu sein.