Diagrammi per la modellazione di sistemi software.
Obiettivi
- UML
- MermaidJs
- Diagrammi di classe
- Diagrammi di sequenza
Unified Modeling Language (UML)
L'UML è stato sviluppato da Grady Booch, Jim Rumbaugh e Ivar Jacobson all'interno della Object Management Group (OMG) nel 1997.
L'UML nasce come linguaggio settoriale per la modellazione di sistemi complessi basato sul paradigma orientato agli oggetti.
Nel corso del tempo i diagrammi prodotti dall'UML sono andati a specializzarsi ulteriormente.
Quelli che ci interessano sono i diagrammi di classe e i diagrammi di sequenza.
PlantUML
PlantUML è uno strumento molto potente e versatile per la creazione di diagrammi UML, realizzato in Java.
PlantUML permette l'export dei diagrammi in diversi formati, tra cui PNG, SVG, PDF e LaTeX.
Per poterlo utilizzare, si può optare per un'installazione locale, utilizzare il server online oppure utilizzare un plugin per l'editor di testo, come quello per VsCode.
MermaidJS
MermaidJS è una libreria JavaScript che permette di creare diagrammi UML direttamente nel browser, con una sintassi piuttosto semplice.
Grazie alla facilità con cui è possibile integrarla in un qualsiasi sito web, è supportata dalla maggior parte degli editor Markdown. Persino GitHub supporta la sintassi MermaidJS nella visualizzazione dei file Markdown, come i README.
In questo corso utilizzeremo MermaidJS per creare i diagrammi UML, ma la sintassi è abbastanza simile, e a tratti compatibile, a quella di PlantUML.
Diagrammi di classe
I diagrammi di classe rappresentano la gerarchia fra le classi del programma.
Può essere usato per indicare:
- implementazione (interfaccia -> classe)
- estensione (superclasse -> sottoclasse)
- composizione (parte di)
- aggregazione (ha un)
Diagrammi di classe: codice 1
interface Person {
public String getFullName();
}
abstract class AbstractPerson implements Person{
private String id;
protected String name;
protected String surname;
}
class Student extends AbstractPerson {
public String getFullName() {
return this.name + " " + this.surname;
}
}
Diagrammi di classe: diagramma 1
classDiagram
class Person {
<<Interface>>
+getFullName() String
}
class AbstractPerson {
<<Abstract>>
-String id
#String name
#String surname
}
class Student
Person <|.. AbstractPerson
AbstractPerson <|-- Student
Loading diagram...
Diagramma di classe: codice 2
class Car {
private Engine engine;
}
class Engine {
private float fuel;
}
class Driver {
private Car car;
}
Diagramma di classe: diagramma 2
classDiagram
class Car
class Driver
class Engine {
-float fuel
}
Engine <--* Car : fa parte di
Car <--o Driver : ha una
Loading diagram...
Diagramma di sequenza
I diagrammi di sequenza mostrano le interazioni che avvengono fra gli oggetti, permettendo di tracciare la causalità degli eventi.
È possibile enumerare anche i possibili branch dell'esecuzione, i risultati restituiti dalle funzioni e i periodi in cui l'oggetto sta contribuendo attivamente.
Diagrammi di sequenza: codice
class Product {
private float cost;
public float getCost() { return this.cost; }
}
class State {
public long timestamp;
public updateTimestamp() { this.timestamp = System.currentTimeMillis() / 1000L; }
}
class Order {
private Product product;
private State state;
public float getCost() {
state.updateTimestamp();
return product.getCost();
}
}
Diagrammi di sequenza: diagramma
sequenceDiagram
actor User;
User ->>+ Order : getCost()
Order ->>+ State : updateTimestamp()
State -->>- Order : #10003;
Order ->>+ Product : getCost()
Product -->>- Order : cost
Order -->>- User : cost
Loading diagram...
Challenge
- Produrre un diagramma UML di classe per una challenge vista in precedenza
- Produrre un diagramma UML di sequenza per alcune delle chiamate più importanti che caratterizzano una challenge vista in precedenza
- Utilizzare gli altri diagrammi messi a disposizione da MermaidJs
- Installare ed utilizzare PlantUML