Download pdf - Conception Site Web

INSA - ASI TechnoWeb : Rappels UML 1/21

Technologie WebConception de sites Web

Alexandre Pauchet

INSA Rouen - Département ASI

BO.B.RC.18, [email protected]


Plan

1 Démarche

2 Cas d’utilisation

3 Navigation

4 Interaction

5 Modèle objet

6 Conclusion


Démarche (1/4)Rappel cycle en V du développement logiciel

Codage

Conceptiondétaillée

Testsunitaires

Document deConceptionDétaillée (DCD)

Composants déterminés

Document deConceptionPréliminaire (DCP)

Composantstestés

Conceptionglobale

Intégration

Spécification Validation

Logiciel recetté

Besoinexprimé

Documents deSpécification (DSE, DSI)

Architecture testée

Plan de Tests d'Intégration (PTI)

Plan de Tests de Validation (PTV)

Plan de Tests Unitaires (PTU)


Démarche (2/4)Approche

Besoinsutilisateurs

Cas d'utilisation

Système

Diagrammes deséquence système

Modèledu domaine

classe1methode()

classe2methode()

classe3methode()

Diagramme de classes participantes

Diagrammes d'interaction

MaquetteDiagramme de navigation Diagrammes de classes

CODE


Démarche (3/4)Documentation

SpécificationsExternes : formalisation du besoin, contractuelInternes : points non nécessaires au client (domaine de compétence)Artefacts UML : maquette, diagramme de navigation, cas d’utilisation

Plan de tests de validation et Cahier de recette réalisés // à laspécificationConception Préliminaire : modèle du domaine, diagramme de classesparticipantes, diagrammes de séquences et d’interaction, diagrammede packagesPlan de tests d’intégration et Journal des tests d’intégration réalisés// à la conception préliminaireConception Détaillée : diagramme de classes, pseudo-codePlan de tests unitaires et Journal des tests unitaires réalisés // à laconception détaillée


Démarche (4/4)Approche simplifiée

Besoinsutilisateurs

Cas d'utilisation

Maquette

Diagramme de navigation

Diagrammes de classes

CODE

Diagrammes de séquence

Diagrammes de collaboration


Spécification des exigences (cas d’utilisation) (1/5)Cas d’étude

Librairie en ligneEx : www.amazon.fr, www.fnac.com, www.eyrolles.com, etc.Exigences fonctionnelles : recherche, présentation d’ouvrages,sélection, commandeExigences non fonctionnelles : ergonomie, simplicité d’utilisation,performance, etc.Contraintes de conception :

Mise à jour des données de référenceMise à jour depuis les formulaires du sitePanierPaiement sécurisé

www.amazon.fr

www.fnac.com

www.eyrolles.com


Spécification des exigences (cas d’utilisation) (2/5)Démarche

Structuration en cas d’utilisation

Cas d'utilisation

Identifier les acteursIdentifier les cas d’utilisationStructurer les cas d’utilisation en packageÉtudier les relations entre cas d’utilisationHiérarchiser les cas d’utilisation


Spécification des exigences (cas d’utilisation) (3/5)Exemple : cas d’utilisation de l’internaute

Consulter l'aide en ligne

Effectuer une commande

Gérer son panier

Rechercher des ouvrages

Consulter ses commandes

en cours

Internaute

<< extends >>

Effectuer une recherche rapide

Effectuer une recherche avancée

Effectuer une recherche par thème

Effectuer une recherche par

rubrique éditoriale

Généralisation

S'identifier

<< include >>

<< include >>

<< extends >>

Inclusion

Extension


Spécification des exigences (cas d’utilisation) (4/5)Scenarios

Exemple : “Effectuer une commande”Acteur principal : l’internauteObjectifs : À tout moment, le client doit pouvoir accéder au formulaire du bon de commande, dans lequel il peutsaisir ses coordonnées et les informations nécessaires au paiement et à la livraison.Préconditions : Le panier n’est pas vide et l’Internaute a pu accéder au formulaire de commande (cf. Gérer sonpanier).Postconditions : Une commande a été enregistrée et transmise au service Commandes.Scénario nominal :

1. L’Internaute saisit l’ensemble des informations nécessaires au paiement et à la livraison :- son adresse email,- son adresse de facturation,- son adresse de livraison si elle est différente de son adresse de facturation,- son numéro de carte de crédit.

2. Le Système affiche un récapitulatif de la commande.3. L’internaute valide sa commande.4. Le Système envoie la commande validée au service Clients.5. Le Système confirme la prise de commande à l’Internaute.

Extensions :1a. L’Internaute est déjà client.

1. L’internaute s’identifie avec son e-mail et son mot de passe.2. Le Système affiche les données concernant l’Internaute.

2a. Le Système ne reconnaît pas le clientLe Système prévient l’Internaute du problème (retour en 1a.1).

1-3a. L’Internaute annule sa commande.1. Le Système revient à l’affichage du panier (cas d’utilisation terminé).

Exigences supplémentaires : Utilisation de SSL.


Spécification des exigences (cas d’utilisation) (5/5)Planification

Remarque importanteScenarios −→ diagrammes de séquence système

PackagesUC de l’internaute

UC des employés

Acteurs

UC secondaires

Classement des cas d’utilisationCas d’utilisation Priorité Risque ItérationRechercher des ouvrages Haute Moyen 2Gérer son panier Haute Bas 3Effectuer une commande Moyenne Haut 4Consulter ses commandes en cours Basse Moyen 6Consulter l’aide en ligne Basse Bas 7Maintenir le catalogue Haute Bas 1Maintenir les informations éditoriales Moyenne Bas 5Maintenir le site Moyenne Bas 5


Navigation (1/2)Approche

Approche

Maquette

Diagramme de navigation

MaquetteDessins/canevas pouvant intégrer des fonctionnalités de navigationVue concrète mais non définitive de l’IHMSupport de discussion avec le client


Navigation (2/2)Diagramme de navigation

<<page>>Nouveautés

<<page>>Meilleurs ventes

<<page>>...

<<page>>Aide

<<page>>Page d'accueil

<<page>>Recherche avancée

<<action>>Mettre dans le panier

<<action>>Recherche

<<action>>Recalculer

<<frame>>Recherche rapide

<<frame>>Résultat de recherche

<<action>>Classement

<<page>>Fiche d'auteurs

<<page>>Panier

<<page>>Fiche détaillée d'ouvrage

<<action>>Parcours des pages

<<action>>Établir un devis

<<frame>>Devis

<<action>>Commander

<<page>>Fiche client vide

<<action>>Saisir infos commande

<<page>>Fiche de commande

<<action>>Acheter

<<page>>Fiche client remplie

<<action>>Modification compte

[il reste au moins 1 livre] [plusieurs pages]

[Fin normale avec achat]

[client identifié]

livre trouvé ?[non]

[oui]

<<exception>>erreur


Interaction (1/3)Approche

Diagrammes d’interactionDiagrammes de séquenceDiagrammes de collaboration

Approche

Système

Diagrammes de séquence

Système

Diagrammes de collaboration

Système

Diagrammes deséquence système

Cas d'utilisation(scénarios)


Interaction (2/3)Diagramme de séquence

Exemple : Recherche avancée

Internaute RechercheAvancée

pageSuivante()

vérifierSyntaxeRecherche(phrase)

ContrôleRecherche

chercherLivres(phrase)

Catalogue

chercherLivresParAuteur(a)

tous les : Livre

find()

résultats : Livre

create

RésultatRecherche

create(resultats)

pagePrécédente()

résultats

chercher(phrase)


Interaction (3/3)Diagramme de collaboration

Exemple : Recherche avancée

Internaute

RechercheAvancée

ContrôleRecherche Catalogue

tous les : Livre résultats : Livre

RésultatRecherche

1. rechercher(phrase)

1.1. vérifierSyntaxeRecherche(phrase)

2. pageSuivante()3. pagePrécédente()

1.2.2. create(résultats)

1.2. chercherLivres(phrase)

1.2.1. chercherLivresParAuteur(a)

1.2.1.1.1.2 résultats

1.2.1.1.1.1. create1.2.1.1. find()

1.2.1.1.1.


Modèle objet (1/2)Rappel : MVC

MVC : Modèle-Vue-Contrôleur

Vue

Contrôleur

Modèle

Notification d'évènements de mise à jour + données modifiées

observateur

observable

services de mise à jour

services du modèle

Choix du paradigmeAu moment de l’analyse du problème (Cas d’utilisation, modèle dudomaine, diagramme de navigation)3 approches :

1 Fonctionnelle/Procédurale2 Objets3 Composants


Modèle objet (2/2)Diagramme de classes

Gestion du panier

PageResultatRecherche

mettreDansPanier()

PagePanier

quantite [0...*] : integer=1

+ afficher(idSession, code)+ modifierQuantiteLigne(code, nombre)+ supprimerLigne(code)+ recalculer()+ viderPanier()+ demanderDevis()+ commander()+ verifierNombre() : booléen

Panier

total : real contenu

+ ajouterLigne(code, nombre=1)+ modifierQuantiteLigne(code, nombre)+ supprimerLigne(code)+ viderPanier()

Page

ErreurPanierVide

messageErreur : string

...

Session

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

1 1

1

0...1


Conclusion (1/3)Limites du modèle UML

Qualités“Simple”ExpressifMéthodologique

LimitesNe représente pas les états du systèmeRapidement limité (gros systèmes)Pas d’interconnexion de systèmesPas dynamique (Agents informatiques, composants, etc.)Pas de vérification


Conclusion (2/3)Alternatives

e1 e2

e3

t1

t3t4

e4t2

2

p1 p2

p3

t1

AlternativesApproche SMARepésentation des interactions par automates/réseaux de PetriVérification logique

Contrainte : évènements discrets


Conclusion (3/3)Références

“UML : Modéliser 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/

http://laurent-audibert.developpez.com/Cours-UML/html/index.html

http://laurent-audibert.developpez.com/Cours-UML/html/index.html

http://www.coredump.fr.to/category/modelisation/uml/

http://uml.free.fr/