Module 1Modéliser un projet web
Chapitre 5 sur 12
Élaborer des diagrammes UML avec un outil de modélisation
StarUML (modèle, export, génération de code) et les diagrammes en texte avec PlantUML.
- ≈ 160 min
- 6 leçons
- 2 vidéos
- 4 exercices
Module 1Modéliser un projet web
Chapitre 5 sur 12
StarUML (modèle, export, génération de code) et les diagrammes en texte avec PlantUML.
Objectifs
Avec ce chapitre, tu sauras…
Leçon 1
| Zone de l'interface | Rôle |
|---|---|
| barre de menus | File, Edit, Format, Model, Tools, View, Help |
| explorateur de modèle (Model Explorer, à droite) | l'arbre de tous les éléments du projet (classes, acteurs, diagrammes), même ceux qui ne sont dessinés sur aucun diagramme |
| boîte à outils (Toolbox, à gauche) | les éléments à dessiner, qui changent selon le type de diagramme (classe, association, généralisation… ou acteur, cas d'utilisation, include…) |
| zone de diagramme (au centre) | la feuille de dessin |
| éditeur de propriétés (Editors, en bas à droite) | les propriétés de l'élément sélectionné : nom, visibilité, type, multiplicité, stéréotype, documentation |
| menu contextuel (clic droit) | ajouter un attribut, une opération, changer l'affichage |
| Fonctionnalité | Intérêt |
|---|---|
| Quick Edit (double-clic sur un élément) | saisir rapidement un attribut ou une opération avec la syntaxe UML (-prix: float) |
| palette de commandes | rechercher et lancer n'importe quelle commande ou extension |
| recherche rapide | retrouver un élément, une vue ou un diagramme |
| validation du modèle | des règles UML sont vérifiées à l'enregistrement et à l'ouverture |
| thèmes et profils | personnaliser l'apparence, ajouter des stéréotypes |
| extensions | génération de code, import, export, nouveaux diagrammes |
Vidéo · À regarder
FRUML avec starUML : Diagramme des cas d'utilisation
Algomius · YouTube
Leçon 2
Commande).-date: Date ; « + opération » : +getTotal(): float. La visibilité, le type et la multiplicité peuvent aussi être réglés dans l'éditeur de propriétés.Leçon 3
| Action | Comment | Résultat |
|---|---|---|
| sauvegarder | File → Save (Ctrl+S) | un fichier projet .mdj : un fichier texte au format JSON, qui se versionne bien avec Git |
| exporter un fragment | clic droit sur un élément → Export Fragment | un fichier .mfj que l'on peut importer dans un autre projet (Import Fragment) |
| exporter une image | File → Export Diagram As → PNG, JPEG, SVG | une image du diagramme courant, à insérer dans un dossier de conception |
Leçon 4
Leçon 5
| Diagramme | Outils de la boîte à outils | Astuces |
|---|---|---|
| cas d'utilisation (Add Diagram → Use Case Diagram) | Subject (le rectangle du système), Actor, Use Case, Association, Include, Extend, Generalization | dessine d'abord le Subject puis place les cas dedans ; les points d'extension se règlent dans les propriétés du cas |
| séquence (Add Diagram → Sequence Diagram) | Lifeline, Message (synchrone), Async Message, Reply Message, Create Message, Delete Message, Lost/Found Message, Combined Fragment, Interaction Operand | le cadre sd est créé automatiquement ; une lifeline peut être liée à une classe du modèle pour proposer ses opérations comme messages ; le type de fragment (alt, loop…) se choisit dans la propriété interactionOperator |
Leçon 6
| Avantage | Pourquoi c'est utile |
|---|---|
| versionnable | le fichier texte se met dans Git avec le code : on voit les différences d'une version à l'autre (module M202) |
| rapide | pas de souris : une ligne par élément ou par relation |
| intégré partout | extension PlantUML de VS Code (aperçu en direct avec Alt+D), wikis, GitLab, serveur en ligne plantuml.com |
| cohérent | la mise en page automatique évite les diagrammes mal alignés |
1L'extension d'un projet StarUML est…
2Le format d'un fichier .mdj est…
3Pour supprimer un élément du modèle (et pas seulement du diagramme) on utilise…
4La génération de code de StarUML produit…
5En PlantUML, une composition s'écrit…
6En PlantUML, un message asynchrone s'écrit…
7L'avantage principal des diagrammes as code est…
8L'outil affiché directement par GitHub dans le Markdown est…
L'essentiel du chapitre
.mdj (JSON) ; export PNG, JPEG, SVG, PDF, HTML ; fragments .mfj.--|>, ..|>, o--, *--, ->, ->>, alt/else/end ; Mermaid (GitHub, GitLab) et draw.io.| exporter les modèles en HTML ou en PDF |
| exporter en PDF | File → Print to PDF | un PDF avec un ou plusieurs diagrammes |
| publier en HTML | File → Export → HTML Docs (extension) | un site de documentation navigable du modèle |
Vidéo · À regarder
UML avec starUML : Diagramme des cas d'utilisation
Algomius · YouTube
| Élément | Syntaxe PlantUML | ||
|---|---|---|---|
| association, héritage, réalisation | A -- B, `A -- | > B, A .. | > B` |
| agrégation, composition, dépendance | A o-- B, A *-- B, A ..> B | ||
| multiplicités et nom | A "1" -- "0..*" B : passe > | ||
| visibilité, statique, abstrait | - prive, + public, # protege, {static}, {abstract} | ||
| message synchrone, asynchrone, retour | A -> B : m(), A ->> B : m(), B --> A : r | ||
| fragments | alt … else … end, opt, loop, par, break |
Décris en français le diagramme représenté par ce code : Groupe "1" o-- "15..30" Stagiaire, Formateur "1..*" -- "*" Groupe : enseigne >, Stagiaire --|> Personne, Formateur --|> Personne, Stagiaire "1" *-- "*" Note.
Dans StarUML, supprimer un élément du diagramme (touche Suppr) ne le supprime que de cette vue : il reste dans le modèle (visible dans l'explorateur) et peut apparaître sur d'autres diagrammes. Pour le supprimer du modèle, utilise Ctrl+Suppr (Delete from Model). C'est la distinction fondamentale entre modèle (les éléments) et diagrammes (des vues sur ces éléments).
Ce que tu vas voir (5 min) : les chapitres « Le diagramme de cas d'utilisation dans starUML », « Le périmètre et les acteurs ». Le formateur ouvre StarUML, crée un diagramme de cas d'utilisation et fixe le périmètre du système et les acteurs : tu découvres l'interface (explorateur, palette, éditeur).
Créer le diagramme de classes de la commande
StarUML génère le squelette des classes (attributs, signatures des méthodes, héritage, interfaces) pour plusieurs langages grâce à des extensions open source : Java, C#, C++, Python, PHP (extensions de la communauté), TypeScript…
Générer du PHP
La génération ne produit qu'un squelette : elle ne connaît pas la logique de tes méthodes. Elle est utile au démarrage du projet ; ensuite, le code évolue et le diagramme doit être mis à jour à la main ou par rétro-ingénierie (reverse engineering : générer le diagramme à partir du code, disponible pour certains langages). Un diagramme qui ne correspond plus au code est trompeur.
PlantUML est un outil gratuit et open source qui dessine des diagrammes UML à partir d'une description textuelle. On écrit le diagramme comme du code, PlantUML calcule la mise en page. On parle de diagrammes as code.
Reproduis dans StarUML (ou en PlantUML avec l'extension VS Code) les trois diagrammes de Kitab : cas d'utilisation (TP 2.5), classes (TP 3.5) et la séquence de la commande (TP 4.5). Enregistre le projet, exporte chaque diagramme en SVG, place-les dans ton dossier de conception, puis génère le squelette PHP des classes Livre, Commande et LigneCommande et compare-le à ton code du TP 3.5.
Ordonne les étapes pour obtenir une image du diagramme de classes de la commande : (a) régler les multiplicités dans l'éditeur de propriétés ; (b) File → Export Diagram As → SVG ; (c) ajouter les classes avec la boîte à outils ; (d) File → New ; (e) ajouter attributs et opérations par Quick Edit ; (f) tracer la composition entre Commande et LigneCommande ; (g) Format → Auto Layout.
Écris le code PlantUML du diagramme de classes suivant : une classe abstraite Vehicule (attribut protégé immatriculation : String, opération abstraite rouler() : void) ; deux sous-classes Voiture et Moto ; une interface Louable (opération tarifJournalier() : float) réalisée par Voiture ; une classe Agence qui possède (agrégation) de 0 à plusieurs véhicules ; une classe Location qui relie un Client (1) à une Voiture (1) et qui est composée de 1 à plusieurs Paiement.
Une classe abstraite se déclare en cochant isAbstract (le nom passe en italique) ; une interface se crée avec l'outil Interface (affichée en cercle ou en rectangle <<interface>>, au choix dans Format → Stereotype Display) ; un membre statique avec isStatic (souligné).
Ce que tu vas voir (11 min) : les chapitres « Le Mage ». Il construit le diagramme d'un premier acteur dans StarUML : cas d'utilisation, associations et relations, comme dans cette section.
Tous les diagrammes de ce cours ont été produits avec PlantUML. Voici les sources de trois d'entre eux.
@startuml
left to right direction
actor Internaute
actor "Service de paiement" as P <<système>>
rectangle "Librairie en ligne" {
usecase "Passer une commande" as A
usecase "S'authentifier" as C
}
Internaute -- A
A .> C : <<include>>
A -- P
@enduml@startuml
abstract class Utilisateur {
# nom : String
+ {abstract} role() : String
}
class Client
class Commande {
- date : Date
+ getTotal() : float
}
class LigneCommande {
- quantite : int
}
Client --|> Utilisateur
Client "1" -- "0..*" Commande : passe >
Commande *-- "1..*" LigneCommande
@enduml@startuml
actor Client
participant "Kitab" as K
Client -> K : payer()
activate K
alt paiement accepté
K --> Client : confirmation
else paiement refusé
K --> Client : message d'échec
end
deactivate K
@enduml