Như ta đã biết Việt Nam là một đất nước nông nghiệp, có rất nhiều nông trang nông trại nhỏ lẻ với kiểu sản xuất là tự sản xuất mà bán sản phẩm đầu ra cho thương lại hoặc công ty chế biến. Và điệp khúc thường thấy ở nông sản là được mùa mất giá hay được giá mất mùa, hay không thể tự chủ được đầu ra cho sản phẩm mình làm ra. Sản phẩm nhiều khi từ sản xuất cho đến ra tay người tiêu dùng bị độn giá lên rất cao do nhiều khâu trung gian. Cùng với sự phát triển của khoa học và công nghệ như hiện nay thì việc mua, bán hàng online đang trở nên rất phổ biến. Nhất là trong bối cảnh đại dịch covid, mọi người đều hạn chế ra đường hơn. Vì vậy để phục vụ nhu cầu mua sắm online của mọi người dân thì các doanh nghiệp bán hàng nông sản theo cách truyền thống cần có phải có một website thương mại điện tử để có thể bày bán mặt hàng của mình trên không gian mạng. Từ đây nhóm chúng em quyết định thực hiện đề tài này để nghiên cứu phát triển trên công nghệ mới MERN Stack nhằm tạo ra một website bán hàng hoàn chỉnh đảm bảo chức năng của một website ecommerce. Đối người tiêu dùng có thể tìm kiếm sản phẩm, mua theo giá mà nhà nông họ đưa ra, giúp người tiêu dùng biết rõ nguồn gốc của nông sản. Đối với chủ trang web có thể vừa quản lý sản phẩm của mình vừa quảng bá thương hiệu của chính mình. Góp một phần trong việc sản xuất nông nghiệp ứng dụng công nghệ cao hiện nay trên cả nước.
PHẦN MỞ ĐẦU
CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGUYÊN CỨU
4 TÌM HIỂU MỘT SỐWEBSITE BÁN NÔNG SẢN
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
1.1 CÁC CÔNG NGHỆ SỬ DỤNG VÀ MÔ HÌNH SỬ DỤNG 1.2 CÔNG NGHỆ MERN STACK
1.5 TÌM KIẾM BẰNG GIỌNG NÓI
CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU
CHƯƠNG 3: THUYẾT KẾ PHẦN MỀM
3.1 THIẾT KẾ CƠ SỞ DỮ LIỆU
3.1.2 ĐẶC TẢ CƠ SỞ DỮ LIỆU
CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ
4.1.3 CÁC BƯỚC KHỞI CHẠY ỨNG DỤNG
4.2.2.1 TRONG PHẠM VI KIỂM THỬ
4.2.2.2 NGOÀI PHẠM VI KIỂM THỬ
1.2 CHƯƠNG TRÌNH ĐÃ ĐẠT ĐƯỢC
Tuần Nội dung công việc
1 - Xin hướng dẫn đề tài
- Tiến hành khởi chạy project tiểu luận
- Tìm hiểu các website bán nông sản hiện nay
4-5 - Xây dựng app từ website
- Tìm kiếm bằng giọng nói
8-10 - Tích hợp giao hàng nhanh
11-12 - Bảng giá trị dinh dưỡng của nông sản
- Kiểm thử sửa lỗi Ý kiến của giáo viên hướng dẫn Ngày tháng năm
(Ký và ghi rõ họ tên) Người viết đề cương
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1
2 MỤC TIÊU CỦA ĐỀ TÀI 1
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGUYÊN CỨU 2
4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 3
5 KHẢO SÁT MỘT SỐ WEBSITE TƯƠNG TỰ 3
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 6
1.1 MÔ HÌNH MVC THIẾT KẾ WEBSITE 6
1.1.2 Triển khai vào xây dựng website 9
1.2.1 Giới thiệu công nghệ MERN Stack 9
1.2.2 Xây dựng website với MERN Stack 10
1.3.1 Giới thiệu về Chat GPT 10
1.3.2 Các bước nhúng Chat GPT vào website 11
1.4.2 Nhúng live chat fanpage Facebook vào trang web 16
1.5.1 Giới thiệu về giao hàng nhanh 18
1.6 TÌM KIẾM BẰNG GIỌNG NÓI 20
1.7 Một số chức năng nâng cao khác 22
Từ những ưu điểm đó website đã tích hợp API của VNPay để tiến hành cho việc thanh toán của khách hàng 25
CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 26
2.1.2.1 Đặc tả use case Login 28
2.1.2.2 Đặc tả use case View home page 29
2.1.2.3 Đặc tả use case Search Product 29
2.1.2.4 Đặc tả use case Filter Product 30
2.1.2.5 Đặc tả use case View product detail 30
2.1.2.6 Đặc tả use case Add product to cart 31
2.1.2.7 Đặc tả use case Manage shopping cart 31
2.1.2.8 Đặc tả use case Manage profile 32
2.1.2.9 Đặc tả use case Manage self orders -Checkout 33
2.1.2.10 Đặc tả use-case Manage self orders - Cancel order 34
2.1.2.11 Đặc tả use case Manage self orders -Review product 34
2.1.2.12 Đặc tả use case Manage self orders -View admin page 35
2.1.2.13 Đặc tả use case manage product - add product 35
2.1.2.14 Đặc tả use case manage product - update product 36
2.1.2.15 Đặc tả use case manage product - delete product 37
2.1.2.16 Đặc tả use case Manage product category - add category 37
2.1.2.17 Đặc tả use case Manage product category - update category 38
2.1.2.18 Đặc tả use case Manage product category - delete category 39
2.1.2.19 Đặc tả use case Manage orders - Approve order 39
2.1.2.20 Đặc tả use case Manage orders - Delete order 40
2.1.2.21 Đặc tả use case Manage user account - Block account 40
2.1.2.22 Đặc tả use case Manage user account - Add account 40
2.1.2.23 Đặc tả use case Manage user account – statistic 41
CHƯƠNG 3 THIẾT KẾ PHẦN MỀM 48
3.1 THIẾT KẾ CƠ SỞ DỮ LIỆU 48
3.1.2 Chuyển ERD thành cơ sở dữ liệu trong MongoDB 48
3.1.3 Mô tả chi tiết cơ sở dữ liệu 50
CHƯƠNG 4 CÀI ĐẶT VÀ KIỂM THỬ 71
4.1.3 Các bước khởi chạy ứng dụng 71
Hình 2 Luồng hoạt động của mô hình MVC 7
Hình 3: Trải nghiệm của người dùng với chatGPT 11
Hình 4: Tạo một API Key mới 12
Hình 5: Trang web lấy key API 12
Hình 6 Tích hợp vào code 13
Hình 7 Xây dựng giao diện cho khung chat GPT 15
Hình 8 Live chat fanpage Facebook 16
Hình 9 Ngôn ngữ Tiếng Việt 22
Hình 11 Ngôn ngữ Tiếng Anh 23
Hình 12 Trang web bán nông sản đã được tích hợp vào Google Analytics 24
Hình 13 Thanh toán đơn hàng với VNPay 26
Hình 16 Sơ đồ hoạt động xem trang chủ 42
Hình 17 Sơ đồ hoạt động tìm kiếm sản phẩm 43
Hình 18 Sơ đồ hoạt động xem chi tiết sản phẩm 43
Hình 19 Sơ đồ hoạt động đăng kí 44
Hình 20 Sơ đồ hoạt động đăng nhập 44
Hình 21 Sơ đồ hoạt động quên mật khẩu 45
Hình 22 Sơ đồ hoạt động cập nhật thông tin profile 45
Hình 23 Sơ đồ hoạt động quản lý sản phẩm 46
Hình 24 Sơ đồ hoạt động quản lý danh mục 46
Hình 25 Sơ đồ hoạt động xóa sản phẩm, danh mục 47
Hình 26 Lược đồ ERD chi tiết 48
Hình 27 Giao diện trang chủ 55
Hình 28 Giao diện trang sản phẩm 56
Hình 29 Giao diện trang chi tiết sản phẩm 57
Hình 30 Giao diện trang giỏ hàng 58
Hình 31 Giao diện trang giới thiệu 59
Hình 32 Giao diện trang liên hệ 60
Hình 33 Giao diện trang đăng nhập 61
Hình 34 Giao diện trang đăng kí 61
Hình 35 Giao diện trang thông tin cá nhân người dùng 62
Hình 36 Giao diện trang lịch sử đặt hàng 63
Hình 37 Giao diện trang dashboard 64
Hình 38 Giao diện trang quản lý khách hàng 64
Hình 39 Giao diện trang quản lý sản phẩm 65
Hình 40 Giao diện trang thêm mới sản phẩm 66
Hình 41 Giao diện trang quản lý đơn hàng 67
Hình 42 Giao diện trang quản lý thương hiệu 67
Hình 43 Giao diện trang quản lý slides 68
Hình 44 Giao diện trang thêm mới slides 69
Hình 45 Giao diện trang thông tin admin 69
Hình 46 Giao diện trang thống kê 70
Bảng 1 Đặc tả use case Login 29
Bảng 2 Đặc tả use case View home page 29
Bảng 3 Đặc tả use case Search Product 30
Bảng 4 Đặc tả use case Filter Product 30
Bảng 5 Đặc tả use case View product detail 31
Bảng 6 Đặc tả use case Add product to cart 31
Bảng 7 Đặc tả use case Manage shopping cart 32
Bảng 8 Đặc tả use case Manage profile 33
Bảng 9 Đặc tả use case Manage self orders -Checkout 34
Bảng 10 Đặc tả use-case Manage self orders - Cancel order 34
Bảng 11 Đặc tả use case Manage self orders -Review product 35
Bảng 12 Đặc tả use case Manage self orders -View admin page 35
Bảng 13 Đặc tả use case manage product - add product 36
Bảng 14 Đặc tả use case manage product - update product 37
Bảng 15 Đặc tả use case manage product - delete product 37
Bảng 16 Đặc tả use case Manage product category - add category 38
Bảng 17 Đặc tả use case Manage product category - update category 38
Bảng 18 Đặc tả use case Manage product category - delete category 39
Bảng 19 Đặc tả use case Manage orders - Approve order 39
Bảng 20 Đặc tả use case Manage orders - Delete order 40
Bảng 21 Đặc tả use case Manage user account - Block account 40
Bảng 22 Đặc tả use case Manage user account - Add account 41
Bảng 23 Đặc tả use case Manage user account - statistic 41
Bảng 24 Mô tả kiểu dữ liệu bảng user 51
Bảng 25 Mô tả kiểu dữ liệu bảng Product 52
Bảng 26 Mô tả kiểu dữ liệu bảng ProductCategory 52
Bảng 27 Mô tả kiểu dữ liệu bảng Order 53
Bảng 28 Mô tả kiểu dữ liệu bảng Slide 54
Bảng 29 Mô tả kiểu dữ liệu bảng Brand 54
Bảng 30 Mô tả kiểu dữ liệu bảng Token 54
DANH MỤC TỪ VIẾT TẮT
CSDL Cơ sở dữ liệu
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Việt Nam, với nền nông nghiệp phát triển, sở hữu nhiều nông trang và nông trại nhỏ lẻ, thường gặp phải tình trạng được mùa mất giá hoặc được giá mất mùa, dẫn đến khó khăn trong việc tự chủ đầu ra cho sản phẩm Giá nông sản thường tăng cao do nhiều khâu trung gian từ sản xuất đến tay người tiêu dùng.
Với sự phát triển nhanh chóng của khoa học và công nghệ, mua sắm trực tuyến đã trở thành một xu hướng phổ biến, đặc biệt trong thời kỳ đại dịch COVID-19 khi mọi người hạn chế ra ngoài Để đáp ứng nhu cầu này, các doanh nghiệp kinh doanh nông sản theo phương thức truyền thống cần xây dựng một website thương mại điện tử, giúp họ tiếp cận khách hàng và bày bán sản phẩm trên không gian mạng.
Nhóm chúng em quyết định nghiên cứu và phát triển một website bán hàng hoàn chỉnh dựa trên công nghệ MERN Stack, đảm bảo đầy đủ chức năng của một trang thương mại điện tử Website sẽ giúp người tiêu dùng dễ dàng tìm kiếm sản phẩm và mua theo giá mà nhà nông đưa ra, đồng thời cung cấp thông tin rõ ràng về nguồn gốc nông sản Đối với chủ trang web, họ có thể quản lý sản phẩm và quảng bá thương hiệu của mình, góp phần vào việc ứng dụng công nghệ cao trong sản xuất nông nghiệp trên toàn quốc.
2 MỤC TIÊU CỦA ĐỀ TÀI
Tìm hiểu công nghệ MERN Stack gồm: NodeJS, ExpressJS, ReactJS, MongoDB
Tìm hiểu các website bán hàng tương tự
Phân tích thiết kế website bán nông sản
Cài đặt website bán nông sản sử dụng công nghệ MERN Stack gồm các chức năng cơ bản:
Để tối ưu hóa trải nghiệm người dùng, hệ thống cung cấp các chức năng như đăng ký, đăng nhập và đăng xuất tài khoản Người dùng có thể quản lý tài khoản của mình bằng cách xem và cập nhật thông tin, đổi hoặc lấy lại mật khẩu Chức năng đặt hàng và xem lịch sử đặt hàng giúp theo dõi các giao dịch dễ dàng Hệ thống cũng hỗ trợ tìm kiếm và xem chi tiết sản phẩm, đồng thời cho phép thanh toán qua Paypal Quản lý sản phẩm bao gồm các thao tác cập nhật, thêm và xóa sản phẩm Ngoài ra, quản lý người dùng, đơn hàng, thương hiệu, danh mục và chứng nhận sản phẩm cũng được thực hiện hiệu quả, cùng với khả năng xem thống kê để nắm bắt tình hình kinh doanh.
The technologies our team will explore to enhance our thesis include frontend frameworks such as ReactJS and React Native, backend development with NodeJS, and database management using MongoDB Additionally, we will utilize various libraries and frameworks like Axios and Sass to optimize our project.
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGUYÊN CỨU
- Trong đề tài này, nhóm nghiên cứu dựa trên xu hướng của các trang web bán hàng hiện nay
- Tìm hiểu và áp dụng công nghệ MERN Stack (MongoDB, Express, React, NodeJS) để xây dựng ra được một trang web hoàn chỉnh
- Lĩnh vực nghiên cứu: Website bán hàng nông sản online
- Tập trung vào việc xử lý các nghiệp vụ cơ bản của website bán hàng như: Xem sản phẩm, mua hàng, quản lý sản phẩm, quản lý người dùng, …
- Về công nghệ: tập trung vào tìm hiểu công nghệ MERN Stack và ứng dụng nó vào việc xây dựng một trang web bán hàng nông sản online
Phương pháp phân tích và tổng hợp lý thuyết bao gồm việc nghiên cứu và tìm hiểu các tài liệu cũng như ứng dụng liên quan đến công nghệ, mô hình và lý thuyết cần thiết Việc này giúp người nghiên cứu nắm bắt được các khía cạnh quan trọng và xu hướng mới trong lĩnh vực của mình, từ đó phát triển các giải pháp hiệu quả hơn.
Phương pháp chuyên gia là việc tham khảo ý kiến từ Thầy hướng dẫn và những người có kinh nghiệm liên quan đến các vấn đề và nghiệp vụ của đề tài, nhằm nâng cao tính chính xác và độ tin cậy của thông tin.
- Phương pháp mô hình hóa: Mô phỏng website từ bước thiết kế cài đặt cho đến kết quả thành phẩm của website.
KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC
Nghiên cứu và hiểu được các thành phần chính trong công nghệ MERN Stack như: NodeJS, Express framework, MongoDB database, ReactJS library
Ứng dụng được công nghệ MERN Stack vào việc xây dựng website bán hàng nông sản online
Phát triển các chức năng thiết yếu cho một trang web bán hàng online bao gồm: đăng nhập và đăng ký tài khoản, cho phép người dùng truy cập để xem thông tin sản phẩm và thực hiện mua hàng, chức năng tìm kiếm và lọc sản phẩm, cùng với giỏ hàng và quy trình thanh toán.
Phát triển các tính năng cho quản trị viên: quản lý sản phẩm, quản lý người dùng, quản lý đơn hàng, thống kê, báo cáo.
KHẢO SÁT MỘT SỐ WEBSITE TƯƠNG TỰ
Trang web này chuyên cung cấp dịch vụ mua bán nông sản, tập trung vào các sản phẩm nông nghiệp của doanh nghiệp và đặc sản đến từ vùng Tây Bắc, nổi bật với những đặc trưng độc đáo của vùng núi Tây Bắc.
- Địa chỉ trang web: https://www.nongsantaybac.com/
- Giao diện đơn giản dễ sử dụng
- Sản phẩm đặt thù ở vùng núi Tây Bắc
- Thông tin sản phẩm hiển thị đầy đủ dễ dàng so sánh
- Không đa dạng sản phẩm
Trang web này là nền tảng mua bán nông sản, cho phép người dùng dễ dàng mua và đăng tin bán sản phẩm Bên cạnh đó, người dùng còn có thể đăng tin về nhu cầu và cung cấp cho các loại sản phẩm nông nghiệp khác nhau.
- Địa chỉ trang web: https://nongsanantoanlongan.vn/
- Giao diện đơn giản dễ sử dụng
- Phân loại sản phẩm rõ rang
- Thông tin sản phẩm chưa đầy đủ về giá cũng như thông tin
- Là một trang web chuyên cung cấp các sản phẩm đã qua chế biến thành phẩm từ các loại nông sản như bánh, kẹo, …
- Địa chỉ trang web: http://nongsanviet.net/
- Giao diện sử dụng không thân thiện
- Không có thông tin sản phẩm chi tiết
BachhoaXANH.com là trang web hàng đầu về thực phẩm nông sản tại Việt Nam, được ra mắt nhằm phục vụ nhu cầu mua sắm trực tuyến của người dùng tại TP.HCM.
- Địa chỉ trang web: http://nongsanviet.net/
- Chính sách mua hàng rõ ràng
- Địa điểm giao hàng bao khắp diện tích Tp Hồ Chí Minh
- Giao diện dễ sử dụng
- Chi phí giao hàng còn cao
- Là trang web chuyên bán và cung cấp sản phẩm về trái cây nhập khẩu được nhập trực tiếp từ các nước như Úc, Mỹ, Nhật, …
- Địa chỉ trang web: https://minhphuongfruit.com/
- Chính sách mua hàng rõ ràng
- Giao diện dễ sử dụng
- Chi phí giao hàng còn cao
- Khó tiếp cận với người tiêu dùng
CƠ SỞ LÝ THUYẾT
LIVE CHAT FANPAGE
1.5 TÌM KIẾM BẰNG GIỌNG NÓI
CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU
CHƯƠNG 3: THUYẾT KẾ PHẦN MỀM
3.1 THIẾT KẾ CƠ SỞ DỮ LIỆU
3.1.2 ĐẶC TẢ CƠ SỞ DỮ LIỆU
CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ
4.1.3 CÁC BƯỚC KHỞI CHẠY ỨNG DỤNG
4.2.2.1 TRONG PHẠM VI KIỂM THỬ
4.2.2.2 NGOÀI PHẠM VI KIỂM THỬ
1.2 CHƯƠNG TRÌNH ĐÃ ĐẠT ĐƯỢC
Tuần Nội dung công việc
1 - Xin hướng dẫn đề tài
- Tiến hành khởi chạy project tiểu luận
- Tìm hiểu các website bán nông sản hiện nay
4-5 - Xây dựng app từ website
- Tìm kiếm bằng giọng nói
8-10 - Tích hợp giao hàng nhanh
11-12 - Bảng giá trị dinh dưỡng của nông sản
- Kiểm thử sửa lỗi Ý kiến của giáo viên hướng dẫn Ngày tháng năm
(Ký và ghi rõ họ tên) Người viết đề cương
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1
2 MỤC TIÊU CỦA ĐỀ TÀI 1
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGUYÊN CỨU 2
4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 3
5 KHẢO SÁT MỘT SỐ WEBSITE TƯƠNG TỰ 3
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 6
1.1 MÔ HÌNH MVC THIẾT KẾ WEBSITE 6
1.1.2 Triển khai vào xây dựng website 9
1.2.1 Giới thiệu công nghệ MERN Stack 9
1.2.2 Xây dựng website với MERN Stack 10
1.3.1 Giới thiệu về Chat GPT 10
1.3.2 Các bước nhúng Chat GPT vào website 11
1.4.2 Nhúng live chat fanpage Facebook vào trang web 16
1.5.1 Giới thiệu về giao hàng nhanh 18
1.6 TÌM KIẾM BẰNG GIỌNG NÓI 20
1.7 Một số chức năng nâng cao khác 22
Từ những ưu điểm đó website đã tích hợp API của VNPay để tiến hành cho việc thanh toán của khách hàng 25
CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 26
2.1.2.1 Đặc tả use case Login 28
2.1.2.2 Đặc tả use case View home page 29
2.1.2.3 Đặc tả use case Search Product 29
2.1.2.4 Đặc tả use case Filter Product 30
2.1.2.5 Đặc tả use case View product detail 30
2.1.2.6 Đặc tả use case Add product to cart 31
2.1.2.7 Đặc tả use case Manage shopping cart 31
2.1.2.8 Đặc tả use case Manage profile 32
2.1.2.9 Đặc tả use case Manage self orders -Checkout 33
2.1.2.10 Đặc tả use-case Manage self orders - Cancel order 34
2.1.2.11 Đặc tả use case Manage self orders -Review product 34
2.1.2.12 Đặc tả use case Manage self orders -View admin page 35
2.1.2.13 Đặc tả use case manage product - add product 35
2.1.2.14 Đặc tả use case manage product - update product 36
2.1.2.15 Đặc tả use case manage product - delete product 37
2.1.2.16 Đặc tả use case Manage product category - add category 37
2.1.2.17 Đặc tả use case Manage product category - update category 38
2.1.2.18 Đặc tả use case Manage product category - delete category 39
2.1.2.19 Đặc tả use case Manage orders - Approve order 39
2.1.2.20 Đặc tả use case Manage orders - Delete order 40
2.1.2.21 Đặc tả use case Manage user account - Block account 40
2.1.2.22 Đặc tả use case Manage user account - Add account 40
2.1.2.23 Đặc tả use case Manage user account – statistic 41
CHƯƠNG 3 THIẾT KẾ PHẦN MỀM 48
3.1 THIẾT KẾ CƠ SỞ DỮ LIỆU 48
3.1.2 Chuyển ERD thành cơ sở dữ liệu trong MongoDB 48
3.1.3 Mô tả chi tiết cơ sở dữ liệu 50
CHƯƠNG 4 CÀI ĐẶT VÀ KIỂM THỬ 71
4.1.3 Các bước khởi chạy ứng dụng 71
Hình 2 Luồng hoạt động của mô hình MVC 7
Hình 3: Trải nghiệm của người dùng với chatGPT 11
Hình 4: Tạo một API Key mới 12
Hình 5: Trang web lấy key API 12
Hình 6 Tích hợp vào code 13
Hình 7 Xây dựng giao diện cho khung chat GPT 15
Hình 8 Live chat fanpage Facebook 16
Hình 9 Ngôn ngữ Tiếng Việt 22
Hình 11 Ngôn ngữ Tiếng Anh 23
Hình 12 Trang web bán nông sản đã được tích hợp vào Google Analytics 24
Hình 13 Thanh toán đơn hàng với VNPay 26
Hình 16 Sơ đồ hoạt động xem trang chủ 42
Hình 17 Sơ đồ hoạt động tìm kiếm sản phẩm 43
Hình 18 Sơ đồ hoạt động xem chi tiết sản phẩm 43
Hình 19 Sơ đồ hoạt động đăng kí 44
Hình 20 Sơ đồ hoạt động đăng nhập 44
Hình 21 Sơ đồ hoạt động quên mật khẩu 45
Hình 22 Sơ đồ hoạt động cập nhật thông tin profile 45
Hình 23 Sơ đồ hoạt động quản lý sản phẩm 46
Hình 24 Sơ đồ hoạt động quản lý danh mục 46
Hình 25 Sơ đồ hoạt động xóa sản phẩm, danh mục 47
Hình 26 Lược đồ ERD chi tiết 48
Hình 27 Giao diện trang chủ 55
Hình 28 Giao diện trang sản phẩm 56
Hình 29 Giao diện trang chi tiết sản phẩm 57
Hình 30 Giao diện trang giỏ hàng 58
Hình 31 Giao diện trang giới thiệu 59
Hình 32 Giao diện trang liên hệ 60
Hình 33 Giao diện trang đăng nhập 61
Hình 34 Giao diện trang đăng kí 61
Hình 35 Giao diện trang thông tin cá nhân người dùng 62
Hình 36 Giao diện trang lịch sử đặt hàng 63
Hình 37 Giao diện trang dashboard 64
Hình 38 Giao diện trang quản lý khách hàng 64
Hình 39 Giao diện trang quản lý sản phẩm 65
Hình 40 Giao diện trang thêm mới sản phẩm 66
Hình 41 Giao diện trang quản lý đơn hàng 67
Hình 42 Giao diện trang quản lý thương hiệu 67
Hình 43 Giao diện trang quản lý slides 68
Hình 44 Giao diện trang thêm mới slides 69
Hình 45 Giao diện trang thông tin admin 69
Hình 46 Giao diện trang thống kê 70
Bảng 1 Đặc tả use case Login 29
Bảng 2 Đặc tả use case View home page 29
Bảng 3 Đặc tả use case Search Product 30
Bảng 4 Đặc tả use case Filter Product 30
Bảng 5 Đặc tả use case View product detail 31
Bảng 6 Đặc tả use case Add product to cart 31
Bảng 7 Đặc tả use case Manage shopping cart 32
Bảng 8 Đặc tả use case Manage profile 33
Bảng 9 Đặc tả use case Manage self orders -Checkout 34
Bảng 10 Đặc tả use-case Manage self orders - Cancel order 34
Bảng 11 Đặc tả use case Manage self orders -Review product 35
Bảng 12 Đặc tả use case Manage self orders -View admin page 35
Bảng 13 Đặc tả use case manage product - add product 36
Bảng 14 Đặc tả use case manage product - update product 37
Bảng 15 Đặc tả use case manage product - delete product 37
Bảng 16 Đặc tả use case Manage product category - add category 38
Bảng 17 Đặc tả use case Manage product category - update category 38
Bảng 18 Đặc tả use case Manage product category - delete category 39
Bảng 19 Đặc tả use case Manage orders - Approve order 39
Bảng 20 Đặc tả use case Manage orders - Delete order 40
Bảng 21 Đặc tả use case Manage user account - Block account 40
Bảng 22 Đặc tả use case Manage user account - Add account 41
Bảng 23 Đặc tả use case Manage user account - statistic 41
Bảng 24 Mô tả kiểu dữ liệu bảng user 51
Bảng 25 Mô tả kiểu dữ liệu bảng Product 52
Bảng 26 Mô tả kiểu dữ liệu bảng ProductCategory 52
Bảng 27 Mô tả kiểu dữ liệu bảng Order 53
Bảng 28 Mô tả kiểu dữ liệu bảng Slide 54
Bảng 29 Mô tả kiểu dữ liệu bảng Brand 54
Bảng 30 Mô tả kiểu dữ liệu bảng Token 54
DANH MỤC TỪ VIẾT TẮT
CSDL Cơ sở dữ liệu
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Việt Nam, với nền nông nghiệp phát triển, có nhiều nông trang và nông trại nhỏ lẻ, thường sản xuất để bán cho thương lái hoặc công ty chế biến Tình trạng "được mùa mất giá" hay "được giá mất mùa" diễn ra phổ biến, khiến nông dân không thể tự chủ đầu ra cho sản phẩm Đặc biệt, giá nông sản thường bị đội lên cao do nhiều khâu trung gian trong quá trình phân phối từ sản xuất đến tay người tiêu dùng.
Với sự phát triển nhanh chóng của khoa học và công nghệ, mua sắm trực tuyến ngày càng trở nên phổ biến, đặc biệt trong bối cảnh đại dịch COVID-19 khiến mọi người hạn chế ra ngoài Để đáp ứng nhu cầu này, các doanh nghiệp bán hàng nông sản theo hình thức truyền thống cần xây dựng một website thương mại điện tử, giúp họ tiếp cận khách hàng và bày bán sản phẩm trên không gian mạng.
Nhóm chúng em quyết định nghiên cứu và phát triển website bán hàng hoàn chỉnh dựa trên công nghệ MERN Stack, nhằm tạo ra một nền tảng thương mại điện tử hiệu quả Website sẽ giúp người tiêu dùng dễ dàng tìm kiếm sản phẩm và mua theo giá mà nhà nông đưa ra, đồng thời cung cấp thông tin rõ ràng về nguồn gốc nông sản Đối với chủ trang web, họ có thể quản lý sản phẩm và quảng bá thương hiệu của mình, góp phần vào sự phát triển của nông nghiệp ứng dụng công nghệ cao trên toàn quốc.
2 MỤC TIÊU CỦA ĐỀ TÀI
Tìm hiểu công nghệ MERN Stack gồm: NodeJS, ExpressJS, ReactJS, MongoDB
Tìm hiểu các website bán hàng tương tự
Phân tích thiết kế website bán nông sản
Cài đặt website bán nông sản sử dụng công nghệ MERN Stack gồm các chức năng cơ bản:
Để tối ưu hóa trải nghiệm người dùng, hệ thống cung cấp các chức năng như đăng ký, đăng nhập và đăng xuất, cho phép người dùng quản lý tài khoản của mình, bao gồm xem và cập nhật thông tin cá nhân, đổi mật khẩu và lấy lại mật khẩu khi cần Người dùng có thể dễ dàng đặt hàng và theo dõi lịch sử đặt hàng, tìm kiếm và xem chi tiết sản phẩm, cũng như thực hiện thanh toán qua Paypal Ngoài ra, quản trị viên có thể quản lý sản phẩm bằng cách cập nhật, thêm hoặc xóa sản phẩm, đồng thời quản lý người dùng, đơn hàng, thương hiệu, danh mục và chứng nhận sản phẩm Cuối cùng, hệ thống cung cấp các báo cáo thống kê để theo dõi hiệu suất.
The team will explore various technologies to enhance their thesis, including Frontend frameworks such as ReactJS and React Native, Backend development with NodeJS, and MongoDB for database management Additionally, they will utilize libraries and frameworks like Axios and Sass to support their project.
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGUYÊN CỨU
- Trong đề tài này, nhóm nghiên cứu dựa trên xu hướng của các trang web bán hàng hiện nay
- Tìm hiểu và áp dụng công nghệ MERN Stack (MongoDB, Express, React, NodeJS) để xây dựng ra được một trang web hoàn chỉnh
- Lĩnh vực nghiên cứu: Website bán hàng nông sản online
- Tập trung vào việc xử lý các nghiệp vụ cơ bản của website bán hàng như: Xem sản phẩm, mua hàng, quản lý sản phẩm, quản lý người dùng, …
- Về công nghệ: tập trung vào tìm hiểu công nghệ MERN Stack và ứng dụng nó vào việc xây dựng một trang web bán hàng nông sản online
Phương pháp phân tích và tổng hợp lý thuyết bao gồm việc nghiên cứu và tìm hiểu các tài liệu cũng như ứng dụng liên quan đến công nghệ, mô hình và lý thuyết cần thiết.
Phương pháp chuyên gia là việc tham khảo ý kiến từ Thầy hướng dẫn và những người có kinh nghiệm liên quan đến các vấn đề và nghiệp vụ của đề tài, nhằm nâng cao tính chính xác và độ tin cậy của thông tin.
- Phương pháp mô hình hóa: Mô phỏng website từ bước thiết kế cài đặt cho đến kết quả thành phẩm của website
4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC
Nghiên cứu và hiểu được các thành phần chính trong công nghệ MERN Stack như: NodeJS, Express framework, MongoDB database, ReactJS library
Ứng dụng được công nghệ MERN Stack vào việc xây dựng website bán hàng nông sản online
Phát triển các chức năng cơ bản cho một trang web bán hàng online bao gồm đăng nhập và đăng ký tài khoản, cho phép người dùng truy cập để xem thông tin sản phẩm và thực hiện mua hàng Ngoài ra, cần có chức năng tìm kiếm và lọc sản phẩm, cùng với giỏ hàng và quy trình thanh toán hiệu quả.
Phát triển các tính năng cho quản trị viên: quản lý sản phẩm, quản lý người dùng, quản lý đơn hàng, thống kê, báo cáo
5 KHẢO SÁT MỘT SỐ WEBSITE TƯƠNG TỰ
Trang web của chúng tôi chuyên cung cấp các sản phẩm nông sản chất lượng từ doanh nghiệp, đặc biệt là những sản phẩm đặc trưng của vùng Tây Bắc Đây là nơi lý tưởng để tìm kiếm và mua sắm các mặt hàng nông nghiệp mang đậm bản sắc văn hóa vùng núi Tây Bắc.
- Địa chỉ trang web: https://www.nongsantaybac.com/
- Giao diện đơn giản dễ sử dụng
- Sản phẩm đặt thù ở vùng núi Tây Bắc
- Thông tin sản phẩm hiển thị đầy đủ dễ dàng so sánh
- Không đa dạng sản phẩm
Trang web mua bán nông sản của chúng tôi cho phép người dùng dễ dàng mua và đăng tin bán các sản phẩm nông nghiệp Bên cạnh đó, người dùng còn có thể đăng tin về nhu cầu và cung cấp cho các loại sản phẩm nông sản khác nhau, tạo điều kiện thuận lợi cho việc giao dịch và kết nối giữa người bán và người mua.
- Địa chỉ trang web: https://nongsanantoanlongan.vn/
- Giao diện đơn giản dễ sử dụng
- Phân loại sản phẩm rõ rang
- Thông tin sản phẩm chưa đầy đủ về giá cũng như thông tin
- Là một trang web chuyên cung cấp các sản phẩm đã qua chế biến thành phẩm từ các loại nông sản như bánh, kẹo, …
- Địa chỉ trang web: http://nongsanviet.net/
- Giao diện sử dụng không thân thiện
- Không có thông tin sản phẩm chi tiết
BachhoaXANH.com là trang
- Địa chỉ trang web: http://nongsanviet.net/
- Chính sách mua hàng rõ ràng
- Địa điểm giao hàng bao khắp diện tích Tp Hồ Chí Minh
- Giao diện dễ sử dụng
- Chi phí giao hàng còn cao
- Là trang web chuyên bán và cung cấp sản phẩm về trái cây nhập khẩu được nhập trực tiếp từ các nước như Úc, Mỹ, Nhật, …
- Địa chỉ trang web: https://minhphuongfruit.com/
- Chính sách mua hàng rõ ràng
- Giao diện dễ sử dụng
- Chi phí giao hàng còn cao
- Khó tiếp cận với người tiêu dùng
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
1.1 MÔ HÌNH MVC THIẾT KẾ WEBSITE
Mô hình MVC, viết tắt của “Model-View-Controller”, là một khuôn mẫu kiến trúc phần mềm được sử dụng trong việc xây dựng và phát triển ứng dụng máy tính Mô hình này bao gồm ba thành phần chính, mỗi thành phần đảm nhận các nhiệm vụ và chức năng riêng biệt, đảm bảo sự độc lập trong quá trình phát triển ứng dụng Các thành phần của mô hình MVC bao gồm: Model, View và Controller.
- View (giao diện người dùng)
- Controller (trung tâm điều khiển)
MVC là một mẫu thiết kế phổ biến, được sử dụng rộng rãi trong việc cấu trúc các dự án Nhiều dự án thực tế hiện vẫn hoạt động trên mô hình MVC và nó cũng được giảng dạy tại nhiều trường đại học cùng các cơ sở giáo dục khác.
Các thành phần của mô hình MVC và chức năng và vai trò của các tầng:
Tầng Model là phần lưu trữ dữ liệu cho các dự án ứng dụng, đóng vai trò kết nối giữa View và Controller Model có thể là một cơ sở dữ liệu hoàn chỉnh, hoặc đơn giản là một file JSON, XML, hay một đối tượng cơ bản.
- Tầng View: Hay được gọi là mà tầng giao diện là phần dành cho người dùng cuối
Nó hiển thị các thành phần UI cho người dùng thực hiện tương tác với ứng dụng
Tầng Controller là bộ phận xử lý các yêu cầu từ người dùng thông qua View Trong mỗi Controller, cả View và Model đều được tích hợp Controller nhận yêu cầu và cung cấp dữ liệu tương ứng, đảm bảo sự tương tác hiệu quả giữa người dùng và hệ thống.
Hình 2 Luồng hoạt động của mô hình MVC
Mô hình MVC được thực hiện như sau:
- Yêu cầu của Client khi gửi lên Server thì sẽ bị Controller tiến hành tiếp nhận và phân tích yêu cầu đó
- Sau khi nhận yêu cầu từ user Controller tiến hành giao tiếp với Model
- Model tiến hành xử lý dữ liệu và gửi lại cho Controller
GIAO HÀNG NHANH
1.5.1 Giới thiệu về giao hàng nhanh
Giao hàng nhanh là dịch vụ vận chuyển hàng hóa từ điểm gửi đến điểm nhận trong thời gian ngắn nhất, thường sử dụng các phương tiện như máy bay, xe tải và xe máy để đảm bảo sự nhanh chóng và an toàn Dịch vụ này rất cần thiết trong các trường hợp cần giao hàng gấp hoặc đến những địa điểm khó tiếp cận, đóng vai trò quan trọng trong lĩnh vực vận chuyển hàng hóa và góp phần vào sự phát triển của nền kinh tế.
Dự án website bán nông sản đã tận dụng API của Giao Hàng Nhanh để tối ưu hóa quy trình đặt hàng cho người dùng, mang lại nhiều lợi ích như cải thiện hiệu suất và trải nghiệm khách hàng.
- Tự động tính cước phí đơn hàng
Tích hợp Giao Hàng Nhanh Để nhúng API giao hàng nhanh vào trang web, ta cần thực hiện các bước sau:
Đăng ký tài khoản và lấy token trên trang web của giao hàng nhanh
- Bước 1: Truy cập vào link sau để đăng ký tài khoản https://sso.ghn.dev/v2/ssoLogin
- Bước 2: Sau khi đăng nhập thành công, bấm vào tên mình ở góc trên bên trái màn hình để xem thông tin cá nhân
- Bước 3: Tại ô Token API, nhấn Xem để lấy Token
Tính giá cước vận chuyển:
The structure of GHN's shipping fee API is as follows: it utilizes the endpoint https://online-gateway.ghn.vn/shiip/public-api/v2/shipping-order/fee, supporting both GET and POST methods Essential headers include the token and shop_id, while specific parameters are required for functionality.
service_id hoặc service_type_id:
service_id: int - ID của gói dịch vụ mà bạn chọn (lấy được ở phần 3)
service_type_id: Nếu không điền service_id, có thể thay thế bằng 1 trong 3 lựa chọn sau: 1: Express, 2: Standard, 3: Saving
insurance_value: int - giá trị của sản phẩm GHN căn cứ vào giá trị này để tính tiền bảo hiểm cho hàng hóa
coupon: String - Mã giảm giá của GHN Nếu không có, để rỗng: "" hoặc null
to_ward_code: String - ID Phường/ Xã người nhận
to_district_id: int - ID Quận/Huyện người nhận
from_district_id: int - ID Quận/Huyện người gửi
weight: int - trọng lượng hàng hóa (gram)
length: int - Chiều dài (cm)
width: int - Chiều rộng (cm)
height: int - Chiều cao (cm)
TÌM KIẾM BẰNG GIỌNG NÓI
Chức năng này sử dụng công nghệ Web Speech API do trình duyệt chrome cung cấp Nó được tích hợp sẵn vào trình duyệt
- Để sử dụng được với reactjs chúng ta cần cái thêm một thư viện Javascript có tên là “react-speech-recognition”
- Cách cài đặt: gõ dòng lệnh sau vào terminal: “yarn add react-speech-recognition” hoặc “npm i react-speech-recognition”
- Code cài đặt chức năng tìm kiếm giọng nói:
Một số chức năng nâng cao khác
Trang web bán nông sản được xây dựng trên i18n để có thể hiển thị ở 2 ngôn ngữ: + Tiếng Việt:
Hình 9 Ngôn ngữ Tiếng Việt
Hình 10 Ngôn ngữ Tiếng Anh Ưu điểm của trang web có dịch ngôn ngữ:
- Có thể đáp ứng nhu cầu của người dùng từ nhiều quốc gia và vùng lãnh thổ khác nhau
- Trang web có thể tiếp cận được với nhiều đối tượng khách hàng hơn, bao gồm người nói nhiều ngôn ngữ và khách hàng quốc tế
- Giúp trang web tăng khả năng xuất hiện trên các công cụ tìm kiếm quốc tế
- Nâng cao trải nghiệm của người dùng và giúp họ hiểu rõ hơn về nội dung trên trang web
- Là một cách để trang web thể hiện sự tôn trọng và quan tâm đến khách hàng của mình
Google Analytics là dịch vụ phân tích trang web giúp theo dõi và báo cáo lưu lượng truy cập cùng hành vi người dùng Việc tích hợp Google Analytics vào trang web mang lại nhiều lợi ích, bao gồm khả năng hiểu rõ hơn về hành vi khách hàng, tối ưu hóa trải nghiệm người dùng và cải thiện hiệu suất trang web.
Nhận thông tin chi tiết về lưu lượng truy cập trang web và hành vi người dùng, bao gồm nhân khẩu học, sở thích và cách sử dụng thiết bị, giúp tối ưu hóa chiến lược tiếp thị và nâng cao trải nghiệm người dùng.
- Theo dõi và đo lường hiệu quả của các chiến dịch marketing và nội dung website
- Xác định các khu vực của trang web cần cải thiện và tối ưu hóa trải nghiệm người dùng
- Đo lường tỷ lệ chuyển đổi và theo dõi tiến độ hướng tới mục tiêu kinh doanh
- Đưa ra quyết định dựa trên dữ liệu dựa trên số liệu hiệu suất trang web
Hình 11 Trang web bán nông sản đã được tích hợp vào Google Analytics 1.7.3 Thanh toán Online
Thanh toán trực tuyến là một chức năng quan trọng trên trang web, giúp khách hàng thực hiện giao dịch nhanh chóng và tiện lợi qua internet Việc tích hợp thanh toán trực tuyến mang lại nhiều lợi ích, bao gồm tăng cường trải nghiệm người dùng, tiết kiệm thời gian và chi phí, cũng như nâng cao tính an toàn cho các giao dịch tài chính.
- Tiết kiệm thời gian và công sức cho khách hàng, không cần phải đến nơi để thanh toán
- Nâng cao tính tiện lợi cho khách hàng, đặc biệt là đối với những người có lối sống bận rộn
- Tăng tính bảo mật và đáng tin cậy của việc thanh toán, giảm rủi ro cho cả khách hàng và doanh nghiệp
- Tăng khả năng tiếp cận với khách hàng ở xa hoặc ở những khu vực khó tiếp cận
- Giúp doanh nghiệp quản lý tài chính hiệu quả hơn, đặc biệt là trong việc theo dõi đơn hàng và thu tiền
- Tăng doanh số bán hàng và mở rộng thị trường tiêu thụ
- Tạo sự thu hút và tạo điểm khác biệt so với các đối thủ cạnh tranh
- Tăng khả năng tiếp cận với khách hàng ở xa hoặc ở những khu vực khó tiếp cận
- Giúp doanh nghiệp quản lý tài chính hiệu quả hơn, đặc biệt là trong việc theo dõi đơn hàng và thu tiền
- Tăng doanh số bán hàng và mở rộng thị trường tiêu thụ
- Tạo sự thu hút và tạo điểm khác biệt so với các đối thủ cạnh tranh
Từ những ưu điểm đó website đã tích hợp API của VNPay để tiến hành cho việc thanh toán của khách hàng
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
SEQUENCE DIAGRAM
CHƯƠNG 3: THUYẾT KẾ PHẦN MỀM
3.1 THIẾT KẾ CƠ SỞ DỮ LIỆU
3.1.2 ĐẶC TẢ CƠ SỞ DỮ LIỆU
CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ
4.1.3 CÁC BƯỚC KHỞI CHẠY ỨNG DỤNG
4.2.2.1 TRONG PHẠM VI KIỂM THỬ
4.2.2.2 NGOÀI PHẠM VI KIỂM THỬ
1.2 CHƯƠNG TRÌNH ĐÃ ĐẠT ĐƯỢC
Tuần Nội dung công việc
1 - Xin hướng dẫn đề tài
- Tiến hành khởi chạy project tiểu luận
- Tìm hiểu các website bán nông sản hiện nay
4-5 - Xây dựng app từ website
- Tìm kiếm bằng giọng nói
8-10 - Tích hợp giao hàng nhanh
11-12 - Bảng giá trị dinh dưỡng của nông sản
- Kiểm thử sửa lỗi Ý kiến của giáo viên hướng dẫn Ngày tháng năm
(Ký và ghi rõ họ tên) Người viết đề cương
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1
2 MỤC TIÊU CỦA ĐỀ TÀI 1
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGUYÊN CỨU 2
4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 3
5 KHẢO SÁT MỘT SỐ WEBSITE TƯƠNG TỰ 3
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 6
1.1 MÔ HÌNH MVC THIẾT KẾ WEBSITE 6
1.1.2 Triển khai vào xây dựng website 9
1.2.1 Giới thiệu công nghệ MERN Stack 9
1.2.2 Xây dựng website với MERN Stack 10
1.3.1 Giới thiệu về Chat GPT 10
1.3.2 Các bước nhúng Chat GPT vào website 11
1.4.2 Nhúng live chat fanpage Facebook vào trang web 16
1.5.1 Giới thiệu về giao hàng nhanh 18
1.6 TÌM KIẾM BẰNG GIỌNG NÓI 20
1.7 Một số chức năng nâng cao khác 22
Từ những ưu điểm đó website đã tích hợp API của VNPay để tiến hành cho việc thanh toán của khách hàng 25
CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 26
2.1.2.1 Đặc tả use case Login 28
2.1.2.2 Đặc tả use case View home page 29
2.1.2.3 Đặc tả use case Search Product 29
2.1.2.4 Đặc tả use case Filter Product 30
2.1.2.5 Đặc tả use case View product detail 30
2.1.2.6 Đặc tả use case Add product to cart 31
2.1.2.7 Đặc tả use case Manage shopping cart 31
2.1.2.8 Đặc tả use case Manage profile 32
2.1.2.9 Đặc tả use case Manage self orders -Checkout 33
2.1.2.10 Đặc tả use-case Manage self orders - Cancel order 34
2.1.2.11 Đặc tả use case Manage self orders -Review product 34
2.1.2.12 Đặc tả use case Manage self orders -View admin page 35
2.1.2.13 Đặc tả use case manage product - add product 35
2.1.2.14 Đặc tả use case manage product - update product 36
2.1.2.15 Đặc tả use case manage product - delete product 37
2.1.2.16 Đặc tả use case Manage product category - add category 37
2.1.2.17 Đặc tả use case Manage product category - update category 38
2.1.2.18 Đặc tả use case Manage product category - delete category 39
2.1.2.19 Đặc tả use case Manage orders - Approve order 39
2.1.2.20 Đặc tả use case Manage orders - Delete order 40
2.1.2.21 Đặc tả use case Manage user account - Block account 40
2.1.2.22 Đặc tả use case Manage user account - Add account 40
2.1.2.23 Đặc tả use case Manage user account – statistic 41
CHƯƠNG 3 THIẾT KẾ PHẦN MỀM 48
3.1 THIẾT KẾ CƠ SỞ DỮ LIỆU 48
3.1.2 Chuyển ERD thành cơ sở dữ liệu trong MongoDB 48
3.1.3 Mô tả chi tiết cơ sở dữ liệu 50
CHƯƠNG 4 CÀI ĐẶT VÀ KIỂM THỬ 71
4.1.3 Các bước khởi chạy ứng dụng 71
Hình 2 Luồng hoạt động của mô hình MVC 7
Hình 3: Trải nghiệm của người dùng với chatGPT 11
Hình 4: Tạo một API Key mới 12
Hình 5: Trang web lấy key API 12
Hình 6 Tích hợp vào code 13
Hình 7 Xây dựng giao diện cho khung chat GPT 15
Hình 8 Live chat fanpage Facebook 16
Hình 9 Ngôn ngữ Tiếng Việt 22
Hình 11 Ngôn ngữ Tiếng Anh 23
Hình 12 Trang web bán nông sản đã được tích hợp vào Google Analytics 24
Hình 13 Thanh toán đơn hàng với VNPay 26
Hình 16 Sơ đồ hoạt động xem trang chủ 42
Hình 17 Sơ đồ hoạt động tìm kiếm sản phẩm 43
Hình 18 Sơ đồ hoạt động xem chi tiết sản phẩm 43
Hình 19 Sơ đồ hoạt động đăng kí 44
Hình 20 Sơ đồ hoạt động đăng nhập 44
Hình 21 Sơ đồ hoạt động quên mật khẩu 45
Hình 22 Sơ đồ hoạt động cập nhật thông tin profile 45
Hình 23 Sơ đồ hoạt động quản lý sản phẩm 46
Hình 24 Sơ đồ hoạt động quản lý danh mục 46
Hình 25 Sơ đồ hoạt động xóa sản phẩm, danh mục 47
Hình 26 Lược đồ ERD chi tiết 48
Hình 27 Giao diện trang chủ 55
Hình 28 Giao diện trang sản phẩm 56
Hình 29 Giao diện trang chi tiết sản phẩm 57
Hình 30 Giao diện trang giỏ hàng 58
Hình 31 Giao diện trang giới thiệu 59
Hình 32 Giao diện trang liên hệ 60
Hình 33 Giao diện trang đăng nhập 61
Hình 34 Giao diện trang đăng kí 61
Hình 35 Giao diện trang thông tin cá nhân người dùng 62
Hình 36 Giao diện trang lịch sử đặt hàng 63
Hình 37 Giao diện trang dashboard 64
Hình 38 Giao diện trang quản lý khách hàng 64
Hình 39 Giao diện trang quản lý sản phẩm 65
Hình 40 Giao diện trang thêm mới sản phẩm 66
Hình 41 Giao diện trang quản lý đơn hàng 67
Hình 42 Giao diện trang quản lý thương hiệu 67
Hình 43 Giao diện trang quản lý slides 68
Hình 44 Giao diện trang thêm mới slides 69
Hình 45 Giao diện trang thông tin admin 69
Hình 46 Giao diện trang thống kê 70
Bảng 1 Đặc tả use case Login 29
Bảng 2 Đặc tả use case View home page 29
Bảng 3 Đặc tả use case Search Product 30
Bảng 4 Đặc tả use case Filter Product 30
Bảng 5 Đặc tả use case View product detail 31
Bảng 6 Đặc tả use case Add product to cart 31
Bảng 7 Đặc tả use case Manage shopping cart 32
Bảng 8 Đặc tả use case Manage profile 33
Bảng 9 Đặc tả use case Manage self orders -Checkout 34
Bảng 10 Đặc tả use-case Manage self orders - Cancel order 34
Bảng 11 Đặc tả use case Manage self orders -Review product 35
Bảng 12 Đặc tả use case Manage self orders -View admin page 35
Bảng 13 Đặc tả use case manage product - add product 36
Bảng 14 Đặc tả use case manage product - update product 37
Bảng 15 Đặc tả use case manage product - delete product 37
Bảng 16 Đặc tả use case Manage product category - add category 38
Bảng 17 Đặc tả use case Manage product category - update category 38
Bảng 18 Đặc tả use case Manage product category - delete category 39
Bảng 19 Đặc tả use case Manage orders - Approve order 39
Bảng 20 Đặc tả use case Manage orders - Delete order 40
Bảng 21 Đặc tả use case Manage user account - Block account 40
Bảng 22 Đặc tả use case Manage user account - Add account 41
Bảng 23 Đặc tả use case Manage user account - statistic 41
Bảng 24 Mô tả kiểu dữ liệu bảng user 51
Bảng 25 Mô tả kiểu dữ liệu bảng Product 52
Bảng 26 Mô tả kiểu dữ liệu bảng ProductCategory 52
Bảng 27 Mô tả kiểu dữ liệu bảng Order 53
Bảng 28 Mô tả kiểu dữ liệu bảng Slide 54
Bảng 29 Mô tả kiểu dữ liệu bảng Brand 54
Bảng 30 Mô tả kiểu dữ liệu bảng Token 54
DANH MỤC TỪ VIẾT TẮT
CSDL Cơ sở dữ liệu
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Việt Nam, với nền nông nghiệp phát triển, có nhiều nông trang và nông trại nhỏ lẻ, thường sản xuất theo hình thức tự cung tự cấp Tuy nhiên, nông sản thường rơi vào tình trạng "được mùa mất giá" hoặc "được giá mất mùa", dẫn đến việc nông dân không thể tự chủ đầu ra cho sản phẩm của mình Hơn nữa, giá nông sản thường bị đội lên cao do sự hiện diện của nhiều khâu trung gian giữa sản xuất và tiêu dùng.
Với sự phát triển của khoa học và công nghệ, mua sắm online ngày càng trở nên phổ biến, đặc biệt trong bối cảnh đại dịch COVID-19 khiến mọi người hạn chế ra ngoài Để đáp ứng nhu cầu mua sắm trực tuyến, các doanh nghiệp nông sản truyền thống cần xây dựng website thương mại điện tử nhằm giới thiệu và bán sản phẩm của mình trên không gian mạng.
Nhóm chúng em quyết định nghiên cứu và phát triển một website bán hàng hoàn chỉnh sử dụng công nghệ MERN Stack, nhằm đảm bảo chức năng của một website thương mại điện tử Website này giúp người tiêu dùng dễ dàng tìm kiếm sản phẩm và mua với giá do nhà nông đưa ra, đồng thời cung cấp thông tin rõ ràng về nguồn gốc nông sản Đối với chủ trang web, họ có thể quản lý sản phẩm và quảng bá thương hiệu của mình, góp phần vào sự phát triển nông nghiệp ứng dụng công nghệ cao trên toàn quốc.
2 MỤC TIÊU CỦA ĐỀ TÀI
Tìm hiểu công nghệ MERN Stack gồm: NodeJS, ExpressJS, ReactJS, MongoDB
Tìm hiểu các website bán hàng tương tự
Phân tích thiết kế website bán nông sản
Cài đặt website bán nông sản sử dụng công nghệ MERN Stack gồm các chức năng cơ bản:
Để tối ưu hóa trải nghiệm người dùng, hệ thống cung cấp các chức năng như đăng ký, đăng nhập và đăng xuất tài khoản Người dùng có thể quản lý tài khoản của mình bằng cách xem, cập nhật thông tin, đổi mật khẩu hoặc lấy lại mật khẩu khi cần Chức năng đặt hàng cho phép người dùng dễ dàng xem lịch sử đặt hàng và tìm kiếm sản phẩm Thêm vào đó, người dùng có thể xem chi tiết sản phẩm và thực hiện thanh toán qua Paypal Hệ thống cũng hỗ trợ quản lý sản phẩm với các tính năng cập nhật, thêm và xóa sản phẩm, cũng như quản lý người dùng và đơn hàng Cuối cùng, quản lý thương hiệu, danh mục và chứng nhận sản phẩm, cùng với việc xem thống kê, giúp nâng cao hiệu quả quản lý.
The technologies that the team will explore to enhance their thesis include Frontend development using ReactJS and React Native, Backend development with NodeJS, and MongoDB for database management, along with various libraries and frameworks such as Axios and Sass.
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGUYÊN CỨU
- Trong đề tài này, nhóm nghiên cứu dựa trên xu hướng của các trang web bán hàng hiện nay
- Tìm hiểu và áp dụng công nghệ MERN Stack (MongoDB, Express, React, NodeJS) để xây dựng ra được một trang web hoàn chỉnh
- Lĩnh vực nghiên cứu: Website bán hàng nông sản online
- Tập trung vào việc xử lý các nghiệp vụ cơ bản của website bán hàng như: Xem sản phẩm, mua hàng, quản lý sản phẩm, quản lý người dùng, …
- Về công nghệ: tập trung vào tìm hiểu công nghệ MERN Stack và ứng dụng nó vào việc xây dựng một trang web bán hàng nông sản online
Phương pháp phân tích – tổng hợp lý thuyết bao gồm việc nghiên cứu và tìm hiểu các tài liệu cũng như ứng dụng liên quan đến công nghệ, mô hình và lý thuyết cần thiết Điều này giúp xây dựng nền tảng vững chắc cho việc áp dụng các khái niệm lý thuyết vào thực tiễn.
Phương pháp chuyên gia là việc tham khảo ý kiến từ Thầy hướng dẫn và những người có kinh nghiệm liên quan đến đề tài, nhằm nâng cao tính chính xác và độ tin cậy của thông tin.
- Phương pháp mô hình hóa: Mô phỏng website từ bước thiết kế cài đặt cho đến kết quả thành phẩm của website
4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC
Nghiên cứu và hiểu được các thành phần chính trong công nghệ MERN Stack như: NodeJS, Express framework, MongoDB database, ReactJS library
Ứng dụng được công nghệ MERN Stack vào việc xây dựng website bán hàng nông sản online
Để phát triển một trang web bán hàng online hiệu quả, cần tích hợp các chức năng cơ bản như đăng nhập và đăng ký tài khoản, cho phép người dùng truy cập để xem thông tin sản phẩm và thực hiện mua sắm Ngoài ra, chức năng tìm kiếm và lọc sản phẩm, cùng với giỏ hàng và thanh toán, cũng rất quan trọng để nâng cao trải nghiệm người dùng.
Phát triển các tính năng cho quản trị viên: quản lý sản phẩm, quản lý người dùng, quản lý đơn hàng, thống kê, báo cáo
5 KHẢO SÁT MỘT SỐ WEBSITE TƯƠNG TỰ
Trang web này chuyên cung cấp dịch vụ mua bán nông sản, tập trung vào các sản phẩm nông nghiệp của doanh nghiệp và đặc sản đến từ vùng Tây Bắc Các sản phẩm này mang đậm bản sắc văn hóa và đặc trưng của vùng núi Tây Bắc, hứa hẹn mang đến cho người tiêu dùng những trải nghiệm độc đáo và chất lượng.
- Địa chỉ trang web: https://www.nongsantaybac.com/
- Giao diện đơn giản dễ sử dụng
- Sản phẩm đặt thù ở vùng núi Tây Bắc
- Thông tin sản phẩm hiển thị đầy đủ dễ dàng so sánh
- Không đa dạng sản phẩm
Trang web mua bán nông sản cho phép người dùng dễ dàng mua và đăng tin bán sản phẩm nông nghiệp Người dùng cũng có thể đăng tin về nhu cầu cung cầu cho các loại nông sản cụ thể, tạo điều kiện thuận lợi cho việc giao dịch và kết nối giữa người mua và người bán.
- Địa chỉ trang web: https://nongsanantoanlongan.vn/
- Giao diện đơn giản dễ sử dụng
- Phân loại sản phẩm rõ rang
- Thông tin sản phẩm chưa đầy đủ về giá cũng như thông tin
- Là một trang web chuyên cung cấp các sản phẩm đã qua chế biến thành phẩm từ các loại nông sản như bánh, kẹo, …
- Địa chỉ trang web: http://nongsanviet.net/
- Giao diện sử dụng không thân thiện
- Không có thông tin sản phẩm chi tiết
BachhoaXANH.com là trang web hàng đầu về thực phẩm nông sản tại Việt Nam, được ra mắt nhằm phục vụ nhu cầu mua sắm trực tuyến của người dùng tại TP.HCM.
- Địa chỉ trang web: http://nongsanviet.net/
- Chính sách mua hàng rõ ràng
- Địa điểm giao hàng bao khắp diện tích Tp Hồ Chí Minh
- Giao diện dễ sử dụng
- Chi phí giao hàng còn cao
- Là trang web chuyên bán và cung cấp sản phẩm về trái cây nhập khẩu được nhập trực tiếp từ các nước như Úc, Mỹ, Nhật, …
- Địa chỉ trang web: https://minhphuongfruit.com/
- Chính sách mua hàng rõ ràng
- Giao diện dễ sử dụng
- Chi phí giao hàng còn cao
- Khó tiếp cận với người tiêu dùng
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
1.1 MÔ HÌNH MVC THIẾT KẾ WEBSITE
Mô hình MVC, viết tắt của "Model-View-Controller", là một khuôn mẫu kiến trúc phần mềm quan trọng trong việc phát triển ứng dụng máy tính Mô hình này bao gồm ba thành phần chính: Model, View và Controller, mỗi thành phần đảm nhận các nhiệm vụ và chức năng riêng biệt, độc lập với nhau, giúp tối ưu hóa quá trình xây dựng và phát triển ứng dụng.
- View (giao diện người dùng)
- Controller (trung tâm điều khiển)
MVC là một mẫu thiết kế phổ biến, thường được sử dụng để cấu trúc các dự án Nhiều dự án thực tế hiện vẫn áp dụng mô hình MVC và nó cũng được giảng dạy tại nhiều trường đại học và cơ sở giáo dục khác.
Các thành phần của mô hình MVC và chức năng và vai trò của các tầng:
Tầng Model là nơi lưu trữ toàn bộ dữ liệu của các dự án ứng dụng, đóng vai trò kết nối giữa View và Controller Model có thể là một cơ sở dữ liệu hoàn chỉnh, một file JSON, XML, hoặc thậm chí là một đối tượng đơn giản.
- Tầng View: Hay được gọi là mà tầng giao diện là phần dành cho người dùng cuối
Nó hiển thị các thành phần UI cho người dùng thực hiện tương tác với ứng dụng
Tầng Controller là thành phần xử lý các yêu cầu từ người dùng thông qua View Trong mỗi Controller, cả View và Model đều được tích hợp, cho phép nó nhận yêu cầu và trả về dữ liệu phù hợp.
Hình 2 Luồng hoạt động của mô hình MVC
Mô hình MVC được thực hiện như sau:
- Yêu cầu của Client khi gửi lên Server thì sẽ bị Controller tiến hành tiếp nhận và phân tích yêu cầu đó
- Sau khi nhận yêu cầu từ user Controller tiến hành giao tiếp với Model
- Model tiến hành xử lý dữ liệu và gửi lại cho Controller
THIẾT KẾ PHẦN MỀM
THIẾT KẾ CƠ SỞ DỮ LIỆU
3.1.2 ĐẶC TẢ CƠ SỞ DỮ LIỆU
CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ
4.1.3 CÁC BƯỚC KHỞI CHẠY ỨNG DỤNG
4.2.2.1 TRONG PHẠM VI KIỂM THỬ
4.2.2.2 NGOÀI PHẠM VI KIỂM THỬ
1.2 CHƯƠNG TRÌNH ĐÃ ĐẠT ĐƯỢC
Tuần Nội dung công việc
1 - Xin hướng dẫn đề tài
- Tiến hành khởi chạy project tiểu luận
- Tìm hiểu các website bán nông sản hiện nay
4-5 - Xây dựng app từ website
- Tìm kiếm bằng giọng nói
8-10 - Tích hợp giao hàng nhanh
11-12 - Bảng giá trị dinh dưỡng của nông sản
- Kiểm thử sửa lỗi Ý kiến của giáo viên hướng dẫn Ngày tháng năm
(Ký và ghi rõ họ tên) Người viết đề cương
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1
2 MỤC TIÊU CỦA ĐỀ TÀI 1
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGUYÊN CỨU 2
4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 3
5 KHẢO SÁT MỘT SỐ WEBSITE TƯƠNG TỰ 3
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 6
1.1 MÔ HÌNH MVC THIẾT KẾ WEBSITE 6
1.1.2 Triển khai vào xây dựng website 9
1.2.1 Giới thiệu công nghệ MERN Stack 9
1.2.2 Xây dựng website với MERN Stack 10
1.3.1 Giới thiệu về Chat GPT 10
1.3.2 Các bước nhúng Chat GPT vào website 11
1.4.2 Nhúng live chat fanpage Facebook vào trang web 16
1.5.1 Giới thiệu về giao hàng nhanh 18
1.6 TÌM KIẾM BẰNG GIỌNG NÓI 20
1.7 Một số chức năng nâng cao khác 22
Từ những ưu điểm đó website đã tích hợp API của VNPay để tiến hành cho việc thanh toán của khách hàng 25
CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 26
2.1.2.1 Đặc tả use case Login 28
2.1.2.2 Đặc tả use case View home page 29
2.1.2.3 Đặc tả use case Search Product 29
2.1.2.4 Đặc tả use case Filter Product 30
2.1.2.5 Đặc tả use case View product detail 30
2.1.2.6 Đặc tả use case Add product to cart 31
2.1.2.7 Đặc tả use case Manage shopping cart 31
2.1.2.8 Đặc tả use case Manage profile 32
2.1.2.9 Đặc tả use case Manage self orders -Checkout 33
2.1.2.10 Đặc tả use-case Manage self orders - Cancel order 34
2.1.2.11 Đặc tả use case Manage self orders -Review product 34
2.1.2.12 Đặc tả use case Manage self orders -View admin page 35
2.1.2.13 Đặc tả use case manage product - add product 35
2.1.2.14 Đặc tả use case manage product - update product 36
2.1.2.15 Đặc tả use case manage product - delete product 37
2.1.2.16 Đặc tả use case Manage product category - add category 37
2.1.2.17 Đặc tả use case Manage product category - update category 38
2.1.2.18 Đặc tả use case Manage product category - delete category 39
2.1.2.19 Đặc tả use case Manage orders - Approve order 39
2.1.2.20 Đặc tả use case Manage orders - Delete order 40
2.1.2.21 Đặc tả use case Manage user account - Block account 40
2.1.2.22 Đặc tả use case Manage user account - Add account 40
2.1.2.23 Đặc tả use case Manage user account – statistic 41
CHƯƠNG 3 THIẾT KẾ PHẦN MỀM 48
3.1 THIẾT KẾ CƠ SỞ DỮ LIỆU 48
3.1.2 Chuyển ERD thành cơ sở dữ liệu trong MongoDB 48
3.1.3 Mô tả chi tiết cơ sở dữ liệu 50
CHƯƠNG 4 CÀI ĐẶT VÀ KIỂM THỬ 71
4.1.3 Các bước khởi chạy ứng dụng 71
Hình 2 Luồng hoạt động của mô hình MVC 7
Hình 3: Trải nghiệm của người dùng với chatGPT 11
Hình 4: Tạo một API Key mới 12
Hình 5: Trang web lấy key API 12
Hình 6 Tích hợp vào code 13
Hình 7 Xây dựng giao diện cho khung chat GPT 15
Hình 8 Live chat fanpage Facebook 16
Hình 9 Ngôn ngữ Tiếng Việt 22
Hình 11 Ngôn ngữ Tiếng Anh 23
Hình 12 Trang web bán nông sản đã được tích hợp vào Google Analytics 24
Hình 13 Thanh toán đơn hàng với VNPay 26
Hình 16 Sơ đồ hoạt động xem trang chủ 42
Hình 17 Sơ đồ hoạt động tìm kiếm sản phẩm 43
Hình 18 Sơ đồ hoạt động xem chi tiết sản phẩm 43
Hình 19 Sơ đồ hoạt động đăng kí 44
Hình 20 Sơ đồ hoạt động đăng nhập 44
Hình 21 Sơ đồ hoạt động quên mật khẩu 45
Hình 22 Sơ đồ hoạt động cập nhật thông tin profile 45
Hình 23 Sơ đồ hoạt động quản lý sản phẩm 46
Hình 24 Sơ đồ hoạt động quản lý danh mục 46
Hình 25 Sơ đồ hoạt động xóa sản phẩm, danh mục 47
Hình 26 Lược đồ ERD chi tiết 48
Hình 27 Giao diện trang chủ 55
Hình 28 Giao diện trang sản phẩm 56
Hình 29 Giao diện trang chi tiết sản phẩm 57
Hình 30 Giao diện trang giỏ hàng 58
Hình 31 Giao diện trang giới thiệu 59
Hình 32 Giao diện trang liên hệ 60
Hình 33 Giao diện trang đăng nhập 61
Hình 34 Giao diện trang đăng kí 61
Hình 35 Giao diện trang thông tin cá nhân người dùng 62
Hình 36 Giao diện trang lịch sử đặt hàng 63
Hình 37 Giao diện trang dashboard 64
Hình 38 Giao diện trang quản lý khách hàng 64
Hình 39 Giao diện trang quản lý sản phẩm 65
Hình 40 Giao diện trang thêm mới sản phẩm 66
Hình 41 Giao diện trang quản lý đơn hàng 67
Hình 42 Giao diện trang quản lý thương hiệu 67
Hình 43 Giao diện trang quản lý slides 68
Hình 44 Giao diện trang thêm mới slides 69
Hình 45 Giao diện trang thông tin admin 69
Hình 46 Giao diện trang thống kê 70
Bảng 1 Đặc tả use case Login 29
Bảng 2 Đặc tả use case View home page 29
Bảng 3 Đặc tả use case Search Product 30
Bảng 4 Đặc tả use case Filter Product 30
Bảng 5 Đặc tả use case View product detail 31
Bảng 6 Đặc tả use case Add product to cart 31
Bảng 7 Đặc tả use case Manage shopping cart 32
Bảng 8 Đặc tả use case Manage profile 33
Bảng 9 Đặc tả use case Manage self orders -Checkout 34
Bảng 10 Đặc tả use-case Manage self orders - Cancel order 34
Bảng 11 Đặc tả use case Manage self orders -Review product 35
Bảng 12 Đặc tả use case Manage self orders -View admin page 35
Bảng 13 Đặc tả use case manage product - add product 36
Bảng 14 Đặc tả use case manage product - update product 37
Bảng 15 Đặc tả use case manage product - delete product 37
Bảng 16 Đặc tả use case Manage product category - add category 38
Bảng 17 Đặc tả use case Manage product category - update category 38
Bảng 18 Đặc tả use case Manage product category - delete category 39
Bảng 19 Đặc tả use case Manage orders - Approve order 39
Bảng 20 Đặc tả use case Manage orders - Delete order 40
Bảng 21 Đặc tả use case Manage user account - Block account 40
Bảng 22 Đặc tả use case Manage user account - Add account 41
Bảng 23 Đặc tả use case Manage user account - statistic 41
Bảng 24 Mô tả kiểu dữ liệu bảng user 51
Bảng 25 Mô tả kiểu dữ liệu bảng Product 52
Bảng 26 Mô tả kiểu dữ liệu bảng ProductCategory 52
Bảng 27 Mô tả kiểu dữ liệu bảng Order 53
Bảng 28 Mô tả kiểu dữ liệu bảng Slide 54
Bảng 29 Mô tả kiểu dữ liệu bảng Brand 54
Bảng 30 Mô tả kiểu dữ liệu bảng Token 54
DANH MỤC TỪ VIẾT TẮT
CSDL Cơ sở dữ liệu
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Việt Nam là một quốc gia nông nghiệp với nhiều nông trang nhỏ lẻ, nơi sản xuất chủ yếu theo hình thức tự cung tự cấp và bán sản phẩm cho thương lái hoặc công ty chế biến Một thực trạng phổ biến trong ngành nông sản là "được mùa mất giá" hoặc "được giá mất mùa", dẫn đến việc nông dân không thể tự chủ đầu ra cho sản phẩm của mình Hơn nữa, giá nông sản thường bị đội lên cao do có quá nhiều khâu trung gian trong quá trình từ sản xuất đến tay người tiêu dùng.
Với sự phát triển nhanh chóng của khoa học và công nghệ, mua sắm trực tuyến ngày càng trở nên phổ biến, đặc biệt trong bối cảnh đại dịch COVID-19 khi mọi người hạn chế ra ngoài Để đáp ứng nhu cầu này, các doanh nghiệp kinh doanh nông sản theo phương thức truyền thống cần xây dựng website thương mại điện tử, giúp họ tiếp cận khách hàng và bày bán sản phẩm trên không gian mạng.
Nhóm chúng em quyết định nghiên cứu và phát triển một website bán hàng hoàn chỉnh sử dụng công nghệ MERN Stack, nhằm đảm bảo đầy đủ chức năng của một trang thương mại điện tử Website sẽ giúp người tiêu dùng dễ dàng tìm kiếm sản phẩm và mua với giá do nhà nông đưa ra, đồng thời cung cấp thông tin rõ ràng về nguồn gốc nông sản Đối với chủ trang web, họ có thể quản lý sản phẩm và quảng bá thương hiệu của mình, góp phần vào việc phát triển nông nghiệp ứng dụng công nghệ cao trên toàn quốc.
2 MỤC TIÊU CỦA ĐỀ TÀI
Tìm hiểu công nghệ MERN Stack gồm: NodeJS, ExpressJS, ReactJS, MongoDB
Tìm hiểu các website bán hàng tương tự
Phân tích thiết kế website bán nông sản
Cài đặt website bán nông sản sử dụng công nghệ MERN Stack gồm các chức năng cơ bản:
Để tối ưu hóa trải nghiệm người dùng, hệ thống cung cấp các chức năng như đăng ký, đăng nhập và đăng xuất tài khoản Người dùng có thể quản lý tài khoản của mình bằng cách xem, cập nhật thông tin, đổi mật khẩu hoặc lấy lại mật khẩu Chức năng đặt hàng cho phép người dùng dễ dàng thực hiện và theo dõi lịch sử đặt hàng Hệ thống cũng hỗ trợ tìm kiếm sản phẩm, xem chi tiết sản phẩm và thanh toán qua Paypal Đối với quản lý, người quản trị có thể cập nhật, thêm hoặc xóa sản phẩm, quản lý người dùng, đơn hàng, cũng như thương hiệu, danh mục và chứng nhận sản phẩm Cuối cùng, người quản trị có thể xem thống kê để theo dõi hiệu quả hoạt động.
The team will explore various technologies to enhance their thesis, including ReactJS and React Native for frontend development, NodeJS for backend services, and MongoDB for database management Additionally, they will utilize libraries and frameworks such as Axios and Sass to support their project.
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGUYÊN CỨU
- Trong đề tài này, nhóm nghiên cứu dựa trên xu hướng của các trang web bán hàng hiện nay
- Tìm hiểu và áp dụng công nghệ MERN Stack (MongoDB, Express, React, NodeJS) để xây dựng ra được một trang web hoàn chỉnh
- Lĩnh vực nghiên cứu: Website bán hàng nông sản online
- Tập trung vào việc xử lý các nghiệp vụ cơ bản của website bán hàng như: Xem sản phẩm, mua hàng, quản lý sản phẩm, quản lý người dùng, …
- Về công nghệ: tập trung vào tìm hiểu công nghệ MERN Stack và ứng dụng nó vào việc xây dựng một trang web bán hàng nông sản online
Phương pháp phân tích và tổng hợp lý thuyết là quá trình nghiên cứu và tìm hiểu các tài liệu, ứng dụng liên quan đến công nghệ, mô hình và lý thuyết cần thiết Việc này giúp nắm bắt kiến thức sâu rộng và áp dụng hiệu quả trong thực tiễn.
Phương pháp chuyên gia là việc tham khảo ý kiến từ Thầy hướng dẫn và những người có kinh nghiệm trong lĩnh vực liên quan đến đề tài Điều này giúp tăng cường tính chính xác và độ tin cậy của thông tin.
- Phương pháp mô hình hóa: Mô phỏng website từ bước thiết kế cài đặt cho đến kết quả thành phẩm của website
4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC
Nghiên cứu và hiểu được các thành phần chính trong công nghệ MERN Stack như: NodeJS, Express framework, MongoDB database, ReactJS library
Ứng dụng được công nghệ MERN Stack vào việc xây dựng website bán hàng nông sản online
Phát triển các chức năng cơ bản cho một trang web bán hàng online bao gồm: đăng nhập và đăng ký tài khoản, cho phép người dùng truy cập để xem thông tin sản phẩm và thực hiện mua hàng Ngoài ra, cần có chức năng tìm kiếm và lọc sản phẩm, cùng với giỏ hàng và quy trình thanh toán hiệu quả.
Phát triển các tính năng cho quản trị viên: quản lý sản phẩm, quản lý người dùng, quản lý đơn hàng, thống kê, báo cáo
5 KHẢO SÁT MỘT SỐ WEBSITE TƯƠNG TỰ
Trang web của chúng tôi chuyên cung cấp dịch vụ mua bán nông sản, tập trung vào các sản phẩm nông nghiệp đặc trưng từ doanh nghiệp và vùng Tây Bắc Những sản phẩm này không chỉ mang đậm bản sắc văn hóa của vùng núi Tây Bắc mà còn đảm bảo chất lượng và độ tươi ngon, phục vụ nhu cầu tiêu dùng của khách hàng.
- Địa chỉ trang web: https://www.nongsantaybac.com/
- Giao diện đơn giản dễ sử dụng
- Sản phẩm đặt thù ở vùng núi Tây Bắc
- Thông tin sản phẩm hiển thị đầy đủ dễ dàng so sánh
- Không đa dạng sản phẩm
Trang web mua bán nông sản cung cấp nền tảng cho người dùng không chỉ mua mà còn đăng tin bán sản phẩm nông nghiệp Người dùng có thể dễ dàng đăng tin về nhu cầu và cung cấp các loại nông sản khác nhau, tạo cơ hội kết nối giữa người mua và người bán trong lĩnh vực nông nghiệp.
- Địa chỉ trang web: https://nongsanantoanlongan.vn/
- Giao diện đơn giản dễ sử dụng
- Phân loại sản phẩm rõ rang
- Thông tin sản phẩm chưa đầy đủ về giá cũng như thông tin
- Là một trang web chuyên cung cấp các sản phẩm đã qua chế biến thành phẩm từ các loại nông sản như bánh, kẹo, …
- Địa chỉ trang web: http://nongsanviet.net/
- Giao diện sử dụng không thân thiện
- Không có thông tin sản phẩm chi tiết
BachhoaXANH.com là trang web hàng đầu tại Việt Nam chuyên cung cấp thực phẩm nông sản, được ra mắt nhằm phục vụ nhu cầu mua sắm trực tuyến của người tiêu dùng tại TP.HCM.
- Địa chỉ trang web: http://nongsanviet.net/
- Chính sách mua hàng rõ ràng
- Địa điểm giao hàng bao khắp diện tích Tp Hồ Chí Minh
- Giao diện dễ sử dụng
- Chi phí giao hàng còn cao
- Là trang web chuyên bán và cung cấp sản phẩm về trái cây nhập khẩu được nhập trực tiếp từ các nước như Úc, Mỹ, Nhật, …
- Địa chỉ trang web: https://minhphuongfruit.com/
- Chính sách mua hàng rõ ràng
- Giao diện dễ sử dụng
- Chi phí giao hàng còn cao
- Khó tiếp cận với người tiêu dùng
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
1.1 MÔ HÌNH MVC THIẾT KẾ WEBSITE
Mô hình MVC, viết tắt của “Model-View-Controller”, là một khuôn mẫu kiến trúc phần mềm được ứng dụng trong phát triển ứng dụng máy tính Mô hình này bao gồm ba thành phần chính, mỗi thành phần đảm nhiệm các nhiệm vụ và chức năng riêng biệt, độc lập với nhau Các thành phần của mô hình MVC là:
- View (giao diện người dùng)
- Controller (trung tâm điều khiển)
MVC là một mẫu thiết kế phổ biến, thường được áp dụng trong việc cấu trúc dự án Nhiều dự án thực tế hiện nay vẫn sử dụng mô hình MVC, và nó cũng được giảng dạy tại nhiều trường đại học cũng như các cơ sở giáo dục khác.
Các thành phần của mô hình MVC và chức năng và vai trò của các tầng:
Tầng Model là thành phần quan trọng trong kiến trúc ứng dụng, nơi lưu trữ toàn bộ dữ liệu của các dự án Nó kết nối hai thành phần còn lại, là View và Controller Model có thể chứa dữ liệu từ một cơ sở dữ liệu hoàn chỉnh, hoặc từ các định dạng như file JSON, XML, hoặc thậm chí là các đối tượng đơn giản.
- Tầng View: Hay được gọi là mà tầng giao diện là phần dành cho người dùng cuối
Nó hiển thị các thành phần UI cho người dùng thực hiện tương tác với ứng dụng
Tầng Controller là bộ phận tiếp nhận và xử lý các yêu cầu từ người dùng thông qua View Trong mỗi Controller, cả View và Model đều được tích hợp, giúp nó nhận yêu cầu và trả về dữ liệu phù hợp.
Hình 2 Luồng hoạt động của mô hình MVC
Mô hình MVC được thực hiện như sau:
- Yêu cầu của Client khi gửi lên Server thì sẽ bị Controller tiến hành tiếp nhận và phân tích yêu cầu đó
- Sau khi nhận yêu cầu từ user Controller tiến hành giao tiếp với Model
- Model tiến hành xử lý dữ liệu và gửi lại cho Controller
CÀI ĐẶT VÀ KIỂM THỬ
CÀI ĐẶT
4.1.3 CÁC BƯỚC KHỞI CHẠY ỨNG DỤNG
KIỂM THỬ
4.2.2.1 TRONG PHẠM VI KIỂM THỬ
4.2.2.2 NGOÀI PHẠM VI KIỂM THỬ
1.2 CHƯƠNG TRÌNH ĐÃ ĐẠT ĐƯỢC
Tuần Nội dung công việc
1 - Xin hướng dẫn đề tài
- Tiến hành khởi chạy project tiểu luận
- Tìm hiểu các website bán nông sản hiện nay
4-5 - Xây dựng app từ website
- Tìm kiếm bằng giọng nói
8-10 - Tích hợp giao hàng nhanh
11-12 - Bảng giá trị dinh dưỡng của nông sản
- Kiểm thử sửa lỗi Ý kiến của giáo viên hướng dẫn Ngày tháng năm
(Ký và ghi rõ họ tên) Người viết đề cương
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1
2 MỤC TIÊU CỦA ĐỀ TÀI 1
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGUYÊN CỨU 2
4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 3
5 KHẢO SÁT MỘT SỐ WEBSITE TƯƠNG TỰ 3
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 6
1.1 MÔ HÌNH MVC THIẾT KẾ WEBSITE 6
1.1.2 Triển khai vào xây dựng website 9
1.2.1 Giới thiệu công nghệ MERN Stack 9
1.2.2 Xây dựng website với MERN Stack 10
1.3.1 Giới thiệu về Chat GPT 10
1.3.2 Các bước nhúng Chat GPT vào website 11
1.4.2 Nhúng live chat fanpage Facebook vào trang web 16
1.5.1 Giới thiệu về giao hàng nhanh 18
1.6 TÌM KIẾM BẰNG GIỌNG NÓI 20
1.7 Một số chức năng nâng cao khác 22
Từ những ưu điểm đó website đã tích hợp API của VNPay để tiến hành cho việc thanh toán của khách hàng 25
CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 26
2.1.2.1 Đặc tả use case Login 28
2.1.2.2 Đặc tả use case View home page 29
2.1.2.3 Đặc tả use case Search Product 29
2.1.2.4 Đặc tả use case Filter Product 30
2.1.2.5 Đặc tả use case View product detail 30
2.1.2.6 Đặc tả use case Add product to cart 31
2.1.2.7 Đặc tả use case Manage shopping cart 31
2.1.2.8 Đặc tả use case Manage profile 32
2.1.2.9 Đặc tả use case Manage self orders -Checkout 33
2.1.2.10 Đặc tả use-case Manage self orders - Cancel order 34
2.1.2.11 Đặc tả use case Manage self orders -Review product 34
2.1.2.12 Đặc tả use case Manage self orders -View admin page 35
2.1.2.13 Đặc tả use case manage product - add product 35
2.1.2.14 Đặc tả use case manage product - update product 36
2.1.2.15 Đặc tả use case manage product - delete product 37
2.1.2.16 Đặc tả use case Manage product category - add category 37
2.1.2.17 Đặc tả use case Manage product category - update category 38
2.1.2.18 Đặc tả use case Manage product category - delete category 39
2.1.2.19 Đặc tả use case Manage orders - Approve order 39
2.1.2.20 Đặc tả use case Manage orders - Delete order 40
2.1.2.21 Đặc tả use case Manage user account - Block account 40
2.1.2.22 Đặc tả use case Manage user account - Add account 40
2.1.2.23 Đặc tả use case Manage user account – statistic 41
CHƯƠNG 3 THIẾT KẾ PHẦN MỀM 48
3.1 THIẾT KẾ CƠ SỞ DỮ LIỆU 48
3.1.2 Chuyển ERD thành cơ sở dữ liệu trong MongoDB 48
3.1.3 Mô tả chi tiết cơ sở dữ liệu 50
CHƯƠNG 4 CÀI ĐẶT VÀ KIỂM THỬ 71
4.1.3 Các bước khởi chạy ứng dụng 71
Hình 2 Luồng hoạt động của mô hình MVC 7
Hình 3: Trải nghiệm của người dùng với chatGPT 11
Hình 4: Tạo một API Key mới 12
Hình 5: Trang web lấy key API 12
Hình 6 Tích hợp vào code 13
Hình 7 Xây dựng giao diện cho khung chat GPT 15
Hình 8 Live chat fanpage Facebook 16
Hình 9 Ngôn ngữ Tiếng Việt 22
Hình 11 Ngôn ngữ Tiếng Anh 23
Hình 12 Trang web bán nông sản đã được tích hợp vào Google Analytics 24
Hình 13 Thanh toán đơn hàng với VNPay 26
Hình 16 Sơ đồ hoạt động xem trang chủ 42
Hình 17 Sơ đồ hoạt động tìm kiếm sản phẩm 43
Hình 18 Sơ đồ hoạt động xem chi tiết sản phẩm 43
Hình 19 Sơ đồ hoạt động đăng kí 44
Hình 20 Sơ đồ hoạt động đăng nhập 44
Hình 21 Sơ đồ hoạt động quên mật khẩu 45
Hình 22 Sơ đồ hoạt động cập nhật thông tin profile 45
Hình 23 Sơ đồ hoạt động quản lý sản phẩm 46
Hình 24 Sơ đồ hoạt động quản lý danh mục 46
Hình 25 Sơ đồ hoạt động xóa sản phẩm, danh mục 47
Hình 26 Lược đồ ERD chi tiết 48
Hình 27 Giao diện trang chủ 55
Hình 28 Giao diện trang sản phẩm 56
Hình 29 Giao diện trang chi tiết sản phẩm 57
Hình 30 Giao diện trang giỏ hàng 58
Hình 31 Giao diện trang giới thiệu 59
Hình 32 Giao diện trang liên hệ 60
Hình 33 Giao diện trang đăng nhập 61
Hình 34 Giao diện trang đăng kí 61
Hình 35 Giao diện trang thông tin cá nhân người dùng 62
Hình 36 Giao diện trang lịch sử đặt hàng 63
Hình 37 Giao diện trang dashboard 64
Hình 38 Giao diện trang quản lý khách hàng 64
Hình 39 Giao diện trang quản lý sản phẩm 65
Hình 40 Giao diện trang thêm mới sản phẩm 66
Hình 41 Giao diện trang quản lý đơn hàng 67
Hình 42 Giao diện trang quản lý thương hiệu 67
Hình 43 Giao diện trang quản lý slides 68
Hình 44 Giao diện trang thêm mới slides 69
Hình 45 Giao diện trang thông tin admin 69
Hình 46 Giao diện trang thống kê 70
Bảng 1 Đặc tả use case Login 29
Bảng 2 Đặc tả use case View home page 29
Bảng 3 Đặc tả use case Search Product 30
Bảng 4 Đặc tả use case Filter Product 30
Bảng 5 Đặc tả use case View product detail 31
Bảng 6 Đặc tả use case Add product to cart 31
Bảng 7 Đặc tả use case Manage shopping cart 32
Bảng 8 Đặc tả use case Manage profile 33
Bảng 9 Đặc tả use case Manage self orders -Checkout 34
Bảng 10 Đặc tả use-case Manage self orders - Cancel order 34
Bảng 11 Đặc tả use case Manage self orders -Review product 35
Bảng 12 Đặc tả use case Manage self orders -View admin page 35
Bảng 13 Đặc tả use case manage product - add product 36
Bảng 14 Đặc tả use case manage product - update product 37
Bảng 15 Đặc tả use case manage product - delete product 37
Bảng 16 Đặc tả use case Manage product category - add category 38
Bảng 17 Đặc tả use case Manage product category - update category 38
Bảng 18 Đặc tả use case Manage product category - delete category 39
Bảng 19 Đặc tả use case Manage orders - Approve order 39
Bảng 20 Đặc tả use case Manage orders - Delete order 40
Bảng 21 Đặc tả use case Manage user account - Block account 40
Bảng 22 Đặc tả use case Manage user account - Add account 41
Bảng 23 Đặc tả use case Manage user account - statistic 41
Bảng 24 Mô tả kiểu dữ liệu bảng user 51
Bảng 25 Mô tả kiểu dữ liệu bảng Product 52
Bảng 26 Mô tả kiểu dữ liệu bảng ProductCategory 52
Bảng 27 Mô tả kiểu dữ liệu bảng Order 53
Bảng 28 Mô tả kiểu dữ liệu bảng Slide 54
Bảng 29 Mô tả kiểu dữ liệu bảng Brand 54
Bảng 30 Mô tả kiểu dữ liệu bảng Token 54
DANH MỤC TỪ VIẾT TẮT
CSDL Cơ sở dữ liệu
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Việt Nam, với nền nông nghiệp phát triển, có nhiều nông trang và nông trại nhỏ lẻ, thường sản xuất để bán cho thương lái hoặc công ty chế biến Tuy nhiên, nông sản thường gặp phải tình trạng "được mùa mất giá" hoặc "được giá mất mùa", dẫn đến việc nông dân không thể tự chủ đầu ra cho sản phẩm Hơn nữa, giá sản phẩm thường bị đội lên cao do sự xuất hiện của nhiều khâu trung gian trong quá trình từ sản xuất đến tay người tiêu dùng.
Trong bối cảnh phát triển nhanh chóng của khoa học và công nghệ, mua sắm online đang trở nên phổ biến, đặc biệt là trong thời kỳ đại dịch COVID-19 khi mọi người hạn chế ra ngoài Để đáp ứng nhu cầu này, các doanh nghiệp bán hàng nông sản theo cách truyền thống cần xây dựng website thương mại điện tử, giúp họ tiếp cận và phục vụ khách hàng trên không gian mạng.
Nhóm chúng em quyết định nghiên cứu và phát triển dự án sử dụng công nghệ MERN Stack để xây dựng một website bán hàng hoàn chỉnh, đảm bảo đầy đủ chức năng của một trang thương mại điện tử Website sẽ giúp người tiêu dùng dễ dàng tìm kiếm sản phẩm và mua với giá mà nông dân đưa ra, đồng thời cung cấp thông tin rõ ràng về nguồn gốc nông sản Đối với chủ trang web, họ có thể quản lý sản phẩm và quảng bá thương hiệu của mình, góp phần vào việc phát triển nông nghiệp ứng dụng công nghệ cao trên toàn quốc.
2 MỤC TIÊU CỦA ĐỀ TÀI
Tìm hiểu công nghệ MERN Stack gồm: NodeJS, ExpressJS, ReactJS, MongoDB
Tìm hiểu các website bán hàng tương tự
Phân tích thiết kế website bán nông sản
Cài đặt website bán nông sản sử dụng công nghệ MERN Stack gồm các chức năng cơ bản:
Để tối ưu hóa trải nghiệm người dùng, hệ thống cung cấp các chức năng như đăng ký, đăng nhập và đăng xuất tài khoản Người dùng có thể dễ dàng quản lý tài khoản của mình, bao gồm việc xem và cập nhật thông tin, đổi hoặc lấy lại mật khẩu Chức năng đặt hàng và xem lịch sử đơn hàng giúp người dùng theo dõi giao dịch một cách thuận tiện Hệ thống tìm kiếm sản phẩm và xem chi tiết sản phẩm cũng được tích hợp để nâng cao khả năng mua sắm Thanh toán được thực hiện qua Paypal, đảm bảo an toàn và nhanh chóng Ngoài ra, quản lý sản phẩm cho phép người dùng cập nhật, thêm hoặc xóa sản phẩm, trong khi quản lý người dùng và đơn hàng giúp theo dõi hiệu quả Cuối cùng, quản lý thương hiệu, danh mục và chứng nhận sản phẩm cùng với việc xem thống kê giúp nâng cao khả năng quản lý và phân tích dữ liệu.
The team will explore various technologies to enhance their thesis, including ReactJS and React Native for frontend development, NodeJS for backend processes, and MongoDB for database management Additionally, they will utilize libraries and frameworks such as Axios and Sass to support their project.
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGUYÊN CỨU
- Trong đề tài này, nhóm nghiên cứu dựa trên xu hướng của các trang web bán hàng hiện nay
- Tìm hiểu và áp dụng công nghệ MERN Stack (MongoDB, Express, React, NodeJS) để xây dựng ra được một trang web hoàn chỉnh
- Lĩnh vực nghiên cứu: Website bán hàng nông sản online
- Tập trung vào việc xử lý các nghiệp vụ cơ bản của website bán hàng như: Xem sản phẩm, mua hàng, quản lý sản phẩm, quản lý người dùng, …
- Về công nghệ: tập trung vào tìm hiểu công nghệ MERN Stack và ứng dụng nó vào việc xây dựng một trang web bán hàng nông sản online
Phương pháp phân tích – tổng hợp lý thuyết bao gồm việc nghiên cứu và tìm hiểu các tài liệu cũng như ứng dụng liên quan đến công nghệ, mô hình và lý thuyết cần thiết.
Phương pháp chuyên gia là việc tham khảo ý kiến từ Thầy hướng dẫn và những người có kinh nghiệm liên quan đến các vấn đề và nghiệp vụ của đề tài, nhằm nâng cao tính chính xác và độ tin cậy của thông tin.
- Phương pháp mô hình hóa: Mô phỏng website từ bước thiết kế cài đặt cho đến kết quả thành phẩm của website
4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC
Nghiên cứu và hiểu được các thành phần chính trong công nghệ MERN Stack như: NodeJS, Express framework, MongoDB database, ReactJS library
Ứng dụng được công nghệ MERN Stack vào việc xây dựng website bán hàng nông sản online
Trang web bán hàng online cần phát triển các chức năng cơ bản như đăng nhập và đăng ký tài khoản, cho phép người dùng truy cập để xem thông tin sản phẩm và thực hiện mua hàng Ngoài ra, cần có chức năng tìm kiếm và lọc sản phẩm, cùng với giỏ hàng và thanh toán để nâng cao trải nghiệm người dùng.
Phát triển các tính năng cho quản trị viên: quản lý sản phẩm, quản lý người dùng, quản lý đơn hàng, thống kê, báo cáo
5 KHẢO SÁT MỘT SỐ WEBSITE TƯƠNG TỰ
Trang web của chúng tôi chuyên mua bán nông sản, cung cấp các sản phẩm nông nghiệp đặc trưng từ vùng Tây Bắc Tại đây, bạn sẽ tìm thấy những sản phẩm độc đáo, mang đậm bản sắc văn hóa và chất lượng cao của khu vực miền núi Tây Bắc.
- Địa chỉ trang web: https://www.nongsantaybac.com/
- Giao diện đơn giản dễ sử dụng
- Sản phẩm đặt thù ở vùng núi Tây Bắc
- Thông tin sản phẩm hiển thị đầy đủ dễ dàng so sánh
- Không đa dạng sản phẩm
Trang web này là nền tảng mua bán nông sản, cho phép người dùng dễ dàng mua và đăng tin bán sản phẩm Ngoài ra, người dùng còn có thể đăng tin tìm kiếm và cung cấp thông tin về các loại nông sản cụ thể trong lĩnh vực nông nghiệp.
- Địa chỉ trang web: https://nongsanantoanlongan.vn/
- Giao diện đơn giản dễ sử dụng
- Phân loại sản phẩm rõ rang
- Thông tin sản phẩm chưa đầy đủ về giá cũng như thông tin
- Là một trang web chuyên cung cấp các sản phẩm đã qua chế biến thành phẩm từ các loại nông sản như bánh, kẹo, …
- Địa chỉ trang web: http://nongsanviet.net/
- Giao diện sử dụng không thân thiện
- Không có thông tin sản phẩm chi tiết
BachhoaXANH.com là trang web hàng đầu về thực phẩm nông sản tại Việt Nam, được ra mắt nhằm phục vụ nhu cầu mua sắm trực tuyến của người tiêu dùng tại TP.HCM.
- Địa chỉ trang web: http://nongsanviet.net/
- Chính sách mua hàng rõ ràng
- Địa điểm giao hàng bao khắp diện tích Tp Hồ Chí Minh
- Giao diện dễ sử dụng
- Chi phí giao hàng còn cao
- Là trang web chuyên bán và cung cấp sản phẩm về trái cây nhập khẩu được nhập trực tiếp từ các nước như Úc, Mỹ, Nhật, …
- Địa chỉ trang web: https://minhphuongfruit.com/
- Chính sách mua hàng rõ ràng
- Giao diện dễ sử dụng
- Chi phí giao hàng còn cao
- Khó tiếp cận với người tiêu dùng
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
1.1 MÔ HÌNH MVC THIẾT KẾ WEBSITE
Mô hình MVC, viết tắt của "Model-View-Controller", là một khuôn mẫu kiến trúc phần mềm được sử dụng trong phát triển ứng dụng máy tính Mô hình này bao gồm ba thành phần chính, mỗi thành phần đảm nhận nhiệm vụ và chức năng riêng biệt, độc lập, giúp tối ưu hóa quá trình xây dựng và phát triển ứng dụng.
- View (giao diện người dùng)
- Controller (trung tâm điều khiển)
MVC là một mẫu thiết kế phổ biến, thường được sử dụng để cấu trúc các dự án Nhiều dự án thực tế hiện nay vẫn áp dụng mô hình MVC và nó cũng được giảng dạy tại nhiều trường đại học và cơ sở giáo dục khác.
Các thành phần của mô hình MVC và chức năng và vai trò của các tầng:
Tầng Model là phần lưu trữ dữ liệu cho các dự án ứng dụng, kết nối giữa View và Controller Nó có thể là một cơ sở dữ liệu hoàn chỉnh, hoặc đơn giản là một file JSON, XML, hay một đối tượng cơ bản.
- Tầng View: Hay được gọi là mà tầng giao diện là phần dành cho người dùng cuối
Nó hiển thị các thành phần UI cho người dùng thực hiện tương tác với ứng dụng
Tầng Controller là phần xử lý các yêu cầu từ người dùng thông qua View Trong mỗi Controller, cả View và Model đều được tích hợp Tầng này nhận yêu cầu và trả về dữ liệu tương ứng, đảm bảo sự tương tác hiệu quả giữa người dùng và hệ thống.
Hình 2 Luồng hoạt động của mô hình MVC
Mô hình MVC được thực hiện như sau:
- Yêu cầu của Client khi gửi lên Server thì sẽ bị Controller tiến hành tiếp nhận và phân tích yêu cầu đó
- Sau khi nhận yêu cầu từ user Controller tiến hành giao tiếp với Model
- Model tiến hành xử lý dữ liệu và gửi lại cho Controller
PHẦN KẾT LUẬN
Kết quả đạt được
1.2 CHƯƠNG TRÌNH ĐÃ ĐẠT ĐƯỢC
Tuần Nội dung công việc
1 - Xin hướng dẫn đề tài
- Tiến hành khởi chạy project tiểu luận
- Tìm hiểu các website bán nông sản hiện nay
4-5 - Xây dựng app từ website
- Tìm kiếm bằng giọng nói
8-10 - Tích hợp giao hàng nhanh
11-12 - Bảng giá trị dinh dưỡng của nông sản
- Kiểm thử sửa lỗi Ý kiến của giáo viên hướng dẫn Ngày tháng năm
(Ký và ghi rõ họ tên) Người viết đề cương
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1
2 MỤC TIÊU CỦA ĐỀ TÀI 1
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGUYÊN CỨU 2
4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 3
5 KHẢO SÁT MỘT SỐ WEBSITE TƯƠNG TỰ 3
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 6
1.1 MÔ HÌNH MVC THIẾT KẾ WEBSITE 6
1.1.2 Triển khai vào xây dựng website 9
1.2.1 Giới thiệu công nghệ MERN Stack 9
1.2.2 Xây dựng website với MERN Stack 10
1.3.1 Giới thiệu về Chat GPT 10
1.3.2 Các bước nhúng Chat GPT vào website 11
1.4.2 Nhúng live chat fanpage Facebook vào trang web 16
1.5.1 Giới thiệu về giao hàng nhanh 18
1.6 TÌM KIẾM BẰNG GIỌNG NÓI 20
1.7 Một số chức năng nâng cao khác 22
Từ những ưu điểm đó website đã tích hợp API của VNPay để tiến hành cho việc thanh toán của khách hàng 25
CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 26
2.1.2.1 Đặc tả use case Login 28
2.1.2.2 Đặc tả use case View home page 29
2.1.2.3 Đặc tả use case Search Product 29
2.1.2.4 Đặc tả use case Filter Product 30
2.1.2.5 Đặc tả use case View product detail 30
2.1.2.6 Đặc tả use case Add product to cart 31
2.1.2.7 Đặc tả use case Manage shopping cart 31
2.1.2.8 Đặc tả use case Manage profile 32
2.1.2.9 Đặc tả use case Manage self orders -Checkout 33
2.1.2.10 Đặc tả use-case Manage self orders - Cancel order 34
2.1.2.11 Đặc tả use case Manage self orders -Review product 34
2.1.2.12 Đặc tả use case Manage self orders -View admin page 35
2.1.2.13 Đặc tả use case manage product - add product 35
2.1.2.14 Đặc tả use case manage product - update product 36
2.1.2.15 Đặc tả use case manage product - delete product 37
2.1.2.16 Đặc tả use case Manage product category - add category 37
2.1.2.17 Đặc tả use case Manage product category - update category 38
2.1.2.18 Đặc tả use case Manage product category - delete category 39
2.1.2.19 Đặc tả use case Manage orders - Approve order 39
2.1.2.20 Đặc tả use case Manage orders - Delete order 40
2.1.2.21 Đặc tả use case Manage user account - Block account 40
2.1.2.22 Đặc tả use case Manage user account - Add account 40
2.1.2.23 Đặc tả use case Manage user account – statistic 41
CHƯƠNG 3 THIẾT KẾ PHẦN MỀM 48
3.1 THIẾT KẾ CƠ SỞ DỮ LIỆU 48
3.1.2 Chuyển ERD thành cơ sở dữ liệu trong MongoDB 48
3.1.3 Mô tả chi tiết cơ sở dữ liệu 50
CHƯƠNG 4 CÀI ĐẶT VÀ KIỂM THỬ 71
4.1.3 Các bước khởi chạy ứng dụng 71
Hình 2 Luồng hoạt động của mô hình MVC 7
Hình 3: Trải nghiệm của người dùng với chatGPT 11
Hình 4: Tạo một API Key mới 12
Hình 5: Trang web lấy key API 12
Hình 6 Tích hợp vào code 13
Hình 7 Xây dựng giao diện cho khung chat GPT 15
Hình 8 Live chat fanpage Facebook 16
Hình 9 Ngôn ngữ Tiếng Việt 22
Hình 11 Ngôn ngữ Tiếng Anh 23
Hình 12 Trang web bán nông sản đã được tích hợp vào Google Analytics 24
Hình 13 Thanh toán đơn hàng với VNPay 26
Hình 16 Sơ đồ hoạt động xem trang chủ 42
Hình 17 Sơ đồ hoạt động tìm kiếm sản phẩm 43
Hình 18 Sơ đồ hoạt động xem chi tiết sản phẩm 43
Hình 19 Sơ đồ hoạt động đăng kí 44
Hình 20 Sơ đồ hoạt động đăng nhập 44
Hình 21 Sơ đồ hoạt động quên mật khẩu 45
Hình 22 Sơ đồ hoạt động cập nhật thông tin profile 45
Hình 23 Sơ đồ hoạt động quản lý sản phẩm 46
Hình 24 Sơ đồ hoạt động quản lý danh mục 46
Hình 25 Sơ đồ hoạt động xóa sản phẩm, danh mục 47
Hình 26 Lược đồ ERD chi tiết 48
Hình 27 Giao diện trang chủ 55
Hình 28 Giao diện trang sản phẩm 56
Hình 29 Giao diện trang chi tiết sản phẩm 57
Hình 30 Giao diện trang giỏ hàng 58
Hình 31 Giao diện trang giới thiệu 59
Hình 32 Giao diện trang liên hệ 60
Hình 33 Giao diện trang đăng nhập 61
Hình 34 Giao diện trang đăng kí 61
Hình 35 Giao diện trang thông tin cá nhân người dùng 62
Hình 36 Giao diện trang lịch sử đặt hàng 63
Hình 37 Giao diện trang dashboard 64
Hình 38 Giao diện trang quản lý khách hàng 64
Hình 39 Giao diện trang quản lý sản phẩm 65
Hình 40 Giao diện trang thêm mới sản phẩm 66
Hình 41 Giao diện trang quản lý đơn hàng 67
Hình 42 Giao diện trang quản lý thương hiệu 67
Hình 43 Giao diện trang quản lý slides 68
Hình 44 Giao diện trang thêm mới slides 69
Hình 45 Giao diện trang thông tin admin 69
Hình 46 Giao diện trang thống kê 70
Bảng 1 Đặc tả use case Login 29
Bảng 2 Đặc tả use case View home page 29
Bảng 3 Đặc tả use case Search Product 30
Bảng 4 Đặc tả use case Filter Product 30
Bảng 5 Đặc tả use case View product detail 31
Bảng 6 Đặc tả use case Add product to cart 31
Bảng 7 Đặc tả use case Manage shopping cart 32
Bảng 8 Đặc tả use case Manage profile 33
Bảng 9 Đặc tả use case Manage self orders -Checkout 34
Bảng 10 Đặc tả use-case Manage self orders - Cancel order 34
Bảng 11 Đặc tả use case Manage self orders -Review product 35
Bảng 12 Đặc tả use case Manage self orders -View admin page 35
Bảng 13 Đặc tả use case manage product - add product 36
Bảng 14 Đặc tả use case manage product - update product 37
Bảng 15 Đặc tả use case manage product - delete product 37
Bảng 16 Đặc tả use case Manage product category - add category 38
Bảng 17 Đặc tả use case Manage product category - update category 38
Bảng 18 Đặc tả use case Manage product category - delete category 39
Bảng 19 Đặc tả use case Manage orders - Approve order 39
Bảng 20 Đặc tả use case Manage orders - Delete order 40
Bảng 21 Đặc tả use case Manage user account - Block account 40
Bảng 22 Đặc tả use case Manage user account - Add account 41
Bảng 23 Đặc tả use case Manage user account - statistic 41
Bảng 24 Mô tả kiểu dữ liệu bảng user 51
Bảng 25 Mô tả kiểu dữ liệu bảng Product 52
Bảng 26 Mô tả kiểu dữ liệu bảng ProductCategory 52
Bảng 27 Mô tả kiểu dữ liệu bảng Order 53
Bảng 28 Mô tả kiểu dữ liệu bảng Slide 54
Bảng 29 Mô tả kiểu dữ liệu bảng Brand 54
Bảng 30 Mô tả kiểu dữ liệu bảng Token 54
DANH MỤC TỪ VIẾT TẮT
CSDL Cơ sở dữ liệu
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Việt Nam, với nền nông nghiệp phát triển, có nhiều nông trang và nông trại nhỏ lẻ, chủ yếu sản xuất để bán cho thương lái hoặc công ty chế biến Tuy nhiên, nông sản thường gặp phải tình trạng "được mùa mất giá" hoặc "được giá mất mùa", dẫn đến khó khăn trong việc tự chủ đầu ra cho sản phẩm Thêm vào đó, giá sản phẩm từ nông trại đến tay người tiêu dùng thường bị đội lên cao do sự can thiệp của nhiều khâu trung gian.
Với sự phát triển nhanh chóng của khoa học và công nghệ, mua bán hàng online ngày càng trở nên phổ biến, đặc biệt trong bối cảnh đại dịch COVID-19 khi mọi người hạn chế ra ngoài Để đáp ứng nhu cầu mua sắm trực tuyến, các doanh nghiệp kinh doanh nông sản theo phương thức truyền thống cần xây dựng một website thương mại điện tử, giúp họ tiếp cận khách hàng và bày bán sản phẩm trên không gian mạng.
Nhóm chúng em quyết định nghiên cứu và phát triển dự án sử dụng công nghệ MERN Stack để xây dựng một website bán hàng hoàn chỉnh, đáp ứng đầy đủ chức năng của một trang thương mại điện tử Website sẽ giúp người tiêu dùng dễ dàng tìm kiếm sản phẩm và mua hàng theo giá do nhà nông đưa ra, đồng thời cung cấp thông tin rõ ràng về nguồn gốc nông sản Đối với chủ trang web, họ có thể quản lý sản phẩm hiệu quả và quảng bá thương hiệu của mình, góp phần vào việc ứng dụng công nghệ cao trong sản xuất nông nghiệp trên toàn quốc.
2 MỤC TIÊU CỦA ĐỀ TÀI
Tìm hiểu công nghệ MERN Stack gồm: NodeJS, ExpressJS, ReactJS, MongoDB
Tìm hiểu các website bán hàng tương tự
Phân tích thiết kế website bán nông sản
Cài đặt website bán nông sản sử dụng công nghệ MERN Stack gồm các chức năng cơ bản:
Để tối ưu hóa trải nghiệm người dùng, hệ thống cung cấp các chức năng như đăng ký, đăng nhập và đăng xuất tài khoản Người dùng có thể dễ dàng quản lý tài khoản của mình bằng cách xem, cập nhật thông tin, đổi mật khẩu hoặc lấy lại mật khẩu Chức năng đặt hàng cho phép người dùng thực hiện đơn hàng và theo dõi lịch sử đặt hàng Hệ thống cũng hỗ trợ tìm kiếm sản phẩm và xem chi tiết từng sản phẩm Thanh toán được thực hiện qua Paypal, đảm bảo tính an toàn và tiện lợi Quản lý sản phẩm bao gồm các thao tác cập nhật, thêm và xóa sản phẩm, trong khi quản lý người dùng và đơn hàng giúp duy trì trật tự Ngoài ra, người quản lý có thể quản lý thương hiệu, danh mục và chứng nhận sản phẩm, cùng với việc xem thống kê để theo dõi hiệu quả kinh doanh.
The technologies the team will explore to enhance their thesis include Frontend tools like ReactJS and React Native, Backend solutions such as NodeJS, and MongoDB for database management Additionally, they will utilize various libraries and frameworks, including Axios and Sass, to support their development process.
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGUYÊN CỨU
- Trong đề tài này, nhóm nghiên cứu dựa trên xu hướng của các trang web bán hàng hiện nay
- Tìm hiểu và áp dụng công nghệ MERN Stack (MongoDB, Express, React, NodeJS) để xây dựng ra được một trang web hoàn chỉnh
- Lĩnh vực nghiên cứu: Website bán hàng nông sản online
- Tập trung vào việc xử lý các nghiệp vụ cơ bản của website bán hàng như: Xem sản phẩm, mua hàng, quản lý sản phẩm, quản lý người dùng, …
- Về công nghệ: tập trung vào tìm hiểu công nghệ MERN Stack và ứng dụng nó vào việc xây dựng một trang web bán hàng nông sản online
Phương pháp phân tích và tổng hợp lý thuyết bao gồm việc nghiên cứu và tìm hiểu các tài liệu cùng ứng dụng liên quan đến công nghệ, mô hình và lý thuyết cần thiết Việc này giúp xây dựng nền tảng vững chắc cho các nghiên cứu tiếp theo và đảm bảo tính chính xác trong việc áp dụng các lý thuyết vào thực tiễn.
Phương pháp chuyên gia bao gồm việc tham khảo ý kiến từ Thầy hướng dẫn và những người có kinh nghiệm liên quan đến các vấn đề và nghiệp vụ của đề tài, nhằm nâng cao tính chính xác và độ tin cậy của thông tin.
- Phương pháp mô hình hóa: Mô phỏng website từ bước thiết kế cài đặt cho đến kết quả thành phẩm của website
4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC
Nghiên cứu và hiểu được các thành phần chính trong công nghệ MERN Stack như: NodeJS, Express framework, MongoDB database, ReactJS library
Ứng dụng được công nghệ MERN Stack vào việc xây dựng website bán hàng nông sản online
Để xây dựng một trang web bán hàng online hiệu quả, cần phát triển các chức năng cơ bản như đăng nhập và đăng ký tài khoản, cho phép người dùng truy cập để xem thông tin sản phẩm và thực hiện mua hàng Ngoài ra, cần tích hợp chức năng tìm kiếm và lọc sản phẩm, cùng với giỏ hàng và quy trình thanh toán thuận tiện.
Phát triển các tính năng cho quản trị viên: quản lý sản phẩm, quản lý người dùng, quản lý đơn hàng, thống kê, báo cáo
5 KHẢO SÁT MỘT SỐ WEBSITE TƯƠNG TỰ
Trang web này chuyên cung cấp dịch vụ mua bán nông sản, tập trung vào các sản phẩm nông nghiệp của doanh nghiệp và những đặc sản đến từ vùng Tây Bắc, nổi bật với đặc trưng văn hóa và thiên nhiên của khu vực miền núi Tây Bắc.
- Địa chỉ trang web: https://www.nongsantaybac.com/
- Giao diện đơn giản dễ sử dụng
- Sản phẩm đặt thù ở vùng núi Tây Bắc
- Thông tin sản phẩm hiển thị đầy đủ dễ dàng so sánh
- Không đa dạng sản phẩm
Trang web của chúng tôi chuyên cung cấp nền tảng mua bán nông sản, cho phép người dùng dễ dàng đăng tin bán sản phẩm và tìm kiếm các mặt hàng nông sản cần thiết Bên cạnh đó, người dùng cũng có thể đăng tải thông tin về nhu cầu và nguồn cung cho các loại sản phẩm nông nghiệp cụ thể, tạo cơ hội giao thương hiệu quả trong lĩnh vực này.
- Địa chỉ trang web: https://nongsanantoanlongan.vn/
- Giao diện đơn giản dễ sử dụng
- Phân loại sản phẩm rõ rang
- Thông tin sản phẩm chưa đầy đủ về giá cũng như thông tin
- Là một trang web chuyên cung cấp các sản phẩm đã qua chế biến thành phẩm từ các loại nông sản như bánh, kẹo, …
- Địa chỉ trang web: http://nongsanviet.net/
- Giao diện sử dụng không thân thiện
- Không có thông tin sản phẩm chi tiết
BachhoaXANH.com là trang web hàng đầu về thực phẩm nông sản tại Việt Nam, được ra mắt nhằm phục vụ nhu cầu mua sắm trực tuyến của người tiêu dùng tại TP.HCM.
- Địa chỉ trang web: http://nongsanviet.net/
- Chính sách mua hàng rõ ràng
- Địa điểm giao hàng bao khắp diện tích Tp Hồ Chí Minh
- Giao diện dễ sử dụng
- Chi phí giao hàng còn cao
- Là trang web chuyên bán và cung cấp sản phẩm về trái cây nhập khẩu được nhập trực tiếp từ các nước như Úc, Mỹ, Nhật, …
- Địa chỉ trang web: https://minhphuongfruit.com/
- Chính sách mua hàng rõ ràng
- Giao diện dễ sử dụng
- Chi phí giao hàng còn cao
- Khó tiếp cận với người tiêu dùng
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
1.1 MÔ HÌNH MVC THIẾT KẾ WEBSITE
Mô hình MVC, viết tắt của "Model-View-Controller", là một khuôn mẫu kiến trúc phần mềm được sử dụng trong xây dựng và phát triển ứng dụng máy tính Mô hình này bao gồm ba thành phần chính, mỗi thành phần đảm nhiệm các nhiệm vụ và chức năng riêng biệt, độc lập với nhau Các thành phần của mô hình MVC bao gồm: Model, View và Controller.
- View (giao diện người dùng)
- Controller (trung tâm điều khiển)
MVC là một mẫu thiết kế phổ biến, thường được sử dụng để cấu trúc các dự án Nhiều dự án thực tế hiện nay vẫn hoạt động trên mô hình MVC và nó cũng được giảng dạy tại nhiều trường đại học cùng các cơ sở giáo dục khác.
Các thành phần của mô hình MVC và chức năng và vai trò của các tầng:
Tầng Model là thành phần quan trọng trong kiến trúc ứng dụng, chịu trách nhiệm lưu trữ toàn bộ dữ liệu của dự án Nó kết nối với hai thành phần khác là View và Controller, giúp quản lý và truy xuất dữ liệu hiệu quả Model có thể là một cơ sở dữ liệu hoàn chỉnh, hoặc đơn giản là một file JSON, XML, hay thậm chí là một đối tượng đơn giản.
- Tầng View: Hay được gọi là mà tầng giao diện là phần dành cho người dùng cuối
Nó hiển thị các thành phần UI cho người dùng thực hiện tương tác với ứng dụng
Tầng Controller là phần xử lý các yêu cầu từ người dùng thông qua View Trong mỗi Controller, cả View và Model đều được tích hợp, giúp nhận yêu cầu và trả về dữ liệu tương ứng một cách hiệu quả.
Hình 2 Luồng hoạt động của mô hình MVC
Mô hình MVC được thực hiện như sau:
- Yêu cầu của Client khi gửi lên Server thì sẽ bị Controller tiến hành tiếp nhận và phân tích yêu cầu đó
- Sau khi nhận yêu cầu từ user Controller tiến hành giao tiếp với Model
- Model tiến hành xử lý dữ liệu và gửi lại cho Controller
Hạn chế
Cần mở rộng các chức năng của hệ thống để bao gồm việc tạo đợt khuyến mãi, thống kê hàng tồn kho, cung cấp chức năng cho nhân viên, và gợi ý sản phẩm cho khách hàng.
- Chức năng tìm kiếm còn chưa cho ra được kết quả tối ưu nhất
- Nghiên cứu chức năng gợi ý sản phẩm.