Gallery
Share
Explore

Making UML happen:

Incorporating use cases and object interaction diagrams is an excellent way to help students understand method choreography and the dynamic interactions between objects.
Here's how you can guide students to develop representative
use cases and
create object interaction diagrams:

Identify the shared fields that connect classes

Recipe 9: Develop Representative Use Cases : Write down your SUD’s use Cases in your Word Document
Instruct students to brainstorm common scenarios a user might encounter in the Farmers Market Online Marketplace. For example:
A customer placing an order
A vendor adding a new product
A customer leaving a review
The system processing a delivery
For each scenario, have students write a brief use case following this format:
Use Case Name
Actor
Preconditions
Main Flow
Alternate Flows (if applicable)
Postconditions
Example Use Case:
Name: Place Order Actor: Customer Preconditions: Customer is logged in, products are in cart Main Flow:
Customer initiates checkout process
System calculates total price
Customer selects delivery option
Customer confirms order
System processes payment
System creates order and notifies vendor Postconditions: Order is created, inventory is updated
Recipe 10: Create Object Interaction Diagrams
For each use case, have students create an object interaction diagram (sequence diagram) to visualize the method choreography.
Identify the objects involved in the use case.
Arrange these objects horizontally across the top of the diagram.
Use vertical lifelines to represent the timeline of each object.
Add activation boxes to show when an object is active.
Draw arrows between lifelines to represent method calls, with the method name above the arrow.
Use dashed arrows for return values if necessary.
Example for "Place Order" use case:
Copy
Customer ShoppingCart Order PaymentSystem Vendor
| | | | |
| checkout() | | | |
|------------>| | | |
| | calculateTotal() | |
| |----------->| | |
| | total | | |
|<------------| | | |
| selectDelivery() | | |
|---------------------------> | |
| confirmOrder() | | |
|---------------------------> | |
| | | processPayment() |
| | |-------------->| |
| | | success | |
| | |<--------------| |
| | | createOrder() | |
| | |-------------->| |
| | | notifyVendor()| |
| | |------------------------------>
| orderConfirmation | | |
|<--------------------------| | |
Recipe 11: Analyze Method Choreography
Have students examine their object interaction diagrams and answer the following questions:
Which object initiates the interaction?
What is the sequence of method calls?
Are there any loops or conditional branches in the interaction?
How are results or confirmations communicated back to the initiating object?
Discuss how this choreography relates to the class diagram they created earlier. Are there any methods or relationships they need to add or modify in their class diagram?
Recipe 12: Refine UML Class Diagram
Based on the insights gained from the use cases and object interaction diagrams, have students revisit their UML class diagrams.
Add any missing methods that were identified during the interaction diagram creation.
Ensure that the class diagram accurately reflects the relationships and dependencies observed in the interaction diagrams.
Recipe 13: Plan for TypeScript Implementation
Discuss how the method choreography visualized in the interaction diagrams will translate to TypeScript code.
Have students write pseudocode or TypeScript skeleton code for one or two key methods, showing how objects will interact.
Example:
typescript
Copy
class ShoppingCart {
// ...other methods and properties

async checkout(): Promise<Order> {
const total = this.calculateTotal();
const deliveryOption = await this.customer.selectDelivery();
const orderConfirmation = await this.customer.confirmOrder(total, deliveryOption);
if (orderConfirmation) {
const paymentSuccess = await PaymentSystem.processPayment(total);
if (paymentSuccess) {
const order = new Order(this.items, total, deliveryOption);
await order.create();
await this.vendor.notifyNewOrder(order);
return order;
} else {
throw new Error("Payment failed");
}
} else {
throw new Error("Order not confirmed");
}
}
}
By following these additional recipes, students will gain a deeper understanding of how objects interact in real-world scenarios. This process helps bridge the gap between static class structures and dynamic object behaviors, preparing students to implement more robust and well-designed TypeScript applications.

megaphone

objects can be connected with method calls.

classes can be connected via inheritance and shared field composition.
Let's expand on these concepts to ensure students understand the different ways objects and classes can be connected:

Recipe 14: Understanding Object and Class Connections

Object Connections via Method Calls:
Explain that objects interact with each other through method calls at runtime.
These interactions are typically shown in Object Interaction Diagrams (OID) or Sequence Diagrams.
Have students identify method calls in their existing OIDs.
Example:
In the "Place Order" OID, the Customer object calls methods on the ShoppingCart object, which in turn calls methods on the Order object.
Class Connections via Inheritance:
Remind students that inheritance represents an "is-a" relationship.
In the UML class diagram, inheritance is shown with an arrow pointing from the subclass to the superclass.
Have students identify or create inheritance relationships in their class diagrams.
Example:
Copy
User
^
|
_____|_____
| |
Customer Vendor
Class Connections via Shared Field Composition:
Explain that this represents a "has-a" relationship, also known as association or aggregation.
In UML, this is often shown with a line between classes, possibly with an arrow or diamond.
Have students identify these relationships in their existing class diagrams.
Example:
Copy
Vendor ---> Product
(Vendor has-a Product)
Recipe 15: Implementing Connections in TypeScript
Method Calls: Have students implement a method that demonstrates object interaction:
typescript
Copy
class Order {
process(paymentSystem: PaymentSystem, vendor: Vendor) {
const paymentSuccess = paymentSystem.processPayment(this.total);
if (paymentSuccess) {
vendor.notifyNewOrder(this);
}
}
}
Inheritance: Show how to implement inheritance in TypeScript:
typescript
Copy
class User {
id: number;
name: string;
// ... common methods
}

class Customer extends User {
cart: ShoppingCart;
// ... customer-specific methods
}

class Vendor extends User {
products: Product[];
// ... vendor-specific methods
}
Shared Field Composition: Demonstrate how to implement "has-a" relationships:
typescript
Copy
class Vendor {
private products: Product[];
addProduct(product: Product) {
this.products.push(product);
}
}
Recipe 16: Analyzing Connection Types
Have students examine their UML diagrams and code to answer:让学生检查他们的 UML 图和代码来回答：
Which objects in your system interact most frequently through method calls?
Where have you used inheritance, and why?
Which classes have "has-a" relationships, and how are these implemented?
How do these different types of connections affect the overall design and flexibility of your system?
By exploring these concepts, students will gain a deeper understanding of how objects and classes can be connected in different ways, both in design (UML) and implementation (TypeScript). This knowledge will help them create more robust and flexible software designs.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.