ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM
HUỲNH QUANG TRUNG
PHAN NGỌC QUANG
ĐỒ ÁN 1
XÂY DỰNG ỨNG DỤNG TÌM KIẾM BÃI ĐỖ XE Ơ TƠ
(Car parking finder)
TP. HỒ CHÍ MINH, THÁNG 6 NĂM 2022
ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM
HUỲNH QUANG TRUNG – 19520317
PHAN NGỌC QUANG - 19522100
ĐỒ ÁN 1
XÂY DỰNG ỨNG DỤNG TÌM KIẾM BÃI ĐỖ XE Ơ TƠ
(Car parking finder)
GIẢNG VIÊN HƯỚNG DẪN
ThS. HUỲNH HỒ THỊ MỘNG TRINH
TP. HỒ CHÍ MINH, THÁNG 6 NĂM 2022
LỜI CẢM ƠN
Nhóm chúng em xin gửi lời cảm ơn chân thành và sự tri ân sâu sắc đến cô đã hướng
dẫn, tạo điều kiện cho nhóm chúng em hồn thành đồ án mơn Đồ án 1.
Trong vịng 11 tuần, qua các buổi học, nhờ sự chỉ dẫn nhiệt tình của cô, chúng em đã
tiếp thu được những kiến thức quan trọng, bổ ích cùng những góp ý chân thành để có
thể làm được một đồ án hồn chỉnh. Trong khoảng thời gian thực hiện đồ án, chúng
em đã học hỏi thêm được nhiều kiến thức, kinh nghiệm, biết được quy trình để tạo ra
một sản phẩm phần mềm.
Bên cạnh đó, chúng em xin cảm ơn các bạn bè trong lớp đã động viên, thảo luận và
góp ý cho nhóm đồng thời đã khơi thêm nguồn động lực cho nhóm trong suốt q
trình đầy khó khăn.
Mặc dù đã cố gắng hoàn thành báo cáo với tất cả nỗ lực song báo cáo của nhóm chúng
em chắc chắn khơng tránh khỏi những thiếu sót, chúng em rất mong nhận được sự
thơng cảm và góp ý chân thành từ cơ. Nhóm em xin chân thành cảm ơn.
Thành phố Hồ Chí Minh, tháng 6 năm 2022
Nhóm gồm Huỳnh Quang Trung, Phan Ngọc Quang
TÓM TẮT
Đồ án với đề tài “Xây dựng ứng dụng tìm kiếm bãi đỗ xe” tập trung vào phân tích
thực trạng và ứng dụng các cơng nghệ để từ đó xây dụng ứng dụng ứng dụng
mobile có thể sử dụng mà không yêu cầu quá nhiều về phần cứng, phần mềm. Đáp
ứng được nhu cầu cơ bản về ứng dụng tìm kiếm bãi đỗ xe.
Đề tài được bắt đầu từ việc tìm hiểu thực trạng, đưa ra các vấn đề cịn tồn đọng hoặc
có thể cải thiện. Xác định mục tiêu, phạm vi của đề tài cũng như các chức năng cần
có của hệ thống. Ngồi việc xử lý các nghiệp vụ cho hệ thống, nhóm cũng đã tìm
hiểu, so sánh và lựa chọn được các công nghệ mới và phù hợp giúp nâng cao trải
nghiệm người dùng, tối ưu chi phí phát triển và triển khai.
Nhờ việc phân tích các yêu cầu rõ ràng, thời gian phát triển ngắn và các yêu cầu,
tính năng ít thay đổi, trong quá trình phát triển đề tài đã sử dụng mơ hình V-model
cho việc xây dựng hệ thống. Kết quả thu được trong giai đoạn thiết kế như kiến trúc
hệ thống, cơ sở dữ liệu, giao diện được thể hiện bằng sơ đồ người dùng, sơ đồ tuần
tự và bản thiết kế sử dụng công cụ Figma và Draw.io. Trong giai đoạn thực hiện,
client và server được phát triển song song sử dụng thư viện React cho client và
Node.js với Express framework cho server, công cụ phát triển Visual Studio Code
cùng công cụ quản lý công việc Notion. Công việc kiểm thử unit test được thực hiện
xuyên suốt quá trình phát triển và được kiểm thử tích hợp ở cuối giai đoạn. Trong
giai đoạn vận hành, server đã được triển khai lên máy chủ Heroku, hồn tồn có thể
truy cập dữ liệu thông qua api từ bất cứ thiết bị nào gửi yêu cầu có chứa trường xác
thực dữ liệu hợp lệ.
Phần cuối cùng của khố luận là trình bày kết quả đã thực hiện lên cuốn báo cáo,
đưa ra kết luận và hướng phát triển cho hệ thống trong tương lai.
Nội dung đồ án được trình bày trong 5 chương:
-
Chương 01: Tổng quan
Trình bày sơ bộ về thực trạng, nhu cầu thực tế. Xác định mục tiêu và phạm vi đề tài.
-
Chương 02: Cơ sở lý thuyết, tổng quan công nghệ
Giớ thiệu về giải thuật, những công nghệ, nền tảng được sử dụng trong đồ án.
-
Chương 03: Phân tích thiết kế ứng dụng
Phân tích yêu cầu, thiết kế, hiện thực và triển khai ứng dụng.
-
Chương 04: Kết luận
-
Chương 05: Cài đặt và thử nghiệm
Những kết quả đạt được sau khi kết thúc đồ án. Những hạn chế, khó khăn trong q
trình phát triển đồ án và nêu ra hướng phát triển trong tương lai.
MỤC LỤC
Chương 1.
1.1.
TỔNG QUAN .....................................................................................1
Khảo sát hiện trạng ........................................................................................1
1.1.1.
Nhu cầu thực tế đề tài .............................................................................1
1.1.2.
Khảo sát một số ứng dụng hiện có ..........................................................1
1.2.
Mục tiêu .........................................................................................................3
1.2.1.
Đối tượng sử dụng ..................................................................................3
1.2.2.
Yêu cầu ...................................................................................................4
Chương 2.
CƠ SỞ LÝ THUYẾT, TỔNG QUAN CÔNG NGHỆ ........................6
2.1.
Thuật tốn sử dụng ........................................................................................6
2.1.1.
2.2.
Thuật tốn Bcrypt ...................................................................................6
Cơng nghệ sử dụng ........................................................................................8
2.2.1.
React .......................................................................................................8
2.2.2.
React Redux ..........................................................................................10
2.2.3.
Ant Design ............................................................................................12
2.2.1.
Tailwindcss ...........................................................................................13
2.2.2.
Express.js ..............................................................................................14
2.2.3.
Firebase Storage ....................................................................................15
2.2.4.
JSON Web Token .................................................................................16
2.2.5.
Vercel ....................................................................................................19
2.2.6.
Heroku ..................................................................................................19
Chương 3.
PHÂN TÍCH THIẾT KẾ ỨNG DỤNG ............................................21
3.1.
Use case .......................................................................................................21
3.1.1.
Sơ đồ Use case ......................................................................................21
3.1.2.
Danh sách Actors ..................................................................................23
3.1.3.
Danh sách các Use case ........................................................................23
3.1.4.
Đặc tả Use case .....................................................................................24
3.2.
Activity diagram ..........................................................................................38
3.2.1.
Lược đồ hoạt động đăng nhập ..............................................................38
3.2.2.
Lượt đồ hoạt động đăng ký ...................................................................39
3.2.3.
Lược đồ hoạt động khôi phục mật khẩu ...............................................40
3.2.4.
Lược đồ hoạt động cập nhật thông tin ..................................................41
3.2.5.
Lược đồ hoạt động lưu bãi đỗ yêu thích ...............................................42
3.2.6.
Lược đồ hoạt động quản lý danh sách xe .............................................43
3.2.7.
Lược đồ hoạt động tìm bãi đỗ ...............................................................44
3.2.8.
Lược đồ hoạt động chỉ đường đến bãi đỗ .............................................45
3.2.9.
Lược đồ hoạt động đặt chỗ ...................................................................46
3.2.10.
Lược đồ hoạt động quản lý bãi đỗ .....................................................47
3.2.11.
Lược đồ hoạt động check in, check out .............................................48
3.3.
Thiết kế cơ sở dữ liệu ..................................................................................49
3.3.1.
Sơ đồ ERD ............................................................................................49
3.3.2.
Mô tả chi tiết .........................................................................................49
3.4.
Thiết kế giao diện ........................................................................................55
3.4.1.
Sơ đồ liên kết màn hình ........................................................................55
3.4.2.
Danh sách các màn hình .......................................................................56
3.4.3.
Mơ tả chi tiết các màn hình ...................................................................58
Chương 4.
KẾT LUẬN .......................................................................................95
4.1.
Kết quả đạt được ..........................................................................................95
4.2.
Những ưu điểm và hạn chế ..........................................................................96
4.2.1.
Ưu điểm ................................................................................................96
4.2.2.
Hạn chế .................................................................................................96
4.3.
Hướng phát triển ..........................................................................................97
Chương 5.
CÀI ĐẶT VÀ THỬ NGHIỆM ..........................................................99
5.1.
Môi trường cài đặt .......................................................................................99
5.2.
Các thư viện, framework liên quan .............................................................99
5.3.
Kiểm thử phần mềm ....................................................................................99
5.4.
Hướng dẫn cài đặt ........................................................................................99
BẢNG PHÂN CÔNG CÔNG VIỆC ......................................................................100
TÀI LIỆU THAM KHẢO .......................................................................................101
DANH MỤC HÌNH
Hình 2.1 Tốc độ băm của 1 số thuật tốn phổ biến .....................................................7
Hình 2.2 Mã giải thuật tốn băm Bcrypt .....................................................................7
Hình 2.3 Kết qủa cuối cùng của quá trình băm ...........................................................8
Hình 2.4 Các thành phần của Redux .........................................................................11
Hình 2.5 Logo Firebase Storage................................................................................15
Hình 2.6 Logo JSON Web Token (JWT) .................................................................16
Hình 2.7 Nội dung header JWT ................................................................................17
Hình 2.8 Nội dung Reserved claims .........................................................................18
Hình 2.9 Ngun tắc chuỗi bí mật ............................................................................18
Hình 3.1 Sơ đồ use case ............................................................................................22
Hình 3.2 Lược đồ hoạt động đăng nhập ....................................................................38
Hình 3.3 Lược đồ hoạt động đăng ký........................................................................39
Hình 3.4 Lược đồ hoạt động khơi phục mật khẩu.....................................................40
Hình 3.5 Lược đồ hoạt động cập nhật thơng tin .......................................................41
Hình 3.6 Lược đồ hoạt động lưu bãi đỗ xe yêu thích ...............................................42
Hình 3.7 Lược đồ hoạt động quản lý danh sách xe ...................................................43
Hình 3.8 Lược đồ hoạt động tìm bãi đỗ ....................................................................44
Hình 3.9 Lược đồ hoạt động chỉ đường đến bãi đỗ ..................................................45
Hình 3.10 Lược đồ hoạt động đặt chỗ .......................................................................46
Hình 3.11 Lược đồ hoạt động quản lý bãi đỗ ...........................................................47
Hình 3.12 Lược đồ hoạt động check in, check out ...................................................48
Hình 3.13 Lược đồ quan hệ ERD ..............................................................................49
Hình 3.14 Sơ đồ liên kết màn hình dành cho chủ xe ................................................55
Hình 3.15 Sơ đồ liên kết màn hình dành cho doanh nghiệp - chủ bãi đỗ xe ............55
Hình 3.16 Sơ đồ liên kết màn hình dành cho nhân viên bãi đỗ ................................56
Hình 3.17 Màn hình splash .......................................................................................58
Hình 3.18 màn hình onboarding................................................................................59
Hình 3.19 Màn hinh đăng nhập .................................................................................60
Hình 3.20 Màn hình đăng ký.....................................................................................62
Hình 3.21 Màn hình chính ........................................................................................63
Hình 3.22 Màn hình chi tiết bãi đỗ ...........................................................................65
Hình 3.23 Màn hình chọn xe .....................................................................................66
Hình 3.24 Màn hình chọn vị trí .................................................................................67
Hình 3.25 Màn hình chọn thời gian ..........................................................................68
Hình 3.26 Màn hình chọn phương thức thanh tốn ..................................................70
Hình 3.27 Màn hình xem lại thơng tin đặt chỗ .........................................................71
Hình 3.28 Màn hình chi tiết vé đặt ............................................................................72
Hình 3.29 Màn hình lịch sử đặt .................................................................................73
Hình 3.30 Màn hình cá nhân .....................................................................................74
Hình 3.31 Màn hình đổi thơng tin cá nhân ...............................................................76
Hình 3.32 Màn hình danh sách bãi xe u thích .......................................................77
Hình 3.33 Màn hình danh sách xe .............................................................................78
Hình 3.34 Màn hình thêm xe.....................................................................................79
Hình 3.35 Màn hình đổi mật khẩu ............................................................................80
Hình 3.36 Màn hình đăng nhập - doanh nghiệp ........................................................81
Hình 3.37 Màn hình đăng ký - doanh nghiệp ...........................................................82
Hình 3.38 Màn hình danh sách bãi đỗ - doanh nghiệp .............................................83
Hình 3.39 Màn hình dánh sách vé bãi đỗ - doanh nghiệp ........................................85
Hình 3.40 Màn hình chi tiết bãi đỗ - doanh nghiệp .................................................86
Hình 3.41 Màn hình thêm bãi đỗ - doanh nghiệp .....................................................88
Hình 3.42 Màn hình thơng tin – doanh nghiệp ........................................................89
Hình 3.43 Màn hình đổi mật khẩu – doanh nghiệp ...................................................90
Hình 3.44 Màn hình đăng nhập - nhân viên ..............................................................91
Hình 3.45 Màn hình chính - nhân viên .....................................................................92
Hình 3.46 Màn hình scan QR - nhân viên .................................................................93
Hình 3.47 Màn hình xem vé - nhân viên...................................................................94
DANH MỤC BẢNG
Bảng 3.1 Bảng danh sách các actors .........................................................................23
Bảng 3.2 Danh sách các use case ..............................................................................24
Bảng 3.3 Đặc tả Use case Đăng nhập .......................................................................25
Bảng 3.4 Đặc tả Usecase Đăng ký tài khoản ............................................................26
Bảng 3.5 Đặc tả Use case Khôi phục mật khẩu ........................................................27
Bảng 3.6 Đặc tả Use case Cập nhật thông tin ...........................................................28
Bảng 3.7 Đặc tả Use case lưu bãi đỗ xe yêu thích ....................................................29
Bảng 3.8 Đặc tả Use case quản lý danh sách xe .......................................................30
Bảng 3.9 Đặc tả Use case tìm kiếm bãi đỗ................................................................31
Bảng 3.10 Đặc tả Use case chỉ đường bãi đỗ ............................................................32
Bảng 3.11 Đặc tả Use case đặt chỗ ...........................................................................32
Bảng 3.12 Đặc tả Use case Xem lịch sử đặt chỗ.......................................................33
Bảng 3.13 Đặc tả Use case Thêm bãi đỗ...................................................................34
Bảng 3.14 Đặc tả Use case Cập nhật thông tin bãi đỗ ..............................................35
Bảng 3.15 Đặc tả Use case Xóa bãi đỗ\ ....................................................................36
Bảng 3.16 Đặc tả Use case xem và tra cứu thông tin bãi đỗ xe ................................36
Bảng 3.17 Đặc tả Use case Quản lý đặt chỗ .............................................................37
Bảng 3.18 Đặc tả Use case Quét mã QR ...................................................................38
Bảng 3.19 Mô tả chi tiết bảng User...........................................................................50
Bảng 3.20 Mô tả chi tiết bảng ParkingLot ................................................................51
Bảng 3.21 Mô tả chi tiết bảng Block ........................................................................52
Bảng 3.22 Mô tả chi tiết bảng ParkingSlot ...............................................................52
Bảng 3.23 Mô tả chi tiết bảng ParkingReservation ..................................................53
Bảng 3.24 Mô tả chi tiết bảng ParkingSlip ...............................................................53
Bảng 3.25 Mô tả chi tiết bảng Vehicle......................................................................54
Bảng 3.26 Mô tả chi tiết bảng TimeFrame ...............................................................54
Bảng 3.27 Mô tả chi tiết bảng Favorite .....................................................................54
Bảng 3.28 Danh sách các màn hình dành cho chủ xe ...............................................57
Bảng 3.29 Danh sách các màn hình dành cho doanh nghiệp ....................................57
Bảng 3.30 Danh sách các màn hình dành cho nhân viên bãi đỗ ...............................57
Bảng 3.31 Mô tả đối tượng trên màn hình đăng nhập ..............................................61
Bảng 3.32 Biến cố và xử lý trên màn hình đăng nhập ..............................................61
Bảng 3.33 Mơ tả đối tượng trên màn hình đăng ký ..................................................63
Bảng 3.34 Biến cố và xử lý trên màn hình đăng ký ..................................................63
Bảng 3.35 Mơ tả đối tượng trên màn hình chính ......................................................64
Bảng 3.36 Biến cố và xử lý trên màn hình chính ......................................................64
Bảng 3.37 Mơ tả đối tượng trên màn hình chi tiết bãi đỗ .........................................65
Bảng 3.38 Biến cố và xử lý trên màn hình chi tiết bãi đỗ .........................................65
Bảng 3.39 Mơ tả đối tượng trên màn hình chọn xe ..................................................66
Bảng 3.40 Biến cố và xử lý trên màn hình chọn xe ..................................................67
Bảng 3.41 Mơ tả đối tượng trên màn hình chọn vị trí...............................................67
Bảng 3.42 Biến cố và xử lý trên màn hình chọn vị trí ..............................................68
Bảng 3.43 Mơ tả đối tượng trên màn hình chọn thời gian ........................................69
Bảng 3.44 Biến cố và xử lý trên màn hình chọn thời gian........................................69
Bảng 3.45 Mơ tả đối tượng trên màn hình phương thức thanh toán .........................70
Bảng 3.46 Biến cố và xử lý trên màn hình phương thức thanh tốn ........................70
Bảng 3.47 Mơ tả đối tượng trên màn hình xem lại thơng tin đặt chỗ .......................71
Bảng 3.48 Biến cố và xử lý trên màn hình xem lại thơng tin đặt chỗ.......................72
Bảng 3.49 Mơ tả đối tượng trên màn hình chi tiết vé đặt .........................................72
Bảng 3.50 Biến cố và xử lý trên màn hình chi tiết vé đặt .........................................73
Bảng 3.51 Mô tả đối tượng trên màn hình lịch sử đặt ..............................................73
Bảng 3.52 Biến cố và xử lý trên màn hình lịch sử đặt ..............................................74
Bảng 3.53 Mơ tả đối tượng trên màn hình cá nhân ...................................................75
Bảng 3.54 Biến cố và xử lý trên màn hình cá nhân ..................................................75
Bảng 3.55 Mơ tả đối tượng trên màn hình đổi thông tin cá nhân .............................76
Bảng 3.56 Biến cố và xử lý trên màn hình đổi thơng tin cá nhân .............................77
Bảng 3.57 Mơ tả đối tượng trên màn hình danh sách bãi xe yêu thích .....................77
Bảng 3.58 Biến cố và xử lý trên màn hình danh sách bãi xe u thích ....................78
Bảng 3.59 Mơ tả đối tượng trên màn hình danh sách xe ..........................................78
Bảng 3.60 Biến cố và xử lý trên màn hình danh sách xe ..........................................79
Bảng 3.61 Mơ tả đối tượng trên màn hình thêm xe ..................................................80
Bảng 3.62 Biến cố và xử lý trên màn hình thêm xe ..................................................80
Bảng 3.63 Mơ tả đối tượng trên màn hình đổi mật khẩu ..........................................81
Bảng 3.64 Biến cố và xử lý trên màn hình đổi mật khẩu ..........................................81
Bảng 3.65 Mơ tả đối tượng trên màn hình đăng nhập - doanh nghiệp .....................82
Bảng 3.66 Biến cố và xử lý trên màn hình đăng nhập - doanh nghiệp .....................82
Bảng 3.67 Mơ tả đối tượng trên màn hình đăng ký – doanh nghiệp ........................83
Bảng 3.68 Biến cố và xử lý trên màn hình đăng ký – doanh nghiệp ........................83
Bảng 3.69 Mơ tả đối tượng trên màn hình danh sách bãi đỗ - doanh nghiệp ...........84
Bảng 3.70 Biến cố và xử lý trên màn hình dánh sách bãi đỗ - doanh nghiệp ...........84
Bảng 3.71 Mơ tả đối tượng trên màn hình danh sách vé bãi đỗ - doanh nghiệp ......85
Bảng 3.72 Biến cố và xử lý trên màn hình danh sách vé bãi đỗ - doanh nghiệp ......85
Bảng 3.73 Mô tả đối tượng trên màn hình chi tiết bãi đỗ - doanh nghiệp ................86
Bảng 3.74 Mơ tả đối tượng trên màn hình thêm bãi đỗ - doanh nghiệp ...................88
Bảng 3.75 Biến cố và xử lý trên màn hình thêm bãi đỗ - doanh nghiệp...................88
Bảng 3.76 Mơ tả đối tượng trên màn hình thông tin – doanh nghiệp .......................89
Bảng 3.77 Biến cố và xử lý trên màn hình thơng tin – doanh nghiệp ......................89
Bảng 3.78 Mơ tả đối tượng trên màn hình đổi mật khẩu – doanh nghiệp ................90
Bảng 3.79 Biến cố và xử lý trên màn hình đổi mật khẩu - doanh nghiệp.................90
Bảng 3.80 Mơ tả đối tượng trên màn hình đăng nhập – nhân viên ...........................91
Bảng 3.81 Biến cố và xử lý trên màn hình đăng nhập – nhân viên ..........................92
Bảng 3.82 Mơ tả đối tượng trên màn hình chính – nhân viên ..................................92
Bảng 3.83 Biến cố và xử lý trên màn hình chính – nhân viên ..................................93
Bảng 3.84 Mơ tả đối tượng trên màn hình xem vé – nhân viên ................................94
Bảng 3.85 Biến cố và xử lý trên màn hình xem vé – nhân viên ..............................94
DANH MỤC TỪ VIẾT TẮT
STT
Tên
Diễn giải
1
BM
Biểu mẫu
2
QĐ
Quy định
3
STT
Số thứ tự
4
PK
Primary key
5
FK
Foreign key
6
ORM
Object relational mapping
7
ERD
Entity relationship diagram
8
DOM
Document Object Model
9
UI
User interface
10
UX
User experience
CHƯƠNG 1.
1.1.
TỔNG QUAN
Khảo sát hiện trạng
1.1.1. Nhu cầu thực tế đề tài
Hiện nay, q trình đơ thị hóa, hiện đại hóa diễn ra dẫn đến việc sử dụng các phương
tiện cá nhân tăng cao. Từ đó nhu cầu về tìm kiếm bãi đỗ xe khi đi ra ngoài là điều cần
thiết của mọi người. Các thành phố lớn phát triển hạ tầng chưa đồng đều, chưa xem
trong hạ tầng bãi đỗ. Từ đó, ta thấy cơ sở hạ tầng và nhu cầu khơng thỏa mãn, dẫn
đến việc khó khăn khi tìm kiếm bãi đỗ xe. Do đó, nhóm quyết định xây dựng phần
mềm Tìm kiếm bãi đỗ xe
1.1.2. Khảo sát một số ứng dụng hiện có
1.1.2.1.
Parking Map - Bản đồ Offline bãi đỗ xe
1. Tổng quan
Parking Map là một bản đồ về vị trí các bãi đỗ xe Ơ tơ tại địa bàn Thành phố Hồ
Chí Minh và Thủ đơ Hà Nội. Đặc biệt Parking Map có thể sử dung Offline mà
không cần kết nối internet. Parking Map khởi động nhanh và gọn nhẹ rất thích hợp
để các lái xe sử dụng để tra cứu bãi đỗ xe xung quanh khi cần thiết một cách nhanh
chóng nhất.
2. Chức năng chính
Xem bản đồ về vị trí các bãi đỗ xe
1
1.1.2.2.
My Parking
1. Tổng quan
My Parking là dịch vụ được Viettel phát triển nhằm mục đích cung cấp cho người
dùng thơng tin về hiện trạng của các bãi đỗ xe theo thời gian thực; đồng thời cho
phép người dùng dễ dàng đặt chỗ và thanh tốn phí đỗ xe cho bãi đỗ xe mong
muốn.
a. Chức năng chính
-
Cung cấp thơng tin thời gian thực về hiện trạng các bãi đỗ xe.
-
Cho phép người dùng dễ dàng tìm kiếm và thực hiện đặt chỗ.
-
Hỗ trợ thanh toán với nhiều phương thức như Viettel Pay, SMS.
-
Giúp người dùng dễ dàng xem lịch sử đặt chỗ.
-
Tìm đường đi ngắn nhất đến bãi đỗ mong muốn một cách dễ dàng.
2
1.2.
-
Mục tiêu
Giúp chủ xe dễ dàng tìm kiếm và đặt chỗ giữ xe nhanh nhất, thuận tiện
nhất.
-
Chủ xe có thể dễ dàng thay đổi các thông tin về xe, cá nhân.
-
Chủ xe có thể theo dõi được lịch sử đặt chỗ cũng như những chỗ đã được
đặt trước.
-
Chủ bãi đỗ xe dễ dàng kiểm sốt được tình trạng đặt chỗ của bãi đỗ xe.
-
Giúp chủ bãi đỗ xe quản lý các bãi đỗ xe một cách thuận tiện nhất.
1.2.1. Đối tượng sử dụng
- Chủ xe
- Chủ bãi đỗ xe
- Nhân viên bãi đỗ
3
1.2.2. Yêu cầu
1.2.2.1.
Yêu cầu chức năng
• Đối với chủ xe
o Quản lý tài khoản (đăng nhập, đăng ký, xác thực số điện thoại bằng
OTP, khôi phục mật khẩu, đổi mật khẩu)
o Tìm kiếm bãi đỗ xe.
o Chỉ đường đi đến bãi đỗ
o Đặt chỗ
o Quản lý danh sách xe
o Kiểm tra lịch sử đặt chỗ.
o Thêm bãi đỗ xe yêu thích
• Đối với chủ bãi đỗ
o Quản lý bãi đỗ xe
o Quản lý đặt chỗ
o Quản lý tài khoản (đăng nhập, đăng ký, đổi mật khẩu, khơi phục mật
khẩu).
• Đối với nhân viên bãi đỗ
o Quét mã QR kiểm tra thơng tin
o Kiểm tra lịch sử đặt xe.
1.2.2.2.
•
u cầu phi chức năng
Yêu cầu về giao diện:
-
Giao diện thân thiện, bố cục hợp lý, dễ sử dụng.
-
Giao diện thống nhất, đồng bộ, khơng gây bất ngờ cho người
sử dụng.
•
Màu sắc, vị trí, hiển thị của các component có tính đồng bộ.
u cầu về độ tin cậy, bảo mật:
-
Có sử dụng phân quyền cho từng loại người dùng.
4
•
-
Dữ liệu tài khoản người dùng được bảo mật.
-
Dữ liệu khơng bị xóa hồn tồn, có thể khơi phục lại.
u cầu về độ tương thích:
o Đối với web
-
IE11 / Edge
-
Firefox: 2 version gần nhất
-
Chrome: 2 version gần nhất
-
Safari: 2 version gần nhất
-
Opera: 2 version gần nhất
-
Electron: 2 version gần nhất
o Đối với Mobile
•
Tương thích cả trên IOS và Android
u cầu về khả năng phát triển:
-
Dễ dàng nâng cấp tính năng đã có nhờ vào sự hệ thống hóa
trong khâu xử lý.
•
Dễ dàng mở rộng khi có nhu cầu phát triển.
u cầu về tính hiệu quả:
-
Hệ thống quản lý dữ liệu một cách logic.
-
Hiệu năng ổn định tránh gây khó chịu cho người dùng.
5
CHƯƠNG 2.
2.1.
CƠ SỞ LÝ THUYẾT, TỔNG QUAN CƠNG NGHỆ
Thuật tốn sử dụng
2.1.1. Thuật tốn Bcrypt
Để mật khẩu được an tồn ngay cả khi cơ sở dữ liệu của hệ thống bị rò rỉ, chúng ta
cần băm mật khẩu trước khi sử dụng. Vì tính chất của hàm băm là cùng 1 đầu vào thì
kết quả sẽ ln cho ra 1 giá trị khơng đổi, việc sử dụng các thuật tốn băm thông
thường dễ bị kẻ tấn công suy ra bằng các phương pháp như Dictionary Attack,
Rainbrow Table Attack, …
Bcrypt là một thuật toán mã hoá mật khẩu đã được tạo ra bởi Niels Provos và David
Mazières vào năm 1999, nó hoạt động dựa trên các thuật tốn mã hóa Blowfish. Nhằm
tạo ra sự khó khăn, giảm tốc độ khi giải mã để tìm ra mật khẩu của các cuộc tấn cơng,
Bcrypt sẽ tạo ra các chuỗi mã hố ngẫu nhiên sau mỗi lần tạo ra.
Bcrypt là sự kết hợp của cơ chế băm, yếu tố salt và stretching, cụ thể như sau:
Cơ chế băm:
-
Giá trị băm không thể dịch ngược lại giá trị ban đầu.
-
Với cùng giá trị đầu vào, hàm băm luôn cho 1 kết quả đầu ra.
-
Đầu vào khác nhau sẽ cho các giá trị đầu ra khác nhau.
Yếu tố salt: Giá trị đầu vào được thêm bởi 1 chuỗi ngẫu nhiên, giúp giảm bớt khả
năng kẻ tấn cơng có dữ liệu được tính tốn từ trước hoặc tốn nhiều thời gian để tìm
ra hơn.
Stretching: Các máy tính hiện nay có tốc độ xử lý rất nhanh, vì thế cơ chế này sẽ giúp
làm chậm quá trình băm dữ liệu hay còn gọi là tăng tải, khiến kẻ tấn cơng tốn nhiều
thời gian để có được dữ liệu băm.
6
Hình 2.1 Tốc độ băm của 1 số thuật toán phổ biến1
Bcrypt được chạy trên 2 pha:
-
Pha 1: Hàm EksBlowfishSetup được gọi để chuẩn bị cho quá trình băm với chi
phí mong muốn, salt và mật khẩu dùng cho khởi tạo trạng thái của eksblowfish.
Trong trường hợp mật khẩu không đủ tốt hoặc quá ngắn, nó sẽ được xử lý và
tạo ra mật khẩu có độ dài lớn hơn. Mục đích chính của bước này là tăng cường
sức mạnh của key để làm chậm tốc độ tính tốn từ đó giảm tốc độ của kẻ tấn
công.
Hình 2.2 Mã giải thuật toán băm Bcrypt2
-
Pha 2: Giá trị 192 bits OrpheanBeholderScryDoubt được mã hoá 64 lần sử
dụng eksblowfish với chế độ ECB3. Đầu ra của pha này là giá trị cost và 128
bits salt được ghéo với kết quả vòng lặp mã hoá.
1
Nguồn: />Nguồn:
3
ECB là viết tắt của: Block cipher mode of operation
2
7
Hình 2.3 Kết qủa cuối cùng của quá trình băm4
2.2.
Công nghệ sử dụng
2.2.1. React
Hình 2-4 Logo thư viện React5
ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản
thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các
thành phần trên website. Một trong những điểm nổi bật nhất của ReactJS đó là việc
render dữ liệu khơng chỉ thực hiện được trên tầng Server mà còn ở dưới Client.
Một trong những điểm hấp dẫn của React là thư viện này khơng chỉ hoạt động trên
phía client, mà cịn được render trên server và có thể kết nối với nhau. React so sánh
sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít
4
5
Nguồn:
Nguồn />
8
thay đổi nhất trên DOM. Trước khi đến cài đặt và cấu hình, chúng ta sẽ đi đến một
số khái niệm cơ bản:
-
Virtual DOM:
công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng. Việc chỉ node gốc mới có
trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM
tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý. React
JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.Virtual DOM là một
object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM,
khi dữ liệu thay đổi nó sẽ tính tốn sự thay đổi giữa object và tree thật, điều này sẽ
giúp tối ưu hoá việc re-render DOM tree thật. React sử dụng cơ chế one-way data
binding – luồng dữ liệu 1 chiều. Dữ liệu được truyền từ parent đến child thông qua
props. Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi.
Với các đặc điểm ở trên, React dùng để xây dựng các ứng dụng lớn mà dữ liệu của
chúng thay đổi liên tục theo thời gian. Dữ liệu thay đổi thì hầu hết kèm theo sự thay
đổi về giao diện. Ví dụ như Facebook: trên Newsfeed của bạn cùng lúc sẽ có các
status khác nhau và mỗi status lại có số like, share, comment liên tục thay đổi. Khi
đó React sẽ rất hữu ích để sử dụng.
-
Giới thiệu về JSX:
JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. Đặc điểm:
Faster: Nhanh hơn. JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript.
Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương
viết trực tiếp bằng Javascript. Safer: an toàn hơn. Ngược với Javascript, JSX là kiểu
statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++. Vì
thế các lỗi sẽ được phát hiện ngay trong q trình biên dịch. Ngồi ra, nó cũng cung
cấp tính năng gỡ lỗi khi biên dịch rất tốt. Easier: Dễ dàng hơn. JSX kế thừa dựa trên
Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng
(tham khảo tại />
9
-
Giới thiệu về Components:
React được xây dựng xung quanh các component, chứ không dùng template như
các framework khác. Trong React, chúng ta xây dựng trang web sử dụng những
thành phần (component) nhỏ. Chúng ta có thể tái sử dụng một component ở nhiều
nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có
thể chứa thành phần khác. Mỗi component trong React có một trạng thái riêng, có
thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của
trạng thái. Mọi thứ React đều là component. Chúng giúp bảo trì mã code khi làm
việc với các dự án lớn. Một react component đơn giản chỉ cần một method render.
Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo.
-
Props và State:
Props: giúp các component tương tác với nhau, component nhận input gọi là props,
và trả thuộc tính mơ tả những gì component con sẽ render. Prop là bất biến. State:
thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render
lại để cập nhật UI.
2.2.2. React Redux
Hình 2-5 Logo thư viện React Redux6
Redux là một predictable state management tool cho các ứng dụng Javascript. Nó
giúp bạn viết các ứng dụng hoạt động một cách nhất quán, chạy trong các môi
trường khác nhau (client, server, and native) và dễ dàng để test. Redux ra đời lấy
cảm hứng từ tư tưởng của ngôn ngữ Elm và kiến trúc Flux của Facebook. Do vậy
Redux thường dùng kết hợp với React.
6
Nguồn: />
10
Các thành phần trong Redux:
-
Actions đơn giản là các events. Chúng là cách mà chúng ta send data từ app
đến Redux store. Những data này có thể là từ sự tương tác của user vs app,
API calls hoặc cũng có thể là từ form submission.
-
Reducers là các function nguyên thủy chúng lấy state hiện tại của app, thực
hiện một action và trả về một state mới. Những states này được lưu như
những objects và chúng định rõ cách state của một ứng dụng thay đổi trong
việc phản hồi một action được gửi đến store.
-
Store lưu trạng thái ứng dụng và nó là duy nhất trong bất kỳ một ứng dụng
Redux nào. Bạn có thể access các state được lưu, update state, và đăng ký or
hủy đăng ký các listeners thông qua helper methods.
Hình 2.6 Các thành phần của Redux7
7
Nguồn:
11
