Explore

Lab 4 Lesson Plan: Business Domain Analysis with UML and TypeScript Generation

Note: For Lab 4, we are only generating the UML Diagram in Lucid Chart.

[Lab 5 Next Week will see us forward Generate TypeScript Code from the UML Diagram]

For this Lab, you will be producing a Word Document with your OOAD and link to LucidChart.

You can see an Example of the Instructor’s Document here:

⁠

https://docs.google.com/document/d/1AbIGhRsJjLb-SzMYexC0fCA0ZsAZvy9JS6SVlm2FYvc/edit?usp=sharing⁠

⁠

⁠
`https://coda.io/d/Business-Domain-Analysis-UML-and-objects-in-TypeScript_ddLTht_LMSl`⁠
⁠

⁠

https://coda.io/d/Lecture-Lab-Workbook-introducing-TypeScript-for-creating-object-_dKFyzVGLdek⁠

⁠

https://coda.io/d/Lecture-Lab-Workbook-introducing-TypeScript-for-creating-object-_dKFyzVGLdek⁠

⁠

https://coda.io/d/s24-CSD-3103-Delivering-the-Project_du8GO6QKSEj⁠

⁠

This lab plan provides a structured approach to guide students through the process of:

Analyzing a business domain

Creating UML diagrams

Implementing the design in TypeScript.

It covers key concepts of object-oriented design and TypeScript programming while giving students hands-on experience with industry-standard tools and practices.

Step 1:

Start by accessing this Google Sheet:

⁠

https://docs.google.com/spreadsheets/d/1fQC35d_iJ-M3RmP1tqNJIGSsQSaN1PEIj-pXjUHtUmI/edit?usp=sharing⁠

⁠

In Class Lab Activity:

The hand in for this work is a Lucid Chart Diagram of your Assigned Business Domain.

Submission via Moodle:

⁠

Where this activity fits in the Project Delivery

This is the first half of deliverying your Project.

Here is your Project Grading Rubric:

Your project will be graded out of 100 points:

Half of your Project Grade:

50 points will be shared among the team, based on this schema;

25 points for this UML to Code activity.

25 points for deliverying your Final Working Project: This will be done by doing npm -publish and presenting me with the URL to your

NPMJS.com⁠

published project.

Other half of your project Grade: Exit Interview

50 points will be based on the Instructor’s assessment of your Project Learning in an Individual exit interview.

Learning outcome:

Guide students through analyzing their business domain using UML diagrams

and forward generating to TypeScript:

Objective: Students will analyze their assigned business domain, create UML class and object interaction diagrams using LucidChart, and forward generate TypeScript code from these diagrams.

You will in the end deploy your Project Code to NPMJS.com, using NPM -publish

Materials: - Computer with internet access - LucidChart account (free version is sufficient) - Visual Studio Code or similar IDE with TypeScript support - Node.js and npm installed

Part 1: Business Domain Analysis

1. Review the assigned business domain description. 2. Identify key entities (classes) within the domain. 3. List attributes and methods for each entity. 4. Identify relationships between entities.

Part 2: Creating UML Class Interaction Diagram

1. Log in to LucidChart (https://www.lucidchart.com/).

2. Create a new document and select the UML Class Diagram template.

NOW WORK → 3. For each identified entity, create a class box with three sections: - Top section: Class name - Middle section: Attributes - Bottom section: Methods

4. Use appropriate symbols to denote relationships:

- Solid line with arrow: Association - Solid line with diamond: Composition - Dotted line with arrow: Dependency - Solid line with triangle: Inheritance 5. Add multiplicity indicators to show cardinality of relationships.

Example for Smart Agriculture domain: ``` [Crop] - id: string - name: string - plantingDate: Date + getGrowthStage(): string

[Field] 1 --- * [Crop] - id: string - location: GeoCoordinate + calculateArea(): number

[Sensor] * --- 1 [Field] - id: string - type: SensorType + getCurrentReading(): number

[IrrigationSystem] 1 --- 1 [Field] - id: string - status: boolean + activateIrrigation(): void ```

Part 3: Creating UML Object Interaction Diagram (45 minutes)

1. In LucidChart, create a new page and select the UML Sequence Diagram template. 2. Identify a key process in your domain (e.g., "Activate Irrigation Based on Soil Moisture"). 3. Add lifelines for each object involved in the process. 4. Add messages between lifelines to represent method calls and responses. 5. Use appropriate arrows and labels for synchronous and asynchronous messages.

Example for "Activate Irrigation Based on Soil Moisture": ``` [Sensor] -> [Field]: getCurrentMoisture() [Field] --> [Sensor]: moistureLevel [Sensor] -> [IrrigationSystem]: checkMoistureThreshold(moistureLevel) [IrrigationSystem] -> [IrrigationSystem]: isIrrigationNeeded() [IrrigationSystem] -> [Field]: activateIrrigation() [Field] --> [IrrigationSystem]: irrigationStatus ```

[Lab 5: Next week ] - Part 4: Forward Generating TypeScript Code (60 minutes)

1. Open Visual Studio Code and create a new TypeScript project. 2. Create a new file for each class identified in your UML diagrams. 3. Implement the classes based on the UML diagrams.

TypeScript boilerplate starter code:

```typescript // File: Crop.ts export class Crop { private id: string; private name: string; private plantingDate: Date;

constructor(id: string, name: string, plantingDate: Date) { this.id = id; this.name = name; this.plantingDate = plantingDate; }

public getGrowthStage(): string { // Implementation return "Seedling"; // Placeholder } }

// File: Field.ts import { Crop } from './Crop'; import { GeoCoordinate } from './GeoCoordinate';

export class Field { private id: string; private location: GeoCoordinate; private crops: Crop[];

constructor(id: string, location: GeoCoordinate) { this.id = id; this.location = location; this.crops = []; }

public calculateArea(): number { // Implementation return 0; // Placeholder }

public addCrop(crop: Crop): void { this.crops.push(crop); } }

// File: Sensor.ts import { Field } from './Field';

export enum SensorType { MOISTURE, TEMPERATURE, LIGHT }

export class Sensor { private id: string; private type: SensorType; private field: Field;

constructor(id: string, type: SensorType, field: Field) { this.id = id; this.type = type; this.field = field; }

public getCurrentReading(): number { // Implementation return 0; // Placeholder } }

// File: IrrigationSystem.ts import { Field } from './Field';

export class IrrigationSystem { private id: string; private status: boolean; private field: Field;

constructor(id: string, field: Field) { this.id = id; this.status = false; this.field = field; }

public activateIrrigation(): void { // Implementation this.status = true; console.log(`Irrigation activated for field ${this.field.id}`); }

public checkMoistureThreshold(moistureLevel: number): boolean { // Implementation const threshold = 30; // Example threshold return moistureLevel < threshold; } }

// File: GeoCoordinate.ts export class GeoCoordinate { constructor(public latitude: number, public longitude: number) {} } ```

Implement the sequence of actions from the Object Interaction Diagram:

```typescript // File: IrrigationController.ts import { Sensor, SensorType } from './Sensor'; import { Field } from './Field'; import { IrrigationSystem } from './IrrigationSystem';

export class IrrigationController { private sensor: Sensor; private irrigationSystem: IrrigationSystem;

constructor(field: Field) { this.sensor = new Sensor('sensor1', SensorType.MOISTURE, field); this.irrigationSystem = new IrrigationSystem('irrig1', field); }

public checkAndActivateIrrigation(): void { const moistureLevel = this.sensor.getCurrentReading(); if (this.irrigationSystem.checkMoistureThreshold(moistureLevel)) { this.irrigationSystem.activateIrrigation(); } } } ```

Part 5: Testing the Implementation (30 minutes)

1. Create a main file to test the implementation:

```typescript // File: index.ts import { GeoCoordinate } from './GeoCoordinate'; import { Field } from './Field'; import { Crop } from './Crop'; import { IrrigationController } from './IrrigationController';

const field = new Field('field1', new GeoCoordinate(40.7128, -74.0060)); const crop = new Crop('crop1', 'Wheat', new Date()); field.addCrop(crop);

const controller = new IrrigationController(field); controller.checkAndActivateIrrigation(); ```

2. Run the implementation: ``` npx ts-node index.ts ```

3. Observe the output and verify that it matches the expected behavior from the UML diagrams.

Conclusion The process of translating business domain analysis into UML diagrams is called OOAD Object Oriented Analysis and Design.

The next step of Unified Process is the “implementation phase” of forward generating the UML into TypeScript code.

Discuss how this approach helps in creating a well-structured and maintainable codebase.

Assignment: {Labs 4 and 5}

Students should complete the UML diagrams and TypeScript implementation for their assigned business domain, following the process demonstrated in this lab.

They should submit their Word Document with OOAD Analysis, which includes a URL LINK to the LucidChart UML diagrams.

Lab 5: Create a GitHUB Repository to submit the generated TypeScript code files for review.

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.