Đề cương môn công nghệ web- Trường Đại học bách khoa - Đại học đà nẵng.

TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO
PBL5 - ĐỒ ÁN KỸ THUẬT MÁY TÍNH
HỆ THỐNG ĐIỂM DANH LỚP HỌC DÙNG NHẬN DIỆN GƯƠNG MẶT
Cán bộ doanh nghiệp hướng dẫn: Trần Phương Nam – B.A.P
Giảng viên đồng hướng dẫn: TS. Ninh Khánh Duy STT NHÓM: 24
LỚP HỌC PHẦN ĐỒ ÁN
HỌ VÀ TÊN SINH VIÊN CHÂU TRƯỜNG LONG 18N14B TRẦN CHÍ MINH 18N14B LÊ ANH TUẤN 18N14B HỒ NGUYÊN VŨ 18N14B ĐÀ NẴNG, 06/2021 TÓM TẮT ĐỒ ÁN
Hiện nay, với tốc độ phát triển nhanh chống của công nghệ thông tin và được
ứng dụng rộng rãi trong nhiều lĩnh vực của xã hội. Trong đó hệ thống tự động hóa là
một phần không thể thiếu.
Ở các trưởng học hiện nay, việc điểm danh trước mỗi giờ học không còn xa lạ.
Nhưng nó diễn ra một các thủ công, vì là thủ công nên mất khá nhiều thời gian 10 -15
phút cho việc điểm danh. Nắm bắt được yếu điểm đó nên ý tưởng cho việc điểm danh
tự động rất cần thiết.
Để xây dựng được hệ thống đó chúng ta cần các thành phần riêng biệt để xử lý
từng công việc một. Như camera cho việc ghi hình, server cho việc xử lý điểm danh,
cơ sở dữ liệu cho việc lưu trữ và một mobile app giao diện hoàn chỉnh để giáo viên
hoặc giảng viên có thể quản lý được.
Từ các hệ thống con đó, yêu cầu truyền thông kết nối giữa chúng củng là một
vấn đề nan giải vì các hệ thống con này hoạt động nên các nền tảng riêng biệt. Do đó
giải pháp ở đây là sẽ cung cấp các API (giao diện lập trình ứng dụng) cho các hệ thống
con có thể kết nối với nhau.
Cuối cùng xin chân thành cảm ơn thầy TS. Ninh Khánh Duy và anh Trần
Phương Nam – Công ty B.A.P đã nhiệt tình hướng dẫn, gợi ý những giải pháp tuyệt
vời để chúng em có thể hoàn thành được dự án này.
BẢNG PHÂN CÔNG NHIỆM VỤ
Sinh viên thực hiện Các nhiệm vụ Kết quả
-Face Detection – Haarcascade , MTCNN ✓ Đã hoàn thành -Face Encoder – Facenet ✓ Đã hoàn thành
-Face Identifier – SVM, KNN, FAISS ✓ Đã hoàn thành Châu Trường Long -Backend API – Django ✓ Đã hoàn thành -Raspberry Server – Camera ✓ Đã hoàn thành -Data Agumentation ✓ Đã hoàn thành -Mockup GUI ✓ Đã hoàn thành -Mobile App ✓ Đã hoàn thành Trần Chí Minh -API Connection ✓ Đã hoàn thành -SRS Document ✓ Đã hoàn thành -Crawl Data ✓ Đã hoàn thành -Mockup GUI ✓ Đã hoàn thành Lê Anh Tuấn -Mobile App ✓ Đã hoàn thành -API Connection ✓ Đã hoàn thành -Sequence Diagram ✓ Đã hoàn thành -Database – MySQL (Using) ✓ Đã hoàn thành
-Database – MongoDB – NoSQL (Tested) ✓ Đã hoàn thành Hồ Nguyên Vũ -API – Django ✓ Đã hoàn thành -Usecase Diagram ✓ Đã hoàn thành -API document ✓ Đã hoàn thành MỤC LỤC 1.
GIỚI THIỆU .......................................................................................................... 6 2.
GIẢI PHÁP ............................................................................................................ 6 2.1.
TỔNG QUAN HỆ THỐNG .................................................................................... 6 2.2.
GIẢI PHÁP PHẦN CỨNG ..................................................................................... 7 2.3.
GIẢI PHÁP TRUYỀN THÔNG ............................................................................... 8
2.3.1. Kết nối có dây .............................................................................................. 8
2.3.2. RESTful API ................................................................................................. 8 2.4.
GIẢI PHÁP PHẦN MỀM ....................................................................................... 9
2.4.1. Tổng quan về hệ thống nhận diện ................................................................ 9
2.4.2. Face encoder ................................................................................................ 9
2.4.3. Face detector ............................................................................................. 12
2.4.4. Face identifier ............................................................................................ 12
2.4.5. Database .................................................................................................... 13
2.4.6. Raspberry ................................................................................................... 13
2.4.7. Server ......................................................................................................... 14
2.4.8. Mobile ........................................................................................................ 17 3.
KẾT QUẢ ............................................................................................................. 27 3.1.
KẾT QUẢ NHẬN DIỆN ...................................................................................... 27 3.2.
KẾT QUẢ API.................................................................................................. 28 3.3.
KẾT QUẢ MOBILE ........................................................................................... 29 4.
KẾT LUẬN ........................................................................................................... 33 5.
TÀI LIỆU THAM KHẢO ................................................................................... 33
MỤC LỤC HÌNH ẢNH
Hình 1. Tổng quan hệ thống ............................................................................................ 6
Hình 2. Raspberry pi 3 ..................................................................................................... 7
Hình 3. Camera ................................................................................................................ 7
Hình 4. Hệ thống nhận diện ............................................................................................. 9
Hình 5. Facenet layers [11] ............................................................................................ 10
Hình 6. Siam network .................................................................................................... 11
Hình 7. Triple loss.......................................................................................................... 11
Hình 8. Face detection ................................................................................................... 12
Hình 9. Database diagram .............................................................................................. 13
Hình 10. Mouckup ......................................................................................................... 18
Hình 11. Mô hình MVVM [10] ..................................................................................... 18
Hình 12. Sơ đồ thành phần [10] ..................................................................................... 19
Hình 13. Cấu trúc thư mục ............................................................................................. 20
Hình 14. Usecase ........................................................................................................... 22
Hình 15. Đăng ký sequence ........................................................................................... 23
Hình 16. Đăng nhập sequence ....................................................................................... 23
Hình 17. Điểm danh sequence ....................................................................................... 24
Hình 18. Quản lý học sinh sequence .............................................................................. 25
Hình 19. Xem lịc sử sequence ....................................................................................... 26
Hình 20. Lấy lại mật khẩu sequence .............................................................................. 26
Hình 21. 512 chiều ......................................................................................................... 28
Hình 22. 128 chiều ......................................................................................................... 28
Hình 23. Login ............................................................................................................... 30
Hình 24. Màn hình chính ............................................................................................... 31
Hình 25. Điểm danh ....................................................................................................... 31
Hình 26. Thống kê kết quả điểm danh ........................................................................... 32
Hình 27. Giao diện khác ................................................................................................ 33 1. Giới thiệu
Hiện nay có rất nhiều loại hệ thống chấm công và điểm danh tự động khác nhau
như: vân tay, thẻ từ, đặc biệt trong đó là hệ thống nhận diện gương mặt sử dụng các mô hình deep learning.
Các hệ thống này thường được đặt trước cửa ra vào, cự ly gần. Do đó dự án này sẽ
phát triển hệ thống chấm công dùng nhận diện gương mặt và cung cấp các giải pháp
nghiệp vụ để quản lý thông qua mobile app. 2. Giải pháp
2.1. Tổng quan hệ thống
Hình 1. Tổng quan hệ thống
- Để giải quyết bài toán phức tạp: Từ một hệ thống lớn phức tạp, sẽ đi chia hệ thống
đó thành các hệ thống con nhỏ hơn, đơn giản hơn mỗi hệ thống đó sẽ đảm nhận
một phần công việc khác nhau.
- Như ở sơ đồ trên có thể thấy nó gồm 4 hệ thống con: ❖ Raspberry server ❖ Main server ❖ Mobile app ❖ Database
2.2. Giải pháp phần cứng Tên linh kiện Hình ảnh Mô tả
-Raspberry Pi có các thành phần chính như: 1. CPU ARM Cortex-A53 Quadcore 1.2GHz 2. GPU Raspberry Pi 3 3. RAM 1GB 4. Khe cắm thẻ microSD 5. Wifi 802.11n
Hình 2. Raspberry pi 3 6. Bluetooth 4.1 7. 4 cổng USB
-Hệ điều hành: Raspbian 64 bit -Camera xiami Camera -Độ phân giải: 1080P -Kết nối: USB, Wifi Hình 3. Camera
2.3. Giải pháp truyền thông
2.3.1. Kết nối có dây
- Camera kết nối với raspberry thông qua cổng dây USB
- Raspberry kết nối với server thông dây enthernet 2.3.2. RESTful API
API (Application Programming Interface) là một tập các quy tắc và cơ chế mà theo
đó, một ứng dụng hay một thành phần sẽ tương tác với một ứng dụng hay thành phần
khác. API có thể trả về dữ liệu mà bạn cần cho ứng dụng của mình ở những kiểu dữ
liệu phổ biến như JSON hay XML [8].
REST (REpresentational State Transfer) là một dạng chuyển đổi cấu trúc dữ liệu,
một kiểu kiến trúc để viết API. Nó sử dụng phương thức HTTP đơn giản để tạo cho
giao tiếp giữa các máy. Vì vậy, thay vì sử dụng một URL cho việc xử lý một số thông
tin người dùng, REST gửi một yêu cầu HTTP như GET, POST, DELETE, vv đến một
URL để xử lý dữ liệu [8].
RESTful API là một tiêu chuẩn dùng trong việc thiết kế các API cho các ứng dụng
web để quản lý các resource. RESTful là một trong những kiểu thiết kế API được sử
dụng phổ biến ngày nay để cho các ứng dụng (web, mobile…) khác nhau giao tiếp với nhau [8].
REST hoạt động chủ yếu dựa vào giao thức HTTP. Các hoạt động cơ bản nêu trên
sẽ sử dụng những phương thức HTTP riêng [8]:
▪ GET (SELECT): Trả về một Resource hoặc một danh sách Resource.
▪ POST (CREATE): Tạo mới một Resource.
▪ PUT (UPDATE): Cập nhật thông tin cho Resource.
▪ DELETE (DELETE): Xoá một Resource.
2.4. Giải pháp phần mềm
2.4.1. Tổng quan về hệ thống nhận diện
Hình 4. Hệ thống nhận diện 2.4.2. Face encoder
- Face encoder: là một module trong hệ thống được dùng để trích xuất đặc trưng
của một gương mặt có trong bức ảnh.
- Sử dụng model facenet để đi trích xuất đặc trưng. Facenet gồm có hai thành
phần chính đó là siam network và triple loss function - Layers của Facenet [11]:
Hình 5. Facenet layers [11] - Siam network:
• Siam network [9] với tên đầy đủ là Siamese Neural Network, dựa trên một
mạng nơron tích chập (CNN) đã lược bỏ đi output layer. Kiến trúc mạng này
sinh ra với mục đích giải quyết bài toán liệu từ hai bức ảnh chứa mặt người
chụp trong hoàn cảnh khác nhau thì có phải cùng một người không.
• Siam network được ứng dụng cho các bài toán thực tế như: điểm danh,
chấm công, hay mở chức năng mở khóa điện thoại bằng gương mặt, …
Siam network được giới thiệu lần đầu trong bài báo [1] “DeepFace: Closing
the Gap to Human-Level - Yaniv Taigman. elt.”
• Input của mạng Siam là hai bức ảnh bất kì, Output là hai vector đặc trưng
của bức ảnh. Mà vector đặc trưng biểu diễn ở dạng số học nên có thể sử
dụng chúng để kiểm tra xem độ tương đồng giữa các bức ảnh bằng cách đưa
vào một loss function. Hàm loss thường được dùng là một norm bậc 2.
• Công thức Norm bậc 2 có dạng: ||�(��) − �(��)||� � Hình 6. Siam network - Triple loss function [9]:
• Triple loss sử dụng một khái niệm gọi là anchor. Cụ thể trong hệ thống này
sẽ là anchor image. Anchor image này sẽ là các bức ảnh gốc của sinh viên
như ảnh thẻ 3x4, nói chúng bức ảnh này là cố định.
• Như tên của loss function này là triple nên sẽ cần đến 3 bức ảnh: một là
anchor, hai là positive và ba là negative. Hình 7. Triple loss
• Mục tiêu là tối thiểu hóa khoảng cách giữa 2 ảnh khi chúng là negative và
tối đa hóa khoảng cách khi chúng là positive. Thật ra có thể hiểu đơn giản là
triple loss có thể kết hợp từ hai norm loss function. Do đó công thức là: �
ℒ(�, �, �) = ∑ max (| �(��) − �(��)| 2 − ||�(��) − �(��)| 2 + �, 0) 2 2 �=0
• Do đó khi đưa lần lượt bộ ba hình ảnh vào train model thì model sẽ học
được cả trường hợp sai lẫn đúng. 2.4.3. Face detector
- Face detection là một module trong hệ thống dùng để xác định các gương mặt
có trong bức ảnh và đánh dấu bằng bounding box.
- Sử dụng hai model chính đó là Haarcascade và MTCNN.
Hình 8. Face detection 2.4.4. Face identifier
- Face identifier là một module trong hệ thống dùng để nhận dạng một gương mặt
đó là ai hay thuộc về một nhãn nào đó, sau khi đã trích xuất được đặc trưng của
gương mặt thành vector 128 chiều hoặc 512 chiều.
- Sử dụng ba classifier model SVM, KNN và FAISS (Facebook AI Similarity Search)
- SVM [12] là một thuật toán giám sát, nó có thể sử dụng cho cả việc phân loại
hoặc đệ quy. Tuy nhiên nó được sử dụng chủ yếu cho việc phân loại. Trong
thuật toán này, chúng ta vẽ đồi thị dữ liệu là các điểm trong n chiều ( ở đây n là
số lượng các tính năng bạn có) với giá trị của mỗi tính năng sẽ là một phần liên
kết. Sau đó chúng ta thực hiện tìm "đường bay" (hyper-plane) phân chia các
lớp. Hyper-plane nó chỉ hiểu đơn giản là 1 đường thẳng có thể phân chia các
lớp ra thành hai phần riêng biệt.
Support Vectors hiểu một cách đơn giản là các đối tượng trên đồ thị tọa độ quan
sát, Support Vector Machine là một biên giới để chia hai lớp tốt nhất.
- KNN (K-Nearest Neighbors) [13] là một trong những thuật toán học có giám
sát đơn giản nhất được sử dụng nhiều trong khai phá dữ liệu và học máy. Ý
tưởng của thuật toán này là nó không học một điều gì từ tập dữ liệu học (nên
KNN được xếp vào loại lazy learning), mọi tính toán được thực hiện khi nó cần
dự đoán nhãn của dữ liệu mới.
Lớp (nhãn) của một đố
i tượng dữ liệu mới có thể dự đoán từ các lớp (nhãn) của k hàng xóm gần nó nhất.
- Facebook AI Similarity Search (FAISS) [14] là một thư viện sử dụng
similiarity search cùng với clustering các vector. Faiss được nghiên cứu và phát
triển bởi đội ngũ Facebook AI Research; được viết trong C++ và đóng gói trên
môi trường Python. Bộ thư viện bao gồm các thuật toán tìm kiếm vector đa
chiều trong similarity search 2.4.5. Database
- Database sử dụng là dạng truy vấn có cấu trúc SQL, trên nền tảng MySQL.
Hình 9. Database diagram 2.4.6. Raspberry
- Raspberry là thành phần phần cứng kết nối trực tiếp với camera. Để có thể điều
khiển được camera thì raspberry bắt buộc phải có một module server chạy trong
nó nhằm cung cấp các API cho các thành phần khác trong hệ thống có thể kết nối đến.
- Xây dựng API cho raspberry sẽ sử dụng django framework, restful API.
❖ http://host:port/raspberry/camera/open// ▪ Method: GET
▪ Parameters: “id của camera”
▪ Function: Mở camera sẵn sàng cho việc ghi hình
❖ http://host:port/raspberry/camera/capture/ ▪ Method: GET ▪ Parameters: None
▪ Function: Đọc frame từ camera
❖ http://host:port/raspberry/camera/close/ ▪ Method: GET ▪ Parameters: None ▪ Function: Tắt camera 2.4.7. Server
- Server là thành phần chính cực kỳ quan trọng trong hệ thống. Nó sẽ cũng cấp
các API chính cho toàn bộ hệ thống, các API này sẽ được gọi ở phía client là mobile app.
- Xây dựng API cho server sẽ sử dụng django framework, restful API. Các API
chia theo các chức năng của cùng một đối tượng. Account (5 APIs)
❖ http://host:port/account/login/ ▪ Method: POST ▪ Parameters: None ▪ Function: Đăng nhập
❖ http://host:port/account/password/update/ ▪ Method: PUT ▪ Parameters: None
▪ Function: Đổi mật khẩu
❖ http://host:port/account/password/reset// ▪ Method: GET ▪ Parameters: “email”
▪ Function: Gửi yêu cầu reset mật khẩu
❖ http://host:port/account/password/reset//n>/ ▪ Method: GET, POST
▪ Parameters: “email mã hóa base 64”, “chuỗi ngẫu nhiên”
▪ Function: Link tạm thời dẫn đến form đổi mật khẩu
❖ http://host:port/account/signup/// ▪ Method: POST
▪ Parameters: “email mã hóa base 64”, “chuỗi ngẫu nhiên”
▪ Function: Link để kích hoạt tài khoản Lecturer (2 APIs)
❖ http://host:port/lecturer/detail// ▪ Method: GET
▪ Parameters: “id giảng viên”
▪ Function: Lấy thông tin giảng viên
❖ http://host:port/lecturer/update/ ▪ Method: PUT ▪ Parameters: None
▪ Function: Cập nhật thông tin giảng viên Subject (3 APIs)
❖ http://host:port/subject/list/// ▪ Method: GET
▪ Parameters: “id giảng viên”, “thứ muốn lấy”
▪ Function: Danh sách môn học
❖ http://host:port/subject/create/ ▪ Method: POST ▪ Parameters: None
▪ Function: Tạo môn học mới
❖ http://host:port/subject/time_slot/list/// ▪ Method: GET
▪ Parameters: “id phòng học”, “thứ muốn lấy”
▪ Function: Lấy slot của phòng học trong ngày hôm đó Student (1 API)
❖ http://host:port/student/list// ▪ Method: GET
▪ Parameters: “id môn học”
▪ Function: Lấy danh sách sinh viên Room (3 APIs)
❖ http://host:port/room/list/ ▪ Method: GET ▪ Parameters: None
▪ Function: Lấy danh sách phòng học
❖ http://host:port/room/update/ ▪ Method: PUT ▪ Parameters: None
▪ Function: Cập nhật phòng học
❖ http://host:port/room/create/ ▪ Method: POST ▪ Parameters: None ▪ Function: Tạo phòng Process (2 APIs)
❖ http://host:port/attendance/process/create// ▪ Method: GET
▪ Parameters: “id môn học”
▪ Function: Tạo process điểm danh
❖ http://host:port/attendance/process/state// ▪ Method: GET
▪ Parameters: “id process”
▪ Function: Lấy trạng thái của process Attendance (6 APIs)
❖ http://host:port/attendance/list// ▪ Method: GET
▪ Parameters: “id process”
▪ Function: Lấy danh sách điểm danh
❖ http://host:port/attendance/update//d>/ ▪ Method: PUT
▪ Parameters: “id môn học”, “id process”
▪ Function: Cập nhật tiến trình điểm danh
❖ http://host:port/attendance/history/list/// ▪ Method: GET
▪ Parameters: “id môn học”, “ngày muốn lấy”
▪ Function: Lấy lịch sử điểm danh
❖ http://host:port/attendance/history/latest/// ▪ Method: GET
▪ Parameters: “id môn học”, “ngày muốn lấy”
▪ Function: Lấy lịch sử điểm danh gần nhất
❖ http://host:port/attendance/history/detail// ▪ Method: GET
▪ Parameters: “id môn học”
▪ Function: Chi tiết lịch sử điểm danh
❖ http://host:port/attendance/history/subject// ▪ Method: GET
▪ Parameters: “id môn học”
▪ Function: Lấy file PDF thống kê danh sách điểm danh 2.4.8. Mobile:
- Bài toán cần giải quyết:
Xây dựng app mobile dành cho giáo viên tương tác với hệ thống gồm những chức năng sau:
▪ Hiển thị lịch dạy của giáo viên theo thứ ngày trong tuần (Bao gồm
các thông tin chi tiết của môn học và danh sách sinh viên)
▪ Kích hoạt camera yêu cầu hệ thống điểm danh tự động.
▪ Xem lịch sử điểm danh bao gồm số sinh viên có mặt/vắng trong
lớp học, chỉnh sửa thủ công qua danh sách Known/Unknown, lưu kết quả quá trình.
▪ Hiển thị đồ thị pie-chart, bảng biểu về số lượng sinh viên tham gia
môn học trong các tuần liên tiếp, cảnh báo cho giáo viên các sinh
viên thường xuyên vắng mặt.
▪ Xem, sửa thông tin cá nhân người dùng.
- Công nghệ sử dụng: Xamarin (android)
- Đối tượng người dùng: Giảng viên.
- Triển khai ý tưởng • Mockup Hình 10. Mouckup
- Mô hình triển khai ứng dụng: Mô hình MVVM (Model – View-ViewModel). a. Giới thiệu:
Hình 11. Mô hình MVVM [10]
Hiện nay, đã có nhiều thay đổi trong việc xử lý sự kiện và binding dữ liệu, giữa
các tầng của ứng dụng với nhau. Qua đó, hầu hết các công việc của tầng kết hợp
với lớp presentation. Điều này làm nảy sinh ra nhu cầu phải có một mô hình
phát triển ứng dụng mới phù hợp hơn. Và do đó, Model – View – ViewModel
(MVVM) pattern ra đời và ngày càng trở nên phổ biến [10].
Đa số các ứng dụng thuộc bất kì nền tảng nào cũng có thể chia thành hai phần:
giao diện (View) và dữ liệu (Model). Vì việc tách riêng các phần này, cần phải
có một phần trung gian nào đó nối kết hai phần này lại, và chúng tạo nên một mô hình (pattern).
Quen thuộc và phổ biến nhất với chúng ta là mô hình MVC (Model – View –
Controller) . Có thể nói MVC là một mô hình tiêu chuẩn bởi sự logic và hợp lý
của nó. Điều này làm cho việc xuất hiện một mô hình phát triển ứng dụng mới
có thể khiến bạn bỡ ngỡ.
Trước khi tìm hiểu về mô hình MVVM này, ta cùng điểm qua một số tính năng
mới trong xu hướng phát triển ứng dụng hiện nay. b. Cấu trúc
• Data binding là gì
Binding Data trong MVVM là điều không bắt buộc, một số implement chỉ
đơn giản làm ViewModel như một lớp trung gian giữa Model-View, lớp này
giữ nhiệm vụ format data hoặc mapping trạng thái của View. Tuy nhiên
cách này theo mình khiến cho ViewModel trở thành Presenter và đưa kiến trúc này về MVP.
• Sơ đồ thành phần
Hình 12. Sơ đồ thành phần [10]
View [10]: Tương tự như trong mô hình MVC, View là phần giao diện
của ứng dụng để hiển thị dữ liệu và nhận tương tác của người dùng. Một
điểm khác biệt so với các ứng dụng truyền thống là View trong mô hình
này tích cực hơn. Nó có khả năng thực hiệ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 [10]: Cũng tương tự như trong mô hình MVC. Model là các đối
tượng giúp truy xuất và thao tác trên dữ liệu thực sự.
ViewModel [10]: Lớp trung gian giữa View và Model. ViewModel có
thể được xem là thành phầ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. Mối
quan hệ giữa View và View-Model là View sẽ được ánh xạ tới View-
Model nhưng View-Model lại không biết thông tin gì về View. Nó được
ẩn dấu qua cách sử dụng Data-binding và cơ chế của mô hình Observer.
Một View-Model có thể được ánh xạ từ nhiều View.
• Cấu trúc thư mục
Thông thường khi sử dụng với MVVM chúng ta nên tạo 3 thư mục
chính chứa các file code liên quan.
Hình 13. Cấu trúc thư mục View:
1. Trong thư mục Views chứ các file giao diện. Và mỗi file giao diện đều
có class code-behind đi kèm. Đặc biệt file code-behind ta sẽ không sử dụng
đến, mọi điều cần làm sẽ chuyển xuống class ViewModel. Tất nhiên là bạn
có thể code trong file code-behind của XAML nhưng điều đó sẽ phá vỡ
quy ước MVVM. Bạn có thể khai báo thuộc tính datacontext hoặc vài thiết
lập khác nhưng nên hạn chế tối thiểu code ở đây. Views được sử dụng để
kết hợp với các mô hình MVVM… Nó dùng để cung cấp một sự chia tách
gọn gàng của khái niệm giữa UI và presentation logic và data. Model
2. Trong thư mục Models trong đó tạo các class chứa data và bất kỳ liên kết
validation, logic nghiệp vụ để chắc chắc tính toàn vẹn của data, bạn có thể
tách ra thư mục Repositories khác. Chúng được dùng như một phần của mô hình MVVM. ViewModel:
3. Tương tự ta cũng tạo một thư mục ViewModels. Thông thường một file
giao diện thì ta tạo một class ViewModels tương ứng (có đôi lúc ta tạo nhiều
class phụ giúp tinh giản file code và gọi chúng trong class ViewModels chính).