Báo cáo tìm hiểu mô hình mvvm

LỜI CẢM ƠN Nhƣ hai năm học trƣờng Đại học Quang Trung kết thúc Đến lúc nghĩ thật may mắn đƣợc vào học trƣờng Cơ sở vật chất trƣờng tốt, thầy cô giảng viên nhiệt tình, thầy cô ban giám hiệu trƣờng chăm lo tới sinh viên, tất điều để lại cho ấn tƣợng khó quên Đặc biệt xin dành nhiều tình cảm đến thầy cô Công nghệ Thông tin Trong suốt hai năm học liên thông trƣờng, thầy cô tận tình chăm lo, dẫn dắt trình học tập Trƣớc vào học trƣờng, chƣa nghĩ thầy cô lại quan tâm, thân thiết với sinh viên đến nhƣ Tôi xin hứa cố gắng sống xứng đáng với mà thầy cô dạy bảo Báo cáo đồ án tốt nghiệp, kỳ thi quan trọng đời sinh viên, kỳ thi thể chứng tỏ sinh viên học đƣợc suốt năm học trƣờng Tôi sau hai năm nỗ lực, thật vinh tự hào đƣợc tham dự kỳ báo cáo đồ án tốt nghiệp Trong suốt ba tháng, dựa vào nỗ lực thân, đƣợc giúp đỡ thầy cô, hoàn thành báo cáo đồ án tốt nghiệp chuyên ngành Công nghệ Thông tin Tôi xin chân thành cảm ơn thầy Thạc sĩ Đỗ Minh Đức, thầy tận tình bảo, hƣớng dẫn tôi, giúp hoàn thành đồ án Một lần nữa, xin cảm ơn tất thầy cô, bạn bè bảo, giúp đỡ học tập nhƣ đời sống Tôi nhớ điều nhƣ kỷ niệm khó quên đời sinh viên Tôi xin chân thành cảm ơn! Quy nhơn, ngày 18 tháng năm 2017 Sinh viên thực Nguyễn Thị Lệ -1- TÓM TẮT ĐỒ ÁN Đồ án tốt nghiệp trình bày số hiểu biết mô hình MVVM (Model View ViewModel) nhƣ vai trò thành phần MVVM lập trình WPF (Windows Presentation Foundation) Tăng tính hiệu tƣơng tác designer developer, tăng khả sử dụng lại component, thay đổi giao diện chƣơng trình mà không cần thiết phải viết lại code nhiều mà chọn MVVM để nghiên cứu Qua xây dựng phần mềm quản lý bán cà phê Phần mềm giúp thực công việc quán cà phê, quản lý thông tin cà phê nhƣ việc bán hàng Phần đồ án tập trung giải thích mô hình MVVM lập trình WPF Các lớp mô hình MVVM Model Model đối tƣợng giúp truy xuất thao tác tên liệu thực Đơn vị Model Class ViewModel ViewModel lớp trung gian View Model ViewModel đƣợc xem thành phần thay cho Controller mô hình MVC Nó chứa mã lệnh cần thiết để thực data binding, command ViewModel không mô tả giao diện trông nhƣ Nó mô tả cách mà View hoạt động thông tin đƣợc cung cấp cho ngƣời dùng View View phần giao diện ứng dụng để hiển thị liệu nhận tƣơng tác ngƣời dùng Một điểm khác biệt so với mô hình MVC, có khả thực hành vi phản hồi lại ngƣời dùng thông quan tính binding, command Sự kết nối thành phần MVVM tạo mẫu cho phần View giữ cho View class tách biệt khỏi ViewModel, tính đƣợc định nghĩa ViewModel, element nằm View đƣợc kết nối tới Properties ViewModel data bingding, ViewModel lấy liệu từ Model Một điểm cần lƣu ý mô hình -2- MVVM tầng bên dƣới đƣợc thông tin tầng bên Nhƣ hình minh họa bên dƣới: Phần cuối đồ án phần mềm phần mềm ứng dụng với thành đạt đƣợc nhƣ nắm đƣợc quy trình phần mềm quản lý bán cà phê, xây dựng đƣợc sở liệu giao diện cho chƣơng trình quản trị sở liệu SQL Server [1] Visual Studio [2] Xây dựng số chức chƣơng trình nhƣ quản lý danh mục cà phê, quản lý nguyên liệu, quản lý bán hàng, thống kê doanh thu áp dụng mô hình MVVM -3- MỤC LỤC LỜI CẢM ƠN TÓM TẮT ĐỒ ÁN MỤC LỤC DANH MỤC CÁC TỪ VIẾT TẮT DANH MỤC CÁC HÌNH DANH MỤC CÁC BẢNG MỞ ĐẦU CHƢƠNG TÌM HIỂU VỀ MÔ HÌNH MVVM 11 1.1 Giới thiệu mô hình MVVM 11 1.1.1 Quá trình hình thành Model-View-ViewModel 11 1.1.2 Tại lập trình viên WPF thích dùng MVVM? 14 1.1.3 Đặc điểm mô hình MVVM 16 1.2 Các lớp mô hình MVVM 17 1.3 So sánh mô hình MVC, MVP MVVM 31 1.3.1 Mô hình MVC 31 1.3.2 Mô hình MVP 32 1.3.3 Mô hình MVVM 33 1.3.4 Khi sử dụng mô hình MVC, MVP, MVVM 36 CHƢƠNG 2: TỔNG QUAN VỀ LẬP TRÌNH WPF VÀ NGÔN NGỮ ĐÁNH DẤU XAML 37 2.1 WPF gì? 38 2.2 Khác biệt lớn WPF window Form 39 2.3 Sử dụng Entity framework Code first với CSDL SQL Server có sẵn 39 2.4 XAML gì? 46 2.5 Tại lại sử dụng ngôn ngữ đánh dấu XAML? 47 -4- 2.6 Một số công cụ ngôn ngữ đánh dấu XAML 49 2.7 Kết luận 53 CHƢƠNG PHÂN TÍCH THIẾT KẾ HỆ THỐNG PHẦN MỀM 55 3.1 Thực tế toán 55 3.2 Chức năng, nhiệm vụ 55 3.3 Khảo sát nghiệp vụ hệ thống phần mềm bán cà phê 56 3.3.1 Cơ cấu tổ chức 56 3.3.2 Biểu đồ phân cấp chức 57 2.3.3 Biểu đồ sử dụng (Use case) 58 3.3.4 Xây dựng biểu đồ lớp 59 CHƢƠNG XÂY DỰNG PHẦN MỀM BÁN CÀ PHÊ VỚI MÔ HÌNH MVVM [5] 60 4.1 Giao diện quản lý 60 4.2 Giao diện bán hàng 61 4.3 Kết hƣớng phát triển 64 TÀI LIỆU THAM KHẢO 65 -5- DANH MỤC CÁC TỪ VIẾT TẮT Ý nghĩa Từ viết tắt MVVM Model View ViewModel WPF Windows Presentation Foundation XAML Extensible Application Markup Language (ngôn ngữ đánh dấu ứng dụng mở rộng) API Application Programming Interface (giao diện lập trình ứng dụng) GUI Graphical User Interface (giao diện đồ họa ngƣời dùng) OOP Object Oriented Programming (lập trình hƣớng đối tƣợng) LINQ Language Integrate Query (ngôn ngữ truy vấn tích hợp) CSDL Cơ sở liệu -6- DANH MỤC CÁC HÌNH Hình Kiến trúc mô hình lập trình MVVM 13 Hình Quy trình mô hình MVVM 15 Hình Mô hình MVC 31 Hình Mô hình MVP 32 Hình Mô hình MVVM 34 Hình Giao diện designer WPF 37 Hình Màn hình cập nhật Entity Framework Power Tools 41 Hình Màn hình cài đặt Entity Framework Power Tools 41 Hình Kết nối với Database 43 Hình 10 Hình quản lý bán 60 Hình 11 Hình quản lý khu vực 60 Hình 12 Hình quản lý Món 61 Hình 13 Hình giao diện bán hàng 61 -7- DANH MỤC CÁC BẢNG Bảng So sánh mô hình MVC, MVP MVVM 36 Bảng Đối chiếu công nghệ có WPF 39 Bảng Bảng so sánh công cụ hỗ trợ XAML 51 -8- MỞ ĐẦU Lý chọn đề tài Kể từ Microsoft giới thiệu hai tảng phát triển ứng dụng WPF Silverlight, có nhiều thay đổi việc xử lý kiện binding liệu, tầng ứng dụng với Qua đó, hầu hết công việc tầng kết hợp với lớp presentation Điều làm nảy sinh nhu cầu phải có mô hình phát triển ứng dụng phù hợp Và đó, Model – View – ViewModel (MVVM) pattern đời ngày trở nên phổ biến Tăng tính hiệu tƣơng tác designer developer, tăng khả sử dụng lại component, thay đổi giao diện chƣơng trình mà không cần thiết phải viết lại code nhiều mà chọn MVVM để nghiên cứu Qua xây dựng phần mềm quản lý bán cà phê Phần mềm giúp thực quản lý thông tin cà phê nhƣ việc bán hàng Mục đích nghiên cứu đề tài Việc thực xây dựng hệ thống giúp nắm vững, hiểu rõ mô hình MVVM lập trình WPF nhƣ phần mềm xây dựng hỗ trợ cho phần mềm ứng dụng Phần mềm giúp cho việc quản lý công việc quán cà phê trở nên đơn giản, nhanh chóng thuận tiện Phần mềm có giao diện hài hòa, dễ nhìn, linh hoạt, động đáp ứng đƣợc yêu cầu ngày cao công tác quản lý bán cà phê, quản lý danh mục món… nhu cầu ngƣời sử dụng Ý nghĩa khoa học thực tiễn Sau hoàn thiện đề tài tiến hành viết phần mềm thành công phần mềm bƣớc đầu đƣợc triển khai số cửa hàng vừa nhỏ, nhằm giúp cho vấn đề quản lý mua bán của hàng đƣợc diễn cách thuận lợi Phần mềm áp dụng vào sống hàng ngày để quản lý bán cà phê, danh mục cà phê địa điểm toàn quốc có nhu cầu mà đến ngƣời có kiến thức công nghệ sử dụng Cấu trúc đề tài -9- Chƣơng 1: Cơ sở lý thuyết trình bày mô hình MVVM lập trình WPF với điểm mạnh điểm yếu so với số mô hình học nhƣ MVC, MVP Chƣơng 2: Tổng quan lập trình WPF ngôn ngữ đánh dấu XAML Một số công cụ hỗ trợ mô hình MVVM Chƣơng 3: Phân tích hệ thống phần mềm quản lý bán cà phê dựa mô hình nghiên cứu MVVM nhƣ nghiệp vụ hệ thống, biểu đồ use case, biểu đồ lớp Chƣơng 4: Xây dựng phần mềm bán cà phê với giao diện dễ nhìn, đơn giản Kết luận với làm đƣợc qua đề tài nhƣ kinh nghiệm tích lũy cho thân hƣớng phát triển cao để phần mềm phổ biến -10- Animation Không Đơn giản Trực quan Không Bảng Bảng so sánh công cụ hỗ trợ XAML XAML Round-trip khả thay đổi mã XAML giao diện thay đổi ngƣợc lại – thay đổi giao diện mã XAML đƣợc cập nhật Nhƣ bảng 5.1, ta thấy có Expression Blend Visual Studio 2013 hỗ trợ tính theo chiều Còn công cụ lại hỗ trợ theo chiều: thay đổi giao diện cập nhật đƣợc mã XAML Xây dựng ứng dụng mẫu Nếu bạn bắt đầu cảm thấy mệt mỏi với đống lý thuyết kia? Hoặc bạn ngƣời coi thực hành hết mục bạn cần Trong mục xây dựng ứng dụng WPF đơn giản để trình bày tuyệt vời XAML việc kết hợp Designer Developer Trƣớc tiên, mở Microsoft Expression Blend, tạo project Ở đây, đặt tên project Designer Vẽ hình chữ nhập công cụ Rectangle, dùng công cụ Pencil vẽ mặt ngƣời cƣời lên Thực Group chúng lại thành Canvas, sau vào Tool => Make button để tạo chúng thành control button Nhƣ xong công việc Designer, tùy vào khiếu vẽ bạn mà hình thù nút khác nhƣng có lẽ này: Trong Microsoft Expression Blend, để chuyển đổi chế độ thiết kế trực quan chế độ viết mã bạn dùng phím F11 F12 Đoạn code tƣơng ứng với mặt cƣời kia: Code 6.1: Mã XAML tƣơng ứng -51-