PWA

Diagram Sekwencji w UML (przykłady w JavaScript)

• 8 minut

Dziś przygotowałem dla Was artykuł o Diagramie Sekwencji. Dowiecie się z niego jakie korzyści płyną z jego używania. Jestem przekonany, że ten diagram spodoba się wszystkim programistkom i programistom.

Baner promujący artykuł
Oficjalne logo UML

Inne artykułu na blogu traktujące o UML:

Po co stosować Diagram Sekwencji?

Diagram Sekwencji, który jest podtypem Diagramu Interakcji, służy do opisania ścieżki algorytmu, bez zagłębiania się w detale. Wykorzystywany, aby zamodelować proces lub ścieżkę algorytmu w sposób przystępny i ustandaryzowany.

Diagram Sekwencji nie zawiera szczegółów implementacyjnych, więc idealnie służy do projektowania.

Dodatkowym plusem, który jest cechą wszystkich diagramów, jest oczywiście to, że diagramy są agnostyczne względem języka oraz technologii.

Co to jest UML?

Jeśli nie wiesz, to zapraszam do artykułu nt. UML na tym blogu.

Diagram Sekwencji w Specyfikacji UML

Wersja aktualna na dzień pisania artykułu to v2.5.1. Opublikowana w grudniu 2017.
Do pobrania w wersji PDF: https://www.omg.org/spec/UML/2.5.1/PDF
Rozdział, który nas interesuje to “17.8 Sequence Diagrams” (na stronie 595).

Notacja

Lista elementów, które są używane na Diagramach Sekwencji wraz ze znaczeniami:

Linia życia - prostokąt z pionową linią

  • Prostokąt:
    • Reprezentuje encję z opisywanego procesu
    • W prostokącie możemy użyć nazwę klasy jako element dziedziny problemu
    • Ale również możemy użyć nazwy obiektu, stworzonego za pomocą klasy
  • Pionowa linia:
    • Reprezentuje czas życia opisywanego elementu
    • Kolejne linie życia tworzymy TYLKO po prawej stronie w kolejności użycia
option footer=none

participant A
participant b: B
  • Atomowa operacja
    • Jeśli chcemy zaznaczyć, czas trwania obsługi komunikatu możemy stworzyć na linii życia dodatkowy prostokąt
option footer=none

participant A
participant B

A->B: request
activate B
B-->A: response
deactivate B

  • Zakończenie linii życia - Wielki znak iks użyty na linii życia informuje, że czas życia danej encji został właśnie zakończony

    Na diagramie powyżej można zobaczyć wizualizację zakończenia linii życia.

option footer=none

participant A
destroy A

Komunikat - pozioma strzałka z podpisem

  • Podpis:
    • Zawiera nazwę czynności uruchomionej na encji, do której strzałka kieruje.
  • Strzałka:
    • Mamy do dyspozycji kilka typów, ale najpopularniejsze z nich to:
      • linia ciągła połączona z wypełnionym grotem
        oznacza synchroniczne wywołanie
      • linia ciągła połączona z pustym grotem
        oznacza asynchroniczne wywołanie
      • linia przerywana połączona z pełnym grotem
        oznacza odpowiedź
option footer=none

A->B: Synchroniczne wywołanie
A->>B: Asynchroniczne wywołanie
B-->A: Odpowiedź
  • Komunikat zwrotny
    • Jeśli chcemy zaznaczyć, że encja coś procesuje, możemy utworzyć wiadomość w której nadawca i odbiorca będę pochodzić z tej samej linii życia
option footer=none

A->A: message

Fragment - prostokąt, który zawiera pewien zakres czynności

  • Tworzy obszar z warunkiem, pętlą lub jednoczesnym uruchomieniem więcej niż jednej czynności
  • Rozróżniamy kilka typów fragmentów:
    • alt
      Alternatywa: tylko ten, którego warunek jest prawdziwy, zostanie wykonany (możemy zdefiniować blok else)
    • opt
      Opcjonalnie: fragment jest wykonywany tylko wtedy, gdy podany warunek jest prawdziwy (taki alt, ale bez else`)
    • par
      Równolegle: każdy fragment jest uruchamiany równolegle
    • loop
      Pętla: fragment może być wykonywany wielokrotnie, a warunek wskazuje podstawę iteracji
    • region
      Obszar krytyczny: fragment może być wykonywany tylko przez jeden wątek jednocześnie
    • neg
      Negatywny: fragment wykazuje nieprawidłową interakcję
    • ref
      Odniesienie: odnosi się do interakcji zdefiniowanej na innym diagramie. Ramka jest rysowana tak, aby obejmowała linie życia zaangażowane w interakcję. Można zdefiniować parametry i wartość zwracaną
    • sd
      Diagram sekwencji: używany do otaczania całego diagramu sekwencji.
option footer=none

loop
A->B: message1
A->>B: message2
end

alt condition
A->B: message3
else else
A->B: message4
end

opt
    A->B: message5
    seq
        A->B: message6
    end
end

Jakiego typu informacje zamieszczamy na Diagramie Sekwencji?

Umieszczamy:

  • Nazwy elementów dziedziny problemu oraz ich linie życia
  • Komunikaty wysyłane między liniami życia (wywołania i odpowiedzi)
  • Obszary, które zmieniają przepływ algorytmu, tj. pętle, warunki

Opcjonalnie umieszczamy:

  • Tworząc komunikat, możemy dodać podpis nad strzałką będący nazwą funkcji wraz z listą argumentów, jakie do niej przekazujemy

Nie umieszczamy:

  • Implementacji funkcji

Przykład

Chcemy zbudować listę zadań (to będzie nasza domena). Jakie elementy będę występować w domenie problemu?

  • Lista zadań
  • Zadanie

Przykładowy kod (stworzony tylko na potrzeby lepszego zrozumienia przykładu):

class TaskList { /* logic */ }
class Task { /* logic */ }

function main() {
    new TaskList();
}

main();

Zatem, jak będzie wyglądał Diagram Sekwencji? Czy możemy zaplanować jak będzie wyglądała komunikacja między elementami tej domeny? Tak!

Kod powyższego Diagramu Sekwencji 
participant TaskList
participant Task

note over TaskList,Task: create
TaskList->Task: create( value: string )
activate Task
Task-->TaskList: taskId: number

note over TaskList,Task: render
TaskList->Task: render()
Task-->TaskList:

note over TaskList: add task to a list of tasks
TaskList->TaskList:

note over TaskList,Task: delete
Task->Task: delete()
Task->TaskList: onRemoveTask()
deactivate Task

note over TaskList: remove task from a list of tasks
TaskList->TaskList:

destroy Task

A teraz jak to wygląda w praktyce? Poniżej możecie zobaczyć listę akcji zdefiniowanych w prostokątach wraz z ich implementacją na GitHubie:

  1. create
  2. render
  3. add task to a list of tasks
  4. delete
  5. remove task from a list of tasks

W jakich narzędziach tworzymy Diagramy Sekwencji?

Konwertery kodu na diagram:

Edytory WYSIWYG, tj. budowanie diagramów za pomocą pointera:

Diagram Sekwencji mojego autorstwa. Temat - Zmiana nazwiska pacjenta. 2013 rok.

Narzędzie VSCode Sequence Diagrams - plugin do VSC

Ten plugin do Visual Studio Code to ciekawa alternatywa do wcześniej wymienionych narzędzi, która pozwala renderować Diagram Sekwencji wewnątrz edytora.

Ważne!

Plugin VSCode Sequence Diagrams korzysta z js-sequence-diagrams. dzięki czemu musimy korzystać z tej wspieranej składni.

Książki

Lista książek, z których można dowiedzieć się więcej na temat Diagramu Sekwencji:

Filmy

Lista filmów, z których można dowiedzieć się na temat Diagramu Sekwencji:

Słownik trudnych słówek

  • dziedzina problemu
    obszar, w którym poruszana jest dyskusja
    Przykład: proces logowania użytkownika w serwisie
  • encja
    dowolny element z dziedziny problemu
    Przykład: użytkownik w procesie logowania
  • algorytm
    pewien ciąg zdarzeń następujących po sobie. Zdarzenie uruchomione w zdefiniowany sposób realizują jakąś funkcjonalność.
    Przykład:
    • pobieranie danych z formularza,
    • budowanie obiektu, który posłuży jako payload w żądania do serwera,
    • wysłanie zapytania HTTP
    • parsowanie odpowiedzi
    • obsługa odpowiedzi
      • prezentacja komunikatu błędu
      • przekierowane na stronę główną z informacją o pomyślnym zalogowaniu

Zadania na przećwiczenie

  • Zadanie 1.
    Za pomocą Diagramu Sekwencji, opisz proces kupowania jabłek w sklepie spożywczym.
  • Zadanie 2.
    Za pomocą Diagramu Sekwencji, opisz proces uwierzytelniania użytkownika.

Bibliografia