xây dựng ứng dụng web cho thuê xe giữa người dùng easycar sử dụng mern stack

Bên cạnh đó tập trung nghiên cứu vào các công nghệ được áp dụng để thực hiện hoá sản phẩm như: + Nghiên cứu RESTful API, NodeJS, ExpressJS để xây dựng hệ thống APIs cung cấp chức năng ch

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP CÔNG NGHỆ THÔNG TIN

XÂY DỰNG ỨNG DỤNG WEB CHO THUÊ XE GIỮA NGƯỜI DÙNG EASYCAR SỬ DỤNG MERN STACK

Tp Hồ Chí Minh, tháng 7/2023

GVHD: TS HUỲNH XUÂN PHỤNG SVTH : NGUYỄN PHÚC AN

BÀNH ĐĂNG KHOA

S KL01 2 6 6 8

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HCM

KHOA CÔNG NGHỆ THÔNG TIN

KHÓA LUẬN TỐT NGHIỆP

TP Hồ Chí Minh, tháng 7 năm 2023

ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG WEB CHO THUÊ XE GIỮA NGƯỜI

DÙNG EASYCAR SỬ DỤNG MERN STACK

Giảng viên hướng dẫn: TS Huỳnh Xuân Phụng Sinh viên thực hiện:

Nguyễn Phúc An 19110321

Bành Đăng Khoa 19110378

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

GIẢNG VIÊN

NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

GIẢNG VIÊN

LỜI CẢM ƠN

Đầu tiên chúng em xin gửi lời cảm ơn chân thành và sâu xắc nhất đến Khoa Công Nghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật thành phố Hồ Chí Minh đã hướng dẫn giảng dạy, tạo điều kiện cho chúng em rèn luyện, học tập và phát triển bản thân trong suốt quá trình học tập tài trường, giúp chúng em chuẩn bị kiến thức, nền tảng để thực hiện đề tài này

Chúng em cũng xin gửi lời cảm ơn chân thành đến với thầy Huỳnh Xuân Phụng đã tận tâm hướng dẫn, góp ý chúng em xuyên suốt quá trình thực hiện đề tài để chúng em có thể hoàn thành đề tài một cách tốt nhất

Nhờ có nền tảng kiến thức vững vàng và những kinh nghiệm cộng với những lời góp ý của thầy, chúng em đã có thể hoàn thành đề tài một cách tốt nhất Tuy nhiên, do việc thiếu kinh nghiệm thực tế về phát triển phần mềm nên sẽ có những thiếu sót hay điểm sai trong bài báo cáo, chúng em mong thầy cô góp ý để chúng em có thể hoàn thiện bài báo cáo một cách tốt hơn!

Chúng em xin chân thành cảm ơn!

1

MỤC LỤC

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN 2

GIẢNG VIÊN 2

NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN 3

GIẢNG VIÊN 3

LỜI CẢM ƠN 4

MỤC LỤC 1

DANH MỤC HÌNH ẢNH 3

DANH MỤC BẢNG BIỂU 9

MỞ ĐẦU 13

1 LÝ DO CHỌN ĐỀ TÀI 13

2 ĐỐI TƯỢNG NGHIÊN CỨU 13

3 PHẠM VI NGHIÊN CỨU 14

4 MỤC TIÊU CỦA ĐỀ TÀI 14

4.1 PHÍA NGƯỜI DÙNG 14

4.2 PHÍA QUẢN LÝ 14

5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 15

6 PHÂN CÔNG 15

PHẦN NỘI DUNG 16

CHƯƠNG 1: CƠ SỞ CỦA ĐỀ TÀI 16

1.1 CƠ SỞ LÝ THUYẾT 16

1.2 KHẢO SÁT HIỆN TRẠNG 23

CHƯƠNG 2: MÔ HÌNH HOÁ YÊU CẦU 26

2.1 XÁC ĐỊNH YÊU CẦU 26

2

2.2 KIẾN TRÚC CHUNG CỦA HỆ THỐNG 26

2.3 MÔ HÌNH HOÁ YÊU CẦU 27

CHƯƠNG 3: THIẾT KẾ PHẦN MỀM 67

3.1 LƯỢT ĐỒ TUẦN TỰ 67

3.2 LƯỢC ĐỒ LỚP 87

3.3 LƯỢC ĐỒ HOẠT ĐỘNG 88

3.4 THIẾT KẾ CƠ SỞ DỮ LIỆU 113

3.5 THIẾT KẾ GIAO DIỆN 122

CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 186

4.1 CÀI ĐẶT 186

4.2 KIỂM THỬ 187

PHẦN KẾT LUẬN 226

1 KẾT QUẢ ĐẠT ĐƯỢC 226

1.1 VỀ LÝ THUYẾT 226

1.2 VỀ ỨNG DỤNG 226

2 ƯU ĐIỂM 227

3 NHƯỢC ĐIỂM 227

4 HƯỚNG PHÁT TRIỂN 227

TÀI LIỆU THAM KHẢO 229

3

DANH MỤC HÌNH ẢNH

Hình 1: Virtual DOM và DOM 17

Hình 2: One-way data binding trong ReacJS 17

Hình 3: Cấu trúc của Redux 18

Hình 4: Mongoose với NodeJS 22

Hình 5: Các nền tảng Cloudinary hỗ trợ 23

Hình 6: Ứng dụng ZoomCar 24

Hình 7: Ứng dụng Mioto 25

Hình 8: Kiến trúc hệ thống 27

Hình 9: Sơ đồ use-case phía người dùng 28

Hình 10: Sơ đồ use-case phía quản lý 29

Hình 11: Sequence “Đăng ký tài khoản” 67

Hình 12: Sequence “Đăng nhập với tài khoản người dùng” 68

Hình 13: Sequence “Đăng nhập với tài khoản Google” 68

Hình 14: Sequence “Đăng xuất tài khoản” 69

Hình 15: Sequence “Tìm kiếm xe cho thuê” 69

Hình 16: Sequence “Đặt xe” 70

Hình 17: Sequence “Thanh toán chuyến xe” 70

Hình 18: Sequence “Đổi mật khẩu” 71

Hình 19: Sequence “Thay đổi thông tin cá nhân của tài khoản người dùng” 71

Hình 20: Sequence “Gửi yêu cầu xác thực tài khoản người dùng” 72

Hình 21: Sequence “Gửi yêu cầu rút tiền” 72

Hình 22: Sequence “Đăng ký xe cho thuê” 73

Hình 23: Sequence “Tạm dừng cho thuê xe” 74

4

Hình 24: Sequence “Xoá xe cho thuê” 74

Hình 25: Sequence “Tiếp tục cho thuê xe” 75

Hình 26: Sequence “Cập nhật trạng thái xe” 76

Hình 27: Sequence “Đánh giá xe đã thuê” 77

Hình 28: Sequence “Báu xấu xe vi phạm” 78

Hình 29: Sequence “Đăng nhập với tài khoản quản lý hệ thống” 78

Hình 30: Sequence “Đăng xuất tài khoản” 78

Hình 31: Sequence “Xoá tài khoản người dùng” 79

Hình 32: Sequence “Khoá tài khoản người dùng” 79

Hình 33: Sequence “Chấp nhận yêu cầu xác thực tài khoản” 80

Hình 34: Sequence “Từ chối yêu cầu xác thực tài khoản” 81

Hình 35: Sequence “Chấp nhận yêu cầu đăng ký xe cho thuê” 81

Hình 36: Sequence “Từ chối yêu cầu đăng ký xe cho thuê” 82

Hình 37: Sequence “Tạm dừng cho thuê xe” 83

Hình 38: Sequence “Xoá xe cho thuê” 84

Hình 39: Sequence “Tiếp tục cho thuê xe” 84

Hình 40: Sequence “Chấp nhận yêu cầu rút tiền” 85

Hình 41: Sequence “Từ chối yêu cầu rút tiền” 86

Hình 42: Sequence “Chấp nhận yêu cầu báo xấu” 86

Hình 43: Sequence “Từ chối yêu cầu báo xấu” 86

Hình 44: Lược đồ lớp 88

Hình 45: Activity diagram “Đăng ký tài khoản” 89

Hình 46: Activity diagram “Đăng nhập với tài khoản người dùng” 89

Hình 47: Activity diagram “Đăng nhập với tài khoản Google” 90

5

Hình 48: Activity diagram “Đăng xuất tài khoản” 91

Hình 49: Activity diagram “Tìm kiếm xe cho thuê” 92

Hình 50: Activity diagram “Đặt xe” 92

Hình 51: Activity diagram “Thanh toán chuyến xe” 93

Hình 52: Activity diagram “Đổi mật khẩu” 94

Hình 53: Activity diagram “Thay đổi thông tin cá nhân của tài khoản” 95

Hình 54: Activity diagram “Gửi yêu cầu xác thực tài khoản người dùng” 96

Hình 55: Activity diagram “Gửi yêu cầu rút tiền” 97

Hình 56: Activity diagram “Đăng ký xe cho thuê” 98

Hình 57: Activity diagram “Tạm dừng cho thuê xe” 99

Hình 58: Activity diagram “Xoá xe cho thuê” 99

Hình 59: Activity diagram “Tiếp tục cho thuê xe” 100

Hình 60: Activity diagram “Cập nhật trạng thái xe” 101

Hình 61: Activity diagram “Đánh giá xe đã thuê” 102

Hình 62: Activity diagram “Báo xấu xe vi phạm” 103

Hình 63: Activity diagram “Đăng nhập với tài khoản quản lý hệ thống” 104

Hình 64: Activity diagram “Đăng xuất tài khoản” 105

Hình 65: Activity diagram “Xoá tài khoản người dùng” 105

Hình 66: Activity diagram “Khoá tài khoản người dùng” 106

Hình 67: Activity diagram “Chấp nhận yêu cầu xác thực tài khoản” 107

Hình 68: Activity diagram “Từ chối yêu cầu xác thực tài khoản” 107

Hình 69: Activity diagram “Chấp nhận yêu cầu đăng ký xe cho thuê” 108

Hình 70: Activity diagram “Từ chối yêu cầu đăng ký xe cho thuê” 108

Hình 71: Activity diagram “Tạm dừng cho thuê xe” 109

6

Hình 72: Activity diagram “Xoá xe cho thuê” 110

Hình 73: Activity diagram “Tiếp tục cho thuê xe” 111

Hình 74: Activity diagram “Chấp nhận yêu cầu rút tiền” 111

Hình 75: Activity diagram “Từ chối yêu cầu rút tiền” 112

Hình 76: Activity diagram “Chấp nhận yêu cầu báo xấu” 112

Hình 77: Activity diagram “Từ chối yêu cầu báo xấu” 113

Hình 78: Lược đồ ERD 114

Hình 79: Screen flow của Guest (Khách) 123

Hình 80: Screen flow của User (Người dùng) 123

Hình 81: Màn hình Landing Page 125

Hình 82: Màn hình Header (Chưa đăng nhập) 126

Hình 83: Màn hình Header (Đã đăng nhập) 126

Hình 84: Màn hình Left Navigation Bar 128

Hình 85: Màn hình Login Dialog 130

Hình 86: Màn hình Sign-in Page 132

Hình 87: Màn hình Fillter Page 134

Hình 88: Màn hình Detail Page – 1 137

Hình 89: Màn hình Detail Page – 2 137

Hình 90: Màn hình Detail Page – 3 138

Hình 91: Màn hình Car Register Page – 1 141

Hình 92: Màn hình Car Register Page – 2 141

Hình 93: Màn hình Car Register Page – 3 142

Hình 94: Màn hình Profile Page 145

Hình 95: Màn hình UserVerify Page 148

7

Hình 96: Màn hình Wallet Page 149

Hình 97: Màn hình History Page 151

Hình 98: Màn hình HistoryDetail Dialog – 1 153

Hình 99: Màn hình HistoryDetail Dialog – 2 153

Hình 100: Màn hình CarManage Page 156

Hình 101: Màn hình CarStatus Dialog – 1 157

Hình 102: Màn hình CarStatus Dialog – 2 158

Hình 103: Màn hình CarStatusUpdate Page 159

Hình 104: Màn hình Contract Page – 1 161

Hình 105: Màn hình Contract Page – 2 161

Hình 106: Màn hình Report Page 162

Hình 107: Screen flow của quản lý 163

Hình 108: Màn hình Login Page 165

Hình 109: Màn hình Left Navigation Bar 166

Hình 110: Màn hình AccountManager Page 167

Hình 111: Màn hình AccountDetail Dialog 169

Hình 112: Màn hình VerifyManager Page 170

Hình 113: Màn hình VerifyDetail Dialog 172

Hình 114: Màn hình CarRegister Page 173

Hình 115: Màn hình RegisterDetail Dialog – 1 175

Hình 116: Màn hình RegisterDetail Dialog – 2 175

Hình 117: Màn hình CarManager Page 176

Hình 118: Màn hình CarDetail Dialog – 1 178

Hình 119: Màn hình CarDetail Dialog – 2 179

8

Hình 120: Màn hình WithdrawManager Page 180

Hình 121: Màn hình ReportManager Page 182

Hình 122: Màn hình ReportDetail Dialog – 1 183

Hình 123: Màn hình ReportDetail Dialog – 2 184

Hình 124: Biểu đồ luồn điều khiển chức năng Login 191

Hình 125: Biểu đồ luồn dữ liệu chức năng Login 194

Hình 126: Biểu đồ luồn điều khiển chức năng Filter 200

Hình 127: Biểu đồ luồn dữ liệu chức năng Filter 211

Hình 128: Biểu đồ luồn điều khiển chức năng Gửi yêu cầu xác thực tài khoản 220

Hình 128: Biểu đồ luồn dữ liệu chức năng Gửi yêu cầu xác thực tài khoản 223

9

DANH MỤC BẢNG BIỂU

Bảng 1: Phân công công việc 15

Bảng 2: Mô tả Use case “Đăng ký tài khoản” 30

Bảng 3: Mô tả Use case “Đăng nhập với tài khoản hệ thống” 31

Bảng 4: Mô tả Use case “Đăng nhập với tài khoản Google” 32

Bảng 5: Mô tả Use case “Đăng xuất tài khoản” 34

Bảng 6: Mô tả Use case “Tìm kiếm xe cho thuê” 35

Bảng 7: Mô tả Use case “Đặt xe” 36

Bảng 8: Mô tả Use case “Thanh toán chuyến xe” 37

Bảng 9: Mô tả Use case “Đổi mật khẩu” 38

Bảng 10: Mô tả Use case “Thay đổi thông tin cá nhân của tài khoản người dùng” 39

Bảng 11: Mô tả Use case “Gửi yêu cầu xác thực tài khoản người dùng” 41

Bảng 12: Mô tả Use case “Gửi yêu cầu rút tiền” 42

Bảng 13: Mô tả Use case “Đăng ký xe cho thuê” 43

Bảng 14: Mô tả Use case “Tạm dừng cho thuê xe” 44

Bảng 15: Mô tả Use case “Xoá xe cho thuê” 46

Bảng 16: Mô tả Use case “Tiếp tục cho thuê xe” 47

Bảng 17: Mô tả Use case “Cập nhật trạng thái xe” 48

Bảng 18: Mô tả Use case “Đánh giá xe đã thuê” 49

Bảng 19: Mô tả Use case “Đăng nhập với tài khoản quản lý hệ thống” 50

Bảng 20: Mô tả Use case “Đăng xuất tài khoản” 52

Bảng 21: Mô tả Use case “Xoá tài khoản người dùng” 53

Bảng 22: Mô tả Use case “Khoá tài khoản người dùng” 54

Bảng 23: Mô tả Use case “Chấp nhận yêu cầu xác thực tài khoản” 55

10

Bảng 24: Mô tả Use case “Từ chối yêu cầu xác thực tài khoản” 56

Bảng 25: Mô tả Use case “Chấp nhận yêu cầu đăng ký xe cho thuê” 57

Bảng 26: Mô tả Use case “Từ chối yêu cầu đăng ký xe cho thuê” 59

Bảng 27: Mô tả Use case “Tạm dừng cho thuê xe” 60

Bảng 28: Mô tả Use case “Xoá xe cho thuê” 61

Bảng 29: Mô tả Use case “Tiếp tục cho thuê xe” 62

Bảng 30: Mô tả Use case “Chấp nhận yêu cầu rút tiền” 63

Bảng 31: Mô tả Use case “Từ chối yêu cầu rút tiền” 65

Bảng 32: Withdrawrequest 114

Bảng 33: Userverificationrequest 115

Bảng 34: Vehicleregister 115

Bảng 35: User 117

Bảng 36: Vehiclerentalhistory 118

Bảng 37: Vehicle 119

Bảng 38: Vehiclerentalstatus 121

Bảng 39: Vehiclestatus 121

Bảng 40: Reports 122

Bảng 41: Danh sách màn hình phía người dùng 123

Bảng 42: Chi tiết màn hình Landing Page 125

Bảng 43: Chi tiết màn hình Header 126

Bảng 44: Chi tiết màn hình Left Navigation Bar 128

Bảng 45: Chi tiết màn hình Login Dialog 130

Bảng 46: Chi tiết màn hình Sign-in Page 132

Bảng 47: Chi tiết màn hình Fillter Page 134

11

Bảng 48: Chi tiết màn hình Detail Page 138

Bảng 49: Chi tiết màn hình CarRegister Page 142

Bảng 50: Chi tiết màn hình Profile Page 145

Bảng 51: Chi tiết màn hình UserVerify Page 148

Bảng 52: Chi tiết màn hình Wallet Page 149

Bảng 53: Chi tiết màn hình History Page 151

Bảng 54: Chi tiết màn hình HistoryDetail Dialog 153

Bảng 55: Chi tiết màn hình CarManage Page 156

Bảng 56: Chi tiết màn hình CarStatus Dialog 158

Bảng 57: Chi tiết màn hình CarStatusUpdate Page 159

Bảng 58: Chi tiết màn hình Contract Page 161

Bảng 59: Chi tiết màn hình Report Page 162

Bảng 60: Danh sách màn hình của quản lý 163

Bảng 61: Chi tiết màn hình quản lý Login Page 165

Bảng 62: Chi tiết màn hình quản lý Left Navigation Bar 166

Bảng 63: Chi tiết màn hình quản lý AccountManager Page 168

Bảng 64: Chi tiết màn hình quản lý AccountDetail Dialog 169

Bảng 65: Chi tiết màn hình quản lý VerifyManager Page 170

Bảng 66: Chi tiết màn hình quản lý VerifyDetail Dialog 172

Bảng 67: Chi tiết màn hình quản lý CarRegister Page 173

Bảng 68: Chi tiết màn hình quản lý RegisterDetail Dialog 175

Bảng 69: Chi tiết màn hình quản lý CarManager Page 177

Bảng 70: Chi tiết màn hình quản lý CarDetail Dialog 179

Bảng 71: Chi tiết màn hình quản lý WithdrawManager Page 180

12

Bảng 72: Chi tiết màn hình quản lý ReportManager Page 182

Bảng 73: Chi tiết màn hình quản lý ReportManager Page 184

Bảng 74: Phạm vi kiểm thử của ứng dụng 187

Bảng 75: Thế kế test case cho chức năng Login 192

Bảng 76: Thế kế test case cho chức năng Filter 200

Bảng 77: Thế kế test case cho chức năng Gửi yêu cầu xác thực tài khoản 221

Bảng 78: Kết quả kiểm thử 225

Hiện nay ở Việt Nam có 4.512.518 ôto đang lưu hành (Số liệu theo cục đăng kiểm Việt Nam) và ở năm 2016 con số này là 2.516.144 Ta có thể thấy khi đất nước càng phát triển, đời sống được cải thiện thì nhu cầu đi lại của cá nhân cũng sẽ tăng cao khi chỉ trong 6 năm

đã có thêm 2 triệu xe hơi được lưu thông, tuy nhiên không phải ai cũng có điều kiện để mua hoàn toàn một chiếc xe hơi do giá cả vẫn còn cao Chính vì thế mà nhóm chúng em quyết định lựa chọn đề tài “XÂY DỰNG ỨNG DỤNG WEB CHO THUÊ XE GIỮA NGƯỜI DÙNG EASYCAR SỬ DỤNG MERN STACK” để góp phần giúp cho những người có như cầu đi lại cao nhưng không có tài chính để để mua xe có thể thuê xe theo nhu cầu của bản thân

2 ĐỐI TƯỢNG NGHIÊN CỨU

Đối tượng nghiên cứu chính của đề tài là những cá nhân có nhu cầu thuê và cho thuê xe ôto, quản lý lịch sử thuê xe, quản lý các xe đang cho thuê cũng như đảm bảo quyền lợi giữa chủ xe và người thuê xe Bên cạnh đó tập trung nghiên cứu vào các công nghệ được áp dụng để thực hiện hoá sản phẩm như:

+ Nghiên cứu RESTful API, NodeJS, ExpressJS để xây dựng hệ thống APIs cung cấp chức năng cho ứng dụng, truy vấn cơ sở dữ liệu một cách nhanh chóng hiệu quả

+ Nghiên cứu framework ReactJS, các thư viện hỗ trợ như Axios, React-router, toolkit, Redux-Persist,… Để xây dựng giao diện cho ứng dụng cũng như để quản lý dữ liệu trên trình duyệt

Redux-+ Nghiên cứu về cơ sở dữ liệu MongoDB để làm cơ sở dữ liệu cho ứng dụng

+ Nghiên cứu về service Cloudinary để hỗ trợ ứng dụng trong việc lưu trữ video, hình ảnh

+ Nghiên cứu về Json Web Token (JWT) để bảo mật cho các chức năng của ứng dụng

14

3 PHẠM VI NGHIÊN CỨU

Ứng dụng web chủ tập trung vào các nghiệp vụ cơ bản của một ứng dụng cho thuê xe phải có như tìm kiếm xe, xem thông tin xe, đặt xe, đánh giá chuyến xe, các chức năng khác như gửi đăng ký xe cho thuê xe, xác thực tài khoản để đạt yêu cầu thuê xe, thanh toán với Momo hoặc VNPAY Mục đích cuối cùng là xây dựng hoàn thành một sản phẩm hoàn thiện và ổn định

4 MỤC TIÊU CỦA ĐỀ TÀI

4.1 PHÍA NGƯỜI DÙNG

- Xây dựng ứng dụng Web và Android phía người dùng với các chức năng sau:

+ Đăng ký tài khoản của hệ thống

+ Đăng nhập với tài khoản của hệ thống hay tài khoản Google

+ Tìm kiếm xe gần với địa chỉ nhập vào, filter dựa trên kết quả xe tìm kiếm được + Cập nhật thông tin tài khoản

+ Gửi yêu cầu xác thực tài khoản

+ Xem lại các lịch sử thuê xe, xem chi tiết thông tin hoá đơn

+ Quản lý các xe đang cho thuê, cho phép cập nhật trạng thái, xem lịch sử thuê xe của

xe, tạm dừng và xoá thông tin xe

+ Tạo hợp đồng thuê xe sau khi thanh toán, người thuê xe và cả chủ xe đều có thể tạo hợp đồng

+ Quản lý ví và rút tiền ra khỏi ví

+ Thanh toán với Momo

4.2 PHÍA QUẢN LÝ

- Xây dựng ứng dụng web cho người quản lý với các chức năng sau:

+ Quản lý tài khoản người dùng, xem thông tin tài khoản, khoá và xoá tài khoản

+ Quản lý yêu cầu xác thực tài khoản, xem chi tiết yêu cầu, từ chối và chấp nhận yêu cầu

+ Quản lý đăng ký cho thuê xe lên hệ thống, xem chi tiết đơn đăng ký, từ chối và chấp nhận đơn đăng ký

15

+ Quản lý các xe đang cho thuê trên hệ thống, xem thông tin chi tiết của xe và chủ xe, tạm dừng cho thuê xe và xoá thông tin xe

+ Quản lý yêu cầu rút tiền, chấp nhận và từ chối các yêu cầu rút tiền

5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN

Sau khi hoàn thành đồ án, nhóm chúng em đã được rèn luyện, học tập nhiều kỹ năng mới, có thể áp dụng vào công việc sau này Đặc biệt là các kiến thức về các công nghệ mới, thiết kế phần mềm để có thể góp phần giúp chúng em cạnh tranh trong quá trình tìm việc sau này, cũng như rèn luyện khả năng làm việc nhóm, làm việc dưới áp lực thời gian cũng như biết cách phân bố thời gian làm việc sao cho hợp lý

6 PHÂN CÔNG

Bảng 1: Phân công công việc THÀNH VIÊN CÔNG VIỆC ĐÁNH GIÁ Nguyễn Phúc An - Thiết kế giao diện

16

PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ CỦA ĐỀ TÀI

1.1 CƠ SỞ LÝ THUYẾT

1.1.1 Các công nghệ sử dụng Front-end

1.1.1.1 Framework ReactJS

ReactJS là một front-end JavaScript framework được phát triển bởi Facebook, ReactJS

hỗ trợ xây dựng giao diện thành những thành phần nhỏ (component) có thể được tái sử dụng trong quá trình phát triển và xây dựng phần mềm ứng dụng ReactJS hoạt động ở trên client và trên server ReactJS sẽ tự so sánh sự thay đổi của các giá trị tại lần render gần nhất với lần render tiếp theo để quyết định xem component nào sẽ được render lại, chính

vì điều này tiết kiệm rất nhiều thời gian khi render trang web

ReactJS giới thiệu công nghệ Virtual DOM hay còn gọi là DOM ảo Virtual DOM chính

là một đại diện ảo cho DOM thật Như DOM thật Virtual DOM cũng có cấu trúc cây mỗi element chính là một nút trên cây Nếu trạng thái của một nút trong cây bị thay đổi thì một cây Virtual DOM mới được tạo Virtual DOM sẽ tính toán sao cho việc thay đổi lên DOM thật tiếc kiệm chi phí một cách tối đa nhất từ đó cải thiện hiệu năng của ứng dụng

17

Hình 1: Virtual DOM và DOM ReactJS giới thiệu cơ chế one-way data binding, dữ liệu được truyền từ component cha xuống các component con thông qua props và trong mỗi component sẽ có các state để quản

lý dữ liệu của chính component ấy Chính vì sự rằng buộc rõ ràng này nên khi làm việc với ReactJS chúng ta rất khó để gây ra việc sai lệch dữ liệu do hạn chế từ cơ chế one-way data binding và cũng như dể dàng quản lý và sửa lỗi

Hình 2: One-way data binding trong ReacJS ReactJS cũng giới thiệu JSX, cho phép viết tag HTML trong file JavaScript Việc này cho phép người lập trình khai thác tối đa sức mạnh của JavaScript khi sử lý giao diện web với các tag HTML

1.1.1.2 Redux

Redux là một thư viện JavaScript được tạo ra để quản lý trạng thái của ứng dụng Redux được tạo dựa trên nền tảng tư tưởng kiến Flux của Facebook đưa ra, chính vì thế Redux hoạt động rất tốt khi kết hợp với ReactJS

- Nguyên lý hoạt động của Redux:

18

+ Nguyên lý 1: Trong một ứng dụng web có rất nhiều dữ liệu như dữ liệu trạng thái của giao diện hoặc dữ liệu hiển thị, các loại dữ liệu này có nguồn góc khác nhau, phụ thuộc vào rất nhiều yếu tốt khác nhau dẫn đến việc quản lý, theo dõi từng thành phần dữ liệu chở nên khó khăn Chính vì thế để giải quyết vấn đề phức tạp này, Redux tạo thành một nguồn

dữ liệu duy nhất giúp quản lý và theo dõi dễ dàng hơn

+ Nguyên lý 2: Dữ liệu state của Redux chỉ được phép đọc, cách duy nhất để thay đổi state của ứng dụng phải thông qua Action Với Redux, trạng thái chỉ được phép thay đổi khi có một sự kiện diễn ra, khi đấy state của Redux sẽ được cập nhật dẫn tới sự Re-render của UI, làm cho giao diện được cập nhật

+ Nguyên lý 3: Việc thay đổi trạng thái của ứng dụng được thực hiện thông qua các hàm thuần tuý (pure function) nhận 2 tham số đầu vào là state trước đó và action và sẽ trả về state sau đó Các hàm này rất nhẹ nên khả năng scale rất tốt

- Cấu trúc của Redux:

Hình 3: Cấu trúc của Redux

19

- Tất cả các trạng thái dữ liệu được lưu trong Store, Store được tạo ra bởi hàm Redux.createStore, store được coi là cầu nối giữa 3 nguyên lý hoạt động của Redux Store lưu trạng thái hiện tại của ứng dụng, cho phép dispatch một action Khi tạo ra store, phải xác định hàm reducer để xác định state sẽ thay đổi như thế nào

+ getState(): trả về trạng thái hiện tại của store

+ dispatch(): gửi đi một action để cập nhật lại state

+ Subscirbe(): phương thức để theo dõi state

1.1.1.3 Material UI

Material UI là một thư viện cung cấp React component ứng dụng thư viện Material Design của Google Material UI cung cấp số lượng lớn pre-built component như Button, Stack, Grid để giúp Developer tăng tốc độ phát triển ứng dụng Material UI được thiết kế

để hỗ trợ người dùng tuỳ chỉnh các component theo ý của mình hoặc thiết kế các component khác dựa trên các component base của Material UI

Material UI có thể sử dụng cùng với các Framework Javascript khác, một vài framework tiêu biểu như Angular JS, Vue JS hay ReactJS, hỗ trợ dựng giao diện đẹp đẽ và Responsive Với 35,000 lượt sao trên Github, Material UI là một trong những thư viện giao diện tốt nhất cho React

1.1.1.4 Các thư viện hỗ trợ khác

1.1.1.4.1 Axios

- Axios là một thư viện HTTP Client dựa trên cơ chế promise cho NodeJS và trình duyệt Axios được thiết kế đồng đẳng có thể chạy trên trình duyệt và trên NodeJS với cùng đoạn code Trên phía server Axios sử dụng code native HTTP của NodeJS còn trên trình duyệt

sử dụng XMLHttpRequests

- Có các chức năng:

+ Tạo XMLHttpRequest từ trình duyệt

+ Tạo http request từ NodeJS

+ Hỗ trợ Promise API

+ Hỗ trợ “Intercept” request và response

+ Hỗ trợ biến đổi request và response

20

+ Huỷ bỏ request

+ Tự biến đổi dữ liệu JSON

+ Hỗ trợ bảo vệ trình duyệt trước XSRF

- Các đặc tính của NodeJS:

+ Dễ dàng bắt đầu, có thể sử dụng để dựng cái ứng dụng mẫu hoặc trong mô hình phát triển agile

+ Cung cấp các dịch vụ nhanh chống và có khả năng scale tốt

+ Sử dụng ngôn ngữ Javascript vậy nên dễ dàng cho các lập trình viên Javascript xây dựng các back-end service

+ Code đẹp và gọn gàng hơn

+ Cộng đồng lớn với nhiều thư viện tiện ích hỗ trợ

21

+ Lập trình bất đồng bộ, tránh các tác vụ gây nghẽn

- Các điểm mạnh của NodeJS:

+ Dễ dàng mở rộng: Các nhà phát triển ứng dụng lựa chọn sử dụng NodeJS bởi khả năng

mở rộng cả về mặt phần cứng và phần mềm Dễ dàng thêm tài nguyên trong quá trình mở rộng của ứng dụng

+ Các ứng dụng Real-times: NodeJS có tốc độ đồng bộ hoá nhanh hơn các framework khác nên được sử dụng rất nhiều trong các ứng dụng web real-times như game hoặc các chat-apps

+ Nhanh chóng: NodeJS được chạy trên công nghệ V8 được phát triển bởi Google Các event vòng lập sẽ xử lý các tác vụ bất đồng bộ vậy nên các tác vụ như đọc, viết database, kết nối network hoặc file đều được xử lý nhanh chống

+ Dễ học và dễ code: NodeJS sử dụng ngôn ngữ JavaScript Nếu bạn đã là một end developer có kinh nghiệm thì việc chuyển đổi sang NodeJS rất dễ dàng

Front-+ Caching: NodeJS hỗ trợ cache lưu trữ một module bất kỳ Mỗi khi có request yêu cầu một module, module ấy sẽ được lấy từ cache trong bộ nhớ ứng dụng nên module không cần phải được execute để chạy

+ Data streaming: Trong NodeJS HTTP request và respone được coi là 2 sự kiện độc lập Khi xử lý các file, thời gian xử lý sẽ được rút gọn NodeJS còn cho phép stream audio

22

ExpressJS là framework nổi tiếng nhất để xây dựng ứng dụng web của NodeJS và là thư viện nền tảng cho nhiều thư viện nổi tiếng khác của NodeJS ExpressJS cung cấp cơ chế để:

+ Cung cấp cơ chế để định nghĩa các phương thức để xử lý các HTTP request khác nhau như (GET, POST, PUT, DELETE, UPDATE)

+ Cung cấp cơ chế để re-render, chèn dữ liệu vào template

+ Tinh chỉnh các thông số như port, địa chỉ template để phản hồi dựa trên request

+ Cung cấp cơ chế middleware để intercept các request để xác thực

1.1.2.3 Mongoose

- Mongoose là một thư viện ORM, cung cấp công cụ hỗ trợ mapping object thành document cho NodeJS làm việc với MongoDB Mongoose hỗ trợ quan hệ giữa data, cung cấp schema validate, dùng để biến đổi các object trong code thành dữ liệu đại diện cho object đó trong MongoDB

Hình 4: Mongoose với NodeJS

- MongoDB là database không có cấu trúc (schema-less) NoSQL Có thể lưu trữ dữ liệu JSON trong database và cấu trúc của một record có thể tuỳ biến mà không bị rằng buộc bởi một quy luật cụ thể Đây là điểm mạnh của MongoDB, hỗ trợ quá trình phát triển và giảm thời gian phát triển ứng dụng

- Cloudinary hỗ trợ nhiều nền tảng ngôn ngữ khác nhau như PHP, Java, NodeJS,…

Hình 5: Các nền tảng Cloudinary hỗ trợ

1.2 KHẢO SÁT HIỆN TRẠNG

1.2.1 ZoomCar

Link: https://www.zoomcar.com/

- Chức năng chính:

+ Tạo tại khoản để chở thành thành viên, chỉnh sửa thông tin, xác thực tài khoản sử dụng bằng lái xe, lịch sử thuê xe

+ Thuê xe, dựa trên vị trí,có thể lựa chọn loại xe dựa theo nhu cầu, sedan hay SUV, xe

tự động hay xe số, có thể nhận xe ở sân bay hoặc được giao xe tận nhà

+ Chở thành ZoomHost để có thể cho thuê xe của bản thân

1.2.2 Mioto

Mioto được thành lập với sứ mệnh mang đến nền tảng công nghệ hiện đại kết nối chủ

xe ô tô và hành khách theo cách Nhanh Nhất, An Toàn Nhất và Tiết Kiệm Nhất

Mioto hướng tới việc xây dựng một cộng đồng chia sẻ ô tô văn minh với nhiều tiện ích thông qua ứng dụng trên di động, nhằm nâng cao chất lượng cuộc sống của cộng đồng.” (Nguồn: https://www.mioto.vn/aboutus )

26

CHƯƠNG 2: MÔ HÌNH HOÁ YÊU CẦU

2.1 XÁC ĐỊNH YÊU CẦU

2.1.1 Yêu cầu chức năng

Xây dựng một website cho phép:

- Đối với người dùng:

+ Người dùng phải bắt buộc tạo tài khoản để có thể sử dụng dịch vụ của website, phải xác thực tài khoản sử dụng bằng GPLX

+ Cho phép người dùng nhập vị trí, ngày thuê xe và ngày trả xe để tìm kiếm xe cho thuê, cho phép người dùng tìm kiếm xe dựa trên nhu cầu như kiểu xe, số chỗ ngồi, thương hiệu, loại xe

+ Cho phép người dùng trở thành người cho thuê xe, sử dụng dịch vụ được cung cấp của website để cho thuê xe, quản lý các xe đang được cho thuê trên website

+ Cho phép người dùng có thể quản lý thông tin của tài khoản, quản lý lịch sử thuê xe, quản lý xe cho thuê, quản lý thu nhập từ việc thuê xe

- Đối với người quản lý:

+ Cho phép người quản lý quản lý tài khoản người dùng, xác thực tài khoản người dùng + Cho phép người quản lý quản lý các xe đang cho thuê

2.1.2 Yêu cầu phi chức năng

- Giao diện trực quan, dễ dùng

27

Hình 8: Kiến trúc hệ thống

2.3 MÔ HÌNH HOÁ YÊU CẦU

2.3.1 Lược đồ Use case

2.3.1.1 Phía người dùng

28 Hình 9: Sơ đồ use-case phía người dùng

2.3.1.2 Phía quản lý

29 Hình 10: Sơ đồ use-case phía quản lý

30

2.3.2 Đặc tả Use case

2.3.2.1 Phía người dùng

2.3.2.1.1 Use case “Đăng ký tài khoản”

Bảng 2: Mô tả Use case “Đăng ký tài khoản”

- Nếu đăng ký không thành công: Người dùng được hệ thống thông báo những trường dữ liệu không hợp lệ

31

5 Hệ thống hiển thị thông báo đăng ký thành công và yêu cầu người dùng xác thực tài khoản thông qua email được sử dụng để đăng ký

4 Hệ thống hiển thị thông báo đăng ký không thành công

và highlight các trường dữ liệu không hợp lệ

Luồng mở rộng

(Extended-flow)

2.3.2.1.2 Use case “Đăng nhập với tài khoản hệ thống”

Bảng 3: Mô tả Use case “Đăng nhập với tài khoản hệ thống”

Người dùng đã có tài khoản trong hệ thống

Hậu điều kiện

(Post-condition)

- Nếu đăng nhập thành công: Người dùng được xác thực và

hệ thống hiển thị nội dung trang chủ đã kèm theo thông tin người dùng

- Nếu đăng nhập không thành công: Người dùng không được xác thực và hệ thống hiển thị nội dung trang chủ cho khách (Guest)

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

2 Người dùng nhấn vào nút “ĐĂNG NHẬP”

3 Hệ thống xác thực tài khoản của người dùng

4 Hệ thống xác định vai trò của người dùng

5 Hệ thống trả về các thông tin cần thiết của người dùng để hiển thị

6 Hệ thống quay về màn hình trang chủ và hiển thị kèm theo các thông tin người dùng

2.3.2.1.3 Use case “Đăng nhập với tài khoản Google”

Bảng 4: Mô tả Use case “Đăng nhập với tài khoản Google”

Người dùng đã có tài khoản Google

Hậu điều kiện

(Post-condition)

- Nếu đăng nhập thành công: Người dùng được xác thực và

hệ thống hiển thị nội dung trang chủ đã kèm theo thông tin người dùng

- Nếu đăng nhập không thành công: Người dùng không được xác thực và hệ thống hiển thị nội dung trang chủ cho khách (Guest)

1 Người dùng bấm vào nút “Google”

2 Người dùng chọn tài khoản Google để đăng nhập vào hệ thống

3 Hệ thống xác thực tài khoản Google của người dùng

4 Hệ thống xác định vai trò của người dùng

5 Hệ thống trả về các thông tin cần thiết của người dùng để hiển thị

6 Hệ thống quay về màn hình trang chủ và hiển thị kèm theo các thông tin người dùng

34

Luồng mở rộng

(Extended-flow)

2.3.2.1.4 Use case “Đăng xuất tài khoản”

Bảng 5: Mô tả Use case “Đăng xuất tài khoản”

Người dùng đã đăng nhập vào hệ thống

Hậu điều kiện

- Nếu tìm kiếm thành công: Hệ thống trả về trang tìm kiếm

xe kèm với kết quả tìm kiếm

- Nếu tìm kiếm không thành công: Hệ thống sẽ thông báo tìm kiếm không thành công và highlight các trường dữ liệu bị sai

1 Người dùng nhập vị trí, ngày bắt đầu và ngày kết thúc

2 Người dùng bấm vào nút “TÌM KIẾM XE”

3 Hệ thống kiểm tra vị trí người dùng nhập

4 Hệ thống lấy dữ liệu xe phù hợp với các dữ liệu người dùng nhập

5 Hệ thống điều hướng sang trang tìm kiếm xe và hiển thị kèm với dữ liệu xe đã tìm kiếm được