1. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 1 Informatics 43 Introduction to Software Engineering Lecture 7-2 May 14, 2015 Emily Navarro Duplication of course material for any commercial purpose without the explicit written permission of the professor is prohibited.

2. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 2 Announcement No discussion tomorrow

3. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 3 Today’s Lecture Design phase of software engineering Designs Abstraction Design notations / diagrams – UML diagrams – Other diagrams

4. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 4 Today’s Lecture Design phase of software engineering Designs Abstraction Design notations / diagrams – UML diagrams – Other diagrams

5. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 5 Design Phase of Software Engineering Something usually needs to be done after the user’s requirements are specified and before coding starts, especially on larger tasks. Software design is a creative activity in which the designer makes plans for – how the system will meet the requirements – in an efficient and effective way

6. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 6 Software Design Goals/Activities Making system-wide decisions – Architecture, languages, libraries, platforms Iteratively: – Studying and understanding the problem – Identifying possible solutions – Describing each abstraction used in the solution Modularizing the task so that multiple people can work on it Defining modules and their interfaces

7. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 7 Approaches to Software Design (Textbook) Software architecture Functional decomposition Relational database design Object-oriented design and UML User interface design

8. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 8 Functional Decomposition Identify tasks/functions, sub-tasks, sub-sub-tasks, etc. Decomposing tasks/functions/modules/system into smaller tasks/functions/modules May result in the same sub-sub-task appearing more than once in the tree. 0. ZotMyHealth 1. Login/Logout2. Calorie Intake3. Workouts4. Sleep5. User Settings 1.1 Login 2.2 Edit meal 2.3 Delete meal 3.1 Record workout 4.1 Import sleep cycle 5.1 Edit profile 5.2 Choose units 1.2 Logout 2.4 View calorie intake 3.2 Edit workout 4.2 Edit sleep cycle 5.3 Delete account 2.1 Record meal 3.3 Delete workout 3.4 View workouts 4.3 Delete sleep cycle 4.4 View sleep cycles

9. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 9 Relational Database Design Design tables where data is stored and relationships between them

10. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 10 Object-Oriented Design and UML An “object” contains both data (name, user ID, email) and methods (login, recordMeal, editWorkout, deleteAccount) A “class” is a blueprint for making objects that have the same kinds of data and the same methods

11. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 11 User Interface Design Flow of interactions, look and feel

12. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 12 Today’s Lecture Design phase of software engineering Designs Abstraction Design notations / diagrams – UML diagrams – Other diagrams

13. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 13 Designs

14. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 14 Designs

15. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 15 Designs

16. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 16 Designs

17. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 17 Designs

18. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 18 Designs

19. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 19 Designs

20. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 20 Designs

21. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 21 Purpose of designs Designs to think Designs to talk Designs to prescribe

22. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 22 Purpose of designs Designs to think Designs to talk Designs to prescribe Software designs are developed iteratively

23. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 23 Today’s lecture Design phase of software engineering Designs Abstraction Design notations / diagrams – UML diagrams – Other diagrams

24. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 24 Abstraction Abstractions are formed by reducing the information content of a concept or an observable phenomenon, typically to retain only information which is relevant for a particular purpose – what do I need to know – what do I not need to know Every design notation supports a certain kind of abstraction

25. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 25 Designs

26. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 26 Designs

27. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 27 Designs

28. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 28 Designs

29. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 29 Designs

30. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 30 Designs

31. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 31 Designs

32. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 32 Today’s lecture Design phase of software engineering Designs Abstraction Design notations / diagrams – UML diagrams – Other diagrams

33. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 33 Design Diagrams It is important to think of a diagram as being a statement in a language that has a syntax A diagram is a picture A diagram has to be interpreted AB

34. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 34 What might this mean? AB

35. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 35 What might this mean? A happens before B AB

36. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 36 What might this mean? A happens before B A uses B AB

37. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 37 What might this mean? A happens before B A uses B A calls B AB

38. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 38 What might this mean? A happens before B A uses B A calls B A is composed of B AB

39. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 39 What might this mean? A happens before B A uses B A calls B A is composed of B B is a result of A AB

40. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 40 What might this mean? A happens before B A uses B A calls B A is composed of B B is a result of A A becomes like B AB

41. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 41 What might this mean? A happens before B A uses B A calls B A is composed of B B is a result of A A becomes like B A is necessary for B AB

42. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 42 What might this mean? A happens before B A uses B A calls B A is composed of B B is a result of A A becomes like B A is necessary for B … AB

43. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 43 Software Development Languages Requirements Design Coding Testing English Diagrams/UML Java, Python Different languages are used at different stages:

44. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 44 Software Development Languages Requirements Design Coding Testing English Diagrams/UML Java, Python Different languages are used at different stages: Design notations

45. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 45 Today’s lecture Design phase of software engineering Designs Abstraction Design notations / diagrams – UML diagrams – Other diagrams

46. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 46 UML (Unified Modeling Language) Industry standard for software design/modeling A set of a dozen or so visual languages for specifying object- oriented systems Different types of UML diagrams are used to represent different aspects (structure, behavior, interactions) of a system – Class diagrams – Activity diagrams – Sequence diagrams – Use case diagrams – … Some following slides from www.cs.drexel.edu/~spiros/teaching/CS575/slides/uml.ppt

47. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 47 UML Class Diagrams Helps in the decomposition of a system into sub-modules known as classes UML class diagrams show the classes of the system, their inter-relationships, and the operations and attributes of the classes Typically used to – model domain concepts – create a detailed, object oriented design of the code

48. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 48 UML Class Diagrams Helps in the decomposition of a system into sub-modules known as classes UML class diagrams show the classes of the system, their inter-relationships, and the operations and attributes of the classes Typically used to – model domain concepts – create a detailed, object oriented design of the code UML Class Diagrams are the most common way to represent an object- oriented design

49. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 49 Classes ClassName attributes operations A class is a description of a set of objects that share the same attributes, operations, relationships, and semantics. Graphically, a class is rendered as a rectangle, usually including its name, attributes, and operations in separate, designated compartments.

50. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 50 Class Names ClassName attributes operations The name of the class is the only required tag in the graphical representation of a class. It always appears in the top-most compartment.

51. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 51 Class Attributes Person name : String address : Address birthdate : Date ssn : Id An attribute is a named property of a class that describes the object being modeled. In the class diagram, attributes appear in the second compartment just below the name-compartment. This rectangle says that there is a class called Person that could potentially have many instances, each with its own and name, address, etc. attributes.

52. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 52 Class Attributes (II) Person name : String address : Address birthdate : Date ssn : Id Attributes are usually listed in the form: attributeName : Type

53. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 53 Class Operations Person name : String address : Address birthdate : Date ssn : Id eat sleep work play Operations describe the class behavior and appear in the third compartment.

54. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 54 Depicting Classes Person name : String birthdate : Date ssn : Id eat() sleep() work() play() When drawing a class, you needn’t show attributes and operations in every diagram. Person name address birthdate Person eat play Person

55. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 55 Association Relationships If two classes in a model need to communicate with each other, there must be link between them. An association line denotes that link. Instructor Student

56. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 56 Association Relationships (II) We can constrain the association relationship by defining the navigability of the association. Here, a Router object requests services from a DNS object by sending messages to (invoking the operations of) the server. The direction of the association arrow indicates that the server has no knowledge of the Router. Router DomainNameServer

57. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 57 Examples – UML Class Diagrams

58. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 58 Examples – UML Class Diagrams

59. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 59 Examples – UML Class Diagrams

60. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 60 Examples – UML Class Diagrams

61. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 61 Examples – UML Activity Diagrams

62. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 62 Examples – UML Sequence Diagram

63. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 63 Examples – UML Sequence Diagrams

64. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 64 Examples – UML Sequence Diagrams

65. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 65 Examples - UML Use Case Diagrams

66. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 66 Examples - UML Use Case Diagrams

67. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 67 Examples - UML Use Case Diagrams

68. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 68 Today’s lecture Design phase of software engineering Designs Abstraction Design notations / diagrams – UML diagrams – Other diagrams

69. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 69 Examples – User Interfaces

70. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 70 Examples – User Interfaces

71. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 71 Examples – User Interfaces [balsamiq]

72. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 72 Examples – Pseudo Code

73. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 73 Examples – Entity Relationship Diagram

74. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 74 Examples – Entity Relationship Diagrams

75. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 75 Examples – Architecture Diagrams

76. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 76 Examples – Architecture Diagrams

77. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 77 Examples – Architecture Diagrams

78. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 78 Examples – Storyboard

79. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 79 Examples – Storyboard

80. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 80 Examples – Storyboard

81. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 81 Examples – Storyboard

82. Department of Informatics, UC Irvine SDCL Collaboration Laboratory Software Design and sdcl.ics.uci.edu 82 Examples – Storyboard