Top 5 # Xem Nhiều Nhất Cách Vẽ Sequence Diagram Bằng Visual Paradigm Mới Nhất 3/2023 # Top Like

Trong bài trước chúng ta đã tìm hiểu về Sequence Diagram, các thành phần, cách xây dựng và ứng dụng của nó. Trong bài này, chúng ta sẽ bàn về cách ứng dụng sequence diagram để thiết kế cho hệ thống eCommerce mà chúng ta đã bàn ở bài 3 của chuyên mục này.

1. Xây dựng Sequence Diagram

Bước 1: Xác định các Use Case cần thiết kế

Tương tự như Activity Diagram, chúng ta cũng cần xác định các Use Case mà chúng ta cần sử dụng sequence Diagram để thiết kế chi tiết.

Xem xét bản vẽ Use Case Diagram chúng ta đã vẽ ở bài 3, chúng ta có thể thấy các Use Case sau cần thiết kế:

– Xem sản phẩm theo chủng loại

– Thêm sản phẩm theo nhà cung cấp

– Thêm giỏ hàng

– Chat

– Quản lý đơn hàng

– Thanh toán

– Theo dõi chuyển hàng

– Đăng nhập

Tiếp theo, chúng ta sẽ thiết kế cho chức năng ” Xem sản phẩm theo chủng loại “.

Bước 2: Xem Activity Diagram cho Use Case này chúng ta xác định các bước sau:

– Người dùng chọn loại sản phẩm

– Hệ thống sẽ lọc lấy loại sản phẩm tương ứng, sau đó lấy giá, lấy khuyến mãi và hiển thị lên màn hình.

– Người dùng xem sản phẩm

Bước 3: Đối chiếu với Class Diagram chúng ta xác định các đối tượng thực hiện như sau:

– Người dùng: chọn loại sản phẩm qua giao diện

– Giao diện: sẽ lấy danh sách sản phẩm tương ứng từ Products

– Giao diện: lấy giá của từng sản phẩm từ Class Prices và Promotion Amount từ lớp Promotions

– Giao diện: tổng hợp danh sách và hiển thị

– Người dùng: Xem sản phẩm

Bước 4: Vẽ sequence Diagram

– Xác định các lớp tham gia vào hệ thống gồm: người dùng (Guest), Giao diện (GUI System), Sản phẩm (Products), Giá (Prices), Khuyến mãi (Promotions). Trong đó GUI System để sử dụng chung cho giao diện, bạn có thể sử dụng cụ thể trang Web nào nếu bạn đã có Mockup (thiết kế chi tiết của giao diện).

– Guest gửi yêu cầu xem sản phẩm lên giao diện kèm theo chủng loại

– GUI system: gửi yêu cầu lấy danh sách các sản phẩm tương ứng với chủng loại cho lớp sản phẩm và nhận lại danh sách.

– GUI system: gửi yêu cầu lấy Giá cho từng sản phẩm từ Prices

– GUI system: gửi yêu cầu lấy khuyến mãi cho từng sản phẩm từ Promotions và nhận lại kết quả

– GUI system: ghép lại danh sách và hiển thị lên browser và trả về cho Guest

Thể hiện lên bản vẽ như sau:

Chúng ta nhận thấy để thực hiện được bản vẽ trên chúng ta cần bổ sung các phương thức cho các lớp như sau:

– Products class: bổ sung phương thức GetProductInfo(Product Type): trả về thông tin sản phẩm có loại được truyền vào. Việc này các đối tượng của lớp Products hoàn toàn làm được vì họ đã có thuộc tính ProductType nên họ có thể trả về được thông tin này.

– Prices: bổ sung phương thức GetPrice(ProductID): UnitPrice. Sau khi lấy được ProductID từ Products, GUI gọi phương thức này để lấy giá của sản phẩm từ lớp giá. Các đối tượng từ lớp Prices hoàn toàn đáp ứng điều này.

– Promotions: tương tự bổ sung phương thức GetPromotion(ProductID).

– GUI System(View Product Page): bổ sung phương thức DisplayProductList(List of product) để hiển thị danh sách lên sản phẩm. Ngoài ra, bạn cần có thêm một phương thức ViewProductbyType(ProductType) để mô tả chính hoạt động này khi người dùng kích chọn.

Như vậy, chúng ta thấy các phương thức trên đều thực hiện được trên các đối tượng của các lớp nên thiết kế của trên là khả thi. Bổ sung các phương thức trên vào các Class tương ứng chúng ta có bản vẽ Class Diagram như sau:

Hoàn tất sequence diagram cho tất cả các Use Case chúng ta sẽ hoàn thành việc thiết kế, đồng thời cũng hoàn tất bản vẽ Class Diagram.

2. Kết luận

Bản vẽ Squence Diagram có vai trò quan trọng trong việc thiết kế hệ thống. Đồng thời giúp chúng ta kiểm tra lại quá trình phân tích, thiết kế trước đây cũng như hoàn thành bản vẽ Class Diagram. Việc sử dụng thành thạo bản vẽ này giúp các bạn rất nhiều trong việc phân tích và thiết kế phần mềm.

Trong bài tiếp theo chúng ta sẽ bàn về Component Diagram và Deployment Diagram, những bản vẽ cuối cùng cho việc phân tích và thiết kế hướng đối tượng sử dụng UML. Mời các bạn đọc tiếp.

Bài tiếp: Bản vẽ Component Diagram

Bài trước: Bản vẽ Sequence Diagram

How to Draw Sequence Diagram?

A sequence diagram is a kind of UML diagram that is used primarily to show the interactions between objects that are represented as lifelines in a sequential order.

Creating sequence diagram

Perform the steps below to create a UML sequence diagram Visual Paradigm uml diagram tools.

In the New Diagram window, select Sequence Diagram.

Enter the diagram name and description. The Location field enables you to select a model to store the diagram.

Creating

actor

Creating lifeline

Alternatively, a much quicker and more efficient way is to use Resource Catalog:

Move your mouse pointer over the source lifeline.

Press on the Resource Catalog button and drag it out.

Release the mouse button at the place where you want the lifeline to be created.

A new lifeline will be created and connected to the

actor

/lifeline with a message. Enter its name and press Enter to confirm editing.

Auto extending activation

When create message between lifelines/actors, activation will be automatically extended.

Using sweeper and magnet to manage sequence diagram

The picture below shows the actor Inspector Assistant is being swept towards right, thus new room is made for new lifelines.

The picture below shows the message specify visit time is being swept downwards, thus new room is made for new messages.

The picture below shows when drag the magnet upwards, shapes below dragged position are pulled upwards.

Creating combined fragment for messages

A combined fragment of selected type will be created to cover the messages.

Adding/removing covered lifelines

After you’ve created a combined fragment on the messages, you can add or remove the covered lifelines.

Move the mouse over the combined fragment and select Add/Remove Covered Lifeline… from the pop-up menu.

As a result, the area of covered lifelines is extended or narrowed down according to your selection.

Managing Operands

After you’ve created a combined fragment on the messages, you can also add or remove operand(s).

Developing sequence diagram with quick editor or keyboard shortcuts

In sequence diagram, an editor appears at the bottom of diagram by default, which enables you to construct sequence diagram with the buttons there. The shortcut keys assigned to the buttons provide a way to construct diagram through keyboard. Besides constructing diagram, you can also access diagram elements listing in the editor.

Editing lifelines

There are two panes, Lifelines and Messages. The Lifelines pane enables you to create different kinds of actors and lifelines.

Button Shortcut Description

Alt-Shift-A To create an

actor

Alt-Shift-L To create a general lifeline

Alt-Shift-E

Alt-Shift-C

Alt-Shift-B

Alt-Shift-O To open the specification of the element chosen in quick editor

Ctrl-Del To delete the element chosen in quick editor

Ctrl-L To link with the diagram, which cause the diagram element to be selected when selecting an element in editor, and vice versa

Editing messages

The Messages pane enables you to connect lifelines with various kinds of messages.

Button Shortcut Description

Alt-Shift-M To create a message that connects actors/lifelines in diagram

Alt-Shift-D To create a duration message that connects actors/lifelines in diagram

Alt-Shift-C To create a create message that connects actors/lifelines in diagram

Alt-Shift-S To create a self message on an

actor

/lifeline in diagram

Alt-Shift-R To create a recursive message on an

actor

/lifeline in diagram

Alt-Shift-F To create a found message that connects to an

actor

/lifeline

Alt-Shift-L To create a lost message from an

actor

/lifeline

Alt-Shift-E To create a reentrant message that connects actors/lifelines in diagram

Ctrl-Shift-Up To swap the chosen message with the one above

Ctrl-Shift-Down To swap the chosen message with the one below

Ctrl-R To revert the direction of chosen message

Alt-Shift-O To open the specification of the message chosen in quick editor

Ctrl-Del To delete the message chosen in quick editor

Ctrl-L To link with the diagram, which cause the message to be selected when selecting a message in editor, and vice versa

Expanding and collapsing the editor

Setting different ways of numbering sequence messages

You are able to set the way of numbering sequence messages either on diagram base or frame base.

Diagram-based sequence message

If you choose Single Level, all sequence messages will be ordered with integers on diagram base. On the other hand, if you choose Nested Level, all sequence messages will be ordered with decimal place on diagram base.

Frame-based sequence message

When you set the way of numbering sequence messages on frame base, the sequence messages in frame will restart numbering sequence message since they are independent and ignore the way of numbering sequence message outside the frame.

Related Resources

The following resources may help you to learn more about the topic discussed in this page.

Sequence Diagram là bản vẽ xác định câu chuyện hậu trường của một chức năng. Câu chuyện hậu trường ở đây chính là sự tương tác giữa các nhóm đối tượng, các thông điệp được gửi và nhận giữa các đối tượng cũng như trình tự thời gian giữa những thông điệp đó.

Ví dụ như bài toán xuất ra màn hình các số nguyên tố bé hơn n:

Đầu tiên chương trình sẽ nhận input là một số n

Tiếp đó chương trình chạy vòng lặp từ 0 đến n

Rồi kiểm tra trong đó đâu là số nguyên tố

Cuối cùng trả về output là các số nguyên tố xuất hiện trên màn hình

Việc thực hiện các chức năng từ lúc nhận input, chạy vòng lặp, kiểm tra rồi trả kết quả, theo một trình tự, có sự tham gia của các hàm, các đối tượng. Và được trực quan hóa bằng bản vẽ chính là Sequence Diagram.

Các thành phần trong Sequence Diagram

Đối tượng

Được kí hiệu bởi hình chữ nhật (kí hiệu là Lifeline trong StarUML) dùng để biểu diễn cho cả Class và Object. Chúng được phân biệt với nhau bởi dấu hai chấm đứng trước tên của Object.

Hình vuông này dùng để tượng trưng cho những lớp, những đối tượng mà bạn sẽ sử dụng trong quá trình thực thi code.

Đường vẽ nét đứt phía dưới hình chữ nhật chính là đường đời của đối tượng, dùng để thể hiện quá trình thực hiện thao tác của đối tượng từ lúc khởi tạo đến lúc biến mất.

Message

Dùng để thể hiện thông điệp đối tượng này truyền sang cho đối tượng khác. Có thể là những kết quả gửi đi, trả về, cũng có thể là những lần gọi làm,…

Có một số kiểu Message thường gặp:

Synchronous Message: Thông điệp cần có một request trước cho hành động tiếp theo.

Asynchronous Message: Thông điệp không cần phải có request trước đó cho hành động tiếp theo.

Self Message: Thông điệp tự gửi cho chính mình để thực hiện các hàm như check/ valid dữ liệu.

Reply Message/Return Message: Thông điệp trả lời lại những request.

Các bước xây dựng Sequence Diagram

1. Xác định các chức năng cần thiết kế

Dựa vào Use Case Diagram / User Story hay Requirement mà lựa chọn chức năng để thiết kế.

Chú ý: mỗi chức năng là một Sequence Diagram riêng biệt.

Ví dụ ở đây mình chọn chức năng Login cho một trang web Java theo mô hình MVC

2. Xác định các bước để thực hiện

Người dùng nhập tài khoản, mật khẩu vào form Login

Người dùng ấn nút Login

Form Login gửi request đến Controller chính

Controller chính tiếp tục gửi request từ form đến User Controller để thực hiện các hàm

User Controller sẽ gọi UserDAO để thực hiện hàm checkLogin()

UserDAO sẽ vào database tìm result set có tài khoản và mật khẩu tương ứng để trả về

Nếu có tồn tại tài khoản và mật khẩu đó, sẽ trả về một trang html thông báo đăng nhập thành công cho người dùng

Nếu không thì trả về một html thông báo tài khoản hay mật khẩu bị sai và yêu cầu đăng nhập lại

3. Xác định các đối tượng tham gia vào

Dựa vào ý tưởng trên, mình có thể nhận thấy các đối tượng

Actor thể hiện người dùng (Actor được add rời từ model)

Browser là nơi người dùng thao tác (Class)

:DispatcherController để nhận button và thực hiện thao tác gửi về các controller khác (Object)

:UserController là nơi nhận dữ liệu và xử lý (Object)

:UserDAO để truy cập database (Object)

DataBase là nơi lưu các tài khoản, mật khẩu (Class)

View để trả về trang html show ra cho người dùng (Class)

Vì ở đây có 2 điều kiện là login thành công hoặc thất bại nên mình sẽ sử dụng thêm Combined Fragment để tạo ra một khung điều kiện và có 2 operand là đúng hoặc sai.

Sau khi xác định được các bước và các đối tượng tham gia vào, chúng ta đã có thể vẽ được một Sequence Diagram rồi.

Ứng dụng

Thiết kế và phát triển các chức năng

Kiểm chứng và bổ sung method cho các Class

Tạm kết

Sequence Diagram là bản vẽ để xác định các đối tượng cũng như tuần tự các bước để thực hiện một bài toán, một chương trình. Sequence Diagram được dùng để thiết kế phát triển và test các chức năng. Qua bài viết này, hi vọng các bạn có thể biết được Sequence Diagram là gì cũng như cách vẽ một Sequence Diagram.

Trong bài trước chúng ta đã nắm được khái niệm, các thành phần, cách xây dựng và ứng dụng của Activity Diagarm. Bây giờ, chúng ta áp dụng nó để phân tích nghiệp vụ cho hệ thống eCommerce mà chúng ta đã xem xét trong bài số 3 của chuyên mục này.

Xây dựng Activity Diagram cho hệ thống eCommerceBước 1: Xác định các nghiệp vụ cần phân tích.

Trước tiên, chúng ta xem xét các Use Case. Về nguyên tắc bạn phải phân tích và mô tả tất cả các nghiệp vụ của hệ thống để làm rõ hệ thống. Xem xét bản vẽ Use Case Diagram chúng ta đã vẽ ở bài 3, chúng ta có thể thấy các Use Case sau cần làm rõ: – Xem sản phẩm theo chủng loại – Thêm sản phẩm theo nhà cung cấp – Thêm giỏ hàng – Chat – Quản lý đơn hàng – Thanh toán – Theo dõi chuyển hàng – Đăng nhập

Tiếp theo, chúng ta bắt đầu phân tích và vẽ cho chức năng xem sản phẩm theo chủng loại.

Để thực hiện chức năng xem sản phẩm theo chuẩn loại hệ thống sẽ thực hiện như sau: – Điều kiện ban đầu: ở trang chủ – Điều kiện kết thúc: hiển thị xong trang sản phẩm

Các bước như sau: – Người dùng chọn loại sản phẩm. – Hệ thống sẽ lọc lấy loại sản phẩm tương ứng, sau đó lấy giá, lấy khuyến mãi cho tất cả các sản phẩm đã được chọn và hiển thị lên màn hình. – Người dùng xem sản phẩm.Bước 3: Thực hiện bản vẽ – Chúng ta thấy có 2 đối tượng tham gia vào giao dịch này là Người dùng và Hệ thống. Chúng ta nên dùng Swimlance để thể hiện 2 đối tượng trên.

– Hành động tiếp theo là Guest chọn loại sản phẩm

Kết luận

Bản vẽ Activity Diagram sẽ giúp bạn mô tả nghiệp vụ của hệ thống một cách nhanh chóng, nó là công cụ hiệu quả trong việc mô tả hoạt động nghiệp vụ của hệ thống. Do vậy, các bạn hãy thực hành và sử dụng thành thạo bản vẽ này để thuận lợi trong việc phân tích, thiết kế hệ thống sau này.

Trong bài tiếp theo chúng ta sẽ thiết kế các chức năng của hệ thống thông qua việc sử dụng Sequence Diagram. Mời các bạn đọc tiếp.

Bài tiếp: Bản vẽ Sequence Diagram

Bài trước: Bản vẽ Activity Diagram