Use case chọn lọc sách theo tên thể loại .... Use case chọn lọc sách theo tên tác giả .... Với từng thành phần của MEAN Stack hiểu xác định được các đặc trưng về nguyên tắc hoạt động, t
Trang 1THÀNH PHỐ HỒ CHÍ MINH
ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN
XÂY DỰNG WEBSITE BÁN SÁCH TRÊN NỀN TẢNG
MEAN STACK
GVHD:LÊ VĨNH THỊNH SVTH:NGUYỄN ĐỨC HẬU MSSV :16110069
SVTH :TRƯƠNG THÁI TUẤN MSSV :16110249
SKL 0 0 7 0 7 0
Trang 2KHOA ĐÀO TẠO CHẤT LƯỢNG CAO
ĐỒ ÁN TỐT NGHIỆP
(RECOMMENDATION SYSTEM) SVTH : N
CÔNG NGHỆ THÔNG TIN
XÂY DỰNG WEBSITE BÁN SÁCH TRÊN NỀN TẢNG
MEAN STACK
GUYỄN ĐỨC HẬU MSSV : 16110069
SVTH : TRƯƠNG THÁI TUẤN MSSV : 16110249
Khoá: 16 Ngành:
GVHD: TS LÊ VĨNH THỊNH
Trang 3CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh phúc
*******
Tp Hồ Chí Minh, ngày 01 tháng 07 năm 2020
NHIỆM VỤ KHÓA LUẬN TỐT NGHIỆP
Họ và tên sinh viên: Nguyễn Đức Hậu
Họ và tên sinh viên: Trương Thái Tuấn
MSSV: 16110069 MSSV: 16110249 Ngành: Công Nghệ Thông Tin Lớp: 16110ST4
Giảng viên hướng dẫn: TS Lê Vĩnh Thịnh ĐT: 0938 252 222
Ngày nhận đề tài: 24/02/2020 Ngày nộp đề tài: 01/07/2020
1 Tên đề tài: XÂY DỰNG WEBSITE BÁN SÁCH TRÊN NỀN TẢNG MEAN STACK
2 Các số liệu, tài liệu ban đầu: Không có
3 Nội dung thực hiện đề tài:
- Tìm hiểu về MEAN STACK
- Xây dựng website demo
TRƯỞNG NGÀNH
Nguyễn Đăng Quang
GIẢNG VIÊN HƯỚNG DẪN
Lê Vĩnh Thịnh
Trang 4CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh phúc
*******
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
Họ và tên Sinh viên 1: Trương Thái Tuấn MSSV 1: 16110249
Họ và tên Sinh viên 2: Nguyễn Đức Hậu MSSV 2: 16110069
Ngành: Công nghệ Thông tin
Tên đề tài: XÂY DỰNG WEBSITE BÁN SÁCH TRÊN NỀN TẢNG MEAN STACK
Họ và tên Giáo viên hướng dẫn: TS LÊ VĨNH THỊNH
NHẬN XÉT
1 Về nội dung đề tài và khối lượng thực hiện:
2 Ưu điểm:
3 Khuyết điểm:
4 Đề nghị cho bảo vệ hay không?
5 Đánh giá loại:
6 Điểm:
Tp Hồ Chí Minh, ngày 01 tháng 07 năm 2020
Giáo viên hướng dẫn
(Ký & ghi rõ họ tên)
Trang 5CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh phúc
*******
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
Họ và tên Sinh viên 1: Trương Thái Tuấn MSSV 1: 16110249
Họ và tên Sinh viên 2: Nguyễn Đức Hậu MSSV 2: 16110069
Ngành: Công nghệ Thông tin
Tên đề tài: XÂY DỰNG WEBSITE BÁN SÁCH TRÊN NỀN TẢNG MEAN STACK
Họ và tên Giáo viên phản biện:
NHẬN XÉT 1 Về nội dung đề tài và khối lượng thực hiện:
2 Ưu điểm:
3 Khuyết điểm:
4 Đề nghị cho bảo vệ hay không?
5 Đánh giá loại:
6 Điểm:
Tp Hồ Chí Minh, ngày 01 tháng 07 năm 2020
Giáo viên phản biện
(Ký & ghi rõ họ tên)
Trang 6LỜI CẢM ƠN
Lời đầu tiên, cho phép nhóm em được gửi lời cảm ơn chân thành đến thầy Lê Vĩnh Thịnh, người đã phụ trách hướng dẫn nhóm chúng em trong việc thực hiện và hoàn thành bài báo cáo một cách tốt và hiệu quả nhất Những sự chỉ dạy, nhật xét, đóng góp
ý kiến từ thầy đã góp phần rất quan trọng trong việc giúp chúng em hoàn hành đề tài một cách hoàn thiện nhất
Cảm ơn các thầy cô trong khoa Công Nghệ Thông Tin đã luôn nhiệt tình, cống hiến, tận tình giải đáp các thắc mắc của chúng em Bên cạnh đó, chúng em xin được cảm
ơn các bạn cùng khóa, các anh chị khóa trên đã không ngần ngại chia sẻ các thông tin, kinh nghiệm bổ ích giúp chúng em hoàn thiện hơn đề tài của mình
Báo cáo được thực hiện trong một khoảng thời gian có hạn, cùng với những hạn chế về mặt kiến thức nên việc sai sót là điều không thể tránh khỏi trong quá trình thực hiện Chúng em kính mong nhận được những lời nhận xét, ý kiến đóng góp quý báo từ quý Thầy Cô để chúng em có thêm kinh nghiệm và hoàn thành tốt hơn những đề tài sau này
Chúng em xin chân thành cảm ơn !
Trang 7MỤC LỤC
LỜI CẢM ƠN I
ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP X DANH MỤC HÌNH ẢNH XV DANH MỤC BẢNG XIX DANH MỤC TỪ VIẾT TẮT XXIII
CHƯƠNG 1: TỔNG QUAN 1
1.1.TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1
1.2.MỤC ĐÍCH CỦA ĐỀ TÀI 1
1.3.ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU 2
1.4.KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 2
CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 3
2.1 Tổng quan về MEAN Stack [1][2][3] 3
2.1.1 Khái niệm về MEAN Stack 3
2.1.2 Các thành phần trong MEAN stack 3
2.1.3 Cách thức MEAN stack hoạt động 4
2.1.4 Lợi thế của MEAN stack 5
2.2 NodeJS 5
2.2.1 Tổng quan [4] 5
2.2.2 Nguyên tắc hoạt động 7
2.2.3 Ưu điểm 8
2.2.4 Nhược điểm 9
2.3 ExpressJS 9
2.3.1 Tổng quan [6] 9
2.3.2 Công dụng 9
2.4 Angular 10
2.4.1 Tổng quan về Angular [7] 10
2.4.2 Mô hình 10
2.5 MongoDB 12
2.5.1 Mô hình 12
2.5.2 Đặc trưng 13
2.5.3 Ưu điểm 14
2.5.4 Nhược điểm 14
2.6 Giới thiệu về Recommendation System [9][10] 14
Trang 82.6.1 Khái niệm 14
2.6.1.1 Hệ thống gợi ý dựa theo lọc cộng tác 15
2.6.1.2 Hệ thống gợi ý dựa theo nội dung 15
2.6.1.3 Hệ thống gợi ý dựa trên cơ sở tri thức 16
2.6.2 So sánh các phương pháp gợi ý 17
2.6.3 Lợi ích của hệ thống gợi ý recommendation systems vào cửa hàng 17
CHƯƠNG 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 19
3.1.KHẢO SÁT HIỆN TRẠNG 19
3.2.XAC DỊNH YEU CẦU 23
3.3.ĐẶC TẢ CHỨC NĂNG 24
3.3.1 Bảng requirement dành cho use case 24
3.3.2 Liệt kê các actor 28
3.3.3 Bảng use case 28
3.3.3.1 Use case tìm kiếm sách “Search book” 28
3.3.3.1.1 Usecase tìm sách theo tên sách 29
3.3.3.1.2 Use case tìm sách theo thể loại 29
3.3.3.1.3 Use case tìm sách theo tên tác giả 30
3.3.3.1.4 Use case tìm sách theo tên seri sách 30
3.3.3.2 Use case chọn lọc sách “Filter book” 31
3.3.3.2.1 Use case chọn lọc sách theo tên thể loại 32
3.3.3.2.2 Use case chọn lọc sách theo tên tác giả 32
3.3.3.2.3 Use case chọn lọc sách theo giá tiền 33
3.3.3.2.4 Use case chọn lọc sách theo số sao đánh giá 34
3.3.3.2.5 Use case chọn lọc sách đang được giảm giá 34
3.3.3.3 Use case xem thông tin sách “View book detail” 35
3.3.3.3.1 Use case xem thông tin chi tiết sách 35
3.3.3.3.2 Use case xem bình luận và đánh giá 36
3.3.3.4 Use case bình luận và đánh giá “Comment and rate book” 37
3.3.3.4.1 Use case thêm bình luận và đánh giá 37
3.3.3.4.2 Use case sửa bình luận và đánh giá 38
3.3.3.5 Use case quản lý giỏ hàng “Manager book cart” 39
3.3.3.5.1 Use case xem sách trong giỏ hàng 39
3.3.3.5.2 Use case thêm sách vào giỏ hàng 40
3.3.3.5.3 Use case cập nhật giỏ hàng 41
3.3.3.5.4 Use case xóa sách trong giỏ hàng 42
3.3.3.6 Use case đăng ký tài khoản “Register an account” 43
Trang 93.3.3.7 Use case đăng nhập vào tài khoản “Login an account” 45
3.3.3.7.1 Use case đăng nhập bằng tài khoản đăng ký 45
3.3.3.7.2 Use case đăng nhập bằng tài khoản FaceBook 47
3.3.3.7.3 Use case đăng nhập bằng tài khoản Google 48
3.3.3.8 Use case quản lý thông tin tài khoản “View account” 49
3.3.3.8.1 Use case xem thông tin cá nhân 49
3.3.3.8.2 Use case sửa đổi thông tin cá nhân 50
3.3.3.8.3 Use case đổi mật khẩu 51
3.3.3.9 Use case thanh toán đơn đặt hàng “Pay the order” 52
3.3.3.9.1 Use case thanh toán đơn hàng bằng tiền mặt 52
3.3.3.9.2 Use case thanh toán đơn hàng bằng ví paypal 53
3.3.3.10 Use case quản lý lịch sử đơn hàng “View order” 54
3.3.3.10.1 Use case xem thông tin chi tiết đơn hàng 54
3.3.3.10.2 Use case xóa đơn hàng 55
3.3.3.11 Use case quản lý sách yêu thích “View favorite book” 56
3.3.3.11.1 Use case yêu thích sách 56
3.3.3.11.2 Use case xóa sách trong danh sách yêu thích 57
3.3.3.12 Use case quản lý sách “Manager book” 58
3.3.3.12.1 Use case thêm sách 58
3.3.3.12.2 Use case sửa đổi thông tin sách 59
3.3.3.12.3 Use case xóa sách 60
3.3.3.12.4 Use case xem sách 61
3.3.3.13 Use case quản lý thể loại “Manager category” 62
3.3.3.13.1 Use case thêm thể loại 62
3.3.3.13.2 Use case sửa thông tin thể loại 63
3.3.3.13.3 Use case xóa thể loại 64
3.3.3.13.4 Use case xem thể loại 65
3.3.3.14 Use case quản lý tác giả “Manager author” 66
3.3.3.14.1 Use case thêm tác giả 66
3.3.3.14.2 Use case sửa thông tin tác giả 67
3.3.3.14.3 Use case xóa tác giả 68
3.3.3.14.4 Use case xem tác giả 69
3.3.3.15 Use case quản lý thông tin user “Manager user” 70
3.3.3.15.1 Use case thêm user 70
3.3.3.15.2 Use case sửa thông tin user 71
3.3.3.15.3 Use case xóa user 72
3.3.3.15.4 Use case xem thông tin user 73
Trang 103.3.3.16 Use case quản lý đơn hàng “Manager order” 74
3.3.3.16.1 Use case xem đơn hàng 74
3.3.3.16.2 Use case xem thông tin chi tiết đơn hàng 75
3.3.3.16.3 Use case sửa trạng thái đơn hàng 75
3.3.3.16.4 Use case xóa đơn hàng 76
3.3.3.17 Use case quản lý địa chỉ giao hàng “Address shipping” 77
3.3.3.17.1 Use case thêm địa chỉ giao hàng 78
3.3.3.17.2 Use case sửa đổi thông tin địa chỉ giao hàng 78
3.3.3.17.3 Use case xóa địa chỉ giao hàng 79
3.3.3.17.4 Use case xem thông tin địa chỉ giao hàng 80
3.3.3.18 Use case xem mã giảm giá “View discount code” 81
3.3.3.19 Use case đăng xuất “Logout an account” 82
CHƯƠNG 4: THIẾT KẾ ỨNG DỤNG 83
4.1.THIẾT KẾ DỮ LIỆU 83
4.1.1 Sơ đồ thiết kế dữ liệu 83
4.1.2 Mô tả sơ đồ thiết kế dữ liệu 84
4.1.2.1 Collection Book 84
4.1.2.2 Collection BookCategory 84
4.1.2.3 Collection Seri 85
4.1.3.4 Collection Author 85
4.1.2.5 Collection Rate 85
4.1.2.6 Collection Rating 85
4.1.2.7 Collection CartBook 86
3.1.2.8 Collection OrderDetail 86
4.1.2.9 Collection Favorite 86
4.1.2.10 Collection Order 87
4.1.2.11 Collection Customer 87
4.1.2.12 Collection User 88
4.1.2.13 Collection DiscountCode 88
4.1.2.14 Collection AccountSocial 88
4.1.2.15 Collection Point 89
4.2.SƠ ĐỒ TUẦN TỰ (SEQUENCE DIAGRAM) 90
4.2.1 Sequence tìm kiếm sách “Search book” 90
4.2.1.1 Sequence tìm sách theo tên sách 90
4.2.1.2 Sequence tìm sách theo thể loại 90
4.2.1.3 Sequence tìm sách theo tên tác giả 91
Trang 114.2.1.4 Sequence tìm sách theo tên seri sách 91
4.2.2 Sequence chọn lọc sách “Filter book” 92
4.2.2.1 Sequence chọn lọc sách theo tên thể loại 92
4.2.2.2 Sequence chọn lọc sách theo tên tác giả 92
4.2.2.3 Sequence chọn lọc sách theo giá tiền 93
4.2.2.4 Sequence chọn lọc sách theo số sao đánh giá 93
4.2.2.5 Sequence chọn lọc sách đang được giảm giá 94
4.2.3 Sequence xem thông tin sách “View book detail” 94
4.2.4 Sequence bình luận và đánh giá “Comment and rate book” 95
4.2.4.1 Sequence thêm bình luận và đánh giá 95
4.2.4.2 Sequence sửa bình luận và đánh giá 95
4.2.5 Sequence quản lý giỏ hàng “Manager book cart” 96
4.2.5.1 Sequence xem sách trong giỏ hàng 96
4.2.5.2 Sequence thêm sách vào giỏ hàng 96
4.2.5.3 Sequence cập nhật giỏ hàng 97
4.2.5.4 Sequence xóa sách trong giỏ hàng 97
4.2.6 Sequence đăng ký tài khoản “Register an account” 98
4.2.7 Sequence đăng nhập vào tài khoản “Login an account” 98
4.2.8 Sequence quản lý thông tin tài khoản “View account” 99
4.2.8.1 Sequence xem thông tin cá nhân 99
4.2.8.2 Sequence sửa đổi thông tin cá nhân 99
4.2.8.3 Sequence đổi mật khẩu 100
4.2.9 Sequence thanh toán đơn đặt hàng “Pay the order” 100
4.2.10 Sequence quản lý lịch sử đơn hàng “View order” 101
4.2.10.1 Sequence xem thông tin đơn hàng 101
4.2.10.2 Sequence xem thông tin chi tiết đơn hàng 101
4.2.10.3 Sequence xóa đơn hàng 102
4.2.11 Sequence quản lý sách yêu thích “View favorite book” 102
4.2.11.1 Sequence yêu thích sách 102
4.2.11.2 Sequence xóa yêu thích sách 103
4.2.11.3 Sequence xem danh sách yêu thích 103
4.2.12 Sequence quản lý sách “Manager book” 104
4.2.12.1 Sequence thêm sách 104
4.2.12.2 Sequence sửa đổi thông tin sách 104
4.2.12.3 Sequence xóa sách 105
4.2.13.4 Sequence xem sách 105
4.2.13 Sequence quản lý thể loại “Manager category” 106
Trang 124.2.13.1 Sequence thêm thể loại 106
4.2.13.2 Sequence sửa đổi thông tin thể loại 106
4.2.13.3 Sequence xóa thể loại 107
4.2.13.4 Sequence xem thể loại 107
4.2.14 Sequence quản lý tác giả “Manager author” 108
4.2.14.1 Sequence thêm tác giả 108
4.2.14.2 Sequence sửa đổi thông tin tác giả 108
4.2.14.3 Sequence xóa tác giả 109
4.3.14.4 Sequence xem tác giả 109
4.2.15 Sequence quản lý thông tin user “Manager user” 110
4.2.15.1 Sequence thêm user 110
4.2.15.2 Sequence sửa đổi thông tin user 110
4.2.15.3 Sequence xóa user 111
4.2.15.4 Sequence xem user 111
4.2.16 Sequence quản lý đơn hàng “Manager order” 112
4.2.16.1 Sequence xem đơn hàng 112
4.2.16.2 Sequence xem thông tin đơn hàng 112
4.2.16.3 Sequence xóa đơn hàng 113
4.2.16.4 Sequence sửa trạng thái đơn hàng 113
4.2.17 Sequence quản lý địa chỉ giao hàng “Address shipping” 114
4.2.17.1 Sequence thêm địa chỉ giao hàng 114
4.2.17.2 Sequence sửa đổi thông tin địa chỉ giao hàng 114
4.2.17.3 Sequence xóa địa chỉ giao hàng 115
4.3.17.4 Sequence xem danh sách địa chỉ giao hàng 115
4.2.18 Sequence xem mã giảm giá “View discount code” 116
4.2.19 Sequence đăng xuất “Logout an account” 116
4.3.THIẾT KẾ GIAO DIỆN 117
4.3.1 Screen flow cho web phía khách hàng 117
4.3.1.1 SCP001 Home Screen 121
4.3.1.2 SCP002 Login and Register Screen 124
4.3.1.3 SCP003 BookCategory Screen 126
4.3.1.4 SCP004 BookDetail Screen 128
4.3.1.5 SCP004a BookDetail Screen – RatingBook Screen 130
4.3.1.6 SCP005 CartBook Screen 131
4.3.1.7 SCP006 Shipping Screen 134
4.3.1.8 SCP006a Shipping Screen – Insert Location Shipping Screen 137
4.3.1.9 SCP006b Shipping Screen – Update Location Shipping Screen 139
Trang 134.3.1.10 SCP007 Payment Screen 141
4.3.1.11 SCP008 Account Screen 143
4.3.1.12 SCP009 Profile Screen 144
4.3.1.13 SCP0010 OrderHistory Screen 146
4.3.1.14 SCP0011 DiscountCode Screen 148
4.3.1.15 SCP0012 Favorite Screen 149
4.3.1.16 SCPM01 Modal Buy Book Successful Screen 150
4.3.1.17 SCPM02 Modal TryRead Book Screen 151
4.3.1.18 SCPM03 Modal RotationLuck Screen 152
4.3.2 Screen flow cho web phía Admin 154
4.3.2.1 SAP001 Dashboard Screen 155
4.3.2.2 SAP002 Manage Book Screen 157
4.3.2.3 SAP003 View Book Screen 158
4.3.2.4 SAP004 Update Book Screen 160
4.3.2.5 SAP005 Insert Book Screen 161
4.3.2.6 SAP006 Manage Order Screen 162
4.3.2.7 SAP007 Admin Profile Screen 163
4.3.2.8 SAP008 Update Profile Screen 164
4.3.2.9 SAP009 Change Password Screen 165
4.3.2.10 SAP010 Manage User Screen 166
4.3.2.11 SAP011 View User Screen 167
4.3.2.12 SAP012 Update User Screen 168
4.4.TRIỂN KHAI HỆ THỐNG RECOMMENDATION SYSTEMS [11][12] 169
4.4.1 Ứng dụng thuật toán Collaborative Filtering Recommend System bằng thuật toán Pearson correlation 169
4.4.1.1 Thuật toán Pearson correlation 169
4.4.1.2 Tính sự tương quan giữa hai người dùng 169
4.4.1.2.1 Chuẩn bị bộ dữ liệu người dùng theo sách đánh giá 169
4.4.1.2.2 Công thức tính hệ số tương quan Pearson 170
4.4.1.2.3 Các bước tính hệ số tương quan giữa hai người dùng P1, P2 theo việc đánh giá sách 170
4.4.1.2.4 Các bước tạo danh sách xếp hạng nhà người dùng cùng đánh giá ứng với người dùng P 171
4.4.1.2.5 Các bước ứng dụng Recommendation System Collaborative Filtering 171
CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 173
Trang 145.1.CÀI ĐẶT ỨNG DỤNG 173
5.2.KIỂM THỬ PHẦN MỀM 175
5.2.1 Chức năng đăng ký 176
5.2.2 Chức năng đăng nhập 177
5.2.3 Chức năng đổi mật khẩu 178
5.2.4 Chức năng tìm kiếm sách 178
5.2.5 Chức năng thanh toán 179
CHƯƠNG 6: KẾT LUẬN 180
6.1.KẾT QUẢ ĐẠT ĐƯỢC 180
6.2.ƯU ĐIỂM VÀ NHƯỢC ĐIỂM 180
6.2.1 Ưu điểm 180
6.2.2 Nhược điểm 180
6.2.3 Khó khăn 181
6.2.3.1 Công nghệ 181
6.2.3.2 Quy trình thực hiện 181
6.3.KINH NGHIỆM ĐẠT ĐƯỢC 181
6.4.HƯỚNG PHÁT TRIỂN TRONG TƯƠNG LAI 181
TÀI LIỆU THAM KHẢO 182
Trang 15CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh phúc
*******
ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP
Họ và tên Sinh viên 1: Trương Thái Tuấn MSSV 1: 16110249
Họ và tên Sinh viên 2: Nguyễn Đức Hậu MSSV 2: 16110069
Ngành: Công nghệ Thông tin
Thời gian làm tiểu luận: từ: 24/02/2020 đến: 30/06/2020
Tên đề tài: XÂY DỰNG WEBSITE BÁN SÁCH TRÊN NỀN TẢNG MEAN STACK
GV hướng dẫn: TS LÊ VĨNH THỊNH
Nhiệm vụ của luận văn:
1 Nghiên cứu về MEAN stack
2 Nghiên cứu về cách viết REST API và cách ứng dụng
3 Sử dụng thư viện Mongoose để tạo Model cho dữ liệu trong MongoDB
4 Sử dụng ExpressJS để làm các công việc về phía server-side
5 Viết các REST API để thao tác dữ liệu giữa ExpressJS và MongoDB
6 Dùng Angular để làm front-end theo kiểu Single page application
7 Kết hợp 4 thành phần lại để xây dựng website tìm kiếm việc làm trên nền tảng MEAN stack đã tìm hiểu
Trang 161.4 Kết quả dự kiến đạt được
Phần 2: Nội dung
1.6 Giới thiệu về Recommendation System
Chương 2: Khảo sát hiện trạng và xác định yêu cầu
1 Khảo sát hiện trạng, lên ý tưởng, viết mô tả đồ
án; tìm hiểu, lựa chọn và chuẩn bị môi trường
Trang 175 Ứng dụng Facebook/Google Api cho chức
7 Code chức năng giỏ hàng, thanh toán,
sendMail thanh toán 04/03/2020 – 09/03/2020
8 Báo cáo tiến độ lần 1 (Online) 10/03/2020 – 10/03/2020
9 Code chức năng quản lý địa chỉ giao hàng 10/03/2020 – 13/03/2020
10 Ứng dụng paypal vào chức năng thanh toán 12/03/2020 – 13/03/2020
11 Code chức năng trang lịch sử mua hàng 13/03/2020 – 14/03/2020
12 Set Token cho người dùng đăng nhập 13/03/2020 – 18/03/2020
13 Phân quyền người dùng Customer
14/03/2020 – 20/03/2020
14 Sử lý trạng thái đơn hàng 18/03/2020 – 22/03/2020
15 Code chức năng Search, Filter 20/05/2020 – 25/03/2020
16 Code chức năng đánh giá và rating sản phẩm 22/03/2020 – 24/03/2020
17 Chỉnh sửa giao diện và database 26/03/2020 – 30/03/2020
Trang 1821 Báo cáo tiến độ lần 2 10/04/2020 – 10/04/2020
22 Code chức năng Admin, Code chức năng quản
lý danh mục sản phẩm, tác giả, NXB, user, seri 10/04/2020 – 17/04/2020
23 Cải tiến chức năng giảm giá đơn hàng thông
qua trò chơi vòng quay may mắn để lấy mã
giảm giá
14/04/2020 – 20/04/2020
24 Code chức năng yêu thích sản phẩm 21/04/2020 – 24/04/2020
25 Tạo DoashBoard thống kê quản lý theo tháng,
29 Báo cáo tiến độ lần 3 04/06/2020 – 04/062020
28 Tạo biểu đồ quản lý 05/06/2020 – 07/06/2020
29 Cải tiến hệ thống Recommend system cho đồ
Trang 1930 Code chức năng tạo event ưu đãi sản phẩm
Trang 20DANH MỤC HÌNH ẢNH
Hình 2 1 Sơ đồ hoạt động Mean Stack 4
Hình 2 2.Sơ đồ hoạt động NodeJs 8
Hình 2 3 Các thành phần cơ bản trong angular 10
Hình 2 4 Cách hoạt động giữa các thành phần trong Angular 11
Hình 2 5 Hệ thống gợi ý dựa theo lọc cộng tác 15
Hình 2 6 Hệ thống gợi ý dựa theo nội dung 16
Hình 2 7 Hệ thống gợi ý dựa trên cơ sở tri thức 16
Hình 3 1 Trang web bán sách depository 20
Hình 3 2 Trang web bán sách Fahasa 21
Hình 3 3 Trang web bán sách Vinabook 22
Hình 3 4 Use case tìm kiếm sách “Search book” 28
Hình 3 5 Use case chọn lọc sách “Filter book” 31
Hình 3 6 Use case xem thông tin sách “View book detail” 35
Hình 3 7 Use case bình luận và đánh giá “Comment and rate book” 37
Hình 3 8 Use case quản lý giỏ hàng “Manager book cart” 39
Hình 3 9 Use case đăng ký tài khoản 43
Hình 3 10 Use case đăng nhập 45
Hình 3 11 Use case quản lý thông tin tài khoản “View account” 49
Hình 3 12 Use case thanh toán đơn đặt hàng “Pay the order” 52
Hình 3 13 Use case quản lý lịch sử đơn hàng “View order” 54
Hình 3 14 Use case quản lý sách yêu thích “View favorite book” 56
Hình 3 15 Use case quản lý sách “Manager book” 58
Hình 3 16 Use case quản lý thể loại “Manager category” 62
Hình 3 17 Use case quản lý tác giả “Manager author” 66
Hình 3 18 Use case quản lý thông tin user “Manager user” 70
Hình 3 19 Use case quản lý đơn hàng “Manager order” 74
Hình 3 20 Use case quản lý địa chỉ giao hàng “Shipping Address” 77
Hình 3 21 Use case xem mã giảm giá “View discount code” 81
Hình 3 22 Use case đăng xuất “Logout an account” 82
Trang 21Hình 4 1 Sơ đồ thiết kế dữ liệu 83
Hình 4 2 Sequence tìm sách theo tên sách 90
Hình 4 3 Sequence tìm sách theo thể loại 90
Hình 4 4 Sequence tìm sách theo tên tác giả 91
Hình 4 5 Sequence tìm sách theo tên seri sách 91
Hình 4 6 Sequence chọn lọc sách theo tên thể loại 92
Hình 4 7 Sequence chọn lọc sách theo tên tác giả 92
Hình 4 8 Sequence chọn lọc sách theo giá tiền 93
Hình 4 9 Sequence chọn lọc sách theo số sao đánh giá 93
Hình 4 10 Sequence chọn lọc sách đang được giảm giá 94
Hình 4 11 Sequence xem thông tin chi tiết sách 94
Hình 4 12 Sequence thêm bình luận và đánh giá 95
Hình 4 13 Sequence sửa bình luận và đánh giá 95
Hình 4 14 Sequence xem sách trong giỏ hàng 96
Hình 4 15 Sequence thêm sách vào giỏ hàng 96
Hình 4 16 Sequence cập nhật giỏ hàng 97
Hình 4 17 Sequence xóa sách trong giỏ hàng 97
Hình 4 18 Sequence đăng ký tài khoản “Register an account” 98
Hình 4 19 Sequence đăng nhập vào tài khoản “Login an account” 98
Hình 4 20 Sequence xem thông tin cá nhân 99
Hình 4 21.Sequence sửa đổi thông tin cá nhân 99
Hình 4 22 Sequence đổi mật khẩu 100
Hình 4 23 Sequence thanh toán đơn đặt hàng “Pay the order” 100
Hình 4 24 Sequence xem thông tin đơn hàng 101
Hình 4 25 Sequence xem thông tin chi tiết đơn hàng 101
Hình 4 26 Sequence xóa đơn hàng 102
Hình 4 27 Sequence yêu thích sách 102
Hình 4 28 Sequence xóa yêu thích sách 103
Hình 4 29 Sequence xem danh sách yêu thích 103
Hình 4 30 Sequence thêm sách 104
Hình 4 31 Sequence sửa đổi thông tin sách 104
Hình 4 32 Sequence xóa sách 105
Hình 4 33 Sequence xem sách 105
Hình 4 34 Sequence thêm thể loại 106
Trang 22Hình 4 35 Sequence sửa đổi thông tin thể loại 106 Hình 4 36 Sequence xóa thể loại 107 Hình 4 37 Sequence xem thể loại 107 Hình 4 38 Sequence thêm tác giả 108 Hình 4 39 Sequence sửa đổi thông tin tác giả 108 Hình 4 40 Sequence xóa tác giả 109 Hình 4 41 Sequence xem tác giả 109 Hình 4 42 Sequence thêm user 110 Hình 4 43 Sequence sửa đổi thông tin user 110 Hình 4 44 Sequence xóa user 111 Hình 4 45 Sequence xem user 111 Hình 4 46 Sequence xem đơn hàng 112 Hình 4 47 Sequence xem thông tin đơn hàng 112 Hình 4 48 Sequence xóa đơn hàng 113 Hình 4 49 Sequence sửa trạng thái đơn hàng 113 Hình 4 50 Sequence thêm địa chỉ giao hàng 114 Hình 4 51 Sequence sửa đổi thông tin địa chỉ giao hàng 114 Hình 4 52 Sequence xóa địa chỉ giao hàng 115 Hình 4 53 Sequence xem danh sách địa chỉ giao hàng 115 Hình 4 54 Sequence xem mã giảm giá “View discount code” 116 Hình 4 55 Sequence đăng xuất “Logout an account” 116 Hình 4 56 Screen Flow cho trang web dành cho khách hàng khi chưa login 117 Hình 4 57 Screen Flow cho trang web dành cho khách hàng sau khi login 118 Hình 4 58 SCP001 Home Screen 121 Hình 4 59 SCP002 Login and Register Screen 124 Hình 4 60 SCP003 BookCategory Screen 126 Hình 4 61 SCP004 BookDetail Screen 128 Hình 4 62 SCP004a BookDetail Screen – RatingBook Screen 130 Hình 4 63 SCP005 CartBook Screen 131 Hình 4 64 SCP006 Shipping Screen 134 Hình 4 65 SCP006a Shipping Screen – Insert Location Shipping Screen 137 Hình 4 66 SCP006b Shipping Screen – Update Location Shipping Screen 139 Hình 4 67 SCP007 Payment Screen 141
Trang 23Hình 4 69 SCP009 Profile Screen 144 Hình 4 70 SCP0010 OrderHistory Screen 146 Hình 4 71 SCP0011 DiscountCode Screen 148 Hình 4 72 SCP0011 Favorite Screen 149 Hình 4 73 SCPM01 Modal Buy Book Successful Screen 151 Hình 4 74 SCPM02 Modal TryRead Book Screen 151 Hình 4 75 SCPM03 Modal RotationLuck Screen 152 Hình 4 76 Screen Flow cho trang web dành cho Admin 154 Hình 4 77 SAP001 Dashboard Screen 155 Hình 4 78 SAP002 Manage Book Screen 157 Hình 4 79 SAP003 View Book Screen 159 Hình 4 80 SAP004 Update Book Screen 160 Hình 4 81 SAP005 Insert Book Screen 161 Hình 4 82 SAP006 Manage Order Screen 162 Hình 4 83 SAP007 Admin Profile Screen 163 Hình 4 84 SAP008 Update Profile Screen 164 Hình 4 85 SAP009 Change Password Screen 165 Hình 4 86 SAP010 Manage User Screen 166 Hình 4 87 SAP011 View User Screen 167 Hình 4 88 SAP012 Update User Screen 168 Hình 4 89 Công thức tính điểm tương quan Pearson chuyển qua biến tham số 170 Hình 4 90 Công thức tính giá trị sản phẩm tương quan với người dùng 172
Hình 5 1 Thư mục 173 Hình 5 2 Giao diện visual studio code 174 Hình 5 3 Màn hình Intergrate Command Line 174 Hình 5 4 Màn hình CLI chạy ứng dụng Angular 175 Hình 5 5.Màn hình CLI chạy Express 175 Hình 5 6 Kết quả chạy thành công Angular và Express 175
Trang 24DANH MỤC BẢNG
Bảng 2 1 So sánh các phương pháp gợi ý 17
Bảng 3 1 Bảng Requirement dành cho use case 27 Bảng 3 2 Use case tìm sách theo tên sách 29 Bảng 3 3 Use case tìm sách theo thể loại 30 Bảng 3 4 Use case tìm sách theo tên tác giả 30 Bảng 3 5 Use case tìm sách theo tên seri sách 31 Bảng 3 6 Use case chọn lọc sách theo tên thể loại 32 Bảng 3 7 Use case chọn lọc sách theo tên tác giả 33 Bảng 3 8 Use case chọn lọc sách theo giá tiền 34 Bảng 3 9 Use case chọn lọc sách theo số sao đánh giá 34 Bảng 3 10 Use case chọn lọc sách đang được giảm giá 35 Bảng 3 11 Use case xem chi tiết sách 36 Bảng 3 12 Use case xem bình luận và đánh giá 36 Bảng 3 13 Use case thêm bình luận và đánh giá 38 Bảng 3 14 Use case sửa bình luận và đánh giá 38 Bảng 3 15 Use case xem sách trong giỏ hàng 40 Bảng 3 16 Use case thêm sách trong giỏ hàng 41 Bảng 3 17 Use case cập nhật giỏ hàng 41 Bảng 3 18 Use case xóa sản phẩm khỏi giỏ hàng 42 Bảng 3 19 Use case đăng ký 44 Bảng 3 20 Use case đăng nhập bằng tài khoản đăng ký 46 Bảng 3 21 Use case đăng nhập bằng tài khoản FaceBook 47 Bảng 3 22 Use case đăng nhập bằng tài khoản Google 48 Bảng 3 23 Use case xem thông tin cá nhân 50 Bảng 3 24 Use case chỉnh sửa thông tin cá nhân 50 Bảng 3 25 Use case đổi mật khẩu 51 Bảng 3 26 Use case thanh toán đơn hàng bằng tiền mặt 52 Bảng 3 27 Use case thanh toán đơn hàng bằng ví paypal 53 Bảng 3 28 Use case xem thông tin chi tiết đơn hàng 55 Bảng 3 29 Use case xóa đơn hàng 55 Bảng 3 30 Use case yêu thích sách 56 Bảng 3 31 Use case xóa sách trong danh sách yêu thích 57 Bảng 3 32 Use case thêm sách 59
Trang 25Bảng 3 34 Use case xóa sách 61 Bảng 3 35 Use case xem sách 61 Bảng 3 36 Use case thêm thể loại 63 Bảng 3 37 Use case sửa thông tin thể loại 64 Bảng 3 38 Use case xóa thể loại 65 Bảng 3 39 Use case xem thể loại 65 Bảng 3 40 Use case thêm tác giả 67 Bảng 3 41 Use case sửa thông tin tác giả 68 Bảng 3 42 Use case xóa thể loại 69 Bảng 3 43 Use case xem tác giả 69 Bảng 3 44 Use case thêm user 71 Bảng 3 45 Use case sửa thông tin user 72 Bảng 3 46 Use case xóa user 73 Bảng 3 47 Use case xem thông tin user 73 Bảng 3 48 Use case xem đơn hàng 75 Bảng 3 49 Use case xem thông tin chi tiết đơn hàng 75 Bảng 3 50 Use case sửa trạng thái đơn hàng 76 Bảng 3 51 Use case xóa đơn hàng 77 Bảng 3 52 Use case thêm địa chỉ giao hàng 78 Bảng 3 53 Use case sửa đổi thông tin địa chỉ giao hàng 79 Bảng 3 54 Use case xóa địa chỉ giao hàng 80 Bảng 3 55 Use case xem thông tin địa chỉ giao hàng 81 Bảng 3 56 Use case xem mã giảm giá “View discount code” 82 Bảng 3 57 Use case đăng xuất “Logout an account” 82
Bảng 4 1 Mô tả dữ liệu Collection: Book 84 Bảng 4 2 Mô tả dữ liệu Collection: BookCategory 84 Bảng 4 3 Mô tả dữ liệu Collection: Seri 85 Bảng 4 4 Mô tả dữ liệu Collection: Author 85 Bảng 4 5 Mô tả dữ liệu Collection: Rate 85 Bảng 4 6 Mô tả dữ liệu Collection: Rating 85 Bảng 4 7 Mô tả dữ liệu Collection: CartBook 86 Bảng 4 8 Mô tả dữ liệu Collection: OrderDetail 86 Bảng 4 9 Mô tả dữ liệu Collection: Favorite 86 Bảng 4 10 Mô tả dữ liệu Collection: Order 87 Bảng 4 11 Mô tả dữ liệu Collection: Customer 88
Trang 26Bảng 4 12 Mô tả dữ liệu Collection: User 88 Bảng 4 13 Mô tả dữ liệu Collection: DiscountCode 88 Bảng 4 14 Mô tả dữ liệu Collection: AccountSocial 89 Bảng 4 15 Mô tả dữ liệu Collection: Point 89 Bảng 4 16 Mô tả màn hình khách hàng 120 Bảng 4 17 Mô tả SCP001 Home Screen 123 Bảng 4 18 Mô tả SCP002 Login and Register Screen 125 Bảng 4 19 Mô tả SCP003 BookCategory Screen 127 Bảng 4 20 Mô tả SCP004 BookDetail Screen 130 Bảng 4 21 Mô tả SCP004a BookDetail Screen – RatingBook Screen 131 Bảng 4 22 Mô tả SCP005 CartBook Screen 133 Bảng 4 23 Mô tả SCP006 Shipping Screen 136 Bảng 4 24 Mô tả SCP006a Shipping Screen – Insert Location Shipping Screen 138 Bảng 4 25 Mô tả SCP006b Shipping Screen – Update Location Shipping Screen 140 Bảng 4 26 Mô tả SCP007 Payment Screen 143 Bảng 4 27 Mô tả SCP008 Account Screen 144 Bảng 4 28 Mô tả SCP009 Profile Screen 145 Bảng 4 29 Mô tả SCP0010 OrderHistory Screen 147 Bảng 4 30 Mô tả SCP0011 DiscountCode Screen 149 Bảng 4 31 Mô tả SCP0011 Favorite Screen 150 Bảng 4 32 Mô tả SCPM01 Modal Buy Book Successful Screen 151 Bảng 4 33 Mô tả SCPM02 Modal TryRead Book Screen 152 Bảng 4 34 Mô tả SCPM03 Modal RotationLuck Screen 153 Bảng 4 35 Mô tả màn hình Admin 155 Bảng 4 36 Mô tả SAP001 Dashboard Screen 157 Bảng 4 37 Mô tả SAP002 Manage Book Screen 158 Bảng 4 38 Mô tả SAP003 View Book Screen 159 Bảng 4 39 Mô tả SAP004 Update Book Screen 161 Bảng 4 40 Mô tả SAP005 Insert Book Screen 162 Bảng 4 41 Mô tả SAP006 Manage Order Screen 163 Bảng 4 42 Mô tả SAP007 Admin Profile Screen 164 Bảng 4 43 Mô tả SAP008 Update Profile Screen 165 Bảng 4 44 Mô tả SAP009 Change Password Screen 166
Trang 27Bảng 4 46 Mô tả SAP011 View User Screen 168 Bảng 4 47 Mô tả SAP012 Update User Screen 169
Bảng 5 1 Kiểm thử phần mềm chức năng đăng ký 176 Bảng 5 2 Kiểm thử phần mềm chức năng đăng nhập 177 Bảng 5 3 Kiểm thử phần mềm chức năng đổi mật khẩu 178 Bảng 5 4 Kiểm thử chức năng tìm kiếm sách 179 Bảng 5 5 Kiểm thử chức năng thanh toán 179
Bảng 6 1.Khó khăn về công nghệ 181 Bảng 6 2.Khó khăn về quy trình thực hiện 181
Trang 28DANH MỤC TỪ VIẾT TẮT
MEAN: MongoDB (M), ExpressJS (E), Angular (A) và NodeJS(N)
AJAX: Asynchronous JavaScript and XML
API: Application Programming Interface
JSON: JavaScript Object Notation
HTTP: HyperText Transfer Protocol
JWT: Json Web Token
FIFO: First in First out
I/O: Input/output
DOM: Document Object Model
UI: User Interface
Trang 29CHƯƠNG 1: TỔNG QUAN
1.1 Tính cấp thiết của đề tài
Sách là nguồn tri thức vô giá, là bàn đạp để phát triển nhân loại Còn thương mại điện tử tại Việt Name hiện nay đang ngày càng trở nên phổ biến - người người, nhà nhà
ai cũng có smart phone, một click là có hàng Kết hợp sách với thương mại điện tử, với mục đích giúp việc mua sách trở nên đơn giản hơn nữa, để những quyển sách quý sách hay dễ dàng đến tay người đọc và cũng vì đây là một đề tài thực tiễn, nhóm tụi em thử sức xây dựng một trang web bán sách online
1.2 Mục đích của đề tài
Đề tài “XÂY DỰNG WEBSITE BÁN SÁCH TRÊN NỀN TẢNG MEAN STACK” đặt ra 2 vấn đề trọng tâm về mục tiêu mà sinh viên nghiên cứu cần thực hiện được bao gồm:
Vấn đề đầu tiên đưa ra về yếu tố lý thuyết, sinh viên thực hiện cần có kết quả nghiên cứu chuyên môn và hiểu được tổng quan và khả năng ứng dụng của từng thành phần trong mô hình MEAN nói chung Với từng thành phần của MEAN Stack hiểu xác định được các đặc trưng về nguyên tắc hoạt động, thành phần hoặc mô hình.Thư viện được xây dựng dựa trên ngôn ngữ lập trình Javascript đạt được sự phổ biến đến lập trình viên như: NodeJS – xây dựng Server, Angular – xây dựng ứng dụng phía người dùng, MongoDB – cơ sở dữ liệu, ExpressJS – middleware hỗ trợ xây dựng Server Song song với việc hiểu về 4 thành phần tiêu biểu của MEAN Stack sinh viên cũng cần phải có thêm tìm hiểu về các thư viện, mã nguồn module giúp ích trong quá trình xây dựng ứng dụng Web thực tế
Vấn đề thứ hai của đề tài đặt ra về ứng dụng mô hình MEAN Stack vào xây dựng một sản phẩm cụ thể, ở đây là “Website bán sách” Sản phẩm hoàn thành phải là một ứng dụng Web được xây dựng có đầy đủ các thành phần của mô hình MEAN Stack và đáp ứng thêm các yêu cầu về ứng dụng mua, lựa chọn sách yêu thích, tracking sản phẩm trong quá trình vận chuyển và một số tính năng khác có thể áp dụng trong thực tế cũng như khả năng nâng cấp hoặc tiếp tục phát triển tính năng trong tương lai
Trang 301.3 Đối tượng và phạm vi nghiên cứu
Đề tài được thực hiện nghiên cứu xoay quanh hai nhóm đối tượng trọng tâm bao gồm: nhóm đối tượng về kiến thức công nghệ và nhóm đối tượng có nhu cầu mua, sử dụng các tựa sách mà họ yêu thích
Trong đó nhóm đối tượng về kiến thức công nghệ bao gồm 4 đối tượng nghiên cứu bắt buộc là: Mã nguồn mở NodeJS, framework Angular, cơ sở dữ liệu MongoDB, thư viện ExpressJS Kết hợp thêm trong nhóm đối tượng nghiên cứu về kiến thức công nghệ là một số thư viện Javascript có giá trị ứng dụng như JWT (Json Web Token), charts cũng cần được nghiên cứu cho các ứng dụng về doanh thu cũng như mức độ ưa thích của sản phẩm
Nhóm đối tượng có nhu cầu mua, sử dụng các tựa sách mà họ yêu thích bao gồm kiến thức về tên sách, thể loại, tựa seri sách cũng như các đánh giá về trải nghiệm người dùng trên một trang web bán sách cụ thể
Phạm vi nghiên cứu đề ra ở mức độ tổng quát, người thực hiện đề tài hiểu được các kiến thức chung của nội dung nghiên cứu và áp dụng được từng nội dung kiến thức vào sản phẩm thực tế, không đặt nặng các lý thuyết nặng nề không mang tính ứng dụng
1.4 Kết quả dự kiến đạt được
- Hiểu được các kiến thức về MEAN Stack, Restful API
- Xây dựng hoàn thành một website bán sách online với những kiến thức đã tìm hiểu
Trang 31CHƯƠNG 2: CƠ SỞ LÝ THUYẾT
2.1 Tổng quan về MEAN Stack [1][2][3]
2.1.1 Khái niệm về MEAN Stack
Khái niệm MEAN stack được nhắc đến lần đầu tiên bởi Valeri Karpov - một lập
trình viên làm việc cho MongoDB - vào năm 2013
MEAN là một mô hình phát triển website trên nền tảng JavaScript để xây dựng các trang web động Mô hình này cung cấp cho lập trình viên các thành phần đã đóng gói sẵn để phát triển những website được nhanh chóng
Một lợi ích lớn từ MEAN Stack là nó được xây dựng dựa trên một ngôn ngữ lập trình duy nhất - JavaScript, mà vẫn đáp ứng được hoạt động của đầy đủ thành phần trong
mô hình, điều này khiến nó hoạt động hiệu quả và dễ tiếp cận trong quá trình phát triển website
2.1.2 Các thành phần trong MEAN stack
MEAN đại điện cho MongoDB (M), ExpressJS (E), Angular (A) và NodeJS(N) Angular là một framework xây dựng dựa trên JavaScript chạy trên browser của người dùng cho phép lập trình viên xây dựng Single-Page-Applications (SPA) Nhiệm
vụ của Angular là xử lý và xuất ra màn hình giao diện website cùng với những dữ liệu động chèn trên đó, hoạt động này được Angular thực hiện theo cơ chế react - tức là liên tục cập nhật giao diện website dựa vào những thay đổi mới nhất (có thể là thay đổi từ phía người dùng hay server) Nhiệm vụ thứ hai của Angular là xử lý dữ liệu người dùng nhập vào các form như kiểm tra tính hợp lệ của dữ liệu đầu vào và kết nối với phần backend để gửi dữ liệu đó về phía server
MongoDB là một cơ sở dữ liệu có dạng NoSQL Đặc điểm của nó là không có ràng buộc quan hệ, phân tán, mã nguồn mở, có khả năng lưu trữ, xử lý một lượng rất nhỏ cho tới lượng dữ liệu cực lớn Trong mô hình MEAN stack, MongoDB đóng vai trò là
cơ sở dữ liệu cho website và có khả năng kết nối dễ dàng với NodeJS và ExpressJS
NodeJS là một môi trường cho phép chạy JavaScript ở phía server mà không cần trình duyệt Nó có nhiệm vụ tiếp nhận những Request và gửi trả những Response nếu có,
cụ thể trong mô hình MEAN stack thì những Request này sẽ đến từ Angular ở phía client
Trang 32hay browser của người dùng NodeJS cũng có nhiệm vụ xử lý những tính toán logic ở phía server, xử lý vấn đề bảo mật như xác thực, phân quyền… hay khả năng thao tác với các tập tin và giao tiếp với cơ sở dữ liệu MongoDB
ExpressJS là một framework của NodeJS, nó cũng cấp thêm những chức năng giúp cho quá trình làm việc bằng NodeJS được dễ dàng hơn, cụ thể có thể là giúp dễ dàng hơn khi xử lý những Request tới những địa chỉ khác nhau từ phía người dùng Nói chung, ExpressJS giúp cho công việc xử lý ở phía backend trở nên dễ dàng và nhanh chóng hơn
2.1.3 Cách thức MEAN stack hoạt động
Hình 2 1 Sơ đồ hoạt động Mean Stack
Trang 33Tại mỗi client, Angular thực hiện xử lý và tạo ra giao diện người dùng, Angular cũng thực thi single-page-application trên mỗi client
Tại server, NodeJS và ExpressJS có nhiệm vụ xử lý logic, nghiệp vụ và xác thực MongoDB ở server có nhiệm vụ tổ chức và lưu trữ dữ liệu
Client và server sẽ giao tiếp bằng cách gửi các Request và response, đây là các Request và Response gửi ngầm bằng công nghệ AJAX giúp người dùng không cần reload lại trang web Trong các Request và Response này, dữ liệu được tổ chức thành dạng JSON - là một dạng dữ liệu được tổ chức ngắn gọn và có dễ đọc hiểu
2.1.4 Lợi thế của MEAN stack
MEAN stack sử dụng một ngôn ngữ chung là JavaScript cho cả client-side và server-side, giúp cho quá trình phát triển trang web trở nên dễ tiếp cận
NodeJS có khả năng chạy trên cả Linux, Windows và OS X nên nó không phụ thuộc vào hệ điều hành Cơ chế non-blocking I/O giúp server có thể đáp ứng hàng ngàn connection đồng thời
MEAN stack sử dụng JSON là kiểu dữ liệu trao đổi giữa tất cả các thành phần nên không cần thêm thư viện để chuyển đổi dữ liệu trong quá trình tương tác giữa phía client và phía server
MongoDB có khả năng quản lý một lượng dữ liệu lớn, có thể thêm thuộc tính mới vào các bảng mà không cần cập nhật lại toàn bộ bảng
Các công nghệ sử dụng trong MEAN stack đều là mã nguồn mở và miễn phí Cộng đồng sử dụng rộng lớn thuận tiện cho việc học hỏi kinh nghiệm hay giải đáp thắc mắc
2.2 NodeJS
2.2.1 Tổng quan [4]
NodeJS là một framework môi trường hỗ trợ dịch và thực thi chương trình được viết bằng JavaScript mà không cần dùng tới trình duyệt
Trang 34NodeJS ra đời nhờ những lập trình viên đầu tiên của JavaScript mở rộng nó từ một ngôn ngữ chỉ có thể thực thi trên trình duyệt thành ngôn ngữ có thể thực thi độc lập trên máy tính
NodeJS cũng giống với trình duyệt hiện nay, được chạy dựa trên V8 JavaScript engine - công cụ giúp trình duyệt dịch và thực thi JavaScript Ngoài ra, NodeJS cung cấp một số thư viện không có sẵn trong V8 engine
• Một số khái niệm tiêu biểu trong NodeJS [5]
- Event: mỗi một thao tác, yêu cầu (request) đến server đều được NodeJS xem là
một sự kiện (event)
- Event Queue: hàng đợi sự kiện là nơi tất cả các sự kiện (event) đã đi vào sẽ lần
lượt được xử lý theo cơ chế FIFO, tức là các sự kiện đến server trước sẽ được NodeJS
xử lý trước, các sự kiện đến server sau sẽ được xử lý sau
- Callbacks: là các thao tác, các xử lý, các hàm sẽ được thực hiện sau khi đã thực
thi hoàn thành một hàm định nghĩa callback Việc sử dụng callback giúp cho lập trình viên quản lý các vấn đề về
- Message: nội dung thông báo tương ứng với từng callback
- Blocking I/O: là cơ chế được ứng dụng trong phần lớn các ngôn ngữ server-side,
cơ chế này quản lý các request đến server và lần lượt cho thực hiện yêu cầu của request tiếp theo khi request đang xử lý đã hoàn thành Từ đây dễ thấy được rằng nếu các yêu cầu xử lý của request đến sớm tiêu tốn nhiều thời gian thì các request đến sau bắt buộc phải đợi toàn bộ thời gian xử lý này Với NodeJS việc quản lý các request yêu cầu được
thay thế bằng cơ chế xử lý Non-Blocking I/O để giải quyết vấn đề thời gian chờ nêu
trên
- Thread Pool: là một chương trình viết bằng ngôn ngữ C++ được tích hợp bên
trong NodeJS, chương trình này cho phép xử lý đa luồng Đây chính là môi trường xử lý chính cho tất cả tác vụ được server NodeJS xử lý và các tác vụ này cũng được xử lý trên các luồng khác nhau
Trang 35- Event Loop: là một vòng lặp vô tận, nó chuyển các yêu cầu đã nhận sang Thread
Pool, đồng thời mỗi một yêu cầu cũng được tự động đăng ký một Callback, khi yêu cầu được xử lý xong hàm Callback tương ứng sẽ được thực thi
2.2.2 Nguyên tắc hoạt động
Nguyên tắc hoạt động quan trọng nhất tạo nên khả năng xử lý với tốc độ cao của
NodeJS đến từ việc xử lý Non-Blocking Quá trình xử lý này cho phép NodeJS nhận và
xử lý đồng thời nhiều tác vụ thông qua duy nhất một luồng xử lý (Single thread) thay vì tạo nhiều luồng xử lý tương ứng với các request ở các ngôn ngữ Server truyền thống đã
có Các tác vụ được nhận vào luồng xử lý nếu không được quy định tuần tự thực hiện (phải hoàn thành công việc A trước rồi sau đó bắt đầu thực hiện công việc công việc B)
sẽ được cho phép truy cập tài nguyên song song lẫn nhau mà không bị khóa lại (Blocking) đợi tác vụ trước đó Từ đó mà những tác vụ diễn ra không liên quan đến nhau
có thể xử lý song song độc lập với nhau, rút ngắn lượng lớn thời gian xử lý cho server NodeJS
Kết hợp với xử lý quá trình xử lý Non-Blocking là Callbacks và Event Loop
giúp cho NodeJS quản lý tất cả các tác vụ được được thực thi Cụ thể khi một tác vụ được xử lý Non-Blocking hoàn thành sẽ gửi về 1 Callback với ý nghĩa thông báo với hệ thống rằng tác vụ đã thực hiện xong hoàn toàn Trước đó khi các tác vụ này được định nghĩa thì callback của từng tác vụ cũng đã được đưa vào Event Table để chờ các sự kiện (Event) cho phép thực thi Khi Event mong chờ của tác vụ được diễn ra cũng là lúc các message của tác vụ đang chờ trong Event Table được di chuyển sang Event Queue chờ thực hiện theo nguyên tắc “đến trước thực hiện trước” (First In First Out - FIFO) Song song với quá trình này là quá trình Event Loop thực hiện một vòng lặp vô tận kiểm tra
có message nào đang đợi trong Event Queue hay không và Thread Pool có đang thực hiện tác vụ nào hay không, nếu đồng thời có message đang chờ và Thread Pool có thể tiếp nhận tác vụ Event Loop sẽ đưa phần tử đầu tiên của Queue vào Thread Pool xử lý
và gửi về callback khi tất cả các message quy định callback tương ứng đã hoàn thành Nếu không còn message nào trong Event Queue vòng lặp Event Loop vẫn luôn luôn được chạy để kiểm tra và xử lý ngay khi có tác vụ chờ
Tổng thể với sự kết hợp giữa các đặc trưng tiêu biểu: Non-Blocking I/O, Callbacks, Event Loop một server NodeJS xử lý bất đồng bộ (asynchronous) các đồng
bộ các tác vụ được yêu cầu và trả về kết quả ngay khi các tác vụ được hoàn thành thông
Trang 36qua callback Còn quá trình xử lý và phản hồi callback này được xử lý với sự điều phối, quản lý của vòng lặp vô tận xử lý sự kiện Event Loop lấy từng message của quy định callback thực hiện với tài nguyên hệ thống và phản hồi callback khi tất cả message quy định callback tương ứng đã hoàn thành
Hình 2 2.Sơ đồ hoạt động NodeJs 2.2.3 Ưu điểm
NodeJS cung cấp khả năng mở rộng cao NodeJS được nhận xét là dễ mở rộng chương trình cả về chiều rộng lẫn chiều sâu
Vì JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất Những lập trình viên đã biết JavaScript có thể chuyển sang NodeJS mà không gặp nhiều khó khăn
Sử dụng NodeJS, lập trình viên sẽ chỉ cần sử dụng một ngôn ngữ lập trình duy nhất là JavaScript cho cả phần front-end và back-end
Nhờ có tốc độ thông dịch và thực thi nhanh, NodeJS có thêm lợi thế để được chọn làm ngôn ngữ phát triển server-side hiệu quả
Cộng đồng sử dụng NodeJS lớn mạnh cũng giúp các lập trình viên mới tiếp xúc với NodeJS dễ hòa nhập, học hỏi và tháo gỡ khó khăn
Có được sự hỗ trợ từ các công cụ thông dụng tích hợp sẵn trong NodeJS Lập trình viên có thể dễ dàng kiểm tra mã nguồn đã chạy đúng hay chưa với Jasmin trong
Trang 37việc tạo các unit test Tương tự khi cài đặt những thư viện mới phục vụ cho dự án, Node package manager (npm) sẽ là công cụ hỗ trợ đắc lực
2.2.4 Nhược điểm
Dễ để cho lập trình viên có kinh nghiệm tìm hiểu nhưng lại khá khó cho người mới bắt đầu Đặc biệt là những lập trình viên quen với kiểu lập trình tuần tự (Synchronous)
Vì nó là công nghệ mới, vậy nên thường chỉ thích hợp với những start up Những dự án lớn, quan trọng của các công ty lớn sẽ ít chọn NodeJS để làm
2.3 ExpressJS
2.3.1 Tổng quan [6]
Express là một framework nhỏ nhưng linh động được xây dựng trên nền tảng NodeJS, framework này cung cấp các chức năng mạnh mẽ để phát triển các ứng dụng web và mobile
Express được sinh ra để làm đơn giản hóa quá trình cấu hình định tuyến, giao tiếp giữa client với server cho lập trình viên Hiện tại framework này đã có thêm nhiều gói trung gian (middleware packages) hỗ trợ đơn giản hóa công việc của lập trình viên như: body-parser, cors, timeout,
Express đang là một trong những framework phổ biến nhất trong lập trình các ứng dụng server-side và được áp dụng trong nhiều framework sử dụng Javascript khác
2.3.2 Công dụng
Cấu hình/lập trình các xử lý cho các HTTP request ở tất cả các URL khác nhau Kết hợp với các công cụ kết xuất giao diện (“View” rendering) để phản hồi dữ liệu thông qua việc chèn dữ liệu vào các mẫu (templates)
Cấu hình chung toàn bộ ứng dụng website như một cổng (port) kết nối và quy định các thông tin phản hồi (response) tương ứng
Thêm các thông tin bổ sung vào request, response đang xử lý thông qua các trung gian (middleware) bất cứ khi nào mà request vẫn còn nằm trong giai đoạn xử lý
Trang 382.4 Angular
2.4.1 Tổng quan về Angular [7]
Angular là một Javascript framework xây dựng ứng dụng web mã nguồn mở (open source) hoạt động ở phía người dùng (client-side) sử dụng HTML, CSS và ngôn ngữ lập trình Typescript
Angular là chữ A trong MEAN Trước đây chữ A trong MEAN Stack thường được biết tới AngularJS, nhưng sau năm 2012, Angular đã được Google tiếp quản và phát triển lên Angular 2 rồi tới Angular 4 và phiên bản mới nhất hiện nay là Angular 9 Angular là một Web Framework làm việc ở phía Front-end giúp thuận lợi trong việc tạo các Single Page web Application
2.4.2 Mô hình
Angular hoạt động dựa trên 8 thành phần cơ bản là Module, Component, Template, Metadata, Data binding, Service, Directive, Dependency injection
Hình 2 3 Các thành phần cơ bản trong angular
Hoạt động giữa các thành phần trong angular sẽ được mô tả như dưới đây
Trang 39Hình 2 4 Cách hoạt động giữa các thành phần trong Angular
Các thành phần như component, service, directive, template, sẽ được khai báo
và đóng gói trong các Module Trong các module, các component, service, directive bản chất đều là các class bình thường trong TypeScript, để giúp angular hiểu và nhận biết đâu và component, đâu là directive, angular cung cấp sẵn các decorator (một mẫu design pattern) để gắn vào các class như @Component để nhận biết component, @Directive để nhận biết directive… Trong các decorator này, người dùng có thể cung cấp các metadata
để khai báo tên (selector) thành phần đó, khai báo component sẽ gắn với giao diện template html và css là gì Với service thì không có decorator nhận diện và nó giống như một class TypeScript thông thường Như vậy, angular đã nhận diện được các thành phần trong nó
Trong quá trình hoạt động, template sẽ được dùng để khởi tạo giao diện Nhờ các directive và data binding, template sẽ trải qua giai đoạn xử lý, sửa đổi để tạo ra giao diện hiển thị thật sự trên màn hình, các sự kiện từ DOM (Document Object Model đại diện cho trang giao diện) sẽ liên tục được theo dõi và qua đó, component và directive sẽ có các phản hồi tương ứng Từ các phản hồi của directive và component, đối tượng đại diện cho giao diện là DOM có thể nhận được những thay đổi và những thay đổi đó sẽ tự động
Trang 40được trình duyệt cập nhật và hiển thị trên màn hình Các service sẽ đóng vai trò là thành phần hỗ trợ xử lý, có thể sử dụng lại trong nhiều component nhờ dependency injection
Angular được biết đến là có nhiệm vụ thực thi Single Page Application và giao diện hiển thị trên màn hình của người dùng cũng chỉ có một trang html duy nhất Nhưng mỗi component lại có phần template đính kèm và sẽ nằm tách rời ở nhiều file, angular
sẽ cần gom tất cả phần template đang sử dụng, hợp lại thành một template thống nhất để hiển thị trên màn hình
Trong một ứng dụng angular có thể có rất nhiều module, mỗi module lại có nhiều component, service… Trong tất cả sẽ có một module là root module Module cũng là một class TypeScript và được gắn decorator @NgModule, bên trong nó là các metadata Với root module thì sẽ có một metadata đặc biệt là “bootstrap”, nó chứa mảng các component sẽ được chọn để khởi động ban đầu Thông thường các ứng dụng angular sẽ
có sẵn một component được chọn để khởi động là AppComponent ngay từ khi tạo project Khi ứng dụng angular mới khởi động, trang giao diện sẽ là nội dung từ trang index.html với styles.css
2.5 MongoDB
2.5.1 Mô hình
MongoDB hệ quản trị cơ sở dữ liệu mã nguồn mở (open-source) thuộc họ cơ sở
dữ liệu phi quan hệ (NoSQL)
MongoDB được phát triển từ năm 2007 bởi một tổ chức tên là MongoDB Inc có trụ sở tại New York Tại thời điểm đó MongoDB được phát triển như là một nền tảng dịch vụ (Platform as a services - PAAS) Đến năm 2009 MongoDB đã được chính thức giới thiệu trên thị trường như một máy chủ cơ sở dữ liệu mã nguồn mở (open-source database server) được duy trì và phát triển bởi tổ chức MongoDB Inc Tại thời điểm đó
đã có nhiều tổ chức lớn và vừa như SourceForge, Foursquare, eBay sử dụng MongoDB
để phát triển cơ sở dữ liệu của họ
MongoDB được xây dựng theo hướng là một cơ sở dữ liệu hướng đối tượng vì vậy nó không có các ràng buộc toàn vẹn dữ liệu như ở các Cơ sở dữ liệu quan hệ mà cho phép lưu trữ dữ liệu linh hoạt (stores data in flexible) có dữ liệu khác nhau trong cùng một Collection (tương đương với Table ở SQL) Do chính đặc thù này mà MongoDB Có