Thực hành: - Sử dụng RESTful API để xây dựng hệ thống - Xây dụng backend, frontend bằng NextJS - Sử dụng Cloudinary để lưu trữ image - Sử dụng ClerkJS để đăng nhập và xác thực user - Sử
MỤC TIÊU CỦA ĐỀ TÀI
Chương 2: XÁC ĐỊNH VÀ MÔ HÌNH HÓA YÊU CẦU
2.3 Mô hình hóa yêu cầu
2.4 Đặc tả Usecase cho 1 số Usecase chính
Chương 3: THIẾT KẾ HỆ THỐNG
3.1 Thiết kế cơ sở dữ liệu
3.2 Đặc tẳ cơ sở dữ liệu
Chương 4: CÀI ĐẶT VÀ KIỂM THỬ
1, 2 04/03 - 17/03 Tham khảo một số website bán hàng
Thiết kế cơ sở dữ liệu cho website Thiết kế usecase
3, 4 18/03 - 31/03 Tìm hiểu về các kiến thức liên quan như: MySQL,
NextJS, ClerkJS, Cloudinary, Prisma, Stripe.
5, 6 01/04 - 14/04 Xây dựng giao diện để có cái nhìn tổng quát về website bán hàng Ecommerce
7, 8 15/04 - 28/04 Xây dựng API theo usecase
Tìm hiểu các dịch vụ thanh toán khác như zalopay, vnpay
Xây dựng thêm một số chức năng cho website như: mã giảm giá, đa ngôn ngữ
Tìm hiểu về cách xây dựng và tích hợp chatbot cho website
Tìm và sửa lỗi hệ thống 13,
14, 15 27/05 - 15/06 Viết báo cáo và hoàn thiện website
Tp Hồ Chí Minh, ngày … tháng… năm 2024
(Ký và ghi rõ họ tên)
(Ký và ghi rõ họ tên)
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1
4 MỤC TIÊU CỦA ĐỀ TÀI 3
5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 3
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 4
CHƯƠNG 2: XÁC ĐỊNH VÀ MÔ HÌNH HÓA YÊU CẦU 15
2.3 MÔ HÌNH HÓA YÊU CẦU 37
2.4 ĐẶC TẢ USECASE CHO 1 SỐ USECASE CHÍNH 38
CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 66
CHƯƠNG 4: CÀI ĐẶT VÀ THỬ NGHIỆM 123
Hình 2 SSR – Server-Side Rendering 5
Hình 7 Giao diện trang chủ Kingshoes 15
Hình 8 Giao diện trang danh sách sản phẩm 16
Hình 9 Giao diện trang chi tiêt sản phẩm 17
Hình 10 Giao diện trang giỏ hàng 18
Hình 11 Giao diện trang đặt hàng 19
Hình 12 Giao diện trang chủ RedRooterCoffee 20
Hình 13 Giao diện trang danh sách sản phẩm 21
Hình 14 Giao diện trang chi tiêt sản phẩm 21
Hình 15 Giao diện trang giỏ hàng 22
Hình 16 Giao diện trang đặt hàng 23
Hình 17 Giao diện trang chủ 25
Hình 18 Giao diện trang danh sách sản phẩm 25
Hình 19 Giao diện trang chi tiết sản phẩm 25
Hình 20 Giao diện trang giỏ hàng 26
Hình 21 Giao diện trang đặt hàng 27
Hình 22 Giao diện trang chủ 29
Hình 23 Giao diện trang danh sách sản phẩm – trang chủ 29
Hình 27 Giao diện trang đặt hàng 31
Hình 28 Giao diện trang hồ sơ cá nhân 32
Hình 29 Usecase Diagram – Module Management 38
Hình 30 Usecase Diagram – Module Management 38
Hình 31 UC Guest – Đăng ký 39
Hình 32 UC Guest – Đăng nhập – Quên mật khẩu 40
Hình 33 UC Guest – Tìm kiếm sản phẩm 42
Hình 34 UC Guest – Xem chi tiết sản phẩm 44
Hình 35 UC User – Thêm sản phẩm vào giỏ hàng 45
Hình 36 UC User – Quản lý giỏ hàng – Đặt hàng – Thanh toán 46
Hình 37 UC User – Đăng xuất 50
Hình 38 UC User – Quản lý đơn hàng 51
Hình 39 UC User – Quản lý hồ sơ cá nhân 53
Hình 40 UC Admin – Quản lý người dùng 57
Hình 41 UC Admin – Quản lý danh mục 59
Hình 42 UC Admin – Quản lý kho hàng 60
Hình 43 UC Admin – Quản lý thống kê 63
Hình 44 Lược đồ thực thể 66
Hình 45 Giao diện trang đăng ký 79
Hình 46 Giao diện trang Đăng nhập 80
Hình 48 Giao diện thanh Search sản phẩm 81
Hình 49 Giao diện trang kết quả tìm kiếm 82
Hình 50 Giao diện modal sản phẩm 83
Hình 51 Giao diện trang chi tiết sản phẩm – 1 84
Hình 55 Giao diện trang Thông tin cá nhân 88
Hình 56 Giao diện trang Quản lý đơn hàng 89
Hình 57 Giao diện trang Hoàn trả đơn hàng 90
Hình 58 Giao diện trang Sản phẩm yêu thích 91
Hình 59 Giao diện trang chủ - doanh thu 93
Hình 61 Giao diện trang quản lý người dùng 95
Hình 62 Giao diện trang chỉnh sửa người dùng 96
Hình 63 Giao diện trang quản lý danh mục 97
Hình 64 Giao diện trang thêm / cập nhật danh mục 98
Hình 65 Giao diện trang quản lý đơn hàng hoàn trả 98
Hình 66 Giao diện trang chỉnh sửa đơn hàng hoàn trả 99
Hình 67 Giao diện trang quản lý mã giảm giá 100
Hình 68 Giao diện trang thêm / cập nhật mã giảm giá 101
Hình 69 Giao diện trang quản lý sản phẩm 102
Hình 70 Giao diện trang thêm / cập nhật sản phẩm 103
Hình 71 Giao diện trang quản lý nhập hàng 104
Hình 72 Giao diện trang tạo mới đơn nhập hàng 104
Hình 73 Sequence Diagram -UC Guest – Đăng ký 106
Hình 74 Sequence Diagram – UC Guest – Đăng nhập 107
Hình 75 Sequence Diagram – UC Guest – Quên mật khẩu 108
Hình 76 Sequence Diagram – UC Guest – Tìm kiếm sản phẩm 109
Hình 77 Sequence Diagram – UC Guest – Xem chi tiết sản phẩm 109
Hình 78 Sequence Diagram – UC User – Thêm sản phẩm vào giỏ hàng 110
Hình 79 Sequence Diagram – UC User – Quản lý giỏ hàng 110
Hình 83 Sequence Diagram – UC User – Quản lý đơn hàng 113
Hình 84 Sequence Diagram – UC User – Hủy đơn hàng 113
Hình 85 Sequence Diagram – UC User – Theo dõi đơn hàng 114
Hình 86 Sequence Diagram – UC User – Đánh giá và bình luận 114
Hình 87 Sequence Diagram – UC User – Quản lý hồ sơ cá nhân 115
Hình 88 Sequence Diagram – UC User – OPT – Cập nhật địa chỉ giao hàng 115
Hình 89 Sequence Diagram – UC User – Cập nhật thông tin cá nhân 116
Hình 90 Sequence Diagram – UC Admin – Quản lý người dùng 117
Hình 91 Sequence Diagram – UC Admin – Quản lý danh mục 118
Hình 92 Sequence Diagram – UC Admin – Quản lý kho hàng – Thêm sản phẩm 119
Hình 93 Sequence Diagram – UC Admin – Quản lý kho hàng – Cập nhật sản phẩm 120
Hình 94 Sequence Diagram – UC Admin – Quản lý kho hàng – Ẩn / Hiện sản phẩm 121
Hình 95 Sequence Diagram – UC Admin – Quản lý thống kê – Doanh thu 121
Hình 96 Sequence Diagram – UC Admin – Quản lý thống kê – Người dùng 121
Hình 97 Sequence Diagram – UC Admin – Quản lý thống kê – Đơn hàng 122
Hình 98 Sequence Diagram – UC Admin – Quản lý thống kê – Kho hàng 122
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Trong thời đại số hiện nay, việc mua sắm online đã trở thành nhu cầu phổ biến, không chỉ với các dụng cụ hàng ngày mà còn với thời trang như quần áo, váy và giày dép Mô hình thương mại điện tử đang phát triển mạnh mẽ tại Việt Nam, giúp người tiêu dùng có nhiều lựa chọn và tiết kiệm thời gian mua sắm Do đó, sự ra đời của các website thương mại điện tử chuyên về giày dép là cần thiết để đáp ứng nhanh chóng và đa dạng nhu cầu thời trang của người tiêu dùng, đồng thời đảm bảo uy tín trong giao dịch.
Với sự phát triển vượt bậc của Công nghệ thông tin, việc xây dựng Website Thương mại điện tử trở nên khả thi hơn bao giờ hết Người tiêu dùng chỉ cần một chiếc máy tính hoặc smartphone kết nối internet để dễ dàng lựa chọn những đôi giày thời thượng phù hợp với nhu cầu cá nhân Kinh doanh trực tuyến không chỉ giúp cửa hàng quản lý hiệu quả mà còn bảo đảm thông tin được lưu trữ an toàn, thuận tiện cho việc tìm kiếm và tiết kiệm thời gian Để đáp ứng nhu cầu này, tôi quyết định xây dựng một Website Thương mại điện tử Ecommerce nhằm mang đến trải nghiệm tốt nhất cho người dùng.
Đối tượng nghiên cứu của đề tài này là các quy trình thực tế của cửa hàng bán hàng online hiện nay Qua việc thu thập và phân tích quy trình xử lý nghiệp vụ, em đánh giá các ưu điểm và hạn chế nhằm cải thiện hiệu quả kinh doanh Đồng thời, em cũng tìm hiểu các công nghệ cần thiết để xây dựng một website Ecommerce toàn diện.
- Next.JS: Framework Typescript giúp phát triển ứng dụng mạnh mẽ và dễ triển khai.
- MySQL: Hệ quản trị cơ sở dữ liệu có quan hệ để lưu trữ và quản lý dữ liệu một cách hiệu quả.
- MongoDB: Hệ quản trị cơ sở dữ liệu không quan hệ để lưu trữ và quản lý dữ liệu trò chuyện giữa user và admin.
Hệ thống xây dựng tập trung vào 3 đối tượng chính: khách vãn lai, người dùng và quản trị viên.
Người dùng có thể xem, bình luận, và đánh giá sản phẩm, cũng như đặt hàng và theo dõi đơn hàng thông qua ứng dụng web với trải nghiệm mượt mà và dễ sử dụng.
- Đối với khách vãn lai, chỉ có xem và đặt hàng qua ứng dụng trang web.
Quản trị viên có quyền kiểm soát toàn bộ hệ thống thông qua trang web quản trị, bao gồm việc quản lý sản phẩm, danh mục, chi nhánh, thông tin người dùng và doanh thu.
4 MỤC TIÊU CỦA ĐỀ TÀI
Với đề tài "Xây dựng website thương mại điện tử Ecommerce", tôi đã xác định một số mục tiêu quan trọng để phát triển một website có khả năng đáp ứng đầy đủ các chức năng cần thiết.
- Giới thiệu danh sách các sản phẩm đến người tiêu dùng và thông tin chi tiết của từng sản phẩm.
- Hỗ trợ người tiêu dùng bookmark các sản phẩm mình yêu thích.
- Hỗ trợ người tiêu dùng đánh giá và nhận xét các sản phẩm.
- Hỗ trợ người tiêu dùng thêm các sản phẩm vào giỏ hàng, mua hàng và thanh toán (trực tuyến bằng Paypal và VNPay).
- Hỗ trợ người tiêu dùng quản lý các đơn hàng và hoàn trả đơn hàng nếu có lỗi.
- Hỗ trợ người tiêu dùng chat và trao đổi thông tin với quản trị viên.
- Hỗ trợ cửa hàng quản lý thông tin (doanh thu, kho, sản phẩm…).
- Hỗ trợ cửa hàng lưu trữ thông tin an toàn.
Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
Trong quá trình xây dựng website bán hàng, tôi đã không chỉ học hỏi được nhiều kiến thức lý thuyết mà còn tích lũy được kinh nghiệm thực tế và các kỹ thuật cần thiết để phát triển một hệ thống sử dụng công nghệ hiện đại.
Các doanh nghiệp có thể tận dụng website này để gia tăng doanh số, thu hút thêm khách hàng và giữ chân họ nhờ vào những tiện ích mà hệ thống cung cấp Hơn nữa, việc quản lý kinh doanh trở nên đơn giản hơn, cùng với khả năng theo dõi và quản lý đơn hàng linh hoạt, giúp duy trì tính chính xác và nhanh chóng trong quy trình bán hàng.
CƠ SỞ LÝ THUYẾT
NEXTJS
Next.js is a framework designed for building and developing client-side interfaces based on ReactJS It facilitates the creation of high-performance single-page applications (SPAs) and static websites, supporting server-side rendering (SSR) and static site generation (SSG).
Next.js áp dụng kiến trúc "Pages and Components", trong đó mỗi trang được biểu thị bằng một tệp tin trong thư mục "pages" Hệ thống tự động quản lý định tuyến và điều hướng cho các trang này, trong khi các thành phần (components) có thể được tạo ra và tái sử dụng cho nhiều trang khác nhau.
1.1.2 Các tính năng nổi bật của Next.js
Next.js cung cấp khả năng hỗ trợ SSR (Server-Side Rendering) một cách hiệu quả, cho phép tạo và trả về trang hoàn chỉnh từ máy chủ khi có yêu cầu từ máy khách Điều này không chỉ nâng cao tốc độ tải trang ban đầu mà còn cải thiện trải nghiệm người dùng Hơn nữa, SSR rất có lợi cho SEO (Tối ưu hóa công cụ tìm kiếm), vì các công cụ tìm kiếm có thể dễ dàng lập chỉ mục nội dung trang web.
Hình 2 SSR – Server-Side Rendering
Next.js hỗ trợ tính năng tạo trang tĩnh trước thời gian (pre-rendering), cho phép các trang được xây dựng và lưu trữ dưới dạng tệp HTML tĩnh Khi có yêu cầu từ người dùng, Next.js sẽ phục vụ các tệp HTML đã được tạo sẵn, giúp nâng cao hiệu suất và giảm tải cho máy chủ.
Next.js mang đến một hệ thống định tuyến mạnh mẽ thông qua việc sử dụng các tệp trong thư mục "pages", giúp bạn xác định các tuyến đường và điều hướng cho ứng dụng Hệ thống này hỗ trợ định tuyến động, cho phép tạo ra các tuyến đường có tham số và tùy chỉnh quy tắc định tuyến linh hoạt.
Next.js là một framework mạnh mẽ cho phát triển ứng dụng web phía client, nổi bật với khả năng hỗ trợ SSR, tạo trang tĩnh và quản lý trạng thái linh hoạt Nó được coi là nền tảng đáng tin cậy và hiệu quả cho việc xây dựng ứng dụng web hiện đại.
1.1.3 Ưu và nhược điểm của Next.js Ưu điểm
- Mang lại khả năng SEO mạnh mẽ hơn.
- Hỗ trợ cả SSG (Static-Side Generation), SSR (Server-Side Rendering) và CSR (Client-Side Rendering)
- Tự động code spilting giúp tối ưu hóa hiệu suất khi load trang.
- Mang đến cho người dùng trải nghiệm tốt hơn.
- Mang đến tính bảo mật cao về dữ liệu
- Một số plugin và thư viện hỗ trợ có thể cần phải tùy chỉnh lại để có thể sử dụng được trong Next.js.
- Bị giới hạn trong việc định tuyến trên tệp Người phát triển không thể thay đổi cách mà các trang (pages) giao tiếp với nhau.
Bảng 1 Ưu và nhược điểm của Next.js
XÁC ĐỊNH VÀ MÔ HÌNH HÓA YÊU CẦU
THIẾT KẾ HỆ THỐNG
3.1 Thiết kế cơ sở dữ liệu
3.2 Đặc tẳ cơ sở dữ liệu
Chương 4: CÀI ĐẶT VÀ KIỂM THỬ
1, 2 04/03 - 17/03 Tham khảo một số website bán hàng
Thiết kế cơ sở dữ liệu cho website Thiết kế usecase
3, 4 18/03 - 31/03 Tìm hiểu về các kiến thức liên quan như: MySQL,
NextJS, ClerkJS, Cloudinary, Prisma, Stripe.
5, 6 01/04 - 14/04 Xây dựng giao diện để có cái nhìn tổng quát về website bán hàng Ecommerce
7, 8 15/04 - 28/04 Xây dựng API theo usecase
Tìm hiểu các dịch vụ thanh toán khác như zalopay, vnpay
Xây dựng thêm một số chức năng cho website như: mã giảm giá, đa ngôn ngữ
Tìm hiểu về cách xây dựng và tích hợp chatbot cho website
Tìm và sửa lỗi hệ thống 13,
14, 15 27/05 - 15/06 Viết báo cáo và hoàn thiện website
Tp Hồ Chí Minh, ngày … tháng… năm 2024
(Ký và ghi rõ họ tên)
(Ký và ghi rõ họ tên)
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1
4 MỤC TIÊU CỦA ĐỀ TÀI 3
5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 3
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 4
CHƯƠNG 2: XÁC ĐỊNH VÀ MÔ HÌNH HÓA YÊU CẦU 15
2.3 MÔ HÌNH HÓA YÊU CẦU 37
2.4 ĐẶC TẢ USECASE CHO 1 SỐ USECASE CHÍNH 38
CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 66
CHƯƠNG 4: CÀI ĐẶT VÀ THỬ NGHIỆM 123
Hình 2 SSR – Server-Side Rendering 5
Hình 7 Giao diện trang chủ Kingshoes 15
Hình 8 Giao diện trang danh sách sản phẩm 16
Hình 9 Giao diện trang chi tiêt sản phẩm 17
Hình 10 Giao diện trang giỏ hàng 18
Hình 11 Giao diện trang đặt hàng 19
Hình 12 Giao diện trang chủ RedRooterCoffee 20
Hình 13 Giao diện trang danh sách sản phẩm 21
Hình 14 Giao diện trang chi tiêt sản phẩm 21
Hình 15 Giao diện trang giỏ hàng 22
Hình 16 Giao diện trang đặt hàng 23
Hình 17 Giao diện trang chủ 25
Hình 18 Giao diện trang danh sách sản phẩm 25
Hình 19 Giao diện trang chi tiết sản phẩm 25
Hình 20 Giao diện trang giỏ hàng 26
Hình 21 Giao diện trang đặt hàng 27
Hình 22 Giao diện trang chủ 29
Hình 23 Giao diện trang danh sách sản phẩm – trang chủ 29
Hình 27 Giao diện trang đặt hàng 31
Hình 28 Giao diện trang hồ sơ cá nhân 32
Hình 29 Usecase Diagram – Module Management 38
Hình 30 Usecase Diagram – Module Management 38
Hình 31 UC Guest – Đăng ký 39
Hình 32 UC Guest – Đăng nhập – Quên mật khẩu 40
Hình 33 UC Guest – Tìm kiếm sản phẩm 42
Hình 34 UC Guest – Xem chi tiết sản phẩm 44
Hình 35 UC User – Thêm sản phẩm vào giỏ hàng 45
Hình 36 UC User – Quản lý giỏ hàng – Đặt hàng – Thanh toán 46
Hình 37 UC User – Đăng xuất 50
Hình 38 UC User – Quản lý đơn hàng 51
Hình 39 UC User – Quản lý hồ sơ cá nhân 53
Hình 40 UC Admin – Quản lý người dùng 57
Hình 41 UC Admin – Quản lý danh mục 59
Hình 42 UC Admin – Quản lý kho hàng 60
Hình 43 UC Admin – Quản lý thống kê 63
Hình 44 Lược đồ thực thể 66
Hình 45 Giao diện trang đăng ký 79
Hình 46 Giao diện trang Đăng nhập 80
Hình 48 Giao diện thanh Search sản phẩm 81
Hình 49 Giao diện trang kết quả tìm kiếm 82
Hình 50 Giao diện modal sản phẩm 83
Hình 51 Giao diện trang chi tiết sản phẩm – 1 84
Hình 55 Giao diện trang Thông tin cá nhân 88
Hình 56 Giao diện trang Quản lý đơn hàng 89
Hình 57 Giao diện trang Hoàn trả đơn hàng 90
Hình 58 Giao diện trang Sản phẩm yêu thích 91
Hình 59 Giao diện trang chủ - doanh thu 93
Hình 61 Giao diện trang quản lý người dùng 95
Hình 62 Giao diện trang chỉnh sửa người dùng 96
Hình 63 Giao diện trang quản lý danh mục 97
Hình 64 Giao diện trang thêm / cập nhật danh mục 98
Hình 65 Giao diện trang quản lý đơn hàng hoàn trả 98
Hình 66 Giao diện trang chỉnh sửa đơn hàng hoàn trả 99
Hình 67 Giao diện trang quản lý mã giảm giá 100
Hình 68 Giao diện trang thêm / cập nhật mã giảm giá 101
Hình 69 Giao diện trang quản lý sản phẩm 102
Hình 70 Giao diện trang thêm / cập nhật sản phẩm 103
Hình 71 Giao diện trang quản lý nhập hàng 104
Hình 72 Giao diện trang tạo mới đơn nhập hàng 104
Hình 73 Sequence Diagram -UC Guest – Đăng ký 106
Hình 74 Sequence Diagram – UC Guest – Đăng nhập 107
Hình 75 Sequence Diagram – UC Guest – Quên mật khẩu 108
Hình 76 Sequence Diagram – UC Guest – Tìm kiếm sản phẩm 109
Hình 77 Sequence Diagram – UC Guest – Xem chi tiết sản phẩm 109
Hình 78 Sequence Diagram – UC User – Thêm sản phẩm vào giỏ hàng 110
Hình 79 Sequence Diagram – UC User – Quản lý giỏ hàng 110
Hình 83 Sequence Diagram – UC User – Quản lý đơn hàng 113
Hình 84 Sequence Diagram – UC User – Hủy đơn hàng 113
Hình 85 Sequence Diagram – UC User – Theo dõi đơn hàng 114
Hình 86 Sequence Diagram – UC User – Đánh giá và bình luận 114
Hình 87 Sequence Diagram – UC User – Quản lý hồ sơ cá nhân 115
Hình 88 Sequence Diagram – UC User – OPT – Cập nhật địa chỉ giao hàng 115
Hình 89 Sequence Diagram – UC User – Cập nhật thông tin cá nhân 116
Hình 90 Sequence Diagram – UC Admin – Quản lý người dùng 117
Hình 91 Sequence Diagram – UC Admin – Quản lý danh mục 118
Hình 92 Sequence Diagram – UC Admin – Quản lý kho hàng – Thêm sản phẩm 119
Hình 93 Sequence Diagram – UC Admin – Quản lý kho hàng – Cập nhật sản phẩm 120
Hình 94 Sequence Diagram – UC Admin – Quản lý kho hàng – Ẩn / Hiện sản phẩm 121
Hình 95 Sequence Diagram – UC Admin – Quản lý thống kê – Doanh thu 121
Hình 96 Sequence Diagram – UC Admin – Quản lý thống kê – Người dùng 121
Hình 97 Sequence Diagram – UC Admin – Quản lý thống kê – Đơn hàng 122
Hình 98 Sequence Diagram – UC Admin – Quản lý thống kê – Kho hàng 122
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Trong thời đại Internet hiện nay, nhu cầu mua sắm hàng hóa online ngày càng phổ biến, không chỉ với các dụng cụ hàng ngày mà còn với quần áo, phụ kiện và giày dép Mô hình thương mại điện tử tại Việt Nam đang phát triển mạnh mẽ, mang lại cho người tiêu dùng sự lựa chọn đa dạng và tiết kiệm thời gian Để đáp ứng nhu cầu thời trang giày dép một cách nhanh chóng và uy tín, sự ra đời của một website thương mại điện tử là rất cần thiết.
Với sự phát triển mạnh mẽ của Công nghệ thông tin, việc xây dựng Website Thương mại điện tử trở nên khả thi hơn bao giờ hết Chỉ cần một chiếc máy tính hoặc smartphone kết nối internet, người tiêu dùng có thể dễ dàng lựa chọn những đôi giày thời thượng phù hợp với nhu cầu cá nhân Kinh doanh trực tuyến không chỉ giúp cửa hàng quản lý hiệu quả hơn mà còn đảm bảo thông tin được lưu trữ an toàn, thuận tiện cho việc tìm kiếm và tiết kiệm thời gian Để đáp ứng nhu cầu này, tôi quyết định xây dựng một Website Thương mại điện tử Ecommerce nhằm mang đến trải nghiệm tốt nhất cho người tiêu dùng.
Đối tượng nghiên cứu của đề tài này là các quy trình thực tế tại các cửa hàng bán hàng online hiện nay Qua việc thu thập và phân tích quy trình xử lý nghiệp vụ, em đánh giá những ưu điểm và hạn chế nhằm cải thiện hiệu quả hoạt động Bên cạnh đó, em cũng tìm hiểu các công nghệ cần thiết để xây dựng một website Ecommerce toàn diện.
- Next.JS: Framework Typescript giúp phát triển ứng dụng mạnh mẽ và dễ triển khai.
- MySQL: Hệ quản trị cơ sở dữ liệu có quan hệ để lưu trữ và quản lý dữ liệu một cách hiệu quả.
- MongoDB: Hệ quản trị cơ sở dữ liệu không quan hệ để lưu trữ và quản lý dữ liệu trò chuyện giữa user và admin.
Hệ thống xây dựng tập trung vào 3 đối tượng chính: khách vãn lai, người dùng và quản trị viên.
Người dùng có thể dễ dàng xem, bình luận và đánh giá sản phẩm, cũng như thực hiện đặt hàng và theo dõi đơn hàng thông qua ứng dụng web, mang đến trải nghiệm mượt mà và thân thiện.
- Đối với khách vãn lai, chỉ có xem và đặt hàng qua ứng dụng trang web.
Quản trị viên sẽ có quyền kiểm soát toàn bộ hệ thống thông qua trang web quản trị, bao gồm việc quản lý sản phẩm, danh mục, chi nhánh, thông tin người dùng và doanh thu.
4 MỤC TIÊU CỦA ĐỀ TÀI
Với chủ đề “Xây dựng website thương mại điện tử Ecommerce”, tôi đã xác định một số mục tiêu quan trọng nhằm phát triển một website có khả năng đáp ứng đầy đủ các chức năng cần thiết.
- Giới thiệu danh sách các sản phẩm đến người tiêu dùng và thông tin chi tiết của từng sản phẩm.
- Hỗ trợ người tiêu dùng bookmark các sản phẩm mình yêu thích.
- Hỗ trợ người tiêu dùng đánh giá và nhận xét các sản phẩm.
- Hỗ trợ người tiêu dùng thêm các sản phẩm vào giỏ hàng, mua hàng và thanh toán (trực tuyến bằng Paypal và VNPay).
- Hỗ trợ người tiêu dùng quản lý các đơn hàng và hoàn trả đơn hàng nếu có lỗi.
- Hỗ trợ người tiêu dùng chat và trao đổi thông tin với quản trị viên.
- Hỗ trợ cửa hàng quản lý thông tin (doanh thu, kho, sản phẩm…).
- Hỗ trợ cửa hàng lưu trữ thông tin an toàn.
5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
Trong quá trình xây dựng website bán hàng, tôi đã không chỉ tiếp thu kiến thức lý thuyết mà còn tích lũy kinh nghiệm thực tế và các kỹ thuật hiện đại để phát triển một hệ thống hiệu quả.
Các doanh nghiệp có thể tận dụng website này để gia tăng doanh số và thu hút thêm khách hàng, đồng thời giữ chân khách hàng nhờ vào những tiện ích mà hệ thống cung cấp Hệ thống cũng giúp việc quản lý kinh doanh trở nên đơn giản hơn, cho phép theo dõi và quản lý đơn hàng một cách linh hoạt, chính xác và nhanh chóng, từ đó nâng cao hiệu quả trong quy trình bán hàng.
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 NEXTJS
Next.js is a powerful framework designed for building client-side interfaces based on ReactJS It facilitates the development of high-performance single-page applications (SPAs) and static websites, offering support for server-side rendering (SSR) and static site generation (SSG).
Next.js áp dụng mô hình kiến trúc "Pages and Components", trong đó mỗi trang được biểu diễn bằng một tệp tin trong thư mục "pages" Hệ thống tự động quản lý định tuyến và điều hướng cho các trang, đồng thời cho phép tạo và tái sử dụng các thành phần (components) cho nhiều trang khác nhau.
1.1.2 Các tính năng nổi bật của Next.js
Next.js cung cấp khả năng hỗ trợ SSR (Server-Side Rendering) một cách dễ dàng, cho phép tạo và trả về trang hoàn chỉnh từ máy chủ khi có yêu cầu từ máy khách Điều này không chỉ cải thiện tốc độ tải trang ban đầu mà còn nâng cao trải nghiệm người dùng Bên cạnh đó, SSR cũng mang lại lợi ích cho SEO (Tối ưu hóa công cụ tìm kiếm), giúp các công cụ tìm kiếm dễ dàng lập chỉ mục nội dung của trang.
Hình 2 SSR – Server-Side Rendering
Next.js hỗ trợ pre-rendering, cho phép tạo các trang tĩnh trong quá trình xây dựng ứng dụng và lưu trữ dưới dạng tệp HTML Khi có yêu cầu, Next.js phục vụ các tệp HTML đã được tạo trước, giúp cải thiện hiệu suất và giảm tải cho máy chủ.
Next.js cung cấp một hệ thống định tuyến mạnh mẽ thông qua thư mục "pages", cho phép bạn xác định các tuyến đường và điều hướng cho ứng dụng Hệ thống này hỗ trợ định tuyến động, giúp tạo ra các tuyến đường có tham số và tùy chỉnh quy tắc định tuyến một cách linh hoạt.
Hiện nay, Next.js được xem là một framework mạnh mẽ cho phát triển ứng dụng web phía client, với các tính năng nổi bật như hỗ trợ SSR, tạo trang tĩnh và quản lý trạng thái linh hoạt Nó là nền tảng đáng tin cậy và hiệu quả cho việc xây dựng ứng dụng web hiện đại.
1.1.3 Ưu và nhược điểm của Next.js Ưu điểm
- Mang lại khả năng SEO mạnh mẽ hơn.
- Hỗ trợ cả SSG (Static-Side Generation), SSR (Server-Side Rendering) và CSR (Client-Side Rendering)
- Tự động code spilting giúp tối ưu hóa hiệu suất khi load trang.
- Mang đến cho người dùng trải nghiệm tốt hơn.
- Mang đến tính bảo mật cao về dữ liệu
- Một số plugin và thư viện hỗ trợ có thể cần phải tùy chỉnh lại để có thể sử dụng được trong Next.js.
- Bị giới hạn trong việc định tuyến trên tệp Người phát triển không thể thay đổi cách mà các trang (pages) giao tiếp với nhau.
Bảng 1 Ưu và nhược điểm của Next.js
1.2.1 Cơ sở dữ liệu phi quan hệ (NoSQL) là gì?
NoSQL được phát triển để đáp ứng nhu cầu lưu trữ, quản lý và truy xuất dữ liệu với hiệu suất cao và tính linh hoạt Nó cho phép mở rộng dễ dàng và linh hoạt, chủ yếu tập trung vào các kho lưu trữ dữ liệu phân tán để xử lý khối lượng lớn dữ liệu.
Một vài Cơ sở dữ liệu phi quan hệ (NoSQL) như: MongoDB, CouchDB, Redis, DynamoDB,…
MongoDB là một dạng phần mềm cơ sở dữ liệu sử dụng mã nguồn mở NoSQL.