Mai Anh Thơ Nhiệm Vụ Của Luận Văn : Sử dụng Nodejs, ExpressJs để thiết lập các API cho các module trong hệ thống Sử dụng MongoDB để thiết kế lưu trữ dữ liệu Tích hợp Vnpay để giúp người
Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
1 Chương 1 CƠ SỞ LÝ THUYẾT
1.1 Kiến thức thành phần ứng dụng
2 Chương 2 KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU
2.3 Mô hình hóa yêu cầu
3 Chương 4 THIẾT KẾ PHẦN MỀM
4 Chương 4 CÀI ĐẶT, KIỂM THỬ
STT Thời gian Công việc Ghi chú
Họp bàn lên ý tưởng và hướng phát triển Phân tích chọn công nghệ sử dụng Thực hiện khảo sát hiện trạng Lên ý tưởng và thiết kế cơ sở dữ liệu
Tìm hiểu công nghệ Reactjs và Nodejs Thiết giao diện trang người dùng và một số chức năng cơ bản
Thiết kế use case và đặc tả
Tìm hiểu công nghệ Reactjs và Nodejs Thiết kế giao diện cho quản trị viên và một số chức năng cơ bản
Kết nối Front end và back end lại với nhau Debug và sửa lỗi
Thiết kế giao diện và các chức năng phát triển mới trong dự án
Tìm hiểu tích hợp hệ thống Vnpay và chat bot thông qua Dialogflow
Thống nhất thêm và chỉnh sửa dữ liệu sản phẩm Triển khai hoàn thành các chức năng
Chỉnh sửa các mô hình hóa và sơ đồ của đề tài Viết và chỉnh sử báo cáo
Hoàn thiện cuốn báo cáo Kiểm tra các module của hệ thống Thực hiện việc deploy trang web của mình Kiểm tra các tính tính và sửa lỗi
Ngày tháng năm 2024 Ý kiến của giảng viên hướng dẫn
(ký và ghi rõ họ tên)
LỜI CẢM ƠN 5 ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP 6
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 18
4 MỤC TIÊU CỦA ĐỀ TÀI 20
5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 20
CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 21
1.1 Kiến trúc thành phần ứng dụng 21
1.2.2 Một số khái niệm liên quan đến React JS 22
CHƯƠNG 2 KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 38
2.2.2 Yêu cầu phi chức năng 41
2.3 MÔ HÌNH HÓA YÊU CẦU 42
2.3.2 Mô tả sơ đồ Use case 44
CHƯƠNG 3 THIẾT KẾ PHẦN MỀM 70
3.3.1 Giao diện khách và người dùng 94
3.3.2 Giao diện quản trị viên 105
CHƯƠNG 4 CÀI ĐẶT VÀ KIỂM THỬ 115
1.1 Kiến thức tìm hiểu được 136
Hình 1 1 Kiến trúc thành phần ứng dụng 21
Hình 1 2 Component trong React JS 23
Hình 1 3 Cú pháp props trong Class Component và Function Component 24
Hình 1 5 Đoạn code get Axios 26
Hình 1 6 Axios GET lấy thông tin user 27
Hình 1 7 Axios Post tạo sản phẩm 27
Hình 1 8 Axios PUT cập nhật sản phẩm 28
Hình 1 10 Axios PUT xóa sản phẩm 28
Hình 1 12 Cấu trúc thư mục configs 30
Hình 1 13 Cấu trúc thư mục middleware 30
Hình 1 14 Cấu trúc thư mục models 30
Hình 1 15 Cấu trúc thư mục node_modules 31
Hình 1 16 Cấu trúc thư mục routes 31
Hình 1 17 Cấu trúc thư mục utils 31
Hình 1 21 File package-lock.json 32
Hình 1 23 Cấu hình kết nối database 34
Hình 1 25 Dữ liệu được ánh xạ từ ứng dụng vào mongoDB 35
Hình 2 1 Giao diện trang Cellphone S 38
Hình 2 2 Giao diện thế giới di động 39
Hình 2 3 Giao diện trang Fpt 40
Hình 2 4 Use case Người dùng 42
Hình 2 5 Use case Quản trị viên 43
Hình 3 2 Lược đồ tuần tự "Register" 71
Hình 3 3 Lược đồ tuần tự "Logout" 72
Hình 3 4 Lược đồ tuần tự "Login" 72
Hình 3 5 Lược đồ tuần tự "Forgot Password" 73
Hình 3 6 Lược đồ tuần tự "Update Profile" 74
Hình 3 7 Lược đồ tuần tự "Add to wish list" 74
Hình 3 8 Lược đồ tuần tự "Create Order" 75
Hình 3 9 Lược đồ tuần tự Apply Coupon 75
Hình 3 10 Lược đồ tuần tự "Rating" 76
Hình 3 11 Lược đồ tuần tự "Add Product to cart" 76
Hình 3 12 Lược đồ tuần tự "Manage Cart" 77
Hình 3 13 Lược đồ tuần tự "Delete product to cart" 77
Hình 3 14 Lược đồ tuần tự "Update product to cart" 78
Hình 3 15 Lược đồ tuần tự "View product" 78
Hình 3 16 Lược đồ tuần tự "View All Products" 79
Hình 3 17 Lược đồ tuần tự "Manage Product " 79
Hình 3 18 Lược đồ tuần tự "Create Product" 80
Hình 3 19 Lược đồ tuần tự"Update product" 80
Hình 3 20 Lược đồ tuần tự "Delete product" 81
Hình 3 21 Lược đồ tuần tự "Manage Brand" 81
Hình 3 22 Lược đồ tuần tự "Create Brand" 82
Hình 3 23 Lược đồ tuần tự "Update Brand" 82
Hình 3 24 Lược đồ tuần tự "Delete Brand" 83
Hình 3 25 Lược đồ tuần tự "Manage Category" 83
Hình 3 26 Lược đồ tuần tự "Create Category" 84
Hình 3 27 Lược đồ tuần tự "Upadate Category" 84
Hình 3 28 Lược đồ tuần tự "Delete Category" 85
Hình 3 29 Lược đồ tuần tự "Manage Coupon" 85
Hình 3 30 Lược đồ tuần tự "Create Coupon" 86
Hình 3 31 Lược đồ tuần tự "Update Coupon" 86
Hình 3 32 Lược đồ tuần tự "Delete Coupon" 87
Hình 3 33 Lược đồ tuần tự "Manage User" 87
Hình 3 34 Lược đồ tuần tự "Update user information and status" 88
Hình 3 35 Lược đồ tuần tự "Manage enquiry" 88
Hình 3 36 Lược đồ tuần tự "Update Enquiry" 89
Hình 3 37 Lược đồ tuần tự "Delete Enquiry" 89
Hình 3 38 Lược đồ tuần tự "Update Order Status" 90
Hình 3 39 Lược đồ tuần tự "Manage Color" 90
Hình 3 40 Lược đồ tuần tự "Create Color" 91
Hình 3 41 Lược đồ tuần tự "Update Color" 91
Hình 3 42 Lược đồ tuần tự "Delete Color" 92
Hình 3 43 Lược đồ tuần tự "Manage Blogs" 92
Hình 3 44 Lược đồ tuần tự "Create Blog" 92
Hình 3 45 Lược đồ tuần tự "Update Blog" 93
Hình 3 46 Lược đồ tuần tự "Delete Blog" 93
Hình 3 47 Giao diện trang chủ (1) 94
Hình 3 48 Giao diện trang chủ (2) 95
Hình 3 49 Giao diện trang đăng nhập 96
Hình 3 50 Giao diện trang đăng ký 97
Hình 3 51 Giao diện trang Our store 98
Hình 3 52 Giao diện trang Giỏ hàng 99
Hình 3 53 Giao diện trang Thanh toán 99
Hình 3 54 Giao diện danh sách mã giảm giá 101
Hình 3 55 Giao diện trang “Đơn hàng của tôi” 101
Hình 3 56 Giao diện trang Contact Us 102
Hình 3 57 Giao diện trang chi tiết sản phẩm 103
Hình 3 58 Giao diện trang đăng nhập admin 105
Hình 3 59 Giao diện trang thống kê 105
Hình 3 60 Giao diện thanh bên admin 106
Hình 3 61 Giao diện trang quản lý người dùng 108
Hình 3 62 Giao diện cửa sổ chỉnh sửa thông tin 108
Hình 3 63 Giao diện trang thêm sản phẩm 109
Hình 3 64 Giao diện trang quản lý sản phẩm 110
Hình 3 65 Giao diện chỉnh sửa sản phẩm 111
Hình 3 66 Giao diện trang quản lý đơn hàng 112
Hình 3 67 Giao diện trang chi tiết đơn hàng 112
Hình 3 68 Giao diện trang quản lý phản hồi người dùng 113
Hình 3 69 Giao diện chat với người dùng 113
Bảng 1 1 Cấu trúc phần Backend 32
Bảng 2 1 Mô tả sơ đồ Use case 47
Bảng 2 5 Use case Forgot Password (UC_04) 51
Bảng 2 6 Use case Manage Profile 51
Bảng 2 7 Use case Compare products 52
Bảng 2 9 Use case Add To Wish List 54
Bảng 2 10 Use case Create Order 55
Bảng 2 11 Use case Apply Coupon 55
Bảng 2 13 Use case Send Enquiry 57
Bảng 2 14 Use case Product Add To Cart 57
Bảng 2 15 Use case Get Cart 58
Bảng 2 16 Use case View Product 59
Bảng 2 17 Use case View All Products 59
Bảng 2 18 Use case Manage Product 60
Bảng 2 19 Use case Create Product 60
Bảng 2 20 Use case Update Product 61
Bảng 2 21 Use case Delete Product 61
Bảng 2 22 Use case Manage Brand 62
Bảng 2 23 Use case Create Brand 62
Bảng 2 24 Use case Update Brand 63
Bảng 2 25 Use case Delete Brand 64
Bảng 2 26 Use case Manage Category 64
Bảng 2 27 Use case Create Category 65
Bảng 2 28 Use case Update Category 65
Bảng 2 29 Use case Delete Category 66
Bảng 2 30 Use case Manage User 66
Bảng 2 31 Use case Update User 67
Bảng 2 32 Use case Block User 68
Bảng 2 33 Use case Update Order Status 68
Bảng 2 34 Use case View Statistics 69
Bảng 3 1 Bảng chi tiết màn hình trang chủ 96
Bảng 3 2 Bảng chi tiết màn hình trang đăng nhập 97
Bảng 3 3 Bảng chi tiết màn hình trang đăng ký 98
Bảng 3 4 Bảng chi tiết màn hình trang Our Store 98
Bảng 3 5 Bảng chi tiết màn hình trang Giỏ hàng 99
Bảng 3 6 Bảng chi tiết màn hình trang Thanh toán 100
Bảng 3 7 Bảng chi tiết màn hình danh sách mã giảm giá 101
Bảng 3 8 Bảng chi tiết màn hình trang Đơn hàng của tôi 102
Bảng 3 9 Bảng chi tiết trang Contact Us 102
Bảng 3 10 Bảng chi tiết trang Chi tiết sản phẩm 104
Bảng 3 11 Bảng chi tiết trang Đăng nhập Admin 105
Bảng 3 12 Bảng chi tiết trang Thống kê 106
Bảng 3 13 Bảng chi tiết thanh bên 107
Bảng 3 14 Bảng chi tiết trang quản lý người dùng 108
Bảng 3 15 Bảng chi tiết cửa sổ chỉnh sửa thông tin 109
Bảng 3 16 Bảng chi tiết trang thêm sản phẩm 110
Bảng 3 17 Bảng chi tiết trang quản lý sản phẩm 110
Bảng 3 18 Giao diện trang chỉnh sửa sản phẩm 111
Bảng 3 19 Bảng chi tiết trang quản lý đơn hàng 112
Bảng 3 20 Bảng chi tiết trang chi tiết đơn hàng 113
Bảng 3 21 Bảng chi tiết trang quản lý phản hồi 113
Bảng 3 22 Bảng chi tiết trang chat với người dùng 114
Bảng 4 3 Testcase Quên mật khẩu 119
Bảng 4 4 Testcase tìm kiếm sản phẩm 119
Bảng 4 5 Testcase thêm sản phẩm vào giỏ hàng 120
Bảng 4 6 Testcase chức năng đánh giá sản phẩm 120
Bảng 4 7 Testcase thêm sản phẩm yêu thích 121
Bảng 4 8 Testcase Xem lịch sử các đơn hàng đã đặt 121
Bảng 4 9 Testcase Cập nhập thông tin cá nhân 122
Bảng 4 10 Testcase Trang hiển thị sản phẩm 122
Bảng 4 11 Testcase Trang hiển thị các blogs 122
Bảng 4 12 Testcase Trang thu nhập ý kiến của người dùng 123
Bảng 4 13 Testcase chức năng đặt hàng 124
Bảng 4 14 Testcase chức năng so sánh sản phẩm 124
Bảng 4 15 Testcase chức năng áp dụng mã giảm giá 125
Bảng 4 16 Testcase quản lý thông tin sản phẩm 128
Bảng 4 17 Testcase quản lí thông tin người dùng 129
Bảng 4 18 Testcase quản lý các brands 130
Bảng 4 19 Testcase quản lý category 131
Bảng 4 20 Testcase quản lý đơn hàng 132
Bảng 4 21 Testcase quản lý mã giảm giá 133
Bảng 4 22 Testcase quản lý Blogs 135
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Trong thời đại hiện nay, cuộc cách mạng công nghiệp 4.0 đang phát triển mạnh mẽ, và công nghệ thông tin ngày càng phục vụ nhu cầu của con người trong mọi lĩnh vực của đời sống và xã hội Các công việc trước đây phải làm trên giấy tờ dần dần được thay thế bởi các phần mềm và các website, giúp việc sử dụng dễ dàng hơn cho người dùng và quản lý thuận tiện hơn Với sự phát triển của Internet, người dùng có thể truy cập vào website để thực hiện các công việc khác nhau mọi lúc, mọi nơi mà không cần phải đến tận nơi để đăng ký, giao dịch, hoặc mua hàng Việc tạo ra một website để phục vụ và đáp ứng nhu cầu của con người trở nên vô cùng cần thiết, giúp nhanh chóng, thuận tiện và dễ dàng hơn, đồng thời tiết kiệm thời gian và công sức trong thời đại công nghệ số Ngoài ra, sự kiện bùng nổ trí tuệ nhân tạo (AI) và ứng dụng rộng rãi của nó trong cuộc sống hàng ngày đã làm cho Công nghệ 4.0 phát triển một cách vượt bậc AI đã giúp chúng ta tiếp cận thông tin thông qua Internet nhanh chóng và hiệu quả hơn nhiều so với cách tiếp cận truyền thống Ngày nay, chỉ cần ngồi ở nhà, chúng ta cũng có thể tiếp cận được những thông tin mới mà mình quan tâm mà không cần phải đến tận nơi Hiện nay, mọi nhu cầu về dịch vụ và thương mại mà trước đây chỉ có thể giao dịch bằng tay, yêu cầu người dùng phải đến tận nơi để giao dịch hoặc mua sắm, đã được đơn giản hóa Ví dụ, việc mua sắm đồ công nghệ, người dùng không cần phải đến cửa hàng để lựa chọn sản phẩm, đối mặt với việc sản phẩm hết hàng Thay vào đó, tất cả những gì cần làm chỉ là vài thao tác kích chuột
Sự bùng nổ của Công nghệ 4.0 và những lý do nêu trên đã thôi thúc nhóm chúng em chọn đề tài: “Xây dựng website bán thiết bị di động” nhằm đáp ứng nhu cầu và mang lại sự thuận tiện cho mọi người Website này sẽ giúp mọi người dễ dàng mua sắm thiết bị di động, tiết kiệm thời gian và công sức, đồng thời trải nghiệm sự tiện lợi của công nghệ hiện đại
2 ĐỐI TƯỢNG NGHIÊN CỨU Đối với đề tài “Website xây dựng trang web bán thiết bị điện thoại sử dụng công nghệ Node.js và React.js”, đối tượng nghiên cứu dựa trên những nhu cầu tìm kiếm của người
19 dùng về thiết bị di động trực tuyến Nghiên cứu này sẽ tập trung vào việc cung cấp cho khách hàng một trải nghiệm mua sắm thuận tiện, tương tác mượt mà và an toàn trên nền tảng trực tuyến Đồng thời kèm theo đó là các công nghệ áp dụng để tạo ra sản phẩm Cụ thể như sau:
- Áp dụng cơ sở dữ liệu MongoDB để lưu trữ dữ liệu, thông tin người dùng
- Nghiên cứu APIs xây dựng nên hệ thống các APIs hỗ trợ lấy dữ liệu một cách chính xác và nhanh chóng
- Redux: Sử dụng Redux trong React.js để quản lý trạng thái ứng dụng một cách hiệu quả và dễ dàng trong việc truyền dữ liệu giữa các thành phần.
- Về giao diện, nghiên cứu và sử dụng React JS và một số thư viện hỗ trợ cho React
JS để xây dựng và xử lý giao diện người dùng và hệ thống quản trị
- Về bảo mật hệ thống, sử dụng Json Web Token để xác thực tài khoản đăng nhập
3 PHẠM VI NGHIÊN CỨU Đề tài "Xây dựng Website bán thiết bị di động sử dụng công nghệ Node.js và React.js" tập trung vào việc tạo ra một nền tảng thương mại điện tử phục vụ ngành công nghiệp đồ công nghệ di động hiện đại để người dùng có thể tương tác mượt mà và có được trải nghiệm tuyệt vời Cùng với đó, dự án tập trung vào các khía cạnh sau:
− Trải nghiệm người dùng: Tạo ra giao diện thân thiện, dễ sử dụng để người dùng có thể tìm kiếm, duyệt và mua các sản phẩm dễ dàng.
− Hiệu suất và tích hợp công nghệ: Nghiên cứu về việc tích hợp Node.js và React.js để tối ưu hóa hiệu suất trang web, đảm bảo trải nghiệm mượt mà và nhanh chóng.
− Quản lý sản phẩm và đơn hàng: Tạo các tính năng quản lý sản phẩm, lịch sử đơn hàng, giúp người quản trị có thể dễ dàng cập nhật và quản lý thông tin.
− Bảo mật và thanh toán: Đảm bảo an toàn thông tin cá nhân, thực hiện tính năng thanh toán an toàn và tiện lợi cho người dùng Website được chia thành 2 phần là phần Quản trị và phần Người dùng
Chức năng chính như sau:
Trong phần Quản trị bao gồm các nghiệp vụ chính như:
- Quản lý sản phẩm và loại sản phẩm
- Quản lý mã giảm giá
- Quản lý người dùng và tài khoản
- Thống kê và báo cáo doanh thu
Trong phần Người dùng bao gồm các nghiệp vụ chính như:
- Đăng ký/ Đăng nhập/ Quên mật khẩu
- Xem danh sách sản phẩm và đặt hàng
- Thanh toán và theo dõi đơn hàng
- Chỉnh sửa thông tin cá nhân
4 MỤC TIÊU CỦA ĐỀ TÀI
Về phía người dùng xây dựng được một website đặt thiết bị di động nhanh và tiện lợi với các tính năng cơ bản về đặt hàng, thanh toán và các hỗ trợ khác cho người dùng, chat với người bán, đánh giá sản phẩm
Về phía quản trị xây dựng được nơi quản lý, theo dõi các tài nguyên, dữ liệu của hệ thống: như thống kê, quản lý tài khoản, quản lý sản phẩm, quản lý loại sản phẩm, quản lý tài khoản người dùng, chat với người mua.
5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
Mục đích đề tài nhằm tạo ra một môi trường trải nghiệm tốt nhất cho khách hàng tập trung vào việc tạo ra một trang web bán hàng có thể đáp ứng nhu cầu và mang lại trải nghiệm mua sắm trực tuyến vượt trội và hiệu quả cho người dùng Là nơi để người dùng đặt hàng và chọn lọc sản phẩm theo nhu cầu cá nhân Từ đó cải thiện và nâng cao tính linh hoạt cũng như hiệu suất của hệ thống
CƠ SỞ LÝ THUYẾT
Chatbot Dialogflow
2 Chương 2 KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU
2.3 Mô hình hóa yêu cầu
3 Chương 4 THIẾT KẾ PHẦN MỀM
4 Chương 4 CÀI ĐẶT, KIỂM THỬ
STT Thời gian Công việc Ghi chú
Họp bàn lên ý tưởng và hướng phát triển Phân tích chọn công nghệ sử dụng Thực hiện khảo sát hiện trạng Lên ý tưởng và thiết kế cơ sở dữ liệu
Tìm hiểu công nghệ Reactjs và Nodejs Thiết giao diện trang người dùng và một số chức năng cơ bản
Thiết kế use case và đặc tả
Tìm hiểu công nghệ Reactjs và Nodejs Thiết kế giao diện cho quản trị viên và một số chức năng cơ bản
Kết nối Front end và back end lại với nhau Debug và sửa lỗi
Thiết kế giao diện và các chức năng phát triển mới trong dự án
Tìm hiểu tích hợp hệ thống Vnpay và chat bot thông qua Dialogflow
Thống nhất thêm và chỉnh sửa dữ liệu sản phẩm Triển khai hoàn thành các chức năng
Chỉnh sửa các mô hình hóa và sơ đồ của đề tài Viết và chỉnh sử báo cáo
Hoàn thiện cuốn báo cáo Kiểm tra các module của hệ thống Thực hiện việc deploy trang web của mình Kiểm tra các tính tính và sửa lỗi
Ngày tháng năm 2024 Ý kiến của giảng viên hướng dẫn
(ký và ghi rõ họ tên)
LỜI CẢM ƠN 5 ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP 6
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 18
4 MỤC TIÊU CỦA ĐỀ TÀI 20
5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 20
CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 21
1.1 Kiến trúc thành phần ứng dụng 21
1.2.2 Một số khái niệm liên quan đến React JS 22
CHƯƠNG 2 KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 38
2.2.2 Yêu cầu phi chức năng 41
2.3 MÔ HÌNH HÓA YÊU CẦU 42
2.3.2 Mô tả sơ đồ Use case 44
CHƯƠNG 3 THIẾT KẾ PHẦN MỀM 70
3.3.1 Giao diện khách và người dùng 94
3.3.2 Giao diện quản trị viên 105
CHƯƠNG 4 CÀI ĐẶT VÀ KIỂM THỬ 115
1.1 Kiến thức tìm hiểu được 136
Hình 1 1 Kiến trúc thành phần ứng dụng 21
Hình 1 2 Component trong React JS 23
Hình 1 3 Cú pháp props trong Class Component và Function Component 24
Hình 1 5 Đoạn code get Axios 26
Hình 1 6 Axios GET lấy thông tin user 27
Hình 1 7 Axios Post tạo sản phẩm 27
Hình 1 8 Axios PUT cập nhật sản phẩm 28
Hình 1 10 Axios PUT xóa sản phẩm 28
Hình 1 12 Cấu trúc thư mục configs 30
Hình 1 13 Cấu trúc thư mục middleware 30
Hình 1 14 Cấu trúc thư mục models 30
Hình 1 15 Cấu trúc thư mục node_modules 31
Hình 1 16 Cấu trúc thư mục routes 31
Hình 1 17 Cấu trúc thư mục utils 31
Hình 1 21 File package-lock.json 32
Hình 1 23 Cấu hình kết nối database 34
Hình 1 25 Dữ liệu được ánh xạ từ ứng dụng vào mongoDB 35
Hình 2 1 Giao diện trang Cellphone S 38
Hình 2 2 Giao diện thế giới di động 39
Hình 2 3 Giao diện trang Fpt 40
Hình 2 4 Use case Người dùng 42
Hình 2 5 Use case Quản trị viên 43
Hình 3 2 Lược đồ tuần tự "Register" 71
Hình 3 3 Lược đồ tuần tự "Logout" 72
Hình 3 4 Lược đồ tuần tự "Login" 72
Hình 3 5 Lược đồ tuần tự "Forgot Password" 73
Hình 3 6 Lược đồ tuần tự "Update Profile" 74
Hình 3 7 Lược đồ tuần tự "Add to wish list" 74
Hình 3 8 Lược đồ tuần tự "Create Order" 75
Hình 3 9 Lược đồ tuần tự Apply Coupon 75
Hình 3 10 Lược đồ tuần tự "Rating" 76
Hình 3 11 Lược đồ tuần tự "Add Product to cart" 76
Hình 3 12 Lược đồ tuần tự "Manage Cart" 77
Hình 3 13 Lược đồ tuần tự "Delete product to cart" 77
Hình 3 14 Lược đồ tuần tự "Update product to cart" 78
Hình 3 15 Lược đồ tuần tự "View product" 78
Hình 3 16 Lược đồ tuần tự "View All Products" 79
Hình 3 17 Lược đồ tuần tự "Manage Product " 79
Hình 3 18 Lược đồ tuần tự "Create Product" 80
Hình 3 19 Lược đồ tuần tự"Update product" 80
Hình 3 20 Lược đồ tuần tự "Delete product" 81
Hình 3 21 Lược đồ tuần tự "Manage Brand" 81
Hình 3 22 Lược đồ tuần tự "Create Brand" 82
Hình 3 23 Lược đồ tuần tự "Update Brand" 82
Hình 3 24 Lược đồ tuần tự "Delete Brand" 83
Hình 3 25 Lược đồ tuần tự "Manage Category" 83
Hình 3 26 Lược đồ tuần tự "Create Category" 84
Hình 3 27 Lược đồ tuần tự "Upadate Category" 84
Hình 3 28 Lược đồ tuần tự "Delete Category" 85
Hình 3 29 Lược đồ tuần tự "Manage Coupon" 85
Hình 3 30 Lược đồ tuần tự "Create Coupon" 86
Hình 3 31 Lược đồ tuần tự "Update Coupon" 86
Hình 3 32 Lược đồ tuần tự "Delete Coupon" 87
Hình 3 33 Lược đồ tuần tự "Manage User" 87
Hình 3 34 Lược đồ tuần tự "Update user information and status" 88
Hình 3 35 Lược đồ tuần tự "Manage enquiry" 88
Hình 3 36 Lược đồ tuần tự "Update Enquiry" 89
Hình 3 37 Lược đồ tuần tự "Delete Enquiry" 89
Hình 3 38 Lược đồ tuần tự "Update Order Status" 90
Hình 3 39 Lược đồ tuần tự "Manage Color" 90
Hình 3 40 Lược đồ tuần tự "Create Color" 91
Hình 3 41 Lược đồ tuần tự "Update Color" 91
Hình 3 42 Lược đồ tuần tự "Delete Color" 92
Hình 3 43 Lược đồ tuần tự "Manage Blogs" 92
Hình 3 44 Lược đồ tuần tự "Create Blog" 92
Hình 3 45 Lược đồ tuần tự "Update Blog" 93
Hình 3 46 Lược đồ tuần tự "Delete Blog" 93
Hình 3 47 Giao diện trang chủ (1) 94
Hình 3 48 Giao diện trang chủ (2) 95
Hình 3 49 Giao diện trang đăng nhập 96
Hình 3 50 Giao diện trang đăng ký 97
Hình 3 51 Giao diện trang Our store 98
Hình 3 52 Giao diện trang Giỏ hàng 99
Hình 3 53 Giao diện trang Thanh toán 99
Hình 3 54 Giao diện danh sách mã giảm giá 101
Hình 3 55 Giao diện trang “Đơn hàng của tôi” 101
Hình 3 56 Giao diện trang Contact Us 102
Hình 3 57 Giao diện trang chi tiết sản phẩm 103
Hình 3 58 Giao diện trang đăng nhập admin 105
Hình 3 59 Giao diện trang thống kê 105
Hình 3 60 Giao diện thanh bên admin 106
Hình 3 61 Giao diện trang quản lý người dùng 108
Hình 3 62 Giao diện cửa sổ chỉnh sửa thông tin 108
Hình 3 63 Giao diện trang thêm sản phẩm 109
Hình 3 64 Giao diện trang quản lý sản phẩm 110
Hình 3 65 Giao diện chỉnh sửa sản phẩm 111
Hình 3 66 Giao diện trang quản lý đơn hàng 112
Hình 3 67 Giao diện trang chi tiết đơn hàng 112
Hình 3 68 Giao diện trang quản lý phản hồi người dùng 113
Hình 3 69 Giao diện chat với người dùng 113
Bảng 1 1 Cấu trúc phần Backend 32
Bảng 2 1 Mô tả sơ đồ Use case 47
Bảng 2 5 Use case Forgot Password (UC_04) 51
Bảng 2 6 Use case Manage Profile 51
Bảng 2 7 Use case Compare products 52
Bảng 2 9 Use case Add To Wish List 54
Bảng 2 10 Use case Create Order 55
Bảng 2 11 Use case Apply Coupon 55
Bảng 2 13 Use case Send Enquiry 57
Bảng 2 14 Use case Product Add To Cart 57
Bảng 2 15 Use case Get Cart 58
Bảng 2 16 Use case View Product 59
Bảng 2 17 Use case View All Products 59
Bảng 2 18 Use case Manage Product 60
Bảng 2 19 Use case Create Product 60
Bảng 2 20 Use case Update Product 61
Bảng 2 21 Use case Delete Product 61
Bảng 2 22 Use case Manage Brand 62
Bảng 2 23 Use case Create Brand 62
Bảng 2 24 Use case Update Brand 63
Bảng 2 25 Use case Delete Brand 64
Bảng 2 26 Use case Manage Category 64
Bảng 2 27 Use case Create Category 65
Bảng 2 28 Use case Update Category 65
Bảng 2 29 Use case Delete Category 66
Bảng 2 30 Use case Manage User 66
Bảng 2 31 Use case Update User 67
Bảng 2 32 Use case Block User 68
Bảng 2 33 Use case Update Order Status 68
Bảng 2 34 Use case View Statistics 69
Bảng 3 1 Bảng chi tiết màn hình trang chủ 96
Bảng 3 2 Bảng chi tiết màn hình trang đăng nhập 97
Bảng 3 3 Bảng chi tiết màn hình trang đăng ký 98
Bảng 3 4 Bảng chi tiết màn hình trang Our Store 98
Bảng 3 5 Bảng chi tiết màn hình trang Giỏ hàng 99
Bảng 3 6 Bảng chi tiết màn hình trang Thanh toán 100
Bảng 3 7 Bảng chi tiết màn hình danh sách mã giảm giá 101
Bảng 3 8 Bảng chi tiết màn hình trang Đơn hàng của tôi 102
Bảng 3 9 Bảng chi tiết trang Contact Us 102
Bảng 3 10 Bảng chi tiết trang Chi tiết sản phẩm 104
Bảng 3 11 Bảng chi tiết trang Đăng nhập Admin 105
Bảng 3 12 Bảng chi tiết trang Thống kê 106
Bảng 3 13 Bảng chi tiết thanh bên 107
Bảng 3 14 Bảng chi tiết trang quản lý người dùng 108
Bảng 3 15 Bảng chi tiết cửa sổ chỉnh sửa thông tin 109
Bảng 3 16 Bảng chi tiết trang thêm sản phẩm 110
Bảng 3 17 Bảng chi tiết trang quản lý sản phẩm 110
Bảng 3 18 Giao diện trang chỉnh sửa sản phẩm 111
Bảng 3 19 Bảng chi tiết trang quản lý đơn hàng 112
Bảng 3 20 Bảng chi tiết trang chi tiết đơn hàng 113
Bảng 3 21 Bảng chi tiết trang quản lý phản hồi 113
Bảng 3 22 Bảng chi tiết trang chat với người dùng 114
Bảng 4 3 Testcase Quên mật khẩu 119
Bảng 4 4 Testcase tìm kiếm sản phẩm 119
Bảng 4 5 Testcase thêm sản phẩm vào giỏ hàng 120
Bảng 4 6 Testcase chức năng đánh giá sản phẩm 120
Bảng 4 7 Testcase thêm sản phẩm yêu thích 121
Bảng 4 8 Testcase Xem lịch sử các đơn hàng đã đặt 121
Bảng 4 9 Testcase Cập nhập thông tin cá nhân 122
Bảng 4 10 Testcase Trang hiển thị sản phẩm 122
Bảng 4 11 Testcase Trang hiển thị các blogs 122
Bảng 4 12 Testcase Trang thu nhập ý kiến của người dùng 123
Bảng 4 13 Testcase chức năng đặt hàng 124
Bảng 4 14 Testcase chức năng so sánh sản phẩm 124
Bảng 4 15 Testcase chức năng áp dụng mã giảm giá 125
Bảng 4 16 Testcase quản lý thông tin sản phẩm 128
Bảng 4 17 Testcase quản lí thông tin người dùng 129
Bảng 4 18 Testcase quản lý các brands 130
Bảng 4 19 Testcase quản lý category 131
Bảng 4 20 Testcase quản lý đơn hàng 132
Bảng 4 21 Testcase quản lý mã giảm giá 133
Bảng 4 22 Testcase quản lý Blogs 135
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Trong thời đại hiện nay, cuộc cách mạng công nghiệp 4.0 đang phát triển mạnh mẽ, và công nghệ thông tin ngày càng phục vụ nhu cầu của con người trong mọi lĩnh vực của đời sống và xã hội Các công việc trước đây phải làm trên giấy tờ dần dần được thay thế bởi các phần mềm và các website, giúp việc sử dụng dễ dàng hơn cho người dùng và quản lý thuận tiện hơn Với sự phát triển của Internet, người dùng có thể truy cập vào website để thực hiện các công việc khác nhau mọi lúc, mọi nơi mà không cần phải đến tận nơi để đăng ký, giao dịch, hoặc mua hàng Việc tạo ra một website để phục vụ và đáp ứng nhu cầu của con người trở nên vô cùng cần thiết, giúp nhanh chóng, thuận tiện và dễ dàng hơn, đồng thời tiết kiệm thời gian và công sức trong thời đại công nghệ số Ngoài ra, sự kiện bùng nổ trí tuệ nhân tạo (AI) và ứng dụng rộng rãi của nó trong cuộc sống hàng ngày đã làm cho Công nghệ 4.0 phát triển một cách vượt bậc AI đã giúp chúng ta tiếp cận thông tin thông qua Internet nhanh chóng và hiệu quả hơn nhiều so với cách tiếp cận truyền thống Ngày nay, chỉ cần ngồi ở nhà, chúng ta cũng có thể tiếp cận được những thông tin mới mà mình quan tâm mà không cần phải đến tận nơi Hiện nay, mọi nhu cầu về dịch vụ và thương mại mà trước đây chỉ có thể giao dịch bằng tay, yêu cầu người dùng phải đến tận nơi để giao dịch hoặc mua sắm, đã được đơn giản hóa Ví dụ, việc mua sắm đồ công nghệ, người dùng không cần phải đến cửa hàng để lựa chọn sản phẩm, đối mặt với việc sản phẩm hết hàng Thay vào đó, tất cả những gì cần làm chỉ là vài thao tác kích chuột
Sự bùng nổ của Công nghệ 4.0 và những lý do nêu trên đã thôi thúc nhóm chúng em chọn đề tài: “Xây dựng website bán thiết bị di động” nhằm đáp ứng nhu cầu và mang lại sự thuận tiện cho mọi người Website này sẽ giúp mọi người dễ dàng mua sắm thiết bị di động, tiết kiệm thời gian và công sức, đồng thời trải nghiệm sự tiện lợi của công nghệ hiện đại
2 ĐỐI TƯỢNG NGHIÊN CỨU Đối với đề tài “Website xây dựng trang web bán thiết bị điện thoại sử dụng công nghệ Node.js và React.js”, đối tượng nghiên cứu dựa trên những nhu cầu tìm kiếm của người
19 dùng về thiết bị di động trực tuyến Nghiên cứu này sẽ tập trung vào việc cung cấp cho khách hàng một trải nghiệm mua sắm thuận tiện, tương tác mượt mà và an toàn trên nền tảng trực tuyến Đồng thời kèm theo đó là các công nghệ áp dụng để tạo ra sản phẩm Cụ thể như sau:
- Áp dụng cơ sở dữ liệu MongoDB để lưu trữ dữ liệu, thông tin người dùng
- Nghiên cứu APIs xây dựng nên hệ thống các APIs hỗ trợ lấy dữ liệu một cách chính xác và nhanh chóng
- Redux: Sử dụng Redux trong React.js để quản lý trạng thái ứng dụng một cách hiệu quả và dễ dàng trong việc truyền dữ liệu giữa các thành phần.
- Về giao diện, nghiên cứu và sử dụng React JS và một số thư viện hỗ trợ cho React
JS để xây dựng và xử lý giao diện người dùng và hệ thống quản trị
- Về bảo mật hệ thống, sử dụng Json Web Token để xác thực tài khoản đăng nhập
3 PHẠM VI NGHIÊN CỨU Đề tài "Xây dựng Website bán thiết bị di động sử dụng công nghệ Node.js và React.js" tập trung vào việc tạo ra một nền tảng thương mại điện tử phục vụ ngành công nghiệp đồ công nghệ di động hiện đại để người dùng có thể tương tác mượt mà và có được trải nghiệm tuyệt vời Cùng với đó, dự án tập trung vào các khía cạnh sau:
− Trải nghiệm người dùng: Tạo ra giao diện thân thiện, dễ sử dụng để người dùng có thể tìm kiếm, duyệt và mua các sản phẩm dễ dàng.
− Hiệu suất và tích hợp công nghệ: Nghiên cứu về việc tích hợp Node.js và React.js để tối ưu hóa hiệu suất trang web, đảm bảo trải nghiệm mượt mà và nhanh chóng.
− Quản lý sản phẩm và đơn hàng: Tạo các tính năng quản lý sản phẩm, lịch sử đơn hàng, giúp người quản trị có thể dễ dàng cập nhật và quản lý thông tin.
− Bảo mật và thanh toán: Đảm bảo an toàn thông tin cá nhân, thực hiện tính năng thanh toán an toàn và tiện lợi cho người dùng Website được chia thành 2 phần là phần Quản trị và phần Người dùng
Chức năng chính như sau:
Trong phần Quản trị bao gồm các nghiệp vụ chính như:
- Quản lý sản phẩm và loại sản phẩm
- Quản lý mã giảm giá
- Quản lý người dùng và tài khoản
- Thống kê và báo cáo doanh thu
Trong phần Người dùng bao gồm các nghiệp vụ chính như:
- Đăng ký/ Đăng nhập/ Quên mật khẩu
- Xem danh sách sản phẩm và đặt hàng
- Thanh toán và theo dõi đơn hàng
- Chỉnh sửa thông tin cá nhân
4 MỤC TIÊU CỦA ĐỀ TÀI
Về phía người dùng xây dựng được một website đặt thiết bị di động nhanh và tiện lợi với các tính năng cơ bản về đặt hàng, thanh toán và các hỗ trợ khác cho người dùng, chat với người bán, đánh giá sản phẩm
Về phía quản trị xây dựng được nơi quản lý, theo dõi các tài nguyên, dữ liệu của hệ thống: như thống kê, quản lý tài khoản, quản lý sản phẩm, quản lý loại sản phẩm, quản lý tài khoản người dùng, chat với người mua.
5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
Mục đích đề tài nhằm tạo ra một môi trường trải nghiệm tốt nhất cho khách hàng tập trung vào việc tạo ra một trang web bán hàng có thể đáp ứng nhu cầu và mang lại trải nghiệm mua sắm trực tuyến vượt trội và hiệu quả cho người dùng Là nơi để người dùng đặt hàng và chọn lọc sản phẩm theo nhu cầu cá nhân Từ đó cải thiện và nâng cao tính linh hoạt cũng như hiệu suất của hệ thống
PHẦN NỘI DUNG CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 1.1 Kiến trúc thành phần ứng dụng
Hình 1 1 Kiến trúc thành phần ứng dụng Ứng dụng gồm hai thành phần chính:
− Front-end: sử dụng công nghệ ReactJS với ngôn ngữ Javascript, sử dụng khái niệm Virtual DOM, nơi các thành phần (component) tồn tại giúp cải thiện hiệu suất ứng dụng Sử dụng cú pháp JSX cho phép viết HTML ngay trên file javascript, giúp viết code dễ hiểu và dễ dàng hơn React giúp tách các thành phần phức tạp của một trang web thành nhiều thành phần nhỏ hơn, chia nhỏ cấu trúc UX/UI phức tạp thành từng component đơn giản hơn Ngoài ra, ReactJS hiệu năng cao với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng bảo trì, nâng cấp và sữa lỗi
− Back-end: sử dụng công nghệ NodeJS kết hợp với ExpressJS framework, với sự hỗ trợ các phương thức HTTP và các middleware tạo ra các Rest API nhanh chóng, mạnh mẽ, dễ sử dụng và có khả năng tái sử dụng.Ở phía cơ sở dữ liệu, đồ án sử dụng MongoDB bởi cấu trúc linh hoạt, tốc độ ghi và cập nhật nhanh, tiện lợi cũng như dữ liệu dễ nhìn và trực quan hơn Ngoài ra, để phục vụ cho chức năng upload ảnh, đồ án sử dụng Cloudinary giúp việc lưu ảnh nhanh chóng, có thể đồng bộ trực tiếp với website và kết hợp với Google API/OAuth2Client để gửi thực hiện các tác vụ liên quan đến việc gửi email cho người dùng (quên mật khẩu,…)
KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU
MÔ HÌNH HÓA YÊU CẦU
3 Chương 4 THIẾT KẾ PHẦN MỀM
4 Chương 4 CÀI ĐẶT, KIỂM THỬ
STT Thời gian Công việc Ghi chú
Họp bàn lên ý tưởng và hướng phát triển Phân tích chọn công nghệ sử dụng Thực hiện khảo sát hiện trạng Lên ý tưởng và thiết kế cơ sở dữ liệu
Tìm hiểu công nghệ Reactjs và Nodejs Thiết giao diện trang người dùng và một số chức năng cơ bản
Thiết kế use case và đặc tả
Tìm hiểu công nghệ Reactjs và Nodejs Thiết kế giao diện cho quản trị viên và một số chức năng cơ bản
Kết nối Front end và back end lại với nhau Debug và sửa lỗi
Thiết kế giao diện và các chức năng phát triển mới trong dự án
Tìm hiểu tích hợp hệ thống Vnpay và chat bot thông qua Dialogflow
Thống nhất thêm và chỉnh sửa dữ liệu sản phẩm Triển khai hoàn thành các chức năng
Chỉnh sửa các mô hình hóa và sơ đồ của đề tài Viết và chỉnh sử báo cáo
Hoàn thiện cuốn báo cáo Kiểm tra các module của hệ thống Thực hiện việc deploy trang web của mình Kiểm tra các tính tính và sửa lỗi
Ngày tháng năm 2024 Ý kiến của giảng viên hướng dẫn
(ký và ghi rõ họ tên)
LỜI CẢM ƠN 5 ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP 6
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 18
4 MỤC TIÊU CỦA ĐỀ TÀI 20
5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 20
CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 21
1.1 Kiến trúc thành phần ứng dụng 21
1.2.2 Một số khái niệm liên quan đến React JS 22
CHƯƠNG 2 KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 38
2.2.2 Yêu cầu phi chức năng 41
2.3 MÔ HÌNH HÓA YÊU CẦU 42
2.3.2 Mô tả sơ đồ Use case 44
CHƯƠNG 3 THIẾT KẾ PHẦN MỀM 70
3.3.1 Giao diện khách và người dùng 94
3.3.2 Giao diện quản trị viên 105
CHƯƠNG 4 CÀI ĐẶT VÀ KIỂM THỬ 115
1.1 Kiến thức tìm hiểu được 136
Hình 1 1 Kiến trúc thành phần ứng dụng 21
Hình 1 2 Component trong React JS 23
Hình 1 3 Cú pháp props trong Class Component và Function Component 24
Hình 1 5 Đoạn code get Axios 26
Hình 1 6 Axios GET lấy thông tin user 27
Hình 1 7 Axios Post tạo sản phẩm 27
Hình 1 8 Axios PUT cập nhật sản phẩm 28
Hình 1 10 Axios PUT xóa sản phẩm 28
Hình 1 12 Cấu trúc thư mục configs 30
Hình 1 13 Cấu trúc thư mục middleware 30
Hình 1 14 Cấu trúc thư mục models 30
Hình 1 15 Cấu trúc thư mục node_modules 31
Hình 1 16 Cấu trúc thư mục routes 31
Hình 1 17 Cấu trúc thư mục utils 31
Hình 1 21 File package-lock.json 32
Hình 1 23 Cấu hình kết nối database 34
Hình 1 25 Dữ liệu được ánh xạ từ ứng dụng vào mongoDB 35
Hình 2 1 Giao diện trang Cellphone S 38
Hình 2 2 Giao diện thế giới di động 39
Hình 2 3 Giao diện trang Fpt 40
Hình 2 4 Use case Người dùng 42
Hình 2 5 Use case Quản trị viên 43
Hình 3 2 Lược đồ tuần tự "Register" 71
Hình 3 3 Lược đồ tuần tự "Logout" 72
Hình 3 4 Lược đồ tuần tự "Login" 72
Hình 3 5 Lược đồ tuần tự "Forgot Password" 73
Hình 3 6 Lược đồ tuần tự "Update Profile" 74
Hình 3 7 Lược đồ tuần tự "Add to wish list" 74
Hình 3 8 Lược đồ tuần tự "Create Order" 75
Hình 3 9 Lược đồ tuần tự Apply Coupon 75
Hình 3 10 Lược đồ tuần tự "Rating" 76
Hình 3 11 Lược đồ tuần tự "Add Product to cart" 76
Hình 3 12 Lược đồ tuần tự "Manage Cart" 77
Hình 3 13 Lược đồ tuần tự "Delete product to cart" 77
Hình 3 14 Lược đồ tuần tự "Update product to cart" 78
Hình 3 15 Lược đồ tuần tự "View product" 78
Hình 3 16 Lược đồ tuần tự "View All Products" 79
Hình 3 17 Lược đồ tuần tự "Manage Product " 79
Hình 3 18 Lược đồ tuần tự "Create Product" 80
Hình 3 19 Lược đồ tuần tự"Update product" 80
Hình 3 20 Lược đồ tuần tự "Delete product" 81
Hình 3 21 Lược đồ tuần tự "Manage Brand" 81
Hình 3 22 Lược đồ tuần tự "Create Brand" 82
Hình 3 23 Lược đồ tuần tự "Update Brand" 82
Hình 3 24 Lược đồ tuần tự "Delete Brand" 83
Hình 3 25 Lược đồ tuần tự "Manage Category" 83
Hình 3 26 Lược đồ tuần tự "Create Category" 84
Hình 3 27 Lược đồ tuần tự "Upadate Category" 84
Hình 3 28 Lược đồ tuần tự "Delete Category" 85
Hình 3 29 Lược đồ tuần tự "Manage Coupon" 85
Hình 3 30 Lược đồ tuần tự "Create Coupon" 86
Hình 3 31 Lược đồ tuần tự "Update Coupon" 86
Hình 3 32 Lược đồ tuần tự "Delete Coupon" 87
Hình 3 33 Lược đồ tuần tự "Manage User" 87
Hình 3 34 Lược đồ tuần tự "Update user information and status" 88
Hình 3 35 Lược đồ tuần tự "Manage enquiry" 88
Hình 3 36 Lược đồ tuần tự "Update Enquiry" 89
Hình 3 37 Lược đồ tuần tự "Delete Enquiry" 89
Hình 3 38 Lược đồ tuần tự "Update Order Status" 90
Hình 3 39 Lược đồ tuần tự "Manage Color" 90
Hình 3 40 Lược đồ tuần tự "Create Color" 91
Hình 3 41 Lược đồ tuần tự "Update Color" 91
Hình 3 42 Lược đồ tuần tự "Delete Color" 92
Hình 3 43 Lược đồ tuần tự "Manage Blogs" 92
Hình 3 44 Lược đồ tuần tự "Create Blog" 92
Hình 3 45 Lược đồ tuần tự "Update Blog" 93
Hình 3 46 Lược đồ tuần tự "Delete Blog" 93
Hình 3 47 Giao diện trang chủ (1) 94
Hình 3 48 Giao diện trang chủ (2) 95
Hình 3 49 Giao diện trang đăng nhập 96
Hình 3 50 Giao diện trang đăng ký 97
Hình 3 51 Giao diện trang Our store 98
Hình 3 52 Giao diện trang Giỏ hàng 99
Hình 3 53 Giao diện trang Thanh toán 99
Hình 3 54 Giao diện danh sách mã giảm giá 101
Hình 3 55 Giao diện trang “Đơn hàng của tôi” 101
Hình 3 56 Giao diện trang Contact Us 102
Hình 3 57 Giao diện trang chi tiết sản phẩm 103
Hình 3 58 Giao diện trang đăng nhập admin 105
Hình 3 59 Giao diện trang thống kê 105
Hình 3 60 Giao diện thanh bên admin 106
Hình 3 61 Giao diện trang quản lý người dùng 108
Hình 3 62 Giao diện cửa sổ chỉnh sửa thông tin 108
Hình 3 63 Giao diện trang thêm sản phẩm 109
Hình 3 64 Giao diện trang quản lý sản phẩm 110
Hình 3 65 Giao diện chỉnh sửa sản phẩm 111
Hình 3 66 Giao diện trang quản lý đơn hàng 112
Hình 3 67 Giao diện trang chi tiết đơn hàng 112
Hình 3 68 Giao diện trang quản lý phản hồi người dùng 113
Hình 3 69 Giao diện chat với người dùng 113
Bảng 1 1 Cấu trúc phần Backend 32
Bảng 2 1 Mô tả sơ đồ Use case 47
Bảng 2 5 Use case Forgot Password (UC_04) 51
Bảng 2 6 Use case Manage Profile 51
Bảng 2 7 Use case Compare products 52
Bảng 2 9 Use case Add To Wish List 54
Bảng 2 10 Use case Create Order 55
Bảng 2 11 Use case Apply Coupon 55
Bảng 2 13 Use case Send Enquiry 57
Bảng 2 14 Use case Product Add To Cart 57
Bảng 2 15 Use case Get Cart 58
Bảng 2 16 Use case View Product 59
Bảng 2 17 Use case View All Products 59
Bảng 2 18 Use case Manage Product 60
Bảng 2 19 Use case Create Product 60
Bảng 2 20 Use case Update Product 61
Bảng 2 21 Use case Delete Product 61
Bảng 2 22 Use case Manage Brand 62
Bảng 2 23 Use case Create Brand 62
Bảng 2 24 Use case Update Brand 63
Bảng 2 25 Use case Delete Brand 64
Bảng 2 26 Use case Manage Category 64
Bảng 2 27 Use case Create Category 65
Bảng 2 28 Use case Update Category 65
Bảng 2 29 Use case Delete Category 66
Bảng 2 30 Use case Manage User 66
Bảng 2 31 Use case Update User 67
Bảng 2 32 Use case Block User 68
Bảng 2 33 Use case Update Order Status 68
Bảng 2 34 Use case View Statistics 69
Bảng 3 1 Bảng chi tiết màn hình trang chủ 96
Bảng 3 2 Bảng chi tiết màn hình trang đăng nhập 97
Bảng 3 3 Bảng chi tiết màn hình trang đăng ký 98
Bảng 3 4 Bảng chi tiết màn hình trang Our Store 98
Bảng 3 5 Bảng chi tiết màn hình trang Giỏ hàng 99
Bảng 3 6 Bảng chi tiết màn hình trang Thanh toán 100
Bảng 3 7 Bảng chi tiết màn hình danh sách mã giảm giá 101
Bảng 3 8 Bảng chi tiết màn hình trang Đơn hàng của tôi 102
Bảng 3 9 Bảng chi tiết trang Contact Us 102
Bảng 3 10 Bảng chi tiết trang Chi tiết sản phẩm 104
Bảng 3 11 Bảng chi tiết trang Đăng nhập Admin 105
Bảng 3 12 Bảng chi tiết trang Thống kê 106
Bảng 3 13 Bảng chi tiết thanh bên 107
Bảng 3 14 Bảng chi tiết trang quản lý người dùng 108
Bảng 3 15 Bảng chi tiết cửa sổ chỉnh sửa thông tin 109
Bảng 3 16 Bảng chi tiết trang thêm sản phẩm 110
Bảng 3 17 Bảng chi tiết trang quản lý sản phẩm 110
Bảng 3 18 Giao diện trang chỉnh sửa sản phẩm 111
Bảng 3 19 Bảng chi tiết trang quản lý đơn hàng 112
Bảng 3 20 Bảng chi tiết trang chi tiết đơn hàng 113
Bảng 3 21 Bảng chi tiết trang quản lý phản hồi 113
Bảng 3 22 Bảng chi tiết trang chat với người dùng 114
Bảng 4 3 Testcase Quên mật khẩu 119
Bảng 4 4 Testcase tìm kiếm sản phẩm 119
Bảng 4 5 Testcase thêm sản phẩm vào giỏ hàng 120
Bảng 4 6 Testcase chức năng đánh giá sản phẩm 120
Bảng 4 7 Testcase thêm sản phẩm yêu thích 121
Bảng 4 8 Testcase Xem lịch sử các đơn hàng đã đặt 121
Bảng 4 9 Testcase Cập nhập thông tin cá nhân 122
Bảng 4 10 Testcase Trang hiển thị sản phẩm 122
Bảng 4 11 Testcase Trang hiển thị các blogs 122
Bảng 4 12 Testcase Trang thu nhập ý kiến của người dùng 123
Bảng 4 13 Testcase chức năng đặt hàng 124
Bảng 4 14 Testcase chức năng so sánh sản phẩm 124
Bảng 4 15 Testcase chức năng áp dụng mã giảm giá 125
Bảng 4 16 Testcase quản lý thông tin sản phẩm 128
Bảng 4 17 Testcase quản lí thông tin người dùng 129
Bảng 4 18 Testcase quản lý các brands 130
Bảng 4 19 Testcase quản lý category 131
Bảng 4 20 Testcase quản lý đơn hàng 132
Bảng 4 21 Testcase quản lý mã giảm giá 133
Bảng 4 22 Testcase quản lý Blogs 135
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Trong thời đại hiện nay, cuộc cách mạng công nghiệp 4.0 đang phát triển mạnh mẽ, và công nghệ thông tin ngày càng phục vụ nhu cầu của con người trong mọi lĩnh vực của đời sống và xã hội Các công việc trước đây phải làm trên giấy tờ dần dần được thay thế bởi các phần mềm và các website, giúp việc sử dụng dễ dàng hơn cho người dùng và quản lý thuận tiện hơn Với sự phát triển của Internet, người dùng có thể truy cập vào website để thực hiện các công việc khác nhau mọi lúc, mọi nơi mà không cần phải đến tận nơi để đăng ký, giao dịch, hoặc mua hàng Việc tạo ra một website để phục vụ và đáp ứng nhu cầu của con người trở nên vô cùng cần thiết, giúp nhanh chóng, thuận tiện và dễ dàng hơn, đồng thời tiết kiệm thời gian và công sức trong thời đại công nghệ số Ngoài ra, sự kiện bùng nổ trí tuệ nhân tạo (AI) và ứng dụng rộng rãi của nó trong cuộc sống hàng ngày đã làm cho Công nghệ 4.0 phát triển một cách vượt bậc AI đã giúp chúng ta tiếp cận thông tin thông qua Internet nhanh chóng và hiệu quả hơn nhiều so với cách tiếp cận truyền thống Ngày nay, chỉ cần ngồi ở nhà, chúng ta cũng có thể tiếp cận được những thông tin mới mà mình quan tâm mà không cần phải đến tận nơi Hiện nay, mọi nhu cầu về dịch vụ và thương mại mà trước đây chỉ có thể giao dịch bằng tay, yêu cầu người dùng phải đến tận nơi để giao dịch hoặc mua sắm, đã được đơn giản hóa Ví dụ, việc mua sắm đồ công nghệ, người dùng không cần phải đến cửa hàng để lựa chọn sản phẩm, đối mặt với việc sản phẩm hết hàng Thay vào đó, tất cả những gì cần làm chỉ là vài thao tác kích chuột
Sự bùng nổ của Công nghệ 4.0 và những lý do nêu trên đã thôi thúc nhóm chúng em chọn đề tài: “Xây dựng website bán thiết bị di động” nhằm đáp ứng nhu cầu và mang lại sự thuận tiện cho mọi người Website này sẽ giúp mọi người dễ dàng mua sắm thiết bị di động, tiết kiệm thời gian và công sức, đồng thời trải nghiệm sự tiện lợi của công nghệ hiện đại
2 ĐỐI TƯỢNG NGHIÊN CỨU Đối với đề tài “Website xây dựng trang web bán thiết bị điện thoại sử dụng công nghệ Node.js và React.js”, đối tượng nghiên cứu dựa trên những nhu cầu tìm kiếm của người
19 dùng về thiết bị di động trực tuyến Nghiên cứu này sẽ tập trung vào việc cung cấp cho khách hàng một trải nghiệm mua sắm thuận tiện, tương tác mượt mà và an toàn trên nền tảng trực tuyến Đồng thời kèm theo đó là các công nghệ áp dụng để tạo ra sản phẩm Cụ thể như sau:
- Áp dụng cơ sở dữ liệu MongoDB để lưu trữ dữ liệu, thông tin người dùng
- Nghiên cứu APIs xây dựng nên hệ thống các APIs hỗ trợ lấy dữ liệu một cách chính xác và nhanh chóng
- Redux: Sử dụng Redux trong React.js để quản lý trạng thái ứng dụng một cách hiệu quả và dễ dàng trong việc truyền dữ liệu giữa các thành phần.
- Về giao diện, nghiên cứu và sử dụng React JS và một số thư viện hỗ trợ cho React
JS để xây dựng và xử lý giao diện người dùng và hệ thống quản trị
- Về bảo mật hệ thống, sử dụng Json Web Token để xác thực tài khoản đăng nhập
3 PHẠM VI NGHIÊN CỨU Đề tài "Xây dựng Website bán thiết bị di động sử dụng công nghệ Node.js và React.js" tập trung vào việc tạo ra một nền tảng thương mại điện tử phục vụ ngành công nghiệp đồ công nghệ di động hiện đại để người dùng có thể tương tác mượt mà và có được trải nghiệm tuyệt vời Cùng với đó, dự án tập trung vào các khía cạnh sau:
− Trải nghiệm người dùng: Tạo ra giao diện thân thiện, dễ sử dụng để người dùng có thể tìm kiếm, duyệt và mua các sản phẩm dễ dàng.
− Hiệu suất và tích hợp công nghệ: Nghiên cứu về việc tích hợp Node.js và React.js để tối ưu hóa hiệu suất trang web, đảm bảo trải nghiệm mượt mà và nhanh chóng.
− Quản lý sản phẩm và đơn hàng: Tạo các tính năng quản lý sản phẩm, lịch sử đơn hàng, giúp người quản trị có thể dễ dàng cập nhật và quản lý thông tin.
− Bảo mật và thanh toán: Đảm bảo an toàn thông tin cá nhân, thực hiện tính năng thanh toán an toàn và tiện lợi cho người dùng Website được chia thành 2 phần là phần Quản trị và phần Người dùng
Chức năng chính như sau:
Trong phần Quản trị bao gồm các nghiệp vụ chính như:
- Quản lý sản phẩm và loại sản phẩm
- Quản lý mã giảm giá
- Quản lý người dùng và tài khoản
- Thống kê và báo cáo doanh thu
Trong phần Người dùng bao gồm các nghiệp vụ chính như:
- Đăng ký/ Đăng nhập/ Quên mật khẩu
- Xem danh sách sản phẩm và đặt hàng
- Thanh toán và theo dõi đơn hàng
- Chỉnh sửa thông tin cá nhân
4 MỤC TIÊU CỦA ĐỀ TÀI
Về phía người dùng xây dựng được một website đặt thiết bị di động nhanh và tiện lợi với các tính năng cơ bản về đặt hàng, thanh toán và các hỗ trợ khác cho người dùng, chat với người bán, đánh giá sản phẩm
Về phía quản trị xây dựng được nơi quản lý, theo dõi các tài nguyên, dữ liệu của hệ thống: như thống kê, quản lý tài khoản, quản lý sản phẩm, quản lý loại sản phẩm, quản lý tài khoản người dùng, chat với người mua.
5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
Mục đích đề tài nhằm tạo ra một môi trường trải nghiệm tốt nhất cho khách hàng tập trung vào việc tạo ra một trang web bán hàng có thể đáp ứng nhu cầu và mang lại trải nghiệm mua sắm trực tuyến vượt trội và hiệu quả cho người dùng Là nơi để người dùng đặt hàng và chọn lọc sản phẩm theo nhu cầu cá nhân Từ đó cải thiện và nâng cao tính linh hoạt cũng như hiệu suất của hệ thống
PHẦN NỘI DUNG CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 1.1 Kiến trúc thành phần ứng dụng
Hình 1 1 Kiến trúc thành phần ứng dụng Ứng dụng gồm hai thành phần chính:
− Front-end: sử dụng công nghệ ReactJS với ngôn ngữ Javascript, sử dụng khái niệm Virtual DOM, nơi các thành phần (component) tồn tại giúp cải thiện hiệu suất ứng dụng Sử dụng cú pháp JSX cho phép viết HTML ngay trên file javascript, giúp viết code dễ hiểu và dễ dàng hơn React giúp tách các thành phần phức tạp của một trang web thành nhiều thành phần nhỏ hơn, chia nhỏ cấu trúc UX/UI phức tạp thành từng component đơn giản hơn Ngoài ra, ReactJS hiệu năng cao với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng bảo trì, nâng cấp và sữa lỗi
− Back-end: sử dụng công nghệ NodeJS kết hợp với ExpressJS framework, với sự hỗ trợ các phương thức HTTP và các middleware tạo ra các Rest API nhanh chóng, mạnh mẽ, dễ sử dụng và có khả năng tái sử dụng.Ở phía cơ sở dữ liệu, đồ án sử dụng MongoDB bởi cấu trúc linh hoạt, tốc độ ghi và cập nhật nhanh, tiện lợi cũng như dữ liệu dễ nhìn và trực quan hơn Ngoài ra, để phục vụ cho chức năng upload ảnh, đồ án sử dụng Cloudinary giúp việc lưu ảnh nhanh chóng, có thể đồng bộ trực tiếp với website và kết hợp với Google API/OAuth2Client để gửi thực hiện các tác vụ liên quan đến việc gửi email cho người dùng (quên mật khẩu,…)
THIẾT KẾ PHẦN MỀM
THIẾT KẾ GIAO DIỆN
4 Chương 4 CÀI ĐẶT, KIỂM THỬ
STT Thời gian Công việc Ghi chú
Họp bàn lên ý tưởng và hướng phát triển Phân tích chọn công nghệ sử dụng Thực hiện khảo sát hiện trạng Lên ý tưởng và thiết kế cơ sở dữ liệu
Tìm hiểu công nghệ Reactjs và Nodejs Thiết giao diện trang người dùng và một số chức năng cơ bản
Thiết kế use case và đặc tả
Tìm hiểu công nghệ Reactjs và Nodejs Thiết kế giao diện cho quản trị viên và một số chức năng cơ bản
Kết nối Front end và back end lại với nhau Debug và sửa lỗi
Thiết kế giao diện và các chức năng phát triển mới trong dự án
Tìm hiểu tích hợp hệ thống Vnpay và chat bot thông qua Dialogflow
Thống nhất thêm và chỉnh sửa dữ liệu sản phẩm Triển khai hoàn thành các chức năng
Chỉnh sửa các mô hình hóa và sơ đồ của đề tài Viết và chỉnh sử báo cáo
Hoàn thiện cuốn báo cáo Kiểm tra các module của hệ thống Thực hiện việc deploy trang web của mình Kiểm tra các tính tính và sửa lỗi
Ngày tháng năm 2024 Ý kiến của giảng viên hướng dẫn
(ký và ghi rõ họ tên)
LỜI CẢM ƠN 5 ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP 6
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 18
4 MỤC TIÊU CỦA ĐỀ TÀI 20
5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 20
CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 21
1.1 Kiến trúc thành phần ứng dụng 21
1.2.2 Một số khái niệm liên quan đến React JS 22
CHƯƠNG 2 KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 38
2.2.2 Yêu cầu phi chức năng 41
2.3 MÔ HÌNH HÓA YÊU CẦU 42
2.3.2 Mô tả sơ đồ Use case 44
CHƯƠNG 3 THIẾT KẾ PHẦN MỀM 70
3.3.1 Giao diện khách và người dùng 94
3.3.2 Giao diện quản trị viên 105
CHƯƠNG 4 CÀI ĐẶT VÀ KIỂM THỬ 115
1.1 Kiến thức tìm hiểu được 136
Hình 1 1 Kiến trúc thành phần ứng dụng 21
Hình 1 2 Component trong React JS 23
Hình 1 3 Cú pháp props trong Class Component và Function Component 24
Hình 1 5 Đoạn code get Axios 26
Hình 1 6 Axios GET lấy thông tin user 27
Hình 1 7 Axios Post tạo sản phẩm 27
Hình 1 8 Axios PUT cập nhật sản phẩm 28
Hình 1 10 Axios PUT xóa sản phẩm 28
Hình 1 12 Cấu trúc thư mục configs 30
Hình 1 13 Cấu trúc thư mục middleware 30
Hình 1 14 Cấu trúc thư mục models 30
Hình 1 15 Cấu trúc thư mục node_modules 31
Hình 1 16 Cấu trúc thư mục routes 31
Hình 1 17 Cấu trúc thư mục utils 31
Hình 1 21 File package-lock.json 32
Hình 1 23 Cấu hình kết nối database 34
Hình 1 25 Dữ liệu được ánh xạ từ ứng dụng vào mongoDB 35
Hình 2 1 Giao diện trang Cellphone S 38
Hình 2 2 Giao diện thế giới di động 39
Hình 2 3 Giao diện trang Fpt 40
Hình 2 4 Use case Người dùng 42
Hình 2 5 Use case Quản trị viên 43
Hình 3 2 Lược đồ tuần tự "Register" 71
Hình 3 3 Lược đồ tuần tự "Logout" 72
Hình 3 4 Lược đồ tuần tự "Login" 72
Hình 3 5 Lược đồ tuần tự "Forgot Password" 73
Hình 3 6 Lược đồ tuần tự "Update Profile" 74
Hình 3 7 Lược đồ tuần tự "Add to wish list" 74
Hình 3 8 Lược đồ tuần tự "Create Order" 75
Hình 3 9 Lược đồ tuần tự Apply Coupon 75
Hình 3 10 Lược đồ tuần tự "Rating" 76
Hình 3 11 Lược đồ tuần tự "Add Product to cart" 76
Hình 3 12 Lược đồ tuần tự "Manage Cart" 77
Hình 3 13 Lược đồ tuần tự "Delete product to cart" 77
Hình 3 14 Lược đồ tuần tự "Update product to cart" 78
Hình 3 15 Lược đồ tuần tự "View product" 78
Hình 3 16 Lược đồ tuần tự "View All Products" 79
Hình 3 17 Lược đồ tuần tự "Manage Product " 79
Hình 3 18 Lược đồ tuần tự "Create Product" 80
Hình 3 19 Lược đồ tuần tự"Update product" 80
Hình 3 20 Lược đồ tuần tự "Delete product" 81
Hình 3 21 Lược đồ tuần tự "Manage Brand" 81
Hình 3 22 Lược đồ tuần tự "Create Brand" 82
Hình 3 23 Lược đồ tuần tự "Update Brand" 82
Hình 3 24 Lược đồ tuần tự "Delete Brand" 83
Hình 3 25 Lược đồ tuần tự "Manage Category" 83
Hình 3 26 Lược đồ tuần tự "Create Category" 84
Hình 3 27 Lược đồ tuần tự "Upadate Category" 84
Hình 3 28 Lược đồ tuần tự "Delete Category" 85
Hình 3 29 Lược đồ tuần tự "Manage Coupon" 85
Hình 3 30 Lược đồ tuần tự "Create Coupon" 86
Hình 3 31 Lược đồ tuần tự "Update Coupon" 86
Hình 3 32 Lược đồ tuần tự "Delete Coupon" 87
Hình 3 33 Lược đồ tuần tự "Manage User" 87
Hình 3 34 Lược đồ tuần tự "Update user information and status" 88
Hình 3 35 Lược đồ tuần tự "Manage enquiry" 88
Hình 3 36 Lược đồ tuần tự "Update Enquiry" 89
Hình 3 37 Lược đồ tuần tự "Delete Enquiry" 89
Hình 3 38 Lược đồ tuần tự "Update Order Status" 90
Hình 3 39 Lược đồ tuần tự "Manage Color" 90
Hình 3 40 Lược đồ tuần tự "Create Color" 91
Hình 3 41 Lược đồ tuần tự "Update Color" 91
Hình 3 42 Lược đồ tuần tự "Delete Color" 92
Hình 3 43 Lược đồ tuần tự "Manage Blogs" 92
Hình 3 44 Lược đồ tuần tự "Create Blog" 92
Hình 3 45 Lược đồ tuần tự "Update Blog" 93
Hình 3 46 Lược đồ tuần tự "Delete Blog" 93
Hình 3 47 Giao diện trang chủ (1) 94
Hình 3 48 Giao diện trang chủ (2) 95
Hình 3 49 Giao diện trang đăng nhập 96
Hình 3 50 Giao diện trang đăng ký 97
Hình 3 51 Giao diện trang Our store 98
Hình 3 52 Giao diện trang Giỏ hàng 99
Hình 3 53 Giao diện trang Thanh toán 99
Hình 3 54 Giao diện danh sách mã giảm giá 101
Hình 3 55 Giao diện trang “Đơn hàng của tôi” 101
Hình 3 56 Giao diện trang Contact Us 102
Hình 3 57 Giao diện trang chi tiết sản phẩm 103
Hình 3 58 Giao diện trang đăng nhập admin 105
Hình 3 59 Giao diện trang thống kê 105
Hình 3 60 Giao diện thanh bên admin 106
Hình 3 61 Giao diện trang quản lý người dùng 108
Hình 3 62 Giao diện cửa sổ chỉnh sửa thông tin 108
Hình 3 63 Giao diện trang thêm sản phẩm 109
Hình 3 64 Giao diện trang quản lý sản phẩm 110
Hình 3 65 Giao diện chỉnh sửa sản phẩm 111
Hình 3 66 Giao diện trang quản lý đơn hàng 112
Hình 3 67 Giao diện trang chi tiết đơn hàng 112
Hình 3 68 Giao diện trang quản lý phản hồi người dùng 113
Hình 3 69 Giao diện chat với người dùng 113
Bảng 1 1 Cấu trúc phần Backend 32
Bảng 2 1 Mô tả sơ đồ Use case 47
Bảng 2 5 Use case Forgot Password (UC_04) 51
Bảng 2 6 Use case Manage Profile 51
Bảng 2 7 Use case Compare products 52
Bảng 2 9 Use case Add To Wish List 54
Bảng 2 10 Use case Create Order 55
Bảng 2 11 Use case Apply Coupon 55
Bảng 2 13 Use case Send Enquiry 57
Bảng 2 14 Use case Product Add To Cart 57
Bảng 2 15 Use case Get Cart 58
Bảng 2 16 Use case View Product 59
Bảng 2 17 Use case View All Products 59
Bảng 2 18 Use case Manage Product 60
Bảng 2 19 Use case Create Product 60
Bảng 2 20 Use case Update Product 61
Bảng 2 21 Use case Delete Product 61
Bảng 2 22 Use case Manage Brand 62
Bảng 2 23 Use case Create Brand 62
Bảng 2 24 Use case Update Brand 63
Bảng 2 25 Use case Delete Brand 64
Bảng 2 26 Use case Manage Category 64
Bảng 2 27 Use case Create Category 65
Bảng 2 28 Use case Update Category 65
Bảng 2 29 Use case Delete Category 66
Bảng 2 30 Use case Manage User 66
Bảng 2 31 Use case Update User 67
Bảng 2 32 Use case Block User 68
Bảng 2 33 Use case Update Order Status 68
Bảng 2 34 Use case View Statistics 69
Bảng 3 1 Bảng chi tiết màn hình trang chủ 96
Bảng 3 2 Bảng chi tiết màn hình trang đăng nhập 97
Bảng 3 3 Bảng chi tiết màn hình trang đăng ký 98
Bảng 3 4 Bảng chi tiết màn hình trang Our Store 98
Bảng 3 5 Bảng chi tiết màn hình trang Giỏ hàng 99
Bảng 3 6 Bảng chi tiết màn hình trang Thanh toán 100
Bảng 3 7 Bảng chi tiết màn hình danh sách mã giảm giá 101
Bảng 3 8 Bảng chi tiết màn hình trang Đơn hàng của tôi 102
Bảng 3 9 Bảng chi tiết trang Contact Us 102
Bảng 3 10 Bảng chi tiết trang Chi tiết sản phẩm 104
Bảng 3 11 Bảng chi tiết trang Đăng nhập Admin 105
Bảng 3 12 Bảng chi tiết trang Thống kê 106
Bảng 3 13 Bảng chi tiết thanh bên 107
Bảng 3 14 Bảng chi tiết trang quản lý người dùng 108
Bảng 3 15 Bảng chi tiết cửa sổ chỉnh sửa thông tin 109
Bảng 3 16 Bảng chi tiết trang thêm sản phẩm 110
Bảng 3 17 Bảng chi tiết trang quản lý sản phẩm 110
Bảng 3 18 Giao diện trang chỉnh sửa sản phẩm 111
Bảng 3 19 Bảng chi tiết trang quản lý đơn hàng 112
Bảng 3 20 Bảng chi tiết trang chi tiết đơn hàng 113
Bảng 3 21 Bảng chi tiết trang quản lý phản hồi 113
Bảng 3 22 Bảng chi tiết trang chat với người dùng 114
Bảng 4 3 Testcase Quên mật khẩu 119
Bảng 4 4 Testcase tìm kiếm sản phẩm 119
Bảng 4 5 Testcase thêm sản phẩm vào giỏ hàng 120
Bảng 4 6 Testcase chức năng đánh giá sản phẩm 120
Bảng 4 7 Testcase thêm sản phẩm yêu thích 121
Bảng 4 8 Testcase Xem lịch sử các đơn hàng đã đặt 121
Bảng 4 9 Testcase Cập nhập thông tin cá nhân 122
Bảng 4 10 Testcase Trang hiển thị sản phẩm 122
Bảng 4 11 Testcase Trang hiển thị các blogs 122
Bảng 4 12 Testcase Trang thu nhập ý kiến của người dùng 123
Bảng 4 13 Testcase chức năng đặt hàng 124
Bảng 4 14 Testcase chức năng so sánh sản phẩm 124
Bảng 4 15 Testcase chức năng áp dụng mã giảm giá 125
Bảng 4 16 Testcase quản lý thông tin sản phẩm 128
Bảng 4 17 Testcase quản lí thông tin người dùng 129
Bảng 4 18 Testcase quản lý các brands 130
Bảng 4 19 Testcase quản lý category 131
Bảng 4 20 Testcase quản lý đơn hàng 132
Bảng 4 21 Testcase quản lý mã giảm giá 133
Bảng 4 22 Testcase quản lý Blogs 135
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Trong thời đại hiện nay, cuộc cách mạng công nghiệp 4.0 đang phát triển mạnh mẽ, và công nghệ thông tin ngày càng phục vụ nhu cầu của con người trong mọi lĩnh vực của đời sống và xã hội Các công việc trước đây phải làm trên giấy tờ dần dần được thay thế bởi các phần mềm và các website, giúp việc sử dụng dễ dàng hơn cho người dùng và quản lý thuận tiện hơn Với sự phát triển của Internet, người dùng có thể truy cập vào website để thực hiện các công việc khác nhau mọi lúc, mọi nơi mà không cần phải đến tận nơi để đăng ký, giao dịch, hoặc mua hàng Việc tạo ra một website để phục vụ và đáp ứng nhu cầu của con người trở nên vô cùng cần thiết, giúp nhanh chóng, thuận tiện và dễ dàng hơn, đồng thời tiết kiệm thời gian và công sức trong thời đại công nghệ số Ngoài ra, sự kiện bùng nổ trí tuệ nhân tạo (AI) và ứng dụng rộng rãi của nó trong cuộc sống hàng ngày đã làm cho Công nghệ 4.0 phát triển một cách vượt bậc AI đã giúp chúng ta tiếp cận thông tin thông qua Internet nhanh chóng và hiệu quả hơn nhiều so với cách tiếp cận truyền thống Ngày nay, chỉ cần ngồi ở nhà, chúng ta cũng có thể tiếp cận được những thông tin mới mà mình quan tâm mà không cần phải đến tận nơi Hiện nay, mọi nhu cầu về dịch vụ và thương mại mà trước đây chỉ có thể giao dịch bằng tay, yêu cầu người dùng phải đến tận nơi để giao dịch hoặc mua sắm, đã được đơn giản hóa Ví dụ, việc mua sắm đồ công nghệ, người dùng không cần phải đến cửa hàng để lựa chọn sản phẩm, đối mặt với việc sản phẩm hết hàng Thay vào đó, tất cả những gì cần làm chỉ là vài thao tác kích chuột
Sự bùng nổ của Công nghệ 4.0 và những lý do nêu trên đã thôi thúc nhóm chúng em chọn đề tài: “Xây dựng website bán thiết bị di động” nhằm đáp ứng nhu cầu và mang lại sự thuận tiện cho mọi người Website này sẽ giúp mọi người dễ dàng mua sắm thiết bị di động, tiết kiệm thời gian và công sức, đồng thời trải nghiệm sự tiện lợi của công nghệ hiện đại
2 ĐỐI TƯỢNG NGHIÊN CỨU Đối với đề tài “Website xây dựng trang web bán thiết bị điện thoại sử dụng công nghệ Node.js và React.js”, đối tượng nghiên cứu dựa trên những nhu cầu tìm kiếm của người
19 dùng về thiết bị di động trực tuyến Nghiên cứu này sẽ tập trung vào việc cung cấp cho khách hàng một trải nghiệm mua sắm thuận tiện, tương tác mượt mà và an toàn trên nền tảng trực tuyến Đồng thời kèm theo đó là các công nghệ áp dụng để tạo ra sản phẩm Cụ thể như sau:
- Áp dụng cơ sở dữ liệu MongoDB để lưu trữ dữ liệu, thông tin người dùng
- Nghiên cứu APIs xây dựng nên hệ thống các APIs hỗ trợ lấy dữ liệu một cách chính xác và nhanh chóng
- Redux: Sử dụng Redux trong React.js để quản lý trạng thái ứng dụng một cách hiệu quả và dễ dàng trong việc truyền dữ liệu giữa các thành phần.
- Về giao diện, nghiên cứu và sử dụng React JS và một số thư viện hỗ trợ cho React
JS để xây dựng và xử lý giao diện người dùng và hệ thống quản trị
- Về bảo mật hệ thống, sử dụng Json Web Token để xác thực tài khoản đăng nhập
3 PHẠM VI NGHIÊN CỨU Đề tài "Xây dựng Website bán thiết bị di động sử dụng công nghệ Node.js và React.js" tập trung vào việc tạo ra một nền tảng thương mại điện tử phục vụ ngành công nghiệp đồ công nghệ di động hiện đại để người dùng có thể tương tác mượt mà và có được trải nghiệm tuyệt vời Cùng với đó, dự án tập trung vào các khía cạnh sau:
− Trải nghiệm người dùng: Tạo ra giao diện thân thiện, dễ sử dụng để người dùng có thể tìm kiếm, duyệt và mua các sản phẩm dễ dàng.
− Hiệu suất và tích hợp công nghệ: Nghiên cứu về việc tích hợp Node.js và React.js để tối ưu hóa hiệu suất trang web, đảm bảo trải nghiệm mượt mà và nhanh chóng.
− Quản lý sản phẩm và đơn hàng: Tạo các tính năng quản lý sản phẩm, lịch sử đơn hàng, giúp người quản trị có thể dễ dàng cập nhật và quản lý thông tin.
− Bảo mật và thanh toán: Đảm bảo an toàn thông tin cá nhân, thực hiện tính năng thanh toán an toàn và tiện lợi cho người dùng Website được chia thành 2 phần là phần Quản trị và phần Người dùng
Chức năng chính như sau:
Trong phần Quản trị bao gồm các nghiệp vụ chính như:
- Quản lý sản phẩm và loại sản phẩm
- Quản lý mã giảm giá
- Quản lý người dùng và tài khoản
- Thống kê và báo cáo doanh thu
Trong phần Người dùng bao gồm các nghiệp vụ chính như:
- Đăng ký/ Đăng nhập/ Quên mật khẩu
- Xem danh sách sản phẩm và đặt hàng
- Thanh toán và theo dõi đơn hàng
- Chỉnh sửa thông tin cá nhân
4 MỤC TIÊU CỦA ĐỀ TÀI
Về phía người dùng xây dựng được một website đặt thiết bị di động nhanh và tiện lợi với các tính năng cơ bản về đặt hàng, thanh toán và các hỗ trợ khác cho người dùng, chat với người bán, đánh giá sản phẩm
Về phía quản trị xây dựng được nơi quản lý, theo dõi các tài nguyên, dữ liệu của hệ thống: như thống kê, quản lý tài khoản, quản lý sản phẩm, quản lý loại sản phẩm, quản lý tài khoản người dùng, chat với người mua.
5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
Mục đích đề tài nhằm tạo ra một môi trường trải nghiệm tốt nhất cho khách hàng tập trung vào việc tạo ra một trang web bán hàng có thể đáp ứng nhu cầu và mang lại trải nghiệm mua sắm trực tuyến vượt trội và hiệu quả cho người dùng Là nơi để người dùng đặt hàng và chọn lọc sản phẩm theo nhu cầu cá nhân Từ đó cải thiện và nâng cao tính linh hoạt cũng như hiệu suất của hệ thống
PHẦN NỘI DUNG CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 1.1 Kiến trúc thành phần ứng dụng
Hình 1 1 Kiến trúc thành phần ứng dụng Ứng dụng gồm hai thành phần chính:
− Front-end: sử dụng công nghệ ReactJS với ngôn ngữ Javascript, sử dụng khái niệm Virtual DOM, nơi các thành phần (component) tồn tại giúp cải thiện hiệu suất ứng dụng Sử dụng cú pháp JSX cho phép viết HTML ngay trên file javascript, giúp viết code dễ hiểu và dễ dàng hơn React giúp tách các thành phần phức tạp của một trang web thành nhiều thành phần nhỏ hơn, chia nhỏ cấu trúc UX/UI phức tạp thành từng component đơn giản hơn Ngoài ra, ReactJS hiệu năng cao với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng bảo trì, nâng cấp và sữa lỗi
− Back-end: sử dụng công nghệ NodeJS kết hợp với ExpressJS framework, với sự hỗ trợ các phương thức HTTP và các middleware tạo ra các Rest API nhanh chóng, mạnh mẽ, dễ sử dụng và có khả năng tái sử dụng.Ở phía cơ sở dữ liệu, đồ án sử dụng MongoDB bởi cấu trúc linh hoạt, tốc độ ghi và cập nhật nhanh, tiện lợi cũng như dữ liệu dễ nhìn và trực quan hơn Ngoài ra, để phục vụ cho chức năng upload ảnh, đồ án sử dụng Cloudinary giúp việc lưu ảnh nhanh chóng, có thể đồng bộ trực tiếp với website và kết hợp với Google API/OAuth2Client để gửi thực hiện các tác vụ liên quan đến việc gửi email cho người dùng (quên mật khẩu,…)
CÀI ĐẶT VÀ KIỂM THỬ
KIỂM THỬ
STT Thời gian Công việc Ghi chú
Họp bàn lên ý tưởng và hướng phát triển Phân tích chọn công nghệ sử dụng Thực hiện khảo sát hiện trạng Lên ý tưởng và thiết kế cơ sở dữ liệu
Tìm hiểu công nghệ Reactjs và Nodejs Thiết giao diện trang người dùng và một số chức năng cơ bản
Thiết kế use case và đặc tả
Tìm hiểu công nghệ Reactjs và Nodejs Thiết kế giao diện cho quản trị viên và một số chức năng cơ bản
Kết nối Front end và back end lại với nhau Debug và sửa lỗi
Thiết kế giao diện và các chức năng phát triển mới trong dự án
Tìm hiểu tích hợp hệ thống Vnpay và chat bot thông qua Dialogflow
Thống nhất thêm và chỉnh sửa dữ liệu sản phẩm Triển khai hoàn thành các chức năng
Chỉnh sửa các mô hình hóa và sơ đồ của đề tài Viết và chỉnh sử báo cáo
Hoàn thiện cuốn báo cáo Kiểm tra các module của hệ thống Thực hiện việc deploy trang web của mình Kiểm tra các tính tính và sửa lỗi
Ngày tháng năm 2024 Ý kiến của giảng viên hướng dẫn
(ký và ghi rõ họ tên)
LỜI CẢM ƠN 5 ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP 6
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 18
4 MỤC TIÊU CỦA ĐỀ TÀI 20
5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 20
CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 21
1.1 Kiến trúc thành phần ứng dụng 21
1.2.2 Một số khái niệm liên quan đến React JS 22
CHƯƠNG 2 KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 38
2.2.2 Yêu cầu phi chức năng 41
2.3 MÔ HÌNH HÓA YÊU CẦU 42
2.3.2 Mô tả sơ đồ Use case 44
CHƯƠNG 3 THIẾT KẾ PHẦN MỀM 70
3.3.1 Giao diện khách và người dùng 94
3.3.2 Giao diện quản trị viên 105
CHƯƠNG 4 CÀI ĐẶT VÀ KIỂM THỬ 115
1.1 Kiến thức tìm hiểu được 136
Hình 1 1 Kiến trúc thành phần ứng dụng 21
Hình 1 2 Component trong React JS 23
Hình 1 3 Cú pháp props trong Class Component và Function Component 24
Hình 1 5 Đoạn code get Axios 26
Hình 1 6 Axios GET lấy thông tin user 27
Hình 1 7 Axios Post tạo sản phẩm 27
Hình 1 8 Axios PUT cập nhật sản phẩm 28
Hình 1 10 Axios PUT xóa sản phẩm 28
Hình 1 12 Cấu trúc thư mục configs 30
Hình 1 13 Cấu trúc thư mục middleware 30
Hình 1 14 Cấu trúc thư mục models 30
Hình 1 15 Cấu trúc thư mục node_modules 31
Hình 1 16 Cấu trúc thư mục routes 31
Hình 1 17 Cấu trúc thư mục utils 31
Hình 1 21 File package-lock.json 32
Hình 1 23 Cấu hình kết nối database 34
Hình 1 25 Dữ liệu được ánh xạ từ ứng dụng vào mongoDB 35
Hình 2 1 Giao diện trang Cellphone S 38
Hình 2 2 Giao diện thế giới di động 39
Hình 2 3 Giao diện trang Fpt 40
Hình 2 4 Use case Người dùng 42
Hình 2 5 Use case Quản trị viên 43
Hình 3 2 Lược đồ tuần tự "Register" 71
Hình 3 3 Lược đồ tuần tự "Logout" 72
Hình 3 4 Lược đồ tuần tự "Login" 72
Hình 3 5 Lược đồ tuần tự "Forgot Password" 73
Hình 3 6 Lược đồ tuần tự "Update Profile" 74
Hình 3 7 Lược đồ tuần tự "Add to wish list" 74
Hình 3 8 Lược đồ tuần tự "Create Order" 75
Hình 3 9 Lược đồ tuần tự Apply Coupon 75
Hình 3 10 Lược đồ tuần tự "Rating" 76
Hình 3 11 Lược đồ tuần tự "Add Product to cart" 76
Hình 3 12 Lược đồ tuần tự "Manage Cart" 77
Hình 3 13 Lược đồ tuần tự "Delete product to cart" 77
Hình 3 14 Lược đồ tuần tự "Update product to cart" 78
Hình 3 15 Lược đồ tuần tự "View product" 78
Hình 3 16 Lược đồ tuần tự "View All Products" 79
Hình 3 17 Lược đồ tuần tự "Manage Product " 79
Hình 3 18 Lược đồ tuần tự "Create Product" 80
Hình 3 19 Lược đồ tuần tự"Update product" 80
Hình 3 20 Lược đồ tuần tự "Delete product" 81
Hình 3 21 Lược đồ tuần tự "Manage Brand" 81
Hình 3 22 Lược đồ tuần tự "Create Brand" 82
Hình 3 23 Lược đồ tuần tự "Update Brand" 82
Hình 3 24 Lược đồ tuần tự "Delete Brand" 83
Hình 3 25 Lược đồ tuần tự "Manage Category" 83
Hình 3 26 Lược đồ tuần tự "Create Category" 84
Hình 3 27 Lược đồ tuần tự "Upadate Category" 84
Hình 3 28 Lược đồ tuần tự "Delete Category" 85
Hình 3 29 Lược đồ tuần tự "Manage Coupon" 85
Hình 3 30 Lược đồ tuần tự "Create Coupon" 86
Hình 3 31 Lược đồ tuần tự "Update Coupon" 86
Hình 3 32 Lược đồ tuần tự "Delete Coupon" 87
Hình 3 33 Lược đồ tuần tự "Manage User" 87
Hình 3 34 Lược đồ tuần tự "Update user information and status" 88
Hình 3 35 Lược đồ tuần tự "Manage enquiry" 88
Hình 3 36 Lược đồ tuần tự "Update Enquiry" 89
Hình 3 37 Lược đồ tuần tự "Delete Enquiry" 89
Hình 3 38 Lược đồ tuần tự "Update Order Status" 90
Hình 3 39 Lược đồ tuần tự "Manage Color" 90
Hình 3 40 Lược đồ tuần tự "Create Color" 91
Hình 3 41 Lược đồ tuần tự "Update Color" 91
Hình 3 42 Lược đồ tuần tự "Delete Color" 92
Hình 3 43 Lược đồ tuần tự "Manage Blogs" 92
Hình 3 44 Lược đồ tuần tự "Create Blog" 92
Hình 3 45 Lược đồ tuần tự "Update Blog" 93
Hình 3 46 Lược đồ tuần tự "Delete Blog" 93
Hình 3 47 Giao diện trang chủ (1) 94
Hình 3 48 Giao diện trang chủ (2) 95
Hình 3 49 Giao diện trang đăng nhập 96
Hình 3 50 Giao diện trang đăng ký 97
Hình 3 51 Giao diện trang Our store 98
Hình 3 52 Giao diện trang Giỏ hàng 99
Hình 3 53 Giao diện trang Thanh toán 99
Hình 3 54 Giao diện danh sách mã giảm giá 101
Hình 3 55 Giao diện trang “Đơn hàng của tôi” 101
Hình 3 56 Giao diện trang Contact Us 102
Hình 3 57 Giao diện trang chi tiết sản phẩm 103
Hình 3 58 Giao diện trang đăng nhập admin 105
Hình 3 59 Giao diện trang thống kê 105
Hình 3 60 Giao diện thanh bên admin 106
Hình 3 61 Giao diện trang quản lý người dùng 108
Hình 3 62 Giao diện cửa sổ chỉnh sửa thông tin 108
Hình 3 63 Giao diện trang thêm sản phẩm 109
Hình 3 64 Giao diện trang quản lý sản phẩm 110
Hình 3 65 Giao diện chỉnh sửa sản phẩm 111
Hình 3 66 Giao diện trang quản lý đơn hàng 112
Hình 3 67 Giao diện trang chi tiết đơn hàng 112
Hình 3 68 Giao diện trang quản lý phản hồi người dùng 113
Hình 3 69 Giao diện chat với người dùng 113
Bảng 1 1 Cấu trúc phần Backend 32
Bảng 2 1 Mô tả sơ đồ Use case 47
Bảng 2 5 Use case Forgot Password (UC_04) 51
Bảng 2 6 Use case Manage Profile 51
Bảng 2 7 Use case Compare products 52
Bảng 2 9 Use case Add To Wish List 54
Bảng 2 10 Use case Create Order 55
Bảng 2 11 Use case Apply Coupon 55
Bảng 2 13 Use case Send Enquiry 57
Bảng 2 14 Use case Product Add To Cart 57
Bảng 2 15 Use case Get Cart 58
Bảng 2 16 Use case View Product 59
Bảng 2 17 Use case View All Products 59
Bảng 2 18 Use case Manage Product 60
Bảng 2 19 Use case Create Product 60
Bảng 2 20 Use case Update Product 61
Bảng 2 21 Use case Delete Product 61
Bảng 2 22 Use case Manage Brand 62
Bảng 2 23 Use case Create Brand 62
Bảng 2 24 Use case Update Brand 63
Bảng 2 25 Use case Delete Brand 64
Bảng 2 26 Use case Manage Category 64
Bảng 2 27 Use case Create Category 65
Bảng 2 28 Use case Update Category 65
Bảng 2 29 Use case Delete Category 66
Bảng 2 30 Use case Manage User 66
Bảng 2 31 Use case Update User 67
Bảng 2 32 Use case Block User 68
Bảng 2 33 Use case Update Order Status 68
Bảng 2 34 Use case View Statistics 69
Bảng 3 1 Bảng chi tiết màn hình trang chủ 96
Bảng 3 2 Bảng chi tiết màn hình trang đăng nhập 97
Bảng 3 3 Bảng chi tiết màn hình trang đăng ký 98
Bảng 3 4 Bảng chi tiết màn hình trang Our Store 98
Bảng 3 5 Bảng chi tiết màn hình trang Giỏ hàng 99
Bảng 3 6 Bảng chi tiết màn hình trang Thanh toán 100
Bảng 3 7 Bảng chi tiết màn hình danh sách mã giảm giá 101
Bảng 3 8 Bảng chi tiết màn hình trang Đơn hàng của tôi 102
Bảng 3 9 Bảng chi tiết trang Contact Us 102
Bảng 3 10 Bảng chi tiết trang Chi tiết sản phẩm 104
Bảng 3 11 Bảng chi tiết trang Đăng nhập Admin 105
Bảng 3 12 Bảng chi tiết trang Thống kê 106
Bảng 3 13 Bảng chi tiết thanh bên 107
Bảng 3 14 Bảng chi tiết trang quản lý người dùng 108
Bảng 3 15 Bảng chi tiết cửa sổ chỉnh sửa thông tin 109
Bảng 3 16 Bảng chi tiết trang thêm sản phẩm 110
Bảng 3 17 Bảng chi tiết trang quản lý sản phẩm 110
Bảng 3 18 Giao diện trang chỉnh sửa sản phẩm 111
Bảng 3 19 Bảng chi tiết trang quản lý đơn hàng 112
Bảng 3 20 Bảng chi tiết trang chi tiết đơn hàng 113
Bảng 3 21 Bảng chi tiết trang quản lý phản hồi 113
Bảng 3 22 Bảng chi tiết trang chat với người dùng 114
Bảng 4 3 Testcase Quên mật khẩu 119
Bảng 4 4 Testcase tìm kiếm sản phẩm 119
Bảng 4 5 Testcase thêm sản phẩm vào giỏ hàng 120
Bảng 4 6 Testcase chức năng đánh giá sản phẩm 120
Bảng 4 7 Testcase thêm sản phẩm yêu thích 121
Bảng 4 8 Testcase Xem lịch sử các đơn hàng đã đặt 121
Bảng 4 9 Testcase Cập nhập thông tin cá nhân 122
Bảng 4 10 Testcase Trang hiển thị sản phẩm 122
Bảng 4 11 Testcase Trang hiển thị các blogs 122
Bảng 4 12 Testcase Trang thu nhập ý kiến của người dùng 123
Bảng 4 13 Testcase chức năng đặt hàng 124
Bảng 4 14 Testcase chức năng so sánh sản phẩm 124
Bảng 4 15 Testcase chức năng áp dụng mã giảm giá 125
Bảng 4 16 Testcase quản lý thông tin sản phẩm 128
Bảng 4 17 Testcase quản lí thông tin người dùng 129
Bảng 4 18 Testcase quản lý các brands 130
Bảng 4 19 Testcase quản lý category 131
Bảng 4 20 Testcase quản lý đơn hàng 132
Bảng 4 21 Testcase quản lý mã giảm giá 133
Bảng 4 22 Testcase quản lý Blogs 135
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Trong thời đại hiện nay, cuộc cách mạng công nghiệp 4.0 đang phát triển mạnh mẽ, và công nghệ thông tin ngày càng phục vụ nhu cầu của con người trong mọi lĩnh vực của đời sống và xã hội Các công việc trước đây phải làm trên giấy tờ dần dần được thay thế bởi các phần mềm và các website, giúp việc sử dụng dễ dàng hơn cho người dùng và quản lý thuận tiện hơn Với sự phát triển của Internet, người dùng có thể truy cập vào website để thực hiện các công việc khác nhau mọi lúc, mọi nơi mà không cần phải đến tận nơi để đăng ký, giao dịch, hoặc mua hàng Việc tạo ra một website để phục vụ và đáp ứng nhu cầu của con người trở nên vô cùng cần thiết, giúp nhanh chóng, thuận tiện và dễ dàng hơn, đồng thời tiết kiệm thời gian và công sức trong thời đại công nghệ số Ngoài ra, sự kiện bùng nổ trí tuệ nhân tạo (AI) và ứng dụng rộng rãi của nó trong cuộc sống hàng ngày đã làm cho Công nghệ 4.0 phát triển một cách vượt bậc AI đã giúp chúng ta tiếp cận thông tin thông qua Internet nhanh chóng và hiệu quả hơn nhiều so với cách tiếp cận truyền thống Ngày nay, chỉ cần ngồi ở nhà, chúng ta cũng có thể tiếp cận được những thông tin mới mà mình quan tâm mà không cần phải đến tận nơi Hiện nay, mọi nhu cầu về dịch vụ và thương mại mà trước đây chỉ có thể giao dịch bằng tay, yêu cầu người dùng phải đến tận nơi để giao dịch hoặc mua sắm, đã được đơn giản hóa Ví dụ, việc mua sắm đồ công nghệ, người dùng không cần phải đến cửa hàng để lựa chọn sản phẩm, đối mặt với việc sản phẩm hết hàng Thay vào đó, tất cả những gì cần làm chỉ là vài thao tác kích chuột
Sự bùng nổ của Công nghệ 4.0 và những lý do nêu trên đã thôi thúc nhóm chúng em chọn đề tài: “Xây dựng website bán thiết bị di động” nhằm đáp ứng nhu cầu và mang lại sự thuận tiện cho mọi người Website này sẽ giúp mọi người dễ dàng mua sắm thiết bị di động, tiết kiệm thời gian và công sức, đồng thời trải nghiệm sự tiện lợi của công nghệ hiện đại
2 ĐỐI TƯỢNG NGHIÊN CỨU Đối với đề tài “Website xây dựng trang web bán thiết bị điện thoại sử dụng công nghệ Node.js và React.js”, đối tượng nghiên cứu dựa trên những nhu cầu tìm kiếm của người
19 dùng về thiết bị di động trực tuyến Nghiên cứu này sẽ tập trung vào việc cung cấp cho khách hàng một trải nghiệm mua sắm thuận tiện, tương tác mượt mà và an toàn trên nền tảng trực tuyến Đồng thời kèm theo đó là các công nghệ áp dụng để tạo ra sản phẩm Cụ thể như sau:
- Áp dụng cơ sở dữ liệu MongoDB để lưu trữ dữ liệu, thông tin người dùng
- Nghiên cứu APIs xây dựng nên hệ thống các APIs hỗ trợ lấy dữ liệu một cách chính xác và nhanh chóng
- Redux: Sử dụng Redux trong React.js để quản lý trạng thái ứng dụng một cách hiệu quả và dễ dàng trong việc truyền dữ liệu giữa các thành phần.
- Về giao diện, nghiên cứu và sử dụng React JS và một số thư viện hỗ trợ cho React
JS để xây dựng và xử lý giao diện người dùng và hệ thống quản trị
- Về bảo mật hệ thống, sử dụng Json Web Token để xác thực tài khoản đăng nhập
3 PHẠM VI NGHIÊN CỨU Đề tài "Xây dựng Website bán thiết bị di động sử dụng công nghệ Node.js và React.js" tập trung vào việc tạo ra một nền tảng thương mại điện tử phục vụ ngành công nghiệp đồ công nghệ di động hiện đại để người dùng có thể tương tác mượt mà và có được trải nghiệm tuyệt vời Cùng với đó, dự án tập trung vào các khía cạnh sau:
− Trải nghiệm người dùng: Tạo ra giao diện thân thiện, dễ sử dụng để người dùng có thể tìm kiếm, duyệt và mua các sản phẩm dễ dàng.
− Hiệu suất và tích hợp công nghệ: Nghiên cứu về việc tích hợp Node.js và React.js để tối ưu hóa hiệu suất trang web, đảm bảo trải nghiệm mượt mà và nhanh chóng.
− Quản lý sản phẩm và đơn hàng: Tạo các tính năng quản lý sản phẩm, lịch sử đơn hàng, giúp người quản trị có thể dễ dàng cập nhật và quản lý thông tin.
− Bảo mật và thanh toán: Đảm bảo an toàn thông tin cá nhân, thực hiện tính năng thanh toán an toàn và tiện lợi cho người dùng Website được chia thành 2 phần là phần Quản trị và phần Người dùng
Chức năng chính như sau:
Trong phần Quản trị bao gồm các nghiệp vụ chính như:
- Quản lý sản phẩm và loại sản phẩm
- Quản lý mã giảm giá
- Quản lý người dùng và tài khoản
- Thống kê và báo cáo doanh thu
Trong phần Người dùng bao gồm các nghiệp vụ chính như:
- Đăng ký/ Đăng nhập/ Quên mật khẩu
- Xem danh sách sản phẩm và đặt hàng
- Thanh toán và theo dõi đơn hàng
- Chỉnh sửa thông tin cá nhân
4 MỤC TIÊU CỦA ĐỀ TÀI
Về phía người dùng xây dựng được một website đặt thiết bị di động nhanh và tiện lợi với các tính năng cơ bản về đặt hàng, thanh toán và các hỗ trợ khác cho người dùng, chat với người bán, đánh giá sản phẩm
Về phía quản trị xây dựng được nơi quản lý, theo dõi các tài nguyên, dữ liệu của hệ thống: như thống kê, quản lý tài khoản, quản lý sản phẩm, quản lý loại sản phẩm, quản lý tài khoản người dùng, chat với người mua.
5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
Mục đích đề tài nhằm tạo ra một môi trường trải nghiệm tốt nhất cho khách hàng tập trung vào việc tạo ra một trang web bán hàng có thể đáp ứng nhu cầu và mang lại trải nghiệm mua sắm trực tuyến vượt trội và hiệu quả cho người dùng Là nơi để người dùng đặt hàng và chọn lọc sản phẩm theo nhu cầu cá nhân Từ đó cải thiện và nâng cao tính linh hoạt cũng như hiệu suất của hệ thống
PHẦN NỘI DUNG CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 1.1 Kiến trúc thành phần ứng dụng
Hình 1 1 Kiến trúc thành phần ứng dụng Ứng dụng gồm hai thành phần chính:
− Front-end: sử dụng công nghệ ReactJS với ngôn ngữ Javascript, sử dụng khái niệm Virtual DOM, nơi các thành phần (component) tồn tại giúp cải thiện hiệu suất ứng dụng Sử dụng cú pháp JSX cho phép viết HTML ngay trên file javascript, giúp viết code dễ hiểu và dễ dàng hơn React giúp tách các thành phần phức tạp của một trang web thành nhiều thành phần nhỏ hơn, chia nhỏ cấu trúc UX/UI phức tạp thành từng component đơn giản hơn Ngoài ra, ReactJS hiệu năng cao với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng bảo trì, nâng cấp và sữa lỗi
− Back-end: sử dụng công nghệ NodeJS kết hợp với ExpressJS framework, với sự hỗ trợ các phương thức HTTP và các middleware tạo ra các Rest API nhanh chóng, mạnh mẽ, dễ sử dụng và có khả năng tái sử dụng.Ở phía cơ sở dữ liệu, đồ án sử dụng MongoDB bởi cấu trúc linh hoạt, tốc độ ghi và cập nhật nhanh, tiện lợi cũng như dữ liệu dễ nhìn và trực quan hơn Ngoài ra, để phục vụ cho chức năng upload ảnh, đồ án sử dụng Cloudinary giúp việc lưu ảnh nhanh chóng, có thể đồng bộ trực tiếp với website và kết hợp với Google API/OAuth2Client để gửi thực hiện các tác vụ liên quan đến việc gửi email cho người dùng (quên mật khẩu,…)
KẾT QUẢ LÀM ĐƯỢC
1.1 Kiến thức tìm hiểu được Ứng dụng được các kiến thức đã được học, tìm hiểu cũng như áp dụng ReactJs vào phát triển những vấn đề liên quan trong việc xây dựng Web API Sử dụng Json Web Token để bảo mật và phân quyền cho các API của hệ thống
Tìm hiểu, ứng dụng được framework phổ biến và tiện lợi là ReactJS để xây dựng giao diện cho đề tài
Xây dựng hoàn chỉnh trang web với những chức năng đã được đề ra:
- Xây dựng cho người dùng những chức năng cần có của một trang web đặt hàng, cho phép người dùng đăng ký tạo tài khoản, đăng nhập, đăng xuất, thay đổi mật khẩu, đặt hàng, thêm hàng vào giỏ hàng, xem danh sách giỏ hàng, chi tiết sản phẩm, quản lý đơn hàng, thêm/xoá/sửa các đơn hàng, sản phẩm, thông tin người dùng…
- Xây dựng cho admin quản lý cũng như thống kê được những mục cần thiết của hệ thống
- Áp dụng được các công nghệ mới và đang được sử dụng khá nhiều vào đề tài của nhóm.
ƯU ĐIỂM
Sau quá trình học hỏi, nghiên cứu và hoàn thiện website, nhóm chúng em xin nhận xét các ưu điểm có thể thấy được trong đề tài của mình cụ thể là:
- Trang web hoạt suôn sẻ và chính xác, không xảy ra lỗi hay xung đột giữa các module trong hệ thống
- Đáp ứng được các tính năng của một trang web bán thiết bị di động
- Chia hệ thống thành front-end và back-end, các module cũng được xây dựng cách tách biệt bằng các APIs tương ứng, đảm bảo luồng hoạt động chính xác giúp dễ dàng quản lý và phát triển về sau
- Phần front-end sử dụng ReactJS một framework mới, khá phổ biến và phát triển để xây dựng phần giao diện giúp việc bảo trì, nâng cấp và phát triển trở nên dễ dàng
- Giao diện dễ nhìn, dễ sử dụng với người dùng
NHƯỢC ĐIỂM
Do hạn chế về mặt con người, thời gian cũng như kinh nghiệm nên website cũng có một số điểm chưa hoàn hảo cần chỉnh sửa và cải tiến như sau:
- Các chức năng còn khá đơn giản và cơ bản
- Giao diện vẫn chưa tối ưu hóa được
- Chưa hỗ trợ trên các thiết bị mobile.
HƯỚNG PHÁT TRIỂN
Trong thời sắp tới nhóm sẽ cố gắng tiếp tục tối ưu và nâng cấp trang web hơn với hướng phát triển như sau:
- Đăng nhập và đăng ký tài khoản qua các trang mạng xã hội
- Tìm kiếm sản phẩm có sự hỗ trợ AI
- Xây dựng thêm hệ thống đặt hàng trên mobile
