Đề tài tìm hiểu kiến trúc mvvm và xây dựng phần mềm Đặt Đồ ăn

View là thành phần duy nhất mà ngườidùng có thể tương tác được trong chương trình, nó chính là thành phần mô tả dữ liệu.Một điểm khác biệt so với mô hình khác là View trong mô hình này c

ĐẠI HỌC THÁI NGUYÊN

TRƯỜNG ĐH CNTT VÀ TRUYỀN THÔNG KHOA CÔNG NGHỆ THÔNG TIN

BÀI BÁO CÁO NHÓM

MÔN HỌC: KIẾN TRÚC VÀ THIẾT KẾ PHẦN MỀM

ĐỀ TÀI: TÌM HIỂU KIẾN TRÚC MVVM VÀ XÂY DỰNG

CHƯƠNG 1: TÌM HIỂU KIẾN TRÚC MVVM

1.1 Đặc điểm của kiến trúc

1.2 Ưu nhược điểm của MVVM

1.3 Sự khác nhau MVC, MVP, MVVM

1.4 Ứng dụng kiến trúc MVVM

CHƯƠNG 2: TÀI LIỆU KIẾN TRÚC PHẦN MỀM

2.1Giới thiệu

2.1.1 Mục tiêu

2.1.2 Phạm vi tài liệu

2.1.3 Tài liệu tham khảo

2.2 Định nghĩa, các từ viết tắt

2.3 Các mục tiêu ràng buộc kiến trúc

2.4 Đặc tả Use case

2.5 Sơ đồ hoạt động

2.6 Sơ đồ trình tự

2.7 Sơ đồ lớp

2.8 Khung nhìn logic

2.9 Khung nhìn phát triển và triển khai

2.9.1 Khung nhìn phát triển

2.9.2 Khung nhìn triển khai

2.10 Kích cỡ và hiệu suất

Chương 3: Demo ứng dụng đặt đồ ăn

3.1 Giao diện đăng nhập

3.2 Giao diện Trang chủ

3.3 Giao diện giỏ hàng

3.4 Giao đặt hàng

3.5 Giao diện lịch sử đặt hàng

3.6 Giao diện sản phẩm

Kết luận

CHƯƠNG 1: TÌM HIỂU KIẾN TRÚC MVVM

1.1 Đặc điểm của kiến trúc

Khái niệm mô hình MVVM:

MVVM không phải là framework hay thư viện, api… nó chỉ đơn thuần làhướng dẫn bạn định nghĩa cấu trúc ứng dụng của bạn MVVM được phát triển dựa trênkiến trúc MVP

Mô hình MVVM cho phép tách biệt dữ liệu (Model), mã thực thi (logic hayViewModel) và giao diện người dùng (View)

Trong các mô hình truyền thống, chúng ta thường xử lý sự kiện Click và viết

mã thực thi trực tiếp ở trên một Button nhưng với mô hình MVVM không cho phéplàm điều này

Trong mô hình MVVM, các điều khiển (control) như Button, ListView,SearchBar, vv Không thể kết buộc trực tiếp đến dữ liệu mà phải thông qua thuộc tínhCommand - là một thuộc tính kiểu ICommand

Cấu trúc:

View:

Thành phần giao diện của ứng dụng View là thành phần duy nhất mà ngườidùng có thể tương tác được trong chương trình, nó chính là thành phần mô tả dữ liệu.Một điểm khác biệt so với mô hình khác là View trong mô hình này có thể thựchiện các hành vi và phản hồi lại người dùng thông qua tính năng : binding, command

Model:

Cũng tương tự như mô hình MVC Model là đối tượng giúp truy xuất và thaotác trên dữ liệu thực sự

ViewModel:

Lớp trung gian giữa View và Model ViewModel có thể được xem là thànhphần thay thế cho Controller trong mô hình MVC Nó chứa các mã lệnh cần thiết đểthực hiện data binding, command.

Cấu trúc thư mục trong MVVM

Thông thường khi sử dụng MVVM chúng ta nên tạo 3 thư mục chính chứa cácfile code liên quan

View:

Trong thư mục View chứa các file giao diện Và mỗi file giao diện đều có classcode-behind đi kèm Đặc biệt là file code-behind ta sẽ không sử dụng đến, mọi điềucần làm sẽ chuyển xuống class ViewModel

Model:

Trong thư mục Model trong đó tạo các class chứa data và bất kì liên kếtvalidation, logic nghiệp vụ để chắc chắn tính toàn vẹn của data, bạn có thể tách ra nhưmục Repositories khác Chúng được dùng như một phần của mô hình MVVM

ViewModel:

Tương tự ta cũng tạo một thư mục ViewModel Thông thường một file giaodiện thì ta tạo một class ViewModel tương ứng (có đôi lúc ta tạo nhiều class phụ giúptinh giản file code và gọi chúng trong class ViewModel chính)

Data Binding(ràng buộc dữ liệu):

Là kỹ thuật dùng để tạo gắn kết giữa phần giao diện (UI) và dữ liệu thông quaphần business logic Nhờ Data Binding, UI có thể tự động cập nhật lại để hiện thị cácthay đổi trong dữ liệu Ngoài ra, Data Binding trong WPF còn hỗ trợ các chiều khácnhau, nghĩa là các thay đổi có thể cập nhật từ UI vào dữ liệu Kỹ thuật binding trong

mô hình MVVM thực sự là một bước tiến mới, thoả mãn những điều mà hầu hết lậptrình viên mong đợi

Nếu như tìm hiểu về tính năng này, bạn sẽ không ngạc nhiên gì khi nhiều ngườinói rằng data binding là thành phần cốt lõi tạo nên các cơ chế hoạt động trong WPF

Bạn có thể binding dữ liệu nguồn và đích từ bất kỳ đối tượng nào: như cửa sổ, cáccontrol đơn giản như TextBlock cho đến một usercontrol phức tạp.

Tất cả được thực hiện một cách dễ dàng, nhanh chóng, hiệu quả và có thểkhông cần dùng đến bất kì dòng code-behind (C#, VB.NET, ) nào

Data Template:

Data Template là kĩ thuật dùng để tạo ra một khuôn mẫu giao diện Templatechỉ được áp dụng cho các Control Một template trong WPF xác định cách thức và cấutrúc mà dữ liệu hoặc control sẽ được hiển thị ra màn hình

Nói riêng về Data Template, chức năng này giúp cho dữ liệu (thuộc dạng visual) được gắn vào một cấu trúc bao gồm một hoặc nhiều thành phần có khả nănghiển thị Và do đó, dữ liệu sẽ được hiển thị lên cửa sổ một cách trực quan theo ý muốn

non-của lập trình viên Cũng như Data Binding, tính năng này không yêu cầu các bạn biết

trong code-behind của ứng dụng

Command:

Data Binding và Data Template trong WPF giúp cho người dùng thấy đượcnhững gì có trong dữ liệu và có thể cập nhật lại dữ liệu đó Tuy nhiên để nhận đượctương tác từ người dùng và xử lý, WPF cung cấp một tính năng gọi là command Cáccommand có thể được xem như dữ liệu và được cung cấp cho người dùng thông quachức năng binding

Một command binding cho phép bạn tùy ý xác định các phương thức xử lý,phím tắt hoặc thao tác chuột để kích hoạt

1.2 Ưu nhược điểm của MVVM

Mẫu thiết kế MVVM (Model-View-ViewModel) có nhiều ưu điểm, đặc biệt làtrong phát triển ứng dụng GUI (Giao diện người dùng đồ họa) và ứng dụng di động Dưới đây là một số ưu điểm chính:

1 Tách biệt rõ ràng giữa các thành phần:

o Model: Chứa logic nghiệp vụ và dữ liệu.

o View: Chịu trách nhiệm hiển thị giao diện người dùng.

o ViewModel: Đóng vai trò trung gian giữa Model và View, chứa logic của giao diện

và dữ liệu cần thiết cho View

o Sự tách biệt này giúp mã dễ quản lý, bảo trì và mở rộng

2 Tái sử dụng code:

o Các ViewModel và Model có thể được tái sử dụng trong nhiều View khác nhau, giúpgiảm bớt việc viết lại code và đảm bảo tính nhất quán

3 Khả năng kiểm thử:

o Vì ViewModel không chứa bất kỳ logic liên quan đến giao diện người dùng cụ thể,

nó dễ dàng kiểm thử tự động (unit test), giúp phát hiện và sửa lỗi nhanh chóng

4 Hai chiều data binding:

o MVVM cho phép binding dữ liệu hai chiều giữa View và ViewModel Khi dữ liệutrong ViewModel thay đổi, View sẽ tự động được cập nhật và ngược lại, giúp giảm bớtviệc phải viết mã để đồng bộ hóa dữ liệu

5 Dễ dàng bảo trì và mở rộng:

o Sự tách biệt rõ ràng giữa các thành phần giúp ứng dụng dễ bảo trì Khi cần mở rộnghoặc thay đổi, bạn chỉ cần tác động vào thành phần liên quan mà không làm ảnh hưởngđến toàn bộ ứng dụng

6 Tăng hiệu suất phát triển:

o Với các framework hỗ trợ MVVM (như Xamarin, WPF, hoặc Vue.js), việc phát triển

và triển khai ứng dụng trở nên nhanh chóng hơn nhờ việc tận dụng các công cụ và thưviện sẵn có

MVVM là một mẫu thiết kế mạnh mẽ và linh hoạt, giúp cải thiện đáng kể cấutrúc và hiệu suất của ứng dụng, đặc biệt trong các dự án lớn và phức tạp

Nhược điểm:

Mặc dù MVVM (Model-View-ViewModel) có nhiều ưu điểm, nó cũng có một

số nhược điểm và thách thức, đặc biệt là khi không được sử dụng đúng cách hoặctrong những trường hợp không phù hợp Dưới đây là một số nhược điểm chính củaMVVM:

1 Độ phức tạp cao:

o MVVM yêu cầu tách biệt rõ ràng giữa Model, View, và ViewModel, điều này có thểlàm tăng độ phức tạp trong việc thiết kế và phát triển ứng dụng, đặc biệt là đối với các

dự án nhỏ hoặc khi đội ngũ phát triển không có kinh nghiệm với mẫu thiết kế này

2 Thời gian phát triển ban đầu:

o Việc thiết lập và cấu trúc ứng dụng theo mô hình MVVM có thể tốn nhiều thời gianban đầu hơn so với các mẫu thiết kế khác như MVC hay MVP, đặc biệt là khi bạn phảiviết nhiều mã để hỗ trợ việc binding dữ liệu và tạo ViewModel

3 Khó khăn trong việc xử lý UI phức tạp:

o Trong một số trường hợp, đặc biệt là khi giao diện người dùng phức tạp và chứanhiều tương tác trực tiếp, việc quản lý ViewModel có thể trở nên phức tạp và khókhăn, dẫn đến mã nguồn bị phình to hoặc khó bảo trì

4 Khả năng gặp lỗi binding:

o Binding dữ liệu là một trong những yếu tố quan trọng của MVVM, nhưng cũng cóthể trở thành điểm yếu nếu không được xử lý đúng cách Các lỗi binding không hiểnthị rõ ràng và có thể khó khăn trong việc debug, dẫn đến tình trạng ứng dụng hoạtđộng không như mong đợi

5 Overhead trong các ứng dụng nhỏ:

o MVVM có thể là một sự phức tạp không cần thiết đối với các ứng dụng nhỏ hoặcđơn giản, nơi việc tách biệt các thành phần không mang lại nhiều lợi ích mà lại làmtăng độ phức tạp và thời gian phát triển

6 Yêu cầu hiểu biết sâu về pattern:

o Để sử dụng MVVM một cách hiệu quả, các nhà phát triển cần có hiểu biết sâu sắc vềmẫu thiết kế này cũng như cách thức hoạt động của data binding và cách tổ chức mãnguồn một cách hợp lý Điều này có thể đòi hỏi một quá trình học tập và làm quen đốivới những người mới bắt đầu.

7 Vấn đề với hiệu năng:

o Ở những ứng dụng yêu cầu hiệu năng cao, quá trình binding dữ liệu phức tạp giữaView và ViewModel có thể gây ra các vấn đề về hiệu năng, đặc biệt khi làm việc vớilượng lớn dữ liệu hoặc các thao tác liên tục

MVVM là một công cụ mạnh mẽ nhưng không phải lúc nào cũng là lựa chọntối ưu cho mọi dự án Cần cân nhắc kỹ lưỡng về quy mô dự án, yêu cầu cụ thể, và kỹnăng của đội ngũ phát triển trước khi quyết định sử dụng MVVM

1.3 Sự khác nhau MVC, MVP, MVVM

MVC: Phù hợp cho các ứng dụng với cấu trúc đơn giản và yêu cầu quản lýnhiều View từ một Controller Tuy nhiên, nó có thể gặp vấn đề với việc duy trì sự táchbiệt và dễ bị rối trong các ứng dụng lớn

MVP: Tốt cho việc duy trì sự tách biệt giữa View và Presenter, giúp dễ dàngkiểm tra Những việc tái sử dụng logic có thể gặp khó khăn và phụ thuộc vào callback

có thể gây khó khăn trong việc quản lý

MVVM: Rất phù hợp cho các ứng dụng với yêu cầu tái sử dụng mã nguồn cao

và sử dụng data binding Tuy nhiên, nó có thể gây ra sự phức tạp và overhead, đặc biệttrong các ứng dụng đơn giản Chọn mô hình phù hợp nhất phụ thuộc vào yêu cầu cụthể của dự án, cấu trúc đội ngũ phát triển, và công nghệ sử dụng Không có một giảipháp "tốt nhất" mà chỉ có giải pháp phù hợp nhất với hoàn cảnh và nhu cầu của bạn

1.4 Ứng dụng kiến trúc MVVM

Ý tưởng chính của MVVM là tạo mẫu cho phần View và giữ cho các lớp Viewtách biệt khỏi lớp ViewModel Về lý thuyết, việc này cho phép chúng ta thay đổi giaodiện của ứng dụng mà chỉ cần viết lại phần View, các tính năng của View được định

nghĩa trong ViewModel sẽ vẫn tiếp tục được giữ lại như trước Đây chính là chìa khoá

để thiết kế sản phẩm với khả năng bảo trì hệ thống dễ dàng Điều này cũng rất hữu íchcho việc duy trì một chương trình theo thời gian Việc giữ Model tách biệt làm choứng dụng dễ dàng được mở rộng sang lĩnh vực khác mà không cần sao chép mã hoặcphá vỡ kiến trúc đã xây dựng Với việc sử dụng mô hình MVVM, đơn vị phát triển cóthể giao phần View lại cho người thiết kế giao diện (designer) thực hiện công việc của

họ Họ có thể thay đổi giao diện như thế nào tùy thích (tất nhiên là vẫn phải theo mộtquy định nào đó) trong khi DataSource và các tính năng tương tác giữa giao diện vớingười dùng trong ViewModel vẫn giữ nguyên như cũ và hoạt động một cách chínhxác

CHƯƠNG 2: TÀI LIỆU KIẾN TRÚC

PHẦN MỀM 2.1Giới thiệu

Tài liệu này cung cấp một tổng quan kiến trúc toàn diện cho hệ thống bán hoaquả, được phát triển theo mô hình MVVM (Model-View-ViewModel) Mục tiêu củatài liệu là nắm bắt và truyền đạt các quyết định kiến trúc quan trọng đã được thực hiệntrong quá trình phát triển hệ thống

2.1.1 Mục tiêu

Trình bày tổng quan về kiến trúc hệ thống đặt đồ ăn

Mục đích chính của app đặt đồ ăn là để đáp ứng nhu cầu order gọi đồ ăn mộtcách dễ dàng , nhanh chóng và tiện lợi cho khách hàng

Cung cấp quan điểm kiến trúc khác nhau để mô tả khía cạnh của hệ thống dữliệu, logic nghiệp vụ và giao diện người dùng

Đảm bảo các quyết định kiến trúc được truyền đạt rõ ràng đến các bên liên quan

Tài liệu này cung cấp cái nhìn tổng quan về kiến trúc hệ thống của ứng dụngbán hoa quả, được phát triển theo mô hình MVVM (Model-View-ViewModel) Mụctiêu của tài liệu là trình bày cấu trúc và các thành phần chính của hệ thống, giúp choquá trình phát triển, bảo trì và mở rộng ứng dụng diễn ra hiệu quả.

Tài liệu này được tạo ra dựa trên các mô hình thiết kế được xây dựng bằng công

cụ StarUML Các mô hình này bao gồm đặc tả usecase, các sơ đồ lớp, sơ đồ tuần tự,

và các sơ đồ luồng dữ liệu, nhằm đảm bảo rằng kiến trúc hệ thống được mô tả mộtcách rõ ràng và chính xác

2.1.3 Tài liệu tham khảo

[Giáo trình Kiến trúc và thiết kế phần mềm]

[https://learn.microsoft.com/en-us/dotnet/architecture/maui/mvvm]

CNTT Công nghệ thông tin

UML Ngôn ngữ mô hình thống nhất

CSDL Cơ sở dữ liệu

MVVM Model – View – ViewModel

2.3 Các mục tiêu ràng buộc kiến trúc

◆ Ứng dụng cần sẵn sàng 24/7 để người dùng có thể đặt hàng bất kỳ lúc nào màkhông bị gián đoạn.

❖ Chức năng: Hiển thị danh sách sản phẩm phổ biến

Mô tả: Hiển thị danh sách các sản phẩm phổ biến có sẵn trong hệ thống cho ngườidùng

Tác nhân chính: Customer

Mục tiêu: Người dùng có thể thấy các sản phẩm phổ biến hiện có

Điều kiện: Có sản phẩm trong cơ sở dữ liệu

Dòng sự kiện chính:

Người dùng truy cập vào ứng dụng tại trang Home Hệ thống truy vấn cơ sở dữliệu để lấy danh sách sản phẩm Hệ thống hiển thị danh sách sản phẩm phổ biến chongười dùng

❖ Chức năng: Tìm kiếm

Mô tả: Cho phép người dùng tìm kiếm sản phẩm theo từ khoá.

Tác nhân chính: Customer

Mục tiêu: Người dùng có thể tìm thấy sản phẩm theo yêu cầu

Điều kiện: Hệ thống có sản phẩm và chức năng tìm kiếm hoạt động

Dòng sự kiện chính:

Người dùng nhập từ khóa tìm kiếm vào thanh tìm kiếm Hệ thống truy vấn cơ

sở dữ liệu để tìm các sản phẩm phù hợp Hệ thống hiển thị danh sách sản phẩm khớpvới từ khóa tìm kiếm

Dòng sự kiện thay thế:

Không có sản phẩm: Hệ thống hiển thị thông báo "Không tìm thấy sản phẩmnào." Người dùng nhập lại từ khoá khác tìm kiếm

❖ Chức năng: Hiển thị thông tin chi tiết sản phẩm

Mô tả: Hiển thị thông tin chi tiết của một sản phẩm cụ thể khi người dùng chọn xem

Tác nhân chính: Customer

Mục tiêu: Người dùng có thể xem chi tiết sản phẩm

Điều kiện: Sản phẩm tồn tại trong hệ thống

❖ Chức năng: Thêm vào giỏ hàng

Mô tả: Thêm sản phẩm vào giỏ hàng của người dùng

Tác nhân chính: Customer

Mục tiêu: Người dùng có thể thêm sản phẩm vào giỏ hàng để mua sau

Tiền điều kiện: Sản phẩm tồn tại và có sẵn để bán

Dòng sự kiện chính:

Ở trang chi tiết sản phẩm Người dùng chọn sản phẩm và nhấn nút "Thêm vàogiỏ hàng" Hệ thống kiểm tra tính khả dụng của sản phẩm Hệ thống thêm sản phẩmvào giỏ hàng của người dùng Hệ thống thông báo sản phẩm đã được thêm vào giỏhàng thành công

Mục tiêu: Người dùng có thể hoàn tất việc mua hàng

Điều kiện: Người dùng đã đăng nhập và có sản phẩm trong giỏ hàng

Dòng sự kiện chính:

Người dùng truy cập vào giỏ hàng và nhấn "Đặt hàng" Hệ thống kiểm tra thôngtin giao hàng và thanh toán Hệ thống xử lý thanh toán qua cổng thanh toán Hệ thốngxác nhận đơn hàng thành công và thông báo cho người dùng Hệ thống cập nhật trạngthái đơn hàng và kho hàng.

Dòng sự kiện thay thế:

Thanh toán thất bại: Hệ thống hiển thị thông báo lỗi và yêu cầu người dùng thửlại

❖ Chức năng: Xem lịch sử danh sách đơn hàng đã đặt

Mô tả: Cho phép người dùng xem lại các đơn hàng đã đặt trước đây

Tác nhân chính: Customer

Mục tiêu: Người dùng có thể xem lại lịch sử mua hàng

Tiền điều kiện: Người dùng đã đặt hàng trước đó

Dòng sự kiện chính:

Người dùng truy cập vào trang lịch sử đơn hàng Hệ thống truy vấn dữ liệu lịch

sử đơn hàng của người dùng Hệ thống hiển thị danh sách các đơn hàng đã đặt.Dòng sự kiện thay thế

Không có đơn hàng: Hệ thống hiển thị thông báo "Không có đơn hàng nào."

❖ Chức năng: Feedback

Biểu đồ UseCase tổng quát

2.5 Sơ đồ hoạt động

Biểu đồ này mô tả luồng hoạt động của hệ thống đặt đồ ăn trực tuyến

Hiển thị danh sách sản phẩm

Hiển thị danh sách sản phẩm gợi ý

Hiển thị thông tin chi tiết sản phẩm

Thêm sản phẩm