INSA - ASI

TechnoWeb : Rappels UML

1/21

Technologie Web
Conception de sites Web

Alexandre Pauchet
INSA Rouen - Dpartement ASI
BO.B.RC.18, pauchet@insa-rouen.fr

INSA - ASI

TechnoWeb : Rappels UML

2/21

Plan

Dmarche Cas dutilisation Navigation Interaction Modle objet Conclusion

INSA - ASI

TechnoWeb : Rappels UML

3/21

Dmarche
Besoin exprim

(1/4)

Rappel cycle en V du dveloppement logiciel

Logiciel recett

Spcication
Documents de Spcication (DSE, DSI)

Plan de Tests de Validation (PTV)

Validation

Architecture teste

Conception globale
Document de Conception Prliminaire (DCP)

Plan de Tests d'Intgration (PTI)

Intgration

Composants tests

Plan de Tests Unitaires (PTU)

Conception dtaille
Document de Conception Dtaille (DCD)

Tests unitaires
Composants dtermins

Codage

INSA - ASI

TechnoWeb : Rappels UML

4/21

Dmarche
Approche

(2/4)

Systme

Casd'utilisation

Diagrammesde squencesystme

classe1 methode()

classe2

Besoins utilisateurs

methode()

classe3 methode()

Modle dudomaine

Diagrammede classesparticipantes

Diagrammes d'interaction CODE

Maquette Diagrammedenavigation Diagrammesdeclasses

INSA - ASI

TechnoWeb : Rappels UML

5/21

Dmarche
Documentation

(3/4)

Spcications
Externes : formalisation du besoin, contractuel Internes : points non ncessaires au client (domaine de comptence) Artefacts UML : maquette, diagramme de navigation, cas dutilisation

Plan de tests de validation et Cahier de recette raliss // la spcication Conception Prliminaire : modle du domaine, diagramme de classes participantes, diagrammes de squences et dinteraction, diagramme de packages Plan de tests dintgration et Journal des tests dintgration raliss // la conception prliminaire Conception Dtaille : diagramme de classes, pseudo-code Plan de tests unitaires et Journal des tests unitaires raliss // la conception dtaille

INSA - ASI

TechnoWeb : Rappels UML

6/21

Dmarche

(4/4)

Approche simplie

Besoins utilisateurs Casd'utilisation Diagrammesdesquence

Maquette Diagrammesdeclasses

Diagrammesdecollaboration

CODE

Diagrammedenavigation

INSA - ASI

TechnoWeb : Rappels UML

7/21

Spcication des exigences (cas dutilisation)

Cas dtude

(1/5)

Librairie en ligne
Ex : www.amazon.fr, www.fnac.com, www.eyrolles.com, etc. Exigences fonctionnelles : recherche, prsentation douvrages, slection, commande Exigences non fonctionnelles : ergonomie, simplicit dutilisation, performance, etc. Contraintes de conception :
Mise jour des donnes de rfrence Mise jour depuis les formulaires du site Panier Paiement scuris

INSA - ASI

TechnoWeb : Rappels UML

8/21

Spcication des exigences (cas dutilisation)

Dmarche

(2/5)

Structuration en cas dutilisation

Casd'utilisation

Identier les acteurs Identier les cas dutilisation Structurer les cas dutilisation en package tudier les relations entre cas dutilisation Hirarchiser les cas dutilisation

INSA - ASI

TechnoWeb : Rappels UML

9/21

Spcication des exigences (cas dutilisation)

Exemple : cas dutilisation de linternaute
<<include>>

(3/5)

Gnralisation Inclusion Extension

Consulterses commandes encours Internaute

<<extends>>

Effectuerune rechercherapide Effectuerune commande

<<extends>>

Effectuerune rechercheavance Grerson panier

<<include>>

Consulter l'aideenligne

S'identifier

Rechercher desouvrages

Effectuerune rechercheparthme

Effectuerune recherchepar rubriqueditoriale

INSA - ASI

TechnoWeb : Rappels UML

10/21

Spcication des exigences (cas dutilisation)

Scenarios

(4/5)

Exemple : Eectuer une commande

Acteur principal : linternaute Objectifs : tout moment, le client doit pouvoir accder au formulaire du bon de commande, dans lequel il peut saisir ses coordonnes et les informations ncessaires au paiement et la livraison. Prconditions : Le panier nest pas vide et lInternaute a pu accder au formulaire de commande (cf. Grer son panier ). Postconditions : Une commande a t enregistre et transmise au service Commandes. Scnario nominal : 1. LInternaute saisit lensemble des informations ncessaires au paiement et la livraison : - son adresse email, - son adresse de facturation, - son adresse de livraison si elle est diffrente de son adresse de facturation, - son numro de carte de crdit. 2. Le Systme affiche un rcapitulatif de la commande. 3. Linternaute valide sa commande. 4. Le Systme envoie la commande valide au service Clients. 5. Le Systme confirme la prise de commande lInternaute. Extensions : 1a. LInternaute est dj client. 1. Linternaute sidentifie avec son e-mail et son mot de passe. 2. Le Systme affiche les donnes concernant lInternaute. 2a. Le Systme ne reconnat pas le client Le Systme prvient lInternaute du problme (retour en 1a.1). 1-3a. LInternaute annule sa commande. 1. Le Systme revient laffichage du panier (cas dutilisation termin). Exigences supplmentaires : Utilisation de SSL.

INSA - ASI

TechnoWeb : Rappels UML

11/21

Spcication des exigences (cas dutilisation)

Planication

(5/5)

Remarque importante
Scenarios diagrammes de squence systme

Packages
UC de linternaute UC des employs Acteurs UC secondaires

Classement des cas dutilisation

Cas dutilisation Rechercher des ouvrages Grer son panier Eectuer une commande Consulter ses commandes en cours Consulter laide en ligne Maintenir le catalogue Maintenir les informations ditoriales Maintenir le site Priorit Haute Haute Moyenne Basse Basse Haute Moyenne Moyenne Risque Moyen Bas Haut Moyen Bas Bas Bas Bas Itration 2 3 4 6 7 1 5 5

INSA - ASI

TechnoWeb : Rappels UML

12/21

Navigation
Approche

(1/2)

Approche

Maquette Diagrammedenavigation

Maquette
Dessins/canevas pouvant intgrer des fonctionnalits de navigation Vue concrte mais non dnitive de lIHM Support de discussion avec le client

INSA - ASI

TechnoWeb : Rappels UML

13/21

Navigation

(2/2)

Diagramme de navigation
<<page>> Nouveauts <<page>> Paged'accueil <<page>> Aide <<frame>> Rechercherapide <<page>> Rechercheavance
livretrouv? [oui]

<<page>> Meilleursventes

<<page>> ...

<<exception>> erreur
[non]

<<action>> Recherche

<<action>> Recalculer
[ilresteau moins1livre]

<<action>> Mettredanslepanier

<<frame>> Rsultatderecherche

<<action>> Classement
[plusieurspages]

<<page>> Panier

<<page>> Ficheclientremplie
[clientidentifi]

<<action>> Parcoursdespages

<<action>> tablirundevis

<<action>> Commander

<<action>> Modificationcompte

<<page>> Fichedtailled'ouvrage

<<page>> Ficheclientvide

<<action>> Saisirinfoscommande

<<page>> Fiched'auteurs
[Finnormaleavecachat]

<<frame>> Devis

<<page>> Fichedecommande

<<action>> Acheter

INSA - ASI

TechnoWeb : Rappels UML

14/21

Interaction
Approche

(1/3)

Diagrammes dinteraction
Diagrammes de squence Diagrammes de collaboration

Approche
Systme

Casd'utilisation (scnarios) Diagrammesdesquence

Systme

Systme

Diagrammesde squencesystme

Diagrammesdecollaboration

INSA - ASI

TechnoWeb : Rappels UML

15/21

Interaction

(2/3)

Diagramme de squence

Exemple : Recherche avance

Internaute RechercheAvance ContrleRecherche Catalogue tousles:Livre

chercher(phrase)

vrifierSyntaxeRecherche(phrase)

chercherLivres(phrase)

chercherLivresParAuteur(a) create

find()

rsultats:Livre
create(resultats)

rsultats

RsultatRecherche
pageSuivante()

pagePrcdente()

INSA - ASI

TechnoWeb : Rappels UML

16/21

Interaction

(3/3)

Diagramme de collaboration

Exemple : Recherche avance

1.1.vrifierSyntaxeRecherche(phrase) 1.rechercher(phrase) 1.2.chercherLivres(phrase)

RechercheAvance

1.2.1.chercherLivresParAuteur(a)

Internaute

ContrleRecherche
1.2.2.create(rsultats)

1.2.1.1.1.2rsultats

Catalogue
1.2.1.1.1.1.create

1.2.1.1.find() 1.2.1.1.1.

2.pageSuivante() 3.pagePrcdente()

RsultatRecherche tousles:Livre rsultats:Livre

INSA - ASI

TechnoWeb : Rappels UML

17/21

Modle objet
Rappel : MVC

(1/2)

MVC : Modle-Vue-Contrleur
observateur

Vue

servicesdemisejour

Notificationd'vnements demisejour+donnesmodifies

Contrleur

observable

Modle

servicesdumodle

Choix du paradigme
Au moment de lanalyse du problme (Cas dutilisation, modle du domaine, diagramme de navigation) 3 approches :
1 2 3

Fonctionnelle/Procdurale Objets Composants

INSA - ASI

TechnoWeb : Rappels UML

18/21

Modle objet

(2/2)

Diagramme de classes

Gestion du panier
Page total:real contenu PagePanier quantite[0...*]:integer=1 +afficher(idSession,code) +modifierQuantiteLigne(code,nombre) +supprimerLigne(code) +recalculer() +viderPanier() +demanderDevis() +commander() +verifierNombre():boolen +ajouterLigne(code,nombre=1) +modifierQuantiteLigne(code,nombre) +supprimerLigne(code) +viderPanier() Panier

PageResultatRecherche mettreDansPanier()
0...1

ErreurPanierVide messageErreur:string ...

1

Session id nom:string prenom:string email:string ...

INSA - ASI

TechnoWeb : Rappels UML

19/21

Conclusion

(1/3)

Limites du modle UML

Qualits
Simple Expressif Mthodologique

Limites
Ne reprsente pas les tats du systme Rapidement limit (gros systmes) Pas dinterconnexion de systmes Pas dynamique (Agents informatiques, composants, etc.) Pas de vrication

INSA - ASI

TechnoWeb : Rappels UML

20/21

Conclusion
Alternatives

(2/3)

p1 e1 t1 t3 t4 e3 p3 2 e2 t2 e4 t1

p2

Alternatives
Approche SMA Repsentation des interactions par automates/rseaux de Petri Vrication logique Contrainte : vnements discrets

INSA - ASI

TechnoWeb : Rappels UML

21/21

Conclusion
Rfrences

(3/3)

UML : Modliser un site e-commerce, Pascal Roques, Eyrolles. http://laurent-audibert.developpez.com/Cours-UML/html/ index.html http://www.coredump.fr.to/category/modelisation/uml/ http://uml.free.fr/