III. Chương 3: Phân tích và thiết kế hệ thống
3. Sơ đồ liên kết màn hình (Site map)
38
4. Sơ đồ hoạt động
Sơ đồ hoạt động đăng nhập
39
Sơ đồ hoạt động thêm sản phẩm vào giỏ hàng
40
Sơ đồ hoạt động xem sản phẩm
41
42
43
44
Sơ đồ hoạt động xem/ sửa danh sách sản phẩm
45
Sơ đồ hoạt động xem/ xóa tài khoản
5. Cơ sở dữ liệu
• Thiết kế cơ sở dữ liệu:
• Danh sách các collections: STT Tên collections dữ
liệu
Mô tả
1 users Danh sách tài khoản người dùng và tài khoản admin 2 voucher Danh sách các voucher khuyến mãi
3 receipts Danh sách các hóa đơn / đơn hàng 4 news Danh sách các bài đăng tin tức/ blogs 5 products Danh sách các sản phẩm của shop
6 banners Danh sách các hình ảnh, banner trong các trang
7 emailtokens Lưu trữ token hỗ trợ cho việc verify email của tài khoản
46
STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 email String Bắt buộc, duy
nhất
Email người dùng
2 name String Bắt buộc Họ và tên
3 password String Bắt buộc Mật khẩu người dùng
5 phone String Bắt buộc Số điện thoại người dùng 6 gender Number Bắt buộc Giới tính, 1: Nam, 2: Nữ, 3:
Khác
7 role String Bắt buộc Vai trò của người dùng, ‘user’ và ‘admin’
8 emailVerified Boolean Đã xác nhận email hay chưa
9 address Array Danh sách địa chỉ giao hàng của
người dùng, là mảng object với các trường là: district, province, ward, description, name, phone
10 avatar String Đường dẫn lưu trữ ảnh giao diện
của người dùng
11 birthday Date Ngày sinh của người dùng
12 cart Array Là giỏ hàng, chứa mảng các
object gồm 2 thuộc tính là product và quantity
13 receipts Array Mảng lưu trữ id của các hóa đơn
b. Chi tiết collections vouchers
STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 name String Bắt buộc Tên của voucher
2 avtURL String Ảnh đại diện của voucher
47
5 description String Mô tả cho voucher
6 amount Number Bắt buộc Số lượng tính cho khuyến mãi 7 type Number Bắt buộc Loại khuyến mãi, 1: số tiền, 2:
phần trăm
8 limit Number Số tiền khuyến mãi tối đa
9 receipt Array Danh sách id của các đơn hàng
đã áp mã
10 isEnable Boolean Bắt buộc Trạng thái đang kích hoạt hay không
11 quantity Number Bắt buộc Số lượt sử dụng còn lại
12 exp Date Ngày hết hạn khuyến mãi
13 isPublics Boolean Bắt buộc Khuyến mãi có hiển thị trên trang thông báo khuyến mãi hay
không
14 condition Object Điều kiện được áp dụng khuyến
mãi:
c. Chi tiết collections receipts
STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 receiver String Id của người tạo đơn hàng, nếu
đơn hàng được tạo bởi người chưa đăng nhập sẽ để trống
2 receiver Object Thông tin nhận hàng: name,
phone, province, district, ward, description, note
3 profit Number Bắt buộc Lợi nhuận của đơn hàng
5 voucher String Id của voucher áp dụng cho đơn
48
6 cart Array Bắt buộc Mảng chứa object các sản phẩm đã mua
7 totalPrice Number Bắt buộc Tổng doanh thu của đơn hàng
8 status Number Trạng thái đơn hàng: 0: bị hủy,
1: chờ xác nhận, 2: đã xác nhận, 3: đang giao. 4: đã nhận hàng, 6:
boom hàng
9 payMethod Number Phương thức thanh toán: 1: tiền
mặt, 2: Momo, 3: thẻ.ngân hàng
10 shippingUnit String Đơn vị vận chuyển
11 shippingCode String Mã vận đơn
14 condition Object Điều kiện được áp dụng khuyến
mãi:
d. Chi tiết bản news
STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 avtUrl String Bắt buộc Thumbnail của tin
2 title String Bắt buộc Tiêu đề của tin
3 description String Bắt buộc Đoạn mô tả ngắn của bản tin
5 views Number Bắt buộc Số lượt xem tin
6 content String Bắt buộc Mã HTML cho nội dung của bài viết
e. Chi tiết collection products
STT Tên trường Kiểu dữ liệu Ràng buộc Ý nghĩa
1 name String Tên sản phẩm
2 sku String Mã SKU của sản phẩm
49
5 avtURL String Đường dẫn ảnh hiển thị của sản
phẩm
6 imgURLs Array Bắt buộc Mảng chứa các đường dẫn của ảnh sản phẩm
7 quantity Number Bắt buộc Số lượng còn lại
8 importPrice Number Giá nhập sản phẩm
9 originPrice Number Giá bán nguyên bản
10 price Number Giá bán thực tế
11 temperature Object Nhiệt độ tối đa và tối thiểu cho việc sử dụng sản phẩm rượu, minimum: tối thiểu, maximum:
tối đa
14 color String Màu sắc sản phẩm rượu, gồm
red, pink và white
15 foods String Danh sách tên các món ăn
origin String Xuất xứ( Quốc gia)
producer String Nhà sản xuất
concentrationP ercent
Number Nồng độ cồn ( %)
capacity Number Dung tích (ml)
vintage Number Năm sản xuất
sugar Number Hàm lượng đường (%)
experation Date Hạn sử dụng
productType String Loại sản phẩm: “wine”,
“combo”, “accessory” isSpecialProdu
ct
Boolean Có là sản phẩm đặc biệt hay
không
50
hasSold Number Đã bán bao nhiêu sản phẩm
isSaleProduct Boolean Có đang sale hay không
6. Kiến trúc hệ thống
Hệ thống được phát triển theo mô hình MVC
a. Các thành phần trong hệ thống
Thành phần chính Diễn giải
Model Chứa resources - lưu trữ toàn bộ dữ liệu của ứng dụng. Bộ phận này là một cầu nối giữa 2 thành phần bên dưới là
View và Controller
View Chứa view (giao diện) - Đây là phần giao diện (theme) dành cho người sử dụng. Nơi mà người dùng có thể lấy được thông tin dữ liệu của MVC thông qua các thao tác
truy vấn như tìm kiếm hoặc sử dụng thông qua các website.
51
Controller Bộ phận có nhiệm vụ xử lý các yêu cầu người dùng đưa đến thông qua view. Từ đó, C đưa ra dữ liệu phù hợp với người dùng. Bên cạnh đó, Controller còn có chức năng kết
nối với model.
b. Mô tả chi tiết các thành phần
STT Thành phần Diễn giải
1 Browser Trình duyệt phía người dùng
2 Web Server Khi người dùng gõ vào trình duyệt, thì nó sẽ request lên Web Server với HTTP protocol.
3 Routes Nó map request đến vào Controller Action và tạo ra URL đầu ra tương ứng với Controller action
4 Dispatcher Nơi đầu tiên nhận request từ client sau đó sẽ chuyển request đó tới các controller tương ứng, đồng thời sẽ là chốt chặn cuối cùng trả về kết quả cho client.
5 View Đây là phần giao diện (theme) dành cho người sử dụng. Nơi mà người dùng có thể lấy được thông tin dữ liệu của MVC thông qua các thao tác truy vấn như tìm kiếm hoặc sử dụng thông qua các website.
6 Model Chứa resources - lưu trữ toàn bộ dữ liệu của ứng dụng. Bộ phận này là một cầu nối giữa 2 thành phần bên dưới là View và Controller
52
53
7. Giao diện
54 7.2Giao diện trang danh sách rượu:
55
56 7.4Giao diện trang phụ kiện
57 7.5Giao diện trang khuyến mãi
58 7.6Giao diện trang tin tức
59 7.7Giao diện trang chi tiết tin tức
60 7.8Giao diện trang chi tiết sản phẩm
61 7.9Giao diện trang giỏ hàng
62 7.10 Giao diện trang thanh toán
63 7.11 Giao diện trang đăng nhập
64 7.12 Giao diện trang cá nhân
65 7.13 Giao diện chi tiết đơn hàng (user)
66 7.14 Giao diện tìm kiếm
67 7.15 Giao diện tra cứu đơn hàng
68 7.16 Giao diện quản lý sản phẩm
69 7.17 Giao diện chi tiết sản phẩm
70 7.18 Giao diện thêm, chỉnh sửa sản phẩm
71 7.20 Giao diện chi tiết hóa đơn
72
7.22 Giao diện chỉnh sửa giỏ hàng (Bước 1)
73
7.24 Giao diện chỉnh sửa trạng thái đơn hàng
74 7.26 Giao diện tạo đơn hàng ( Bước 2)
75 7.27 Giao diện tạo đơn hàng (Bước 3)
76 7.29 Giao diện quản lý voucher
77 7.30 Giao diện chi tiết voucher
78 7.31 Giao diện sửa, xóa voucher
79 7.32 Giao diện quản lý bài viết
80 7.33 Giao diện thêm, chỉnh sửa bài viết
81 7.2 Giao diện chi tiết banner
82 7.3 Giao diện quản lý người dùng
83 7.5 Giao diện Dashboard
84 7.6 Giao diện chọn khoảng thời gian
7.7 Giao diện tùy chỉnh khoảng thời gian
Link ảnh drive:
https://drive.google.com/drive/folders/1GN9bynCk6oyQz1AnmAd0FItJ9Oj23FBo
IV. Chương 4: Tổng kết
1. Kết quả đạt được
Thông qua đồ án này, nhóm đã hoàn toàn vận dụng được ReactJS trong việc xây dựng ứng dụng web cũng như tận dụng được Redux-thunk cho State Management để tối ưu hiệu suất ứng dụng. Bên cạnh đó, thông qua NodeJS và
85
ReactJS, nhóm cũng đã có thể làm việc với MongoDb và Firebase storage để quản lý dữ liệu của ứng dụng.
Nhóm không chỉ tích lũy được những kiến thức và kinh nghiệm về ReactJS mà còn có thêm nhiều kinh nghiệm về nghiệp vụ khi thực hiện nghiên cứu cho ứng dụng này. Từ đó, nhóm đã đủ tự tin để tiếp tục phát triển các dự án khác bằng công nghệ như trên, đặc biệt là ReactJS
Source code của đồ án được nhóm quản lý ở 2 đường dẫn github sau: - https://github.com/hacThe/LuxyWine-FE
- https://github.com/hacThe/LuxyWine-BE
2. Hạn chế
- Một số quy trình nghiệp vụ trong khâu quản lý còn chưa được hoàn thiện - Giao diện chưa thực sự tối ưu cho nhiều thiết bị, responsive chỉ mang tính
tương đối
- Chưa test kĩ các tính năng
3. Hướng phát triển
- Hoàn thành đầy đủ, chi tiết các vấn đề nghiệp vụ trọng tâm - Chỉnh sửa giao diện responsive hoàn hảo cho tất cả các thiết bị
- Thực hiện các nghiệp vụ Digital Maketting, tối ưu hóa các công cụ tìm kiếm cho trang web.
4. Cách cài đặt
4.1Đối với người sử dụng:
Giao diện : https://luxy-wine-7ijtn2uzl-hacthe.vercel.app/trang-chu Tài khoản admin: hienthe.473@gmail.com / a11111111
Đường dẫn quản lý:
https://luxy-wine-7ijtn2uzl-hacthe.vercel.app/quan-ly/dashboard
4.2Đối với lập trình viên:
• Front end:
− Clone repository: https://github.com/hacThe/LuxyWine-FE − Tạo thư mục .env với nội dung
86
− PORT=8080
− Cài đặt các thư viện: npm install − Khởi chạy ứng dụng: npm start
• Back end:
− Clone repository: https://github.com/hacThe/LuxyWine-BE − Tạo thư mục .env với nội dung:
− JWT_SECRET=Thisisprivatekey
− PORT=5000
− MONGODB_URI=mongodb+srv://admin:
FbMg02FyxIUfB0HX@luxywine.f1fdn.mongodb.net/myFirstDatabase?retr yWrites=true&w=majority
− Cài đặt các thư viện: npm install − Khởi chạy ứng dụng: npm start
5. Bảng phân công công việc
STT Tên công việc Thành viên
Thế Thành
1 Chuẩn bị, lên kế hoạch x x
2 Khảo sát, đặc tả yêu cầu x x
3 Thiết kế kiến trúc x x
4 Thiết kế dữ liệu x x
5 Thiết kế giao diện x
6 Chức năng người dùng (Front end) x
7 Chức năng quản lý (Front end) x
8 Backend x x
9 Kiểm tra và sửa lỗi x x
10 Viết và tổng hợp báo cáo x x
87
Mức độ hoàn thành 100% 100%
TÀI LIỆU THAM KHẢO