Aufbau einer Webpage per MVP-Pattern (UML-Sequenzdiagramm Übungsaufgabe)
https://bildung.social/@oerinformatik/113690879145964522
https://oer-informatik.de/uml-sequenzdiagramm-uebung-mvp
tl/dr; (ca. 20 min Bearbietungszeit): Übungsaufgabe zu UML-Sequenzdiagrammen: Der Nachrichtenfluss des MVP-Patterns soll anhand eines Beispiels (Buchung einer Veranstaltung) dargestellt werden. (Zuletzt geändert am 28.02.2025)
Im Rahmen der Organisation eines Kongresses soll ein Teil einer WebApp modelliert werden. Besuchende sollen mit der App Veranstaltungen buchen können. Der hier beschriebene Vorgang startet, nachdem der Benutzerclient bereits die Infoseite einer spezifischen Veranstaltung (im Beispiel die Session-ID 123) geöffnet hat und über den dort befindlichen “Buchen”-Button einen freien Platz bei der Session buchen will. Die Session nutzt das GUI-Pattern Model-View-Presenter, bei dem die Website aus Vorlagendateien (Templates) generiert wird. Die Kenntnis dieses Patterns ist zur Lösung der Aufgabe nicht erforderlich. Modelliere die folgenden Nachrichten in einem UML-Sequenzdiagramm:
Der Benutzerclient löst den Versand des Post-Requests
http://it-kongress/buchung {“SessionID“=123, “User“=321}an den Presenter aus.Der Presenter prüft zunächst, ob noch freie Plätze vorhanden sind, indem er die Methode
getFreeSeats(SessionID)des SessionRepository aufruft (Info abseits der Lösung dieser Aufgabe: das Repository ist Teil der Rolle des Models im MVP-Pattern).Für den Fall, dass noch Plätze vorhanden sind,
erzeugt der Presenter eine neue View-Instanz über den View-Konstruktor
View(“booked.html“).Der Presenter bucht einen Platz der Session (
bookSeat(SessionID)des SessionRepository).
Für den Fall, dass es keine freien Plätze mehr gibt,
erzeugt der Presenter eine andere View-Instanz mit
View(“noSeats.html“).Der Presenter ruft die statische Methode
sendMailNoSeats(SessionID)der WebAppService-Klasse auf, und wartet nicht bis die Methode die Mail verschickt hat.
Der Presenter erzeugt die HTML-Antwortseite, in dem er die eigene Methode
htmlText = renderTemplate()der jeweiligen View aufruft.Diese HTML-Antwortseite (
htmlText) sendet der Presenter als Response (HTTP-Antwort) an den Benutzerclient.
Erstelle ein UML-Sequenzdiagramm, in dem alle geforderten Lebenslinien und Nachrichten dargestellt werden.
Beispiellösung
Wer nach der Bearbeitung das eigene Ergebnis vergleichen will, der kann sich folgende Beispiellösung anschauen:
Hinweis zur Lösung:
Ich habe zwei verschiedene Views erzeugt, denkbar ist auch, dass die gleiche Lebenslinie erzeugt wird (mein Tool gibt das aber nicht her).
Die Unterscheidung zwischen den synchronen Nachrichten und der asynchronen Nachricht (Mailversand) müssen umgesetzt worden sein.
Ebenso sollten Linientyp und die Pfeilspitzen beim Konstruktoraufruf wie angegeben sein.
Meine Bewertung umfasste 15 Punkte::
4 Lebenslinien korrekt: 4x 0,5 = 2P
Benamung der Lebenslinien (“:Objekt” bei dreien und “Klasse” bei einem): 2P
1 synchrone Nachricht: (ClientRequest und Response): 1P
4 Synchrone Nachrichten: 4P
2 Erzeugungsnachrichten: 2P
1 Asynchrone Nachticht: 2P
Kombiniertes Fragement (Alt-Bereich): 2P
Weitere Übungsaufgaben
Es gibt hier im Blog noch ein Tutorial zur Erstellung von UML-Sequenzdiagrammen mit PlantUML sowie eine Reihe Übungsaufgaben zu Sequenzdiagrammen: Nachrichtfluss von MQTT-Projekten / Authentifizierung mit Passkeys / Authentifizierung mit OAuth2 sowie kleinere Übungsaufgaben
Hinweis zur Nachnutzung als Open Educational Resource (OER)
Dieser Artikel und seine Texte, Bilder, Grafiken, Code und sonstiger Inhalt sind - sofern nicht anders angegeben - lizenziert unter CC BY 4.0. Nennung gemäß TULLU-Regel bitte wie folgt: “Aufbau einer Webpage per MVP-Pattern (UML-Sequenzdiagramm Übungsaufgabe)” von Hannes Stein, Lizenz: CC BY 4.0. Der Artikel wurde unter https://oer-informatik.de/uml-sequenzdiagramm-uebung-mvp veröffentlicht, die Quelltexte sind in weiterverarbeitbarer Form verfügbar im Repository unter https://gitlab.com/oer-informatik/uml/umlsequenz. Stand: 28.02.2025.
[Kommentare zum Artikel lesen, schreiben] / [Artikel teilen] / [gitlab-Issue zum Artikel schreiben]
