TSE2101 Software Engineering Fundamentals

Tutor’s Guide 8
Part A: Discussion
Topic (Lecture 8): WebApp and MobileApp Design

Allocate about 5 - 10 minutes for each question. Let the students work in groups of 3 or
4 to discuss with each other their answers. They can refer to the textbook if they want, or
search for their answers. They can submit their answers in Google classroom assignment.

1. Discuss the need to design Web applications. When is it necessary to design them?
Solution:
● when content and function are complex
● when the size of the WebApp encompasses hundreds of content objects, functions,
and analysis classes
● when the success of the WebApp will have a direct impact on the success of the
business

2. For the end-users, what are the important quality dimensions of Web applications?
Solution:
● Time – changes to the Web site at different times
● Structural – organization and connections of the parts in the Web site
● Content – quality of the contents
● Accuracy and Consistency – accuracy and consistency of data/contents
● Response Time and Latency – timely responses to requests
● Performance – Web site connection and performance variations at different times of
the day

3. Describe each level of the WebE Design Pyramid.

Solution:
● Interface design – design of the Web pages
● Aesthetic design – aesthetic considerations for the Web site
● Content design – design of content objects
● Navigation design – design of the navigation throughout the Web site
● Architecture design – structural representation of the Web application
● Component design – processing requirements of the Web application

4. What are the important considerations in the development of mobile applications?

Solution:
Refer to lecture slides:
● Multiple hardware and software platforms
● Many development frameworks and programming languages.
● Many app stores with differing acceptance rules and tool requirements
● Short development cycles
● User interface limitations

TSE2101 Trimester 1, 2023/2024 Page 1

● Complex camera/sensor interaction
● Effective use of context
● Power management
● Security and privacy models/policies
● Device limitations (computation and storage)
● Integration of external services
● Texting complexities

5. Discuss the typical mistakes in mobile application development and suggest some
approaches to address them.
Solution:
Some of the typical mistakes:
● Kitchen sink – trying to do too much; determine the important and relevant functions
first
● Inconsistency – interfaces and items designed inconsistently; use standard interfaces
and maintain consistency in the application flow
● Overdesigning – complexity in the design; simplify the design, reduce complexity
● Lack of speed – too much processing by the application; assess the processing
requirements and improve/optimize the efficiency of algorithms
● Verbiage – too much textual contents; simplify the descriptions, display only the
necessary info
● Non-standard interaction – interaction items that are not conventional; use common
interaction items
● Help-and –FAQ-itis – lack of Help and FAQ; put some Help or FAQ to assist the
users on major functions

Part B: Tutorial Activity

Topic: Component-Level Design

Allocate about 10 - 15 minutes for each question. Let the students work in groups of 3 or
4 to discuss with each other their answers. They can submit their answers in Google
classroom assignment.

Activity 1 – Cohesion

▪ Within the context of component-level design for object-oriented systems,

cohesion implies that a component or class encapsulates only attributes and
operations that are closely related to one another and to a class or component
itself.

▪ Type and search “component cohesion” in the Internet.

Describe the following types of cohesion:

● Functional
● Layer

TSE2101 Trimester 1, 2023/2024 Page 2

 ● Communicational

Solution:

Functional – Exhibited primarily by operations, this level of cohesion occurs when a

component performs a targeted computation and then returns a result.

Layer – Exhibited by packages, components and classes, this type of cohesion occurs
when a higher layer accesses the services of a lower layer, but lower layers do not
access higher layers.

Communicational – All operations that access the same data are defined within one
class. In general, such classes focus solely on the data in question, accessing and
storing it.

Activity 2 – Coupling

▪ Coupling is a qualitative measure of the degree to which classes are connected to

one another.
▪ As classes (and components) become more interdependent, coupling increases.

▪ An important objective in component-level design is to keep coupling as low as

possible.
▪ Software must communicate internally and externally.

▪ Therefore, coupling is a fact of life.

▪ However, designer should work to reduce coupling whenever possible and

understand the ramifications of high coupling when it cannot be avoided.

Match the following coupling categories with its descriptions. You should select the best
answer from Table 1.

Table 1 – List of Coupling Categories

Common coupling Data coupling Control coupling

Routine call coupling Type use coupling Couple coupling
Inclusion/Import Content coupling External coupling
coupling
Stamp coupling Unusual coupling Good coupling

2a) _Content coupling_

▪ Occurs when one component “surreptitiously modifies data that is internal to
another component

TSE2101 Trimester 1, 2023/2024 Page 3

 ▪ This violates information hiding – a basic design concept.

2b) _Common coupling__

▪ Occurs when a number of components all the make use of a global variable.

▪ Although this is sometimes necessary (e.g. for establishing default values that are
applicable throughout an application), common coupling can lead to uncontrolled
error propagation and unforeseen side effects when changes are made.

2c) _Control coupling__

▪ Occurs when operation A () invokes operation B() and passes a control flag to B.

▪ The control flag the “directs” logical flow within B.

▪ The problem with this form of coupling is that an unrelated change in B can result
in the necessity to change the meaning of the control flag that A passes.
▪ If this overlooked, an error will result.

2d) _Stamp coupling__

▪ Occurs when ClassB is declared as a type of an argument of an operation of
ClassA.
▪ Because ClassB is now a part of the definition of ClassA, modifying the system
becomes more complex.

2e) _Data coupling__

▪ Occurs when operations pass long strings of data arguments.

▪ The “bandwidth” of communication within classes and components grows and the
complexity of the interfaces increases.
▪ Testing and maintenance are more difficult.

2f) _Routine call coupling__

▪ Occurs when one operation invokes another.

▪ This level of coupling is common and is often necessary.

▪ However, it does increase the connectedness of a system.

2g) _Type use coupling__

▪ Occurs when component A uses a data type defined in component B.

TSE2101 Trimester 1, 2023/2024 Page 4

 ▪ For example: this occurs whenever “a class declares an instance variable or a
local variable as having another class for its type”
▪ If this type definition changes, every component that uses the definition must also
change.

2h) _Inclusion/Import coupling__

▪ Occurs when component A imports or includes a package or the content of
component B

2i) _External coupling__

▪ Occurs when a component communicates or collaborates with infrastructure
components (e.g.: operating systems functions, database capability, and
telecommunications functions).
▪ Although this type of coupling is necessary, it should limit to a small number of
components or classes within a system.

Part C: Project
Task: Interface, Component and Deployment Design

Students to continue the project work in Project II, on interface, component and
deployment design.

1. Complete the interface designs for all the interface objects and if necessary, add
pseudocodes/flowcharts/activity diagrams to further explain the system.
For the screens identified in the use cases in previous tutorial, students should be
designing the contents of the screens. They may use some development tools e.g.
Visual Studio to design the Web pages, or just sketch using MS Word or Powerpoint.

2. From the software architecture, explain the components that will perform some
processing such as calculations or data manipulations. You should specify the details
of these processing using pseudocodes, flowcharts or activity diagrams.
Students to identify major processing to be performed and elaborate the details in the
relevant components. Some components may be simple and they can reuse the earlier
activity diagrams (or amend accordingly).
3. Discuss the system configuration for a Web application. Identify the machines (e.g.
client and server) for the system, and determine the artifacts and components in these
machines. Draw the deployment diagram to illustrate the configuration.
Explain the concept of artifact – a physical file in the system. Different from
component which is a logical item in the application.

TSE2101 Trimester 1, 2023/2024 Page 5

 Students should at least identify the following machines:
User PC
- Artifact: browser

Web Server
- Component: Application System
- Component: Database

Draw the following deployment diagram using Visual Paradigm to illustrate:

They may identify and include additional artifacts/components in the configuration.

TSE2101 Trimester 1, 2023/2024 Page 6