1. Progettazione di Applicazioni Web
corso del Master in Web Technology
a.a. 2017-2018
https://app.schoology.com/course/1511186315/
Henry Muccini
Università degli Studi dell’Aquila
7. Web Architecture Design with Sequence Diagrams

2. MWT– Progettazione di Applicazioni Web Henry Muccini
2
Copyright Notice
Il materiale riportato in queste slide puo’ essere
riutilizzato, parziale o totalmente, a patto che le fonti
e gli autori vengano citati
Henry Muccini

3. MWT– Progettazione di Applicazioni Web Henry Muccini
3
Progettazione
.web contents modeling [dati e contenuti]
.architecture modeling + tecnologies
.component diagrams
.sequence diagrams
.user centered design
.API description modeling
.design decisions
.UX modeling

4. Discussione Esempio
Prenotazione – parte II

5. MWT– Progettazione di Applicazioni Web Henry Muccini
5
Flaiano_Lucioli (voti: 2)
Scenari
1. l’utente scrive il tipo di lavorazione necessaria
2. la carrozzeria definisce il tempo di servizio
3. L’utente puo’ prenotare
4. Cancellazione: in qualsiasi momento
Scenario non app:
1. di persona
2. Associato ad un ID
App:
• Servizi base, lista prenotazione, cancellazione
• Nota: richieste diverse per servizi diversi.
• Nota: integrazione con sistemi esistenti
Costo:
• 15.000
• 30gg/40 gg (senza e con grafico dedicato)
• 2 persone in parallelo (full time)
Pitch
 Scalabilita’ e servizi

6. MWT– Progettazione di Applicazioni Web Henry Muccini
6
Critical Path, Contenuti, Architettura
SA:
 SA client-server: server, app mobile
 Php, Laravel, Ionic
Tool:
 Trello, slack, bitbucket
Critical Path:
 Divisione netta tra sviluppo server ed app, con punti di
sincronizzazione
 Documentazione preparata in digitale, in quanto in
distribuito
 Mettete in evidenza le attivita’ potenzialmente «critiche»

7. MWT– Progettazione di Applicazioni Web Henry Muccini
7

8. MWT– Progettazione di Applicazioni Web Henry Muccini
8
Corsetti_DiSilvio
Sistema di prenotazione unico
Selezione del tipo di servizio
Diff: mancanza di pre-prenotazione
Costi:
 96 gg (ma hanno linearizzato)
 Costi??
Pitch
• Prenotazione istantanea (senza pre-approvazione)
• Multi-piattaforma

9. MWT– Progettazione di Applicazioni Web Henry Muccini
9
Critical Path, Contenuti, Architettura
Path:Tempi rivalutati: 60 gg
10.000 euro di costo
Critical Path:
 I due team member lavorano in modo interscambiale,
con relativi pro e contro
 Manca informazione sui punti di sincronizzazione tra i
task
 Mettete in evidenza le attivita’ potenzialmente «critiche»
 Documentazione preparata in cartaceo, in quanto il team
e’ locale ed i team member lavorano insieme
Architettura: UI (web ed app), Server, external system, DB

10. MWT– Progettazione di Applicazioni Web Henry Muccini
10

11. MWT– Progettazione di Applicazioni Web Henry Muccini
11

12. MWT– Progettazione di Applicazioni Web Henry Muccini
12
De Toma_Filippone (voti: 5)
Logica come Corsetti_DiSilvio
Diff: Applicazione Web (per non installare nulla)
• Notifiche via email
Costi:
• 30 gg totali con consegna dopo due settimane
• 8.000
Pitch
• Tempi di sviluppo
• Semplicita’ d’uso

13. MWT– Progettazione di Applicazioni Web Henry Muccini
13
Critical Path, Contenuti, Architettura
Critital Path:
 5 attivita’ principali
 Identificazione dei giorni di sviluppo
 Nota: fornire subito al cliente qualcosa concreto da
valutare
SA: disegno

14. MWT– Progettazione di Applicazioni Web Henry Muccini
14
Berardi_Felipe_MastroGiuseppe
Soluzione mista, rispetto alle altre
• No mobile – solo web
• Servizio SMS ed email
• No login
• Pre-prenotazione automatico
• Stima tempi di servizio carrozzeria e vendita
Esposizione troppo lenta
Servizi esterni:
• SMS
• Hosting
• Internet
• Grafico
Costi ??
Pitch
• Usabilita’
• Efficienza

15. MWT– Progettazione di Applicazioni Web Henry Muccini
15
Critical Path, Contenuti, Architettura
SA
 Client-server
 Gestione SMS
Costi/tempo:
 25 gg
 7000 euro
Gestione dei Ritardi
 Logica molto/troppo elaborata per un sistema del genere

16. MWT– Progettazione di Applicazioni Web Henry Muccini
16

17. MWT– Progettazione di Applicazioni Web Henry Muccini
17
Nespoli (voti: 1)
Elementi salienti:
 Sito Web
 Servizio base
 Email ed SMS
 Costi:
 40+5 gg
 Diff: 45 euro/mese
 2.200 euro + 200 annui di manutenzione
 Servizi Avanzati
 App
 Suggerimento orari e giorni
 Riaccompagnamento a casa, auto sostitutiva
Vincoli cliente
 Sistema informatico adeguato, etc etc
Pitch:
• Semplicita’
• Cio’ che realmente serve

18. Sequence Diagrams

19. MWT– Progettazione di Applicazioni Web Henry Muccini
19
Sequence Diagram
Enfatizza l’ordine temporale dei messaggi, cioè come i
messaggi sono inviati e ricevuti tra gli oggetti durante
il tempo
Particolarmente adatto per la modellazione di sistemi
real-time e per la descrizione del flusso di eventi degli
use case

20. MWT– Progettazione di Applicazioni Web Henry Muccini
20
Messaggi
Sono presenti in tutti i diagrammi dinamici (sequence,
collaboration, state e activity)
Rappresentano la comunicazione tra oggetti
Sono rappresentati tramite una linea con una freccia
che va dall’oggetto che invia il messaggio (sender)
all’oggetto che lo riceve (receiver)
Differenti tipi di freccia indicano differenti tipi di
messaggi

21. MWT– Progettazione di Applicazioni Web Henry Muccini
21
Tipi messaggi
Linea continua con freccia chiusa piena
 Indica una chiamata di un’operazione o di un altro flusso di controllo
annidato
 Se c’è un flusso di controllo annidato, il controllo passa al chiamante
dopo che è terminata l’esecuzione del flusso annidato (chiamata
sincrona)
Linea continua con Freccia aperta
 Indica una comunicazione asincrona, non c’è flusso di controllo
annidato
 Sender invia lo stimolo e continua immediatamente con il prossimo
passo nell’esecuzione
Linea tratteggiata con Freccia aperta
 Indica il ritorno da una chiamata di un’operazione
 Può essere omessa
In UML 2.0 sono stati introdotti altri tipi di
messaggi, descritti nel seguito

22. MWT– Progettazione di Applicazioni Web Henry Muccini
22

23. MWT– Progettazione di Applicazioni Web Henry Muccini
23

24. MWT– Progettazione di Applicazioni Web Henry Muccini
24
Combined Fragment (CF)
Questo concetto permette di suddividere un
Sequence Diagram in piu’ “frammenti” e di combinare
tali frammenti, seguendo diverse regole
Alcuni operatori (gli “InteractionOperator”)
definiscono come tali frammenti possono essere
combinati insieme
Nel seguito, descriviamo tali operatori

25. MWT– Progettazione di Applicazioni Web Henry Muccini
25

26. MWT– Progettazione di Applicazioni Web Henry Muccini
26
CF “Alternatives”
Operatore: Alt
Significato:
– rappresenta una scelta
– Solo una alternativa puo’ essere selezionata
– Uso di “guardie”

27. MWT– Progettazione di Applicazioni Web Henry Muccini
27
Alternatives

28. MWT– Progettazione di Applicazioni Web Henry Muccini
28
CF “Option”
Operatore: Opt
Significato:
– Questa frammento e’ opzionale (nulla o tutto)

29. MWT– Progettazione di Applicazioni Web Henry Muccini
29
CF “Parallel”
» Operatore: par
» Significato:
> I vari frammenti possono
essere interleaved
> l’ordine imposto da
ciascun frammento deve
pero’ essere rispettato

30. MWT– Progettazione di Applicazioni Web Henry Muccini
30
CF “Weak Sequencing”
Operatore: seq
Significato:
– rappresenta una variazione al “par” dove:
• L’ordine di esecuzione degli eventi in ciascun frammento viene
preservato
• eventi in frammenti diversi e lifeline diverse, possono occorrere in
qualsiasi ordine
• eventi in frammenti diversi e stessa lifeline sono ordinati in
modo tale da preservare l’ordine
• Fare esempio

31. MWT– Progettazione di Applicazioni Web Henry Muccini
31
seq

32. MWT– Progettazione di Applicazioni Web Henry Muccini
32
CF “Negative”
Operatore: neg
Significato:
– rappresenta delle tracce da considerare invalide
– Esempio

33. MWT– Progettazione di Applicazioni Web Henry Muccini
33
CF “Critical Region”
Operatore: critical
Significato:
– rappresenta una “regione critica”
– le tracce all’interno della regione critica non possono
essere interleaved
– la regione e’ trattata atomicamente

34. MWT– Progettazione di Applicazioni Web Henry Muccini
34
Critical Region

35. MWT– Progettazione di Applicazioni Web Henry Muccini
38
CF “Loop”
Operatore: loop
Significato:
– il frammento deve essere ripetuto piu’ volte
– una guardia o una espressione booleana esprimono il
numero di ripetizioni

36. MWT– Progettazione di Applicazioni Web Henry Muccini
39
Interaction Occurence
» Operatore: ref
» Significato:
> permette di richiamare,
all’interno di un SD, altri SD
> permette una maggior
separation of concern,
lasciando all’esterno del SD
quella porzione utilizzata in
piu’ SD

37. MWT– Progettazione di Applicazioni Web Henry Muccini
41
Stato
Ad un lifeline, puo’ essere associato uno “stato”
Lo stato viene valutato:
– Se e’ verificato, allora
possiamo continuare
ad eseguire il SD
– altrimenti, il SD non
puo’ essere verificato.

38. MWT– Progettazione di Applicazioni Web Henry Muccini
42
Transition Time
Viene utilizzato per esprimere vincoli temporali
sul tempo di esecuzione dei messaggi
Espresso tramite constraints
In genere si trovano alla sinistra dei messaggi

39. MWT– Progettazione di Applicazioni Web Henry Muccini
43
SD con concetti di timing

40. Design Decisions

41. MWT– Progettazione di Applicazioni Web Henry Muccini
45

42. MWT– Progettazione di Applicazioni Web Henry Muccini
46
Giorno 2: Diverge (conflicting ideas)
Our goal is to explore as many possibilities as
possible, regardless of how realistic, feasible or viable
they may or may not be. From this explosion of
opportunity comes insights made when considering
the implications of radically different perspectives on
and approaches to solving a problem. These insights
can become valuable differentiating forces and the
source of unique solution inspiration. Also, once we
begin eliminating as many of these options as
possible we are given reason to be more confident in
the options we do move forward with because we
have explored so many alternatives.

43. MWT– Progettazione di Applicazioni Web Henry Muccini
47
From The product design sprint: diverge (day 2)
1.Hand out blank sheets of paper and Sharpies to all participants.
2.Set the timer for 10 minutes.
3.Have everyone write down or draw everything in that they are
thinking about. Keep the format free so that people feel comfortable to
explore any and all ideas.

44. MWT– Progettazione di Applicazioni Web Henry Muccini
48
Picture taken from http://apprentiperpetuel.blogspot.com.au/

45. MWT– Progettazione di Applicazioni Web Henry Muccini
49
Taking (design) decisions
Design
problem
sub-
problem
(or issue)
sub-
problem
(or issue)
Design
option
Design
option
Design
option
Design
option
Problem
space
Solution
space
Alternative
solutions
Alternative
solutions
Decision =
best option
Decision =
best option
Best, with
respect to
some criterion

46. MWT– Progettazione di Applicazioni Web Henry Muccini
50
Design space
The space of possible designs that could be achieved
by choosing different sets of alternatives.
thin-client
rich-client
web browser
based
custom client
program
client
style
fat-client
layered
peer-to-peer
architecture
style
client-server
peer clients
structured p2p
unstructured p2p
hybrid p2p
tiered
...

47. MWT– Progettazione di Applicazioni Web Henry Muccini
51
3 main components
1- a design issue/problem to solve
2- a list of alternative solutions
3- a list of concerns to be maximized

48. MWT– Progettazione di Applicazioni Web Henry Muccini
52
QOC notation
QOC3 Which technology should be used by the user
to communicate locally with the devices which are
located at home?

49. MWT– Progettazione di Applicazioni Web Henry Muccini
53
QOC Template (Open the Excel File)

50. MWT– Progettazione di Applicazioni Web Henry Muccini
54
ADD challenges
Dependencies among decisions
Granularity of design decisions
Collaborative ADD
Evolving ADD

51. MWT– Progettazione di Applicazioni Web Henry Muccini
55
DI1. How many
gateways can we
place?
Single Gateway
1 Gateway per
floor
1 Gateway per
apartment
CostReliability
Availability
DI2. how the
sensors are
connected?
Wired
Wireless Wi-
Fi
Wireless
ZigBee
Installation
Performance
Availability
Which device can
the Firefighter
Use?
Wearable sensor
Mobile-Wi-Fi
Enables decision
Best way to get a
city map for the
truck manager
Online map
Local offline GPS
device
Enables decision
Reliability
Performance
Availability
DI3.How should
data be
broadcasted
Using gateways
Directly through
sensors
Cost
Reliability
Availability
Enables question
Dependencies…

52. MWT– Progettazione di Applicazioni Web Henry Muccini
56
Dependencies…
Are of various types:
• Excludes
• Requires
• Depends On
• Subsumes
• Enables
• …
Con#1: Which kind of technology is used for node-to-node
communication?
 Con#1-Opt#1 : Bluetooth
 Con#1-Opt#2 : Wi-Fi
 Con#1-Opt#3: Zigbee
Con#5: How the WSN infrastructure shall communicate with the trucks and central station?
 Con#5-Opt#1 – 3G
 Con#5-Opt#2 – GPRS
 Con#5-Opt#3 – Wi-Fi

53. MWT– Progettazione di Applicazioni Web Henry Muccini
57
Granularity…
ADD Question:
 How the FireFighter system components shall
communicate?
 Which entities shall go in the DB?

54. MWT– Progettazione di Applicazioni Web Henry Muccini
58
Collaborative Decision Making