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.

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

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

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

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

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

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

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

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

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, ) 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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:

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

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

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

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

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

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.

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.

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.

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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