Chap 5: Modélisation

d’applications web

1
Résumé de la leçon précédente
 Introduction à IB
 Bases de IB
 Spécification des besoins

 Processus IB

 IB spécifiques à l'ingénierie web

2
Plan
 Modélisation du système
 Modélisation des besoins

3
Modélisation du Système
 Processus de développement des modèles
abstraits d'un système
 Représenter le système à l'aide des notations
graphiques
 UML

4
Modélisation du Système
 chaque modèle présente une vue différente ou
une perspective du système:
 Perspective externe: contexte du système et son
environnement
 perspective d'interaction: comment le système
interagit avec son environnement
 perspective structurelle: comment le système est
organisé
 perspective comportementale: le comportement
dynamique du système

5
Modélisation du Système…
 Les modèles sont utilisés pendant:
 la phase IB pour dériver la Configuration réquise du
système
 diagramme de cas d’utilisation, diagramme d'activité
 la phase de conception pour décrire le système aux
ingénieurs
 diagrammes de classe, diagrammes de séquence, etc.
 après implémentation
 Pour documenter la structure et les opérations du système

6
Modélisation du Système…
 Pourquoi la modélisation d’un système?
 réduire sa complexité
 Obtenir un document présentant les décisions de
conception
 faciliter la communication entre les membres de
l'équipe

7
Modélisation du Système…
niveaux dimensions de Modélisation:
Interface utilisateur

Logique Application

phases
Structure analyse implémentation
Conception

Comportement

Aspects

 Niveaux - le « comment » et « quoi » d'une application

 Aspects - objets, attributs et relations; fonction et processus
 Phases - Cycle de développement

8
Modélisation du Système…
 Le "Unified Modeling Language” est un langage
visuel pour spécifier et documenter les artefacts
des systèmes
 Structure : Les diagrammes de classes
 Comportement : les diagrammes de cas d’utilisation,
des diagrammes d'état

9
Modélisation du Système…
niveaux
Présentation
Hypertext
personnalisation
Contenu

phases
Structure analyse Conception Implémentaion

Comportement

Aspects
 Niveaux - Information, noeud / structure de lien, mise en page IU.
 Aspects - même que les applications logicielles
 Phases - Approche dépend de type d'application
 Personnalisation - Informations contextuelles (les préférences de l'utilisateur,
la restriction de bande passante, etc. dispositif caractéristique) et permet
d'adopter l'application Web en conséquence 10
 Influence les trois autres dimensions
Modélisation du Système…
 Modélisation des besoins
 diagramme de cas d’utilisation
 Diagramme d’activité

 modélisation du contenu
 diagramme de classe

 modélisation de navigation
 Pour modéliser les noeuds et la structure de
navigation parmi ces noeuds
 modélisation de présentation
 Modélisation de l’interface utilisateur, mise en forme
des pages 11
Modélisation du Système…
 Pour faire une modélisation centrée sur le Web,
UML est utilisé avec des extensions tirées du modèle
UWE (UML-based web engineering)
 http://uwe.pst.ifi.lmu.de/
 UWE est une méthode d'ingénierie Web pour la POO
(Programmation orientée objet) basée
sur UML(Langage de Modélisation Unifié), elle est
utilisée pour les spécifications des applications Web
 UWE est une extension de UML, les diagrammes
reposent directement sur une approche UML
(diagrammes de cas d'utilisation, d'activités et de
12
classe).
 Modélisation de besoins
 Diagramme de Cas d'utilisation : L'objectif du
diagramme est de fournir une explication de haut
niveau de la relation entre le système et le monde
extérieur (objectifs fixés)
 Diagramme d'activité: une représentation graphique
des flux des activités et des actions par étapes avec
le support de choix, itération et concurrence

13
Diagramme de cas d’utilisation
 Composants: Nom du système
 le système

 le cas d'utilisation tâche appelée cas d'utilisation

qui représente une caractéristique nécessaire
dans un logiciel / fonctionnalité

Titre de cas
d'utilisation 14
Diagramme de cas d’utilisation
 Composants:
 les acteurs qui déclenchent le cas
d'utilisation
<< acteur >>
système

 la communication ligne pour montrer

comment les acteurs communiquent avec le
Cas d’utilisation 15
Diagramme de cas d’utilisation…

 larelation include représente l'inclusion de la

fonctionnalité d'un cas d'utilisation dans une
autre
<< include >>
cas d'utilisation cas d'utilisation
inclus debase

 larelation extend représente l'extension du cas

d'utilisation pour inclure des fonctionnalités en
option
<< extend >>
Cas d'utilisation de cas d'utilisation étendu
Base 16
 Diagramme de cas d’utilisation…
 casd'utilisation généralisation est une relation
d'un cas d'utilisation enfant à un cas d'utilisation
parent, en précisant comment un enfant peut
spécialiser tous les comportements et les
caractéristiques décrites pour le parent
Généralisé

Spécialisé utilisateur Utilisateur

17
enregistré
Diagramme de cas d’utilisation…

 Besoins spécifiques aux applications web:

 Besoin de faire la distinction entre les cas
d'utilisation fonctionnelle et de navigation
 UWE fournit le stéréotype << navigation >> pour
représenter un cas d'utilisation navigation tandis que
<< traitement >> pour représenter un cas d'utilisation
fonctionnelle

18
Diagramme de cas d’utilisation…

 Considérons un système de partage de vidéo en

ligne (exemple : youtube) :
 Les utilisateurs peuvent rechercher et visionner les
vidéos
 Un utilisateur doit être un utilisateur enregistré pour
partager des vidéos

Stéréotype UWE

19
 Diagramme de cas d’utilisation…

système de partage de vidéos en ligne

<< navigation >>

Rechercher une vidéo
utilisateur

<< navigation >>

Regarder une vidéo

<< traitement >>

S’enregistrer
<<extend >>
Utilisateur enregistré << navigation >> << traitement >>
partager une vidéo
s'identifier
<< include >>
20
Processus métiers : Activity Diagrams

2
5
P RINCIPES DES DIAGRAMMES
D ’ ACTIVITÉS
•Diagramme d’activité utile pour la représentation des
processus métiers et des cas d’utilisation.
•Les diagrammes d'activités
•permettent de mettre l'accent sur les traitements.
•sont adaptés à la modélisation du cheminement de flots
de contrôle et de flots de données.
•permettent de représenter graphiquement le
comportement d'une méthode ou le déroulement d'un cas
d'utilisation.!

26
Diagramme d'activité
 Les éléments d'un diagramme d'activité:
 Une activité est une étape dans un processus où un
travail est fait
activité

 Une transition a lieu parce que l'activité est terminé

Exemple :
Lire une page Tourne la page
21
 A CTIVITÉ ET T RANSITION
•Action ( plus petit traitement qui puisse être exprimé en UML)
•Action appeler ( call operation )
•Action comportement ( call behavior )
•Action envoyer ( send )
•Action accepter événement ( accept event )
•Action accepter appel ( accept call )
•Action répondre ( reply )
•Action créer ( create )
•Action détruire ( destroy )
•Action lever exception ( raise exception )

• Activité (activity)
• définit un comportement décrit par un séquencement organisé
d'unités dont les éléments simples sont les actions.
• Le flot de contrôle reste dans l'activité jusqu'à ce que les
traitements soient terminés. 28
• peut être associée à des paramètres.
N ŒUD D ' ACTIVITÉ
• le nœud d’action unité fondamentale de
fonctionnalité exécutable dans une activité
• un nœud objet représente l'existence d'un objet
généré par une action dans une activité et utilisé
par d'autres actions
• un nœud de décision ou de fusion permet de
faire un choix entre plusieurs flots sortants
• un nœud de bifurcation ou d'union sépare un
flot en plusieurs flots concurrents
• un nœud initial nœud de contrôle à partir duquel
le flot débute
• un nœud final n'a aucune incidence sur les autres
flots actifs de l'activité enveloppante.
• nœud final de flot est un nœud de contrôle
possédant un ou plusieurs arcs entrants et aucun
arc sortant
• Pin d'entrée ou de sortie spécifient les valeurs
29
passées en argument à une activité et les valeurs
de retour
T RANSITION

• Transition
• Matérialise le passage d'une activité vers une autre
• déclenchée dès que l'activité source est terminée
• provoque automatiquement et immédiatement le
début de la prochaine activité à déclencher

30
Diagramme d'activité…
Exemple de diagramme d’activité

remplissage du formulaire
d'inscription par
l'utilisateur

L'utilisateur sélectionne L'utilisateur

le bouton d'envoi corrige l'entrée

Non Le Système affiche un

Correct ?
message d'erreur

L'utilisateur est 40
enregistré
 Diagramme d'activité…
 éléments du diagramme d'activité: UWE
 userAction : L'action de l'utilisateur ou une réponse
 systemAction : L'action du système
 displayAction : Action d'affichage
 navigationAction : la navigation
 displayPin : sortie
 interactionPin : contribution

41
Diagramme d'activité…

43
Résumé
 Modélisation du système
 Modélisation de besoin
 diagramme de cas d'utilisation
 Diagramme d’activité

44
Exercice
 Pour une application de vente en ligne, faire les
diagrammes suivants:
 Diagramme de cas d’utilisation
 Diagramme d’activité

45