Xây dựng website bán nông sản sử dụng công nghệ mern stack

 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 websit

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP CÔNG NGHỆ THÔNG TIN

Tp Hồ Chí Minh, năm 2023

XÂY DỰNG WEBSITE BÁN NÔNG SẢN

SỬ DỤNG CÔNG NGHỆ MERN STACK

S KL01 0 8 3 1

SVTH : NGÔ XUÂN THẮNG NGUYỄN NGỌC TRUNG HIẾU GVHD: TS NGUYỄN THÀNH SƠN

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN HỆ THỐNG THÔNG TIN



KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN

ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA CNTT Độc lập – Tự do – Hạnh Phúc

******* *******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ và tên Sinh viên 1: NGÔ XUÂN THẮNG MSSV 1: 18110368 Họ và tên Sinh viên 2: NGUYỄN NGỌC TRUNG HIẾU MSSV 2: 18110283 Chuyên Ngành: HỆ THỐNG THÔNG TIN Tên đề tài: XÂY DỰNG WEBSITE BÁN NÔNG SẢN SỬ DỤNG CÔNG NGHỆ MERN STACK Họ và tên Giáo viên hướng dẫn: TS NGUYỄN THÀNH SƠN NHẬN XÉT 1 Về nội dung đề tài & khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm:

Tp Hồ Chí Minh, ngày 13 tháng 05 năm 2023

Giáo viên hướng dẫn

(Ký & ghi rõ họ tên)

ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA CNTT Độc lập – Tự do – Hạnh Phúc

******* *******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ và tên Sinh viên 1: NGÔ XUÂN THẮNG MSSV 1: 18110368 Họ và tên Sinh viên 2: NGUYỄN NGỌC TRUNG HIẾU MSSV 2: 18110283 Chuyên Ngành: HỆ THỐNG THÔNG TIN Tên đề tài: XÂY DỰNG WEBSITE BÁN NÔNG SẢN SỬ DỤNG CÔNG NGHỆ MERN STACK Họ và tên Giáo viên phản biện: ThS NGUYỄN HỮU TRUNG NHẬN XÉT 1 Về nội dung đề tài & khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm:

Tp Hồ Chí Minh, ngày 12 tháng 07 năm 2023

Giáo viên phản biện

(Ký & ghi rõ họ tên)

LỜI CẢM ƠN

Nhóm em xin chân thành cảm ơn khoa CÔNG NGHỆ THÔNG TIN, TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM đã tạo điều kiện thuận lợi cho chúng em thực hiện

đề tài này

Nhóm em cũng xin gửi lời cảm ơn chân thành đến Thầy Nguyễn Thành Sơn đã giúp

đỡ nhóm trong suốt quá trình tìm hiểu và thực hiện khóa luận Nhờ những góp ý của Thầy

đã giúp khóa luận của nhóm em được hoàn thiện như ngày hôm nay Nhóm chúng em chân

thành cảm ơn

Tp Hồ Chí Minh, ngày 13 tháng 05 năm 2023 Nhóm sinh viên thực hiện Ngô Xuân Thắng - 18110368

Nguyễn Ngọc Trung Hiếu - 18110283

ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA CNTT Độc lập – Tự do – Hạnh Phúc

ĐỀ CƯƠNG CHI TIẾT KHÓA LUẬN TỐT NGHIỆP

Họ và tên Sinh viên 1: NGÔ XUÂN THẮNG MSSV 1: 18110368

Họ và tên Sinh viên 2: NGUYỄN NGỌC TRUNG HIẾU MSSV 2: 18110283 Chuyên Ngành: HỆ THỐNG THÔNG TIN

Tên đề tài: XÂY DỰNG WEBSITE BÁN NÔNG SẢN SỬ DỤNG CÔNG NGHỆ MERN STACK

Họ và tên Giáo viên hướng dẫn: TS NGUYỄN THÀNH SƠN

Thời gian thực hiện: từ 01/02/2023 – 13/05/2023

NHIỆM VỤ CỦA KHÓA LUẬN:

 Xây dựng website bán nông sản sử dụng công nghệ MERN Stack

 Phân tích các tính năng và nhiệm vụ của một website bán nông sản cần phải có

 Tiến hành xây dựng mô hình hóa nghiệp vụ và xây dựng cơ sở dữ liệu

 Xây dựng các chức năng chat GPT và chat với fanpage

 Xây dựng chức năng tìm kiếm sản phẩm bằng nh

 Cài đặt, xây dựng các chức năng cho website và kiểm thử

ĐỀ CƯƠNG VIẾT KHÓA LUẬN:

PHẦN 1: PHẦN MỞ ĐẦU

1 TÍNH CẤP THIẾT ĐỀ TÀI

2 MỤC TIÊU CỦA ĐỀ TÀI

3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU

4 TÌM HIỂU MỘT SỐ WEBSITE BÁN NÔNG SẢN

5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

PHẦN 2: NỘI DUNG

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.3 CHATGPT

1.4 LIVE CHAT FANPAGE

1.5 TÌM KIẾM BẰNG GIỌNG NÓI

3.2 THIẾT KẾ GIAO DIỆN

CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ

- Lập bảng kế hoạch

2-3

- 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

- Kiểm thử sửa lỗi

15 - Chuẩn bị báo cáo

Mục lục

PHẦN 1: PHẦN MỞ ĐẦU 1

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

3.1 Đối tượng nghiên cứu 2

3.2 Phạm vi nghiên cứu 2

3.3 Phương pháp nghiên cứu 3

4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 3

5 KHẢO SÁT MỘT SỐ WEBSITE TƯƠNG TỰ 3

5.1 RauSach24h.vn 3

5.2 nongsanantoanlongan.vn 4

5.3 nongsanviet.net 4

5.4 bachhoaxanh.com 5

5.5 minhphuongfruit.com 5

PHẦN 2: PHẦN NỘI DUNG 7

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 7

1.1 MÔ HÌNH MVC THIẾT KẾ WEBSITE 7

1.1.1 Giới thiệu 7

1.1.2 Triển khai vào xây dựng website 9

1.2 CÔNG NGHỆ MERN STACK 10

1.2.1 Giới thiệu công nghệ MERN Stack 10

1.2.2 Xây dựng website với MERN Stack 11

1.3 CHAT GPT 11

1.3.1 Giới thiệu về ChatGPT 11

1.3.2 Các bước nhúng ChatGPT vào website 13

1.4 LIVE CHAT FANPAGE 17

1.4.1 Giới thiệu 17

1.4.2 Nhúng live chat fanpage Facebook vào trang web 18

1.5 GIAO HÀNG NHANH 20

1.5.1 Giới thiệu về giao hàng nhanh 20

1.5.2 Triển khai 21

1.6 TÌM KIẾM BẰNG GIỌNG NÓI 23

1.6.1 Giới thiệu 23

1.6.2 Triển khai 23

1.7 Một số chức năng nâng cao khác 25

1.7.1 Dịch ngôn ngữ 25

1.7.2 Google analytics 26

1.7.3 Thanh toán Online 27

CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 29

2.1 USE CASE DIAGRAM 29

2.1.1 Usecase tổng quát 29

2.1.2 Mô tả usecase 30

2.1.2.1 Đặc tả use case Login 30

2.1.2.2 Đặc tả use case View home page 31

2.1.2.3 Đặc tả use case Search Product 31

2.1.2.4 Đặc tả use case Filter Product 32

2.1.2.5 Đặc tả use case View product detail 32

2.1.2.6 Đặc tả use case Add product to cart 33

2.1.2.7 Đặc tả use case Manage shopping cart 33

2.1.2.8 Đặc tả use case Manage profile 34

2.1.2.9 Đặc tả use case Manage self orders -Checkout 35

2.1.2.10 Đặc tả use-case Manage self orders - Cancel order 36

2.1.2.11 Đặc tả use case Manage self orders -Review product 36

2.1.2.12 Đặc tả use case Manage self orders -View admin page 37

2.1.2.13 Đặc tả use case manage product - add product 37

2.1.2.14 Đặc tả use case manage product - update product 38

2.1.2.15 Đặc tả use case manage product - delete product 39

2.1.2.16 Đặc tả use case Manage product category - add category 39

2.1.2.17 Đặc tả use case Manage product category - update category 40

2.1.2.18 Đặc tả use case Manage product category - delete category 41

2.1.2.19 Đặc tả use case Manage orders - Approve order 41

2.1.2.20 Đặc tả use case Manage orders - Delete order 42

2.1.2.21 Đặc tả use case Manage user account - Block account 42

2.1.2.22 Đặc tả use case Manage user account - Add account 42

2.1.2.23 Đặc tả use case Manage user account – statistic 43

2.2 SEQUENCE DIAGRAM 44

2.2.1 Sequence diagram user 44

2.2.2 Sequence diagram admin 47

CHƯƠNG 3 THIẾT KẾ PHẦN MỀM 50

3.1 THIẾT KẾ CƠ SỞ DỮ LIỆU 50

3.1.1 Thiết kế ERD 50

3.1.2 Chuyển ERD thành cơ sở dữ liệu trong MongoDB 50

3.1.3 Mô tả chi tiết cơ sở dữ liệu 52

3.3 THIẾT KẾ GIAO DIỆN 56

3.3.1 Giao diện user 56

3.3.2 Giao diện admin 63

CHƯƠNG 4 CÀI ĐẶT VÀ KIỂM THỬ 71

4.1 CÀI ĐẶT 71

4.1.1 Công cụ 71

4.1.2 Công nghệ 71

4.1.3 Các bước khởi chạy ứng dụng 71

4.2 KIỂM THỬ 71

4.2.1 Mục tiêu 71

4.2.2 Kết quả kiểm thử 72

PHẦN 3: PHẦN KẾT LUẬN 77

1 Kết quả đạt được 77

2 Hạn chế 78

3 Hướng phát triển 78

TÀI LIỆU THAM KHẢO 79

DANH MỤC HÌNH

Hình 1.1 Mô hình MVC 7

Hình 1.2 Luồng hoạt động của mô hình MVC 8

Hình 1.3 Trải nghiệm của người dùng với chatGPT 12

Hình 1.4 Tạo một API Key mới 13

Hình 1.5 Trang web lấy key API 14

Hình 1.6 Tích hợp vào code 15

Hình 1.7 Xây dựng giao diện cho khung chat GPT 17

Hình 1.8 Live chat fanpage Facebook 18

Hình 1.9 Đăng ký thông tin tài khoản giao hàng nhanh 21

Hình 1.10 Lấy token giao hàng nhanh 22

Hình 1.11 Kết quả chatGPT 25

Hình 1.12 Ngôn ngữ Tiếng Việt 25

Hình 1.13 Ngôn ngữ Tiếng Anh 26

Hình 1.14 Trang web bán nông sản đã được tích hợp vào Google Analytics 27

Hình 1.15 Thanh toán đơn hàng với VNPay 28

Hình 2.1 Usecase người dùng 29

Hình 2.3 Sơ đồ hoạt động xem trang chủ 44

Hình 2.4 Sơ đồ hoạt động tìm kiếm sản phẩm 45

Hình 2.5 Sơ đồ hoạt động xem chi tiết sản phẩm 45

Hình 2.6 Sơ đồ hoạt động đăng ký 46

Hình 2.7 Sơ đồ hoạt động đăng nhập 46

Hình 2.8 Sơ đồ hoạt động quên mật khẩu 47

Hình 2.9 Sơ đồ hoạt động cập nhật thông tin profile 47

Hình 2.10 Sơ đồ hoạt động quản lý sản phẩm 48

Hình 2.11 Sơ đồ hoạt động quản lý danh mục 48

Hình 2.12 Sơ đồ hoạt động xóa sản phẩm, danh mục 49

Hình 3.1 Lược đồ ERD chi tiết 50

Hình 3.2 Giao diện trang chủ 57

Hình 3.3 Giao diện trang sản phẩm 58

Hình 3.4 Giao diện trang chi tiết sản phẩm 59

Hình 3.5 Giao diện trang giỏ hàng 60

Hình 3.6 Giao diện trang đăng nhập 61

Hình 3.7 Giao diện trang đăng ký 61

Hình 3.8 Giao diện trang thông tin cá nhân người dùng 62

Hình 3.9 Giao diện trang lịch sử đặt hàng 63

Hình 3.10 Giao diện trang dashboard 64

Hình 3.11 Giao diện trang quản lý khách hàng 64

Hình 3.12 Giao diện trang quản lý sản phẩm 65

Hình 3.13 Giao diện trang thêm mới sản phẩm 66

Hình 3.14 Giao diện trang quản lý đơn hàng 67

Hình 3.15 Giao diện trang quản lý thương hiệu 67

Hình 3.16 Giao diện trang thêm mới thương hiệu 68

Hình 3.17 Giao diện trang quản lý slides 68

Hình 3.18 Giao diện trang thêm mới slides 69

Hình 3.19 Giao diện trang thông tin admin 69

Hình 3.20 Giao diện trang thống kê 70

DANH MỤC BẢNG

Bảng 2.1 Đặc tả use case Login 31

Bảng 2.2 Đặc tả use case View home page 31

Bảng 2.3 Đặc tả use case Search Product 32

Bảng 2.4 Đặc tả use case Filter Product 32

Bảng 2.5 Đặc tả use case View product detail 33

Bảng 2.6 Đặc tả use case Add product to cart 33

Bảng 2.7 Đặc tả use case Manage shopping cart 34

Bảng 2.8 Đặc tả use case Manage profile 35

Bảng 2.9 Đặc tả use case Manage self orders -Checkout 36

Bảng 2.10 Đặc tả use-case Manage self orders - Cancel order 36

Bảng 2.11 Đặc tả use case Manage self orders -Review product 37

Bảng 2.12 Đặc tả use case Manage self orders -View admin page 37

Bảng 2.13 Đặc tả use case manage product - add product 38

Bảng 2.14 Đặc tả use case manage product - update product 39

Bảng 2.15 Đặc tả use case manage product - delete product 39

Bảng 2.16 Đặc tả use case Manage product category - add category 40

Bảng 2.17 Đặc tả use case Manage product category - update category 40

Bảng 2.18 Đặc tả use case Manage product category - delete category 41

Bảng 2.19 Đặc tả use case Manage orders - Approve order 41

Bảng 2.20 Đặc tả use case Manage orders - Delete order 42

Bảng 2.21 Đặc tả use case Manage user account - Block account 42

Bảng 2.22 Đặc tả use case Manage user account - Add account 43

Bảng 2.23 Đặc tả use case Manage user account - statistic 43

Bảng 4.1 Testcase người dùng 74

Bảng 4.2 Testcase admin 76

DANH MỤC TỪ VIẾT TẮT

1

PHẦN 1: PHẦN MỞ ĐẦU

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

 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

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:

2

o Xây dựng một trang web bán nông sản với các chức năng cơ bản của một website thương mại điện tử

o Xem thống kê

o Thanh toán qua VNPAY, Paypal

o Tích hợp API Giao hàng nhanh để tạo đơn hàng tự động

o ChatGPT để nâng cao trải nghiệm người dùng khi mua hàng, đưa ra nhiều sự chọn lựa

o Live Chat Fanpage để giao tiếp người bán người mua

o Tìm kiếm bằng giọng nói để cung cấp nhiều hơn sự lựa chọn tìm kiếm sản phẩm

o Google Analytics để doanh nghiệp nắm bắt được tình hình kinh doanh nhằm đưa ra những phương án kinh doanh phù hợp

 Những công nghệ mà nhóm sẽ tìm hiểu để phục vụ cho việc hoàn thiện khóa luận:

o Frontend: ReactJS

o Backend: NodeJS

o Database: MongoDB

o Và một số library và framework như axios, sass, …

3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGUYÊN CỨU

3.1 Đối tượng nghiê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

- Mô hình website: MVC

3.2 Phạm vi nghiên cứu

- 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, …

3

- 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

3.3 Phương pháp nghiên cứu

- Phương pháp phân tích – tổng hợp lý thuyết: Nghiên cứu và tìm hiểu các tài liệu, ứng dụng liên quan đến các công nghệ, mô hình, lý thuyết cần thiết

- Phương pháp chuyên gia: Tham khảo ý kiến của Thầy hướng dẫn và từ những người có kinh nghiệm liên quan đến các vấn đề, nghiệp vụ của đề tài để tăng tính chính xác và đúng đắn

- 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ác chức năng cơ bản của một trang web bán hàng online như: đăng nhập, đăng ký tài khoản, cho phép người dùng truy cập website để xem thông tin sản phẩm và mua hàng, chức năng tìm kiếm sản phẩm và lọc sản phẩm, chức năng giỏ hàng và 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

5 KHẢO SÁT MỘT SỐ WEBSITE TƯƠNG TỰ

5.1 RauSach24h.vn

 Giới thiệu:

- Là một trang web mua bán nông sản về các sản phẩm về nông nghiệp của doanh nghiệp và sản phẩm đến từ vùng Tây Bắc mang tính chất đặc trưng cho vùng núi Tây Bắc

- Địa chỉ trang web: https://www.nongsantaybac.com/

- Địa chỉ trang web: https://nongsanantoanlongan.vn/

 Ưu, nhược điểm:

- Địa chỉ trang web: http://nongsanviet.net/

 Ưu, nhược điểm:

+ Ưu điểm:

- Đa dạng sản phẩm

5

+ Nhược điểm:

- 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

5.4 bachhoaxanh.com

 Giới thiệu:

- Là trang web về thực phẩm nông sản số 1 Việt Nam hiện nay, BachhoaXANH.com ra mắt để đáp ứng nhu cầu mua sắm trực tuyến của người dùng ở khu vực TP.HCM

- Địa chỉ trang web: http://nongsanviet.net/

 Ưu, nhược điểm:

- Địa chỉ trang web: https://minhphuongfruit.com/

 Ưu, nhược điểm:

6

- Khó tiếp cận với người tiêu dùng

7

PHẦN 2: PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

1.1 MÔ HÌNH MVC THIẾT KẾ WEBSITE

1.1.1 Giới thiệu

Mô hình MVC được viết tắt bởi cụm từ “Model-View-Controller” Mô hình này được ứng dụng trong việc xây dựng và phát triển ứng dụng Nó là một khuôn mẫu kiến trúc phần mềm để phát triển ứng dụng trên máy tính Mô hình MVC được xây dựng tạo bởi 3 thành phần, và các thành phần nó đảm bảo các nhiệm vụ và thực hiện các chức năng riêng biệt và độc lập Các thành phần của mô hình MVC gồm:

- Model (dữ liệu)

- View (giao diện người dùng)

- Controller (trung tâm điều khiển)

MVC là một design pattern phổ biến được rộng rãi khi cấu trúc một dự án Hiện nay nhiều dự án thực tế vẫn đang chạy trên mô hình MVC và được giảng dạy tại nhiều trường Đại học và các cơ sở giáo dục khác

Hình 1.1 Mô hình MVC

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 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: Đây là tầng xử lý các yêu cầu khi tiếp nhận của người dùng mang đến thông qua View Trong một Controller có cả View lẫn Model Nó nhận yêu cầu

và trả về dữ liệu tương ứng

Hình 1.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

- Sau khi xử lý yêu cầu xong thì Controller sẽ tiến hành gửi trả lại kết quả lại do View

và View sẽ tiến hành render kết quả lên trình duyệt hiển thị lại cho người dùng

 Lịch sử phát triển:

Mô hình MVC được phát triển bởi tiến sĩ Trygve Reenskaug khi ông đến trung tâm nghiên cứu Xerox Palo Alto (PARC) đưa vào ngôn ngữ Smalltalk-76 vào năm 1970 Từ đó việc triển khai trở nên phổ biến ở những phiên bản khác của Small- Talk Đến năm 1988,

- Kiểm thử phần mềm dễ dàng giúp cho việc phát hiện lỗi và khắc phục lỗi một cách nhanh chóng tiết kiệm thời gian

- Mô hình MVC được tách biệt với nhau giữa Model, View và Controller giúp thực hiện các phần một cách đột lập đây cũng là lợi thế chính của nó

- Vì tách biệt giữa các phần với nhau nên về phần Controller có vai trò kết nối giữa phần View, Model trên nhiều ngôn ngữ, nhiều nền tảng khác nhau

- Dễ bảo trì và mở rộng dự án vì chúng là cách phần tách biệt với nhau

- Vì mô hình MVC độc lập nên khi thực hiện dự án việc phân bổ các công việc cho developer không bị ảnh hưởng đến nhau giữa các phần giúp việc code được thực hiện song song tiết kiệm được nhiều thời gian

- Mô hình MVC hỗ trợ việc kiểm thử chương trình một các thuật lợi, hỗ trợ TTD giúp việc viết các chương trình unit test và viết test case

- Với mô hình MVC ở phiên bản mới nhất thì với việc thiết kế dự án website responsive để tương thích với nhiều thiết bị đã được hỗ trợ Chỉ cần tạo View phù hợp đối với các màn hình mà ta muốn sử dụng trên dự án

 Nhược điểm:

- Ngoài những ưu điểm nêu ở trên khi sử dụng mô hình MVC có được thì cũng có những giới hạn cần phải khắc phục

- Mô hình mvc thì phù hợp với đa số các dự án về website hoặc một số dự án nhỏ lẻ

vì cấu trúc khá cồng kềnh và thời gian triển khai

- Không thể thực hiện việc xem trước để đánh giá như ASP.NET

- Triển khai khó khăn

1.1.2 Triển khai vào xây dựng website

1.2 CÔNG NGHỆ MERN STACK

1.2.1 Giới thiệu công nghệ MERN Stack

MERN Stack là công nghệ được gộp bởi MongoDB, ExpressJS, ReactJS và NodeJS là một

tổ hợp các công nghệ cũng như ngôn ngữ xây dựng website

 MongoDB: MongoDB là một database hướng tài liệu (document), một dạng NoSQL database Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database để thích ứng với các tài liệu như JSON có một schema rất linh hoạt gọi là BSON MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ các các kích cỡ và các document khác nhau Các dữ liệu được lưu trữ trong document kiểu JSON nên truy vấn sẽ rất nhanh Ngoài ra, MongoDB là một

cơ sở dữ liệu đa nền tảng, hoạt động trên các khái niệm Collection và Document, nó cung cấp hiệu suất cao, tính khả dụng cao và khả năng mở rộng dễ dàng

 ExpressJS: Expressjs là một framework được xây dựng trên nền tảng của Nodejs

Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile Expressjs hỗ trợ các method HTTP và middleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng

 ReactJS: Reactjs là một thư viện Javascript mã nguồn mở hỗ trợ xây dựng các thành phần giao diện nhanh gọn và tiện lợi Bình thường các lập trình viên sẽ nhúng javascript vào code HTML thông qua các attribute như AngularJS nhưng với Reactjs làm việc như một thư viện cho phép nhúng HTML vào javascript thông qua JSX Qua đó có thể dễ dàng lồng các đoạn HTML vào trong JSX làm cho các component dễ hiểu và dễ sử dụng hơn

 NodeJS: Node.js là một mã nguồn mở, cross-platform, back-end Javascript môi trường thời gian chạy mà chạy trên các động cơ V8 và thực thi mã JavaScript bên

11

ngoài một trình duyệt web Node.js cho phép các nhà phát triển sử dụng JavaScript

để viết các công cụ dòng lệnh và cho kịch bản phía máy chủ — chạy tập lệnh phía máy chủ để tạo ra nội dung trang web động trước khi trang được gửi đến trình duyệt web của người dùng Do đó, Node.js đại diện cho mô hình "JavaScript ở mọi nơi", hợp nhất ứng dụng web phát triển xung quanh một ngôn ngữ lập trình duy nhất, thay

vì các ngôn ngữ khác nhau cho các tập lệnh phía máy chủ và phía máy khách

1.2.2 Xây dựng website với MERN Stack

Triển khai xây dựng dự án với MERN Stack:

 MongoDB: Đóng vai trò là database trong đề tài nghiên cứu Giúp lưu trữ và quản

lý đối với dữ liệu Đảm bảo lợi thế của một NoSql

 ExpressJS: Việc triển khai express vào dự án giúp hỗ trợ xử lý những công việc như sau:

- Thiết lập các lớp trung gian để trả về các HTTP request

- Định nghĩa router cho phép sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL

- Cho phép trả về các trang HTML dựa vào các tham số

 ReactJS: ReactJS giúp tiến hành xây dựng phần View để hiển thị thông tin cũng như các chức năng của trang web cũng như giúp người dùng thao tác với trang web giúp website ghi nhận thông tin hành vi của người dùng

 NodeJS: NodeJS đảm nhận vai trò là backend trong dự án xử lý các tác vụ và logic của phía server

1.3 CHAT GPT

1.3.1 Giới thiệu về ChatGPT

ChatGPT là một chatbot được hỗ trợ bởi AI có thể tổ chức các cuộc trò chuyện với người dùng về nhiều chủ đề Nó sử dụng quá trình xử lý ngôn ngữ tự nhiên để hiểu và phản hồi đầu vào của người dùng, đồng thời có thể cung cấp thông tin, trả lời câu hỏi hoặc tham gia vào cuộc trò chuyện thông thường ChatGPT được thiết kế thân thiện với người dùng

Hình 1.3 Trải nghiệm của người dùng với chatGPT

13

1.3.2 Các bước nhúng ChatGPT vào website

Các bước cụ thể để nhúng ChatGPT vào website như sau:

https://chat.openai.com/auth/login để đăng ký tài khoản

- Bước 2: Sau khi đăng ký tài khoản ta truy cập trang https://platform.openai.com

và đăng nhập với tài khoản vừa mới tạo

- Bước 3: Tạo API key:

Nhấn nút: “Create new secret key” để tạo 1 API key mới

Hình 1.4 Tạo một API Key mới

- Và lấy API key tại trang web https://gptgo.ai

14

Hình 1.5 Trang web lấy key API

- Bước 4: Sau khi có api key ta sẽ viết api để kết nối đến server chat GPT, đoạn code tích hợp chat GPT sử dụng NodeJS:

15

Hình 1.6 Tích hợp vào code

chatbox hoặc ở đâu đó trên trang web

+ Code mẫu sử dụng reactjs:

`Chào mừng bạn đến với HFood shop! Hãy đặt câu hỏi cho tôi nhé!

Ví dụ: Cách nấu canh bí đỏ Hoặc công dụng của trái cà chua

17

title="Chat với AI"

subtitle="Chat GPT - AI"

18

Hình 1.8 Live chat fanpage Facebook 1.4.2 Nhúng live chat fanpage Facebook vào trang web

Các bước thực hiện:

19

- Bước 1: Đăng nhập vào tài khoản Facebook của và chọn mục "Công cụ doanh nghiệp" (Business Tools)

- Bước 2: Chọn "Trang" (Pages) và tìm trang mà ta muốn nhúng vào website

- Bước 3: Tại giao diện trang quản trị viên trang, chọn "Cài đặt" (Settings) ở phía trên bên phải

- Bước 4: Tại cài đặt trang, chọn "Mục Tiếp thị" (Marketing) và sau đó chọn "Trình đơn nhúng" (Embeddable Menu)

- Bước 5: Trên trang nhúng, ta có thể tùy chỉnh menu theo ý muốn, sau đó nhấp vào "Tạo mã nhúng" (Generate Embed Code)

- Bước 6: Sao chép mã nhúng đã tạo và chèn nó vào trang web của chúng ta, ở đây

có thể dùng một số plugin tiện ích như Facebook for WordPress

- Bước 7: Lưu thay đổi và kiểm tra xem Facebook đã xuất hiện trên trang web của

ta chưa

Code cần nhúng vào Project:

<! Messenger Plugin chat Code >

<div id="fb-root"></div>

<! Your Plugin chat code >

<div id="fb-customer-chat" class="fb-customerchat">

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 có thể Thông thường, các đơn vị giao hàng nhanh sử dụng các phương tiện vận chuyển nhanh như máy bay, xe tải, xe máy để đảm bảo thời gian giao hàng nhanh chóng và an toàn Dịch vụ giao hàng nhanh thường được sử dụng trong các trường hợp cần

21

giao hàng gấp hoặc giao hàng đến những địa điểm khó tiếp cận Giao hàng nhanh là một trong những dịch vụ quan trọng trong lĩnh vực vận chuyển hàng hóa và đóng góp không nhỏ cho sự phát triển của nền kinh tế

Nhờ những lợi ích như thế dự án website bán nông sản đã tiếp hàng sử dụng API của Giao Hàng Nhanh để tiếp hành tối ưu hóa việc đặt hàng cho người dùng tiêu biểu như những chức năng như:

 Đăng ký tài khoản và lấy token trên trang web của giao hàng nhanh

https://sso.ghn.dev/v2/ssoLogin

màn hình để xem thông tin cá nhân

Hình 1.9 Đăng ký thông tin tài khoản giao hàng nhanh

22

Hình 1.10 Lấy token giao hàng nhanh

 Tính giá cước vận chuyển:

Cấu trúc của api tính cước vận chuyển của GHN có dạng như sau:

a API: order/fee

https://online-gateway.ghn.vn/shiip/public-api/v2/shipping-b Method: GET/POST

c Header: token, shop_id

d Param:

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

23

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)

1.6 TÌM KIẾM BẰNG GIỌNG NÓI

1.6.1 Giới thiệu

Nhằm nâng cao trải nghiệm người dùng với trang web bán nông sản thì chức năng tìm kiếm bằng giọng nói hoàn toàn cần thiết Nó giúp những người không quen với công nghệ hoặc không thể gõ phím dễ dàng tìm kiếm được sản phẩm mong muốn [11]

24 Kết quả: